What Joey Learned Today

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);