DEV Community: David Snyder

Set Up a personal File Host with Google Cloud Storage

David Snyder — Sun, 11 Sep 2022 18:44:01 +0000

Have you ever wanted to share a picture on a site that doesn't let you upload files? Or had a support ticket ask you to send links to screenshots? How would host those images so that you have a link to send? I personally would upload them to discord and use the cdn.discordapp.com link that is created. But that isn't a great solution, so lets create our own file sharing server with Google Cloud Storage.

To get started you'll need to have set up GCP, you can learn how to that here.

Setting up the Bucket for public file sharing

Now that you're setup and in the GCP console, create a new project and navigate to Google Cloud Storage. In the Cloud Storage browser, create a new bucket by clicking the button in the top.

you can also create a bucket with the Google Cloud SDK with the command

gsutil mb standard gs://<bucket name>

but make sure that bucket name is globally unique.

Now that you've created the bucket we need to give it public read access so that any client can load the files in it. You can do this by going to the permissions section inside the bucket.

click "Add" in the permissions section and search for and select "allUsers" in the search bar for "principal". In the role search bar search for "Storage Object Viewer" and select it.
Congrats! you've made all the objects in the bucket open to public, make sure there's nothing private in there.

Now you have a bucket that you can upload files to and share the public link to the file, but that url will be an ugly storage.googleapis.com url. Now let's make it so you can share your files with your own custom domain.

Setting up the Custom Domain

To make a custom domain work we'll need to set up an HTTP(s) load balancer in GCP. To get started navigate to the load balancing page in the GCP console and create a load balancer with button at the top.

Select "Start Configuration" on the HTTP(S) load balancer, which is the first option on the left. Keep the defaults selected on the first page.
Now you should be on a page that looks like this.

On the "Frontend Configuration" tab give any name you'd like and change the protocol to "HTTPS (Includes HTTP/2)" and for "IP address" change it from "Ephemeral" to "Create IP Adress". Creating the IP address is easy, all you have to do is give it a name and Google with reserve a public static IP for you. Then click on the "Certificate" box and select "Create a new Certificate". In the modal, give the certificate a name and select "Create a google-managed certificate". In the "domains" box enter the domain you're planning to use with this with the subdomain included. Now certificate is being provisioned, this may take up to 24 hours but I found it took 30 minutes to 2 hours. Finally check the box for "Enable HTTP to HTTPS redirect"

We're done with the Frontend tab, so navigate to the "Backend configuration" tab, click on "Backend Services & Backend Buckets", and select "Create a Backend Bucket". In the Modal give the backend bucket a name, it can be the same as your cloud storage bucket if you want, but it doesn't have to be globally unique. Then select "BROWSE" for cloud storage bucket and select the bucket you created previously. To make this file host even more powerful, check the box for "Enable Cloud CDN" and click "Create".

In the "Routing Rules" tab click the "Add Host And Path Rule" button. In the host box enter your domain name with the subdomain you'r planning to use, in the path box enter "/*" to select all paths, and the backend bucket should be automatically selected as the backend.

Now We're done in the GCP console, all that is left is to setup DNS for your domain. For that copy the IP address Google reserved for you earlier and add an "A" record in your DNS settings with the subdomain as the host and IP address.

Now you just have to wait for the SSL certificate to finish provisioning, which as I said before will hopefully take 30 minutes to 2 hours.

Congrats! you now have a file sharing server with a custom domain. To bring it all home take a look at the url for all the images in this tutorial and you'll see that I'm sharing them from cdn.davidsnyder.tech, which is my personal File Host.

Promisify old callback functions

David Snyder — Wed, 16 Sep 2020 02:28:15 +0000

Are you using a library that still uses callback functions for their asynchronous code and you want to await those functions? This problem is easy to solve by wrapping the function in a promise. Here is how you do it

//old method
doAsyncStuff("params", (err, result) => {
    if (err) {
        console.error(err);
    } else {
        console.log(result);
    }
});

// with promises
const doPromiseStuff = params =>
    new Promise((resolve, reject) => {
        doAsyncStuff(params, (err, result) => {
            if (err) {
                reject(err);
            } else {
                resolve(result);
            }
        });
    });

// in an async function
try{
    const result = await doPromiseStuff("params")
}catch(err){
    console.error(err)
}

Hope this helps 😃

Twitchio.js: A better way to interact with twitch services

David Snyder — Tue, 15 Sep 2020 21:30:25 +0000

🤔 What's this all about?

Twitchio.js provides functions that make it easy to interact with Twitch API and other twitch related services including but not limited to the helix API, the Kraken API, the BTTV API, and the FFZ API.
at its most basic Twitchio wraps twitch API credentials with the fetch function so you don't have to pass them in every time, but it also has functions that get data from different API endpoints for you with basic inputs.

⚡ Quick and easy implementation

step 1:

//Install:
npm i twitchio-js

//Then, paste this at the top of your JavaScript file:
const TwitchIO = require("twitchio-js");
// or
import TwitchIO from "twitchio-js")

Step 2: Use any of the commands explained the Documentation to interact with twitch services however you like.

For the Future

If you want to contribute and make this much better for developers, please have a look at Contributing Manual to understand the contribution steps.

If you can help us with these. Please don't hesitate to open a pull request.

Adding More functions
- functions for kraken endpoints
- more functions for helix endpoints
Improving the documentation

If you created something awesome and want to contribute then feel free to open Please don't hesitate to open an pull request.

GypsyDangerous / twitchio-js

Twitchio.js is a twitch API wrapper that makes it easier to interact with the Twitch API and other twitch related API's

Update 1.4.0 is out

David Snyder — Sun, 13 Sep 2020 23:14:42 +0000

DisStreamChat 1.4.0 is out and I'm excited to share the longest changelog yet.

Bug Fixes

fixed bug with search bar cursor moving to end
fixed bug with channel points being caught in subscription search
fixed bug with the sign-in page when "hide header on unfocus" is true
fixed bug with unread messages persisting across channels
fixed performance bug with saving messages in local storage

Changes

improved chatters tab with better styles and basic user cards
improved reversed mode with a scroll to bottom button and better autoscrolling
improved autocomplete for emotes and mentions
added compact channels setting
added pin button to channel items
added setting to show a scroll bar when the app is focused
added streamer is live notifications
added support for message replies
added setting for transparent message backgrounds
added toast notifications for updates
added a setting to turn on and off storing messages in local storage
added setting to show automod messages or not
added follow button
added a "more tab" to the header with extra channel-specific settings and options
added support for automod messages (only for channels you moderate for)
added the ability to easily switch between channels by right-clicking on the home icon
added user card to messages by right-clicking on the username
added a setting to change font scaling
added emote picker for the chatbox

Modifications

modified platform colors setting to affect the compact mode
modified search bar to hide on unfocus only if it is empty
modified to allow you to add any streamer's channel
modified font change to affect the whole app
modified the update button from link to next update to auto-# installer
modified channels button to the home icon
modified mod and message options into a context menu on messages

Check it out 👇👇👇
https://www.disstreamchat.com
https://www.github.com/disstreamchat

Simple Template for typescript in Node

David Snyder — Sun, 13 Sep 2020 22:04:00 +0000

I have found myself copying a lot of files every time I start a new project so I decided to make an easy to use template that you can download and start with little setup. The template has almost everything you could need, a .gitignore, .tsconfig.json, .prettierrc.js, .npmignore, node scripts for transpiling the typescript and testing. The repo for the template is https://github.com/GypsyDangerous/node-typescript-project-template and you can download it with degit, npx degit GypsyDangerous/node-typescript-project-template. I want to improve it by adding more files like an eslintrc so any contributions are greatly appreciated 😀

Make An Accordion Menu in React

David Snyder — Thu, 18 Jun 2020 01:59:50 +0000

The accordion menu is used on websites to show important links with expanded information .It can be useful in many situations to add information to items in a list. So I am going to show you how to make an accordion menu with React.

here is an example of the finished product:

This project will use two custom react components that I will walk through the process of making and explain how they work. These two components will be called AccordionMenu and AccordionItem. They will mostly be styled components but they will also wrap a lot functionality and reusability around native JSX elements.

this is the code for the AccordionMenu component

import React, {useState, useEffect, useCallback} from 'react';

import "./Accordion.css";

const AccordionMenu = props => {
    const [children, setChildren] = useState([])
    const [openItem, setOpenItem] = useState()

    useEffect(() => {
        setChildren(() => props.children.length ? props.children : [props.children])
    }, [props.children])

    const clickHandler = useCallback(id => {
        setOpenItem(prev => {
            if(id === prev){
                return ""
            }else{
                return id
            }
        })
    }, [])

    return (
        <div className="accordion-menu">
            {children.map(elt => (
                <elt.type {...elt.props} open={elt.props.id === openItem} onClick={() => clickHandler(elt.props.id)}></elt.type>
            ))}
        </div>
    );
}

export default AccordionMenu;

The AccordionMenu component will have one or more children which are all should be AccordionItem's. The children of the AccordionMenu will receive some extra props from their parent. The two extra props are open which is pretty self explanatory, its a boolean telling if the item is open or not, and onClick which is a function that will be called whenever an item is pressed and toggle its open status. The openItem state in the AccordionMenu will keep track of which item is open and if none are open it will be null. Having an openItem in the parent and using that to tell each item whether its open or not is what will allow us to have only zero to one items open at a time

This is the code for the AccordionItem.

import React from "react";

const AccordionItem = props => {
    return (
        <div className="accordion-item">
            <div className="accordion-item--header" onClick={props.onClick}>
                {props.title}
            </div>
            <div className={`accordion-item--body ${props.open ? "open" : ""}`}>
                {props.children}
            </div>
        </div>
    );
};

export default AccordionItem;

The AccordionItem has a header and body. It takes in a title as prop and that title will be displayed in the header. All the children on the AccordionItem children will be rendered in the body. The header is what takes the onClick event from the AccordionMenu.

Now that we have the js code done all we need is the css to control the expanding of the items. I'll also add in some basic styles but I have intentionally made the styles simple so you can easily add your own styles and give it your own flare.

this code will go in Accordion.css

.accordion-menu {
    padding: 1rem;
    width: fit-content;
}

.accordion-item {
    height: fit-content;
    width: 600px;
    max-width: 600px;
    margin: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-item--header {
    height: 50px;
    padding: 0.5rem;
    background: chartreuse;
}

.accordion-item--body {
    height: 0px;
    transition: height 0.25s;
    overflow: hidden;
    background: orangered;
}

.accordion-item--body.open {
    height: 100px;
}

And with that you now have reusable components to add an accordion menu to your website

Force create-react-app to use npm

David Snyder — Thu, 18 Jun 2020 00:39:33 +0000

I had to install yarn recently to work on an open source project that used yarn. Now whenever I go to create a react app it default to yarn. create-react-app is a facebook product aswell as yarn, so if it detects yarn on your system it will create a react app with yarn. I don't mind yarn but I prefer npm so I love this flag you can use with create-react-app. if you add --use-npm to the end the of your create-react-app command it will force it to create the app with npm

Basic Git Cheat Sheet

David Snyder — Wed, 17 Jun 2020 18:37:45 +0000

Need to Know git commands

git init (Initialize git repository)
git checkout {branchname} - change the working branch
git checkout -b {branchname} - create a branch and change the working branch into it
git status - check for untrack and tracked files
git add . - track changes in all files in the working branch
git add {filename} - track changes in one file
git commit -m “message” - save changes to local repository
git remote add origin {remote url} - connecting to a remote repository
git push origin {branchname} - push code from local to remote
git push -u origin {branchname} - push code from local to remote on a branch that doesn't already exist on remote
git merge {branchname} - merge changes from {branchname} into the current working branch

Note: Please remember not to work on master branch directly, always create different branches for different purposes.