A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

If you're setting up a service where people can register their own usernames to be used as a hostname (username.example.com), email address (username@example.com), or URL path (example.com/username) within your domain, there are some common names you should avoid letting the general public register.

...

This is a list of all the names I know that should be restricted from registration in automated systems. If you know of others, please let me know and I'll update this page.

From author's notes:

Let’s get this straight: The effort to host Google web fonts on your own server is immense! First of all you need to download all .eot, .woff, .woff2, .ttf and .svg files, then copy them onto your server and finally paste a CSS snippet.

Sounds easy? Well it could be, if Google would actually provide any direct links to download these files and a customized CSS for self-hosting them. To fix this problem without using font generation services like Font Squirrel, I decided to publish a little service called google-webfonts-helper.

According to Google’s own Page Speed Insights audit (which Google recommends to check your performance), the AMP version of articles got a performance score of 80. The non-AMP versions? 86. Mind you, the AMP versions are hobbled - unauthorised javascript interaction is forbidden by Google, so you can’t vote or comment in place - it’ll kick you to the full version of the page. This is the fruit of weeks of labour converting the site: a slower, less interactive, more clunky site.

CSS Grids have been around a long time. Often they come bundled in frameworks such as Bootstrap. I'm not a Bootstrap hater, but sometimes using a framework is overkill if all you really need is a grid. Here's how to make your own CSS Grids from scratch.

A target image is provided as input. The algorithm tries to find the single most optimal shape that can be drawn to minimize the error between the target image and the drawn image. It repeats this process, adding one shape at a time. Around 50 to 200 shapes are needed to reach a result that is recognizable yet artistic and abstract.

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Let’s harness the power of these new media queries to serve an image of the right size based on the device a user views our site on. We’re going to save a lot of bandwidth for the small devices, and serve a beautiful large image for larger ones.

We’ll do that by using the HTML5 picture element and its powerful source tag and media and srcset attributes.

Have you ever wanted a drag and drop library that just works? That doesn't just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn't need you to do a zillion things to get it to work? Well, so did I!

Making good pagination is not a difficult thing. Really, you just want to remember the following basic guidelines, and you should be fine. We'll look at a large range of examples after that, to see what we can learn from existing pagination designs found on popular websites today.

1–10 (161)   Next >   Last >|