Egghead Instructor Phil Holden

Phil Holden

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.



Unlock all of Phil's PRO Lessons
click for instant access!

Browse Phil Holden's lessons.

showing 9 lessons...

React Playground Styled for Component Docs

Recompose: ButtonGroup - When nesting affects Style

Recompose: Theme React Components Live with Context

Recompose: Override Styles & Elements Types in React

Make Canvas Responsive to Pixel Ratio

Setup Nuclide to use Flow and Eslint (Mac)

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

P

Radium: Updating Button Styles via Props

Styling a React button component with Radium

react tutorial about React Playground Styled for Component Docs

React Playground Styled for Component Docs

6:27 react

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.

react tutorial about Recompose: ButtonGroup - When nesting affects Style

Recompose: ButtonGroup - When nesting affects Style

8:23 react

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.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react

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.

react tutorial about Recompose: Override Styles & Elements Types in React

Recompose: Override Styles & Elements Types in React

5:54 react

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.

js tutorial about Make Canvas Responsive to Pixel Ratio

Make Canvas Responsive to Pixel Ratio

1:06 js

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.

react tutorial about Setup Nuclide to use Flow and Eslint (Mac)

Setup Nuclide to use Flow and Eslint (Mac)

7:18 react

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how.

react tutorial about Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

5:30 react PRO

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.

react tutorial about Radium: Updating Button Styles via Props

Radium: Updating Button Styles via Props

0:47 react

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 tutorial about Styling a React button component with Radium

Styling a React button component with Radium

1:29 react

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 :hover and :active. By using Radium to listen to mouse events we can restore :hover and :active selectors to inline styles.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?