Forem: Filip Troníček

Public IPs - the hard way

Filip Troníček — Wed, 20 Jan 2021 11:02:49 +0000

Sometimes, it could be because of multiple reasons, you just want to host your things at home, this could be:

A VPN for your devices so that you always have to access to your LAN wherever you are
A bigger Web App with a separate database and need for a lot of computing power
A game server (eg. Minecraft)
File storage solution (FreeNAS, Plex, ..,)
Whatever else that exposes a port to the network

This is all nice and easy, the problem comes when you want to do one of the following:

DDOS protection
Hide your IP

Both of these problems can be addressed fairly easily with the help of a VPS and optionally a service like Cloudflare. The way you do this is fairly simple, you set up a VPN between the VPS and your local machine and forward a specific (or more) ports on the VPS to target the local computer. This is best done when both of these systems run Linux, I will specifically be using Ubuntu 20.04 LTS on both of my systems, but it will not be hard to change the config to work on any other version/distro.

First things first prepare your VPS, this can be from a cloud provider (Azure, GCP, AWS or a VPS service like DigitalOcean, Linode, and others. The other important thing to note is to make sure the port you want to forward is accessible through the firewall of the provider, this way your requests won't get blocked. A static IP is also a very useful thing in this scenario, but be aware this may cost you something, but not everywhere. After that make sure you can SSH into the VPS successfully and we shall begin with the process.

First, we install Zerotier (you will need to have a Zerotier account for this), when you do, just make a new public network and take a note of the id. Paste the commands below in the terminal and change mynetworkid to your id.

VPS:

curl -s https://install.zerotier.com | sudo bash
sudo zerotier-cli join mynetworkid

Local machine:

curl -s https://install.zerotier.com | sudo bash
sudo zerotier-cli join mynetworkid

Now we forward the port EXTERNAL_PORT to LOCAL_PORT, so for example we can forward port 8080 on the VPS to port 80 in our local machine to route to a web server (if one is set up).

VPS:

sudo apt update
sudo apt install socat
sudo tmux
sudo socat TCP-LISTEN:EXTERNAL_PORT,fork,reuseaddr TCP:LOCALIP:LOCAL_PORT

Now just exit with Ctrl+B D

I hope this little tutorial helped, see you soon!

Cloud storage v2.0: the what and the how

Filip Troníček — Sun, 18 Oct 2020 20:56:29 +0000

Cloud storage: we all use it, but how do you get to the next level with it?
What do I mean by the next level? I mean hosting stuff that you can get direct URLs to, make them pretty as well, and embed this media anywhere you want.

The easy and simple way: online free file hosting services

Here are some services that will make you happy in a couple of seconds:

1.1 Catbox.moe (my personal favourite)

Catbox is an awesome file hosting service, where you can store your up to 200MB files indefinitely (or use Litterbox to use it temporarily).

It also provides a really neat API, which I use in my product Interclip

catbox.moe

1.2 Uguu.se

Although very similar in UI to Catbox, uguu.se is a temporary (24 hour) file hosting service with a 100MB file size limit.

uguu.se

1.3 File.io

File.io is a file hosting service only for temporary uploads, with a variable date of expiration. It also provides a really simple API

file.io

The expensive way: the cloud

The services listed below are all on the enterprise level, where you pay for reads, writes, and other things. All of them are pay as you go.

2.1 Azure Blob Storage

The cloud storage option from Microsoft.

Azure blob storage

Pricing

2.2 GCP Storage Buckets

Google also provides a storage option on its Google Cloud Platform. It lacks a few features (like DragN'Drop), but it is a very good service used by a lot of big companies (including Kaggle, Twitter, and others).

Google Cloud Storage options

Pricing

2.3 Amazon S3

The storage option from Amazon

S3 details

Pricing

2.4 Wasabi

If you want to pay less for an enterprise solution, you should try Wasabi. They say that they provide the same quality as all the three mentioned above in up to 80% less.

Pricing calculator

More info

The hacky ways

3.1 Google Drive Direct links

If you want a quick and easy way to get direct media links, try Google Drive Direct Media Links.

3.2 GoIndex

With a Google Drive and a Cloudflare account, you can have very cheap storage with unlimited bandwidth. You can get Google Drive storage for fairly low prices, and if you are in a company or a school with Gsuite, you may have an unlimited account.

The only limitation is Cloudflare because Cloudflare workers provide only 100K free requests a day, but for most use cases, that's plenty.

You can achieve all this for free:

I will be posting a tutorial on how to do this later, but if you cannot wait, look at the docs.

Until then, see ya!

Check how green your web project is

Filip Troníček — Sat, 15 Aug 2020 20:42:25 +0000

My Workflow

Ever wondered, how much carbon gets produced every time someone visits your site? You can now do that, and track the changes in the effects on the environment on every push or PR! With the help of website carbon and their API, you can get a badge in your README and an artifact on every workflow run on where your projects currently sit.

Here is how the badge can look like:

Submission Category:

DIY Deployments

Yaml File or Link to Code

(Don't forget to edit any parts that you want, especially the URL and the branch)

name: Website green-o-meter

on:
  push:
    branches: main

jobs:
  update-stats:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
        with:
          persist-credentials: false 
          fetch-depth: 0
      - name: green-website
        uses: filiptronicek/green-action@main
        env:
            URL: https://dev.to # Your measured URL
      - name: Commit files
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "Update carbon image" -a
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main # Branch to push to

All the code:

filiptronicek / green-action

Check how your web project is affecting the planet

Green Action

Check how your project is affecting the planet and check the carbon stats

Read about it in my Dev.to post

Demo

Setup

Open your README and add paste the following tag in there (this will be where the image will be placed): 
Add the following workflow to your .github/workflows folder:

name: Website green-o-meter
on:
  push:
    branches: main

jobs:
  update-gist:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master
        with:
          persist-credentials: false
          fetch-depth: 0
      - name: green-website
        uses: filiptronicek/green-action@main
        env:
          URL: https://dev.to #Your measured URL
      - name: Commit files
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git commit -m "Update carbon image" -a
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main #Change this

…

View on GitHub

Additional Resources / Info

Used GitHub projects:

actions / upload-artifact

Upload-Artifact v3

This uploads artifacts from your workflow allowing you to share data between jobs and store data once a workflow is complete.

What's new

Easier upload
- Specify a wildcard pattern
- Specify an individual file
- Specify a directory (previously you were limited to only this option)
- Multi path upload
  - Use a combination of individual files, wildcards or directories
  - Support for excluding certain files
Upload an artifact without providing a name
Fix for artifact uploads sometimes not working with containers
Proxy support out of the box
Port entire action to typescript from a runner plugin so it is easier to collaborate and accept contributions

Refer here for the previous version

Usage

See action.yml

Upload an Individual File

steps
- uses: actions/checkout@v2

- run: mkdir -p path/to/artifact

- run: echo hello > path/to/artifact/world.txt

- uses: actions/upload-artifact@v3
  with:
    name: my-artifact
    path:

…

View on GitHub

ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

With ease:

update new code placed in the repository, e.g. by running a linter on it,
track changes in script results using Git as archive,
publish page using GitHub-Pages,
mirror changes to a separate repository.

Usage

Example Workflow file

An example workflow to authenticate with GitHub Platform:

jobs
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
        fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
    - name: Create local changes
      run: |
        ...
    - name: Commit files
      run: |
        git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
        git config --local user.name "github-actions[bot]"
        git commit -m "Add changes" -a
    - name:

…

View on GitHub

vercel / ncc

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

ncc

Simple CLI for compiling a Node.js module into a single file together with all its dependencies, gcc-style.

Motivation

Publish minimal packages to npm
Only ship relevant app code to serverless environments
Don't waste time configuring bundlers
Generally faster bootup time and less I/O overhead
Compiled language-like experience (e.g.: go)

Design goals

Zero configuration
TypeScript built-in
Only supports Node.js programs as input / output
Support all Node.js patterns and npm modules

Usage

Installation

npm i -g @vercel/ncc

Usage

$ ncc <cmd> <opts>

Eg:

$ ncc build input.js -o dist

If building an .mjs or .js module inside a "type": "module" package boundary, an ES module output will be created automatically.

Outputs the Node.js compact build of input.js into dist/index.js.

Note: If the input file is using a .cjs extension, then so will the corresponding output file This is useful for packages that want…

View on GitHub

Help with the project:
I learned a lot from implementations of GH Actions by

.ltag__user__id__70813 .follow-action-button { background-color: #6441a5 !important; color: #ffffff !important; border-color: #6441a5 !important; }

YogiFollow

요기 • Creator of Devparty.io 🥳 • Developer CRED • Into #NFTs and #Web3 • Mod at Dev.to • ▲ Typescript • BTS Fanboi ⟬⟭ • he/him 🌳

(check him out, he's an awesome developer)

Perfecting the Windows Terminal

Filip Troníček — Tue, 04 Aug 2020 10:30:33 +0000

The Windows Terminal is the program, which all devs missed in Windows for years. Now it's here and it's awesome! In this post, I'll share some tips for customizing it.

1) PowerShell Core

PowerShell is the default shell in the Terminal, and there is now a multiplatform and open source version of it called PowerShell Core. It's not that much different from PowerShell, but it has such an awesome icon.

Download it from GitHub or just choco install powershell-core

2) WSL 2

You can have Linux in the Terminal, too! Just download Ubuntu, Alpine, Debian, or Kali from the Microsoft Store (more distros are in the works).

With the introduction of Windows Subsystem for Linux version 2, you can do even more, because of the deeper integration of Linux into the Terminal. You can even have a GUI!

You can have a lot of them running at once, just like this:

3) Terminal Settings

At the end of the previous chapter, you saw an image of my current setup of the Terminal. As you can see, you can have custom fonts, icons, and backgrounds. All of this can be achieved by editing the settings.json of the Terminal. You can get there by hitting Ctrl + , or selecting "Settings" in the dropdown menu, you can directly edit the JSON powering your Terminal layout. If you want to see everything you can do here, take a look at the Microsoft Docs. The most important thing is, that you can set settings for both default shells and specific ones. Each shell has a GUID, which is a unique identifier of the shell. You can further specify a name, an icon, and whether to show it or not. This can result in something like this:

{
    "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
    "hidden": false,
    "name": "Ubuntu",
    "source": "Windows.Terminal.Wsl",
    "icon": "https://files.catbox.moe/xpptug.png"
},

You can also set to use acrylic (the transparent background) or use a different font. An awesome font for the Terminal is Cascadia Code PL (it includes some little icons for themes and such)
An example of this can be something like this:

"defaults": {
     "fontFace": "Cascadia Mono PL",
     "useAcrylic": true
}

4) Panes

Not only can you have a lot of tabs open, but you can also have two panes with the same shell at once! You can bind that to any shortcut you want, but I like to use Alt + Shift + D. You can configure this again in your settings.json file mentioned above. In the keybindings section, paste this:

{
 "command": { 
    "action": "splitPane", 
    "split": "auto",
    "splitMode": "duplicate"
 }, "keys": "alt+shift+d" 
}

5) Sudo mode with gsudo

You can use Escalated privileges mode using the Chocolatey package gsudo (choco install gsudo)
This can be used for example for using Chocolatey because it needs admin privileges to run properly.

For this specific example of Chocolatey, type notepad $Profile in the Powershell and add the following line to it:
function choco { gsudo choco @args }

My config

My Terminal config is publicly accesible in a GitHub Gist, feel free to edit or do anything else with it.

Interclip

Filip Troníček — Sun, 27 Oct 2019 19:17:46 +0000

Hi devs,
I want to ask you a question: Do you use the same operating system and tools for everything you do at work (or home)? If your answer is yes, well, then there's nothing to worry about but if not, a tool I made may come in handy.
You probably use a deployment tool for your work (if you do web development), or you have a documentation website which you want to read on your computer. For both of those things (and anything else URL related), you can use Interclip.

What is Interclip?

Interclip is a modern solution for sharing URLs with yourself or someone else. You probably share URLs by just emailing them to yourself, right? Think about it. Isn't this just like... dumb? Filling your inbox and taking so much time is just nonsense. If you use Interclip, you can just paste a URL and get back a five-digit randomly generated code. This code you can then input on your other device (doesn't even have to be yours) and get the URL back.

Don't know where to host a file? Interclip can also help

Interclip is not just about URLs, but also about files. Any file smaller than 100 MB can be uploaded to Interclip and never be deleted. So you can host anything because there's also no file-type limitation. Also, every file is encrypted so no-one else will be able to see it.

API? Of course we do

There's also a very simple API for developers to use. Check the documentation for details.

Open Source

The entirety of Interclip is open source. I am working on it just by myself now so any contributions are welcome! And if you're not really into web-development or you don't have the time, a star on GitHub would be very appreciated.

The APP: interclip.app
Github repo: aperta-principium/Interclip

Thanks for reading. Happy developing!

How can you upload to CatBox using JavaScript?

Filip Troníček — Sun, 29 Sep 2019 11:33:42 +0000

How can you upload to CatBox using JavaScript?

Sep 29 '19 Comments: 1 Answers: 1

I am making an app and wanted to add a client-side uploader. I found a couple of services, including:

file.io

catbox (probably the one I want to use)

Uguu

put.re

They all support curl as seen from the documentation but as I said I want a preferably JavaScript solution for…

Open Full Question

Forem: Filip Troníček

Public IPs - the hard way

Cloud storage v2.0: the what and the how

The easy and simple way: online free file hosting services

1.1 Catbox.moe (my personal favourite)

1.2 Uguu.se

1.3 File.io

The expensive way: the cloud

2.1 Azure Blob Storage

2.2 GCP Storage Buckets

2.3 Amazon S*3*

2.4 Wasabi

The hacky ways

3.1 Google Drive Direct links

3.2 GoIndex

Check how green your web project is

My Workflow

Submission Category:

Yaml File or Link to Code

filiptronicek / green-action

Check how your web project is affecting the planet

Green Action

Demo

Setup

Additional Resources / Info

actions / upload-artifact

Upload-Artifact v3

What's new

Usage

Upload an Individual File

ad-m / github-push-action

GitHub actions to push back to repository eg. updated code

GitHub Action for GitHub Push

Usage

Example Workflow file

vercel / ncc

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

ncc

Motivation

Design goals

Usage

Installation

Usage

YogiFollow

Perfecting the Windows Terminal

1) PowerShell Core

2) WSL 2

3) Terminal Settings

4) Panes

5) Sudo mode with gsudo

My config

Interclip

What is Interclip?

Don't know where to host a file? Interclip can also help

API? Of course we do

Open Source

How can you upload to CatBox using JavaScript?

How can you upload to CatBox using JavaScript?

2.3 Amazon S3