Connect: behind the front-end experience

Some fantastic behind-the-scenes stuff about Stripe’s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques.

Using CSS grid for their iconic background stripes
Using 3D cubes for aesthetic flair
Using reduced motion media queries to accommodate that preference
Using the Web Animation API for event-triggered keyframe-like animations in JavaScript

Plus one I’d never seen before:
Connect’s landing page uses the new Intersection Observer API which provides a much more robust and performant way to …

Connect: behind the front-end experience is a post from CSS-Tricks

Link: https://stripe.com/blog/connect-front-end-experience

How the minmax() Function Works

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we’ve been experimenting with lately.
What’s especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts.
Direct Link to Article — Permalink…

How the minmax() Function Works is a post from CSS-Tricks

Link: https://bitsofco.de/how-the-minmax-function-works/

Free Guide to Using cPanel & WordPress​

Managed WordPress hosting is a great choice if you need a hosting solution that’s optimized for WordPress. But it’s only for WordPress.
What if you need more?
What if you need email hosting? What if you need to run other software alongside WordPress? What if you need more control than what managed WordPress hosting allows, but without the complexity of a VPS?
There’s an easy solution: host everything in one place, and manage it all with the powerful cPanel dashboard.…

Free Guide to Using cPanel & WordPress​ is a post from CSS-Tricks

Link: http://synd.co/2rRT7pV

An intro to web components with otters

Monica Dinculescu on web components and why we might care:
… before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it… With web components, web developers get to write such elements, so that you don’t have to wait for 10 years before all browsers agree that they should implement a date picker.…

An intro to web components with otters is a post from CSS-Tricks

Link: https://meowni.ca/posts/web-components-with-otters/

World Wide Web, Not Wealthy Western Web

Bruce Lawson explores many of the misconceptions that web designers might have when building websites. The crux of his argument is that we should be focusing on designing for users that are just getting online and for those that have frustratingly slow internet connection speeds.
He even makes a bold prediction:
Many of your next customers will come from the area circled below, if only because there are more human beings alive in this circle than in the world outside …

World Wide Web, Not Wealthy Western Web is a post from CSS-Tricks

Link: https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/

How to improve your site’s UX

Let’s face it, it’s tough to be a web designer today. You have to stand up in front of the class and let people pick apart the thing you spent 10 hours on the night before.
But what if you can really support your designs by actual data and feedback, directly from your users and visitors, ultimately improving the overall experience.
By combining both Analytics and Feedback tools, Hotjar gives you the ‘big picture’ of how to improve your …

How to improve your site’s UX is a post from CSS-Tricks

Link: http://synd.co/2qxqGu8

Oh wait, I was looking at production

Oh so true:
Why won’t this CSS change?!
Restart server
>Nope
rm -rf everything
>Nope
rebuild dev env
>Nope
Oh wait, I was looking at production
— Mike Coutermarsh (@mscccc) June 5, 2017

Not to ruin the joke, but I find it tremendously helpful to Give Your Development Domain a Different Favicon Than Production.
Read the comment thread on that post too, there are some other very clever ideas.
Direct Link to Article — Permalink…

Oh wait, I was looking at production is a post from CSS-Tricks

Link: https://twitter.com/mscccc/status/871867435476951040

Breaking Out with CSS Grid Explained

Tyler Sticka shared a slick technique for breaking out content in a CSS Grid layout, but Rachel Andrew goes the extra mile to explain why the technique works:
When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic. We get a named grid area of the main name used. Sounds odd? Take a look at the diagram below, it shows 4 named grid lines, main-start and main-end …

Breaking Out with CSS Grid Explained is a post from CSS-Tricks

Link: https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/

HelloSign: The Industry’s Fastest eSignature API Integration

My favorite kind of software products are the ones that very clearly make life simpler. Being able to legally sign a document by clicking a button in an email and squiggling my mouse to make my signature is definitely one of those things.

You can provide that to your users with HelloSign! You can set up your documents there (it supports all the formats you’d need, like PDF, Microsoft Word, Powerpoint, etc) and start collecting the signatures you need …

HelloSign: The Industry’s Fastest eSignature API Integration is a post from CSS-Tricks

Link: http://synd.co/2r90Lvr

Deletability

Kelly Sutton has written a post called Deletability and I’ve been thinking about it all day and how his ideas relate to writing CSS:
By working with code, we see that modularity and deletability are closely related. Properly modularized code is easy to delete.
Writing deletable code is writing good code.
Apparently, this is a common approach to writing software although I’ve never heard of this concept when taken to the front-end side of things. But! I think it should …

Deletability is a post from CSS-Tricks

Link: http://kellysutton.com/2017/05/29/deletability.html