DEV Community: Andrew Smith

The trend of web performance and the rise of static-site generators, with Gatsby.js, GraphQL and React.js tutorial.

Andrew Smith — Tue, 10 Sep 2019 08:49:17 +0000

The trend of web performance and the rise of static-site generators, with Gatsby.js,

Out of all the trends in today’s age of web development, the trend of high-end web performance is the one trend that singlehandedly offers the most reward and payoff to both users and web developers alike; with everyday users now expecting websites to offer blazingly fast page speeds, minimal loading times and an engaging and satisfying user experience with absolutely zero frustration.

Over the recent years we’ve seen this expectation fulfilled. As we constantly push the web to do more and more, and add more features to our applications, we begin to see a serious drop in website performance. But with web technologies such as PWAs (progressive web apps), service workers and static site generators combatting this, and ushering out the days of long native application load times and frustrating delays, developers are able to create fast, efficient and reliable applications that offer outstanding web experiences, with little development time.

The bottom line is that performance matters, and Google’s consistent push on this front with its Lighthouse services for PWAs and Accelerated Mobile Pages (AMP) really show how the industry big-boys are now prioritising web performance, and how we all should too.

Google even gives us the stats to back this up. For example, Pinterest increased search engine traffic and sign-ups by 15% when they reduced wait times by 40% (1), and the BBC discovered that they lost an additional 10% of users for every additional second that their website took to load (2).

In particular, due to their blazingly fast page speeds, enhanced security and simple development, deployment and hosting, many web developers are turning to static site generators as a way of building their websites whilst simultaneously achieving their web performance goals.

So, what is a static site generator?

A common misconception with static sites are that they are a new technology, when in fact they’ve been around for years. Static sites were the original method of web development, where vanilla HTML, CSS and JavaScript were used to build websites, featuring no front-end frameworks, libraries or plugins.

Static site generators themselves focus on generating vanilla HTML, CSS and JavaScript sites as the complete output, without any links to databases or server-side processing (thus making their load speeds very fast). These static HTML files are generated by the server and are ready to be returned to the browser. With the ability for static site generators to pull data from anywhere, including a wide range of CMS, APIs and content files.

What are the perks of using static site generators?

Speed. Due to the lack of any back-end system actually delivering the website, no database queries need to be run and no client-server requests need to be processed, and with the server always having the HTML output ready to be delivered to a user, the performance of static sites are often blazingly fast. Furthermore, many static site generators have caching features that further cut down on delays. Essentially, all the server has to do is return a file, which turns out, it’s pretty good at doing quickly…
Security. Again due to the lack of a back-end system, a static site has no database that can be attacked or exploited, there are no plugins or extensions that can be used as routes into a system and there are no areas that anyone can gain unauthorised access to. WordPress (which powers a whopping 34% of websites on the internet) is infamous for being exploited and having security vulnerabilities, but with static sites there isn’t really much damage that anyone can do to a set of plain HTML files.
Robust. Yet another JAMstack perk of having no back-end system. Deployment and scaling of a static site is much simpler, and the application as a whole is generally more stable and robust as a server is actually able to handle a lot of traffic only requesting simple static files.
Ease of development. Static site generators significantly ease the process of development. It’s super easy to get things up and running, with minimal setup and configuration, and once the site is written it’s often just a simple command to deploy the site.
SEO. It’s often the case that web crawlers can’t read complex React.js or Vue.js applications with hundreds of components, which puts them right at the bottom of the SEO barrel. But when your content is static, and you have great page speeds and performance, then you’re sure to be well-off on the SEO front.

What are the drawbacks of using static site generators?

Real-time applications. As the site is restricted to a single set of static HTML files that are generated upon every request, there’s currently no ability for creating an application that hosts real-time data. So say goodbye to any applications that require functionality such as auto-updating news stories, live commenting, live data or any form of messaging applications.

Enter Gatsby.js

Gatsby.js is an open source framework for generating static sites. Based on the JAMstack (https://jamstack.org). Gatsby uses React.js as the front-end framework of choice and GraphQL to power its data layer; ultimately allowing Gatsby to pull data in from a range of sources (basically anywhere) including CMSs such as WordPress, Drupal and Craft CMS, simple markdown files consisting of meta data, fully fledged databases and APIs or local files.

Gatsby also has a tonne of plugins for extending its functionality. Gatsby uses 2 types of plugins, source plugins for “sourcing” data into the application, such as pulling in data from CMSs such as WordPress, and transformer plugins which “transform” data from source plugins into some new data, such as lazy loading images.

React.js

Gatsby uses React.js for building the website’s user interfaces, it’s fast and pretty nice actually (I’m a bit of a React and React Native fanboy), and according to Stack Overflow’s most recent developer survey, is the web framework of choice for 31.3% of developers, is the most loved framework by 74.5% of developers and ranks top as the most wanted web framework.

GraphQL

Gatsby uses GraphQL for its data layer. Originally created by Facebook, GraphQL will allow us to pull data into our website. GraphQL is really powerful, and yields really elegant and efficient solutions. More on GraphQL later.

The Tutorial

In this tutorial we’ll be using Gatsby.js, a popular static site generator used by companies such as AirBnB and Nike. Gatsby.js utilises React.js and GraphQL, and in this tutorial we’ll be building a simple website that displays information about Star Wars films and characters (nerd alert), and then we’ll use Gatbsy.js to output a complete static website, that generates itself during build time whenever a user visits it.

The project we’ll be creating to show the power of Gatsby.js is a simple application that pulls data in from the Star Wars API (SWAPI — https://github.com/graphql/swapi-graphql) and displays content on films and characters from the franchise/universe. We’ll have a simple index page listing films and characters and we’ll be using a simple card layout for displaying each piece of content on the index page.

Gatbsy’s role here involves querying the API and building the static site at runtime (whenever anybody visits the website), resulting in an ultra-fast dynamic set of web pages that load almost instantaneously. Furthermore, when new content is added to the Star Wars API, the static site will automatically pull this new content in and regenerate itself; ultimately creating a somewhat hybrid dynamic-static site.

Step 1 — Installing Gatsby.js

Firstly we’ll need to install Node.js, if you’ve already done this then skip this step, if not then go to https://nodejs.org/en/download/.

Next, we’ll need to use NPM to install the Gatsby.js CLI (command line interface), this will make it easier to create and manage Gatsby projects:

npm install -g gatsby-cli

For reference, you can see all the Gatsby commands available to us by running:

gatsby --help

Gatsby come with a bunch of pre-built project configurations/starter templates that make creating Gatsby projects really simple. We’ll be using the “Hello World” start template, so to create our new Gatsby project run the gatsby new command with the name of our project, then the starter template we’ll be using:

gatsby new star-wars-app [https://github.com/gatsbyjs/gatsby-starter-hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world)

This will create the basic starter project for us, so run the following commands to start developing the application:

cd star-wars-app
gatsby develop

Then if you head to http://localhost:8000 you’ll see your Gatsby project with a blank hello world template!

Step 2 — Creating our templates

Open up the project in your text editor of choice, I’ll be using VS Code. Open up the /src folder, and inside this there will be a directory called pages. As you’ve probably guessed, here is where all content pages on the site will be held. As we’ve used a starter template, they’ll be a single index.js file that will have a single “hello world” component message in it. Remove this, as we’ll be creating our own components which are used on the index page.

It’s worth noting that Gatsby has the super cool createPage API where you can automatically generate pages based on data, so in theory we could automatically and dynamically create individual film and character pages for all films and characters that we get back from the API. This is a really powerful feature, that really puts Gatsby at the forefront of static site generators, and when leveraged properly can result in a complete website created with minimal coding time. Pretty cool, eh? But for this tutorial we’ll just be using a single index page.

Next, we’ll need to create a folder to create our components. So create a new directory at src called components. So your project structure should be as follows:

src
 pages
   index.js
 components

We’ll be creating two list components, one for the list of films and one for the list of characters. Then we’ll be creating two card components, one to show basic information on each film and one to show information on each character.

Both the films list and characters list components will be shown on the homepage (index.js) and then each list component will show multiple card components.

Firstly, let’s create the films component by creating a filmsList.js file at src/components/films with the following React code:

Here we begin by importing our film card component that we’ll create later, as well as importing React and a scoped CSS module containing styles for our cards, which again we’ll be creating later.

import React from “react”
import FilmCard from ‘./filmCard.js’;
import styles from “../card.module.css”

Then we’re going to use the cards list prop that will be passed through by our index.js file (we’ll get to this later) to create a new array of cards, using the .map() operator. We’ll store all our cards in a constant called “cards”, ready to inject into our

element.

const cards = this.props.films.map((film, index) =>
    <li className={styles.film__card} key={film.id}>
        <FilmCard film={film} />
    </li>
);

Each new card component created in this loop creates a new FilmCard component and passes its film data (such as title, episode number, release date etc) down to it as a prop. We then return a list of cards inside an unordered list element:

return <ul className={styles.cards__container}>{ cards }</ul>;

Next, let’s create a filmCard.js file at src/components/films with the following:

Here we’re just creating a card component that will simply show the data that we’ll be returning from the API, such as the episode number, title, director and the opening crawl for that movie. Later on we’ll be coming to how we actually get that data:

<div>

<h1 className={styles.card__title}>#{this.props.film.episodeId} — {this.props.film.title}</h1>

<h5 className={styles.card__subtitle}>Release Date: <span className={styles.card__copy}>{new Date(this.props.film.releaseDate).toLocaleDateString(“en-US”)}</span></h5>

<h5 className={styles.card__subtitle}>Director: <span className={styles.card__copy}>{this.props.film.director}</span></h5>

<h5 className={styles.card__subtitle}>Opening Crawl: <span className={styles.card__copy}>{this.props.film.openingCrawl}</span></h5>

</div>

We’re following a generic reusable style theme by using the classes card_title, cardsubtitle, card_copy. Nothing too fancy.

One thing worth noting is that we’re formatting the film’s release date using

.toLocaleDateString("en-US");

This is because the API returns a JavaScript date object, and we want it to look pretty on our static site 😇.

Now we’ve got our film components in, we’ll do the same for our character components. Which follow very similarly to our film components.

And the same for characterCard.js:

Both sets of components FilmList and CharacterList, and FilmCard and CharacterCard are very similar. The List components just display a list containing multiple cards, and the Card components just show various pieces of information.

It’s worth noting here that the last bit of data we’re displaying is a list of starships for that character, we’ll be getting an array down from the API so again we’re just using the .map() operator to form a new array of list elements containing just the starship’s name.

The structure of the project so far should be as follows:

src
 pages
   index.js
 components
   films
     filmList.js   
     filmCard.js
   characters
     characterList.js
     characterCard.js

Next we’ll head back to the index.js file and import both the FilmList and CharacterList components at the top, so that we can view them:

Here, we’re creating our home page component, with 2 arrays of objects containing information about the data on films and characters that we’re going to show. Don’t worry, we’ll be seeing this data later when we pull it in from the SWAPI by GraphQL.

Now we’ll quickly add some styling to our static site.

As we’re using scoped styling, so we’ll create a file inside our components folder called card.module.css. We’ll be using a number of styles such as title, subtitle, list and copy that we’ll reuse across both film and character cards.

So add the following code styling to the file:

Again these styles aren’t massively relevant to the project, they’ll just give us something nice to look at!

Also create a file called global.css at src/styles and paste in the following:

This file is a global styles file that will be used across the entire site, here we’re just adding in some basic styles such as the font family.

So the card.module.css file will contain all styles relating to cards, and the global.css file will contain all styles relating to the application itself.

You may wonder about the “stars” and “twinkling” div inside the index.js file… this is just to create an animation background of stars twinkling on a black sky background, very nerdy… I know. ✨

Step 3—Plugging in GraphQL

So far we’ve not got any data showing in our templates. But now we’ll look into using GraphQL to pull in our data from the SWAPI.

It’s worth noting however that GraphQL isn’t the only way to pull data into a Gatsby application. Another powerful feature of Gatbsy is that you can pull data from a variety of sources such as markdown files and JSON files, or you can extend Gatsby with source plugins that allow you to query data from CMSs such as WordPress and Craft CMS.

First, we need to install the GraphQL NPM package for the application:

npm install --save gatsby-source-graphql

Then we add the following options to our gatsby-config.js file:

The above just allows us to call the API, and it defines what field we can access the data by (swapi).

Moving back to our index.js file we need to define the actual query that we’ll be using to retrieve data from the API.

The beautiful thing about GraphQL is that we can literally specify the exact field names of the information that we want. Rather than returning a massive JSON object full of values, we can specify what exactly we want. We’ll add the following code to our index.js file, which is the query that GraphQL will use to retrieve data from the API:

The above GraphQL query should be quite self-explanatory. It specifies the information that we want from the SWAPI, including nested data in child objects.

There’s a lot more data available to us, in fact there’s whole host of data about far more Star Wars things than films and characters and you can find the full list here: https://graphiql.graphcms.com/simple/v1/swapi as well as test out any GraphQL queries here too. But for the purpose of this tutorial we’ll just get basic information on films and characters.

You can really see the power of GraphQL here, we only request the necessary information from the API instead of returning all information about a film object. We simply just dictate what we want in a predictable and robust manner. GraphQL also has the added benefit that we can returning many resources in a simple request, so instead of completing an additional request to get information on the starships of a character (like we would in a traditional REST API), we can simply append starships onto the end of our characters query. In one simple query we can get a whole host of information from a variety of sources, rather than running multiple separate API calls #GoJamStack

So, your index.js file should now look like this, with the added query:

Now we’ve got our query in, we’ll go over our index.js file from earlier and I’ll explain.

Firstly we’re binding the data retrieved by the API to our template:

const {swapi: { allFilms, allPersons }} = this.props.data;

Then we’re passing these data bindings to our FilmList component:

<FilmList films={allFilms} />

And the CharacterList:

<CharacterList characters={allPersons} />

As you’ll notice here, our earlier bindings to the allFilms and allPersons results are now being used as “films” and “characters” props down to the list components we created earlier.

We’re also using the following 2 divs to show a fancy twinkling star background in light of our Star Wars theme.

<div className="stars"></div>

<div className="twinkling"></div>

Now that we’re pulling in the SWAPI data using GraphQL, if you console.log() allFilms and allPersons out you should see the following JSON data in the console:

Which means our GraphQL query to the SWAPI is successful!

You’ve seen that from index.js we’re passing our film and character data through to our FilmsList and CharacterList. Below is what our FilmsList component looks like. Here we’re simply just receiving the card props from the parent component (index.js) and creating a new array of FilmCard components with it, then we’re displaying the cards inside an

This is the same for our CharacterList component

In our FilmCard component we’ll just display the information we’ve pulled from the API:

And in the character card component we’ll just do the same for character related information:

Now we should have a working local website that queries the SWAPI for Star Wars films and characters, passes these results into a list component, which in turn loops through all films and all characters to create card components displaying the information on said films and characters.

There’s plenty of expansion that could be done to this project, as mentioned earlier there’s a whole host of other Star Wars related information that we could query for and show, and we could even look at dynamically creating pages from the API. But we’ll break off here and build a production version of our site, which would be used to generate the static pages.

A full version of this project can be seen at: https://github.com/andrewsmith1996/gatsby-js-star-wars-app

Step 4— Building for Production

Now that our site is complete, we’ll build it for production.

First we’ll stop our development serve, and we’ll run the following command:

gatsby build

Then we can view our production site locally to double check that everything is okay:

gatsby serve

Now we have a production build of our Gatsby site, ready to go live.

To prove how fast Gatsby sites really are we’ll run a Google Lighthouse audit, which will give us back some information on page speeds and performance. Google recommends using this as a way to assess the performance of PWA.

Open the site in incognito mode in Google Chrome, and go over to the Audit tab and click “perform audit”.

Once the audit has completed, you should see the following statistics about our site:

The above statistics really do show how well Gatsby performs and how fast it can run due to only returning static content, ultimately conforming to our trend of high-end web performance. Especially given that we’re doing API calls to an external service at runtime.

Conclusion

So, we’ve created our sample application in Gatsby, and we’ve seen how powerful, fast and efficient a static site can be and how they can be created with bare minimal code and setup.

We’ve seen how React can be utilised to maintain the aspect of building a single page application and how GraphQL can be a really elegant solution in terms of querying data for your application. Gatsby.js isn’t the only static site generator that’s out there, there’s Jekyll, Hugo and Gridsome (for Vue.js), which people are saying good things about. But Gatsby.js is a great choice for creating super efficient and extremely fast sites straight off the bat, and with the ability for Gabsty to be extended with plugins, the wide range of data sources that Gatsby can pull from and the ability to dynamically create pages from data with just a few lines of code using its createPage API really set it out there as a top static site generator.

Static site generators are sure to continue growing, and as the trend of ultra high-end web performance emerges with applications such as PWAs and serverless systems, and the JAMstack becomes more and more popular in the field of web development we’re going to move into a new era of ultra-fast, performance-centred, security conscious client side applications that offer a great experience for both users and developers.

References:

1: https://medium.com/pinterest-engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7

2: https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale

How to build an Geolocation Weather Forecast app in React Native in 30 minutes

Andrew Smith — Wed, 19 Sep 2018 13:35:43 +0000

Following on from my last guide on how to create an Image Recognition app in React Native (https://dev.to/andrewsmith1996/how-to-build-an-image-recognition-app-in-react-native-m6g) I'm going to write a guide on how to build a simple Geolocation Weather Forecast app in React Native (in under 30 minutes, ofcourse)

We'll be building a simple app that uses a mobile phone's Geolocation functionality to take a user's location, then pass the latitude and longitude of the location to Open Weather Map's Weather API, which will give us a 5 day weather forecast (split into 3 hour chunks) for that location.

The Weather API is free, and you'll need to grab your key to use the app at https://openweathermap.org/api

This tutorial presumes you have NodeJS and React Native installed. If you don't then head over to https://facebook.github.io/react-native/docs/getting-started.html to get started. It also presumes you have a basic understanding of React and NodeJS.

What we'll build

We'll only actually be creating 1 extra React component here, and that's the actual card that will show each 3 hour block of weather forecast on.

Let's begin

Firstly, you'll need to initialise a new React Native app.

react-native init geolocationWeatherReactNative

Then CD into your new React Native projects directory, and run the following command to boot up the iOS simulator.

cd geolocationWeatherReactNative
react-native run-ios

Next we'll want to install React Native Elements, which is a React Native UI Toolkit that'll provide us with a Card component often seen in mobile apps. We'll also install the vector icons library that's needed to use the Card elements.

npm install --save react-native-elements

npm install react-native-vector-icons --save

Then we'll want to link our new library up

react-native link react-native-vector-icons

We'll also need to add a NSLocationWhenInUseUsageDescription in the Info.plist file otherwise the app will crash. This is just a small description where you state how your app is going to use the location services. So add the following to your Info.plist file in the iOS folder for the project.

<key>NSLocationWhenInUseUsageDescription</key>
<string>YOUR DESCRIPTION HERE</string>

We'll also need to add the following to your AndroidManifest.xml for the same reasons

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Now you're pretty much all setup.

Firstly, we want to build our card component which will be reused to display the forecasted weather details for every 3 hours.

ForecastCard.js

So create a folder called 'components' and inside this create a ForecastCard.js file.

At the top of the page, we'll want to import React, as well as the StyleSheet, View and Image modules from React Native, as we'll be using these later on.

We also need to import the Card component from the React Native Elements library we installed.

import React, {Component} from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { Text, Card, Divider } from 'react-native-elements';

Firstly we need to setup the ForecastCard's class


export default class ForecastCard extends Component {


}

We're not using any state in this component, it'll just render props that we pass to it from the App parent component, so no need to add a constructor here.

Inside the render function of the ForecastCard's class we'll want to add the following code to render a blank card for the time being.

return (
    <Card containerStyle={styles.card}>

    </Card>
);

Then add the following style to the card, or feel free to add your own.

card:{
    backgroundColor:'rgba(56, 172, 236, 1)',
    borderWidth:0,
    borderRadius:20
}

App.js

Now let's head back to App.js and start working on the App's functionality.

So let's import all the modules we need:

import React, {Component} from 'react';
import { FlatList } from 'react-native';

Notice we're importing FlatList, this is a React Native component that we'll be using later on to render a list of items (the ForecastCards)

We'll be using 4 variables of state:

The longitude of the user's location
The latitude of the user's location
The forecast returned from the API
An error string indicating if there's been an error in the API response

And then initialise these in the constructor for the class

constructor(props){
    super(props);

    this.state = {
        latitude: 0,
        longitude: 0,
        forecast: [],
        error:''
    };

Next we'll create the function that'll user Geolocation to return a user's position. So setup a getLocation() function with the following code.

getLocation(){

    // Get the current position of the user
    navigator.geolocation.getCurrentPosition(
    (position) => {
        this.setState(
        (prevState) => ({
            latitude: position.coords.latitude, 
            longitude: position.coords.longitude
            }), () => { this.getWeather(); }
        );
    },
        (error) => this.setState({ forecast: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
}

This code simply uses the built in Geolocation services to get the user's current position and then sets the state of the latitude and longitude to the response. Then as setState() is an asynchronous operation, we've added a callback that calls the getWeather() function, which we'll set up next.

So now that we've got the location of the user stored in the state of the application, we'll use this data to pass it the Weather API to get the forecast for that area.

So setup a getWeather() function:

    getWeather(){

        // Construct the API url to call
        let url = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + this.state.latitude + '&lon=' + this.state.longitude + '&units=metric&appid=YOUR API KEY HERE';

        // Call the API, and set the state of the weather forecast
        fetch(url)
        .then(response => response.json())
        .then(data => {
            this.setState((prevState, props) => ({
                forecast: data
        }));
        })
    }

In the above, we're constructing a URL string that calls the Weather API's forecast service, and then we're appending the latitude and longitude that we've got stored in the state of the class. After that we're appending the units parameter, to specify that we want the units to be metric, and then we're appending our API key to the end.

Now that we've got a URL to call, we'll call it using the fetch() method, and using the JSON data to set the state of the forecast variable.

This will set the state of the forecast to be an array containing 5 days worth of forecast entries for that location.

Next we'll be using React Native's FlatList component to render a list of cards down the mobile screen:

render() {
    return (
        <FlatList data={this.state.forecast.list} style={{marginTop:20}} keyExtractor={item => item.dt_text} renderItem={({item}) => <ForecastCard detail={item} location={this.state.forecast.city.name} />} />
    );
}

The FlatList component (https://facebook.github.io/react-native/docs/flatlist) takes multiple props, firstly we'll provide it with 'data' which is the forecast that we've got stored in state, then we'll point it the 'list' part of the JSON response as this contains each 3 hour block of forecast. Then we'll push the list down by 20px by using the style props, then the keyExtractor props forces the list to use the ids for the keys, rather than the default 'key' props we see in lists (in this case we're giving it the timestamp of the weather forecast item as a unique identifier)

The following line is where we actually tell React what we want the FlatList to render:

renderItem={({item}) => <ForecastCard detail={item} location={this.state.forecast.city.name} />}

Here we're telling it to render the list with our ForecastCard components we've created.

However first we need to import it at the top of the App.js file:

import ForecastCard from './components/ForecastCard';

We're passing it 2 props, detail and location. Detail is basically each iteration of 3 hour weather forecast that we've got from the JSON response from the API call, this means we can access each block of data in each card. Then location is the part of the JSON response that contains the city that the weather forecast is for.

Now we've got the FlatList setup so we can simply pass all the props through to the ForecastCard.js component we've created.

ForecastCard.js

Now we'll add into each card a title, containing the location. For this we'll use the React Native text element, and display the props we're passing to it.

<Text style={styles.notes}>{this.props.location}</Text>

Then we'll add the image and time using a View component, and Flexbox to position them on each side:

<View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center'}}>
    <Image style={{width:100, height:100}} source={{uri:"https://openweathermap.org/img/w/" + this.props.detail.weather[0].icon + ".png"}} />
    <Text style={styles.time}>{time}</Text>
</View>

Notice how we're using the Image Component and passing it the props of the image URL picked out from the JSON response.

<Image style={{width:100, height:100}} source={{uri:"https://openweathermap.org/img/w/" + this.props.detail.weather[0].icon + ".png"}} />

For displaying the time, we're using a variable. We're doing this so we can turn the datestamp into a format that's more user friendly and just has the time. So inside the render function, just before the return statement we'll add this:

let time;

// Create a new date from the passed date time
var date = new Date(this.props.detail.dt*1000);

// Hours part from the timestamp
var hours = date.getHours();

// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();

time = hours + ':' + minutes.substr(-2);

This will just format our date stamp into a nice easy to read hour format.

Next to add out divider line we'll use the Divider component, and give it a colour and a little bit of spacing.

<Divider style={{ backgroundColor: '#dfe6e9', marginVertical:20}} />

Then the final part of our Card component will be the description and the temperature:

<View style={{flexDirection:'row', justifyContent:'space-between'}}>
    <Text style={styles.notes}>{this.props.detail.weather[0].description}</Text>
    <Text style={styles.notes}>{Math.round( this.props.detail.main.temp * 10) / 10 }&#8451;</Text>
</View>

Again we'll be using flexDirection and justifyContent to space them at either side of the card. We'll be using 2 Text components, the first to display the part of the JSON response that has the text description in, then the second Text element contains the temperature part of the JSON response, rounded to 1 decimal place to get a nice formatted temperature. Then we'll add the HTML entity

&#8451;

to add the Celsius symbol.

Then to style it we'll add the following:


const styles = StyleSheet.create({
    time:{
        fontSize:38
    },
    notes: {
        fontSize: 18,
        textTransform:'capitalize'
    }
});

So overall, we've covered how you can use a FlatList to render a list of Cards, and how you can use Geolocation to get coordinates and how to use this with a Weather API to get a JSON response with the weather forecast for that given location.

We've also utilised a number of new React Native components, such as Images and FlatLists, as well as an introduction to the React Native Elements library, and how to use Cards and Dividers.

So simply connect up your phone, and open the Xcode project in Xcode to get it onto your device to give it a test.

The source code for this app is available here on Github https://github.com/andrewsmith1996/geolocationWeatherReactNative, and is also showcased on my portfolio here https://andrewsmithdeveloper.com

I hope you enjoyed this post, and if you have any questions at all or feedback on my post, code or anything then let me know!

How to build an image recognition app in React Native in 30 minutes

Andrew Smith — Tue, 04 Sep 2018 09:20:52 +0000

For a few months now I've been fascinated by React Native, and having already done some development in the Ionic framework I was excited by how well an app that renders through native components rather than a webview performs.

We'll be building a simple app that uses React Native's camera component (https://github.com/react-native-community/react-native-camera) to take a picture, then passes the Base64 representation of this image to the free Clarifai Predict image API (https://clarifai.com/) to get a description of what's in the image.

The Clarifai API is free, really simple to setup and use and will allow us to get a description from what's in an image.

You'll also need to grab your free Clarifai API key from https://clarifai.com/developer/account/signup

What we'll build

We'll be creating 2 React components ourselves:

A camera preview component, which renders the built in React Native Camera component. This will handle the camera's preview and contain all the logic for identifying what's in the image
A capture button component which handles the user pressing the button to take the picture, as well as the disabled state of the button.

Let's begin

Firstly, you'll need to initialise a new React Native app.

react-native init imageRecogitionReactNativeDemo

Then CD into your new React Native projects directory, and run the following command to boot up the iOS simulator.

cd imageRecogitionReactNativeDemo
react-native run-ios

Next we'll want to install the built in React Native Camera component that we'll be using

npm install react-native-camera --save~

Then we'll want to link our new library up

react-native link react-native-camera

You'll also want to install Clarifai too, which is what we'll be passing our images to to get the identification.

npm install clarifai

We'll also need to add a NSCameraUsageDescription in the Info.plist file otherwise the app will crash. This is just a small description where you state how your app is going to use the camera. So add the following to your Info.plist file in the iOS folder for the project.

<key>NSCameraUsageDescription</key>
<string>This app requires the camera to take an image to be identified</string>

Now you're pretty much all setup, so you're ready to build our 2 components.

Firstly, we want to build our camera component which will hold everything else.

So create a folder called 'components' and inside this create a Camera.js file.

At the top of the page, we'll want to import React, as well as the Dimensions, Alert, StyleSheet and ActivityIndicator modules from React Native to use.

import React from 'react';
import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';

Then we'll want to actually import the React Native Camera module we've installed via NPM.

import { RNCamera } from 'react-native-camera';

We'll also import our Capture button component, but we'll come to that later.

Setup the Camera's class


export default class Camera extends React.Component {

}

Next we'll want to setup the state of our camera component, so create a constructor for the Camera class. We'll need to set 2 variables of state

The text we want to show in an alert containing the word of what's been identified in the image (which I've called identifiedAs)
A boolean value to determine whether the camera is in a loading state (for use with the activity indicator when we're identifying what's in the image).

So your constructor should look like this

constructor(props){
    super(props);

    this.state = { 
        identifedAs: '',
        loading: false
    }
}

Inside the render function of the Camera class we'll want to add the following code, from the React Native Camera component docs. This will just loading up the built in Camera component from React Native.

<RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}></RNCamera>

Now let's add the button to take the picture, for this we'll create a whole new component.

Go ahead and create a CaptureButton.js component inside your components folder.

Inside here we'll want to import the Button and TouchableHighlight components from React Native. As well as the default StyleSheet module and React.

import React  from 'react';
import { StyleSheet, Button, TouchableHighlight } from 'react-native';

Then inside the render function for this class, we'll add a TouchableHighlight component (https://facebook.github.io/react-native/docs/touchablehighlight) with a Button component inside, to get the default iOS and Android styling. We'll also add our own styles via the default style prop. We'll also need to use the disabled prop, which takes a prop we've passed down from the state of the parent Camera.js component.

<TouchableHighlight style={styles.captureButton} disabled={this.props.buttonDisabled}>
    <Button onPress={this.props.onClick} disabled={this.props.buttonDisabled} title="Capture" accessibilityLabel="Learn more about this button"/>
</TouchableHighlight>

We'll want to add a press event to this Button too, so that it knows what to do when the user presses it (i.e take the picture and identify from it). For this we'll add an onPress event and give it the props from the parent Camera.js component we had earlier, which is a function inside Camera.js.

We'll also want to disable the button when it's been clicked, so for this again we'll use some props passed down from the Camera.js component, as it's ultimately the camera component that determines the state of whether a picture is being taken, rather than the button.

Let's also add some styling for the button, to just and push it up and give it a background and some rounded corners.

const styles = StyleSheet.create({
    captureButton: {
        marginBottom:30,
        width:160,
        borderRadius:10,
        backgroundColor: "white",
    }
});

Then simply add this style into the style prop of the TouchableHighlight component

style={styles.captureButton}

So overall, your Button.js should look like this

import React  from 'react';
import { StyleSheet, Button, TouchableHighlight } from 'react-native';

export default class CaptureButton extends React.Component {
    render() {
        return (
            <TouchableHighlight style={styles.captureButton} disabled {this.props.buttonDisabled}>
                <Button onPress={this.props.onClick} disabled={this.props.buttonDisabled} title="Capture" accessibilityLabel="Learn more about this button"/>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    captureButton: {
        marginBottom:30,
        width:160,
        borderRadius:10,
        backgroundColor: "white"
    }
});

Now heading back to your Camera.js component, your render function should be looking like this. We've added some styling for the preview area to via the style props, and we've added our own buttonDisabled props which sends the loading state of the camera down to the child button component. We've also added our onClick props too, and bound this to the takePicture() function.

render() {
    return (
        <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
        </RNCamera>
    );
}

We'll want to add an Activity Indicator (https://facebook.github.io/react-native/docs/activityindicator) to show the user that the image is being identified.

So for this let's use React Native's Activity Indicator component, which we imported earlier.

<ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>

For this we'll want to use the default animating prop and set it the loading state of the class so that when the state is updated the ActivityIndicator will be shown/hidden accordingly.

So overall, having added our ActivityIndicator and our own Capture Button component, the render function of your Camera.js component should look like this

render() {
    return (
        <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
        </RNCamera>
    );
}

We'll also add some styling via the StyleSheet module to center the camera's preview and the loading indicator, we'll use the Dimensions import to dynamically make the camera preview take up the entire width and height of the phone screen.

const styles = StyleSheet.create({
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
    },
    loadingIndicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

So now you should have the UI all sorted, we want to add the functionality to take the picture. So first we want to wire up the click event for the Button.js component we created. Most of this code has been taken from the React Native Camera components docs, but I'll summarise it.

This wants to be an Async function

takePicture = async function(){

}

Then after checking the camera has been initialised and a picture has been taken, we want to pause the camera's preview, on the photo that we've taken

// Pause the camera's preview
this.camera.pausePreview();

Then after this we can simply update the state of the Camera to be calculating the image's tags.

// Update the state to indicate loading
this.setState((previousState, props) => ({
    loading: true
}));

We then want to actually take the picture, and get the Base64 representation of the picture

//Set the options for the camera
const options = {
    base64: true
};

// Get the base64 version of the image
const data = await this.camera.takePictureAsync(options)

Then we'll call a new function we'll create shortly that takes the Base64 representation of the image and pass it to the Clarifai API.

this.identifyImage(data.base64);

Again, using the Clarafai docs, we can initialise Clarafai with your API key and pass the Base64 to its Predict API. Then we'll pass the part of the JSON response that contains the top rated image tag to a new function.

identifyImage(imageData){

    // Initialise the Clarifai api
    const Clarifai = require('clarifai');

    const app = new Clarifai.App({
        apiKey: 'YOUR KEY HERE'
    });

    // Identify the image
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) =>  this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
    );
}

In the displayAnswer function we'll want to update the state of the application. This will set the state of the alert message as well as disable the Activity Indicator, as well as re-enable all the buttons.

// Dismiss the acitivty indicator
this.setState((prevState, props) => ({
    identifedAs:identifiedImage,
    loading:false
}));

Now that we've got the answer we'll just show it on an alert to the user, using React Native's Alert module (https://facebook.github.io/react-native/docs/alert)

Alert.alert(this.state.identifedAs,'',{ cancelable: false });

Then we'll resume the camera's preview, so we can take a new picture.

// Resume the camera's preview
this.camera.resumePreview();

Overall, your displayAnswer() function should look like this

displayAnswer(identifiedImage){

    // Dismiss the acitivty indicator
    this.setState((prevState, props) => ({
        identifedAs:identifiedImage,
        loading:false
    }));

    // Show an alert with the answer on
    Alert.alert(this.state.identifedAs,'',{ cancelable: false });

    // Resume the preview
    this.camera.resumePreview();
}

And your whole Camera.js component

import React from 'react';
import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';
import { RNCamera } from 'react-native-camera';
import CaptureButton from './CaptureButton.js'

export default class Camera extends React.Component {

    constructor(props){
        super(props);
        this.state = { 
            identifedAs: '',
            loading: false
        }
    }

    takePicture = async function(){

        if (this.camera) {

            // Pause the camera's preview
            this.camera.pausePreview();

            // Set the activity indicator
            this.setState((previousState, props) => ({
                loading: true
            }));

            // Set options
            const options = {
                base64: true
            };

            // Get the base64 version of the image
            const data = await this.camera.takePictureAsync(options)

            // Get the identified image
            this.identifyImage(data.base64);
        }
    }

    identifyImage(imageData){

        // Initialise Clarifai api
        const Clarifai = require('clarifai');

        const app = new Clarifai.App({
            apiKey: 'YOUR KEY HERE'
        });

        // Identify the image
        app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) => this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
        );
    }

    displayAnswer(identifiedImage){

        // Dismiss the acitivty indicator
        this.setState((prevState, props) => ({
            identifedAs:identifiedImage,
            loading:false
        }));

    // Show an alert with the answer on
    Alert.alert(
            this.state.identifedAs,
            '',
            { cancelable: false }
        )

        // Resume the preview
        this.camera.resumePreview();
    }

    render() {
        return (
            <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
            </RNCamera>
        );
    }
}

const styles = StyleSheet.create({
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
    },
    loadingIndicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

Now heading back to the top level component, App.js, import your fancy new Camera Component that you've just created.

import Camera from './components/Camera.js';

Then add it between the React Native view.

So your App.js should look like this

import React  from 'react';
import { StyleSheet, View } from 'react-native';
import Camera from './components/Camera.js';

export default class App extends React.Component {

    constructor(props){
        super(props);
        process.nextTick = setImmediate;
    }

    render() {
        return (
            <View style={styles.container}>
                <Camera />
            </View>
        );
    }
}

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

So overall our simple application has been split up into 3 components, the app itself, our own camera component, and our button component. Then on top of this we're using the built in React Native Camera component.

We've also utilised a number of standard React Native components, such as Alerts, Activity Indicators, StyleSheets, TouchableHighlight and Buttons.

So simply connect up your phone, and open the Xcode project in Xcode to get it onto your device to give it a test.

The source code for this app is available here on Github https://github.com/andrewsmith1996/Image-Recogition-React-Native, and is also showcased on my portfolio here https://andrewsmithdeveloper.com

I hope you enjoyed this post, and if you have any questions at all or feedback on my post, code or anything then let me know!

Explain Unit Testing like I'm five

Andrew Smith — Wed, 09 May 2018 09:44:59 +0000

Explain MVC like I'm five

Andrew Smith — Fri, 16 Mar 2018 08:29:33 +0000

What I've learnt in the first six months of my internship.

Andrew Smith — Mon, 11 Dec 2017 21:01:43 +0000

I’ve officially been at my internship as a Junior Web Developer for six months now, which ultimately means that I’m roughly halfway through, before I return to University to complete my final year of my BSc (Hons) in Computer Science next year.

It’s been an amazing journey. I’ve learnt so much, not only just about technology, but most importantly; about life and how the world works. So below I outline the most important things I’ve learnt.

You need to be out of your comfort zone to grow

Quite possibly the hardest, yet most valuable lesson I’ve learnt in my first internship is that things are hard, and things are easy, and things will continue to be hard, and things will continue to be easy. For me, being a software developer is a continuous cycle of being outside of your comfort zone, learning and finding your way back into your comfort zone, heading out of your comfort zone as you learn the next thing, and then repeating the cycle. Sound familiar? This is such a core concept of software development, and quite frankly career development within any technical industry; learning.

There were times where I felt horrible. Stressed out about projects, deadlines, concepts and theories that I wasn’t quite understanding, I often felt confronted with the fight or flight dilemma. I recall one particular instance when I arrived at work at 8am to find something that had launched the day before was discovered to have some bugs that had somehow survived through testing, and some amends needed to be done. Being a Junior Developer without much live project experience, I naturally panicked and stressed. Chugging coffee and stressing, sat on the edge of my chair, heart-pound as I’m clicking and typing at incredible speed. Ultimately, spending all morning stressing out and rushing to fix the bugs, panicking that it was live, feeling at fault. But what I later realised was that if I stayed calm, breathed and not took it to heart so much then I would have A) saved myself a hell of a lot of stress, imposter syndrome and frustration and B) probably fixed the bugs more effectively and efficiently.

But it was in these scenarios where I grew the most. Looking back now, this was the most valuable lesson I learnt of all, and the one that I’m most truly grateful for. I’ve learnt how to deal with and react to stressful situations, how to remain calm and keep myself in check; a valuable lesson that is guaranteed to be a useful one for the future. Especially in a world where imposter syndrome can be met at every corner.

I’ve learnt that it’s not the end of the world if something goes wrong, yes it may potentially have repercussions, but just breathe and stay calm, it will all be okay. To become a good runner, you need to run, to become a good violinist, you need to play the violin, to become good at handling stress, you need to experience stress. For me, a bit of tough love and the exposure to stressful and anxious situations has not only grown me up, but it’s allowed me to gain the experience to deal with stress.

You NEED to take care of yourself, physically and mentally

This is something I’ve always been an advocate of, even before I started working 40 hours a week full-time, but it was once I started churning out 40 hours a week, getting up at 6am and often getting back at 6pm that I realised the importance of this; you need to take care of yourself. Your body and your mind should always come first.

As a developer, it’s easy to sit at your desk all day, hack away, and then head home and sit yourself in front of the TV for the evening. To be honest, if you drive into work, it’s easy to go for days without any real form of exercise and to not reach your advised 10,000 steps a day. This goes for eating right too, a healthy balanced diet too is also so easy to ignore.

Generally for me, staying physically healthy and eating right makes me so much more productive, it generally makes me more confident in what I do, it makes me feel great and more energised, and all together this equates to an increased performance in my job. I find that even little things such as staying hydrated is something that people rarely do, yet seems to work for me. I always aim to get up every hour, and have a glass of water at my desk at all times. It’s these little things that matter.

Burnout is a real thing. I’d gone a while without any form of significant break from work and it’s only really when I was on a week-long break did I realise that actually, I was pretty burnt out. I felt like, as J.R.R Tolkien put it, “like butter scraped over too much bread”. I was finding things quite difficult that previously I’d been comfortable with, my ideas weren’t the greatest, and generally I was exhausted, fatigued and the 3pm slump was now a 3pm plummet as my mind became blocked and my energy levels dropped.

Mental health is a serious thing, I’m a firm believer that you should treat your mental health with as much, if not more, care as your physical health. To me it all starts in the mind. For me, things such as taking regular breaks at work, having a laugh, going outside for a walk and listening to music on my lunch break were all things that got me refreshed and set me back on the right course at work. At home, things such as shutting off notifications and putting my phone on ‘do not disturb’, taking time to pursue my hobbies and interests, escaping into a game, book or TV series and getting enough sleep were all things that I’ve found help deal with burnout, and generally keep me relaxed. As well as these, mindfulness is something that also works wonders. It’s definitely something worth checking out.

To me, health is something that so many people ignore, they let life take over and get into a routine where it’s easy to neglect yourself. I’ve experienced this, and it’s very easy to do. But really, you are the first thing that you should take care of. Wellness comes from within, and ensuring this is something that has had benefits within every aspect of my life, not just within my career, but my relationships, family, friends and education have all benefited from this. Treat your body like a temple, and you’ll be amazed at the increase in productivity, energy and well-being that you’ll be rewarded with.

Drive

I’d always been a driven and ambitious individual, after two years of college and two years at University, my CV is stocked full of extra projects and experience that I’ve absolutely loved doing. But this internship gave me an even bigger drive boost I didn’t even know was possible.

As soon as I started working with and using modern, industry standard, technologies on a day-to-day basis I suddenly wanted to know EVERYTHING. From little things such as reading up on tech blogs and tech news over my breakfast coffee, to taking part in extra online courses and programs to mop up my development skills, I suddenly became incredibly career driven. I constantly had twenty tabs open relating to things such as tech blogs, courses, LinkedIn discussions, networking events, articles on random tech topics I found interesting, an endless goldmine of things that I wanted to know and read about. Suddenly I felt so involved, I quickly became active in the tech community. I began to write and blog, showcasing my own thoughts and ideas into the tech community. I wanted to be involved and I wanted to talk to like-minded people.

Do it properly, the devil is in the detail

At University, many of my projects didn’t involve coding with other people, no collaboration. So when spaghetti code was written and little hacks or hot fixes here and there were implemented, it didn’t really have that many repercussions. In industry however, 90% of the time I was working in a team, and 100% of the time I knew somebody, someday would pick up my code and read it and add to it.

On a day-to-day basis I was collaborating with others to build systems, that had to work, and had to work well. At the beginning of my internship, my coding skills weren’t that great, I’ll stand up and admit that. I mean, the stuff I wrote worked, but often the code could have been better. Later down the line, when I knew others would be reading and adding to my codebase I realised that I need to be detailed in my approach, my code needed to be refactored well and it needed to be efficient, readable and well documented. Things mattered here, and I couldn’t be lazy, it needed to be done properly. Industry standard and organised.

You can’t hide in industry. No hacks or quick fixes. No quickly getting things built. They needed to be done correctly, because you never know who will pick the codebase up in X number of months. Do it properly, take your time, be detailed. If it takes time, then it takes time, but it’ll be so much more worth it when you end up writing a solid, organised and efficient codebase that you can be proud of.

This is the same for version control (one of the most important technical skills I’ve gained from working in industry), I quickly discovered how great version control was for collaboration. The process of branching off from production, writing code, merging back in and pushing, and potentially getting merge conflicts was something that taught me the values of teamwork, communication and it made it evident how much can actually be achieved when working as a team.

Imposter syndrome is real, and boy it can be dangerous

Now this is a lesson that I learnt the hard way. Software developers are notoriously famous for experiencing “imposter syndrome” or feeling “like you’re a fraud and the whole world is going to find you out.” Often, I was thrown in the deep end with my internship. Especially early days when I was still adjusting to the 40 hour week. In my opinion University just doesn’t prepare you for the working world well enough. But the deep end was where I grew the most, yes it took time to get afloat, but as previously stated, nothing makes you grow like being outside of your comfort zone.

Often I was thrown into projects that I found difficult, an array of new technologies, concepts and methodologies that I was expected to learn and build a successful and well-functioning system with, and often this was difficult for a twenty year old intern to take in. Especially when deadlines and time constraints were thrown into the mix. Often thoughts such as “am I cut out for this?” and “do all interns feel like this?” popped up, and sometimes these would spiral out of control into a whirlwind of self-doubt, unconfidence and anxiety. There were days when my confidence was absolutely shot, I felt stuck and I felt like I wasn’t getting anywhere. I just didn’t feel good enough. But then next day, all it’d take was some success with a project and suddenly it was gone, it flipped over and suddenly I’d become more confident in my abilities and aware of myself.

Eventually I learnt to deal with this better, through reminding myself of my skillset, reminding myself how far I’d come and how much I actually did know. I won’t lie, I’ve still not figured out how to completely avoid imposter syndrome, but to be honest I don’t know if I ever will. I think it’s just a part of life, in any career path. However little things such as explaining concepts to other people, looking back at old projects to see how far I’ve come, doing something I know I’m good at all helped. Another thing worth mentioning is how supportive the tech community is of this. So many times I looked towards blog posts and articles on imposter syndrome within software developers for help and advice. This was probably the best thing I could have done to deal with imposter syndrome. It was comforting to know that I wasn’t alone in this feeling, and that it’s a common occurrence not only in Junior Developers, but also experienced Senior Developers. It’s important to stay calm, and remind yourself how great you are, and how far you’ve come.

I find that confidence is key here, it’s important to be confident, it may be hard, but be confident in your abilities. It’s gotten you this far after all, hasn’t it?

To make the best of your internship, you need to get an all-round experience

I’ve been exposed to so much in my internship, from the initial design of front-end interfaces through wireframes and PSD files, to building complex database queries with more than four joins, to using version control within a team environment, to micro-managing my own projects and conforming to deadlines. Everything that I got exposed to has helped advance my career, knowledge and skillset in some way or another. I began the internship having only University and freelance project experience, but six months in an agency with developers, designers and a manager has taught me so much, across such a broad spectrum of things. With a broad foundation of knowledge across multiple areas of software development, I now know that I can specialise in a certain area and still be able to work with someone who specialises in another area. For example, having designed some wireframes for a particular interface in my internship, I now know that in X amount of years, if I’m building an interface myself, I can talk to a designer about the wireframes and design behind it. Not only does this improve communication between teams and individuals, but it also results in an increased development of whatever it is that is being built.

A key piece of advice I’d give to any interns, or anyone that is starting out in software development is to gain exposure to as much as possible. Even if you don’t see yourself going into that area in the future, or even if you don’t particularly enjoy that specific area; learn and experience it. It may even give you the edge over other candidates in a job application. You’re young, so try to see it all, and try to fill your head with as much knowledge as you possibly can, an internship only lasts so long, so make the most of it.

An internship is hard, especially when it’s your first. But stick with it, it’ll all be worth it.

Nothing worth having comes easy.

Explain like I'm five: AngularJS and when you'd use it.

Andrew Smith — Tue, 24 Oct 2017 06:21:14 +0000

How do YOU deal with imposter syndrome?

Andrew Smith — Mon, 09 Oct 2017 11:26:11 +0000

How do YOU dealwith imposter syndrome?

Quickfire Discussion: I'm a Junior Developer, tell me your top 3 pieces of advice.

Andrew Smith — Sun, 08 Oct 2017 14:15:18 +0000

Quickfire Discussion: I'm a Junior Developer, tell me your top 3 pieces of advice.

What did you wish you knew when you were a Junior Developer?

What would you tell current Junior Developers?

etc

Why kids should learn to code

Andrew Smith — Sat, 07 Oct 2017 14:52:38 +0000

Steve Jobs once said “Everybody in this country should learn to program a computer, because it teaches you how to think”.

But why?

Kids in school today are taught a wide variety of things, from core mathematics to Biology to Spanish to English, there are absolutely dozens of subject areas that each generation of the future’s minds are being taught and then tested on each year. But when you actually think about it, through this are we teaching them the right skills? What do kids actively learn from this? Now (DISCLAIMER) please don’t get me wrong, I’m not saying “Hey, let’s change up the national curriculum, because I have an opinion on something”, very far from it even. I believe what we currently teach is great, but I simply believe that Computer Science and Information Technology subjects are being ignored and are lagging behind, and I believe we need to start kids on these sort of courses earlier. For me this all comes down to one question, are we teaching kids the right skills? Not knowledge in the form of facts and recallable information, but skills. Actual applicable abilities and capacities that people know how to use.

If you go out today, and ask a child “what is the powerhouse of a cell?”, I bet they could answer. “Mitochondria” they quickly fire back at you. You think great, this child knows their Biology, and could potentially make a great Biologist one day. But however, give them a problem domain relating to Biology and then ask them to solve this problem and I bet this test is more challenging for them, they might take more time, they might have to give multiple attempts or they may even give up completely.

This is because the ability to solve problems is significantly different and varied from the ability to recall knowledge. After all, the human memory supposedly has an infinite capacity to store knowledge for potential later use, it even has Psychologist George Miller’s 7 (plus or minus 2) concept for storing short term information for quick-fire recollection. However using knowledge to solve problems is a much more complicated neurological process, involving a multitude of electrochemical signals formed within neurons that move along axons to jump from one neuron to another across synapses through neurotransmitter chemicals being released. Sounds much more complicated, right?

When you think about it, in school, how often were/are you challenged to solve a problem. But first, when I say solve a problem I mean the following:

You are given a problem domain, that is essentially, something to solve.
You have an initial state, that is where you currently are.
You have a goal state, that is where you want to be/a desired outcome.
The means to get from the initial state to the goal state are unknown, and you are required to reach this goal state through forming a bunch of intermediate states, or instructions. With each intermediate state taking you one step closer to the goal state and one step further away from the initial state.

So to me, problem solving can simply be defined as the arrow in the middle of the following statement:

Initial State -> Goal State

(With the arrow being potentially a lot of frustration, pain and Stack Overflow, although with a significant amount of learning)

So back to the point, problem solving can be difficult, and effectively, programming can be seen as problem solving.

At the start of any programming project, small or large, you are given a problem domain, or something to solve. For example, “write a program that outputs the Fibonacci sequence” or “write a program that outputs the names of every string in an array but without any vowels in it”. Essentially, you are required to think about how to approach each problem, and then using a variety of programming concepts such as flow control, variables, input and output, structures, objects, strings, arrays, mathematics, functions (etc) to create/construct a solution to the problem. That is, you use core programming concepts to reach a desired outcome.

Now we’ve made the link between programming and problem solving, let’s talk about the real question I’m answering; why kids should learn to code.

When kids learn to code, they are learning to solve problems. They’re actively being given initial states and goal states, and they are being made to think up ways to create the intermediate states in between, to eventually reach the desired outcome. I do not believe one gets exposure to this sort of practical, theoretical and significantly challenging thinking from any other subject, maybe mathematics or physics, but with this you are implementing other people’s solutions to problems, instead of creating your own. So surely challenging the younger generation to become better at thinking in this way will result in more problems in the future being solved, right? I believe that instead of teaching kids a whole bunch of information that in a job they are required to simply recall and apply to scenarios, how about we teach them how to create their own solutions to scenarios, and we teach them how to think rather than how to recall information.

Ultimately, I believe that Computer Science, and any educational subject that gives exposure to programming and coding teaches an immense range of skills that no other subject at school even remotely touches upon; practically solving problems and creating solutions to problems. In essence, programming makes you think, and boy does it make you think hard. So through pushing the benefits of learning to code, let’s make kids think in a way that is practical, theoretical, productive, active, engaging, stimulating, creative and also, pretty damn fun.

Do you ever get frustrated with your Junior Developer(s)?

Andrew Smith — Sat, 07 Oct 2017 12:56:08 +0000

Having recently started a new internship as a Junior Software Developer, I can't help but feel like I (significantly) annoy everyone with my (very) frequent questions.

Don't get me wrong, I know in myself that it's a necessity to ask questions as a Junior Dev, because after all that's how you learn and gain experience, right? So I understand that I am not in the wrong by asking questions, but I often do wonder, does this get annoying for the people (most often Senior Devs) answering my questions? After all I'm taking them from their time pressured work, I'm asking them to explain something that I'm finding difficult but they probably can do in their sleep and I'm generally taking time from their day.

So my question is, do you ever get frustrated with your Junior Developer?