Direct link to the article Forms, Auth and Serverless Functions on Gatsby and Netlify

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences.

Handling static

Avatar of Maxime Laboissonnière
Maxime Laboissonnière on (Updated on )

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick …

Avatar of Robin Rendle
Robin Rendle on

A Boilerform Idea

This is just a random idea, but I can’t stop it from swirling around in my head.

Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Prefilling a Date Input

HTML has a special input type for dates, like this: <input type="date"/>. In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it falls back to a usable text

Avatar of Chris Coyier
Chris Coyier on

Form Validation with Web Audio

I’ve been thinking about sound on websites for a while now.

When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded.

Today this …

Avatar of Ruth John
Ruth John on

caret-color

The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like:

input,
textarea,
[contenteditable] {
  caret-color: red;
}

The color of the caret generally matches the color of …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

:focus-within

The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus.

form:focus-within {
  background: lightyellow;
}

Which works like this…

<!-- this form 
Avatar of Chris Coyier
Chris Coyier on (Updated on )