Development

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 in my humble opinion, uses better CSS logic for similar results.

Basically, this layout has a max-width 1,175 px (I’ve set those bounds with red lines in #goal for reference only, 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.

Use LESSCSS Client Side While Developing WordPress Theme

I write in LESSCSS because I find it’s nesting so much eaiser to read. While creating a theme, I never compile during, it’s too annoying, instead I have a on/off toggle for using .LESS file or .CSS file.

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

In the snippet I made the toggle WP_DEBUG, which should be on while you develop, but if you’re developing in a network it’s eaiser to use a global veriable from functions.php

Furthermore if you are using LESSCSS and are developing/maintaining a lot of WordPress themes, I highly suggest making a shortcut for LESSCSS in bash:

https://gist.github.com/davidsword/71e290a3afd296e841bca3f33099d5e2

So all you have to do is type less when you’re in the theme directory. If you’re not comfortable with terminal, I’ve written about a PHP LESSCSS Compiler.

PreLoad Images With jQuery

Another incredible snippet if you’ve got a JS app that changes images and want said images to be ready and loaded, but not overwhelm the normal page load.

https://gist.github.com/davidsword/765532bd4b0bf81b74c9c81060a01fa5

Remove Select POST FORMATS from Child Theme

The documentation left this out, but if you want to remove some post formats from a WordPress child theme, the remove_theme_support( 'post-formats') does not allow you to pass an array of formats, it’s just a hard switch. However you can over-write the original add_theme_support('post-formats') with only formats you desire.

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

WordPress ShortCode API – How to make a function echo and not break

According to my previous understanding and WordPress’s documentation:

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results

So, we’re limtied, shortcode functions must return, not echo. So:

https://gist.github.com/davidsword/394108430a76c36aa9cefb6c809dc187

Has been my understanding for years. Unless…

https://gist.github.com/davidsword/1a590c2a11bb55531ddfc98eb83afee3

Yeah. Yeah. That’s right! You can use output buffering to collect your echo’ed HTML from printing, and return it instead.

This is good to use when a shortcode has dozens of lines some multi-language script. For example I’m working on a custom Google Map with Javascript, it’s 200 lines, called to via [map] and has lots of PHP, HTML, some CSS, and WordPress conditional statements weaved into it. It’s a nightmare putting that much Javascript and multi-language markup into a PHP string, escaping quotes alone is a pile of trouble. What’s worse is the syntax highlighting from the IDE is lost, so any bug fixes or changes, you loose a great assistant. I know there’s other solutions, I could build a class, or I could do a file_get_contents() and reduce my PHP to being at the top of the script, or similar, but when the scripts not too long, it’s just so nice to have raw HTML inside the function, instead of dealing with everything else.


Update: Another great use for this is if you want to include() a local file’s echo‘ed results into a variable. If you use get_file_contents() you’ll receive the unexecuted code, storing executed code in an object allows you to return it into a variable. For the following example /file.php is just a simple file with echo "Rock the boat";

https://gist.github.com/davidsword/29aa612b73266c72b79e41bddbe01174

With the above, $files_output will be Rock the boat. Neat eh!