All Posts in Development

April 9, 2016 - No Comments!

Quick Job Board with React Native

Part three of my “quick job board” series, this time for React Native — and deployable on mobile devices. This follows on from “quick job board in 48 lines of code” with Meteor, and the “quick job board with meteor and React” version.

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...

November 29, 2015 - 2 comments

A quick job board with React, Meteor and Material UI

I recently wrote a mini-tutorial "How to write a job app in 48 lines of code" - and here it is again, but using React JS: Facebook's javascript love-child. This is slightly longer than 48 lines of code, but mainly because I also integrated a Material UI interface. I actually learned React to be able to use this UI library. React is not strictly necessary with the Meteor framework, as Meteor is reactive out-of-the-box - but I like Google's Material UI style, and it required React, so here we are.

Read more

August 5, 2015 - No Comments!

Today’s web tech roundup

Hello. Today I was chatting with a developer friend about - well, developer tech. Sometimes you just don't realise you've found dev link gold until someone else isn't aware of them. So I passed him some links, and I paste them here too - for all my developer friends out there.

Read more

February 25, 2015 - No Comments!

Monospace Gallery: Late night SaaS

monospace_gallery_670

Yesterday I finally released the beta of my first lean SaaS project: monospace.gallery. The basic idea pivoted as I developed it, and finalised into One Click Portfolios for Dribbblers.

The idea is that a creative on the Dribbble community can login directly through their Dribbble account and get a nice, responsive portfolio layout with their work in their own vanity url.

It's a very simple app. My main aim was basically to become "fluent" in building quick apps. The strategy, then, was broken down into selecting the best technology & methodology for expressing this "fluency": in short, I chose a Node based framework called Meteor for super slimline development, and some features of the "Lean" Movement for streamlining the actually process.

It turned out to be a natty combination, because Meteor allows you to very quickly develop "concepts" and roll them out, so it works well with the Lean method of MVP and iteration.

I'm as minimalist a developer as I am a designer, and I have to say I'm well pleased with the limited amount of lines of code that were needed to put this app together: I'm guessing less than 300 lines of code (excluding libraries and frameworks of course). Distilled still further with preprocessors: namely; Jade, Stylus and Coffeescript.

I wrote a short post on its development How I built my web app, because I am sure there are designers and developers out there who will find the info useful: I know I found many similar resources useful while I was building it.

and now, onwards!

January 28, 2015 - 3 comments

How to customise the Blog grid when using Semplice

I’ve switched to Semplice as my go to WordPress CRM platform. I won’t call it a “theme”, because it isn’t really. As they say, it’s a toolkit. They don’t design the site for you.

Semplice really is the "designers best kept secret", just as they sell it, because, you know, it basically just puts the good-old twitter bootstrap grid features into WP: And a designer needs nothing else. All he needs is a container and an image to fill it with.

Semplice is great for simple custom pages, and portfolios and the like - it uses industry standard tools - but it’s weak on the blog layout tools: If you want a better blog layout other than the default you will need to add your custom css, and do some tweaking on the actual grid, in the html editor.

The custom css is easy. There is a box for it. But what if you want to change the grid? Well, it's not so tough. Semplice uses bootstrap (v2) so all we need to do is go into the Appearance -> Editor and change the classes on the blog layouts we want.

For example: I didn't like the default 8 columns grid layout on the blog, so let’s change the default 8 column span blog layout for 6 columns: 8 is too long, 6 is Goldilocks.

Open the editor and the format-standard.php file, then look for the span8 offset2 class. Change it for span6 and offset3.

Of course, change it for whatever tickles your fancy.  Er.. that’s it. Have a nice day now.

UPDATE: I've updated to version 2.0 and they seem to have changed the blog formatting (and lost my changes). I looked under-the-hood and found they have moved the widths to some invisible option that is inaccessible. So, for now, I needed to actually hack the code until they make the option available: For you information I changed the format-standard.php file and commented out the line with the option altogether and manually added my span6 as above. Pretty crude, but their discussion forums are impenetrable. Hope they fix this. This is the line you need to comment out for now:

if(get_field('skinoptions_content_width', 'options'))

Update Two: Check the comments below, someone found out it has now been put into Advanced Styling option. So we are all happy.

January 10, 2015 - No Comments!

How to create a github repo from the command line

The awesome thing about the command line is the intimate relationship you build up with the internet (as opposed to the world wide web). Not to mention the time saving... Why open a browser, navigate to github, click here and there to create a repo, when it can be done in one line from the prompt?

 

Here's how:
curl -u "yourgithub@email.com" https://api.github.com/user/repos -d '{"name":"yourdesiredreponame"}'

What is going on here? We are basically injecting data directly into Githubs database, via their API.

We are using curl (a tool to transfer data from or to a server) to call the Github API which we pass our username -u "email" and we specify that we pushing data with the -d '{"name":"var"}' flag.

Inside the data object we push to Githubs database we can specify more items than just the name, such as if a repo is private or not.

FYI here is the github API documentation

UPDATE: It's also possible to simply use the awesomeness of Hub - a command-line interface for GIT

July 15, 2014 - No Comments!

How to use Vim Macros to customise your code nest

Arguably what makes Vim the greatest tool for web development is the breadth of its customisation:  It's like having an exo-suit for development - used correctly it does most of the heavy lifting.

Macros are the articulations that make code "lifting" a breeze.  If you don't know what Macros are, they allow you to "record" a series of actions and re-perform those with a keystroke. Imagine being able to "record" going to the gym - then, instead of going again the next day you simple hit a key and it is done - with all the benefits, and without a second wasted.  Isn't that power?

Read more

June 10, 2013 - No Comments!

JSON and Pandora’s Box

What do jQuery, JSON, Node.js, Backbone.js, oAuth and API development have in common?  They are currently sucking up all my learning time as I develop a very simple web app idea that I want to open up.  So much time I can't even continue the Greek theme I had in mind for this post beyond the title - I know there is something  in it...

April 18, 2013 - No Comments!

Using WordPress Jetpack Locally

This is just a quick snippet for developers who have had problems setting up Jetpack locally.

Jetpack was recently updated to include a developers mode, because previously it required a connection to a WordPress.com account.  All you need to do to activate Jetpack locally, without connecting to wordpress.com is the following:

  1. Open wp-config.php

  2. Add the following line - possibly best below the WP_DEBUG line.

define('JETPACK_DEV_DEBUG', true);

And save the file.  Don't forget to change that on the live version!