Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

4 minutes readjavascript

How To Start Writing Your AngularJS Tests In ES6

Sometimes you’re so trapped in the daily grind, getting things done, adding value to your project every day that you don’t feel like you have time to get around and do that teeny tiny improvement that could make your life as a developer so much easier. So you put it in your ever growing TODO-list and you tell yourself, I’ll do it soon, when I have some time to spare. In practice that usually results in never implementing that improvement.

That’s why I like to book 30 minutes a week with myself for improvements, I add it to my calendar and really force myself to follow through. This week I did something that I had been putting off for a long time: Setting up my angular tests with karma so that I can write them in ES6 (the latest version of JavaScript). After I was done it was so easy that I couldn’t believe I hadn’t done it sooner. And now I can enjoy ES6 both in my production and test code. Much less friction than constantly jumping between ES6 and ES5 like I did before.

Read on →
1 minute readbarbaric-tip-of-the-week

Barbaric Tip of The Week: Improve Your CSS Animation Workflow With FireFox Dev Tools Challenger

Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

This week’s Barbaric Tip is the great Firefox Dev Tools Challenger, a super creative way to showcase and teach the latest FireFox support for working with CSS Animations. The new animation panel lets you:

  • Play and pause animations (you can also do this in Chrome)
  • Edit cubic beziers
  • Scrub the animation timeline
  • Great support for working with CSS Filters a.k.a. the instagram of the web
  • Use the eyedropper tool to easily select matching colors (also on Chrome)
  • Rewind the animation timeline
  • Detect obscured animations

Check it out at http://devtoolschallenger.com/.

Dev Tools Challenger

And if you are interested in learning more about Web Animation follow @rachelnabors on the twitterverse and subscribe to her Web Animation Weekly newsletter. Have a great day!

14 minutes readjavascriptmancy

Mastering the Arcane Art of JavaScriptMancy For C# Developers: ES6 Spread Operator

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 More Useful Function Patterns: Multiple Arguments I wrote about rest parameters, a new ES6 feature, that lets you define functions with an arbitrary number of arguments just like params in C#.

The spread operator works sort of in an opposite way to the rest operator. Where the rest operator takes a variable number of arguments and packs them into an array, the spread operator takes and array and expands it into its compounding items.

Let’s find out how this new ES6 feature can help you write more readable code.

Read on →
3 minutes readbarbaric-tip-of-the-week

Barbaric Tip of the Week: Improve Your Visual Studio Web Dev Fu With Web Extension Pack

Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

This week’s Barbaric Tip is Mads Kristensen’s great Web Extension Pack for Visual Studio, a bundle of super helpful plugins that will improve your web development experience and bring modern web development into Visual Studio 2015.

Web Extension Pack

If you are familiar with modern web development you’ll have noticed that it is very command-line driven. If command-line is not your cup of tea, or you just feel more comfortable staying inside the comfortable walls of Visual Studio, then the Web Extension Pack is right for you, since it brings all these modern web development tools right into Visual Studio. The bundle contains:

  • Web Essentials 2015: Epic Visual Studio Plugin that has many small editor improvements, features and shortcuts to make your life as a web developer easier.
  • Web Compiler: A plugin that lets you compile LESS, SASS, JSX, ES6 and CoffeeScript within Visual Studio or MsBuild. (Although you might consider making this a part of your front-end pipeline)
  • Web Analyzer: Get static analysis for JavaScript, TypeScript, JSX, CoffeeScript, CSS right inside Visual Studio.
  • Image Optimizer: Optimize your images for web consumpton. No more serving 3 Mb jpegs!
  • Glyphfriend: Gives you a nice preview of the glyphicons in the most common icon fonts such as FontAwesome, Bootstrap Glyphicons, etc
  • Bootstrap Snippet Pack: Collection of Bootstrap snippets, no more need to browse www.bootstrap.com for code samples xD
  • Open Command Line: This extension lets you open a command line at the root of the project from within Visual Studio. Supports PowerShell, cmd, bash, etc… and provides syntax highlighting, Intellisense and execution of .cmd and .bat files.
  • Package Installer: With the package installer plugin you can easily install packages from the most common package managers right within Visual Studio: Bower, npm, JSPM, TSD and NuGet.

Go Get it now!! :)

And if you are interested in contributing check their repository at GitHub.

22 minutes readjavascriptmancy

Mastering the Arcane Art Of JavaScript-Mancy for C# Developers: ES6 Arrow Functions

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.

It is time to continue upgrading your JavaScript-Fu to the next level of mastery! This time I present to you ES6 arrow functions, a way to bring the beauty of C# lambda expressions to JavaScript.

Read on →