Best of Web Development — December 2023

1. 1
   Article

   DEV·2y

   Sharing a state between windows without a serve

   Learn how to share a state between multiple windows without a server by using Local Storage and Shared Workers. Understand the concept of Shared Workers and their role in communication between instances of the same script.

   1.3K

   41
2. 2
   Article

   Community Picks·2y

   JS Design Patterns: A Comprehensive Guide

   This post explores a range of essential design patterns in JavaScript, encompassing creational, structural, and behavioral patterns. By leveraging these design patterns, JavaScript developers can improve code reusability, maintainability, and overall system performance.

   466

   8
3. 3
   Article

   DEV·2y

   HTML can do this? Part 1

   Discover some cool things that HTML can do, including creating open/close widgets, linking to email addresses and telephone numbers, using autocomplete in a list, and modifying text directly.

   451

   14
4. 4
   Article

   DEV·2y

   Fetch API, do you really know how to handle errors?

   Learn how to handle errors when using the Fetch API and understand the best practices for error handling. Discover different approaches, such as using try/catch and checking the response status, and how to combine them for better error handling.

   417

   18
5. 5
   Article

   Community Picks·2y

   daisyUI — Tailwind CSS Components ( version 4 update is here )

   daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers customizable color names and a theme generator. With daisyUI, developers can create beautiful websites faster and with less code.

   408

   19
6. 6
   Article

   Hacker News·2y

   SVG Tutorial

   Learn to code SVG images step by step. Topics include drawing basic shapes, using clip-path, and creating background patterns with SVG and CSS.

   371

   17
7. 7
   Article

   Hacker News·2y

   In 2024, please switch to Firefox

   Switching to Firefox in 2024 is important for privacy reasons and to avoid a browser engine monopoly. Firefox is a fast and modern browser that can be used on multiple platforms.

   320

   63
8. 8
   Article

   Community Picks·2y

   Rust 🦀: Why JS devs are switching to it?

   Rust is gaining popularity among JavaScript and TypeScript developers. It offers a distinct memory management system, strict rules for borrowing, explicit mutability, and is a compiled language. Rust also has static and strong typing, with a focus on robust error handling.

   293

   48
9. 9
   Article

   Hacker News·2y

   You don't need JavaScript for that

   The article discusses the rule of least power in web development, which advocates for choosing the least powerful language suitable for a given purpose. It highlights examples of using native HTML and CSS instead of JavaScript, such as creating custom switches, using the datalist element for autosuggest, utilizing the native color picker, implementing accordions, and using dialog modals. The article also mentions future features that will further reduce the need for JavaScript.

   285

   14
10. 10
    Article

    Community Picks·2y

    2024’s Tech Trend: Frontend for Backend

    Frontend for Backend (FFB) is a development approach that integrates admin panels into web applications to make backend management more efficient and user-friendly. It simplifies the development process for frontend developers and allows for quick and easy adjustments through the frontend.

    281

    19
11. 11
    Article

    builder.io·2y

    Next.js 14: Layouts vs Templates

    Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance.

    249

    5
12. 12
    Article

    freeCodeCamp·2y

    Learn JavaScript by Building 21 Projects – a Major freeCodeCamp Curriculum Update

    freeCodeCamp has launched a major update to the JavaScript Algorithms and Data Structures Certification. Readers can now learn JavaScript by building 21 projects, including certification projects. The projects cover a wide range of topics and concepts, such as form validation, string and array methods, recursion, functional programming, regular expressions, object-oriented programming, and more.

    218

    3
13. 13
    Article

    Astro·2y

    Astro 4.0

    Astro 4.0 introduces new APIs, faster builds, redesign documentation, and a unique new development tool called the Astro Dev Toolbar. It also includes features like internationalization routing, incremental content caching, and new view transition APIs.

    193

    3
14. 14
    Article

    DEV·2y

    Personal Roadmap for becoming a better software developer in 2024

    Suggestions to become a better software developer: focus on building a strong foundation, learn data structures and algorithms, improve communication and writing skills, solve problems on LeetCode and HackerRank, be active on LinkedIn, enhance frontend skills, create a new portfolio, invest in courses and books, prioritize consistency and discipline.

    168

    6
15. 15
    Article

    web.dev·2y

    Introducing Learn Performance

    Learn Performance is a course on web performance. It is intended for those who want to learn about web performance and offers modules that cover the technical details of making web pages faster. The course was written by Kevin Farrugia, with contributions from Jeremy Wagner, and reviewed by Rachel Andrew and Barry Pollard. Beginners are encouraged to read the course from start to finish, but more experienced individuals can choose modules in any order. Feedback and suggestions for the course can be provided through the public tracker. Additional modules will be released in the future.

    160
16. 16
    Article

    freeCodeCamp·2y

    Learn English for Developers – freeCodeCamp A2 English Curriculum

    freeCodeCamp is developing an English for Developers curriculum to help non-native English speakers improve their language skills and career potential in the tech industry. The curriculum follows the A2 level of the Common European Framework of Reference and focuses on vocabulary useful for developers. It includes interactive lessons and dialogues, with plans for future levels. The community can get involved by volunteering or becoming a monthly supporter of freeCodeCamp's charity.

    158

    5
17. 17
    Article

    DEV·2y

    Frontend Development in 2024: Crafting a Dynamic Skillset for Success

    Explore the essential skills and technologies shaping the frontend realm in 2024. Master HTML, CSS, and JavaScript, embrace React and state management libraries, optimize web performance, understand backend environments, and prioritize Core Web Vitals. Continuous learning is crucial.

    141

    2
18. 18
    Article

    freeCodeCamp·2y

    How to Use Async/Await in JavaScript – Explained with Code Examples

    Learn how to use async/await in JavaScript to handle promises without using .then() and .catch() method chaining. The async/await syntax makes your code cleaner and clearer, reducing the need for nested callbacks.

    138

    1
19. 19
    Article

    Collections·2y

    Understanding Micro Frontend Architecture and Module Federation in React

    Understanding micro frontend architecture and module federation in React can help developers build modular and scalable web applications with enhanced flexibility, improved code reusability, and simplified maintenance.

    135
20. 20
    Article

    Community Picks·2y

    JavaScript Fullstack WEB App: Nextjs & Docker

    Learn how to create a simple yet complete full stack app using Next.js, Tailwind CSS, Node.js, Express, Prisma, PostgreSQL, Docker, and Docker Compose.

    135

    4
21. 21
    Article

    freeCodeCamp·2y

    Learn REST APIs by Building a JavaScript Project

    Learn about REST APIs and how to make requests and handle responses from them as a JavaScript developer.

    124

    3
22. 22
    Article

    Community Picks·2y

    I Am Happy Not To Be A Web Developer Anymore

    Web development has become complex with numerous frameworks and constant changes, making it challenging to keep up and maintain applications.

    117

    37
23. 23
    Article

    asayer·2y

    The Art of Scrollbar Styling with CSS

    Customizing scrollbars with CSS allows for uniformity and coherence across a website, improves usability, and provides visual feedback for users. Basic CSS properties related to scrollbars include scrollbar-width, scrollbar-track-color, and scrollbar-thumb-color. CSS animations can be applied to scrollbars using pseudo-elements.

    115

    3
24. 24
    Article

    Hacker News·2y

    Reference docs for npm packages

    Discover the best way to browse type documentation for npm packages and find the recommended resources for finding documentation on npm packages.

    98

    5
25. 25
    Article

    asayer·2y

    10 CSS Techniques for Hiding Elements

    This article explores ten different methods for hiding content using CSS, including using the display property, visibility property, and opacity property. The techniques discussed can improve the user experience and create more dynamic and interactive web pages.

    95

    4