Tag: zipline

FCC Zipline Series by strongeleeroyNov 2, 20169:28 am

Create a URL Shortener with Node.js and MongoDB

URL shorteners are very useful. Remembering long and tedious URL addresses, or sharing 100 character URLs with your peers is not what we would call, convenient. That’s why we have services such as the Google URL Shortener, Bitly or TinyURL.

We are going to replicate the functionality that these pages offer to some extent. We’ll start off by creating an API using Node.js and the Express framework, and will integrate with a MongoDB instance to store information making use of Mongoose.

The functionality is quite straightforward, we must implement two endpoints in our application:

/new/URL_TO_SHORTEN: Creates a new short URL for the provided long URL.
/SHORT_URL: Will redirect to the long version of the provided short URL.

Instead of babbling around, let’s set up the project and install all of our dependencies.

FCC Zipline Series by strongeleeroyFeb 23, 20163:42 pm

FCC Zipline Series 105: Weather App | The Angular Way

We’ll be building a weather app this time around; this project will serve as a nice introduction to a language that has been embraced by Angular 2, and can prove to be tremendously powerful: TypeScript.

You may have heard of TypeScript before, it’s merely a superset of JavaScript (it get’s compiled to plain JavaScript), but provides us with tools only available to ECMAScript 6 and beyond right now (such as classes!).

It also gives us strong typing, a feature that JavaScript lacks and can prove to be a lifesaver. We are going to take it slow and introduce TypeScript features as we along. If you want to get a feel for TypeScript before we get started, go ahead and take a look at the documentation. If you hate AngularJS, TypeScript or strong typing, ~~stay tuned~~, a ReactJS + JSX version of this tutorial ~~will come along shortly~~ can be found here.

FCC Zipline Series by strongeleeroyNov 19, 20157:22 pm

FCC Zipline Series 102: Build a Random Quote Machine | The React Way

This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:

As a user, I can click a button to show me a new random quote.

Bonus: As a user, I can press a button to tweet out a quote.

I’m going to take this chance to let you take a peek into React. If you just want the walk-through for the vanilla JavaScript version, take a look at this other post.

You may, or may not have heard about React before, but it’s getting quite popular as of late. It’s a library made by the guys at Facebook, who describe it as the following:

React: A JavaScript library for building user interfaces.

It’s a front-end framework similar to Angular, Ember or Backbone (someone reading this is probably orchestrating my assassination right now, bear with me please) but not quite so. In a MVC (Model View Controller) architecture, we could say that react is our V (View).

Hopefully, this exercise will grant you some insight into what React is and how it operates at a basic level; and help you decide whether to give it a shot or not. I’m also putting up an AngularJS and vanilla JavaScript version of this same exercise, in case you’re more interested in those.

FCC Zipline Series by strongeleeroyNov 19, 20157:21 pm

FCC Zipline Series 102: Build a Random Quote Machine | The JS Way

This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:

As a user, I can click a button to show me a new random quote.

Bonus: As a user, I can press a button to tweet out a quote.

I’m going to take you through the process of setting up the JS code necessary for this app to work. If you want to give React a chance, go ahead and visit this other post, where we’ll build this same app using Facebook’s React framework.

FCC Zipline Series by strongeleeroyNov 18, 20158:54 pm

FCC Zipline Series 101: Build a Personal Portfolio Webpage

What better way to get started with the front-end than creating your own portfolio? This first Zipline will have you build up your portfolio website from scratch. I’m going to go dead basic on this, no external tools or bundling bonanza. Just HTML, CSS, JS and a few few libraries.

Building stuff, anything really, as vague as it may seem, is the best way to keep your skills sharp. For this particular project, we’re asked to fulfill the following user stories:

As a user, I can access all of the portfolio webpage’s content just by scrolling.
As a user, I can click different buttons that will take me to the portfolio creator’s different social media pages.
As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven’t built any websites before, use placeholders.)
Bonus: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.

Now, get scared. I won’t be using Bootstrap or jQuery at all. For heavens sake, it’s a static, single page site. It has two advantages, it’s easy to navigate, and it is fast. Having to include Bootstrap and jQuery will just slow it down and spoil you (feel free to use them though 🙂 ).