Front End World @front_end_first Channel on Telegram

Front End World

@front_end_first


New articles about Front End development.
JS, CSS, React, Vue, Angular and others!

Generative Art: @drawbot_art
My russian tech blog: @five_a_m

Admin: @jem_jem

Front End World (English)

Are you passionate about Front End development? Look no further! Front End World is the go-to Telegram channel for the latest articles, tips, and tricks in the world of JS, CSS, React, Vue, Angular, and more! Stay up to date with the rapidly evolving technologies and trends in the Front End development landscape. Whether you are a seasoned developer or just starting out, Front End World has something for everyone.

In addition to curated content on Front End development, the channel also features Generative Art by @drawbot_art, providing a creative twist to your daily feed. Looking for more tech content? Check out the admin's Russian tech blog @five_a_m for insightful industry updates and discussions.

Join our community of like-minded developers and enthusiasts to explore the endless possibilities of Front End development. Get inspired, learn something new, and connect with fellow developers. The admin, @jem_jem, is here to ensure a seamless experience and provide support whenever needed. Don't miss out on the opportunity to expand your knowledge and skills in Front End development - join Front End World today!

Front End World

30 Jan, 14:00


Learning HTML is the best investment I ever did

https://christianheilmann.com/2025/01/15/learning-html-is-the-best-investment-i-ever-did/

Front End World

30 Jan, 11:20


Understanding React Server Components

A deep dive into the internals of React and Next.js to understand RSCs.

https://tonyalicea.dev/blog/understanding-react-server-components/

Front End World

29 Jan, 14:00


The Rise of Rust and WebAssembly in Web Development

Rust is getting popular with web developers due to WebAssembly, new Rust IDEs and other dev tools, and use cases where performance matters.

https://thenewstack.io/the-rise-of-rust-and-webassembly-in-web-development/

Front End World

28 Jan, 08:30


Creating Generative Artwork with Three.js

Learn how to create dynamic, generative artwork using Three.js, inspired by Lygia Clark's minimalist geometric designs, with a grid system and creative coding techniques.

https://tympanus.net/codrops/2025/01/15/creating-generative-artwork-with-three-js/

Front End World

27 Jan, 14:00


Devs in mind 2025: how to design interfaces for developer tools

What interface design differences exist between commercial software and, creative, developer tools for pros? Let's analyze and find out how to better design tools!

https://evilmartians.com/chronicles/devs-in-mind-how-to-design-interfaces-for-developer-tools

Front End World

27 Jan, 08:30


Build systems and bundlers

Recently, I've been researching the incremental implementation of Rspack. A paper titled "Build Systems à la Carte: Theory and Practice" has been mentioned in many materials about inc...

https://github.com/orgs/web-infra-dev/discussions/24

Front End World

26 Jan, 14:00


The success of Interop 2024!

https://webkit.org/blog/16413/the-success-of-interop-2024/

Front End World

24 Jan, 14:00


Exploring the WebTransport API: A New Era of Web Communication

Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.

https://jsdev.space/webtransport-api/

Front End World

24 Jan, 11:20


Creating Static SVGs from GeoJSON

https://css-irl.info/creating-static-svgs-from-geojson/

Front End World

23 Jan, 14:00


How to Build a Dynamic Web Scraper App with Playwright and React: A Step-by-Step Guide

Today we are going to build a small web scraper app. This application will scrape data from the Airbnb website and display it in a nice grid view. We will also add a Refresh button that will be able to trigger a new scraping round and update the resu...

https://www.freecodecamp.org/news/build-a-dynamic-web-scraper-app-with-playwright-and-react/

Front End World

23 Jan, 11:20


100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG

This is a direct followup to to Getting 32 bit API Response Data in CSS In CSS, 16 bits of...

https://dev.to/janeori/100-css-fetch-and-exfiltrate-512-bits-of-server-generated-data-embedded-in-an-animated-svg-5aad

Front End World

23 Jan, 08:30


Mastering forms in Next.js 15 and React 19

Creating forms in modern React has evolved significantly with the latest releases. In this post we’ll explore best practices for building…

https://engineering.udacity.com/mastering-forms-in-next-js-15-and-react-19-e3d2d783946b

Front End World

22 Jan, 14:00


SolidJS Creator on Confronting Web Framework Complexity

Ryan Carniato, the creator of SolidJS and SolidStart, says Angular and Vue will be the JavaScript frameworks to watch in 2025.

https://thenewstack.io/solidjs-creator-on-confronting-web-framework-complexity/

Front End World

22 Jan, 08:30


Interactive CSS feature explorer for text-box

https://nerdy.dev/notebook/text-box.html

Front End World

21 Jan, 14:00


Getting ready for Tailwind v4.0

The beta version of Tailwind CSS v4.0 was released a few months ago. Explore the new developments and how Tailwind makes the build process faster and simpler.

https://blog.logrocket.com/getting-ready-tailwind-v4/

Front End World

21 Jan, 11:20


JavaScript Frameworks — Heading into 2025

I admit I wasn't sure I'd be writing this article this year. It's easy to write articles that excite...

https://dev.to/this-is-learning/javascript-frameworks-heading-into-2025-hkb

Front End World

21 Jan, 08:30


Double-keyed Caching: How Browser Cache Partitioning Changed the Web

A deep dive into how browser cache partitioning has fundamentally changed web performance optimization, examining the trade-offs between privacy and performa...

https://addyosmani.com/blog/double-keyed-caching/

Front End World

20 Jan, 14:00


Enhancing Form User Experience with CSS: Real-Time Feedback Techniques for Better User Interaction

Table of Contents Introduction Prerequisites CSS Pseudo-Classes for Real-Time...

https://dev.to/devyoma/enhancing-form-user-experience-with-css-real-time-feedback-techniques-for-better-user-interaction-fig

Front End World

20 Jan, 08:30


You don’t need Next.js

We migrated the ComfyDeploy dashboard from Next.js to just React

https://www.comfydeploy.com/blog/you-dont-need-nextjs

Front End World

19 Jan, 14:00


aria-description Does Not Translate

It does, actually. In Firefox. Sometimes. A major risk of using ARIA to define text content is it typically gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services frequently miss content in ARIA attributes when sending text strings to localization vendors.…

https://adrianroselli.com/2025/01/aria-description-does-not-translate.html

Front End World

18 Jan, 14:00


CSS diagonal scroll

https://codepen.io/thebabydino/pen/zYJKRyq?editors=1010

Front End World

17 Jan, 14:00


Sharing a Variable Across HTML, CSS, and JavaScript

https://frontendmasters.com/blog/sharing-a-variable-across-html-css-and-javascript/

Front End World

17 Jan, 11:20


The future of htmx

https://htmx.org/essays/future/

Front End World

16 Jan, 14:00


How to Conduct Accessibility Testing with Screen Readers

Read How to Conduct Accessibility Testing with Screen Readers and learn Web with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

https://www.sitepoint.com/conduct-accessibility-testing-with-screen-readers/

Front End World

16 Jan, 11:20


The unique position of Vite in our ecosystem

Many meta frameworks now place Vite between the framework and the developer. Let's explore what this means for us in comparison to a framework that isn't built this way.

https://silvenon.com/blog/vite-and-frameworks

Front End World

16 Jan, 08:30


Everything you never knew about emoji

Emoji are a vital part of digital communication but present unique challenges for developers. Their complex Unicode structure and varying appearance across platforms can complicate string handling and text manipulation. Despite these challenges, emoji add personality and clarity to code, enhance user experiences, and help convey tone and nuance in communication. By understanding their quirks, developers can leverage emoji to create more engaging and effective digital experiences.

https://www.wearedevelopers.com/magazine/everything-you-never-knew-about-emoji

Front End World

13 Jan, 08:30


Using DevTools to Validate Web Performance Improvements

I'm passionate about Web Performance—from identifying performance issues, monitoring (synthetic and RUM), metrics, implementing product culture, training development teams and other stakeholders, speaking at meetups and conferences, tools, and snippets.

https://calendar.perfplanet.com/2024/using-devtools-to-validate-web-performance-improvements/

Front End World

12 Jan, 14:00


TypeScript without Build Tools

https://frontendmasters.com/blog/typescript-without-build-tools/

Front End World

11 Jan, 14:00


JavaScript scroll snap events for scroll-triggered animations

Learn how to use JavaScript scroll snap events for dynamic scroll-triggered animations, enhancing user experience seamlessly.

https://blog.logrocket.com/javascript-scroll-snap-events-scroll-triggered-animations/

Front End World

10 Jan, 14:00


Fabulous Font-Face Fallbacks

Let's talk about font fallbacks and how we can craft these to to perfection in order to reduce layout shifts and our users' headaches. Who among us has not experienced the horrors of clicking the wrong thing because stuff moves? Arghhhh! I'll start with a brief intro and then focus on lessons learne

https://calendar.perfplanet.com/2024/fabulous-font-face-fallbacks/

Front End World

10 Jan, 11:20


Some Things About Keyframes

A few lesser-known bits about CSS keyframe animations, from handling duplicate keyframe properties to customizing timing function easings within keyframe rulesets.

https://ryanmulligan.dev/blog/some-things-about-keyframes/

Front End World

09 Jan, 14:00


How to Optimize Next.js Web Apps for Better Performance

As engineers, we often get so carried away with other aspects of development that we overlook how users perceive and interact with our applications. This oversight can result in users leaving the app almost as soon as they arrive, leading to higher b...

https://www.freecodecamp.org/news/optimize-nextjs-web-apps-for-better-performance/?ref=dailydev

Front End World

09 Jan, 11:20


December 2024 Google Core Update

https://www.semrush.com/blog/december-google-core-update/

Front End World

09 Jan, 08:30


Elegant Long Press Implementation Using CSS Animation

Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.

https://jsdev.space/long-press-css

Front End World

08 Jan, 11:20


Breaking Up with Long Tasks or: how I learned to group loops and wield the yield

Everything, On the Main Thread, All at Once

https://calendar.perfplanet.com/2024/breaking-up-with-long-tasks-or-how-i-learned-to-group-loops-and-wield-the-yield/

Front End World

08 Jan, 08:30


Scaffolding your internationalization in React with automation

Bootstrapping your internationalization by automatically transforming your code

https://lingual.dev/blog/automating-your-react-internationalization/

Front End World

07 Jan, 14:00


Styling HTML <details> and <summary> with modern CSS

Customize HTML disclosure widgets using CSS, animating the open and close actions, styling the markers, and more.

https://blog.logrocket.com/styling-html-modern-css/

Front End World

07 Jan, 08:30


Using the Page Object Model design pattern in Angular applications

Clean Code, Clean Tests

https://medium.com/@borzifrancesco/using-the-page-object-model-design-pattern-in-angular-applications-62c2fa42afb1

Front End World

06 Jan, 14:00


CSS: How to Indicate Container Overflow, When There Is Overflow

You have a block of text that you can’t shorten and yet that you don't want to give too much space, so as not to draw attention away from other content. It’s useful metadata that you like to show. On a stopgap option using scroll-driven animations.

https://meiert.com/en/blog/iff-container-overflow/

Front End World

03 Jan, 14:00


The curious (performance) case of CSS @import

Nearly one in five websites is secretly sabotaging its own performance through a single CSS feature that's been known to be problematic for over a decade. Based on our analysis of over 16 million mobile websites, there's a good chance you might recognize this in your own codebase ;)

https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/

Front End World

03 Jan, 11:20


RxSignals: The most powerful synergy in the history of Angular

Let’s explore why Signals allow us to move state management out of RxJS, letting it focus primarily on event-driven tasks.

https://medium.com/coreteq/rxsignals-the-most-powerful-synergy-in-the-history-of-angular-235398a26b41

Front End World

02 Jan, 14:00


Frontend in 2025: Trends Shaping Development

Explore the world of JavaScript at our blog, your ultimate resource for guides, tutorials, and articles. Uncover the latest insights, tips, and trends.

https://jsdev.space/frontend-trends-2025

Front End World

02 Jan, 11:20


The Year in JavaScript: Top JS News Stories of 2024

The New Stack looks back at the victories and battle scars that marked JavaScript’s evolution during its 29th year.

https://thenewstack.io/the-year-in-javascript-top-js-news-stories-of-2024/

Front End World

02 Jan, 08:30


Is It “Frontend” or “Front-End” or “Front End”?

https://frontenddogma.com/posts/2024/is-it-frontend-or-front-end-or-front-end/

Front End World

01 Jan, 14:00


The Must-Have SEO Checklist for Developers For 2025

Hey, Devs! So I have been working on a few SEO Focused projects lately and I thought I would share...

https://dev.to/thesohailjafri/the-must-have-seo-checklist-for-developers-192i

Front End World

01 Jan, 11:20


CSS margin-trim and line height units

Learn ways of perfecting design with line height units and margin-trim.

https://12daysofweb.dev/2024/css-margin-trim-line-height-units/

Front End World

01 Jan, 08:30


2025 React Frontend Roadmap: Beginner to Senior Level

Here’s a React 19 and Next.js 15 roadmap to guide a developer’s journey from a fresher to a senior...

https://dev.to/tak089/2025-react-frontend-roadmap-beginner-to-senior-level-5g25

Front End World

31 Dec, 14:00


Top Dev Tools and Web Developer Trends of 2024

LLM tools, new programming languages, and a variety of dev and framework tooling — a look back at 2024 from a developer perspective.

https://thenewstack.io/top-dev-tools-and-web-developer-trends-of-2024/

Front End World

30 Dec, 14:00


5 tips to effectively optimize INP in React

In this post, let's consider several optimization techniques for improving Core Web Vitals metrics for sites that are built with React.

https://calendar.perfplanet.com/2024/5-tips-to-effectively-optimize-inp-in-react/

Front End World

30 Dec, 08:30


The Future of CSS: Construct and values with ident()

Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.

https://www.bram.us/2024/12/18/the-future-of-css-construct-custom-idents-and-dashed-idents-with-ident/

Front End World

29 Dec, 14:00


What’s next for Vue in 2025?

Explore key updates in Vue tools for 2025, enhancing your development workflow and staying ahead in the evolving Vue ecosystem.

https://www.vuemastery.com/blog/whats-next-for-vue-in-2025/#vapor-mode

Front End World

28 Dec, 14:00


Scroll-Driven & Fixed

https://frontendmasters.com/blog/scroll-driven-fixed/

Front End World

27 Dec, 11:20


Nobody Gets Fired for Picking JSON, but Maybe They Should?

https://mcyoung.xyz/2024/12/10/json-sucks/

Front End World

26 Dec, 14:00


How to Create a Zig-Zag Box Using CSS

Use modern CSS to create fancy Zig-Zag boxes

https://verpex.com/blog/website-tips/how-to-create-a-zig-zag-box-using-css

Front End World

26 Dec, 11:20


State of JavaScript 2024: Results

https://2024.stateofjs.com/en-US

Front End World

26 Dec, 08:30


JerryScript — A JavaScript engine for Internet of Things

https://jerryscript.net/

Front End World

25 Dec, 11:20


How I gained a new perspective on ARIA

A collection of bad practices in HTML, copied from real websites.

https://htmhell.dev/adventcalendar/2024/17/

Front End World

25 Dec, 08:30


Detecting web performance regressions using statistical tools

Running web performance synthetic testing tools can really be a pain. It’s constant work to make sure to get stable metrics out of your setup so you can find those regressions. You use a bare metal server, you pin the CPU speed, you use a replay proxy to get rid of the noise from the internet and yo

https://calendar.perfplanet.com/2024/detecting-web-performance-regressions-using-statistical-tools/

Front End World

24 Dec, 14:00


Building Scalable Micro-Frontends with Next.js Multi Zones

Let's see how Next.js Multi Zones can make building micro frontends a breeze.

https://techhub.iodigital.com/articles/building-scalable-micro-frontends-with-next-js-multi-zones

Front End World

24 Dec, 11:20


5 Technical Trends To Help Web Developers Stand Out in 2025

These five technical web development trends (not including AI!) will help differentiate you from other developers as we head into a new year.

https://thenewstack.io/5-technical-trends-to-help-web-developers-stand-out-in-2025/

Front End World

24 Dec, 08:30


Unlocking the power of CSS container queries: lessons from the Netflix team

This case study explains the benefits of adopting container queries at Netflix.

https://web.dev/case-studies/netflix-cq

Front End World

22 Dec, 14:00


Page by Page: How Pagination Makes the Web Accessible

A collection of bad practices in HTML, copied from real websites.

https://htmhell.dev/adventcalendar/2024/14/

Front End World

21 Dec, 14:00


Ref Callbacks, React 19 and the Compiler

Reflecting on useCallback, how the Compiler changed my thinking about it, and what React 19 has in store for Ref Callbacks...

https://tkdodo.eu/blog/ref-callbacks-react-19-and-the-compiler

Front End World

20 Dec, 14:00


Accessibility Best Practices for Single Page Applications (SPAs)

Discover essential accessibility best practices for Single Page Applications (SPAs) to ensure dynamic content, focus management, and navigation are user-friendly for everyone.

https://www.sitepoint.com/accessibility-best-practices-for-single-page-applications/

Front End World

20 Dec, 11:20


An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines

10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.

https://www.smashingmagazine.com/2024/12/introduction-css-scroll-driven-animations/

Front End World

19 Dec, 11:20


Bootstrap vs. Pure CSS Grid: A Comparison Guide

Compare Bootstrap and CSS Grid to choose the right tool for your web projects with practical examples and expert insights

https://eleftheriabatsou.hashnode.dev/bootstrap-vs-pure-css-grid-a-comparison-guide

Front End World

19 Dec, 08:30


Implementing infinite scroll in React with React Snap Carousel

Making carousels can be time-consuming, but it doesn't have to be. Learn how to use React Snap Carousel to simplify the process.

https://blog.logrocket.com/implementing-infinite-scroll-react-react-snap-carousel/

Front End World

18 Dec, 14:00


Baseline 2024: more tools to help web developers

web-features dataset, Web Platform Status dashboard, Baseline status widget and more! Take a look back on Baseline in 2024.

https://web.dev/blog/baseline-project-2024?ref=dailydev

Front End World

18 Dec, 11:20


Stop Building Messy APIs! Here’s Your Clean Code Guide

API and RESTful API are fundamental concepts that every programmer should be familiar with. When...

https://dev.to/geekvergil/stop-building-messy-apis-heres-your-clean-code-guide-4h95

Front End World

18 Dec, 08:30


Understanding Angular at Its Core: Key Concepts, Utilities and Best Practices

Here’s a structured organization of the Angular topics, grouped by their categories and...

https://dev.to/renukapatil/understanding-angular-at-its-core-key-concepts-utilities-and-best-practices-c0j

Front End World

17 Dec, 14:00


Solving eventual consistency in frontend

Handle frontend data discrepancies with eventual consistency using WebSockets, Docker Compose, and practical code examples.

https://blog.logrocket.com/solving-eventual-consistency-frontend/

Front End World

17 Dec, 11:20


State of JavaScript 2024

Take the State of JavaScript survey

https://survey.devographics.com/en-US/survey/state-of-js/2024

Front End World

17 Dec, 08:30


A guide to two-way binding in Vue

Learn how to implement one-way and two-way data binding in Vue.js, using v-model and advanced techniques like defineModel for better apps.

https://blog.logrocket.com/guide-two-way-binding-vue/

Front End World

16 Dec, 14:00


Enter WebSockets

Four years in the making, today we are welcoming a new protocol in the expanding family of MSW—WebSockets.

https://mswjs.io/blog/enter-websockets

Front End World

15 Dec, 14:00


From Product to Cart: Adding Guiding Animations to the Shopping Experience

An in-depth tutorial on how to create an engaging animation where items move from the product gallery to the shopping cart.

https://tympanus.net/codrops/2024/11/21/from-product-to-cart-adding-guiding-animations-to-the-shopping-experience/

Front End World

03 Dec, 14:00


You are not a CSS dev if you have not made a CSS reset

Modern day super minimal CSS resets.

https://mikemai.net/blog/2024/11/01/you-are-not-a-css-dev-if-you-have-not-made-a-css-reset.html

Front End World

03 Dec, 11:20


Supercharged Vue 3.0 Reactivity + Pinia Stores

At my workplace I was being tasked with creating a mock chat store for internal local dev work, and...

https://dev.to/ajinkyax/understanding-vue-reactivity-with-pinia-stores-4ahi

Front End World

03 Dec, 08:30


CSS’s new light-dark() function is the best way to do Dark Mode in 2024

It is 2024, and finally there is a pure CSS way of doing dynamic theming, that just works!

https://medium.com/front-end-weekly/forget-javascript-achieve-dark-mode-effortlessly-with-brand-new-css-function-light-dark-2024-94981c61756b

Front End World

02 Dec, 14:00


Vue 3.x Comprehensive Upgrade Guide: In-depth Exploration of Composition API

The comprehensive upgrade of Vue 3.x introduces the Composition API, which is a major improvement over the traditional Options API of Vue…

https://tianyaschool.medium.com/vue-3-x-comprehensive-upgrade-guide-in-depth-exploration-of-composition-api-74f34d61b472

Front End World

02 Dec, 08:30


Tailwind CSS vs Traditional CSS:

https://code2doc.medium.com/tailwind-css-vs-traditional-css-which-one-should-rule-your-next-project-27f595ac27cf

Front End World

30 Nov, 14:00


The devtools features you wish you had, available in Polypane

A while ago Adam Argyle of the Chrome Devtools team asked developers on X/Twitter a question: Adam got a ton of responses with many good suggestions and ideas…

https://polypane.app/blog/the-devtools-features-you-wish-you-had-available-in-polypane/

Front End World

29 Nov, 14:00


Don’t forget to localize your icons

Culture impacts how icons are interpreted, understood, and used.

https://ericwbailey.website/published/dont-forget-to-localize-your-icons/

Front End World

29 Nov, 11:20


Meet Angular v19

In the past two years we doubled down on our investment in developer experience and performance — in every single release we’ve been…

https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

Front End World

28 Nov, 14:00


Loading Data with TanStack Router: react-query

https://frontendmasters.com/blog/tanstack-router-data-loading-2/

Front End World

28 Nov, 11:20


How to Prerelease an npm Package

Recently, we overhauled our shared ESLint config, and I needed to release an alpha version. Thankfully, it turns out to be straightforward, once you know how to do it.

https://cloudfour.com/thinks/how-to-prerelease-an-npm-package/

Front End World

28 Nov, 08:30


The CSS Reset Contradiction

Read The CSS Reset Contradiction and learn CSS with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

https://www.sitepoint.com/css-reset-contradiction/

Front End World

27 Nov, 14:00


Building React Forms with Ease Using React Hook Form, Zod and Shadcn

Forms are something every developer encounters, whether as a user or on the developer side. They’re essential on most websites, but their complexity can vary wildly—from simple 3-field contact forms to giga-monster-t-rex, multi-page forms with 150 fields, dynamic validation, and asynchronous checks.

https://wasp-lang.dev/blog/2024/11/20/building-react-forms-with-ease-using-react-hook-form-and-zod

Front End World

26 Nov, 14:00


Showing Browser Support for Web Platform Features on Your Own Blog

https://frontendmasters.com/blog/showing-browser-support-for-web-platform-features-on-your-own-blog/

Front End World

26 Nov, 11:20


Framer Motion is now independent, introducing Motion

Framer Motion is now independent. Introducing Motion, a new animation library for React and all JavaScript environments. Here's what it means for you.

https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion

Front End World

25 Nov, 14:00


Developing Moxey: A Behind-the-Scenes Look at the Process

In this article, we take you behind the scenes to explore the creative development process of the website for Moxey.no, a film production company based in Stavanger, Norway.

https://tympanus.net/codrops/2024/11/15/developing-moxey-a-behind-the-scenes-look-at-the-process/

Front End World

25 Nov, 08:30


Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations

https://frontendmasters.com/blog/custom-progress-element-using-anchor-positioning-scroll-driven-animations/?ref=dailydev

Front End World

24 Nov, 14:00


An official logo for CSS

Contribute to CSS-Next/logo.css development by creating an account on GitHub.

https://github.com/CSS-Next/logo.css

Front End World

23 Nov, 14:00


React useCallback() — A complete guide

Prevent unnecessary re-renders with React useCallback(). Learn the ins and outs of this powerful Hook and when and how to use it effectively.

https://hygraph.com/blog/react-usecallback-a-complete-guide

Front End World

22 Nov, 14:00


Interactive Hover Spotlight with Smooth Follow Effect

https://codepen.io/samvgm/pen/PoMxmBq

Front End World

22 Nov, 11:20


Working with the Angular tree

The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.

https://blog.logrocket.com/angular-tree-flat-vs-nested-and-more/

Front End World

21 Nov, 14:00


Web Almanac 2024 is live

The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.

https://almanac.httparchive.org/en/2024/

Front End World

21 Nov, 11:20


What are React Portals?

Let's have a look at React Portals and how they can help you in a pinch.

https://techhub.iodigital.com/articles/what-are-react-portals

Front End World

21 Nov, 08:30


Enhancing two-way data binding in Angular

Angular's two-way data binding has evolved with signals, offering improved performance, simpler syntax, and better type inference.

https://blog.logrocket.com/enhancing-two-way-data-binding-angular/

Front End World

20 Nov, 14:00


Why you should use SWC (and not Babel)

In this post, we'll cover the basics of transpilers and we'll compare Babel and SWC based on setup, execution, and speed.

https://blog.logrocket.com/why-you-should-use-swc/

Front End World

20 Nov, 11:20


Beautiful focus outlines

Baker’s son turned web developer, kneading pixels and code for 15+ years. I help you bake your ideas into websites 🥨.

https://medienbaecker.com/articles/focus-outlines

Front End World

20 Nov, 08:30


TIL: inline event handlers still fire when passed to React’s dangerouslySetInnerHTML

Even though it won't run tags, React's dangerouslySetInnerHTML still allows inline event handlers to execute. Here's how you might neutralize that threat.

https://macarthur.me/posts/safer-dangerouslysetinnerhtml/

Front End World

19 Nov, 14:00


Vercel Makes Changes to Next.js To Simplify Self-Hosting

Next.js 15 offers new core support and documentation for self-hosting; plus a new cache API is coming, the team said.

https://thenewstack.io/vercel-makes-changes-to-next-js-to-simplify-self-hosting/

Front End World

19 Nov, 11:20


Cracking Angular DI: The Hidden Layers of Injectors

Angular.love - a place for all Angular enthusiasts created to inspire and educate.

https://angular.love/cracking-angular-di-the-hidden-layers-of-injectors

Front End World

19 Nov, 08:30


Building a real-time chat app using Laravel Reverb and Vue

Build a fully functional, real-time chat application using Laravel Reverb’s backend and Vue’s reactive frontend.

https://blog.logrocket.com/building-real-time-chat-app-using-laravel-reverb-vue/

Front End World

18 Nov, 14:00


es-toolkit, a Lodash alternative

es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.

https://blog.logrocket.com/es-toolkit-lodash-alternative/

Front End World

18 Nov, 08:30


A Friendly Introduction to Container Queries

It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as media queries. In this tutorial, we’ll break it all down and make sense of them, so that you can start using them in your work.

https://www.joshwcomeau.com/css/container-queries-introduction/

Front End World

17 Nov, 14:00


Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website

Feeling good with your Lighthouse score of 100%? You should! But you should also know that you’re only looking at part of the performance picture. Learn how Lighthouse scores are measured differently than other tools, the impact that has on measuring performance metrics, and why you need real-user monitoring for a complete picture.

https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/

Front End World

16 Nov, 14:00


Named Scroll & View Timelines

https://frontendmasters.com/blog/named-scroll-view-timelines/

Front End World

15 Nov, 14:00


defineExpose and <style vars> in Vue 3 for component interaction and theming

Simplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.

https://blog.logrocket.com/defineexpose-and-style-vars-vue-3-component-interaction-theming/

Front End World

15 Nov, 11:20


Mastering Interaction to Next Paint (INP)

https://frontendmasters.com/blog/mastering-interaction-to-next-paint-inp/

Front End World

14 Nov, 14:00


Front End Debugging Part 1: Not just Console Log

Learn advanced techniques for debugging across the full stack, from frontend tools to system-level troubleshooting, and streamline your development.

https://debugagent.com/front-end-debugging-part-1-not-just-console-log

Front End World

14 Nov, 11:20


How to (not) reset a form after a Server Action in React

Learn how not to reset a form after a erroneous server action in React. In other words, how to opt-out of the default form reset behavior in React ...

https://www.robinwieruch.de/react-server-action-reset-form/

Front End World

14 Nov, 08:30


New CSS that can actually be used in 2024#

Multiple innovations have been released and are now supported in all modern browsers, and some of them fundamentally change how to make websites.

https://thomasorus.com/new-css-that-can-actually-be-used-in-2024.html

Front End World

13 Nov, 14:00


Why Alpine is the new jQuery and Why that is an Awesome Thing

https://frontendmasters.com/blog/why-alpine-is-the-new-jquery-and-why-that-is-an-awesome-thing/

Front End World

13 Nov, 11:20


Introducing your new JavaScript package manager: Deno

Deno’s new package manager, added in v2.0, is fast, flexible, and supports Node and package.json. Here’s how it works.

https://deno.com/blog/your-new-js-package-manager

Front End World

13 Nov, 08:30


The stretch keyword: a better alternative to width: 100% in CSS?

Use margins while avoiding overflow and horizontal scrollbars with width: stretch

https://fullystacked.net/stretch/

Front End World

12 Nov, 14:00


Scroll-Driven… Sections

https://frontendmasters.com/blog/scroll-driven-sections/

Front End World

12 Nov, 11:20


Making content-aware components using CSS :has(), grid, and quantity queries

Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.

https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/

Front End World

12 Nov, 08:30


How to create a dropdown menu in React

Here's how to implement a single and multilevel dropdown menu in your React project. Make your nav bars more dynamic and user-friendly.

https://blog.logrocket.com/how-create-dropdown-menu-react/

Front End World

11 Nov, 14:00


How to roll your own auth in JavaScript & TypeScript

Learn how to roll your own authentication in JavaScript & TypeScript ...

https://www.robinwieruch.de/how-to-roll-your-own-auth/

Front End World

11 Nov, 08:30


My Modern CSS Reset

A CSS reset I've been using for new projects.

https://jakelazaroff.com/words/my-modern-css-reset/

Front End World

10 Nov, 14:00


Mastering Microfrontends: Coexisting Vue 2 and Vue 3 in Large-Scale Applications

📚 Table of Contents Introduction How it works How createApp Bridges Vue 2 and Vue...

https://dev.to/jhony/mastering-microfrontends-coexisting-vue-2-and-vue-3-in-large-scale-applications-1g3d

Front End World

09 Nov, 14:00


Why jQuery 4 is a good reminder to stop using jQuery

jQuery 4 proves that jQuery's time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.

https://blog.logrocket.com/why-jquery-4-good-reminder-stop-using-jquery/

Front End World

08 Nov, 14:00


Generating Random Mazes with JavaScript

I didn't get a chance to hit the pumpkin patch this year, so I missed out on seeing any corn mazes. To make up for it, I decided to make some mazes of my own! Being a programmer, I over-engineered it and built a random maze generator!

https://cloudfour.com/thinks/generating-random-mazes-with-javascript/

Front End World

07 Nov, 14:00


Halloween, (CSS) Masks, and Logic Gates

The site DEV.to has a Meme Monday thread where I normally publish the weekly comiCSS cartoon and look for inspiration. Last week, there was a cartoon that caught my attention. I found it funny and decided to create my own version with HTML and CSS using masks. :: Blog post at Alvaro Montoro's Personal Website.

https://alvaromontoro.com/blog/68065/halloween-css-masks-and-logic-gates

Front End World

07 Nov, 08:30


Build an Astro site with Deno

Learn how to build a server-rendered website with Astro and Deno.

https://deno.com/blog/build-astro-with-deno

Front End World

06 Nov, 14:00


Advanced Next.js caching strategies

Learn request memorization, data cache, full route cache, router cache, plus cache invalidation and tools for your Next.js project.

https://blog.logrocket.com/advanced-next-js-caching-strategies/

Front End World

06 Nov, 11:20


Edge to Edge Text

https://frontendmasters.com/blog/edge-to-edge-text/

Front End World

06 Nov, 08:30


aAngular RFC: An updated style guide for the year 2024

Introduction Angular's current style guide was originally written in 2016, just as v2.0.0 released. A lot has changed in the intervening eight years. This RFC proposes a significant overhaul of...

https://github.com/angular/angular/discussions/58412

Front End World

05 Nov, 14:00


How Vercel adopted microfrontends

Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends.

https://vercel.com/blog/how-vercel-adopted-microfrontends

Front End World

05 Nov, 11:20


Possible Future CSS: Tree-Counting Functions and Random Values

https://kizu.dev/tree-counting-and-random/

Front End World

05 Nov, 08:30


The best React select component libraries

Explore select libraries in React, including React Select and alternatives like Downshift, Choice.js, and more.

https://blog.logrocket.com/best-react-select-component-libraries/

Front End World

04 Nov, 14:00


Managing multiple versions of node, without NVM or additional tools

So, you are in a situation where you have to use specific versions of Node, but don’t have access to NVM or N. Its a pain to do the clicky-clicky installer everytime and re-install. You want a...

https://benfrain.com/managing-multiple-versions-of-node-without-nvm-or-additional-tools/

Front End World

04 Nov, 08:30


State of Frontend 2024

Based on surveys filled in by 6028 developers from 139 countries, the State of Frontend 2024 is supported by 23 expert commentaries about frontend trends and the future.

https://tsh.io/state-of-frontend/

Front End World

03 Nov, 14:00


View Transitions Staggering

https://frontendmasters.com/blog/view-transitions-staggering/

Front End World

02 Nov, 14:00


A Modern CSS Reset

I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

https://www.joshwcomeau.com/css/custom-css-reset/

Front End World

01 Nov, 14:00


Understanding infer in TypeScript

The infer keyword and conditional typing in TypeScript allow us to take a type and isolate any piece of it for later use. Learn more here.

https://blog.logrocket.com/understanding-infer-typescript/

Front End World

01 Nov, 11:20


Perfectly Fitting Text to Container in React

Building a React component that automatically updates its font size to fill its parent element as fully as possible.

https://sentry.engineering/blog/perfectly-fitting-text-to-container-in-react

Front End World

31 Oct, 14:00


Getting Started with Piecesjs: Building Native Web Components with a Lightweight Framework

Piecesjs is a lightweight JavaScript framework built upon native web components, offering a suite of tools and utilities tailored for creative websites.

https://tympanus.net/codrops/2024/10/21/getting-started-with-piecesjs-building-native-web-components-with-a-lightweight-framework/

Front End World

31 Oct, 11:20


Svelte 5 is alive

Our biggest release yet

https://svelte.dev/blog/svelte-5-is-alive

Front End World

31 Oct, 08:30


How to Write Cleaner JavaScript Code with The Ternary Operator

When you're coding in JavaScript, handling decisions through conditional statements is one of the core tasks you'll frequently encounter. One of the most commonly used methods for this is the ternary operator. But what exactly is it, and when should ...

https://www.freecodecamp.org/news/write-cleaner-javascript-code-with-the-ternary-operator/

Front End World

30 Oct, 14:00


How to Create Filling CSS Loaders Using One Element

In a previous article, I showed you how to create two types of CSS loaders: a spinner and a progress bar. In this article, you’ll learn about another variation called a filling CSS loader. I think a demo is worth thousands of words, so check out this...

https://www.freecodecamp.org/news/filling-css-loaders/

Front End World

30 Oct, 11:20


New scroll badge in DevTools: Find scrollable elements faster

Learn how DevTools' new scroll badge simplifies debugging scrollable elements (and how we built it!).

https://developer.chrome.com/blog/swe-devtools-scroll-badge?hl=en

Front End World

30 Oct, 08:30


Interactive post on OKLCH color space

Limitations of sRGB, and how OKlch makes color transitions smoother and more natural, just like the human eye perceives them.

https://abhisaha.com/blog/interactive-post-oklch-color-space/

Front End World

29 Oct, 14:00


How To Build a Carbon-Aware Website Using React and Next.js

You can make a carbon-aware website in three simple steps, by harnessing the power of server-side rendering on Next.js.

https://thenewstack.io/how-to-build-a-carbon-aware-website-using-react-and-next-js/

Front End World

29 Oct, 11:20


js13kGames: Winners announced!

https://js13kgames.com/2024/blog/winners-announced

Front End World

29 Oct, 08:30


Redux Persist Storage Options: From LocalStorage to IndexedDB and Beyond

Explore different storage options available with Redux Persist

https://medium.com/@eva.matova6/redux-persist-storage-options-from-localstorage-to-indexeddb-and-beyond-2d36ca3c0dc3

Front End World

28 Oct, 14:00


Understanding Redux: A tutorial with examples

This guide provides a foundational understanding of Redux and why you should use it for state management in a React app.

https://blog.logrocket.com/understanding-redux-tutorial-examples/

Front End World

27 Oct, 14:00


How should <selectedoption> work?

It's part of the new customisable , but there are some tricky details.

https://jakearchibald.com/2024/how-should-selectedoption-work/

Front End World

26 Oct, 14:00


Fanout with Grid and View Transitions

https://frontendmasters.com/blog/fanout-with-grid-and-view-transitions/

Front End World

25 Oct, 14:00


State of CSS 2024: results

https://2024.stateofcss.com/en-US/

Front End World

25 Oct, 11:20


I’ve Been Doing Blockquotes Wrong

https://css-irl.info/ive-been-doing-blockquotes-wrong/

Front End World

24 Oct, 14:00


React Essentials: Stale State and Hooks Pitfalls

Discover common pitfalls of stale state and hooks in React and learn best practices for optimizing component performance.

https://karim-mokhtar.medium.com/react-essentials-stale-state-and-hooks-pitfalls-804c8ff174fb

Front End World

24 Oct, 11:20


Case Study: Duten’s 2024 Website

Explore the dynamic collaboration between designer Sébastien Salord and the talented team at Incredibles Development Studio as they join forces to take Duten’s digital presence to the next level.

https://tympanus.net/codrops/2024/10/17/case-study-dutens-2024-website/

Front End World

24 Oct, 08:30


Introducing Express v5: A New Era for Node.js Framework

Announcing the release of Express version 5

https://expressjs.com/2024/10/15/v5-release.html

Front End World

23 Oct, 14:00


The story of web framework Hono, from the creator of Hono

https://blog.cloudflare.com/the-story-of-web-framework-hono-from-the-creator-of-hono/

Front End World

23 Oct, 11:20


Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content

Discover how text fragments revolutionize web navigation. Learn to link directly to specific text on any web page, surpassing traditional 'Ctrl+F' searches. Explore this powerful, user-friendly feature for precise content sharing and improved web experiences.

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html

Front End World

23 Oct, 08:30


LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite

Compare LocalStorage, IndexedDB, Cookies, OPFS, and WASM-SQLite for web storage, performance, limits, and best practices for modern web apps.

https://rxdb.info/articles/localstorage-indexeddb-cookies-opfs-sqlite-wasm.html

Front End World

22 Oct, 14:00


CSS Tricks That Use Only One Gradient

CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your

https://css-tricks.com/css-tricks-that-use-only-one-gradient/

Front End World

22 Oct, 11:20


Tables with Fixed Headers and Horizontal Scroll

Turns out, creating an HTML table that has both horizontal scroll and fixed headers can be a tricky problem. As another developer said about…

https://www.taniarascia.com/horizontal-scroll-fixed-headers-table/

Front End World

22 Oct, 08:30


Fixing your website’s JavaScript performance

Learn about lesser-known web performance bottlenecks connected to excessive JavaScript usage, like long tasks, large bundle sizes, and hydration issues.

https://developer.mozilla.org/en-US/blog/fix-javascript-performance/

Front End World

21 Oct, 14:00


Understanding and supporting zoom behaviors on the web

Understanding and supporting pinch, text, and browser zoom significantly enhances the user experience. Let's explore a few ways to do so.

https://blog.logrocket.com/understanding-supporting-zoom-behaviors-web/

Front End World

21 Oct, 08:30


Exploring Playful Context-Aware Animations for Fixed Elements

Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.

https://tympanus.net/codrops/2024/10/09/exploring-playful-context-aware-animations-for-fixed-elements/

Front End World

20 Oct, 14:00


Scroll-driven animated card stack with scroll snap events

Dissecting and reworking a very nice demo by Paul Noble.

https://www.bram.us/2024/10/13/scroll-driven-animated-card-stack-with-scroll-snap-events/

Front End World

19 Oct, 14:00


iOS404

The missing web features of iOS

https://ios404.com/

Front End World

18 Oct, 14:00


Announcing Deno 2

Our next major version of Deno combines the simplicity, security, and performance of Deno 1 with full Node and npm backwards compatibility, and much more.

https://deno.com/blog/v2.0

Front End World

18 Oct, 11:20


CSS :has() nav sliding hover tips

https://codepen.io/jh3y/pen/NWQRoXW

Front End World

17 Oct, 14:00


Latest updates to effect() in Angular

Authors: Alex Rickabaugh Mark Thompson

https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

Front End World

17 Oct, 11:20


CSS nesting improves with CSSNestedDeclarations

CSS nesting is getting a whole lot better!

https://web.dev/blog/css-nesting-cssnesteddeclarations

Front End World

17 Oct, 08:30


Handling Paste Events in JavaScript

https://frontendmasters.com/blog/handling-paste-events-in-javascript/

Front End World

16 Oct, 14:00


TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch

TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.

https://socket.dev/blog/tc39-advances-10-ecmascript-proposals-key-features-to-watch

Front End World

16 Oct, 11:20


A guide to the React useReducer Hook

The useReducer Hook, an alternative to the useState Hook, helps you manage complex state logic in React applications.

https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/

Front End World

16 Oct, 08:30


Case Study: Treize Grammes — 2024

Learn about the challenges and creative solutions that shaped Treize Grammes’ bold rebrand and interactive design.

https://tympanus.net/codrops/2024/10/10/case-study-treize-grammes-2024/

Front End World

15 Oct, 14:00


I wasted a day on CSS selector performance to make a website load 2ms faster

A tale of diminishing returns...

https://www.trysmudford.com/blog/i-spent-a-day-making-the-website-go-2ms-faster/

Front End World

15 Oct, 11:20


What’s the Difference Between HTML’s Dialog Element and Popovers?

https://frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers/

Front End World

15 Oct, 08:30


Integrating AI features in Vue using Chrome’s `window.ai` API

The window.ai API integrates AI capabilities directly into the browser for more sophisticated client-side functionality without relying heavily on server-side processing.

https://blog.logrocket.com/chrome-new-window-ai-api-vue-app/

Front End World

14 Oct, 14:00


World Wide Web Foundation closes so Tim Berners-Lee can spend more time with his protocol

Who wants to join his so Solid crew?

https://www.theregister.com/2024/09/30/world_wide_web_foundation_closes/

Front End World

14 Oct, 08:30


Types of React Components [2024]

There are many types of React Components that make it difficult for React beginners. This tutorial goes through each React Component Type by example ...

https://www.robinwieruch.de/react-component-types/

Front End World

13 Oct, 14:00


Web Components Are Not the Future

A few years ago I wrote an article suggesting that Web Components might not be the most beneficial...

https://dev.to/ryansolid/web-components-are-not-the-future-48bh

Front End World

12 Oct, 14:00


ESLint now officially supports linting of JSON and Markdown

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

https://eslint.org/blog/2024/10/eslint-json-markdown-support/

Front End World

11 Oct, 14:00


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

https://dev.to/usman_awan/new-react-19-features-you-should-know-explained-with-code-examples-4jce

Front End World

11 Oct, 11:20


Benchmarking the performance of CSS @property

What impact does @property have on the performance of your CSS?

https://web.dev/blog/at-property-performance

Front End World

10 Oct, 14:00


How to Improve Your Front-End Development Workflow with the ZenUI Library

Hello everyone! In this guide, you’ll learn about the powerful ZenUI Library. It’s a comprehensive, free collection of UI components and templates designed to enhance your development workflow and elevate your projects. Whether you’re a developer loo...

https://www.freecodecamp.org/news/improve-front-end-development-workflow-with-zenui-library/

Front End World

10 Oct, 08:30


Case Study: Federico Pian Portfolio — 2024

Learn how Federico Pian built his 2024 portfolio using Nuxt, GSAP, and TresJs, with insights into design inspiration, animation techniques, and seamless page transitions.

https://tympanus.net/codrops/2024/10/02/case-study-federico-pian-portfolio-2024/

Front End World

26 Sep, 14:00


3 API Vulnerabilities Developers Accidentally Create

Attacking APIs is easy, if you know what to look for, according to professional API hacker Katie Paxton-Fear. She shared how she does it.

https://thenewstack.io/3-api-vulnerabilities-developers-accidentally-create/

Front End World

26 Sep, 11:20


Rethinking CSS in JS

0. Introduction In the world of web development, CSS is a key element in making user...

https://dev.to/black7375/rethinking-css-in-js-5dip

Front End World

26 Sep, 08:30


WebKit Features in Safari 18.0

https://webkit.org/blog/15865/webkit-features-in-safari-18-0/

Front End World

25 Sep, 14:00


Oracle, it’s time to free JavaScript.

Oracle, it's time to free the JavaScript trademark. Join us in asking Oracle to release the trademark, and helping us file a Petition for Trademark Cancellation with the USPTO.

https://javascript.tm/

Front End World

25 Sep, 11:20


Making Orbit Animations with CSS Custom Properties

Let’s animate some CSS custom properties! This is a powerful way to approach CSS animations that would otherwise be tedious or impractical to implement. I’ll...

https://codersblock.com/blog/making-orbit-animations-with-css-custom-properties/

Front End World

25 Sep, 08:30


Exploration of On-Scroll Layout Formations

An exploration of layout formations during scroll, where content is pinned until the layout is fully assembled, using GSAP.

https://tympanus.net/codrops/2024/09/18/exploration-of-on-scroll-layout-formations/

Front End World

24 Sep, 14:00


Angular @let declarations: Smart Template Subscriptions

A real-life use case @let declarations makes the code much simpler.

https://itnext.io/angular-let-declarations-smart-template-subscriptions-88beb395a9ce

Front End World

24 Sep, 11:20


Submitting form data to a Google Sheet from a React App

One thing that Google does that amazes me is the use cases that come with working with their...

https://dev.to/miracool/submitting-form-data-to-a-google-sheet-from-a-react-app-3o83

Front End World

24 Sep, 08:30


Types vs. interfaces in TypeScript

It can be difficult to choose between types and interfaces in TypeScript, but in this post, you'll learn which to use in specific use cases.

https://blog.logrocket.com/types-vs-interfaces-typescript/

Front End World

23 Sep, 14:00


In the first iteration of this benchmark, we made a few mistakes, summarized in this tweet by Theo Browne . We'd like to first apologize for these errors, and to sincerely thank Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh and Domi...

Note:

Front End World

23 Sep, 08:30


An SSR Performance Showdown

💡

https://blog.platformatic.dev/ssr-performance-showdown

Front End World

22 Sep, 14:00


HTML Whitespace is Broken

A deep dive into HTML whitespace collapsing: How it works, why it sucks, how it should work, and how to deal with it.

https://blog.dwac.dev/posts/html-whitespace/#html-whitespace-is-broken

Front End World

21 Sep, 14:00


The secret inside One Million Checkboxes

Teens wrote secret binary messages in One Million Checkboxes. I found them.

https://eieio.games/essays/the-secret-in-one-million-checkboxes/

Front End World

20 Sep, 14:00


Dynamic Layouts with Vue jsx: A Guide to Flexible and Maintainable UIs

Discover how dynamic layouts with Vue jsx can enhance your development workflow, making UIs flexible, maintainable, and efficient with Vue.js.

https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/

Front End World

17 Sep, 08:30


Build Vue apps with GOV.UK Design System components

Vue versions of every GOV.UK component

https://govukvue.org/

Front End World

16 Sep, 14:00


Creating toast notifications using Solid Toast

Learn how to create and customize toast notifications using Solid Toast, a lightweight library for Solid.js.

https://blog.logrocket.com/creating-toast-notifications-using-solid-toast/

Front End World

16 Sep, 08:30


The Two Lines of CSS That Tanked Performance (120fps to 40fps)

Learn WCs felt so sluggish on Firefox that I disabled the background animation for all users. Turns out, fixing it took changing two lines of CSS.

https://component-odyssey.com/articles/13-improving-performance-by-changing-two-lines-of-css

Front End World

15 Sep, 14:00


Backgrounds for the Box Model (and why it can be useful)

https://frontendmasters.com/blog/backgrounds-for-the-box-model-and-why-it-can-be-useful/

Front End World

14 Sep, 14:00


How I Created a 3.78MB Docker Image for a JavaScript Service

https://shenzilong.cn/record/How%20I%20Created%20a%203.78MB%20Docker%20Image%20for%20a%20JavaScript%20Service

Front End World

13 Sep, 14:00


Announcing Vue 3.5

https://blog.vuejs.org/posts/vue-3-5

Front End World

13 Sep, 11:20


New Web Development Tool Pulls Design Tokens From Figma

Handoff, an open source plugin, provides semantic context for Figma design elements, allowing developers to stay updated on changes.

https://thenewstack.io/new-web-development-tool-pulls-design-tokens-from-figma/

Front End World

12 Sep, 14:00


Angular v19: The future is standalone!

Angular v19 will make standalone: true the default for components, directives, and pipes.

https://blog.angular.dev/the-future-is-standalone-475d7edbc706

Front End World

12 Sep, 11:20


CSS display contents

Learn how to use display contents to build more fluid layouts.

https://ishadeed.com/article/display-contents/

Front End World

12 Sep, 08:30


OpenAI is shockingly good at unminifying code

I was curious about how a component was implemented in a minified JavaScript file and used ChatGPT to reverse engineer the component.

https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai

Front End World

11 Sep, 14:00


How to provide better attribution for your RUM metrics

Detailed demo showing how to make attribution more meaningful and intuitive, making it much easier for you to zero in on your performance issues.

https://www.speedcurve.com/blog/providing-better-attribution/

Front End World

11 Sep, 11:20


The Dev Tools Performance Monitor Panel

Weeks ago I was looking in to a performance issue for our animated spinner component and stumbled across a tool in DevTools I hadn’t used before: The Performance Monitor Panel. In you open Dev Tools > More Tools > Performance Monitor you’ll see some helpful high-level charts and graphs of the realtime performance data of your UI.

https://daverupert.com/2024/09/dev-tools-performance-monitor-panel/

Front End World

11 Sep, 08:30


Sticky Headers And Full-Height Elements: A Tricky Combination

Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like 100vh. Philip Braunen explores why this happens and presents a solution to fix it.

https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/

Front End World

10 Sep, 14:00


How Much Does It Cost To Hire React Developers in 2024?

This article breaks down the cost of hiring a React developer across different regions, including USA, Africa, and Europe.

https://www.reactsquad.io/blog/how-much-does-it-cost-to-hire-react-developer

Front End World

10 Sep, 11:20


Introducing @bramus/style-observer, a MutationObserver for CSS

@bramus/style-observer is a MutationObserver for CSS. It allows you to attach JavaScript callbacks to changes in computed values of CSS properties

https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/

Front End World

10 Sep, 08:30


Chain React 2024, 21 videos

Catch up on all of the talks from the 5th annual U.S. React Native Conference held in Portland, OR July 18-19, 2024. At Chain React, you'll find talks, live ...

https://www.youtube.com/playlist?list=PLE7tQUdRKcyb81ybEVsrk6PfxXu7pJs1i#chainreact2024

Front End World

09 Sep, 14:00


Building a breakout element with container units

Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.

https://piccalil.li/blog/building-a-breakout-element-with-container-units/

Front End World

09 Sep, 08:30


JavaScript Generators Explained, But On A Senior-Level

Many tutorials on generators only scratch the surface. In this article, we’ll dive deep to give you an advanced understanding of generators.

https://www.reactsquad.io/blog/understanding-generators-in-javascript

Front End World

08 Sep, 14:00


Interop 2024: Chrome at 100% for the accessibility focus area

Chrome now passes 100% of tests for the accessibility focus area. This post explains the improvements made.

https://web.dev/blog/interop-2024-a11y

Front End World

07 Sep, 14:00


3 Lessons in Accessible Development From an Expert Tester

Computer engineer and accessibility expert Suleyman Gokyigit shares the key accessibility steps every development teams should adopt.

https://thenewstack.io/3-lessons-in-accessible-development-from-an-expert-tester/

Front End World

06 Sep, 14:00


Zustand adoption guide: Overview, examples, and alternatives

Learn about Zustand's simplistic approach to managing state and how it compares to existing tools such as Mobx and Redux.

https://blog.logrocket.com/zustand-adoption-guide/

Front End World

06 Sep, 11:20


Paragraphs

https://www.scottohara.me/blog/2024/08/29/paragraphs.html

Front End World

05 Sep, 14:00


Using provide/inject in Vue.js 3 with the Composition API

Use provide/inject with the Composition API in Vue.js 3 to easily pass data from a parent-level component to a deeply nested child component.

https://blog.logrocket.com/provide-inject-vue-js-3-composition-api/

Front End World

05 Sep, 11:20


Vue.js Mistakes You Should Avoid (and How to Fix Them)

https://muneeburrehman.com/blogs/developer-guide/vue-js-mistakes-you-should-avoid-and-how-to-fix-them

Front End World

05 Sep, 08:30


Announcing TypeScript 5.6 RC

Today we are excited to announce the availability of the release candidate of TypeScript 5.6. To get started using the RC, you can get it through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.6! Disallowed Nullish and Truthy Checks Iterator Helper Methods Strict Builtin …

https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/

Front End World

04 Sep, 14:00


Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

Learn how to apply a pixels/grid displacement to a texture in Three.js using shaders and GPGPU with a subtle RGB shift effect on cursor move.

https://tympanus.net/codrops/2024/08/27/grid-displacement-texture-with-rgb-shift-using-three-js-gpgpu-and-shaders/