Leveraging browser caching

Here’s how to cache CSS / PNG files.

1. Use Expires caching headers 

i.e. rather than Cache-Control – see:

https://developers.google.com/speed/docs/best-practices/caching?hl=sv#LeverageBrowserCaching

2. If you’re using Apache these are set in the httpd.conf file:

e.g.  

<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresDefault “access plus 10 days”

    ExpiresByType text/css “access plus 1 week”

    ExpiresByType text/plain “access plus 1 month”

    ExpiresByType image/gif “access plus 1 month”

    ExpiresByType image/png “access plus 1 month”

    ExpiresByType image/jpeg “access plus 1 month”

    ExpiresByType application/x-javascript “access plus 1 month”

    ExpiresByType application/javascript “access plus 1 week”

    ExpiresByType application/x-icon “access plus 1 year”

</IfModule>

http://css-tricks.com/snippets/htaccess/set-expires/

3. If you’re on a Dreamhost VPS the httpd.conf file is here:

/dh/apache2/apache2-ps<your-number>/etc/httpd.conf

To access it use:

su – <your-admin-user>

and restart with:

sudo /etc/init.d/httpd2 restart

4. And you can test how successful your updates were here:

http://tools.pingdom.com/fpt/

WWDC 2013 101: Platforms State of the Union

Released:

iOS7

AirDrop

New UI

3 big ideas: Clarity, Deference (getting the chrome out of the way of the content), Depth (parallax, blurs, sophisticated animations) 

4 things to pay attention to: Content (shows through the bars) , Metrics (cells are going edge to edge), Buttons (using coloured text more than buttons, don’t have borders), Pickers (pops in inline with content)

Text Kit: complement to WebKit

Animations: dynamics, transitions (e.g. View Controller transitions), motion effects (UIMotionEffects – e.g. for parallax effect), UIKit Dynamics (physics engine)

Multitasking: new multitasking interface, background fetch and transfers; 

For more info read:

iOS7 Transition Guide 

OS X Mavericks

Battery Life – some major updates such as listing power hungry apps;

Centralized Memory Management – Low memory notifications, Purgeable memory, Compressed memory; 

Responsive Scrolling – rendered on the main thread in small tiles, automatic for OS X 10.8; 

App Nap – Timer Rate Limiting (i.e. apps perform CPU work together); 

Multi Monitors;

MapKit; 

Xcode 5.0

For iOS7 and OS X Mavericks.

Asset catalogs: naming convention of @2x etc is deprecated (more here: http://stackoverflow.com/questions/17052344/access-asset-catalog-programmatically); slice images in Xcode; 

Auto Layout workflow – set constraints and get immediate feedback in Xcode via the Assistant

Debug Gauges – also iCloud debugging; Quicklook for variables;

Testing Tools – Test Navigator (e.g. Unit Tests), can now run just one test or at class or bundle level. XCTest – not much on the internet about all this yet but an interesting article in Chinese here:

http://translate.google.com/translate?sl=auto&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.cnblogs.com%2Fliufan9%2Farchive%2F2013%2F06%2F14%2F3135414.html&act=url

Source Control – Top Level source control menu (Checkout, commit, merge, see history)

Continuous Integration – merging many code updates from many developers and constantly integrating them into the code base. Bots – CI tasks that run on OS X Server (Xcode > Product > Create Bot).

Sprite Kit

Available for iOS and OS X.

Physics Engine; Particles; CIFilters; Video so Masking can be added inline over video

See the Adventure Game source code.

Game Controllers

Defining a standard software interface.

1. a hardware standard

2. a software interface

AutoHotKey alternative for Mac: KeyRemap4MacBook

Complex but powerful.

Don’t use it unless you’re prepared to fiddle with XML and read the docs. 

However, if you’re prepared to put in an hour you’ll reap the benefits – very useful.

Download it from:

https://pqrs.org/macosx/keyremap4macbook/index.html.en

These are handy:

Examples:

https://pqrs.org/macosx/keyremap4macbook/xml.html.en#examples

The Google Group:

https://groups.google.com/forum/#!forum/keyremap4macbook

A sample of how to do a key sequence:

https://raw.github.com/tekezo/Files/master/KeyRemap4MacBook/private.control_d_to_kill_line/private.xml

List of KeyCodes:

https://github.com/tekezo/KeyRemap4MacBook/blob/version_8.3.0/src/bridge/generator/keycode/data/KeyCode.data

List of ModifierFlags:

https://github.com/tekezo/KeyRemap4MacBook/blob/version_8.3.0/src/bridge/generator/keycode/data/ModifierFlag.data

Less handy (unless you want to plough through issues):

https://github.com/tekezo/KeyRemap4MacBook/issues

AutoHotKey alternative for Mac: KeyRemap4MacBook

Complex but powerful.

Don’t use it unless you’re prepared to fiddle with XML and read the docs. 

However, if you’re prepared to put in an hour you’ll reap the benefits – very useful.

Download it from:

https://pqrs.org/macosx/keyremap4macbook/index.html.en

and edit the private.xml using:

Preferences > Misc & Uninstall > Open private.xml

These are handy:

Examples:

https://pqrs.org/macosx/keyremap4macbook/xml.html.en#examples

The Google Group:

https://groups.google.com/forum/#!forum/keyremap4macbook

A sample of how to do a key sequence:

https://raw.github.com/tekezo/Files/master/KeyRemap4MacBook/private.control_d_to_kill_line/private.xml

List of KeyCodes:

https://github.com/tekezo/KeyRemap4MacBook/blob/version_8.3.0/src/bridge/generator/keycode/data/KeyCode.data

List of ModifierFlags:

https://github.com/tekezo/KeyRemap4MacBook/blob/version_8.3.0/src/bridge/generator/keycode/data/ModifierFlag.data

Less handy (unless you want to plough through issues):

https://github.com/tekezo/KeyRemap4MacBook/issues

E.g. to nudge cell contents to the next cell to the right, I use this (replaces Command-X, right cursor, Command-V):

<?xml version=”1.0″?>

<root>

<item>

<name>Excel: Quick Cut and Paste</name>

<identifier>private.excel_cut_paste</identifier>

<autogen>

__KeyToKey__

KeyCode::CURSOR_RIGHT, ModifierFlag::OPTION_L | ModifierFlag::SHIFT_L, 

KeyCode::X, ModifierFlag::COMMAND_L,

KeyCode::CURSOR_RIGHT,

KeyCode::V, ModifierFlag::COMMAND_L,

</autogen>

</item>

</root>

Don’t forget to:

– select your custom shortcut in Preferences > Change Key

– and add it to your Login items

 

Google Webmaster Tools

==== UPDATE ====

Google have just released their new and improved navigation.

However, much of the comments I had about the last version still apply.

In addition I would add that changing the UI confuses people. You have to dig around again to try and find things.

Bit of an odd bag.

Crawl Stats 

This gives you a progress report on how far Google has progressed with a crawl.

Now under Crawl (was under the Health category.  

It would make more sense to split this out into a Status (or perhaps Statistics) category.

Sitemaps

Sitemaps lets you add or test a site map. It also, importantly, shows you the current status of how much of your site has been indexed (i.e. how many submitted links have been indexed by Googlebot) (as mentioned below, this differs from the total number shown in Index Status – odd). If the search engine hasn’t started indexing you’ll see a “Pending” under the Indexed column.

Now under Crawl (was under Optimization).

Surely it would make more sense to go under Configuration!

Index Status

Index Status is a graph showing the total number of pages indexed. Not particularly useful other than to refer to once in a blue moon to check totals add up. 

Oddly the total number of pages shown as indexed here does not equal the total number of pages indexed via Sitemaps.

Location:  now under Google Index (was under Health).

Surely it would make more sense to be in a Status (or Statistics) category. I don’t see how the number of pages indexed had anything to do with Health. 

Generally speaking, perhaps Google should add a generic Status category.

Google seem to be able to create awesome tools but really poor product designs or user interfaces.

Letting Google host jQuery for you

Include this:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” ></script>

and implement like this:

<script>

  $(document).ready(function() {

     alert(“let’s go…”);

  });

</script>

For example:

$( “.replace_with_element_classname_clicked” ).on( “click”, function( event ) {

 $(“.replace_with_element_classname_to_show”).toggle([1000]);

});

Why?

  • You’re using the Google APIs CDN which means decreased latency 
  • Increased parallelism (your browser typically limits you to 2 connections per hostname)
  • Better caching (many users will already have cached this library) 

Wonder why the src is missing http:?

This is a handy trick to use a single reference for both http and https pages.

Chrome DevTools

Chrome is fast. 

And DevTools are powerful.

So, makes a great combination for debugging HTML / CSS. Launch it by going to the Hotdog menu > Tools > Developer Tools or Alt Cmd I.

Switch between tools with the keyboard shortcuts: Cmd [ (left) or Cmd ] (right). 

These tools are:

1. Elements: inspect and edit the DOM tree

2. Resources: inspect resources in the page. e.g. HTML 5 Database, Local Storage, Cookies, AppCache, etc.

3. Network: inspects network resources in real time.

4. Sources: debug JavaScript

5. Timeline: time spent loading or using the web page

6. Profiles: profile execution time and memory usage of a web page

7. Audits: analyze a page as it loads and provide suggestions / optimisations for decreasing load time

8. Console: the JavaScript Console lets you log diagnostic information and offers a shell prompt

https://developers.google.com/chrome-developer-tools/

RailsInstaller – Mac OS X – Bad CPU type in executable

RailsInstaller does not work for older Macs that have 32 bit CPUs such as 2010 MacBooks that have an Intel Core Duo processor.

Shame the install page doesn’t tell you after you’ve downloaded and run the install program which can take several hours in total depending on the speed of your network connection and processor.

More:

https://groups.google.com/forum/?fromgroups=#!topic/railsinstaller/6m1Mi_kLGxY

https://github.com/railsinstaller/railsinstaller-nix/issues/8

Test frameworks

This is from a video by LinkedIn.

Automation

Vows

Asynchronous BDD (Behaviour Driven Development) for Node

http://vowsjs.org

Robotium

Test framework for black-box test cases for Android

http://code.google.com/p/robotium/

Selenium

Automating web applications for testing purposes

http://docs.seleniumhq.org

FoneMonkey

Functional testing tool that allows the interactive creation, editing and playback of automation scripts that exercise an application’s user interface

https://www.gorillalogic.com/fonemonkey-ios

GHUnit

Test Framework for Objective-C

https://github.com/gabriel/gh-unit

Build Management

Hudson 

A Continuous Integration Server

http://hudson-ci.org

Interestingly, they only commit to the trunk. i.e. there are no branches. Developers always commit to the trunk.

Layout Testing

Kiran (LinkedIn) said they use an internal tool that does this. Apparently they’re going to OSS it.

Performance

Again, Kiran said they use an internal PhantomJS based tool for this.

More on that talk here at around 45 mins in:

http://www.youtube.com/watch?v=hMd45Ij2DYQ