What Joey Learned Today

As a product developer, I tend to focus on developing complex solutions and often times forget about coding basics. I constantly write and deploy code, but It's common to get stuck in the product development rut of reusing pre-developed blocks of code throughout the system. In order sharpen my skills. I made it a goal to revisit popular coding exercises and see how I can solve them now that I have a few years of working experience.  The fibonacci sequence came across my path once again! I've been asked how to calculate the sequence in past interviews, and it's fairly straight forward. For those not familiar, here's the sequence: 0 1 1 2 3 5 8 13 21 Essentially, the sum of the first two values is the third value...and the sum of the second and third value is the fourth value, and so on. There's a couple of ways to solve this problem. Solution #1 The n parameter is basically an index stopping point.  In other words, how large do I want the array to be ?  I set a def...

Problem I had an assignment to build a dynamic form in vanilla JavaScript / CSS for a landing page. Specifically, I made the label z-indexed over the textbox field and whenever the user focused on the field, the label will animate up to the top of the field. To me, this solves the placeholder text disappearing as soon as the user starts typing then forgets what the field is. (funny, I know.   But it happens to me all the time). I ran into a problem where if the label’s text length is too long, the text would wrap to the next line obstructing the user.   Originally, I thought I needed a fixed 20px, but I needed to know the exact height of the label before shooting it up above the field. Solution Alas, I learned about a JavaScript function called getComputedStyle which solved my problem perfectly.   Once I got the computed height of the label, I made sure the margins were adjusted so the label would clear the field....

Problem: I wanted to embed a form into an webpage.  Easy enough!  As I tested the form in the iframe, I noticed the form height would change during validation. As error messages pop up, the form height would increase, and before I knew it, half the form was hidden in the iframe.  I needed to figure out a way to adjust the iframe according to the content height in the iframe . Solution: I discovered a way for an iframe and it’s parent to communicate.  In the iframe content (child), I figured out a way to post a message (body height) to the parent. When an error occured, I would run this code: let body = document.getElementsByTagName('body')[0]; parent.postMessage('formHeight', body.offsetHeight); In the parent page, I set up an event handler to always be listening for a message from the child.  When the parent detects a message, I can receive and use the data for whatever I want.  In my case, change the height of the iframe: ...

Problem :  I've been having to write solutions which required some sort of recursion.  The last recursion assignment I had to write was a homework assignment about 10 years ago. I remembered the concept, but forgot how to write it. Solution :  Here’s a simple example of recursion. I start with an array, and after I fire the function, I remove that index from the array, so it shrinks. Once the array is empty, recursion stops.  Pretty straight forward! Code : let books = [ 'Chosen by God', 'Holiness of God', 'Essential Truths', 'Justified by Faith' ]; function readBooks(b){ while (b.length > 0){ console.log('I\'v read ' + b[0]); b.shift(); readBooks(b); } } readBooks(books);

Problem: I needed a map embedded on a form I was working on to pinpoint a location onto an ArcGIS map.  As far as ArcGIS, there were plenty of examples using latitude and longitude, but no examples using a standard address. This project seemed easier than it really was. Solution: I’ve decided to use the Javasript API to solve this problem and it worked like a charm.  Those who are new to ArcGIS should find this post helpful if you want to simply point to a location using an address.  Let’s get right to the code. Code: This is just very basic markup to show what files to include and what form elements to use. HTML (index.html): <html> <head>     <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">     <style>         html, body, #myMap {             height: 400px;  ...