Course Progress for C++ & WP

So far for C++, I have successfully churn through 1/3 of C++ Primer by Stanley B. Lippman in a month (It’s a really, really thick book. If it wasn’t softcover, you can probably knock someone out with it.). It is quite the intense reading – very detail but clear in its explanation. I can see why several Amazon reviews raved about it being an excellent book but emphasizes that it is not a beginner book (Seriously, do not read this if you have never touched OOP). Despite having skipped Intro to C++, I am doing fine in class as a result. I am so glad I am such a fast reading bookworm!

WordPress/Drupal have so much more assigned reading than any of my other programming classes! I literally read through 4 chapters of the textbook (Professional WordPress: Design and Development by Brad Williams, David Damstra, Hal Stern) in a week, plus 2 web pages in WordPress documentation about Core and Loop. I thought my brain was going to fried – who knows there is so much about WordPress? Core, content, admin, include, etc, etc.

Doing some extra self-challenge added some… challenge, to the class as well. I decided to run the whole LAMP stack natively when I got my new Macbook last year. I did had MAMP in my old Macbook, which was indeed a convenient program, but I was taking Linux when I got my new Mac and I was getting more and more interested in OS. Running my own LAMP, with all the troubleshooting and exploring sounded fun.

As a result, several error message came up with my second class assignment, and here is the notes about the problems I got to solved!

1) WordPress was asking for connection information when I try to update and upload the class’s assigned Underscore theme. At first, I just manually updated WP and upload the theme. Then I got asked again after trying to install plugin too, so I decided to look up for some better solution. After some research, I learned that I need to change WordPress’s filesystem method so it stops using FTP, so I added this in the wp-config.php:

/** Change filesystem method when localhost */
if ($_SERVER[‘REMOTE_ADDR’] == ‘’||’::1′) {
define(‘FS_METHOD’, ‘direct’);

Just define(‘FS_METHOD’, ‘direct’) also works, but I thought I would add an if statement to check if the file is in localhost, I don’t have to worry about removing the line if I need to move the page from development to production mode.

Note that ‘’ is the localhost ip for IPv4 system, while ‘::1’ is for IPv6. Including both allow the code to go into both system. For my Macbook, the code do not work if ‘::1’ is not included.

2) I got permission error, which was not fix by chmod 775 or 777. In that case, I thought it may be an chown issue instead of chmod. I looked up which user is localhost apache running as for in Mac OS, and the user turned out to be _www (MAMP users may have a different user). So I did chown -R _www wordpress. Now everything works.


Winter Break Activities, 2015-16

So far, during this break I have:

  • Went to Japan with my family (Hooray!)
  • Started to volunteer for a non-profit that help local youth by teaching tech named Bayview Boom. Currently I am just discussing how to organize the page with the director, who is also a developer. Should be a good experience that we will let me both learn from a working developer and use my skills in front-end (the webpage is switching from Yola to for a good, local cause.
  • Reading through the HTML & CSS3 For The Real World by Alexis Goldstein, Louis Lazaris, Estelle Weyl.
  • Reading through the C++ Primer by by Stanley B. Lippman, Josee Lajoie, Barbara E. Moo. I am taking CCSF’s C++ Fundamentals coming semester, even though I have never taken the C++  intro class! I had, however, taken the Java intro class, whose professor emphasized that if we took the Java intro, we should take the C++ intro. I hope he is right, but I am going to make sure that I am well-prepare.
  • Reading articles and books on mobile responsive design.
  • Random reading about random programming subject.
  • Tried Eclipse to do C++. Can’t do Ctrl C and Ctrl D, which is part of the book exercises. Prefers and went back to command line.
  • Added to my PHP class project from last semester. During last semester, I already finish the basic functions for the login, inventory, and cart page. I want to finish the shop and about page during break.

Coming semester:

  • I am taking 3 classes: Programming Fundamentals: C++, WordPress & Drupal CMS Development, Linux Administration Projects.
  • Be more active with Meetup.
  • Continue volunteering at Rebuilding Together in data entry, phone screening, Cantonese interpretation, and Traditional Chinese translation.
  • Start volunteering at Bayview Boom with their website. Seems like it will focus on WordPress plugin and related codes. My WordPress class in CCSF starts just at the right semester!
  • In progress of inquiring about a possible web/media internship with a non-profit. No email reply yet.
  • For the PHP class project, finished the home and product page. If possible, include an event page.
  • Add my current work to my portfolio page. Everything is just on Github now, which only have the code, not the images.
  • Really want to learn C so I can program my Pebble Watch, but that may be too heavy of a work load this semester with the C++ class.
  • I would complete all the Linux courses in CCSF. Should I take the Redhat exam even though my aim is front-end? I have enjoyed the classes very much. I should look more into that…
  • Speaking of which, I should work on changing my Nexus tablet’s OS to Linux. Totally forgot about that!
  • And last but not least, look for a job or internship.

Finally Done!

The semester is finally over. I am quite satisfied with my web development class project this time. By the time final presentation is over, there are only few glitches – mostly personal pet-peeves – that needs to be fixed:

  • The floating social media bar uses margin top spacing in order to avoid overlapping itself on the header. With a static measurement like pixel, the spacing between floating bar (which stays fixed) and header (which changes) is not consistent when transferring to different screens. I cannot directly inject a code block below the header because only code block WITHIN the header and footer will appear on all pages with Squarespace. I would have to ask the client to manually inject a code block every time a new page is created. Um… not a good suggestion.
  • Social media bar sizes are not responsive.
  • Since Squarespace templates has multiple section blocks for users to insert text and personalized code blocks, the empty sections creates awkward spacing, particularly at footer where there is a large blank spacing below the contact info. It doesn’t help that I have to inject JS code block in the footer and hide it in the pages.
  • Squarespace is dependent on Javascript and upgraded browsers. It does not degrade gracefully or even throw up an error message.

So even though the class itself and project requirements are done, I instill want to work on it. Now that I am not taking 4 CS classes at the same time (never, never take both MySQL and Linux Administration at the same time while taking 4 classes at CCSF. You will die, painfully, several times during the course), I went on ahead and started fixing those little glitches:

I removed the margin top spacings. Instead, in the header code section, I linked the page to jQuery. Then I inspected the site’s source code for the header tag, which turned out to be an id instead of the <header> tag that I expected (no wonder my coding for the header didn’t work earlier!). I then appended div id for my social media bar to the header using insertAfter – all while the codes are all still within the header, The bar will now remain 0px below the header no matter what screen and what page!

For the footer issues, I started by making sure all the footer codes I want are within one single well-named id. I moved them to Squarespace’s Code Injection page (The path is: Setting => Advanced => Code Injection => Footer), so the code is not creating additional in-page code block. Then, once again, I started dissecting the template code. There appear to a div for the mobile ‘back to top’ – ok, I want my contact info beneath that.
By experimenting with inserting my footer div id in various Squarespace tag, it seems “.footer-inner” is the best one to insert my footer div id before. I decided to cluster the footer’s insertBefore codes with the social media bar’s insertAfter in one document.ready function in the header. Test. So far, so good.
The large spacing at the bottom is still here though, but the previous footer testing also gives me a sense of what tag is responsible for which section. “.footer-inner” seems to be the key here. In the Custom CSS page, I play with the padding and margin a bit a bit to make sure the spacing of the footer top and bottom looks proportionate… ok, spacing issue solved!

Now, while checking on the mobile, I realized another issue – the Mailchimp subscription box in the home page is not responsive! The code provided by the company sets a static width. In mobile, it does not shrink, and get cut off rather abruptly instead. Easy fix here. Max-width. Good to go! Next!

Next part is probably the hardest task. True, it was easy to throw up an error bar informing users that their Javascript is not enabled by using noscript – I even made the bar floating and orange by using fixed position and z-index (apparently, the template’s front image hides the background color. Here I was, struggling trying to find out why a simple background-color does not work. All I needed was z-index. *sighs*.). The problem is browser incompatibility. While I can use JS’s UserAgent to detect browser, it turns out that browser sniffing is a unreliable way to detect browser. There is always a way to detect via object capability by testing if a vide can be shown – but that’s for testing if the browser is HTML5 friendly. Thankfully, it is easy enough to test for IE, but Squarespace, annoyingly, is not compatible with various version of Safari, Chrome, and Firefox. So I will be going off to info research for that. Plus, I also want to the width of the social media bar responsive… but it be difficult to click on a mobile screen then, wouldn’t it? Damn, I can’t make the bar thinner then… There goes that idea.

Any how, I have now uploaded all my code on Github. My first repo there for an actual project, instead of book exercises or Project Euler. I feel strangely very satisfied!

Wiking Upstart during Linux homework reading. Wiki is awesome!

In my current Linux Admin class, the professor is trying to adjust his notes to the new Redhat 7 standard. One of the biggest confusion is Upstart and Systemd. He write his own notes for us, and he has good writing and teaching skills, but to go back and change everything… it is not a job I envy. For students, it’s hard enough to remember which term and system is for 6 (the old version), and which one is for 7. Just now, I found myself googling Upstart for the Nth time trying to remember if it’s 6 or 7 (6, Amy, 6).

Interestingly, I noticed a wiki page this time and opened it. I found the article quite informative for my curious side. Turns out Upstart also replaced another init daemon, much like systemd that is now replacing Upstart itself (Which, now that I think about it, duh. Considering the numerous version of Redhat and even more numerous version of Unix?  Just one init daemon? Nah.) It was replace and improved the previously traditional init process, so that computer can respond to events asynchronously instead of synchronously. It was first included in Ubuntu 6.10 release and replaced sysvinit. It is used in Chrome OS (wait, does that mean my Nexus tablet uses it?) , was considered by Debian (who eventually went with systemd), and replaced sysvinit in Fedora 9 then was replaced by systemd in Fedora 15.

Hmm, I don’t think I will get Upstart and systemd confuse now. Although, on a totally irrelevant note, why is Upstart the only one to get capitalized?

I clearly needs more coffee.

SquareSpace: Day One

So, for my Web Development class, we formed a team (in my case, of three people) to helped a real-life client with the assistance from students in the Visual Media Design department. My client wanted to maintain it using SquareSpace, so my team will be working with this platform. We just got the admin account. So I did a quick look over, and here was my notes:
  • Things pop-up and/or expand everywhere I mouse move to and whenever I click a button by accident. Too much going on. *SquareSpace suddenly expands full screen* Stop Moving!
  • *Explore the site for about ten more minutes and finally starting to get used to the flow*
  • … so:
  • They have a pre-made event page that will allow visit to import the events via either Google Calender or ICS. No Google Plugin necessary. You can make it a list or the google-like square boxes, except it look much more smooth and modern:


  • To insert more fonts (which my team may do depending on what the graphic students decides), we can go to Design -> Advanced, and add in a Typekit kit ID.
  • Our client may be able to accept credit payment via a an account on Stripe. She has somewhat of a complex system going on because she’s link to another, larger non-profit. We probably have to check it out with her later.

Tiny Itsy Changes on my Homework

This is what the teacher provided as sample for our homework, which is to use array in PHP and print out a table of selected background and text color:


This is what I ended up doing:phpHwBAesthetic doesn’t play into grading, but I prefer the cell separate by space instead of black border, and with the limited text, it almost look like a card game! It was just a basic homework assignment, but a little change can make it more fun.