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