Best of Frontend Development — July 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    15 amazing things you can do with simple JavaScript 🤯

    Discover the versatile and surprising capabilities of vanilla JavaScript through practical examples. Learn how to find operating system details, prevent page refreshing, redirect users to new pages, validate emails, get the current URL, and detect mobile browsers. Additional features include handling disabled JavaScript, accessing module metadata, getting timezone offsets, setting the cursor to wait, and manipulating console messages with CSS.

  2. 2
    Article
    Avatar of devtoDEV·2y

    50 Best Websites for Web Design Inspiration and Ideas

    Discover a curated list of 50 best websites offering web design inspiration and ideas. These resources cater to various needs, from business and ecommerce to portfolios and landing pages. Sources are categorized into multipurpose, focused, and niched inspirations, including both free and paid options. Special mentions include award galleries and website builder showcases.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Frontend Libraries for Your Next Project

    Choosing the right tools in web development can drastically enhance productivity and user experience. Key frontend libraries to consider include AOS for scroll animations, Chart.js for data visualization, Luxon for date and time manipulation, SweetAlert2 for customizable alerts and modals, SortableJS for drag-and-drop sorting, Floating UI for dynamic tooltips and pop-overs, and FullCalendar for comprehensive calendar functionalities.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    React Design Patterns

    React design patterns are essential for frontend development as they offer solutions to recurring challenges in component design. They promote consistency, modularity, and scalability by simplifying state management, logic, and element composition. Examples include custom hooks, higher-order components, and prop-based rendering techniques. These patterns not only solve technical problems but also enhance code efficiency, readability, and maintainability. This guide provides insights into various patterns like Custom Hook, HOC, Extensible Styles, Compound Components, Render Props, Control Props, Props Getters, State Initializer, and State Reducer, along with their benefits and implementation examples.

  5. 5
    Article
    Avatar of devtoDEV·2y

    CSS One-Liners to Improve (Almost) Every Project

    This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width, increasing text size and line height, making images responsive, and improving table readability. Additionally, the guide offers solutions for balanced heading wrapping, matching form control colors to page styles, and reducing animations based on user preferences.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    dotUI

    dotUI offers a collection of accessible, mobile-friendly, and modern UI components for building React applications. Components include various input elements like Checkbox, NumberField, and Radio Group, as well as tools for handling dates and colors. The project is open-source and available on GitHub for contributions.

  7. 7
    Article
    Avatar of faunFaun·2y

    Top Tips and Tricks with Tailwind CSS

    Learn top tips and tricks to enhance your Tailwind CSS projects, including how to properly delegate classes, manage spacing between elements, and avoid overuse of the @apply utility. Discover how to add opacity, transitions, and animations, utilize group hover and pseudo-classes, and customize input values. Check out the provided resources for pre-made components and use the Tailwind IntelliSense plugin for an improved workflow.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    How to center a div?

    Learn various methods to center a div in CSS, including techniques using Flexbox, Grid, absolute positioning, margin auto, and inline-block display. Each method provides examples to help achieve vertical and horizontal centering effectively.

  9. 9
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Create 24 CSS Projects

    Improve your CSS skills through a new course on the freeCodeCamp.org YouTube channel, featuring 24 challenges that teach you to recreate components and layouts from apps like GitHub, CodePen, and Instagram. The course covers key CSS techniques such as transitions, pseudo-elements, hover effects, and keyframe animations, with solutions provided by CSS expert Treasure Porth.

  10. 10
    Article
    Avatar of devtoDEV·2y

    Top 6 React Hook Mistakes Beginners Make

    Learning React involves not just grasping its basics but also writing clean, efficient code. Common mistakes include using state unnecessarily, not using the function version of useState, misunderstanding state updates, and unnecessary useEffect dependencies. Optimizing component rendering can be achieved through proper use of useRef and useMemo. Additionally, it's crucial to manage fetch requests properly by using AbortController to prevent memory leaks.

  11. 11
    Article
    Avatar of kdnuggetsKDnuggets·2y

    5 Free Certifications to Land Your First Developer Job

    Free certifications can be a valuable asset, especially for those switching to software development from non-tech roles. The post lists five certifications, including freeCodeCamp’s Responsive Web Design and JavaScript Data Structures and Algorithms, and Harvard’s CS50 Introduction to Computer Science, which teach essential skills through hands-on projects and coding challenges. Completing these certifications can help build an impressive project portfolio and prepare for technical interviews.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Patterns For JavaScript Frontend Applications

    Patterns are crucial in managing the complexity of JavaScript frontend applications, much like they were in desktop and enterprise applications. By drawing on architectural patterns like MVVM, CQRS, and Flux, developers can better manage the state and interactions within their applications. Frameworks like Angular, React, and Vue help streamline these processes through structured state-management techniques. Understanding these patterns allows for sustainable and maintainable application development.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    Why Japanese Websites Look So Different

    Japanese websites often feature walls of text, bright colors, and numerous fonts due to several intertwined factors including font creation challenges, technological development and stagnation, and cultural influences. These design choices are deeply rooted in Japan's approach to web design and reflect broader societal and technological trends in the country. Understanding these nuances helps to comprehend why such designs differ significantly from Western website aesthetics.

  14. 14
    Article
    Avatar of asayerasayer·2y

    HTML5 Input Types You May Not Be Using

    HTML5 introduces new input types that enhance user experience and provide built-in validation for various data formats, reducing the need for external scripting. These include types like color, date, datetime-local, month, week, time, range, search, tel, and url, each with specific implementations and use cases. Ensuring browser compatibility and providing fallback options are crucial for consistent user experience across different platforms.

  15. 15
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·2y

    7 Web Dev Tools You Didn’t Know You Needed

    Discover seven lesser-known web development tools designed to enhance your coding efficiency and creativity. Tools like WhatFont for identifying web fonts, GitKraken for simplifying Git workflows, JSON Schema for validating JSON data, BrowserStack for cross-browser testing, Insomnia for API debugging, Squoosh for image optimization, and Storybook for UI component management are highlighted. These tools offer numerous features to improve your projects and streamline your development process.

  16. 16
    Article
    Avatar of devtoDEV·2y

    Image Lazy Loading

    The post introduces image lazy loading as a technique to improve React application performance. It highlights advantages such as faster initial load times, reduced bandwidth usage, smoother scrolling, and improved search engine ranking. It provides an example using both native lazy loading attributes and the `react-lazy-load-image-component` npm package. The author advises caution for certain use cases like carousels and above-the-fold images.

  17. 17
    Article
    Avatar of communityCommunity Picks·2y

    Franken UI

    Learn how to install and initialize Franken UI, a tool for web development, using Tailwind CSS and PostCSS with a simple npm command.

  18. 18
    Article
    Avatar of logrocketLogRocket·2y

    7 best product tour JavaScript libraries for frontend apps

    Modern web applications often contain numerous features which can overwhelm users if not presented properly. Product tours are a structured way to guide users through these features, enhancing user experience. This post reviews seven JavaScript libraries suitable for creating product tours, highlighting their features, pros, cons, and use cases. Libraries discussed include Intro.js, Onborda, Bootstrap Tour, Driver.js, TourGuide.js, Flows, and Shepherd.js, each catering to different needs and frameworks, helping developers make an informed choice for their projects.

  19. 19
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Optimize Next.js App Performance With Lazy Loading

    Learn how to optimize Next.js app performance by implementing lazy loading techniques for client components. By deferring the load of client components and imported libraries until needed, initial load times can be significantly improved. The post covers techniques using `next/dynamic` and `React.lazy()` with `Suspense`, along with handling lazy loading for named exports and considerations for server components.

  20. 20
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    A Very Exciting New Chart Library

    Shaden has released a new chart library that promises ease of use and powerful customization options, built on top of technologies like D3 and Recharts. The setup process is straightforward, involving just a few commands, and the library includes numerous pre-configured chart types and components. Users can easily integrate and customize these charts to suit their needs, making it a versatile tool for developers looking to enhance their projects with dynamic data visualizations.

  21. 21
    Article
    Avatar of piccalilliPiccalilli·2y

    Styling Tables the Modern CSS Way

    Modern CSS simplifies creating aesthetically pleasing and functional HTML tables. The post explains the fundamental HTML components for tables and modern CSS techniques to enhance their appearance and accessibility. It covers the use of elements such as <table>, <thead>, <tbody>, <tfoot>, styling strategies like text alignment, border handling, sticky positioning, and responsive design considerations. The guide is aimed at making readable, accessible, and visually appealing data tables.

  22. 22
    Article
    Avatar of csstipCSS Tip·2y

    Get the screen width & height without JavaScript

    Learn how to obtain screen width and height as pixel values using only CSS, avoiding JavaScript. This method leverages @property and trigonometric functions, providing unitless values that update in real-time upon screen resize.

  23. 23
    Article
    Avatar of communityCommunity Picks·2y

    Creating a Responsive Profile Settings UI with Tailwind CSS

    Learn how to design a user profile settings interface using Tailwind CSS. The guide includes creating minimalist and enhanced profile settings, along with a responsive profile settings page featuring a sidebar. Focus is on using Tailwind CSS's utility-first approach to style various components for a visually appealing and user-friendly interface.

  24. 24
    Article
    Avatar of syncfusionSyncfusion·2y

    What’s New in React 19?

    React 19 introduces async functions and the useTransition hook, revolutionizing state management and data handling. New features such as Actions for data mutations, optimistic updates with useOptimistic, streamlined form handling with useActionState, and server components enhance the development experience. The update also improves hydration error reporting, ref handling, stylesheet management, and support for custom elements and document metadata.

  25. 25
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    What's the Difference Between the useMemo and useCallback Hooks?

    React provides hooks like useMemo and useCallback to optimize application performance. useMemo caches the return value of an expensive calculation to avoid recomputation on re-renders, while useCallback caches function references to prevent unnecessary re-creations and re-renders. Understanding when and how to use these hooks can significantly improve your app's performance.

See all Frontend Development archives