Crypto Prices WP Plugin

Written by

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: 66816 USD
  • Ethereum: 3257.74 USD
  • Tether: 1 USD
  • BNB: 608.72 USD
  • Solana: 158.35 USD
  • USDC: 1 USD
  • Lido Staked Ether: 3256.58 USD
  • XRP: 0.548098 USD
  • Dogecoin: 0.16193 USD
  • Toncoin: 5.9 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

Written by

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

Written by

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

Written by

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)

YouSurance

Written by

Bright, techy, and fun…

Is the general direction my team and I were given going into this rebuild of yousurance.com (the live site is down so here’s a saved version of it). Attitude aside, it also needs to get across what we do and how we do it.

What we do and how we do it

This company’s mission is to make buying life insurance suck less– a staggeringly tall order but we have an incredibly effective technical ace up our sleeve based on epigenetic research. The exact nature of our tech is a rabbits hole I don’t want to get into here but this page on their site does a nice job covering the “how” aspect.

How’d we pull it off?

Teamwork. I know it’s a bit of a cliché but you might say the same thing about this “gravity” thing always being the number one suspect whenever anything falls over, beating out even clumsiness. I think what falls flat on the “teamwork” statement for me is lack of credit for specifics, it’s hard to appreciate what everybody puts in when nobody tells you who put in what ingredients to whip up a really cool website.

So, let’s look at whodunnit

  1. One person found a cool looking but poorly functioning template.
  2. I took apart and rebuilt the template on a more flexible tech stack.
  3. Some QA testers did very creative and interesting things to the site to see if they could make it break or look weird.
  4. A whole slue of other peeps took point on actually writing our rundown on how the company works.
  5. We all met up routinely to show off our latest work and make sure it was on-point with what everybody else was making.

There you have it, that’s how the website came to be!

Improbability Drive

Written by

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

Written by

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

Written by

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

Hello Lindsay

Written by

The friendliest website I have ever worked on

http://hellolindsayjoy.com/ is by far the most interactive, inviting, and easy to use site I have worked on to date. What makes this one stand out? The function of the site is to get people talking with each other. The subjects discussed tend to fall into the categories of family, travel, business, and style with a tone of empowerment and entrepreneurship.

There are 2 parts of this site that stick out to me as a web designer for how fun they were to work on. In specific, they are the logo/ site identity and the user interaction (both the poster and the commenters)

Coming up with a look and feel

I was caught off guard when I started talking to Lindsay about her site for the simple fact she was well prepared and knew what she wanted! I’m so used to people approaching me with an idea along the lines of “My site looks like dried up cat vomit– help!”. Lindsay did her homework and gave me the words “joy, motivation, adventure, inspire, and funny” to work around along with great examples of the visual style she wanted, the general content flow of the site, and she even knew which themes would make a good starting point to boot!

The first part of the job was to come up with a logo we could base the rest of the site around. I have to admit, I was a little nervous about my first set of logo designs as most of my professional work is used for law firms and construction companies which is a totally different look and feel, however she found one in the first batch that fit her!

I honestly can’t figure out how to describe the attitude of the logo. The way I came up with it is similar to how musicians can hear a bunch of music from a genre and then start making music along the same lines without necessarily being able to explain how it worked. Lindsay gave me enough “music” I was able to start making it myself.

After the logo was picked, the rest of the styling naturally fell into place.

Interaction

Not only was this site a different flavor in terms of look and feel but also in how the owner is going to use it. I generally build sites to be friendly to other developers who might need to go in and make changes to the template source and the general page content does not change much from year to year. In this case I designed this site to be as friendly as possible when it comes to making and tagging posts, adding new menu items, or making minor changes to the layout.

The key thing I did differently was I took an existing, well defined theme (Perle) and did as much design work as I could through the built in customizer “appearance > customize” instead of my usual method which is to take a blank framework theme (usually FoundationPress) and build up the site’s structure from scratch.

The ease of use carries over into the posts themselves which are based around a big picture with text over it and then the content beneath. All the user has to do is select a featured image for their post and title it and the theme takes care of the rest (with the help of RevSlider).

In a nutshell, the site is set up so all you have to do is worry about content and conversation with the visitors.

Speaking of visitors, I had never worked on a site designed to have an active comments section so learning about moderator practices has been an adventure. All I have seen outside of well thought out and friendly posts is spam which does not make it through the post approval process. As of when I am writing this, I’m weighing the pros and cons of adding Captcha to the comments section to cut down the spam that is making it to the approve/ disapprove stage. I’m hesitant because Captcha feels like something which makes the user spend unnecessary effort to interact with the site which is bad UX. Option 2 is to try a honeypot (a neat little hidden robot trap) and see if I can keep spammers away by that means.

I suppose this article is quite wordy for something which can be summed up as “Made a cool looking and friendly website for a really nice person” but I’m just wordy like that.

Invite

Written by

This is one of the few times somebody told me to “go wild” on a project and they were not disappointed.

The project was simply to make the coolest high school graduation invitation I could. Given those directions, I found it safe to abandon my usual rule of trying to figure out what the other person is picturing and just have fun with it.

The letters were generated in Cinema 4d and exported with some cool trick that made it so you cold select just the letters in Photoshop without mucking about with pen tools, wands, and other selection tools.

The actual model in the photo was extracted from one of her senior photos with the good ol’ pen tool and then using some light smudging to take the edge off the extraction borders.

Background elements are mostly brush effects with outer glow effects thrown in for good measure.

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.