Frontend Developer Resources 2020
It’s 2020, post year in review, so let’s start off with some 2020 content.
I've been using @unDraw_co for illustrations on my site and changed them up tonight. I like the little round creatures that have been added. I give you exhibit A, https://t.co/xImfXLn5Po pic.twitter.com/L3rsEXDvOd— Nick Taylor (he/him) (@nickytonline) January 5, 2020
I was updating my personal site the other day and thought, why don’t I write about some of the tech I’ve been using, some tools I use in my day-to-day as well as other resources that I use, even if they aren't everyday "go-to"s in regards to frontend. I've also popped in some resources that I think will just be helpful.
Let's get to it!
Open-Source and Free Resources permalink
I use Netlify on the free tier to host my site. They offer a great service and it integrates well with GitHub and continuous integration. I am not cheap, it is just that at the moment, I do not need more than the free tier. I actually went over my build minutes last month and paid a small fee, so now that they have my credit card... 😆
I wrote about automating my deployments to Netlify here. 👇
Update Dependencies with Dependabot, Cypress and Netlify
Note: Zeit is amazing as well. I just happen to be using Netlify.
Lighthouse CI permalink
I have not used this on a project yet, just the Lighthouse audit tools in the browser, but Lighthouse CI looks pretty amazing. Integrate Lighthouse audits into your continuous integration (CI).The https://github.com/GoogleChrome/lighthouse-ci repository on GitHub
This site is amazing if you're looking for some quality illustrations in SVG or PNG format. Katerina Limpitsouni, who created undraw.co has done some fantastic work. She's not on DEV, but give her a follow and undraw on Twitter.
a11y tools permalink
I am not an accessibility expert (so many things in the frontend! 😆), so tools like the ones below are super helpful. Someone who knows quite a bit about this topic though, is Lindsay Kopacz (@lkopacz). Definitely a great follow.
This is a great accessibility visualization toolkit that was started by Jordan Scales while he was working at Khan Academy.The https://github.com/Khan/tota11y repository on GitHub
Fun fact, I converted it to a Chrome/Firefox extension for those interested.
An a11y extension coming to a browser near you
Deque's axe browser extension is another great one. It is available for Chrome and Firefox. It's great for finding accessibility issues in your app.
WebAIM's WAVE browser extension is great as well for finding accessibility issues in your app.
@wesbos has great courses. He teaches things so well and in a fun way. cssgrid.io is a great course for learning CSS grid that Mozilla sponsored, which is how Wes was able to make this course free. I highly recommend it. Note to self to go through this course again.
Every Layout permalink
I purchased Every Layout while on sale last year, but the site content is all free. Andy Bell (@hankchizljaw) and Heydon Pickering do an amazing job.
Some Staple Sites permalink
There are tonnes of sites out there, so I'm just going to drop a few since this post is already an 11 minute read LOL.
Know Your CSS Triggers permalink
I do not know the list of all CSS triggers by heart, so CSS Triggers is a great resource.
Also, speaking of CSS Tricks, here's a short but quick explanation by Chris Coyier (@chriscoyier) about CSS triggers.
Kata Time permalink
One that I revisit every now and then is JS Katas, previously called ES6 Katas. This is a great way to keep your JS skills fresh.
Learning Gamified permalink
This is a great genre of learning. There are paid resources, but a couple of notable free ones are:
Anything Stephanie Eckles permalink
All the below resources can be found at Stephanie's web site.
- ModernCSS.dev - Modern CSS solutions for old CSS problems
- smolcss.dev - Minimal snippets for modern CSS layouts and components
- 11ty.rocks - A great Eleventy resource
- stylestage.dev - A modern CSS showcase styled by community contributions
This one, I will admit, is probably overkill for my personal site which is currently pretty much just a blog, but at my current job, we're not using TypeScript, so I decided to keep my TypeScript skills fresh by using it.
Having said that, I've worked on several large projects using TypeScript and can 100% say, it allows for quicker refactorings, discoverability and avoiding silly errors. I have a mini-series on TypeScript for those interested.
Consider Using TypeScript
If you've been on the fence about TypeScript, consider giving it a try in 2020. There is a huge ecosystem of types now and a lot of the popular frameworks either provide out of the box support or pretty easy setups to get going with TypoScript:
- React via Create React App. TLDR;
npx create-react-app my-app --template typescript
- Angular (TypeScript out of the box)
- Vue with [some simple setup] (https://vuejs.org/v2/guide/typescript.html)
- Next.js (TypeScript out of the box)
- NestJS has a TypeScript Starter project
There is also TSDX, which is some fantastic work by Jared Palmer (@jaredpalmer). It's a great bootstrapping tool for TypeScript for different types of projects and it's officially endorsed by the TypeScript team.The https://github.com/jaredpalmer/tsdx repository on GitHub
And you know what? If you're still not a fan of types, that's OK. 😺
Philip Roberts talk at JSConf EU "What the heck is the event loop anyway?" is a great explanation of the event loop.
Jake also has a great blog post about Tasks, microtasks, queues and schedules.
Storybook is such a great tool for building components and design systems. It started off as a tool just for React and since then has expanded to all the major frameworks as well as plain old HTML. Check out learnstorybook.com.
The Keyframers permalink
I will be the first to admit that I have not done a lot of work with animations, so I tend to Google stuff a lot when it comes to this space. Two gentleman that are experts in animation though have a great podcast and YouTube channel where they rebuild animations. The Keyframers is an awesome collaboration by @davidkpiano and @shshaw.
One of my favorite @keyframers episodes this past year:— Shaw (@shshaw) December 31, 2019
Animating a chocolate button with clip-path!
What was your favorite episode or animation?
I still have many episodes to watch and to learn from.
VisBug Browser Extension permalink
A newer frontend tool out there that looks really interesting is VisBug. I tried it out briefly, but I must admit, I have not dug into this too deep yet.
This is the handy work of Adam Argyle.
Update January 8th 2020: Adam Tweeted back to me that you can launch tota11y from VisBug. Cool stuff. Thanks Adam!
great article!!— Adam Argyle (@argyleink) January 8, 2020
btw, you can launch tota11y from visbug, it'll proxy run it so you dont need both installed 👍
- in the search box, type "/tota11y" to invoke the plugin
- close visbug (since it competes with tota11y)
- rejoice and accessibility inspect your heart out
Note: This browser extension is currently only available for Chrome.
Your Browser's Developer Tools permalink
This might sound like an obvious tool, but I have worked with people who do not use them that much.
Someone that knows these tools well and that I highly suggest you follow is Umar Hansa (@umaar). He is on DEV and has no activity, but links in his bio can lead you to other places to find him on the web. He has a great newsletter for dev tips, that I highly recommend subscribing to.
Playing in Traffic permalink
What's going on with your web requests? Looks like there is a traffic jam. These tools have your back:
- Fiddler (cross-platform, but at the moment, it's only decent on a Windows machine.) Fiddler was my go-to for anything network related when I was on a Windows machine. Replaying requests, modifying payloads, proxying through it to capture traffic from the site/application you're working on.
Launching Hoppscotch v1.0 👽 - free, fast & beautiful API request builder 🎉
Josh Comeau's Picks permalink
Josh Comeau is a talented frontend who currently works for Gatsby. He Tweeted during the holidays some other great open-source/free resources that I suggest you check out. Here's the Tweet thread. He's also a great follow.
Happy New Year!!— Josh W. Comeau (@JoshWComeau) January 1, 2020
I know many of you work on side-projects, projects where you don't have the benefit of a product & design team. I'm betting a bunch of y'all have goals to create something new in 2020!
Thought I'd share a thread with all my favourite resources:
DEV has so many great posts from people from all over the globe in regards to frontend. I'll share some that I love, but definitely navigate around. So many great ones.
HTML can do that?
JS Event Loophttps://t.co/tRNpJS5DGp
JS Scope (Chain)https://t.co/CF4LluhXeX
JS Hoistinghttps://t.co/TVg3lBqhAm https://t.co/gex16Fu0Ou
Michael Chan's React Holiday Series
Learn React in 25 Short Lessons — React Holiday 2019 ⚛️🎄
Visual Studio Code permalink
This falls under the obvious category probably, but it's worth mentioning it since it is open-source.
This has been my go-to editor for work-related stuff since believe it or not 2015. Back in 2015, I was working on a product for an e-commerce company and TypeScript was to be used in the frontend. At the time, VS Code was the only editor to have TypeScript support. Back in 2015, there were no extensions for VS Code. It was only about a year and a half later that extension support was added. Since then, the extension ecosystem has exploded.
A great addition to the ecosystem has been the Live Share extension pack. This is such a great way to do pair programming. 🍐
📣 Live Share sessions work best with a real-time chat going alongside @code. If you want something simple to start collaborating, you can grab the Live Share extension pack (https://t.co/6jpLIkLi0w) and get integrated text and audio chat, without _any_ extra tools or sign-ins 🙌 pic.twitter.com/EgZrL0O0nI— Jonathan Carter (@LostInTangent) December 18, 2018
If you're interested, it is a little outdated, but here is my VS Code setup. These days, I roll with Sarah Edo's Night Owl theme and the wonderful font, Dank Mono (yes I paid for it, but it's nowhere near the price of Operator Mono).
My Visual Studio Code Setup
VS Code Tips permalink
I created the @vscodetips Twitter account back in September 2017. People seem to enjoy the tips I post or things I retweet related to VS Code. If VS Code is your jam, consider giving it a follow.
VS Code tips is also on DEV, but I have not done much there yet. You can check out the profile here
Refined GitHub Browser Extension permalink
Refined GitHub is not frontend specific, but a lot of us use GitHub for work. It's a great extension available for Chrome or FireFox. The Chrome extension also works for some Chromium-based browsers. The ones I can confirm it does work on are Brave and the new Microsoft Edge.
There are too many features to mention, but my favourites are automatically deleting a branch after it is merged, and prompting you to create a PR if you're on GitHub and just pushed a branch or made changes to a branch that currently does not have a PR open.
The extension integrates so well, I no longer know what is a new GitHub feature or a Refined GitHub feature.The https://github.com/sindresorhus/refined-github repository on GitHub
Online Editors/Playgrounds permalink
More and more development is being done directly on the web, whether it be proof of concepts or full-blown apps. So much has happened in this space in the past few years. 👏
Here's some staples:
Paid Tools/Resources permalink
I do not have any affiliate links in any of the stuff posted below. They are just great resources that help me. Let's get started.
Refactoring UI permalink
I purchased the Refactoring UI book last year and loved it. I've given it a full read and will probably give it another read. The price varies depending on the type of package you go with. I got a great pre-release sale deal, so I grabbed the whole enchilada.
There is also a YouTube channel that you can subscribe to or just search for Refactoring UI on YouTube.
Also, Steve Schoger (@steveschoger on Twitter), one of the authors of the book, Tweets a lot too about Refactoring UI. A great follow.
Every Layout permalink
As mentioned above, I purchased Every Layout. This is a great buy and the additional resources are great. I've been reading the ebook (not finished yet) and have really been enjoying it. Great work Andy and Heydon!
There are browser extensions that do part of what xScope does, but a few years ago, a co-worker introduced me to xScope. The only downside to this tool is that it is only available for Mac. If you are on a Mac though, I highly recommend it.
Sizzy is a new one in my toolbelt, but so far I am loving it. I snagged it at a great price during Boxing Day week. In a nutshell, it allows you to work on a site or application and see how it appears in different devices. It has more to it than that, but I am still new to it, so I probably haven't unleashed all its awesomeness yet. Kudos to @thekitze for building this awesomeness.
Learning through Video permalink
These will most likely not come as a surprise, but it's worth mentioning them.
- Egghead (a happy subscriber)
- Frontend Masters (a happy subscriber. Thank you for the subscription Shotgun (my previous employer)!)
- Anything Wes Bos. Check out his courses.
Also, there is a new kid on the block, Educative. Looks like they are gaining some traction, so probably worth checking out as well. They're also on DEV, posting great content.
That's All She Wrote permalink
There are so many resources out there but this is what my current brain dump brought to the table and at some point we all have to go to the bathroom. 😆 I probably could have organized this better, but for now, this is how the dump came out.
If you have resources not listed that you think other frontend developers would benefit from, drop them in the comments! I hope you enjoyed the read and you can go to the bathroom as well now.
Until next time peeps!
The cover image is a partial screenshot of my site's thank you page, but the illustration comes from the wonderful work of Katerina Limpitsouni's undraw.co