Best of Frontend Development — October 2023

1. 1
   Article

   freeCodeCamp·3y

   How to Write Good Documentation with Docsify

   Documentation is critical to a successful product and can be challenging to create. Docsify is a powerful tool that helps write documentation without needing extensive technical knowledge.

   329

   15
2. 2
   Article

   ShiftMag - Insightful Engineering Content·3y

   New frontend framework, again?!

   Explore the pros and cons of front-end frameworks dynamism, the potential pitfalls of blindly following trends, and the importance of building a solid foundation in web development.

   213

   17
3. 3
   Article

   DEV·3y

   The Roadmap to Web Dev Mastery (Best Resources)

   Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data.

   159

   4
4. 4
   Article

   asayer·3y

   9 Common CSS Mistakes We Make

   Learn about common CSS mistakes and their solutions, including overusing !important, using absolute units instead of relative units, using inline style in HTML, ignoring browser compatibility, using color names instead of hex codes, and more.

   138

   1
5. 5
   Article

   Community Picks·3y

   Announcing TanStack Query v5

   TanStack Query v5 is released with new features, breaking changes, and improved APIs. It introduces a simplified way to perform optimistic updates, introduces suspense support, offers improved server-side rendering with Next.js, and provides better options for query definitions and persistence.

   123

   2
6. 6
   Article

   builder.io·3y

   A Guide to Choosing the Best Jamstack CMS

   Jamstack is a modern web development architecture that emphasizes performance, security, and an enhanced developer experience. It combines client-side JavaScript, reusable APIs, and prebuilt Markup. Traditional CMSs lack flexibility for delivering content across emerging technologies, while headless CMSs separate content creation and display layers. Jamstack offers benefits such as faster builds, enhanced security, SEO advantages, and easier collaboration between developers and non-technical users. When choosing a Jamstack CMS, flexibility, a modern developer experience, and editorial workflow capabilities are important factors to consider.

   89

   1
7. 7
   Article

   DZone·3y

   Backend For Frontend (BFF) Pattern

   The Backend for Frontend (BFF) design pattern customizes backend services for specific frontends, enhancing efficiency and alignment with frontend needs. It involves creating a backend service layer specifically tailored to the requirements of a particular frontend application or a set of closely related frontends.

   86

   1
8. 8
   Article

   Laravel News·3y

   Tailwind CSS: It looks awful, and it works

   Adam Wathan explains why 'separation of concerns' isn't the right way to think about the relationship between HTML and CSS. He also shares tips, tricks, and best practices for using Tailwind CSS effectively.

   80

   4
9. 9
   Article

   habr·3y

   React Custom Hook: useStorage

   Discover the potential of React custom hooks with a focus on the 'useStorage' hook. It provides convenient functions for storing and retrieving data in the browser's local or session storage. The hook handles serialization, deserialization, and automatic synchronization with the component's state. The remove function allows for easy deletion of stored values. Use the hook in various scenarios, such as persisting user preferences in a settings panel.

   68

   3
10. 10
    Article

    freeCodeCamp·3y

    CSS Frameworks vs Custom CSS – What's the Difference?

    CSS frameworks and custom CSS each have their own strengths and weaknesses. Your choice should align with your project requirements, your expertise, and your goals.

    56
11. 11
    Article

    habr·3y

    React Custom Hook: useStateWithHistory

    Explore the benefits and use cases of the useStateWithHistory custom React hook which provides automatic history tracking, efficient memory usage, and time-travel functionality.

    52
12. 12
    Article

    habr·3y

    React Custom Hook: useTimeout

    Learn about the useTimeout hook in React, which allows for easy setting, clearing, and resetting of timeouts within a component. The hook ensures that the callback function remains up to date and optimizes performance by memoizing certain functions. It can be used in various scenarios where timed actions are required.

    51
13. 13
    Article

    Community Picks·3y

    React Performance Booster - Introduction to the useMemo hook

    Learn about the useMemo hook in React, which allows you to optimize performance by memorizing expensive calculations. By using useMemo, you can ensure that the result of a computation is stored and only recalculated if necessary.

    46
14. 14
    Article

    habr·3y

    React Custom Hook: useStateWithValidation

    Explore the useStateWithValidation custom React hook, which combines the useState and useCallback hooks to provide an elegant solution for managing state with validation.

    46

    2
15. 15
    Article

    ITNEXT·3y

    Getting started with Supabase

    Supabase is a back-end-as-a-service (BaaS) that allows you to set up a database and interact with it without writing APIs. You can fetch all records from the 'drinks' table in Supabase by using the Supabase client and selecting from the 'drinks' table.

    39
16. 16
    Article

    Hacker Noon·3y

    Mastering Higher Order Components (HOCs) in React

    Learn how to master Higher Order Components (HOCs) in React.

    20
17. 17
    Article

    Stack Overflow Blog·3y

    Why Stack Overflow is embracing Svelte

    Stack Overflow's design system tech lead talks about the popularity of Svelte among developers and addresses a question about passing parameters to on:click in Svelte.

    19
18. 18
    Article

    Bits and Pieces·3y

    How to use TypeScript as a JavaScript Developer?

    Tips for JavaScript developers on how to use TypeScript to improve their frontend and backend development skills.

    18

    1
19. 19
    Article

    Community Picks·3y

    Adam Wathan - Tailwind CSS: It looks awful, and it works - Rails World 2023

    18

    1
20. 20
    Article

    Martian Chronicles·3y

    5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog

    This article provides best practices for using Tailwind CSS effectively, including having a design system in place, using a component-based approach, minimizing the number of utility classes, grouping and naming design tokens semantically, keeping class ordering consistent, and minimizing build size.

    17