38 private links
CSS Conf May 2014
Allows to unattach and reattach images and other attachments from within the media library page.
Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons. Visit the GitHub repo for the command line version or to learn more about how grunticon works.
To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.
Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).
The internet was missing the ability to provide custom-sized placeholder images of Bill Murray. Now it can.
Pure CSS, not a script to be found
Today a consulting client had an issue that we’ve all done: He scanned a stack of paper intending to make it one PDF per sheet, but instead it went into one big PDF.
Since he didn’t want to re-scan, I broke down a few options for how to split a PDF using the built-in tools of Mac OSX. You can think of this as a companion piece to How To Combine PDFs Using Mac OSX Automator.
The chart above is an animated SVG featured on Sprout.
This chart, and one other animation on Sprout, were initially GIFs. By using animated SVGs instead of GIFs we were able to reduce our page size from 1.6 mb to 389 kb, and reduce our page load time from 8.75 s to 412 ms. That’s a huge difference.
Below, I’ll break down the animation of one of the circles seen in the chart. The technique applies to all of the elements in the graphic. With this you can create your own lightweight animated graphic.
Generate a base64 encoded Data URI straight from the Finder.
An Automator workflow which adds an item to the ‘Services’ contextual menu. It generates the Data URI for a file and copies it to the pasteboard.
Free-OCR.com is a free online OCR (Optical Character Recognition) tool. You can use this service to extract text from any image you supply.
In an ideal world, every camera, screen, and printer would display color in the same way. Unfortunately, thats not how it works in practice.
Works best in Chrome
Found here http://stackoverflow.com/questions/11194209/convert-image-from-clipboard-to-base64-encoded-data-with-javascript
A Sublime Text plug-in that automatically folds base64-encoded data URIs in your CSS files.
This tool lets you combine icon webfonts for your own project. With fontello you can:
shrink glyph collections, minimizing font size;
merge symbols from several fonts into a single file;
access large sets of professional-grade open source icons.
Now it's trivial to make a custom icon webfont, exactly for your needs. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle. We generate everything you need, ready for publishing on your website!
When someone asks you for a web image that’s, say, two inches wide, they’re estimating how it would appear on their own monitor. Without changing the image’s pixel dimensions, that image would appear larger or smaller on different monitors—and would even look different on the same monitor at a different resolution setting.
Slow loading resources (images, scripts, etc) can break your code. Test it simulating unexpected network conditions applied to specific resource.
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimized image files.
Basically, a super long string of gibberish characters. It's not gibberish to the browser though of course. This data is interpreted as the type of file you are saying it is.