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.

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 work in progress
October 8, 2016, 10:38 pm

hakisak

About five years ago, I made a bouncing balls script for my Flash class at LearniT. I've had that linked in my Codes page ever since. A while back, I made an updated version in html5 using a jquery library called jCanvas.

I've been doing a lot of work with the canvas lately, and I decided to go back to the drawing board with that script. I even bought a new domain name. You know me. Anyways, HAKiSAK is up and running, and I am currently working on it, so it could break at any moment, but it's playing pretty good these days, and I'd like it if you check it out and told me what you think.

I made a breathing app...
March 5, 2016, 9:52 pm

You may have seen something about it on facebook or twitter. I'm working on making it embeddable for others to put on their websites. Let's try that here.

Copy this code onto your website to embed the xhalr breathing app into it.

<iframe src="http://www.xhalr.com" width="400" height="400" frameborder="0" allowfullscreen style="max-width:100%"></iframe>

An hour of code
December 9, 2014, 12:38 am

This week is Hour of Code week. It's a national event to try to get kids interested in programming. I'm a big proponent of everyone knowing at least a little about how to program. I think it all seems so scary, because most people don't have a simple enough place to start.

I am doing a presentation at the Apple Store in downtown San Francisco this Thursday, December 11th. It is going to show you how you can make a simple image gallery with a little bit of html, css, and javascript. This is for absolute beginners to get an idea of what is possible with a relatively small amount of code. If you want to get a head start, the code I'll be making can be found here. I'll be talking about the programs I use, and how getting started is the biggest hurdle.

I personally think everyone should have their own website. Not everyone has to put in my level of effort, but to be fair, I've put in nearly 20 years of effort, and now you can just reap the benefits of my experience. But I definitely think everyone should have more than an auto generated webpage that's just created by wordpress or wix. Make a little code and create something.

If you're interested in web tutoring, in San Francisco, I would love to help you get up and running, so hit me with an email.

Here is a list of important links for this presentation.

  • 0