barbarian meets coding

hackerz edition

Barbaric Tip of the Week: Listen to Software Engineering Daily

| Comments

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.

A couple of weeks ago I was navigating the unending currents of the twitterverse and I stumbled upon a new (for me) podcast: Software Engineering Daily!

Software Engineering Daily Logo

It is a super high quality and interesting podcast run by Jeff Meyerson with new episodes every day (crazy) that focuses on a given topic per week. I started listening to it when they had the JavaScript week and he (and his awesome guests) touched various topics such as: the current landscape of JavaScript, TypeScript, React and Flux, Meteor.js, Node.js at Netflix, JavaScript at Spotify, Microservices, a ton of cool stuff indeed. Since Jeff has a very well prepared sets of questions you really get to understand the topic being discussed in just the right amount of detail, even when you are not versed in a particular topic.

You can follow Software Engineering Daily on itunes, twitter as well as in their website and RSS feed.

Great podcast, go learn! And have a great day!

Dev Talk Monday: The Future of Web Development and Learning Functional Programming

| Comments

Dev Talk Monday is the series that brings you awesome dev talks every Monday

Good day cybernauts! It’s time for a filler! :)

Everyday I become more amazed at the quantity of awesome resources there are free and available on the Internets. They are just waiting there to be found, enjoyed, and to help us improve our craft. This time I have started watching some of the talks from this years’ NDC Conference and I wanted to recommend a couple of them (for starters xD).

First we have a vision, a sneak-peak of sorts into the future of web development with Steve Sanderson developer at Microsoft and author of knockout.js. The talk is titled Web Development in 2020 and is a hilarious, inspired and exciting talk about a lot of cool stuff happening in the web development arena:

With just 5 years to go until The Future™ officially starts in 2020, it’s time to pull on your lycra-and-tinfoil onesie, pick out the colour of your hovercar, and consider the technologies you’ll use for your upcoming web projects.

Thanks to a temporal wormhole triggered by a freak SharePoint misconfiguration, I can exclusively reveal the architecture of a web app designed several years in the future. Some of it is predictable ES6/7 stuff - web components, shadow DOM, etc. - but then it gets into metaprogramming, cross-compilation from native code, advanced parallelism techniques, layout *without* CSS, and more.

In this demo-centric session I’ll show you each of these likely upcoming web technologies. Most of them are impossible (or at least downright irresponsible) to use in production web apps today, but seeing them in action will give you a sense of the possibilities that may soon open up.

Next, something more practical and nearer in the future, a talk about the Aurelia framework and how the next generation web apps will look like with Rob Eisenberg its creator. I love this framework for its minimalism, convention over configuration and the fact that it mixes so well will web standards. It feels just like writing vanilla JavaScript!

And to wrap it up we have a new series of videos explaining the basics of functional programming using JavaScript as a medium. They are super fun and hilarious to watch, informative and super clear, Mattias may just be the next YouTube superstar. xD

And that was it for today. Have a great week!

Mastering the Arcane Art of JavaScriptmancy for C# Developers - Chapter 8: Enumerables, Iterables, Iterators and Generators

| Comments

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.

In the last chapter of these series we discussed how you can use LINQ-like functionality in JavaScript with different approaches like the array.prototype methods, ES2015 generators, third-party libraries and comprehensions. I showed you how you can use generators to add deferred evaluation to operating on collections but I never got around explaining what generators actually are. I mean to fix that oversight right now and right here!

Let’s begin at the beginning…

Finally Got the MCSD Web Applications Title Wiii! Also a Study Guide for the 70-487 Azure and Web Services Certification

| Comments

Last week, which strangely feels like a looong time ago maybe ‘cause of the time-distorsion-field of my vacations who knows, I passed the 70-487 certification exam on Azure and Web Services and got the MCSD Web Applications title! Wiiii! Awesome!

That was one of my job/career goals for the year so I’m beyond happy, and I also got to learn A TON along the way, so I’m double-beyond-happy xD.

I wrote another exam study guide with notes and links that may help you if you are considering taking the exam yourself. Here you have all study guides I’ve written thus far:

Up next. Write a friggin’ book! Wish me luck.

Mastering the Arcane Art of JavaScript-Mancy for C# Developers - Chapter 7: Using LINQ in JavaScript

| Comments

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.

What if I told you that JavaScript has LINQ??

What if I told you that JavaScript has LINQ

In the past few articles we’ve looked into functions in JavaScript, we’ve seen how to work with functions and used different patterns and practices. Today we are going to take that knowledge and apply it into the realm of functional programming.

We’ll start dipping our toes into functional programming by taking a look at how we can use LINQ in JavaScript.

LINQ (Language-Integrated Query) is a .NET query language that lets you work seamlessly with collections of objects (and other data sources). It revolutioned .NET by bringing functional programming concepts to the masses and providing an alternative to the prevalent imperative style programming in C#.

JavaScript offers different ways in which we can achieve that same LINQ-style queries: array prototype functions, ES2015 generators, third-party libraries and ES2016 comprehensions.

Let’s take a look at them!

Barbaric Tip of the Week: Ultra-Fast HTML and CSS Editing With Web Essentials and Emmet (ZenCoding)

| Comments

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.

Web Essentials is an awesome Visual Studio Plugin that comes with a ton of goodies to help web developers build great websites. One of these goodies is a port of ZenCoding(now known as Emmet), a plugin in itself that helps you to write HTML and CSS in a super intuitive and fast way.

With Zen Coding you can use CSS selectors to generate a whole tree of html elements from a single line of code. For instance, let’s say that you want to create a list of items. You can type this snippet within Visual Studio:

1
ol>li*5

Press TAB and see how it expands into a complete HTML list:

1
2
3
4
5
6
7
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

And in that same spirit you can use any CSS selector and get the results that you would expect based on CSS selector semantics. For instance:

1
section.spell-book>article.spell*5>header>h1>a[name="spell-name-$"]{spell-name-$}

Would become:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section class="spell-book">
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-1">spell-name-1</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-2">spell-name-2</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-3">spell-name-3</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-4">spell-name-4</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-5">spell-name-5</a></h1>
        </header>
    </article>
</section>

And you can even use custom elements if you are working with Web components, Angular, Aurelia or any other modern web framework:

1
magic-spell-book>magic-spell>header>h1>a[name="spell-name-$"]{spell-name-$}

Would become:

1
2
3
4
5
6
7
<magic-spell-book>
    <magic-spell>
        <header>
            <h1><a href="" name="spell-name-1">spell-name-1</a></h1>
        </header>
    </magic-spell>
</magic-spell-book>

Using ZenCoding (Emmet) With CSS

ZenCoding gives you a lot of help even when you are writing CSS in the form of style abbreviations. If you want to add some margins to a given class, you can use the following abbreviation:

1
m20-10

click on TAB and voilà:

1
margin: 20px 10px;

And there’s a ton more of CSS stuff ZenCoding can help you with:

1
2
3
4
5
6
7
8
9
10
// specify units
m50p
margin: 50%;
fz2e
font-size: 2em
// or colors
c#4
color: #444;
// and you have abbreviations for
// pretty much every CSS property

And It Comes With a LoremIpsum Generator

How many times have you gone off to the web to find a lorem ipsum generator to add some fake content to your website as you go prototyping? Well, do that no more! ZenCoding also gives you a Lorem Ipsum generator that integrates perfectly with its HTML generation workflow. Just type:

1
article>p*2>lorem

And you’ll get all the lorem you need:

1
2
3
4
<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat laboriosam laudantium repellendus nihil quos ipsum vero eligendi dignissimos consequuntur praesentium quasi ullam aut omnis assumenda provident ratione repudiandae debitis soluta.</p>
    <p>Dolore eveniet tenetur eius consequatur reiciendis nisi et magnam praesentium in voluptatum. Incidunt vitae ipsam veniam tenetur corrupti itaque officiis temporibus perspiciatis aperiam ex et alias blanditiis minus harum fugiat.</p>
</article>

Start Learning ZenCoding (Emmet) With The CheatSheet

A very nice way to get started learning the different features available and CSS abbreviations that come with Emmet is to take a look at its Cheatsheet.

And it is Also Available For Other Editors!

Emmet is available, not only in Visual Studio with Web Essentials, but also in other editors that you know and love like Sublime, Atom, Brackets, TextMate, WebStorm, etc and even in online quick prototyping tools like jsFiddle, jsBin or codePen.

So go take a look at it if you haven’t already! Have a nice day!

P.S. Note that although I have used ZenCoding and Emmet almost interchangeably during the article, some features in Emmet are not available in ZenCoding. Particularly CSS abbreviations are not yet implemented in Web Essentials’ port of ZenCoding.

Mastering the Arcane Art of JavaScript-mancy for C# Developers - Chapter 6: Functions in ES2015

| Comments

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.

Welcome back! Today we will make a summary of the different ES2015 features related to functions that we’ve seen and worked with so far in the series: destructuring, default arguments and rest parameters. This will help you to consolidate these new features in your mind and also dive into them a little bit deeper.

We will also take a look at the new arrow function and how it solves the this conumdrum that we discussed in chapter 1 and will end up discussing smaller features like let, const and the spread operator.

ES2015 and functions

Want to Get Stuff Done? Behold!! The Ultimate System to Git-Things-Done!

| Comments

Do you ever feel like you can’t get enough stuff done? That days and weeks pass and you never get around doing that thing that you really want to focus on? Then this article may help you!

Today a great colleague from Active Solution, Evgeny Lukashevich, encouraged me to share my productivity system with you. After pondering about it a little bit on the commute home I thought: Why not? Perhaps it will help someone to get more stuff done and live a more fulfilling and happy life. Who knows? xD I have never ever written about this before… it is definitely going to be interesting…

Learn Some CSS and Stuff With the Redesign of Barbarian Meets Coding

| Comments

Twice have I tried to redesign this blog, and twice have I failed miserably to do it. Yet from the ashes like the Phoenix of old shall I rise and attempt it… one more time.

This time, unlike in the past, I am going to try an iterative approach, I am going to take it in small steps, slowly but sure, changing, re-desining, re-shaping, re-defining and pushing these changes every week. And I thought to myself, why not share it, publicize it, so you may learn as I myself do?

So, the challenge!! Redesign barbarian meets coding within the next 8 weeks!! and most importantly, in a way that it does not suck :). Let’s get to it.

Mastering the Arcane Art of Javascript-mancy for C# Developers - Chapter 5: Even More Useful Function Patterns - Function Overloading

| Comments

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.

In the last couple of articles we learned some useful patterns with functions in JavaScript that helped us achieve default arguments and multiple arguments and we saw how ECMAScript 2015 (ES6) can simplify the way we can incorporate either of these in our code.

Today I will close this section – useful function patterns – with some tips on how you can achieve function overloading in JavaScript. Hope you like it!