FoWA London 2014 Notes: Wim Godden on Caching

Notes from Wim Godden, When Dynamic Becomes Static – The Next Step in Web Caching Techniques, 30 September 2014
Speaker Slides

The journey
Original HTML: static
Old-school dynamic: rebuild every time
Dynamic: cache
Dynamic content in static: separate caches in different parts of the page.
More load, multiple web servers: need memory caching that will spread out to all servers e.g. memcache, Redis
Reverse proxy caching: cache everything being requested over and over e.g. Varnish.

ESI
Showed examples of ESI tags where the HTML gets retrieved and inserted where the tag was. But Varnish can’t cache POST or very large files or requests with set-cookie – i.e. user-specific content – so is pointless if user is logged in.

ESI not available due to copyright issues, being re-implemented as SLIC in spare time (i.e. not yet available).

SLIC
Then showed SLIC example using nginx
They use nginx as their reverse proxy – very lightweight and fast, low memory footprint, event-driven so no threads
Nginx stores block definitions from server in shared memory and pushes it to cache. Uses session cookie when getting the parts and stores it in memcache with the user
Can warm up the cache when someone logs in (load in their info)
Because you know which blocks you need you can make a single request to memcache them.
Nginx has excellent and superfast subrequest system, handles thousands of connnections, so need fewer web servers

Code changes needed to use the tags
Template conversion
Any data changes need to be pushed to DB and the cache

Advertisements
Posted in Future of Web Apps | Leave a comment

FoWA London 2014 Notes: Bruce Lawson on Web+

Notes from Bruce Lawson, Web+: Can the Web Win the War Against Native Without Losing its Soul?, 30 September 2014
Speaker Slides

There’s more engagement with apps than websites. 86% of mobile web accounted for by apps. Why?

Connecting offline
ISSUE: You can connect to apps without wifi; “The web doesn’t work offline and apps do” and a lot of the world doesn’t have good connectivity.
RESPONSE: AppCache was supposed to make the web work offline, but works on magic. Service Worker is a replacement for AppCache, lives in the browser cache.

Device-specific functions
ISSUE: Apps can access device-specific functions e.g. geolocation, accelerometer.
RESPONSE: There are now APIs for accessing things like geolocation and dragndrop.

Better UX
ISSUE: UX is better on apps: faster performance (information stored locally). (Facebook moved away from HTML5 to app because of performance e.g. scrolling.)
RESPONSE: IE11 now has <img lazyload...>, which waits to load the image until other key resources have begun.

Adding to home screen
ISSUE: Only 10% of opera desktop users bookmarked anything, even less on mobile. Users prefer to install the app instead.
RESPONSE: It’s possible to add websites to the home screen on non-apple devices using e.g. <meta name="mobile-web-app-capable" content="yes">.

Also mentioned

  • Apps are discoverable via app stores.
  • Push-notifications encourage engagement.
  • Web components allow you to create and extend tags e.g. you can create a supermegabutton that inerits the properties of button.
  • W3C widgets didn’t take off.
    The web is updateable; if you want to change something; with apps you have to persuade the user to re-download it. Widgets were snapshots, so you lost the conversation with the user.
  • Roughly, China, APAC and India have more inhabitants than the rest of the world; only 8.1% of phone sales in India (reported April 2013) were smartphones. And it doesn’t matter how smart your device is if your network’s rubbish.
    Opera mini uses pre-compression and prerender to reduce the bill for people who pay per MB. Older mobiles don’t have the power to render a website so you still need progressive enhancement. Real HTML is faster than squirting it in via JS.
Posted in Future of Web Apps | Leave a comment

Future of Web Apps London 2014

This week I was delighted to attend the London Future of Web Apps conference again. I’ve listed the presentations I attended below; I’ll add hyperlinks as I post my notes on each one.

Tuesday

  • Bruce Lawson, Web+: Can the Web Win the War Against Native Without Losing its Soul?
    Speaker Slides
    My Notes
  • Todd Motto, AngularJS: The Bridge Between Today and Tomorrow’s Web
    Speaker Slides
  • David Zuckerman, SDK Product Architect
  • Flurin Egger, Try This At Home: Lesser Known (but Interesting) Browser APIs
    Speaker Slides
  • Wim Godden, When Dynamic Becomes Static – The Next Step in Web Caching Techniques
    Speaker Slides
    My Notes
  • Jack Franklin, Using GulpJS for JavaScript Tooling
    Speaker Slides
  • Andy Berry, Building Componentised Web Apps with BladeRunnerJS
  • Kirsten Hunter, Designing Irresistible APIs
    Speaker Slides
    My Notes
  • Yehuda Katz, The Future of Web Apps

Wednesday

  • Camille Baldock, Telling Stories with APIs
    Speaker Slides
    My Notes
  • James Turner, How to Build Front-end Web Apps that Scale
    My Notes
  • Rob Dudley, Rocket-Powered Ramp Up with Front-end Automation Tools
    Speaker Slides
    My Notes
  • Ian Moersen, When Clean UX Requires Dirty Work: Modernizing Legacy Systems and Destroying Technical Debt
  • Simon Wood, APIs from the Trenches
    Speaker Slides
  • Ian Plosker, How a Single, Simple API Can Tame Database Complexity
  • Tim Ruffles, Exceed Your Designer’s Expectations with D3
  • Zach Holman, Move Fast and Break Nothing
    Speaker Slides
    My Notes
Posted in Future of Web Apps | Leave a comment

Working with Scrivener across Devices using Dropbox

I do most of the work on my Scrivener project on my Windows machine, but I wanted to be able to do work on it on my Android tablet during a long flight. Since I also have a Mac with Scrivener I was able to put together a workflow using the Sync to External Folder facility.

My Setup:
Mac with Scrivener and Dropbox
Windows machine with Scrivener and Dropbox
Android tablet with Dropbox and an RTF-editing app (I used OfficeSuite 7 Pro)

  1. Save the Scrivener project in Dropbox. You can now access it from the machines with Scrivener installed (one at a time though – see the section on Collaboration in Jefferson Smith’s article on cloud best practices in the references below).
  2. Open the project on the Mac and follow the instructions to Sync to External Folder, setting the destination to a folder in Dropbox. (Scrivener for Windows sadly doesn’t have this facility.) You can now access the exported files via the mobile device.
  3. In Dropbox on the mobile device, mark each exported file as a favourite to make it available offline. (It was a bit of a pain having to do this file-by-file, so if anyone knows of a way of doing this in bulk I’d be pleased to hear it.)
  4. Do your work on the mobile device.
  5. When you get back home, do the Sync to External Folder on the Mac again. (Remember to close the project afterwards!)
  6. Once everything has synced in Dropbox you can open the revised project on the Windows machine.

References
How to sync Scrivener with any text editor (and go mobile too)
Scrivener and the Cloud: Best Practices 2013
What does marking a file as a favorite on my phone or tablet do?

Posted in Uncategorized | Leave a comment

Flexbox Snippets

Note: Different syntax is required for different versions of different browsers. For information on browser support for flexbox, see Can I use Flexible Box Layout Module?.

Getting started

  • Put display: flex; in the styling for a div that’s going to hold the items (the container)
  • Put in some child divs with flex: 1; in the styling.*

The default direction for flexbox is row, so they will appear next to each other instead of stacked on top of each other.
*flex: 1; is shorthand for applying flex-grow: 1; flex-shrink: 1; flex-basis: auto;
Source: A Complete Guide to Flexbox

Make stacked child divs fill the available height
Say you have a container with a specified height, and you want the child divs to fill the container vertically.

  • Follow steps for ‘Getting started’.
  • Add flex-direction: column; on the container to stack the children on top of each other

Source: Boxes That Fill Height (Or More) (and Don’t Squish)

Centring div within parent
This is joyously easy to do. On the container element, set

  • display: flex;
  • justify-content: center; (this will align the child div horizontally)
  • align-items: center; (for the vertical alignment)

You don’t need to set anything on the child div unless you want its contents to be likewise aligned (in which case you apply these same stylings to the child div too).
Source: Designing CSS Layouts With Flexbox Is As Easy As Pie

Posted in Web Design | Leave a comment

Combining AngularJS and PhoneGap

  1. Create your PhoneGap project
  2. Download AngularJS, and save it somewhere accessible by the www\index.html page (e.g. in the www\js folder)
  3. Add a reference to the new file to the www\index.html page.
  4. Add your AngularJS code
  5. Your AngularJS app needs to be bootstrapped on deviceready. One way to do this is to add a function to call angular.bootstrap(document, ['appName']), and attach an event listener to the document to call the function on deviceready.

References
The Definitive Guide to Angular on Mobile

Posted in Uncategorized | Leave a comment

Setting up PhoneGap/Cordova for Android on 32-bit Windows 7

I tried to follow the getting-started instructions in the PhoneGap documentation, but found a fair amount of trial and error was involved. Hopefully this guide will mean that in future getting set up will take less than three hours…

Pre-requisites:

  • node.js
  • JDK
    • Dependency for ant – at present time needs to be < v8
    • Path to JDK folder needs to be in JAVA_HOME environment variable
  • ant
    • can be installed via npm
    • You need to make ant available in your PATH environment variable – for me ant was in C:\Users\[username]\AppData\Roaming\npm\node_modules\ant\ant\bin

Step 2 Install SDK + Cordova
Setting up an emulator
PhoneGap instructions:

Download and install Eclipse Classic
Download and install Android SDK
Download and install ADT Plugin

  • Eclipse and the ADT bundle arrive as zip files. If using 7-Zip, you’ll need to run it as an administrator if you want to extract files to the Program Files Folder.

Download the latest copy of PhoneGap and extract its contents.

  • I found cordova, which like phonegap is available through npm, worked better, and is what is used in most of the documentation examples

Step 3: set up environment variables

  • Make sure you’ve got the ant and JDK settings in your environment variables (see pre-requisites)
  • You’ll need to add to the PATH environment variable the paths to the platform-tools and tools directories in your download of the Android SDK

Step 4: Set up new project.
Creating the project
The PhoneGap documentation tells you to use
$ cordova create hello com.example.hello HelloWorld
Notice the use of cordova instead of phonegap (see comments on Step 2)

Setting it up in Eclipse
If you follow the PhoneGap instructions and go straight to setting up the project in Eclipse, you won’t get anywhere. What the document completely fails to mention is that you won’t see any projects when you select Android Project from existing code and navigate to the hello folder, because you haven’t created one yet.

If you look in the PhoneGap documentation, after running create there is a section on adding platforms:
$ cordova platform add android
(Note: if you didn’t make ant available when installing the pre-requisistes, you will see
Error: ERROR : executing command 'ant', make sure you have ant installed and added to your path.
If you didn’t make the JDK available, when trying to run $ ant you’ll see
Unable to locate tools.jar. Expected to find it in C:\[path to JRE]\tools.jar)

The next instruction to Run As > Android Application won’t work yet either because they haven’t yet told you how to set up an AVD.

Setting up an AVD
Their ‘instructions’ on how to set one up are a bit sketchy. Better instructions are available in Chris Bitting’s blog post.

  • Note: I needed to run the Android SDK Manager as an admin to install the necessary items.
  • The Virtual Device Manager will not accept a device name with spaces in (it won’t actually tell you what’s wrong, but the OK button will be greyed out).
  • The laptop I’m developing on is woefully under-powered and the BIOS doesn’t offer the option to enable the Intel Virtualization Technology to run an Intel image, so I needed to choose a small device size and launch from snapshot.

5A. Deploy to Emulator
I didn’t manage to get my project deployed to an emulator via Eclipse, but I had more success via the command line using
$ cordova emulate android
after starting the emulator via Virtual Device Manager.
(Be warned – it takes several minutes to deploy and launch on the emulator…)

References
PhoneGap
Getting Started with Android
The Command-Line Interface

Android
Get the Android SDK
Installing the Eclipse Plugin

The Definitive Guide to Angular on Mobile
Installing & starting with PhoneGap on Windows for cross platform mobile development
AVD Manager – Cannot Create Android Virtual Device
Unable to locate tools.jar
Why is the Android emulator so slow?

Posted in Uncategorized | Leave a comment

AngularJS: Watching a collection

I was recently in a situation in one of my AngularJS projects where I wanted to perform an action if the content of an array assigned to a property on the scope changed (e.g. if an item was added or removed). It took a few attempts to get the result I wanted…

Attempt 1: $scope.$watch('myArray', function () { ... });
This didn’t work because the array assigned to the myArray property on the scope wasn’t changing, only its contents, so the listener didn’t get called. As the documentation explains:

The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal… The inequality is determined according to angular.equals function.

The $watch method can take a third parameter, though:

$watch(watchExpression, [listener], [objectEquality]);

so I tried that.

Attempt 2: $scope.$watch('myArray', function () { ... }, true);
However, this blew up spectacularly in my case due to the complexity of the objects in the array I was watching:

RangeError: Maximum call stack size exceeded
...
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Turns out that for what I wanted to do I could use $watchCollection instead:

$watchCollection(obj, listener);
Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties).

Attempt 3: $scope.$watchCollection('myArray', function () { ... });
Success!

Note: Syntax for getting the item to be watched
The first parameter to $watch can be a string (evaluated as an expression) or a function.

The watchExpression is called on every call to $digest() and should return the value that will be watched

So given the following setup

$scope.currentValue = 1;
$scope.getCurrentValue = function () { return $scope.currentValue; };

any of the following will work

$scope.$watch('currentValue', function () { ... });
$scope.$watch('getCurrentValue()', function () { ... });
$scope.$watch(function(scope) { scope.getCurrentValue(); }, function () { ... });

Posted in AngularJS | Leave a comment

Installing a specific version of a package using NuGet in Visual Studio

I needed to be able to install an old version of a package from NuGet. I couldn’t do it directly via ‘Manage NuGet Packages’, but it turns out it can be done via the Package Manager Console.

  1. Open up the console via View | Other Windows | Package Manager Console
  2. Use the command
    Install-Package [package name] -Version [package version]
    to install the version you want

References
How to install an older version of package via NuGet?
How to Install a Specific Version of a Package with Nuget
Package Manager Console Powershell Reference

Posted in Uncategorized | Leave a comment

Yeoman Woes

Having attended a presentation on Yeoman at the FoWA conference in October, I recently decided to give it a go with an AngularJS application. I followed the Getting Started With Yeoman guide to install Yeoman and the angular generator (resulting in yo@1.1.2 and generator-angular@0.7.1) and then generate my application.

I hit problems straight off when I tried to run the tests using $ grunt test: instead of it just working (as one might reasonably expect from something scaffolded), I got errors Warning: No provider for "framework:jasmine"! and, when I fixed that, Can not load "Chrome", it is not registered!. Unfortunately not all the necessary dependencies had been added. The solution was either to add karma-jasmine and karma-chrome-launcher dependencies manually, as suggested here (but being careful to perform the steps in the order in the text section of the answer, NOT the order of the code examples) or to generate a new config using $ karma init.

Later that week, working on a Windows 7 64-bit machine rather than 32-bit, I found that generator-angular didn’t even complete, giving me the error building is not supported on win32. A suggestion on GitHub by meandnotyou seemed to work: track down the AppData/Roaming/npm/node_modules/generator-angular/templates/common/_package.json file and change the grunt-contrib-imagemin dependency from "~0.3.0" to "0.2.0" before trying to run the generator.

Posted in Uncategorized | 2 Comments