Tag Archives: HTML

Title X

Working on my final project has been interesting. I was able to work through most things and make sure I got the assignment done. Once I was done, I wanted to make the site live. I tried everything and I was able to do it. My local site was working normally, but when I tried to run the live site, my CSS was not showing. I think the issue is with my database but I can not figure out where exactly the problem is. Greg and I tried to work through it but still it was not working. I moved the files from local to the live on FileZilla but when I ran the site, still nothing was showing up. As a next step, Greg suggested I get a new domain and host. I got a new one and logged into the new site on FileZilla then I moved the files from the local to the live. When I tried to run my domain, nothing was showing up. I compared the two files (local and live) and they matched but on the browser it was not showing up. I am going to work on this a little more to try and run the file. I am not sure where things went wrong but I know that I mistakenly deleted the file and when retrieved it, something was messed up.

As I think about where we are right now, I feel very grateful to have taken this class. I am not sure if I am going to continue in this field of work. I might in the future, but for the time being I am happy I got exposed to such tremendous information. I am able to understand the basic codes on a minimal level and get around when it comes to inspecting a site or understanding web development.

I do not need to code things at my current job, but sometimes I need to update the website and need basic knowledge of the back end of the site. For example, I need to update the website with new information of an upcoming event. The site is made up in a way that I need to embed the image of the event into the body. I do so by sourcing the text and embedding the code of the image into the text. The body of the text is HTML and I need to know where to put the code. I was comfortable handling such task because of my experience from this class. I am excited of what the future has to bring no matter what next steps I take.

WordPress and making stuff (sort-of) work in PHP

The work we did in WordPress during class last week was very informative and I’m glad we’ve learned about child themes and plugins. I’m excited to try and create my own plugin now. Sometimes this stuff seems like magic. I was blown away at how, by simply adding a couple folders and files, a new plugin just appeared.

When getting to the PHP assignment, I felt ill-equipped, frankly. Coming off of spring break, after having just a couple weeks of lessons I had to revisit a lot of material. I used plenty of YouTube videos, forums and such to help out, but I felt like I was making small mistakes along the way.

I realized I still have fundamental questions that need answering. How does the computer understand my functions? Should my PHP files be on a server for them to work correctly? Why is it that in Sublime Text, what I know to be accurate PHP functions don’t show up in a colored text? That last one caused me a lot of anxiety!

I also didn’t know what else to add to my homepage in PHP to add useful functionality, so I resorted to just adding basic things that would (I hope) satisfy the requirements of the assignment. The only thing I added that I could see myself keeping in a final version is a contact submit form.

Developer Profile: Ryan Schneiderman

Ryan Schneiderman is the younger brother of a good friend of mine, Jason. They’re both developers — Jason works at Bloomberg and develops applications for the Bloomberg Terminal, a key piece of technology that traders, banks, and financial institutions worldwide use to get information on the price of a stock, for example, as fast as technologically possible. Though Jason doesn’t really use any of the technologies we’ve been exposed to in this class, he suggested Ryan would be a good choice.

Ryan graduated from Tufts University with a computer science degree last year and has been working as a freelance web developer since then. He recently finished a complete website for his father, a successful photographer in Vermont.

The first stage was architecting the overall project. He wanted to figure out what backend framework to use. Schneiderman eventually went with Django, which is a high-level Python web framework, mostly because he saw that a lot on job applications and assumed it was one of the more marketable backend architectures to learn. It turned out to be a really good framework to use for the website.

The first step after deciding to use it was to research a bunch of tutorials on how to use it, and then started to get simple “Hello World” pages working. He used Amazon Web Services to host the website. It was an early major hurdle, Schneiderman said, to know that he could host a Django application on AWS and then, from that point forward, it was just a matter of writing code.

The first thing he tried to do was just to display one of his dad’s images on a page with nothing else, just an image by itself on the front page. That in itself contacted all of the different parts of the application, from the database, to the view which queries the database and sending that information to the front end.

“I remember when I did that it was like the first  ‘eureka’ moment,” Schneiderman said.

A lot of the early process was troubleshooting. it was a lot of Stack Overflow, Googling, some YouTube videos. Every step of the way Schneiderman said he gained a little better understanding of what’s going on, then chunking away, getting a breakthrough, and hitting another obstacle.  Learning a new language or framework is a lot of small little victories that contribute to a greater understanding along the way.

“It was more a mental hurdle than anything else, just to stay the course and keep chipping away,” he said.

To design the prototype for what he wanted the site to look like, Schneiderman just used pen and paper just to figure out the aesthetic, the organization, what he wanted to have on each page.

As for giving his non-programmer father ability to use the site, Schneiderman said Django allows for a templated admin page that’s attached to the website. It’s basically an interface for the database, so you can upload images.

Django comes with a decent template structure to interface with the database from a user perspective. So that was actually one of the things that Schneiderman felt very fortunate to have chosen Django because otherwise he likely would have had to build an application that his dad could use to upload.

Most of the communication and collaboration between Schneiderman and his dad was on the functionality of the front end, which ended up being mostly HTML, CSS and JavaScript, including some React.

React is a JavaScript framework that allows for updated and state-based JavaScript. So for example, you can have constant rendering of different content that doesn’t require completely reloading the page.

On Schneiderman’s website there is a gallery that displays cascading images, and then when you click on the images, it enlarges it and then will take you to a separate page. And what you can do on the page is click on arrows that act as a slideshow and it gets you to different images. That function of moving through the images meant he had to reload the page every time.

But when he built the same slideshow on React, it was basically instantaneous. The tradeoff was that in order to do it, the page had to load more content up-front. So when the page is first loaded, all the images that you could possibly click on are already loaded, which takes a little longer.

This is as opposed to having one image on the page, then clicking through and sending a request to the backend to get a different image, so it was definitely worth it.

“If you’re planning on implementing anything dynamic on the front end, I would highly recommend looking into React,” Schneiderman said.

There was a lot of JavaScript, mostly interacting with dynamic content. For example, some images are vertical or horizontal, different sizes and proportions. When the page was loaded, Schneiderman wanted certain styling to be as a function of what the sizing of the image would be and of whether the image would be matted or framed.

With Django, there are certain tags where you can access content from the backend in the front end without having to do really complicated queries.

“It’s literally curly brace, percentage sign, and then whatever you named your image in the backend. Very simple,” he said.

Schneiderman recommended using YouTube videos to gain a high-level understanding of a new framework, and StackOverflow to get more granular. Google is also useful, but it’s key to use precise vernacular.

If he was to do the same project again, he likely would have used Bootstrap, which is a powerful HTML, CSS and JavaScript library Schneiderman wanted to use to simplify his CSS. Schneiderman styled the site by hand, and regrets not knowing about Bootstrap before.

Schneiderman, who coaches a middle school basketball team on the side, is now developing an app that helps basketball coaches and players facilitate the team building process. The app is within a website that can diagram and animate the plays. This way, players are able to study and learn plays more effectively and more academically, because the only time players are learning a play is in practice.

PHP is friendly to learn

PHP was a lot of fun to learn and I really enjoyed it. I did, however, find the logic behind it a little bit redundant. I had to go over the code multiple times to understand the logic. I ended up copying the code from the top into the exercises most of the time and running it in order to see how it comes out and why. The language is also aesthetically ugly and has a slow speed. Most recently, however, there have been many changes to PHP and a tremendous speed gain. Generally speaking, PHP is an easy language to learn and tutorials are very common and often quite good, so I was not sure why I had a hard time with it.

I was curious to learn why software developers used PHP so I started reading more about it. Many developers like it, but others really do not. The language is mostly used on the server side, so it runs on the web server software. The name PHP initially stood for Personal Home Page and then later it changed to Hypertext Preprocessor.

You can do anything with PHP including blogs, scripts to process data, writing desktop applications, etc. The bottom line with this particular language is that PHP is everywhere, so a lot of extremely popular software is written in using it. WordPress is the biggest example that uses PHP. It is low cost and accepted globally, so you can use it in all website development. It also supports a wide range of databases.

It is important to note that it is super easy to change PHP to HTML. You would simply have to convert .html to .php and tweak the inside of the code a little bit to include <?php and ?> in the body. PHP is definitely evolving in many different ways since it is that widely used. It is becoming more Java-like object-oriented language. The most important language to compare PHP to is JavaScript. In modern development, we need a little bit of JavaScript for client-side development.

I want to take some time to explore WordPress and see how PHP is utilized there. I have never worked with WordPress before so this is a great opportunity to put the two together in order to understand the bigger picture. I am going to start using Drupal more often so I want to see how PHP is used there as well.

 

JavaScript & jQuery: Challenge Accepted

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!

Gallery

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.  

.showMe more

This week, we had the chance to learn and code using jQuery. It has changed the way people write JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML documentation, event handling, and CSS much simpler. What I found hard about learning jQuery is learning all the handlers and figuring the order of the code. For the upcoming days, I need to watch more videos and re-emphasize the knowledge in my mind.

I did a mistake while doing the chapters this week. I did the interactive lessons, then the quizzes for all the chapters and then I went back to do the freeform projects for each chapter. The issue was that I got the concepts all confused and when I tried to do the freeform projects I became confused with all the information and the concepts I had learnt. For the future, I am going to do each chapter fully and separately from one another and I am going to do all the parts of the chapter at the same time and not in pieces so that I apply whatever concepts I learnt immediately. This will help me build one new information in a more organized way.

Logic, JavaScript and some questions

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?

Attempting CSS

For this week’s lessons on Codecademy, I felt more lost and behind than the previous week. It was definitely noticeable the difference in pace, since the lesson had just picked up from where it had left off the week prior. Particularly, I was having issues with CSS, I think primarily because that concept of language is literally something I have never seen before. I know I will have to backtrack and redo the lessons in order to understand how to execute it. Additionally, when I was on GitHub, I felt like I was back in time trying to customize my MySpace account, which was nostalgically hilarious since my HTML skills have only gotten worse since then. I was using GitHub the website version, and the main issue I had was to figure out how to implement CSS on my repository. To be honest, I did not figure it out and looking back my only guess would be that this is something I need to do on the GitHub desktop version.

For the reading, the Inspect and Edit Styles article started off with a screenshot of an inspected element. Even after reading the article from top to bottom twice, I am still slightly confused with elements it discussed, such as examine and edit box model parameters. Personally, all this type of information and learning is completely different than I am used to. I was hoping to challenge myself by taking this class and I think that already by the second week I can feel it. The verbiage that discusses HTML and CSS is very particular and is throwing me off more than anything. I just think that it is dense, and have to constantly look up words and their reference on Google is slowing me down more than I originally anticipated.

Cause and effect panels greatly helped my understanding

Those multi-panel windows in Codecademy are honestly a genius and elegant way to show how what you do to the underlying code affects the displayed webpage. After learning a few basic tags and following the lesson instructions, it was interesting to toy around and go off-script to see how things changed. Only once or twice were the instructions difficult for me to follow and I had to use the hints.

It speaks to the economy of HTML that you can only know how to use no more than a dozen tags and be relatively well-equipped. With some basic research I found that there are only about 250 HTML tags that anyone would ever really need to know — this makes me more confident that learning this language will be a lot easier than I originally anticipated.

It was also revealing (and strangely powerful) to use the inspector tool. The example in the “Meet your web inspector” showed how it was easy to download a picture that the site perhaps wanted to prevent (obviously you could also screenshot anything). Not to skirt the ethical boundaries of the technology, but I did experiment with the tool a bit… I used the web inspector to delete a site overlay on The Boston Globe website when the paywall hit, but the site didn’t load any part of the article. The inspector did come in handy on the Wall Street Journal site, which will load the lede and second paragraph, but obscures the second paragraph making it hard to read. Using the inspector though, you can easily read the first two paragraphs within the HTML. I suspect that with more poorly-designed paywalls, simply deleting the paywall pop-up could reveal an entire article. Or we could all just start paying for subscriptions to newspapers…but I digress.