DEV Community: Andres Villegas

Creating a Standout GitHub Profile README

Andres Villegas — Tue, 23 Mar 2021 20:26:19 +0000

Looking to have your GitHub profile stand out? Wanting it to match all the beautiful and intricate design work that you have put into your projects? We’ve got you covered.

In this post, we will walk you through how to update your GitHub profile, add more personality, and help you stand out from the crowd. To make our updates, we’ll be using Markdown language (here is a quick Markdown guide if you’re unfamiliar with it).

This blog post will cover:

How to use images and badges
Adding a Github Status Card and top language card
How to include button links to your social media accounts

Creating the README file

In order to customize your profile, you’ll need to create a README file project. This project will be your home for all the cool, personalized objects you’d like to showcase on your profile. To create your README, follow these steps

Once you’re logged in to your Github account, create a new repo. You will use your username to name this repo. For the purposes of this tutorial, I’ll be using my own Github README as an example and since my username is thisisvillegas, that is what I’ll use to name the repo.

Make sure that you check off the box to have the README file created when the repo is initialized.

Once the repo has been created, you will see that GitHub knows you have accessed this special repo and presents you with the option to edit the file. Go ahead and click on this. You will get directed over to the file editor that is built into GitHub. If you have never updated a README file before, Make a README has a deeper look into README files.

Adding Images

Adding images is a fun way to customize and add color to your profile. This will visually engage whoever is looking at your profile. You can also use free tools like Canva to create your own beautiful header images.

Need some inspiration? We have you covered.

Uploaded to my repo are some BigCommerce Developer-themed images you can use on your profile. You can find them under assets. These are named DeveloperHeroBanner, BigCommerceDevs, and SpaceMan.

Using the following code, you can add an image via Markdown.

![alt text](https://{insert your image URL} “add your alt text”)

Another way to add an image is via an image tag. This method allows you to size the image with more ease.

<img src=”drawing.jpg” alt=”alt text” width=”200"/>

Something to note here is, that if you are looking to keep things super organized, you can upload the image you want to use into the repo that you just created and reference that URL as such.

“https://github.com/[username]/[reponame]/blob/[branch]/assets/image.jpg”

Or reference the image directly

“assets/image.jpg”

As you can see in my example above, my hero banner was uploaded to this repo and I was able to insert it with the following code:

<img src=”https://github.com/thisisvillegas/thisisvillegas/blob/main/assets/GitHubBanner.png" alt=”horizon hero banner”/>

Taking this a step further, you can shorten the src to reference just the image, for example, the shortened version of the example above is:

<img src=”assets/GitHubBanner.png” alt=”horizon hero banner”/>

Adding Github Status Card & Most Used Language Card

Another popular profile customization is adding detail cards to your GitHub to your page. This is a way to easily show-off all your GitHub stats in a fun, visual way.

Using the following code you will be able to add a GitHub status card to your profile. This will condense all the activities for the year in one easy-to-read card.

![Andres’ GitHub stats](https://github-readme-stats.vercel.app/api?username=thisisvillegas&theme=synthwave&show_icons=true&count_private=true “Andres’ GutHub Stats”)

We can break this string down into a few components.

[https://github-readme-stats.vercel.app/api?](https://github-readme-stats.vercel.app/api?)

This the API url for the card, this won’t change for you

username=thisisvillegas

Make sure you update this to your username

theme=synthwave

There are different themes you can use, you can find them all listed in the github-readme-stats repo

show_icons=true

Toggles whether or not the icons display on the card

count_private=true

This includes the count of all the private contributions made

“Andres’ GutHub Stats”

This is the alt text and like with any image, should be included for accessibility purposes.

The following code will grant you access to the top language card, this card aggregates all the languages used in your repo and puts them in one easy graphic.

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=thisisvillegas&theme=synthwave “Andres’ Top Languages Card”)

Breaking this down, we can see it uses very similar components to the initial card.

Uses a different API but like on the first card, it won’t change for you. You will have to update the username to match your Github username and then if you want to add a theme you can include that last parameter.
The last section is the alt text for the card. Again, this should be included with every image/graphic that you add to any page for accessibility purposes. If you would like to learn more about alt text and accessibility, check out this blog post I put together.

Adding Social Media Links

As a developer, growing your network and connecting with people is very important. Below we will walk you through how to link your social media accounts with embedded buttons.

To add your social media links we are going to be using Shields.io. For more customization options you can visit their site.
In order to get these cool badges to show up, in your file, add the following lines into your README file:

For LinkedIn:

<a href=”https://www.linkedin.com/in/andres-villegas-79867ab7/"> ![alt text](https://img.shields.io/badge/-LinkedIn-0e76a8?style=plastic&logo=linkedIn)</a>

For Twitter:

<a href=”https://twitter.com/thisisvillegas">![alt text](https://img.shields.io/badge/-Twitter-1DA1F2?style=plastic&logo=Twitter) </a>

For Instagram:

<a href=”https://www.instagram.com/doktordres/">![alt text](https://img.shields.io/badge/-Instagram-833AB4?style=plastic&logo=Instagram)</a>

In the example above you can see that I added three buttons. One for LinkedIn, another for Twitter, and the last one for Instagram. In order to customize these for your profile, just updated the href tag.

Conclusion

Making sure that you stand out from the rest is crucial when sending someone over to your GitHub Profile. Take advantage of the ability to personalize your account to really showcase your personality.

For more inspiration on how to customize your profile, check out the examples below:

Have you already updated your profile? I’d love to take a look at it! Feel free to share it with me. Leave a comment below or reach out to me on Twitter at @thisisvillegas.

My Experience at DeveloperWeek 2021

Andres Villegas — Fri, 05 Mar 2021 17:40:37 +0000

What is DeveloperWeek

DeveloperWeek is a gathering of many of the brightest minds in the developer community sharing their current experiences with new technologies, running the business, and everything in between. It was an amalgamation of 15+ different conferences all in the same week. It included API & Microservers, AI & Machine Learning, JavasScript Conference, Containers & Kubernetes, DevOps Summit to name a few. When I first pulled up the schedule my mind was racing trying to figure out which one of these great talks I would choose over the other amazing talks that I knew I was going to have to wait to see when the team at DeveloperWeek release the videos. It really was a full buffet of all things developer.

With my background in JavaScript, I choose to attend many of the talks around this subject but also delved into some of the other flavors that were offered. Some of the talks had some names that were too interesting not to attend! The speakers ranged from CEOs to Engineers on the frontlines to Developer Advocates reaching out and getting to share their perspective and knowledge with the world.

Attending DeveloperWeek

It was such an honor to participate in a conference such as this one where over 8,000 developers, engineers, software architects, and executives gathered to witness the immense amount of content provided. They also had a Hackathon, which honestly, to be able to gather people in a remote manner and have them cook something up like this is already challenging as it is, but they were able to do so in a successful manner. It was impressive, to say the least.

Sessions & Takeaways

With about 30 different talks being given per day, the hardest part of attending this conference was choosing which sessions to attend. Some talks ran for about an hour and some of them ran for just 30 minutes. It was easy to jam-pack your schedule and by the end of the day, it left your head spinning and a browser full of open tabs and a whole slew of new bookmarks.

With that said, I want to share with you some of the talks I managed to attend and what I was able to get from them.

Why Designers and Developers Need a Common Language by Jedidiah Weller

This session spoke directly to a core issue that I have seen occur on many different levels in tech companies. Whether it is designers talking with developers or developers talking with the customer care service team — the idea of being able to share a common language is essential for an easy and efficient transfer of knowledge. A common language also helps keep everybody on the same page when it comes to setting goals and achieving them.

Increase App Confidence with CI/CD and Infrastructure as Code by Angel Rivera

In this talk, Angel, who is also a Developer Advocate, discussed the importance of smoke tests while developing and making sure you are running these tests anytime the code changes. Infrastructure as code allows you to not only run these smoke tests before the CI/CD process but also run a set of smoke tests in the targeted environment. This process will increase everyone’s confidence in the app. Infrastructure as code is the ability to define, provision, maintain, and destroy infrastructure using code syntax. He also shared an example of how to achieve this through circleCI.

The 90s Called & They Want Their Websites Back by Rachel White

I felt like this was one of the quirkier of the talks, but just as relevant. Rachel took us back to the evolution of the personal pages starting back in the 90’s. We traveled back in time when Geocities and Angelfire were beginning to offer people the ability to easily host their own pages about everything and nothing. It was a very nostalgic walk down memory lane, which really shed light on how far we have made it and how new technologies today like JAMstack architecture are allowing us to go back to that relative ease of hosting our own pages.

Using Google Apps Script to Sync Data and Automate Workflows by Al Chen

Al showed us how Google App Scripts can shine. He shared how he uses this technology along with Coda (a technology that streamlines and integrates many different resources together in one platform) to make API calls, gather data from a Google Sheet, and aggregate it into a Coda document. He then showed us how to automate the entire process using Google App Scripts. Very cool.

Driving Collaboration across Distributed Teams by Jarom Chung

Jarom and his team gave a very relevant talk about getting us to collaborate in the era of video meetings. They touched on how we may get lured into thinking we can multitask during these meetings, but that practice results in distracted team members. The burnout can happen when our schedule is back-to-back meetings and video platforms really favor the extroverts. He walked us through how he and his team have implemented strategies to avoid these pitfalls, maintaining user engagement, and therefore maximizing the efficiencies of these meetings.

Summary

DeveloperWeek 2021 was an incredible demonstration of all the different areas and specializations in which developers are involved, with its sheer amount of topics discussed. Some of the talks were technical and some really dealt with the well-being and communication of the developer.

This conference will continue to enlighten minds as it continues with its scheduled events including DeveloperWeek Europe on April 27th and 28th 2021, DeveloperWeek Global Management in May, and even more in the following months.

I’d also love your feedback on YOUR experience at DeveloperWeek! What did you experience? What cool things are you going to do with everything you learned? Leave a comment below or reach out to me on Twitter at @thisisvillegas.

Building BigCommerce for Accessibility

Andres Villegas — Wed, 03 Mar 2021 22:17:49 +0000

Designing with Accessibility in mind is crucial in today’s eCommerce world. In order to deliver the best possible shopping experience for all users, BigCommerce is excited to announce new updates available to our Cornerstone theme. With these accessibility updates, you and your clients will have the tools necessary to comply with Web Content Accessibility Guidelines (WCAG) standards.

In this article, we will explore the accessibility features that are available on the BigCommerce platform that you as a developer should be aware of and implement in your store. We’ll cover using alt text, text accessibility, keyboard accessibility, and customization.

Accessibility and Ecommerce

Accessible websites allow shoppers with disabilities the ability to navigate the eCommerce site and have a better shopping experience. Designing and building sites with inclusivity in mind is a critical consideration for all web developers. Among the many benefits to accessibility, this approach also improves SEO and increases the potential reach for market penetration.

Accessibility on BigCommerce

Alt Text

Alt text also referred to as “alt tags” or “alt descriptions” refers to descriptions given to an image that technology like screen readers use to assist visually impaired users. A good rule of thumb should be — if you’re adding an image, don’t forget to always add in the alt text.

To add alt text descriptions in BigCommerce, you have three options. Developers can add descriptions in Page Builder, directly add alt text in your code, or use Aria-label attributes.

Adding alt text in BigCommerce Page Builder:

Go to Storefront > My Theme in the control panel, then click Customize.

Once in Page Builder, select the image widget and expand the SEO option at the bottom of the list.

Enter the alt text.
Click Save.

Adding alt text in your code

When inserting an image, in the image tag, make sure you include the alt attribute so that it looks like the following:

<img src=”” alt=”Image description”>

Adding alt text in with Aria-label attributes

This method uses an ID reference value that matches the ID element attribute to associate an element with text. Using this method circumvents having to add an alt attribute to each image by setting this description at a high level.

Example:

<div role=”img” aria-label=”Description of the overall image”>

     <img src=”graphic1.png” alt=””>

     <img src=”graphic2.png”>

</div>

For a more in-depth look at this method, please refer to Mozilla on ARIA: IMG role.

Text Accessibility

Another important accessibility consideration for eCommerce sites is making sure your content is readable and understandable by all potential audiences and shoppers. In order to make your text more accessible, developers should keep in mind the following:

1. Color Contrast

Choosing which colors you use is essential for visual accessibility. According to WCAG 2.1, you must have a minimum color contrast ratio of at least 4.5:1 for standard text and 3:1 for large text.

Below is a good graphic that should help you find the combination that would work best for you:

Exceptions

It is important to note that color contrast and text size can affect each other. There are three exceptions to the 4.5:1 contrast standard.

The first is using large text. When you are using large text, the contrast requirement drops down to 3:1, because the larger text is easier to read.

The second is incidental text, which comes in 3 different flavors.

Inactive text, such as text used in a disabled button.
Text that is used purely for decorative purposes, like any kind of text that appears in the background that is not really meant for the user to read. Its presence is solely for esthetics.
Text that was intentionally meant to be hidden. A good example of this is skip links. Read more here on what a skip link is.

The final exception is logotypes. This is the text that is part of any logo or brand name.

A few other resources that can choose the right color combination:

2. Text Headings

Text Headings allow developers and site builders to organize content and provide a good structure for your page. Proper use of headings allows screen readers to easily navigate the site based on the headers used. In a survey conducted by WebAIM, almost 70% of users on screen readers stated that they use headings to navigate through a site.

Below is an example that illustrates the proper and improper use of headings:

As you can tell from the example above, it is important to follow a hierarchical pattern.

Your main heading should be H1 and indicate the main content
H2 should be used for subtopics
Don’t skip or alter headings

To see an example video on the best way to create text headings, see How Headings Help Screen Reader Users.

3. Text Size and Alignment

Contrast, text size, and alignment are also important accessibility considerations that help the readability of your web content.

As a developer, you should consider:

Using white space around blocks of text
Using left-aligned text
A font size of 14px
Using 55–65 characters per line
Using sans serif fonts

These, of course, are best practice suggestions and every site may demand different settings. When in doubt, check out the WebAIM article on Typefaces and Fonts for more information.

4. Text Links

Links, as we all know, are a very common element in any site, but there are a few details on what text you use that we will need to examine to make sure we get the accessibility correct.

When you are creating a link on your site, do not include the word “link” in it. This will result in most screen readers displaying the phrase “link” before each one. Adding the word “link” makes it redundant and a potentially confusing user experience.

Developers should also aim to use text that is more descriptive than “click here” or “click for details.” This is another use case where the user of the screen reader will have no context for what the link is about. To avoid running into this issue, written text links should be unique and meaningful when read out loud.

Here is a list of suggestions to keep in mind:

Use unique link text where possible
Avoid using a URL as the link text. Consider using the page title or description of the page
Don’t use the word “link” in your link text.
Don’t capitalize links.
Keep link text concise.
Don’t link directly to downloads
Provide a warning when link text opens a new window
Remove broken or empty links

Keyboard Accessibility

Keyboard accessibility gives users the ability to navigate your eCommerce site using the keyboard, instead of a mouse or trackpad. As a developer, you can ensure that users are able to access all links, menus, buttons, and form fields using only a keyboard.

On any website, in order to enable an element to participate in keyboard navigation, use the tabindex global attribute. The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. This can be added to any HTML element. In the example below, we are adding it to an anchor tag.

Example:

<a href=”http://www.google.com/" tabindex=”1">Google</a>

Another important keyboard functionality is skip navigation. This allows users the ability to bypass the long list of navigation links and sub-links that usually reside at the top of every page. This is especially advantageous to users that have motor disabilities.

One of the best ways to implement this feature on your website is to use invisible links. You can read more about the different ways to implement the “skip navigation” feature here.

You can find more information below:

Customization

There are also scripts or code that you can add to your BigCommerce site to improve its accessibility. I’ve listed a few below:

Add a script or plugin to allow mobile, tablet, or desktop viewing. Use responsive design to match user technology to accommodate different zoom states and viewport sizes.
Add multi-factor authentication or alternative methods besides CAPTCHA to verify identity. Visual CAPTCHA does not allow alt text, and therefore visually impaired users cannot use it.
Add hidden titles that can be accessed by a screen reader.

In the example below, developers can add additional color contrast to menu buttons.

In the Footer.html file of your Cornerstone theme files, you can drop in this styling code snippet and it will enhance the visibility of your menu options.

<style>
.mobileMenu-toggle .mobileMenu-toggleIcon, .mobileMenu-toggle .mobileMenu-toggleIcon:after, .mobileMenu-toggle .mobileMenu-toggleIcon:before {
background: #fff;
}
</style>

Conclusion

We look forward to seeing what you build on BigCommerce and how you utilize these features and best practices to build a more accessible eCommerce experience.

Related Resources

To learn more about customizing your BigCommerce sites for accessibility, check out our Developer Documentation.

We also recommend several apps, located in the Site Tools category in the BigCommerce App Marketplace. We’ve partnered with eSSential Accessibility and AccessiBe in order to prove you and your merchants more tools to implement accessibility features on your sites.

DEV Community: Andres Villegas

Creating a Standout GitHub Profile README

Creating the README file

Adding Images

Adding Github Status Card & Most Used Language Card

Adding Social Media Links

Conclusion

My Experience at DeveloperWeek 2021

What is DeveloperWeek

Attending DeveloperWeek

Sessions & Takeaways

Why Designers and Developers Need a Common Language by Jedidiah Weller

Increase App Confidence with CI/CD and Infrastructure as Code by Angel Rivera

The 90s Called & They Want Their Websites Back by Rachel White

Using Google Apps Script to Sync Data and Automate Workflows by Al Chen

Driving Collaboration across Distributed Teams by Jarom Chung

Summary

Building BigCommerce for Accessibility

Accessibility and Ecommerce

Accessibility on BigCommerce

Alt Text

Adding alt text in BigCommerce Page Builder:

Adding alt text in your code

Adding alt text in with Aria-label attributes

Text Accessibility

1. Color Contrast

2. Text Headings

3. Text Size and Alignment

4. Text Links

Keyboard Accessibility

Customization

Conclusion

Related Resources

Articles

Videos

Resources and Tools