? Links around the web
- Firefox now blocks tracking third-party cookies and cryptomining by default.
- Ben Frain sets out to explain how to build a Progressive Web App from scratch.
- This animation right here is…a font? Weird!
- Here’s a fun CSS hack that shows the outline of every element on the page which makes things easier for designing layouts.
- Adam Silver details his beef with tooltips and some suggestions about how we might replace them.
- Here’s an idea! Take these posters by Xtian Miller and try to replicate them with CSS. I reckon that would be a lot of fun!
? Hot take of the week
[Robin]: This week I’m in Portland, Oregon for XOXO (an arts festival for kindred web folk) and I mention this because I got to chatting with a designer about publishing on the web. They mentioned that they’re sort of overwhelmed with getting started; the writing isn’t the hard part, they mentioned, instead it was the editing, the publishing! Hitting that big green button and making those thoughts public.
To help with this feeling, Chris wrote about how to get started with technical writing and I think one of the most important notes he makes is this one:
Write at the moment of learning. The moment you learn something is the best time to write. It’s fresh in your mind and you can remember what it was like before you understood it. You also understand what it takes to go from not knowing to knowing it. That’s the journey you need to take people on.
Not to brag (I am currently bragging) but this is how I went about writing the series of posts all about CSS Modules. As I was hacking things together and trying to figure out this weird and technical thing that made zero sense to me I would make notes in a journal as I went. Eventually, by fleshing out those notes I could then retrace my thoughts when it came to implementing CSS Modules on a recent project. It was sort of magic!
However, I think it took a rather long time to gain the confidence to publish on the web—and a lot of that confidence came from owning my own little website where I could publish whatever nonsense was rattling around my noggin.
I’m reminded of this because Jamie Tanna wrote a great piece recently called Why I Have a Website and You Should Too, where he writes:
Having a website and/or blog is not about being a web developer, nor about being a celebrity of sorts, but is about being a citizen of the Web. This may sound a bit grand, but that’s the point — the World Wide Web is this amazing thing that was literally built for everyone. We need to make sure that we are all using it to its best, and owning a piece of it to show big companies that it’s ours, not theirs!
Lots of folks have written along similar lines in the past, and what I like here is how Jamie describes why owning your own site is useful for letting others find you and giving you a space to experiment with weird ideas.
If you’re a developer it could be a list of all your favorite demos from CodePen! If you’re a big reader it could be a list of your favorite books! Or if you’re a hiker, your favorite walks around the countryside! And so this is just a reminder that personal websites are not just for designers and engineers and it’s okay to avoid making a Medium-style blog.
But I think the best thing about having our own websites is to experiment with web technology, sure, but more importantly: to help give us all that jolt of confidence we need to keep publishing, to keep learning and growing. We should ignore any potential audience and think about only how we can make ourselves smarter and more informed on a subject.
That’s why I reckon we should all have a little home for ourselves on the web.
? From the Blog
Should a website work without JavaScript?
After listening to an episode of the JS Party podcast, Chris jotted down his thoughts about this question. One interesting point that caught my attention is this one:
Service workers are JavaScript. Web workers are JavaScript. Some of the fancy resilience and performance features of the web are powered by the same technology that causes the grief we debate about.
This is… true! And unexpected! I think generally it’s easy to paint everything with a broad brush and say that JavaScript is bad because performance or accessibility. However if you dig deeper into things with a more nuanced understanding of the situation it’s pretty clear that it’s not the technology at fault, but the way in we use it.
Chris continues:
There is an in-between moment with progressive enhancement. If a feature is functional without JavaScript, that means it’s likely you are deferring the loading of that JavaScript for the performance benefit. But it does eventually need to be downloaded and executed. What happens during that time? There is a performance and UX cost there. Best case, it’s negligible. Worst case, you break the feature during this in-between time.
This reminds me of Jeremy Keith’s book on the subject of resilience in web design which is worth reading. The point Jeremy makes throughout the book is that JavaScript is a vital tool but it’s very easy to build websites (or apps or whatever we’re calling them this week) that can blow up in the slightest gust of wind.
My hot take: I don’t think we can really talk about websites working without JavaScript because the question is too broad. Instead we should focus on the specifics of each feature that we’re building. Does this website with nothing but images, links, and paragraphs need JavaScript? Ehhhhh, probably not? Sometimes? Maybe?
It’s annoying and complicated and far from simple. Yay for nuanced arguments though!
Recreating Netlify’s Neat-o Sliding Button Effect
I love this post by Geoff where he recreates this super-nifty sliding button effect that happens to look like this on the Netlify Press page where you can download logos in various formats:
There’s a few neat things going on here. First, the left-hand side of the button has a negative left value to push the text off the edge and then on :hover padding is added to reveal it.
Geoff even made a diagram to help explain:
Need to scroll to the top of the page?
scroll-behavior: smooth; is one of those little CSS features that reminds me that there’s been so many small improvements to the web in recent years, and now there’s fewer reasons to reach out for JavaScript when we don’t really need to.
And so in this post, Chris looks at a couple of ways you might go about scrolling to the top of the page whilst making sure the user experience is top notch.
Learn React in 2019 – TylerMcGinnis.com
“By far the most engaging, in-depth and well thought out React course. This is a university-quality undertaking, and I sincerely appreciate the time, effort and passion gone into sharing knowledge for the betterment of the dev community” —Thiago
A Popular @CSS Tweet from Last Week
Tweet: With APIs like window.getSelection().toString() and looking at the event.pageX and Y, you can make a “Share Selected Text on Twitter” feature fairly easily.
A Popular Instagram Post from Last Week
The post was about how you can hand-draw SVG by thinking in coordinates, then even control those coordinates in CSS (in Chrome, in this case). You can even transition them if they have the same number of points.
