DEV Community: Taylor Overturf

Thoughts on Abramov & Appleton’s “Just JavaScript” by a Former Language Teacher, Current Coder, & Serial Tutorial Buyer

Taylor Overturf — Mon, 23 May 2022 00:05:59 +0000

I recently purchased Just JavaScript by Dan Abramov and Maggie Appleton. I have panic-purchased various books about JavaScript before, but only managed to read a few chapters here and there. As a visual learner, I thought Just JavaScript would be a welcome break because I find it easier to remember a concept if I have an image, instead of a wall of text, to remember and return to.

Aside from Appleton’s incredible illustrations, the beauty of Just JavaScript is its hyper focus on what Abramov and Appleton refer to as your “mental model”—a metacognitive understanding of how you imagine the world of JavaScript. Metacognition, or thinking about one’s thinking, is a fundamental skill that all good learners employ sometimes explicitly and, more often, implicitly.

So, how does your brain think about learning a new language? In the background, you’re making continuous comparisons between your native language and the target language. You're constantly assessing if your own understanding of the target language is being supported or disproved by any current input. For us, the target language is: JavaScript. No worries that JavaScript is a computer language, your brain goes about learning in the same way, seeking patterns and building your fluency.

One of the challenges with the way many of us, especially my fellow coding bootcamp graduates, learned our first coding language is that there were many blanks our brain had to subconsciously fill in, in order to gain some beginner JavaScript fluency and actually start coding. Some of the linguistic rules we originally established in our mental model are completely incorrect. There is nothing inherently wrong with this, we have to make an educated guess at linguistic rules to move forward, but the way we correct these misconceptions matters!

You have to fill in the blanks until your brain gets more information, and this is where a lot of us can get stuck. As a former language teacher, the errors that were most important for me to correct were ones that a student made repeatedly because this was evidence to me that it was a part of the student’s mental model of the language that needed to be brought to their attention and intentionally changed. You need to start bringing some of these subconscious thoughts to a more conscious space and start thinking about your thinking.

The problem with beginner JavaScript students is that there is often no teacher present to see the errors you have inadvertently made as a part of your mental model of the language. But, metacognitive strategies such as deliberately investigating one’s understanding of a language can lead to self-correction and Just JavaScript does an expert job of not only raising awareness of one’s own mental model of JavaScript but, through repetition, taking the necessary to steps to correct it in many cases.

Credit: Maggie Appleton, "Just JavaScript," Example of mental model diagramming.

Abramov and Appleton’s short, 10-part, course asks you to repeatedly (and repeatedly, and repeatedly) physically diagram out the relationships between variables and data types. As depicted in the image above, Abramov and Appleton offer a mental model that visualizes the connection between a variable name and a value as a wire connecting the two.

Overall, my praise for Just JavaScript is overwhelmingly positive. It draws upon both solid linguistic and computer science fundamentals to create a helpful course for many JavaScript coders wishing to deepen their fluency and understanding of the language. Also, quite honestly, it’s fun! You get to draw!

Some specific topics that I personally found the most helpful were:

the explanation of the difference between null versus undefined values,
the complex role of objects within JavaScript,
the implications behind the immutability of primitive values

The only two critiques I have of the course are, not surprisingly, the price: $42 is not cheap, especially due to the brevity of this course. Secondly, out of the 10 chapters in total, Chapter 4: “Studying from the Inside” dives deeper into the “universe” metaphor but at this point it seems unnecessary as the reader is already metaphorically and financially sold on the mental model that Abramov and Appleton offer.

For any beginner, especially my self-taught or bootcamp friends, I highly recommend Just JavaScript as it will help you begin the metacognitive process necessary to editing, and ultimately strengthening, your understanding of JavaScript. If you also purchased Just JavaScript, please let me know what you thought in the comments!

6 Things I Wish I Knew before Starting My Coding Bootcamp

Taylor Overturf — Thu, 06 Jan 2022 04:32:30 +0000

I recently graduated from a full-stack software engineering bootcamp. Woohoo! 🎉 However, as someone who had never written a line of code in her life, I definitely felt lost and confused at times. 🥺 And, not just content-wise, emotionally—it can be a roller coaster. Coding bootcamps are for people who are making big changes in their lives, and change can definitely be overwhelming.

Here are 6 things I wish I knew before I began. So, if you're about to start a bootcamp experience, read on, my friend! 💪

#1. 🙅‍♀️ Don't compare, just share!

Do not—I repeat—DO NOT compare yourself to others. If your bootcamp experience is anything like mine, it is going to be a mix of very diverse people. That's awesome! 🙌 But, that also means that there will be individuals who know much, much more than you going into this experience. Just accept that as a fact of the world. 🌍 There are going to be people who catch on to concepts seemingly faster than you. It's okay. You will get there. In fact, seek these people out and learn from them. Ask them questions, see if they can re-explain a concept or two to you, get advice. They are a part of your learning community now! How lucky are you! And, guess what? You also bring a unique skillset, background, or strength to the table, so they're lucky to have you, too!

#2. 👯 Find your people.

In addition to surrounding yourself with people who know more than you, find people who you feel like you can be honest with, who make you laugh, who have similar learning styles as you do—find some buddies! 🤗 The pessimist in me definitely did not think it was possible, but, I really did make some life-long friends during my remote bootcamp experience. Even through the digital screen! 💻 I cannot stress how important it is to have people who can make you feel less alone. You will need them to get you through this experience, and they will need you.

#3. 📝 Get organized, stay organized.

You are about to be exposed to a firehose of information. You need a system for 1. saving resources (links, tutorials, videos, cheatsheets, "stuff for later," etc.) and 2. taking notes (important: notes that can include code blocks). 🧐 You need to implement this system as soon as possible, start building your organizational system from day one! I wish I had figured out a system that worked for me much sooner. In the end, because so much of my communication with other students and instructors was over Slack, I actually just started using the self-chat (where you literally message yourself 😂) as my primary note-taking system. In retrospect, I wish I had created a system of organized ReadMe files, but... I didn't know what a ReadMe file was when I began, so... 🤷‍♀️?

#4. 🙋‍♀️ Ask questions.

❌ Delete this phrase from your your vocabulary: "This might be a stupid question but... " Nope. You're not allowed to say that. I am that person who always asked at least 5 to 10 questions a day (and that's probably a very conservative estimate). 😬 Guess what? I don't regret asking any of my questions. In fact, oftentimes someone else would say: "Thanks so much for asking that question, I was wondering the same exact thing." If your cohort and instructors build a supportive learning community, no one should feel embarrassed to ask any question.

#5. ⛔️ Copy and paste with caution.

There are going to be times when you have some code—from a lecture, or a code-along, or a group activity, or your new best friend named StackOverflow, and you do not totally, 100% understand how it works. 🥴 That's okay. But, do yourself a favor. Write a comment before that code which says:

// I do not totally understand how this code works. 
// What I do understand is _______. 
// What I need to figure out is _______.

Be careful with copy and paste. Type everything out that you possibly can. Build that muscle memory, it will help you actually remember the syntax of the languages you are learning and the common ways problems are solved. 🧠 Your friend might have code that works, but if you don't understand it, don't copy and paste it. There are a million ways to solve a coding problem, find your way! You will actually remember it, learn from it, or at least understand it, if you wrote it. I promise.

#6. ❤️ Treat yourself like you would treat a good friend.

I cannot emphasize this enough. Self-talk matters. 💬 You do not have to understand everything the first time you see it. Or, the second. Or, the third. It's okay to struggle. How would you speak to a friend who was struggling? You would pump them up; you would remind them that they are strong! 👏 How would you speak to a friend who just got their code to work after spending 4 hours on a missing semi-colon? You would celebrate their victories; however small! 👏 This experience will be challenging to different people, for different reasons. Show yourself kindness. We can be our own worst enemies sometimes, try being your own best friend.

Finally, I would like to say: I am proud of you! 🙌 You're taking the first step into the unknown, maybe you're making a big change, or maybe you're finally doing something you've been thinking about for a while now. Those are some brave acts. The good news is: you're about to be surrounded by individuals who are also willing to take a courageous first step. You are going to laugh, you might cry and you'll learn a lot. You got this.

So, you bought a domain name? 16 Steps to Deploy your React App to GitHub Pages with a Go Daddy Domain Name

Taylor Overturf — Wed, 29 Dec 2021 02:33:50 +0000

✨ This post is intended to help fellow coding newbies walk through deploying a React app to GitHub Pages with a custom domain name purchased through GoDaddy. 🧐 Pretty specific, I know, but I had trouble my first time and I hope to help others succeed at this task in 16 clear steps. Let's go!

Step 1. Sign into your GoDaddy account and click on My Products.

First of all, make sure you have successfully purchased a domain through GoDaddy. 💸 Then, sign into your account if you're not already. In the upper right hand corner of the screen, you will see "My Products" in the dropdown menu. ⬇️

Step 2. Find your domain in the Domains section.

Do not get distracted by the shiny, green basketballs 🟢 🏀 in the "Start using your new products" section. Instead, find your domain in the "Domains" section. Click on the dropdown menu. ⬇️

Step 3. Choose Manage DNS.

From the dropdown menu, choose "Manage DNS." ⬇️

Step 4. Ignore the NS and SOA records settings.

You cannot edit these, so ignore them. ⬇️

Step 5. Edit the A name record you see.

You will now edit the first A record to have the name, value, and TTL as you see below. The value: 185.199.108.153 is specific to GitHub Pages. (You can learn more about this by visiting GitHub Documentation). At first, your A record will display as value: "parked" and name: "@", but you will edit ✏️ those two categories. ⬇️

Step 6. Add three more A records.

You will now add three more A records, one by one, by pressing the blue ADD button in the bottom right corner. ⬇️

You will see the following editor panel: ⬇️

The next three A records will be the same as you see below. They will have the values of 185.199.109.153, 185.199.110.153, and 185.199.111.153. (Remember, your first A record had the value of 185.199.108.153). ⬇️

Don't worry if your A records are not in the same order as mine, the next time you sign into your DNS Settings it will be alphabetized, and the order is not important to the process!

Step 7. Edit the CNAME record with the name, "www".

You will now edit the first CNAME record that is named "www," change the value to your-git-hub-username.github.io ⬇️

🎉 Congratulations, at this point, your GoDaddy DNS settings are correctly configured!

Step 8. Update your GitHub repository.

Make sure your GitHub repository is up to date with your latest commit.

🌲 nothing to commit, working tree clean

The next seven steps are available in the official React Documentation, but I have also outlined them here so you do not need to open another link if you don't want to. Carry on! 🙌 You're almost there!

Step 9. Add a homepage to your `package.json`.

Open your project files in your favorite code editor. Find your package.json and add "homepage:" "http://www.YOUR-DOMAIN-NAME-GOES-HERE.com/",. The beginning of your package.json should look something like this:

{
  "name": "YOUR-PROJECT-NAME-APPEARS HERE",
  "version": "0.1.0",
  "private": true,
  "homepage": "“http://www.YOUR-DOMAIN-NAME-APPEARS-HERE.com/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^3.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },

Step 10. Go to your terminal and install gh-pages.

🏃🏽‍♀️ Run:
npm install --save gh-pages

Step 11. Make two more additions to the `package.json`.

In your scripts, you will want to add: "predeploy": "npm run build", and "deploy": "gh-pages -d build",. The scripts in your package.json should look something like this:

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Step 12. Go to your terminal and deploy!

🏃🏽‍♀️ Run:
npm run deploy

Step 13. Go to your GitHub repository settings.

In your GitHub repository, you will see Settings at the far right. ➡️

Then, navigate down to the Pages section. ⬇️

You will need to make some final changes on this page.

Step 14. Add your custom domain name to your repository settings.

First, confirm that the Source is set to the gh-pages branch at the /(root). Then, you can add your custom domain in the form of www.YOUR-DOMAIN-NAME.com. ⬇️

After you click save, you will see a message that says: TLS certificate is being provisioned. This may take up to 15 minutes to complete. ⏰

And, they’re not joking around about that 15 minute time frame. You should go make a coffee. ☕️ Do NOT be tempted to press the blue link ("Your site is ready to be published at...") before it becomes green, because you will be very disappointed. 😔

What you can do is to refresh this settings page if you’re feeling impatient.

Step 15. Moment of Truth

Once you see green, it's time to check your link! I recommend going to your site in incognito mode 🕵🏽‍♀️ because it will make seeing updates (when you npm run deploy again) easier later.

You should see: ⬇️

Step 16. Add a `CNAME` file to your project.

Finally, go to your code editor and add a new file in the public folder. The name of the file will be: CNAME (all caps, dot nothing) and it will contain one line of code, simply stating www.YOUR-DOMAIN-NAME.com. No quotes, nothing. That's it. 🤷‍♀️

You can now git add, git commit, and git push this change to your remote repository. You can also npm run deploy if you made any other changes to your files. It may take some time for your deployed site to update. If you're not seeing a specific change, again, try opening the webpage in incognito mode.

And, if you're reading this, 👀 hopefully you have a successfully deployed site. Hurray! 🏆

🔥 Troubleshooting Notes

☝️ Please note that domain names that do not end in .com, may have some additional steps or DNS settings.

✌️ If you see an error in any of my directions, or if you believe one of my steps could be clearer, please let me know! I'm on a learning journey and I welcome all constructive feedback. ❤️

🤞 Lastly, if you had previously deployed your site to GitHub pages and you are retroactively trying to change it over to a domain name, you may run into some fun bugs... 🙄 Don't worry! I've run into them all. Most notably, a blank white page and the terminal error of 💀 fatal: A branch named 'gh-pages' already exists.. One solution I have found (see this StackOverflow), if you're running into that specific error, is to run rm -rf node_modules/gh-pages/.cache and then go into your code editor, find the node_modules folder, look for the gh-pages folder, and if it's there, physically delete it and npm run deploy.

Like, share, follow, and spread the deployment love! 👏

10 Terminal Commandments for Coding Newbies

Taylor Overturf — Sun, 05 Dec 2021 20:30:59 +0000

The terminal can be an intimidating place for anyone, like me, who has spent most of their life living in a ✨Graphical User Interface✨ paradise.

In the GUI, it seems like nothing can really go that wrong. However, on the command line, it feels like a single cat-on-keyboard moment can bring everything crashing down. 🐱🔥

It is my belief that the terminal itself is not what frightens us, but the unfamiliarity of it all. Once you build up your confidence, the terminal can, and will, be your new best friend. 👯 I promise!

The first time I entered the terminal, I had no idea where I was. You don't believe me? Look at the first 15 commands I ever ran:
Unfortunately, hello and where am i, yielded no results. You know what did? Making a ton of mistakes, which I like to call, "practice." (I really got my ls practice in here, see lines 6 to 9).

So, here are my Top 10 Terminal Commandments. These helped me become more comfortable working on the command line, and I hope they help you, too! 💛

1. `history`

If you're anything like me, you routinely forget the command you ran 5 seconds ago. Run history to get a friendly reminder. You will see all the commands you have previously run. And, if you don't mind scrolling for several minutes, try to find your first 15 commands by going all the way up. Perhaps you, too, wondered: where am i? 🌍

2. `exit`

This is a best practice that I turned into a habit very early on in my coding journey and I'm grateful I did. By using exit at the end of every session, you are setting yourself up for success later on when it will be important to exit out of multiple servers and live ports. Use exit whenever you're done in the terminal, instead of just quitting or x-ing out. Your future coder-self will thank you! 🙏

3. `mv old-file-name-you-dont-want new-file-name-you-do-want`

I can't tell you how many times I've misspelled something and thought, "Oh well, I guess it will just be called main-directury for the rest of my life." 🤷‍♀️ For some reason, as a coding newbie, I find it scarier to delete and edit than it is to create. However, don't be fearful of the mv command. You can easily rename your files for times when you have a typo or simply realized there's a better name out there for your project or file.

4. `touch new-file-name`

🏆 This one gets the award for Cutest Command, touch whenever you want to create a new file. Not to be confused with the less cute, mkdir which will just create a folder (directory).

5. `pwd`

Print Working Directory or pwd is the command I was looking for when I ran where am i. It will tell you exactly where you are within your file structure! This is helpful for when you want to confirm your location before running another command.

6. `ls`

List all the contents of a folder. This is extremely helpful as there is no graphical interface showing you all your files, you either need to remember (not going to happen!) or see what your options are. 🧐

7. `cd`

Move into a folder. ⬇️ Think of it as moving level down within your file structure.

8. `..`

Move out of a folder. ⬆️ Think of it as moving one level up within your file structure.

9. `CMD + t`

Did you know, just like your browser, you can also open a new tab in your terminal? Maybe you cd-ed into the depths of one folder and now you want to move back out .. without losing your spot. The CMD + t action will open a new tab where you currently are (which is different than opening up the terminal application on your computer). Use it when you want to be in two places at the same time! 🪄

10. `CTRL + c`

Did you just start running something that you instantly regret? 😱 Try the action CTRL + c to clear. This will become handy later with Git and installations and servers and other levels of chaos, but it is helpful to hardwire into your brain now so that you always have an escape plan!

Yes, the terminal can be a scary place for us beginners. But, every time you run ls a coding fairy gets its wings. So ls all day long, my friends! I guarantee you will start to feel more comfortable as you practice these 10 Terminal Commandments. Finally, love thy coding newbie as thyself–comment, re-post, print, bookmark, subscribe or share this post!