08.07.12 |
∞
If you’re anyone that dives into CSS on a regular basis you’ve had to fish for extra colors for use on gradients, hovers, border edges, and other HTML elements. For tonally consistent options I’ve relied on colllor in the past. Yet often I just want to slightly lighten or darker a specific hex color, but don’t want to open up Photoshop just to slightly adjust a HSL curve.
That’s exactly why 0 to 255 works so well. No more Photoshop or big third party tools. Just head here, enter a hex color, and you get a full spectrum of colors from light to dark.
08.03.12 |
∞
I rarely find work that’s as tedious as determining proper CSS from sprite sheets. Sprite Cow makes the process far more easy: Upload a sample sheet and click directly on individual sprites to get their proper CSS coordinates.
07.28.12 |
∞
Developer/Karbon founder Garrett Murray:
The app landscape will improve with time, but the internet is a different story.
Going forward, hopefully, most thoughtful folks will make new websites Retina-ready from the start. When I created the site for Scratch, I did just that, and it looks amazing on this new rMBP. But for the most part the internet will look relatively crummy on Retina displays for quite a while.
Very true. In short, there’s no magic bullet yet for effective, responsive images that scale to both retina level and “standard def” displays. Fascinating to see how this will all play out in the web dev and design community over the next few months.
07.25.12 |
∞
I’m very, very late to the party on this one, but this is a great jQuery plugin from CSS guru Chris Coyier and the web design shop Paravel. If you dig fluid width video embeds – something becoming fairly essential with modern responsive design – it’s worth giving this plugin a look. I recently incorporated FitVids.js into an experimental Tumblr theme I’m working on as a side project. Worked great and implementation was straightforward.
07.24.12 |
∞
LiveReload is an app that does exactly what it sounds like: Apply CSS edits and image changes in your web work live; no annoying manual reloads of your web page any more. I while ago I gave an earlier version of this tool a whirl, but it was hard to set up; lots of command line calls and Ruby gems.
Not anymore – one $10 Mac App Store app and a simple Chrome extension and I’m ready for business. I’m a bit embarrassed that I didn’t discover and start using this tool earlier; I’d highly recommend checking it out if you’re a web developer.
07.19.12 |
∞
Really smart work. Alas, this is probably the first and last time I’ll tag a post for both ‘Breaking Bad’ and ‘web development’.
07.18.12 |
Web/UI Design |
∞
Like many web developers, rapid CSS development is an integral part of my office workflow. I spend a large part of my day in “CSS tweak mode” where the focus is on smaller changes: alignment, IE bugs, consistency. Yet, as any developer can tell you, little CSS problems can drive you crazy and become a major time sink. You’re staring at a page and can’t figure out why that one element keeps dropping down in IE8. Or you’ve got a nested navigation that on mouse over pushes one element out of alignment by a few pixels.
As I’ve matured as a web developer over the years, I’ve moved faster through the tweak period thanks to my growing CSS experience. Yet often the right technique can be just as important.
I call one of my favorite techniques the magenta test. I open up the web inspector and add a custom CSS property of background: #f0f to adjacent misaligned CSS elements. Magenta blocks pop up on screen and in many cases, the root problem jumps out right away. I’ll usually make a quick edit on one of the elements until the magenta blocks line up. Problem solved. In more complex issues I’ll find the parent container of the magenta block elements and set its custom background as well, albeit to a different color.
This approach is often much faster than your usual use of the web inspector, where mouse clicking and scrolling predominate. Inspectors place the basic metrics (e.g. width, padding, margin) in one area, with the raw CSS attributes usually far away; either you’re forced to scroll to the top (Chrome, Safari) or flip to another inspector tab (Firefox) multiple times. This problem is compounded when comparing multiple elements; an inspector places a highlight box around only one element at a time.
Compare this with the magenta test. Adding custom properties so that they are in one place in the web inspector. You select an element, add the attribute (for even faster results, copy and paste the background: #f0f snippet), and repeat for all remaining elements. There’s no thought process, no scrolling and no tabbing–it’s just drawing a few magenta boxes. It’s also cross browser friendly. Web inspectors in Chrome, Safari and Firefox have a slightly different layouts, but since adding a magenta background is so quick, a context switch between browsers is pretty painless.
Bonus technique: Buy a measurement tool, assign to keyboard
The magenta test is slick for big, fairly obvious alignment problems. But when you are making that last pass for polish, it’s hard to pinpoint elements off by a pixel or some other tiny amount. Go to the Mac App Store, and buy a measurement tool like SnapRuler or xScope (which is a suite of web design tools; you’ll be using the dimensions tool.) Assign a keyboard shortcut to toggle the tool on and off. Draw a measurement between items–I like going from edge to edge of boxes or the baseline of two text elements. You’ll see a misalignment immediately.
07.17.12 |
∞
Web sites depend on a lot of images, and with higher resolution displays, their size will only increase. Yet website performance is critical as well; you want a great looking image in as small a file size as possible.
That’s where TinyPNG comes in handy. Cut your png of choice and use the site’s drag and drop uploader. TinyPNG will strip colors and compress pngs down to 8 bits while still retaining 100% transparency. I’ve used it on a few recent projects, and every thing I send to it reduces the file size by at least 50% with no noticeable image degradation.
07.16.12 |
∞
I love keyboard shortcuts but adding them to web sites and web apps can be painful. Different browsers handle slightly different syntax, and the process of looking up key codes can require some trial and error. Enter Mousetrap, a tiny (3kb minified) Javascript library where you invoke natural syntax (e.g. ‘4’,’command+k’) for keyboard bindings. No external library dependencies either.
07.11.12 |
∞
We’re a few weeks past the Google I/O talks, but Google has since posted all of their developer conference talks on Youtube. The full schedule is easy to navigate.
It’s not just for hard core Chrome and Android developers either; there’s a lot of what appear to be solid talks that I’ll check out this week: using new HTML5 elements, tools and frameworks for speedy web development, cross device web design, and advanced design for engineers.