Do you actually know how to measure how good or how bad your unit tests are? It can be subjective sometimes, can't it? 🤔

One can say their tests are good because they cover all the lines of code as well as all the methods in the class. However, assessing the quality of a unit test is not only about how much it covers, there are other elements involved.

I believe writing unit tests is like writing any other code, each person will do it differently, apply their personal preference in terms of how they organise it, how they describe the scenarios, etc. So, it is a subjective matter.

BUT there are some good practices we all can follow to make our tests better. I've summarised a few items I always try to keep in mind when I'm writing my own unit tests.

Some months ago I took the journey to write my first ebook about something that I feel can be valuable for people who are interested in a subject that is really important in any decent project: Unit Testing ✅.

The idea behind this book is to give developers some important directions on how to write unit tests.

What to test, How to test and When to test are the questions I try to answer and explain in an easy way. And most importantly, I try to do that regardless of platform/language, because the concepts of unit testing is in fact platform independent.

Apart from writing I have also been doing all the art for the ebook, which is something I also enjoy doing and am learning a lot.

Now I'm writing this blog post to give access to some Free chapters of this ebook! 📖 🎉

The ebook is not complete yet, but you can start reading before anybody else and I would really appreciate your feedback and suggestion to make it better.

If you are already subscribed to my blog, you should have received an email with the link to download the sample chapters.

If you are not in my list, please register below and I'll send you the download link.

Firebase is a good platform for storing JSON data. One downside though is having to use their SDK to save/update/retrieve/delete data instead of using REST standard. It means integrating it with AngularJS or BackboneJS for example is not completely transparent.

OpenWS on the other hand provides REST API, it means you can use POST, PUT, GET and DELETE methods and also have the standard URL resource-naming convention, making it easy to integrate any webapplication with OpenWS.

Technologies Used

OpenWS webservice is built on NodeJS and Express running on heroku hosting. All the data is persisted in MongoDB which makes it easy to work with schema-free JSON objects. And for the landing page/web application, I used Angular JS.

Compatibility

OpenWS can be used with any platform. It works great with AngularJS, EmberJS and BackboneJS. Also it's a great fit for Mobile developers.

Conclusion

If you're a frontend developer and have a side-project that needs to persist some JSON data, give OpenWS a try and you will check for yourself how much time you will save and how easy it is to use it.

If you're like me who always end up using for loop to do any operation involving arrays, you should probably have a look below at some "hidden" methods available in ECMAScript5 (the current version on Javascript) to work with Arrays.

I say "hidden" because these functions I'm going to show you are available for a while in most of the browsers but most of the people haven't heard about them or haven't used them yet.

Below are some functions ordered by how frequent I'm likely to use them.

forEach - Iterates through every item in the array and do whatever you need with each item.

Conclusion

Although they're handy, one downside of using these methods above is that they may not be available in some old browsers, this might be one of the reasons they didn't catch on.

In case you need to support IE8 for example, I'd suggest you taking a look at Lo-Dash utility library, which provides all of the features listed above and also support older browsers.

]]>

Last weekend I launched an open-source javascript library to help other front-end developers to easily implement browser title notification. This is the TitleNotifier project page if you want to check it out.

This is a lightweight library (less than 3kb) and dependency-free, it means you can implement in any webpage,

Last weekend I launched an open-source javascript library to help other front-end developers to easily implement browser title notification. This is the TitleNotifier project page if you want to check it out.

This is a lightweight library (less than 3kb) and dependency-free, it means you can implement in any webpage, it doesn't matter whether you use jQuery or not. I feel that there are no reasons for such a simple library to be jQuery dependent.

TitleNotifier.js has a very simple and intuitive API, it has only 4 methods. So it couldn't be easier to get started. In the github page you can find the Getting Started guide and in the project page you can see the live demo.

For this project I decided to use Evidence.js for javascript unit testing, since I saw a few other well-known open-source libraries relying on it. It's unfortunate that evidence.js has not been updated for years (the last commit was in 2009). Later on I noticed qunit seems like a good alternative for javascript unit testing. Both of them are lightweight and simple to use for small projects. And you, what unit test framework would you recommend me?

If you have any suggestions for improving TitleNotifier, please feel free to fork it and make a pull request with your changes.

]]>

Asset Pipeline has become popular thanks to Ruby on Rails which implements it nicely out of the box. In this post I will explain what an asset pipeline is, how you can easily implement it without using Ruby on Rails and why you should consider using it in your webapp.

Asset Pipeline has become popular thanks to Ruby on Rails which implements it nicely out of the box. In this post I will explain what an asset pipeline is, how you can easily implement it without using Ruby on Rails and why you should consider using it in your webapp.

What is Asset Pipeline?

Asset Pipeline is the name given to the way we serve static files to web applications. An asset pipeline can do many things to our files before they are served. Below are the most important and most used actions we can perform on static files.

Javascript

Concatenate many JS files into one;

Compress;

Uglify;

Minify;

Compile CoffeeScript into JS.

Stylesheets:

Compile SASS into CSS files;

Concatenate files;

Minify;

Images:

Optimize;

There are many ways to implement the tasks above. You could perform these tasks manually whenever you change any file (which is not a good idea) or you can use task runners to automate them, such as Grunt or Gulp.

Implementing an Asset Pipeline in Gulp JS

As I mentioned above, Gulp is a task runner and it can automate many things for you. In this post I'm going to use it to automate the necessary tasks to build an asset pipeline.

The complete code can be found here. In order to run it in your machine I recommend you to git clone the project and install the dependencies by running:

$ npm install

* Assuming you have node.js installed

Now let's take a look at gulpfile.js. This is the most important file in Gulp, where everything is defined.

We start off by declaring all the plugins we're going to use in our tasks. There are plenty of plugins available for almost any task you need.

The gulpfile.js is composed by one or many tasks, basically you need to create a task for anything you need to perform, like compiling a coffescript into javascript. One task can call one or more tasks.

Let's name our first task scripts. This task will compile our coffeescript files into javascript, minify and uglify it. After that all files will be concatenated into all.min.js and then it will be placed into dist/script folder, ready to be included in your HTML file.

Those are the three main tasks we need in order to have an asset pipeline. And after defining the tasks, how do we run them?

To run any task we we go to the terminal and type gulp <task_name>.

$ gulp scripts

$ gulp styles

$ gulp images

Is there a way to run them all at once?

Yes, we can do that by creating a default task:

gulp.task('default', ['scripts', 'styles', 'images']);

Now you can run it with the following command line. When it's finished, take a look at the processed files generated in dist folder:

$ gulp

Lastly, if you want to run all of these tasks for whenever you change any Javascript, SASS or image, you can define a gulp.watch. The code below will fire the proper task in case you change any file. This is particularly good for development environment.

Why you should consider using an Asset Pipeline in your project?

To me one of the best aspects of the asset pipeline is that I can write my JS files in pure javascript, coffescript or both and I don't need to worry about compiling coffescript into javascript, compress it or minify it. The same applies to CSS, because I can use SASS to write my stylesheets and get it processed into CSS automatically. That's really great and doesn't slow down the development time.

The next-generation of javascript also known as ECMAScript 6 (also called ES6 or Harmony), is bringing us lots of amazing features that you probably will need to know. But instead of you spend too much time learning and researching all of the features I separated a few that I felt

The next-generation of javascript also known as ECMAScript 6 (also called ES6 or Harmony), is bringing us lots of amazing features that you probably will need to know. But instead of you spend too much time learning and researching all of the features I separated a few that I felt are the ones you'll be probably using in your daily basis.

Don't worry if you are new to javascript or you're coming from a server-side language, I believe this is the best time to learn it as ES6 has a much cleaner and friendlier syntax, known as sugar syntax.

Sugar Syntax

First of all, Syntactic Sugar is a syntax that make a language easier to understand and more readable, it makes the language "sweeter" for us. It also means that some "new" features of ES6 are not really new because ES6 is trying to simplify the syntax to make things easier for us. So instead of writing the your code using the old tricky way, you'll be able to code in a the simpler way, with sugar syntax.

Look below the sugar syntax in action to create a class in Javascript.

Classes

Always remember: Javascript does not support classes like other Object-Oriented languages. Instead, Javascript can simulate classes using functions and prototype.

Below is the new syntax to create classes. You will feel familiar to this way if you come from a Java background or other OO language.

All the methods you declare in a class will be added to the prototype of the class.

Inheritance in ES6 and Prototype:

As said before, javascript does not support classes. So, if it doesn't support classes, does it support inheritance?

Yes, inheritance in javascript is possible via prototype. If you're not familiar with prototype, the good news is that with ES6 you don't necessarily need to know it to get the benefits of classes and inheritance. prototype is not hard to learn but for the purpose of this post you can understand prototype as the way javascript implements inheritance.

This is how I would create a subclass of Project, called WebProject and inherit the attributes and methods from Project.

Notice that in my WebProject constructor, I invoke the Project constructor and then I can make use of its attributes and method.

Modules

If you don't want to leave all of your javascript in just one file or you do want to re-use some functionality in other parts of your application, you'll probably want to use modules. The magic keyword you need remember is export. Use export before the function you want to expose and you're done.

This is the structure of our app. The Project and the WebProject classes are stored in application.js.

let

Notice that, unlike Java or many other languages, any variable created inside a function in Javascript it is hoisted to the top of the function. It means no matter where you declare the variable, it's the same as if you declare it at the top of the function. This behaviour is called hoisting.

In this case, as let is referencing a previously declared variable, the value "Rafael" is valid only inside the block. Outside the block the value of name is "Hey".

In summary, var is function-scoped and let is block-scoped.

const

The ability to create constant variables is something javascript was missing for a long time. With ES6 you'll be able to create constants and make sure its value won't be changed during the application execution.

The syntax for creating constants is as follow:

const SERVER_URL = "http://frontendjournal.com"

Other interesting features

ECMAScript 6 also brings these amazing features you might want to take a look: Map, WeakMap, generators and Proxies.

Some ES6 features is also available in Node JS. Check out Alex Young's blog post on ES6 for Node to get started.

Conclusion

The next-generation of javascript will bring a simpler and friendlier syntax helping the learning process for developers coming from other OO languages. The main problem I see now is that it's gonna take some time until we can use ES6 extensively in all major browsers.

Now, for server side development using Nodejs, ES6 is already a reality as many features are already present in V8.

PS:Leave a comment saying what's your opinion on the next-generation javascript and what you thought about this post.

]]>Imagine the situation where you have a single-page app. You start playing around with it and after some actions you decide to click the back button from the browser to go back to a previous state.

Do you think your app is prepared for it?

Dealing with browser history can

]]>http://www.frontendjournal.com/html5-pushstate-and-single-page-apps/c69c99b5-07c2-45c0-9085-476d86664865Wed, 15 Jan 2014 12:00:00 GMTImagine the situation where you have a single-page app. You start playing around with it and after some actions you decide to click the back button from the browser to go back to a previous state.

Do you think your app is prepared for it?

Dealing with browser history can be a headache specially if your app rely on Ajax calls or you have a single page app. Users love using the back button and developers hate it.

The problem with the browser history in Single-Page applications is that the browser is not able to keep track of the states of your application, differently than the traditional multi-page app where every state is usually bound to a different URL.

So what can we do to let users use the back button and at the same time make sure your application won't break?

If your app uses hashbang #! in the URLs for each state, like twitter used to (http://twitter.com/#!/roshiro), you can restore the previous state with some lines of codes in Javascript. However, hashbangs is not a standard to solve the browser history issue.

That's where HTML5's pushState comes in. Check out a simple example to see how to use pushState feature.

Suppose you have an application to control your restaurant, the code below is the menu. For every plate you click on, its name will be displayed, the URL will be changed and we will store the state of that URL in the browser history.

It's important to notice that the URLs don't need to exist, these "fake" URLs are just a way to link the history entry to its proper state. Then, if you click the back button from your browser, the onpopstate event will be fired which in turn will access the history API and access the stored state and do whatever is necessary, in this example display the name of the plate.

onpopstate is fired every time the active history changes.

pushState takes 3 arguments, a state object, title (which is currently ignored) and URL.

HTML5's pushState is great and I see it as a much better and more elegant alternative to hashbangs (#!), which sounds more like a workaround for browsers that don't support HTML5. So next time you need to manipulate the history of your app, don't forget to consider using the html5 history API.

I started the habit of looking up what's trending on GitHub every morning before start to work and it's shown me very good benefits. I can see what people are using and interested in out there. I usually tweet the projects that really seems interesting and worth following, so if

I started the habit of looking up what's trending on GitHub every morning before start to work and it's shown me very good benefits. I can see what people are using and interested in out there. I usually tweet the projects that really seems interesting and worth following, so if you want to know what I have found so far, particularly the ones related to Front-End development, find me on twitter.

One project that caught my eyes recently is RethinkDB, a NoSQL database that stores JSON documents and as they say on their website it has an "intuitive query language, automatically parallelized queries and simple administration". I really like how easy it is to query data and how it handles JSON docs.

I created a simple REST web service using Node.JS and Express to persist schema-free JSON data in RethinkDB so that I can have a taste of how easily I can integrate this database with javascript. I put this web service up in GitHub, so feel free to clone and play around with it. Below I explain a how this web service (crud_ws) was built.

]]>
Have you always heard about closures but never knew clearly how it works?

Don't worry, closures is not a complex concept to learn if you break it down into small parts as I'm doing here. What I usually do to keep things in my mind for good is to sketch

]]>http://www.frontendjournal.com/closures-probably-the-simplest-way-to-learn-it/d28a24bf-5651-4eb5-8c90-81a9d2a4e63aFri, 26 Jul 2013 11:00:00 GMT
Have you always heard about closures but never knew clearly how it works?

Don't worry, closures is not a complex concept to learn if you break it down into small parts as I'm doing here. What I usually do to keep things in my mind for good is to sketch up a mind map. Yep, a mind map like this one above that has the central subject in the middle and several branches off it. Each branch is a small part of the central subject and this drawing you see is similar to how our brain store information, therefore, it's a great way to study things.

After this small introduction to mind maps, let's start with this interesting subject: closures.

First of all, what's a closure?

Sorry, but there's no simple definition for that. I personally find the definition of closure harder to explain than the to implement it. My attempt to define closure would be:

In simple words, closure is the scope created by a function which encloses variables and other functions creating a separate "environment".

Look at the code below, this is an example of closure. Yes, a simple function called myClosure() with a local variable a defined in it and a var a declared outside the my function. Note that when we execute that code below, the variable a inside the function is protected from the outside, because myClosure function is enclosing the the local variable.

Note that inner() has access to all outter variables (a and b) by reference, it means if we change the value of b for example, inner() will automatically get the new value.

2. Variables Outlive After Being Returned

That's a pretty exciting use of closures, check this another example and an interesting use of it. In the code below, when myConcat() is executed it returns a function enclosed in a scope, prefix is also enclosed. With that in mind, sayWelcomeTo and sayByeTo are two closures with different environment from each other.

This example above shows us that closures keep the state of variables when the function was defined.

To make it more clear, look at the screenshot below showing how you can easily see the closure scope and local scope when debugging in Chrome. The closure keeps the value "Welcome" from the time it was created.

3. Emulate Private and Public Methods

This is an emulation because javascript doesn't have this access modifiers (private, public) like Java does, but with closure we can do something similar. This way of having private and public methods in javascript is also known as "module pattern".

So let's say you need a javascript code to make mathematical divisions (Ok, this is just to illustrate). To do that let's create a module with all necessary methods and make them public or private according to what we need to expose and what we need to hide.

In the example above isDivisorZero() is a private method because it's not in the return statement. See below how we exposed just the doDivision() method, everything else is private.

What made this possible is this notation below:

// This notation below makes the function be immediately executed and a closure is created.
(function() {
})();

4. Closure and Loops: Caution here!

Always remember that closures keep the reference of outter variables instead of value. This piece of advice can be particularly important in loops with closures because if you don't take that into account, something like this can happens.

The code above was meant to show an alert box with the colour that was clicked on. But instead what we get here is an undefined, do you know why? Because the alert() is using the variable i by reference and by the time we click on any link the variable i will have the value 3 for all the links.
See this code live: http://jsfiddle.net/rL4su/

What we can do to fix it is to store the value o i in a separate closure for each link so each link will have its proper value. Below is the correct code:

P.S. I used mind maps for the first time when I was studing for an SAP Netweaver Java Certification, which was a subject totally obscure to me at the time. That map was much bigger than this one from this article. If you're intested in seeing it, let me know in the comments and I can show you.

P.P.S. If you like this post, don't forget to join my mailing list below to receive future posts in your inbox.

]]>

This picture above is from my notes taken from technical interviews I've had lately. If you're a frontend developer this post may be of your interest.

Even senior javascript developers can be trapped by some of the questions asked by interviewees. So even if you can code comfortably in your

This picture above is from my notes taken from technical interviews I've had lately. If you're a frontend developer this post may be of your interest.

Even senior javascript developers can be trapped by some of the questions asked by interviewees. So even if you can code comfortably in your computer with the help of google, there are some concepts that are always good to have in mind when you're about to face a technical interview.

The idea here is not to go through the questions and look for the answer. The idea for this post is learning instead, because doing that you'll be prepared for any variation of those questions or if you're not going to face an interview, just to review what would be your answer and leave a comment.

For every question there'll be a brief explanation and some examples.

Let's start with the Javascript questions

1. How can you declare a class in Javascript?

In javascript there's no classes like in Java, what we actually call a class is in reality a function simulating a class behaviour. For being so flexible, there are many ways to create a class in javascript, below you'll find 3 ways of doing that.

In this example we don't use a function to define our class, we are creating a singleton object person with one attribute and one method. You can use that object straightaway, no instantiation in this case.
That notation is useful when you don't need to create instances of that class or you'll use it just once in your application.

As you can see in the code snippet above, we have a function like the first example and besides we also have the new keyword before the function declaration. It means that we are creating one instance of that class at the same time we are declaring it.

2. How would you organize your Javascript code?

The following pattern is the one that I personally prefer and is called 'module pattern', where we separate our javascript into logical modules, or namespaces. What you'll see below is an example of how I would separate my user module.

Some explanation on the code above

Take a look at the previous code and notice how I create my module using the notation below. It makes the function to be executed immediately because of the parenthesis at the end of the command. The result of the execution will be an object which will be set to my variable myapplication.usermodule.

So applying this pattern to your code you may have multiple modules and you have the control over what you want to make public and what to keep private. Besides your code will be more organized therefore easy to maintain.

3. Difference between and =.

This is pretty simple but at the same time some people never came across a triple equals or never wondered what's the difference.
Double equals == is used to compare the value of two operands:

"2" == 2; // true
2 == 2; // true

Triple equals === is used to compare the value AND type of two operands:

"2" === 2; // false
2 === 2; // true

4. Difference between null and undefined

This can be tricky and the best way to keep in your head is to memorise because if you try to relate javascript null to other languages, it will get more confusing.
In javascript, null is an object with no value and undefined is a type.

typeof null; // "object"
typeof undefined; // "undefined"

var a;
var b = null;
a == b; // "true" because their values are the same
a === b; // "false". they have different types

5. Have you already used MVC before? What you like/dislike about it?

As the UI gets more and more complex we need some good ways to keep it more and more maintainable and reusable, and Some MVC frameworks for javascript have been widely adopted lately and it's a good plus if you have already used before and knows what's the benefits of them. The most famous MVC frameworks are backbone.js and angular.js, it's hard to not hear about them.

There are many advantages in using these frameworks, I can point out some of them:

Organization: Forces your webapp to follow a well structured pattern;

Maintainable: With organization comes an easy to maintain code;

UI Binding: Some frameworks allow you to do that. So everytime your model changes, the view reflects it and vice-versa;

Decoupled client: MVC frameworks like backbone.js incentivise you to use REST API's though their urlRoot attribute in their Models;

It's worth mentioning that adding methods via prototype is the most inexpensive way in terms of performance since the method is tied to the prototype of the class. It means, for every new instance of class Person, you will have access to the prototype's walk() method. Now, if you declare walk() method inside the Person class, you will end up recreating the method for every new instance of Person.

CSS Questions

1. When would you use CSS float?

Float is used when you want to make an element of your page (usually an image) be pushed to the right or left and make other elements wrap around it.

2. When would you use CSS clear?

When you want an element on the left or right of the floating element not to wrap around it, you can use clear.

3. Have you used Sass? What's good about it?

Every web project starts with everything neat, all CSS is organized in blocks or different CSS files and you know where everything is, right?
Right, until your project gets bigger, deadlines get tight, more developers come on board and someday you notice a strange behaviour in some elements of the page. When you inspect their styles you spot lots of css overrides coming from everywhere. This is the moment you realise how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of code in your stylesheets. This is possible because Sass works with variables, nested syntax and mathematical operations.
In my opinion one of the nicest features of sass is the possibility to write a selector just once and put all styles for that inside it. Do you need a more specific selector under an existing one? Just nest the specifics into the generic one.

Check out the example below taken from their official website. It's awesome how it can "neatify" your code.

Other questions

1. What can you do to improve page performance?

In a nutshell page performance is widely understood as the page load time from the users' perspective, so below are some steps that might improve a page's performance.

Use sprite images whenever possible, try to group small images commonly used in a single file to be requested just once. See how Google uses sprites in Google Maps to make one request instead of one for each small image.

Javascripts should be at the bottom of the page, instead of in the head as we use to see out there;

Ensure parallel requests of your JS and CSS files. In order to force the browser to do that, you can optimize the order you include resources in your page.
This item can generate its own blog post or even a book so I prefer to suggest you a really good reading about it. Check this out, it's the google's best practices on page speed load.

Compress images whenever possible, it makes a difference;

Browser Caching is also very import to be set for static resources like JS and CSS files, images, PDFs and HTML. Caching is set in the HTTP header by informing browsers the expiry date or maximum age. Then browsers can load the last downloaded resource from the cache instead of request it again.

2. What's the difference between HTML and XHTML?

XHTML is an HTML that follows the XML rules, which means a XHTML document must have well-formed markups in order to be rendered properly in all web browsers. Differently from XHTML, the HTML document can be rendered in most of the browsers even with markup errors such as no closing tags or wrong nested tags.

And how do I create a XHTML document?

XHTML is basically a HTML document with some rules that need to be applied. Have a look at these examples below and spot the differences.

<head>
<title>This is head</title>
</head>
<BODY>
This is the body of the document with body tag in capital letters
Notice that there's no close body tag and no tag as well.

This HTML document above can be opened with no problems in Chrome, even containing many markup errors because most browsers can fix them for you automatically.

The code above is a well-formed XHTML document and that's the minimum you must have in order to render it. Notice the declaration of the doctype at the top of the document and the namespace (xmlns) attribute in html open tag. These elements are mandatory as well as all the tags in lowercase.

3. When would you use GET and POST requests?

There are several technical differences between these two types of requests, regarding length limitation, security, caching and a few others. But if someone asks you WHEN would you use it, I'd say one of the most important points that any front-end developer should take into account is that we should only use GET for idempotent requests, it means requests that don't make significant changes in the backend system or database but if you do need to make inserts, updates or deletes in a database, trigger emails or any other major action, POST is recommended.

That's pretty much it that I wanted to share according to my recent interviews and I believe you'll come across some of these questions or a variation of them in your next technical interview.

For years I thought portfolios were Designer's stuff..
but a few days ago something made think differently though.

You wanna know what made me change my mind?

Over the past few weeks I started off my journey looking for a new job, but not for the same role I used to work as. This time I was applying for UI/Front End developer which is something I've been working on for the last 3 years.

I've learned two important thing with this journey and it's worth mentioning here:

1 - There are inumerous job opportunities that require both knowledge of backend AND front end development.

It means the old software developer specialist in just one language like Java, is in less demand. Scary, uh? The world has evolved and the market is fed up with clunky user interfaces.
Even 5 years ago it was common to see people giving no priority to improve the user experience of their applications. Isn't it true? You probably remember those times, don't you?

Today we spend hours and more hours on the UX/UI. We have plenty of amazing webapplications running as services that solve everyday problems so well that there's no chance for poor designed application to compete with them.

So there's no need to mention that Front End development skills are more than important to build a great product.

2 - There's no good portfolio on the web for UI developers.
What do I mean with that?

You find very good online portfolios for designers and web designers, but not a good one for front-end coders. When someone needs to hire a Front End developer, he will probably be willing to check out the candidates' previous works, coding styles, UX knowledge and specific skills.

But I can show all that on my CV, right?

Not exactly. A CV is meant to be a summary of you work experience and list of the skills you have and maybe something more, but this is not a proper tool to exhibit your front end skills.

Let's unveil "The Plan"

I believe there are better ways to do that and that's why I came up with the idea to create my own online portfolio aiming to show some of the relevant projects I worked on, some snippets of Javascript code and the skills I have.

With that in mind I took some time to sketch it up using the awesome Balsamiq Mockups.

One important feature still missing is the GitHub integration, where anyone will be able to see a summary of my activity and repositories I have. I haven't figured out yet a good way to display that information in an easy and straightforward form.

Well that's the plan and while I'm working on that, I will keep posting here the current progress. If you enjoy this post and want to read more about it and other web development articles, enter you email below and I will send you new posts directly to you inbox.