Startup Engineering Camp #2 Indonesia

Hello, Indonesia

We are glad to join this camp to share our experience for you and not only tech but also exchange.

If you have any question, any suggest or any idea to implement, just write down on issues or just send email to us.

Terima kasih 謝謝 (xie xie)

About US

Moko365 Inc. (Tapei, Taiwan)

• Jollen Chen (jollen@moko365.com)
• Hank Wang (hank@moko365.com)

Moko365 on Github

Day 1

• Github
• Sublime text
  • Emmet
• Bootstrap
• jade
  • html2jade

Day 2

• Sass
• Bower
• Express

Github

• Git Application for Mac
• Git Application for Windows
• Get 15 minutes and want to learn Git?

Git flow

• create repository
• git clone
• git status
• git add files
• git commit -m "message"

Notice: Always pull/push after commit all tracking files.

• git push (need network)

• git pull (need network)

• git checkout files

• git diff

jade

Installation

$ npm install -g jade

Run

$ jade templateFolderName
$ jade template.jade
$ jade views/*.jade -o public/

html2jade: Convert html to jade

** It's not working on Windows, so please use html2jade.aaron-powell.com instead.

• html2jade

  $ npm install -g html2jade
  $ html2jade *.html
  $ html2jade *.html -o outFolder

  See Also

• Jade Syntax Documentation

SASS

• Why use meta languages such as Jade and SASS. It's because that this meta form is easy to maintain and to extend anything.

Install SASS compiler by npm first

npm install -g sass

Using SASS compiler to generate CSS from SASS

sass style.sass:style.css

Watch your changes

sass --watch style.sass:style.css

Also you can watch a folder. For example, wath all sass files in sass folder and publish css into public/css folder.

sass --watch sass:public/css

convert css to sass

```
$ sass-convert -F css -T sass public/css/wiki.css sass/wiki.sass
```

Bower

• bower

  $ npm install -g bower

  $ bower init
  $ bower install bootstrap --save
  $ bower list
  $ bower uninstall bootstrap --save

Bower will install your packages on bower_components folder in default, so you need a config file to change default install folder.

.bowerrc

{
    "directory": "public/vendor"
}

Express

Installation

$ npm install -g express

Initialize ExpressJS

$ express

Please run this command on your project folder like this:

C:\Users\Hank\myProjects\booklog-camp> 
C:\Users\Hank\myProjects\booklog-camp> express

Install dependencies packages

$ npm i

Run web server

$ node app.js

Learning Resource

• Startup Engineering on Cousera
• bootstrap & html5 overview on Mokoversity
• nodejs oveview on Mokoversity
• jQuery overview on Mokoversity

Trouble Shooting

Trouble 1: how to install Nodejs and jade

Jade will install by npm (include inside NodeJS) So we need:

1. Install nodejs

Please visit nodejs website

http://nodejs.org

2. Install jade

npm install jade --global

npm is a command line tool from NodeJS.

Trouble 2: Sublime 3 with HTML generation (Emmet)

Install Emmet on Sublime Text

1. Install Package Controller

-- 1.1 visit http://sublime.wbond.net/installation -- 1.2 Ctrl + ` -- 1.3 Copy and paste install command, press enter

2. Install Emmet

-- 2.1 Ctrl + Shift + P -- 2.2 Type 'Package Control: Install Package' -- 2.3 Type 'Emmet' to find and install. -- 2.4 Restart Sublime after installed. -- 2.5 Happy Zen Coding!

• Save file first before you press Tab
• Check Sublime. Type 'syntax:html' at Sublime check box (Ctrl + Shift + P)

See also

• http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/
• https://sublime.wbond.net/packages/Emmet
• https://sublime.wbond.net/installation

Trouble 3: Must have jQuery installed along with Bootstrap

• jQuery
• Include jquery.min.js before include bootstrap.min.js

<script src="https://github.com/MokoVersity/mokoid-camp2-booklog/raw/master/jquery.min.js"></script>
<script src="https://github.com/MokoVersity/mokoid-camp2-booklog/raw/master/bootstrap.min.js"></script>

Trouble 4: Difference between LESS, SCSS and SASS

• SCSS is an extension of CSS and with @extend behavior
• SASS is meta language of CSS
• LESS is also an extension of CSS but without @extend behavior. LESS is able to include CSS files

Trouble 5: How to install npm packages through HTTP/Proxy

• Disable SSL of npm

npm config set strict-ssl false

• Set npm registry to http:// instead of https://

npm config set registry "http://registry.npmjs.org"

• Install packages through proxy here, eg. Jade

npm --proxy http://10.14.211.120:8080 install -g jade

Trouble 6: Install SASS on Windows

• http://www.impressivewebs.com/sass-on-windows/

• Install sass through proxy

gem install sass -p http://10.14.211.120:8080

• How to check your installation

sass -v

If you can't get this work on Windows, please set your ruby bin folder to your PATH environment variables

More

• Apa Khabar 你好 (ni hao)
• Terima kasih 謝謝 (xie xie)