React Server Components, Next.js App Router and examples
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
Modern Touch-Friendly Design
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
Profiling React.js Performance
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
Native image lazy-loading for the web!
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
JavaScript Loading Priorities in Chrome
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.
Start Performance Budgeting
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
Faster JavaScript Memoization For Improved Application Performance
Faster JavaScript Memoization For Improved Application Performance September 19, 2011 Whilst not new by any means, memoization is a useful optimization technique for caching the results of function calls such that lengthy lookups or expensive recursive computations can be minimized where possible. The basic idea is that if you can detect an operation has already been previously completed for a spe
Offline installation of npm packages
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
Explorations In Automatically Fixing JavaScript Linting-errors
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
Detect, Undo And Redo DOM Changes With Mutation Observers
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
Environment-specific Builds With Grunt, Gulp or Broccoli
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
Yeoman Update: announcing 1.0 beta 4, Windows support, Refreshed Angular, Backbone, Ember generators and more.
Yeoman Update: announcing 1.0 beta 4, Windows support, Refreshed Angular, Backbone, Ember generators and more. April 9, 2013 Today we're happy to announce the release of Yeoman 1.0 beta 4. A number of large updates have been made to the project since beta 3, covering scaffolding, performance improvements and overall stability. The community around the project has also been growing, tackling ideas
Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools
Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools April 11, 2013 “The Unicorn has a special ability to help it's master when in trouble. When tamed, they will not attack humans or tamed creatures, but will attack anything else with negative karma" The DevTools Heap Profiler and Timeline Memory view can be used to diagnose memory leaks on both desktop and mobile (via remote
DevTools Extensions For Web App Developers
March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W
DevTools: Visually Re-engineering CSS For Faster Paint Times
February 7, 2013 Increasingly, whether it’s on desktop or mobile, users want their web experience to be snappy and delightful. This means that even if the browser is busy rendering the page or loading in content, the user should still be able to scroll around and interact with it. Animations need to be silky, scrolling must be buttery-smooth and your page needs to contain little to no jank. This c
A Few New Things Coming To JavaScript
November 22, 2012 I believe the day-to-day practice of writing JavaScript is going to change dramatically for the better when ECMAScript.next arrives. The coming year is going to be an exciting time for developers as features proposed or finalised for the next versions of the language start to become more widely available. In this post, I will review some of the features I'm personally looking for
ECMAScript 6 Resources For The Curious JavaScripter
May 30, 2012 I’ve recently spent a lot of time looking at EcmaScript 6 and thought it would be useful to put together a short page of resources to help anyone else interested in exploring the next version of JavaScript further. What ES6 features do browsers support right now? Juriy Zaytsev’s ES6 compatibility table is a useful start for establishing what ECMAScript 6 features your browser does and
JavaScript Style Guides And Beautifiers
May 3, 2012 Today we're going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement. What exactly is a style guide? Before we begin, let us remind ourselves exactly what a code style guide is: A style guide or style manual is a set of standards for the writing and design of co
Unit Testing Backbone.js Apps With QUnit And SinonJS
February 28, 2012 This article will be appearing in my forthcoming book on Backbone.js and continues the section on unit testing. We previously looked at Jasmine and will now look at QUnit and SinonJS. QUnit is a powerful JavaScript test suite written by jQuery team member Jörn Zaefferer and used by many large open-source projects (such as jQuery and Backbone.js) to test their code. It’s both capa
Scaling Your JavaScript Applications (Videos)
Summary Developers creating JavaScript applications these days usually use a combination of patterns like MVC/MV*, modules, widgets and plugins for their architecture.Whilst this works great for apps that are built at a smaller-scale, what happens when your project starts to grow? In this talk, I present an effective set of design patterns for small, medium and large-scale JavaScript applications.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
