imclab / jem

Jem is truly outrageous.

≈≈≈≈=====≈§§§§§§§§§§§§§§§§§§&§§§§§§§§§§§$§&&§§§§§§§§§§§§§§§%&&&§§§&&&&&&&&&&&&
≈≈≈≈====%%§§§§§§§§§§§§§§&&§§§§§§§§§§§§§§$§%#§§§&%§§§&§%§§&&##&%&§§&&&&&&&&&&&&
≈≈≈==≈≈=≈%§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§#≠≡#§§&##§§§&§%§§§§=≡%&%§&§&&&&&&&&&&
≈≈≈≈====≡≡%§§§§§§§§§§§§&§§§§§§§§§§§§§§§§≡≈≈≈≠≡&§&≡≡&&§§&&&§§≠≈##&#§§&&&&&&&&&&
≈≈≈≈≈====≠&§§§§§§§§§§§§§§§§§§§§§§§$§§§&≠≈=≈=≈≈≈§§≡≠#§§&§&&%§§≈≡≡%##&&&&&&&&&&&
≈≈≈≈≈===≈≠§§§§§§§§§§§§§§§§§§§§§$§§§§§#≠≈≈======≠§&≠≠%§§&§%≡&§#≠≡%#≈§§&&&&&&&&&
≈≈≈≈≈==≈&§&§§§§§§§§§§§§§§§§§§§§$§$§§&%%%%§&§&≡≈≈&&%≠≡&&&&&%~§%==≡≡≈%&&&&&&&&&&
≈≈≈≈≈≈%%≠≡§§§§§§§§§&&§§§§§§§§§§§$§§#≠=~~~-~~≈#&§§§§%≡≡&&%§%≈≡§≡=≠&#≡§§&&&&&&&&
≈≈≈≈≈≈≈≈≈§§§§§§§§§§&§§§§§&§&%&&§&&§&§§§§§§§&#&&&&§&&#≡≠≡&%%≈≈§§§§%≠~§%%&&&&&&%
≈≈≈≈≈≈≈≈&§§§§§§§§§§§§§§§&§##≡≡≡≡≠≡&&§§≠≠&§§≡=~§%&&&%≡≠≈=≈#≈≡%&&&%#≠§&§%&&&&&#≡
≈≈≈≈≈≈≈≈&§§§§§§§§§§§§§§§&§#≠≈==~~~==≠#&%&&#≈≈≠##%%%≡≠=~--~≡§%&≡&==-&§&&§&&&%=~
≈≈≈≈≈≈≈≠&&§§§§§§§§&§§§§§§&≡≠≈=~~-----~~~≈≠≈====≈≠≡≠≠=--··-=≈#%%≠~=%%≠=#&&&&=~~
≈≈≈≈≈≈≈#&§§§§§§§§§&§§§§§&&#≠≈==~~------······--~===~-····----~~~=~----#&&&≈~~~
≈≈≈≈≈≈≡&§§§§§§§&§§&§§§§§&&#≡≠≈==~~----·······-~~~~~~-·····-----------~&&&&=~~~
≈≈≈≈≈≈#§§§§§§§§§§§§§§§§§&%#≡≠≠≈≈==~~---·····-~≈≈==~--·····--···-----~=&&&≈=-~~
≈≈≈==≠&&§§§§§§&§§§§§§§&&%##≡≡≠≠≈≈≈==~----··-~≡#===~~--····~--·----~~=&&&%-----
≈====#%%§§§§§&#&§§§§§&§&%#≡≡≡≠≠≠≈≈≈==~~----~=≡#≠≠≡≡≠=-····-~----~~~≈&&&#≈-----
====≈%=≡&§§&%≠≈&§§§§§§&&&#≡≡≡≡≡≠≠≠≈≈≈=~--------=≠≠≠=~-·-···-~~~~~-&=%#&≠~-----
=====≠=≈#&§%#≠≡§§§§§§§§§§&%#≡≠≠≠≠≠≠≠≈≈=~-----······ ········--~-·-≡#&&%~------
=====~==≈&&≡&§$§§§§§§§§§$$&%≡≡≠≠≠≠≠≠≠≠≈≈≈≠≈=~~············------··≡%&%≡-------
≈≈≈≈≈===~~~~-------~~≠$§§§$§&#≡≠≠≈≈≈≈≈≈≈≈≈≠%%&§§§&&&%%#≠~~---·=~-·&≈≡~≈-------
≠≠≠≈≈≈=~~---···········--&$$$§&#≡≠≈≈≈==≈≈≈≈≠≠≠≈≈~~-·--=~-~--·····-%-≈≈--------
≠≠≠≈≈==~~---·····        ··§$$$$&#≠≠≈≈=======≈≠##%##≠----········-=-#---------
≠≠≈≈≈==~~---····          ··&$$§$§§%≡≠≈==~----··········-·········-~~---------
≠≠≈≈≈==~~---····           ··$$§§§$$§&#≡≠≈==~~~----·--   · ·······-%----------
≠≠≈≈≈==~~~---····          ··§$$§§§§$§§%≡≠≈%&%%≡≠≠≠§§§·  ·-·······----------~~
≠≠≈≈≈===~~~--·····         ··~$$$§§§§§§%≈≈=~---§§$§§§§§§§=········---------~~~
≠≠≈≈≈≈==~~~---······       ···$§$$§§§·&§≠-§&§§&·~≈≡§§§§§§§§&·······--------~~~
≠≠≈≈≈≈==~~~----······    ·····-$$$$§§§-≈··~≈§·≈&·-··=§§§§§&§§-······------~~~~
≠≠≈≈≈≈==~~~---·······   ·· ····$$$$§§§§≠≠~-§§· =&····=§§§§§&&§·······-----~~~~

                         ♫  JEM IS TRULY OUTRAGEOUS  ♫                        

------------------------------------------------------------------------------

Jem

What’s all this, then? It’s but a sketch! A work in progress! And perhaps someday I’ll even get around to completing the example bits—but there’s enough here already to demonstrate where my mind’s at, eh?

Who’s the audience for this? No, I mean really—who? Jem is for JavaScript enthusiasts who enjoy lightweight solutions for building small websites like art portfolios, personal blogs, and so on. Jem pushes all of the other common web languages out of the way—like HTML, CSS, database query languages and so on—in favor of good old JavaScript. Isn’t that nice?

How can I try it out? Just drag and drop the index.html file into your browser window. Jem is built to run the same off a desktop as it does off a server. This makes testing and sketching out changes to your site very convenient. No server software to install and confgure on your local machine. No pre-processors like Sass or CoffeeScript to fiddle with.

But where’s the database? Your data is sorted right in the JavaScript code itself. If you were running a social network with a billion users that would be ridiculous. But if it’s a portfolio site with a few dozen projects, a few hundred blog posts, and so on, then it’s actually a fresh way to look at the problem. JavaScript Objects are happy to store data of any type and Arrays of Objects can be easily sorted and filtered—just like querying a regular database.

This doesn’t sound very scalable It’s not! And it’s not pretending to be either. That’s its charm.

What if my site outgrows Jem? Is my data locked in? Jem can export your data to CSV and MySQL so it’s easy to take your data with you. Plus, because all of that export code is right there in plain JavaScript you can customize it if needed.

How are Jem’s files organized? Most frameworks separate server-side executables from static assets from client-sides scripts from stylesheets, etc. Jem instead groups files according to context. Blog-related files go in the blog folder—period. This makes it easy to swap a new portfolio project in (or out) for example.

What about access priviledges? What if I’ve got an intern updating my blog but I don’t want to give her access to the whole site? Just give her FTP access to the /blog/ folder. Everything’s encapsulated, right? So she’ll only have access to what she needs and nothing more!

What about password protection? Let’s say you have a directory you only wish a specific client to have access to? Just encrypt the objects! Use their email address and password as the key to discourage them from sharing it around.

If there’s no server-side component how do I track usage? Just use a free analytics service—like most sane people do. Jem can play nice with Google Analytics; right now that requires some doin’ on your end, but more emphatic support for this is coming.

Are you concerned that search engines might not be able to index your site’s content on account that it’s entirely dynamically generated? Nope.

Couldn’t you at least use JSON data instead of raw JavaScript for storing data? That way you could— Nope. It needed to be executable. Besides, JSON is just half-neutered JavaScript anyway.

File organization

TBD. Still working out the manifesto and implementation for this...

Road map

Downwind search. Right now the blog example is super boring because it can’t traverse the folder structure and pull out data from different blog posts. That’s a serious problem! Don’t worry, it’s the first thing on the list—Jem would be pretty silly without it.

Pjax-style navigation. Jem is ripe for lazy loading and the elemination of full page requests. But we’re just not there yet. (No time yet!)

Clearer support for Google Analytics. It’s already possible to use Google Analytics or similar tracking software, but it would be nice to make it clearer how to configure that for Pjax-style navigation.

Scheme. Jem wrangles HTML and CSS via JavaScript. And we’re already massaging those naming conventions. This puts us just a step away from crafting an entirely different language. Lisp is beautiful. JavaScript is already based on Scheme. Why not add a Scheme interpreter so you can then write your whole Jem-based website just using Scheme?!

Code typography

Semicolons
First, I only use semicolons when absolutely necessary. By definition any valid JavaScript interpreter must perform automatic semicolon insertion. This means you just don’t need them. Let me repeat: YOU JUST DON’T NEED THEM. Leaving them out makes your code typographically cleaner; reduces visual clutter and noise in the signal. It’s good for your soul.

Whitespace
I use tabs, not spaces for codeblock indentation—functions, object blocks, and so on. Tab is the only true unit of indentation. My tabs are the width of four spaces. Two is too small. Eight is just too damn wide. Within lines of code I’ll often add bits of whitespace to line up consecutive equal signs or other recurring symbols if it’s subtle and not too wonky:

right = 2  
left  = 3  

I’ll often add a space between an open-parenthesis and a token; same for between a token and close-parenthesis. Line breaks after an open bracket are also desirable.

Comments
Two line breaks before line comments. One line break after them. Two spaces following a comment’s slashes. (One for hanging quotation marks in order to optically align the text itself.) For critical to-do’s I add two juxtaposed ampersats to both visually separate them and make them easy to search for. Just a quirk of mine. Occasionally if the situation calls for it I’ll use special “rhombus” commnents for big visual breaks. They have three horizontal spaces between slashes and text and vertical padding inside like so:

    /////////////////  
   //             //  
  //   Rhombus   //  
 //             //  
/////////////////  

I pad these rhombus comments with four line breaks above and two below.