Best of Web Development — May 2024

  1. 1
    Article
    Avatar of devtoDEV·2y

    37 Tips from a Senior Frontend Developer

    Tips for frontend developers include mastering the fundamentals, understanding how the web works, learning data structures and algorithms, practicing rather than just reading or watching tutorials, asking for help when stuck, not blindly copying code, evaluating online advice, assuming good intent, and focusing on delivering value. It's important to communicate, take breaks, work from strengths, diversify problem-solving, find mentors, commit to a JavaScript framework, prioritize user experience, and continuously invest in skills.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    20 Essential Browser Extensions For Web Developers

    Discover 20 essential browser extensions for web developers in 2024, including ColorZilla, WhatFont, Wappalyzer, and more. Explore extensions for getting information from other websites, developing and testing projects, and improving productivity.

  3. 3
    Article
    Avatar of devtoDEV·2y

    SSL in localhost takes 5 seconds now.

    Setting up SSL for localhost traditionally requires tedious manual configurations and repetitive steps. However, Ophiuchi simplifies the process by automatically generating certificates, updating the hosts file, providing an integrated web server, and ensuring instant trust. It saves time and allows developers to focus on building great software.

  4. 4
    Article
    Avatar of devtoDEV·2y

    Make naked websites look great with matcha.css!

    matcha.css is a drop-in semantic styling library in pure CSS that can make naked websites look great without any build steps, JavaScript, configuration, or refactoring. It provides additional modern styles out-of-the-box and is easily customizable and reversible.

  5. 5
    Video
    Avatar of awesome-codingAwesome·2y

    7 Modern HTML Features You Should Know

    Stay up to date with modern HTML features that you might not be familiar with. Learn about dialogues, the data list element, color picker, HTML capture attribute, and more.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    How To Get a Web Developer Job in 2024 (without dying inside) 🧑‍💻💀

    Learn tips for landing a job in tech, understand the current job market for software developers, and discover how to stand out as a less-experienced developer.

  7. 7
    Article
    Avatar of devtoDEV·2y

    You're not a software engineer; you're a "frameworker"

    Developers who rely heavily on frameworks without understanding the basics are referred to as 'frameworkers'. To be a software engineer, one should master the basics and have an understanding of the entire system, not just rely on copying and pasting code. Learning frameworks becomes easier once the fundamentals are solid.

  8. 8
    Article
    Avatar of devtoDEV·2y

    Tools that keep me productive

    Discover the tools that the author uses to stay productive as a developer, including their go-to editor and favorite browser extensions.

  9. 9
    Article
    Avatar of devtoDEV·2y

    10 engineering blogs to become a System Design Hero for free

    Learn about the top 10 engineering blogs that can help you become a system design master for free.

  10. 10
    Article
    Avatar of devtoDEV·2y

    Typelevel Typescript: A cheat sheet

    Type-level programming in TypeScript unlocks a realm of possibilities, leveraging the language's powerful type system to perform complex computations, validations, and transformations directly within the type system itself.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    API Design 101: My Best Practices for Building Great APIs

    API design involves creating rules and specifications for how an API exposes functionality and data to developers and users. It improves user experience and performance. Best practices include following RESTful design, using JSON as the data format, implementing input validation and parameter sanitization, documenting the API, implementing versioning strategies, and testing and monitoring the API.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    5 Cool Chrome DevTools Features Most Developers Don’t Know About

    Discover 5 lesser-known features of Chrome DevTools that can greatly boost development efficiency, including observing variable values in real time, logging to the console without changing code, setting conditional breakpoints, using DOM breakpoints, and preserving console logs across page reloads.

  13. 13
    Article
    Avatar of devtoDEV·2y

    How I boosted my productivity while working on multiple projects

    Learn how to improve productivity while working on multiple projects using Freeter, an organizer app that helps consolidate all necessary tools and resources in one place. The post includes examples of workflows for app/website development, checking emails and Twitter DMs, and releasing new versions of an app.

  14. 14
    Article
    Avatar of devtoDEV·2y

    Essential ES6 JavaScript Features Every JavaScript Developer Should Know

    Learn about the essential features of ES6 in JavaScript, including arrow functions, template literals, array destructuring, object destructuring, the Set method, the spread operator, and the rest operator.

  15. 15
    Article
    Avatar of devtoDEV·2y

    Array.reduce() is Goated

    Discover the power and versatility of Array.reduce() through nine incredible use cases, including summing numbers, flattening arrays, grouping objects, creating lookup maps, counting occurrences, composing functions, implementing state management, generating unique values, and calculating averages.

  16. 16
    Article
    Avatar of medium_jsMedium·2y

    5 Cool Chrome DevTools Features Most Developers Don’t Know About

    Discover 5 lesser-known but powerful features of Chrome DevTools that can boost your development efficiency, including real-time variable observation, logpoints, conditional breakpoints, DOM breakpoints, and log preservation.

  17. 17
    Article
    Avatar of phProduct Hunt·2y

    Stackradar - the best tools on the internet, curated

    Discover the best tools on the internet for web development, including Webflow, Relume, and Arc.

  18. 18
    Article
    Avatar of devtoDEV·2y

    The Right Way of Programming 👩🏽‍💻

    The post explores the concept of the 'Right Way' of programming and reflects on how programmers may initially believe in certain practices but later realize that there are no universal ways. It emphasizes the importance of considering the specific context and requirements when choosing programming approaches.

  19. 19
    Article
    Avatar of devtoDEV·2y

    The Module System in Javascript

    Mastering the module system in JavaScript is crucial for creating scalable, maintainable, and efficient code. Modules help with code organization, reusability, encapsulation, and dependency management. CommonJS is the first module system in Nodejs, and it uses require() and module.exports to import and export modules. The difference between module.exports and exports is that module.exports replaces the entire exports object, while exports is a shorthand reference to module.exports.

  20. 20
    Article
    Avatar of asayerasayer·2y

    Using the upcoming CSS when/else rules

    Learn about the upcoming CSS when/else rules which provide a mechanism for applying styles selectively based on specific conditions. These rules are still in the proposal stage and not yet implemented in browsers. The @when rule allows for selective styling, dynamic adaptability, specific conditions, user interaction, state and event styling, customization, and enhanced usability and aesthetics. The @when/@else rules simplify conditional styling and improve readability. They can be implemented by checking browser support, writing base CSS, defining conditions, using @when to apply conditional styles, and using @else for alternative styles. Some advanced techniques include combining with CSS preprocessors and using dynamic styling based on conditions. Best practices include planning CSS, using flexible units, maintaining consistency, and documenting code. Debugging techniques involve using browser DevTools, isolating rules, and eliminating possible causes of issues.

  21. 21
    Article
    Avatar of devtoDEV·2y

    Introducing DIVZ - a React component to scroll, swipe & zoom through HTML content on the 3D z-axis

    DIVZ is a free open source React UI component that enables scrolling, swiping, and zooming through HTML elements on the 3D z-axis. It offers simplified integration, diverse applications, and broad device support.

  22. 22
    Article
    Avatar of devtoDEV·2y

    Build Your Own React.js in 400 Lines of Code

    Learn how React works under the hood and build your own version with about 400 lines of code. Supports asynchronous updates and can be interrupted.

  23. 23
    Article
    Avatar of communityCommunity Picks·2y

    Composable Software Architectures are Trending: Here’s Why

    Composable software architectures are redefining software development standards, offering enhanced flexibility, scalability, maintainability, innovation, and better dependency management. They differ from monolithic architectures by utilizing independent, reusable components. Advanced tools like Bit can support the implementation of a composable architecture.

  24. 24
    Article
    Avatar of communityCommunity Picks·2y

    7 Practical Tips for Cheating at Design

    Improve your designs with practical tips that don't require a background in graphic design. Use color and weight to create hierarchy, avoid using grey text on colored backgrounds, offset shadows, use fewer borders, avoid blowing up small icons, add accent borders for visual flair, and consider hierarchy when designing buttons.

  25. 25
    Article
    Avatar of devtoDEV·2y

    Free tool: Tailwind CSS Colors ✨

    Tailwind CSS Colors is a free tool that allows users to copy any Tailwind color in any format, with a dark mode and the ability to store the value type of the selected color.

See all Web Development archives