Nick Taylor

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

Share some frontend resources!

#discuss #html #css #javascript

I have a bunch of resources in this post

Frontend Developer Resources 2020

Nick Taylor ・ Jan 6 '20

#javascript #css #html #a11y

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!

Latest comments (45)

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'),
)

Pravin Poudel • Jun 18 '20

icodeeveryday. com

rhymes • Jun 18 '20

This site contains 700+ customizable CSS, SVG, and Figma UI icons available in SVG Sprite, styled-components, NPM, & API :-)

css.gg/

Kumar Swapnil • Jun 18 '20 • Edited

These are some of the awesome resources that I get to read in recent months. It' totally worth to have a look at them. github.com/uzumaki-narut0/awesome-...

Sean • Jun 17 '20

Tippy.js. For styling and controlling your tooltips. I really like it. It makes tooltips look like a better option to creating my own popup divs.

Nick Taylor • Jun 17 '20

Any idea how it compares to popper.js?

Carlos Galarza • Sep 2 '21 • Edited

@nickytonline @seanolad . It is explained here popper.js.org/docs/v2/tippy/ by the Popper.js documentation and here atomiks.github.io/tippyjs/v6/motiv... by the Tippy.js documentation. Popper.js is positioning engine (a more raw solution) and it used by Tippy.js for positioning their ready to use tooltips. With Popper you have all the control whether with Tippy you have styles and other features already built.

Sean • Jun 18 '20

Popper.js and Tippy.js are both made by github, which is cool btw, but the main difference seems to be that tippy.js is for the looks and properties of the tooltip, but popper.js seems to add a more dynamic feel to the tooltips, and also reduces on the style aspect of the tooltip.

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/

Paulo • Jun 18 '20

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

Nick Taylor • Jun 17 '20

Love Flexbox Froggy!

Gift Egwuenu • Jun 17 '20 • Edited

I worked on a project that involved curating frontend resources for beginners.

devcenter-square / Learning-Resource-Path-Front-End

⚡️ This repo serves as a resource for developers to leverage on their Journey into Front End Development.

Learning Resource Roadmap - (Front-End Development)

✨This repo serves as a resource for developers to leverage on their journey into Front End Development.✨

This is a visual roadmap for beginners venturing into the World of Software Development. In order not to feel overwhelmed by how much you need to know to be a Front End Developer. This roadmap serves as a guide through out your journey. You can follow through this guide and be assured you are on the right path.

Resource types:
🎮 - Interactive
📚 - Book
📹 - Video
📝 - Article
🎤 - Podcast
👩‍💻 - Community
💰 - Paid Resource
🎁- Free Resource
🏆 - Exercises

Beginner Level Front End Development

HTML

Codecademy 🎮 🎁
HTML Cheatsheet 📝 🎁
Udacity 📹 🎁
HTML Best Practices 📝 🎁
HTML Reference Guide 📝 🎁
MDN HTML Guide 📝 🎁
Marksheet.io 📝 🎁
W3Schools HTML…

View on GitHub

Nick Taylor • Jun 17 '20

Nice!

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.