Use Subdomains

 

Listen to Jim:

Get a personal domain and start all your side projects as a subdomain of that top-level domain.

Do not buy a custom domain for every little idea you have. Save your money, give your project the longevity it deserves, and show off who made the dang thing implicitly.

Your personal domain is the one you’ll own the longest, so you can easily upgrade a side project subdomain to a top-level domain if/when it becomes reasonable enough to justify it for X, Y, or Z reasons (simply setup up a long-standing redirect from the subdomain to the top-level domain).

However, you can’t easily “downgrade” from a top-level domain to a subdomain because eventually you’ll stop paying for the top-level domain and lose the redirects from any residual traffic.

I also think it’s cooler to see small projects / microsites / whatever you want to call them at subdomains. Couldn’t tell ya why, I just like the vibe. And for the record, it’s not like you even have to share the same host. You can point the subdomain wherever.

Money where mouth is:

The smashburgers one is Cloudflare Pages, the breakfast burritos one is Netlify. I had to go look it up because I couldn’t even remember. Once you set up these site builder tools that deploy on git commits, they tend to just keep working.

Chris Coyier

21 Sep 2023 at 22:33

Some Short Music Videos

 

I posted these to my Instagram, but they could (should) be here. I’m trying to get my “music room” at home in good order and learn to use recording equipment and software.

These ones are very rough. Not only am I just not very good, but all I did was turn on Quicktime Player and did a New Movie Recording, then tried to line up the tracks in ScreenFlow as well as I could. That’s just a sucky way to do it. GarageBand is way better and more fun (e.g. multi-track is easy, a little EQ goes a LONG way).

But then you don’t have any video! How the heck to people get super good audio and video?

Antelope Gap

Julianne Johnson

Big Sciota

Cumberland Gap

Enclosure:

Chris Coyier

21 Sep 2023 at 17:23

Cannonball is such a badass song

 

The Breeders! The “30th Anniversary Edition” makes me feel as old as I am.

But check this out. You could have fond memories of the cool megaphone voice check-check intro:

Then it’s all like a-ooooo-ooo a-ooooo-ooo which is just unforgettable:

Then the drummer is like this is actually gonna be a song get ready:

Then the bass is like I’m here yo with the cleanest bass lick since walk on the wild side:

Then those two high five for a second:

Then the guitar comes in all wobbly as henk:

Then they start to jam:

But then they gotta do some weird distorted arhythmic bird whistle thing:

And that’s before the song even really starts. That’s wild.

Enclosure:

Chris Coyier

20 Sep 2023 at 23:41

WordPress Hosting Advice

 

Two people have reached out thoughtfully to ask me about where they should host a WordPress site. They just kinda vaguely wanted it to be good (like a nice dashboard, at least), and not break the bank.

The answer is… c’mon I’m just one dude! 😵‍💫

I’ve never done an in-depth competitive analysis of the whole market. In a way, it’s too big to review, and honestly you probably just have to look around and make a choice and hopefully, it’s fine.

And now, I shall spit out some more words about my own experiences and poking around.


All my WordPress sites, including this one, are hosted by Flywheel. They have plans as little as $13/month ($150/year), and it scales up with what seems to me fair pricing from there. I do find their monthly visits caps a little low. The admin area for managing your sites is nicely designed and has all the things you’d expect. I’ve found the support good. I especially like that they are who created Local, although I rarely use any of the features that directly connect the hosting to it, so it would still be useful on any other host. Disclosure: Flywheel used to sponsor CSS-Tricks when I ran that. But I honestly do like the hosting and don’t have any experience with anything I like better.


Flywheel is actually now owned by WP Engine, so it’s possible someday WP Engine eat it up. It took about a decade for that to happen to Media Temple.

WP Engine itself is a very legit choice, too. Their lowest option starts a bit higher at $20/month, but theirs options for plans with multiple sites are actually lower. WP Engine also owns some of the biggest and most important plugins and themes in the industry, so they are a major player that likely ain’t going anywhere. I’ve never tried it, but I have heard good things.


It should be known that WordPress.com is an actual option now. It used to be just the place for do-it-all-for-me mode where you mostly just pick a theme but otherwise not have much control. That’s changed, and now on the $25/month plan an higher you get SFTP/SSH access, MySQL access, the ability to install plugins, and whatever else you want. So just like any other WordPress hosting really, except you can’t touch the WordPress installation itself, which is updated for you. Theoretically, about as secure as it gets.


If you like the idea of trusting Automattic to get WordPress hosting right, they also have Pressable. Their personal plan is the same price as the Business plan on WordPress.com, so it’s very unclear to me when you’d pick one over the other. Also with both: you get Jetpack which has stuff like realtime backups which is pretty cool. It’s unclear if you get stuff like Jetpack Search, which I find very good and would be nice if you did. I see Pressable does support over Slack which seems kinda cool.


There are also the ones that, inexplicably to me, WordPress.org recommends: Bluehost and DreamHost. Bluehost has a plan that starts at a rock-bottom $2.95/month, which “rebills” at $11.99 and I can’t find how long the less expensive price goes for, so it’s probably just that first month. Still cheap. DreamHost is even cheaper at $2.59 for the first month and $5.99 after. That’s so low that I imagine they need to cut corners somewhere and how can it possibly be any good? Just a feeling! Never tried either, and it’s worth something that those are the only other two recommends from the whole WordPress open source project, but they both seem awfully suspicious.

There’s also GoDaddy too with WordPress-specific plans starting at $8.99. I actually don’t mind GoDaddy for domains but I’m afraid I’ve never heard anyone ever say anything good about the hosting so I’m personally wary there.


Are there more choices than this?

YES.

Kinsta! (never tried it, looks fancy)

Surely there are dozens if not hundreds of more web hosts that can and do host WordPress websites. All you need is the ol’ LAMP stack to get it done. Plus there is niche stuff like Strattic that does it static or headless style, and SpinupWP that helps you run WordPress on cloud providers.

Me, I’d lean toward a host that specializes in it.


OK one more thing.

ISN’T IT FRIGGIN CRAZY THAT NONE OF THEM WANT TO HELP YOU WITH DEPLOYMENT?

My god. Give me a Git repo where the main branch deploys. Maybe even do build previews for me on the other branches if you really wanna do something premium for me.

Chris Coyier

20 Sep 2023 at 20:36

Memorial Sites

 

I’m still on that 100 years thing and how it connects to free hosting, and now thanks to a conversation I peeped in on how it relates to the websites of people who have passed and the memorial sites to them.

I helped with a memorial site to Christopher Schmitt that I very much hope lasts for 100 years. It’s intentionally at a *.netlify.app URL so nobody needs to hand-manage to domain. At the time, Netlify agreed to mark the account as free. The team account has an “open source” badge when I log in now, which is likey their internal system for such things.

The code is on GitHub, but in a way that doesn’t matter as if that went away, the build/deployed files would still be there and it’s just simple HTML. Zach Leatherman mentioned during a recent Jamstack Zhuzh that “portability” might be a key aspect to the Jamstack, which I liked. Should anything become at-risk with the Netlify-hosted site, the static files could be picked up and moved elsewhere, potentially without even running the build that made them.

When Christopher passed, I know Ari Stiles had to go through quite an arduous process of getting the virtual keys to all his stuff so that his digital legacy could live on, like christopher.org, which appears to still be WordPress and thus has a bit higher of technical requirements for hosting.

The WordPress 100 year plan had this kind of thing in mind specifically:

[for:] Families who wish to preserve their digital assets—the stories, photos, sounds, and videos that make up their rich family history—for generations to come.

The zero bucks we spent on Christopher’s site was a little more on the practical side. The pine box to the gold-guilded coffin.

One regret: there’s a damn typo in the URL in the CSS-Tricks post about it but I’m locked out now and can’t fix it.

Chris Coyier

20 Sep 2023 at 15:37

Blocking AI Scraper Bots

 

I think it was a month or two ago when OpenAI published docs on how you can tell their “web crawler” (scraper) to not scrape your site, following a similar syntax to Google’s:

User-agent: GPTBot
Disallow: /

The instant I saw it I put it in my sites robots.txt file. I wanted to see how it felt and see if I felt any different over time.

Nope, not so far.

I don’t like the idea of a big machine scraping all my data to make it smarter, with no credit or links to where it got that data.

I’m not against the idea of language models, nor do I have any particular opinion on how you should feel about it. I just don’t want my labor and thoughts to be a part of a multi-billion dollar company’s business model, and in fact, I think they should have asked me to begin with.

If a huge company sent a robot to your door to ask for a lock of your hair, would you give it to them? If they asked for one square inch of your land, would you sign it over? If they asked you to run on a treadmill for one minute a day for them, would you hop to it? What if they didn’t ask?

Chris Coyier

19 Sep 2023 at 23:28

When you need to draw some gosh danged boxes that are connected to some other gosh darned boxes with arrows connecting them

 

Sometimes you need to be doing that.

LucidChart

When I was in the process of selling CSS-Tricks to DigitalOcean, they wanted to understand the stack and basic architecture of the site. I was like: it’s a pretty basic WordPress deal: PHP, MySQL. Wait but there is a bit more to it. It’s hosted on Flywheel who do a little of their own stuff. Cloudflare is in front of it. I host the (most of) the code on GitHub. It deploys from there with Buddy. That’s a mouthful, so how about some boxes and arrows!

Boxes and arrows!

A web browser is shown with "happy readers" inside. A variety of tech in boxes converge on that web browser. PHP, MySQL, and web servers go through Cloudflare, then end up there.
Terrible diagram, but I think it did what it needed to do.

That’s literally exactly what I do on this website too, by the way. That’s just my way of working with WordPress and I find it very manageable.

The chart above is made in LucidChart, which seems to be a big player in this world. It’s all the app does, and it does a pretty good job of it. I’m actually a little jealous of how their in-app upsells work. Need a little picture of a browser? Sure, no problem, paid feature. I can see being highly annoyed by that, but as a product owner myself, tapping into this in-the-moment needs is a smart way to do it.

I once used LucidChart to explain how our landing pages work on CodePen where we host a “shell page” in one location and snag the content via API elsewhere and “stitch” them together.

Adhering to Coyier’s Edge Law.

Neither of the above was any kind of aesthetic masterpiece, but they got the job done.

ReactFlow

What if you don’t want to drag things around and essentially use a graphic design tool for this job? What if you’d rather code?

I saw ReactFlow the other day which does the boxes-and-arrows thing, but the data source is essentially a bunch of JSON, then you control the features with props and styling with CSS.

Mermaid

Don’t miss Mermaid! which I think is probably the most accessible code-to-chart system around. It’s built into GitHub commenting and Notion, so that’s probably a helpful for the type of people that read this blog. They call it “Markdown-inspired”.

I used it just the other day to document a website pages hierarchy to help understand what pages link to what other pages and go “under” them which will affect the URLs and such. The chart is ultimately what is useful to see, but it took some light “code” to make it.

Mermaid supports a few different kinds of charts. We’ve used “sequence” charts effectively before too, which are helpful when talking about web services. Stuff like: user clicks button, GraphQL mutation happens, load balancer sends to orchestration server, data processing is farmed out to microservices, error is detected, message to client happens immediately so user knows, data processing continues where possible, blah blah blah. Sometimes you just have to draw stuff like that out to help yourself and your team think through it.

From what I understand, the OG “source graph visualization software” is Graphviz. And maybe Mermaid is based on it? They are very similar, anyway. And Graphviz is usable on the web also thanks to a Web Assembly port of it.

I think you’ll know if you’re in a “I need production-grade code-based graph production software” or “I need to noodle around with some boxes and arrows to help me think” situation.

Classic Design Tools

There is nothing stopping you from doing diagrams in Adobe Illustrator or Sketch or Regular-Figma or whatever. Heck you could use MS Paint. Heck, you could use JS Paint!

The problem here is that you’re just not getting much help. Every single node is bespoke. It will take forever. Adjusting things will be painful. And frankly how bad it will (probably) look might be more of a distraction than you want.

FigJam

I said “Regular Figma” above because they make a whole separate tool that is actually pretty good for drawing diagrams and features boxes-with-arrows as a first-class citizen of it.

It’s pretty darn nice really, and the fact that it’s also designed with real-time-or-not group collaboration in mind makes it a pretty cool choice. How smart of Figma to open up their tooling so that not just visual designers get use out of it.


There are probably 100 more options.

Paper, there’s one.

JavaScript libraries galore. Weekend hackathon projects. Who knows what all. What’s your favorite?

Chris Coyier

19 Sep 2023 at 19:14

How long does free hosting last?

 

I keep thinking about that 100 years of hosting thing.

Without some fancy setup like that, this is how it normally works: You pay your hosting bill, you pay to renew your domains, and you stay up to date on the shifting tides of technology well enough that your site doesn’t break. Then theoretically, your site stays online as long as that hosting company exists. Maybe 100 years!

Let’s remove a couple of factors.

  1. Your site is static, so the tides of technology don’t really matter. The very first HTML website ever still works, so let’s say your current static websites will have the same good fortune as the century ticks by.
  2. Your hosting plan is free.
  3. Your URL is part of the hosting.

Free hosting? Yeah! Netlify has a free plan. Vercel has a free plan. CodePen has a free plan (although we don’t let you deploy on the free plan). I wouldn’t say it’s ultra common for web hosts, but it’s pretty common around the web for various services.

Vercel has some docs that say this:

When you create a new account with Vercel, you are creating a personal account. A personal account is your individual account that exists on the Hobby plan. This plan is free to use (subject to the Fair use policy) forever.

Note the last word.

But, and I shit you not, these docs were updated as I was writing this blog post (the footer on the page says it was updated on September 18, 2023), and that line was removed. They now link to the hobby plan page, which, straight up, is very cool of them to offer, but doesn’t say anything about “forever”.

Of course it won’t be forever.

If you deploy some site there and just have like my-dumb-little-site.now.sh or blah-blah.vercel.app or whatever it is as your deployed/production/forever site, something is going to happen to break it eventually.

I don’t know what it will be. Maybe Vercel will go out of buisness. Maybe they’ll change their policies and no longer offer a free plan. Maybe another company will buy them and make those policy changes for them. I don’t know what it will be, I don’t know when it will be, but something will break that site. (This goes for any host in the same position, I’m just using Vercel as an example.)

I’m also not saying it’s that big of a deal. If you really care about this site, there will be some kind of action you can take to save it from whatever fate it faces… probably.

It’s interesting to think about! Let’s do a little test for fun. I’ll make an HTML page noting when 100 years will be from the time of publishing.

I’d like to think I’ll be dead of old age before any of those URLs stops working, but we’ll see! Every fiber of me wants all of them to last 100 years, but two bucks says none of them do.

Chris Coyier

19 Sep 2023 at 00:09

Site Realign

 

There is little fresh coat of paint around here. It’s not a million miles different from before, just some new aesthetic choices for fun.

I went for a high-information-density look. I liked what Robin said in his recent redesign notes, so I kinda copied that.

The goal here was to merge the about and index pages into one since they’re always the same thing anyways and this now saves you a click if you want to learn about me.

v13

I went for a “blocks” look which I think works for the kind of content around the site. It wasn’t exactly tricky, but when blocks-within-blocks got involved, that was the only bit that had weird edge cases that honestly took more time polishing than the entire design took to pull off.

How you like them apples Lighthouse scores?

Lighthouse scores:

Performance = 100
Accessibility = 100
Best Practices = 92
SEO = 100
The Best Practices ding is about serving right-sized images, but I literally am using responsive images on that fluid with image of my face, so like, I think it’s fine.

There is one main typeface on the whole design: system-ui. That translates to San Francisco on Apple devices, which is a variable font, so I leaned into that used a variety of weights and widths, like:

font-variation-settings: "wdth"40, "wght"300;

Not all platforms have San Fransico though, of course! But it doesn’t matter as hopefully system-ui maps to something nice for them, or falls down the stack which is also fine.

Windows 10, fine.

Android 12, fine.

The only other typeface is a mono where I used ui-monospace, which I think is a little more aspirational (not sure where browsers are are honoring that). The full stack is actually:

ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace

… which I snagged from Modern Font Stacks. On my machine at the moment that fell all the way back to Menlo, although I do have a local copy of Source Code Pro that I just don’t have active at the moment.

I did add View Transitions attributes to some of the elements, but as this is a “website” (what some kids call “Multi Page Apps” lol) and none of the browsers support that variety of View Transition yet (“viewTransition API for navigations” Chrome Canary class the flag), I’m not going to go too far with them. This ain’t an Astro site so no polyfill action for me. I did try it in Canary and they aren’t working (the headers share a unique view-transition-name). But I have stopped caring for now. I just missed the <meta name="view-transition" content="same-origin" />, thanks Colin! Now it’s this:

Simple fun. Woah what’s with that dark mode popping in though? Surely some bug I’ll have to deal with.

That’s about it really! Nothing major. I linked up my two dumb little food sites in the footer because they are subdomains of this site and why not. Like my new Smashburger site which I finally polished up enough to share it with local Reddit community.

Chris Coyier

18 Sep 2023 at 19:57

Ninety Nine Years (And One Dark Day)

 

Just an old bluegrass song I like.

And what popped to mind when I sat down to continue my journey of learning that absolute friggin basics of how to record something. I have all the stuff from years of podcasting you’d think I’d know now to use it by now, but I really don’t.

screenshot of GarageBand showing 7 tracks and their waveforms.

Apparently you can one-click it over to SoundCloud so yeah check out my SoundCloud.

My "music room" at home with instruments and mics all strewn around.
Chris Coyier

18 Sep 2023 at 01:25

What web tech things had a period of massive hype?

 

We only just recently lived through the blockchain and crypto hype. We’re currently living through the AI hype.

There is some (anonymous?) person who writes at Bite code! in the first person who remembered a hype cycle I’m too young to remember:

When I started programming, XML was going to replace everything. HTML with XHTML, validation with DTD, transformation and presentation with XSLT, communication with SOAP. […]

Turns out, XML was not the future. It was mostly technical debt.

XML is the future

That’s fun. People were like, you know what’s going to make things better? Angle brackets.

If we keep limiting it to web tech, what are some of the big hype cycles? “Single Page Apps” gotta be worthy of being on the list, if not several more stops on the Big JavaScript Train that got us there. We’re just still in that cycle so it isn’t entirely funny yet.

The good news is that whatever the hype is tends not to go away entirely but settle into just solving the problems that it’s actually good at solving.

The best lesson comes early in the article:

I was lucky to learn this lesson very early in my career: there is no silver bullet, any single tool, no matter how good it is, must be evaluated from the engineering point of view of pros and cons. Everything has a cost, and implies compromises. […]

geeks think they are rational beings, while they are completely influenced by buzz, marketing, and their emotions. Even more so than the average person, because they believe they are less susceptible to it than normies, so they have a blind spot.

Chris Coyier

17 Sep 2023 at 17:50

Live Coding Interviews

 

If you need a good full-throated argument against this practice, read Garrett Dimon’s Live Coding Interviews.

They exist because companies need to know if you can actually code, but as Garrett says:

At best, they serve as a tolerable de-risking filter for a company that needs an assembly-line hiring process.

It’s clearly fine that a company wants to know if you can code or not, plus all the ancillary things like being able to understand instructions, reason your way through problems, find help, and communicate about all of that.

But doing all that live with a random observer with whom you have zero rapport is just weird.

The underlying problem with live coding interviews stems from trying to create an objective evaluation of skills that aren’t easily quantifiable—and they attempt to do this in a wholly unnatural context with a set of loaded assumptions.

The good news is that companies can get all this information in a better way: the take-home coding exercise. Give people a setup repo with a starter dev environment and problem setup. Then ask them to spend one hour on it and commit their code. The actual interview can then be them talking through how they approached the problem and their code. This is a much closer proxy to day-to-day work, and you’ll learn more about them.

The approach for entry-level roles, senior-level roles, management-oriented, or independent contributor roles will all need slightly different approaches, and complex questions rarely have simple solutions.

Perhaps “just do take-homes” is too simple of a solution, but feels like a step in the right direction to me.

Chris Coyier

16 Sep 2023 at 15:01

More Colorful Texas Sayings Than You Can Shake a Stick At

 

Some A+ journalism from Anne Dingus [sic] in TexasMonthly in… 1994. I think it’s smart for long-standing publications to make sure their old gold is properly published online.

The clear winners:

  • I could sit still for that.
  • Confused as a goat on AstroTurf.
  • He’s so honest you could shoot craps with him over the phone.
  • Brave as the first man who ate an oyster.
  • Busy as a funeral home fan in July.
  • Cold as a well-digger’s knee.
  • Never sign nothing by neon.

There was some fine ones in The Fox and the Hound 2 also.

Chris Coyier

15 Sep 2023 at 17:37



Refresh complete

ReloadX
Home
(224) All feeds

Last 24 hours
Download OPML
A Working Library
Žan Černe's Blog
Alan Ralph
Alastair Johnston
*
Andy Sylvester's Web
*
Anna Havron
annie mueller
*
Annie Mueller
*
Austin Kleon
bgfay
Bix Blog
*
Chris Coyier
Chris Lovie-Tyler
*
CJ Chilvers
CJ Eller
*
Colin Devroe
*
Colin Walker – Daily Feed
*
Colin Walker – Live Feed
*
Content on Kwon.nyc
*
Dave's famous linkblog
*
daverupert.com
*
David Heinemeier Hansson
Dino’s Journal 📖
dispatches
E L S U A ~ A blog by Luis Suarez
*
everything changes
Excursions
Flashing Palely in the Margins
*
For You
hailun
inessential.com
*
jabel
*
James Van Dyne
*
Jan-Lukas Else
Jason Fried
*
Jim Nielsen’s Blog
Kev Quirk
lili's musings
*
Live & Learn
Lucy Bellwood
Maggie Appleton
*
Manton Reece
*
Manu's Feed
maya.land
Musings
*
Nicky's Blog
Oblivion With Bells
On my Om
*
Pablo Morales
rebeccatoh.co
*
Rhoneisms
ribbonfarm
*
Scripting News
*
Scripting News for email
*
Sentiers — Blog
Simon Collison | Articles & Stream
strandlines
the dream machine
*
The Marginalian
*
thejaymo
tomcritchlow.com
*
Tracy Durnell
writing.as.amit
*
yours, tiramisú

About Reader


Reader is a public/private RSS & Atom feed reader.


The page is publicly available but all admin and post actions are gated behind login checks. Anyone is welcome to come and have a look at what feeds are listed — the posts visible will be everything within the last week and be unaffected by my read/unread status.


Reader currently updates every six hours.


Close
Colin Walker Colin Walker colin@colinwalker.blog