DEV Community: 👩‍💻Tracy A King

10 Things You Can Do To Support Black People in Tech

👩‍💻Tracy A King — Sun, 07 Feb 2021 23:19:13 +0000

In honor of Black History Month, I put together a list of things you can do to support Black people in tech. This is by no means an exhaustive list, it is one that strongly reflects my own community experiences. I have only come into contact with a fraction of the organizations that support Black people in tech and recognize I am not elevating every organization that does important work in this space. If you have more recommendations, please include them in the comments and, most importantly, share them with your friends and colleagues!

1. Look Inward

Consider why it’s important to support Black people in tech in the first place. Take time to acknowledge your own personal biases (conscious or unconscious). Have these negatively affected your working relationships or created unsupportive, possibly even hostile, environments for Black people to work in? If you’re responsible for microaggressions, what can you do to change that? What can you do to minimize harm?

I recommend reading this article written by a Black woman about her experiences to help illuminate some of the issues.

2. Support Black Spaces

Recognize and advocate for Black tech organizations and spaces. I have witnessed and experienced dissent against providing underrepresented groups with their own place to grow, network, and learn. It can’t be clarified any better than the DC-based organization, Black Code Collective, does here.

3. Diversify Your Workplace

Examine the diversity of your team and organization. If you have few or no Black teammates at all, why is that? What can you do to change it? If your applicant pool never includes Black people, there’s a reason, and it’s not a pipeline problem. The networks of Black tech workers aren’t aware of your job openings. You can change that by posting on job boards aimed towards diverse applicants like Diversify Tech or work with companies like Black Tech Pipeline.

4. Make D&I Happen

What is your company’s D&I Strategy? Do they have one at all? If not, you could be the change maker to advocate for one. Some companies hire an executive to oversee D&I and some bring in consultants. Implore management to consider hiring a professional for this initiative. It is important to understand that D&I work needs to be ongoing and evolving in order to have an impact. A one-time diversity training won’t meet the needs that real change requires.

Companies may also see the benefit of sponsoring organizations that support Black tech workers in their community. Can they provide a monetary donation? Can the organization use your office space for meet-ups and other events?

5. Practice Inclusion

How can you create or contribute to an inclusive culture that allows your organization to retain Black talent? Inclusive behavior requires awareness and explicit support, which can be found in a company’s mission statement, code of conduct, D&I group statement or employee resource groups.

On a more personal level, I encourage you to watch for microaggressions your Black colleagues experience. When they do occur, step in or ask your team to be more aware, whether in public or private. For example, if you notice a Black colleague has been interrupted during a meeting, ask them to finish their thoughts before the topic changes. If your team uses problematic technical language (e.g. master/slave, whitelist/blacklist), advocate for substitutes like agency/operatives and allow list/deny list.

6. Build a Diverse Network

Be intentional about the network you build. Are you only rubbing elbows in white spaces? Can you make an effort to attend professional events with more diverse attendees? As a white woman in tech, I am likely made aware of more opportunities for career advancement. When I share these opportunities with my white network, I perpetuate the cycle. If my network includes Black technologists, I am able to contribute to making tech more equitable. In the same vein, if I’m only offering advice or mentorship to white technologists, I am creating more white privilege.

7. Donate

Donate to organizations that are doing the work to support Black people in tech. I recommend Black Girls Code. With teams in 15+ major metropolitan areas in the US, their mission is stated as such: “to increase the number of women of color in the digital space by empowering girls of color ages 7 to 17 to become innovators in STEM fields.”
They accomplish this by providing workshops, hackathons, and other educational events for Black girls to introduce them to technology and provide educational avenues they might not otherwise have. Donate here.

8. Listen to Learn

Are you listening to Black voices? Commit to learning more in a way that works for your learning style. This might include listening to tech podcasts hosted by Black people (e.g. Black Tech Unplugged or Git Cute), following more Black people in tech on Twitter, educating yourself through research published regarding racial disparity in the workplace or reading books or articles on a regular basis.

9. Recognize and Celebrate

Recognize and celebrate the work of Black technologists whenever the opportunity presents itself. This might be showing appreciation during a sprint retrospective, privately giving praise about their work to managers and higher-ups or nominating them for community awards, such as The Women Who Code Engineers to Watch List or The DCFemTech Awards.

10. Foster Diverse Community

If you’re a tech community organizer, ensure the speakers at your event are diverse. If Black people aren’t applying to speak or host workshops in your formal channels, ask them directly if they’d be interested. Reach out to networks outside your own to advertise opportunities. If you’re representing a technology in a particular community, you’re responsible for representing all the users in that community. Not doing so perpetuates the harmful idea that said technology is only used by certain demographics and all experts are of certain demographics.

11. BONUS

Buy some of this amazing Black Code Collective swag so you can donate to an amazing organization, show your support, and look dope AF.

At the end of the day, your work to be anti-racist needs to be explicit, intentional, and constantly evolving. This is a muscle which continues to grow stronger as you learn more and do more. We will always have room for improvement in understanding problems and implementing solutions. If you take anything away from this list, I hope you’ll consider both your impact and ability to affect change.

A Brief Exploration of Color for Developers

👩‍💻Tracy A King — Mon, 18 Nov 2019 22:51:48 +0000

The concept of color has been studied by many prominent scientists, including Aristotle and Isaac Newton, for over two millennia. Aristotle developed what we believe to be the first known theory of color, exploring how humans use their senses to experience it. He considered color to be sent from the heavens through celestial rays of light and believed that all colors are a mixture of lightness and darkness, or white and black. It wasn’t until the 17th century when Isaac Newton began to experiment with sunlight and prisms to present the visible spectrum of color or what we now recognize as the visible spectrum present in nature as a rainbow and in the classroom as the color wheel.

Our ability to see color comes from the photosensitive “cone” cells in our eyes, which allow us to see the visible wavelengths of the spectrum using color-detecting molecules. The perception of color based off of these types of cone cells is more complicated than having three types that are more sensitive to Red, Green and Blue. There are different theories regarding how color vision works on a receptor level versus a neural level. For the purposes of our exploration - I’d like to rely on Trichromatic theory, the idea that these three colors can be combined to create all colors that humans are capable of perceiving.

Although the RGB color model and theory predates the digital age, it’s the predominant model we use for displaying color on electronic devices like televisions and computer monitors. The RGB model is unique and can be differentiated by the fact that it is what’s referred to as an “additive color model” as opposed to a “subtractive color model.” It is additive in the sense that we mix different shades of our “Additive Primary Colors” - Red, Green and Blue to create different colors. Using this model, the pixels in the screens on devices we use to interact with the web all start off as black. We use code to express a percentage of Red, Green and Blue to produce the color desired.

We also use the RGB model as the foundation for the two main CSS color specification methods: RGB and Hex Codes. Each of these methods uses different properties to express the intensity of Red, Green and Blue to show a particular color. I’ll illustrate how we can inform the browser we’d like to show Millennial Pink using both of these methods and how they can be converted from Hex Code to RGB values.

RGB

We can begin to understand how our devices interpret color codes through learning how we represent colors in CSS using the RGB technique. Using the RGB method allows us to pass three separate parameters of values between 0 and 255. Each of these values represents the level of red, green and blue light we want returned, which will specify a color. Here is a representation of what this looks like as code:

RGB(redVal, greenVal, blueVal);

If we’d like to show an intense blue we would pass in the lowest value of 0 for our red and green values and the highest value of 255 for our blue value. You can see an implementation of this using this RGB value to return intense blue text in all p tags using CSS shown here:

p {
color: RGB(0, 0, 255);
}

While we are able to create just red, green or blue by passing in the value for one and a value of 0 for the others, we need to mix these in different shades to create other colors. In order to achieve our millennial pink color, we would need to pass through a red value of 251, a green value of 159 and a blue value of 164, like so:

RGB(251,159,164);

Hex Codes

Hex code is short for hexadecimal code and is the most popular method of color specification for developers. We should think of these six alphanumeric characters as three pairs, each of which refers to the shade of red, green and blue in that order. It may be easier to visually conceptualize it in this way:

#RRGGBB

These codes represent specific colors and are an easier-to-understand version of binary. In the same way we use the RGB method, we need to be able to to represent the intensity of red, green and blue using a value between 0 and 255. As you can see from the visual depiction above, we are only given two characters to do so. This is why we are using alphanumeric codes - to be able to express up to three digits. We max out at 99 using the two digit format so we instead begin to use alphabetic characters up to F to express numbers higher than 9 (e.g. A = 10, B = 11...F=15). You may recognize this as what’s called the Base-16 system, which uses 16 characters (0-9 and A-F).

A couple common hex codes developers might recognize are white (#FFFFFF) and black (#000000). From this, we can deduce that hex codes are representing a range of values between 00 and FF, with 00 corresponding to the lowest intensity of color and the FF corresponding to the highest intensity. We can convert hex codes to RGB values and vice versa with this understanding. Let’s take a look at the millennial pink hex code (#FB9FA4) and work our way back to the RGB value we saw before. In this hex code, we have a red value of FB, a green value of 9F and a blue value of A4, or:

#FB9FA4

We will start by calculating our FB red value by assessing the first character F as 15 in the Base-16 system and convert it to decimal because that’s the system RGB uses. We do this by multiplying our F value of 15 by 16 which returns 240and we’re halfway there! We will next assess the second character B, which we know to be equal to 11 in the Base-16 system and add it to 240 for a total of 251.

We can repeat this with our second value 9F by assessing 9 as 9 and multiply by 16 to return a value of 144. We add the hexadecimal value of F or 15 to 144 for a total of 159.

The last value, A4, is evaluated the same way. The hexadecimal value of A or 10 is multiplied by 16 to return a total of 160. We add the 4 for a total of 164. We can see these values (251,159,164) are the same RGB values we used earlier to achieve the same millennial pink.

Pro Tips: Don't Script When You Can Style

👩‍💻Tracy A King — Mon, 18 Nov 2019 20:10:06 +0000

The world of web development continues to make incredible strides in producing new technologies to better serve our users, and modernize web application development.

New tools and libraries are developed with developer experience (DX) in mind, and are often a more attractive option. I have to admit, I’d much rather implement an Angular Material Table than look up HTML Table Element rules one more time!

They’re also worth learning in order to sharpen your skillset, and stay ahead of the curve. The fact still remains that when we adopt frameworks and UI libraries (see: Bootstrap, Google Polymer), we don’t forfeit the responsibility of fundamental expertise, or considering performance for our users.

It’s easy to lose sight of the fact that a large part of our job as Front-End Developers is to inform the browser of the layout of the page. It’s also easy to revisit the basics! Give yourself a moment to take stock of your current practices in order to see if they can be replaced with any simpler, or safer solutions.

Our reliance on frameworks, libraries, and in some cases, languages, can be simplified by getting down to our roots - HTML & CSS. I’ve identified two major areas of UI development that have CSS-only solutions, allowing for safer, cleaner, and faster code structure and animations.

Structure

Application structures, and their views, are often based on conditionally rendered elements. This has become easier to accomplish with what is available to us, out-of-the-box, using popular frameworks. You can just as easily build or manipulate the UI with logical checks, and event handlers, as you can with a one-line CSS display property, or a CSS pseudo-class.

One example of this is Angular Structural Directives like NgIf. NgIf works by binding to a condition expression, and will add or remove the element it controls based on its truthy or falsy value. Here's an example of NgIf in action here:

<div *ngIf="likesPuppies">
  <a href="http://place-puppy.com/">Puppy Pics!</a>
</div>

<div *ngIf="likesKittens">
  <a href="https://placekitten.com/">Kitten Pics</a>
</div>

You can see, from this example, that it's incredibly easy to implement - all you need is an attribute with a boolean condition to show a link to kitten or puppy pictures, depending on the user's preferences. What you don't see is the ~100 lines of source code behind the scenes that powers the NgIf structural directive. Don't forget it's also written in TypeScript, so that logic will also need to be transpiled for the browser to read it. If you need to show or hide a div based on a JavaScript value, you'll still need to use some JavaScript to do it. In this instance, you can opt to use the display property instead, and avoid the framework altogether.

If you’re only showing an element based on whether or not a value is returned from an API, you don’t need to add extra JavaScript on top of the API call. You can use the empty pseudo-class selector. This selector can be used to refer to any elements which don’t contain children or content.

If our API has been designed to store lots of data, and return whatever is available, the front-end of our application will need to cater to this response. In this example, I am showing a statically created list of items that represents a potential API response with a missing value:

<ul>
  <li>Pens</li>
  <li>Pencils</li>
  <li></li>
  <li>Paper</li>
</ul>

Utilizing the empty pseudo-class selector will allow us to remove the empty list item from the user's view. Here's the code:

li:empty {
  list-style-type: none;
}

Here is what the user will see:

Chris Bicardi offers a short lesson on egghead.io that highlights the intricacies of the pseudo-class, and shows you how to achieve this here.

Another great example of this is the addition, and removal, of components like tooltips from the DOM, using JavaScript methods like MouseOver.

Tooltips are an intuitive way to make your application more informative and you don’t need JavaScript to use them! Angular provides a highly configurable Material Design tooltip allowing for delay, change in positioning and custom classes. Did you know they’re also available as HTML title attributes? The tooltip in this code will be displayed when the user hovers over the label:

<label for="name" title="User's First Name">Name</label>
<input type="text" name="name" id="name">

You can also create your own tooltip as shown in the W3Schools posting here. I especially like the design of this HTML/CSS-only tooltip in this codepen. These frameworks do offer more choice, but if the job doesn’t call for it, you may be adding a lot more code unnecessarily.

There’s a good time to consider JavaScript when developing for components like tooltips, especially if they’re a central feature for a view or you’re building a reusable component to match your application. The main takeaway should be to ask yourself whether or not you need to physically remove element from the DOM. If one line of CSS can replace your reliance on a library, it may be worth considering.

Animations

Animations are a popular development technique because they make applications more fun, responsive and intuitive. Transitions offer a more sophisticated interaction with our user - the click of a button shows a ripple effect, and you slide to the next element.

It’s hard to imagine how we ever survived the jarring experience of changing views instantaneously using anchor tags.

Libraries such as scrollmagic.io provide us with the ability for smoother and brighter scroll transitions such as anchor link scrolling, which you can demo here. The JavaScript Element Web API provides us with the scrollIntoView method, which allows us to bring an element into the view of the user. You can see an example of the method in use here.

With a minimal amount of CSS code, you can write keyframes for the same experience! You are only required to define your keyframe from and to states, and then reference your keyframe in your CSS animation property. If you’d like to see keyframes in action, check out this demo.

Animations have become such sought-after experiences, that many of the popular frameworks have included their own libraries for them. Angular Animations is a powerful library that of allows the developer to control robust transitions, and rich experiences.

It uses JavaScript to control the triggers, timing, and display of content. The ability to do this requires a function that calls one or more other functions. If you want to use Angular Animations, you’ll need to import the Browser Animations Module, import animation functions separately in the files you need them, and then add corresponding metadata properties. If you’re doing all of this to trigger an animation on MouseOver of an element, be aware that you can avoid the library, and JavaScript completely, by using the hover pseudo-selector.

It’s possible to make the argument that using the Angular Animations library could be a better alternative to writing animation logic because it uses the Web Animations API, which doesn’t use JavaScript to change CSS properties.

JavaScript is a more powerful solution to creating animations. It introduces the possibility of things CSS can't do, for example: pausing and reversing an animation. My advice is to err on the side of CSS, and use caution when developing animations, unless the design calls for a technically complex solution. Take solace in the safety of CSS.

An overridden, misinterpreted, or incorrect CSS rule can cause issues with user experience in the same way a JavaScript error does, but won’t prevent your application from loading or operating functionally. More often than not, CSS animations are more performant as well.

If you’d like to measure the performance difference between a particular CSS animation, and one which uses the Web Animations API, you can test them here.

The world of web development is experiencing a renaissance period thanks to the introduction of libraries and tooling.
Frameworks make it much easier to rely heavily on JavaScript by providing easy-to-use APIs that structure, style, and animate our applications. Implementation is easy, and the design of the components is stunning.

I’ve built many applications using them and am incredibly thankful they exist. Their usability significantly reduces the time it requires to get a project functionally, and visually, complete.

I do, however, believe that they can remove us from maintaining institutional knowledge of our own applications, and there are simpler ways to achieve what the design calls for.

I hope this has ignited a passion inside of you for what you can do with simple CSS!

If you have any other techniques you’d like to share, please do so in the comments!

This Dot Inc. is a consulting company which contains two branches : the media stream and labs stream. This Dot Media is the portion responsible for keeping developers up to date with advancements in the web platform. In order to inform authors of new releases or changes made to frameworks/libraries, events are hosted, and videos, articles, & podcasts are published. Meanwhile, This Dot Labs provides teams with web platform expertise using methods such as mentoring and training.

How To Write Your First HTTP Request to NASA

👩‍💻Tracy A King — Sat, 03 Aug 2019 17:09:31 +0000

I’m excited to introduce you to HTTP requests and provide you with tools and resources to get up and running.

Learning how to work with APIs is a great way to level up as a front end developer. It’s also a fun way to learn about how to retrieve data and what data is available to you.

The first thing you’ll need to do is request an API key from NASA by filling out this form to apply for an API key.

You can learn more about what an API key is in this video.
The API key will give you the ability to communicate with the NASA API. After you sign up, you will be immediately directed to a page with your new API key.
It should look like this:

Sensitive information is blurred to protect the user’s identification and personal API key

There are a number of different requests you can make with your new NASA API key.

My personal favorites include:

Asteroids — NEOWs: identifies asteroids based on their closest approach date to earth.
Mars Rover Photos: returns photos collected by NASA’s Curiosity, Opportunity, and Spirit rovers
EONET: allows users to browse the entire globe daily and look for natural events as they occur. Storms are regularly spotted in the tropics, dust storms over deserts, forest fires in the summers.

Please see the NASA API documentation for a full list of capabilities.

The Code

I will be using JavaScript’s Fetch API and show you, step-by-step, how to get everything running.

Step 1

Set up Fetch to make a request using the NASA API of your choice.
You’ll need the URL for the API you’re attempting to request data from. I’ve chosen to use the URL from my first example, Asteroids — NEOWs:

https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY

Step 2

You’ll notice the DEMO_KEY at the end of the URL. This is what you’ll replace with your own personal API key.
Once the API key has been added, the URL should look very similar to this:

https://api.nasa.gov/neo/rest/v1/neo/browseapi_key=34oLy4FhODjKGewo2VIy8dsfgSGq6Qb1TQEpAX5s

The only difference is that your API key will be unique and not identical to the one above.

The Fetch method will take the URL listed above as its one mandatory argument in string form, like so:

fetch("https://api.nasa.gov/neo/rest/v1/neo/browseapi_key=34oLy4FhODjKGewo2VIy8dsfgSGq6Qb1TQEpAX5s")

Step 3

Now we need to append a promise using then to the fetch request which will be returned and resolved to the response of that request.
You’ll notice we build out two cases, a then and a catch — one for success and one for failure, respectively:

Here’s a demo of the executed code using JSFiddle with Chrome DevTools.

When I run the code, the response from the API will show up in the network tab of the dev console:

If you run this code using your unique API key in JSFiddle with the console open, you will either see the response object or you’re met with an alert box.

Please note the above code will not run because the API key is not valid.

Conclusion and Resources

Feel free to reach out to me if you have questions about the code. It’ll be easiest for both of us if you send over a JSFiddle of the issue you’re experiencing.

If NASA isn’t your thing, there are a ton of other APIs out there for you to work with, using similar code.

Here is a short list to check out:

Twitter: provides developers with a lot of different opportunities, including collecting data for trending words and topics in certain regions.

FEC: provides developers with tools to collect information on campaign donations in US federal elections.

Thank you to Kathryn Hodge for her video about API keys that I referenced above. I’d also like to thank Wyn Van Devanter, Chloé Powell, Manfred Steyer and Christian Howard for their feedback and support.