Archive for the ‘Software & Tools’ Category

Amazon Takes on Dropbox With New Desktop File Syncing

Amazon’s desktop-centric Cloud Drive syncing. Image: Screenshot/Webmonkey

Amazon has quietly joined the ranks of cloud-based file syncing services like Dropbox, Google Drive and Microsoft’s SkyDrive. The company’s Amazon Cloud Drive — previously limited to a rather primitive web-based interface — now offers desktop file syncing tools like those found in Dropbox.

To test out the new Cloud Drive syncing, grab the new desktop app for Windows or OS X (sorry Linux fans, currently there is no desktop client for Linux).

Once you’ve installed the new Cloud Drive app, you’ll find a new folder on your drive — drop whichever files you’d like to sync into that folder and they’ll automatically be sent to Amazon’s servers. You’ll then have access to them on any computer with Cloud Drive installed and through the Cloud Drive web interface, though what you can do with files in the web interface is extremely limited.

It’s worth noting that the Cloud Drive app requires Java. As our friends at Ars Technica point out, that means users with newer Macs will be prompted to install Java as well (the Windows app comes with Java bundled).

There’s also no mobile apps for any platform (there is an Android Photo app, but all it does is send photos from your phone to Cloud Drive). In fact, while Cloud Drive will sync files between desktops, beyond that there isn’t much to see yet.

Part of the appeal of any web-based sync tool is ubiquitous access, not just via the web but in your favorite mobile apps as well and in that space Dropbox clearly has a huge lead over Cloud Drive.

Amazon offers 5GB of Cloud Drive storage for free, with additional storage available at roughly $.50/GB, which is down from the $1/GB price back when Cloud Drive first launched. That’s on par with SkyDrive’s pricing and roughly half the price of Dropbox. In this case though — at least right now — you get what you pay for. Amazon has the makings of a Dropbox competitor but it still has a lot of catching up to do.

File Under: Software & Tools

Answer Your Coding Questions Without Leaving the Command Line

Imagine you’re hard at work, writing some code in Vim or Emacs and you can’t remember some boilerplate bit of code, say, how to format a date. You’re in the terminal working and you don’t want to switch over to your browser window which has dozens of distractions clamoring for your attention, what do you do? Use howdoi.

The aptly named howdoi is a little command line client that queries Stack Overflow by doing a Google site search and scraping the results to return just the nugget of code you need.

For example, say you want to know how to format a date in the Jinja Template language. Just query howdoi:

howdoi format date jinja2
{{ car.date_of_manufacture.strftime('%Y-%m-%d') }}

The response isn’t perfect, but it’s probably enough to remind you that Jinja2 just uses Python’s strftime function. If that’s not enough, howdoi has some optional flags that can help. Howdoi’s most useful flag is probably the -a flag, which return the entire Stack Overflow answer. In the case of our Jinja question here’s what the entire answer looks like:

howdoi format date jinja2 -a
There are two ways to do it. The direct approach would be to simply call (and print) the strftime() method in your template, for example {{ car.date_of_manufacture.strftime('%Y-%m-%d') }} Another, sightly better approach would be to define your own filter, e.g.: def format_datetime(value, format='medium'):
    if format == 'full':
        format="EEEE, d. MMMM y 'at' HH:mm"
    elif format == 'medium':
        format="EE dd.MM.y HH:mm"
    return babel.format_datetime(value, format)

jinja_env.filters['datetime'] = format_datetime (This filter is based on babel for reasons regarding i18n, but you can use strftime too). The advantage of the filter is, that you can write {{ car.date_of_manufacture|datetime }} which looks nicer and is more maintainable. Another common filter is also the "timedelta" filter, which evaluates to something like "written 8 minutes ago". You can use babel.format_timedelta for that, and register it as filter similar to the datetime example given here.

If you’d like to see more results, you can use the -p (position) flag to see whichever results you’d like. For example howdoi format date jinja2 -p2 would show the second result and so on.

As with site searches in a browser, howdoi’s results can be hit or miss — it really depends on the quality of answers on Stack Overflow, which is obviously somewhat narrower than just a Google search. Still if you’re the type that’s easily distracted or just really loves the command line, you’ll probably enjoy howdoi. You can grab the code from GitHub and be sure to check out the readme for a complete list of commands.

File Under: Software & Tools

Adobe’s New ‘Edge’ App Suite Doubles Down on HTML

Adobe’s new Edge Suite of tools for web developers. Image: Screenshot/Webmonkey

Adobe may be best known among web developers for its much-maligned Flash Player plugin, but in recent years the company has begun shifting its efforts away from Flash to open web tools like HTML, CSS and JavaScript. Now Adobe is launching a new suite of apps for web developers working with the latest web standards.

The new Adobe Edge suite of HTML5 development tools includes Edge Animate 1.0, a tool to create HTML, CSS and JavaScript-based animations, and Edge Inspect (formerly known as Adobe Shadow), a handy tool for testing your sites on multiple devices at once. There’s also Edge Code, a fork of the Brackets code editor that’s now included in Adobe’s Creative Cloud suite.

As part of the announcement at Adobe’s Create the Web conference in San Francisco the company also showed off a demo of the still-in-development Edge Reflow, a new tool for working with responsive design layouts.

While there are quite a few very nice things for web developers in Adobe’s new Edge suite, one of the less welcome bits of news is that Adobe Edge Inspect, née Shadow, is no longer a free tool. Technically you can still use Inspect as part of the free version of Creative Cloud, but you’ll only be able to test sites on one device at a time, which pretty much defeats the whole point of the tool — testing on multiple devices at once.

The pricing for Edge Inspect is either $10/month as a standalone product or you can subscribe to the Creative Cloud suite for $50/month. That may well be outside the price range of small developers in these tough economic times. Luckily you can do pretty much everything Edge does by setting up your own local server for testing and connecting your devices directly to it. As an added bonus your DIY setup can test any web browser, rather than being limited to WebKit browsers like Edge Inspect.

On the brighter side of Adobe’s announcement the still unreleased Reflow tool looks impressive and it looks like the focus is on creating breakpoints based on design rather than device screen size, which is good news. The video below gives a little sneak peek at how Reflow works and we’ll be sure to give you an in-depth look when it’s available for testing.

Another appealing aspect of Adobe’s Edge Suite is Animate 1.0, which has been improved considerably since our initial review. Animate still doesn’t output canvas or SVG (which makes the HTML5 marketing somewhat misleading), but it does a good job of helping Flash refugees feel more at home creating standards-based animations.

For a limited time, Edge Animate is available for free via Creative Cloud. When the free intro period ends it will be available as a standalone app for $500 or as part of the $50/month Creative Cloud subscription.

We’ve been arguing for years that we need better tools for building the web. I may like Vim, you may love emacs, but let’s face it both of them are relics of the dark ages. Today’s web developers shouldn’t need the same archaic text editors we used to build the web fifteen years ago. Tools like Edge Animate, Edge Inspect and Reflow may not be everyone’s cup of tea, but they go a long way toward helping people who want a more intuitive way to create cool stuff on the web and that’s almost never a bad thing.

For more info, and full details on all the Edge apps and pricing, head on over to the new Adobe Edge website.

Give Us 15 Minutes, and We’ll Give You Git

Git is in your browser, versioning your files. Image: Screenshot/Webmonkey

If you’ve got 15 minutes to spare you too can learn Git, the distributed version control system that powers everything from NASA code to Wired articles.

That’s the promise of a new collaborative effort between GitHub and Code School, who have partnered to create Try Git — a way for new users to try out both Git and GitHub right in the web browser, no software installation necessary.

Much of Git’s success is due in part to its awesome documentation and numerous extra free resources — like Scott Chacon’s Pro Git book — which explain Git in great detail. But nice as those resources are they still require installing software before you can get to the hands-on learning.

Try Git skips the installation and puts a Git prompt right in your browser. It’s still a command line prompt, which might scare away some users, but it’s paired with step-by-step instructions and a visual representation of a Git repository, along with some tips and tricks for figuring out Git.

The Try Git tool also neatly integrates with GitHub. There’s no need to use GitHub — though it does offer some great hosting tools — but the Try Git site interacts with GitHub via OAuth and will push your tutorial repository to your GitHub account as a repo named try_git.

File Under: CSS, Software & Tools

Clean Up Your CSS With ‘Dust Me Selectors’

In a perfect world, lost somewhere in a parallel universe, websites are designed, built and then run smoothly forever and nothing ever changes.

In this world sites are built, iterated, added onto, redesigned, extended, partially rebuilt and tweaked until they resemble the Winchester mansion. Instead of doors that open into space or stairs that go nowhere, websites are littered with commented-out HTML, inline styles and unused CSS rules.

We all try to write better CSS, but at some point it seems to end up a tangled mess that needs refactoring.

Refactoring stylesheets can be difficult, especially when it comes to pruning the old, unused styles — how do you know which rules your sprawling labyrinth of HTML is actually using?

That’s where the Firefox/Opera add-on Dust Me Selectors can help. Dust Me Selectors grabs your stylesheets, looks at all your selectors and then starts parsing HTML to find out which ones you’re actually using. Dust Me Selectors makes the process of refactoring a stylesheet much easier and definitely deserves a spot in the savvy developer’s toolkit.

You can grab Dust Me Selectors from the developer’s website or from the Mozilla Add-ons site. Opera fans can install Dust Me Selectors from the Opera extension gallery.

Dust Me Selectors can crawl individual pages or you can take the more useful approach — point it to a sitemap and sit back and wait while it looks at your entire website.

Armed with the output from Dust Me Selectors (which can be exported as a CSV file), you can start pruning out those unused selectors, paring down your stylesheets and making them smaller as well as easier to read and maintain. Naturally you’ll want to do some testing before you permanently delete anything, and hopefully you’ve got everything in version control just in case you need to roll back your changes.