Posted on

On diversity and people being weird

Maybe you have noticed the discussion regarding diversity in the tech industry lately. No? Really? I’m pretty sure you have read something about it. Either the cancellation of The British Ruby Conference or the discussion lately around Edge.

There is one thing about this that concerns me and that is after reading several articles, comments, tweets etc. It seems like the general opinion is that diversity is good and we all (most of us) want it. But, and this is where I have a problem, we do not want to do anything to achieve it. It’s bad trying to get a variation of people cause somehow that equals not getting the best people. Tech events for women are discrimination. I’ve been in involved in some tech events for women and whoa, the negative comments you get. In general most of the things that people suggest doing to improve the diversity are criticized.

Kagami is not getting it

This is the thing I do not get. How can it make sense to want something but at the same time not wanting to do anything to achieve it? It’s just like this story my dad once told me about a lady who really wanted to be good at playing the piano. She was asked if she wanted to take some lessons. No, she said, absolutely not, I just want to wake up one day and be really good at playing. People you know what? The world doesn’t work like that. If we want something we need to work for it.

It’s why this year I will try to do my share of changing things. Cause yep, I actually do believe in diversity as well and as a woman I feel like I need to step up. Especially when harassment like what happened to Iris is still around. For me this means that I will continue to tweet and blog. I’ve also said yes to speak at a local meetup. The last thing is something I’ve always said no to in the past since I felt like I was being asked simply because I’m a girl and not because somebody thought I actually had something to say. This year I will stop saying no. I’m going to try speaking now and I think it’s going to be good.

Posted on

Avoiding Kodsmuts – The List

During the past weekend my mind was occupied with what to not forget for a site that’s not too far from launching. No, I don’t mean raw functionality. I mean those little things. The things that no client will ask for but most people will be expecting to just be there. Without those things your site would be a big buggy mess so let’s get it clean.
Here is the list!

Working links

Sounds obvious but I noticed that a lot of new sites are failing at this. Of course it’s not enough to just click randomly and have a feeling that you got it covered. Have a real tool (there are free ones) go through your site and report back.

Old content

If the launch of your new site means you are going to dump old content you should make sure you got that covered with some 301. Links can live for a pretty long time in peoples bookmarks and on Google.

Error-pages

Having default server-error pages are simply embarrassing and some people might even think they broke something if they come by one. The default .NET-error-page for one looks like you just got a virus.
A minimum of at least a 404 and a 500-page that fits the look and feel of the site and have some good informative text is a must.

Print-styling

Save the trees. Yep. But as for today your site will seem broken with bad usability if you can’t print it without losing content. Add some print-styling just in case. If you want to go a step further add a print-link on your site and display some tree-saving message when people click it. Or offer to convert the site to a pdf. Yea, dirty. I know. But that is how it is.

Retina

Screens are not what they use to be. Make sure to have it covered. Icons and other images must look crisp. You will be looked down on if they do not. And remember it’s not only min-device-pixel-ratio 2.0. We also have 1.3, 1.5 etc. Read up on it!

Phones and tablets

I don’t care if you are building responsive or an old-fashioned “desktop”-site. People will visit it with whatever device they got. There are no excuses today for not testing on multiple devices.

Browsers

You probably did cover the most common desktop browsers already and hopefully you did match your test with some stats from a current site. But don’t forget the new browsers that are starting to gain popularity. I’m thinking Chrome on iOS and Firefox on an Android-device. Probably these browsers are way outdated when people read this but you get the point. Do your research!

Favicons

Add them all. To rely on the browser default-icon is just unprofessional. An old-fashioned .ico and a .png at least. If you add some for apple-devices and others you are being good.

Meta description

You know that text that shows up on Google beneath the link? That’s hopefully your meta description. If the text makes no sense at all you probably forgot to add one. Because if you didn’t Google pick random (not really) text for you. Worse case the text might look like spam and people will avoid visiting your site.

Page titles

Make sure they are descriptive. The way I prefer it is putting the title of the page first and after that the title of the site.

URLs

Are they logical? The should be readable and not a kilometer long with weird parameters. Try making it as clean as possible.

Facebook

Sharing on Facebook is another thing that many people think just works out of the box. It doesn’t. To make a shared page looking good and not displaying weird stuff you need to uglify the head of your page with some og. Don’t know what og is? Read up on it!

RSS

Another thing that people think comes by default. If you have any kind of blog or even some news-list you need to make sure there are some RSS-feed that people can pick up. Make sure to not just add it but also test it! A site with updates that you can’t subscribe to in some way is broken.

Robot.txt

This always sounds soo much cooler than it is. Texts for robots! (Huge robot wandering the earth picking up pieces from text with instructions from humans…) Anyway. Make sure this one is correct! It’s important! (As @uppderdog can tell you…)

Updated libraries

Maybe you started working on your site a couple of months ago. Maybe the libraries you included back then where really fresh. Do a double-check that they are still up to date. You don’t want to miss out on bug-fixes and new functionality. And when I’m at it make it a habit to always look for updates every time you touch the site in the future.

Screenreader

Do test with a screenreader. No, it’s not something that you can just skip. If you’re on a Mac you have it built in. If you’re on Windows you can download NVDA for free. No excuses! Test!

View source the site

How does it look? Correct headers? Use of markup? Dirty comments gone? The previous test with screenreader will do a lot to improve the result of this test.

Analytics

A feature yesterday. A must today. Without stats how can you tell how people uses your site? More importantly, how can you improve it? Include Google Analytics or the like. In a smart way.

Sitemap

Another thing that’s easy to forget. I’m talking of an xml sitemap. Help them crawl your site.

Optimize images

Make sure your users aren’t downloading unnecessary things. Smush and optimize where you can. Talk to the people putting in content (if it’s not you) and tell them how to save images in a optimized way.

Minified resources

Kind of like the song of Monty Python every request is sacred. It’s not ok to have multiple scripts and stylesheets. Fix your build-process so that it takes care of concatenating and minifying your resources.

Caching

Add it where it’s logical. Make a plan for it.

Total pages size

Go through your pages. Is it possible to cut down on something somewhere? Did you miss anything?

Performance in general

Check Google Page Speed and YSlow. If the site doesn’t get a good score fix it.

External resources

A lot of cool things (like fonts) can now be included via an external library. You just put a link in the head. Well if you do you better be pretty sure that that resources loads and that it loads fast. Otherwise your users will be stuck with a blank page. We all know that the browser takes a break when it comes by a script in the header. I, personally, wouldn’t want to rely on an external resource being loaded. Please do an extra check for this!

Validate your HTML

Sounds old school? The reason that it will impress other people is, well, old. But validating is still a good tool to spot errors.

Lint your JS and your CSS

Same here. Spot the errors and defects. Fix them.

Colors and contrast

Do some tests. If you can get hold of a real person having some sort of colorblindness and/or bad sight: even better! Don’t forget to do a crappy screen test! It’s real dangerous to have a screen that is a little too good when you are making a site for other people.

Proof read your code

Don’t just clean the site on the outside. Do it inside out. Remove old bad comments. Add new where it’s needed. Make sure things make sense, refactor. Remember that clean and logical code will help your site get fast updates in the future.

Accessibility

Yea, I know lumping things together here. But do a general test. Check alt-attributes. Is it easy to navigate with the keyboard? Do some checks and remember that accessibility changes constantly and it’s not just about a checklist and being trippel-A.

Read the content

Last but not least. Read the content. As many times as you got time. Sloppy and misspelled content is just so euuuuw.

Longest list. But I didn’t just write it for you. I actually wrote it to remind myself.
Let’s act like pros people ^.^

Posted on

The Best Thing a Frontend Developer Can Think of

Yesterday I stumbled across this post by Joakim. Yea, I know it’s in swedish. It talks about the bank Resurs Bank who are in the process of building a new site. They are going responsive and they are building it on WordPress. They are not the first bank to use WordPress (Handelsbanken is also doing it) but I believe that in Sweden they are pretty unique for using it for their main site. I’ve been looking through some swedish bank sites lately and it’s not pretty. (SEB frames, seriously? It’s 2012. Did you know?) So to this project as a whole I’d say: way to go and bravo!

But Joakim also wrote another thing: “Sure you don’t build backend in WordPress but as a frontend developer it’s hard to think of anything better”. Ok, now, here I do disagree. I don’t think WordPress is the best thing I can imagine. Sure I would pick it a thousand times over Sharepoint but there are problems. One of them is quite clearly visible in the beta of Resurs Bank: 

<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/twentyfour-chat/js/widget.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/themes/resurs/js/lib/jquery.center.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/acf-spot/spot.js?ver=1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/knowledge-bank/js/knowledge-bank.js?ver=3.3.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var knowledgebankAjax = {"ajaxurl":"http:\/\/new.resursbank.se\/wp-admin\/admin-ajax.php","knowledgebankNonce":"429ccf278e"};
/* ]]> */
</script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/knowledge-bank/js/knowledge-bank-ajax.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/knowledge-bank/js/feedback.js?ver=3.3.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var feedbackAjax = {"ajaxurl":"http:\/\/new.resursbank.se\/wp-admin\/admin-ajax.php","feedbackNonce":"af70f522c1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/knowledge-bank/js/ajax.js?ver=3.3.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var __pluginAjaxRoot = {"url":"http:\/\/new.resursbank.se\/wp-content\/plugins\/rb.bank.connector\/ajax\/"};
/* ]]> */
</script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/rb.bank.connector/ajax/js/rb.bank.connector.ajax.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/rb.bank.connector/ajax/js/rb.shop.connector.ajax.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/twentyfour-chat/js/lib/jquery.outerhtml.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/twentyfour-chat/js/lib/jquery.scrollTo-1.4.2-min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/twentyfour-chat/js/lib/nunt.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://new.resursbank.se/wp-content/plugins/resurs-panels/js/scripts.js?ver=1'></script>

This is not all the js. But still. Pretty hefty. WordPress often rely on plugins and a lot of them add js or links to js in the header or (if a bit better configured) in the footer. Yea, sure there are ways around it like WP Minify But uhm, it’s still not the best thing I can think of. I rather have a good concatination/minification process setup that caches my resources and are NOT run on page load.

Ok, so I could go on and point out more problems like having to try to figure out how to override the default-classes set by WordPress and so on. But well, I won’t do that. After all this blog is live because of WordPress.

Now I know you’d want me to point out my own favorite among technologies for building a web site. And as a frontend dev I say static files with some good build-scripts and server-side configuration. Yes, I’m serious. But I also know it’s an impossible setup for any site that needs server-side integration or some kind of CMS. So what then? As for me I’d say any framework that is clean. That doesn’t include random js on demand or add classes, extra markup or CSS. Right now I’m hoping for Django. The future will tell if that’s the best thing I as a frontend developer can think of.

Posted on

Dirty scripts, y u using global variables?

This week I got an angry tweet from @peter_lind. He was complaining about the use of global variables in almost every tracking script. I would say ad-scripts are just as bad. If not worse. I mean take a look at this little bastard:

<!-- OAS SETUP begin -->
			<script type="text/javascript">
			<!-- 
			//configuration 
			OAS_url = 'http://oasc.unt.se/RealMedia/ads/';
			OAS_sitepage = 'unt/start';
			OAS_listpos = 'Bottom1,Top,x80,x20,x60,Position1,Left1,Left2,Position3,Top2,Position2,x62,x01,x02,x03,x04,x05,x06,x07,x08,x09,x10,x11,x12,x83,Bottom';
			// '';
      OAS_query = 'keyword=' + escape(location.pathname + location.search);
			OAS_target = '_top';
			//end of configuration
			OAS_version = 10;
			OAS_rn = '001234567890'; OAS_rns = '1234567890';
			OAS_rn = new String (Math.random()); OAS_rns = OAS_rn.substring (2, 11);
			function OAS_NORMAL(pos) {
				document.write('<a href="' + OAS_url + 'click_nx.ads/' + OAS_sitepage + '/1' + OAS_rns + '@' + OAS_listpos + '!' + pos + '?' + OAS_query + '" target=' + OAS_target + '>'); 
				document.write('<img src="' + OAS_url + 'adstream_nx.ads/' + OAS_sitepage + '/1' + OAS_rns + '@' + OAS_listpos + '!' + pos + '?' + OAS_query + '" border="0" /></a>'); 
			}
			//--> 
			</script> 
			<script type="text/javascript">
			<!--  
			OAS_version = 11;   
			if ((navigator.userAgent.indexOf('Mozilla/3') != -1) || (navigator.userAgent.indexOf('Mozilla/4.0 WebTV') != -1))  
				OAS_version = 10; 
			if (OAS_version >= 11) 
				document.write('<scr' + 'ipt type="text/javascript" src="' + OAS_url + 'adstream_mjx.ads/' + OAS_sitepage + '/1' + OAS_rns + '@' + OAS_listpos + '?' + OAS_query + '"><\/script>');//-->
			</script><script type="text/javascript">
			<!--  
			document.write('');  
			function OAS_AD(pos) {
				if (OAS_version >= 11)  
					OAS_RICH(pos);  
				else 
					OAS_NORMAL(pos);  
			} //--> 
			</script>  
			<!-- OAS SETUP end -->

As you might have figured out I’ve taken this from unt.se. The Ad-company is a common one used on a lot of big sites. People complained about them already back in 2010. Just look at this blog-post by Rob.

Let me tell you a story. A little bit over a year ago I was working on a site where they insisted on using AddThis. I really don’t like this sort of scripts but I guess I save that rant for another post. On the site I was also doing a component using Raphaël. All good. Or so I thought. But if I downloaded the minified version on Raphaël and put it together with AddThis I got a conflict. They were both using global variables! Bummer… Since then both of them have updated their scripts. Maybe/Hopefully cause people like me emailed them and complained.

But why are big companies still using global variables? Only explanation I can think of is that they think, just like Google Analytics (with global variable _gaq) that they are big enough to “own” a global variable. Cause they can’t be so bad that they don’t know how to do it better, no?
So please people producing js for the public: Do not pollute the global namespace! And no, do not think that if you are big enough it’s ok. You will never be that big.

Posted on

When a tweet changes a meta-tag

Sometimes you get real happy.
This happened to me about a week ago. One of the big tv-channels in Sweden TV4 released their new redesigned and responsive site. I was on my phone and noticed that they had disabled zooming by using the popular attributes initial-scale=1 together with maximum-scale=1. Sigh. So why is this bad? Well, it disables zooming. I happen to really appreciate zooming on the phone. Maybe cause of my bad eyes.

So I sent off a little tweet. In english something like: Would you please remove maximum-scale? And I got answers! And people started agreeing with me! Some a bit more than others…
@upperdog_se posted a link to the excellent blog-post by Roger Johansson. (I kind of agree with everything that’s in there). And then I got the reply that they, the tech-people at TV4, would look into it. Nice! Couple of days later I got a tweet from @peter_lind, one of the developers, saying that the meta-attribut was gone from the site and soon would be removed from the blogs. Wohoo!

So there I have it. It feels like doing this is paying off. Might be a tiny little thing but to me it’s kind of real nice.

Posted on

Never want to be a troll

Well, I mean I like trolls. Especially pen trolls. Super omega-cute. I also like that norwegian movie Trolljegeren. But with that said my intention has never been to be a troll on the internet. Being all negative and grumpy. That is exactly not why I started this blog.

This weekend was midsummer. I was in my hometown spending some time with my parents. Learned my 58-year old mum how to ride a longboard among other important things. I also told my mum about this blog. About how I started it to try to point out the bad things in order to get some improvement (hopefully). My mums response to this was simply: “What about the good things? Why don’t you write about good examples?”. It got me thinking a bit. There are tons (in my opinion) blogs out there that talks about how to do good things, best practices etc. But I actually don’t no a single one that are giving out good examples. Writing things like “Look at this great site. Look how they got it right!”
So with that said I decided to include a new category of posts here. A category of posts about sites that are being nice to the internet in swedish words “är snälla mot internet”.

And oh, here is a video that I saw recently of a talk that Nicole Sullivan gave at Fluent. Watch it! It’s just 12 minutes. It’s not wasted time. Promise!

Posted on

Posting some kodsmuts

So let’s get down to the posting. I’m doing a test now with a syntax-highlighter cause it feels kind of inaccessible to post screenshots.

Here you see a part(!) of the links to external js-files ripped today from a big newspaper site here in Sweden. Guess which one? (No, not AB…)
Anyway it’s 2012. Steve Souder started to preach several years ago about cutting down on the requests but on big web sites it still looks like this. #kodsmuts!

<script src="/jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jquery/js/jquery.livequery.min.1.0.3.js" type="text/javascript"></script>
<script src="/jquery/js/jquery.alerts.js" type="text/javascript"></script>
<script src="http://193.93.132.142/adp/se/ads?id=326" type="text/javascript"></script>
<script src="/js/extensions.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/js/SiteRefresh.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/jquery/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/jquery/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/jquery/js/jquery.nyroModal-1.6.2.js" type="text/javascript"></script>
<script src="/js/NyroModalSettingsScript.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/js/GeoLocationSelector.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/js/WeatherControl.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/js/easyXDM.min.js" type="text/javascript"></script>
<script src="/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="/js/serviceplus.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/js/serviceplus-api.js?uniquekey=551568361" type="text/javascript"></script>
<script src="/jquery/js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="/jquery/js/jquery-jtemplates.js" type="text/javascript"></script>
<script src="/js/finhub.js?uniquekey=551568361" type="text/javascript"></script>
Posted on

Why I need to do this

I start this “blog-thing” out of frustration. I’ll explain. I’m working with web. Everyday I’m trying to make something that goes out on the internet better. I might not always succeed but I always try my best. I think that’s important to remember. I do this because I love the internet. I think it’s fantastic and I think people should be nice to it. (That’s by the way the subtitle of this blog – “One should be nice to the internet”).

At work and outside I come across things that’s done by other web developers and designers. Some things are new and some old. Because of my work I’m a bit damaged. I can’t help but analyze any new web-thing that I come across. I check the source to see the structure of the markup, I look at the use of colors, the type for the text etc. I come across a lot of things that could’ve been done soo much better. This is frustrating. I use to rant about these frustrating things to my friends. They listen patiently most of the times but to be honest my ranting doesn’t help the internet.

To do at least something I started tweeting about my findings using the hashtag #kodsmuts. The word is kind of swedish (just like me) and I would translate it to something like “dirtyfied code”. Do a search and you will find some mixed things of various quality. But to be honest I’m not sure my tweeting is enough although I have had examples of people actually listening.

Apart from web development there are three things that I really like doing. Taking photos, drawing silly pictures and writing texts. Right now I do neither of these three. Frustrating.

So to cure this frustration I decided to create a place for me on the internet where I can write, post photos and draw. I hope this will turn out to be a good idea. Please wish me luck.

Ps. I know what you are thinking. Why didn’t this ‘so-called’ web developer create a custom theme? I’ll tell you. I needed to get started fast. Before I lost motivation. I don’t throw together a custom theme in an evening. I just don’t. Mainly because I don’t think it will turn out good. So this is how I start.