My Blog about Boats

Shifting mindset as a mid-level engineer

Boaty McBoatFace — Fri, 03 Apr 2026 01:00:00 +0000

In September of this year I will have been working as a full time software developer for 5 years. In this time I’ve progressed from apprentice to junior and now mid level software engineer. I’ve been considering what I’ve learnt and apart from the obvious things like syntax there have also been important lessons in code design and quality. I feel like I am making the shift from Does this work? to How could this fail and how will somebody work with it in 6 months time?

These are some of the lessons I’ve learnt when trying to shift my mindset to that of a mid-level developer:

Photo by Xavi Cabrera on Unsplash

Readability over cleverness

When you start out learning to code you often hear a lot about conciseness. I used to try to make my code as short as possible using ternary operators and nested map/filter functions. While these things have their place I’ve learnt it’s often better to use a for loop or an explicit named function. I try to imagine the next developer reading my code and understanding the intention at a glance rather than have to dig through it.

Defensive programming and edge case handling

Initially like many junior developers I only wrote code for the ‘happy path’ i.e. when everything goes to plan. Over time I’ve learnt to add error handling, think about edge cases and graceful degradation where if a specific part of an application fails or is unsupported the rest can still function. I now assume the worst will happen and think about what the user will see when it does.

Understanding time and space complexity

My understanding of big o notation is only basic (I don’t have a computer science degree) and I’d like to learn more. However just knowing why I might use a Set over an Array or why a searching algorithm might not scale is really useful. I’m moving away from using brute force methods when working with large data sets or expensive operations.

Balancing composition and inheritance

I used to try to avoid writing duplicate code by creating one base class and having everything else inherit from it. Now I lean more towards composition - building complex functionality by combining smaller discrete pieces. My aim isn't to abandon inheritance entirely, but to recognize when it is becoming a liability.

Testability

I was guilty of seeing testing as an afterthought and now I am learning to use it as a design tool. If a function is difficult to test then that is a red flag that it is trying to do too many things or it has too many hidden dependencies. Writing tests encourages me to use dependency injection rather than reaching out into the global scope making my code modular and more predictable.

These lessons have helped me to shift my focus from the immediate satisfaction of getting something working to building something that will last.

Migrating the Domestic Abuse Services Mapped database to PostgreSQL

Boaty McBoatFace — Sat, 31 Jan 2026 00:00:00 +0000

Migrating the Domestic Abuse Services Mapped database to PostgreSQL

Recently, I migrated the database for Domestic Abuse Services Mapped from Airtable to a PostgreSQL database hosted on Render. The primary motivation for this was that I was consistently exceeding the API call limits of Airtable’s free plan. Switching to PostgreSQL also offered additional benefits, such as reducing reliance on external services—since I already use Render to host the application. As the site continues to grow and needs to handle higher traffic, PostgreSQL provides greater power, flexibility, and scalability for future development.

Setting Up a PostgreSQL Database

My first step was to set up a local PostgreSQL database. I installed PostgreSQL using Homebrew:

brew install postgresql

Next, I started the PostgreSQL service:

brew services start postgresql

To access the service, I used:

psql postgres

Inside the PostgreSQL shell, I created a new database called services with:

CREATE DATABASE services;

I then defined the table, columns, and data types to mirror the structure of my original Airtable database.

Hosting on Render

The next step was to create a new PostgreSQL instance on Render and connect to it remotely in my Mac terminal using the provided connection string. I created the table, columns and data types to make a copy of my local database.

After this I:

Exported the data from Airtable as a CSV file using their export feature
Converted the CSV file into SQL INSERT statements
Checked the data for duplicates and verified that all data types matched my new database schema
Used PostgreSQL’s \copy command to bulk import the data into both my local and remote databases.

Photo by Jan Antonin Kolar on Unsplash

With the data now in PostgreSQL, I updated my API logic to use the node-postgres package and fetch data directly from the new database. For example, I created this utility function:

import { Client } from 'pg';

export async function getServicesFromDb() {
  const client = new Client({ connectionString: process.env.DATABASE_URL });
  await client.connect();

  try {
    const result = await client.query(
      'SELECT * FROM services where approved = true'
    );

    return result.rows.map((row) => ({
      type: 'Feature' as const,
      properties: {
        name: row.name || '',
        description: row.description || '',
        address: row.address || '',
        postcode: row.postcode || '',
        email: row.email || '',
        website: row.website || '',
        phone: row.phone || '',
        donate: row.donate || '',
        serviceType: row.service_type || [],
        serviceSpecialism: row.service_specialism || [],
        approved: row.approved,
        localAuthority: row.local_authority || '',
      },
      geometry: {
        type: 'Point' as const,
        coordinates: [parseFloat(row.lng || '0'), parseFloat(row.lat || '0')],
      },
    }));
  } finally {
    await client.end();
  }
}

This allowed me to fetch and serve data from PostgreSQL, replacing the old Airtable logic. I connected my application code to the database using environment variables e.g.

const client = new Client({ connectionString: process.env.DATABASE_URL });

Finishing Steps

As the API is public, I updated my Swagger documentation to reflect the new PostgreSQL data source. This will help me keep track of the API structure and endpoints, and make it easier for future collaborators to understand and use the API. One of the major advantages of using Airtable was the user interface. To replicate this I set up connections in the GUI application DataGrip to both my local and remote databases.This makes it easier to inspect records and run queries. Since this was a significant refactor, I spun up a staging environment on Render to test the changes. Once I was confident that everything was working as expected I pushed the updates to the production environment.

I’m satisfied that the site now benefits from a more robust, scalable, and maintainable backend powered by PostgreSQL.

Attending the Local Government Homelessness/Rough Sleeping Hackathon in Birmingham

Boaty McBoatFace — Tue, 09 Dec 2025 00:00:00 +0000

Last month I was fortunate to attend the Local Government Homelessness/Rough Sleeping Hackathon in Birmingham. This is my report from the day including my team’s project and my reflections on what I learned.

Introducing the hackathon

Who was there?

The hackathon has speakers and attendees from local and central government, housing professionals and people from the third sector. It was run by the Government Digital Service in partnership with Birmingham City Council.

What was the hackathon about?

The hackathon was a two day event where people collaborated to build and prototype tech solutions to the problems of homelessness and rough sleeping. We started with understanding the challenges facing councils around homelessness and rough sleeping. What particularly struck me was the amount that councils were having to spend on temporary accommodation and the impact this was having on individuals and families. For more on this check out this brilliant book Debt Trap Nation: Family Homelessness in a Failing State by Katherine Brickell and Mel Nowicki This helped us to ground our projects in the experiences and needs of real people.

The problem statements

Every hackathon has problem statements and these were ours:

1. Using data and AI to predict and prevent homelessness

How might we ethically harness data and AI to identify individuals or households at risk of homelessness earlier, and enable effective, trusted early interventions?

2. AI driven outreach and system efficiency for homelessness and rough sleeping services

How might we ethically leverage AI and digital tools to streamline case management, enhance outreach, and improve the usability of homelessness support systems?

3. Optimising temporary accommodation allocation through data driven Insights

How might we leverage data and analytics to optimise the allocation and management of temporary accommodation, ensuring resources are used efficiently, individual needs are met, and families spend the shortest possible time in temporary accommodation?

Solutions

Some of the proposed solutions were using AI to:

improve finding and matching for temporary accommodation
predict future homelessness
identify patterns in rough sleeping to assist outreach workers
add chatbots to council service pages to either collect information or direct inquiries

In my opinion, the best applications of AI were practical e.g.:

plan the best route around a city centre for an outreach worker based on known rough sleeping locations
pre-populate an application form for temporary accommodation from user uploaded documents
flag high risk applications for temporary accommodation for example has children, domestic abuse, care leaver etc

My project

My team’s project was for housing officers who are attempting to reach people at risk of homelessness before they present to the council needing accommodation. We fed a variety of risk indicators (rent and council tax arrears, benefits data) into an AI predictive model. Each data source was connected to the AI via an MCP server. We built a frontend dashboard in React that would give a user an instant view of their most high risk cases. In the future we would want to validate and train the model with anonymised pilot data.

Our dashboard in action

Source code

The whole hackathon assembled

What did I learn?

I learned a lot from being around such committed and knowledgeable people for the two days of the hackathon. Technically I enjoyed getting to know more about developments such as MCP servers and tools like Notebook LM that I’ll use in my own learning.

My main takeaway is that the inclusion of AI in software that interacts with vulnerable people should be approached very cautiously. Listening to housing professionals it seemed that some issues could be addressed by joined up data and systems. This is to say nothing of proper funding for councils and local services. We should be careful we don’t add AI onto a system without getting these more fundamental things right.

For more information about this and other GDS Local activities check out their blog from the event

Domestic abuse services mapped - recent updates

Boaty McBoatFace — Sat, 18 Oct 2025 01:00:00 +0000

October is Domestic Violence Awareness month so it seems like a good time to revisit Domestic Abuse Services Mapped and see how I can improve it. This is a project mapping domestic abuse support services and other support relevant to survivors across the UK. It is based on my experience as an advisor on the National Domestic Abuse Helpline and my training as a software developer. This blog post is a changelog of the latest updates to the website covering new features and design improvements.

Added support for postcode and radius search in public API

I recently wrote a post about adding a public API to the website and I’ve now added two more parameters to the GET request. Postcode is a string that can be added to the end of the request (for example ?postcode=SW1A2AA) to fetch services close to that location. Radius is a numeric parameter (in miles) that when used alongside the postcode filters results to services within that distance of the given postcode (for example ?postcode=SW1A2AA&radius=10).

Interactive API documentation for postcode and radius search with Swagger

Removed dark mode

I wasn’t happy with the code that I had written to implement a dark mode on the site and I took the decision to remove this for now instead of refactoring. This felt like a better option as I wasn’t sure how much value themes were adding to the user experience. I would rather focus my time on improving the design and usability as a whole and come back to light/dark modes at some point in the future.

Added linting

Although I am working alone on the site and the codebase isn’t large it’s still best practice to use linting to keep my code well formatted and catch bugs early. I’m using a Husky pre-commit hook to run es-lint and prettier across the staged files each time I make a commit. This also means that if others contribute to the project in future they’ll automatically follow the same conventions.

Smaller UX improvements

These are a few smaller changes intended to improve the user experience on the site.

Improved map interactions

I’ve updated the map to prevent zooming out or dragging the map beyond the UK. This is to help keep the focus on the area there are listings for and avoid user confusion.

Scrolling to top of search results

On mobile the user was previously being directed to the top of the page when clicking on the next and previous buttons in the search results. The site now scrolls to the top of the results meaning that the user doesn't lose their place.

Only show clear filters button when filters are applied

I felt that it was potentially confusing to have this button displayed all the time. Now its visibility is another indicator to users that they have filters applied.

I’m hoping that these changes will help me to continue to grow the site and reach more people who need support. If you need help or advice about domestic abuse you can find your local service at https://domesticabuseservices.uk You can also contact the National Domestic Abuse Helpline at https://www.nationaldahelpline.org.uk

Building a public api for Domestic Abuse Services Mapped

Boaty McBoatFace — Sat, 23 Aug 2025 01:00:00 +0000

Over the past 18 months I’ve been building a website to help victim/survivors of domestic abuse find their local support service. My main focus has been developing the frontend of the site with a user friendly interface that helps people quickly find support.

But alongside that, I’ve been thinking about how to make the backend API public so that other developers and organisations can benefit from the same data.

Some examples of this could be:

A local authority could embed support services into their own site
A researcher could analyse geographical coverage of services
Other community projects could build apps on top of the data

The data for the services is stored in an Airtable database and my Next.js backend acts as a middle layer between Airtable and the frontend. My backend ensures only approved services are shown and converts location data into GeoJson which is a common format used for mapping.

Interactive API documentation with Swagger

Making a public route

The first step was to expose a public GET route at https://domesticabuseservices.uk/api/airtable

This endpoint returns all approved services in GeoJSON format. This is an example of the response:


{
  "type": "Feature",
  "properties": {
    "name": "Example Service",
    "description": "Support for women experiencing domestic abuse",
    "address": "123 Main St",
    "postcode": "AB12 3CD",
    "email": "info@example.com",
    "website": "https://example.com",
    "phone": "0123456789",
    "donate": "https://donate.example.com",
    "serviceType": ["Support"],
    "serviceSpecialism": ["Women"],
    "approved": true,
    "localAuthority": "London Borough"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [-0.1276, 51.5072]
  }
}

Protecting the API with rate limiting

When you make a service public you need to think about the possibility of somebody abusing it. I added rate limiting with Upstash Redis to prevent people from overwhelming the API with too many requests.


const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(5, '10 s'),
  analytics: true,
});

This means that a client can only make 5 requests every 10 seconds. If they exceed that they’ll get a 429 Too Many Requests response.

POST Requests with Authentication

The API also supports POST requests so that new services can be added. At the moment this is restricted so that only requests with a Bearer token will be authenticated. This is available on request from hello@domesticabuseservices.uk.

New services that are created in Airtable are unapproved by default, so I can review them before publishing them on the site.

Here’s an example of a request:


curl -X POST https://domesticabuseservices.uk/api/airtable \
  -H "Authorization: Bearer " \
  -H "Content-Type: application/json" \
  -d '{
    "Service name": "New Support Line",
    "Service address": "456 High St",
    "Service postcode": "XY99 1ZZ",
    "Service description": "Helpline for survivors",
    "Service email address": "support@helpline.org",
    "Service website": "https://helpline.org",
    "Service phone number": "0800123456",
    "Service type": ["Helpline"],
    "Specialist services for": ["Young people"],
    "Local authority": "Wandsworth"
  }'

Documentation

I’ve documented the API with Swagger/Open API to make it easier to use. That means anyone can visit https://domesticabuseservices.uk/api-docs and see an interactive interface where they can try out making requests and read the schema.

I hope that the API will allow more people and services to use and interact with my database of domestic abuse services across the UK. It’s also been a great learning opportunity for me to learn how to design and build a REST API.

My thoughts on Angular vs React

Boaty McBoatFace — Sun, 29 Jun 2025 01:00:00 +0000

Angular is a JavaScript based front end framework developed by Google for building dynamic single page web applications. I’ve been learning to use Angular as part of my role at Policy in Practice working on the Better Off Calculator. Up until this point all of my Javascript framework experience was in React so it’s really interesting to compare the differences between the two. These are my thoughts on the pros and cons of using Angular vs React...

Angular is much fuller featured

One of the main advantages of Angular is that it comes with many more features out of the box. Things like routing, state management and HTTP are handled within the core framework with no need to install extra dependencies. This can make it more robust and scalable and thus more suited to enterprise applications. Of course it also means there is a steeper learning curve as there is just more to learn.

Angular uses TypeScript by default

Of course you can (and most people do) use TypeScript with React but Angular is designed to be used with TypeScript. In fact it relies on features like decorators and metadata, which are only available in TypeScript. This means you get all the usual benefits of using TypeScript like better tooling; type safety and fewer bugs at runtime. For smaller projects however having the flexibility to use JavaScript with React is a benefit.

Angular uses HTML with Angular specific syntax

One of the major differences between Angular and React is that Angular uses HTML templates with Angular-specific syntax (e.g., *ngIf, [(ngModel)]) and React uses JSX which mixes HTML and Javascript in the same file. Angular’s approach is good for structured apps where separating logic from markup helps maintain clarity. On the other hand if you need highly dynamic rendering logic React’s JSX might feel more intuitive.

Dependency injections

One of the core architectural features of Angular is its built-in dependency injection system. This allows you to define services that can be injected into components or other services, making it easy to manage shared logic like API calls and state. In React, there’s no built-in dependency injection mechanism and shared logic is typically managed through context, hooks, or external libraries. While this offers more flexibility, it can also lead to inconsistent patterns across a codebase.

Overall I’ve enjoyed learning Angular and can definitely see the benefits when building larger, more structured applications where having a clear architecture, built-in tooling, and strong typing from the start really helps.

Resources for learning Angular

Angular Official Docs

Angular YouTube Channel

FreeCodeCamp: Angular For Beginners Course

Attending the SheCanCode hack day in partnership with Refuge

Boaty McBoatFace — Wed, 23 Apr 2025 01:00:00 +0000

Last month I attended the International Women’s Day Power Hack run by SheCanCode. The theme of the day was improving women’s safety and the charity partner was Refuge. This is something that is very important to me as I work as an advisor on the National Domestic Abuse Helpline and I built and maintain a domestic abuse services mapping tool . I was excited to build solutions to the problem of domestic abuse and other forms of violence against women and girls.

Screenshots from our prototype including journal and safety checklist pages

After a quick intro to the day and the work that Refuge does (as well as the day’s other partners - more details here) we split into teams and started work. My team had the idea of a diary application that would allow victims/survivors in abusive relationships to record instances of abuse. These diary entries could include text, as well as uploaded images and documents. We decided to build a web application instead of an app so that it could be accessed on any device.

One of the main challenges we faced was how to make using our application safe for (primarily) women in abusive relationships. We came up with various ideas for this including disguising the page as something else or accessing a secret hidden part of the journal. We also had to work within the time constraints of the hack day which meant that we focussed on making a minimum viable product. This allowed users to add, edit and view diary entries with metadata attached like the time and date posted.

For our tech stack we needed something full featured that we could set up quickly. We went for Next.js with a Supabase database for the backend. We used the component library shadcn to speed up the development of our frontend. We could only implement a minimal design in the time we had available. In the future I would like the design to be user friendly and meet high accessibility standards. It would be great to do some user testing to help achieve this.

The hack day ended with the teams presenting their work to all the other participants and the judging panel. Doing this meant that we could benefit from each other’s work and was an effective motivator in making sure that we had something to show! The discussion afterwards with the judging panel gave us feature ideas like generating statements to support applications for court orders and safety checklists. Sadly my team didn’t win the prize but we came a close runner up.

I had a really enjoyable day at the hack with a supportive and welcoming atmosphere and a good mix of skills and experience. I would recommend checking out the SheCanCode network and their events to all women in tech.

Challenges I've faced while building Domestic Abuse Services Mapped

Boaty McBoatFace — Sat, 15 Feb 2025 00:00:00 +0000

It’s been a hugely rewarding experience building Domestic Abuse Services Mapped. I’ve learnt so much about full stack development and product design. The response from users has also been overwhelmingly positive with some really helpful feedback on how to make the tool better. There have been challenges along the way however and I’m sure I will continue to face new ones as I maintain and develop the site.

Photo by Patrick Perkins on Unsplash

API calls and the costs associated with them

The project used to use two different APIs to deliver data to its front end - Mapbox and Airtable. Initially I was using the Mapbox API to calculate coordinates for each service every time the user loaded the page. Not only was this very slow but I rapidly ran up a bill with Mapbox that was over £100. Realising that this was not sustainable I started to calculate the coordinates once when I added a service to the database instead. This means a bit more up front work but results in a faster site that’s cheaper to run! More recently, I have used up all of the API calls Airtable gives as part of its free tier. I’m pleased to have gotten to this milestone but I’ll have to think about whether I want to move my database off Airtable to save money.

Designing the website with safety in mind

One of my major concerns throughout building this site has been the safety of its users and of the services it lists. My intention was always to display the services on a map to help users visualise where their nearest source of help might be. However many services do not list their address publicly for safety reasons. As a result I had to come up with a different way of indicating their location whether that was the location of the local authority or the geographic center of the area they serve. This is also why I don’t have refuges listed on the site but only community outreach services. I signpost all users looking for a refuge space to the National Domestic Abuse Helpline. Similarly, I’m aware that many people accessing the site may have their devices checked or monitored. I have a safe exit button that users can click to leave the site if they are disturbed whilst browsing. I have instructions on how to clear the site from your browser history on multiple browsers and devices.

Modelling the relationships between my data

There are many different types of service that I want to list on the site and I needed to find a way to represent these. For example, a service may specialise in supporting South Asian women or LGBTQ survivors. The majority are domestic abuse services but there are also legal support services; pet fostering services and others. I have used filters to help users find the service that is right for them but it is difficult to balance this with making a user interface that is simple to use and understand. Another consideration has been displaying the relationship between a service and the local authority it is responsible for. One service can cover multiple local authorities so I’ve started to add that functionality to my local authority filter.

How to design an intuitive and accessible UI

As I’m a developer and not a UI/UX expert or a designer this was one of the biggest challenges for me. I used a component library called Daisy UI and its in-built themes to quickly build what I hope is an accessible and friendly user interface. I wanted the design of the site to be friendly and reassuring with a clean and modern look. I’m not sure if I have achieved this and I may consider hiring a designer to create a new visual language for the site.

This whole process has been a learning experience for me so each challenge is an opportunity to build my knowledge and skills. I’m looking forward to reading this post again in 6 months or a year’s time to see how much I’ve grown and what new questions I’m pondering.

2024 - year in review

Boaty McBoatFace — Sun, 29 Dec 2024 00:00:00 +0000

As we come to the end of 2024 I'm looking back on my third year of working full time as a software developer. This year I’ve been working on a personal project which helps victims/survivors of domestic abuse across the UK find their local support service. At Common Knowledge I’ve been contributing to a new product called Mapped. I’ve also been concentrating on trying to improve my knowledge of TypeScript and Python. This post explores some of the things I’ve been working on and learning this year as well as what I’m hoping for in 2025.

Photo by Eyestetix Studio on Unsplash

Domestic abuse services mapped

Alongside my job as a developer I am also an advisor on the National Domestic Abuse Helpline. I wanted to combine what I’ve learnt as a developer with my work supporting victims/survivors and so I created a tool that shows all the domestic abuse support services across the UK on a map. The user can filter the type of support they need and any specialisms that might apply for example, services for BAME women or LGBTQ survivors. There is also a postcode search so that victims/survivors and those supporting them can find the services nearest to them.

Learning TypeScript and Python with Execute Programme

Although I’ve used TypeScript and Python in my work at Common Knowledge I knew that there was a gap in my understanding of the fundamentals of both languages. This year I went back to basics and started to learn both from the ground up. To do this I used Execute Programme which is a learning platform built by developers for developers. I’ve been spending a few minutes per day on their Python and Typescript courses and seeing a big improvement in my skills.

Gutenberg plugin development

For many of the organisations we work with at Common Knowledge WordPress is the best choice for their website. Over the last few years WordPress has been migrating to the React based Gutenberg editor. Because our sites often include custom layouts I’ve been learning how to make custom Gutenberg blocks and plugins. One example of this is the custom events calendar I made for the new Pelican House website. It has been really fun to combine the powerful WordPress backend with all of the interactivity that React offers in the editor and on the page.

Mapped

At Common Knowledge in 2024 we have been building Mapped - a tool that helps organisers and activists enhance their membership lists with geographic and political data. I’ve enjoyed getting to work on a codebase over a longer period of time and observing how user feedback makes its way into the product roadmap. I’ve learnt a lot from my colleagues whilst we’ve worked on Mapped during pair programming and in code reviews. Doing more of a deep dive into visualising geographic data in Mapped has also helped with my domestic abuse services map personal project.

What I’m hoping for in 2025

I feel that 2024 was the year I moved past being a junior developer and I hope that in 2025 I can more confidently call myself mid-level. I would like to become as proficient in Python as I am in JavaScript and move on from TypeScript basics to more complex types. There are a few features that I would still like to add to my domestic abuse services map such as identifying a user's local authority based on their postcode. More generally I’d like to progress from just trying to get my code to work to making it more maintainable and extensible. I’m excited to see what the year will bring and thank you so much for reading!

Using LLMs as a tool when learning to code

Boaty McBoatFace — Fri, 18 Oct 2024 01:00:00 +0000

A lot has been written about large language models and their potential for replacing many jobs - including developers! One thing that is often overlooked however is how LLMs like ChatGPT or Claude can be a powerful learning tool. I’ve been using ChatGPT for a year both in work and personal projects and I’ve found it’s accelerated my progress. These are my tips on how to get the best out of LLMs to help you learn to code.

Photo by Emiliano Vittoriosi on Unsplash

Learning roadmaps

Tools like ChatGPT can generate personalised learning paths. Instead of researching which topics to study and in what order use the model to generate a structured plan for you. You can also ask it to curate the best resources (books, videos, tutorials) to reach your goal.

Coding challenges

LLMs can generate coding problems for you tailored to your abilities and interests. Use these to test your understanding of a topic and get personalised feedback on where you can improve.

Debugging help

LLMs can act as virtual debugging assistants. Paste a code snippet or error message into ChatGPT and use the model to help resolve the issue. Even talking through your code step by step with it can help illuminate problems.

Spaced repetition and active recall

One of the most effective ways to learn a subject is via active recall (something I’ve written about here). LLMs can generate study questions for you and implement a system of spaced repetition so that you can remember the answers easier.

Conceptual explanations

LLMs can provide detailed explanations of higher level programming topics like Big O Notation, Data Structures and Algorithms and Object Oriented Programming. If you’re struggling to understand a concept you can ask for examples, breakdowns or analogies.

Pair programming roleplay and mock technical interviews

You can use ChatGPT to pair on an issue or problem with you and offer insight and suggestions. You can even ask it to take you through a timed mock technical interview with structured questions and ask it for feedback afterwards.

Notes of caution!

There are a few reasons to be cautious about using LLMs for learning to code.

Answers can be inaccurate or contain mistakes and still be prevented as fact. This is why it’s important to understand the code generated and be able to assess its merits yourself. LLMs often provide the most standard solution to a problem but not necessarily the best one.

Using AI to write code for you will prevent you from understanding and remembering the basics of your language. Puzzling through code and getting to grips with syntax are essential parts of the learning process.

LLMs can produce code that is based on biassed, incomplete or copyrighted material. Never use AI generated code in your projects without knowing what it is and what it does.

Bearing this in mind I still think that AI is the most exciting new learning technology since the internet. For me its main advantages are to make learning personalised and adaptive without needing a tutor. I’m excited to use features like Chat GPT Voice mode and Memory over the next few months.

Notes from learning Typescript

Boaty McBoatFace — Sun, 25 Aug 2024 01:00:00 +0000

Over the last few weeks I’ve been diving into learning TypeScript from the ground up. It’s been a steep learning curve and sometimes it feels as hard as learning JavaScript all over again. It's very satisfying though to start feeling confident when working with types. These are my notes from learning TypeScript.

Photo by Andras Vas on Unsplash

What is TypeScript?

TypeScript is a strongly typed language that builds on JavaScript. TypeScript allows developers to define types for variables, function parameters, and return values and it reports errors when these types don’t match, TypeScript code is compiled into JavaScript before it runs in the browser or with Node.

Why use it?

The main benefit of using TypeScript is its capacity for error reduction. TypeScript’s static type-checking helps catch errors during development rather than at runtime. This reduces the likelihood of bugs, especially in larger codebases. In fact, it eliminates a class of bug (such and such a variable is undefined) entirely. Enforcing types mean that you as the developer will not be allowed to do something that you previously told the compiler you didn’t want to be able to do.

How I’m learning it

I’m learning TypeScript through an online platform called Execute Programme. This gives me short interactive lessons where I can test what I’m learning by writing and running real code. The thing I love most about Execute Programme though is that it prompts me to review previous lessons at increasing intervals. This really helps me to remember what I learn and is definitely helping me to solidify some of the concepts behind TypeScript.

Challenges

I have struggled with TypeScript frequently since starting to study it. The topics listed below have been the most puzzling for me so far but I’m sure there’s more to come!

Type unions and intersections
I am only just starting to grasp how these work and the difference between them. I couldn’t understand why when a variable could be either a number or a string you couldn’t then assign it to a number. I found this video that explains unions and intersections using set theory to be really helpful for this

Distinction between types and run time values
Part of why I struggled with unions and intersections was that it took me a while to understand that TypeScript doesn’t have access to run time values. This makes sense because types don’t exist at run time when TypeScript is compiled to regular JavaScript.

Index signatures
I’ve come across these recently and I’ve been caught out by type mismatches between an explicit property and an index signature. I’m learning that Index signatures can be thought of as an overall type for an object and individual fields need to conform to that.

I’m looking forward to looking back on this post in a few months when hopefully these things will be easy for me.

Future plans with TypeScript

Now that I feel I’m comfortable with the TypeScript basics course I’m hoping to finish the Everyday TypeScript and Advanced TypeScript courses on Execute Programme. I would like to convert my domestic abuse services mapping tool from JavaScript to TypeScript as well. Finally, I’m going to put my skills into practice by writing and reading more TypeScript code in my work at Common Knowledge.

Building a tool to map domestic abuse services across the UK

Boaty McBoatFace — Mon, 24 Jun 2024 01:00:00 +0000

Over the last few months I’ve been working on a tool that will map the hundreds of domestic abuse support services across the UK. I know from my experience working as an advisor on the National Domestic Abuse Helpline that it can be challenging for survivors, or those supporting them, to find the right service local to them. By creating a comprehensive and up to date database of these services and displaying them on a map I’m hoping to make this process easier. I’m excited to combine what I know about the domestic abuse sector and my skills as a developer to make something that meets this need.

The site is live at https://domesticabuseservices.uk/

Background to the project

I have been working as an advisor on the National Domestic Abuse Helpline since 2019. In that time I have answered hundreds of calls from women experiencing abuse; their friends and family members and professionals. Almost every call involves making a referral to a local domestic abuse support service but the names and contact details for these services can be hard to find. This is especially the case for survivors who may be in a point of crisis or for those who have additional support needs. Having done some mapping projects already with Common Knowledge I decided that I would build the map that I wish I had access to when I’ve been speaking with women on the helpline.

How it works

The database of services is an Airtable base that is connected to a Next.js application using the Airtable API. I’m using Mapbox GL JS which is a client-side JavaScript library for building maps in web applications to display the map of the UK and the points that represent the locations of the services. Using Mapbox also has a clustering feature that I’ve used to indicate multiple services within a set geographical area (in this case 10 miles) when the user is zoomed out. The site started off as a single page application built in React but as it’s grown larger I’ve migrated it to Next.js to take advantage of server side rendering. For CSS I’m using Styled Components which has helped me to keep my CSS modular and allows dynamic styling based on user inputs.

Challenges

One of the main challenges I’ve faced with this project is how to efficiently use the Mapbox geocoding API to fetch geographical coordinates for the postcodes for each service. I found that this process was taking a lot of time and slowing down the performance of the site as well as burning through a lot of Mapbox’s free tier - meaning that this would start costing me money pretty quickly. As a solution to this I have decided to store the coordinates in the Airtable base which eliminates the need to call this API and simplifies the code. I also noticed that I was doing some processing of the Airtable data on the client that would be better handled on the server. As a result I made an API and server side routes in Next.js that mean the client is free to do what only it can - for example user interactions.

Project roadmap

There are many things that I’d like to add to the site over the next few months. I’d like to convert the codebase to TypeScript to make it easier to debug and, as it’s open source, for others to maintain. I’m considering using a component library like shadcn to help me to iterate on the UI quickly as I’m not a designer. As most local domestic abuse services work within a specific local authority I’d like to add a visual layer to the map that shows local authority boundaries. Ideally the site would have translations in multiple languages and I’m looking at using the next-i18next package for this. Finally I’m conscious that the site should meet the highest accessibility standards and I’m using the Web content accessibility guidelines (WCAG) 2.1 to achieve this.

Thank you for reading and if there’s something you’d like to see on the site get in touch with me at anna_cunnane@proton.me

You can submit a service to be listed here

What I've learnt from working on a large software project

Boaty McBoatFace — Sun, 14 Apr 2024 01:00:00 +0000

For the last couple of months at Common Knowledge we have been building an application called Mapped. Generously funded by the JRRT, it aims to empower activists and organizers with mapping and data enhancement tools. We’ve been writing and speaking about the process of building Mapped on our website and at our launch event at Pelican House. Mapped is live in alpha and feedback is welcome. This post is about some of things I’ve learnt about from working on this project.

Photo by Artem Sapegin on Unsplash

One of the first things I had to understand was how we were going to build Mapped on top of an existing project (My Society’s Local Intelligence Hub). This was new for me as I had only previously created new projects from scratch. Forking Local Intelligence Hub gave us a ready made database schema; user authentication and relevant data that meant we could get up and running very quickly. Adding a NextJs app into a Python Django project and writing a GraphQl API to communicate between them helped me to better understand what people mean when they talk about distinct frontends and backends in an application.

Mapped has also given me the chance to dive into Next.js 13.4 and its app directory with nested routes and server components by default. This forced me to think about what makes using a client component necessary (like user interactions) and the sound architectural principles behind rendering as much as possible on the server. Nested routes helped me to grasp the page structure of Mapped at a glance even as it became bigger and more complex. One of the nice things about this project was that we could start the frontend from scratch which made it easier to use this version because we didn’t have to upgrade an existing codebase.

Another major design choice was to use a GraphQL instead of a Rest API in Mapped. This seemed somewhat counter intuitive to me at first. We would need to install a package like Strawberry GraphQL and write custom resolvers to handle Django’s ORM models and that seemed like a lot of extra steps. But I liked the flexibility and efficiency of GraphQL and how well it works with Typescript in NextJs. Our aim, which was to represent organizations’ member lists on maps with enhanced political data, which is the kind of complex and interconnected data that GraphQL was designed for. GraphQL can also better support real time data which is an exciting future feature idea.

It’s been really satisfying to work as part of the engineering team on a large software project. The complexity of the project and its scale has helped me to understand better the principles behind good software design. It’s also brought home to me the importance of having a good continuous integration/deployment pipeline and test coverage. I hope I get the chance to work further on Mapped or tools like it in the future.

What I've learnt from mentoring at coding meetups

Boaty McBoatFace — Mon, 12 Feb 2024 00:00:00 +0000

I’ve recently been mentoring at two Founders and Coders meet ups and it made me think about what makes a good mentor - specifically when learning to code. I can remember how it felt to be mentored while I was on the Founders and Coders course so it was useful to see it from the other side two years into my career. I think my experiences as a mentor have helped me improve my communication skills; taught me patience and understanding and refreshed my memory and knowledge of some foundational topics.

These are some general approaches and things I like to remember when I’m mentoring based on my experiences so far.

Photo by Roman Synkevych on Unsplash

Be a coach not a teacher

It’s important that as a mentor you encourage people to find out the answers themselves rather than telling them what to do. This is because we want to empower people to solve problems as developers which involves looking at the documentation; trial and error and perseverance. I challenge myself not to touch somebody’s keyboard or mouse for the whole session! Part of the balance of being a mentor though is realizing when something might be too challenging and guiding people through a realistic learning path so that they don’t become discouraged.

Have empathy for other people’s feelings and struggles

I know that learning to code can be really frustrating and that it’s difficult not to get emotionally involved in whether or not something is working. That’s why I try to be empathetic to what that person is feeling and allow them to express that and to make mistakes without judgment. I think this is particularly important when somebody has different struggles to you because it may be harder to imagine yourself in their place. I try to remember that nothing about learning something new or coding is easy and that I still frequently feel out of my depth.

It’s okay not to know the answer

Initially when I was mentoring I was anxious that I wouldn’t have the answer to someone’s question or that they would be working on something that I’m not familiar with. I’ve realized that my job as a mentor is to provide guidance on how to go about debugging something rather than having direct experience of that particular framework or language. It’s also important to model how a developer reacts to things going wrong and show that this is part of the learning process and actually where we learn the most - even if it doesn’t feel like that at the time.

Encourage peer to peer learning

One of my main jobs as a mentor was to facilitate mentees learning from, and teaching, one another. Not only is teaching a great way to solidify learning, it means that help can come from any member of the group and not just the mentors. Learning to code can be isolating and so having a supportive community at meetups gives people confidence in their ability and motivation to continue. At the same time I try to be attentive to group dynamics so that if anything seems unbalanced or someone needs a bit more support I can intervene.

I’ve really enjoyed my time mentoring at Founders and Coders so far and I look forward to doing more of it in the future. If you are interested in applying for Founders and Coders you can find out more information here. If you are a developer looking for opportunities to mentor check out Codebar

2023 - year in review

Boaty McBoatFace — Thu, 28 Dec 2023 00:00:00 +0000

I’ve enjoyed blogging about my progress as a developer this year so this is my end of year round up of the highlights of 2023. In this post I’m going to look at what I’ve learnt; the challenges I’ve faced this year as well as what I’m hoping for in 2024. This is my second year working full time as a software developer and it’s encouraging to see how far I’ve come particularly when building a new career feels hard. I hope it’s helpful for everyone learning to code or early career developers.

Photo by Pawel Czerwinski on Unsplash

What I’ve been doing

I’m really proud that in April this year I passed my BCS L4 Software Developer apprenticeship with a Merit. My final project was a rebuild of my employer Common Knowledge’s website which I finished in February. The support both from Common Knowledge and Founders and Coders where I did my initial 12 week training programme has been incredible and helped me get this result. I’m really happy that after the completion of my apprenticeship Common Knowledge offered me a job as a junior developer which is what I’m doing now. This year I’ve worked on a range of projects for them including migrating climate organization 350.org to WordPress Gutenberg and assisting with a new website for The Architecture Lobby. A highlight was building a website for the Solidarity Knows No Borders campaign in collaboration with Migrants Organize. In my own time I’ve also built a new portfolio site that I’ll be launching soon and I’ve started work on a project to map domestic abuse support services across the UK.

What I’ve learnt

In 2023, as well as gaining confidence as a developer generally, I have focussed on these areas:

Understanding WordPress as a CMS or backend with an API that can be used with any frontend has been exciting for me this year
WordPress has transitioned to a React based UI called Gutenberg for its editor and I’ve enjoyed learning how to make my own blocks and plugins for this environment.
I’ve been learning to develop block based themes in WordPress which allow editors to customize almost all elements of a site.
I’ve started to use Alpine Js which is a lightweight JavaScript framework for adding bits of interactivity to web pages.
I’ve made my new portfolio site with static site generator Eleventy and I’ve appreciated its simplicity and the level of control it offers developers
I’ve been working with geographic data for Solidarity Knows No Borders and my domestic abuse services mapping project and Mapbox has been a great tool for this. I’m proud of the clustering feature I implemented on this page.

The Challenges

Inevitably as part of the learning process I have had plenty of challenges and difficult moments in 2023. I have struggled a lot with feeling that I’m working very slowly particularly compared to more senior developers. I know that speed will come with time and experience but it’s very tough day to day to feel that I’m not contributing enough to the team. Another challenge has been keeping my CSS organized without using a framework. I’ve tried very hard to improve my understanding of PHP and WordPress from the ground up but I’ve still found modifying the query loop block difficult.

What I’m hoping for in 2024

In the new year I’d like to:

Make more personal projects to add to my portfolio
Build on what I’ve learnt this year on creating custom user interfaces in WordPress Gutenberg and even make my own plugins
Get better at manipulating data in code and performing data migrations
Make more realistic time estimates at the beginning of projects
Learn more about project management and take on stewardship of more complex projects at Common Knowledge
Be part of exciting projects like Mapped with Common Knowledge

Thank you for reading and good luck with your coding in 2024 and beyond!

What I’ve learnt about WordPress development at Common Knowledge

Boaty McBoatFace — Sun, 05 Nov 2023 00:00:00 +0000

At Common Knowledge we work with organisers and grassroots groups to improve their websites and digital infrastructure to maximize the impact of their work. We think that WordPress is a good solution for many of our collaborators as it’s easy to use and has a powerful content management system. This post is about what I’ve learned about the modern WordPress ecosystem since joining Common Knowledge and how it has improved my work.

Photo by Fikret tozak on Unsplash

Bedrock

Bedrock is a WordPress boilerplate with an improved folder structure that separates the application code from core WordPress files and plugins. It uses Dotenv to manage environment-specific variables and keep sensitive data out of version control. It also means that I can manage dependencies like plugins and WordPress/PHP versions via Composer. Using the Bedrock set of standards helps me to get closer to a 12-Factor App methodology with WordPress.

Block editor

The block editor (also known as Gutenberg editor) is now the default content editor in WordPress. It uses a modular approach where content is organized into individual blocks to create complex layouts with a drag and drop interface. The real-time preview feature allows users to see what the content will look like on the page without previewing or saving. I do a lot of my development work in the block editor to create reusable patterns for our collaborators to customize as they wish.

Full Site Editing

Full Site Editing builds on the block editor to allow users to edit every element of a WordPress website including headers, footers, and content templates. I use the theme.json file to define settings such as colors, typography, and spacing to ensure design consistency. I try to write as little custom CSS as possible and allow all styling to be done within the editor. Setting up the site in this way means that when I hand it over, collaborators can easily generate new pages and content without needing any coding skills.

Custom Gutenberg blocks

Gutenberg is built in React which means it’s highly extensible for developers to create their own blocks. I’ve been learning how to use the @wordpress/create-block package to make reusable blocks with custom design and functionality. For example, a campaign site may want a custom sign-up block that integrates with a third-party mailing list service or a block that displays a real-time map of member activities. It also means that I have to rely less on third-party plugins.

Renovate

I use the Renovate package to help me automate dependency updates for Composer in my WordPress repositories. Renovate runs scheduled checks to extract the project dependencies from the composer.json file which it then checks against a directory like WP Packagist. If it identifies an update it creates a PR for the latest version and often includes a change log or release notes. A complaint about WordPress historically has been the security risks from out-of-date plugins so Renovate is really important in managing this risk.

All of the above techniques and tools have helped me to build bespoke WordPress projects faster and with a better developer experience. I’m hoping to start writing my own plugins for the Gutenberg editor and will be writing a blog about that experience.

Links and tutorials to check out:

Month notes September

Boaty McBoatFace — Sat, 07 Oct 2023 01:00:00 +0000

Developing my new personal website with Eleventy.js 🤖 Preparing for Platform.org site launch 🏗️ Optimizing my WordPress workflow 💼 Starting development work on new Solidarity Knows No Borders website ✊

What I’ve been working on

This month I’ve been helping to finish off the Platform.org website ahead of its launch. This included fixing some CSS bugs and adding JavaScript features like a counter on the number of search filters selected. I’ve been working on optimizing my WordPress workflow in general by making sure I’m using all of the possible styling options in theme.json and using the create block theme plugin. I also took part in some user testing sessions with the Figma prototype of the Solidarity Knows No Borders website. I set up the repository for this new project and started some initial development work like creating the header, footer, and a custom post type. On my personal site, I’ve been designing and developing the landing page which you can view in progress on the staging site.

What I’ve been learning

This month I’ve been learning how to:

Use the create block theme plugin to quickly generate a block-based WordPress theme
Use eleventy collections to organize the content on my new website
Integrate Google Sheets with gravity forms so that form entries are automatically added to a designated Google Sheet
Add renovate to a repository to manage PHP composer dependencies
Use the mapbox API and the carbon fields library to create a custom map component on a WordPress site

What’s next

Over the next month, I’m going to be the main developer building the Solidarity Knows No Borders website. The site will be a home for this community fighting for migrant justice & dignity, and I’m very excited to be involved. I’m looking forward to building on my existing knowledge of WordPress Full Site Editor to build a beautiful and easy-to-use site within a limited timeframe and budget. There are some components in the design such as the map of member organizations and resources that need to be translated into multiple languages that will be technically challenging. It will be interesting to see how I can implement them and hopefully what I’ve learned into future projects. On my personal website, I’m aiming to build my projects portfolio page which should display the best of my work over the last two years.

Interesting links

These are some interesting links that I’ve come across this month:

Unicorn Club is a 5-minute weekly newsletter for front-end developers and code-savvy designers
WordPress playground runs a full sandboxed WordPress site in the browser
Sizzy is my favorite tool for testing websites on multiple devices and browsers
Paweł Grzybek explains how Git worktrees mean the end of messy stashes and wip commits
Frontendchecklist.io includes 88 points to keep in mind before you launch your website

An update on my new website

Boaty McBoatFace — Sun, 03 Sep 2023 01:00:00 +0000

Over the last couple of months I’ve been rebuilding my personal website with Eleventy. This post is an update on that work.

Why move from the original site?

I wrote the original site with Gatsby but Eleventy is a more lightweight static site generator with faster builds and performance
I knew that I wanted to use another SSG because I’m not using a CMS (my current blog content is in Markdown) and I could continue to host with Netlify.
My current site was written over three years ago and I’ve learnt a lot since then. I wanted a site that reflects my current ability.
I was interested in learning how to use Eleventy and it gave me the opportunity to learn the templating language Nunjucks.

What is the MVP of the new site?

I set the target of getting an MVP (minimum viable project) completed by the end of this year. The MVP includes the following:

A portfolio section to showcase my work
A dedicated space for my blog posts
A beautiful looking landing page that contains my portfolio; an about me section and a contact form using Eleventy Edge Forms
Tags to organise my blog content (using Eleventy collections)
Frontmatter on my blog posts with summary, post date and tags
Google Analytics set up and meta tags generated by eleventy-plugin-seo
An RSS feed for the blog created by eleventy-plugin-rss
A ‘good’ Lighthouse score and accessibility checks using the WAVE tool

Site Design

There’s a lot of work still to do on the design of the site. I am looking for inspiration at sites like Dribble and Behance. I am using IBM Plex Mono as my heading font and Inter for body text to create a modern and minimalist look with an emphasis on readability. At the moment I’m using a blue and orange colour palette but even if these change I would like plenty of white space with one or two accent colours. I would also like to add some scroll animations on the landing page. As I’m not as confident with design as I am with development I will probably get a designer friend to look over the site and give their feedback

The work in progress home and blog index page:

Developer experience

So far the experience of switching to Eleventy has been smooth. As Eleventy supports Markdown out of the box I transferred my blog over and put it online with Netlify within an hour. The documentation is comprehensive and well structured and has helped me to implement features like pagination and tags on my blog. Eleventy allows me to write JavaScript functions to fetch post data whereas with Gatsby I used GraphQL which was probably too complex for my needs.

Future iterations

Next year I’ll be adding more functionality to the site as well as posting blog content. I'm thinking that this will include:

A light/dark mode toggle
More custom filters for displaying post metadata on the blog index page. I’m already using one for dates but it would be nice to have time to read or table of contents.
Support for embedding content from Twitter, TikTok, YouTube etc within Markdown
A more privacy conscious analytics provider like PostHog

For more information on Eleventy Js check out the docs and 11ty.rocks

Look out for more updates and the site launch!

Month notes - July

Boaty McBoatFace — Sat, 22 Jul 2023 01:00:00 +0000

Notes from July

Security scanning; block-based themes and building Gutenberg blocks in WordPress 🧱 Launching the Architecture Lobby website 🏢 Debugging a Django app using the Shopify Python API 🛒

Photo by Glen Carrie on Unsplash

What I’ve been working on

This month I’ve made a staging environment for my new personal website on Netlify and put the first (very basic) version of the site live. I’ve been impressed at how quickly I was able to transfer across much of the existing content from Gatsby and how nice Eleventy is to use. At Common Knowledge I’ve been improving the new Architecture Lobby site’s visual fidelity to its Figma design and removing redundant code ahead of its launch. I also pair programmed with a colleague to debug an issue with syncing products to a Django app using the Shopify Python API. This involved thinking about Python data types; checking that the API was returning valid JSON and running migrations to update the Postgres database.

What I’ve been learning

This month I’ve been learning how to:

audit a WordPress site for security issues using the WP-CLI Vulnerability Scanner package
understand and use the different parts of block-based WordPress themes such as templates, template-parts and patterns
use the Convert to Blocks plugin to convert classic WordPress editor content to Gutenberg blocks
create custom Gutenberg blocks with React with the @wordpress/create-block tool
configure Global settings and styles for the WordPress Full Site Editor in the theme.json file

What’s next

In August I’m going to be creating a workflow for handling WordPress multisite installations with Bedrock. I’m also expecting to start work on a new website for a project called Solidarity Knows No Borders which is part of the Migrants Organise Campaign Group. I’ve already done some technical discovery for this project including research on how to implement a map that displays locations of local groups within the organisation. I’m planning to add some styling to the blog page on my new personal site. I would like to spend some time thinking about the structure behind my approach to the WordPress Full Site Editor and what is appropriate to put in templates versus page content or patterns.

Interesting links

These are some interesting links that I’ve come across this month:

https://fullsiteediting.com/ is a comprehensive tutorial for the WordPress Full Site Editor and writing block-based themes
https://devdocs.io/ combines multiple API documentations in a fast, organised, and searchable interface
Kara Luton, engineer at CrowdStrike has a guide to perfecting pull requests
Git Command Explorer helps you find the commands you need without Googling
A detailed explanation of how to create a fluid type scale from the creator of Fluid Type Scale Calculator, Aleksandr Hovhannisyan (source)

Month notes - June

Boaty McBoatFace — Tue, 27 Jun 2023 01:00:00 +0000

Notes from June

Google Analytics migration to GA4 🔍Design QA for SWARM website 💅 Diving into WordPress Full Site Editor for developers 🤿Tech discovery for Solidarity Knows No Borders 🧭

Photo by Glen Carrie on Unsplash

What I’ve been working on

This month I’ve been working on a Google Analytics integration with the Left Book Club website. This involved migrating to Google Analytics 4 and setting up custom events to measure ecommerce events such as purchases and subscriptions on the site. I’ve been completing design QA tickets on the SWARM website and finishing pages like search and category index pages as well as thinking about how to add an application form page that won’t be indexed by search engines. Finally, I’ve begun working on my personal portfolio site with static site generator Eleventy.

What I’ve been learning

This month I’ve been learning how to:

Use the WordPress Full Site Editor to develop fully customizable block-based themes.
Use feComponentTransfer to create a duotone filter effect on images
Integrate existing layouts and styles into WordPress plugin AJAX Load More via a repeater template
Extend the inbuilt Query Loop Block in WordPress by registering a block variation
Display Mapbox data in a custom Gutenberg block with library CarbonFields and plugin Mapster WP Maps

What’s next

In July I want to get an MVP of my personal portfolio site online. I will also be moving this blog across to the new site so next month's notes will be posted there ⭐ I will be helping finish off the build for the Architecture Lobby website. I am expecting to start work on a website redesign and build for Solidarity Knows No Borders which is a campaign group and coalition run by Migrants Organise.

Interesting links

These are some interesting links that I’ve come across this month:

Egghead.io is my favourite resource for web development tutorials. These are their current free courses.
Phind is a developer-focused search engine that uses generative AI to search the web and answer technical questions
Dev Mode is a new workspace within Figma design specifically for developers
WordPress Playground runs in the browser with instant set up. Great for testing and previewing pull requests.
Chris Coyier looks at 5 new CSS features that are in use now across the web

Month notes - May

Boaty McBoatFace — Tue, 30 May 2023 01:00:00 +0000

Notes from May

The launch of the 2023 The World Transformed festival 🚀 Successful Bedrock deployment with 350org 🌎 Adapting an existing WordPress theme for the new SWARM website 🐝

Photo by Glen Carrie on Unsplash

What I’ve been working on

This month I’ve been helping get The World Transformed website ready for the launch of their 2023 festival. This included some site enhancements like allowing editors to customise background and text colours of streamfield blocks and adding a video player to the full width header image. I have continued supporting 350.org with their transition over to the Bedrock pattern for their WordPress sites. This month we successfully recreated and deployed a production 350 site with this new stack. Finally, I’ve been adapting the Schematic WordPress theme so that it can be reused for the SWARM website redesign.

What I’ve been learning

This month I’ve been learning how to:

Programmatically fetch raw Shopify data using the ShopWP plugin and display it in a custom WordPress Gutenberg block
Use the poster attribute in the video element to display an image until the video content is ready to be played
Retrieve data from a WordPress post field based on the post ID with the get_post_field() function
Create section layouts in JSON for a custom WordPress theme
Add a color picker to the admin interface in a Django Wagtail project with the django-colorfield package

What’s next

In June I’ll be finishing my work on SWARM and preparing the site for launch. I am expecting to start a new project building a new site for indigenous communications network Awasqa. I’m taking a break towards the end of the month to work on personal projects including a new portfolio site that I hope to be porting this blog to soon.

Interesting links

These are some interesting links that I’ve come across this month:

Guide to AI is a monthly newsletter that analyses the most important developments in AI
Get a one minute CSS tip every day
A Python library to draw beautiful maps from OpenStreetMap data
Eleventy rocks is a collection of starters, plugins and resources for the static site generators
The Vanilla JS toolkit is a collection of tools and snippets for JavaScript without frameworks

Month notes - April

Boaty McBoatFace — Sun, 30 Apr 2023 01:00:00 +0000

Notes from April

Receiving my apprenticeship result 👩‍🎓 Building a new website for campaign group Swarm 🐝 Adding new features to The World Transformed site 🏭 Support work for membership organization The Left Book Club 📕

Photo by Joanna Kosinska on Unsplash

What I’ve been working on

I received my apprenticeship final grade in April and I’m very proud to say that I passed with a Merit. I’ve signed a further contract with my apprenticeship employer Common Knowledge so I’m now a Junior Engineer and looking forward to learning more with them over the next year. Aside from that, I’ve been adding features to The World Transformed site in preparation for this year’s festival and doing some bug fixes for The Left Book Club - specifically to do with their Shopify integration.

What I’ve been learning

This month I’ve been learning how to:

Add a .nvmrc file to repositories to specify which Node version should be used with a project
Use the linearGradient element to recreate a Photoshop gradient map with an SVG
Use the Wagtail Menus package to create different editable menus and custom menu templates for a site
Set up an SSH connection to a WordPress installation hosted on Kinsta and use git to clone a repo into it
Set up a Cron Job to run the Django command publish_scheduled_pages every half hour

What’s next

In May I’ll be finishing the SWARM website build. I will also be working on the new site for indigenous communications network Awasqa. I’m assisting a colleague with a WordPress site for The Architecture Lobby and I will likely be doing some additional devops support work for 350.org. I want to dedicate some personal time to creating a new personal site with a portfolio and migrating this blog. I haven’t decided yet which language or framework to use but I’m considering something like React and Sanity.io.

Interesting links

These are some interesting links that I’ve come across this month:

Trigger GitHub Actions and view status and logs directly from the editor with this VSCode extension
A collection of JavaScript interview questions and answers that are helpful for preparing for job interviews
This Smashing Magazine article explains how the :has() selector could soon become a game-changer
A comprehensive collection of techniques developers can use to optimize their web apps from Stripe engineer Joe Liccini
The NerdOut@Spotify podcast produced by the Spotify engineering team gives an insider look into their work

Working on the new Common Knowledge website

Boaty McBoatFace — Sat, 25 Mar 2023 00:00:00 +0000

For the final part of my Software Development Apprenticeship I’ve been working on a new website for Common Knowledge. Common Knowledge makes digital tools to help social movements build power. They needed a new website that could be updated with a CMS and could better display the range of work that the co-op does.

Website stack 🥞

Wagtail CMS 🦜

I built the site with Wagtail which is an open-source content management system (CMS) built on the Django web framework. I chose Wagtail for this project because it has a user-friendly admin interface that makes it easy to add and update content. It is also fully customizable and extensible with a range of packages and plugins available and an active developer community. Wagtail also inherits Django’s built-in protection from common security vulnerabilities in web applications.

Tailwind CSS 💅

For CSS I used Tailwind which helped speed up the development process as it gave me access to thousands of in-built utility classes that I could add directly into my HTML. I set up a Tailwind configuration file where I declared values for colours, a type scale, fonts, and breakpoints. This helped me to quickly apply a consistent design and visual style to the site.

Stimulus JS ⚡

I used Stimulus which is a lightweight JavaScript framework to add small reusable snippets of JavaScript into the HTML templates I already had with Django. I avoided using a framework like React because it would add an unnecessary amount of files for what would be a relatively simple functionality.

What went well ✅

These are some of the highlights from the project:

Using Wagtail meant that I could get a site set up with a full content management system and user authentication within minutes.
Wagtail also allowed me to create custom mixed content blocks (known as Streamfields) that can be reused across the site.
Using Tailwind minimized the risk of conflicting styles in my CSS and made it easier to debug in the DevTools Inspector. I also didn’t have to switch between HTML and CSS files while I was developing or think about how to name my CSS classes.
With the Fly.io CLI I could create and launch an app on Fly from my terminal. This combined with a GitHub Action made deploying to the staging environment for the site really smooth.

Biggest challenges 🚨

There were, of course, bugs and challenges throughout the project:

One of the things I struggled with the most was working with Django migration files. These files contain the SQL that Django needs to create, update or delete database tables. I occasionally found that the files conflicted with one another or that they had become out of sync with the state of my local database. To debug this I learnt a lot about SQL and how Django keeps track of migrations.
I used the Turbo for page transitions within the site but this also prevented the browser from loading any JavaScript that was not within a Stimulus controller without a full refresh. To fix this I recreated the JavaScript behaviour I wanted for the navbar from within a Stimulus controller ensuring it would work in conjunction with Turbo.

Future improvements 🔮

Although my full-time work on this project has come to an end there are some improvements I would like to make in the future. One of these is to theme the CMS admin interface with the Common Knowledge brand colours. I would also like to add an option for the visitor to select a colour scheme that provides a higher contrast than the default. Lastly, there are definitely performance improvements I can make by replacing jpeg images with WebP formats and caching static content.

Month notes - February

Boaty McBoatFace — Sun, 12 Mar 2023 00:00:00 +0000

Notes from February

Wrapping up the Common Knowledge website project 🎁 Working on building a CI/CD pipeline with WordPress and Bedock 🔧 Learning more about Python 🐍

Photo by Behnam Norouzi on Unsplash

What I’ve been working on

I’ve been wrapping up my work on the new Common Knowledge website with tasks like integrating PostHog for product analytics, switching the domain over from the staging site to production and fixing some bugs that came out of the QA process. I also set up a Bedrock sandbox site to test integrating an existing multisite WordPress installation with a modern CI/CD process and version control.

What I’ve been learning

This month I’ve been learning how to:

add private GitHub repositories as dependencies in Composer
use Tocbot to build a table of contents from headings in an HTML document
create custom template tags and filters in Django
use jq to slice, filter, map and transform JSON data
use a named tuple in Python to create tuple subclasses with named fields

What’s next

In March I’ll be continuing the migration of the 350.org WordPress digital estate over to Bedrock. I’ll be picking up support tickets on projects like Smart Forests, the Left Book Club and the In Deep Water Report. I’ll also be doing a deep dive into Next.js, React and TypeScript to build on my knowledge from the Founders and Coders curriculum.

Interesting links

These are some interesting links that I’ve come across this month:

CSS Weekly is a website that provides a weekly roundup of CSS related news, articles, tutorials, and resources.
Learn how to make ten modern layouts with just one of line of CSS each
12factor.net is a website that describes a methodology for building applications that are scalable, maintainable, and resilient
The Arc Browser wants to change the way we view the web
Developer Stefan Judis shares three VS code extensions that help with navigating code

Month notes - January

Boaty McBoatFace — Sun, 29 Jan 2023 00:00:00 +0000

Notes from January

🚧 Building the new Common Knowledge website. ✍️ Writing a project report for my apprenticeship. 📝 Writing technical notes each week of the project.

Photo by Glen Carrie on Unsplash

What I’ve been working on

This month has been dedicated to my final project for my apprenticeship - a rebuild of the Common Knowledge website. Working from designs created in Figma (by our co-op designer Gemma) I have created a CMS in the Django based framework Wagtail. I have also built custom HTML templates and a CSS theme with Tailwind. I’ve written notes from each week of the project summarizing my main learnings which can be viewed here.

What I’ve been learning

This month I've been learning how to:

build custom Page models and StreamField blocks with Django and Wagtail
write database queries with the Django ORM
write end-to-end tests with Cypress and unit tests with Pytest
use the Stimulus JavaScript framework with Django
use the Flowbite library for UI components
set up a staging site on Fly.io

What’s next

In February I’ll be moving onto other project work with Common Knowledge. I’ll also be attending two interviews with the apprenticeship assessors.

Interesting links

These are some interesting links that I’ve come across this month:

Quincy Larson, the Founder of Free Code Camp, has published a book-length guide to learning to code for free
The 2022 State of JS survey identifies upcoming trends in web development to help developers make technical choices
Generate fluid typography code snippets using the CSS clamp function with this app
The Web Development Reading List curates the best and latest articles on HTML, CSS, JavaScript, and PHP

2022 - year in review

Boaty McBoatFace — Thu, 29 Dec 2022 00:00:00 +0000

Since I’ve been writing monthly round ups recently I thought it made sense to review 2022 in December. This time last year I had just finished the Founders and Coders full time course and was about to start work full time at Common Knowledge. I’m really proud of what I’ve achieved in my first year working as a developer. Below are some of the highlights of my year and the challenges.

What I’ve been doing ⚙️

Since January 2022 I’ve been an apprentice software engineer at Common Knowledge which is a not for profit worker co-op that works with a range of progressive organizations. I began by making small contributions to projects such as adding an email sign up form and progressed to making a one-page holding site for co-op client Future Natures. As the year has gone on I’ve taken on increasing responsibility from implementing features on the Future Natures website redesign to coding parts of the new The World Transformed site. Right now I’m building the next version of the Common Knowledge website and documenting my progress here.

Photo by Moritz Knöringer on Unsplash

What I’ve learnt 🎓

The Founders and Coders curriculum was JavaScript based but Common Knowledge also have a lot of projects in Wagtail and WordPress. As a result I’ve had the chance to learn the basics of Python and PHP. I understand more now about back end vs front end development and the different types of application architecture. I’ve gotten more familiar with CSS frameworks like Tailwind and Bootstrap and used JavaScript frameworks like Stimulus. I’ve practiced using Docker containers; writing unit and end-to-end tests and setting up (and deploying to) staging and production environments.

Challenges 🚨

Learning to code is full of challenges as there are always unexpected errors or things you hadn’t considered. It was difficult, especially at the beginning of the year, to read and write code in Python and PHP. Trying to absorb so much information on the job this year has meant some great highs and some frustrating lows. I’m definitely more persistent when I’m debugging now and I have more confidence when I approach a problem. I’ve had to accept that software development is not a linear process and that time spent puzzling over things is not wasted.

What I’m hoping for in 2023 🗓

In early 2023 I’m going to be submitting my final project report for my apprenticeship and going through two assessment interviews. I’ll hopefully receive my result for the BCS L4 Software Developer qualification by the end of March. After that I’m hoping for the same rate of growth right up to 2024 💫

Month notes - November

Boaty McBoatFace — Fri, 25 Nov 2022 00:00:00 +0000

Notes from November

🌍 Working on FutureNatures, StopWatch, and Humanitarian OpenStreetMap for Common Knowledge ✏️ Redesigning my personal website in WordPress 🗣 Practicing mock assessments for my apprenticeship portfolio review.

Photo by Kelly Sikkema on Unsplash

What I’ve been working on

This month has been full of a few different projects.

I’ve started to build a new personal website in WordPress
I picked up some supporting work for the FutureNatures website debugging some issues with a search and filter plugin
Added the option for embedding Shiny apps into pages on the StopWatch site
Common Knowledge is also working on a big redesign of the Humanitarian OpenStreetMap website, and I’ve been helping there with some UI components like a carousel slide and a newsletter sign up
With our Project Manager I’ve been planning and scoping the new Common Knowledge website - details below
I took part in mock interviews with Founders and Coders to prepare for my assessed portfolio review in the near future

What I’ve been learning

Over the past month I’ve learnt how to:

use Flowbite to build UI components with Tailwind CSS in Django templates
use meta_query inside WP_Query to order and filter by custom meta fields
use the Stimulus Carousel package (built on top of Swiper.js) to create a responsive carousel component. One really cool thing about this is the customisable SwiperOptions. In this case, I used them to determine the number of slides displayed based on screen size
create a custom EmbedFinder class in a Django application

What’s next

In December I’ll be working exclusively on my final project which will be a redesign and rebuild of the Common Knowledge website. This project and its documentation will form the second half of my grade for my apprenticeship. I’ll be the primary developer on this project which involves migrating the current Gatsby site with content in Markdown to the Django Wagtail CMS. I’ll be aiming to make a maintainable, performant and accessible website that will serve the business needs of Common Knowledge.

Interesting links

These are some interesting links that I’ve come across this month.

Figma Tailwind CSS - this plugin converts a Figma design directly into a Tailwind theme.js file for use in your projects
Storybook for Django - this is a UI development environment for Django components. Create and test UI components in isolation from your Django views.
A List Apart - a design magazine on all aspects of web design with a special focus on web standards and best practices
Hemmingway App - this app identifies lengthy, complex sentences and other mistakes to make your writing clearer.

Month notes - October

Boaty McBoatFace — Mon, 31 Oct 2022 00:00:00 +0000

Notes from October

In this post, I’m experimenting with a different format for my blog. Month notes are a format where I can share what I’ve been working on over the month and some of the things I’m learning. I’m hoping it will be useful for me to look back on as a learning diary and also for anyone wondering what the day-to-day life of an apprentice developer is like.

Photo by James Kemp on Unsplash

What I’ve been working on

I’m finishing up my portfolio to submit for the apprenticeship assessment process. This will be a summary of all my work for my employer (Common Knowledge) so far. Read more about the software developer apprenticeship and how it’s delivered at Founders and Coders at https://www.foundersandcoders.com/apprenticeship
I’ve started work on a redesigned WordPress website for Common Knowledge client The Architecture Lobby. We are still in the design phase of the project so I’ve been working on establishing the infrastructure like the GitHub repo, getting the site running smoothly locally, and setting up continuous integration

What I’ve been learning

Over the past month I’ve learnt how to:

install Bedrock (a modern WordPress boilerplate) and add seed content from an existing theme
use PhPMyAdmin and SQL to work with a WordPress database
create custom post types in WordPress
use the Carbon Fields plugin to create custom metadata fields on WordPress posts
display custom metadata in WordPress template files
use rsync to synchronize files between GitHub and a web host and how to automate this in a GitHub action for continuous integration

What’s next

Soon I’ll be:

Discussing my portfolio with my apprenticeship assessor
Building out The Architecture Lobby site based on Figma files from our co-op designer
Starting discovery work on a WordPress upgrade for a book publisher and whether we can use WooCommerce integrated with ONIX to replace their existing solution
Starting work on my final apprenticeship project - a redesign of the Common Knowledge website

Interesting links

These are some interesting links that I’ve come across this month:

Run your GitHub Actions locally with this utility https://github.com/nektos/act
Find out how big that npm package really is https://bundlephobia.com/
Chris Coyier (from CSS Tricks) explains how the web is good now https://youtu.be/F18oy48jkrk
Documentation for shell scripts 🐚 https://explainshell.com
There’s a name for that illustration style you see everywhere! https://t-artmagazine.com/what-is-corporate-memphis-and-why-is-it-everywhere/

Tips for reading code (for new developers)

Boaty McBoatFace — Fri, 16 Sep 2022 01:00:00 +0000

Tips for reading code (for new developers)

One of the most important transitions new developers need to make is from working on their own projects to existing codebases within larger teams. Most often working as a developer involves extending and maintaining code that’s already been written. This means that being able to read other people’s code is an important skill. Looking at code and trying to understand it can often be difficult and intimidating but there are ways to make the process easier.

Read the documentation 📖

If there is documentation available for a project it’s important to read it. Established frameworks, libraries and APIs will usually have well maintained and extensive documentation to help the millions of developers who use them. Even on smaller projects READMEs often contain set up instructions and list the technologies and dependencies used.

Download the code and run it locally 🚂

To understand how code works there’s nothing better than downloading and running it locally. It’s helpful to start with a small piece of the code that you understand and trace it carefully back through the application. Examine each unknown part in the context of what you already know and gradually the whole picture will start to appear.

Use debugging tools 🔍

When you run into an error or something you don’t understand in the code you can use debugging tools like VS Code Debugger or Browser Dev Tools. Set breakpoints in the debugger to inspect variables as you run the programme. Viewing computed styles using the CSS panel in Dev Tools is a really helpful way of seeing which CSS properties are being applied and how by the browser.

Take a higher level approach ☁️

Stepping through the code is important but you also need to get a sense of how the whole project fits together. Is there a database and if so what type? Does the project have a front end and back end? How is it deployed and hosted? Where is the business logic contained? Try talking through this out loud or drawing it out on a piece of paper.

Read comments, commit messages, GitHub discussions and code reviews 📜

Comments can clarify what code is intended to do and why the developer(s) may have made certain choices over others. Commit messages record the evolution of the project and the scope and purpose of changes. Developers working on a project will often discuss their approaches in issues and when reviewing each other's PRs.

Look at the tests 🧪

Tests are another indication of the purpose of a programme. Test suites often have statements that assert what a feature does for example the below in the popular testing library Cypress:


describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the test page
        cy.visit('https://demo.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Edge cases used in tests show the boundaries of what the code is expected to be able to deal with. Rarely is everything in a codebase tested so they can point you towards the most critical parts.

The best way to get better at reading code is practice. Expose yourself to high quality code samples regularly whether at work or in open source projects. Reading code will help you write better and more maintainable code yourself.

My experience as an apprentice at Common Knowledge

Boaty McBoatFace — Wed, 17 Aug 2022 01:00:00 +0000

This blog was originally posted on the Common Knowledge website.

I’m Anna and I’m a software engineering apprentice at Common Knowledge. I thought it might be interesting to write about my experiences as a software engineering apprentice since September 2021.

I used to work in book publishing but about 3 years ago I started learning to code in my spare time. I started with just a few minutes a day and taught myself the basics of HTML, CSS, and JavaScript.

I was attracted to coding as a way of solving real-life problems. It felt like an almost magical power to be able to think of something and then create it in code.

Once I felt like this was something I wanted to do full-time I started looking at software development bootcamps in London.

I decided on Founders and Coders because

Tuition was free
The apprenticeship route was available
The entry requirements were rigorous
It had good reviews within the industry
I liked the emphasis on inclusion

What is a software development apprenticeship?

The software developer apprenticeship (Level 4), as delivered by Founders and Coders, is split into three parts. It starts with sessions delivered in the evenings focusing on web development skills and employability. This was the most challenging part of the program for me as I was still working full time in my publishing job.

I then got the opportunity to meet the lovely people at Common Knowledge. I really identified with their mission and they were so friendly during the interview that I was thrilled when they offered me an apprenticeship.

The next stage in the process was 12 weeks of full-time study of Javascript, Node.js, and React. This period taught me about working closely with other people (which was even more difficult over Zoom) and getting comfortable with not knowing the answer.

My cohort dressed up for Halloween

Finally in January 2022 I joined Common Knowledge full time and started writing code for real client projects. I appreciated that I could get stuck in straight away and they gave me the space to try things myself and make mistakes.

For me, the apprenticeship was a great opportunity. It allowed me to get a job before I started retraining and significantly reduced the financial risk. It has set me up with real-world experience as well as a recognized qualification.

What have been the highlights of the apprenticeship so far?

I’m proud of the work I’ve done on FutureNatures.org. The site is built in WordPress with the Gutenberg FSE (Full Site Editor). We’ve used existing and custom blocks and post types for the different types of content that the site needs. We have written custom CSS for the theme that was developed by our brilliant designer Gemma.

I’ve had a lot of exposure to new frameworks and software development approaches since I started at Common Knowledge. It’s expanded my horizons and made me excited about the possibilities for my future learning and career.

I’ve also met some very cool people doing things I admire both within the co-op and within the larger movement that CK operates in. This is the kind of network I want to be embedded within for the rest of my career.

I’ve enjoyed getting an insight into how the co-op is run. Working within a co-op there is a real feeling of solidarity and mutual care.

And the challenges…

There have also been challenges during the apprenticeship. In particular, it has been difficult to start again in a new industry. I had a few years of experience in publishing so I was used to having a certain degree of competence.

Most of the time I don’t understand what I’m doing and I’m constantly pushing at the boundaries of my knowledge. This is the best way to learn but it doesn’t feel comfortable most of the time. My colleagues have told me that this is what being a developer is about and that you never stop learning. Common Knowledge has been great, however, at guiding me through this, and Founders and Coders have offered ongoing support.

I really hope that this post has been useful for people curious about getting into software development via the apprenticeship route. I’m hoping to finish my assessments and graduate from the program by the end of 2022.

You can follow my progress on Twitter. To find out more about Founders and Coders and apply go to https://www.foundersandcoders.com/

What is a headless CMS?

Boaty McBoatFace — Fri, 24 Jun 2022 01:00:00 +0000

What is a CMS?

A CMS or content management system is an application that helps users create, manage and modify content on a website. Most CMS are designed to be easy to use without knowing how to code. They typically have design templates to choose from and offer extensions and add-ons. A good CMS platform will allow you to easily import and export your content. Some commonly used CMS are WordPress, Django, Drupal, Wix and Joomla.

Headless CMS vs Traditional CMS

A traditional CMS has two layers: A presentation layer which determines how your content is displayed in the browser A database where the content is structured and stored.

This type of tightly connected structure is called “coupled” and it makes structural changes almost impossible without knowing HTML and CSS. The presentation layer

A Headless CMS separates the presentation layer (known as the “Head”) from the database with communication between the two happening via an API (application programming interface).

Headless API

Some traditional CMS platforms such as WordPress have developed their own API which allows users to apply a different language or framework on the frontend. This means that you get the best of this free and powerful CMS without being tied to its standard way of presenting content. WordPress has also adopted the Gutenberg editor which is written in a popular frontend framework called React.

Content infrastructure

Content infrastructure is a type of headless CMS but instead of arranging content around website pages it creates a content model. This model will break down the content into its component parts such as a newsletter sign-up, a headline or article copy. It will be collected into a centralized hub that can have different outputs such as a website, an app or internal collaboration and communication tools.

Why use a Headless CMS?

There are many advantages to using a Headless CMS including flexibility, scalability and enhanced security as the presentation layer is not connected to the database. This approach can be seen as the best of both worlds: allowing you to make the most of mature platforms like WordPress and Django with flashier options on the frontend.

There are even further benefits to content infrastructure which reduces content duplication and makes collaboration easier.

Read Contentful's Headless CMS explained in 1 minute

Get a list of open source (free-to-use) CMS from Geekflare

Advice for learning how to code

Boaty McBoatFace — Wed, 04 May 2022 01:00:00 +0000

Advice for learning how to code

When I was working in publishing I started learning to code by studying for 20 minutes each day. After about 18 months of doing this I did a bootcamp and got an apprenticeship in tech. This post gives some tips I have for anyone learning to code - especially alongside a full time job or other responsibilities.

Photo by J. Kelly Brito on Unsplash

Which language should I learn?

Most people start with HTML, CSS and JavaScript and these are still essential for working in web development. Languages like PHP, Python and Ruby are user friendly and general purpose. If you want to be a mobile app developer you should look at Kotlin for Android and Swift for iOS. Rust and Go are newer languages that are loved by developers and could be a good bet for the future.

Practice spaced repetition and active recall

Research has shown that some of the best ways to learn any new skill are spaced repetition and active recall.

Spaced repetition involves reviewing and recalling topics at optimally spaced intervals. This technique interrupts the brain’s natural forgetting curve allowing the information to be stored in long term memory. It’s difficult to work this out on your own so I use Execute Programme which also has the added benefit of getting me to actively recall the information.

Active recall means testing yourself to see how well you’ve understood something at every stage of your revision. It’s actually the process of retrieving information that helps your brain form memories faster. This method is much more effective than passively reading an article or watching a YouTube video.

Learn underlying concepts

It’s helpful to understand some fundamental concepts that underpin most languages and software projects. Variables, loops, objects and functions are ideas that you will come across time and time again. Understanding a bit about Big O notation could help you impress at interview. There are broadly three types of programming: function, object oriented and procedural. Knowing their strengths and weaknesses helps you make the right choice.

Build projects

You should be getting stuck into code quickly as you will learn the most from tinkering with it. Download the starter files for a YouTube tutorial and take it further by implementing new features. You could also create a clone of a popular site like Netflix or Instagram. Consider building a portfolio site and use it to host a blog where you write about what you are learning (like this one!)

Learn Git

Git the most widely used distributed version control system for software development. Regardless of what programming language you use, being familiar with Git is essential. You don’t need to know all the Git features and commands (most developers will never come across all of them) but you can learn the basics here. Git is most often used in conjunction with a service like GitHub, BitBucket or GitLab for hosting. Create a GitHub account and use it to show off your work.

Obviously there is way more advice about learning to code than I can cover here. These are just my views and the tips I wish I’d followed from the start. If you are interested in reading more about my journey to becoming a developer you can do so here.

For information about my bootcamp go to Founders and Coders

For online resources check out FreeCodeCamp and Scrimba.

Happy coding!

What is the WordPress Gutenberg editor?

Boaty McBoatFace — Sat, 09 Apr 2022 01:00:00 +0000

What is the WordPress Gutenberg editor?

WordPress is the most popular CMS in the world, and the Gutenberg editor is its most significant change since 2003. It was introduced in WordPress version 5.0, which came out in 2018, and it replaces the previous Tiny MCE editor with a block-based drag and drop interface.

The Tiny MCE editor was not well-suited to creating modern multimedia-heavy websites. To add media content or other HTML elements, you would need to paste code directly into the content box. It was difficult to see your changes without toggling back and forth between the editor and the live site.

Page builders like Elementor and Beaver came onto the market to allow non-coders to create complex layouts in WordPress. Gutenberg is a version of this built into the core of WordPress itself. To use it, you need to install the open-source WordPress software on a web host and choose or create your theme.

All pages and posts built with Gutenberg consist of blocks. These can be text, different types of media, shortcodes, and even layout elements like columns. For a complete list, check out https://gogutenberg.com/blocks/.

The Gutenberg editor enables you to (amongst many other things):

Drag and drop blocks onto a page

Adding content blocks to your design is as easy as point and click. Because the blocks are discrete chunks of content, it is easy to rearrange and swap them out. You can also see at a glance how all the elements of the page will work together.

Embed rich media content

Embed blocks allow you to insert content like video, audio, images, and social media content without having to use an iFrame. There is a generic embed block and specific ones for popular sites like YouTube or Twitch.

Reuse blocks

There may be pieces of content that you want to use several times across your site. With Gutenberg, you can create a block that is available for use on all pages. This avoids duplicating code and helps your design stay consistent.

Gutenberg brings WordPress up to date with current trends in web development, and the WordPress REST API and WP GraphQL project allow its powerful CMS to be used with any front end framework.

To read more about Gutenberg and to try it out, go to https://wordpress.org/gutenberg/

5 Things I've Learnt as an Apprentice Software Developer

Boaty McBoatFace — Thu, 10 Mar 2022 00:00:00 +0000

5 Things I've Learnt as an Apprentice Software Developer

I’ve been working as an apprentice software developer for a couple of months now and there are some things that I’ve learnt that I wanted to share. I hope that the below is useful to you if you are thinking about becoming developers or graduating from a bootcamp and going into your first job.

Photo by Ilya Pavlov on Unsplash

1. Remember the basics and keep it simple

Before you learn a framework you need to learn the basics of the language at its core. Before you reach for React, for example, ask yourself if you could solve this problem with vanilla JS? Otherwise you will most likely overuse frameworks and try to make them do things they were not designed for. It also makes debugging much harder if you don’t understand why the code works the way it does.

2. You will read far more code than you write

Once you get into a job you will be working on existing codebases most of the time. This is why you should try to write code that is clean and maintainable to make life easier for your future self and your colleagues. There are many approaches to this but some common advice includes commenting your code, refactoring to improve understandability and writing small classes and functions.

3. Don’t get hung up on language choice

There are endless debates about the merits of different languages and approaches to writing software but don’t get lost in the weeds. I think it’s good to be pragmatic and start with the most popular (and well established) languages in your area. You can always write your side project in Kotlin, Coffeescript or similar.

4. It’s better to ask for help (after a certain point)

It’s good to try to solve problems on your own but if you’re blocked it’s fine (and encouraged) to ask for help. Pair programming can make squashing bugs quicker and more fun. Taking a break can also make a difference as well as talking through the code out loud to an inanimate object (known as rubber ducking).

5. You need to be constantly learning throughout your career

Programming languages, frameworks and environments are always updating. Continuous learning not only helps you stay relevant in the job market but can help you understand more deeply some aspect of the languages you use every day. As programmers we should always be wanting to find better ways of doing things.

I’m very lucky to be on an apprenticeship provided by Founders and Coders and Common Knowledge. For more information about the FAC programme and how to apply go to https://www.foundersandcoders.com/apply/

How I made my blog

Boaty McBoatFace — Sat, 19 Feb 2022 00:00:00 +0000

How I made my blog

When I decided to start blogging, I knew that I wanted to build the site myself. I chose to use the Gatsby framework as I had been learning JavaScript for a while and I already had a project built in React. Gatsby is an open source framework that helps you create a static website easily and quickly. The Gatsby docs have a tutorial that can get you started with a blog site within minutes. The Gatsby Starters Library has templates for e-commerce, portfolio, blog, and other sites.

To make the site, I followed this YouTube tutorial closely. The creator, Andrew Mead, has more courses on the JavaScript ecosystem on his blog. I also had a lot of fun with the whole open source ecosystem around Gatsby, including the many plugins.

Challenges ⛰️

There were many things I found difficult about the project.

I struggled with the conceptual difference between components and pages. This meant I had code on my pages that should have been in components.
I used CSS modules, but there were still too many styles in the global scope. Remembering to write classNames in the JSX way was another headache.
Basically anything that didn’t follow the tutorial exactly. This taught me a lesson about understanding the code (and not simply copying it) before I tried to build on or debug it.

Things I like ❤️

I’m still pleased with how the site looks and performs. I like the minimal design, and Gatsby’s speed makes browsing pleasingly snappy.
It’s easy to add posts, and markdown is a distraction-free and intuitive writing experience.
It works well with Netlify, which is a super-efficient and easy-to-use hosting platform.

Things I want to add 🚧

There are, of course, things I want to add to or improve about the site.

Security vulnerabilities are the most urgent. One drawback of the framework is that it has a bunch of dependencies that have to be maintained and, in some cases, replaced.
I would like to create a reusable sidebar component to abstract some of the site’s duplicated code.
It would be great to have pagination on the blog index page and set a maximum number of listings per page.

I enjoyed developing with Gatsby, and I would make another site with the framework. I hope that I’ll have enough time soon to make the improvements I listed above. If you have any questions about the process, let me know on Twitter at @MollyBloom1989

Good luck with your projects!

Looking back at Founders and Coders

Boaty McBoatFace — Sat, 01 Jan 2022 00:00:00 +0000

This blog is a follow-up to My Journey to Becoming a Developer.

In that post, I described how I’d come to apply to the Founders and Coders boot camp and make the switch to a new career.

Some of the FAC22 members (and mentors) dressed for Halloween 👻

What did I learn in the past 12 weeks at FAC?

Most obviously I learned a lot about web development. The FAC curriculum teaches HTML, CSS, JavaScript, Node.js, SQL, Next.js, and React. I learned how to build a web application from scratch, which culminated in our final Tech for Better projects with real-life stakeholders.

Beyond the technical skills, I feel like I got a crash course in learning to work as a team. The way the FAC course is structured means that you are constantly learning from and teaching each other - alongside guidance from mentors from previous cohorts. There is an emphasis at FAC on leaving nobody behind, which makes it a very supportive environment in which to learn.

I also improved my persistence and problem-solving, which I think are crucial skills for all developers. Learning how to learn - and Google things where you are unsure - is the only way to keep up with the ever-changing technologies and frameworks in the industry.

What were the challenges?

As it was a boot camp, it was very intense and in the first half of the course, we were learning a big new topic every week. I often felt like I was only grasping the fundamentals of the previous week by the middle of the next. I had, and still do have, a persistent feeling like I don’t know enough. I also struggled with the feeling of frustration that you get from tricky bugs (read here for why computer problems are called bugs 🦟).

What’s next?

I've started an apprenticeship as a software developer at Common Knowledge, which I’m really excited about. I’ll also be back at FAC for a week in January to help mentor the next cohort. In the longer term, I’d like to play an active role in the FAC community by helping out beginners as well as learning from my peers.

If you are looking to change careers into software development I strongly recommend Founders and Coders. If I can answer any questions about the process of applying for a software boot camp please feel free to email me at anna_cunnane@proton.me

Four Things I've Learnt So Far at Founders & Coders

Boaty McBoatFace — Sat, 23 Oct 2021 01:00:00 +0000

It’s been a month since I started the full-time course at Founders & Coders, and it seems like a good time to talk about what I’ve been learning.

The FAC course is a software development bootcamp taught at Space4 in Islington and remotely. It is a peer-led course facilitated by mentors from a previous cohort and aims to create an inclusive environment, especially for those who are currently underrepresented in tech. For more details and how to apply visit their website.

Git workflows 🔨

Git is software used for tracking changes in any set of files. It is used to enable collaborative working by developers. Before starting at FAC, I didn’t have much opportunity to use its more powerful features. Now I start a branch whenever I start working on a new issue and create a PR to have my code reviewed by my teammates before it gets merged into the main branch.

Node.js and Express 🚀

Node.js is a JavaScript Runtime that allows you to run JavaScript code outside of the browser. It is useful for developers who are building the client side of their application in another JS framework like React. I didn’t have any previous experience with server-side frameworks so this has been a steep learning curve, but I can now build simple web applications.

Testing with Cypress 🧪

Before FAC, I had tested that my code was working manually in the browser. However, as the codebases I’ve been working on have grown and the interactions between the features have become more complex, I’ve discovered the benefits of writing automated tests. Cypress is a great tool for end-to-end testing, simulating the user flow through your application.

SQL 🗃️

SQL (Structured Query Language) is used for extracting and organizing data in a relational database system. I have been using it to store user data, manage authentication, and allow users to post information to the server that is then displayed on the page. SQL is also incredibly powerful - look up SQL injection attacks to see what I mean.

We’ve covered a lot in such a short space of time, and I’m really looking forward to the next few weeks to put these skills into practice. Check out my GitHub if you want to see more of what I’ve been up to.

Attending Co-Tech conference at Space4

Boaty McBoatFace — Sat, 09 Oct 2021 01:00:00 +0000

Co-Tech (Co-operative Technologists) is a network of co-operatives that sell digital or tech services. They met for their conference on 23-24th September in the co-working space at Space4 in Finsbury Park. I attended as a new member of Common Knowledge who have hired me as an apprentice software developer. This has enabled me to complete the full-time programme at Founders and Coders, who are also a part of Co-Tech.

Image credit @CoTechUK

A coop is a company that is owned and democratically run by its workers - and in some cases customers. The members of Co-Tech aim to develop technology that serves the needs of workers and communities before private profit. Common Knowledge does this by designing digital tools for grassroots activists to create radical change.

At the conference, there were talks and workshops running on subjects like redesigning the Co-Tech website; advice sessions on how to run a cooperative; what to do with new business leads coming into the network and more. It was great to dip in and out of these and the conversations taking place more informally on the sidelines. It was a rapid introduction both to tech companies and coops.

Co-Tech was also the first time I had seen sociocracy being put into practice. This is where decisions about the coop are made with the consent of all members rather than through a majority vote. Sociocracy is combined at Common Knowledge with software development methodologies like Agile and Scrum. Common Knowledge member Gemma explains their approach here.

The session delivered by Servers.coop made me see that the choice of network infrastructure for a project can have ethical implications. The speakers were seeking funding to support an ecosystem of grassroots decentralised server hosting providers. It was really interesting to see how a project like this could get off the ground and made me think differently about the impact of tech on the environment.

It was inspiring to see people committed to their values working together to achieve something at Co-Tech. I like their approach to using the privilege that people in the tech industry have for the better, and I’m really excited to start working at Common Knowledge.

My journey to becoming a developer

Boaty McBoatFace — Mon, 09 Aug 2021 01:00:00 +0000

I’ve worked in book publishing for eight years but I’ve loved it. I’ve won awards (which is really nice and slightly embarrassing) and I’ve worked on some beautiful books.

Now though I’m transitioning into becoming a software developer with Founders and Coders. If you’re interested in my journey this is how I got here...

Photo by Emile Perron on Unsplash

Dabbled with coding

I started dabbling with coding quite soon out of Uni and I even attended a course on Dreamweaver (when that was still widely used). I taught myself the basics of HTML and CSS which is what you needed at the time to make basic websites. I ventured into Javascript but found it quite scary without a maths or computing background. I kept coming back to it though mostly because I liked the elegance of coding. I realised it was all about finding the most efficient solution to a problem.

Made learning a habit

What really supercharged my interest in coding was when I made a commitment to practising it every day. Initially, this was just a few minutes and I used the Mimo app. I worked my way through the HTML and CSS tutorials on W3 schools and started reading Javascript.info. This was when I properly started to grapple with Javascript and I found that persistence and googling were enough to see me through. The developer community also has a great ethos of sharing knowledge and constant learning which really inspired me.

Got involved with events and meetups

Eventually I started to get brave enough to talk to other people about what I was doing. I was a coach at the 2019 FutureBook Day of Code which was a turning point for me in terms of trusting in my own abilities. I started attending (by then online) meetups at Codebar and Founders and Coders. At these events, I got free support and tuition but I also connected to a group of people who had, or were, transitioning their careers towards software development.

Made projects

I think it’s really important to put your new skills into practice as soon as you can. I started making websites - including the one that hosts this blog which I built following this tutorial. I tried to combine my existing skills and experience in publishing with coding so I also made a React application that returns data from the Google Books API. I created a GitHub profile where I pushed my code and went through the whole process of building a site from create-react-app to hosting on Netlify.

Joined FAC

Earlier this year I made the huge decision to apply to the Founders and Coders bootcamp. It was a lengthy application process and the requirements were tough. I knew though, that even if I wasn't successful, the learning I was gaining wouldn't be wasted. I am in the middle of the part-time course now and it's already one of the best things I’ve ever done. In September I’ll be leaving my current job at Abrams & Chronicle Books (which I’ve loved and has supported me to take this step) to study at FAC full time and become a junior developer.

I hope that this has been interesting to read and has given you some insight or inspiration to start your own journey with coding! Please feel free to email me at anna_cunnane@proton.me if you have any questions or would like to work together.

Why you should make a personal website

Boaty McBoatFace — Thu, 08 Jul 2021 01:00:00 +0000

Why you should make a personal website

A personal website can be thought of as like your ‘home’ on the internet. It is a way to make yourself stand out from the competition. It helps you control your online presence and build a personal brand. It also makes it easier for potential employers to find you.

Photo by Kelly Sikkema on Unsplash

Still need convincing? See the 5 reasons below why you should make a personal website (especially if you are looking for a job).

Control your online presence

Having a personal website helps you to control the first few results for your name on Google. Depending on how common your name is, registering a domain with your first and last name and linking it from all your social media sites will push it to the top of the search rankings. A contact us page on your site allows people to get in touch with you quickly and easily.

A website is a digital portfolio

We all know we should keep our CV up to date, but a website can be continuously refreshed with your latest work and news. It is also more flexible than the traditional CV format allowing you to showcase the projects that you’ve worked on. It’s a way of giving employers more of a sense of your personality while remaining professional.

It’s a place to share your knowledge and expertise

One of the best ways to build your personal brand is to write online. By sharing your knowledge and expertise on a blog, you can build up a reputation as the go-to person in your specific domain that will bring you to the attention of employers.

It gives you the chance to learn valuable skills

Learning to code websites with HTML, CSS, and Javascript makes you very attractive to employers. Other skills like writing engaging copy, UI/UX design, and SEO are also massively in demand. This combination of technical knowledge and creative flair shows the value you can offer.

It’s easier than ever to create a stunning looking website

Even if you don’t feel like learning to code, platforms like Wix and Squarespace allow you to create a professional-looking website within minutes. These sites have drag and drop website building tools; free templates and lots of customizable features.

If you’re interested in learning more check out this comprehensive article from CollegeInfoGeek or Ali Abdal's video guide