Forem: Schalk Neethling

Raise The Red Flag Early: The Power of Explicit Return Types in TypeScript

Schalk Neethling — Sat, 28 Dec 2024 17:11:51 +0000

As developers, we're always on the lookout for ways to prevent errors before they make their way into production. One of the ways TypeScript can be your friend here is through the use of explicit return type annotations. This seemingly simple feature can dramatically improve your code's reliability and provide a better developer experience, especially for consumers of an API, utility functions, or library.

The Subtle Pitfall of Implicit Returns

Consider a function that looks innocent enough:

function getUserStatus(lastLogin: Date) {
  const daysSinceLogin =
    (Date.now() - lastLogin.getTime()) / (1000 * 60 * 60 * 24);

  if (daysSinceLogin < 7) {
    return "active";
  }

  if (daysSinceLogin < 30) {
    return "inactive";
  }
}

At first glance, this function seems fine. But there's a hidden problem: if the conditions aren't met, the function will implicitly return undefined. This can lead to runtime errors that may be difficult to track down. Also, instead of TypeScript raising an error right at the function definition, the error would only be raised at the call site.

You can understand how frustrating it can be for developers using your code. So how would explicit return types help here?

The Magic of Explicit Return Types

By adding an explicit return type, TypeScript will raise the red flag immediately at the function definition:

function getUserStatus(lastLogin: Date): "active" | "inactive" | "dormant" {
  const daysSinceLogin =
    (Date.now() - lastLogin.getTime()) / (1000 * 60 * 60 * 24);

  if (daysSinceLogin < 7) {
    return "active";
  }

  if (daysSinceLogin < 30) {
    return "inactive";
  }
}

If you enter this code into the TypeScript Playground, you will immediately be presented with an error:

Function lacks ending return statement and return type does not include 'undefined'.

You as the author of this function can now be proactive in addressing this before it becomes a problem.

function getUserStatus(lastLogin: Date): "active" | "inactive" | "dormant" {
  const daysSinceLogin =
    (Date.now() - lastLogin.getTime()) / (1000 * 60 * 60 * 24);

  if (daysSinceLogin < 7) {
    return "active";
  }

  if (daysSinceLogin < 30) {
    return "inactive";
  }

  return "dormant";
}

Why This Matters

The benefits are immediate and powerful:

Early Error Detection: TypeScript will highlight the issue at the function definition, not at the call site.
Forced Completeness: By specifying a return type, you're essentially creating a contract that your function must fulfill. TypeScript becomes your code reviewer, ensuring you handle all possible scenarios.
Improved Code Readability: Explicit return types serve as documentation. They clearly communicate what a function is expected to return.

Update: 11 December 2024

A reader (Pierre Spring) reminded me on Mastodon that you can configure TypeScript to prevent you from not defining a return. You can do this by setting the noImplicitReturns flag to true in your tsconfig.json file.

{
  "compilerOptions": {
    "noImplicitReturns": true
  }
}

Learn more about this flag in the TypeScript documentation.

Credit Where It's Due

This approach was inspired by a lesson from Mike North's TypeScript course on Frontend Masters. It's a testament to how small, intentional typing choices can significantly improve code quality and usability.

Conclusion

Defining explicit return types is more than just a TypeScript feature; it encourages you to think through all possible code paths, make your intentions clear, and catch potential issues before they become pain points. I hope you found this helpful and that you will use this to make your functions more resilient. Happy coding! 🚀

Introducing the Mycelium Network Junior Developer Hour

Schalk Neethling — Tue, 07 May 2024 15:47:17 +0000

For almost two years I have been making a podcast called the Mycelium Network podcast that forms part of the Mycelium Network community.

The primary goal of the community is to create a space for early-stage (entry-level, junior) web developers to find peers and mentors to help them through their learning journey. The primary goal of the podcast is to create a space where these same folks can share their stories and have a voice.

A place where they can share their ups, their downs, and their dreams. The ultimate goal is to open up opportunities to break into the industry and start to build their dream life.

So far, it has been mildly successful but has not achieved the goals I set out for it. With this in mind, I am pivoting how I am approaching this going forward. Instead of a pure audio podcast with me and a guest, this will now be a live-streamed event ~~every two weeks~~ once a month, known as the Mycelium Network Junior Developer hour.

Here is how it will work.

~~Every two weeks~~ Once a month on a Wednesday at 5 PM UTC I will host an hour-long live stream across YouTube, Twitch, and LinkedIn, using Riverside.fm. I will invite another mentor to join me for the stream, but most importantly, I invite junior developers to join the stream.

As a junior developer, you can participate in the stream in several ways:

Listen in
You can contact me beforehand to express interest in sharing your story live on stream
Bring your questions for us to answer hopefully
You can do all this with your camera on or off and using your name or a pseudonym, whichever you feel most comfortable with.
You can also email your questions or share your story, which we will read during the stream.

The stream will be recorded and made available on YouTube and as an audio podcast (wherever you listen to podcasts) a week after the live stream. My hope is that this more interactive form of the podcast will be more effective, garner more interest, and provide a better platform for junior developers to share their stories and be noticed.

The first Junior Developer Hour will be on ~~May 22~~ May 29 at 5 PM UTC and you can email me at juniordevhour@mechanical.ink to express interest in sharing your story live on the stream, share your story in text format, or send along your questions.

Times in other regions

9 PM - Dubai
7 PM - South Africa
5 PM - United Kingdom
2 PM - Rio de Janeiro
1 PM - New York
11 AM - Denver, Colorado
10 AM - San Francisco

Note: You will also be able to ask questions during the stream.

I look forward to experimenting with this new format, learning your stories, and building out the community. Comments, questions, suggestions? Please share them below.

Podcast: From Math Teacher to Web Developer: Adilson Sandoval's Inspiring Career Transition

Schalk Neethling — Fri, 03 May 2024 20:58:23 +0000

Breaking into the web developer field can be a daunting task, especially for those without a traditional computer science background. Adilson Sandoval's story serves as an inspiration for anyone aspiring to transition into a tech career, regardless of their starting point.

Adilson's journey began as a mathematics teacher, a profession he had dedicated nearly a decade of his life to. However, the desire for remote work opportunities and a higher income prompted him to explore alternative career paths. With a background in programming and a passion for problem-solving, web development seemed like a natural fit.

Undeterred by the challenges that lay ahead, Adilson embarked on a self-taught learning journey, leveraging free online resources like MDN Web Docs and JavaScript.info. These platforms not only provided comprehensive learning materials but also fostered a sense of community, allowing him to connect with fellow learners and seek guidance when needed.

As Adilson delved deeper into the world of web development, he quickly realized that securing his first job would be no easy feat. Numerous rejections and a lack of feedback during the job-hunting process threatened to erode his motivation. However, his unwavering resilience and determination kept him moving forward.

One of the key strategies that set Adilson apart was his commitment to contributing to open-source projects. By actively participating in these collaborative endeavors, he gained invaluable experience, showcased his skills, and demonstrated his ability to work in a team environment. This hands-on approach not only bolstered his portfolio but also allowed him to forge connections within the developer community.

Throughout his journey, Adilson encountered obstacles that tested his perseverance, such as imposter syndrome and the stress of adapting to a professional work environment as a newcomer. However, he drew strength from supportive communities and networks, which provided motivation, feedback, and learning opportunities when he needed them most.

One of the most valuable lessons Adilson imparts is the importance of embracing a growth mindset. As a web developer, continuous learning and adaptation are essential to keeping pace with the ever-evolving tech landscape. By prioritizing productivity, exploring opportunities for personal growth, and maintaining a healthy work-life balance, Adilson has created a sustainable and rewarding career path for himself.

For those aspiring to follow in Adilson's footsteps, his journey serves as a powerful reminder that barriers can be overcome with determination, strategic planning, and a willingness to learn and adapt. By leveraging free online resources, contributing to open-source projects, and fostering a supportive network, individuals from diverse backgrounds can pave their way into the world of web development and unlock a multitude of career opportunities.

What have been some of the biggest challenges you have faced as a junior or early-stage web developer? Share your journey in the comments.

Learn more on Substack, or listen wherever you listen to podcasts.

What we lose at the gates

Schalk Neethling — Thu, 25 Apr 2024 20:46:08 +0000

Perhaps it is the social bubble I find myself in, but it seems there is a lot of talk about gatekeeping happening at the moment. While the bubble metaphor does not quite work for what will follow, I do not have a better one, so humor me.

I want to start by telling you a story.

I know this person who, at age 15, discovered their love for music and guitar. At the time, it was hard rock, which evolved into heavy metal and later death metal. School was okay, and they did really well at some sports activities such as tennis and cricket, but their participation was mainly because of the fringe benefits bestowed upon those who excelled in these activities.

What they could not wait for was to get home, pick up their axe (a common name for an electric guitar), play along with their favorite tunes, practice scales, sweeping, tapping, and write music. Even better was the weekends when the band got together and made music. There was no option to study music at school, so their interest in schoolwork declined over time, as did their grades.

At the end of grade 9, they decided to leave school and go to a local college to study music (classical guitar) and music theory. Unfortunately, after only a year at college, the music department closed. They faced a choice: C'est la vie and go back to school and the way things were, or decide to take the road less traveled and do private tutoring for guitar and music theory.

They chose the latter, and some might say it made all the difference.

After a couple of years of dedication and hard work, they started winning one music competition after another, played at music festivals, and passed their grade 8 practical guitar exam with the highest grade in the institution's history. Wanting to pursue their performer's licentiate and possibly a teacher's licentiate, they encountered a hurdle (gate). Without a matric (grade 12), this was not possible. Not being one to give up easily, they signed up to do their grade 11 and 12 in one year and write their final year exams while studying through correspondence, all while continuing to study music theory and playing concerts.

After completing the obligatory grade 12, they had the opportunity to attend classical guitar master classes in Bath, UK. Not something one could pass up, they jumped at the opportunity. Upon returning, they spent some time teaching guitar and music theory, played at local festivals, and met the woman of their dreams.

They got married and started a life together. Another opportunity came knocking – the chance to travel to the Netherlands to play a house concert. After returning from the trip, another challenge awaited – their first child was on the way. After giving teaching a proper go and playing more concerts, it became clear that passion and love alone would not pay the bills.

It was at this time that the internet was making itself known, and an interest started to form. This was not new, as they had always been interested in computers from the days of Visual Basic. They signed up for graphic design classes using the Corel suite of tools. This did not quite scratch the itch, and they decided to sign up for a 6-month course in web design. This, along with a tool called Macromedia Flash, unlocked a new world of possibilities. They could use their design skills and combine them with motion and sound to build multimedia pieces for clients from all over the world thanks to platforms such as Elance and the ability to reach across borders through the power of the internet.

After some time, they signed up for a diploma in Java 2, which introduced them to the world of building software and software that could run in the browser through Java Applets. Java was also the technology that introduced them to open-source through projects such as the Apache Foundation and the Tomcat server. Through open source, they were introduced to the world of web standards and web accessibility.

After some time working in the Java world, later dabbling with Java 2 Micro Edition (J2ME) to build software for the Blackberry, and then finally moving to enterprise Java (Java EE) using Tomcat and JBoss, they had worked at a variety of corporate companies, but something was missing – the passion they had back in the days of making music.

Finally, in late 2011, they found the community that would reignite this passion. The community was built around open-source, the open web, web standards, and building a web based on 10 principles known as the Mozilla Manifesto. They saw an opening for a front-end web developer at Mozilla (globally remote), applied for the role, and resigned from their current employer before having gotten the thumbs-up from Mozilla.

Thankfully, the gods were smiling upon them and their family, and the offer from Mozilla came to be. They spent almost 12 years working at Mozilla on a wide variety of projects, from web to Firefox OS, the Firefox onboarding experience, the shape of the web project, and finally, MDN Web Docs.

In late 2023, they made the difficult decision to leave Mozilla, tried to start their own company (during a time when the world economy was not great), realized the wheels were coming undone, and thankfully landed a role at the startup BoxyHQ.

In April of 2024, their paths would diverge, and they are now on the precipice of something wonderful. What the next part of the journey will be, they do not yet know, but they are cautiously optimistic.

If you have not yet realized, the protagonist in the story is me.

This is my story.

My name is Schalk Neethling, I live in Pretoria, South Africa, and I am a proudly self-taught frontend engineer. I got where I am today through perseverance and never allowing myself to give up. With that said, this would not have been possible without the incredible support from family, friends, and the wonderful open-source community I have now been a part of for going on 15 years.

There is much more to my story, but I will save all the gory details for another day.

Why did I choose to share all of this?

I shared it because at any point during this story, my journey could have been cut short, and things could have turned out very differently for me if I had been blocked from participating and applying to the opportunities that came my way because I did not finish school in the same way as many others, because I was not in the top 5% of those in Grade 12, or because I do not have a university degree.

I do face limitations and have to swallow bitter pills from time to time when I cannot apply for a role because of where I live. Thankfully, there are enough companies with a big enough vision who embrace what it truly means to be a remote company. I have also felt discriminated against due to salary scales based on where you live and not your contribution to the company (by the way, I am here to tell you that this can lead to very uncomfortable conversations between peers).

So what do we lose at the gate? While I do not consider myself the greatest software engineer, designer, contributor, or maker, I do know that I have something worthwhile to contribute to the world.

When industries, companies, and individuals with seeming authority close the gates and slam shut the padlock on those who chose the road less traveled, these are the people we lose at the gate.

These are the people who miss out on contributing their voice and their skills to the world. These are also the people those on the other side of the gate are missing out on working with and learning from.

If we truly want a diverse, rich, welcoming, and vibrant global community of contributors and makers, it is time to unlock the padlock and open the gates.

How do you use git rebase? Let's go through one use case

Schalk Neethling — Tue, 23 Apr 2024 21:43:18 +0000

I have been making these short (1 to 5-minute) videos covering a specific topic that I use daily or frequently. I have been posting them to my YouTube channel but they have not gained much traction over there so, I thought I would share them here along with an extended transcript.

If you like this one and want to see more, please let me know in the comments. If there is something specific you would like me to cover, same deal. 😉 👍

Let's say you opened a pull request and then reviewed your code and realized there's something that you forgot or want to change. You could make the change, add a new commit, and push to your code hosting service of choice, but now you have two commits.

While using multiple commits can be incredibly useful, I like to start my initial pull (merge) request with a single commit. This is a general practice I picked up while working at Mozilla and it has served me well.

Ok, good to know, but what do you do when you inevitably run into this scenario? In these instances, git rebase is your friend.

After you have added your new commit, type the following in your terminal:

git rebase -i main

The -i above will put you into interactive mode and main is the branch against which you want to rebase. When you press enter, you will see something similar to the following:

pick 4ad8867 page: identity federation product page
pick d57c578 small prose change

# Rebase 2004347..396a1b6 onto 2004347 (2 commands)

The above will be followed with a lot of documentation concerning the command and the various options you have.

Note: Addressing all of those is not in the scope of this post, but if you would like me to cover this in more detail, let me know.

For this use case, I almost always use fixup over the other options. The reason I use fixup over squash is that I only want to keep the commit message from the initial commit. That then is also the primary difference between these two options. Let's fixup our commit history:

pick 4ad8867 page: identity federation product page
f d57c578 small prose change

# Rebase 2004347..396a1b6 onto 2004347 (2 commands)

Once you have done the above, you will be left with a single commit and only the initial commit message. Great! All that is left to do is push this to the remote repository.

If you try to do this using git push origin branch-name, you will encounter an error message and Git will not allow you to push to the remote. This is because the above action changed the history (as mentioned above) and Git generally does not want to encourage this.

However, we are okay with having changed the history so we can use the -f (force) flag to tell Git that we know what we are doing and to allow our push to overwrite what exists on the remote branch.

git push -f origin branch-name

With that, we now have our most recent changes on the remote branch, but still only have a single commit using our initial commit message.

I hope that you found this helpful. As mentioned earlier, if you would like more of these, have specific topics you would like me to cover, or have any other feedback, please let me know in the comments.

Seeking suggestions for virtual co-working

Schalk Neethling — Sun, 21 Apr 2024 11:41:54 +0000

Hey All!

I am curious if there are any communities or online platforms you all use for virtual co-working. Being able to work remotely has a lot of benefits, but sometimes, it can get a bit lonely. Human beings are generally social creatures and need some human interaction, accountability, or even just the sense that there is someone else around.

This can be especially true late at night or during the early morning hours. I am curious to learn if there are such services, if there is a need for such a service, or how you work around it.

10 Top accessibility errors and how to avoid and fix them

Schalk Neethling — Mon, 15 Apr 2024 20:55:15 +0000

In late December of 2023, TPGi posted its list of the top accessibility errors found through its ARC automation tools in 2023. I am not just going to list them here as that will not be very useful to anyone. What I decided is that the only way there will be a chance that these do not end up on the list again at the end of 2024 is to explain these errors and offer a solution.

So here we go. There are ten errors in total, but some are closely related and will be grouped in this post.

No link text, missing link alt attribute, or no label for button

Links are the lifeblood of the web. It is how we link pages together, it is how crawlers index the web, and it is how we get around websites and applications.

When link text is missing or is not meaningful, it becomes problematic for keyboard users and those using assistive technologies such as screen readers.

<a href="mailto:peter@example.com"
  ><svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="currentColor"
    viewBox="0 0 16 16"
  >
    <path
      d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
    /></svg
></a>

You might have seen code like this. We use an anchor link with a mailto and then instead of text, we add an SVG icon. If you look at this visually, it is a rather well-known icon of a paper plane and without any styling, the SVG icon will be blue, which most people will recognize as a link. In addition, you can tab to it as it is an interactive element however, if you do so with a screen reader, the screen reader will read out something like, "link".

Note: You can get into the same problem when using a button element and the solutions are the same. To not make this post longer than it already is, I will not dig into the details, but feel free to ask me for more information in the comments.

The screen reader user therefore has no idea what this link will do if they trigger it. With the SVG nested in the HTML, we can use the title SVG element to fix the problem.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="16"
  height="16"
  fill="currentColor"
  viewBox="0 0 16 16"
  role="img"
>
  <title>Email me</title>
  <path
    d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
  />
</svg>

Note: You may have noticed that I added a role of img to the SVG. This is so that the browser will not attempt to read the contents of the SVG but treat it as an image.

What if the SVG is not inlined in the HTML but added as a background image using CSS? You have two options with the same result. The first is to add a class called visually-hidden to your global CSS

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

You would then use the following HTML:

<a href="mailto:peter@example.com" class="icon icon-email"><span class="visually-hidden">Email me</span></a>

The CSS will hide the text visually, but the screen reader will still read it and use it as the accessible text of the link. Another option is to use aria-label.

<a aria-label="Email me" href="mailto:peter@example.com" class="icon icon-email"</a>

Great, but did I mean by links having meaningful text? Consider the following:

Learn more about writing meaningful link text. <a href="https://wcag.com/blog/writing-meaningful-link-text/">Click here</a>

If you look at this visually in the browser, you might not see the problem. However, for someone using a screen reader and either tabbing through the links on the page or using the links menu shown earlier, all they will hear is "Click here". This is what is meant by having meaningful text.

It is very easy to fix though.

<a href="https://wcag.com/blog/writing-meaningful-link-text/">Learn more about writing meaningful link text.</a>

The video below walks through this as well.

Positive `tab-index` and non-interactive elements in the tab order

As mentioned, users who rely on a keyboard to navigate your site, power users, and those using assistive technologies such as screen readers very often use their tab key to move through your sites and applications.

By default, the only elements that will receive focus are interactive elements such as links, buttons, and form elements. There are ways to force a non-interactive element to be added to the tab order or control the tab order, and there is also a way to make an element focusable without adding it to the tab order. This is commonly done when the focus state is managed via JavaScript. I will not touch on this last one here.

You can control the natural tab order by using positive numbers with the tab-index attribute. There is never a good reason for this. I very rarely use blanket statements like this, but I believe this is one of the instances where it is warranted. This practice is extremely brittle and can quickly break the user experience and user expectations. Instead, use semantic HTML and ensure that the HTML source order matches your desired tab order.

Remember you can also change the layout using CSS, but do not try to control the tab order, let the browser do the work for you.

Another way you can use tab-index is with a value of 0 (zero). This allows you to add a non-interactive element into the "natural" tab order. I wrapped natural in quotes in the previous sentence because while the item will be added in the natural tab order, there is nothing natural about a non-interactive element being made focusable.

This is another one where I would advise relying on sensible HTML source order and allowing the browser to take over from there.

Missing `alt` text

It is hard to believe that at the end of 2023 and therefore in 2024 this is still one of the top errors showing up in accessibility audits.

The guidelines are clear, and adding the appropriate content for an alt attribute is quick and easy. This leads me to believe that most of these are introduced not through user error but because of the lack of support from various tooling.

I hate to call out a company, but I stopped using Buffer because their tools do not allow me to specify alternative text when adding an image to a scheduled social media post. Now, does the blame lie on the side of Buffer or on the side of the social media platforms that do not provide an API to specify alternative text? I do not know, but I would love to know. If you know, let me know in the comments.

Whenever you can, please take a moment to provide alternative text for any media that conveys meaning and is not purely decorative. While there is no limit on the number of characters you can use in an alt attribute, try to be descriptive but concise. Tools such as the various chatbots can also help you here if, for example, your first language is not English and you want to provide alternative text in English.

As an example let's say the hero image for this post was the only place where the title was conveyed to the reader. In that case, I would markup the image as follows:

<img alt="An image depicting people of various ages and abilities. Overlayed is the text, '10 Top accessibility errors and how to avoid and fix them'" src="/media/hero.webp" width="1200" height="400" />

Seeing that the image is purely decorative and the title is available to screen readers as text, I would use an empty value for the alt attribute:

<img alt="" src="/media/hero.webp" width="1200" height="400" />

Lists not nested correctly

The primary concern is that a developer does not use the most appropriate list type for the content. Let's say you are writing the instructions to make a pizza. Before making the pizza you would need to go to the store and buy the ingredients. Once you have the ingredients you need to follow the needed steps to ensure a successful and delicious pizza. However, the order you buy the ingredients is not important only that you buy them all.

Now you could, and probably would, mark this up as two separate lists, but for the sake of the example let's use a primary list and one nested list.

You could use an unordered list and nest another unordered list, but then you would have made the mistake that this error is all about. Instead, our primary list is an ordered list and our ingredient list is a nested unordered list.

<ol>
  <li>Head to the store and buy the following ingredients:
    <ul>
      <li>Bread flour</li>
      <li>Dry yeast</li>
      <li>Extra virgin Greek olive oil</li>
      <li>Tomato sauce</li>
      <li>Cheese</li>
      <li>Fresh basil</li>
    <ul>
  </li>
  <li>Proof the yeast</li>
  <li>Knead the dough</li>
  <li>Let the dough rise</li>
  <li>Preheat the pizza stone</li>
  <li>Prepare the toppings</li>
  <li>Flatten and stretch the dough</li>
  <li>Brush the dough with olive oil</li>
  <li>Spread with tomato sauce and sprinkle with toppings</li>
  <li>Slide pizza into the oven</li>
  <li>Bake</li>
  <li>Stuff thy face 🍕</li>
</ol>

Duplicate labels used

The labels here refer to the labels used with form elements. While it is critical to ensure your labels are unique and descriptive, I have found that it is still very often the case that people either do not specify labels (relying on the placeholder) or specify a label, but do not associate the label with the input element.

<label>Username</label>
<input type="text" name="username" id="username" />

<label>Email address</label>
<input type="email" name="email" id="email" />

Please, please ensure that you always provide unique, clear label text, associated with the relevant input. What do I mean by associating a label with an input? This is achieved by a combination of the for attribute on the label element and an associated id attribute on the form element.

<label for="username">Username</label>
<input type="text" name="username" id="username" />

<label for="email">Email address</label>
<input type="email" name="email" id="email" />

Invalid `aria-labelledby` and `aria-describedby`

These errors are caused by the same underlying problem and are solved by the same solution so I will describe them together. Both of these attributes work in much the same way as we just discussed with associating a label element and form element.

Instead of the for attribute, however, you use either aria-labelledby or aria-describedby. The value of these attributes must match the value of an id attribute on another element. For example:

<section aria-labelledby="my-portfolio-section-title">
  <h2 id="my-portfolio-section-title">My portfolio</h2>
</section>

NOTE: A section element without an accessible name has an implicit generic role and therefore has no real semantic meaning. The example above does have an accessible name thanks to the aria-labelledby attribute. In this case, the section has a role of region and as such will show up in the landmark roles section of screen reader tools such as VoiceOver on macOS.

An instance where using the technique above is incredibly useful is with the nav element. On a documentation site, for example, you might have a header with your primary navigation, a sidebar with navigation for your documentation, a table of contents for the current page, and a secondary navigation in the footer. If all of these are marked up using the nav element, you will have four landmarks, but they will all be identified as navigation without any distinguishing label. You can fix this with either an aria-label or aria-labelledby.

<nav aria-label="Primary">
...
</nav>

<aside>
  <nav aria-labelledby="sidebar-title-get-started">
    <h3 id="sidebar-title-get-started">Get started</h3>
    ...
  </nav>

  <nav aria-labelledby="sidebar-title-learn-astro">
    <h3 id="sidebar-title-learn-astro">Learn Astro</h3>
    ...
  </nav>
</aside>

Conclusion

I hope you found all of this helpful and that it will help you avoid these very common errors and allow you to fix them when you do come across them. Now go and make the web awesome and accessible for all.

Here are the 10 projects I am contributing to over the next 6 months. Share yours

Schalk Neethling — Sat, 13 Apr 2024 16:20:28 +0000

My contributions to open source projects have gone down in the last nine months or so and I do not like it. Thankfully, it is one of those things in my control, so I am changing that.

Here are the 10 projects I picked to contribute to over the next 6 months. Which projects are you contributing to?

Update: One thing we are all allowed to do is change our minds or realize we have overcommitted ourselves. As such I am reducing the number of projects I intend to contribute to.

Someday/Maybe

I also have five of my own projects which you are welcome to contribute to!

HTML: A Comprehensive Guide - Chapter One

Schalk Neethling — Wed, 10 Apr 2024 00:27:53 +0000

Today I am super proud to announce that I have finally picked up the task of finishing my book titled, "HTML: A Comprehensive Guide". It feels wonderful to write that and put it out in the public domain (there is a hidden pun here).

You all now have the job of keeping me accountable. 😃

Here is the resolution of the pun. I am writing the book in public and releasing it under the MIT license (not quite public domain but close). This means that the book is open source. Yup, you read that correctly. With that said...

Writing a book takes a lot of time and dedication. I believe I have the dedication and the curiosity, but time is hard to come by these days as I am sure you are all aware. However, if you find the work I am doing on the book helpful and would like to support the work, here are a few things you can do.

Share it widely.
Read it, use it, and provide feedback.
Contribute by raising an issue or even addressing an existing issue.
Support me financially by signing up for any of the tiers on Patreon.

In so doing I hope to be able to dedicate more and more time not only to writing the book, but to teaching others who want to learn web development, continuing to produce the podcasts, and managing the Mycelium Network community (Join on Slack or Join on Discord). Creating in the open and teaching others to build standards-compliant and accessible websites is a passion of mine that fuels everything I do. I thank you for your interest and support and look forward to teaching and learning from all of you.

With that, here is the first chapter to give you a sense of what the book will be like. If you want more, follow the link below (I just published chapter two!).

Read, HTML: A Comprehensive Guide today!

Chapter 1: Getting Started with HTML

If one has always thought of HTML as just some form elements, div and span elements, links, and paragraph tags, it seems strange that one would dedicate an entire book to the language. As you will see throughout this book, there is a lot more to the HTML language.

What is HTML?

HTML stands for Hyper Text Markup Language and has been at the core of the web since its very inception in 1989. It forms the basis of all things on the web no matter how simple or how complex. Without HTML, there are no web pages or applications. HTML also provides the semantic structure of our documents and applications and this is where knowing the language really pays off. Semantic structure is also critical when it comes to the accessibility of your documents, a topic I will cover throughout the book.

There is a lot to HTML and some aspects of the language such as canvas can take up an entire book on their own. For some topics such as this, I will provide an overview and then provide resources for further reading.

The `html` element

We will start with the first element in every HTML document, the html element.

What about the DOCTYPE? That is a good question. While the DOCTYPE is the very first entry in our HTML documents, it is in fact not an HTML element. The sole purpose of the DOCTYPE is to ensure that the browser does not switch into what is commonly known as quirks mode, but instead, makes a best effort attempt at following the relevant specification. I say, "best effort attempt", as not all browsers have implemented the entirety of the HTML specification. This is especially true of older browsers and so, these browsers will do their best to interpret the language and use a fallback where it does not understand the specific syntax.

The DOCTYPE is required for all HTML documents and takes the following form:

<!DOCTYPE html>

There is an extended legacy form, but the above is all that you will ever need to be concerned with.

Now that the browser knows that what follows will be HTML, we start our document with our root element.

<html>
  ...
</html>

`lang`

Being at the root of our document, there is one attribute that should always be set on the html element. The lang attribute on the html element indicates the primary natural language the document is written in. It also assists speech synthesis tools in what pronunciations to use and helps translation tools select the rules they should apply. This is critical for the overall accessibility of your documents. It takes the following form:

<html lang="en">
  ...
</html>

Should you not want your entire document to be localizable through translation tools, you can specify the translate property, setting its value to no :

<html lang="en" translate="no">
  ...
</html>

The `head` element

The head of our HTML document contains metadata about the document. So what is metadata? In short, it is “data about data”. Not all metadata lives in the head though, and not all metadata that lives in the head is necessarily descriptive, more on this later.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  ...
</html>

The `title` element

The first piece of metadata we will add to our web pages is the title tag. Seems like such a simple element, and it is, but while simple, it is critical to orient a user. The title uniquely identifies the current page in the browser's history, is the first piece of information read to users using screen readers; is the title shown to users in search results, when sharing on social media, and is crucial for SEO(search engine optimization).

With that said, keep the following guidelines in mind when writing your title:

Be concise when writing your titles and aim to keep the total character count at around 60.
Remember that document titles should make sense when read out of context.

See the web content accessibility guidelines (WCAG) for more information on providing descriptive titles for web pages.

For example, the title for this chapter would read:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Chapter 1: Getting Started with HTML - HTML Comprehensive Guide
    </title>
  </head>
  ...
</html>

The title tag does not have any special attributes but supports all the global attributes, one of which is translate. Using this attribute, you can prevent translation tools from localizing your page title.

Why would you want to do that? Your page title could be the title of a poem or a song. In those cases, you do not want the title translated. For example:

<title translate="no">Revoir Paris | Roland Dyens</title>

Here, it would also be prudent to add a lang attribute indicating the primary language used in the title tag. As mentioned earlier, this will assist speech synthesis tools in what pronunciations to use. For example:

<title translate="no" lang="fr">Revoir Paris | Roland Dyens</title>

The `base` element

The base element is written as a self-closing, or void, tag. This means that, while a lot of tags in HTML are written as follows:

<title>My page title</title>

A self-closing tag is written like this:

<base href="https://html-comprehensive-guide.dev/" />

The base element allows you to set a base URL for all links on the current page, set a base browsing context, or both, for all links on the page. Let’s look at an example.

<ul>
  <li>
    <a href="https://www.goodreads.com/book/show/11588.The_Shining"
      >The Shining</a
    >
  </li>
  <li>
    <a href="https://www.goodreads.com/book/show/149267.The_Stand">The Stand</a>
  </li>
  <li><a href="https://www.goodreads.com/book/show/10614.Misery">Misery</a></li>
  <li><a href="https://www.goodreads.com/book/show/10592.Carrie">Carrie</a></li>
</ul>

All of those links share the same base URL. Using the base element, you can avoid repeating the base URL in every link tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>I got your base</title>
    <base href="https://www.goodreads.com/" />
  </head>
  <body>
    <ul>
      <li><a href="book/show/11588.The_Shining">The Shining</a></li>
      <li><a href="book/show/149267.The_Stand">The Stand</a></li>
      <li><a href="book/show/10614.Misery">Misery</a></li>
      <li><a href="book/show/10592.Carrie">Carrie</a></li>
    </ul>
  </body>
</html>

NOTE: If the HTML above was on a page that was hosted as part of the Goodreads website, you would not include the URL as part of the link and instead, opt for using relative URLs. In other words, instead of https://www.goodreads.com/book/show/11588.The_Shining you will do just book/show/11588.The_Shining. The base element would therefore not be useful in this case.

Now, you may also want those links to always open in a new tab (browsing context). One option is to do:

<ul>
  <li><a href="book/show/11588.The_Shining" target="_blank">The Shining</a></li>
  <li><a href="book/show/149267.The_Stand" target="_blank">The Stand</a></li>
  <li><a href="book/show/10614.Misery" target="_blank">Misery</a></li>
  <li><a href="book/show/10592.Carrie" target="_blank">Carrie</a></li>
</ul>

As mentioned, there is a second attribute you can set on the base element, and that attribute is the target attribute. We can therefore avoid repeating target:

NOTE: Be careful here as this could negatively impact the user experience and accessibility as there is nothing indicating to the user that all links will open in a new window or tab. While not a blanket statement, I almost always prefer to leave the choice of whether a link should open in the same or a different tab or window up to the user.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>I got your base</title>
    <base href="https://www.goodreads.com/" target="_blank" />
  </head>
  <body>
    <ul>
      <li><a href="book/show/11588.The_Shining">The Shining</a></li>
      <li><a href="book/show/149267.The_Stand">The Stand</a></li>
      <li><a href="book/show/10614.Misery">Misery</a></li>
      <li><a href="book/show/10592.Carrie">Carrie</a></li>
    </ul>
  </body>
</html>

With the above in place, all links on the current page will use https://www.googreads.com as its base URL and all links will open in a new tab. The thing is, it does mean that all "links" will have this behavior. Not only are anchor tags affected but all elements with a href attribute are affected. For example:

<base href="https://www.goodreads.com/" />
<link rel="stylesheet" type="text/css" href="css/pink.css" media="screen" />

In the above scenario, the browser will attempt to load the stylesheet from the Goodreads website, which is probably not what you intended. Thankfully, the base element only affects elements below it in source order, so changing the above as follows will solve the problem:

<link rel="stylesheet" type="text/css" href="css/pink.css" media="screen" />
<base href="https://www.goodreads.com/" />

Remember that _blank is not the only possible value for the target attribute. One other value is _top. Using _top as the value of target might be useful as a means of frame busting aka, prevent your site from being displayed in an iframe.

<base target="_top" />

While this will not prevent the site from initially being loaded in an iframe, it will cause clicks on any links in the page to bust out of the iframe by setting its browsing context to the topmost browsing context i.e. the browser window itself.

I will close this chapter with an example use case that might be a bit of a stretch. I am using a combination of the base element, a specific CSS class on certain elements, and some JavaScript. The result is something that could be useful in a web application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base target="_blank" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The HTML base element</title>
    <link rel="stylesheet" type="text/css" href="css/pink.css" media="screen" />
  </head>

  <body>
    <ul>
      <li><a class="native" href="add-book">Add Book</a></li>
      <li><a class="native" href="view">View Bookshelf</a></li>
    </ul>

    <ul>
      <li>
        <a href="https://amzn.to/3Olm2de">Misery</a>
      </li>
      <li>
        <a href="https://amzn.to/3OlsCQM">Carrie</a>
      </li>
    </ul>
  </body>
  <script>
    document.addEventListener("click", (event) => {
      if (event.target.classList.contains("native")) {
        event.preventDefault();
        window.location = event.target.href;
      }
    });
  </script>
</html>

With the above, clicking on any link that has a class attribute with the value native will be intercepted by JavaScript and opened in the same tab/window. All other links will open in a new tab. One interesting aspect to note about the above is that, even when intercepted by JavaScript, the value of event.target.href will use the base href value defined on the base element, for example, https://www.goodreads.com/add-book. So be careful 😄

Some final notes on the base element. There must be no more than one base element per page. If there are multiple, all but the first will be ignored. As with href, all elements that have a target attribute set are affected by the value of the target attribute of the base element. This means that forms with a target will also be affected.

In case you are interested, here is the URL parsing algorithm (from the W3C documentation):

<base href="https://www.example.com/news/index.html" />
...
<a href="archives.html">archives</a>
<!-- The above URL will be https://www.example.com/news/archives.html -->

<a href="/blog/archives.html">archives</a>
<!-- The above URL will be https://www.example.com/blog/archives.html -->

<a href="./blog/archives.html">archives</a>
<!-- The above URL will be https://www.example.com/news/blog/archives.html -->

<a href="https://www.otherwebsite.com/blog/archives.html">archives</a>
<!-- The above URL will be https://www.otherwebsite.com/blog/archives.html -->

12 Free Courses To Help You Develop More Secure Software - Shift Security Left

Schalk Neethling — Mon, 08 Apr 2024 20:24:16 +0000

With the recent backdoor exploit of the xz package, security is on several people's minds. It has always been critical to be aware of security topics such as Cross-Origin Resource Sharing (CORS), Content Security Policies (CSP), avoiding cross-site scripting attacks (XSS), and subresource integrity among other security topics. Still, many of us either do not have the time or the money to learn these and other related security topics.

With my involvement in the open-source world and wanting to ensure that the projects I maintain and contribute to are secure, I decided to take a look at what the Linux Foundation has to offer in terms of course material. Having previously studied for and taken the Node.js Developer exam, I found their content to be good and up-to-date.

I was pleasantly surprised to find that they have quite a few courses aimed at what they have classified as beginner (we are all beginners at some time) friendly courses. Not only that, but all of these courses are free! I am planning to work my way through them so, I thought I would share the list of courses here for ease of access for myself, and all of you who might be interested in sharpening your security knowledge.

Let's dive in.

Secure Software Development: Requirements, Design, and Reuse

This course discusses the basics of security, such as what risk management really means. It discusses how to consider security as part of the requirements of a system, and what potential security requirements you might consider. This part then focuses on how to design software to be secure, including various secure design principles that will help you avoid bad designs and embrace good ones. It also considers how to secure your software supply chain, that is, how to more securely select and acquire reused software (including open source software) to enhance security.

The Secure Software Development: Implementation

This course focuses on key implementation issues: input validation (such as why allowlists should be used and not denylists), processing data securely, calling out to other programs, sending output, and error handling. It focuses on practical steps that you (as a developer) can take to counter the most common kinds of attacks.

Secure Software Development: Verification and More Specialized Topics

This course discusses how to verify software for security. In particular, it discusses the various static and dynamic analysis approaches, as well as how to apply them (e.g., in a continuous integration pipeline). It also discusses more specialized topics, such as the basics of how to develop a threat model and how to apply various cryptographic capabilities.

Developing Secure Software

Modern software is under constant attack, but many software developers have never been told how to effectively counter those attacks. This course works to solve that problem, by explaining the fundamentals of developing secure software. This course covers the following topics:

This first part of the course focuses on how to design software to be secure, including various secure design principles.
How to secure your software supply chain, that is, how to more securely select and acquire reused software including open source software.
The second part of this course focuses on key implementation issues such as input validation, processing data securely, calling out to other programs, sending output, and error handling.
The third part of the course discusses how to verify software for security using static and dynamic analysis approaches.

Securing Your Software Supply Chain with Sigstore

This course will introduce you to Cosign, Fulcio, Rekor, and the Policy Controller, the tools under the Sigstore umbrella, explaining how they support a more secure software supply chain. You will learn how to employ these tools throughout your software development, testing, and distribution processes. Additionally, those who use or implement your software will be able to verify its authenticity through tamper-resistant public logs.

Understanding the OWASP® Top 10 Security Threats

By the end of this course, participants will acquire a comprehensive understanding of the OWASP Top 10 Security Threats, empowering them to identify and mitigate vulnerabilities, understand exploitation techniques, and apply risk management for web app security.

GitHub Supply Chain Security Using GitGat

This course starts by providing an understanding of the risks regarding a GitHub account, Github’s account types and their security ramifications, Github’s access controls, Github branch-protection rules, and OPA concepts. This course will equip you with the knowledge to correctly assess your own your organization’s GitHub account security posture using the GitGat open-source tool, correctly set up basic GitHub security posture, whether you’re an individual or run a GitHub organization, and set up the state for the GitGat project and know how to set up a continuous security audit of your repositories.

Cybersecurity Essentials

The course discusses security precautions and risks when using technology for personal and professional purposes. It covers strategies to protect information during everyday activities and transactions, prevent exposure to account and data compromises, and identify what to do if a data breach occurs. The course includes real-world scenarios highlighting personal and professional situations and the implications of unsafe practices.

Security Self-Assessments for Open Source Projects

You should be able to articulate the value and initiate the process of a security self-assessment for your project to expedite future joint assessments or security audits.

Securing Projects with OpenSSF Scorecard

You will learn about the different checks provided by OpenSSF Scorecard, how to configure the checks for your environment, and how to automate their implementation.

Automating Supply Chain Security: SBOMs and Signatures

Learn about software provenance, the role of source control, dependency tracking, and the creation of SBOMs. Get familiar with SBOM and signatory tools, and apply to cosign and SLSA workflows with GitHub Actions.

Introduction to Zero Trust

This course discusses the features and characteristics of a Zero Trust Architecture, the different models of trust and use cases, and provides opportunities for hands-on practice with open source tools such as SPIFFE/SPIRE, Open Policy Agent, and Istio service mesh.

Conclusion

That is quite a lot of courses and it is going to take time to work through them, but I believe it is time that we all shift security left and take some of the responsibility of securing our software on us, the software engineers. I also believe this is the case whether you are a frontend, backend, or full-stack engineer. Just like with accessibility, we all need to do our part.

If you are planning on working through all or some of these courses and want a study buddy or start a study group, let me know in the comments. I would love to join you.

Why are my table rows rendered outside the table? DOM template parsing caveats in Vuejs

Schalk Neethling — Sun, 07 Apr 2024 20:38:30 +0000

The problem described here might not be something you run into often, as it mainly applies to situations where you write your HTML template directly in your HTML document. If you use a string template or a single file component, you will not encounter this problem.

When learning or wanting to prototype an idea when using Vuejs quickly, you may choose to place all of your code in a single .html document. Something like this:

<div id="app">
  <h1>WaterBear</h1>
  <table>
    <caption>
      Contributors
    </caption>
    <thead>
      <tr>
        <th>Username</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  Vue.createApp({
    data() {
      return {
        usernames: ["schalkneethling"],
      };
    },
  })
    .component("github-user-row", {
      template: "#github-user-row-template",
      props: ["username"],
      data() {
        return {
          user: {},
        };
      },
      async created() {
        const userAPI = "https://api.github.com/users";
        try {
          const response = await axios.get(`${userAPI}/${this.username}`);
          this.user = response.data;
        } catch (error) {
          console.log(error);
        }
      },
    })
    .mount("#app");
</script>

Filling in the template

You will notice that the tbody is currently empty. For our rows, we might want to use an x-template, for example:

<script id="github-user-row-template" type="text/x-template">
  <tr>
      <td><img :src="user.avatar_url" height="100" width="100" />
        <a :href="user.html_url">{{ user.name }}</a>
      </td>
  </tr>
</script>

You would then use the template inside the table:

<github-user-row
  v-for="username in usernames"
  :username="username"
></github-user-row>

The above will loop over the usernames array and output a row for each.

The problem

If you open this page in a browser, you will find that the rows are rendered outside the table element. Why is this? You have just experienced a DOM parsing caveat when using Vue this way.

What is happening is that the browser sees the following when it parses the document.

<table>
  <caption>
    Contributors
  </caption>
  <thead>
    <tr>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <github-user-row
      v-for="username in usernames"
      :username="username"
    ></github-user-row>
  </tbody>
</table>

Later in Vuejs’s lifecycle, it will replace the component with our HTML but right now, the browser does not recognize the component, marks it as invalid, and hoists it outside of the table, producing the following HTML:

<github-user-row
  v-for="username in usernames"
  :username="username"
></github-user-row>
<table>
  <caption>
    Contributors
  </caption>
  <thead>
    <tr>
      <th>Username</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

When Vue reaches the stage in its lifecycle where it will replace the component with the HTML, you end up with the following:

<tr>
  <td>
    <img :src="user.avatar_url" height="100" width="100" />
    <a :href="user.html_url">{{ user.name }}</a>
  </td>
</tr>
<table>
  <caption>
    Contributors
  </caption>
  <thead>
    <tr>
      <th>Username</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

The solution

The way to address this problem is to use the special is attribute inside the table element as follows:

<tbody>
  <tr
    is="vue:github-user-row"
    v-for="username in usernames"
    :username="username"
  ></tr>
</tbody>

Note the vue: used in front of the template name. If you open the page in a browser, your table will render as expected. I hope you found this helpful and that it saved you some time in debugging.

Building a Managed Service Provider Business With Open Source

Schalk Neethling — Thu, 04 Apr 2024 16:15:41 +0000

Let's start by answering the question you may have off the bat. What is a Managed Service Provider? Instead of trying to explain it, I will quote from TechTarget:

A managed service provider (MSP) is a third-party company that remotely manages a customer's information technology (IT) infrastructure and end-user systems. Small and medium-sized businesses (SMBs), nonprofits, and government agencies hire MSPs to perform a defined set of day-to-day management services. These services may include network and infrastructure management, security, and monitoring.

Why Open Source?

This one I am qualified to answer. There are a couple of reasons why you would want to choose open-source when starting your MSP. These include, but are not limited to the following:

Speed up time to market.
No need to reinvent the wheel.
Learn from others who have come before you.
Cost savings.
Well-tested and proven to work effectively by real users.
Transparency, privacy, and security.

How did this article come about?

Before I go any further, I must let you know that this article is 100% inspired by and features projects mentioned by Brian McGonagill from Awesome Open Source. Brian was a guest on the Mechanical Ink podcast and I have been following his work and YouTube channel for some time now.

When I saw him starting this series, I was intrigued and immediately started watching. After the first episode of the series, I thought I would write a post introducing folks to the series, list the tools Brian mentioned in this episode, and highlight an option I feel would be a perfect fit for the SSO portion of the video as Brian did not mention a specific solution here.

The tools

A VPN (Virtual Private Network)

This is to ensure the security of your and your customer's data and infrastructure. Some suggestions:

Remote Monitoring and Management (RMM)

This is going to be key and the core of the tools you will be using as part of your business so, it is important to choose carefully here. Some suggestions:

Remote Support (Desktop Support)

Again, another key piece of your business is the ability to not only monitor but be able to log in remotely and provide support to people in real-time on their machines, securely.

RustDesk - GitHub

Backups

I do not think I need to say much here. No backups are a sure way to lose clients. As Brian mentions, this will be heavily client-dependent, but some options you may want to consider include:

Invoicing

You need a way to invoice your clients, keep track of invoicing, and collect payments. This aspect of a business is often overlooked by those of us who would prefer to code, design, or manage infrastructure. That said, if you let this slip, your business will quickly become a drain on your energy and your wallet. Some suggestions:

InvoiceNinja - GitHub
Crater - GitHub

Single Sign-On (SSO)

This brings us to single sign-on or SSO for short which I mentioned at the top of the article. Why would you need SSO? Other than the obvious security benefit of not having to manage multiple accounts across services, SSO improves the user experience for the very same reason.

In addition, having and supporting single sign-on will be a requirement should you ever want to do business with enterprise companies. As you onboard new employees, easily provisioning and de-provision accounts through a combination of SSO and Directory Sync will make your life and business security much easier and save you money. My suggestion:

BoxyHQ SAML Jackson - GitHub

Say Thank You: Do as I did and as you go through these amazing open-source projects. Visit their home on GitHub and give them a star to show your support and appreciation. It is how others find and support them.

This is going to get you off to a great start and ready for the rest of Brian's series. Are there any other tools you would recommend? Did Brian or I miss anything? Let me know in the comments.

Forem: Schalk Neethling

Raise The Red Flag Early: The Power of Explicit Return Types in TypeScript

The Subtle Pitfall of Implicit Returns

The Magic of Explicit Return Types

Why This Matters

Update: 11 December 2024

Credit Where It's Due

Conclusion

Introducing the Mycelium Network Junior Developer Hour

Times in other regions

Podcast: From Math Teacher to Web Developer: Adilson Sandoval's Inspiring Career Transition

What we lose at the gates

How do you use git rebase? Let's go through one use case

Seeking suggestions for virtual co-working

10 Top accessibility errors and how to avoid and fix them

No link text, missing link alt attribute, or no label for button

Positive tab-index and non-interactive elements in the tab order

Missing alt text

Lists not nested correctly

Duplicate labels used

Invalid aria-labelledby and aria-describedby

Conclusion

Here are the 10 projects I am contributing to over the next 6 months. Share yours

Someday/Maybe

HTML: A Comprehensive Guide - Chapter One

Chapter 1: Getting Started with HTML

What is HTML?

The html element

lang

The head element

The title element

The base element

Related Reading

12 Free Courses To Help You Develop More Secure Software - Shift Security Left

Conclusion

Why are my table rows rendered outside the table? DOM template parsing caveats in Vuejs

Filling in the template

The problem

The solution

Building a Managed Service Provider Business With Open Source

Why Open Source?

How did this article come about?

The tools

A VPN (Virtual Private Network)

Remote Monitoring and Management (RMM)

Remote Support (Desktop Support)

Backups

Invoicing

Single Sign-On (SSO)

Positive `tab-index` and non-interactive elements in the tab order

Missing `alt` text

Invalid `aria-labelledby` and `aria-describedby`

The `html` element

`lang`

The `head` element

The `title` element

The `base` element