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: The shortcut language

Leave a reply

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

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.

Bringing all the pieces together!

Leave a reply

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

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.