Setting The Facts Straight

Normally, I don’t care too much about going back and updating old content, but my error was quite eggregious. Not only that: that post is the second most view post I had last year, so if I’m going to have that much traffic going to it, then I need to fix it, so I’ve added a paragraph to that post directing visitors to this new post, so that I can prevent future misinformation from spreading.

So What Is It?

The ~ operator in JavaScript is the Bitwise NOT operator. If you don’t work with binary very often, then that probably doesn’t mean anything to you at all. Don’t worry, though, I’ll explain. If you have a number, say 8, it looks like this in binary: 1000. When you use the ~ on that number, it will convert each bit to the opposite value. That means, each 1 will become a 0 and vice versa. So ~8 would equal 7, whose binary representation looks like this: 0111. Or a 13 (1101) would become 2 (0010). The only problem is that JavaScript uses what is called “Two’s Complement” in order to be able to represent positive and negative numbers in binary. So, because of this, in actuality, ~8 equals -9. If you want a better explanation than that, you’ll need to do some research on your own because I don’t feel adequate to explain it.

If you’re wondering what you would use this for (besides as a lame hack as I recommended in my previous article and that I no longer recommend)… so am I. I can find some examples on the internet for using bitwise operators, but I haven’t really seen a helpful example utilizing this particular operator. So, if you find a tilde in some JavaScript code you’re reading, then check out my old article linked above just to make sure they’re not using wrongly. If it doesn’t seem to be used hackily, then I guess you’ll have to let me know so I can see an example where it’s used correctly!

Conclusion

So, now I hope this sets the record straight and that people being directed to the old post by Google will end up seeing this post. God bless and happy coding!

Video

Steps

You can find a fully fleshed out written tutorial on the Raygun blog. Here, I’ll just list the steps out pretty quickly. You can also find everything you need for setting up your PC and Android phone for Chrome debugging in the video above.

1. Turn on Developer Options and USB Debugging on your phone.
2. Install USB drivers for your Android device on your PC.
3. Install ADB server and run it on your PC.
4. Enable Chrome developer tools to “Discover USB devices” in the “Remote devices” tab on your PC.
5. Connect your Android device to your PC via USB.
6. Allow USB debugging on your phone, when the popup shows up.
   • If that popup doesn’t show up, change connection type to PTP on your phone first.
7. Open the “Remote devices” tab in the dev tools and click on your Android device listed on the left.
8. Focus the tab you wish to inspect and then click the “Inspect” button for that tab.

Conclusion

And there you go! You’ve now got a remote debugging session running on your PC for your Android device. You should be able to do pretty much anything with it that you would normally do on a desktop website. God bless and happy coding!

What Are We Talking About?

If you’re not sure what I mean by a “slide-down animation”, check out the slideDown method from jQuery. This function will take a hidden element and make it visible by increasing the element’s height from 0 to whatever the height of the element should be. That shouldn’t be too hard, right?

How You Might Try To Do It

Let’s take a look at some quick ideas of how you might expect to be able to do this easily. If you simply go by what I said earlier, you’d just set the height to 0, and then to expand it, set the height to the number that shows the whole element (with a transition as well; this is assumed for all of them, otherwise it won’t be an animation). Something like this:

See the Pen Pure CSS Slide Down Animation 0 by Joe Zim (@joezimjs) on CodePen.

Note: This is using :target and links to activate the animations, so the links aren’t toggles. You’ll need to go back in the frame’s history or press “Rerun” to toggle them off.

Note that it works perfectly! Problem solved right? Yes and no. This works perfectly if you know the height of the element, but what if you don’t know the height. We’ll need a generic animation that will work no matter what height the element is. This is especially true on a responsive site, where the height can change depending on screen size.

In this case, the seemingly obvious solutions is to just set the height to auto in the expanded version’s styles.

See the Pen Pure CSS Slide Down Animation 1 by Joe Zim (@joezimjs) on CodePen.

Oh how I wish this worked. This would make everything so much easier, but sadly transitions only work on numeric values. Sure, auto does eventually compute to a numeric value, but that message doesn’t seem to get to transition, so it just pops right open instead of doing a nice animation.

So what can we do? How about CSS Transforms? We’ll set scaleY to zero and then set it to one when it should be expanded. Will that work?

See the Pen Pure CSS Slide Down Animation 2 by Joe Zim (@joezimjs) on CodePen.

When you use a transform, it doesn’t actually change the amount of space it takes up, so there are big gaps between the links instead of making that area appear at the same time the element starts expanding. So this isn’t working either. So how about we take a look at the method that I discovered.

The Answer

See the Pen Pure CSS Slide Down Animation 3 by Joe Zim (@joezimjs) on CodePen.

The answer is to set everything that can affect height (e.g. vertical padding, line-height, etc.) to 0 and then set it to the value you’d like when expanded. You need to be careful with this because there are lots of things that can affect height. For example, if there were multiple paragraphs of text inside the element, you’d need to adjust the margins between those paragraphs. If you have any images, you’ll need to make sure the height and vertical margins around it are also set to 0. This works better than just using height since you’re far more likely to know the values of each of these properties than you are to know the height of the expandable element.

Note: I also set the text color to toggle between transparent and black to give it a fading look. This is not necessary, but looks a little nicer. You can also accomplish this with opacity.

Conclusion

I’ve spend days trying to figure this out in the past. There just had to be a way! But aside from using JavaScript, which is also pretty complicated, I just couldn’t figure it out for the longest time. Now that I have it figured out, I hope it can help you as well. God bless and happy coding!

How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript

How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript is a tutorial on exactly what it says it is. Without using a single library or framework, we learn how to build a drag-and-drop file uploader. We also cover how to use fallbacks for older or less capable browsers while also exploring some extra features that can be added to the uploader to enhance the user experience.

How To Make A Drag-and-Drop File Uploader With Vue.js 3

How To Make A Drag-and-Drop File Uploader With Vue.js 3 takes that previous tutorial and converts it to use Vue, which, because of its declarative nature, actually looks quite different despite doing essentially the same things. It also upgrades the uploader to have a more informative and prettier interface, because why not?

What’s Coming To VueX?

What’s Coming To VueX? looks at the big plans for changes in Vuex version 5 (what later ended up becoming Pinia instead of a new version of Vuex) that make it more intuitive to use with fewer hoops to jump through. This article ended up getting me invited to be a guest on the Views on Vue podcast.

Using Slots In Vue.js

*Using Slots In Vue.js discusses how to use slots in Vue, especially focusing on the changes made in Vue 2.6 to simplify the use of slots.

Conclusion

That’s all for now. If there’s something you’d like me to write about, whether it’s directly on this blog or on a different blog, leave me a comment below! God bless and happy coding!

Transitioning with Code Combat

A fairly structured way to get a young student to their first typed language is Code Combat, which supports Javascript (and Python). The platform is a great game-ified way to learn to code, as kids solve puzzles and defeat enemies through Javascript code. Fun for even some of us more seasoned coders! While the graphics and game play are addicting and fun, we’ve found Code Combat to be more of a short-term solution for exposure, so we tend to use it in short bursts. After all, nothing beats unrestricted straight up Javascript coding!

Unstructured JS Coding

To start kids off on their first Javascript “apps”, we’ll often use Codepen or a similar online IDE like JS Fiddle. Most Javascript coders know and use these platforms often, so we’ll leave it at that. We might start kids off with some simple stuff like DOM manipulation - number generators, simple calculators, etc. Kids tend to like interactive things, graphical things - kinda perfect for Javascript in the browser!

Advanced JS with PlayCanvas

For our more advanced students (with our more advanced Coaches), one cool option is a 3D Engine called Play Canvas. By the time you say “3D”, you’ve hook 90% of the kids, and if you add “game engine”, you’re done! PlayCanvas supports rigid-body physics simulation, handling three-dimensional audio (yeah!), 3D animations, and a boatload of other stuff if you have the time to look through it. It’s got a great set of tutorials you can check out too.

Quick caveat, take a quick click through to Play Canvas or even just read some of the functionality above, and you’ll sense right away that this isn’t easy-breezy stuff for kids. The tool itself can be a steep rampup especially for kids, so we’re always careful with balancing tool learning vs. Javascript learning. The instructor (what we call a Code Coach) may need to do some pre-setup for some kids - creating a 3D app from scratch is often quite hard for most kids.

PlayCanvas Project Ideas

PlayCanvas comes with a basic tutorial that kids can use to change up a little. One of our students created a cool little challenge by turning the ball into a watermelon and adding some deadly spikes as an obstacle. I’ve tried about 50 times and still can’t get the watermelon across the spikes! We’ve also defaulted to good old spaceship games, like this one a student of ours created of a 3D Asteroids game.

Another project idea that we’ve done is to allow your student to design and even 3D print out their own fidget spinner. A little past the trend, but hey, kids still love the stuff! For the actual 3D print, we used Blender, but in PlayCanvas you can recreate it with a student, and get it spinning just like in real life. The Instructor/Code Coach might need to get a basic spinner ready to go, along with a rotation script, allowing the kids to change rotation speeds or even chuck balls at it - but when you’re talking fidget spinners, you’ll get any kid engaged and having fun!

There’s lots of great platforms out there to help kids code JavaScript and other languages, such as Juni Learning. PlayCanvas happens to be one of the cool ones we use, but it’s really only one of many. Don’t forget, in the end it’s about balancing kids’ engagement and fun with hardcore coding. Don’t stray too far in either direction! Happy Coding! (ps, high five to Joe for letting me jump in on a guest post!)

For more resources on how to teach coding to your kids, feel free to visit Coding For Kids.

Speaking

I actually already talked about it at NEW Code Camp in Appleton, Wisconsin last Saturday. I spent some late nights preparing for it and didn’t feel as ready as I wanted to, but it went off alright.

Today and tomorrow, I’ll be refining the presentation some more and will be presenting it again at the Central Wisconsin Developer’s Group on March 30 at 6PM. If you want to hear the presentation, you can find all the details on that meetup page I linked to.

At some point in the future I plan to write an article about it. And I hope I can do it soon. I want to be able to put some content on here other than letting you know what I’ve done recently and what I plan on doing in the future.

Comprehensive Guide to webpack Course

That doesn’t mean I don’t still have things I want to say about the future! I just wanted to remind you (assuming you’ve already read it in a previous article) or inform you (if you were unaware) that I’m currently working an a course that will exhaustively cover webpack’s capabilities. It won’t obviously cover many of the more obscure plugins and such, but it’ll show you everything you really need to know.

To sign up to receive updates about the progress and to get 50% off when the course is released, click the link below:

Click Here to Sign Up.

I’ve already written 8,000 words just introducing the core concepts of webpack on Smashing Magazine, so I’m sure I’ll have plenty to teach you if I really get into everything important to know about webpack.

Vue.js Courses

Another thing holding me back from writing on this blog has been my work for AppendTo. My most recent pieces have been outlines for Vue.js Courses, or rather Vuex and Vue-Router courses. I’m not actually teaching these courses right now, but I’m working towards qualifying to work for Develop Intelligence (the company that owns the AppendTo blog) as a training consulant some day, so maybe I will in the future. And of course I want to be making more web development courses online as well.

So, that was all my announcements this time around. Thanks for checking in on me. I promise my next post will be a tutorial of some sort. God bless and happy coding.

This obvious growth in popularity begs the question, “Why is Vue.js gaining so much ground despite having several great frameworks already?”, and likewise, “What does Vue.js offer that the other frameworks and libraries don’t?” You’d think that if you can answer the 2nd question, you’d have the answer to the first question, right? Well, the quick answer to the 2nd question is

“nothing”

What? If it’s not offering anything new, why wasn’t it just ignored? Well, let’s try a long answer to the second question, then:

“Technically it does not have any great new features. However, it does offer a unique combination of features.”

So, it’s not really the features themselves, but the combination of features that Vue.js employs that is drawing the development community in. So what are these features, and where did Vue.js steal them from? Well, that information is on my guest post at AppendTo with the familiar title of Where Did Vue.js Come From?.

However, I have some exclusive features right here that I couldn’t fit into that article (they limited me to 1000 words). You should read the article on AppendTo first, though.

Virtual DOM

This feature is probably one of the best features that React introduced to the world (though I’m still quite partial to how they changed the way we think by making React focus so much on composable and nestable components rather than views, which I talk about in the article on AppendTo). Virtual DOM revolutionized the way we render our views/components so that we don’t have to worry about the logic of only updating the few pieces that need to be updated but also don’t incur a huge performance hit due to re-rendering the entire view.

Vue’s rendering algorithm is generally faster than React’s, and because all state and props are “reactive” in Vue, and they handle detecting what changes take place, it’s even simpler to work with because you’ll never need to implement shouldcomponentupdate to optimize it. So Vue not only “stole” this feature, they improved it in multiple ways (though technically they used someone else’s virtual DOM implementation rather than creating their own)! I’m curious if reactivity was taken from something else though. I know Angular 1 does something similar with scope, but it’s “dirty checked”, rather than applying

CLI Tool For Quickly Bootstrapping New Projects

Vue-CLI enables you to easily grab a base project structure, answer a few questions, and be immediately set up and ready to start a new Vue project in seconds. I believe Ember was the first to release their own CLI tool as a companion to their framework (feel free to correct me if I’m wrong), and while Ember’s community hasn’t reached the size of the other top frameworks, this is definitely a great reason to consider Ember (and Vue). It’s awesome to see that Angular has followed suit as well (it’s currently in Release Candidate status).

Vue’s CLI tool doesn’t quite have as many features, though, because it is only designed to initialize a project and to build the project, but that’s primarily because there’s nothing for Vue to scaffold out except components, and there are multiple perfectly acceptable ways to create components, so you can do what you want in this case.

That’s It

Do you know of any other features that should be on this list? Vue.js seems so simple in my mind that it’s difficult to come up with features for it. Let me know in the comments below what you like best about Vue, or whatever you can think of to tell me (hopefully it’s at least relatively on topic). :) God bless and happy coding!

ES2015 Tagged Template Literals

The first post that went live was on AppendTo.com. It was a tutorial on how to use tagged template literals (released in ES2016, AKA ES6) in order to maximize the potential use of template strings. While the applications tend to be rather limited, they can be pretty powerful.

Read Advanced JavaScript ES2015 Template Strings with Tagged Templates.

Vue.js’s Single File Components

Recently I’ve been diving into learning about Vue.js. Why Vue.js? Well it was either that, React, Angular, or Ember. I was sick of being stuck on Backbone and MarionetteJS, so I needed to learn something new. I was planning on learning React, but there are already so many good articles out there that I felt like I might not be adding much to the community if I learned React and wrote about it, so I decided to take a look at the other options a bit first.

Vue.js was jumping up the popularity polls, so I took a look at it. I found out that it was pretty similar to React (component-based view layers with virtual-DOM-based rendering, and not much else without additional library support). Once I knew that, I basically just looked around to try to find what made it different from React. The biggest thing I found, and it’s the big feature that hooked me, was Single File Components. So I latched onto Vue.js and decided to write an article about what I love about Single File Components, once again it was published by AppendTo.com.

Read Vue.js’s Single File Components: Keeping It All In One Place.

Introduction to webpack

The final guest post I wrote was for Smashing Magazine. I actually finished the first draft back in September, but SM does a thorough job of editing and they have lots of posts coming in, so it takes a long time for the posts to get published. Also, the post was over 8000 words(!!!), so it took some time for everyone to read through it. Anyway, the post was a beginners introduction to using webpack. Interestingly, version 2 came out while waiting for the publish date to be ready, so I had to make edits to the post after it had already been edited and proofread. It finally released yesterday, though, so I can rejoice that it’s all done with!

Read A Detailed Introduction to webpack

A webpack Course

My final announcement is that I’ve decided to make a large, in-depth tutorial, something akin to my old Backbone series. However, I’ve had a lot more experience with video tutorial making, so it should be much higher quality. It should also be more in-depth, because, as you could see from an 8k word introductory tutorial to webpack, there is tons to learn. Due to this, I’ve decided to sell access to my course (not sure where yet; might just host them here). However, since you guys are all so cool (because you’re on my site), I’m giving you the opportunity to get 50% off the course once it is released.

Click here to go to the signup form.

If you fill that out, I will send you emails with updates about the progress of the course, give you access to some free samples of the course as some parts get finished up, and finally, when the course is released, you’ll be the first to know because a coupon code will arrive in your inbox.

In this tutorial, taken from the second edition of Learning JavaScript Data Structures and Algorithms, by Loiane Groner we’ll take you through the key principles behind using arrays and show you how to put the theory into practice.

Why Should We Use Arrays?

Let’s consider that we need to store the average temperature of each month of the year of the city that we live in. We could use something similar to the following to store this information:

1
2
3
4
5

var averageTempJan = 31.9;
var averageTempFeb = 35.3;
var averageTempMar = 42.4;
var averageTempApr = 52;
var averageTempMay = 60.8;

However, this is not the best approach. If we store the temperature for only 1 year, we could manage 12 variables. However, what if we need to store the average temperature for more than 1 year? Fortunately, this is why arrays were created, and we can easily represent the same information mentioned earlier as follows:

1
2
3
4
5

averageTemp[0] = 31.9;
averageTemp[1] = 35.3;
averageTemp[2] = 42.4;
averageTemp[3] = 52;
averageTemp[4] = 60.8;

We can also represent the averageTemp array graphically:

Creating and Initializing Arrays

Declaring, creating, and initializing an array in JavaScript is as simple, as shown by the following:

1
2
3

var daysOfWeek = new Array(); //{1}
var daysOfWeek = new Array(7); //{2}
var daysOfWeek = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'); //{3}

We can simply declare and instantiate a new array using the keyword new (line {1}). Also, using the keyword new, we can create a new array specifying the length of the array (line{2}). A third option would be passing the array elements directly to its constructor (line {3}).

However, using the new keyword is not best practice. If you want to create an array in JavaScript, we can assign empty brackets ([]),as in the following example:

1

var daysOfWeek = [];

We can also initialize the array with some elements, as follows:

1

var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

If we want to know how many elements are in the array (its size), we can use the length property. The following code will give an output of 7:

1

console.log(daysOfWeek.length);

Accessing Elements and Iterating an Array

To access a particular position of the array, we can also use brackets, passing the index of the position we would like to access. For example, let’s say we want to output all the elements from the daysOfWeek array. To do so, we need to loop the array and print the elements, as follows:

1
2
3

for (var i=0; i < daysOfWeek.length; i++){
  console.log(daysOfWeek[i]);
}

Let’s take a look at another example. Let’s say that we want to find out the first 20 numbers of the Fibonacci sequence. The first two numbers of the Fibonacci sequence are 1 and 2, and each subsequent number is the sum of the previous two numbers:

1
2
3
4
5
6
7
8
9
10
11
12

var fibonacci = []; //{1}

fibonacci[1] = 1; //{2}
fibonacci[2] = 1; //{3}

for(var i = 3; i < 20; i++){
  fibonacci[i] = fibonacci[i-1] + fibonacci[i-2]; ////{4}
}

for(var i = 1; i < fibonacci.length; i++){ //{5}
  console.log(fibonacci[i]);           //{6}
}

• So, in line {1}, we declared and created an array.
• In lines {2} and {3}, we assigned the first two numbers of the Fibonacci sequence to the second and third positions of the array (in JavaScript, the first position of the array is always referenced by 0, and as there is no 0 in the Fibonacci sequence, we will skip it).
• Then, all we have to do is create the third to the twentieth number of the sequence (as we know the first two numbers already). To do so, we can use a loop and assign the sum of the previous two positions of the array to the current position (line {4}, starting from index 3 of the array to the 19th index).
• Then, to take a look at the output (line {6}), we just need to loop the array from its first position to its length (line {5}).

We can use console.log to output each index of the array (lines {5} and {6}), or we can also use console.log(fibonacci) to output the array itself. Most browsers have a nice array representation in the console.

If you would like to generate more than 20 numbers of the Fibonacci sequence, just change the number 20 to whatever number you like.

Adding Elements

Adding and removing elements from an array is not that difficult, however, it can be tricky. For the examples we will use in this section, let’s consider that we have the following numbers array initialized with numbers from 0 to 9:

1

var numbers = [0,1,2,3,4,5,6,7,8,9];

If we want to add a new element to this array (for example, the number 10), all we have to do is reference the latest free position of the array and assign a value to it:

1

numbers[numbers.length] = 10;

In JavaScript, an array is a mutable object. We can easily add new elements to it. The object will grow dynamically as we add new elements to it. In many other languages, such as C and Java, we need to determine the size of the array, and if we need to add more elements to the array, we need to create a completely new array; we cannot simply add new elements to it as we need them.

Using the push Method

However, there is also a method called push that allows us to add new elements to the end of the array. We can add as many elements as we want as arguments to the push method:

1
2

numbers.push(11);
numbers.push(12, 13);

The output of the numbers array will be the numbers from 0 to 13.

Inserting an Element in the First Position

Now, let’s say we need to add a new element to the array and would like to insert it in the first position, not the last one. To do so, first, we need to free the first position by shifting all the elements to the right. We can loop all the elements of the array, starting from the last position + 1 (length) and shifting the previous element to the new position to finally assign the new value we want to the first position (-1). Run the following code for this:

1
2
3
4
5

for (var i=numbers.length; i>=0; i--){
  numbers[i] = numbers[i-1];
}

numbers[0] = -1;

We can represent this action with the following diagram:

Using the unshift Method

The JavaScript array class also has a method called unshift, which inserts the values passed in the method’s arguments at the start of the array:

1
2

numbers.unshift(-2);
numbers.unshift(-4, -3);

So, using the unshift method, we can add the value -2 and then -3 and -4 to the beginning of the numbers array. The output of this array will be the numbers from -4 to 13.

Removing Elements

So far, you have learned how to add values to the end and at the beginning of an array. Let’s take a look at how we can remove a value from an array.

To remove a value from the end of an array, we can use the pop method:

1

numbers.pop();

NB: The push and pop methods allow an array to emulate a basic stack data structure.

The output of our array will be the numbers from -4 to 12. The length of our array is 17.

Hopefully you’ve now got a solid understanding of how to make use of JavaScript arrays – put it into practice and see how much of an impact it has on the way you develop. If you want to learn more, you can purchase Learning JavaScript Data Structures and Algorithms 2nd Editionhere.

Alternatively, you can find a wealth of JavaScript content in one of our web development Skill Plans featured on Mapt. Sign up for free – subscribe for $29.99 to access an entire library of content.

Of course, they can’t be wrong. The source of truth for all Object-Oriented programmers is Design Patterns: Elements of Reusable Object-Oriented Software by the “Gang of Four”, which itself says to prefer composition over inheritance. It seems like most people don’t understand that though. They’re taught about inheritance and then try to do everything with that, but that’s not nearly as powerful or scaleable.

Back to JavaScript, which can take lessons from the design patterns book, but it’s a much different language than the one that that book was written for. Besides using prototypes rather than true classes, it is also filled with many bits of functional programming features. I’m not going to say “don’t use the new class keyword or inheritance,” or anything like that. I just want you to use the best tool for the job that you understand how to use. I want to say that going all out functional can be a great way to program, however, it’s not the simplest concept (at least, not if you dive in deep), so please just do what makes sense for you.

That being said, I’d like to show you some great examples of composition to help you learn how to use it and to show you where it can be helpful.

Function Composition

We’ll start with composition of functions, cuz why not? Let’s say you have the following very simple functions:

1
2
3
4
5

function addAndLog (a, b) {
    let result = a + b;
    console.log(result);
    return result;
}

This seems quite simple, but it can actually broken down into 2 completely operations: retrieving the result of an operation and logging the result. This means that if you want to just get the result of the operation without logging it, you’re out of luck, so let’s split the operation into a separate function:

1
2
3
4
5
6
7
8
9

function add (a, b) {
    return a + b;
}

function addAndLog (a, b) {
    let result = add(a, b);
    console.log(result);
    return result;
}

Great, now the addition operation can be used anywhere apart from the logging, but that addAndLog is still hard coded to log the result of the add operation rather than being generalized to use the result of any operation. So let’s split the logging functionality out into its own function:

1
2
3
4

function log (value) {
    console.log(value);
    return value;
}

I added the return statement at the end so that we can add, e.g.:

1
2
3
4

add(1,2); // returns 3... but we want to log the result too

// so we wrap it:
log(add(1,2)); // logs 3 AND returns 3 so the result can still be used elsewhere

Heck, one of the biggest reasons we can’t just stick with using console.log in this case is because it simply returns undefined. Anyway, these nested invocations of functions are one of the things I like least about functional programming practices because it is essentially read from right to left, which is now how we westerners tend to read.

So, one of the things we can do about it is convert log into a higher order function. A higher order function is a function that returns a function (simplified definition). The new function, which we’ll call logWrapper will be able to accept a function as an argument, then return a new function that invokes the function you passed in, plus do the logging, plus return the result.

1
2
3
4
5

function logWrapper (operation) {
    return function (...args) {
        return log(operation(...args));
    }
}

So now we can create our old addAndLog function like this:

1
2
3

var addAndLog = logWrapper(add);

addAndLog(1,2); // logs 3 and returns 3

Or we can combine it with any other operation, so it’s nice and generic.

That’s composition! You created flexibility by allowing the log function to be composed of any operation plus the logging functionality. Of course, now logWrapper is stuck with the logging functionality. There are several ways to generalize this even further by making a function that can take any number of functions and compose them together for you, but I think you get the idea. There are plenty of other tutorials out there about chaining or currying or piping or composing out there. I just wanted to give you an example.

View / Component Composition

I could just talk about normal object composition, but everybody has done that already. Instead let’s talk about composition of views and components (as in React components). Why views and components? Mostly just because everyone is using some sort of framework with views and/or components in them, so it can be more relevant.

React Component Composition

Let’s start with React, despite the fact that I’ve never written about React on this blog. A common example used for mixins is modals or overlays, whatever you want to call them. I think modals can be handled better with composition though:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const Modal = React.createClass({
    render() {
        return (
            <div class="modal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>this.props.title</h3>
                </div>
                <div class="modal-body">
                    {this.props.children}
                </div>
            </div>
        );
    },

    ... // all the life-cycle stuff
});

Since you are using props.children, you can just nest your view directly inside the Modal component:

1

ReactDOM.render(<Modal> <MyView/> </Modal>, mountNode);

Or you can use what is called a “higher order component”, which is a function that returns a component that wraps your component for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function modalify(WrappedComponent) {
    return React.createClass({
        render: function() {
            return (
                <div class="modal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3>this.props.title</h3>
                    </div>
                    <div class="modal-body">
                        <WrappedComponent {...this.props} {...this.state} />
                    </div>
                </div>
            )
        },

        ... // all the life-cycle stuff
  });
}

Now if you want your component to be inside a modal, you can pass your component into a call to modalify and you’ll receive a modal component that will display your component.

1

ReactDOM.render(modalify(<MyView/>), mountNode);

modalify uses the JSX spread syntax to pass all props and state down automatically, though it may be more useful to use something like Lodash’s omit function to strip out the modal-specific properties. The interesting thing about this higher order component pattern is that you can the wrapped component access to the life-cycle methods, or any other functionality that the modal has access to. For example, if the wrapped component is a form, you may want to close the modal once the form is submitted successfully, so you can pass the closeModal (not actually shown in the example code above) method to WrappedComponent as a property so it can call closeModal once the form is submitted.

You can technically pass access to those methods to MyView in the first nested components example like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const Modal = React.createClass({
    render() {
        return (
            <div class="modal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>this.props.title</h3>
                </div>
                <div class="modal-body">
                    {
                        React.Children.map(this.props.children, child => {
                            return React.cloneElement(child, {
                                closeModal: this.closeModal,
                                ...
                            });
                        })
                    }
                </div>
            </div>
        );
    },

    ... // all the life-cycle stuff
});

Instead of just using {this.props.children}, we use React.Children.map and React.cloneElement to augment the child views with modal functionality.

If you’d like some more examples of ways React can be composed rather than using inheritance or mixins, check out the post titled “Mixins Considered Harmful” by Dan Abramov. That post is actually what gave me inspiration for this post, since it primarily dealt with React and I wanted to go further and demonstrate it with Backbone too, which is what we’ll do now.

Backbone View Composition

You can do pretty much the same thing with Backbone as what we did with React, except Backbone doesn’t have that JSX syntax or as clean a way to pass child views around, but we can still do the same thing with options.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const ModalView = Backbone.view.extend({
    attributes: {
        class: 'modal'
    },

    init: function() {
        _.extend(this.options.childView, {
            closeModal: this.closeModal,
            ...
        });
    },

    render: function() {
        // Ignore the fact that I'm not using a template. Please!
        this.$el.html(
            '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
                '<h3>' + this.options.title +</h3>' +
            '</div>' +
            '<div class="modal-body"></div>'
        )
        .find('.modal-body').append(this.options.childView.render());

        return this.$el; // Assume this practice for all `render` methods
    },

    ... // all the life-cycle stuff
});

Then you can use it like this:

1
2
3

let myView = new MyView();
let modal = new ModalView({childView: myView});
$('body').append(modal.render());

You could also use a “higher order view” pattern like we did with React, but I personally believe that nested views make more sense in this case. The higher order view and higher order component patterns is generally more useful if you’re only adding functionality without wrapping the component in more HTML, such as adding an moveTo(x,y) method that animates the positioning of the wrapped component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function makeAnimatable(WrappedView) {
    return Backbone.View.extend({
        initialize: function(options) {
            this.wrapped = new WrappedView(options);
        },

        moveTo: function(x, y) {
            this.wrapped.$el.animate({
                top: y,
                left: x
            });
        },

        render: function() {
            return this.wrapped.render();
        }
    });
}

This pretty much does it. You’ll probably want to find a way to delegate all method calls to this.wrapped, though. Probably a simple way of doing this, though would be to just create a utility function that can be called from anywhere, rather than making moveTo a method:

1
2
3
4
5
6

function moveTo(view, x, y) {
    view.$el.animate({
        top: y,
        left: x
    });
}

But that would be too easy. ;) This is actually one of the advantages to having a language that is both object-oriented (not class-based in the traditional sense, but still object-oriented) and functional. Lone functions can often significantly reduce complexity versus trying to accomplish things with wrappers or inheritance or mixins, etc.

Conclusion

That’s all I’ve got for you today. I hope you’ve learned something useful: Composition, or even just plain functions as shown at the end, can be used to untangle some of the nastiest patterns in object-oriented programming. Just remember: composition over inheritance… and keep is simple, no matter which way you go. God bless and happy coding!

Just a note to prevent potential confusion, and to calm those who are sticklers for correct usage of terms (I’m one of those people), I use the word “compose” throughout this article; I’m using it in the general sense, not in the functional programming sense. “Compose” sounds more elegant than “combine” and its meaning is slightly closer to the idea I’m trying to convey.

Installation

Before you can start using the latest version of Gulp, you’ll need to get rid of your current version of Gulp. Normally, you can just update the version number in you package.json file, but there are a few things preventing you from upgrading quite so easily. The most obvious reason is that you probably have Gulp installed locally in the project and globally on your machine (If you’re one of the people who follows the practice of using npm scripts to access the locally installed version of CLI’s, great! But that still won’t help you much here). So, first make sure you uninstall Gulp locally, and if you have it installed globally, uninstall it there as well.

1
2

npm uninstall gulp --save-dev
npm uninstall gulp -g

Now we need to install Gulp 4 locally. Since it’s not officially released, we’ll need to get it straight from Github:

1

npm install gulpjs/gulp.git#4.0  --save-dev

Once it’s released, you can just use the normal npm install gulp --save-dev. Also, when it’s finally released, we’ll need to update our projects to remove the Github version and install the npm version. For right now, there’s another thing we need to install: the CLI tool. With version 4, Gulp is separating the CLI tool from the actual Gulp code, much like Grunt does today. This separate CLI tool will actually work for both Gulp 3 and Gulp 4 right now.

1

npm install gulp-cli --save-dev

If you don’t use npm scripts, then you’ll need to use -g instead of --save-dev to install it globally. Now you can use the same gulp command that you had previously, but you’re going to see errors because you’ll need to update your Gulpfile.js to be compatible with the new version of Gulp.

Tasks Refactored

If you’re doing simple tasks that have no dependencies whatsoever, you’re in luck! You don’t have to make any changes! Sadly, real people have to make changes. The big change here is that Gulp now only supports the 2-parameter version of gulp.task. When you use 2 parameters, it takes a string as the name of the task, and a function to run for that task. e.g. the following task would remain the same between version 3.x and 4:

1

gulp.task('clean', function() {...})

But what about the 3-parameter signature? How do we specify a dependency task? You will do so by using the new gulp.series and gulp.parallel functions. Each of these functions will take a list of functions or task name strings and return anothe function. In the case of gulp.series, it’ll return a function that runs each of the given tasks/functions sequentially in the order they were provided whereas gulp.parallel will return a function that runs each of the given tasks/function in parallel. Finally, Gulp has given us the ability to choose between sequential and parallel execution of tasks without the need of another dependency (traditionally run-sequence) or a bunch of crazy task dependency arrangement.

So, if you have this task before:

1
2
3

gulp.task('styles', ['clean'], function() {
    ...
});

It would be changed to

1
2
3

gulp.task('styles', gulp.series('clean', function() {
    ...
}));

When making the swap, don’t forget that your task’s main function is now inside the gulp.series call, so you’ll need the extra parenthesis at the end. This can be easy to miss.

Note that since gulp.series and gulp.parallel return functions, they can be nested, and you’ll probably need to nest them often if your tasks tend to have multiple dependency tasks, e.g. this common pattern

1
2
3

gulp.task('default', ['scripts', 'styles'], function() {
    ...
});

would be changed to

1
2
3

gulp.task('default', gulp.series(gulp.parallel('scripts', 'styles'), function() {
    ...
}));

Sadly, this is often a bit messier to read than the old ways, but it’s a small price to pay for greater flexibility and control. You can also write some helper/alias function to make this more terse if that’s your preference, but I won’t get into that.

Dependency Gotchas

In Gulp 3, if you specified several tasks that had the same dependency task, and each of these tasks was run, Gulp would recognize that all of these tasks depended on the same task and only run that depended-upon task once. Since we’re no longer specifying “dependencies”, rather we’re combining several functions together using series or parallel, Gulp can’t determine which tasks will be run multiple times when it should only be run once, so we’ll need to change the way we work with dependencies.

That’s a lot of abstract jargon being thrown around, so how about an example to clarify things? This example is adapted from an article on the Front-End Technology Talk about Gulp 4’s new task execution system, and they spend most of that article on this topic, so if I’m not clear enough, that article should bring some clarity.

Take a look at this example from Gulp 3:

1
2
3
4
5
6
7
8
9

// Per default, start scripts and styles
gulp.task('default', ['scripts', 'styles'], function() {...});

// Both scripts and styles call clean
gulp.task('styles', ['clean'], function() {...});
gulp.task('scripts', ['clean'], function() {...});

// Clean wipes out the build directory
gulp.task('clean', function() {...});

Note that the styles and scripts tasks both depend on the clean task. When you run the default task, it’ll try to run both styles and scripts, see that they have dependencies, try to run each of the dependencies first, realize that both tasks depend on the clean task, and ensure that the clean task is run only once before coming back to the styles and scripts tasks. That’s a very helpful feature! Sadly, it could not be ported to the new way of doing things. If you just naively make the simple changes to Gulp 4 like I do in the following example, clean will be run twice.

1
2
3
4
5

gulp.task('clean', function() {...});
gulp.task('styles', gulp.series('clean', function() {...}));
gulp.task('scripts', gulp.series('clean', function() {...}));

gulp.task('default', gulp.parallel('scripts', 'styles'));

This is because parallel and series do not specify dependencies; they simply combine multiple functions into a single function. So we’ll need to pull dependencies out of each task, and specify the dependencies as a series in the larger “parent” task:

Important note: You cannot define default before you define any of the smaller tasks it composes. When you call gulp.series("taskName"), the task with the name "taskName" needs to be defined already. This is why we moved default to the bottom for Gulp 4 whereas it could be anywhere in Gulp 3.

1
2
3
4
5
6
7

// The tasks don't have any dependencies anymore
gulp.task('styles', function() {...});
gulp.task('scripts', function() {...});
gulp.task('clean', function() {...});

// Per default, start scripts and styles
gulp.task('default', gulp.series('clean', gulp.parallel('scripts', 'styles')));

This of course means that you can’t just call the styles or scripts task independently while getting the prerequisite clean done, however, the way this was set up, clean would clean out the scripts and styles areas, so I’m not sure you would have been calling them independently anyway.

Asynchronous Task Support

In Gulp 3, if the code you ran inside a task function was synchronous, there was nothing special that needed to be done. That’s changed in Gulp 4: now you need to use the done callback (which I’ll get to shortly). Also, for asynchronous tasks, you had 3 options for making sure Gulp was able to recognize when your task finished, which were:

1) Callback

You can provide a callback parameter to your task’s function and then call it when the task is complete:

1
2
3
4
5

var del = require('del');

gulp.task('clean', function(done) {
    del(['.build/'], done);
});

2) Return a Stream

You can also return a stream, usually made via gulp.src or even by using the vinyl-source-stream package directly. This will likely be the most common way of doing things.

1
2
3
4
5

gulp.task('somename', function() {
    return gulp.src('client/**/*.js')
        .pipe(minify())
        .pipe(gulp.dest('build'));
});

3) Return a Promise

Promises have been growing in prominence and are now even being implemented directly into Node, so this is a very helpful option. Just return the promise and Gulp will know when it’s finished:

1
2
3
4
5

var promisedDel = require('promised-del');

gulp.task('clean', function() {
    return promisedDel(['.build/']);
});

New Asynchronous Task Support

Now, thanks to Gulp’s use of the async-done package and its latest updates we have support for even more ways of signalling a finished asynchronous task.

4) Return a Child Process

You now spawn child processes and just return them! You can essentially move your npm scripts into Gulp with this if you’re not really a fan of loading up your package.json file with a million commands or using a lot of Gulp plugins that can get out of date with the packages they’re wrapping. Might look a bit like an anti-pattern, though, and there are other ways to do this as well.

1
2
3
4
5

var spawn = require('child_process').spawn;

gulp.task('clean', function() {
  return spawn('rm', ['-rf', path.join(__dirname, 'build')]);
});

5) Return a RxJS observable

I have never used RxJS, and it seems kinda niche, but for those who love this library to death, you may be very pleased to just be able to return an observable!

1
2
3
4
5

var Observable = require('rx').Observable;

gulp.task('sometask', function() {
    return Observable.return(42);
});

Watching

The API for watching the file system and reacting to changes has had a bit of a makeover as well. Previously, after passing a glob pattern and optionally passing some options in, you were able to either pass in an array of tasks or a callback function that got some event data passed to it. Now, since tasks are specified via series or parallel which simply return a function, there’s no way to distinguish tasks from a callback, so they’ve removed the signature with a callback. Instead, like before, gulp.watch will return a “watcher” object that you can assign listeners to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// OLD VERSION
gulp.watch('js/**/*.js', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

// WILL CHANGE TO:
var watcher = gulp.watch('js/**/*.js' /* You can also pass options and/or a task function here */);
watcher.on('all', function(event, path, stats) {
  console.log('File ' + path + ' was ' + event + ', running tasks...');
});

// OR LISTEN TO INDIVIDUAL EVENT TYPES
watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed, running tasks...');
});

watcher.on('add', function(path) {
  console.log('File ' + path + ' was added, running tasks...');
});

watcher.on('unlink', function(path) {
  console.log('File ' + path + ' was removed, running tasks...');
});

As seen in the any and change handlers, you may also receive a file stats object. The stats only show up with their available (not sure when they would or would not be), but you can set the alwaysStat option to true if you always want it to show up. Gulp is using chokidar under the hood so you can look at their documentation for greater details, though it doesn’t accept the third argument for a function to run on every event.

Using Plain Functions

Since every task is essentially just a function now, with no dependencies or anything special, other than the fact that they need a special task runner to determine when asynchronous tasks finish, we can move away from using gulp.task for everything and start embracing independent functions rather than functions merely as callbacks being passed to gulp.task. For example, I would change the end result of the example we came to in the “Dependency Gotchas” section above from this:

1
2
3
4
5

gulp.task('styles', function() {...});
gulp.task('scripts', function() {...});
gulp.task('clean', function() {...});

gulp.task('default', gulp.series('clean', gulp.parallel('scripts', 'styles')));

to this:

1
2
3
4
5
6
7

// Just use function names with `series` and `parallel` to compose a task
gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));

// Change individual tasks to plain functions
function styles() {...}
function scripts() {...}
function clean() {...}

There are a few things to note here:

1. Thanks to hoisting, the functions can be defined below the definition of the default task, unlike before where the tasks that it composes together need to be defined beforehand. This allows you to define the actual runnable tasks at the top for people to find more easily, rather than defining the pieces of the tasks first and hiding the runnable task in the mess at the bottom.
2. styles, scripts, and clean are now “private” tasks, so they cannot be run using the Gulp command line.
3. No more anonymous functions.
4. No more wrapping “task” names in quotes, which also means that you’re using an identifier that your code editor/IDE can recognize is not defined if you mispell it, instead of needing to wait until you run Gulp to get the error.
5. The “tasks” can be split into multiple files and easily imported into a single file that uses gulp.task to define the runnable tasks.
6. Each of these tasks is independently testable (if you feel the need) without needing Gulp at all.

Of course, #2 can be rectified if you want them to be runnable by the Gulp command line:

1

gulp.task(styles);

This will make the new task called “styles” that you can run from the command line. Note that I never specified a task name here. gulp.task is smart enough to grab the name right off of the function. This won’t work with an anonymous function, of course: Gulp throws an error if you try to assign an anonymous function as a task without providing a name.

If you want to give the function a custom name, you can use the function’s displayName property.

1
2
3

function styles(){...}
styles.displayName = "pseudoStyles";
gulp.task(styles);

Now the task’s name will be “pseudoStyles” instead of “styles”. You can also use the description property to give details about what the task does. You can view these details with the gulp --tasks command.

1
2
3
4

function styles(){...}
styles.displayName = "pseudoStyles";
styles.description = "Does something with the stylesheets."
gulp.task(styles);

1
2
3

$ gulp --tasks
[12:00:00] Tasks for ~/project/gulpfile.js
[12:00:00] └── pseudoStyles  Does something with the stylesheets.

You can even add descriptions to other tasks that have been registered like default. You’ll first have to use gulp.task('taskName') to retrieve the task that was already assigned, then give it a description:

1
2
3
4
5
6

gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));

// Use gulp.task to retrieve the task
var defaultTask = gulp.task('default');
// give it a description
defaultTask.description = "Does Default Stuff";

Or to make it shorter and not add another variable:

1
2

gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));
gulp.task('default').description = "Does Default Stuff";

These descriptions can be very helpful to people who aren’t familiar with your project, so I recommend using them wherever applicable: it can be more useful and accessible than normal comments sometimes. In the end, this is the pattern I recommend as the best practice for Gulp 4:

1
2
3
4
5
6

gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));
gulp.task('default').description = "This is the default task and it does certain things";

function styles() {...}
function scripts() {...}
function clean() {...}

If you run gulp --tasks on this you’ll see this:

1
2
3
4
5
6
7
8

$ gulp --tasks
[12:00:00] Tasks for ~\localhost\gulp4test\gulpfile.js
[12:00:00] └─┬ default  This is the default task and it does certain things
[12:00:00]   └─┬ <series>
[12:00:00]     ├── clean
[12:00:00]     └─┬ <parallel>
[12:00:00]       ├── scripts
[12:00:00]       └── styles

Not only does your description do the talking, the names of the functions that make up the task will give plenty of insight as well. If you disagree that the above pattern is the way it should be done, fine with me. That should really be a discussion you have with your team.

In any case, I see some helpful improvements coming with Gulp, but it’s different enough to cause some potential headaches during migration. I pray this guide is enough for you to migrate over to Gulp 4 when the time comes (some days…). God bless and happy coding.

Whatcha Got?

The first thing to discuss is what they sell. If we’re talking about merchandise types, then they have stickers of many sizes, t-shirt, hoodies, mugs, 50x70 cm posters, and pins. That list will satisfy most people looking for a bit of merchandise to show off their love for their geeky passion. But which passions do they support? I really don’t want to write them all out here, so here’s a screen shot of their “Browse By Passion” section at the bottom of their site:

That’s getting there, and they’ll be adding more soon, which is good because this is by no means a full representation of all geek passions, right? If you want to have some input into what they have on the site, go to their Trello board and make a request or vote for your favorites.

Get $5 off your UnixStickers.com purchase

For a Cause

They don’t just sell you this stuff in order to earn a pretty penny for themselves, they also give some of their earnings away to open source projects! Straight from their donations page:

We decided to donate a significant part of our revenues to supporting FOSS projects

This is the most important decision we made since the day Unixstickers got started.

Being developers and fans of open source and free software is what motivated us to start this adventure in the first place, and we would have never got this far without passion.

We also recognize that our job, our business, and that of most of you would never exist without the existence of those very projects, foundations, organizations and individuals that make open source and free software possible.

How does it work?

At each purchase, you’ll be able to view from your cart how much we’ll donate, with the detail of what will be donated to whom. A significant part will be donated to the projects referring to your cart’s items, while the rest will be donated to a different initiative each month.

At the time of this writing, they’ve given away over $5000 FOSS projects, and they’ve only been doing this for about 2 and half months! So if you want to more than wear a logo on your chest in support of your favorite project, this is a great place to go!

How Does It Hold Up?

Now comes the important question: is their stuff worth buying? I asked them for a t-shirt to test because I didn’t think that reviewing stickers would be very useful. Well, along with the t-shirt I requested, they also sent a myriad of stickers and pins, so I have a few things to talk about.

The t-shirt has a bit of mixed review, but that’s mostly due to my size and the sizes they have available. The shirt itself is a very soft fabric, even after the first washing (so far I’ve only washed it once). In addition, it doesn’t feel terribly thin, so it doesn’t seem like it’ll tear after just a few weeks or anything (I cannot be held responsible if you tear your shirt). The one issue is that the max size they sell is 2XL (just XL for many shirts). This wouldn’t be terrible, but the 2XL that I received felt like an XL; in fact, according to the size charts on each site, UnixSticker’s 2XL t-shirts are smaller than the XL t-shirts on Tee Public. So, I would order a shirt size larger than you normally would. I wish now that I had also asked for a hoodie so I could give you an honest review about them as well, because I think t-shirts would at least stretch better than a hoodie.

The stickers I received, despite my original thinking that stickers wouldn’t be worth reviewing, really beat my expectations. They’re not like the stickers play with that come with an activity book or anything. These stickers are “printed from a sheet vinyl, covered by a layer of top quality transparent film to protect the ink and improve durability and beauty, then finely cut to follow the shape.” These suckers are heavy duty! They won’t tear without some serious effort, and they won’t fall off most surfaces. The nice thing about their sturdiness and materials is the fact they won’t leave a thin layer of paper if you try to peel them off, but they may still leave some adhesive. They also have what they call “Badge Stickers”. These are tiny stickers (.67in x 1.02in or 1.7cm x 2.6cm) that are meant to be placed on a laptop near the keyboard (like where you normally get stickers that say which OS and CPU come with your PC).

Finally we come to the pins. There is nothing spectacular about them, but I can tell you that I’ve definitely seen pins of worse quality, so we can at least buy from UnixStickers knowing that you’re not getting the worst pins! (I’m so helpful, right?)

Conclusion

UnixStickers seems like a great place to fulfill your geeky merchandise needs. So go fulfill them today! You can even use this link to unixstickers.com to get $5 off of your first purchase, as well as support me with a meager commission. I’m not recommending them because I want that commission. I’m recommending them because they’re a great company and the commission is just a nice bonus for those who trust and value my opinion. :)

Series

• Part 1: Basic Build Systems
• Part 2: Options and Variables
• Part 3: Organizing with Variants
• Part 4: Project-Specific Builds

Part 4: Project-Specific Builds

Transcript

Welcome to part 4 of this video series. In the last video we showed you how to organize your Sublime build systems using variants. This time around, we’re going to show you how to make project-specific build systems. With project-specific build systems, you can keep all the build systems that only pertain to certain projects out of your list of build systems until you’re actually working on a project that uses those build systems. Also, the file that contains your build systems can be placed in your project’s repository, so it’s easily shared with the rest of the team! Let’s get started!

We’ll start off by creating a project in Sublime. It’s simple to create a project. First, make sure you have the folder or folders that pertain to your project opened in the sidebar. Then, just go to the Project menu and select Save Project As. The best idea is to save the project file somewhere within the project repository, so that it’s available for every team member working on the project.

We’ll just save this project as ‘example’. There, now we have a project… you can’t tell much difference, though, can you?

The best way to know if you’re in a project and which project you’re in, is to look at the title bar. The project name will be in parenthesis near the end.

Now, let’s close this project, so I can show you how to open up the project.

If you go to Project > Open Project, you can find the sublime project file you just saved and open that to open the project up.

You can also find projects you’ve recently worked on under Project > Open Recent.

Finally, you can use Project > Quick Switch Project to bring up a little palette with all of your recent projects in it. This is really only useful vs Open Recent because you can bind a keyboard shortcut to this. Mac and Linux should already have a shortcut bound, but with the latest release of Sublime, they turned off the default binding because it often conflicted with other shortcuts.

If you want to set up the shortcut or change it, you can go into your key binding preferences and create one as I have on my machine.

Now that we know how to open a project and we have one open, let’s edit our project file. You can do that by going to Project > Edit Project.

You could also just find the project file in the file explorer and open it from there, but I tend to alter my settings to hide these files because they clutter up the file list.

If you take a look at the project file, you won’t find much: just a JSON file with the list of the folders in the sidebar, their paths relative to the project file.

There are several things you can do a in a project file. You can control what files do and do not show up in the sidebar with the file_exclude_patterns options, which is how I prevent the project file from showing up on the left. You can also use the settings property to override your Sublime user settings. This allows for some settings, like tab size, to specified for the project to guarantee that each member is using the same rules. Sadly, most setting don’t really make sense to be in here. I’ve linked to the documentation in the description below the video if you want to learn more about what you can do with projects.

What we’re here to focus on is Build systems, so let’s take a look at that. First, we need to add a property called build_systems, which is an array of build system objects.

Each of these object is just like the contents of one the build files we’ve done before, but since we don’t have individual files, they’re going to need names. So we give it a name, and a simple command, then save the project file.

Now if we take a look at our build systems, you’ll see our “hi” build system listed near the top, above a separator line that splits the project-specific build systems from the machine-specific build systems. If we had multiple build systems defined in that array in the project file, they’d each appear up here. Now let’s select our build system, and run it, wand we’ll see our expected results below.

Now let’s take a closer look at how we can put these build systems to work in real life situations. I’m going to copy a few premade build systems over to I don’t need to type them up.

As you can see, I actually have all of my build systems set up as variants of a single parent build system. Like I showed in video 3, these variants allow me to choose a single build system under the Tools menu, and then just use a keyboard shortcut to quickly choose which of the variants I would like to run.

The other thing of note here is that most of these are using npm scripts. I highly recommend this. It keeps your project’s build systems simple and clear, and it also allows you to easily run your builds without requiring you to be in Sublime Text or having to write out any long, complicated commands in the command line.

You may also notice that I’m using -s in all of the npm scripts. This is the “silent” option. Normally when you run an npm script, it’ll show a little message telling you what npm scripts you’re running and such. This -s just hides that message.

This last build system also has an env propery defined. This allows you to set environment variables so you can control your build process based on those as well. Finally, as you can see, there are no working directories specified. This is because the default working directory is the directory that the project file is saved in. If you’re paranoid, or if you need a different working directory for some build systems, you can still add them in here, just like with any build system.

Conclusion

Well, that’s all I have for you guys in this video series. I hope you learned a bit about how to use Sublime Text more efficiently, and as always: God Bless and Happy Coding!

Series

• Part 1: Basic Build Systems
• Part 2: Options and Variables
• Part 3: Organizing with Variants
• Part 4: Project-Specific Builds

Part 3: Organizing with Variants

Transcript

Welcome to Part 3 of Integrating Your Development Workflow Into Sublime with Build Systems. In the last episode we saw how to use other build system options and variables to create more powerful and dynamic build systems. This time around, we’ll be using something called variants in order to group multiple build systems into a single file. This allows us to switch between different related build systems with a simple keyboard shortcut, and prevents our list of build systems from getting unruly.

We’ll start by creating a new build system as we have before.

This time, though, instead of writing the command we want to use for this build system, we’ll create a property called variants, which holds an array of child build systems. We’ll add the same Node command that we’ve already used, but this time we also need to give it a name, since the name of the file refers to the parent build system, and if no name is given, the build system won’t be listed, so it’ll be impossible to run. We’ll also create a similar build system to the Node one, but this one will use babel-node which is similar to Node, but it uses a tool called Babel to convert future or alternative syntaxes, such as ES2015, to ES5 on the fly just before it runs the code using Node. It’s an npm package that I have installed globally, so it’s in my PATH and will run just by calling babel-node.

Now, before you go wasting your time trying it, you cannot add variants under a variant. I mean you can, but there’s no way to select a sub-variant, so it’s completely pointless.

Now we’ll save this as “Run JavaScript”. Then we’ll select it as the current build system and open up that JavaScript file.

This time, though, instead of just using Build, we’ll use “Build With…”, which has its own keyboard shortcut. It brings up a list of the sub-builds for you to choose. At this time, we’ll choose Node again. This gives us the expected results.

Now, if we choose to just Build, it’ll use the last sub-build system we chose, which was the node sub-build of Run JavaScript, as you can see.

Now let’s open a file with some ES2015 code in there and then choose “Build With…” again. This time we’ll select the Babel sub-build and run it.

And, once again, if we choose to just Build again, it’ll run the Babel sub-build once more.

Now we know how to make our own builds, but some of these build systems may only be useful on one project, and they are stuck on our individual machines. If they are specific to a project, then every person working on the project needs to make a copy of them. There is a better way, though, which is what we’ll be talking about in the next video.

Conclusion

Pretty much every build system I write these days is in a variant because there are always related things to do, and as you’ll see in part 4, most of my build systems are stored somewhere else… God bless and happy coding.

Series

• Part 1: Basic Build Systems
• Part 2: Options and Variables
• Part 3: Organizing with Variants
• Part 4: Project-Specific Builds

Part 2: Options and Variables

Transcript

If you watched part 1, you’ll know we finished off after running our first build system, and we saw that it listed the contents of the User Packages directory. This was because, by default, the build command’s working directory is the directory that the build file is saved in. In this episode we’re going to see how we can change this from the default as well as take a look at some of the other features that build systems give us.

So we’ll go back to our little build system file and make one quick edit.

All we’re going to do right now is add a working directory option in here, which, for right now we’ll simply set the it to the root of my C drive for simplicity’s sake and save the file.

If we run it again, we can see that the results show the contents of my C drive instead of my User Packages directory. As you can see, by adding options to our build, we can gain greater control over how our commands run, and I highly recommend you check out the documentation to see what all the possible options are. But we can do more than just set some options. What if we don’t want the working directory to be hard-coded, but instead be based off of what I’m working on? Well, for that sort of thing, we need variables.

To demonstrate variables, we’re actually going to abandon this LS build system, and instead we’re going to create a new one that is actually somewhat useful. We’re going to create a build system that will execute JavaScript files using NodeJS. Of course I’m assuming that you already have NodeJS installed, otherwise this won’t work.

For this build system we’ll set the command as "node", but that will just run the Node REPL since we haven’t given Node a script to run. Actually, let’s see what that looks like since we’re talking about it. We’ll save this as node.sublime-build.

Then we’ll select node as our active build system, and run it.

You’ll notice the results panel shows up, but we’re not seeing any output. That’s because we’re in the REPL, and it’s waiting for our input. Sadly, we can’t give it any input from here, nor can we hit ctrl+c to kill the process, so how are we going to stop it?

We do that with Tools > Cancel Build. There, now it says it was cancelled which means the process is no longer running.

Now we’ll give Node a file to run, which we’ll do by using the $file variable and putting it in the shell command. This variable refers to the full file path, including file name, of the file that is in focus in Sublime. Since we’re using the reference to the file directly, we won’t need to set a working directory or anything like that, so this is good. Let’s save it. If we try to run the build now, we’ll get an error because we have a non-JavaScript file open. If we closed all of the files so that there was no active file, we’d end up running the REPL again because the $file variable would be empty.

So let’s just open up a JavaScript file we can run. I have one such file here with an extremely simple bit of JavaScript in it, so let’s open it up.

Now let’s run the build (we don’t need to select the build system to run, since it should still be selected) and we get an error. What happened? Well, if you look up here, it’s saying that a module is missing, that usually means that Node is trying to load a file and can’t find it. In this case, we’re only trying to load the one file that we specified, so we’re not missing any dependencies. Now look at the path it’s looking for. That’s odd. That’s the correct start to our path, but it’s cut off. Turns out, the path we’re using has a space in it!

We’ll need to make sure that the file’s path is wrapped in quotes in order to avoid this problem.

Now let’s save it, run it, and we can see that the script we had open was run and the expected output can be seen.

If you want to see more of the variables that you can use in your build systems, you can read the documentation, which I’ve linked to in the description below the video. In the next video, we’ll combine multiple build systems into one file to organize related builds, simplify how we switch build systems (since there is no simple keyboard shortcut to choose a different build system), and keep the list of build systems from getting absurdly long.

Conclusion

It was great seeing you all again for this tutorial. Keep watching to get through the rest of the series in order to get to Build System paradise…ish. God Bless and happy coding!

Series

• Part 1: Basic Build Systems
• Part 2: Options and Variables
• Part 3: Organizing with Variants
• Part 4: Project-Specific Builds

Part 1: Basic Build Systems

Transcript

Hey there folks! I’m Joe Zim and I’m here to talk to you a bit about making your life a little bit simpler by integrating your projects’ development work flow into your favorite code editor: Sublime Text. Without integrating your workflow into your editor, you’ll end up doing what I used to do: constantly switching back and forth between my editor and my console in order to run my commands for builds and such. I kept exploring ways to integrate a console into Sublime Text, but none of them worked to my satisfaction.

Sublime does have a built-in console, but it may not be exactly what you’d expect. It’s more of a Python REPL. As you can see, normal console commands don’t work, but python code runs, and you can run Sublime-specific commands from in here, but that doesn’t really help me at all. However, I did finally find a solution that I am satisfied with and it’s built right into Sublime: build systems.

You can find all the build systems that come with Sublime and the ones you’ve created under Tools > Build System. This is where you select a build system to use, but right now, we’re actually going to create a new one.

Click the New Build System menu item and it’ll open up a new file with the most basic bits. You may see shell_cmd or just cmd. There are some differences between the two, but I’ve always found shell_cmd does what I want and seems to be easier to work with, so I don’t really know much about cmd. If you’re more curious about it than I am, you can look at the documentation linked to below the video to find out more.

Let’s change this make command to ls as a simple example of a command that we can use in our build systems to see how they work. Then we’ll save the build system. Notice that it automatically takes you to the user packages folder for your Sublime Text installation, which is where you want to save these so that Sublime can find them. We’ll save the file as ls.sublime-build, and then Sublime will use the file name as the name of the build system.

If we go to the Tools menu and look at Build Systems, we’ll see our new build system is now listed there. Sweet! Let’s select it as our current build system…

Now we need to tell Sublime to actually run the build. You’ll notice that I’m using the mouse and the menus instead of keyboard shortcuts. This is entirely for your sake, so you can see what I’m doing. If you’re a keyboard user, you can always look at the menus to figure out the keyboard shortcuts for yourself, or customize them to your liking with the Key Binding preferences. Returning from our tiny tangent, though, let’s run this build.

And there you have it! We ran a shell command without leaving Sublime and the output showed up in a panel at the bottom of the screen. You may have noticed that we never specified which directory this command should be run in, but it listed the contents of the User Packages directory. In part 2 of these videos, I’ll show you some more options we can give to the build system so we can make these build systems a little bit more useful!

Conclusion

This isn’t the end of these tutorials. This is only part 1 of 4. I’ll be releasing these articles one day at a time, but all of the videos are already available on Youtube. Feel free to click through the annotations or cards to make your way through the series, or just work your way through the playlist. God bless and happy coding!

Another Solution

This issue has been rattling around in my head a lot lately, and rattling hard enough to convince me to write 2 more posts (3 more if you count this one) about this subject on other blogs. The first went live September 4th on Sitepoint and is called How to Solve the Global npm Module Dependency Problem and the second was just published on Smashing Magazine as The Issue With Global Node Packages.

Those other 2 articles had something that my Part 1 article didn’t have: an alternative to just using npm scripts. Now, I must say that I still whole-heartedly advocate for using npm scripts if only to help out other people who pick up and use your project or even for yourself if your call to Browserify has several transforms or plugins that you don’t want to type in every time, but sometimes, you just want to type “grunt” or “gulp” or whatever the tool is and make something happen.

Before I reveal the “secret” that a fraction of you may be unaware of, I need to give credit to Gabriel Falkenberg for his comment on my previous post. He’s the one that introduced me to this trick.

So, the trick is that you can add relative paths to your PATH environment variable. For those who may not know, the PATH environment variable is what your console looks at when trying to find the executable file that matches the command you entered. So, for this, specifically, we can add ./node_modules/.bin/ to our PATH, preferrably before the path to the npm globals, but after practically everything else (for security reasons, see the comments by Francesco; you may also want to consider direnv if you’re on a Unix-based machine) so the local binaries will be prioritized over the global npm packages.

Personally, I also added ../node_modules/.bin, and ../../node_modules/.bin to my PATH so that I can be deeper into my project’s file structure and still be able to execute the commands I need. If you’re not sure how to change your PATH, check here if you’re on Windows and here if you’re using a Unix-based machine.

Conclusion

This made things much simpler for me, at least when I’m just getting started with a new tool. Generally, after experimenting for a while, everything will end up in npm scripts anyway. However you do it, I hope this helps you to start saving those modules as dependencies for the sake of everyone else who may work on your project. God bless and Happy Coding!

P.S. You can also just set up your code editor to run your scripts at the press of a button instead of only using the command line directly. I tend to use Sublime Text’s build tools on my projects so that I can just use a couple keystrokes to fire off my most commonly used scripts.

Recreation of the Blog

As I said, you probably noticed the redesign. Heck, I’ve been using Ezoic to experiment with layouts and ad placement to create the best possible income from the site while also providing a great experience for you guys as readers, so you may have noticed changes beforehand, but those weren’t “really” changes because they were being applied by some really cool software from Ezoic. I’ve temporarily turned off their experiments, so I can push my own changes forward, which is what you see right now.

The theme you see is a slightly modified version of Hueman. I needed something that was beautiful that I could get working quickly, and this was it. The reason I needed to change was because of a huge change to the back end of the site: I’ve moved from WordPress to a static generated site. In case you don’t know what that means, a static generated site is a site that let’s you author your pages and posts, etc. using something like markdown or plain HTML, but then you run a generator program that takes that content that you’ve written, and, combines it with a theme and creates an entire website filled with .html files.

Recently I’ve noticed that my site was being slow, plus WordPress was giving me inexplicable errors in the admin. The performance got so bad that my host (I’m on a shared hosting plan through HostGator) shut down my website’s account because it was using more than its allotted CPU and RAM resources way too often. I worked for days uninstalling and reconfiguring plugins to help the performance improve, which made it acceptable to my host, but it still wasn’t acceptable to me. So, static site it is!

I chose Hexo as my generator because I went on StaticGen.com and chose the JavaScript-powered (Node-powered) site generator with the most stars and took off. The site is now significantly faster, though it could still be improved. Note, though, I no longer support IE<9, which is freeing and helps me use a smaller version of jQuery. *smiles*

Now that it’s up and running, the next project is to create my own theme for it. Over 2 years ago I talked about rebranding the site and I’m finally going to do it, though it could still take several months or more. I’m going to do my best to make the site beautiful and focus on the reading, but still let me afford to keep the site up and running through ads.

Making It Better for You

I also have a few more changes in mind that will improve your experience on this site even more:

1. Back to writing some more: I’ll be attempting to get back to a more regular schedule for writing. No guarantees, since I’m actually running a couple other sites now as well plus my 4th child was just born, but I at least hope to bump the number above the 4 that I wrote last year, 1 of which wasn’t actually written by me.
2. Better Performance: I mentioned that I got a performance gain by switching to a static generated site, now I hope to make it even better, by…
   • taking more control over scripts/css to make sure there’s nothing being loaded that doesn’t need to be (mainly using a customized build of jQuery or even moving away from jQuery)
   • switching hosts to either Amazon S3 or Azure plus a more powerful CDN (this could also be a cheaper option than my current host)
3. Remove ads altogether! This one depends on you guys, though. Some time soon-ish, I’ll be starting up a Patreon account and if you guys can support me enough, I’ll drop the ads, which will make loading faster and remove all the ugly bits of the site.

Conclusion

This site may have been largely dormant for the past year and a half or so, but I promise a better future. Let me know if you have any other suggestions in the comments or on social media. I really want to get this site in tip-top shape so your input can be very important to me. Thanks everyone!

Here is an example demonstrating a number of interactive features. Hover over the values to see tooltips and the legend adjust in real-time.

See the Pen Weather Patterns (@jsblog) on CodePen.

Setting Up

JSCharting is easy to setup and work with. The following steps were used to get a chart up and running from scratch. There are also a huge set of samples included you can use as a base for customization for a given visualization requirement.

First include jQuery and the JSCharting library files in your page:

1
2

<script type="text/javascript" src="/JSC/jquery-latest.min.js"></script>
<script type="text/javascript" src="/JSC/JSCharting.js"></script>

Next create an HTML div element to hold the chart:

1

<div id="chartDiv" style="width: 540px; height: 325px">

And use jQuery to select the DOM element and populate it with a chart through the jQuery plugin API:

1

$('#chartDiv').JSC(chartOptions);

The chart options define a series with four points using the following code:

1
2
3
4
5
6
7
8
9
10
11
12

var chartOptions = {
  series: [{
    name: 'Saw',
    type:'column',
    points: [
        { name: 'Q1', y: 230  },
        { name: 'Q2', y: 240  },
        { name: 'Q3', y: 267  },
        { name: 'Q4', y: 238  }
    ]
  }]
});

You can get a reference to the chart object itself by calling the JSC() function on the jQuery element bound to the chart without any parameters.

1

var chart = $('#chartDiv').JSC();

Chart Types

To specify a chart type, a simple setting such as {type:'column'}can be used. This can be set at the chart options level or at the series level. There are many chart types available in the library and some cases can be complex to set, however, JSCharting uses an interesting approach to simplify this configuration. All of the different chart types and options are defined within a hierarchy of chart types allowing settings such as {type:'funnelSquareInverted'} which traditionally would require separate settings such as { type:'funnel', funnelShape:'square', funnelOrientation:'inverted'}.

JSCharting offers a large number of chart types which can be explored through their gallery.

Label Tokens

A nice feature that makes the charts more dynamic are label tokens. These are predefined tokens at various levels which apply to the entire chart, to a series, or to individual points. For example, the chart title allows chart level tokens to be used as such:

1

{ titleLabelText: 'Acme Tool Sales Total: %sum Best Seller: %maxSeriesName' }

At the series level, we can specify tokens for the legend entries as follows:

1

{ defaultSeriesLegendEntryText: ' %name  %sum' }

These tokens work automatically in most labels, tooltips, urls, and other text associated with the chart, series, or point. The following example demonstrates these two property settings.

See the Pen vNmEqj (@jsblog) on CodePen.

Code

The chart options are coded using a well organized declarative API which separates the internal functionality and programming concepts from charting concepts and settings. The end result is a solution that enables developers to do what they need, with less time, less code and less confusion.

The library has the ability to identify a misspelled option setting and warn the developer before a chart goes live. This internal API database has been leveraged in another interesting way. There is a setting used in the example above: { defaultSeriesLegendEntryText: ' %name %sum' }. However, this is not an actual property name within the API. This is defined as defaultSeries:{ legendEntry:{ text:'%name %sum'}}. Yet, the chart can recognize that defaultSeries is a property, and that legendEntry is a property of it, and that legendEntry contains a text property. Therefore, it allows this setting to be used. Developers are free to use this shortcut syntax or utilize the fully expanded syntax based on their preferences.

Smart Tooltips

The automatic tooltips are well suited to annotate data without any specific settings in most cases. The chart examines the axis labels and formatting to create a descriptive tooltip for each point by default. For example, when we define a y axis label and formatting with this code:

1
2
3
4

yAxis: {
  labelText: 'Sales (USD)',
  formatString: 'c' /*Currency Formatting*/
}

The tooltip automatically describes the y value of the point with text such as “Sales (USD): $434.22”

JSCharting often surprises you with little details that save developers time and extra code to get a polished result.

Mapping

The new mapping chart type offers an integrated set of world countries and their states / provinces. These maps can be viewed through the following sample JS Maps of all world countries.

It’s nice that you don’t have to find shapefiles or geoJSON source files to make a map as the various geographic areas are pre-optimized and ready to use. You also don’t need to learn a new mapping based configuration API and can continue to leverage the standard series and points you are already familiar with.

Drawing a simple map of the US is possible with only these few chart options:

1
2
3
4
5
6

{
  type: 'map',
  series: [
    {map: 'US'}
  ]
}

Modifying this chart to show Illinois in red is accomplished by adding a point the the US series bound to IL and a color setting as follows:

1
2
3
4
5
6
7
8
9

{
  type: 'map',
  series: [{
    map: 'US',
    points:[
      {map: 'US.IL', color: 'red'}
    ]
  }]
}

See the Pen Weather Patterns (@jsblog) on CodePen.

JSCharting provides a context feature for its geographic mapping charts that automatically offers context for the primary map through an optional list of areas to draw in the background. For example, if my series only showed a point for US.IL, using this setting would draw the rest of the US around it, but without having any other effect on the chart like adjusting the zoom or view portal to the full extent of the US map boundary. Context mapping areas are also drawn in neutral tones to not draw attention away from the primary area of interest.

1

{ mappingBaseLayers: 'US' }

Maps can also be loaded dynamically (in real-time) and zoomed interactively.
After a chart is initialized, adding a country map is as easy as:

1

chart.addSeries({ map:'US' });

This codepen illustrates the flexibility of the mapping component of JSCharting quite well along with the aforementioned dynamic loading features:

See the Pen Click to load maps. (@jsblog) on CodePen.

For more examples of mapping ease of use and functionality, check out their map feature gallery.

Conclusion

JSCharting gets you up and running quickly with a full set of vector and resolution independent chart types to meet your visualization needs. With such a crowded field of charting tools that all claim to do the same job, JSCharting aims to do the same with a more intuitive API and less code while generating a result that gets more things right by default (which in turn, saves more code). For developers, more code equals more time and the reason we choose to use a charting library in the first place is to save time (vs hacking away with D3 or building something from the ground up)! JSCharting has a level of polish and the more you work with it, the more niceties you discover.

Why Should I Love God

First off, I know for a fact that God is real and that He also loves me. Don’t bother debating me on that because you’ll either lose (and therefore potentially win in the best way), or we’ll have a stalemate due to stubbornness. Anyway, He has done so much for me.

Specifically:

• He created me.
• He humbled himself from the ultimate being of the universe down to being a poor human for our sake.
• He was sinless so that I didn’t have to be.
• He gave up his life in the most excruciating way physically and spiritually so that I would be able to draw near to him, blameless, and spend eternity with my creator instead of spending eternity in a place of torment.

Why wouldn’t I want to love such a wonderful God?

Passion Redirection

I’m glad that I have been unable to build this blog up as much as I had hoped/planned, because it is now still a personal blog and I cannot have anyone telling me what I may or may not post on here. This is good, because I hope to now write about what God is doing and has done in my life and in the world more often here.

Don’t worry too much if you’re just here for the JavaScript stuff and could care less about a Christian talking about God; I will still be writing about JavaScript, as this _is_ a JavaScript blog. I’ll be trying to keep the “awesome”s and such to a minimum, though, since nothing is more awesome than God.

Conclusion

Now that I’ve gotten that out there, I’ll be signing off for now. In the meantime, you can read my explanation of the Gospel for geeks. God bless and happy coding.