Tag Archives: JavaScript

Learning PHP and more

Leave a reply

Getting an introduction to PHP was different, as we were both not using Codecademy, and also have the benefit of already having a JavaScript background. Being familiar with the terminology was supremely helpful, and in many ways, I preferred the simplicity of PHP. It seems that everything I need to do uses fewer characters than in JavaScript. 

However, learning on the learn-php.org forced me to go a little bit slower. There were terms and references I didn’t understand from the get-go, which turned out to be a blessing because it led me to further research. The site initially referred to PHP, Python, Ruby etc. as “MVC based web frameworks,” which I had to look up. I still don’t quite understand how the framework operates — MVC stands for Model-View-Controller — but I was able to understand in concept that the “model” is essentially the underlying information of a webpage, and the “view” is the UI (User Interface). The controller is the logic and another actionable language that interacts between the model and the view.

Another concept that I ran into and didn’t understand was the idea of “zero-based indices.” Research revealed that this concept simply means that any initial element of a sequence starts at zero instead of one. The concept is common among programming languages. The lesson also referenced Perl, which I had not heard of but quickly found out was just another programming language.

For my profile, I talked with Ryan Schneiderman who is an up-and-coming web developer who recently hand-coded a website for his father, a prominent photographer. He used several technologies that I had little prior exposure to but found very interesting. He used a Python-based web framework called Django (which is an MVC-model!) to build the site, and hosted the data-rich images on Amazon Web Services.

Because the site was very image-heavy and used a lot of sliders, he used a method to allow the page to load all the images in a slider first so that the site didn’t need to load a large image whenever a user moved to the next slide.

Schneiderman, who is a high school basketball coach, is also developing a web and mobile application for coaches to plan and design plays.

Midterm Developer Profile

Leave a reply

I recently got the chance to interview Jonathan Kvicky, a former Front-End Developer for U.S. News & World Report. John got into this field because he originally started messing with web development and programming at a very young age. He then began to do freelance and work for a number of individuals during the early days of high-school and college. He likes to think of himself as a self-taught developer in the sense that he went to college for Cognitive Psychology and Statistics degrees and not the traditional Computer Science degree.

When asked about the level of difficulty getting into web developing, John claims it is a “double-edged sword”, because it is easier since there are an unlimited amount of free resources available online to anybody who wants to start a journey in web development. There is no barrier of entry for somebody new who wants to dip their feet and start learning.  For this reason, there are an incredible number of successful developers out there who are self-taught. That being said, the field of web development is such a fast-moving field, and many new developers can feel overwhelmed quickly. The journey of learning as a web developer literally doesn’t end, and it’s because of this that many people new to the field only get so far. In the end though, if somebody really loves to both learn, and solve problems, John states that they will already have the two foundational requirements of being a great developer.

Jonathan recently got hired by PlayStation as a Senior Front-End Engineer in Los Angeles, so congrats to him! For the purpose of this profile, I will focus more on his last project at his last role. This project, code-named “Atlas,” is part of the education vertical and is essentially a rewrite of existing website architecture using a JavaScript library called React. The purpose of Atlas is to improve the overall user experience, responsiveness and performance while utilizing features on the U.S. News website. While there are a number of integral elements which encompass the development that takes place within the “Atlas” project, the main priority involves the translating of the current website architecture into hundreds of reusable React components. Once built, these serve as building blocks and can then be configured as needed to build different pages throughout areas of the U.S. News website.

The team that is focused on this project is currently comprised of a team lead, four software developers, a small Quality Assurance (QA) team, a project owner, and a scrum master. The software is JavaScript on the front-end with some Python incorporated as well. For source code management and version control, GitLab is utilized instead of GitHub. As far as the review process goes, the team works in two-week sprints to meet deadlines of set deliverables, which are discussed and estimated beforehand.

At its core, the React JavaScript library is still regular JavaScript, but it allows for faster, more efficient development, and provides a number of benefits related to performance/user experience because of how the JavaScript is rendered to the page and utilized. React was originally created by Facebook and first deployed on Facebook’s newsfeed in 2011 and became an open-source library in May of 2013. The project is under ongoing development, and there is no estimated time to “completion” because future projects and pages under the U.S. News education vertical will continue to be created using the React library for the foreseeable future.

A typical work day on this project involves doing a daily stand-up with the rest of the team to discuss where everybody currently is in the status of their sprint tickets. Tickets allow the other members of the team get an idea of what deliverables will be met by the end of the two-week sprint and also allow developers to collaborate with one another based on feedback. After the stand-up, the developers resume their work of either building components, or pages with their components, and replacing parts of the U.S. News website one section at a time. This project works together with mock-ups provided by designers in order to meet user-interface expectations. Once the code is written and completed, it is submitted to a fellow developer or the team lead for peer review and checked by design. Once approved, it is submitted to QA for testing, and then is pushed into the production pipeline phase.

The desired outcome of working on this project is to transform the different verticals of the U.S. News website, starting with Education, to utilize the React library in order to improve the user experience of the millions of visitors they receive monthly. This will allow their developers to create applications and features at a far more rapid pace. This project helps the company internally because the development cycle happens much faster and more efficiently, but also externally because it provides all U.S. News site visitors with a much preferable and performant experience while utilizing the U.S. News website and its many features and applications.

Since the Atlas team is fairly new, there are some challenges involving bringing everybody on the team up to speed with certain development concepts and practices in order for us to work efficiently together. The Atlas team is still in the process of discovering what areas of their development and production lifecycle may be improved by changing certain processes. Thus far, Jonathan says that everything has gone smoothly, and they have seen nothing but great benefits across the board.

Making sense of PHP basics

1 Reply

I was nervous about being introduced to the PHP basics after the amount of time it took me to finish the gallery assignment. Another web development ingredient thrown into the mix sounded to me like a disaster in the making. This week I tried to make more sense of the purpose of PHP and I decided to turn to metaphors. The metaphor is, “the website is the restaurant and PHP is the cook who serves up a particular dinner order made from a set of ingredients. HTML is like the food on your plate when it arrives. CSS is like the restaurant decor- the color of the plates, the placement of the lights and table clothes, the quality of the silverware and the outfit of your waiter.” I understand that PHP is a server-scripting language, but wouldn’t that mean that every website requires PHP? With this metaphor in mind for the creation of websites, you can’t have a restaurant without a cook making the food. After learning a little bit about PHP in last week’s class, I feel like it would be helpful for me to reinforce the purpose of PHP with a website and then examine the impact PHP has on that website. This will definitely be one of my questions in tomorrow’s class so stay tuned!

Another thought about PHP is that it seems awfully similar to JavaScript in some aspects. For example, the “$” and for loops. I know there are some web developers that like to do HTML, CSS, and JavaScript on one file, but how do you avoid getting confused between PHP and JavaScript especially as a beginner? Is PHP basically a version of JavaScript, but for back-end purposes? Are there websites that are robust without PHP or does PHP help make the world go round in the web development world?

Is it ever helpful for beginners to understand back-end before front-end?

I found this chart on a website defining the difference between JavaScript and PHP and I thought I’d share to help other students:

 

 

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!

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.

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.

 

$(“#iFeelBetter”).kindOf();

Leave a reply

This week’s jQuery lessons came as a relief following last week’s focus on JavaScript. jQuery solves a problem that I’m glad to learn was more universal than just my own shortcomings: the JavaScript language is bulky, the syntax is confusing, and small mistakes are easy to make.

Unfortunately, using the jQuery library doesn’t eliminate the possibility for error, but it does render errors much easier to locate and address. Hooray for jQuery!

The biggest challenge

The exercise I found most challenging had to do with the DOM. I wasn’t expecting to have such trouble with it—I understood the basics of parent-child and sibling relationships within the context of HTML—but I found that using the DOM jQuery methods to reference various elements abstracted the code to the point where I had trouble remembering what I was supposed to be doing in the first place.

I can understand how jQuery selectors are useful for referencing specific areas of code, and how jQuery actions simplify the code that would be necessary to make things perform the desired behaviors. I also understand that utilizing the parent-child HTML structure by referencing it in the JavaScript makes the code more dynamic—that is, as things within the code change, the JavaScript functions will still apply.

Yet for some reason, using the .next(), .children(), etc. methods just felt like a big riddle. Onwards to more practice, I suppose!

Fun facts

This is just nerdy, but I was really interested to learn that the common case used in JavaScript is called “camelCase.” I had noticed its structure in earlier lessons, but didn’t know anything about it. Apparently, it’s named for the shape of a camel’s humps—with each hump representing a new capital. Of course, we’ve all seen it used in cases like “iPhone and eBay.”

A side note along this nerdy grammar thread: Is anyone else frustrated with Codecademy’s consistent misuse of “it’s” when they mean “its”?

What’s next?

In addition to putting out feelers for our midterm web developer profiles, I’ve been giving some thought to what shape I want my final project to take. At Georgetown SCS, we have a number of WordPress microsites that serve specific populations. The Hoya Professional 30 and the SCS Commencement site are two examples of projects I’ve launched. There is a nascent desire among the administration to launch a student life website dedicated to events, social resources, and student groups here at SCS. I think this is a project I’d like to take on in order to test the new development skills I’ve learned. The major hurdle I’ll need to figure out is the hosting (the other microsites are hosted through Georgetown Domains, which limits the themes and add-ons you can use).

More to come!

Logic, JavaScript and some questions

Leave a reply

JavaScript proved to be simultaneously the most interesting and most challenging language yet for me. The Codecademy lessons were as good as they could be, but I certainly will need to review this language the most.  

Having struggled through logic in college, I was familiar with some of the key terminology and the concepts behind it — boolean connectors, statements, arguments, inferences and implications. I never had an opportunity to really apply those concepts except within equations. I now wonder if we should have been taught JavaScript alongside logic.

Learning how to write pseudo-code was a key takeaway for me. I know that writing pseudo-code will be immensely important not just for my own understanding but also to make sure the code is organized. For me, it’s always more important to understand the why rather than the how — I find that especially important here. I’m confident that the goal can be reached when I understand the concepts. The how will come.

There were some requirements that I found unnecessary in JavaScript that I feel I need more clarification on. Why is it that, when interpolating, you need to use the + sign? Why aren’t there more standardized ways to access your JavaScript in the HTML?

JavaScript is like muscles of the body

Leave a reply

Is it normal to be more frustrated with JavaScript than HTML and CSS? In last week’s post, I wrote about how it is not a good idea to cram Codecademy lessons into one day; so for this week, I made it a mission to split up the lessons into multiple days. By doing this, I was able to go through each JavaScript lesson slowly and figure out the topics within JavaScript that I need to review again.

At first I thought HTML and CSS were overwhelming, but JavaScript completely blows both of these languages out of the water. This past weekend, I was at an event where I somehow ended up talking about web development with a girl that chose this field as a career. The first question I could not help, but asking her was, “Is it normal to be extremely frustrated with JavaScript?” She reassured me that everything would be okay and that eventually I will gain a full understanding of this language with more practice. I remember that in one of our past classes Greg explained HTML as the structure, CSS for styling this structure, and JavaScript as the behind the scenes actions. The girl I vented about my JavaScript confusions described HTML as the skeleton, CSS as the skin, and JavaScript as the muscles.

The way I like to think about it is JavaScript is the muscles and it communicates with the body in complexing ways. I think I got scared about JavaScript when the ‘Introduction to JavaScript’ Codecademy lessons began talking about math operators. I know that the lesson claims that math does not need to be a strong-suit to learn this language, but I think I’m still confused about the connection between math operators and the affect it has on a web page. Stay tuned for a question asked about this in class!

In addition, I really enjoyed the if/then statements of JavaScript. Although I wasn’t able to write them fluently, I can at least say that I was able to understand the syntax errors I was making in the exercises. I thought it was cool to see the if/then statements make cool additions to a web page that are “behind-the-scenes.” I am hoping to eventually become stronger in this language and I’m sure it will happen over time.