#devsheets search results

Sometimes it's the tiny things. 💪 ✨ Firefox is the first browser shipping `URL.canParse`, and it's so much better than try/catching valid URLs. 😅 #devsheets

.@babeljs shipped support for duplicate named capture groups and since the last DevSheet has been a while, here's a quick named capture groups explainer. 🙈 #devsheets Video alt: Explanation of the named capture group syntax `(?<name>.*)`.

💡 TIL – there's a new global JavaScript method to report exceptions to global error handlers. If you're knee deep in your call stack you can handle exception so that things don't blow up, but also trigger global event handlers for e.g. error monitoring. 🎉 #devsheets

Can you tell me more about devsheets? seems there's none at #devsheets on twitter.

So, who's adopting the fancy `inset` logical CSS properties? #devsheets Video alt: Explanation of `inset-block` and `inset-inline` showing that they translate to `top`, `right`, `bottom` and `left`, but depend on `writing-mode`, `direction` and `text-orientation`.

🎉 Input type `datetime-local` support is coming to Firefox 93. 🎉 🔗 MDN docs: developer.mozilla.org/en-US/docs/Web… #devsheets

Quick morning DevSheet – forgiving selector lists in CSS. 🙈 🔗 Spec: drafts.csswg.org/selectors-4/#f… #devsheets Video alt: Browsers invalidate a complete CSS selector if they fail to parse it. :is()/:where() don't invalidate bc. they take forgiving selector lists as argument.

Today I learned that you can control if SVG stroke-width should scale with applied transformations using `vector-effect`. 😲 #devsheets 🔗 stefanjudis.com/today-i-learne… Video alt: Example showing scaled stroke width that's turned of by using vector-effect.

Quick evening devsheet. 🙈 `accent-color` will enable us to have style-matching checkboxes and radios. 👏 🔗 Spec: drafts.csswg.org/css-ui-4/#widg… 🔗 CodePen example: codepen.io/stefanjudis/pe… #devsheets Video alt: A purple coloured radio and checkbox input.

🙈 I just learned that you can use `text-align: start` and `text-align: end` to align text with language text direction in mind. #devsheets Video alt: Example showing how `text-align: start` and `text-align: end` adjust alignments correctly for RTL languages.

Quick Sunday DevSheet. 🙈 With Chromium v91 `@​counter-style` slowly enters the stage. Soon you can go wild with another option to create custom list styles. #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web… 🔗 Spec: drafts.csswg.org/css-counter-st… 🔗 Chrome status: chromestatus.com/feature/569269…

TIL – `repeating` gradient #css functions exist. 😲 🔗 stefanjudis.com/today-i-learne… #devsheets

I just learned that quotes can be localised via CSS. 😲 Big thanks to @lonekorean for including that in an article. 🙇‍♂️ 🔗 codersblock.com/blog/diving-in… #devsheets

I just updated Chrome and it now supports complex selectors in CSS `:not()` pseudo-classes. 😲 That means stuff like this is now possible. 👇 #devsheets Works in Chrome 88, Safari and Firefox. 🎉 ✍️ Article and live example: stefanjudis.com/snippets/how-t…

🎉 Starting with @firefox 85 we can say goodbye to :-moz-focusring and say hello to :focus-visible. 🎉 MDN: developer.mozilla.org/en-US/docs/Web… #devsheets Video alt: Explanation showing that focus styles can be hidden for click interactions but be visible for keyboards.

Little evening devsheet. 🙈 Order matters in CSS transformations. Blog post: stefanjudis.com/blog/order-in-… #devsheets How transforms are applied when using functions and properties. 👇

CSS filter functions in a nutshell. 🙈 #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web…

☕ Little Monday devsheet. `place-items` in CSS grid. #devsheets Link Symbol MDN: developer.mozilla.org/en-US/docs/Web… Video alt: Visualisation of the place-items CSS property and how it can be used to center elements in grid containers. (there was a mistake in the previous one... 🙈)

☕ Little morning devsheet. min-content, max-content and fit-content in CSS. :) 🔗 @css : css-tricks.com/almanac/proper… 🔗 Spec: drafts.csswg.org/css-sizing-3/#… #devsheets Video alt: in next tweet. 👇🧵

☕ Quick morning DevSheet. `git status` vs. `git status -s` vs. `git status --porcelain`. :) #devsheets 🔗 TIL post: stefanjudis.com/today-i-learne…

`inputmode` on HTML elements. 🙈👇 #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web…

Safari now supports `enterkeyhint`. 👏 I always like it when the enter key gives me more context. 👇 🔗 Spec: html.spec.whatwg.org/multipage/inte… #devsheets

💡 TIL – there's a new global JavaScript method to report exceptions to global error handlers. If you're knee deep in your call stack you can handle exception so that things don't blow up, but also trigger global event handlers for e.g. error monitoring. 🎉 #devsheets

Sometimes it's the tiny things. 💪 ✨ Firefox is the first browser shipping `URL.canParse`, and it's so much better than try/catching valid URLs. 😅 #devsheets

Little morning devsheet ☕ – `Intl.NumberFormat`. 🔗 MDN: developer.mozilla.org/en-US/docs/Web… #devsheets

☕ Little morning DevSheet. Reviver and Replacer functions when dealing with JSON in JavaScript. #devsheets

I just updated Chrome and it now supports complex selectors in CSS `:not()` pseudo-classes. 😲 That means stuff like this is now possible. 👇 #devsheets Works in Chrome 88, Safari and Firefox. 🎉 ✍️ Article and live example: stefanjudis.com/snippets/how-t…

TIL: There's an `ex` CSS unit. 🙈 🔗 CSS Spec for font-relative length units: drafts.csswg.org/css-values-4/#… #devsheets

CSS filter functions in a nutshell. 🙈 #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web…

🍵 Little evening DevSheet: The new Cookie Store API shipping in Chrome 87. 🔗 Chrome status: chromestatus.com/feature/565884… 🔗 Explainer: wicg.github.io/cookie-store/e… #devsheets

☕ Little morning devsheet: the flexible `flex` shorthand CSS property. 🙈 #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web…

TIL – `repeating` gradient #css functions exist. 😲 🔗 stefanjudis.com/today-i-learne… #devsheets

I just learned that quotes can be localised via CSS. 😲 Big thanks to @lonekorean for including that in an article. 🙇‍♂️ 🔗 codersblock.com/blog/diving-in… #devsheets

I haven't used the readonly attribute on form elements for a while and forgot that they can be targeted with a :read-only pseudo class. 🙈 To remember, I made a quick devsheet showing the differences of disabled and readonly inputs. #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Lea…

🎉 Input type `datetime-local` support is coming to Firefox 93. 🎉 🔗 MDN docs: developer.mozilla.org/en-US/docs/Web… #devsheets

So I am doing frontend dev after 2 years. What is this power I feel w/ CSS Grids and Flexbox #devsheets @freeCodeCamp @css

☕ Quick morning DevSheet. `git status` vs. `git status -s` vs. `git status --porcelain`. :) #devsheets 🔗 TIL post: stefanjudis.com/today-i-learne…

Quick Sunday DevSheet. 🙈 With Chromium v91 `@​counter-style` slowly enters the stage. Soon you can go wild with another option to create custom list styles. #devsheets 🔗 MDN: developer.mozilla.org/en-US/docs/Web… 🔗 Spec: drafts.csswg.org/css-counter-st… 🔗 Chrome status: chromestatus.com/feature/569269…

Little evening devsheet. 🙈 Order matters in CSS transformations. Blog post: stefanjudis.com/blog/order-in-… #devsheets How transforms are applied when using functions and properties. 👇

I can't wait for all these new text-decoration properties to be widely supported. It's still early stages, but broader support of properties to e.g. define the underline thickness will be excellent. 🎉 🔗 MDN: developer.mozilla.org/en-US/docs/Web… #devsheets