DEV Community: Mike

Just a quickie.

Mike — Fri, 27 May 2022 03:49:21 +0000

Here are the aliases that I use for python virtual environments.

# aliases for venv (python-venv)
alias create-venv='python3 -m venv /home/${USER}/.config/venv/${PWD##*/}'
alias remove-venv='rm -rf /home/${USER}/.config/venv/${PWD##*/}'
alias activate-venv='source /home/${USER}/.config/venv/${PWD##*/}/bin/activate'

These aliases create a virtualenv in /home/username/.config/venv/directoryname

${PWD##*/}

Gets only the directory name your currently in, not the full path.

I.E. the full path '/home/username/code/python/app_name' ${PWD##*/} returns only app_name

I'm sorry, also I made a thing.

Mike — Thu, 12 Aug 2021 23:03:30 +0000

tldr; links at the bottom.

First I'd like to apologize to anyone that was expecting a lot more content from me. I'm really kind of a recluse and just stay to myself. I prefer to lock myself in a room and code and if I come up with something that I am happy with I will share with others. If anyone wants to know more about me, please feel free to reach out I don't mind chatting with anyone. And now..

This..

I made a game, well am tinkering with a game. It's a block defender game, I found a tutorial for a similar game using the Godot game engine by TheBuffEd on youtube. (Links for everything will be below.) I looked at the application that he was creating when he demo'd the game and I bet myself I could make that in p5js. And here's what I've come up with. Now, don't go getting all excited about a new cool game. This is just simple geometry, no sound, no images and I mean it's just basic. I'm sharing it because really I need more motivation to keep going. I've spent the last two days working out the mechanics and it seems solid, now is the time for refinement and I'm kindof at the "eh, it works" point lol!..

So the game works like so, you click a colored block at the bottom, then click in the lane that has a matching falling block. If you yeet the falling block out of existence then you get a point. If the falling block yeets itself out of existence by getting to the bottom, then you will loose a point. If you have 0 points and loose a point it's game over bud.

Below will be the links for this project.

The game
The code
The Godot tutorial

Python development environment in a Docker container

Mike — Sat, 05 Jun 2021 09:46:24 +0000

Purpose

Create and setup a python development environment inside of docker in 5 minutes. (Also more or less a journal to myself of how to do this)

What to know

You will need to understand virtual environments with python. I will place the commands that are needed for setting up the virtual environment but will not expand upon them.

What you need

Python 3.8 is the version I'll be using in this tutorial.
Python modules you will need are:

fastapi
hypercorn

a few files will need to be created.

main.py
Dockerfile
.dockerignore
docker-compose.yml

The following commands will install and create the files you need.

mkdir -p ~/projects/myproject
cd ~/projects/myproject
touch main.py Dockerfile .dockerignore docker-compose.yml

Above we create the project directory and the initial files we'll need for the app.

python3.8 -m venv .venv
source .venv/bin/activate
pip install fastapi hypercorn
pip freeze > requirements.txt

This code above creates the virtual environment in the CWD.
In the above commands ~/projects/myproject should be whatever directory you want to put your code into.

The files

Now to modify the files you just created. Lets start with the fastapi application.

in `main.py`:

from fastapi import FastAPI

app = FastAPI()

@app.get('/')
def index():
    return {'key' : 'value'}

The above code sets up a very basic fastapi application.
First you import FastAPI from fastapi
next you instantiate the app.
then you decorate your index with @app.get('/')
and finally you return a dictionary.

Next in `Dockerfile`:

FROM python:3.8-slim

WORKDIR /app/
ADD requirements.txt /app/

RUN pip install -r requirements.txt

ADD . /app/

EXPOSE 8005

CMD ["hypercorn", "main:app", "--bind", "0.0.0.0:8000", "--reload"]

The above file creates a configuration for docker. It pulls a base image from the dockerhub. This uses python:3.8-slim as the base image. Next we set our Work Directory to /app/ in the container.
after that we add only our requirements.txt to that app directory. then we can run pip install inside the container to install our app requirements, and setup our environment inside the container. After that we add the rest of our app to our /app/ directory on the container expose the port we want to be able to connect to this on and run hypercorn which was installed when we did pip install -r requirements.txt

Now for `.dockerignore`:

you don't have a need to include your .venv folder because you will be creating a virtual environment in the container.

Also you don't need the pycache directories on the container(waste of space).

.venv/
__pycache__/

Now for `docker-compose.yml`

which will put it all together for us.

Note:

if you copy and paste and have issues with the .yml file you may need to check and see if the indentations are spaces or tabs. If they are tabs they will need to be converted to spaces.
It's a yaml thing..

version: '3.8'
services:
    api:
        build: .
        image: fastapiapp:latest
        ports:
            - 8005:8000
        volumes:
            - type: bind
              source: .
              target: /app/

Ok this is the last file. This file holds the container build/config instructions. It will also in this instance build the image for us. It will read the Dockerfile in the current working directory and build and app called fastapiapp with the tag latest

To run it all and see some progress, you should now be able to run docker-compose buid && docker-compose up -d and it should build and bring up your docker development environment. The first time it runs it may take a minute or to to come up, but after that it should be utilizing the build cache in docker to only rebuild/add the code that you modified. It will be accessable from 127.0.0.1:8005

I chose port 8005 because I have containers running on the previous 5 ports. You can use in the Dockerfile and docker-compose.yml file what ever port you'd like. The mapping of the ports is hostport:containerport.

Bind mount volumes are used in this instance to allow you to modify the code in the current directory and it should also update in the container at the same time. The only time you will need to make a build is when/if you add new python modules. Because they will need to be recompiled and installed into the container. So also remember to run another pip freeze > requirements.txt if you install new modules.

A couple of helper scripts to make the process easier.
build.sh
with the contents of:

docker build --pull --rm -f "Dockerfile" -t fastapiapp:latest "."

And a script for running the container in up.sh

docker-compose -f "docker-compose.yml" up -d --build

Things to check when it all goes wrong.

Is port 8005 open on your firewall at least for the local connection?
Is the container running?
- docker ps the image name should be fastapiapp:latest if it is listed without running docker ps -a then it is running.
If it's not running you need to check the logs docker logs -f container_name generally you can see the issue pretty clearly.

github repo

All of the above mentioned files will be in a repository on my github.

Simple chrome extension

Mike — Sun, 31 Jan 2021 19:25:48 +0000

How to write a simple, and useful chrome extension.

So first of all this is really my first tutorial, if you can call it that. So go easy on me. And now, onward.. I am going to show you how to create a chrome extension that is both simple, and useful.

What's it do?

Have you ever needed to send a link from your browser to your mobile device? Well I've needed to (or wanted to rather). And this turns out to be a fairly simple process with a chrome extension. This will sit in your extensions bar, and when you click on it will display a QRCode of the link in the active tab. You will then be able to scan it with the QRCode scanner of your choice on your mobile device, and voila! The link opens on your phone.

The concept and needed files.

Google Chrome extensions are just extra bits of javascript that run in the background of your browser allowing you to accomplish medial tasks while you browse. This particular extension only needs a few pieces.

First you'll need a manifest.json file. This file will configure your extension.

The next files you will need is popup.html and popup.js. this file will be your view and logic.

and the last file you will need is qrcode.js. This file a js library that allows you to generate a QRCode. You can get this file from davidshimjs on github.

### Piecing it all together

manifest.json should have the following contents.

{
    "name": "Link Connector",
    "version": "0.1.0",
    "description": "Connect to links open on your computer, in you mobile device.",
    "permissions": ["tabs"],
    "background": {
        "scripts": ["qrcode.js"],
        "persistent": false
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "manifest_version": 2
}

popup.html should have the following contents

<!doctype html>
<html>
    <head>
        <title>Share Page Link</title>
    </head>
    <body>
        <div id="qrcode"></div>
        <div id="url"></div>
    </body>
        <script src="qrcode.js"></script>
        <script src="popup.js"></script>
</html>

In the above file contents you will see that you have two div's with id's of qrcode and url. These two lines are what our javascript in popup.js will be looking for to embed it's code.

The two lines below the div's are to load the qrcode.js library and our popup.js into the html. You can read more about this here W3C Script Tags

last but not least, popup.js should have the following contents

document.addEventListener('DOMContentLoaded', function(){
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        var url = tabs[0].url;
        var qrcode = new; QRCode(document.getElementById('qrcode'), url);
        var link = document.getElementById('url').innerText = url;
    });

});

And last but not least our logic. There's not really as much going on here as it looks. Lets break this one down a little more than the others.

We have document.addEventListener('DOMContentLoaded', function(){ This tells javascript not to do anything until the content of the DOM (Document Object Model) is loaded. So when you click on the icon in your browser extension bar you will get a popup, but not until then.
Next we give the callback function chrome.tabs.query({active: true, currentWindow: true}, tabs => { Inside of this callback function we will start generating our QRCode.
Now we generate the QRCode itself.

        var url = tabs[0].url;
        var qrcode = new; QRCode(document.getElementById('qrcode'), url);

In the above piece of code, we create a url variable, and create and show the qrcode variable. (creating the QRCode is basically an exact copy from the documentation at davidshimjs on github with the exception that we changed the hard coded link to the url variable we set earlier.

Now all that's left to do is to display it.

var link = document.getElementById('url').innerText = url;
    });

});

This creates a variable called link that will be placed inside the html div with an id of url, the content of that innerText is the url variable we set earlier, which gives us essentially a label underneath the QRCode.

The end

So that about sums it up. Pretty simple, all the code is right there for you to create this extension and use it, add to it make it better etc etc. If there's any questions or if you need some help let me know below. I will post the code to this on github in the next few days. Github repository for tutorial

Finally added a link to the project on github... That only took forever. If you want to clone the repository as a starting point for your own extension, feel free to do so.
Here's how to do that.

git clone https://github.com/MikeCase/sharelinks.git

Again please let me know if you have issues, see issues or want to offer advice, criticism(Constructive of course) leave a message!

If you've made it this far, thank you for reading, and if you have any advice feel free to share it. As I said this is my first tutorial and I hope someone besides myself finds it useful.

Flask-WTF ReCaptcha not working

Mike — Fri, 06 Mar 2020 22:52:55 +0000

It's just not working

So my website has a contact form. On that form I have a ReCaptcha implemented with flask-wtf ReCaptcha.

When I fill out the ReCaptcha it runs and I get the msg "Sending email to {email address} but then it just redirects and flash's the message that it's sending emails but never actually sends them. It's like it skips the mail.send(msg) line. I've done it with both TESTING=True and TESTING=False. With TESTING=Flase I get the error on the form that says "The response parameter is missing" Where's it missing from? because I went through the validation process.

EDIT: It should be noted that I can remove the ReCaptcha and it works fine.

Here's the 3 files that are in play.

The Route

# Routes.py
@bp.route('/', methods=['GET', 'POST'])
def contact():
    form = ContactForm()
    name = form.name.data
    email = form.email.data
    message = form.message.data

    # Test output so I can see what's going on
    print(f'Request method: {request.method}')
    print(f'Validation: {form.validate_on_submit()}')
    print(f'Recaptcha: {form.recaptcha}')
    # End test output

    if form.validate_on_submit():
        msg = Message(
            subject=f"New message from {name}",
            sender=form.email.data,
            recipients=['michael.e.case@gmail.com'],
            html=f"""
            From: <a href="mailto://{email}">{name}</a><br>
            Message: {message}
            """
        )

        print(f'Sending email to {msg.recipients[0]}') # more test output
        mail.send(msg) # Seems to skip this line of code.
        flash('Sending your message...')
        return redirect(url_for('blog_bp.home'))

    return render_template(
        'contact_form/contact_form.jinja2', form=form)

The form

# contact_form.jinja2 
{% extends "layout/layout.html" %}

{% block content %}
<div class="container">
    <form action="" method="POST">
    {{ form.csrf_token() }}
        <div class="form-group row">
            <div class="col">
                <label for="">Name</label>
                {{ form.name(class='form-control', placeholder='Please enter your name') }}
                <small id="helpId" class="text-muted">Please enter your name</small>
            </div>
            <div class="col">
                <label for="">Email Address</label>
                {{ form.email(class='form-control', placeholder='your@email.com') }}
                <small id="helpId" class="text-muted">Enter your email address</small>
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                <label for="">Your message</label>
                {{ form.message(class='form-control', rows='15') }}
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                {{ form.recaptcha }}
                {% for error in form.recaptcha.errors %}
                <ul>
                    <li>{{ error }}</li>
                {% endfor %}
                </ul>
            </div>
            <div class="col">
                {{ form.submit(class='btn btn-primary') }}
            </div>
        </div>
    </form>
</div>
{% endblock content %}

The model

# forms.py
from flask_wtf import FlaskForm
from flask_wtf.recaptcha import RecaptchaField
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import Email, InputRequired

email_err_msg = "Invalid E-mail Address"
input_err_msg = "This field is required."


class ContactForm(FlaskForm):
    name = StringField('Name', validators=[InputRequired(input_err_msg)])
    email = StringField(
        'Email Address', validators=[
            Email(email_err_msg),
            InputRequired(input_err_msg)
            ])

    message = TextAreaField(
        'Your Message', validators=[InputRequired(input_err_msg)])

    recaptcha = RecaptchaField("Are you real?")
    submit = SubmitField('Send Message')

Just to be thorough..

This is my output in the terminal while the website is running.

The first code clip is a GET request to the /contacts page

Request method: GET
Validation: False
Recaptcha: 
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="site-key-edited-for-security"></div>

192.168.123.100 - - [06/Mar/2020 16:41:26] "GET /contact/ HTTP/1.1" 200 -

This one is the POST request to that same /contacts page

Request method: POST
Validation: True
Recaptcha: 
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="site-key-edited-for-security"></div>

192.168.123.100 - - [06/Mar/2020 16:41:42] "POST /contact/ HTTP/1.1" 200 -

So I built a CMS, sortof..

Mike — Thu, 05 Mar 2020 08:01:26 +0000

I built a CMS

It started out with me deciding to change career fields. Well, with that I have been heavily involved with python lately. And I decided I needed a website. Something I can put on my resume, and put my resume on.

Well I can't do anything the easy way so instead of just grabbing some ready to go CMS and slapping it up, no I needed something of my own.. And why not just a simple little resume template? Some hosted HTML/CSS nope, not good enough.

I'll admit that it's not beautiful.. It's REALLY ugly but I'm not a designer. I have exactly 0 artistic creativity. What I do really well however is solve problems. I have absolutely loved creating this beast. And actually plan to continue work on it who knows what it'll become. Possibly just another unfinished project. However, right now I'm learning a lot and it's fun creating my own stuff.

It has a resume builder built in. I plan to extend it in the future adding the ability to download the resume in various formats. Rearrange the resume into one of four(?) layouts. I don't know.

Really? Another CMS?!?

Ehh, don't use it :P Look, this is for me myself and I. If someone outside of me, myself and I finds some kind of use from it great if not no worries. And honestly I don't know that I would consider this really a full fledged CMS. It still needs a LOT of polish. It's basically right now barely functional. It's still running in a dev environment on my local server.

It's in a private repository on my github, the code I'm sure looks soooOOOOoooo amateurish.. lol anyways I do plan on making the repository public once I publish it to my domain. In the mean time you can keep an eye out for it on my github if you'd like Github. I also want to make sure that it's ready to be installed elsewhere without much hassle. As in like, I can successfully git clone install and run it outside of my currently setup environment.

The code is hideous. Yep.

This is my first "large" scale project.. I guess if you can call it that. Most everything I've ever done with programming was things I taught myself. So I'm still learning and I have been seemingly finding cleaner ways to do things every day.. I have been noticing that more and more of my commits lately have just been me cleaning up this bit of code or this html or deleting these files because they're not being used anymore.. And to me that says I'm getting closer to where I want this thing functionally. So that's a good sign.. I think?

I welcome any and all comments and discussions on the project I mean I honestly have no intentions of turning this into another CMS but if that happens that'd be cool.

Anywho I think I'll end this here, I should have the repository public by this weekend.

Update

I went ahead and made the repository public. It's not pretty but feel free to check it out! Website repository