はてなブックマーク

React Server Components, Next.js App Router and examples May 6, 2023 There were recently a number of discussions in the React community around the state of Server Components, the Next.js App Router and the future of tooling and rendering approaches. Here's my attempt at a brief summary of concepts and discussions for folks that want highlights. I also wanted to share (lower down) more "complete" A

Tip - Use fetchpriority=high to load your LCP hero image sooner August 14, 2022 Tip: Add fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner. Priority Hints sped up Etsy’s LCP by 4% with some sites seeing an improvement of up to 20-30% in their lab tests. In many cases, fetchpriority should lead to a nice boost for LCP. Code snippets Priority Hints let you ad

In "Software Engineering - The Soft Parts" Addy Osmani shares lessons from his first 10 years at Google on the "soft skills" that can help engineers become effective and scale their effectiveness. This guidance should help junior, mid-career and even senior developers move forward, deal with changing technology, and navigate building non-trivial systems. Today I'll share some of the software engin

November 1, 2020 It's historically been difficult for web developers to understand how the JavaScript in their apps performs in a wide range of cirumstances on real user devices. They've had to instrument code with poorly performing profiling hooks that could slow down page execution, without having the ability to collect stack samples efficiently. This is where the proposed native JavaScript self

September 17, 2020 VSCode Debug Visualizer is a VSCode extension that allows you to visualize data structures in your editor. This can be useful for visualizing watched values during debugging. I've found the extension can be helpful to visualize plots, tables, arrays, histograms and trees. Once the extension is installed, open some relevant scripts then navigate to the command palette and go to D

🕹 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This guide has recipes for automating Web Performance measurement with Puppeteer. An accompanying GitHub repository for this write-up is also available. Get a DevTools performance trace for a page load Puppeteer API: tracing.start() const puppeteer = require('puppeteer'

May 21, 2020 I recently spoke to veteran UX designer Steven Hoober about designing for touch interfaces. Hoober's "Design for Fingers, Touch, and People" encourages UI designers to: Place primary content and actions at the center of the screen Place secondary actions and tabs along the edges Place tertiary functions behind menus Research how users perform specific interactions. Grip, task, context

April 8, 2020 Today, we'll look at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental Interaction Tracing API and measuring custom metrics using the User Timing API. For demonstration purposes, we'll be using a Movie queueing app. The React Profiler API The React Profiler API measures renders and the cost of rendering to h

April 6, 2019 In this post, we'll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here's a sneak preview of it in action: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feat

February 18, 2019 How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful. Thanks to Kouhei Ueno, we now have an up to date summary of script scheduling in Chrome.

October 2, 2018 If you're building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, "what is really important to my users?" When we talk to Fortune 500 companies that put in the work to improve performance, perf metrics will oft

December 23, 2015 There's been much welcome discussion about Progressive Web Apps lately. They're still a relatively new model, but their principles can equally enhance apps built with vanilla JS, React, Polymer, Angular or any other framework. In this post, I'll summarise some options and reference apps for getting started with your own PWApp today. What is a Progressive Web App? A Progressive We

Explorations In Automatically Fixing JavaScript Linting-errors September 30, 2014 Linting is a common step in our JavaScript iteration workflow. Most developers probably use JSHint (or ESLint) for this purpose. However, when a tool is capable of informing you of linting issues, the next logical question is..why can't it fix these issues for us? Is this taking automation too far, or a logical compl

September 27, 2014 These are the slides from my CSS performance tooling talk, presented at CSSConf.eu earlier this month. High-performance sites need to feel instant and deliver the goods in < 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering duplicate selectors, col

July 8, 2014 Today we'll look at how to wrap React components using Custom Elements, allowing us to interop with Web Component-based libraries using the DOM as a simple configuration API. Similar to libraries like Polymer, React cares about composition, lifecycle events and modularity so seeing how well it fits with Web Components is an interesting thought experiment. As React doesn't need to take

July 3, 2014 If you travel, you've probably found yourself stuck with zero network connectivity on more than one occasion. This sucks, especially if you just want to look up a few previously viewed pages to get some work done. Who are we kidding?...you want to look at kittens shooting lasers out of their eyeballs. Unfortunately, in Chrome attempting to request something from the network while offl

Components Should Be Focused, Independent, Reusable, Small & Testable (FIRST) Tweet Whether it’s a client or server-side component, a Node module or a piece of visual UI, components that are large are inherently more complex to maintain than those than are small. In fact, the secret to efficiently building ‘large’ things is generally to avoid building them in the first place. Instead, compose your

Detect, Undo And Redo DOM Changes With Mutation Observers June 4, 2014 I’ve been wondering why DOM Mutation Observers, which can monitor changes to one or more DOM elements and return a report of what changed, aren’t used more often in the wild. Mutation Observers have long-replaced DOM Mutation Events (which were deemed slow, verbose and crashy), are fairly well documented and a polyfill for IE9

December 12, 2013 Introduction A trend proliferating amongst prototypers in the Angular community is full-stack JavaScript development via the MEAN stack. The acronym stands for: (M)ongoDB - a noSQL document datastore which uses JSON-style documents to represent data, (E)xpress - a HTTP server framework on top of Node, (A)ngular - as you know, the JS framework offering declarative, two-way databin