Is jQuery Too Big For Mobile?

jquery_big_mobile_header

Obviously a lot of people worry about performance. I watched a video from phonegap about developing games on a mobile device. What the guy was saying was right, jQuery is slower than getElementBYId and that jQuery could be overkill. But its still nice to see the numbers behind jQuery rather than just opions.

From my time contracting I met a lot of people, In fact during my small perm jobs (Zone, Independence United) that let me go I realised two things. People are annoying and secondly, which is why they are annoying, they have preconceptions about coding practices that are just plain wrong. But when speaking to them about it its matter of fact for them. There is no discussing, they are disgusted with you for not knowing. I walk away and think,

That’s not right. wtf are they talking about?

But sadly at the time of the argument I don’t have enough knowledge to back up my bumfoundedness in what their thoughts were. Of course I think this more has to do with the individual as if the people aren’t dicks and they know more than you, you discus and learn from them.

Fuck, what was the point of this post? jQuery, its not that bad on a modern mobile 😉

This question gets asked a lot, and I’ve yet to see a data-based exploration of this topic. Terms like “big” and “bloated” are relative terms; they don’t mean anything without numbers to back them up. The real question should be – “Does the size of jQuery adversely affect the users of my applications enough to outweigh the development conveniences that the library provides?”

But my favorite and most obvious quote is here:

There’s Almost Certainly Something Way More Important to the Efficiency of Your Application Than Whether You Use jQuery

According to the HTTP archive the average Web page now

  • is over 1.7MB,
  • makes over 90 HTTP requests,
  • has over 275K of JavaScript,
  • makes 17 HTTP requests for JavaScript alone,
  • includes over 1MB of images,
  • makes only 46% of its resources cacheable.

So before you care about jQuery, first make sure you

  • minify your CSS/JS assets,
  • concatenate your CSS/JS assets,
  • gzip your HTML/CSS/JS assets,
  • compress your images,
  • set appropriate cache headers,
  • remove unnecessary HTTP requests.

Often removing an image or two can improve your performance more than removing jQuery, and is far easier to do. If you have performed all these optimizations, and are still experiencing performance issues on mobile devices, then look into removing libraries like jQuery – just make sure you cover your bases first.

See the article here: Is jQuery Too Big For Mobile?

So, read it understand it and before you start bashing technologies look at the other fucking stuff on your site.

 

 

Using android studio to compile phonegap apps in cmd setup – Windows

I am just writing down the shit here so that when I move to a new pc I can just copy and paste the detts.

Things we’ll need:

Step 1 – Installing stuff

Android Studio

Download and Install Android Studio.

Step Android 1

The location is up to you, but I find it easiest to put it at the root of my C drive. I conveniently created a folder amply called “phonedev” folder.

C:\phonedev\sdk\

Step Android 2

Once installed you’ll just have a folder full of stuff.

Java JDK

I’ve already got this installed so can’t take print screens for myself.

But good, its installed.

Node.js

Bog standard install please.

Phonegap

With node.js installed we can now install phonegap. From cmd (start->run->cmd) sudo npm install -g phonegap

Apache Ant

Download the latest version, this can be any format you want, I go with zip as it has the most support: http://tweedo.com/mirror/apache//ant/binaries/apache-ant-1.9.3-bin.zip

step ant 1

Extract that to the phonedev folder you created eariler, it should like this once extracted: C:\phonedev\apache-ant-1.9.3 and for now you’re done.

step ant 2

 

System Variables

Now is the fun part:

bring up the advanced system variables. Easiest way is hitting Windows Key+Pause on your keyboard. This will just bring up the Control Panel -> System From there you want to click the Advanced system settings:

system settings

Then click Envrionment Variables This little guy is where we tell the computer where the hell we installed anything.

enovi

 

Adding new variables

You need to add two new variables, to do this click New under the System variables section. Thats the second new tab in this little window.

Now add these two:

  • ‘ANDROID_HOME’:’C:\phonedev\sdk’
  • ‘ANT_HOME’:’C:\APACHE-ANT-1.9.3′

new ones

 

Now scroll down the list and fun straight up Path

Now add the following to the end of the list:

  • C:\PROGRAM FILES\JAVA\JDK1.7.0_45\BIN;
  • C:\PHONEDEV\APACHE-ANT-1.9.3\BIN;
  • %ANT_HOME%\BIN;
  • %ANDROID_HOME%\TOOLS;
  • %ANDROID_HOME%\PLATFORM-TOOLS;

or if its more simple just paste this in at the end.
C:\PROGRAM FILES\JAVA\JDK1.7.0_45\BIN;C:\PHONEDEV\APACHE-ANT-1.9.3\BIN;%ANT_HOME%\BIN;%ANDROID_HOME%\TOOLS;%ANDROID_HOME%\PLATFORM-TOOLS;

Worth noting that before pasting this in, make sure the last variable in the last already has a ; Otherwise it’ll just break things.

Before Pasting… Notice the trailing ;

before pasting

After Pasting

after paste

 Verifying things worked

  • Check Ant: ant -version
  • Check Node: node -v
  • Check Java: java -version
  • Check Phonegap: phonegap -version

If all went well all of the above will look like this:

checks

 

At last the best bit, check everything is working.

Phonegap create helloworld

Now move into that folder:

cd ./helloworld
 
phonegap build android
build

Now cream everywhere!!

Although there is actually a lot more you should know, but as i’m just doing it for reference when my PC next crashes, maybe if somebody ask’s I’ll do it.

You’re an A-Z Person

Giant hairy testicles!

Always start with the first thing that comes into your head. Even if its racist.

Now I don’t think its backbone that is making me write bloody awesome code, I think that has more to do with how bloody awesome I am by birth. As my psychiatrist said:

Most people think A,B,C. You’re more in the A-Z category

Now I think he was trying to get across is to stop and properly asses things in a logically fashion. I think fuck you you cunt, I’ll just do what feels best. But no I actually thought it means I normally get to the end of something before others, but it might mean I don’t fully understand what just happened. Might be true, but I’m 28 now, who gives a fuck u fuck nut!

Do I really need to swear so much?

2 years and still on The Telegraph

Was just looking at Giggs turns 40 on the Telegraphs website. Reminded me I made this code.

I can’t actually believe its been 2 years since i started writing the code. I thought in 2 years I would have learnt a lot more than I knew back then. Maybe I have, but I still blame libraries that I’ve learnt how to use.

Still its there:
http://www.telegraph.co.uk/template/ver1-0/js/pages/photoGalleryAjax/gpocphotoAjax.core.js


//****************************************************************************
//* Description:
//*
//* Ajax images gallery
//*
//*
//****************************************************************************
//* Author: J Hutber Date: 11/12/2011
//*
//* $Id: photoAJax.core.js,v 1 2011/11/12 09:52:09
//*
//* Updates:
//*
//***************************************************************************

//Rebind console to e
if (typeof console == "object" && typeof console.error == "function") {
function e(msg) {
console.info(msg);
}
}

browserTab = document.title;

ajaxPhotos = {};

ajaxPhotos.isLastFrame = false;
ajaxPhotos.lastFrameDisplayed = false;

var onPropertyChangeHadler = function() {
if (event.propertyName == "title") {
if (window.attachEvent){
document.detachEvent("onpropertychange", onPropertyChangeHadler);
document.title = browserTab;
document.attachEvent("onpropertychange", onPropertyChangeHadler);
}
}
}
}

Redmine…. du de du deeeee de de dede reddddmineeeee

I’m singing that because I have just installed redmine. All be it, because I had one bug I found that i wanted to track, that’s not the point is it. The point is, I downloaded, installed and am now running a completely free awesome ticketing system. I love you open source.

_ - Repository - Sex Diaries - Stage - Redmine - 2013-09-15_09.03.22
I truly truly do love having my own dedicated server. I tried virtual when I can have the real thing for half the price…

So now I can track everything and everything again. If i want to. Installing it was not without its difficulties. I should start blogging how I did things you know…. hummm

Display: Flex…. Hummmm

Whilst this isn’t full supported I am dam looking forward to being able to use http://dev.w3.org/csswg/css3-flexbox/#overview or display: flex.

In short this will mean 2 very cool things, or 3… Depends which way you look at it.

Firstly we’ll be able to order how the browser renders markup for the browsers. Meaning, I can shift elements around inside a given element much like you can order things with index. so “order: -1” will mean given element is moved down one elements position.

Why wouldn’t you just position this element in this order already? Well I’m glad you asked that. For accessibility reasons. If you’re using a screen readers you’ll want to organise the markup as best and as clear as possible.

Take this example:
of a catalog where each item has a title, an photo, a description, and a purchase button. The designer’s intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons aligned at the bottom, regardless of the length of the item’s description. Flex layout makes many aspects of this design easy:

The catalog uses flex layout to lay out rows of items horizontally, and to ensure that items within a row are all equal-height. Each entry is then itself a column flex container, laying out its contents vertically.
Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, ‘order’ is used to pull the image up from later in the content to the top, and ‘align-self’ is used to center it horizontally.
An ‘auto’ margin above the purchase button forces it to the bottom within each entry box, regardless of the height of that item’s description.

#deals {
display: flex; /* Flex layout so items have equal height */
flex-flow: row wrap; /* Allow items to wrap into multiple lines */
}
.sale-item {
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item's contents vertically */
}
.sale-item > img {
order: -1; /* Shift image before other content (in visual order) */
align-self: center; /* Center the image cross-wise (horizontally) */
}
.sale-item > button {
margin-top: auto; /* Auto top margin pushes button to bottom */
}

<section id='deals'>
  <section class='sale-item'>
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don't have much money.
    <ul>
      <li>Computer
      <li>Monitor
      <li>Keyboard
      <li>Mouse
    </ul>
    <img src='images/computer.jpg'
         alt='You get: a white computer with matching peripherals.'>
    <button>BUY NOW</button>
  </section>
  <section class='sale-item'>
    …
  </section>
  …
</section>

If you can get all of that you’ll see its amazing plus exciting.

Secondly, the flex side of things. As i’ve always had to force, using width: 100% is great. But so often i’ve needed to use height: 100% but i would have to give the element position absolute to get it to stretch.This has many problems. This is what flex is here to fix. N boy is it far to long in the marking.

So the contents of a flex container will be able to do:

  • can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
  • can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
  • can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
  • can “flex” their sizes to respond to the available space
  • can be aligned with respect to their container or each other
  • can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

Basically, it rocks. Bring it on. I’m off to play with it now!!