Permalink
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
.box.dashinfobox
| This page lists projects created by Mao. For projects Mao have contributed to, see
a(href='/Contributions') Contributions
| .
p
| I have a tons of little projects that I stooped maintaining as soon as development was finished.
+ref('GitHub repositories', 'https://github.com/micromaomao?tab=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='https://github.com/micromaomao?tab=repositories') GitHub profile
| .
p
| Here are some significant stuff worth mentioning on my personal page (this page) that would demonstrate my skills on programming.
.__tableofcontents
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 = builtWith.map(xtoclass).join(' ')
-let logo = null
-if (big)
-className += ' big'
-if (typeof big === 'object')
-logo = big.logo
-className += ' havelogo'
-else
-className += ' nologo'
-else
-className += ' small'
li(class=className)
-if (logo)
.logo
img(src=logo)
mixin proj_main()
-if (big)
.stattags
+stattag()
h4
-if (!big)
+stattag()
a(href=url)= name
-if (!big)
p
block
-else
.desc-content
block
.builtwith
each val, index in builtWith
|
span(class="built " + xtoclass(val))= val
-if (big)
.main
+proj_main()
block
-else
+proj_main()
block
-if (big)
br
h2 Web Projects
ul.projul
a#schsrch
+project('SchSrch', ['Web', 'Javascript', 'Progressive Web Apps', 'node.js'],
'https://schsrch.xyz/', ['In-progress', 'Lack testing'], {logo: mapStatic('/imgs/schsrch-icon.png')})
p
| 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('https://schsrch.xyz/sw.js', 'https://schsrch.xyz/sw.js')
| 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='http://redux.js.org/') <b>Redux</b>
+ref('Relevant code', 'https://github.com/micromaomao/schsrch/blob/master/view/appstate.js#L2')
| . 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.
p
| This is a website that enables anyone to do full text search
+ref('Relevant code', 'https://github.com/micromaomao/schsrch/blob/master/lib/dbModel.js#L107')
| in CIE past papers. By far 29 subjects is maintained.
+ref('Relevant code', 'https://github.com/micromaomao/schsrch/blob/master/view/CIESubjects.data.js')
| 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', 'https://travis-ci.org/micromaomao/schsrch/jobs/246482505#L894')
| , 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('xtremepapers.com', 'https://papers.xtremepapers.com/CIE/Cambridge%20IGCSE/History%20%280470%29/')
+ref('gceguide.com', 'https://papers.gceguide.com/IGCSE/History%20(0470)/')
+ref('papacambridge.com', 'https://papacambridge.com/past-papers/cie/sy-qp-ms/igcse/history-0470/')
+ref('pastpapers.co', 'http://pastpapers.co/cie/?dir=IGCSE/History-0470/')
| ). 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", 'https://baymard.com/blog/drop-down-usability#drop-down-lists-with-too-many-options')
| 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("maowtm.org", ["Web", "node.js", "Javascript"],
"https://github.com/micromaomao/maowtm.org", [], {logo: mapStatic('/svg/logo.svg')})
p
| 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', 'https://github.com/micromaomao/maowtm.org/blob/master/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 github.io 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='https://github.com/standard/standard') standard <b>coding style</b>
| in this project for all Javascript.
p
| This website don't contain much useful stuff, just my personal things.
+project("Brainfuck-tape", ["Javascript", "Web"], 'https://github.com/micromaomao/brainfuck-tape', ['Lack testing'])
| This can also count as an early
+ref('Initial commit dating back to 2015', 'https://github.com/micromaomao/brainfuck-tape/commit/e6d4b79b7ee8f0a7461eab606871606b6f9fb324')
| 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
ul.projul
+project("Shanbay Desktop", ["Electron", "Web", "React", "Javascript", "node.js"],
"https://github.com/micromaomao/Better-Shanbay", ["Lack testing"], true)
p
| 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', 'https://electron.atom.io/', 'see the Chromium version thing.')
| . I started trying out <b>React</b> while building this
+ref('Relevant code', 'https://github.com/micromaomao/Shanbay-Desktop/blob/master/view/main.jsx#L3')
| , which led me to fall in love with
span.refscope functional-style stuff like React
+ref('React doc on `Component.render`', 'https://facebook.github.io/react/docs/react-component.html#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', 'https://github.com/electron/electron/issues/2003')
| because of the Chromium included in the package
+ref('Relevant discussion', 'https://github.com/electron/electron/issues/2003#issuecomment-235408308')
| , so it may be less practical.
p
| This App is a
a(href="https://shanbay.com") 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.", 'https://www.shanbay.com/checkin/user/calendar/52733386/201608')
| .
h2 Command Line Utils
ul.projul
+project('Ecbpass', ['Python'], 'https://github.com/micromaomao/ecbpass', ['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"], "https://github.com/micromaomao/Pomodoro-Timer")
| 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
ul
li
a(href='/Programming_Skills') Programming Skills
| : Some stuff I know.
li
a(href='/Programmer_Thought') Thoughts as a Programmer
| : Some personal opinions.