Best of Web Development — November 2024

  1. 1
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Write Clean Code – Tips for Developers with Examples

    Writing clean code is crucial for maintaining readable, organized, and efficient software. This post provides 10 practical tips for achieving cleaner code, such as using meaningful names, following the Single Responsibility Principle, avoiding unnecessary comments, making code readable, and using unit tests. It also covers the importance of managing dependencies, organizing project structure, using consistent formatting, avoiding hardcoding values, and limiting function length. By adopting these practices, developers can create more reliable and maintainable software.

  2. 2
    Article
    Avatar of opensourcefrontendOpen Source Front End·1y

    I built a Flexbox Playground with Awesome Animations

    Flexbox labs is an open source visual tool designed to help you create and customize CSS Flexbox layouts. Key features include an edit tab, save tab, pre-built layouts, and options for customizing the app. The tool is built using React, TypeScript, Sass, and Framer Motion.

  3. 3
    Article
    Avatar of thedevcraftThe Dev Craft·1y

    Minimalist Github Portolio

    The author deleted their portfolio and replaced it with a minimalist version that focuses on a clean, project-centric layout, clear project hierarchy, and a professional look. The key lesson learned was that a portfolio should showcase what one can do for others rather than just personal interests. Two versions of the portfolio are available for cloning.

  4. 4
    Article
    Avatar of hnHacker News·1y

    Draw.Audio

    The post discusses the Draw.Audio tool which requires browser support for the Web Audio API to function. It introduces basic controls for manipulating sound, including scaling and transposing notes, with options to select the root note and generate sounds.

  5. 5
    Article
    Avatar of communityCommunity Picks·1y

    Melt UI

    Melt UI is an open-source Svelte library designed for creating high-quality, accessible design systems and web applications. It provides various functionalities to streamline the process of managing account changes, including updating passwords and settings.

  6. 6
    Article
    Avatar of dailydevworlddaily.dev World·1y

    We made daily.dev faster ⚡️ See how we did it

    Over the last two weeks, daily.dev optimized its performance, focusing on improvements for low-end mobile devices, upgrading infrastructure with newer CPUs and spot nodes, and refining content pipelines and ML models. Enhancements included reducing JavaScript bundle sizes, optimizing image loading, and reducing fields in feed requests. These changes resulted in up to 50% faster page load times, especially on mobile devices.

  7. 7
    Article
    Avatar of communityCommunity Picks·1y

    9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

    Discover nine open-source libraries that can significantly enhance your next software project. These libraries include Crawlee for web scraping, Encore for backend frameworks, KitOps for AI model management, CopilotKit for in-app AI agents, ChartDB for database visualization, Taipy for AI web apps in Python, Tolgee for localization, OPAL for policy management, and Stack Auth for user authentication. Each library offers unique features aimed at simplifying development tasks and improving efficiency.

  8. 8
    Article
    Avatar of thedevcraftThe Dev Craft·1y

    Code Timeline Generator

    A user describes the inspiration behind building a web app that converts code into a visually appealing timeline. The post provides a link to try the app as well as the source code on GitHub.

  9. 9
    Article
    Avatar of asayerasayer·1y

    Best 7 Practice Projects to Level Up your Skills

    Building hands-on projects is essential for web development growth. This post discusses seven practice projects - To-Do List App, Simple Calculator, Weather App, E-commerce Product Page, Tic-Tac-Toe Game, Real-time Chat Application, and Personal Portfolio Website. Each project helps enhance various skills such as JavaScript event handling, API usage, responsive design, and more. Tips for leveling up include breaking down projects, using version control, seeking help, experimenting, and continual learning.

  10. 10
    Video
    Avatar of fireshipFireship·1y

    CSS just changed forever… plus 7 new features you don't know about

    CSS has received a significant update, introducing a new logo in the color Rebecca purple and several game-changing features. Among these are the 'aligned content' property for easier centering without flexbox or grid, type-specific CSS variables via the 'property' at rule, and improved animations with the 'starting style' at rule. Additionally, new math functions have been added, alongside improvements for managing light/dark modes and form validation. The 'interpolate size' property also allows for the animation of elements with auto height.

  11. 11
    Article
    Avatar of communityCommunity Picks·1y

    CSS Easing Editor

    CSS Easing Editor simplifies the use of CSS easing functions. Users can easily generate and copy cubic-bezier configurations for their animations.

  12. 12
    Article
    Avatar of logrocketLogRocket·1y

    Build a micro-frontend application with React

    Building and managing large-scale projects can be challenging, and the micro-frontend architecture is gaining popularity for handling these challenges. It extends the concept of microservices to the frontend, allowing multiple teams to work independently on different modules. React is highlighted as a strong tech stack for implementing micro-frontends due to its extensive ecosystem and community support. The post includes a practical guide on creating a micro-frontend application using React and the create-mf-app package, as well as best practices and solutions to common issues in micro-frontend development.

  13. 13
    Article
    Avatar of communityCommunity Picks·1y

    ✨ How to Study Frontend Development the Lazy Way

    The post details two effective approaches for learning frontend development, even for complete beginners. It highlights using paid resources like FrontendMasters, or leveraging free tools and tutorials, emphasizing the importance of building projects to facilitate learning. The author shares a 7-step plan for both approaches, covering foundational courses, project-building, mastering JavaScript, and diving into React and intermediate projects.

  14. 14
    Article
    Avatar of tailwindcsstailwindcss·1y

    Tailwind CSS v4.0 Beta 1

    Eight months in the making, Tailwind CSS v4.0 Beta 1 is now available, featuring a new performance-oriented engine that boasts significantly faster build times. The update also includes a unified toolchain, CSS-first configuration, and modern web design enhancements like native cascade layers and container queries. Check out the beta documentation to get started and contribute to its development ahead of the stable release early next year.

  15. 15
    Article
    Avatar of communityCommunity Picks·1y

    Vite 6.0 is out! ​

    Vite 6.0 has been released with significant updates, including a new Environment API aimed at making development closer to production. The ecosystem has grown, with more companies using Vite and new frameworks joining. ViteConf highlighted various new projects and tools, including VoidZero's Rolldown and Oxc, and StackBlitz's bolt.new. Vite's new landing page is now at vite.dev. Important changes include Node.js support updates, extended support for asset references in HTML, and improvements like postcss-load-config. Migration to Vite 6 is generally straightforward with a detailed Migration Guide and Changelog available.

  16. 16
    Article
    Avatar of phProduct Hunt·1y

    React Scan - Scan your React app for problematic renders and performance

    React Scan is a new open-source developer tool designed to identify and address problematic renders and performance issues in React applications. It made its first launch on November 15th, 2024, and aims to help developers optimize their React apps.

  17. 17
    Article
    Avatar of workchroniclesWork Chronicles·1y

    (comic) Clean and optimized code

    Comics about the joys and challenges of work, crafted with passion and fueled by caffeine, focused on the theme of clean and optimized code.

  18. 18
    Article
    Avatar of devsquadDev Squad·1y

    I built a Flexbox Playground with Awesome Animations

    Flexbox Labs is an open source visual tool designed to help users create layouts using CSS Flexbox. The tool includes customizable features such as edit, save, pre-built layouts, and settings tabs. Additional functionalities include clone, undo, redo, reset, generate code, and more. Built with React, TypeScript, Sass, and Framer Motion, it aims to simplify layout creation and animations for developers.

  19. 19
    Article
    Avatar of devsquadDev Squad·1y

    PORTFOLIO WEBSITE

    I’ve just launched my updated portfolio, showcasing my work, skills, and projects. I’d love your feedback—let me know what you think!

  20. 20
    Video
    Avatar of wdsWeb Dev Simplified·1y

    How To Use Libraries Like A Senior Dev

    Learn how to structure your code effectively using adapter and facade patterns to simplify database queries and improve maintainability in large projects. Kyle from Web Dev Simplified compares two project structures, showing the pros and cons of each approach, and highlights the importance of centralizing code and creating abstractions to make refactoring and library changes easier.

  21. 21
    Article
    Avatar of syncfusionSyncfusion·1y

    Secure JWT Storage: Best Practices

    JSON Web Tokens (JWTs) are crucial for securing data transmission in single-page applications (SPAs), but they come with security risks such as cross-site scripting (XSS) and cross-site request forgery (CSRF). Secure storage methods include using HttpOnly cookies with the Secure flag, encrypting JWTs before client-side storage, and employing server-side session management. Advanced practices like using web workers and Content Security Policies (CSPs) further enhance security. Continuous security audits and updates are necessary to maintain a secure SPA.

  22. 22
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    Build & Deploy a Full Stack Dating App

    Learn to build and deploy a modern, full-stack dating app using cutting-edge tools and frameworks such as Next.js, Prisma, NextAuth, Cloudinary, and Pusher. This comprehensive course, available on freeCodeCamp's YouTube channel, covers everything from setting up your project to implementing advanced features like real-time messaging, OAuth integration, and role-based access. Perfect for developers looking to showcase their portfolio or expand their expertise in modern web development.

  23. 23
    Article
    Avatar of communityCommunity Picks·1y

    Essential Typescript for React

    This guide highlights essential TypeScript knowledge for effective product development in React. Key points include using ReturnType and Awaited to manage return types, typing components based on their requirements to avoid tight coupling with database schemas, using ReactNode for typing children, and employing React.ComponentProps for passing props. It also covers using intersections, unions, and Omit to handle props effectively.

  24. 24
    Article
    Avatar of communityCommunity Picks·1y

    Shadcn Form Builder

    Shadcn Form Builder allows developers to create forms quickly using Shadcn UI, react-hook-form, and Zod. Offering customizable and ready-to-use form solutions, it simplifies validation with support for both Zod and Yup. Developers can easily integrate pre-built components, rearrange fields, and define behavior with just a few steps, making form creation efficient and seamless.

  25. 25
    Article
    Avatar of communityCommunity Picks·1y

    UI Elements

    Buckets UI allows developers to build attractive and efficient products swiftly. It is widely used globally, with a significant presence in Australia.

See all Web Development archives