はてなブックマーク  


トップへ戻る
  






総合  




●人気
●新着
  

● IT

● 最新ガジェット  

● 自然科学  

● 経済・金融  

● おもしろ  

● マンガ  

● ゲーム  

● はてなブログ︵総合︶  






一般  




●人気
●新着
  

● 社会ニュース  

● 地域  

● 国際  

● 天気  

● グルメ  

● 映画・音楽  

● スポーツ  

● はてな匿名ダイアリー  






世の中  




●人気
●新着
  

● 新型コロナウイルス  

● 働き方  

● 生き方  

● 地域  

● 医療・ヘルス  

● 教育  

● はてな匿名ダイアリー  






政治と経済  




●人気
●新着
  

● 政治  

● 経済・金融  

● 企業  

● 仕事・就職  

● マーケット  

● 国際  

● はてなブログ︵政治と経済︶  






暮らし  




●人気
●新着
  

● カルチャー・ライフスタイル  

● ファッション  

● 運動・エクササイズ  

● 結婚・子育て  

● 住まい  

● グルメ  

● お金  

● はてなブログ︵暮らし︶  

● 掃除・整理整頓  

● 雑貨  

● 買ってよかったもの  

● 旅行  

● アウトドア  

● 趣味  






学び  




●人気
●新着
  

● 人文科学  

● 社会科学  

● 自然科学  

● 語学  

● ビジネス・経営学  

● デザイン  

● 法律  

● 本・書評  

● 将棋・囲碁  

● はてなブログ︵学び︶  






テクノロジー  




●人気
●新着
  

● IT

● セキュリティ技術  

● はてなブログ︵テクノロジー︶  

● AI・機械学習  

● プログラミング  

● エンジニア  






おもしろ  




●人気
●新着
  

● まとめ  

● ネタ  

● おもしろ  

● これはすごい  

● かわいい  

● 雑学  

● 癒やし  






エンタメ  




●人気
●新着
  

● スポーツ  

● 映画  

● 音楽  

● アイドル  

● 芸能  

● お笑い  

● サッカー  

● 話題の動画  






アニメとゲーム  




●人気
●新着
  

● マンガ  

● Webマンガ  

● ゲーム  

● 任天堂  

● PlayStation  

● アニメ  

● バーチャルYouTuber  

● オタクカルチャー  





● おすすめ  
買ってよかったもの
  


﹃Blog - JakeArchibald.com﹄



● 人気  
● 新着  
● すべて  











HTML attributes vs DOM properties  

37users  
jakearchibald.com  


Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol


● テクノロジー  
●2024/04/25 22:44
  

●
●
●
●
●
  
















View transitions: Handling aspect ratio changes  

4users  
jakearchibald.com  


This post assumes some knowledge of view transitions. If you're looking for a from-scratch intro to the feature, see this article. When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it: Unintentional aspect ratio changes It's pretty common for these aspect ratio changes to be unintent


● テクノロジー  
●2024/02/22 10:54
  

●
●
●
  










The case against self-closing tags in HTML  

15users  
jakearchibald.com  


Let's talk about />: <input type="text" /> <br /> <img src="…" />You'll see this syntax on my blog because it's what Prettier does, and I really like Prettier. However, I don't think /> is a good thing. First up: The facts Enter XHTML Back in the late 90s and early 2000s, the W3C had a real thing for XML, and thought that it should replace HTML syntax. There were good reasons for this. At the time


● テクノロジー  
●2023/07/06 23:50
  

●
●
●
  










Avoiding <img> layout shifts: aspect-ratio vs width & height attributes  

24users  
jakearchibald.com  


By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi


● テクノロジー  
●2022/07/11 23:02
  

●
●
●
●
●
●
  










How to win at CORS  

7users  
jakearchibald.com  


CORS (Cross-Origin Resource Sharing) is hard. It's hard because it's part of how browsers fetch stuff, and that's a set of behaviours that started with the very first web browser over thirty years ago. Since then, it's been a constant source of development; adding features, improving defaults, and papering over past mistakes without breaking too much of the web. Anyway, I figured I'd write down pr


● テクノロジー  
●2021/10/12 21:26
  

●
●
  










`export default thing` is different to `export { thing as default }`  

15users  
jakearchibald.com  


`export default thing` is different to `export { thing as default }` Dominic Elm DM'd me on Twitter to ask me questions about circular dependencies, and, well, I didn't know the answer. After some testing, discussion, and *ahem* chatting to the V8 team, we figured it out, but I learned something new about JavaScript along the way. I'm going to leave the circular dependency stuff to the end of the


● テクノロジー  
●2021/07/04 16:45
  

●
●
  










Encoding data for POST requests

13users  
jakearchibald.com  


Right now, when you go to copilot.github.com you're greeted with this example: async function isPositive(text) { const response = await fetch(`http://text-processing.com/api/sentiment/`, { method: 'POST', body: `text=${text}`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }); const json = await response.json(); return json.label === 'pos'; } This is bad and might result in sec


● テクノロジー  
●2021/07/01 21:42
  

●
●
●
●
●
  










Don't use functions as callbacks unless they're designed for it  

7users  
jakearchibald.com  


// Convert some numbers into human-readable strings: import { toReadableNumber } from 'some-library'; const readableNumbers = someNumbers.map(toReadableNumber);


● テクノロジー  
●2021/01/30 09:20
  

●
  










AVIF has landed  

29users  
jakearchibald.com  


Back in ancient July I released a video that dug into how lossy and lossless image compression works and how to apply that knowledge to compress a set of different images for the web. Well, that's already out of date because AVIF has arrived. Brilliant. AVIF is a new image format derived from the keyframes of AV1 video. It's a royalty-free format, and it's already supported in Chrome 85 on desktop


● テクノロジー  
●2020/09/08 21:16
  

●
●
●
●
●
  










Different versions of your site can be running at the same time  

11users  
jakearchibald.com  


Different versions of your site can be running at the same time It's pretty easy for a user to be running an old version of your site. Not only that, but a user could be running many different versions of your site at the same time, in different tabs, and that's kinda terrifying. For instance: A user opens your site. You deploy an update. The user opens one of your links in a new tab. You deploy a


● テクノロジー  
●2020/08/04 00:07
  

●
●
●
  










Event listeners and garbage collection  

4users  
jakearchibald.com  


async function showImageSize(url) { const blob = await fetch(url).then((r) => r.blob()); const img = await createImageBitmap(blob); updateUISomehow(img.width, img.height); } btn1.onclick = () => showImageSize(url1); btn2.onclick = () => showImageSize(url2); This has a race condition. If the user clicks btn1, then btn2, it's possible that the result for url2 will arrive before url1. This isn't the


● 暮らし  
●2020/06/13 09:50
  












Service workers at TPAC  

11users  
jakearchibald.com  


Last month we had a service worker meeting at the W3C TPAC conference in Fukuoka. For the first time in a few years, we focused on potential new features and behaviours. Here's a summary: Resurrection finally killed If you unregister a service worker registration, it's removed from the list of registrations, but it continues to control existing pages. This means it doesn't break any ongoing fetche



● テクノロジー  
●2019/10/07 08:00
  

●
●
●
●
●
  










Who has the fastest website in F1?  

3users  
jakearchibald.com  


I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm going to make my predictions the only way I know how: By comparing the performance of their websites. That'll work right? If anything, it'll be interesting to



● エンタメ  
●2019/03/20 22:29
  












A declarative router for service workers  

5users  
jakearchibald.com  


I'm looking for feedback on this API. It isn't yet supported in any standard or browser. In the very early days of service workers (while they were still named "navigation controllers") we had the idea of a declarative router. This provided a high-level API to define the behaviour of particular routes, so the service worker wouldn't need to be started. We dropped the idea because we didn't want to



● 学び  
●2019/01/08 04:15
  












I discovered a browser bug  

5users  
jakearchibald.com  


I accidentally discovered a huge browser bug a few months ago and I'm pretty excited about it. Security engineers always seem like the "cool kids" to me, so I'm hoping that now I can be part of the club, and y'know, get into the special parties or whatever. I've noticed that a lot of these security disclosure things are only available as PDFs. Personally, I prefer the web, but if you're a SecOps P



● 暮らし  
●2018/06/21 00:47
  

●
  










Third party CSS is not safe  

17users  
jakearchibald.com  


A few days ago there was a lot of chatter about a 'keylogger' built in CSS. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But the real problem is thinking that third party content is 'safe'. Third party images If I include the above, I'm trusting example.com. They may betr



● テクノロジー  
●2018/02/28 00:10
  

●
●
●
  










Arrays, symbols, and realms  

4users  
jakearchibald.com  


On Twitter, Allen Wirfs-Brock asked folks if they knew what Array.isArray(obj) did, and the results suggested… no they don't. For what it's worth, I also got the answer wrong. Type-checking arrays Let's say we wanted to do something specific if obj is an array. JSON.stringify is an example of this, it outputs arrays differently to other objects. We could do:



● テクノロジー  
●2017/12/13 09:14
  

●
●
  










await vs return vs return await

30users  
jakearchibald.com  


When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject() { // Wait one second await new Promise((r) => setTimeout(r, 1000)); // Toss a coin const isHeads = Boolean(Math.round(Math.random())); if (isHeads) return 'yay'; throw Error('Boo!'); } This ret



● テクノロジー  
●2017/12/08 02:48
  

●
●
●
●
●
●
●
  










Netflix functions without client-side React, and it's a good thing  

25users  
jakearchibald.com  


Netflix functions without client-side React, and it's a good thing A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir. This shouldn't be a surprise The following: Download HTML & CSS in parallel. Wait for CSS to finish downloading & execute it. Render, and continue rendering as HTML d



● テクノロジー  
●2017/10/31 20:58
  

●
●
●
●
  










Lazy async SVG rasterisation  

4users  
jakearchibald.com  


Phwoar I love a good sciency-sounding title. SVG can be slow When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images. Here's a demo, press "Scale SVG". Devtools timeline for SVG animation Sure, this is a pretty complex SVG, but we're 10x over our frame budget on some fra



● テクノロジー  
●2017/09/11 11:14
  

●
  










HTTP/2 push is tougher than I thought  

30users  
jakearchibald.com  


"HTTP/2 push will solve that" is something I've heard a lot when it comes to page load performance problems, but I didn't know much about it, so I decided to dig in. HTTP/2 push is more complicated and low-level than I initially thought, but what really caught me off-guard is how inconsistent it is between browsers – I'd assumed it was a done deal & totally ready for production. This isn't an "HTT



● テクノロジー  
●2017/05/31 07:52
  

●
●
●
●
●
●
●
●
  










ECMAScript modules in browsers  

50users  
jakearchibald.com  


ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. <script type="module"> import { addTextToBody } from './utils.mjs'; addTextToBody('Modules are pretty cool.'); </script> // utils.mjs export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); } Live demo. All you need is t



● テクノロジー  
●2017/05/03 01:36
  

●
●
●
●
●
●
●
  










Async iterators and generators  

19users  
jakearchibald.com  


Streaming fetches are supported in Chrome, Edge, and Safari, and they look a little like this: async function getResponseSize(url) { const response = await fetch(url); const reader = response.body.getReader(); let total = 0; while (true) { const { done, value } = await reader.read(); if (done) return total; total += value.length; } } This code is pretty readable thanks to async functions (here's a



● テクノロジー  
●2017/04/19 02:30
  

●
●
●
  










Do we need a new heading element? We don't know  

11users  
jakearchibald.com  


There's a proposal to add a new <h> element to the HTML spec. It solves a fairly common use-case. Take this HTML snippet: <div class="promo"> <h2>Do you find the "plot" a distraction in movies?</h2> <p>If so, you should check out "John Wick" - satisfaction guaranteed!</p> </div> This could be a web component, or a simple include. The problem is, by using <h2>, we've assumed the 'parent' heading is



● テクノロジー  
●2017/02/20 23:03
  

●
  










Events and disabled form fields

4users  
jakearchibald.com  


I've been working on the web since I was a small child all the way through to the haggard old man I am to day. However, the web still continues to surprise me. Turns out, mouse events don't fire when the pointer is over disabled form elements, except in Firefox. Serious? Serious. Give it a go. Move the mouse from the blue area below into the disabled button: It's not like the disabled button eleme



● テクノロジー  
●2017/02/20 00:16
  

●
●
●
  










Fun hacks for faster content  

9users  
jakearchibald.com  


Posted 06 December 2016 - Seems I'm finding everything "fun" right now A few weeks ago I was at Heathrow airport getting a bit of work done before a flight, and I noticed something odd about the performance of GitHub: It was quicker to open links in a new window than simply click them. Here's a video I took at the time: GitHub link click vs new tab Here I click a link, then paste the same link int


● テクノロジー  
●2016/12/07 10:27
  

●
●
●
  










SVG & media queries - JakeArchibald.com  

11users  
jakearchibald.com  


One of the great things about SVG is you can use media queries to add responsiveness to images: <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: green; } @media (min-width: 100px) { circle { fill: blue; } } </style> <circle cx="50" cy="50" r="50"/> </svg> <img src="circle.svg" width="50" height="50" /> <img src="circle.svg" width="100" height="100" /> <ifram



● テクノロジー  
●2016/10/11 00:29
  

●
●
●
  










Service worker meeting notes - JakeArchibald.com  

8users  
jakearchibald.com  


Posted 04 August 2016 - using my year's quota of bullets in one post On July 28th-29th we met up in the Mozilla offices in Toronto to discuss the core service worker spec. I'll try and cover the headlines here. Before I get stuck in to the meaty bits of the meeting, our intent here is to do what's best for developers and the future of the web, so if you disagree with any of this, please make your



● テクノロジー  
●2016/08/04 21:31
  

●
  










The performance benefits of rel=noopener - JakeArchibald.com  

18users  
jakearchibald.com  


If you have links to another origin, you should use rel="noopener", especially if they open in a new tab/window. <a href="http://example.com" target="_blank" rel="noopener"> Example site </a> Without this, the new page can access your window object via window.opener. Thankfully the origin security model of the web prevents it reading your page, but no-thankfully some legacy APIs mean it can naviga



● 暮らし  
●2016/07/22 03:08
  

●
●
●
●
●
●
●
  







次のページ  

























このページはまだ
ブックマークされていません


このページを最初にブックマークしてみませんか？
  

﹃Blog - JakeArchibald.com﹄の新着エントリーを見る  

 

キーボードショートカット一覧


j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
  
 


はてなブックマーク




●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
  

●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
  

●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  

●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  


公式Twitter




●公式アカウント
●ホットエントリー
  


はてなのサービス



●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
  





App Storeからダウンロード
Google Playで手に入れよう


Copyright © 2005-2024 Hatena. All Rights Reserved.
  




設定を変更しましたx