all repos — h3 @ a1cd2c943df6d809a9c09c61a86b48b53504e9b2

A tiny, extremely minimalist JavaScript microframework.

Added docs, moved example under docs.
h3rald h3rald@h3rald.com
Sat, 18 Apr 2020 18:32:55 +0200
commit

a1cd2c943df6d809a9c09c61a86b48b53504e9b2

parent

9be48a7e0f62afde109af560909ba9895c8cedf9

M docs/css/style.cssdocs/css/style.css

@@ -3,10 +3,6 @@ text-align: center;

width: 100%; } -main { - height: calc(100vh - 120px); -} - #navigation { border: none; border-left: 1px solid #ccc;
M docs/md/about.mddocs/md/about.md

@@ -1,1 +1,24 @@

-## About+## About + +### A brief history of H3 + +A while ago, I was interviewing with several companies trying to find a new job in the JavaScript ecosystem. One of these companies asked me, as a part of their interview process, to create a simple Todo List app in JavaScript *without using any libraries*. + +I spent some time thinking about it, started cobbling together a few lines of code doing the usual DOM manipulation stuff (how hard can it be, right? It's a Todo List!) and then stopped. + +_F\*\*\* this!_ — I thought. + +There has to be a better way. If only I could use something small like [Mithril](https://mithril.js.org), it would take me no time! But sadly I couldn't. Unless... + +Unless I coded the whole framework myself of course. And so I did, and that's more or less how H3 was born. You can see a slightly-modified version of the resultig Todo List app [here](example/index.html) (with all the bonus points implemented, like localStorage support, pagination, filtering, etc.). + +The original version only had an even smaller (and even buggier) Virtual DOM and hyperscript implementation, no routing and no store, but it did the job. After a few additional interviews I was actually offered the job, however I didn't take it, but that's another story ;) + +A few months after that interview, I decided to take a look at that code, tidy it up, add a few bits and bobs, package it up and release it as a *proper* microframwork. Well, kind of. + +### Credits + +This site is built with H3 itself, in under [70 lines](https://github.com/h3rald/h3/blob/master/docs/js/app.js) of code, plus the following third-party libraries: +* [marked.js](https://marked.js.org/#/README.md#README.md) +* [DOMPurify](https://github.com/cure53/DOMPurify) +* [mini.css](https://minicss.org/)
M docs/md/overview.mddocs/md/overview.md

@@ -2,4 +2,7 @@ ## Overview

**H3** is a microframework to build client-side web applications in modern JavaScript. -This site is under construction, but you can already peek at the [source code](https://github.com/h3rald/h3/blob/master/h3.js). +H3 is also: +* **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). +* **bare-bones**, it contains just the bare minimum to create a fully-functional single-pace application. +* **modern**, it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar).
M package.jsonpackage.json

@@ -10,7 +10,7 @@ },

"scripts": { "test": "jest", "coverage": "jest --coverage", - "copy": "cp h3.js docs/js/h3.js && cp h3.js example/assets/js/h3.js", + "copy": "cp h3.js docs/js/h3.js && cp h3.js docs/example/assets/js/h3.js", "guide": "hastyscribe docs/H3_DeveloperGuide.md" }, "repository": {