Let's Get Unstuck

I'm going to outline some mistakes I made in the last few days that took me too long to work through. I'll keep it brief and break this post into 2 categories Code followed by some quick tips on Workflow.

Code Examples

Combining Bracket & Dot Notation

Given the above structure of nested objects and arrays, I didn't realize I could use brackets and dots in the same line of code. If I want to access Sine Caster's social links I can (and actually must) do something like this:

And I get the following result:

Once I "get to" the part of the data structure that is an array, I can no longer use dot notation cause I'm not traversing the tree through keys, I have to switch to bracket notation to use indexes, and then switch back to using keys again (all in the same line).

At first I tried writing this all as bracket notation, and all as dot notation. And while I think using bracket notation throughout will work (as long as you remember to format what's inside them as strings not as references to variables you're good to go.

However, using this hybrid format that I settled on is nice, cause it looks cleaner but it also tells someone looking at the code important information about the data structure. Someone can look at this one line and immediately say "oh cool, 'closeFriends' must be an array of objects".

Nice!

Special Example

What's going on here in line 4? It's the same what-I'm-calling hybrid notation but it's happening for a different reason and I'm switching to brackets even though I'm accessing the id assigned to an element in an HTML file (where normally I could use dot notation here).

But look at the following:

If I try to use dot notation here JS is getting confused by the hyphen, you can see the change in color. While I don't understand what JS "thinks" I'm trying to do here yet I can see we're going to have a problem and I can solve it by wrapping the id name "new-task-description" as a string inside brackets.

LETS GOOOOOOOOO!

Here's the line in the HTML that's causing the issue:

From Flat Iron School Coursework

Another obvious solution would be to choose a better name in the HTML (if you're able), one that doesn't use hyphens. Please also note the value could be retrieved using the name instead of the id, although in this case that name also uses hyphens.

What is THIS thing?

Why is the parenthesis outside the bracket and why do I keep seeing this? Am I messing this up?

No, this isn't wrong. However, around the time I started seeing this guy I was making a lot of other mistakes and I kept thinking it was because of this guy and it led to a lot of confusion and frustration that I'm hoping to save you from.

Here's an example of when this happens:

This is a piece of JS code that prevents the spacebar from scrolling a web page down. It works and is written correctly (as far as I know) though I'm not sure why keyCode is struck through. Let's focus on the "});" pattern.

Why is this happening?

It's happening because in the broad picture of things this piece of code is a function that accepts two arguments (has two parameters), the second of which is a function. And how does a series of parameters when outlined in a function declaration end?

That's right! with ")"

So that's why the last thing I'm seeing is the parenthesis. And this is the most common scenario in which I've encountered it so far, when setting up event listeners because they always require two parameters: an event, and a function to callback when the event is triggered. And oftentimes that second function is defined right there and then, as opposed to being referenced and outlined in a separate piece of the code. And that is where we get the "}" from. And that's why they come in that order that we're not used to seeing: "});".

Let's look at one more example...

So we know this can happen anytime a parameter is set up with a function defined right then and there, here's a way it can happen without using an event listener.

So what's happening here?

The first chunk is a function that takes a callback and runs it.

The second chunk is invoking that function and providing it with a function defined right inside the argument area.

And what do we get?

Although this example is a little contrived (and maybe formatted unconventionally when I put the ")};" on a single line unlike the previous example where that is the obvious and correct formatting), I think it's worth looking at. It gets us the same pattern and it works and it's happening for the same reason.

If you're also a beginning developer and this makes sense that's great because it took me a while to figure out.
😅

Three Workflow Tips

#1 If you can, use your native terminal in conjunction with your code editor.
as opposed to VSCode's terminal

Wack:

Look at the difference between these two work environments...

Seriously, look at how much wasted screen real estate there is here.

That's why I'm suggesting you use your native terminal in conjunction with your code editor. If you're looking at them both at the same time your real estate looks more like this:

Tight AF:

This is so much better, almost all of your screen is usable and that's when you need to look at both at the same time, if you're focusing on one you can quickly full-screen it.
(If you are on OSX I DO NOT MEAN the actual fullscreen function, I mean making the window the size of your screen.)

If you haven't given much thought to or experimented with workflow optimization I strongly encourage you to think about it. For me the effect of reducing my eye strain, mental fatigue, general well-feeling, and productivity is exponential.

#2 Find and replace in VS Code
or your editor of choice

I'll keep this one dead simple:

1) [cmd + f]
2) tick the little triangle to open the replace field
3) type the target and text to replace it with
4) [enter] to move through your document

Be thoughtful about using this tool though, if you want to replace a very short bit of text you're a lot more likely to target parts of your code you don't want to be targeting. You'll still watch the process happen one replace at a time so you can catch it, but yeah don't just be smashing enter.

Also remember that when you're working on bigger pieces of code, or searching MDN for the solution to whatever you're stuck on, [cmd + f] is invaluable even without the replace functionality.

#3 (OSX only) Using "Magnet"
a necessary workflow optimization for osx power-users

From Magnet Main Page

This little tool is worth every last penny of its $7.99 price tag. I cannot imagine using my mac without it-- and that is both praise for Magnet and disbelief at Apple not having a decent window snapping system.

The mini-app allows you to send windows to the left half, right half, full width and height of your screen, and more with hot-keys and snapping behavior. It's easy to learn and adopt into your workflow and I encourage you to explore it on your own.

The hotkeys I use are:

Send Full - [command + shift + w]
Send Left - [command + shift + q]
Send Right - [command + shift + e]

I think those are the defaults but you can edit them to your liking.

I will attempt to distill these workflow tips into the following statement:
If you can keep your computer or workspace moving at the same speed you are thinking
you are going to save thousands of moments of mental fatigue, lose of focus,
and general derailment every hour. It is so worth thinking about 💫

Thanks for reading.
Please take everything in my blog at this time with a grain of salt.
I'm new and I'm sure I'm making mistakes, if you can
point them out-- that will help me a lot!
Thank you!