Learning new skills in my 10% time

What is 10% time? 

At Rightmove, all engineers are able to make use of 10% of their time to work on personal development, which can involve learning about new technologies or working on a side project. This is a great way to explore new technologies that you may not get to use in your day-to-day job or just work on ideas that you have always wanted to build!

A bit of context

I joined Rightmove in December 2019 as a back-end engineer having previously done zero front-end work professionally. However, in the summer of 2020, I was given the opportunity to delve into the front-end development world when my team had to implement a new variant of property cards on the search results page for a new product we were rolling out at the time. At that time, we didn’t have any dedicated front-end engineers on the team so I took the opportunity to challenge myself and delve into the unknown and step in to help my team! I thoroughly enjoyed doing front-end work and quickly got hooked on it because I felt it was really rewarding to see your changes from a visual standpoint.

How did I utilize my 10% time?

For me, 10% time is about experimenting and working on a technology I don’t get to use in my day-to-day job.

There were two key motivations behind my learning goals:

• I wanted to align as a full stack engineer – to learn and do something “non-Java” / “non-back-end” and build myself up to be as T-shaped as possible.
• I wanted to build and deploy a front-end application – I was interested in exploring modern JavaScript frameworks and building something from scratch and deploying it to production

In a nutshell, these are a few key topics I focused on and learned about:

• TypeScript.
• Next.js.
• Tailwind CSS.
• Tools, such as Netlify, to build a CI/CD pipeline and deploy it to Google-hosted infrastructure.
• “doing more web development”!

To collectively use and explore all the above I needed to come up with an idea and build something that I could potentially deploy to production. I came up with the idea of building a feature rich weather website called “Brishty”; the word “Brishty” means rain in the Indian language of Bengali.

Going API shopping

To get started I needed to find APIs that I could use to get real-time data for this project. I found a few results online and, in the end, I decided on the following:

• Open Weather API as the main weather search engine because their free tier was attractive and provided lots of useful information.
• NY Times API for getting the latest news, this is used to display the news section on the homepage of the website.
• Geo DB Nearby location API to get nearby locations after an initial weather search is performed.
• Geoapify auto-complete API to support typeahead location search functionality.

Interesting features and associated code

Once I was settled on the APIs, I started setting up the project using the Next.js CLI tool called create-next-app, this gave me a nice basic Next.js application with some boiler plate code and a good foundation to build upon.

The initial version wasn’t pretty at all, there was barely any styling. I added a search box that allowed me to search for a location’s weather.  In the weather page I was pretty much outputting the JSON payload that I got back from the Open Weather API call, just to test things out!

Usage of getStaticProps()

In order to render the weather page I chose to use the getStaticProps() method that Next.js provides. This method tells the Next component to populate props and render them onto a static HTML page at build time. If the use case was to build a page that deals with lots of dynamic data then it would be more scalable and make more sense to render the page at run time using Server Side Rendering (SSR), and in that scenario getServerSideProps() would be the preferred method of choice. In this case, I believe the page is a lot simpler and the weather data is not going to change a lot in real-time so getStaticProps() made more sense. Pages built using getStaticProps for Static Site Generation (SSG) will be extremely fast.

Let’s analyse how this looks in practice. Firstly, I am breaking down the request parameters to get all the search criteria, for example: location name, latitude, longitude and country code. Using these values, I am then making the API call to fetch the given location’s weather and returning the result as props. These returned props are passed to the page component.

export const getStaticProps: GetStaticProps = async ({ params }) => {
    try {
        const { slug } = params as UrlParams;
        const locationName = slug[0];
        const latitude = slug[1];
        const longitude = slug[2];
        const countryCode = slug[3];
        const weatherDetails = await getWeatherDetailsByGeoLocation(
            parseSearchedLocationNameOrDefault(locationName),
            latitude,
            longitude,
            countryCode,
        );
        return {
            props: {
                weatherDetails,
            },
            revalidate: 60,
        };
    } catch (err) {
        return {
            notFound: true,
        };
    }
};

The “revalidate” value of 60 is to make use of Incremental Static Regeneration (ISR) which enabled me to use static generation on a per-page basis without needing to rebuild the entire site. This means that all visitors will see the same generated version of the site for one minute. The only way to invalidate the cache is for someone to visit after the minute has passed.

Usage of next/dynamic for lazy loading

Next.js supports lazy (or deferred) loading of React components and external dependencies with next/dynamic. The deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page.

In my case the weather map component turned out to be particularly complex and heavily reliant on JavaScript. I was able to use next/dynamic to render a skeleton loader for the map component before loading the real map component.

export const MapLoader = ({
    mainLocationForMap: mainLocationForMap,
    mapProps: mapProps,
    nearbyLocationsForMap: nearbyLocationsForMap,
    useFullViewport: useFullViewport,
    height: height,
}: Props) => {
    const MapComponent = React.useMemo(
        () =>
            dynamic(() => import('./WeatherMap'), {
                loading: () =>
                    useFullViewport ? <MapPlaceholder useFullViewport={useFullViewport} /> : <MapPlaceholder />,
                ssr: false,
            }),
        [],
    );
    return (
        <MapComponent
            mainLocationForMap={mainLocationForMap}
            mapProps={mapProps}
            nearbyLocationsForMap={nearbyLocationsForMap}
            useFullViewport={useFullViewport}
            height={height}
        />
    );
};

In practice, as the page is loading, the map placeholder is displayed first followed by the actual Map component as demonstrated below.

Usage of Tailwind CSS

For styling, I decided to use Tailwind CSS. The main reason for this choice was it provides an extremely fast CSS styling process. Personally, I am not that good when it comes to styling CSS so it was ideal for me as I was able to directly inject CSS styles into the React JXS components as a className attribute, this substantially increased the development speed. There is tons of useful information on the internet about setting up Tailwind and there are lots of pre-built example components on their website that you are able to use should you wish to do so. I found Tailwind’s official docs particularly useful as the way they demonstrate concepts is really easy to follow for newbies like me. 

I was able to inject styling to a JSX component, as below, with Tailwind. 

const SearchBox = () => {
    return (
        <div className="bg-cover pt-32 h-full bg-landscape">
            <PageContentWrapper classNameCustomAttributes={'py-10 px-2'}>
                <div className="mx-auto container block bg-gray-800 max-w-5xl rounded-xl shadow-2xl">
                    <span className="block px-3 pt-6 text-center text-gray-200 text-3xl font-extrabold">
                        Find weather today!
                    </span>
                    <span className="block px-3 pt-3 text-center text-lg text-gray-400">
                        Search for your favourite location!
                    </span>
                    <SearchForm />
                </div>
            </PageContentWrapper>
        </div>
    );
};

Deployment

I bought the domain brishty.net from Google Domains, the process was fairly easy and self-explanatory.

For deploying Brishty I decided to use Netlify as a platform as it is very easy to integrate with GitHub and offers: custom domains, HTTPS, deploy previews, and seamless rollbacks. Setting up and getting started with Netlify was fairly straightforward. I was able to get Brishty setup and deploy the first version within 30 minutes or so, I used their official setup guide to get started – https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/

Once I was set up, I was able to start Netlify builds on every merge to the master branch. This is particularly useful because Netlify keeps historic builds as well, this allows you to go back in time and check the progression of the project. For instance, below I have added links to a very old build of Brishty and one of the latest ones for comparison.

• Newest deployment: https://629c9ba77ea535387669cb57–brishty.netlify.app/
• Very first deployment: https://6085ddf9717a68fa3016644e–brishty.netlify.app/

Netlify provided me with the name servers and I was able to point the domain registrar (i.e. via Google domains) to those, this allowed me to route all traffic going to brishty.net/* to the instance of my Next.js app deployed on Netlify.

The final look of the weather page

Takeaways

Working on a project like Brishty has allowed me to learn and get proficient with various front-end tools, frameworks, and languages, such as: Netlify, Next.js, React, Typescript, Tailwind CSS, Google analytics, and many more.

Typescript and React are now widely used across various front-end projects, so this is hugely beneficial. At Rightmove, we are in the process of incorporating Next.js into newer front-end projects. I am really glad that the time spent working on Brishty.net is so relevant and has allowed me to pick up new skills.

I am hoping this blog post will inspire you and help you decide on your next pet project and your selection of tech stack.