APIs and Authentication on the Jamstack
31.3.2020
The first “A” in the Jamstack stands for “APIs” and is a key contributor to what makes working with static sites so powerful. APIs give developers the freedom to offload complexity and provide avenues for including dynamic functionality to an otherwise static site. Often, accessing an API requires...
Wide Gamut Color in CSS with Display-P3
31.3.2020
Here’s something I’d never heard of before: Display-P3 support in CSS Color Module Level 4 spec. This is a new color profile supported by certain displays and it introduces a much wider range of colors that we can choose from.
Right now the syntax looks something like this in CSS:
header...
CSS-Only Marquee Effect
31.3.2020
A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.
CSS-Only Marquee Effect was written by Mary Lou and published on Codrops
RSS Stuff
31.3.2020
Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it’s for, and how you can start using it as a reader. I like this callout, too:
Sometimes the content is just an excerpt, encouraging you to read the rest of the content...
gqless
30.3.2020
This is so cool. I mean, GraphQL is already cool. It’s very satisfying to write an understandable-looking query for whatever you want and then use that data in templates.
But what if you didn’t have to write the query at all? What if you just wrote the templates pretending you already...
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs
30.3.2020
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet...
How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
30.3.2020
Firefox 72 was first out of the gate with "independent transforms." That is, instead of having to combine transforms together, like:
.el {
transform: rotate(10deg) scale(0.95) translate(10px, 10px);
}
...we can do:
.el {
rotate: 10deg;
scale: 0.95;
translate: 10px 10px;
}
That's extremely...
Inspirational Websites Roundup #14
30.3.2020
This roundup contains our personal selection of the most interesting websites that were released in the past couple of weeks.
Inspirational Websites Roundup #14 was written by Mary Lou and published on Codrops
Creating a Pencil Effect in SVG
28.3.2020
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different...
How to use CSS Scroll Snap
27.3.2020
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance.
I like Max Kohler's coverage...
Emergency Website Kit
27.3.2020
Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes:
In cases of emergency, many organizations need...
Creating an Editable Site with Google Sheets and Eleventy
27.3.2020
Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into an API, that you as a developer can hit for data when building a website. In that last article, we used that API on the client side, meaning...