DEV Community: Aellon

Are you a T-Shaped Developer?

Aellon — Sun, 16 Jul 2023 18:08:16 +0000

Up until now, I never put much thought into what type of developer I am. I studied a full stack curriculum at Flatiron School and I've focused on both frontend and backend at different times of my career. The other day my teammate mentioned that we should all work toward becoming T-shaped developers. That was a new one for me. What in the world is a T-shaped developer?

After a bit of research I learned that a T-shaped developer embodies the best of both worlds between being a specialist and a jack of all trades. They are an experienced expert in one field with some knowledge in other areas too.

While full stack usually entails that knowledge is generalized across the board, a T-shaped developer is a shiny rebranded version of full stack. It has the well-roundedness of full stack with the added bonus of a specialized area of expertise.

In the following chart example, the teal background color shows my depth of knowledge in data integrations (the vertical part of the T) as well as breadth across frontend, backend, full stack, and mobile app development (the horizontal part of the T).

I omitted some skills from the teal area for the sake of making a perfect T-shape, so a truer representation of my skills would look more like an abstract shape scribbled by a toddler.

There's no clear-cut definition of which fields are included as part of the chart, and the shape's contents seem to be entirely customizable. We all know that being a software engineer encompasses more than just writing code all day, so the next example shows my skills in the software engineer column along with aspects of other roles that I take on regularly.

You see, the chart can look different for everyone. Our levels of expertise are subjective and relative, so I could argue that every developer is already a T-shaped developer!

Creating a personal chart is a great exercise to dive deep into your own levels of expertise. What do you think, are you a T-shaped developer?

How to Test Accessibility, a Guide for Software Engineers

Aellon — Wed, 04 Jan 2023 04:28:28 +0000

Over one billion people worldwide live with a disability that can affect access to the Web. This guide is a starting point for Software Engineers to make sure UI elements are accessible.

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” —Tim Berners-Lee, W3C Director and Inventor of the World Wide Web

📖 Table of Contents

📘 Automated and Manual Testing
🎬 Take Action to Remediate Issues
✅ Accessibility Testing Checklist
❓ Resources and Training
📋 Related articles

📘 Automated and Manual Testing

After creating or updating a page or another frontend component, check your work by doing the following:

Automated Audit: Run an accessibility audit using at least one of the following tools:
- Google Chrome’s Lighthouse
  - Video Tutorial (Skip to 1:22): Google Lighthouse | Automated Accessibility Tool Review
  - Blog: Do an Accessibility Audit using Google Chrome LightHouse
- Accessible Web’s Extension
  - Web Accessibility Extension | Accessible Web
Sufficient Color Contrast Ratio: Check if the color contrast ratio is accessible with one of the following tools:
- Use the color contrast tool that is part of the Accessible Web extension
- Copy the text and background colors into this handy tool, Are My Colors Accessible, and play with the hue, saturation, and lightness meters until you find a combination of text and background colors that is accessible and use those colors on your page.
Screen Reader Capability: Use a screen reader to read the elements on the page. You should have the ability to read out all field labels, alternative text, headings, navigation, and error messaging. Choose your OS adventure:
- MacOS: no downloads necessary! Macs have accessibility features out of the box
  - Get started with accessibility features on Mac
  - Screen Reader Basics: VoiceOver -- A11ycasts #07
- Windows
  - Download NVDA
  - Screen Reader Basics: NVDA -- A11ycasts #09
Keyboard Compatibility: Use only the keyboard to interact with the elements on the page. You should have the ability to navigate menus, fill out and submit forms, open links, and open/close modals. Keyboard focus should also be visible (usually with a border highlight around the element).
- Click in the browser address bar
- Take your hand off your mouse/trackpad and use only your keyboard
- Start tabbing around
- Use Shift+Tab to navigate backward, spacebar activates checkboxes and buttons
  - A handy list of which keystrokes to use
- Look for focus and tabbing order. Can you get to all interactive objects?
  - Demo of browsing & interacting using a keyboard: Browsing with a keyboard
Zooming In: Check for loss of content or functionality by zooming in to 200% in the browser.
- Do any elements overlap other elements? i.e. an image overlaps text or navigation

🎬 Take Action to Remediate Issues

Fix issues identified in the automated audit and manual testing.
Run the audit and manually test again to make sure everything is fixed.
Pat yourself on the back! You made the page more inclusive!

✅ Accessibility Testing Summary Checklist

Refer to this checklist each time you need to test for accessibility and use the instructions above as needed.

Run an automated audit using Google Chrome Lighthouse or Accessible Web Extension.
Check for a sufficient color contrast ratio for all text and background colors.
Use a screen reader to read the elements on the page.
Start in the browser address bar and use only the keyboard to interact with the elements on the page.
Zoom in to 200% in the browser and check for any loss of content or functionality.
Fix any issues detected.

❓ Resources and Training

W3C Web Accessibility Initiative’s more in-depth guide of easy things to do to test accessibility: Easy Checks – A First Review of Web Accessibility

W3C Web Accessibility Initiative’s official guidelines: Web Content Accessibility Guidelines (WCAG) 2.1

Cover photo by Elizabeth Woolner

How to View Apex Code Coverage in VS Code

Aellon — Thu, 21 Jul 2022 22:19:00 +0000

This is a summary of instructions for how to view unit test coverage in VS Code as an alternative to using Salesforce’s Developer Console. The official guide, Apex Tests | Salesforce for VSCode is a great resource, but this post also includes a video walkthrough.

Instructions

In VS Code click Code > Preferences > Settings and search for Apex Coverage.
Set salesforcedx-vscode-core.retrieve-test-code-coverage to true by checking the box of that setting.
Click the beaker icon in the Activity Bar on the left side of the VS Code editor and run a test or multiple tests. The coverage percentage and lines that were not covered by the test run will show in the output panel.
To see code coverage for your test, click the three-bars icon that’s next to your Org alias at the bottom of VS Code and open the class or trigger that you’re testing. Click the the three-bars icon to toggle between enabling and disabling code coverage highlighting.

A video walkthrough:

Do you prefer to review test coverage in the developer console or VS Code? Let me know in the comments!

How to Share a Salesforce Scratch Org

Aellon — Tue, 31 May 2022 18:11:30 +0000

A scratch org is a disposable deployment of Salesforce code and metadata. Sometimes it's helpful to share a scratch org with a teammate. In this scenario Person A wants to share their scratch org with Person B. Reasons for sharing an org include:

Collaboration on a ticket
Passing along an org that you no longer need so a teammate can jump right into development instead of spinning up a new org

Instructions

Person A gets the Auth Url to provide for Person B by doing the following:

In the terminal run sfdx force:org:display -u <YourOrgUsername> --verbose and replace <YourOrgUsername> with your org username or simply sfdx force:org:display --verbose to use the default org.
Copy the value for Sfdx Auth Url and give it to Person B. The value will have the format "force://@" or "force://::@".

Then Person B stores the Auth Url by doing the following:

Create an auth.key file.
Open that file with vscode or another text editor
Add the Auth Url provided by Person A
Save the file. It should looks something like this:
In the terminal run the command sfdx force:auth:sfdxurl:store -f ../auth.key where ../auth.key is the path to the file with the auth url info. This command will use that file to identify and connect to the scratch org.
Open the org with the command sfdx force:org:open and voila! They're in Person A's org.

Salesforce sfdxurl Commands

Automagic Table of Contents

Aellon — Fri, 24 Jul 2020 20:45:41 +0000

Imagine visiting a website with seemingly endless scrolling. You could easily get lost in a sea of content, but I won't let that happen. Table of contents to the rescue! I will examine three approaches below.

Quick Way (not recommended)

Hardcoding a table of contents at the top of every page of content
This wouldn't be very DRY. It's an easy solution to get something working right away, but it could be time consuming in the long run. What if you need to add a table of contents to 100 pages, or what if a client is entering content? That would be a lot of copying and pasting, and a lot of room for error.

Better Way

Table of contents that is generated dynamically
This way uses some jQuery to generate the table of contents automatically. It will get the text from every <h2> element and generate a table of contents with links to those headings. CSS-Tricks has a really nice demo for this.

Best Way

Table of contents that is generated dynamically and highlights which section you're in
This takes the better way and adds some automagical flair to it. The table of contents will be hidden at first, to show a banner image or keep the navigation menu minimal. Then upon scrolling, the table of contents will appear, fixed to the top of the page. As you scroll down it will underline the section you're in.

The last approach may not be a good fit for every project, but it is my favorite for a long page of content. How would you add a table of contents?

Agile & Scrum & Kanban, oh my!

Aellon — Mon, 25 May 2020 22:08:44 +0000

While I've heard of Agile, Scrum, and Kanban, I'll admit that I wasn't well-versed in what defines these tools at this time yesterday. They came up in conversation and I realized I wanted to learn more!

The definitions I found in my research were very abstract, which is the beauty of the Agile Manifesto, because it's flexible enough to use with non-tech teams. I even realized that we practice an Agile process at my current company. Our way of doing things hits all of the key points:

Working software over comprehensive documentation : We develop beta sites ASAP then refine and fix any bugs.
Individuals and interactions over processes and tools : We all have the freedom to plan our work for the day, and there is no micromanaging. Every morning we meet briefly to discuss what we will do that day.
Customer collaboration over contract negotiation : Clients play a key role in developing their websites because they add their own content. They also collaborate in the decisions of features.
Responding to change over following a plan : We maintain flexibility throughout each project and adapt along the way.

Then I also came across the following job posting, which shows how an Agile environment would be applied in a software engineer position. They are looking for someone who will:

Collaboratively tackle difficult and ambiguous problems as part of a cross-functional team.

Write, test, debug, and deploy code across a variety of languages and frameworks, particularly Javascript/React.

Work across the different phases of the software development lifecycle including estimating level-of-effort, identifying the best approach, building, performing QA testing, deploying, documenting, debugging, and supporting features.

Participate and contribute to stand-ups, sprint planning, and retrospectives at the agile team level and up.

Perform code reviews with helpful and meaningful feedback for your teammates.

Research, document, note trade-offs and recommend potential solutions around future product features.

Work collaboratively across the engineering department to ensure standard methodologies and processes are followed.

This is a great real-world example of an Agile engineer's day-to-day, but how do Scrum and Kanban fit into all of this? Well, these are frameworks that offer more specifications to implement an agile workflow. The previous job posting refers to a Scrum environment, because the Scrum framework usually consists of small teams, sprint planning for ~2 week sprints, daily stand-ups, sprint reviews, and end-of-sprint retrospectives.

Kanban is another framework and is all about visualizing work, often done with a Kanban board made up of columns that contain tasks to do, what's in process, what needs to be reviewed, and what's done. This Atlassian video explains it really well.

Many teams including the one I'm on use both Scrum and Kanban in their Agile environment. I use a digital Kanban board called Flow as well as participate in daily Scrum stand-ups. We definitely lean more toward Kanban than Scrum. What's your workflow like?

3-Letter Months with ACF and PHP

Aellon — Fri, 15 May 2020 19:14:15 +0000

I only have a few months of experience working with Wordpress, so there are a lot of small victories, and I'm learning more each day. I have at least one AH-HA! moment each week from solving something with code, which is so rewarding.

This week my moment came from learning how to truncate dates in PHP for a Wordpress site. The design called for showing event dates, but only including the first three letters of the month. That way the month would always fit within its container. One way to do this could be having the client just manually type the first three letters into a text field for the event date. Though a more elegant solution is to offer them a calendar for picking the date, and adding a function to reduce the month name to three letters, so there's less room for error on the client's end, and it all happens behind the scenes. Here's how I did it:

First I built custom fields for the event date and event time using Advanced Custom Fields.

I use a custom option to return just the month and the day (F j). We will refer to the F for formatting it before karate chopping it into its first three letters later on.

I also made a custom post type for Events which is why you will see $posts = get_field('events'); in the complete code below.

After creating a few events and relating them to the Events page, I loop through all of the event posts, getting the date with DateTime and setting it to a variable in the events page. Then I use PHP's substr function to only display the first three letters of the month, and format to return the day. The substr function takes three arguments: a string, an integer for the start location, and an integer for the the end of the desired truncated string. Since I want to display 3 letters, the start is 0 and the end is 3. That's it! Here is the whole loop.

Add Footnotes in Wordpress Without a Plugin

Aellon — Fri, 08 May 2020 22:47:58 +0000

There are limited options for adding footnotes within Wordpress. When I search for "Wordpress footnotes," every single search result on the first page leads to plugins. Then I search for "Wordpress footnotes without plugin" and the results yield a couple of HTML options like adding an anchor link. I can work with this, but I'll need to tweak it so that the client can easily add content with footnotes since they will not be editing HTML directly.

First, we (or the client) will add content with a link to the footnote:

Type the number and highlight/select that number. Then click the link icon that appears in the block editor bar. It will prompt you to “search or type url”. Type “#fn” followed by the number of the footnote. For instance if this is the 4th footnote on that page, the link would be #fn4. Note: This could be # followed by any ID you prefer. I find it easiest to use the number of the footnote as part of the ID.
Add an ordered list block as the last block of content on the page.

Now that we have some content to work with, we can get to the code. Before trying the following code make sure you're loading jQuery.

I applied a class of "info-page" to the page where I need footnotes so it is easy to reference. We need to create an ID for each <li></li> element in the ordered list by setting the "id" attribute to "fn" + one more than the index of the list item to account for the index starting at 0. That way, the links we set in Wordpress (like #fn1) will correspond to the <li></li> element with an ID containing that value.

// set ID for each <li></li> in footnotes <ol></ol>
    jQuery('.info-page ol li').each(function(index, value){
        jQuery(this).attr("id", "fn" + (index + 1) );
    });

That's it! It's simple to add anchor links in Wordpress that can be used for more than just footnotes. However if you want to get fancy with the footnotes and you're using Bootstrap, continue reading.

We will use Bootstrap popovers to display the footnote text inline with the footnote number, so that users can simply hover over the number to see what the reference is rather than having a jump scroll to the bottom in order to read it. They will also have that option if they click on the number but this provides a nice stay-in-place alternative. (TLDR: Codepen)

First we want to grab those links that we added in Wordpress (#fn1 and so on). Then we add a simple class to each link so that we can reference it later.

        // get each link from the content
        var links = jQuery( ".info-page" ).find('a');
    })

// add a class of "footnote-link" to each link to reference later for the popover
        jQuery(links).each(function(){
            var link = this;
            jQuery(link).addClass(function() {
                return 'footnote-link';
            });
        });

Next we take the formatted ID and the footnote text of all of the <li></li> elements and then set a variable for just the IDs. We will also need an array that contains the HTML of the links.

    // get the formatted ID and the footnote text of all of the <li></li>
    var footnoteArray = new Array();
    jQuery('.info-page ol li').each(function(id, value) {                   
        var formattedID = ("#" + jQuery(this).attr('id'));

                // add the arrow and number before the text (feel free to skip this style choice)
            var text = "&rarr; " + (id + 1) + ". " + this.innerText;
            footnoteArray.push({formattedID, text});
    });

        // get the IDs from the footnoteArray
        var footnoteIDs = jQuery.map( footnoteArray, function(value, key ) {
        return value.formattedID;
            });

        // make a new array that contains the HTML link values
        var LinkArray = new Array();
    jQuery('.info-page .footnote-link').each(function(id, value) {
        LinkArray.push(value.outerHTML);
            });

Here is the queen bee of this function. We will loop over all of the footnote links and wrap each of them in a button that will trigger the popover containing the corresponding footnote text.

    // loop over all of the links to the footnotes
    jQuery.each(LinkArray, function(ind, value) {
        var link = value;
        var footnoteText = "";
        var linkHref =  jQuery(link).attr("href");

        // check if there is a match between the href attribute values and any of the footnoteIDs
        if (jQuery.inArray(linkHref, footnoteIDs) != -1) {

            // if there is a match, get the footnote text from that matching value
            footnoteText = footnoteArray.find(x => x.formattedID === linkHref).text

            // get the link whose ID matches this one and wrap it in a button with the corresponding text for the popover
            jQuery( ".info-page a[href$='" + linkHref + "']" ).wrap(function() {
                return '<button type="button" class="btn btn-sm footnote-popover" data-toggle="popover" data-trigger="hover" data-content="' + footnoteText + '" ></button>';
            });                         
        };
    });

Remember to initialize the popopvers.

jQuery('.footnote-popover').popover({
        container: 'body'
})

Voila! Hover over the numbers in this Codepen for full effect with a little popover style:

DIY: Computer Vision

Aellon — Fri, 01 May 2020 23:08:06 +0000

Computer vision caught my eye at the Whitney Biennial last year, where I watched Triple Chaser, Forensic Architecture's investigation of the Triple-Chaser tear gas grenades and how law enforcement officials use them to suppress civilians. Their team used computer vision to detect Triple-Chaser canisters in footage from around the world.

Object detection requires thousands of images to be accurately trained, and Forensic Architecture couldn't get their hands on that many images of the actual Triple-Chaser. By zeroing in on footage where enforcement used these grenades, they were able to build a digital model of the Triple-Chaser grenade. Then they generated thousands of photorealistic 'synthetic' images, situating the Triple-Chaser in semblances of real-world environments. From the project page:

"In this way, ‘fake’ images help us to search for real ones, so that the next time Safariland munitions are used against civilians, we’ll know."

US border agents fired Triple Chasers at civilians in November 2018, and Forensic Architecture proved the presence and use of other Safariland products by law enforcement officers during civil unrest in Puerto Rico in 2018.

Once they had thousands of images to work with, they trained an object detector and then deployed it to find more images, exposing more instances of governments using Triple-Chasers to suppress civilians.

The Safariland Group is owned by Warren B. Kanders, who was the vice chair of the board of trustees of the Whitney Museum of American Art before stepping down because of this exposure.

That intersection of code, art, and activism really made an impact. I love the idea of building things with code for the greater good and I was inspired to learn more about it. At the Codeland conference last year, I attended a workshop on Real-Time Object Detection with TensorFlow.js led by Nicholas Bourdakos, a software developer at IBM. Within a couple of hours, I built my own app using custom-trained models to detect objects.

Everyone needed a lot of photos of their object to thoroughly train the model, and since we were creating this at the workshop, we needed something handy, like our own two thumbs. Our mission was to train our models to detect a thumbs up and a thumbs down. It was quite a sight to see a room full of people snapping countless photos of their thumbs. The more photos we had, the better trained our models would be, but even with just a few hundred photos, it worked!

I was surprised that we could build this kind of app within such a short timeframe and I definitely want to explore it more in the future, ideally for something that could have a positive social impact like this IBM Visual Insights and IBM Spectrum Discover: Automation with Computer Vision (Covid-19 Use Case) video, which shows how to detect Covid-19 from x-rays using object detection (skip to 7:50).

Do it Yourself:
The entire tutorial of this Object Detection Workshop is documented on IBM Cloud Annotations' website.

Other Resources:
Cloud Annotations Github

Get Started with a Headless Wordpress Site

Aellon — Fri, 24 Apr 2020 16:40:03 +0000

When choosing to build a site with Wordpress, there are a couple of options. You can use Wordpress to handle the backend and the frontend with PHP (classic), or you can separate them and use Wordpress for the backend and a JavaScript framework of choice for the frontend, like React or Next.

There are some advantages and disadvantages to each option, which are discussed in this Smashing Magazine post, "Headless WordPress: The Ups And Downs Of Creating A Decoupled WordPress". I am starting a project using the decoupled method and will probably post about it along the way. An easy way to get started is by using Local by Flywheel. Below is a guide to get up and running:

In Local by Flywheel click "Add Local Site" to create a new Wordpress site, and then click "Start Site." This will start up the Wordpress backend server.
Install plugins:
- ACF to WP API
- Advanced Custom Fields
- JWT Authentication for WP-API
- WP-REST-API V2 Menus
- Custom Post Type UI (optional)
Navigate to the Flywheel folder for the project and replace the app > public > wp-content folder with the copy the wordpress > wp-content folder from this Headless Wordpress Starter repo, which is adapted from Postlight's Headless Wordpress Starter Kit.
Add the frontend folder from the same repo in the root of the Flywheel project directory.
In frontend > config.js, replace the following wpURL with the link to your backend Wordpress API endpoint. The Wordpress API is the Wordpress site followed by wp-json, for example: let wpUrl = 'http://headlesswptestproject.local/wp-json/';
Open a terminal, $ cd frontend && yarn && yarn start
That should open up localhost:3000. This will start up the frontend server.
If there is an error shown on your localhost:3000 page, create a page in WP with the title/slug = “welcome”

The WordPress REST API allows us to work with JSON to send and receive data from our Wordpress site. That opens the door for developers who want to create beautiful, dynamic Wordpress sites using newer tools and frameworks like Next.js. I'm excited to try it out and see how it compares to building a site entirely with Wordpress. Check back soon for more updates on the process!

Multilingual Magic Part 2

Aellon — Fri, 17 Apr 2020 22:55:39 +0000

The previous post went over the frontend basics of a Bootstrap tab structure to display some text in three tabs, one for each translation. Now we will take a look at the Wordpress side of adding those fields for the client to enter the text.

Using the Advanced Custom Fields plugin, I added a field group for Languages, with a field for Russian and one for Spanish. The default tab will be English so we don't need to add a field for that one since it can be the regular content. This is what the ACF field group looks like:

I selected a Wysiwyg Editor as the field type since this will give the client control over the text, but you could just as easily choose any other field type. This is what it will look like for the client:

In the previous post I included the following HTML to get the tabs working.

<div class="tab-content" id="alertTabContent">
        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-red alert-content"><?php  the_content(); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="russian" role="tabpanel" aria-labelledby="russian-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-red alert-content"><?php the_field('russian'); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="spanish" role="tabpanel" aria-labelledby="spanish-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-red alert-content"><?php the_field('spanish'); ?></h5>
            </a>
        </div>
</div>

Two key pieces of code here are the lines pulling in the content from those custom fields: <?php the_field('russian'); ?> and <?php the_field('spanish'); ?>.

the_field() is a built in ACF function. The selectors are the field names. ACF made it so simple yet so powerful too!

With that, you have a fully customizable set up for displaying text in three discreet tabs using Bootstrap and pulling in the content from Wordpress. After the site is live I will add the frontend design here so be sure to check back!

Multilingual Magic Part 1

Aellon — Fri, 17 Apr 2020 19:16:27 +0000

I'm currently building a site using Wordpress and Bootstrap that will have the option for users to see featured content in English, Spanish, and Russian. I needed to make this happen dynamically, and so it would be displayed seamlessly to the user. I also needed it to be easy for the client to update on the backend in Wordpress.

I am already using Bootstrap in the project, so it is easy to implement Bootstrap tabs using the class .nav-tabs on top of the base .nav component. I could have used tabs or pills because they just have different styling. Since I am going to change the styling anyway, I went with tabs for fun.

<ul class="nav nav-tabs" id="alertTab" role="tablist">
     <li class="nav-item">
         <a class="nav-link active" id="english-tab" data-toggle="tab" href="#english" role="tab" aria-controls="english" aria-selected="true">EN</a>
     </li>
     <li class="divider text-red">|</li>
     <li class="nav-item">
         <a class="nav-link" id="russian-tab" data-toggle="tab" href="#russian" role="tab" aria-controls="russian" aria-selected="false">RU</a>
     </li>
     <li class="divider text-red">|</li>
     <li class="nav-item">
         <a class="nav-link" id="spanish-tab" data-toggle="tab" href="#spanish" role="tab" aria-controls="spanish" aria-selected="false">SP</a>
     </li>
</ul>

An important note on accessibility from Bootstrap:

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

There is a tab for English, Spanish, and Russian, and I'm using simple vertical line dividers to separate the three tabs. To make the tabs toggleable, we need to add the attribute data-toggle="tab" to each tab link. Now we need to add in the JavaScript behavior to make the tabs dynamic.

Make a new div with a class of .tab-content and add three divs inside, each with a .tab-pane class and a unique ID for every tab that will correspond to the href element in each of the tabs above.

<div class="tab-content" id="alertTabContent">
        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php  the_content(); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="russian" role="tabpanel" aria-labelledby="russian-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php the_field('russian'); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="spanish" role="tabpanel" aria-labelledby="spanish-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php the_field('spanish'); ?></h5>
            </a>
        </div>
</div>

Next time we will connect it to the Wordpress backend in order to pull in content dynamically. Stay tuned!

Resources:
Bootstrap Tabs

DEV Community: Aellon

Are you a T-Shaped Developer?

How to Test Accessibility, a Guide for Software Engineers

📖 Table of Contents

📘 Automated and Manual Testing

🎬 Take Action to Remediate Issues

✅ Accessibility Testing Summary Checklist

❓ Resources and Training

How to View Apex Code Coverage in VS Code

Instructions

How to Share a Salesforce Scratch Org

Instructions

Related articles

Automagic Table of Contents

Quick Way (not recommended)

Better Way

Best Way

Agile & Scrum & Kanban, oh my!

3-Letter Months with ACF and PHP

Add Footnotes in Wordpress Without a Plugin

DIY: Computer Vision

Get Started with a Headless Wordpress Site

Multilingual Magic Part 2

Multilingual Magic Part 1