I am back to using WordPress with my blog. Because it got infected with some malware a while back (because of a faulty plugin I had used) I switched my blog over to Jekyll. It was mainly an experiment, but one that I had really hoped would work. I was very pleased with the overall solution, and if I had taken the time to do some further coding, it could have turned out pretty great.

However, I don’t want to take the time to code and for this kind of huge blog, there are some things that make it unsuitable. It takes a long time to render all the pages so publishing is a time-consuming process. It’s also a pain in the ass to handle loads of images when they’re all supposed to have links and titles and all that.

If I was building a technical blog or small blog, I would actually choose Jekyll in combination with something like GitHub Pages to host it. But for this blog, it was too much of a deterrent for me to actually write something.

Multiple times I’ve found myself wanting to write something, but not doing so because of the hassle of publishing through Jekyll. So I’m back to WordPress with a clean install and no plugins that could stir up problems.

So my WordPress blog got infected with some trojan crap through a security-hole in one of the plugins I was using. The effect of that was that for a short period users were re-directed to some spam site when clicking links on my blog.

This was about 3-4 weeks ago or so.

I reacted quite promptly (within 24 hours) and moved my sites architecture over to Jekyll, a tool to generate static HTML. So now there’s actually no running code on the server, which makes the site itself literally impenetrable from a security standpoint.

This is all well and good, but it also means there are some bugs on this site until I get time to fix it all. Like the search on the right is not working at the moment.

I just fixed the general deployment structure so I can start writing in a decent manner again and deploy without too much hassle. There’s still some plugins I need to write however to handle adding new files and images and stuff like that. I don’t want to have to resize images manually so I’ll write small script that takes images and moves them into the correct folders and resizes them in to three sizes and stuff like that.

For the time being it works decently doing it manually so that’s what I’m going to do.

I’m writing this because I will be going to Japan in two days and I’ve just spent some time fine-tuning this stuff so that I can blog in Japan without too much trouble!

For a long time I’ve been wanting to create one page that showcased my history as a developer a bit, but also put focus on some of the development that I do just for fun. I’ve sketched at designs and I’ve even gone so far as to do mockups in HTML. But I’ve never finished one (until now). That is because I always ask myself “Who is this for?” “Why am I doing this?” And I haven’t been able to properly answer any of those questions. But recently Emanuel made a cool little project page for himself (surely more useful than mine simply because it’s readable and abbreviated enough) and that pushed me over the edge to finally finish mine. I still don’t know why, but I’ve taken a snapshot of it to put on the blog here for future reference. The link to the live page is http://ique.github.com. This is what it looks like at the time of writing:

Projects page

I have now gotten a blog in Japanese as well! I felt that I wanted a good way to practice writing/reading and just generally use Japanese more, so I started http://nikkichou.com/. にっきちょう (nikkichou) in Japanese means diary.

フレデリックのにっきちょう

Everything I write in that blog is stuff I have learnt so far. I want to use it as a sort of measuring-device of how much Japanese I know so I will only be using the kanji (Chinese characters) that I have studied and I will not be looking up words to write. This means that the blog is sort of limited in what I can write about, but that’s the point. As I get better I will be able to write about broader and broader subjects.

I have decided to not put it here based on feedback from people on twitter, so it has it’s own home over at tumblr. If any Japanese people are reading this blog, you can jump over to the other one and correct my probably horribly incorrect grammar and word-choice. If you don’t know any Japanese, I doubt you will be getting very much sense from it because Google Translate does a really horrible job of translating it.

I will put a link in the sidebar here later so you won’t have to remember the name of it.

As you can see (at least if you’re not using IE6) I have put some Google ads in the sidebar to the right. I am using AdSense and it supposedly uses a mix of CPC and CPM ads, unfortunately there’s no way to tell the difference.

I have chosen to just use text-ads, so there should be no huge Flash animations for dating sites showing up.

I know it looks horrendous, but I’ve always been curious to what kind of money one can get on 20-100 views a day. To find out, I will run the ads here for a month or a bit more and then I will decide to keep them or not.

I project and estimated monthly earning of around 1 dollar, so it’s not going to be worth it. But if I’m terribly wrong and get a bunch more money; I will keep them here.

So I made some updates to the design according to peoples wishes. I added a link to the comments in the bottom so after reading a post you can easily get to them. I also rewrote some parts of the CSS to try to fix a floating-problem in IE6. Apparently the sidebar was pushed down below the content. I think that problem was partly IE6′s fault but partly the resolutions fault as well. I did some rudimentary tests for IE6 but the resolution was pretty big on all of them. My statistics so far says the following about the resolutions you readers are using.

Resolution statistics

About 25% have a 1024×768 resolution size. Seriously people? By contrast, this is what a 1024×768 window looks on my left screen.

Left screen resolution example

It never struck me that anyone could have a resolution that small, but to accommodate this I’ve made the design a bit smaller in width.

I hope it looks better for those 25% of you now. Please report in the comments if there are any more issues!

I also removed Hyphenator.js, as it made all the content “refresh”, causing a very annoying blinking-thing to happen every time you loaded a page. I hope the justified text will still look acceptable without it.

There is no real reason that I chose the domain name tetrisrockstar.com. I just sort of thought of it and liked how it sounded. I love tetris and I aim to be a figurative rockstar at whatever it is I’m doing.

But I did say that there was a story in my child-hood that I related too. It’s not a very special story, but as a kid I had one of these:

Mr 9999 Brick Game 9999 in 1

I remember playing with it for hours every day for months. It had 9999 games, but they were all small weird variations on basically 10 kinds of games, pretty f-ed up when I think about it. Anyhow, all I ever played on it was the regular Tetris. By the end, I really rocked at Tetris. I can still enjoy the occasional Tetris game and I consider myself pretty good at it.

So when I first thought of tetrisrockstar.com, I thought of myself as a kid, being a total Rockstar at Tetris.

Almost exactly one year ago I thought of a cool name for my blog; “TetrisRockstar”. I liked it immediately and I could find a clear story in my childhood that would fit in with the name. Luckily tetrisrockstar.com was free as well, and April 09 I bought it.

Then began the arduous task of trying to find a new theme for the blog. I didn’t just want to switch the name and keep the theme, and I wanted a really good theme that preferably fit the name well. For about six months I regularly looked around for free or $20-$100 themes, but I never found anything that was really what I was looking for.

I then saw Matt Mullenwegs’ new blog and he had a fantastic huge graphic at the top of the blog. So big it obscured the rest of the blog, but I thought it was gorgeous. So I started looking for a designer that could give me something like that. I spend 3 months looking for a designer, I found a total of 4 designers that I thought could give me what I wanted and offered them each around $600 for a Photoshop file with a layout and some nice graphics. $600 is a pretty low amount, but it’s not like I was asking for multiple page-designs or any coding or anything like that, just one piece of graphic. I don’t think it was insultingly low, but 2 of the 4 designers didn’t answer once I said what I was willing to pay and the other half simply said the project was too small.

After realizing I would have to pay much more than I was comfortable with to get a nice design, I started working on one on my own. At least that would give me something personal. I wanted something a little retro/gaming-related for the tetris- part of the name and something a little grungy for the -rockstar part of the name. I found a theme on WooThemes that I thought was pretty OK, but needed quite a lot of tweaking to look like I wanted, so I started remaking it from the start and changed the things I wanted along the way.

First version of the blog

So this was the first draft that I came up with after a couple of hours in Photoshop. It had like, the elements that I wanted, the tetris-block, some more advanced graphics in the top and a grungy background. Unfortunately it looked like crap. I then tried some different approaches to this design.

Second version with top banner

Cleaned up version

The banner didn’t turn out as awesome and illustrative as I wanted, so I tried doing a really clean version, basically removing everything I wasn’t 100% satisfied with. But then obviously it needed something else.

I then found this awesome piece of graphic, the koi fish. Normally I hate koi fish, they’re a super-tired stereotype and I don’t even think they look that good graphically. But this one had something I really liked. I paid the designer £40 to use it on my blog and then I started incorporating it. In retrospect I should have paid once I was sure I was going to use it

Koi fish version

This I was actually pretty happy with, but the boxes on the right took up way too much attention and the whole design was very boxy. So I tried getting rid of the boxes in several different ways, spurring the following redesigns.

Removed boxes and added title "banners"

Removed right content entirely and made fish more prominent.

Changed titles and removed big boxes

Tried doing a different more clean top

A little more grunge, but still clean top

Following the same design but trying different things

I drew this tetris-block by hand

The second version I was very satisfied with

The reason I didn’t stop here was that I wasn’t entirely happy that I hadn’t gotten in all the links I wanted and there were still some.. problems with it, that I couldn’t really put my finger on. I also checked my statistics and it seems like a lot of you use the “Latest Comments” out on the side to see if there are new comments on the blog. So I wanted to get that back into the design.

I had a long stand-still here. Finally I found Spencer Frys’ blog and Max Voltars’ blog at the same time, and thought I could combine their best parts into one design that I would be happy with. This resulted in the following revisions.

New design with Web 2.0 top

Ultra-clean version

Finally I came to some sort of conclusion that I was happy with.

Medium-clean version with koi

I asked around a little among friends what I should do with this and the first suggestion was change the font. So I drew this up to see what I should choose from. Can you spot the one I chose?

Title fonts

Emma didn’t really like the koi fish, so I tried putting in the tetris block instead of that. I really couldn’t make that work though, I felt it ruined the flow of the design. Emanuel also had some good suggestions to change the top, the bottom and to add a little color by randomizing the divider tetrisblock.

The design with a clean tetris block

The design with my hand-drawn tetris block

Then I finally came up with a good version and make some minor tweak to get it as I really wanted.

Final design

Final design with final tweaks

So now I had a design. That approximately took three or four months to get to
I have now spent this entire weekend coding it up. The frames you can see in the pictures above are made entire in HTML and CSS3. That means it’s supported by the latest versions of Chrome, Firefox, Safari and Opera; but NOT by Microsofts Internet Explorer. Those of you using IE will unfortunately have to live with the old grey frames. It makes the design look much worse than it is, but I can’t get myself to only using 90′s technology because Microsoft refuses to update their browser.

Anyway, the frames were a problem in themselves to produce. I wanted frames on all the old pictures as well. Throughout the past I’ve used about 4-5 different ways to import pictures into blog posts. In the latest posts I’ve used something called wp-caption. Which is this grey frame with a caption underneath. In the past I’ve just imported the pictures straight in, but my frames needed to handle a bunch of different cases. Sometimes I have multiple pictures next to each other, sometimes they float left, sometimes they float left. And most of the times the picture should just be centered on a row by itself. For the frames to work at all, the picture needs to be surrounded by two div’s with classes frame and image. So to make everything work, I spent around 5-6 hours on writing the following script. Handling the insertion of these two divs in a proper way.

[gist id=346739]

So finally. I have something that works for everyone but the people on IE, and I hope it looks acceptable for those people, even if it’s not as awesome as on Firefox/Chrome/Safari/Opera.

I have also changed the commenting system so you can now login using a range of different options, or of course continue commenting as guest as always! You can now like comments and reply directly to comments as well. I think the new commenting system is pretty nice. Use it to say what you think! I’ll leave a little poll here in the end to gather opinion as well. But of course, if you have anything to say, do so! For those of you using IE and want to see what this blog posts looks like on another browser, click this link.

[poll id="2"]

Huvudsakligen till min syster.

Verktygen du kommer använda:

1. tumblr – för att blogga, lägga in enskilda bilder, filmer eller texter
2. flickr – för att massuppladda bilder

Registrera dig

1. Gå in på flickr.com och klicka på Create Your Account.
2. Gå igenom stegen och när du är klar är du klar för att ladda upp bilder.
3. Gratiskontot på flickr har en gräns på 200 (tror jag) bilder och visar inte bilder med jättehög upplösning.
4. Jag rekommenderar att betala $24 för uppgradering till pro (vilket jag själv betalar en gång om året). Jag tror man hittar betalningsalternativ under “Your Account” under “You” menyn.
5. Gå in på tumblr.com, på förstasidan visas ett registreringsformulär där du fyller i email-adress och lösenord samt vilken adress du vill ha [dinadress].tumblr.com.

Nu är du redo för att sätta igång

För att sätta igång ordentligt nu så går du in på flickr och loggar in dig, klickar på pilen bredvid “You” i menyn och sedan klickar på “Upload Photos and Videos”. Där kan du välja så många bilder du vill och bara sätta igång och ladda upp, när du laddat upp har du möjlighet att skriva titlar och undertexter på alla bilder.

Tumblr har en jättebra guide som tar dig igenom alla olika post-typerna på tumblr, men det allmänt väldigt straightforward. Klicka på den typ av post du vill posta (text, bild, video, ljud) och bara sätt igång och skriva.

På tumblr kan man välja bland färdiga themes, då klickar man på customize i menyn ute till höger på ens “Dashboard”. Om du (Nina) vill ha en snyggare design så finns det massor av gratisdesigner där ute som är snygga och enkla att lägga in. Dessutom är det jättelätt att lägga in en egen adress, så om du vill ha typ dittnamnstravels.com  eller whatever så kostar det bara 50kr.

Efter det är det upp till en själv att komma ihåg att ladda upp bilder och posta intressanta historier.

Emma har startat en riktigt sexigt snygg Japanblogg som hon kommer att uppdatera med lite japanrelaterade saker och sen under vår vistelse i landet.

エエマ の 日本

UPDATE: Adressen är numera eemmainjapan.com, länken ovan är fixad.

Checka den nu, lägg till den i RSS läsare, bookmarka eller vad du nu brukar göra för att komma ihåg sidor!