Front End World
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
Show more26 377
Subscribers
+1124 hours
+47 days
+17730 days
Posting time distributions
Data loading in progress...
Find out who reads your channel
This graph will show you who besides your subscribers reads your channel and learn about other sources of traffic.
Publication analysis
| Posts | Views | Shares | Views dynamics |
01 Global State Management Options in Angular
Photo by Kyle Glenn on Unsplash
https://medium.com/@seanhaddock_60973/global-state-management-options-in-angular-c063214380d0 | 442 | 5 | Loading... |
02 HTML attributes vs DOM properties
They're completely different, but often coupled.
https://jakearchibald.com/2024/attributes-vs-properties/ | 625 | 8 | Loading... |
03 SPA-Like Navigation Preserving Web Component State
Learn how to keep your web components' state intact while navigating, just like in a SPA!
https://aralroca.com/blog/spa-navigation | 720 | 6 | Loading... |
04 Get your codebase ready for React 19
Is your app ready for what’s coming up in React 19’s release? Get prepared with what is going to change ahead of its release date.
https://thoughtbot.com/blog/get-your-codebase-ready-for-react-19 | 1 031 | 13 | Loading... |
05 Exploring Material 3 Design With Angular Material
In this article, we will explore Material 3 design integration with Angular Material.
https://angular-material.dev/articles/angular-material-3 | 1 012 | 5 | Loading... |
06 Hello Bun: How Sveld now deploys 2x faster on GitHub and Render
Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.
https://render.com/blog/hello-bun-deploy-2x-faster-on-github-render | 1 013 | 5 | Loading... |
07 Master Reactivity in JavaScript: 8 Powerful Patterns…
In the realm of web development, reactivity plays a pivotal role. It embodies how a system dynamically responds to data alterations. This…
https://lokesh-prajapati.medium.com/master-reactivity-in-javascript-8-powerful-patterns-e17bc19d3d54 | 1 149 | 16 | Loading... |
08 How To Monitor And Optimize Google Core Web Vitals
The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings. In this article, we’ll look at what Core Web Vitals are, how they are measured, and how you can use DebugBear to monitor them continuously.
https://www.smashingmagazine.com/2024/04/monitor-optimize-google-core-web-vitals/ | 1 092 | 10 | Loading... |
09 Create a React app with Wing
ReactJS library has been in the market for a very long time and we all are very much aware of its power. We all know how we can build UIs using ReactJS, create components, and much more. If you don't know about React there are tons of free resources ...
https://jsayushthakur.hashnode.dev/create-a-react-app-with-wing | 1 159 | 10 | Loading... |
10 How Using Angular’s inject() Function Has Saved Me 1000 Lines of Code
Discover how easily can the inject() function improve your project
https://javascript.plainenglish.io/how-using-the-angulars-inject-function-has-saved-me-1000-lines-of-code-82b699183da8 | 1 269 | 10 | Loading... |
11 What the US DoJ adopting WCAG 2.1 A/AA in ADA Title II for Web and Mobile Apps means for you
I’m thrilled to see that the US Justice Department just announced an advanced copy of a final rule to improve web and mobile app accessibility for people
https://www.deque.com/blog/what-the-us-doj-adopting-wcag-2-1-a-aa-in-ada-title-ii-for-web-and-mobile-apps-means-for-you/ | 1 312 | 5 | Loading... |
12 Top 6 JavaScript and NodeJS Libraries for Web Scraping
Web scraping, the process of extracting data from websites, has become an increasingly valuable tool for businesses, researchers, and…
https://blog.stackademic.com/top-6-javascript-and-nodejs-libraries-for-web-scraping-f71dc4d79ee4 | 1 464 | 20 | Loading... |
13 Improving Dynamic Component Loader Typings in Angular Using Inputs
Cover image by Google's Gemini, I have no idea why it is a skull. When I first read about signals in...
https://dev.to/bwca/improving-dynamic-component-loader-typings-in-angular-using-inputs-obl | 1 625 | 6 | Loading... |
14 A primer on the cascade and specificity
https://piccalil.li/blog/a-primer-on-the-cascade-and-specificity/ | 1 763 | 8 | Loading... |
15 Things That Can Break aspect-ratio in CSS
CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired des…
https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css/ | 1 690 | 9 | Loading... |
16 Demystifying Screen Readers: Accessible Forms & Best Practices
This is the 3rd post in a small series we are doing on form accessibility. If you missed the 2nd post, check out Managing User Focus with :focus-visible. In this post we are going to look at using a screen reader when navigating a form, and also some best practices.
https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/ | 1 788 | 10 | Loading... |
17 Demystifying Google’s Recent Switch to INP
In this episode of Fourcast, Jason Grigsby sits down with Tammy Everts, a recognized expert in web performance and user experience. They break down Google’s recent change from First Input Delay (FID) to Interaction to Next Paint (INP) in non-technical terms, and talk about what the change means for website owners and their businesses.
https://cloudfour.com/thinks/demystifying-googles-recent-switch-to-inp/ | 1 601 | 7 | Loading... |
18 Upgrading jQuery: Working Towards a Healthy Web
https://blog.jquery.com/2024/04/17/upgrading-jquery-working-towards-a-healthy-web/ | 1 577 | 8 | Loading... |
19 How to Build a Dynamic Dropdown Component in React — React Compound Component Pattern Explained
Dropdowns have been an important part of websites and apps for a long time. They're an unsung heros of user interactions, silently facilitating countless actions and decisions with just a click or tap. You probably encountered one today, whether it was selecting a category on your favourite online store
https://www.freecodecamp.org/news/build-a-dynamic-dropdown-component/ | 1 841 | 12 | Loading... |
20 Did Signals Just Land in React?
"Signals" are used to manage client-side state, and recent developments suggest they could be useful in React. Paul Scanlon investigates.
https://thenewstack.io/did-signals-just-land-in-react/ | 1 676 | 13 | Loading... |
21 Layer Cake — a graphics framework for Svelte
A framework for mostly-reusable graphics with svelte
https://layercake.graphics/ | 1 610 | 4 | Loading... |
22 Zustand and React Context
Zustand stores a global and don't need React Context - but sometimes, it makes sense to combine them regardless.
https://tkdodo.eu/blog/zustand-and-react-context | 1 903 | 9 | Loading... |
23 How to Build a Marquee Component with React
When you think of marquees, you often envision the vibrant lights and spinning displays at amusement parks, bringing back fond memories of your childhood. Similarly in web applications, marquees inject a lively visual sense by effortlessly grabbing attention and infusing your online projects with dynamism. Join me as we explore
https://www.freecodecamp.org/news/how-to-build-a-marquee-component-with-react/ | 1 842 | 8 | Loading... |
24 Setting Up Storybook for React Components
Learn how we set up Storybook for our React component library and use Chromatic to test and review components in CI.
https://www.dolthub.com/blog/2024-04-08-storybook-react-components/ | 1 703 | 7 | Loading... |
25 Jest adoption guide: Overview, examples, and alternatives
Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.
https://blog.logrocket.com/jest-adoption-guide/ | 1 904 | 5 | Loading... |
26 Building web-based terminal components with Termino.js
Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.
https://blog.logrocket.com/building-web-based-terminal-components-termino-js/ | 1 794 | 8 | Loading... |
27 A CSS-Powered Add/Remove Tags UI
Checkboxes and labels used to have to be right next to each other to be a potent UI duo. You could do trickery like this: Toggle
https://frontendmasters.com/blog/a-css-powered-add-remove-tags-ui/ | 1 886 | 11 | Loading... |
28 Why Nuxt makes your Vue life better
Nuxt is a supercharged framework built on top of Vue.js. In this article let's explore some features about Nuxt that will make your experience with building Vue.js application much better.
https://vuejsdevelopers.com/2024/04/10/why-nuxt-makes-your-vue-life-better/ | 2 134 | 8 | Loading... |
29 How would you build Wordle with just HTML & CSS?
A fun little form validation and CSS selector experiment
https://scottjehl.com/posts/wordleish/ | 2 104 | 8 | Loading... |
30 React Server Components in a Nutshell
Paul Scanlon uses Waku to show how RSCs give React developers access to asynchronous server-side requests and data at the component level.
https://thenewstack.io/react-server-components-in-a-nutshell/ | 2 250 | 15 | Loading... |
31 How to display language-specific quotes in CSS
Use CSS and the open-quote and close-quote values to display language-specific quotes.
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/ | 2 115 | 6 | Loading... |
32 Always unsubscribe. No exceptions. Debate closed.
So many years with Angular. So many years with RxJS. Yet people still fight over “when NOT to unsubscribe”.
https://itnext.io/always-unsubscribe-no-exceptions-debate-closed-5184c2655ac3 | 2 118 | 7 | Loading... |
33 Creating a Navbar in React
How to build a navbar in React, covering everything from design considerations to implementation and accessibility best practices.
https://www.sitepoint.com/creating-a-navbar-in-react/ | 2 067 | 13 | Loading... |
34 What if you had real control over Light Mode / Dark Mode on a per-site basis?
Dark Mode Toggle Buttons should be a browser feature. Thanks to the Web Preferences API, that might become a reality someday.
https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/ | 2 001 | 6 | Loading... |
35 Sliding 3D Image Frames In CSS
Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single using clever CSS techniques that demonstrate advanced, modern styling practices.
https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/ | 1 937 | 7 | Loading... |
36 Testing HTML With Modern CSS
https://heydonworks.com/article/testing-html-with-modern-css/ | 1 894 | 7 | Loading... |
37 Core Web Vitals: Rank your websites higher on SEO
Core Web Vitals are metrics that Google uses to measure the user experience of a webpage. They are an important factor in search engine…
https://blog.codeparrot.ai/core-web-vitals-rank-your-websites-higher-on-seo-29a2e7cba49c | 2 165 | 10 | Loading... |
38 Managing User Focus with :focus-visible
This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo
https://css-tricks.com/managing-user-focus-with-focus-visible/ | 2 049 | 8 | Loading... |
39 ESLint v9.0.0 released
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/04/eslint-v9.0.0-released/ | 2 191 | 15 | Loading... |
40 A Complete Guide to CSS Logical Properties, with Cheat Sheet
Learn what CSS logical properties are, how they work, and what they're useful for, even if you're not working on a multilingual site.
https://www.sitepoint.com/css-logical-properties-guide/ | 2 112 | 19 | Loading... |
Photo unavailableShow in Telegram
Global State Management Options in Angular
Photo by Kyle Glenn on Unsplash
https://medium.com/@seanhaddock_60973/global-state-management-options-in-angular-c063214380d0
🎉 1
Photo unavailableShow in Telegram
HTML attributes vs DOM properties
They're completely different, but often coupled.
https://jakearchibald.com/2024/attributes-vs-properties/
😁 1
Photo unavailableShow in Telegram
SPA-Like Navigation Preserving Web Component State
Learn how to keep your web components' state intact while navigating, just like in a SPA!
https://aralroca.com/blog/spa-navigation
Photo unavailableShow in Telegram
Get your codebase ready for React 19
Is your app ready for what’s coming up in React 19’s release? Get prepared with what is going to change ahead of its release date.
https://thoughtbot.com/blog/get-your-codebase-ready-for-react-19
👏 6🥰 1
Exploring Material 3 Design With Angular Material
In this article, we will explore Material 3 design integration with Angular Material.
https://angular-material.dev/articles/angular-material-3
Article: Exploring Material 3 Design With Angular Material | Angular Material Dev
In this article, we will explore Material 3 design integration with Angular Material.
Photo unavailableShow in Telegram
Hello Bun: How Sveld now deploys 2x faster on GitHub and Render
Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.
https://render.com/blog/hello-bun-deploy-2x-faster-on-github-render
Photo unavailableShow in Telegram
Master Reactivity in JavaScript: 8 Powerful Patterns…
In the realm of web development, reactivity plays a pivotal role. It embodies how a system dynamically responds to data alterations. This…
https://lokesh-prajapati.medium.com/master-reactivity-in-javascript-8-powerful-patterns-e17bc19d3d54
👍 1
Photo unavailableShow in Telegram
How To Monitor And Optimize Google Core Web Vitals
The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings. In this article, we’ll look at what Core Web Vitals are, how they are measured, and how you can use DebugBear to monitor them continuously.
https://www.smashingmagazine.com/2024/04/monitor-optimize-google-core-web-vitals/
🔥 1👏 1
Photo unavailableShow in Telegram
Create a React app with Wing
ReactJS library has been in the market for a very long time and we all are very much aware of its power. We all know how we can build UIs using ReactJS, create components, and much more. If you don't know about React there are tons of free resources ...
https://jsayushthakur.hashnode.dev/create-a-react-app-with-wing
🎉 2
Photo unavailableShow in Telegram
How Using Angular’s inject() Function Has Saved Me 1000 Lines of Code
Discover how easily can the inject() function improve your project
https://javascript.plainenglish.io/how-using-the-angulars-inject-function-has-saved-me-1000-lines-of-code-82b699183da8
👏 2