DEV Community: commdao

JSON! at the Airport

commdao — Tue, 31 Oct 2023 22:31:00 +0000

The most stressful part of travel is the whole airport experience, yeah?

You know, for prep time, I thought the old rule was get there 1 hour before for domestic and 2 hours before for international. My girlfriend said it was 2 and 3, which I've never heard before, but she provided proof:

And reading that text over again, it only now dawned on me that all that extra time is supposed to be part of the contingency once you're actually there. That's not taking into account traffic on the way. Luckily, the roads of Mexico City were silent at 3:30 AM-- the quietest we'd seen it since our visit.

We had issues with trying to check in through the Aeromexico site and app the night before. But with only carry ons, and no checked bags or items to declare, the self-service kiosk should be easy peasy.

Except,

err

(I wish I took a photo of the err code)

I could tell my girlfriend was getting more and more anxious with each attempt and restart. The mind starts jumping to the worst fears, of course.

But then I see the latest message:

something something JSON err something something

I couldn't tell you all the ins and outs of JSON or what it stands for. But, it's not a syntax that's completely alien to me either. See it with the little REACT work I've done. A package handler of sorts.

Something with handling API, I think.

So if there's an API, there's a database. Okay, the kiosk is probably just having issue retrieving the data versus any issue with the actual data (i.e. our booked flights).

And sure enough, when we spoke to a service agent, we got printed boarded passes without issue!

I know I did all that setup at the beginning about airports, but I'm going to break away to the real heart of the matter:

Recognizing the unknown feels awesome!

It's one of the best parts of the otherwise demoralizing learning process. Sure, you can take classes and lessons, do quizzes, then get scores in order to feel a sense of progression.

But if you've ever learned a language before, you know there's a disconnect between feeling like you learned something versus actually learning it. I saw it in my students when I taught English. There were kids who didn't think they had the skills because they didn't "feel it" or see it reflected.

Then, there were some kids who thought they were hot shit because they had the grades, but the capability was non-existent. (I can say it bluntly like that because classroom life is a decade ago!)

I've also experienced this myself in learning Japanese. To put effort, then not know if you're actually improving... only to get that Matrix moment where it all comes together when you stick with it.

With all the ups and downs and feeling stupid with learning code this past year, this JSON recognition will be one of those Matrix moments.

Recontextualize to Remember

commdao — Fri, 13 Oct 2023 17:00:39 +0000

Diving into the world of web development has been the dumbest thing I've ever done.

As in, learning to program and code is outside my wheelhouse, making me feel dumb on a regular basis-- not that the field itself isn't a smart move. (I believe it is! That's why I'm trying!)

It feels like such an uphill climb to get a point down, only to later forget any understanding. It happens so easily. It happens often.

Is it because I'm not passionate enough? Is it because I don't love this stuff?

Eh, neither of those matter.

I've gotten a lot of peace of mind once I accepted that I will forget, and that's part of the process. Maybe not so much for the hardcore, but it's my process anyway.

No need to learn things perfectly. No need to spend so much effort trying to remember. It's less pressure that way. And it makes the second (or third or fourth or fifth or sixth) round of re-learning much easier.

Now on to the real purpose of this post: writing down another aspect of learning that makes things easier.

I was listening to HTML All The Things, their JavaScript Basics episode as a refresher.

And they were going through the differences of using var vs let and const. A staple of JS understanding. Something you should know for an interview.

Something that I've learned and forgotten frequently. I get reminded of its importance when my code breaks, basically. Or when something is/isn't hoisting properly.

And as much as I can read through the differences of global and local scope, even with due diligence and note taking, I'm still going to forget.

But in that episode, when talking about global scope, they used an example that registered so well with me: dark mode.

Global can be accessed anywhere in the program. You might have something you want the entire program to know, such as the light and dark theme.

Because duh. Of course you would want that toggle across the board and not limited to a single page.

It seems so obvious, but I never had global as a concept click so well until now. Moving forward, when I distinguish between global and local, I can always think back to dark mode.

What other aspects like dark mode would I need the entire program to know?

Trust with DevTools Broken

commdao — Fri, 29 Sep 2023 17:58:35 +0000

Making use of the Chrome Dev Tools habit has been a more recent practice of mine. I've used it to inspect other people's code or disable JavaScript to get around some subscription-gated sites, sure, but to do due diligence with my own code?

After mixed results with optimizing my portfolio site for mobile, I've been more conscious of simulating mobile devices with Device Mode.

And with my latest journaling app, I stopped to preview it all every step of the way-- Android and iOS to boot!

When I finally deployed it on Netlify, I shared the link to my friend and mentor who gave me props. But the screencap he shared looked weird.

I was crushed to see it looked just as jumbled when I pulled up the site on my own phone. It felt especially demoralized when I put more effort than ever to have responsiveness in mind.

Dev Tools, you lied to me!

How can mirrors be real if our eyes aren't real. - Jaden Smith

Never thought that quote would hit as hard as it did now.

How are you supposed to check the site layout if you can't trust the preview? And to that, I still don't have an answer. Said friend thought it might've been a rem - px issue, but adjusting that math didn't seem to make a difference.

Device Mode preview will remain a mystery, but luckily the actual fix for my site layout wasn't too bad.

Those elements that are all jumbled at the top were created at a later stage as I was designing things. And, instead of respecting the HTML top to bottom order (I thought only JavaScript cared about that?), I left those elements near the bottom of the HTML. I had things positioned okay through CSS, but position: fixed and position: absolute were conflicting with other styles. It was much easier to let things fall in line with flexbox and adjust from there.

For those of you who felt Dev Tools betrayal, how long did it take you to regain trust? 🥺 👉👈

Even Pro Producers Use Reference Tracks

commdao — Tue, 26 Sep 2023 04:58:32 +0000

Something I've adjusted with my on/off again relationship with music production is using reference tracks. No, not just trying to remake a song. Not only modeling a tune based on another either.

Literally, importing the original, and toggling it on/off as a baseline as you craft your own version... or something else entirely. It's really been a gamechanger as I continue to battle the learning curve that is EQ (truly the bane of my existence.) And now that I'm being more consistent in using them, I look back and think to myself: why was I so adamant against using them anyway?

Even pro producers and sound engineers use reference tracks in this manner, which is part of the reason why I've come around to it.

I think before, it felt like cheating? Just too much of a crutch. I should be struggling forward on my own. And maybe that has its merits too to an extent. It's not always the best thing to have the immediate answer and solution when you're in the learning phase.

However, what's the context?

For a seasoned musician with schooling, years of play, and the ear? They could do well with more struggle time. They'd probably ease in and out of it much more easily too.

But for someone who took a year of piano when he was 4 years old and stopped, then taught himself guitar to impress girls and stopped... how the hell would he have that ear and knowhow to replicate a song?

The talent is lacking. The skills... they're not cultivated yet.

So similarly with coding and programming, if that's your background, then sure. Maybe you can struggle a bit better. But if you're a fish out of water (like me) coming from a field completely unrelated to this sort of thing, look at other people's code!

Yes, expose yourself to concepts. Find inspiration. Even though tutorial hell exists, do the damn tutorials.

But it's okay to look at and replicate code until you're more and more familiar with the components.

Piece of Cake JavaScript Functions: Single-Page Application NavBar

commdao — Mon, 11 Sep 2023 18:17:54 +0000

Part Blog / Part Review, I plan to breakdown the Javascript functions I use on my portfolio site. While they might be a little bit more complex than the absolute beginner level, you'll see it's not really that more difficult. And if you can follow along and do it yourself? Well, it's a piece of cake after all!

With any menu, you have a list of the different places visitors can go. Even if you don't code, all of us have experience with hyperlinks (<-- this here is a fake one, but you know the drill: you see something in blue, and you know that when you click it you should be taken to another page).

HTML implementation as follows:

<a href="website URL">whatever caption text</a>

And for a complete example:

<p>Don't go to my old site, check out the new one <a href="www.jondao.com">here</a></p>

Multi-Page Application

Even if you don't code, if you've ever had a blog, you're familiar with this. When you're creating a blog post, it's making an entry as its own separate page. If you ever wrote a blog post that linked an old post, you're linking back to a separate page.

It's perfectly fine to do, especially when the pages have a lot of stuff going on. The thing to note is that the redirect will be slightly slower. After all, the browser has to load a brand new page.

So what happens if you're trying to redirect to a page that isn't all that complex?

Single-Page Application

Until I develop my site further, my menu sections are basically simple blocks of text. I don't really need to dedicate that information to its own separate page (yet).

Let's keep things optimized for snappiness. Instead of taking users to an entirely different page, I'll have everything already loaded on the site but hidden. Then, when the menu button is clicked, that section's information will show.

Here's the HTML Menu

<ul class="menu">
     <li><a href="javascript:void(0);" onclick="displaySection('writing')">Writing</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('music')">Music</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('projects')">Projects</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('about')">About</a></li>
</ul>

For now, don't mind what follows the href. Remember, we're not actually going to be taking users to a different page. The more important aspect is we have a function that will trigger when it's clicked (e.g. onclick="displaySection('writing')")

I won't list the HTML for all of the sections, but let's use the writing one. The structure is basically the same.

<div id="writing" style="display:none;">
     <h3>Written Works</h3><br>
     <p>So, I could dig and pull from a decade back a list of articles I've written that were published. But, they'd all be e-learning, language, or fitness focused. And for the future, that's not the kind of writing I want to do!</p><br>
     <p>Currently on the docket is submitting to this year's <a href="https://theghoststory.com/tgs-fiction-award" target="_blank">Ghost Story Supernatural Fiction Award</a>, where I'm likely to become a two-time reject. Then, I'll participate in the <a href="https://nanowrimo.org/" target="_blank">2023 NaNoWriMo</a>, where I hope to be a two-time completionist!</p>  
</div>

It's a heading block with two paragraphs. You'll see a few standard hyperlinks in there as well. <br> is how you do a hard line break. All of that is wrapped in a div that has an id and class. Then, we have the style set to display:none so it's hidden by default.

Now, we need to address the functionality in JavaScript.

function displaySection(sectionId) {
     const selectedSection = document.getElementById(sectionId);
     selectedSection.style.display = 'block';
};

Remember, our sections are hidden by default. We already have it set in the HTML (onclick) that this function will activate when clicked. It takes the corresponding id, and changes its display to 'block' (e.g. appear).

Ta-da! And now it's loaded.

Is there more to Single-Page Applications (SPA) than that? Sure. But this is a core chunk of it here:

Make hidden div containers of content with appropriate ids.
Address those ids in JavaScript and write the function to make them appear.

Array Index != Array Min/Max Value

commdao — Tue, 01 Feb 2022 03:08:55 +0000

In this coding journey, I've severely underestimated how much utility goes into using an array. If you take a peek at some coding interview questions, you'll see lots of array stuff too!

Edabit gave me the challenge of "Finding the Smallest and Biggest Numbers" within an array of numbers.

When I first took it to task, I made the mistake of confusing that for the index (i.e. the placement order of the numbers). I mean, it made sense to me since the example arrays where in numerical order.

Why wouldn't arr[0] always be the smallest number?

Mild spoilers: you'll need to learn Math.min and Math.max.

TL;DR placement is placement. Value is value. Placement != value.

Asynchronous

commdao — Thu, 01 Jul 2021 19:40:20 +0000

In the middle of learning `setTimeout(), I'm seeing the word asynchronous a lot. And Google says that just means

not existing or happening at the same time

(There's a second definition that's probably even more of a relevant application to coding, but it's a bit wordy.)

But, okay, async, not at the same time. So synchronous is at the same time.

OMG THAT'S WHY THEY CALL IT BEING IN SYNC.

If NSYNC ever makes a comeback, they can call their album **SYNCHRONOUS. Here's the concept album art they can have *for free.

Thinking about Ternary Operators

commdao — Wed, 30 Jun 2021 15:38:45 +0000

This is sort of a more advanced topic, and I've been recommended not to worry about it too much. After all, you want to feel more comfortable with the basics before you simplify, and "simplification" can be a never-ending process.

That said, I know myself, and it's something I want to duck talk through so I can get back to the more important basics.

Drinking Age

First, let me review a more traditional if / else statement:

var age = 22;
var canDrink;
     if (age > 21) {
          canDrink = 'yes';
     } else {
          canDrink = 'no';
     }

If someone is over 21, they can drink. If they're under, they can't. In this case we have someone who is 22, so they'll be okay.

Ternary Operators follow that logic too, but it manifests like this:

condition ? expression_1 : expression_2;

So using that drinking example:

var age = 22;
var canDrink = age > 21 ? 'yes' : 'no';

Makes sense, right? Let's try with one more example.

Higher Salary Justifies Gaming Purchase

Let's say I want to make a certain salary before I can justify buying a PlayStation 5. (Honestly, we need some actual good console-exclusive games first, but bear with me here.)

I tell myself that I can't justify buying a PS5 unless I make $70,000, and what if I make minimum wage?

var salary = 28000
var buyPlaystation = salary > 70000 ? 'yes' : 'no';

And one more time more traditionally:

var salary = 28000
var buyPlaystation;
     if (salary > 70000) {
          buyPlaystation = 'yes';
     } else {
          buyPlaystation = 'no';
     }

It can get even more mileage and usage than that, but this is a good digest for me now.

Photo by https://photostockeditor.com

"Do you know what '++' does?"

commdao — Tue, 29 Jun 2021 11:27:21 +0000

Finished another JavaScript tutorial and shared the project with a friend. He was reviewing one of the functions and asked, "Do you know what ++ does?"

timerTime++;

Gut reaction was stress! But my friend wasn't gatekeeping. He wasn't saying "Do you even know what ++ does?"-- he was just legitimately checking in. That's why he's my dawg.

In the context of this project, "timerTime++;" ended up meaning the same thing as

timerTime = timerTime + 1;

But, top dawg reminded me that ++ can have different outcomes in different uses. And that's... fun.

I know I definitely looked up the difference between i++ and ++i before.

Something, something loops.

It's definitely not fully ingrained yet. But look at that:

usage
reflection
research

I utilized it without fully understanding. I reviewed how well I got the concept, and when I realized it wasn't quite all there... I was able to look it (back) up (again).

Note: we call him top dawg cuz he's a top dawg.

Conviction to Code

commdao — Mon, 28 Jun 2021 23:40:58 +0000

I reached a great milestone moment in this coding journey recently.

For the past month and a half I've tried to buckle down on my routine and study habits. I know it's repeated often (and with good reason) to make your own projects. Don't only follow along in a tutorial. And I've been trying to stick to that. I've also started writing some of the code with pen and paper, hoping to have it be better ingrained.

But with coding being so different from most of the things I've done before, progress felt stagnant still. A little different from imposter syndrome, but I'd get frustrated and just wonder

am I really ever going to be able to learn this coding stuff?

And then I remember, this feeling isn't so different at all.

Well, I didn't come to that realization on my own. WebDevSimplified has a video about not needing to memorize code. My mentor introduced a "simplified" function that really intimidating:

But he reminded me that the important thing isn't knowing every single component, and instead, simply being able to think through the process.

And that's an experience that is very familiar. I had it when learning Japanese (a language very different from Spanish or French). Learning the writing system is a daunting task, but I excelled at speaking because I knew how to think through a conversation.

I had it when starting my fitness journey. In the beginning, you might not know all the exercises and machines, but you probably have an idea of what you're hoping to work. And that small sense, even if completely misguided, can separate those who are feeling iffy on what they're doing vs. those who absolutely have no idea what they're doing.

You don't have to know everything. And when you hit that moment where you don't know something-- yeah it can still suck. But knowing that you don't know something in particular, that's still an advantage.

In fighting games I get overwhelmed by all the options available constantly.
// Detect dark theme var iframe = document.getElementById('tweet-1407913201312833539-669'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1407913201312833539&theme=dark" }

It's a very pulverizing genre, and it makes total sense why a lot of people would rather play something else. But it's super helpful for those who want to stick with it to know that's part of the process. You can't know all the options when you're new.

Doing well doesn't even really show you how much you've learned. It's encountering the problem (again and again sometimes), and finding out how to get out of it... that's what it's all about.

And eventually, all these options that used to feel overwhelming? They're going to feel pretty damn freeing when you can flex them. 💪

I titled this post the way I did because of the plot from Dragon Zakura. One of the core themes is drawing out the sense of conviction, and I like that word a lot since "sense of belief" and "motivation" have been overtaken by toxic positivity.

// Detect dark theme var iframe = document.getElementById('tweet-481944238616494080-502'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=481944238616494080&theme=dark" }

It's nice to be inspired. It's nice to have reminders for your self-esteem. Yet, those can be fleeting.

With conviction, it's set.

For now, after feeling pretty directionless for some time, I know I want to keep coding!

Slow Down When Proofreading

commdao — Mon, 28 Jun 2021 18:38:08 +0000

It's sort of a blessing and a curse that spelling errors can break the code for everyone at any level.

Today, I had the console show me right where things were problematic (LPT: use the console), but I was so focused on trying to make sense of the function (BUT IT IS A FUNCTION, I SWEAR) that I didn't notice the addEventrListener itself.

Easier said than done I'm sure, but I probably could've saved more time if I took things slow from the start.