Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
Articles [alt+h] Reading List [alt+r] [alt+s]

A Beautiful Site

Visit Blog

Sort By

Popular [alt+1] Recent [alt+2]

Change View

List View [alt+w] Expanded [alt+e]
A Beautiful Site
Converting a URL Object to a Plain Object in JavaScript I needed to convert a URL object to a plain object yesterday. You might have used it before. It's...
a year ago
71

Converting a URL Object to a Plain Object in JavaScript

from A Beautiful Site [alt+shift+b] in programming

a year ago
I needed to convert a URL object to a plain object yesterday. You might have used it before. It's pretty handy for working with URLs! const url = new URL('https://example.com/'); console.log(url); // URL {origin: 'https://example.com', protocol: 'https:', username: '',...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Anchoring Software to Major Versions In a SemVer world, major releases are those which contain incompatible API changes. We often see...
9 months ago
67

Anchoring Software to Major Versions

from A Beautiful Site [alt+shift+b] in programming

9 months ago
In a SemVer world, major releases are those which contain incompatible API changes. We often see software projects anchor themselves to major versions for long periods of time, usually with the promise of stability. We all know how frustrating it is to upgrade a package and run...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
If Edgar Allan Poe was into Design Systems Once upon a midnight dreary, while I pondered, weak and weary, While I nodded, nearly napping,...
3 months ago
61

If Edgar Allan Poe was into Design Systems

from A Beautiful Site [alt+shift+b] in programming

3 months ago
Once upon a midnight dreary, while I pondered, weak and weary, While I nodded, nearly napping, suddenly there came a tapping, "'Tis a design system," I muttered, "bringing order to the core— Ah, distinctly I remember, every button, every splendor, Each component, standardized,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Reflection and Custom States in Web Components In the Web Component world, attribute reflection is commonly used to style custom elements both...
8 months ago
60

Reflection and Custom States in Web Components

from A Beautiful Site [alt+shift+b] in programming

8 months ago
In the Web Component world, attribute reflection is commonly used to style custom elements both internally and as public APIs for consumers. If you're not familiar, attribute reflection occurs when an attribute in the DOM is updated due to changes in a corresponding property. A...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Web Components Are Not the Future — They’re the Present It’s disappointing that some of the most outspoken individuals against Web Components are framework...
4 months ago
58

Web Components Are Not the Future — They’re the Present

from A Beautiful Site [alt+shift+b] in programming

4 months ago
It’s disappointing that some of the most outspoken individuals against Web Components are framework maintainers. These individuals are, after all, in some of the best positions to provide valuable feedback. They have a lot of great ideas! Alas, there’s little incentive for them...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Styling Custom Elements Without Reflecting Attributes I've been struggling with the idea of reflecting attributes in custom elements and when it's...
8 months ago
57

Styling Custom Elements Without Reflecting Attributes

from A Beautiful Site [alt+shift+b] in programming

8 months ago
I've been struggling with the idea of reflecting attributes in custom elements and when it's appropriate. I think I've identified a gap in the platform, but I'm not sure exactly how we should fill it. I'll explain with an example. Let's say I want to make a simple badge component...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Revisiting FOUCE It's been awhile since I wrote about FOUCE and I've since come up with an improved solution that I...
2 months ago
55

Revisiting FOUCE

from A Beautiful Site [alt+shift+b] in programming

2 months ago
It's been awhile since I wrote about FOUCE and I've since come up with an improved solution that I think is worth a post. This approach is similar to hiding the page content and then fading it in, but I've noticed it's far less distracting without the fade. It also adds a two...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Component Machines Components are like little machines. You build them once. Use them whenever you need them. Every now...
5 months ago
53

Component Machines

from A Beautiful Site [alt+shift+b] in programming

5 months ago
Components are like little machines. You build them once. Use them whenever you need them. Every now and then you open them up to oil them or replace a part, then you send them back to work. And work, they do. Little component machines just chugging along so you never have to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Building Custom Elements With a Library I often get asked why I use Lit to build web components. Hands down, it's become my preference after...
11 months ago
50

Building Custom Elements With a Library

from A Beautiful Site [alt+shift+b] in programming

11 months ago
I often get asked why I use Lit to build web components. Hands down, it's become my preference after years of working with various libraries and tools. Here's why I use it. Libraries offer a better DX # This seems like a selfish answer for a developer to lean on, but there are...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Find a name for almost any hex color Have you ever wondered what color that certain shade of blue is? Or maybe you've named your...
over a year ago
44

Find a name for almost any hex color

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Have you ever wondered what color that certain shade of blue is? Or maybe you've named your Less/Sass variables something like gray, light gray, lighter gray, etc. Here's a tool that will give you more reasonable names for all those colors. Name that Color lets you enter a hex...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Thoughts on Framework Churn I often worry about framework churn. A lot. But using a framework isn't a bad thing. After all, they...
a year ago
44

Thoughts on Framework Churn

from A Beautiful Site [alt+shift+b] in programming

a year ago
I often worry about framework churn. A lot. But using a framework isn't a bad thing. After all, they save time. They help you build things faster. Yes, there are costs associated with frameworks later on, especially as new versions come out and your app instantly feels like...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Finding the Closest Element Through Shadow Roots A great trick to find the closest element in the DOM that matches an arbitrary selector is...
over a year ago
32

Finding the Closest Element Through Shadow Roots

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A great trick to find the closest element in the DOM that matches an arbitrary selector is Element.closest(). // Starts at el and walks the DOM until it finds a parent element // that matches the selector. In this case, it will return the // <body>...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
SSH failing on macOS Sierra For me, upgrading to MacOS Sierra broke a lot of things that use SSH, including Transmit, Sequel...
over a year ago
32

SSH failing on macOS Sierra

from A Beautiful Site [alt+shift+b] in programming

over a year ago
For me, upgrading to MacOS Sierra broke a lot of things that use SSH, including Transmit, Sequel Pro, and a handful of other apps. In fact, it seems to break any app that uses an SSH key with a passphrase. 🤔 The solution I found was to tell SSH to use the MacOS keychain. Simply...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Custom Event Names and the Bubbling Problem The topic of custom element event names comes up every now and then, especially from Shoelace users...
over a year ago
32

Custom Event Names and the Bubbling Problem

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The topic of custom element event names comes up every now and then, especially from Shoelace users who get confused when events of the same name are emitted from different components. Take <sl-details>, <sl-dialog>, and <sl-dropdown>, for example. They all emit sl-show and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
What happens if IE8 "breaks" my website? Last year all of the hype was about IE8 and Microsoft's decision to default the browsers version...
over a year ago
31

What happens if IE8 "breaks" my website?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last year all of the hype was about IE8 and Microsoft's decision to default the browsers version targeting to "quirks mode" rather than standards mode. This essentially meant that developers would have to opt-in to IE8's standards mode using a proprietary <meta> tag that tells...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
JSON Feed JSON Feed is a lot like RSS, except instead of XML it's formatted with JSON. It's a rather new spec,...
over a year ago
30

JSON Feed

from A Beautiful Site [alt+shift+b] in programming

over a year ago
JSON Feed is a lot like RSS, except instead of XML it's formatted with JSON. It's a rather new spec, introduced just last week, but it's been getting some major coverage and a number of applications have already started supporting it. Since Postleaf was built for the modern...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
An Event Apart, Boston The plane took off from Orlando as I sat half asleep in my seat. With my laptop at my feet, I...
over a year ago
30

An Event Apart, Boston

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The plane took off from Orlando as I sat half asleep in my seat. With my laptop at my feet, I wondered what kind of intriguing things I would learn at the web conference I had signed up for. I anticipated this day for months now and it was finally here. I was on my way to An...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Rebuilding your Spotlight index in macOS I use Spotlight more than I like to admit, usually for launching apps. Recently, some of my apps and...
over a year ago
29

Rebuilding your Spotlight index in macOS

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I use Spotlight more than I like to admit, usually for launching apps. Recently, some of my apps and files stopped appearing — even ones I access frequently. After sifting through numerous posts online, I finally discovered one that seems to work. Running this command in the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Shoelace 2.0 It's been three years since I broke ground on Shoelace 2.0. Between then and now, the project has...
over a year ago
29

Shoelace 2.0

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's been three years since I broke ground on Shoelace 2.0. Between then and now, the project has amassed over 300 million monthly hits on jsDelivr and, as of today, it is jsDelivr's 73rd most popular project. And that was just the beta version. Today, I'm happy to announce that...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Hashing Passwords with Node.js and bcrypt The bcrypt library on NPM makes it really easy to hash and compare passwords in Node. If you're...
over a year ago
29

Hashing Passwords with Node.js and bcrypt

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The bcrypt library on NPM makes it really easy to hash and compare passwords in Node. If you're coming from a PHP background, these are roughly equivalent to password_hash() and password_verify(). Bcrypt is the de facto way to hash and store passwords. For a brief explanation of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
New shortcut keys in Windows 7 I was happy to learn that Windows 7 has some new shortcut keys that let you control certain aspects...
over a year ago
29

New shortcut keys in Windows 7

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I was happy to learn that Windows 7 has some new shortcut keys that let you control certain aspects of window management right out of the box.  They're pretty easy to remember too: Win + Up - Maximize the current window Win + Down - Restore a maximized window, otherwise minimize...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Netscape support ending in February 2008 On December 28th, 2007, the Netscape Blog announced that AOL is ending support for Netscape web...
over a year ago
28

Netscape support ending in February 2008

from A Beautiful Site [alt+shift+b] in programming

over a year ago
On December 28th, 2007, the Netscape Blog announced that AOL is ending support for Netscape web browsers effective February 1, 2008. This doesn't come as much of a surprise, considering the significant decline in Netscape's marketshare over the past decade to more competative...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Getting duplicate ids in an HTML document I needed a way to identify all HTML elements with duplicate IDs. This is a seemingly simple task,...
over a year ago
28

Getting duplicate ids in an HTML document

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I needed a way to identify all HTML elements with duplicate IDs. This is a seemingly simple task, but unfortunately, I didn't find anything out there that fit the bill. I did find a couple functions that returned the duplicates, but they didn't include the first occurrence (I...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Moving to Node.js The first version of Postleaf was written in PHP and lives on as Leafpub. It's a beautiful piece of...
over a year ago
28

Moving to Node.js

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The first version of Postleaf was written in PHP and lives on as Leafpub. It's a beautiful piece of software that I'm very proud of, but I decided to move the project to Node.js for a few important reasons. This is by no means a knock on PHP, which will always have a special...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Adding and removing virtual hosts on Ubuntu 14.04 Here's a cheat sheet for working with virtual hosts on an Ubuntu server. The instructions assume...
over a year ago
28

Adding and removing virtual hosts on Ubuntu 14.04

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here's a cheat sheet for working with virtual hosts on an Ubuntu server. The instructions assume you're not logged in as the root user. Change example.com to your own domain/subdomain. Adding a virtual host # Create the directory for your new site and grant permissions. If your...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Installing Shoelace in a React App Although Shoelace is a web component library, it ships React wrappers that lets you use the library...
over a year ago
28

Installing Shoelace in a React App

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Although Shoelace is a web component library, it ships React wrappers that lets you use the library idiomatically in React. This video shows you how to install Shoelace in a brand new Create React App. If you found this video helpful, please subscribe to my channel on YouTube...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Determine file extensions using JavaScript A quick JavaScript function to determine a file's extension. function fileExt(path) { return...
over a year ago
28

Determine file extensions using JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A quick JavaScript function to determine a file's extension. function fileExt(path) { return path.substr(path.lastIndexOf('.') + 1); }
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Success Requires Luck I've concluded that successful "makers" have one thing in common: luck. It's not that strategy and...
over a year ago
28

Success Requires Luck

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've concluded that successful "makers" have one thing in common: luck. It's not that strategy and vision don't play a role in success, but nobody — literally nobody — can guarantee that a product or service will be successful. Think about some of the major corporations that...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Downloading a list of URLs automatically I recently needed to download a bunch of files from Amazon S3, but I didn't have direct access to...
over a year ago
28

Downloading a list of URLs automatically

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I recently needed to download a bunch of files from Amazon S3, but I didn't have direct access to the bucket — I only had a list of URLs. There were too many to fetch one by one, so I wanted to fetch them automatically. Here are a couple ways I found to do that. Using curl # Curl...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Get comfortable with abstraction I stumbled across a tweet the other day and it's been resonating in my mind ever since. Mostly...
over a year ago
28

Get comfortable with abstraction

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I stumbled across a tweet the other day and it's been resonating in my mind ever since. Mostly because it's something I tend to have a problem with. You see, I have this thing where I try really hard to understand exactly how something works—all the way down to the last nut and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Introducing Surreal CMS 7 Last November was the 10 year mark for Surreal CMS, a content management service I created to manage...
over a year ago
28

Introducing Surreal CMS 7

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last November was the 10 year mark for Surreal CMS, a content management service I created to manage static (and mostly static) websites. Last week, I soft launched Surreal CMS 7. This new version is a complete rebuild from scratch using Node.js + Vue.js. I worked on this new...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
But we haven't even mastered Acid2! Safari was the first mainstream browser to pass the Acid2 Test now. Opera was a close second....
over a year ago
27

But we haven't even mastered Acid2!

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Safari was the first mainstream browser to pass the Acid2 Test now. Opera was a close second. Firefox finally nailed it down with version 3. Even Micrsoft, back in December, announced that IE8 passes the Acid2 Test. Web browsers have certainly come a long way towards standards...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
On Buttons and Links I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea...
over a year ago
27

On Buttons and Links

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea to unravel it. Unpopular opinion: in a design system, a "link" and a "button" should be one component. — Cory LaViska (@claviska) October 5, 2021 At face value, I understand why...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Stop trying to build the next unicorn So, you're building the next big thing? You say you're going to make millions and have a fancy...
over a year ago
27

Stop trying to build the next unicorn

from A Beautiful Site [alt+shift+b] in programming

over a year ago
So, you're building the next big thing? You say you're going to make millions and have a fancy office building out in the valley? That's cool. By the same odds we'll both be rich, because I'm holding tonight's winning lotto ticket. Your idea probably won't be the next big thing...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Parsing a JSON string results in an 'Invalid Label' error Whenever I work with AJAX, jQuery is my preferred JavaScript library and PHP is my preferred...
over a year ago
26

Parsing a JSON string results in an 'Invalid Label' error

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Whenever I work with AJAX, jQuery is my preferred JavaScript library and PHP is my preferred server-side language. I use JSON whenever I can to pass data between JavaScript and PHP. After all, $.get and $.post both process JSON easily, so it's my data type of choice. Sometimes,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Getting it right To my awesome users: I've been taking some time to reimagine what Postleaf should have been. Yes,...
over a year ago
26

Getting it right

from A Beautiful Site [alt+shift+b] in programming

over a year ago
To my awesome users: I've been taking some time to reimagine what Postleaf should have been. Yes, the betas were pretty awesome, but they weren't what I wanted them to be in terms of design, code, and function. I can do better, and you deserve nothing less than my very best. The...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
PlayCanvas: an easy, open source WebGL game engine Last week I wrote about faster JavaScript animations using VelocityJS. As if that wasn't impressive...
over a year ago
26

PlayCanvas: an easy, open source WebGL game engine

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last week I wrote about faster JavaScript animations using VelocityJS. As if that wasn't impressive enough, today I'm giving you a dose of HTML5 and WebGL greatness. The project is called PlayCanvas, and it dubs itself an open source game engine that brings fun to the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Avoiding timestamp errors when calculating dates in php When calculating dates in PHP, it is easy to add millisecond values such as 60 * 60 * 24 to...
over a year ago
26

Avoiding timestamp errors when calculating dates in php

from A Beautiful Site [alt+shift+b] in programming

over a year ago
When calculating dates in PHP, it is easy to add millisecond values such as 60 * 60 * 24 to increment the time by one day. This can become problematic for two main reasons. Issues with leap years # A year has approximately 365.25 days, hence a leap year occurs once every four...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Bulletproof Components Somewhere buried in my dusty basement lives a signed copy of Dan Cederholm's classic book...
over a year ago
26

Bulletproof Components

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Somewhere buried in my dusty basement lives a signed copy of Dan Cederholm's classic book Bulletproof Web Design. I purchased it during my first trip to An Event Apart in 2007. This book meant a lot to me back then, and almost 15 years later, many of its concepts still hold...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Archiving Postleaf Postleaf — at least in its current form — has been discontinued. In the future, I'd like to bring it...
over a year ago
26

Archiving Postleaf

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Postleaf — at least in its current form — has been discontinued. In the future, I'd like to bring it back as something different. Maybe an open source project. Maybe a SaaS product. I'm not sure at this point. The world still needs a simple platform to encourage blogging and the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A Web Component Story Gather 'round, it's story time. A number of years ago, I was hired by a company to rebuild a...
over a year ago
26

A Web Component Story

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Gather 'round, it's story time. A number of years ago, I was hired by a company to rebuild a component library for their design system. The one they were replacing was built with AngularJS, but AngularJS was old and rickety and nobody wanted to use it anymore. Plus, many teams...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Why You Should Prefix Custom Events Similar to how every custom element must contain a dash, I like to pretend that every custom event...
over a year ago
26

Why You Should Prefix Custom Events

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Similar to how every custom element must contain a dash, I like to pretend that every custom event must also contain a dash. This removes all ambiguity between native events and custom events. Therefore, I prefix all custom events in Shoelace with sl-. It may seem contradictory...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
My Stance on AI-generated Code I recently added this to Shoelace's contribution guidelines, which sums up my position on...
over a year ago
26

My Stance on AI-generated Code

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I recently added this to Shoelace's contribution guidelines, which sums up my position on AI-generated code. As an open source maintainer, I respectfully ask that you refrain from using AI-generated code when contributing to this project. This includes code generated by tools...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Surreal CMS acquires PageLime Nearly a decade ago, I launched my first SaaS application. It was a new take on content management —...
over a year ago
26

Surreal CMS acquires PageLime

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Nearly a decade ago, I launched my first SaaS application. It was a new take on content management — a hosted CMS that reads/writes directly to a web server and uses class attributes to define content regions. It was a great idea. Such a great idea that it inspired others to do...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Business cards VistaPrint delivered 1,000 “A Beautiful Site” business cards the other day, and I couldn't resist...
over a year ago
26

Business cards

from A Beautiful Site [alt+shift+b] in programming

over a year ago
VistaPrint delivered 1,000 “A Beautiful Site” business cards the other day, and I couldn't resist playing with them. I decided to go conservative with the design, relying a bit on curiosity to draw attention to the business. Nevertheless, I am pleased with the way they turned...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Flash of Undefined Custom Elements (FOUCE) Web components are defined and registered with JavaScript. Depending on how and when you load the...
over a year ago
26

Flash of Undefined Custom Elements (FOUCE)

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Web components are defined and registered with JavaScript. Depending on how and when you load the scripts that perform registration, you may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A free HTML, CSS, and JavaScript beautifier Ten years ago, I launched DirtyMarkup to clean up dirty code. It was a fun little tool, but its best...
over a year ago
25

A free HTML, CSS, and JavaScript beautifier

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Ten years ago, I launched DirtyMarkup to clean up dirty code. It was a fun little tool, but its best feature was that it was easy to use and didn't have intrusive advertisements. I sold DirtyMarkup a couple years ago, and since then the new owners slapped on a header that makes...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
IE8 burns the Acid 2 test An internal build of IE8 is reported to have passed the Acid 2 test. This is great news, as...
over a year ago
25

IE8 burns the Acid 2 test

from A Beautiful Site [alt+shift+b] in programming

over a year ago
An internal build of IE8 is reported to have passed the Acid 2 test. This is great news, as Microsoft is showing more and more progress towards incorporating web standards into Internet Explorer, even though IE7 has remained dormant since it's release back in October 2006. The...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Select all, select none, and invert selection with jQuery A demonstration of selecting checkboxes using jQuery.We start off with a bunch of...
over a year ago
25

Select all, select none, and invert selection with jQuery

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A demonstration of selecting checkboxes using jQuery.We start off with a bunch of checkboxes: <fieldset id="group_1"> <input type="checkbox" name="numbers[]" value="0" /> <input type="checkbox" name="numbers[]" value="1" /> <input type="checkbox" name="numbers[]" value="2"...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Know When To Draw The Line One-off variations aren't uncommon, but they don't belong in your design system. You're design...
over a year ago
25

Know When To Draw The Line

from A Beautiful Site [alt+shift+b] in programming

over a year ago
One-off variations aren't uncommon, but they don't belong in your design system. You're design system isn't solving for every possible use case — it's encouraging visual consistency and efficient development. Use custom styles for one-offs. This came up recently on my team. We...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Solving the search problem I recently wrote about using an ORM and how it allowed me to support five different database...
over a year ago
25

Solving the search problem

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I recently wrote about using an ORM and how it allowed me to support five different database platforms with minimal effort. There is, however, one feature that even Sequelize couldn't tackle for me: full-text search A full-text search is typically a database feature that lets you...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Valid Names for CSS Parts CSS Shadow Parts, colloquially known as CSS Parts, are used to expose elements inside a web...
over a year ago
25

Valid Names for CSS Parts

from A Beautiful Site [alt+shift+b] in programming

over a year ago
CSS Shadow Parts, colloquially known as CSS Parts, are used to expose elements inside a web component's shadow root so they can be styled by consumers with CSS. But what are we allowed to call these parts? What characters comprise a valid CSS part name? To find out, I had to dive...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
box-sizing: border-box explained It's been over two years since Paul Irish famously posted the box-sizing trick that would bring us...
over a year ago
25

box-sizing: border-box explained

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's been over two years since Paul Irish famously posted the box-sizing trick that would bring us back to the days of early Internet Explorer. The good ol' days # You might remember how Internet Explorer 6 (quirks mode) and below did that whole box model thing wrong. If not,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Complacency on the Front End We live in a world where front end developers are fatigued from the framework wars. Most have...
over a year ago
25

Complacency on the Front End

from A Beautiful Site [alt+shift+b] in programming

over a year ago
We live in a world where front end developers are fatigued from the framework wars. Most have settled into a niche — especially the React crowd — and they’re happy to not have to think outside that box. They are, by far, the hardest crowd to sell web components to. I'm not...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
BrowserStack: stop using virtual machines for browser testing Sick of booting up an entire virtual machine (VM) just to test something in IE? With BrowserStack,...
over a year ago
25

BrowserStack: stop using virtual machines for browser testing

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Sick of booting up an entire virtual machine (VM) just to test something in IE? With BrowserStack, you don't need VMware or VirtualBox. Just enter a URL and instantly test on just about any browser you can think of. This is legit. It's not just another screenshot service or...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Web standards are just "minor details" A friend of mine recently graduated and spread his wings by venturing into the corporate world. He...
over a year ago
25

Web standards are just "minor details"

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A friend of mine recently graduated and spread his wings by venturing into the corporate world. He obtained a position as a junior project manager for a web consulting firm in Atlanta. Their work is very professional and their designs are great, but it was immediately evident...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The next version of PHP may very well be 7 We've been hearing about PHP 6 since 2005, but nothing has been brought to fruition yet. In fact,...
over a year ago
25

The next version of PHP may very well be 7

from A Beautiful Site [alt+shift+b] in programming

over a year ago
We've been hearing about PHP 6 since 2005, but nothing has been brought to fruition yet. In fact, the project was so plagued with problems that in 2010, it was abandoned. It almost felt like PHP would be perpetually stuck at version 5. Except now there's talk about another major...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Lessons from a failed Kickstarter Last week, I launched Particle on Kickstarter. Today, I pulled the plug and canceled the campaign....
over a year ago
24

Lessons from a failed Kickstarter

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last week, I launched Particle on Kickstarter. Today, I pulled the plug and canceled the campaign. We had 50 backers and were 5% funded. So why would I do this with 25 days left to go? The fact is, this campaign failed before it started, and it was all my fault. I became so...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Swapping variables with JavaScript Swapping the value of two variables normally takes three lines and a temporary variable. What if I...
over a year ago
24

Swapping variables with JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Swapping the value of two variables normally takes three lines and a temporary variable. What if I told you there was an easier way to do this with JavaScript? Traditional method # The goal is to swap the values of a and b. The textbook method for doing this looks something like...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A Web Components Primer On the eve of February, I was inspired to tweet about web components. What started as a simple...
over a year ago
24

A Web Components Primer

from A Beautiful Site [alt+shift+b] in programming

over a year ago
On the eve of February, I was inspired to tweet about web components. What started as a simple thought quickly turned into a series of tweets that folks seem to find useful. I've adapted the thread and I'm posting it here for prosperity. Overview # Shadow DOM? Light DOM? Slots?...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Finding the active element in a shadow root You can get the focused element with document.activeElement but, if it's inside a shadow root, this...
over a year ago
24

Finding the active element in a shadow root

from A Beautiful Site [alt+shift+b] in programming

over a year ago
You can get the focused element with document.activeElement but, if it's inside a shadow root, this will be the host element. This happens because of retargeting, but sometimes you might need access to the internal element that actually has focus. Here's a recursive function that...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Using an ORM I've never really bothered with ORMs before, as feelings for them tend to be mixed. I've heard that...
over a year ago
24

Using an ORM

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've never really bothered with ORMs before, as feelings for them tend to be mixed. I've heard that you can spend twice as long learning an ORM as you can coding raw SQL. 🤷🏻‍♂️ I figured it was time to see for myself. For the Postleaf rebuild, I decided to try out Sequelize. I...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
JSNES: a Nintendo emulator built in JavaScript I remember, not too long ago, arguing with people who said that JavaScript would never be as good as...
over a year ago
24

JSNES: a Nintendo emulator built in JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I remember, not too long ago, arguing with people who said that JavaScript would never be as good as Flash. Granted, at the time many people were afraid of JavaScript and, thus, it wasn't used as widely as it is today. With the introduction of popular libraries such as jQuery,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Don't Do Magic We recently had a design for an "alert" component with an actions slot. In the spec, only secondary...
over a year ago
24

Don't Do Magic

from A Beautiful Site [alt+shift+b] in programming

over a year ago
We recently had a design for an "alert" component with an actions slot. In the spec, only secondary buttons were allowed in it. Dev: "Design only wants secondary buttons in the actions slot, so I'm forcing it." The developer was listening for the slotchange event and applying the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Prefers Reduced Motion By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not...
over a year ago
24

Prefers Reduced Motion

from A Beautiful Site [alt+shift+b] in programming

over a year ago
By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not a user prefers, well, reduced motion. You can use this to tone down (or turn off) transitions and animations in your stylesheet to accommodate users with vestibular motion...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Thoughts on uploads Uploads management is a concept I've always struggled with in Postleaf, but it's a necessary evil....
over a year ago
24

Thoughts on uploads

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Uploads management is a concept I've always struggled with in Postleaf, but it's a necessary evil. Users have to be able to view and delete files they upload; but at the same time, I've never felt that it should be an integral part of the app. Last night I had to face the fact...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Cory's amazing dot paper In a world where designers use Sketch, Photoshop, and other apps to create wireframes, I'm here in...
over a year ago
24

Cory's amazing dot paper

from A Beautiful Site [alt+shift+b] in programming

over a year ago
In a world where designers use Sketch, Photoshop, and other apps to create wireframes, I'm here in my corner holding this old fashioned pencil and a stack of dot paper. Sorry, but for me, these primitive tools do the same thing and I find them easier to use. I don't know. I guess...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Design Systems Aren't Cheap Buttons are one of my favorite components. On the surface they seem simple, but in practice, they...
over a year ago
24

Design Systems Aren't Cheap

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Buttons are one of my favorite components. On the surface they seem simple, but in practice, they tend to be much more involved. In a post by Nathan Curtis entitled And you thought buttons were easy?, he demonstrates how costs can quickly skyrocket to $1,000,000 when one arm of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Validating URLs and email addresses in PHP This is a simple method for validating both email addresses and URLs. Using PHP's filter_var()...
over a year ago
24

Validating URLs and email addresses in PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
This is a simple method for validating both email addresses and URLs. Using PHP's filter_var() function, it's actually very easy and doesn't require regular expressions. The following wrapper functions force a true boolean response, so you can use them safely in your logic. Email...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to get faster and better help from support It's tempting to take out your frustrations on the support person answering your email, but don't...
over a year ago
24

How to get faster and better help from support

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's tempting to take out your frustrations on the support person answering your email, but don't send out a message raging about their incompetence. Don't tell them how their product sucks or doesn't work the way you expect it to. Don't TYPE IN ALL CAPS to make sure they...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Browser makers: where’s the new tab + homepage option? Ever since tabbed browsing hit the mainstream I've been hooked. It's rare to see less than a handful...
over a year ago
24

Browser makers: where’s the new tab + homepage option?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Ever since tabbed browsing hit the mainstream I've been hooked. It's rare to see less than a handful of tabs open in my web browser at any time. Whether I'm developing, checking email, or just surfing around, I can never seem to have enough tabs! But there's one thing about this...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Shoelace 2.0: a forward-thinking library of web components I've been having a lot of fun with Stencil and web components lately. Back in January, I decided to...
over a year ago
24

Shoelace 2.0: a forward-thinking library of web components

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've been having a lot of fun with Stencil and web components lately. Back in January, I decided to use it to completely redesign Shoelace, an open source project I created a few years ago. I recently published Shoelace 2.0 — a collection of professionally-designed, accessible...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Passing data from PHP to JavaScript Have you ever needed to send a PHP variable, array, or object to JavaScript? It can get complicated...
over a year ago
24

Passing data from PHP to JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Have you ever needed to send a PHP variable, array, or object to JavaScript? It can get complicated trying to escape the output properly. Here's a way that always works—no escaping necessary. Let's say we have the following variable in PHP: $name = 'Bob Marley'; And we want to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Determining your app's base directory in Node.js Determining your app's base dir (or document root if you're from a PHP background) isn't as straight...
over a year ago
24

Determining your app's base directory in Node.js

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Determining your app's base dir (or document root if you're from a PHP background) isn't as straight forward as you'd think in Node. Here's a little trick to get a globally available reference to your app's root directory. Add this somewhere towards the start of your main app...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Link to a specific page in a PDF file Both Chrome and Firefox render PDF files in the browser, making them easier for users to view. Today...
over a year ago
24

Link to a specific page in a PDF file

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Both Chrome and Firefox render PDF files in the browser, making them easier for users to view. Today I wanted to send someone a link to a certain page in a PDF user's manual. Here's how I did it. In HTML, you can link to a specific part of the page this using anchors. For...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
PHP functions to get and remove the file extension from a string I use these regular expressions all the time, but it's much more convenient to have them both in...
over a year ago
24

PHP functions to get and remove the file extension from a string

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I use these regular expressions all the time, but it's much more convenient to have them both in convenient PHP functions. // Returns only the file extension (without the dot) function file_ext($filename) { return preg_match('/\./', $filename) ? preg_replace('/^.*\./', '',...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Creating stylesheets for handheld devices It's not uncommon so see someone surfing the net with their cell phone or PDA these days or, at...
over a year ago
24

Creating stylesheets for handheld devices

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's not uncommon so see someone surfing the net with their cell phone or PDA these days or, at least, trying to. Unfortunately, portable technologies still have a long way to go before they conquer the web with their tiny screens. The good news is that, with a little help from...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to upgrade or downgrade Node.js using npm Need to update your version of Node.js? Here's how you can upgrade or downgrade from the command...
over a year ago
24

How to upgrade or downgrade Node.js using npm

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Need to update your version of Node.js? Here's how you can upgrade or downgrade from the command line using npm. Upgrading to the latest stable version # This will update you to the latest available stable version: sudo npm cache clean -f sudo npm install -g n sudo n...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Buttons and Cursors There's a post from 2016 entitled Buttons shouldn't have a hand cursor that's been making its way...
over a year ago
24

Buttons and Cursors

from A Beautiful Site [alt+shift+b] in programming

over a year ago
There's a post from 2016 entitled Buttons shouldn't have a hand cursor that's been making its way around social media this week. While the author is correct in his statement that operating system buttons don't have hand cursors, the pattern has become ubiquitous and somewhat...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Moving from Stencil to LitElement Over the weekend, I finished migrating Shoelace from Stencil to LitElement. Even though consumers of...
over a year ago
24

Moving from Stencil to LitElement

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Over the weekend, I finished migrating Shoelace from Stencil to LitElement. Even though consumers of the library won't see much of a difference, this was a major overhaul of Shoelace's internals. Naturally, such a big change brings questions from the community, such as "what were...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Shoelace.style — A back to the basics CSS starter kit I spent some time last week working on a free CSS boilerplate I'm calling Shoelace.css. It's kinda...
over a year ago
23

Shoelace.style — A back to the basics CSS starter kit

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I spent some time last week working on a free CSS boilerplate I'm calling Shoelace.css. It's kinda like Bootstrap, but a lot leaner and pure CSS. You don't need a preprocessor like Sass or Less to use it, but it's still highly customizable with CSS variables. I'm calling Shoelace...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Access pages without the php extension using .htaccess There are a number of ways to make "clean URLs" work on your site, but this one is pretty straight...
over a year ago
23

Access pages without the php extension using .htaccess

from A Beautiful Site [alt+shift+b] in programming

over a year ago
There are a number of ways to make "clean URLs" work on your site, but this one is pretty straight forward.  It allows you to access /any-page.php by simply going to /any-page.  Just place the following into your .htaccess file (and make sure that mod_rewrite is...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Parsing URLs in JavaScript There's an excellent trick to parsing URLs in JavaScript, which was introduced last year by John...
over a year ago
23

Parsing URLs in JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
There's an excellent trick to parsing URLs in JavaScript, which was introduced last year by John Long over on GitHub. This technique works great, but the resulting search property will be a raw query string. This isn't very useful if you need to access certain variables in said...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Password protection using .htaccess and .htpasswd The simplest way I know to password protect files and directories using Apache's .htaccess and...
over a year ago
23

Password protection using .htaccess and .htpasswd

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The simplest way I know to password protect files and directories using Apache's .htaccess and .htpasswd files. .htpasswd # Create a text file with the following text: username:password The usernames and passwords are stored in this file, one per line, separated by a colon. To...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Is it possible to be an introverted entrepreneur? A tweet by Remy Sharp sparked my thoughts about being an introvert and starting a company. I don't...
over a year ago
23

Is it possible to be an introverted entrepreneur?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A tweet by Remy Sharp sparked my thoughts about being an introvert and starting a company. I don't hate human beings, but I do tend to keep to myself. How has this impacted my ability to run a successful business? Launching a product is hard # If you don't have a good network,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Exploring the EyeDropper API The EyeDropper API has landed in Chrome and Edge 95! This is a simple promise-based API that lets...
over a year ago
23

Exploring the EyeDropper API

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The EyeDropper API has landed in Chrome and Edge 95! This is a simple promise-based API that lets you select a color from anywhere on the screen. Let's dive in and see how it works. To start, we'll add a button that activates the eye dropper. <button type="button">Select a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
SVG has a logo HTML5 was the first to get an official logo. Web designers rejoiced, some even hacking together...
over a year ago
23

SVG has a logo

from A Beautiful Site [alt+shift+b] in programming

over a year ago
HTML5 was the first to get an official logo. Web designers rejoiced, some even hacking together matching logos for CSS. But did you know that SVG also has an official logo, and it's—flowery? The W3C describes it as: The flower-like structure of the SVG logo evokes creativity and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Generate random passwords in PHP Here is a function I wrote to generate a random string in PHP. It is probably most useful for...
over a year ago
23

Generate random passwords in PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here is a function I wrote to generate a random string in PHP. It is probably most useful for generating passwords. You can specify the length of the resulting string, as well as what characters are allowed. The default length is eight and the default character set is...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Creating a printable website using print stylesheets I frequently see little printer icons all over the web that clearly mean I can print out a clean...
over a year ago
23

Creating a printable website using print stylesheets

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I frequently see little printer icons all over the web that clearly mean I can print out a clean version of the webpage that I'm looking at. These little icons are indeed a beautiful sight from the user's perspective. No more having to modify printer settings or copy and paste...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Redirecting to and from the www subdomain with .htaccess Here are a few snippets that will come in handy if you ever need to redirect www.example.com to...
over a year ago
23

Redirecting to and from the www subdomain with .htaccess

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here are a few snippets that will come in handy if you ever need to redirect www.example.com to example.com or vice versa.  There are a number of similar methods out there, but I prefer these as you don't need to modify anything between development and production. #...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Zipping multiple folders into separate zip files Here's a bash script that will zip all folders in the current directory into...
over a year ago
23

Zipping multiple folders into separate zip files

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here's a bash script that will zip all folders in the current directory into separate .zip files: for i in */; do zip -r "${i%/}.zip" "$i"; done I had to do this to 75+ folders today and this definitely saved me some time. It works on macOS too!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The HTML5 download attribute Years ago I showed you how to force a file to download with PHP. Now with HTML5, you [almost] don't...
over a year ago
23

The HTML5 download attribute

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Years ago I showed you how to force a file to download with PHP. Now with HTML5, you [almost] don't have to do that anymore. The HTML5 download attribute is intended to tell the browser that a certain link should force a certain file to download, optionally with a certain name...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to leave a console greeting for your visitors Since my audience consists primarily of web developers, I decided to try a little experiment the...
over a year ago
23

How to leave a console greeting for your visitors

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Since my audience consists primarily of web developers, I decided to try a little experiment the other day. I added a console greeting to the site for anyone who decides to look under the hood. Here's how I did it. What the heck is a console greeting? # Some time ago, I saw a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
I switched from tabs to spaces and haven't looked back Last week I started using spaces to indent code instead of tabs. It's something I swore I would...
over a year ago
23

I switched from tabs to spaces and haven't looked back

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last week I started using spaces to indent code instead of tabs. It's something I swore I would never do, but I'm glad I finally did. Why I always preferred tabs # Tabs are sensible. They were made to indent things, and code needs to be indented, so it was a good relationship....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Importing plain CSS files with Sass When I first started using Sass, there was one thing that drove me crazy about it compared to Less....
over a year ago
23

Importing plain CSS files with Sass

from A Beautiful Site [alt+shift+b] in programming

over a year ago
When I first started using Sass, there was one thing that drove me crazy about it compared to Less. For some reason, including a plain CSS file just wasn't something the compiler wanted to do: /* Uncaught, unspecified "error" event. (Ignoring local @import of "animate.min.css" as...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Code can change As a web developer, your code is often visible to anyone who wants to review it. If you're like me,...
over a year ago
23

Code can change

from A Beautiful Site [alt+shift+b] in programming

over a year ago
As a web developer, your code is often visible to anyone who wants to review it. If you're like me, you might get stressed out about the thought of people looking at your work and critiquing or criticizing your app's design. Take a deep breath, recenter, and remember that code...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
An icon converter that supports multiple sizes and transparency If you're looking for an online utility to convert JPEG, PNG, or GIF images to ICO format, here's...
over a year ago
23

An icon converter that supports multiple sizes and transparency

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If you're looking for an online utility to convert JPEG, PNG, or GIF images to ICO format, here's one that does exactly that. It supports full transparency when converting 24-bit PNGs and even lets you combine multiple resolutions into one icon file — perfect for generating...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
What can you do with a single <div>? If I told you to make something using only CSS and a single <div>, would you be able to create...
over a year ago
23

What can you do with a single <div>?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If I told you to make something using only CSS and a single <div>, would you be able to create something incredible? That's exactly what Lynn Fisher has been doing with A Single Div. Using only a single HTML element and some CSS, she's created some shockingly complex artwork...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The Future of Frameworks Love them or hate them, web components ("custom elements") are making a huge dent in the world of...
over a year ago
22

The Future of Frameworks

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Love them or hate them, web components ("custom elements") are making a huge dent in the world of front-end development. As of today, close to 18% of page views in Chrome are registering web components. That's an insane amount of usage! The benefits of a framework-agnostic...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Fetching remote web pages with curl and PHP This is a very brief example of how to use PHP's curl Library to retrieve the source of a remote...
over a year ago
22

Fetching remote web pages with curl and PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
This is a very brief example of how to use PHP's curl Library to retrieve the source of a remote webpage. $c = curl_init(); curl_setopt($c, CURLOPT_URL, "http://example.com/"); curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); $data =...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Smaller volume increments in macOS Ever wish you turn the volume up or down just a tiny bit more on your Mac? Well, you can. You...
over a year ago
22

Smaller volume increments in macOS

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Ever wish you turn the volume up or down just a tiny bit more on your Mac? Well, you can. You already know you can increase and decrease your Mac's volume with the keyboard, but sometimes the intervals are a bit too much. I usually end up adjusting my external speakers just to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Icon Finder: an awesome search engine for icons I came across a really awesome icon resource awhile back, but never got a chance to write anything...
over a year ago
22

Icon Finder: an awesome search engine for icons

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I came across a really awesome icon resource awhile back, but never got a chance to write anything about it. If you're a web designer or developer who always has use for quality icons — especially ones with GPL or similar licenses — this is the website for you. It's essentially a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
SimpleImage 3.0 Back in 2011, I released the first version of SimpleImage for PHP — an open source project for...
over a year ago
22

SimpleImage 3.0

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Back in 2011, I released the first version of SimpleImage for PHP — an open source project for working with images. Today, version 3.0 has landed, and there's a lot to love about it. Overview # Here's how it works at a glance: try { // Create a new SimpleImage object $image =...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Is your product the reason your startup is failing? The idea of launching a product, running your own business, and being your own boss is very...
over a year ago
22

Is your product the reason your startup is failing?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The idea of launching a product, running your own business, and being your own boss is very appealing. Perhaps that's why so many people risk doing it. The problem is, many of them don't succeed. There are hundreds of reasons a startup can fail, but let's focus on one for a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Getting localized month and day names in the browser JavaScript has a well-supported date/time formatting API called Intl.DateTimeFormat. Here's a tip —...
over a year ago
22

Getting localized month and day names in the browser

from A Beautiful Site [alt+shift+b] in programming

over a year ago
JavaScript has a well-supported date/time formatting API called Intl.DateTimeFormat. Here's a tip — you can use it to generate localized month and day names without the need for a language pack! This is super useful if you're building, say, a date picker or a calendar app. I've...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Testing Support for :focus-visible The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in...
over a year ago
22

Testing Support for :focus-visible

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets: /* Please don't do this */ button:focus { outline: none; } While unsightly to mouse users, a clear focus indicator is essential for proper...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A Beautiful Site launched I'd like to introduce my new web design studio. After considering a list of potential names and...
over a year ago
22

A Beautiful Site launched

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I'd like to introduce my new web design studio. After considering a list of potential names and designs, I finally came up with a name that I thought fitting for the kind of web design business that I want to run. After a few pencil and paper sketches, a few hours in Photoshop,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Not Everything Can Be Feature Detected In the early days of Web browsers, it was extremely common to see user agent checks in JavaScript....
over a year ago
22

Not Everything Can Be Feature Detected

from A Beautiful Site [alt+shift+b] in programming

over a year ago
In the early days of Web browsers, it was extremely common to see user agent checks in JavaScript. Sometimes, you'd write the same code in two or three different ways to support various browsers. Code such as that shown below allowed webpages to work in browsers like Netscape...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Thoughts on being a good manager Some thoughts I had after conversations with a friend who has a terrible manager. This isn't nearly...
over a year ago
22

Thoughts on being a good manager

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Some thoughts I had after conversations with a friend who has a terrible manager. This isn't nearly a comprehensive list, but it highlights many of the problems they were experiencing. Maybe my friend's manager will stumble upon it some day. When someone has a grievance, take an...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Give your JPEGs alpha channels If you need alpha transparency on the web, 24-bit PNGs are usually your best bet. The only problem...
over a year ago
22

Give your JPEGs alpha channels

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If you need alpha transparency on the web, 24-bit PNGs are usually your best bet. The only problem is that PNGs are lossless and can grow in file size very quickly — much larger than your average JPEG. So what if there was a way for JPEGs to support alpha channels? I discovered...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
JavaScript functions for basename and dirname Here are two JavaScript functions that mimic their PHP cousins. basename() # function basename(path)...
over a year ago
22

JavaScript functions for basename and dirname

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here are two JavaScript functions that mimic their PHP cousins. basename() # function basename(path) { return path.replace(/.*\//, ''); } dirname() # function dirname(path) { return path.match(/.*\//); } Unlike their PHP cousins, these functions do not support paths...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Opening a new window after an async operation I was working on an OAuth implementation the other day and needed to open a third-party auth page in...
over a year ago
22

Opening a new window after an async operation

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I was working on an OAuth implementation the other day and needed to open a third-party auth page in a new window. However, I needed to fetch the target URL from the server first, then open the window. Kinda like this: const button =...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to use the PHP ternary operator When I learned how to use the ternary operator years ago, I fell in love with it. What a cool way to...
over a year ago
22

How to use the PHP ternary operator

from A Beautiful Site [alt+shift+b] in programming

over a year ago
When I learned how to use the ternary operator years ago, I fell in love with it. What a cool way to simplify assignments based on a condition. If you're not sure what the ternary operator is or how it works, you're missing out on a really cool piece of programming...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The Future of Shoelace It's been more than two years since the beta release of Shoelace 2.0, which was the first version of...
over a year ago
22

The Future of Shoelace

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's been more than two years since the beta release of Shoelace 2.0, which was the first version of the project to ship Web Components. What started off as a fun side project has quickly grown to become one of the most recognized Web Component libraries in the world. As of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
CSS Parts Inspired by BEM In a previous post, I explored valid names for CSS parts and discovered that there are very few...
over a year ago
22

CSS Parts Inspired by BEM

from A Beautiful Site [alt+shift+b] in programming

over a year ago
In a previous post, I explored valid names for CSS parts and discovered that there are very few restrictions in what you can call them. The purpose of that deep dive was to help identify a pattern for naming parts that lets me expose states and subparts, or parts exported as a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Lessons from my 20s: a presentation by Ryan Allis Author and entrepreneur Ryan Allis shares 1,264 slides about life, entrepreneurship, and the...
over a year ago
22

Lessons from my 20s: a presentation by Ryan Allis

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Author and entrepreneur Ryan Allis shares 1,264 slides about life, entrepreneurship, and the world. We all have goals, but sometimes they seem hard to reach. Really hard. Life happens and things get tough, but don't let it get you down. It's not impossible. It just means you'll...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Empowering Design System Users The question of whether or not component APIs should be locked down at the code level comes up quite...
over a year ago
22

Empowering Design System Users

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The question of whether or not component APIs should be locked down at the code level comes up quite a bit. For example, if a button spec only calls for primary, secondary, and tertiary variants, should we still expose parts and custom properties so users can make further...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A clean fade-in effect for webpages Here's a nice way to fade your pages in using CSS and a bit of JavaScript. The solution is clean and...
over a year ago
22

A clean fade-in effect for webpages

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here's a nice way to fade your pages in using CSS and a bit of JavaScript. The solution is clean and smooth, with no flickering on load. If JavaScript is disabled, the page will still load but the fade effect will not occur. How it works # This trick works by adding the fade-out...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Table cells and max-widths in Internet Explorer 8 I recently came across a little issue with Internet Explorer 8 and max-width. I had an image inside...
over a year ago
22

Table cells and max-widths in Internet Explorer 8

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I recently came across a little issue with Internet Explorer 8 and max-width. I had an image inside of a table cell and, for some reason, IE8 completely neglected the corresponding CSS max-width property. The result was the image rendering at full size rather than scaled down to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Querying through shadow roots Let's say I have a web component with an open shadow root, like this one from...
over a year ago
22

Querying through shadow roots

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Let's say I have a web component with an open shadow root, like this one from Shoelace. <sl-button>Click me</sl-button> Inside the shadow root is a <button> that I want to target with JavaScript.* Alas, Element.querySelector() doesn't offer a shortcut for traversing shadow roots...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Hide the mouse cursor with CSS I know you can change the mouse cursor using CSS, but I never realized that you can actually hide it...
over a year ago
21

Hide the mouse cursor with CSS

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I know you can change the mouse cursor using CSS, but I never realized that you can actually hide it altogether. .no-cursor { cursor: none; } Of course, that doesn't mean you should, it just means you can. Practical uses for this are definitely limited, but things like...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Animated CSS hamburger icons If you need some tasty CSS hamburger icons that animate in fantastic ways, here you go. Hamburgers...
over a year ago
21

Animated CSS hamburger icons

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If you need some tasty CSS hamburger icons that animate in fantastic ways, here you go. Hamburgers is an MIT-licensed CSS library that gives you over a dozen beautifully animated navicons for use in your own projects. Also includes the Sass source so you can customize and compile...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Images display in Firefox and Safari, but not in Internet Explorer I ran into a little "gotcha" today where an image was displaying properly in Firefox and Safari, but...
over a year ago
21

Images display in Firefox and Safari, but not in Internet Explorer

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I ran into a little "gotcha" today where an image was displaying properly in Firefox and Safari, but not in Internet Explorer. The weird thing is that it wasn't showing up as a broken link (no missing image icon with the infamous red 'X'). Instead, it wasn't showing up at...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to delete a tag on GitHub In the world of Git, tags are very useful for keeping track of your project's version history. A lot...
over a year ago
21

How to delete a tag on GitHub

from A Beautiful Site [alt+shift+b] in programming

over a year ago
In the world of Git, tags are very useful for keeping track of your project's version history. A lot of folks will argue that you shouldn't delete tags, but there are real-world examples in which tags need to be deleted.  That said, it's both a good and a bad thing that GitHub...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Flushing DNS cache on macOS Here's the best way to flush DNS cache on macOS: sudo dscacheutil -flushcache; sudo killall -HUP...
over a year ago
21

Flushing DNS cache on macOS

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here's the best way to flush DNS cache on macOS: sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder; say cache flushed Notice that last part — that's why this is the best method. You get an audible "cache flushed" almost instantaneously, and the whole process becomes...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to get the dominant colors of an image with Color Thief You know how Dribbble shows a color palette for each shot users upload? They always look perfect...
over a year ago
21

How to get the dominant colors of an image with Color Thief

from A Beautiful Site [alt+shift+b] in programming

over a year ago
You know how Dribbble shows a color palette for each shot users upload? They always look perfect right? Here's a tool that can give you the same quality results using pure JavaScript. I played with Color Thief a few months ago but surprisingly never posted about it. For me,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Getting proportionally-resized dimensions of an image This is extremely useful when you need to scale down an image within a certain pair of...
over a year ago
21

Getting proportionally-resized dimensions of an image

from A Beautiful Site [alt+shift+b] in programming

over a year ago
This is extremely useful when you need to scale down an image within a certain pair of dimensions. get_resized_dimensions() # Parameters # $width - The width of the image to be resized $height - The height of the image to be resized $max_width - The maximum allowed width of the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
CSS drop caps Traditionally found in printed media, drop caps are created by emphasizing the size, color, weight,...
over a year ago
21

CSS drop caps

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Traditionally found in printed media, drop caps are created by emphasizing the size, color, weight, or style of the first letter in the first sentence of a paragraph. We can easily reproduce this effect on webpages by using the :first-letter pseudo element. Writing the styles...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Subtle Patterns: hundreds of free backgrounds that tile I've been using Subtle Patterns for quite some time now. All the patterns are great, and their...
over a year ago
21

Subtle Patterns: hundreds of free backgrounds that tile

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've been using Subtle Patterns for quite some time now. All the patterns are great, and their Photoshop plugin is incredibly useful. I can't remember when it first launched, but I do remember when there was only one or two pages to browse on the site. Now it has over 380 images...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
$.postJSON() for jQuery $.getJSON() is pretty handy for sending an AJAX request and getting back JSON data as a response....
over a year ago
21

$.postJSON() for jQuery

from A Beautiful Site [alt+shift+b] in programming

over a year ago
$.getJSON() is pretty handy for sending an AJAX request and getting back JSON data as a response. Alas, the jQuery documentation lacks a sister function that should be named $.postJSON(). Why not just use $.getJSON() and be done with it? Well, perhaps you want to send a large...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The SimpleImage library for PHP If you love working with PHP but hate the GD library, you'll love the Simple Image PHP class I'm...
over a year ago
21

The SimpleImage library for PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If you love working with PHP but hate the GD library, you'll love the Simple Image PHP class I'm releasing today. This class takes the headache out of dealing with images and features over 25 useful methods. The class is incredibly simple to use.  The following two lines will...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Prevent white noise from appearing in images after fading The first time I ever saw this alleged bug was in Internet Explorer 7 yesterday. Images were...
over a year ago
21

Prevent white noise from appearing in images after fading

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The first time I ever saw this alleged bug was in Internet Explorer 7 yesterday. Images were rotating on a page in the form of a slideshow, fading in and out for a nice, smooth transition. One problem, though: in Internet Explorer 7 (and 6, as it turned out), one of the images...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to remove box shadows from input controls on iOS Those default box shadows that appear inside of your input elements on iOS can be pretty annoying,...
over a year ago
21

How to remove box shadows from input controls on iOS

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Those default box shadows that appear inside of your input elements on iOS can be pretty annoying, especially if you're going for a flat or subtle look. Here's how to remove them. Unfortunately, it's not as simple as setting the box-shadow property to none. Instead, you have to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Five things I've learned about taking risks I had a cush job at a university with great benefits, decent pay, and normal hours. Five years ago,...
over a year ago
21

Five things I've learned about taking risks

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I had a cush job at a university with great benefits, decent pay, and normal hours. Five years ago, I took a risk and gave it all up to start a company. Here are the five most important lessons I've learned about risk-taking. 1. There are good risks and bad risks # People that...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
I'm taking "startup" back The word "startup" has taken on a very unfortunate meaning over the years. I used to think of my own...
over a year ago
21

I'm taking "startup" back

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The word "startup" has taken on a very unfortunate meaning over the years. I used to think of my own business as a startup, but as its definition evolved, I quickly realized I didn't fit that description at all. The word "startup", by definition, means the act or instance of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Using JavaScript to prevent comment spam Comment spam (also known as 'link spam', 'blog spam', and 'wikispam') occurs when people or spam...
over a year ago
21

Using JavaScript to prevent comment spam

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Comment spam (also known as 'link spam', 'blog spam', and 'wikispam') occurs when people or spam bots post comments on someones blog, guestbook, or wiki for the sole purpose of boosting traffic and promoting better search engine rankings for their site. Like email spam, it can be...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
DaFont: an excellent free font resource I came across an excellent website for free fonts online. No annoying pop-ups, minimal banner ads,...
over a year ago
21

DaFont: an excellent free font resource

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I came across an excellent website for free fonts online. No annoying pop-ups, minimal banner ads, and the best feature of all — custom previews for all their fonts. Check 'em out at dafont.com.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
On Using Web Component Libraries We tend to think of components as things that belong to a framework. After all, React has...
over a year ago
21

On Using Web Component Libraries

from A Beautiful Site [alt+shift+b] in programming

over a year ago
We tend to think of components as things that belong to a framework. After all, React has components, Vue has components, Angular has components…it's just how we've always used them. Because of that, people tend to refer to Lit and FAST Element as frameworks, but they’re not....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Whipping file inputs into shape with Bootstrap There are many, many, many ways to hack a file input so it looks and behaves consistently across all...
over a year ago
20

Whipping file inputs into shape with Bootstrap

from A Beautiful Site [alt+shift+b] in programming

over a year ago
There are many, many, many ways to hack a file input so it looks and behaves consistently across all browsers. There's even a pretty slick plugin to help get the job done. Unfortunately, most of these solutions are cumbersome, prone to cross-browser issues, and require...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Superpowers I stumbled upon a short post that intrigued me. In it, the author claims that the cure for boredom...
over a year ago
20

Superpowers

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I stumbled upon a short post that intrigued me. In it, the author claims that the cure for boredom is superpowers. Not superpowers in the Superman sense, but ones that we can teach ourselves. Learn Photoshop, and you’ll have a superpower. You’ll be able to see what your bedroom...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Thoughts on AMP Some time ago, a user asked about Google AMP support. At the time, I didn't know much about AMP...
over a year ago
20

Thoughts on AMP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Some time ago, a user asked about Google AMP support. At the time, I didn't know much about AMP aside from it made pages load faster on mobile devices. It sounded neat. A couple weeks ago, I decided to dive in and integrate AMP with Postleaf. But the deeper I got, the more I...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
SVG Repo I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images....
over a year ago
20

SVG Repo

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images. Check it out over at SVG repo. Looks like they have a sister site for fonts, too. Lots of 'em.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
TinyPNG: A better way to compress PNG images By now, you know that optimizing images and other resources can reduce bandwidth and help your...
over a year ago
20

TinyPNG: A better way to compress PNG images

from A Beautiful Site [alt+shift+b] in programming

over a year ago
By now, you know that optimizing images and other resources can reduce bandwidth and help your website load faster. Perhaps you've even used a tool like Pngcrush before to make your images smaller. Now, there's an even better solution. TinyPNG uses "smart lossy compression...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Working with HTML5 data attributes Before HTML5, working with arbitrary data sucked. To keep things valid, you had to stuff things into...
over a year ago
20

Working with HTML5 data attributes

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Before HTML5, working with arbitrary data sucked. To keep things valid, you had to stuff things into rel or class attributes. Some developers even created their own custom attributes. Boy, was it a mess. But that all changed with the introduction of HTML5 custom data attributes....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
There's a reason that Bootstrap 3 has ugly buttons It's true. Everyone loves Bootstrap's buttons...at least they did until 3.0 came out. But before you...
over a year ago
20

There's a reason that Bootstrap 3 has ugly buttons

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's true. Everyone loves Bootstrap's buttons...at least they did until 3.0 came out. But before you get upset at @mdo and @fat for what many mistake to be a move towards the anti-skeuomorphic design trend, you should realize there's more than meets the eye behind the decision to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Let's Encrypt renews but browsers still seeing old/expired SSL certificate This morning was frustrating. I recently upgraded my VPS from the deprecated letsencrypt client to...
over a year ago
20

Let's Encrypt renews but browsers still seeing old/expired SSL certificate

from A Beautiful Site [alt+shift+b] in programming

over a year ago
This morning was frustrating. I recently upgraded my VPS from the deprecated letsencrypt client to the newer cerbot client and generated new certificates for all my personal domains. I thought everything was fine — until I kept seeing intermittent SSL errors. I figured I did...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Feature detection for CSS transitions via jQuery $.support When working with CSS transitions, the need to detect whether or not the browser supports them may...
over a year ago
20

Feature detection for CSS transitions via jQuery $.support

from A Beautiful Site [alt+shift+b] in programming

over a year ago
When working with CSS transitions, the need to detect whether or not the browser supports them may arise.  It can be of particular use when working with the transitionend event, which won't fire in unsupportive browsers. After finding a number of questionable solutions, I came...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Thoughts on comments For as long as I can remember, comments have been a staple of blogging software. After all, what's a...
over a year ago
20

Thoughts on comments

from A Beautiful Site [alt+shift+b] in programming

over a year ago
For as long as I can remember, comments have been a staple of blogging software. After all, what's a good blog post without a relevant discussion to accompany it? You might find it strange to learn that Postleaf doesn't ship with comments. This is by design, and I'll explain why...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Smoothly scroll to an element without a jQuery plugin You know that special effect where you click on a link and your browser smoothly scrolls down to the...
over a year ago
20

Smoothly scroll to an element without a jQuery plugin

from A Beautiful Site [alt+shift+b] in programming

over a year ago
You know that special effect where you click on a link and your browser smoothly scrolls down to the appropriate section of the page? Pretty slick, right? Here are a couple snippets so you can do the same thing on your own website. Scroll to a specific element # Here's how to...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The difference between web designers and web developers If you've ever worked in, on, with, or around the Internet, you've undoubtedly heard the terms "Web...
over a year ago
20

The difference between web designers and web developers

from A Beautiful Site [alt+shift+b] in programming

over a year ago
If you've ever worked in, on, with, or around the Internet, you've undoubtedly heard the terms "Web Designer" and "Web Developer". Oftentimes, the two phrases are used interchangeably by someone who is not familiar with the industry. Perhaps the concept is irrelevant to a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
What is my browser? This tool will tell you Last week I wrote about how to get faster and better help from support. One of my suggestions was to...
over a year ago
19

What is my browser? This tool will tell you

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Last week I wrote about how to get faster and better help from support. One of my suggestions was to tell them what browser, OS, etc. you're using. Here's a free tool that will make that so much easier. As soon as you visit About My Browser, it will show you what browser and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Forcing file downloads in PHP I've seen a number of methods to force file downloads using the PHP header() function which,...
over a year ago
19

Forcing file downloads in PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've seen a number of methods to force file downloads using the PHP header() function which, essentially, sends a raw HTTP header to the browser. Depending on your browser, some files won't be downloaded automatically. Instead, they will be handled by the browser itself or a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A clever way to style the <mark> element I was checking out the CashNotify app today and I noticed a beautiful style for highlighting text in...
over a year ago
19

A clever way to style the <mark> element

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I was checking out the CashNotify app today and I noticed a beautiful style for highlighting text in their testimonials: Most textual highlights use a boring rectangle background color, but this stands out and looks gorgeous. I was really hoping they were using a simple <mark>...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
When To Create CSS Parts I was recently asked a really good question on Twitter: when shouldn't an element be a CSS...
over a year ago
19

When To Create CSS Parts

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I was recently asked a really good question on Twitter: when shouldn't an element be a CSS Part? I've spent a lot of time building web components, most of which are intended for design systems, and my answer is pretty straight-forward. Every part you expose is an API that you're...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Postleaf: reimagined It's been about nine months since Postleaf debuted as a simple, beautiful, open source, PHP blogging...
over a year ago
19

Postleaf: reimagined

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It's been about nine months since Postleaf debuted as a simple, beautiful, open source, PHP blogging platform. The initial version was well-received, landing an article on TechCrunch and making its way to #1 for the day on Product Hunt. (Thank you so much, everyone!) Today, I'm...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
GIF, JPEG or PNG? Using images on the web This article aims to describe the difference between the three most popular types of images used on...
over a year ago
19

GIF, JPEG or PNG? Using images on the web

from A Beautiful Site [alt+shift+b] in programming

over a year ago
This article aims to describe the difference between the three most popular types of images used on the Web, and how to use them effectively in your websites. JPEG # JPEG files are compressed images that maintain a balance of size versus quality. For example: More compression =...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Office 2007 files downloading as ZIP files in Internet Explorer Today I learned that Microsoft Office 2007 files (you know, the new ones that end in DOCX, XLSX, and...
over a year ago
19

Office 2007 files downloading as ZIP files in Internet Explorer

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Today I learned that Microsoft Office 2007 files (you know, the new ones that end in DOCX, XLSX, and PPTX) don't always download properly in Internet Explorer. In fact, IE tends to see them as ZIP files and forces their extension to change to .zip when you select download. This...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
CSS shapes are here Here's something exciting from the CSS world: shapes! Ok, it may not sound all that exciting, but...
over a year ago
19

CSS shapes are here

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Here's something exciting from the CSS world: shapes! Ok, it may not sound all that exciting, but you haven't had a chance to see what can actually be done with CSS shapes yet. (Hint: check out the featured image above.) Razvan Caliman explains it like this: For a long time, web...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
CSS reset with box-sizing fix For ultra lightweight projects where a framework is overkill, I tend to use Eric Meyers' CSS reset....
over a year ago
19

CSS reset with box-sizing fix

from A Beautiful Site [alt+shift+b] in programming

over a year ago
For ultra lightweight projects where a framework is overkill, I tend to use Eric Meyers' CSS reset. And since I'm not a glutton for punishment, I also throw in the tried and tested box-sizing fix popularized by Paul Irish. Instead of searching for and combining these...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Dynamic Slots Web Component authors already know how powerful slots are, but what if you could do even more with...
a year ago
19

Dynamic Slots

from A Beautiful Site [alt+shift+b] in programming

a year ago
Web Component authors already know how powerful slots are, but what if you could do even more with them? Here's an interesting technique to use (or abuse) slots in your custom elements. I've been calling the pattern dynamic slots. Before we dive in, let's take a quick look at how...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Why developers hate being interrupted I stumbled across a post today (that unfortunately no longer exists) and I was almost convinced that...
over a year ago
19

Why developers hate being interrupted

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I stumbled across a post today (that unfortunately no longer exists) and I was almost convinced that I had written it myself. Many of the points in it hit home, so I hope it helps people better understand how developers think and what they go through when interruptions arise. One...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Democratizing publishing One of the objectives Matt Mullenweg has for WordPress is to democratize publishing, which is...
over a year ago
19

Democratizing publishing

from A Beautiful Site [alt+shift+b] in programming

over a year ago
One of the objectives Matt Mullenweg has for WordPress is to democratize publishing, which is excellent. But the very same article states another objective is to "capture the 75 percent of the internet that WordPress doesn't already manage." In my opinion, these goals conflict...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
What are favicons? A favicon (pronounced "fave-icon") is a small, iconic image that represents your website. Favicons...
over a year ago
18

What are favicons?

from A Beautiful Site [alt+shift+b] in programming

over a year ago
A favicon (pronounced "fave-icon") is a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators. Well-designed favicons are styled...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Detecting mobile devices with JavaScript While I understand and value the concept of feature detection over browser detection, sometimes the...
over a year ago
18

Detecting mobile devices with JavaScript

from A Beautiful Site [alt+shift+b] in programming

over a year ago
While I understand and value the concept of feature detection over browser detection, sometimes the need for knowing whether or not we're dealing with a mobile device arises. For in-depth device checking, you can rely on a complex library such as The MobileESP Project. But for...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
I should have been asking my users this from the start Feedback is critical to an app's success. How will you know what to fix or improve on if your users...
over a year ago
18

I should have been asking my users this from the start

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Feedback is critical to an app's success. How will you know what to fix or improve on if your users don't tell you? It seems obvious, but here is something I should have been asking my users from the start. Getting the right feedback is critical # When someone signs up for my...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Convert arrays to CSV with PHP The following snippet will convert a simple PHP array into CSV (comma-separated values)...
over a year ago
18

Convert arrays to CSV with PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
The following snippet will convert a simple PHP array into CSV (comma-separated values) format. function csv($array) { $csv = ""; for ($i = 0; $i < count($array); $i++) { $csv .= '"' . str_replace('"', '""', $array[$i]) . '"'; if ($i < count($array) - 1) $csv .= ","; ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Design Systems Are An Investment It's hard to put a value on a design system. It's a lot easier to add up the costs of said design...
a year ago
18

Design Systems Are An Investment

from A Beautiful Site [alt+shift+b] in programming

a year ago
It's hard to put a value on a design system. It's a lot easier to add up the costs of said design system, especially in terms of salaries and development time. It's even easier to target a design system as the thing that's holding up a product from getting delivered. The truth...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A better way to write config files in PHP How many times have you seen something like this in a config file? $db_host = 'localhost'; $db_name...
over a year ago
18

A better way to write config files in PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
How many times have you seen something like this in a config file? $db_host = 'localhost'; $db_name = 'somedb'; $db_user = 'someuser'; $db_pass = 'somepass'; Then, of course, it gets included and the variables are referenced as globals: include('config.php'); echo $db_host; //...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Don't hate on PHP It wasn't long after launching a major open source PHP project until I started hearing things like...
over a year ago
18

Don't hate on PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
It wasn't long after launching a major open source PHP project until I started hearing things like this: I [...] immediately drop interest in a project when I see that it is implemented in PHP. A lot of people have been hating on PHP in recent years, and frankly, they have every...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Find and replace hyperlinks and email addresses in PHP These two PHP functions use regular expressions to add the appropriate HTML anchor tags around...
over a year ago
18

Find and replace hyperlinks and email addresses in PHP

from A Beautiful Site [alt+shift+b] in programming

over a year ago
These two PHP functions use regular expressions to add the appropriate HTML anchor tags around hyperlinks and email addresses in $string. PHP code # function parseHyperlinks($string) { // Add tags around all hyperlinks in $string return...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Down with the share widget! In a world dominated by social media, it's natural to want visitors to share your content with...
over a year ago
18

Down with the share widget!

from A Beautiful Site [alt+shift+b] in programming

over a year ago
In a world dominated by social media, it's natural to want visitors to share your content with friends and followers. This really isn't a bad thing, but how you go about encouraging them can actually be discouraging. The rise of the "share" widget # Six years ago, Twitter wasn't...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Tips for the aspiring web developer So you want to be a web developer...excellent choice! It's a very rewarding position that can be a...
over a year ago
17

Tips for the aspiring web developer

from A Beautiful Site [alt+shift+b] in programming

over a year ago
So you want to be a web developer...excellent choice! It's a very rewarding position that can be a lot more fun than most other programming jobs. However, before you take the plunge into a career in web development, there are a few things you should probably consider. A different...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Using the classList API jQuery makes it easy to add, remove, and toggle classes on various elements. It's too bad this stuff...
over a year ago
17

Using the classList API

from A Beautiful Site [alt+shift+b] in programming

over a year ago
jQuery makes it easy to add, remove, and toggle classes on various elements. It's too bad this stuff wasn't built into JavaScript. But wait — it is now! What your looking for didn't exist until IE10, but it's been in Firefox, Chrome, Safari, and Opera for some time now. It's...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
External popup links using jQuery With the deprecation of the target attribute in XHTML Strict, opening links in new windows has...
over a year ago
17

External popup links using jQuery

from A Beautiful Site [alt+shift+b] in programming

over a year ago
With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since I use jQuery quite frequently, this is...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Social sharing buttons are ineffective Back in 2012, I wrote an article called Down with the "Share" Widget. In it, I talked about why...
over a year ago
16

Social sharing buttons are ineffective

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Back in 2012, I wrote an article called Down with the "Share" Widget. In it, I talked about why plastering social sharing buttons all over your website is completely ineffective. This morning, Smashing Magazine all but confirmed my theory. In today's Smashing Newsletter, they...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Better Buttons with color-mix() and Custom Properties Let's build a button that accepts one color and calculates its hover and focus states automatically....
a year ago
16

Better Buttons with color-mix() and Custom Properties

from A Beautiful Site [alt+shift+b] in programming

a year ago
Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties, color-mix(), and OKLCH to ensure that tints and shades are perceptually uniform. To keep things simple, we'll follow today's...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Import/restore MySQL files from the command line I don't use this very often, but when I do I always spend a decent amount of time trying to figure...
over a year ago
15

Import/restore MySQL files from the command line

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I don't use this very often, but when I do I always spend a decent amount of time trying to figure it out online. Here are the steps to import a large SQL file from the command line. Upload the SQL file to the server that your MySQL database is on Execute the following command...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
Semantic version numbers Gone are the days of arbitrarily assigning version numbers to every new software release. With...
over a year ago
15

Semantic version numbers

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Gone are the days of arbitrarily assigning version numbers to every new software release. With semantic versioning, the question of how and when to bump versions is made simple. According to semver.org, the syntax for version numbers should go like this: MAJOR.MINOR.PATCH When...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A Beautiful Site becomes "A Beautiful Site, LLC" Today has been an exciting day. I received documentation from the State of Florida stating that A...
over a year ago
15

A Beautiful Site becomes "A Beautiful Site, LLC"

from A Beautiful Site [alt+shift+b] in programming

over a year ago
Today has been an exciting day. I received documentation from the State of Florida stating that A Beautiful Site, LLC. is officially a limited liability company. This marks the new beginning of a period of growth for ABS, which has been, until now, a sole proprietorship. In the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to File a Bug Report They say there's no such thing as bug-free code. When problems arise, creating a minimal...
a year ago
15

How to File a Bug Report

from A Beautiful Site [alt+shift+b] in programming

a year ago
They say there's no such thing as bug-free code. When problems arise, creating a minimal reproduction will give you the best chance of a speedy resolution. When a potential bug is discovered, many developers' first reaction is to file an issue. That's great, but please exercise...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
The Term "Headless Component" is a Misnomer You've likely heard the term "headless component" tossed around. The idea is you get solid,...
over a year ago
14

The Term "Headless Component" is a Misnomer

from A Beautiful Site [alt+shift+b] in programming

over a year ago
You've likely heard the term "headless component" tossed around. The idea is you get solid, accessible components without any styles. A clean slate to style from scratch! But the structure (bones) and logic (head) are there. You're mostly adding styles. They should be called...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
A user interface is like a joke When I hear a simile like this, it's hard to not share. It's not so much an analogy as it is a good...
over a year ago
14

A user interface is like a joke

from A Beautiful Site [alt+shift+b] in programming

over a year ago
When I hear a simile like this, it's hard to not share. It's not so much an analogy as it is a good rule of thumb: A user interface is like a joke. If you have to explain it, it's not that good. And I've heard some websites tell pretty bad jokes...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
How to use currentColor in your stylesheet I've had my head buried so deep in code that I hadn't even noticed this existed. It's a simple way...
over a year ago
13

How to use currentColor in your stylesheet

from A Beautiful Site [alt+shift+b] in programming

over a year ago
I've had my head buried so deep in code that I hadn't even noticed this existed. It's a simple way to reference the current text color when writing CSS. Works in modern browsers, including IE9+. If you use Less or Sass then you probably already use something like @text-color....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
A Beautiful Site
My Commitment to Accessibility I recognize the need for all users, regardless of ability and device, to have undeterred access to...
a year ago
12

My Commitment to Accessibility

from A Beautiful Site [alt+shift+b] in programming

a year ago
I recognize the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of my projects. Oftentimes, people will ask "is it accessible?" I'm reluctant to answer because...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]

The best way to read the internet.
Made for nerds, by a nerd.

The best way to read the internet

© 2023 Bored Reading. All rights reserved.

Terms Privacy Design by Kumail

bored reading

v. 229.328 compliant with
earth/mars-x8292 communication
protocol 29xjw899992

When Google killed Google Reader, the bloggosphere took a severe hit and the content quality went down because there weren't enough readers to justify the effort it takes to maintain a high quality blog.

What's left is a decaying wasteland of blogs, most abandoned, a lot are now SEO spam, and 99% are not worth reading. BoredReading is a way to read the remaining great blogs that survived the ice age.

To add your favorite blog, please suggest it here! I get emails every day which helps me maintain a high quality selection of blogs!

Avatar

Made by,
Kumail Hunaid

@kumailht on Twitter.
My website and email.

Close [esc]