Tag Archives: week5

Slideshow gallery

Leave a reply

For this week’s assignment on the slideshow picture gallery, I found it challenging at times. I think since this was the first assignment in which we applied HTML, CSS, JavaScript and jQuery all at once, it was a bit overwhelming to sort through the differences of each language. What helped me the most was going back through the Codecademy lessons and reviewing all of the different languages to refresh and kind of relearn everything. It was relieving that we went over almost all of the HTML during class period to get the ball rolling on the gallery assignment. I did struggle the most with the JavaScript and jQuery portions of the gallery, which is what I expected from the beginning.

There were plenty of moments of trial and error regarding writing my code, but I did Google search lots of webpages and articles to walk me through similar projects. I personally chose to do my slideshow gallery on various puppies, which did cheer me up when I was getting frustrated and lost on what components were not working cooperatively with each other. At the very end, I added my CSS last — it is very simple, but still I was searching the internet to look for how to do things such as center align my elements, various wordings for colors and so on.

The part that had me most in a panicked frenzy so to speak was getting all work committed and saved on GitHub. I had some issues as I was confused and probably needed a break from the continuous work to look carefully at what I had completed and what was left to do. Despite getting it to work in the end, there are still lots of uncertainties I have about using GitHub and not guessing my way through whether I completed things accurately or not. I’m glad it is finished and I ended up being very proud of what I completed.

JavaScript gallery

Leave a reply

This week was interesting. Going back and forth with the gallery took a significant amount of time. From going back through the tutorials to finding helpful YouTube videos and W3Schools pages that offer a plethora of avenues to reach the same (or similar) goal, I think my biggest issue for this week was mass overload.

In this case, I have my gallery page with tons of JavaScript (and a few different stylized buttons, etc.), but the events/const aren’t taking place like how I intended. I think with each new strategy I employed, I made the code appear more complicated and it got to the point where I wasn’t sure where the bug(s) was. In JavaScript, I actually have three different routes for coding the gallery’s auto scroll timing function. I believe I deleted the HTML- and CSS-only version, but I found a way to use span tags to link to a following or previous image. Adding a fade/transform effect to make the transition appear like JavaScript. I scrapped that because it was not how the assignment was supposed to work.

I think my biggest issue was getting the script to work inside of the container but outside of the individual images, I believe. After a while of taking a few steps backward to take one forward, I saw that the code for the script was already built, along with the container, but I ended up not being sure which code canceled out the previous.

It then made me wonder about how content management systems are built (in this case, for photo galleries). I understand having a resize function to make featured images consistent, which I initially pursued but resorted to sizing in Photoshop, but what about changing the number of images available in the gallery? After I figure out which code to delete, I’d like to know the basics around a photo being added to a collection and the container expanding (or contracting) to accommodate for different final products.

A bit of a tangent, at the three news organizations I’ve worked, I haven’t seen a wholly aesthetically pleasing gallery that fits and works neatly within a normal article. I have seen and used sliders for posts designed for the slider to have preeminence on the page, but the gallery function toward the middle of the page below the A section of an article is often very basic or clunky. And most news organizations I’ve seen generally rely on single images within the text to avoid addressing it, which leaves image heavy stories lacking in ways that simply linking to photo gallery pages (which statistically aren’t clicked at large rates) aren’t the solution.

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!

JavaScript/jQuery gallery: So close yet so far!

1 Reply

This week’s JavaScript/jQuery assignment exposed my fear in my “bringing all the pieces together” post. The reality of contextualizing the experiences from the language programs and the others. Unlike the Codeacademy tutorials that focuses on a specific skill at a time, I noticed that the marriage between the difference programming languages could be challenging. I felt like I know and understand what is being required on the assignment, yet I was struggling to pull it off.

Observations

I made an interesting observation that, spending time to understand JavaScript is a must. There is a logical reasoning that is grounded in understanding JavaScript and without that one will be limited in their use of jQuery. I was caught up with mixing the programs from JavaScript and jQuery and I understand that is fine and will work, but will prefer being consistent with one, preferably JavaScript and eventually jQuery. I also observe from other tutorials that other programs used different methods for their gallery slideshows. They always lose me when they apply a shortcut and other built-in websites programs like light box for their projects.

I am pretty sure there are lots of mistakes in the logic I used for my code, but there seems to be no way out. I’m looking forward to reading everyone’s post on their experiences.  I had my first interaction with the developer I’m profiling for the midterm assignment and she mentioned how JavaScript could be the most challenging, but the more you go after it the better understanding you gain. “It will click after several attempts.” she said.

I will like to know your views about this JavaScript tutorial I found on YouTube for assembling a gallery. It seems pretty straight forward.

 

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…

Pitch (Perfect)

Leave a reply

This week we worked on creating galleries on GitHub, which was something I thought I understood in class but lacked the same confidence when it was time to do the assignment. Thankfully, some of my classmates paid better attention and was able to explain everything to me. I am still working on becoming familiar with GitHub since this is going to be something we rely on heavily for our final project. I am pretty excited about the midterm assignment because researching, interviewing and writing are some of my strong suits, so I plan to do really well on this assignment. How I found the subject of my midterm is actually pretty funny, I searched ‘web developer’ on LinkedIn and was scrolling through people who mentioned that phrase when I came across a particularly quirky post. As a visual learned and Hallmark and Lifetime movie buff, I instantly saw the words come to life in my head. As she described the day she decided to become a coder, she was in her pajamas covered in floor from a baking mishap. The story instantly intrigued me, so I connected with her and sent her a message asking to meet with her. Outside of her possible movie opener as a hook to her LinkedIn post, she interested me because she did not have a background in coding or engineering but within a year she was pretty successful in her career as a web developer. I connected with her because I have literally no background in coding or web development, but it is pretty inspiring to see someone who is where I am today, last year has really made web development her passion and career. I won’t tell you much more, because I don’t want to spoil my assignment, but I am excited and think everyone else in the class will enjoy it as well.

Yikes.

Leave a reply

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!

It’s Almost Midterm Season

Leave a reply

I missed most of the class this past week, so I don’t have much to say on that end. Based on what my peers have told me, the gallery assignment is a little daunting I even got told: “for real though you should try not to miss that class [redacted] is hard.” Ha. So I will do my best to attend every class for the remainder of the semester. (I will be in California on Oct. 4, but we can discuss that at another time).

Anyway, I will talk about my midterm project now. I did an interview with Brittany Ohalete, a senior in the school of engineering. We share a mutual friend, which worked out so perfectly. Brittany Ohalete is unique because she is an artist and a developer. She has a pretty popular graphic design business — called BOPHO — where she creates custom logos, event/party flyers, Snapchat filters, CD cover art, and more. On the other end, she is a full-stack developer. (Sidebar: it’s pretty cool that I even know what that means now.) She fluent in about 6 or 7 programming languages and loves to learn new ones as well as developing frameworks. I’ll end it here, as not to ruin the actual project.

I have written a little over half of it now. My next steps are to finish it — duh. Edit, rearrange, make things more concise, tighten up quotes etc. etc. I don’t really know the direction I am going with this profile, though. It feels as if I am just rambling. I think I need to figure out my hook and how to move the story to a natural progression. When I read profile articles from The Guardian or The New York Times there’s always a very strong hook. All the material is there, I just need to find a better way to organize it.