Category Archives: Javascript

Progressive Web Apps install banner

In a previous post I talked a little about creating installable web apps. One important thing that I didn’t cover is how to automatically prompt a user on your web app to add it to their home screen.

Serve over https

One of the requirements for chrome to show an app install banner is that the app is served over HTTPS. This can be done in a few ways depending on your server. I wrote a post on how to get free SSL certificates using Let’s encrypt that should help you get started.

Read more »

Bitwise operations in Javascript

I’ve been doing a few algorithm exercises that deal with binary numbers lately. Since my language of choice for algorithm problems is JavaScript and I had in the past read a little about how JavaScript numbers work, I was really confused to find out that binary operations actually work, since JavaScript numbers are represented with an exponent-fraction notation.

A quick search gave me the answer to this question. When you do binary operations against a number this will be converted to an integer in two’s complement. Another interesting thing is that even though JavaScript numbers are built using 64 bits, they will be converted to 32 bits when doing binary operations. Lets see how these two factors affect our operations.

Read more »

Running Polymer tests with Docker

On a previous post I wrote about how to write tests for polymer components. Now, I want to hook those tests into my automated test suite that runs for all commits in a repo. The problem is that we are kind of in a low budget so we don’t have a selenium grid we can connect to. What we do have is a machine where we have Jenkins installed. Because we run many different jobs in this machine, we usually use docker to keep our environment isolated.

The problem now is that we can’t run polymer tests in a headless browser like phantomjs, because it is not supported. We have to run our tests in a real browser like Chrome or Firefox. These browsers need a GUI to work which docker doesn’t provide, so we have to do a few things to work around this issue.

xvfb

Xvfb stands for X virtual framebuffer. It is a display server that implements the X11 protocol, but does everything in memory, so it doesn’t really need a screen to work. This is exactly what we need. To use it we just need to create a Dockerfile that uses xvfb to run the tests:

Read more »

Testing Polymer components using Web Component Tester

I have started writing some real life polymer components, and I feel really bad that I haven’t been writing tests for them. In this post I’m going to teach myself how to write and run tests for polymer components so I can stop being a slacker and do some proper TDD.

Lets start by creating a little project. You can leave the defaults for the questions asked by npm init:

1
2
3
mkdir ~/test
cd ~/test
npm init

Now, lets setup bower. You can again, leave the defaults:

1
2
npm install --save-dev bower
./node_modules/bower/bin/bower init

Read more »

Uploading to an S3 bucket that contains dots using node SDK

I’m trying to host a static site in S3 using AWS. The problem is that for it to work with a custom domain, the bucket needs to be named like the domain. Domain names contains dots and for some reason they are not supported out of the box in the SDK. I was trying to something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var fs = require('fs');
var aws = require('aws-sdk');
var bucket = 'my.domain.com';

var bucketParams = {
  params: {
    Bucket: bucket
  }
}
var bucket = new aws.S3(bucketParams);

var uploadData = {
  ACL: 'public-read',
  CacheControl: 'max-age=31556926',
  Key: 'somefile.txt',
  ContentType: 'text/plain'
};
uploadData.Body = fs.createReadStream('somefile.txt');
bucket.upload(uploadData).send();

Read more »

UI components library with React and Webpack

I’m looking for the best way to create a UI components library. A few weeks ago I explored React with Radium and I have also considered Polymer. This time I want to explore React with Webpack. I already wrote a guide to using Webpack with React. In this article I’m going to focus on creating a component that bundles not only it’s JS and markup, but also it’s styles.

CSS loader

To be able to declare CSS dependencies for our components, we need to use css-loader and style-loader. Installing them is easy:

1
npm install css-loader style-loader

Read more »

Using Webpack with React

Webpack is a module bundler similar to Browserify but with a different philosophy. Browserify was born with the goal of making it possible for developers to write CommonJS(node code) in the browser. Webpack allows you to write CommonJS but it also allows you to use other formats that might not be supported by node. One thing that makes it interesting is that since it doesn’t try to comply with CommonJS, it allows developers to declare dependencies on files that are not necessarily JS, which can be helpful to create self contained components.

Getting started with Webpack

Lets create a simple React app using Webpack. We can start by creating our HTML entry point:

1
2
3
mkdir ~/webpack
cd ~/webpack
touch index.html

Read more »

UI components library with React and Radium

Creating a UI component library is a common practice nowadays. There are many good examples out there, being bootstrap and foundation some of the most popular as of this writing. Although those are good options for prototyping, there are some reasons while they might not work for big companies.

They need customization to match your company image; If you want to use them for your company you might end up tweaking it so much that it no longer look like the original library.

They are bloated; They are made to meet multiple needs so they include many components that you might not need. Even when you can create your custom build, the components themselves are made for flexibility so they will most likely include stuff you don’t need too.

They are not components; These libraries call themselves UI frameworks, so they are not really component libraries. They usually provide a plethora of useful classes that you can incorporate into your HTML, but there is no really way to say “I want this thing in my page”. You have to do it yourself. Some components they offer also need JavaScript, which means that to use the framework you need to include the CSS and JS and then add the correct classes to your HTML. In a lot of scenarios this is acceptable, but probably hard to scale.

Read more »

Introduction to React

I’m again starting a new project with tools I am not familiar with, and it is exciting. This time I get to play with React. I’ve been wanting to play with React for a while but I got distracted by other technologies. I played a little with Polymer and I liked it so far. I’ve been using Angular for a while and it really annoys me that it is really difficult to componetize. I have heard a lot of good things about react, so I really want to put it to the test.

What is React?

React is more similar to Polymer than to Angular. React Helps create UI components that are easy to reuse. It doesn’t provide a Router, Model or Controller, so you have to take care of those aspects yourself.

Read more »

Writing ES6 with Babel

I’ve been using JavaScript for a few years, and as of today it is my favorite programming language because it allows you to build things really fast. All the JavaScript I wrote in the past was in a version called EcmaScript 5. I know there is works on EcmaScript 6 and EcmaScript 7, but since I work mostly on the browser, I can’t really use it until the browsers add support.

Babel is a ES6 to ES5 compiler. This means that you can write code in ES6 and it will be transformed to something most browsers understand. This is interesting because it allows us to use new features that are not yet implemented in all browsers, but also because it resembles the way software was developed in the past(write, compile, run). The problem with the old programming model is that it could take some time to compile the code, so there was a delay from when you write the code and you can see it in action. For JavaScript the compilation time can be brought down to something fast enough that the developer doesn’t realize the code was compiled.

Read more »