Anthony Sutardja

I'm a student at UC Berkeley. This is a sandbox for my snippets, thoughts, etc.

[anthonysutardja-blog]

Slice vs Splice

In JavaScript, Array.slice preserves the original copy of the array while Array.splice modifies the original array.

e.g.

var arr = [1,2,3,4]; console.log(arr.slice(1)); // will yield [2,3,4] console.log(arr); // will yield [1,2,3,4]; console.log(arr.splice(1)); // will yield [2,3,4] console.log(arr); // will yield [1];

Check out the docs for slice and splice.

[anthonysutardja-blog]

For when you don't know what takes precedence

[anthonysutardja-blog]

Experts see the cathedral first, then the bricks. Novices grab desperately at every brick in sight and hope one of them is worth at least partial credit.

Mark Eichenlaub, PhD student in Physics

[anthonysutardja-blog]

IE Compatibility

Internet Explorer compatibility is, and has always been, a pain. Microsoft has recently bridged many of the disparities between Internet Explorer and other modern browsers with IE10, but adoption is still not 100% and I still find myself having to support versions below IE10 at Yelp.

For those of us that don't work with Windows computers, IE testing is hard. But Microsoft's got your back.

Microsoft has a tool to help developers discover problematic HTML/CSS/JS snippets that may cause issues in IE browsers.

If you're running OS X, you can even download free VM images from Microsoft. They have images of all versions of IE in Windows XP/Vista/7/8 that work with VMWare, Parallels, and VirtualBox.

I am currently using the Windows 8 VM with IE10. The built-in developer tools allow you to switch between different compatibility modes for rendering your content in IE7,8,9; although I have yet to see if this compatibility mode is accurate against the actual browser versions on older OS's.

The biggest difference I've found in debugging with IE developer tools is to click the damn "Start Debugging" button. You can set breakpoints as usual, but they don't actually do anything unless you hit that little button (which has an icon that doesn't really tell me anything).

If you haven't tried out these tools, I'd recommend having a look. Plus, it's free!

[anthonysutardja-blog]

HTML5 Form Validation & jQuery event handlers

The built in validators in HTML5 are great. For those not familiar, you can include attributes that allow required regular expression and required validators into form inputs.

<form> <input type="email" required /> </form>

If you try this snippet out, you will see that the browser will validate if a syntactically valid email address has been inputted.

These browser validators are great, but they don't work if you try to handle the form with jQuery in the wrong way.

My usual go-to pattern is to simply bind the click event of the button to an event handler. However, if your event handler performs an AJAX form submission, your form will no longer validate the fields before the submission, as seen here.

When you click on the submit button, the click is the first event fired. The submit event follows, but not necessarily. The validity of the input fields are checked prior to triggering a submit event. If and only if the form is valid, then the form will fire a submit event. For the truly curious, here are the implementation specs delineated in gruesome detail.

Hence, you shouldn't bind form submissions to the click event, but rather the submit event. You can this easily with jQuery's .submit() function. Check out an example here.

[anthonysutardja-blog]

In the city

What's up Internet -- it's been a while since I last posted. My school work, activities, and jobs have kept me busy, which has left little time to blurt out or reflect on random thoughts.

However, once again, it's summer and I have the luxury to jot down random stuff. This time around I'm living in San Francisco working at Yelp! I really love it here and am happily digging deep into my first project.

Seeing that I didn't really fulfill my commitment towards one post a day last summer, I have downgraded my expectations to a few posts a week. However, I have a feeling this time around it will not be as difficult to come up with thoughts to jot down as before. I'm learning so much at work and have many curiosities to explore. I already have many tips, experiments, and practices that I want to share!

On another note, I'm also making an effort to explore the city as much as I can. Even though I'm from Berkeley, I rarely have the time to trek across the bay into the city. Living in the center of San Francisco really opens the doors up to doing anything.

Just a day after I moved into my apartment, I went to a tea house (in an attempt to be sophisticated), where my brain was steeped in way too much tea knowledge.

All in all, I'm excited to be here. Summer, let's roll!

[anthonysutardja-blog]

Some cool python eggs

Try them out! > `import this` > `import antigravity` > `from __future__ import braces`

[anthonysutardja-blog]

Deploying a child folder to Heroku

When I'm working on a project with many different parts, I will often place different components into different folders. I'll end up with a Git repo that looks something like this: /parent_folder /child1 /child2 /child3 However, if `child1` is the only folder I want to deploy to Heroku, I run into some errors. [Heroku states](https://devcenter.heroku.com/articles/git) that the pushed root directory must contain the `Procfile` and `app.py` (or whatever one decides to name their main app file). To solve the root directory problem, I pushed the subdirectory with [git-subtree](https://github.com/apenwarr/git-subtree/). Downloaded the zip and ran `sudo ./install.sh` to add the plugin to git. The following will push only your child directory to Heroku > `git subtree push --prefix frontend heroku master`

[anthonysutardja-blog]

[anthonysutardja-blog]

Pro-tip for late night walks

Walk around with with a [police scanner app](https://itunes.apple.com/us/app/5-0-radio-police-scanner-lite/id356336433?mt=8) on full blast as if you were a undercover cop.

[anthonysutardja-blog]

Python dictionaries

I've been recently implementing a memoized version of the Levenshtein Distance function that requires the memoization dictionary to be reset after each use. My original intuition was to use d.clear() for the dictionary, but I wondered if creating a new dictionary would be any faster.

The results suprised me:

$ python -m timeit -s "d={}" "for i in range(500000): d.clear()" 10 loops, best of 3: 55.3 msec per loop $ python -m timeit -s "d={}" "for i in range(500000): d=dict()" 10 loops, best of 3: 176 msec per loop $ python -m timeit -s "d={}" "for i in range(500000): d={}" 10 loops, best of 3: 29.2 msec per loop

As you can see, the act of creating a new dictionary gave me two very different results; one better than using the clear method and one worse.

Matt Good over at Stackoverflow explains the nitty gritty:

Python allocates a fixed-size "free list" where it can quickly allocate dictionary objects (until it fills). Dictionaries allocated via the {} syntax (or a C call to PyDict_New) can come from this free list. When the dictionary is no longer referenced it gets returned to the free list and that memory block can be reused (though the fields are reset first).

Since the {} syntax is handled in byte-code it can use this optimization mentioned above. On the other hand dict() is handled like a regular class constructor and Python uses the generic memory allocator, which does not follow an easily predictable pattern like the free list above.

TL;DR: Use d = {} when creating dictionaries for faster execution.

[anthonysutardja-blog]

Taking on a 32-hour hackathon solo

This roundup comes a little bit late _(by 2 weeks)_ because I've been busy moving all my stuff back into my apartment. A couple weeks ago I attended a hackathon at [Box's](http://box.net/) headquarters. The hackathon was great; free **delicious** food (Chicken Tikka Masala wraps), high profile speakers (CEO of Yammer), and a great work environment (except for those really hard chairs that were hard to sit in for durations of more than an hour). ##The event I haven't been to many hackathons, but when I attend I usually go with friends that I know and am comfortable working with. This time, however, nobody around was available to go. In retrospect, I'm glad I didn't go with anyone. Going alone served as that extra bit of motivation to go meet and greet others more openly. There was a huge a variety people there: a few juniors and seniors were still in high school, some college students from across the world (Singapore and Carnegie Mellon) were relaxing from their internships, and even a few full-time software engineers (I could tell by their gray hairs) were trying their hand at the hackathon's grand prize. ##My project - [Drop Channel](http://anthonysutardja.com/channel/) My project was essentially the Mac OSX's AirDrop ported to a web application with some minor differences. AirDrop provided the user with the ability to share files with another Mac user via a wireless/wired network. However, AirDrop has a few gnawing stipulations: - Doesn't work with Windows or Linux - Can't share with people on different subnets and/or networks - Can't share with a group of people Drop Channel is network agnostic; it only cares about your physical location. The *canvas* provides an area for users to add files to share to anyone within a 50 meter radius. The canvas can get cluttered if many files are being shared, so *channels* are used for de-cluttering the visual drop space. Channels are labeled by different colors. Files, as well as file placement on the canvas, are synced with all users who visit the website. To do this, I used [Firebase](http://www.firebase.com/) to synchronize everything. Firebase is a backend that makes building real-time apps stupid-easy; it essentially synchronizes JSON data on all clients painlessly. For handling the files being uploaded, I used [Filepicker.io](https://www.filepicker.io/). It is by far the easiest API I have ever used for file management. I included a total of 2 lines of code to handle all file upload interactions (which includes drag and drop file handling, Dropbox, Facebook, and a host of many ways to upload data). You can check it out [here](http://anthonysutardja.com/channel/) and the source is on [my github account](https://github.com/anthonysutardja). I didn't end up winning any prizes from the event sponsors, but made a cool app that I've been using frequently myself and made a few friends. Can't wait until another one!

[anthonysutardja-blog]

[anthonysutardja-blog]

Well that's just complicated and cool.

[anthonysutardja-blog]

An OSX Prank

You can get a real good view of OS X's Mission Control with this:

defaults write com.apple.dock expose-animation-duration -float 30; killall Dock;

I'm sorry for wasting a minute of your time.

[anthonysutardja-blog]

Mountain Lion, X11, and Gnuplot

Only a year after Lion's release, Mountain Lion has arrived. This post is not a review of the OS X 10.8, nor is it a review of the review. Rather, I'll talk about how its screwed up Gnuplot.

A couple months ago, I wrote a post about installing Octave on Lion. After installing Mountain Lion, Gnuplot just stopped plotting stuff. First, I hunted down AquaTerm (what Gnuplot defaults to plotting in). Launching it independently (located in /Applications/Gnuplot.app/Contents/Resources/lib) and got this lovely message:

Check with the developer to make sure AquaTerm works with this version of OS X.

Awesome.

I knew that Gnuplot could also plot in X11, so I tried launching X11. My system responded with "What X11?" and led me to the Apple support site:

X11 is not included with Mountain Lion, but X11 server and client libraries for OS X Mountain Lion are available from the XQuartz project: http://xquartz.macosforge.org. You should use XQuartz version 2.7.2 or later.

Followed the link, downloaded the package, and installed XQuartz. Now things in Gnuplot work after typing set term 'x11'. To default Gnuplot to X11, add export GNUTERM='x11'. Now when you plot with Octave it should plot with Gnuplot in X11. However, if X11 isn't running, Gnuplot erroneously tries to launch the original X11.app:

The file /Applications/Utilities/X11.app does not exist.

To fix this, symlink X11.app to XQuartz.app. And then you're done!

TL;DR: AquaTerm is not compatible with Mountain Lion and X11 isn't included. Follow steps to get Gnuplot to work.

Download and install XQuartz

Add export GNUTERM='x11' to your environment (e.g. .bash_profile)

ln -sf /Application/Utilities/XQuartz.app/ X11.app

Plot a sombrero().

UPDATE #1: Clarified instructions

I have received several emails over the course of the last few months for step-by-step instructions of the process. Here's what I've been sending to people:

1. Download XQuartz(XQuartz-2.7.2.dmg)

XQuartz is X11, which is a window emulator in which GNUplot can run and plot stuff.

2. Download XCode from the AppStore

I'm not sure if this step is necessary because I already had this installed prior to having installed GNUplot. This development package (around 1.5 GB) is a hefty download. To check if you need to do this step, try launching XQuartz after you install it. If you cannot install XQuartz/ cannot launch XQuartz, install XCode first. If it still doesn't work, install commandline tools in XCode. Do this by launching Xcode, in the menu bar XCode > Preferences. Then go to the Downloads tab and install the Command Line Tools.

3. Link XQuartz to X11 in terminal

Open up Terminal (located in /Applications/Utilities/). Or you can use spotlight (cmd+space) and type Terminal to launch it. If you are unfamiliar with UNIX, terminal is a text based operating level in which you can execute commands/run processes.

In the terminal, copy/paste or type:

sudo ln -sf /Applications/Utilities/XQuartz.app/ /Applications/Utilities/X11.app

This will prompt you for a password to execute the changes. What this does is really a patch for Mountain Lion. Previously, X11 was supported in all installations of OSX. However, with Mountain Lion, they removed this support. So we downloaded and installed XQuartz, but older applications still look for XQuartz by the name of X11. By running this command, we make a link from X11 to XQuartz.

4. Add the default terminal emulator as x11

GNUplot (which you will download in the next step) tries to run plots in a terminal emulator called AquaTerm, which is packaged with GNUplot. HOWEVER, AquaTerm does not run on Mountain Lion! So we must set the terminal emulator as X11, which is just XQuartz. To get GNUplot to automatically run in XQuartz, enter this in terminal:

First execute

cd ~

Then execute

echo "export GNUTERM='x11'" >> .bash_profile

The first command, changes your directory to your "Home" directory. This is the directory where we need to place a script that will allow GNUplot to read some default settings. The second command will insert the necessary changes to your settings in the file ".bash_profile"

5. Download Octave and GNUPlot (octave-3.4.0-i386.dmg)

You do not have to install Octave, but if you choose to, mount octave-3.4.0-i386.dmg by double clicking on it, and then copy (or drag) Octave.app to /Applications/. If you cannot find the /Applications/ folder, try cmd+clicking Safari and it should bring you right there. To install GNUplot, go to theExtras folder and copy gnuplot.app into your /Applications/ folder.

5.1. Repair the Gnuplot-4.4.3 included with Octave-3.4.0 DMG

Open /Applications/Gnuplot.app/Contents/Resources/bin/gnuplot in a text editor. Use the editor search-and-replace feature to replace "DYLD_LIBRARY_PATH" with "DYLD_FALLBACK_LIBRARY_PATH". There are four instances that need to be replaced.

6. Launch gnuplot.app (the one in the /Applications/ folder)

You should be set! Don't forget to unmount the install images you mounted. Usually you can find little eject buttons in the lefthand bar in Finder.

UPDATE #2: I've been told by another reader, Saleem, that Aquaterm does indeed work with ML again as described here.

[anthonysutardja-blog]

Github for students

If you're a student, part of a student organization, or teacher, you can get a free Github micro account (that's 5 private repos). I love Github.