4 min read

📢 News & Trends

  • (🚀) 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

💻 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

That's it for this week's frontend digest! What are you most excited about? Happy coding! 🚀

Explore More