Web Designer Pro Bundle - $500 of Site Templates, Stock Photos, Code, Graphics and more for only $20
Introducing Nettuts+ Fetch

Introducing Nettuts+ Fetch

In addition to producing various helpful apps for web developers, in 2012, we’ll also be commissioning and releasing smaller plugins and extensions. Today, I’d like to announce the first entry in this initiative: “Nettuts+ Fetch” – a Sublime Text plugin.


The 20 Second Example


Choose 720p for a clearer picture.

The Dilemma

Let’s say that you’re a fan of Normalize.css. Perhaps, you download it and save it to a snippet, or store the stylesheet, itself, in an assets folder. That way, for future projects, you only need to copy and paste.

The only problem with this method – as we’ve all discovered – is that, if a few months have passed, it’s more than possible that the asset (in this case, Normalize.css) will have been updated by the creator. So your options are to either use the, now, out-dated version of Normalize, or, once again, return to the GitHub page and pull in a fresh copy. This all seems tedious.


The Solution

Created by Weslly Honorato, Nettuts+ Fetch is the solution to our dilemma.

I thought to myself: “What if there was a plugin that would automatically pull in the latest copy of a file, simply by typing a keyboard shortcut. It’ll perform a curl request to your specified URL (saved away for future use), and allow you to rest assured that, for all new projects, you’re using the latest copy of a particular asset.

Created by Weslly Honorato, Nettuts+ Fetch is the solution to our dilemma.


Installation Instructions

Nettuts+ Fetch

While you can manually download Nettuts+ Fetch from GitHub, the easiest way to set it up is through Package Control (which all ST2 users should be using). Once you’ve installed package control, press ctrl+shift+p (Windows, Linux) or cmd+shift+p (OS X), and type “Package Install.” Next, search for “Nettuts+ Fetch,” press enter, and you’re done. Simple.


Usage

You’ll only use two commands, when working with Fetch. First, we need to save some file references. Again, bring up the command palette, and search for “Fetch.” For now, choose “Manage Remote Files.”

Manage Remote Files

What’s great about Sublime Text 2 is that configuration is incredibly simple. To assign references to online asset files, we only need to create an object, like so (don’t worry; one will be pre-populated for you, after installation):

So, to pull in the latest copy of jQuery (if you don’t want to use a CDN):

{
	"files":
	{
		"jquery": "http://code.jquery.com/jquery.min.js"
	}
}

Packages

Even better, I can pull in entire packages, or zip files. What if we want to start a new project, using HTML5 Boilerplate? In that case, we add the reference to the “packages” object.

{
	"files":
	{
		"jquery": "http://code.jquery.com/jquery.min.js"
	},
	"packages":
	{
		"html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
	}
}

Fetch, Boy

Now that we have a package and script saved (add as many as you like), we can pull them in by using the Fetch command. Pull up the command palette – ctrl+shift+p (Windows, Linux) or cmd+shift+p (OS X) – type “Fetch,” and make your selection.

Choose HTML5 Boilerplate from the list, give it a few seconds, and, bam, you’re ready to go with the latest release.

Pretty sweet, huh? I hope you like it! Thanks again to Weslly Honorato for building it for us.

Add Comment

Discussion 71 Comments

  1. Wow, this is a great plugin to add onto sublime text editor. Sublime already makes things faster when using zend coding and now with this plugin workflow can be even more faster. Thanks for this!

  2. Dan LaManna says:

    Very nice idea. I assume it works with tar.gz, zip, and .php just fine, so I can easily add wordpress.org/latest.zip without issues?

  3. Rob says:

    This is one of those ideas that’s just so brilliant and simple, when you see it you can’t help but feel a little irritated with yourself for not having thought of it – unless, of course, you happen to be Jeffrey Way.

    Nice work.

  4. Jeffrey Way says:
    Author

    Thanks guys. If you notice any issues, just leave a comment, and I’ll ask Weslly to look into it.

  5. Liam says:

    Now that to me is a $400 idea. Nice to see recognition given to Weslly, who finished this plugin 2 hours after being requested.

    For anyone on Nettuts+, feel free to submit a plugin request on the Sublime Text forum here: http://www.sublimetext.com/forum/viewforum.php?f=6

  6. Crysfel says:

    Great! very nice idea!

    I found just one issue when copy/paste the configuration that is in this tutorial. There’s an extra comma in the jquery line:

    “jquery”: “http://code.jquery.com/jquery.min.js”, //Extra comma

    This throws an error when executing the “fetch” command.

    Regards

  7. Bryce Pelletier says:

    YES! I love it. Great work. Beyond tired of updating all the files all the time during new builds, which is the focus of my work. I don’t like maintenance so much ;)

    Cheers

  8. Great little tool. I’ve been using Sublime more and more lately, this might make me switch fulltime.

    Would it be possible to add a preference on where to store the files? I use /lib/assets/javascripts/ for things like jQuery, would be great to automatically set that as the output path.

    • w1sh says:

      To set a default path for your downloaded projects:

      Project > “Remove all folders from Project” > Project > “Add folder to Project” > Select Desktop or whatever > Now Fetch away

      • Yea, but I want to set up a specific path only for jquery, then a specific path for modernizer, then a specific path for SASS plugin etc.

        Would be great to have the output path as the tird option in the config. Something like this:

        {
        “files”:
        {
        “jquery”: “http://code.jquery.com/jquery.min.js”, “/my/jquery/path/
        },
        “packages”:
        {
        “html5-boilerplate”: “http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped”, “/my/path/”
        }

        }

  9. norbert6 says:

    Is there an caching option?
    so you don’t have to download Codeigniter 20 times if there’s no new version?

  10. Erik Jansson says:

    Incredibly handy. Thank you so much!

    Weirdly, my settings file wasn’t pre-populated. It was completely blank.
    Not an issue at all, but perhaps a bug?

  11. Steffen Bilde says:

    Great plugin! – Simple, fast and easy.

    This can defiantly boost my productivity, as im avoiding the browser, where im easily distracted:)

  12. supprof says:

    thank you jeffry way
    you are awesome!

  13. Great idea, and very easy to configurate!

  14. Cam Carnell says:

    Excellent plugin and tutorial, thank you!

  15. Daniel says:

    Just started using the plugin and it seems to be working but every time I try and fetch a file or package it would ask me the directory to extract and then nothing would happen. The url : http://codeigniter.com/download.php is a valid one, i’ll keep tinkering.

    Other than that, it’s a great plugin!

    • Jeffrey Way says:
      Author

      Hi Daniel – Do you have the CodeIgniter reference within the packages object?

    • Jonathan says:

      I’m having this problem too, unfortunately. I’m just trying with the default file (jQuery) and package (HTML5 boilerlplate). I am able to fetch jQuery no problem (single file), but the HTML5 boilerplate does not work. It asks for the directory (which shows the current directory of the project I have open), I press enter…and nothing. Any ideas whats wrong?

  16. jv says:

    Very cool. The use of it in the screencast was very nice…

    One question: is it ok to use the name “fetch” as that’s also the name of a software company that makes FTP?…. Fetch seems an apropos name, just mentioning it….

    • KS says:

      It’s also the name of FreeBSD’s built-in web-and-FTP download program (similar to wget or curl) and about 1,000 other FTP clients written over the years. Yeah, I think “fetch” is pretty safely generic in this space.

  17. Pradeek says:

    Brilliant Idea. I’m going to see if I can write a VIM plugin for this :D

  18. Looks awesome!

    @pradeek please let me know if you come up with a vim plugin for this.

    Jeffrey, do you know of a plugin for vim that could do this?

  19. Yvonne Adams says:

    My settings file wasn’t pre-populated either. I don’t see that as issue though, as Sublime 2 files are pretty straightforward to work with.

  20. Great work guys, all we need now is CSS Reset links.

  21. w1sh says:

    This is an awesome idea. I’ll use the crap out of this for WordPress, jQuery, reset, Drupal, etc.

    The only problem I see is that it’s hard to grab certain libraries. The only way this could be fixed is if some big, awesome, great, site kept up with all the big files/packages and listed a repository somewhere…

    If only there was a site that would keep a list of all the most current (s’ok if you’re a week or so late on some) projects….

    If you guys would be willing to do something like that and tie it into the Fetch plugin, I’d be up for letting you know when I notice a script or package is outdated and giving you the updated URL. I’m sure I’m not the only one who would help and it would make a lot more people drool over Nettuts.

    Btw, for everyone missing the content of the settings file, here’s a sample of a few things I’ve put together. Feel free to update: http://piratepad.net/6L9KllaTBL

    • w1sh says:

      It’d be nice if it worked in the bg. Not sure if it’s a bug or not, but when I import a package, I have to wait for it to download and such before I can click anything else or else it just stops working completely. Not expected.

  22. alex says:

    Wow. Nice tool! this has great future

  23. Steve says:

    Great work.

    Sublime Text 2 has become my fav text editor (thanks Mr Way for the introduction). This is a great enhancement.

    Thanks.

  24. Great little plugin. I have a question, however. When I pulled jQuery it just plopped it right into the file I had open at the time on the top. Is this the expected behavior? My expectation was that it was going to download jQuery into the folder that I was working in. Am I wrong?

    • Jeffrey Way says:
      Author

      Yeah – it’ll bring the contents into the current file.

      • I see. That’s definitely something I’d like to see changed to maybe a popup that says “put in which directory” and save as the filename that was supposed to be grabbed into the selected dir. Oftentimes you’ll want to d/l the file into your folder structure somewhere and not have to create that folder structure, create a new file, and then save it in there after it plops it all in. Just a suggestion for a future version. Great plugin nonetheless.

      • w1sh says:

        At first this bothered me a bit too, but once you realize it’s as quick at Ctrl + S to trigger that “popup window”, it’s not a problem.

        Ctrl + N (new file), Ctrl + Shift + P, “Fetch” > “jquery”, Ctrl + S (save)

      • Drazen Mokic says:

        This was unexpected behaviour for me too but i`m still not sure if it is the right way or wrong, for me.

        If you are putting all your javascript in one file and all your css in one file, which you should in production, this is good. However, in development i think it`s often not the best thing to do and since this plugin is meant to be used in development i think it should download the file and put it in the projects directory.

      • Gabe says:

        I’d also plus one that feature request to be able to download single files like you can as a package. Specifically in the instance of jQuery I’d like to be able to have that downloaded as it’s own file rather than creating a new blank document, pasting the contents and then saving it somewhere.

  25. Great plugin! :) Thanks!

  26. really great work i liked it here is fuelphp download settings

    “fuelphp”: “https://github.com/downloads/fuel/fuel/fuelphp-v1.1.zip”

    • w1sh says:

      I think the point is to avoid the need for versions, but then again, it seems to cripple the plugin w/o versions. I really wish there was an official single repository for all the latest/greatest packages (since most of them are in “foo_version_number.zip” format).

  27. Jonathan says:

    Here’s an idea: Use Gists (https://gist.github.com/) as snippets, so that your snippets are always available to you online. Then create a snippet for your Fetch.sublime-settings file. Just Fetch your Fetch.sublime-settings file and you’ll have access to all your snippets on any machine!

  28. chichibek says:

    gracias por el trabajo, una pizza para el senor Weslly Honorato, gracias Way por compartirlo

  29. Victor Lacayo says:

    This is an awesome idea. Just downloaded ST2 to try this out.

    A suggestion would be…why not make the local fetching available? In case you don’t care getting the latest file or maybe you don’t want to wait too long you can use the local copy that you keep, you would only have to specify were you’re hiding it. Now if the purpose is to always use the latest file then if it is possible make the plug-in search for latest file and update your local file that way you don’t download the latest file 20 times (I know this means having 20 different projects, this is just an exaggerated example) and just once and keep the file in “cache”.

    Just my 2 cents.

    • w1sh says:

      This is actually an awesome idea and doesn’t seem too hard to implement. Not so you can keep “your very own copy of jQuery”, but imagine making your own boilerplates and being able to import them to whatever directory you want just by specifying where you want them unpacked to.

      • w1sh says:

        I put a .zip of a web boilerplate I always use on my CDN, now I can import custom packages like nobodies business.

    • Robin says:

      I agree. Importing local boilerplates would be very useful.

  30. Akshay says:

    Just a suggestion, in the package option you should automatically open extracted folder in project.

  31. Oli says:

    Awesome plugin! Thank you!

    It would be great if it could somehow fetch the version number of the file or package you’ve requested to download, so you could cancel the fetch if it’s not a new version.

  32. Roy says:

    Nice tool ! But…
    I work always from FTP, so I use the SFTP plugin and this doesn’t work really nice together? Single file works fine but the packages doesn’t:
    Error: You must have at least one folder opened to download this package.
    This because I work from the FTP trought the SFTP plugin, so I don’t have a folder opened…

  33. Kevin Albertson says:

    Wow, this is a great plugin. Its simple but amazing. Thanks, I’m definitely going to use it.

  34. Simon says:

    Maybe its me, but how can i find the right link on github to put in my fetch?.

    if i go to https://github.com/EllisLab/CodeIgniter/downloads and then kopi the download link

    https://github.com/EllisLab/CodeIgniter/zipball/develop

    and put in my fetch package then i just got a file named: __tmp_package.zip

    how can i get the real link to the github codeigniter ?

    • w1sh says:

      I think it literally has to come in some type of zipped format. Which sucks..

      I suggest you get a CDN, then grab the latest version of whatever you want, put it in a zip and fetch that way.

  35. Eric Johnson says:

    I don’t know if anybody has noticed this, but when I use Fetch to download the HTML5 Boilerplate package in Sublime Text 2, the plugins.js file is different than if you download it directly from the HTML5 Boilerplate website.

  36. Matt says:

    Hey! Wouldn’t it be awesome if there was a way to fetch zip packages from the Envato Marketplace!?!?!?! Possibly a new sublime package? I’d love to be able to fetch wordpress themes I’ve purchased to pull into my projects.

  37. robnilas says:

    Brilliant Weslly for the plugin!! and Thanks Jeffrey for let us know!!… and NOW time to start playing with it….

  38. Arif says:

    That’s so cool, but how many fetch apps would be available? was it just codeigniter, html5boilerplate or there is something more like fuel, symfony, tw-bootstrap, etc. let me know how please.

  39. Chandra says:

    As a nettuts user, I would like to see links to all related articles at the bottom. Appreciate if that’s something you can implement. Thanks!

  40. Derivative says:

    really great plugin ! and thaks JW to share it with us

  41. Vira says:

    Thanks.I think your Articles are very useful.

  42. ووشو says:

    Very nice idea. I assume it works with tar.gz, zip, and .php just fine

  43. Anaradam says:

    Nice and useful plugins… great…

  44. Christian says:

    Awesome util, thanks.

    It would be nice to save files the same way as packages also with a question for the path rather than pasting the content of the file (configurable in the settings).

    Greetings.

  45. Great plugin, just a quick question how would you set it up to fetch the latest version of the twitter bootstrap css? If I only wanted the minified `.css` file I could reference it to `http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css` but then if 1.5 gets released I’d have to change this in the options, not sure if they have a “latest” reference somewhere :(

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.