Tag Archives: Coding


Bulma Navigation: What the documentation is missing

Lately, I have been playing around with Bulma.  It is a CSS framework based on Flexbox.  It is similar to Bootstrap but it does not have a javascript component to it.  One of the first things that I wanted to figure out was the responsive horizontal nav bar.  Unfortunately, the example within the official Bulma documentation does not fully function and does not describe it completely. After a little poking, I figured it out, though.

There are two big differences between the above example and the one within the Bulma documentation. The Bulma documentation doesn’t specify that the nav-toggle span only handles display of the hamburger menu icon. It also doesn’t mention that you need to apply the is-active class to the nav-menu div in order to open it. This means that you need one bit of javascript in order to toggle the class. You will find that within the onclick attribute of the nav-toggle span within my example.

Have a question, comment, or suggestion on how to do this better? Please feel free to drop a comment below.


How to generate keys with the Web Cryptography API

I have been playing around with the Web Cryptography API a lot lately.  My most recent post was about getRandomValues().  I wanted to take a moment to investigate two more methods: generateKey() and exportKey().  The generation of a good cryptographic key is fairly fundamental.  I wrote up a short demo app, to demonstrate how the two functions work.

The code outputs to the console, so make sure to have Firebug open when you run the app.  Also, keep in mind that the Web Cryptography API is not fully supported in every browser, so not all of the functions in this demo will work everywhere.  I added in a description box for the crypto algorithms, so you can see the details of each one.

Have any questions? Feel free to drop a comment, below.


Generating random numbers with the Web Cryptography API

The W3C has been working on a Web Cryptography API for a while, now.  The current version (11 December 2014) is their “Candidate Recommendation”.  As such, I would not necessarily consider it fully ready for primetime but that does not mean that we can not play around with it a bit.  I figured that today, we should take a check out getRandomValues().

According to MDN, “To guarantee enough performance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy.”  You do not want to use this method to generate encryption keys (especially since generateKey() is available within the same API).  I think that this method is more foundational than anything.  It is just meant to be part of the plumbing.

Like usual, you can find the code behind my example here or check out the final result here.

Have some thoughts? Drop a comment below.


How to use FileReader() to generate data URLs

These days, the lines between the web and the local environment can be very blurry.  There is a web API called FileReader() that nicely adds to that blurriness.  It lets you asynchronously read the contents of a file on the user’s computer.  I am going to show you one way of using it.



So, what am I doing, here?  There is an input tag that is set up to accept images.  It triggers openFile() onChange.  The openFile() function looks at the first (and only) file supplied and reads it as a data URL.  The function then changes the innerHTML of the “TheImageContents” div to contain an img tag that uses the data URL as the source.

The code behind this demo is available on jsFiddle and Github Gist or you could just test the final result on jsFiddle.


Coworking in Milwaukee

As you may know, I have recently joined the ranks of the remote knowledge worker.  When Quality Matters hired me, I made the decision to get an office outside of the house.  Since QM does not reimburse for office space, my budget was limited.  I decided that it made sense to aim for a solution within the $100-$150 per month price range.  After a brief session of searching Duck Duck Go for options, I identified six potential solutions. Continue reading


A responsive, AngularJS “movie picker”

So, I have been working on a little side-hustle and I figured that I would share the most recent chunk of it.  I needed a way of allowing a person to uniquely select a movie.  You don’t want to just give the user a free-form box because of the 52 different ways you could input some movie titles.  So, what do you do?  I created a search box, to query IMDB by title.  The API returns a single result, so I displayed it below the search box, as the user types.

I wouldn’t call this an “official” API, so I would be careful.

View in Plunker

Run in Plunker

View in jsFiddle

Run in jsFiddle