Tag: JavaScript

Read More
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.

Read More
Build a weather app with AngularJS

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.

Read More

FCC Zipline Series 104: Build a JavaScript Calculator | The JS Way

Today, we are going to be building a calculator app using vanilla JavaScript . No jQuery or other third party libraries/frameworks involved. I’m even going to make it more complicated by using objects and prototypical inheritance, so do not expect a quick and dirty job. Here’s a demo of what we’ll be building.

We’ll build a Calculator “class”, which will take care of the application logic. This Calculator, will have methods that we can access to pass it numbers, operations and all sorts of cool stuff that’s it.

FCC Bonfire Series 148: Caesars Cipher

FreeCodeCamp has recently added a few more challenges to the site. One of them is Caesars Cipher. This bonfire will have us write a function that mimics the ages old encryption method allegedly used by Romans back in the day.

It’s one of the simplest and oldest encryption methods, and works by replacing each character in a word or sentence with another one down the alphabet (based on a shift amount). For this exercise, we are told to use a shift of 13. Let me show you an example using the word dog and a shift of three.

  • d -> e, f, g
  • o -> p, q, r
  • g -> h, i, j
Read More
Bower, your new best friend

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.