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
Frontend Weekly Digest #15
Web-Development:
• Important SEO-related HTML Tags, and How to Optimize them
• How to Favicon in 2023: Six files that fit most needs
• Building a website gallery with ChatGPT, Stable Diffusion, React and NodeJS
CSS:
• High Definition CSS Color Guide
• CSS Wish List 2023
• Different Ways to Get CSS Gradient Shadows
• My favourite 3 lines of CSS
JavaScript:
• Top JavaScript (JS) Trends You Should Follow in 2023
• Handling Errors with the Fetch API
• Speeding up the JavaScript ecosystem — eslint
React:
• The evolution of a React application
• Charting and Graphing in React with Recharts
• A Guide to React’s useEffect Hook
• React.js: The Documentary
Vue:
• Getting started with Inertia.js, Vue.js, and AdonisJs
• Using the v-switch Vuetify component
• A guide to Vuex ORM
• Testing Vue Components the Right Way
Angular:
• Boost Your Angular Application Development with Best Practices
• 10 RxJS operators which I use daily as an Angular developer
Web-Development:
• Important SEO-related HTML Tags, and How to Optimize them
• How to Favicon in 2023: Six files that fit most needs
• Building a website gallery with ChatGPT, Stable Diffusion, React and NodeJS
CSS:
• High Definition CSS Color Guide
• CSS Wish List 2023
• Different Ways to Get CSS Gradient Shadows
• My favourite 3 lines of CSS
JavaScript:
• Top JavaScript (JS) Trends You Should Follow in 2023
• Handling Errors with the Fetch API
• Speeding up the JavaScript ecosystem — eslint
React:
• The evolution of a React application
• Charting and Graphing in React with Recharts
• A Guide to React’s useEffect Hook
• React.js: The Documentary
Vue:
• Getting started with Inertia.js, Vue.js, and AdonisJs
• Using the v-switch Vuetify component
• A guide to Vuex ORM
• Testing Vue Components the Right Way
Angular:
• Boost Your Angular Application Development with Best Practices
• 10 RxJS operators which I use daily as an Angular developer
👍3
Frontend Weekly Digest #16
Web-Development:
• ChatGPT for Web Developers
• A Step-By-Step Guide To Building Accessible Carousels
• Integrating the Cache API with Service Workers
• Hello Web Components
CSS:
• Improved font fallbacks
• Resizing with CSS
• More control over :nth-child() selections with the of S syntax
• When and how to use CSS will-change
JavaScript:
• Must-Know JavaScript Array Methods
• JS Class fields potentially harmful
• JavaScript 101 — All about Async Behavior
• Callback Functions in JavaScript: A Comprehensive Guide
• Writing Javascript without a build system
React:
• React’s Virtual DOM: Decoded for Beginners
• State Management in React with Hookstate
• How to create a video and audio recorder in React
Vue:
• Reactivity with the Vue 3 Composition API: ref() and reactive()
• Why I’m sticking with Vue in 2023
Angular:
• Stop being scared of InjectionTokens
• Angular tricks to become a pro
• Mythical Angular — Angular Myth: Component styles
Svelte:
• Form Validation in Svelte
• Exploring different approaches to styling Svelte applications
Web-Development:
• ChatGPT for Web Developers
• A Step-By-Step Guide To Building Accessible Carousels
• Integrating the Cache API with Service Workers
• Hello Web Components
CSS:
• Improved font fallbacks
• Resizing with CSS
• More control over :nth-child() selections with the of S syntax
• When and how to use CSS will-change
JavaScript:
• Must-Know JavaScript Array Methods
• JS Class fields potentially harmful
• JavaScript 101 — All about Async Behavior
• Callback Functions in JavaScript: A Comprehensive Guide
• Writing Javascript without a build system
React:
• React’s Virtual DOM: Decoded for Beginners
• State Management in React with Hookstate
• How to create a video and audio recorder in React
Vue:
• Reactivity with the Vue 3 Composition API: ref() and reactive()
• Why I’m sticking with Vue in 2023
Angular:
• Stop being scared of InjectionTokens
• Angular tricks to become a pro
• Mythical Angular — Angular Myth: Component styles
Svelte:
• Form Validation in Svelte
• Exploring different approaches to styling Svelte applications
👍1🙏1