Crypto Prices WP Plugin

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: 66195 USD
  • Ethereum: 3601.26 USD
  • Tether: 0.998753 USD
  • BNB: 603.28 USD
  • Solana: 139.37 USD
  • Lido Staked Ether: 3597.11 USD
  • USDC: 1.001 USD
  • XRP: 0.50126 USD
  • Dogecoin: 0.126641 USD
  • Toncoin: 7.23 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.


FOXO Life

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.


FOXO Technologies

What is it?

This is a B2B facing site I built to help promote a biotech/ insurtech startup called FOXO Technologies. The goal of the company is to make buying life insurance easier by way of eliminating the blood + urine test you need to take when applying for substantial life insurance policies by means of a mail-in spit test much like ancestory.com or 23 and Me use.

What makes it important?

This site is important to me because it took every once of talent I’ve built up in my decade of web development to bring it all together. The team that designed this had one of the most ambitious visions I’ve ever had the privilege of working with and they gave me a shot to bring it to life. Together we knocked it well out of the park and happily into orbit.

I love the scroll-based animations based on the animate-on-scroll library as well as the ultra crisp imagery which looks extra slick with the quiet addition of parallax effects by way of parallax.js

Biggest challenges?

  1. Learning tailwind on the fly– it’s a wonderful framework but hard to dive into when you have a tight deadline.
  2. Coordinating/ asking for another dev on a flagship site– during my time at FOXO my job has been considered intimidating because the public facing websites I build are scrutinized by the entire company as well as every potential investor who looks it over them so there had been little demand in terms of other devs who wanted to join forces and help me build new sites.

    That changed with the launch of the latest iteration of foxotechnologies.com because the design was next-level complex and the stakeholders wanted this done yesterday. Once I figured out the scope and scale I proposed adding another specialized contractor dev before we begin to really accelerate things and leadership was totally on board.

    Things worked out pretty smooth but it required much more use of git branches and pull requests which was good practice.

Want more?

Check out the B2C sibling site I helped develop, foxolife.com


React Meme Generator

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)


Improbability Drive

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.

Wild magic application reskinned to look like it was from Stranger ThingsI 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!


To Do List

What’s it?

It’s a device I made/ programmed to display what movies I need to check out, chores I’m neglecting, what side projects I’ve ginned up to keep myself entertained.

Wanna see it running?

Of course you do!

Uh why?

Glen you fiendishly handsome devil, why do you need something like this? Well my flattering reader I do occasionally find myself watching a season of Rick & Morty that I’ve seen so many times I could probably rattle off the lines easier than the pledge of allegiance while guiltily thinking “aren’t there about a million things I want to check out right now, why can’t I remember a single one of them?”. I built this machine to stop myself from aimlessly slouching around on the couch… and because it looks super fly in my living room.

How’s it work (without mentioning a lick of actual code)?

Finer details can be found here in the repo

  1. A bit of code asks a Google sheet of mine for its contents
  2. Google feeds back the spreadsheet data to the code
  3. Another part of the code spits out the spreadsheet data as a neat little website
  4. Rinse and repeat every 15 minutes

Heavy-duty design or coding details

This is my testing ground for interesting layouts, new font usage, and seeing if I can make certain colors work together so the overall theme is “whatever looks cool”. If you refresh the list, a new theme will pop up. At the point in time I’m writing this, there are 3 different themes it cycles through on refresh.

Case design

custom etched to do list computer case

That’s a hand-drawn, laser engraved chunk of wood covering the front so buckle up kiddo, it’s a bit of a story.

Why “Calling You Home”?

So my brother and I were chilling out (possibly watching Rick & Morty again) and he remarked that my house had good vibes out the yin-yang… well what he actually said was that my house felt like a song by Seven Lions titled “Calling You Home” which he played for me and lemme tell ya, having the apartment I’ve put together compared to that song was one of the highest compliments I’ve ever been given.

After hearing it, I knew I would have to work that song into my home somewhere and being that I was already fixated on building a cool case for my motivational gizmo, I had a good idea of where it would end up. The only question left was how to make something which felt like that song and the case design you see is my answer.

Laser engraving

Did the engraving myself, I totally went out and got trained on how to work a big ol’ laser at a maker space called TC Maker (shout out!) in the twin cities.

How’d I code this beast?

The easiest way to explain is to check out the repo, in specific this file is where the party’s at.

The code work was probably the easiest part of this project as most of what I consider the tricky stuff was grabbed from an earlier project of mine so most of the focus was on making the code as easy to read as possible so the main custom.js file is TRICKED OUT with comments on what each line is doing.

Walk me through the steps, this time nerd it up!

You asked for it…

  1. Make call to Sheets API
  2. Wipe out any pre-existing cards
  3. Assign variable to JSON response length (var y)
  4. Create a card for each data set
  5. Fill the card with the corresponding data in an unordered list
  6. Do the whole song and dance again every 15 minutes
  7. Swap theme every 8 hours or so by randomly selecting a class from an array
  8. Remove old theme class
  9. Apply new theme class

TL;DR

I made a super techy and slick looking to-do list


Charts Made From Sheets

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


Coinmarket API

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)


Regex Phone Fun

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);


});

?>

Lawfirm LP

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); 
?>

Website copyright 2024. All rights reser-- Nah, I'm just playing with ya, the whole thing is up on an open repo on github!

Feel free to use it, break it, fix it, trash it, change it, mail, upgrate it.