Mikael's blog

A developers seventh time trying to maintain a blog

Tag #javascript

Re-sizing Images in Javascript | May 2, 2013 at 17:50

[Uploading files asynchronously](//lofjard.se/post/async-file-uploads-in-html5) with XMLHttpRequest is a neat trick on its own, but what I really wanted was a nice way to upload images from my phone and/or tablet. The problem with this is that technology is evolving quite rapidly these days and my smartphone has an 8 megapixel camera. 8 megapixel pictures averages around 2.2 MB on my iPhone 5 and Chrome (and others) defaults file uploads with XMLHttpRequest to 1 MB. Now, one can easily find their way around such limitations but then you just run straight into the arms of the next thing limiting your upload sizes; the web server. And even if you would change all the settings, to allow larger file uploads, you'd have to ask yourself if that's what you really want. It wasn't what I wanted.

Async File Uploads in HTML5 | May 1, 2013 at 20:30

Uploading files using HTML forms has always felt a bit off for me. You had to set your encoding to `multipart/form-data` and the synchronous nature of form posts always made it a waiting game when uploading larger files. Then came AJAX and the dawn of "single page applications" and such buzzwords, but file uploads somehow got left behind. Javascript didn't have the access it needed to send files with the `XMLHttpRequest`. Years passed and along came the File API and XMLHttpRequest Level 2 (it seems to be called that again) with its `upload` attribute, support for byte streams and progress events. Today I'm going to show you how to build an asynchronous file uploader with it. We'll start with the HTML part: ```html <input type="file" id="files-upload" multiple /> <ul id="file-list"></u

Search And You Shall Find | April 26, 2013 at 22:09

Every blog should have a search box. Not because it's necessary, but because it's fun to implement. A few weeks ago I ran across a small Javascript library called [Lunr.js](https://github.com/olivernn/lunr.js). It's basically a small text indexer that can rank search results and it's written entirely in Javascript, just the way I like it. Setting up an index is really easy: ```js var searchIndex = lunr(function () { this.field('title', { boost: 10 }) this.field('content') }); ``` Then you just add some documents to the index: ```js var doc = { id: "a-blog-post-title", title: "A Blog Post Title", content: "This is a crummy example blog post...", }; searchIndex.add(doc); ``` Then you can search for it by simply calling `searchIndex.search('crummy blog');` and that will return

The Gift of Source Code | December 21, 2011 at 16:00

I'm not sure if anyone is interested in my source code for this blog, but since I've already posted some bits and pieces of it from time to time, I thought, why not release it all? If your browser has a width of more than 720 pixels, you will see a new button in the menu labeled "Source code". Feel free to browse, and enjoy! DISCLAIMER: Not all of my code is that pretty and I've been meaning to refactor some of it. In other news, I'm leaving for the west coast tomorrow morning, so this might be my last post this year. It all really boils down to how tired I will be after playing with all my lovely nephews and nieces all weekend. Merry Christmas and Happy New Year!

A Tiny Bug | December 9, 2011 at 23:20

I've been using (and still am in production) an old JavaScript function called `parseInt` when parsing my DateTimes for comments and posts. For some reason it showed some weird behavior today. I noticed a comment that was written on December 0. I looked it up in the database and it turns out it was actually written on December 8. Now the 8 should have been parsed from the DateTime `2011-11-08 ...` into the string `"08"` and then I assumed `parseInt` should have gotten rid of that extra 0 for me. I found my problem in the `parseInt` documentation over at w3schools. > The parseInt() function parses a string and returns an integer. > > The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string sh

Client-side JavaScript Initialization | December 7, 2011 at 21:37

Yesterday I started using the [BundleController](http://lofjard.se/post/automatic-minification-and-bundling-with-nodejs) with my JavaScript files on the client-side. I also deployed my [ViewManager](http://lofjard.se/post/handling-views-in-nodejs) so that all my views now uses the bundled and minified JavaScript file produced when I start (or restart) my Node.js server. This meant that all my JavaScript was being run on every page in the blog, and while it isn't that much JavaScript yet I still wanted to improve on it. I decided to make use of some closure magic and built something like this: ````js if (typeof(BlogPageFunctions) == 'undefined') { BlogPageFunctions = {}; } BlogPageFunctions.admin = function () { // query some objects with jQuery here, // bind up some events etc.

Architecture in JavaScript - Closures | December 6, 2011 at 21:53

Today is Tuesday, which for me means I've held another tutorial at work. Today it was less hands-on and more of me just talking and showing examples on the projector using the wonderful [jsfiddle](http://jsfiddle.net/) JavaScript quick-hack-tool. My talk today was mostly about closures, so I thought I should write something here on the subject as well. I find that it's not that easy to explain closures using just words, but if I were to try it would go something like this. * A closure is a functions variable scope that still exists after the function has executed. * A closure only exist as long as something else has a reference to something that needs it. * A closure is created when an outer function has inner functions. If you have no idea what I meant with any of that, then I hope th

Handling Views in node.js | December 3, 2011 at 21:46

This weekend, my wife and daughter have been away up north, visiting my in-laws. I thought this would be a great opportunity for me to buffer up on some blog posts, but it seems like my inspiration mostly left with them. Last Tuesday at my weekly tutorial at work we did a bit of work with jQuery and Mustache. On my blog I use Mustache, not only on the client side, but on the server side as well. As I enjoy using the MVC pattern, I have tried to implement it to the best of my extent. ## First things first Mustache is a light weight templating engine with emphasis on simplicity. It's been implemented for a lot of languages and one of them is JavaScript. In Mustache, a template looks like this: ````html Hello, my name is {{name}}! ```` In my case the templates involve a lot of HTML, bu

Automatic Minification and Bundling with node.js | November 29, 2011 at 21:51

Scott Guthrie recently wrote about the new [minification and bundling](http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx) process that has been built for ASP.Net 4.5. I read his blog post, liked what I read and then I though of doing the same thing for my blog. I've been looking at minification programs for a while but I've put it off so far because I didn't want to add another step to my manual deployment process. Now I'm thinking I don't have to have another step. I could do it "automagically". ## The BundleController ````js /***************************************** * Bundle Controller ***************************************** * Author: mikael.lofjard@gmail.com * Website: http://lofjard.se * License: MIT Licen

Architecture in JavaScript - Inheritance | November 29, 2011 at 21:40

There's been a lot of debate over the years about whether JavaScript is an object-oriented language or not. Most of these discussions seem to pan out into arguments over inheritance. JavaScript, by design, lends itself well to inheritance through extension. However, JavaScript can support lots of different types of inheritance. I'm going to talk about a few of them today. Consider the following code: ````js function Car() { this.color = "Blue"; this.brand = "unknown"; } function Ford() { var o = new Car(); for(var i in o) { this[i] = o[i]; } this.brand = "Ford"; } var myCar = new Car(); var myFord = new Ford(); ```` The `myCar` object would have the properties `color` and `brand`. The `Ford()` constructor method creates inheritance by creating a `Car` and copying a

Architecture in Javascript - Modules | November 24, 2011 at 11:14

About a week ago I wrote about [turning client side JavaScript into CommonJS modules](http://lofjard.se/post/the-power-of-commonjs). The scoping of variables in CommonJS makes this easy, but what if we wanted to do it the other way around? In CommonJS, modules are scoped by file and all public methods and properties must be propagated through the <code>exports</code> object. ````js var foo = 'foo'; function bar() { return foo; } exports.bar = bar; ```` In the above example the `foo` property is private to the CommonJS module and can only be read from the outside by the public method `bar()`. If we were to include this JavaScript file on the client however, the property `foo` and the method `bar()` would both exist in the same scope as all other JavaScript files. What we need is to

The power of CommonJS | November 16, 2011 at 22:44

A few days ago when I was putting my posts into CouchDB, instead of relying on a static HTML file, I also implemented templating with [Mustache](http://mustache.github.com/). Mustache is small, easy to use and has almost no advanced features. It's power lies in the vast amount of implementations it has for different platforms but most of the power comes from one single implementation; the JavaScript implementation. There's nothing really special about the JavaScript implementation except that it is written in JavaScript and is intended to run in the web browser. The implication of having this implementation however is that you can now use the same template files on both the server side and client side. That was a big win for me so I decided to use it. There is also, on [their website](ht

Sorry, sharing is not available as a feature in your browser.

You can share the link to the page if you want!