I created a website called The Power of Serverless for Front-End Developers over at thepowerofserverless.info a little while back while I was learning about that whole idea. I know a little more now but still have an endless amount to learn. Still, I felt like it was time to revamp that site a bit.
For one thing, just like our little conferences website, the new site is a subdomain of this very site:
You can make the text inside any HTML element editable by adding the contenteditable attribute.
<div contenteditable>
Hey, I'm like a textarea kinda now!
</div>I wouldn't say there are wheelbarrows full of use-cases for that, but it's neat. One possible use might be an in-progress design in which editing the content from the design itself is useful either for you, or for someone else (a client?) who needs to change the text.
So, great, contenteditable. Now someone can … Read article
I was asked this recently by a fellow developer who was at the same web tech conference I was at. This developer had met a lot of new people who literally introduced themselves as full-stack developers sort of the way Bob Vance, Vance Refrigeration would on The Office, but it was Tony Frank, Full-Stack Developer instead.
I suspect the developer asking the question taken from the title of this post already knew the basic idea of what people mean … Read article
So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:
It's "the inside problem" in web layout. It's not hard, it's just that there are lots of considerations. … Read article
Feedbin is the RSS reader I'm using at the moment. I was reading one of Harry's blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it, and it revealed the note.… Read article
I've heard people say that the #1 most exciting and important thing that came out of Google I/O this year was the evergreen Googlebot:
Today, we are happy to announce that Googlebot now runs the latest Chromium rendering engine (74 at the time of this post) when rendering pages for Search. Moving forward, Googlebot will regularly update its rendering engine to ensure support for latest web platform features.
Before this, I guess I never even thought about it.… Read article
There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.
Let's look at the ways.… Read article
I like to do these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family. … Read article
MutationObserver watches the DOM, specifically the places you tell it to, like:
document.querySelector('#watch-this');...and it can tell you (trigger a callback) when stuff happens — like when a child is added, removed, changed, or a number of other things.
I used it just the other day to watch the <head></head> of a Pen and detected newly-injected processed Sass code, so you could use CodePen to see Sass and CSS side by side:… Read article
Every time "UX" comes out of my mouth or is typed by my fingers, I think, "did I just use that term correctly?" It feels like such a big and loaded term these days, that perhaps the way I use it only contributes to the confusion. Ryan Singer frames that problem well:
… Read articleDebates continue to rage about the role of UX designers, user research, and how far knowledge about the user should permeate the organization. On one extreme,