M. Akbar Nugroho

Posted on Jun 5

✨ 10 useful webdev insight & learning resources!

#webdev #javascript #productivity #tutorial

Introduction

In this post, I'll give you ten useful resources specific for web development.

All provided resources below are not definitely (step-by-step) tutorial for web dev. Instead, it's a guide to build secure, accessible and performant modern web application.

The main subjects of this post are:

Web accessibilty (WAI-ARIA)
Web APIs
Progressive Web Apps
Web Security
SEO (included Structured Data)
Design Patterns
Performant Measurement
Tools & Debugging Techniques
HTML & CSS Syntax References
And many more...

Based on the covered subjects, I hope you already learned the basic of web development. If not, don't worry. You can read these all for your reference tomorrow 😉.

Resources

WEB.DEV

Web.dev is a guidance from Chrome Developer Relations. They want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users.

This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

What's included?

Blog. Latest news, updates, and stories for developers.
Learn. An industry expert has written each course, helped by members of the Chrome team.
Explore. Structured learning paths to discover everything you need to know about building for the modern web.
Case Studies. Learn why and how other developers have used the web to create amazing web experiences for their users.

MDN

MDN Web Docs is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript, and Web APIs.

What's included?

References. The docs for web APIs, accessibility, security, performance, etc.
Guides. Step-by-step learn web development. The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable".

Chrome Developer

The Chrome's official site to help you build Extensions, publish on the Chrome Web Store, optimize your website, and more.

What's included?

Docs. The documentation of Chrome's tools & library, extension & web store, architecture, and infrastructure.
Blog. Latest update of Chrome and web technologies.
Articles. Latest research of Chrome's team and other insightful write.

Google Search Central

Google Search Central is here to help the right people view your content with resources to make your website discoverable to Google Search.

What's included?

SEO fundamentals.
Crawling and indexing.
Ranking and search appearance.
Site-specific guides.

CSS-Tricks is a renowned online platform dedicated to everything related to Cascading Style Sheets (CSS) and front-end web development. Established by Chris Coyier in 2007, CSS-Tricks has evolved into a comprehensive resource hub for web designers and developers seeking to enhance their skills, stay updated with the latest trends, and find solutions to their CSS-related queries.

What's included?

Articles and Tutorials. CSS-Tricks offers a plethora of articles and tutorials covering a wide range of topics, from basic CSS techniques to advanced front-end development concepts.
Code Snippets. Developers can find ready-to-use code examples for common UI patterns, layout designs, and CSS tricks, saving them time and effort in their projects.
Almanac. The CSS-Tricks Almanac serves as a comprehensive reference guide for CSS properties, selectors, functions, and other essential concepts.
News and Updates. CSS-Tricks keeps its audience informed about the latest trends, tools, and updates in the world of front-end development through regular news articles and curated content.

JavaScript Info

Your gateway to mastering the art of JavaScript programming! Dive into the world of JavaScript and unlock its full potential with our comprehensive resources and guidance.

What's included?

Exploring Tutorials. Embark on a journey through our extensive collection of tutorials, meticulously crafted to guide you through the intricacies of JavaScript programming.
Consulting the Reference Materials. Comprehensive reference materials to deepen your understanding of JavaScript syntax, methods, and objects.
Exploring ES6+ Features. Stay up-to-date with the latest advancements in JavaScript by exploring ES6+ features such as arrow functions, template literals, and destructuring assignments.

HTML Reference

Your ultimate guide to mastering HTML and harnessing its full potential in web development! HTMLReference.io is a comprehensive online resource dedicated to providing detailed documentation, examples, and best practices for HTML elements and attributes.

What's included?

Exploring HTML5 Features. Stay ahead of the curve with our coverage of HTML5 features and enhancements. From semantic elements like "header" and "footer" to multimedia elements like "video" and "audio".
Understanding Attributes. Unravel the mysteries of HTML attributes with our in-depth explanations and usage examples. From common attributes like "id" and "class" to more advanced attributes like "data-" and "aria-".
Quick Reference Guides. Access quick reference guides for common HTML tasks and scenarios, such as creating forms, embedding multimedia content, and structuring web pages.

Patterns

The brainchild of the legendary Addy Osmani, where cutting-edge design meets practical implementation in the world of web development! Patterns is a premier online resource dedicated to showcasing innovative design patterns, architectural principles, and best practices curated by Addy Osmani and his team of experts.

What's included?

Exploring Design Patterns. Delve into the world of design patterns with Patterns, where you'll discover a treasure trove of tried-and-tested solutions to common design challenges.
Architectural Principles. Unlock the secrets of scalable, maintainable architecture with our in-depth exploration of architectural principles.
Best Practices and Guidelines. Navigate the complexities of modern web development with confidence, armed with our collection of best practices and guidelines.

Can I use...

Your trusty companion in the ever-evolving landscape of web development compatibility! "Can I Use" is a renowned online tool that provides comprehensive information about web browser support for HTML, CSS, JavaScript features, and more.

What's included?

Browser Compatibility Made Easy. Navigating browser compatibility can be a daunting task, but fear not! "Can I Use" simplifies the process by offering clear and concise information about which web technologies are supported by various browsers.
Extensive Database of Features. Explore our extensive database of web features, including HTML elements, CSS properties, JavaScript APIs, and more.
Historical Data and Trends. Track the evolution of web browser support over time with our historical data and trends.

Figma Community

Where creativity knows no bounds and collaboration thrives! The Figma Community is an innovative platform that brings together designers, creators, and design enthusiasts from around the world to share, discover, and collaborate on design projects using Figma's powerful tools.

What's included:

Explore and Discover. Discover a treasure trove of design resources, including UI kits, icon sets, illustrations, and more, created by talented designers within the Figma Community.
Stay Inspired. Stay inspired and up-to-date with the latest design trends, techniques, and industry insights by following your favorite creators and joining design communities within Figma Community.
Contribute to Open Source. Contribute to the world of open-source design by sharing your design assets, components, and templates with the broader design community.

Summary

In conclusion, these ten web development resources offer a diverse range of tools and opportunities for designers and developers to enhance their skills, find inspiration, and collaborate with others in the industry.

From vibrant communities to comprehensive design libraries, these platforms empower creativity, foster collaboration, and provide invaluable insights for individuals at every stage of their web development journey.

Whether you're seeking to showcase your work, explore new techniques, or contribute to the global design community, these resources offer a wealth of knowledge and learning opportunities to help you succeed in the ever-evolving world of web development.

See ya!