The old days

It was on these forums that the experts hung out. I was always amazed over the amount of answers I got there and one day I wanted to be a person who gave answers as well. I always tried to see if there was some small question that I could maybe help out with but usually I hardly understood the problem good enough to even give a hint to a possible solution.
Times changed. I went to school to become a pro in the area and when activity got low I stopped hanging out on the forums. Instead I started to go to friends or colleagues for feedback.

A new place for the cool people

A couple of months back I heard of something called Forrst. My rss-feeds were buzzing about it and appearantly it seemed to be a very cool place to hang out on for developers and designers. That is if you were cool as well. It was invitation only. I filled out the application form but thought that since I’m not Chris Coyier on CSS-tricks or Ryan Carson from Carsonified my chances were zero. I was simply not cool enough. Dang it!
I gave up. No invite was coming. Then I started to follow the buzz on Twitter. Turns out people were having invites to give away to us less fortunate. (I still thought it was all about coolness…) I started to answering these people and after a while I got the following tweet:
“@kolombiken I like your portfolio, send me your email address and I’ll give you an invite.”
Do I need to tell you I was happy?

You should apply

Forrst was, is, exactly as I imagined it to be and more. So many talented and passionate people all in one place. You are able to upload snaps of your design or code. Ask questions, share links and the best part: get lots of feedback! It was just like in the old days on my forums but with a much better interface.
So let me just tell you this: If you are a designer or developer or both and you have a true passion for the web. Forrst’s the place to be! Fill out their application form today.

Uhm yea, right, sending in applications doesn’t work? Well, turns out I was wrong on that one. Some weeks after I was invited I got an email in my inbox. It was an official invite to join Forrst.

/Ida

Ps. For you Forrsters I’m kolombiken.

So what’s this post about? Well, just telling you what’s going on.
It would be super-cool if some of our readers could give us some input on this.
Is there something that’s frustrating here? Something that could be better? Something missing? Any suggestions on things that you think we should work on are greatly appreciated.

In short: feedback bitte!

*Tilted head with puppy-eyes begging for comments*

/Ida

Ps. The header image is revealing a tiny bit on what’s up…

Or wait… there’s a solution for this. And no, the solution is not to make one hundred gradient-box-images of different sizes. It’s not even to slice up the box in pieces and put it together using the CSS background-image property.
This is how to do it.

1. Create border-image

Create a small gradient image in you fav image program. (Like Photoshop). Image should be the size of your border times three. In my example 2×3 = 6px. I.e. 6px x 6px. Apply a gradient and crop out a little hole in the middle. Save the image as a png with transparency.
Note that the image below is zoomed in 1600%.

2. Apply CSS

Apply the following CSS to the element you want to be gradient-bordered.

.your-element{
/* the first border is for that graceful degradation
in "bad" browsers */
border: 5px solid #60bec3;
-webkit-border-image: url(border.png) 2 2 2 2 stretch;
-moz-border-image: url(border.png) 2 2 2 2 stretch;
border-image: url(border.png) 2 2 2 2 stretch;
}


3. Finished!

Tada! Now it might look like below.

Or like this if we have a little more text.

FYI the following has been tested in Firefox 3.6.4, Opera 10.53, Google Chrome 5.0.375.70 and Safari 5.0.

Feel free to experient with making the image with rounded corners/bigger/smaller/gradient inside/outside. And yea, don’t forget to show it off and post a link of the masterpiece below.

That’s it for now.
Quick, dirty, getting the job done…

/Ida

Awesome people, not so awesome web sites

I’ve met people who are awesome when it comes to creating stuff on the web. At the same time their own page includes nothing more than an email… if they have a site that is. I’m including myself here. I’m not at all completely happy about the state of my own web site at the moment. An update has been on my todo-list for way too long but stuff comes in between. Stuff equals client work in my case. And I think that is what happens to most of us.
Ok, people, I can hear you mumbling. Of course there are exceptions. There are those close to über-humans who manage to do it all. Having an updated awesome portfolio/blog/about me-site while at the same time being awesome at work. And you know what? It seems like they have the time to have an irl-life as well. Yes, really.

To have or not to have a site

I have been thinking a lot lately about whether it’s important for us web developers to have an updated and good web site. The conclusion I have come to is that it depends. For me who has my own company it’s, naturally, important. At least if I want to keep getting new clients. Which I do. For someone who have a steady job that they have had for ages it might not be that important. Or?

Keeping something with your own name on

Some weeks ago I read about this guy who lost weight by tweeting. Every day he told “the whole world” how much he had lost/gained. Apparently it was a good method cause he was too embarrassed to gain so he ended up losing quite a bit. I think web developers can use the same method to keep in shape. Uhm… don’t get me wrong. I’m not talking body weight here. What I mean is keeping your skills top notch. By having a web site/blog or something similar you are showing the world your skills. There is something out there with your name on it. Might be good if you keep it fresh. Might be real bad if you let it get outdated. Just like it might be a real bad idea for a personal gym coach to put on a lot of weight.

Keeping the web healthy and growing

To take it one step further. If we all kept working on our skills I think the web could continue to be as cool and exciting as I think it is right now. I think having something on the web with your name on is one way of doing that. To try hard every day to not be a child of the shomaker might be a way to stop the web from getting outdated, old and something that stops to develop. I mean really how many shoemakers are there in your city? Exactly.

This is just my random thoughts on the subject. I would really love the hear your view. So please feel free to comment on this.
Happy healthy web!

/Ida

In a perfect world

Anyway, back to topic. Compared to most Art Directors and Interactive Designers people working on the backend usually have quite a lot of knowledge when it comes to HTML. They know most of the tags in use and they can often style a web site even if it’s not their job. The problem is that many of them aren’t that good at choosing the right markup that is fit for the content and of course, it’s not their job. Or at least it shouldn’t be their job. I’m having the strong opinion that every team bigger than three people working on a web site should consist of at least one frontend developer. That frontend developer should take care of the job and provide the best markup. Oh, sweet dream of a perfect world.

When backend is getting dirty with frontend

But there are times when for various reasons there is no room for a frontend developer. There might also be times when the markup provided by the frontend developer doesn’t fit the framework. Sometimes the people working with the backend need to do quick fixes that include markup. A lot of times this can result in markup that is closely connected to the visual appearance of the site. For example a label needed to be provided to a new input field. The label need to be above the input field so the person on the backend quickly put some text into a div cause he knows form experience that a div is a block element and the input field will surely get it’s own row.. wait lets put the input fields into a div as well. Now fine and dandy let’s move on. Yes, I realize that I’m generalising and that most people I met are smarter than this and they do think more than this but hey! I’m trying to make a point here… My point is that most backend people are having a hard time trying to keep the markup apart from the visual appearance. So my one sentence lesson is:

”Stop thinking about the visual appearance when you’re writing markup”

Not perfect but better

I personally think the world would be a better place if more backend people started to follow this. Of course I realize that because you don’t know everything about clearing of floated elements, positions and negative margins and other mumbo-jumbo css-talk you might need to add that extra div. But please, and this is a prayer from my deep and pure frontend heart, don’t start by thinking of how it looks. Start by thinking what feels appropriate. A label should be a label and a paragraph should be a paragraph. If more people on the backend just stopped caring about the look we wouldn’t have som many crap-markup-generating framework out there. Just saying…

No offense to nobody.
I love you.
I love the web.
Peace Out!

/Ida

5. HTML – Visionary Internet Love Song

This australian song was written in 1996 and is full of old internet stuff that a lot of people wish to never see again.

4. WCAG Theme Song

To be honest I was a bit reluctant over if I should post this song or not. I really do have the greatest respect for people who are able to use the internet despite their disability. I am not sure I would continue to use the internet if I was blind. I mean have you heard how those screen readers sound like? Well listen to this song and you’ll get an idea…

3. HTML5 it is a’changin

I remember it correctly these songs started to pop up sometime last year when the specs for HTML5 was still a mess. I believe that this song is, if not the first, one of the first.

Of course this video got a lot of replies… Here’s one of them (Warning! Annoying…)

2. Design Coding

This one is classic. He call himself The Poetic Prophet AKA The SEO Rapper… Do I really need to say much more?

1. HTML

This is the only song that I can listen to more than once in a row. That’s the only reason why “HTML” by The Hot Toddies get the number one spot. Unfortunately I couldn’t find a music video for this video. Probably because they never made one.
But you got spotify you can listen to it over there.
You can listen to it on this Asian site. (What? Why? I don’t know…)

Bonus – The Internet Overdose Song

Remember the time when everyone felt like it was ok to lie about their identity on the internet?

More Bonus

Just cause I felt it got too serious with the last song I needed to post this extremely unserious and explicit piece of animated crap. “Hello Timothy I find you delightfully amusing too…”

That’s it for now people!
Not going to annoy you more for a while now.

/Ida

You know what? Swedish Fika pretty much suck at everything I’m gonna tell you now. There I said it. We are the ones smoking. It’s no excuse that this site was not originally built by me or that it’s not newborn as a baby kitten.

I actually finished this post last week but right after I had written it all down the truth hit me hard in the head. I thought I couldn’t possibly publish this before the rebuilding of our blog is finished. Then I talked some to Johan and he brought up transparancy. That’s a thing I cherish. I believe that by being honest and upright about what you do you can gain more in the end than by sneaking around trying to cover up dirt.
So let’s get down to business. I got two tips for you and your snail site. Both of them are basic but a lot of sites out there neglect them.

1. One Script to rule them all

There should not be more than one http request for JavaScript on your site. I don’t care if you have three libraries and fifty of the coolest plugins (which by the way you shouldn’t…). One script people!

Why?

One of the first rules when it comes to performance on the web is to make fewer http requests. Normally a browser is able to downlad two components at the time. “Component”? That’s a nasty grown-up word but what I mean is for example two images. So normally two requests. But when it comes to scripts the browser is actually disabled from downloading more than one at the time. One script at the time x many scripts will take very looooong… I guess you pretty much get my point. Right?

2. Put it down there

The old practice of putting script in the header is in almost all cases obsolete. The script, (not gonna say scripts cause I assume that you by now have become a good and righteous person who only has one…) it should be put at the very bottom of the page. Just above the </body> is a good place.

Why?

When a web site is being processed and the browser comes to a script it takes a break. It doesn’t continue reading anything until it has finished reading your script. In most cases the page need to be fully loaded anyway for your script to work properly so the good thing is to put your script in the bottom of the page. It will give your users a better experience. I promise.

Learn more

If these advice are new to you I highly recommend you to take some time and do some reading:

Yahoo – Best Practices for Speeding Up Your Web Site
Steve Souder – High Performance Web Sites
Steve Souder’s book is available here for Swedish people

There are absolutely more to be done if you want your script to be performing well. But here are two simple tips that helps quite a lot.

/Ida

All of this have made me think about the kind of articles I enjoy reading and the kind that I, maybe not hate, but consider to be rubbish.

The Glossy Sexy Kind of Stuff

I really have a problem with any article that contains the words ”sexy slider”, ”awesome glossy buttons”, ”1200 things everyone must know…” or similar. Why? Cause most of the time it’s just junk. Like fast food web articles. They quite often contains a bunch of links or code that probably are copied from some guy who copied it from someone else who… yea, you get my point. They are like that awful kind of pop music simply written to become popular. Most likely these articles never deal with the question of why. That’s too deep for them.

Genuine Food for Thought

The articles I really do like and enjoy reading are of two kinds. First the well written ones where you could really feel how the author has put in thought, sometimes not only into the text but even the images and the design surrounding the article are beautifully done. These are articles that I usually save for later when I can curl up on the couch with a nice cup of japaneese tea and just enjoy reading.

Short But Sweet

Then we have the other kind. Short hands-on tips from people who really know their craft. Why do I say short? Cause a lot of times good things disappear in a clutter of images and unnecessary text that are too small to read without a magnifying glass or the readability bookmarklet activated.
I have found that the tips I really enjoy are short tips on one specific thing. I need to know what it is, why it should be done and finally how to do it. A couple of hundred words should be enough to do the trick.

Reading Tweets is Not Enough

I know that we live in a time right now where it seems like none of us have the real time to sit down and really read. On the other hand it’s impossible to get a full understanding by reading tweets and skim through bigger pieces of text. So no, Twitter is not enough. If you really want to be good at something you need to put in time and effort. Of course you cannot read it all. You need to learn how to find the chocolate chips in the internet cake.

I think quality is not about the amount of text or links, the fancy words and the glossy images. It’s about getting under the skin of us readers and hit that spot that makes us go “Wow, I think I just had a revelation”. You know what I mean? Or is quality something completely different for you?

/Ida

With that said it’s important to see the difference between supporting and giving the user the same experience regardless of the browser they use. We don’t expect an old cellphone from 2001 to behave like an iPhone. Yes, IE6 is from 2001 so you get my point. As a frontend developer I’m happy to see that people finally start to see this. (Please open this page in different browsers).

Sorry for the long intro. Let’s get dirty. A big problem we have when developing for IE6 is that it doesn’t support PNG-files with semi-transparent backgrounds, shadows and fanciness. Look at the picture below if you don’t know what I’m talking about.

To solve this people have different methods. Implementing PNG-24-fixes with JavaScript, having other images (gifs) especially for IE etc. One method that I really like and which does support the whole thinking of supporting is saving the png-files as a png 8 keeping the fancy stuff for modern browsers while showing the picture without fanciness but perefctly viewable and without disturbing gray background in IE6.
There are different methods to do this. Either you can use Fireworks. But as we all know. It does cost. So you prob want to have somthing for free. If you are on a Windows-machine you can use the GUI for pngquant. http://jedisthlm.com/2004/10/13/gui-for-pngquant/ or if you are lucky and are sitting on a Mac you can use a little program called ImageAlpha.

How to Make It in ImageAlpha

Since I’m on a Mac right now I will demonstrate how to do the saving in ImageAlpha.
1. You start out with having totally cool images with super-awesomeness saved as png-24.
2. You know need to resave these images as png-8. (No, don’t worry fanciness will not be lost… )
3. Open ImageAlpha, and open your picture. It will look somehow like below.

4. It differs which settings that works the best so tweak around a little and try out different combinations. The image below is saved with 128 colors and Median Cut. This might not be right for your images and if you can, try to choose 256 since the more colors the merrier.
5. Save your files and review the result.

Final wordiness

With your sharp look and that 50″ screen you probably noticed that the image in IE6 looks far from perfect. If I had spent a little more time tweaking I think I could have made it look better. Just saying.
Personally I like this method of treating PNG-files. It’s also a really nice one if you like to include images in a newsletter that goes out via email where JavaScript-fixes is not allowed. As said before different methods suits different people/projects. Do some thinking and I’m sure you will end up with the right method to use.

Till next time people.
/Ida

The subject of women working and being involved with web technology has always intrigued me. This doesn’t have anything to do with genders or me preferring women to men. I love working with people who are passionate and enthusiastic regardless their gender or age. But still. Girls working with web development are exciting. I mean the majority of great people in this field are men. That’s just facts. So sometimes it gets to you. One way or the other. Especially when you have experienced situations where people just expect you to be not just as good simply because you are a girl. I guess a guy working in an area dominated by women know what I’m talking about and can relate to this as well.
To be honest to you all I need to admit that I actually most of the times do prefer guys company. This is simply cause the majority of girls I know hate listening to me getting excited about the latest stuff in jQuery. Well anyway. Enough about genders. What about GG Meetup?

It was mainly three things that drove me to the event. Free drinks, the main theme was frontend and it seemed to be lots of geeky girls. Girls somehow involved with the web. I mean. Wow.

© Caroline Söderquist

The event was held at Wyatt. I got there after finishing work. I guess I wasn’t that early cause I didn’t really had a lot of time to mingle before the speeches started. Three girls held one speech each. First one was Maria from Vinnovera who talked about CSS. Now I’m gonna be straight forward and as a frontend developer maybe the degree of difficulty wasn’t that great. In one way I understood it. We were a mix of people and I have no idea of what the other people were doing and at what level they were. I guess I was comparing too much with GeekMeet where they invite great speakers talking about the latest in web technology. On the other hand I should not complain. I had been warned in the invitation and why start by scaring people off with something complicated that maybe only a few geeks (like myself) would find interesting? And if this would’ve been, lets say five years ago, I’m sure I would have enjoyed it a lot.

© Caroline Söderquist

Second speech was by Kim from Valtech. She spoke on the subject of Firebug. She was nervous but I think she did great and also props to her being so well prepared. Last speech was by Alicia, an UI designer. That was for me interesting. I’m a frontend developer and I’m really interested in every area touching my own. UI design as well. She was speaking pretty general about how we perceive things and how we can apply this knowledge in our design.

The meeting ended with us putting up post-its on what Geek Girls has been, is and what we would like it to be in the future. Good idea and I hope they will make something nice out of that feedback.

It all ended up being a pretty cool evening even though it was in the middle of the week and lots of people had to get home and get their (beauty?) sleep. (People keep telling me that I will get there one day too and that I can’t continue to skip sleeping for an eternity. But I hope I’m still far away. I love late nights too much.)

I found out that Geek Girls exist in Malmö as well and I got to say hello to one of the main southern girls. After googling some I found out that there are Geeky Girl-events going on all around the world. It’s pretty cool.

If you are considering going to an event or want to read more on women and web here are some links for you:

Womoz.org
GeekGirl Meetup
IT-tjej

I will tell you straight away that the newsletter at idg was and still is a disappointment to me. It’s more on girls using the internet and working in the web industry than it is about women actually doing development which is the part that interests me.

So what I really wish with this post just to encourage people to go to events and meet others. This is not about girl-stuff or being totally hyper-social. It’s about meeting cool people who are interested in the same things as you. The stereotype of people working with technology is still strong. They sit alone in dark basements surrounded by junk food and geeky gadgets. That is quite far from reality.

/Ida

Ps. Thanks to Caroline for letting me use her photos. See more photos from GeekGirl Meetup at Carolines Flickr.