barbarian meets coding

WebDev, UX & a Pinch of Fantasy

A Look at Object Internals and the Secret Lives of Objects

| 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. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

So far in this series we’ve focused a lot in how to work with objects in JavaScript and about different paradigms of object oriented programming that are supported in this beautiful language. In this and the upcoming articles we’re going to do something different, we’re going to dive into the inner workings of objects and different metaprogramming techniques that will give you more control over how you define and operate them: the ES5 Object APIs, ESnext decorators, ES6 Proxies and the ES6 Reflection API.

Follow me as we dive into the depths of object internals in JavaScript and unveil the deepest secrets of objects!

Building Beautiful Web Apps With Angular Material - Part II

| Comments

This is the second part of a beautifully crafted narration inspired by a talk I did at Swetugg 2017 on Angular Material. Missed the first part? Go here

In the first part of this series we talked about the importance of aesthetics and how beauty improves user experience. But building beautiful apps is kind of hard so it’s nice to get some help from awesome visual languages like Material Design and libraries of components like Angular Material. Angular Material brings all the awesomeness of Material Design to your Angular apps. It provides numerous components that work seamlessly with Angular and which can both boost your productivity and let you create truly beautiful web apps.

To showcase some of the components that you have available today, we are going to build this dating app: Derek Zoolander’s Center for Models Who Can’t Find Love.

Angular material sample app

Let’s get started!

Building Beautiful Web Apps With Angular Material - Part I

| Comments

This is beautifully crafted narration was inspired by a talk I did at Swetugg 2017 on Angular Material

Why is “Beautiful” important? Why is beauty Important?

Think about someone in your life that you find attractive. And don’t just think about him or her, close you eyes and visualize that person in your mind (ok now you can’t read, this worked better in a talk, open your eyes! Good, hi!). Think about how you feel around that person and how you usually interact with him or her. Are you happier around that person? Are you always willing to help him or her? When he or she makes a mistake, aren’t you all smiles and quick to dismiss it?

Malin is beautiful <3 <3 <3

Or think about a beautiful product you love. For instance, think about your iPhone or your Google Pixel. Think about it’s luscious form, its awesome and bright high definition screen, its weight on your hand, the softness of its case, how does it make you feel? How do you interact with a beautiful iPhone as opposed to that ugly and bulky Nokia 3210 – weapon of mass destruction – that you used to have aeons ago?

Or think about your favorite app or website. Flipboard is one of my favorite apps and it’s been for a while. It provides an awesome experience for reading articles. What set it apart from other similar apps was its beautiful design and aesthetics. Is there any beautiful app that you love using? How do you feel when you’re using this app as opposed to other similar apps?

So Why is beauty important? Because beauty improves your User Experience.

Come Say Hi at Swetugg 2017 and Learn Some Angular Material

| Comments

Hi!

Can’t believe that January has gone by so fast. Just in a little bit more than a week I’ll be speaking at the Swetugg conference about how you can build beautiful apps with the new Angular Material. If you are going to the conference then don’t hesitate to join me! It’ll be awesome! If you live in the Stockholm area or are passing by this beautiful city then consider coming to the conference, there’s a ton of great talks and speakers in 4 tracks and 2 days.

Swetugg 2017

Oh! And if you see me around, please say hi! I’d love to hear how you’re using Angular or talk about anything that you’re doing really.

If you can’t come then don’t worry! I’ll be writing a series of articles and doing some recordings so you can enjoy and learn more about Angular Material at your own pace.

Hug! And have a wonderful day!

Barbaric Tip of the Week: Learn Functional Programming in JavaScript With Professor Frisby

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

20th of December… 2016 is drawing to an end… If you are like me you’re already freaking out about all the things that you wanted to do but didn’t. Was, by any change, learning more about functional programming one of those new year resolutions you had last year? Or something you just became more interested in throughout 2016 but you never got around to? Then today is your lucky day because I have something for you that will let you finish 2016 strong or start 2017 with great footing: The marvellous Professor Frisby Introduces Composable Functional JavaScript course.

Brian Lonsdorf brings his Professor Frisby’s Mostly Adequate Guide to Functional Programming to life in these series of great videos on functional programming available as a free course on egghead.io.

Learn JavaScript FP with Professor Frisby!

The video course is only an hour a half long with a very pragmatic approach driven by code samples. I recommend following along with your own session of jsbin or jsFiddle and tinker with the examples yourself. Hope that you enjoy it! Have an awesome week ahead!

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: