Check out my latest book of drawings!
Rapid Transit

This is really just for me...
August 11, 2018, 12:21 pm

So you want to write in vanilla Javascript. But you've definitely noticed it's missing some shit. And if you haven't noticed, it's because you never really learned how to write jQuery.

One of the major reasons I will probably not give up jQuery any time soon, is because of event delegation. Event delegation is a great way to make event listeners that don't require an existing element yet. This lets us set up events for any element that MIGHT exist some time in the future.

Well here's a small function to add super basic event delegation for a space separated string of classes to your code setup.

function delegateEvent(delegate,event,target,callback){ var targets = target.split(" "); delegate.addEventListener(event, function (e) { targets.forEach(function(o){ if ( e.target.classList.contains(o) ) callback.apply(e.target,[e]); }); }, false); }

It's pretty simple. But it's a major relief to have this written out even for myself.

You could even take this one step further. You could add a delegate function to all object prototypes. This is technically a bad idea for big projects, but you shouldn't be writing very much code like this for that size of a project anyways. You should be using some framework or library.

Object.prototype.delegate = function(event,target,callback){ this.addEventListener(event, function (e) { var targets = document.querySelectorAll(target); [].forEach.call(targets,function(o){ if ( e.target == o ) callback.apply(e.target,[e]); }); }, false); }

This even gives us the ability to create query selectors instead of just class lists like the previous example.

Javascript Functions, Closures, and the IIFE
June 29, 2018, 9:14 am

When writing code in Javascript or any programming language, one of the core concepts that a developer has to wrap their heads around is the function. If variables are values to be referred to at a later time, functions are whole sets of code to be referred to later.

Function

function myFunc() { // Do something }

You can also define a function as a value, or as an anonymous function. Normally functions are hoisted to the top of the code and run first, but an anonymous function is created inline with the rest of the code around it.

Anonymous Function

var myFunc = function() { // Do something }

There is value in both of these methods. It is important to know your options and explore their relevance. But there are even more options.

Sometimes it can be handy to define a function that defines it's own lexical scope. This allows local variables to be set up statically.

Closure

function foo(){ var id = 5; var bar = function() { console.log(id); } return bar; } var foobar = foo(); foobar();

This series of code has some very interesting implications for scope and how to create functions that have their own values. The id variable only exists inside the foo function, but the foo function returns the bar function as a value, and since the bar function was made inside foo, and after id, it also has access to the id value. Closures allow you to segregate your values and give unique scope to parts of your project. This becomes especially useful when you want to write code for libraries and larger repositories.

Immediately Invoked Function Expression

(function() { // Do something })()

Then there is this beast. A function with no name. No real declaration, but put inside of an expression syntax that fires it off immediately. What is the point? Why wouldn't the do something code simply be code, why does it need to be wrapped up like this?

Well, defining a function anonymously allows it to be passed around by value in a much more flippant manner. Most often anonymous functions are used for callback reasons. However, if it tries to access values that were created outside of it's scope it accesses them dynamically at their current value. This can be an unwanted effect, that is most often run into when defining a callback function inside of a loop.

If you make 3 buttons dynamically in a loop, and have them each print out the iterator value on click, all of them will print out the last value, because at the time of clicking, the iterator would have only its final value.

for(let i=0;i<3;i++){ $("body").append($("< button>").click(function() { console.log(i); })); }

This exact situation is when an anonymous function called immediately to provide closure to its scope is most effective. But it gets more complicated. Any method that is expecting a function to be passed into it must receive a function. And a closure that returns a function as a value is a goofy thing to look at.

Anonymous Closure Callback Immediately Invoked Function Expression

var i = 5; $("button").click( (function(id) { return function() { console.log(id); } })(i) ); i = 10;

Now, that's just weird to look at your first time. It will start to make sense the more you end up using it. The IIFE is being passed a variable in order to give closure to it's current value. The i variable gets passed in at the end of the closure, and then is referred to on the inside as id. This means that no matter what might happen to i in the future, when the click happens, the value of i has been stuck into the static value of 5 in id.

[edit] So um... turns out that loop example doesn't produce the result I said it would which means.... That's not actually a problem when you use the let declaration, instead of the var. But the final example still matters.

I finally found a reason to curry
April 25, 2018, 6:43 pm

Currying functions is not necessarily a hard concept to understand. It goes like this: You make a function that returns a function for something else to call as a function.

...

Hold on. Let me give you an example.

var a = function(num1) { return function(num2) { return num1 + num2; } } var b = a(3); var c = b(3); // output 6;

But here's the thing. That example really makes no sense. What's going on here? And why would I do this?

Well first of all, you wouldn't. That's a too simplistic bad example. I can see you saying "I would just make one function with two parameters" and you would be right of course. That's a much better use for that example.

But what if you needed a kind of a function that needed to do some things, and prepare some things, and then have a unique kitchen table prepared for a meal to be prepared again and again in the future?

What if you needed a table command that prepared a particular kind of bread. And then anyone could come along to the table they liked and make sandwiches out of the bread at that table. Sandwiches always get made the same way, but the bread needs to be prepared first.

var makeBread = function(breadtype){ return function(jamType,pbType) { return `${pbType} and ${jamType} on ${breadtype}`; } } var wheatSandwich = makeBread("wheat"); var sandwich1 = wheatSandwich("jelly","creamy pb"); var sandwich2 = wheatSandwich("marmalade","crunchy pb");

So now we don't have to define wheat anymore. It's part of the function. But using the original makeBread sandwich we could still define another style of sandwich if we wanted to.

I recently found currying useful while working on my drawtools library. Currying a tool for loading images into a canvas allows me to set up a function that caches a particular image into it's own memory to then draw onto a canvas.

Constantly moving forward
October 21, 2016, 10:58 am

I have been working on using the canvas recently, and I am coming out of it with a bit of code. I've compiled that into a library of code called DrawTools. This library is still a bit haphazard at the moment, but it's starting to round out, as I improve my own knowledge of drawing on the canvas, and gathering positional data on clicks and touches.

I have a small example using the library, that I wanted to share with you, that I put together for one of my students, maybe it will give you an idea of how easily things can be done with it.

... or maybe not, I don't know.

A minor suggestion
August 17, 2016, 8:51 pm

I have always held off suggesting books for students to read when learning things in my class. Mainly, because I believe that someone else's methods and speeds of teaching will often interfere or even hinder someone learning things in my class. I think websites like Code Academy and Lynda provide brilliant tools for people to learn things at their own pace and at multiple levels. But being that I teach high level classes, I often find these sites either move too slow, or never reach a proper level.

I have, however, recently read a book that I feel is quite good, and I could recommend to people wanting to learn programming using the Javascript language. Eloquent Javascript is really quite a good book. I often tell my students that really the only thing they need is a reference for the guidance they will get in a class. In that case, I would usually just point someone at Javascript Pocket Reference

I made a thing
December 21, 2015, 10:29 pm

Some of you may have seen this thing when it made the rounds this last week. I made a little app website called eXHALeR. It's a breathing exercise app, and I'm kind of proud of it. There's a facebook page now for discussing breathing patterns and such. If you have any ideas, definitely share them with me.

A contextual difference
July 11, 2015, 11:27 am

There is a major difference between fundamentally learning how to program, and learning a new programming language.

Let's look at an example.

$a = 0;

If you said, "That looks like code!", congratulations, it's your first day. Have a lollipop. If you said, "That's a variable assignment", congratulations, you seem to know how to do basic programming. If you said "That's a variable assignment in php", congratulations, you seem to know the basics of PHP. If you said, "That's a variable assignment of the number zero, which has a basic value type of Number, to a variable with the designation of $a, in the php programming language", then congratulations, you're a huge nerd! But what about when the language is less obvious, or you don't know that particular language. Should you still be able to figure stuff out?

function sqr(num:Number):Number{ return num*num; }

Now, if you didn't know that was Actionscript code, that's ok. Not everyone does. But you should be able to use your knowledge of basic programming to figure out what is going on. It seems to be a function definition. Something called sqr(). I'm not sure what those colon parts are, but it seems to be a basic type of value, so I'll bet it's saying num will be a number. I can only assume then by the second :Number placement that sqr() is also supposed to be a number? The function seems to be multiplying the number by itself, then returning that value.

Did you see what I did there? I don't know Actionscript 3. I learned Actionscript 2, back in the day. Actionscript 2 did NOT have type casting. I found that code on the Adobe help site when I searched for "actionscript function return value".

Learning to program means you should be able to know a few basic concepts, and recognize those concepts in any language.

  • What is a variable?
  • What is an array?
  • What is a function?
  • How do I if else?
  • How do I loop?

Those are the core concepts of programming. And they are (mostly) language independent. If you can figure out how to do those things, you can probably write anything in any language.

... after about 2 months of intensive study in that new language just to get anything to freaking show on screen...

It can be difficult in the early days of learning your FIRST programming language to measure the difference between learning that language's syntax and learning the essentials of programming in general. It might not even ever become clear to you until you attempt to learn your second programming language. Suddenly things that weren't important before can become very important. Suddenly things that were so hard before can become easy. Changing languages is a difficult task, and learning your first language can feel like a monumental challenge. It isn't until you learn to differentiate the fundamentals of programming, from the idiosyncrasies of a particular language, that you will truly begin to reach your potential.

  • 0