Tag Archives: Coding

GitHub

I’m now on GitHub: https://github.com/RoseTheMarmot

I finally set up an account and added some of my past project. Nothing fancy. 🙂

Advertisements

Conquor Every Bug…

Yesterday was a pretty exciting day… I don’t know how I managed to do it, but I turned Terri’s site into a white screen of death.

Figure 1. The White Screen of Death.

Figure 1. The White Screen of Death.

I backed up the contents of the server, re-installed WordPress, changed permissions, changed some files, and finally after re-uploading the contents that I have previously backed up it magically started working again.

Later I tried to upload firmware to my Brainwave board (it’s the little computer board on my Grawmet II 3D printer) and I could not get past one very cryptic error.

This is quite the life.

D3.js Hello World

Screen Shot 2014-01-16 at 4.48.05 PM

Figure 1. My first data driven document.

Since I am taking an Information Visualization class this quarter, I finally got an excuse to start playing with D3! It didn’t take me long to produce the following the tutorials on the D3 website. D3 is really well documented, and so this was super easy. I’m really excited to finally start using the JavaScript library though!

Hand Turned Bowls Website

As I mentioned in my previous post, I am in the middle of a web site development project for a friend. My friends wants an online store site where she can sell her hand turned wooden bowls (think woodworking).

This has been a challenge for me since it is my first solo development project for someone other than myself (which is also pretty exciting!) In this project I have gone from “Ok, so you want a website?” to particular usability issues and getting the CSS right on the buttons. I’ve been using WordPress CMS, hosted on Bluehost. The WordPress theme I am using is called Mystile, which I have modified with a child-theme. I’ve also added several key plugins, including an SEO plugin (more on that in the previous post), and an online commerce theme called WooCommerce which has actually been quite useful.

Figure 1. Screenshot of the Art from Nature homepage on 11/12/13.

Figure 1. Screenshot of the Art from Nature homepage on 11/12/13.

As can be seen in figure 1, there are still some aesthetic and usability issues that need to be addressed, not to mention the interactive issues that can’t be seen in a screenshot. The ones that bother me most right now are 1) the placement of the navigation/banner image, 2) the “Product Category” navigation interaction, and 3) this weird navigation box thing that pops up responsively when the browser window is very small.

The navigation, banner image and “Product Category” navigation are actually very related to each other. Although they are very different in how they are generated in PHP, they both deal with the issue of navigating the shopping experience. I’ve noticed as I try to browse categories, it’s pretty difficult to get from one category to the next because the top nav is just so high (you have to scroll down to see the products, and the top nav disappears out the top of the browser window) and the side “Product Category” navigation goes away when you navigate off the main page. I’ve been trying to make the “Product Category” nav stay there, but since it is actually a home page widget, that has been pretty difficult….

As for the weird navigation box thing, it’s just annoying. I’m going to work on it after I fix the first two problems. I also hope to do some a casual usability study or two in the near future as well.

And finally, below are the list of specs I developed for myself. They aren’t very official, but that is because nobody is using them but me. 🙂

__________MY SPECS:___________

CSS

  • get around the problem of brown.css overwriting everything

Header

  • Long photo in header
  • Nav and long photo must be usable
  • Make it user friendly to change this photo
  • Deal with strange nav thing that happens when width is small

Home Page

  • Welcome to site text + pictures
  • New items can be displayed
  • Item navigation

Additional Pages

  • can put photos/text
  • item navigation should stay when a category is clicked on

Items

  • Must sort into categories
  • Categories displayed on home page as nav
  • Categories must open as their own page
  • Must be able to mark price
  • Must be able to mark as sold/unsold
  • Must sort according to sold/unsold (must still display if sold, but be marked as such)
  • Must be manageable from back end
  • Must have individual item checked by dafault

SEO

  • Must be able to tag items and have that reflected in html
  • Post links must be <nofollow>

Commerce

  • Money must go to Terri
  • Credit Card and Bank Transfer work <- next release
  • Buttons must be legible

Favicon

    • Custom favicon

  • Updater Web App 1.0 is ready for it’s first quarter of Zombie Tag

    Define being “finished” with a project…

    But, as for the Updater App, it’s ready for it’s first quarter of use. In case you haven’t seen earlier posts, this web app is for members of ECHO Team, a group of University of Washington Humans vs. Zombies Tag enthusiasts. This app will allow team members to quickly update their game status in one central location.

    The app basically has two pages. The first page (figure 1) is the main game page. This page is generated by php, and pulls information from .txt files and displays it in a table.

    Figure 1. Main page

    Figure 1. Main page

    The second page (figure 2) has an HTML form for submitting updates. These updates are sent off as a post.

    Figure 2: "updater" page

    Figure 2: “updater” page

    In addition to these two pages, there is a third php file and a javascript file. The third php file takes posts from the updater page and processes them into .txt files. The javascript file just adds some nice touches to the updater page. For example, the “time of death” part of the form remains hidden until the “Died” radio is clicked.

    Technically there is also a CSS file, but most of the styling you see in figures 1 and 2 comes from the overall ECHO site style sheets.

    Improvements that I would like to see happen include security procedures (right now there is no login system, and it’s pretty much assumed that people will submit nice things in the form), and more interactive javascript elements (such as graphs and different color codes for dead vs alive on the main page). That will be Updater App 1.2.

    Developing for WordPress

    Right now I am developing a WordPress theme for my portfolio website. Originally I had been trying to instal Drupal, but that didn’t go very well. After multiple bugs I finally gave up in frustration and switched to WordPress. In this post I will be writing about what I’ve done since I gave up on Drupal.

    First, I installed WordPress (WP) on my server. Yes I know, I am developing live which is bad practice… I’m pretty sure though that not many people visit my portfolio site very much at present. I hardly have it linked anywhere. Anyway, pretty much the only thing I had to do to install WP was to download the latest version, and then upload the files via FTP to my root directory. After that all I had to do was navigate to my root url and follow the WP set-up prompts.

    Next came the interesting part. I wanted to develop my own theme, but I no idea where to start. So, I found a pretty basic looking free theme called “Responsive,” and started playing around with it. After some surfing of the web, this led me to create a child theme for Responsive. A child theme will inherent the functionality of  its parent theme, unless it has it has code of it’s own. In the cases where code can be found in the child theme, that code is used. For details on creating a child theme, see the WordPress Codex. At first basing my own child theme off of Responsive worked quite well, but navigating and trying to make all of Responsive’s behaviors do what I want them to do is getting a bit complicated. Switching to a theme like Boilerplate would be a good idea, but I figured that I would mess around with Responsive enough to become savvy at working with WP, get a sort of hacky solution up and running, and then clean up my code a lot by switching to Boilerplate.

    Developing a basic WP theme is actually not very complicated. Each type of page is controlled by a specifically named php file. For example, page.php controls page behavior, and index.php controls the front page behavior. Style.css is your overall styling file. (One thing I found that I thought was pretty weird was that you have to include a specially formatted comment at the top of each of your files.)  Below is a useful info graphic:

    anatomy of a WordPress site.

    Back to fiddling with php files…

    Traffic Lights go Wireless

    The Traffic Light Arduino Platform is now wireless. A independent console (powered by an Arduino) with three programable buttons transmits a code signal using XBees to a receiver. The receiver  (also powered by an Arduino) decodes the input and turns on and off the traffic lights as well as play music accordingly.

    Table 1. Traffic Light Language

    Screen Shot 2013-08-20 at 10.51.50 AM

    TLA System

    Figure 1. The whole system, ready for a demo!

    The TLA Platform isn’t finished yet. There are still more features to add, and much more code that could be written for different uses, but for now, it’s ready for some people to come and play with it at my lab demo.