Jake Archibald @jaffathecake Twitter profile

Pinned Tweet

Jake Archibald

18 days

📝 HTML attributes vs DOM properties. They're completely different, but often coupled. Here's the difference, and why it matters:

HTML attributes vs DOM properties

They're completely different, but often coupled.

jakearchibald.com

29

151

700

Last Seen Profiles

@Hilmi7000346003

@UPROXX

@LiRain_art

@replicate

@nnnnatalcia

@sceneweb

@Pierce_Brown

@Ofeliaagl

@bbikawaiii

@SorenLuka

@Ankolgunaktifim

@Official_Leczy

@_TheJam_

@POLITICOMag

@Mrha__

@brownsugar

@konokakanoko

@JacintaDal99423

@KristianKilpat4

@AustinPrepBLax

@LuvWickkk

@benisevmedinhic

@THINK_ING

@ShLetsMeet

@StirileProTV

@miguelmcminn

@PoliciaDeCesar

@Malachians

@MedicaidGov

@TobaccoPunished

@NavoSchmavo

@PalmettoFBall

@ShakaThaGod

@tbt1140793

@Tomasz_Walczak

@TheWalMartWolv

Jake Archibald

@jaffathecake

8 years

In history class I remember thinking "how did German people let that happen?" Now I know.

151

17K

22K

Jake Archibald

@jaffathecake

1 year

lol, Musk deleted the "he's fired" tweet. Does that also undo the firing, @EricFrohnhoefer ?

67

261

6K

Jake Archibald

@jaffathecake

2 years

Me looking at my own code after 6 months

65

576

4K

Jake Archibald

@jaffathecake

4 years

It's unfair that I can typo 'console' three times in a row, whereas other people:

58

781

4K

Jake Archibald

@jaffathecake

3 years

I laughed at this GitHub Copilot suggestion until I remembered it's based on real code.

68

440

3K

Jake Archibald

@jaffathecake

5 years

aye thanks google good job

51

646

3K

Jake Archibald

@jaffathecake

5 years

My dickhead cat wakes up at 4am every day and he's yet to receive VC backing.

Inc.

@Inc

5 years

The world's most successful people start their day at 4 a.m.

3K

10K

30

398

3K

Jake Archibald

@jaffathecake

6 years

Modern JavaScript is great

42

727

3K

Jake Archibald

@jaffathecake

2 years

I've been dying to share this for weeks now… Introducing the page transition API! It's still in-development, but you can play with it today. I'm really happy with where this API is heading. I hope you like it too!

Bringing page transitions to the web

Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating tra...

www.youtube.com

136

552

3K

Jake Archibald

@jaffathecake

3 years

@Joanna__Hardy Last night my other half rolled over and whispered "probably not going to need all these parachutes".

16

56

3K

Jake Archibald

@jaffathecake

6 years

HTTPS = "Is the response untampered & from the expected sender?" CORS = "Can I access the content of this resource?" CSP = "Only allow requests that look like this…" SRI = "Only allow content that looks like this…" CORB = "Don't allow my data into another origin's process"

22

842

3K

Jake Archibald

@jaffathecake

1 year

If people with "unlimited" time off tried to actually take unlimited time off, they'd quickly discover what they actually have is "undefined" time off.

Tom Warren

@tomwarren

1 year

scoop: Microsoft employees are getting unlimited time off. Microsoft will no longer require US employees to formally record vacation later this month, and they're getting a payout for any unused days. Details here:

272

425

3K

56

175

2K

Jake Archibald

@jaffathecake

3 years

@Joanna__Hardy Although the best one is when she woke me up, shaking me and shouting my name again and again. Her: JAKEJAKEJAKEJAKEJAKE Me: What? What is it? Her: I think we should go to sleep now [rolls over and starts snoring]

18

55

2K

Jake Archibald

@jaffathecake

3 years

NASA: Achieves first helicopter flight on Mars Whereas I:

44

171

2K

Jake Archibald

@jaffathecake

4 years

📝 AVIF has landed! ⬇️ Here's how to use it today, and how it performs vs other web image formats.

AVIF has landed

AVIF is the first browser image format we've had in 10 years. Let's see how it performs…

jakearchibald.com

68

878

2K

Jake Archibald

@jaffathecake

1 year

Big life update: I've resigned from Google to take on an exciting new role. I'll share more details soon, but first, a nice long break between jobs 😴 …

188

22

2K

Jake Archibald

@jaffathecake

4 years

All code using array.reduce should be rewritten without array.reduce so it's readable by humans *mutes thread*

151

268

2K

Jake Archibald

@jaffathecake

6 years

HTTP vs HTTPS on public WiFi. HTTPS is important, even for static sites.

18

785

2K

Jake Archibald

@jaffathecake

1 year

Someone asked if it's possible to use images that only exist during a view transition. Yes. The answer is yes. Demo: (works in Chrome Canary)

46

148

2K

Jake Archibald

@jaffathecake

10 months

Today's my first day as an engineer at @Shopify 😀 Getting the band back together with @DasSurma and @_developit , and looking forward to meeting lots of new folks.

139

18

2K

Jake Archibald

@jaffathecake

6 years

🎥 How the event loop works. ➡️ How stuff gets from other threads into JS. ➡️ Why infinite loops block rendering. ➡️ Why setTimeout loops don't. ➡️ rAF vs setTimeout. ➡️ Is rAF before or after paint? ➡️ When microtasks happen.

Jake Archibald on the web browser event loop, setTimeout, micro...

"In The Loop" presented by Jake Archibald at JSConf.Asia 2018Have you ever had a bug where things were happening in the wrong order, or particular style chan...

www.youtube.com

37

482

2K

Jake Archibald

@jaffathecake

5 years

I'm in India. There's a lot of curry and everyone cares about web performance. It's like heaven for me.

49

106

2K

Jake Archibald

@jaffathecake

3 years

I got myself into a mess with some code on Friday, couldn't finish it. Deadline is Monday. It's been stressing me out all weekend. Just sat down in a tired, slightly hungover state, and fixed it all like it was the easiest thing in the world. WHY IS CODING LIKE THIS??

117

78

2K

Jake Archibald

@jaffathecake

3 years

📝 How to win at CORS! Not just how CORS works, but also the history and reasons behind it. Includes the hot new app everyone's talking about: The CORS playground!

How to win at CORS

The 'how' and 'why' of CORS, from start to finish.

jakearchibald.com

32

398

2K

Jake Archibald

@jaffathecake

6 years

💖 url.searchParams

23

397

1K

Jake Archibald

@jaffathecake

10 months

It still seems weird to me that Prettier will turn <br> into <br />. The / is there from XHTML - a standard that became redundant in the late 2000s. The space before the / is there for compatibility with Netscape Navigator 4 - an engine that was dropped in the late 90s.

118

73

1K

Jake Archibald

@jaffathecake

6 years

Huge congratulations to the Edge team for shipping service workers. With that, service workers are available in *all* modern browser engines. And thanks to @abraham for this PR to …

18

651

1K

Jake Archibald

@jaffathecake

3 years

I wanted to quickly check how many colours were in an image, and it turned out easier than I thought:

20

126

1K

Jake Archibald

@jaffathecake

6 years

Frontend development discussion.

9

541

1K

Jake Archibald

@jaffathecake

6 years

Customer: Can I see the menu? Waiter: One moment… *time passes* Customer: What's taking so long? Waiter: Oh, we can't give you the menu until we've prepared one of each dish. Then, when you choose, we'll be able to give you it *instantly*. Don't let websites launch like this.

16

464

1K

Jake Archibald

@jaffathecake

7 years

Debugging my webpack config

12

502

1K

Jake Archibald

@jaffathecake

4 years

Anyone else habitually press shift+enter for newlines due to apps that 'send' when you press enter?

88

44

1K

Jake Archibald

@jaffathecake

6 years

I got my first paid web job in 2004. In 2007 my JS was running on most BBC pages. In 2008 I gave my first talk. In 2012 I wrote about appcache. In 2013 I got involved with Service Workers. …In 2018 I shared a link to localhost.

Making it easier to handle the state of extendable events by jakearchibald · Pull Request #1348 ·...

Currently it's impossible for another spec to know if an extendable event is in progress, or what the result was afterwards. I intended to just mark some things as "export", but tried...

github.com

25

179

1K

Jake Archibald

@jaffathecake

6 years

So how's your Monday going?

32

231

1K

Jake Archibald

@jaffathecake

2 years

um my phone just started vibrating, music stopped playing, and the screen said "incoming call". Anyone else experienced this?

52

134

1K

Jake Archibald

@jaffathecake

4 years

Phases of coding: 1️⃣ My code looks like something from a "beginners' JavaScript" book, because that's all I know. 2️⃣ I know things, and I want those who see my code to realise I'm a great knower of things. 3️⃣ I want my code to look like it's from a "beginners' JavaScript" book.

30

236

1K

Jake Archibald

@jaffathecake

6 years

Great explanation of bandwidth Vs latency by @katiehempenius

12

540

1K

Jake Archibald

@jaffathecake

7 years

Well this makes me happy.

11

602

1K

Jake Archibald

@jaffathecake

5 years

🎨 - make images smaller using best-in-class codecs, right in the browser.

Squoosh

Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.

squoosh.app

26

353

1K

Jake Archibald

@jaffathecake

2 years

📝 When avoiding <img> layout shifts, what's best? aspect-ratio, or width & height attributes? There's some misinformation & misunderstanding around this stuff, so here's a bunch of demos and spec digging to explain how it works.

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

Two ways to do the same thing, but which is best?

jakearchibald.com

37

247

1K

Jake Archibald

@jaffathecake

4 years

The beer isle at Sainsbury's is pretty empty except for…

48

179

1K

Jake Archibald

@jaffathecake

5 years

🤯 This image is made entirely with CSS. Absolutely stunning work from @cyanharlow

43

368

1K

Jake Archibald

@jaffathecake

6 years

I'd like "// this should never happen" on my headstone.

28

216

1K

Jake Archibald

@jaffathecake

4 years

wait what

Mihai Leonte

@leonte_dev

4 years

🤯 Opt + click to place your cursor wherever in Terminal 🤯 And to think that for YEARS I've been holding down the arrow keys like a caveman... 🤪

81

641

2K

30

183

1K

Jake Archibald

@jaffathecake

5 years

New favourite loading spinner

10

157

1K

Jake Archibald

@jaffathecake

7 years

CSS can now load progressively in Chrome Canary with the "Experimental Web Platform features" flag. Details:

26

683

1K

Jake Archibald

@jaffathecake

5 years

📝 Who has the fastest website in F1? A deep-dive on: 🏁 How to test for performance. 🏁 How to interpret WebPageTest results. 🏁 How to optimise images. 🏁 Analysing code coverage. 🏁 How to avoid common performance pitfalls.

Who has the fastest website in F1?

jakearchibald.com

41

341

1K

Jake Archibald

@jaffathecake

5 years

📝 Introducing Background Fetch. ➡️ Perform long-running fetches in the background. ➡️ Hear about the result in your service worker. ➡️ User can see progress and pause/cancel. Demo & docs:

Introducing Background Fetch | Blog | Chrome for Developers

Background fetch lets you handle large downloads, even if the browser closes.

developer.chrome.com

15

354

1K

Jake Archibald

@jaffathecake

4 years

"GitHub's 'related issues' feature has a high level of engagement"

28

147

1K

Jake Archibald

@jaffathecake

7 years

📝 Netflix "removed" React and improved performance. ➡️ Despite appearances, this reflects well on React.

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

Netflix improved performance by deferring react on the client, but this doesn't reflect badly on React.

jakearchibald.com

26

491

1K

Jake Archibald

@jaffathecake

7 years

To change the mouse pointer with CSS, use "cursor" To set it to a pointer, use "default" To set it to a hand, use "pointer" Why u crying?

25

434

997

Jake Archibald

@jaffathecake

4 years

What if, instead of creating AMP, Google used the site's RSS feed to render a lite version of the page using some kind of RSS reading web app…

51

96

994

Jake Archibald

@jaffathecake

2 years

This is a huge bug. On OSX, Safari users can (temporarily) switch to another browser to avoid their data leaking across origins. iOS users have no such choice, because Apple imposes a ban on other browser engines.

Safari 15 IndexedDB Leaks

Information leaks resulting from an IndexedDB same-origin policy violation in WebKit (a browser engine primarily used in Safari, as well as all iOS and iPadOS web browsers).

safarileaks.com

33

362

989

Jake Archibald

@jaffathecake

7 years

Hello, Jake here. I use MDN to look up how to use APIs I helped design.

📦🛠👷🏻‍♂️Sean Larkin

@TheLarkInn

7 years

Hi, Im Sean one of the maintainers for #webpack . I've never setup Hot Module Replacement w/o a boilerplate before. ¯\_(ツ)_/¯

5

136

432

11

268

951

Jake Archibald

@jaffathecake

1 year

🎉 SPA view transitions have landed in stable Chrome! But, this is just the start! We've got more view transition features planned. Here's what we're looking at next:

SPA view transitions land in Chrome 111 | Blog | Chrome for Developers

The View Transition API allows page transitions within single-page apps, and will later include multi-page apps.

developer.chrome.com

39

188

945

Jake Archibald

@jaffathecake

4 years

Whenever I need to clamp a number between a `min` and a `max`, it takes me ages to convince myself this implementation is correct. But yeah, it's easy! I just want the min of the max of the num and the min and the max.

73

110

930

Jake Archibald

@jaffathecake

4 years

Ladies and gentlemen, I present to you my nephew and sister…

23

64

933

Jake Archibald

@jaffathecake

3 years

At some point server-side rendering will be repackaged as "just-in-time static site generation" and I'm actually kinda looking forward to it.

32

91

930

Jake Archibald

@jaffathecake

3 years

📝 Don't use functions as callbacks unless they're designed to be callbacks, and the same goes for option objects! It might work fine today, but could break in the future.

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

…same goes for option objects.

jakearchibald.com

47

225

918

Jake Archibald

@jaffathecake

3 years

YOU WOULDN'T DECODE THE HTML SOURCE CODE

Governor Mike Parson

@GovParsonMO

3 years

Through a multi-step process, an individual took the records of at least three educators, decoded the HTML source code, and viewed the SSN of those specific educators. We notified the Cole County prosecutor and the Highway Patrol’s Digital Forensic Unit will investigate.

5K

335

1K

34

82

903

Jake Archibald

@jaffathecake

2 years

Using Twitter in Chrome on an Android tablet. It keeps begging me to install the app because its 'better'. Here's the app vs the web:

40

30

906

Jake Archibald

@jaffathecake

6 years

📝 Third party CSS is not 'safe'. ➡️ Yes, in some situations CSS can 'keylog' password fields, but it's the tip of the iceberg. ➡️ Don't use third party content you don't trust.

Third party CSS is not safe

jakearchibald.com

14

533

873

Jake Archibald

@jaffathecake

5 years

Time travellers: When you're done with Hitler, please deal with whoever prevented single line comments in CSS.

24

108

863

Jake Archibald

@jaffathecake

3 years

TIL ResizeObserver & IntersectionObserver need to be manually disconnected, else they leak memory through their callback. This happens in all browsers. MutationObserver and event listeners don't have this issue. Make sure you manually disconnect resize/intersection observers!

19

151

872

Jake Archibald

@jaffathecake

2 years

@svpino Nah, this is silly. They may have gotten the info they need from many other sources. When I ask "any questions for me?" I also say "I don't factor this into my rating. You don't get points for smart questions, you don't lose points for 'dumb' questions - it's entirely for you"

19

14

851

Jake Archibald

@jaffathecake

8 years

📝 Async functions are enabled by default in Chrome 55. Here's how they work, and why I love them:

18

538

847

Jake Archibald

@jaffathecake

6 years

📝 New post! I stumbled across a serious browser security bug & I can finally talk about it. The post covers: ➡️ An exciting new logo. ➡️ Range requests. ➡️ "No-cors" requests. ➡️ Sneaking past origin security. ➡️ The importance of standards.

I discovered a browser bug

jakearchibald.com

38

343

843

Jake Archibald

@jaffathecake

9 years

Hardware: Fuck it, duct tape. Development: Fuck it, regex. Design: Fuck it, modal dialog.

38

943

843

Jake Archibald

@jaffathecake

2 years

One of the most frustrating situations in web development: I can solve this problem trivially but the framework won't let me.

46

75

839

Jake Archibald

@jaffathecake

5 years

@Farshchi If engineers have to work 20hr days, either the company culture is toxic, or the project was horrifically mismanaged.

7

33

823

Jake Archibald

@jaffathecake

1 year

Why didn't they use functional JavaScript?

Jeroen Frijters

@JeroenFrijters

1 year

The Dutch government was forced to release the source code of their DigiD digital authentication iOS app. It is written in C#.

519

1K

10K

43

61

841

Jake Archibald

@jaffathecake

3 years

JS had lots of nice array methods, but it feels like we're missing a simple way to create a new array and populate it via a mapping function

71

65

793

Jake Archibald

@jaffathecake

8 years

"no-cache" doesn't mean no cache. "must-revalidate" doesn't mean must revalidate. A guide to caching best practices:

Caching best practices & max-age gotchas

How to get the most out of caching without nasty race conditions

jakearchibald.com

17

511

785

Jake Archibald

@jaffathecake

4 years

Some sources of random data are better than others. Eg: 🥉 Math.random() 🥈 crypto.getRandomValues(array) 🥇 The compass on any Android device

9

88

779

Jake Archibald

@jaffathecake

5 months

We're baaaaaack! Me and @DasSurma have a new podcast: Off The Main Thread! (google wouldn't let us have the other name, whatever) In this episode, @DasSurma talks through the architecture of GPUs, and I look at browser 'ideologies' over the past decade.

WebGPU and Browser Ideologies - Off The Main Thread

How do GPUs even work? And are browsers like political parties?

offthemainthread.tech

65

96

778

Jake Archibald

@jaffathecake

6 years

Thanks padStart, you made creating random colours a whole bunch easier.

12

154

761

Jake Archibald

@jaffathecake

2 years

Me, when asked to do something I don't really believe in: Aged 18-25: Yes absolutely! 25-35: I'm really sorry, I don't think that really fits in with the theme & direction of the project. 35+: No.

23

55

779

Jake Archibald

@jaffathecake

3 years

Heh, the new Twitter font has a ton of space after backticks, making `this` look weird.

41

34

756

Jake Archibald

@jaffathecake

7 years

Let's enjoy this, for a moment

10

332

738

Jake Archibald

@jaffathecake

3 years

The HTML standard is one of the biggest standards in web development. A 12mb document of features and rules. "Assumed skill".

Shawn 🐳

@ShawnAxsom

3 years

Front-end Software Engineers - Don't list HTML first on the Skills section of your resume! HTML is an assumed skill (if you're applying for a FE web development role). Put your unique skills first. 1. React 2. TypeScript 3. AWS

141

231

2K

33

91

751

Jake Archibald

@jaffathecake

7 years

Went for a run. Forgot to wear Fitbit. What a senseless waste of human life.

21

80

745

Jake Archibald

@jaffathecake

10 months

📝 The case against self-closing tags in HTML At best, they're a relic from the past, and at worst, they're actively misleading.

The case against self-closing tags in HTML

The history, facts, and opinions.

jakearchibald.com

58

124

736

Jake Archibald

@jaffathecake

8 years

You're not a developer unless you've built a microprocessor using sand and your fists

21

266

733

Jake Archibald

@jaffathecake

5 years

@johnmcdonnellMP *polls show public want to remain in EU* Ah yes, that must mean you want Brexit. *polls show public think the referendum was a mistake* Ah yes, that must mean you want Brexit. *huge losses for Brexit-supporting parties vs remain* Yes, you want Brexit. Message received.

15

87

712

Jake Archibald

@jaffathecake

5 years

Me, softly: Hey Google, lights out. The dim light fades away, for now is the time for slumber and… Google Home: 📢📢OKAY JAKE TURNING OFF THE LAMP📢📢

30

60

711

Jake Archibald

@jaffathecake

7 years

@wtf1official Palmer crashed straight into his 2018 contract

8

259

691

Jake Archibald

@jaffathecake

8 years

Facebook block mobile browsers from their 1mb messenger, forcing you to get the 44mb native app. This is such anti-web, anti-user bullshit.

58

408

690

Jake Archibald

@jaffathecake

2 years

"Please don't use your browser's back button during this process. We didn't test that shit and have no idea what might happen."

10

51

695

Jake Archibald

@jaffathecake

5 years

I feel like CSS modules are overlooked in the whole CSS vs JS debate. ➡️ You write .css files ➡️ Can use preprocessors like Sass ➡️ Encourages flatter CSS (like BEM and similar conventions) ➡️ But you can still use the cascade ➡️ Unique class names ➡️ Tree-shaking ➡️ .css output

34

135

673

Jake Archibald

@jaffathecake

6 years

GitHub autocomplete: "I see you've started typing the name of the person who wrote the previous comment. Anyway here's a list of 12 random people."

16

108

676

Jake Archibald

@jaffathecake

6 years

37

169

671

Jake Archibald

@jaffathecake

8 years

Chrome is changing how it loads stylesheets, allowing you to load & apply CSS progressively

The future of loading CSS

Chrome is intending to change the behaviour of in , which allows for better ways to load CSS

jakearchibald.com

16

572

671

Jake Archibald

@jaffathecake

3 years

📝 How to correctly encode data for POST requests. GitHub Copilot gets this wrong, so here's how to get it right. Also covers some tricks with URLSearchParams, and FormData.

Encoding data for POST requests

Don't do it like GitHub Copilot!

jakearchibald.com

16

118

681

Jake Archibald

@jaffathecake

3 years

For those of you who weren't around back then: "web 2.0" was this nebulous thing championed by grifters and influencers. Everyone who actually understood web tech considered it a joke. This web3 stuff is _on brand_.

48

61

673

Jake Archibald

@jaffathecake

5 years

🎮 If you like minesweeper, you'll like this. Because it's the same. ➡️ 20k to interactive. ➡️ Also works on $15 KaiOS phones. ➡️ Keyboard & screen reader accessible. Had a lot of fun building this! What are your fastest times?

40

134

663

Jake Archibald

@jaffathecake

4 years

Btw, I realise a lot of you follow me purely for web dev stuff, but tweeting bullshit has really helped with the isolation. Thanks for bearing with.

47

10

660

Jake Archibald

@jaffathecake

3 years

Has web dev grifting suddenly gotten worse or is Twitter just putting it in my timeline more? Loads of fancy graphics full of misinformation like "the event loop is like a while loop except it fires an event 🎉. Sign up to my course!" and the guy has like 300k followers.

75

27

655

Jake Archibald

@jaffathecake

7 months

I don't understand the hate for this. A single script that builds differently for the server and client is great. A thing that turns a function into a URL is cool. formAction is a web standard, and accepts a URL. The sql template tag is a smart way to prevent injection.

Adam Rackis

@AdamRackis

7 months

Server actions 🔥

797

310

4K

80

47

665