I’ve been debugging CSS that looks weirdly off for days and can’t get it to look nice. Then I realized I was looking at a 150% zoomed-in window I had opened for presenting the page at a meeting. How is your day going?
I’ve been debugging CSS that looks weirdly off for days and can’t get it to look nice. Then I realized I was looking at a 150% zoomed-in window I had opened for presenting the page at a meeting. How is your day going?
Is the HTML dialog element safe to use already? Can I use looks pretty green to me Dialog element | Can I use… Support tables for HTML5, CSS3, etc
Seriously considering going to CSS Day 2023, 8th & 9th of June, Amsterdam. Haven’t been to a conference ever since 🦠. Maybe it is time?
My favourite CSS resource Relearn CSS layout: Every Layout is on Black Friday sale with code BIBLE_BLACK. Highly recommended ebook/website that explains how to create fundamental layouts using modern CSS capabilities.
This demo on CSS effects 🤯 Pokemon Deckz
I feel like my personal tech stack will steer towards CSS, HTML, and web components away from React. Brad Frost’s post sums up the latest on those tech
Web components! They’re currently at the vanguard of web development and are a reliable source of hot drama in the community. We’ve built a number of web component-powered design systems with Fortune 500 companies over the last 4 years, and it’s been a wild ride. We’ve seen a ton of success, we’ve bumped up against many rough edges, and we’re still here. We are increasingly relying on web components to help our clients establish and evolve their design system efforts. We’re enthusiastic about web components and think you should be too.
Let’s talk about web components | Brad Frost
Webc is something I want to try out
WebC is a new tool by Zach Leatherman (creator of Eleventy) for serializing custom elements at build time. It aggregates component-level CSS and JavaScript, allowing developers to keep their styles and scripts together with the markup as single file components, the way you may be used to if you work with JavaScript frameworks such as Svelte or Vue.
This comment by Brad Frost stuck to me
Zeitgeist is a wild thing, and we’re all influenced by it. In my work, I often get to see what happens after the zeitgeist has moved on and the people that took the bait are left with the consequences of those decisions.
Why We’re Breaking Up with CSS-in-JS | Brad Frost
It is a comment on the blog post by a maintainer of CSS-in-JS library Emotion.
Hi, I’m Sam — software engineer at Spot and the 2nd most active maintainer of Emotion, a widely-popular CSS-in-JS library for React. This post will delve into what originally attracted me to CSS-in-JS, and why I (along with the rest of the Spot team) have decided to shift away from it
Professionally, I’ve made it a point always to choose a project with a new tech (my last three projects were in C for PowerPC and for STM-32, React (web) UI project, and the latest one was a big AWS serverless backend project). While it is very motivating for learning, I don’t think it is optimal for someone dreaming of someday building a somewhat independent software business (of some kind). I need to standardize something for my stuff. Trying to narrow it down with the following parameters:
I know I like Python. I love playing with CSS. I have respect for good old HTML. I am almost sure I would enjoy iOS development (I know I’m not too fond of Android development), and I love the AWS serverless stack (also stuff like Vercel/Netlify). I’ve written a lot of Java and SPA Javascript in my life, but I feel like both these technologies are more useful for a consultant (that I will continue to be as well). Things that I don’t know yet I am fascinated by Swift, Kotlin, and Rust.
Then, I have dabbled with data science stuff and machine learning but not sure I want to take a deeper dive there, it would almost certainly mean a lot of studying, and I still wouldn’t be the 30-year-old math PhD the field is full of.
I also have a lot of thoughts on what else needs to change in my career. I am somewhat frustrated with the limited capabilities of software professionals to make an actual, meaningful impact on customer business. In many cases, I come to projects way too late to make anything else than put out fires. I am unsure how I will change this, but I feel that I could make a much more significant impact doing the things I am good at if I only talked to different people in organizations. Lots of boring biz dev work ahead
Nice, long write up of a CSS reset with just 13 rules at www.joshwcomeau.com
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 😒
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.