Cool Web Tools
These days, you can build almost anything with the vast amount of web tools, resources, extensions, and plugins. But where do you find the newest and coolest web tools out there?
Shiny Webby Things is a new series in the EYEMAGINE blog dedicated to the shiniest things on the...webby. Let our series direct you to the hottest web tools on various articles and sites. Now you can keep up to date with the best of today’s ever-changing design and development web tools.
This week, we present you with 15 shining web tools to sink your brain-pans into:
1. "Dynamo.js: a dead-simple way to generate dynamic bits of HTML and add subtle effects to your content."
This allows you to cycle through various <span> and <p> elements. You can see some examples on GitHub.
read more
2. 15 Great Chrome Extensions for Web Designers and Developers.
Things like WhatFont, which lets you identify fonts used on a page, or Eye Dropper, which allows you to pick colors right from a web page.
read more
3. Understand the Favicon.
Learn how favicons render on different browsers, when to call .pngs and .icos, and how to target resolution sizes.
read more
4. The Importance of HTML5 Sectioning elements.
A long and great article on how and when to NOT use generic <div> tags, and instead use HTML5 sectioning like <section>, <aside>, <nav> etc.
read more
BUT…on the other hand...
Here's still more about the structural elements of HTML5.
5. CSS Hat: a tool to turn Photoshop Layers into CSS3, instantly.
A lot of tools have promised to be able to do this for years, with bad results, but this one looks pretty darn good. There's no step 3.
read more
6. Pixate, a framework to let you create beautiful Native applications using CSS.
From their homepage: "The CSS styling engine allows you to customize your application's entire appearance—from a single component to the whole interface. This engine is modeled after CSS web standards and takes advantage of its simplicity, power, and prevalence in the design community. Our CSS implementation incorporates the best of CSS3 while adding several unique extensions to make styling mobile apps even easier."
read more
7. mincss -- a tool to "clear the junk" out of your CSS.
If you're ever using a framework like Twitter Bootstrap, this tool can be used to "ignore" the CSS selectors you're not actually using.
read more
8. GitHub now has better code search!
New search infrastructure live-indexes your code as you push it out to GitHub and the code search landing page automatically has the command bar built in. Advanced search helps you filter searches to find what you like, and code, developer, and repository search results have been improved. See the new technology.
read more
9. A cool demo of all the kinds of drop-shadows you can create in CSS3 -- with no images!
Take your pick from lifted corners, curled corners, raised box, perspective, rotated box, and more.
read more
10. Bedrock: a mobile-first, responsive, 18-column grid framework.
It’s a great resource to build theoretical layouts and create designs that will answer any development challenges and layout restrictions.
read more
11. Treehouse now has an "Absolute Beginner's Guide to Sass" -- for anyone interested in learning about this preprocessor, follow the link.
Make your CSS workflow easier, and streamline development and maintenance with Sass’s variables, nestlings, selectors and more concepts. By the way, Sass stands for "Syntactically Awesome Stylesheets Sass".
read more
12. A Tool to Test Viewport Width of the browser window you have open.
It’s an easy-to-use tool that delivers fast results you can reference at any time.
read more
13. A mind-melting article about the z-index CSS property, and why it's so darn weird.
Even if you claim to be a z-index expert, this article might reveal a crucial element or two you might have missed.
read more
14. One more good overview of responsive web design.
An excellent companion to our responsive web design white paper, this article dives into the process and the tools needed to implement and build responsive. Includes overviews on flexible media, mobile, and viewports.
read more
15. Set good defaults -- an article about creating "good defaults", so what when a user goes back to a page, things are set up for them already.
It’s a great strategy to retain users, save ten seconds, and gain their trust with intelligent functionality.
read more
Stay tuned for the next edition of Shiny Webby Things: Cool Web Tools, and stay informed about the latest web tools, technology and trends for design and development.
