Forem: Emmanuel

Blockchain let's rich people vote to their advantage

Emmanuel — Thu, 20 Jan 2022 09:02:41 +0000

Someone made a comment that people with alot of "crypto tokens" could outvote you and ruin the system. Here was my response:

That already happens without blockchain. The fundamental principle of blockchain is the ability to digitally store and transfer value. If you don't understand that principle first, you'll never understand the crypto space.

Some people don't understand the true purpose of money. Money is a way for us to store value. It is a way for human beings to account for work and store that value, and trade it for other things of value.

You can skip blockchain altogether, and just create a ledger on a shared excel sheet or napkin or a mental "IOU". The problem with that is faith or trust in that particular system of accounting. Whatever accounting system you use for whatever accounting you need, whether it's emails, owned video games, money, real estate. People accumulate and trade. Take whatever example you want, there is a degree of friction with being able to trade value for value.

There are two ways to look at money. People chase money because they find it valuable so they do things to accumulate money. People create value and use money to store value.

However the future of blockchain evolves is irrelevant to the fact that there are people who will use blockchain as a way to store and trade value.

Crypto market is no different to any market. It is inefficient and illiquid in comparison to fiat currency. Inefficiency creates arbitrage opportunity, which attracts people to reduce the inefficiency.

I understand the hate on crypto because of inefficiencies, but don't be the person to hate on crypto when you see someone generate value on "fake money". Generate value and store it in whatever medium you choose. Anybody can create their own cryptocurrency. But not everybody understands the fundamental principles of money.

Autodeploy subdirectory to Firebase

Emmanuel — Sat, 18 Sep 2021 10:34:16 +0000

Google Firebase has a pretty straightforward guide to setting up auto-deploy from Github, which you can take a look at here: https://firebase.google.com/docs/hosting/github-integration

In a nutshell, you follow these steps:

Install firebase-tools via npm:

npm install -g firebase-tools
Setup your project for firebase hosting:

firebase init hosting
Setup your project with Github Actions to auto-deploy on PR/Merge:

firebase init hosting:github

One thing to note is the root directory of your repository is the working directory for the Github actions. For example, if you have a repository that has a subdirectory named "front", which contains your actual project files, package.json, etc.., you have to modify the generated .yml file that firebase-tools generates so that the actions run within the working directory. After you run an npm command, you use 'working-directory'

You also need to set the working directory for the 'FirebaseExtended/action-hosting-deploy@v0' action, which is set like so: entryPoint: <directory_that_your_firebase.json_is_in>

Here is an example:

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14.17.3'
      - run: npm ci 
        working-directory: ./front
      - run: npm run build
        working-directory: ./front
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT }}'
          channelId: live
          projectId: project
          entryPoint: ./front

Feathers or Express?

Emmanuel — Wed, 14 Jul 2021 04:44:27 +0000

I've recently come across something called Feathers https://feathersjs.com/ and really like it alot. I'm about to start a project and currently evaluating the stack to use and can't decide whether to use Feathers or Express. Building it with Express would be great for showcasing skillset, but if not for that I'd probably go with Feathers.

Thoughts?

Creating an Interactive Map of the US

Emmanuel — Tue, 29 Jun 2021 14:14:16 +0000

In this tutorial, we'll be learning how to create an interactive map of the US using HTML, CSS, and Javascript.

The final result can be viewed here: https://codepen.io/codecustard/pen/NWpZxey

The first step is getting the map in SVG format. Using SVG allows us to define each state as a path which further allows us to style them with CSS and target them in Javascript. You can get a map of the US for free from: https://simplemaps.com/resources/svg-us

Once you have downloaded the SVG, create a new index.html file add the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive US Map</title>


    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="details-box"></div>


</body>

The key things to note is the div element with the "details-box" id and the "style.css" stylesheet being linked. The "details-box" div will be used to create the hover details effect when you hover onto each state.

Next thing to do is to open the svg file in a text editor and copy the "..." contents into the body tags of your html file.

<body>
    <svg>
        ...
    </svg>
</body>

If you take a look at the contents of the svg, you should notice that there are some useful properties such as "id" set to the abbreviation of each state as well as "data-name" set to the name of each state.

Now let's create a new stylesheet file: "style.css" with the following:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

path {
    stroke: white;
    fill:paleturquoise !important;

    transition: fill .4s ease;
}

path:hover {
    fill: orange !important;
}

#us-map {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#details-box {
    padding: 1rem;
    border-radius: 8px;
    font-size: 24px;
    position: fixed;
    color: white;
    font-family: "Poppins";
    background-color: black;
    width: fit-content;
    transform: translateX(-50%);
    transition: opacity .4s ease;
    z-index: 1;
}

Now let's add the following Javascript inside the body tags:

<script>
        var tooltipSpan = document.getElementById('details-box');

        document.addEventListener('mouseover', function (e) {
            if (e.target.tagName == 'path') {
                var content = e.target.dataset.name;
                document.getElementById("details-box").innerHTML = content;
                document.getElementById("details-box").style.opacity = "100%";
            }
            else {
                document.getElementById("details-box").style.opacity = "0%";
            }
        });

        window.onmousemove = function (e) {
            var x = e.clientX,
                y = e.clientY;
            tooltipSpan.style.top = (y + 20) + 'px';
            tooltipSpan.style.left = (x) + 'px';
        };
    </script>

And that's all there is to it. This was inspired while browsing the web and finding the following website: https://www.playvs.com/high-school

You can use this effect for all kinds of use-cases. In fact, try to create something else instead of a map of the US and share it on instagram by mentioning: @codecustard