Category: Website Organization

Front-End Dev Boilerplate with Automatic Build, Watch & Live Reload

Although there are a lot of boilerplates out there, creating your own makes sure that you have full understanding and control over your codebase.

This article will guide you through creating of an initial setup for modern front-end development, including:

  • CommonJS Modules
  • Gulp as build tool
  • App config file
  • Local dev server with gulp-live-server
  • Live reload with BrowserSync
  • SASS compilation and bundling with gulp-concat and gulp-sass
  • JS compilation and bundling with Browserify and vinyl-source-stream
  • JS linting with gulp-eslint

Read more

Use absolute paths instead of relative to link to css, js, and media files

There are multiple ways to link to page assets such as CSS and javascript files, images and other media files.

You can use relative paths and link relative to the page. You can use absolute paths and link relative to the website root. There are also ways to link relative to the “home directory” and resolve paths on the server side.

Which way is the best? Relative paths are the simplest, but as the website scales, maintenance can quickly become an issue. I recommend using absolute paths for medium- to large-sized websites. If you want to know why read on.

Read more