The web industry is dynamic and fast-paced, and it can feel pretty overwhelming with all the changing techniques and frameworks.
If you're curious about developing an app or just want to stay on top of the latest trends, we’d love to share some resources with you.
2024 updates: We want to give a huge shoutout to all the amazing tools and creators that keep pushing things forward. Here’s a curated list of toolkits and channels I’ve been following—they’re definitely worth checking out before diving into your next big idea. (No affiliations!)
Tech trends & topics
- Fireship: High-intensity code tutorials and tech news to speed up your app-building journey.
- ByteGrad: Practical tutorials and updates on the React ecosystem.
- Theo - t3.gg: Timely insights on the latest trends in the web industry.
- Zenn: A community-driven platform for engineers to share knowledge and insights.
Standards, JavaScript & CSS
- OWASP cheatsheet: A concise collection of high value information on specific application security topics.
- JSONPlaceholder: Simplify app testing and prototyping with this web project offering a free fake API, facilitating the use of pseudo data.
- Dani Krossing: Dani's got you back with online courses covering programming and multimedia skills ,including video editing, HTML, CSS, JavaScript, Bootstrap, and PHP tutorials.
- Web dev simplified: Kyle's channel is all about teaching web development skills and techniques in an efficient and practical manner.
- CSS-Tricks: Practical examples for customization without relying on built-in styles of a UI framework.
Mental models & UX
- Satori graphics: Thomas, a passionate graphic designer, provides tutorials on graphic design theory, poster designing, logo designing, brand identity and much more.
- Phoebe Yu: Design, psychology, and culture of tech.
- Excalidraw: A whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
- Sergio Xalambrí: Comprehensive guides and tutorials for the React ecosystem.
- Atomic design: A methodology for creating deliberate, hierarchical user interface design systems, promoting modular design and development.
Reading about Atomic design was a game-changer when I was grappling with finding a good way to handle my expanding and increasingly messy codebase. I invested two weeks in cleaning up my repository and another few weeks in breaking down components into manageable modules.
Now, not only did the UI/UX become more consistent, but the overall codebase also saw significant improvements.
Content management
Not essential, but valuable to have.
- Sanity: A composable content platform designed for structured content management. The Sanity Studio is open-source, while the Content Lake is offered as a managed freemium service by Sanity.
- Payload CMS: An open-source headless CMS and application framework built on Next.js.
- Cloudinary: Image and video optimization tools to reduce file size without compromising quality.
- React Email: A collection of unstyled components for building emails with React.
Reverse engineering
- Builtwith.com: Uncover the techniques behind the websites with Gary's app, scanning and analyzing almost every site for reverse-engineering insights.
AI is a friend
Whether you love it or not, AI is making waves in generating content, writing code, and streamlining workflows. Let AI handle the quantity stuff while you and your team focus on quality.
Final thoughts
Web development covers a bunch of different areas like UI/UX, graphic design, data science, and more. There's always something new to learn, and I'll keep updating this list with interesting finds.
One thing I love about this community is that there are so many creative and interesting developers willing to share their knowledge.
Finally, I would like to share some slides that I stumbled upon during my struggle to make really cool animated page transitions. While they didn't actually help with the animations, they offered valuable insights that I found truly enlightening.
"Some thoughts:
When in doubt, copy
Inspect element is your friend
cmd-alt-c
Master the basics before you start trying weird stuff
Always more _space_ than you think
YOU HARDLY EVER NEED ALL-CAPS
Left-align everything (except these slides)
...
(code time)"
Utilitarian UI, Center for Devs Who Can't Design Good, by oliverjam