Tag Archives: jQuery

The Genius of jQuery

Leave a reply

So up to this point, I understood that everything had its place on a separate file. It’s kinda like how people in the different schools stick to each other. But here we are as journalism majors, taking a very computer science-y class. We’re bridging that gap and putting our different skillsets together in order further our journey into the coding world.

I think learning jQuery after being introduced to HTML, CSS, and Javascript is much like our figurative bridge we made between journalism and web development. jQuery makes it easy for developers to target HTML elements and make them interactive. Much like the hierarchy system in HTML, the Document Object Model (DOM) is set up like a family tree. We can even refer to elements as parents, children, and grandchildren of another element within the code.In addition to targeting elements by familial relationship, we can target them by closeness to a current element. Another pretty cool function is the find method. This is a way to target a singular method out of a group of descendants to an element.

Going into this week, I was pretty nervous about learning something new. JavaScript kinda killed my confidence, but jQuery helped me redeem myself. I understood the concepts and caught onto the coding formats pretty quickly. I’ve also come to realize it’s much better to at least grasp the concepts rather than just be able to regurgitate out code.

 

A Little (j)Querious

Leave a reply

jQuery is a JavaScript library that makes it easy to add dynamic behavior to HTML elements. Libraries in the JavaScript community are collaborative collections that extend and ease the use of the programming language. For example, jQuery can do the same function as twelve lines of JavaScript in just three. A good analogy to better understand jQuery comes from Codecademy. You can think of JavaScript like a bunch of individual Lego pieces, all the necessary tools to build grand things are there — it just might take a long time. Well, jQuery is like pre-made building tools. So instead of using individual Legos to build a car to put in your town, jQuery is just the car ready to be placed in the larger scheme of what you are building.

While I’m learning these new programming languages, it’s interesting to compare how these are similar to the language (or languages) we speak everyday. So this has me ponder: what in the English Language could be analogous to jQuery? What comes to mind first are contractions for words. Instead of cannot or do not or I have we instead use can’t and don’t and I’ve. These remind me of jQuery because in place of using the individual words to help portray our ideas, we insert pre-packaged words that still get across our point without using so many characters or in most cases combining two words. In both instances, conciseness is key. Lengthy, wordy, and down-right redundant speech is pushed aside for the brief yet comprehensive.

Approaching these programming languages from a linguistic point of view really helps in my understanding of these new concepts. Stepping back and looking at new concepts from a lens in which you are comfortable with is essential to learning. Many things in this universe are connected. There’s certain patterns that exist across species, languages, science, and math. I guess this all goes to say, you’ve always been aware.

What’s Next?

1 Reply

This class was definitely a challenge. I was not sure I would make it to the end, grades are not out yet so we will see, but the prospect of making a site for my dad got me through. He absolutely loves it and wants to add a picture of us to the “About Us” page, which was suggested by someone in the class. Like I said a few posts ago, I’m not sure if I want to continue doing web development.

This has been an educational experience and I enjoyed doing the more cosmetic coding. But there is something unpleasant about JavaScript, jQuery, and PHP. If I continue developing skills in this field, I would need to go back and spend some time reviewing these languages because these are the ones I want to work with.

I will take some time to recover from this semester, my last one at Georgetown, and then start my learning again. I will be supplementing the courses on Codecademy with those on the Odin Project. They seem to offer free projects and the opportunity to actually build things. I’ll let you know how it goes.

A big thing I want to work on is creating a working contact page from scratch. I still have not figured out how to make it link to a “Thank you” page and still email the message to the account’s email. Especially once I change it over to my dad. I want to continue working on this site, create more content and possible make it a little more interactive if possible. I’ll be working on the host site, along with my learning and probably start both in October when I return from traveling.

I hope to be relatively proficient, if possible, by December or January, so that I can write code more quickly and efficiently.

Final project pitch post

Leave a reply

Goals: For my final project I plan to build a recipe site with rotating pictures, cooking instructions, and a Q&A section for recipe requests. Based on our in-class discussion, I think I will use a WordPress theme for the design, layout, fonts, colors, etc.

I envision the layout of the site being relatively simple and clutter free. Given that this isn’t really a ‘personal site’ I don’t feel the need to have a homepage introducing myself, why I made the site, etc. Instead I would like the main page to get right into the heart of the content – food. I will have header tabs that break up the recipes by “breakfast” “lunch” and “dinner,” but the homepage will house the most recent recipes posted to the site. I will then have a fourth tab that allows for house the “Request a Recipe!” portion of the site.

Audience: This site would be intended for anyone that enjoys cooking and is searching for new, fun recipes. I have always enjoyed cooking and, although I don’t claim to be an expert, I have a ton of good recipes that family and friends are always asking for. I think this site will be a fun project for me and something I would be proud to share and continue working on once our class is finished.

Planned Modifications:

1. A customized slideshow for each recipe (jQuery plugin)

2. A customized “Request a Recipe!” section where visitors can submit questions or requested recipes that are emailed directly to my account and then I can either choose to respond, post the recipe, etc. (PHP plugin)

3. I will also use HTML and CSS to build out the cooking instructions, ingredients, tips and tricks, etc. although I think a lot of this will be done directly in the WordPress site. I would be curious to hear your feedback (Greg or fellow classmates) on whether there are certain HTML/CSS designs I should consider outside of WordPress, or if it’s best to add plugins that focus more on jQuery and PHP.

URL: victoriakinnealey.com

jQuery Slideshow

Leave a reply

https://github.com/xof88/Homepage-Assign

Creating an Interactive Slideshow with Captions Using jQuery

This week’s jQuery lessons in Codecademy were a breath of fresh air! I really felt quite lost last week with JS, but things started to click for me this week with jQuery. CA still had some kinks this week (also no option to “Get Code”!!!), but with some help from Google, I finally got the hang of it about a quarter of the way into the lessons – and it was pretty breezy from there on.

I followed Greg’s instruction and added my images, captions, and dots(buttons) to my index.html file I created a few weeks ago for our homepage assignment, and linked to my new script.js file. As I moved through the lessons, I went back and forth to my JS file to begin building out my slideshow for my homepage. When I got stuck, w3schools tutorial was immensely useful – it really helped to see how all the pieces fit together: HTML, CSS, and JS/jQuery. Once I felt like I was in a good place, aka. the slideshow worked (yay!), I then played around with and added to my stye.css file for my homepage.

One area I am stuck on is how my slideshow first displays (or doesn’t display) in Chrome and Safari. On Chrome, all four images initially stack on top of each other, until I click on a button, at which point they become a slideshow. Also, the slide numbers, captions, and buttons are not ON the pictures (but above and below.) It doesn’t seem to be reading the CSS which styled the font size, color, etc… either. I’ve searched Google endlessly, but I don’t think I’m using the right terms.

The jQuery is working great in Safari, except that the images do not initially display at all – I have to first click a button and then the slideshow can begin. Again, Google hasn’t solved this one for me yet either. Any ideas class? Anyone else have either of these issues?

On a separate note, I am looking forward to our midterm project. I will be profiling a coworker’s husband who is a web developer for Discovery. Prior to joining Discovery a couple years back, he was a developer for a PR agency. I chose him because he has an interesting story about how and why he got into web development that I think the class will enjoy reading.

Cheers,
Jane

jQuery: Seemingly Simple but Kind of Overwhelming

Leave a reply

Midterm:

For my midterm, I plan on speaking with Wes Lindamood. He is a senior interaction designer at NPR and works on creating digital stories and projects for the organization. I interned in NPR’s Marketing, Branding, and Communications department last semester and met Wes briefly, although we did not work together.

This week’s assignment: 

One of the most challenging things about this week’s assignment was just figuring out how to begin. The Codecademy lessons were simple enough (although some of the functions, like .apend(), still confuse me in terms of what they actually do) but I struggled extremely with creating the gallery. It’s hard to know where to begin when there seem to be so many different ways you can go about creating something in JavaScript and jQuery. I looked through various tutorials in preparation, and each of them suggested a slightly different approach. Not having a clear, formulaic set of steps threw me for a loop (no pun intended). Most of the work I did this week felt like just trial and error: changing different parts of the code to see what, if any, effect it would have and if it brought me closer to the end goal.

In terms of how far I got, I was able to load the images on to the HTML page and set up my ‘divs’ easily enough – the real problem was writing the actual JavaScript code. No matter which approach I tried, I could not get the images to actually appear in the semblance of a slideshow. Either all of the pictures stayed on the page or all of them disappeared and I could not figure out where my mistake was – whether I was screwing up the way I was writing the CSS, the HTML, or the JavaScript. I also struggled with linking the JavaScript file to the HTML and am still not sure if I did it correctly. In the end, I tried to modify the JavaScript presented in the W3 Schools tutorial by playing around with some of the jQuery events like the .click or .dblclick, but none of them seemed to have any effect.

I will keep working on my code and, hopefully, before Wednesday, I’ll produce a slideshow that actually slides!

Link to GitHub work: 

https://github.com/tatyanaberdan/homepage2

jQuery: A Lesson in Persistence

1 Reply

As I was working through this week’s Codecademy lessons on jQuery, I felt a minor sense of relief because I seemed to be understanding the concepts more easily, especially when compared to last week’s JavaScript disaster. Applying the jQuery concepts, however, has been a different story.

After completing the Codecademy jQuery exercises and working on some further tweaking of my existing homepage HTML and CSS code on Friday evening, I decided to get away from my apartment and head to Georgetown’s main campus on Saturday afternoon, hoping that the jQuery gods would help me complete the slideshow assignment. Five hours later, I felt like I had little to show for my efforts. Numerous Google searches and perusing the pages of more than 10 different sites only left me even more confused. I reached out to Greg for assistance. His response to write out the required steps in the slideshow using code comments was helpful, but I guess I’m just unsure of where to go from here. I found what I thought was a useful source for building a jQuery slideshow, but even modeling my code after this example has not worked. I then proceeded to create an account on Stack Overflow and asked the same question there–how do I get started on creating a jQuery slideshow with captions that show/hide? I received a detailed response, and tried altering my code, but it still did not work. My GitHub repo for this assignment is here. If anyone has figured out the jQuery code, I’d love to chat!

I’m not one to give up on an assignment. It’s currently after 9:00 on Sunday evening, and with a full-time 8-5 job and then a 6-9:35 pm class to attend on Monday, I’m unable to dedicate any additional time to this before the 10:00 deadline on Monday night. You win [for now], jQuery. I will try to work on the slideshow again on Tuesday evening to get it working before Wednesday’s class. I’m hoping this week’s class will shed some light on the steps we should follow to make a slideshow. I think what would be most helpful for me would be to see a template of sorts that shows the correct code to use in order to get all images (except for the current one) to hide, to click through to the next image using a button, and to add the caption text that also shows and hides.

I’m excited to work on the developer profile midterm assignment. After working so hard to figure out the jQuery assignment and still reaching a dead end, I’m grateful for the opportunity to work on a written piece that is more straightforward. The developer I’m profiling is named Dave. He’s asked me to withhold his last name for privacy reasons due to the work he does as a government contractor. Dave is a developer and programmer who does front-end design for applications that provide analytics as well as freelance marketing and landing page-type work. I got in touch with Dave through my colleague who works on social media and analytics for my department at Georgetown. As I was discussing this assignment with her, she offered to put me in touch with Dave, who is a friend of her tech app startup-owner boyfriend. I’ve already spoken with Dave and have received answers to the questions I posed, so I’m looking forward to working his answers into the midterm assignment. I reviewed the developer profile examples from the 2013 class, and am wondering what exactly is expected for this assignment. Some people provided a brief overview of the person they profiled, and then simply listed out the questions and answers. A few others worked the questions and answers into an actual story (I’m assuming these were the journalism students). Do you have a preference, Greg, for how we approach this assignment?

jQuery – Easy(ish) in Theory Hard in Practice

Leave a reply

This week’s lesson left me feeling similar to last week in that many of the steps were logical and easy to understand abstractly, but a bit more complex when put into practice, especially when the examples disappeared. One the one hand, I liked that the project made you set up the jQuery each time you ran an assignment, I now have the $(“document”).ready(function(){   }); permanently ingrained in my head as the starting point for any jQuery work, which is great! However, I thought at other points the lack of guidance with the jQuery lesson as compared to past lessons was frustrating and, frankly, wasted time.

In past lessons, if you try to write the code five times unsuccessfully, the system will give you the option to see the correct code. Although the goal is obviously to write the code on your own, I learn best from watching and observing the correct approach. Therefore, when I got to a piece of code I couldn’t figure out, seeing the correct code enabled me to understand what I had missed, why I had missed it, and how I needed to set the code up in the future to be successful. The jQuery lesson did not provide any code, no matter how many times you tried, which for me was extremely frustrating. I would Google the terms I thought I needed, take a break and come back, look to old lessons for clues, and eventually I did figure each section out but the process was so frustrating my “aha” moment was not very satisfying because I just wanted the practice to be done.

Similarly, although I felt (relatively) confident with the jQuery lessons of Codecademy, I struggled to test my slideshow code in JsFiddle, thus I am not sure if my jQuery is functioning properly, which is frustrating. I would update pieces of the code, refer to old lessons, read notes from class, everything would look accurate, and then when I put all of my code into JsFiddle nothing happened. I could not figure out if it was because my code was inaccurate, or if I was putting it into the system incorrectly, but either way it left me uneasy and annoyed.

As we discussed briefly in class, I think a lot of this comes with months (and years) of practice and repetition, but at this point I am continually surprised by the mental and physical toll that coding takes on my mind. After five hours of staring at five lines of code that look right but don’t work right, I have an ever-growing respect for fulltime coders.

I have a call set up tomorrow to Sarah Howe Elliott, a web developer, project/UX manager at the Chamber of Commerce (I have never worked with her directly and she does not work with my department within the Chamber). I’m excited to hear about her career and if she was equally as frustrated when she first began learning code J

Nothing Simple About This

Leave a reply

At this point, I have not finished the jQuery tutorial. I also have not managed to put the slideshow together. Despite doing all I can to clean and improve my code I have had very little success. All this time I thought my CSS was incorrectly linked to my HTML because I never saw any of the changes go live. Today I remembered JSFiddle and saw my boring white background turn blue. Victory, yes but still a small one since the title is still justified to the left.

I’m trying to build the slideshow code but even after extensive Googling and doing the courses I’m still having trouble just starting and not copying what w3schools has done. I understand the purpose and uses of jQuery and agree that it can is useful. For the parts of it I understand, I like and can probably write on my own. These lessons did a great job of forcing us to start the code from scratch. It could have been because the structure required for JavaScript, CSS, and HTML are not necessary here.

This week, my post will be very similar to those of my classmates. I do have to say that the class discussion forum has been very helpful. More so than Codeacademy. There is a notification at the top of the lesson that says they will be updating the jQuery lessons. I desperately wish these updates would have happened before we started this course but, oh well. The structure is  dramatically different, the hints are even less helpful, and there is no way to get the code and start again. Sometimes even when there are problems with the code it allows you to advance to the next step.

Developer interview:

For the midterm I interviewed a developer who is relatively new to the field. Tiffanie Johnson works for Forum One and is currently striving towards becoming a subject matter expert in Angular and Drupal 8.

Another trying week

Leave a reply

This week was a culmination of putting a lot of the languages we’ve touched on together. And it went poorly. The slideshow project was an interesting take on putting all the pieces together but it still felt overwhelming.

I’ve found that learning all of these concepts has been hard because we haven’t really gone through them together. In a different class I took last semester, Data Journalism, we went through a lot of technical platforms like SQL and Python, but we went step by step together. Only then did higher level concepts start to make sense.

It would be really helpful if we had class time where we went through things like how to make a slideshow step by step, so we could see how something came to fruition, before we are expected to create one on our own. Like Greg said in class, teachers do teach you how to write a sentence, but they don’t release you into the wild to then write an essay. To take that metaphor we had in class to its logical conclusion, you’re leaving out important building blocks like essay structure, paragraphs, and thesis statements. I feel like we only cover abstract concepts in class, only to have questions moved past because we don’t really go over assignments or take a look at the building blocks we need.

While some could say that Codecademy is what bridges that gap, I’ve continued to have problems with that as well. Currently the interface seems to delete sections I’ve done or doesn’t add a check mark to things to say items have been completed. That’s been really hard, especially when I’m trying to figure out why some lines of code are right or wrong.

I understand why a lot of the class is geared towards making sure we can figure out how things are broken on our own, but I feel like I’m operating at a huge handicap every week because I don’t quite understand what the best practices are to begin with. It would be really helpful to work on foundational things in class so that way outside study can be used to hone things, not figure out what square one is.

As for my Midterm, I will be interviewing Matt Callahan. He works at The Washington Post as a designer, but mostly does what we call “enterprise” templates. These templates are for our bigger stories and are always custom designed using jQuery and JavaScript.