DEV Community: Teal Larson

Bootcamp to Job Hunt: What I did

Teal Larson — Mon, 12 Sep 2022 14:15:00 +0000

The idea of hunting for my first job after a coding bootcamp was intimidating, to say the least. I’d read blog posts from folks who said they got hired before even finishing their bootcamp and others who were looking for over a year.

I have started and stopped this post many times in the past year for a handful of reasons. First, it feels vulnerable to share my story. Second, this path isn’t a guarantee. Somebody else could do the same things I did and not get hired, someone could do less and get hired sooner. So with that being said, this isn’t advice. Take it or leave it, do it or don’t. Everyone’s path looks different. However, I will say I was very strategic in my studies and approach after finishing bootcamp and I believe that made a big difference in my job hunt.

Like all good stories, I’ll start at the beginning. These are the steps I took, more or less in chronological order. You don’t have to wait to finish bootcamp to start these, either!

Photo credit: unsplash

Spruced up my online presence

I wanted a way for folks to see my skills, my personality, and my learning. For me, this looked like upping my game on Twitter and LinkedIn, starting to blog, and building up a personal portfolio site. That order was specifically planned out.

I started dipping my toes into “Tech Twitter” (this just means the nerdy, dev-centered side of Twitter) when I ordered my very first Udemy coding class. I started doing #100daysofcode and sharing what I was building and learning. Twitter is a great way to keep your finger on the pulse of hot topics and find meaningful conversations to read and share your thoughts on. Just remember you're in public and employers will find what you're talking about!

For vamping up your LinkedIn, there are tons of resources out there on how to leverage your profile wisely. I dug into the recommendations on Danny Thompson’s YouTube channel and found there was an immediate increase in traffic and communication within a short while!

A lot of folks like Reddit, and there are lots of active conversations on there about a myriad of programming topics. I am still terrified of Reddit (have you seen how cruel folks can be on there?! 😳). I am mostly a “read and upvote only” type of user. That said if it’s a forum you find enjoyable, by all means, engage!

My portfolio site was similar to my site today – mostly just a central landing place for a small about me with links to a handful of my projects and posts.

Wherever you’re active online, the most impact will be through meaningful interaction with others. When I was in bootcamp and on the job hunt, I made it a habit to find at least one conversation I could contribute meaningfully to every day. The imposter syndrome here was so real for me! But it got easier the more I flexed that muscle.

Shared about what I was doing/learning

My online presence was looking good, I was interacting with others. Now, what do I share?

Whatever I was doing or learning! Writing articles was my favorite outlet. Some folks prefer videos or podcasts, but I have always been a writer. However you get out there, this is a great way to show folks what you know, what you care about, and that you can communicate clearly.

I started with blogging on DEV Community because I just wanted to start getting ideas out to the world without spending time building a blog site on my own. Also,_ _a big network like theirs gets a lot more traffic than my own site.

I know this because I have a degree in it: teaching is one of the best ways to cement your learning. It was easy for me to fall into feeling like I had no helpful ideas. Like everyone else had already thought of and written about everything I think about. That’s not true at all! I guarantee you there are folks with less experience and knowledge (or more!) who will find your post useful or interesting. I have written about everything from how teachers are all pretty great at Agile, to my favorite sorting algorithm, to what VSCode features I was using most. The first tech company I worked at enjoyed my writing and I ended up getting to write a handful of engineering-related posts starting just a few weeks into the job.

Photo credit: unsplash

Never stop learning and building

Now, to be writing about what I was doing and learning, I had to be doing and learning things. I’m an incessantly curious person, so this wasn’t difficult for me. The most difficult part was narrowing down what to do or learn or build.

I started by seeking out freelance work. I’d been doing website work for small businesses for a while (building websites, providing SEO and accessibility feedback, etc.), but now that I had a bit more knowledge, I dove into offering more full-blown projects and charging a bit more for them.

In terms of learning, I had _no clue _what to learn next. Do I keep diving deeper into what I’ve already learned? Do I branch out wider? Looking back, I don’t think there’s any course or book that I regret diving into. All of my programming learnings have helped cement what I already know and helped me build mental connections between concepts. This was how I started building up some understanding of fundamental programming ideas and patterns without formal learning (things like, “Huh, this language deals with strings in this way… this other language does it differently… but they both have this in common. Do all programming languages have that part in common?”)

A few areas I am really glad I dove into:

Learned a more (and less) strongly typed language. I started with learning JavaScript in bootcamp. I sort of cheated here because the “strongly typed language” I picked to learn more about was TypeScript, though I did do some brief skimming through Java resources and also got a course in Python. Again, I didn’t get that deep into any of these (except TypeScript), but I learned a lot about how languages are connected and different.
Learned SQL. I had used NoSQL in bootcamp. Presumably because it’s really easy to spin up a MongoDB Atlas instance for free. But every job I’ve had has relied heavily on SQL (I’ve been building data pipeline software since 2021) so this course has paid major dividends. To quote my mentor (who was quoting his mentor), “it’s not cute to say you just don’t know SQL”. I picked MySQL because someone said it was the friendliest. I have mostly used Postgres since then. That hasn’t mattered because they’re fundamentally similar. Just learn one.
Learned Ubuntu Server. This was surprisingly useful. Have I even, in my professional career, spun up or maintained a server on my own? Not even close. But I do use the command line every day and dang if I didn’t get a lot better around the command line from this class! I also learned some basics about IPs, ports, services, etc. that have come in handy. Do I have an opinion on the EMACS vs. VIM debate? No. But can I navigate my way around the command line and debug problems with my tests on CI? Yeah.

Was ridiculously curious

Right along the same lines as always learning, just be curious! Ask questions. Ask questions to other people, ask questions about the code you’re working on, etc. When I solve a problem, it drives me insane if I don’t understand why whatever I did works. And if there are exceptions, and if I can break it. It turns out that’s a great quality for a software engineer!

This might mean clicking through source code or pouring over docs/Stack Overflow/GitHub repos. This might mean talking with someone else about it. This might mean writing a post about the solution that you’ve found.

This may or may not come naturally to you, but I can tell you hiring panels watch for the type of questions you ask so start practicing.

Hung out at Hackathons and Meetups

I went to as many hackathons as I could squeeze in, and attended a few online conferences and meetups (because it was still COVID). I met great people, I deepened technical skills, I practiced working remotely on self-organizing teams… and they were freaking fun. I mean seriously, when else would I have been able to hack up a prototype for a journal app that used sentiment analysis to build you a custom Spotify playlist?

In the end, which one of these made the most difference in my job hunt? Who’s to say? I think the whole was more than the sum of its parts here. A lot of these are just good practices, period, for programmers. If you’re out there on the job hunt, I wish you the best! It’s not easy. I got a lot of “no”s, and even more ghostings. But all it takes is one yes.

Resources

How to Use LinkedIn as a Developer to Get a Job in Tech – this is the video series I used to spruce up my LinkedIn.
Meetup.com – This is where I’ve found most of the local meetups I’ve attended. They list both virtual and in-person events!

Nevertheless, Teal Coded in 2022

Teal Larson — Wed, 09 Mar 2022 03:18:24 +0000

My biggest technical goals are…

continuing to grow in systems thinking. I want to grow my toolbelt of approaches to tackling problems and come at issues from a variety of informed angles before implementing a solution.

On a similar note I want to give some killer tech talks this year and set aside more time for writing. You can take the teacher out of the classroom, but I still really like sharing cool ideas and concepts with anyone who will listen.

My biggest technical achievements are…

In the past few months I've owned the design and implementation of some core back end product features that improved performance and reliability as well as adding new user functionality. Serious bonus of working at a startup -- getting to own some FUN problems across a variety of areas.

Advocating for myself looks like…

not "kneecapping" my own ideas.

"Kneecapping" your ideas was described to me as cutting them down before you even share them, presumably because you think you need to make your thoughts more palatable. Things like saying "if it's not a bother" instead of asking for what you need or "I think" instead of just saying what you think or overusing the word "just". With a background in cultural studies and linguistics, I would be entirely remiss if I didn’t mention that there are a lot of cultural factors and nuances to all of this. What I have seen is that people who are successful in similar sociocultural settings as me generally share their thoughts directly.

I started to say what I thought directly. I had some serious fears about communicating my thoughts directly coming across as an angry woman.

But overall, I find that people I speak with take my ideas seriously when I share my ideas seriously. Your ideas are valuable. Share them!

I pledge to support women, non-binary folks, and other minorities in tech by…

continuing to offer my experience and resources to those who are coming into tech from non-traditional backgrounds (and hopefully finish out some of the blog posts I've left yet unfinished about the topic).

I’m excited about…

what this year has in store. I'm excited about the under-represented folks I see joining the communities I'm a part of -- Slack, in person, and otherwise. I'm excited about continuing to learn and to grow. I'm excited about gearing up to do more speaking. I'd be lying if I said I wasn't excited about my "to read" pile!

Honestly I'm just excited. At this point, my learning and growth seem to be on an exponential trajectory. So I'm excited to continue on that journey and share out what I see along the way. And hopefully it helps someone else, too.

Data cleaning null values -- SQL or Code?

Teal Larson — Thu, 29 Jul 2021 22:36:48 +0000

When preparing your data set for analysis, it is crucial to ensure that your data set is both complete and accurate. One step in this process is deciding how to handle null values. Depending on how your data is going to be used, you may not want null values at all!

Let's clean some data

We're going to take a look at calculating Lifetime Value (LTV) of a customer. We want a customer with no purchase history to have an LTV of 0. What happens if our aggregated column returns no rows, and thus is null? Should we clean the data at the query level or afterwards using a script?

We’re going to walk through this LTV example from beginning to end looking at different options -- some that work well, some that work poorly, and some that won’t work at all.

To start, we have a users table and a purchases table.

users:

user_id
1
2
3
4
5

purchases:

user_id	price
1	79.36
3	42.97
1	33.14
2	16.48
4	96.41

As you can see, the users table has 5 unique users and the purchases table has 5 purchases from users 1, 2, 3, and 4. User 5 is not present in the purchases table. Now that we have our data, it’s time to create our calculated column. Our query is being called by a function that passes it a list of user_ids that can be used in the query.

Option 1: With a SQL Query

Using `COALESCE`

COALESCE is a keyword used by Postgres and other SQL dialects to return the first non-null value in a set. Because of this, it’s a common keyword for data cleaning. Let’s look closer at the following query.

SELECT
    COALESCE(SUM(purchases.price), 0) as LTV,
    user_id
FROM purchases
WHERE purchases.user_id
    IN (1, 2, 3, 4, 5)
GROUP BY user_id
ORDER BY user_id;

When we look at the results from that query we end up with:

user_id	LTV
1	112.50
2	16.48
3	42.97
4	96.41

Yikes! No user 5. That means wherever you’re using this data, when you try and access the row for user 5, you’ll get null, which may throw off calculations. So why did COALESCE do this?

A SQL query is like checking a post office box -- you might find a bunch of envelopes containing various amounts of mail, or even an empty envelope I suppose. But if there’s no mail at that post office box, you leave empty handed. If SQL can’t find any rows, it comes back empty handed as well. In fact, getting back a null vs a 0 vs an undefined may seem similar, but they tell us different things:

value	meaning
0	We know something is there and its value is zero.
null	We know something is there and its value is unspecified
empty set	We know nothing is there

So the issue with our query isn’t with the COALESCE but with the order of execution - there are no rows to return with a user_id of 5 in purchases. Let's think about the logical order of how we get there:

The order that query gets executed in is:

Find rows in purchases that match the given user ids (5 rows, matching 4 of the given user ids)
On each of the rows returned, return either the sum of the price column or 0 (same 5 rows, with aggregated data for LTV)
Group by user_id and order by user_id (4 rows returned, in order by user_id, with aggregated data for LTV)

After the first line, there isn’t even a row for user 5 anymore. We can expect the same behavior if we try a CASE switch for our LTV because, again, there is no row, no data for it to act on.

Had our purchases table contained a row for user_id 5 with null for price, it would have returned as expected. Knowing that, a second option is to break out a right outer join.

`RIGHT OUTER JOIN`

Knowing that our issue was with missing rows, we could go the route of a RIGHT OUTER JOIN with our users table to achieve that. This way, we’ll get back a row for every user from users, and, if it’s there, the sum of their data from the “price” column in purchases, otherwise a 0.

SELECT
users.id as user_id,
    COALESCE(SUM("price"), 0) as LTV
FROM purchases
    RIGHT OUTER JOIN users
    ON demo.purchases.user_id = users.id
GROUP BY user_id
ORDER BY user_id;

user_id	LTV
1	112.50
2	16.48
3	42.97
4	96.41
5	0

It works! Fantastic.

💡 If all of your foreign keys are coming from a single table, the above might be the right solution for you. However, in more complex cases, you may not have something like a generic “users” table.

Your primary data may be spread across multiple tables -- for instance, you may have a setup like:

location_a_customers

Column	Type	Nullable
user_id	string	not null
email	string	not null
last_name	string	not null
user_id	string	not null

location_b_customers

Column	Type	Nullable
user_id	string	not null
email	string	not null
last_name	string	not null
user_id	string	not null

that you want to use with a purchases table:

Column	Type	Nullable
user_id	string	not null
purchase_amount	decimal	not null
item_sku	string	not null
item_category	string	not null

Fear not, we can still make it happen. Though, for everyone’s sake, at this point I would recommend using a function over using SQL! Just for giggles, let's prove it's possible first.

`UNION` with a list

⚠️ Overkill query ahead. You should really try a function instead.

One way around the issue of having multiple users tables would be to create a list of all the user_ids for the query with a sublist of (user_id, 0), then UNION the original query with that list. If it sounds overkill, that’s because it is:

SELECT
  DISTINCT on (user_id) user_id,
  purchases FROM( SELECT user_id, COUNT(*) as LTV
FROM purchases
WHERE purchases.user_id in (1, 2, 3, 4, 5)
GROUP BY user_id

UNION

SELECT * FROM (
  values (1, 0), (2, 0), (3, 0), (4, 0), (5, 0))
  AS t (user_id, LTV)
  ORDER BY user_id, LTV DESC
) AS data;

Which returns our beloved 0:

user_id	LTV
1	112.50
2	16.48
3	42.97
4	96.41
5	0

The query isn’t too out of hand for 5 users, but imagine having to write that out (or have a function write that out) for 500 users! What about 10,000! Just because something works, doesn’t make it necessarily the right idea. So let’s try it from the programming sde.

Option 2: After the SQL Query 🥇

We’re really asking a lot of SQL there. While it was possible, it was not very pretty, very concise, or very readable. It also muddies things up as it is technically returning data from our database that isn’t there. Thankfully, transforming the data we do get back using a function is a much more straightforward task!

I worked this one out in both TypeScript and Python. I love that we use TypeScript for building out our data pipeline because dynamic typing helps keep the guard rails on and make sure I’m paying attention to what I’m working with -- especially as our data structures grow in complexity, it helps to be completely sure what you’re working with. And Python for all the Python-loving data folks as well.

Here’s how we can use a function to transform our data to include 0s. We start by setting the LTV of every id as [0], then iterate through our results and replace the [0]s as we go:

TypeScript:

interface Profile {
  id: string;
}

interface DataResonseRow {
  id: string;
  data: number[];
}

function calculateLTV(
  queryResults: DataResponseRow[],
  aggregationMethod: string,
  profiles: Profile[]
) {
  const responsesById: { [id: string]: any[] } = {};

  for (const i in profiles) {
    if (aggregationMethod === "count" || aggregationMethod === "sum") {
      //default all entries for counted or summed aggregations to 0 to start... will be replaced later if there is a response
      responsesById[profiles[i].id] = [0];
    }
  }

  for (const row in queryResults) {
    responsesById[queryResults[row].id] = queryResults[row].data;
  }

  return responsesById;
}

Python:

🐍 Note: There are many Python libraries that help with data cleaning and analytics. Two popular choices are pandas and matplotlib. However, this is a super straightforward solution using plain-vanilla Python.

def calculate_ltv (query_results, aggregation_method, profiles):
  responses_by_id = {}

  for  i in profiles:
    if aggregation_method == "count" or aggregation_method == "sum":
        # default all entries for counted or summed aggregations to 0 to start... will be replaced later if there is a response
        responses_by_id[i["id"]] = [0]


  for row in query_results:
    responses_by_id[row["id"]] = row["data"]

  return responses_by_id


mock_query_results = [{"id":1, "data":[112.50]}, {"id":2, "data":[16.48]}, {"id":3, "data":[42.97]}, {"id":4, "data":[96.41]}]
mock_aggregation_method = "sum"
mock_profiles = [{"id": 1}, {"id": 2}, {"id": 3}, {"id": 4}, {"id": 5}]


print(calculate_ltv(mock_query_results, mock_aggregation_method, mock_profiles));

To see them in action, here’s a jsfiddle for the TypeScript solution and an IDEOne instance for the Python solution.

Learn More:

To learn more about handling conditionals and aggregations in Postgresql, check out their docs

5 VSCode Features I Use Daily as a Full Stack Engineer

Teal Larson — Tue, 01 Jun 2021 19:50:29 +0000

As a software engineer, there are times you'll walk into a codebase that is already established and is some combination of: (a) new to you (b) much larger/more complex than other projects you've worked on and (c) uses a structure and some core libraries that are new to you. OR you're a mutant genius, in which case no need to read on (but I would like to know more).

Having the "mind of a programmer" and being able to recognize patterns and connections will help, and so will pair programming and documentation. But personally, some of my favorite strategies are tools and shortcuts that I've picked up to use VSCode to help me work smarter without always having to do either of those.

^{Image credit: Giphy}

These five VSCode tools and shortcuts are ones that I use every day (if not every hour):

5. Search by file content

This is probably cheating, it's not really a hidden feature. But SEARCH! If that search bar on the left isn't your friend already, you're missing out. This search bar searches file contents. Remember the name of a function or variable but not what files it was used in? Looking to see if a function or variable exists elsewhere? Trying to make sure you removed all your //TODO comments and console.log() statements before you push? Yeah, search is my jam.

4. Search by file name

Cmd+p search (Windows: Ctrl+p)

Similar to the search on the left, but different in one key way: This search bar searches by file NAME! I spent way too long not knowing about this second search bar.

3. Search for settings

Cmd+shift+p (Windows: Ctrl+shift+p)

This one is just ::chef kiss::. I can't tell you how frequently I want to do something like toggle word wrap, reload the window, etc. Instead of remembering the hot keys for all of those settings, you can open up this search bar and quickly find the setting you need.

2. Go to definition

Cmd + click (Windows: ctrl+click)

Use this one on any variable, function, namespace, model... anything that was defined somewhere else. VSCode will open up wherever it was defined in a new tab for you. Boom.

1. Go to references

Right click, choose "go to references"

Similar to "Go to definition", but I think this one is a level up. Go to references will show you everywhere in the codebase whatever you're looking at is referenced. This is great for seeing where a function might be in use before you modify it, for instance. I have learned so much about new codebases by browsing with "Go to references".

Additional Resources

Some other tools I use daily:

Prettier Code Formatter - Automatically tidies up your formatting.
Bracket Pair Colorizer - Never miss your closing bracket again. (I'm actually realizing I never loaded this on my work setup 😱, but I use it at home.)
Git Lens - I love this one for knowing who's worked on different parts of the code base and when!
OhMyZsh - Makes working in the terminal 10000x less intimidating (and faster!)

Build a Responsive Mega Menu with React Bootstrap

Teal Larson — Thu, 13 May 2021 22:48:25 +0000

Having clear and accessible navigation is huge for website conversions. Sites with poor navigation are frustrating to use. Nested navigation menus are a common way to help keep top-level navigation to a minimum, but they can have major usability issues. A better way to handle a large number of links in a dropdown is to create a mega menu. Recently, we gave our site navigation a face lift using mega menus.

Since both our core product and our website are open source here at Grouparoo, let’s dive in and take a look at how we built out a mega menu using our stack.

First, What’s a Mega Menu?

This!

A mega menu is a way to have multiple columns (or more!) of items within your dropdown menu. Some key things to consider:

Make sure you have enough items within your dropdown to warrant a mega menu
Figure out how you want to arrange the items within your menu

Recently, we’ve been adding a lot of content to our site. We wanted to link more pages in our navigation, but still keep the top level navigation bar minimal. So we went with a mega menu.

Let’s Build

For this tutorial, we'll be building this copycat mega menu:

We'll be working off a boilerplate project
with NextJS, React Bootstrap,
SASS, and Fort Awesome
already imported and ready to go. Coffee themed, because of course.

React Bootstrap, and Bootstrap in general are great. The built-in components, classes, and utilities save a lot of time building responsive layouts, and they're accessible by default. They’re also super flexible. For those less comfortable with front end, Bootstrap's documentation is full of copy-and-pasteable examples to get started making modern, accessible sites. And once you've been working with Bootstrap for a while, it becomes almost second nature to Frankenstein pieces together like we're about to do.

💡 To get started, fork this
repo and npm install!

Here is our Navbar element starting out:

When developing our mega menu for Grouparoo, I started with this Figma mockup. From there, I looked at what React Bootstrap components to use. We did end up making a few design changes further into the process, but it all started with:

We're going to build something similar where the "events" link currently lives on our template.

Let's start by adding the following into /components/navigation.js in place of the current Nav.Link for events:

<NavDropdown
  className="pr-2 py-2 align-text-top"
  title="Events"
  id="basic-nav-dropdown"
>
  <Container className="eventsNav pt-0 mt-0">
    <Row>
      <Col xs="12" md="6" className="text-left">
        <Dropdown.Header>
          <FontAwesomeIcon
            color="black"
            icon={"concierge-bell"}
            size="1x"
            className="pr-1"
          />
          {"  "}
          Catering
        </Dropdown.Header>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Corporate
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Private
            </a>
          </Link>
        </Dropdown.Item>

        <Dropdown.Divider />
        <Dropdown.Header>
          <FontAwesomeIcon
            color="black"
            icon={"chalkboard-teacher"}
            size="1x"
            className="pr-1"
          />
          {"  "}
          Classes
        </Dropdown.Header>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Barista 101
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              History of Coffee
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Intro to Cafe Snobbery
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Divider className="d-md-none" />
      </Col>

      <Col xs="12" md="6" className="text-left">
        <Dropdown.Header>
          <FontAwesomeIcon
            color="black"
            icon={"building"}
            size="1x"
            className="pr-1"
          />
          {"  "}
          Rentals
        </Dropdown.Header>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Fireside Room
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Roasting Room
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Header>
          <FontAwesomeIcon
            color="black"
            icon={"sun"}
            size="1x"
            className="pr-1"
          />
          {"  "}
          Seasonal
        </Dropdown.Header>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link" role="button">
              Coldbrew Night
            </a>
          </Link>
        </Dropdown.Item>
        <Dropdown.Item>
          <Link href="/">
            <a className="nav-link text-wrap" role="button">
              Campfire Coffee Class
            </a>
          </Link>
        </Dropdown.Item>
      </Col>
    </Row>
  </Container>
</NavDropdown>

Here's where we're at:

It's all there... but obviously in need of some help. I applied a custom className
of eventsNav to the dropdown container knowing I'd need to add some SASS. It is
wise to avoid custom styles (inline or on a stylesheet) if possible when working
with Bootstrap as it can make debugging more difficult. However, sometimes, to strictly override the Bootstrap styles, it's necessary. Add the following to /styles/styles.scss
:

.nav-link {
  font-size: 0.95rem;
}

#basic-nav-dropdown {
  font-size: 0.95rem;
}

#seeMoreLink {
  color: #607d8b;
}

#seeMoreLink:hover {
  color: black;
  font-weight: 400;
}
.dropdown-menu {
  padding: 1em;
}

.dropdown-item:hover {
  outline: none;
  box-shadow: none;
  background: none;
}
.dropdown-item a:hover {
  color: black;
}

.dropdown-item {
  height: 2em;
  padding-left: 0em;
}

.dropdown-header {
  font-weight: 600;
  padding-left: 0em;
}

@media only screen and (min-width: 600px) {
  .eventsNav {
    width: 22em;
    padding-bottom: 1em;
  }
}

Most of those rules are just visual adjustments to match fonts, remove text decorations, etc. The ultra important rule there is the final @media query that sets the width of .eventsNav. That rule is how we tell Bootstrap we want our dropdown menu's container a specific size.

Et voila! A mega menu showcasing multiple categories worth of pages (all the links currently point to home, but they work!):

And on mobile additional divider divs appear and the columns expand to full container width. Again, Bootsrap's utilities for working with screen size breakpoints are 👌:

Check out the original version live here or star our site repo or core product to see more. Or better yet, we're open source! Drop us a PR!

Apple Migration Tips for M1 Macs

Teal Larson — Thu, 29 Apr 2021 22:38:27 +0000

Last week, I upgraded to a M1 Macbook Pro. I got it configured for development and 48 hours later, through a series of unfortunate events and hardware failure, I ended up with a second M1 Macbook Pro instead. The transition between computers wasn’t too bad thanks to Apple’s Migration Assistant.

I ran into an interesting situation, though. About 90% of the migration worked as expected or better, but the other 10% presented some puzzling blockers. Luckily, I worked through all the weirdness so you don’t have to! Let’s chat the good, the bad, and the ugly of migrating between Apple M1 Macs using Apple Migration Assistant.

Apple Migration Assistant makes switching machines nearly seamless.

The Good: Applications and data stay mostly intact

I mean, this is what Apple Migration Assistant bills itself as doing, so I’m not sure if you get points for doing what is expected of you, but it’s truly great.

While most of my work is regularly backed up online, I do run a few programs locally. More on apps to come, but I was happy to see that, at the very least, VSCode and Homebrew were still alive and kicking. My SSH configurations were good to go which was really nice. Even my databases, which were installed via Homebrew, were up and running!

I was pleasantly surprised to open Terminal on my new machine and see my most recent tabs still there. What’s more, they still had the same code I’d left them with which felt somehow cozy in a weird, nerdy way.

The Bad: Get ready to re-set a lot of permissions

Why on earth Apple remembered that I ran pnpm install two days ago, but not that Chrome has permission to share my desktop and camera, I have no idea. I also had to sign back into iCloud a lot of times. Fairly annoying? Yeah. But doable.

The Ugly: Apple Migration Application Purgatory

While all my apps transferred over correctly, a few had some bizarre behavior. Bizarre as in when I clicked on them nothing happened. Nothing on the screen, nothing on the Activity Monitor, zilch. I rebooted, uninstalled, deleted cached files, and reinstalled multiple times. Still no activity.

Before I move on, it’s important to know about an application called Rosetta. You can’t run software built for an Intel chip on the new M1 chips. Rosetta acts as a middle man. According to Apple, “Rosetta 2 works in the background whenever you use an app built only for Mac computers with an Intel processor. It automatically translates the app for use with Apple silicon.” In an ideal case, you won’t even know Rosetta is there aside from maybe a slower launch time.

This alert would have been handy!

When you go to launch an app that needs Rosetta, MacOS should prompt you to install Rosetta2 if you don't have it yet. And it does! Except after a migration. I ran into this with a screen sharing tool we use daily here at Grouparoo.

I’m not entirely sure why Rosetta doesn’t migrate (or come native) if it’s used by so many apps right now, but it doesn’t.

What was happening with my mysteriously inactive apps was that they migrated just fine, but couldn’t be executed. MacOS wasn’t registering that it was my first time running the application, either, so I didn't get a prompt to install Rosetta2. This is what I’ve come to term "Apple Migration Purgatory ™ ". The program ends up just… sitting there. Doing nothing. Fully installed, but fully unreadable, having its own little existential crisis.

I made this discovery a few headaches later, when I went to install App Cleaner. App Cleaner is a handy tool that can show you every file associated with a given application. And guess what popped up when I installed it… an alert to install Rosetta2. Just like that, my other software was suddenly usable now too!

There were a few other small, similar hiccups. While Homebrew migrated over, for some reason my XCode CLI tools did not (and again, no prompt… they just didn’t work).

Overall, if you’re running into issues with your Mac after migrating, take a look at whether you need to install or update Rosetta or XCode.

TL;DR

If applications are not running as expected after migrating your computer, check that Rosetta2 and XCode CLI tools are installed and up-to-date:

sudo xcode-select --install  # install xcode tools
softwareupdate --install-rosetta  # install rosetta

Take Smarter Notes to Boost Understanding and Memory!

Teal Larson — Wed, 17 Mar 2021 00:57:59 +0000

This past year has been crazy hard on us all. A few weeks ago I really felt like I hit a wall with learning new things, career growth, all of it. So I shifted my focus a bit.

Giving Back

Now I'm trying to spend part of my work time creating resources to help those just starting out their journey learning to code!

So far I've done articles on:

Agile methodologies and teachers
The Dutch Flag quick sort (and currently in drafts: Boyer-Moore-Horspool, my favorite string search!)

Today, I'm reaching back to my days spent literally studying how people learn...

^{Sample of my Cornell Notes Notion template}

Why Cornell Notes Matter

Today I'm taking it back to my teaching roots with a learning resource! My favorite notetaking style to teach was Cornell Notes. It was a part of the AVID (Advancement via Individual Determination) skills that I taught. Essentially it involves:

Taking notes using ideas, shorthand, sketches, etc. (rather than full sentences)
Going back to add a main idea or guiding question for each section
Summarizing each page based only on the main ideas/questions (cover the notes!)
Reviewing the notes multiple times (I did 24 hour, 48 hour, and one week later)

Developing the main ideas, then by summarizing from those main ideas only help to build connections and process what was learned, versus regurgitating information. The review helps to cement those neural pathways each time.

Get Started!

I've really fallen in love with Notion recently. Naturally, I created a Notion template for Cornell Notes🙌. It includes a notebook and notetaking sheet that you can duplicate. It's designed to use Cornell Notes' review and repetition strategies to boost memory and understanding. I hope you find it useful!

^{Preview of the Notebook layout}

Free Template:

Get the template here and duplicate it to your Notion workspace!

Teachers: The Agile Development OGs

Teal Larson — Tue, 02 Mar 2021 18:03:04 +0000

While I've been coding off and on since grade school, my first career was as a teacher. I specialized in working with at-promise youth and students with low literacy. My last teaching position was as a middle school reading specialist. I had ~100 students a day, all considered "below standard" in their reading skills. I also had no set curriculum.

Teaching, at least how I have seen it practiced, is an inherently agile workflow.

Designing and implementing my own curriculum was a huge undertaking. It morphed yearly, quarterly, monthly, weekly, even hour-by-hour based upon need. Even teachers with a curriculum dedicate hours adapting it to their students' needs.

When I first decided to pivot into a tech career, I had never heard of "agile software development". The more I learn about and see agile in action, the more I realize that teaching, at least how I have seen it practiced, is an inherently agile workflow. Many parts of teaching include the foresight and planning in Waterfall style development. But in an even bigger way, teachers need to be quick on their feet and adapt on the fly. And that is what agile is about, adapting to changing needs.

^{image via Unsplash}

Core components of agile workflow

I started to compare my work as a teacher to what I was learning about agile. I read through the Agile Manifesto, replacing "customer" with student. I have to say, the metaphor fits. The items below are adapted straight from the Agile Manifesto.

# Early and continuous delivery of a useful product
# Welcome changing requirements, even late in development
# Frequently delivered product (weeks rather than months)

Usable Information -- early and frequently

Students can't wait until 30 minutes into a lesson to get information they can act on. They need relevant, actionable learning quick and often. Not only that, teachers need feedback. Is the "product" (the teaching) was having the intended outcome. Is it usable in the intended fashion? Does the teacher need to pivot the lesson?

As a teacher, it is so important to get incremental feedback. Waiting until the end of a week or month-long unit to check in with the "customer" is a recipe for disaster.

Providing an MVP Guides Efficiency

Customers are more satisfied with a product when they receive a useful product as soon as possible. In agile this is called a "minimum viable product". The top priority features get completed first as part of the MVP. Then, the team can see how their customer interacts with the product and gather feedback.

This not only increases customer satisfaction, but also the engineers' efficiency. This early information lets the team know if their plans need adjusting right out of the gate. It helps keep everyone on the same page.

# Close, daily cooperation between business people and developers
# Projects are built around motivated individuals, who should be trusted
# Face-to-face conversation is the best form of communication
# Self-organizing teams
# Collocation and pair programming

Teachers Collaborate as a Way of Life

This set of principles are basic guidelines for effective collaboration in any setting.

As a reading specialist, I worked with at least eight different teams of professionals. These included grade level teams, subject area teams, district teams, and more. Luckily, each team worked smoothly overall. We were well-trusted by those around us to make the right decisions for student learning. The frequent face-to-face meetings I was a part of helped me get input and ideas from teammates. We were able to take information we had from our "clients" and adjust the sails of our plans.

Likewise, in an agile environment, the onus is on teams completing work instead of external micromanagement.

Pair Programming

An interesting part of agile is "pair programming". In pair programming, one programmer is a "driver" and the other is the "navigator". The navigator thinks out loud, walking through the overall directions. The driver is the one doing the typing itself. These roles are to switch every few minutes. In the long-run, this helps spread knowledge across a team so all become experts. This reminds me of observation rotations. Teachers would sometimes go watch other teachers during their own planning times to gain insight and ideas.

^{image via Unsplash}

# Sustainability/the ability to maintain a constant pace
# Excellence through reflection
# Simplicity — the art of maximizing the amount of work not done

The Notebook

As a reading specialist, I was "a part" of many teams, but I was also apart from them. I had an outsider view into their inner workings. One team I worked with was especially great at working efficiently.

Their reflection fueled their simplicity, which led to a sustainable practice.

They completed team meetings in an hour flat or less each week. Their students were engaged, knew expectations for their assignments, and completed quality work.

You know what their secret was? They spent a good chunk of their meeting time in reflection. They also kept a running notebook reflecting on what had gone well (or not). It was a simple composition notebook where they recorded outcomes and reflections. This notebook served as a wonderful reference when they were planning. They knew if they'd tried something similar before and what had went well (or not). Their reflection fueled their simplicity, which led to a sustainable practice.

The reflection, simplicity, sustainability cycle

Likewise, agile software development encourages keeping a constant pace. This means there aren't quick accelerations followed by burnout. Simplicity makes an even pace achievable. At first glance, agile development seems to have less up front planning than waterfall. This may be true, but a solid plan is essential in agile development too to keep a steady pace. That planning should be effective and adaptable and, of course, fueled by reflection. Reflective and adaptive planning are crucial in today's rapidly changing world.

# Welcoming changing requirements, even late in the game

Rolling with the Punches

One trait that makes or breaks a teacher's success is flexibility. The plans for a day (or week) may change for any number of reasons. Teaching is a series of moving targets. And while flexibility is key, teachers also maintain their vision.

Flexibility for the sake of growth is the name of the game in the 21st century.

The Agile Software Manifesto claims that being adaptive gives customers a competitive advantage. To be successful, it is necessary to be able and willing to pivot while maintaining vision. Failing to do so may put another competitor ahead in a day and age where the playing field moves constantly. Flexibility for the sake of growth is the name of the game in the 21st century.

^{image via Unsplash}

A final note:

Breaking into the software engineering and web development world can feel intimidating. There are so many new terms and acronyms that everyone else seems to already know. At times, I felt I would never catch up with it all.

I've spent some time speaking with mentors of mine in software engineering. I keep hearing that knowing a programming language doesn't **really* make you a good programmer*.

What it comes down to is problem solving, grit, planning, ability to learn, and flexibility. Every teacher I've ever worked with has those in spades. My fellow teaching ex-pats, you're going to do great things!

Resources:

Want to learn more about program management? Check out these resources to get started:

The Agile Manifesto - Might as well start by going straight to the source! They break down the four key values and twelve key principles of Agile.
Atlassian's guide on Scrum - Atlassian has SO much material on Agile work environments! I especially love this page. Scrum, kanban, and agile all get thrown around a lot. This article hits the nail on the head if you're struggling to see how they relate. (And for the record, I'm team scrumban)
Atlassian's guide on agile vs. waterfall -- No surprise, this article is biased in favor of an agile workflow. But, it does a succinct job pointing out key differences between the two styles.
Pathlight's Program Manager page -- Pathlight is great for exploring different roles in the tech industry. Their program management page breaks down what the day-to-day flow is like and has helpful resources. Pathlight's Slack community, Breaking Into Tech, is excellent for connecting with other tech professionals!

The 'Dutch Flag' Quick Sort

Teal Larson — Mon, 22 Feb 2021 17:58:55 +0000

Is it weird to have a favorite algorithm? I definitely have a top four. Maybe it's because they remind me of puzzles I loved solving as a kid -- when I was growing up, my dad never let us get a Nintendo. Instead, I grew up solving logic puzzles in my spare time. And... I still love them. I think that's why I loved the data structures and algorithms prep in my bootcamp and why I've enjoyed studying for technical interviews.

Over the next few weeks, I'll be sharing my favorite data structures and algorithms problems that I've worked with. Starting with... quick sorting by a pivot point, AKA the Dutch flag problem.

^{Image credit: Unsplash}

So what's the big problem?

The Dutch Flag problem comes to us from the 1970's thanks to in his book, A Discipline of Programming Edsger Dijkstra.

The problem is usually presented in some form of the following:

Given an array of 0s, 1s, and 2s, sort the items in-place in ascending order.

^{leetcode.com uses a color sort scenario to present this}

To me, the solution for this is a beautiful sort of "controlled chaos". Once we get started, items in our array move all over the place, but thanks to some thoughtful pointers, we complete this problem in one fell swoop through the data.

Why would I use this solution?

Some quicksort algorithms can take up to O(N^2) runtime if there are a large number of repeated items like we have here. The algorithm outlined below works with any integer range input so long as a pivot point is given (for example an array with integers between 0-7 and a pivot point of, say, 3 could be sorted in this same way). The only difference would be a tweak to the if statements, and the inclusion of an additional argument (the pivot). The method I outline below solves this problem in O(N) runtime, and 0(1), or constant, space.

Let's go!

1. Initialize Variables

This solution depends on the use of three pointers. We'll start by initializing two of them -- a high pointer and a low pointer -- as the last and first items in our array respectively. The third we'll initialize as i -- this is where we will track what item we are evaluating.

The high and low will track what space we should swap a high or low value to. So essentially "low" is one index AFTER the last 0 we've placed so far, and "high" is one index BEFORE the last 2 we've placed so far. And... since we haven't placed ANY yet, they are at the exact beginning and end of our array.

Javascript

sortColors = (nums) => {
  let low = 0;
  let high = nums.length-1;
  let i = 0; 

};

Python

class Solution(object):
    def sortColors(self, nums):
        high = len(nums)-1
        low = 0
        i = 0

2. Set up our loop syntax

Now, we know we need to visit each item to evaluate it. That means we'll need a loop. For this problem, we'll run a while loop while i <= high. Why do we only need to run it while i <= high? Well, because we know that everything PAST high has already been sorted into place. We KNOW they are 2's. Therefore, there's no need to evaluate them a second time.

Since we know we're returning an updated version of the same array, we'll throw our return statement in there now, too.

Javascript

sortColors = (nums) => {
  let low = 0;
  let high = nums.length-1;
  let i = 0; 

while (i <= high) {
  if(nums[i] === 0){

  } else if (nums[i] === 2){

  } else {

  }
}
return nums;   

};

Python

class Solution(object):
    def sortColors(self, nums):
        high = len(nums)-1
        low = 0
        i = 0

        while i<= high:
            if nums[i] == 0:

            elif nums[i] == 2:

            else:

        print nums

3. Getting down to business -- swapping items

Now that we're all set up, let's work through what will happen at each item in our array.

If nums[i] is == 0, we will swap the value of nums[i] with nums[low] and increment i AND low. If nums[i]==2, we do the same swap but with [high] and decrement high. However this time we don't increment i. Why is that?

Logically, we know that nums[low] is a 1 (unless we're at index 0). How? Because we know that we must have already evaluated it and decided it didn't need to go anywhere. Therefore, it must be a 1, so we can just increment our i and not worry about it.

However, swapping from nums[high] we have no clue what we're getting really, it's from the end of the array, after i. Therefore, after we swap with nums[high] we do NOT increment i because we need to evaluate whatever just got swapped in there!

Javascript

sortColors = (nums) => {
  let low = 0;
  let high = nums.length-1;
  let i = 0; 

while (i <= high) {
  if(nums[i] === 0){
      [nums[i], nums[low]] = [nums[low], nums[i]];
      low++;
      i++;
  } else if (nums[i] === 2){
      [nums[i], nums[high]] = [nums[high], nums[i]];
      high--;
  } else {
      i++;
  }
}
return nums;

Python

class Solution(object):
    def sortColors(self, nums):
        high = len(nums)-1
        low = 0
        i = 0

        while i<= high:
            if nums[i] == 0:
                nums[low], nums[i] = nums[i], nums[low]
                i += 1
                low +=1
            elif nums[i] == 2:
                nums[i], nums[high] = nums[high], nums[i]
                high -=1
            elif nums[i] == 1:
                i += 1
        print nums

Here's a brief run through using the sample array from above.

First, we swap the value at i with the value at high and decrement high.

Another 2, so same thing again.

Next are a few ones... We increment i and then at the next item (also a 1) we increment again.

Swap arr[3] with low and increment i and low.

Another 1, so we increment i and then.....

Hopped over arr[4] is a 1 so we increment, then arr[5] is a 2, so it technically swaps with itself, then breaks the loop as i is higher than i.

Hooray! All sorted out!

Now is when you will want to run more tests. Anytime you're working on a problem like this, you'll want to think about what "edge cases" could throw you for a(n infinite) loop.:

We know our range only contains positive integers, so no need to worry about negatives.
What if we got an empty array?
What if our array was all 0's? All 1's? All 2's?
What if it was already sorted?
What if it was already sorted in descending order?

I will leave you to check those out on your own.

^{Image credit: Unsplash}

Before I go

As a final note... you can solve all the problems you want, but in the end, a big part of the interview is being able to clearly communicate what is happening in your mind. In my experience talking through my thinking while writing (or typing!) as a teacher, it gets much easier with practice. It becomes second nature eventually. Seriously, I think out loud all day long, for better or for worse. Talk through the problems you're practicing as you solve them. Tell anyone who will listen -- your dog, your cousin, your partner, yourself -- and then tell me how it goes! These skills will not always come easy, but they can come with practice and hard work.

Free resources:

There are so many places to practice and learn about data structures and algorithms! Here are a few free options that I've found helpful:

Leetcode - Practice problems for data structures and algorithms. Really easy to search by topic or difficulty.
HackerRank - Another practice problems site. HackerRank tends to give more of a background story for their challenges. Some people love that, others don't. Some employers use their platform to screen candidates.
Code Signal - This was recommended to me by a mentor. He's used it in the hiring process as a screener. The practice problems are presented in a more gamified way than the sites above.
Geeks for Geeks - Really great guides for solving problems. They present multiple solutions and outline the runtime for them. It's worth noting most solutions are only given in a limited number of languages, but the logic shared is so valuable.
YouTube - So many great channels for data structures and algorithms. My top two favorites are Back to Back SWE and Tech Dose.

DEV Community: Teal Larson

Bootcamp to Job Hunt: What I did

Spruced up my online presence

Shared about what I was doing/learning

Never stop learning and building

Was ridiculously curious

Hung out at Hackathons and Meetups

Resources

Nevertheless, Teal Coded in 2022

My biggest technical goals are…

My biggest technical achievements are…

Advocating for myself looks like…

I pledge to support women, non-binary folks, and other minorities in tech by…

I’m excited about…

Data cleaning null values -- SQL or Code?

Let's clean some data

Option 1: With a SQL Query

Using COALESCE

RIGHT OUTER JOIN

UNION with a list

Option 2: After the SQL Query 🥇

TypeScript:

Python:

Learn More:

5 VSCode Features I Use Daily as a Full Stack Engineer

5. Search by file content

4. Search by file name

Cmd+p search (Windows: Ctrl+p)

3. Search for settings

Cmd+shift+p (Windows: Ctrl+shift+p)

2. Go to definition

Cmd + click (Windows: ctrl+click)

1. Go to references

Right click, choose "go to references"

Additional Resources

Build a Responsive Mega Menu with React Bootstrap

First, What’s a Mega Menu?

Let’s Build

Apple Migration Tips for M1 Macs

The Good: Applications and data stay mostly intact

The Bad: Get ready to re-set a lot of permissions

The Ugly: Apple Migration Application Purgatory

TL;DR

Take Smarter Notes to Boost Understanding and Memory!

Giving Back

Why Cornell Notes Matter

Get Started!

Free Template:

Teachers: The Agile Development OGs

Core components of agile workflow

Usable Information -- early and frequently

Providing an MVP Guides Efficiency

Teachers Collaborate as a Way of Life

Pair Programming

The Notebook

The reflection, simplicity, sustainability cycle

Rolling with the Punches

A final note:

Resources:

The 'Dutch Flag' Quick Sort

So what's the big problem?

Why would I use this solution?

Let's go!

1. Initialize Variables

Javascript

Python

2. Set up our loop syntax

Javascript

Python

3. Getting down to business -- swapping items

Javascript

Python

Before I go

Free resources:

Using `COALESCE`

`RIGHT OUTER JOIN`

`UNION` with a list