News and events from the World of Frontend and around it. Tools and useful materials on everything that may be of interest to a frontend developer as well.
For all questions you can write @Typical_Front_End
Post #664
115
- 😁 6
- ❤ 1
Channel Public Channel
TY Typical Frontend
@typicalfrontend
- Subscribers
- 136
- Photos
- 48
- Videos
- 0
- Links
- 625
Showing posts older than #665 · Back to latest
Older Posts 20 shown
Post #663
126
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
Post #662
113
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
Post #661
103
- 😁 6
Post #660
128
- 😁 6
Post #659
119
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
Post #658
103
- 😁 3
Post #657
135
- 😁 4
- 👍 1
Post #656
122
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
Post #655
113
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
Post #654
103
Post #653
105
- 😁 5
Post #652
103
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
Post #651
114
- 😁 3
- 👍 1
- 👎 1
Post #650
111
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
Post #649
124
- 👍 7
Post #648
106
- 😁 5
Post #647
115
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
Post #646
131
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
Post #645
129
- 😁 2
- 🔥 1