Category Archives: 2019 Spring class

JavaScript is like muscles of the body

Is it normal to be more frustrated with JavaScript than HTML and CSS? In last week’s post, I wrote about how it is not a good idea to cram Codecademy lessons into one day; so for this week, I made it a mission to split up the lessons into multiple days. By doing this, I was able to go through each JavaScript lesson slowly and figure out the topics within JavaScript that I need to review again.

At first I thought HTML and CSS were overwhelming, but JavaScript completely blows both of these languages out of the water. This past weekend, I was at an event where I somehow ended up talking about web development with a girl that chose this field as a career. The first question I could not help, but asking her was, “Is it normal to be extremely frustrated with JavaScript?” She reassured me that everything would be okay and that eventually I will gain a full understanding of this language with more practice. I remember that in one of our past classes Greg explained HTML as the structure, CSS for styling this structure, and JavaScript as the behind the scenes actions. The girl I vented about my JavaScript confusions described HTML as the skeleton, CSS as the skin, and JavaScript as the muscles.

The way I like to think about it is JavaScript is the muscles and it communicates with the body in complexing ways. I think I got scared about JavaScript when the ‘Introduction to JavaScript’ Codecademy lessons began talking about math operators. I know that the lesson claims that math does not need to be a strong-suit to learn this language, but I think I’m still confused about the connection between math operators and the affect it has on a web page. Stay tuned for a question asked about this in class!

In addition, I really enjoyed the if/then statements of JavaScript. Although I wasn’t able to write them fluently, I can at least say that I was able to understand the syntax errors I was making in the exercises. I thought it was cool to see the if/then statements make cool additions to a web page that are “behind-the-scenes.” I am hoping to eventually become stronger in this language and I’m sure it will happen over time.

JavaScript

This week was quite interesting. For starters, the only thing I understood about JavaScript coming into this course was that it was difficult to understand (compared to HTML/CSS). But I didn’t exactly know what I didn’t know.

This week’s lessons were useful for showing us what JavaScript is used for, from adding and subtracting to serving as a foundational tool for bigger-picture project display. I’m definitely going to have to go through the lessons again (and again) to remember how the consoles work with each other (and sometimes exist inside each other, which was confusing at first). But overall, it was pretty clear.

Seeing how if/then questions are answered through programming was also interesting. I always knew that behind responsive design, some programming logic has to be in place for the page’s display to adjust to whatever the user is doing. Starting from smaller if/then statements and then building and adding conditions for more complicated, data-laden graphics is neat, and it gives me a whole new appreciation for the work my office’s developers do on a daily basis.

One question I have, though, is about the commenting language within the script. Since it’s expected for us to link HTML/CSS/JavaScript pages together, why are smaller functions (such as the invisible commenting function) not consistent across the board? Wouldn’t it be reasonable for some of the rudimentary labeling factors to be consistent?

Other than that, I am appreciative of the in-depth comments on my previous assignment. Things are looking much clearer now with regards to page organization. In fact, I was originally not as concerned about having clean (perfectly and consistently indented) text on my code page as long as it works. Now, I see that unorganized work (even if it displays exactly what you’re looking for on the front end) is a bad habit that will result in unnecessary frustration as the page gets more and more jumbled.

Achilles’ heel

With today’s sun warming our bodies and souls, it is easy to forget how dreadful the past week has been. With the weather that caused our in-person class to be cancelled, we had to settle for a Zoom meeting. What’s unfortunate is that we missed one of the most important classes (at least for me) and had to learn JavaScript by ourselves.

But before I jump into the “journal” part of my post, let me give you some context. JavaScript is a dynamically typed language. It is frequently used in creating websites, as it, for example, provides interactivity of pages, validating forms or building navigation elements. This use of JavaScript makes it easier to use a library such as jQuery. However, JavaScript does not create standalone apps. In the most common case, JavaScript code is located in HTML documents and allows us to enrich websites with interactive elements that would be impossible to obtain using plain HTML code. Even though it may seem that learning JavaScript is quite easy, mastering this language is quite demanding and time consuming.

I believe that online learning is great in a way that students can take a course or participate in a class from the comfort of their home. Online classes often offer alternatives to live meetings like forums, emails, and chatrooms. I am taking an online course right now, PR Writing. Thus, with some experience in writing press releases, op-eds and so on, it is easy for me to catch up with any additional readings or assignments. However, with more engaging and complex classes, allocating additional time for more practical exercises is something that I believe would be beneficial to some students. Unfortunately for me, this week has been very confusing and even though I was able to complete the online course on Codecademy, my knowledge of JavaScript leaves much to be desired.

Similar but different!

This week’s introduction to JavaScript lessons highlighted basic concepts on variables, data types in JavaScript (strings, boolean, numbers, null, undefined, symbols, and objects.). How to create a variable and functions, also the ES6 upgrade to the “let and const” to  fix the global scope flaws in the variables, arithmetic operations (+ ,- ,* ,%, / , ++ ,–) and how they can be used in JavaScript. I did learn a new word “concatenation” that uses the + operator to join two or more strings together. The quotations and spaces were a little tricky at first, but then they introduced  (“), which I personally prefer because it makes the codes simpler.

The biggest challenge was remembering when to punctuate codes. Also, the “if, if else, and the else” conditions were a bit confusing at first. As a whole I think  learning programming can be likened to learning a new language. The more you speak the better you become and the reverse is also true.

I am looking forward to learn and explore more of JavaScript.

Dear Duolingo: Consider adding JavaScript

This week I realized that I have begun learning a new language. Reflecting on my past language-learning experiences, as well as my former brushes with code and query languages, will help me set realistic goals and expectations for this new challenge.

One thing stands out to me as being immediately familiar to my past experiences: I know what the code supposed to look like, but I still have trouble constructing the right syntax on my own. The end-of-unit quizzes highlighted this tendency. I usually got the syntax questions right on the first try (just because they looked right), but I struggled with the questions designed to explain why something is done. That is to say, I’m better at reading the code than I am at writing it.

This week’s lesson with the JavaScript console also reminded me of Data Reporting, where we learned the basics of MySQL query language. I remember when I started learning about MySQL that the process of writing pseudo code was critical in the writing/development of more complex queries. It’s also a great mental/emotional strategy when you get frustrated with writing code, because it’s pretty hard to get it wrong, and it helps you organize your thoughts. I’ll definitely be taking the extra time to write pseudo code and add comments to my code as it grows, just to save myself some aggravation.

Goals for the Future

If “getting better at JavaScript” is too broad a goal, I’d like to prioritize getting better at reading the error messages. When I was learning how to use MySQL, the error messages were immensely helpful at identifying syntax and other input issues. In the Java console, however, I’m still at a loss. Luckily, I’ll have plenty of opportunities to practice reading the error messages, because I anticipate I’ll be generating a lot of them in the weeks ahead.

Is there a Duolingo option for JavaScript?

A Question I’m Afraid to Ask…

It’s clear that so far we’ve been creating variables and functions, and then defining them within the code (i.e. the user’s name is “Cole” so let userName = ‘Cole’. But when we interact with web pages in the wild, that name field picks up data from our user profile. What does the code look like that pulls data from another source and into the field we’re using?

Week 3 with JavaScript

When dealing with the JavaScript lessons this week in Codecademy, I found it to be easier than last week’s lessons dealing with CSS. The items that I thought were easiest to grasp were adding comments – which isn’t surprising since it’s literally the addition of nothing into the code, or no commands at least. I thought that initially, the random number command in JavaScript was the coolest since it literally generated a random number each time you chose to “run” the code. It kind of changed my mindset with HTML, JavaScript and such. With how we were learning HTML and CSS, it presented itself to me as definitive, rigid commands that were consistent. To be honest, that lack of fluidity is something that I am not particularly used to, so it struck me as too calculated and formulated. However, the random number command via JavaScript was interestingly cool! So, I am excited to see more code that is dynamic.

While learning about the addition of variables in JavaScript, the instructions to the commands seemed very easy, however I kept finding myself forgetting to add another line including the console.log text; I didn’t realize that I had to add semicolons after each line as well since we didn’t have to do that in HTML. When we came to the portion about learning of interpolation, I followed the lesson along with relative ease, but I still don’t really understand the need for interpolation with the ‘+’ sign when you could just use another line of code. Once again, I really liked in Codecademy how they implement the lessons you just learned. It further helps me understand the material and gives me another opportunity to take a second or third look at the sections and items that were not necessarily clear when I first encountered them.

Attempting CSS

For this week’s lessons on Codecademy, I felt more lost and behind than the previous week. It was definitely noticeable the difference in pace, since the lesson had just picked up from where it had left off the week prior. Particularly, I was having issues with CSS, I think primarily because that concept of language is literally something I have never seen before. I know I will have to backtrack and redo the lessons in order to understand how to execute it. Additionally, when I was on GitHub, I felt like I was back in time trying to customize my MySpace account, which was nostalgically hilarious since my HTML skills have only gotten worse since then. I was using GitHub the website version, and the main issue I had was to figure out how to implement CSS on my repository. To be honest, I did not figure it out and looking back my only guess would be that this is something I need to do on the GitHub desktop version.

For the reading, the Inspect and Edit Styles article started off with a screenshot of an inspected element. Even after reading the article from top to bottom twice, I am still slightly confused with elements it discussed, such as examine and edit box model parameters. Personally, all this type of information and learning is completely different than I am used to. I was hoping to challenge myself by taking this class and I think that already by the second week I can feel it. The verbiage that discusses HTML and CSS is very particular and is throwing me off more than anything. I just think that it is dense, and have to constantly look up words and their reference on Google is slowing me down more than I originally anticipated.

Talk is cheap. Show me the code.

Although this week has been filled with a lot of hard work, I believe that, through the projects, I was able to learn a lot of valuable information. There is a saying that the only way to become a good programmer is a great amount of practice. Thus, I like the fact that this field of study does not demand too much theory, but it requires practice to consolidate acquired knowledge.

The main assignments for this week were Codecademy’s lessons and prototype homepage on GitHub (using Sublime Text). The first one allowed me to gain the basic understanding of the direction I should take my GitHub project. The second platform has taught me how to play with the code. The homepage project itself was interesting, but I felt a bit unsatisfied, because the weekly lessons did not teach me much about the visual side of an HTML document, i.e. the CSS. As I was able to learn, even experienced programmers do not have everything memorized, which is entirely not the point. The art of programming consists also of the ability to utilize research and search for knowledge on the web. Moreover, learning from one’s mistakes is the most effective way to gain knowledge. Thus, by seeing my work “change” on the Google Chrome browser, I was able to tell if there is something wrong in my code or if I need to make other corrections in order to improve readability.

To conclude, I feel like I made a lot of progress in my programming studies. However, I will be going back to some lessons on Codecademy or Khan Academy, so that I won’t lose the progress I’ve already made. I believe that learning everything at once is not a solution. There is also a need for systematic work on developing programming skills, not coding from project to project, once a month or several months.

Coming together

This week for me represented a big step forward. I was quite nervous to build a prototype homepage from scratch — I was pretty sure I was unprepared to hand-code a full webpage. The assignments for this week ended up taking me more time than I anticipated and that — combined with starting a new job and some light procrastination — pushed me past the deadline.

But however long the work took me to do, in all the work ended up not being as difficult as I feared. My fingers started to type the correct tags with ease and my page slowly but surely came together. The lessons taught some important new information, especially styling conventions, that for the first time for me felt as if they were logical extensions of what we’ve already been learning.

It did take me a little while to figure out an ideal workflow when actually using Sublime Text in conjunction with GitHub. I found myself working past where I should have entered a commit, and therefore felt I had to cut out some code, make a commit, and re-enter it in Sublime Text and make another commit. I also wanted to check my page before a commit, so I ended up writing some code, popping it into a browser, refining it, and then committing. Just logistically, it’s a lot of jumping around on a laptop screen, so once or twice I got a bit lost between different windows on my laptop.

I also started to get a sense for how I should use CSS — I can see how a separate style.css page would be almost required for a larger page. But for our purposes for this assignment, using inline CSS between <style> tags felt more natural and easier to manipulate.

 

Practice, practice, practice!

As I glanced at the syllabus for this week’s assignments, I could not help but my find myself stressing out about creating a prototype homepage. Might I add, this feeling lasted for majority of the week and resulting in me avoiding Web Development homework at all costs. On Sunday morning, I decided it was time to stop being dramatic and begin digging into Codecademy lessons: “A Closer Look At CSS,” “CSS Visual Rules,” and “CSS Setup and Selectors” before taking a stab at the prototype homepage. Procrastination at its finest? Yes, but I have quickly found that procrastination might not be suited for the newbies of the coding world.

In last week’s post, I compared coding to my experience of learning a new language. I remember it became apparent that I needed to practice Arabic each day to become more proficient at the language. I don’t believe that procrastination is suited for learning languages, and neither is it for learning code. For this upcoming week, I have made it a goal of mine to practice the class material each day of the week to feel more comfortable with the different languages and desktop apps like Sublime Text and GitHub. Once I reviewed Codecademy lessons from last week and completed the new lessons focused on CSS for this week, I felt more confident in testing out some of the tags for my homepage. Honestly, I have a hate/love relationship with CSS. I think it is incredible that I can style the HTML text, but naming some of the HTML text as a class or ID confuses me. I feel like I am having trouble deciphering whether sections of the HTML text should be a class or an ID. I’m hoping to ask many questions in tomorrow’s class about this!

Also, I must owe credit where credit is due and thanks to Susan I was finally able to set up my brand new laptop with Sublime Text and GitHub while understanding how the connection of these apps work. I am still a little confused about the full functions of GitHub even after this week’s readings, but I am excited to become more acquainted with it in the future.