Best of Web Development — February 2025

1. 1
   Article

   .NET·1y

   Do you store the JWT in localStorage, sessionStorage, Cookies? then this post is for you

   Storing JWTs in vulnerable client-side storage (like localStorage, sessionStorage, or cookies) can expose applications to significant security risks. Alternatives include using in-memory storage and implementing a refresh token mechanism. This allows users to maintain their sessions without re-authenticating upon page reloads while mitigating potential attacks. Setting cookies with httpOnly, Secure, and SameSite flags is crucial for security. A short-lived JWT with periodic refreshing enhances protection.

   949

   99
2. 2
   Article

   LogRocket·1y

   A guide to modern frontend architecture patterns

   Frontend architecture patterns provide reusable guidelines for structuring the frontend codebase of software products. Key patterns include monolithic, modular, component-based, microfrontend, and Flux architectures. Each pattern has its strengths, weaknesses, and best use cases based on project complexity, scalability, maintainability, and developer preferences. Understanding these patterns is crucial for creating scalable and maintainable frontends while avoiding costly refactors.

   632

   9
3. 3
   Video

   The Coding Sloth·1y

   How To Program Apps That Make INFINITE MONEY

   Learn how to create and market apps that can generate income. The guide covers finding an idea, building the app, marketing strategies, and useful tools like AI code editors and design platforms. The key focus is on practicality and speed rather than perfection, highlighting the importance of SLC (Simple, Lovable, Complete) in app development.

   531

   19
4. 4
   Article

   Frontend developer·1y

   24 Best Free, Open Source React Portfolio Page Templates 😲😲😲

   Discover 24 free and open source React portfolio page templates to help you build a unique personal portfolio website.

   511

   19
5. 5
   Article

   Community Picks·1y

   Una UI

   Unocss Engine facilitates the creation of fast, modern, and lightweight UI components with high-quality presets for Vue 3 projects. It includes built-in theming support, customizable options, and auto dark mode based on the user's color scheme preferences.

   500

   23
6. 6
   Article

   iO tech_hub·1y

   What is WebLLM

   WebLLM, developed by the MLC-AI team, allows large language models (LLMs) to run fully within a web browser using modern web technologies like WebAssembly and WebGPU. This enables models to be more accessible client-side, providing privacy and offline support. While cloud-based LLMs are faster and require powerful servers, WebLLM offers cross-platform portability and easier installation. Implementation can be done using the WebLLM npm package, which includes support for web workers to enhance application performance.

   470

   6
7. 7
   Article

   Prismic·1y

   40 CSS Background Effects to Enhance Your Website

   Explore 40 CSS background effects to enhance your website's design. From gradient-based designs to dynamic, motion-driven animations, learn how various effects can add depth and interactivity to your site. The post includes examples of scrolling effects, SVG animations, background patterns, and more. Additionally, discover useful tools and generators to help simplify the creation of stunning backgrounds.

   407

   12
8. 8
   Article

   Tiger's Place·1y

   Understanding HTTP Responses and Streams

   Learn how to work effectively with HTTP responses and streams in JavaScript. Understand the key properties of Response objects, ways to consume responses using various methods like .json(), .text(), and .blob(). Explore the concept of binary data, ArrayBuffer, and Uint8Array. Delve into streams, their creation, best practices for memory efficiency, and handling errors properly.

   396

   10
9. 9
   Article

   Web Tools Weekly·1y

   Web Tools #604 -

   Web Tools Weekly issue #604 highlights tools and libraries including STRICH for barcode scanning in web apps, a variety of React tools such as hookcn and ReactAI, build tools like eslint-plugin-format and Go Blueprint, and media tools including p5.plotSvg and Animated Favicon Generator. The issue also features several commercial apps like Webdone and Meco aimed at improving productivity and development efficiency.

   353

   7
10. 10
    Article

    Lobsters·1y

    Learning TypeScript

    This post introduces branded types (or opaque types) in TypeScript and their usefulness in ensuring type safety by differentiating between structurally similar types. It covers the need for branded types, how to implement them using 'as' assertions and type predicates, and presents various use cases for branded numbers and strings. It also discusses community libraries like ts-brand and Effect TS that simplify using branded types. Alternatives such as unions, enums, and template literal types are explored, along with the concept of wrappers for ensuring utmost safety in type validation.

    331

    1
11. 11
    Article

    Medium·1y

    Vue is Too Easy

    Vue is renowned for its simplicity and powerful capabilities. It features an easy learning curve, versatile components, efficient state management with tools like Pinia, and comprehensive support for routing and animations. It also integrates well with TypeScript and encourages good practices in unit testing.

    328

    34
12. 12
    Video

    Fireship·1y

    Claude 3.7 goes hard for programmers…

    Claude 3.7, recently released by Anthropic, is a large language model known for its advanced programming capabilities. The new version includes a CLI tool, Claude code, which can build, test, and execute code, creating a feedback loop that might revolutionize programming. Despite its high cost, the new model significantly outperforms its predecessors and other state-of-the-art models on GitHub issues. However, the model has some downsides, such as occasional inaccuracies and high operational costs.

    307

    8
13. 13
    Article

    freeCodeCamp·1y

    How to Build an Analytical Dashboard with Next.js

    The post provides a comprehensive guide to building an analytical dashboard using Next.js, Flexmonster, and Highcharts. It includes step-by-step instructions on configuring these tools, creating charts, and setting up a functional user interface. Additionally, it explores real-world survey data on passenger flying etiquette to demonstrate the dashboard's capabilities.

    304

    3
14. 14
    Video

    developedbyed·1y

    The Power of SVG Animations

    Learn how to enhance your SVG animation skills by creating a dynamic sun-to-moon toggle with glowing effects using a single SVG. The guide covers integrating this effect from scratch using React and Figma, optimizing SVG path attributes, and adding staggered animations with motion.react. The tutorial provides step-by-step instructions and code snippets to make the task approachable and fun.

    286

    7
15. 15
    Article

    Javarevisited·1y

    5 Best Places to Learn TypeScript in 2025

    Discover the top five platforms to learn TypeScript in 2025, including Udemy, Coursera, ZTM Academy, Pluralsight, and Educative. These resources offer courses designed for beginners to advanced developers, covering fundamental and advanced TypeScript concepts. Enhance your programming skills and prepare for job interviews with these comprehensive learning platforms.

    274

    9
16. 16
    Article

    Hacker News·1y

    Patterns for building realtime features

    Realtime features enhance applications by ensuring updates are immediately reflected across users. Various patterns can achieve this, such as Poke/Pull, Push State, Push Ops, and Event Sourcing. Each has its advantages regarding state synchronization, data handling, and scalability. Additionally, different transport mechanisms like websockets, server-sent events, and polling can be used to maintain the client-server connection necessary for these features.

    255

    9
17. 17
    Article

    freeCodeCamp·1y

    How to Use Zod for React API Validation

    Zod is a TypeScript-first library that simplifies data validation in React applications by defining schemas to validate incoming API data. This tutorial guides you through setting up Zod, creating and using schemas, and integrating Zod with React for robust API response handling. It demonstrates how to ensure data consistency and early error detection, leading to a smoother and more efficient development experience.

    249

    7
18. 18
    Article

    Web Developement·1y

    JavaScript New Array Methods for Better and Cleaner Code

    JavaScript introduces new array methods aimed at enhancing code readability, maintainability, and performance. These additions help developers write cleaner and more efficient code.

    233

    13
19. 19
    Video

    JavaScript Mastery·1y

    Tailwind CSS v4 Full Course 2025 | Master Tailwind in One Hour

    Master Tailwind CSS with this comprehensive course that teaches utility-first styling, responsive layouts, dark mode, and custom themes. Learn how to structure projects correctly, understand best practices, and optimize your workflow. Gain access to quizzes, interactive exercises, and in-depth lessons on the JS Mastery Pro platform, where you will build a complete, professional landing page.

    233

    5
20. 20
    Article

    freeCodeCamp·1y

    How to Build a Reusable useSearch Hook in React

    Learn how to build a reusable useSearch hook in React that improves performance with techniques like debouncing and memoization, supports fuzzy search for handling typos, and implements pagination for managing large datasets. This step-by-step guide is ideal for React developers looking to enhance their search features and optimize user experience.

    228

    4
21. 21
    Article

    Tiger's Place·1y

    Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js

    This post provides a comprehensive guide on optimizing the performance of Next.js applications. It covers the fundamentals of web performance, such as understanding client and server bundles, JavaScript execution in the browser, and techniques for identifying performance issues using tools like PageSpeed Insights and Chrome DevTools. The post offers practical strategies to make your app faster, including the use of server components, code splitting, dynamic imports, handling large dependencies, and prefetching/preloading techniques. The aim is to equip developers with the knowledge to significantly improve both perceived and actual performance of their Next.js apps.

    206

    5
22. 22
    Article

    daily.dev Changelog·1y

    Introducing daily.dev Plus ✧

    daily.dev Plus is a new premium upgrade designed to enhance professional growth with features like interactive learning prompts, advanced custom feeds, AI-powered clean titles, organized bookmarks, an ad-free experience, keyword filters, and an exclusive members-only community. The free tier remains available with continual improvements. A limited-time discounted rate is offered for early adopters.

    195

    45
23. 23
    Article

    Open Source Front End·1y

    I Finally built a Grid Playground with Awesome Animations

    Flexbox Labs now includes Grids, allowing users to explore and manipulate CSS grid properties, control grid item placement, and visualize grid lines. This beta version retains all the original Flexbox Labs features and seeks user feedback for improvements. Future updates will add features like grid line numbers, CSS box shadows, gradients, border-radius, and transforms.

    193

    12
24. 24
    Article

    Frontend developer·1y

    A list of developer portfolios for your inspiration

    A curated list of developer portfolios is available to inspire your work. Developers are encouraged to contribute their portfolios by submitting a pull request to the repository. The list is categorized alphabetically by developer name.

    188

    27
25. 25
    Article

    Prismic·1y

    50 Creative CSS Image Effects for Engaging Websites

    Enhance your website's visual appeal with 50 creative CSS image effects. These effects add depth, motion, and interactivity to images, making your site more engaging. Additionally, learn how to optimize images for better performance and explore various tools and libraries to apply image filters and hover effects efficiently.

    173

    3