A Few of My Favorite Things: 2018

misc

Most of these I actually didn't come across in 2018. Since this is the first year I'm doing this I'll include things I've found useful and enjoyed using the past few years.

Sections


Recharts

Flexbox

Tachyons

Typescript

Akimbo

Sumpin' Easy Ale

Recharts


On my current project I need to build a few reusable charts for a dashboard. Some complex and a couple basic ones. While checking out libraries I found Recharts. It's an excellent chart component library for React. I tried a few other ones and liked Rechart the best by far. It has good documentation, is pretty easy to customize, and is composable. By combining Rechart components you can make fairly complex charts.

I usually don't like using component libraries since they can be hard to customize and often don't work as advertised. I feel like I have to shoe horn them into my use cases. Most of the time I like making components myself. I've made chart components in Angular with d3 in the past. Working directly with d3 can be tedious though so Rechart is a great way to save some development time to make great looking charts. I highly recommend it!

Flexbox


Flexbox has been widely supported for a few years by browsers. I quite often find developers not using it which always surprises me. Maybe it's utilized more than I realize but it seems to me an underused css feature. It makes layout a breeze and easy to reason about. No more dealing with unruly floats or having to use clearfix. It also works great for vertical positioning.

This article from CSS-Tricks is my go to reference for it.

Tachyons


Another tool I often use in the css vein is the css utility library Tachyons. It's small at 14kb, uses rems, and uses steps for property values. For example the tachyons class pr1 is padding-right: 0.25rem and pr2 is padding-right: 0.5rem. This facilitates html elements having proper spacing and being laid out nicely. I find that when I use it my projects look well designed and are easy to tweak.

It follows atomic css principals which define classes like the padding examples above. With atomic css you define classes that have a single purpose with their names usually being shorthand for what they are. A lot of times I start mocking out projects with it then refactoring them into bigger classes if I find myself repeating the same classes on certain elements.

I find I write less css and it's less cumbersome using atomic css or a toolkit like tachyons. Using it doesn't interrupt my development Flow as does having to go to a css file to write a bunch of classes. In large projects it cuts down on bloated css files. I also think in the long run it leads to less brittle styles.

A lot of developers push back against this idea but in practice it makes webpages quick to build and easy to change.

I use Tachyons in all my personal project and have for some professional ones. If I don't use it for a particular project I end up making a handful of utility classes that follow the Tachyons class pattern.

Typescript


Typescript is a great addition to a front end stack especially working on projects with others. It's nice to have the enforced strictness on larger and shared codebases. There's always a dev or two that disregards code standards and rampages through the code base. Typescript and related tooling helps to mitigate that a bit. I've used it with Angular, Vue and React and found it to work well with all three. I especially like React + TS. I miss intellisense when not working on TS codebases now.

The current project I'm on uses Flow which just doesn't work well. It not being enforced at compile time and it's speed are the biggest downsides. In Flow the types end up being more of a suggestion. It's left up to the developer to do things properly. Flow can be a hog on the CPU as well. Every once in a while my CPU spikes requiring me to shutdown VS Code and kill all Flow processes. There are many github issues of others reporting this. This seems to happen to most of the people working on the project. I've also seen it catch type errors on one developers machine but not on another's. Typescript however continues to be improved and a large user base. Babel 7 also recently added support for it.

Akimbo


Akimbo is a podcast by Seth Godin. I never miss it and look forward to it every week. His topics cover a fairly wide range of issues like creativity, education, work, technology, and whatever else he feels like talking about. I like his manner of delivery and to the point, outside of the box, well thought out dialogues. He largely draws on his experience from marketing, the book industry and life in general.

He's considered a marketer but I think of him more as a communicator. Maybe I have a shallow idea marketing. I've always considered it at its best getting a brand's message and/or product recognized and at its usual trying to get people to buy something they don't need or do something they probably don't need to do. Mostly by playing on people's hopes or fears. Godin's work goes deeper than that though touching on how we know what we know, why we do what we do, and the underlying systems of modern life.

His blog is good too.

Sumpin Easy Ale


Lagunitas makes great beer! I like almost everything they make. I especially enjoyed their Sumpin Easy Ale this year. It's crisp, has just the right amount of hops, and a nice citrus finish. At 5.7% ABV it's not too light and not too strong either. It's just right all around.

Links


Recharts
Tachyons Akimbo
Seth Godin's blog
Sumpin Easy Ale