ββFrontend Weekly Digest #7
Web-Development:
β’ Inside the mind of a frontend developer: Article layout
β’ Does WWW still belong in URLs?
CSS:
β’ Animated Background Stripes That Transition on Hover
β’ CSS For URLs and HTTP Headers
β’ A Practical Guide to CSS Media Queries
β’ About Modern Sass
β’ Using the CSS :modal pseudo-selector
JavaScript:
β’ Working with the DOM in JavaScript
React:
β’ Implementing reCAPTCHA in React
β’ The pragmatic guide to React network programming
β’ A guide to better state management with Preact Signals
Vue
β’ Vuetify, from Webpack to Vite
β’ Debounced Search Component in Vue.js
β’ Building a Todo App With Vue 3 Composition API
Angular:
β’ Collections State Management Service for Angular
β’ Letβs optimize Angular bundle size with these steps
β’ Angular Testing: Component Testing
Web-Development:
β’ Inside the mind of a frontend developer: Article layout
β’ Does WWW still belong in URLs?
CSS:
β’ Animated Background Stripes That Transition on Hover
β’ CSS For URLs and HTTP Headers
β’ A Practical Guide to CSS Media Queries
β’ About Modern Sass
β’ Using the CSS :modal pseudo-selector
JavaScript:
β’ Working with the DOM in JavaScript
React:
β’ Implementing reCAPTCHA in React
β’ The pragmatic guide to React network programming
β’ A guide to better state management with Preact Signals
Vue
β’ Vuetify, from Webpack to Vite
β’ Debounced Search Component in Vue.js
β’ Building a Todo App With Vue 3 Composition API
Angular:
β’ Collections State Management Service for Angular
β’ Letβs optimize Angular bundle size with these steps
β’ Angular Testing: Component Testing
π3
ββFrontend Weekly Digest #8
Web-Development:
β’ I asked Chat GPT to build a To-Do app β Have we finally met our replacement?
β’ Pagination vs. infinite scroll: Making the right decision for UX
β’ 30 Ways to Improve Website Performance with CSS
β’ IMG Quest β An open-source API to generate Open Graph images
β’ Top 5 alternatives to Webpack
CSS:
β’ A :nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()
β’ So, youβd like to animate the display property
β’ The True Power Of CSS Columns
β’ Mesher: CSS mesh gradients generator
β’ CSS image()
β’ Guide to image overlays in CSS
β’ CSS Style Queries
β’ Use CSS to Reveal a Child Element in the DOM by Interacting with the Parent
JavaScript:
⒠Next, Nest, Nuxt⦠Nust?
React:
β’ Exploring React Routerβs data, navigation, and error handling APIs
β’ 3 Common Mistakes to Avoid When Handling Events in React
β’ Optimize your data fetching with React Query
β’ The 8 Best Real-Life React Apps Examples
Vue
β’ Vue3 β why computed functions can make your code cleaner
Angular:
β’ Angular Custom Code Generator | In Action
β’ Advantages of using Dictionary or Map Object in Angular
Web-Development:
β’ I asked Chat GPT to build a To-Do app β Have we finally met our replacement?
β’ Pagination vs. infinite scroll: Making the right decision for UX
β’ 30 Ways to Improve Website Performance with CSS
β’ IMG Quest β An open-source API to generate Open Graph images
β’ Top 5 alternatives to Webpack
CSS:
β’ A :nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()
β’ So, youβd like to animate the display property
β’ The True Power Of CSS Columns
β’ Mesher: CSS mesh gradients generator
β’ CSS image()
β’ Guide to image overlays in CSS
β’ CSS Style Queries
β’ Use CSS to Reveal a Child Element in the DOM by Interacting with the Parent
JavaScript:
⒠Next, Nest, Nuxt⦠Nust?
React:
β’ Exploring React Routerβs data, navigation, and error handling APIs
β’ 3 Common Mistakes to Avoid When Handling Events in React
β’ Optimize your data fetching with React Query
β’ The 8 Best Real-Life React Apps Examples
Vue
β’ Vue3 β why computed functions can make your code cleaner
Angular:
β’ Angular Custom Code Generator | In Action
β’ Advantages of using Dictionary or Map Object in Angular
π3
ββFrontend Weekly Digest #9
Web-Development:
β’ How to build interactive pie charts using only CSS and HTML
β’ Lazy-loading LCP images: Why does this anti-pattern happen?
CSS:
β’ Creating smoother CSS transitions with Animate CSS Grid
β’ Masking images in CSS with the mask-image property
β’ Advanced guide to the CSS toggle() pseudo-class
β’ A CSS challenge: skewed highlight
JavaScript:
β’ Next.js vs. Nuxt.js: Ultimate guide
β’ Scroll animation using the JavaScript build in Intersection Observer API (third party libraries)
β’ The Ultimate Guide To localStorage in JavaScript
β’ 10 Front-end Interview Questions You Should Know About
React:
β’ React: A JavaScript library for building user interfaces
β’ React 18 New Features
β’ Building a mobile app with React and Ionic
Angular:
β’ 5 Tips for Optimizing Angular Bundle Size
β’ The Testing Library in Angular
Web-Development:
β’ How to build interactive pie charts using only CSS and HTML
β’ Lazy-loading LCP images: Why does this anti-pattern happen?
CSS:
β’ Creating smoother CSS transitions with Animate CSS Grid
β’ Masking images in CSS with the mask-image property
β’ Advanced guide to the CSS toggle() pseudo-class
β’ A CSS challenge: skewed highlight
JavaScript:
β’ Next.js vs. Nuxt.js: Ultimate guide
β’ Scroll animation using the JavaScript build in Intersection Observer API (third party libraries)
β’ The Ultimate Guide To localStorage in JavaScript
β’ 10 Front-end Interview Questions You Should Know About
React:
β’ React: A JavaScript library for building user interfaces
β’ React 18 New Features
β’ Building a mobile app with React and Ionic
Angular:
β’ 5 Tips for Optimizing Angular Bundle Size
β’ The Testing Library in Angular
π3
ββFrontend Weekly Digest #10
Web-Development:
β’ Scaling Frontend Applications in 2023
β’ Working with WebP images
β’ Making clear website navigation menus for better UX
β’ Automate image optimization using the TinyPNG API
CSS:
β’ CSS :has() feature detection with @supports(selector(β¦)): You want :has(+ *), not :has(*)
β’ CSS Lengths
β’ Justify Space Between Individual Items in Flexbox
JavaScript:
β’ Creating JavaScript functions and web apps with GPT-3βs free code writer
β’ I asked ChatGPT AI to write React and JavaScript code β I was shocked!
β’ Draw SVG rope using JavaScript
React:
β’ 6 React questions for technical interviews and their answers
β’ Who needs a backend? ChatGPT as the universal Redux reducer
β’ A guide to streaming SSR with React 18
Vue:
β’ The 5 ways to Define a Component in Vue 3
β’ API Management in Nuxt 3 with TypeScript
β’ How ArrowJS compares to React and Vue.js
Angular:
β’ Angular β improved required roles directive
β’ Overview of Angularβs Change Detection operations in Ivy
β’ How to use Route Reuse Strategy in Angular
Web-Development:
β’ Scaling Frontend Applications in 2023
β’ Working with WebP images
β’ Making clear website navigation menus for better UX
β’ Automate image optimization using the TinyPNG API
CSS:
β’ CSS :has() feature detection with @supports(selector(β¦)): You want :has(+ *), not :has(*)
β’ CSS Lengths
β’ Justify Space Between Individual Items in Flexbox
JavaScript:
β’ Creating JavaScript functions and web apps with GPT-3βs free code writer
β’ I asked ChatGPT AI to write React and JavaScript code β I was shocked!
β’ Draw SVG rope using JavaScript
React:
β’ 6 React questions for technical interviews and their answers
β’ Who needs a backend? ChatGPT as the universal Redux reducer
β’ A guide to streaming SSR with React 18
Vue:
β’ The 5 ways to Define a Component in Vue 3
β’ API Management in Nuxt 3 with TypeScript
β’ How ArrowJS compares to React and Vue.js
Angular:
β’ Angular β improved required roles directive
β’ Overview of Angularβs Change Detection operations in Ivy
β’ How to use Route Reuse Strategy in Angular
π3
ββFrontend Weekly Digest #11
Web-Development:
β’ Understanding Authentication In Websites: A Banking Analogy
β’ Modernizing Frontend Applications: A Guide
β’ Why Not document.write()?
β’ Our top Core Web Vitals recommendations for 2023
CSS:
β’ Faking Min Width on a Table Column
β’ Sibling Scopes in CSS, thanks to :has()
β’ 3D in CSS
β’ Conditional CSS
β’ CSS color functions and custom properties
β’ Getting started with the View Transitions API
β’ Best CSS shape generators with demo
β’ Different ways to truncate text with CSS
JavaScript:
β’ JavaScript Concepts: The Good, The Bad, and The Ugly
β’ Applying SOLID principles to TypeScript
β’ Can You Get the Information on the QR Code Image Just by Using Javascript?
β’ 7 ES6 JavaScript Tricks to Make You a Better Programmer
React:
β’ A Cure for useState Hell
β’ React, Vite and TypeScript: Get started in under 2 minutes
β’ Data Binding in React
Vue:
β’ Vue skills to master in 2023
β’ Building dynamic Vuetify themes for Vue.js applications
β’ How to Destructure Props in Vue (Composition API)
Angular:
β’ Angular ESLint Rules for Accessible HTML Content
β’ Jest ESM β Total Guide To More Than 100% Faster Testing For Angular β‘
Web-Development:
β’ Understanding Authentication In Websites: A Banking Analogy
β’ Modernizing Frontend Applications: A Guide
β’ Why Not document.write()?
β’ Our top Core Web Vitals recommendations for 2023
CSS:
β’ Faking Min Width on a Table Column
β’ Sibling Scopes in CSS, thanks to :has()
β’ 3D in CSS
β’ Conditional CSS
β’ CSS color functions and custom properties
β’ Getting started with the View Transitions API
β’ Best CSS shape generators with demo
β’ Different ways to truncate text with CSS
JavaScript:
β’ JavaScript Concepts: The Good, The Bad, and The Ugly
β’ Applying SOLID principles to TypeScript
β’ Can You Get the Information on the QR Code Image Just by Using Javascript?
β’ 7 ES6 JavaScript Tricks to Make You a Better Programmer
React:
β’ A Cure for useState Hell
β’ React, Vite and TypeScript: Get started in under 2 minutes
β’ Data Binding in React
Vue:
β’ Vue skills to master in 2023
β’ Building dynamic Vuetify themes for Vue.js applications
β’ How to Destructure Props in Vue (Composition API)
Angular:
β’ Angular ESLint Rules for Accessible HTML Content
β’ Jest ESM β Total Guide To More Than 100% Faster Testing For Angular β‘
π2π₯1
ββFrontend Weekly Digest #12
Web-Development:
β’ 6 Common SVG Fails (and How to Fix Them)
β’ SSSVG β Interactive SVG Reference
CSS:
β’ More Real-World Uses for :has()
β’ CSS Tip: Style your Radio Buttons and Checkboxes for Printing
β’ Solved With :has(): Vertical Spacing in Long-Form Text
β’ Using :is() in complex selectors selects more than you might initially think
β’ Line heights in CSS work better with ratios
β’ How to create a double border in CSS
JavaScript:
β’ JS Promises #3: Garbage collection and memory leaks
β’ How the Document Object Model Works in JavaScript β DOM Tutorial for Beginners
β’ A Beginnerβs Guide to JavaScript async/await, with Examples
β’ Introducing the WebAssembly JavaScript Promise Integration API
React:
β’ How to Have Fun Building React Apps
β’ Understanding Redux-Thunk for React: The Big Picture
β’ Doing pagination with React Query
Vue:
β’ Using vue-clamp to truncate text in Vue apps
β’ Creating Vue.js masked input fields
Angular:
β’ Everything you need to know about route Guard in Angular
Web-Development:
β’ 6 Common SVG Fails (and How to Fix Them)
β’ SSSVG β Interactive SVG Reference
CSS:
β’ More Real-World Uses for :has()
β’ CSS Tip: Style your Radio Buttons and Checkboxes for Printing
β’ Solved With :has(): Vertical Spacing in Long-Form Text
β’ Using :is() in complex selectors selects more than you might initially think
β’ Line heights in CSS work better with ratios
β’ How to create a double border in CSS
JavaScript:
β’ JS Promises #3: Garbage collection and memory leaks
β’ How the Document Object Model Works in JavaScript β DOM Tutorial for Beginners
β’ A Beginnerβs Guide to JavaScript async/await, with Examples
β’ Introducing the WebAssembly JavaScript Promise Integration API
React:
β’ How to Have Fun Building React Apps
β’ Understanding Redux-Thunk for React: The Big Picture
β’ Doing pagination with React Query
Vue:
β’ Using vue-clamp to truncate text in Vue apps
β’ Creating Vue.js masked input fields
Angular:
β’ Everything you need to know about route Guard in Angular
π4
ββFrontend Weekly Digest #13
Web-Development:
β’ AR, VR, and a Model for 3D in HTML
β’ Optimal Images in HTML
CSS:
β’ Greater styling control over type with `initial-letter`
β’ CSS Layers for CSS Resets
β’ Animating CSS Grid (How To + Examples)
β’ CSS Wishlist 2023
β’ Working with CSS variables
β’ Level Up Your CSS Skills With The :has() Selector
JavaScript:
β’ Announcing TypeScript 5.0 Beta
β’ Flow Control in JavaScript: Callbacks, Promises, async/await
β’ Running JavaScript Promises in Parallel
β’ Forever Functional: Waiting for some promises?
β’ JavaScript 101: All About Timers
React:
β’ 4 Custom React Hooks Every Developer Should Know
β’ 5 React Design Patterns You Should Know
β’ React Testing Library: How does it look like writing Unit Tests in 2023?
Vue:
β’ Vue Options API To Composition API Migration Cheat Sheet
β’ Official Vue Certification of Competence Announced
Angular:
β’ Leveraging @angular 15 host directives
β’ Common Pitfalls in Angular Component Testing
β’ Lifecycle Hooks in Angular β A Complete Guide
Web-Development:
β’ AR, VR, and a Model for 3D in HTML
β’ Optimal Images in HTML
CSS:
β’ Greater styling control over type with `initial-letter`
β’ CSS Layers for CSS Resets
β’ Animating CSS Grid (How To + Examples)
β’ CSS Wishlist 2023
β’ Working with CSS variables
β’ Level Up Your CSS Skills With The :has() Selector
JavaScript:
β’ Announcing TypeScript 5.0 Beta
β’ Flow Control in JavaScript: Callbacks, Promises, async/await
β’ Running JavaScript Promises in Parallel
β’ Forever Functional: Waiting for some promises?
β’ JavaScript 101: All About Timers
React:
β’ 4 Custom React Hooks Every Developer Should Know
β’ 5 React Design Patterns You Should Know
β’ React Testing Library: How does it look like writing Unit Tests in 2023?
Vue:
β’ Vue Options API To Composition API Migration Cheat Sheet
β’ Official Vue Certification of Competence Announced
Angular:
β’ Leveraging @angular 15 host directives
β’ Common Pitfalls in Angular Component Testing
β’ Lifecycle Hooks in Angular β A Complete Guide
π3
ββFrontend Weekly Digest #14
Web-Development:
β’ Understanding the GraphQL Type System
CSS:
β’ The Guide To Responsive Design In 2023 and Beyond
β’ Circular text with CSS?
β’ CSS color-mix()
β’ Working with the CSS Grid
β’ Accessible hamburger buttons without JavaScript
β’ Create a full-page background with CSS
β’ A Fancy Hover Effect For Your Avatar
JavaScript:
β’ Exploring the Power of Destructuring in JavaScript
β’ The Ultimate Guide to JavaScript Error Handling
β’ How to Read and Write JSON in JavaScript
β’ Youβve Got Options for Removing Event Listeners
React:
β’ Best Way to Handle Form Validation: React Hook Form and Zod
β’ Server-Side Rendering in React 18
β’ Why Create React App exists
β’ Why React isnβt dying
Vue:
β’ How to implement infinite scroll with Vue
β’ Why Mixins are Considered Harmful
Angular:
β’ Angular Development Simplified with Subjects and Behavior Subjects
β’ 6 Angular Performance Tuning Tips And Tricks
β’ Deep dive into the infamous ExpressionChangedAfterItHasBeenCheckedError in Angular
Web-Development:
β’ Understanding the GraphQL Type System
CSS:
β’ The Guide To Responsive Design In 2023 and Beyond
β’ Circular text with CSS?
β’ CSS color-mix()
β’ Working with the CSS Grid
β’ Accessible hamburger buttons without JavaScript
β’ Create a full-page background with CSS
β’ A Fancy Hover Effect For Your Avatar
JavaScript:
β’ Exploring the Power of Destructuring in JavaScript
β’ The Ultimate Guide to JavaScript Error Handling
β’ How to Read and Write JSON in JavaScript
β’ Youβve Got Options for Removing Event Listeners
React:
β’ Best Way to Handle Form Validation: React Hook Form and Zod
β’ Server-Side Rendering in React 18
β’ Why Create React App exists
β’ Why React isnβt dying
Vue:
β’ How to implement infinite scroll with Vue
β’ Why Mixins are Considered Harmful
Angular:
β’ Angular Development Simplified with Subjects and Behavior Subjects
β’ 6 Angular Performance Tuning Tips And Tricks
β’ Deep dive into the infamous ExpressionChangedAfterItHasBeenCheckedError in Angular
π3