
CSS { In Real Life }
1,095 FOLLOWERS
A blog about front-end technologies, with a particular focus on CSS. Find the latest tips, tricks, tutorials, and handy links related to CSS. Written & developed by Michelle Barker, Lead Front End Developer at Atomic Smash and CSS superfan.
CSS { In Real Life }
1M ago
A recently published post by the science fiction writer Robin Sloan (Is It Okay?, published 11th February 2024) ignited some examination and debate among my little corner of the web. The post asks the question of whether it’s ethical, from an individual moral standpoint to use an LLM (Large Language Model, such as Claude or GPT-4). Robin raises some important points about the trade-offs that come with LLMs, depending on their application.
If their primary application is to produce writing and other media that crowds out human composition, human production: no, it’s not okay.
He also offers a ..read more
CSS { In Real Life }
1M ago
Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article for Piccalilli I’ll share my thoughts and findings on when, why and how you might consider carrying out such a major technical migration, applicable to any large web project, and some tips and advice on migrating from Vuex to Pinia specifically.
Read the article ..read more
CSS { In Real Life }
2M ago
Recently I’ve been working with map data to create interactive visualisations. When working with maps it’s common to receive data as GeoJSON, a JSON format for encoding geographic features, which specifies the type of geometry and co-ordinates for the features we want to display on a map. Javascript mapping libraries such as Mapbox GL are designed to consume GeoJSON to render features on a canvas. I’m fairly accustomed to using GeoJSON in this way — for example, rendering geographic areas as different coloured polygons overlaid on a map to show varying values for different areas.
But for a rec ..read more
CSS { In Real Life }
3M ago
I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined with the fact that software updates are no longer available for this model led me to the conclusion that buying a new phone was probably a good idea at this point.
Choosing a new phone
I’m not a person who needs the latest and greatest tech. It just needs to function, and let me complete the tasks I ..read more
CSS { In Real Life }
3M ago
The Green Web Foundation has recently redesigned their green web hosting directory. Previously the directory was a useful resource for finding hosting platforms that at least claim some sustainable credentials but, as I’ve noted before the information provided by each web host was somewhat limited. From the directory alone it was impossible to discern which providers could claim to be running on renewable energy rather than buying carbon offsets, for instance, or which providers were doing the bare minimum of box-ticking, as opposed to making sustainability a key part of their offering. Findi ..read more
CSS { In Real Life }
3M ago
I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the progress of a scroll container, as I wrote about not long ago for MDN.
It’s remarkably easy to link an animation to the root scroller (which in most cases, is probably where it’s going to be most useful). This demo uses the animation-timeline property to create a parallax effect. We’re creating an anonymous scroll timeline linked to a keyframe animation. The animation translates an element on the y axis, using a custom property value. We’re using thr ..read more
CSS { In Real Life }
4M ago
Baldur Bjarnason shared an article in a recent edition of his newsletter about AI in education. As a parent of an 8-year-old, this is something that’s been on my mind a lot recently. Like most other parents I’ve encountered, I find the idea that teachers can be “replaced” by AI so preposterous that I’d imagine no one who’s ever had a child, met a child, or even been a child would take it seriously. Apparently though, there are some for whom the idea of taking an immeasurably complex, still-forming, constantly changing human brain, understanding, caring for and nurturing it, and imbuing it with ..read more
CSS { In Real Life }
5M ago
Ahmad Shadeed has published a great article digging into the proposed CSS masonry layout syntax. In case you’re unaware, the term “masonry” for layout is used to describe the kind of grid layout where instead of items of various heights being aligned in neat horizontal rows, they are shifted to fill the leftover space, effectively creating a brickwork effect. It was popularised by the website Pinterest some years ago, and became a widespread UI design trend for a while.
Masonry example from the Webkit blog
As it has always been impossible to build a true masonry layout in CSS, developers have ..read more
CSS { In Real Life }
5M ago
The Green Web Foundation have published a thorough and insightful report into the sustainability of AI, and the results are pretty damning. Over the couple of years I’ve been talking about web sustainability I haven’t really touched upon AI a whole lot, partly as there wasn’t a lot of publicly available hard data about its environmental impact. Now, however, it’s become an issue that’s too big to ignore. We can’t not talk about it.
Previously I was under the impression that the majority of AI’s energy use happens during the training stage. Although the vast amounts of energy and water resource ..read more
CSS { In Real Life }
5M ago
When writing blog posts in Markdown files I often find myself needing to add HTML elements that aren’t accounted for in Markdown. Some common ones are <aside> elements, where I include content tangentially related to the post itself, or external references.
Having to include HTML in Markdown is kind of a pain, because once you start writing HTML, you can’t then use Markdown inside it: everything inside the HTML element must also be HTML. This is pretty annoying for elements where you might want to include multiple paragraphs or links, for example. The markdown writing experience is far m ..read more