Author Archives: Amalia Klinck-Shearman

jQuery, more like jDisaster

1 Reply

This has been a very frustrating week to say the least! While I was able to complete the jQuery Codecademy lessons before the last class, I have been unable to follow along with how to create the slide show. I felt unprepared. My current code doesn’t work, at all. I’ve spent three days trying to figure out how to do this, so I’m hoping someone can look at my jQuery/JavaScript code and help me out! I think the hardest part was finding out where to start because it wasn’t as straight forward as some of the other assignments and wasn’t part of the Codecademy lessons. That being said, I went into this assignment thinking I had a good understanding of jQuery (not JavaScript), but now I feel as confused and behind as I did when we learned JavaScript. I’m not sure what the missing pieces are that I don’t understand, but there are definitely a few. Something I kept asking myself in researching guides on creating a slideshow was if I should put the images in a list or not? Everyone seems to do it differently. The captions were there when I initially ran the code, but are now hidden. AHH!!! It was not a successful coding weekend this weekend. I’ll have to give it a try next week and hope that things start to make better sense and get easier! (And I hope next week doesn’t involve 9+ hours of work!)

Midterm: For my midterm, I will be interviewing Lauren Soni who is the Webmaster and web developer for HHMI’s research campus, Janelia Research Campus in Ashburn, Virginia. I don’t work directly with Lauren and our paths only cross during team meetings since HHMI has a webmaster and web developer for our own site. Lauren has been a web developer for about 3 years and is also in the process of completing her Master’s degree at Northwestern University Online. Through our interview, I want to learn a few things—1) learn how Lauren transitioned her career from Biomedical research to web development, 2) her advice for learning different types of code, where to practice and how to begin, 3) talk about her involvement in creating a responsive site for Janelia and other major projects.

JavaScript – Help!

1 Reply

The past two weeks, I’ve spent most of my time attempting to learn the building blocks of JavaScript and JQuery. This is by far the most difficult part of Codecademy thus far and has taken me the most time to comprehend and complete. I was able to conquer the first two lessons of Codecademy with a little difficulty; the thought process behind variables made sense. Once we began adding in Functions, strings, and loops, I started to lose the literal connection between JavaScript and a functioning website. I learn by doing and through visualizations.  In order for me to comprehend something, I have to be able to see what the end result is of something…and is the reason why science has never been my strong suit. I am hoping that in the next class, we can take a step back and look at the building blocks of JavaScript from the beginning. While I valued the time you spent teaching Java Script from the w3school code, I think I need to start from the beginning, looking at the big picture and then at each individual piece, because it all builds on each other.

In an effort to not fall behind too quickly, I found a few resources that I thought were helpful in learning more about JavaScript. You can find them linked below. I hope they are of use to the class as well! Please let me know if anyone finds any other helpful resources.

Additional JavaScript Resources:

  • HTML Dog
    • On HTML Dog, they have different lessons and pages that go through similar content that we learned on Codecademy. I appreciated how easy it was to follow along and didn’t feel as lost as I did when going through the Codecademy lessons.
  • YouTube Tutorial
    • I found it helpful to see someone else in action writing the JavaScript code and connecting it back to how it works on a website. That being said, it isn’t the most thorough video.

The second half of the week, I started working on the midterm interview by searching on LinkedIn for potential connections with web developers. Would interviewing a web developer from HHMI’s sister research campus be too close of a connection? I am nervous about this assignment. I haven’t interviewed anyone for a story since college and know that my journalism skills have fallen flat since then. I’m looking forward to the challenge and what I’ll learn from someone who has made a career out of web development.

First Coding Experience & Responsive Design

1 Reply

Responsive web design:

My current employer, The Howard Hughes Medical Institute (HHMI), is completing their two-year “responsive redesign project” of our external website. It wasn’t until 2015 that our leadership understood the important of UX design and the increasing use of smartphones as our primary web browser. Through the first reading, it explained how we need to consider not only the minimizing of a website on a computer screen, but also consider different size phone screens, tablets, etc. The width of the screen can alter the layout of the page, including the number of columns on a page, images and the content on the page. W3C created a list of media queries to help web developers when creating responsive designs.

Important concepts found throughout the readings:

  • Mobile browsers are the present and future. Web sites should be flexible enough to be able to adapt to new technology.
  • Media query: allows web developers to target certain device classes and “inspect the physical characteristics of the device rendering our work.” (from Responsive Web Design)
  • Fluid Grids
  • Flexible images
  • Viewport Meta Tag: <metaname=”viewport” content=”width=device-width, initial-scale=1.0″> (from w3schools) tells the web browser how to control/scale a webpage’s dimensions based on the scale
  • Design for a mobile application first.

Experience with coding homepage prototype:

If we are being honest, coding the homepage prototype took longer than anticipated and I have a new-found appreciation for web developers and complex websites. I can’t imagine the time and planning that would need to go into creating a webpage that is both responsive and complex. While coding for the homepage, which I created for a food blog, I ran into trouble translating some of what we learned through the Codecademy lessons to the assignment. I struggled most with the lack of being able to see in real time the effect that one small piece of code was having on my site and went into panic-mode when two lines of CSS code altered the entire feel of the site. My biggest struggle was finding ways to create exceptions to rules that I had created within the CSS code early on that affected the layout of the page once I began adding content. I couldn’t find an easy way to create rule exceptions within the code and instead found roundabout ways to add in additional lists. How can we create rule exceptions?

Secondly, what I struggled with this week was adding in an image. I spent close to two hours trying to link an image I had on my desktop to the code and have it display correctly. Eventually, I decided to choose different pictures that were already uploaded to my Facebook page and used those URLs instead. Despite searching endlessly on Google for an answer to my question, I still am unable to link an image that is on my desktop to the HTML. Does anyone have any experience or advice for how I may be able to do this?

Finally, uploading to GitHub was no easy feat. I had created a repository using the desktop app, but it wasn’t properly uploading the files I had created using Sublime. Through Google, this article and the help of my fellow classmates (thanks, Jaclyn!), I was able to upload the files successfully. The article has been bookmarked for future use.

Looking forward to creating a responsive design and using other coding languages, I’m nervous, but excited to see what I can create!

Learning a new language: HTML/CSS

Leave a reply

When I started the exercises for Codecademy, it took me back to the MySpace and AIM days when we would add in basic code, like bolding or italicizing words, into our basic profiles to make them unique. What I learned was at a different level, of course, but reminded me of the different purposes that coding could have for different audiences. I agree with what Mindy McAdams said in her post—sometimes it’s best to start to learn the fundamentals before diving into a project. While I learn by being hands on, if I were thrown into a project right now to code, I would feel overwhelmed, stuck and frustrated. By going through the exercises, I’m teaching my brain how to think and “speak” in a different language. Now, I’ll have to commit to the practice, practice, practice analogy. In continuing to read McAdams’ article, though, what is the added benefit of having a separate CSS document? Is that a personal preference or is it easier to use and read when collaborating with others? I suspect, that in general, it is cleaner and an easier way to set what a style guide is, but it could get lost.

The browser web inspector is a phenomenal tool. I’ve tried it via Google Chrome, and it’s interesting to see how Google created their webpages. Moreover, it shows how other websites, like Flickr, can embed tag upon tag upon tag to keep your images and content safe from copy/paste mechanisms and free from copyright infringement. This theme is important as I continue to think about the necessity for communicators, like journalists and those in PR, to understand the basics of HTML and CSS. We have to continue to dig deeper to find the truth and to protect what we know to be true.

While reading and completing the exercises, I had a few questions—

  • During the Codecademy exercise, it mentioned that using spaces (or the “enter” key) helps create cleaner code. Why is that the case? Should we be adding spaces as a best practices into our code? If so, where?
  • I am still having trouble understanding the difference between HTML/CSS and programming/scripting languages like JavaScript. What are the differences?

Profiles:

GitHub:

Evolution: Coding and Communication

Leave a reply

Link to Github profile: https://github.com/amaliaks

It was interesting to see the developments of the computer starting from Konrad Zuse’s first binary code computer to Hopper’s involvement in creating COBOL or moving from numbers to words to control what a computer does. In 50 years, the internet, computers and programming has advanced dramatically. From someone who has not lived without computers and internet, it’s hard to imagine a time when computers and the internet did not rule technology and everyday life. Now, we are dealing with net neutrality laws and internet equality.

As the world of journalism, news cycles, and under the current administration, it is important to constantly be rethinking our thinking. It is no longer viable to be comfortable with your current skillset, you have to evolve, change, and adapt to new technologies and be conscious of societal values. In order to be successful as a communicator, today, I think it’s an important skill to understand the world of coding for professional growth and the success of your clients. I am new to coding and it can be overwhelming to look consider learning a new language and applying that to the work that I do everyday. At the same time, I know I have to rethink the way I approach content and strategy and have a full understanding of the different coding and framework methods to be successful; I hope to get that out of this class.

I have used WordPress in the past, but have never considered the rights or why the site was created. It is another platform to be able to connect people. While posting, it’s important to keep in mind WordPress’s bill of rights or core freedoms: The freedom to run the program, for any purpose.

  • The freedom to study how the program works, and change it to make it do what you wish.
  • The freedom to redistribute.
  • The freedom to distribute copies of your modified versions to others.

Main takeaways from what distinguishes free software from nonfree software:

  • The freedom to run the program as you wish, for any purpose (freedom 0).
  • The freedom to study how the program works, and change it so it does your computing as you wish (freedom 1). Access to the source code is a precondition for this.
  • The freedom to redistribute copies so you can help your neighbor (freedom 2).
  • The freedom to distribute copies of your modified versions to others (freedom 3). By doing this you can give the whole community a chance to benefit from your changes. Access to the source code is a precondition for this.

Free software is where the world is going—collaborating to create better and more useful for users around the world.

Reading the article “Basics of UNIX Philosophy” left me with the most questions. I am lacking the context of how to apply this philosophy without being able to see it first hand.