Frontend Development Weekly Digest ๐ŸŽ - Week 41-42

  • ๐Ÿš€ Improving Core Web Vitals with Partial Hydration in Angular 18

    • Angular 18 introduces partial hydration to optimize Core Web Vitals such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), improving performance by deferring non-essential component hydration.
  • โšก Fixing JavaScript Performance Issues

    • This guide explores common JavaScript performance issues, offering tips on reducing bundle sizes and improving hydration to speed up load times and interaction responsiveness.
  • ๐Ÿงช Why We Switched from Cypress to Playwright

    • This article outlines the reasons behind migrating from Cypress to Playwright for end-to-end testing, including faster execution, better browser support, and superior debugging tools.

๐Ÿ†• Releases & Updates

  • ๐Ÿ›  Whatโ€™s New in Chrome DevTools 130

    • Chrome 130 introduces enhanced CSS grid debugging, new performance insights, and expanded Lighthouse integration, offering developers more efficient tools for monitoring and improving performance.
  • ๐Ÿ”ง Deno 2.0 Released

    • The new release of Deno focuses on improving TypeScript support, enhancing performance, and updating dependency management for serverless and web development.
  • ๐Ÿ“ข Whatโ€™s New in Svelte: October 2024

    • Recent updates to Svelte focus on build performance, improved developer tools, and better integration with the Vite ecosystem, enhancing developer experience.
  • ๐Ÿ†• Announcing VoidZero: New Partnership

    • A new partnership and funding round have been announced to support the development of an innovative JavaScript toolchain aimed at improving performance and cloud-based development.

๐Ÿ›  Tools & Resources

  • ๐Ÿ”„ Vue Basics: Pinia State Management

    • Pinia, an alternative to Vuex, offers a simpler state management solution for Vue 3. Though not new, it continues to be a popular choice due to its lightweight API, intuitive design, and seamless TypeScript support.
  • ๐ŸŽจ Feature Detect Style Queries in CSS

    • Style queries allow developers to adjust styles based on the size of containers instead of viewports. This article explains how to detect browser support and implement them for more adaptive layouts.
  • ๐Ÿ”ง ESLint Now Supports JSON and Markdown

    • The latest version of ESLint expands its capabilities, allowing developers to lint JSON and Markdown files to maintain formatting consistency across more file types.
  • ๐Ÿ–ผ SVG Coding Examples: Hand-Crafting Vectors

    • A deep dive into handcrafting SVGs, offering practical coding examples and tips for creating scalable and high-performance vector graphics.
  • ๐Ÿ“ฝ Player: Customizable Video Players

    • This platform allows developers to create customizable video players tailored to their needs, offering flexibility in design and functionality for web-based video experiences.
  • ๐Ÿงฉ How I Structure My Angular Components with Signals

    • A guide on using Angularโ€™s signals API to create reactive components, making state management easier and more predictable.

๐Ÿช Explore More

  • ๐Ÿ“Š Understanding Signals in Angular

    • Signals offer a declarative approach to managing state in Angular, providing better synchronization and reducing complexity in component communication.
  • ๐Ÿ”ข Two-Dimensional Arrays in JavaScript

    • A step-by-step tutorial on creating and manipulating two-dimensional arrays in JavaScript, ideal for handling more complex data sets.
  • ๐Ÿ”„ Using Tailwind CSS to Prevent React Re-Renders

    • Learn how to use Tailwindโ€™s group modifier in React applications to reduce unnecessary re-renders, improving performance.
  • ๐ŸŒ Web Components vs Framework Components

    • A comparison of web components and framework-specific components, highlighting the advantages of using framework-agnostic web components in various contexts.

๐Ÿ’ป CSS for Dummies

rocket

When you realize you left your wallet on Earth:

.rocket {
  width: 10px;
  height: 40px;
  background: silver;
  animation: rewind .5s linear infinite;
}

@keyframes rewind {
  to { transform: translateY(40px) rotate(180deg); }
}

Cited Sources:

  • MDN Web Docs
  • Smashing Magazine
  • Telerik Blog
  • Chrome Developers
  • DEV.to

๐Ÿ’ก Stay updated with the latest in frontend development. Follow the links for more insights.

โœจ Explore More:

--eof--