DEV Community: Meks (they/them)

When Dragons Go Missing: A Tale of URL Parameter Parsing in Phoenix LiveView

Meks (they/them) — Tue, 08 Jul 2025 04:47:36 +0000

A debugging story about array parameters, pagination, and why choosing the right parsing function matters.

The Quest Begins

One day, Marci, an intrepid Elixir developer, was building an admin panel for a Monster Bestiary.

Everything was working smoothly until adventurers started reporting a bizarre bug: when they filtered by multiple monster types and tried to paginate through results, some of their selected filters mysteriously vanished.

Adventurers would select both "Dragons" and "Goblins" and when they clicked "Next Page" - poof! - suddenly only "Goblins" remained in their filters. The Dragons had vanished without a trace.

The Mysterious Disappearing Act

Here's what adventurers were experiencing:

Select "Dragons" and "Goblins" monster types
URL becomes: /admin/bestiary?monster_types[]=dragons&monster_types[]=goblins
Click "Next Page"
URL becomes: /admin/bestiary?monster_types[]=goblins&page=2
Only Goblin monsters shown on page 2

The "Dragons" filter was being dropped during pagination - completely unexpected behavior that left adventurers confused and frustrated.

Reproducing the Mystery

Marci knew the first step in any good debugging quest was to reproduce the problem reliably, so she wrote a test:

test "pagination preserves monster type filters when navigating between pages", %{
  conn: conn,
  bestiary: bestiary
} do
  # Create monsters for pagination testing
  create_monsters_for_pagination(bestiary, 10, :dragon)
  create_monsters_for_pagination(bestiary, 10, :goblin)
  create_monsters_for_pagination(bestiary, 5, :undead)

  # Start with Dragons and Goblins selected, per_page=5
  {:ok, view, _html} = live(conn, ~p"/admin/bestiary/#{bestiary}?per_page=5")

  # Filter to Dragons and Goblins only
  view
  |> element("#filter_form")
  |> render_change(%{filter: %{monster_types: ["dragons", "goblins"]}})

  # Should show 5 monsters (first page of Dragons + Goblins)
  assert_pagination_state(view, 5, "1-5 of 20")

  # Verify we have both Dragons and Goblins visible
  dragon_count = count_monsters_by_type(view, "Fire Drake")
  goblin_count = count_monsters_by_type(view, "Cave Goblin")
  assert dragon_count + goblin_count == 5

  # Test pagination through all pages
  for page <- 2..4 do
    # Go to next page
    view |> element("#pagination-next") |> render_click()

    # Should show next 5 monsters and maintain the same filters
    expected_range = "#{(page - 1) * 5 + 1}-#{min(page * 5, 20)} of 20"
    assert_pagination_state(view, 5, expected_range)

    # Verify we still have both Dragons and Goblins visible
    dragon_count = count_monsters_by_type(view, "Fire Drake")
    goblin_count = count_monsters_by_type(view, "Cave Goblin")
    assert dragon_count + goblin_count == 5

    # Verify the filter pills still show Dragons and Goblins as selected
    assert_monster_types_selected(view, ["dragons", "goblins"])
    assert_monster_types_not_selected(view, ["undead"])
  end
end

defp count_monsters_by_type(view, type_text) do
  render(view)
  |> Floki.find("[data-test-monster-log-block]")
  |> Enum.count(fn element ->
    Floki.text(element) =~ type_text
  end)
end

Marci's failing test captured what the adventurers were experiencing. The test would be her guide - as long as it failed, the mystery remained unsolved.

The Quest for Answers

Prepared with a reliable reproduction case, Marci began investigating. Her initial hunches led her down several false paths:

False Lead #1: Monster Filter Logic
Maybe the database query for filtering monsters was somehow broken? But testing showed that filtering worked as expected - it was only during pagination that monsters disappeared.

False Lead #2: Form Submission Issues
Perhaps the monster type selection form wasn't submitting array parameters correctly? But inspection of the form data showed it was submitting as intended: monster_types[]=dragons&monster_types[]=goblins.

False Lead #3: LiveView State Management
Could this be a complex state management issue where the LiveView was losing track of selected filters? But the state seemed fine - it was the URL parameters that were wrong.

The symptoms were particularly misleading:

✅ Single monster type filters worked
❌ Multiple monster type filters broke during pagination
✅ Pagination worked on pages without array filters

This made it seem like a complex interaction between the filtering system and pagination logic was causing the issue.

Tracking the Beast

Marci decided to trace what happens step-by-step when adventurers use pagination. The bug had to be somewhere in this flow:

When filters are working correctly:

Adventurer selects dragons & goblins
URL becomes: /admin/bestiary?monster_types[]=dragons&monster_types[]=goblins
Database query runs and returns both dragons and goblins
Page displays correctly with all monster types

Note: The URL doesn't show page=1&per_page=15 because those are default values that are omitted to keep the URLs clean.

When "Next Page" is clicked (where things go wrong):

Adventurer clicks "Next Page" button
Pagination component needs to build a new URL for page 2
- Expected URL: /admin/bestiary?monster_types[]=dragons&monster_types[]=goblins&page=2&per_page=15
- Actual URL: /admin/bestiary?monster_types[]=goblins&page=2&per_page=15
Dragons disappear from the URL completely!

The pagination component was supposed to preserve existing filters while adding page parameters. Marci traced the problem to the merge_url_params/2 function, which was responsible for combining the current URL with new pagination parameters:

defp merge_url_params(url, params) do
  uri = URI.parse(url)
  query = URI.decode_query(uri.query || "")
  new_query = Map.merge(query, params)
  %{uri | query: URI.encode_query(new_query)}
end

When Marci added logs to this function with the URL parameters from the failing test, she discovered the cause of the problem:

# Input URL query: 
url_query = "monster_types[]=dragons&monster_types[]=goblins&page=1&per_page=15"

# What URI.decode_query/3 returns:
URI.decode_query(url_query)
# => %{"monster_types[]" => "goblins", "page" => "1", "per_page" => "15"}

The dragons were being dropped! URI.decode_query/3 only keeps the last value for repeated keys. When it encountered multiple monster_types[] parameters, it threw away everything except the final "goblins" value.

The Root Cause: Choosing the Wrong Spell

The issue lay in the fundamental difference between two similar-looking Elixir functions:

URI.decode_query/3 - General Purpose URL Parsing:

URI.decode_query("monster_types[]=dragons&monster_types[]=goblins")
# Returns: %{"monster_types[]" => "goblins"}
# ❌ Only keeps the last value, loses all others!

Plug.Conn.Query.decode/3 - HTML Form Array Parsing:

Plug.Conn.Query.decode("monster_types[]=dragons&monster_types[]=goblins")
# Returns: %{"monster_types[]" => ["dragons", "goblins"]}
# ✅ Correctly handles arrays, preserves all values!

URI.decode_query/3 is designed for general URL parsing where duplicate keys are unusual. Plug.Conn.Query.decode/4 is specifically designed for HTML form submissions, which commonly use array parameters like monster_types[]. It's the same function Phoenix uses internally when processing form data.

Taming the Beast

The solution was elegant - just two lines of code; using the right spell for the job:

# Before:
defp merge_url_params(url, params) do
  uri = URI.parse(url)
  query = URI.decode_query(uri.query || "") # ❌
  new_query = Map.merge(query, params)
  %{uri | query: URI.encode_query(new_query)} # ❌
end

# After:
defp merge_url_params(url, params) do
  uri = URI.parse(url)
  query = Plug.Conn.Query.decode(uri.query || "")  # ✅ Decodes arrays
  new_query = Map.merge(query, params)
  %{uri | query: Plug.Conn.Query.encode(new_query)}  # ✅ Encodes arrays
end

With this fix in place, Marci ran her test and success! With the test passing, and manual verification in the browser confirming that dragons were no longer disappearing when adventurers paginated through their bestiary, Marci was confident in her fix.

✅ All 4 pages of monsters displayed correctly
✅ Both Dragons and Goblins remained visible throughout pagination
✅ Filter pills stayed consistently selected
✅ The mystical pagination range appeared as expected

The Adventurer's Journal

Before declaring victory, Marci verified the fix wouldn't break existing functionality. The beauty of the solution was that Plug.Conn.Query.decode/4 is actually a superset of URI.decode_query/3 - it handles everything the old function did, plus array parameters.

This meant:

All existing pagination with simple key-value parameters worked identically
The fix was backward compatible
The pagination component was now more robust for future array parameter use cases
All other tests continued to pass

Back in her workshop, Marci reflected on the adventure. What had started as a complex filtering mystery turned out to be a simple case of using the wrong parsing function. The disappearing dragons had led her down paths involving database queries and state management, but the real culprit was hiding in plain sight - a two-line URL parsing function.

She realized that her reproduction test had been invaluable, not just for confirming the bug existed, but as a compass throughout the debugging journey. Every hypothesis she tested could be immediately validated or rejected by running that single test.

Most importantly, she'd discovered that in the Elixir ecosystem, seemingly similar functions can have subtle but crucial differences. URI.decode_query/3 and Plug.Conn.Query.decode/4 looked almost identical, but one was designed for general URLs while the other understood HTML form conventions. Since her data came from HTML forms with array parameters, she needed the form-aware version.

The fix was just two lines of code, but the debugging journey highlighted the importance of understanding the subtle differences between similar-looking functions and tracing problems back to their actual source rather than chasing symptoms.

Sometimes the dragons aren't really missing - they're just hiding in the URL parser.

Happy coding! 🎉

Add ConfigCat to Next.js App

Meks (they/them) — Sat, 17 Jun 2023 21:38:07 +0000

I recently started helping my friend @jordan-t-romero with a NextJS and NodeJS project she is working on. This weekend we incorporated ConfigCat so that we can add feature flags to control what content is displayed in the different environments (local, staging, production, etc.)

Once we created an account and were logged in, we headed over to the React SDK Reference guide since Next.js is a framework for React.

Install Package

Since we use yarn instead of npm, we ran yard add configcat-react to add ConfigCat to our dependencies.

Import & Initialize a `ConfigCatProvider` with your SDK Key.

We wrapped our root component (_app.tsx in the Pages folder) with ConfigCatProvider to access ConfigCat features in child components.

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout/_layout'
import '../components/theme/styles.css'
import { ConfigCatProvider } from 'configcat-react'

export default function App({ Component, pageProps }: AppProps) {

  return (
    <ConfigCatProvider sdkKey="...your actual key">
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ConfigCatProvider>
  )
}

When you sign up with ConfigCat, if you go to the documentation, the sample code to paste in to add the provider will include your specific sdkKey.

Try it out

The first place we wanted to try it was in our NavBar. We eventually want to have a Login and Sign Up buttons, but they aren’t hooked up and we aren’t ready for real users on Production, so this was the ideal use case. In the ConfigCat app, we created a new feature to flag called signUpandLoginVisible and used the toggle to set it to on for testing purposes.

In components/Layout/Navbar.tsx we import useFeatureFlag and set a const for signUpandLoginVisible. The first arg for useFeatureFlag/2 is the name of the feature that is set in ConfigCat. The second arg is the default value to be used. Since the page loads slightly faster than the SDK Key can be read, it will use the default until it is connected with ConfigCat. Once we want to have these features shown, we will probably change the default to true. However it is so fast that we couldn’t tell the difference with our human eyes.

import NavComponent from './NavComponent'
import { useFeatureFlag } from 'configcat-react'

const Navbar = () => {
  const { value: signUpAndLoginVisible } = useFeatureFlag(
    'signUpAndLoginVisible',
    false,
  )

  return (
    <div>
      <NavComponent navText="Home" />
      <NavComponent navText="About" />
      <NavComponent navText="Contact" />
      {signUpAndLoginVisible ? <NavComponent navText="Sign Up" /> : null}
      {signUpAndLoginVisible ? <NavComponent navText="Login" /> : null}
    </div>
  )
}

export default Navbar

And just like that we have a Sign Up and Login button! Then we can go in to ConfigCat, swith the toggle to off, wait a few seconds (usually about 60 seconds or more for us) for the change to take effect, and no more Sign Up or Login buttons!

Use an Environmental Variable

The final piece we wanted to implement was moving the SDK Key out of the app logic and into an Environment Variable. This is for a couple of reasons. You want to protect private keys like this and make sure they aren’t visible on places like GitHub where your code lives. Even if it is a private repository, extra protection is always better. The second is that we are using Vercel for our deployments and it gives us the ability to use different variables for our various environments.

We already have a .gitignore file in our home directory that includes our .env file:

# local env files
.env*.local
.env

so in our .env file we can add where abc123 is your actual SDK Key:

NEXT_PUBLIC_CONFIGCAT_SDK_KEY=abc123

Next.js comes with built in support for environmental variables. Because the variables in the .env file are by default only available server side (Node.js in our case), we need to add the NEXT_PUBLIC_ prefix to the variable name. This makes the environment variable accessible in the browser by allowing Next.js to read the value at build time and it is delivered to the client as part of the js bundle. We access the variable by calling process.env.[variable] within the code base. Our _app.tsx now looks like this:

...
import { ConfigCatProvider } from 'configcat-react'

export default function App({ Component, pageProps }: AppProps) {
  const CONFIGCAT_KEY = process.env.NEXT_PUBLIC_CONFIGCAT_SDK_KEY

  return (
    <ConfigCatProvider sdkKey={CONFIGCAT_KEY}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ConfigCatProvider>
  )
}

However, we now get have a typescript error:

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2322)
ConfigCatProvider.d.ts(7, 5): The expected type comes from property 'sdkKey' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ConfigCatProvider> & Readonly<PropsWithChildren<ConfigCatProviderProps>>'
(property) sdkKey: string

Because the SDK Key now comes from our .env file, when the app first boots up, the value is undefined until it becomes loaded. The loading process happens very fast so it shouldn’t have much of an effect on users, but we can add in a loading state until the value is available.

export default function App({ Component, pageProps }: AppProps) {
  const CONFIGCAT_KEY = process.env.NEXT_PUBLIC_CONFIGCAT_SDK_KEY

  if (!CONFIGCAT_KEY) {
    return <div>Loading...</div>
  }

  return (
    <ConfigCatProvider sdkKey={CONFIGCAT_KEY}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
    </ConfigCatProvider>
  )
}

And now we are all set with ConfigCat with a proper environment variable and are ready to fully use our feature flags.

Happy Coding!

Mobile Responsive Table with TailwindCSS

Meks (they/them) — Mon, 16 Jan 2023 23:03:25 +0000

Recently I pair programmed with a Senior Software Engineer and part of the story we were working on was implementing the design for a list of users with their relevant data displayed. The design looked similar to this:

We also knew we wanted it to be mobile responsive even though we didn’t have any designs for that.

Accessibility Concerns

We first tried building it using a description list dl with dt which defines the terms/names and dd which describes each term/name. We actually got really close to the design using this, but then we used a screen reader to see what the experience would be like. It was at best cumbersome, and at worst unusable. The problem is that this is actually a list of tabular data; even if it doesn’t look like it based on the design and the lack of traditional headers. The way the screen reader goes through each definition is by reading the term then the description. This means that the information is split up so you can’t scroll through the list of emails, instead you have to go through all the elements of the description list to get to a specific email. When using table tags, the screen reader can read down each column of data which is a much better experience.

Building the Table

So we scrapped the description list and built it using the HTML table element and used sr-only to hide the headers from a visual user but including that important information for screen readers.

Once we had the table data we started styling each cell in td.

  <table>
    <thead class="sr-only">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Company</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-4 py-3 text-gray-900 bg-gray-200 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg">Frodo Baggins</td>
        <td class="px-4 py-3 text-gray-900 bg-gray-200 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg">fbaggins@mail.com</td>
        <td class="px-4 py-3 text-gray-900 bg-gray-200 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg">Fellowship of the Ring</td>
        <td class="px-4 py-3 text-gray-900 bg-gray-200 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg">Active</td>
      </tr>
    </tbody>
  </table>

The idea is that we want to reuse the classes for each cell, so we use the first and last modifiers to target rounding the border just for the top and bottom left for the first column, and the top and bottom right for the last column.

To add the tag-like styling to “Active“ we wrap it in a span:

<span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>

At this point we wanted to add more rows, but didn’t want to continue repeating reused classes. We were working in a Phoenix LiveView app so we created components. In the interest of focusing on the Tailwind here, I will pull the reused classes into the CSS file and use @apply.

CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

.td-class {
  @apply px-4 py-3 text-gray-900 bg-gray-200 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg
}

HTML:

<table class="">
  <thead class="sr-only">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Company</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="td-class">Frodo Baggins</td>
      <td class="td-class">fbaggins@mail.com</td>
      <td class="td-class">Fellowship of the Ring</td>
      <td class="td-class">
        <span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>
      </td>
    </tr>
  </tbody>
</table>

Now we can add more rows easily and start styling the table. We need to add some spacing between each of the rows which we can do using Tailwind’s Border spacing for tables. Let’s also add the default text size of small and wrap the table in a div so we can center it using flex.

<div class="flex items-center justify-center">
  <table class="text-sm border-separate border-spacing-y-2">
    <thead class="sr-only">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Company</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-class">Frodo Baggins</td>
        <td class="td-class">fbaggins@mail.com</td>
        <td class="td-class">Fellowship of the Ring</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>
        </td>
      </tr>

      <tr>
        <td class="td-class">Bilbo Baggins</td>
        <td class="td-class">bbaggins@mail.com</td>
        <td class="td-class">Thorin’s Fellowship</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

We still need to add the tags for when a user’s status is “Pending” or “Suspended“, so let’s add a few examples for that.

<div class="flex items-center justify-center">
  <table class="border-separate border-spacing-y-2 text-sm">
    <thead class="sr-only">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Company</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-class">Frodo Baggins</td>
        <td class="td-class">fbaggins@mail.com</td>
        <td class="td-class">Fellowship of the Ring</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>
        </td>
      </tr>

      <tr>
        <td class="td-class">Peregrin Took</td>
        <td class="td-class">pippin@mail.com</td>
        <td class="td-class">Fellowship of the Ring</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-green-600/50 px-4 py-px text-xs font-semibold uppercase text-green-900 antialiased">Active</span>
        </td>
      </tr>

      <tr>
        <td class="td-class">Bilbo Baggins</td>
        <td class="td-class">bbaggins@mail.com</td>
        <td class="td-class">Thorin’s Company</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-yellow-600/50 px-4 py-px text-xs font-semibold uppercase text-yellow-900 antialiased">Pending</span>
        </td>
      </tr>
      <tr>
        <td class="td-class suspended-text">Boromir of Gondor</td>
        <td class="td-class suspended-text">boromir@mail.com</td>
        <td class="td-class suspended-text">Fellowship of the Ring</td>
        <td class="td-class">
          <span class="float-right rounded-md bg-red-600/50 px-4 py-px text-xs font-semibold uppercase text-red-100 antialiased">Suspended</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.suspended-text {
  @apply text-gray-500
}

For the row with a status of “Suspended“ the text color is a lighter shade of gray. Since the current color comes from the CSS file as part of the td-class, we have to add another class so that when the CSS is compiled it will overwrite it with the suspended text color. CSS that is in the CSS file is compiled after the inline utility classes. The consequence of this is that if you try td-class text-gray-500, it will still render as text-gray-900. This is one reason why it’s highly recommended that you componetize your reused classes instead of using @apply.

Great! This looks very close to the design we were given to work with! But, if you resize it down to a mobile phone, it doesn’t look great and in fact some of the text is cut off.

Let's fix that! We’ll make it very simple and render each row in a more readable way.

Making the Table Mobile Responsive

To prevent the text from being cut off at the front, we add a breakpoint of sm:justify-center and some margin to the containing div.

<div class="flex items-center sm:justify-center ml-4 sm:ml-0">

We add class="tr-class" to each table row and make it a flex container with a column direction so that information inside each card stack on top of each other with some margin in between in each card.

.tr-class {
  @apply flex flex-col mb-4
}

It looks a little goofy because of the border rounding in our td-class that we implemented for the first iteration, we need to adjust the rounding for the mobile size.

.td-class {
  @apply px-4 py-3 bg-gray-200 first:rounded-t-lg last:rounded-b-lg
}

This looks much better! But if you resize it to tablet or desktop size, it stays as those cards instead of expanding to long rows. We need to add a breakpoint of sm:table-row to the tr-class. This adds the display table-row so it will behave like it did before the flex attributes were added.

.tr-class {
  @apply flex flex-col mb-4 sm:table-row
}

Now it expands out to the rows as before! For the last touch, we need to re-implement the rounding of the table edges, this time with breakpoints.

As an aside, this is why, when you are able, it is highly recommended that you build for your smallest screens first and then work your way up. It’s a bit trickier going the other way around, but we opted for that approach since we only had one set of designs.

We first remove the border radius from the top and bottom when it hits the sm breakpoint with sm:last:rounded-b-none sm:first:rounded-tl-lg. We then add our original radii.

.td-class {
  @apply px-4 py-3 bg-gray-200 first:rounded-t-lg last:rounded-b-lg sm:first:rounded-t-none sm:last:rounded-b-none sm:first:rounded-tl-lg sm:first:rounded-bl-lg sm:last:rounded-tr-lg sm:last:rounded-br-lg
}

And that’s it! A screen reader friendly and responsive list of data. To play around with the styling and see the final state of the code, you can check out this Tailwind Play.

Resources

Tailwind Components
Tailwind Docs

Early Careerists at ElixirConf 2022

Meks (they/them) — Wed, 14 Sep 2022 21:48:44 +0000

I have now attended two Elixir conferences, the Big Elixir and most recently ElixirConf. But this time, I went as a speaker! That was quite the adventure; check out Nikki’s post to read more about our experience and what we presented. Our choice of topic was inspired by our own experiences of being junior developers at NewAperio and learning Elixir on the job. In order for the Elixir community to grow, we need more resources and opportunities for people new to both Elixir and programming to learn and work. This means that companies that work in Elixir need to invest in not only onboarding mid and senior developers, but also in the training of juniors. Happily NewAperio is doing its part to strengthen the ecosystem.

I’m excited to say that there is a growing interest in supporting juniors and this was reflected in many talks at ElixirConf. It was also evident in the conversations that Nikki and I were a part of before and after our presentation. During one of our conversations, another conference attendee mentioned that they preferred the term “early careerist” over “junior.” The term ”junior” can carry a lot of baggage with regards to perceived experience levels. I really liked their explanation and so will try to incorporate “early careerist” into my own vocabulary.

The Talks and The Conversations

De Wet Blomerus: “Onboarding New Elixir Members”

De Wet (pronounced “the Vet”) Blomerus spoke on “Onboarding New Elixir Members”. We had the opportunity to speak with him the night before our talk at the speaker dinner. This was an enlightening discussion in which De Wet realized his talk was geared towards mid and later career engineers. Since he spoke immediately before us, he invited people to stay after to learn more about the early career experience. His talk had many overlaps with ours and showed that at all levels, the approach to learning and teaching Elixir can be very similar. During our conversation, one of the topics that stood out was the question of documentation. As an early careerist, when you need to learn something new, do you go to the docs, a blog, or a video? Nikki tended to reach for video explanations and me to blogs. This is because even though the documentation is excellent for experienced developers, it can be overwhelming with too much advanced vocabulary to learn for someone relatively new to programming. Finding additional sources and getting help from others can help early careerists digest what they actually need to know and narrow down what is relevant at the moment.

Brooklin Myers: “Using LiveBook to Teach Elixir”

Brooklin Myers is the instructor at DockYard Academy and his talk “Using Livebook to Teach Elixir” focused on how he uses Livebook to help early careerists learn Elixir, Phoenix, and LiveView. Being an early careerist, I am very aware of how easy it is to become overwhelmed with information. Brooklin shared that his approach to alleviate that problem for students enrolled in the Academy has been through a Hidden Cell library that he built using Kino Smart Cells to selectively hide information. Nikki and I really enjoyed his talk and were able to meet him in person at Elixir’s 10th anniversary party. His excitement for developing a system focused on teaching early careerists was palpable. DockYard’s goal is to have cohorts of 10 students participating in a 3-month course with a total of 3 cohorts per year. That is potentially 30 new devs annually! To see someone spearheading a movement to make Elixir more accessible and beginner friendly is something we as a community need and I can’t wait to see how that unfolds.

Theo Harris: “Wordle: Elixir Flavour”

Theo Harris is a “Junior Consultant“ at Alembic and he gave a talk entitled “Wordle: Elixir Flavour”. We were unfortunately unable to attend, but it is high on my priority list to watch once the recordings are out! His recommendation for helping a beginner learn a new language matched the one in our talk: building out a project! He built out a version of Wordle during his onboarding at Alembic. We found Theo at the conference and discussed some of our similarities and differences in our onboarding process. What stood out to me is the desire for more beginner-friendly content at Elixir tech conferences. We enjoy hearing about all the exciting projects and libraries that advanced Elixirists are working on and using, but we also want to hear from newbies like us and see content for them.

Reasons to include talks by and for early careerists

When we see presentations that discuss concepts relevant to what we work on regularly or that are at a level we understand, the value of attending the conference increases. There is great value in seeing what is out there and what people with more experience are working on; it gives a glimpse into what our futures with Elixir might look like. But a good balance of the types of talks is important. With beginner talks we gain knowledge that we can immediately start incorporating in our day-to-day workflow.
Nikki and I connected with a number of early careerists at the conference both in person and virtually as a result of our talk. Being a speaker opens up the doors for important conversations and connnections. This really helps in fostering community. Before this conference, I didn’t personally know any other early Elixir careerists besides myself and Nikki. Now I have a new network of professionals that I will be able to grow with.
By including a spread of talks at different levels, it makes the conference more inclusive and welcoming for developers of all levels. As the community continues to grow, it is important to keep this in mind as we encourage early career professionals to join us.

If you are an early careerist in Elixir, I encourage you to consider presenting at future conferences! Your knowledge and experience is valuable and there are many of us that want to hear from you. Mike Zornek wrote a great recap of attending ElixirConf, and in his closing remarks mentions the desire to start giving back and sharing his own knowledge. In his early years with Elixir he wasn’t inclined to present due to “imposter syndrome – as an Elixir newbie, who am I to tell these people anything“. This hesitancy felt very familiar to me. Nikki and I would not have submitted the talk proposal if our boss had not encouraged us to do so. We didn’t believe that what we have to share is valuable, but our team showed us that it was.

Without our boss, Logan Leger's support to practice, rehearse, and perfect our talk on company time, we wouldn’t have had such a delightful and successful experience. I would like to see more early careerists sharing their knowledge and having an experience like what Nikki and I had; having company support is an incredibly empowering way to make that happen.

Originally posted by NewAperio on 2022-09-13.

From Flatiron Grad to Job Seeker to Junior Developer

Meks (they/them) — Sat, 29 May 2021 03:01:19 +0000

Hello all! I have now been employed as a Junior Developer for a full month. These first four weeks have flown by and I have learned such vast quantities of information that much of the knowledge is leaking out of my ears. Fortunately I have Google and a great team to help me out when I get stuck. As I wrap up my first 20 days, I remember when I was about to graduate boot camp I wished there was some sort of guide on how to job search 'the right way'. Turns out, there isn't really one right way that fits everyone, what's important is figuring out what's 'the right way FOR YOU'. This post is to share my journey of discovering what that right way was for me. May this help others considering a career switch, those in the midst of seeking their first dev position, and people supporting career transitioners.

Back in March of 2020, I began Flatiron's part-time program for full-stack software engineering. I graduated on time as expected in December of 2020. Once you graduate with Flatiron, you are assigned a Career Coach who helps you prepare your resume, LinkedIn profile, general online presence, practice for the behavioral and cultural interviews and provide guidance while you are job searching. Upon graduating (ie, the day you pass your exam for your final project) you have 60 days to declare your official Job Search Start Date (JSSD) and once your JSSD begins if you don't land a job in 180 days you may be eligible to receive your tuition back. To be eligible though you have put in a good faith effort to your job search, make a minimum of 5 GitHub commits per week, publish one blog post per week, connect with 8 unique individuals to grow and maintain your network, and record in the Flatiron tracker that you completed all the requirements each week. (According to the career services website though, it looks like the money-back program is going away.)

The reason Flatiron requires/recommends doing the Github commits, networking, and blog posts is that after helping place thousands of graduates, this is the general formula that they've discovered that helps most people find that first engineering position. It doesn't ever and always work for everyone, but it's a really good base point.

There are pages and pages of resources and people offering advice on what you should be doing to have a successful job search. Honestly, I found it overwhelming and thought I had to do everything. So I was trying to add features to my final project, take deep dives into React, create a nice portfolio page, learn RSpec and Jest, practice algorithms, and study computer science concepts and data structures. And the other half of the time I was trying to meet as many people as I could and make connections hoping to find that person who could introduce me to the right person that might lead to an opportunity. I was very scattered and felt stretched, sort of thin, like butter scraped over too much bread. (Yes, much like Bilbo Baggins.)

I was doing all that, and as the rejections rolled in, I still felt like I wasn't doing enough. Turns out that stretched-out thin feeling, was because I was doing it the 'wrong way for me'. I'm an introvert and I feel deeply when things go well and when they go poorly, so every time I met with a person and put myself out there, that person took a little piece of me with them and I was at the end of the day not feeling like myself and unmotivated. My career coach, Insa (a phenomenal human being if you ever get to work with her do it!) helped me realize this and we came up with a game plan.

We really started focusing on my 'vertical'. I had heard of other job seekers doing this, and for many of them, it meant using their prior experience to their advantage. For example if they had a finance background, they exclusively focused on fintech companies and put their efforts there. A friend of mine wanted to be a front-end React developer so she took deep dives into studying, practicing, and building apps with it. As such, she didn't need much algo practice because for most of her technical exams she had to build features in React (she got the job by the way :D ).

We took what was important in a career for me and turned that into my vertical.

My Vertical Stack:

Team/Company size: I wanted to be a part of a small team of engineers that I could connect with on a personal level and care about each of them as individuals.
Mission: Having a connection with the company's purpose, for me that could be a consultancy that worked on various projects supporting different kinds of communities, or a company with one product solving an interesting issue.
Learning and Growth: I have much to learn as a developer and I wanted to be in a place where my team would be supportive of me as I learn, grow, and struggle. Then I wanted that kind of attitude toward learning and growth to continue throughout my career within the company. I was willing to learn languages and frameworks on the job if it meant that I would be in a place that fostered such growth.
Inclusivity: I was seeking a place with a diverse group of individuals that valued the uniqueness that each person has to bring to the table. I believe that diverse teams lead to new, innovative, and inclusive ideas and I wanted to be a part of a team that embodied it.
Fully-Remote: I wanted the flexibility to live where I want and move when I want while also not having to leave my current location as I start on my developer journey.

Once I had this vision, I was much more selective about my applications. I stopped sending automative applications on linkedIn and instead put extensive effort into a cover letter and resume for each individual job opening that I was excited about.

I narrowed the focus of my daily coding efforts. I put away the leetcode grinding of algos, because I was passing or getting a callback <25% of the time after completing a HackerRank or other algo tailored code challenge. I started co-writing a blog series with a really good coding buddy of mine so she could work on React and I could work on Rails. I challenged myself to add a follower/following relationship to my final project. When I found a company I was especially excited about, I did a crash course in Elixir and Phoenix and followed multiple tutorials, blogs, a Udemy course, and built a few small projects. I focused on the process of learning, so even if I weren't hired for that role, I was still polishing valuable skills in return for my efforts. Since I had become much more selective about the roles I applied to, I had the time to invest in this kind of knowledge.

I stopped contacting people simply for the sake of fulfilling my weekly quota, and sought out people that I wanted to connect with. Because of this change I met some incredible tech adjacent people and developers who are a part of the queer community. They reminded me about why I was excited about this field in the first place, and even though I was still tired at the end of the day, I felt more like myself.

And speaking of feeling more like myself, I really started prioritizing some self care which meant more time with friends, taking long walks with my dog, making sure I did my daily yoga and meditation practice, and a little bit of spirituality. My career coach suggested I make a shrine to my dream job. It was to create a space for me to feel a healthy flow of energy and really ground myself. Much of the job search was outside of my control and that was hard for me. By building a meditation station where I could put good vibes into the universe and "Let the universe flow" as my career coach described it, I was able to build up more resiliency to the rejections.

**For context I applied the above changes to the last three to four weeks of my job search.

Ironically I was offered a job when I was most comfortable with the fact that I was job seeking. I had finally come to peace with the fact that breaking into a new field can be more challenging and emotionally tolling than bootcamp. Even though I didn't know when the stars would align for me, I believed that I was qualified, was capable of the career I was pursuing, and that it would happen. One evening instead of starting another job application, I decided to walk my dog and for an hour we just toured around the docks bothering frogs and catching pokemon. When we got back, an email was waiting for me asking me to schedule a time to discuss an offer. The following week it felt like I was holding my breath for fear that if I breathed too loud this dream job of mine would slip through my fingers.

Part of what makes the job search so difficult is that even if you do everything correctly you still might not get an offer and it may have nothing to do with you as a developer or a person. For legal reasons, you might not even be informed that is the case when you receive that rejection notice (or are indefinitely ghosted). For me I had a lot of luck, right circumstances and hard work align to get to the point that I had a job offer. I was lucky to see the job announcement in a Women in Tech slack channel (I checked multiple tech channels daily to make sure I didn't miss any announcements). I was lucky the very busy founder of the company responded to my cold email expressing my interest in the job (I put in the time to research both him and the company in an effort to make a personal connection with him).

Once luck got me in the door I put a tremendous amount of effort into every step of their interview process. I practiced for the technical interview, and reflected upon it by writing Sort a string using a custom alphabet in javascript and in it acknowledged a mistake I made during the live code challenge. Because I knew they primarily work in Elixir and Phoenix I then studied enough to reproduce the code challenge in Elixir and wrote another post which I sent to my interviewer. I followed different team members on twitter and reached out on LinkedIn while waiting in between interview steps.

It was a lot of effort, but even if I hadn't been offered the job, I was still reaping what I sowed. I made connections with people I admired as human beings and as developers. I started learning a new language that I really enjoyed. It was the job I had built my shrine to; it hit all the points in my vertical stack. I don't know which of my efforts were the most influential in their decision to extend an offer, nor do I know how much of it was luck in the universe on my side, but I imagine every act on my part had an impact in some way.

Now a month after working with my new team, while I have much to be thankful for and hold a lot of gratitude to the people who helped me get here, I'm especially grateful to my past self-- for being patient, taking the time to envision what it was I truly wanted in this new career, and seeking that unicorn job for me.

I have seen many folx who land their first job as software engineers post their stats for how many applications, rejections, interviews, and final yeses they get. I didn't keep track too closely of actual job applications and rejections. But here are the stats I did keep track of that were important to me and that I believe provide a more rounded view of my job search experience:

Job Search Start Date: 54 days after graduation
Searched for 63 days (ie 9 weeks)
Applied to < 100 jobs (maybe even less than 50, not really sure)
Confirmed rejections: 20ish
Number of people I met virtually and who helped me along the way: 31
Hours spent learning, coding, or doing algos: 198 hours, average 22 hrs/week
Hours spent on the job search including networking, applying, prep, and interviews: 172 hours, average 19 hrs/week
Blogs published: 9
Github commits: 648 (ave 72 commits/week)
Career Coach Sessions: 27
Times cried: 14
Yoga Sessions: 61
Walk dog: 51x
Books read for fun: 7 (Highly recommend 'Girl, Woman, Other' by Bernardine Evaristo and 'Akata Witch' by Nnedi Okorafor)
Virtual dates with friends: 9
Number of distinct interview processes: 7
Offers: 2

I share these numbers for a few reasons. When starting bootcamp I would have been better prepared for graduation if I had known more about the efforts required for the job search. And to that effect I hope people considering making a career switch to become a developer can see what might be necessary to 'break into tech'. This is for developers going through the job search, here's another anecdote to help with morale as you do what I just did. And for our friends and family-- this is hard. Without you, people like me could not make this transition. So thank you for being rocks for us to stand upon.

I sign off with a reminder inspired by Peter Pan; we can fly if we have faith in ourselves, if we trust that things will work out the way they are meant to be, and if we create the perfect pixie dust for ourselves with hard work.

Happy coding!

Runtime Complexity Cheatsheet

Meks (they/them) — Thu, 15 Apr 2021 22:26:31 +0000

Here is a cheat sheet for referencing to help determine the runtime of an algorithm.

Notes on Runtimes:
Runtime refers to the performance of an algorithm in terms of processing power.
Constant Time (1) - No matter how many elements we are working with, the algorithm/operation will always take the same amount of time. This the holy grail of algorithms.
Logarithmic Time (log(n)) - You have this if doubling the number of elements you are iterating over doesn’t double the amount of work. It's pretty safe to assume that searching operations are log(n).
Linear Time (n) - Iterating through all elements in a collection of data. If you see a for loop spanning from ‘0’ to ‘array.length’, you probably have ‘n’ or linear runtime. Most common for the ‘simpler’ algorithm problems like reversing a string or counting the number of vowels in a string.
Quasilinear Time (n * log(n)) - You have this if doubling the number of elements you are iterating over doesn’t double the amount of work. You can often assume that any sorting operation is n*log(n).
Quadratic Time (n ^ 2) - Every element in a collection has to be compared to every other element. A trick to help remember this is to think of ‘The handshake problem’. Imagine there is a group of people in a room and a new person walks into it. That person has to be introduced to all other people in the room and shake each person's hand. Everyone in the room has already shaken everyone other person's hand. So every element is interacting with all the other elements.
Exponential Time (2 ^ n) - If you add a single element to a collection, the processing power required doubles. Realistically you never want to propose this as a real solution because it is just too awful to compute.

Big ‘O’ Notation
As software engineers, we can often think of Big 'O' notation as the runtime of the algorithm:

O(n) => linear
O(1) => Constant
O(n^2) => Quadratic

Identifying Runtime Complexity - Tips and Tricks

Note: These are not rules, they are generalizations. Unfortunately, there is no list to memorize that will tell you, 'these algorithms are always this'. It depends on each independent algorithm. So it really comes down to practicing and writing different algorithms and learning about their corresponding runtimes.

Iterating with a simple for loop through a single collection, for example reversing a string. => Probably O(n)
Iterating through half a collection. => Still O(n). There are no constants in runtime since these become meaningless as data sets become infinitely larger.
Iterating through two different collections with separate for loops. For example, you want to reverse two strings both in the same function in two different for loops. You want to consider both n and m because one may be huge and the other much smaller, so a new variable is introduced. => O(n + m)
Two nested for loops iterating over the same collection. => O(n^2)
Two nested for loops iterating over different collections => O(n*m) [very similar to n^2]
Sorting => O(n*log(n))
Searching a sorted array => O(log(n))

Interview cake and leet code are some great resources for getting practice in with algorithms while learning about their runtimes.

Happy coding!

Sort a String using a Custom Alphabet in Elixir

Meks (they/them) — Tue, 06 Apr 2021 17:07:54 +0000

Why a custom sort with Elixir

Last week I wrote a blog on sorting the characters in a string using a custom alphabet in Javascript. This was the challenge for a live code assessment for an interview. The company I interviewed with primarily works in Elixir and after hearing my interviewer talk about it with such excitement, I decided to try solving the challenge with this programming language! I was successful in sorting a string with the regular alphabet but got very stuck on using a custom alphabet. I sent my solution to part 1 to the interviewer and when asked he shared with me his solution for using the custom sort. Since receiving it I've been a little obsessive in trying to understand exactly how every piece of it works.

This is my in-depth explanation for how to use Elixir to sort a string with a custom alphabet! We'll cover setting up for the problem, solving the problem with the regular alphabet and then a custom one, refactoring for readability and following Elixir convention, and the runtime and space complexity for the solution. And through all that, we will touch on Elixir modules, sigils, module functions, module attributes, default arguments, anonymous functions, the capture operator, and the pipe operator.

Set up

If you want to do this yourself and you're just starting out with Elixir, you can use Replit with Elixir to run the code or if you've installed Elixir on your machine you can make an alphabetize.ex file. To run the file you would cd into the directory containing the file and run $ elixir alphabetize.ex and it will return the results of any IO.puts statements in the file.

Elixir Modules

As a functional programming language, Elixir uses modules to group functions together such as the String or Enum module. In order to create our own modules in Elixir, we use the defmodule macro and we use the def macro to define functions in that module. So in our alphabetize.ex file we can add:

defmodule Alphabetize do 

end

This makes a module where we can write functions and add attributes. The goal is to be able to call a function on Alphabetize that we can pass a string and optionally a custom alphabet into it and it will return the string sorted accordingly. To test that in the file we could use a puts statement to see the return value.

defmodule Alphabetize do 

end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Sigils

Here we are testing that it will work with a custom alphabet and the regular alphabet. I've set the variable alphabet to pass into the alphabetize method (which is not yet written). The alphabet needs to be accessible as a list where we can find the index of any given letter. Elixir uses sigils, which are one of the mechanisms provided by the language for working with textual representations. Sigils start with the tilde (~) character which is followed by a letter identifying the sigil and then a parenthesis. The ~w sigil is used to generate lists of words (words are just regular strings), or in our case, a list of letters. Inside the ~w sigil, words(letters) are separated by whitespace.

You can verify this produces the expected result by opening an interactive elixir shell with the command $ iex in your terminal:

// ♥ > iex
Erlang/OTP 23 [erts-11.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]

Interactive Elixir (1.11.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
["n", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "x", "l", "m", "a", "o",
 "p", "q", "r", "s", "t", "u", "v", "w", "y", "z"]

To exit ctrl + c twice.

We use the sigil because it is much quicker to have Elixir convert the letters into a list with all those double quotes as opposed to writing it all out manually. Huzzah! A chance to save my fingers some keystrokes!

Next, let's start writing the alphabetize method which takes in a string and an alphabet:

defmodule Alphabetize do 

   def alphabetize(string, alphabet) do 

   end

end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Default Arguments

We need to make sure that if a custom alphabet is not passed in as the second argument, the method can still run and sort according to the regular alphabet. Named functions in Elixir support default arguments indicated by using two backward slashes (\). What follows the backslashes will be what the function uses as a default argument if another is not specified when the function is invoked.

Module Attributes

To make the default_alphabet we can take advantage of using the word sigil as we did above when writing our custom alphabet. This time though, because we are inside the Alphabetize module, we will create a module attribute to hold the list which is indicated with an '@' symbol. Elixir developers often use module attributes when they wish to make a value more visible or reusable. If we were to forgo the '@' and try setting it the same way we did outside the module, Elixir will instead of making a variable, it will try to invoke default_alphabet as a function.

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do

  end

end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

The first puts statement will use the default alphabet which is the regular English alphabet, and the second puts statement will use the custom alphabet that is passed in as a second argument.

Provided Module Functions: split, sort, join

Next, we want our method to take the string, split it into a list of the characters, sort it, and then join the list back into a string. The String module has a function split/3 that allows us to specify the pattern in which we want our string split. The first argument is the string, the second is the pattern. We want to use empty quotes ("") to indicate it should be split on every character. In the third argument, we can pass in options such as trim which if set to the boolean true will remove all whitespace in a string. We can test this out in the interactive terminal:

iex
Erlang/OTP 23 [erts-11.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]

Interactive Elixir (1.11.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> string = "elixir"
"elixir"
iex(2)> String.split(string, "")       
["", "e", "l", "i", "x", "i", "r", ""]
iex(3)> String.split(string, "", trim: true)
["e", "l", "i", "x", "i", "r"]
iex(4)>

Now in our alphabetize method we can save the list of characters in a variable.

  def alphabetize(string, alphabet \\ @default_alphabet) do
    list = String.split(string, "", trim: true)
  end

To sort the list we will use the Enum Module which provides a set of algorithms to work with enumerables. In Elixir, an enumerable is any data type that implements the Enumerable protocol. Lists ([1, 2, 3]), Maps (%{foo: 1, bar: 2}) and Ranges (1..3) are common data types used as enumerables. We can use any of the algorithms provided by the Enum Module on our list. If we were only concerned with sorting by the regular alphabet, we could use the sort/1 function which sorts according to Erlang's term ordering. Then we could use the Enum join/2 function which joins the given enumerable into a string using joiner as a separator. If there is no joiner provided as an argument, it defaults to an empty string. Which would give us exactly what we want.

iex(1)> string = "elixir"
"elixir"
iex(2)> list = String.split(string, "", trim: true)
["e", "l", "i", "x", "i", "r"]
iex(3)> list
["e", "l", "i", "x", "i", "r"]
iex(4)> sorted = Enum.sort(list)
["e", "i", "i", "l", "r", "x"]
iex(5)> Enum.join(sorted)
"eiilrx"

So if we were to write this out in our Alphabetize Module, we can solve the first part of the sorting problem using the regular alphabet which is how Erlang sorts letters.

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    list = String.split(string, "", trim: true)
    sorted = Enum.sort(list)
    Enum.join(sorted)
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx

Build the custom sort

In order to sort with a different function, we can use the sort/2 method which sorts the enumerable (our list of letters) by a given function which is passed in as the second argument. Sort/2 uses the merge sort algorithm and it compares two arguments and it returns true if the first argument precedes or is in the same place as the second argument. If it returns true, it will place that first argument preceding the second argument in the returned list. So we know that we need to write a function, that will get the index of where the given letter is in the alphabet, the index of the next letter we are comparing it to, and determine true or false if the first letter proceeds the second.

Pseudocode

for every pair of letters we need to sort
given letters a, b from string and given an alphabet
get the index of a in the alphabet
get the index of b in alphabet
true or false is a < b ?

Breaking it up this way, we can see that we need the index of an enumerable, and the find_index/2 method does just that. The first argument is the enumerable (list, the alphabet in our case) and the second is an anonymous function that tells it which element to find the index of (in our case which letter).

iex(1)> alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
["n", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "x", "l", "m", "a", "o",
 "p", "q", "r", "s", "t", "u", "v", "w", "y", "z"]
iex(2)> Enum.find_index(alphabet, fn x -> x == "a" end)
14

We can then compare the indices of two different letters and return true if the first letter has a lower index and false if it is higher by using the less-than comparison operator.

iex>  Enum.find_index(alphabet, fn x -> x == "a" end) < Enum.find_index(alphabet, fn x -> x == "e" end)       
false
iex>  Enum.find_index(alphabet, fn x -> x == "a" end) < Enum.find_index(alphabet, fn x -> x == "r" end)
true

Now that we have a comparison that returns true or false using the indices of the alphabet, we can use that in the sort/2 method. Using sort/2 we can write an anonymous function with the 'fn' and 'end' keywords and an '->' to separate the parameters and the function body to indicate how we want the enumerable sorted. For example:

iex> Enum.sort([1, 2, 3], fn (a, b) -> a >= b end)
[3, 2, 1]

We can test out how this logic might work with our custom alphabet in the interactive shell again:

iex(1)> alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
["n", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "x", "l", "m", "a", "o",
 "p", "q", "r", "s", "t", "u", "v", "w", "y", "z"]
iex(2)> list = String.split("elixir", "", trim: true)
["e", "l", "i", "x", "i", "r"]
iex(3)> sorted = Enum.sort(list, 
...(3)>   fn (a, b) -> 
...(3)>     Enum.find_index(alphabet, fn x -> x == a end) < Enum.find_index(alphabet, fn x -> x == b end) 
...(3)>    end)
["e", "i", "i", "x", "l", "r"]

Woohoo! It is successfully sorting according to the customized alphabet where "x" appears before "l". Let's implement this in our alphabetize method.

Initial Solution

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    list = String.split(string, "", trim: true)
    sorted = Enum.sort(list, 
      fn (a, b) -> 
        Enum.find_index(alphabet, fn x -> x == a end) < Enum.find_index(alphabet, fn x -> x == b end) 
      end)
    Enum.join(sorted)
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Now if you run in your terminal $ elixir alphabetize.ex it returns the IO.puts results of

aeeiillnrrx
neeiixllarr

which is what we expect for the regular and the custom alphabets!

REFACTOR

Now that it works, let's clean up our code to be more readable and to better follow some Elixir patterns.

Write a new function

First, to make the alphabetize method easier to read, we can extract the comparisons of the indices to their own function which we'll call compare_alpha?. Since this function will return true or false for the comparison of the indices we can follow the Elixir convention to use a '?' for methods that return a boolean. This does not change anything functionally about the method, it's just an easy cue for developers that a boolean will be returned. Into compare_alpha? we will pass the two representations of the letters in the sort function and the custom or default alphabet.

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    list = String.split(string, "", trim: true)
    sorted = Enum.sort(list, 
      fn (a, b) -> 
        compare_alpha?(a, b, alphabet)
      end)
    Enum.join(sorted)
  end

  defp compare_alpha?(a, b, alphabet) do
    Enum.find_index(alphabet, fn x -> x == a end) < Enum.find_index(alphabet, fn x -> x == b end)
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Note that the compare_alpha? method is defined with 'defp' which indicates that it is a private method and not accessible outside of the Alphabetize Module.

Capture Operator

The next way we can clean this up is to take advantage of Elixir's shorthand for anonymous functions which is called the capture operator. One of the uses for the capture operator is to partially apply functions, where &1, &2, and so on can be used as value placeholders. For example:

iex(1)> double = &(&1 * 2)
#Function<44.79398840/1 in :erl_eval.expr/5>
iex(2)> double.(2)
4
iex(3)> dbl = fn x -> x * 2 end
#Function<44.79398840/1 in :erl_eval.expr/5>
iex(4)> dbl.(2)
4

So &(&1 * 2) and fn x -> x * 2 end produce the same results. In the example of our Enum.index_of() method, we can chang: Enum.find_index(alphabet, fn x -> x == a end)
to Enum.find_index(alphabet, &(&1 == a)).

Inside of sort where we call, compare_alpha? it is currently using the anonymous function: fn (a, b) -> compare_alpha?(a, b, alphabet) end) but we can change this to use the capture operator &(compare_alpha?(&1, &2, alphabet)).

Putting all of it together our Alphabetize Module now looks like this:

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    list = String.split(string, "", trim: true)
    sorted = Enum.sort(list, &(compare_alpha?(&1, &2, alphabet)))
    Enum.join(sorted)
  end

  defp compare_alpha?(a, b, alphabet) do
    Enum.find_index(alphabet, &(&1 == a)) < Enum.find_index(alphabet, &(&1 == b))
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Pipe Operator

Another refactor we can think about is our use of setting the result of each change to the string to a variable. We currently set the result of split, sort, and join to variables and pass that variable to the next operation. We are doing this because we can't reference some type of object in the way we might with an object-oriented programming language. In addition, all data structures in Elixir are immutable (they cannot be changed, you can only every make copies that contain the additional or changed information). We need a way to keep passing copies of the changing string. One way we could change this would be to nest the results inside of each other like so:

  def alphabetize(string, alphabet \\ @default_alphabet) do
    Enum.join(Enum.sort(String.split(string, "", trim: true), &(compare_alpha?(&1, &2, alphabet))))
  end

This in my opinion is even harder to understand than setting each result to a new variable. But what you can see here, is that going from inside to outside, the result is always the first argument of the next function that acts upon it. This is such a common pattern in Elixir because of its nature as a functional programming language, that it has its own operator, the pipe operator. This operator introduces the expression on the left-hand side as the first argument to the function call on the right-hand side. The |> operator is mostly useful when there is a desire to execute a series of operations resembling a pipeline such as what we will be trying to accomplish here.

string |> String.split("") is the same as String.split(string, "") because the pipe operator is passing the string as the first argument to the split(). If we apply this to the Alphabetize Module we can keep passing along the result of each function, and do so easily with repeated use of the pipe operator.

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    string |> String.split("") |> Enum.sort(&(compare_alpha?(&1, &2, alphabet))) |> Enum.join()
  end

  defp compare_alpha?(a, b, alphabet) do
    Enum.find_index(alphabet, &(&1 == a)) < Enum.find_index(alphabet, &(&1 == b))
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

To make it easier to read, we can then add in new lines to make it look like a true pipeline.

Final Solution

defmodule Alphabetize do

  @default_alphabet ~w(a b c d e f g h i j k l m n o p q r s t u v w x y z)

  def alphabetize(string, alphabet \\ @default_alphabet) do
    string
    |> String.split("")
    |> Enum.sort(&compare_alpha?(&1, &2, alphabet))
    |> Enum.join()
  end

  defp compare_alpha?(a, b, alphabet) do
    Enum.find_index(alphabet, &(&1 == a)) < Enum.find_index(alphabet, &(&1 == b))
  end
end

IO.puts Alphabetize.alphabetize("learnelixir") # aeeiillnrrx
alphabet = ~w(n b c d e f g h i j k x l m a o p q r s t u v w y z)
IO.puts Alphabetize.alphabetize("learnelixir", alphabet) # neeiixllarr

Runtime and Space Complexity

To analyze the runtime of sorting a string with a custom alphabet we need to look at the operation that has the slowest runtime. The sigil, splitting the string, and joining the list back into a string would each have O(n) or linear runtime because, for each element, you have to perform one operation. In the case of finding the index, the best case is that the element is the first one that you look at which would be O(1) but the worst case is that it would be the last element in the alphabet meaning the program had to check each element to find the one it was looking for which would be O(n). We want to always use the worst-case scenario when determining run time so finding the index is also linear runtime.

Enum.sort/2 is a little more complex. The documentation says that it uses a merge sort algorithm to do its work.

Merge Sort is a divide and conquer algorithm. It works by recursively breaking down a problem into two or more sub-problems of the same or related type, until these become simple enough to be solved directly. The solutions to the sub-problems are then combined to give a solution to the original problem. Here is a visual representation of how it would sort a list of letters alphabetically:

Since the list is divided into two halves at each stage which is an O(logn) runtime, and then you have to make comparisons at each stage which is O(n) the resulting runtime is O(nlogn). So it is faster than O(n^2) but slower than O(n) and this is called a quasilinear runtime which is very common for sorting algorithms. Each time the number of elements to be sorted, the amount of work that has to be done doesn't quite double.

When calculating the runtime of the sort O(nlogn) and the individual O(n) for splitting and joining and finding the index, these are added to the runtime so it would be O(4nlogn) depending on how you count it, be we can drop the coefficient since it doesn't matter as n gets infinitely large.

The space complexity for Merge Sort is O(n) because for every recursive call two lists are created for merging which takes up O(n) space and deleted once the merged array has been made and before the next lists are created in the next recursive call.

Runtime Complexity: O(nlogn)
Space Complexity: O(n)

And that's all folx! By now we should all have a better understanding of Elixir modules, sigils, module functions, module attributes, default arguments, anonymous functions, the capture operator, and the pipe operator. There are many nuances going from an OOP to a functional programming language but I hope you've had as much fun as me discovering some of the conventions and tricks to using Elixir, while also flexing those neurons with a brief discussion of merge sort. For me, the most intriguing part was discovering the pipe operator and the capture operator as they really can enhance the readability of your code once you understand how they operate. There is something quite beautiful and aesthetically pleasing in how they move data.

Happy coding!

Sort a String using a Custom Alphabet in Javascript

Meks (they/them) — Fri, 02 Apr 2021 01:00:29 +0000

Last week I completed a live coding challenge for a Junior Developer position for a company that I'm very fond of. I have really enjoyed getting to know my interviewer who is a Senior Developer with them. I was quite nervous going into the live code, as all I had ahead of time was the phrase "you’ll be given a short coding exercise that isn’t designed to be tricky or overly complex — we're just interested in how you tackle a problem". I didn't know what language it was going to be in or if it would be in the context of a framework.

However, I would be doing the technical with the same Sr Dev who conducted my initial interview and I felt we got along well and as such, I was comforted by the fact that it wouldn't be a stranger. When the call started my interviewer informed me I could pick the language and where we did the challenge whether that was in a local or browser-based IDE. I picked JavaScript and told him that I had recently used CodeSandbox.io and that would be fine with me since that would give him access to type code as well.

It took us both a little bit of troubleshooting to get it working live, and we joked that that was the first part of the code challenge; "Can you successfully set up a live code sandbox". Once it was rolling, he told me the first part was to return a string so that it is sorted alphabetically. I asked about case sensitivity and he listed the assumptions: all lowercase and no special characters including spaces. I also asked if it was ok that we test the function using console.logs instead of displaying it to the browser. He agreed as that would remove a layer of abstraction.

Having done similar string manipulations prior, I knew I could turn the string into an array with .split(''), use the array method sort() which is a built-in array method that sorts alphabetically and I pulled up the documentation just to make sure that I had the syntax right. Then I could turn that array back into a string with .join(''). The result is as follows:

/*
1. Return a string so that it is sorted alphabetically
assumptions: all lowercase and no special characters
*/

const alphabeticalSort = (str) => {
  let arr = str.split('')
  return arr.sort().join('')
}

console.log(alphabeticalSort("cbsgdafer"))
//abcdefgrs

Note: I did have a nervous moment where my brain tried to call sort directly on the string and I got the error .sort() is not a function. After staring at the documentation I saw that sort is called on an array, and I had an "oh duh" moment and knew I was missing the split('') method.

Once that was working successfully my interviewer threw in a wrinkle:

Now your function takes in a second argument with a custom alphabet. The same assumptions apply, all lowercase and no special characters, the alphabet does not repeat characters and the alphabet is an array.

I mused aloud for a moment about using an object with the keys as the alphabet and the values the number of times the letter appears in the string, then my interviewer asked how I would keep track of the order. I said good point, objects do not necessarily maintain order so let's not go down that path. I mentioned sort has the possibility to be customized because I've used that to sort an array of numbers previously.

However I did not know how to relate that to a custom alphabet so he recommended we look closer at the .sort() documentation. What is important is that you can give .sort() a compare function that defines an alternative sorting order. For example:

let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
//[1, 2, 10, 25, 40, 100]

This works because the function returns a negative, zero, or positive value, depending on the two arguments. When the sort() method compares two values, it sends the values to the compare function and sorts the values according to the returned (negative, zero, positive) value. For example, when comparing 40 and 100, the sort() method calls the compare function(40,100) which calculates 40-100, and returns -60 (a negative value). Because the compare function returned a negative number, the sort function will sort 40 as a value lower than 100.

The W3Schools documentation for sort was incredibly helpful for understanding how the compare function works. Once I understood this, I suggested that if I could find out the index of where the letter was in the custom alphabet then compare it to the index of the next letter in the string and based on if it returned a negative, positive, or zero, have it sort in ascending order. My interviewer agreed and my first instinct was to try,

   let arr = s.split('')
   return arr
     .sort((a,b) => {return alphabet[a] - alphabet[b]})
     .join('')

but that didn't sort how I was expecting and when I checked console.log(alphabet[a]) it returned undefined. I laughed at myself as my interviewer pointed out we can't access indices this way and I told him, my brain really wants me to be using an object. That's how you access a value if I were using an object. So I did the google search "javascript index of array element" and the first result was the MDN Docs Array.prototype.indexOf() and I said that looks like exactly what I need.

/*
2. Now your function takes in a second argument with a custom alphabet.
  same assumptions apply, all lowercase and no special characters, the alphabet does not repeat characters
  also, the alphabet is an array
*/

const alphabeticalSortTwo = (s, alphabet) => {
  let arr = s.split('')
  return arr
    .sort((a,b) => {return alphabet.indexOf(a) - alphabet.indexOf(b)})
    .join('')
}

console.log(alphabeticalSortTwo("abcdebebdca", "badcfeghijklmnopqrstuvwxyz".split('')))

My interviewer then had me test out a few different strings and custom alphabets to ensure it was working as expected, and indeed it was!

He then had some follow-up questions that we discussed.

Why did you use the fat arrow function instead of the function keyword when writing your functions?

I have gotten used to anonymous arrow functions in React because it helps with not having to .bind(this) when accessing or updating state. From there it has really become a habit and a stylistic choice that I prefer.

Why did you use let instead of const?

Looking at it now, I should have used const, because I'm declaring a variable that won't change during its life in the function. So to make it clear to other developers const would have been the better choice.

What would happen if the string I gave it was a million characters long?

The javascript sort function looks at each character once as it sorts it and so it would have an O(n) runtime so if each sorting action was a second, it'd take 1 million seconds to sort the string. It'd be a linear runtime.**

**Note: I was thinking about this response later and I looked it up. According to MDN "The time and space complexity of the sort cannot be guaranteed as it depends on the implementation." Some further investigation I found this StackOverFlow which indicates that it is browser based but in general under the hood it uses a merge sort algorithm and is O(n log n) in the worst-case scenario. I still need to work on my runtime studies!

He then shared with me his solution which looked very similar to mine:

const defaultAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");

function alphabetize(string, alphabet = defaultAlphabet) {
  return string
    .split("")
    .sort((a, b) => alphabet.indexOf(a) - alphabet.indexOf(b))
    .join("");
}
console.log(alphabetize("abcdebebdca", "badcfeghijklmnopqrstuvwxyz".split('')))
//bbbaaddccee
console.log(alphabetize("abcdbdacbddbdbacbd")) //aaabbbbbbcccdddddd

There are a few items that I really like about his solution. The first is that he did not set a variable at all and directly returning the string.split('').sort(...).join(''). The second is that he set a default alphabet which is the normal English alphabet so you can use the same function to sort according to the regular alphabet. Then if you pass in a second optional argument that contains an array of your custom alphabet it will sort according to that custom alphabet.

Overall this was a particularly good live code challenge experience for me, although in hindsight I should have thought some more about the runtime while we were talking about the problem. We finished with time to spare and were able to talk more about the projects that the company has in the works. Some key takeaways for me were that thoroughly reading the documentation can be incredibly helpful and try not to let the anxiety get too ramped up, as that can lead to sloppy mistakes.

Happy coding!

React Live Code Challenge...What I learned

Meks (they/them) — Thu, 25 Mar 2021 22:12:37 +0000

I'm in the midst of my job search looking for a software engineering position after completing Flatiron's Bootcamp. Last week I had an hour-long interview with a company I really liked and I got great vibes from my interviewer and we had a fascinating conversation. We spent 20 minutes discussing my experience and what the company does, followed by about half an hour of a live code challenge with react, with some time for me to ask questions at the end.

I was successful in completing the challenge and felt pretty darn proud of myself. When I got the notice that I would not be moving on to the next round I was bummed out, to say the least. But I asked my interviewer for feedback and I'm really glad I did! Culturally I was a great fit, but he had a lot of candidates and they needed to analyze who would be the best fit at the time for their needs. He gave me valuable insight into how I approached the live code and I wanted to share both as a way for me to reflect on the experience, and to help others also doing react interviews!

The challenge was to be able to click between two different tabs to show two different images. And to do this twice for two different customers. We worked in codesandbox.io to complete the challenge. I'm recreating it on my local machine for my own personal practice and so others can follow along if they wish.

I was given an app component:
src/App.js

import './App.css';
import Dashboard from './Dashboard';

function App() {
  return (
    <div className="App">
      <Dashboard />
    </div>
  );
}

export default App;

with simple styling:
src/App.css

.App {
  text-align: center;
}

And the dashboard component contained:
src/Dashboard.js

import React from 'react'

import customer1Events from "./fake-charts/events-1.png";
// import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
// import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {
  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className="tab selected">
            Search events
          </div>
          <div className="tab">
            Performance
          </div>
        </div>

        <div>
            <img src={customer1Events} alt="Search events over time" />
        </div>
      </div>

      <div className="box">
        <h1>Customer 2</h1>

        <div className="tabs">
          <div className="tab selected">
            FTP Usage
          </div>
          <div className="tab">
            Performance
          </div>
        </div>

        <div>
            <img src={customer2Ftp} alt="FTP usage" />
        </div>
      </div>
    </div>
  )
}

export default Dashboard

and was provided the styling:
src/styles.css

.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.selected {
  background-color: darkseagreen;
}

.box {
  padding: 1em;
  border: 1px solid gray;
  border-radius: 2px;
}

.box + .box {
  margin-top: 1em;
}

And the images provided were in a fake-charts folder in the src folder.
The result looked like this in the browser:

In hindsight and even at the time it didn't seem all that difficult, but I think I really let my nerves get the best of me. I made two mistakes off the bat, one is that the provided code included the imports for the two images I was going to need, and it was commented out directly below the ones in use. My brain didn't even register them and I wrote practically the same line beneath them. The other mistake was that after I was successfully toggling back and forth between the images my interviewer had to remind me that they were expecting the backgrounds of the tabs to change when clicked too, and I had to go back and add that in. Both of these were reflected in the feedback given; "I think taking a bit more time to analyze the behavior and the code given would've been useful. Specifically, I'm thinking about missing the UI change that had to happen when clicking the different tabs, or (way less importantly) missing that there were imports commented out with the extra images for you to use. I do agree that live coding in front of someone in the context of an interview is far from stress-free so I understand that some things might have been missed."

So yes, I'm annoyed with myself that I missed such simple things. But the biggest red flag was how I passed information to the on-click handler to update which image had been selected. I originally wrote four separate functions for each onClick, and I even stated aloud that I know it was redundant but I wanted to get it working, and then would be able to refactor to make the code drier.

I decided to use the React Hook useState to keep track of which image to display and then I added an onClickHandler for both tabs for customer 1 which would update the state with the name of the image to be displayed and used a ternary in the JSX to determine which image would be shown.

import React, { useState } from 'react'

import customer1Events from "./fake-charts/events-1.png";
import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
// import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {

  const [customer1, setCustomer1] = useState('customer1Events')

  const onClickHandler = () => {
    setCustomer1('customer1Events')
  }

  const onClickHandler2 = () => {
    setCustomer1('customer1Performance')
  }

  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className="tab selected" onClick={ onClickHandler }>
            Search events
          </div>
          <div className="tab" onClick={ onClickHandler2 }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>
...
    </div>
  )
}

export default Dashboard

I repeated the logic for customer two and could see that clicked on the tabs would update and show the correct image. This was when my interviewer pointed out that I needed to change the color of the tabs as well. Since I was using state to keep track of the image, I was able to reuse it and added in a ternary that would change the className of the div from tab to tab selected.

     <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ onClickHandler }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ onClickHandler2 }>
            Performance
          </div>
        </div>

I also did this for customer 2, and at this point, I could toggle between the two tabs and show the correct CSS:

So at this point, I had it functioning, and my interviewer asked me to refactor so that I was using one onClick function for customer one. This was a perfectly reasonable thing to ask and I had even anticipated it, but this is where I hit a snag and had that red flag issue. And I know exactly why my brain went the way it did. I knew that with forms you can access an input's attributes using e.target.name or e.target.value, and my brain spun out the thought, "Yeah! That'll work for a div!" Except it doesn't. While I was struggling with e.target.name returning undefined my interviewer pointed out that using the dot notation on a custom attribute wouldn't work in React and said there might be a function to get a specific attribute. So I did a quick google and found exactly what I needed: e.target.getAttribute('name'). I implemented this to determine which image to display.

  const onClickHandler = (e) => {
    e.target.getAttribute('name') === 'customer1Events' ?
    setCustomer1('customer1Events')
    :
    setCustomer1('customer1Performance')
  }

...

 <div className="tabs">
          <div name="customer1Events" className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ (e) => onClickHandler(e) }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ (e) => onClickHandler(e) }>
            Performance
          </div>
        </div>

And while this does work, in my feedback my interviewer pointed out that typically in React we don't want to attach information to the DOM which is what I did by giving the div a name. A better way would have been to take advantage of inline functions to pass arbitrary data around, like in this first example. This also would have helped with another thing I missed, I didn't give a name to the other div. It didn't matter for this particular coding challenge but it would have created an issue if we had wanted to add more tabs. By passing the name explicitly to the click handler it's more likely that I would have noticed that I didn't give the other div a name.

This was really an 'a ha!' moment for me and it helped me settle this weird feeling I had about writing the getAttribute method, something I'd done before when working with vanilla javascript but not in React. Now I have a clear path forward for how I would better refactor this! Based on that information I have since refactored it to look like this:

  const onClickHandler = (selection) => {
   selection === 'customer1Events' ?
    setCustomer1('customer1Events')
    :
    setCustomer1('customer1Performance')
  }
...
  <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Events') }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>

Once this was all working, I decided to change the ternary for the onClickHandler to a switch case so that I could reuse it for customer 2. With all those refactors and including the code for customer 2 this is what I have ended up with:

import React, { useState } from 'react'

import customer1Events from "./fake-charts/events-1.png";
import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {

  const [customer1, setCustomer1] = useState('customer1Events')
  const [customer2, setCustomer2] = useState('customer2FTP')

  const onClickHandler = (selection) => {
    switch(selection) {
      case 'customer1Events':
        setCustomer1('customer1Events')
        break;
      case 'customer1Performance':
        setCustomer1('customer1Performance')
        break;
      case 'customer2FTP':
        setCustomer2('customer2FTP')
        break;
      case 'customer2Performance':
        setCustomer2('customer2Performance')
        break;
      default:
        setCustomer1('customer1Events')
        setCustomer2('customer2FTP')
    }
  }

  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Events') }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>

      <div className="box">
        <h1>Customer 2</h1>

        <div className="tabs">
          <div className={ customer2 === 'customer2FTP' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer2FTP') }>
            FTP Usage
          </div>
          <div className={ customer2 === 'customer2Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer2Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer2 === 'customer2FTP' ?
            <img src={customer2Ftp} alt="FTP usage" />
            :
            <img src={customer2Performance} alt="FTP usage" />
          }
        </div>
      </div>
    </div>
  )
}

export default Dashboard

Now with this setup, it's relatively easy to add more tabs and more customers. The last thing I can think of that I would change is that I personally don't like relying on strings so much, because if I mistype them, I wouldn't get an error associated with the fact that the code wasn't behaving as expected. Instead, I'd want to set some consts that held those strings and pass the consts from the click handler to the switch statement.

If you want to check out the Github repo you can do so here.

Some of my biggest takeaways from this experience include slowing down and really planning out my steps is an important part of the process when coding. Make sure I fully understand the entire problem and what they are asking me to do so I don't miss part of the assignment. And finally, have confidence! I can do all of these things, but I need to let my brain have room to breathe to make sure the adrenaline and stress aren't interfering with my neurons firing. Hope this helps others as well!

Happy Coding!

Building a Pokedex with Rails Part 2 - Authentication

Meks (they/them) — Sat, 20 Mar 2021 18:45:43 +0000

Hello, again friends! In Part 1 we got much of the setup for the Pokedex API complete, including building the database, generating models, controllers, serializers, and routes, adding a few validations, and seeding the database with some examples. In this round, we will set up authentication for users using sessions and cookies.

Now there is a lot of debate about whether one should use sessions and cookies vs JSON Web Tokens(JWT) for authentication, and much of it is related to what you want your application to be able to do. Both have their risks, using local storage with JWT leaves you vulnerable to Cross-site Scripting (XSS) attacks, while sessions and cookies can be weak against Cross-Site Request Forgery (CSRF). There are ways to help minimize risks in both cases. This blog provides a good more in-depth discussion and shows another way of implementing authentication that is different from what I will be showing you here.

I am choosing to use sessions and cookies because it has been easier to implement in my experience and will require less work for Jordan to do on the front end when she is ready to start sending requests to this API for the Pokedex project we are collaborating on.

All right, let's get this party started!

In the pokedex-api/config/initializers/cors.rb we need to add credentials: true to the resource section after the accepted methods. This indicates that a request can be made using cookies.

pokedex-api/config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
    end
end

Since we used the flag --api when we spun the app up using rails new, it does not come configured with sessions and cookies middleware. So we need to add

    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore, key: '_cookie_name'

to the application.rb in the config folder.

pokedex-api/config/application.rb

require_relative 'boot'

require "rails"

...

module PokedexApi
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    # Only loads a smaller set of middleware suitable for API only apps.
    # Middleware like session, flash, cookies can be added back manually.
    # Skip views, helpers and assets when generating a new resource.
    config.api_only = true
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore, key: '_cookie_name'
  end
end

Finally, the generated ApplicationController will subclass ActionController::API which doesn’t include cookie functionality so we need to add that in as well.

pokedex-api/app/controllers/application_controller.rb

class ApplicationController < ActionController::API
  include ::ActionController::Cookies

end

With this configuration set up, we are ready to start building the endpoints and the logic we will need for authenticating our users!

Let's go to our routes and create the names of the endpoints we will want to use.

config/routes.rb

Rails.application.routes.draw do

  post "/api/v1/login", to: "api/v1/sessions#create"
  post "/api/v1/signup", to: "api/v1/users#create"
  delete "/api/v1/logout", to: "api/v1/sessions#destroy"
  get "/api/v1/get_current_user", to: "api/v1/sessions#get_current_user"

  namespace :api do 
    namespace :v1 do 
      resources :pokemons
      resources :users
    end
  end
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Note: we can't nest these manually built routes under the namespaced API and v1 like we did the others. Through trial and error, I discovered that if they are nested under the api/v1 namespace, if you write the route as

get "/get_current_user", to: "/sessions#get_current_user"

it does not add the api/v1 in the pathname as we can see here:

, and if you include it, it adds it twice. Riddle me that one rails!

Note: I have made a design choice to create a SessionsController which will be responsible for handling login, logout, and getting the current user. You could keep this all in the user, but I like separating my concerns out in this way. Signup will go in the UserController because creating a user is an action that is associated with the user.

Now if we start up the rails server with $ rails s, and navigate to http://localhost:3000/api/v1/get_current_user, we get an error that says there is an Uninitialized constant SessionsController, which makes sense since we haven't built it out yet. However, the important part at the moment is to scroll down and check that the routes are looking as we expected:

And they do with everything nested under api/v1.

Now we can create the SessionsController using the command:

$ rails g controller sessions

and it will make the sessions controller for us. Let's go ahead and move it right away into api/v1 and add the namespacing.

app/controllers/api/v1/sessions_controller.rb

class Api::V1::SessionsController < ApplicationController
end

So let's log in a user in the SessionsController using the create action, which we specified in our routes:

app/controllers/api/v1/sessions_controller.rb

class Api::V1::SessionsController < ApplicationController
  def create 
    user = User.find_by(username: params[:session][:username])

    if user && user.authenticate(params[:session][:password])
      session[:user_id] = user.id
      render json: user, status: 200
    else
      render json: {
        error: "Invalid Credentials"
      }
    end
  end
end

Here we create a variable of user set to the object of the user that we find using the params of username which is nested under a key of sessions. If a user by that username is found, we need to verify that they entered in the correct password that matches the one stored in the database. Because of Bcrypt, the gem that we use for authentication, the password is stored in its hashed and salted form, and we cannot compare the passed-in string directly. So we need to use the authenticate method that is provided by Bcrypt which will salt and hash the password that was given in params, and see if the result matches the salted and hashed password that is in the database. If it matches, we create a session with a key of :user_id which is equal to this user's unique database id. We then return that user as a JSON object.

If it fails to authenticate, we want to return a message that the credentials were invalid. I don't want to give them any more information than this because if we tell them that the username or the password was incorrect, a malicious user trying to guess usernames and passwords would have more information for their nefarious attempts and we don't want to help them out in any way.

From experience, I know that since we are in the SessionsController, I am expected the keys I will be wanting from the front end request to be nested under a key of session. Something akin to this:

<ActionController::Parameters {"username"=>"Meks", "password"=>"password", "controller"=>"api/v1/sessions", "action"=>"create", "session"=>{"username"=>"Meks", "password"=>"password"}} permitted: false>

We will verify this when Jordan is ready to start sending us requests from the frontend!

Once a user is logged in, if they submit a page refresh, we don't want them to be kicked off and have to login again. That would be a terrible user experience. So let's build an endpoint that will get the current user based on their session id.

app/controllers/api/v1/sessions_controller.rb

 def get_current_user
    if logged_in?
      render json: current_user, status: 200
    else
      render json: {
        error: "No one logged in"
      }
    end
  end

I'm writing code that I wish I had. It would be really great if I had a method that would check if the user is logged in, and would get that current user for me if they are! And that's what my get_current_user method is banking on. So let's go write that in our application controller so that it is accessible to all the other controllers! This means that it will be reusable for helping to protect resources by checking to see if a current user is allowed to access a route or perform an action.

app/controllers/api/v1/sessions_controller.rb

class ApplicationController < ActionController::API
  include ::ActionController::Cookies

  def current_user
    User.find_by(id: session[:user_id])
  end

  def logged_in?
    !!current_user
  end

end

Remember when we logged a user in we set the session to that user's id? Now we are defining a method that will return a User object that has the same id that the session holds. And the method logged_in? is returning a boolean of true if there is a user found and false if not. This is because if no user is logged in, we expect there to be no session to be found.

If a user can log in, we want them to be able to logout! Let's write the destroy action which reflects that happening.

app/controllers/api/v1/sessions_controller.rb

  def destroy
    session.delete :user_id
    if !session[:user_id]
      render json: {
        notice: "successfully logged out"
      }, status: :ok
    else
      render json: {
        error: "Unsuccessful log out"
      }
    end
  end

Here we delete the user_id from the session, and just as a double-check, we will notify the frontend that the logout was successful or give it an error message that it was not. Here is what the SessionsController looks like in its finality:

app/controllers/api/v1/sessions_controller.rb

class Api::V1::SessionsController < ApplicationController

  def create 
    user = User.find_by(username: params[:session][:username])

    if user && user.authenticate(params[:session][:password])
      session[:user_id] = user.id
      render json: user, status: 200
    else
      render json: {
        error: "Invalid Credentials"
      }
    end
  end

  def get_current_user
    if logged_in?
      render json: current_user, status: 200
    else
      render json: {
        error: "No one logged in"
      }
    end
  end

  def destroy
    session.delete :user_id
    if !session[:user_id]
      render json: {
        notice: "successfully logged out"
      }, status: :ok
    else
      render json: {
        error: "Unsuccessful log out"
      }
    end
  end

end

The final piece of the authentication puzzle, creating a new user through signup! We will do that in the UsersController under the create action.

app/controllers/api/v1/users_controller.rb

class Api::V1::UsersController < ApplicationController

  def create
    user = User.new(user_params)
    if user.save
      session[:user_id] = user.id
      render json: user, status: 200
    else
      response = {
        error: user.errors.full_messages.to_sentence
      }
      render json: response, status: :unprocessable_entity
    end
  end

  private

  def user_params
    params.permit(:username, :password)
  end

end

Here I decided to write a private method of user_params where only the username and password are permitted parameters. This user_params is used to make a new user, if the data saves successfully we set the session[:user_id] equal to the user that was just created (in other words, we log them in at the same time as they sign up!) and send that user object as JSON to the frontend. If the user does not save because of any validation errors, we want to send the entire message to the frontend so they know exactly why their submission was unsuccessful.

Guess what coders, that's it for authentication! We will see you next time for creating the final endpoints so a user can catch pokemon with persistence and see all the pokemon that they have caught. We will also be collaborating directly with Jordan to make sure that the endpoints are returning to her the data she needs.

Here's the repo if you need a closer look at the code.

Happy coding!

Building a Pokedex with Rails Part 1

Meks (they/them) — Thu, 11 Mar 2021 16:57:31 +0000

My good friend and coding partner in crime, Jordan, is building a Pokedex app using React. She's a CSS and design whiz! Check her out! Anyway, when we pair she does the fancy artsy magic and I tackle the APIs. So when she asked me to make a rails API for her Pokedex blog project I was more than happy to oblige!

I talked it over with her to find out exactly what she wanted. She wants users to be able to signup, login, and add pokemon to their decks with persistence. So my thought is to have a User model, a Pokemon Model, a joins table called Pokedex that will have a has-many-through relationship between a User and a Pokemon. Using draw.io I made up the relationships I'm envisioning to get her approval:

For my user authentication, I will use sessions and cookies. There are lots of opinions on whether this is the best choice versus using JSON web tokens, but I find sessions and cookies easier to navigate and since it's an app that I don't anticipate having huge amounts of users and it's strictly for fun, I'm not too concerned about CSRF attacks. That being said, this is why you don't reuse passwords people! Even though I will be using Bcrypt to hash the passwords and I won't know what you entered, it's always a good idea to use different passwords because you never know when an app isn't using good authentication practices. Ok, I'm going to get off my soapbox, and time to start building!

Firstly I wanted to make sure I was on the same page as Jordan, so I navigated to our collab channel on Github and cloned a copy of her personal-pokedex project.

In my own terminal I made a folder to hold both the back and front end projects called pokedex and ran:

$ git clone https://github.com/Jordeks/personal-pokedex.git
$ cd personal-pokedex
$ yarn install
$ yarn start

This allowed me to see what her front end is looking like right now and I can see how she has structured her components.

All right! Time to start on the API!

~/.../pokedex/personal-pokedex // ♥ > cd ..
~/.../post-grad/pokedex // ♥ > rails new pokedex-api --api --database=postgresql

Once Rails had completed its process of generating the files, I made a new git repository in Jordeks:

Then made my initial commit and it's time to rumble!

Let's add some gems that we'll need; go ahead and un-comment out

gem 'bcrypt', '~> 3.1.7'
gem 'rack-cors'

in the Gemfile. We'll need bycrypt to set up password protection for users and rack-cors so the front end can make requests to the backend. Run

$ bundle install

so they are added to the Gemfile.lock. While we are thinking about cors, let's go to config/initializers/cors.rb and comment in:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

For your origins, you can use a '*' which is the wildcard and will allow for any URL to send requests, or you can specify which local ports you might use while in development and also later add the deployed URL.

I also know I will want to use a serializer to send the data as JSON so let's add the rails active model serializer:

$ bundle add active_model_serializers

After talking over what Jordan wants, I came up with this plan for making the models and tables:

Using $ rails g resource, I can generate migrations, models, controllers, serializers, and routes using the following commands (for Pokedex, I don't anticipate needing a list of all the joins, so I'm just going to generate a model for it):

$ rails g resource User username password_digest
$ rails g resource Pokemon name p_id:integer image_url
$ rails g model Pokedex user:belongs_to pokemon:belongs_to

If the data type is a string, you don’t need to specify their type following the column name. Adding user:belongs_to specifies the relationship between your two tables and sets up a column for user_id in your pokedexes table. Additionally, we use column name password_digest to avoid directly storing passwords as strings.

Once rails is done generating, I like to go through each file that is created to make sure everything worked as expected, which means for the resources checking the routes.rb, controller, model, serializer, and the migration. I'm looking for spelling mistakes and typos in particular in the migration table before I migrate it.

Top Trick: By installing the active model serializer before I generated the resources, rails knows to automatically build the serializer for anything that has a controller. That way I don't have to go back later and manually generate the serializers. However, if you don't do this, this blog includes some great step by steps for generating serializers.

Also, when looking at the serializers that were generated, I notice that the user_serializer includes the password_digest. Under no circumstance should that be sent to the frontend where malicious users might try to access it. So let's take that out now.

pokedex-api/app/serializers/user_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :username, :password_digest
end

to:

class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
end

Next, run $ rails db:create to create the back end and $ rails db:migrate to migrate your tables.

At this point I like to check that I can run

$ rails s

and see that it runs:

Woot! Welcome to rails! Now if I navigate to http://localhost:3000/pokemons, I get the very helpful rails error: The action 'index' could not be found for PokemonsController. Which is exactly what I'm expecting at this point.

Ok, let's go back to the models and finish adding the relationships. Pokedex already has both belongs_to relationships because we generated it with that reference.

class Pokedex < ApplicationRecord
  belongs_to :user
  belongs_to :pokemon
end

Let's add in the missing has_many relationships:

class Pokemon < ApplicationRecord
    has_many :pokedexes
    has_many :users, through: :pokedexes
end

And for the User model, I'm going to add the has_secure_password macro so that we can use Bcrypt to protect their password.

class User < ApplicationRecord
  has_secure_password

  has_many :pokedexes
  has_many :pokemons, through: :pokedexes
end

My next step is always to test out my relationships in the rails console to make sure it behaves the way I want it to. And guess what! By doing this I found a typo in where I placed the colon on one of my has_manys, so it is worth the time to do this! So after testing that I can make a user, a pokemon, and associate the two to create a pokedex, we will want to create a seeds file. I like taking time to do this as it helps set up a game plan for how the controllers will work later.

jordan = User.create(username: "Jordles", password: "password")
meks = User.create(username: "Meks", password: "password")

bulbasaur = Pokemon.create(name: "bulbasaur", p_id: 1)
ivysaur = Pokemon.create(name: "ivysaur", p_id: 2)
venusaur = Pokemon.create(name: "venusaur", p_id: 3)


jordan.pokemons << bulbasaur
jordan.pokemons << ivysaur

meks.pokemons << ivysaur
meks.pokemons << venusaur

Top Trick! You can use the commands:

$ rails db:drop db:create db:migrate db:seed

All in one line to drop the database so any users you made in the console that you don't want to conflict with your seeds are removed. Then it will recreate the database, migrate and seed it all in one go.

Next, let's test that we can build an endpoint, I doubt that Jordan will ever want to return all the pokemon in the database, but it's a good place to check that we are getting the data we expect as json through our serializer.

class PokemonsController < ApplicationController

  def index
    render json: Pokemon.all, status: 200
  end

end

Yes! We got back an array of objects with the name, id, and an empty URL for the image. After talking with Jordan, turns out she won't ever need to get the URL from the backend, so for now, we can take that out of the serializer.

class PokemonSerializer < ActiveModel::Serializer
  attributes :id, :name, :p_id
end

Sweet. I am happy with this.

Ok, before I get too far ahead of myself, I want to move the pokemon and user controllers into a V1 folder inside an API folder inside the controllers' folder. This is a good habit to get into so that one can easily create new versions on the API that the front end can use and the only thing the front end has to change is which version it sends requests to. So we need to create the two folders, namespace the two controllers, and update the routes.

pokedex-api/app/controllers/api/v1/pokemons_controller.rb

class Api::V1::PokemonsController < ApplicationController

  def index
    render json: Pokemon.all, status: 200
  end

end

pokedex-api/app/controllers/api/v1/users_controller.rb

class Api::V1::UsersController < ApplicationController
end

pokedex-api/config/routes.rb

Rails.application.routes.draw do

  namespace :api do 
    namespace :v1 do 
      resources :pokemons
      resources :users
    end
  end
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Now I can navigate to http://localhost:3000/api/v1/pokemons and see:

This is the route that the frontend will send requests to for all the pokemon (if it ever wants it).

Next let's take care of some validations. We don't want any entries that might mess up with our database. The user absolutely must have a username, and it must be unique since that is how the will be identified upon login.

class User < ApplicationRecord
  has_secure_password

  has_many :pokedexes
  has_many :pokemons, through: :pokedexes

  validates :username, presence: true
  validates :username, uniqueness: true
end

And Pokemon are must also have names and p_ids that are present and unique:

class Pokemon < ApplicationRecord
    has_many :pokedexes
    has_many :users, through: :pokedexes

    validates :name, :p_id, presence: true
    validates :name, :p_id, uniqueness: true
end

Now if I try to create a new Pokemon without the p_id, I get an error in console:

and a successful insertion if it is saved to the database! I can also see the validations at work if I try to make a Pokemon that already exists:

By using $ p.errors.any? I can see if there was an error and the command $ p.errors.messages returns to me a list of validation errors.

If you are with me this far, give yourselves a pat on the back! We have successfully made our database, models, controllers, serializers, routes, validations, and done some manual testing in console to make sure our relationships are working. In the next rendition, we will set up our user authentication system with sessions and cookies.

You can go through the code at the Jordeks github repository.

Happy coding!

Basic Ruby Calculator with RSpec

Meks (they/them) — Fri, 05 Mar 2021 02:28:21 +0000

Testing is an important part of Software Development, it can be slow to start especially as you're learning it, but it is such an important savior in the long run. As projects get bigger you can run tests to make sure new features don't break old ones and changes don't have unexpected consequences.

To get started I decided to learn and get some practice using RSpec, which is a unit test framework for the Ruby programming language. RSpec is a Behavior-driven development tool, meaning that tests written in RSpec focus on the "behavior" of an application being tested. RSpec doesn't put emphasis on, how the application works but instead on how it behaves, in other words, what the application actually does.

Here is my first try at building a simple ruby calculator using test-driven development(TDD)! TDD is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. It is sometimes referred to as red-green testing because you write tests for what you want the code to do, then you run the tests to see them fail (red). Then you write the code to make the tests pass(green).

To start, make sure you have ruby and RSpec installed. You can check that is the case by running

$ ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950)

and

$ rspec -v
RSpec 3.10
  - rspec-core 3.10.1
  - rspec-expectations 3.10.1
  - rspec-mocks 3.10.2
  - rspec-support 3.10.2

If you are missing either of these you can check out the documentation for Ruby and to add RSpec you can run

$ gem install rspec

A gem is a Ruby library that you can use in your own code and you can install these using the gem command.

Next, let's make a folder in a location of your choice called calculator.

$ mkdir calculator

Let's cd into the folder and open it up with your code editor.

$ cd calculator
$ code .

Next we are going to need a Gemfile that knows which version of RSpec to run.

$ touch Gemfile

In that gem file add

source "https://rubygems.org"

so it knows where to get its gems from. Then in your terminal

$ bundle add rspec

and your gemfile will be updated to have the latest version of rspec available to your project.

Now we can make folders called lib to hold the Calculator class and spec to hold the tests which is a common practice.

$ mkdir lib
$ mkdir spec

Now for the fun part! Let's make a file called calculator_spec.rb, it's common practice to have your test file have the name of the file it's testing plus _spec. And another file called calculator.rb in your lib folder.

First we are going to require the file that we are testing at the top of the spec file:

require './lib/calculator.rb'

Now let's write our first test! We want our Calculator to be able to add two numbers and return the result.

describe Calculator do 
  context "Given two numbers" do 
    it "adds the numbers using the add method" do
      calc = Calculator.new
      sum = calc.add(2,3)
      expect(sum).to eql(5)
    end
  end
end

Woah, Nelly! What's all that! Ok. So. The word describe is an RSpec keyword. It is used to define an “Example Group”, which is a collection of tests. The describe keyword can take a class name and/or string argument, in our case we used the Calculator class name (which doesn't exist yet). You also need to pass a block argument to describe, this will contain the individual tests, or as they are known in RSpec, the “Examples”. The block is just a Ruby block designated by the Ruby do/end keywords.

So our describe Calculator block will wrap the individual tests. Inside the describe block is context, another RSpec keyword. It is very similar to the describe block, and is not mandatory, but it can help add more details to what the tests are doing. In this case, we are just testing for handling two numbers entered into the function.

The word it is another RSpec keyword used to define an “Example”, ie a test case. it is passed a string and a block argument designated with do/end (like describe and context, it can accept a class, but it would be unusual to do so). The string of it describes the expected outcome for the test. The string makes it clear what should happen when we call add on an instance of the Calculator class. As part of the RSpec philosophy, an Example is not just a test, it’s also a specification (a spec). So the Example both documents and tests the expected behavior of your Ruby code.

We then make an instance of the Calculator class so that we can call the add method on it to test if it does actually add together properly. Let's set a variable of sum equal to the result of passing in the numbers 2 and 3 into the add method.

And now, the actual test! The expect keyword is used to define an “Expectation” in RSpec. This is where we verify, that a specific expected condition has been met. The idea is that expect statements should read like normal English. You can say this aloud as “Expect the sum to equal 5”. The idea is that it's descriptive and easy to read.

The to keyword is used as part of expect statements. to is used with a dot, expect(sum).to, because it actually just a regular Ruby method. In fact, all of the RSpec keywords are really just Ruby methods.

And finally, we have the eql keyword which is a particular kind of RSpec keyword called a Matcher. Matchers are used for specifying what type of condition you are testing to be true (or false). Here we are expecting the add method to return an integer that matches 5.

All right! Let's run our test with the command rspec and the file designated in the spec folder!

$ rspec spec/calculator_spec.rb

Our error tells us that the constant Calculator is uninitalised, which makes sense because we haven't built our Calculator class yet! So in the calculator.rb file, let's make our class:

class Calculator 
end

and run the tests again.

Woohoo! 1 failure! This is good. We are in the red part of red/green testing. There's no method add. So let's fix that.

def add
end

Now our test is telling us that the add method received 2 arguments, but was expecting 0. This is because in the test we gave it two, but in the actual code it doesn't have any arguments passed into the method So let's pass it two arguments.

 def add(x,y)
 end

Now the test was expecting 5 to be returned, but it failed because we didn't return anything. Let's fix that.

  def add(x,y)
    return 5
  end

Woo! It passed! But...wait...that's silly, isn't it? Well, yes, you're right. If you write your tests and make them pass with the minimum amount of work, and it doesn't actually behave how you want, then you need to upgrade your tests to be a bit more robust. Let's add another test!

    it "can add two different numbers" do 
      calc = Calculator.new
      sum = calc.add(8,23) 
      expect(sum).to eql(31)
    end

Ok, so we're passing the first test, but not the second. Let's fix is so we pass both!

  def add(x,y)
    return x + y
  end

Yes! Two passing tests!

Did anyone else notice that we initialized a new instance of the calculator class inside both it blocks? We can refactor this to using the RSpec before hook which takes in a symbol indicating the scope and a block of code to execute. The before(:each) block will run before each example.

describe Calculator do 

  before(:each) do 
    @calc = Calculator.new 
  end

  context "Given two numbers" do 
    it "can add the numbers using the add method" do
      sum = @calc.add(2,3)
      expect(sum).to eql(5)
    end

    it "can add two different numbers" do 
      sum = @calc.add(8,23) 
      expect(sum).to eql(31)
    end
  end
end

Run this code again and both tests are still passing!

If you want to try adding different numbers with your new add method you can hop into an irb session in your terminal and load the file that has your calculator class, instantiate a new instance of that class storing it in a variable, then call the add method on it with the two numbers you want to add as arguments. Type exit to get out of your irb!

Go ahead and try following the red/green TDD process for subtract, multiply and divide. Don't forget! You may want to test for a user trying to divide by zero and display some kind of error message.

spec/calculator_spec.rb

require './lib/calculator.rb'

describe Calculator do 

  before(:each) do 
    @calc = Calculator.new 
  end

  context "Given two numbers" do 
    it "can add the numbers using the add method" do
      sum = @calc.add(2,3)
      expect(sum).to eql(5)
    end

    it "can add two different numbers" do 
      sum = @calc.add(8,23) 
      expect(sum).to eql(31)
    end

    it "can subtract the numbers using the subtract method" do 
      expect(@calc.subtract(6,4)).to eql(2)
    end

    it "can multiply the numbers using the multiply method" do 
      expect(@calc.multiply(3,4)).to eql(12)
    end

    it "can divide the numbers using the divide method" do 
      expect(@calc.divide(18,3)).to eql(6)
    end

    it "gives a warning if try to divide by zero" do 
      expect(@calc.divide(2,0)).to eql("You can't divide by zero!")
    end

    it "can provide the remainder when dividing two numbers using the modulo method" do 
      expect(@calc.modulo(15,5)).to eql(0)
    end

    it "can square the result of a number" do 
      expect(@calc.square(2)).to eql(4)
    end

    it "can find the squareroot of a given number" do 
      expect(@calc.squareroot(9)).to eql(3)
    end

    it "can find the factorial of a given number" do 
      expect(@calc.factorial(3)).to eql(6)
    end 
  end
end

lib/calculator.rb

class Calculator

  def add(x,y)
    return x + y
  end

  def subtract(x,y)
    return x - y
  end

  def multiply(x,y)
    return x * y
  end

  def divide(x,y)
    if y == 0 
     return "You can't divide by zero!"
    end
    return x / y
  end

  def modulo(x,y)
    return x % y
  end

  def square(x)
    return x * x
  end

  def squareroot(x)
    return Math.sqrt(x).round()
  end

  def factorial(x)
    result = 1
    while (x > 0)
      result = result * x
      x -= 1
    end
    return result
  end

end

To see the file structure and folders you can look at my github repo. Check out Tutorialspointfor another good tutorial and Relish for more on the before hook.

I hope this is helpful for people just dipping their toes into RSpec. Any RSpec pros out there want to comment on ways to improve the tests I wrote, feedback is much appreciated!

Happy coding!

DEV Community: Meks (they/them)

When Dragons Go Missing: A Tale of URL Parameter Parsing in Phoenix LiveView

The Quest Begins

The Mysterious Disappearing Act

Reproducing the Mystery

The Quest for Answers

Tracking the Beast

The Root Cause: Choosing the Wrong Spell

Taming the Beast

The Adventurer's Journal

Add ConfigCat to Next.js App

Install Package

Import & Initialize a ConfigCatProvider with your SDK Key.

Try it out

Use an Environmental Variable

Mobile Responsive Table with TailwindCSS

Accessibility Concerns

Building the Table

Making the Table Mobile Responsive

Resources

Early Careerists at ElixirConf 2022

The Talks and The Conversations

De Wet Blomerus: “Onboarding New Elixir Members”

Brooklin Myers: “Using LiveBook to Teach Elixir”

Theo Harris: “Wordle: Elixir Flavour”

Reasons to include talks by and for early careerists

From Flatiron Grad to Job Seeker to Junior Developer

Runtime Complexity Cheatsheet

Sort a String using a Custom Alphabet in Elixir

Sort a String using a Custom Alphabet in Javascript

React Live Code Challenge...What I learned

Building a Pokedex with Rails Part 2 - Authentication

Building a Pokedex with Rails Part 1

Basic Ruby Calculator with RSpec

Import & Initialize a `ConfigCatProvider` with your SDK Key.