Reading List
The most recent articles from a list of feeds I subscribe to.
Redesign in progress
I announced on twitter a couple of days ago that I went a bit rogue on my blog. I removed all the CSS after converting it from Jekyll to Eleventy and I want a brand new design for it. The trouble is I'm not a designer.
It doesn't help that I have an irrational hate for white backgrounds. I was just now looking up on Pinterest for some inspiration when I realised that I wasn't looking at "blog designs". I was looking at notebooks. When I want to think about my blog, I look at everything but web design. In fact, my previous blog design, was inspired by a scrapbook pin. This tiny fact was actually buried in my memory because only just now I re-visited my saved pins.
There are rare moments where I see something, like a painting or a concert and I immediately think: "how can I make my blog look like that?" and it isn't even... a web medium thing!
I've added a tiny bar at the top of the website to let people know that this is a very raw redesign and it might take a while. I'm sure my blog looks much better in an RSS reader. I've also reduced the size of the main image so that a cat bum isn't the first thing people see.
I'm still working out how it will look like. And then I will make it super IndieWeb! Until there, I will vent in my workplace slack channel about how much all I want is a pretty blog.
March bookmarks
March! What a concept, huh?
Bookmarks from March
Web development/tech related content
- ebook all about Animation in Design Systems - by Val Head.
- Creative Coding Essentials - by Tim Rodenbröker.
- A Complete Guide to calc() in CSS - by Chris Coyier.
- Why the web needs to work for women and girls.
- Don’t call it a comeback. I been here for years. - by Cameron Moll.
- Accessible HTML Elements. - by Amber Wilson.
- Playing With Particles Using the Web Animations API. - by Louis Hoebregts.
- Favicons support emojis.
- The Complete AEA DC 2019 Now Online
- Why videos on GOV.UK use the YouTube video player
- Fastest Browser Based WebP Converter
- Let me be your glue. - by Sush Kelly.
- I mentor people, because I want to give them the opportunities I didn’t have. - by Georgie Luhur Cooke.
- Improve Video Accessibility with Captions. - by Gift Egwuenu.
- More accessible defaults, please! - by Hidde de Vries.
- 2020, the year of the interactive blog post. - by John Otander.
Not exactly web development related
- Youtube shortcuts (I haven't tried them myself).
- Education Links - by Andy Bell.
- Help with COVID-19.
- Education Links - by Andy Bell.
Miscellaneous
Funny or cute or happy or uplifting content etc.
Made me think
Content warning: This section might include content that isn't uplifting and happy but rather thoughts that stayed with me.
IndieWebCamp London
For the last couple of weeks, I’ve been helping out Cheuk and Calum organise IndieWebCamp London and all the excitement has been building up now that we’re approaching the date of the event.
Similar to other IndieWebCamps, we’ll start off the day with breakfast, intros and keynotes followed by planning our day in a BarCamp-like environment.
Everyone is encouraged to bring up topics and participate in the discussions. With a barcamp on day one, we’ll have the second day to build things. At the time of writing, there will be a keynote from Kevin Feeney and the schedule for the weekend is available on the event page.
I attended my first IndieWebCamp in 2018 and I’m pretty stoked to be contributing to a community that means a lot to me. I’m really hoping that at least someone goes home feeling excited about building things for themselves, similar to how I felt.
So, do you have a personal website to work on? Or do you want to start one? There’s still time to register and join us on the 14th of March.
Further reading:
February bookmarks
I didn't realise February was over until today!!!
Bookmarks from February
Web development/tech related content
- a11y.css - by Gaël Poupard.
- We’re Banning Facial Recognition. We’re Missing the Point. - by Bruce Schneier.
- TIL the ruby tag - by Robb Owen.
- Gatsby Starter Book - by Sara Vieira.
- Expressive Design Systems - by Yesenia Perez-Cruz.
- Images with a consistent surface area - by Piper Haywood.
- Pulling data from websites into Google Sheets - by Nick Colley.
- The Ghost of Stagnation - by Alejandra Villa.
- Image masks: Portraits - by Ruth John.
- #16 alt, no wait…, aria-label, no wait…, alt - by Michael "Spell" Spellacy.
- Guerilla design systems. - by Laura Gonzalez.
- Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective - by Facundo Corradini.
- Reading recommendations: Animation on the web and vestibular disorders - by Manuel Matuzović.
- Lesser-known CSS properties in GIFs - by Pavel Laptev.
- A Complete Guide to Links and Buttons - by CSS Tricks.
- What forces layout / reflow - by Paul Irish.
- While You Weren’t Looking, CSS Gradients Got Better - by Ana Tudor.
- Carousel Concepts - by W3C.
- Now you know - by Christopher Neugebauer.
- Keeping it simple with CSS that scales - by Andy Bell.
- font-variant-numeric: tabular-nums - by Sebastian De Deyne.
- Frend - by frend.co.
- Merry-Go-Round - by Estelle Weyl.
- Typographic grid layouts - by Michelle Barker.
- Accordions Are Not Always the Answer for Complex Content on Desktops - by Hoa Loranger.
- Fixed Headers and Jump Links? The Solution is scroll-margin-top - by Chris Coyier.
- Why 543 KB keep me up at night - by Manuel Matuzovic.
- HTML: The Inaccessible Parts - by Dave Rupert.
Not exactly web development related
- Stop Blaming History for Your All-White, All-Male Movie - by Aisha Harris.
- Very Responsive Typography with Variable Fonts - by Mandy Michael.
- Learning from ‘Bad’ Writing - by Dr Lucy Allen-Goss.
- PSA on "unravel thread tools"
- You'll Never See the Iconic Photo of the 'Afghan Girl' the Same Way Again - by Ribhu.
- Being Your Selves: Identity R&D on alt Twitter - by Aaron Z. Lewis.
- Sharing my salary publicly - by Nienke Dekker.
- Filter out male privilege, and the web can be a ghost town - by Mark Wilson.
- Top 10 Pro-tips for Working Remotely - by Carie Fisher.
- We don't need to look real on social media - by Rachel Charlene Lewis.
Miscellaneous
Funny or cute or happy or uplifting content etc.
Made me think
Content warning: This section might include content that isn't uplifting and happy but rather thoughts that stayed with me.
- On Facebook, anti-vaxxers urged a mom not to give her son Tamiflu. He later died. - By Brandy Zadrozny.
TIL: Iframes and performance
Last November I attended FFConf where I saw two talks about performance: one from Anna Migas and another one from Harry Roberts. I instantly memorised one particular thing from each of the talks. From Anna's I took a mental note to add font-display: swap; and from Harry's talk I was amazed that the order inside the head tag impacts performance.
While I learned that last November, last week I finally had the to chance to see the impact of making those changes on a client's website. This website's performance wasn't great but it seems like this was a very recent issue. I remember the same website actually having a decent performance a while back so something must have happened recently.
I decided to do the "quick wins" first and collect data to see if things had improved. I inspected Harry's personal website and tried to reproduce the ordering of the tags in the head along with adding the font-display: swap;. I don't know why I was so surprised when I compared the data and saw that it actually helped. However, it still had some strong hickups and when I was reading the suggestions for improvements from the testers I used, I realised that those issues were coming from third-party code.
This third party code was actually an iframe from a social media/media website and it was recently added at the top of the main page.
The window’s onload event doesn’t fire until all its iframes, and all the resources in these iframes, have fully loaded. In Safari and Chrome, setting the iframe’s SRC dynamically via JavaScript avoids this blocking behavior.
The above quote comes from a blog post written 10 years ago so I had an extra check to make sure it was still accurate. As a result of this, I also came across an experimental API that I wasn't aware of either.
It actually makes sense? I've never thought about it, come across a situation where the content of the iframe was so heavy, or even come across a project that used third party embeds besides YouTube, surprisingly.
So lesson learned I suppose: I will keep this in mind when working on projects especially when they allow content editors to embed from third parties.