Icons and libraries
July 10, 2020, 3:15 pm

So I have a thing that I work on periodically. It's a library of javascript code that is... well more or less a jquery replacement. But it's something I wrote, and it's something that does what I want. And I made it to learn a lot, but also because it's small, and it's clean, and I like it. It doesn't really have a name, but it's part of my apptools collection on github, and it just got a new release.

I was working on another project, my icon library, and I started to convert it to something that uses my library, and it had ALL KINDS of problems when it came to querying on an svg element. Turns out I had to solve lots of problems, and I had to solve a number of them, and I had to set up an ampps server to get everything working right, and it was just a whole thing.

But I think I fixed a number of necessary issues with my library, and it's never felt better. Not just its use, but also my whole work process got streamlined a bit, and it felt really good.

... Maybe I'll update my website one of these days.

A bit of an overreaction
March 7, 2020, 2:15 pm

So I've been learning react recently. I've been getting pretty far into it. I'm pretty confident at this point that I understand the concepts, and I'm able to execute on React Hooks effectively.

I made a quick little demo example TicTacToe game, because one of my colleagues was doing a tutorial, and I wondered if I could write one from scratch. And the answer is, I COULD, but also I pulled a tiny bit of code from one of my old examples. But honestly I just pulled the win arrays, because my brain shut down, and I couldn't think of how to do them for a second.

So if you're interested, here's a quick React app of TicTacToe, and the Github repo to go along with it.

I'm enjoying React a lot these days, and I've started multiple projects in it. It's groovy, and I like the build processes.

Who was in that film with that other guy?
September 10, 2019, 8:42 am

A while ago I made a thing, but I never really released it, because it was never really done. It still isn't, really.

Sometimes when I'm in a bar, I want to know the name of an actor. I don't remember their name though. I don't remember the name of the movie they were in. But I do remember they were in another movie with another actor, and I remember that actor's name. Playing this game of musical chairs with names is something that can sometimes be frustrating when you don't remember anyone's names, but you remember their faces.

I also sometimes wish I knew all the movies that two actors have been in together. Or all the movies an actor and director have worked on with each other. Or perhaps all the actors that appear together in two movies.

I've always wanted an app that could cross reference these things, and honestly, I always wanted to make it myself. So I started work on it recently, using VueJS and The Movie DB. It was a lot of fun, but I wasn't really liking basic VueJS. So I'm working on remaking it in my own framework. But more on that later.

For now, you can find this tool at FilmsWith.com. Check it out, see if you can figure out how to use it... I often find that it's just nice to browse a site of faces.

Javascript continues, so I make silly things
February 16, 2019, 2:56 pm

I am continuing my own javascript education. I have begun documenting some instructions, which I will divulge soon, hopefully, but I've also begun redesigning some old examples that I made for students, in order to make them more accessible. One such example is from my app development class where students often want to add more interesting interactions to their projects. It's difficult to suggest things to them, especially since simply pointing them at HammerJs rarely results in them spending effort to fully understand that library, and instead just confuses them by making them search all over the internet for a simple solution to that toolset.

So here's one fairly simplistic example. Not only for my students, but of my current goals. This is an IOS style list item swiper. You've definitely seen these before.

See the Pen Vanilla Javascript IOS style list item slide reveal by Hamilton (@bronkula) on CodePen.

The content inside of the elements, and the look of them, is mostly up to the developer. This particular class, which can be found on github, has a number of options, including an onupdate method which will be sent the swiper object to give the developer freedom do do lots of things.

Many interesting layouts can be created and used, and I'm still currently working on some other options. If you'd like to mess with these examples, you can find them on my Codepen.

The Unit Circle
December 15, 2018, 5:14 pm

I got a little bit obsessed with trigonometry this last year, and over the last week, I really tried to understand as much of it as I can, and how it is used in Javascript. I made a thing. There was a Reddit post about a unit circle gif, and I said to myself. I can make that, but better and interactive. And so I tried to. Here is an embedded version of my Unit Circle.

This thing is a kind of big deal to me, because it represents a lot of big things. One thing is my general shift over the last year toward actually documenting the things I make. I've been working hard on a lot of projects, including my drawtools and apptools libraries. I've been learning a lot about the latest ECMAScript in order to push my own knowledge and really be able to make these tools be great and useful.

And I'm kind of really proud of myself. People look at my art and they either like it or they don't. But people see the things I code and it feels like they think "I wish I understood this" Because I must be so excited about it. And they aren't. My code is like a high schooler's poetry. No one cares. I'm writing a pity party right now. That's what this is. I'm having a party just for me, and the topic is poor me. But it's what I feel sometimes.

I just have to say for myself that I'm proud of me. And if you're proud of me, I hope that you'll share some of the dumb things that I make sometimes.

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