Hello everyone! I hope you are doing well and productive.
Colleagues and friends, what do you think - which format for presenting information will be more convenient -
daily news [ 1️⃣ ] or weekly Digest [ 2️⃣ ]?
Colleagues and friends, what do you think - which format for presenting information will be more convenient -
daily news [ 1️⃣ ] or weekly Digest [ 2️⃣ ]?
Frontend Weekly Digest #1
Web-Development:
• What Are Micro-Frontend Web Applications?
• Using web dev skills to test web dev skills
CSS:
• The New CSS Media Query Range Syntax
• Faking Min Width on a Table Column
• Best CSS shape generators with demo
• CSS Pseudo Elements: A Definite Guide
• Scroll to Text Fragments
JavaScript:
• The State of JS 2022
• Using Knack to Generate QR Codes with JavaScript
• 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:
• Next.js vs React: Their Differences, and Which One to Choose
• Implementing 3D graphics in React
• 5 Tips to Optimize React Frontend Performance
Vue:
• Testing a big Vue application
• pinceau — A CSS-in-TS framework built to feel like a native Vue feature.
• Customized drag-and-drop file uploading with Vue
• An article comparing the design implementation of Vuex and Pinia
Angular:
• Angular 15: Using The Directive Composition API
• Angular VS React: Performance comparison with Google Web Vitals
• Exploring Web Workers in Angular
Web-Development:
• What Are Micro-Frontend Web Applications?
• Using web dev skills to test web dev skills
CSS:
• The New CSS Media Query Range Syntax
• Faking Min Width on a Table Column
• Best CSS shape generators with demo
• CSS Pseudo Elements: A Definite Guide
• Scroll to Text Fragments
JavaScript:
• The State of JS 2022
• Using Knack to Generate QR Codes with JavaScript
• 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:
• Next.js vs React: Their Differences, and Which One to Choose
• Implementing 3D graphics in React
• 5 Tips to Optimize React Frontend Performance
Vue:
• Testing a big Vue application
• pinceau — A CSS-in-TS framework built to feel like a native Vue feature.
• Customized drag-and-drop file uploading with Vue
• An article comparing the design implementation of Vuex and Pinia
Angular:
• Angular 15: Using The Directive Composition API
• Angular VS React: Performance comparison with Google Web Vitals
• Exploring Web Workers in Angular
👍3
Frontend Weekly Digest #2
Web-Development:
• Let’s Talk HTML <meta> And <link>
• The Difference Between Web Sockets, Web Workers, and Service Workers
CSS:
• 3D in CSS
• Conditional CSS
• CSS color functions and custom properties
• How to make wave backgrounds in CSS
JavaScript:
• It’s time for a new Date API in JavaScript
• How to use Web Workers API
• Applying SOLID principles to TypeScript
• JavaScript Concepts: The Good, The Bad, and The Ugly
React:
• A Cure for useState Hell
• React, Vite and TypeScript: Get started in under 2 minutes
• Data Binding in React
Vue:
• Testing a big Vue application
• pinceau — A CSS-in-TS framework built to feel like a native Vue feature.
• Customized drag-and-drop file uploading with Vue
• An article comparing the design implementation of Vuex and Pinia
Angular:
• Angular 15: Using The Directive Composition API
• Angular VS React: Performance comparison with Google Web Vitals
• Exploring Web Workers in Angular
Web-Development:
• Let’s Talk HTML <meta> And <link>
• The Difference Between Web Sockets, Web Workers, and Service Workers
CSS:
• 3D in CSS
• Conditional CSS
• CSS color functions and custom properties
• How to make wave backgrounds in CSS
JavaScript:
• It’s time for a new Date API in JavaScript
• How to use Web Workers API
• Applying SOLID principles to TypeScript
• JavaScript Concepts: The Good, The Bad, and The Ugly
React:
• A Cure for useState Hell
• React, Vite and TypeScript: Get started in under 2 minutes
• Data Binding in React
Vue:
• Testing a big Vue application
• pinceau — A CSS-in-TS framework built to feel like a native Vue feature.
• Customized drag-and-drop file uploading with Vue
• An article comparing the design implementation of Vuex and Pinia
Angular:
• Angular 15: Using The Directive Composition API
• Angular VS React: Performance comparison with Google Web Vitals
• Exploring Web Workers in Angular
👍3
Frontend Weekly Digest #3
Web-Development:
• Dialogs, modality and popovers seem similar. How are they different?
• Gatsby is joining Netlify
CSS:
• The Guide To Responsive Design In 2023 and Beyond
• Responsive HTML/CSS Image Gallery Using “Columns”, No Extra Markup Needed!
• Back to Pure CSS?
• What CSS Do You Absolutely Have to Know in 2022? / 2023 =)
• Why you should never use px to set font-size in CSS
• Create parallax scrolling with CSS
• CSS color-mix()
JavaScript:
• Exploring the Power of Destructuring in JavaScript
• All about JavaScript Events
• Temporal API: JavaScript Dates, but Better
• 20 JavaScript Array Methods Every Developer Should Know
React:
• React useMemo hook guide with examples
• React memo guide with examples
• Memoization in React — How useCallback Works
• Best Way to Handle Form Validation: React Hook Form and Zod
• Iniz: Makes ReactJS actually reactive
• Recursive components in React: A real-world example
Vue:
• Making API calls in Vue with Axios
• Building a plugin with Vite
• Introducing the New Angular Image Editor Component
Angular:
• Angular Development Simplified with Subjects and Behavior Subjects
• Top 10 interview questions and answers for angular that every developer must prepare before their interview in 2023
Web-Development:
• Dialogs, modality and popovers seem similar. How are they different?
• Gatsby is joining Netlify
CSS:
• The Guide To Responsive Design In 2023 and Beyond
• Responsive HTML/CSS Image Gallery Using “Columns”, No Extra Markup Needed!
• Back to Pure CSS?
• What CSS Do You Absolutely Have to Know in 2022? / 2023 =)
• Why you should never use px to set font-size in CSS
• Create parallax scrolling with CSS
• CSS color-mix()
JavaScript:
• Exploring the Power of Destructuring in JavaScript
• All about JavaScript Events
• Temporal API: JavaScript Dates, but Better
• 20 JavaScript Array Methods Every Developer Should Know
React:
• React useMemo hook guide with examples
• React memo guide with examples
• Memoization in React — How useCallback Works
• Best Way to Handle Form Validation: React Hook Form and Zod
• Iniz: Makes ReactJS actually reactive
• Recursive components in React: A real-world example
Vue:
• Making API calls in Vue with Axios
• Building a plugin with Vite
• Introducing the New Angular Image Editor Component
Angular:
• Angular Development Simplified with Subjects and Behavior Subjects
• Top 10 interview questions and answers for angular that every developer must prepare before their interview in 2023
👍1😁1
Frontend Weekly Digest #4
Web-Development:
• Understanding the GraphQL Type System
• Creating an interactive SVG: The circle of fifths
CSS:
• Circular text with CSS?
• 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:
• The Ultimate Guide to JavaScript Error Handling
• How to Read and Write JSON in JavaScript
• You’ve Got Options for Removing Event Listeners
React:
• Server-Side Rendering in React 18
• A Guide to Testing React Components
• Why Create React App exists
• Write better React code without conditional rendering operators
• How to Use Web Components with React
Vue:
• How to implement infinite scroll with Vue
• Why Mixins are Considered Harmful
Angular:
• Bad practices you should avoid using Angular
• 6 Angular Performance Tuning Tips And Tricks
Web-Development:
• Understanding the GraphQL Type System
• Creating an interactive SVG: The circle of fifths
CSS:
• Circular text with CSS?
• 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:
• The Ultimate Guide to JavaScript Error Handling
• How to Read and Write JSON in JavaScript
• You’ve Got Options for Removing Event Listeners
React:
• Server-Side Rendering in React 18
• A Guide to Testing React Components
• Why Create React App exists
• Write better React code without conditional rendering operators
• How to Use Web Components with React
Vue:
• How to implement infinite scroll with Vue
• Why Mixins are Considered Harmful
Angular:
• Bad practices you should avoid using Angular
• 6 Angular Performance Tuning Tips And Tricks
👍2
Frontend Weekly Digest #5
Web-Development:
• A Guide To Image Optimization On Jamstack Sites
• Form Validation with HTML
• Experimenting A New Syntax To Write SVG
• Five Data-Loading Patterns To Boost Web Performance
CSS:
• Style a parent element based on its number of children using CSS :has()
• An Interesting Limitation of CSS Custom Properties
• Experimenting with layering, filtering, and masking in CSS
• CSS vs. CSS-in-JS: How and why to use each
• How to add dynamic colors with CSS
• The 6 best CSS background generators
JavaScript:
• 20 Simple-But-Useful JavaScript Coding Techniques That You Should Use
• Left pad in JavaScript at 2022
• Useful JavaScript Math Functions and How to Use Them
React:
• How to Create a Path-Finding Algorithm Visualizer with React
• Understanding React’s useRef() hook
• Using Material UI with React
• Create a custom debounce Hook in React
Vue
• Vue component libraries
• The Modern Guide to Vue Components
Angular:
• Angular v15 Launch Event 🎉 | Live with the Angular Team
• What’s New in Angular 15
• Using Different Layout Frames For Different Routes In Angular
Web-Development:
• A Guide To Image Optimization On Jamstack Sites
• Form Validation with HTML
• Experimenting A New Syntax To Write SVG
• Five Data-Loading Patterns To Boost Web Performance
CSS:
• Style a parent element based on its number of children using CSS :has()
• An Interesting Limitation of CSS Custom Properties
• Experimenting with layering, filtering, and masking in CSS
• CSS vs. CSS-in-JS: How and why to use each
• How to add dynamic colors with CSS
• The 6 best CSS background generators
JavaScript:
• 20 Simple-But-Useful JavaScript Coding Techniques That You Should Use
• Left pad in JavaScript at 2022
• Useful JavaScript Math Functions and How to Use Them
React:
• How to Create a Path-Finding Algorithm Visualizer with React
• Understanding React’s useRef() hook
• Using Material UI with React
• Create a custom debounce Hook in React
Vue
• Vue component libraries
• The Modern Guide to Vue Components
Angular:
• Angular v15 Launch Event 🎉 | Live with the Angular Team
• What’s New in Angular 15
• Using Different Layout Frames For Different Routes In Angular
👍3
Frontend Weekly Digest #6
Web-Development:
• All about the JSON format
• Best APIs for Developers
CSS:
• Color Formats in CSS
• CSS vs CSS-in-JS Performance
• An Interactive Guide to Flexbox
• Experimenting with layering, filtering, and masking in CSS
• What should a modern CSS boilerplate look like?
JavaScript:
• Developing Faster JavaScript Apps: the Ultimate Guide to Web Workers
• Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide
• Inheritance in JavaScript object-oriented programming
• Drag-and-drop events in JavaScript
• 5 Ways to Make Your JavaScript More Functional
React:
• Top alternatives to Create-React-App
• Internationalizing and Localizing a React App: i18n Made Easy
• Animate React components with a single line using AutoAnimate
• Cleanup Functions in React’s UseEffect Hook — Explained with examples
Vue
• Optimizing A Vue App
• Comparing Redux vs. Vuex
Angular:
• Angular 15 Study Guide
• Angular Unit Tests: Common Pain Points
• The Most Important Thing You Need To Understand About Angular
Web-Development:
• All about the JSON format
• Best APIs for Developers
CSS:
• Color Formats in CSS
• CSS vs CSS-in-JS Performance
• An Interactive Guide to Flexbox
• Experimenting with layering, filtering, and masking in CSS
• What should a modern CSS boilerplate look like?
JavaScript:
• Developing Faster JavaScript Apps: the Ultimate Guide to Web Workers
• Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide
• Inheritance in JavaScript object-oriented programming
• Drag-and-drop events in JavaScript
• 5 Ways to Make Your JavaScript More Functional
React:
• Top alternatives to Create-React-App
• Internationalizing and Localizing a React App: i18n Made Easy
• Animate React components with a single line using AutoAnimate
• Cleanup Functions in React’s UseEffect Hook — Explained with examples
Vue
• Optimizing A Vue App
• Comparing Redux vs. Vuex
Angular:
• Angular 15 Study Guide
• Angular Unit Tests: Common Pain Points
• The Most Important Thing You Need To Understand About Angular
👍3
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