DEV Community: Marie-Elise

Understanding Hash Tables

Marie-Elise — Thu, 11 Mar 2021 04:14:08 +0000

What's so great about hash tables?
What do hash tables look like IRL?
How do hash tables work?
So what's the catch?
How do I implement a hash table?
Where can I learn more?

What's so great about hash tables?

Hash tables are an excellent data structure to use when you're working with 2 related types of data. This relationship is established by using key-value pairs, where one data type is assigned as the key, and the other data type is assigned as the value.

Hash tables are ideal when you need to insert, search, and delete objects from your dataset often. In fact, hash tables perform these operations so efficiently that they have an average time complexity of O(1)—that's right, constant time!

What do hash tables look like IRL?

Hash tables have many real-world applications, but here are some practical examples.

Mapping a price to an item
Mapping web addresses to IP addresses (DNS Resolution)
Mapping an ID number to an employee
Mapping a hotel room number to a guest
Mapping a piece of music to a composer (see implementation below)

How do hash tables work?

Hash tables go by many names: dictionary, associative array, map, hash map, hash, etc. They're built into most programming languages but it's important to understand how they work under the hood, even if you never have to implement one from scratch.

Hash tables are powered by 2 components: a hash function and an array table. Here's a breakdown of how these components process and store data.

A key-value pair is passed to the hash function.
The hash function hashes the key to find an index location.
The value is stored in the hash table at the hashed index location.
Repeat Steps 1-3 until all key/value pairs are stored.
When the table gets full, the array is doubled in size. All previously stored data is re-hashed and stored in (potentially) new index locations.

Using the hash table structure that's built into a programming language means that you don't have to worry about:

choosing a hash function
handling collisions
resizing your array

Why are hash tables so fast?

When you need to look up a value, the hash table will perform a direct lookup of the key that corresponds to that value. There is no need to sort or iterate through a list to search for the data!

Tip: If you're interested in building your own hash functions and tables, check out William Fiset's Easy to Advanced Data Structures course. You'll learn how to choose the right hash function for your use case, as well as different techniques for managing collisions.

So what's the catch?

While hash tables provide many benefits, they're not suited for every situation. Here are a few important things to keep in mind.

Hash tables aren't meant for ordered datasets.
Hash tables won't work if you want to allow duplicate entries.
Collisions will occur. Make sure your keys are unique to reduce the chance of collisions.
Performance will slow as the hash table fills up.

How do I implement a hash table?

This one's for my fellow musicians! Let's set up a music catalogue that stores a piece of music as the key, and a composer as the value.

As part of my 2021 goals, I implemented the example below in both Python and JavaScript.

Example 1: Music catalogue in Python

#############################################
#create a hash table for the music catalogue
music_catalogue = dict()

#add a piece of music to the catalogue
music_catalogue["Symphony No. 5"] = "Beethoven"

#function to search the catalogue for a composer
def composer_search(piece):
  #retrieve the name of the composer if s/he is in the catalogue
  #this step isn't necessary but it's easier to visualize
  composer = music_catalogue.get(piece)

  #if the composer is in the catalogue, print his/her name
  if (composer):
    print(piece + " was written by " + composer)
  else:
    print("Error: composer not found!")

Now let's try out this catalogue by calling the composer_search function.

########################################################
#someone wants to find out who composed "Symphony No. 5"
piece = "Symphony No. 5"

#check the registry for "Symphony No. 5"
composer_search(piece)

The console output will read: Symphony No. 5 was written by Beethoven.

Example 2: Music catalogue in JavaScript

/////////////////////////////////////////////
//create a hash table for the music catalogue
musicCatalogue = {};

//add a piece of music to the catalogue
musicCatalogue["Symphony No. 5"] = "Beethoven";

//function to search the hash table for a composer
function composerSearch(piece) {
  //retrieve the name of the composer if s/he is in the catalogue
  //this step isn't necessary but it's easier to visualize
  const composer = musicCatalogue[piece];

  //if the composer is in the catalogue, print his/her name
  if (composer) {
    console.log(`${piece} was written by ${composer}`);
  } else {
    console.log(`Error: composer not found!`);
  }
}

Now let's try out this catalogue by calling the composerSearch function.

/////////////////////////////////////////////////////////
//someone wants to find out who composed "Canon in D"
const piece = "Canon in D"

//check the registry for "Canon in D"
composerSearch(piece);

The console output will read: Error: composer not found!

Where can I learn more?

Here are some great resources to dive deeper into hash tables and hash functions.

Books:

Grokking Algorithms by Aditya Bhargava
Introduction to Algorithms by Cormen, Leiserson, Rivest, and Stein

Courses:

Easy to Advanced Data Structures by William Fiset

Blogs:

Taking Hash Tables Off The Shelf by BaseCS
Hashing Out Hash Functions by BaseCS

Happy Coding! 👩🏽‍💻

Leveling Up in 2021

Marie-Elise — Sat, 09 Jan 2021 17:38:25 +0000

Reflecting on 2020 was eye-opening for me. While I never had a shortage of goals I wanted to accomplish, I struggled with organizing those goals into focused efforts. So this year I committed to a different approach, and created a 3-step process to keep myself on track for 2021.

Set a focus for the year.
Plan goals based on that focus.
Establish milestones to stay on track.

🌀 2021 Focus

I chose 3 areas of programming that I want to focus on and master.

JavaScript
Python
Deep Dives: Data Structures & Algorithms

🎯 Goals

With my priorities in mind, I established 5 measurable goals to keep me on track.

Publish 25 blog posts. Write about topics related to my Focus areas.
Complete 3 Udemy courses: Learning Algorithms in JavaScript, Python for Data Structures, The Complete Javascript Course 2020.
Finish my last 2 Computer Science classes.
Attend 2 tech conferences: Grace Hopper Celebration, PyCon.
Complete my 2021 Reading List.

🏔️ Milestones

I divided my 2021 calendar into blocks—I chose two-month terms because that worked best with my university's schedule. I created milestones by dividing my goals into smaller tasks, then I assigned each milestone to a specific term.

Tip: Keep your workload in mind as you assign milestones. For example, my CS classes have an intense workload, so I know I won't have time to work on any other goals during Term 2.

Summary

I set a focus for 2021 to help me prioritize my time and structure my goals. I also created milestones to keep me motivated and I'm excited to see how this approach works IRL.

Have you set your goals yet? What will you be working on this year?

Let's make 2021 a good one! 🥂

Wrapping Up 2020

Marie-Elise — Thu, 31 Dec 2020 16:42:17 +0000

2020 didn't quite go according to plan, but it still had plenty of silver linings. I spent some time this week reflecting on the last 365 days and even though my 2020 resolutions were a bit unrealistic, I had a more productive year than I thought.

🌟 Professional Wins

Being a full-time dev and a full-time student made time management a struggle. Planning ahead consistently—and planning well—was key for reaching these milestones.

Led a corporate website redesign and received a Graphic Design USA award for the project.
Finished 11 classes towards my Computer Science degree. Only 2 more to go!
Attended 3 tech conferences: DrupalCon, AdobeMAX, GitHub Universe.

👩🏽‍💻 Side Projects

With the switch to working remotely, my commute was a lot shorter and I used the extra time to work on my side projects.

Redesigned my portfolio.
Started blogging.
Started maintaining my CS program's Wiki site.

⛰️ Skills Gained

Between CS classes and self-learning, I picked up some new skills. I especially loved learning AWS, Python, and React.

Cloud Computing (AWS)
Python
ReactJS
SQL
Swift
WordPress

📚Favorite Reads

Audiobooks made it possible to read and adult at the same time. (Laundry has never gone by so quickly. 😂 🧺)

Digital Minimalism by Cal Newport
It Doesn't Have To Be Crazy At Work by Jason Fried & David Heinemeier Hansson
Quiet: The Power of Introverts in a World That Can't Stop Talking by Susan Cain
Scrum: The Art of Doing Twice the Work in Half the Time by Jeff Sutherland
The Age of Surveillance Capitalism by Shoshana Zuboff
The Bullet Journal Method by Ryder Carroll

Tip: Check if your local library has a partnership with Libby—it's an awesome platform for ebooks and audiobooks. Just enter your library card number and you're good to go!

Summary

Don't forget to take a moment to reflect on how far you've come this year. Now let's count down to 2021...cheers! 🎊

Disclaimer: This post contains affiliate links.

How To Plan A Redesign

Marie-Elise — Sat, 26 Dec 2020 20:43:46 +0000

I recently led a corporate website redesign, which involved a move from Drupal 7 to Drupal 8. I wanted to share my process for tackling this kind of CMS-based project.

Disclaimer: The process outlined below is a guide. Feel free to adapt it to fit the scope of your project.

Setup
Phase I: Requirements Gathering
Phase II: Research
Phase III: Information Architecture
Phase IV: Wireframe
Phase V: Design
Phase VI: Build
Phase VII: Content Migration
Phase VIII: Test
Phase IX: Deploy
Phase X: Maintain
Summary

Setup

Choose a project management application (Todoist, Notion, Basecamp, etc) and set up your project.

Create a section for each phase of the project.
Add tasks to each section as they come up.
Share the project with your team to keep everyone on-task and up-to-date.

I used Todoist for my redesign and appreciated the built-in shortcuts for adding tasks, tags, and due dates with one line of text. It was a huge timesaver in my busy office. That being said, I will probably try Notion or Basecamp next time—just to experiment with a different system. There are many other great PM choices out there though!

Phase I: Requirements Gathering

Gather the basic project requirements and confirm the "ideal" timeline for completion (if it's known).

If you're planning to use a CMS, research platforms now and get quotes if needed. Understanding the basic features and associated costs can help you identify the platforms that will work best for your project.

Tip #1: Don't commit to a timeline until the end of Phase II. Research can take time and reveal unknowns that could impact the scope of the project or the platform you end up choosing.

Tip #2: Set expectations early that the timeline is subject to change and that you will communicate any changes early and often.

Tip #3: Know who you need to communicate with—and get approval from—throughout the process. If this information is unknown, make sure to get approval from all stakeholders—at the very least—before starting Phase VI and Phase IX.

Phase II: Research

It's time to dive into UX research.

Steps:

Determine which types of research make the most sense for your project.
Implement your chosen research tactics and gather data.
Pull analytics from any available sources (e.g., Google, Facebook, Twitter).
Compile a report with all of your findings.
Discuss findings with your team and any additional stakeholders that need to be at the table.
Based on findings, brainstorm a list of all features that could address user pain points.
Feature Triage—distinguish "Must Have" vs "Nice To Have" features.

If you're planning to use a CMS, this is a great time to cross-reference your feature wishlist with the built-in capabilities of different platforms. You may realize that a must-have feature isn't included with certain platforms—and this could significantly alter your project timeline.

Phase III: Information Architecture

Information architecture refers to the way that content is organized on your site. One way that this architecture is represented is with navigation menus. A well-organized menu is essential to a good user experience.

Print out your existing sitemap and analyze the structure of your site (read: how the pages are organized). This is also an opportunity to conduct a content audit.

Is this content interesting or useful to your user?
Did the analytics highlight any common—or unexpected—paths that users are taking to access certain types of content?
Does it make sense to reorganize certain sections or pages?
Does it make sense to condense—or break up—certain pages?

Once you've reorganized your IA, you'll have an idea of the sections you'll need to create—along with the total number of pages you'll have to build—on your new site. This information is especially useful if you're using a CMS because it will affect the content types you'll have to build during Phase VI.

Tip: When the IA has been finalized, assign someone to start writing any new content that will be needed, and start proofreading existing content that will be migrated to the new site. (That includes confirming contact information, spell-checking names, flagging graphic elements that are no longer on-brand, etc.) It will take time to complete this process if your site is large.

Phase IV: Wireframe

Start sketching your wireframes! Grab a paper and pencil—or iPad and Apple Pencil— and start brainstorming. Don't be afraid to research other sites for inspiration, different layouts, etc.

If you're using a CMS, make sure that you sketch wireframes for each content type you'll be implementing on the new site.

Once your sketches are complete, create final versions of your wireframes with your UI software of choice. Some popular options include: AdobeXD, Sketch and Figma.

Discuss the wireframe options with your team and narrow down the layouts that will work best for your users.

Phase V: Design

Take your final wireframes and turn them into full-color, interactive prototypes. This is an important step for integrating brand elements into the wireframe. Feel free to experiment and create multiple prototypes.

If you're using a CMS, this is another opportunity to determine what features—from your prototype—are already built into your chosen platform. Determine if any custom modules need to be developed. Adjust your timeline accordingly.

Discuss the prototype(s) with your team and finalize the design. Send a link of the final prototype to all essential stakeholders. Make any necessary changes.

Phase VI: Build

Once the design is approved, it's time to start building! Set up your server, framework, platform, libraries, etc.

If you're using a CMS, you'll need to complete this phase in 2 stages.

Site Building—install the base theme, install modules, configure settings, etc
Custom Theming—customize the CSS, implement custom JS, build custom modules, etc

Tip #1: Incorporate accessibility best practices as you customize your theme.

Tip #2: Bugs will come up at this point in the process. Be prepared to alter your timeline at this point in the process. If you have to change your go-live date, communicate with all essential stakeholders. If you're not able to push the launch, revisit your feature wishlist and triage again. Consider what features can wait to be implemented until after the site is live.

Phase VII: Content Migration

Migrate your old site's content to your new platform. This can be done automatically or manually. An automatic approach may work best if you're migrating between two versions of a CMS platform. A manual approach may work best if your site is small or if your databases are not compatible. Make sure to research your options.

Tip: Incorporate any accessibility features that couldn't be added during Phase VI (e.g., alt text for newly-migrated images) at this point in the process.

When migration is complete, send a link for the test site to all essential stakeholders. Provide a deadline for users to test the new platform and proofread content. Encourage them to use different devices and browsers and make note of all feedback you receive (e.g., broken links, typos, features that don't work on certain browsers).

Phase VIII: Test

Now it's time for browser compatibility testing. There are two approaches you can take.

Manual testing—install different browsers on your device and pull up your site on each one to manually click through.
Automatic testing—subscribe to a browser testing service (like BrowserStack or Browserling).

Make note of any bugs that are identified and triage. Determine if/what problems need to be addressed before the go-live date.

Phase IX: Deploy

When testing is complete and your site has been approved, it's time to deploy! Confirm the go-live date and time, as well as the process for publishing the new site. Choose a non-peak time, preferably early in the week, to give yourself plenty of space to troubleshoot.

Phase X: Maintain

This phase often gets overlooked but as I work more with older sites, I appreciate the value of a well thought-out maintenance plan. It's easy for a site's IA to grow out of control over time—and for vanity pages to creep in. This is where a solid web content strategy comes into play. It will help you establish an audit schedule for a site's content, along with guidelines for managing that content. This will make long-term maintenance (and future redesigns!) less painful.

I'll write a future post with tips for developing a web content strategy.

Summary

Redesigning a website can seem overwhelming, but there is a systematic way to break it down and tackle it. While the steps outlined above are not necessary for every project, it worked well for my CMS-based redesign.

Have you tackled a redesign? Did you go about it in a different way? I'd love to hear about it!

Book Review: It Doesn't Have To Be Crazy At Work

Marie-Elise — Sat, 19 Dec 2020 21:25:05 +0000

Disclaimer: This post contains affiliate links.

It Doesn't Have To Be Crazy At Work is a manifesto written by Jason Fried & David Heinemeier Hansson, the creators of the productivity platform Basecamp. It describes the fundamental (and sometimes unconventional) values that define Basecamp's unique company culture.

At the heart of this book is the belief that distraction is the greatest enemy of quality work. Fried & Hansson focus on the negative impacts of distraction, how it occurs in the workplace, and what you can do about it.

Below are the distractions—and tips—that I found most interesting.

Distractions

Fried and Hansson argue that many companies focus on protecting their tangible assets—brand, data, secrets, investments, etc. As a result, they often fail to protect the greatest asset that they actually possess—their employees' time.

Employees are human beings, not productivity machines. They need breaks to recharge their minds and bodies. Their time and energy are finite resources. To make the most of these resources, companies should design work environments that encourage quality work by minimizing distraction.

Distraction seems to thrive in toxic company cultures, and while Fried & Hansson explore various "bad habits" that can emerge, these red flags stood out.

Sustained exhaustion as a badge of honor. Some companies have a culture of working unnecessarily long hours. Exhausted employees do not produce their best work.
Focusing on productivity above all else. This encourages people to focus on simply "being busy." Quantity != quality.
Treating co-workers like family. Companies that promote this idea create a culture of self-sacrifice. It puts employees in a position of choosing between work and their actual families.
Chasing goals at any cost. Goals are arbitrary, artificial targets that often lead companies to compromise their morals and integrity.

When employees are encouraged to work long hours—and fill up those hours with busywork and goal-chasing, the opportunities for distraction are endless. If those employees work in an open-office setting, the distractions multiply.

Tips

What I enjoyed most about this book were Fried and Hansson's tips for minimizing distractions. While they are tailored to the workplace, many of them can be applied to daily life. Here are the tips that I found most interesting.

Fight the presence prison

The authors describe the presence prison as what happens when you're always available and/or reachable. Your colleagues feel free to "stop in" and interrupt you with chit-chat, questions, favors, etc. This type of distraction can quickly derail your day. If you work in this type of environment, here are some tips for breaking free.

Create personal office hours. Set aside a dedicated time each week when you're available to answer random questions people have. This is especially useful if you're the subject-matter expert on a topic and people are used to stopping by with "a quick question."
Make your calendar private by default. And set your availability to "busy." When someone wants to speak with you, they have to formally request a meeting and describe the purpose of the meeting. This allows you to decide whether or not a meeting is necessary to address their question—and how much time you need to set aside.

Start "library days"

Have dedicated days where everyone has to observe "library rules." For example, no loud noises, no conversations above a whisper, etc. This tip is geared toward those who work in an open office, where everyday noises can be especially distracting.

Eliminate obligations

The only way to get more done is to have less to do. Focusing on time management will only take you so far. When push comes to shove, a day will never have more than 24 hours. Think carefully about your obligations and eliminate anything that is not essential.

TLDR;

If you're struggling with work-life balance, I can't recommend this book enough. Fried & Hansson's tips won't apply to everyone or every workplace, but you will find some valuable insights and advice regardless of your situation.

How to publish a ReactJS app on GitHub

Marie-Elise — Sat, 12 Dec 2020 21:27:57 +0000

GitHub Pages is a hosting service that lets you publish your projects to the web, directly from your GitHub repository. And it's free to use.

Pages is really useful if you need to get your portfolio projects up and running quickly. As you learn new skills and update your repos, you have peace-of-mind knowing that your projects can be published with just a few clicks. If you've ever had to unexpectedly share your portfolio with a potential client or recruiter, you know how valuable this can be!

So let's get started.

Step 1: Create a ReactJS app

Open your terminal.
Navigate to the directory where you want to save your project.
If you haven't installed Node.js or npm on your device, you can find instructions here.
Create your new app. This will be the local repository for the project.

npx create-react-app my-project
cd my-project

Step 2: Initialize a Git Repository

Log into your GitHub account.
Create a new repository with the same name that you used for your local repository. This will be your remote repository for the project.
Connect your local and remote repositories.

git remote add origin
https://github.com/my-username/my-project

Step 3: Build Your App

In the terminal, type npm start to spin up a local server on your device.
Open http://localhost:3000 to view your app. The page will automatically reload as you make changes.
Build your app!

Step 4: Publish to GitHub

When your project is ready to publish, bundle it by typing npm run build in the terminal.
Push your production-ready app to GitHub.

git add .
git commit -m "Add a short description of the changes you made."
git push -u origin master

Open your project's repository on GitHub.
Click on the Settings tab and scroll down to the GitHub Pages section.
Under Source, select the branch that you want to publish. The default choice is usually the master branch or the main branch.
Click Save and GitHub will display the URL for your project.

Tip: To learn more about configuring source branches, see this GitHub Docs page.

Step 5: Use a Custom URL

In your project's repository on GitHub, click on the Settings tab.
Scroll down to the GitHub Pages section.
Under Custom Domain, enter your domain name and click Save.

Tip: To learn more about configuring custom domains, see this GitHub Docs page.

Conclusion

GitHub Pages makes it easy to deploy and host web-based apps. If you need a simple, user-friendly way to publish your portfolio projects, give Pages a try!

DEV Community: Marie-Elise

Understanding Hash Tables

Table of Contents

What's so great about hash tables?

What do hash tables look like IRL?

How do hash tables work?

Why are hash tables so fast?

So what's the catch?

How do I implement a hash table?

Example 1: Music catalogue in Python

Example 2: Music catalogue in JavaScript

Where can I learn more?

Leveling Up in 2021

🌀 2021 Focus

🎯 Goals

🏔️ Milestones

Summary

Wrapping Up 2020

🌟 Professional Wins

👩🏽‍💻 Side Projects

⛰️ Skills Gained

📚Favorite Reads

Summary

How To Plan A Redesign

Table of Contents

Setup

Phase I: Requirements Gathering

Phase II: Research

Steps:

Phase III: Information Architecture

Phase IV: Wireframe

Phase V: Design

Phase VI: Build

Phase VII: Content Migration

Phase VIII: Test

Phase IX: Deploy

Phase X: Maintain

Summary

Book Review: It Doesn't Have To Be Crazy At Work

Distractions

Tips

Fight the presence prison

Start "library days"

Eliminate obligations

TLDR;

How to publish a ReactJS app on GitHub

Step 1: Create a ReactJS app

Step 2: Initialize a Git Repository

Step 3: Build Your App

Step 4: Publish to GitHub

Step 5: Use a Custom URL

Conclusion