Fetching contributors…
Cannot retrieve contributors at this time
189 lines (185 sloc) 9.98 KB
extends ../mainbase
block defines
const page = {
title: 'Projects',
desc: 'Stuff I have built.'
block text
| This page lists projects created by Mao. For projects Mao have contributed to, see
a(href='/Contributions') Contributions
| .
| I have a tons of little projects that I stooped maintaining as soon as development was finished.
+ref('GitHub repositories', '', "People rarely find my stuff useful, but I posted it on GitHub so I won't lost it.")
+ref('Screenshot of `ls` on archives,', mapStatic('/imgs/old-project-archive-ls.png'), 'and that is not all. As I just said, most early works had been lost.')
| Those projects are not worth mentioning here again. You can check these out on my
a(href='') GitHub profile
| .
| Here are some significant stuff worth mentioning on my personal page (this page) that would demonstrate my skills on programming.
mixin project(name, builtWith, url, _tags, big)
-let tags = _tags || [];
mixin stattag()
each tag in tags
span.stattag= tag
-let xtoclass = (x => "b-" + x.toLowerCase().replace(/\+/g, 'p').replace(/[^A-Za-z0-9]/g, ''))
-let className =' ')
-let logo = null
-if (big)
-className += ' big'
-if (typeof big === 'object')
-logo = big.logo
-className += ' havelogo'
-className += ' nologo'
-className += ' small'
-if (logo)
mixin proj_main()
-if (big)
-if (!big)
a(href=url)= name
-if (!big)
each val, index in builtWith
span(class="built " + xtoclass(val))= val
-if (big)
-if (big)
h2 Web Projects
+project('SchSrch', ['Web', 'Javascript', 'Progressive Web Apps', 'node.js'],
'', ['In-progress', 'Lack testing'], {logo: mapStatic('/imgs/schsrch-icon.png')})
| This is my first <b>Progressive Web App</b>.
+ref('It have a mainfest.json and a ServiceWorker, and it can be put to your home screen.')
| By building this I learned about the common practises on building a Web App. I
| have made it truly "Progressive" by making it in a way that is useable even
| when Javascript is disabled.
+ref('Try it out!')
| It contains a <b>ServiceWorker</b> generated via a Webpack plugin.
+ref('', '')
| I learned how <b>Webpack</b> works while building this project, and I also
| learned about keeping the running state of an App by using
a(href='') <b>Redux</b>
+ref('Relevant code', '')
| . I also learned some <b>optimization</b> technique for building a (near) 60fps UI.
+ref('relevant demonstration', mapStatic('/imgs/schsrch-60fps-citation.png'))
| Give it a try - it should behave like an usual APP.
| This is a website that enables anyone to do full text search
+ref('Relevant code', '')
| in CIE past papers. By far 29 subjects is maintained.
+ref('Relevant code', '')
| It has helped many
+ref('Statistics', mapStatic('/imgs/schsrch-stat-citation.png'))
| of my classmates
+ref("I hardly mentioned this website to anyone other than classmates in my school.")
| for efficient revision
+ref("Many said it's much easier to use.")
| . It also offers an robust syntax for searching a particular (set of) paper
+ref('Relevant tests', '')
| , which allows users to quickly found the paper they want, without scrolling
| through a long list of all PDF files or year folder (which is what other past
| paper websites force users to do
+ref('', '')
+ref('', '')
+ref('', '')
+ref('', '')
| ). It is quicker because typing keywords is usually faster than selecting from
| a long list.
+ref("Drop-Down Usability: When You Should (and Shouldn't) Use Them - Articles - Baymard Institute", '')
| SchSrch also allows users to jump quickly between question paper and mark
| scheme
+ref('Relevant screenshot', mapStatic('/imgs/schsrch-dirjump-citation.png'))
| , and some have provided feedback that this is extremely useful.
+project("", ["Web", "node.js", "Javascript"],
"", [], {logo: mapStatic('/svg/logo.svg')})
| This is my personal website running on my little server
+ref('little server screenshot', mapStatic('/imgs/little-server-screenshot.png'), 'It may not seems like a "little server", but remember that it also runs SchSrch.')
| . It is built with <b>Nodejs</b>
+ref('package.json', '')
| and I like Nodejs
+ref('As of now all of my web projects are either hosted on my server with Nodejs, or hosted on which is static.')
| . I learned about building websites with Nodejs and some Web best practises. I
| also learned <b>Sass</b> by using it in this project. I also follow a
a(href='') standard <b>coding style</b>
| in this project for all Javascript.
| This website don't contain much useful stuff, just my personal things.
+project("Brainfuck-tape", ["Javascript", "Web"], '', ['Lack testing'])
| This can also count as an early
+ref('Initial commit dating back to 2015', '')
| Javascript project I built. The code may look silly to experienced programmers,
| and the variable naming is horrible to the extent that after 2 years I can't
| fully understand what I wrote back then. It is a simple <b>BrainFuck</b>
| interpreter, with running code highlight, infinite
+ref("Nothing is infinite. I mean that there's no hard limit other than your physical memory size.")
| bidirectional tape, tape inspecting...
h2 Desktop Apps
+project("Shanbay Desktop", ["Electron", "Web", "React", "Javascript", "node.js"],
"", ["Lack testing"], true)
| This is my first non-trivial desktop App. It is built with Web stuff, and was packaged with <b>Electron</b>, which makes use of Chromium
+ref('Electron home page', '', 'see the Chromium version thing.')
| . I started trying out <b>React</b> while building this
+ref('Relevant code', '')
| , which led me to fall in love with
span.refscope functional-style stuff like React
+ref('React doc on `Component.render`', '', "- React make uses of functional programming concepts and treated `render` as a pure function of the component's state (and props).")
| . I also used <b>Webpack</b> for the first time while building this project.
| There is one big problem - final packages of Electron Apps are very large in size
+ref('Expected app bundle size? · Issue #2003 · electron/electron', '')
| because of the Chromium included in the package
+ref('Relevant discussion', '')
| , so it may be less practical.
| This App is a
a(href="") Shanbay
| desktop client, and Shanbay is a website aimed to help you recite English
| vocabulary. However, I won't recommend doing that and
span.refscope I personally don't
+ref("2016 Augest is my final attempt at doing this. I haven't used Shanbay anymore after that.", '')
| .
h2 Command Line Utils
+project('Ecbpass', ['Python'], '', ['Lack testing'])
| I learned <b>Python</b> while building this. It is a simple tool that allows you to generate pseudorandom password for each site and no need
| to store it or remember it.
+project("Pomodoro-Timer", ["C++", "Linux"], "")
| I learned about building stuff for <b>Linux</b> with <b>C++</b> with this project.
| It is a not-simple-to-use, command line Pomodoro timer.
h2 See also
a(href='/Programming_Skills') Programming Skills
| : Some stuff I know.
a(href='/Programmer_Thought') Thoughts as a Programmer
| : Some personal opinions.