Tag Archives: jQuery

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).

Progress (Sort of)

My site is coming together. Well, sort of. I have a lot of pieces floating around in cyberspace. The biggest piece, however, is my first customization: the interactive map. I downloaded the Leaflet map plugin, which uses an open-source JavaScript library for creating interactive maps. The API is pretty well documented, but there are some things I couldn’t figure out.

Once I input the shortcode to create my map at the location I wanted it and then created the marker for one of my sites, I was able to figure out how to program it to include photos on the markers. But I quickly realized that I did not understand the interface. Before I installed the plugin, I was convinced that I had missed the mark and that none of my customizations would be code customizations because they could all be done with plugins. When I started the work, I figured out that you can type code into plugins (duh). Then, I realized I don’t understand the relationship between plugins and APIs.

Troubleshooting my map plugin helped to give me a basic understanding. I know that a plugin contains groups of functions and is written in PHP. I know that the Leaflet map plugin uses a JavaScript library. This part confused me. When I was writing code for my map, I was confused about which type of file to create in Sublime Text. I settled on JavaScript but as I was typing my code, my mind wandered to if I should create HTML and CSS files to accompany it. At that point, I knew I was overthinking.

Though the map plugin boasts about its well-documented API, it’s still a little hard to understand for me as a beginner. It has lists defining elements, events, methods, and options, (?)  but I get confused about what exactly to type since programming is very specific.

I also had problems with issues with FileZilla. When I tried to connect, I kept getting an error message.

I have one lingering question. What is the relationship between an API and a plugin?

The Internet is like onions. Onions have layers.

Learning PHP felt a lot like JavaScript. At points, I got the two programming languages mixed up because of the use of the $ to define variables in PHP and its use in jQuery. I think I’m definitely getting a better feel for it because when I’d slip up on jQuery/JavaScript, I’d be stuck for hours. When I messed up on PHP, most times I knew exactly what I was looking for to fix my mistakes. It also helped that the PHP website tells you which line the error is on.

The PHP lesson also made me notice a concept that I had previously glazed over, thinking I understood. While we used jQuery primarily for interactive purposes and to give us actions with visible results for everything, the PHP lessons in the beginning primarily focused on using data and selecting things out of arrays. On this lesson, the author says we will focus on it as a programming language and not web development. Previously, I didn’t realize there was a difference. I recalled the Codecademy lesson on functions in JavaScript , in which we programmed these functions, but they did not visibly add anything to the structure of a website.

My initial thought after learning more about WordPress was that I need to take it off my resume. What I know about managing WordPress is comparable to taking a French class and trying to speak Haitian Creole. I knew WordPress as the site that hosted my e-portfolio, blogs I once had, and a niche site that I created about the Harlem Renaissance for a project once. I know how to upload content into WordPress using the themes and templates, but I didn’t know anything about hosting a website, which is what I thought (think?) journalists are referring to, after having countless lectures about creating our e-portfolios on WordPress because it’s the industry standard. Now, I know that there are even more levels.

Yikes.

We’re at the halfway point (or near it, at least). Just when I thought things were going great and I was excited to put what I learned into action, it all blew up in my face. I thought I had a pretty good grasp on jQuery but this week, it slipped through my clutches.

Here are a couple things I learned:

  1. If something doesn’t sound familiar, ask for help immediately. Don’t assume it is just another way to say something you already know.
  2. Write down thorough notes when doing the Codecademy lessons. I did this with my HTML and CSS lessons, but stopped writing as much when I got to JavaScript and jQuery. Once it was time to create something of my own, it was harder to recall the step-by-step.
  3. Attention-to-detail is key. Coding is particular. One wrong character and all the slides that were previously hidden show up again, even though you just figured out how to get your button to work after spending hours just figuring out that you had to load the jQuery before the JavaScript in your HTML (true story).

If you couldn’t tell, this week was challenging. This video helped me a little, but I still couldn’t quite get it and I still don’t know exactly what it is that I don’t know.

Here are a couple specific questions I had:

  1. When working in JavaScript, do you use language from both jQuery and JavaScript? Or is it that once you load jQuery, you have to use it the whole time?
  2. How do you increment/decrement in jQuery(/javaScript?)?
  3. What am I doing wrong when trying to increment that makes all of the slides come back up?

Anyhoo, jQuery will not take me out without a fight. I’m coming to class with my pencil ready, and my mind clear.

Here’s a sneak peek of what you can expect for my midterm:

Diana O. Eromosele is a software developer at Newsela. She is also the founder/developer of categorizedtweets.com, a tool that sorts politicians’ tweets out by issue so constituents can easily take a quick look at what they care about. When she’s not busy coding, Diana also teaches web development languages. She has a journalism background. Look out for my profile to find out how/why she made the switch!

Week 6: Feeling Hopeful

This past week we had to apply the concepts we learned about jQuery and create a photo gallery. We created an outline of the steps during class, which was really helpful. The thought of having to figure out making the gallery on my own is overwhelming. As we worked through it during class I realized, I am picking up on the vocabulary and concepts. JavaScript alone was challenging, but jQuery helped make it a little more bearable. Writing code is really about understanding how different parts relate to one another.

The highlight of this week was being able to interview a black female web developer. This class has really opened me up to the industry and hearing her perspective really impacted me. Though the field isn’t as diverse as it could be, she stressed the importance of showing up. Karen had a totally different career before transitioning into web development and design. Hearing about her career path also reassured me that it’s OK to jump around in your career. Interests change and that is perfectly normal. As a senior with no current job offers, this was a helpful message.

I’m not exactly sure where my career is going but I’m so glad I am in the School of Communications at Howard University. Our journalism scheme forces us to have knowledge and skills in a variety of different mediums. I never would have thought I’d be learning how to code, but here I am. I can only hope that my diverse skill set will allow me to stand out as a potential candidate for jobs.

An Uphill Battle

It is no secret that the gallery assignment was a tough one. The entire class — not an exaggeration — struggled with completing it. So what is the gallery assignment, anyway? Our class was tasked with creating a homepage (easy-peasy) that contained a slideshow of photos (not so easy-peasy). The HTML portion of this assignment was like a walk in the park. A few brackets here, a heading there, and throw some divs in the mix — you’re good to go. The CSS was a little tougher. Figuring out the exact numbers I need for “top” & “width” (what the heck is auto??) & trying to decide if my position should be relative or absolute probably took me a solid two hours. But, CSS turned out to be no match for the evil-two-headed-monster that is JavaScript & jQuery. Missing class didn’t help, but I think even if I were there I would have still had issues. Dollar signs, squiggly brackets, and commands that didn’t make sense to my human brain — all hope felt lost.

I tried, tried, and tried again to understand how to make it work. The internet was helpful, but also confusing. Every source had a different way of doing a slideshow, so there were no basic commands I could turn to. I was plugging and chugging in different things from W3 schools, Youtube, Wired, and some smaller sketchier sites. I spent hours trying to make it make sense. I left and came back. Still nothing. I left again and came back again, and still nothing.

It just didn’t work.

So how does my tale end? I eventually gave up. I plugged in an automatic slideshow from W3 schools and begged for forgiveness in the /* comments */. It wasn’t a proud moment.

Still, all was not lost. We took the time in the class period following the assignment to really dive into how to do it. All was explained, untangled, unmangled, and demystified. For now, the battle was won and our men could return home.

But, whispers lingered in the air of a more terrifying conquest looming in the near distance. The natives call it: “A whole entire website, like seriously.” I fear what is to come, will my men survive?

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.

Tough Week at the Office

This week was not fun. Coming off of last week, which was the beginning of the JavaScript learning, I was anxious to be able to add a new kind of code to my work. The Codecademy assignments, at first didn’t feel to difficult but definitely started to pick up compared to html and css. However, the main difference when it comes to all 3 coding languages we’ve learned, was JavaScript was significantly more difficult to apply than the other two. I had little to no difficulties applying the Codecademy lessons to the assignments we had in the beginning.

With this gallery though, there felt like there was no end in sight. I sat down on Monday and figured out out my html that was already started in class, add the css aspects of the code and after about 45 minutes in my confident was pretty high. I thought to myself “hey look at me, coding, nice.” Little did I know this confidence and enthusiasm would soon fade.

I first took a look at what we had done in class and tried to use that as a base to move forward. The problem being that I really had no idea where I was trying to go. I got the gist of the assignment, hide some photos, press a button, the photo shows up with a new caption, going back and forth back and forth. The buttons weren’t too hard and neither was adding the images. It’s when it came to hiding the photos and having the captions show up I had difficulties. I tried to go on YouTube and watch videos that would show me how to get where I wanted to be. I, without any hyperbole, watched different Youtube videos for 2 hours on Monday night looking for guidance. I even texted 2 different classmates to see if they had any idea. What was funny was when they told me they were going to text me for help. That’s when I figured this may not come out the way I wanted. All in all, it was a good to experience the struggle for now I must guide myself until it all comes together.

jQuery + ONA = inspiration.

jQuery was a relief for me. Last week, I struggled with JavaScript. I was, as the kids say, shook. It felt like high school math class all over again. I should’ve known that those tricky little web developers, the same guys who follow the DRY principle, wouldn’t leave it at that. Once I got out of my head and got a hang of it, I realized it wasn’t that bad, but it can still be shortened.

Enter jQuery. A fast, small and feature-rich library designed to make JavaScript easier. Also, the beginning of creating code I can see utilized in the websites I actually visit. I felt like I was doing something big once I saw all the interactive features, like sliding elements and toggles.

At the time that I finished the jQuery lessons, I had just come back from the Online News Association (ONA) Conference on the HBCU Digital Media Fellowship. At their annual Online Journalism Awards, I saw a world of new possibilities. The student category particularly surprised me. Seeing the websites for Aftermath by UNC School of Media and Journalism and Alone by Misyrlena Egkolfopoulou of UC Berkeley Graduate School of Journalism made me realize that there is more out there than just words-on-paper journalism. These pieces create experiences that put the audience in the shoes of the afflicted. This, along with the design thinking workshops and training in alternative storytelling methods by Michael Grant, made me realize the untapped potential in Howard’s journalism department, the audience’s role in the story and the possibility that we may be behind the curve.

How do we bring a comparable curriculum to our HBCU? I think this class is a step in the right direction. I think Howard needs a modern journalism curriculum that strays from the traditional.

But back to jQuery. It was easy to grasp and it was intuitive. I believe that’s also what contributes to a good story. The audience can understand and interact with it. I will say I’m inspired. I want to take my new insight back to our school’s new ONA chapter.

¿Por(J)Que(ry)?

Coming into the lessons on Codecademy it was interesting to know that Javascript was the most popular programming language. HTML and CSS felt easier than Javascript. I started to think maybe this is just the hard part and it will get a bit easier. However, jQuery came along and has made it a bit more tough. It is a bit tough because it is like equations that I’m not use too. Learning different elements of the equation piece by piece has been a struggle. I have not given up though, relying on consistent practice and going back to the different Codecademy assignments has helped. jQuery isn’t necessarily easy, but understanding what I’m actually doing to the website does help. It not easy to exactly remember what signs and syntax to use to execute, but I at least have a basic understanding of jQuery. The most difficult part that has come with coding is remembering most of the functions. It’s not necessarily knowing where the comment goes and nuances like that, but rather, what was it I was trying to add. I understand that cheat sheets are made and that is what most people use, however I still want to be able to actually point out the change I’m trying to make and accurately implement that into my website. Just more practice and perhaps outside reading will aid my learning.