Juan Fernandes
28th August 2024 If you’re reading these HTML element guides alphabetically, you will have already read about and learned what a sectioning element is. If you’re embracing chaos and reading these element guides in a random order, then I salute you and wish you the best of luck. Like , is a…
From Emil Kowalski’s newsletter (my Feedbin cache for your convenience): I started writing more blog posts recently. I like it because it's different than X. You get a spike of views when you share something on X, but that dies off quickly. If you provide great value with your posts, people will…
As a UX Designer, working efficiently is always a priority—and leveraging the full power of your design tools can help. Figma offers a plethora of keyboard shortcuts that can significantly elevate your workflow and productivity as a designer. We checked in with our new Advanced Figma course creators…
A long time ago, I wrote an article on how to add anchor links to headings in Jekyll. It got a fair amount of interest, and I was pretty pleased with the code I wrote, as it was short but also very readable. Little did I realize how versatile this code was and how relevant it would still be 9 years…
Many people are confronted with the topic of web accessibility for the first time as a result of the EAA (European Accessibility Act) (why this confrontation didn't happen much earlier is another matter...) and are downright afraid of the topic, its complexity and ‘conformity’ per se. And yet I…
11 Comments In response to Ed Green. Ed, Thanks for sharing your thoughts. The question is perfectly capable of being intuited based on the forum in which it is asked. Not every question is asked in a forum where context is clear. Consider the generalist A11y Slack. Or an email from someone you…
Daily Tips On Friday, I wrote about why I love using flat text files instead of a database for my projects. One of the more common questions I got was how I search for things, and the performance impacts of doing so. The truth is… I don’t! The structure of my file system—lots of small, sensibly…
Dieser Text ist auch auf Deutsch verfügbar. One point from Alvaro Montoro's CSS One-Liners post triggered me. Increase the text size body { font-size: 1.25rem; } Let's face reality: browsers' default 16px font size is small. Although that may be a personal opinion based on me getting old 😅 When I…
5 February 2019 The first rule of form design is to only ask for information you actually need to give users a good experience. But sometimes asking for additional information helps the user. Now you could just mark the field as optional. But a lot of the time this is not the best UX. For example,…
Daily Tips Yesterday, we looked at the Web Component lifecycle. While Web Components don’t have data reactivity, one of the lifecycle methods built into the Web Component API can be used to detect when an attribute on your custom element changes. Today, we’re going to learn how to do that. Let’s dig…
15th August 2024 If you’ve never killed a Tamagotchi, you’ve probably never used an element. Like Tamagotchis, elements used to be all the rage, fell out of favor, and obstinately continue to exist. The last time I wielded an element, four things were very different: Nobody browsed the web on…
tfw when you have an idea for a personal website redesign, and then you build it, and then you hate it, and then you have to decide whether to ship it anyway or keep what you have As you can probably guess from the title[1], I decided to keep what I have and throw away what I built. But I felt…
The way I’ve seen great work made isn’t using any sort of design process. It’s skipping steps when we deem them unnecessary. It’s doing them out of order just for the heck of it. It’s backtracking when we’re unsatisfied. It’s changing things after we’ve handed off the design. It’s starting from the…
Daily Tips The more I work with flat files, the more I love them over a traditional database setup. Let’s dig in! What is flat file storage? A flat is just a file you can read and write with a text editor program. It could be .txt or markdown, but it might also be .json or YAML or something else. A…
At the moment my site has 6 different feeds. 5 RSS feeds, an ICS feeds and JSON versions of the 5 RSS feeds. I was asked how they're put together and, well, it's a bit involved. At the core of the implementation is this liquid.js template: It accepts data which are passed through the…
A post from Remy on Mastodon recently got me thinking: Been picking up some of the jsbin archive work. Today, there's currently 62 millions bins stored. The last full copy archive I ran (which downloads the full html, js + css into a single page) holds 42 millions bins, consumes 130gb and the names…
I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see what I mean: The highlighted line is done with a element in HTML, which feels right. I noticed the class name on…
Daily Tips Yesterday, I wrote about how I ditched my Sass build step for vanilla CSS. As part of that process, I ended up refactoring a lot of code in a way that made it simpler and more efficient. For example, my old Sass files were filled with code like this… Sass supports media query nesting,…
Daily Tips I’m removing all build steps from all of my websites. I’m just so damn sick of having to install NPM scripts and run CLI commands every time I want to update my CSS or JavaScript. Today, I ripped out Sass in favor of 100 percent vanilla CSS. I convert all Sass variables to CSS custom…
Hi All! 🤗 Let’s talk about the first thing many of your visitors will see and thus one of the most important places on any personal website: the home page. “The home” is where you leave a first impression and where people decide whether the website they are looking at – and the services you might be…
Here’s something you might not know about me: I like to play golf. As such, I follow a couple of golf-related brands on social media as a guilty pleasure. The other day an image surfaced on Taylormade’s account which showcases Tommy Fleetwood playing some of their newest irons. When I mindlessly…
7th February 2024 Sometimes a web development client doesn’t know quite what they want. Trying to guess is difficult and delivering a guess is risky. Where they have a vague idea, I offer to set them up with the means to create what they want for themselves—when they work out precisely what that is.…
Cascade Layers are useless* posted on 21.06.2023 *if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest…
Chances are, you’ve likely visited a website whose design incorporates the full width of the browser. You may have noticed the content wasn’t easy to digest as your eyes scanned the full width of the page. It’s actually a well-known readability and user experience (UX) issue. Research in typography…
I’ve been thinking a lot about how the web is changing. Here’s Nilay Patel: There’s a theory I’ve had for a long time that I’ve been calling “Google Zero” — my name for that moment when Google Search simply stops sending traffic outside of its search engine to third-party websites. When I first…
Buy the Killer Proposals template Proposals can also be effective selling tools, answering clients’ questions and encouraging them to hire you. Your goal should be to create trust and show that you understand their problems and know how to solve them. In other words, you want the client to see you…
The hunt to find more use cases for local variables. Allie Paschal 8 min read· Dec 8, 2023 -- At this point in 2023, almost all UX UI designers who use Figma should know about one of Figma’s biggest features of this year, local variables. Something I have continued to struggle with since its initial…
July 29, 2024 indieweb blogging webweaving What’s going on, Internet? This one has been bouncing around my head for months now, and I’ve had this draft open for the past three weeks. It’s time to get it out of my head and onto the web. Recently, on our forums, community member Manatee asked, “What…
29 July 2024 Last Sunday I took a break from being a designer to play in the tennis men’s open singles finals. Sadly, not Wimbledon. Just at my local club in North London. Here’s how it went: I lost the first set 4-6 I won the second set 6-3 I lost the final set 1-6 Even though I lost, I was happy.…
Daily Tips I absolutely love static site generators. But their biggest weakness (when using them for clients and non-technical folks) is their lack of integrated CMS. There are a lot of third-party options. I’ve found a few that I think get the job done. But candidly, I haven’t found any that I…
29 July 2024 – Baldur Bjarnason From Burnout to Balance: AI-Enhanced Work Models for the Future Nearly half (47%) of workers using AI say they have no idea how to achieve the productivity gains their employers expect. Over three in four (77%) say AI tools have decreased their productivity and added…
I just updated the footer of this site. This is how it looks now. I'm going all corporate and legally official and stuff. Yeah — I hate it, too. You probably don't pay attention to footers and licenses. That's okay; neither do I. Previously, my site's footer included a meaningless Copyright © 2024…
Knowledge HubCompare Center November 18, 2024 2 min Three modern CSS properties your website must have MSMojtaba SeyediContent Writer 1. Scroll-margin Ever used an anchor link on a webpage, trying to find something, but got totally lost? It happens way too often. Usually the target elements like…
Toolbelt worthy, powerful, and stable CSS you can use today. Adam Argyle I believe every front-end developer should know :has() is more than a "parent selector", the how and why of a subgrid, how to nest with built-in CSS syntax, how to let the browser balance headline text wrapping, and how use…
Our research shows that UX professionals can face severe communication challenges within their organizations, especially when collaborating with other teams or departments. These challenges are worse in organizations with low UX-maturity levels because such organizations tend to be oblivious to…
In this quick tip, we’ll show how easy it is to animate a background gradient with CSS. In a recent article, we showed how to set a background gradient on text. The CodePen demo below shows the result. See the Pen Text with left to right gradient by SitePoint (@SitePoint) on CodePen. Make sure to…
Collections and lists are a wonderful thing, and filters simply make them better. On this website, the first use case for a filterable collection was my whisky collection, and I’ve also added a filter to my /albums page in the meantime. Both lists are filterable by different criteria, but use the…
I know that HTML Tables should never be used as a layout tool, but thanks to the giant market share of e-mail clients that live in the past (and some that seem to be in zombie mode), I think it is fair to mention the HTML table as the most robust way to have a grid in email HTML world. I know, I…
Daily Tips A few weeks ago in one of my YouTube videos, I used the [hidden] attribute to hide and show some elements in the DOM. One of my subscribers mentioned that they hadn’t heard of that attribute before, and were glad I mentioned it. Because JavaScripts always has at least two or three ways to…
No articles.