novakHouse.us

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 elements.� Basically each little blob of gray in that image would be separately defined.�

But, SVG filters to the rescue.

CodePen Embed Fallback

It's all about <feTurbulence.

Squigglevision!

Direct Link … Read article “Creating a Pencil Effect in SVG”

The post Creating a Pencil Effect in SVG appeared first on CSS-Tricks.

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 as well, which includes a demo where the snapping can happen in multiple directions.

This is one of those things where, if you didn't know about it, it's worth a solid golf clap … Read article “How to use CSS Scroll Snap”

The post How to use CSS Scroll Snap appeared first on CSS-Tricks.

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 a quick way to publish critical information. But exisiting (CMS) websites are often unable to handle sudden spikes in traffic.

What’s so special about this boilerplate? Well, it does smart stuff like:

• generates a static

… Read article “Emergency Website Kit”

The post Emergency Website Kit appeared first on CSS-Tricks.

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 JavaScript needed to run on every single page view, hit that URL for the data, and build the page. That might be OK in … Read article “Creating an Editable Site with Google Sheets and Eleventy”

The post Creating an Editable Site with Google Sheets and Eleventy appeared first on CSS-Tricks.

Real talk from Dave:

I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load.

This stuff is hard even when you care a lot. The 33 seconds came from font preloading rather than … Read article “Maintaining Performance”

The post Maintaining Performance appeared first on CSS-Tricks.

Article Series

1. Why should you care?
2. What can go wrong?
3. What are the barriers to adoption?
4. How do new algorithms help?

In previous articles, we explained what consistency is, the difference between "strong" and "eventual" consistency, and why this distinction is more important than ever to modern application developers. We also introduced the notion of ‘consistency tax’: the extra time and effort that a development team needs to invest if they choose a system with only eventual consistency or limited … Read article “Consistent Backends and UX: How Do New Algorithms Help?”

The post Consistent Backends and UX: How Do New Algorithms Help? appeared first on CSS-Tricks.

In this piece, Eric Meyer argues that performance is more important than ever right now — especially for websites that contain critical information for the public:

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static. I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more

… Read article “Get Static”

The post Get Static appeared first on CSS-Tricks.

There’s a design trend I’ve seen popping up all over the place. Maybe you’ve seen it too. It’s this sort of thing where text is repeated over and over. A good example is the price comparison website, GoCompare, who used it in a major multi-channel advertising campaign.

Nike has used it as well, like in this advertisement:

Diggin' that orange! (Source)

I couldn’t help but wonder how I would implement this sort of design for the web. I … Read article “How to Repeat Text as a Background Image in CSS Using element()”

The post How to Repeat Text as a Background Image in CSS Using element() appeared first on CSS-Tricks.

Perhaps you know Unsplash? I'd wager it's the most popular stock photography site out there for two big reasons:

1. Every photo on there is pretty darn nice
2. Every photo is entirely free even for commercial use. You don't have to ask permission or even credit it (although that's appreciated).

Here's something you might not know though: Unsplash has an API, and it's unlimited and free. Brass tacks: it's exactly what you hope it's going to be. A … Read article “Add Beautiful Images with the Unsplash API”

The post Add Beautiful Images with the Unsplash API appeared first on CSS-Tricks.

HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input.

The post Value Bubbles for Range Inputs appeared first on CSS-Tricks.