Tags: image

146

sparkline

Photo Toning with Gradients & Blend Modes

This use-case for blend modes is making me thirsty.

Also: look who’s blogging again!

the new code – Even Stevens: Using Round and Space in Repeated Background Images

See, when I first heard about background-repeat: round; I thought it was something to do with making things circular. But no, it’s about tiling a background image so that nothing gets cut off. The amount of tiling required is rounded to the nearest whole number.

Now I get it.

Psiu Puxa Wallpapers

Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

Responsive Image Breakpoints Generator by Cloudinary

A very handy tool for figuring out breakpoints for responsive images.

Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.

SpaceHolder – A space-themed image placeholder service.

We’ve got Space Ipsum for text. Now we have SpaceHolder for images.

The web accessibility basics – Marco’s Accessibility Blog

Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).

He finishes with a plea to avoid unnecessary complexity:

If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!

HIKE - Introduction to accessibility concepts for the Web

It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.

Here’s a handy shortlist to run through, HIKE:

  • H stands for headings and semantic markup.
  • I stands for images and labels.
  • K stands for keyboard navigation.
  • E asks for you to ACT with a little extra love for custom components and more.

(ACT = ARIA, Colour Contrast, Text Size)

Smaller, Faster Websites - - Bocoup

The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.

When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”

We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Moodboard — a small JavaScript library for presenting image moodboards on the web

A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.

The anatomy of responsive images - JakeArchibald.com

This is the best moment to write a blog post:

I just had my responsive images epiphany and I’m writing it all down before I forget everything.

Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.

Scribblit

This is so nifty! Mikey has made a site where you can order his interactive artwork.

Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).

Check out The Fett and The Falcon!

INTERNET IMAGES ^ 10

This is just wonderful: Powers Of Ten recreated using images from the internet. Also available as a flip book!

Read more about it or watch the video.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.