Tag: npm

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 Algorithm Challenges by strongeleeroyOct 27, 20168:22 am

Use ECMAScript 6 in Node.js with Babel

ECMAScript 6 is a great step for JavaScript. It provides some invaluable tools that make developing new code a bliss. If you want to learn about the features that ECMAScript 6 (also known as ECMAScript 2015, ES6 or ES2015), take a look at this two part series:

Unfortunately, Node.js will not let you use ES6 features out of the box. It does provide a way of using some of the ECMAScript 6 features, but not the whole thing. That’s what we are here to fix.

FCC Zipline Series by strongeleeroyMar 2, 20163:00 pm

Build a wikipedia viewer with React, Babel and Webpack

Build a Wikipedia Viewer | The React Way

Today, we are going to build a Wikipedia viewer using React and Webpack in tandem. If you are not familiar with React at all, I recommend that you go through the introductory material first, it’ll save you a headache!

Additionally, we are going to be using ES6 class syntax for creating components, as this is the way React is heading towards. The previous tutorial in this series goes into more detail, so go ahead and take a look if you’d like. Let’s get our hands dirty then…

FCC Zipline Series by strongeleeroyFeb 26, 20163:58 pm

Build a weather app with React, Babel and Webpack

Weather App | The React Way

January 16th, 2018 Update

As certain sections of this guide are now obsolete, here’s an updated solution proposed by avid reader Goungaf Saâd.

You can take a look at this version in this GitHub repo. Note that he is using create-react-app on this project, so the overall set-up might be slightly different.

Goungaf is a passionate individual in love with JavaScript and cutting edge technology. He works as a freelance web and mobile developer specializing in the MEAN/MERN stacks and Ionic/React Native mobile development.

This time around, we are going to build our lovely local weather app using React, Webpack and Babel. These 3 tools in conjunction give as enormous power and awesome syntactic sugar for our code.

We’ll make use of ECMAScript 6 classes, promises and arrow functions among others, but first, we need to get a proper environment set up. Navigate to your project folder and run the following command:

npm init

Note: If you don’t have Node and NPM installed, take a quick look at this post, that will get you going.

You’ll be asked for a few things, such as app name, author, description etc. Feel free to take your time and fill them in properly, or anxiously press enter to skip everything. Once done, you’ll have a package.json file in your project directory.

JavaScript Core by strongeleeroyNov 23, 20158:56 pm

Bower, your new best friend… Or bird.

Applications grow in size and complexity by the day, and as new needs arise, new tools do too. Bower is one of them, let me tell you about it.

One day, you’re just bringing in jQuery into your nice little project, and then, suddenly, in a weeks time, you need to keep track of a framework, plugins, JS and CSS libraries and whatnot for this other side thing you’re doing. You may just keep a long txt file with a list of CDNs or an overloaded library folder with all of your favorite resources, and that is okay. You’re just missing out on the greatness of Bower, your new best friend.

Today, I’m going to show you the power of NPM and Bower working in tandem. I’ll expand on this in future posts by bringing in a few more tools (Gulp/Grunt, RequireJS, Webpack/Browserify) that you’ll surely find useful, I promise!

Bower is a very handy tool that fetches and brings in anything that you need for your project. That means libraries, frameworks, assets and, according to the official site, rainbows too. Anything that you may ever need is a few keystrokes away.

Before we get into the matter though, we need to get a couple dependencies set up; namely: NPM (Node Package Manager) and Git. Let’s get started.