barbarian meets coding

hackerz edition

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!

A Short Study Guide for the 70-486 Developing ASP.NET MVC Applications Exam

| Comments

Last week I passed the 70-486 certification exam yippie!. I gathered a bunch of notes and references while I was studying for the exam that you are welcome to use if you are planning to do it yourself.

If you are also interested in knowing about the process I used to prepare for the exam take a look at How I passed the 70-480 Certification Exam where I describe it (since I did the same things to prepare both exams).

A Brief Update on Angular 2

| Comments

Last week I watched a very interesting Pluralsight webinar where Joe Eames introduced Angular 2 and I wanted to share what I learned from it with you.

A couple (or four) weeks ago Angular 2 went into developer preview with a beautiful brand new documentation and distributions that you can start playing with today. I hadn’t even looked at it to be honest, busy with other stuff, but I had kept my ear out for news and when pluralsight announced a webinar on the topic I thought it was the perfect time to find out more.

This is what I learned:

Angular 2 is in a very early stage of the developer preview, very unstable and it is constantly changing not only in the form and shape of the API but also in its core concepts and naming.

With Angular 2 you get everything you know and love from Angular 1 with a highly improved performance, a simpler mental model with fewer moving pieces and better access to the DOM.

You can build Angular 2 applications in plain ES5 JavaScript but you also have the option to use transpilers and write your angular 2 apps with TypeScript, ES6/ES7 (traceur, babel…), CoffeeScript, etc.

The whole development story changes from using a standard MVC approach to a more componetized development where you have independent components and each has its template and underlying view model (like in aurelia). The components themselves are just ES6 classes that expose APIs to be bound to templates (no more $scope variable).

Angular 2 uses ES7 decorators to provide metadata to your components. They work sort of like attributes in C#. If you use ES5 to write your angular apps there’s alternative APIs to define this metadata. This is an example of a component from Joe Eames’ code sample on GitHub that can give you an idea about how the new component model looks like:

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
28
29
30
31
32
33
// ES 6 module imports
import {Component, View, For, If, EventEmitter} from 'angular2/angular2';
import {Inject, bind} from 'angular2/di';
import {todoItems} from 'services/todoItems';

// component metadata (element and dependencies to inject)
@Component({
    selector: 'todo-list',
  injectables: [bind('todoItems').toValue(todoItems) ]
})
// view metadata (template and used directives)
@View({
    templateUrl: 'components/todo-list.html',
    directives: [For, If]
})
// an ES6 class
export class TodoList {
  constructor(@Inject('todoItems') todoItems) {
        this.items = todoItems;
    }
    setCompleted(item, checked) {
        item.completed = checked;
    }
    completeAll() {
    var that = this;
        this.items.forEach(function(item) {
            that.setCompleted(item, true);
        });
    }
    removeItem(item) {
        this.items.splice(this.items.indexOf(item), 1);
    }
}

There is some interesting new notation for writing bindings within the html templates (*for instead of ng-repeat, *if instead of ng-if, binding with [attribute] and (event):

1
2
3
4
5
6
7
8
<div style="margin-bottom:10px">
    <h1>To Do</h1>
    <div style="padding:5px" *for="var item of items">
            <input type="checkbox" #chkbox [checked]="item.completed" (click)="setCompleted(item, chkbox.value)">
             <a class="glyphicon glyphicon-remove" (click)="removeItem(item)"></a>
    </div>
    <button *if="items.length > 1" class="btn btn-xs btn-warning" (click)="completeAll()">Complete All</button>
</div>

The IoC story looks like is more explicit and less convention-over-configuration based although I have no clue how it will look in the final version:

1
2
3
4
5
6
7
8
9
10
// extract from previous example with IoC fragments
@Component({
  injectables: [bind('todoItems').toValue(todoItems) ]
})
// an ES6 class
export class TodoList {
  constructor(@Inject('todoItems') todoItems) {
        this.items = todoItems;
    }
//...

You can start testing the developer preview by downloading the source code at code.angularjs.org (look for the 2.0.x and alphas). In terms of good editor support, there is sublime text that has great plugins for ES6 and ES7, Web Storm, and even Visual Studio Code or Visual Studio if you want to try Angular 2 with TypeScript.

Watch the full webinar with much more interesting information and examplesin youtube:

And here you have the announcement of Angular 2 at ng-conf 2015:

I don’t know why people were so jumpy about breaking changes, this is looking gooood! Hope you enyojed the article! Have a nice day! :)

References

For more information about Angular 2 take a look at:

Mastering the Arcane Art of JavaScript-mancy for C# Developers - Chapter 4: More Useful Function Patterns - Multiple Arguments

| 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.

Time for some more useful function patterns in JavaScript!

In this article I’ll show you how to handle multiple parameters – the equivalent to params in C# – in the current version on JavaScript (ES5) and in the upcoming ECMAScript 2015 that brings great support for multiple parameters with the rest parameter syntax.

JavaScript-Mancer Level 90

Mastering the Arcane Art of JavaScript-mancy for C Sharp Developers - Chapter 3: Useful Function Patterns - Default Arguments

| 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 next few articles of the javascript-mancy series I will detail several patterns you can use in JavaScript to achieve default arguments, multiple arguments and function overloading.

We’ll start with how to use default arguments and values in JavaScript both with the current version on JavaScript (ES5) and the upcoming ECMAScript 2015 that brings native support for defaults.

JavaScript-Mancy

Barbaric Tip of the Week: Saving Your Session for Later in Vim

| 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.

I started my machine, opened the command line, ran vim and opened my weekly planning, project notes and overall work checklist as I usually do, in the exact window configuration that I usually use, which my weekly planning window on the left, and job checklist and project notes stacked on the right. Everything was the exactly the same as the previous 999 times, everything but for one thing, this time a thought sprang to my mind: Wouldn’t it be awesome if I could save this file/window configuration and just load it at all once?

Well… That was about time… there is indeed a way to do that… :)

You can save your complete session in vim, that is, the files you have opened with the specific windows or tab configurations that you’re using, with the :mksession command:

1
:mksession ~/jobsession.vim

Later, the next time you open vim you can load that session with :source:

1
:source ~/jobsession.vim

Or alternatively open vim directly with a specific session by using the -S option:

1
> gvim -S ~/jobsession.vim

Voilá! Enjoy!

Bonus tip: Did you know that you can also resize windows with the :resize command? You can use :vertical resize <numberOfLines> to resize a window’s width, and :resize <numberOfLines> to resize its height. Cool right?