DEV Community: Brittany Joiner

Check for pridewashing with AI and PixieBrix

Brittany Joiner — Wed, 28 Jun 2023 21:45:22 +0000

Ah, it's the time of year that every company has decided to come up with some sort of campaign or brand image that says "WE LOVE LGBQT+ FOLKS". 🙃

But sometimes those same companies have no history of actually supporting the queer community. Support is way more than slapping a rainbow on your logo or offering pride swag. It's about using your influence as a business to push for supportive legislation, using profits to help causes that support the community, and providing an inclusive place for your customers, users, and employees.

Although I'm a sucker for anything with a rainbow on it, I've been thinking about ways to make sure I'm not subject to "pridewashing". That's what it's called when a company or organization using Pride-themed marketing or messaging without actively supporting or advocating for the LGBTQ+ community.

Using PixieBrix + OpenAI, I created a tool that helps me check for pridewashing on websites that I use. And I plan to use this not just in June, but as part of my regular online shopping routine!

What It Does

My new mod (that's what we call automations built with PixieBrix) grabs the name of the company of the current webpage you're on and asks ChatGPT if they support LGBTQ+ causes and communities. It then returns a response with an invitation to search and learn more with just a click.

Let's break it down.

Right click on any webpage and select a button to Check for pridewashing.

An alert appears letting you know that PixieBrix is asking ChatGPT to look up the company.

After a few seconds, a sidebar appears on the page, with more details and an explanation about anything the company has done to support the LGBTQ+ community.

Remember - this is AI, and it's NOT always accurate. So do not rely solely on the results, but let this start your research!

Below the explanation, you'll see a button to continue your research.

Clicking the button takes you to Google results about things that company has done to support the LGBQT+ community.

It's simple, but it helps me be more aware of the companies I'm engaging with.

If you want to try it out, you can activate it here. But if you're wanting to know how this works and how you can build something similar, here's how I built it.

How I Built It

I built this mod with PixieBrix, a browser based automation tool. It allows you to create automations built by small functions called "Bricks". Piecing together a couple actions, I'm able to make this whole workflow!

If you want to follow along, here's how to do it. Comment if you get stuck and I'll be monitoring to help!

Create a free PixieBrix account. (You'll be prompted to add the PixieBrix Chrome Extension as you sign up.)
Right click on any page, click Inspect, and then select the PixieBrix tab to open the Page Editor.
Click the Add button in the top left of the panel, and select how you want to trigger your mod (we call these starter bricks. In my case, I used Context Menu but you could use Quick Bar or a Sidebar panel.
Configure the starter brick buy giving it a name and a title (this is the caption that appears in the context menu). Lastly, scroll to the Sites section and click All URLs.
Click the + button in the middle panel to add another brick.
Search for ChatGPT and select the Create a Chat Response with ChatGPT brick. Click the blue Add button.
Now time to configure your prompt brick! I started with a prompt to ask it to tell me the name of the company based on the URL. It looks like this.
Next, I'm going to make another prompt that asks ChatGPT to research the company. You can duplicate the previous brick (click the copy button at the top of brick panel to the right of Brick Actions.) Here's the prompt I used. Feel free to adjust it!

you are a system that analyzes a company and determines if they are helping folks in the LGBQT+ community.  You will research a company to see if they have ever donated to any LGBQTQ causes. You will also research to see if they've ever supported any pro-LGBQT+ legislation. You'll also research if they've ever done anything to hurt the LGBQT+ community.


Please research {{@getCompany.choices[0].message.content}}. 

Based on your research, are they supportive of the LGBQT+ community? Please respond with a Yes or No, and an explanation. You can only cite information you know to be true, do not make up information about the company.

Scroll down to turn the temperature down. I changed it to .5 because I don't want it to make up information.

You're nearly done! Now it's about styling and referencing information from our bricks.

Add the Display Temporary Information brick. This allows you to create a sidebar panel to display the response from OpenAI.

You'll need to tinker around with the Render Document brick a bit depending on what you'd like it to do. If you're interested in building with PixieBrix, best to get started with a tutorial or join the Slack Community and get support!

What Else You Can Build with PixieBrix + OpenAI

I walked you through one example, but explore the bricks as you're building and you'll see there's a million different kind of things you can build. For instance, you could build a mod that recommends LGBQT+ causes for you to donate to whenever you spend money.

You could use the Fetch Google Search Results to show recent news about a company in the sidebar, without even opening a new tab to go to Google.

Oh no... is this all pridewashing?

And just in case you're wondering... how does Dev.to support the LGBQT+ community? The #devpride tag is amplifying posts by queer authors to help their voices get past the algorithm this month. Last year they promoted some special groups for LGBTQ+ folks in tech to join, my favorite being Out in Tech, a community I joined in the last year that has led to new friends, more connections, and a lot of support and joy!

And how does PixieBrix support the LGBQT+ community? Well, for a small team, we have a high percentage of LGBTQ+ members on our team, over 25%! Rather than simply saying "we're inclusive", we actually do something about it by offering competitive pay and creating a safe workspace that brings in talent, regardless of identity. We didn't switch our logo, or create any rainbow swag this year though...

I used the Courier API to send secret morse code messages!

Brittany Joiner — Wed, 31 Aug 2022 18:15:22 +0000

I followed along with this amazing tutorial from the Courier team, and I was able to send my own secret message!

I sent an email...

And a text!!

(Video to come but wanted to share this now!)

And here's my repo! https://github.com/brittanyjoiner15/cascadia

How to make an event website with Eui and React

Brittany Joiner — Thu, 25 Aug 2022 19:11:00 +0000

I'm hosting an event for our Rainbow Stack ERG (employee resource group for LGBTQIA+ members and allies), and I wanted to make it feel like a real conference. The event is several members who have agreed to give talks about things that are meaningful to them that the rest of the group would find interesting!

I'm super excited about the event and wanted to make the speakers feel special, and also use my developer skills to make it better. So, I created a single page app with multiple tabs showing information about the event, and thanks to EUI (Elastic UI), it turned out AMAZINGLY and wasn't hard to build at all!

Want to check it out in action? Here's the live version.

I wanted to share how it works, how I built it, and how you can use it too if you're hosting an event or conference!

Ps - If you prefer to watch, scroll the bottom and you can watch me go through this in my YouTube video!

Features

So, yes. It renders data. Nothing too terribly fancy on that front. But I did work in a few cool things that I'm particularly proud of and hope provide utility for others.

Convert time to local timezone

Use the button on the talks page to change the timezone.

It was actually much easier to make than I thought it would be, thanks to Moment.

Here's how to implement something like this:

const moment = require("moment-timezone");

// Get the users local timezone
const getLocalTimezone = () => {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
};


export const showTime = (timestamp, checkTime) => {
  let localTime = moment.tz(timestamp, getLocalTimezone());
  let estTime = moment.tz(timestamp, "America/New_York");

  // return the correctly formatted time zone by passing the state
  return checkTime ? estTime.format("h:mm a z") : localTime.format("h:mm a z");
};

```




### Create rainbow letters 


This takes a string and array of colors and creates one big span with individual spans of colorful letters!

![The words Rainbow Stack with each letter a different color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1qav4fdw4mw40oihi0k.png)

Here's how to implement this.



```
export const makeRainbowText = () => {
  const colors = [
    "#FF1616",
    "#F7B012",
    "#FFDE59",
    "#7ED957",
    "#38B6FF",
    "#CB6CE6",
    "#8C52FF",
    "",
    "#FF1616",
    "#F7B012",
    "#FFDE59",
    "#7ED957",
    "#38B6FF",
  ];
  const letters = "RAINBOW STACK".split("");
  const rainbowedLetters = letters.map((letter, index) => {
    return (
      <span style={{ color: `${colors[index]}`, fontFamily: "Inter" }}>
        {letter}
      </span>
    );
  });
  return (
    <span>
      <strong>{rainbowedLetters} SUMMIT</strong>
    </span>
  );
};

```




### Inject `Speaker` object details into a field in the `Talks` Array


I wanted to be able to show the speaker details, such as name and avatar, as a field on talk object, so I created a function to grab the whole speaker object by looking up the name of a speaker. 


![preview of the speaker section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z00mg7aofj51i0qr1chw.png)

While I could have simply added the `speakerName` and `speakerAvatar` fields to each talk, that felt like way too much duplication and then if those things changed, I'd have to change in both places. This was more fun :)




```
const findSpeaker = (name) => {
  return speakers[speakers.findIndex((speaker) => speaker.name === name)];
};
```



And then I just use that function in my `speaker` field for each talk, which returns the whole speaker object to get what I need from it in the render.



```
  {
    sessionDate: "Sept 8th",
    sessionTime: "2022-09-08T20:00:00.000Z",
    title: "Making Color Coding Cooler",
    description:
      "We think that colors and organization isn't cool. Well, it's actually the coolest thing that ever existed.",
    genre: "Business",
    speaker: findSpeaker("Leslie Knope"),
  },
```



Here's how I reference it in the render for that field/column.



```
 {
      field: "speaker",
      name: "Speaker",
      render: (speaker) => (
        <>
          <EuiAvatar
            imageUrl={speaker.avatar}
            size="s"
            name={speaker.name}
            className="xMargin"
          />
          <EuiText>{speaker.name}</EuiText>
        </>
      ),
    },
```


So those are the exciting features and how it works, but here's a little more about under the hood how this site is put together. 

## How It Works

I spun up a quick site with `create-react-app`, and then [added Eui](https://elastic.github.io/eui/#/guidelines/getting-started) to it so that I can quickly access components, rather than needing to build a bunch of things out of the box. This is probably my favorite thing about Eui - there's so much built out of the box that lets me get up and running quickly, but you can easily customize so many things about it. 

### Main Page
This is my layout component:



```
<EuiPage paddingSize="none">
      <EuiFlexGroup className="eui-fullHeight">
        <EuiPageBody panelled>
          <Navbar tabs={tabs} />
          <EuiPageContent
            hasBorder={false}
            hasShadow={false}
            paddingSize="none"
            color="transparent"
            borderRadius="none"
            verticalPosition="center"
            horizontalPosition="center"
          >
            <EuiPageContentBody>{showSelectedContent()}</EuiPageContentBody>
            <EuiSpacer size="l" />
          </EuiPageContent>
          <BottomBar />
        </EuiPageBody>
      </EuiFlexGroup>
    </EuiPage>
```



Eui has a page component that I can add children to. I added a NavBar, made the body a panel with tabs (and details about those tabs, like content to show, ids, and `onClick` actions, which I used to set the state which then renders the correct tab content.)

### NavBar

Simple `EuiPageHeader` component that I just plug in an icon, title, and any elements I want, like buttons.



```
   <EuiPageHeader
        restrictWidth
        iconType={rainbowCluster}
        pageTitle={makeRainbowText()}
        rightSideItems={[
          addCalButtons(sessionTwo.dateAndTime, sessionTwo.calendarLink),
          addCalButtons(sessionOne.dateAndTime, sessionOne.calendarLink),
        ]}
        tabs={props.tabs}
      />
```



I actually created my own functional component that returns a `EuiButton` when I pass a link and date. Not a very complicated function, and you could maybe argue it wasn't necessarily but since I referenced these buttons in a couple places, it felt right.



```
export const addCalButtons = (date, calendarLink) => {
  return (
    <EuiFlexItem component="span">
      <EuiButton
        color="accent"
        fill
        iconType="calendar"
        href={calendarLink}
        target="_blank"
      >
        Save the {date} session
      </EuiButton>
    </EuiFlexItem>
  );
};
```



Final product looks like this: 

![Navbar with logo, site title, and two buttons to add to calendar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9y6tuiwkhtlo42s66it.png)



### Panels - Event Details

This one was really straightforward! Just rendered an image as a hero, and then a `EuiEmptyPrompt`, which accepted title, description, and actions, so it was actually just what I was looking for!



```
renderMoreDetails = () => {
    return (
      <EuiEmptyPrompt
        title={
          <span>
            Bringing Rainbow Stack members together to share ideas, learn from
            each other, and have fun together!
          </span>
        }
        body={
          <EuiText>
            Two sessions with different talks at each one, so join both if you
            can!
          </EuiText>
        }
        actions={[
          addCalButtons(sessionOne.dateAndTime, sessionOne.calendarLink),
          addCalButtons(sessionTwo.dateAndTime, sessionTwo.calendarLink),
        ]}
      />
    );
  };
```


Then I stacked that together in a FlexGroup with the image, and viola!

![Site hero with image and dates, then description about the event and two buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d70iga9rmq60cnfrid3u.png)

### Panels - Speaker Details

I used the `EuiCard` component to map through my array of speakers and return a styled version of each speaker.



```
 renderAllSpeakers() {
    return (
      <>
        {speakers.map((speaker) => {
          return (
            <EuiFlexItem>
              <EuiCard
                aria-label={speaker.name}
                image={<EuiImage size="m" src={speaker.avatar}></EuiImage>}
                footer={speaker.shortBio}
                description={
                  <>
                    <EuiText color="success">
                      <strong>{speaker.title}</strong>
                    </EuiText>
                    <EuiBadge color="primary" iconType="branch">
                      {speaker.team}
                    </EuiBadge>
                    <EuiBadge color="warning" iconType="globe">
                      {speaker.basedIn}
                    </EuiBadge>
                    <EuiBadge color="success" iconType="faceHappy">
                      {speaker.pronouns}
                    </EuiBadge>
                  </>
                }
                title={speaker.name}
              />
            </EuiFlexItem>
          );
        })}
      </>
    );
  }
```



I'm REALLY happy with how this turned out!


![Speaker card with name, image, description, and bio details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t7lk0iqbs7gwi1vs3an.png)


### Panels - Talk Details

I used the `EuiBasicTable` component to grab an array of Talks and display a row for each object in the array. 

Check out [the source code for this file](https://github.com/brittanyjoiner15/eui-event/blob/main/src/components/panels/TalksPanel.jsx) if you want to specific components I used to style specific items, as there are quite a few.

 I also added a button so you could change the timezone. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wh5c7378p5ne0dkcykr.png)

### Bottom Bar

Lastly, I used to `EuiBottomBar` component to create a bar across the bottom that had some custom text and two different buttons.



```
        <EuiBottomBar position="static">
          <EuiFlexGroup direction="row" alignItems="center">
            <EuiFlexItem>
              <EuiText>
                <h4>Hosted by Elastic's Rainbow Stack ERG </h4>
              </EuiText>
              <EuiText>Group for LGBTQIA+ members and allies</EuiText>
            </EuiFlexItem>

            <EuiFlexItem grow={false}>
              <EuiButton color="success" fill href="#" target={"_blank"}>
                Sign up for updates
              </EuiButton>
            </EuiFlexItem>

            <EuiFlexItem grow={false}>
              <EuiButton color="primary" fill href="#" target={"_blank"}>
                Join the slack group
              </EuiButton>
            </EuiFlexItem>
          </EuiFlexGroup>
        </EuiBottomBar>
```



Nothing too fancy here, but shows the details I need with ideal "CTA"s (Calls to Action). You could use them for joining an email list or subscribing to event updates.

![Footer with text and two buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u493dg8vk19x4w7gkwm1.png)

### Deploying

Once I built it and pushed it to GitHub, all I needed to do was go to [Vercel](https://vercel.com/) and hook up the repo to a project and 🎉! She's live! 

## How To Use It

Now that you know how it works, time to jump into it! Whether you want to use it, add features, or learn more about it, here's everything you need. 

- **Check out the source code**. I copied some of the code, but it's likely to change and be improved, and there's plenty of parts I left out! If you're trying to learn more about how this works or how to build a simple app, read through it all and clone the repo to get it running locally on your computer! You can view the repo at [brittanyjoiner15/eui-event](https://github.com/brittanyjoiner15/eui-event).

- **Fork and make it your own!** Want to create something like this for an event you're hosting? Just for it and customize the information to be specific to your event, speakers, and talks!


- **Contribute if you have ideas or improvements!** Have ideas on how this could be better? I do too! Please [add an issue](https://github.com/brittanyjoiner15/eui-event/issues) or if you'd like, fork the repo, then open a pull request with your changes! (Let me know if you need any help with it if you've never done that before, I know it can be intimidating at first, but I'm happy to help show you how to do that and make simple changes!)

Here's My System For Tracking Progress as a Developer

Brittany Joiner — Mon, 18 Jul 2022 13:57:52 +0000

Are you tracking your progress as a developer? It's not a requirement (at least in most places), but I've found it to be quite helpful. Especially when I'm trying to get past the imposter syndrome and remember how far I've come.

It's also helpful to track my progress because I'd like to get a promotion. I bet you would too! Imagine if you could create a list of goals with your manager, and then come to them with quantifiable list of activities and tasks you completed related to those goals? Wouldn't it be a no brainer for that promotion and raise?

Because of that, I built this system for helping me create tangible, actionable goals and log progress I'm making on them to compile those stats in a dashboard.

I made it as simple as possible and accessible from anywhere because I knew if I had to open up another app or tool, I'd never do it.

How It Works

From anywhere I'm at, I just use a keyboard shortcut to open a sidebar in my browser with a form. I fill out any details about the task I completed and select which goal it relates to. When I submit, that task is sent to a Google Sheet, and a preview of my dashboard shows in the sidebar panel. (The dashboard is the count of total submitted tasks that relate to each goal).

Below that, I see the last logged task, and a list of new tasks that I can grab and start to work on so that once I complete them, I can add them in!

Want to try it out and use it for yourself? Keep reading to see how I built it. (And comment on here if you have any questions as you try to build!)

What you need to get started

Google Sheet (I made this template, but you could create your own)
Free PixieBrix account
Task tracking tool (I prefer Trello, but to each their own!)

Step 1: Set the goals

You can really build this with all sorts of tools, but if you want something straightforward like I did, just grab this spreadsheet.

Start with the first tab and do some research about what your job is and what kind of skills or areas you might need to master. Fill out the details in Column F with what you find in your research.

Next, fill out Column G with what I like to call tangibilized action items. Aka, whatever is in the column before it, create a specific, actionable goal that relates to that.

For example, if you want to learn Vue, maybe create a goal of building a single page app with Vue. If you want to get better at code reviews, have a goal of doing 2 code reviews each week.

Step 2: Set up the dashboard

You can ignore the middle tab in the spreadsheet for now... that's essentially just a list of logs of each task that progresses a goal. You'll do most of that work outside of the spreadsheet and get PixieBrix to fill that in for you.

But head to the third tab, called Dashboard. Here you'll want to rename the items in Column A with short titles for the goals you just created.

The purpose of this is to be able to track each goal, and how many tasks you have that relate to that goal. If you don't make any changes, the formulas in the cells next to these titles will count how many items are in the Relevant Tasks tab that relate to each goal.

Here's the formula if you're curious:

=COUNTIF('Relevant Tasks'!B:B,A4)

It's not so important what you name these short titles at the moment, but it WILL BE important to make sure that you use the exact same short title in your dropdown field on your PixieBrix form. But don't worry - we'll get to that!

Step 3 : Make a form to log progress and a way to view stats from any tab

Okay you've got your log, now you're ready to break out PixieBrix and build a form and a sidebar panel!

If you've never used PixieBrix before, you'll need to create an account and add the Chrome Extension.

Don't worry, it's totally free, and the best part is, you can build all sorts of cool stuff with it besides just this extension. (You can see tutorials and demos of all the things I've built with PixieBrix in my PixieBrix YouTube playlist.)

Once you're all set up, you're ready to start building.

Prefer to watch? Here's a video.

Want to read the steps while you watch? Keep going!

Open up the page editor

From anywhere in Chrome, right click on a page and click "Inspect" to open up the Inspector. Notice you will have a new tab called PixieBrix!

Select that to start building your extension.

We'll technically need two. Let's start by building the preview panel that shows the dashboard from the Google sheet.

Click "add" and sidebar panel

In the top left of the page editor, you'll see an option for adding a new extension. We want a sidebar, so click that.

Add a brick in the render document section

Go to the "Render document" brick, and look at the preview on the right side. Select the three dots in the element that holds the text and then choose "Brick". Just like this!

Add an iframe to the brick

Now you see on the left something that says brick just under the Render Document item. Click the + button just below brick and search for iframe. Click Add and that brick is now inserted into your renderer.

Just configure the iframe with the embed link for your Google Sheet. (Here's how to create an embed link for your Google doc if you're curious.)

Once, you're done, it should look something like this, and you should be able to see it in your browser when you click Render Panel in your extension.

Advanced Step
I'm going to keep this written explanation a little bit bare bones, but if you are following along in the video, you'll see I actually also add another section to the document, with another brick for getting data from PixieBrix and rendering that.

It's a way to show the last logged task. If you're not worried about seeing it, you can skip this part!

Click the three dots to add a text element and you can add a header then choose the options to style it as you please, like with colored text, italics, etc.

Next, you'll just need to a brick called Get data from PixieBrix database and search for the key that you will define in your form brick. (I called mine mostRecent.) You'll also need to create a database if you haven't already. I just called mine Achievements. Doesn't really matter what you name these, but you'll want to remember it for the next extension where we push data here on form submit.

Next, you'll add the Render markdown brick to format the data in a more readable way.

Here's what you'll copy and paste into that brick, assuming you've set everything up the way that I did in the video. Note - if something doesn't work, follow the trail and check that your outputs are named correctly!

{{@transformed5.data.name}}, _completed on_ {{@transformed5.data.date}}

Should look like this, depending on what you name your fields in the form that we'll create in the next extension.

It's not going to show any data because we haven't pushed anything to that database yet. If you're having trouble, you might need to change the Missing Behavior to blank instead of error.

Create another extension by clicking "add" then choose the Quick Bar option

I prefer to use the quickbar because it means I can trigger actions happening with a keyboard shortcut that opens a list of commands. In this case, I want to open up a sidebar panel with a form.

You can configure this Quick Bar brick pretty much however you like - this is just naming and styling.

Next, add a brick called Show sidebar. This tells PixieBrix to open a sidebar when you trigger this action. I set the panelHeading to Log so that it creates its own sidebar panel with the form.

Time to build the form

Now add another brick called Show a modal or sidebar form. This a brick that you just configure the form for how you want it to look. If you're pairing it with the spreadsheet above, I recommend adding the following fields (and field types):

title/name of task (single line text)
goal it was related to (dropdown)
notes (paragraph text)

The other important thing to configure is the Location field just below the form fields. Make sure you set it to sidebar instead of modal.

Get a timestamp, then send to Google Sheets and PixieBrix

Now you just need to reference the input form the form, get a timestamp and ship that info!

Start by adding the Parse Date brick, which will give you an output that you can use to reference a time stamp. Just type now in the Date field, and that's all the config you need.

Now add the Add Google Sheet row brick, and connect your spreadsheet and pick the tab "Relevant Tasks (Don't Edit)". (If you've never use Google Sheets with PixieBrix before, you may have to log in to Google Sheets and authorize PixieBrix).

You'll see it pulls in the headings, and now you just need to map the data. Here's how I set it.

Show confetti and display the achievements dashboard panel.

Now add a brick called Show Confetti, which requires no configuration, and just sprays digital confetti across your screen! What a way to celebrate. 🎉

Lastly, add the Show Sidebar brick, and set panelHeading to be the name of the Achievements sidebar you just made in the previous extension. You can see what it's called by going to the first brick in the Achievements Panel extension and look at the value for Heading.

Advanced - push "last updated" data to PixieBrix.

You only need to do this if you've done the advanced part of the previous extension where you pull data from the PixieBrix database.

Add another brick called Put data in PixieBrix database to send the data to the PixieBrix data and rewrite the mostRecent item. That way it only ever holds the latest value. You'll want to select the same database and key that you used in the previous extension, and then you'll want to set a replace value for Merge Strategy.

Lastly, just add two properties to send to it. Remember the "last task" message? We showed the name and the date. So just reference those two things, like this!

Want to create a table of upcoming tasks? Here's how to set that up. The only difference is that you'll need to use the jq filter to render cards in a list named Elastic (assuming that's how you have your Trello board set up).

Here's the syntax for doing that:

.list as $list | .input|.cards|=(del(.[][]|select(.idList==$list|not)) | del(.[]|select(.==[])))

Now go and do!

Need any help? Comment on here or my video and I'll respond as quickly as I can! The PixieBrix community is also extremely supportive and happy to help when you have an idea for something to build but you're stuck. So if you like this idea but have some modifications, let me know and we can try them!

Developer Diaries | Week 14 - Hacktoberfest Time!

Brittany Joiner — Fri, 15 Oct 2021 21:51:43 +0000

Happy October! It's one of my favorite months. Why?

Because some of us in the dev community celebrate...

HACKTOBER FEST!

It's a whole month long celebration of Open Source Software and learning how to contribute to code together. I started celebrating about two years ago, and I credit it with connecting me with other developers who graciously held my digital hand and guided me into the world of code collaboration while I was a baby developer terrified of pushing any of the wrong buttons.

So this week's post is a tribute with some info, like how to get involved, how to write your first PR, and projects I'm contributing to this Hacktober. Enjoy!

How to Get Involved

Head to the Hacktoberfest website and connect with your github account. (Don't have a github account? Now's a great time to get one! It's easy to set up.)

Once you're registered and connected with Github, it will automatically track your successful PRs and show you progress updates.

The goal: Complete 4 successful PRs in October, and ... YOU GET A FREE TSHIRT

[insert oprah gif a out you get a car]

Not gonna lie, I do this for the open source celebration, but also for the t-shirt.

Okay now it's time to find some issues! (Not sure what that means? Keep reading.)

Here are some good resources for finding issues:

-

Writing Your First PR

Okay so how does one exactly "make a PR"? I'm glad you asked because the first time I did Hacktoberfest, I was pretty confused. Here's some lingo you'll hear and what it means.

repo: A repo is where a project's code is stored. This is typically on Github, and its basically like a Google Doc of all the code related to a project. When contributing to a project, you need to fork that repo and clone it on your local machine. But I'm getting ahead of myself with lingo.
fork: Imagine you spent years building a project, and then someone came in, changed a few lines of code, and the entire app went down. That would be tragic right? We don't want that. So Github makes it reallllly hard to do that, and one way is by having a contributor say "this project is cool! I'm going to grab it and bring a copy of it to my house and then add some cool stuff on to it, and then I'll send it back to you and you can decide if you want it." The "fork" is when you tell it go over to your house. The "clone" is when you actually open the door and let it come inside. (I... guess that's a good metaphor?)
PR/Pull request: Let's stick with my analogy. A PR is when you've played around with the code inside your house, and you want to let the other person see your changes and if they like them, bring them into their code. So you create a "pull request" where you're asking them to pull your changes (from your fork) into their code- the main codebase/repo!
issues: We've all got issues, but no one has more than Github 😂. An issue is like a ticket saying "hey this is something I need done in the code". It could be a bug that needs fixing, or a new feature they want implemented. It could be something really small, like adding a target=_blank to a link, or it could be really large, like building a new page and components in an app. When you want to help out with a project, you want to start by looking at a repo's issues and pick one, then you'll reference that issue in your pull request.
contribution guidelines: Look for a file called contribution.md or contributing.md typically in the root folder of a project. This is kinda like instructions for when you want to send your code back to the original code base so you know what they're hoping for.

Don't worry if these terms don't all make sense... it can take a while to get used to.

Pro-tip: Download the Github Desktop app. I spent a lot of time learning Git on the command line, and while it comes in handy sometimes, it's not essential for a newbie and if you're feeling intimidated with git and github, don't force yourself to stress about command line right now :) ESPECIALLY when cloning repos locally after you fork them. It's much easier to follow the UI as it walks you through it and uses normal language to help you understand what you're doing.

Don't worry if you're still feeling intimidated. Github makes it really hard to actually break anything, so no matter what you do, you don't have enough admin rights to actually destroy anyone else's code, so you really can't hurt anything, no matter what buttons you click. Also, ask questions in the issues. Code maintainers are typically super happy to help newbies get familiar with the PR process and answer any questions.

Projects I'm Contributing To

This year, I've found two projects that I'm helping out. Team Vibhav (that's the place where my fix was as simple as making some links open in a new tab), and AnitaB.org where I'm helping set up Prettier and Github actions, add routing, and add a documentation link section for each of their projects. Feel free to come join the party over there and grab some issues!

Developer Diaries: Week 13 | Celebrating the wins

Brittany Joiner — Tue, 12 Oct 2021 21:39:20 +0000

If anyone is following closely, you might have noticed I missed last week! Sorry about that - was a bit of a crazy week. But as I prepped for this week (realizing it's technically week 14 as a developer), I thought writing about how I was actually able to set up an new app to run locally almost all by myself, and was I like "I've come so far!" and took a little moment to celebrate.

It reminded me that we all need to take a moment to celebrate the wins, and I think as developers we don't do that enough. We go from solving one bug to jumping to the next. We come up with ideas left and right and implement them as quick as we can.

And then sometimes, we just have those days where it feels like NOTHING we did worked, and maybe we don't even know what we're doing. You know it - imposter syndrome. On days that like these, I find it helpful to reference a list of things I can do that I know even when I have those down days, I've still come along way.

So I'm going to list out some things that I can do now that I couldn't do 13 (er, technically 14) weeks ago. This post might not be useful for anyone else except myself - although I hope it will encourage each of you to do the same, no matter where you are at in your developer journey.

Using Github desktop
Running new apps locally (for the first time!)
Catching bugs/problems/areas of improvement in code reviews (admittedly, this still doesn't happen much)
Create a utility function and being able to reference it in multiple places in my apps
Create a React App Project and build a landing page completely from scratch with components in less than 2 hours. (Here it is)
Create tests with Jest (for both frontend AND API)
Sign git commits
Upgrade dependencies
Understand the difference between Sprint and Kanban view in Zube
Regex for replacing special characters with "_"
A javascript function that doesn't require me to write regex to replace special characters :)

Things I still can't do?

Spell component right on the first try.
Explain what this is and how it works
Get the right audio source on zoom

Developer Diaries: Week 12 | Over-engineering

Brittany Joiner — Thu, 30 Sep 2021 15:51:18 +0000

Everyone says developers think a lot, and they do, but the problem is... sometimes we think too much. I had a couple cases of that this week, one of which involved me learning some regex that was TOTALLY unnecessary, but a good learning experience, and I found a cool regex checker.

Let's dive right in!

Over-engineering

We've all heard the term over-engineering, but turns out it's actually a real thing. I've noticed a few examples of me doing this recently, both in actually development and outside of work.

Here's a funny example.

I was laying in bed and realized I was tired of having to get up and cross the room to turn off my bedroom ceiling lights, and I honestly didn't even love rolling over to turn off the lamp. It felt like too much work to hit a button to turn things off, so I bought smart lights.

Not only did I set them up... I went all in. I replaced my bedroom lamp AND ceiling lights with the new smart bulbs. And that was kinda great! Now I could just shout "hey Alexa, turn off my bedroom lights". But then I quickly got tired of doing that and wished there was a button on the side of my bed I could push to tell Alexa to turn off the lights.

And that was the moment I realized I'd come full circle... I was right back where I started. Classic example of implementing a new feature because you think it solve a problem, but it just creates new problems and that feature was actually a red herring distracting you from either a deeper problem, or a totally non-existant one!

I installed smart lights in my living room too and have found it much more helpful, and also very cool looking with special effects that change colors.

I did something similar to this at work recently where I realized the problem was that we needed some characters replaced so that a didn't turn into %20.

My mind got busy with coming up with a solution for replacing characters and learning regex, but really all I needed to do was find a library that already encoded and decoded URI text :)

One step back even more, I realized I wasn't even thinking through how the text was getting encoded to start with and why it needed decoding. It wasn't until a senior developer asked me that I realized I was doing my classic smart light situation! I was scratching an itch, without realizing what was causing the itch.

So I'm going to work on spending more time sitting and thinking before jumping in and adding features that I think solve the problem. Some of this comes with time, because I think that's what makes a developer experienced — being able to think through a problem rather than just code something that makes a change. That's important too, but as I grow, I want to be better about thinking through the problem first.

Here's how I plan to do that.

🙋‍♀️ Ask more questions. I feel like I get really excited when I think I can just start coding to solve something, but I wanna do a better job about asking more questions and getting clarification on issues before diving right in.

💻 Think like the computer. Before I even architect a solution, I want to think through why the computer is doing what it's doing. Often this is necessary to solve a bug, but I'm realizing sometimes it's not and when you skip over this, you miss other things that might be impacted as a result of your code change.

🚶‍♀️ Walk. The. Eff. Away. It's really hard for me to step away from something when I'm in a zone. I just wanna solve it! I need to get into a better practice of not working for more than about 60 minutes in a deeply focused state, and then being okay with breaking that to walk around, get some air and new perspective, and then come back.

What about you? Have you ever over-engineered something? What did you learn from it?

Developer Diaries: Week 11 - Exploring Libraries

Brittany Joiner — Sat, 25 Sep 2021 15:32:58 +0000

This week - aside from surviving food poisoning - I really only had one mission. Another dev on our team had built a modal asking for a user to select their country and timezone, and I needed to use some libraries to get those options and make sure they were consistent with the same libraries we used for a feature we're planning to release down the road that also has a form asking users to select those options.

Thankfully I'd already worked with them before, but this time I got to take the reins with implementing them and really got to dive right in to not just copying and pasting, but actually solving through all the bugs to make that code work on this new modal, which was on an entirely different branch of the app.

I solved most of the bugs but not everything (got a little stuck on a weird spread operator typescript nonsense... if you ever see "oh no you can't use that, try using --downlevelIterator", well you can do that, or you can use Array.from(your_array_you_were_using_the_spread).

Using `Moment.Tz` library

I used the Moment-Timezone library, which returns, well, all the timezones! Super easy to get started with, just add using npm or yarn to add it, and then add import moment from 'moment-timezone'; to the top of your file.

I needed to get a wee bit fancy with it, and this returns ALOT of things, but I only needed the names of the timezones. So I pulled out just the names, and then sorted them alphabetically.

Then to make it easier on a user, I used the guess function to look in the browser and figure out what their timezone is, and if it's part of my list, then woohoo awesome, if not, then just return an empty string and make them go select it.

Using Iso

For the country field, we needed a standard list of countries, so I used the i18n iso countries library. (Easy to install from npm or yarn. And just add import { getNames } from 'i18n-iso-countries'; to the top of your file.

I asked it to grab the names of countries, then look at the first couple letters we pull on a user's locale to determine if we show in another language or in English, if we don't have their locale info.

Then I created an array of objects with a value and text of the country codes and country names, along with pushing a default option of "Select country" as the first option.

Viola!!

Here's how it looks.

How to start your day like a developer (Dev Diaries: Week 10)

Brittany Joiner — Thu, 16 Sep 2021 20:04:02 +0000

This week, I had a few days where I just really struggled to get up an at 'em and get my mind in the zone. It led me to research and ask other developers how they start their days and experiment around with some tactics myself. I also spent ALOT of time building some tests on our app. So let's hop right in!

What I worked on this week

Tests, tests, and more tests.

But really, my focus this week was building some basic tests to just check that critical parts of our app work and actually render.

We use Jest, and I'm really happy about that because there were a lot of resources on google. My tests were fairly simple-- starting off easy just to make sure a component actually mounts. But I got a little fancy with some of them to check that the right onClick functions are called when you, well, click!

If anyone finds this interesting, happy to do a separate blog post on what I learned specifically about testing and how you can set up some basic tests for your app, too!

Starting your day like a developer

It took me a little while to get going in the morning this week. Like I'd get to my desk and then instead of being able to get up and start working, I'd just find my brain in a bit of a fog.

I asked some fellow devs what they do, and I started to develop my own sort of routine, for like a pre-work morning ritual, and then a work warm-up ritual. Think of it kind of like stretching before a game. I can't just walk up to my computer and begin churning out code; I need to warm up a bit.

Here's what I've been trying, and so far it's been helpful, although I want to shorten the amount of time so I have more time for other morning routines, or can start working sooner. WIP. :)

Pre-Work Morning Ritual

1) Play on my phone when my alarm goes off in bed. I know this is technically against every rule in the book, but I swear it helps me wake up, and doesn't feel as intimidating as getting out of bed. I don't go straight for work emails though... I just bring up Pokemon Go and do my daily field research, send gifts to my friends, and catch any Pokemon that are out.

2) Sit on the porch and do journals, read newsletters/books, as time permits. This depends how much time I spent laying in bed playing Pokemon :)

3) Go outside and feed Artie. (Who is Artie? Check out week 7's post where I made a new stray cat friend.) He's so cute... every morning when I go outside, he's just sitting nearby waiting for me to fill up his foodbowl 🥺.

4) ePause! Hop on a Zoom call with some coworkers and we do a 10 minute meditation to kick off the day. After this ends, I kick off my Morning Hype playlist on Spotify.**

5) Stretch / pushups. The point is - do something phsyical. I don't really want to do a whole workout, just get myself moving abit. I maybe spend two minutes max on this.

6) Warmup my brain to think. Okay, now I do a quick mini crossword or NYT spelling bee game to try to get my brain moving. This morning I did Morning Brew's mini crossword, and I solved in about a minute and half. I think I'm going to start doing those as they feel less intimidating that the NYTimes ones.

Once I've done all those things, my brain has started to feel like I'm alive, awake, and alert. But I'm still not quite ready to put keys to the board and start coding, so time to do my "work warmup".

Work Warmup

1) Check emails/slack. Read through any content of what I might have missed since I was last online. See if there's any new issues that came in, and be very careful not to let this turn into a rabbit trail.

2) Review any open PRs/Do code reviews. I actually find this to be a good way to start the day because my brain just has to read some code. And if I have questions, that's perfect, because I comment them and learn more.

3) Watch SHORT tutorial on something I'm working on. I realized one of the reasons I would struggle to get started on something was because I would often feel intimidated if I was stuck on something from the night before. I started to watch short videos on my specific thing I was working on to 1) help jog my memory, but also 2) give me more insight as to how I might solve my problem.

4) Timebox my first task. I am now ready to start coding and working on my tasks, but first I make sure to set a Pomodoro Timer and timebox it so doesn't feel so intimidating to get started. (If I know I just have to work and focus for 25 minutes, it feels manageable enough, and I often keep going well past those first 25 minutes before I need a break.)

What do you do to start your day like a developer?

Developer Diaries: Week 9 - When you don't feel like a dev

Brittany Joiner — Fri, 10 Sep 2021 20:57:33 +0000

Hi everyone! This is my first "live" / non-ported-from-hashnode post on dev.to! I'm excited to be here and hoping everyone finds this useful. If this is the first post of mine that you're reading, I'm doing a series on what it's like as a young developer. I just started a full time dev job at the beginning of July 2021, and each week I spend a little time reflecting on what I've learned, partly for myself, but also in hopes of helping out others who are also starting out on their dev journey and wonder what it's like!

What I worked on

Upgrading packages. We use Elastic's UI library, and I needed to update that because of some bug fixes they recently made. Turns out, it's both easier and harder than upgrading my iOS software 😂. But really, I started out by overcomplicating it, then realized I just have to update the package.json file with the version I want, then delete node modules, and then yarn/yarn install. That led me to my second thing I learned which was...

NPM is not the same as yarn! Not that I ever really thought it was, but our environment uses yarn, so when I was trying to upgrade with NPM, it made for some weird problems. What's the difference? They're both package managers, and they handle adding and updating new packages, as well as running specific commands within them. I kinda think of it as the App Store? But I'm not sure that's a perfect metaphor. Yarn is a newer version of NPM, and according to my team, a better option. There's pros and cons for both. It seems NPM is technically more popular, based on downloads and google trends. Yarn seems to work better in terms of performance. I did some googling around just to get more familiar with them, and what I learned is... probably doesn't matter which one you use cause they're both good.

Autosave feature

I also worked on creating some features in our app to allow autosaving on new case creation! It only saves to local storage (for now), and it's not a completely new feature because we already had it on comments, but it was cool to take something and replicate it a slightly different way to add new functionality. Check it out!

What to do when you don't feel like a developer

I struggled earlier this week - call it the long weekend, call it surviving a hurricane, or just call it a really stubborn bug - but I had a day where I swear it felt like more senior people had to straight up tell me exactly what words to type on a screen to solve a problem.

It was a little disheartening, and I'm sure it's not the last time I'll feel it. So just in case you're over here reading about everyone's programming wins and you're feeling like you maybe didn't have one today or this week, don't sweat it. You're not alone.

As Hannah Montana once said...

Here's a few helpful things I found to do, and I hope you'll find them helpful, too.

*1) Take a break and walk away. * This is pretty good advice all the time even when you're not having a hard day but just generally stuck on something. Walk away. I know it's hard... you feel like you need to work harder on something you're struggling with, you feel lazy if you take a break. But sometimes you literally need distance and to turn your brain off for a few moments. Imagine putting a lot of weight on a foot that's hurting. You wouldn't keep pushing on it would you? Nah you'd take a break.

2) Remember how far you've come. Take a pause and remember where you were a week ago, a month ago, a year ago. That's one of the reasons I like writing on this blog, it forces me to write down something new I've learned each week so I can see growth. And that's just weekly! A month ago, I was barely able to get simple PRs all along on their own, now I can do it with more advanced things! A year ago, I was still working in marketing. Progress!

3) Ask for help. I don't usually feel too bad asking for help, but a lot of people do. And sometimes I do if I feel like I've already asked a lot of questions that day/week, I am going to look stupid if I ask more. But people understand you're new and getting your sea legs... I read that it often takes people 3-6 months to really be "useful" feeling members of a team, so if you have a day or two where you don't feel useful, don't worry! No one is expecting you to be useful 100% of the time. And I know I personally love when people ask me questions cause I feel smarter when I do know things :).

4) Have a drink. Okay you can't technically probably do this on work hours, depending on where you work. But seriously, just make it through the day and take it easy afterwards. Relax, have a drink and just chill, and decide to try again tomorrow.

Other fun updates

Check out my Support Challenge Coin!
I just got this for working on the support app that I've been working on and I'm so excited! I'm getting a fancy glass case for it so I can display it on my desk and not worry about losing it 😂.

VTO: Volunteer Time Off
Elastic offers a super special benefit, which is 40 hours a year of VTO (volunteer time off). I've gotten lazy about using it this year, but I'm picking it back up starting with a local cat shelter. Look at these little cuties I got to work with today.

Want to come work with me and build cool things and get paid to go volunteer places like this? We're hiring!

👋 That's all for now! See ya next week!

Developer Diaries: Week 8 - Life happens

Brittany Joiner — Fri, 10 Sep 2021 18:34:58 +0000

I'll be honest, I don't have a ton to write about this week, but I'm still trying to keep the weekly habit, so I'll say a few things quickly.

Life is distracting (that's okay)

I moved to Baton Rouge about a year and a half ago, and while hurricane season hits Lousiana, it doesn't seem to do too much to Baton Rouge, but Hurricane Ida was an exception. I usually don't worry too much about nearby hurricanes because I'm not on the coast, so there's not much to worry about. But this one turned out to be a pretty serious one and managed to inflict some damage pretty close to us. Thankfully my family and I were okay - didn't even have any power outages, but it's been pretty rough for Baton Rouge (a lot of the city has been without power), and for just about anything 20 minutes south of us has been straight up devastating with damages to homes and roads, traffic lights out, and water in more places than it should be.

And then Ida had the nerve to keep going up north and devastate New York and New Jersey! Thinking of all the folks who've been impacted by this storm. Definitely has had me pretty distracted this week, and I wasn't even seriously impacted. Thankful for a team that's been very understanding and given me the space and time to check on my home and family/friends and be as available with them as I need to this week.

If you're able, Gizmodo has compiled a list of places to give to help victims from these storms. (I donated to Cajun Navy as I kept seeing them come up in a few of my searches.)

Testing

This week I've been cleaning up some PRs I had out and incorporate some testing pieces in them. Sometimes, I'm like "yay testing, that's a great idea." And sometimes, I just get lazy. I'm working on having a better perspective and getting good at understanding what's good enough to move on, because it's easy to feel like you need to boil the whole ocean with testing. I create one test, then think of six more scenarios!

At the moment, my goal is to keep it roughly within the scope of the issue I'm solving for, but I'm excited for next sprint which will give me some dedicated issues to set up testing across our front end. It will nice for that to be the "main issue", rather than some extra work I'm having to do on top my initial issue.

Everything's a sort function

I had a bit of a mind blowing moment this week when I realized a lot of functions are really just fancy "sort" functions that compare info and output something based on the comparison.

That's all folks. Stay safe, hug your loved ones, and keep learning, even on the hard weeks.

Developer Diaries: Week 7 - Finding my zone and developing "clever" solutions

Brittany Joiner — Fri, 10 Sep 2021 18:34:52 +0000

Sending my post a bit early this week because tomorrow is an Elastic Shut It Down day (basically random vacation days we're given just because! it's awesome. Oh and we are hiring if you want to come work with me .)

Will be AFK tomorrow as I'm doing an orientation for a cat shelter I'm volunteering at, and I'm also officially changing my address on my license since my move! So let's get to it.

Working in bursts / finding my zone

I think one of the biggest revelations I had this week was that I can't easily turn "on" my focus. I can't decide if it's something I should lean in to, or try to fix, but I have very much found myself in a zone at certain times and I don't want to pull myself away.

Sometimes this zone hits me at like 7pm, when I get an idea for how to fix something, and I just want to click away until I knock it out.

But then I come to my desk the next morning and I just can't get my coffee to kick in fast enough. I'm unable to turn on that focus and actually work on something. Or I'll work on something for an hour, and then need a 30 minute break to walk around, have a snack, befriend my stray cat, or install a new doorbell.

It's like I'm working in bursts, rather than just sitting at my desk for 8 hours a day. And it feels a little weird, but I don't think it's ineffective because I've nearly completed all my tasks for this sprint that I thought would take me two weeks - I've done in less than one!

Is this normal for developers? I started to do some research and see what the internet said.

As a developer

I don't get paid to type
I don't get paid to write code
I do get paid to solve problems.

And solving problems works far better if I think before I do.

from Andreas on this StackExchange post

My first software manager said that the most you can get out of people is five hours of real work a day. She also said that programmers need to learn to tell when the most productive thing they can do is go look out the window.

from AnimalMuppet on YCombinator forums

Personally, I work every day. When I am tired and not productive, I work less. When I feel good, I work much. The minimum is usually 6 hours. Maximum is usually 12 -14 hours. At weekends, it happens it's just 2 hours a day.

from grobmeier on YCombinator forums

Turns out, what the most productive 10% of our users have in common is their ability to take effective breaks. Specifically, the most productive people work for 52 minutes at a time, then break for 17 minutes before getting back to it (similar to the Pomodoro Method—more on that here).

The employees with the highest productivity ratings, in fact, don't even work eight-hour days. Turns out, the secret to retaining the highest level of productivity over the span of a workday is not working longer—but working smarter with frequent breaks.

from the Muse

Also, when chatting with one of my fellow devs a couple weeks ago, he mentioned that he regularly gets up and walks around and takes breaks and that taking breaks is key.

So I guess we're not lazy and weird, our brains - just like batteries - need to be recharged after use :) And unlike our iPhones, we can't just go all day and recharge overnight.

I'm clever!!

I don't often brag, but I'm learning you have to celebrate your accomplishments. And there's a lot of days where you don't know what you're doing, and feel like you know nothing, but sometimes you discover you do know something and you solve a problem and that. needs. to. be. celebrated! 🎉

I had a moment like that this week. I was trying to figure out how to be overly prepared for an edge case that was unlikely to happen, but it bothered me what would happen if a user got to that state in the app. Essentially, a variable would not be shown, and there would just be a set of "" that showed up and it looked weird to me.

After a bit of thinking through it, I realized I could make those " only appear if the variable was defined by setting a quote variable and if the other variable was defined, then quote would be ", otherwise it would be nothing!

Here's the code if you're curious.

<EuiI18n
    token="pageTitle.search"
    default="Search results {quote}{searchBarTerm}{quote} | Elastic Support"
    values={{
    quote: this.props.searchBarTerm ? '"' : '',
    searchBarTerm: this.props.searchBarTerm,
    }}
>
    {(title: string) => <UseTitle title={title} />}
</EuiI18n>

I felt pretty smart about it, and my fellow (significantly more senior) frontend dev said....

So yeah, this pretty much made my week.

Meet my new cat friend!

Okay lastly, say hello to Artie (short for Artimus). They're a stray cat in my neighborhood that I'm trying to befriend, so I've named it and I leave food and water out for it. Trying to figure out how to help it out this weekend with the hurricane on it's way to southern Lousiana. Any ideas? :)

👋 See y'all next week!