Frontend Development Weekly Digest 🎍 - Week 41-42

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

💡 Stay updated with the latest in frontend development. Follow the links for more insights.

✨ Explore More:

--eof--