Menu

CSS

Inspiring high school students with HTML and CSS

February 21st, 2020

Here’s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development: […] the response from that class of high school students delighted me and grounded me in a way I haven’t experienced before. What I view as a simple code was absolute magic to them. And for all…

Animate SVG Path Changes in CSS

February 20th, 2020

Every once in a while I’m motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q…

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

February 18th, 2020

Andrew Welch had a little CSS challenge the other day to make an ordinary div: • centered vertically + horizontally • scales to fit the viewport w/ a margin around it • maintains an arbitrary aspect ratio • No JS There’s a video in that tweet if it helps you visualize the challenge. I saw…

Helping Browsers Optimize With The CSS Contain Property

February 10th, 2020

There is a growing number of things that we have to do to help the browser achieve peak performance. Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors. Regular images…

CSS4

February 4th, 2020

Tab Atkins in 2012: There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists. Rachel Andrew in 2016: While referring to all new CSS as CSS3 worked for a short time, it doesn’t reflect the reality of where CSS is today. If you read something about CSS3 Selectors, then what…

The Three Types of Code

February 3rd, 2020

Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open-source project. Whether I’m writing HTML or CSS or building a React component, thinking about these different…

Full Stack Panic

February 1st, 2020

A new podcast from Sean Fioritto inspired by Joel Califa’s term “Full Stack Anxiety”. … the little voice in your head says … “I should know all of this. Do I even know what I’m doing?” Why do web developers the world over feel like this? There is an episode with Joel talking about it…

Going Beyond Automatic SVG Compression With the “use” Element

January 27th, 2020

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only a few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact…

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

January 24th, 2020

Some HTML elements accept width and height as attributes. Some do not. For example: <!– valid, works, is a good idea –> <img width=”500″ height=”400″ src=”…” alt=”…”> <iframe width=”600″ height=”400″ src=”…”></iframe> <svg width=”20″ height=”20″></svg> <!– not valid, doesn’t work, not a good idea –> <div width=”40″ height=”40″></div> <span width=”100″ height=”10″></span> Those attributes are sometimes referred…

The Web in 2020: Extensibility and Interoperability

January 22nd, 2020

In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability. Let’s break those down. Extensibility Extensibility describes how much someone can take a particular technology and extend it to their own needs. We’ve built…