Reading List #8

Hey there ๐Ÿ‘‹

This week I made some progress on a feature which took me way longer than expected to build as I ended up basically rewriting the whole thing for at least three times. But I learned a ton in the progress, so I take it as a win.

Apart from that, it was kind of a short week. I got my booster shot yesterday and reserved today for sleepingand recovering without any important work or calls. But fortunately, it didn’t hit me as hard as the second dose, and I’m feeling much better already, so I might as well get some work done this afternoon.

Frontend Development

๐Ÿ›ค Git Rebase

I linked to an article before about the benefits of git rebase vs git merge and started using it myself, which I can highly recommend. This article covers everything you need to know about the basics, with examples to do it from the command line and also some tips on how to configure git.

Alchemists โ€“ Git Rebase

๐ŸŽจ Relative Colors in CSS

Jim Nielsen shows an experimental feature which allows to use relative color manipulations directly in CSS. It’s currently only supported in Safary Technology Preview 122 behind a flag, but it would be awesome to have this available in more browsers in the future and to have a replacement for SCSS’s lighten() and darken() functions.

Dynamic Color Manipulation with CSS Relative Colors


WordPress

๐ŸŽท WordPress 5.9 is coming

With version 5.9 of WordPress expected to be released on January 25th, it’s about time to read through all the amazing things coming in this new version. For a good overview, this post is a good place to start.

WordPress 5.9 Field Guide


Other / Random

๐Ÿงšโ€โ™€๏ธ How cognitive biases influence our design decisions

Whether we like it or not, we all have biases that influence the way we see and interpret the world around us, and therefore also influence our design decisions. Jon Yablonski created this collection of cognitive biases, how they work and some of the things we can do to decrease their negative impact on our design decisions.

Biased by Design


That’s it for this week. Have a happy weekend ๐ŸŽ‰

Reading List #7

Hey there

This week, we got our first small-ish client-project of the year almost finished, made some progress on new blogposts for picu as well as our own company blog.

Apart from that, I read through most of “Complete Guide to Absolutely Everything”, a brilliant book by Hannah Fry and Adam Rutherford, and I love it so far.

Here’s some of the things I was reading this week.

Frontend Development

๐Ÿ”ฅ Writing Better CSS

Modern CSS is getting better and better. Alexandr does a great job in explaining some of the cool new features we have at our disposal. Actually, he managed to untangle some of the knots I still had in understanding things like the :is & :where selectors and especially clamp(). If you work with CSS, you should read this post.

Alexandr Hovhannisyan โ€“ Writing Better CSS

๐ŸŽ› CSS Variables in inline styles

When I started using CSS Custom Properties much more, it always bugged me that you have to put them inline, for example if you want to pass a variable from PHP to CSS. Matthias explains why this is much better (not only in terms of accessibility) than direct inline styles would be and has some good examples to illustrate this.

CSSence โ€“ CSS Variables in Style Attributes

๐Ÿ“ You can use the browsers’ aspect ratio in a media query

Did you know you can use aspect-ratio in a media query ( @media (min-aspect-ratio: 16/9) { ... } ) to react to the proportions of your browser window? I didn’t, but I could imagine a few occasions were this would have come in handy.

Chip Cullen โ€“ A little known Media Query: Aspect Ratio


web3/NFT/crypto

๐ŸŒ A not so gentle intro to web3

Another take on the whole web3 discussion. Koos’ opionion is fairly negative, but I think he also backs up his opinions with valid criticism. Apart from the ecological problems, the countless get-rich-quick pyramid schemes and grifters involved, I see one of the core questions blockchain/web3 needs to address is “does it actually solve a real problem, which a database wouldn’t”. And this is not as clear as it seems. For example: if blockchains should solve (or rather remove altogether) “trust” in a digital age but we still need to trust someone, namely the one who’s putting something onto the blockchain, then what’s the benefit of it all? Or, how Benedict Evans put it so eloquently: “The blockchain can’t lie, but you can lie to the blockchain”. Well said.

Koos Looijesteijn โ€“ A not so gentle intro to web3

๐Ÿง Does web3 make the web more centralized?

And yet another one, which focuses on the centralization / decentralization aspects of web3. Wesley argues that the web actually is and always was decentralized and that blockchains like Ethereum even make the web3 more centralized. I’d love to see projects that truly leverage blockchain technology to succeed, but it’s hard to argue about some of the technical aspects they mention in the article.

Wesley Aptekar-Cassels โ€“ web3 centralized

Other / Random

๐Ÿฆ How Florian uses twitter

Florian wrote down how he uses twitter, and โ€“ even though we have been working together closely for about seven years now โ€“ it still amazes me how completely different we manage things like email or in this case our twitter accounts. While he’s minimalistic and organized, I’m completely chaotic. Maybe that’s why we work together quite well. He’s so damn organized he even “cleares” his timeline on twitter, how crazy is that? Right? I try to get my mails down to mailbox zero, at least from time to time. I read books from cover to cover, if they are any good. But twitter really is just this neverending waterfall of tweets, and if I miss some, the good ones will pop up from retweets of others anyway. And if not, I don’t really care. Always interesting to see how different other people use things.

Florian Ziegler โ€“ How I Use Twitter


Ok, that’s a wrap.

Have a nice weekend โœจ

Reading List #6

A beautiful sunrise from our bedroom up in the mountains in Rabius-Surrein

Hey there and Happy New Year! ๐Ÿ‘‹

Hope you had a wonderful start into what hopefully be the year that brings us somewhat back to normality after *all of this* (waves hands at the pandemic). We had a few days off in the mountains with family and friends, where the picture above is from. I really enjoy the end-of-year days as it’s usually the only time of the year where I am truly logging off. Also, it was great to see family face-to-face for christmas eve, some of which we didn’t see for a full two years.

On a more personal note: We finally got engaged, which โ€“ after 15+ years and two kids โ€“ you could say was about damn time!

The first week of the new year started quite good with some client work lined up as well as the usual yearly admin stuff. I’m looking forward to what 2022 has in store for us.

Let’s jump into the links.

Frontend Development

๐Ÿ‘ฉโ€๐Ÿ’ป On the “femininity” of CSS

An interesting take on why some developers still think that CSS is not a programming language. Short answer, btw: it is. But Elaina makes a point in this post, why CSS โ€“ for some โ€“ is not seen as a “real” programming language because it’s just there to “make things pretty”, and therefore too feminine. I agree with the overall sentiment and especially liked that she mentions that programming is in fact a most feminine profession, men just pushed the women out after they pioneered in it.

Tailwind and the Femininity of CSS

โœจ 30 Seconds of Code – CSS

Another nice collection of CSS snippets with various effects for inspiration.

https://www.30secondsofcode.org/css/p/1

โœ๏ธ Tool: Fluid Type Scale Calculator

If you want to use a fluid type scale, this tool is for you. Let’s you set all the parameters and then copy & paste the final CSS code. Easy as that.

Fluid Type Scale Calculator


SEO

๐Ÿ’ก SEO Insights by John Mueller

A compilation of 57 insights into how search works by Google’s John Mueller. Most of it is probably quite well-known, but there are some things I learned from this article. For example, I always thought that duplicate content can harm your ranking – which doesn’t seem to be the case, Google just tries to determine and then link to the piece it thinks is the original.

57 SEO Insights From Googleโ€™s John Mueller

Other / Random

๐Ÿคฅ Marketers are addicted to bad data

Jacques Corby-Tuech has some thoughts about the bad data marketers are addicted to. I’m more than happy not to be in a marketing role where I have to “prove” my worth in such biased numbers. And even when I had a job in marketing, I had a really great boss who recognized that a lot of marketing is experimentation and gut feeling instead of a hard science, and never forced me to work with magic numbers. I’m completely on board with Jacques’ thoughts, to me this feels like a whole industry cheating and lying to themselves in a perpetual game of “look we did this”. It’s especially funny if you compare it (for example) to facebook’s trial before congress, when they had to split the opposite messages between “we are not capable of changing human behaviour” while selling exactly that to their customers. It’s just a very ridiculous business model.

Marketers are Addicted to Bad Data

๐ŸŒ Gary Pendergast on WordPress and web3

A few weeks ago I started writing a draft for a post called something like “I don’t have an opinion about NFTs/web3” in which i tried to make sense of what I understand about this topic, and what not. In it, I concluded that much of what I know about crypto/nft/webn3 is that it is highly polarizing and almost all the voices you hear are either overly enthusiastic or hate it to the core. Just as I was thinking about editing this post again, I stumbled upon this article by Gary Pendergast, which was one of the first articles I’ve read on the topic with a more nuanced opinion. I still haven’t formed an opinion, and maybe I don’t have to, but if you see more articles like these, please send them over.

Gary Pendergast โ€“ WordPress and web3

๐Ÿ’ธ The Case Against Crypto

Another one on the topic of crypto & NFTs, this time by Martin O’Leary, where he argues strongly against using crypto. While he’s clearly taking a stance against crypto, he’s making some very valid points and puts a lot of the (negative) thoughts I had about crypto into words, much better than I could.

The Case Against Crypto


Ok, that was it for today. Hope you have a great start into the new year! ๐ŸŽ‰

Reading List #5

With the end of the year approaching fast, this week was mostly packed with organizing everything for christmas and our holidays, finishing some last client work and a lot of admin stuff like sending out invoices and filing taxes.

Plus: we finally ordered new MacBook Pros which should arrive in January, and which I very much look forward to โ€“ as you can imagine!


Frontend Development

๐Ÿš€ Have Core Web Vitals made the web faster?

Barry Pollard (one of the maintainers of the HTTP Archive) is having a look at whether Core Web Vitals have actually made the web faster since their rollout as a ranking signal in Google Search in May 2021. As with most things, the short answer is: it depends, and it’s not as easy to measure as you would expect, especially since the measurements themselves are changing. If you’re interested in Web Performance in any way (which you should), this article is worth a read.

Web Performance Calender โ€“ Have Core Web Vitals made the web faster?

โœจ Case studies on the impact of web performance optimization

This one was linked by Barry Pollard in the article about Web Vitals above, but it deserves a special mention. It’s a huge collection of case studies and experiments that demonstrate the effect web performance can have. If you ever need to convince someone of the importance of performance, this site should be in your bookmarks.

WPO Stats

โ™ฟ๏ธ Accessibility Myths

A collection of the most common misconceptions around accessibility. Another one for the bookmarks, if you need to convince someone.

a11y myths โ€“ debunked


Other

๐Ÿค– Machine Learning

This series of very pretty visualizations make it pretty easy to understand the basic concepts of machine learning. Part 1 explains what a decision tree is and how they can be used to group data points into the right buckets. In part 2 they look into how this model can be tuned to make it more accurate and the trade-offs between bias and variance. Worth a read if you want to know how machine learning works under the hood.

R2D3 โ€“ A visual introduction to machine learning โ€“ Part 1 (A Decision Tree)
R2D3 โ€“ A visual introduction to machine learning: Part 2 (Bias and Variance)

โ„๏ธ Snowflakes

Suitable for the season, this video tries to answer the question: How do Snowflakes work? Well, Dr Ken Libbrecht actually grows snowflakes under lab conditions to study them. He’s possibly the world expert on snowflakes and even was the “snowflake consultant” for the movie Frozen.

https://www.youtube.com/watch?v=ao2Jfm35XeE

๐ŸŒ‚ Very Peri

PANTONE 17-3938 Very Peri is the color of the year 2022

Pantone โ€“ Color of the Year 2022


Let’s call this year a wrap.

I’ll be up in the mountains for a week now, so no reading list next week.
I hope you have a happy holiday โ€“ see you next year!

Reading List #4

Hey there ๐Ÿ‘‹

After the last few weeks with some unplanned events, I spent most of this week recovering from the unproductivity of the last and finishing off some last client work before christmas. Also, I made some progress on a little PHP script to generate SVG charts, which turned out much more difficult to refactor than I initially expected, but is coming together nicely.

Apart from that, our family is getting ready for christmas. We already brought in and decorated our christmas tree from the balcony, and I’m looking forward to some time with family and then a few quiet days up in the mountains.

Here’s some of the things I’ve read this week:

Frontend Development

๐Ÿ“ฑ Lighthouse Simulated Throttling

This article goes into great details of how lighthouse simulates throttling. I always thought that the requests are actually throttled, but it makes complete sense to run the tests as fast as possible and then simulate the results from there.

How does Lighthouse simulated throttling work?

๐Ÿ“ About Removing Comments

What should be commented and what shouldn’t? This is a question that comes up regularly. I agree with Jason, who argues that a comment should add some meaning. Why you did something instead of what a block of code does. Also, comments โ‰  documentation, which is the docblock above a function. Of course, as with everything, it depends and sometimes it can be hard to draw the line.

Jason – Remove Comments

๐Ÿ›ค git rebase vs merge

I work with git every day of the week, and couldn’t imagine touching any code without it, anymore. But I never really went much further than a pretty basic branching strategy. We usually use branches like main and dev to keep the code that runs on production and staging apart and develop new stuff in feature-branches. But to get changes back into dev, I only ever used git merge. This article explains what git rebase is and in which cases they can make sense. It’s part of a series of posts about git, which covers everything from branching strategies to merge conflicts to more advanced topics.

CSS Tricks โ€“ Rebase vs. Merge: Integrating Changes in Git

โœจ Welcome Wonderful Weirdos of the Web

Lynn Fisher (as every year) rebuilt their website. It’s always fun to see the creative experiments Lynn comes up with. Try resizing it (should work best in Firefox or Edge).

https://lynnandtonic.com/


SEO

๐Ÿ”— Do Links Still Matter for Rankings

Patrick Stox of ahrefs ran an interesting experiment to see whether backlinks are still relevant for your ranking. To test this, they disavowed three popular articles from their blog for a month to see the impact it had on their ranking. Long story short: backlinks do still have an impact, but not always in the ways one would expect.

ahrefs โ€“ Do Links Still Matter for Ranking


Other / Random

๐Ÿง  A search engine for your mind

Remy Sharp shares his thoughts on why he writes on his own blog. I really like the idea of your blog as a search engine for your own mind, instead of necessarily publishing for others. Also, the goal he set for himself to publish two posts a month and how setting “easy goals” helps to get some writing done resonated very much with me, as it’s pretty much the same reason I started to post those reading lists regularly.

Remy Sharp โ€“ Why I write and why I won’t

๐ŸŽจ Autonomous Generative Art by Rich Tabor

Rich Tabor, well known for the work he’s done with CoBlocks and the Block Editor (among other things), created a simple but beautiful page using WordPress’ full site editing, and very much liked the experience. The site posts generative artworks โ€“ created with p5.js โ€“ autonomously.

Autonomously created generative art by Rich Tabor


๐Ÿ™ Ok, that’s it for this week. Have a nice weekend!

Reading List #3

Last weekend, we had the stomach flu running through our whole family. And just when everyone was somewhat healthy again, our three-year-old daughter caught a pretty nasty eye infection this week to top it off. Thanks to modern medicine and some antibiotics it only lasted a few days and she’s already much better now. But basically, this week was quite a mess and mostly spent recovering and trying to stay ahead of things.

But there are still some positive news: We finally built a first version of the landing page for our “yet-to-be-released-new-project”, which I hopefully can tell more about very soon. Also, we made a little bit of progress on the new email functionality for picu and worked with our content writer on some new blogposts for the picu blog.

Here’s what I’ve read this week:

Frontend Development

๐Ÿ–‹ Google Fonts Knowledge

Google launched Fonts Knowledge, a library of typography guides, which they produce in collaboration with known typography experts. I only had time for a short look around, but it seems to be very extensive and definitely worth a visit if you want to learn something about typography on the web.

Google Fonts Knowledge

๐Ÿ’ก Using Position Sticky With CSS Grid

Position sticky can behave unexpected, if you use it inside a CSS Grid Container. Ahmad Shadeed shows why that is, and what can be done to make it work.

Ahmad Shadeed โ€“ Using Position Sticky With CSS Grid

๐Ÿคฉ Multiline background gradients

If we add a background gradient to multiline text, for example on a title, the gradient will reset on every line which is not very nice. This question by Dan Mall is already a few years old, but the solution Matthias Ott proposed still looks like a nice idea to tinker with.

Twitter โ€“ Matthias Ott

Codepen โ€“ Multiline background gradient with mix-blend-mode

๐Ÿค“ Media Query Range Contexts

Someday in the (near) future, we will be able to use <= and >= inside media queries, instead of min-width & max-width to describe a range. It’s a small improvement but should make media queries more readable.

Bram.us โ€“ Media Queries Level 4: Media Query Range Contexts

๐Ÿ” Project Wallace โ€“ CSS Analyzer

Project Wallace is a handy tool to analyze your CSS which gives you an overview of all the rules you’ve defined in your stylesheet. The tool itself with does not come free of charge, but you can try the CSS Analyzer for free, which is quite interesting.

Analyze your CSS

๐ŸŒˆ HSL Color Range Generator

Another little helper to generate HSL color palettes very easily.

https://codepen.io/jh3y/pen/JjEjJjN


Other / Random

๐ŸŽ™ Getting traction to your SaaS, Brian Casel @ Build Your SaaS Podcast

Brian Casel, founder of zipmessage.com (and others) was on the Build Your SaaS Podcast talking about how to get traction to a new SaaS. I have been following Brian for quite a while now and he’s really been doing loads of projects over the years. From the outside, it’s always easy to think that people like him have it all figured out, so it’s reassuring to hear firsthand that they can struggle with some of the same things like we do.

I’m not very much into audio-podcasts because my brain just doesn’t seem to be able to focus on audio alone. I asked Justin on twitter and he was nice enough to upload the video recording of the full podcast to YouTube (Thanks Justin)!

Build Your Saas โ€“ Brian Casel

๐Ÿก Townscaper

A last one for the weekend: This is just such a cool game to play, I had to include it. It’s absolutely pointless as far as I can tell, but nevertheless very relaxing to play around with.

Townscaper Demo


๐Ÿ‘ Thanks for reading! Stay safe, and have a happy weekend!

Reading List #2

โœŒ๏ธ Hello

Putting together this reading list for the second time now “forced” me to look much more at my own website than I did in the months before, which made me recognize a lot of things I’d like to change or implement. One of those things was a dark mode, which I spent a few evenings experimenting with this week. Still a few quirks, which is why I haven’t released it yet, but it will be ready very soon.

Another idea I was playing and sketching around recently, is building a little “bookshelf” on here, somewhat similar to what David Bauer does. I already take notes and more or less have been tracking the books I read for for a few years, but most of that is on paper or hidden somewhere in a spreadsheet and I would love to get them on here.

Oh and this week, I finally received my long awaited early christmas present, a Keychron K3 keyboard, which I’m typing this on right now. Still getting used to it, but loving it so far.

But now, on to the articles I’ve been reading this week.

Frontend Development

๐Ÿ‘ฉโ€๐ŸŽจ A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

As someone with a background in photography, and color management in particular, I love the fact that the web will soon provide much more possibilities for colors in CSS. Many of the features Michelle Barker presents in this article are not ready for prime time yet, but some can already be used with proper fallbacks or behind browser flags for testing.

Smashing Magazine โ€“ A Guide To Modern CSS Colors by Michelle Barker

Bramus added relative color manipulations as the only thing he missed in her post.

Bram.us โ€“ Dynamic Color Manipulation with CSS Relative Colors

๐Ÿ“บ Thinking on ways to solve COLOR SCHEMES

In this short Google Chrome Developers Video, they use custom properties together with some relative color manipulations and HSL colors to create different color schemes. Perfect companion to the article above.

YouTube โ€“ Thinking on ways to solve COLOR SCHEMES

โ˜ฏ๏ธ The color-scheme CSS property and meta tag

Thomas Steiner shows what you can do, or even more important: What browsers can do for us, if we specify color-scheme meta-tags and CSS-properties. With the meta-tag, you can basically tell the browser what color scheme your site uses, before any CSS is loaded and parsed. And the CSS property allows an “element to indicate which color schemes it is comfortable being rendered with”. Sounds abstract at first, but is really powerful if you get the hang of it.

web.dev โ€“ Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag

๐Ÿ‘ Scott Vandehey on Modern CSS in a Nutshell

A lot of people find CSS hard to grasp. And it can be sometimes, which is one of the reasons, frameworks like Tailwind found a huge following, I guess. But as Scott Vandehey points out in this post, it doesn’t have to be overwhelming. First: you don’t need to know everything about CSS! And second: learning just a few of the new(-ish) concepts he mentions will take you very far with modern CSS.

Cloudfour โ€“ Modern CSS in a Nutshell


WordPress

Introduction to theme.json Block Themes

Ellen of Elmastudio with a great introduction to Block based Themes and the theme.json settings file. I haven’t had enough time to really get into the upcoming full site editing and play around with block based themes, but I plan to change this, soon. This article is a solid introduction of the new concepts and ideas.

Elmastudio.de โ€“ Theme.json for WordPress Block Themes explained

๐Ÿค“ You should never change GUIDs in WordPress. And how to do it, if you must

It’s highly discouraged to change GUIDs (Globally Unique Identifier) in WordPress. Brad Touesnard gives a nice overview about what GUIDs are, why they shouldn’t be changed and what steps you should be taking in the rare cases were you actually should change them. We recently moved from Migrate DB Pro to a solution with custom coded bash scripts for our own backups and migrations, but we usually only migrate from live/propduction to our local/staging and not the other way around. If you need to push data from a staging to a production site using the wp-cli, this is also possible, but make sure to add --skip-column=guid to your wp search-replace command to make sure GUIDs won’t change.

Delicious Brains โ€“ WordPress GUIDs: What They Are, and Why Change Them

โœ๏ธ WordPress Flow

What happens when WordPress loads? John Blackburn collected everything that happens under the hood in this gist. Would be interesting to know if everything is still fully up to date, as it’s from 2015, but it’s a good start.

Github Gist by John Blackbourn โ€“ WordPress Flow

๐Ÿ‘ฎโ€โ™€๏ธ Encute โ€“ Fluent Managament of Scripts and Styles

Mark Jaquith built a plugin to manage the scripts and styles you enqueue in WordPress. It lets you load scripts in the footer, defer a script, load it async, and more.

Github โ€“ markjaquith/encute

WordPress.org Plugins โ€“ Encute

โœ… WPMetrics

If you develop plugins or themes on WordPress.org, there are not many stats you get. PluginRank, which was acquired recently, was the first SaaS-type service I’m aware of to give you some more insights and competitor analyses. But there seems to be another one โ€“ WPMetrics โ€“ which has been around for a few years now and looks promising as well. I just created a test account and added a few plugins to check it out over the next days.

WPMetrics.dev


Random

Beatles โ€“ Get Back

I haven’t seen the full documentary yet, but just saw this tweet with a short clip of it. In it, you see a young Paul McCartney jamming around randomly until he creates the iconic hit song “Get Back” pretty much out of thin air.

It’s like magic.

Looking forward to watch the whole series, even tough I don’t really like the “streams exclusively on Disney+” part.

Twitter โ€“ Get Back Jam Session


โœŒ๏ธ Thanks for reading. Have a happy weekend!

Reading List #1

๐Ÿ‘‹ Hi there.

It has been quite the busy year and I completely neglected publishing anything on here. In an attempt to change this, I thought I could start to share some of the things I read throughout each week. And maybe this act of writing regularly will be the motivation I need to finish some of the posts I accumulated in my drafts over the last couple of months.

This week, we finally settled on a name and bought a domain name for a yet-to-be-launched new project we are working on for a while, and which I’m very excited about! While working on that, I learned a ton about CSS custom properties and SVG animation. Also, I finally managed to get ahead with the development of our new email functionality for picu, which is long overdue and coming together nicely.

Let’s jump right into it.


Frontend Development

A Complete Guide to Custom Properties

This week I was using CSS Custom Properties in a real project for the first time, and this post by Chris Coyier helped a lot to get me started. If you want to know more about and are just starting to use custom properties, read this post.

CSS-Tricks โ€“ A Complete Guide to Custom Properties

Parallax Powered by CSS Custom Properties

Jhey Tompkins wrote about a clever usecase for CSS custom properties on CSS-Tricks. In this case he builds a parallax effect powered by custom properties. Would be cool to extend it to use the accelerometer on mobile to control the animation, instead of mouse/touch.

CSS-Tricks โ€“ Parallax Powered by CSS Customย Properties

SVG Properties and CSS

There’s several ways you can use CSS to style and modify SVG elements. But there are also limitations and it can be tricky to find out which properties can be styled by CSS and which cannot. Katherine Kato does a great job in explaining the various elements and properties and how SVG and CSS work together. The article on CSS-Tricks is from 2019, but it’s still up to date as far as I can tell and a very good reference.

CSS-Tricks โ€“ SVG Properties and CSS

Using JavaScript with SVG

I was building/refactoring some interactive SVG charts this week, and this post by Peter Collingridge helped me to get started with the JavaScript parts of it.

Peter Collingridge โ€“ Using Javascript with SVG

In Defense of a Fussy Website

Sarah Drasner about her love of Fussy Websites, where people take the time and care to be thoughtful in detailed execution. This post resonated with me a lot. I’m still quite “ok” with how the design on this very site turned out, but have a few ideas for some touches to make it a bit more playful in the future.

CSS-Tricks โ€“ In Defense of a Fussyย Website

Create Your Own SSL Certificate Authority for Local HTTPS Development

Getting SSL certificates to behave for local installations was always a bit of a hassle. Right now I’m using self-signed certificates MAMP Pro provides out of the box, but this still needs the additional clicks to get all my browsers to trust a certificate, everytime I setup a new site. This tutorial on how to become your own little certificate authority sounds surpsisingly easy. Guess I’ll have a look into this next time I set up my dev environment on a new machine.

Delicious Brains โ€“ Create Your Own SSL Certificate Authority for Local HTTPSย Development


WordPress

Updating a local WordPress website from the live server

As many others, for a very long time we used plugins to backup and migrate most WordPress sites from live to local and vice versa. While this works quite well most of the time, you created this “overhead” of having to install and maintain (or uninstall) plugins on client sites. While we researched ways to better integrate and automate our own backup and migration processes, we recently played around with some shell & WP-CLI scripting ourselves. This post by Mark Howells-Mead would have come in handy to get started.

Mark Howells-Mead โ€“ Updating a local WordPress website from the live server

Silvan Hagen – Schlaufux, From WordPress to TALLStack

After many months without WP Meetups in Zurich (did we even do one in 2021?) it was nice that Nick, Pascal and Silvan managed to organize an End-Of-Year meetup this week! It was great to see everyones faces – even tough it was only on a screen.

Pascal talked about what’s coming in WP 5.9 and Silvan did a presentation about how they rebuilt schlaufux.ch from scratch using the TALLStack, and about the challenges migrating it from WordPress to Laravel. It was very interesting to get some insights into the decisions and thinking behind a project like this.


Random

Next year, we will be crashing a spacecraft into an asteroid. Seriously.

SpaceX just launched a NASA spacecraft with the sole purpose of crashing it into a 160m wide asteroid, September 22nd next year. The goal is to find out if and how we could change an asteroids path to earth, if such a threat would come in the future.

A senior launch director of the program was quoted saying “We’re smashing into an asteroid.” and “I can’t believe we’re doing this.”

Science is great.

CNBC โ€“ SpaceX is launching a NASA spacecraft that will crash into an asteroid

Wikipedia โ€“ DART / Double Asteroid Redirection Test


๐Ÿ™Œ Thanks for reading!

will-change: transform;

If you animate things like opacity or transform, the animation will be done by the GPU, which is super performant with those kinds of things. But as the GPU and CPU render things slightly different you will get this small snap when things get handed over. The will-change property will tell the browser that we will animate this object and therefore the GPU will handle it from the beginning, removing any of those glitches. Ha!

.object-to-animate {
    will-change: transform;
}

Learned this and some more in this great intro to CSS animation by Josh Comeau

Positioning the crop area in add_image_size

I cannot count how many times I used add_image_size to register custom image sizes in WordPress, but I never realized that instead of true/false you can also set the crop area by using an array in the fourth parameter.

add_image_size( 'image-size-name', 250, 250, array( 'center', 'center' ) );

Any of the following keyword combinations:

  • left / top
  • left / center
  • left / bottom
  • right / top
  • right / center
  • right / bottom
  • center / top
  • center / center
  • center / bottom

Developer Handbook – add_image_size