DEV Community: Kristen Kinnear-Ohlmann

Using The Python Docstring To Document Functions

Kristen Kinnear-Ohlmann — Mon, 25 Jul 2022 02:54:07 +0000

I was working through a tutorial on Real Python and learned an interesting fact that filled a gap I had noted previously.

A few years ago, I wrote a small Python app to process data from a source to a SQL Server destination. I had been picking up small portions of Python since 2017; while I had enough knowledge to create a working solution, there were many things I know I would have liked to refactor or do more efficiently. One such item was the desire to provide a description for the functions I was abstracting out for the app.

In the Real Python tutorial, the teacher was discussing docstrings, a string literal. When it occurs as the first statement in a function, it performs as a special attribute and displays an explanation of the function. The best practice is that it should not be a repeat of the function signature, since that will be displayed already, but a brief explanation of purpose of the function.

Here is an example of a function without a docstring - only the function signature, if provided, is displayed:

def function1():
    return "Hi there"

Here is an example of function with a docstring - the contextual help displays the text from the docstring as well as the function signature, if any:

def function2():
    """Returns a greeting in Portuguese with no variable"""
    return "Ola, prazer em conhecer"

This clears up mysteries in your code, whether all your functions reside in the same file or not. You can quickly recall why you abstracted away the code and how you intended to use it. This functionality can and should be used for methods that are members of a class so developers using your code understand the purpose of the method. All of the same best practices will apply.

When I have an opportunity to refactor my data processing Python app, I will take advantage of docstrings to help me and other contributing developers quickly understand what each function is doing.

Favorite String Literals

Kristen Kinnear-Ohlmann — Mon, 11 Jul 2022 03:09:13 +0000

I was recently listening to a JavaScript tutorial on 2x speed when I caught something that caused me to slow down and rewind. The presenter was talking about strings, concatenation, and ES6 string literals. The statement that caught my attention I summarized as "Go ahead and start with template literals first so you don't need to change to backticks later when you need to use a variable".

JavaScript

// instead of concatenation
// start with a template literal
let numberOfCats = 5;
console.log(`I have ${numberOfCats} cats.`);
console.log(`Now I have ${numberOfCats+1} cats.`);

This struck me as very sensible! There are many advantages to using a string literal instead of a basic statement or simple concatenation and you would save yourself time in refactoring code if you were already using them. They are more readable than other ways of formatting strings; they look like normal sentences and allow you to more easily identify portions to change or update.

I realized I could apply this kind of strategy to some of the other languages I know as well:

Python

# instead of concatenation
# use an 'f' string in Python 3 right away
number_of_cats = 5
f"I have {number_of_cats} cats"

// instead of String.Format() (ex. Console.WriteLine("Hello {0}", "world"))
// use string interpolation
string numberOfCats = 5;
Console.WriteLine($"I have {numberOfCats} cats.");

By using these techniques right away in your code, you save time and effort and increase the accuracy of your code when changes occur.

Implementing A Dark and Light Mode Toggle

Kristen Kinnear-Ohlmann — Mon, 04 Jul 2022 01:58:15 +0000

I was surprised to see that, with my busy June schedule, a full month has passed since my last blog! I have worked on a couple of projects, both personal and professional, in that timeframe that I can write about in the near future.

Choosing The Next Visual ITU Alphabet Enhancement

An enhancement I wanted to make to the Visual ITU Alphabet site was to add a light and dark mode toggle. This has become a very common feature on sites, and I wanted to be able to swap to a less-intense version of colors when my eyes were tired.

Rather than beginning from zero, I did a quick Google search for example CSS toggles. I found the article 20 Best Toggle Switches [Pure CSS Examples] and liked the very first example, Dark Mode Toggle Switch.

Implementing The Example Toggle And Adjusting To Fit New Styles

Part of my process is to retype any code I am working with to give my fingers a chance to understand what the code is doing. After reconfiguring the page header to add a space for the toggle to be placed, I performed an initial implementation of the code exactly as the toggle appeared in the example.

There were a couple of items I identified for completion on this MVP that differed from the example:

I wanted the toggle to start in light mode, instead of dark mode as displayed in the example
I wanted to make the toggle a smaller, single size so I could use it in both smaller and larger displays without needing to resize
I wanted to add JavaScript to toggle the changes to the site

This was a good opportunity to work on my front-end skills!

The easiest part was to add some CSS variables to hold the various colors I planned to work with. This allows me to change my color scheme quite easily in the future between light and dark modes. I stuck closer to the default blue and purple colors for links to assist the user.

:root {
  --lightPrimary: #d8dbe0;
  --lightUnvisitedLink: #0000ee;
  --lightVisitedLink: #551a8b;
  --darkPrimary: #28292c;
  --darkUnvisitedLink: #0cadff;
  --darkVisitedLink: #dcd0ff;
}

After choosing a width for my toggle, I thought it would be a simple matter of calculation to get to the values I needed. I tried a lot of math, without a lot of success, before I decided to perform the changes by "eyeballing" what the two phases of the toggle looked like.

Part of the challenge was changing the toggle from light mode => dark mode to dark mode => light mode. Here are the phases of the original design:

Part of the challenge was resetting the toggle to show light mode first, represented by a round sun-like shape that I realized was simply a shape with a border-radius set. The dark mode shape was the light-mode shape with a box shadow added to it to cut out a crescent. I tried some mirror-image calculations in the Chrome developer tools so I could easily reason and see what the changes looked like. After trial and error, I was able to reverse the modes:

To implement the mode color changes, I was able to add some CSS classes I could toggle in my JavaScript function but I wasn't sure how to tackle the body color change. I took the following actions:

Add the primary dark and light colors to the index.js file

const colorLight = "#fff"
const colorDark = "#3d3d3d"

Add a function to listen for a click event that inspected the checkbox that was part of the example code

modeToggle.addEventListener("click", event => {
  if (modeToggle.checked) {
    setElementStyle(document.body, {
      backgroundColor: colorDark,
      color: colorLight,
    })
    setElementStyle(letterInputEntry, {
      backgroundColor: colorDark,
      color: colorLight,
    })
    let el = Array.from(document.getElementsByTagName("a"))
    el.forEach(item => {
      item.classList.add("dark-link")
      item.classList.remove("light-link")
    })
  } else {
    setElementStyle(document.body, {
      backgroundColor: colorLight,
      color: colorDark,
    })
    setElementStyle(letterInputEntry, {
      backgroundColor: colorLight,
      color: colorDark,
    })
    let el = Array.from(document.getElementsByTagName("a"))
    el.forEach(item => {
      item.classList.add("light-link")
      item.classList.remove("dark-link")
    })
  }
})

Add setElementStyle function that I located on another resource to abstract setting a style on an element that is used by the event listener above

const setElementStyle = (element, styles) => {
  Object.assign(element.style, styles)
}

After implementing these changes, I was able to toggle between light and dark modes, with each render displaying properly after each change:

Summary And Future Enhancements

The resulting toggle and functionality works well. There are some additional changes I would like to implement:

Determine how I can change body color together with the other CSS changes so I don't need to maintain variables in two files
Determine how to add additional color schemes
Determine how to adjust the associated images as well as the text color

The files that were updated for these changes:

This was good practice working with CSS and front-end styling. The identified enhancements will continue that practice and give me an opportunity to refactor the code further.

Using Input Element as Display

Kristen Kinnear-Ohlmann — Mon, 06 Jun 2022 03:18:08 +0000

This week I picked a project back up that I set aside - the visual ITU alphabet for ham radio operators. Hams may need to spell out words and the ITU alphabet defines a regular English "code" word for each letter to ensure the letter is understood over the air very clearly. I had had a difficult time in the past memorizing the proper words. I know that tying a visual to a concept can assist with memory, so I created Visual ITU Alphabet.

I was returning back through projects to add box-sizing to manage how the content fit on the page, and I recalled that I had to not yet resolved the slight shift when the display letter was clicked and changed to an input. I wanted to make the transition as smooth as possible between the display state and the input state.

The original layout of the page contained a block element to display the current letter, and a hidden input that was invoked when the block element was clicked:

<div id="display-frame">
  <div id="display-letter" style="background-color: blue"></div>
  <div class="hidden change-letter" id="change-letter">
    <input
      class="change-letter"
      id="change-letter-input"
      type="text"
      maxlength="1"
      pattern="[A-Za-z]{1}"
    />
  </div>
</div>

At some point after I released Visual ITU Alphabet, I created Minutes Only Timer for my husband. For that project, I resolved the issues of having an input that accepted numbers for time by using an input element for both the display and the input. I realized I could take this same approach with Visual ITU Alphabet.

The simplest step was to remove the former display block and retain only the input; I revised the block elements and classes to handle the styling for alignment and font:

<div class="display-frame">
  <div class="letter-entry">
    <input
      class="letter-input"
      id="letter-input-entry"
      type="text"
      maxlength="1"
      pattern="[A-Za-z]{1}"
    />
  </div>
</div>

I styled the classes to ensure the input element, whether in "display mode" or "entry mode", would have a font and size that correlated to the other elements on the page, as well as maintain a consistent margin between the input and the letter image:

.display-frame {
  display: flex;
  flex-flow: column nowrap;
  margin: 2%;
  width: 75%;
}

.letter-entry {
  align-content: center;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.letter-input {
  border: none;
  font-family: "Times New Roman", Times, serif;
  font-size: 5rem;
  text-align: center;
  width: 200px;
}

These changes allowed me to simplify the logic that handled the letter processing itself, as well as ensure the focus is removed from the input so the "display mode" looks like normal text:

const displayAlpha = () => {
  currentLetter = new AlphaLetter(alpha[alphaPosition])

  // after retrieving the letter value, invoke the blur() function to deselect the input
  letterInputEntry.value = currentLetter.letter
  letterInputEntry.blur()
  displayLetterImg.innerHTML = currentLetter.renderLetterImg()

  phoneticWord.textContent = currentLetter.phoneticWord
  pronunciation.innerHTML = currentLetter.stressPronounce()
}

const updateDisplayLetter = event => {
  const newLetter = event.target.value.toUpperCase()
  const newLetterPosition = alpha
    .map(element => element.letter)
    .indexOf(newLetter)
  alphaPosition = newLetterPosition

  displayAlpha()
}

// clear the value from the input
letterInputEntry.addEventListener("click", event => {
  letterInputEntry.value = ""
})

// update the letter if one was entered and the user clicked out of the field
letterInputEntry.addEventListener("blur", event => {
  if (letterInputEntry.value.length === 0) {
    letterInputEntry.value = currentLetter.letter
  }
  updateDisplayLetter(event)
})

// update the letter if one was entered and the user pressed enter
letterInputEntry.addEventListener("keyup", event => {
  const keyPressed = event.key

  if (keyPressed === "Enter") {
    if (letterInputEntry.value.length === 0) {
      letterInputEntry.value = currentLetter.letter
    }
    updateDisplayLetter(event)
  }
})

It's quite delightful to be able to view the site on my mobile phone. Clicking and changing the letter no longer shifts content on the page, and the current letter is restored if a user clears the input, fails to put in a new letter and exits the input. While there are still other opportunities for refactoring this code, this functionality enhancement makes the app even easier to use while I review other changes.

Basic PostgreSQL on the Command Line

Kristen Kinnear-Ohlmann — Mon, 23 May 2022 02:47:14 +0000

I started working through freeCodeCamp's beta curriculum for Relational Database. I like to have a contrasting educational opportunity when I need a mental break; solutions to data structure and algorithm problems and other coding questions usually come to me when I'm studying a different topic.

Since databases are my original jam, I thought it would be profitable to work on my command line-level skills so I can gain strength with other types of databases. The first lessons introduce you to working with PostgreSQL to learn syntax. Although I'm very familiar with SQL itself, it had been some time since I had worked with Postgres on the command line. Part of the Flatiron School curriculum had students install Postgres (for me, on my WSL install) but we used SQLite for projects so my knowledge of accessing and using Postgres had gotten fuzzy.

After spending a few days on the CodeAlly platform that is included in freeCodeCamp's lessons, I decided to try looking back into my local install and get a set of basic instructions together. This will help when I return to my Flatiron projects to convert them to Postgres and deploy them to publicly available servers. For more information on installing Postgres, see https://www.postgresql.org/.

Working with `psql` on WSL

I knew I had Postgres installed so the first thing I tried was to invoke it. I received an error message.

I vaguely recalled that the service is generally stopped so I tracked down the command to get it started.

I was now able to access psql. I had created an account for myself as part of my Flatiron studies so my account name appears as the prompt.

I didn't know what databases had been created, so I listed them with \l. There were a lot more than I recalled!

I connected to one of the databases I recognized from the setup lesson for Flatiron.

I reviewed the objects that were included in this database. The lesson must have been using a blog as the object to model, since one of the objects was a posts table.

I further reviewed what the sample lesson asked us to create as fields in the posts table.

I connected to a few other relations but found they were empty, so I went ahead and quit Postgres.

I also stopped the Postgres service until I needed it again.

Basic commands for `psql`

Check if psql is accessible

psql

Start Postgres service

sudo service postgres start

List available databases

\l

Connect to a specific database to work within it

\c <database_name>

Review relations in the database

\d

Review details of a specific relation

\d <relation_name>

Quit Postgres

\q

Stop Postgres service

sudo service postgres stop

Practice LeetCode Problem - Implement strStr()

Kristen Kinnear-Ohlmann — Mon, 09 May 2022 02:41:29 +0000

I have been diligently working on data structure and algorithm problems from various sources. Today I worked on the Implement strStr() problem using JavaScript. This problem is part of the Easy set that LeetCode maintains.

Problem Setup

The basic premise of the problem is to find a shorter string (the "needle") within a longer string (the "haystack"). All LeetCode problems expect that you will solve the problem both correctly and efficiently.

The instructions gave some help with expectations and edge cases. It's always nice when you can get some "freebie" information, and it helps me learn to think about edge cases. With the following information, I could take a few actions right away:

Return 0 if no needle is given: I checked the value of needle at the top of the function I wrote and added an immediate return for a falsey value
Return -1 if the needle is not found in the haystack: I set my returnVal variable to -1 so that I could simply change the value if the needle was found in the haystack during processing

I confirmed I could check the length of the needle without converting it to an array, and I stored that value as needleLength so I could access it multiple times without invoking a processing cost.

Loop Processing

I wanted to use a loop to perform the processing, and determined that I could use a do loop. The principal problem I wanted to solve was how to know when to end the loop. I tried a couple of iterations but I caused my Replit.com repl to go into an infinite loop.

I decided to fall back to a simple for loop to try out my assumptions. I found that my use of the slice method needed to include needleLength + the current index position (represented by the classic i) to process the haystack substring properly. When I returned to my selected do loop, I realized I needed to use an && condition in my while check for checking both the length of haystack left as well as the ability to short-circuit the loop if the returnVal was set to something other than the default -1.

I tried the test cases that were outlined in the problem, removed my extra code, and reviewed my function to see if I could make it more efficient before submission. Once tested and submitted, I found that I had failed a test case, an edge case I had not checked.

Refactor

The edge case returned in the failed submission was to correctly return the start index if the needle was found at the end of the string. It was a little embarrassing - the haystack was a simple 'abc' and the needle was 'c'!

I added the failed test case to my repl to help refactor the code. I determined that my while check needed to check that the needleLength + i value was <= the length of haystack; I previously was checking for just <. I re-tested all of my test cases and re-submitted the solution.

Outcome

The refactored solution was accepted with a runtime of 63 ms (faster than 87.45% of other submissions) and memory usage of 42.4 MB (less than 45.78% of other solutions). I checked the Discussion tab, filtered by JavaScript solutions, to see what other information I could gather. I found a few shorter solutions and one checking an edge case where needle already matched haystack that I will return to study.

With continued practice, I have noted that I am able to come up with a solution for a problem faster than I was able to previously, and can more easily resolve failed test cases. I still need to learn and practice identifying edge cases which will aid me in being able to craft a correct and efficient solution in a shorter timeframe. My work repl is located at https://replit.com/@kristenkinnearo/LeetCode-strStr#index.js

Data Structure and Algorithm Problem Solving Toolbox

Kristen Kinnear-Ohlmann — Mon, 25 Apr 2022 03:30:44 +0000

I have been working on solving data structure and algorithm problems for about 8 months. It's interesting to recall how lost I was when I first started - it was like being in school and first learning word problems for math! I now have some tools I refer to that have helped me become stronger and faster with my solutions.

Fully Read the Question/Problem

I internalized this piece of advice after watching a Bytes of Bree video. She was describing a coding challenge she was working on in which the person giving the challenge asked her to read the question and determine what it was asking her. She said that she had been getting too complex with her answer, and one of the accepted solutions was quite simple. She found it only after focusing on what the challenge was asking her specifically to do.

I often rush through things I don't know well, as if getting through the exercise with my eyes closed will allow it to magically solve itself. I have been working on slowing down and really understanding the information that has been given to me. This is easier on sites and in situations where there is no timer, but I have found value in not worrying about timers and taking the time I need.

I was able to apply this recently to a problem involving finding the gaps in binary numbers. I remember trying to tackle this problem a couple months ago and feeling pretty frustrated. When I picked it up this time and read the question, I realized the input value was an integer and I would need to convert it to binary; I had been assuming a binary number was being passed in the test suite.

One other key point to this item is that the problem will usually tell you what is most important - efficiency or correctness. I like correctness problems, because you can focus on accuracy and not worry about the time complexity. Now that I have some experience with problems, I know efficiency means I should be looking for a solution that performs the fewest possible passes through the input.

Check All Inputs and Outputs

Although I now read through problems completely and understand what's being asked, I needed to also check the inputs and outputs that the problem was expecting.

I recently worked through a problem that involved rotating elements of an array. I read through the problem, started the solution in my head (I'll need to splice out a portion of the array and unshift the array to add to the beginning), quickly implemented my solution, and started the test suite on the site I was using. I only received 87%! What did I do wrong?

I examined the failed test case example and realized that I had not checked what values the rotation count could take in. After examining the inputs for the function, I saw that it could be larger than length of the array. I hadn't accounted for that, and there was a straightforward way to do so. After implementing a couple of revisions of my solution, I was able to score 100%.

Use Your Search Tools

When you are practicing, go ahead and Google the things you can't quite remember. At this point, you don't need to have everything at your fingertips, because you're working on knowing HOW to solve the problems first.

In the problem I discussed above, I knew I could get a remainder of the number of move positions for the array elements. My poor brain decided the way to do this was to divide one number by the other, then apply the floor function I confirmed via Google to get back to an integer. Makes sense, right?

I tested the solution and received 75%, which was lower than my first score. I studied the failed example test case, and did another Google search. If I had done a little additional searching the first time, my memory would have served up the modulo function, which is a much more accurate remainder for the operation I was doing. I also Googled the best function to convert an integer to a binary from the earlier problem I worked on.

Take a Break

Many of us that study software engineering are perfectionists, problem-solvers, focused or all 3. It's easy for us to get stuck on something; we just KNOW we're going to figure out this problem, we just need to keep hammering away at it!

I've found the greatest success is in taking a break. Classic Pomodoro method states that focus work should be 25 minutes in length. I've seen advice that after 20 minutes of working on a problem, take a break or review solutions on the site you are using, if they are available. There are also people that are in a "zen flow state" and take a break when they lose focus.

I have used all of these methods with good results. The only time I don't have good results is when I try to keep pushing through to prove a point. Always take those breaks!

Summarize Your Work

After I solve problems now, I document them in my own words. This helps me review and understand the steps I took and to see what patterns start to emerge from those solutions. I include where I got hung up, any interim scores I received for my submitted solutions, and the time it took for me to work on the problem, in the event I have a timed set of problems to work on.

I use Replit to work on my problems before adding them back to the site the problem is on. This helps me focus better because I'm already totally familiar with the tools and how to use them. It also allows me to save my working copies, add comments and reference them later. I include the link to the specific repl in my summary document for the problem. You may also choose to set up a repo with a test suite for this same purpose. Either way you have a source of code from which to summarize your solution and conclusions.

Seek Resources

More than just looking for the best function or some insight, seeking resources means finding people and videos that can help deepen your understanding.

I am a member of some Slack workspaces for developers where people discuss data structure and algorithm problems. I've talked with colleagues about what they know. I've read solutions on LeetCode. I've watched other developers' videos.

All of these resources give me a different perspective on how to solve problems as well as techniques and information I am not yet familiar with. I write blogs about this information so that I can be a resource to others as well; finding a resource that "speaks your language" allows you to make great leaps in your understanding and ability. I encourage everyone to be the resource they can be for this reason!

Don't Give Up

This isn't a counter-statement to the Take a Break item above, it is a complementary item. Sometimes these problems can seem insurmountable and that you may never be able to solve them. You may even set them aside for some period of time. I encourage you, and myself, to pick these problems up again in another session. I know these problems are valuable for learning patterns, efficiency and problem-solving, and I don't want to leave any knowledge behind.

If there is a problem I can't solve in 1 session, I will submit what I do have, take note of any feedback and save it in my repl for the problem. I can then pick up another problem-solving session with my previous input. I find my brain will be working on new approaches while I sleep, or go running, or take a shower, so having a good stopping point to pick up from allows me to keep working efficiently.

Conclusion

I am early in my journey of mastering data structures and algorithms. I appreciate these tools I have defined to assist me, and I look forward to identifying more as I continue my learning.

Styling the SelectControl from Formik with Chakra UI

Kristen Kinnear-Ohlmann — Mon, 18 Apr 2022 02:10:44 +0000

I resolved an interesting issue while continuing the build on my registration form for the Breeze Lakes Point project using Next.js. I really struggled to find the proper way to style the Formik Chakra UI SelectControl component so that it matched the other controls. I wanted to have drop-down lists styled with the same grey background and white text that was the default for the form.

The default theme style for the SelectControl was to display the drop-down items with a white background that blended with my text color, which is set to white.

<SelectControl
    name="pronoun"
    id="pronoun"
    label="Pronoun"
    marginLeft="10px"
>
    <option value="0">&nbsp;</option>
    <option value="1">she/her</option>
    <option value="2">he/him</option>
    <option value="3">they/them</option>
</SelectControl>

I Googled for a solution but wasn't finding anything that helped me determine how to reset the background color of the drop-down items on the SelectControl.

I was able to style a conventional select control with classes defined in my global.css so that the display matched the other form controls.

<select className="bgtransparent form-element">
    <option className="bgtransparent-child" value="0">&nbsp;</option>
    <option className="bgtransparent-child" value="1">she/her</option>
    <option className="bgtransparent-child" value="2">he/him</option>
    <option className="bgtransparent-child" value="3">they/them</option>
</select>

The issue with this solution was that I wasn't able to leverage the Formik and Yup conventions to populate the control with values, validate input values, or gather the selected values for use in form submission. I could certainly have written some additional functions to handle those actions but I wanted to be able to manage all form inputs in the same way. Using the SelectControl included with formik-chakra-ui was the way to accomplish those goals, but the configuration that worked for a conventional select control did not work for a formik-chakra-ui SelectControl.

I spent some time simply hovering over pieces of my code in VS Code to see what the intellisense might suggest for formatting the SelectControl. I tried a few options but was drawn back to the option to use HTML Attributes.

I recalled in my searches and other code examples that the use of the double {{}} allowed execution for code like additional formatting. I added style={{ backgroundColor: "gray" }} to each option for the SelectControl to blend into the current page color.

<SelectControl
    name="pronoun"
    id="pronoun"
    label="Pronoun"
    marginLeft="10px"
>
    <option style={{ backgroundColor: "gray" }} value="0">
        &nbsp;
    </option>
    <option style={{ backgroundColor: "gray" }} value="1">
        she/her
    </option>
    <option style={{ backgroundColor: "gray" }} value="2">
        he/him
    </option>
    <option style={{ backgroundColor: "gray" }} value="3">
        they/them
    </option>
</SelectControl>

This code allowed me to style the SelectControl to match my page style and capture the values for submission to the database.

The next refactor of this code is to write a more flexible option for incorporating styles into the individual options.

I wasn't able to find any other sources that explained how to accomplish the solution. I hope this explanation will be helpful to other developers working with Next.js, Formik, and Chakra UI.

Reset Ubuntu Password on Windows

Kristen Kinnear-Ohlmann — Mon, 11 Apr 2022 02:37:51 +0000

This week, I wanted to check a Docker command within Docker itself. I have been working with the dockerd engine on my Windows WSL 2 installation. Although I had been working through the terminal in VS Code, I wanted to try using the Ubuntu shell.

I found I had 2 versions of Ubuntu installed, each with its own password, and later realized I needed to log into the WSL shell. I researched and located a helpful solution on Stack Exchange that I summarized for use again in the future.

Password Change Process

Using the Ubuntu shell, note the following:
- The version of Ubuntu you are using (I had a previous install as well as Ubuntu 18.04 in WSL)
- Your username
Close the Ubuntu shell
Open PowerShell as Admin and reset the Ubuntu config to log in as root
- Ubuntu:

  ubuntu config --default-user root

Ubuntu 18.04:

  ubuntu1804 config --default-user root

Re-open the Ubuntu shell - you will be logged in as root
Execute the passwd command and follow the prompts; ensure you secure your new password in a password safe! Do not include angle brackets.

   passwd <username>

Close the Ubuntu shell
Open PowerShell as Admin and reset the Ubuntu config to log in as your username. Do not include angle brackets.
- Ubuntu:

  ubuntu config --default-user <username>

Ubuntu 18.04:

  ubuntu1804 config --default-user <username>

Log into Ubuntu and confirm the new password

I followed these steps for both versions of Ubuntu, and I was able to reset both passwords. Once I opened the WSL shell, I was able to use my Ubuntu 18.04 credentials to start dockerd and check the commands I needed.

Resources

Reset the password in Ubuntu/Linux Bash in Windows

Add a Field to a Prisma Model

Kristen Kinnear-Ohlmann — Mon, 04 Apr 2022 02:48:31 +0000

My Breeze Lakes Point project is in a good working state with my initial User model for logging in and displaying the data from the table. As I was implementing the model, I realized I wanted to capture Middle Name or whether a user didn't have a middle name as part of the sign up process.

When I was building the User model, I ran into trouble with TypeScript recognizing that my model had changed. My new fields were flagged as errors and the data didn't display. I resolved the issue at the time but couldn't recall exactly all the steps I took. Adding Middle Name was my opportunity to define that process.

In my project, I am using the npx package runner to work with Prisma. For more information, see the article on nodejs.dev

I started by adding middleName and noMiddleName to my User model. noMiddleName is a boolean to allow a user to indicate that they truly don't have a middle name, without the need to add inaccurate data to the middleName field.

model User {
  id           String   @id @default(uuid())
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  username     String   @unique
  password     String
  email        String?
  firstName    String
  middleName   String?
  lastName     String
  noMiddleName Boolean  @default(false)
  role         Role     @default(User)
}

You can choose to run npx prisma db push to review the changes or npx prisma migrate dev to create a migration and apply the data. I ran the latter command since I knew the fields were what I wanted in the model. I also ran npx prisma generate to ensure I had a new client to work with.

I recalled that around this step previously, my Javascript code was not able to see the changes. There were some TypeScript complaints and some other vague errors; I was not able to update my seed file to incorporate the new fields. During the earlier issue, I had deleted all my terminals but ultimately it seemed the issue was resolved once I closed and re-opened my project in a new VS Code window. This time, I took those actions immediately, as well as re-running npx prisma generate, and was able to go ahead and start adding the new fields to my seed file. Success!

I modeled both a noMiddleName and middleName value in my seed file.

  const user2 = await prisma.user.upsert({
    where: { username: "user2" },
    update: {},
    create: {
      username: "user2",
      password: "<redacted>",
      firstName: "User",
      lastName: "2",
      role: "<redacted>",
      noMiddleName: true,
    },
  });
  const user4 = await prisma.user.upsert({
    where: { username: "user4@user.com" },
    update: {},
    create: {
      username: "user4@user.com",
      password: "<redacted>",
      email: "user4@user.com",
      firstName: "User",
      lastName: "4",
      middleName: "S",
    },
  });

With my seed file updated, I ran the following commands to truncate the current database on Heroku and re-seed the data.

npx prisma migrate reset
npx prisma db seed

Finally, I opened the model on the database to visualize the changes.

npx prisma studio

Identifying the best process and procedure for adding to existing models, adding new models, and ensuring the changes are available to the main project code has helped speed up my development process. I can now start to build the additional models I need to begin adding features to the base project.

Basic Setup for Azure Cosmos DB and Example Node App

Kristen Kinnear-Ohlmann — Mon, 28 Mar 2022 04:08:41 +0000

I have had an opportunity to work on a project that uses Azure Cosmos DB with the MongDB API as the backend database. I wanted to spend a little more time on my own understanding how to perform basic setup and a simple set of CRUD operations from a Node application, as well as construct an easy-to-follow procedure for other developers.

I have an Azure account that I created to explore Microsoft's capabilities, which I used to write this blog. At the time I created my account, I was not able to use a Gmail account, although this may have changed. If you are interested in following the steps below, I recommend getting your Azure account established first.

Create and Configure Cosmos DB instance

After logging into Azure, the first step is to navigate to Portal, which contains all of the Azure cloud-based services.

Services are pay per use and you'll be asked to provide a credit card even for the free trial. Make a note of when your trial period ends, so you can be aware when charges will start to accrue. As with other clouds, costs for smaller, personal applications will be nominal, but it is worth ensuring you know when the trial period ends to monitor use.

Locate the Cosmos DB option to start creating the service.

If this is the first instance to be created, the option to create a new account will be the main content on the page.

The first part of configuration is selecting a connection API. Microsoft encourages you to use the Core (SQL) option, which correlates to familiar SQL syntax for creating and using resources; there are SDKs for .NET, Javascript, Python and Java. There are a number of other APIs available, each with a description of their capabilities. The project I was modeling used the document database MongoDB API, so I selected Azure Cosmos DB API for MongoDB.

The second part of configuration is the project details:

Resource Group: Likely you will need to create a new Resource Group to have a selection. Resource Groups are similar to folders, used to organize and manage resources. I named mine SampleMongo.
Account Name: This is a unique account name; requirements are that it must be lower case and hyphen is the only character allowed other than letters. I named mine samplemongoacct.
Capacity mode: The project I was modeling was created as Serverless, so I selected that option.

After clicking Review + Create, review the options that were set and click Create. Once the deployment is complete, click Go to resource to see the quick start information. This includes the connection string for your instance. I copied the Node version of the connection string.

Click on Data Explorer in the left navigation to access the options to create a new database and new collections.

The highest-level container is Database, which Microsoft defines as a "logical container of one or more collections". Choose New Database from the main content dropdown. The single configuration item is Database id, which is simply a unique name; I named my database Interests so I can make collections of data about hobbies and interests I have.

Once the database is created, you will be able to see it in the main content page.

Next, choose New Collection from the 3 dots menu next to the database to create a collection for that database. The collections will hold documents that contain related information.

My collection will be about birds, so I selected my Interests database, set Collection id as Birds, left the other default options, and clicked OK.

Once the collection is created, you will be able to see it nested under the database in the main content page.

With the database and collection created, it is possible to access the collection and add records one by one, or use the shell to run a query. Since the project I was modeling would do that work from a Node app, I did not create any document records within Azure.

Create a Node app to access the Cosmos DB

The link for the Node tutorial from Azure landed on a page that was no longer in service. I correctly assumed I would be able to easily locate the MongoDB API for Node on npm. The developers for the npm MongoDB package thoughtfully included a really robust tutorial on the page, which I used to build out my sample app.

After creating a new Node project and installing the mongodb package, create an app.js file at the project root for the example code.
Require the mongodb package and declare variables for the connection and database

const { MongoClient } = require("mongodb");

// use the value of the Conn string defined for your Cosmos DB resource for this value
// Format: mongodb://samplemongoacct:<GUID>@samplemongoacct.mongo.cosmos.azure.com:<port>/?ssl=true&retrywrites=false&maxIdleTimeMS=120000&appName=@<Cosmos DB account name>@
const url = "";
const client = new MongoClient(url);

const dbName = "Interests";

Define an async function to perform CRUD operations, including the collection name to work with

async function main() {
  await client.connect();
  console.log("Connected successfully to server");
  const db = client.db(dbName);
  const collection = db.collection("Birds");

  //// Create

  //// Read

  //// Update

  //// Delete

  return "Done";
}

main()
  .then(console.log)
  .catch(console.error)
  .finally(() => client.close());

Implement create to add document records to work with

  //// Create
  const insertResult = await collection.insertMany([
    { name: "Chickadee", active: true },
    { name: "Cardinal", active: true },
    { name: "Bluejay", active: true },
    { name: "Sparrow", active: true },
  ]);
  console.log("Insert documents:", insertResult);

Implement read, both a select of all available documents as well as a filtered select for a specific document

  //// Read
  const findResult = await collection.find({}).toArray();
  console.log("Found documents:", findResult);

  let filteredDocs = await collection.find({ name: "Chickadee" }).toArray();
  console.log("Found documents filtered by Chickadee", filteredDocs);

Implement update, update one of my documents to contain a more specific name, then performed a filtered select to confirm

  //// Update
  const updateResult = await collection.updateOne(
    { name: "Sparrow" },
    { $set: { name: "Harris Sparrow" } }
  );
  console.log("Updated document", updateResult);

  filteredDocs = await collection.find({ name: "Harris Sparrow" }).toArray();
  console.log("Found documents filtered by Harris Sparrow", filteredDocs);

Implement delete to remove all records from the collection

  //// Delete
  const deleteResult = await collection.deleteMany({});
  console.log("Deleted documents", deleteResult);

The process to set up the Cosmos DB instance and the Node sample app was straightforward. There is a large amount of documentation available to determine syntax and special cases to resolve issues. It was helpful to work through the process on my own and ground my understanding on both the structure and the code.

Reference Links

Basic Find Query with Prisma

Kristen Kinnear-Ohlmann — Mon, 21 Mar 2022 02:55:04 +0000

For my Breeze Lakes Point project, I am using Prisma as the ORM to handle data in my PostgreSQL database. This is the ORM that we used with the sample app from the Frontend Masters workshop I attended, and I found it straightforward with great documentation.

I am working on a feature to find a specific user in the database and return the data for display in a registration form for editing. The basic findUnique syntax is quite compact:

const data = await prisma.<model>.findUnique({
    where: {
        <lookupField>: <lookupValue>,
    },
    select: {
        returnField1: true,
        returnField2: true
    },
});

Since I am still expanding my user model, I implemented a simple return object:

const qry = <GUID value>

const data = await prisma.user.findUnique({
    where: {
        id: qry,
    },
    select: {
        id: true,
        username: true,
        email: true,
        firstName: true,
        lastName: true
    },
});

For the final returned object, I spread the data object to include a message to confirm the data returned to my route, since this is currently the same data that the session contains:

return { ...data, msg: "Found" };

With the basic framework in place to look up and return data via Prisma, I can work to expand both my user model and the models planned to hold related data.