{"id":362780,"date":"2022-02-14T11:01:24","date_gmt":"2022-02-14T19:01:24","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=362780"},"modified":"2022-02-14T11:01:26","modified_gmt":"2022-02-14T19:01:26","slug":"290-designing-context-menus-css-presentations-and-complaining-about-web-browsers","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/290-designing-context-menus-css-presentations-and-complaining-about-web-browsers\/","title":{"rendered":"290: Designing context menus, CSS presentations, and complaining about web browsers"},"content":{"rendered":"\n

[Robin]:<\/strong> Stephanie Eckles wrote this nifty piece about how to use CSS scroll snap<\/a> to make a website that feels more like a slide deck. With just a few interesting bits of HTML and CSS, you can make a pretty dang good Powerpoint-esque website that could be better for you. Another great idea here is to use the contenteditable<\/code> attribute so that you can make live coding examples during your talk:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Smart! But make sure to play around with the demo<\/a> because I think that this is a really neat idea and scroll snap is one of the most overlooked newish CSS features. I am absolutely biased here<\/a>\u2014but!\u2014I think that being able to change the pace of reading a website now with scroll-snap<\/code> is what\u2019s so exciting.<\/p>\n\n\n\n

Also, somewhat related: I just finished reading Russell Davies\u2019s excellent book about making presentations called Everything I Know About Life I Learned from Powerpoint<\/a>. It has absolutely nothing to do with front-end development but if you\u2019re interested in learning about how to do a really great talk or you want to improve your writing skills then I\u2019d highly recommend it.<\/p>\n\n\n\n

\n\n\n

Aspect Ratio is A-Okay<\/h3>\n\n\n

Speaking of mighty fine CSS properties, \u201cAspect Ratio is great<\/a>\u201d writes Michelle Barker:<\/p>\n\n\n\n

Maybe it\u2019s just me, but I feel like a lot of the time learning new CSS features doesn\u2019t involve just learning a what a single property does, more like getting to grips with a collection of properties and how they work together \u2014 even learning a whole specification. That\u2019s certainly not a complaint from me: it makes sense to consider properties as part of an ecosystem. But I have to confess, I love it when a new CSS property lands in browsers that doesn\u2019t have a steep learning curve and just works, with no fuss. The aspect-ratio property hits all the right spots there, neatly solving with a single line of CSS something that was, quite frankly, a bit of faff before.<\/p><\/blockquote>\n\n\n\n

I couldn\u2019t agree more: the real power of CSS comes into play when you learn all these individual properties and then begin to see how all these properties overlap and what new power that unlocks. Take Michelle\u2019s example later in the post, where she combines aspect-ratio<\/code> and object-fit: cover<\/code> together in order to make a series of cards that have exactly the same width and height but might contain images of different sizes inside:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I remember writing a quick overview<\/a> about object-fit<\/code> back in 2016 (!) and thinking “okay, this is incredible” because it made my life so much easier when working with images. Now I wouldn\u2019t have to faff about with an image to make it take up the full size of its parent element. Just one CSS property. In. Out. Done.<\/p>\n\n\n\n

\n\n\n

Complaining about web browsers is okay, but please do not be a jerk about it<\/h3>\n\n\n

Dave Rupert wrote a great piece the other day about some of the lessons he\u2019s learned when it comes to complaining about web browsers<\/a>. Take it away, Dave:<\/p>\n\n\n\n

The best thing I\u2019ve ever done in my career is blog about my specific problems with browsers (or any software you\u2019re passionate about). This goes for software beyond browsers too. I\u2019ve done this for IE, Safari, Edge, Firefox, Chrome, Windows 10, WSL and I\u2019ve seen first hand how a \u201cfriction log\u201d can become a powerful tool in an organization.<\/p>

Behind the scenes, your posts will get picked up by external-facing developer advocates and shared internally. A single blog post is worth 10,000 tweets. It\u2019s valuable because it shows you thought through your problem and narrowed it down to a set of specific issues. All the more if it\u2019s non-combative (see above). I\u2019ve seen this play out dozens of times.<\/p>

A simplified example of a problem solved by Container Queries is a million times more helpful than an abusive \u201cSupport Container Queries, ya fuckers\u201d jab. A list of features causing expensive workarounds is great. If you\u2019re blocked on a feature due to a lack of implementation\u2026 blog it.<\/p><\/blockquote>\n\n\n\n

It\u2019s real easy to dunk on a browser about a specific problem. I have a few 👀 opinions 👀 about how some browsers treat the scroll-snap property for instance, but blasting the developers on twitter is 1. not productive whatsoever but 2. (and most importantly) it isn\u2019t kind. Browsers are super complicated! At this point, they\u2019re nigh on operating systems unto themselves and so dragging a bunch of developers into a snarky conversation about the one thing that frustrates you isn\u2019t the best use of anyone\u2019s time. Even if it\u2019s for my beloved scroll-snap.<\/p>\n\n\n\n

\n\n\n

Context menus are neat but also tricky to get right<\/h3>\n\n\n

Michael Villar wrote about how to build context menus<\/a>\u2014those are the sorts of menus that pop up when you right-click something in an operating system or perhaps in a \u2022\u2022\u2022<\/code> button on the web\u2014and shows just how many intricate details are required to study in order to make the best user experience possible.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here\u2019s one detail I often miss:<\/p>\n\n\n\n

Your context menu should be navigable through keyboard shortcuts. This is another one that seems unpredictable on the web these days, yet it’s so obvious in retrospect. And of course, a nice little touch is to cycle through the menu when reaching the end of the options.<\/p><\/blockquote>\n\n\n\n

Keyboard navigation for all the things!<\/p>\n\n\n\n

\n\n\n

A good reminder about text-size-adjust<\/h3>\n\n\n

Kilian Valkhof reminded me the other day to add text-size-adjust<\/a> to my CSS reset:<\/p>\n\n\n\n

[\u2026] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones that is, it doesn\u2019t do it on iPad. Safari has been doing this for a long time, as a way to improve readability on non-mobile optimized websites. While undoubtedly useful in a time when literally no website was optimized for mobile, it\u2019s significantly less helpful nowadays. [\u2026] Text size increasing randomly in a single situation is exactly the type of thing you want to guard for with a CSS reset.<\/p><\/blockquote>\n\n\n\n

html {\n  -moz-text-size-adjust: none;\n  -webkit-text-size-adjust: none;\n  text-size-adjust: none;\n}<\/code><\/pre>\n\n\n\n
It\u2019s one of those things that\u2019s easy enough to forget but when you notice it, you NOTICE it. It can definitely bork your website in that one case.<\/p>\n\n\n\n
\n\n\n
What\u2019s happening with CSS and color these days?<\/h3>\n\n\n
For a long time, CSS has been limited in terms of what we can do with color. We\u2019ve been stuck with one color model, RGB, and it meant that our modern screens could display more colors than what we could make browsers do. But there are a lot of exciting changes these days when it comes to color and CSS<\/a>, as Chris writes:<\/p>\n\n\n\n
It turns out that modern monitors can display way more colors, particularly extra vibrant ones, but we just have no way of defining those colors with classic CSS color syntaxes, like HEX, RGB, and HSL. Super weird, right?! But if you use Display-P3, you get a wider range of access to these vibrant colors.<\/p><\/blockquote>\n\n\n\n
Display-P3 isn\u2019t available in all browsers yet, but it is in Safari, and it looks like this in CSS:<\/p>\n\n\n\n
body {\n  background: color(display-p3 1 0.08 0); \/* super red! *\/\n}<\/code><\/pre>\n\n\n\n
Color spaces, like RGB or display-p3, are most certainly not my area of expertise but this is very exciting. However! It\u2019s important to remember that display-p3 won\u2019t be entirely replacing how we do color in the future. This isn\u2019t a flexbox over float for layout situation:<\/p>\n\n\n\n
In a conversation with Adam Argyle, he used a memorable phrase: All the color spaces have an Achilles\u2019 heel. That is, something they kinda suck at. For sRGB, it\u2019s the grey dead zone thing, as well as the limited color gamut. LAB is great and all, but it certainly has its own weaknesses. For example, a blue-to-white gradient in LAB travels pretty awkwardly through purpletown.<\/p><\/blockquote>\n\n\n\n
Ah! I feel like I\u2019m going to return to display-p3 once it has better browser support. There\u2019s nothing stopping me from learning about it now but I feel like it\u2019s going to be a neat, additional thing we can do in the future, rather than rewriting the whole playbook.<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Resolve incidents faster through ops, alerting, and documentation<\/a><\/h2>\n\n\n
The longer the MTTR, the greater the impact on the organization, whether in cost, risk, or diminished trust from customers or partners. Learn how modern development teams are using monitoring and alerting to improve their incident response workflows<\/a>.<\/p>\n\n\n\n
\n
Get Started<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Netlify Identity, a Key Aspect to Jamstack Development<\/a><\/h2>\n\n\n
Say you want to build a TODO app with users. Those users will need to sign up and log in. Can\u2019t do that with a static site, right? You can, actually. Netlify helps with Netlify Identity<\/a>, a robust offering they\u2019ve had for years. Enabling it is just a few clicks in the admin UI, and they even provide auth widgets<\/a> so you have to build precious little to get this working.<\/p>\n\n\n\n
\n
Get Started<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
[Chris]:<\/strong> Eleventy<\/a> is kicking butt lately. Just last month they had a big 1.0.0 release<\/a>. I guess moving on from the ol’ zero.point area means breaking changes, but it also means huge new features and implied stability that I’m sure is very attractive to people considering site-building frameworks.<\/p>\n\n\n\n
What I like using about Eleventy (I’ve done a couple little sites in it, like our conferences<\/a> site), is that it’s just an easy foundation to build a static site around. It had smart default behavior that processes templates, moves files around, and produces a shippable website. What I don’t like about Eleventy is that out-of-the-box, the processing languages are slightly old-school, like Liquid<\/a> and Nunjucks<\/a>. To me, none of them really embrace “components” in the way I like. I think all digital products should be built from components. Not any particular technology, but that essentially follow this pattern:<\/p>\n\n\n\n
import \"Component\";\n\n<Component pass={data} \/><\/code><\/pre>\n\n\n\n
That gives you the power to compose anything in the way that maps best to your brain and to your organization. So I perked up a bit when I saw Eleventy + Lit<\/a>. Lit<\/a> is a framework for Web Components, which fits the organization bill for me, but the server-side rendering story for Web Components, Declarative Shadow DOM<\/a>, doesn’t feel very nice to me if you have to do it manually. So… don’t do it manually! Let Eleventy do it! You should check the blog post<\/a>, but I’ll post an image here that sells the story for me:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Brad seems convinced too<\/a>:<\/p>\n\n\n\n
Declarative Shadow DOM<\/a>\u00a0always looked gross to me and I felt it almost defeats the purpose of web components. BUT! With tools like this (especially this\u00a0@lit-labs\/ssr<\/a>\u00a0project), we can have our cake and eat it too: use web components in a dev-friendly way, and then have the machines do the heavy lifting to convert that into a grosser-yet-progressive-enhancement-enabled syntax that ships to the user.<\/p><\/blockquote>\n\n\n\n
I’ll also admit that the reason I like component composition is from working with JavaScript frameworks for so long now. They just straight up did a good job with it, from an API perspective. The tables have completed turning though, using JavaScipt frameworks in an entirely-client-side rendered way isn’t nearly as good for anything (users, SEO, performance, accessibility, etc) as server-side rendering (the effects of hydration are still debatable, but I view as largely worth it). <\/p>\n\n\n\n
So what about Eleventy + JavaScript frameworks? That’s the deal with Slinkity<\/a>: <\/p>\n\n\n\n
🚀\u00a0Unlocks component frameworks<\/strong>\u00a0like React for writing page templates and layout templates. Turn an existing\u00a0.html<\/code>\u00a0or\u00a0.liquid<\/code>\u00a0file into a\u00a0.jsx<\/code>\u00a0file, and you’re off to the componentized races.<\/p><\/blockquote>\n\n\n\n
So in the same way you might reach for Next.js because you know React and want easy SSR, now you might reach for Eleventy. <\/p>\n\n\n\n
And I just heard today<\/a> that Zach is now fully sponsored by Netlify for the open-source development of Eleventy. Sweet. <\/p>\n","protected":false},"excerpt":{"rendered":"
[Robin]: Stephanie Eckles wrote this nifty piece about how to use CSS scroll snap to make a website that feels more like a slide deck. With just a few interesting bits of HTML and CSS, you can make a pretty dang good Powerpoint-esque website that could be better for you. Another great idea here is […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362780"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362780\/revisions"}],"predecessor-version":[{"id":363737,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362780\/revisions\/363737"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}