Barbarian Meets Coding
barbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

barbaric-development-toolboxtoolsproductivity

Start Using ES6/ES2015 In Your Project With Babel and Gulp

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

In Automate your front-end workflow with Gulp you learnt the basics of Gulp and how it can help you and your team save precious time by creating and sharing tasks. Tasks that can consist on copying files from one place to another, minifying, bundling, managing depedencies, running tests or transpiling ES6/ES2015 or even TypeScript to a version of JavaScript that is understandable by the browser.

An image of gulp that reads Automate and enhance your workflow with gulp

That’s a common problem in modern web development, you want to get started using ES6/ES2015 and enjoy all the juicy new features but you can’t just switch because not every ES6 feature has been implemented by browsers yet. The solution to this problem is to add an extra step to your build process that transpiles ES6 to a version of JavaScript (ES5) that every browser can understand.

You could transpile on-the-fly using Babel.js but it would destroy the user experience of your website. You could also do it manually every time before you check-in your code into source control but then you’d need to deal with merge conflicts on every commit.

A better approach is to automate the ES6 to ES5 conversion with a gulp task so that you can share it with your team and avoid the annoying merge conflicts. Additionally, your continuous integration and delivery servers could use that same gulp task, so it’s a win-win scenario.

So let’s see how you can get started using ES6 with the help of Babel and Gulp.

Read on →
barbaric-development-toolboxtoolsproductivity

Barbaric Development Toolbox: Automate Your Front-end Workflow with Gulp - Getting Started

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

Modern web development is hard. Depending on your environment, your preferences, needs and goals there’s a thousand and one steps from source code to a production ready application.

You may want to use TypeScript or ES2015 for the obvious development benefits but then you need to transpile either one to a version of JavaScript that can run in the browser. You may want to use SASS or LESS, again for the much better development experience they provide, but then you need to transpile them to CSS as well. You need to manage your third party libraries and reference them in your app, and optimize the size of your images for the web, and bundle, minify your assets, add cache busting, etc, etc.

These are a lot of steps that you probably don’t want to keep in your head or in a checklist somewhere. You want to make them an intrinsic part of your development workflow and automate them so that they are reproduceable and reusable by all the members within your team (and even by the continuous integration and delivery infrastructure).

That’s were Gulp and other popular task runners/managers come in. Gulp helps you automate your workflow, make it explicit and share it within your team by providing an API to create and compose tasks. These tasks could be anything from copying files to a distribution folder, to transpiling ES2015, to removing unused CSS classes, etc. You can either build your own task or take advantage of the humongous community that already exist around Gulp and provides access to any task that you can imagine via plugins.

An image of gulp that reads Automate and enhance your workflow with gulp

Sounds interesting? Then let’s get started.

Read on →

JavaScript-mancy Vlog: Learn About JavaScript Function Scoping, Hoisting and How to Win With Let And Const

This week I continue the JavaScript-mancy vlog with a new episode that starts the secret path of the JavaScriptmancer with an initiation to the JavaScript Arcana: The weirdest parts of JavaScript. In this issue we take a look at some foundational aspects of JavaScript like function scoping and hoisting, and how you can take advantage of ES6/ES2015 let and const keywords to get a similar behavior to C# block scoping.

Enjoy!

Master The Arcane Art of JavaScript-mancy On Video! Waaaat!?

Last week it was swetugg and I kind of promised everyone listening to my talk that I would prepare a video version so they could enjoy all the cool content that I had prepared and which I never got the chance to show (because I am the worst, like the very worst, at keeping things short).

And so, after much sleepless nights, early mornings, experimentation, errors, more errors I got the first video ready! Yey! Hope you like it!

My plan is to release very short focused videos, so expect more videos coming soon.