Should you upgrade to jQuery 3?

I recently sent out this suggestion to some of my clients. From my client’s perspectives, investing in upgrading libraries can sometimes be a hard sale. It cost money to have people go through and change working code and it opens up the opportunity for new bugs.

Should we upgrade to jQuery 3?

Compatibility with future code. It will be much faster and cheaper to change the website in the future because 3.0 is more standards compliant and is easier to debug. Why is it better?

  • JQuery 3 aggressively implements newer web standards. This means jQuery code and non-jQuery code(plain JavaScript/DOM/Browser APIs) will be more easily interchangeable. Specifically, on AJAX URLs, DOM manipulation, and Promises.
  • Animation performance will greatly improve.
  • Method signature and return values changes are sensible and help write more concise code and are easier to debug. Specifically, the $.post/$.get methods now accept options, and that DOM ctor now returns an empty array instead of a null value.
  • Real Promise support means interoperability with Promise debugging now and Async Functions in the future.

Upgrading to 2/3 will lose pre-IE9 support, but practically no one uses IE8 and older (.1% of all usage): http://www.w3schools.com/browsers/browsers_explorer.asp

https://jquery.com/upgrade-guide/3.0/

(Note, for you, the Blog Reader, this may be different, depending on what projects you work on).

Most likely areas for changes:

  • AJAX method changes. Drop success/error/complete for then, catch, done, fail, and always.
  • $.removeAttr use when it should be $.prop(attr, false)
  • Use of the $.param method

Installing Maven (2016)

It seems that the Maven installation instructions around the web are convoluted or out of date. (I kept getting:  “Error: ACould not find or load main class org.codehaus.plexus.classworlds.launcher.Launcher”) Here’s how I did it with v.3.3.9 on Windows 10, I see no reason why this wouldn’t be the same on Linux or  Mac with the relevant parts changed.

1. Download the -bin.zip (the full zip is missing stuff.)(If you’re on linux, use the gunzip file.)

2. Set the JAVA_HOME environmental variable. The dependency on JavaSDK must explicitly be referred to with the environmental variable JAVA_HOME = C:\Program Files\Java\jdk1.x.x_xx (in my case: C:\Program Files\Java\jdk1.8.0_91) or wherever you keep your Java SDK.

3. Unzip Maven, I put my portable executables in C:\tools\ so mine was extracted to C:\tools\maven.

4. Add Maven bin to PATH, in my case C:\tools\maven\bin
(see below this article, if you need instructions on that).

5. Test it out in the command prompt, by typing: mvn -v

And your done!

Errors to Avoid:
1) Older versions required setting M2_HOME, M3_HOME, and/or MAVEN_OPTS. The should be blank and not exist. 2) Tutorials often tell you to install the full file, just download the bin. If you need the rest of Maven, you’ll know you need it and you probably won’t be reading this tutorial.

2) “Error: ACould not find or load main class org.codehaus.plexus.classworlds.launcher.Launcher” is popping up because you’re missing packages, if you install the “full” version, it’s missing this. If you install the -bin version suggested above, it is not missing.

3) Setting/Editing Environmental Variables
In Windows, it’s easiest to access from the start menu. Open Start and search for (or just start typing) Environmental Variables… and you’ll see suggesstions from Windows to the right place by the time you get to “Envi.” Click one that says something like, “Edit the system environmental variables” or “Edit the environmental variables for your account.”

I like to use the account level, not the system level variables. To change a variable, you click on it and select edit. This will give you a prompt with the variable name and the value. For path, pre-Windows 10 mid-2015, you needed to manually add in the path by editing the PATH variable. c:\existing\paths;c:\existing\paths;c:\path\to\maven\which\you\added

Make a copy and save the existing path if you’re doing it this way. You don’t need to accidentally ruin your PATH variable. No it’s not the worst thing to recover from, but just save a copy first. Make gramps over here happy.

Notice the semicolon before your new one.

Windows 10 makes it even easier. When you edit PATH you get a cool interface that makes it easy to do and hard to mess up.

Command line? Don’t, but if you insist: set PATH=%PATH%;C:\path\to\maven\bin (this adds it to the beginning, this is like doing “path = new + path;” in other languages).
Linux/Bash? PATH=/data/to/maven/bin:$PATH

Gulp/Babel-loader and Webpack in Visual Studio Code

Sample VS Code config files for gulp-babel-loader.

gulpfile.js

These two lines aren’t needed in node gulp apps, but they make errors (cannot resolve module ‘myModule’…) in VS Code.

package.json

tsd.json

jsconfig.json

tasks.json

Using ES6/ES2015 in a Node.JS and Express

These are some very minimal changes to the standard express.js generated app.js file. It looks nice, “=>” syntax is getting easier to read the more I use and get used to it. Note: I took out a lot of unrelated code to isolate the topic of the blog. This example is for getting a development, learning environment ready to use Babel.js with Express on the back and front ends.

How’d I do it?

Using Babel’s “babel-node” cli tool, its compiling in real time in the development env. For production, do not use babel-node, you’ll want to compile with Babel.js then run with node. Just use “npm install -g babel-cli” and babel-node is already there and built in.

I also included eslint for good measure. Make sure to “npm install –save-dev babel-eslint” and set the parser to “babel-eslint.”

What else do you suggest that can I do to the app.js to take advantage ES6 features, without straying too far from the default?

NPM as an automated build system.

I hate having to set up complicated environments. I like JavaScript/Front End Development environments to be:

  1. Easy to understand and follow along for everyone on the team.
  2. Quick to get running and make changes.
  3. Free of having to learn new domain specific or pseudo languages for simple building.

Other platforms, Java or .NET, benefit from IDEs because they follow a predefined path and have a set of best practices defined into the language. The ugliness of JavaScript is why it’s powerful. But it can also lead to a lot of unnecessary reinventing the wheel.

Using NPM to use simpleton and replaceable tools keeps my projects fitting those three points above.

NPM is amazing and powerful. I’ve built three major projects now without Grunt or Gulp, using only NPM and locally installed modules.

The run command lets you run a locally installed module from the command line.

This runs “mocha test.js”

Scripts can also call one another.

In this previous example, “npm run check” will execute lint and test.

You can also use other NPM modules to run and watch the app.

For instance, in the following example, I use babel to convert and bundle the files after the lint and test. Then I run nodemon, which I have executing a custom script. Nodemon is also told to ignore the public directory where babel places the bundle. (I learned the fun way that this creates an infinite loop, if you don’t ignore it!)

Now when I run “npm run auto-start” it won’t just run the lint and tests and launch the app, nodemon will also watch for changes, linting, testing and restarting each time a change is detected.

Building from NPM is incredibly powerful. When I need to change the files or directories, I can do it inside the string. If I want to change the linter, I can change the dependency, and the script for “lint’s” value. Run “npm install” to update the dependencies. Then all the existing “npm run lint” calls will call the new linter. There’s only a tiny amount of configuration and no coding, just a JSON file describing what I want to happen.

Multiple calls to the same NPM module are possible, while using a different command to have different options.

Finally, the best part about building with NPM way: All that someone on the team needs to do to include this automation or build this app on another machine is clone the files and run “npm install” to get it up and running (if they have Node installed).

When won’t automated building with NPM work? Well, sometimes I have more complex builds, where one area of code might use one set of tools and another area uses some other tools. Some operations are easier to do asynchronously, rather than through piping stdout. What I’ve found myself doing more, is using NPM for my smaller personal modules and I’m still using grunt for my large projects.

Thanks for reading, if you have any ideas, concerns, or complaints please let me know on twitter @StevenLacks or in the comments.

Chaining and other Practical Uses for Promises for JavaScript (ECMAScript6, ES2015)

Repo on Github here.

Promises are cool. The best source for Promise API basics is still the API documentation on MDN. Well here’s some news. Promises are awesome and really easy to work with. That article will teach you all about the built in methods, like “all” and “resolve”, we’re going to go over some useful techniques that are not built into the Promise object.

First, let’s do a simple promise.

What if we want to do something sequentially? Promise.all() waits for all of the promised functions, Promise.race waits for one… but a lot of times, we want to run sequences without losing the benefits of asynchronous code.

Next, let’s make it a bit more complex, with issuing the then in the then. Adding the reseting the counter and using our thenableLoop.

| 0 – Working
| 1 – Working
| 2 – Working
| 3 – Working

This outputs like so:

| 0 – Working
| 1 – Working
* 0 – Working
* 1 – Working
* 2 – Working
* 3 – Working
* 4 – Working
* 5 – Working
Done

You can also pass callbacks as promisables…

That outputs…

| 0 – Still Working
| 1 – Still Working

Keep in mind if we passed in promisable, instead of promisable 2 it would look like this:

| 0 – Still Working
| 1 – Working

Finally, let’s look at binding arguments to the promise…

This outputs:

| 0 – Custom String
| 1 – Custom String

You can have very powerful sequences, with non-blocking IO. This is great for real world applications using ES2015/ES6. You could easily replace our timeouts in these examples with AJAX calls, queries to a datastore, complex DOM interactions, or anything else you might want to ensure is done before executing another set of instructions.

Repo on Github here.

T-Mobile Data Usage

Previously, I was on the T-Mobile 1GB plan. Towards the end of the month, I’d always hit 1GB, sometimes a day or two early. I realized that the day or two of lost productivity would be worth upgrading to 3GB… so I did… Now, a day or two before the new month, I’m getting the same warnings and I’m hitting 3GB.

Now, my usage probably has increased a bit, but I doubt by 2GB more… and I’m still on wifi most of the time.

Has anyone else had this experience?

Are these the simplest`Template Strings` in ES6 (JavaScript)?

Instead of a quote, wrap your string in back-ticks ` (on QWERTY this is just above tab, it shares a key with the tilde ~) to make a template string.

Works on: Chrome 41 or greater, Firefox 34 or greater, not currently in IE. Let me know if this is working in the Spartan preview, I’m the biggest windows fan without Win10 installed.

First, let’s check out the console.

Next, in a web page. Here’s a really simple demonstration of the ES6 template string being implemented in the DOM .

 

ES6/HTML5 Import Demo and Tutorial (Video)

“HTML import” is a well put together way to bring in HTML from other files. It uses minimal JavaScript to make it happen natively, and it’s only a matter of time before someone writes a nice little library on making that happen in a way that appears to be magical for designers.

Mozilla’s not supporting them, but now that I’ve used it, I’m think that this syntax was well thought out and will be easily shimmed. (I know you hate shims, but this is really small and should package nicely.)

First, note that this isn’t going to work serving it locally right from your file system. In other words, you can’t just open your HTML files in the browser from the file explorer. If you don’t know how to set up a server, then this might be a bit too advanced for you anyway. No offense, I still suck at that stuff. (why I work as a front ender!) Continue reading “ES6/HTML5 Import Demo and Tutorial (Video)”