? 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
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:
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?
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.