Google Maps v3 API AutoComplete Use First Result

The following script stores the first result from Google Maps v3 API AutoComplete into a hidden input, allowing you to do something with the autocomplete input field if the user decides to type their address instead of click a result. I’ve included only the extra code ontop of the normal autoComplete script.

https://gist.github.com/davidsword/b4969ddffee2bcdf659c79b541a259db

WP-CLI Works But Gives ERRORs For All Updating

Every developer has these all-day’er’s. What in the happenings of happenings is happening. I had it with one of my favourite tools wp-cli something I rely on heavily for my workflow.

Clean installed, valid versions, so on. wp list plugins returned all good. However any real writing like wp plugin update --all failed. And the error’s are so vague:

PHP Warning: array_filter() expects parameter 1 to be array, boolean given in phar:///usr/local/bin/wp/php/WP_CLI/CommandWithUpgrade.php on line 319
Warning: array_filter() expects parameter 1 to be array, boolean given in phar:///usr/local/bin/wp/php/WP_CLI/CommandWithUpgrade.php on line 319
//…
Error: No plugins updated.

What made matters worse: no one else seemed too of experienced this, so I had no resources online to work off of.

The problem was two-fold:

1) The php.ini file being used (found via wp --info) was PHP cli’s, not apache’s, so short_open_tag wasn’t set to On. I have many plugins that use this tag and I didn’t know about cli having it’s own php configuration.

2) I had folders in my themes/ and plugin/ that were soft deleted (there but inaccessible) set to chmod 700. That needed to be removed. Apparently wp likes to read every folder therein and if it can’t it throws a fit.

I was able to discover these problems and bypass them with the --skip-plugins flag. So if you’ve experienced anything like what I just went through, try that, and lookout for those two issues above.

CSS Menu/Nav Hamburger Animation

CSS Menu/Nav Hamburger Animation

While finally buying a Keurig today, I (oddly) decided to do my research on my phone instead of desktop, and also (oddly) decided to go to Keurig.ca instead of my normal stomping ground of Amazon.ca. While there, I was distracted in a nerdy daze by the animation they added to their hamburger navigation, immediatly stoped everything and went to code it myself.

A very polished touch to a now very common element:

https://gist.github.com/davidsword/3ca3347ae8cf763a3a7bf89270ff340f

I used CSS3 var for easy line weight changing. Playing around with EASE also gives the button much more life. (It took two cups of coffee to write and refine that).

Make Height Match Dynamic Width To Create Dynamic Squares CSS

Make Height Match Dynamic Width To Create Dynamic Squares CSS

This is a fix I’ve got running in my image gallery. The height of the image’s are dynamic- the square images would make the boxes square themselves, but during load, their containers height is 0 and you get a really chalky and ugly load staggering. Running a fix in Javascript fires too late, and I don’t want to hide everything until JS can get to it, so CSS is the fix; finding the dynamic width and making that the height:

Found from a thread in stack overflow, I hope this helps someone else:

https://gist.github.com/davidsword/c39ff32da9aa3f256513a7dcc79ff237

Yeah that’s it, a pseudo element can take on the dynamic height based on the dynamic width.

Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds

Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds

At the time of writing this, this is what I currently have built my site on. It’s inspired by Twenty Fifteen’s layout, but imho, has better code.

Basically, this layout has a max-width 1,175 px (I’ve set those bounds with red lines in #goal for reference, it doesn’t actually contribute), however the sidebar and main content areas are still edge-to-edge flex – and the ratio remains the same.

I’ve never really got into flex box, but it’s amazing. I quickly found flex-bias and this will keep the boxes in the same ratio, we then house an inner container to relate to our fixed max-width. And, well the code will explain better:

https://gist.github.com/davidsword/e2d6588d55a2f69b498e356f006e23c5

Server Stats on Desktop

Server Stats on Desktop

Knowing how my server is preforming at all times kind of an hobby with mine. I know I can subscribe to some tools and services that display this info in beautiful graphics and charts, but I like simple things, and I like using default stuff. Years ago I wrote about a similar script to this, that used this info with jQuery gauges and Panic StatusBoard, but this is a much cleaner and easier method, and much simpler, and I just like it a whole heck of a lot better. So to do this, we have three steps:

  1. Remote Server cronjob that puts top output into a non-public server_top.txt file
  2. Remote Server public PHP file server_top.php that regex’s and sorts out the server_top.txt values and creates a serialized array of our desired stats for public
  3. Finally a local PHP file geeklet-server_top.php file that converts theserialized array into something and put it on our desktop with GeekTool

First on Remote Server we need to make sure top outputs all CPU’s so we can factor them all in and find an average. To do that, run top and hit the key 1 this will reveal all CPUs. Next hit W to save this CPU-revealed configuration as default.

We then setup a cronjob with crontab -e that puts the top result in a file in a non-public directory:

https://gist.github.com/davidsword/5020318fe00c167a1d00107fd8182c5e

Second, with our server outputing top into a non-public file, we don’t want to share all the info, so we’ll be cryptic with this next script. We’ll make a file in the public directory called server_top.php and we’ll read the .txt file, and only output a vauge array of non-compromising data, which we’ll interperut locally in the next step:

https://gist.github.com/davidsword/b01a38ea335471c23615e0330eeeb286

Lastly, with out Remote Server now giving us an array of the CPU, Memeory, Average Load, Top Time, and HDD size, we’ll render this data on our local server into bars for GeekTool:

https://gist.github.com/davidsword/9efeecac8769887a2a2afb038011153a

We locally, now have a script creating our server stats into bars. We then create a new Shell Geeklet and run the command:

https://gist.github.com/davidsword/a382521e4d04073a9b15f9c24c69a952

Then set the font to somthing monospace for lining up the text, and to refresh as often as our crontab does, and that’s all!

You’ll notice there’s a warning point, which simply changes the progress bar to somthing more attention grabbing if any of the stats are above a conerning percentage. If static text hidden on the desktop isn’t enough, you could take this script further and use mail() or to email you a notification of this high stat.