Tag Archives: GitHub

Setting up for success

1 Reply

Much of my weekend was spent getting the pieces together to be sure my site will come together well. I’ve been going back through old stories, pulling together photos and videos, and making sure the relevant metadata comes with the content (things like dates and captions).

I’ve been rediscovering WordPress too — the plethora of themes, plugins and possibilities are exciting. It’s getting me geared up to do my own site, yes, but think about how these tools could be useful in the professional world too. Many nonprofits I’ve worked at need help with this sort of thing!

This is all to say I don’t feel overwhelmed with all the tools and technologies we’re trying to pull together to actually make this thing — FileZilla, WordPress, GitHub, Sublime Text, MAMP…the list goes on! But of course, my biggest anxiety comes from actually building these plugins. I’m constantly worried that whatever I start to build and enter granular commits for will end up not working in the end.

I feel fortunate I have some friends who have web development experience I can bounce ideas off of and take advice from. And that my classmates seem to be going through the same anxieties!

Attempting CSS

Leave a reply

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.

Talk is cheap. Show me the code.

Leave a reply

Although this week has been filled with a lot of hard work, I believe that, through the projects, I was able to learn a lot of valuable information. There is a saying that the only way to become a good programmer is a great amount of practice. Thus, I like the fact that this field of study does not demand too much theory, but it requires practice to consolidate acquired knowledge.

The main assignments for this week were Codecademy’s lessons and prototype homepage on GitHub (using Sublime Text). The first one allowed me to gain the basic understanding of the direction I should take my GitHub project. The second platform has taught me how to play with the code. The homepage project itself was interesting, but I felt a bit unsatisfied, because the weekly lessons did not teach me much about the visual side of an HTML document, i.e. the CSS. As I was able to learn, even experienced programmers do not have everything memorized, which is entirely not the point. The art of programming consists also of the ability to utilize research and search for knowledge on the web. Moreover, learning from one’s mistakes is the most effective way to gain knowledge. Thus, by seeing my work “change” on the Google Chrome browser, I was able to tell if there is something wrong in my code or if I need to make other corrections in order to improve readability.

To conclude, I feel like I made a lot of progress in my programming studies. However, I will be going back to some lessons on Codecademy or Khan Academy, so that I won’t lose the progress I’ve already made. I believe that learning everything at once is not a solution. There is also a need for systematic work on developing programming skills, not coding from project to project, once a month or several months.

Coming together

Leave a reply

This week for me represented a big step forward. I was quite nervous to build a prototype homepage from scratch — I was pretty sure I was unprepared to hand-code a full webpage. The assignments for this week ended up taking me more time than I anticipated and that — combined with starting a new job and some light procrastination — pushed me past the deadline.

But however long the work took me to do, in all the work ended up not being as difficult as I feared. My fingers started to type the correct tags with ease and my page slowly but surely came together. The lessons taught some important new information, especially styling conventions, that for the first time for me felt as if they were logical extensions of what we’ve already been learning.

It did take me a little while to figure out an ideal workflow when actually using Sublime Text in conjunction with GitHub. I found myself working past where I should have entered a commit, and therefore felt I had to cut out some code, make a commit, and re-enter it in Sublime Text and make another commit. I also wanted to check my page before a commit, so I ended up writing some code, popping it into a browser, refining it, and then committing. Just logistically, it’s a lot of jumping around on a laptop screen, so once or twice I got a bit lost between different windows on my laptop.

I also started to get a sense for how I should use CSS — I can see how a separate style.css page would be almost required for a larger page. But for our purposes for this assignment, using inline CSS between <style> tags felt more natural and easier to manipulate.

 

Welcome to my MySpace

Leave a reply

Good Design(?)

Well, I made my first “homepage” using HTML and CSS, and I have to admit I was immediately transported back to my parents house in the early 2000s. I never used MySpace, but I loved Xanga, a blog-based social site that allowed users to edit their own code. I spent hours researching the correct HTML for important things such as:

  • Background music that played when a user visited the site
  • Cursor options that transformed the mouse into small animals and objects (there was likely malware associated with this)
  • Font colors and styles, etc.

I imagine for many students my age, this was the first experience with HTML they had. What struck me the most in this week’s homepage repo assignment was how complex a simple, elegant web page must be behind the scenes. Yes, it was relatively straightforward to change my font to Comic Sans and add a gif of Neil Degrasse Tyson. However, those notably beautiful webpages (Atelier AM, American Documentary, and others here) must have been painstakingly designed to be beautiful on a range of devices.

CSS Stylesheet

I decided to link an external stylesheet to my HTML file, rather than use inline CSS stylings. The Codecademy exercises on CSS made me appreciate how quickly CSS styles can accumulate, and how much more organized it felt to have them all in one place. (Though I will admit I wished Codecademy had hinted to alphabetize the styles for ease of use—which seems like a no-brainer best practice.)

I struggled for a while figuring out how to link my stylesheet to my HTML file, and finally realized it was a combination of incorrect href syntax AND incorrect CSS syntax, so that even if the files were linked, the changes weren’t appearing in my test browser window.

After a few episodes of trial and error, I was ready to give up on the separate stylesheet and just add in-line CSS styles, but I knew that for my final project I would want them to be separate, and I would be better figuring it out now rather than later. I’m glad I did.

A note about GitHub:

I can appreciate the utility of a tool like GitHub to manage the uncountable tiny changes and bug fixes/additions to code. The mechanism of committing changes is simple enough to understand, but I’m concerned that the more changes you commit, the harder the code is to actually read. It takes practice, I guess…

The world, at my fingertips

Leave a reply

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. 

Baby steps towards the Final Project

1 Reply

Readings:

I’ve had some experience working with software developers and implementation specialists who have explained the benefits of an API. When I worked at Oracle as a Human Capital Management Account Representative, our selling point was Oracle’s open-API standard, or the fact that our applications could talk to virtually anything. In completing the readings from Free Code Camp and WordPress, I was able to get a better understanding of how APIs are used outside of the enterprise software sphere and are used every day by people like you and me. In the past, I’ve heard about REST APIs, but I don’t understand their importance? How would using a REST API on our WordPress site be beneficial to our page? Or, how would this practically translate to our final project?

Update on Final Project:

I’ve finally started working on my final project. It’s been intimidating to say the least. I’ve done all of my work on my local server and haven’t attempted to move anything to the Filezilla application. Should I be actively syncing these two together?

I’ve separately created a CSS file of tweaks that I want to make, but how do I incorporate this into the existing code? Should I create a separate CSS file within my child-theme and have it run last?

My biggest concern is updating the plugins that I wanted to incorporate. How do we do this? Is there a ‘how-to’ document that you’ve found particularly useful online that we should try to follow?

Additional overarching questions:

  • If we are adding HTML, CSS, PHP, etc. to our WordPress site, do we create separate files for these? Where should we be updating the code?

As the final project approaches, I’m realizing how much more time I need to dedicate to the project. I’m starting to think that my final pitch post may have been over ambitious…only time will tell.

APIs and Building My First Plugin

1 Reply

I had heard of APIs before taking this class, but this week’s readings and videos did a good job of breaking down this complex topic. The kitchen analogy used in the “What is an API?” video was helpful in terms of understanding how an API works as a messenger that communicates user requests and delivers responses back to the user. I recently booked a flight using the online travel service Kayak, and did not think about the fact that Kayak was using airline APIs to find me flights based on the parameters I defined. Kayak accesses the airline APIs and aggregates information from them based on user requests.

I also tried out one of the examples provided in the video about REST APIs. I typed the sample URL into my search bar and tweaked it for my hometown of Mendon, Massachusetts, which resulted in a page written in JSON that allowed me to access the GPS coordinates for my hometown (latitude: 42.1056525, longitude: -71.5522859). I then went to the main Google Maps site and entered these coordinates, and was taken directly to the center of my hometown on the map. I will have to do a bit more research on the topic of APIs in order to more fully understand how the concepts can be applied to WordPress. I imagine that APIs are probably used in a lot of plugins that access data from outside websites, such as those that pull in data from Twitter or Instagram feeds.

I spent this weekend working on the modifications for my WordPress site. As I mentioned in last week’s blog post, I was able to create my child theme and activate it on my local site, but I still have to play around with the fonts and colors of the site. I plan to do that towards the end of my project, once all of my other modifications are complete. One specific question I had regarding editing the styles.css file for my child theme is, how do you edit the fonts if your parent theme uses the Font Awesome toolkit? For example, I tried changing the font for my site header, but it is not working, and I’m thinking it’s due to the fact that my parent theme uses Font Awesome and thus has multiple CSS files. How do I change the fonts in this case? 

I also decided to tackle the custom post type modification by building a custom post type plugin. I was able to write the code for this plugin using these instructions, but ran into a lot of issues on the way to getting it to work. For example, when I tried to activate the plugin from my wp-admin panel on my local site, I kept getting the following error:

Parse error: syntax error, unexpected ” => array(‘ (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’ in /Applications/MAMP/htdocs/finalproject/wp-content/plugins/therunningglover-run-post-plugin/therunningglover-run-post-plugin.php on line 18

I could not for the life of me figure out what the issue on line 18 was, and so back to Google I went. Luckily, the Stack Overflow gods were there to help out, and I figured out that I had forgotten a single quote (‘) on line 18 of my plugin code. I fixed the issue, refreshed the page, and the plugin was activated. However, the custom post type was still not appearing in my admin panel, and so I decided to go back to square one and rewrite my code using the steps listed on the WordPress codex. I got it to work within five minutes. Lesson learned — use the WordPress codex first. I now have a custom post type on my left admin panel called “Run.” Now I’m working on adding a custom metabox called “Run Details” with metadata (custom fields). One question I have is, how do I get my custom post type posts to show up on the home page of my site, rather than just under the Blog page?

This coming week, I want to download a plugin for Strava and see how I can use it to pull in information about my most recent running routes onto the sidebar of my site. When modifying the code of an existing plugin, do we need to create a “child plugin” (if that is such a thing)? I will also attempt to build a lightbox slideshow to display some of my photographs, but may end up using a plugin for this. I’m also planning to load some of my files using the FTP client later this week, to ensure everything is working correctly on my hosted site. I’m feeling a bit overwhelmed at all that I have to do in the next week-and-a-half, and am hoping that I can at least get three quarters of my proposed modifications done before the final project deadline.

Regarding GitHub, should I only be syncing files that I’m coding myself? For example, the plugins that I downloaded and added to my page from WP also synced to my final project GitHub repo. Should I remove the code for these plugins from my final project repo since these are not something I coded myself? If so, what is the best way to do this?

Word Press and PHP Drama

1 Reply

This week I spent most of my time re-reading through the WordPress readings and thinking about what I should be doing for my final project. Because I hope to be able to build on what I create for the final project, I want to make sure that this is something I can keep up with and that the theme I choose has enough flexibility to fit different types of content (i.e. recipes, reviews, about me, etc.). What I was able to come up with you can find in my updated Final Pitch post, but to give you a synopsis, I want to create a website that is focused on food, but also gives my audience/readers a glimpse into my life and who I am. I want to feature things about myself, what I’m interested in and what I’m doing in hopes to be able to connect with others like me.

What I took away from the readings was the complexity of WordPress. It is not as straightforward or easy as it seems. There are levels of complexity that are giving me a little anxiety knowing we have to navigate WordPress to create the site. On the other hand, as stated in my last post, being able to use a platform like WordPress also gives us a safety net to rely on, which I really appreciate.

For my PHP code assignment, I added a comment box where site visitors could input their name, email address, and comment. I explain in my code, that the comments will all be replied to individually and thus the email address is needed. I want to be able to incorporate this into my final project as a customization. I also want to be able to incorporate liking the content because I think user engagement is most important. That being said, the PHP code assignment was not as easy as I thought it would be. While this might be my favorite code-type we’ve learned thus far, in practice, PHP can be difficult. At first, I was having trouble echoing the different boxes I had created. I Googled my way through it, but I’m hoping to be able to learn it on my own in the future.

Questions:

  • For the next class, will be going through how to create the repository for our final project in GitHub?
  • Will you walk us through how to install WordPress on our hosting service (like GoDaddy)?

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!