Forem: Jethro May

2020 In Review

Jethro May — Sat, 02 Jan 2021 11:58:37 +0000

2020 has been a year to forget for many people around the world. There have been many ups and downs in everyone's lives. I will be reflecting on the year and what I achieved.

At the start of the year, up until June/July, I worked on many personal projects and upskilled myself on various topics. I then started to feel quite a bit of burnout.

I hadn't taken a real break in over a year.

The burnout had pretty much destroyed a lot of the passion I had for coding outside of working hours. I decided to take a break and not work on coding after hours or on weekends. I hoped that I would naturally rekindle the fire that I once had.

Many months passed where I felt stuck and wasn't sure where to go and what to do. At this point, I realised that I needed to take my mental health seriously.

I went to therapy and spoke about my stresses and anxiety, which were compounded by various situations.

I cannot recommend this enough.

It allowed me to think clearly and cope with the various stresses I was experiencing. I went through a variety of different changes in my working life as well as my personal life. I needed to take a step back and process these changes.

The feeling of burnout and stress/anxiety started to disappear. My passion for coding also began to return.

I took a further step back and thought, what did I achieve in 2020? What positive changes happened in my life?

My 2020 goals:

Redesign my website.
Start blogging.
Move into a bigger home.
Secure a job overseas.

Let's go through each of them, keeping in mind these are in no particular order.

Redesign my website

At the start of 2020, I wanted to redesign my website. I wanted to add a blog to my website as well as add a refreshed design. Seeing as I had already started tinkering with Go, I decided to give Hugo a try. I tweaked the design throughout 2020, adding small improvements to the overall design and functionality.

I achieved this goal, and I will most likely redesign the website at some point this year. I may even switch to a different language or framework entirely.

Start blogging

I didn't write nearly enough articles in 2020 but I achieved this goal and wrote five articles:

I have begun plotting out a few ideas for 2021's articles, which I will likely be starting once I return from my much-needed break.

Move into a bigger home

My fiance and I, (now wife) wanted to move into a bigger home. While we were comfortable in our previous home, we wanted more space and a little more privacy. We achieved that goal towards the end of 2020, moving into our current home.

Secure a job overseas

A major highlight for 2020 was getting a job overseas. I was lucky enough to be given the opportunity at a company based in London, which I accepted towards the end of 2020. The plan is to move over to the UK in 2021 when the pandemic allows us to.

Other accomplishments in 2020:

2020 also saw a couple of other accomplishments.

I got engaged and married in 2020

I got engaged and married to my soul mate. It was without a doubt challenging, getting married during a pandemic but we kept it small and low-key.

It was the biggest highlight of 2020 and the best day of our lives so far!

I worked on my health

Not only did I work on my physical health, but I also decided to take my mental health seriously. The tech industry can be very stressful and overwhelming at times. As an individual in the tech industry, it is paramount to look after your physical and mental wellbeing. Stress and burnout can be a killer that not only affects your working life but your personal life too.

Closing thoughts on 2020

Overall, 2020 was a good year for me, full of many personal and work-related accomplishments. Some times were challenging and generally unpleasant, but, I only wish to focus on the positive. I firmly believe 2021 will be a great year not only for myself but for many other people.

My goals for 2021:

Move to the UK.
Learn more Go.
Improve my fitness.
Write more.
Release a product and gain at least ten paying customers.

What are your goals for 2021 and beyond?

Getting Started With Version Control

Jethro May — Sun, 18 Oct 2020 10:33:21 +0000

One of the fundamental topics that every developer needs to learn is version control and how to work with a codebase which could be updating and changing over time.

A version control system allows multiple people to work on a single project at the same time. Each person will have a copy of a project running on their computer, allowing them to make changes which won't affect the rest of the team. Once complete, the developer will be able to submit or push these updates to the version control system and ultimately merge their changes into the main project. The rest of the team will then have access to these new changes by pulling them down into their version of the project on their computers.

Each change will have a timestamp as well as information about who made that change, usually the developer's name and email address.

There are various types of version control systems, such as Git, Mercurial and many more. In this tutorial, we will be covering the basics of version control using Git utilizing a platform called GitHub.

What is Git?

Git is a version control system used for tracking changes in a codebase during development. The purpose of Git is to coordinate changes among developers; it can, however, track changes in any set of files.

What is GitHub?

GitHub is a Git repository hosting platform that allows developers to store their code which can be publically visible or private from the rest of the world. It keeps track of the various changes made to each of your projects and presents itself in an intuitive and easy to use interface. It is free to use but also offers a premium plan. Read more about their features here.

First Steps:

The easiest way to get started is by creating an account on GitHub at the following link. Once you have created an account and you have logged in, you will be able to start creating repositories used to store your code. The home page will contain a feed which will display recent activity on repositories from people you follow on GitHub, so at first, you will not see anything here.

We are now ready to create our first repository! To do this, click on the + symbol in the top right of the screen, which will provide you with a few options, 'New repository', 'Import repository', 'New gist', 'New organization' and lastly 'New project'.

All repositories require a unique name on your account, along with an optional description. You can control who can see and interact with this repository by setting the visibility to public or private. Additionally, you may choose to include a README.md file, a .gitignore file and a LICENSE.md file, for now, we will not add either of these additional files.

Once you have filled in the required information, click on 'Create repository' and you will be good to go!

Setup:

There are two primary ways of interacting with a repository on GitHub, using the desktop app and by using the command line. This guide will cover using the command line, as well as using GitHub's new CLI tool but feel free to use the desktop application or another GUI (Graphical User Interface) if you are more comfortable with a visual representation of the process.

To interact with Git via the command line, you will need to have Git installed on your machine. Git comes preinstalled on Mac, however, on Windows it does not. If you are on Windows, please follow this guide to install Git on your machine.

The GitHub CLI (Command Line Interface) allows you to easily interact directly with your repositories and even the GitHub API (Application Programming Interface.) It's worth noting that you don't have to use this CLI tool if you choose to work with the command line, you can still work with Git without it.

For us to use this new CLI tool, we will install it with instructions found at the following link.

Once installed, open up a terminal window if you don't already have one open and the last step to take is to authenticate with our GitHub account. We do this by typing the following:

gh auth login

All interactions with the GitHub CLI start with 'gh' followed by the command. A full list of the currently available commands is available here.

Follow the prompts which will allow you to log in via the browser and type in a code. Once you have successfully logged in, it will ask you to select your default git protocol which will be either https or ssh. We won't be covering how to setup ssh keys, selecting https will be the final step in our setup.

Cloning Our Repo:

Cloning the GitHub repository is quite simple, we will use the following command in our terminal:

gh repo clone <repository> <directory>

Replace with the full URL to your GitHub repository and replace with the name of the folder you would like to store this code. (Don't include the left/right chevron symbols.)

Alternatively, if you run the command inside a folder that you have already created you can omit the directory and instead use a period. This will clone the repository into your current folder:

gh repo clone <repository> .

We are now ready to start adding and removing files from our repository.

Pushing and Pulling Changes:

Once you have successfully cloned a repository, you will now be able to push code changes as well as pull updates onto your locally running version of the project. At the time of writing this article, there are no commands in the CLI which will allow you to push or pull code, so we will use standard git commands to do that.

Open the project in any code editor of your choice and create a new file, for example, index.html. Once you have added a new file, you will be ready to push this new file to your repository.

Before pushing new changes, you must ensure that you have all of the repositories files in your local version of the project. Assuming you are using the default GitHub branch name, you will run the following command in your terminal:

git pull

git pull origin main

Once you have pulled down any changes, you will be ready to add your files to a commit and push them to the repository. We can do this by running the following commands:

git add index.html
git commit -m "Initial commit"

The first command will add the index.html file to your commit, and the second command will commit your file with a message. The '-m' option indicates what your commit message is, followed by the actual message. If you have a lot of changes, you can omit the 'git add' step and run the following command:

git commit -a -m "Initial commit"

This command will add all of your new changes to the commit.

Our last step is to push the code!

Once you are happy with your commit and message, run the following command to push code to your GitHub repository:

git push

If you have followed each step correctly, you will now be able to see your newly changed files in your GitHub repository. If you have chosen this repository to be publically visible, send the link to your friends and they will now be able to pull down your code from this repository.

Conclusion:

We have only scratched the surface of what can be achieved with version control, covering the basics of what Git is, how to create a repository on GitHub, how to setup GitHub's new CLI tool, cloning a repository, pulling code and pushing newly created files.

There are many different aspects of Git that we did not cover, a few of them are:

Branches
Merging vs Rebasing
Resetting, Checking Out, Reverting
Git Log
Hooks

If you would like this to become a series in which we cover various other topics, let me know in the comments or via Twitter!

8 HTML Elements You Might Not Know About

Jethro May — Mon, 03 Aug 2020 14:17:21 +0000

HTML which stands for "Hypertext Markup Language," is used to structure the content of a web page. It consists of a series of elements which enclose different parts of the page content to make them appear or act in a certain way.

As a developer, being able to write high-quality, accessible and semantic HTML is a great skill to have in your toolset.

In this guide, we will cover eight elements that you may not have heard of, or used before and look at examples of how you could use them in your next project.

Abbreviation:

The <abbr> tag defines text which is an abbreviation or an acronym, it also allows for an optional title attribute to provide a full description of the abbreviation or acronym.

<p>This document can be styled with <abbr title="Cascading Style Sheets">CSS</abbr></p>

The <abbr> tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Cite:

The <cite> tag defines the reference to a cited creative work, and it must include the title of that work. Examples of where this can be used include the title of a song, book, research paper, website or blog post etc.

<p>
  <cite>Hey Jude</cite> by The Beatles was released in 1968.
</p>

The <cite> tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Details:

The <details> element creates a widget which can be opened or closed by the user. The default state of the widget is closed, opening the widget will reveal the hidden content inside of the element.

<details>
  This content is hidden.
</details>

The <details> element is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Mark:

The <mark> tag will define text which should be marked or highlighted by the browser.

<p>Sometimes you need to <mark>highlight</mark> text.</p>

The <mark> tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Output:

The <output> tag specifies the result of a calculation. In the following example, you can select a value between 0 - 100 as well as enter a second number into the second element, outputting the sum of the two numbers.

<form oninput="result.value=parseInt(number.value)+parseInt(range.value)">
  <input type="range" id="range" name="range" value="50" /> +
  <input type="number" id="number" name="number" value="50" /> =
  <output name="result" for="number range">100</output>
</form>

The <output> element is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Summary:

The <summary> tag defines a heading for the <details> element. The <summary> tag must be the first child element inside the <details> element.

<details>
  <summary>Summary Heading</summary>
  This content is hidden.
</details>

The <summary> tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Time:

The <time> tag represents a time or date value. Optionally, you may include a 'datetime' attribute which will translate the value into a machine-readable format. Using the <time> tag allows for better search engine results.

<p>This post was published on <time datetime="2020-08-03">3 August, 2020</time>.</p>

The <time> tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Word Break Opportunity:

The <wbr> tag tells the browser where the ideal location is to break text when the browser window size changes.

<p>This is a very loooooooooo<wbr>oooo</wbr>oooooooooooong sentence showing us how to use this tag.</p>

The <wbr> tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Conclusion

In this article, we reviewed a variety of different HTML tags that you can use in your projects. There are many other useful HTML tags, all of which seek out to solve specific problems. I hope you have learnt a thing or two and will be able to use these tags in your projects!

Get Down With Markdown

Jethro May — Sun, 19 Jul 2020 13:02:46 +0000

Most developers will encounter Markdown files at some stage of their careers, via repository platforms such as GitHub or Bitbucket. Markdown files use the .md file extension and will contain specific syntax used to construct the file. Many content management systems and frameworks support markdown out the box, so to start using it is as simple as creating a file and adding its content.

Markdown files are extremely powerful because it allows the creator the ability to easily construct beautiful and semantic markup without having to build it with code. They are often used inside git repositories as documentation but have also grown to be extremely popular on blogging platforms. I personally store my posts on GitHub which Hugo then turns into semantic HTML.

In this tutorial, I will cover some basic syntax used inside Markdown files which will allow you to start creating beautifully structured content.

Headings:

Headings will be represented by adding a # symbol before the title. The number of # symbols signifies the order of importance, so by adding a single # it will represent a <h1> tag. Adding additional # symbols will decrease the order of importance with the number of symbols indicating the appropriate <h1> to <h6> tag.

# Heading 1 <h1>
## Heading 2 <h2>
### Heading 3 <h3>
#### Heading 4 <h4>
##### Heading 5 <h5>
###### Heading 6 <h6>

Paragraphs:

There is no specific syntax used when writing paragraphs in markdown syntax. Paragraphs can be created by adding one or more blank lines:

I am a paragraph.

I am another paragraph.

When adding headings and paragraphs, make sure they are all separated by a new line and are not on top of each other.

Line breaks:

Line breaks are similar to paragraphs except instead of a single blank line you will add two blank lines to signify a line break.

I am a paragraph with a line break below me.


I am a paragraph with a line break above me.

Bold Text:

As we go further into this tutorial, you will find that there are many ways to achieve the same result. For example, bold text can be added to a document in the following ways:

**Bold text** will render Bold text

__Bold text__ will render Bold text

Italic text:

The syntax for italic text is similar to that of bold text. A single asterisk or underscore will be used on either side of the text or phrase.

*Italic text* will render: Italic text

_Italic text_ will render: Italic text

Lists:

Lists have varying syntax.

To create ordered lists, simply add items with numbers followed by a period. Each list item will need to be on a new line.

1. Ordered list item #1
2. Ordered list item #2
3. Ordered list item #3

They do not need to be in numerical order:

1. Ordered list item #1
3. Ordered list item #3 
2. Ordered list item #2

You may also nest lists:

1. Ordered list item #1
2. Ordered list item #2
3. Ordered list item #3
    1. Ordered nested list item #1
    2. Ordered nested list item #2

To create an unordered list, simply add either a dash (-), asterisk (*), or plus signs (+) in front of your line items.

- Unordered list item #1
- Unordered list item #2
- Unordered list item #3

Much like the ordered list, the same principle applies when nesting unordered lists.

- Unordered list item #1
- Unordered list item #2
- Unordered list item #3
    - Unordered nested list item #1
    - Unordered nested list item #2
    - Unordered nested list item #3

Links:

To create a link, enclose the text you wish to link with square brackets followed by the link in parentheses.

[example.com](https://example.com/)

example.com

If you would like to add a title to the link, you would add the following:

[example.com](https://example.com/ "Link title")

example.com

Links can also be created by adding a chevron on either side of the link:

<https://example.com>

https://example.com

Images:

Images have a similar syntax to links, except they have an exclamation mark in front of the square brackets, followed by the alt text inside the square brackets and the path to the image in parentheses.

![Alt text](/image-1.jpg)

Much like links a title can also be added to an image by adding the following:

![Alt text](/image-2.jpg "Image title")

Block Quotes:

A block quote can be created by adding a right facing chevron > in front of a paragraph.

> I am a block quote

Using this syntax will render the following:

I am a blockquote

Code:

Code blocks can be added to markdown files by enclosing the word, phrase or code with backticks. (``)

`A code block using backticks`

Alternatively you may create code blocks by indenting by at least four spaces or with one tab:

A code block created using four spaces or one tab.

Horizontal rules:

There are a number of ways to add a horizontal rule to a document by either adding three or more asterisks (***), dashes or underscores:

---

_________________

***

Any of the above will render:

HTML:

Some Markdown applications or frameworks allow you to insert HTML tags into the file. This is useful if you would like to use certain HTML tags instead of Markdown syntax. Using this approach it is much easier to change the attributes of an element.

I am using regular **bold** syntax with an HTML link <a href="#" class="text-blue-100">Link</a>

As you can see Markdown is extremely powerful and user-friendly, it has many benefits and provides creators with an easy way to create beautifully structured content. It is a huge time saver and allows you to focus on what truly matters most, your content.