So for now this site is just a brochure.

Here's my current working definition:

Civic Tech provides technical and social support to civil society, government and business for civic action through digital platforms and human collaboration.

With some labelling, this becomes:

Civic Tech provides technical and social support for societal modernization.

Or just:

Civic Tech provides support for modernization.

The pivotal idea here is civic action. Unfortunately this concept doesn't seem to be clear. Meira Levinson, for example, has studied the question for years, and has apparently concluded that, at least in the education system, on the one hand, action civics teaches students the ways of democratic activity and participation to effect change; on the other, it will run into conflict with the program and objectives that democratic control of the schools has implemented in many places... some kind of dialectic. (As of 2013 she was apparently still struggling with this).

There are some descriptions of civic tech taken by observation. Wikipedia gives a definition of civic technology. Lawrence Grodeska describes Civic Tech as a big tent for Democracy. In another post he says In the end, I feel the biggest opportunity is not technology, but the process by which we make decisions together, without elaborating much. New York's Civic Hall wants to populate civic tech with civic community and civic government working together. Christopher Whitaker has a thoughtful piece that starts from a view of civic hacking by software developers. Bill Bushey focuses on tools to improve the public good. Emily Shaw focuses on improvements in government. Mark Headd has an interesting take on coproduction. These collectively touch on all the areas I see, but are a bit hesitant to encompass all that they touch.

For our own approximation, let's start with a definition of civic.

of or relating to a city or town or the people who live there

or

relating to citizenship or being a citizen.

Let's say civic action is action that benefits both of those. In practice I think it's fair to say that many or most of us that are active in civic tech would say civic action is activity that contributes to the public good. I would assert that this includes quality of life, and egalitarian values.

With this as a rough guide, the next hurdle is the constituency. Civil society and government are relatively easy to include, because their purpose by definition is to benefit cities and their 'citizens'. The inclusion of business is probably controversial. Small business and entrepreneurship is easier to include than large business, because it's a smaller, more personal scale. But large business may be difficult for some to include. After all, although industrial capitalism writ large has helped us exploit nature for our technological and economic benefit, is has failed to prevent obvious harms that are part of the Anthropocene. I would turn this problem on its head: we need to identify a governance and control structure for business that will bias business to contribute to the long term public good without the obvious harms that have been done in the past 200 years. In the meantime I would consider business inclusion in civic action as available but conditional. In fact I would argue that inclusiveness should positively extend to business, but with carefully considered constraints, pending resolution of the business governance question.

The focus on digital platforms and collaboration is easier to justify.

The digital platform turns out to be the most potent expression of the digital economy. As Marc Andreesson famously said, software is eating the world. Fintech, shopping, automated cars, artificial intelligence, and chatbots are just a few of the disruptors that are clearly transformative; the more so collectively. The force of the digital economy is no longer questioned, and is the basis of the enthusiasm for tech by civic tech.

What civic techies and others have found, that may not be quite as front of mind, is that collaboration could be an equal force to the digital economy for social change. In government for example, the old command and control hierarchy is widely regarded as obsolete. Technology now provides a much more efficient and effective means -- through information abundance, organization, and speed of information access -- of promoting transparency and avoiding corruption, the original motivators for bureaucracy. This supports a move toward something like a New Public Service which appears to be highly compatible with the values of the civic tech movement. Technology also supports collaboration as a means to provide design and control inputs that are far better at problem solving than older methods. Software development (agile), corporate practices including communications, project management, and dedicated collaboration software all support collaboration. Just as important, in my view, is that the collaborative model (through methods such as workshopping, brainstorming, and hackathons) has proven to be both more effective and more enjoyable than more traditional hierarchical methods of working.

This leads to a vision of society that relies primarily on both digital technology and collaboration everywhere all the time.

More difficult and somewhat insidious is the question of the control of the massive resources required to develop the software, and big data, needed to fully exploit these opportunities. This in my view is another reason to at least make the effort to include big business in our tent.

The final piece of my prototype definition of civic tech is the pairing of technical and social support within civic tech. Technical support can encompass design methodologies as well as technological support such as website development. Social support includes pro-active social inclusion and personal networking opportunities, as well as competence in formal skills such as user research to favour outcomes that benefit people first. There is a strong moral imperative for social support and inclusiveness.

Overall, there's a vision here, which encompasses digital technology and collaboration (and governance for the common good) as the core means to adapt to the transformative changes that the world in undergoing (I don't think I have to list those here). I would call this modernization.

And so I would argue that the mission of civic tech is to help modernize civil society, government, and business to help bring about the modern society.

Combine that with a module to tie asynchronous state updates (say from a database) with the store (Redux-thunk), and patterns for JWT authentication, and you've gone a long way toward a fullsome front-end stack.

Fortunately Material-ui is available as an implementation of Google's Material Design built with Reactjs. It's developed and maintained by a private company - Call-Em-All - as an open source project.

So far it looks pretty good to me, and is the most advanced project of its kind. It is a substantial implementation offering the main services required for a website, but is an ongoing work, meaning somewhat incomplete. It's also not a typescript project, though there is a typescript definition file available, separately maintained, and one of the developers says the group is talking about automatically generating a typescript definition file for the project, to minimize deficiencies and regressions.

There's one shim that has to be added per the installation instructions (for now -- the devs say this will disappear in future), which is to install and integrate react-tap-event-plugin. Integrating the module required creation of a typescript def file react-tap-event-plugin.d.ts with the following content:

// react-tap-event-plugin.d.ts
// from https://gitlab.com/Thecavepeanut/material-react-ts/blob/master/ws-global-typings/react-tap-event-plugin/react-tap-event-plugin.d.ts
declare module 'react-tap-event-plugin' {  
    var exports: () => any;
    export = exports;
}

Then the integration in the code involves

/// <reference path="../typings/react-tap-event-plugin.d.ts" />
import injectTapEventPlugin = require('react-tap-event-plugin');  
injectTapEventPlugin();  

To implement the AppBar example, I had to add definitions for

import NavigationClose = require('material-ui/lib/svg-icons/navigation/close');  
import MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert')  

to the material-ui.d.ts file, following the pattern in that def file established by the NavigationMenu definition. It turns out that most of the material-ui/lib/svg-icons/ icons don't have definitions.

Having discovered and implemented these fixes, however, I found that so far the library works well and looks good. What's encouraging here is that the dev team is using the project on their own corporate sight, and maintenance seems to be fairly active. There's also good uptake on the npm site (40k+ downloads in the last month).

I'm placing copies of the customized definitions files in a separate directory so that if they get clobbered with fresh tsd downloads they can be restored, or merged with the new. Not ideal, but will do for now.

• Strategy
• Step one: Typescript
• Implementation
• Directory structure
• Test code
• Issues
• Next steps

Strategy

When choosing a software stack, there are two main considerations. First of course, the stack has to support the purpose of the build. But as important for the developer, the stack should, if possible, anticipate the near future. The idea is to choose a stack which will remain somewhat relevant for a reasonable period. In the software business that's a couple of years; a year or two more if you're lucky. A little stability affords the opportunity to put more effort into actual development, investigating related technologies (such as planning or design), and maybe even some social time.

When a commitment is made, if the project is demanding, then technology can fly by in the meantime. So even if you get ahead once in a while, you end up slightly behind. Next time around, you try to leapfrog slightly ahead again.

So, I've recently selected a stack for a new project, which in my opinion fits that bill. It's a javascript stack, with the following key components:

• Typescript (language)
• React (presentation)
• Hapi (api)
• Mongodb, Mariadb, Neo4j (aggregate/relational/graph databases)

Thanks to Typescript, this positions the stack to take advantage of Angular 2 if that becomes as productive as it promises to be. And of course aggregate and graph databases are surging in uptake.

Pretty good. We'll see. Now for the work of building the dev environment, and digesting the learning curves.

Step one: Typescript

First, Typescript. This language comes with a great pedigree, having been developed by Anders Hejlsberg, the developer of Turbo Pascal, Delphi, and C#. It's a modern superset of Javascript, and as such can both co-exist with Javascript, and transcompile down to whatever current version is extant. This adds a pre-processing step to the development workflow.

What follows are some implementation notes for this part of the stack.

Implementation

The first decision was to choose between Webstorm (an IDE) and Sublime Text (a code editor). I selected the latter, because it is a simpler, more performant environment, while still being well supported and popular. It turns out that Sublime Text 3 (still in beta, and unlike version 2 requiring a $70US registration) was the best choice, as the the Typescript plugin for this version supports more features (such as on demand error listings).

I use VirtualBox/Vagrant rather than Homebrew for my local machine dev environment, because it isolates more dev components (in the virtual machines), and so keeps my base machine much cleaner. It's not as popular as Homebrew however (my impression), so there is marginally less support. Even so, I try to push as much as I can into the virtual servers. The salient fact about the virtual machines, is that they share space with the host machine -- local directories 'remotely' mounted by the virtual machines. This allows host access to project source files by productivity tools like code editors, while making the source available on the virtual machine for runtime.

In the case of the Typescript plugin for Sublime Text 3, nodejs/npm had to be installed on the host machine to support the Typescript transpile server. The rest of the supporting tools could be added through the server (with some resource files shared with the host through the server in the shared directories).

• nodejs https://nodejs.org/en/ (version 5) including npm
• install semver globally https://github.com/npm/node-semver
  sudo npm install -g semver (I found that this was required for some modules)
• install typescript node module globally, and the sublime text typescript plugin http://blogs.msdn.com/b/typescript/archive/2015/06/05/developing-in-typescript-on-a-mac-with-sublime.aspx
  sudo npm install -g typescript

This produces a build routine accessible in Sublime 3 ([Ctrl-B]), that requires some additional resources.

On the virtual server, install the typescript definitions manager:

npm install -g tsd

In the project front end directory install the react definitions that may be needed:

tsd init

tsd install react* --save

This creates a tsd.json file. See https://github.com/DefinitelyTyped/tsd

Add the same resources to the backend directory.

Also create a tsconfig.json file in a source code subdirectory (if placed in the project root conflicts arise, which I haven't fully investigated yet), with the following content:

{
    "compilerOptions": {
        "outDir":"../testapp",
        "module": "commonjs",
        "jsx": "react",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

The first three are required; the rest are conventions, some of which I haven't fully investigated yet.

The conventions are taken from https://github.com/markogresak/typescript-react-jsx-example, although the other named objects in the tsconfig.json example when tried caused build failure in Sublime Text (with no error message, just presentation of a parameter entry field).

Obviously react has to be installed (from the project directory of the server): https://facebook.github.io/react/docs/getting-started.html

npm install --save react react-dom browserify  

Now .ts (typescript) and .tsx (both typescript and jsx) files can be written and transpiled, with the output generated into a separate target build subdirectory of .js files.

There's a critical addition required in the nginx config file for this server to avoid a VirtualBox bug (\u0 characters added to the end of source code files copied to the browser):

sendfile off;  

Otherwise uncaught syntax error; unexpected token illegal error shows up in the browser.

Directory structure

The host directory www is mounted in the virtual server as \var\www\, and is shared between the local host and the virtual server.

├─ Vagrantfile
└─ www/
   ├─ dev.resources/ (backend)
   │  ├─ index.js
   │  ├─ node_modules/
   │  |  └─ ...
   │  ├─ package.json
   │  ├─ testbackend/
   │  |  └─ ...
   │  ├─ testserver.js
   │  ├─ ts/
   │  |  └─ ...
   │  ├─ tsd.json
   │  └─ typings/
   │     └─ ...
   └─ dev.budgetcommons.ca/ (frontend)
     ├─ gulpfile.js
     ├─ index.html
     ├─ node_modules/
     │  └─ ...
     ├─ package.json
     ├─ testapp/
     │  └─ ...
     ├─ ts/
     │  ├─ test.ts
     │  ├─ testtsx.tsx
     │  ├─ tsconfig.json
     │  └─ ...
     ├─ tsd.json
     └─ typings/
        └─ ...

dev.resources is the back end, accessed by a reverse proxy through hapijs.

dev.budgetcommon.ca is the front end, essentially the static assets.

ts holds the typescript source files and the tsconfig.json file.

testapp holds the output (.js files) of the build of the ts content.

typings holds the typescript type definitions. This is currently accessed as required through a /// <reference path="../typings/react/react.d.ts" /> statement at the head of the .tsx file. There are config alternatives to this statement developing, and I'm investigating.

Test code

Here's some random test code (loosely based on some test code from a Minko Gechev blog:

In ts/testtsx.tsx:

/// <reference path="../typings/react/react.d.ts" />
/// <reference path="../typings/react/react-dom.d.ts" />
import * as React from 'react';  
import * as ReactDom from 'react-dom';

class DemoProps {  
    public name: string;
    public age: number;
}

class Demo extends React.Component<DemoProps, any> {  
    private foo: number;
    constructor(props: DemoProps) {
        super(props);
        this.foo = 42;
    }
    render() {
        return <div>Hello world!! {this.props.name}</div>
    }
}

ReactDom.render(<Demo age={65} name="Henrik"/>, document.getElementById('container'));

Run the build routine from Sublime Text 3 (Ctrl-B).

In testapp/index.html:

<!DOCTYPE html>  
<html>  
    <head><title>TypeScript Greeter</title></head>
    <body>
        <div id="container"></div>
        <!-- // <script src="greeter.js"></script> -->
        <script src="bundle.js"></script>
    </body>
</html>

Then in testapp/ from the vm:

browserify testtsx.js -o bundle.js

Eventually building will happen automatically triggered by some watch code.

Load the page (localvmdomain/testapp), and you should see 'Hello world!! Henrik'.

Issues

• There is a conflict reported when tsconfig.json is placed in the front end root directory.
• Investigate CompilerOption details.
• Investigate source example tsconfig.json options, and why most fail when copied and pasted to test setup.
• Find alternative method of configuring reference path= for typescript type definitions required for source files.

Next steps

This typescript configuration is the first step of establishing a 'steel thread' (messages from the ui through the api to the databases and back) for this stack.

I'll blog about the other pieces as I work them out.

During the event, Howard Tam, one of the panelists, said one of his main recommendations to people involved in community initiatives is "do, learn, do", his version of "just do it".

One of the times the audience applauded spontaneously was when it learned that the Women's Committee took advantage of the City strike a few years ago to establish its bazaar, when there were no enforcement officers or permit officers to prevent it. (The other time spontaneous applause broke out was for the suggestion that some of the $1B police budget go to such things as place making instead, to make communities safer).

This raises the question of the place of government compliance initiatives in community micro-business and place-making initiatives. Most people understand that a degree of standards must be enforced (for example to support food safety), but many argue that the degree of compliance enforced is often excessive.

There are three examples I can think of supporting the notion that compliance is often excessive.

1. The success of Dufferin Grove Park (I have some personal history with that as webmaster for a number of years), can be largely attributed to the fact that during its heyday it was essentially operated as a worker collective. When the city imposed a 'compliance initiative' recently to counter this, programming degraded, and costs went up substantially.

2. One of the interesting things about the Uber ride-hailing service in Toronto is that it shows that the level of regulation imposed on the taxi industry over the past years really wasn't all that helpful. Uber now provides thousands of Toronto drivers the opportunity to establish their own micro-business, with a relatively low entry barrier. The ride-hailing business seems to be doing very well without a taxi-style regulatory regimen, thanks very much.

3. I need to research this, but I was recently told that in northern Europe there is a much smaller civil society sector than in North America for the simple reason that it's not needed as much (see here for an example). Instead government staff there are empowered to explore civic action initiatives that staff here are constrained from pursuing.

Now he's organized his chance to pursue that strategy. He's organized base funding from both government and private sources to fund research and deployment. Roughly speaking $20B from government for basic research, and a matching amount for related commercial investments.

Here are some links for details:

• Bill Gates launches multi-billion dollar clean energy fund (cnn)
• Bill Gates, Mark Zuckerberg, Jeff Bezos, and more are teaming up to invest in revolutionary renewable energy (business insider)
• Facebook: Breakthrough Energy Coalition (facebook)
• Breakthrough Energy Coalition to Invest in Zero-Carbon Energy Technologies (pr newswire)
• Gates, Zuckerberg and Bezos invest in huge clean energy fund (engadget)
• Major powers pledge $20bn for green energy research (the guardian)
• Mark Zuckerberg And Bill Gates Join Forces To Invest In Clean Energy Technology (tech crunch)
• Obama, Bill Gates to lead major effort to spur spending on climate research (washington post)

Source websites, put up by the initiative:

• Breakthrough Energy Coalition
• Mission Innovation

A somewhat critical review from Joe Romm:

• Can Bill Gates’ ‘Breakthrough Energy Coalition’ Become Truly Useful?

The Pullman, Chicago greenhouse farm

According to a Toronto Star article, there are more rooftop gardens in Toronto than almost anywhere else, thanks to a recent bylaw. The bylaw (for now) discourages rooftop agriculture, but that may change.

Ryerson University rooftop farming

An article in the Guardian gives the background for the book. The authors, Anne Biklé and David Montgomery, started out feeding their soil with organic matter, and learned that the benefit went to microbes in the soil, which in turn fed the plants.

Anne Biklé and David Montgomery

Analagously, feeding the 2kg or so of microbes in the gut has far-reaching benefits for our nutrition, and our bodies. See a review of Gut: The Inside Story of Our Body’s Most Under-rated Organ for details.

This is a new field in health that looks like it will have far-reaching consequences.

It'll be built on the site where there was a major industrial explosion earlier this year.

Bloomberg reports that there are many similar, though smaller, operations around the world.

His argument is that the common claim that clever organization of economic processes can lead to continued growth in production while eliminating environmental degradation, is based on false accounting.

There's nothing for it. We have to change our lifestyle to have a smaller environmental footprint. Governments and others promising no change in lifestyle are misleading us.

It's an approach that seems to be gaining some traction. The Guardian has a portal for it, the Ellen MacArthur foundation focuses on it, the World Economic Forum has a project about it, and there's a dedicated website for it.

The idea makes sense for a stressed world.

From circle-economy, six principles:

Automation of internet banking is one force behind this. Another is modern digital banks that have no brick branches at all.

In fact so called "FinTech" (financial technology) businesses are growing quickly.

Here's a chart from business insider:

So far American companies are dominating.

Now there's talk of the last line of defence falling, even as resistance continues to spread. A detailed explanation can be found here, written by Maryn McKenna, a science writer for National Geographic. A drug called colistin is being overcome by a resistance driven by a genetic change in bacteria that is also easily passed among bacteria, and appears to be spreading rapidly from China.

Where is this leading? According to Medical Daily 10M people a year could die of bacterial infections by 2050, up from thousands today. A bad trend.

Hopefully science will find alternatives, before our 70 year honeymoon with antibiotics is over. Before that time, people would routinely die from infections.

Here's the video:

Click here for an article about it in the Guardian.

This race to re-use rockets is fundamentally important as it would substantially lower costs of space flight, and potentially open up opportunities. The Economist has an article on the subject here. A video about SpaceX plans is here.

According to Techcrunch, Musk points out that getting to space only requires Mach 3 speeds while traveling to GTO requires Mach 30,
so the rockets are quite different.

One wonders how Richard Branson with his Virgin Galactic feels about all this.