Jonathan Brizio

Building My First Alexa Skill with Node.js

Jonathan Brizio — Sat, 23 Mar 2019 00:00:00 GMT

On the next lines, I would explain shortly what are the concepts that you need to understand before to start developing skills for your own Amazon Alexa device. The idea here is to have enough information to get started.

Requirements

Amazon Developer Account
Experience with Node.js

What’s Alexa?

This is Amazon’s voice-control system. With that, you can control music, create shopping lists or reminders, get instant weather reports, and control popular smart-home products using nothing else that the sound of your voice.

What’s an Alexa skill?

These are apps that give to Alexa devices more abilities that the mentioned before. Absolutely of all kinds. Through the Alexa application, you can incorporate or disable these skills.

What’s AWS Lambda?

AWS Lambda is a compute service that lets you run code without provisioning or managing servers. You pay only for the compute time you consume - there is no charge when your code is not running. This would be our backend that processes the request and returns the data back as a JSON.

Entities involved in the flow

The user who speaks a command
The Echo device, which receives the initial voice input
The Amazon Alexa service, which receives the data from the devices
The backend service which contains the business logic for the skill itself

Well, now that you have all the material needed to start with the development, I invite you to install my latest skill called "Dollar Price". That was an experiment with a public API to obtain the official price of exchange between the dollar and Argentine peso.

Microservices With Node.js

Jonathan Brizio — Sun, 30 Sep 2018 00:00:00 GMT

Microservice architecture is rapidly changing the way we develop our applications. Small, highly decoupled software component is the foundation of this architecture. But hey that’s the theory. Now how can we apply it in our day to day job?

How can we structure our application to unleash the benefit of a microservice architecture? On this presentation, I will show you some points to be in mind before to start with that.

Save time at diary automating recurring tasks

Jonathan Brizio — Sun, 01 Jul 2018 00:00:00 GMT

It’s always fascinating to see how much of the tasks that you do at diary can be automated. In my case, how to a developer at diary I write repetitive commands in my terminal. The most commons are:

Transpile code
Manage local server
Connect to the VPN
View logs

I always recommend to my co-workers create an alias when you write repetitive commands. This is much easier to remind and you save a lot of time at the end of the day.

Uses for aliases

There are several types of uses for aliases. They include:

Reducing the amount of typing that is necessary for commands
Correcting common misspellings of commands
Standardizing the name of a command across multiple OS

Improving your knowledge

If you feel confident with the command-line, I recommend reading the entire guide of Joshua Levy. This is a great selection of notes and tips on using the command-line: https://github.com/jlevy/the-art-of-command-line

Undoing changes with Git

Jonathan Brizio — Mon, 26 Feb 2018 00:00:00 GMT

There is no doubt that git is the best tool that the developers we have. Is really useful to any kind of team, in fact, if you are working alone would be really powerful too. I use this in a diary and each time I discover new commands that bring me more control on the workflow.

Think that you introduce a small change in a determinate branch a few days ago, and you need to revert to the previous state. To make that, you need to write the following command in your shell:

git revert

What git-revert does is create a commit which undoes changes made in a given commit, creating a commit which is reverse of a given commit.

Imagine another case, is common when you start to work with git push by mistake a commit in the main branch:

git reset --soft origin/master

This will rollback your branch to the same commit as origin/master. So the commits are removed but all the files you have changed are moved to staging.

There are three modes for git reset: soft, mixed and hard. Look at the official documentation for an in-depth explanation.

Trigger click when determinate requests finish using AngularJS

Jonathan Brizio — Fri, 20 Oct 2017 00:00:00 GMT

One of the last projects where I collaborate, the requirement has specifically triggered a click in one element of the DOM when determinate requests finish.

After of make a deep research about some solutions and try some of these, the final solution results on apply the $broadcast event on the functions declared and use a counter to validate the last cycle of the calls to trigger the click on the element.

The best way to understand how was implemented this is through the following example:

// Here we declare an empty array to store each request
var requests = [];

// Our first function
$scope.firstFunction = function() {
    // Execute broadcast event with the name of the function
    $scope.$broadcast('requestEnded',requests.push('firstFunction'));
};

// Our last function
$scope.secondFunction = function() {
    // Execute broadcast event with the name of the function
    $scope.$broadcast('requestEnded', requests.push('secondFunction'));
};

// This listener is executed each time that requestEnded is fired
$scope.$on('requestEnded', function(event, countRequests) {
    // Here we validate that the count of requests is the desire
    if (countRequests == 2) {
        // Trigger Click
        $('.class-selector').click();
    }
});

Official Documentation

https://docs.angularjs.org/#$broadcast

Understanding Inheritance in JavaScript

Jonathan Brizio — Thu, 27 Jul 2017 00:00:00 GMT

It’s an important concept that you always should know when you’re working using an object-oriented programming. But when we’re using JavaScript, initially we need to knowing initially that this is language oriented to objects using prototyping instead of classes (often referred to as prototypal inheritance).

The best way to understand this is looking at the following code example:

// Define the constructor Person
function Person(name, age) {
  this.name = name || "";
  this.age = age;
}

// Define the constructor Student
function Student(name, age, courses) {
  this.base = Person;
  this.base(name, age);
  this.courses = courses || [];
}

// Here we apply the concept of Inheritance
Student.prototype = new Person;

On the previous example, we can view the concept of inheritance applied to the Student object. By this way, the new object inherits all the properties of the first object called Person.

Automate tasks with Gulp

Jonathan Brizio — Tue, 08 Nov 2016 00:00:00 GMT

When you start to work or initialize a new project, a good choice is to use Gulp to automatize some common tasks. Using a task runner like gulp allows you to take repetitive tasks and automate them. On the next lines, I will bring 3 advantages of use Gulp in your project:

Easy to use: After of run some commands, you can have all the environment running.
Powerful: You count with more of 2180 plugins available to use totally free.
Easy to Learn: After of read the initial getting started guide, you are ready to run your firsts tasks.

An example of these advantages, is the following shortcode that allows you to run a local server on your computer to test your project:

var gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('webserver', function() {
  connect.server({
    livereload: true,
    port: 8000,
  });
});

gulp.task('default', ['webserver']);

If you’re more interesting in learning about this, I recommend taking at look at the official documentation here: https://github.com/gulpjs/gulp

Pure CSS Image Loader

Jonathan Brizio — Sat, 24 Sep 2016 00:00:00 GMT

Hi, everyone! On this opportunity, I’m sharing with you a little trick with only CSS to show your images with a progressive blur until the image has been loaded entirely. You can view this effect implemented on Medium or Instagram.

I recommend taking at look at the official documentation where you can find how the keyframes work: https://developer.mozilla.org/es/docs/Web/CSS/@keyframes

After of apply the rules on our CSS Stylesheets, the result is the following:

To understand better this, I create a repository on Github. Feel free to fork and improve: https://github.com/jbrizio/pure-css-image-loader

Ask in the comments if you have any questions.

Defining media queries between two widths

Jonathan Brizio — Wed, 21 Sep 2016 00:00:00 GMT

If you are development a responsive website, it’s probably that you need to define some media queries to show correctly your elements. When you like to define a media query in a range, you can use the following code:

/* No greater than 768px, no less than 400px */
@media (max-width:768px) and (min-width:400px) {
    .class {
        font-size: 15px;
    }
}

I hope that this be useful.

Simple jQuery character countdown in textarea

Jonathan Brizio — Tue, 16 Aug 2016 00:00:00 GMT

Looking to build a Twitter-like textarea character countdown to show your users how much space they have remaining? Good. See the below implementation using jQuery:

$(document).ready(function() {
  var maxCharacters = 255;
  document.getElementById('description').onkeyup = function() {
    document.getElementById('characters-counter').innerHTML = (maxCharacters - this.value.length);
  };
});

Easy, right? You can view the full demo of this implementation working on: http://codepen.io/jonathanbrizio/pen/pbYZZy/

Removing and Adding Classes on Javascript

Jonathan Brizio — Tue, 09 Aug 2016 00:00:00 GMT

Adding and removing classes has to be one of the most common tasks when it comes to JavaScript and DOM manipulation.

Element.classList

The classList property returns a token list of the class attribute of the element It comes with a few handy methods:

add - adds a class
remove - removes a class
toggle - toggles a class
contains - checks if a class exists

Demo Example

To understand better this, I create on Codepen a simple example to show you how this works: http://codepen.io/StrengthandFreedom/pen/ZOGVLg/

Why are all programming languages in English?

Jonathan Brizio — Thu, 04 Aug 2016 00:00:00 GMT

Out of 8500+ programming languages recorded, around 2400 of them were developed in the United States, 600 in the United Kingdom, 160 in Canada, and 75 in Australia. In other words, over a third of all programming languages were developed in a country that primarily speaks English. It’s the main cause that the English language is used in great part of the programming.

Another thing, it’s English are the global language that we use to communicate to other people’s.

Stats took from Wikipedia: https://en.wikipedia.org/wiki/Non-English-based_programming_languages

Using BEM Methodology

Jonathan Brizio — Mon, 25 Jul 2016 00:00:00 GMT

On my first post, I will share quickly with you a methodology totally recommend to implement in your projects. Maybe you hear before about that. It’s was suggest to use for one of our members on my team. After of implement, I’m totally on agreeing that this methodology is very useful because allow to have a maintainable code and understand better the structure of our project.

This methodology consists on to follow a few rules to maintain the consistency throughout the entire project. These approaches are the same for all technologies: HTML, CSS, JavaScript, docs, tests, etc.

For a quick started, I suggest to take at look at the initial documentation to understand the key feature of this methodology: https://en.bem.info/methodology/key-concepts/

Get a fake REST API with zero coding

Jonathan Brizio — Mon, 25 Jul 2016 00:00:00 GMT

When you are working on the frontend, sometimes you need to manipulate dynamic data. A few months ago, I discover this great tool on Github https://github.com/typicode/json-server that allows simulating a fake REST API in your App in a few seconds.

After of download the dependencies through npm in your project folder, you need to create a db.json file with the content to use.

Example:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

The last step is run this command in your console:

$ json-server --watch db.json

Now if you go to http://localhost:3000/posts/1, you’ll get:

{ "id": 1, "title": "json-server", "author": "typicode" }

I hope that this should be a help for you in future projects!

Happy coding!