COOL WEB TOOLS
When we aren't busy designing and developing stunning eCommerce sites, our team of designers and developers is scouting for the latest, hottest and coolest web tools. From an in-browser "color picker" to a bookmarklet that lets you preview patterns on your site, these web tools are sure to satiate your appetite for awesome web tool technology.
Without further ado, here are the top 10 web tools, tips and resources we found in the Shiny Webby Things world this week:
1. Dropzone.js.
Yet another drag-and-drop file upload plugin, but one that's beautiful and seamless and easy to use. Works on all modern browsers, and falls back to a normal file input field for older browsers.
read more
2. Typeahead.js.
A plug-in-and-go autocomplete library for search and other input fields, so you can easily give them a Google-like auto-complete.
read more
3. Anima.
A web tool to fully control (and make easier) CSS keyframes and transitions, allowing you to use delays and stop CSS animations much more smoothly/easily.
read more
4. Where to start with Responsive Design.
A great primer by Trent Walton on where to start with responsive design -- really, about the mindset that you need to have when getting started with responsiveness, and how to communicate that mindset to clients.
read more
This is something else he links to which could also be helpful for us: Chris Coyier's "Notes to an Agency Starting their first Responsive Project."
read more
5. Background Patterns Bookmarklet.
A cool web tool for designers, or anyone conceptualizing a new look for a site. Use this bookmarklet on any website to see what it would look like with a new background pattern.
read more
6. The Progress Element.
Did you know HTML5 has a built-in progress bar -- one that you can manipulate easily with JS and skin with CSS? I had no idea, personally, so this was pretty rad to stumble upon.
read more
7. Flexbox.
This is a great and simple tutorial about why Flexbox useful (among other things, it eradicates the need for using JavaScript to achieve equal column heights) and how to use new Flexbox syntax.
read more
8. Full-browser color picker.
This is really cool. Just open and wave your mouse to change the background color, and get the corresponding hex code that matches it. Not just a fun trick; this web tool can help designers really figure out what colors work in a background, fast.
read more
9. Notify.js.
A JS tool to trigger the Chrome and Safari "full-browser-width" bar notifications that appear from time to time. Doesn't work on any other browsers, but falls back to a default modal in those.
read more
10. How to get faster paint times for CSS.
This author goes beyond the normal load-time lag culprits (heavy JS and images, etc.) to discuss how to speed up the CSS paint times of your site. He goes into how to use Chrome DevTools and other such web tools to help you diagnose problem areas.
read more
There you have it folks! These web tools should serve you well until the next edition of Shiny Webby Things: Cool Web Tools. If you want more info about the best, coolest, and hottest web tools for eCommerce, then just talk to us.
