-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Welcome to the viewsource.me wiki!
I'm going to dump thoughts and documentation here while I plan out this project...
ViewSource.me is going to be a web app for reading source code.
Read Code to Learn Code.
We've all run View Page Source or Inspect Element on a webpage to learn something new. It's something I truly love about web development... HTML, CSS & JavaScript is always Open Source!
Then one day I watched Paul Irish's 10 Things I Learned from the jQuery Source and it struck me that I had never dug into the jQuery source!
I use libraries, boilerplates, micro-frameworks, etc all the time... but treat them as "black boxes". Weird huh! These projects are developed by some of the industries smartest minds - and they are packed FULL of interesting tricks and techniques.
I want to break this mentality... and expose the beauty (and in some cases horror) inside these popular open source projects.
If you've got a 30 minute bus or train ride home from work why not use that time to read over some source code... you might be surprised by what you learn!
Lets take jQuery as an example. Personally I don't like how the code is distributed.
You've got the GitHub Repository... which is confusing. Imagine being a noob and reading all this talk about "building" jQuery from the source files. Also no mention of the projects public distribution (a.k.a Download) page...
Then you've got the Download page.
My pet hates:
- The URL sucks: http://docs.jquery.com/Downloading_jQuery.
- No .zip or .tar.gz files to download both the minified and uncompressed files in one click.
- Right click -> "Save Link As..." is not intuitive for downloading.
- Might resort to opening in a new tab/window then copy pasting the code.
- No code syntax highlighting when reviewing source code.
- No way to easily compare versions with a
diff. - Can't link to a "latest" release that is always a mirror of the most current version.
- Version numbers drop the "0" e.g.
jquery-1.6.js... I would preferjquery-1.6.0.jsfor consistency. - No way to download all - or multiple - versions quickly.
At a high level, distribution issues exist for all your favourite open source projects. The public release of versions should be centralised, generalised, clean and consistent.
I've thought a lot about this, and thrown away several attempts... but here's the solution I'm most happy with.
Using jQuery as the flagship project...
GitHub: https://github.com/viewsource/viewsource.me.jquery
jQuery - version releases archived, tagged, hosted & packaged for download!
Check out the benefits:
- 31 tagged commits on
master- one for each release. Using semantic versioning tags. - Diff compare releases, e.g. v1.6.0...v1.6.2 https://github.com/viewsource/viewsource.me.jquery/compare/v1.6.0...v1.6.2 <-- change version numbers in url to compare ANY release.
- Simple history of releases: https://github.com/viewsource/viewsource.me.jquery/commits/master/
- Download .zip and .tar.gz packages - which contain unmodified file/filenames. e.g.
jquery-1.6.js. https://github.com/viewsource/viewsource.me.jquery/downloads - Download "latest" package https://github.com/downloads/viewsource/viewsource.me.jquery/jquery-latest.zip
- The
gh-pagesbranch contains submodules to each tag: https://github.com/viewsource/viewsource.me.jquery/tree/gh-pages - Files are hosted on Github Pages (which delivers gzip'ed files... and can be used as an ad-hock CDN during development): http://viewsource.github.com/viewsource.me.jquery/1.6.0/jquery.js <-- change version number in url to switch between versions... notice that the version number are consistent (i.e. I don't drop the "0" in 1.6.0).
- Speaking on CDN's I've setup a sister project to make these CDN urls nice an easy to remember for when your prototyping a demo... http://cdn.viewsource.me/jquery/1.6.0/jquery.js -- source: https://github.com/viewsource/cdn.viewsource.me
- Oh yeah, there is also a "latest" version http://cdn.viewsource.me/jquery/latest/jquery.min.js
- You can fork the project, and setup your own personal GitHub Pages CDN for these files.
- For jQuery, Github fails to Syntax Highlight the code https://github.com/viewsource/viewsource.me.jquery/blob/f8cf6f44d99cb739cc6a9a03db86f9bae7d46261/jquery.js ... but for smaller projects this would work. Plus I plan to resolve this issue in http://viewsource.me by using the ACE editor: http://ace.ajax.org/ - which can handle huge documents (100,000 lines and more are no problem).
Ok so it's not the simplest process - and I'm being strict on how every step is performed (to keep everything consistent)... + I learn't a lot about git along the way.
Here's a Gist of my process:
https://gist.github.com/1064750
You might find it useful to read if you are doing any work with Github Pages, git tags, git submodules, .zip & .tar.gz bulk processing, global .gitignore... it also has info on "Cloning the project" and "Forking the project for personal Github Pages hosting".
Right now I've only done jQuery... but soon I'll be moving onto this hitlist...
I have MANY smaller project that I want to archive... but first I think getting the big guns under my belt will be best. So I'm going to tackle projects on the popular CDNs...
Google CDN: http://code.google.com/apis/libraries/devguide.html
Microsoft CDN: http://www.asp.net/ajaxlibrary/cdn.ashx
cdnjs.com: http://www.cdnjs.com/
I would love to hear any thoughts you have on what I'm doing here - @viewsourceme or @_chrisjacob ^_^