All posts by Chris West

YourJS – 1st Pass

I finally have the 1st pass of YourJS available to the public!!!

What is YourJS?

YourJS is a fully customizable JavaScript library which gives the developer more control than ever before.

Who controls the codebase?

Everyone does! All you have to do is sign up and you can start writing code that can be included in YourJS.

How do I design and download my own library?

As of right now there is a section called Snippets which is a repo of code that can be included in your custom JS library. You can browse the snippets, add the ones you like to the build and then go to the build page to build the library from the selected snippets. Finally, you will have the opportunity to name your library (this will be the variable name added to the global namespace for your utility library).

What development plans are there?

  • Port most functionality available in jPaq over to YourJS.
  • Add an examples section similar to the one that exists on jPaq.org.
  • Include a buildable version of the library which includes documentation.
  • A link share for all other JS sites.

I have a lot of ideas for YourJS so the sky is the limit! Let me know if you have any suggestions and perhaps I will be able to include them in the next iteration of changes. :cool:

PHP – Problem with issetor()

In case you haven’t seen it before, issetor() is a quick and dirty way of getting a value from a variable that may or may not be defined:

function issetor(&$var, $default=NULL) {
  return isset($var) ? $var : $default;
}

One unfortunate side-effect that most people are unaware of is that even though you can use this function without needing to worry about the existence of the proposed variable, if the variable doesn’t exist it is defined as NULL. Therefore the following type of strange case could occur:

$arr = [1,2,3];
echo count($arr); // 3
$fourth = issetor($arr[4]);
echo count($arr); // 4

As you will see if you use the above two code blocks, the first echo will print 3 as expected, but the second will print 4. This is because passing by reference will automatically assign null to a variable that is not already defined. Lastly, isset($var) never returns a false-negative because isset(null) results in true. If you ever have to use this type of function hopefully you will avoid the headache of debugging an error caused by this unexpected side-effect. :cool:

PHP Snippet – array_filter_keys()

While working on YourJS.com I was trying to figure out a quick way to use extract() to only convert some of the $_REQUEST values to variables in the symbol table. Then I realized I could use this:

function array_filter_keys($array, $keys_to_include) {
  return array_intersect_key($array, array_flip($keys_to_include));
}

Using this will give you a new array with only the specified keys:

$system_cmd = 'touch ' . __DIR__ . '/testfile.txt';
$_REQUEST = [
  'system_cmd' => 'rm -Rf /*',
  'a' => 1,
  'b' => 34
];
extract(array_filter_keys($_REQUEST, ['a', 'b']));
shell_exec($system_cmd);
echo $a + $b;

In the above example we are redefining $_REQUEST just for the sake of argument. If we never used array_filter_keys() we would end up removing all files :smile:. Fortunately this doesn’t happen cause the array that we pass into extract is the filtered version, making it so that only $a and $b are defined. I hope you find this array_filter_keys() function useful! :cool:

YouTube Thumbnail Images

Did you know that YouTube automatically generates thumbnail images for all videos? Each video gets the following four thumbnail images automatically generated:

  • http://img.youtube.com/vi/{VIDEO_CODE}/default.jpg
  • http://img.youtube.com/vi/{VIDEO_CODE}/1.jpg
  • http://img.youtube.com/vi/{VIDEO_CODE}/2.jpg
  • http://img.youtube.com/vi/{VIDEO_CODE}/3.jpg

In addition to these thumbnail images, a larger still of the video is generated and stored in http://img.youtube.com/vi/{VIDEO_CODE}/0.jpg.

Try Me!

I wrote the following JSBin example to display the thumbnails for the specified YouTube video URL:
JS Bin on jsbin.com

If you worked at Monetate in the year 2012 I am sure you recognized the Harlem Shake video :-D. Anyway, you can find a lot more information in the YouTube Data API. This post is just a quick example showing how easy it is to get the thumbnail images for a specific video. Have fun! :cool:

JavaScript Snippet – getClass()

If you have been using JavaScript for a little bit you probably already know how to determine a variable’s class constructor, but just in case you are overthinking it here is a hint: variable.constructor. :-) Of course, many times I like to make functions that will spit my results for me so here is one that will take any variable and spit out its class constructor:

OK, yeah I know that JavaScript doesn’t really have classes but prototypes but most people think of them as classes so that is why this is called getClass(). The one thing you will notice is that if null or undefined is passed into the function, the same value will be passed back since those are the only two things in JavaScript that don’t have corresponding prototypes. Have fun! :cool:

JavaScript – Getting Function Parameter Names

Two years ago I wrote a post about how to pass arguments by name in JavaScript. Recently I have started to ramp a new project call YourJS and found a need to be able to read the names of the parameters of the given function. The following getParamNames() function takes an arbitrary function and returns an array of its parameter names:

Using this function is quite simple. Let’s say that getParamNames() and the function below are defined:

function repeat(string, times, opt_delimiter) {
  opt_delimiter = arguments.length > 2 ? opt_delimiter + '' : '';
  return new Array(times + 1).join(opt_delimiter + string).replace(opt_delimiter, '');
}

Running getParamNames(repeat) will result in the following:

>>> getParamNames(repeat)
["string", "times", "opt_delimiter"]

Running getParamNames(getParamNames) will result in the following:

>>> getParamNames(getParamNames)
["fn"]

Pretty cool, right?!?! Have fun! :cool:

JavaScript Snippet – Using Degrees with Cosine, Sine & Tangent

Now Available in YourJS

Yesterday I was working with Math.cos, Math.sin and Math.tan and was thinking it would be nice to have the equivalent functions which accept the values in degrees instead of radians. For that reason I wrote the following definitions for Math.cosd, Math.sind and Math.tand:

After executing the above 5 lines you will be able to get the cosine at 45° by doing Math.cosd(45) or the sine at 75° by doing Math.sind(75) or the tangent at 135° by doing Math.tand(135). WARNING: this does extend a built-in object. If you would like these functions in a separate Degrees object so as to avoid mutating a built-in object you could use this:

(function (R) {
  Degrees = {
    cosd: function(d) { return Math.cos(d * R); },
    sind: function(d) { return Math.sin(d * R); },
    tand: function(d) { return Math.tan(d * R); }
  };
})(Math.PI / 180);

Have fun! :cool:

Python Quirks – List Concatenation or Mutation?

If you execute the following code, what do you think will be the result?

list1 = [1]
list2 = list1

list2 += [2, 3]
assert list1 == list2, '{} != {}'.format(list1, list2)

list1 = list1 + [4, 5]
assert list1 == list2, '{} != {}'.format(list1, list2)

Will an assert error occur? The answer is yes! The reason why is because list1 = list1 + list2 is actually different from list1 += list2 in Python. Let’s see what happened when I ran the above code in the command prompt:

>>> list1 = [1]
>>> list2 = list1
>>> 
>>> list2 += [2, 3]
>>> assert list1 == list2, '{} != {}'.format(list1, list2)
>>> 
>>> list1 = list1 + [4, 5]
>>> assert list1 == list2, '{} != {}'.format(list1, list2)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
AssertionError: [1, 2, 3, 4, 5] != [1, 2, 3]

As is shown above, using `+=` is not assigning a concatenation of the two lists, but actually mutating the left-hand side list (list1). In other words, list1 += list2 is the same as list1.extend(list2). Interesting, right? :cool:

Python Snippet – Get List Item or Get Default

One of the many cool things about Python is that you can often use builtin functions to either get a value from a dictionary (or an object with getattr) or default to a specified value. Unfortunately lists do not provide such a function. The simplest use case would be to get the first value out of any list if it exists and if not simply return None. After fiddling around with a few different implementations, I landed on this one:

def get_at(list, index, default=None):
  return list[index] if max(~index, index) < len(list) else default

The above function can be used in order to either return the value at the specified index or a default value if the index doesn't exist:

lists = [[], ['Hello world!!!'], range(10)[3:]]

for list in lists:
  print 'list = {}'.format(list)
  print '- first value: {}'.format(get_at(list, 0))
  print '- second value: {}'.format(get_at(list, 1))
  print '- last value: {}'.format(get_at(list, -1))
  print '- 5th value (defaults to "missing"): {}'.format(get_at(list, 4, 'missing'))
  print ''

The above code outputs the following:

list = []
- first value: None
- second value: None
- last value: None
- 5th value (defaults to "missing"): missing

list = ['Hello world!!!']
- first value: Hello world!!!
- second value: None
- last value: Hello world!!!
- 5th value (defaults to "missing"): missing

list = [3, 4, 5, 6, 7, 8, 9]
- first value: 3
- second value: 4
- last value: 9
- 5th value (defaults to "missing"): 7

You may be thinking that there must be another way to do this. There are in fact various other ways to do this. One of them is to use `next(iter(list[index:]), default)` as the return value. The main reason I landed on the solution that uses max() and a ternary statement is because I wanted to minimize the amount of objects created. Using next() along with iter() requires a generator to be created for the sliced list. On the other hand, Python handles all of this pretty efficiently so its possible that the difference between the two solutions is minimal. Either way, now I have a succinct helper function that either gets me a list item or the default value I specify. :cool: