Am I through with the MVC architecture already?

For 8 months at one client I worked on several customer-facing web assets for them.  Among them was a relatively new SPA (Single Page Application) to handle Help and Support, written in AngularJS.

I have written my own Apex applications, and the development process is highly iterative (as is required by XP and any agile process developed since).  You can either start off with an angular-seed or ng-boilerplate The angular seed repo needs to be updated to the version of Angular you want it to use, and if you plan to refer to docs.angularjs.org, make sure that is set to the same version as your project.

Once you have got it running you can start to implement your routes, scopes and directives, adding Karma or Protractor tests and building features in, one card at a time, until you're done.

The key piece of advice for coding with AngularJS is NOT to use jQuery because when you start introducing jQuery it interferes with the AngularJS stuff.  Actually remove the reference to jQuery if you can't resist the temptation to use the dollar sign.

http://www.cheatography.com/proloser/cheat-sheets/angularjs/

I've never really liked the result.  Unless you were directly involved in the production process, you have very few clues about what is going on inside.  It's often difficult to maintain and adding new features often creates bugs.  Often you are not sure whether you are looking at a bug or a business rule.  I did not enjoy making changes to the code because I felt as if I was doing as much harm as good, probably more.

This brilliant paper on DCI shows how the MVC architecture is an advance on the OOP paradigm (and goes on to argue that it doesn't really work).

People at Facebook (who have a lot of experience in this area) explain why MVC doesn't scale and they go on to explain a brilliant way forwards: a framework called FLUX and a user interface library called REACT.

The key concept from React is the "virtual DOM abstraction" a sequence of  messages (for example [{Alice : online}, {Bob: offline}, {Charles: online, mobile}]) describe mutations to a mode (the virtual DOM), React will diff the virtual DOM and the real DOM and work out the minimal set of DOM mutations needed to transform the DOM to match, and put them in a queue.  A batch update will set the DOM to match the virtual DOM.

You will need your wireframes, to document your Use Cases, and to produce State Transition Diagrams.

https://facebook.github.io/react/docs/getting-started.html
http://www.cheatography.com/kitallis/cheat-sheets/reactjs/

Frontal identification on motorcycles

Your Honour,

I write to you with reference to your call for frontal identification on motorcycles (i.e. front numberplates).  I also would like to 'level the playing field' as you say.  The real problem is we live in a car-centric world, and that is the cause of a number of safety issues with motorcycles. I will list 5:

• Speed cameras face the front of the vehicle (but every ADR-compliant vehicle has a rear numberplate).  The camera systems with forward only facing cameras were developed, installed, tested and commissioned by car drivers.  EITHER at no time did anybody think about motorcycles OR motorcycles were considered to be a small percentage of vehicles that were not worth bothering with when considering the number of extra requirements and tests in comparison to the extra number of tickets issued.  Whatever the reason, there aren't many mobile camera systems on the market that capture rear plates. I believe the vast majority of fixed cameras identify vehicles by their rear plates and mobile safety cameras monitor traffic traveling in both directions. 

BUT this is only one symptom of the problem (we live in a car-centric world).  The interesting thing is that speed cameras are not the only piece of regulatory framework for motorcycles to have fallen through:

• Inductive-loop traffic detectors do not reliably detect motorcycles.  These generally occupy 50% of the width of the lane and are placed centrally in the lane.  Motorcycles are supposed to ride in either the left-hand or right-hand wheel track of the car in front, so we can pass outside the loop easily, depending on whether or not we want to trigger it.  Some road-going sports bikes are almost entirely alloy, carbon fibre, and plastic  —  they wouldn't trigger the inductive loop if they rolled right over the top.  Sometimes I am unable to trigger the automatic barrier going into a car park, or I may be able to run a red light without being photographed (I have never tried this, but I certainly move to the lane extremity on amber!).  This means red light cameras can be avoided by motorcycles too.  At least with speed cameras the Road Safety Camera operators can see the motorcycle with no rear plate; this situation is worse because the system is so dependent upon technology, which has a built-in faulty assumption that the vehicle in question is a car, it is likely you don't know how many motorcycles run red lights.   You may even believe it is not a problem!
• Crash barriers are not designed to be hit by motorcycles. AS/NZS 3845 dictates crash barriers will be tested with cars and trucks only, not motorcycles;  the vehicle category doesn't exist in the standard.  It is known that the reasoning above applied with crash barriers (motorcycles were a small percentage of road vehicles and not worth bothering with when the standards were first drawn up)  hence crash barriers are dangerous to motorcycles because they were never even designed to be hit by motorcycles. In 2012 the standards were revised. I personally called for motorcycles to be included at that time. AND...I am still waiting for the standards to be published so I can see whether I have had any effect.
• Car crash testing: generally speaking, there are eight different types of car crash test performed world-wide.  None of them involve collisions with motorcycles.  In Australia, ANCAP (Australian New Car Assessment Program) runs four different types of crash test: front impact, side impact, pedestrian and pole.
• Roadside furniture: specifically wooden posts (don't know their proper name) that are always placed between the road and footpath on a corner at EXACTLY the point a motorcycle would leave the road.

Of course the net effect of all of this is that motorcycles will be a less safe form of transport than they might be if they were considered when these systems were set up.

My point is, rather than calling for a ad-hoc fix to the specific problem of lack of frontal identification on motorcycles, you would get better results  —  and make the world a better place  —  by fixing the root cause: consider motorcycles when systems are designed in the first place.

I invite you to join with me in calling upon VicRoads to engage with all sectors of the PTW community

How to stop cars running red lights

Eureka

Maybe a good idea.

Years ago I took a motorcycle learner's test.  The instructor told us he represented some motorcycling organization or other - can't remember which one.  He told us that he had gone to visit the South Australian police and, being a relatively small force, they were quite accommodating and he had been invited into the control room.

He asked us "do you know what I learned when I was in there? Do you know that a red light camera records the number of seconds the light has been on red when it takes the picture? Can anyone guess, of all the pictures that are taken by red light cameras, what the average time is a camera has been on red before it takes a picture? 1 second? ... 2?... No. 34 seconds. Think about that for a moment - that's not the longest time, that's the average time.  What's going on?  The light has been red for so long it's nearly ready to change back to green.  What happens is, all the vehicles that were queuing at the lights waiting for a green light have gone... and the driver of the car sees there are no cars queued up waiting is expecting his light to be green, misses the fact it is red, so he goes sailing through the junction."

NB: If you ever come to a traffic-light controlled junction and there are no cars waiting, take extra care when going through to make sure nobody is running a red light against you.

So what?

Provided that the above information is correct, and car drivers mostly look but don't see a red light, I believe a good way to stop cars running red lights like this is simply to make the amber light flash when the red light is on.

Thanks.

http://cameracommissioner.vic.gov.au/contact-us/

How to create a responsive web page using Bootstrap 3 and Sass.

Introduction

This is a quick and dirty introduction to Sass and responsive design.  You should be able to work through it in 20 minutes, one lunch hour.

As is the usual convention, any line starting with $ can be typed at a (Bash) shell command line. Monospace font is used for listings, or anything that appears on the screen.

I'm assuming you have sass and bower already installed on your system, if not, consult the internets.

Let's Get Started

If you aren't using a framework like Rails, AngularJS etc. (more about this in another post) you will start off by creating your project directory from the Bash prompt:

$ mkdir sass

$ cd sass

Next use a text editor like gedit to create an empty HTML5 template looking like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blank HTML5 template</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
  Hello, World!
  </body>
</html>

Check this displays as expected in a browser (blank page except for the words 'Hello, World!').

Before going any further, I want to associate bootstrap with the project:

$ bower install bootstrap

Food for thought.  Look at the other related packages you might be able to use in the future:

$ bower search bootstrap

I'm not going to create a bower.json file or do any fancy git grunt stuff right now.  If I was going to I would have used 'bower init'.

The first thing I wanted to do was create a Sass stylesheet.  ALL my styling will be done in one file called ms.scss, which starts off looking like this:

/* Original file: ms.scss */
$primary-color: #333;

body {
  color: $primary-color;
}

h1 {
    font-size: 250%;
}

h2 {
    font-size: 200%;
    font-style: italic;
    text-align: right;
}

p {
    font-size: 100%;
}

There really isn't much to it at the moment.  This file will be compiled into ms.css by entering the following command at the shell prompt:

$ sass --watch ms.scss:ms.css

This tells the compiler to compile it, but also keep watching the file for changes.  Whenever a change is detected, it triggers a recompile.  If you inspect the generated .css, you should see it looks pretty much the same as the .scss file, except for the body color.

Finally I can add a reference to my new stylesheet into the web page in the header section AFTER the reference to bootstrap.  Why after?  So this .css file overrides the bootstrap .css file if there are any conflicts (try it the other way around):

<link rel="stylesheet" href="./ms.css" />

Hopefully this displays a simple web page.

...cup of tea...

The other thing I wanted to do was use Bootstrap to make a responsive layout.

We are NOT doing table-based layout here, but in HTML tables are written out by rows and the concept of a column doesn't really exist. He (TBL) could have defined tables as a group of columns he couldn't do both at the same time so he made a decision: rows.  Hold that thought for a paragraph.

The key thing about Bootstrap CSS (possibly the only thing) is there are nested divs: a container-fluid contains a row, and each row contains some divs (which appear as columns) with widths adding up to 12. The accumulated width of the columns in a row must always add up to 12 or  it won't work.

See these pages for a description of the Bootstrap layout:
     http://getbootstrap.com/css/#grid-example-basic
     https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

As the screen width shrinks (or if the page is viewed on a device with a different screen size) instead of displaying a scroll bar, the screen will re-organise itself and the content will re-flow so that 'column 2' appears underneath 'column 1'. If you are clever, you can organise the columns so that the content reflows in different ways for different devices.

1. in the head region, next to the other meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

2. after the title:

<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>

3. here's the new body, replacing the 'Hello, World!' message:

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
           ...
        </div>
        <div class="col-sm-6">
           ...
        </div>
      </div>
    </div>

I'm keeping it very simple here.

Now we have the STRUCTURE, we can add the actual CONTENT:

Super important: the structure part MUST NOT CHANGE, but you can muck around with the content 'till the cows come home.  This is where all beginners stuff up.  There is no indication of which bit is structure and which bit is content if you don't know what you're looking at.  The reason I call the bit above this paragraph 'STRUCTURE' is because it controls the Bootstrap 3 responsive layout, but doesn't actually display anything on the screen; the reason I call the bit immediately below this paragraph 'CONTENT' is because it is all plain, old HTML5, semantically structured, and visible in the browser.

The first ellipsis can be replaced with this:

          <h1>Never give in</h1>
          <p>“Never give in. Never give in. <br>
Never, never, never, never — in nothing, great or small, large or petty — never give in, <br>
except to convictions of honour and good sense. <br>
Never yield to force. <br>
Never yield to the apparently overwhelming might of the enemy.” </p>
          <h2>― Winston S. Churchill</h2>

The second ellipsis can be replaced with this:

          <h1>We shall fight them on the beaches</h1>
          <p>“We shall go on to the end. <br>
We shall fight in France, we shall fight on the seas and oceans, <br>
we shall fight with growing confidence and growing strength in the air, <br>
we shall defend our island, whatever the cost may be. <br>
We shall fight on the beaches, we shall fight on the landing grounds, <br>
we shall fight in the fields and in the streets, we shall fight in the hills; <br>
we shall never surrender.</p>
          <h2>― Winston S. Churchill</h2>

If the screen is wide enough to display it, you should see both quotes side-by-side.

Finally, I wanted to make the initial quote symbol much bigger.  This is where your basic HTML and CSS capability becomes a bit intermediate IMHO.

First, the styling is only to be applied to the quote mark, so it has to be wrapped in a span tag so it has its own HTML element. Naturally the tag is going to have a class so we can refer to it directly instead of something perverted like p + span and so it is reusable (we don't really reuse it). Change both quotes like this:

      <p><span class="qbox">“</span>We shall go on to the end. <br>

Then you can muck around with the styling by right-clicking on the quote and selecting inspect element, then applying element.styles directly until it looks like you want it to.  Finally copy your style from the browser to the Sass style sheet.  I settled for this:

.qbox {

    font-size: 360%;

}

Add this to the .scss file and re-display the page. Notice how the qbox span mucks up the line height.

To get the "hanging left indent" you need to know what it's called so you can Google it.  I first came across the term in 2004 when I read a book called Designing With Web Standards By Jeffery Zeldman. This page contains what I'm looking for: http://www.thesitewizard.com/css/hanging-indents.shtml

So after a bit more mucking around I've got this HTML:

<p class="hangingindent"><span class="qbox">“</span>We shall go on to the end. <br>

and this SCSS:

.hangingindent {
  padding-left: 26px;
  text-indent: -22px;
  line-height: 25px;
}

Finally (advanced CSS?) we do not use pixels to define the size, because it will look alright on one device and the layout will be a bit stuffed up on other devices, so you fix the layout on the second device only to find you have stuffed it up on the first etc. etc.  In 2015 we use REMS to talk about size, and this is a multiple of the base font size. Note that it is normally 16px, but Bootstrap sets it to 10px - I don't know why.  Perhaps to make it easier to convert px to rems?

When trying to convert px to rems I stumbled across this: [http://www.stubbornella.org/content/2013/07/01/easy-peasy-rem-conversion-with-sass/]. 

Which has the Sass function called "calculateRem".  Drop that function into ms.scss and change 20px values to calculateRem(20px).

THAT'S IT!  

My final Sass is:

/* Original file: ms.scss */
$primary-color: #333;

@function calculateRem($size) {
  $remSize: $size / 10px;  /* changed from 16px */
  @return #{$remSize}rem;
}

body {
  font-family: 'EB Garamond';
  color: $primary-color;
}

h1 {
    font-family: 'Tangerine', serif;
    font-size: 250%;

}

h2 {
    font-size: 200%;
    font-style: italic;
    text-align: right;
}

p {
    font-size: 100%;
}

.qbox {
    font-size: 360%;
}
.hangingindent {
  padding-left: calculateRem(26px);
  text-indent: calculateRem(-22px);
  line-height: calculateRem(25px);
}

body > div > div > div:nth-child(1) { /* column 1 */
  background-color: aliceblue;
}

body > div > div > div:nth-child(2) { /* column 2 */
      background-color: beige;

}

which compiles to:

/* Original file: ms.scss */
body {
  font-family: 'EB Garamond';
  color: #333; }

h1 {
  font-family: 'Tangerine', serif;
  font-size: 250%; }

h2 {
  font-size: 200%;
  font-style: italic;
  text-align: right; }

p {
  font-size: 100%; }

.qbox {
  font-size: 360%; }

.hangingindent {
  padding-left: 2.6rem;
  text-indent: -2.2rem;
  line-height: 2.5rem; }

body > div > div > div:nth-child(1) { /* column 1 */
  background-color: aliceblue; }

body > div > div > div:nth-child(2) { /* column 2 */
  background-color: beige; }

/*# sourceMappingURL=ms.css.map */

And my responsive HTML is now:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to create a responsive web page using Bootstrap 3 and Sass</title>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="./ms.css" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=EB+Garamond" />  <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
 <div class="container-fluid">
   <div class="row">
        <div class="col-sm-6">
       <h1>Never give in</h1>
       <p class="hangingindent"><span class="qbox">“</span>Never give in. Never give in. <br>
Never, never, never, never — in nothing, great or small, large or petty — never give in, <br>
except to convictions of honour and good sense. <br>
Never yield to force. <br>
Never yield to the apparently overwhelming might of the enemy.” </p>
          <h2>― Winston S. Churchill</h2>
        </div>
        <div class="col-sm-6">
         <h1>We shall fight them on the beaches</h1>
          <p class="hangingindent"><span class="qbox">“</span>We shall go on to the end. <br>
We shall fight in France, we shall fight on the seas and oceans, <br>
we shall fight with growing confidence and growing strength in the air, <br>
we shall defend our island, whatever the cost may be. <br>
We shall fight on the beaches, we shall fight on the landing grounds, <br>
we shall fight in the fields and in the streets, we shall fight in the hills; <br>
we shall never surrender.</p>
          <h2>― Winston S. Churchill</h2>
        </div>
      </div>
    </div>
</body>
</html>

Try re-sizing the browser window when the page is displayed and confirm that the divs are displayed side-by-side when the display width is greater than sm-6 pixels and, when the width drops below sm-6 px, the screen re-arranges to display one quote above the other.

Inspect an element and notice how the link to the style points to the file ms.scss.  Note that, if you click on that link, the browser displays the source file scss, not the compiled css file.  This is because of the ms.css.map file created by the Sass compiler.  You really need this if, when maintaining the web page, you want to change anything affected by ms.css, for example the body font color.

Hope this gives you a quick and dirty introduction.  Thanks for reading.

Michael Streeter

Excercise

Alter the HTML to replace the p and h2 tags used for the quote and attribution to use the semantically correct tags.  Hint: http://html5doctor.com/blockquote-q-cite/

Ayers Rock 2014

Ayers Rock Revisited

In '98 I visited friends in Sydney and decided to see Ayer's Rock.  The people in Sydney said "Don't listen to what anybody tells you, make sure you climb the rock." They said this business about ownership was a con because 'if you look at the areas they're claiming ownership of they're all the areas that a valuable from a tourism point of view - even Botany Bay where Capt. Cook landed'", which would be significant to white people but not to Aborigines. The Sydneysiders thought it was all about money.  So I flew to Ayer's rock, stopped one night, climbed it, and flew back to Sydney.  I was surprised by what the white Australians had done to the rock  --  used hole-cutting equipment to make post-holes in the rock and concreted in steel poles and ran a chain up to make it easier for everybody to climb.  They had also painted white lines on it to mark the route  --  and there was a rubbish bin at the top.

In 2014, my wife wanted to see Ayer's Rock and I thought perhaps I'd show her what the white Australians had done to it.  This is nothing to do with "conquering" Ayer's Rock by climbing it and more about looking at it closely and thinking.

Since I climbed it in '98 Ayer's Rock was handed back to the aborigines  --  who promptly leased it to the federal government for $75K per year  --  that's my tax money being spent there!  There are lots of signs saying "Please respect out culture, please don't climb the rock". Interestingly you can still climb it if you want to.  I suspect there was a dealbreaker clause in the lease to say it had to be climbable(?) because the business owners recognise a hard truth - it's nothing more than a rock, thousands of miles from anywhere and nobody will go if you can't climb it.  The new owners, however, are notorious for having zero business acumen.

It probably not politically-correct to talk about things as black and white these days, but I suspect white men built up a business between the 1950's and the 1980's based on climbing it, and the enterprise has shifted across to aboriginal owners who are well-intentioned, but nevertheless slowly running it down with the don't climb message. People go there thinking they can still climb if they want to.

It's $25 each to get into the park, but you don't get to find out if the climb is open or closed until you get to either the visitor's centre or the car park. Lots of people visited, but lots of people were disappointed too.  The climb was closed due to "high winds at the summit" when we went  --  for all 4 days in a row.  I have since learned that they also close it if there is a 20% or higher chance of rain, and for ceremonies.  I didn't see publications of dates of ceremonies.  A local painter told me that in her experience it is only available to climb one week a month (i.e. it is closed 75% of the time).  It was closed for all 4 days we were there due to wind. Note also that the _entire_ site is closed, not just the summit walk, so if you hop the fence to get a closer look at the rock where the carpark is, and you are seen doing it, you will likely be tapped for $5K even though it isn't windy in the car park.

Cycling around the rock I had to comment on one thing: obviously the black streaks on the surface are made by rainwater running straight downwards; how do they get from that to "x hit y with a club"?  Clearly the streak is due to water and in no way connected to an event (unless the event happened in the dreamtime and they believe the physical shape of the rock today is a direct consequence of the event...? bit of a stretch but I'm not an anthropologist.

So that was $4K on flights and accommodation and I'm never going back.  Ayers rock is not the sort of place you visit twice, is it?  If they covet their rock so much they can have it  --  and I hope it makes them very happy.

Before going, try to find if any ceremonies are on, if you can see if it's open on-line you may be able to find a good time of year to go.  Make sure you climb it.

Motorcycle Safety

We have a problem with car-centric thinking.  Perhaps it's really a problem with people NOT thinking.

The symptom of the problem is that motorcycles are more dangerous to ride than they need to be.  You read that right.  I'm saying motorcycles could be a lot safer than they are because a lot of "safety initiatives" are actually about car safety.

I'll give an example so you can see what I mean...

• Speed cameras face the front of the vehicle (but every ADR-compliant vehicle has a rear number plate).  The camera systems with forward only facing cameras were developed, installed, tested and commissioned by car drivers.  EITHER at no time did anybody think about motorcycles OR motorcycles were considered to be a small percentage of vehicles that were not worth bothering with when considering the number of extra requirements and tests in comparison to the extra number of tickets issued.  Whatever the reason, there aren't many mobile camera systems on the market that capture rear plates. I believe the vast majority of fixed cameras identify vehicles by their front plates and mobile safety cameras monitor traffic traveling in both directions. The "safety initiative" here is a call for front number plates on motorcycles, to enable them to be caught by speed cameras.  Front number plates were removed from motorcycles in 1972 due to road safety issues  –  they were found to act like a blade when a motorcycle hits a pedestrian.

BUT this is only one symptom of the problem (we are living in a car-centric world).  The interesting thing is that speed cameras are not the only piece of regulatory framework for motorcycles to have fallen through:

• Inductive-loop traffic detectors do not reliably detect motorcycles.  These generally occupy 50% of the width of the lane and are placed centrally in the lane.  Motorcycles are supposed to ride in either the left-hand or right-hand wheel track of the car in front, so we can pass outside the loop easily, depending on whether or not we want to trigger it.  Some road-going sports bikes are almost entirely alloy, carbon fibre, and plastic  —  they wouldn't trigger the inductive loop if they rolled right over the top.  Sometimes I am unable to trigger the automatic barrier going into a car park, or I may be able to run a red light without being photographed (I have never tried this, but I certainly move to the lane extremity on amber!).  This means red light cameras can be avoided by motorcycles too.  At least with speed cameras the Road Safety Camera operators can see the motorcycle with no rear plate; this situation is worse because the system is so dependent upon technology, which has a built-in faulty assumption that the vehicle in question is a car because it is likely you don't know how many motorcycles run red lights.   You may even believe it is not a problem!
• Crash barriers are not designed to be hit by motorcycles. AS/NZS 3845 dictates crash barriers will be tested with cars and trucks only, not motorcycles;  the vehicle category doesn't  even exist in the standard.  It is known that the reasoning above applied with crash barriers (motorcycles were a small percentage of road vehicles and not worth bothering with when the standards were first drawn up)  hence crash barriers are dangerous to motorcycles because they were never even designed to be hit by motorcycles. In 2012 the standards were revised. I personally called for motorcycles to be included at that time. AND...I am still waiting for the standards to be published so I can see whether I have had any effect.
• Car crash testing: generally speaking, there are eight different types of car crash test performed world-wide.  None of them involve collisions with motorcycles.  In Australia, ANCAP (Australian New Car Assessment Program) runs four different types of crash test: front impact, side impact, pedestrian and pole.
• Roadside furniture: specifically wooden posts (don't know if they have a proper name) that are always placed between the road and footpath on a corner at EXACTLY the point a motorcycle would leave the road.

 Of course the net effect of all of this is that motorcycles will be a less safe form of transport than they might be if they were considered when these systems were set up.

My point is, rather than calling for a ad-hoc fix to the specific problem of lack of frontal identification on motorcycles, you would get better results  —  and make the world a better place  —  by fixing the root cause: consider motorcycles when systems are designed in the first place.

 If you have any involvement with VicRoads, ANCAP, Parliament or the police in your area, please engage with all sectors of the PTW community when looking at road safety!