Day005

For this day, I created a nodejs project that allows uploading excel to server by submitting form-data and then the excel’s content is extracted. The uploaded excel will be stored in /public folder located as root of the project.

I stop using Jade as a template engine for this project, and projects that follow. I found it is hard to use it even its intention is to simplify things written in html. I am new to web development, and lots of html syntax are out there I am not familiar with. It is easier for me to pick up the syntax in a traditional way before I found the syntax too boilerplate.

— — — — — — — — — — — — — — — — — — — — — — —

add gitignore file for project built from WebStorm

— — — — — — — — — — — — — — — — — — — — — — —

meaning of ^ and ~ in package.json

  • MAJOR version when you make incompatible API changes,
  • MINOR version when you add functionality in a backwards-compatible manner, and
  • PATCH version when you make backwards-compatible bug fixes.

— — — — — — — — — — — — — — — — — — — — — — —

I found that bootstrap somehow does not include styling for “file-type input”, so I have to find an unofficial one for it.

npm i --save bootstrap-filestyle

and then I add below to app.js:

app.use('/js', express.static(__dirname + '/node_modules/bootstrap-filestyle/src'));

so that my index.html file could use the module through:

<script type="text/javascript" src="/js/bootstrap-filestyle.min.js"></script>

ref: http://stackoverflow.com/questions/26773767/purpose-of-installing-bootstrap-through-npm

Also, I found that browserify seems to be another option for doing above action, but I did not use it for this project.

another related website:

https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

— — — — — — — — — — — — — — — — — — — — — — —

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">

css should be placed inside header

— — — — — — — — — — — — — — — — — — — — — — —

Run something right after the dom is ready:

// Shorthand for $( document ).ready()
$(function() {
console.log( “ready!” );
});

https://learn.jquery.com/using-jquery-core/document-ready/

— — — — — — — — — — — — — — — — — — — — — — —

Like what you read? Give Jacky Tsang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.