Permalink
Browse files

add articles from learnjs

  • Loading branch information...
1 parent e189f63 commit f2b60d870f331c81c1e36bc4290f1384a984aba8 @maxogden maxogden committed with Nov 25, 2013
Showing with 212 additions and 15 deletions.
  1. +0 −5 browser/main.js
  2. +207 −5 static/index.html
  3. +5 −5 static/style.css
View
@@ -25,11 +25,6 @@ http.get({ path : '/blog.json?inline=html' }, function (res) {
res.pipe(parser);
});
-var cloneCode = document.querySelector('#clone .code');
-cloneCode.textContent = cloneCode.textContent
- .replace(/\$REMOTE/, 'http://' + window.location.host + '/blog.git')
-;
-
var singlePage = require('single-page');
var showPage = singlePage(function (href, page) {
hide(divs.articleBox);
View
@@ -158,11 +158,213 @@
</div>
<div id="article-box">
- <div id="articles"></div>
- <div id="clone">
- clone these articles!
-<pre class="code"><span class="blue">git</span> clone <span class="gold">$REMOTE</span></pre>
- </div>
+ <h2>
+ <a name="introductions--the-basics-of-browserify" class="anchor" href="#introductions--the-basics-of-browserify"><span class="octicon octicon-link"></span></a>Introductions / the basics of Browserify</h2>
+
+ <p>These articles give a great introduction to using <a href="https://github.com/substack/node-browserify">Browserify</a>.</p>
+
+ <h3>
+ <a name="introduction-to-browserify" class="anchor" href="#introduction-to-browserify"><span class="octicon octicon-link"></span></a>Introduction to Browserify</h3>
+
+ <p><a href="http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify">superbigtree.tumblr.com/post/54873453939/introduction-to-browserify</a>
+ </p>
+ <p>The basics of writing modules for the browser using node.js core modules
+ and modules from npm.</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="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://maxogden.com/node-packaged-modules.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>
+
+ <p><a href="http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds">www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds</a>
+ </p>
+ <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>
+
+ <p><a href="http://thlorenz.com/blog/browserify-sourcemaps">thlorenz.com/blog/browserify-sourcemaps</a>
+ </p>
+ <p>Learn about using source maps with Browserify in this article.</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="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>
+
+ <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>
+
+ <p><a href="http://didact.us/beefy/">didact.us/beefy</a>
+ </p>
+ <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>
+
+ <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="nodejs-modules-documentation" class="anchor" href="#nodejs-modules-documentation"><span class="octicon octicon-link"></span></a>node.js modules documentation</h3>
+
+ <p><a href="http://nodejs.org/docs/latest/api/modules.html#modules_modules">nodejs.org/docs/latest/api/modules.html#modules_modules</a>
+ </p>
+ <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>
+
+ <h2>
+ <a name="add-resources" class="anchor" href="#add-resources"><span class="octicon octicon-link"></span></a>Add resources</h2>
+
+ <p><a href="https://github.com/learn-js/learn-js.github.com/blob/master/_posts/2013-11-24-browserify-resources.md">This post is open source</a>.
+ Add new resources to this list by forking the repository, making changes
+ and making a pull request. Here's the file in the site's repo: <a href="https://github.com/learn-js/learn-js.github.com/blob/master/_posts/2013-11-24-browserify-resources.md">github.com/learn-js/learn-js.github.com/blob/master/_posts/2013-11-24-browserify-resources.md</a>
+ </p>
+ <p>Or suggest a resource by adding an issue: <a href="https://github.com/learn-js/learn-js.github.com/issues">github.com/learn-js/learn-js.github.com/issues</a>.</p>
</div>
<div id="preview-box">
View
@@ -188,7 +188,7 @@ body {
#search .npm .badge a {
}
-#splash {
+#splash, #article-box {
color: rgb(200,220,235);
}
@@ -248,20 +248,20 @@ body {
color: rgb(230,182,91);
}
-#splash .step {
+#splash .step, #article-box {
max-width: 600px;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
}
-#splash .step a:link,
-#splash .step a:visited {
+#splash .step a:link, #article-box a:link,
+#splash .step a:visited, #article-box a:visited {
color: rgb(90,140,230);
text-decoration: none;
}
-#splash .step a:hover {
+#splash .step a:hover, #article-box a:hover {
color: rgb(230,182,91);
}

0 comments on commit f2b60d8

Please sign in to comment.