barbarian meets coding

WebDev, UX & a Pinch of Fantasy

Behold the New JavaScriptmancy.com! Your #1 Destination to Learn Javascript! Necromancer Style!!

| Comments

Ever since I started writing the javascriptmancy books I envisioned a beautiful place in the interwebs where I could place not only the book but a host of interactive resources to learn JavaScript. Behold! JavaScript-mancy.com!!!!

The JavaScriptmancy.com website

At this point you can find all the books that I have written thus far, the value proposition, the backstory, a short bio and most interestingly an interactive sample of the books themselves. Yey!

It doesn’t fulfill my complete vision yet but it is a teeny tiny step in the right direction. Hope you like it!

How to Create a Simple Chrome Extension to Hide Your Follower Number on Twitter

| Comments

Twitter followers.

I know I shouldn’t care, I know I shouldn’t feel bad when someone unfollows me nor overly proud or happy when people follow me but I kind of do.

I suppose it is just human nature and trying to fill that basic need to feel valued and validated… but I will have none of it! Twitter, I shall be driven by intrinsic motivation and not by artificial and arbitrary external rewards!! You shall not control me! (tantrum xD)

Since it seems that I cannot do it by sheer willpower (I have tried), I came up with a better idea. What about removing the source of my troubles completely? Out of sight, out of mind right?

And that’s how this chrome extension and this very blog post came about. Are you curious about how to write a chrome extension to run arbitrary code on any given website? Then follow along!

Barbaric Tip of the Week: Configure Eslint Super Quickly With Eslint Init

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

eslint is a JavaScript linter, a static analysis tool, that helps you find errors in your JavaScript code before executing it and conform to a predefined set of styles for better uniformity. Since JavaScript is a dynamic language this is very useful as it behaves like a lightweight compiler and warns you of common errors as soon as they’re introduced.

I started using eslint because it was the first JavaScript linter that brought a solid support for ES6. It had a small problem though, it was not completely straightforward to setup and configure. I remember the two first times I used eslint I had to scourge the web to try to understand how to get a sane default configuration for my projects. But fortunately that’s not longer the case!

Now you can get started with eslint by installing it via npm:

1
$ npm install -g eslint

And just typing:

1
$ eslint --init

Get started with eslint

You can get your code analyzed and be offered some suggestions, or select popular style guides (like Google’s) or just answer questions regarding your preferences:

Get started with eslint

Awesome right? That’s a nice developer experience right here. So now go forth and lint.

Angular 2 Final Is Out!!!

| Comments

I woke up super early today to watch the live stream from the Angular 2 special event at mountain view and… TaDa!

Angular 2 Final is Out!!

Lots of congrats to the team and everyone involved!

Get Started With Angular 2

If you’d like to know more about the release, take a look at the official announcement and listen to this special episode of Adventures in Angular with info about:

  • Angular 2 final version
  • Angular 2 moves to semantic versioning
  • What to expect from Angular 2
  • The Angular 2 ecosystem
  • CLI, AOT and lazy loading
  • etc, etc

Now there’s no excuse not to get started! :) Take a look at any of these resources and start kicking ass:

I Have a Published a New Book: JavaScript-Mancy Getting Started! Get It Now!

| Comments

I have completed the first standalone book of the JavaScrip-mancy series: JavaScript-mancy Getting Started. First of all. Super mega thanks to Nathan and Andreas for their huge help in reviewing the book.

Behold!!!

a JavaScriptmancy getting started sample cover

Are you a C# developer curious about the awesome things happening in the JavaScript world? Would you like to be a part of it? Build super rich web applications, mobile apps, backend services or even robots? Does JavaScript frustrate you?

Then this is the book for you! With this book you’ll get a great introduction to JavaScript and ES6 from a C# perspective. You’ll learn the most common pitfalls and weird behaviors and end up enjoying writing JavaScript just as much as you do C#.

And it has wizards!

This is the first book of the JavaScript-mancy series. Within its mysterious pages you’ll find:

  • A great introduction to the JavaScript language full of fantasy inspired examples and exercises
  • A detailed look at the new and awesome ES6 features in a historical context, highlighting why they exist and which problems they’re trying to solve
  • A lot of references to C# that will make it super easy for C# developers to wrap their heads around JavaScript and its quirks. (This also extends to developers familiar with strongly typed languages)
  • A breathtaking story of EPIC proportions and awkward sense of humor

For you, dear reader, I have created a time limited coupon so that you can get an awesome 30% discount on the book. Enjoy!! Hope that you love it! There’s a lot of love in those pages.

P.S. Funny thing is that, even if you are not a C# developer, this is an awesome book to get started with JavaScript. If you are into the fantasy theme, take a look at the sample book and see if it is something that you find appealing.

Angular 2 CLI: Bootstrap Your Angular 2 App in a Breeze

| Comments

I have run a couple of workshops on Angular 2 and the most number of issues that prevented (or slowed down) participants from enjoying Angular 2 were related to setting up their development environment. I also get questions often in my blog and mailbox about JavaScript and Angular 2 and there’s a surprising number of them related not to Angular itself but issues with module loading and the dev environment. All of this is because “modern” web development (as it’s often referred to) is not easy.

We have all these awesome new languages and tools that improve our development experience like TypeScript, ES6, SASS, eslint, Karma, etc but they come at a price because the browsers can’t quite understand them or they require additional configuration. So we need that transpilation/automation layer, territory of the so called front-end build pipeline, to do that job for us. And that means that as web developers there’s now an extra skill that we need to learn and master. Indeed if you’ve worked with any sizeable JavaScript project in the past two years chances are that you’ve gone through the non-trivial task of building your own pipeline with grunt, gulp, broccoli or webpack.

Fortunately for us, the Angular 2 team is on a quest to make the Angular 2 ecosystem the most awesome possible. That’s why they are working on a tool that will help you create an Angular 2 app from scratch with all necessary configuration with just three words: ng new my-app.

Angular 2 CLI

The Angular 2 CLI. Sounds interesting?

Updating Your Angular 2 App From RC4 to RC5: A Practical Guide (Also Works for RC6, RC7 and Angular 2 Final)

| Comments

UPDATE 14th Sep 2016: This guide also works for updating your apps to RC6, RC7 and Angular 2 Final.

Earlier this week we got the RC5 release of Angular 2, a version of Angular 2 that “represents the expected public API for our 2.0.0 release, including router and forms APIs” according to Rob Wormald of the Angular 2 team. Yey!

I’ve spent this week updating my getting started series and compiled the most important changes you need to do to update your application from Angular 2 RC4 to RC5 including the new router.

Angular 2 Getting Started

Updating Your Angular 2 App to Use the New Forms API: A Practical Guide

| Comments

Hi! I have slowly continued to update my Getting Started with Angular 2 Step by Step series from the beta to the latest version of Angular which is now RC4. This time it was the turn of the Forms and Validation article where I used what is known as template driven forms.

Again, just like with the router, there are some changes that you’ll need perform to update your Angular 2 app forms to the latest version, albeit at a much smaller scale. I thought it would be a nice to have these updates in the form of a brief and very practical guide and here we are. Enjoy!

Angular 2 Getting Started

Updating Your Angular 2 App to Use the New Router: A Practical Guide

| Comments

UPDATE 14th Sep 2016: Hi there! I have added an additional step to update your router from RC4 to RC5, RC6, RC7 and Angular 2 Final.

This week I’ve been updating my Getting Started with Angular 2 Step by Step series from the beta in which they were written to the latest version of Angular which is now RC4.

I had heard about the router debacle but I wasn’t aware of the massive changes required to move from the router in the beta until I updated the articles. I thought it would be helpful to write a quick, super practical guide while it’s fresh in my head. So if you’ve been postponing the router update until now, I hope this guide will help you.

Angular 2 Getting Started