Building in JS using MVC (especially those big apps)

Posted on December 27th, 2010 by thiswayup.
Categories: dev.

This year has been for me learning not only how to improve my site build technical skills but more importantly understanding the best approach to building sites. As part of this I enjoy learning about things such as design patterns and I have a better appreciation of things such as MVC after being on a few projects using different PHP frameworks. What makes it more fun for myself is when I get to see something I have familiar with in a different light, in this case MVC in JS!

I think its definitely important to approach bigger site builds with a bit more structure and I agree with other people who know alot more than me that site builds are becoming such big buggers, they're becoming apps themselves. This requires the discipline of building in a way that not only do they work and meet the brief (blah blah), but they are also readily maintainable/scalable. This in contrast to the dark past of copying bits of code and hacking it together.

Anyways, I digress a little. I've heard of MVC in JS but I haven't really put too much time into it and just read a great article on it.

Some of the things that grabbed my attention reading it :

  • Number of MVC JS frameworks - I thought there was only one JS MVC framework but it turns out there are loads are there. Ofcourse each build requires its own considerations and there isn't a one size fits all which explains why there are so many.
     
  • Templating - I have moved away from the days of concating all my variables into a string and tend to favor templates. It's good to see there are a good number of choices are there and I hope to use the jquery tmpl to do more!
     
  • Build and minify - With any app, the build process can be a painful one of manually done and quite error prone. The article points out some great resources on how to go about using freely available tools such as Ant to help script out the build process such as concatentating, minifying and testing. Reminds me of the days when we used Nant to do our .net apps :)

So do check out the article, it's very well written and no doubt I'll be using it as a reference if I get the chance to build any bigger apps!

Building Large-Scale jQuery Applications

0 comments.

head.js = wicked! A quick way to speed up your js and other cool stuff

Posted on December 21st, 2010 by thiswayup.
Categories: dev.

I attended a js mini conference where someone introduced his small library/technique that essentially had the effect of loading js files in parallel *without* blocking, leading to the effect of faster loading page. I then decided to look around for other examples he mentioned and I discovered head.js. 

Head.js does many things, one of the really cool things is the ability to load a bunch of js files in a parallel non-blocking manner which leads to incredibly faster performance gains on load up and rendering. To see this in action, check out the head.js testing page of without head.js versus with head.js AMAZING! On google chrome, my results running it 3 times in a row and emptying the cache each time was :

Without head.js :

  1. 1151ms
  2. 1123ms
  3. 1300ms

WIth head.js

  1. 109ms
  2. 137ms
  3. 111ms

Can we say "hell yes!" ?

Along with that it also has some handy features :

  • smart js organise - write some code which uses a library above when you load it. eg write code in header then load it at the bottom of the page without hitting that unknown object/function
  • Use semantic HTML 5 tags - use the HTML 5 semantic tags and still have them recognised in IE!
  • screen size detector - detects screen width and then the css applicable will be used eg small mobile screen will get a small pic vs desktop. That way you can target large screen dektop, small laptops and then mobiles.
  • CSS3 detection - By using CSS3 feature detection, you can style for those with and without in the same css file.

0 comments.

Top 10 MySQL Mistakes Made By PHP Developers

Posted on December 5th, 2010 by thiswayup.
Categories: dev.

I read this recently and thought I'll share the love!

To add to this I think everyone should use easy to recognise naming conventions for the primary key and foreign key fields.

So rather then :

phoneModel.id //primary key

phoneModel.id2 //foriegn key

Use :

phoneModel.PK_phoneModel

phoneModel.FK_manufacturer

The reason as you can see is to make the code self documenting! Plus when you go to do mega complex sql queries, it's a lot more easier to see what types of fields you are joining!

0 comments.

reading about eval in js – why not to use

Posted on November 21st, 2010 by thiswayup.
Categories: Development.

I've been reading through and slowly digesting some of the points on tutsplus.com post on "The Essentials of Writing High Quality JavaScript". One of the many interesting parts is the point about Eval and some common anti-patterns. This can be sumarised as :

  • Potentially unsafe security wise - can you trust the string you are eval() on, especially if it comes from an outside source
  • passing to setInterval(), setTimeout() and new Function() is essentially an eval
  • You limit the potentially var declaration scope using new Function() and putting the eval into an enclosure

I encourage people to read it!

0 comments.

Quick speed up on javascript loops

Posted on November 16th, 2010 by thiswayup.
Categories: Development.

I have heard that one of the ways to speed up js is how you define your criteria on the number of iterations in a loop. Reading an article on Javascript best practices, you should cache the look up of an array length into a separate variable then use that rather then consistently look up the length. So rather then do :

for (var i = 0, i < myarray.length; i++) {
   // do something with myarray[i]
}

The above example  of i < myarray.length does a look up on every iteration. Instead you should do something like :

var max = myarray.length;
for (var i = 0, i < max; i++) {
   // do something with myarray[i]
}

Do the above apparently increases the speed by twice in Safari 3 and 190 times in IE7! Definitely worth knowing!

0 comments.

Learn Visual basic instead of Objective-C

Posted on November 13th, 2010 by thiswayup.
Categories: Mobile Dev.

I thought this was both hilarious and interesting, I just discovered Objective-basic! I've been playing around with Objective-C on and off for the past year ("I have that great app idea!") but I've also been thinking about whether its a bit pointless and we should just learn to use Phone Gap, Titanium or Grapple Mobile if you want to build Iphone apps (and not games). Objective-basic seems to be quite a good alternative, if you just want to build an Iphone App. Visual Basic is so straight forward, I think anyone can learn it. Plus I use to do a bit of visual basic "back in the day", this would be a great way to knock up an app quickly for most people!

PS A great post on the comparison on some of the ways to build mobile apps on stackoverflow

0 comments.

Great javascript video from google tech talks

Posted on September 26th, 2010 by thiswayup.
Categories: dev.

I've recently discovered a great video from the Google Tech Talk channel on youtube called "Introduction to JavaScript and Browser DOM" presented by Misko Hevery. I love the fact it covers some of the real interesting and quirky parts of Javascript, highlighting some of the elements which make Js so unique as well as some of the damn annoying parts!

I'm not sure when the video was made, but I'm guessing it was before IE8 came out. IMHO IE8 is great for Js debugging over Firebug. The reason I say is purely due to the fact that Firebug has become so unstable and sometimes you aren't sure if your JS is broken...or if Firebug is playing up again! That reminds me, I should really do another post on js debugging.

The coverage of the DOM is a bit thin but you can always check out other videos such as this for a good top of your DOM knowledge.

Enjoy!

Ps another great video is the "JavaScript: The Good Parts" from Doug Crockford

0 comments.

javascript funkyness

Posted on August 22nd, 2010 by thiswayup.
Categories: dev.

As I've started to learn more about javascript this year , I've been really enjoy digesting some interesting resources on the internet to learn more about the innards that make this rather great lanaguage. One that I have found is a great google tech talk "JavaScript: The Good Parts" from Doug Crockford and he highlighted a rather quiky thing in javascript.

function good(){
   return true
}
alert( good() );
//alert is true

function bad(){
   return
   true
}
alert( bad() );
//alert is "undefined";

One would think that if you run both function you would get the same return (ie true) but there's one thing I learnt from Doug's talk is that Javascript was built with a interesting quirk, if it runs into a compilation error, it actually backs up and puts in a semi colon in for you! This was originally designed to help people first picking up the language but as a consequence has caused this weird business. So the moral is to always add semi colons.

2 comments.

Upgrading macbook pro 13″ hard drive

Posted on August 7th, 2010 by thiswayup.
Categories: Gadgets.

I thought I'll post up my process to upgrade my Mac book pro 13" hard drive that I bought autumn 2009. I couldnt be bothered to find the exact model

Shopping list

I decided to upgrade my macbook pro hard drive recently as I'm going to use it as my primary method to store my photos. Having only 80gb left on my disc, I decided to buy most of my kit from Ebuyer. My shopping list was :

Step by step guide

Well not much much to it but here we go.

  1. After putting your new hard drive into the external case, I then backed up the whole thing using SuperDuper. The main reason being is that it not only backsup your drive but prepares it also for the switch by making it fully bootable! The benefit being is that it saves you having to install OSx and restore from the Time machine backup :)
     
  2. I then followed this video and you are done!

Other stuff

Don't forget to perform another time machine or SuperDuper backup after!

2 comments.

SEO thoughts of the day

Posted on August 4th, 2010 by thiswayup.
Categories: dev.

Today at work at we had a someone from Spring Digital do a basic introduction to SEO. At my work we have been working a bit in this space and always trying to gain SEO advantages over other sites but I thought it could be good to check out any possible new nuggets. As it stands I learnt some new things and reinforced some interesting points which have been floating around:

  • Twitter links like a "NOFOLLOW" - One of the things which I thought gave a little bit of weight was the fact that links appearing in twitter apparently hold no seo weight. I had obviously drawn an incorrect conclusion given that twitter started appearing on google searches.
     
  • Concept of "link baiting" - To follow on from the above point of twitter linking and focusing back on the idea that back linking is important, advertising yourself with interesting content obviously starts people talking. With a bit of luck, all that chatter of your site will hopefully spawn a few backlinks on other sites. Basic idea of marketing through social media I know but hey it stuck out.
     
  • PPC vs SEO - I find it interesting that SEO and PPC can sometimes both work together and against. But the majority of the time they complement each other. PPC generally is seen as the short term traffic driver with SEO requiring alot more strategic and medium/long term commitment before a good ROI.
     

Finally I have been reading a bit from The Art of SEO. As a developer I wonder about the process of our site builds and whether we are doing the correct "thing", reading this book had definitely given me some more insight. One of the points which sticks out is the advice to not use pagination. There are a few points he makes for it being bad :

  • Provides no topical relevance - since pagination results in a page of just links with no focus on seo this is bad.
  • Content between different pages can create dupe content - Duplicate content is a factor of the amount of SEO juice google gives.
  • Can create spider traps - Spiders generally can only dig so deep and if it catches the spider in a infinite spider trap then there is less chance of the page you want the spider to find, is found.

This pagination point sticks out as it goes to show that there is a site usability opportunity cost of choosing to not to use pagination. The book does concede though that it takes a seriously alot of planning to try build a certain large sites without pagination.

0 comments.

sextalk . . trusted married woman tight wide choice