Advertisement
News

Introducing Nettuts+ Fetch

by

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.

Related Posts
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    Tools
    Your Obedient Assistant: YeomanCode
    One thing is certain: times sure have changed. Not too long ago, front-end development, though not simple, was manageable. Learn HTML, a bit of CSS, and you’re on your way. These days, however, for lack of better words, there are far more variables to juggle. Preprocessors, performance tuning, testing, image optimization, and minification represent but just a few of the key factors that the modern day front-end developer must keep in mind.Read More…
  • Code
    Tools & Tips
    Say Yo to YeomanIntroduction to yeoman
    According to yeoman.io, "Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps." Let's dig in and see exactly what this means!Read More…
  • Code
    Tools
    Sublime Text 2: First StepsCode
    In less than a year, the Sublime Text 2 code editor - available for Mac, Windows, and Linux - has skyrocketed to becoming the editor of choice for a huge number of developers. How come? Well, it's a sophisticated editor, with lightning-fast speed, an incredibly vibrant plugin community, easy configuration, Vintage (Vim) mode, multiple cursors - the list goes on. If you've yet to make the switch, out of some sense of loyalty to your current editor of choice, give me twenty minutes, and I'll convince you!Read More…
  • Code
    Tools & Tips
    Sublime Text 2 Tips and Tricks (Updated)200u
    Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I'll show you my favorite tips and tricks today. Read More…