DEV Community: Patrick Lemmer

Why you should create a GitHub profile README (as a job seeking dev)

Patrick Lemmer — Mon, 20 Feb 2023 14:33:49 +0000

Let's get straight to the point.

To understand why a profile README is a good idea for job seeking devs, let's see what this file is commonly used for.

When you create a GitHub repo for your project, you also create a README.md file for this repo and you do it for a specifc reason. That could be a) you want to offer a central point for your projects documentation. A place where users can refer back to, to get information about your project. B) It could be used to hold any kind of information about the technical specs of your project or c) to highlight specific stuff about your project that otherwise lives somewhere in a hidden place, unavailable to some users/readers. There are other reasons why you create a README file, but the point is, you use it to highlight, document, inform, and so on.

One thing you want to do as a job seeking dev, is to highlight, document, inform and so on about you, your skills and your projects. You may have other social profiles, where you already do this (or some of it), but since you likely host the code for your projects in a GitHub repo (or any other Git repo hosting platform) it is a good idea, to make use of the profile README.

If you have a LinkedIn profile, you will know that this is mainly used to build a profile around you and your professional experience. The same way you can use your GitHub profile, to build a profile around you and your code. What and how much information you put into the README, is totally up to you. It will however, round off your complete application package very well, as you have a nice personal profile, whether the recruiter or hiring manager checks out your LinkedIn, your GitHub or even both.

Here is how you create one:

You create a new repo

The repo MUST have the same name as your GitHub username. And you need to initialize it WITH the README file. (I have already created mine, hence the notification in the screenshot)

Now you have a repo with only one file. The README file. At this point you can get creative and add whatever information you would like to use, to highlight, document, inform and so on about you and your code.

A quick Google search for "GitHub profile README examples" will give you enough ideas to get started. You can also use templates or template generators to build this out. These will give you the Markdown, wich yout then simply have to add to the file and commit the changes.

Here are two links that will help you writing Markdown yourself.

Basic writing and formatting syntax

GitHub Markdown Cheatsheet

One more thing: If you have any other social profiles such as LinkedIn, Twitter, etc. try to be consistent with your profiles. While each platform serves a different purpose, which means you have to create profiles around this purpose, keep things like username (if available), profile photo, summary, headline, etc. consistent across these platforms. That way you can be found easier and it also gives your personal brand a professional and mature look.

#buildinpublic: A fullstack MERN application (with TypeScript)

Patrick Lemmer — Thu, 09 Feb 2023 22:41:41 +0000

Hello friends!

Welcome to my #buildinpublic series, where I’ll be sharing the development of a fullstack MERN app using TypeScript. The app is a pet adoption platform that aims to connect pet lovers with animal shelters and give furry friends a new home.

In this series, I’ll be taking you through each step of the development process. From the idea to the deployment, you’ll get a behind-the-scenes look at the challenges, triumphs, and lessons learned along the way. Building in public can be a valuable learning experience, both for myself and for those following along.

This is an exciting opportunity to learn about the fullstack development process and see a project come to life. Let’s get started on this adventure together!

You can follow along by bookmarking the link to this post or follow me on LinkedIn or Twitter, where I will also share all updates about my progress.

1: The idea

I have just finished my last project, an overhaul of my personal website (the one you are looking at right now). It was just time for something new. I gave it a whole new minimalistic look and included features like darkmode, a contact form with a backend and a blog integration using a headless CMS.

Before I even started working on that though, I knew that I wanted to build out a fullstack project that solves a real world problem, to practice my MERN skills. So I took the time while building out my website, to think of a problem that I can solve with the MERN app.

I love animals and we have just reached the end of the corona pandemic. During the last two to three years, a lot of pets have ended up in animal shelters. That’s very unfortunate for all the animals, and a heavy financial burden on those shelters.

With that in mind, I thought of ways to help both, animals and shelters.

The idea: A platform that lets its users search for and find a pet they wish to adopt, and also lets them get in touch with the shelter to start the adoption process.

Problem:
Finding an idea for a fullstack MERN project

Solution:
In the past I have gotten the advice to think of topics that I have an interest in and to find out what problems or possibilities for improvements there are within the scope of the topic of choice. Ideally those problems are real and a solution would help real people (or animals). So that’s what I did and I can already see that it really helps to work with something I am interested in, because I will likely keep pushing when things get hard as I’ll have a personal passion for helping animals.

2: TypeScript

My original plan was, using JavaScript to build out this app. The MERN stack allows me to use JavaScript from start to finish for frontend and backend.

Since I am currently also job searching full-time, I have realised that there is a growing demand and usage of TypeScript out there. For that reason, I already planned on allocating a few hours per week on learning TypeScript, but in smaller projects.

My plans then changed, because of a recent chat with a senior developer, who said “why don’t you use TypeScript in your MERN app project”. I honesty haven’t thought of this myself, because it felt very much “out of my league” at this point. I was more than sceptical and a little nervous, because it means that I would add another component to this project, which I don’t have much experience with yet.

But, after going through some documentation and understanding what TypeScript really is compared to JavaScript, I felt a little better. All JavaScript is syntactically valid TypeScript, which makes it way less of a challenge than learning a new language from scratch.

Problem:
I have only worked with TypeScript once, and that was a while ago. It seems like I add another (unnecessary) challenge on top of my actual challenge of building the MERN app. Will I be able to do it?

Solution:
I had a good look at the offcial TypeScript documentation and learned about the differences between JS and TS. Once I realised, that I can’t really mess up, because syntactically JS is valid TS, I decided to just go with it and use TypeScript for the pet adoption app.

3: Choosing an API

One of the first questions I asked myself, after having decided on the topic and the tech stack I would be using was, “Where do I get the data from?” Since I am building a pet adoption platform, I knew I need data about the animals and the shelters and I need users to be able to search for animals including some search filters, get details about the pets that were returned by the search, and get the necessary information about the shelters. I had never chosen an API for a project myself, so I wasn’t quite sure what to look out for or what I must avoid.

After some research, I came up with a list of criteria, that matches my personal needs for this project (this list might look very different for a different use case):

The API must be free or offer a free tier with the functionality I need
The API must have good documentation and enough resources for developers
There should be a good community behind the API provider or a way of receiving support in case I need help
I shouldn’t have to worry about any legalities by using the API
It must be a legit API (provider)

With these points in mind, I referred to a list of public APIs on GitHub, which I have come across in the past. This list is sorted by topic, and, funny enough, the very first topic is “Animals”. So I started going through these APIs one by one, to see if they offer what I am looking for and match my list of criteria.

Eventually I found what I was looking for in the free, well documented, well supported and legitimate Petfinder API.

Problem:
My challenge in this step was, to make a decision on the right API for my project, without knowing too much about how to choose one in the first place. What must I look out for, what is important and where do I find it?

Solution:
After a while of researching, I understood that the most important criteria for me, would have to be a free API or at least a free tier offering the functionality I need. I made this my top priority and simply checked all the APIs I could find against my list of criteria, until I narrowed it down to an API that ticks the most boxes. (In this case my choice ticks all the boxes)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

You are now up to date with my progress in this project. 🎉

How to use a custom domain on GitHub pages

Patrick Lemmer — Mon, 18 Jul 2022 07:52:03 +0000

You just hosted a website on GitHub pages and now you're wondering how to add a custom domain to it to give your website that final touch? Here is how.

This article assumes, that your website is already hosted on GitHub pages.

In the first step, you need to add some DNS records in the domain settings of your custom domain's domain name registrar. In my case, this is GoDaddy, where the settings look like this:

You just add four new records:

Type: A (the same for all records)
Name: @ (the same for all records)
GitHub pages IP addresses: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
TTL: you can use the default value (the same for all records)

Save these new records and head over to github.com.
Here, you navigate to the repository of your website. Once there, go to Settings -> Pages.

You should see something like this under "GitHub pages". Now, you only need to add your custom domain in the "Custom domain" field and hit "Save". GitHub will run checks in the background, to validate your domain for the use with GitHub pages. This might take a moment. Once done, you can check "Enforce HTTPS", if this is not happening automatically.

Before you can visit your app under the new custom domain, there is one last thing to do. You need to add a CNAME file to your gh-pages branch. For this, simply click Add file -> Create new file and call this new file "CNAME" (this must be uppercase). Inside this file you add one line. Your custom domain.

customdomain.com

This is it. You have now added a custom domain to your website hosted on GitHub pages. It might take a minute for all these changes to take effect. Once you see "Your site is published at …. " in the GitHub Pages tab, your site is published and you can visit it under the new custom domain.

Note: In some cases the CNAME file gets added automatically when you save the custom domain under "GitHub Pages". Just make sure to check if this is the case and add it manually if necessary.

When you make changes to your website and deploy it again, you might see that your custom domain and the CNAME file have been deleted. In that case you will need to add both again in order to use the custom domain. To avoid the CNAME file deletion, you could make a pull request before you commit the changes to the remote repository.

Connect your contact form to an email account — with HTML only (Simple, quick, and beginner friendly)

Patrick Lemmer — Sun, 17 Jul 2022 10:58:12 +0000

Your developer portfolio website, a small online shop, or a small startup. All of these websites would likely benefit from a contact form, through which customers, or recruiting managers can get in touch with your or your business.

While bigger applications take care of this through their backend, smaller websites that are just not meant to be big and don’t have a backend, need a solution as well. In this article I will go through two very simple ways to integrate a contact form and connect it to your private or business email account, using HTML only.

Shall we have a look?

1. The first option is using a parameter called mailto:
You can use this parameter inside an a tag’s href attribute, like so:

That’s it. In its simplest form, this option only needs the mailto: parameter in combination with the email address that shall receive the emails. If you hover over the “Send Email” link with your mouse, you can see the email address that will receive the email in the bottom left of your browser.

When you go ahead and click the link, your email service will open a new email with the defined address already sitting in the address field. You are then ready to write and send the email. For a very basic use case or just for testing this can be a very convenient option.

There are also a couple of upgrades you can do here.

If you wanted to receive the emails from your contact form in more than one email account, you can simply add another address, separated by a comma:

In order to add a predefined subject to all incoming emails, you can use the subject parameter to the href attribute:

All your incoming emails from your contact form will then have “Sent via contact form” as subject, which, for example, could easily be used for email routing within your inbox. Not bad.

Other options are CC, BCC and even some predefined text inside the actual email body.

CC and BCC:

Text in the email body:

If you want, you can also combine all of those options.

While this is a very simple and quick way to achieve the goal, it does come with a downside. If you go back to the very first image above, you can see that by hovering over the “Send Email” link, everyone on the internet can see the email address that is used. If this is something you would like to avoid, then this option is nothing for you. Also, the mailto: parameter invites spam into your mailbox. Another thing to consider, when using this option. So think about it beforehand and only use option 1, if you can live with these aspects or if you just need to test something.

Let’s move on to the second option, which is just a tiny bit more difficult, I promise.

2. The second option is, to use a form backend service provider

Even though a simple website like ours doesn’t use a backend, we can still make use of one in the form of a form backend provider. All you need to do is create an account with the provider and connect it to your frontend code. That’s a very basic explanation, I know. Let’s look at it in a bit more detail.

This is a very basic contact form.

When you add this bit of code to your HTML code and then click the “Submit” button, nothing much happens. That’s because the form doesn’t have anywhere to point to yet. However, this code already has all the necessary bits needed to use it in combination with the service mentioned above. You just have to connect it.

All it takes now, is to create a free account with a provider like Formspree (there are others, Google knows them).

Once you have your account, log in. You will now see something similar to this (you won’t see the contact form settings yet). Create a new form by clicking the “+” and “New form”:

And then simply set a name for the form and most importantly add the email address you would like to use in order to receive the messages sent through your contact form. All that’s left to do now, is to integrate your new form into your HTML code. For this you need two things:

the action attribute set to the new form endpoint provided to you
the method attribute set to “POST”

Add both attributes to your form element and that’s it. If you want, you can also go through the settings menu and add things like reCAPTCHA to your form.

One thing to mention here is, at the time of writing this article the free version of this set up allows up to 50 submissions per month. If you need more, you’ll have to subscribe to a paid account. If 50 submissions are enough, you’re all set.

Conclusion:

Connecting a (contact) form on your website to your email account can be very easy, if you don’t have any specific requirements. There are also other rather simple ways to achieve this goal, that don’t require you to build a dedicated backend. However, the two options explained in this article, are the entry point to the question “How can I connect my form to my email” and therefore provide a simple solution to this task.

Attention new web developers! Use “this” from the beginning of your developer career.

Patrick Lemmer — Sat, 16 Jul 2022 14:47:55 +0000

Now, I want to be honest with you right away. The simple hack I will introduce you to in a moment, is not going to change the world of web development and it also won’t help you to get from beginner to expert over night. It’s also nothing new, and probably used by a lot if people every single day. It is very simple and easy to use, BUT it can help you over-proportionally compared to how simple it actually is. If you have used HTML and CSS before, it’s likely that you already know about this and this article is a waste of your time. However, if you just started to learn HTML and CSS or you are planning to, do yourself a favour, and read it to the end.

“Enough of this build up. Get to the point!”, you say? And you`re right. Let’s go!

I am talking about the CSS properties “border” and “outline”. When speaking about HTML and CSS, you can imagine that HTML lets you describe (build) the structure of your web page, and CSS lets you style this structure to make it look nicer. In order to style this structure, you will use properties which describe what should be styled and then give these properties values, which describe how something should be styled.

Now, why are “border” and “outline” so special? Because they can both help you, as a new developer, to understand how your web pages are structured and how this structure behaves when you change something. When I just started out, I didn’t have a clue why a page looks the way it does. I don’t even want to begin with the times where I changed something in my HTML code and then had to try and understand why it looks very different to what I anticipated it to look. In the beginning, it can feel rather abstract to just imagine how HTML “looks” in a browser. And that’s exactly where these two properties come in very handy.

“Border” and “outline” can help you understand how and why a web page looks the way it does.

With this, the question “Why can the properties “border” and “outline” help me as a new developer?” is answered. Let’s move on with the question, “How can they help?”

For this it is important to understand them better. Both properties are…

very similar in what they do
slightly different in how they do it
great tools for every beginner developer.

And since they are slightly different in how they do it, I personally prefer “outline” over “border”, because it offers a more accurate reading. Here is why:

Let’s say we have two paragraphs inside a container on our website.

When you look at the text right now, it can be difficult to understand which space these two paragraphs and the container around them take up on the whole page.

Both of the properties mentioned above outline an element, so that you can see exactly where it “sits”, how big it is, etc. Let’s have a look at what this looks like, with the border property.

As you can see, with the help of a border around the text and container, it is now pretty easy to understand where and how big your elements are. This makes it much easier to rebuild or simply just understand the structure of your web page, because you don’t have to guess anymore. And all this, with one CSS property applied to your elements. Pretty simple and helpful, right?

I think so too.

But there is one more thing. I mentioned earlier, that “outline” is more accurate.

And since they are slightly different in how they do it, I personally prefer “outline” over “border”, because it offers a more accurate reading. Here is why:

Let’s see what that means.

The “outline” property does not take up any space and therefore doesn’t change the size or position of an element. The element itself stays in its true position. The “border” property does add space to the element, which means that it moves the element’s position and alters its size. That fact makes “outline” more accurate, because you will always be able to see your element’s true position on a page. The image below, gives you a better idea of what that means.

If you concentrate on the left part of this image only, you can easily spot the difference. Can you see the whitespace between the green lines and the left end of the browser window? There is a different amount of space in both examples. And that is what is meant by “outline” does not take up any space, while “border “ does. Using “border” adds space between the element and the left end of the browser window. Have a look at the first paragraph of the first example. It moves the first letter “L” towards the right, because the green and red border are now sitting between the element (in this case a paragraph) and the end of the browser window. In the second example, you can see that the letter “L” is closer to the end of the browser window. This also represents the true position of the beginning of this paragraph, because the green and red lines are displayed outside of the element and in this case even on top of each other.

While there is more to it, this rule of thumb helped me in the beginning.

A “border” starts on the invisible border line of an element and is added inside the element, while the “outline” also starts on the invisible border line of an element but is added outside the element.

The following is a visual representation of the relationship between an element and the “border” property or an element and the “outline” property.

Conclusion:
Especially when you are new to web development, and you are still trying to understand how your HTML code “looks” inside of a browser, it can be really helpful to use a border or outline to show the position and size of your elements in the browser. I would consider myself to have left the absolute beginner phase of web development and I still use this little trick all the time, when I need to understand the structure of a page or when I need to rebuild parts of it. I am pretty sure that everyone who is using these properties as tools in the development phase will benefit greatly. Just don’t forget to get rid of all the borders/outlines, once you are done developing a website. They might look a bit out of place on a live website.

Note: There are more differences between “border” and “outline”, but this article focuses only on those relevant for the purpose described above.