forms

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 forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I've been meaning to dive into their "backend" features since.

Today, I'm doing just that, using a static Gatsby site, Netlify's Forms, Identity, and Functions features. This tutorial will show you how to:

  • Add static forms to your site
  • Add user authentication for password-protected content
  • Create an AWS Lambda function

Ready to supercharge a static site with serverless features?

(more…)

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here.

(more…)

Text Input with Expanding Bottom Border

Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style.

Typing animation in which a yellow border matches the length of the text inside.

It's a trick! You can't really make an <input /> stretch like that, so Petr makes a <span></span> to sync the value too, which acts as the border itself. The whole thing is a React component.

If you're willing to use a <span contenteditable></span> instead, you could do the whole thing in CSS!

(more…)

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 skim and found styles for a rather peculiar element called <output></output> that I'd never seen or even heard of before.

(more…)

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 temptation to reach for a mini form framework is strong. Form elements are finicky, have little cross-browser issues, and are sometimes downright hard to wrassle away styling control.

This idea, which I'm just now managing to write about, but haven't actually done any work toward, would be this mini-form framework. Maybe something like "Boilerform", as Dave jokingly suggested on an episode of ShopTalk.

(more…)

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 isn't and needn't be a thing. We can get clever with sound. We have the Web Audio API now and it gives us a great deal of control over how we design sound to be used within our web applications.

In this article, we'll experiment with just one simple example: a form.

(more…)

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 <div contenteditable></div>.

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

The color of the caret generally matches the color of the text, but this property allows you to change those independently.

(more…)

: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 will be selected -->
<form action="#">

  <!-- when this input is in focus -->
  <input type="text"/>

</form>

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag