Forem: Kim Heidorn

To Code, or Not to Code on Vacation: That is My Question

Kim Heidorn — Sat, 24 Aug 2019 19:17:17 +0000

I just got back from a 2 week vacation. This was my first long vacation since I really have sunk my teeth into passion projects, and I found myself coding more than I anticipated.

Personally, I plug in when I code. I don the oversized headphones, listen to my focus music of choice, and zone out trying to solve problems. When I am home, I rarely set time limits for myself, and I continued that pattern on vacation. Something to note, I find coding therapeutic. I get to stretch my creativity, and I’m a bit of an introvert so coding gives me a chance to recharge from social interactions that I can find draining at times.

Inadvertently on this vacation, I isolated myself from my friends and family.

While everyone seemed content and made no mention of my absence, I could not help but feel like I was missing out on the intention of vacation. Instead of immersing myself in my book or chatting with people in lawn chairs, I spent time in front of my computer screen. Really nothing had changed from my day to day activities other than the setting and that I was working on fun problems by choice. Now that I am back, I am regretting limiting my screen time. I think there is this notion that vacation is supposed to be about reconnecting with people, strengthening existing relationships while also finding some me time away from the blue screen light. I cannot help this gnawing feeling that I missed out on some valuable parts of my vacation.

So my questions to the community, do you code while on vacation? If so, when do you find time to code? How do you feel when you code around people?

Selfishly, I do not want to stop coding when I’m on vacation. So, what tips do you have to help avoid my guilty feelings on future trips?

9 Interview Questions to Uncover Startup Red Flags

Kim Heidorn — Sat, 17 Aug 2019 17:02:22 +0000

Startups are notorious for being risky. Anyone can do a quick search to find several articles dedicated to startup horror stories. The company has run out of money, seemingly out of nowhere, and you show up for work only to find shuttered doors, an empty garage or warehouse, and no notice you are out of a job. If these sorts of stories interest you, I suggest reading this article by Jonathan Solórzano-Hamilton. He writes about his personal hellish experience that started at with a coffee shop interview and ends in high-speed police chase. Not kidding.

I am lucky enough to have some in my network who are running successful start ups, and I asked their opinion about what questions to ask in a job interview. I want to pass along this information to help anyone avoid their own horror story.

What is the company's burn rate?

High burn rates usually mean high overhead costs and expenses. For most startups, this is a huge red flag. Startups usually are not raking in the revenue month after month and the high burn rate usually means they are bleeding cash, fast. There can be valid explanations for high burn rates, and you should ask additional questions to determine if it is a signal for poor growth in the future.

What is the company's main source of funding? When was the last funding round?

If the company went through one round of funding but is having trouble getting investors for subsequent rounds, this is usually another red flag. There are many reasons investors shy away from additional funding rounds, and it's imperative that you understand why. It could be as simple as a particular investor does not have the available capital at that time, which is no fault of the startup. But it could be a good indication of other more serious problems. Investors may not have faith in the business model, lost trust with the founder(s) or can see market trends that make the product obsolete or redundant.

Funding should be something to consider when it comes to negotiating your salary. Likely, the startup will offer you less than market rate and will supplement your income with stock options. But you may never see that money in the event of an exit. Say the company has raised $500 mil over 6 rounds of investing. That means there are six different rounds of investors that get their money before you see a dime.

One thing to note, if the interviewer does not know the answers to these questions, and/or refuses to get you answers, run. If the company is not being transparent with you, they are likely not being fully transparent with their current employees, and in general, it is a bad sign for future growth.

Does the company have customers? If so, who are they?

This is slightly tied to the burn rate question in that you are probing what the main revenue source is for the company and if the product is viable. If the company has some recognizable names as customers, that can bode well for the growth potential for the company. Additionally, if the company has a few smaller, loyal clients, and has a clear plan for growing the customer pool, there is still lots of growth potential and can signal a healthy company. Customers also signals that people see a use for the product and are actively implementing or engaging with it. All of which are great signs for future growth.

If they do not have current customers, it opens the door for a whole other host of additional questions. Is there a clear marketing strategy in place to attract and retain customers? How has the company been defining revenue in lieu of customers? Is the current source of revenue viable for long term growth? No customers can be a red flag, but its up to you to ask those follow-up questions to know if you should run from the interview or stick with the company while they get those first crucial clients.

What value does the role you are interviewing for bring to customers?

More importantly, and selfishly, you are trying to suss out how the position you are interviewing for fits into the bigger picture and health of the company. For example: Say you absolutely hate customer facing positions, the company relies on customers using their product, and you come to find out that a majority of your work will be troubleshooting customers' concerns. Not only will you be unhappy with your job, but the company's revenue will likely suffer from a poor customer experience.

What is the product decision making process like?

For most startups, there is minimal management staff. The companies are usually small, and everyone pitches in to help. In these scenarios, product design decisions often come from the CEO, CTO or another Founder directly. Hopefully, they value collaboration and expect input from their team. Some don't. Employees and businesses alike can thrive in both these structures, and both have their own pros and cons. It is more about personal preference.

But like everyone else at the company, these high-ranking individuals also wear many hats, and will often be unavailable to answer questions from the product team(s). In these scenarios, it is important to know what the decision making process is in their absence. This will help to prevent bottlenecks and allow for the continuation of fast decisive action.

If there is not a structure in place and the interviewer cannot answer this basic question, it likely is a signal for more substantial organizational issues. These scenarios of inaction likely bubble up more frequently, which could lead to unnecessary frustrations at work and create a less than ideal company culture.

What does success look like?

Founders often have a clear vision and general direction they want to drive the company. While this is not the only factor in success of a company, it can help you as a prospective employee get a better glimpse into the company's future. Often times, this question can help illuminate the end goals or the exit strategy that the Founders envision. If say the barometers of success are all goals that could be achieved within a year, it may signal that there is a desire to be acquired sooner rather than build a robust stand-alone company. This, again, does not mean that the company is a dumpster fire, and you should avoid them. It might just mean that this may not be a long term position you will have 5 years down the road.

How does the customer story tie to the mission statement of the company?

This is a key question that not only helps to suss out what success means at the company but also can give you a snapshot of the company culture. A company that finds its customers expendable and does not value retention may have the same mindset for its employees. This is not always the case, but asking more probing follow-up questions can help decide if this is the company for your work style. Do they value employee engagement such as hosting company-wide events or continued education opportunities?

When you leave the interview, you should have a very clear understanding of the customer story and company culture. If the company does not have a clear mission statement, this can also indicate that they have more serious structural issues that, again, can lead to a frustrating and disorganized work environment.

For junior roles, what is the guidance structure?

This may seems like a pretty basic question that is redundant given the decision making process question. But this is a separate issue entirely and should always be asked. More often than not, a developed company will have a clear hierarchy where the junior role directly reports to a senior dev, CTO, CEO or another Founder. It helps to know who exactly will be available to answer questions and will be reviewing code that will be pushed forward to the product. A developed company structure often is setup for long term company growth and help ease the growing pains from a small company to a medium sized company. I have heard stories where startups hire only junior devs without a senior dev or experienced team lead. This more often than not turns into a complete sh!tshow as the Founders naively think that a large team of cheap labor will get the company up and running. Be wary if this is the scenario you are stepping into as a senior dev because it may be incumbent on you to clean up the mess the Founders created.

What is the testing framework? What are the guidelines for issues or debugging code?

Again, this is a super straight-forward question, but one that can highlight issues within the product. There is plenty of debate about whether TDD is overrated or overused. So do not write off the company if they do not have a testing framework currently in place. Most startups have tight budgets that make getting a product out the door crucial to stabilize the revenue stream. In this case, testing frameworks are often costly and cut from the initial product design. All this means is that you need ask follow-up questions. How do they know their product works and how does the product team find issues prior to customers pointing them out? It may be that they do unit testing and have plans to build out a testing framework once the company has the available capital to do so. Who knows, you may be the person that leads this effort.

Unrolling Matrix Walkthrough - JS

Kim Heidorn — Fri, 09 Aug 2019 20:06:13 +0000

As I’ve been starting my job search, I have been grinding LeetCode problems, tackling all the algorithm practice I can to ease my nerves going into technical interviews. I have been coding in JavaScript and have been doing my best to master the “Matrix” problems. Below are the steps I took to traverse the matrix in an unrolling fashion.

The Problem

Input: [[1, 2, 3, 4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
Assume that Input will always be an even matrix, (i.e. 2 x 2, 3 x 3, 6 x 6, etc.)

Output: “1, 2, 3, 4, 8, 12, 16, 15, 14, 13, 9, 5, 6, 7, 11, 10”

Brute Force Option and Big O

The first step, for me, is to always follow my first instinct and get the brute force option to work. I knew from a previous project that I had built a grid (aka matrix) using two nested for-loops to step through each cell. While this is clearly not the best solution (runtime: O(n^2)), I knew it to be the first way to solve it. Had the runtime Big O been O(n), I likely would have continued down this path, but I wanted to try to solve this problem with a more unique solution.

Refactor Code

Now, I had not really written any code for the above brute force option, so the title is a bit deceiving, but had I been in a real technical interview, I would have definitely wanted to refactor my brute force code. Instead, since this was just practice, I decided to really analyze the problem. The code wanted me to return the entire first row in the same order, the last index of the middle rows, the entire last row in reverse order, and finally, the first index of the middle rows. If I were to augment the original matrix and remove the values above, I would be left with an internal matrix that was reduced entirely by 2. For the example input above, the 4 x 4 matrix after the required removals would leave me with a 2 x 2 matrix. This new matrix would then need to be treated in a similar manner. Essentially, I had stumbled into a great recursive function exercise. It would still result in O(n^2) runtime, but at least more interesting from a challenge perspective.

Break Up the Steps

I had a general game plan, but decided to start coding out the basic skeleton to my solution.

I knew with recursive functions I need to start with a base case aka a case that tells my function to stop, and ending function that would call the function on itself. Also, I knew that the output was not an array, but instead a string. Thus, I need an ending variable that initially was an empty string. Given that this was a recursive function, the string would also need to be an argument I would pass into the function, but would have an initial value of “”.

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //call itself
    return unroll(matrix, endResult)
}

Not bad, but I realized pretty quickly I was missing on crucial detail, the , to chain my recursive strings!

This made the new code:

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //call itself
    return unroll(matrix, endResult + “, ”)
}

Now it was time to start traversing the matrix. Again, I knew I should take this into individual steps. The first part would be to just printing the first row exactly as is. Given this was a nested array, I could either write matrix[0] or matrix.shift(). Personally, I wanted to get more comfortable using methods in my whiteboarding problems, so I went with the matrix.shift() option. Now to convert this removed array to a string, I used .join(“, ”) remembering that I need to add in the correct punctuation.

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //top
    endResult += (matrix.shift().join(“, ”))

    //call itself
    return unroll(matrix, endResult + “, ”)
}

Next would be to get the last two elements, or right elements, for only the middle rows. This would require a for-loop in order to traverse into these nested arrays. There was no way I could solve this without it. In this scenario, since I am only taking individual inputs at one time, I did not need to add the .join( “, ”) method, and instead would need to add the required punctuation prior to adding the element. Also, since I wanted to continue using the method process, I used .pop() to remove the last element.

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //top
    endResult += (matrix.shift().join(“, ”))

    //right
    for (let i = 0; i < matrix.length - 1; i++) {
        endResult += “, ” + (matrix[i].pop())
    }

    //call itself
    return unroll(matrix, endResult + “, ”)
}

The script for the bottom row was similar to the top row, but instead of shift(), I need to use pop() and reverse() to reverse the resulting array.

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //top
    endResult += (matrix.shift().join(“, ”))

    //right
    for (let i = 0; i < matrix.length - 1; i++) {
        endResult += “, ” + (matrix[i].pop())
    }

    //bottom
    endResult += “, ” + (matrix.pop().reverse().join(“, ”))

    //call itself
    return unroll(matrix, endResult + “, ”)
}

To add the first elements of the middle rows to the endResult string, I need to use a for-loop. However, this time I need to do a reverse for-loop counting down until the value of i is equal to 0. I also need to use shift() to remove the first element of the array I am iterating over.

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return endResult
    }

    //top
    endResult += (matrix.shift().join(“, ”))

    //right
    for (let i = 0; i < matrix.length - 1; i++) {
        endResult += “, ” + (matrix[i].pop())
    }

    //bottom
    endResult += “, ” + (matrix.pop().reverse().join(“, ”))

    //left
    for (let i = matrix.length -1; i >= 0; i--) {
        endResult += “, ” + (matrix[i].shift())
    }

    //call itself
    return unroll(matrix, endResult + “, ”)
}

I thought I was done, but I found an error in my script. The resulting string had two extra characters of , that need to be removed. Using .substring() and setting the arguments at (0, endResult.length - 2) isolates and removes the last two characters to return the desired output.
The final script is

function unroll(matrix, endResult = “”) {
    //base case
    if (matrix.length === 0) {
      return (endResult.substring(0, endResult.length - 2))
    }

    //top
    endResult += (matrix.shift().join(“, ”))

    //right
    for (let i = 0; i < matrix.length - 1; i++) {
        endResult += “, ” + (matrix[i].pop())
    }

    //bottom
    endResult += “, ” + (matrix.pop().reverse().join(“, ”))

    //left
    for (let i = matrix.length -1; i >= 0; i--) {
        endResult += “, ” + (matrix[i].shift())
    }

    //call itself
    return unroll(matrix, endResult + “, ”)
}

Voila! The matrix is unrolled! Hope you enjoyed the walkthrough and feel free to give input for improved methods!

Troubleshooting? Don't over ReactJS!

Kim Heidorn — Sat, 08 Jun 2019 03:59:51 +0000

For my capstone project at Flatiron School, I decided to build a scaled down version of The Price is Right in React. Simplifying the functionality of the game was essential to complete the project in three weeks. As with any game, logic dominated a majority of the page rendering, and I relied on React Router to dynamically navigate through my various pages. This did not cause any issues until I had a fetch PATCH request in an onClick within a Link. I had a button element wrapped by a Link so I could style it to my satisfaction. Within the button, I passed the fetch request function to the component in props. However, the function required event.preventDefault(). Someone who is more familiar with React Router would have seen the issue with how I had setup my code. I, being a novice, could not understand why the link would not redirect. The fetch PATCH request would complete as would internal console.log(). The issue clearly was with the Link.

After reading the React Router documents, I learned that the event.preventDefault() was preventing the Link from redirecting the user to the correct page. In order to properly redirect and keep the function, I needed to access the session history prop for React Router to redirect the user to the correct route. I was unsure how to do this, but thankfully StackOverflow and this blog by Tyler McGinnis helped direct the correct step to take. Seeing as the redirect was not being rendered by React Router, I had to wrap the component in withRouter to access history.push.

export default withRouter(SpinningWheel )

Once history.push was accessible, I created a callback function within the wrapped component to force the redirect to my desired page.

goHome = () => {
   this.props.history.push('/')
}

So, I had the callback function written, but I needed to hook it up to the fetch request. Calling this callback function beforehand would be useless as the fetch PATCH updated the user’s score upon completion of the game. I only wanted to redirect the user once the score had been saved properly. The fetch function was on my main component page, and thus, I had to pass goHome as a parameter and add a callback function to the fetch request. For brevity, I referenced this as cb in my code.

In withRouter(<Component>):

<Link to="/">
   <button className="Start-button"
      onClick={(ev) => saveMoney({ totalMoney }, ev, this.goHome)}>
      Go Home
   </button>
</Link>

In App.js:

saveMoney = (money, event, cb) => {
   event.preventDefault()

   cb & cb()

   let { gameId } = this.state
   let url = "http://localhost:3000/games/" + gameId

   let config = {
      headers:{
         'Content-Type': 'application/json'
       },
      method: 'PATCH',
      body: JSON.stringify({
         score: money.totalMoney
      }
   }

   fetch(url, config)
      .then(response => response.json())
      .then(data => {() => {
         this.getScores()
         cb & cb()
      })
}

Finally, I can now redirect the user without altering the code too much, and without causing a reload effect for the user, aka using React properly.

Truthfully, this was one of many challenges I had with my React game. My 3D spinning wheel turned out to be my toughest issue, unsurprisingly. Next week, I’ll be writing and sharing my code (and love!) for a vertical carousel. Stay tuned!

Learn more about withRouter and other higher-order components (HOC)

Make Your Resume Work for You

Kim Heidorn — Tue, 21 May 2019 17:56:26 +0000

Arguably, the most effective job search starts with steller networking skills. It is typically how most will land the first interview with a company. But after you land that critical first interview, an effective resume will help you stand out from the interviewed crowd. I am in the process of refining my own resume, and thought I would pass along some handy tricks I have learned in the process.

One Page vs Two Pages

Once your resume gets past the AI blockers and into the hands of a real life human, it is important to remember that the hiring manager will likely still read a substantial amount of resumes. Like anyone else reading 20+ pages in one sitting after a days work, these individuals will get fatigued. I have previously worked in HR and know all too well the many cups of coffee required while reviewing resumes. With that in mind, many adhere to that imphamous one-page max mantra. I believe that a resume should be two-pages max with your more relevant career information on the first page. Your resume is meant to be a guide and reference for your conversation with the hiring manager(s). As careers build, it becomes important to describe key accomplishments in addition to highlighting applicable skills, which will likely lengthen your resume, but it is best to not list every single task. It will always be a fine balance to highlight your accomplishments while not giving all the information on a page. I have come across some companies that do put a hard limit of one-page on the resume. In these cases, it is imperative that you distill all of your best work and professional experience. This is just something that you will need to work through given the job your applying to and make note what is being left off your resume so that you can speak to these accomplishments in your interview.

Keep it Readable

Initially, I had my contact information stacked in a column with my name written in the top in bold. While it may be aesthetically more appealing, it does not follow the natural reading pattern of left to right reading. Again, hiring managers get tired, so anything to help make the contact information more logical and readable helps. I also included links to my GitHub and LinkedIn accounts in the same line as my phone number and email address. I felt it would be easiest for the hiring manager reviewing my resume to just have all my points of contact right at the top. Again, I recommend having someone else look at your own resume to see what they find the most natural when reading it, which brings me to font size. I think most people with tiny font and odd margins are trying to condense all their material in one page. Since we have already touched on that point, it is best to leave left and right margins as close to the 1” default as possible. Also, it is important to leave the font to a reasonable and readable size and style. Again, hiring managers get tired and if the font is too illegible, they likely will skim more and miss key details.

Substance Over Form

I am stealing an accounting principle here, but it is relevant when talking about a resume. The concept is that you want to give a complete and accurate snapshot of your experience, both technically and professionally, rather than filler lines below a project or job title. This means, use metrics to tangibly demonstrate skills. Often times it is hard to try and determine valid metrics for what you may see as a meaningless project or task. One example is debugging or refactoring already deployed code. You might think, “Well, I just wrote 50 lines of code that was part of >1000 lines. So, I’ll just put that down.” A way to describe this same task would be “Refactored 100 lines of code down to 50 lines, while maintaining and/or improving code efficiency for over 40,000 clients.” Any time you can help the hiring manager understand your impact with metrics helps and will make your resume a more interesting read.

Final Thoughts

I know that specific jobs will require different types of resumes. Someone who is looking for a design job may need to have a more stylized resume, whereas someone working in data science will use more metrics. Again, these resume tips are just that, tips. They should not be considered hard and fast rules for how you work through your own resume. Also, it is important to remember that this is a living, breathing, document. Often your resume will need to be custom tailored to the company and job for which you are applying. You should always have a long version of the resume that can be redesigned for each new application. Best of luck in the job search!

My Top Mistakes with Web Accessibility

Kim Heidorn — Wed, 08 May 2019 16:47:12 +0000

As I am wrapping up my time at Flatiron, I am getting more free time to explore my personal interests, and subsequently, figure out what I do not know before the inevitable job search and technical interview. While nerve racking in and of itself, I often try to break-up the necessary subjects with broader topics that are relevant but of more interest to me. One area I always seem to focus on is web accessibility. I am sure many are aware of World Wide Web Consortium (W3C) and The A11Y Project. Rather than give a summary of these two organizations, I highlight below three key points that I found the most interesting and applicable to my own coding experience.

Start from the Top, Literally: Page Titles

I often overlook giving topical page titles. When I was first starting to build my own projects, I would title the page something generic and had little relevance to my own web page. Naively, I thought it cheeky to make it something funny and the more random made my webpage seem more humorous. Little did I know that this is the first item screen readers grab. So naming the page titles properly is critical for accessibility. Moving forward, I am trying to write these with literally only the unique title of my actual web page. It seemed logical to me, but I have no experience using a screen reader. I would love to hear ways to improve the UX for this!

See the Difference: Color Contrast

For my pet projects, I love the freedom to design the pages how I want, which often includes picking pastels that I find easy on my eyes. Big no-no! I had no idea that web pages should have a minimum contrast of at least 4.5:1. Higher contract helps those with visual impairments read and use your webpage more easily. W3C gives a step-by-step guide on how to check contrast with IE WAT. Honestly, I have not used Internet Explorer in ages so I found an alternative website, WebAIM, that provides a much more intuitive system for checking contrast.

Keep It Simple: Keyboard Compatibility

This is essentially that all functionality of the webpage can be usable with only a keyboard. This means that someone who has physical limitations to be unable to use a mouse can use keystrokes to navigate the page, and complete and submit forms. While my current designs are relatively simplistic, before now I have never tested my designs for keyboard only functionality. Personally, I am partial to a good Modal and have made a habit of removing the default close button usually located in the Footer. Again, this is poor practice on my part. I am now going through and re-adding these buttons to make my Modals more accessible. Another item to note that I was not previously aware of, native HTML controls are inherently keyboard accessible. However, custom CSS and scripts often need to have this functionality built-out. W3C has some additional useful information along with user stories, which I found particularly interesting.

Bring It on Home

At this point, I am doing my best to implement good web accessibility practices in my own coding as I write. I have also been trying to go back through old projects to improve already published code, which I have found is no easy task. Luckily, W3C has a quick checklist readily available to help guide newbies, like myself, through the process. Beyond just changing CSS styling, it sometimes requires changing the actual functionality of an entire page, making the whole process more tedious than initially anticipated. It is, however, a small price to pay for a more usable and overall smoother UX.

Thanks again for reading! Now enjoy this cute baby cheering for our accessible webpages.

Making a Calendar in Vanilla Javascript

Kim Heidorn — Tue, 16 Apr 2019 19:11:07 +0000

Arguably, time is the best and worst built-in function in Javascript. For my most recent project, I had the idea to make a bastardized Google calendars. I naively figured that making a general, functional calendar would be straightforward and allow me plenty of time to build out my site. I so was wrong.

Where to Start?

Pretty early on, with guidance from my instructor, I decided to hard code a month into the HTML. This allowed me to build out the general structure and style I wanted for my calendar. There was conflicting literature on whether using <div> or <table> would be better practice. I ultimately decided to go with a table.

If you have ever taken the time to really study a month calendar, the structure is pretty simple. There is a header at the top, usually, that indicates the month and year. Below that are 7 columns outlining the individual days of the week. Finally, there is a maximum of 6 rows to populate the number of days for a given month.

Below is a snapshot of my hardcoded HTML.

Again, this allowed me to mess with the CSS style sheet to render the overall look and feel I wanted for my calendar.

Harnessing the Power of Time

Now came the hard part. I needed to use the built-in time function to populate the accurate number of days in a given month and year. After doing some research, I learned that Javascript will return a number that corresponds to a months relative index in a year: i.e. January is 0, February is 1, etc. This can be called using the getMonth() function built-in to Javascript.

Javascript also does the same thing with days of the week and starts with Sunday. That makes Sunday - 0, Monday - 1, etc. This is called using the getDay() function from Javascript.

So, the question became how do I use this two crucial pieces of information: 1. How do I figure out what day of the week is the start of the month? 2. How do I calculate how many days are in a month?

Answering the first questions was simple enough. Javascript literature helped outline the various options for built-in functions. Miraculously, new Date(year, month) is incredibly powerful and will automatically render the first day of a given year and month argument. Using the .getDay() function on this allowed me to get the day index for the start of the month.

Next, I needed to get the number of days in a given month. Again, I used the all-powerful new Date() to get me started, and using some high school algebra, I reverse engineered a way to calculate the total days. The new Date() function can accept a large number of arguments, down to the millisecond. I did not need to get granular with my calendar, but thought I could use the month, year and day arguments. Given that the maximum number of days in any month is 31, putting in 32 days into new Date() would give me the relative date that would actually be in the next month. For example, July(index 6 of a year) has 31 days in a month. If I entered new Date(2019, 6, 32) into my console, I would expect the console to return August 1, 2019.

The new Date() function also has a getDate() function that will return the day number from a given date. Using this returned number, I subtracted this from 32 to get the accurate number of days in a given month.

To further prove my concept, I used February 2019 in my console. Passing in 2019 for year, 1 for month, and 32 for days, I should expect the above equation to return 28, as there were 28 days in February 2019.

One hurdle down, now I had to use this data to populate and render my table.

Populating the Beast

After removing the hardcoded HTML data from my table, I needed to populate the month span and the year span with the currently rendered month and year. This was fairly straightforward as I left a majority of my HTML code in the header. After finding the individual span elements using document.findElementById(), I changed the textContent to the given month and year.

After grabbing the table element, again using document.getElementById(), I then needed to add some for loops to render my rows and columns. I also knew that I would need to print the actual day number on the calendar. For obvious reasons, I started the count at 1 and assigned this 1 to a usable variable called renderNum. (Note: This variable will be incremented up by one with each column loop. But I’ll get to that in a bit)

Next, I generated the row for loop, as this was going to hold all the individual date tiles. (To be more proper, I will append my row <tr> with my table data <td> elements.) Since I knew that I would need at maximum 6 rows, I started my for loop at the traditional 0 and had it stop when i reached 6. Seeing as there was no text content for the row, all I needed was to create the <tr> element and assign this to a usable variable.

As stated before, I wanted to append each row with 7 table data elements. This meant that I needed a nested for loop. This 2nd for loop also started at 0 and ended when the count (c in this case) reached 7. This was simple enough, but the next step took some logical reasoning. Remembering that the new Date(month, year).getDay() gave me the index of day of the week, I needed to setup empty <td>s so that the count and calendar rendering started on the correct day. To do this, I added an if statement in my column for loop that would check if: 1. The loop was on the first row (aka i===0), and 2. The value of count loop was less than the new Date(month, year).getDay() value (aka c < startOfMonth).

If both those conditions were true, I wanted the loop to create a <td> element, add an empty class to the newly rendered <td> and append this to the current row element.

Next, I wanted to make sure that I was populating the correct day number on each one of the new table data elements. Modifying my empty td element method, I added a <td> element for each new day, added the textContent, and appended the row. The textContent in this case would be the renderNum variable defined earlier. To make sure that the renderNum printed the correct date, I incremented the variable by 1.

Using the power of truthiness, I used an else if statement to stop the calendar from incrementing and adding data past the last day of the month.

Once I reached the break and was out of the for loops, I needed to make sure that to append the table body with the newly formed and populated row. (I did rearrange and group the code according to variables, and my personal preference. Obviously, this is not necessary. It was just a personal preference.)

Finally, I added EventListeners on the click of the arrows to toggle to the month before and after a calendar snapshot. Given the length of this post already, I will spare you. But there is plenty of literature on EventListeners that I recommend reading if you have trouble with that step.

Below is a snapshot of the rendered calendar. I will be sure to update this post with the github link, once the project is complete.

Next up, appointments, time zones and scheduling. Wish me luck!

Rails Crash Course: Building Follower/Following Relationship

Kim Heidorn — Thu, 28 Mar 2019 17:18:59 +0000

Like many newbie coders, I wanted to stretch my newly learned Rails skills and thought building a simple travel review/social media site would be best. Building the basic MVCs for Users, Reviews, Destinations was pretty straight forward. The real trouble started when I tried to give users the ability to follow and unfollow on another. I struggled (longer than I care to admit) to build out this feature, and I figured I couldn’t be the only one. My hope is that this step by step guild will help others breakthrough the same issues I experienced and in the process, selfishly, help me to solidify what I learned.

Step 1: Make a Relationships Table

The basic setup for the Relationships table is pretty straightforward: two columns for the foreign keys titled follower_id and followed_id. Naturally, both columns will contain integers. The labeling of these columns is relative to your project as these keys will both truly be User ids. However, they do need to be labeled something unique to avoid conflict as they will be used throughout the project, specifically in a has_many: relationships in the User model.

Step 2: Modify the User Model

The next step focuses on relating the User model to the Relationship model with a has_many, belongs_to structure, respectively. The User will have many Relationships via the foreign keys labeled in the first step (follower_id and followed_id). For this project, I want the User to be able to follow another User without forcing a symbiotic follow relationship. Also, since the two foreign keys are actually the same type of entity (User-User) entering into the Relationship, I need to provide these relations with a unique label, while telling the User model that these are instances of the Relationship class. Rails provides a convenient way to find the relationships between records in the database. In this project, I labeled the two different instances as :active_relationship and :passive_relationship, where the :active_relationship is related to the follower_id and the :passive_relationship is matched with the followed_id. Again, these labels are relative and can be called whatever makes the most sense to your project. If you notice in the code below, I did add dependent: :destroy to the end of the code. This ensures the data from the Relationship table is deleted if a User deletes their profile.

Step 3: Build the Relationship Model

Now the Relationship model needs to be told which user is following and which user is being followed. To do that, we need to build out two belongs_to: statements relative to two different instances of the User class. In this project, I titled these follower_user and followed_user, but again, these are arbitrary. As with the User has_many: statements, I need to make sure the Relationships model knows which foreign key is associated with the different instances. As you may have guessed, the follower_user is related to the follower_id and the followed_user is related to the followed_id.

Step 4: Modify the User Model, Again

I now need to add the ability to find these follower_users and followed_users through the Relationship model. The code added to the User model is nearly identical to that written in the Relationship model. The main difference is that the User knows about these instances through either the active_relationships or passive_relationships.

Step 5: Build the Relationship Controller

Before I even touch the controller part, I want to add routes to map out the actions I want to use. For my project, the Relationship Controller will only need :create, :destroy and :index. The first two are pretty intuitive since I want someone using my site to be able to follow and unfollow other users. The :index is to give me the ability to listing the user’s relationships on their profile. Again, make sure that the routes you add make sense to your overall project.

Finally, I can build out the controller. The most straightforward method is the index. I have a helper method in my Application Controller called current_user, which finds the user using the session[:user_id]. I won’t go into more detail here, but there is plenty of literature online outlining the basic structure behind this method. Using this helper method, I want to find all the active_relationships and passive_relationships for the current user and save these to variables that I can then access in my Views.

Next, I add the destroy method as this, to me, is another fairly straightforward method. First, I need to find the relationship I want to delete using the :id and save that to a variable. To give my code some layer of protection, I want to ensure that the current_user matches the follower_user in this relationships. Once that is verified, I then delete the instance from my table and give the user a message stating that the action was successful. For my project, this action will be done on the followed_user profile, and I want the current user to have that same page reload, i.e. redirect_to to the same page.

Finally, I want to build out the create method that will allow a user to follow someone. This one, for me, is the most challenging logic wise, but again, is fairly similar to other create methods I used in my project. Initially, I need to find followed_user and assign it to a variable. This variable will be used to assign the followed_id and for the redirect_to path. Next, I want to build the active_relationship from the current_user and again, assign this to a variable to be used in the Views. Again, to give the user feedback, if the relationship can be saved, the user will see the message "Follow Successful." Otherwise, the user will see "Follow Unsuccessful."

The only thing left to do is add these methods to my Views. As I am still in the process of refining the look and feel of these individual pages, I will end my walkthrough here. Again, there is additional literature available online as to how people gave different buttons or links the functionality to use these methods. As I have found, there is more than one way to do things in Rails. Thanks for reading and I would love to hear more thoughts or insight into how others built out their own social website. Cheers!

Barriers in Coding for Non-Native English Speakers

Kim Heidorn — Mon, 18 Mar 2019 13:46:09 +0000

Before I joined the coding community, I worked primarily in the service industry, more specifically house cleaning and roofing. Working in HR and management in both these industries, I focused on making on-boarding and training documentation accessible to people who’s native language was something other than English. Not only did having a clear description of their role help define and manage employee/employer expectations, the individual felt more included in the work environment. It opened these same people to ask more questions about almost every aspect of the business, from what our sales documentation said to asking about advancement opportunities at the company. It gave these people more power and ownership in their work that I am not sure they had at other companies. Once I started learning the basics of Ruby syntax, I could not help but notice that it seemed English dominate. I knew that this had to be a larger barrier faced by non-native English speakers trying to break into the technology sector, and wanted to learn more about what I could do to help bridge that gap.

What are some common issues?

It’s no secret that English continues to be the dominate language for science and technology. Most popular programming languages and their corresponding official documentation are almost always written or designed in English. This even is seen in popular discussion sites, like Stack Overflow, and English continues to be the official language of many open-source educational software available for free online. From my research, there are translations available, but these are perceived from the end user as lower quality than the source material. A survey conducted by Professor Philip J. Guo at UC San Diego confirmed as much. The survey also highlighted that traditional communication barriers with general reading comprehension greatly effect a person’s ability to grasp concepts, especially so if the text became more colloquial. As one native French respondent noted, “The technical vocabulary linked to programming can be complicated to assimilate, especially in the middle of explanatory sentences if you don’t know the equivalent word in your native language. Sometime a single technical word can blur the meaning of an entire sentence (Guo 5).”

Another common issue for most non-native speakers is English grammar, specifically the subject-verb-object relationship. Words like if, unless, while, until are prevalent in most complex computer programming languages, but are often difficult for non-native speakers to fully grasp as there is not often a literal translation. This can also cause issues for non-native speakers to fully grasp the difference between core coding concepts such as the difference between objects, classes and instances. This also leads to issues with colloquial variable naming conventions. As noted in Professor Guo’s survey, “I’ve seen folks struggle with the naming of variables – opting for simple names like ‘a’ or meaningless (or worse misleading names) like ‘table’. Otherwise the folks I’ve seen who are not native English speakers but are coders tend to do quite well with the structures and grammar of coding. It is where the natural human language meets the code that there are issues... :-) (6).”

For more first-hand insight, I recommend checking out the video below from a talk regarding 3 working programmers personal experiences.

What can English speakers do to help?

Non-native speakers often have to simultaneously learn programming concepts and English, and often rely heavily on translation programs like Google to actively work out what individual words mean. To help mitigate this, English speakers can avoid using slang or local expressions that are not easily understood outside of that individuals culture. Also using more complete variable naming conventions can help alleviate comprehension issues. An example would be to avoid shorthand such as num_list for a numbered list. Also writing in short, and direct sentences in comments can help non-native speakers to fully understand the function of the program. Again, it is important to avoid using colloquial phrases in comments.

More broadly, it is important to understand if someone on your team has language limitations and at what level. Without fully understanding the starting point, it is hard to build a strong learning path and likely difficult for those individuals to feel fully integrate into the team. These learning paths also should be custom tailored to the individual. No two people learn or comprehend material the same way, and one technique that worked from someone in the past may not be effective for someone who speaks a different language or come from a different cultural background.

Professor Guo also took the time prior to this survey to build out a coding visualizer called Python Tutor. This innovative platform not only helps non-native speakers to understand what each line of code does, it also has a live help chat feature that can bring together individuals of different backgrounds to troubleshoot code issues. It is a fascinating tool that I used early on to help solidify core concepts like how certain operators work. Below is a quick tutorial video to help understand how this service works.

If you are as interested in this topic as I am, I strongly encourage checking out Guo’s research and current advancements in the industry. I also would greatly appreciate hearing from people actively working in the industry with their own thoughts on this topic!