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.