DEV Community: Brett Stevens

My coding playlist

Brett Stevens — Fri, 26 Jun 2020 15:22:38 +0000

It's a compilation of songs I've been listening to over the last year.

I usually opt for songs with a steady beat and no lyrics, but there are some bangers in there (looking at you, Alesso).

I'll occasionally listen to upbeat, high tempo music with lyrics because it improves my mood, which makes me more productive.

My most productive artist is probably Brasstracks. I'm also a big fan of Vitamin String Quartet.

I'll be continuing to add more music, but I'm always looking for new songs and suggestions.

Share your playlists below in the comments!

It’s alive! Simple CSS animations in CodePen

Brett Stevens — Fri, 25 Jan 2019 00:30:06 +0000

After stumbling upon the Dogs of CodePen, I thought it would be fun to try animating our company mascot, Cody.*

Whether you’re new to coding or just interested in making an animation for fun, here’s how you can make your own.

First, I partitioned Cody into four parts—a head, body, left arm, and tail—using Figma. These were the parts I wanted to animate in my CodePen.

Next, I exported these partitions to SVG and uploaded them to a URL encoder. Asset uploading is a pro feature of CodePen, but there are several different ways you can use Data URIs instead of uploading assets. I am using the Data URI as the background-image property.

Then I created a parent <div> element for the body and nested a child <div> element for the tail, arm, and head. I set the position of the parent element to relative and the position of each child element to absolute (if you need some refreshing on CSS positioning, here is a good guide).

I used keyframe-based syntax to create a tail wag, subtle thumbs-up motion, and a slowly unraveling tongue.

Last but not least, I made a simple Javascript function to add and remove classes when you click anywhere on Cody.

Happy coding!

*More about Cody: Cody is our robot AI puppy-persona whose mission is to help developers improve their craft. Cody is a border collie, one of the world’s smartest dogs and was created by Simon Oxley (the creator of the Twitter bird and the GitHub Octocat).

Building simple data visualizations with React

Brett Stevens — Thu, 17 Jan 2019 00:54:44 +0000

If you’re looking for an alternative to building your own custom charts using D3, there are a lot of great React charting libraries out there (like Victory by Formidable Labs, Recharts, and React Vis by Uber, to name a few).

I personally like Nivo because it has an interactive documentation site. You can adjust the chart properties using toggles in the UI to quickly visualize and iterate on your design.

There are also lots of examples (or “recipes”) and an active community on Discourse. The charts are responsive and some have an API, which can be useful if you want to render your charts server-side. Not to mention, the Nivo library is free, open source, and actively maintained.

Here’s a live example of a chart I built using Nivo that shows how many hours I coded during and outside of my normal work hours during a week in December.

If you’re interested in using Nivo for your own project, here’s a brief overview of how I built this chart.

First, I chose to build my project on StackBlitz. I like to use StackBlitz to quickly prototype my data visualizations and see what they look like with actual data. I also like CodePen, CodeSandbox, and JSFiddle, but my favorite thing about StackBlitz is that it’s powered by Visual Studio Code, which is my code editor of choice.

Next, I imported my dependencies. For this chart, I imported @nivo/bar and Material, since I also used a few Material UI components.

My data came from my Software.com plugin for VS Code (I’m on the team at Software - check us out!). I stored it as a constant in its own file (item.js) and imported it into my main file (workLifeBalance.js).

Since my data isn’t in the exact format that is required for the Nivo bar chart, I did some light array manipulation to map my data to the Nivo structure (see data.json for that structure), which is also clearly documented on the Nivo site.

Mapping data from our an API response to Nivo’s structure. Snippet using Carbon.

The last step was to pass my data as a property into the custom bar chart component (BarChart.js) I created using Nivo. If you want to reuse your Nivo charts but with different stylistic elements, you can also make those properties customizable. For instance, I made another chart that uses “grouped” instead of “stacked” bars, so I made that a variable.

Bar chart component. Snippet made using Carbon.

You can add some fit and finish by customizing the Nivo theme. If you’re looking to customize the theme more than I did, see this file in the Nivo GitHub repository.

That’s it! If you’re interested in building your own Nivo chart, you can fork this chart and plug in your data. And if you want to see what your work-life balance and the rest of your coding data looks like, check out Software.com!

What are your favorite chart libraries for React?