Share some frontend resources!

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!

Comments

[Stephanie Eckles]

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]

Awesome list! 🔥

[Carballo]

Thanks for sharing!

[Yih Sev]

htmldom.dev/ is awesome

[Ali Nazari]

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

[Abdisalan]

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]

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

[Nick Taylor]

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

[Gabe Ragland]

Thanks for sharing usehooks :)

[Desmond]

Pesonal Website Inspiration:

Nyamador.me

[Abdisalan]

Looks very cool 😎

[Desmond]

Thank you :)

[Paweł Ludwiczak]

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

[Nick Taylor]

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

[Stephanie Eckles]

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

[Alejandra Melendez]

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]

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

[Nick Taylor]

Love Flexbox Froggy!

[Rose]

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]

[Vaibhav Khulbe]

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 🔥:

1. 

   Essential Frontend Resources in 2019

   Zahin Alwa ・ Sep 22 '19 ・ 3 min read

   #html #css #javascript #react

2. dypsilon / frontend-dev-bookmarks

   Manually curated collection of resources for frontend web developers.

3. Frontend Mentor Resources
4. Free Frontend
5. UNeed - Frontend
6. 

   20 Top Frontend Developers Tools in 2020 | by Shanika Wickramasinghe | Medium

   Shanika Wickramasinghe ・ Jan 26, 2020 ・ 9 min read

   Medium

7. HTML5 UP
8. Appy Dev
9. Easings - Generate Cubic Bezier Easing Curves
10. Cheatography.com: Cheat Sheets For Every Occasion
11. Google Open Source
12. Codementor | Get live 1:1 coding help, hire a developer, & more
13. The ultimate web designer developer course
14. Dark CSS theme generator | Night Eye
15. HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript
16. Web Skills
17. Awesome React | LibHunt
18. Magic Animations CSS3
19. GraphQL Editor - Ultimate schema designer, ide and online graph maker. Create graph and deploy mock backend
20. Codrops | Useful resources and inspiration for creative minds
21. Eloquent JavaScript
22. React Libraries in 2020 - RWieruch
23. Neumorphism/Soft UI CSS shadow generator
24. Multicolor CSS Gradients, JPG Downloads, 100% Free! | Gradienta
25. .dev
26. Free HTML Website Templates and HTML UI Kits - HTMLTEMPLATES.CO
27. HTML, React, and Vue.js landing page templates for startups - Cruip
28. instant.page
29. CSS Layout
30. brumm.af
31. Namecheap x Codecademy
32. Level Up Tutorials | Web Development & Design Tutorials
33. AppLibsList | Collection of Libraries, Tools and Components for ReactJS
34. roadmap.sh - Frontend
35. Techtalks
36. CSS { In Real Life }
37. The Modern JavaScript Tutorial
38. Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
39. newline | Learn to program React, Angular, Vue, Ethereum, and Node.js with projects
40. React Resources
41. Reactiflux
42. Get Waves – Create SVG waves for your next design
43. CSSWAND
44. webgems
45. Upmostly - Learn JavaScript and React the Right Way
46. Implementing a Mockup: CSS Layout Step by Step
47. Free Frontend
48. Blobmaker
49. Short, instructional screencast video tutorials for web developers on @eggheadio
50. Vue Mastery | The Ultimate Learning Resource for Vue.js Developers

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]

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

[Heiker]

A collection of free single-purpose online tools for web developers...

tiny-helpers.dev

[pinkrada]

Yay!!!

[Doaa Mahely]

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.

[Jitmanew Tyagi]

github.com/sindresorhus/awesome#fr...

[Emilie Ma]

Thanks to you and everyone in the comments for sharing your resources - I have a bunch of new stuff to check out 😅

[Nick Taylor]

[Peyton McGinnis]

The best framework-less and lightest UI library out there.

[Sean]

Bruh, that's real funny.

[Nick Taylor]

I came across a Tweet today with a great free resource from MDN, front-end web developer learning pathway. Thanks for sharing @benmvp!

Ben Ilegbodu 🏀

@benmvp

MDN has a frontend web developer learning pathway:

developer.mozilla.org/en-US/docs/Lea…

Add up all the time it takes for each section and it's 572 hours of learning or ~15 business weeks!

It's nice to have something like this I can route people to. Shout-out to the team for this!

16:44 PM - 16 Jun 2020

5 15

[Vaibhav Khulbe]

MDN did a great job with this. It'll be quite reliable for newbies!

[Hibo Abdilaahi]

I haven't finished using this but I thought interneting-is-hard.com was a cool beginners resource. Also, I'll be bookmarking this as I don't have much front end experience so I'm basically here to snoop 👀🔖

[Nick Taylor]

[Sean]

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]

Any idea how it compares to popper.js?

[Sean]

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.

[Carlos Galarza]

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