Tag Archives: jQuery

JavaScript & jQuery: Challenge Accepted

1 Reply

I walked out of the February 12 class feeling somewhat positive that I could rock this gallery assignment. I quickly found out that feeling would not last as long as I would have liked it to when I was put to the test to do the gallery assignment on my own. During Tuesday’s class, my eyes were glued to the screen as my instructor went through HTML and the pseudocode for JavaScript. With Codecademy as my resource and a head start on the gallery assignment, I was not going to accept defeat. This assignment was going to be the best one yet, as so I thought!

Here is a run-down of what happened this week following the Tuesday class:

Wednesday: JavaScript lesson review

Thursday:  jQuery Codecademy review

Friday: reviewed class lecture on Google Drive

Saturday: stared at pseudo code, used YouTube as a resource

Sunday: felt confident, reviewed gallery pseudo code, felt stressed, emailed instructor, desperately emailed 2 classmates for help, met up with 1 classmate, did my best to throw something together, felt defeated

Ultimately, my goal was to meet the deadline, but I became frustrated when I could not figure out how to get my buttons to work. One of the biggest lessons learned from this week’s assignment is that there is not a right way to create a finished product. I believe that my biggest mistake was overthinking that I was not doing the assignment the right way. There are so many ways to get to the final product!

I watched plenty of videos on how to create a gallery and noticed that a few people would use the hide feature in CSS instead of using this feature in JavaScript. Is there typically best practices of when to use CSS or JavaScript? I think it also confused me when I saw HTML, CSS, & JavaScript in one file of code. Do beginners separate the files to understand how each language functions or do some developers separate the files to keep everything organized?

Although I felt very defeated from this assignment, I am not going to let that get me down. I accept the challenge to eventually understand jQuery & JavaScript at the most proficient level that a beginner can be!

The Gallery of Entertainment

Leave a reply

Even though it’s the long weekend, it seems like it’s been a lot longer. A “much more than expected” time was spent on researching and reading online content in order to get some more knowledge on the jQuery and JavaScript. As it turned out, there’s a lot of resources a programming-beginner could count on. After I left the safe nest (for some known as the Codecademy), I tried to get some more practical knowledge that could potentially help me in creating the gallery assignment.

First, I reached out to YouTube, as seeing someone create code from a complete zero helped me figure out exactly which parts I missed out on during my study. As it turned out, I got some inspirations, which came in quite handy since the final format of the gallery was not specified. I considered a wide range of options, from slideshows to a lightbox gallery. In the end, I decided to go with the first one, which initially seemed a bit easier to create.

The second source of wisdom was online content in the form of websites – presenting lines of code that other programmers used to create their own photo galleries. Their tricks were very helpful and aided me in figuring out how to make my own gallery more interactive.

In the end, I did not have much of an issue creating the HTML and CSS files. A puzzle began when I moved on to working on JavaScript. What helped me a lot during the entire process was constructive criticism from one of my classmates. Pointing out some of the mistakes I made eventually gave a real kick to further effort and with a deadline approaching it could have been considered as a form of a great motivation. Overall, I feel like it was an interesting experience; however, next time a slower pace would be very helpful in reducing the stress level surrounding the assignment.

Gallery

Leave a reply

For the past few weeks, we have been doing various short exercises to learn HTML, CSS and jQuery. We have been doing them separately or only in pieces each time. This week, the gallery exercise was perfectly timed because we got to see a bigger picture of the three languages and see how all work together to create a full project from beginning to end.

It was extremely helpful that we worked in class on the gallery on Tuesday. Since this was our first full project, it would have been hard to wrap our head around the logic of the jQuery code. I would suggest offering more direction in the prompt itself just to give more input into our first project.

The HTML and the CSS parts were doable, but the jQuery part was a little tricky because there were many ways of doing the gallery and it was a little challenging trying to figure out whether to do the long JavaScript version or the jQuery shortcut. 

I used Google a lot to try and find tutorials and all sorts of help online. Many websites mentioned a Lightbox that you download and add into the  code to help make the gallery get set up more easily. Since we are still in the early stages of coding and we have advanced in the learning process, we had to go about it in the long manner and actually explore it step by step. I decided to make the next and previous buttons the focus of my code. The first image was my first slide and the rest followed as we clicked on the next button or the previous button. I found it difficult however to figure out the code needed to have the gallery reset once we go through the entire carousel. I was not sure if I did the first part right but I did not really add anything for the second part. The good news is that my HTML and CSS were not difficult to do and pretty straightforward, but I spent around 3-4 hours a day since Thursday trying to figure out jQuery code. I decided to go with my own logic and something different from the logic we did in class. I realized that I need to spend a few more hours in the next couple of days getting more comfortable with the handlers. I need to become more natural with understand the code and reading it as an actual sentence.  

Well, that escalated quickly…

1 Reply

I honestly didn’t expect to have so many issues with this week’s gallery assignment. I totally understood the HTML that we built in class, and could follow all of the granular steps laid out in the JavaScript pseudo-code. Yet when it came time to fill in the JavaScript with actual code, I was at a loss. Sure, I could create a close approximation to what I thought it should look like, but I know that so many things can break code, I was sure I was leaving out critical details. I also found myself missing the instant gratification that Codecademy provides in its exercises: there was no little teal check-mark to tell me I had done something correctly and could move onto the next stage with confidence.

Process and Further Questions

I finally found a resource that helped me work through the structure of the JavaScript. It approached the problem in a slightly different way than we had built using our pseudocode, but it explained each piece of code well enough for me to understand how it worked. Yet, when I plugged that code into my .js file, it still didn’t move the slides! At this point, I wondered if maybe the problem was that the JavaScript wasn’t appropriately linked to my HTML file.

I asked one of our web developers to take a look at my project, and he said that I wasn’t referencing jQuery in my HTML, so he helped me add a line of code.

But I didn’t remember having to link jQuery to the HTML in addition to linking the local JavaScript file. Is this something we have to do when using jQuery in our projects?

Also: are there better/alternative ways of testing JavaScript than pulling up the HTML in a web browser? I’d love to believe that some of my issues stemmed from the browser window not refreshing properly, but I doubt that’s really the case.

On feeling organized

I didn’t. Usually, when I’m writing, I have no problem skipping over a challenging section and returning to it later (in fact, I saved the introductory paragraph for this reflection until the end). But with code, everything feels contingent upon everything else. I’m not yet able to see functions as contained “chunks” separate from one another, and had a hard time creating new sections without finishing previous ones.

My research also felt scattered. It turns out, opening 9 tabs with similar google questions and YouTube videos isn’t a helpful way to work through a coding roadblock.

Because of these issues, I also felt extremely disorganized committing my changes in GitHub. There was so much trial and error going on in the .js file of my project that I was afraid to see what the GitHub history even looked like. By the time I got something to work, I had a hard time articulating the theme of what I had done in order to commit it. Moreover, I can’t even imagine what my complete repo history looks like now—I’m sure I won’t be able to easily retrace my steps. Practice, I guess…

jQuery: I need somebody (not just anybody)

Leave a reply

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

Leave a reply

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… to hide or not to hide

Leave a reply

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.

.showMe more

Leave a reply

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

Leave a reply

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();

Leave a reply

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!