The WeWork co-working space has been carefully designed to host a whole array of startups of all sizes. They operate the whole building of 5 floors (I'm talking about their Civic Center office). The operation is carefully managed as a community and supported by full-time staff members and ancillery community services through its App.

The first thing any visitor notices is the very cool interior design: green plants, cool chairs, sofas, (massage machine),  inspiring posters on retro wall-paper.. etc. Just, very cool.

( I took this photo from their website, because my own iPhone photos came out a little grainy. But I can confirm this is as cool as it looks) This decor does inspire that feeling of "this is really cool". And it really does inspire.

After picking up on the details (like the free draft beer) it soon becomes clear why these spaces really work: it's thriving with activity, as if you were working in one enormous and successful design company. This feeling of contributing to something larger, and something awesome, really permeates the place. It really does inspire you to "do your best work" (as they proffer) because it feels like you've already "made it", and therefore inspires you with confidence to "make things happen". Inviting clients to your WeWork space is certain to inspire confidence in them, so you won't hesitate to do so.

This feeling of - as if you were all working for the same organisation - inspires you to also speak freely with other people - who actually operate their own startups, from one-man bands, through small teams to entire operations (500px is on the second floor).

Free conversation, synergy between startups of all sizes and sectors, this is an environment designed & operated to "make things happen". The environment is engineered to generate serendipity and synergy between its members. Add to that a thriving community app that facilitates conversation and cooperation. There is no doubt left in your mind that within this environment great things are going to happen, it's almost too easy.

The details

Let's look at some of the details that make this happen.

The Water Cooler

Shared kitchen areas, free tea and coffee facilitate "water-cooler" conversations where networking comes for free. Yes, that is free draft beer on tap you see in front of the Never Settle msg.

Meeting Rooms

Meeting rooms are clearly a must.  How cool are these rooms? Everything is setup, plug n play, and woo clients and colleagues.

Call Booths

This is a nice idea, tiny call booths with "on air" indicators for those long-distance calls.

Lounges

Aside from enormous lobby and floor entry lounges, there are also small rooms designed for comfortable, informal meetings.

Printing and Stuff

No need to buy your own equipment, WeWork has your back.

Communal Spaces

Besides the lobby each floor has a communal space by the "kitchen". Sick of the office? Pull up a rocking chair, or lounge the sofa and work on your laptop. Cool.

Community 

The community is also managed by dedicated staff. Mondays there are often new-member meets, or free snacks to share.

There is an Honesty Market: snacks and drinks openly available to grab. Just add your credit card to the app, take what you want and scan it to get billed.

Plugins

A technical word for essentially real-world 3rd plugins: working late and feeling hungry? Grubhub will deliver in 30 mins. Order your home shopping from Instacart while you work and it will be there when you get your Uber back home. It's all good.

That's about it for now, I won't go into the boring details. Here's to hoping that Barcelona and other centres take shape and create inspiring hubs of innovation like WeWork here in San Francisco.

If you are working in SF, especially at WeWork Civic Center and read this? Ping me and we'll grab a coffee @derrybirkett

Now to make awesome!

Setup

We're going to use Github's awesome Hubot for our bot kit and we will plug it into Slack, because we are always on Slack, amirite?

Pre-requisites for this episode? Node, npm, git, yeoman, Hubot, Slack and a Bot token, and Heroku to deploy. Also some knowledge of Coffeescript, and the command line (terminal) will help.

Step 1: Git yo-self (lol) Hubot, and Install as per instructions (maybe you want to use the name "jobbot" for now, to make things simpler)

Step 2: Read about and get a bot token from Slack and take note of it.

Step 3: Open a Heroku account - Trust me, unless you are Mr Devops this will save a lot of pain.

Program the bot!

Yes, the beautiful thing about using Hubot is we simply roll up our sleeves and start programming AI into our bot.  In the scripts folder, create a new coffeescript file called jobbot.coffee

scripts/jobbot.coffee

module.exports = (jobbot) ->

Jobbot is born, with the capacity to do absolutely zero.

jobbot.respond /wakeup!/i, (res) ->
  res.send "Yes?"

Jobbot will answer "Yes?", when you tell him (literally) to "wakeup!" - eg. @jobbot wakeup!.  The .respond command will be invoked when the bot is actively referenced, eg. with the @symbol.

#OVERHEAR
jobbot.hear /work/i, (res) ->
  res.send "Did someone mention work? Ask me if there are 'any jobs today?
  ' and I'll take a look for you"

.hear allows our bot to listen in on the room's conversation, and certain words trigger its attention, possibly it will respond (but not necessarily...). In this example, if Job bot hears the word "work" in any conversation it will incite you to invoke its favourite (and only) task, that of looking for a job for you. It's pretty keen.

# FETCH JOBS
jobbot.respond /any jobs today?/i, (res) ->
  res.send "Checking..."

  # GO GO GADGET JOBS!
  jobapi = "https://jobs.github.com/positions.json"

  jobbot.http(jobapi)
   .header('Accept','application/json')
   .get() (err,response,body) ->
   if err
    res.send "Encountered an error :( #{err}"
    return

   #PICK ONE
   data = JSON.parse body

   suggest = data[Math.floor(Math.random() * data.length)]
   res.send "How about #{suggest.title} at #{suggest.company} in #{suggest.location}? #{suggest.url}"

So, Job bot's main task is to go and look for a nice Job opportunity for you. In our example he will check Github for developer jobs and offer you one of them at random.

So what is happening up there? Firstly, when Job bot is specifically asked "any jobs today?" it will politely inform you it is "Checking...". Because there may be a delay connecting, you may have to wait...

While you are waiting, Job bot checks its limited dictionary of job boards (Github jobs), and asks it kindly for the current list of jobs, no ifs or buts: Kindly, because we politely inform Github that we are expecting a JSON response (which is not necessary), and we also reply with a totally uninformative error message if something goes wrong somewhere. Clearly this will be handled better in a professional environment, right?, right?

When Job bot receives the list, he will pick one at random, and suggest it to you. Isn't that nice?

NB: Coffeescript is very pedantic about indenting. Triple check your indenting is correct. If you get any "res is not defined" errors or similar, it's probably this.

Let Hubot know about your script

Finally, we must tell the Hubot framework to include our new script when it runs by including it in the hubot-scripts.json file, like so:

['jobbot']

Clearly, you can add as many scripts you like.

And that's it. Job bot is simple, and effective in his small way.

Connect Slack

The awesome thing about Hubot is that it is client agnostic: We use a plugin to enable it to "talk" with our client - which is called an adapter. We will be using the Slack adapter. Install it via npm like this:

npm install hubot-slack --save

Testing the bot

You can run Job bot in the command line as explained in the Hubot docs (link above). But it is more satisfying to see it respond in Slack. We can do this without deploying by fetching the Slack token you requested above (right?) and then passing it to local Hubot and adding the Slack adapter, like this:

HUBOT_SLACK_TOKEN=xoxb-34005417601-pQWVEfulJVw7qLxlx7YCBnSh ./bin/hubot --adapter slack

You should see your bot active in Slack. Wake him up, mention work and then ask for some jobs.

Deploying the bot

The github adapter repo has a good guide for deploying Hubot to Slack here, as well as other adapters. It goes something like this:

You'll need the bot token you requested as above, and your Heroku account. I recommend installing Heroku toolbelt, as we will use it here and it's pretty awesome actually. So, from the command line (with toolbelt installed and logged in):

heroku create myjobbot

Heroku will need your Slack token in order to connect the dots. So fetch your token and set it like this:

heroku config:set HUBOT_SLACK_TOKEN=xoxb-1234567890-XXXXXXXXXXXXXXXXXXX

This creates a (free) app instance on Heroku stack. It needs our git repo. If you haven't already, create a git repo, add everything and commit!

git init
git add .
git commit -m "Go go gadget jobs!"

("Go go gadget jobs" is not a good commit message btw)

Now we push that repo to Heroku which will take care of all the devops muckiness that we designers simply can't handle, thusly:

git push heroku master

Heroku will do its thing on the command line, which is itself a bot in some ways, I guess.

The free Heroku dyno sleeps pretty quickly, you may want to use this Heroku keep alive option to keep it burning longer.

And, in theory, you're good to go! You know that things can wrong at every turn, so ping me @derrybirkett if you really need to. Otherwise, follow the links and make sure no steps have been missed (and the coffeescript indenting is kosher).

PS: Here is my Jobbot repo if you want to check it out.

The beautiful thing about React is the syntax and structure is very similar, regardless of platform — so the React Native for devices code is very similar to any web based version.

For this app we have 2 files: Index and Results. The app is only a single feed on one page, but I have broken the App into two components to keep the “pages” in separate files (as well as being better practice).

So, after installing React Native on your Mac and creating a blank app, Let’s create the index file:

index.ios.js

‘use strict’;
import React, {
 AppRegistry,
 Component,
 StyleSheet
} from ‘react-native’;

First we import the modules of React Native that we are going to use (above). Then we will "import" our Results page (below). The Results page we will create later.

var Results = require('./Results');

The index page is used simply as a navigation stack container. Our app only has one page, so this is fairly simple. We use React and NavigatorIOS as our "router": we give the page a title and set the contents (component) as our Results page (the one we imported above).

class jblyrn extends Component {
 render() {
  return (
   <React.NavigatorIOS
     style={styles.container}
     initialRoute={{
      title: 'Github',
      component: Results,
     }}/>
  );
 }
}

Now two small things are left on our Index page. We add a small amount of style to the page, to use Flexbox mainly, and we register our React app to the App Registry so that  xCode can compile it.

var styles = React.StyleSheet.create({
 container: {
 flex: 1
 }
});

AppRegistry.registerComponent('jblyrn', () => jblyrn);

Easy, no? Now let's build our job results page. Create a file called Results.js.  This is little more complex.

Results.js

First, we need access to the React components that we need, the same as we called above except we need a few extra modules this time:

'use strict';
import React, {
 AppRegistry,
 Component,
 StyleSheet,
 Text,
 View,
 ListView,
 TouchableHighlight,
 LinkingIOS
} from 'react-native';

We will use the Github jobs board again as our supplier. For now we will just set the URL to be fetched by our code later.

var REQUEST_URL = "https://jobs.github.com/positions.json";

Now we start to write our component. First the class and constructor:

class Results extends Component {
 constructor(props) {
  super(props);
  this.state = {
   dataSource: new ListView.DataSource({
   rowHasChanged: (row1, row2) => row1 !== row2
   }),
  loaded: false,
 };
}

With the contructor we are setting the initial state of the component, i.e. that the data hasn't yet loaded, for example. And we also set the datasource and type, which we will fill with data later.

Now we fetch our data. This could be written in one module, but I like to keep things separate.

componentDidMount() {
 this.fetchData();
 }

fetchData() {
 fetch(REQUEST_URL)
  .then((response) => response.json())
  .then((responseData) => {
  console.log(responseData)
  this.setState({
   dataSource: this.state.dataSource.cloneWithRows(responseData),
   loaded: true,
  });
 })
 .done();
}

The first method calls fetchData when the component has mounted, this is important. The fetchData() method then will use fetch API (More info here about this). All it does is call the Github API url we set above, parses the JSON response and places it in the dataSource variables we set in the Constructor, which will automagically create our Listview of jobs using the iOS Listview component. Magic! We also set the loaded state to true, because now we do have our data.

So, in order to let users know we are actually loading data, and the app hasn't crashed, we use a small method which shows a loading icon while the data is being fetched, and is triggered by our constructor "loaded" variable. For now just define these "renderings", which are called in turn in the main React.render method at the end.

renderLoadingView() {
 return (
  <View style={styles.container}>
   <Text>
    Loading Jobs...
   </Text>
  </View>
 );
}

Now we must also prepare the View template for each Job listing that is returned from Github, and will be placed in our Listview:

renderJobs(job) {
 return (
  <TouchableHighlight onPress={() => { LinkingIOS.openURL(job.url); }}>
   <View style={styles.container}>
    <Text style={styles.title}>
     {job.title}
    </Text>
    <Text style={styles.location}>
     {job.company} - {job.location}
    </Text>
   </View>
  </TouchableHighlight>
 );
}

This method makes use of various React components that will translate into Native ones. You can look up these React components with the Native link I pasted earlier, but briefly: Touchable highlight is a link, the web equivalent of the <a> tag; the View tag is the equivalent of the web <div> (a container) and Text might roughly translate to <span>, I guess - We can't say the coding world doesn't keep us on our toes!

The elements in curly braces are references to our styles component that applies the "css" to the view: eg. styles.container will refer to the styles object we define at the end. React uses objects to hold styling data. And the second type of data in our curly braces are the job list results: eg. job.title. Job is the object Github return to us. You can see what Github returns to us from their page here

Now we can pull the awaiting render methods together in the main method: When the data has loaded we call the ListView component (otherwise we show the "loading" component) and we pass to it the datasource, the Jobs View object we created and the stylings as "props", thusly:

render() 
 if(!this.state.loaded) {
  return this.renderLoadingView();
 }
 return (
  <ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderJobs}
   style={styles.listView}
  />
 );
}

After that all that is left is to apply the styles, and export the Results component so that the Index page can reference it.

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 paddingBottom: 30,
 paddingTop: 30,
 borderBottomWidth: 1,
 borderBottomColor: '#eee',
 borderStyle: 'solid'
 },
 title: {
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 },
 location: {
 textAlign: 'center',
 color: '#999'
 },
 listView: {
 paddingTop: 20,
 backgroundColor: '#F5FCFF',
 },
});

module.exports = Results;

You will need to compile this in xCode and run. You can even run it on your own device if you have an Apple developer account and watch the magic.

As before if you really have any problems, you can ping me - or - you can pull my repo. Sharing code is caring, er.. code.

Onwards, to React Desktop...

A good experience designer wants to seek out deep motivations: Motivations that oftentimes the users themselves do not acknowledge. This is where experience design, for me, encroaches the territory of psychology.

My ultimate goal as an experience designer is to design experiences that enable the user to grow, to realise themselves: This requires that I know what the user desires, what their dreams are — what they want to become.

As psychologists know, desires are often buried in the subconscious, actively blocked by the conscious mind. So how can an experience designer uncover people’s deepest desires and make them a reality? Will experience designers need a degree in psychology?

Steve Jobs famously stated: “People don’t know what they want until you show it to them”.

Do good filmmakers “get out of the building” and ask their audience what they want to watch? Sure, there are industries that create products according to market research. But are these the really great products? Are films designed by committee the really great movies of all time?

I’ll research this and make another post.

originally posted on my Medium account

And I quote:

Tabs for a Cause

This plugin changes your New Tab Page. Money is being raised by some ads in the corner. Which, honestly, never bothered me at all. You can customize also the page with notes and bookmarks etc.

In 1 month I raised enough to provide 1 person with clean water for 1 year. Collectively, all tabbers raised over $200k already!

Goodblock

An adblocker with a purpose by the people who also created Tabs for a Cause. Basically, like any other adblocker, but 1-2 times a day a butterfly appears in the bottom left corner. When you click on in, you see a well-made ad. Each time you click you raise money.

STAND

This adblock also lets you raise money for a cause you choose. However, some ads will still be displayed, if the web owner agrees to give a part of the winnings to charity. This way, the web owner can still make money, too.

Ecosia Search Engine

Basically most of the money they make through ads, will be used to plant new trees. It works like google, it feels like google as well. So it didn’t really hurt me to switch. Plus, having a tree planted every 2-3 searches feels good as well.

In a week I made 100 trees (implying the counting algorithm is correct). But they planted 3,430,817 Trees already

Amazon Smile

If you shop at amazon, you can also have part of your spendings donated to a charity you choose. It has everything the normal amazon offers. So why not shop at amazon smile then?

Share the love.

So chuffed to have our KickstartPRO theme published to Studiopress Marketplace. The quality of themes here is so high I'm pretty blown away to be included. All credit (except design I guess) goes to co-founder Nick Davis for his awesome coding and his general positive kickass-ness.

Take a look at KickstartPRO on Studiopress

Hello friends,

I have a couple of invites to give away.
So that I can check your work please:

Paste your shot to my twitter, then follow me on Dribbble and like the invite post. So I can track you, see?

Feel free to follow me on twitter and Dribbble if you like.

Have fun.
Derry

I work in tech, and as such I am privy to common knowledge (in the tech world) that many people are not aware of. Do you know I could reach out (into the internet) and pull together a very decent profile of everyone who is/has been in my vicinity with relative ease? People who “check-in”, or post messages using Geo-location on their phone, for example, are fair game online. A cross reference here and there and I have a decent file on you. Especially if you have a unique identifier (like a telephone number).

Snooping is of very little interest to me. But I do like the idea of being able to use code to gather information and empower me to make decisions. Small scripts (of code) — which can even be considered simple robots — are not difficult to create and can run a whole slew of boring tasks for you: searching for an apartment, ordering regular deliveries and so on. And once the Fridge starts to join the conversation, being able to “boss” my appliances around makes code even more appealing. (Right now, my Fridge is deaf and mute, but soon, oh so soon…)

I decided that code is important and learned to code. Except, like any language, it’s difficult to become “fluent”. It requires constant practice. So, I continue to study, and write minimal scripts, and sharpen my fluency, as I wait for the day when I find writing code as easy as writing these sentences, and I watch the world turn around me, and I say “wow, did I really make that happen?”.

First published on my Medium account.

Getting Started

Ok, so as before let's just add our packages to a new Meteor project:

meteor create projectname

meteor add react coffeescript http cosmos:browserify mquandalle:jade meteorhacks:npm

Clearly we need the react package, and we also need the browserify and npm packages for the Material UI library. To pull from Github API we need the http package, and I also added coffeescript and jade - because I prefer them to writing html and javascript.

Main Template

Our main page index.jade is fairly empty - we simply need to add the div which react hooks into - thusly:

head
 title ReactJobs
body
 #App

React will render the html to the #App div.

Startup.jsx

Now let's create our startup javascript file.

Jobs = new Mongo.Collection("jobs");

if (Meteor.isClient) {
 Meteor.startup(function () {
 // injectTapEventPlugin();
 React.render(<App />, document.getElementById("App"));
 });
}

I created a collection to hold the jobs data, and in Clientside Startup we add base React.render method and React will render the html into the #App div we placed.

App.jsx

Now onto our app component. This is the largest file in the whole App, weighing in at 63 lines. I place all components seperately in a components folder inside the client folder: client/components. This is quite verbose, so maybe grab a coffee.

const {
 Paper,
 List,
 ListItem,
 ListDivider,
 Avatar,
 RaisedButton,
 AppBar,
 FlatButton,
 IconButton,
 NavigationClose
} = mui;

These are required to use the Material UI library. They refer to the components we will be using.

const ThemeManager = new mui.Styles.ThemeManager();

And here we attach the mui styles to Thememanager. So far, so good.

App = React.createClass({
 mixins: [ReactMeteorData],

Our app is a React class, and we attach our own methods to it. To use React with MeteorData we need to use their Mixin - which is apparently a temporary thing.

childContextTypes: {
 muiTheme: React.PropTypes.object
},

getChildContext: function() {
 return {
  muiTheme: ThemeManager.getCurrentTheme()
 };
},

These two methods are required to use MUI. I'm not going to go into details about the MUI library, if you want more info about it, you can check out the link at the top of this post.

getMeteorData() {
 return {
  jobs: Jobs.find({}).fetch()
 }
},

Here is our method to fetch the Jobs data we will pull from Github jobs API.

componentDidMount() {
  {this.loadJobs()}
},

loadJobs() {
  loadJobs = Meteor.call("loadGithubJobs");
},

When the component loads for the first time we will fetch the jobs list from Github: this could be written in one method, but I like to keep things seperate, so the second method calls the server-side meteor method that pulls from Github API.

renderJobs() {
 return this.data.jobs.map((job) => {
  return <Job key={job._id} job={job} />;
 });
},

Using the new Ecmascript, or latest Javascript, functions we can quickly map the data to each instance of our Job component (which we will create shortly) and return a list of react/html components.

render() {
 return (
  <div className="wrapper">
  <AppBar title="Github Jobs" />
<div className="container">
  <List subheader="Latest Github Jobs">
   {this.renderJobs()}
  </List>
  </div>
 </div>
 );
 }
});

Finally, we render the main App component. In the midst of this you will notice this.renderJobs() which will return the Material List components with our data filled in each one.

Job Component

Now we need the React Job Component we call in the above script:

const {
FontIcons,
IconButton,
Icons,
List,
ListItem,
ListDivider,
Avatar
} = mui;

I've been a bit lazy and haven't deleted the Material components I have not used. I left them there in case I was to expand this app. But you only need to include the components you want to use.

// Task component - represents a single todo item
Job = React.createClass({
render() {
 return (
  <ListItem
  primaryText={ this.props.job.title }
  leftAvatar={ <Avatar src={ this.props.job.company_logo }/> }
  secondaryText={ this.props.job.location }
  href={this.props.job.company_url}
  rightIcon={ <IconButton iconClassName="muidocs-icon-custom-github"   tooltip="GitHub" /> }
  />
);
}
});

This React class will render our List Item component and fill it with the data from our collection and is available in "props".

Pull in the Github data from the API

On the server, we need the method(s) which will pull the Github jobs data via http calls. I write this in Coffeescript.

Meteor.methods
 loadGithubJobs: ->
 @unblock()
 Meteor.http.call "GET", "https://jobs.github.com/positions.json", (error,result) ->
 if(error)
 console.log error
 if(result)
 Meteor.call "writeJobs", (result.data)

writeJobs: (jobs) ->
 Jobs.remove({})
 Jobs.insert job for job in jobs

Here we have two methods: the first one "gets" the jobs list from the API, and, if successful, calls the second method (writeJobs) to push them into our collection. I actually remove the previous Jobs loaded there as a temporary fix for this demo, so we also have the called data and no "old stuff".

I'm not going into the above methods, they are explained in the previous job app post I referenced at the top of this post which you can look into.

Some other bits required for Material UI

If you want to use MUI you will also have to add a couple of package files. You will need to add the following (for example) to your root package.json file:

{
"material-ui": "0.10.1",
"externalify": "0.1.0"
}

And in your client/lib folder you will need a couple of files for browserify. Your json options in the file app.browserify.options

{
"transforms": {
"externalify": {
"global": true,
"external": {
"react": "React.require"
}}}}

And app.browserify.js

mui = require('material-ui');
injectTapEventPlugin = require('react-tap-event-plugin');

More info about this at React and Meteor.

Ok and that's it. I'll admit, this is early stuff - syntax changes, and the React in Meteor mixin, along with the browserify hacks are patches (in my opinion). But, it's how it works right now. So, anyway, you should have a nice responsive, pretty web app like this running in localhost:

And here is a live version

If you have any errors - well, I'm not surprised - this stuff is all pretty new and rough. But if it helps you can clone my repo. A word of warning though: React is still very much in its infancy, and I've already found some compiling errors once packages were updated - you know how touchy these dependencies can be...

You can ping me on twitter @derrybirkett if you really want to.

For now, onward!