Tag Archives: week4

jQuery: I need somebody (not just anybody)

Even with a lot of work both on the professional and educational side, I feel like I was able to make a big step towards gaining “jQuery proficiency” this week. Codecademy explains everything quite clearly and turned out to be a great resource, even though at first it seemed quite scary and overwhelming with information. In my opinion, the website is very good if you are a beginner in a given field, since the courses available on it provided me with a foundation that I am excited to use in the future. Also, this week I had the opportunity to complete the jQuery course on that website, which turned out to be quite straightforward, but rather stimulating experience. Another part of my study involved finding commonalities between HTML, CSS and jQuery, as combining them all together would surely be helpful to produce a great piece at the end of the course. As of today, I still need to watch more videos and do some research on this area of study, in order to strengthen the knowledge I already have and the language skills I might gain through completing another set of lessons next week.

Moreover, in the last couple of days I was able to reach out to a developer (through a friend) with a fascinating background in programming. I believe his interesting experience and knowledge can be a good resource for a programming novice such as me. Right now, I am working on some specific questions to ask him and drafting a profile that might be helpful to both me and students who will have the possibility to read it in the future. To conclude, I am looking forward to conducting an interview with him and excited to learn more about programming and the ways it can benefit my future career.

The adventures of jQuery

I attended my first class with little to no experience of web development skills. I have always heard people claim JavaScript as one of the tricky languages. However, when I finally became  comfortable enough with HTML and CSS, JavaScript and jQuery came into my life and I felt doomed. I understand that JavaScript is used for adding dynamic behavior to web pages, but I was a little confused by why people still use JavaScript if there are libraries like jQuery that make developers’ lives easier.

From my understanding, jQuery is basically pre-written JavaScript code that can be used in any coding project. As a newbie, I visited the first page of the Introduction to jQuery assignment thinking, “isn’t this cheating? Can JavaScript really be simplified?” l have realized that in cases like this one, it isn’t worth reinventing the wheel. It finally makes sense why people claim that developers are lazy and I thank my introduction of jQuery for that. As a fan of metaphors, I like to think of it as you wouldn’t manufacture your own wood when building a house. With jQuery, web developers can spend less time connecting JavaScript features into a web page and dedicate majority of the time incorporating features that are unique to their site.

jQuery sounded too good to be true, so I went to the internet to research why jQuery is not always a good thing. During the lesson, I was confused on why we didn’t jump to jQuery and completely skip JavaScript. Rather than being built for JavaScript and DOM API combined, jQuery is built for DOM manipulation only. Apparently jQuery wasn’t exactly made for beginners so it is necessary to learn the core JavaScript language or else it would be difficult to use jQuery properly.

I guess I can’t quite say goodbye to JavaScript.

 

jQuery: The shortcut language

Whoever came up with the idea for jQuery deserves a medal. Such a simple concept can go such a long way. Some effects are difficult for me to conceptualize, like for example in the second jQuery exercise, we were able to simply change the speed of a dropdown menu using either the  “slow” or “fast” parameter. Whereas some methods, like .fadein, you can quantify for exactly how long in milliseconds the animation should last. Perhaps this comfortability just comes with practice. For example:

$(‘#nav-dropdown’).slideToggle(‘fast’) vs. $(‘#nav-dropdown’).slideToggle(‘100’)

Either way, it’s easy to see how powerful the combination of JavaScript and jQuery can be. The complex animations I see daily on websites, which just weeks ago would have been impossible for me to explain, make sense now.

I wonder if other programming languages have libraries like jQuery that can condense complicated and extensive chunks of code into easily-referenced bits of code only a line or two long.

I also found reviewing the DOM very helpful as It’s easy to get lost in the weeds when doing this line-by-line coding. I think of it as a sort of order of operations, which I’m sure it’s been described as before.

Looking ahead

I’m very excited to start building a profile site and to include the plethora of media I’ve produced over the past four years. I’m especially excited to show off my news photography and video work. Every profile site I’ve used on WordPress has had an unattractive profile layout that I didn’t find conducive to showcasing media. And the themes that did showcase media well I wasn’t interested in paying for.

I’m looking forward to talking with my profile subject, Ryan Schneiderman, about how he’s built his dad’s photography showcase, and hopefully take some good tips from him.

jQuery… to hide or not to hide

Coming into this class, I only had a vague understanding of JavaScript (let alone jQuery). After this lesson and the previous one, it’s neat that everything is a lot clearer on a fundamental level. It’s also awesome how the latter gives you the ability to significantly reduce the line amount of JavaScript due to its shortcuts (being the purpose of compression-oriented library). I think it also speaks to the relative openness that developers have when it comes to sharing (Google hosting for jQuery).

I think linking the CSS and jQuery pages to change multiple aspects using jQuery at the same time is a breath of fresh air. All the while, as the lessons noted, it still presents the possibility of things getting even more hectic within the page (if they’re not grouped/organized separately and intentionally). The mouseleave functions in the lessons were also really interesting. And the .animate( ) function is a neat tool. I haven’t thought much about how the standard practices incorporate significant design insight.

I remember in class, I believe someone asked why we would intentionally have a hidden element that would be unhidden upon the user’s activity. The mouse hovering over the menu button in this case was a time for using it that I had not beforehand thought of. Toggling the fade elements for the add to cart design is another interesting function.

Reviewing the DOM method was also good. In addition to that, specifically targeting descendant elements and excluding others.

Midterm

I’m looking forward to working on and finishing my profile. My web developer is with Facebook, and his company’s attention to all of the aforementioned possibilities in crafting visually appealing and intuitive websites is verified by the amount of users that it has worldwide. That, and the criticism it receives after the slightest update or change.

Bringing all the pieces together!

The jQuery lessons on Codecademy seem pretty straightforward, but with a few reviews and practice it will be by far the most straightforward and easy to comprehend. You could literally watch the code structure from the lesson notes and get through most of the questions. Much of the code follows similar patterns, making it the quickest to get through. After the week’s jQuery lessons, I as usual re-enforced the tutorial by watching a few YouTube videos from mmuts’s channel he has a lot of helpful tutorials on HTML, CSS, JavaScript, jQuery and other pertinent coding programs. Check him out here: https://www.youtube.com/watch?BaIgTKj1iCQ

I think my greatest concern is how to stay on top with the new coding programs while  perfecting the earlier programs. I realize there’s a likelihood of forgetting some of the previous lessons, especially JavaScript, which is the most challenging. I was wondering whether it is possible for a programmer to be solely proficient in jQuery and not JavaScript, yet be able to create great stuff without problems.

I’m really looking forward to bringing together all the various coding languages to produce something great. For my final project, I’m looking at developing a unique news websites that is visually appealing and fun for visitors to explore. I will want it to look something like this or better: https://blexing2.wixsite.com/mysite. I put this together on wix.com earlier. so far I doubt whether I can pull that off yet, but hopefully soon.

.showMe more

This week, we had the chance to learn and code using jQuery. It has changed the way people write JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML documentation, event handling, and CSS much simpler. What I found hard about learning jQuery is learning all the handlers and figuring the order of the code. For the upcoming days, I need to watch more videos and re-emphasize the knowledge in my mind.

I did a mistake while doing the chapters this week. I did the interactive lessons, then the quizzes for all the chapters and then I went back to do the freeform projects for each chapter. The issue was that I got the concepts all confused and when I tried to do the freeform projects I became confused with all the information and the concepts I had learnt. For the future, I am going to do each chapter fully and separately from one another and I am going to do all the parts of the chapter at the same time and not in pieces so that I apply whatever concepts I learnt immediately. This will help me build one new information in a more organized way.

Week 4

For this week’s tutorial lesson on Codecademy for jQuery, I wasn’t initially sure what it was in comparison to HTML, CSS and JavaScript. However, I learned that it was essentially just an extension of JavaScript, or what they referred to as a “library.” I thought it was neat to be able to accomplish the same dynamic function that JavaScript enables, just instead using JQuery with a way smaller amount of lines of code.

When reading about the structure of where to input certain elements when writing your code, Codecademy explains that HTML loads from top to bottom. In essence, it makes sense, but it’s just not something that I had thought about when learning HTML and such. So, putting JQuery at the bottom of your code allows it loads after everything else. This was like a low-key lightbulb moment for me to understand that this is the reason behind why pop-ups and elements controlled by JavaScript and jQuery are the last things loaded on a webpage.

Using jQuery seemed a lot simpler, which is great since I’m sure that is its purpose – using $() to target elements makes it easy to identify throughout the code and it remains consistent. Additionally, using the period sign as a means to attach the handler is practically the simplest way I could think of for connecting method that triggers a return function.

All in all, JavaScript was easier to learn than CSS for myself. In comparison to jQuery, JavaScript seems more difficult and time-consuming, because it is. Either way I am glad that the lessons are somewhat easier to digest the farther we get along with the lessons. The only thing is, Codecademy makes it so easy to learn and understand the material even when I’m not understanding it. It’s when I go to GitHub or another page and see a blank page then I feel like I’m lost, have no idea what to type or where to start.

$(“#iFeelBetter”).kindOf();

This week’s jQuery lessons came as a relief following last week’s focus on JavaScript. jQuery solves a problem that I’m glad to learn was more universal than just my own shortcomings: the JavaScript language is bulky, the syntax is confusing, and small mistakes are easy to make.

Unfortunately, using the jQuery library doesn’t eliminate the possibility for error, but it does render errors much easier to locate and address. Hooray for jQuery!

The biggest challenge

The exercise I found most challenging had to do with the DOM. I wasn’t expecting to have such trouble with it—I understood the basics of parent-child and sibling relationships within the context of HTML—but I found that using the DOM jQuery methods to reference various elements abstracted the code to the point where I had trouble remembering what I was supposed to be doing in the first place.

I can understand how jQuery selectors are useful for referencing specific areas of code, and how jQuery actions simplify the code that would be necessary to make things perform the desired behaviors. I also understand that utilizing the parent-child HTML structure by referencing it in the JavaScript makes the code more dynamic—that is, as things within the code change, the JavaScript functions will still apply.

Yet for some reason, using the .next(), .children(), etc. methods just felt like a big riddle. Onwards to more practice, I suppose!

Fun facts

This is just nerdy, but I was really interested to learn that the common case used in JavaScript is called “camelCase.” I had noticed its structure in earlier lessons, but didn’t know anything about it. Apparently, it’s named for the shape of a camel’s humps—with each hump representing a new capital. Of course, we’ve all seen it used in cases like “iPhone and eBay.”

A side note along this nerdy grammar thread: Is anyone else frustrated with Codecademy’s consistent misuse of “it’s” when they mean “its”?

What’s next?

In addition to putting out feelers for our midterm web developer profiles, I’ve been giving some thought to what shape I want my final project to take. At Georgetown SCS, we have a number of WordPress microsites that serve specific populations. The Hoya Professional 30 and the SCS Commencement site are two examples of projects I’ve launched. There is a nascent desire among the administration to launch a student life website dedicated to events, social resources, and student groups here at SCS. I think this is a project I’d like to take on in order to test the new development skills I’ve learned. The major hurdle I’ll need to figure out is the hosting (the other microsites are hosted through Georgetown Domains, which limits the themes and add-ons you can use).

More to come!

Another One?

Just when I thought we were done adding languages to our toolbelt, we did it again. This week we added jQuery to our repertoire. When we began adding languages, I mentioned the fact that one of the things I was having difficulty with was distinguishing or keeping up with all the different elements without a code function. I can now say, on the fourth language, I have a great handle on elements. Which is great because jQuery uses something called the DOM tree as a way to distinguish elements, which is much more confusing than the indention process used by the other languages. We are also using different symbols in this language, parenthesis is used instead of brackets, so that’s another thing I have to remember when code switching between languages. That was one of the first humps I had to overcome in this language, because I kept using brackets and could not understand why I kept getting error messages. Throughout the rest of the lesson on Code Academy, I started to get a better grasp of the goals, through my ‘old faithful,’ trial and error. Usually, with the other languages, I have decided if I like a language or not pretty quickly, but I am not sure how I feel about this one in particular. I did struggle making some of the style changes early on, but I can see how this language could be helpful through the Code Academy (i.e. the online store activity). However, like all the other languages, I will have to take my learning past the classroom and research some more about it. I see how it can be considered helpful for other developers, but I want to see is there any other uses that could benefit me in my final project site (finista blog).

J-what?

jQuery made CSS and HTML look like a cake-walk. Managing the organization of my syntax in jQuery was my biggest struggle. I would get confused on where to put my semi-colons or brackets. It was helpful that Codecademy highlights the matching pairs when you select one of the parentheses or brackets. I had no issues targeting classes and ids. I still don’t have a clear understanding on how “next( )” and “closest( )” work, but with practice, I will recognize their purpose and see the correlation. It was also overwhelming learning all these new tags. HTML doesn’t have as many abbreviations to remember unlike CSS and jQuery. Through jQuery, I was able to get an inside look on how simple tasks like making a button rotate, a list drop down, or a picture to toggle are done. On a website it looks so simple, yet behind closed doors you have to target select a class and then add a specific characteristic to it. It was cool to know you could directly use CSS in jQuery because in my opinion, it saves time. Instead of going back and forth between your CSS page and JavaScript, you can easily make changes right there.

Aside from my troubles with the coding itself, I found jQuery to be interesting because it really made the website come together. In metaphorical terms, CSS would be the icing and jQuery would be the sprinkles. There’s a lot that goes into a website and the more detail you add, the more coding you have to do. As a Film major, I mostly use Adobe Premiere to edit videos, but if I want to add extra animations to enhance it then I pull the project into Adobe AfterEffects. Similar to jQuery it adds to the project and you watch it come alive.