Design Services

Logo & corporate stationery design

Project shown is Fox IT

Design Services

Logo, business cards, website & brand guidelines

Project shown is Jarred Consulting

Website Design

User friendly websites

Project shown is Firstford

Build your website

I build most websites using WordPress*, an open source content management system, so that you have full control over your website content. Every website I build is, by default, optimised for search engines and built to be responsive.

Design your branding

I can manage the branding process for your business, whether it be a new logo, or a full set of branded business stationery and digital designs. You may want a cohesive set of branded social media accounts, or a design for your fleet of vehicles.

Market your business

Your new website will only feel like a good return on investment if you get enquiries or orders from it. It’s a good idea to budget for at least 2-3 months SEO marketing to build your search traffic.

Contact me to discuss your next creative project

Contact me →

Recent posts

Wordpress and design blog posts


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!