Monthly Archives: August 2019

Application folder structure

This is common structure for an application folder. Normally found in most projects.

Folder structure varies by build system and programming language. Here are some standard conventions:

  • src/: “source” files to build and develop the project. This is where the original source files are located, before being compiled into fewer files to dist/public/ or build/.
  • dist/: “distribution”, the compiled code/library, also named public/ or build/. The files meant for production or public use are usually located here.
  • lib/: external dependencies (when included directly).
  • test/: the project’s tests scripts, mocks, etc.
  • node_modules/: includes libraries and dependencies for JS packages, used by Npm.
  • vendor/: includes libraries and dependencies for PHP packages, used by Composer.
  • bin/: files that get added to your PATH when installed.

Markdown/Text Files:

  • README.md: A help file which addresses setup, tutorials, and documents the project. README.txtis also used.
  • LICENSE.md: any rights given to you regarding the project. LICENSE or LICENSE.txt are variations of the license file name, having the same contents.
  • CONTRIBUTING.md: how to help out with the project. Sometimes this is addressed in the README.md file.

Specific

  • package.json: defines libraries and dependencies for JS packages, used by Npm.
  • package-lock.json: specific version lock for dependencies installed from package.json, used by Npm.
  • composer.json: defines libraries and dependencies for PHP packages, used by Composer.
  • composer.lock: specific version lock for dependencies installed from composer.json, used by Composer.
  • gulpfile.js: used to define functions and tasks to be run with Gulp.
  • .travis.yml: config file for the Travis CI environment.
  • .gitignore: Specification of the files meant to be ignored by Git.

 

source

Learning Vue

Some notes taken while learning vue.

to start using vue can include this file.

<script src=”https://unpkg.com/vue”></script>

Vue object

  • el: “#id – define the element
  • data – define data
  • methods – define method/functions

Vue Directives

  • v-bind – can bind to any attribute in element. e.g. class, title, type, style, href
    • v-bind is use to control the html element attribute where “moustache {{ }}” cannot be used
    • example <div v-bind:class=“{ active: isActive }”></div>
  • v-if=”status”
  • v-for=“item in items” – normally use with <li> elements
  • v-on – example <button v-on:click=”callAFunction”>click me</button>
  • v-model (2 way data binding). example <input v-model=“message”>. message can be displayed as {{ message }} and can be data inside vue script
  • guide/tutorial on directive
  • full list of directives

Vue Components

Vue.component (‘name’, {

})

  • first argument – name of the component
  • props
  • template

API reference

vue cheat sheet

 

Auto-conversion word to PDF on server side

There is a requirement for a system to convert a ms word file to PDF on server side.

References

  1. using libreoffice
  2. using python and openoffice

direct command

libreoffice --convert-to pdf /path/to/file.{doc,docx}
 OR
shell_exec('/usr/bin/libreoffice --headless --convert-to pdf:writer_pdf_Export --outdir /var/www/html/demo/public_html/src/var/output /var/www/html/demo/public_html/src/var/source/sample.doc');

OR

libreoffice --headless -convert-to pdf fileToConvert.docx -outdir output/path/for/pdf

above sample codes taken from different sources. Actually a similar command with some different optional parameters.

Looking for JS framework to use in future projects

While I’m researching a suitable front-end framework for my future projects, here I list some relevant references that might help the understanding process.

Long time ago there was jQuery that conquer the world. While vanilla javascript is quite hard to learn and the code is not

https://www.youtube.com/watch?v=WJ2PQe-pQJw

Video show why jQuery no longer relevant and sample jQuery vs Vue code