Mikael's blog

A developers seventh time trying to maintain a blog

Tag #html

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

New Drapes | April 22, 2013 at 21:32

I got tired of the old dark green design. It was too murky and spring is in the air, so I redesigned the site to be lighter and more "spring-y". ## Old friends ````js var awesome = "Inconsolata is back!"; ```` `Inconsolata` is back as the source code font and `Open Sans` makes up the majority of the text on the blog now with the exception of headers which are set in `Racing Sans One`. All-in-all, I'm happier. And hopefully this can trigger my implementation of multiple pictures per post since I need that to report on my robot project progress. Summer is coming and summer means sun, and sun means solar power which in turn means that I need to speed things up if I want this project done before the (OMG spoiler alert!) new baby in the end of July.

Somewhat backwards compatible | November 14, 2011 at 16:55

I got the chance to see my blog through the eyes of Internet Explorer 8 today, and boy was that something to behold. There was no styling what so ever. It looked like the internet pre 1995. This site uses HTML5 and CSS3 and that is fine for most modern web browsers. Even those that has no support for HTML5 renders ok, mostly due to the fact that they ignore the tags they dont recognize and just renders them as they would any `<div>`-tag. But not dear Internet Explorer. Internet Explorer < 9 just ignores the tags and doesn't style what it doesn't know. Awesome! Good thing then that a couple of guys realized that you could trick IE into rendering unknown tags by creating them with javascript. ````js document.createElement("mysuperspecialtag"); ```` The above piece of javascript is all th

Trying to fix SyntaxHighlighter on mobile browsers | November 4, 2011 at 10:44

I recently incorporated the [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) by Alex Gorbatchev so that I can easily show code examples in a nice way. The default configuration seems to have a few quirks when it comes to working on mobile devices. Not all of them are SyntaxHighlighters fault to be fair, but here's some of the things I've had to deel with. #### Broken font fallback stack The default font fallback stack in SyntaxHighlighter looks like this: ````css font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; ```` Consolas is the new pretty font used in Visual Studio 2010 and it is my personal favourite for displaying source code, but it only exists on Windows Vista+. Well that shouldn't be a problem since there is

Responsive Web Design | November 3, 2011 at 21:16

Responsive web design is the new rage in HTML. As much as I dislike buzzwords, this one is actually something worth thinking about. [Scott Hanselman](http://www.hanselman.com/blog/LearningAboutProgressiveEnhancementSupportingMobileBrowsersWithCSS3MediaQueries.aspx) wrote a blog post on the subject a while back and [James Fuller](http://www.jblotus.com/2011/06/21/protect-your-career-with-these-5-web-development-technologies/) has it at #5 on his top 5 list of things you need to learn right now. If you don't have a smartphone of your own to try your site out on you can make use of Google's [GoMo](http://www.howtogomo.com/en/#test-your-site) project which can render what your site will look like on an Android phone. As of this post I've done my share of responsive web design for this site

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

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

URL