Opens profile photo
Follow
Click to Follow addyosmani
Addy Osmani
@addyosmani
Engineering leader,
@GoogleChrome
• Author • Great user & developer experiences •
@ChromiumDev
@ChromeDevTools
•
@____lighthouse
•
@ChromeUXReport
Science & TechnologyMountain View, CAaddyosmani.comJoined April 2009
1,942 Following
338K Followers

Addy Osmani’s posts

Addy Osmani
@addyosmani
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
5,347
Addy Osmani
@addyosmani
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.
Spotify uses CSS linear-gradient to make bright text on a bright background more readable. In this image, background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%); is used for Discover Weekly cover art. This adds a gradient that gets darker lower down in the image, enabling the white text to be read more easily.
42
5,147
Addy Osmani
@addyosmani
DevTools now shows inactive CSS properties. Hovering explains why the rule has no visible effect. So nice.
DevTools now identifies CSS styles that are valid but have no visible effect. In the Styles pane, DevTools fades out the inactive properties. Hover over the icon next to it to understand why the rule has no visible effect.
50
4,879
Addy Osmani
@addyosmani
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.
Learning Patterns is a new book covering modern design patterns, performance and rendering patterns. Coming soon.
81
4,588
Addy Osmani
@addyosmani
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"
31
4,131
Addy Osmani
@addyosmani
Tip: You can name capture groups for Regular Expressions in JavaScript. Define a named capture in angle brackets <> and they get returned under .groups.
This feature is about identifying capture groups via names. // Without named capture groups const re = /(\d{4})-(\d{2})-(\d{2})/; const match = re.exec('2021-03-04'); console.log(match[1]); // → 2021 (year) console.log(match[2]); // → 03 (month) console.log(match[3]); // → 04 (day) // With named capture groups 🔥 const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; const match = re.exec('2021-03-04'); console.log(match.groups.year); // → 2021 console.log(match.groups.month); // → 03 console.log(match.groups.day); // → 04 // ... and with destructuring assignment 🔥🔥🔥 const [match, year, month, day] = re.exec('2021-03-04');
30
3,679
Addy Osmani
@addyosmani
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
3,427
Addy Osmani
@addyosmani
Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts.
Embedded video
0:04
48
3,157
Addy Osmani
@addyosmani
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:
I have a web robot which is a Java app. I need to be able to set the User-Agent field in the HTTP header in order to be a good net citizen (so people know who is accessing their server). Anyone have any ideas? Right now, Java sends a request that includes something like: User-Agent: Java/1.Obeta2 I'd rather not rewrite all the HTTP stuff myself. I tried just searching in the JDK for the Java/1.Obeta2 figuring I could just change the string, but I couldn't find it. Perhaps it is stored as a unicode String? An easy method of setting the User-Agent field should probably be added to Java, so people can properly identify their programs. Thanks, Larry Page
36
3,254
562.3K
Addy Osmani
@addyosmani
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.
Image
36
2,906
Addy Osmani
@addyosmani
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
3,036