Profile picture
Sarah Drasner
@sarah_edo
, 8 tweets, 5 min read Read on Twitter
🔥 Here’s a performance thread (haha get it, thread?) in case it’s useful to anyone:

1️⃣ If you don’t know Intersection Observer for detecting/loading images/script/whatever, here’s a basic-example example:
codepen.io/sdras/pen/cecb…

Docs: developer.mozilla.org/en-US/docs/Web…
2️⃣ Image optimization for hero photos- this trick I learned from @smashingmag- make the image 2x bigger & make the quality very low

But then I take it another step and use @shshaw's SVG converter, brought >1MB imgs down to 30kb without loss of quality!

s.codepen.io/shshaw/debug/L…
3️⃣ Please use gzip if you aren't already! HUGE gains. Cloudflare && Netlify will give it to you out of the box

Netlify will allow you to configure your headers with a small _headers file for efficient caching: netlify.com/docs/headers-a…

Playground here: play.netlify.com/headers
4️⃣ Fonts can have a HUGE impact on perf. I recently learned about `font-display: swap;` from @notwaldorf

font-display.glitch.me

And check out this huge repo of web font loading recipes by @zachleat! 😱
github.com/zachleat/web-f…
5️⃣ Inlining critical CSS and deferring what you can is also super helpful if you do have any utilities- @timkadlec showed me Google Chrome Labs Critters for projects built with Webpack and I've liked it so far :)

github.com/GoogleChromeLa…
6️⃣ If you use @nuxt_js, you can lazy-load in components by updating the import from:

import SomeComponent from "./SomeComponent.vue";

to:

const SomeComponent = () => import("./SomeComponent.vue");

Hat tip to @Atinux for this one!
7️⃣ Finally, link rel="preload" is a really quick win for letting browsers know what resources you'll need the most

Docs: developer.mozilla.org/en-US/docs/Web…

Great writeup by @addyosmani here on some of the wins! 🏆: medium.com/reloading/prel…
Ok, I'm done, time for a cocktail 🍸 Cheers!
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Sarah Drasner
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

More from @sarah_edo see all

Profile picture
Sarah Drasner
@sarah_edo
Here’s a thread full of some browser tricks I’ve learned over the years that might help you do animation or other interesting things, in case your resolution is to do more of these kinds of projects
getBoundingClientRect() is an awesome native method that tells you important information about an element’s placement on the page. It’s super useful for animation logic, but also debugging!

developer.mozilla.org/en-US/docs/Web…
The first few times I’ve broken everything in d3.js and freaked myself out was because of a domain, range, extent issue. If you learn these, your chances of scaring yourself and breaking thing go way down.
Read 7 tweets
Profile picture
Sarah Drasner
@sarah_edo
Ok real talk: I give plenty of speeches and the nerves beforehand never fully go away for me. Never let anyone convince you that experiencing nerves means you shouldn’t be up there. You absolutely do! Here are some awesome benefits:
Those same nerves that make you feel anxious or give you stomach problems kick in your ability to think more clearly. You’re literally more able to think more clearly from the adrenaline. You know what else?
I see tons of speaker lounges. The speakers that are more calm beforehand are not necessarily giving the better talks. I see no correlation. My theory is that the people who are nervous are appreciating the time and attention of the audience. They want to make it stellar.
Read 6 tweets
Profile picture
Sarah Drasner
@sarah_edo
Let's talk about how to give feedback for a minute. Giving good feedback is a skill, and it's not easy. But people's ability to receive and act on feedback has a lot to do with how it's delivered. This matters for *both* manager and employee.
The best tool I can offer is what's called the "compliment sandwich". Here's how it works.
1) You tell something what you generally appreciate about the project, or the idea. This is useful to you too, because it has to be true. No lying. So even if you dislike it, you have to stretch yourself which can help you check your impulses.
Read 9 tweets

Related threads

Profile picture
Dr. Sturg
@DrSturg
#Thread 1/ Today's a day when I think a lot of people are going to be discussing and critiquing #journalism Since I've been teaching the subject for quite some time now, here's some things I tell my students about their relationships to public officials.
2/ The first rule of #journalism, even in the @spj_tweets code of ethics, is to "seek truth and report it." Sources of truth don't always want it shared. Everyone wants to look good, and when people have chosen to do bad things, they don't want you to expose them.
3/ A side #ProTip for newsmakers: The best way to avoid unfavorable coverage is to not do bad things. It's not 100%, but it works a lot better than other shenanigans you try.
Read 16 tweets
Profile picture
Rich '77 punk
@77Pnk
Confessional #Thread

Far-right radicalisation can happen to anyone. I am the proof, and this is my story.
In late 2016 through '17, as quite a naive Twitter user I was approached by a Bluehand member (had to google what Bluehand *was*) & what I saw, at that time, drew me in.
At that time, ISIS were full on, social media was alight with anti-Muslim propaganda, I believed it - an ideal recruit for Bluehand.
I was reeled in quickly, 100's of DM's, invites to BH private chat rooms, tweets where I was tagged in with other BH members, it was crazy...
...I engaged with their tweets. I composed my own anti-Muslim tweets, they were liked & retweeted, American far-right accounts retweeted & liked them, they too invited me to join their private chat rooms...it got that crazy I was followed & DM'd by General Mike Flynn.
Read 10 tweets
Profile picture
Wing Chun Life🧠💪🗡️
@wingchun_life
#Thread
CURSE OF KNOWLEDGE:
This is a powerful cognitive bias, and the one that's probably most responsible for you staying stuck in your dead-end way of doing things instead of breaking out.

What is it?
The mind's inability to remember what it was like to not know something.
At first glance you may think this is a relatively unimportant thing. Completely harmless.

But it's robbing you of your freedom. Here's how.

To understand, we're going to use an example from my life: Magic Tricks.

I'm a professional mentalist; I've performed in Vegas.
I know how the mind works, and I understand why the simple methods of magic are so powerful; they leverage exactly these kinds of mental hiccups. So, here's the example.

I do a trick, and you want to know how it works. You'll do ANYTHING. Pay me $100, even. Great! Pay up!
Read 18 tweets
Profile picture
Gonto
@mgonto
#thread on Friday I talked to Meina, a new member from the team.
She was telling me that in order to focus for a certain task when switching from another, it helped her to either meditate or play the guitar for 10 minutes, which I think is another way of meditation #thread 👇
She told me that sometimes she didn't do that, but lately, she was told to go do that by @emecibelli.
This is an example of great leadership IMHO.
A lot of times, managers push people to work nonstop not realizing that by doing that, they're making people be... 👇
... slower because they're not aware what their direct report really need to work better, happier and faster.
As leaders, we all need to listen and understands much more the people that work with us, because after all, a company is not more than a sum of people :).
Read 3 tweets
Profile picture
Alyssa Harad
@alyssaharad
Hey, hi, I just had a little convo about #metoo with my mom and she started to make those all too familiar "but what if the accusations are false" sounds. Here's what I said in case it's useful for anyone.
1) It may seem like men are being felled with a single story. This is almost certainly not the case. Repercussions are only swift because there have been years of ignored complaints, accusations and whispers and institutions know they can't keep up the front anymore.
2) There is no benefit in coming forward with a story about being harassed or abused. None. In most cases it's the exact opposite--women are targeted and harassed.
Read 7 tweets
Profile picture
Yorick de Mombynes
@ydemombynes
Here are my favorite quotes from this amazing book. #THREAD
1. "Bitcoin can be best understood as distributed software that allows for transfer of value using a currency protected from unexpected inflation without relying on trusted third parties"
2. "While Bitcoin is a new invention of the digital age, the problems it purports to solve - namely, providing a form of money that is under the full command of its owner and likely to hold its value in the long run - are as old as human society itself"
Read 137 tweets

Trending hashtags

#Eolien #Election2016 #StopLeavingNeverlandNOW #blogging #JusticeforMJ #Russians #PTM #JNU #manif #FalseAccusers #barbouzeries #Hindu #blockchain #LeavingNeverland #2020election #Hayek #RamNavami #BFM #TrumpRussia #harcèlement #StayTuned #HopeNotHate #BrandMarketing #ArcDeTriomphe #ksleg
Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!