It was a desire to create games that motivated Phil to learn to program on 8 and 16-bit computers. Then the web came along. He now applies the things he learned in his childhood to making interactive websites.
showing 9 lessons...
React Playground Styled is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap it in your own component to provide sensible defaults that make it blend with the look and feel your style guide.
In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.
However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.
When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.
Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use
window.devicePixelRatio to create a canvas that is responsive to pixel ratio.
redux-swarmlog is a helper library enabling Redux applications to sync peer to peer over WebRTC. It takes just five minutes to make the standard Redux TodoMVC network enabled.
In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.
React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like
:active. By using Radium to listen to mouse events we can restore
:active selectors to inline styles.