DEV Community: Thew

Thew Hacktoberfest 2023 Pledge

Thew — Thu, 05 Oct 2023 13:19:23 +0000

Intro

I'm Thew. You can learn more about me on my website

Background

Medical student · Software · Aviation · Machine learning

Pledge

My goal is to update my open source personal website along with contribute to other interesting projects.

Deploy your own short URL to Vercel Edge Middleware

Thew — Thu, 13 Apr 2023 17:35:26 +0000

A year ago, I created a vercel shorturl project that used Vercel serverless.

Deploy your own short URL to Vercel

Thew ・ Dec 1 '20

#showdev #news #vercel

This year, I updated it to use Vercel Edge Middleware! Deploying the redirect function globally to the edge will result in a reduction of latency.

To get started, just clone the template repository, edit redirects.yml and deploy to Vercel. You don't need to edit middleware.js, install dependencies, or run build command.🎉

Or click the below button to deploy to Vercel immediately!😊

For the record, the version of the underlying vercel-shorturl library is v0.3.x.

Features

The main features remain the same. Here is an example redirects.yml showing all of the features.

- from: /me
  to: https://github.com/ThewBear
  status: 308 # Change status code ex. 301, 302, 307 (Default), 308
- from: /google/:q # Match exactly one ex. /google/recursion
  to: https://google.com/search?q=:q
- from: /vercel/:slug* # Match zero or more ex. /vercel /vercel/docs /vercel/solutions/nextjs
  to: https://vercel.com/:slug
- from: /twitter/:slug? # Match Zero or one ex. /twitter /twitter/thewdhanat
  to: https://twitter.com/:slug
- from: /github/:slug+ # One or more ex. /github/ThewApp github/ThewApp/vercel-shorturl
  to: https://github.com/:slug
- from: /dev/:slug1/:slug2 # Multiple match ex. /dev/p/information
  to: https://dev.to/:slug1/:slug2
- from: /google
  to: https://google.com/search?q=:q
  query:
    action: search # Must have this exact query
    q: :q # And this match in query ex. /google?action=search&q=recursion
- from: /dev
  to: https://dev.to/:user
  query:
    u: :user? # Optional match ex. /dev /dev?u=thewbear

Custom page

You can override home page and 404 page by placing index.html and 404.html in project root.

Analytics

vercel-shorturl can automatically send an event to Amplitude, just set Amplitude environment variable to your HTTP API key.

Demo

Demo is deployed with the example redirects.yml.

Here is some route you can try:

See more supported routing features in the example redirects.yml.

Migration guides

For v0.1.x user, just clone the latest template repository, and paste your old redirects.yml. It should just work.🎊

Cloud Storage for Backup

Thew — Mon, 02 Aug 2021 16:12:13 +0000

In recent years, many people have stored their valuable data in the cloud. One reason that people adopt cloud solution is their generous free plan on personal accounts. The big player in this space is Google Drive. They offer 15 GB of storage for free. Moreover, students get unlimited storage from their school accounts. Google education and business solutions used to have unlimited storage plans. For business, Google Workspace (previously G Suite) discontinued its unlimited storage in October 2020. For education, there will be a 100 TB per organization limit in July 2022. This change results in a few GBs per user in large universities. People who store their entire data on education account must find a new solution. Although Microsoft OneDrive still provides 1 TB+ storage per user, there is no guarantee that they will not withdraw in the future. The truth is free unlimited data storage is not a viable business.

Despite the data we own are growing every day, cloud storage providers still offer the same amount of free storage as a decade ago. Previously free unlimited high-quality photo storage by Google has been terminated on 1 June 2021. Moreover, Google Docs, Sheets, Slides, Drawings, Forms, and Jamboard files will be counted toward your storage usage starting on 1 February 2022. Hence, the trick to convert your file to Google Docs to get free storage will break soon. Therefore, in the future, more users must pay for their data warehouse.

Recently, I searched for a system to store my backup data for good. Although consumer clouds like Google Drive, Microsoft OneDrive, Dropbox offer a paid plan, they are suitable for storing short-term and frequently accessed data. They also have a download quota limit which the file may be locked if there are multiple downloads in 24 hours. But for permanent backup, I prefer a more geeky solution like object storage because I can use the brilliant S3 API to manage, access, and share my data through custom scripting and tools like Rclone.

Here I compare the following S3-compatible object storage providers. Only the links in the referrals section are affiliated. 🤗

AWS S3, Google Cloud, Azure
DigitalOcean and Linode
Backblaze B2 and Wasabi

When considering their pricing, you must look at data storage and inbound/outbound data transfer pricing. Almost every provider has free inbound data transfer to encourage data moving in but not out 😉.

AWS S3, Google Cloud, Azure

They are the top 3 largest public cloud providers that offer similar object storage plans and have many storage tiers which suit different purposes. Their archival class for long-term data backup have different naming. You can read more information by clicking the link in the table.

Provider	Class	Minimum storage duration	Retrieval period
AWS S3	Glacier	90 days	5 minutes 5/12 hours
AWS S3	Glacier Deep Archive	180 days	12/48 hours
Google Cloud	Coldline	90 days	milliseconds
Google Cloud	Archive	365 days	milliseconds
Azure	Cool	30 days	milliseconds
Azure	Archive	180 days	1/15 hours

The table below compares pricing for each provider and class. Besides data storage and outbound transfer, they also charge for API operations and data retrieval. Check details on their official website: AWS S3, Google Cloud, Azure.

	Storage	Outbound transfer	Data retrieval
S3 Glacier	$4.00/TB	$90.00/TB	$2.50/TB
S3 Glacier Deep Archive	$0.99/TB	$90.00/TB	$2.50/TB
Google Cloud Coldline	$4.00/TB	$120.00/TB	$20.00/TB
Google Cloud Archive	$1.20/TB	$120.00/TB	$50.00/TB
Azure Cool	$15.00/TB	$87.50/TB	$10.00/TB
Azure Archive	$0.99/TB	$87.50/TB	$20.00/TB

For convenience, you can use their pricing calculator: AWS S3, Google Cloud, Azure.

AWS S3 Glacier Deep Archive is the lowest cost storage at the moment considering data storage cost alone. The main concern about these providers is 💢 expensive 💢 outbound transfer (egress) when you want to get back your data. Below are more resources about this topic. Although most of them criticize AWS, these apply to all three providers.

Another attractive public cloud provider is Oracle. Unlike other providers, Oracle gives free 10 TB outbound transfer.

DigitalOcean and Linode

Smaller cloud providers like DigitalOcean, Linode, Vultr, and UpCloud provide single class S3-compatible object storage. Their billing is more simple and does not charge for API operations. Their prices are very similar.

Provider	Minimum price	Data Storage	Outbound transfer	Additional storage	Additional outbound transfer
DigitalOcean	$5	250 GB	1 TB	$20/TB	$10/TB
Linode	$5	250 GB	1 TB	$20/TB	$10/TB
Vultr	$5	250 GB	1 TB	$20/TB	$10/TB
UpCloud	$5	250 GB	0.5 GB	$20/TB	$10/TB

Unlike the pay-as-you-go scheme from the top three providers, they have a minimum charge bundled with initial data storage and outbound transfer quota. Although their single storage class is cheaper than the standard class from top providers, it is more expensive than the above archival classes. Hence, these smaller cloud providers are not suitable for long-term storage.

Another notable provider is Scaleway. Scaleway has C14 Cold Storage advertised as "World’s first alternative S3 Glacier". C14 Cold Storage stores data in an underground bunker in Paris only. However, the storage is accessible from both Paris and Amsterdam regions. It comes with 75 GB free storage and 75 GB free outbound transfer with an additional of €0.002/GB for storage and €0.01/GB for outbound transfer.

Backblaze B2 and Wasabi

Unlike the above providers, which mainly sell computing, Backblaze B2 and Wasabi offer only a cloud storage solution. Their overall pricing is reasonable for ageless backup storage and impressively cheaper than those top providers. They do not have a retrieval fee and a delayed retrieval period. Although Wasabi is relatively new, it is recommended by Stanford University IT. You can read more information by clicking the link in the table.

	Backblaze B2	Wasabi
Minimum price	-	$5.99
Data storage	$0.005/GB	$0.0059/GB
Outbound transfer	$0.01/GB	Free with conditions
Minimum storage duration	-	90 days
API operations	Limited free	-

Backblaze B2 has only US and EU zone, while Wasabi has many regions in the US and Asia. Backblaze B2 users have to select storage location when creating an account and cannot change, whereas Wasabi users can create a bucket in any region.

Conclusion

	Big cloud	Smaller cloud	Backblaze B2	Wasabi
Storage class	Many archival classes	Single class	Single class	Single class
Data storage	Less than $5/TB	$20/TB	$5/TB	$5.99/TB
Outbound transfer	More than $80/TB 💢	$10/TB	$10/TB	No ❌
Minimum storage duration	Yes ✔	No ❌	No ❌	90 days
Data retrieval cost	Yes ✔	No ❌	No ❌	No ❌
API operations cost	Yes ✔	No ❌	Yes ✔	No ❌

Backblaze B2 and Wasabi offer a fantastic solution for data hoarders like me. I recommend you to evaluate their pricing strategy and performance yourself. From my experience, Wasabi gives better performance when connecting from the Asia Pacific to the US region.

More Resources

Referrals

DigitalOcean $100, 60-day credit
Linode $100, 60-day credit

Actions Runner on DigitalOcean App Platform

Thew — Thu, 07 Jan 2021 00:01:45 +0000

This is the third and final article of the series Trying DigitalOcean App Platform which is part of DigitalOcean App Platform Hackathon. This is also my official submission for the hackathon.

What I built

GitHub Actions self-hosted runner docker on DigitalOcean App Platform worker.

Currently, we cannot deploy a new app that only has the worker. So you need to create a new app with a service then delete that service and create a worker.

Category Submission:

Random Roulette

Screenshots

GitHub settings

DigitalOcean dashboard

Description

This is a self hosted GitHub Actions runner for deploying to DigitalOcean App Platform. You will get the simplicity of automated cluster deployment and scaling by DigitalOcean App Platform.

It will register and remove itself automatically when DigitalOcean App Platform start and stop the container. You can vertical scale or horizontal scale your runner. If you do a horizontal scale (Pro plan only), all runners will be automatically registered to GitHub.

Link to Source Code

ThewBear / do-actions-runner

Self-hosted actions runner on DigitalOcean App Platform

Permissive License

MIT License

Background

I built this app to trying out DigitalOcean App Platform worker and GitHub Actions self-hosted at the same time.

The DigitalOcean App Platform worker is a running server-side code that is not internet-accessible. Because workers can not accept HTTP requests, they are only suitable for doing background tasks, such as queue processing.

The GitHub Actions self-hosted runners offer more control of software tools than GitHub-hosted runners provide. With self-hosted runners, you can choose to increase processing power or memory, install custom software, and choose an operating system not offered by GitHub-hosted runners. In our case, this is done by modifying Dockerfile and scaling the component.

How I built it

I built it by looking through existing resources about self-hosted actions runner docker. Here are some of them:

Then I create a Dockerfile and entrypoint.sh.

Additional Resources/Info

n8n on DigitalOcean App Platform

Thew — Tue, 05 Jan 2021 10:20:29 +0000

This is the second article of the series Trying DigitalOcean App Platform which is part of DigitalOcean App Platform Hackathon

Today, I'm trying to deploy n8n.io to DigitalOcean App Platform.

ThewBear / do-n8n

However after it is successfully deployed, the web ui could not connect to backend. It is showing "Connection lost" on the upper right corner.

I open Devtool and don't see any console error. Then I look at network tab and see that the request to /rest/push is pending. This is the only one request that n8n is trying to reach the backend. The request is not a plain http request instead it is using an EventSource API.

It seems that DigitalOcean App Platform does not support the EventSource API. I found an issue about how to configure a reverse proxy like Nginx. However, the Platform-as-a-Service like DigitalOcean App Platform and Cloud Run seems to not support it.

Unfortunately, we cannot deploy n8n workflow automation tool on DigitalOcean App Platform. DigitalOcean App Platform works great to provide simplicity for developer using a framework supported.

Strapi QuickStart on DigitalOcean App Platform

Thew — Mon, 04 Jan 2021 15:32:38 +0000

This is the first article of the series Trying DigitalOcean App Platform which is part of DigitalOcean App Platform Hackathon

In this post, I will deploy a Strapi quickstart to DigitalOcean App Platform.

Update 2022: This post was created with Strapi version 3, the latest Strapi version is 4. There is an official video on Deploying Strapi V4 to DigitalOcean on YouTube.

Setup strapi

Create a strapi project in to my-project directory.

npx create-strapi-app my-project --quickstart

The quickstart project will use a local sqlite as a database. The default sqlite database file is at ./.tmp/data.db.

After the project has been created, the browser will be opened with admin setup page automatically. The admin user and content you create at this step will be available only on your computer since it is stored in local sqlite.

Production database config

To tell Strapi to use DigitalOcean database when we deploy it, create the following ./config/env/production/database.js file.

module.exports = ({ env }) => ({
  defaultConnection: "default",
  connections: {
    default: {
      connector: "bookshelf",
      settings: {
        client: "postgres",
        host: env("DATABASE_HOST", "localhost"),
        port: env.int("DATABASE_PORT", 5432),
        database: env("DATABASE_NAME", "strapi"),
        username: env("DATABASE_USERNAME", "strapi"),
        password: env("DATABASE_PASSWORD", "strapi"),
        ssl: {
          ca: env("DATABASE_CA", ""),
        },
      },
    },
  },
});

Develop Strapi

Develop Strapi as usual. If you are new to Strapi, you can try Quick Start Guide

Push code to GitHub repository

For example, here is my repository.

Launch DigitalOcean App

Go to DigitalOcean App Platform Console and choose the repository.
Choose the region that is close to your user
Set the following environment variables and change HTTP port to 1337. Notice the db prefix in environment variables.
- NODE_ENV = production
- DATABASE_HOST = ${db.HOSTNAME}
- DATABASE_PORT = ${db.PORT}
- DATABASE_NAME = ${db.DATABASE}
- DATABASE_USERNAME = ${db.USERNAME}
- DATABASE_PASSWORD = ${db.PASSWORD} (Encrypt)
- DATABASE_CA = ${db.CA_CERT}
Add database, set its name to db. The name must be the same as the prefix you used in environment variables.
Choose your plan and container size. The lowest cost plan is $12 (Basic $5/mo). Then launch your Strapi App! 🎉

Congratulations! 🎊

The Strapi application is being deployed and will be ready in around 10 minutes. You can visit https://<your-url>/admin to setup production admin account.

State Of CSS 2020 is out! DEV is the first runner-up blog.

Thew — Sat, 05 Dec 2020 03:55:26 +0000

State Of CSS 2020 results have come out.

DEV is the first runner-up blog and magazine behind CSS-Tricks.

Congratulations to the DEV team and everyone here! 🎉

Awards

Things that stood out this year.

Most Adopted Feature: CSS Grid
Most Adopted Technology: Tailwind CSS
Highest Satisfaction: PostCSS
Highest Interest: CSS Modules
Most Write-Ins: PhpStorm

Full results

You can see the full results on https://2020.stateofcss.com/

State Of JS

Now, it's Javascript turn. Take the survey on https://stateofjs.com/

Deploy your own short URL to Vercel

Thew — Tue, 01 Dec 2020 16:50:08 +0000

A few months ago, I posted how I setup GitHub Actions to deploy a short URL application to Vercel.

Create your personal shorturl with Vercel + GitHub Actions

Thew ・ Sep 17 '20

#actionshackathon #vercel #devops #webdev

However it requires some complex setup such as token and project secrets management.

Now, I would like to introduce a new version of vercel-shorturl. In this version, you just clone the template repository, edit redirects.yml and deploy to Vercel.🎉

Or click the below button to deploy to Vercel immediately!😊

With this new version, you can edit your configuration through GitHub web interface and let Vercel GitHub Integration deploy it immediately.❤

Currently, it is still a beta version and I would like to hear your feedback!🤗 You can reach me on Twitter.

Demo

Demo is deployed with the example redirects.yml.

Here is some route you can try:

See more supported routing features in the example redirects.yml.

Features

Custom page

You can override home page and 404 page by placing index.html and 404.html in project root.

Analytics

vercel-shorturl can automatically send an event to Amplitude, just set Amplitude environment variable to your HTTP API key.

Why Vercel?

Because it's easy and free!✨

Why short URL?

Because it's easy to share and remember. You can set it to your own domain to improve your brand.

ThewApp / vercel-shorturl

Create your own shorturl on Vercel

vercel-shorturl

Create your own shorturl on Vercel Edge Middleware.

Demo

Demo is deployed with the example redirects.yml.

Usage

Use the template

See the example redirects.yml for available features.

Features

Custom page

You can override home page and 404 page by placing index.html and 404.html in project root.

Analytics

vercel-shorturl can automatically send an event to Amplitude, just set Amplitude environment variable to your HTTP API key.

View on GitHub

Completed Hacktoberfest

Thew — Sun, 18 Oct 2020 16:24:58 +0000

I have officially completed Hacktoberfest 🎉 since my 4 PRs have passed the 14-day review period. While this year Hacktoberfest has not ended yet but it has a lot of stories.

On the first day, we have

DigitalOcean's Hacktoberfest is Hurting Open Source

Thew ・ Oct 1 '20 ・ 1 min read

#hacktoberfest #opensource #github #discuss

Then DigitalOcean and Dev team come with the updated rules.

An Update on Hacktoberfest ️

Jess Lee for The DEV Team ・ Oct 1 '20 ・ 2 min read

#hacktoberfest #opensource #meta

I learned that being an open source contributor is hard but being a project maintainers requires much more efforts.

Thanks to DigitalOcean and DevTeam for sponsoring and creating resources for this amazing event.

Have you migrated to Yarn 2?

Thew — Mon, 12 Oct 2020 11:52:28 +0000

Yarn 2 has been released for 10 months now.

Introducing Yarn 2 ! 🧶🌟

Maël Nison ・ Jan 24 '20 ・ 15 min read

#javascript #npm

Have you migrated or do you still use yarn 1?

I am still using yarn 1 for some projects or staying with npm. I found that many open-source projects don't have a plan to migrate yet. Also, many libraries don't support Yarn 2 at this moment for example.

How to make Hacktoberfest contributions counted in not opted-in project

Thew — Sun, 04 Oct 2020 09:35:02 +0000

This year, there is a major change in how contributions are counted.

Unlike in previous years, 2020 Hacktoberfest contributions must be made in projects that have specifically chosen to join the celebration.

Each PR must be made on Hacktoberfest-classified repos. Your PRs will either need to be merged, approved, or labeled as hacktoberfest-accepted in order to add to the total count.

Read more about this change on note from DigitalOcean and post from The DEV Team. ❤️

This is bad for people who would like to contribute to their favorite projects which haven't opted-in. You may open random PRs to your own repos but this is still spammy.

Andy Blum

@andy__blum

Just spent 3 hours working on a high-quality PR for a repo that hasn't opted into @hacktoberfest

Now I'm going to have to submit 4 garbage PRs to my own repos for my t-shirt. Thanks to the spammy MFers that ruined a great annual event.

CC @shitoberfest

04:20 AM - 04 Oct 2020

There is a solution better than that.

Solution

Note: This is an example pull request. You must make a contribution that is meaningful and follows PR etiquette.

Update (2020/10/05 15:00 UTC): No longer need the first step.

~~Tag your fork repository with hacktoberfest.~~
Beside create a pull request back to the origin repository, create a pull request to the default branch inside the fork repository.
Label that pull request with hacktoberfest-accepted.

Now that pull request in fork will be counted toward completing the Hacktoberfest challenge! 🎉

For more tips like this one, you can follow me on Twitter or buy me a coffee.

DigitalOcean's Hacktoberfest is Hurting Open Source

Thew — Thu, 01 Oct 2020 05:08:23 +0000

There is a rising spam issue with hacktoberfest this year.

// Detect dark theme var iframe = document.getElementById('tweet-1311355857465225218-543'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311355857465225218&theme=dark" }

Which later results in the blog post "DigitalOcean's Hacktoberfest is Hurting Open Source"

There is also a discussion on Hacker News

Honestly, I enjoyed Hacktoberfest for many years but this problem is really hurting open source community. I hope DigitalOcean will take this seriously. Fortunately, DigitalOcean Community Platform Manager is looking into this.

// Detect dark theme var iframe = document.getElementById('tweet-1311421301291200512-122'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311421301291200512&theme=dark" }

UPDATE:

Here are official responses