Best of Web Development — August 2024

1. 1
   Article

   Community Picks·2y

   Bye Bye, Try-Catch Blocks: Meet JavaScript's Safe Assignment Operator Proposal😉

   The proposed Safe Assignment Operator (`?=`) in JavaScript aims to simplify error handling by reducing the need for traditional try-catch blocks. This operator transforms function results into a tuple, improving code readability and consistency across APIs. It also automatically handles errors, enhancing security. Inspired by constructs in languages like Go, Rust, and Swift, it supports integration with Promises and async functions and offers customizable error handling via `Symbol.result`.

   7.3K

   214
2. 2
   Article

   The Dev Craft·2y

   "Frontend developers are officially cooked"

   Discussion around the continuous relevance of frontend developers in the tech industry, questioning if their roles are becoming obsolete. Considers the impact of emerging technologies and market trends on the demand for frontend development skills.

   4.5K

   416
3. 3
   Article

   Community Picks·2y

   Tailwind Generator

   Leverage a graphical editor to easily create, design, and customize a landing page using Tailwind. Choose from various variants and customization options to get started quickly.

   2.8K

   75
4. 4
   Article

   roadmap.sh·2y

   Projects are live on roadmap.sh! 🥳

   Roadmap.sh has introduced a new feature allowing users to access projects within their Backend Roadmap. The collection includes 18 project ideas, spanning from beginner to advanced levels, aimed at enhancing backend development skills. Additional features like solution submission and feedback requests are planned for future updates.

   2.5K

   117
5. 5
   Article

   DEV·2y

   🖥️ Windows 11 Clone with React.js

   A developer created a Windows 11 clone web app using React.js, mimicking various Windows 11 functions like an interactive desktop environment, taskbar with start menu, and applications such as Chrome, Calculator, and VS Code. Other features include a responsive frontend and a simulated login screen. The technical stack includes React.js, Tailwind CSS, React Router DOM, Framer Motion, and React Draggable. The source code and demo are available on GitHub.

   1.5K

   114
6. 6
   Article

   Hacker News·2y

   Free Public APIs

   A collection of free public APIs with high health scores that offer a variety of functionalities including IP geolocation, data on Rick and Morty characters, UK postcode lookup, Kanye West quotes, Harry Potter characters and spells, useless facts, weather data, holidays information, and more. These APIs support REST and sometimes GraphQL endpoints, providing reliable and valuable data for developers.

   1.2K

   23
7. 7
   Article

   It's Foss·2y

   13 Best Open-Source Google Chrome Extensions

   Google Chrome, holding over 60% of the market share, offers a variety of open-source extensions that enhance user experience. This list includes 13 top open-source extensions such as Dark Reader for eye protection, GitOwl to optimize GitHub usage, DuckDuckGo Privacy Essentials for privacy, Simple Translate for multilingual browsing, Page Assist for AI integration, and many more. These extensions serve a wide range of purposes from privacy protection to development tools, all with the added benefit of being open-source.

   1.1K

   37
8. 8
   Article

   Community Picks·2y

   Isocons

   This post provides a comprehensive list of various user interface (UI) actions and icons commonly used in app development, including functions like adding shapes, navigating through different interface elements, performing actions such as downloading, uploading, and more. It covers essential icons like arrows, checkboxes, and settings, serving as a reference for designers and developers.

   1.1K

   30
9. 9
   Article

   Community Picks·2y

   Glass: an AI copilot for React and Next.js developers.

   Glass provides an AI-powered assistant for React and Next.js developers, enabling them to create components, modify props, and write Tailwind CSS directly from the browser. It also allows developers to visualize component structures by hovering over elements and instantly jump to the source code of the selected element.

   1K

   41
10. 10
    Article

    Community Picks·2y

    Every React Concept Explained in 5 Minutes

    React is a versatile JavaScript library for building front-end code efficiently. Key concepts include Components, JSX, Fragments, Props, State, Lifecycle Methods, Purity, Strict Mode, Hooks, Context API, Lists and Keys, Controlled and Uncontrolled Components, and React Router. Understanding these concepts enables efficient development of interactive and dynamic web applications using React.

    772

    24
11. 11
    Article

    LogRocket·2y

    JavaScript design patterns guide

    Developers use design patterns as reusable solutions to common problems. This guide demonstrates several JavaScript design patterns, including creational (factory and builder), structural (adapter and decorator), and behavioral (chain of responsibility and strategy) patterns. Each pattern is illustrated with practical code examples to aid understanding.

    705

    6
12. 12
    Article

    Community Picks·2y

    Tailwind Component Library

    Tailbits is a comprehensive library of UI components designed with Tailwind CSS. It offers a wide range of components for various projects, allowing for easy copy-pasting. The components are licensed under CC BY 4.0 and the tool is developed by Danny Postma.

    637

    13
13. 13
    Article

    Amigoscode·2y

    9 HTTP Methods that you MUST KNOW

    The post lists nine essential HTTP methods that developers should know, including GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, TRACE, and CONNECT. Each method is crucial for different actions in web development and API interactions.

    630

    19
14. 14
    Article

    The Dev Craft·2y

    Most common used methods in js

    An overview of commonly asked JavaScript methods in interviews, covering array, string, object, number, miscellaneous, date, and function methods. Detailed descriptions of each method include map(), filter(), reduce(), split(), replace(), Object.keys(), parseInt(), setTimeout(), JSON.stringify(), getDate(), call(), apply(), and bind().

    618

    40
15. 15
    Video

    ThePrimeTime·2y

    The Wrong Way To Learn

    584

    13
16. 16
    Article

    Hacker News·2y

    CSS finally adds vertical centering in 2024

    In 2024, CSS introduces the `align-content` property for vertical centering in flow layout, eliminating the need for flexbox or grid. Previously, achieving vertical alignment required complex workarounds. This update simplifies the process, allowing vertical alignment with a single CSS property in the default layout.

    577

    37
17. 17
    Article

    freeCodeCamp·2y

    What is CSS Subgrid? A Practical Tutorial

    CSS Subgrid addresses the challenge of maintaining perfect alignment in web layouts with varying user-generated content. This tutorial guides you through building a flexible products section using Subgrid, ensuring nested elements align consistently with their parent grid. The tutorial includes HTML and CSS code examples, demonstrating how Subgrid simplifies nested grid structures and enhances design consistency.

    544

    6
18. 18
    Article

    Community Picks·2y

    101 React Tips & Tricks For Beginners To Experts ✨

    This comprehensive guide shares 101 React tips and tricks collected over 5 years of professional experience. It covers a wide range of topics including component organization, design patterns, state management, code optimization, debugging, testing, hooks, and useful React libraries/tools. Key takeaways include efficient use of props, state, and context, leveraging design patterns and memoization, and employing critical React libraries for enhanced development.

    532

    23
19. 19
    Article

    Community Picks·2y

    TailwindCSS Buttons

    The post provides three methods for including TailwindCSS buttons in your project: using the Tailwind JIT CDN, adding the necessary code to a TailwindCSS project with JIT mode enabled, or pasting the code into a Codepen for immediate use.

    505

    12
20. 20
    Article

    SitePoint·2y

    10 Amazing Web Developer Resume Examples for Different Web Dev Specializations

    Creating an effective web developer resume can be challenging given the diverse skills in multiple languages, frameworks, and technologies required. This guide breaks down essential elements for tailored resumes based on different web dev specializations and career stages. From front-end to full-stack, J2EE, Java, PHP, ASP.NET developers, and career levels ranging from freelance to senior positions—each resume should emphasize relevant skills, notable projects, and specific proficiencies to catch hiring managers' attention.

    504

    15
21. 21
    Article

    Lobsters·2y

    CORS is Stupid

    CORS (Cross-Origin Resource Sharing) attempts to mitigate web security issues caused by implicit credentials in cross-origin requests. Despite its flexibility, it doesn't fully solve the problem of cross-site request forgery (XSRF). A recommended solution is to use explicit credentials like API tokens and setting same-site attributes on cookies. Additionally, implementing server middleware to block implicit credentials can enhance security.

    439

    24
22. 22
    Article

    Community Picks·2y

    Tailwind Toots

    Tailwind Toots offers mini-video tutorials on Tailwind CSS created by simonswiss.

    432

    15
23. 23
    Article

    ByteByteGo·2y

    EP127: 20 Popular Open Source Projects Started or Supported By Big Companies

    This post highlights 20 popular open-source projects supported by major companies such as Google, Meta, Microsoft, Netflix, and RedHat. It also includes a system design refresher, listing key topics like the differences between HTTP versions, a cheatsheet for UML class diagrams, and tools to convert code into beautiful diagrams. Additionally, there are discussions on unusual HTTP status codes and free NoSQL training opportunities.

    421

    4
24. 24
    Article

    Community Picks·2y

    I Built an Event Scheduler in NodeJs using Google Calendar API 🚀

    The post guides you through building an event scheduler in Node.js that integrates with Google Calendar API. It covers setting up a Node.js project, configuring environment variables, creating an Express server, and using OAuth 2.0 for authentication. Additionally, it explains how to schedule events, add Google Meet links, and notify attendees via email.

    380

    15
25. 25
    Article

    Hacker News·2y

    chartdb/chartdb: Free and Open-source database diagrams editor, visualize and design your DB with a single query.

    ChartDB is a web-based, open-source database diagramming editor that allows you to instantly visualize and customize your database schema using a single query. It features AI-powered export for easy database migrations, supports interactive schema editing, and requires no installations or database passwords. Currently in public beta, it supports PostgreSQL, MySQL, SQL Server, MariaDB, and SQLite.

    379

    20