PHP Snippet – array_splice_assoc(…)

Recently I was working on something that required inserting key-value pairs into an array after a specific key in PHP. As I was looking through stackoverflow answers I realized that there was no awesome answer that really jumped out at me. Therefore I decided to take a few minutes to just write my own array_splice_assoc() function to get the job done:

As you can see this function takes the same parameters that array_splice() does but the difference is that the offset can be a string in this key which refers to the key after which the new array elements should be inserted.

One important thing to note is that if you try to insert a key-value pair in which the key exists before or at the offset, your key-value pair will not be inserted. On the other hand if you try to insert a key-value pair in which the key exists after offset, your value will replace the previous one.

Have fun! :cool:

Game – Bible Book Master

Yesterday I really wanted to make a multi-lingual so I decided to make a game in which you have to go through all of the books of the Bible as fast as you can. I still need to do some work on the game to make it more user-friendly, but the following (which can also be accessed here) is what I came up with:

As of when I wrote this post the game supported 9 languages including English, Spanish, Vietnamese, Korean, and Haitian Creole. I chose the languages based on those in which I could find the names of all 66 Bible books. In fact, in all cases except for Vietnamese I used the Online Watchtower Library on jw.org in order to get the bible book names, using this JavaScript code in the web console:

$('.book .name').map(function() {
  return $(this).text();
});

As far as translating the rest of the words in the game, since I kept the amount of text to a minimum I simply used good ol’ Google Translate.

Since I wrote the server-side in PHP I ended up using $_SERVER['HTTP_ACCEPT_LANGUAGE'] to auto-detect the language if it wasn’t set:

$lang_code = valueOf($_REQUEST['lang'], preg_replace("/\W.*/", "", $_SERVER['HTTP_ACCEPT_LANGUAGE']));

Finally, I spent way more time than I wanted to on the rounded CSS3 buttons:

.round-button {
  font-size: 64px;
  line-height: 3em;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: #000;
  color: #FFF;
  display: inline-block;
  text-align: center;
  font-family: fontello;
  transition: 0.5s cubic-bezier(0.5,0.5,0.5,0.5) all;
  cursor: pointer;
  box-shadow: 0 0 0.25em #000;
  z-index: 1;
  position: relative;
  border: 0.05em solid #000;
  padding: 0.45em;
  margin: 0.5em;
  box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.5) inset, 0 0 0 #000;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.round-button .text {
  font-size: 0;
  position: absolute;
  line-height: 1em;
  margin-top: -2em;
  display: block;
  width: 6em;
  text-align: center;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
  transition: 0.5s ease all;
}
.round-button:hover {
  box-shadow: 0 0 0 0 #000 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  background: #FFF!important;
  z-index: 2;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  color: #000;
  padding: 0;
  border-width: 0.5em;
}
.round-button:hover .text {
  font-size: 0.5em;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
}
.round-button:active {
  box-shadow: 0 0 1em 0.1em #777 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  transition: 0.1s ease box-shadow;
}

As you will see in the game, each rounded button is actually individually colored. For example, the following is for the facebook button:

.round-button.facebook {
  background: #3b5998;
  border-color: #3b5998;
}
.round-button.facebook:hover {
  color: #3b5998;
}

All-in-all I am happy with how this game turned out but I would like to add a few improvements. Try the Bible Book Master game out yourself and let me know what you think. :cool:

Game – Where’s the Nose that Knows?

I noticed that lately there has been interest in finding a panda in a large array of snowmen in this post. There was also this post where you have to find a cat amidst a great deal of owls. I started thinking about how I could make a similar game that is randomly generated. I ended up with the following HTML5 version in which you have to either find the one face with a nose or the one face without a nose:

Here is a link to the actual page. Let me know what you think! :cool:

PHP – Re-indexing 2D Array By A Specific Key

Today I was working on a personal project and wanted to be able to use a native PHP function to re-index a 2D array so that the key for each sub-array was pulled from a value in that sub-array. Unfortunately I wasn’t able to find a way to simply do it natively although it may exist. Therefore I wrote this array_by_column() function:

To use it you can simply supply the 2D array as the first argument and the key (or column name) as the second parameter.

365.2425 Days in a Year?

I was looking through some of the posts on Google+ and noticed that one of Douglas Crockford’s posts alluded to the fact that there are 365.2425 days on average in a year. At first I thought that the number should’ve actually been 365.25 due to us seeing a leap year every 4 years, but then I remembered that leap years don’t always happen every 4 years.

The rule is that a leap year will be a year evenly divisible by 4 and if it is evenly divisible 100 it must also be evenly divisible by 400. Therefore 1896 was a leap year, but the next leap year wasn’t observed until 1904.

Keeping all of this in mind, let’s see if we come to the same conclusion that there are 365.2425 days in a year on average. First, let’s determine how many days are in the typical 4 year period:
365 days × 4 + 1 leap day = 1,461 days

Now let’s determine how many days there actually are in a 400 year time span. Since we already have a rough calculation for 4 years, we can multiply that by 100 and then account for the 3 times the 3 leap days that wouldn’t occur because even though the year would be divisible by 4 and 100 it wouldn’t be divisible by 400:
1,461 days × 100 - 3 leap days = 146,097 days

Now let’s simply divide the number of days in a 400 year time span by 400 to get the average amount of days in a year:
146,097 ÷ 400 = 365.2425

So now you know why it is said that on average a year is 365.2425 days long. :cool:

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, Math, and much more.