SamAuciello.com

Rapid Development in PHP

Sam Auciello — Sat, 31 Mar 2012 15:19:00 +0000

Yesterday in programming workshop I decided to see if I could build a simple web application in PHP in a few hours. The project was one I had been thinking about for years that was inspired by a site I had found a while ago. The idea was a choose your own adventure story in-which readers add their own branches as they go. The original allowed users to create pages and specify all of the options for those pages. Whenever an option was chosen for the first time, the user was prompted to make a new page. The app I built yesterday is slightly different in that users can add options to any page but they must specify the description of the page it goes to when they do.

The app can be found here. It represents about 4-5 hours of coding, much of which was tuning the stylesheet. The really cool thing about it is it’s simplicity. Most of the app is in the index.php file.

< ?php
 
require_once('functions.php') ;
 
if (! ($room = validateRoomPath($_REQUEST['room']))) {
  $room = '' ;
}
 
if ($_POST['new_option'] && $_POST['new_room']) {
  /* Add a new option and room */
  $new_room = $room . '/' . option2slug($_POST['new_option']) ;
  if (buildRoom($new_room, $_POST['new_room'])) {
    header("Location: " . PATH_TO_WEBROOT . '/' . $new_room ) ;
  }
}
 
?>
< !DOCTYPE html>
<html>
  <head>
    <title>CHOOSE/BUILD YOUR OWN ADVENTURE!title>
    <link rel="stylesheet" type="text/css" media="all" href="/story_game/style.css" />
  head>
  <body>
    <div id="wrapper">
      < ?php
        echo formatRoomDescription($room) ;
      ?>
      <h3>what do you do?h3>
      < ?php
        echo formatRoomOptions($room) ;
      ?>
      <div id="custom">
		<form method="post" action="">
		  <label for="new-option">Custom actionlabel>
		  <input type="text" id="new-option" name="new_option" />
		  <label for="new-room">Action resultlabel>
		  <textarea id="new-room" name="new_room" cols="80" rows="10">textarea>
		  <input type="hidden" name="room" value="$room ; ?/>" />
		  <input type="submit" value="submit" />
		form>
	  div>
    div>
  body>
html>

I’m omitting the functions.php file here for security reasons but suffice it to say it’s pretty short. A single line of mod_rewrite in a .htaccess file redirects everything:

1
2
3

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^([0-9a-z\-/]*)$ /story_game/index.php?room=$1

One of the truly novel things about the app is that it avoids the need for a database by simply using the filesystem as a hierarchical data structure. While this may not be the most robust solution and it did limit the app somewhat, it allowed me to set things up very quickly.

Computer Science Bananagrams

Sam Auciello — Wed, 07 Mar 2012 06:35:07 +0000

One of the perils of studying Computers at a tiny liberal arts college is that you don’t usually have many peers to discuss the subject with. Lately I’ve been lucky as the department seems to be experiencing a surge of student interest. Today as I was playing bananagrams in the dining hall the group of players gradually evolved to consist entirely of CS students. As we were playing, we kept remarking how nice it would be if we could use the sort of nonsense acronym/words that are so pervasive in computer science.

We decided to play a game of Banangrams in-which only CS related words were allowed. It turned out to be much harder than I had expected but it was quite fun and I learned about a lot of things I’d never heard of. Our crosswords are pictured and annotated below:

My crossword:

NOR: Logical NOR is the logical equivalent of neither.
Joomla: Joomla is a terrible open source content management system.
my: my is the keyword to create a local lexically scoped variable in Perl.
Java: Java is a popular object-oriented programming language.
.rar: .rar stands for Roshal ARchive. It is a proprietary archive format.
rip: The process of copying media content from a CD or DVD onto a hard drive.
IP: Internet Protocol is a system computers use to identify each other on the internet.
no-op: no-op stands for no operation and is a programming instruction that does nothing.
or: or is a keyword in Ruby which has lower precedence than the otherwise equivalent ||.
GNU: GNU stands for GNU’s Not UNIX. It is a successful project to replace UNIX with Free Software.
IEEE: The Institute of Electrical and Electronics Engineers is a non-profit professional association that is responsible for many useful internet standards.
.exe: .exe is a common file extension denoting an executable file in the Microsoft Windows operating system.
eq: eq is the shallow equality built-in function in Common Lisp.
quine: A quine is a computer program which takes no input and produces a copy of its own source code as its only output. For example a quine in Ruby might be print open($0).read
vi: vi is a primarily console-based text editor popular amongst programmers who have never tried emacs.
date: date is a built-in function in PHP that formats a useful date/time string from a timestamp.
.cmd: .cmd is a file extension designating a file to be runnable by the cmd.exe shell in the Microsoft Windows operating system.
nil: nil is a keyword in Ruby which designates the empty value.
lock: A lock is a synchronization mechanism useful in concurrent programming.
fork: A fork is a separate development branch of a piece of software never intended to be merged back into the original project
rm: rm is a UNIX command short for remove that permanently deletes a file.
fault: A fault is a type of hardware interupt.
GET: GET is the most common type of HTTP request.
.gz: .gz is a file extension designating a file compressed with GNU zip.

Isaac’s crossword

.sea: .sea designates a self-extracting archive file: when run as an executable, it extracts.
nest: Nesting parentheses looks (like (this)).
try: try is an exception-handling keyword in many programming languages.
real: x86 real mode is a legacy, rarely-used 16-bit mode of operation on your laptop’s processor.
lea: lea is an x86 opcode that does addition and limited fixed-factor multiplication, originally created for addressing arrays.
AIX: AIX is an IBM implementation of UNIX.
XAA: The X Acceleration Architecture is an old part of infrastructure for hardware-accelerated rendering in the X display system.
.bat: .bat is another file extension for Microsoft shell scripts.
TODO: TODO marks a comment that describes something that should be done.
UDF: Universal Disk Format is the filesystem format on DVDs that is superior to ISO 9660.
of: of is a keyword in Haskell: case (some expression) of [...]
FFT: Fast Fourier Transform is an O(n log n) signal-processing algorithm.
this: this is a keyword in C++ that refers to the object a method is called on.
IVs: An initialization vector is a fixed-size input to a cryptographic primitive that is typically required to be random or pseudorandom.
wide: The width of a CPU register is how many bits it has.
GUID: A Globally Unique IDentifier is a 128-bit identifier for partitions in the GPT partition table format.
PUT: PUT is an HTTP request type that directs the server to store the attached file.

Elias’s crossword:

ith: The term ith is used to refer to an arbitrary element of a series.
.sit: .sit is a file extension used by the proprietary Stuffit expander family of compression programs.
hacks: A hack is an inelegant but efficient solution to a programming problem
CE: Microsoft Windows CE is an operating system developed by Microsoft for embedded systems.
sh: sh is a common abbreviation for shell, a console environment for interacting with a computer in plain text, especially in UNIX.
gs: gs is an obscure x86 register sometimes used as part of buffer-overflow protection.
log: A log file is a file used to log information about a program as it runs.
rel: rel is an HTML attribute that specifies the relationship between the current document and a linked document.
RE: A Regular Expression is a concise and flexible means for specifying and recognizing strings of text.
byte: A byte is unit of information equal 8 bits. There are 256 unique bytes.
.bz: .bz is a the top level domain for Belize.
None: None is a keyword in Python which designates the empty value.
Oo: Object-Oriented programming is a programming paradigm that is the basis for many modern scripting languages such as Ruby and JavaScript.
NAT: A Network Address Translation is the process of modifying IP address information in IP packet headers while in transit across a traffic routing device.
ADD: Add is a thing that all Turing complete machines can do.
.edu: .edu is a sponsored top-level domain intended for accredited post-secondary educational U.S. institutions.
use: use is a built-in keyword in Perl which includes an external package.
wine: Wine is a free and open source software application that aims to allow computer programs written for the Microsoft Windows operating system to run on Unix-like operating systems
NaN: NaN stands for Not a Number. It is a numeric data type that is part of the IEEE 754 floating-point standard.
web: Web is another name for the internet. It is particularly used to refer to internet applications that use HTTP.
br: is an HTML tag used to designate a line break.

Where Ruby and Python collide

Sam Auciello — Fri, 02 Mar 2012 22:25:13 +0000

I had an idea to make a file that was simultaneously a valid ruby script and a valid python script. I’m not sure what prompted this idea but I wanted to know if it was possible and I eventually came up with the following:

""" "
=begin
"""
 
# BOF python code #
 
print "This is an arbitrary Python program"
 
fib = lambda n: 1 if n < 2 else fib(n - 1) + fib(n - 2)
print ", ".join(map(lambda x: str(fib(x)), range(10)))
 
# EOF python code #
 
"""

=end
 
# BOF ruby code #
 
puts "This is an arbitrary Ruby program"
 
fib = lambda {|n| (n < 2) ? 1 : fib.call(n - 1) + fib.call(n - 2)}
puts 10.times.map(&fib).join ", "
 
# EOF ruby code #
 
# """

I've split the code up into two blocks here because my code block system was built with the entirely reasonable assumption that each block would have only one language. I made a simple Fibonacci implementation to demonstrate that I can in fact run arbitrary ruby and python code in the same file.

Line #1 is where the real magic happens. Ruby interprets the line as two string literals "" and " ". In Ruby two string literals next to each other like this get concatenated. So the entirety of line one is interpreted by Ruby as the string " " and since nothing is done with it is simply evaluated and thrown out. Python on the other hand does something completely different. In Python, """ marks the beginning of a multi-line string and since the fourth " is separated by a space it is simply interpreted as part of the string.

On line #2 Ruby sees the beginning of a multi-line comment and Python just sees more of the string. Line #3 is part of the comment for Ruby and the end of the multi-line string for Python. As with the concatenated string literal with Ruby before, Python simply evaluates this multi-line string and throws it away.

At this point we are in a comment in Ruby and ready to evaluate things in Python so we put our Python program here.

Finally Python evaluates lines #14 - #26 as another multiline string which just happens to contain ruby code.

I tried to get Perl in here as well but the problem seems to come down to the first line. Because this line is valid in both Ruby and Python but starts a comment in one and not in the other, the whole thing works. Since this is just an error to Perl, nothing really works. Incidentally Ruby and Perl aren't terribly hard simply because =begin is the start of a multi-line comment in both languages that is terminated differently in each:

=begin
=cut
 
# BOF perl code #
 
print "This is an arbitrary Perl program\n" ;
 
# EOF perl code #
 
=head
=end
 
# BOF ruby code #
 
puts "This is an arbitrary Ruby program"
 
# EOF ruby code #
 
"
=cut
# "

Zsh Customization and Beautification

Sam Auciello — Thu, 16 Feb 2012 17:16:32 +0000

So I was working on a project in Ruby with my friend Isaac when I noticed that his terminal looked really cool. I asked him about it and he said it was zsh with a plugin called zsh-syntax-highlighting. I found the project’s github page and tried setting it up but it didn’t immediately work.

Following the instructions in the project’s README.md file, I cloned the project

1	git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

then I added the line

1	source /path/to/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

to my .zshrc file.

Unfortunately, when I tried re-instantiating my terminal, I got the following error message

1	/Users/olleicua/dev/zsh/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh:76: parse error near `done'

I spent a good forty-five minutes googling variations on “zsh-syntax-highlighting parse error near `done’” with and without my zsh version and OS. Finally it occurred to me to try the search without zsh-syntax-highlighting since it my be an issue with my zsh setup specifically and I found this mailing list archive. The mailing list suggested that one of the built-in zsh keywords that was being used in a control structure had been overwritten by an alias, in this case fi. I reviewed the section of the plugin that was bugging out and noticed that it was using the keyword do in its control structures and recalled that I had aliased do to cd into my downloads directory. I changed the alias to dow and now the plugin works fine.

The moral of this story is to always use which before naming an alias or binary in your path. which looks for the specified name in it’s list of built-in commands, in your defined aliases and in your path. It then tells you if it found it and if so where. In this case

1 2	$ which do do: shell reserved word

It doesn’t complain when you overwrite things with aliases because you want to be able to do things like

1	alias rm="rm -rf"

if you’re feeling foolhardy.

Coloring zsh

Once I had gotten this to work, I was so happy with myself that I decided to make my zsh more colorful in general. I had to do a bit of trial and error because I’m using both a prompt and a right-prompt. Before this change my shell looked like this

and was generated by the following in my .zshrc file

PROMPT='
$ '
 
RPROMPT='| %~ | %D{%k:%M} | %h | Jack |'

I was able to add colors by changing this to

PROMPT='%F{green}
$ %f'
 
RPROMPT='%F{green}|%f %F{cyan}%~%f %F{green}|%f %F{cyan}%D{%k:%M}%f %F{green}|%f %F{cyan}%h%f %F{green}|%f %F{cyan}Jack%f %F{green}|%f'

In this case %F{COLOR}TEXT%f is the syntax for coloring text in zsh prompts. The result was

A Semester Studying Open Source Software

Sam Auciello — Sat, 17 Dec 2011 02:00:51 +0000

This post is the final paper I wrote for my self-taught open source software class this semester.

This semester, in an attempt further my education in the art of making great software, I began looking at how software is made in the open source world. I chose to look at this field for several reasons. I’ve been quite interested in open source software as long as I’ve known about it. I appreciate the social/economic benefits of software that is made by individuals who want it to be of quality as opposed to corporations that simply want to make money (and are therefore frequently motivated to compromise quality for business reasons e.g. planned obsolescence etc.). My experience with academic vs. professional programming also leads me to believe that people are far more likely to cut corners when they’re getting paid. Another reason for looking into open source was that large-scale software is often made in teams. I had had very little experience working on software with a group and, being at tiny isolated liberal arts school with a similarly tiny computer science department, I realized that this was a key missing component of my education. This would also give me an opportunity to compare my coding to others’ so as to get a sense of how I need to improve.

I began the semester thinking I would be contributing to Mozilla Firefox and I spent the first few weeks looking into this. In the process I was exposed the XUL and was able to build a very simple Firefox extension as well and getting a glimpse at the guts of Firefox. I quickly realized that my lack of familiarity with XUL, C++, and Firefox development in general was going to make contributing difficult and that I would likely spend more time exploring these technologies than learning about open source. For this reason, I switched my focus to WordPress, a project I was already much more familiar with. I had previously dabbled in creating plug-ins for WordPress so contributing to the core in PHP (a language I am quite familiar with) seemed far less daunting. Although I would still love to someday learn C++ and XUL and explore the Mozilla community, I’m glad I made this decision because it allowed me to actually engage with a community the maintains a popular CMS used by millions of bloggers. I made several small contributions to the swiftly approaching release of WordPress 3.3 (as of the time of this writing there is a single ticket impeding the release). My contributions included three major patches and a bug report. I got the opportunity to interact with several of the movers and shakers of the community and the experience was, on a whole, intimidating yet gratifying. I intend to continue contributing to WordPress.

I also spent a some time exploring some of the tools of open source software such as version control systems. Although WordPress uses Subversion, the software world at large seems to be slowly moving towards distributed version control systems like Git and Mercurial. I’ve become somewhat familiar with Mercurial and I hope to find more excuses to work with it in the future. I also looked a bit at software licenses. In particular, I looked at the differences between restrictively open “free” licenses like GPL and LGPL and much simpler ones like the MIT license. I didn’t spend much time on this subject as it doesn’t directly relate to programming and would probably be more interesting to a law student but it was good to get a sense of what exactly is meant by terms like open and free when they are applied to software.

I also spent some time this semester looking at subjects tangential to open source but directly related to becoming a well rounded programmer. For example, I began formally acquainting myself with Perl. Perl seems to be quite powerful though intimidatingly open-ended. I’ve also begun learning Ruby, which I feel will soon replace Python as my go-to scripting language. Finally I dove into Emacs which is increasingly my default text-editor. I’ve spent the semester continuing to improve my general coding skills and using open source as focal point. I set out to get exposure to a larger world of software technology specifically in the open source community and I feel that I have done this. This is of course not to say that I’m done; the software world is enormous and there will always be more to learn.

Contributing

I did make some initial attempts to contribute to Mozilla Firefox. I found the process inviting, with many helpful tutorials on how to get started. The main barrier to entry for me was that most of the tickets marked as “Good first bugs” in Bugzilla were like Greek to me. They often referred to aspects of C++ or the Mozilla core that I wasn’t familiar with and assumed that I was. There were a couple of bugs that I was able to understand well enough to reproduce. The first was one involving Firefox’s handling of tags, which was inconsistent with other browsers. There was some disagreement as to whether the behavior of Firefox was in fact incorrect. Given the clear lack of agreement this seemed like a bad place to start. The other bug involved a button in the bookmark interface that needed to be disabled in a certain circumstance. This seemed like something that I might be able to fix but before I got the chance to a patch was submitted by someone else. This was about the time I decided to switch to looking at WordPress.

WordPress was slightly less initially inviting. Unlike with Firefox, there was no “so you want to contribute to WordPress” page with helpful step by step instructions. There was a general description of how to get involved, which I followed. The main difference was my familiarity with the underlying technologies. About half of the tickets in trac were clear enough that I could begin looking into them without much trouble at all and the other half would become more straight forward if I looked at them more. My first contribution was to ticket #18314 which was about cleaning up duplicate entries in the admin style-sheet. I took a look a the offending CSS file and quickly found a section where a large block of identical rules was being applied separately to three different selectors. I merged the identical rules into one block, made a patch using svn diff and submitted it to trac. My patch was soon committed and so I decided to do a once over of the CSSticket #18866. It referred to a bug in the error page displayed if the wp-config.php file is missing. Another bug having to do with certain situations where the URL of the appropriate style-sheet for the error page might not be accessible had necessitated putting the CSS rules for the page in-line in the HTML head. A couple of rules had been forgotten so I tracked down the file that was generating the page and added the necessary rules. I found it necessary to include a reference to a background gradient image, causing the same problem as including a style-sheet would have, except that the difference between the page with and without this gradient was barely noticeable so this seemed like the solution most likely to work most of the time. Another contributor suggested using CSS gradients but, as they are not supported by Microsoft Internet Explorer prior to version 10, my patch was used.

I also fixed a bug in the “Press This” interface, ticket #18989. Press This is a bookmarklet that opens a pop-up window allowing bloggers to easily post about content they find while browsing other sites. In addition to automatically pasting a link to the site into the post the bookmarklet grabs any selected text as well as providing an interface to include in-line images from the page. A change from another ticket had caused a bug in the image including functionality. Everything seemed to work fine but the image was not pasted into the post. Another contributor had pointed to the offending bit of code. It seems that an HTML input tag with the same id had been added to the interface and the Jquery selector that got the image URL to insert it into the post was now no longer specific enough. I added a more specific selector but this didn’t fix the problem. By adding console.log() statements, I was able to follow a relatively complex chain of seemingly unnecessary functions and discover a place where the HTML to be inserted into the post was being passed as the only argument to function that expected it as the second argument. Not wanting to break another aspect of the application, I passed the parameter as both the first and second arguments and the bug was fixed. If I had been more comfortable with general workings of the editing interface I’d have looked further to see why this was so excessively complex but this felt like a much larger project so I just made it work in a way that was unlikely to cause conflicts. It strikes me that this sort of apathy is probably what allows this code to remain as complex as it is. Perhaps I will look into cleaning it up for the next release.

I also found a bug and created ticket #19119. A major feature had been added creating fly-out menus for the main admin navigation in ticket #18382. I noticed relatively early that the changes being made had caused the collapsed menu fly-outs to be off by one pixel. Since there were a lot of developers working on this at the time I assumed that someone was on it and was worried that too many cooks might spoil the sauce. Apparently I was wrong because ticket #18382 was closed with the notice “If you encounter any bugs, please open a new ticket.” The bug was still there so I opened a new ticket. I tried submitting a patch to it but a better one was used by someone with a better understanding of the CSS involved. I also made several smaller contributions in the form of testing patches and commenting on discussions.

The Open Source Community

My initial reaction to the communities I looked at was that they were very inviting. This was unsurprising as it seems like a necessity to an organization fueled by volunteers. It was interested to see how decision were made within these communities. The Mozilla approach is a complex hierarchical structure that rewards longstanding contributors with the ability to make more serious decisions. WordPress being smaller, has a much simpler approach. There is a core WordPress team that has commit access to the Subversion repository. Anyone else can check out the repository and submit changes to Trac in the form of patches (anyone can create an account in Trac). Because WordPress is relatively small, it’s rather trivial for the core team to keep track of tickets with patches in them and commit things that need to be committed.

It was interesting to see the varying quality of documentation in WordPress code. Any function intended to be used by plug-in/theme developers is described in detail in the WordPress Codex in terms that can be understood by someone who has very little programming experience. Anything internal is lucky to have more than basic in-line comments next to it in the code. This also varies widely from file to file. Most of the files have a comment block at the top explaining the file’s purpose but this is often all you get and you have to hope the code is well written (which it only sometimes is). It’s not clear to me why there is such a discrepancy between end user documentation and developer documentation. It seems reasonable that user documentation would be prioritized as it is part of making the product usable but it seems like it would be just as important to provide support to developers so to help developers improve the core.

One thing that surprised me that seemed to be a major feature of the community was a general sense of inertia. A debate came up in the wp-hackers email list about a month ago about the differences between relative and absolute URLs. Whenever an internal image or link is added to a post or page on a WordPress site, the editor stores an absolute URL in the database. The strongest argument for this seems to be that absolute URLs will fully specify the correct location in any context and since the pages therefore always want to be served that way, they shouldn’t need to be processed for every page load. The strongest argument against this seemed to be the issue of portability. If development is at dev.example.com and a production is at example.com we shouldn’t need to fix the database any time we push the database to production. Various other arguments were made and things got a bit out of hand at times but the end result was that since the core team was mostly in the former camp nothing was going to change in the WordPress core but it was fine to implement relative URLs in a plug-in (this was not particularly satisfactory for the proponents of relative URLs since the plug-in solution turned out the be somewhat clunky). “Make it a plug-in” seems to be an unfortunately common answer to feature requests that don’t seem necessary to the use case that the core team has in mind. For example re-arranging the order of your pages is an annoyingly complex task of meticulously changing a number in a field on each page. There is a plug-in called my page order that provides a nice drag-and-drop interface for this but no one has considered incorporating it into the core. It strikes me as unfortunate that this sort of inertia exists and I hope that it isn’t as prevalent in the open source community at large as it is in WordPress as it seems like a key barrier to competition with commercial software.

Gaining Programming Skills

One of my main goals for the semester was to gain skills in group development. To this end, I spent a good deal of time acquainting myself with the relevant tools. One of the most important tools in group development is version control. The three version control systems I looked at were Subversion, Mercurial, and Git. Subversion was clearly a vast improvement on its predecessor CVS, but it seems to be somewhat outdated at this point because the advantages of distributed version control are significant. Unfortunately it is still quite prevalent. Mercurial seems to be a really nice solution as it is fast, powerful, distributed, and relatively easy to learn. Git seems to be the most powerful of the three but is harder to learn. My current preference is for Mercurial which I have started using for some of my own projects.

The experience of working with other people’s code was helpful in general. My experience with ticket #18989 in particular drove home the importance of keeping code simple and easy to follow. It also re-affirmed my appreciation for the value of debug statements.

I also spent some time looking at Software licenses. Particularly I looked at the differences between GPL, LGPL, and more permissive licenses like the MIT license. GPL is restrictively free. This sounds like a contradiction but the idea is basically that if a piece of software is licensed under GPL then any software built on top of it must also be GPL. This ensures that the use of this code will never be subject to proprietary endeavors. LGPL is less restrictive. It allows proprietary software to be built on top of it so long as the licensed software is unmodified. LGPL is common for programming languages and other situations where GPL would severely limit the products usability

I gained a lot of general knowledge/skills this semester that will help me in my goal of becoming a great software developer. In addition to gaining familiarity to the WordPress core, I got exposure to XUL, Version Control, software licenses, Perl, and Ruby. Although my semester was not as focused on contributing to open source as I originally intended it to be, I don’t see this as having been a problem. The nature of software is that making it well is often as much about knowing how to use the tools as it is about understanding the concepts. I feel like this semester gave me the opportunity to become acquainted with a number of powerful tools of the trade. Even though it didn’t necessarily coalesce into a clearly structured curriculum, it gave me a chance to learn what I need to learn.

Image Processing with Convolution Functions

Sam Auciello — Thu, 24 Nov 2011 02:12:54 +0000

We’ve been working with convolution functions in my AI class and I’ve written a nifty little program in PHP to run convolutions of arbitrary 3×3 kernels on gifs, pngs, and jpegs. You can try it out here. Be warned that the page has no stylesheet. I got immersed in the JQuery/AJAX/PHP coding and forgot to make the page look nice. In the end I decided that it had a cool retro feel to it and kept it.

Convolutions

I will herein describe convolution functions, if you are already familiar with the topic, feel free to skip ahead to the next heading.

The basic idea of a convolution is to combine to mathematical functions in a particular way. The concept (like most things in mathematics) is described quite well on its Wikipedia page, so I won’t go into enormous detail here. As it applies to image processing, convolution is a process of applying a grid of numerical values called a kernel to an image. A simple example of a kernel is:

1	2	1
2	3	2
1	2	1

The process is quite simple: look at each pixel in the input image and set the corresponding output pixel to the weighted sum/average of the neighboring pixels where the weights are determined by the values in the kernel. So for example, with the above kernel, each pixel diagonally adjacent to a given pixel will be given a weight of 1, each pixel orthogonally adjacent to the pixel will be given a weight of 2, and the pixel itself will be given a weight of 3. This particular kernel has the effect of blurring the image.

All sorts of things can be done with different kernels. One interesting use is finding edges which can be done with a kernel like:

-1	-2	-1
0	0	0
1	2	1

AJAX without AJAX

The thing that excited me most in building this little program was the realization that although it uses JQuery to communicate with the server without reloading the page without using AJAX, at least not in the traditional sense. It is technically still asynchronous, and it doesn’t use XML (but modern AJAX rarely does).

When you click the process image button, a couple of things happen. First the image you selected is asynchronously uploaded using a JQuery plugin called JQuery.upload. As it turns out the only way to asynchronously upload a file is using an iframe, which is exactly what this plugin does. So not really AJAX as we typically think of it. The second thing that happens is the src attribute of the modified image on the page is set to a php script that processes the newly uploaded image and spits out an image, definitely not AJAX as we normally think of it.

That’s basically it, besides boring implementation details (personally I find implementation details fascinating but this is a blog post not documentation).

Contributing to WordPress

Sam Auciello — Thu, 03 Nov 2011 14:47:07 +0000

I’ve been making some contributions to WordPress.org for my Open Source Software course. I’ve been helping out with the upcoming release of version 3.3 scheduled for the end of November. I’ll use this post to talk about some of the tickets I’ve been working on.

Press This and Images

WordPress has a feature called “Press This”, which allows bloggers to easily share content that they might find while browsing the web. Using the “Press This” bookmarklet pops up a new window which allows the user to post new content including anything highlighted on the page you were on. One nice feature is that when you click the add images button from this new post interface, it loads all of the images from the page you were on and gives you the option of inserting them into your post.

There was a bug created however by some unrelated change leading up to the 3.3 release. You see when you select an image from the page to insert into your post, you are prompted to add a description and then click the “insert photo” button to insert it. This button uses the JQuery to determine the url and description of the image to insert with something like:

1 2	url = JQuery('#this_photo').val(); desc = JQuery('#this_photo_description').val();

The problem was that another change had created two unrelated DOM objects with the ids this_photo and this_photo_description. Consequently the JQuery, assuming that ids are unique (as they should be) grabbed the wrong DOM objects, found no values and then promptly failed. To fix this I found the id of the parent div to the two DOM objects I wanted and replaced the code with something like this:

1 2	url = JQuery('#parent_div #this_photo').val(); desc = JQuery('#parent_div #this_photo_description').val();

This is probably not ideal but since I wasn’t sure where else these objects might be referenced by JavaScript and I didn’t want to create more bugs that might not be caught this close to a release I didn’t want to mess with changing the ids themselves.

More adversarial search, Tic-Tac-Toe and Othello

Sam Auciello — Tue, 25 Oct 2011 21:46:45 +0000

For my midterm project in the Artificial Intelligence course I applied the adversarial search program in Lisp that I started here to Tic-Tac-Toe and Othello.

Dynamic Functions

The API system I had set up involved using functions to represent moves and both of these games have more possible moves than it would be sensible to define individually. Fortunately Lisp is great at generating code dynamically. It took a while to find the right syntax for this and what the method I eventually used was the back-tick quoting mechanism that Jim Mahoney pointed me to. The following code generates the possible moves for my Tic-Tac-Toe program:

(setf all-moves
      '((top-left . 0)
        (top-center . 1)
        (top-right . 2)
        (middle-left . 3)
        (center . 4)
        (middle-right . 5)
        (bottom-left . 6)
        (bottom-center . 7)
        (bottom-right . 8)))
 
(dolist (move all-moves)
  (let ((name (car move))
        (num (cdr move)))
    (eval `(defun ,name (state) (mark-square ,num state)))))

The backtick ` notation here lets me quote the list and still add in evaluated pieces later with , so that I can construct the defun statement as I want it before evaluating the whole thing with eval.

Side effects and Pointers

Another issue I found was that while the adversarial search worked fine for my stone game. I had made a fundamental assumption. A given game state for the stone game is represented by and integer and as such making a function that returns a modified copy of the game state without affecting the original (something I do a lot) is simple and requires no thought. Unfortunately this is not the case with more complicated data structures like lists.

For both tic-tac-toe and othello, my games states were represented by lists and as such I needed to use copy-list. My tic-tac-toe games states are encoded as a list of length 10 with the first element being the current player (X or O) followed by the contents of each square in left to right top to bottom order. So for example the start state is:

1	(X NIL NIL NIL NIL NIL NIL NIL NIL NIL)

and if X goes in the center the state would become

1	(X NIL NIL NIL NIL X NIL NIL NIL NIL)

A naive version of my mark-square function referenced in the above code might look like this:

(defun mark-square (square state)
  "Mark the designated square with the symbol of the current player's turn and toggle the turn"
  (let ((player (first state))
        (board (rest state)))
    (setf (nth square board) player)
    (cons (if (eq 'x player) 'y 'x)
          board)))

The problem with this is that (rest state) doesn’t return a copy of the state list starting with the second element, but rather it returns a pointer to the second cons cell in the state list. This means that we are dealing with same data in memory that was passed in and when we call setf, we modify the original state. More concretely if we try:

(setf state '(x nil nil nil
                nil nil nil
                nil nil nil))
(setf new-state (mark-square 4 state))
(format t "old state: ~a~%" state)
(format t "new state: ~a~%" new-state)

we will get:

1 2	old state: (X NIL NIL NIL NIL X NIL NIL NIL NIL) new state: (O NIL NIL NIL NIL X NIL NIL NIL NIL)

This is what is known as a side-effect, a function that does something other than just return a value. It is a result of our using Common Lisp which is not a purely functional language. In a purely functional language this would not be possible. The fixed version of my mark-square function is:

(defun mark-square (square state)
  "Mark the designated square with the symbol of the current player's turn and toggle the turn"
  (let ((player (first (copy-list state)))
        (board (rest (copy-list state))))
    (setf (nth square board) player)
    (cons (if (eq 'x player) 'y 'x)
          board)))

The copy-list function creates new cons cells so the changes affect a new copy of the list.

My Code

I’m really happy with my code right now for this. You can download a copy of it by clicking here.

You can run it at the command line with:

$ cd /path/to/downloaded/directory
 
$ clisp
[]&gt; (load "tic-tac-toe.lisp")
T
[]&gt; (play-game tic-tac-toe 10 'computer 'sam) ; the 10 here is maximum depth for adversarial search
It is X's turn
 -----
 
 -----
computer: BOTTOM-RIGHT
 
SAM's turn
It is Y's turn
 -----
 
     X
 -----
 
choose a move from
(TOP-RIGHT BOTTOM-LEFT TOP-RIGHT TOP-LEFT CENTER MIDDLE-LEFT BOTTOM-CENTER
 MIDDLE-RIGHT TOP-CENTER): top-left
It is X's turn
 -----
 Y    
 
     X
 -----
computer: TOP-RIGHT
 
SAM's turn
It is Y's turn
 -----
 Y   X
 
     X
 -----
 
choose a move from (BOTTOM-LEFT CENTER MIDDLE-LEFT BOTTOM-CENTER MIDDLE-RIGHT TOP-CENTER): middle-right
It is X's turn
 -----
 Y   X
     Y
     X
 -----
computer: BOTTOM-LEFT
 
SAM's turn
It is Y's turn
 -----
 Y   X
     Y
 X   X
 -----
 
choose a move from (CENTER MIDDLE-LEFT BOTTOM-CENTER TOP-CENTER): center
It is X's turn
 -----
 Y   X
   Y Y
 X   X
 -----
computer: BOTTOM-CENTER
It is Y's turn
 -----
 Y   X
   Y Y
 X X X
 -----
COMPUTER wins
NIL
[]&gt; ^D
 
$ clisp
[]&gt; (load "othello")
T
[]&gt; (play-game othello 5 'computer 'sam) ; the 5 here is maximum depth for adversarial search
 
SAM's turn
It is BLACK's turn
 ---------------
 
       W B
       B W      
 
 ---------------
 
choose a move from (3-4 4-3 5-6 6-5): 3-4
It is WHITE's turn
 ---------------
 
       B
       B B
       B W      
 
 ---------------
computer: 3-3
 
SAM's turn
It is BLACK's turn
 ---------------
 
     W B
       W B
       B W      
 
 ---------------
 
choose a move from (3-2 4-3 5-6 6-5): 5-6
It is WHITE's turn
 ---------------
 
     W B
       W B
       B B B    
 
 ---------------
computer: 3-5
 
SAM's turn
It is BLACK's turn
 ---------------
 
     W W W
       W B
       B B B    
 
 ---------------
 
choose a move from (2-2 2-3 2-4 2-5 4-3):
 
etc..

Hard boiled eggs and the magic of shell scripts

Sam Auciello — Mon, 24 Oct 2011 21:36:40 +0000

The fridge in the Science building at Marlboro College occasionally contains hard boiled eggs which can be obtained for 50¢ a piece. I say “occasionally” but sadly it would be more accurate to say “when Allison remembers to bring them”. It occurred to me one day as I emailed her to remind her that I was doing something rather inefficient. I remembered that I now live in a dorm with a nice kitchen. I could purchase my own eggs for about $2 a dozen (a 66% savings) and boil them myself. I finally got to town to buy eggs and today I have boiled a dozen eggs. Just as the water was about to boil I realized I did not have an egg timer, so I made one.

There is of course nothing terribly exciting or new about the sleep command but the ability to quickly solve a practical problem with simple tools is always gratifying. My egg timer is the following simple text file with executable bit set:

1
2
3

sleep 600;
osascript -e 'beep 3'
osascript -e 'tell app "System Events" to display dialog "Eggs Done!"'

Yay eggs!

Alias fun and key bindings in zsh

Sam Auciello — Sun, 09 Oct 2011 19:10:10 +0000

I use my terminal for everything. I use a program called Visor that keeps me a keystroke away from my terminal at all times. It is for this reason that I spend a considerable portion of my time customizing my shell. I use zsh because it has some great features like considerably more helpful and customizable tab completion, and my personal favorite autocd. All you have to do is add the following to your ~/.zshrc file:

1	setopt autocd

And suddenly instead of:

1	$ cd some-directory/some-subdirectory

you can just use:

1	$ some-directory/some-subdirectory

and zsh will notice that it’s a directory and do the only sensible thing: go to it.

I also have a sizable number of time saving aliases:

1
2
3

alias l="ls -lahG"
alias mkd="mkdir -pv"
alias dir="open ./"

ls -lahG is nice because it gives me so much information. The -l flag formats the output into a vertical list that tells me more about each file. The -a includes hidden files and directories that start with . like .zshrc. The -h flag displays file sizes in a more readable format so if a file is 2262261 bytes long it will say 2.2M instead of 2262261. The -G flag colors my files using a custom colorings scheme that I define in my .zshenv file.

mkdir -pv is pretty straight forward. The -p flag allows me to create nested directories with a single command so that if ~/foo doesn’t exist then mkd ~/foo/bar will create both the foo and bar directories with one inside the other. The -v just generates verbose output.

open ./ is a nifty Mac OS only command. On a mac the open command will do the same thing as double clicking the file in the Finder. It’s a handy link between my terminal and the rest of my mac. In this case I can use it to quickly switch to the mac GUI interface for this directory if I need to for some reason.

I also have a number of alias that are simply shorter names for commands that I use all the time:

alias m="less"
alias e="edit"
alias t="touch"
alias sq="sqlite3"
alias o="open"
alias ql="qlmanage -p"
alias c="echo -n \"\" >"

edit is a python script I made that determines my default text editor from a configuration file and then opens the file in that editor. qlmanage is a mac specific program that does the same thing as pressing space-bar while highlighting a file in the Finder.

Backspace vs. Delete

Recently I had a problem with using zsh on certain ssh servers where my delete key (the mac equivalent of windows’ backspace) was being mapped to the windows del. That is to say it was deleting the next character instead of the previous. I finally found this wiki page that explained the problem and how to fix it. All I had to do was add the following to my .zshrc file:

1 2	bindkey "^?" backward-delete-char bindkey "^[[3~" delete-char