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
Ko'proq ko'rsatish26 364Obunachilar
-124 soatlar
+147 kunlar
+21430 kunlar
Postni joylashtirish vaqti tarqalishi
Ma'lumot yuklanmoqda...
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.
Nashrlar tahlili
| Postlar | Ko'rishlar | Ulashishlar | Ko'rishlar dinamikasi |
01 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 | 622 | 16 | Loading... |
02 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 | 968 | 5 | Loading... |
03 A primer on the cascade and specificity
https://piccalil.li/blog/a-primer-on-the-cascade-and-specificity/ | 1 211 | 8 | Loading... |
04 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 193 | 8 | Loading... |
05 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 333 | 9 | Loading... |
06 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 223 | 6 | Loading... |
07 Upgrading jQuery: Working Towards a Healthy Web
https://blog.jquery.com/2024/04/17/upgrading-jquery-working-towards-a-healthy-web/ | 1 160 | 7 | Loading... |
08 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 399 | 10 | Loading... |
09 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 391 | 13 | Loading... |
10 Layer Cake — a graphics framework for Svelte
A framework for mostly-reusable graphics with svelte
https://layercake.graphics/ | 1 299 | 3 | Loading... |
11 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 542 | 8 | Loading... |
12 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 512 | 7 | Loading... |
13 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 487 | 6 | Loading... |
14 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 688 | 5 | Loading... |
15 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 624 | 7 | Loading... |
16 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 719 | 10 | Loading... |
17 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/ | 1 982 | 7 | Loading... |
18 How would you build Wordle with just HTML & CSS?
A fun little form validation and CSS selector experiment
https://scottjehl.com/posts/wordleish/ | 1 967 | 7 | Loading... |
19 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 066 | 15 | Loading... |
20 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/ | 1 984 | 6 | Loading... |
21 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 001 | 7 | Loading... |
22 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/ | 1 943 | 13 | Loading... |
23 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/ | 1 920 | 6 | Loading... |
24 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 859 | 7 | Loading... |
25 Testing HTML With Modern CSS
https://heydonworks.com/article/testing-html-with-modern-css/ | 1 817 | 7 | Loading... |
26 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 126 | 10 | Loading... |
27 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 013 | 8 | Loading... |
28 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 150 | 15 | Loading... |
29 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... |
30 What even is a JSON Number?
https://blog.trl.sn/blog/what-is-a-json-number/ | 2 282 | 11 | Loading... |
31 Dioma — Elegant dependency injection container for vanilla JavaScript and TypeScript
Elegant dependency injection container for vanilla JavaScript and TypeScript - zheksoon/dioma
https://github.com/zheksoon/dioma | 2 333 | 13 | Loading... |
32 Node.js: The Documentary | An origin story
Back in 2008, most people thought of JavaScript as just a client-side language. But when Google's V8 appeared, young developer Ryan Dahl made the connection ...
https://www.youtube.com/watch?v=LB8KwiiUGy0 | 2 470 | 14 | Loading... |
33 History of JS interop in Dart
Support for Wasm just landed in the current Flutter beta, thanks to an exciting JavaScript interop milestone reached in Dart 3.3. To…
https://medium.com/dartlang/history-of-js-interop-in-dart-98b06991158f | 3 025 | 4 | Loading... |
34 Mojo CSS vs. Tailwind: Choosing the best CSS framework
Compare the established Tailwind CSS framework with the newer Mojo CSS based on benchmarks like plugins, built-in components, and more.
https://blog.logrocket.com/mojo-css-vs-tailwind-choosing-best-css-framework/ | 2 247 | 10 | Loading... |
35 Angular Signal Queries: simplifying DOM querying
Angular Signal Queries offer an alternative to @ViewChild, @ViewChildren, @ContentChild and @ContentChildren. Let’s see what has changed.
https://www.codemotion.com/magazine/frontend/angular-signal-queries-simplifying-dom-querying/ | 2 165 | 8 | Loading... |
36 Angular Signal Inputs: road to Signal Components
Angular v17.1.0 has been released recently and it introduced a new amazing input API designed to...
https://dev.to/davidepassafaro/angular-signal-inputs-road-to-signal-components-32cl | 2 054 | 9 | Loading... |
37 Diving into the Node.js Website Redesign
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign | 2 107 | 11 | Loading... |
38 The View Transitions API
Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to …
https://frontendmasters.com/blog/the-view-transition-api/ | 2 189 | 10 | Loading... |
39 Redux Toolkit adoption guide: Overview, examples, and alternatives
Redux Toolkit is the officially recommended way to build Redux apps. Let's explore why it's a great tool to leverage in your next project.
https://blog.logrocket.com/redux-toolkit-adoption-guide/ | 2 038 | 11 | Loading... |
40 Modern CSS patterns and techniques in Campfire
Recently, customers who have purchased a copy of ONCE/Campfire were invited to participate in a live walk through the app's CSS code. Campfire was built with plain CSS, fully #nobuild without compiling or pre-processing, and uses the latest web platform features available in evergreen browsers—CSS nesting, :has(), :is(), and :where(); ...
https://world.hey.com/jz/modern-css-patterns-and-techniques-in-campfire-30b94808 | 1 974 | 14 | Loading... |
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
👍 2
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
A primer on the cascade and specificity
https://piccalil.li/blog/a-primer-on-the-cascade-and-specificity/
❤ 1
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/
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/
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/
Upgrading jQuery: Working Towards a Healthy Web
https://blog.jquery.com/2024/04/17/upgrading-jquery-working-towards-a-healthy-web/
Upgrading jQuery: Working Towards a Healthy Web | Official jQuery Blog
jQuery: The Write Less, Do More, JavaScript Library
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👎 1
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
Layer Cake — a graphics framework for Svelte
A framework for mostly-reusable graphics with svelte
https://layercake.graphics/
👍 1