Best of Frontend Development — April 2024

1. 1
   Article

   Collections·2y

   Essential VS Code Extensions for Front-End Development in 2024

   Discover essential VS Code extensions for front-end development in 2024 including Live Server, Markdown All in One, GitLens, Polacode, and Error Lens.

   3.1K

   198
2. 2
   Article

   DEV·2y

   21 HTML Tips You Must Know About

   Boost your coding skills with 21 HTML Tips including creating contact links, collapsible content, utilizing semantic elements, grouping form elements, enhancing dropdown menus, improving video presentation, supporting multiple selections, displaying text as subscript and superscript, creating download links, defining base URL for relative links, controlling image loading, managing translation features, setting maximum and minimum input length, enabling content editing, controlling spell checking, ensuring accessibility, defining target behavior for links, providing additional information, accepting specific file types, and optimizing video loading.

   913

   52
3. 3
   Article

   DEV·2y

   How I Structure my React Projects

   Learn how to structure your React projects for better organization and clarity. Use absolute imports for cleaner and more readable import statements. Use the index.ts file as the public API of each feature.

   753

   24
4. 4
   Article

   Community Picks·2y

   Subframe – The best way to build UI, fast.

   Subframe is a fast way to build UI with value props.

   336

   11
5. 5
   Article

   DEV·2y

   : vs :: in CSS3

   Learn the difference between : and :: in CSS3, how to use pseudo-classes, and examples of pseudo-elements.

   189

   13
6. 6
   Article

   DEV·2y

   Things that I like better in Vue than in React

   Vue has several features that stand out against React, including a more interactive installation process, an intuitive reactivity system, single-file components for better organization, and a more readable approach to conditional rendering. Vue also offers computed properties for handling complex logic and a streamlined state management solution with Pinia.

   177

   29
7. 7
   Article

   freeCodeCamp·2y

   What's the difference between React and Next.js?

   Learn the difference between React and Next.js, understand their use cases, and how they impact web application development.

   162

   4
8. 8
   Article

   Hacker News·2y

   Hidden Gems of Tailwind CSS

   Tailwind CSS offers hidden gems like changing radio/checkbox colors, using the peer-modifier, styling file inputs, changing color opacity, combining font-size and line-height, using pointer events, truncating multi-line text, creating square elements, highlighting text, styling named groups, adding custom variants, and using arbitrary values.

   128

   5
9. 9
   Article

   Community Picks·2y

   How to Use TanStack-Query to Write Cleaner React Code as a Junior Developer

   Learn how to use React Query to write cleaner React code as a junior developer. Understand the difference between client state and server state, install React Query in your project, and replace data fetching code and states with the useQuery hook.

   127

   1
10. 10
    Article

    DEV·2y

    How to create Custom Events in JavaScript?

    Learn how to create custom events in JavaScript and improve interactivity in web applications. Discover the advantages of using custom events and how to create and respond to them using event listeners.

    107

    3
11. 11
    Article

    Community Picks·2y

    CSS Grid vs. Flexbox: Which Should You Use and When?

    Flexbox and CSS Grid are two CSS layout modules that allow for the creation of complex layouts. Flexbox is suitable for content flow and flexibility, while CSS Grid focuses on precise content placement and allows for two-dimensional layouts. The choice between the two depends on the specific requirements of each layout.

    98
12. 12
    Article

    DEV·2y

    Create React App with Wing

    Learn how to create a React app connected to a Wing backend and fetch data from it

    79

    2