Category Archives: 2019 Spring class

HTML with a twist = PHP

1 Reply

Reflections on PHP

There is striking similarity between this week’s PHP lesson and HTML. But for a few differences in the syntax structure and functions, the two seem the same in my opinion. Needless to say that while HTML is a text markup language, PHP is a back-end programming language otherwise called a server-side programming language. It is fair to say a person must necessarily understand HTML and maybe CSS before taking on PHP. I also think just like transitioning from JavaScript to jQuery, a transition from HTML to PHP will be smooth and easy to comprehend, since both programs use almost same logic in concatenating among others. I discovered in my readings that, there are two different schools of thoughts among programmers on whether a person need to learning JavaScript before PHP or PHP and then JavaScript. I find that fascinating, because for me, despite the functional similarities between the two, it doesn’t really matter which one a person learns first. I will want to know what you guys think as well. I referenced a few resources on YouTube for further clarity, but ended up stopping along the way.

Challenges

A few challenges on understanding the logic behind the For loop and While loops. Also on simple arrays, it was a bit of a struggle to comprehend the logic behind the array slice and splice.

Learn-php.org

The website seem fairly basic with lots of advertisements, which are sometimes distracting, but they do acknowledge it’s still under construction so that’s fine. After all, they are offering their services for free.

 

 

PHP

Leave a reply

For this past week’s lesson regarding learning PHP, I was initially expecting to use Codecademy, but was surprised that we were using another website — learnphp.org. I was not sure what to expect, but was happy to learn that PHP was essentially another language similar to HTML. So it started off for me as relatively simple, as most of the lessons do. However, I think that maybe I was getting accustomed to Codecademy and the interactiveness of the lessons. The lessons on learnphp.org were more difficult to understand the actions that I was doing and involved more of an attempt, attempt, look for the solution, try to make a correlation and then move forward approach.

One of the confusing things for me, or at least I know it will be confusing to execute along with other languages, is that PHP does not use carrots to open and close like HTML. Instead, it reminds me more of CSS with the semi-colons as separating elements. With the variables and types section of the lesson, it was nice to see a bit or repetition with the basic elements as a way to reinforce older lessons that were learned earlier in the semester. Specifically, the boolean values as true or false, and the strong formatting as a means to command multiple things at once. Hearing the terms over and over again was helpful because I feel that this is one of those things that you have to do everyday otherwise you forget everything you learned the day before, just like math. The arrays in the lesson plan seem easier than the ones we were learning in previous lessons because there were less of the ambiguous, or at least to me, symbols such as the curly braces, brackets, additional parenthesis, and so on. I do think that I will have to go over the lessons once again to better understand the material like I did with Codecademy before we finished our gallery assignment.

Here we go again…

Leave a reply

Week six marked the introduction to PHP, a scripting language which, on its surface, seems relatively easy to understand. But we’ve been down this road before (JavaScript, I’m looking at you), and I know better than to assume PHP will become a stress-and-error-free part of my life as it relates to web development.

In fact, while the first lessons were easy enough, I stumbled over the exercises for While Loops, Functions, and Objects. For the most part, these issues arose from syntax errors, which tells me I haven’t seen or used enough PHP to know better (do you ever just “know” this stuff?).

There was something familiar about the lesson on Objects, though: the idea of public and private functions reminded me of the local and global scope concept from Javascript. I appreciate the literal nature of this concept in PHP—you can just call something a “public function” to designate it as such, rather than relying on its placement within the code as you would have to do with JavaScript.

A note about learn-php.org: Though it’s not as pretty as Codecademy, I found the lessons easy to navigate and complete. It also serves as yet another example of the web development world’s emphasis on the free flow of information. I’ve enjoyed our little peeks into the world of web development: the importance of community in solving problems (GitHub, Stack Overflow), the “laziness” of developers (copy and paste whenever you can), the preference for simplicity. Halfway through the semester I’m now reminded of some of the takeaways from our Week 0 pre-readings. Here’s to keeping these lessons in mind as we stare down our final project in the weeks ahead.

An update on the midterm profile assignment: I found my subject, VM Vaughn, through this article on Medium. Vaughn began learning to code at the age of 56, and told me before our interview that he doesn’t consider himself to be a “real web developer.” I was anxious to talk to him about what impact his age has had on his experience learning to code, and what, exactly, a “real” web developer is, anyway. More on that later.

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…