Nick Taylor

Posted on Jun 16, 2020 Edited on Mar 6, 2022

Share some frontend resources!

#html #css #javascript #discuss

I have a bunch of resources in this post

Nick Taylor

Jan 6 '20

Frontend Developer Resources 2020

#javascript #css #html #a11y

314

11 min read

but what's some frontend developer resources you have come across recently? It doesn't matter if you're a beginner or a seasoned pro. Share!

Top comments (45)

Stephanie Eckles • Jun 16 '20

I currently can't live without 11ty (static site generator):
11ty.dev/

This is a super nifty tool to find the closest named CSS color:
enes.in/sorted-colors/

Here's a great list of ways to manipulate the HTML Dom with vanilla JS:
htmldom.dev/

A very fun game to learn about available CSS selectors and how to use them:
flukeout.github.io/

A cheatsheet for window.location by @samanthaming:
dev.to/samanthaming/window-locatio...

My mission this year is to create free resources for the community:

ModernCSS.dev has in-depth tutorials to help upgrade your CSS skills
I'm also offering a free web development course for absolute beginners with the first part complete and available here on DEV, and the capstone series currently in production

Vaibhav Khulbe • Jun 16 '20

Awesome list! 🔥

Carballo • Jun 17 '20

Thanks for sharing!

Yih Sev • Jun 17 '20

htmldom.dev/ is awesome

Ali Nazari • Jun 20 '20

Many thanks! Helped me. And shared with many others.

Abdisalan • Jun 16 '20 • Edited

For my fellow React Developers:
usehooks.com/

A11y Style Guide
a11y-style-guide.com/style-guide/

Some Personal Sites for Inspiration!
abdisalan.com/
wattenberger.com/blog/
flaviocopes.com/
taniarascia.com/

Nicola Sansom • Jun 18 '20

The a11y-style-guide.com/style-guide/ looks to be a brilliant resource for accessibility thanks for sharing!

Gabe Ragland • Jun 17 '20

Thanks for sharing usehooks :)

Nick Taylor • Jun 16 '20

Yeah @gabe_ragland 's usehooks.com is a great resource. Thanks for sharing!

Desmond • Jun 17 '20

Pesonal Website Inspiration:

Nyamador.me

Abdisalan • Jun 17 '20

Looks very cool 😎

Desmond • Jun 17 '20

Thank you :)

Paweł Ludwiczak • Jun 17 '20

jakearchibald.github.io/svgomg/ - love this tool for optimizing SVGs!

Stephanie Eckles • Jun 17 '20

Oh yes, can't believe I forgot this in my list, I also use it all the time

Nick Taylor • Jun 17 '20

Definitely! 🔥 For those interested, we run all the SVGs that are on DEV through this.

Alejandra Melendez • Jun 17 '20

My favs fronted resources are websites that teach you with games.
Here are some of them:
To learn CSS Flexbox

flexboxfroggy.com/
flexboxdefense.com/

To learn CSS Grid
cssgridgarden.com/

To learn basic (and advanced) CSS
flukeout.github.io/

Nick Taylor • Jun 17 '20

Love Flexbox Froggy!

Paulo Carvajal • Jun 18 '20

A tiny tool I built on Vue to learn Flexbox myself (and Vue too):
flexiting.com/playground

Rose • Jun 17 '20

Has anyone mentioned colorzilla.com/gradient-editor/ yet? I used to use this all the time for gradients with multiple color stops. These days a lot of other tools handle it for you as well but It's still occasionally handy for quickly generating gradient CSS!

Nick Taylor • Jun 17 '20

Vaibhav Khulbe • Jun 16 '20

100 websites to bookmark for your next dev/web project 👩‍💻

Vaibhav Khulbe ・ Mar 26 '20 ・ 5 min read

#javascript #webdev #react #tutorial

That being said...here are 50 random/lesser-known resources 🔥:

If you've read here you're so hungry for more resources!

I usually share them on my weekly dev newsletter. You can subscribe to Dev Weekly here.

Have a good day frontenders!

Richard Tong • Jul 1 '20

For React devs: this little snippet gives you a JSX-like interface in pure JavaScript, no transpilation required

const e = type => (
  props = {}, children = [],
) => React.createElement(type, props, ...children)

Usage

const P = e('p')
const Div = e('div')
const Button = e('button')

const Clicker = e(({ message }) => {
  const [clicked, setClicked] = React.useState(0)
  return Div({
    id: 'clicker',
    style: styles.div,
  }, [
    P(null, [`${message}: clicked ${clicked} times`]),
    Button({
      onClick: () => {
        setClicked(clicked + 1)
      },
    }, ['click']),
  ])
})

ReactDOM.render(
  Clicker({ message: 'You got this!' }),
  document.getElementById('root'),
)

Doaa Mahely • Jun 17 '20

Bookmarking this for the near future 😁 I'm currently working on my UI design skills to be a better frontend dev. One thing I find myself always getting back to is this awesome Flexbox guide on CSS Tricks.