Dedicated to growing computer programming education. Speed up your Front End Development - Part 1 - by Roy Barber. By Roy Barber, 3rd February 2013 I gave a talk recently at a local meet up and showed a bunch of front end developers and designers how to save a boat load of time when coding up those beautiful photoshop designs. I will be splitting this topic into a series of three posts, where i’ll be showing you ways to save masses of your precious time, hopefully allowing you to squeeze extra profit out of your projects. Ok so that lovely design is finished and now it’s time to start slicing up that PSD, extracting all the elements you need for your css, like icons, background images and logos.
Then if like me, a performance nut, you need to create a sprite out of all those images, writing classes and working out the pesky x/y co-ordinates. Maybe you use a great online tool like SpritePad, but we all know its a ball ache when you need to add extra images into the sprite. Well with the combination of a couple of tools, it can all be automated, let me show you how. Ok now for the even cooler stuff! Startups, This Is How Design Works – by Wells Riley.
The top 20 online coding tools. Icon Fonts are Awesome. Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper.
The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. Here's a large collection of more choices. For quick usage, the code is below. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="⇝"></span> Stats </h3> How To Use for Stand Alone Icons. Coding Horror.