Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

19 minutes readoop

An Introduction to Object Oriented Programming in JavaScript for C# Developers

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.

JavaScript OOP story is pretty special. When I started working seriously with JavaScript some years ago, one of my first concerns as a C# developer coming to JavaScript was to find out how to write a class. I had a lot of prowess in C# and I wanted to bring all that knowledge and ability into the world of JavaScript, so my first approach was to try to map every C# concept into JavaScript. I saw classes, which are such a core construct in C# and which were such an important part of my programming style at the time, as my secret passage to being proficient in JavaScript.

Well, it took me a long while to understand how to mimic classical inheritance in JavaScript but it was time well spent because along the way I learnt a lot about JavaScript and about the many different ways in which it supports object-oriented programming. This quest helped me look beyond classical inheritance into other OOP styles more adequate to JavaScript where flexibility and expressiveness reign supreme over the strict and fixed taxonomies of classes.

In this series of articles about JavaScript OOP I will attempt to bring you with me through the same journey that I experienced. We will start with how to achieve classical inheritance in JavaScript, so you can get a basic level of proficiency by translating your C# skills into JavaScript and then we will move beyond that into new patterns that truly leverage JavaScript as a language and which will blow your mind.

Read on →
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!

Read on →
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 →