DEV Community: Chris DeMars

Getting Started with the React SDK

Chris DeMars — Tue, 23 Jan 2024 02:47:21 +0000

Senior Developer Advocate

Chris DeMars — Thu, 06 Jul 2023 19:45:06 +0000

Being part of the community and building real relationships have been among the best parts of being a Developer Advocate. I’ve been a frontend developer since the mid-90s, with a focus on multiple areas across the frontend.

I’m currently a Senior Developer Advocate at TuxCare, where I lead the DevRel mission. I focus on developer engagement and content strategy. I also deliver technical talks at industry conferences, covering cybersecurity, JavaScript, and cloud topics. On top of that, I launched and lead the TuxCare livestream, broadcasting to YouTube, Twitch, and Facebook. Through YouTube videos, Shorts, and social content, I’ve helped expand TuxCare’s reach and strengthen its community presence.

Beyond content, I work closely with marketing, documentation, and engineering teams to influence roadmap decisions and improve how developers consume docs. I also track key performance metrics to ensure we’re hitting—and exceeding—our goals (consistently pushing 100%+). I regularly host webinars on transitive dependencies and cybersecurity, helping developers better understand risks and how to remediate them.

With my background as a developer, I genuinely relate to and empathize with the community, especially when it comes to real-world problems, setbacks, and bottlenecks. I aim to be a strong bridge between the product and developers, helping them move forward as smoothly as possible.

Below is a list of some of the contributions I’ve made to the community.

Conferences:

Blog Articles:

TuxCare Blog

Harness Blog

Split Software Blog

Podcasts

Twitch Streams/YouTube Videos:

TuxCare

DigitalOcean

Split

Guest Twitch Streams/Screencasts:

Speaking Schedule, LinkedIn Profile & Microsoft MVP Profile:

Colors and the Web

Chris DeMars — Wed, 09 Dec 2020 18:31:44 +0000

How are things going friends? I know 2020 has been a garbage fire but we are almost through it. Cheers to 2021! I wanted to bring you an article on color, the web, and how CVD's (color vision deficiencies) can affect the user experience. We aren't going too in-depth on a medical level, but I wanted to explain how color plays a big part.

Color Vision Deficiencies

The acronym CVD is something you may or may not have heard of in your journey of working on the web or software. In the most plain terms it means color blindness. According to the American Optometric Association, it means:

Color vision deficiency is the inability to distinguish certain shades of color.

That being said, it does not mean you only see in shades of gray 100% of the time, but it is a replacement or absence of colors that someone with normal vision can see.

CVD by the Numbers

What do the numbers look like for people who are color blind? Glad you asked and the numbers might surprise you if you were already unaware.

🙍‍♂️ 1 in 12 men experience some type of CVD

🙍‍♀️ 1 in 200 women experience some type of CVD

Color blindness is mostly due to genetics, with women being the carrier of the gene. For more information check out the link below!

➡ https://www.colourblindawareness.org/colour-blindness/inherited-colour-vision-deficiency/real-family-tree/

Types of CVD

When it comes to types of color blindness, we have 4 main types which I have listed below in comparison to normal color vision:

Normal color vision

Deuteranopia
- Reduced sensitivity to green light and it is the most common type of color vision deficiency

Protanopia
- Reduced sensitivity to red light

Tritanopia
- Reduced sensitivity to blue light and is extremely rare

Monochromatic
- Vision in shades of gray. The most rare type of CVD. By the numbers 1 in 33,000 people experience this type of CVD

Problems We Face

There are a lot of problems when it comes to accessibility as a whole but two of the biggest and most often are low hanging fruit are color contrast and communication through color.

Color Contrast

Color contrast is how the foreground color "pops" off the background color. The Bureau of Internet Accessibility puts it in more technical terms.

Color contrast is the difference in light between font (or anything in the foreground) and its background.

When determining colors to use always keep the user in mind. Too many times we build things that we think are really cool and almost never seem to put ourselves in the users shoes. This is one piece of the puzzle we have to be cognizant of.

The above colors fail because the lightness of the gray foreground color almost blends in with the white background color. The contrast ratios vary according to the size of the text. This fails at a small text size, but it would pass at a larger text size.

If you are looking for more information about color contrast, levels of conformance (A, AA, AAA) and how to test and find the right combinations, check out my article below.

➡️ Chrome DevTools: Accessible Colors

Communication Through Color

This is a very big problem. One thing that we can not do is communicate SOLELY through the use of color. Perfect example, I was working at a company in Michigan and saw a post on one of our intranet portals. It was a new tool that was being built for internal users yet it was built to communicate intent with color only. There were ZERO fallbacks as to what those colors meant.

To me this was a red flag and I called it out. Long story short, the legal team caught wind of it and I was pulled into an office to discuss "why I shouldn't call out things like that." The convo turned out with me getting praise for ruffling feathers about the importance of accessibility.

Something like the example below would not work if by chance you said "change your status to red, green or yellow." What if the person using the tool can't see those colors? What if that user does in fact experience monochromatic color blindness? Being exclusive to you users is not the path you want to travel down. It comes with a price.

Below is an example of communication through color.

Normal color vision

Monochromatic color vision

Solutions

There are a few tools out there that can help with figuring out what colors are best. Chrome has it's own contrast checker built in to the DevTools which you can learn more about in the article I posted above that I wrote.

Lea Verou also has a great tool that I tend to highlight called Contrast Ratio. It allows you to input a color for the foreground and background and see if they pass, you can also swap the colors to check them as well.

Our friends at WebAIM have a great tool as well, Contrast Checker. It is very insightful and has a link at the bottom of the page to check the contrast of links.

One of the biggest ways to tackle color contrast issues in my opinion is through communication. Work and communicate with your marketing or design teams to come up with the best, accessible color combinations you can as to not leave out users.

Wrapping Up

As you can see, color is VERY important on the web. Users have to be able to see what they are doing and have an amazing user experience at the same time. One thing I would hate to happen is to ship an something that someone couldn't use. Knowing that my experience was not inclusive and not doing anything about it.

We work on the web for a reason, probably multiple reasons, but the main reason being the user. We are the voice of the user and must do everything in power to advocate for them. It is why I do what I do. That being said I leave you with this quote, one of my personal ones.

Accessibility is NOT a requirement, it is a MUST.

Brain Dump: Mind Mapping Your Conference Talk

Chris DeMars — Thu, 15 Oct 2020 19:53:14 +0000

The Beginning

We have all been there. We see a conference that we want to speak at, or maybe a meetup. Great, now what? Well we read over the required information, the code of conduct, deadlines, etc. Finally we get to the point of writing the abstract, and it is a damn good abstract at that, or so we think.

You know what, it IS a great abstract. We are ready to share our excitement with the world about this awesome thing about web and software that we are passionate about.

After staring at a blank screen for what seems like eternity, we craft an abstract of a few sentences. Maybe the requirement is for an abstract and a description of the talk. Either way, we make sure it is solid and has a catchy title.

Now What?

We patiently wait and feverishly refresh our inbox hoping to see an invitation to the event we applied to speak at. Out of nowhere, BOOM, "Congratulations, you have been invited to speak at XYZ Conference!" What?!? You jump for joy and are so stoked that you got in.

Than the reality hits you that you actually have to write the talk. We have all been there. We have an accepted abstract, but no outline, no slides, no talk. Maybe we have ZERO clue about what we are actually going to talk about even though the abstract is a good summary. I have been there.

I Present to you, Mind Mapping

I struggle with mental health and anxiety is a big part of that. Trying to stay focused to write a talk is a very daunting task, especially for someone with anxiety or even ADHD.

My friend Amber Conville told me about this great technique called "mind mapping" when it comes to getting your thoughts together when writing your talk and building your slides.

No Outline

You heard it right, the first thing you do is get the thought of an outline out of your head right away. Trying to focus your brain to be clear, concise and organized when ALL the thoughts of what you want to talk about are running through your head can be challenging. Now, you might be the type of person that can just put down an outline and start your talk, me? Not so much.

Creating your Map

The first step into creating the mind map is to make sure you have a sheet of paper, a notebook works of course too. Get a couple sharpies or highlighters in a couple different colors, and a pen/pencil.

Below I have listed the steps when creating a mind map and taking your amazing talk and ideas from map, outline, to your preferred presentation software.

Step 1: Put the title of your talk at the top of the paper, date it, and create a key to the right or left side of either a color or a shape that indicates your main, primary, secondary, and tertiary ideas. Also, create some type of symbol like a star for something that is "most important".

Step 1a: Make sure to leave some room underneath the key or to the side of the actual map for notes and a place to eventually put an outline.

Step 2: In the middle of the piece of paper write down your primary thought. The one that the whole talk will be based around and than circle it or put a cloud around it or use one of your colors that represents the main idea.

Step 3: Your brain will be filled with all the amazing things you want to branch off your main idea. The things you feel are the the most important would be your primary ideas. Write these down around your main idea, connect them with a line or dotted line, than use a color or shape from your key to identify them.

Step 4: Now, I am sure you can expand off your primary ideas deeper, these are your secondary ideas. Think about something you can talk more about based off your primary idea and write those down around the primary idea. Use a color or shape to identify those ideas.

Step 5: You just might have more ideas that you can base off your secondary ones called tertiary ideas. Those might be very granular things. For example:

Main Topic > Accessibility
- Primary Idea > Assistive Technology
  - Secondary Idea > Screen Readers
    - Tertiary Idea > macOS VoiceOver
    - Tertiary Idea > NVDA
    - Tertiary Idea > JAWS

Step 6: Once you have ALL these ideas on paper, go back and number them. These will correspond to how you lay your outline out.

Step 7: Create your outline based on the mind map you created.

Feels Great Doesn't It?

I am sure you feel less anxiety than you started with. I know I do. Getting everything on to paper in a somewhat messy fashion makes it much easier to gather those ideas and craft an organized outline. You aren't searching the space in your mind to get things organized and having that flow to your pen and paper.

I hope this helps you in the process of crafting your talk. And if you are a first time speaker or want to get into speaking but stuff like this is holding you back, try mind mapping. It will take the burden off your shoulders to get something concrete down on paper.

Turn On localhost Testing Using aXe Core For Chrome

Chris DeMars — Tue, 01 Jan 2019 20:08:54 +0000

Hey friends! What is going on? I hope everyone is having a good start to the new year. I can't believe it is already 2019. What better way to celebrate new beginnings than with my very FIRST post ever to published on dev.to! Without further ado, let the learning commence.

This post is just a quick tip.

aXe Core in Chrome

I ❤️ Deque and I ❤️ aXe Core when it comes to accessibility auditing and testing. It is my go to for testing tools and I advocate for the tool at every conference I speak at. Well, have you ever tried using the aXe Core Chrome extension and received an error that you can't test local files, turn on local files in the settings of the extension? You have? Me too!

I reached out to my friend Marcy Sutton that works for Gatsby now, but at the time of writing, Deque, and she told me how to fix that error so I could test locally. Below are a couple steps if you run in to the same issue as well.

Navigate to chrome://extensions in Chrome
Flip the switch on local files, and incognito if you are feeling lucky.

I hope this was beneficial in testing the accessibility of the experiences you are working on and shipping.