Powerapps string examples
Powerapps Examples

Powerapps String Examples, including replace and concatenate

Apps, React JS

Using Bootstrap with React forms

Bootstrap is a front end open-source toolkit which makes it really easy to build responsive UIs quickly. With comprehensive documentation and a library of examples it’s a wise choice if you want to build a React app with a tidy front end quickly. In this post I’ll show you how to use Bootstrap in a React app, and specifically how to build and style a form.

You will already need to have Node and npm installed on your machine (if you need help doing that read this blog post). To build an app that has a working form in it using React and Bootstrap, follow these steps.

Create a React app

Navigate to where you want your code to be located in your folder structure using your preferred command line tool, and create your React app in the normal way (I’m presuming that you already have a basic understanding of creating and editing a React app).

npx create-react-app react-bootstrap-forms

Install the React Bootstrap package in your React app

The best way to use Bootstrap in a React app is to use the npm package React Bootstrap. On the command line type:

npm install react-bootstrap bootstrap

Then type npm start and make sure the app runs ok in the browser – you should see the default React app template screen.

Start editing the React code

Now open App.js and replace the contents of the whole file with this code:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import Button from "react-bootstrap/Button";

import "./App.css";

function App() {
  const [message, setMessage] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <p>
          React Bootstrap <code>Form Examples</code>.
        </p>
      </header>
      <p>We will build a form here....</p>
      <Button onClick={() => setMessage("You clicked the button")}>
        Click Me
      </Button>
      <p>{message}</p>
    </div>
  );
}

export default App;

And open App.css, find .App-header and change the min-height value from 100vh to 20vh.

And now on your command line, run your app:

npm start

… and you should see this:

using react bootstrap with React for forms
Try clicking the button

… after you click the button you’ll see a message appear. So this is using a Bootstrap button, along with some of the basic styles that are set up with the React app. You can do away with those (App.css) altogether if you want, or use them side by side.

Add more Bootstrap components to the form

Adding a few more Bootstrap elements into the mix (Container and Jumbotron) and you can see we start to build up a nicely styled form, with a couple of Text Inputs and some layout detail using Rows and Columns. You can find all the information you need about them here.

Now replace the contents of App.js with this code:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Jumbotron from "react-bootstrap/Jumbotron";
import Form from "react-bootstrap/Form";
import Alert from "react-bootstrap/Alert";

import "./App.css";

function App() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          React Bootstrap <code>Form Example</code>.
        </p>
      </header>
      <Container className="p-3">
        <Container>
          <Row>
            <Col>
              <Alert show={showMessage} variant="success">
                <Alert.Heading>Success</Alert.Heading>
                <p>
                  This is an alert, and these can be shown in a variety of
                  styles provided by Bootstrap. Our form submit button simply
                  shows this alert. Another post will go through form validation
                  and errors.
                </p>
                <hr />
                <div className="d-flex justify-content-end">
                  <Button
                    onClick={() => setShowMessage(false)}
                    variant="outline-success"
                  >
                    Close this alert
                  </Button>
                </div>
              </Alert>
            </Col>
          </Row>
          <Row>
            <Col>
              <Jumbotron>
                <h1 className="header">Our form</h1>
                <p>
                  We will build a form here. You may want to use this are as
                  login instructions, or some kind of product intro.
                </p>
                <p>
                  This is a h1 tag and paragraph in a Jumbotron, which is the
                  first column in a row of two columns.
                </p>
                <p>
                  Here is a selection of buttons showing some of the different
                  styles available from Bootstrap. You can&nbsp;
                  <a href="https://react-bootstrap.github.io/components/buttons/">
                    read more here
                  </a>
                  .
                </p>
                <hr />
                <Button variant="outline-primary">Primary</Button>{" "}
                <Button variant="outline-secondary">Secondary</Button>{" "}
                <Button variant="outline-success">Success</Button>{" "}
                <Button variant="danger">Danger</Button>{" "}
                <Button variant="info">Info</Button>{" "}
              </Jumbotron>
            </Col>
            <Col>
              <Form>
                <Form.Row>
                  <Form.Group as={Col} controlId="formGridEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                  </Form.Group>
                </Form.Row>
                <Form.Group controlId="formGridAddress1">
                  <Form.Label>Address</Form.Label>
                  <Form.Control placeholder="Street Name" />
                </Form.Group>
                <Form.Group controlId="formGridAddress2">
                  <Form.Label>Address 2</Form.Label>
                  <Form.Control placeholder="Apartment, studio, or floor" />
                </Form.Group>
                <Form.Row>
                  <Form.Group as={Col} controlId="formGridCity">
                    <Form.Label>City</Form.Label>
                    <Form.Control />
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridState">
                    <Form.Label>State</Form.Label>
                    <Form.Control as="select" defaultValue="Choose...">
                      <option>Choose...</option>
                      <option>...</option>
                    </Form.Control>
                  </Form.Group>

                  <Form.Group as={Col} controlId="formGridZip">
                    <Form.Label>Zip</Form.Label>
                    <Form.Control />
                  </Form.Group>
                </Form.Row>
                <Form.Group id="formGridCheckbox">
                  <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button
                  variant="primary"
                  size="lg"
                  onClick={() => setShowMessage(true)}
                >
                  Submit
                </Button>
              </Form>
            </Col>
          </Row>
        </Container>
      </Container>
    </div>
  );
}

export default App;

…. and when you save your file you should see this in your browser:

a react bootstrap form example

So you have built a form using React Bootstrap, including different styles of buttons, a text input, a dropdown menu, and an alert message that you can dismiss. I’ll cover how to handle the form submission and form errors in my next post.

get started with flutter on Windows PC
Apps, Flutter

Getting started with the Flutter app example on Windows

I started developing mobile apps with Xamarin, and since then have also built mobile apps using React Native and Expo. I’ve been hearing more and more about Flutter and recently had a use case while building an app that couldn’t be done in Expo without ejecting to bare React Native, and also couldn’t easily be achieved in Xamarin. With that in mind I decided to get started with Flutter, and got stuck into building the Flutter app example provided on the main Flutter website. I develop primarily on a PC so this post is focused on installing and using Flutter on a Windows PC. Up until now I really only use my Mac when needing to test an app on an iOS simulator.

My first impression is that the documentation for Flutter is excellent, certainly as far as Flutter install and setup goes, I started here – https://flutter.dev/docs/get-started/install/windows and that covered everything to get me started quickly. I’m using Visual Studio Code as I’m already used to it, but you can also use Android Studio or EMACS, just bear in mind that whichever one you use you will always have to have Android Studio installed as it’s that that provides the Android platform dependencies.

I followed the instructions to install Flutter, the only glitch I experienced was that I had to accept a load of Android agreements to complete the installation, but that process was handled seamlessly in the terminal window.

However I also installed Flutter on another Windows PC and had a few more issues. This PC had an old install of Android Studio so I was starting from a different set up. Flutter Doctor kept telling me that Android Studio wasn’t installed even though it was. To fix this problem I ran these two commands in Git bash, the first one set the android studio path to nothing, the second one set it to the correct path::

$ flutter config --android-studio-dir=""
$ flutter config --android-studio-dir="your-path-to-android-studio"

That resolved that issue but then after running Flutter Doctor it looked like everything was ok as it asked me to run another command to view Android licenses. However when I ran that command I got this error:

“could not find or load main class flutter doctor”

I did some Googling and discovered a few people saying that a space in the path could be the problem, so deleted my Android SDK install, and reinstalled it from the SDK Manager in Android Studio to a path with no spaces. Then ran this command:

$ flutter config --android-sdk "your-new-path-to-android-sdk"

Overall my experience of installing Flutter and setting it up was very positive. A very smooth process and a tool (Flutter Doctor) which is on hand from the command line to check your install and help you correct any issues, and there’s an example Flutter app which you can create and run from the command line getting you up and running with a simple app in less than an hour.

My Android emulators had been set up on my PC a while back though and it seems like something needed to be updated as every time I tried to start one I saw this message:

The ADB binary found at C:\Users\echristy\AppData\Local\Android\sdk\platform-tools\adb.exe is obsolete and has serious performance problems with the Android Emulator. Please update to a newer version to get significantly faster app/file transfer.

To solve this problem I followed these steps and it resolved the problem for me:

  1. Open Android Studio
  2. Open SDK Manager
  3. Click the middle Tab which is labelled SDK Tools
  4. Check the Show Package Details checkbox which is in the lower right hand corner
  5. Click on the SDK Build Tools item to expand it.
  6. Check the newest version (highest number) that does not contain the string ‘rc’ after it’s name
  7. Uncheck all older versions (lower numbers)
  8. Click Apply and you’ll see a dialog like this:
  1. Click OK
  2. Once it’s finished, close your emulator and reopen it.
  3. Now try running your app again and the error message should have gone.

Building the Flutter App example

I continued following the Get Started guide on the Flutter website and built another app, and again the process seems very quick and easy. However one thing I’ve noticed straight away is my lack of opportunity to run this app on an iOS device. Having started with Xamarin years ago I could view my app on my physical iOS device as long as my Mac was on the same network as my PC, and set up correctly. More recently I’ve built React Native Expo apps on my PC, and using Expo, and the Expo Go client app on my iPhone, I could scan a QR code and view my app on the phone. So far on Flutter I feel that restriction of only being able to view my app on an Android emulator or device. I believe I have to jump on to my Mac entirely to test on a device. So for now testing my Flutter app on my iPhone looks tricky – which is the only negative I’ve found so far, but for me, a significant one.

Overall though I really like Flutter so far – more posts to follow!

React Native Expo

How to update the Expo CLI

While you are building your Expo app you will need to make sure you keep the Expo CLI updated, this post shows how to update the Expo CLI. If you are running your development build on an app you’ll also need to make sure you keep the Expo Go client updated too, links to which are included below. If you’re running your development build on an Android emulator it’s also worth keeping those updated.

When a new version of the Expo CLI has been released you’ll see a message something like this telling you you need to upgrade:

how to update Expo CLI

So to start to upgrade the Expo CLI, type:

npm install -g expo-cli

Once you’ve pressed return you’ll see a bunch of messages show up and it will whirr away for a good few minutes while it updates everything. Mine took a good 5 minutes and half way through it seemed to sit and do nothing – just leave it alone for a while, it is updating! Once it has finished updating you’ll see a message similar to the following, and you’ll see a new prompt.

expo update CLI complete

I’d recommend updating the Expo client at the same time either on the App Store – https://apps.apple.com/gb/app/expo-go/id982107779 or for Android on Google Play – https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en_GB&gl=US.

Problems when upgrading the Expo CLI

People sometimes run into problems when upgrading the Expo CLI and as per this blog post and others it seems the answer is often to uninstall and reinstall the Expo CLI.

Node js

How to run a Node js file

Sometimes it’s the obvious things that trip you up….. I went through the process of installing and setting up Node js, created my first Node app and all was fine. When I came back to that project a few weeks later (Node.js is something I use intermittently) I couldn’t remember how to start the Node js server. After Googling “how to run Node js file” I found loads of others asking the same question. So, whether you want to run your Node js file in Terminal, or in Command, or in the Visual Studio Code terminal here’s how you do it.

  1. Open your Terminal / Command / Git Bash / Visual Studio Code Terminal window
  2. Change the location to your node project
  3. Type node filename.js

And that’s all there is to it. So if your file is called app.js you would type node app.js. If your file is called search.js then you’d type node search.js.

If you need a little more info than that to set up your project and run the Node js file, then check out the info here. However this does still presume that you already have Node installed…..

How to check if you have Node installed

Yep, I have had to do this on more than one occasion too. In order to check if you have Node js installed, or how to check your Node js version, follow these steps:

  1. Open your command line tool (as above, Terminal, Command, Git Bash etc.)
  2. Type node -v
  3. This will print a version number if you do have node installed

You can see in this image the line where I’ve typed node -v and then pressed return, and then the subsequent response of the version number. You can use this for any npm package as well by typing packagename -v to find out if it’s installed, and if so, what version you have.

how to check if you have node installed or check your node js version
Microsoft Powerapps examples getting started
Apps, Powerapps Examples

Getting started with Microsoft PowerApps examples

Up until now I normally build apps using Xamarin or using Expo and React Native. But I recently had to build an app using Microsoft PowerApps and SharePoint Lists, and after I’d built this particular app I had a list of things I wish someone had told me before I’d started. PowerApps can be great, but it has it’s quirks, so grab any tips you can to make the process smoother. I’ve written a summary of how I dealt with each as I didn’t find that many Microsoft PowerApps examples that covered these particular topics when I was starting out. I’ll cover a few tips on:

  1. PowerApps formatting and styling, such as setting custom fonts, colors and sizes
  2. Making and using PowerApps groups, containers, and reusable components
  3. General PowerApps Examples and tips

PowerApps formatting and styling

You don’t have stylesheets when you’re working in PowerApps but there are some tricks which you can implement when you start building your app which give you some of the benefits of a stylesheet. You create a page which doesn’t actually form any visible part of your app. Call it Settings or something similar, and then plan to add one example element of each key part of your app in terms of styling. So a main header, a subtitle, a button, and include a label for each of the colours that you’ll use in your app. Whatever you name them in the treeview can be used as a style reference in the rest of the app. Here’s a demo to show you what I mean:

PowerApps style settings to save repetition

PowerApps components, containers and groups

These are the three ways of ‘grouping elements’ in Powerapps and each way has its pros and cons. Starting from the simplest:

  1. Groups – select multiple elements and right click, then click Group. Quick and easy, but element positions are still relative to the page, not the group. So forget doing any dynamic positioning or visibility changes with a group, as you’ll have to apply any setting to each item in the group separately and you’ll rapidly lose your mind.

    Use for: Simple scenarios where drag and drop positioning once is all you need

  2. Containers – right click a group and click add to container. This creates a little world for the grouped elements…. positions are relative to the container itself rather than the page. You can apply dynamic positioning and visibility changes to the container, i.e. setting the container property Visible to false will hide the container and everything in it.

    Use for: Modals, notification messages, some navigation elements like sidebars

  3. Components – I feel like these promise a lot but slightly fail to deliver what we really need. I’ll start with the positives. You can create a component which can then be placed on multiple pages of your app. When you update the component, all instances are updated. All good. However, you can’t interact with items on the page from items in the component (sort of), and you can’t update a global variable from within a component.

    Use for: Navigation elements, any repeating element that doesn’t need to raise more than one event to the screen

Other Microsoft PowerApps examples and tips

  1. Scrollable screens – Bear in mind if you want your screen to be scrollable in PowerApps you have to decide this at the beginning. A screen is either scrollable or not, and you can’t change screen types on the fly. Worth knowing before you get half way through!

  2. Avoid spaces in any naming, both in SharePoint columns, and elements in PowerApps. Be grateful if you never know the pain caused by not following this rule.

  3. If you have applied any dynamic positioning or sizing on an element DO NOT drag it around to move it. All dynamic positioning info will be lost! Only modify the position in the code.

I’m planning on writing a few blog posts focusing on some other Microsoft PowerApps examples that warrant a whole post to themselves – simple navigation in PowerApps, working with SharePoint lists, and manipulating strings using PowerApps string functions. I’ll add links here as I write them, but please do let me know if there is anything you would like me to cover.

how to run an expo app on an android emulator on a PC
Apps, React Native Expo

How to run an Expo app on an Android emulator

When developing an Expo app on a PC you need to be able to run the app on an Android emulator as you don’t have any iOS simulators to work with like you do on a Mac. I found the Expo instructions a little lacking in some detail, and as a Windows PC user primarily, I struggled to find all the information I needed in one place, to run my Expo app in an Android Emulator.

I’m presuming at this point that you’ve created an Expo project, and built your Expo app. You’ll need to download Android Studio and install it, and have at least one emulator configured.

So, to run your Expo app in an Android emulator :

  1. Start Expo by typing expo start on the command line.
  2. Open Android Studio.
  3. Open your project in Android Studio.
  4. Open the ‘AVD manager’ from the Android Studio toolbar.
  5. Run an Android emulator.
  6. Click ‘run on Android device/emulator‘ in the Expo client.

From Android Studio here is the open AVD Manager button:

To run an Android Emulator, click the play symbol next to the one you want to use from the AVD Manager window:

There’s a few problems you can find with each step, so here’s a few things to bear in mind if any of the above steps don’t work.

If you see this message:

“Couldn’t start project on Android: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select “Use custom Android SDK tools”, and point it at your Android SDK directory.”

…it means that steps 2 and 3 probably haven’t been done. It’s not a particularly obvious message and you’d be surprised ho easy it is to forget both steps.

If you see a message saying:

Couldn’t adb reverse: device ‘adb’ not found

… most of the time if I ignore this and click ‘Run in Android Emulator’ again after a few seconds it runs just fine.

Here is a link to React Native and Expo books on Amazon – I may receive an affiliate commission if you buy anything after clicking on this link.

Apps, React Native Expo

How to build a React Native Expo app on a PC

One of the big advantages of Expo is that you can build for iOS on a PC. However, the answer to the question ‘how to build an expo app on a PC’ whilst well documented here, also contained lots of info I didn’t need as I was already set up with certificates in my Apple developer account, and was only publishing for iOS. So this is a more condensed overview for anyone wanting to build an Expo standalone iOS app using a PC.

Before you follow these steps I have presumed that as a Windows user you’ve already installed the WSL as outlined here. I’m also presuming that you’ve built an Expo app, and that you have an Apple Developer account. Once you have then you’re ready to build your Expo app.

  1. Open Powershell as administrator by right-clicking the Powershell icon and selecting ‘run as administrator’
  2. Type – Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
    Restart PC (I’m not totally sure this is necessary, do your own tests!)
  3. Open git bash at the project root
  4. Type expo build:ios

Please note if you see a message saying “Additional information needed to setup credentials in non-interactive mode.” use CMD instead. I have seen lots of info saying don’t use Git Bash for this, but honestly on my PC it seems a bit hit or miss. Rule of thumb is try both!

Build your Expo App on the PC

Open CMD, navigate to project root, run expo:build:ios.

Let Expo manage the process for you and as long as you had all your profiles and certificates set up ok in your Apple Developer account then Expo should be able to put it all together. Once the Expo build process starts, it will ask you a series of questions, the first one asks you what kind of build you want – choose Archive if you want to upload this to TestFlight and run this on a device.

expo build on pc what type archive or simulator

Next, the Expo build process will ask you for your Apple account credentials:

expo build on pc apple account credentials

Once it’s complete you’ll see a message saying that your build is queued. There’s a link provided in the output which will let you both see the progress of your Expo build and download the IPA file once it’s finished, from the Expo website.

Expo credentials manager

If there are any issues with any stage of this and you need to take a look at the certificates and provisioning profiles that Expo is trying to use, then go to expo credentials:manager and follow the on-screen prompts. You can remove the certificates it’s trying to use and start the whole process again. This Expo page is really useful as it explains what each bit is for clearly.

Uploading the IPA file to TestFlight and the App Store

Now that you’ve downloaded your IPA file you are ready to submit it to the app store and / or TestFlight. And here’s where the wheels fall off a bit if you are trying to build your iOS Expo app using a Windows PC. You can get this far but to upload the IPA file you HAVE to use Transporter, and that only runs on a Mac. I find it a huge shame that you can’t do this any other way, but for now you’ll have to find a friend with a MAC to get your IPA file to Apple.

mug with you're on mute message on it
Design, News, Print on demand

Custom mugs – “You’re on mute” for Zoom meetings

2020 has been a long year for us all, and most of us have spent an awful lot of time on Zoom meetings. That seems especially strange when you think this time last year many of us hadn’t even heard of it! Most of us have had to tell colleagues and friends “You’re on mute” hundreds of times in some cases, while silently eye rolling, and as the months have rolled by I’d been mulling over 2 things:

1. “Wouldn’t it be easier to just have a custom mug with “You’re on MUTE” printed on it, and …

2. is it ok to day drink if it’s in a mug? Kidding! Although there have been days when it’s been tempting!!

Anyway, I had to scratch the itch, and had also been intending to set up some kind of print on demand shop this year. So I’ve quickly created this custom mug which I will be merrily drinking my tea (see!) out of during Zoom meetings in 2021. Click here if you want to buy one too.

Print on demand mugs

I’ve had a few ideas over the years of things I’d like to get printed, both for myself and also to turn into saleable products, so I’ve been wanting to learn about Print on Demand services for a while. Having just dipped my toe in the water I’m intending to write a blog post about the topic in 2021. For this mug I’ve used Printful.com as after a bit of google searching and some quick test on a couple of websites it was the one that seemed to offer the best and quickest set up experience. I’ve ordered one of my Zoom mugs to test the process, so now I’ll wait for it to arrive….

Custom mugs uk

However I’d really like to find a UK custom mugs supplier so I’ll keep researching to see what I can find. Of course if you can recommend one then let me know!

Expo react navigation example
Apps, React Native Expo

How to set up Expo app navigation using React Navigation

Further to my previous post which explained how to build a react native app using Expo, this post takes it a step further and shows you how to set up all 3 types of Expo navigation in your app – Stack Navigation, Tab Navigation, and Drawer Navigation. I think some people search for ‘Expo Navigator‘ or ‘Expo React Navigation‘). By the time you’ve worked through both posts you should have a simple Expo app running on your device with the ability to navigate in different ways between pages. I’ll also cover some basic styling, so by the end you will have a great app framework to build on.

Which Expo navigation package?

There are a few different navigation packages available for Expo (React Navigation, React Router…) but for this article we’ll be using React Navigation, which is recommended to be used with Expo. I’ve never had any issues with it and I also know it works well with Redux. I won’t go into that now but it will become important as you build more complex apps, so it’s worth mentioning. Full details are here.

I’m presuming you’ve read my first Expo post, and completed all the steps. In that case you’ll already have a basic Expo app installed and running. That’s where this post takes over….

First of all you need to install the React Navigation package itself, so on the command line type this:

npm install @react-navigation/native

And then this, to install Expo dependencies:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Now you’re ready to start coding your pages and then navigating between them, and for this you need to install the Stack Navigator.

Expo stack navigator for basic navigation

The stack navigator is the simplest of the three, and let’s you simply move from one page to another using a link or button that you have put on your page. You’ll then define a ‘stack of pages’ and navigate through them. To install the Stack Navigator, type this :

npm install @react-navigation/stack

Once installed, we can start coding a simple 2 screen Expo app that let’s you navigate to and from each screen. This is the most basic navigation set up. First of all you need to reference all required packages in your app.js file :

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Text, Button, View } from 'react-native';

… and then create a Stack Navigator.

const Stack = createStackNavigator();

Next we build the method for our pages, one for the Home page, and one for the Details page :

function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Show me the Details screen"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function Details({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Details page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

NOTE – I’ve included a bit of styling, which just makes sure the page content is centred nicely. Now we’ll build up the main method in app.js, which defines the overall StackNavigator and specifies which page to show first, in the initialRouteName property.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Now run that to test your changes – type expo start on the command line if it is not already running. Or simply save your file to refresh it if it already is. You’ll see the Home page load with a button on it. That button takes you to the Details screen, and on the Details screen is another button which takes you back to the Home screen. And that is all you need for some simple Expo navigation!

You’ll probably find that you also want to have another type of navigation in your app, either some Tab navigation, or Drawer navigation. Read on for how to combine them.

Combining stack navigation with tab navigation in Expo

Before you can add tab navigation to your Expo app, you need to decide whether you want to install top tabs or bottom tabs, and whether you want to :

  • nest a Stack Navigator in a Tab Navigator – or
  • nest a Tab Navigator in a Stack Navigator

I’m going to add some bottom tabs to our app, and we will be doing the first option, nesting a Stack Navigator in a Tab Navigator. So first, let’s install the package :

npm install @react-navigation/bottom-tabs

Now add a reference to that at the top, under where you referenced the Stack Navigator.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

… and define the navigator, under your Stack definition.

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

Change your main App function to this, so that we have tabs as the main navigation:

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Details" component={Details} />
        <Tab.Screen name="Search" component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Reload your app and you’ll see your new tabs at the bottom of the screen. Note I have added one extra page called Search. You can create a method for this in the same way as we did for the Home screen, and the Details screen.

And now we need to include our Stack Navigator. We will include a Stack of pages under the Details section, so create a new method called DetailsStackScreen, that will reference each page in our Stack, like this:

function DetailsStackScreen({navigation}){
  return (
      <Stack.Navigator>
        <Stack.Screen name="Details Stack Screen" component={Details} />
        <Stack.Screen name="Further Details" component={FurtherDetails} />
      </Stack.Navigator>
  );
}

You will notice we’ve referenced a new page – Further Details, so we need to also add the method for this:

function FurtherDetails({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the FURTHER Details page</Text>
      <Button
        title="Back to the previous Screen"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Back to the HOME Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

And also we need to update our Details page to include a link to drill down to the Further Details page:

function Details({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Details page. Now you can drill down to a further details page in this Stack of screens</Text>
      
      <Button
        title="Further Details"
        onPress={() => navigation.navigate('Further Details')}
      />

      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

Finally, we need to update the main App method to reference the DetailsStackScreen instead of our original Details method :

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Details" component={DetailsStackScreen} />
        <Tab.Screen name="Search" component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Now refresh your app to see the results, and you’ll see you have 3 tabs, each of which leads to a page. In the Details screen you will see that you can navigate through the Stack of pages you have defined.

Side navigation – also known as drawer navigation

To complete our app, we will be adding some Drawer navigation. To start we need to install the package :

npm install @react-navigation/drawer

… reference it at the top of our App.js page :

import { createDrawerNavigator } from '@react-navigation/drawer';

Then create the Drawer object :

const Drawer = createDrawerNavigator();

Now we make the main method in our App.js file reference the Drawer Navigator, which becomes the ‘wrapper’. This references each page you want to show in your side menu, like this:

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeTabsScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

HomeTabScreen is a new method that we need to define, that holds the TabNavigator that used to be in this main method, like this :

function HomeTabsScreen({navigation}){
  return(
    <Tab.Navigator>
         <Tab.Screen name="Home" component={Home} />
         <Tab.Screen name="Details" component={DetailsStackScreen} />
         <Tab.Screen name="Search" component={Search} />
    </Tab.Navigator>
  );
}

Then we just need to define the SettingsScreen :

function SettingsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Settings page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

And finally we need to reference our styles at the bottom the page :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you now run your app, you will have a fully functioning app with all three types of navigation. Drag in the Drawer Navigation menu from the left hand side and try clicking each link. You’ll notice that the Settings page does not contain any Tab Navigation, but the Home page does, so you have total control over where and how you use each type of Expo Navigation.

The app is now ready for you to build your pages and style! I’ll probably write another post on how to style the app and do things like add icons to the Tab Navigation. Feel free to email me any questions or requests for the next post at hello@brainstormcreative.co.uk!

For completeness here is the final code:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { StyleSheet, Text, Button, View } from 'react-native';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function HomeTabsScreen({navigation}){
  return(
    <Tab.Navigator>
         <Tab.Screen name="Home" component={Home} />
         <Tab.Screen name="Details" component={DetailsStackScreen} />
         <Tab.Screen name="Search" component={Search} />
    </Tab.Navigator>
  );
}

function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Show me the Details screen"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsStackScreen({navigation}){
  return (
      <Stack.Navigator>
        <Stack.Screen name="Details Stack Screen" component={Details} />
        <Stack.Screen name="Further Details" component={FurtherDetails} />
      </Stack.Navigator>
  );
}

function Details({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Details page. Now you can drill down to a further details page in this Stack of screens</Text>
      
      <Button
        title="Further Details"
        onPress={() => navigation.navigate('Further Details')}
      />

      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

function FurtherDetails({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the FURTHER Details page</Text>
      <Button
        title="Back to the previous Screen"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Back to the HOME Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

function Search({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Search page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>This is the Settings page</Text>
      <Button
        title="Back to the Home Screen"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeTabsScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
training pace calculator
Apps, Running

Training pace calculator

Maybe you’ve taken up running during the COVID19 pandemic, so many people have started running training while gyms are shut. With many of us working from home your lunch break, or the time you would have been commuting, can now be used to get out for a run. So now you’ve got the running bug you might be starting to think about trying to run a certain distance, or improving your running training to run a distance faster. Rather than doing a load of maths, try Pace Me our simple training pace calculator. You can use it as a :

  • 5km pace calculator
  • half marathon pace calculator
  • 10km pace calculator
  • marathon pace calculator

At the moment it is a very simple app, that just shows you your 5km, 10km, half marathon, and marathon times if you run at the pace selected. However we are currently working on an upgrade that will make it more useful as a training pace calculator. Download it for iOS here, and keep your eyes open for updates soon.

running pace calculator app

Some people like to work in minutes per mile, some like to keep a track of their running pace in minutes per kilometre – this pace calculator app let’s you see both. By adjusting the slider to your current, or target running pace, you can see your predicted :

  • 5km race time
  • 10 km race time
  • half marathon race time
  • marathon race time

… will be.

Running pace calculator – target heart zones

We are soon to be releasing a new upgraded version which will also show you your target heart rate zones and your running pace times to help you run faster. As you start reading running training guides you’ll read about going on tempo runs and threshold runs. Which is lovely and all, but how do you know what your tempo run pace should be?! The new version of the Pace Me running calculator will work it all out for you after you enter a few key bits of info.

Tracking your running pace

You might also be wondering how you know how fast you’re running, if you are new to all of this. You can just do it the old school way, and time your run with a wrist watch. As long as you know how far you’ve run you can work out how long on average each kilometre took you. But it won’t show you your split times (the time you took to run each kilometre). And you won’t know what your heart rate was during your run, which can really help with your running training.

You can use an app on your smart phone to track your run, Strava being one of the most well known. But there are plenty of others that do similar – Nike+, MapMyRun, Garmin. However, I do love the way Strava shows your time compared to others along certain segments and it also tells you when you’ve just run a half mile PR for example. That’s along with full split time, analysis. If you want to know your heart rate then you’ll need to either get a heart rate monitor which you wear around your chest, or a sports training watch which can also measure your heart rate.

Running heart rate data & maps

A few years back everyone was talking about Garmins and Apple watches but I found a Tom Tom sports watch which I have loved and still use to this day. It not only let’s me track my runs, and heart rate, but also enables you to store music on the watch and listen using bluetooth headphones – no phone needed! When you get back from your run you sync the watch with a Tom Tom app on your phone. Then you can see the full map of where you ran, the distance, heart rate and full analysis. I have the multi sport version so can also swim and cycle, track gym workouts too. It also tells you your resting heart rate, hours of sleep, and of course steps. It genuinely has blown me away what it does for the money, and there’s lots it does that I haven’t described here. I think the model may have been upgraded a bit since I bought it, but here is a link to the product on Amazon, along with an overview of lots of other sports watches.

I also have it set up to automatically upload each run to Strava, so I get the benefits of what Strava has to offer too. So, using this data you can see how fast you’re running and what your current running pace per km is – then use the Pace Me running training calculator, set the slider to your current pace and then you can see what your predicted race times will be at your current pace. In the next upgrade you will also be able to get your target tempo and threshold running paces to help you with your running training.

Have you got any other ideas of what you’d like me to include in the next release of the app? Please email suggestions to hello@brainstormcreative.co.uk.

create react native app with Expo tutorial
React Native Expo

Create a React Native app with Expo

I’ve been an app developer for years but recently had to work on a project that required me to create a React Native app with Expo. Expo is pretty easy to set up and use but I definitely found a few holes in the documentation online, so I’ve documented the steps to help you build an Expo app.

In summary this post will tell you how to :

  • Create a new Expo app project
  • Create a git repo and push your code into it
  • Run and debug an Expo app

The next post will show you how to :

  • Set up basic navigation (a Stack Navigator) using ReactNavigation
  • Add Tab navigation to your Expo app, and combine it with the StackNavigator
  • Add Drawer Navigation to the app
  • Apply some styling

I’m using Visual Studio Code on a PC to create this Expo app – I’m presuming that you’re already familiar with Visual Studio Code and the fundamentals of app development. I’ll also presume that you know the basics of using a command line tool and using Git repos. For all of this you can use CMD or Git Bash. I prefer Git Bash but it does occasionally have some issues with Expo, so bear that in mind and try CMD if that happens.

Get Started creating your app – Install the Expo client

The very first time you create an Expo app you will need to install the Expo CLI. In your command line tool of choice (Command or Git Bash), type:

npm install --global expo-cli

If you get an error message about npm not being recognised, then you haven’t yet got node package manager installed, and you will need that. In which case follow the instructions here – https://www.npmjs.com/get-npm and then try again.

You will also need to install the Expo client on your Android and / or iOS device.

1. Set up your new Expo project

Expo have plenty of documentation available at https://docs.expo.io/ so some of the process of creating a new React Native app with Expo is covered – do take a look. I’ve summarised the key required steps here. In summary. At the command prompt, navigate to the folder where you want your project folder to be, and type:

expo init my-project

….. where my-project should be the name of your new app. For this example we’ll call it myapp, so :

expo init myapp

Once you’ve typed that on the command line and pressed return you’ll see a question prompt asking you what type of project you want to set up. Choose the basic option from the Managed Workflow section and press return.

You’ll see lots of packages being installed. Once it’s finished type this on the command prompt:

cd myapp

That moves you into the directory of your new app. Type npm install to ensure React Native is installed. So your project framework is created, now you need to set up a git repo.

2. Set up a git repo for your Expo app

Create a new git repo for this project on github – I’ve now created a repo called myapp. Now we need to tell the local repo to connect to this remote repo. Presuming that you are still in your new project root directory with the command line tool open, type –

git remote add origin https://github.com/yourNameHere/myapp.git

… press return, and then type this to push your project code so far –

git push --set-upstream origin master

At that point you’ve created your blank Expo project, created a git repo and pushed your Expo project to the master branch. It’s worth checking that the Master branch in this new repo in github is showing that you just pushed your new Expo project code to it.

3. Test Your Expo App build Setup

Before we go any further, let’s make sure your basic Expo app set up is working ok. So first of all you need to start expo, by typing this in your project root on the command line:

expo start

You’ll see the Expo window open in your browser. With the camera of your device, scan the QR code and follow the prompt to open the Expo client. Please note it defaults to LAN, but quite a few routers are configured to block your local IP address, mine included. If you select Tunnel, the QR code will reload and it should run fine.

At this point you’ll see the code start to load on your device and you’ll see a basic app home page on your device. You can leave this running while you start to edit your code……

4. Edit your Expo app

Now go back to Visual Studio Code and open your Expo project, then open the App.js file, it will look like this:

Now change the text that says “Open App.js to start working on your app!” and change it to some of your own text, then save the file. This change will automatically be pushed to the Expo client, so if you now look on your device, you will see your new text. And that’s all the basics of how to create a React Native app using Expo.

5. Continue to create your React Native App with Expo!

If you want to just download an Expo skeleton app then download from my github repo here – https://github.com/EmilyChristy/expo-skeleton

Apps, Software Development, Xamarin

Setting up your Xamarin development environment in Visual Studio

In order to develop apps using Xamarin you have to decide what your development environment will be, and whether to develop on a PC or a Mac primarily. My Xamarin development environment of choice was to do all my coding on my PC in Visual Studio 2015. I then use my Mac Mini on the same network to run my IOS simulators on, and connect my IOS test devices to. It’s important that the installed SDK versions for Xamarin match on both the PC and the Mac or you can run into compilation or deployment problems down the line.

I’ve been developing apps using C# in Xamarin for a number of years now, up until now as a side project. But as Xamarin was bought by Microsoft earlier this year, and the annual license is now free, it seemed the right time to start focusing on Xamarin a little more.

During the process of getting all of this setup and up to date, I ran into a number of issues which, from the Google searches I did, seems I’m not the only person to have these problems. I’ve collected a rough and ready list of some of the errors and their solutions to hopefully save others a bit of the time it took me to eventually get to a stable working system.

During this process you may need to know a couple of key things –

1. Find the IP address of your Mac on the network
2. View your Xamarin log files
3. Update the Xamarin and XCode installs on your Mac
4. Update the Xamarin and SDKs on your PC.

This post will help you do each of those, and if you still haven’t got up and running by the end of this post you can turn to both the Xamarin forums and Stack Exchange for help.


Find the IP address of your Mac on the network

In the top right hand corner of your Mac screen you’ll see the little Wifi symbol that shows your Mac is connected to a Wifi network – click on this symbol while holding down the Ctrl key on your Mac and you’ll see some extra info appear in the dropdown list, including the IP address of your Mac on the network.

Xamarin setup process and common error messages

Typically at some point you’ll have a problem getting your PC to connect to your Mac. This wouldn’t be a problem in itself apart from the fact for some reason the useful error messages are hidden deep within the Xamarin log files. Incidentally it’s vital that your PC and Mac are on the same Wifi network. I had issues at one point because my laptop had autoconnected to a BT Openzone Wifi network and the Mac was on the normal office one. Just a simple point that’s easily overlooked. Presuming it’s not that, you will need the log files! Using the instructions below to get to the log file you are likely to find a message like:

“The installed Xamarin.iOS (version 10.0) on the Mac macname.local (192.168.x.xx) is not compatible with the local Xamarin.iOS 10.2.”

Which is just telling you to update whichever systemis behind and then you will be able to connect to your Mac no problem..

1. Error occurred in the designer agent. Object reference not set to an instance of an object – designer won’t load. Can happen for a number of reasons. In my case when I went on to my Mac and opened XCode / Apple developer account there was a license agreement dialogue box that needed to be accepted by me. Once I’d done that everything worked fine.

2. Failed to create the a fat library. The solution to this was to go to the Mac and open Xcode. An update had been installed and it was waiting for me to accept a new user agreement. Once I’d done that and returned to Visual Studio on the PC I could build the project no problem.

Xamarin related updates

There’s a series of places that updates need to be ‘triggered’ when you’re using Xamarin – the PC, the Mac, and if you are debugging on a device, then the device environment itself.

Updates are located in Visual Studio on the PC. On the Mac there’s system updates which might include Xcode, that need to be kept up to date. You’ll also have Xamarin Studio installed on your Mac, and that has an updater that will need to be run as well by clicking the File > Check for updates button.

On your device you need to go to follow the normal process for updating your version of IOS. I’m only developing on Apple devices at the moment until I’ve got more comfortable with the full development cycle.

Diagnosing problems and using the Xamarin log files

The log files can be located by going to Help > Xamarin > Open Logs in Visual Studio and then browsing to the relevant folder location as follows:

Mac – ~/Library/Logs/Xamarin-[MAJOR.MINOR]
Windows – %LOCALAPPDATA%\Xamarin\Logs (on Windows 10 this will be something like C:\Users\Bob\AppData\Local\Xamarin\Logs)

If you don’t see the folder you may have to tell File Explorer to show hidden files as they could be hidden by default.

Also in Visual Studio pay close attention to the output window. Top left of that window is a dropdown that says ‘Show output from ‘ and then there are several options:

– Build
– Build order
– Debug
– Xamarin
– Diagnostics

You find different type of information in each and they are often worth trawling through if you are encountering problems.

Apps, Xamarin

Developing (and Marketing) a Xamarin App using Visual Studio

I’ve been developing apps using C# in Xamarin for a number of years now, up until now as a side project. This year I decided it was time to focus, especially as Xamarin was bought by Microsoft earlier this year and the annual license is now free 🙂

In order to develop apps using Xamarin you have to decide whether to develop on a PC or a Mac and then get your overall system set up and running. My setup of choice was to do all my coding on my PC in Visual Studio 2015 and use my Mac Mini on the same network to run my IOS simulators on, and connect my IOS test devices to. It’s important that the installed SDK versions for Xamarin match on both the PC and the Mac or you can run into compilation or deployment problems down the line.

During the process of getting all of this setup, and up to date I ran into a number of issues which, from the Google searches I did, seems I’m not the only person to have these problems. I’ve collected a rough and ready list of some of the errors and their solutions to hopefully save others a bit of the time it took me to eventually get to a stable working system.

During this process you may need to know a couple of key things, being how to –

1. Find the IP address of your Mac on the network
2. View your Xamarin log files
3. Update the Xamarin and XCode installs on your Mac
4. Update the Xamarin and SDKs on your PC

If you still haven’t got up and running by the end of this post you can turn to both the Xamarin forums and Stack Exchange for help.


Xamarin setup process and common error messages

Typically at some point you’ll have a problem getting your PC to connect to your Mac – this wouldn’t be a problem in itself apart from the fact for some reason the useful error messages are hidden deep within the Xamarin log files. Using the instructions below to get to the log file you are likely to find a message like:

“The installed Xamarin.iOS (version 10.0) on the Mac macname.local (192.168.x.xx) is not compatible with the local Xamarin.iOS 10.2.”

Which is just telling you to update whichever system is behind and then it will all work ok.

1. Error occurred in the designer agent. Object reference not set to an instance of an object – designer won’t load. Can happen for a number of reasons, in my case when I went on to my Mac and opened XCode / Apple developer account there was a license agreement dialogue box that needed to be accepted by me. Once I’d done that everything worked fine.

2. Failed to create the a fat library. The solution to this was to go to the Mac and open Xcode. An update had been installed and it was waiting for me to accept a new user agreement. Once I’d done that and returned to Visual Studio on the PC I could build the project no problem.

Xamarin related updates

There’s a series of places that updates need to be checked when you’re using Xamarin – the PC, the MAC, and if you are debugging on a device, then the device environment itself.

Updates are located in Visual Studio on the PC. On the Mac there’s system updates which might include Xcode, that need to be kept up to date. You’ll also have Xamarin Studio installed on your Mac, and that has an updater that will need to be run as well – File > Check for updates.

On your device you need to follow the normal process for updating your version of IOS (I’m only developing on Apple devices at he moment until I’ve got more comfortable with the full development cycle).

Diagnosing Problems And Using The Xamarin Log Files

The log files can be located by going to Help > Xamarin > Open Logs in Visual Studio and then browsing to the relevant folder location as follows:

Mac – ~/Library/Logs/Xamarin-[MAJOR.MINOR]
Windows – %LOCALAPPDATA%\Xamarin\Logs (on Windows 10 this will be something like C:\Users\Bob\AppData\Local\Xamarin\Logs)

If you don’t see the folder you may have to tell File Explorer to show hidden files as they could be hidden by default.

Also in Visual Studio pay close attention to the output window. Top left of that window is a dropdown that says ‘Show output from‘ and then there are several options:

– Build
– Build order
– Debug
– Xamarin
– Diagnostics

I ran into a problem where my app would build fine but wouldn’t deploy and there was a blue message at the bottom of the Visual Studio screen that said the Mac Agent wouldn’t load but I couldn’t understand why. Once I looked at the Xamarin and Diagnostics output I found the useful message which told me ‘The installed Xamarin.iOS (version 9.8) on the Mac macem.local (192.168.1.xxx) is not compatible with the local Xamarin.iOS 10.0.’ Much more useful! So I set off to update things and ran into another set of problems, descriptions of which, and solutions are provided below.

Building Apps, Useful Tips

Xamarin IOS Keyboard Done Button & Event
To add a done button –
textBoxName.ReturnKeyType = UIReturnKeyType.Done;

This explains how easy it is to make sure the done button dismisses the keyboard.
https://developer.xamarin.com/recipes/ios/input/keyboards/dismiss_the_keyboard/

Xamarin app launch screens

I had a fair few problems figuring out launch screens, and from my online research it seems I’m not alone. There seems to have been a number of changes in the way it’s recommended you handle launch screens in Xamarin and this has resulted in there being a lot of outdated instructions out there online. Here’s a basic summary of how I got it working.

1. Create a new storyboard in solution explorer in Visual Studio by right clicking your IOS project and then selecting ‘Add New Item’ > Apple > IOS > Storyboard View Controller. I called mine Launch.storyboard. With your launch storyboard open in visual studio you’ll be presented with a blank screen. In the properties tab make sure the ‘Can be launch screen‘ checkbox is checked, and then from the Toolbox drag a view controller. Then I edited info.plist in a few ways as follows, I opened it as a text file and searched for :

UILaunchStoryboardName

The corresponding value should be set to the name of your launch screen storyboard, so as mine is called Launch.storyboard my key value pair in the info.plist file looked like this:

UILaunchStoryboardName
Launch

I saved and closed the file. From Solution Explorer I right clicked my IOS project and clicked Properties. Select ‘IOS Application‘ and find the Launch Images section, and select ‘Don’t use Asset Catalogs‘ from the drop down. Close the file.

That’s you ready to start building your launch screen. I initially followed this post – https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/#launchscreens – but found it didn’t 100% match up to my development environment so hopefully the combination of this and that will get most people there.

Xamarin app icons

Xamarin seems to have trouble with app icons and the issue is confused by a gradual migration away from the old way of defining your icons in info.plist to using Asset Catalogs. I found this forum post that suggested this issue is a little buggy – https://forums.xamarin.com/discussion/48162/why-does-my-app-icon-not-show-up which suggests a little housekeeping on the Mac might be necessary.

Multiple screens & iOS storyboards

It’s pretty straightforward creating a single screen app, many people, myself included stumble once they try to create multiple screens. As ever there are several ways you can build a multiscreen app which often means its difficult to find a simple, get you started, walk through. This is the one that helped me make the leap to multi screen – https://developer.xamarin.com/guides/ios/getting_started/hello,_iOS_multiscreen/hello,_iOS_multiscreen_quickstart/

Submitting Your Xamarin App to the App Store

I found this article the most useful – https://developer.xamarin.com/guides/ios/platform_features/app_submission/
and https://developer.xamarin.com/guides/ios/deployment,_testing,_and_metrics/app_distribution/app-store-distribution/publishing_to_the_app_store/#Preparing_for_App_Store_Distribution

I’d recommend researching keywords for your app before you submit it, you’ll get a much better chance of it being a success if you hit the top of those search results. You need to look into App Store Optimisation (ASO), the App specific version of SEO. This article gives a great overview of ASO – http://www.silkstream.net/blog/2015/03/app-store-optimisation-aso-rank-factors-tips.html. Bear in mind that significant App store changes have been introduced by Apple in September and October 2016 so it’s worth making sure you only refer to up to date information – I’d recommend AppAnnie for everything detailed and up to date – https://www.appannie.com/insights/topic/aso-app-store-optimization/ , and they recently build a downloadable reference available here https://www.appannie.com/insights/aso-app-store-optimization/playbook-build-app-store-optimization-aso-strategy/

A huge list of App store SEO/ ASO tools that will get you started :
http://www.apptamin.com/blog/app-developer-tools/#aso

It’s also vital to set up a website to provide marketing data and support for your app. If you get your SEO research right for this you’ll also collect new users via your website where you can then direct them to your app on the app store. I’d recommend using SEMRush for SEO keyword analysis:

SEMrush

Publishing Xamarin app to the App store

Submit through iTunes Connect. I found this useful – https://developer.xamarin.com/guides/ios/deployment,_testing,_and_metrics/app_distribution/app-store-distribution/publishing_to_the_app_store/#Submitting_Your_App_to_Apple

I used Application Loader. Initially I got an error message saying the bundle identifier in my project didn’t match what was in iTunes connect – they have to be completely the same and are case sensitive.

brochure-design-woking
Client Focus, Design

Traditional Marketing – leaflet design & print for a client

We recently were asked to design and print a double sided A5 leaflet for one of our long standing clients. As well as doing online marketing and SEO for them they wanted to do some traditional marketing too, so we designed this marketing brochure for them to deliver to their potential block management clients.

We then managed the print process for them and delivered the finished brochures to them this week.

Arduino

Learning to control An Arduino From A Webpage

I wanted to learn how to control an Arduino from the internet, and made some notes after getting a simple example working. I started with the the Wifi Web Client example on the Arduino website here , and found the code worked in the end but to start with it would connect to my Wifi network fine, but it wouldn’t connect to the page. It turns out the firmware was out of date and it took a while to find the answer to how to fix it, so noting the errod and solutions here for anyone else finding the same problem.

cd C:\Program Files (x86)\Atmel\Flip 3.4.7\bin

When updating the firmware I got an error after I ran the cmd line:

batchisp.exe -device AT32UC3A1256 -hardware usb -operation erase f memory flash blankcheck loadbuffer /Arduino/hardware/arduino/firmware/wifishield/binary/wifi_dnld.elf program verify start reset 0

…so I manually checked the filepath and discovered in my version of Arduino the folder ‘firmware’ is called ‘firmwares’ so the path should be:

batchisp.exe -device AT32UC3A1256 -hardware usb -operation erase f memory flash blankcheck loadbuffer /Arduino/hardware/arduino/firmwares/wifishield/binary/wifi_dnld.elf program verify start reset 0

batchisp.exe -device AT32UC3A1256 -hardware usb -operation erase f memory flash blankcheck loadbuffer “C:\Program Files (x86)\Arduino\hardware\arduino\firmwares\wifishield\binary/wifi_dnld.elf” program verify start reset 0

batchisp.exe -device AT32UC3A1256 -hardware usb -operation erase f memory flash blankcheck loadbuffer “C:\Program Files (x86)\Arduino\hardware\arduino\firmwares\wifishield\binary/wifiHD.elf” program verify start reset 0

batchisp.exe -device AT32UC3A1512 -hardware usb -operation erase f memory flash blankcheck loadbuffer “C:\Program Files (x86)\Arduino\hardware\arduino\firmwares\wifishield\binary/wifiHD.elf” program verify start reset 0

That fixed it and it worked fine after that.

styled baskerville ampersand
Design, News, Website Design, Wordpress

Google fonts with a beautiful ampersand – what’s up with Baskerville?

I spent some time recently working on a couple of website designs that could really use a little design flourish, and I thought styling the ampersand would be just enough. Looking back to an old bit of code I knew you could usee CSS to style your special ameprsands, render them in Baskerville styled in Italic and hey presto….. wait what? This doesn’t look so good anymore, what the heck is up with Baskerville.

After trawling the web for a while I *think* I have found the answer – Baskerville is now called ‘Libre Baskerville’ in the Google font library, so changing your css font-family reference from “Baskerville” to “Libre Baskerville” fixed it up. For a couple of great references on styling beautiful ampersands I’d recommend these resources.

https://johndjameson.com/blog/ampersands-and-google-fonts/

My Top 30 Fonts with the Sexiest Ampersands

Speed Up WordPress With Hosting & Caching Changes
News, Wordpress

Speed Up WordPress With Hosting & Caching Changes

I wrote an article last year about how to speed Woocommerce up. It’s turned out to be a pretty popular post, but as with everything online things have moved on and it feels like the right time for an update. WordPress is great but the number one complaint you hear is ‘WordPress is slow!’ – it doesn’t have to be, and here’s our advice on how to speed up WordPress making 2 simple changes – optimise your hosting and cache your content.

Change Your WordPress Hosting

You need to start by figuring out if your hosting is part of the problem. This website is hosted on a server managed by Names.co.uk Siteground. We have used WP Engine in the past for some clients who preferred that as a hosting option, and Dreamhost has also come highly recommended. (Incidentally here is an article from WP Engine – How Site Speed Affects Your Business).

Use Google PageSpeed Insights to check a variety of issues on your website, including server response time. Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server.

If it looks like your server response time is slow then this is the single most important thing you can change to speed up your WordPress website.

If you find your hosting is lacking there’s plenty of good hosting companies out there that you can move your website to, and the market has changed a bit in recent years with the emergence of companies like WP Engine and Dreamhost and Siteground. WP Engine provide hosting just for WordPress websites and aims to deliver super fast hosting whilst dealing with a lot of the configuration for you. They provide caching and a CDN and handle updates for you so if you’re a ‘not so techy’ WordPress website owner this could be the best solution for you to speed up your WordPress website. With plans starting from $29 (£18) per month and a 60 day money back guarantee you can’t really go wrong giving it a go! WordPress Hosting with WPEngine.com →


SPEEDUP-250x250-v1
$50 off shared hosting

Caching Your Content – Pre-Making Your Sandwiches!

So what is caching? The simplest way I can think of describing it is this – Imagine walking into a cafe and ordering a sandwich, waiting for someone to slice the bread, and make the sandwich. Compare that to walking in to the same cafe, ordering the same sandwich but being handed it straight away, so you hand your money over and off you go. You’re already half way down the street while the other guy is still waiting for his bread to be buttered. Are you still with me?!

If you’re confused, what I’m saying is you need to pre-make your web pages.

WordPress stores all your page and post content in a database, and every visitor to your website that asks to see one of your pages is making the WordPress elves scurry off to find all the bits of data and assemble them into a page. Imagine 20 visitors ask for the same page this afternoon, if that’s a page you only update once a month then why would you do that? It would be much more sensible to have a pre-assembled version ready to show each of them wouldn’t it? ANd then if you made a change to that content you’d just rebuild that version and so on. Well, that’s caching your pages!

There are several well known caching plugins that have been around for a number of years and while they do a great job they are pretty complicated and awkward to set up and use. And then WP Rocket walked into my life a few months ago and all that changed. It’s not free, but you get what you pay for, remember! You download it, install and configure it in less time than it takes to put the kettle on. Seriously, just by activating the plugin you are caching your pages. It is amazing! Visit the WP Rocket website →

A review of weather apps for iphone
Apps

The Best Weather Apps For iPhone & iPad – That We Know Of!

With all this hot weather – and the possibility of a spanish plume and big thunderstorms forecast for the next few days – I thought I’d put together a review of what I think are the best weather apps for iPhone. Being a storm lover, and loving interesting weather of any kind there are a few weather apps I’ve found myself relying on a lot ever since I got my first iPhone.

So what are the best storm tracking apps? And what are the best weather apps for iPhone or iPad? Note – I’m not reviewing Android weather apps because I don’t have an Android device and believe they vary a fair bit from the iOS version. 

1. Weather Pro App – FREE & £1.99 Pro Version

best weather app iPhone ukMy favourite, and certainly the weather app I use the most, has to be the Weather Pro app. This is my go to iPhone app for general weather. The free version is really good but I’d definitely recommend upgrading to the paid version to get detailed radar, 2 week forecasts and more extras. The app includes a live lightning tracker, rain / snow / hail forecasts, and the weather forecasts themselves are super accurate. I quite genuinely can’t imagine life before this app!

2. Home And Dry Weather App by MetDesk – £1.49

Best weather apps review - Home and Dry appThis has absolutely fantastic animated maps and a brilliant user interface. It feels slick and easy to use and combines real radar data with forecast rain data to give you an all in one animated weather map. It’s a useful app when there are heavy showers about and you want to know if you’re about to get wet or not!

 

3. Dark Sky Weather App – £2.49

iphone weather app dark skyOne of the two most expensive weather apps I’m recommending but this is a really fantastic piece of user interface design and a couple of unique features which make it a top pick. Notably it includes a customisable alert setting where you can ask the app to sound an alarm shortly before rain (or snow) is about to arrive at your location. You can even adjust it to only alert you when the rain is heavy, rather than moderate or light. I’d like to see this expanded to thunderstorm alerts. It also includes a mesmerising animated radar map – on a globe which you can rotate, and zoom in on.

 

 

4. Forecast.io – £0.79

forecast.io weather for iPhoneA beautifully designed app, especially the elegant animated icons. But I’ve found the actual forecasts to not be quite as accurate as our other apps so I’d recommend having a look at this weather app but don’t rely on it for deciding whether to plan a BBQ this weekend! This one actually feels very similar to Dark Sky – if anyone has any info on if these are related I’d love to know.

 

 

5. BBC Weather App – FREE

bbc weather app ukThe BBC weather app feels BBC, looks BBC and delivers reliable BBC forecasts. Sometimes wonderfully detailed and accurate – sometimes a shade off the mark but a great one to rely on and after all it’s FREE! It’s missing two things for me, an animated radar, probably the most useful bit of any weather app, and weather warnings should be delivered as push notificatioons too. One other thing, I’d also love to see the weather symbols fall off the screen occasionally. Or am I showing my age saying that?!

 

 

6. Met Office Weather – FREE

Met office app for iphoneThe Met Office weather app is appealing from the point of view it offers a unique interface compared to the other weather apps, includes localised weather alerts built in (as long as you have push notifications switched on) and is accurate, as you’d expect. From a personal point of view I don’t like the radar as much as our top two – it doesn’t feel as slick and zooming in feels awkward so when I’m trying to figure out if I should walk or drive to the park with the kids today I don’t rely on this app. I also don’t find the user interface quite as intuitive as some of the others. Defintely has it’s uses though and worth a look.

 

So in summary I’d say the best weather app for iPhone overall is WeatherPro, and that probably ties for best free weather app for iPhone with the BBC weather app. So which is the best weather radar app? I’d have to say that this is a tie between the Home and Dry app and Dark Sky.

Website Design, Wordpress

WordPress, Woocommerce Speed & How To Make Them Faster

I’ve been building a website using Woocommerce for the first time recently. It started off with less than 100 items and expanded to over 500 by the time we had finished. That’s still not many products at all but I began to notice some speed issues after a while and if they were bugging me they were definitely going to bug the customer once the site was live. {There is now an updated post on speeding up a WordPress site here.}

I started researching WordPress speed in general as I suspected it was an issue with the framework itself rather than Woocommerce, although more likely a combination of the two, and along the way I found some useful articles and tips which I thought I’d share.

To make your WordPress / Woocommerce site work faster you need to tackle 3 areas, in no particular order :

  1. Optimise your database
  2. Check your theme & code
  3. Check your plugins

Note – it goes without saying that you should backup everything before you start. If you don’t already have a WordPress back up solution then I’d recommend looking at either Backup Buddy or Updraft, both of which are really great, I’d say it’s just down to personal preference which one you choose.

1. Optimise Your Database

I found 2 really useful plugins for this. The first is called DB Optimise Plugin – http://cagewebdev.com/index.php/optimize-database-after-deleting-revisions-wordpress-plugin. It removes all redundant data from your database. Coupled with switching off WordPress revisions I noticed quite a speed improvement with this. If you want to switch off WordPress post revisions then add this line to your wp-config.php file:

define('WP_POST_REVISIONS',FALSE);

If you want to get more information on what this does please read more in the WordPress Codex.

The second plugin is called SQL Profiler – http://wordpress.org/extend/plugins/mysql-profiler/. Once installed and activated it will show you a list at the bottom of your page for every single database request made on that page, how long each query took and the total time. Crucially it also shows you where the request came from. In my case I discovered one of the Woocommerce plugins was taking a terribly long time to run a request that I didn’t even need.

2. Check your theme and code

Validate your code at http://validator.w3.org/ to get rid of any silly errors. Then really dig deep if you are using a third party theme and third party plugins. You may have paid good money for those but that does not mean they have been written well. A good tool here is Pingdom which tests the loading speed of your website and can often pinpoint a particular bottleneck. It shows you every external file the page has to load, for example javascript files, css stylesheets and images and tells you how long each took to load. It even breaks the information down further enabling you to figure out if your server is what’s slowing everything down.

My initial tests on the homepage of the site I was analysing gave me a loading speed of 6 seconds, which is way too slow. This led me to making a few changes as follows:

  • I merged as many css files as was comfortable
  • I removed all calls for unecessary css and js files from the functions.php file

3. Check Your Plugins

Make sure they are all up to date, it’s a simple step but if a plugin developer has found a bug they may well have released an uodate that fixes it and makes it work better.

4. Change your host

Check your site using Google PageSpeed Insights, if it shows server response time as one of your issues then you may want to look at changing your host. Try WPengine for managed scalable super fast hosting for WordPress websites.

So, Did It Work?

Yes. I’ve only gone through a few steps so far but I have reduced the page load time from 6 Seconds down to 3.5 Seconds. Still not good enough but I’m pretty happy with the progress so far, especially as I know there are quite a number of things I could still improve on that will bring the speed down much further. I will update this when I’ve completed the next stage.

This was a really useful article, he goes into more detail than I have – http://www.sdavismedia.com/page-speed/

Hacking M.E.D.I.C With The Wellcome Trust & Open Data
News, Website Design

Hacking M.E.D.I.C With The Wellcome Trust & Open Data

Last weekend I was lucky enough to join a great group of people at a Rewired State hack event for the Wellcome Trust. On a beautiful morning in London we were given access to a tonne of open science data and asked to show the Wellcome Trust what could be done with it.

Pretty quickly our team joined together with the idea to build a monitoring system for Intensive Care. Currently the existing monitoring equipment is plugged into a network and the data is saved (not everywhere, but increasingly so). We asked ourselves the question “what could we do if we centralised all that data?”. Our team included a couple of data analysts and they started discussing the possibility of finding ‘usefulness’ within the data. “Would we find any patterns in terms of vital statistic changes and mortality rates?”.mockup

Having access to this data is AMAZING not only because we can learn so much from it, but because we can DO so much with it.

So we set to it, the devs building the frontend and the framework, and the ‘data guys’ crunched numbers. It was so exciting when they started to realise that they had found some potential clues in the data – certain numbers changing in a certain direction seemed to point towards higher probability that the patient would die.

By combining the two ideas we came up with MEDIC – Monitoring & Early Detection in Intensive Care. We would pipe all of that live data into a central database and show a live representation of that patient on a screen so all their vital stats are instantly visible and instead of a zillion alarms going off if something does start to go wrong there would be one centralised alarm. This would reduce the possibility of alarm saturation, the phenomenon where so many alarms go off in the intensive care unit that they start to lose their significance.

By tying that together with the results of the data analysis, an algorithm, we could change the status of any of those patients to ‘warning’ should their stats be showing signs that from the historical data suggest their condition is likely to worsen soon.

A summary of the project can be found here – we were very proud to be awarded the Open Research prize.

I have to say we were really excited by the possibilities of this, having access to this data is AMAZING not only because we can learn so much from it, but because we can DO so much with it. Thank you fellow team members (Allen Lin, Ben Webb, Emily Christy, Florian Rathgeber, John Sandall, Matt Shawkat, Tom Pollard), thank you Rewired State and thank you Wellcome Trust. What a great weekend.

Wordpress

Fixing The Navigation Sorting For WordPress Custom Posts

While building Lightstorm, my soon to be released custom WordPress theme, I added next and previous links to the bottom of each individual custom post item. In this case I wanted to build a portfolio and to enable the user to click backwards or forwards through the entire portfolio. I added the WordPress next and previous links code thinking it was a nice easy job and then realised that the links were not taking our portfolio custom sorting into account. Oh.

Having googled the problem I couldn’t find exactly what I was looking for so I set about writing some of my own code to fix this and here it is for you to use to.


<?php 
	global $post;
	$prev_title = "";
	$next_title = "";
	
	$args = array(
    'orderby'         => 'menu_order',
    'order'           => 'ASC',
    'post_type'       => 'portfolio',
    'post_status'     => 'publish' ); 
    
	
    $myposts = get_posts( $args );
	$arr = array();
	
	foreach( $myposts as $post ) :	setup_postdata($post); 
		//build array of posts
		$arr[] += $post->ID;		
	endforeach;

	wp_reset_query();

	//find index of current post id in the array
	$currentIndex = array_search($post->ID, $arr);
	$prevIndex = $currentIndex-1;
	$nextIndex = $currentIndex+1;
	$maxNumber = count($arr) - 1;
	
	//show the links
	if($currentIndex != 0){
		$prevID = $arr[$prevIndex];
		$prev_title= "«« ".get_the_title($prevID);
		$prev_permalink = get_permalink($prevID);
	}


	if($currentIndex != $maxNumber){
		$nextID = $arr[$nextIndex];
		$next_title= get_the_title($nextID)." »»";
		$next_permalink = get_permalink($nextID);
	}
	
	echo "<div class='navigation'>";
	echo "<div class='five columns alpha'>";
	echo "<a href='".$prev_permalink."'>".$prev_title."</a>";
	echo "</div>";
	echo "<div class='five columns omega'>";
	echo "<a href='".$next_permalink."'>".$next_title."</a>";
	echo "</div>";
	echo "</div>";
?>

If there is a better way of doing this we’d love to know.

Using Freshbooks – Freelance Invoice Software & Expenses
Business

Using Freshbooks – Freelance Invoice Software & Expenses

It took me a while to get up and running with my accounts as a freelancer. Starting ‘the right way’ and keeping good records for both income and expenditure from the off avoids the horrible ‘oh my god my tax return is due in 1 day’ annual panic. I started researching freelance invoice software – I wish so much that I had found Freshbooks back when I started because it would have saved me a lot of grief.

Freshbooks is an online accounting system / recurring invoice system, is easy to use and very low monthly charges. Actually it’s free to start but presuming you have more than 2 clients you’ll be a paying customer. You set up your clients, set up your invoiceable items, and creating invoices is incredibly quick.

FreshBooks

You can also use it to keep track of your business expenses and can upload a scan of a receipt to attach to the expense. Because it has a record of your income and expenditure it also can produce a variety of accounts for you at the click of a button – instant profit and loss reports, yay!

On top of all of that you can use it for time tracking per project.

Wordpress

Find The Page Template Name In A WordPress Theme

While developing a custom WordPress theme recently I found myself in a situation where I needed to find out the name of the WordPress page template being used for the current page.

After searching the WordPress Codex I had found the code which enables you to check the page template by using a string comparison like this:

if( is_page_template( 'template-name.php' ) ) {
  //some code
}

….function but the file name I was passing it kept returning false.

I eventually found this code, which does exactly what I needed and returns the full file name of the template being used for the current page.

 $template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true ); 

Incidentally in case anyone else finds themselves in the same situation as me when I found out the full file name I was surprised – it was giving me a filename that no longer existed. So remember that if you rename a page template file you also need to go to each WordPress page that uses that template and reassign the template to it.

Wordpress

Protecting Yourself From Email Harvesters & Spam Email

None of us like getting an inbox full of spam mail and there are a few ways to show your email address on your website that can go some way towards fooling email harvesters.

One way is to replace the chracters in your addres with words. For example emily@acompany.com would be shown as emily {at} acompany {dot} com.

If you are using WordPress it has a built in function:

antispambot()

… which encodes your email address randomly. Really useful when it comes to keeping your inbox clean of junk!

Read more about protecting yourself from email harvesters.

Moo Rounded Corner Business Cards
Design

Moo Rounded Corner Business Cards

I’ve recently produced two sets of rounded corner business cards and had them printed by the ever brilliant Moo.com. This particular set were made for the hen party for a good friend of mine and the theme of the hen party was ‘Barbie’ – she has had so many hobbies over the years that it made us think of “Party Barbie”, “Hiking Barbie”, “Drinking Barbie” – you get the picture.



Trump Cards rounded corner business cardsI saw a fantastic graphic over at Graphic River and thought we could put together a fun set of trump cards for each of her Barbie personas and this was the result.

It was a fantastic hen weekend and the Barbie theme went down a storm! If you’d like a novelty set of cards designed contact us today for a quote.

If you want to set up your own account and start ordering your own fabulous business cards go and say hi to Moo.com to start the process.

Wordpress

Custom Widget Checkboxes Not Staying Checked

During the process of writing a few custom widgets for a custom WordPress theme I found a frustrating problem when using a checkbox as one of the widget options. The checkbox was functioning properly but when it was checked and then the widget options saved it was being unchecked.

The answer is really simple but I had a bit of trouble finding the solution – you have to make sure that the value saved is of the correct type, in this case a boolean as shown in the following code.


<input class="checkbox" type="checkbox" <?php checked( (bool) $instance['photo'], true ); ? > id="<?php echo $this->get_field_id( 'photo' ); ?>" name="<?php echo $this->get_field_name( 'photo' ); ? >" / > 

News, Wordpress

Showing The Active Page With The WordPress Menu Walker

Just the same as many other WordPress developers when it came to building and modifying themes I really needed to be able to customise the menu. I found a few tutorials on extending the WordPress Walker to add a button description, most notably this one by Kriesi but I couldn’t find too much about showing the active page.

To start with what is the Walker class? I’ll let the WordPress Codex explain:

The Walker class encapsulates the basic functionality necessary to output HTML representing WordPress objects with a tree structure. For instance, pages and categories are the two types of objects that the WordPress 2.2 code uses the Walker class to enumerate.

There are two parts to getting this to work. Firstly including the code in the custom menu walker class to ensure the correct WordPress classes are assigned to your button. WordPress already adds a unique class to the active item, we just need to make sure it is also added in our class.


$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names .= in_array("current_page_item",$item->classes) ? ' active' : '';
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

The second part is simply to add the appropriate style to our css file:


#menu-main li.active{
 border-bottom: 4px solid #00CCFF;
}

And that is it 🙂

If you’d like a copy of the full navigation class shoot me an email and I’ll send you the file.

The Importance Of Backing Up Your Computer
Business

The Importance Of Backing Up Your Computer

There is nothing like learning the hard way when it comes to backing up your computer. That’s what I did 5 years ago when I tripped over the cable of my laptop and watched it bounce on the tiled floor, as bits of keyboard rolled across the kitchen. On picking it up the screen flickered, then showed me the blue screen of death, closely followed by nothing. Absolutely nothing.

To cut a long story short I enlisted the help of a professional data recovery company but they couldn’t recover a thing so I lost every single thing on my laptop included some incredibly sentimental photos that I could never replace. So lesson learned I bought a new laptop and decided the first thing I should do was get regular backups set up.

The only backups I’d ever heard of at that point were the ones that copied selected files and folders once a week onto an external hard disk drive. I don’t remember where I first heard about Backblaze but one way or another I stumbled upon their website and signed up for the free trial of their online backups system.

After the easy installation my computer was being backed up, while I worked. And it wasn’t being backed up once a day it was being backed up all the time. Anytime I buy a new computer now the first thing I do is install Backblaze. For simple backups for small businesses I really can’t recommend it enough.

Go and take a look for yourself.

A Weekend Working With Hondas Cultural Engineers
News

A Weekend Working With Hondas Cultural Engineers

I spent last weekend working with 22 other developers and creatives from around the country and most of Hondas Cultural Engineers. It was a privilege to be involved in this fantastic event – ‘Power Of Minds’ run by Rewired State and Honda’s Dream Factory.

My team (Matthew Applegate, Sym Roe, Kevin Fong, Emily Christy) came up with BikeAlert which was one of 4 projects to be selected to go forward for public voting. We won the design category and will shortly be available for the public to vote for it to receive some funding from Honda to take the idea further. In a nutshell this was our design concept.

  • Each year over 40% of the many cycling accidents (many fatal) can be attributed to a single problem – a large vehicle turning left and being unaware of a cyclist in their blind spot.
  • BikeAlert aims to solve this problem.

Each bike would be fitted with a tiny transmitter uniquely encoded to only interact with the BikeAlert receivers. The receiver (in the vehicle) can see the signal and knows a bike is is very close and potentially in a dangerous position.

Sensors take over for further positional data along with integration with on board speakers for further positional information which crucially is not distracting for the driver. The receiver would also tie in with road accident data to provide simple but vital warnings to the driver.

Update

We won a prize from Honda to try and develop the idea further! When there is more news we will update this blog.