Turning sites into packages for composable websites

Wrap your head around one of the most powerful concepts that Gatsby opens up: themes. Composable chunks or your website reusable across projects.

For an example of the methods used in this tutorial, check out this free Egghead screencast that shows how to use the docz Gatsby theme:

Useful tricks for debugging, formatting, and efficiency

The console is one of the first tools developers learn about. The console is the tool developers use when debugging their own applications. The law of the instrument states that it’s easy to develop overconfidence in a familiar tool.

“I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.” -Maslow

The same idea can be applied to the console. In an ecosystem where tools, keyboard shortcuts, and API’s flow like milk and honey in the promised land, it’s hard to justify picking up a new hammer when…

Tools for conquering the process from Idea -> Design -> Development -> Deployment

Like many people, I have no shortage of ideas for apps that don’t genuinely need to exist. I tend to hold onto those ideas waiting for some imaginary occasion where free time is abundant and I can build all of them with no thought of income or expense. For me, oftentimes the hurdle to completing a side project isn’t knowing how to do something, but finding the motivation and time to bring it to fruition.

That’s why I set a goal to launch a side project in 10 days.

This post isn’t about the advantages of building with a new…

Export to React, after designing in Sketch, and tweaking keyframes in Haiku.

Making Animation Approachable

Being a wizened guru of CSS used to be a barrier for entry to designing complex motion animations. Libraries like Lottie by AirBnb came around to make things easier for mobile by rendering animations from Adobe After Effects on iOS, Android, and React Native.

Haiku is a new hybrid code/design tool that aims to make motion animation simpler. It lets you import Sketch files that can then be animated on a timeline akin to that of After Effects. It’s free (for now) while it’s in preview, and like After Effects, is compatible with Lottie. …

If you’re like me, you jump through a lot of hoops to get Sass or Less to cooperate with a project, just to make it easier to add some variable colors and expressions to the styles throughout your codebase.

A new feature of native CSS called Custom Properties can create reusable properties across stylesheets for you, without needing the preprocessor 🙌 In order to use them, prepend a -- to the front of the variable name of your custom property and define it like normal:

:root { --primary-theme-color: #FDAB37; /* orange */ --secondary-theme-color: #4275B0; /* blue */ --thickness: 5px; --size…

Shave off hours of work with a simple to use React component built for images. Optimizing images hardly sounds like an ideal afternoon of work, but in today’s world it’s become a necessary evil. This post looks at how it can be done much easier using gatsby-image.

For practical examples of methods used in this tutorial, check out this free playlist of Egghead videos that show how to use Gatsby Image:

Taking the time to crop down all your photos to different sizes, tinker with color depth and compression on your PNGs and JPEGs, write media queries for all the…

Kyle Gill

Developer | Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store