April 30, 2022

Own your data and earn a retirement by living a healthy life

I think it's feasible that the next generation could earn a retirement simply by living healthy lives... How?

Well, in short: People could be paid for making healthy choices by selling their activity data, and earn up to 20% APY (as of today).

Some background: My insurance company is paying up to $1,000 to do Fitbit challenges, like walking and exercising. What if everyone was enrolled into this from birth?

This money could be automatically deposited into some kind of high yield compounding fund. There are accounts today that grant up to 20% APY, and these are still first generation (really basic) protocols that don't do much more than distribute the types of fees that banks currently count as profit, to users instead of executives.

Another way to get this off the ground, without requiring people enroll into costly insurance programs, is to allow users to sell their own activity data from their own Fitbit-like devices. You could change who you sell that data to the same way you change settings in an app.

This is how I think it's feasible that the next generation could earn a retirement simply by living healthy lives.

This could also be one way to inch towards healthspan and wellbeing as markers of a country's wealth, rather than GDP.

January 17, 2022

Consumer Products+ Decentralized Finance?

If the functions of a financial institution, bank, lending company, credit card, or stock market become open source, public goods, then they become like public parks or public transportation.

When they become totally composable, then anyone can bake them into new products.

In this example, the public facing product product is a loan, and the financial tool is Yield Farming.

So what happens when you put these 2 together?

A person deposits some collateral into a special account, then takes out a loan against that collateral. The special account which holds the collateral is actually a high yielding interest account that uses Yield Farming to produce anywhere from 5%-90% interest APY. This interest is used to pay back the original loan.

Everything from the account, to the Yield Farming, to the protocols from which the farming discovers the interest rates, are all separate protocols which are "stacked" on top of each other to produce this new type of software.

Here's an example of a very popular Yield Farming protocol: https://aave.com/

These stacks are completely novel, totally blue sky. They can be used in tons of untapped scenarios.

For instance, I buy a cup of coffee at a local café. Some % of the revenue is distributed into an account that's tied to my phone number, cc number, or wallet id.

This money can be further used to numerous different ends. The examples below are very rudimentary, but intended to demonstrate the versatility of decentralized finance:

  1. You use that small % to to simply earn interest, which in some cases can be up to 20% on coins tied to the US Dollar
  2. It can be entered into a coordination market at market price and allow early supporters to profit should the company grow. More betting more, less stock market.
  3. It can be entered into a coordination market where tokens are sold at prices determined by a bonding curve, allowing organizations to incentivize particular buyer and seller behaviors. This allows them to raise capital from customers in a non-linear way, while also incenting customers to buy more frequently.
  4. Customers can be rewarded with synthetic assets (these are tokens whose value is tied to a particular global stock, commodity, rare metal, etc)
  5. The money can be entered into an Idea Market. Curious about what this is? Check it out: https://ideamarket.io/

To put it simply, the entire technology space becomes an open and verifiable platform on which to discover ways to rewards buyers, sellers, and collaborators

Bonding Curves

Looking at the 2nd and 3rd bullet above, you may notice a new term, "coordination market" and "bonding curve." I'm not going to dive into this in depth right now, but in short, particular incentives can be designed directly into how prices are determined

Here's a quick example of a bonded curve using real world items. Imagine a small company produces and sells uniform copper tubes for $5. After every 20 tubes sold, they increase the price of a single tube by some amount, let's say $1.

1-20 tubes = $5
21 - 40 = $6
41 - 60 = $7

So when 61 tubes are sold, the price becomes $7. This company will also buy back these tubes at the same rate, so they'll buy back tube #61 at 7, and tube #37 at $6.

This is one way a bonded curve can work. It might not seem like much, but it's useful, and powers all kinds of decentralized financial applications.

Now imagine you can change the rate at which prices increase... In fact you can have numerous formulas that determine the price at which these are sold and bought back.

Depending on the exact formula used, you can reward early discovery, or long term holders, or frequent small purchases, infrequent large purchases, and so on.

Using algorithms to formalize incentive systems

Imagine if buying your favorite artist's work, or supporting a relatively unknown product could automatically deposit a % of your payment into one of these special accounts...

This account could be a prediction market affording you a chance to earn money for helping the artist or company in their early days. It could be as simple as a share of stock. It could be a mechanism for raising funds for a product combined with a bonding curve...

Outro

Of course there are so many perverse incentives and manipulations that can emerge here, but that's another post.

Nonetheless, it's powerful stuff and worth paying attention to.

Below are a couple of examples of Self Repaying Loan products in crypto-land.

Note: I'm not intending to support these particular projects and I'm not invested in either, but at this time, they're pretty decent examples of some novel uses of DeFi in this space.

Theopetra Labs

Self repaying mortgages

https://medium.com/@theopetra/theopetras-self-repaying-mortgages-3108d4e8fea9

Alchemix

Self repaying loans

December 26, 2021

What could crypto native art look like? The marriage of visual and financial algorithms

My background in music production, where I gained a small following in the mid-late Myspace era, opened my eyes to the potential of having dedicated fans. However, the market shifted with Facebook's rise, and my tiny success waned.

I carry that experience with me today.

  1. On the one hand, I'm still a creative and I do think about how to extend NFTs as an artistic medium. Here I am inspired by impressive visuals and dynamic art made with tools MAX/MSP, VVVV, Pure Data. Sometimes when I think about what can be done in the NFT space, I'm actually thinking about what I was seeing and experiencing while exploring those tools.
  2. On the other hand, one of my greatest hopes for the NFT space is witnessing more artists as well as fans being rewarded when broader markets align in their favor.

Recently, during a compelling conversation at Art Basel in Miami, I saw connections between these two passions. We explored how time influences art and how such changes directly impact its value—much more than mere market valuation.

Here's a simple example:

SVG's can be manipulated programmatically, as can the price of a piece of art be programmed algorithmically.

Inputs into the price algorithm can look more familiar, like they do with a bonded curve. Bonded curves are very cool and power some really great technology in the DeFi space. I explain what bonded curves are in more depth here.

In the realm of NFTs, we encounter the fascinating concept of programmable SVGs and algorithmically-driven prices. With the help of a price algorithm, the visual representation of an SVG can be modified.

Inputs like bonded curves enable predictable adjustments to an item's price as its availability increases. This dynamic interplay between programmable art and algorithmic pricing adds an intriguing dimension to the NFT space, where the price itself (or any derivative thereof) modifies the artwork.

However, the pricing algorithm can also integrate various triggers, such as sale time, frequency, or the mere sale event itself, resulting in dynamic price changes. Remarkably, these same inputs can also influence the SVG, allowing alterations, obfuscation, enhancements, and more.

This convergence of visual art's dynamism with its economic value signifies an enthralling frontier in the NFT space.

October 12, 2020

Animation: Greensock / GSAP – Basics

The original course was released January 14, 2019. GSAP was in version 2 then.

See the Pen Ghost by Marcin (@uxoxox) on CodePen.

Basic Stagger

Codepen: https://codepen.io/uxoxox/pen/abZzjGm

Basic Timeline

codepen: https://codepen.io/sdras/full/Wramvo

  1. assign a new timeline to a variable (eg: tl), and swap any calls through TweenMax for tl.
  2. remove the stagger time code

3. now, wrap the whole thing in a function so that you can trigger it

4.finally, call it in this manner. this is part of the GSAP timeline magic

October 8, 2020

Web Animation, SVG DOM – Basics

These are notes from a course by Sarah Drasner called "SVG Essentials & Animation"

The original course was released January 14, 2019. GSAP was in version 2 then.


SVG DOM

The SVG space is like an infinite graph. Things are placed with coordinates. The viewbox is the area that you can see.

Platonic Shapes

  • Rectangle
  • Circle
  • Polygon
  • Line
  • (Polyline)

Like Rectangles, viewbox sizing controls list their size properties as 4 numbers. x y width height: 0 0 500 750

The viewBox is the visible area, and changing the height and width makes it "scale" up or down. The same graph, just bigger or smaller on the screen.

Positioning & Maintaining Aspect Ratio

preserveAspectRatio

Params = yMin yMid yMax
Top Middle Bottom

Params = xMin xMid xMax
Right Middle Left

Param = meet
this is the default canvas behavior.

Param = slice
this creates actual slices, and can be used in conjunction with all the xMin and yMin params above.

Param = none
removes all constraints

Paths & Groups

G is like a div, a way of grouping multiple objects

d means "drawing" and m stands for "move to"
"z" will connect that coordinate with the first plot on the graph

SVG Path Tools:

Cleaning up SVGs, Optimizing

  1. Remove unnecessary path points
  2. Recreate shadows using SVG filters
  3. Replace the most redundant filled color paths with a single large color rectangle behind all the paths.

SVG Creation and Optimization Tools

JPEG to SVG https://convertio.co/jpg-svg/

After export, before implementation optimization tools:

Preparing an SVG for Animation

This may require some prep. Common prep could include

  • Target the circle
  • Expand the viewbox
  • Use fill
  • Remove fill from the markup

SVG Animation Tools

SVG Animation vs Canvas

SVG

Pros

UI/UX Animation

Resolution independent

Easier to debug

Cons

Tanks with lots of objects, so you need to be careful with how you animate

Canvas

Pros

Great for immersive 3d stuff

Move tons of objects

Cons

Hard to make accessible

Not resolution independent out of the box

Breaks to nothing

Web Animation Options

CSS

Good or small sequences and simple interactions

once you are chaining more than 3 things

Web Animations API

Looks great but not enough support yet, and it has been deprioritized. Maybe not worth learning until it's reprioritized

GSAP.js

Great for sequencing and complex movement

Cross browser consistency

Anime.js / Velocity.js / Mo.js

Anime.js - very much like GSAP, but open source and with fewer plugins.

Velocity.js - might be less performant.

Mo.js - wont come out of beta because the founder suggests people use GSAP

React Spring/ React-Motion

Great for single movements that you'd like to look realistic (even dragging things across the screen). Great easing curves.

Snap.js

jQuery for SVG

d3.js

was built for data vis, but a lot can be done with it.

p5.js

was built for generative design and creative coding. least common for my projects.

Performance

October 7, 2020

Turning HTML & CSS into Vue Components

Note

The template I was using to format the code on this page deprecated and all the code samples are no longer visible. I am currently trying to recover these.

In this specific example we're going to turn the Navbar area from a predominantly HTML and CSS document into a modular Vue Component.

At this point, the Vue Nuxt project has been set up, and all the code is being done a Vue file in the ".../project-name/pages" folder. Here's an example of the starting file.

/code

The Steps

  1. Find a section of the code that you want to turn into a component, in this case Navbar.
  2. Create a new folder for the component and save it there. In our example, this is within the components folder (ex: ../component/blog-v2/blog-navbar.vue)
  3. Copy the code you want to componentize
  4. Create <template> </template> tags and paste that code within
  5. Look through your code and consider which things you'll want to customize (html classes, menu labels, image sources, page titles, etc). We'll begin turning these into props and whatnot, shortly.

Step 6: Create <script></script> tags and make the export code.

Within the export, we've decided we're going to need to customize the:

  • title: the company name which appears in the top left corner of the navbar and
  • the primary action button: call to action button on the top right side

Step 7: Import the navbar

Step 8: Copy/paste the current static text into props

We're basically going to replace the original navbar with the dynamic navbar using the props "title" and "cta"

Step 9: Replace the customizable areas with bracketed dynamic code

In the navbar vue file, we're going to make some edits. Lets look specifically at the original navbar title.

Above, we see the title "La Isla Bonita" is hard-coded. We want to replace this with the following.

Step 10: Copy/paste the styles over to the new Vue file

May 21, 2020

Creating a WordPress Child Theme, and Importing CSS, JS, and CDN through Functions.php

Introduction

This is a short reference guide on making child themes and preparing them for development. I will come back to this guide and fill in some additional details.

Create a Location for your Child Theme

Go to the following...

  • Add an Assets Folder
  • Add the theme's stylesheet
    • file name: style.css

Every wordpress theme need this style.css file, and they need to begin with at least 2 specific comments. These comments are parsed by wordpress and used during installation.

A few other comments are also useful, but not necessary.

to the location:

assets/css
  • ... and amy javascript files

I am going to need to use some javascript for this site, so i'll be adding a file called mkd-index.js to the location:

assets/js

Create & Import Everything in The Fuctions.php File

In the theme root, you should create a file called functions.php. We will add the following code:

<?php 
// CSS
// Include parent and child theme style sheets
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}
// JavaScript
function collectiveray_load_js_script() {
	if( is_page( 2 ) ) {
	$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
	$theme = wp_get_theme();
	  //wp_enqueue_script('mkd-index', '/assets/js/mkd-index.js', array('jquery'), '', false);
	  //or use the version below if you know exactly where the file is
	  wp_enqueue_script( 'mkd-index.js', get_stylesheet_directory_uri() . '/assets/js/mkd-index.js');
	}
  }
  
  add_action('wp_enqueue_scripts', 'collectiveray_load_js_script'); 
  // CDN 
  wp_register_script( 'GSAP', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js', null, null, true );
  wp_enqueue_script('GSAP');

Breaking Down the Enqueue Code

I want to make sure to keep all my child theme's modifications actually within my child theme, so our functions.php file should start from the child theme's root.

If you look at this WordPress example on how to include CSS and JS files (here and here), the code included will default to the parent theme's root directory. In the second example, it's a bit confusing because the code is filed under Advanced Topics > Child Themes.

So, we're going to use a different function to get the path of the child theme's directory. We'll be using:

 get_stylesheet_directory_uri()

May 5, 2020

Setting up SSH with VS Code for Amazon Lightsail

Installing Remote SSH in VS Code

Install Plugin:
Remote - SSH

It will include a configuration plugin as well. But to login, you’ll need 2 things

  1. username
  2. PEM file

I'll also show you

  1. where your bitnami app password is located
  2. if you're using WordPress, where your public files are located

Finding Your Credentials

USER:

Lightsail seems to use Bitnami containers. Make sure you're using the right username for your container. For a WordPress container, your username is bitnami (at time of writing). The full username for ssh will be this

bitnami

PEM FILE:

Go to the section of the Amazon Lightsail site with access to ssh and instance management. 

Scroll down and find the public key 
Download this
Store it in the same folder with your .ssh config.
On my Mac, that location is 

~/.ssh/tot.pem

on my PC this location is

c:\users\marcin\.ssh

Enter all this into the ssh config file. It should be formatted roughly like this:

Host {an arbitrary label for users to select this host}
HostName {enter your ip address from above}
User {enter your username from above}
Identity File {the path to your PEM file}

Example config file:

Host MyTestSite
HostName 11.234.567.23
User onewithux
IdentityFile ~/.ssh/tot.pem

PASSWORD:

You shouldn't need this password but it might be needed elsewhere, beyond he scope of this short guide.

Open the virtual ssh terminal available from your Lightsail instance and type:

cat bitnami_application_password

bitnami_application_password is where the password is stored. This file may change in the future. Copy/paste this password temporarily in case you need it.

Setting Up Config in VS Code

I thought this video was pretty good, and the YouTuber uses a funny intonation. I set the video to play at the 1 minute mark, which is where he shows you how to create the initial config file.

Now, just in case that video gets deleted, I'll note the steps here.

  1. click on the Remote - SSH in the left toolbar of VS Code
  2. on the "SSH Targets" dropdown menu, click on the "+" icon
  3. enter the following ssh command, without quotes "ssh {username}@{ip address}", for my example above that would be "ssh bitnami@11.234.567.23"
  4. click on the first location that appears. on my computer that's that is "users/martin/.ssh/config"
  5. your new Lightsail host will appear below the "SSH Targets" dropdown, click on the new window icon located in the new host file's selection area
  6. at this point, you may be running into an error pertaining to the PEM file's permissions.

Updating Your PEM File's Permissions

Now, this is close to working, but you may have received a permissions error.
You have to change the permissions to either 400 or 600.

Open terminal to the location of the PEM file.
Type in the following

Chmod 400 {your pemfile.pem}

for me that looked like

chmod 400 tot.pem

use 400 if you’ll change the PEM file rarely (more likely)
use 600 if you’ll change it more often

That's It!

WordPress

I'm using WordPress and need to find the relevant public files to begin making changes. They're located here

home/bitnami/apps/wordpress

home/bitnami/apps/wordpress/htdocs

November 24, 2019

Google Analytics: Find Out How Far Users Are Scrolling with Scroll Event Tracking

It seems like a lot of my clients don't get really useful information from Google Analytics because they don't segment their data, and they don't leverage the various tools that GA provides.

Using this Scroll Depth trigger is one way to gauge how interested users are in a page's content.

Step 1 - Configure Your Variables

Step 2 - Create The Trigger

Step 3 - Create The Tag

Step 4 - Test

July 9, 2019

Thoughts on Poshmark, Web3 platforms

Poshmark is an online marketplace that merges social media and e-commerce to create a unique hybrid social-shopping experience for users.

In this post, I'll dive a bit deeper into the platform and look at some ways in which social media features have been incorporated into Poshmark's UX, as well as some initial ethical implications of monetizing social media-like behaviors in such a direct manner.

Marketplaces and Social Media: Analyzing their Integration

Adding a social media layer to the marketplace seems like a logical next step given the preoccupation that their primary audience has with social media. These features not only enhance the user experience but also drive revenue for the users. By closely analyzing Poshmark, we can see how the merge of marketplaces and social media can create a mutually beneficial relationship.

  1. Poshmark encourages sellers to share their listings on their social media accounts, and this in turn helps increase visibility of listings. That is, they track clicks and purchases and reward the seller by surfacing their collections to more buyers on Poshmark itself.
  2. The "Party" feature. Parties are virtual buying events on the platform. Sellers host their own parties and by doing so, their items are more likely to be surfaced to buyers.
  3. "Poshmark Closet" allows sellers to create a curated storefront on the platform. Sellers can then share their Closet on social media and with friends, which can increase their visibility and sales.
  4. The "Bundle" feature allows sellers to group multiple items together and sell them as a package deal. When a seller reaches certain milestones for bundle sales, they become eligible for special rewards. They're also another method by which sellers can surface their products on the platform.
  5. Borrowed directly from social media, Poshmark rewards sellers for building a strong following. The more followers a seller has, the more likely their items are surfaced. Sellers can also earn rewards for reaching certain follower milestones.

Ethical Implications of Monetizing Social Media-Like Behaviors in eCommerce

The combination of designing for addiction (see: Nir Eyal) with monetizable on-site social media type behaviors make for some ethical concerns (see: Tristan Harris, Chamath Palihapitiya, Jaron Lanier). Poshmark binds "liking and sharing" to revenue generation for the user, more tightly than say, influencer marketing and embedded advertisements.

One metaphor to use here might be "income streaming" applied to engagement metrics, except for the important fact that there is no direct correlation between high engagement and high sales. High engagement only means greater exposure.

While Poshmark's approach may be innovative, it's hard to overstate the implications of the business on users. Keep in mind while reading the following bullets that all this is done in order to design a new business model, and that the user problem of "selling used clothing" already has numerous solutions.

  • The use of principles in behavioral psychology such as Variable Rewards and Social Proof keep users engaged.
  • This is combined with incentivizing user engagement through increased exposure. There's no translation of "advertisement minutes watched" into dollars earned. Your social media-like activity on the platform translates to more platform visibility, and this may translate to increased sales.
  • Ultimately, they have turned what's been called "vanity metrics" into a revenue stream by linking them to sales for users. This means users aren't just competing on sales, but also on social media engagement metrics... which means spending more time on Poshmark.
  • Poshmarks's revenue increases statistically as more users buy and sell, while individual users are left playing social media games to increase their visibility.

New UX Patterns and Business Models, Web3 & Crypto

I am interested in the resulting UX patterns emerging from Poshmark, but also more broadly from the Web3 space.

The rise of crypto-based platforms such as Odysee, Relevant Community, and Minds is proof that the technology industry is constantly evolving and finding new ways to monetize and incentivize user engagement. Poshmark's incorporation of social media into its marketplace is a prime example of how these new design patterns can be implemented. But we want to see these adversarial boundaries between platform and user blurred by web3 technology rather than exhausted by it. I think this can be addressed in a few ways

  • Involving users in the development process
  • Revenue sharing models
  • Decentralized ownership or management structures
  • Transparency in practices

The future holds endless possibilities for how these concepts will continue to shape the way we interact with technology and each other. It's an exciting time to be a part of this industry, and I can't wait to see what comes next.