Week2 : Project management

Web development

For Week2 : Git assignment goto:
Week2 page

Following contents are covered:

How I built this website and what development tools are used
How I document my work during Fabacademy to make a good use of time

for Git tutorial goto:
Getting along with Git (version control)

Building website

I brought most of the source codes from portfolio page of Kosuke Takahashi) where I found nice looking and codes are simple and light.

All web browsers have feature to analyze websites as built in feature. If you are using Google Chrome, there is a powerful developer tool that you may access from menu in top right corner.

This is the source files of http://kosuke.tk/.

“Isotope.pkgd.min.js” is a javascript file needed to run framework called isotope (https://isotope.metafizzy.co/) . This is mainly used to implement sort menu.
There are 4 css’s. Appropriate style is applied according to the client’s media size. Condition of the media size is defined in (index).

I downloaded them all and modified necessary parts to fit Fabacademy documentation site.

Text editor

I became a big fan of brackets, a text editor optimized for html development, as it has live preview feature that enables to feedback your modification in real time and saves time a lot.

Documentation

Goal

Use markdown for primary documentation
I simply couldn’t stand editing raw html, it takes so much time.
Easy to revise and make changes
I knew there will be revisions at the time of final evaluation, or I might want to fix or add something later on.
Seamless workflow when documenting
Inserting images is the most time consuming process. So 1. Copy screen capture (mac : command + shift + control + 3 or 4) to clipboard then directly paste it to the document, and 2. Stressless interface for adding photo took with my phone.

My workflow

Making draft with Google docs
Paste the draft to Stackedit and do the final adjustment in markdown.
“Publish” document with Stackedit to generate synced file in the local repository.
Make the base html(“weekn.html”) and let it read published content html(“weekn_mk.html”) with iframe tag.

Google docs

Google docs, as far as I know, is the most efficient documenting environment. You can directly paste neither screenshots or images you copied from the web, or photos you took on your phone and synced to Google Photos (all photos you take automatically appears in Photos bar and you may simply drag and drop into the document).

On the group work assignment you may share document with your group members and edit it together at the same time. Outline feature and spelling check is another useful feature in Google docs.

Stackedit

Stackedit is a crowd based markdown editor with simple interface and powerful publishing feature. I used it to revise the first draft and form it to clean, comprehensive web page. Then publish it to the local repository in styled html. After publishing it, if you made some changes on the document, you may update published html with single click on update button.

Using iframe tag in html

iframe is used to display web page within a webpage.

Here is how my html body looks like.

<body>
<div id="centered">
<header>
<h1><a href="[../index.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/index.html)"><img id="logo" src="[../img/logo.jpg](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/img/logo.jpg)"></a></h1>

<nav>
<div id="desktop">
<ul id="main-nav">
<li><a href="[../index.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/index.html)"><font color="#333">assignments</font></a></li>
<li><a href="[../final/index_final.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/final/index_final.html)">final project</a></li>
<li><a href="[../about.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/about.html)">about</a>
</ul>
</div>

<div id="mobile">
<ul id="mobile-nav">
<li><a href="[../index.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/index.html)"><font color="#333">assignments</font></a></li>
<li><a href="[../final/index_final.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/final/index_final.html)">final project</a></li>
<li><a href="[../about.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/about.html)">about</a>
</ul>
</div>
</nav>
</header>

<article class="wrapper">
<iframe id="target_box" name="target_box"　frameborder="no" width="100%" height="1000" src="[week1_mk.html](http://fab.academany.org/2018/labs/fablabkamakura/students/kai-naito/week1/week1_mk.html)" style="border: none; width: 100%; height: 1000;"></iframe>
</article>
</div>

<footer></footer>

</body>

Header is written directly to the html, but all the contents are read from external html with iframe tag.

Other markdown tools I considered

HUGO
Contents management system with Markdown
StrapDown.js
Client side markdown framework.
Rodney’s example on strapdown.js