Nice, long write up of a CSS reset with just 13 rules at www.joshwcomeau.com

Responsive Youtube Embeds

For future reference this is how to style YouTube embeds so that they are responsive (scss-format):

.tube-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    }
}

Wrap embed code to div with class .tube-embed (this technique courtesy of all top 10 hits on search “youtube embed responsive” but I wanted my own copy-paste place)

The only non-obvious bit here is the padding-bottom: 56.25%; which makes sure that embed is in the usual aspect ratio 16/9 (I wonder if CSS aspect-ratio would help here 🤔.

I use this technique in my language learning blog: Russian Verbs - Past Tense | Three Words. I am planning to make it an Eleventy short-code some time soon.

I’ve been doing CSS studying a lot lately and I am itching to try out some things but I promised myself Saturdays are free of work related thinking and doing. Tomorrow morning then, past Timo 😒

Good meetings

This text, Good Meetings | CSS-Tricks, by Sarah Drasner touches on many points I’ve been trying to figure out professionally, mainly because I tend to end up being the person who runs the meetings. I end up volunteering a lot mostly because I just can’t keep my mouth shut when there is the awkward silence.

I liked the most the bits about setting the agenda:

An agenda should ideally always state the purpose of the meeting. I personally love to then include some bullets as talking points, as well as space to take notes right in the document during the meeting.

But also how not to lock down the agenda too much:

but if you come to a meeting where an agenda is locked top to bottom with material, it can sometimes shut down the collaborative aspect of the meeting

I also like the concept of the Directly Responsibly Individual

…you must designate who owns the project and ultimately makes decisions when there’s one to be made.

And then there is something that just needs to be part of every meeting:

There’s a clear decision, outcome, and next steps at the end

This text is an excerpt from the book Engineering Management for the Rest of Us which I’ve put on my “to-read” list

Spent a lot of time upping my certification game for projects starting in fall and feeling like there is just work and study in my life. Need to figure out something fun to do over the weekend to relax. No, learning about CSS is not relaxing Timo.

Lot’s of fun coding today. CSS, React, Next.js. Next step is to get it running on Vercel. Planning to do a comparison blog posts of hosting similar web apps on Vercel, Netlify, GCP and AWS.

This voxel drawing CodePen has making circles and it still stuns me every time I encounter it VoCSSels - Easily create 3D CSS & HTML Voxel Models. Howhowhow do you even come up with the idea, let alone flawless execution?

I went to learn CSS and now going back to React feels like I forgotten everything. How do you keep up on every front end developer skill?

I find this demonstration of design tool concept What’s Glisp? super fascinating. I am almost certain that this intersection of code and design tool will some day provide something magical. I feel that design tools like Figma and frameworks like Swift UI or Jetpack Compose or modern CSS on the latest browsers will eventually converge somewhere around this spot where designer coders or coder designers can find a completely new level of productivity.

Thing that I encountered through CodePen newsletter css-doodle. Is very nice. Maybe some day I will create something with this

Another reminder that CSS is not that hard and things that were difficult are nowadays easy to achieve: Centering in CSS

Spotted this CSS styling of Accessible Custom Toggle Switch from CodePen newsletter. Looks very nice, I wonder if I’ll need that in any of my projects

This tool looks very interesting: a browser plugin to extract Tailwind CSS code for elements on a web page: Transform every element on any website to Tailwind CSS – Windy

Reading it because I am going through the excellent Learn Eleventy From Scratch - Piccalilli course and now ended up reading (again) this bit about CSS units: Units: Every Layout

This is interesting post about how to defer loading of some CSS Modern Asynchronous CSS Loading | Filament Group, Inc.

Filed under - something I read about CSS today: Animating a mobile menu | letorey.co.uk

Reading a delightful Piccalilli newsletter and found this two gems: A Single Div CSS art and following a chain of links a short video on how to create those: Use Multiple Background Images to Create Single Element CSS Art from @jh3yy on @eggheadio.

Speaking of CSS. Today I’ve read this CSS tricks article on gradients: A Complete Guide to CSS Gradients | CSS-Tricks.

Today I will try to teach myself CSS flexbox. If I had more energy I would work on my first proper Eleventy site but too tired to do that today. Let’s try Flexbox Defense first, then read theory and perhaps Flexbox Froggy after that

Read: Every Layout by Heydon Pickering & Andy Bell

Read a very nice book about foundations of CSS lay outing (think box model and centering, not styling) Relearn CSS layout: Every Layout. Also the accompanying website is well worth the prize (both included in the bundle price). Helps one grasp on how to think about building a web site from principals and basic building blocks. Recommend it strongly to anyone who struggles to understand CSS like me

WDIBI III: Embrace the Platform

Jumping around in my list of SW related foundational beliefs I picked up today: Embrace the Platform

As I said yesterday in my WDIBI II: Choose Speed // Timo Koola post, I firmly believe in speed over developer experience. One other area where I think developer should prioritise user experience over developer experience is when selecting tools to address users in different platforms. I firmly believe that developer that actually thinks users first (as everyone claims to do) never picks a cross-platform framework to develop their application.

I consider there to be three major platforms:

  • Web (both websites and web applications)
  • iOS
  • Android

I think if you are going support users on one or more of these platforms one should do a native solution for each. For web, if possible, stick to easy and simple yet immensely powerful tools that plain old HTML and CSS give you. I could go on and on about web but expletive deleted Website explains it very thoroughly. Sometimes one needs to do something more complicated and resorting to something like React is perfectly fine. I just think one needs to be very careful about performance and accessibility.

As for Android and iOS, if you are serious about your users go with native solutions for respective platform - build with native idioms and frameworks and you’ll save a lot of cross-platform headaches that are not going to give anything to your users anyway.

Specifically I don’t recommend (if asked) using React Native, building up a PWA (I might write about their specific problems some day), or Flutter. Stick to platform tools, your user likes their iPhone way more than they do care about your brand (unless you happen to be WeChat) Apple’s China Problem – Stratechery by Ben Thompson

How about legacy platforms like Mac or Windows? I’d say it depends - are you really going to address the people on this platform? Go native. Do you just want to cover as much area as possible? Consider using web to address these platforms.

Just one quick parting note - this of course applies only to software directly accessing consumer needs. Calculation for Enterprise software might be different and for some enterprise internal tooling very, very different. I’d still say even within “enterprise” go native, if your use case depends on user experience. In other areas: do the best thing for the team.

This is part I of my series of What do you Believe in as a SW Developer? // Timo Koola

Reading book version of Every Layout by Andy Bell and Heydon Pickering and I love this quote

“Instead of thinking of designing for the web as creating visual artefacts, think of it as writing programs for generating visual artefacts.”

Helps me in my quest to understand CSS

CSS-Tricks, Chris Coyier: All the Ways to Make a Web Component is an interesting comparison on different ways to create a web component. I’ve been thinking of trying out Svelte and this article nudged me forward on that path…

Filed under “some day I will be looking for CSS grid reference/cheat sheet” Grid Cheatsheet

Two quick picks about learning CSS and attitude problems “real developers” seem to have with it: When debugging, your attitude matters - Julia Evans (re)learning CSS | Derek Featherstone