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:

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:

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:

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:

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:

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

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.

Really Simple PHP CURL and Cache of JSON Result »

When using PHP CURL with a third party API, I’ve found keeping the JSON results in a local cache is easier than constantly querying the service – especially when the API is slow or has query restrictions.

Here’s a great snippet I save in my tool belt and use quite often:

If the API is really slow (I’ve encountered two myself) I suggest splitting the snippets CURL+Cache section and putting it into it’s own file, from there create a CRON command to execute the independent CURL+Cache file. That’ll separate the slow API from your PHP app, and your JSON data will still be up to date in the background.

Emoji short name’s to HTML HEX Code via PHP »

I‘ve been working on a Slack App that shows recent Slack posts and activities. The majority of recent posts include emojis, and problematically Slack’s API doesn‘t store and send emojis as characters, they’re down-converted to their respective shortnames, then wrapped in colons (presumably for universal support – it appears to be a standard practice of some sort, as many use it).

Basically I was just looking for converting

:thumbsup: to convert to: 👍 which’d show: ?

Simple enough task, but I couldn’t find any resources to do it (and if you’ve discovered this blog post, you’ve probably discovered that out too). So, starting at the top, Slack in their API docs refers to using github.com/iamcal/emoji-data as their emoji shortcode source. This repository does have a PHP script, but it doesn’t convert as simply as I wanted it to, and it’s huge.

Taking a step back, iamcal/emoji-data has a enormous master .json file, basically a database of each emoji and all variations therein. Taking this file, and running through it with some basic PHP, we can build a simple array of shortcode => hexcode. Doing this was almost too easy:

We then take the output of that file, and create our own emoji_unicode.php file, an array housing the values output above. Which looks like:

Much smaller and easier to work with. 97% smaller actually coming in at: 35KB instead of 928KB. I’ve hosted the file on github here.

So with a simple array to call back to, we can just include it, search the string for the colon’ized shortcode emojis and replace with hex code, like so:

Which’d output

hello ? . it’s ? ⏱.

This works with :skin-tone-x which surprised me- I guess the skin-tone is a “invisible” character of it’s own, that basically gets compounded with the emoji character before it, and changes the emojis that way. Pretty cool, so no extra work for that. (And no, this method doesn’t work on devices that don’t support emojis).

StarCraft 2 Ladder Rank on Panic Status Board »

StarCraft 2 Ladder Rank on Panic Status Board

UPDATE: This has not been updated to post 3.4.0 new ladder logic and not updated for my new server.


In my humble opinion, Panic’s Status Board 2 is the best app for the iPad. It’s DIY system allows me to write small widgets (“panels”) of data, and display it in an elegant and well organized way. I use it all day, every day – I can‘t work without it. I’ve made it handle the majority of my notifications, and I‘m able to keep an eye on all the important things in my digital life with a glance: server status’, project states, calendar events, Slack activity feed, weather, my finances, and now – most importantly – my rank in the StarCraft 2 ladder.

(more…)

WordPress Troubleshooting 101 »

I’m a semi-regular contributor on WordPress Support Forums. & as you develop and assist more, you realize that theres a basic troubleshooting routine to solve almost all vague/inexplicable problems – you typically do the same things. These problems include;

  • /wp-admin/ not loading
  • Unable to drag and drop in dashboard
  • White screen instead of site
  • Unable to use Visual tab

Basically anything not normal or anything not working properly (that is not directly related to installing or using a new plugin. To get your WordPress site back online, here’s a breakdown of how to troubleshoot to find the issue:

  1. Visit your error log to reveal PHP errors
  2. Turn wp_DEBUG on to reveal MySQL + PHP errors on your WordPress site
  3. Disable all plugins one-by-one to find the culprit
  4. Disable your theme, revert to Twenty-x
  5. Upload WordPress to fix any permissions or file errors (except /wp-content/ and wp-config.php)
  6. Comment out any .htaccess firewalls or non-WordPress rewrites

If any of these techniques work, refer to basic Google’ing on how to resolve the issue. Open source software controlling 25% of the web, the odds are in your favour that someone experienced it too and wrote about it.

For overly basic example; if you discover plugin FooBar was not allowing drag and drop to work in the backend, search “WordPress FooBar drag and drop not working” – and you should find your answer.

Doing the troubleshooting in the order should eliminate any “I know it‘s my theme, but I don’t know what’s not working” issues, your problem will likely spit out in PHP errors.

Much More Modern & Micro Mobile Menu »

Watch carefully – at department stores, restaurants, arenas, on the bus – you’ll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn’t responsive, easy, and quick to use on a mobile phone that all of these people have, you’re doing something wrong.

I’ve used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden “behind” the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it’s cumbersome – it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the “responsive” idea. Adding on, it’s no longer the norm of popular apps to have off-canvas sliders, it’s not a good direction.

Things are changing, getting simpler, and cleaner. Myself, I’m on a minimal binge – in both design and code, so I’ve written a new, much smaller and simpler responsive navigation:

The HTML

The CSS

Copy/paste this and it looks like crap, so lets focus on the functionality of it here.

The desktop and mobile nav are differentiated by our @media query.
Normal desktop looks like a normal nav, when we’re less than 960px wide, we’re display a label as a navigation drawer, which when clicked, alters the input‘s :checked pseudo element and determines the visibility / drawer status of nav.

It doesn’t get much more simpler than this for a responsive navigation.

Opengraph Image From Featured, Inline, or Attached »

For opengraph and similar social sharing protocols, you’ll want to include graphics with your post and pages whenever possible for blatantly obvious reasons. Often these images are scraped from the webpage and made selectable by the share’r, which is why you’re able to specify which image you’d like to show when shared.

Sometimes (and with some WordPress setups) it’s hard to say whether the post will have a featured image, an inline image, an attached image, a gallery of images, or none at all. Furthermore, some featured images are on the webpage but shown with CSS instead of scrap-able <img alt=“” /> tags.

For that problem, I wrote this solution:

Where logo.png is your fallback image, if your post/page has nothing else. You can change the order of the if/else conditions to prioritize what you’d like (i.e. attached images to be found before inline images).

Pro tip of the day: Need more images on your text-heavy blog? unsplash.com.