25 Years of JavaScript & 25 Free Courses
https://css-tricks.com/25-years-of-javascript-25-free-courses/
Learning to Simplify by @piccalilli_
https://css-tricks.com/learning-to-simplify/
Slow Movement by @mmatuzo
https://css-tricks.com/slow-movement/
How to Use the Locomotive Scroll for all Kinds of Scrolling Effects by @D_kingnelson
https://css-tricks.com/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects/
The Power of Lampshading
https://css-tricks.com/the-power-of-lampshading/
We tend to judge things based on when *we* started, but that's different for everyone. Reexamine what you know, says @swyx.
https://css-tricks.com/its-always-year-zero/
Old is Solid; New Gets Talked About by @kilianvalkhof
https://css-tricks.com/old-is-solid-new-gets-talked-about/
RT Adam Argyle
CSS "individual transforms"
in 2021 we'll see these in a lot more styles! Firefox has it, Safari tech preview has it, and Chrome's nearly finished.
value:
- composable transforms
- single transform access
- write less
read more in the spec
https://drafts.csswg.org/css-transforms-2/#individual-transforms
Representation Matters
https://css-tricks.com/representation-matters/
Netlify & Next.js
https://css-tricks.com/netlify-next-js/
What did you learn this year? "Not much" says @IreAderinokun.
https://css-tricks.com/not-much/
Re Another classic one that would be handy, but it'll break in older browsers (so you need to split them up):
::selection, ::-moz-selection {
background: lightblue;
}
Re That code example in the previous tweet means that in IE 11, the entire selector is thrown out, making these submenus not work at all. If you split up those selectors, at least the :focus style will work.
Going forward, invalid selectors in a comma-separated chain will NOT invalidate the whole selector. But in older browsers, they DO.
/* dangerous! */
.menu:focus .submenu,
.menu:focus-within .submenu {
display: block;
}
https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/
Give Users Control: The Media Session API by @broods_
https://css-tricks.com/give-users-control-the-media-session-api/
HTTP Archive’s Annual State of the Web Report
https://css-tricks.com/http-archives-annual-state-of-the-web-report/
::marker is fantastic and now available in all the modern browsers.
@simevidas notes a favorite use-case (list markers matching size of headers):
https://css-tricks.com/almanac/selectors/m/marker/
https://jsbin.com/mogotoxazo/edit?html,css,output
RT Adam Argyle
✅ *fixed* conic gradient background
✅ svg masked
<button>
✅ light & dark mode
✅ clean markup
✅ beautiful & dynamic result (imo)
`background: conic-gradient(...) fixed;` 🎉
effect is like each icon is a window to a shared color dimension.. 🤓
</button>
