Speed up page loads with Early Hints in Chrome 103! bit.ly/chrome-eh ⚡️ Send hints about critical resources/origins in advance, while the server generates HTML. More on our experiments w/

@Cloudflare

@Shopify

improving LCP bit.ly/cloudflare-eh bit.ly/shpfy-eh

Image shows a WebPageTest filmstrip. The top row shows a page with a largest contentful paint of 2.9 seconds. The below row shows a page with a largest contentful paint of 1.8 seconds with text and images loading/rendering faster.

read image description

ALT

102

378

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!

youtube.com

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...

144

793

2,718

I love it! I’ve followed your steps about 10years. This is the domain I’ve be waiting for a long time. I’ve been a leader for a while, it’s always be difficult to help the team grow, getlighthouse.com help me to do it better. Now I’m looking forward

Quote Tweet

I'm starting a new series of articles on @TheLeadDev about engineering management & leadership. First post: setting a vision, mission & strategy: bit.ly/visionmstr

A vision or mission statement helps provide direction to team members so that they always know the right way forward. A comprehensive mission statement will also include strategies that help achieve the stated mission.

My first experience at putting together a vision statement wasn’t easy. I knew where we wanted to take our organization, but I couldn’t find a way to crystallize it in one sentence. ‘Can’t I just use an emoji to capture the right nuance?’, I wondered. But the truth is, a vision statement doesn’t need to.

Here’s an analogy that can help. Consider you’re taking your team on a trip. Your vision is the final destination (the what). It’s where you’re excited to take everyone. Your mission is the itinerary for how you're going to get there (the how). Your core values are how you’d like everyone to act on the trip (e.g., considerate, punctual.). Finally, your strategies are the steps and actions you’ll take to accomplish each part of the itinerary and reach your destination.

read image description

ALT

A good list of skills senior engineers need, beyond coding by

@skamille

: bit.ly/srenglist

For varying levels of seniority, from senior, to staff, and beyond.
How to run a meeting, and no, being the person who talks the most in the meeting is not the same thing as running it
How to write a design doc, take feedback, and drive it to resolution, in a reasonable period of time
How to mentor an early-career teammate, a mid-career engineer, a new manager who needs technical advice
How to indulge a senior manager who wants to talk about technical stuff that they don’t really understand, without rolling your eyes or making them feel stupid
How to explain a technical concept behind closed doors to a senior person too embarrassed to openly admit that they don’t understand it
How to influence another team to use your solution instead of writing their own
How to get another engineer to do something for you by asking for help in a way that makes them feel appreciated

read image description

ALT

177

697

unbug

@unbug

Mar 14

👍

Quote Tweet

Addy Osmani

@addyosmani

Mar 13

Rendering on the web is a spectrum. Static HTML? SSR? Streaming? Here we cover options & trade-offs: bit.ly/renderingp & bit.ly/rendering-web

As developers, we are often faced with decisions that will affect the entire architecture of our applications. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be a difficult, since there are a number of different ways to build a website. In this image, we show a table of the options which you can check out at the full links.

Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we would encourage developers to consider server rendering or static rendering over a full rehydration approach.

In order to better understand the architectures we’re choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.

read image description

ALT

unbug

@unbug

Feb 25

聚众编程（Mob Programming，一堆人交替写同一份代码）的完全实现了 Code Review和协同编程没实现的目标：1. 分享知识 2. 分担责任 3. 改善代码结构 4. 学习且收获 5. 团队磨合期短 6. 零等待 7. 即时讨论并解决问题 8. 几乎没有代码冲突 via

@svatasimara

link.medium.com

Don’t do Code Review, try Mob instead

Code review is quite common practice, and for many years I thought it is great, but hen I experienced mob programming.

unbug

@unbug

Feb 25

辞掉工作前的四条建议：1. 已经拿到新的 offer 2. 副业赚的比工资多 3. 创业已经有了核心竞争力 4. 有5万粉丝

@inPlainEngHQ

javascript.plainenglish.io

I Met a Rich Programmer, He Gave Me 3 Life-Changing Pieces of Advice

#2 Never quit your Job

The Core Web Vitals metrics will shortly also apply to desktop ranking in Google Search. Tools like PageSpeed Insights & Search Console can already help you find areas to improve on desktop using field data.

Quote Tweet

Google Search Central

@googlesearchc

Feb 22

The page experience update is now slowly rolling out for desktop. It will be complete by the end of March 2022. Learn more about the update: developers.google.com/search/blog/20

Show this thread

169

unbug

@unbug

Feb 21

我的开源 LICENSE（SAY NO TO SUICIDE PUBLIC LICENSE）最近遇到了麻烦：有个德国开发者在实操过程遇到困境，提出很多关于法律、哲学、语法等的问题和思考，我有点不知所措，哪位社区达人帮一起看看如何优化这个 LICENSE

github.com

GNU/Debian/Redhat won't consider this license as non-free · Issue #5 · unbug/snts

Due to there is no universally accepted definition of good and evil, JSON is a non-free license for GNU/Debian/Redhat. But Suicide is defined. So SNTS is free for everyone.

*Must read* for web developers: how modern browsers work by

@kosamari

1️⃣ bit.ly/browsers-pt1 2️⃣ bit.ly/browsers-pt2 3️⃣ bit.ly/browsers-pt3 4️⃣ bit.ly/browsers-pt4 and browser.engineering by

@BrowserBook

A website usually uses external resources like images, CSS, and JavaScript. Those files need to be loaded from network or cache. The main thread could request them one by one as they find them while parsing to build a DOM, but in order to speed up, "preload scanner" is run concurrently. If there are things like <img> or <link> in the HTML document, preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process.

read image description

ALT

1,254

4,281

unbug

@unbug

Jan 24

Do you remember when you joined Twitter? I do! #MyTwitterAnniversary

Accessibility tip: DevTools can suggest & apply more accessible colors for low color contrast text. Keep finding this helpful.

0:11

32.6K views

183

851

flowarts.xyz #threejs #react

0:34

27.6K views

169

1,342

unbug

@unbug

Dec 31, 2021

"70 JavaScript Interview Questions" by Mark A #DEVCommunity

dev.to

70 JavaScript Interview Questions

Hi Guys Good Day and a Happy New Year

! This is a long one, so bear with me for a...

unbug

@unbug

Dec 29, 2021

"Frontend Developer Resources 2022" by

@nickytonline

#DEVCommunity

dev.to

Frontend Developer Resources 2022

I don't know if I'll keep doing this every year, but I did one of these in 2020, and that post got...

unbug

@unbug

Dec 29, 2021

Best of the year! Highly recommend!

Quote Tweet

Addy Osmani

@addyosmani

Dec 20, 2021

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

Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

We publish patterns, tips and tricks for improving how you architect apps for free. Keep in mind, design patterns are descriptive, not prescriptive. They can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. Patterns.dev aims to be a catalog of patterns (for increasing awareness) rather than a checklist (what you must do).

read image description

ALT

unbug

@unbug

Dec 22, 2021

column.hongliangjie.com/%E8%AF%BB%E4%B

unbug

@unbug

Dec 21, 2021

Opinion: The unspoken truth about managing geeks

computerworld.com

Opinion: The unspoken truth about managing geeks

The stereotypes that lump IT professionals together are misguided. It's actually the conditions that surround the IT pros that are stereotypical, and the geeks are just reacting to those conditions...

unbug

@unbug

Dec 20, 2021

Chaos Engineering: the history, principles, and practice

gremlin.com

Chaos Engineering: the history, principles, and practice

Learn the history behind Chaos Engineering, how to apply it, and how it helps improve reliability.

unbug

@unbug

Dec 17, 2021

生物链的 Google Earth

Quote Tweet

OneZoom

@OneZoomTree

Dec 14, 2021

Announcing the publication of ‘Dynamic visualisation of million-tip trees: The OneZoom project’

out today

in @MethodsEcolEvol by @DrYanWong & @JRosindell with #OneZoom 3.5 ‘choc chip starfish’

Follow the thread

for cool stuff you can do doi.org/10.1111/2041-2

Show this thread

unbug

@unbug

Dec 14, 2021

How to Start a Startup

youtube.com

How to Start a Startup

Before there was YC, there was YC. Learn how to start a startup with this lecture series from Paul Graham, Sam Altman and the early YC founders and team.

Check this out!

Web3 — Solving trust issues using math by GillesDC.com

A 101 explainer of the next Internet. How blockchains reinvent society.

Third-party JavaScript can have a heavy impact on page load performance. *When* you load such scripts can make a big difference (e.g. during idle time vs. asap) To help, we built a Script Component for Next.js: bit.ly/nextscript. Any feedback on it is welcome.

The Next.js Script component, next/script, is an extension of the HTML <script> element. It enables developers to set the loading priority of third-party scripts anywhere in their application without needing to append directly to next/head, saving developer time while improving loading performance.

There are three different loading strategies that can be used:

beforeInteractive: Load before the page is interactive
afterInteractive: (default): Load immediately after the page becomes interactive
lazyOnload: Load during idle time

Scripts that load with the beforeInteractive strategy are injected into the initial HTML from the server and run before self-bundled JavaScript is executed. This strategy should be used for any critical scripts that need to be fetched and executed before the page is interactive.

Scripts that use the afterInteractive strategy are injected client-side and will run after Next.js hydrates the page.

read image description

ALT

212

1,123

Do you sometimes feel overwhelmed at work? Here are good coping strategies I've found helpful bit.ly/10strato by Chrome's

@alexainslie

10 strategies for when you’re feeling overwhelmed at work

1. Replace “need” with “choose”
2. Set down all of your bricks
3. Throw postponable bricks forward
4. Leave unimportant bricks behind
5. Pass bricks to other people
6. Give bricks to other people
7. Zoom in and focus on just one brick
8. Zoom out + forget about the bricks
9. Share your bricklaying plan
10. Ask for help

read image description

ALT

206

unbug

@unbug

Dec 3, 2021

Coding Interview with Dan Abramov

youtube.com

Coding Interview with Dan Abramov

#benawad #react ----Follow me online: https://voidpet.com/benawad#benawad

Introducing the new PageSpeed Insights: a more intuitive way to measure performance & improve it using real-world and lab data. Details: bit.ly/new-psi Try it: pagespeed.web.dev

0:58

26K views

300

873

Want to build trust in your teams? I'm a fan of the "Braving" model by Brené Brown: don't overcommit, follow through, approach discussions with a humble curiosity mindset and be accountable.

In her book Dare to Lead, Brene Brown focuses on vulnerability-based trust, getting past fear to speak your truth.

She uses Braving, a mnemonic that stands for:

Boundaries – Don’t overcommit. It’s okay to say “no.”
Reliability – Do what you say you’ll do, follow through
Accountability – Take ownership and avoid blaming others
Vault – only share what’s yours to share
Integrity – have open, honest conversations
Nonjudgment – be humble and ask others for help, respect that others have something to offer
Generosity – assume best intentions

read image description

ALT

231

1,064