Tag #web-design - Mikael's blog

Mikael's blog

A developers seventh time trying to maintain a blog

Tag #web-design

Decreasing Load Time When Using Google Web Fonts | May 4, 2013 at 08:19

I've been using [Google Web Fonts](http://www.google.com/webfonts) ever since I started building this blog. It's an awesome service with a great user interface and it makes it really easy to add fonts to your web site. Of course I had to find something wrong with it. Earlier this week our company released our new web site. On our Yammer page, one of my colleagues posted a link to [a WebPageTest result](http://www.webpagetest.org/result/130503_CB_P7E/) for it and it fared reasonably well. It got an "F" on the "First Byte Time" test, but that test is really finicky and could just as well show an "A" if you retake the test (as I later became aware). This triggered my inner masochist and I just had to run the same test on this blog. The first result was this: Test | Score ----|:--: First B

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.

LESS Is More, More Or Less | March 8, 2012 at 23:05

A while back I read a blog post somewhere about how the [LESS](http://lesscss.org/) parser/compiler had been remade in Javascript. "Well awesome", I thought to myself as I had been wanting some more flexibility in CSS but had been to stubborn/proud to install the SASS compiler since it's written in Ruby. Needles to say, I wanted to incorporate it in my blog as soon as possible but I've not had the time to actually do it until now. #### LESS you say? LESS (like SASS) is a CSS derived language that adds a whole lot of long needed features to CSS to ease maintenance of large style sheets. It compiles into regular CSS markup either in realtime (through their nifty Javascript implementation in the browser) or, as in my case, as a bootstrapping task when I start my blog. For now, it's tacked

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.

The Logarithmic Tag Cloud | November 27, 2011 at 08:21

A few days ago I sat down and tagged all my posts. Last night I decided to write a tag cloud. ## The first try I started out with a simple linear scale: ````js var countDiff = maxCount - minCount; var sizeDiff = maxSize - minSize; if (countDiff == 0) countDiff = 1; // no divide by zero for (var i in doc) { var weight = (doc[i].value - minCount) / countDiff; var size = minSize + Math.round(sizeDiff * weight); model.tags.push( { tag: doc[i].key, size: size , count: doc[i].value } ); } ```` * `maxCount` - The highest occurance of any tag. * `minCount` - The lowest occurance of any tag. * `maxSize` - The biggest allowed font size. * `minSize` - The smallest allowed font size. * `doc[i].key` - The name of the current tag. * `doc[i].value` - The occurance of the current tag. It rende

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

Notes from Øredev | November 13, 2011 at 17:29

As you know, I went to the Øredev conference in Malmö, Sweden last week. It was a great conference and I saw a lot of great speakers talk on a lot of great topics. The first two days of Øredev were "workshop" days. On monday we had a full day workshop with [Greg Young](http://codebetter.com/gregyoung/) teaching us the ins and outs of [CQRS](http://cqrs.wordpress.com/). The prerequisite to this workshop was a 6.5 hour long [video](http://cqrs.wordpress.com/video/). Between that and the 8 hour long workshop there was a lot of learning going on on the topic of CQRS, Event Sourcing and DDD in general. I always enjoy watching Greg speak because he's very passionate about everything he does and that always gets me going. Tuesday was NServiceBus day. [Andreas Öhlund](htt

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