Week 2: Using Objects and LocalStorage

Er, wait .. localStorage? local storage? Local Storage?

I’m not such a frazzled wreck this week, folks!

Yes, this week was a much more relaxed pace with more solo work time, fewer pages of reading each night, and a deeper dive into a few core concepts of web development. Here’s what we learned:

  • Creating objects and updating their properties
  • Setting/getting objects in/from LocalStorage
  • Parsing info from LocalStorage and using it to update info on an HTML page
  • More Flexbox! (still kinda hate it tho)
  • More arithmetic/sorting methods, such as Math.min, Math.max, array.sort, etc.
  • Forking and branching
  • Travis.yml – what it does, how it’s helpful, and why it’s a pain in the ass

Code in Action

I didn’t produce as many single projects this week as I did last week, but what I did make was much more complex and more akin to an actual site that you’d see in the real world:

“The Good Company” Job Application Site
GitHub Repo Here

You know you’ve been watching too much The Good Place when you have to create a moralityScoreNode to access your form.
  • What it is: A job application form that gets a user’s input values, generates a personalized response page based on that info, and keeps a list of all applicants via LocalStorage.
  • What it demonstrates: DOM traversal and manipulation, using conditional statements to change user flow, CRUD operation using objects and LocalStorage, dynamically-generating URLs, using URL search parameters, CSS styling for multiple HTML pages.
  • Hardest part: Setting and getting information in LocalStorage, using URL search parameters.
  • Easiest part: Updating DOM elements once the localStorage object was accessible.

Where I Struggled

  • Only made it to the gym once this week: I gave myself last week off since I knew starting school was going to be an adjustment, but I had every intention of making it to the gym before class at least three times this week. Well, that was a bust. I did bike to and from class for four days so I got some exercise, but I’m really going to try hard to start my day off with a workout most days this coming week. It always makes me more alert and energetic in the morning and helps me stay focused throughout the day.
  • JSON syntax: Despite having made some pretty great Harry Potter-themed JSON GIFs (see below), it took me a minute to fully understand what was going on when I was calling JSON. methods on objects.
  • The URL readings: This stuff was waaaay over my head. I didn’t really understand it at all until we walked through it with the TA in class, and even then I needed to put it into practice in my solo project until I fully grasped the concept. I suspect the more we get into backend concepts the more this will be the case for me.
  • Lack of project variety: Adding on to the same job application project day after day was nice in that I got to see an app get more complex and interesting over time, but I did struggle with boredom by day three of the build and started trying to think of new features or new designs to implement to keep myself engaged.
  • CSS burnout: I used to love styling pages, and I did have a good time recreating a nice landing page design, but trying to keep track of CSS files and selectors for specific HTL pages got super tedious. By the end of the week I was not at all interested in styling the new pages I was adding.
And the winner for the least original coding joke goes to….

Where I Succeeded

  • Successfully completed my first few CodeWars challenges! These were really fun and I was surprised at how rewarding it felt to take a simple single-function assignment, brainstorm ways to solve it, work it out in VSCode, then upload to CodeWars and get my solution evaluated. Will definitely be continuing with this track in addition to my class work.
  • Consolidating concepts into a single project: I was able to take the concepts we learned Monday – Wednesday and put them all together into a new job application project on Thursday. There were fewer features and less styling, but I did build it from scratch in a single afternoon with little external help or checking of resources, and for that I’m very proud.
  • Aping other designers’ work! I found a landing page design I liked and was able to recreate it for my job application site, which is pretty lame from a design-originality-point-of-view but was very satisfying from a could-I-implement-a-sexy-page-design-if/when-I-had-to-point-of-view.
  • Helping others: A few of my classmates have started coming to me with challenges they’re facing and we’re working out the solutions together. This feels awesome for a few reasons: 1.) It’s flattering that they think I might have the answer, 2.) It’s a nice way to better get to know people that aren’t in my immediate work group, and 3.) Having to vocalize new concepts to others in a way they can understand really helps me better understand those concepts.
  • Started Typing.io and Flexbox Zombies challenges: I like these programs less than CodeWars, but I see their value and will continue to use them.
  • Got caught up on reading assignments and got some real sleep!
  • Creating this incredibly stupid meme:
Don’t hate me, I was once like you.

Closing Thoughts

It still feels crazy that we’re only two weeks into this class. It feels like I’ve been doing this for a long time. I’m really starting to get to know my TAs and classmates and am still feeling very confident and excited about the skills we’ve already acquired and where we’re headed.

I’ll leave you with what could be the first ever meme and possibly my next tattoo.

Until next week, here codes nothing!

Feature Photo by Steve Johnson on Unsplash

Week 1: Sleep? What’s That?

I can’t believe I’ve been in this course for 18 million years already.

In the words of the incomparable Jon Lovett, what a week.

When our instructors told us during prep-week that it was going to be super intense and we would be diving in head-first right off the bat I thought, “Oh cute, I love hyperbole! How hard could the first week really be, right?”

They were absolutely not joking. I haven’t spent so much time learning, working, struggling, reading, writing, problem-solving, and muttering to myself in years. And comparing where I am now to where I was 10 days ago, it seems unbelievable that I’m producing the work I am now. That’s how far we’ve gone in such short a time.

Let’s go over what we learned just last week:

  • Basic HTML and CSS
  • Accessing and manipulating DOM elements via JavaScript
  • Storing info in variables and changing it later
  • Creating forms and using the form input data
  • Adding and removing tags and classes to the HTML using JS
  • Creating class listeners and performing actions on DOM nodes when those listeners trigger an event
  • Writing functions, writing functions within functions, calling those functions, and importing/exporting functions to/from other files
  • Creating and updating objects, then accessing the properties inside those cute lil objects
  • Looping!
  • Adding logic to apps with conditional statements

As you can see, we’ve covered a lot. Each day comprises about an hour of lecture in the morning, then group code cooking for an hour or two, then a group build, then a solo build, then finishing our solo builds at home if we didn’t finish in class, then about 50–100 pages of reading. Then sleep. Then repeat.

Code In Action

Yes, it’s been intense, but like I mentioned earlier, we’re already producing some pretty cool projects. Here are two of my favorites from the week:H

Hungry Caterpillar
GitHub Repo Here

chompchompchomp, dancedancedance
  • What it is: A web app featuring a caterpillar that you feed by clicking different buttons. Each time you feed her, she grows longer. Buttons below her make different segments of her body move up and down, or ‘dance’.
  • What it demonstrates: DOM traversal and manipulation, control flow, lists, element styling and positioning.
  • Hardest part: Figuring out how to change the position of the body parts when the buttons are clicked.
  • Easiest part: Finding and accessing the DOM elements.

Paint Alyssa Edwards!
GitHub Repo Here

  • What it is: A web app featuring America’s favorite drag queen, Alyssa Edwards! Users can help Alyssa get ready for her big Valentine’s Day date by choosing hair, eye shadow, and lipstick colors.
  • What it demonstrates: DOM traversal and manipulation, dynamically changing CSS styles, absolute positioning, conditional statements.
  • Hardest part: Correctly sizing and placing the image elements to not make her face looked FUBARed..
  • Easiest part: Finding amazing reference pictures of Alyssa Edwards.

Where I Struggled

There were a lot of things I struggled with this week, such as:

  • Getting less sleep each night
  • Intensely using my brain 12+ hours a day: Our instructor repeatedly refers to our brain as a muscle and us as mental athletes, and it’s very obvious that I haven’t exercised it like this in years
  • Working in groups: I struggle with patience and usually want to move ahead even if people in my group don’t fully understand the concept yet, so it’s taken some effort to slow down and be in the moment with the rest of my teammates.
  • Keeping up with the readings: Trying to absorb new coding concepts at the end of a long day of coding is haaaaard. The reading load apparently gets lighter as the course progresses, which is nice, but for now it’s a tedious way to end the day.
  • Flexbox: This is an approach to CSS I’ve never seen before and it’s been surprisingly tricky to wrap my brain around.
  • The Nightmares! I’ve had coding dreams almost every night since the course started and they are mostly weird, anxiety-ridden nightmares. Some of them are funny in retrospect (my sister yelling at me to cut the pickles both thin and lengthwise was particularly amusing), but most of them are just unpleasant and stressful.

Where I Succeeded

It hasn’t all been challenges this week. I’ve also done pretty damn well over the past few days:

  • I’ve fully completed and, most importantly, understood each project and it’s core concepts.
  • As the projects got more complex the styling became more fun. The Alyssa Edwards and hungry caterpillar projects are good examples of what spending a little extra time to style something can mean to the quality of the end result.
  • My general knowledge retention has surprised me. I honestly can’t believe we’re only one week in. I feel like i know a thousand times more than I did when i started, and I’m proud of myself for being able to keep up and not give up on challenging concepts.
  • I’ve been tweeting regularly, which seems like a silly thing to brag about but it actually helps me keep track of my insights, feelings, and others observations in the moment when I would otherwise lose them.
  • I surpassed 50 Twitter followers!
  • I went to my first Out In Tech event and have a coffee meeting scheduled with an Out In Tech PDX leader for next week.
  • Finally, I got two compliments on my blog. 🙂

Closing Thoughts

It’s been a tough week, yes, but I’m so excited to be on this path and couldn’t have asked for better instructors or classmates. Everyone is whip smart and fun to be around, which makes me even more motivated to get up and go to class every day. I already feel incredibly accomplished and it’s only been one week, which makes me really confident about where we’re headed and the skills I’ll gain over the next five months.

I’ll leave you with another picture of my dog Joe, who recently got a new stuffed bear and refuses to part with it, even when going outside in the snow to pee.

Until next week, here codes nothing!

Feature Photo by Cris Saur on Unsplash

Pre-Week: Boot-Camp Prep

A crash course in programming fundamentals.

This past week was all about getting familiar with dev fundamentals: keyboard shortcuts, the terminal, git/github, VSCode, HTML, CSS, and JavaScript. It was fast-paced and not very thorough, but as our instructor Marty explained, the week was about getting us comfortable with using common developer tools and introducing us to concepts we’ll be diving into later in the course.  

Code in Action

Not a ton of amazing code came out of this week, tbh. My repos can be found here (bootcamp-prep-day-1 – 4). We mostly just messed around with page structure, styling, and some basic JavaScript functions. Below is a screenshot of my beautifully-designed page from Day 2 (HTML + CSS).

Look on my Works, ye Mighty, and despair!

I am particularly proud of my Lennon Parham reference on that page, and plan on creating a Womp It Up! lorem ipsum generator sometime soon. #turnaround

We did make a fun MadLibs-style web app on Day 4, our final day of coding for the week. That was an interesting day. We began getting into JavaScript on Wednesday, and I had a harder time with those intro projects than the more advanced MadLibs project we were asked to make at the end of class on Thursday. I guess it makes sense — on Wednesday I was re-acquainting myself with JavaScript concepts I had previously learned and trying out new ones, but by Thursday I was more comfortable and able to knock out a pretty fun MadLibs story.

Where I Struggled

Honestly, the hardest part of this week was my schedule. I got up at 6 AM to go to the gym, then go work a full day, grab some quick dinner, and be in class from 6 PM  – 9 PM. Maybe I’m just getting older, but by Wednesday that schedule had really caught up to me and I was ready to get into the full time 9 AM – 6 PM course.

I also struggled a bit with meeting new people. I’m pretty outgoing by nature, but often need an intermediary to make connections for me before I’m comfortable diving into a conversation with a stranger. Luckily my friend Megan is also taking the course, but I did have to step outside my comfort zone a few times to engage in conversation with the other students I didn’t know.

Thank god for you, @megswuzhere

Where I Succeeded

I was familiar with HTML/CSS/JavaScript before this and did all the assigned pre-work before the week started, so I’m confident in my understanding of the basics and the work I produced. I definitely feel ready for boot-camp classes to begin.

I think my biggest success for the week was the MadLibs project. I completed the project and pushed to GitHub before the end of class, we reviewed my app as a group, and I just so happened to get a round of applause from the class. I gotta say, that felt really great. I’ve worked very hard to get to where I am now, and I plan on working even harder throughout this course. Keep the applause comin’, folks 🙂

This week also encouraged me to dig through some of my old repos on Github, which was good for a chuckle. One project I’d forgotten about was Make It Rain for Kitty, a super-simple JavaScript web app using p5.js I built a few years ago. A user can click their mouse anywhere on the page and raindrops will fall, captivating the cat sitting and staring out the window. It’s pretty cute if you ask me, and something I plan on revisiting when I’m a little more skilled in JavaScript and Processing.

I could watch this cat watch that rain all day.

Closing Thoughts

All in all I thought this week went well! I’m excited to get started full-time at the end of the month, even if it means lugging my heavy books back and forth to class on my bike in the rain. That’s the life, I guess!

Thanks for stopping by, and until next week, here codes nothing!

🙂
 Feature photo by moren hsu on Unsplash

WTActualF Am I Doing?

“I’m so excited! I’m so excited! I’m so…scared!”

Welcome to Here Codes Nothing! My name is Ben Parisot and I am a former producer who recently quit his job at an experiential marketing agency to attend coding school and start a new career as a software engineer. I have a bit of a background in programming — I’ve dabbled in HTML and CSS and took an Intro to Programming night class two years ago — but in no way would I consider myself a developer. For the next six months I’ll be attending Alchemy Code Lab in downtown Portland, OR, and writing weekly blog posts chronicling my experiences there. I will share completed projects, works-in-progress, photos, and some honest takes on my successes and failures.

Ben Parisot | Here Codes Nothing | Pingpong Website Example
A silly counting website I made in my Intro to Programming class two years ago. When a visitor “sacrificed” a number to the ravenous internet god Pingpong, Pingpong would count up to that number and eat (or strikethrough) all numbers divisible by 3, 5, and 15.

I’ll admit it — this story isn’t a new one. Plenty of people have given up good management jobs to go to coding school and become developers. It’s not the uniqueness of my story that makes it notable. Instead, it’s the familiarity of it all that I think makes it so compelling. Despite people making these life-changing decisions fairly often, it’s rare to see someone’s journey documented end-to-end. I struggled with this decision for months, wondering if I was making a mistake or if I was being overly ambitious or optimistic. If I had someone else’s story to learn from, my decision-making process might have been easier. I doubt the outcome would have been different (I was pretty set on becoming a full-time developer), but there might have been fewer sleepless nights, and I’d almost certainly be heading into class this week with a better idea of what I was getting into.

After reviewing an early draft of this post, my husband noted that it “didn’t have enough dogs”, so here’s a random picture of our two goodbois, Hank and Joe.

So, why am I starting this blog series? There are three main reasons:

  1. To create content featuring my work to put on social media and attract potential employers.
    Let’s be real — I’m hoping to get a job as soon after I graduate as I can. Coming from a marketing background, I understand the importance of investing in a brand early and getting that brand in front of the right people as soon as possible. I hope this blog series will allow me to share my progress and completed projects with potential employers and other developers to garner early attention and get helpful feedback on my work.
  2. To document my learnings as a reference for myself in case I face a particular dev challenge in the future.
    If there’s one thing I’ve learned from my previous attempts at coding, it’s that understanding a concept and executing on it once does not guarantee that concept will stick around in your brain for long. And while there are plenty of invaluable online resources for struggling developers, I’m hoping this blog will act as a repository of the most common challenges I’ve faced and the solutions that I know have already worked well for me. Treating this blog as a dev diary will allow me to more easily find and reuse working code without having to slog through a bunch of different repos on Github.
  3. To inspire others to push themselves out of their comfort zones and try something new and worthwhile.
    As I suggested earlier, I hope this blog encourages others to pursue a new path for themselves, despite how daunting or unfamiliar it may be. It’s a scary move for sure, but I hope that others considering a similar decision can follow along with my journey and get a better insight into what it takes and whether this is the right decision for them.

This is what the course breakdown looks like:

  • Week 1: Pre-work and getting ready for classes to begin
  • Week 2: Evening bootcamp prep classes
  • Weeks 3 – 6: Bootcamp 1 (dev fundamentals)
  • Weeks 7 – 10: Bootcamp 2 (intermediate dev)
  • Weeks 11 – 23: Career track (full-stack javascript)

Now, I’m not entirely new to programming. I’m familiar enough with HTML and CSS to reskin WordPress templates to a degree and have tinkered with enough JavaScript to understand the basics of object-oriented programming. I’m good with most any CMS and spent the past year learning generative design in TouchDesigner and basic projection mapping. So I should be fine, right? RIGHT?!?

Here’s an example of some of my work in TouchDesigner. This video was made as part of a projection installation at a dance party for Portland Pride 2018.

To be honest, I don’t really know what this project will evolve into. My aim is to publish one post a week and use that post to discuss what I learned the previous week. This could include everything from code snippets to full working applications, links to code repositories or articles I found interesting, or photos and videos from my time in class. I hope to make each post informative, inspiring, and entertaining. Fingers crossed!

Since this is the first post in this series I obviously don’t have a lot to show you. You can check out my old Intro coding projects here and my Touchdesigner work here. You can also see more photos of my dogs and some bad memes on my Instagram here.

Thanks for stopping by and checking out my inaugural post! I hope to see you back next week. Until then, here codes nothing!

Feature Photo by Bernard Hermant on Unsplash