loading...
Cover image for Frontend Developer Resources

Frontend Developer Resources

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com Updated on ・11 min read

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

It’s 2020, post year in review, so let’s start off with some 2020 content.

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

Gatsby

My personal site, iamdeveloper.com, is currently built with Gatsby. I chose it mainly as another outlet to mess around with React back in the fall of 2017. It's matured quite a bit since then with quite an ecosystem of plugins as well as theming now.

I understand GraphQL from a high-level, but I am still nowhere near mastering it, mainly because I have not had/made time to learn it yet. I have still managed to add some additional fields and alter queries, mainly thanks to the built-in GraphQL query/viewer tool that ships with Gatsby.

For those saying Gatsby is overkill for a static site, maybe, maybe not. I've been happy so far with it. I leave it up to you to see what works best for you.

GitHub logo gatsbyjs / gatsby

Build blazing fast, modern apps and websites with React

Gatsby

Gatsby v2

⚛️ 📄 🚀

Fast in every way that matters

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Gatsby is released under the MIT license. Current CircleCI build status. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @gatsbyjs

Quickstart · Tutorial · Plugins · Starters · Showcase · Contribute · Support: Twitter & Discord

Gatsby is a modern web framework for blazing fast websites.

  • Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality dynamic web apps, from blogs to e-commerce sites to user dashboards.

  • Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.

  • Load Data From Anywhere. Gatsby pulls in data from any data source…

Netlify

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. 👇

Note: Zeit is amazing as well. I just happen to be using Netlify.

Netlify CMS

I went with Netlify CMS mainly because I was sick of updating markup on my local and doing a git push. Also, at the time, from what I recall, there were not many options, if any. Since then, there has been an explosion of headless CMSes. Maybe at some point I'll take another CMS for a spin.

GitHub logo netlify / netlify-cms

A Git-based CMS for Static Site Generators

Netlify CMS · GitHub license Netlify Status npm version Build Status FOSSA Status PRs Welcome

A CMS for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

Community Chat

Join us on Slack

How It Works

Netlify CMS is a single-page app that you pull into the /admin part of your site.

It presents a clean UI for editing content stored in a Git repository.

You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.

When a user navigates to /admin/ they'll be prompted to log in, and once authenticated they'll be able to create new content or edit existing content.

Read more about Netlify CMS Core Concepts.

Installation and Configuration

The Netlify CMS can be used in two different ways.

  • A Quick and easy install, that requires you to create a single…

Lighthouse CI

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).

GitHub logo GoogleChrome / lighthouse-ci

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

Lighthouse CI

Overview

Lighthouse CI is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible.

Quick Start

To get started with GitHub actions for common project configurations, add the following file to your GitHub repository. Follow the Getting Started guide for a more complete walkthrough and instructions on other providers and setups.

.github/workflows/ci.yml

name: CI
on: [push]
jobs
  lighthouseci
    runs-on: ubuntu-latest
    steps
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install && npm install -g @lhci/cli@0.4.x
      - run: npm run build
      - run: lhci autorun

Features

  • Get a Lighthouse report alongside every PR.
  • Prevent regressions in accessibility, SEO, offline support, and performance best practices.
  • Track performance metrics and Lighthouse scores over time.
  • Set and keep performance budgets on scripts and images.
  • Run Lighthouse many times to reduce variance.

undraw.co

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

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.

Tota11y

This is a great accessibility visualization toolkit that was started by Jordan Scales while he was working at Khan Academy.

GitHub logo Khan / tota11y

an accessibility (a11y) visualization toolkit

tota11y Build Status

An accessibility visualization toolkit

tota11y logo

Try tota11y in your browser, or read why we built tota11y.

Installation

npm install @khanacademy/tota11y

Include it right before </body> like so:

<script src="tota11y.min.js"></script>

Development

Want to contribute to tota11y? Awesome! Run the following in your terminal:

git clone https://github.com/Khan/tota11y.git
cd tota11y/
npm install

Architecture Overview

Most of the functionality in tota11y comes from its plugins. Each plugin gets its own directory in plugins/ and maintains its own JavaScript, CSS and even handlebars. Here's what the simple LandmarksPlugin looks like.

plugins/shared/ contains a variety of shared utilities for the plugins, namely the info-panel and annotate modules, which are used to report accessibility violations on the screen.

index.js brings it all together.

tota11y uses a variety of technologies, including jQuery, webpack, babel, and JSX. There's no need to know all

Fun fact, I converted it to a Chrome/Firefox extension for those interested.

axe

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.

WAVE

WebAIM's WAVE browser extension is great as well for finding accessibility issues in your app.

cssgrid.io

@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.

JavaScript 30

Wes at it again with another great free course. Check out JavaScript 30 to up your JavaScript game with fun little projects.

Every Layout

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

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

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

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

This is a great genre of learning. There are paid resources, but a couple of notable free ones are:

TypeScript

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.

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:

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.

GitHub logo formium / tsdx

Zero-config CLI for TypeScript package development

tsdx

Blazing Fast Blazing Fast Blazing Fast Greenkeeper badge

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.

And you know what? If you're still not a fan of types, that's OK. 😺

The JavaScript Event Loop

Philip Roberts talk at JSConf EU "What the heck is the event loop anyway?" is a great explanation of the event loop.

Some JavaScript Knowledge Nuggets care of Jake Archibald

This is definitely a great watch for those looking to understand JavaScript's event loop building off of Philip Robert's talk above.

Jake also has a great blog post about Tasks, microtasks, queues and schedules.

Storybook

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

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 .

I still have many episodes to watch and to learn from.

VisBug Browser Extension

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!

Note: This browser extension is currently only available for Chrome.

Your Browser's Developer Tools

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

What's going on with your web requests? Looks like there is a traffic jam. These tools have your back:

Josh Comeau's Picks

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.

JavaScript January

Emily Freeman (@editingemily ) started this in I believe 2017. Lots of great articles on JavaScript. It's a new January, so check out javascriptjanuary.com.

DEV!

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.

Lydia Hallie's (@lydiahallie ) posts on JavaScript

Michael Chan's React Holiday Series

Visual Studio Code

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. 🍐

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).

VS Code Tips

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

vscodetips image

Refined GitHub Browser Extension

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.

Screen shot of Refined GitHub prompting a user to create a PR

The extension integrates so well, I no longer know what is a new GitHub feature or a Refined GitHub feature.

GitHub logo sindresorhus / refined-github

:octocat: Browser extension that simplifies the GitHub interface and adds useful features

Refined GitHub

Browser extension that simplifies the GitHub interface and adds useful features

We use GitHub a lot and notice many annoyances we'd like to fix. So here be dragons.

Our hope is that GitHub will notice and implement some of these much needed improvements. So if you like any of these improvements, please email GitHub support about doing it.

GitHub Enterprise is also supported. More info in the options.


Install

The Chrome version also works in Opera (using this) and Edge.

Highlights 🔥

Makes whitespace characters visible Adds one-click merge conflict fixers
Adds reaction avatars showing who reacted to a comment Adds the option to wait for checks when merging a PR
Linkifies issue/PR references and URLs in code Adds button to revert all the changes to a file in a PR

Repositories

Online Editors/Playgrounds

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. 👏

Playground smoking and on fire

Here's some staples:

Paid Tools/Resources

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

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

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!

xScope

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.

Screenshot of xScope in action

Sizzy

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.

Screenshot of Sizzy in action

Learning through Video

These will most likely not come as a surprise, but it's worth mentioning them.

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.

educative image

That's All She Wrote

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!

Stay tuned

Discussion

pic
Editor guide
Collapse
kilianvalkhof profile image
Kilian Valkhof

Great list! If you're looking to combine some of those tools into one great tool, I'm building Polypane, which is a browser that lets you test your site in multiple screens/devices at once, but it also has tota11y, color blindness and other visual impairment simulators and many other debugging tools built right into the app. Check it out! :)

Collapse
sujankh22371674 profile image
सुजन खड्का🇳🇵

Too much resources.

Thanks mate!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Systems overload LOL

that’s too much

Collapse
gmoretti profile image
giuseppe

Wow, forget my sunday plans... Let's check these up!! Thanks!

Collapse
rgurung profile image
Roshan Gurung

Thank you for the great content.

mindblown

Collapse
nickytonline profile image
Collapse
lucasm profile image
Lucas Menezes

Ok, my first 2020 work week will be amazing because of this post! Thanks a lot!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Glad you liked it!

thanks

Collapse
eyp profile image
Eduardo Yáñez Parareda

This is a great post about current tools and tech that could inspire a lot.
Thanks for sharing!

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Glad you liked it!

Collapse
maebashiiceoctopus profile image
Alejandra Acosta

Hi!
this is amazing, im new at frontend and i am learning by my own way, i' pretty sure that all resources posted by you gonna help me a lot 🌈🥺

Collapse
ben profile image
Ben Halpern

Wow what a post!

Collapse
nickytonline profile image
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome list of resources. Thank you!

Collapse
nickytonline profile image
Collapse
nickytonline profile image
Nick Taylor (he/him) Author

I came across this Tweet today for anyone interested in learning Next.js