manuelhe

The latest CSS developments have brought forth exciting enhancements that empower web developers to create more expressive and flexible designs. Let's delve into some of the most impactful features:

1. Container Queries:

   • These recently became stable across all modern browsers.
   • With container queries, you can query a parent element's size and style to determine the styles that should be applied to any of its children.
   • Unlike media queries, which work based on the viewport, container queries allow precise styling adjustments for individual components within layouts.
   • For instance, in an email inbox layout, the Primary Inbox and Favorites sidebar adjust their grid layout and display email timestamps based on available space¹.

2. Style Queries:

• Partially implemented in Chrome 111, style queries enable you to query the style values of a parent container using CSS custom properties.

manuelhe

Web Dev Tools and Ideas

TypeScript

• string-ts: Strongly typed string functions.
• ts-pattern: The exhaustive Pattern Matching library for TypeScript, with smart type inference.
• pattycake: Pattycake is an optimizing compiler for ts-pattern that lets you have your cake (expressive pattern matching), and eat it too (zero runtime overhead).

CSS / HTML

• tufte-css: Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents.

manuelhe

Learning concepts of Javascript

Index

1. The Prototype Paradigm
2. The Event Loop
3. What is a callback?
4. The Scope
5. What is a closure?
6. Hoisting

manuelhe

function downloadFile(content: BlobPart, mimeType: string, filename: string) {
  const a = document.createElement('a'); // Create "a" element
  const blob = new Blob([content], { type: mimeType }); // Create a blob (file-like object)
  const url = URL.createObjectURL(blob); // Create an object URL from blob
  a.setAttribute('href', url); // Set "a" element link
  a.setAttribute('download', filename); // Set download filename
  a.click(); // Start downloading
}

manuelhe

const words = [
  [
    'bird',
    'clock',
    'boy',
    'plastic',
    'duck',
    'teacher',
    'old lady',
    'professor',

manuelhe

Web performance links

General Info

• Web Vitals
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)

manuelhe

Micro-Frontends

Sources

• How to Scale Frontend with Micro Frontends Architecture
• Lessons from DAZN: Scaling Your Project with Micro-Frontends
• Micro Frontend Architecture: The Newest Approach To Building Scalable Frontend
• Micro-Frontends Course - Beginner to Expert 📺
• 8 Consejos para el uso de Micro frontend (feat. Ruben Casas) 📺
• TechTallk: ¿Qué son los Micro Frontends? 📺

manuelhe

Ideas, tools and technical documents

Good practices

• .nvmrc or package.json engines: How to Lock down Your Project’s Node Version Using .nvmrc or engines
• Nock can be used to test modules that perform HTTP requests in isolation.
• Project Guidelines: a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects.

Feature Flags

manuelhe

// Numeric base transformations in JavaScript

manuelhe

// Based on source: https://twitter.com/_developit/status/1369397356098097154/photo/1

// links listener
addEventListener('click', e => {
  let a = e.target;
  // Loop avoids having to jump to `http://event.target.parentNode` 
  // when the target is a Text or other non-Element node.
  // It's also a bit faster than closest() and supports IE11.
  while (a.localName !== 'a' && (a = a.parentNode));
  if (a && a.origin == location.origin && !a.target) {