Month: August 2019

Day 30 and a half: UI Envy

It was an UGLY day of trying to pump out yet another Friday project. I stayed at class until almost 7:00 p.m. on Friday, trying to finish. The good news is that I got the jQuery/JavaScript working, and I managed to throw in field validations by the end of the day. I still struggle with where to put events in relation to the JSON callbacks. I did manage to validate the dynamic HTML, which was a good thing, as I had some ghastly error involving my generation of dynamic links onto a page.

This morning (Saturday) we had an email from our other instructor. He had some general feedback on the sites he’d seen so far in GitHub. It actually was a good thing, as I was able to check on and update my site. Despite looking it up on stackoverflow.com, I struggled with getting an image into my readme.md file until I just downloaded one of his readme files out of GitHub and reverse-engineered it to fit my needs.

So, the only thing I had left to do before the Saturday 5:00 p.m. deadline was to make the user interface look good…

I have a confession. I’m artistic at certain things, but not others. Even with my knitting and crocheting, I great at techniques, but struggle over what colors to choose that will work together. It’s always the way…I’ll think I have a great-looking website, but then I’ll look at other classmates’ Friday projects and mine is pathetic-looking in comparison! When it’s a matter of coming up with funny-sounding or interesting text, I’m good at that, but my illustrations and placements are usually plain and downright dreary.

For instance, I FINALLY got an image to cover my Jumbotron on the main page, without looking stretched-out, blurry, or just plain ridiculous. I was so excited! Then I glanced over at other pages and people have carousels going, and multiple interesting illustrations, and beautiful interfaces that just made mine look like the sad, pathetic wallflower of all sites.

I’ll need to up my game for the capstone project coming up…

Day 29: AJAX…not just for scrubbing soap scum!

Today we learned about AJAX calls. Hilarity ensued this afternoon as we all had to create an application shell (some of us may have forgotten to engage GitHub first and had to start over again with the folder in a GitHub repository folder). We fired code for the web server—up to this point, we’ve been relying on the “Live Server” from Visual Studio Code. We’re using something called a REST API. I know it sounds like a high-end day spa, but it stands for “representational state transfer technology for an application program interface that uses HTTP requests to GET, PUT, POST, and DELETE data.

There were a few fits and starts as some people inadvertently killed their web server.

We also used Postman to test out our connection to get data, post data, etc. I know. I can’t get the song out of my head now, either…

EAR WORM!!!

Mr. Postman

I’m happy to report that, as of 9:10 p.m., I got my new entries to post to the JSON file! Now I just need to figure out how to PUT for the update file. Watch—that will probably be tomorrow’s project!

Day 28: Reason Things Out

Today, as most of my days, was a day of desperately trying to figure out how to do things. Add jQuery into the mix, and you get something like THIS:

Today we learned (the hard way) how to dynamically create a table using jQuery. We just learned to do this 5 minutes ago using regular JavaScript, so it was one of those ugly—I REALLY hate the expression “I can’t wrap my head around this,” but it was just like that. It was the mental equivalent of turning around an ocean liner on a dime. I had to stare at the example in our workbook for ages until it clicked. I have to say, once I figured it out, dynamically creating tables is much easier to accomplish via jQuery.

We also had to redo another earlier script in jQuery. For the life of me, I could NOT figure out what was wrong with my code until our instructor had me look at the stack trace. She was so excited to have a real-life multi-line jQuery goof that she called over people in groups of three to look at my screen, and showed everyone how to debug code that uses jQuery. Spoiler Alert: when it says you screwed up in some weird obscure line that’s decidedly NOT yours, you have to trace it back to your original issue (mine being using a $ rather than a # in an id object). I’m not sure how I feel about being held up as an example of bad code…

Day 27: All jQuery-ing aside…

After my rant yesterday about nitpicking errors, today I added more to my blossoming collection, including an issue with the character countdown on my <textarea> box starting at 33 characters instead of 50. You guessed it. I’d inadvertently added spaces between the <textarea> tags in my html, so the box already had 17 spaces to be in with.

Today was our exciting foray into jQuery. I can’t believe I’m saying this, but I’m finding it easier than regular JavaScript. Probably because we are taking past exercises and modifying them to have jQuery where applicable. We also have to create a spreadsheet to keep track of how to do certain things the JavaScript way vs. the jQuery way. Seeing as this is a library, it’s sort of the “Bootstrap” of JavaScript.

The good news is that we managed to get out in time for me to make it to my knitting group this evening! I’ve started on the sheep on the front of the sweater which, after dealing with JavaScript and jQuery all day, isn’t as hard as I thought.

Day 26: For the love of God, PROOFREAD!!!

This has been entire day of Pam needs to learn to read…

Today we had a day of learning Ajax calls and event handlers. I also had a weird day of things not working due to:

1. typos (“it’s readyState, NOT readState”) I was desperately searching for half an hour for this issue, until my desk neighbor happened to glance at my code.

2. ghastly errors in reading a file, until the instructor pointed out that I was attempting to read an array file that was in fact NOT an array file. I’d copied the wrong url link! AND…

3. My personal favorite—the misplaced semicolon. It took coming home, eating dinner, then going back to the code to see that I hadn’t ended the onreadystatechange correctly. Once I moved the semicolon, my job ran without a hitch.

As much as these brain-farts are always hysterical, it makes me nuts to miss things so easily avoided. I suppose it does beat completely missing the entire concept of how to write the function!

Day 25: Got the project done!

I woke up in the morning with a migraine from hell, including nausea and hurling. I had to down a bunch of Advil and caffeine, and just lie down quietly until it was time to get to class.

Despite this, I’m happy to report that I was able to complete Friday’s project! I even managed a few of the extra-credit things, too. I’m going to hold off on sending the “I’m done” email to the instructor until I have a chance to look it over once more. This time I didn’t put any “extra” invalidated pages in GitHub that I was going to get to later.

I really do need to remember, when I’m struggling and wailing and gnashing teeth all week, that it all pays off on Friday when I’m able to complete the project with everything I’ve learned over the week. I showed my resultant site to my loved ones, who were all impressed!

Now onto some fun and games!

Day 24: I know it backwards and forwards…

…or, in this case, downwards and sideways (sort of)…

After staying up quite late with my table issue last night, it turned out that I was not dynamically adding rows to the table, but the div itself, which is why the rows were showing up after the table element, and why I couldn’t get rid the the rows afterwards without wiping everything out of the div. I was off by ONE line of code. It’s always the way!

Despite my 5 hours of sleep, everything was just ducky. In fact, thanks to figuring that issue out, I was able to easily tackle our afternoon assignment. We had to take a JSON file, convert it, then use a dropdown to have the user select out an object to create a table dynamically from the file with the information on this object. I was so excited when I managed to spit out a very nice table listing field headings all the way across. I even used Bootstrap to make the table look attractive. There was only one problem…

Pam needs to learn to read.

The table was supposed to read SIDEWAYS!

The headings were to be in the left hand column and the information in the next column. Logically, this makes perfect sense, as we were only calling up one record row of information per object. I wasn’t the only one to make this mistake. Our instructor kept telling us the issue was “simple to figure out” and “much easier” than what we had been doing. However, after your brain has been hard-wired to making a table a certain way ALL AFTERNOON it’s tough to completely turn around to figure out how to literally “turn around” the table. I couldn’t do it. I was going to stay later to figure it out, but I really need my sleep this evening. I figure I can tackle it in the morning before we get started on our usual Friday project.

You watch…sideways tables will be the main project feature tomorrow!

Where’s the Advil???

Day 23: Dynamically creating things…

…Mostly a scene…

Today was a VERY long day. Thankfully, with a bit of help, I figured out my issue from yesterday. I was off by ONE lousy line of code.

Our next adventure was adding, creating, and manipulating things to the html (appendChild, etc.) I managed to figure out how to do all this, but I’m still fuzzy on how to get rid of a dynamically-created table, once it’s created. I know I can just put a blank string in the div that holds it, but that wipes out the table element within the div, which fixes it so you can’t repeat the selection process when you choose another category from the drop down. I carefully inspected the elements after the first table gets created, and it’s odd. The <tr> and <td> tags are created in the html AFTER the <table> <\table> grouping, so one can’t even erase out the table, as technically nothing is in there—even though a table is definitely created on the screen. The only way I see around this is to perhaps figure out a way to dynamically recreate the table element after the div is blanked out. Either that, or do a routine to specifically delete out the <tr> and <td> tags.

After 10:30 pm, I decided to call it a night and to tackle this again tomorrow. Right now, I have the lazy fix in there to just reload the page if you hit the “Start Over” button. I do need to figure out how to erase the rows correctly though, as the OTHER issue is that if you just keep selecting category options from the drop down, and don’t reset, the choices just get added over and over again to the page every time you select a category—they don’t get replaced with the new category’s table entries.

Knitting fair isle with five colors would be easier…

Day 22: Lost in the DOM…

Day 22: Lost in the DOM…

This was just one of those days. It began well enough…I was understanding everything, and the first exercises went well. Then the **** hit the fan. I do realize that a huge part of what we do concerns interacting with the browser and the DOM; but I swear, at times I really miss our beginning labs, when all we did was code and run in the Code Runner console. The worst dread on earth is when you try to run your code, NOTHING HAPPENS, and then you have to hit F12 in the browser. Whenever I see that dreadful flaming red type, flashing angry error messages across the console, I always want to scream at the top of my lungs, “Dear God, WHAT FRESH HELL IS THIS???” Then I remember that I’m old enough have parented the vast majority of my fellow students, and that it would probably be undignified to cry and throw things.

Today, I spent a good part of the afternoon with the bloody F12 console. We’re doing some god-awful routine where we have to take a substr of similar <img> ids (image1, image2, image3) to get the numbers on the ends (1, 2, 3). Then we have to concatenate the “para” part of the paragraph <p> ids (para1, para2, para3) to these like some nightmare from Frankenstein, and — I’m not making this up — take the alt attributes of the img tags and shove that alt text into the <p> html.

I think it was after the 12th time I tried to make this work that I decided I really needed to knit…

I know…all the ghastly code is going to be waiting for me in the morning. On the other hand, I got a mental health break, and my little intarsia sheep are really coming along!

Day 21: Who moved my cheese?

As if we didn’t have enough to do, class-wise, today we shuffled our seats. I think the idea is for us to work with different people. I was just getting used to working with the people I was working with, but of course they just HAD to do something about that…We all realize that once we get out to our new jobs that we’ll be working with different people from time to time. They didn’t need to drive that point home to us right now.

I’ve been fretting, as I’ve now lost my luxury seating in back. I should explain…The guy to my right dropped out of the program the first week, and the woman to my right decided she’d rather sit further up. After wondering if it’s perhaps my breath, I reveled in the fact that this left two empty seats–hence LOTS of room. I’m now in a seat by the door, with only one desk-space to fit all my stuff. I’m one of those people who brings everything except the kitchen sink with me to work, so to say this is an adjustment is an understatement. My monstrously huge work laptop is under the desk because I can’t fit it anywhere else. I have to use a plug in the corner of the room to charge anything, as my new location has NO free outlet plugs anywhere.

I know…get out the tiny violins.

I apologized to my new seat neighbor, in advance, for talking to myself. I’ve been reportedly talking to myself since I first started talking, and it just gets worse when I’m trying to figure stuff out–like coding, of course.

Fun fact: I checked, and you can STILL buy the book Who Moved My Cheese on Amazon. It’s even available on Audible, so that you can listen to it in the car on the way to work. You just know your management is plotting to move your cheese once again…