Tag Archives: web development

I Can’t Believe I Built A Website

Woohoo! The final project is done! I am really proud of how mine turned out and I have been showing everyone what I’ve done. Professor Sturgis, who was especially enthusiastic about this course, was excited to see everything I had learned. Currently, my portfolio has been updated to meet the requirements for another class’ final.

Overall, I really enjoyed this class and learned a lot. I feel like I have expanded my thinking about computer systems and technology in general. I took to this course to learn more about the basics of “coding” and I feel I have accomplished that goal! It has been a lot of fun testing out code. It’s an incredible feeling when something I wrote actually works.

During the syllabus week at the very beginning of this class, I was scared. I actually considered dropping this course because it seemed like too much work. Now we are at week 13 and I can’t believe I have completed all the assignments — including the website!

Honestly, modifying the website wasn’t too hard once I had all the proper foundations set up. I think the hardest parts were setting up the child theme, setting up the local host, setting up NameCheap, and then setting up FileZilla. After everything was squared away all I had to do was plug and chug! After all, the final project wasn’t so daunting.

p.s. I got that margin to work on my homepage 🙂

Getting Back in Order

After what was a tumultuous couple of weeks for me, personally and academically, I am starting to feel like I’m getting back into a productive groove. With scheduling and organizing it feels good to feel at least somewhat on top of my work.

So I’ve truly begun the process of starting to find modifications that I would be interested in applying to my final project. The contact form example that we worked on was very interesting me, although it may seem like a basic part of an e-portfolio, it helped narrow the scope to things that I deemed to be practical. I’m thinking maybe leaving a comments box on the page could be a plausible idea. Hopefully I can come up with a few more ideas to solidify my modifications and then from there I can put them and motion and get my web portfolio up and running.

The readings this week were informative. I was confused watching the API video, but the article helped to break down the term piece by piece. This is a modification I could see wanting to put on my website. The possibility of being able to schedule an interview or something else through the website could prove to be useful.

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.

Midterm Szn

This week was dedicated to finishing our midterm assignment, which turned out to be a bit of week off. Coming off of last week, where most of my classmates and I were confused, it was nice to research on something a little different. For me, I was able to focus on a project that combined my love of law, and the very intriguing things I am learning in this class. It was quite enjoyable to see these things mix. Along with seeing this, it sparked my interest to see if I could find different law schools that had similar design teams in their schools. It was one of the best aspects that came from the project that has opened my eyes to more things available. This school year has started to pick up and I am already feeling the pressure. While this class is a bit difficult, it is a change of pace compared to my other classes. While it has to deal with aspects of journalism, that is not its complete focus. It is an opportunity to engage in something new — almost foreign — and it helps end my weeks. The challenge is also something to look forward too, since I am not hearing the same jargon like in the rest of my classes. Having to find my own solutions to issues rather than just explaining it or convincing someone of an argument is something I enjoy about the class. The middle of the semester is almost here, time to buckle down and finish the semester off strong.

Getting Over the Mid-Semester Hump

The midterms are in. The gallery assignment was rough and left my confidence a little shaken.

However, writing the midterm restored a little confidence in my ability to get into development. My subject, Diana O. Eromosele, had a journalism background but switched careers (for the second time) after noticing that the journalism world was changing and there might be no room for her.

Her confidence and determination made it seem like a real possibility to get into that field, or at least learn some more basics. She used her coding skills to build an application that categorizes politicians and influencers’ tweets by issue. Because of her unique perspective, she was able to create a tool that was helpful to change a social atmosphere.

Just imagine what kinds of things we could be building if we had diversity of thought in that white male-dominated field. I don’t know what I thought web development was before, but I had it all wrong. I never realized the power in knowing what’s “working underneath the hood,” as Eromosele put it.

If an urban girl from New York City with a liberal arts background can do it, so can this New Orleans girl. I want to leverage that power, not only in journalism but in social change. I don’t know how yet, but I just know I feel like the wool has been pulled over my eyes for far too long.

I’ve also been using the principles I’ve learned in this class in my everyday life, especially the DRY principle. I’ve found countless ways to automate the things I’m doing and it’s been very helpful in this stage of my college career. I’m a senior with e-board positions/campus involvement, an editor of the newspaper and I’m taking 17 credits, on top of being out of town multiple weekends throughout the year. It’s been vital to create processes that make my jobs easier. Thinking like a web developer has been my saving grace this semester.

The jig is up.

Oh, JavaScript. The most popular programming language.

With HTML and CSS, I felt comfortable. I thought I’d be able to conquer anything. Everything was a breeze. Coding wasn’t that bad, after all.

Until it was.

I felt like I was in math class all over again. I was reliving my worst nightmare. The last two lessons almost defeated me. But just like math class, I realized that I just had to practice to prevail.

At first, I was really confused as to what JavaScript did. Why were we adding numbers and doing true/false equations? What was all the craze? Could I not do these things with my calculator? I slowly began to realize that the adding and subtracting, were just the foundation for larger functions, like creating widgets, games and apps. And just like in math class, if you mess up the basics, the whole equation will come tumbling down. Needless to say, I’ll be revisiting the lessons.

The hardest thing for me was remembering the syntax and all of the necessary elements of a function. After Tuesday’s online class, though, I was reassured in knowing that no one fully memorizes everything in JavaScript. I’ll just have to make a (or find) cheat sheet.

Another thing that baffled me in the Codecademy lessons, specifically, was that the system would sometimes return a syntax error, but I’d still get a check in the box. I found myself restarting the lessons over and over, trying to note the differences between what I typed and what Codecademy wanted.

One good thing, though, is that I fully understand what jQuery is used for. I think whoever wrote that library is brilliant. I also think that I will eventually be able to fully grasp JavaScript. It’s just a matter of time and practice. As I reflect now, I realize that I wasn’t struggling as much as I thought I was. It was a lot of material, but nothing I can’t handle.

The world, at my fingertips

Let me just start with a confession: I spent way too much time playing around with the web inspector and changing people’s website photos to pictures of dogs. The web inspector has to be my favorite part of this week’s lesson. Aside from thinking about how useful it’d be in planning out my next pranks, I enjoyed the web inspector tool because of its potential usefulness as a learning tool.

While I was playing around with the code to make changes that I thought were funny, I also had a chance to identify the different elements making up the html code for the websites. I was able to recognize most elements from the Codecademy lessons. I noticed, though, that there were a lot more things I hadn’t yet gotten to. I feel like I have a good grasp of what I’ve learned, which is progress on an ever-changing road ahead.

I also liked how useful the features on Github were for building on a code. Though I didn’t fully understand the intro exercise when I was doing it, after further examination and meditation, I recognized how useful the branch system is to the user. GitHub is essentially a social media network for web developers. Pretty cool if you ask me.

The Codecademy exercises showed me that learning to code is not impossible. I immediately recognized that there would be a lot of information, but I was prepared this time (I already had a Codecademy account because I tried to learn before). I took notes to create a reference list of tags and what they do. Now, I know that learning to code is just like learning any other skill. When you really take the time out to learn and practice it, it’s not so bad.  I’m excited to see what I can learn how to do next. 

The WebMD of Web Development

This exercise was not as terrible as I thought it would be. For the first time in seven weeks I can say thank you to Codecademy for leaving me with a boat as I did the homework. As always there was a necessary assist from W3Schools, the paddle, but I was not completely in the dark this week.

That being said, I have to thank W3Schools for explaining how to connect my PHP file to the HTML page. I looked back at my notes, and reflected on our class, and realized that the explanation from Greg was the only one we had to go on.

Now there was some confusion, which showed up when I sent my repository. Every now and then Googling the answers feels like looking to WebMD for a health diagnosis and falling down a rabbit hole. Since Codecademy gave no instructions, I looked to W3Schools. They helped me get some of the code but showed several different ways of connecting and referencing the PHP and getting it to do things. Naturally, I chose one that did not do what I thought it did. This explanation, among the four others available, seemed to make the most sense though. Well now it’s been fixed and the code does what it should.

I am definitely happy to be moving on to editing code instead of writing it from scratch. I am narrowing down the themes and am ready to adjust the child theme to be what I need it to be. I’m also excited to see my dad’s reaction, hopefully a happy one, when the site is done. I am not excited for the many more bottomless pits that Google and W3Schools will be dropping me in. Yes, trial and error are all part of it, but doctors tell patients to avoid WebMD, we seem to be doing the opposite.

Oh well. C’est la vie.

Midterm Q and A: Matt Callahan

Matt Callahan is an Art Director at The Washington Post. I sat down with him recently to talk about how he has used his work in the design department to modernize The Post digitally, and use different approaches with big stories. Matt has recently worked on pieces about the Galapagos, the slow death of the electric guitar, and an interactive approach to the National Parks’s 100th anniversary.

Some of the answers have been shortened for both length and clarity.

Would you describe yourself as a coder, art director, or journalist? Or a mix of them all?

I’d describe myself as an art director foremost. My greatest strength I find is conceptualizing ideas and finding the most effective manner of communicating an idea. What I find most exciting about web development is being able to carry out these ideas and concepts in new and different ways. Furthermore, you get to communicate with people with an immediacy that is unlike print. You can reach them on their phone, computer, tablet and do it all instantaneously.

When did you start coding?

My first class in computer programming was in high school in 2007. I took a course in C++ as a misguided attempt to learn Photoshop (the person I knew who was most skilled in Photoshop had just taken that class, so…). That said I didn’t use coding in any real capacity outside of class or personal websites until I worked at The Post — end of 2014.

What’s more important, good storytelling skills or coding skills, when taking on a custom project?

Good storytelling skills are imminently more important. You can always pick up the actual programmatic skills. Understanding how animation works and what function it provides, versus images, versus video versus audio is something you can learn from watching and listening, but it is hard and takes practice. If you understand how it works you can communicate ideas and work with others to help create an overall vision. If you just understand the tools you’re at the mercy of someone else’s idea.

 What’s the most valuable thing you know when it comes to coding?

Sketches and rapid prototyping. Never get too near and dear to your first idea or version. Honestly, don’t spend much time working on it — do a sketch with pencil. Envision it. Think how someone will approach it. Then do a quick wireframe. Then an unstyled HTML doc. Don’t worry about how it actually looks until it works right — because people actually need to read it and use it. Otherwise it’s design for the sake of design — which is neither functional nor useful.

Let’s move on to more specific projects you’ve worked on recently. Which enterprise template were you most proud of?

The Marine story was probably one of the pieces I’m most proud of. It was an opportunity to explore so many different modes of storytelling all within the same story. I was able to be so close to the project because I was brought in just as the story was being rewritten. I had almost-daily meetings with the reporter, John Cox. We talked about what shape the story was taking — and he understood that I cared about telling this story every bit as much as he did. When the reporters know that you care and how much you care, you can have conversations and arguments, discussions, and it’s okay because you’re all playing for the same team.

With the Galapagos template, how long did that take to construct?

The Galapagos story was probably about two months or longer in total planning time. Though not all of that time was spent actively working on it, and it wasn’t my only project (I was designing travel on a weekly basis as well). Most of the time was spent trying to just get our heads around what this story would be. Then some time on how to conceptualize how to tell this story — whether it would be map based or story based, and how to navigate from video to video. Later we ran into the technical limitations of 360 video, which included probably a week of just last minute bug squashing and changing out a video player just a few days before publication.

And finally, were you surprised that the national park “find your park” interactives were so popular?

Certainly — though gratified might be a better word. This one in particular was a very long term project. We started brainstorming ideas for this at the end of 2015 and it didn’t run until summer 2016. We’ve talked about it since and we could and Alexa, Nicole and I don’t remember who came up with the idea of checking in or logging which parks you’ve been to, but we all loved the idea — especially because national park lovers are very devoted and very passionate. This was also great fun because I got to help shape the length of content and what type of content we wanted alongside Nicole, which made it a truly great experience.

Takeaways: Talking to Matt was really helpful. He’s someone I’ve seen in the newsroom, and he always has his computer open with JavaScript. It was really exciting to learn that a lot of the mold-breaking stories The Post has done involve his handiwork. He had a really cool approach to web development as well. Like he mentioned, attention to storytelling and the end goal are paramount, and you can learn the code along the way.

Web development sounds hard. But if you do it right it can be easy.

If someone told me, a former history major, that I would be enrolled in a web development class I would laugh at you. Then I would log off Twitter, because the trolls shouldn’t get you down. But… here I am. Ready to learn.

This week’s reading was a helpful collection of foundational texts for the class. Since I am starting out with no programming skills whatsoever it is helpful to read about how a lot of platforms aim to be as simplistic as possible.

The idea of simplicity not only as an esthetic but as a mindset was also discussed in Greg’s blog posts. Oftentimes journalists can get bogged down and not see the big picture. Thinking pragmatically and putting effort into making sure you’re being as effective as possible is an important mantra to have at the beginning of this class. I’m sure there will be a lot of bells and whistles that can be added to things, but remembering to stay in a minimalistic mind frame will be important for the class.

It also serves the actions of reporting as well. Sometimes I can get thrown into a tailspin looking for the perfect kicker, or spending an inordinate amount of time on things that a reader doesn’t care about. Getting out of my head and making sure that I’m working smart, and not hard, is an important lesson.

I also really enjoyed the basic primers of how the internet came about, and how it functions. It’s really easy to forget all the channels things have to go through to ping back and forth, and having a healthy sense of how things came to be from a historical and, well, factual standpoint can only help. When learning about a whole new field, a solid foundation of how we got to where we are today is important.

Overall, this coming semester looks like it will have challenges, but web development is a very exciting thing to dive into. After all, I use the internet for 95 percent of my job, so understanding how it works, and how we strive to make it simple is a good starting place.

GitHub profile: https://github.com/savvylee11