Step by Step Tutorial to Create Uploading File Form

Image for post
Image for post
Cloud vector created by stories — www.freepik.com

Introduction

This article shows how to build a drag & drop form using Python and Javascript. Uploading files allows users to analyze their data or image on your app. We use FastAPI [1] for this tutorial but you can apply this to Flask or other Python frameworks. FastAPI is a modern, high-performance, web framework for building APIs with Python 3.6+ based on standard Python type hints. HTML Drag and Drop [2] interfaces enable applications to use drag-and-drop features in browsers.

Code along with the article or grab the final code.

Demo (The demo runs on Heroku free hosting, so it may take time to restart). …


Using a Progress Bar as a Visual Aid for Uploading File

Image for post
Image for post
Photo by Gavin Biesheuvel on Unsplash

Introduction

When you have an upload file form for a csv, image, or data file, it is a good idea to show progress for the user experience. We are going to use the JavaScript library, progressivebar.js in this article. We explore three ways to alternate the progress bar colors, discussing how to calculate the duration time and show an example using Bootstrap.

Method 1

Here is a progress bar example to show different colors each time when you load a web page.


How to keep your app active 24/7

Image for post
Image for post
Image by mohamed_hassan from Pixabay

Introduction

Heroku is a cloud Platform As A Service (PaaS) supporting Ruby on Rails, Java, Node.js, Scala, Clojure, Python, PHP, and Go. Heroku’s free version offers 550–1000 dyno hours per month. Your apps sleep after 30 mins if no one is using your app. Your apps will be always free if your monthly dyno hours is within the limit.

The Dynos are isolated, virtualized Linux containers on the Heroku platform.

In this article, you will learn how easy it is to set up and run your FastAPI project and making it active 24/7 on Heroku.

I’m currently hosting this FastAPI website at Heroku as a demo. …


Getting started with FastAPI

Image for post
Image for post
Image by WikiImages from Pixabay

Introduction

In this article, we’re going to create a simple static website starter using FastAPI [1], Jinja2Templates [2], and Bootstrap 4 [3]. You can use this as a base to populate with site-specific routes and templates/views for your needs.

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.

You can code along with this article or download the files.

Demo (The demo runs on Heroku free hosting, so it may take time to restart.) …


DRY (Don’t Repeat Yourself), Automate Them

Image for post
Image for post
Image by Andrew Martin from Pixabay

Introduction

When you are using terminal and developing your awesome apps, you find yourself repeating a series of commands often.

In this article, you will find bash scripts that you can use to automate some of your workflows.

Checking your command history

If you are interested in finding out your 10 most used commands stored in your history you can run:

history | sed -e 's/ *[0-9][0-9]* *//' | sort | uniq -c | sort -rn | head -10


The Gitstart creates, adds, and pushes, and speed up creating a GitHub repo

Image for post
Image for post
Image by Stefan Keller from Pixabay

[Updated: 2021–1–14]

The Gitstart will remove all the hassle when creating a new GitHub repository. After creating a repository at GitHub, you have to type the following as a standard procedure:

Creating a new Git repo.

Line 1: Adding “My Repo” to the README markdown file.
Line 2: Creating a new Git repository.
Line 3: Adding the README.md in the working directory to the staging area.
Line 4: Saving your changes to the local repository.
Line 5: Creating a branch “main”.
Line 6: Adding the remote where your repository is stored at. …


Introduction to Ubuntu Multipass

Image for post
Image for post
Image by Stefan Keller from Pixabay

Multipass is one of the options you can use Ubuntu with on Mac, Windows, or Linux. It is easy to launch and control Ubuntu instances. In this article, we are going to learn basic operations including mounting a local directory to a Multipass instance, opening a shell prompt, and adding a path to the ~/.bashrc.

“Multipass is a mini-cloud on your workstation using native hypervisors of all the supported plaforms (Windows, macOS and Linux), it will give you an Ubuntu command line in just a click.” — https://multipass.run/docs

Installation


Getting Started with LeTeX + Docker + VSCode Remote Container

Image for post
Image for post
Image by Stefan Keller from Pixabay
Table of ContentsIntroduction1. Setup
2. Method 1: tianon/latex
3. Method 2: Remote-Containers
4. Method 3: Creating your container
5. How to switch Remote containers
6. Opening a PDF
Conclusion

Introduction

We can run a Docker application in any environment, Linux, Windows, or Mac. Docker provides a set of official base images for most used operating systems and apps. Docker allows you to take full control of your environment, installing what you need, removing, and installing from Dockerfile.

In this article, I will show you three ways how to use LaTeX on Docker and VSCode Remote Containers extension. In the first part, we use tianon/latex image, and qmcgaw/latexdevcontainer Docker image in the second part. …


Guide to Auto-Update PDF Using latexmk and VSCode

Image for post
Image for post
Photo created by creativeart — www.freepik.com
Table of ContentsIntroduction1. Installing LaTeX
2. Creating PDF from a terminal using latexmk
3. Installing LaTeX Workshop Extension to VS Code
4. Create your own snippets
5. Testing the snippet
6. LaTeX Workshop error
7. Automatically update PDF when you save
Conclusion

Introduction

I am an occasional LaTeX user. I use Typora for writing articles, reports, notes, and more. But I don’t have full control over the layout with markdown. So I restarted using LaTeX. I’d like to share what learned. …


No more Python env and package update

Image for post
Image for post
Image by Stefan Keller from Pixabay
Table of ContentsIntroduction1. Installing Docker Desktop
2. Docker help
3. Running Jupyter Docker Stacks
4. Formatting Docker ps
5. Entering the Docker container and using bash
6. Stopping and removing containers and images
7. Connecting the local directory to a Docker container
8. Inspecting a container
9. Getting started with Docker file
10. Publishing an image to Docker Hub
Conclusion

Introduction

Docker simplifies and accelerates your workflow, while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project. — from Developing with Docker

Docker provides a contained environment for your development. By using Docker, you may not need to install pyenv/pipenv/virtualenv or any programming languages on your computer. You just use a Docker container! In this article, you will learn how to run Jupyter on Docker. …

About

Shinichi Okada

Math teacher, programmer, husband, father, Japanese. I love to share what I learn. Please sign up for my newsletter at https://bit.ly/3nEaAfr.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store