I am a full-stack Web designer and developer with almost 7-8 years of experience, especially on front-end and back- end development, database and UI/UX design. Based on LAMP, I can quickly to build a prototype by new ideas. Primary languages are PHP, JavaScript/node.js and jQuery for web apps; use C/C++ to core algorithms. Now I use sail.js, is a light real-time MVC framework, to build platforms and Data Centre Development in NSRRC.

• [Github.io] (http://yanlonglai.github.io/www/)
• [Online Resume] (http://www.doyoubuzz.com/yanlong-lai)
• [LinkedIn] (https://tw.linkedin.com/pub/yan-long-lai/73/ba3/116)

• NCTU College | PhD of Bioinformatics 2008 - 2012
• NCTU College | Master of Bioinformatics 2006 - 2008
• NTUST College | Bachelor of Computer Science 2002 - 2006

• [NSRRC] (http://www.nsrrc.org.tw/) | Assistant Engineer 2014 – until now

Build a new Data Center in NSRRC. The Data center can handle high data throughput transferred from the whole beamline stations. Responsible for all aspects of need from end-user stations, build java projects and user platform to complete the data arrangement, automation, storagement and analysis.

• [LEADERG Inc.] (https://tw.leaderg.com/) (Startup) | Deputy Manager of R&D 2013 – 2014

I managed a team to complete projects. Focus on web apps (web platforms), I developed them such as news' system, social extensions on webs, and application stories, etc. Based on LAMP framework, each kind of platforms can be build by our group. We have clearly purposes to solve the new challenges in the office.

• [ITRI] (https://www.itri.org.tw/) | Software Engineer of R&D 2009

Being an Engineer in Industrial Technology Research Institute. Develop map applications on website by PHP, Javascript, JQuery and AJAX.

• Prototype

  • [Comicr] (http://140.110.203.1/test_comicr/)
    • It's a simple PHP parser bot to curl comic page for test.
    • I use reg expression to get contents and just show them in a simple web.
  • [Balls Bouncing] (http://140.113.239.91/~MR9/balls/)
    • Random balls bounce in the window
    • Using HTML5, CSS3, JavaScript and canvas.
  • [Galaxian]
    • A game such as Galaxian by JavaScript
    • You can control directions and shoot (SPACE).
  • [News] (http://140.113.239.91/~MR9/news/)
    • Write web spider to curl my news.
  • [RandLunch] (http://140.113.239.91/~MR9/randLunch/)
    • Just for fun
    • You can use it to select your lunch.

• Startup

  • [CircleStar] (http://member.icirclestar.com/)
    • A user management system
  • [MySNG] (http://goo.gl/Du68VX)
    • Real-time video streaming
  • [LEADERG] (https://tw.leaderg.com/)
    • A social web about ROBOT
  • [LEADERG Coin] (http://leaderg.leadergstaging.com/mobile/coin/)
    • A Virtual money system for mobile web
  • Cloth Fit
    • 3D Cloth fit system

• Academic Research

  • [pKNOT] (http://pknot.life.nctu.edu.tw)
    • the protein KNOT web server
  • [WCN] (http://wcn.life.nctu.edu.tw)
    • the Weighted Contact Number model on proteins

• UI/UX

  • bootstrap
    • Install with Bower: bower install bootstrap.
    • Install with npm: npm install bootstrap.
    • Install with Meteor: meteor add twbs:bootstrap.
    • Install with Composer: composer require twbs/bootstrap.
  • RWD
    • [Media Queries] (http://mediaqueri.es/)
      
    • example
      • [demo01] (http://codepen.io/YanlongLai/pen/KpYBoN)

• Automatic 自動化

  • Grunt
    • The JavaScript Task Runner
  • Glut
    • GLUT (pronounced like the glut in gluttony) is the OpenGL Utility Toolkit, a window system independent toolkit for writing OpenGL programs.
  • webpack
    • webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

• QA

  • Mocha
    • Mocha is a feature-rich JavaScript test framework running on Node.js and the browser, making asynchronous testing simple and fun.
  • SuperTest + should.js
    • The motivation with this module is to provide a high-level abstraction for testing HTTP, while still allowing you to drop down to the lower-level API provided by super-agent.
    • should is an expressive, readable, framework-agnostic assertion library. The main goals of this library are to be expressive and to be helpful. It keeps your test code clean, and your error messages helpful.

• Template engine 樣式引擎

  • Less
  • Handlebars

• Clear code 精簡

  • CoffeeScript

• [Coding Style] (https://github.com/airbnb/javascript)

• [HTML5 Boilerplate] (https://html5boilerplate.com/): HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

• [Themeforest] (http://themeforest.net/): 19,314 Website Templates and Themes From $3 for HTML, Email, WordPress, PSD, Joomla, Magento and more

• [Wrapbootstrap] (https://Wrapbootstrap.com/)

• [Ionic] (http://codepen.io/ionic/public-list/): angular.js and libs

• CMS

  • Drupal
  • relax

• Credits

  • Animate.css
  • Bootbox
  • Bootstrap Datepicker
  • Bootstrap Select
  • Bootstrap Table
  • Bootstrap Tagsinput
  • Bootstrap Timepicker
  • Bootstrap Validator
  • Bootstrap Wizard
  • Chosen
  • Data Tables
  • Dropzone:
    • DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
  • Easy Pie Chart:
    • Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.
  • FastClick:
    • FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
  • Flot Charts:
    • Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
  • Foo Table:
    • FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.
  • Full Calendar:
    • FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
  • Gauge.js:
    • 100% native and cool looking animated JavaScript/CoffeeScript gauge.
  • jQuery resizeEnd:
    • jQuery resizeEnd defines a special event that is fired when the JavaScript "resize" event has finished.
  • Masked Input:
    • It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (datesPeepOpenhone numbers, etc).
  • MetisMenu:
    • A jQuery menu plugin
  • MorrisJS:
    • good-looking charts shouldn't be difficult
  • NanoScrollerJS:
    • is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website.
  • noUiSlider:
    • lightweight JavaScript range slider noUiSlider is a range slider without bloat.
  • #Pace:
    • Automatic page load progress bar
  • Sparkline:
    • This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
  • Summernote:
    • Super Simple WYSIWYG Editor on Bootstrap
  • Switchery:
    • Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps.

• Tools

  • [One Page Scroll] (https://github.com/peachananr/onepage-scroll)
    • Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Founder of BucketListly
  • [fullPage.js] (http://alvarotrigo.com/fullPage/)
    • Create Beautiful Fullscreen Scrolling Websites

• Design

  • [Material design] (https://www.google.com/design/spec/material-design/introduction.html)
    • [Material design tw] (http://wcc723.gitbooks.io/google_design_translate/content/material-design-introduction.html)

• Icons

  • #Font Awesome:
    • The iconic font and CSS toolkit
  • Skycons:
    • is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.

• Images

  • Unsplash:
    • Free (do whatever you want) high-resolution photos.

• Symbols

  • [htmlarrows] (http://htmlarrows.com/)
    • HTML Arrows is a clean and comprehensive resource for all the hottest HTML symbols, entities, ASCII characters and Unicode hexadecimal values.