Addy Osmani @addyosmani Twitter profile | Pikagi

Pikagi

Addy Osmani

@addyosmani

343,587

Followers

2,114

Following

2,166

Media

26,594

Statuses

Engineering leader, @GoogleChrome • Author • Great user & developer experiences • @ChromiumDev @ChromeDevTools • @____lighthouse • @ChromeUXReport

Mountain View, CA

https://t.co/lkntLS9g24

Joined April 2009

Don't wanna be here? Send us removal request.

Pinned Tweet

@addyosmani

Addy Osmani

5 months

"First do it, then do it right, then do it better." Just start. The journey to success often begins with a single step, but that first step can be the hardest to take. It's easy to get caught up in the fear of failure or the desire for perfection, but I hope this quote I first…

Tweet media one

18

294

1K

Last Seen Profiles

@AmbKattan

@rakiathegreat

@you_sif_

@edward_farina

@the_film_god

@BearsPurgatory

@ReduxForm

@whoisemvu

@Binks_Hall

@UNDESA

@PtA_nanako

@Bylbyleva

@aninharabudaa

@bimm3d

@aileen_erin

@100Normalhuman

@richardjobson

@CVSCareers

@FollowEnockoyoo

@mitsuckhei

@rbsbz

@prichttthexnwn1

@ElliotIkilei

@beardtitangames

@RashadBattle15

@sergiomorante

@DavidLisser

@LindsayBHockey

@theyad0reclaire

@LoicChetout

@PrinceCharmingP

@silshockeynews

@PerKohler

@PIFSaudi

@GiovanniSt52159

@cityofnormanok

@addyosmani

Addy Osmani

2 years

Be careful with legacy code :)

230

4K

20K

@addyosmani

Addy Osmani

5 years

Native <img> lazy-loading is coming to the web! <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75

Tweet media one

274

7K

19K

@addyosmani

Addy Osmani

1 year

Front-end developer and back-end developer.

173

3K

16K

@addyosmani

Addy Osmani

4 years

A fun generator for CSS-only section separators!

92

2K

10K

@addyosmani

Addy Osmani

4 years

border: 1px solid red; is the console.log of CSS

272

2K

10K

@addyosmani

Addy Osmani

5 years

is amazing. Free service to remove the background of any photo 100% automatically.

Tweet media one

117

2K

9K

@addyosmani

Addy Osmani

4 years

TIL CSS "background-repeat: round" ~ repeats background images without clipping ✂️

66

2K

8K

@addyosmani

Addy Osmani

5 years

A black hole simulation in 140 bytes of JavaScript: 🤯 for(i=0;i<2e3;x.fillRect(i?960+i*S(F=260*(t+9)/i+S(i*i)):0,i?500+.2*(2*i*C(F)+2e4/i):0,K=i++?S(i)*9:2e3,K))x.fillStyle=R(99*i,2*i,i,i?1:.4)

81

2K

8K

@addyosmani

Addy Osmani

2 years

The "Software Engineering at Google" book is now free to read online: . Great insights on improving code quality & scaling engineering teams.

Tweet media one

75

2K

8K

@addyosmani

Addy Osmani

3 years

VSCode now has bracket pair colorization natively baked in! Aims to be faster than the popular Bracket Pair Colorizer extension. Smooth so far:

Tweet media one

100

1K

8K

@addyosmani

Addy Osmani

3 years

CSS "content-visibility:auto" is amazing: skip rendering & painting offscreen content until needed. I got a ~1s faster render on a long HTML document on desktop, ~3s on mobile.

Tweet media one

63

1K

7K

@addyosmani

Addy Osmani

4 years

Tip: @ChromeDevTools has a Shadow Editor built in!

70

2K

7K

@addyosmani

Addy Osmani

5 years

Understand JavaScript's async/await in 7 seconds by @manekinekko :

44

2K

7K

@addyosmani

Addy Osmani

3 years

Tip: @ChromeDevTools has a CSS Shadow Editor!

54

1K

7K

@addyosmani

Addy Osmani

4 years

"Your UI doesn't need to map one-to-one with your data's fields and values". Great thinking on simplicity from @steveschoger

Tweet media one

37

1K

7K

@addyosmani

Addy Osmani

2 years

Introducing "Learning Patterns": - a free 435+ page book on JavaScript + React design & performance patterns from @lydiahallie and I. On the web, ePub & PDF.

Tweet media one

158

2K

6K

@addyosmani

Addy Osmani

4 years

Starting a project in 2020 (h/t @chrisoncode )

117

2K

6K

@addyosmani

Addy Osmani

4 years

A full free Stanford course on Web Security: by @feross 🍪 HTTP(S), Cookies, Sessions 🛡Same Origin Policy 👿 Cross-Site Scripting (XSS) ☠️ Cross-Site Script Inclusion 🔑 WebAuthn and more.

Tweet media one

29

2K

6K

@addyosmani

Addy Osmani

4 years

550+ free customizable SVG icons that are open-source: - an awesome collection by @csaba_kissi & @Ildiesign

Tweet media one

37

1K

5K

@addyosmani

Addy Osmani

4 years

TIL the CSS "-webkit-line-clamp" property truncates multi-line text: . It's supported in Chromium, Firefox and Safari!

37

1K

5K

@addyosmani

Addy Osmani

4 years

Tip: target="_blank" on links to other sites can expose your site to performance and security issues. To fix, add rel="noopener" or rel="noreferrer" to these links: ✅

Tweet media one

61

2K

5K

@addyosmani

Addy Osmani

4 years

Things to look for in a code review: Code is... - Well designed - Readable by others - Doing what the author intended - No more complex than needed - Not degrading system code health - Commented with the why vs. what - Appropriately tested - Sufficiently documented

56

1K

5K

@addyosmani

Addy Osmani

3 years

How Spotify makes text on images more readable: a CSS linear-gradient overlay. More common these days, but still an effective technique for better color contrast.

Tweet media one

41

672

5K

@addyosmani

Addy Osmani

4 years

Tip: Font size isn’t always the best way to emphasize text. Try font color and font weight instead. h/t @steveschoger

Tweet media one

27

761

5K

@addyosmani

Addy Osmani

2 years

DevTools now shows inactive CSS properties. Hovering explains why the rule has no visible effect. So nice.

Tweet media one

49

604

5K

@addyosmani

Addy Osmani

4 years

1000+ open-source UI designs: ~ Sketch, Figma and PhotoShop sources for all kinds of web projects.

Tweet media one

25

1K

5K

@addyosmani

Addy Osmani

3 years

The <img> element now supports lazy-loading, async decoding and many other features: I wrote about how to optimize UX & the Core Web Vitals with it.

Tweet media one

42

1K

5K

@addyosmani

Addy Osmani

3 years

Excited to announce "Learning Patterns": a free new visual book on the latest JavaScript design, rendering, and performance patterns from @lydiahallie and I. Available in ePub/PDF and on web, coming this year.

Tweet media one

80

612

5K

@addyosmani

Addy Osmani

5 years

*Must read* for web developers: an inside look at how modern browsers work by @kosamari 1️⃣ 2️⃣ 3️⃣ 4️⃣

Tweet media one

18

2K

4K

@addyosmani

Addy Osmani

3 years

The new CSS aspect-ratio property lets you set the proportion of any element's dimensions without padding-top hacks! Read about it in by @una

Tweet media one

30

835

4K

@addyosmani

Addy Osmani

4 years

An excellent guide to the proper use of animation in UX:

22

1K

4K

@addyosmani

Addy Osmani

4 years

The specification for native image lazy-loading has been merged into the HTML standard! 🎉 Huge thanks to @domfarolino @annevk @zcorpan and many others! About:

Tweet media one

34

2K

4K

@addyosmani

Addy Osmani

8 months

Coding a side project? lists services with free tiers for developers.

Tweet media one

44

981

4K

@addyosmani

Addy Osmani

4 years

Tip: helps you find the right git commands quickly. Super handy reference.

Tweet media one

24

1K

4K

@addyosmani

Addy Osmani

5 years

Tip: Run copy(obj) in the @ChromeDevTools console to copy an object to your clipboard.

Tweet media one

60

1K

4K

@addyosmani

Addy Osmani

2 years

CSS aspect-ratio is now supported cross-browser! It lets you set the proportion of an element's dimensions without padding-top hacks 😍 Read more in

Tweet media one

30

858

4K

@addyosmani

Addy Osmani

2 years

"Your UI doesn't need to map one-to-one with your data's fields and values". Great thinking on simplicity from @steveschoger (whose Refactoring UI book is A+)

Tweet media one

32

481

4K

@addyosmani

Addy Osmani

4 years

Tip: highlight images missing alt text with img:not([alt])

Tweet media one

44

958

4K

@addyosmani

Addy Osmani

2 years

Coding a side project? lists services with free tiers for developers.

Tweet media one

28

909

4K

@addyosmani

Addy Osmani

2 years

*Must read* for web developers: how modern browsers work by @kosamari 1️⃣ 2️⃣ 3️⃣ 4️⃣ and by @BrowserBook

Tweet media one

29

1K

4K

@addyosmani

Addy Osmani

3 years

Tips for efficiently Googling. Search by: Exact match > "javascript modules" Scope to site > site:<domain> js After a date > javascript after:2021 Before > javascript before:2019 Exclude a phrase > javascript -es5 Number range > javascript 2015..2021 Wildcard > "fix the * error"

29

868

4K

@addyosmani

Addy Osmani

4 years

Loading bars explained. concept: @ahieiei () animation: @aaroniker_me ()

32

1K

4K

@addyosmani

Addy Osmani

3 years

The `inputmode` attribute is great ✨ Hints to the browser what virtual keyboard to show on mobile:

Tweet media one

18

890

4K

@addyosmani

Addy Osmani

6 months

This is a phenomenal web demo. Enabled by window.getScreenDetails() which provides basic live info (size, position etc) from all screens on the device.

@_nonfigurativ_

𝕭𝖏ø𝖗𝖓 𝕾𝖙𝖆𝖆𝖑

@_nonfigurativ_

6 months

Entangled #fxhash

2K

10K

69K

51

509

4K

@addyosmani

Addy Osmani

3 years

Tip: @ChromeDevTools has a CSS Animations inspector! Modify timing, delays, durations and more.

30

804

4K

@addyosmani

Addy Osmani

4 years

Coding over the holidays? lists services with free tiers for developers.

Tweet media one

33

1K

4K

@addyosmani

Addy Osmani

4 years

Tip: @ChromeDevTools has a CSS Animations inspector! Modify timing, delays, durations and more.

37

1K

4K

@addyosmani

Addy Osmani

9 years

Improved exception messages: Goodbye "undefined is not a function". Hello " http://t.co/rMIELG5VoW is not a function" http://t.co/3uykfrTK9O

Tweet media one

215

4K

4K

@addyosmani

Addy Osmani

5 years

Want to create responsive images fast? Try . Give it an image and it: 🖥️ Determines optimal breakpoints 🖼️ Generates <img srcset> code 📦 Creates a .zip of responsive images! via @katiehempenius

Tweet media one

27

1K

4K

@addyosmani

Addy Osmani

5 years

Shipped! @GoogleFonts now let's you control web font loading using `font-display`. Say hello to the `display` parameter 🎉 What's font-display?

Tweet media one

44

1K

4K

@addyosmani

Addy Osmani

5 years

Tip: Chrome can measure how much unused JavaScript is on your page DevTools > top-right menu > More tools > Coverage

Tweet media one

33

1K

4K

@addyosmani

Addy Osmani

4 years

Clean Code concepts for JavaScript: ~ a huge collection of patterns for writing readable, reusable, and refactorable code. By @ryconoclast

Tweet media one

37

1K

4K

@addyosmani

Addy Osmani

6 years

Be humble, communicate clearly, and respect others. It costs nothing to be kind, but the impact is priceless.

31

2K

4K

@addyosmani

Addy Osmani

4 years

url.searchParams is so nice for getting/setting query string params.

Tweet media one

34

689

4K

@addyosmani

Addy Osmani

4 years

Disney's HTML comments are wholesome.

Tweet media one

35

691

4K

@addyosmani

Addy Osmani

4 years

Tip: Get native-app like sharing in a few lines of JS with the Web Share API: . Supports sharing links, text & files.

Tweet media one

25

947

4K

@addyosmani

Addy Osmani

5 years

Wow. A goldmine of quick UI tips from @steveschoger 🤯 Learned a lot!

13

1K

4K

@addyosmani

Addy Osmani

5 years

Priority Hints: hint the `importance` of a resource to prioritize downloading it sooner/later: <img importance=low> <img importance=high> <img importance=auto> (default) Works on <img>, <link> and fetch() 📗 Spec: 🏃‍♀️ Origin Trial:

Tweet media one

45

1K

4K

@addyosmani

Addy Osmani

4 years

The CSS :is() pseudo-class will be useful for writing repetitive selectors in a more compact form: ~ @simevidas covers it coming to browsers.

Tweet media one

34

828

4K

@addyosmani

Addy Osmani

3 years

Tip: You can name capture groups for Regular Expressions in JavaScript. Define a named capture in angle brackets <> and they get returned under .groups.

Tweet media one

25

712

4K

@addyosmani

Addy Osmani

4 years

Tip: In @ChromeDevTools , hold shift while hovering over a request and it will highlight the initiator in green and dependencies in red.

Tweet media one

30

938

4K

@addyosmani

Addy Osmani

4 years

Tip: @FirefoxDevTools highlights what elements have scroll overflows! Useful to find what DOM nodes have an unexpected scrollbar.

Tweet media one

38

731

4K

@addyosmani

Addy Osmani

4 years

"I accidentally created this" 😅 (via u/saeedmotamed)

103

292

3K

@addyosmani

Addy Osmani

4 years

We’ve improved <img> lazy-loading in Chrome! The new thresholds for when we load <img loading=lazy>: * Offer *much* better data-savings * Are closer to JavaScript lazy-loading libraries * Are rolling out to Chrome 79+

Tweet media one

72

866

3K

@addyosmani

Addy Osmani

5 years

DevTools Tip: $_ in the Console returns the value of the last expression evaluated.

Tweet media one

33

927

3K

@addyosmani

Addy Osmani

4 years

My lessons from the decade: * You never stop learning * You can't know everything * Failure is healthy & helps us grow * Your biggest competition is yourself * Communication is key in life & work * Be kind & empathize with others * Value friends & family * Get enough sleep :)

29

1K

3K

@addyosmani

Addy Osmani

5 years

Tip: Get the unique values of an array in JavaScript.

Tweet media one

68

837

3K

@addyosmani

Addy Osmani

4 years

ResizeObserver lets us observe changes to the layout size of elements: It's in the latest Safari! Now in *all* modern browsers, we can efficiently design components responsive to their container vs. just the viewport.

41

837

3K

@addyosmani

Addy Osmani

5 years

New: Inspect Element in @ChromeDevTools now has a tooltip of CSS properties! Displays when hovering over elements (via @umaar )

Tweet media one

32

994

3K

@addyosmani

Addy Osmani

6 years

A Netflix web performance case study: ⚡ 50% faster Time-to-Interactive (logged-out homepage) - ✂️ JS libraries by 200KB - Client-side React ➡️ vanilla JS - React used server-side ⚡ 30% faster subsequent navigations - Prefetch React for sign-up process

Tweet card media

A Netflix Web Performance Case Study

Improving Time-To-Interactive for Netflix.com on Desktop

25

1K

3K

@addyosmani

Addy Osmani

2 years

Tip: Get native-app like sharing in a few lines of JS with the Web Share API: . Supports sharing links, text & files.

Tweet media one

34

635

3K

@addyosmani

Addy Osmani

5 years

Optional Chaining & Nullish Coalescing are coming to JavaScript! They're short, readable and are both available to try in Chrome Canary 🎉

Tweet media one

43

1K

3K

@addyosmani

Addy Osmani

4 years

Tip: Use curly braces in the command-line to quickly create multiple related files with less typing.

Tweet media one

53

725

3K

@addyosmani

Addy Osmani

3 years

The CSS :is() pseudo-class is useful for writing repetitive selectors in a more compact form: by @argyleink covers it well!

Tweet media one

26

582

3K

@addyosmani

Addy Osmani

5 years

Tip: generates webpack build configs for you online 📦 Useful learning tool by @karljakoblind

Tweet media one

25

972

3K

@addyosmani

Addy Osmani

9 months

When you suffer from imposter syndrome, remember that everyone had to learn new things at some point. e.g. Google’s Larry Page w/web dev:

Tweet media one

36

320

3K

@addyosmani

Addy Osmani

6 years

Tip: Get the unique values of an array in JS. Use ES2015 Set() and ...rest to discard duplicate values.

Tweet media one

46

988

3K

@addyosmani

Addy Osmani

4 years

Wow. You can create and edit full diagrams in your editor with the VS Code extension:

Tweet media one

42

786

3K

@addyosmani

Addy Osmani

4 years

In @ChromeDevTools , you can now right-click any element to take a screenshot of that element!

Tweet media one

39

812

3K

@addyosmani

Addy Osmani

9 months

Tip: @ChromeDevTools can now override the content of Fetch/XHR requests! Great for mocking APIs without waiting on backend changes! This and lots more in Chrome 117:

56

704

3K

@addyosmani

Addy Osmani

4 years

"Use Grid for layout, Flexbox for components": Great tips on how to decide what fits your use-case by @shadeed9

Tweet media one

30

814

3K

@addyosmani

Addy Osmani

4 years

Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts.

46

718

3K

@addyosmani

Addy Osmani

2 years

Logpoints in @ChromeDevTools are great. Log messages to Console without console.log() calls in your code - persists across page reloads too!

29

585

3K

@addyosmani

Addy Osmani

5 years

Puppeteer Recorder is game-changing for tests: ~ This Chrome extension records interactions & *generates* replay scripts 🤯

48

856

3K

@addyosmani

Addy Osmani

5 years

Use React? Render large lists efficiently with react-window: ~small library for virtualizing lists & grids. Renders what users can see vs all your items at once ⚡️

Tweet media one

33

769

3K

@addyosmani

Addy Osmani

4 years

Tip: Shave up to 90% off the size of Google Fonts requests by declaring only characters you need with &text:

Tweet media one

32

859

3K

@addyosmani

Addy Osmani

4 years

So cool that @FirefoxDevTools shows inactive CSS and how to fix it.

Tweet media one

20

655

3K

@addyosmani

Addy Osmani

4 years

Trying ~ test responsive designs on target screens side-by-side. Includes DevTools, click/scroll mirroring & batch screenshot export.

37

719

3K

@addyosmani

Addy Osmani

2 years

Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox.

41

514

3K

@addyosmani

Addy Osmani

4 years

Algorithms and data structures implemented in modern JavaScript: & . Treasure trove of examples to learn from.

21

811

3K

@addyosmani

Addy Osmani

2 years

Loading bars explained. animation: @aaroniker_me concept: @ahieiei ()

25

643

3K

@addyosmani

Addy Osmani

3 years

Have low-resolution images? Enlarge them & improve their quality with . All client side. Powered by ML using UpscalerJS & TensorFlow.js.

34

639

3K

@addyosmani

Addy Osmani

4 years

Tip: @ChromeDevTools can pin Live Expressions to the top of Console to monitor values in real-time! ✨

18

788

3K

@addyosmani

Addy Osmani

6 years

📣 "The Cost Of JavaScript In 2018"

Tweet card media

The Cost Of JavaScript In 2018

Update: The Cost Of JavaScript In 2019 is now available to read.

29

1K

3K

@addyosmani

Addy Osmani

5 years

📢 Announcing… quicklink! <1KB library to.. ⚡ Automatically prefetch links in the viewport during idle time ⏳ Attempt to make next-page navigations load faster 📡 Data-considerate: doesn't prefetch on 2G or if Data Saver on

Tweet media one

45

954

3K

@addyosmani

Addy Osmani

4 years

AVIF is an image format that compresses to a smaller size than WebP or JPEG It's in Chrome 85, behind a flag in Firefox & can be a progressive enhancement!

Tweet media one

33

821

3K

@addyosmani

Addy Osmani

6 years

JavaScript's built-in string methods keep getting better.

Tweet media one

40

951

3K

@addyosmani

Addy Osmani

11 months

Modern HTML has many performance controls: 🔑 Prioritize a key image: <img fetchpriority=high> 💤 Lazy-load images: <img loading=lazy> 🌐 Warm connections to origins: rel=preconnect 🕐 Fetch late-found resources: rel=preload ⏭️ Fetch next-page navigations: rel=prefetch

Tweet media one

31

475

3K

@addyosmani

Addy Osmani

6 years

Tip: JavaScript's Array.from() accepts a second argument that's a `map` function. Useful for calling on each element of an array you created.

Tweet media one

36

912

3K

@addyosmani

Addy Osmani

2 years

A fun generator for CSS-only section separators!

17

482

3K