Project Euler is getting easier!

For the last 2 days, I have been catching up on PHP OOP via PHP Objects, Patterns, and Practice. I figure a change of pace is good – I need to do some problem-solving!!!

Quickest way to find things to do is Project Euler. I have solved Problem 1 and 2 before in Project Euler in different language. The most memorable one were the time I used Bash scripting (It really isn’t a language for math, I know, but I want to try!).

This time is by far the quickest I have done it. I don’t know if it just because I more used to programming now, or if PHP is just that much easier.

I also found that combing Project Euler with PHP Cookbook was very helpful in learning the PHP built-in functions. I read the problem and started browsing through the Cookbook for possible functions that I can experiment with. I was able to significantly reduce my code length. For example, in my previous coding for one of the Fibonacci sequence problem, I had used multiple enclosing loops to refer back to the last two number and sum them together. This time, I used prev() and end() to point to the last two number of the array and sum them together – in one loop. I also experimented with array_filter to replace one of the foreach loop. I found it to much more concise.

My code is so much shorter and easier to read! Is it strange that I am getting the sort of feeling that one would get after cleaning their room!

Website planning 06/01/2015

Notes for website:

Need to create a portfolio image tile generator.

  1. Create a directory: largeTile
  2. Create a function that generate table with cell number based on number of image in largeTile.
  3. Generate the image with link. Variable $imgName.
  4. When hover in desktop/laptop, image becomes translucent with title stated.
  5. When tap in mobile, insert title above image within the table.

How to catalog?

  • Bookmarks image on top. Acts a navigator.
  • Clicked/Tap: Remove all cell holding images in according to bookmark selected.
    • Each cell has its own name.
    • Clicking the table means the whole page reloads.
  • Or, I can pre-catalog by directories beforehand. In normal view, the generator crawls through all sub-directories. In selected view, it crawls through only the sub-directories with name of bookmark.
  • Would need a flag. $bookmarked.

Summer 2015 To-Do List

Overall To-Do

  • Experimented with Fedora
  • Learn Anduino and finish the setup for TV-B-Gone
  • Brush up on my IT network knowledge.
  • Learn C.
  • Work on my portfolio website.

Current To-Do

  • Finished the code that was started in today’s meetup.
  • In my website, create a new page for code portfolio. Currently, I only have a placeholder for my architecture design portfolio.

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.

So many Cs…

I thought it may be good idea to learn a low-level language during my summer break, but wow, there are so many different language that start with C! Why so many? It was slightly confusing. Fortunately, I was reading A Practical Guide to Fedora and Red Hat Enterprise Linux, which has a short but informative section on C!

  • C: developed by Dennis Ritchie, who modified B language developed by Ken Thompson whom wanted a machine-independent language (Yes, before C, there was B. However, there is no A.). It was developed to create a portable language and thus touted as “portable assembler.” Overall, it is created to be a machine-independent, portable, system language for the Unix operation system.
  • C++: developed by Bjarne Stroustrup, whom created it as object-oriented language based on C. My other research, though, had shown numerous discussion about how C and C++ are different, and that learning one does not make learning the other easier, at least not if you already know other programming languages. One of my favorite Open Source program, OpenOffice, is written in C++!
  •  Objective-C: wrote the first Web browser! A quick Wiki shows that it was mainly developed by Brad Cox and Tom Love, and that “it is the main programming language used by Apple for the OS X and iOS”. It is an object-oriented language based on C with the addition of Smalltalk-style messaging to aid reusability in software design and programming.
  • C#: This was not mentioned in the book, so I Wiki, whom says that C# “…is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Heilsberg.” On the Microsoft Developer Network, it is indicated that C# is “designed for building a variety of applications that run on the .NET Framework.

Since my goal this summer is to improve my understanding of computer system (Fedora!), I think I can now designate learning C as my personnel summer homework!

Final Fixes, or So I Hope. Feature Testing on Squarespace.

After a lot of Google and referring to my jQuery book (so glad that I got Beginning JavaScript and CSS Development with jQuery), I think the website I worked on is now successfully outputting error message for incompatible browser and lacking Javascript. To clarify issues involve, I would have to talk about the platform that my recent project website was built on: Squarespace.

Squarespace is fun for non-tech people to build their website on, especially since it boost its own CMS system with a drag-and-drop user experience. However, it also means customization via coding is limited, as documented by my previous post. In this post though, I am going to write about my experience with its browser compatibility, which is also extremely limited.

This poses a major problem: our client’s organization is a non-profit that target non-tech user. How many of them have an updated browser? More over, I found articles mentioning how Squarespace goes complete haywired in Android phones!

After an entire day (and night!) of research of which HTML/JS/DOM features are compatible with which browsers, my guess is that the issues lies in the platform’s drag-and-drop feature. Drag-and-drop, however common it seems nowadays, is a recent development even as a HTML5 features. At first, when I read Squarespace’s Supported Browser page, I am not sure how they came up with the version numbers:

Squarespace Supported BrowserAfter my research accompany by coffee and too many open browser, I realized that their version numbers matches drop-and-drop’s browser compatibility chart in w3schools. Ah, so that’s what that was about.

Talk about real-life demonstration of why feature testing is praised whenever I look up on browser testing, instead of the easier, no-research-needed User Agent testing. To summarized of the various article opened in my browsers, User Agent relied on information given by the client browser, which can be change by the client user. It is, therefore, susceptible to spoofing. In addition, Squarespace only shows 4 browsers in its chart. Opera, for example, is not listed. It’s why I took the time to look up on feature testing – totally worth it!

Currently, to solve the problem, I am using Modernizr. While Squarespace comes with its own Modernizr preloaded – no additional src code needed – after some tweaking, I realized its Modernizr has various problems. Most importantly, one of the testing, Modernizr.draganddrop, did not work! My guess is that Squarespace either used an outdated version or customized it and decided the dropanddrop testing was unnecessary. *Sigh*. In the end, I found a CDN that Modernizr recommended (CDNJS) and src link it instead. Now the code works.

Prior to that, I also used noscript and “if lte IE 8” tag to test for 1) if JS is enabled 2) if IE browser is 8 or higher. In all 3 testings, I made it so that a fixed, orange bar (website color theme is black and orange) would float on top, warning users that they will not get full viewing experience with disabled JS or outdated browser. That way, users can still access the website, but they would know what’s going on.

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

Mailchimp, Lightbox, and Gallery in Squarespace

It started with creating a subscription button that would appear on footer for each page. Traditional subscription boxes are the not prettiest. Our client’s site is minimalistic, and she has very few content as a new organization. With few text and the client wanting a visual-based website, I decided that a button is the way to go. It is harder than I though, since pinpointing which area has which tag can be confusing on Squarespace. I would need to find the tag to apply the javascript effect, after all. This is further complicated by the fact that I wanted to create a lightbox, not a window pop-up. In this day and age, a lot of site would block a pop-up. Since the target audience is not tech-savvy, I don’t want them to think the button malfunction because they don’t know how to turn off the pop-up blocker or, worst, think our site is going to pop-up a spam site.

As a result, I decided my task for the weekend: there will be three social media button at the footer. They are the Facebook Page, Twitter account, and Mailchimp subscription. Here is some issues I came across and my resolution:

  • Twitter icon issues: Squarespace has its own build-in Twitter social media button. That’s cool. Except it shrinks and change hover color with the other 2 icon.
  • Facebook icon issues: I initially used the Squarespace build-in to plugin image instead of straight coding. As a result, it took a while to find a the tag so I can apply the hover effect. Then when loading, it load slower than the other 2 icon.
  • Mailchimp icon issues: First, there is the lightbox codes. Oh the codes…. everything looks right, so why the hell does it not work!? The lightbox embed code works fine by itself. The onclick function looks right. When I use alert to bug-check, the alert pop-up correctly. So what’s going on? Secondly, I used a mail envelope for the icon image. Everyone on my team thought I was making an email icon. Oops.
  • For overall PNG: I had both spacing and image resolution issues. Two of the icons was initally plugged in via Squarespace. So, each of the icon buttons are in a small block themselves. When the window shrinks, aka goes to mobile view, the buttons stacked up vertically! In addition, the buttons shows a clear resoution differences because they are all placed there differently. They also shrink differently, loads and shows hover in different speed. The images plug in via the Squarespace image option even looks blank for the first seconds!
  • Resolutions: In end, I gave up on using Squarespace plugin. Sometimes the old fashion way is better. I simply code everything in – storing the images by opening a gallery page on Squarespace, inserting img src and a href in html, creating hover effect and centering as one div in css, and using javascript for the lightbox. So much cleaner! For the lightbox, turns out mailchimp has a evil pop up mode, and I need to code that in to get the lightbox up. Thank you to СанЁк Баглай on stackoverflow!

I feel so happy now ~

Hacking EDU Training Day

What’s with Hackathon, loud music, and monochrome t-shirts freebies? And why large laundry bag (I think it’s actually taller than me. But then, I am only 4 feet 10) as freebies? Wait, this is a college Hackathon prep day, so I guess I can understand the idea of more laundry bag and more dark-shaded t-shirts to delay laundry duties. Aw, the good old days of living in campus-related housing.

Hacking EDU is coming to California in October. In preparation, Hacking EDU Training Day was hosted at Paypal last week. The event starts with a lunch at 12. Upon entry, I was greeted by 2 tables of t-shirts, as mentioned earlier (more shirts! Yeah for free t-shirts, though my drawers now have a distinctive collection of blue, gray, and black shirts). Then I grabbed some pizza and drink (Hmm… seems like Red Bull or some Red Bull fans had taken advantage of the event to spread the drink around. Coffee company had not. *sigh* I missed good coffee so bad that day.)

The place was packed and there wasn’t any empty seats. Fortunately, one of the booth people waved me over to borrow one of their chair. The “town-hall”, where the lunch and opening ceremony was held, also hosted several tech booths. The person I sat with was Mark from Gun.io, so his booth was the first one I talked to. I just started MySQL database this semester and is still new to CS overall, but Mark was enthusiastic about his work and ready to explain. Essentially, he wanted users to be able to travel between different browser or servers without losing the integrity of their data – to be able to sync in real-time effectively.

Next to us was the Pebble booth. I enjoyed using a regular watch, so I was curious about smart watch as well. When I had finished lunch, it was the first booth that I went over. The watch looked smaller that I’d imaged. Turns out we can purchase the original refurbished Pebble for only $50 at the event. They also have a Giveaway, but I didn’t won.

For the first workshop, I had planned to go to the one about apps on clouds. After looking at the Pebble watch though, I got interested about their workshop instead. In their workshop, I got to start a basic exercise. Pebble codes are mostly based on C (C again! I really need to study it this summer. But I also want to learn C++… choices, choices…), so I was a bit slow in typing it at first. Turned out I was not the only one – one of the attendees asked if the presenter, Kirby, can show one of the steps again. Kirby then informed us that the code was also located in Github. After a vote among the attendees in the room, it was decided that he would focus on the concept during the presentation, and we the attendees will try the practice later using the code in Github.

Chegg’s workshop was the second workshop I attend. They focused on security issues. Semi-quoting here because I was standing and couldn’t take notes – True to the nature of Hackathon, they have build a website (which displays the code that users type in, and allows multiple users to have their own place to code and demonstrate their result) for this event in 24 hours! The presenter used the website to show us ways that website codes can directly inject things, such the image of their dancing co-worker – if we are not careful. Then, they have a small competition set up, with winner being those who can creatively use the coding website. The first winner managed to make the browser screen into a ping pong game! I tried to make a hopping rabbit icon with a “taking over the world” message, but for some reason my HTML5 animation didn’t work on the website *sigh*  I wonder if it is because I didn’t do much HTML coding this semster.

The presenters also did several hack demo. While my eyes were totally preoccupy on why my animation wasn’t working, it was still entertaining to listen to what the presenters were doing and what hackers are capable of. Some of the things reminded of what I learned in CS network class, except I get to see it happen in real life!

For the last workshop, I decided to see what gun.io was like in actual demo after hearing all the talks at the booth. Following the instructions on gun.io’s Github page, I successfully got gun installed. I am not sure I got Node.js working though. When I installed that, the terminal outputted several errors message. I tried to follow along the demo, but I think either my installation wasn’t correct, or I missed a step, since the demo result didn’t look the same as mine. But then, the codes and instructions are on Github, so I can always try it later. I decided to focus on listening to the demo. Go Github! The event group would also send out videos later, so I can catch up on both events that I attended and events that I missed.

After that and some dessert (free ice cream!), we had the Closing Ceremony, in which the event people had total fun embarrassing two individuals that were fortunate enough to have their birthday that day. Then we had a founders talk from Boostrap and Twitter. The two converse well together, and I enjoyed the talk about how good design plays into the development of a good tech program and company.

After that, the days ends – It felt shorter than expected, although it was an eight hours event. Can’t wait for the actual Hackathon this October!