In my current role, I do a lot of crawling around the front end of Ecommerce sites to improve UX and reduce friction. While developing a new feature, I found a bug had been introduce relating to the window object.

My code involved creating a checklist for the user as they worked through attribute selection for certain products. As the user worked through the checklist, a “make selection” Anchor tag would trigger some javascript to smoothly scroll the user to the next item they needed to select and allow them to work through their product order more smoothly.

The site is built using popular frontend framework that rhymes with “screw”(-y) and does some dynamic rendering as one interacts with the DOM. I found a bug in my treatment after a user cleared all options and started the selection process again. The curious thing was that the Javascript I had written was misfiring. I pinpointed the bug to this line:

elDistanceToTop = 
  window.pageYOffset + 
  document.querySelector(`#ElementID`)?.getBoundingClientRect().top

What I found was that when that element was re-rendered, window.pageYOffset was being reset to 0, and user would not be directed to the place where I need them to go.

After some non-trivial research, and some monkeying around with workarounds like utilizing the document object instead of the window object to calculate Y Offset, I came across a brilliant SO that elucidated yet another of the quirky mysteries of front end development. The bug was not the javascript at all, but the omnipresent and all powerful CSS:

window.pageYOffset is always 0 with overflow-x: hidden

My solution was a CSS one-liner, which I always value over a whole bunch of convoluted Vanilla Javscript:

body
  overflow-x: unset;
  overflow-y: unsetbody;

And *Bingo* the code was back to working as expected; window.pageYOffset was returning it’s magical pixel values to scroll the user where I needed them to go.

BTW- Here’s some more tangential learning that I came across for the 🤓 friends like me that suddenly became fascinated with “pageYOffset” property vs. “scrollTop” property.

window.pageYOffset vs document.documentElement.scrollTop

I was recently given this exercise as a take home assignment for a code interview. I really enjoyed the interview at the company. It’s a cool, game-based educational training platform for healthcare.

The Lead Engineer has an “easy going” attitude that belies the rigorous C.S. background that he has. Furthermore, he seemed very supportive and proud of the community of developers they have created and a touted a cozy two building campus where everyone knows each other. My kind of place.

Needless to say, I was super excited to work on this project. When he described this as a widget, it threw me off a little bit. Coming from a Software Intensive that prides itself on placing “Software Engineers” in positions at well-known, high paying companies and whose attendees are often C.S. grads, there was not a lot of talk about “widgets”. It was much more highfalutin stuff like “performant, readable code” and “component architecture”.

Here’s the widget I was able to build. It’s not “exactly” what the mock up outlined, but I did my best given the time frame and lack of important key knowledge (like Typography). I’ve changed it slightly to make it more understandable for someone without the company context (and fixed a spelling error, happens to the best of us.)

Some key takeaways:

• I used Semantic HTML in the code where possible to make this as accessible as possible.
• The JavaScript here still needs to be tweaked a bit to make it programmatic and not “hard-coded”, but this was more of a “styling exercise” for me given the time constraints. I’ll probably fix that as soon as this blog is finished. 😅 #devdad life.
• The layout is clean and easy to follow. The list of grades are displayed as “progress bar”-style components that are easy to identify and determine which students have the highest and/or lowest scores for the course.
• The colors are muted and pastel. It is a little hard to distinguish between the second and third colors, (shades of green). As this list grows with the number of participants in the course, it’s imperative that the colors used be easy to differentiate and web-friendly colors.
• The progress bar fill must be easy for the instructor to see, but it also must not obscure the 4 different measures the students are being graded on.
• Typography does make a big impression on the user. It’s important to have as much information from the original designer as possible. Identifying the correct typography of the design can be quite time consuming. (I’m certain the original designer would have some feedback for me, and I would be eager to hear it, btw.)
• The design should be responsive. Instructors may be using tablets, mobile phones, desktops or laptops. It’s important that style rules maximize responsiveness of the design so it can be easily understood across various devices. I’ve done my best to use responsive measurements like “ems” and “vw” or “vh” whenever possible. This takes a bit more time, but is super important with the variety of devices being used these days.
• Accessibility: Utilizing semantic HTML is a good way to make it easy for screen readers and assistive devices to interpret text and content on a web page. ARIA tags can be used to supplement semantic HTML and assist in this effort.

As always, reach out with any feedback and suggestions. I love to hear from friends. Happy Coding!

Transitioning to tech has been an awesome learning journey. More often than not, I’ve met total strangers that are encouraging, helpful and seem to be genuinely kind people. However, like anything involving commerce on the internet, there is a sketchy side. Here are a some scams that I have encountered and would like to share with other Junior Devs and Freshers that are looking for gainful income generating opportunities online:

The Upwork Account Scam:

Upwork is a platform much like Fiverr, where a Junior Dev can leverage their new skills to make some money, while continuing to practice their craft. From what I know, it is completely legit and they seem to have some pretty thorough Identity confirmation protocols to ensure there are not “bad actors” using the platform. Nonetheless, it seems one that International LinkedIn users are aware of and would like to leverage for their own personal gain.

Seemingly well-meaning professionals reach out with an intention to “network” and are excited to offer you a proposal. Here’s a few that I “red-flagged” early on (names have been removed to protect them as some may actually be well-intentioned):

• Hi, John. Nice to meet you. How are you doing? I looked at your profile and feel you are a good fit for my business idea. Are you interested in working with me?
• I’d love to send you my proposal in a nut shell. The aim is to collaborate together and make money at the certain freelancing site. As a senior developer, I have many years of web development experience and I am familiar with such a workflow. You don’t need to put your time or effort from your end. If you don’t mind, you create a freelancer account and lend me to take cool projects matching my skills. I will handle all of the work and we will share profit based on determined percentage. I know it sounds odd and unfamiliar but I’d love to give you full understanding if you are a bit interested in my suggestion. Thanks.
• I am a full stack developer and am looking for remote jobs on Upwork. I have an issue that need your help so if you don’t mind can I ask you favor? I will reward you.

Now I have read the basic user agreement terms on Upwork, so I knew right away these are unethical use cases for the platform. I always respond politely, but firmly that I’m not interested in any arrangements that are outside of the user agreement I have signed.

If you have seen other scams, or are curious about the legality of different sorts of Upwork employment agreements, here is a link to some other common Scams: https://phoenixhwc.com/upwork-scams/

“Free Training projects and Job Placement with H1B sponsorship”:

There is one company that has contacted me a couple of times about a free training program. Upon closer inspection of the employment agreement, they upfront tell you that you are going to have to lie on your resume claiming you have 5+ years of .Net experience. Furthermore, there is a $6,000 charge for breaking any terms of their “free training”. In other words, if you don’t want to be placed in Wyoming writing code for “Random Joe and The Schmoes” locked in at $50,000 for your first 18 months (raise to $55k for top performers!), then you will have to pay $6,000.

Now this might actually Still be a legitimate opportunity for someone, especially considering the coveted H1B Sponsorship. However, any program that Requires you to lie on your resume about 5+ years experience with a technology that you have just learned, just reeks of sketchiness and I can only imagine what other sorts of unethical tactics one might find there.

Make sure to Check Glassdoor and/or Google Reviews on any Organization offering you training or potential employment, and read carefully to try to get a balanced perspective on what you’re signing up for.

Dice Job Offer:

The latest one I received is a pretty elaborate scam, that again seems to be phishing for my identity, Address, Name, Sex, Bank Acct. etc. They offer an “ancillary role” that would pay $5,000 per month for 6–10 hours per week of my time. Pretty sweet, right? Wrong!

Now, this is a potential debt collector’s arrangement and I don’t doubt that there are positions that pay that kind of money for that “little effort” , however, they don’t come “out of the blue”, and the biggest red flag is that no one asks you to sign a contract for a job Before you have even spoken to someone on the phone or over videochat.

Here is the “official” job offer, in case someone approaches you via your Dice.com acct:

We are in need of a corporate representative in the United States and Canada to liaise with our existing customers and help strengthen our business operation in the North America region. NOTE.. (This position is open for any individual regardless of your areas of specialty and also does not involve any traveling within or outside current location of potential employee). [Company obscured to protect their business] will remotely guide potential employees through the processes involved in this role for effective discharge of duties. Like I said in my previous email your job will be a 1-year ancillary role with the possibilities of an extension.

Please find attached detailed information about the role for your review and feedback, We look forward to your quick reply.

Best regards.

N.P
Again, I have obscured the identity of the company supposedly being represented and the name of the person who sent it. Most likely it is a name that the actually “phisherman” has stolen from elsewhere on the internet and there is no need to further incriminate random people.

Needless to say, I have contact the masqueraded organization and informed them of this seemingly fraudulent business proposal. I will now reply to “N.P.” and inform them of that and ask them to cease and desist with harassing “job offer” emails.

For more info on Dice.com scams, I found this helpful thread on reddit: https://www.reddit.com/r/ITCareerQuestions/comments/en8irw/dice_job_offer_is_it_a_scam/

For more information on Phishing, here is a great website: https://www.phishing.org/common-phishing-scams

Thanks for reading, good luck on your job search and let’s get back to what we are excited about: Software Development.

Happy Coding!

In my quest to be as prepared as possible for a serious tech role, I attended a workshop by a recruiter(who I’ll call Fred) who had worked with Facebook for about a year and had very good results successfully landing job work his candidates, with a rate of 60%.

Now I have no idea if that means Fred placed 3 people or 30 at FB, but I definitely paid close attention to what he had to say in the “mock interview” he set up for us.

Our “guinea pig” that evening was given an algorithm challenge to solve and Fred eagerly looked on to assess his coding skills. The code challenge only lasted about 10 minutes and then Fred moved on to the “comments” part of the chat stating, “Do you want to know why you failed?”.

Brutal?

Yes, but why mince words? We were all there to learn something and Fred was laying it down as straightforwardly as he could. First of all, Fred noted that the solution was a “brute force” solution. The interviewee had clearly seen the problem before and had an idea how to go about it by creating a nested “for loop” and actually got a solution, but it was O(n²), (which is only worse than an O(n!) solution).

“Space Complexity!” retorted Fred. You didn’t even talk about how much space your solution required. We all sat back and marveled “ahaaa”, like the newbs we were (and some of the people in the room had hard professional work experience on their resumes!). Such is life in the era of Zoom-meetups and coding workshops.

Space Complexity

“Space complexity is a measure of the amount of working storage an algorithm needs. That means how much memory, in the worst case, is needed at any point in the algorithm. As with time complexity, we’re mostly concerned with how the space needs grow, in big-Oh terms, as the size N of the input problem grows.” -Bluffer’s Guide to Space Complexity. Check it out here: https://courses.cs.northwestern.edu/311/html/space-complexity.html#:~:text=Space%20complexity%20is%20a%20measure,of%20the%20input%20problem%20grows.

Another great resource for Space Complexity concepts is Colt Steele’s JavaScript Algorithms and Data Structures on Udemy. His 6-minute portion of the course on Space Complexity is probably worth the discounted price of the whole course. Here are my chief takeaways:

1. Auxiliary Space Complexity — This is the space required by the algorithm Not including the space required by the inputs. We are talking about the space required by the algorithm as “n” grows arbitrarily large.
2. Big O — We use the same formal language for Space complexity as we do for time complexity.
3. Primitives — most primitives are constant space. (Booleans, Numbers, Null, Undefined)
4. Strings — require O(n) space, where n is the number of characters in the string or “length of string”.
5. Reference Types — are O(n), where n is the length of the Array, or the number of keys in the Object.

Some Examples:

O(1):

O(n):

and an aside, because programming is all about discovery and learning:

Parity of zero

O(n²):

As always, Please Call Me Out if I did not understand the Space Complexity of any of these examples correctly or if there is anything else misleading in this blog.

Happy Coding!

This Algorithm is in the beginner/medium series level, but can get Overly- confusing if you look at the wrong tutorial.

The problem: Given an unsorted Array of consecutive integers, how do we find the minimum number of swaps to sort the Array.

To visualize that, consider:

arr =[1,3,2]

This clearly takes 1 Swap (swapping 3 and 2) and return

arr = [1,2,3]

As usual, that solution is very easy to see and reason through. However, when scaled for a larger array, (like test case arr = [7,2,3,4,6,2,5]) it quickly becomes overwhelming.

1.) One thing is certain, we are going to have to analyze every element in the given array to determine if it’s in the appropriate location. A simple for loop with an “if” statement will suffice.

Consider the pseudocode:

for(let i = 0; i < arr.length; i++) {

if (arr[i] != = i+1){

“do some jazz” to put the element in the correct spot.

}

We can ignore elements in the correct place, because we don’t want to swap those. So our “if” statement allows us to look at each element in the array and compare it to “i+1”.

But why “i+1” you may ask? Well, Array’s are indexed from “0", while our elements in the Array is a set of numbers starting with the value “1”. So, when it’s sorted, the Array Element at index “0" is going to be the same as our first element, (ie. arr[0] == 0+1)

2.) So what is “all that jazz”, and how do we count the quantity of swaps we need to “do”??

Why don’t we initialize a count? Say:

“Count = 0;”

and each time we make a swap, we can just add 1 to it:

“Count++;”

Done.

3.) Here’s where the logic begins to get a bit confusing. This is what we will do inside of the “if” statement when it evaluates to “!==”. We are going to need a variable, “temp”.

a. “let temp = arr[i]”

Whenever we find an element that is not where it should be, let’s assign it to to temp.

b. “arr[i] = arr[temp -1]”

We then subtract 1 from the value represented by temp and assign that to the spot we just removed the element from. Yeap! That’s our “count++”.

c. “arr[temp -1] = temp”

The third magical step is to take temp and put it in the place designated by “arr[temp -1]”.

Clear as mud, yes?

Basically this allows us to cycle through all the values that have been swapped and place them one place closer to where they should be, every time recording the swap. This, ultimately leads to a sorted array in the least swaps necessary.

The code:

Elegant, clean and ES6, baby! Voila!

Happy Coding!

The great thing about Hash tables is they have the coveted time complexity of O(1) for most operations.

In other words, it’s super easy to locate an item by it’s key and then update the value. No iterating through an entire array, no need to preform a binary search (which quickly eliminates things you have to search through but you still have to search through a bunch of things), you just find an item in the hash by key, and “do your Jazz”.

Check out this great resource for more info on time complexity: https://www.bigocheatsheet.com/

Also, I would be remiss to not mention that this solution came from our friend at “Web Dev Journey” https://www.youtube.com/watch?v=kzka2GbVTuU , so be sure to check out his channel if you’re into this kind of elegant solution. (He even answers comments if you’re having issues debugging your code!!)

So first thing’s first: We’ve got two long strings and we need to compare the items of the “note” string to the items of the “magazine” string and only return true if a note can be constructed from the “magazine”. Yes this is case sensitive, so it has to be exact.

Here are the steps and the way I understand them from looking at this code:

1. This .split() method in JavaScript is perfect method for putting our items into arrays that can then be compared.
2. We create our Hash “magazineObj” (just a Plain Old JavaScript Object or “POJO” as a wise man, my instructor Erik Kim called them. Miss you, buddy).
3. The “possible” variable is how we will output our solution in a boolean.
4. The next thing we do is iterate through our “magazine Array” and assign each word to a key in our object.
5. The elegance of this solution also applies to Space Complexity. All we have to do to find out “IF” we can create said note, is iterate through the “note array” of words and check if they are in the magazineObj. If we find a word, we remove it from our object with line 15, “magazineObj[word]- -”. I love how this is actually doing some garbage collection as a part of the process.
6. If our magazineObj[word] starts outputting negative values (line 16), then we know there are words in the note that cannot be found in the magazineString, otherwise, we output “True”.

Here’s the code:

The first “Edge Case”, I’ve noticed that this doesn’t account for is punctuation. If we have a comma behind a word, we could still technically cut out the same word and create a ransom note.

Anything else I’m missing here? I would love to hear your ideas for a refactor.

Happy Coding!

Ransom Note — Hash Table Algorithm in JavaScript was originally published in Dev Genius on Medium, where people are continuing the conversation by highlighting and responding to this story.

I’ve frequently started blogs and realized that the scope was far too large for the capacity of a dad of two young daughters in quarantine can accomplish in a week filled with other career services activities and Github commits. So this week, I’ll try to keep my focus a bit more “granular”. I’ll draw my attention to the immutable nature of ‘strings’ in JavaScript.

I need to add that this was brought to my attention by the Awesome email workshop series by Dan Abramov, “Just JavaScript”. (Reach out to dan@overreacted.io if you are interested in strengthening your JS fundamentals. This is an excellent resource.)

“Strings are immutable”- is one of the fundamentals of JavaScript. In fact, all “primitive” data types are immutable, but what does that mean?

Consider the following code:

So I’ve assigned the string “hallelujah” to the variable “immutable”. When I console.log(immutable), it passes the value assigned to the variable to our console.log() function and prints out the string in our console.

Furthermore, (as seen on line 3 above) one can use bracket notation to access an element of the string, (similar to with arrays) and console.log() immutable[1], which does as one would expect and returns the character at index 1 of the string “hallelujah”, which is the letter “a”.

So, one also might assume just as we can assign an item to an index in an Array with the Same bracket notation, we can assign a new char to a String, right? … Nope.

Stop!

Strings are immutable, remember!

You cannot change a string once it has been assigned to memory.

Check the code, just to be sure:

Just as Dan pointed out to me, JavaScript ignores the un-permitted character assignment, and outputs the original “hallelujah” string, unfazed.

More Primitives:

So what are the other primitives in JavaScript that we need to be mindful of?

There are seven of them in JavaScript:

string, number, bigint, boolean, symbol, null and undefined

and if you want to know what methods are available to each, here is an excellent resource. https://javascript.info/primitives-methods I’ll likely continue to explore these in the coming weeks as they are fundamental to a complete understanding of JavaScript.

Also, Here’s the repl.it, for this Blog:

Log In

(You will have to login to repl.it to access it, though. ) Please reach out if you discover anything new you want to share. As always,

HAPPY CODING!

This week I’ve had a number of great conversations with my extended network. These people are data engineers, senior and junior software engineers and my career coach.

I feel like I am in a great place based on several suggestions, tips and tidbits that they have given me. I want to jot some of these down so I have a future reference in case self-doubt creeps in again.

• A non-traditional Background is a strength not a weakness.
• Previous Job experience is a major asset, because I’ve developed solid conflict resolution strategies from working in professional, high pressure capacities for several years.

• I will likely not be the “rockstar” coder of the first team I join.
• Having worked as a side-person for superstars, I have actually achieved my greatest successes in life in supporting roles. Side-people are the kind of team players that can facilitate organizational success.
• I have internalized strategies for making the client shine, they are second nature.

• Having a family is something that can make me a more dedicated employee, willing to commit significant time and effort in a new role.
• I am a mature professional and will make an excellent solutions engineer, or some other role.
• Having worked in parallel with an agile team, I understand the importance of iteration.
• Documenting future plans and strategies, executing them, and analyzing results are all integral to success in developing any product.
• Even some well-qualified candidates can be rejected from 99% of the roles they apply to.
• White-boarding the structure of an application can be an important exercise. You should be able to make a diagram of how all the pieces of your project fit together.
• Writing User Stories and understanding User Experience are essential to creating the architecture of any application.

• Having a portfolio of complete projects shows experience touching a variety of technologies.
• Through my software intensive experience, I have learned methods to assimilate new technologies into my workflow easily.
• I continue to get better at researching solutions.

If you have any other suggestions or advice, I’m all ears. I’m always excited to discuss new technologies and strategies.

Happy Coding!

I found a beautiful solution for a priority queue, but it was definitely the “Brute Force” solution. If it were an interview for a “Big 5” tech company, I would have “Failed” on the spot.

The Time Complexity “Gotchas”

In order to take an element and iterate through it with a simple “for loop”, we have to do n operations (where n is the number of elements in your Priority Queue). Furthermore, when we “.shift()” for our “dequeue” method, we have to reassign indexes of Every Single Item in that array in order to keep the next highest priority item right at the front of the array.

Heaps to the Rescue

A max or min heap is a “binary tree data structure” that makes it a lot less temporally complex to find things and operate on them.

Above we see a Max-Heap. Every node has a parent and two children. This allows us to much more easily traverse the data set. You can see from the tree structure, right off the bat we have split the number of nodes we have to search in two.

O(1) or O(log n)

The Max value is always at the Root of the Heap, so finding our Max priority element is super simple and has that coveted time complexity, Big O notation O(1).

Finding the minimum in a Max Heap is a bit more complex, but due to this clever structure, it is never worse than O(log n). This is because as you traverse the tree from “Root” to the “Leaves”, you quickly eliminate a lot of the nodes that you have to inspect.

Code coming soon…

Everybody has experienced a “queue” at some point in there lives.

Folks in the UK and abroad use the term liberally. In the US, it’s most often relegated to the “printer queue”.

Anyone who has accidentally fired off more than one print request while trying to troubleshoot your network configuration can attest:

“First in First Out”

is the rule of the day. In other words, if you had 100 cat images spooled on your printer queue, you’re going to have to print every single one of them before your current print job.

A “priority queue” is an awesome data structure that can allow us to give a “priority” to any given element in a queue.

This way, we can push an element to the front of the line and “dequeue” it if it is of greater priority.

Other standard priority queue operations are as follows:

Enqueue, Dequeu, front, isEmpty and printPQ

//enqueue(item, priority)

When we add an Item to the rear of our queue.

// dequeue()

When that item is plucked off the front of the queue.

// front() rear()

What is the front element of our queue?

// isEmpty()

Are there any elements in our queue we should know about? This is a perfect helper method.

// printPQ()

Print the queue in order of “first in first out”.

The Code:

enqueue(item, priority)

1. Create a new class for your Queue elements, that will allow you to create an object for every item in the Queue consisting of an element and it’s priority.

2. Create a function that allows you to “Enqueue”an item with it’s priority by creating an instance of the QElement Class, “qElement”.

Add a simple “for loop” and as you iterate over the Items Array, you compare the priority of an element to be added with the priority of each element in the Array already.

Use an “If” statement inside that “For Loop”, so that once you find the appropriate index in the array you can “splice()” the new item into the items Array representing our Queue.

The place where “(this.items[i].priority > qElement.priority)” evaluates to “true”, is also where one can:

— assign value “true” to the “contain” variable

— “break” out of the “for loop”.

The “contain” variable is used with the “bang” operator in the final “if” statement, in order to allow items to be added to the queue when they have a higher priority than any other element in the array so far.

This final “if” statement simply will “.push()” the element into the Array in this case.

dequeue()

To remove an item from your queue were going to utilize native JavaScript “shift()” method.

1. We check to see if the Array is “empty” with our helper method:

2. We shift() said item from the priority queue. In a priority queue Array, higher priority items are shifted from the front of the array. The shift method removes the first item and returns it which is Exactly what dequeue is meant to do.

front() rear()

Front() and Rear() methods are super simple. The return first or last elements in the queue, respectively.

printPQ()

This one seems super straight forward. Print the Array, right? Well not quite.

First one must get the strings out and line ’em up. Then we can return them.

A “for loop” should suffice.

Output

I slapped this in a quick repl. and it works fine. Feel free to peruse it: https://repl.it/join/uacotmwq-johnspeck

Time Complexity and Conclusion…

So Cool. We did it. We’re done, right? Not quite.

The whole point of Algorithms and Data Structures is to better understand the basic building blocks of code and minimize time and space complexity.

The Time Complexity of this basic solution is not ideal. It utilizes simple “for loops” and we end up with time complexity of O(n). This is due to the need to iterate through all of the elements in our Array to perform methods.

Using a “Max Heap”or “Min Heap”, we can Get the time complexity down to O(1) for “search” (since we always have our Max or Min at the Root node and thus know Exactly where it is). We can get our “inserting” and “removing” down to O(Log n).

Awesome! Sounds like another Blog for another day… But I’ll get there. Here’s a link in case your already curious about using Binary Heaps for Priority Queues:

Happy Coding!