Best of Web DevelopmentSeptember 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    Cheatsheets for Developers

    Cheatsheets for developers are quick reference guides summarizing key concepts, commands, and syntax for various programming languages and technologies. Resources like OverAPI.com, Awesome-Cheatsheets, and Bootstrap 4 Cheat Sheet offer aggregated and detailed cheatsheets for technologies like JavaScript, Python, HTML, CSS, and more. These tools assist developers in enhancing their productivity and understanding of complex concepts.

  2. 2
    Article
    Avatar of devtoDEV·2y

    React Mindset: How New React Developers Should Think

    React, a prominent JavaScript library for building user interfaces, enhances front-end development through reusable components and efficient UI management. New developers should adopt key principles such as thinking in components, embracing declarative programming, understanding state and props, prioritizing composition over inheritance, managing unidirectional data flow, mastering JSX, using hooks, and testing/debugging early to create modular, scalable, and maintainable applications.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Docker Cheat-sheet for beginners 🐳

    Comprehensive cheat sheet for beginners to master essential Docker commands. Includes instructions for working with containers, managing images, handling networks, using Docker Compose, and monitoring resource usage.

  4. 4
    Article
    Avatar of devtoDEV·2y

    How Developers Destroy Brain Health

    Software developers often undermine their brain health with habits like marathon coding sessions, lack of physical exercise, neglecting mental stimulation, and social isolation. These habits can lead to cognitive decline, mental burnout, and emotional depletion. Incorporating regular breaks, physical activity, continuous learning, and social interactions can greatly improve cognitive function and overall well-being.

  5. 5
    Article
    Avatar of hnHacker News·2y

    Simple Icons

    Simple Icons provides a collection of icons with accompanying brand guidelines and open-source licenses. It covers a wide range of brands and services, making it useful for developers who need consistent branding assets. The post categorizes icons by brand names and their respective guidelines or licenses.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    Best Practices for Naming API Endpoints

    Following best practices for naming API endpoints ensures your API is intuitive, consistent, and easy to use. Use nouns for resource names, plural names for collections, and HTTP methods to define actions. Maintain a clear hierarchical structure, use consistent naming conventions, avoid special characters and spaces, keep names simple and intuitive, include versioning, and describe actions with query parameters.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    35+ Free React templates and themes

    This collection offers over 35 high-quality free React templates and themes suitable for various projects such as admin dashboards, landing pages, blogs, and online portfolios. The list includes resources specifically designed to kickstart your development process with pre-designed components, dark and minimalistic designs, and modern UI elements. Each template comes with unique features like responsive layouts, customizable elements, and extensive documentation to facilitate easy setup and use.

  8. 8
    Article
    Avatar of devtoDEV·2y

    Get Screen Size in Pure CSS

    Learn how to use pure CSS to get screen size measurements, define custom properties, and perform mathematical operations on those properties. This method updates in real-time without JavaScript, utilizing new CSS features like @property, atan2, and tan functions.

  9. 9
    Article
    Avatar of mememondayMeme Monday·2y

    Frontend v/s Backend Dev

    Backend developers often work behind the scenes, ensuring systems run smoothly and efficiently, while their contributions may not always be visible to others.

  10. 10
    Article
    Avatar of bitBits and Pieces·2y

    Micro Frontend Architecture: A Guide

    Micro frontends enable breaking down monolithic frontends into independent, manageable pieces, enhancing scalability and flexibility. Key elements for successful implementation include decoupled development, independent versioning, effective dependency management, runtime and build-time integrations, and autonomous team operation. Bit and Webpack Module Federation are critical tools that help meet these requirements, enabling teams to innovate faster and deliver robust user experiences.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind CSS Page Creator

    Tails V2 is a design tool for TailwindCSS developers, enabling the creation of beautiful websites with a comprehensive site builder, design library, and built-in code editor. It features project organization, multiple page settings, and usage of Tailwind V3 with JIT mode. Users can sign up for a free account or upgrade to a Pro plan for additional features and unlimited projects.

  12. 12
    Article
    Avatar of learn_javascriptLearn JavaScript·2y

    Javascript: Event loop visualizer for learners

    Albert, a software engineer, introduces a pet project called 'Event Loop Explorer' designed to help learners grasp the fundamentals of the JavaScript event loop. The tool visualizes various aspects of the event loop, including web APIs, request animation frames, macro and micro tasks, and the call stack. Users can modify code in the editor or choose from existing examples.

  13. 13
    Article
    Avatar of devtoDEV·2y

    Why React Won the Front-End Race

    React has won the front-end race due to its powerful backing by Meta, flexibility as a library rather than a framework, component-based architecture with JSX, the impressive Virtual DOM, multiple state management options, and the introduction of hooks. Its vast ecosystem and the capabilities of React Native further solidify its dominance, making it a go-to tool for modern web development despite its inherent complexities.

  14. 14
    Article
    Avatar of roadmaproadmap.sh·2y

    Frontend Projects are Live on roadmap.sh 🥳

    Roadmap.sh has launched frontend project ideas, offering 18 varied projects complete with descriptions, mockups, and hints. Users can submit and review solutions, as well as rate their helpfulness. More projects will be added soon.

  15. 15
    Article
    Avatar of devsquadDev Squad·2y

    Ground. your animation kit

    Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    15 Useful CSS Properties You Should Know About 🎨

    Discover 15 often overlooked but incredibly useful CSS properties that can enhance the design, performance, and user experience of websites. These properties include caret-color for changing text cursor color, accent-color for form controls, pointer-events to manage mouse activity, backdrop-filter for background effects, and scroll-snap-type for smooth scrolling transitions, among others.

  17. 17
    Article
    Avatar of asayerasayer·2y

    HTMX 2.0 is here: Everything you must know about it

    HTMX 2.0, released in June 2024, brings several significant improvements to the JavaScript library used for creating dynamic web applications directly in HTML. New features include better support for Web Components, adherence to HTTP standards, and improved extension management. The new version addresses limitations and non-standard behaviors of HTMX 1.0, and migration to HTMX 2.0 requires minimal effort due to the focus on backward compatibility. A public roadmap is being developed, and more details can be found through the HTMX community and GitHub page.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    Shadcn Form Builder

    Quickly create forms using Shadcn along with react-hooks-form and Zod for efficient form building and validation.

  19. 19
    Article
    Avatar of devtoDEV·2y

    Mastering JavaScript Arrays: Techniques, Best Practices, and Advanced Uses

    Arrays in JavaScript are versatile structures used to organize, access, and manipulate collections of data efficiently. They support dynamic resizing, various types of data, and come with built-in methods for common tasks like addition, deletion, and iteration. Javascript arrays can be created using different syntaxes, including literal notation and the new keyword, and have numerous methods for transforming and querying data.

  20. 20
    Article
    Avatar of uxplanetUX Planet·2y

    Hover Effect in UI Design: Tips & Tricks

    Hover effects in UI design enhance interactivity and provide feedback to users. Use them to highlight interactive elements, offer contextual information, and reinforce brand identity. Opt for subtle animations, maintain uniform effects for similar elements, and ensure the timing is just right for smooth transitions.

  21. 21
    Article
    Avatar of dockerDocker·2y

    Docker for Web Developers: Starting with the Basics

    Docker is a powerful containerization platform widely used by web developers for its speed, flexibility, and collaborative capabilities. It ensures consistency across environments, simplifies dependency management, enhances resource efficiency, supports scalable architectures, and allows rapid deployment and rollback. Docker's suite includes tools like Docker Compose for multi-container applications, Docker Engine for containerizing applications, and Docker Desktop for a unified development experience. These features make Docker essential for modern web development projects, offering consistency, speed, isolation, scalability, flexibility, and portability.

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

    Auto translate post titles

    The daily.dev platform allows users to configure their feed so that headlines are displayed in one of ten languages, which includes Spanish, Italian, Japanese, Korean, Chinese (simplified), German, French, Brazilian Portuguese, Portuguese (Portugal), and English. Although the articles themselves remain in English, translating headlines into a user's native language has been shown to increase engagement. To change the language, users can go to feed settings, select 'Content and Language', and choose their desired language.

  23. 23
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    New React 19 Features You Should Know – Explained with Code Examples

    React 19 focuses on simplifying the development process by automating performance optimizations and removing the need for manual memoization hooks like `useMemo` and `useCallback`. The new compiler transforms React code into optimized JavaScript, and features like the `use()` hook streamline data fetching and context handling. Simplified ref handling and form management enhancements also contribute to cleaner and more efficient code.

  24. 24
    Article
    Avatar of technodudeTechnoDude·2y

    You don't have to pay for web hosting if you know where to look.

    Discover top-notch resources for hosting your website for free, including Netlify, GitHub Pages, Heroku, Firebase, AwardSpace, InfinityFree, and TasteWP. These platforms offer a range of features from powerful serverless platforms to easy WordPress site creation, ideal for beginners and small projects.

  25. 25
    Article
    Avatar of devtoDEV·2y

    How JS works behind the scenes?

    JavaScript operates in a single-threaded environment, executing code within Global or Functional Execution Contexts. The Global Execution Context is created when a code file is loaded, and it sets up the global object and variables. Each function invocation creates a Functional Execution Context. JavaScript has two execution context phases: memory allocation and execution. The Call Stack manages these contexts using a Last-In-First-Out (LIFO) approach, ensuring functions are executed sequentially. Despite being single-threaded, JavaScript can perform asynchronous operations, to be discussed in a subsequent post.