How to Add a Script to Minify your JavaScript in a package.json file

Recently I was working on a project where I wanted to set up a process that could combine and minify the JavaScript I had in a specific folder for a project. So how did I do it?

I decided to run the npm init command on my project folder. Within the package.json file, I had the following:

{
  "main": "scripts.js",
  "scripts": {
  "minify": "uglifyjs ./js/* -o scripts.min.js",
  "uglify": "npm run minify"
},
  "dependencies": {
  "uglify-js": "^2.8.8"
},
  "devDependencies": {
  "uglify-js": "^2.8.8"
 }
}

Once I ran npm install uglify-js --save, I made sure to specify the folder I wanted to run the process in (./js/*), and the file I wanted to create with the minified code (scripts.min.js). Next, all I had to do was run npm run uglify and my new scripts.min.js minified file was created.

Now whenever I make changes or add new files to my project’s JavaScript folder, I can run npm run uglify to bundle up and minify the code.

A Brief Overview of ES6

ECMAScript 6, or ES6, is a newer version of JavaScript. It has several unique capabilities that weren’t possible in previous versions of JavaScript, for example:

  • Variables can be set with the terms let and const
  • The let keyword is used for block scoping so it doesn’t affect global values
  • The const keyword is used to protect the value of certain variables – you use this keyword for values that shouldn’t be reassigned
  • It allows you to use template strings to tap into the functionality of template languages to format your JavaScript code with variables like so: `${yourVariableHere}`
  • The spread operator can turn elements of an array into arguments of a function call or into elements of an array literal
  • Allows us to make classes in JavaScript (can create one super class that other classes inherit)
  • Can pass default values in functions for when you don’t explicitly pass anything for them

In order for browsers to understand ES6, you need to transpile the code. Babel, Traceur, and Closure are used for transpiling code, although Babel is known for supporting the most ES6 features.

For larger scale projects, you can use build tools like Webpack with ES6 – this allows us to load our dependencies. Npm creates a package.json file that runs dependencies.

 

Yarn: the JavaScript Package Manager

If you already use npm, you’re probably wondering what’s the point of Yarn?

Yarn is a somewhat new JavaScript package manager created by the engineers at Facebook.

  • It’s a faster and more secure dependency manager
  • It uses an offline cache – so after you’ve installed a package using Yarn, it will be available on your machine for offline access.

Quite honestly, what really reeled me in with Yarn was the speed at which it can install packages. It’s amazing how shaving off a few seconds from installing packages can really speed up your overall workflow.

Get Yarn

npm install –g yarn

Or use brew to add it. Once installed, you use the following format to add any dependency:

yarn add <name of package>

A Brief Overview of React.js

React is a user interface library that was developed at Facebook. React is written in different components and follows the principles of immutable data. It’s often used in enterprise applications, and it makes creating single page applications easier since they have a higher speed thanks to the virtual DOM. This means it writes to the browser DOM only when it is needed, instead of re-rendering an entire view when a change is made.

Virtual DOM

React creates an in-memory DOM where it only renders different parts of the DOM when a change occurs.

JSX

React utilizes JSX, which is a JavaScript extension syntax that allows you to quote HTML.

Babel

Babel is a transpiler that transpiles JavaScript code. It works for JSX as well as ES6 and beyond. Babel converts React’s JSX and ES6 to something the browser can use.

Components

React applications consist of a collection of components. Components are small user interface elements that display data as it changes over time. Used together, these components create entire user interfaces.

Component Lifecycle

Component lifecycles allow you to add libraries and load data at specific times. They also help improve the speed of an application, with lifecycle methods that you can override to run code a specific times in the process.

Mounting methods are called when an instance of a component is being created:

  • getInitialState()
  • componentWillMount()
  • componentDidMount()

Updating methods occur when a change happens to props or state:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting methods are called when a component is being removed:

  • componentWillUnmount()

 

A Brief Overview of Node.js and Express.js

If you’ve worked with JavaScript frameworks and libraries, chances are that you’ve heard of Node.js and Express.js. So for those who are unfamiliar to these terms – what exactly are they?

Node.js

Node.js is an open-source JavaScript runtime environment, that uses Google’s V8 JavaScript engine, where you can build server applications. Node.js is not a framework, although it has many modules that are written in JavaScript. It has event-driven architecture that is capable of asynchronous I/O, otherwise none as a form of input/output processing that allows other processing to continue before the transfer of data has finished.

Express.js

Express.js is a web application framework for Node.js, that’s used for building APIs. It is also known for being a backend component of the MEAN stack.

I’ve worked with Node.js and Express.js to create APIs, so I feel like I can never think about one of them without having the other one come to mind.

JavaScript: What’s the point of looping?

In JavaScript, looping is a handy way to do something repeatedly. For example, if you wanted to print out a list of results in a consistent way, or add styles to objects that fit certain parameters.

Here are a few of the ways to do looping:

for statement

A for statement is usually used when you need to increment a value within an expression.

for (var i = 0; i > 10; i++) {
console.log(i);
}

do…while statement

A do…while statement repeats until a specific condition evaluates to false.

var i = 10;
do {
i++;
console.log(i);
} while (i < 40);

while statement

A while statement executes as long as a specified condition evaluates to true.

var i = 2;
while (i < 5) {
i++;
console.log(i);
}

break statement

The break statement is used to terminate a loop.

for (var i = 0; i < a.length; i++) {
if (a[i] == 5) {
break;
}
}

Note: This post is written in conjunction with the coding cheat sheets I’m developing.

JavaScript: What are Closures?

So maybe you’ve heard of JavaScript closures before but you’re wondering, what exactly are they? Well, when it comes to JavaScript, you can have variables that belong to a local (a variable declared within a specific function) or global scope (variables that are accessible from anywhere in the code). You can make variables private by using closures.

Take a look at the following example:

var countUp = (function () {
var count = 0;
return function () {return count += 1;}
})();

countUp();

Now, let’s break it down:

  • The variable countUp is assigned the value of a self-invoking function.
  • It sets the count to 0 and returns a value that adds 1 to the current count.
  • It has access to the count in the parent scope.
  • The variable count is protected by the scope of the anonymous function, and can only be changed using the countUp function.

Yoda Speak

I can’t believe it’s been nearly three weeks since I completed the WDI course. In an effort to make sure I’m staying sharp with my coding skills, I’m going to try to complete coding challenges every week and create a new app every month. Will I succeed with living up to those goals? I sure hope so!

I am also combing through my previous class assignments from WDI to try to find ways to refactor my code or polish existing work into more functional applications. So recently I decided to revisit a Yoda exercise we did. Using vanilla JavaScript, I created an application that utilizes the Yoda Mashape API for translating text into Yoda speak.

You can view the live app here and see the Github repo over here.

Yoda Speak

WDI Day Fifty-Eight: Project 4 Presentations and the Last Day of WDI

I can’t believe that three months have already gone by, and that WDI is over. It was a wonderful experience and I’m glad I decided to go through it. Today we had a chance to work on our projects in the morning, and in the afternoon we presented our project 4. I was pleasantly surprised that a lot of people enjoyed my application. I thought it was a rough project that wasn’t fully complete, but it was great seeing that others thought it was good.

After our presentations, we did a few group activities to close off our experience at WDI. We did an exercise where we had a piece of paper taped to our back and everyone walked around writing things we liked about other people so they were receiving anonymous compliments. A couple of the students in the class created certificates for everyone that were pretty humorous. We also received GA backpacks and did a toast at the end of class.

Overall, the experience has been a really positive one. I doubted myself a lot at times towards the end of the course, but overall I did indeed learn a lot. I also met such a wonderful group of people who I hope I can stay in touch with for years.

WDI Day Fifty-Seven: Project Week 4, Part 5

Using Rails and JavaScript for my project has proved to be a good move. Instead of struggling with the technology and building out an application, I have been able to focus on building out my app.

Today was a pretty successful day – I created icons for all of the different sections of the site. I also found a fix for the weird offset issue I was running into. I also added the ability for users to change the difficulty level of the puzzles they created. Overall, things are slowly falling into place, and I’ve successfully launched all changes to the deployed app on Heroku.

puzzle-me-pictures-screenshot