Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Linked to 2 tagtree.tv browserify tutorials #24

Closed
wants to merge 1 commit into from
Closed

Linked to 2 tagtree.tv browserify tutorials #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 56 additions & 42 deletions articles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ <h2>
<a name="introductions--the-basics-of-browserify" class="anchor" href="#introductions--the-basics-of-browserify"><span class="octicon octicon-link"></span></a>Introductions / Browserify basics</h2>

<p>These articles give a great introduction to using <a href="https://github.com/substack/node-browserify">Browserify</a>.</p>


<h3>
<a name="handbook" class="anchor" href="#handbook"><span class="octicon octicon-link"></span></a>Browserify Handbook</h3>

Expand All @@ -46,23 +46,23 @@ <h3>
</p>
<p>The basics of writing modules for the browser using node.js core modules
and modules from npm.</p>

<h3>
<a name="untangle-your-javascript-with-browserify" class="anchor" href="#untangle-your-javascript-with-browserify"><span class="octicon octicon-link"></span></a>Untangle Your JavaScript with Browserify</h3>

<p><a href="http://lincolnloop.com/blog/untangle-your-javascript-browserify/">http://lincolnloop.com/blog/untangle-your-javascript-browserify</a>
</p>
<p>A straightforward introduction to browserify, including integration with
Grunt and Gulp.</p>

<h3>
<a name="how-browserify-works" class="anchor" href="#how-browserify-works"><span class="octicon octicon-link"></span></a>How Browserify Works</h3>

<p><a href="http://benclinkinbeard.com/posts/how-browserify-works/">benclinkinbeard.com/posts/how-browserify-works/</a>
</p>
<p>A basic introduction to how Browserify does what it does.</p>


<h3>
<a name="unix-in-the-browser" class="anchor" href="#unix-in-the-browser"><span class="octicon octicon-link"></span></a>Browserify: Unix In The Browser</h3>

Expand All @@ -77,44 +77,44 @@ <h3>
</p>
<p>A detailed introduction to Browserify and Grunt.js and how to leverage
Browserify to write code that runs on Node.js and in the browser.</p>

<h3>
<a name="using-npm-on-the-client-side" class="anchor" href="#using-npm-on-the-client-side"><span class="octicon octicon-link"></span></a>Using npm on the client side</h3>

<p><a href="http://dontkry.com/posts/code/using-npm-on-the-client-side.html">dontkry.com/posts/code/using-npm-on-the-client-side.html</a>
</p>
<p>A very thorough introduction to using npm, Browserify, and Grunt.js.</p>

<h3>
<a name="npm-everywhere-slides" class="anchor" href="#npm-everywhere-slides"><span class="octicon octicon-link"></span></a>NPM Everywhere (Slides)</h3>

<p><a href="http://slid.es/azer/npm">NPM Everywhere</a>
</p>
<p>Slides for introducing front-end people NPM, Browserify and their benefits.</p>

<h3>
<a name="introduction-to-browserify-1" class="anchor" href="#introduction-to-browserify-1"><span class="octicon octicon-link"></span></a>Introduction to Browserify</h3>

<p><a href="http://blakeembrey.com/articles/introduction-to-browserify">blakeembrey.com/articles/introduction-to-browserify</a>
</p>
<p>Another great look at the basics of Browserify.</p>

<h3>
<a name="node-packaged-modules-bringing-npm-modules-to-the-web" class="anchor" href="#node-packaged-modules-bringing-npm-modules-to-the-web"><span class="octicon octicon-link"></span></a>Node Packaged Modules, bringing npm modules to the web</h3>

<p><a href="http://maxogden.com/node-packaged-modules.html">maxogden.com/node-packaged-modules.html</a>
</p>
<p>A rundown of projects that have made developing with browserify more accessible
and more interesting: requirebin.com, npmsearch.com, and Browserify CDN.</p>

<h3>
<a name="browserify-and-the-universal-module-definition" class="anchor" href="#browserify-and-the-universal-module-definition"><span class="octicon octicon-link"></span></a>Browserify and the Universal Module Definition</h3>

<p><a href="http://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html">dontkry.com/posts/code/browserify-and-the-universal-module-definition.html</a>
</p>
<p>An awesome look at the possibilities for using Browserify to bundle modules
written in AMD, CommonJS/node.js, UMD, ECMAscript 6, and global modules.</p>

<h3>
<a name="standalone-browserify-builds" class="anchor" href="#standalone-browserify-builds"><span class="octicon octicon-link"></span></a>Standalone Browserify Builds</h3>

Expand All @@ -123,7 +123,7 @@ <h3>
<p>Particularly interesting for people using Browserify as part of the development
workflow on a javascript library, check out this article for learning how
to generate standalone Browserify builds.</p>

<h3>
<a name="browserify-v2-adds-source-maps" class="anchor" href="#browserify-v2-adds-source-maps"><span class="octicon octicon-link"></span></a>Browserify v2 adds source maps</h3>

Expand All @@ -136,65 +136,65 @@ <h3>

<p><a href="http://smalljs.org/package-managers/npm/browserify/">smalljs.org/package-managers/npm/browserify/</a></p>
<p>Yet another introductory article about Browserify. Covers basic workflow, transforms, source maps, automation, RequireBin, and how to play nice with popular frameworks.</p>

<h2>
<a name="usage-of-browserify" class="anchor" href="#usage-of-browserify"><span class="octicon octicon-link"></span></a>Usage of browserify</h2>

<p>For examples of using browserify with various javascript libraries, check
out these articles.</p>


<h3>
<a name="a-year-with-browserify" class="anchor" href="#a-year-with-browserify"><span class="octicon octicon-link"></span></a>A Year With Browserify</h3>

<p><a href="http://aeflash.com/2014-03/a-year-with-browserify.html">aeflash.com/2014-03/a-year-with-browserify.html</a>
</p>
<p>"Along the way, I've learned a lot about the whole Browserify process, some tricks, and some pitfalls."</p>


<h3>
<a name="using-angular-and-grunt-with-browserify" class="anchor" href="#using-angular-and-grunt-with-browserify"><span class="octicon octicon-link"></span></a>Using angular and grunt with browserify</h3>

<p><a href="http://dontkry.com/posts/code/angular-browserify-grunt.html">dontkry.com/posts/code/angular-browserify-grunt.html</a>
</p>
<p>Using angular.js with browserify is suprisingly straightforward as shown
in this post.</p>

<h3>
<a name="basics-of-making-maps-with-leafletjs-and-browserify" class="anchor" href="#basics-of-making-maps-with-leafletjs-and-browserify"><span class="octicon octicon-link"></span></a>Basics of making maps with leaflet.js and browserify</h3>

<p><a href="http://learnjs.io/blog/2013/11/08/leaflet-basics/">learnjs.io/blog/2013/11/08/leaflet-basics</a>
</p>
<p>Leaflet.js is a great mapping library, and this tutorial shows how you
can use it with browserify.</p>

<h3>
<a name="backbone--jquery-meet-browserify-easy" class="anchor" href="#backbone--jquery-meet-browserify-easy"><span class="octicon octicon-link"></span></a>Backbone &amp; jQuery meet Browserify: easy.</h3>

<p><a href="http://learnjs.io/blog/2013/11/23/backbone-jquery-browserify">learnjs.io/blog/2013/11/23/backbone-jquery-browserify</a>
</p>
<p>An introduction to using backbone and jquery with browserify.</p>

<h3>
<a name="gruntbrowserifynpmapplicationsuccess" class="anchor" href="#gruntbrowserifynpmapplicationsuccess"><span class="octicon octicon-link"></span></a>grunt+browserify+npm+application=success</h3>

<p><a href="http://codeofrob.com/entries/grunt+browserify+npm+application=success.html">codeofrob.com/entries/grunt+browserify+npm+application=success.html</a>
</p>
<p>A good rundown of using Grunt.js with Browserify.</p>

<h3>
<a name="gulpbrowserifystarterfaq" class="anchor" href="#gulpbrowserifystarterfaq"><span class="octicon octicon-link"></span></a>gulp browserify starter faq</h3>

<p><a href="http://viget.com/extend/gulp-browserify-starter-faq">http://viget.com/extend/gulp-browserify-starter-faq</a></p>
<p>How to start an application with gulp and browserify, including a
<p>How to start an application with gulp and browserify, including a
<a href="https://github.com/greypants/gulp-starter">starter repo</a></p>

<h2>
<a name="related-tools" class="anchor" href="#related-tools"><span class="octicon octicon-link"></span></a>Related tools</h2>

<p>Browserify fits in well with other development tools. Check out some of
the ones most commonly used with Browserify.</p>

<h3>
<a name="beefy" class="anchor" href="#beefy"><span class="octicon octicon-link"></span></a>Beefy</h3>

Expand All @@ -203,69 +203,69 @@ <h3>
<p>Beefy is a great tool for running a development server that will automatically
reload the browser and serve a newly generated bundle.js file each time
you save a project file.</p>

<h3>
<a name="grunt-browserify" class="anchor" href="#grunt-browserify"><span class="octicon octicon-link"></span></a>grunt-browserify</h3>

<p><a href="https://github.com/jmreidy/grunt-browserify">github.com/jmreidy/grunt-browserify</a>
</p>
<p>A plugin for using browserify with grunt.</p>

<h3>
<a name="chem" class="anchor" href="#chem"><span class="octicon octicon-link"></span></a>chem</h3>

<p><a href="https://github.com/superjoe30/chem/">github.com/superjoe30/chem</a>
</p>
<p>Canvas-based game engine and toolchain optimized for rapid development.
Chem uses browserify to compile your code. Check out some of the <a href="https://github.com/hughsk/game-modules/wiki/Modules">useful npm packages for games</a>.</p>

<h2>
<a name="comparisons-to-similar-tools" class="anchor" href="#comparisons-to-similar-tools"><span class="octicon octicon-link"></span></a>Comparisons to similar tools</h2>

<p>Browserify is used primarily with npm. Both of those tools have similar
counterparts like Bower and RequireJS. These articles help explain some
of the differences.</p>

<h3>
<a name="journey-from-requirejs-to-browserify" class="anchor" href="#journey-from-requirejs-to-browserify"><span class="octicon octicon-link"></span></a>Journey from RequireJS to Browserify</h3>

<p><a href="http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify">esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify</a>
</p>
<p>A thorough explanation of switching from RequireJS to Browserify.</p>

<h3>
<a name="2013-a-client-side-package-manager-oddyssey" class="anchor" href="#2013-a-client-side-package-manager-oddyssey"><span class="octicon octicon-link"></span></a>2013: A client side package manager oddyssey</h3>

<p><a href="http://calvinmetcalf.com/post/61957209713/2013-a-client-side-package-manager-oddyssey">calvinmetcalf.com/post/61957209713/2013-a-client-side-package-manager-oddyssey</a>
</p>
<p>A series of posts exploring package managers for client side code. Includes
npm/Browserify.</p>

<h3>
<a name="my-strategy-for-client-side-package-managers-choosing-between-npm-bower-and-component" class="anchor" href="#my-strategy-for-client-side-package-managers-choosing-between-npm-bower-and-component"><span class="octicon octicon-link"></span></a>My strategy for client-side package managers (choosing between npm, bower, and component)</h3>

<p><a href="http://superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing">superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing</a>
</p>
<p>Exploring the differences between npm, bower, and component.</p>

<h3>
<a name="browserify-vs-component" class="anchor" href="#browserify-vs-component"><span class="octicon octicon-link"></span></a>Browserify vs. Component</h3>

<p><a href="http://www.forbeslindesay.co.uk/post/44144487088/browserify-vs-component">www.forbeslindesay.co.uk/post/44144487088/browserify-vs-component</a>
</p>
<p>A comparison of Browserify and Component.</p>

<h2>
<a name="resources" class="anchor" href="#resources"><span class="octicon octicon-link"></span></a>Resources</h2>


<h3>
<a name="browserify-documentationgithub-repository" class="anchor" href="#browserify-documentationgithub-repository"><span class="octicon octicon-link"></span></a>Browserify documentation/github repository</h3>

<p><a href="https://github.com/substack/node-browserify#browserify">github.com/substack/node-browserify#browserify</a>
</p>
<p>Read the Browserify docs! Also check out the <a href="https://github.com/substack/node-browserify/issues">issues</a>.</p>


<h3>
<a name="browserify-documentationgithub-repository" class="anchor" href="#browserify-documentationgithub-repository"><span class="octicon octicon-link"></span></a>Art Of Node - How Require Works</h3>
Expand All @@ -282,43 +282,57 @@ <h3>
<p>To write modules for the browser using Browserify, you'll use the node.js
module system, and it's a good idea to check out the code node.js module
documentation.</p>

<h3>
<a name="packages-tagged-with-browserify-on-npm" class="anchor" href="#packages-tagged-with-browserify-on-npm"><span class="octicon octicon-link"></span></a>Packages tagged with browserify on npm</h3>

<p><a href="https://npmjs.org/browse/keyword/browserify">npmjs.org/browse/keyword/browserify</a>
</p>
<p>Check out the modules tagged with browserify on npm.</p>

<h3>
<a name="browserify-on-stackoverflow" class="anchor" href="#browserify-on-stackoverflow"><span class="octicon octicon-link"></span></a>Browserify on StackOverflow</h3>

<p><a href="http://stackoverflow.com/questions/tagged/browserify">stackoverflow.com/questions/tagged/browserify</a>
</p>
<p>Check out the questions being asked about Browserify on StackOverflow.</p>

<h2>
<a name="videos" class="anchor" href="#videos"><span class="octicon octicon-link"></span></a>Videos</h2>


<h3>
<a name="browserify-v2-and-you" class="anchor" href="#browserify-v2-and-you"><span class="octicon octicon-link"></span></a>Browserify V2 and you</h3>

<p><a href="http://vimeo.com/62988591">vimeo.com/62988591</a>
</p>
<p>Creator of Browserify James Halliday (<a href="https://twitter.com/substack">@substack</a>)
gives a rundown of the changes that came through in version 2 of the project.</p>


<h3>
<a name="an-intro-to-browserify" class="anchor" href="#an-intro-to-browserify"><span class="octicon octicon-link"></span></a>An intro to browserify</h3>

<p><a href="http://tagtree.tv/browserify-an-intro?share_code=uncoopered-inspirer">http://tagtree.tv/browserify-an-intro?share_code=uncoopered-inspirer</a>
</p>
<p>A free 5 minute tagtree.tv screencast tutorial that introduces you to browserify in it's simplest form.</p>

<h3>
<a name="automating-browserify" class="anchor" href="#automating-browserify"><span class="octicon octicon-link"></span></a>Automating browserify</h3>

<p><a href="http://tagtree.tv/browserify-automation?share_code=microwave-waterfall">http://tagtree.tv/browserify-automation?share_code=microwave-waterfall</a>
</p>
<p>Another free 5 minute tagtree.tv tutorial, this one is about automating browserify compilation. First it shows you how to use watchify, then quickly moves on to using express middleware.</p>

<h3>
<a name="modular-js-video" class="anchor" href="#modular-js-video"><span class="octicon octicon-link"></span></a>Modular JavaScript With Npm And Node Modules</h3>

<p><a href="http://ericleads.com/2014/03/modular-javascript-with-npm-and-node-modules/">ericleads.com/2014/03/modular-javascript-with-npm-and-node-modules</a>
</p>
<p>Eric Elliot recorded this screencast version of a talk he gave about using modules to write JS programs.</p>

<h2>
<a name="testing" class="anchor" href="#testing"><span class="octicon octicon-link"></span></a>Testing</h2>

<h3>
<a name="how-i-write-tests-for-node-and-the-browser" class="anchor" href="#how-i-write-tests-for-node-and-the-browser"><span class="octicon octicon-link"></span></a>
How I Write Tests for Node and the Browser
Expand All @@ -327,7 +341,7 @@ <h3>
<p>
Write unit tests that work in node and the browser.
</p>

</article>
</div>
</section>
Expand Down