What is this?

This is a slightly more specialized and modernized version of an old project you can check out here

What does it do?

Display the top 10 crypto curriencies (by market cap) of the day via shortcode after installing this plugin!

How do I use it?

1. Download the repo
2. Upload the zip file via plugin upload in WordPress
3. Activate the plugin in the dashboard
4. Go make an API demo account on CoinGecko
5. Paste your shiny new API key into the settings page
6. Now you can paste this shortcode in a text block [crypt0_prices] (swap the zero for a regular “o”) and see the top 10 crypto prices!

Here’s a quick demo of it…

• Bitcoin: 68259 USD
• Ethereum: 3276.12 USD
• Tether: 0.999887 USD
• BNB: 587.76 USD
• Solana: 185.4 USD
• USDC: 1 USD
• XRP: 0.601184 USD
• Lido Staked Ether: 3272.78 USD
• Dogecoin: 0.134635 USD
• Toncoin: 6.73 USD

Tech wise, what’s neat about it?

It uses the CoinGecko API to pull in a list of digital currencies and display them via shortcode.

CoinGecko does require an API key which is why I made the handy settings page where you can add it.

I also love that this plugin is really is just a single file just a tad over 100 lines so you can look it over and mess with it as you please!

Troubleshooting tip(s)

If it works right out of the box but breaks shortly after installation, you probably didn’t add the API key in the settings or there’s a typo in it. For better or worse CoinGecko’s API will work once or twice with no key required.

What is it?

Foxolife.com is a B2C facing site whose function is to get viewers to purchase life insurance. The big difference between FOXO’s insurance and other insurance vendors is you get a 23-and-me style health report based on your epigenetic data which we also collect in a 23-and-me fashion via spitting in a tube and running it through some wild machine learning based processes.

What makes it important?

For me as a web developer, this site stands out for the inline video elements which have parallax wrappers around them which gives this rather fluid and lively appearance that I personally hadn’t really seen on sites before.

What am I most proud of?

I’m proud of how smooth the user experience is going from this informational part of the site into the signup process. There’s an impressively lengthy questionnaire you need to fill out once you make an account an begin filling out the necessary info to get life insurance and every part of the journey has been carefully built to be as pleasant as a team of designers, marketers, UX geniuses, and developers can possibly make it.

What is this?

It’s a meme generator that uses the flipimg API and React to spit up hot, fresh memes.

Why?

Isn’t the internet already chock full of meme generators? Yep! The real reason I built this was to help me understand and document actions, states, and components so the code is ultra-thoroughly documented.

If you want to see said wonderfully documented code (plus a more detailed technical rundown), head over to https://github.com/haa-gg/React-Memes and enjoy!

See it in action!

https://haa-gg.github.io/React-Memes/

Redux explaination of this app

Components: All files in the components folder of this app. These are individual parts of an app which can be just bits of javascript of visual parts of the application… or any combination of both

Actions: See the index.js file in the actions folder. These are the big things your app does, in this case that is making a meme.

Reducers: See index.js in our reducers file to see the specific actions. In broader terms reducers are what pass changes in the app such as a newly entered meme back into the main app section (e.g. Store)

Store: Defined in /src/index.js and this is the part of the app that actually holds submitted memes and our meme template array (state)

Need a 10,000 random magical effects for a D&D game?

Gotcha covered!

There’s this thing called the Wild Magic Surge table which crops up occasionally in a given game of Dungeons and Dragons which causes about 50 differing magical effects such as shielding yourself or exploding but it has a cooler big brother with 10 thousand possibilities! Thing is this list is kind of a pain, selecting a random event from 10,000 possibilities is a bit of a hassle with just normal dice.

Enter my web app you can check out here.

Click the big friendly button and get your wacky new spell effect!

How’s it work?

So glad you asked, dear reader. All it does is read a local JSON file containing the 10,000 magical effects, pick one at random, and feed it into the spot where {EFFECT POPS UP HERE} starts off.

It’s bloody simple and doesn’t get much more user friendly than that.

Wanna check out the source code? Got you covered.

Based on The Net Libram of Random Magical Effects v2 by Orrex

Update

I made a re-skin of the application and have it rolling the standard 100 wild magic effects, see it in action here.

I had the bright idea that a D&D-based application was a damn good fit for that gritty laser effect Stranger Things did in their intro sequence paired up with a font called Marvin Visions, check it out and download it for free here!

There was no good how-to on making a responsive chart that pulls its data from a spreadsheet

So I made one!

Why this is useful: responsive web data visualization turns out to be a bigger headache than I was expecting with many plugins that claim to do the job but don’t. I really wanted some slick looking graphs for a client that anybody could edit so I decided to go build something from scratch.

The lynch pins that make all of this possible are Google Sheets API and Google Visualizations.

Sheets

Sheets uses a a simple URL query structure that only really needs an API key and the ID of the sheet you want to pull data from though I do add on a parameter to specify the cell range that should be grabbed.

Here’s that the URL query looks like: https://sheets.googleapis.com/v4/spreadsheets/155Ec2P5W4_9KROYbM3oyHJaUQLH9_THzQLZXjVyTn70/values/Sheet1!A1:A7/?key=AIzaSyAHqTdQfwbPHiEA1KF7VsYyPF0ZjBA4qVs kinda ugly, huh? Well it’s actually pretty quick and to the point– the first long string of gibberish is the sheet ID, the “/values/Sheet1!A1:A7/” specifies the cells to grab and the query at the end specifies the API token– the rest doesn’t change between sheets which makes much less of a headache than some API’s (looking at you Spotify!).

Visualizations

I’m not sure exactly what Google Visualizations would be considered, be it a program, framework, or formatting markup but the important thing is I can feed it data and it will throw back a shnazzy graph. You can specify a bunch of handy formatting options such as chart type, color of the graph, data ranges, and a whole bunch of other thing anybody who has ever built a chart in MS Word or Excel would be familiar with immediately. Unfortunately, there is one feature totally missing from this otherwise wonderful widget and it’s the ability to make the chart different sizes when viewed on different devices…

Make it responsive

The trick was to not declare a chart width in the chart’s JavaScript then create a chart resize function which triggers a half second after the screen has been resized. Why a half second, you ask? Turns out if you don’t have a small delay when drawing the chart the function will trigger for every pixel you change the screen width making it lag out if you are sliding the screen size around in a browser window.

The source for your viewing pleasure

Click here

I built a thing which stores and displays digital currency market data

Note: this is a deprecated API and doesn’t work anymore but fear not, I’ve moved this general project into a new API and made it a WordPress plugin which you can check out here: https://github.com/haa-gg/Crypto-Price-WP-Plugin

Grab the OG repo and mess around with it here: https://github.com/haa-gg/Coin-Market-API-Example

More specifically, the goal is to create a script which talks to the Coin Market API (https://api.coinmarketcap.com/v1/ticker/), gets the relevant data for all 1000-something digital currencies out in the wild and puts the current values into a SQL database that I can reference later. The live feed was more of a bi-product that I got attached to.

The heavy lifting of this project was to set up a database, write a SQL command to input the relevant data from the API into the database, then set the command to run once a day by means of a cron job.

Here’s the code you need to make the live feed section work, all neat n’ tidy

index.php

Here’s what makes the back end tick:

dbupdate.php (where the real action is)

Websites are great and all but scripts can be a blast all on their own!

Here’s a phone flipping script I have been working on that will find every phone number on a page and flip them all to the same one, which is really handy for adwords tracking.

Just read through the code comments to see how the whole thing works, my end goal is to make it take in a url query, grab that number from a stored array and flip all of the numbers to that.

If you want to see it in action, check out: https://jsfiddle.net/uohx1fo3/15/

<?php  

jQuery(document).ready(function () {

//Throw the phone number you want everything to flip to right here
var swapTarget = '123-456-7890';

//This is the bit that recognises a phone number
var regex = /(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4})/g; 

//Tells the script where to search in the document
var text = jQuery("body:first").not('script').html();

//Makes the text var look for our regex and swap it for our new number 
text = text.replace(regex, swapTarget);

//Turns the text var loose on the DOM to switch out the phone numbers
jQuery("body").html(text);

/*===============================================
We've made it half way and nothing has erupted into flames, take a moment to pat yourself on the back and then check below to make sure you have the right vars set.
===============================================*/

//Format the swap target for an href
//swapTarget.text( swapTarget.text().replace('-', '') );
var swapTarget = '"tel:1' + swapTarget + '"';
console.log(swapTarget);

//Now to handle those pesky href numbers with a different selector...
var regex = /((\"tel:((\d{11})|(\d{10})|(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4}))\"))/g;

//Makes the text var look for our regex and swap it for our new number 
text = text.replace(regex, swapTarget);

//Fire the main cannons!
jQuery("body").html(text);


});

?>

Law firm landing pages can have a great deal of dynamic content in them

The firms are also keen on looking dignified and professional so the pages can get to be quite a handful!

If you want to see this puppy in action, check out: https://designerofstuff.com/law-lp and play with the device types to see all the responsive love put into the page.

Most of the exciting bits involving putting locations in different arrays does not get used here as we don’t have addresses. However, we can swap the headline region by adding a ?camp=1 or ?camp=2 (https://designerofstuff.com/example-law-lp?camp=1) query to the end of the URL. We can also change out the geographic region from the default of “Minnesota” for something a bit more exciting like “Camelot” by adding a url query of ?geo=camelot (https://designerofstuff.com/law-lp?geo=camelot).

Take a look at what the dynamic php tends to look like to render proper geographic and headline info:

<?php  

//Setting phone as a var
$phone = "<a href=\"tel:1\">111-111-1111</a>"; 

$phonelink = "1";?>

<?php 
//Assign the $geo variable to whatever the ?geo= query is equal to
$geo = $_GET['geo'];

//Put all cities in a single array
$geo_arr = array ("minneapolis", "moscow", "camelot", "chicago", "los-angeles");

//Put the geos with small address sets in this array
$small_arr = array ();

//Put any small address geos with 2 addresses in here
$stack_arr = array ();

//This bad boy makes sure the geo query is a legit one and not some sketchy bit of SQL
if (in_array($geo, $geo_arr)){

    $geo_pos = array_search($geo, $geo_arr);

    $geo_active = $geo_arr[$geo_pos];

            //Detect if the geo has numbers in it and if it does, then go do some special formatting to it
    if (strcspn($geo_active, '0123456789') != strlen($geo_active)) {

        switch ($geo_active) {

//Throw the special snowlfake formatting cases in here
            case "twin-123":
            $geo_txt = "Twin Cities";
            break;

            case "twin-456":
            $geo_txt = "Twin Cities";
            break;

            case "twin-789":
            $geo_txt = "Twin Cities";
            break;
        }

    } 

    else{

//If the geo case is not a special snowflake, then just swap the dashes for spaces and capitalize verything properly
        $geo_txt = str_replace("-", " ",$geo_active);

        $geo_txt = ucwords($geo_txt);

    }
    
}

else{
//Putting in a default geo value in case somebody puts in a geo query we don't like or flubs the spelling
        $geo = "minnesota";

        $geo_txt = "Minnesota";
        
    }

//Checks if the active geo is supposed to be small address format
$format_var="big-addr";

if(in_array($geo_active,$small_arr)){

    $format_var="sm-addr";

}

//Extra formatting junk for small addresses w/ more than 1 address
$stack_var = "";
$stack_fmt = "";
if(in_array($geo_active,$stack_arr)){

    $stack_var="-stack";
    $stack_fmt="stack";

}

?>

<?php

//Uses gets device type in case we want something to render differently
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

if ($iphone || $android || $palmpre || $ipod || $ipad || $berry == true) { 
           $device='mobile';
    } else {
         $device='desk';
    }

?>

<?php

//gets the &camp query and populates the headline with it
$haa_query_2 = $_GET['camp'];

switch ($haa_query_2) {

    case "1":
    $camp = 'Need Expert Legal Assistance?';
    break;

    case "2":
    $camp = 'Out To Fight A Ticket?';
    break;

    default:
    $camp = 'Are You In Trouble With The Law?';

}
?>

<?php 

    //Extra classes for the LP fed in as body classes
$extra_classes=array($device,'generic-law', $format_var, $stack_fmt); 
?>