Open-source contributions, personal projects, and client work
Nuggets is a collection of easy, bite-sized tutorials and developer tools in the web development world. They're designed to help newer developers learn new technologies. Ideally you could get value out of these in just a couple hours on a Saturday afternoon.
The first time I wrote a big ol' blog post it was about CSS Layout. Since it was out in the world with my name on it, I had to *really* make sure I knew what I was talking about. And I was shocked at how much this helped me cement these ideas. Since then, I've been making these mini-turotials to make sure I'm cementing the new technologies I learned.
Currently, Nugget's includes the following tools:
On the Grid
On the Grid is perhaps my favorite small project I've ever worked on. It's a sandbox of sorts for playing with CSS Grid. Now that Grid is almost fully supported in the browsers, it's really starting to take off. The API can be a bit confusting, which is why I built this thing. It's written in pure front-end magic: JS, HTML, and CSS.
There's a sandbox mode as well as a tutorial mode.
Gatsby.js Documentation Starter
I created and contributed one of the most used stater packs for the amazing GatsbyJs Static Site Generator. Gatsby uses the power of React, React Router, and GraphQl to make blazing-fast static sites that are enjoyable to create.
The starter that I built is perfect for making docs or tutorial sites super fast. It's ready to go out of the box with:
- auto-generated Table Of Contents
- basic UI
- a few UI components
- React Icons
- a custom PrismJs theme
- auto-generated tags and category pages
- supports blog posts and documentation
- Google Analytics
- Disqus comments
Flutter Google Map View Plugin
I work for a company that already uses Google's Flutter cross-platform framework in production, even though it's in alpha. Naturally, there's a lot of features that it doesn't have yet, the most notable being Google Maps. The Flutter team assures everyone that it's coming, but who knows when. We have to have maps, so we wrote our own plugin.
I contributed the StaticMaps api. This portion of the plugin allows the user to create static map views on the fly using Google's static-maps-api. Static maps are just that: static. Using the API, you can create simple images that are of the area you pass in, has markers where you tell it, etc.
To accomplish a nice developer experience, we leveraged Dart's uri library, the maps API, and OOP principals to create an API that let's you easily place multiple markers, render maps, and rerender as needed.
Click here for a static maps example Github repo.
The examples and demo site are from before the content was changed by the owner
When I joined the team at AppTree, the company had an outdated website built with SquareSpace. Like any good startup, there just wasn't time to work on a website when the product had unlimited work to be done. constructor
Being obsessed with Gatsby, I took it upon myself to build an unsolicited new site. Luckily they were happy to have it and it wasn't in vain.
The website is, above everything else, a sales page for AppTree's enterprise product. That led me to make the decisions that I did. I really only had 3 goals from a design standpoint:
- The front page should guide the user down the page.
- Very subtle use of delight, because the important part is the content.
- It should be easy to find the information the user is looking for.
From a technical standpoint, I used Gatsby. Gatsby is a Static Site Generator built over top of React. It's extremely performant and has a really simply content / blogging system. I don't know that there's a better way to build a static site in 2017.
Some features that I'm most happy with:
- The blogging section:
- This is the best looking part of the site, IMO. I took a very minimalist approach. The content is definitely the focus. I also took an approach that it's taken me a long time to learn: simple color palettes are better!
- The syntax highlighting:
- This is part of the blogging section, to be sure. But I really like the syntax highlighting them I went with here. Again, I went with the less is more approach. I might use this syntax highlighting on my personal page.
- This pure CSS Grid pricing table:
- This is definitely *not* the best way to do it. But it took some real CSS-muscle-flexing to accomplish. I'm happy with how it turned out.