Best of Web Development — October 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    A CheatSheet of 128 CheatSheets for Developers

    This post is a curated list of 128 cheat sheets and tutorials covering various programming languages, frameworks, tools, and other tech-related topics. It includes resources for languages like Java, Python, and JavaScript, frameworks such as Angular and React, and tools like Git, Docker, and Bash. The list aims to be clear, interactive, and beginner-friendly. A link to the author's GitHub repository where the list is maintained is also provided.

  2. 2
    Article
    Avatar of jetbrainsJetBrains·1y

    JavaScript Best Practices 2024

    JavaScript continues to evolve, and staying up-to-date with the latest best practices is crucial for developers. Key practices include aligning with project-defined rules, using 'let' and 'const' instead of 'var' for variable declarations, leveraging classes over function prototypes, and implementing private class fields with '#'. Arrow functions are recommended for better syntax and context binding, while the nullish coalescing (??) and optional chaining (?.) operators improve code readability and reliability. Modern methods like 'Object.entries()', async/await syntax, and the 'Intl' API are also important for efficient and maintainable code. Additionally, using tools for precise calculations, handling JSON with big integers carefully, and employing robust testing practices are essential for developing high-quality JavaScript projects.

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

    The Best Guide to Flexbox Ever

    Flexbox is a powerful tool in web development for creating responsive layouts. The post highlights a top resource for learning flexbox and emphasizes its utility. A recommended guide is provided for further reading.

  4. 4
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    React Best Practices Ever Developer Should Know

    This guide offers crucial tips on optimizing React development using hooks. It covers the importance of maintaining immutability in state management, avoiding the overuse of useState, leveraging useMemo for performance improvements, ensuring unique keys for list items, and properly handling dependencies in useEffect. The guide also advises on alternatives to useEffect for managing side effects efficiently, contributing to cleaner and more efficient code.

  5. 5
    Video
    Avatar of fireshipFireship·2y

    The WordPress ecosystem has lost its mind…

    The post discusses escalating drama in the WordPress ecosystem involving Matt Mullenweg, Automattic, and WP Engine. Triggered by Automattic's demand for royalties from WP Engine, the conflict has led to legal battles, public controversies, and significant community backlash. The detailed timeline reveals conflicts over trademark usage, financial contributions to the WordPress community, and accusations of improper business practices, significantly impacting WordPress users and developers.

  6. 6
    Article
    Avatar of devtoDEV·2y

    Best Icon Libraries

    The landscape of icon libraries has significantly evolved in 2024, offering designers and developers more options, better integration, and enhanced customization. Notable mentions include Lineicons V5 with over 30,000 icons and advanced features like a free CDN and icon editor. Heroicons, Uicons, Iconify, Streamline Icons, and others are also highlighted for their unique offerings and ease of use. Many of these libraries are free or open-source, making them accessible for various project needs.

  7. 7
    Article
    Avatar of communityCommunity Picks·1y

    Create beautiful images of your source code

    Instructions for creating visually appealing images of a provided JavaScript code snippet, including rendering button clicks and updating the button text dynamically.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    10 JavaScript concepts every Node developer must master

    Node.js has become a standard for building web apps and systems software, utilizing JavaScript on the back end. Key JavaScript concepts include closures, prototypes, private properties, modules, error handling, currying, call/apply/bind methods, memoization, IIFE, and argument handling. Mastering these concepts can help Node developers write scalable and efficient code, despite the challenges posed by JavaScript's multiparadigm nature and Node's single-threaded architecture.

  9. 9
    Article
    Avatar of devtoDEV·1y

    Top 7 Web development projects for beginners

    Gaining practical experience and building a portfolio is crucial for beginners in web development. Seven suggested projects include a personal portfolio website, a to-do list app with advanced features, a product landing page, a simple calculator, a weather app using an API, a responsive blog page with dynamic content, and a mini e-commerce product page. These projects cover essential skills like HTML, CSS, JavaScript, responsive design, API handling, and more.

  10. 10
    Article
    Avatar of bramBram.us·2y

    Scroll-driven animated card stack with scroll snap events

    A detailed breakdown and rework of Paul Noble's impressive scroll-driven card stack demo, which uses a few lines of JavaScript and zero dependencies. Key techniques include an invisible scroller with ScrollTimeline, CSS scroll-snapping to center cards, and custom animations for snapped cards. A remix of the demo simplifies the code by using shared keyframes and includes a fallback for browsers not supporting Snap Events.

  11. 11
    Article
    Avatar of controversycontroversy.dev·2y

    WordPress Drama: Automattic vs WP Engine

    The WordPress ecosystem is experiencing a significant dispute between Automattic and WP Engine. This conflict could have notable implications for the community, given the prominent roles both companies play in the WordPress space.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Top Next.js Tools for Next-Gen Developers

    Next.js is a powerful React framework ideal for building performance and SEO-friendly web applications. This post highlights essential tools for developers to enhance productivity, including those for SEO, authentication, data management, UI component testing, and styling. Key tools such as NextAuth.js, Prisma, Tailwind CSS, Storybook, Jest, and Cypress are covered to help streamline development and ensure high-quality applications.

  13. 13
    Article
    Avatar of lobstersLobsters·1y

    The Useless Web

    The Useless Web is a platform that redirects users to a variety of random and seemingly pointless websites. It highlights the quirky side of the internet where fun and entertainment take precedence over utility.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    I Built a Study Timer to Improve My Focus

    Tomatillo Timer is a free, ad-free Pomodoro app built to enhance study focus. It utilizes configurable Pomodoro sessions combined with other techniques to improve concentration. Developed using technologies like Svelte 5, Valibot, Pico CSS, and Tiptap, the app aims to help users stay on task despite distractions. The developer also introduces Flotes, a Markdown note-taking app, and plans to create a productivity-focused Discord channel.

  15. 15
    Video
    Avatar of communityCommunity Picks·2y

    Build an Invoice App with Next.js 15

    Learn to build a full stack invoice app using Next.js 15, TypeScript, Tailwind, and Shaden components. The app will allow invoice creation, payment processing through Stripe, and email notifications via Resend. It leverages new React 19 APIs and uses Drizzle ORM to manage Postgres data. The app includes social login, multi-factor authentication through Clerk, and is deployed on Vercel.

  16. 16
    Article
    Avatar of communityCommunity Picks·1y

    Drag to Select

    A developer from Makeswift shares insights from a project focused on improving their file manager with drag selection. They detail challenges faced, specifically with state management, and present a solution using vectors to simplify the drag selection process. The final implementation addresses various edge cases and enhances user experience by preventing unwanted text selection and enabling auto-scrolling.

  17. 17
    Article
    Avatar of communityCommunity Picks·2y

    Best design system examples

    Exploring top design system examples to help build or improve your own, this post covers the essentials like consistency, efficiency, scalability, collaboration, and quality control. Featuring IBM's Carbon, Atlassian's, and Adobe's Spectrum design systems, it offers insights into unique approaches and best practices in design systems.

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

    This Folder Structure Makes Me 100% More Productive

    A well-organized folder structure can significantly enhance code maintainability and enjoyment in development. This structure is applicable across various types of development, regardless of the language or framework used. By demonstrating with diagrams and real-world examples, the benefits of transitioning from a traditional folder layout to a feature-based structure are highlighted. ESLint configurations enforce these practices, making collaborative projects more manageable and helping keep each feature's code isolated, facilitating easier modifications and refactoring.

  19. 19
    Article
    Avatar of daily_updatesdaily.dev Changelog·2y

    Comment Sorting

    Users can now sort comments on post pages by either newest first or oldest first. The default sorting is oldest first, but this can be changed with a button click. The button updates dynamically to show the current sorting option, allowing users to control their interaction with conversations.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    Better Auth

    Supports popular frontend, backend, and meta frameworks like React, Vue, Svelte, and more. Provides secure email and password authentication, multiple OAuth providers for social sign-on, built-in two-factor authentication, and tools for managing user access. Extend functionality via official and community plugins.

  21. 21
    Video
    Avatar of wdsWeb Dev Simplified·2y

    Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind

    Learn how to build a modern full-stack application using Next.js, TypeScript, Drizzle, ShadCN, and Tailwind CSS. The tutorial covers setting up a clone of Calendly that integrates with Google Calendar, allowing users to schedule events based on availability. The steps include user authentication using Clerk, database setup with Postgres and Neon, and utilizing Tailwind CSS for styling.

  22. 22
    Article
    Avatar of csstipCSS Tip·1y

    3D parallax effect on hover

    Explores a new concept of 3D parallax effect on hover, aiming for a better illusion using minimal CSS. The technique involves using only an <img> tag without any extra elements or pseudo-elements and keeps the CSS declarations under 15.

  23. 23
    Video
    Avatar of communityCommunity Picks·2y

    I made a multiplayer game from scratch because no one is hiring junior devs.

    A junior developer, frustrated with the job market, built a multiplayer browser game to enhance their resume. The game features turn-based tactics on a 2D hexagonal grid with limited player visibility and a shrinking map. The client-side is developed using TypeScript and HTML5 canvas, while the server-side is implemented in Golang using websockets. The project includes complex features like responsive UI, pathfinding, animations, and real-time multiplayer logic. Despite some challenges, including iOS websocket issues, the game is functional and available to play.

  24. 24
    Article
    Avatar of mdnblogMDN Blog·2y

    Fixing your website's JavaScript performance

    Web performance can be hit hard by JavaScript issues like long tasks, large bundle sizes, and hydration. Long tasks lock the main thread, blocking user interactions; large bundles slow down download, parse, and execution times; and hydration can delay interactivity in server-rendered pages. Strategies to address these include breaking up JavaScript work, using Web Workers, implementing tree shaking, code splitting, lazy loading, and considering alternatives to popular JavaScript frameworks that may improve performance.

  25. 25
    Article
    Avatar of devsquadDev Squad·1y

    Quickly Find Resources for Awesome Shadcn UI

    Curated list offering resources for Shadcn UI, categorized into 13 sections including Shadcn UI components, tools, extensions, SASS templates, and Next.js landing page templates.

See all Web Development archives