
In this tutorial, we'll learn how to automate the build and deployment process of your web application using GitHub Actions. GitHub Actions allows you to automate tasks directly within your GitHub repository, making it easier to manage and streamline your development workflow.

### Introduction

We'll create a GitHub Actions workflow that triggers on every push to your repository. This workflow will build your application, and upon successful build, deploy it to a specified FTP server since there's still a lot of people using a shared hosting.

### Prerequisites

Before we begin, ensure you have the following:

-   A web application project hosted on GitHub.
-   Access to an FTP server where you want to deploy your application.
-   FTP credentials (hostname, username, password) securely stored as GitHub secrets.

### Setting Up GitHub Actions Workflow

1. **Create a New Workflow File**: In your GitHub repository, navigate to the `.github/workflows` directory (create it if it doesn't exist), and create a new file named `main.yml`.

2. **Define Workflow Steps**: Copy and paste the following GitHub Actions workflow code into `main.yml`:

```yaml
name: Build and deploy app
on:
    push:
        branches:
            - main

jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout code
              uses: actions/checkout@v4

            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  cache: "yarn"

            - name: Install dependencies
              uses: borales/actions-yarn@v4
              with:
                  cmd: install

            - name: Build
              run: yarn build

            - name: Deploy to FTP
              uses: kevinpainchaud/simple-ftp-deploy-action@v1.2.0
              with:
                  ftp_host: ${{ secrets.FTP_HOST }}
                  ftp_username: ${{ secrets.FTP_USERNAME }}
                  ftp_password: ${{ secrets.FTP_PASSWORD }}
                  local_source_dir: "dist"
                  dist_target_dir: "yourwebsite.com/optional-directory"
                  delete: "false"
```

### Understanding the Workflow

-   Trigger: This workflow runs on every push to the main branch of your repository.
-   Steps:
    -   `Checkout code:` Fetches the latest code from the repository.
    -   `Setup Node.js:` Sets up Node.js environment with caching enabled.
    -   `Install dependencies:` Installs project dependencies using Yarn.
    -   `Build:` Builds the application using the defined build command (yarn build).
    -   `Deploy to FTP:` Deploys the built application to the specified FTP server using the simple-ftp-deploy-action.

### Conclusion

Congratulations! You've successfully set up a GitHub Actions workflow to automate the build and deployment process of your web application. With this automation in place, you can focus more on developing your app while GitHub Actions takes care of the deployment hassle.

Feel free to explore further customization options and integrations offered by GitHub Actions to enhance your development workflow.


Automating Build and Deployment of Your App with GitHub Actions


> Escrito originalmente en español [aquí](http://frontendlabs.io/2435--que-es-ab-testing).

If you are a web designer, front-end developer, project manager or you have a website you might have heard about A/B Testing, in this post I’m going to explain the basics and see some examples to understand what it is about.

## What is A/B Testing?

In simple words, an A/B Test compares two versions of a website and then determines which one produces better results at leading your visitors to one of your goals.

## Why is it called A/B Testing?

Because we are comparing two options:

![ab simple](blog/ab-simple.png)

As we can see in the image above, we have two similar scenarios in which the variable is the button’s color and it changes from blue to red.

The purpose of conducting an A/B test is to deny the null hypothesis. The A/B testing needs to demonstrate with a statistical significance that the **test** is an improvement over the **control** (there are specialized tools that do the job and I list below).

## Why should I test?

We already know about some web standards that work best for the final user (the search bar should be placed at the top of the website, etc…), but what happens when we want to experiment and try new features or there are new ideas that come up and we have no information about the impact they may cause in our users?

When we test one idea against another this will minimize the risk of failure due to simple problems.

The A/B Testing also solves debates, since it avoids reaching wrong conclusions based on assumptions instead of a resolution to the problem with real users and data to back it up.

## Multivariate Testing

![ab multiple](blog/ab-multiple.png)

## Real example of a successful case

### Electronic Arts

**Goal**: To increase revenue

SimCity 5, one of the most popular EA games, sold 1.1 million copies in the first 2 weeks of its launch. 50% of the pre-orders where digital downloads thanks to a good A/B testing strategy.

![zoom](blog/simcity_original.jpg)

In the left image we can see the **original proposal**, EA launched a promotional offer to reach more game pre-orders. The offer was displayed in a banner placed at the top of the page. However, according to the team, the promo wasn’t increasing pre-sales as expected, so they decided to test other options to see which design or layout generated more revenue.

In the image at the right we have the **variation**, here the team opted to eliminate the promotional banner off the website. The test brought some surprising results: **the variation with no banner generated 43.4% more orders**. Turns out that people just wanted to buy the game without the extra incentives.

The A/B testing gave EA the information needed to maximize revenue in a very effective way.

## Getting ready for the tests

We want to start thinking about what we want to achieve. You can’t compare without analyzing and understanding the analytics first, this will be useful to identify the problematic areas (users are not registering, they abandon the shopping process, etc.).

AB variations are not chosen randomly, we need to take our time to consider the problem by interviewing users, testing, etc. You have to know your audience to know who you are targeting and what your users want and need.

## What to test?

We have to prioritize the tests, this will depend on your goals. For example, if you want to increase the registration number, you could test the registration form length, the fields type, the way your privacy policy are showing, etc. The goal here is to find what is keeping your users from registering to your website. You can solve this by testing the appropriate elements on your site.

Even though each A/B test is unique, there are certain elements that are usually tested:

-   Layout and website style
-   Titles or product description
-   Form length and field types
-   Product prices and promo offers
-   Text amount on the page (long vs. short)
-   Call to action buttons, size, position, color, wording, etc.
-   Images in landing pages or product pages

## Start creating your tests

Popular testing services:

-   [Optimizely](https://www.optimizely.com/) (popular, cheap and with a free basic plan option)
-   [Visual Website Optimizer](https://vwo.com/) (A/B Testing software for marketers)
-   [Google Content Experiments](https://support.google.com/analytics/answer/1745149) (free)
-   [A/Bingo](https://www.bingocardcreator.com/abingo), [Vanity](http://vanity.labnotes.org/) (Ruby on Rails)
-   [Unbounce](http://unbounce.com/) (specialized in landing pages)
-   [convert.com](http://www.convert.com/)
-   [KISSmetrics](https://www.kissmetrics.com/)
-   [Maxymiser](https://www.maxymiser.com/)
-   [Adobe Target](http://www.adobe.com/la/solutions/testing-targeting.html)

## More useful resources

If you’re just starting with this topic you can get some ideas in the following websites:

-   [WhichTestWon](https://whichtestwon.com/)
-   [101 a/b testing tips](http://www.conversion-rate-experts.com/cro-tips/)
-   [Verify App](http://verifyapp.com/)
-   [Crazy Egg](http://www.crazyegg.com/)
-   [Hubspot](http://hubspot.com/)
-   [Usertesting.com](http://www.usertesting.com/)

If you have more resources or comments don’t forget to share below, I’m always trying to improve and keep on learning!


Learning about A/B Testing


> Visita este [link](http://frontendlabs.io/889--automatizar-la-creacion-de-sprites-con-grunt) para la versión en español.

### Why should I use sprites in my project?

Sprites can benefit page speed in several ways. First, if many small images are combined into one large image, the browser will require fewer server connections. Second, depending on how well the large PNG compresses, this can end up saving a substantial amount of bandwidth. Finally, in some browsers it is faster to decode one large image than several small ones.

This is one of [Pinterest’s](http://pinterest.com) sprites.

Let’s imagine for a moment that we need to add a new image in the existing sprite and rearrange the others around it, we would have to recalculate positions for every class in the stylesheet…

Would you like to do that task manually? I’m quite sure I wouldn’t.

Well, worry no more. Today we’re going to learn how to automate this process with a little help from Grunt, if you don’t know what Grunt is you can read [this interesting post](http://24ways.org/2013/grunt-is-not-weird-and-hard/ "Grunt for People Who Think Things Like Grunt are Weird and Hard") by Chris Coyier to get started.

The Grunt task we’ll be using is **grunt-spritesmith**, for the full documentation visit the Github repo [https://github.com/Ensighten/grunt-spritesmith](https://github.com/Ensighten/grunt-spritesmith)

Now let’s set up the file structure to start creating the sprite of our project:
Inside the folder `mi-proyecto` we have `css` (where the stylesheet will be created) and the folder `img` which also contains the `sprites` folders where we’ll place all the separated images that we’ll join later on. (In order to keep this a basic tutorial we’ll only be working with .png images)

The content of the file `package.json` is the following:

```js
{
	"name": "mi-proyecto",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "~0.4.5",
		"grunt-spritesmith": "^2.1.0"
	}
}
```

and the content of `Gruntfile.js` is:

```js
module.exports = function(grunt) {
	grunt.initConfig({
	sprite:{
		all: {
			src: ‘img/sprites/*.png’,
			destImg: ‘img/spritesheet.png’,
			destCSS: ‘css/sprites.css’,
			algorithm: ‘binary-tree’
		}
	}
});

// Load task
grunt.loadNpmTasks(‘grunt-spritesmith’);
};

```

Then we go to the root of our project in terminal and type this line:

```js
npm install
```

It should look like this so far:

The styles and classes are ready to use in the file `sprite.css`

```css
/*  
Icon classes can be used entirely standalone. They are named after their original file names.
*/

.icon-ico_alert {
	background-image: url(../img/spritesheet.png);
	background-position: -93px 0px;
	width: 21px;
	height: 18px;
}
.icon-ico_check {
	background-image: url(../img/spritesheet.png);
	background-position: 0px 0px;
	width: 65px;
	height: 60px;
}
.icon-ico_fb {
	background-image: url(../img/spritesheet.png);
	background-position: -65px 0px;
	width: 28px;
	height: 28px;
}
.icon-ico_google {
	background-image: url(../img/spritesheet.png);
	background-position: -65px -28px;
	width: 28px;
	height: 28px;
}
.icon-ico_mail {
	background-image: url(../img/spritesheet.png);
	background-position: 0px -60px;
	width: 28px;
	height: 28px;
}
.icon-ico_time {
	background-image: url(../img/spritesheet.png);
	background-position: -28px -60px;
	width: 28px;
	height: 28px;
}
.icon-ico_twitter {
	background-image: url(../img/spritesheet.png);
	background-position: -56px -60px;
	width: 28px;
	height: 28px;
}
```

### Do you use preprocessors?

We have the option to generate our styles in several formats (CSS, SASS, SCSS, LESS, Stylus).

To create the stylesheet in [Stylus](http://learnboost.github.io/stylus/), we have to change line 7 of the `Gruntfile.js file and replace it with:

```js
destCSS: ‘css/sprites.styl’,
```

And we run the grunt sprite task again:

This will create a set of mixins in the `sprites.styl file with all the variables needed, for example;

```js
.icoFacebook
	sprite($ico_fb) // the image name is the same as the variable name
	display: inline-block
```

Which compiles in css to:

```css
.icoFacebook {
	background-image: url("../img/spritesheet.png");
	background-position: -65px 0px;
	width: 28px;
	height: 28px;
	display: inline-block;
}
```

We should note that the names of the variables generated in the file `sprites.styl` are the same names as the .png files found in the `img/sprite` path.


Automating sprite creation with Grunt


Sublime Text is one of the fastest code editors that has emerged in recent years. It has a great community that produces a lot of packages (or plugins) to speed up the development of your projects. It supports OS X, Linux and Windows platforms.

If you are not using Sublime Text you can find more information and download version 2 [here](http://www.sublimetext.com/) or version 3 (beta) [here](http://www.sublimetext.com/3).

Today we will see some tips and packages that you might find very useful:

### Shortcuts

All shortcut combinations that come as default with Sublime are in the menu Preferences -> Key Binding – Default

If you want to edit or add a shortcut you have to find and copy the lines of code that you want to customize from the file “Key Bindings – Default” and paste it into the file “Key Bindings – User” from the same menu. Let’s say we want to bind this shortcut “ctrl + alt + c” to comment some lines of code, we would have to add the following lines in the “Key Bindings – User” file:

```js
{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+c"], "command": "toggle_comment", "args": { "block": true } },
```

Other hidden Sublime feature and a time-saver is for copying or cutting lines of code, just place the cursor in any part of your code and press “ctrl + c” (no need to select the entire line) and you’re ready to paste it.

### Packages

In order to use packages you need to install “Package control”, just copy a block of code in the Sublime console (View menu -> Show console) and you’re ready to go. Follow the instructions in [this link](https://sublime.wbond.net/installation).

Once you have Package control installed, you can go to the Preferences menu -> Package Control -> Install Package or use the shortcul “ctrl+shift+p” to start searching any of the packages listed below.

#### [SideBarEnhancements](https://github.com/titoBouzout/SideBarEnhancements)

Adds improvements to files and folders of the Sublime sidebar, you will notice many options such as “Open in browser”, “Rename…”, etc.

#### [BracketHighligter](https://github.com/facelessuser/BracketHighlighter)

The name is self explanatory, it helps a lot to identify the beginning and ending of your lines of code in a much quicker way `[]`, `()`, `{}`, `""`, `''`, `<tag></tag>`.

#### [Emmet](http://docs.emmet.io/)

Emmet allows you to write huge code blocks in HTML at the speed of light, all you have to do is use HTML and css selectors.

#### [GitGutter](https://github.com/jisaacks/GitGutter)

This package shows an icon in the left side of the window, right next to the the line numbers, it shows if a line of code has been added, modified or deleted.

#### [HTMLBeautify](https://github.com/rareyman/HTMLBeautify)

Gives format (indentation) to HTML code making it easier to read.

#### [JsFormat](https://github.com/jdc0589/JsFormat)

This is also a package to give format to Javascript code.

#### [Sublimerge Pro](http://www.sublimerge.com/)

It searches for differences between two files, two branches, revisions, etc., highlighting changes and lines with colors in a very intuitive way. The default shortcut is “ctrl+alt+d”.

### Themes

#### [Theme – Nil](https://github.com/nilium/st2-nil-theme)

#### [Theme – Spacegray](http://kkga.github.io/spacegray/)

#### [Theme – Soda](https://github.com/buymeasoda/soda-theme/)

If you know about more packages or tips for Sublime Text, please leave a comment below.


Sublime Text Packages to speed up your workflow


Este es un primer resumen de las clases del curso [“Interacción Persona-Computador”](http://www.hci-class.org/) dictada por el profesor Scott Klemmer, profesor Asociado de Ciencias de la Computación en la Universidad de Stanford.

### Introducción

En la Interacción Persona-Computador (IPC) lo primero que debemos tener en cuenta es el humano ya que éste es el que hace el uso del sistema y se comunica con los demás; luego tenemos el computador, que es la máquina y la red en la que se ejecuta el sistema; y después la interfaz, que representa el sistema al usuario.

IPC es el diseño, implementación y evaluación de las interfaces de usuario y este curso nos enseñará una serie de herramientas para hacer esto de manera efectiva.

Un buen diseño trae alegría a la gente, ayuda a hacer cosas que nos importan. Una buena interfaz de usuario tiene un enorme impacto en la habilidad de los usuarios para realizar tareas. Un mal diseño, en cambio, trae problemas, frustración y puede incluso costar vidas. Cuando una interfaz se vuelve invisible para el usuario, su manejo es automático y nuestra atención pasa de manipular la interfaz a realizar la tarea, a ésto le llamamos interfaz intuitiva.

### El poder de los prototipos

La idea de una estrategia de creación de prototipos es tremendamente valiosa para el diseño eficaz. Cuando hablamos de prototipo, nos referimos a la creación de una aproximación a una idea de diseño de forma que puedas obtener retroalimentación y aprender rápidamente.

> “Los prototipos casi siempre son y deben ser incompletos”

Los prototipos incorporan hipótesis de diseño y permiten a los diseñadores obtener retroalimentación, hay que tener muy en cuenta este punto, ya que el objetivo de la creación de un prototipo no es el artefacto, sino la retroalimentación que nos permite obtener información con rapidez, ayudándonos a traducir la idea en una interfaz intuitiva.


Interacción Persona-Computador


The University of Pennsylvania is offering a Gamification course through [Coursera](https://www.coursera.org/course/gamification), and this is the first assigment where I share what I’ve learned so far. Here’s the definition:

> You are an employee of Cereals Incorporated, a large manufacturer of breakfast food products. Your supervisor, Madison County, approaches you because she knows you recently took a course on gamification, which she has heard will revolutionize marketing.

> She tells you that Cereals Inc. is about to release a new line of ready-to-eat breakfast pastries, and she wants to know whether to use gamification as part of the marketing strategy. The breakfast pastries will be aimed at the 18-35 age bracket. Surveys show members of this demographic often skip breakfast because they don’t want to eat the typical cereals of their youth, and they are too active to cook their own breakfasts. Market research indicates that the pastries are likely to appeal more to women than men by a 65%-35% ratio. Cereals Inc. has a 35% share of the overall breakfast food market, but only a 10% share of the fragmented ready-to-eat segment.

> Provide as many reasons as you can why gamification could be a useful technique to apply to the situation your manager has presented to you. Explain why these reasons address the specific scenario provided.

Here is my answer:

Gamification could be a really useful technique to apply to this case in Cereals Inc. if used correctly. The main goal of this company is to sell as many products as they can to the target consumers, so the first reason is the creation of a new habit: make people want to have a ready-to-eat breakfast pastries every day. This will be achieved by including elements from games that will encourage consumers to buy the product, have breakfast and have a chance of gaining awards as they do it. Not only they will be satisfying a physiological need (food), but have the feeling that they earn things by doing it. Gamification is very related to psychology and this helps to understand how people form habits and feel progression when they consume and play.

Another reason to use gamification in this company is driving growth, of course! and keep your consumers happy and engaged. Consumers are looking for new ways to entertain themselves and the techniques in gamification will make them feel part of something bigger, it will turn the boring task of having breakfast into something fun or even social, where they can achieve something more than the mere satisfaccion of their basic needs.


All posts

Automating Build and Deployment of Your App with GitHub Actions

Learning about A/B Testing

Automating sprite creation with Grunt

Sublime Text Packages to speed up your workflow

Interacción Persona-Computador

First Gamification Assignment