DEV Community: Graham Morby

Add simple pagination in Nest.js Mongoose

Graham Morby — Sun, 23 Apr 2023 14:48:20 +0000

I have been learning to wonderful world of nest.js recently and I want to say it's actually very cool, in fact its fast becoming a favorite of mine to use when building backend.

A thing I struggled with this week was adding pagination into one of my functions that allowed me to switch through my documents. I tried many packages and none of them seemed to do it correct. So I went away and tried to find out the best way to do it and I needed it to be pretty simple.

Now before I begin I must say this is not a fully fledged Pagination and wont give you all the functions you would want in most cases. But what this will do is give a simple way to move between stacks of data and have a page count.

So we are using MongoDB and Nest.js and I am assuming you have this set up and you are ready to go.

So we have a entity set up and we have out Controllers and Services all sorted. So lets start with the controller.

    @Get('get')
    async getdata(@Query() {limit, skip}) {
        return this.testService.getTests(
            skip,
            limit)
    }

What we have above is a simple controller function that gives us a end point of '/get' and the returns the service passing in two params that are Skip and Limit. The skip and limit params are carried through the URL and the @Query picks those up.

/get?skip=8&limit=8

So lets head over to the service so we can see what we are doing here

async getTests(
      skip = 0,
      limit = 8,
      ) {
      const count = await this.testModel.countDocuments({}).exec();
      const page_total = Math.floor((count - 1)/ limit) + 1;
      const data =  await this.testModel.find().limit(limit).skip(skip).exec();
      return {
        data: data,
        page_total: page_total,
        status: 200,
      }
  }

Ok what we have here is the service taking the skip and limit and adding default values to them.

With the below line we count the documents and do some math to determine what the page count is.

const count = await this.testModel.countDocuments({}).exec();
      const page_total = Math.floor((count - 1)/ limit) + 1;

Then we grab the data from the Mongo Database and pass our skip and limit to the find(). After all that we simple return our page totals and data.

Its a really simple way to have pagination and allows us to move through data.

Thanks for reading and have a fine Sunday!

Week one of CTO madness

Graham Morby — Fri, 18 Nov 2022 08:05:01 +0000

Dear diary…

Well week one was shall we say erm… interesting.

Let’s start with the driving, 150 miles in a day to our American cousins is like popping to the local store for us English folks. But I tell you now it takes its toll when you are middle aged and have to deal with London circular traffic! Three hours to get 75 miles is never fun. I mean if it was a straight road, with no traffic it should take an hour at best. But alas I have spoken about the traffic problems for too long and you didn’t come here to read that.

It’s hard to describe how out of my depth I feel coming from being a full time developer to suddenly having to project plan , project team growth, understand all the deployment procedures and shake so many hands when you have a truly present germ phobia!

I mean there are silver linings, I have a wonderful new Alienware laptop and I have discovered the wonderful world of nest.js to which I will now take my full time back end study too. This back end technology I imagine can be so powerful. I have started to build a simple blog and added some JWT auth in this week and absolutely love it! I wonder if my new found love for JavaScript on the back end could be short lived, let me know in the comments your feelings on it.

The cons at the moment are the simple fact there is so much to do, I mean seriously we have over 10 major business applications all built in different languages, hosted on all different platforms, with some being so old they have gray nose hair. That’s the hard part! Trying to bring them all into a world where they can be managed and looked after in a way that keep tech debt down and costs for production down.

Budgets! They will haunt me…

My journey to CTO

Graham Morby — Thu, 10 Nov 2022 11:50:33 +0000

So some people have posted few comments on my last post on becoming a CTO, one of the main things to come out of that was 'context', how did I get here etc. So I thought it was a good idea to give you a quick brief timeline

Started development in my free time circa 1995
My parents told me this computer thing wouldn't make it so became a Print and Media operator in 1998
The computer thing did take off so self taught HTML and CSS 2008
Got my first junior job in 2010 working six months for free
Sometime around 2012 I started to learn PHP after finishing JavaScript
Made mid level developer by 2015
Senior developer by 2018 - at this point I was learning Vue and Laravel more
2022 I retrained in Python and Made CTO

That gives you some idea as to how I got where I am. The thing is I'm still not sure I'm ready for the roll and the other thing and this is a big one, am I ready to pretty much stop coding? This will be something we will touch on in the coming posts.

The response to the lats post was awesome and I hope in the coming posts you folks stick around and see what and how this works out.

I'm a CTO!

Graham Morby — Tue, 08 Nov 2022 09:15:25 +0000

Welcome to my journal, it's going to be a weekly blog about my journey into becoming a CTO.

So something crazy cool happened! I'm a CTO! It's insane.

I'm not even sure how it happened or why but it has. It's a very scary thought to think I have topped out in my career. I mean where do I even start, how to I switch my brain from developer to manager, where do I start with recruitment. How on earth do I manage a team?

The above thoughts have gone through my head in the last week and a half leading up to my first day. Even the drive to the office yesterday, my head was wracked full of various thoughts and ideas as to why this was a crazy bad idea! I mean I programme things, why on earth should I manage people!

I guess I'll be here to let you know how that goes over the coming weeks and months.

Persist Data With Vue 3

Graham Morby — Wed, 17 Aug 2022 14:01:06 +0000

Back in the old days, well not that old really but you get where I'm going here! Anyway, back in Vue 2 we had Vuex, well in Vue 3 we still have Vuex, but anyway I'm rambling.

So, imagine we had some data that was required to stay within a component when we refreshed or reloaded. That data needed to stay as the user needed to interact with it or amend it for some reason. Now back in Vue 2 we would use Vuex store and then a package that would persist the state to either LocalStorage or SessionStorage. What would happen would be that Vuex would hold the store and then on refresh persist data to storage, when the page reloads it would grab the storage data and return it to the store.

So that's how we did it in Vue 2 which is now upgraded to Vue 3. Vue 3 doesn't work with Vue persist at the time of writing this and we must work out a new way of making sure data is always available to us. How do we do that? Well, we do that by cutting out the middleman that is Vuex and just going directly to the local storage on the browser.

Lets take the below code as an example:



// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

As we can see we have a simple function that takes two parameters. the first is key and that's the name of our storage item, something like 'user' or 'token' and then we take some data. Now the local storage or session storage only handles strings so before we ship the data over to it, we must turn it into a string which is what JSON.stringify is doing for us.

Perfect right? So how do we get storage data, well again with a function like so:



// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

So we are working with 2 scenarios here:

We want a part of some data. So we could have a list of 20 users and we want user 19. So the key would be 'users' and the item would be '19'. We then parse the data on the return so we can use the object.
We want all the data back and simply supply a key to the function. Something like 'token' or 'user'

And lastly we need a way to clear data that we would no longer need or that we will destroy when the site is navigated away from:



// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}

Again we have two scenarios here:

We want to supply a key and just remove a certain piece of data.
We want to clear the whole storage and start a fresh.

And that is really that, it works super well and makes handling data in a Vue SPA really easy and all components have access to a single source of data truth!

The whole file should be as follows and check the video out down below for some real world examples of how it works.



// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}
// Exports all avaliable functions on the script
export {getStorage, saveStorage, clearStorage}

Thanks for stopping by and happy coding!

The job title debate

Graham Morby — Tue, 21 Jun 2022 09:06:54 +0000

What is the real difference between Senior, Mid level and Junior developer? Do the three tags really mean anything? Is it just a pay grade or a self indulged title we all strive towards?

The above questions are some questions I have been asking myself lately. I mean so we really need to label what we are and simply go for pay structure base don time served and we are all simply developers?

So the reason I say this is because as developers we all bring something to the party, be it a new skill or an old way of thinking. This whole idea has come off working with a really smart and skilled 'junior' developer on the latest project I have been working on. So I have somewhere around 15 years, which means I think a little different to a developer who grew up in the framework era (Yes I'm coining that phrase).

I have a good idea of UI design and the best way to plan and output a build but that does not mean I know the best way to code in the modern world nor does it mean I have all the answers. I have to rely heavily on my team and those around me to help output the vision I have put in place. Also that also means I am asking questions of my front end team of the best way to do a certain piece of code or a tricky piece of UI. Does this mean my contribution is anymore than his? Not at all, and what is the only difference between me and him?

The difference is this, I have more time in the working commercial world and that in my eyes is it. As a developer I have come to the conclusion 95% of what we do is work out how to do something and 5% actually coding it and that is the only reason I should be paid more than him, his code is better than mine at times and my thinking is better than his at times.

I can handle customers and I can handle pressure situations, I understand workflow and I understand how to create a good UI from the many I have built. He on the other hand understand current techniques, current language syntax and the frameworks.

So who is the senior and who is the junior? As we both bring things to the table and we both can join the party. My experiences give me a slight advantage and my time is worth more as I have 15 years extra but am I more senior than him no not at all.

So we need to drop tags, we need to remove titles and just all be developers and be paid on experience.

Lets Build - A who is service with flask

Graham Morby — Mon, 23 May 2022 20:00:51 +0000

So let's crack out a really nice, simple, and fast Flask website that's super useful to use. In this tutorial, we are going to build a Whois service and get some information back on a domain.

Whois service allows you to find all the information about domain name registration, for example, the registration date and age of the domain name, or find contact details of the person or organization owning the domain name of your interest.

So let's get started! Ok, so I'm going to assume that you have Python installed and that you know how to create a virtual environment. So go ahead and do that now and get your terminal open. First things first let's get some packages installed, create a file called app.py and follow them along.

pip3 install python-whois flask

That's all the packages we are going to need, so let's create a flask app and create two endpoints and return some templates with our HTML.

from flask import Flask, render_template, jsonify, request
import whois
import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/search', methods=['POST'])
def search():
    url = request.form['url']
    w = whois.whois(url)
    w.expiration_date  # dates converted to datetime object
    datetime.datetime(2013, 6, 26, 0, 0)
    w.text
    return render_template('search.html', url=url, record=w)

if __name__ == '__main__':
    app.run(debug=True, port=8000, host='127.0.0.1')

So let's breakdown what's going on.

We import all our packages here

from flask import Flask, render_template, jsonify, request
import whois
import datetime

Then we create a flask instance

app = Flask(__name__)

Here we create a homepage route and return a template Index.html

@app.route('/')
def index():
    return render_template('index.html')

Ok, this is the important one, this is the one where we get our data back from the whois package. So first we need to make sure that we can accept a form input, so we add a methods array to our app route. We then define our function and the first thing we do within there is create a variable and give it our form input.

We then call the whois package and pass our new variable to it. We then also pass a date to it and use the DateTime package to do so and on the next bit we get the response back so we can use that to display the URL information.

And lastly, we return a template and pass to that template the URL and URL record.

@app.route('/search', methods=['POST'])
def search():
    url = request.form['url']
    w = whois.whois(url)
    w.expiration_date  # dates converted to datetime object
    datetime.datetime(2013, 6, 26, 0, 0)
    w.text
    return render_template('search.html', url=url, record=w)

Finally we have our dunder method and build the flask app

if __name__ == '__main__':
    app.run(debug=True, port=8000, host='127.0.0.1')

That's all the Python we need to worry about - The next bit is the front end, so in the following files, we use bootstrap 4 so if you go and download it, create a file called static and place it all in there.

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Ok so now we are going to create another folder called templates and in that folder, we will have two HTML files called index and search

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Who is Flask</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Poppins:wght@500&family=Roboto:ital,wght@0,300;0,400;1,100;1,400&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/site.css">
</head>

<body>
    <div class="container">
        <div class="row h-100">
            <div class="col-sm-12 my-auto text-center">
                <h1>Who is - Flask</h1>
                <div class="row">
                    <div class="col-3"></div>
                    <div class="col-6">
                        <form action="/search" method="POST">
                            <div class="form-group">
                                <label for="url">Web url</label>
                                <input type="text" class="form-control" id="url"
                                    name="url">
                                <small id="emailHelp" class="form-text text-muted">Web address should be as follows: webscraping.com</small>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>

                 </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

search.html

<!DOCTYPE html>
<html>

<head>
    <title>Who is Flask</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Poppins:wght@500&family=Roboto:ital,wght@0,300;0,400;1,100;1,400&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/site.css">
</head>

<body>
    <div class="container">
        <div class="row h-100">
            <div class="col-sm-12 my-auto text-center">
                <h2 class="mb-2">{{ url }}</h2>
                <br>
                <div class="row">
                    <div class="col-3"></div>
                    <div class="col-6">
                        <ul class="list-group">
                            <li class="list-group-item">Registrar: {{record.registrar}}</li>
                            <li class="list-group-item">Whois Server: {{record.whois_server}}</li>
                            <li class="list-group-item">Name Server 1: {{record.name_servers[0]}}</li>
                            <li class="list-group-item">Name Server 2: {{record.name_servers[1]}}</li>
                            <li class="list-group-item">Email: {{record.emails[0]}}</li>
                            <li class="list-group-item">Name: {{record.name}}</li>
                            <li class="list-group-item">Address: {{record.address}}</li>
                            <li class="list-group-item">City: {{record.city}}</li>
                          </ul>  
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Ok, that's all of our HTML and on the search.html page, you will see code within mustache tags. These are jinga tags that allow us to layout the data we sent through in the search function in app.py.

So now we have all that sorted we can head to our terminal and use the cool which is service! Let's type the following

python app.py

And Hazzah! There you have it! A working whois service that allows you to add any domain and get some information back.

If you want to clone the code you can grab it on my GitHub

https://github.com/GrahamMorbyDev/whois-flask

Lets install JWT tokens in Flask

Graham Morby — Fri, 20 May 2022 04:49:52 +0000

JWT Auth in Flask Python

Graham Morby — Sat, 14 May 2022 17:00:03 +0000

Ever wondered how you use auth in Flask and secure some endpoints? Well, it's not that crazy, and it's pretty easy to implement.

So let's first start by creating a new folder - /JWTExample

Pop open a terminal and cd into that folder from your location and run the following command to set up a virtual environment.



python -m venv env

Ok before we carry on if you have python three installed you will need to use 'python3' and 'pip3' in your commands, if not its just 'python' and 'pip'.

Now we have our virtual environment squared away we need to grab some packages from pip to allow for what we need to do. Now this will be a very simple set up and you can go a lot deeper into flask auth.

Lets make sure we are in our virtual environment by running the following:



source env/bin/activate

So lets install:



pip3 install flask flask_jwt_extended flask_sqlalchemy

Ok so we have what we need to get started! PERFECT!

Lets first create a basic Flask app and make sure thats working all ok. So create a file called app.py and lets add the following code.



from flask import Flask, jsonify, request

app = Flask(__name__)

# Planet Routes
@app.route('/', methods=['GET'])
def index():
    return jsonify(message='Welcome to flask!')


if __name__ == '__main__':
    app.run()

If we then use flask run we should be greeted with our wonderful message of 'Welcome to Flask'.

So we have done the first step, lets push onto the next. So the next step is allowing a user to create an account. Now for this tutorial we are going to use SQLite as a database but you can of course use any one of your favorites.

Ok so this next bit is a bit long but hang in there and it won't take long.

So first we need a package called marshmallow



pip3 install flask-marshmallow

Let make sure that is being used



from flask_marshmallow import Marshmallow
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import Column, Integer, String, Float

db = SQLAlchemy(app)
ma = Marshmallow(app)

Next, we need to add some flask CLI commands - these we can use to help users create the database and seed it with some data.



# DB set up and seeders
@app.cli.command('db_create')
def db_create():
    db.create_all()
    print('Database created')


@app.cli.command('db_drop')
def db_drop():
    db.drop_all()
    print('Database dropped')


@app.cli.command('db_seed')
def db_seed():
    test_user = User(first_name='Stephen',
                        last_name='Hawking',
                        email='admin@admin.com',
                        password='admin')
    db.session.add(test_user)
    db.session.commit()
    print('Database seeded')

Then we create a User database model, this tells SQL alchemy how to layout our Users table and what type of columns should be.



# Database models
class User(db.Model):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    first_name = Column(String)
    last_name = Column(String)
    email = Column(String, unique=True)
    password = Column(String)

# DB Schemas
class UserSchema(ma.Schema):
    class Meta:
        fields = ('id', 'first_name', 'last_name', 'email', 'password')

and finally lets add the database connection strings



import os
basedir = os.path.abspath(os.path.dirname(__file__))
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'jwt.db')

Ok, so what is flask marshmallow? I guess the best way to describe it is it allows us to output our data in views in a neat way.

Wow, that was a lot of code! Well done you! If you pop down into the terminal and write flask db_create you should see a message 'database created'!

Then we test the database with flask db_seed that will place our test data in the database and we are ready to look at the register endpoint.

So we need to create a registered route and save any new user to the database.



@app.route('/register', methods=['POST'])
def register():
    email = request.form['email']
    test = User.query.filter_by(email=email).first()
    if test:
        return jsonify(message='That email already exists'), 409
    else:
        first_name = request.form['first_name']
        last_name = request.form['last_name']
        password = request.form['password']
        user = User(first_name=first_name, last_name=last_name, email=email, password=password)
        db.session.add(user)
        db.session.commit()
        return jsonify(message='User created successfully'), 201

Ok so a lot is going here, firstly we take some form data and check if that email already exists, then if it does we return a JSON object with a message stating an error. If we don't have that email we build a User object from all the form data sent in and then save it to the database. Then we return a JSON object with a 201 status and a message.

And now finally we are ready to install flask JWT! So let's grab the package and go for it



pip3 install flask-jwt-extended

So we have our JWT package and now we need to use it. This is a three ponged attack:

Import the package
Set up a super secret key
Create an instance

So import as follows:



from flask_jwt_extended import JWTManager, jwt_required, create_access_token

Set up a super secret key (Don't tell anyone!):



app.config['JWT_SECRET_KEY'] = 'super-secret'  # Change on production

Create an instance:



jwt = JWTManager(app)

So we are fully set up to use out JWT package, so now we build the login route.



@app.route('/login', methods=['POST'])
def login():
    if request.is_json:
        email = request.json['email']
        password = request.json['password']
    else:
        email = request.form['email']
        password = request.form['password']

    test = User.query.filter_by(email=email, password=password).first()
    if test:
        access_token = create_access_token(identity=email)
        return jsonify(message='Login Successful', access_token=access_token)
    else:
        return jsonify('Bad email or Password'), 401

So again loads going on here! So lets start walking through the code. In this code we are accepting JSON or Form Data, we take our email and password and we assign it to variables. We then test to make sure they match and if they do we create a JWT token! and we return a message and the token itself! Woop!! We made it.

So how do we test it I hear you say! Well if we add @jwt-required to our index method it will require us to have a JWT token to access it



@app.route('/', methods=['GET'])
@jwt_required
def index():
    return jsonify(message='Welcome to flask!')

So lets do some testing

First let's load postman and try and access the home route, we should get an error message as follows:

Ok so that works! Let's login and get a JWT token returned, now remember we have already seeded our database and can use that user to login with:

And now we need to add our Bearer token to our auth section and if we hit go on our post method we will get our welcome message! And we have fully installed Flask JWT Auth!

Here is the full code in full:



from flask import Flask, jsonify, request
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import Column, Integer, String, Float
import os
from flask_marshmallow import Marshmallow
from flask_jwt_extended import JWTManager, jwt_required, create_access_token

app = Flask(__name__)
basedir = os.path.abspath(os.path.dirname(__file__))
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'jwt.db')
app.config['JWT_SECRET_KEY'] = 'super-secret'  # Change on production



db = SQLAlchemy(app)
ma = Marshmallow(app)
jwt = JWTManager(app)


# DB set up and seeders
@app.cli.command('db_create')
def db_create():
    db.create_all()
    print('Database created')


@app.cli.command('db_drop')
def db_drop():
    db.drop_all()
    print('Database dropped')


@app.cli.command('db_seed')
def db_seed():
    test_user = User(first_name='Stephen',
                     last_name='Hawking',
                     email='admin@admin.com',
                     password='admin')
    db.session.add(test_user)
    db.session.commit()
    print('Database seeded')


# Planet Routes
@app.route('/', methods=['GET'])
@jwt_required()
def index():
    return jsonify(message="Hello Flask!")



# User routes
@app.route('/register', methods=['POST'])
def register():
    email = request.form['email']
    test = User.query.filter_by(email=email).first()
    if test:
        return jsonify(message='That email already exists'), 409
    else:
        first_name = request.form['first_name']
        last_name = request.form['last_name']
        password = request.form['password']
        user = User(first_name=first_name, last_name=last_name, email=email, password=password)
        db.session.add(user)
        db.session.commit()
        return jsonify(message='User created successfully'), 201


@app.route('/login', methods=['POST'])
def login():
    if request.is_json:
        email = request.json['email']
        password = request.json['password']
    else:
        email = request.form['email']
        password = request.form['password']

    test = User.query.filter_by(email=email, password=password).first()
    if test:
        access_token = create_access_token(identity=email)
        return jsonify(message='Login Successful', access_token=access_token)
    else:
        return jsonify('Bad email or Password'), 401


# Database models
class User(db.Model):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    first_name = Column(String)
    last_name = Column(String)
    email = Column(String, unique=True)
    password = Column(String)


# DB Schemas
class UserSchema(ma.Schema):
    class Meta:
        fields = ('id', 'first_name', 'last_name', 'email', 'password')



# Marsh mellow db adds
user_schema = UserSchema()
users_schema = UserSchema(many=True)


if __name__ == '__main__':
    app.run()

If you need to you can clone the code here https://github.com/GrahamMorbyDev/jwt-flask

That was alot to take in but now you can make some super secure API's and make some awesome code! Well done you!

When is the right time to go it alone...

Graham Morby — Tue, 10 May 2022 14:39:13 +0000

I've done it, I've handed my notice in and I'm going it alone. It's a scary thought, making sure the work is there and that I have enough work to keep a roof over my family's head. But when is the right time to make a go of it? Is it when you have had 20 roles? 40 even? or do you for it from code school, whatever code school was to you.

So the one thing I have learned in over 20 years of development is a change will do you good. Now don't get me wrong staying somewhere and learning codebases is great but in the long run, you get left behind, that may be different in some places but most places say a finance company or a blue-chip just want working code, they don't mind when it was built as long as it works.

Our job is hard enough without trying to move with the times. Coding changes monthly, and daily in some places where learning new skills, and keeping up with current tech is hard. The only way you can do that is to experience different projects, different code bases, and most importantly to work with different developers. It's taken me so much time to work that out and I made the choice now to work contracts, take on clients and do different jobs with different tech and hopefully create a nice little home for my work.

And I will blog the progress, I'll try and be open about the process and hopefully, it will be a happy and jolly experience. But I also want to do a podcast and have some cool developers on there, some new to the industry and like me some old heads to tell tales of the tape! So watch out for that!!!

So I'll bid you a great day and thanks for reading this article, and today I raise a coffee to the dawn of my 'Enceladus Digital Limited'

Python in the Browser? Ok let's do it!

Graham Morby — Wed, 04 May 2022 08:28:48 +0000

So let's do some history here, so you can see that whilst this idea seems crazy it also fills me with some delight and charm. So I have been a front end developer for some wow -- 15 years, I have seen all the trends and ridden the wave of all sorts! I mean do you remember GSS? Yep JavaScript polyfills for CSS, I mean who wouldn't want a grid in good ol` JS! That was 2014 but now it's 2022 and we have Python in the Browser! and my fellow developers I love Python! Its a match made in heaven!

Here is some context on GSS https://www.sitepoint.com/introducing-gss-grid-style-sheets/

So how about we give this a go with a simple hello world shall we.

First off lets create a folder call pyscript and within that folder create a index.html.

Ok lets have a basic HTML layout



<!DOCTYPE html

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

That's perfect! Just not formatted! and there is a reason for that which I will get to.

Ok so with our template lets add a head section and pop a couple of CDN links

<pre><code> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> </pre></code>

And now we have a simple tag we can use which is , which allows us to write some python and basically run it!

So let's remove the heading and paragraph tag and replace it with the following:



<py-script>

def helloworld():

    welcome = False

    if welcome: 

        print('Hello World')

    else:

        print('Not today please')

helloworld()

</py-script>

So this is the reason we do not format the code and that is purely down the fact it seems if you try and format it the page will fail to load through indentation errors.

So our final file should look like so:



<!Doctype html>



<head>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

    <script defer src="https://pyscript.net/alpha/pyscript.js">&lt;/script>

</head>

<body>

<py-script>

def helloworld():

    welcome = False

    if welcome: 

        print('Hello World')

    else:

        print('Not today please')

helloworld()

</py-script>

</body>

</html>

And if you run it in the browser you will be greeted with our else message and python is running. Now it does take some time to render and would work well in a dashboard setting but I wouldn't like to use it in a website environment as it would take a while to load the page to the user.

Also if we look at the console we have a full output as to what's going on and if you do get errors you get a full break down of what's going on there.

So anyway yeah its fun, its delightful but where would I use it? I'm not sure I would...

Edit, please excuse the code examples and the rendering of the HTML code blocks, trying to escape HTML in markdown is a real pain.

Loading styles and static files in Django

Graham Morby — Mon, 02 May 2022 09:51:59 +0000

I like you am a newbie when it comes to Django. Yes I am slightly in love with the Framework and slightly excited about what it can do and how powerful it can be moving forward. But the project I'm working on I needed to be able to load a custom stylesheet in and overwrite some bootstrap bits, now there are plenty of little tutorials out there but they all seem to be for older versions of the framework. So I thought I'd quickly lay out how its being done in the current version:

Create a static folder in the main folder of your project. The one where the manage.py folder is. Inside there add a CSS folder and your style.css stylesheet. Should look like this

manage.py
myapp
static
- css
- *style.css
templates

So now head over to your base.html and add this to the top of the page

{% load static %}

And then in the

portion add a link to our css

<link rel="stylesheet" href="{% static 'css/styles.css' %}">

And finally in our settings.py file add

# Static file route
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

And thats it! We should be all cooking on gas and have the styles loading in, also if you want JS or any other static file to load you can add it all to the static folder, super clean and super easy!