(Previous step: Managing user's notes) There are some little things we should improve in our application: Home flickering Show errors Cache ajax requests Home flickering Right now, if you reload the page with a user page URL in the browser, you first see the home page and then you're redirected to the user page. When we load the application and the router (PageJS) gets initialized, it checks the URL and invokes the corresponding route handler (you can disable this behaviour if you want to by using the dispatch attribute). As we have configured the default view to be 'HomePage' in...
Ractive.js tutorial - Managing user's notes (5 of 6)
(Previous step: Loading user info) Now we want to add to our little application the ability to create and delete notes for the users we can already see. We will have a collection of notes for every user. We need somewhere to store that notes and, for this tutorial, we'll use Firebase free plan service. If you don't have an account, go and create one. Once you have it, create a new APP from your account page. Now that you have your APP created, take note of its URL, as we'll be using it to integrate our application using Firebase...
Ractive.js tutorial - Loading user info (4 of 6)
(Previous step: Routing) Rigth now our page shows nothing but some labels. The next step is to allow our users to search for a GitHub user and, if it's found, show his info in the specific page. We will be requesting data to the GitHub REST API. These are the endpoints we'll be hitting: https://api.github.com/users/{username}: Get user main info https://api.github.com/users/{username}/repos: Get user's repositories data Polyfills To implement third party integration, we will be usign two new ES2015 APIs which are not already arrived to all browsers, so we need...
Ractive.js tutorial - Routing (3 of 6)
(Previous step: Creating the barebones) Ractive does not have its own routing system becouse it is a library, not a framework, and routing is not part of its goal. In the link above you can see they recommend: Backbone.Router PageJS There is also a Ractive specific router built by Martin Kolarik you can check: Ractive-route As I already have some experience with PageJS I will be using that library for implementing a custom made routing subsystem. User page Right now we only have implemented our home page so let's begin by creating our user page. This page will have...
Ractive.js tutorial - Creating the barebones (2 of 6)
(Previous step: Setting up your environment) Ok, so now that you have all ready to fly, let's check what we want to do. The goal is to build a simple app that let us view GitHub user's information and, also, to manage our own message notes for every user. We will have a common layout with a static section (the one where you can search for users) and two subviews, having each one a different URL: Home page: will only contain a welcome message User profile page: will contain three sections for every user info group This is the home...
Ractive.js tutorial - Setting up your environment (1 of 6)
(Previous step: Tutorial introduction) I'm glad you decided to get here and I hope I can get your attention all the way down to the end of this tutorial. So, the first step is to set up your working environment with the tools you will use. I assume you have NodeJS and NPM installed in your system. If not, please, follow the previous link and come back once you're ready. Now, you need to create a new empty folder and initialize your project with npm: $ mkdir notetaker-ractive $ cd notetaker-ractive $ npm init NPM will ask you some questions. You don't need...
Create a Ractive.js application (0 of 6)
I'm a big fan of javascript. I like it in the front-end and I love it in the back-end (thanks Ryan Dhal). Also I enjoy playing with new libraries and frameworks that pops up every day. It seems nowadays everybody creates a new one and, when the time comes for you to start a new project and select the right one, oh man! it's a tough time. With the beggining of this year, I was in the position of starting a new big project and I spent some time deciding which libraries we would use in the front-end (no doubts...
Consuming GA data from NodeJS Express app
I didn't have a great time trying to implement a simple feature involving Google Analytics in one of my projects (nodejs web application). My humble requirement was to collect some data (events) I was pushing to Google Analytics in order to create a simple report for my users. Since it isn't a critical report, my idea was to get the data once a day and cache it. So, as simple as it seems, it has been a tough trip for me and I want to share the whole process with the community. I hope anyone trying to achive something similar...