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 WordPress.org) 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.

Building my PHP Session Handler

My homework recently consisted of building my session handler, which confused me greatly – what on earth is session handler? At first glance, I wondered why would one use session handler? How is different from, say, calling the method by $session->getData()? Took me a while, but I finally got a working code that I have now recorded on Github, and I got some basic idea on What, How, and Why.

Note that this is really a blog where I store my notes for future references and to type out information so my mind can wrap around things. There is a lot of “typing whatever comes to mind” and cherry-picking only things that interest me. If you somehow wandered here looking for organized info on Session Handler, I suggest the tutorial on Sitepoint, which is way more organized and correct.

What is Session Handler: Like its name, it handles session. When a session starts, such as via session_start(), data are stored in $_SESSION with a configuration file php.ini, or at least that is my impression of how it works. Using those information and configuration settings, the handler manages database storage. Its basic, possible use includes opening database, reading the database and outputting the data, writing to the database with the values gain from $_SESSION, destroying selected data from database, performing garbage collect in the database, and closing the database.

How to do a Session Handler:

Class Session {   // Or whatever you name it as.

// I am using the constructor in PHP 5 style. Do not misspell it as constructor. Certain someone spent a whole night wonder what is wrong with her constrictor because of it…

function __construct() {

// The build-in function below “sets the user-level session storage functions” (via php.net), which pretty much means that it designates when the methods in this Class is invoked. Yes, the methods are invoked automatically basing on the condition! Most of the time anyway. Do not misplace the order of the arrays, or your function will be invoke in the wrong condition.

// Placing it inside the session class constructor is optional. However, placing it outside the class would mean you would type it out each time the class is invoked, plus “$this” will be change to the name of the object created by the Class, which is just annoyingly repetitive.

session_set_save_handler(   

array($this, ‘open’),    // 2nd parameter’s name is personal preference, but pick something easy to understand. ‘Open’ is pretty standard.

array($this, ‘close’),

array($this, ‘read’),

array($this, ‘write’),

array($this, ‘destroy’),

array($this, ‘gc’)

);

session_start();   // though not required, it’s good idea to place session_start() her so you don’t to invoke every time you create an Object with this class.

}

function open() {

// Invoke condition: whenever session is starting, such as when session_start() is used.

// Typical content: call to database.

}

function close() {

// Invoke condition: after write() was called or when session_write_close() is called.

// Typical content: close database.

}

function read($sessionId) {   // all method’s parameter seems to be optional. Each method’s first parameter calls the value from $session_id(). You as the coder don’t have to do anything other than call the Class (or session_start() if it is not in the Class’s constructor. See, this is why its good to put session_start in the constructor) unless you want to change the default session id. You should not have to type read(1234) or something like that.

// Invoke condition: whenever session starts or when session_start is called() – but after open().

// Typical content: what you want to display from the database.

}

function write($sessionId, $data) {   // like read(), $sessionId will call the value from $session_start(), while $data will call the value from $_SESSION[‘data’]. Again, you don’t have to do anything other than calling the class unless you want to change the default value. I change the $data in my handler to take in the input value, but I did it by reassigning the value in $_SESSION[data] outside of the class ($_SESSION[‘data’] = $_POST[‘something’]) and not by $data = something.

// Invoke condition: whenever the PHP shuts down or when session_write_close() is called, but after the output stream is closed. close() is executed after this.

// Typical content: writing to database. Note that $_SESSION[‘data’] is automatically serialized. This means you have do some unserializing and serializing, plus you have to make sure to prevent SQL injection. In my own code, I:
(1) Copy the serialized session $_SESSION in a different variable, $original.
(2) Unserialized $_SESSION. Note that after PHP 5.3, using unserialize() on a SimpleXML_Load_String() will result in an error message, which is what will happen with $_SESSION. Use session_decode() instead.
(3) Store the unserialized content in a variable $output, then real_escape_string() it to prevent SQL injection.
(4) Restore $_SESSION with the variable containing the serialized session ($_SESSION = $original).
There are other methods, but this is the quickest one I can understand – I am working on a deadline after all.

}

function destroy($sessionId) {

// Invoke condition: whenever the session is destroy, either via session_destroy() or with session_regenerate_id() set to parameter TRUE.

// Typical content: what happens if a session is destroy. In my case, I set my codes to do a session_destroy if a submit button “Logout” is press (AKA, check if a $_POST[‘logout’] exist, if so, call session_destroy() ). When the destroy() is invoked as a result of that, it remove the entry in my database associated with the current session id.

}

function gc($lifetime) {   // $lifetime calls the value store in session.gc_maxlifetime.

// Invoke condition: called periodically by PHP, with the frequency based by session.gc_probability and session.gc_divisor.

// Typical content: what happens if a session is garbage collected. In my case, in my construct(), I set the session.gc_maxlifetime to 15 minutes. My database contains a column, ‘time’, that stores the time the entry was first written. When gc() is invoked, if any rows have a ‘time’ cell older than 15 minutes ago, the row is removed from the database. In another word, a user is automatically logged out after 15 minutes with its session id and data removed.

}

Why use Session Handler: It is probably because it (1) reduces the amount of coding when you store session repetitively and (2) sets a lot of automation.

When I first started building the code and my constructor wasn’t working, I placed session_start() outside of the class. I also attempted to invoke the methods manually:

$session = class Session();

session_start();

$session ->open();

$session -> read();

$session -> close();

That is a lot of code to be typed each time you invoke a session class. With the session handler, all the methods are invoked automatically when conditions are met. Even the parameters, like $sessionId, $data, and $lifetime that I mentioned earlier, are automatically set. Coder can change them by change the values in $_SESSION[] or session.gc_maxlifetime, but it’s pretty automatic.

Arduino: Day One

Earlier last year, I attended an Noisebrige workshop to build TV-B-Gone, presented by its own inventor Mitch Altman. The workshop teaches attendees about Arduino, how to solder the Arduino clone kit Diavolino, and how to get the kit working. The presenter ran out of time. While I got my board soldered, I did not get to do much. After that, I got swamped with school work and never got to work further on it. I hope to do more this summer. So here is my record for the day!

To start with, to learned Arduino, most people would first have an Arduino board. As mentioned, the workshop I went to offered a slightly different but compatible board known as Diavolino, which is by Evil Mad Scientist (I kid you not. That’s the name. The design is as mad as a the name too! Quoting their blog “…it has flames.”!)

Since I am no longer at the workshop, I need some sort of FTDI Interface/USB communications cable to connect the board to my computer. I decided to follow the recommendation of Evil Mad Scientist and went with FTDI Friends. With this little friend, all I need is a regular USB cable, used by most camera and mp3 player I owned, in order to connect my board to my Mac!

So for today, what I did:

  • Read Chapter 1-3 of Arduino Workshop by John Boxall.
  • Unearthed my soldered Diavolino, FTDI Friend, USB B cable from the back of my cabinet. Connect the device.
  • Downloaded the new Arduino IDE.
  • Set the board type as “Arduino Duemilanove or Diecimila” (Both the blog and store website mentioned Diavolino has the form factor of Duemilanove), which automatically sets the processor as “ATmega328”.
  • Since I am using FTDI on Mac, I needed to download a “VCP Driver“, aka Virtual COM port, which “cause the USB device to appear as an additional COM port available to the PC”.

Tomorrow I will connect the actual device to my Macbook, then I will deal with which serial port to select in the Arduino IDE.

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!

Final Presentation

“Ah, I was wondering who changed the page at midnight!”

“Yea… That was me.”

Final Presentation day. Always leave such fond memories, like solving a code problem at 12th in midnight…

So, updates!

For final, I fixed the link for the mailbox subscription box that was originally linked to a testing account instead of client account.

Most importantly, per client’s requirement from our previous meeting, I added in a floating social media bar instead of having it located at the footer!
When I started on the site, I was surprised that my original social media footer was missing. Reading my inbox for any last minute email updates, it seemed that due to some miscommunication, one of my teammate that typically worked on another portion of the project tried to work with the social media section, though she was unsuccessful.
The main problem is probably because developers can’t place codes just anywhere they want in Squarespace, especially if they want their codes to persist throughout all the pages. There are typically 3 locations.

  1. In-page code block: You can place code in most location of a page that way. However, to persist through all pages instead of just one, the code block needs to be in the footer.
  2. Custom CSS page: Access by “Design”.
  3. Code Injection page: Access by “Settings” => “Advanced”. Useful for non-css coding such as html, script, etc. As indicated in the page, it holds jurisdiction over: Header, Footer, Lock Page, and Order Confirmation Page.

My codes previously had been placed mostly in the footer as in-page code blocks since I initially wanted to use the build-in social media features. The floating social media bar should be located at the top of the page, but the only place where in-page code block become persistent though all the pages instead of one is the footer at the bottom. Firstly, I need the bar outside of the footer div. Secondly, scattering invisible code blocks in the page is not exactly clean-code practice. It is even more confusing to place codes that are meant for the top of the page in the footer! I want the page to be maintainable by future developer, too.

In the end, I moved my codes over to Custom CSS and Code Injection – Header. The floating part was actually pretty easy. I just used position:fixed. I then used margin-top to place it below the header, since I didn’t want the bar to overlap the header. I turned on opacity, since I would have no idea what the floating objects would overlap as user scrolls through the page. I then upped its z-index so that even when it overlap, it still stays on top.

Most of the work was nudging the icons and background so it wouldn’t do anything funky like a really wide padding on one side or icons overlapping each other.

Thanks to our Visual Media team recommendation, I replaced my pixelated icons with Font Awesome‘s icon (which was truly awesome, pun intended). Font Awesome have its own code to make their icon stacked vertically. I played around with the placement of their tags for a while to make the best stacking, then I adjusted the margin and padding for the icons and bar. Success!

Digital Action Hub: Social Media Floating Bar

Fedora: Testing Testing

Ok, so today is the first day I am exploring Fedora GNOME after my installation during the Open Source event. Being a Linux student who was also studying my reading, I decided to run some of the command in my reading and compare it for the fun. Besides, that way I know which directory path exist in Linux but not in Mac.
Note that reading of the read was runlevel and subsystem, and that it will probably take me three tries before I understand the reading…:
Fedora
Macbook
pwd
/home/amychan331
/Users/amychan
ps
PID:1915 TTY:pts/0 TIME:00:00:00 CMD:bash
PID:2401 TTY:pts/0 TIME:00:00:00 CMD:ps
PID:784 TTY:ttys000 TIME:00:00:02 CMD:-bash
ps -u root | wc -l
86
61
ps -e | grep ‘d$’ | wc -l
33
73
who -r
run-level 5
. run-level 3
/sbin/runlevel
N 5
No such file or directory
/sbin/service —status-all
netconsole module not loaded
Configured devices: lo enp0s3
Currently active devices: lo enp0s3
The VirtualBox Additions are not currently running.
Checking for VBoxService …not running.
No such file or directory
cd /etc/rc.d
Blank. I am in!
No such file or directory
ls rc?.d/*rsyslog
ls rc2.d/S*{network,sshd}
No such file or directory
N/A
grep chkconfig /etc/init.d/rsyslog
No such file or directory
No such file or directory
  • Their home directory is different, as expected.
  • What on earth is “-bash” in ps?
  • I found it interesting that Fedora is running more ps than its local sister.
  • Runlevel is 5 for Fedora and 3 for Mac. Let see… my text says that Fedora being means 5 it starts the window manager, X Window. *Nods* Makes sense. It is the VM. Running /sbin/runlevel in Mac returns a “No such file or directory” error message, but then Mac is not Linux after all. who -r, however, does work. It returns 3, which means that… full multi-user mode, but interface is text-only. Hmm… text-only? Not sure what that mean. I will have to look it up later.
  • Fedora has less than half of running daemons than Mac, as expected.
  • Running an inquiry about subsystems status in Fedora returned text, mostly about systems that are not running. Mac, once again, returns “No such file or directory”.
  • Once we start to get into rsyslog, error keeps popping up. We have the rc.d directory in Fedora, but the naming system inside rc.d directories is probably different.

Of course, all this observation was made without any regards as to what version I am on! The notes my teacher give was for Redhat 6.5, and here I am comparing it to Fedora and Mac OS. Still, it was fun to do. Once I am not so busy with my classes (full course this semester), I would like to research the corresponding commands and file path in Fedora. For now though, I am mostly playing around to see what is in common and what is not.

Open Source Comes to Campus @ CCSF and my first GNOME in Mac Installation

The first time I know that I was using open source was when I first got my Macbook, which did not had Microsoft Word. Mac MS at the time was more expensive than the PC MS. So… I downloaded OpenOffice instead. The second time was when Adobe Creative stop working for the new Mac OS – less than a year after I brought it. Instead of relying on a product that was clearly unreliable, I downloaded GIMP. It’s been 7 years, and I have never look back.

When I learned about the Open Source event coming to CCSF from my friends on Facebook, my reply was “That sounds fun! I am in!”.

Besides, there is free breakfast and lunch. What college students says no?

The talk started with explaining what open source is and showing logos of known open source projects. The presenter, Asheesh, joked that the logo was “Probably the most things people remember about Openhatch” as he waved the penguin(?) sticker. Mental nod here – I know the penguin before I know OpenHatch.

He went onto introducing ways to contribute. One of the ways for new coders was simply to point out issues. The presenter then went on to Issue Trackers and communication methods. When he opens the IRC program window.. wow, instant flashback! It was a chat room, and I haven’t been to those since middle school.

I went in the workshop expecting talks about programming, but instead the first demo was a chat room. It was very telling about how open source works. One of the greatest difference open source has with private companies, from what I experienced in this workshop, was its sense of community despite diverse locations of its members. A company strives to find the ideal personality in the same location, whereas open source  projects is about those who can find them on the virtual realm and is offer their time and dedication.

After some laughs about the chats (the people in the chat room realized quickly a class was going on. Silly conversation and jokes ensued), we moved to some Github work. While I have been using git and Github to record the status of my self-studies and side projects, I have never had the chance to collaborate there. It was the first time I forked and the first time I pulled an updated project. I found it pretty awesome to see how, when the project was merge and my submission contained “Fixed #5”, the issue #5 that I fixed would close on its own.

After that, the mentor went around the tables to talk about their open source experiences. We heard stories of how it begins, what they learned, and what got them there. The first person talked about the importance of knowing how computer works, not just the language. One talked about his love of the open community. Another talked about how program vulnerability has a ripple effect on private companies that uses open source technology. The final person talked about how open source can solve real life problems. Their stories varies, but they have this in common: in some ways, programming and open source has changed their life.

Then, it is the last session – projects! The mentors summarized their projects and then find an area to stand so we can, as a mentor joked, “flock” over to them. I debated on my choices. In the end, I decided to went with one where two mentors teamed up to talk about Ubuntu technology and creating new OS. The idea of creating OS is just too cool to miss!

The interface and customization of GNOME was beautiful to watch. I enjoyed the discussions behind the creation and community teamwork of GNOME, and how it interacts with and affects third party distributors like Ubunta and the two other OS. They showed us various projects and widgets that could use some help. In the end, I installed GNOME via Fedora and VirtualBox on my Macbook for the first time. It was ridiculously easy after the agonizing experience I had with installing VM on our school computer for my Linux Admin class, though the later was probably so complex because they want us to know the steps and details. Plus, I don’t have to worry about remote access for this one!

This is purely about exploring the various features of the system, which I can’t wait! Contributing to the GNOME can be simple as just exploring and pointing out bugs. For those who are more advanced in their programming skills, they can help with solving existing issues. The mentors recommended wiki.gnome.org/GnomeLove for those whom wanted to learn more. For now though, I am probably just going to try the OS out and see what happens!