Skip to content

0.6.0
Compare
Choose a tag to compare
@addyosmani addyosmani released this 02 Dec 17:29
· 48 commits to master since this release
v0.6.0
84c5428

Since our last release we have been busily working away adding super new features to our next big update of Web Starter Kit - our boilerplate for responsive sites that want a modern front-end tooling workflow. WSK 0.6.0 is now out and can be downloaded at the end of the notes.

Material Design

Firstly, WSK has gone all materially and we have completely refactored our boilerplate to use Material Design Lite. The default template is our Text-Only template, which follows the Material Design Spec and is fully tested for great cross-device support. Of course you use a number of our MDL templates for inspiration or simply customise the default design to suit your own needs.

screen shot 2015-11-24 at 11 29 46

Should you wish to roll your own Material Design Lite custom build that works with WSK, try our MDL Sass guide.

ES2015 via Babel

We also have added optional ES2015/ES6 support using Babel which you can enable by removing the line "only": "gulpfile.babel.js", in the .babelrc file.Thanks to Babel, the ES2015 source code will be automatically transpiled to ES5 for wide browser support.

We've also ES2015'ified our Gulpfile:

screen shot 2015-12-03 at 18 41 46

ESLint code-linting

We now use ESLint for code linting and code-styling. ESLint is a pluggable and configurable linter tool for identifying and reporting on issues in your JavaScript. We’ve setup ESLint to use our brand new ESLint configuration for the Google JavaScript style guide, which you are free to customise further.

// Lint JavaScript
gulp.task('lint', () =>
  gulp.src('app/scripts/**/*.js')
    .pipe($.eslint())
    .pipe($.eslint.format())
    .pipe($.if(!browserSync.active, $.eslint.failOnError()))
);

Service Worker Pre-caching

Offline support (basically, your site working when a network connection isn't available) is now enabled out of the box thanks to Service Workers and sw-precache. They work by intercepting network requests made from a page, returning a response retrieved from the network. Alternatively they can retrieve from a local cache, or even constructed programmatically. This allows it to be used for intelligent offline caching of your site.

Progressive Web App Support

“Progressive Web Apps” is an umbrella term for modern, performant web apps that cleverly take advantage of technologies like web manifest, service worker, responsive web design, etc. to provide a top-tier experience on mobile.

Web Starter Kit has:

2015-12-03 11_41_35

Deployment

If you would like to deploy your WSK project to Firebase, Google App Engine or another provider, guides are available to help you get your site pushed.

screen shot 2015-12-09 at 09 44 52

Lowering the entry-level for beginners

We understand that WSK comes with a lot of tooling out of the box and this can sometimes feel a little overwhelming for beginners. This is why in WSK 0.6.0, you can get open up the app directory and serve it up using a Python server, WAMP or any local server setup already on your system. Run an npm install when you feel you're ready for the more powerful BrowserSync setup and build-time performance optimisation tools WSK includes.

Lots of bug fixes

Last but not least, we have added improvements to our build process, fixing a number of in minification, sourcemap generation and much more. Whether you use WSK or not, the Gulpfile remains an excellent reference for how to craft a build process with performance optimisation in mind.

Happy coding!

PS: If you're happy using Polymer, we also maintain Polymer Starter Kit which includes a similar set of features optimised for working with Web Components.

Assets 3
Loading