サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
addyosmani.com
July 16, 2023 "Stick to boring architecture for as long as possible, and spend the majority of your time, and resources, building something your customers are willing to pay for." - Kelsey Hightower When we're starting new projects, there's an undeniable allure to the latest languages, frameworks, and libraries. As engineers, we are, by nature, attracted to novel solutions. However, it’s critical
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
If you are not redirected automatically, follow this link.
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.
January 9, 2019 Users appreciate pages being usable and interactive soon after they're visually ready. UI interactions (scrolls, taps, clicks) can be delayed by script and other browser work so minimizing their impact can really help your users. There isn't a single metric that fully captures the "loading experience" of a web page. Loading a page is a progressive journey with four key moments to i
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
January 2, 2016 Occasionally, you may need to install npm packages while offline. This could be due to a flaky network connection, being on a flight or during a workshop. Getting this working has been a dream for a while. They say you should follow your dreams. Unless it's been a while and they haven't followed you back, in which case unfollow them and move on. Luckily, there are a few options ava
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
A11y Command-line ToolsWeb accessibility audits powered by the Chrome Accessibility Developer Tools.TweetWhy?Accessible web sites need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, sites should be usable by the broadest group of users, including those with disabilities. When designing for accessibility, there are four key areas of disability to c
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
Title Components Should Be Focused, Independent, Reusable, Small And Testable (FIRST)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’
Addy Osmani Senior Developer Relations Engineer, google.com/+AddyOsmani @addyosmani addyosmani.com "Learning JavaScript Design Patterns" "Developing Backbone.js Applications" Today's agenda
March 31, 2014 The way that languages in the web platform evolve are in direct response to the pain caused by complexity. Pain is generally a bad thing and so it's with better patterns and platform primitives that we can ease some of this complexity in the browser. Complexity on its own can take lots of forms, but when we look at the landscape of how developers have been building for the web over
Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch March 27, 2014 [caption id="attachment_6609" align="aligncenter" width="640"] The tough economic times on Tatooine hit everyone hard, including the Jawas.[/caption] Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold conten
Environment-specific Builds With Grunt, Gulp or Broccoli March 3, 2014 [caption id="attachment_6536" align="aligncenter" width="640"] Image credit: http://www.flickr.com/photos/brianneudorff/9109932159/[/caption] The dev, staging and production versions of our projects can vastly vary, which is one reason we may need to change paths to resources (scripts/styles/templates), generated markup or othe
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
次のページ
このページを最初にブックマークしてみませんか?
『AddyOsmani.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く