Chris Coyier – CSS-Tricks

CSS-Tricks is joining DigitalOcean!

Chris Coyier — Tue, 15 Mar 2022 12:18:44 +0000

Hey hey!

I’ve got a big announcement to make here. (Where’s my gong? I feel like this really needs a good gong hit.)

CSS-Tricks, this very website you’re looking at, has been acquired by DigitalOcean!

You can hear from them directly on the DigitalOcean blog as well.

This will be the most fun if we have a conversation about it, so allow me to kick it off. I’ll pretend to be you at first and then you can be you in the comments.

Hey, congrats!

Thanks!

DigitalOcean? Aren’t they like a… web host?

They are! A very good one. You can build anything on DigitalOcean infrastructure (probably best to think of them as a cloud computing platform that has tools ranging from servers to managed Kubernetes). One thing I think is particularly cool is their new App Platform which to me feels extra aligned with front-end developers like me. We’ve covered that before. Also, their whole concept of Droplets (super simple servers that are quick to spin up) has been transformative in the industry. But more importantly about this acquisition… have you seen their DigitalOcean Community site? It’s loaded with top-notch developer education. DigitalOcean has been super committed to that for a long time, and to me makes this a very natural and well-suited move.

What happens to CSS-Tricks?

The site and content is staying right here. DigitalOcean is committed to continuing to produce high-quality content on front-end development and tending to the trove of content that exists here already.

Will you still be running CSS-Tricks?

I will be working with the DigitalOcean team as an advisor as we transition CSS-Tricks to DigitalOcean’s management, and will then step back to focus on my other projects.

Why now?

When I started CSS-Tricks in 2007, I couldn’t have imagined how much it would grow. I wanted it to grow, that was the plan, but now it’s a far bigger job than any one person can do. That, I was never ready for.

Let me take a quick moment to give some thanks here. I had the incredible help of Geoff as lead editor, sponsor wrangler, and site manager. Robin turned the newsletter into the must-read industry rag it is now. It’s a family business as well! My wife Miranda helped with the books, working with authors, and her guidance on running the site as a proper publication has led the site where it is. I literally couldn’t have done it without any one of them. And of course, the incredible group of authors, with a special shout out to Sarah, a long-time staff writer and friend.

A small but mighty team, indeed. And that’s the thing. CSS-Tricks deserves more human muscle behind it than I’ve been able to provide for it. That’s where DigitalOcean comes in. That’s the “why now.” They have the resources to put behind CSS-Tricks, and the motivation to do so. I fully trust them to do it, as they’ve been successfully doing it themselves for a long time.

OK! Your turn! If you have any thoughts or questions, feel free to comment below. We’ll read them all and publish anything useful and constructive.

CSS-Tricks is joining DigitalOcean! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Build Membership Businesses with Memberful

Chris Coyier — Thu, 03 Mar 2022 15:33:57 +0000

(This is a sponsored post.)

What would your business be like if you sold memberships? It might be more than fun to think about, in fact, it might just be transformative. With membership, would you include little add-ons or perks for your biggest fans? Or could it become the entire core of what you do? Likewise, what might you help your clients build?

Whatever you decide to do (or perhaps what a client has hired you to do), you can get it done with Memberful. It’s the best software for building membership businesses, used by the biggest creators on the web.

Memberful is for developers.

You have a goal in mind: to build a great member-powered web experience. But you’re a developer and want to build how you want to build. Good. Memberful is here to support that.

Memberful maintains a full-featured GraphQL API (complete with GraphiQL explorer), webhooks, and OAth Single Sign-on to make it easy to integrate seamlessly with any stack.

Your main site in Rails? No problem. You wanna do a Jamstack thing? Perfect. Do you have a React-powered app through and through? That’ll work.

You don’t have to build entirely from scratch.

For example, Memberful maintains a best-in-class WordPress plugin that easily gates content and adds membership to your website. So if you happen to use WordPress as your CMS, or are thinking of using it to build your website, you’ve got a first-class integration to work with.

If you’re looking to add membership to your existing business, you’ll want a solution that works with your existing technology, so you can launch a new revenue stream without rebuilding your entire tech stack.

You don’t even need to build a website to use Memberful.

If you’re not looking to gate access to content on a custom website, you won’t need a website at all to use Memberful. You can use Memberful’s hosted landing page feature to sell your memberships, and then deliver your member benefits like a private podcast, protected downloads, and newsletters right through the platform — no website required.

Say you already use other tools for your business. Maybe you do all your emailing with MailChimp. Great! Memberful fully integrates with MailChimp. Is Discord your community hub? No problem, Memberful seamlessly integrates with Discord, meaning you can offer paid subscribers perks that are unique to Discord, things like special channels or access roles.

What are some common use cases for Memberful?

Private Podcasts
Subscription Newsletters
Selling digital goods (or physical!)
Building communities
Membership-driven educational courses

Memberful handles the hard stuff so you can focus on what you do best, while earning revenue quickly. Even advanced features like gift subscriptions, coupons, referrals, free and paid trials and more, are right there for you to take advantage of.

Who handles all the emails?

Memberful does, and you get 100% control of the brand. Yet another thing you won’t need to worry about, which can otherwise be an awful lot of work and technical debt. I’m talking transactional emails here, like signup confirmation emails, welcome emails, forgot password emails, etc.

How does the money work?

Memberful has a free plan to get your feet wet. You can build 2 subscription plans and do website integrations. The PRO plan starts at $25/month and lowers transaction fees to 4.9% down from 10% on the free plan.

Where do those subscription payments go? You connect your Stripe account, so that money goes there, which is the best-in-business payment provider. That means you can offer additional features like Apple Pay and Google Pay which are great for lowering checkout friction for potential customers.

Have questions? Memberful has always-real-human based support at all times to help you.

Build Membership Businesses with Memberful originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

7 Fresh Links on Performance For March 2022

Chris Coyier — Wed, 02 Mar 2022 21:26:50 +0000

I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share.

The new WebPageTest website design

From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the technique. Five years later, I’m still a big fan of just dunking the in the HTML where you need them. It’s just an HTML partial like any other.
Next.js Performance: Making a Fast Framework Even Faster— Ben Schwarz says that Next.js is already a pretty fast framework in that it does smart things that keep even React powered pages snappy. But performance isn’t something that can be left entirely to a framework. You have to do work. Fortunately, Next.js has some pretty handy helpers for things like dynamically (lazily) loading components, deferring scripts, optimizing images, and more.
Redirect Liquidation— Tim Vereecke covers a fascinating technique where instead of redirecting an old URL to a new URL, you let the old URL load, dynamically load the new content, then history.replaceState the old URL with the new URL. It’s faster, but just don’t do it for bots.
Performant A/B Testing with Cloudflare Workers— Philip Walton covers how A/B testing is a little trickier on static sites than server-backed sites, but you can pull it off (performantly) thanks to Cloudflare Workers which can manipulate HTML before it hits the browser, much like a Service Worker except at the edge rather than at the client. Save a cookie and you can maintain users in their proper groups.
A Unified Theory of Web Performance— Alex Russell tries to answer Tanner Hodges’ call for actually defining web performance. It’s one of those things that seems obvious (like it’s clear when certain things help and hurt web performance) but actually defining it is tricky. And not just defining it in terms of specific metrics (even that is tricky), but answer questions like: What are this discipline’s guiding principles? What does it look like to practice web performance? How do we do it?
Unveiling the new WebPageTest UI— I absolutely love seeing WebPageTest’s design evolve and improve. It’s one of those products that’s clearly a best-in-class tool for performance practitioners, yet had a prettttty gnarly design for a lot of years. This is way better. It’s like when Google Fonts finally got a redesign and the broad community let out a collective exhale of appreciation.
Caching Header Best Practices— Simon Hearne’s dissertation on Cache headers. When I first started caring about web performance, this was, like, the main thing. If you incorrectly send Cache headers, users might be re-downloading a file over and over unnecessarily when they don’t need to, which is about the worst thing possible. I’m glad to see headers keep getting attention and re-imagined as the web evolves.

7 Fresh Links on Performance For March 2022 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Ahmad Shadeed: Use Cases For CSS fit-content

Chris Coyier — Tue, 01 Mar 2022 15:41:16 +0000

Ahmad Shadeed covers the CSS fit-content sizing keyword. It’s useful! It just doesn’t come up super often. I find myself using min-content a lot more, like when setting up the height of a grid-template-row.

The fit-content keyword is actually closely related to min-content and max-content — it just has a little heuristic it follows that Ahmad nicely illustrates as a flow chart.

“Use Cases For CSS fit-content” by Ahmad Shadeed

My favorite use case is covered here: sizing a

with fit-content, so that it neatly wraps around the . That way, even if the image doesn’t fill the parent space, and it can remain block-level.

We also covered PPK’s deep dive on fit-content last year. One of the key takeaways for understanding it is knowing that is it essentially a shorthand way of writing:

.box {
  width: fit-content;

  /* ... is the same as ... */
  width: auto;
  min-width: min-content;
  max-width: max-content;
}

To Shared Link — Permalink on CSS-Tricks

Ahmad Shadeed: Use Cases For CSS fit-content originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides

Chris Coyier — Mon, 28 Feb 2022 23:14:29 +0000

I enjoy articles like Hartley Charlton’s “Microsoft Edge Looks Set to Overtake Safari as World’s Second Most Popular Desktop Browser.” It’s juicy! We know these massive players in the browser market care very much about their market share, so when one passes another it’s news. Like an Olympic speed skater favored for the gold getting a bronze instead, or the like.

Microsoft Edge is now used on 9.54 percent of desktops worldwide, a mere 0.3 percent behind Apple’s Safari, which stands at 9.84 percent. Google Chrome continues to hold first place with an overwhelming 65.38 percent of the market. Mozilla Firefox takes fourth place with 9.18 percent.
In January 2021, Safari held a 10.38 percent market share and appears to be gradually losing users to rival browsers over time. If the trend continues, Apple is likely to slip to third or fourth place in the near future.

Scoping the data down even by continent is entirely different. Like in Europe, Edge has already passed Safari, but in North America, the gap is still 5%.

Source: MacRumors.com

What does it matter to you or me? Nothing, I hope. These global stats should mean very little to us, outside a little casual nerdy cocktail party chatter. Please don’t make decisions about what to support and not support based on global statistics. Put some kind of basic analytics in place on your site, get data from actual visits, and make choices on that data. That’s the only data that matters.

Alan Dávalos’ “The baseline for web development in 2022” paints a picture of what we should be supporting based again on global browser usage statistics.

Globally, IE’s current market share is under 0.5%. And even in Japan, which has a higher market share of IE compared to other countries, IE’s market share is close to 2% and has a downward tendency.

Until now we kept supporting IE due to its market share. But now, there are basically no good reasons to keep supporting IE.

Again it seems so bizarre to me that any of us would make a choice on what to support based on a global usage statistic. Even when huge players make choices, they do it based on their own data. When Google “dropped” IE 11 (they still serve a perfectly fine baseline experience), they “did the math.” WordPress, famously powering somewhere in the “a third of the whole internet” range, factored in usage of their own product.

Even if you’re building a brand new product and trying to make these choices, you’ll have analytic data soon enough, and can make future-facing support choices based on that as it rolls in.

IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Trailing Slashes on URLs: Contentious or Settled?

Chris Coyier — Fri, 25 Feb 2022 21:13:08 +0000

A fun deep dive from Zach. Do you have an opinion on which you should use?

1) https://website.com/foo/
2) https://websites.com/foo

The first option has a “trailing slash.” The second does not.

I’ve always preferred this thinking: you use a trailing slash if that page has child pages (as in, it is something of a directory page, even if has unique content of its own). If it’s the end-of-the-line (of content), no trailing slash.

I say that, but this very site doesn’t practice it. Blog posts on this site are like css-tricks.com/blog-post/ with a trailing slash and if you leave off the trailing slash, WordPress will redirect to include it. That’s part of the reason Zach is interested here. Redirects come with a performance penalty, so it’s ideal to have it happen as infrequently possible.

Performance is one thing, but SEO is another one. If you render the same content, both with and without a trailing slash, that’s theoretically a duplicate content penalty and a no-no. (Although that seems weird to me, I would think Google would smart enough not to be terribly concerned by this.)

Where resources resolve to seems like the biggest deal to me. Here’s Zach:

If you’re using relative resource URLs, the assets may be missing on Vercel, Render, and Azure Static Web Apps (depending on which duplicated endpoint you’ve visited).
on /resource/ resolves to /resource/image.avif
on /resource resolves to /image.avif

That’s a non-trivial difference and, to me, a reason the redirect is worth it. Can’t be having a page with broken resources for something this silly.

What complicates this is that the site-building framework might have opinions about this and a hosting provider might have opinions about this. As Zach notes, there are some disagreements among hosts, so it’s something to watch for.

Me, I’d go with the grain as much as I possibly could. As long as redirects are in place and I don’t have to override any config, I’m cool.

To Shared Link — Permalink on CSS-Tricks

Trailing Slashes on URLs: Contentious or Settled? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Manuel Matuzovic’s CSS Specificity Demo

Chris Coyier — Fri, 25 Feb 2022 15:27:19 +0000

If you’re looking for a primer on CSS specificity, we’ve got that. And if you’re trying to get ahead of the game, you should be aware of CSS Cascade Layers as well.

One of the ways to help get a grasp of CSS specificity is thinking terms of “what beats what” or how strong the specificity is. Manuel Matuzovic has a helpful interactive step-by-step demo. You keep clicking the “Add selector” button, and the CSS shown (and applied to the page) changes with ever-increasingly-strong selectors applied to the body that change the background-color. At the end, it veers into not-really-selectors trickery, like using @keyframes to override things.

More specificity practice

If you enjoyed the trickery at the end, check out Francisco Dias’ A Specificity Battle!, an article we published a few years back that does a back-and-forth styling battle with nineteen steps “selecting” the same element to re-style it. CSS is cray sometimes.

To Shared Link — Permalink on CSS-Tricks

Manuel Matuzovic’s CSS Specificity Demo originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

My white whale: A use case for will-change

Chris Coyier — Thu, 24 Feb 2022 20:59:29 +0000

Nic Chan:

[…] the will-change property landed in major browsers in August 2015, and I’ve been on the lookout for when to use it ever since. It might seem self-evident to apply it to commonly animated properties such as transform or opacity, but the browser already classifies them as composite properties, thus, they are known as the few properties that you can already expect decent animation performance from. So, heeding the advice of the great developers who came before me, I was cautious and waited for the right opportunity to come along.

I was thinking-out-loud about this as well on ShopTalk not too long ago. I get the spirit behind will-change. It’s like responsive images or DNS prefetching: you give the browser extra information about what you’re about to do, and it can optimize it when it happens. But with will-change… when? Why isn’t there a simple reduced test case demo to showcase something with bad performance, then will-change being applied, and it becomes good performance?

Well Nic found one little directly useful case where a hover-transformed pseudo-element leaves a little dingus of color behind in Safari, and that goes away if you use will-change. I tested it in the latest versions of Safari and found it to be true. Alrighty then, one use case!

I’d love to see a more obvious direct use case. I imagine the sweet spot is on lower-power devices (that still have GPUs) but are new enough to know what will-change is.

To Shared Link — Permalink on CSS-Tricks

My white whale: A use case for will-change originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS Database Queries? Sure We Can!

Chris Coyier — Wed, 23 Feb 2022 20:04:39 +0000

Kinda silly sounding, isn’t it? CSS database queries. But, hey, CSS is capable of talking to other languages in the sense that it can set the values of things that they can read. Plus, CSS can request other files, and I suppose a server could respond to that request with something it requested from a database.

But I’m getting ahead of myself. The idea of CSS database queries was a joke tweet going around the other day about recruiters looking for a developer who can connect to a database with CSS. Lee Meichin wrote “Yes, I can connect to a DB in CSS” as an equally funny retort.

What’s the trick behind CSS database queries?

It’s nicely elaborate:

Use a hand-modified-to-ESM version of SQL.js, which is SQLite in JavaScript.
Get a database ready that SQL.js can query.
Build a Houdini PaintWorklet that executes queries in JavaScript and paints the results back to the screen in that -y way that PaintWorklets do.
Pass the query you want to run into the worklet by way of a CSS custom property.

So, the usage is like this in the end:

Which, you gotta admit, is connecting and querying a database in CSS.

This reminds me that Simon Willison did this last year with a totally different approach. His concept was that you have RESTful endpoints, like /api/roadside_attractions, that return JSON data. But then as an alternative endpoint, you could make that /api/roadside_attractions.css which would return a valid CSS file with all the data as CSS custom properties.

So, instead it looks like this:





Attraction name: 
Address:

Which, again, is essentially connecting to a database in CSS (with HTML required, though). You can literally see it work.

CSS Database Queries? Sure We Can! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Before I go: When it comes to complaining about web browsers

Chris Coyier — Tue, 22 Feb 2022 20:06:57 +0000

That’s a damn one-two punch from Dave. He goes for the ultimate clickbait title¹, then follows up with a pile of epic advice for us all. If you want web browsers to get better, listen up:

Complaining on Twitter sure does feel good but it doesn’t do much other than burning bridges and burning through people’s patience. I guess you may also get hit with the mute button which is probably the opposite effect you were hoping for. Despite how good or valid your complaint is, combativeness results in immediate dismissal by your target audience… not once, but for years. People hold grudges for a shockingly long time.

And so:

The best thing I’ve ever done in my career is blog about my specific problems with browsers (or any software you’re passionate about). This goes for software beyond browsers too. I’ve done this for IE, Safari, Edge, Firefox, Chrome, Windows 10, WSL and I’ve seen first hand how a “friction log” can become a powerful tool in an organization.
Behind the scenes, your posts will get picked up by external-facing developer advocates and shared internally. A single blog post is worth 10,000 tweets.

Stay tuned for my upcoming blog post “I fell into a cement mixer and here’s everything I know about Cascade Layers.” ⮑

To Shared Link — Permalink on CSS-Tricks

Before I go: When it comes to complaining about web browsers originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

(Jay Freestone’s) Front-End Predictions for 2022

Chris Coyier — Fri, 18 Feb 2022 15:34:39 +0000

I linked to Jay’s front-end predictions last year and I think they panned out pretty well. I think he’s got a bit of a knack for that wide-scope look at front-end, including tooling and architecture, as well as browser tech. Let’s review.

Jay’s front-end predictions for 2021

👍 React framework maturity is here in the fact that big players like Next and Gatsby are stable and have found pretty big markets. New players like Remix are arriving to clear success. Frameworks like Astro support React because it means picking up users who have less to learn.
👍 Early container queries are here for sure. The syntax has nestled in a little bit, there are multiple browsers playing, and a polyfill is available. We’re even seeing early days of container units.
👍 WASM adoption is more iffy to me. I don’t run in the circles that would be early adopters of it, but anecdotally, I probably heard it talked about more this year than any year past. That tells me it’s still of high interest.
👍 Monoliths, if we’re just talking site building tools that “do it all” probably never stopped being popular, especially if you consider that’s what WordPress is and has only grown in popularity and usage. Perhaps Jamstack usage is growing, too, which decouples a lot of services. But the biggest players in helping you build Jamstack architectures also help you bring all those services under one roof. Services like Netlify and Vercel are Jamstack hosts, but will also run your serverless functions. Netlify Graph is a clear stab at helping you work with APIs in an in-house way, not to mention other features like form processing and auth that help make the approach feel more monolith-y. DigitalOcean’s App Platform is a Jamstack host, but designed such that any other additional services are right there. The same is true for AWS Amplify or Azure Static Web Apps.

I added to Jay’s list the inert attribute, which certainly didn’t get widely shipped, but we are seeing a smidge of progress on it, with Safari being the first-mover.

Jay’s front-end predictions for 2022

Source: jayfreestone.com

Let’s break them down:

Micro-frontends. I’m on the fence here, as I literally don’t get it. I think I’ll need to read more about it and see clear examples before I can weigh in on the technical choice here. But from a people perspective, it seems like a questionable move right out of the gate. I get that it’s complicated to get teams to work together perfectly, but splitting up their responsibilities and depth of technical knowledge doesn’t seem like a healthy solution that builds great sites.
The death of Jamstack (but not really). It’s mostly about the term itself, which I agree has gotten far too loaded and, thus, is losing meaning. “I think in 2022 we’ll see the confusion and exhaustion culminate in a gradual retreat from the term.” I can see that. Even using it in this post doesn’t feel quite right anymore.
Progressive enhancement. Jay points to frameworks producing functional sites that don’t require client-side JavaScript, which I agree is a major trend that has all sorts of positive fall-out. And I love it. I generally think of progressive enhancement as developers building interactive components — components that require tech that not all browsers support — and making sure they have some baseline functionality, even if JavaScript, or whatever other tech, fails. I never see that grow in popularity. I think it’s related to the things Melanie talks about here.
Functional JavaScript. Wild card choice! I like it! I can’t opine, but this is the kind of thing Jay is good at when it comes to front-end predictions.

To Shared Link — Permalink on CSS-Tricks

(Jay Freestone’s) Front-End Predictions for 2022 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Top Things You Didn’t Know You Could Do With Netlify CLI

Chris Coyier — Thu, 17 Feb 2022 13:00:00 +0000

(This is a sponsored post.)

First things first, if you didn’t know Netlify had a CLI, they do. One of my favorite things about it running the command netlify dev on nearly any static-site generator project is seeing it detect what it should be doing and spinning the site up in a dev server for you. But not just any dev server, a dev server that replicates the Netlify environment, meaning things like running your serverless functions and making your environment variables available.

Here are five more things you can do with it that you might not realize.

1) Create a new site from a template

That’s right, spin up a new site by typing a single command and walking through the steps. Try it:

netlify sites:create-template

There is a shorthand to the CLI as well! Try the above as ntl sites:create-template

As Charlie Gerard writes in a blog post about this:

At the moment, our templates include a Gatsby and Hugo starter with the Netlify CMS, as well as a Next.js starter.

2) Manage your environment variables

The netlify env command, now in Beta, allows you to control environment variables. You can list them out with netlify env:list, get and set (and unset) them. My favorite: move a whole set of them from one site to another like netlify env:migrate --to .

3) Test serverless functions

By virtue of spinning up your site locally with the Netlify CLI, your serverless functions will run. You can test that they are working and inspect the network traffic and such that way. But the CLI can help you as well, the netlify functions command is capable of testing functions at the command line level. For example, netlify functions:invoke can trigger a function with simulated data.

4) Live stream your Dev environment

Here’s Melanie Crissey on the Netlify Blog about this:

While Netlify’s collaborative Deploy Previews are our go-to for asynchronous feedback, sometimes you need to drop everything and pair on an issue together. That’s when Netlify Live really shines.
For example, just last week, our team was working quickly to debug some funky edge case issues with authentication for the Your Year on Netlify project. Zach Leatherman, who was working on the fix, spun up a local version of the app with Netlify Live. Within minutes, he was able to see the logs, identify the issue, and make a few changes. Meanwhile, I was able to test out the fix before it was ever deployed—without pulling down a copy of his latest version from a repo. Netlify CLI to the rescue and problem solved!

Remember how I mentioned you spin up a dev environment locally with netlify dev? The trick here is to do netlify dev --live. So rather than a localhost URL that only you would be able to see, you’ll get a special netlify.live URL that the world can see.

5) Run `netlify switch` to switch between different Netlify accounts, like from your personal side project to a work project

You literally auth with the CLI (netlify login, imagine that), so that you can act on behalf of your own Netlify account. Deploy sites and whatnot. But it’s perfectly reasonable that you have multiple Netlify accounts (like work and personal). Running netlify switch makes it trivial to move between accounts.

BONUS!

This video is 50 seconds long and shows how you can go from having some static files locally to a deployed with the CLI:

Top Things You Didn’t Know You Could Do With Netlify CLI originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Add-to-Calendar Button UI Widget

Chris Coyier — Thu, 17 Feb 2022 01:14:21 +0000

A useful little UI widget thingy here from Jens Kuerschner. Click the add-to-calendar button, get a list of calendar apps, the user selects which one they actually use, and they get what they need for that calendar. Could be a specialized URL they get sent to, or even an .ics file that gets downloaded.

It’s pretty easy to use. Here’s me using the library off of CDNs for both the JavaScript and CSS:

CodePen Embed Fallback

Let’s do a thought dump!

The configuration as “a big chunk of JSON sitting in the HTML as a string” is a little weird to me.

I see the hack where it uses display: none; on the parent to hide that text from rendering, but I think I like the setup where that’s put into a

Chris Coyier – CSS-Tricks

CSS-Tricks is joining DigitalOcean!

Build Membership Businesses with Memberful

Memberful is for developers.

You don’t have to build entirely from scratch.

You don’t even need to build a website to use Memberful.

What are some common use cases for Memberful?

Who handles all the emails?

How does the money work?

7 Fresh Links on Performance For March 2022

Ahmad Shadeed: Use Cases For CSS fit-content

IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides

Trailing Slashes on URLs: Contentious or Settled?

Manuel Matuzovic’s CSS Specificity Demo

More specificity practice

My white whale: A use case for will-change

CSS Database Queries? Sure We Can!

What’s the trick behind CSS database queries?

Before I go: When it comes to complaining about web browsers

(Jay Freestone’s) Front-End Predictions for 2022

Jay’s front-end predictions for 2021

Jay’s front-end predictions for 2022

Top Things You Didn’t Know You Could Do With Netlify CLI

1) Create a new site from a template

2) Manage your environment variables

3) Test serverless functions

4) Live stream your Dev environment

5) Run netlify switch to switch between different Netlify accounts, like from your personal side project to a work project

BONUS!

Add-to-Calendar Button UI Widget

The configuration as “a big chunk of JSON sitting in the HTML as a string” is a little weird to me.

5) Run `netlify switch` to switch between different Netlify accounts, like from your personal side project to a work project