Another year has passed, this one is shaping up to be a better one than the previous. One thing that’s always on the top of my list, every year, is that i would like to write more. For some reason, things are always getting in the way and distracting me from writing. More importantly i don’t really know what i should write, and when i’m finally sitting down to write something, it’s a real struggle to write something i’m somewhat satisfied with. I guess i’m not alone in this.
At least i have a general idea of what i would like to write about this year. I would like to write more about what i’ve learned and how i solve problems, related to designing and developing for the web. That’s how i learned when i got started. Something i find very valuable is when other people write about how they approach certain problems or challanges. That’s the great thing about the web, sharing. So i hope to do more of that, writing and sharing.
I’d like to spend some time on autogrow and designgrid, improve them a bit. There’s some enhancements i have mind for designgrid, make the script more customizable and squash some bugs. Try using designgrid without a stylesheet and see how that goes… (Hint: it might crash your browser!). I also have an idea for a new project i like to do as well.
Last year around this time, i spent about two and a half months helping out the guys over at Republic. They recently launched the project i helped out with. I’m really grateful for spending the time at Republic since they’re hard working and super busy guys. I did most of the initial development, building the admin, calendar and the welcome areas. I got to learn a bit about CodeIgniter and Sass, this was actually the first project i’ve ever used Sass on, and i’ve come to use it ever since.
A lot of time the past year, has been devoted to studies. Now i only have a few months left of my education. One more period, three months of internship left then i’m done with my studies… For now. I’m hoping i can get back to working again. I’ve learned a lot since last time when i worked at nodestar, so there’s a lot more i can do now.
Today marks the seventh version of carlrafting.com. It has been a long time in the making. Kinda hard to tell by looking around here. But as always when you’re designing and developing your own personal website/blog, it’s harder than doing it for clients or other projects. It’s always more to think about than you first realize. At least it was for me.
I wanted to fresh things up a bit. The previous was really quite outdated. It started out as a fixed-width pixel based design. Then later on i made the necessary adjustments to make it more responsive. Note that is say more responsive and not truly responsive, because it just wasn’t. And lets face it, the 14px font-size on the text content wasn’t that easy to read.
This time around i’ve retired my old friend TextPattern and moved on to Jekyll. I’ve grown alot as a developer the last few years and Jekyll suits my workflow better these days. I was getting quite hindered by TextPatterns template system and the fact that i had to keep the local database and live database in sync whenever i wanted to make changes. In that regard Jekyll is perfect. It’s just static files.
Last week, about one week after i released designGrid, i published yet another little project that i’ve been working on. This time i’m trying to solve the problem with textareas, or rather the frustration of using them, especially when you’re going to write a lot of text. See textareas are designed to always have a fixed height and when you’re typing a lot it becomes hard to get a coherent sense of what you’ve written. Of course the scrollbar will eventually appear, but instead of it appearing on the text area itself, it will appear on the page, like it should.
The reason i even made this is of course because i needed it myself, and i’ll probably need it in the future as well. I stumbled in to this problem with text areas when i was working on a web app a while ago, and luckily i found out about Neil Jenkins article “Expanding Textareas made elegant” over at A List Apart, which was the solution i was looking for. So i based autogrow on the code from the article, but made it to be more customizable and reusable.
i set out to tackle an issue i had. The issue was that i didn’t really know how to design with fluid grids in a good way. Every since i started designing in a responsive manner, i had almost abandoned grids completely, but sometimes there where a need for order but i didn’t have a tool that could help me out.
Previously i used #grid, by the folks at Analog, to make sure my design followed the grid, but then responsive web design and fluid grids came along, and it didn’t work out anymore. I needed something that was more suitable toward responsive designs. This is my attempt. A first step.
My goal was to get something out there as quickly as possible, and worry about optimization and performance later. All in all i spent about a week to get to where i am now, i designed the grid layout and some basic script functionality the first day. Following days was spent on code for generating a baseline grid and columns.
These days, there is a lot of talk about reponsive design and mobile/content first. While i think we can agree on that these strategies isn’t entirely bulletproof (yet!), they have a ceratin appeal and can be fairly easy to implement and use today. I do believe that this approach is better than making a mobile version of a website, but that is probably necessary sometimes.
I stumbled upon an issue when i was working on a web-application the other day. I had just finished the design in photoshop and then i built the templates in html/css. I should point out that this was the desktop version of the design. Later on i wanted to make it look good on mobile devices as well, so i set up a media query in the stylesheet to cover the design changes for those kinds of devices.
The issue appeared to me at this stage of the process, the mobile devices would need to download the extra set of styles to reset the desktop styles. This is a bit of an issue, since when we talk about mobile, we asume that the device has significantly less bandwith than a desktop computer. That’s not necessarily true all the time but it can be most of the time, if one is on a bus-commute for example.
So that is where mobile first comes in, the problem however has to do with when one would build templates from a photoshop design that covers the “desktop” version. It is a bit hard to develop with the mobile first approach in this case, since the templates has to match the original design as close as possible (That doesn’t mean it has to be pixel perfect or even look exactly the same in all browsers).
So i tought about this some more… And finally i came to the conclusion that the best way for me was to reset the desktop styles on mobile devices (and narrower viewports), since i wanted to keep them separate from each other (easier to maintain). This means however that mobile devices do indeed get a bit heavier stylesheet than what’s necessary, but on the other hand, there’s no extra http request needed. This certainly isn’t the most perfect solution, but at this stage in the development process it was the best way to do it.
This idea came to me when i thought to myself, what if i could just type one command into the terminal, and the folders and documents i needed where there? I immediately got to work and came up with this, it doesn’t look much yet but it is indeed handy and i intend to expand it further than this. Say, maybe get a bunch of files from github?
Okay let’s not get ahead of ourselves here, time will tell if i’ll actually add this. Anyway… This isn’t a groundbreaking new project of mine, it’s just a result of making reality of an idea i had, and it worked. As simple as that.
My name is Carl Räfting and i’m currently spending my time studying web application development at Jensen Education YH in Gothenburg, Sweden. Learn More »