⚡ Announcing Angular DevTools, a new way to debug your apps ⚡️

Install now to:
‣ Visualize the structure of your apps 🗺
‣ Explore, inspect & edit components 🔍
‣ Profile performance 📊

👩🏾‍💻 Read more → https://t.co/nDWjfppR8y
🚀 Install here → https://t.co/ciBn3sXUOw pic.twitter.com/uYblKWplMy

— Angular (@angular) May 18, 2021

The tooling for CSS is getting better 🔥

Check the new flexbox debugging tool in @ChromeDevTools:
‣ Find "flex" badge on elements with display flex
‣ Experiment with settings using a visual editor

Learn more in this post by @JecelynYeen https://t.co/bXp9HY7xPl pic.twitter.com/WXelVdzEOh

— Minko Gechev (@mgechev) May 17, 2021

Google Domains uses Angular Material's Stepper to help you get online faster!

⚡ https://t.co/2yOPXIbDPc⚡️ pic.twitter.com/3aVthsWI7H

— Angular (@angular) May 10, 2021

Prototype using CSS only!
Thanks to:
✅ @ scroll-timeline
✅ @ property

Try it in Canary with the flag #enable-experimental-web-platform-features enabled

👇🏻 https://t.co/THNBzapWdh https://t.co/P7mkd9ia0v

— Adam Argyle (@argyleink) May 7, 2021

In Angular we've been always working on making best practices part of the core developer journey. Example is the CDK where we provide utilities to help you build accessible apps ✨

We've been looking into making the path even more complete and straightforward in the future pic.twitter.com/0sZDYZei3x

— Minko Gechev (@mgechev) May 7, 2021

You can use the :empty pseudo-class selector to match elements with no children 🌳

Children can be either elements or text nodes pic.twitter.com/tPlTSbXUjM

— Minko Gechev (@mgechev) May 3, 2021

Understanding fundamental data structures can make a massive difference in the performance of your apps

For example, sets provide a fast element look-up to verify if an element belongs to the collection. For frequent existence checks, use set.has instead of array.includes pic.twitter.com/2EVfQ1SolA

— Minko Gechev (@mgechev) April 28, 2021

JavaScript tip: quick snippets for array generation ✨ pic.twitter.com/XSUD69GYY6

— Minko Gechev (@mgechev) April 26, 2021

Hello, Angular!

Everything you need to get started with @angular is now live on MDN.

We look at what Angular has to offer, install the prerequisites and set up a sample app, and look at Angular's basic architecture. 📖 👩🏾‍💻 https://t.co/9uc11G5RUB

— MDN Web Docs (@MozDevNet) April 22, 2021

Just discovered a CSS selector I had no idea existed 🤯

:in-range and :out-of-range allow you to select an input whose value is within/outside the min and max attributes 🔥 pic.twitter.com/o9NOpkIsoO

— Minko Gechev (@mgechev) April 21, 2021

JavaScript tip: based on the user connection we may want to perform more or less aggressive network operations (e.g. prefetching)

NetworkInformation API provides:
- Estimated effective bandwidth
- Connection type pic.twitter.com/i8n4fpbsdY

— Minko Gechev (@mgechev) April 13, 2021

We've added a whole section on #RxJS with awesome interactive diagrams! Check it out here https://t.co/3FkiTd0T4Z. We also very welcome your contributions in the form of suggestions, corrections or additions through PRs or discussions on GitHub https://t.co/33eytenlqe pic.twitter.com/BkM4pg6W0l

— inDepth Dev (@indepth_dev) April 7, 2021

Going Beyond `console.log()` to Level Up Your Debugging Skills: https://t.co/ImnF8vhdPD

— JavaScript Daily (@JavaScriptDaily) April 1, 2021

JavaScript tip: you can use negative indices on Arrays, Strings, and TypedArrays with "at" ✨

In case you miss this Python feature in JavaScript..., well, it's already at Stage 3 🚀

Example 👉🏻 https://t.co/JpBfmyipa1 pic.twitter.com/7VqRE7YrtX

— Minko Gechev (@mgechev) March 9, 2021

Curious about the internals of Ivy? 🌿 👀@mhevery explains all the details in our latest blog post ↓https://t.co/0cf951ywqv

— Angular (@angular) March 3, 2021

JavaScript tip: Promise.race allow you to race promises 🏎💨

The returned promise will settle when the first promise from the array passed as an argument gets either resolved or rejected. pic.twitter.com/OdRBziSksC

— Minko Gechev (@mgechev) March 3, 2021

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. pic.twitter.com/tZDlwLRx3G

— Addy Osmani (@addyosmani) February 27, 2021

I don't know who needs to hear this, but...

run `npx npkill` and get back those GBs of space on your computer (I just freed up 8GB) 💜

— Jason Lengstorf a.k.a. smooshburgerboy (@jlengstorf) February 24, 2021

C# p/invoke is finally easy, accurate, and carries no dependencies! 🎉 Similar good news for Rust, modern C++, and other languages. https://t.co/zGtkrNbsZS

— Andrew Arnott (@aarnott) January 21, 2021

Tooling tip: you can quickly check if an npm module is tree-shakable using `is-esm`

The utility checks if a package contains a distribution with ECMAScript modules and outputs "✅ Yes" or "❌ No" ✨ pic.twitter.com/4R1atlIyUo

— Minko Gechev (@mgechev) January 18, 2021

Cookie banners are annoying, so we removed them from GitHub: https://t.co/JpqdjI3P1c

— Nat Friedman (@natfriedman) December 17, 2020

You can use *only* CSS to create resizable elements! Just set "resize: both" and you'd enable vertical and horizontal resizing in a single line 🚀

Additionally, you can constraint the min and max size using: min/max-width/height, or enable only horizontal or vertical resizing 🔥 pic.twitter.com/Jml8okYBY8

— Minko Gechev (@mgechev) November 30, 2020

Tooling tip: one of the simplest profiling techniques to ensure your app is not leaking memory is using the DevTools memory usage panel. If it's is constantly growing, you may need to explore the heap snapshot

⚠️ Use incognito since browser extensions could skew the results pic.twitter.com/CDTwGjgSqK

— Minko Gechev (@mgechev) November 26, 2020

I've waited for this day for a long time - :is() and :where() selectors now shipping in Chrome Canary, hopefully many other browsers to follow shortly! #css pic.twitter.com/oW4qy0DUqR

— Tommy Hodgins (@innovati) November 25, 2020

"I'm a Promise, I swear." pic.twitter.com/4J3Izd0IKT

— Jay Phelps (@_jayphelps) November 23, 2020

let's build a mini insta-friends scrollable layout in CSS!

Stumble along with me on YouTube!

bonus:
radial gradient border effect solved with 3 layered gradients in one background 🤓

👨🏽‍💻 https://t.co/xI59V6gKtE
⌨️ https://t.co/599ORVAwwm pic.twitter.com/jGDcnvg5wX

— Adam Argyle (@argyleink) October 24, 2020

How to make your Angular applications faster? (Wrong answers only

— ng-zorro-antd (@ng_zorro) October 20, 2020

How slick :is(this CSS!?) 😏
removes the margins on all headers with a `.tight` class

h1.tight, h2.tight....... 🤢
:is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA

— Adam Argyle (@argyleink) October 13, 2020

JavaScript's Event Loop And Call Stack Explained: https://t.co/h1rfIuMk7f

— JavaScript Daily (@JavaScriptDaily) October 11, 2020

https://t.co/MzT4WAvGOJ - A purely browser-based privacy-first video tool capable of performing tasks like converting, compression, etc. without uploading your files using #WebAssembly. pic.twitter.com/cUKmT8OeoS

— Jon Galloway (@jongalloway) September 26, 2020

https://t.co/XD9mq4tXd6

— Smakosh (@smakosh) September 22, 2020

#JavaScript tip for today:

When trying out selectors in the console:
😒 instead of a lengthy `document.querySelectorAll`
😎 use `$$`

(will work in both Chrome and Firefox btw) pic.twitter.com/IHShnzM1zo

— Tomek Sułkowski (@sulco) September 14, 2020

Another use of @TypeScript 4.1's template literal types: extracting the URL parameters from an express route. Pretty amazing you can do this in the type system! https://t.co/gfZQy70whg pic.twitter.com/aEyfMwjjqX

— Dan Vanderkam (@danvdk) September 4, 2020

Great account from @Shopify on how they made 4x (!!) improvements to their backend's TTFB https://t.co/Tg12cdsNcw, resulting in at least one store seeing 15% revenue increase!! https://t.co/maN0254xdR

— Yoav Weiss (@yoavweiss) September 1, 2020

#JavaScript tip for today:

`JSON.parse` takes an optional second argument – a function that defines transformation on the resulting object before it's returned. pic.twitter.com/WT3gq3a43a

— Tomek Sułkowski (@sulco) August 31, 2020

Deno Built-in Tools: An Overview and Usage Guide - https://t.co/eO4mEQDyIJ

— JavaScript Daily (@JavaScriptDaily) August 31, 2020

I love the new https://t.co/q95fddyzMI book - not only it teaches you AI in a quite novel way, the paper it is printed on is glorious and printed in full color. Just like “cooking for geeks” changed my life, this one did too. This is a book worth owning in paper: pic.twitter.com/M8ou58wF18

— Miguel de Icaza 💉💉 🎉 (@migueldeicaza) August 28, 2020

I wanted to create a quick demo that shows images loading slowly. Turns out service worker + streams makes this really easy! pic.twitter.com/2ZqpFVSjjI

— Jake Archibald (@jaffathecake) August 28, 2020

And rebase.autosquash true!

— Keith Dahlby (@dahlbyk) August 26, 2020

And while you're at it, `git config --global pull.rebase true`

— Greg MacLellan (@groogs) August 26, 2020

`git config rebase.autostash true` should be enabled by default.

— Keith Dahlby (@dahlbyk) August 26, 2020

AVIF is an image format that compresses to a smaller size than WebP or JPEG https://t.co/MDDdL8tw8S It's in Chrome 85, behind a flag in Firefox & can be a progressive enhancement! pic.twitter.com/jqADQK6jTd

— Addy Osmani (@addyosmani) August 23, 2020

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. pic.twitter.com/VyjGNXJlcS

— Jake Archibald (@jaffathecake) August 20, 2020

CSS variables pic.twitter.com/Is9ZhITWrs

— 🔎Julia Evans🔍 (@b0rk) August 16, 2020

#CSS tip for today:

`:focus-within` pseudoclass allows to style element that contains a focused element.

You can use it to e.g. put more emphasis on a fieldset the user is filling at a certain moment. pic.twitter.com/BN0UefmZWD

— Tomek Sułkowski (@sulco) August 3, 2020

⚠️ CSS gotcha ⚠️
The "viewport" IS NOT the device screen

This is contrary to how we generally talk about the viewport, which is why this is a gotcha.

CSS viewport units are relative, not absolute. This is why `vh` units can surprise you or even change after scroll. pic.twitter.com/ysyab4i7qL

— Adam Argyle (@argyleink) July 27, 2020

A Gentle Introduction to Webpack: https://t.co/J9ByXIrBpi

— JavaScript Daily (@JavaScriptDaily) July 27, 2020

Just succeeded in creating my own External tool in #powerbi desktop😎 - click to open the current pbix model as a connection in Excel - perhaps a blogpost worthy ? 🤔 pic.twitter.com/SuKZOItAOi

— Erik Svensen (@donsvensen) July 26, 2020

feelin like a blob?
feel like makin a blob?https://t.co/n7Zxtf2WP3 pic.twitter.com/gzzTegl5WQ

— Adam Argyle (@argyleink) July 25, 2020

Native <iframe> lazy-loading is coming to the web! https://t.co/ghXKPRTktM <iframe loading=lazy> defers loading offscreen iframes until a user scrolls near them.

Now in the HTML standard & supported in Chrome. pic.twitter.com/y4dXo6gwY4

— Addy Osmani (@addyosmani) July 24, 2020

"The Houdini Properties and Values API is coming to your CSS file in Chromium 85@property: giving superpowers to CSS variables" by @Una

📃 https://t.co/SphRaAyBR6 pic.twitter.com/0TCA6jzZAy

— Adam Argyle (@argyleink) July 22, 2020

Exactly - it is those tiny things that add up. I am trying to document these on twitter as I find them. Also ⌘I on Finder and Photos is a favorite of mine.

— Miguel de Icaza 💉💉 🎉 (@migueldeicaza) July 21, 2020

inline vs block pic.twitter.com/acvb0XTedG

— 🔎Julia Evans🔍 (@b0rk) July 18, 2020

1ms is better than 0s 🤓

"transitionend" and "animationend" events will fire as expected, essentially leaving the rest of your app UI orchestration logic to continue assuming it's animating when state changes. Change it to 0, and no events fire since nothing changed. pic.twitter.com/eWPJARlYel

— Adam Argyle (@argyleink) July 16, 2020

This landing page design is the VC Patagonia Vest of startups pic.twitter.com/CyyH1n3xyo

— Annabel Strauss (@annabelstrauss) July 14, 2020

CSS conic-gradient borders 🤘💀https://t.co/O74zGKaA04 pic.twitter.com/vLY17n2BGp

— Adam Argyle (@argyleink) July 14, 2020

Do you have a set of console commands that you repeat often? You don't have to go through console history for that!

You can execute snippets in the command menu (Cmd+P or CTRL+P) with ! as prefix. pic.twitter.com/jI51NX4NFW

— Chrome DevTools (@ChromeDevTools) July 14, 2020

This is great; btw check out https://t.co/8fJLVsRAhY too by @colebemis.

— Sakib (@Slctvdplcate) July 12, 2020

550+ free customizable SVG icons that are open-source: https://t.co/J3TBOFVQQK - an awesome collection by @csaba_kissi & @Ildiesign pic.twitter.com/qib6Z35Bel

— Addy Osmani (@addyosmani) July 12, 2020

Use animations? The @ChromeDevTools now has a refreshed frame rate meter. This provides better real-time estimates for page smoothness. pic.twitter.com/1SPq45Fyxf

— Addy Osmani (@addyosmani) July 10, 2020

The Link to Text Fragment extension has gained a new trick: you can now use a keyboard shortcut ⌨️ (Cmd/Ctrl+Shift+L by default): https://t.co/A1WGHGfady.
🤫 It also works on @firefox and Safari 14 @webkit (install locally from https://t.co/EAlx7yq84E, pending store approvals).

— Thomas Steiner (@tomayac) July 3, 2020

Ok so did you guys know this????@github @GitHubCommunity #100DaysOfCode #CodeNewbie pic.twitter.com/WzsXLihyxy

— Chandrika Deb (@chandrikadeb7) July 3, 2020

Thanks for all the great questions during #webdevLIVE 😁

➡️ Check out https://t.co/e4KBCOD89I (built for this talk!)

for some modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of code can be!

Video is coming soon 📽️ pic.twitter.com/9R9cUKOYzW

— Una Kravets 👩🏻‍💻 (@Una) July 2, 2020

To programmatically detect whether the current browser supports a CSS declaration, `CSS.supports(property, value)` works well.

But how can you check if the browser supports a given media query, regardless of whether the query currently matches?

Elegant solution by Oriol Brufau: pic.twitter.com/gbNQopZrue

— Mathias Bynens (@mathias) July 1, 2020

this is rad 👍 https://t.co/99JwlanS28

— Adam Argyle (@argyleink) June 30, 2020

Spotted in #WWDC20 Fruta app that we can add @ViewBuilder to body in #SwiftUI to be able to conditionally return different views. I was using Group for it before. Adding @ViewBuilder also works in Xcode 11 for iOS 13 😯 pic.twitter.com/Bouvc5IlTi

— Natalia Panferova (@natpanferova) June 29, 2020

Love this site https://t.co/e9hwVdpgTP pic.twitter.com/VUIhEz5fEd

— Adam Argyle (@argyleink) June 26, 2020

#lintHTMLwithCSS

this selector hunts for links that might be used for phishing

h/t https://t.co/NmqN7iXluX && @mathias via https://t.co/3Yz8qWH8F7 pic.twitter.com/23Cc0KNRNw

— Adam Argyle (@argyleink) June 26, 2020

Tiny alternative to React. Bonus- not by Facebook https://t.co/cVadI4WgC3

— Miguel de Icaza 💉💉 🎉 (@migueldeicaza) June 25, 2020

#lintHTMLwithCSS

this selector hunts for <div>'s inside of inline elements like a <span> pic.twitter.com/nFwKOorK1s

— Adam Argyle (@argyleink) June 24, 2020

#lintHTMLwithCSS

this selector hunts for forbidden nesting pic.twitter.com/wd5i89S4ep

— Adam Argyle (@argyleink) June 23, 2020

TIL CSS "background-repeat: round" https://t.co/sS9H9HmqQ6 ~ repeats background images without clipping ✂️ pic.twitter.com/R4rzDJ36R9

— Addy Osmani (@addyosmani) June 23, 2020

💡 If you have text overlapping an image, to improve readability, reduce the image brightness when dark mode is active (e.g., using CSS filters).#codyhousenugget pic.twitter.com/tmUeDoUEz2

— CodyHouse (@CodyWebHouse) June 22, 2020

#lintHTMLwithCSS

this selector hunts for elements with a tabindex other than 0 or -1

why?
values other than 0 or -1 can steal or disrupt natural tab order and is generally something to avoid pic.twitter.com/jozk5aufc0

— Adam Argyle (@argyleink) June 22, 2020

#lintHTMLwithCSS

this selector hunts for lists that have something other than an <li> inside pic.twitter.com/J6leEiXRV4

— Adam Argyle (@argyleink) June 21, 2020

#lintHTMLwithCSS

this selector hunts for links that have:
- no href
- an empty href
- a "#" href (button perhaps?) pic.twitter.com/C5j6p6riNe

— Adam Argyle (@argyleink) June 20, 2020

Mystery Solved! pic.twitter.com/bRGuhnvKKx

— Marko ⚡ Denic (@denicmarko) June 13, 2020

Tip: Use curly braces in the command-line to quickly create multiple related files with less typing. pic.twitter.com/5ZEu94lv0e

— Addy Osmani (@addyosmani) May 27, 2020

#DevTools Tip ⚡️ Copy and extract all the CSS for an element on the page

Right click element > Copy > Copy Styles

Useful as styles can often be scattered across many selectors! ⭐️ pic.twitter.com/YHmdxoj9fh

— Umar Hansa (@umaar) May 21, 2020

Don't skip over Azure Static Web Apps. It's like GitHub Pages on steroids. You push your content to GitHub and it'll handle ssl, wiring up web APIs (az functions!), serve up static content, and even handle auth (AAD, FB, G, TWIT, etc.) for you. Crazy!https://t.co/wVyPP5oYbQ

— Rafael Rivera (@WithinRafael) May 19, 2020

url.searchParams is so nice for getting/setting query string params. pic.twitter.com/2QYVGwdlT2

— Addy Osmani (@addyosmani) May 17, 2020

Use 'measureTimedValue' to measure how much time a given piece of code runs for AND get its result. #KotlinTips pic.twitter.com/T3mSHe2FI1

— Kotlin (@kotlin) May 14, 2020

JavaScript Tip ⚡️ You can smooth scroll to an element with zero dependencies:

el.scrollIntoView({
behavior: 'smooth'
}) pic.twitter.com/D1HZCZit3w

— Umar Hansa (@umaar) May 13, 2020

Ever wished that you had a better way to re-use portions of your formula for easier consumption?

LET your new best friend help. 😉 https://t.co/qAUut9GvKb #FormulaFriday

— Microsoft Excel (@msexcel) May 1, 2020

Tip: You can automatically open @ChromeDevTools in each new tab! Just pass the `--auto-open-devtools-for-tabs` command-line flag to Chrome. pic.twitter.com/nXYHhLp9Mh

— Addy Osmani (@addyosmani) May 1, 2020

💡 In source code, stop using the old rgb()/hsl() CSS color syntax with commas.

Get used to the modern comma-free CSS color syntax, supported in all modern browsers.

Why? Upcoming new features such as lab(), lch(), and color() use the same syntax (and don’t work with commas). pic.twitter.com/CNVm1PeA7u

— Mathias Bynens (@mathias) April 23, 2020

This has been bouncing around in my head all day now. Highly worth your 10 minutes.

Why smart companies become stupid: the Preventable Problem Paradox https://t.co/HQ38mV1S99

— Titus Winters (@TitusWinters) April 13, 2020

A full free Stanford course on Web Security: https://t.co/KESo3K0klS by @feross

🍪 HTTP(S), Cookies, Sessions
🛡Same Origin Policy
👿 Cross-Site Scripting (XSS)
☠️ Cross-Site Script Inclusion
🔑 WebAuthn
and more. pic.twitter.com/vQbRqIFozj

— Addy Osmani (@addyosmani) March 29, 2020

Tip: You can abort Fetch API requests with AbortController. https://t.co/Q9ayhT0YBT by @jaffathecake covers it well. Glad browser support improved! https://t.co/DBKN5tQjir pic.twitter.com/dYdms7OSGf

— Addy Osmani (@addyosmani) March 12, 2020

Good post on how Facebook rebuilt Messenger from the ground up: https://t.co/BaVJRtU864

— Miguel de Icaza 💉💉 🎉 (@migueldeicaza) March 3, 2020

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: https://t.co/HdA7ooNzx5 ✅ pic.twitter.com/T7X5r7MKWz

— Addy Osmani (@addyosmani) March 1, 2020

Native JavaScript module scripts are deferred by default. This means the download for the main module can happen in parallel with HTML parsing!

Learn all about native JS modules: https://t.co/TFpejwPMeN from @mathias and I pic.twitter.com/6d36OuD8BG

— Addy Osmani (@addyosmani) February 28, 2020

My personal favorite #Angular feature for each release:
🅰️ v2: Lazy Loading
🅰️ v4: Smaller Bundles
🅰️ v5: SSR
🅰️ v6: Tree-shakeable Services
🅰️ v7: CLI Prompts
🅰️ v8: Differential Loading
🅰️ v9: AOT by default

What's yours?

— Wassim Chegham 🌱 (@manekinekko) February 16, 2020

Tip: @ChromeDevTools has a Shadow Editor built in! pic.twitter.com/NptZeGQWTy

— Addy Osmani (@addyosmani) January 29, 2020

Breadth-first search visualization (by /u/pedrovhb) pic.twitter.com/JJuXgDmUAP

— Addy Osmani (@addyosmani) January 27, 2020

Q: Why's our page's Time-to-Interactive high? 🤔
A: It's often Long (JavaScript) Tasks keeping the main thread busy ⏳@ChromeDevTools visualizes Long Tasks, making it easier to see what to optimize: https://t.co/vynX5GBQd0 pic.twitter.com/BpCwFTaap2

— Addy Osmani (@addyosmani) January 24, 2020

There are 370 million(!) registered domains.

That works out to 1 for every ~20 people (though I doubt that they are evenly distributed).

All the domain name stats you could ever want: https://t.co/hggARedKtN

— Katie Hempenius (@katiehempenius) December 16, 2019

Looking to show off some code samples in a presentation or tweet? Make your code beautiful with this neat app from @dawn_labs: https://t.co/Zw8ll1sb4v pic.twitter.com/JEB3Iz3YMU

— GitHub (@github) February 3, 2018