DEV Community: Promatia

Svelte loading state indicator (promises)

AlbertMarashi — Sun, 17 May 2020 06:07:57 +0000

Web apps often require loading state (things like loading spinners) to let a user know that an operation is taking place. These operations often take time, so it's best to let the user know something is loading, which helps improve UX and prevents form resubmissions and etc.

We are using this in Promatia and PromaTimes svelte rebuilds.

Add Loading State Indicators to Svelte

REPL: https://svelte.dev/repl/4fefb61253aa4c26b26485e0b2b8c06c?version=3

Imagine you have some UI where a button triggers an async function, and you'd like to display a loading indicator

<script>

async function login(){
  await new Promise(resolve => setTimeout(resolve, 2000) //wait for 2 seconds
}
</script>
<form>
  <button on:click="login">Do thing</button>
</form>

Create an overlay loading indicator

Displays a translucent scrim, with a text loading indicator that goes from . to ...

<div class="LoadingIndicator">
    {text}
</div>
<script>
import { onMount } from 'svelte'
let text = ''

async function loop(){
    if(text.length === 3) text = ''
    text += '.'
    await new Promise(resolve => setTimeout(resolve, 300))
    loop()
}

onMount(()=>{
    loop()
})

</script>
<style>

.LoadingIndicator {
    display: flex;
    background: rgba(0,0,0,0.2);
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute; // overlays on top of parent element, parent must have display: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    font-size: 60px;
}
</style>

Create promiser.js

export default async (promise, subscriber)=>{
    subscriber(true)
    try {
        await promise
    } catch (err) {}
    subscriber(false)
}

Update your form

<script>
import promiser from './promiser.js'
import LoadingIndicator from './LoadingIndicator.svelte'
let loading = false

async function login(){
    return await new Promise(resolve => setTimeout(resolve, 3000))
}

</script>
<div class="form">
    <button on:click={()=>promiser(login(), status => loading = status)}>
        Click me
    </button>
    {#if loading}
    <LoadingIndicator/>
    {/if}
</div>
<style>

    .form {
        position: relative;
        padding: 20px;
    }

</style>

View the REPL: https://svelte.dev/repl/4fefb61253aa4c26b26485e0b2b8c06c?version=3.22.2

Building a VueJS based CMS for PromaTimes (News website)

AlbertMarashi — Wed, 12 Feb 2020 08:53:47 +0000

Some designs we're working on for a CMS for PromaTimes

Some designs of the CMS We're building

We will be using Prosemirror for our text editor, the same technology used by new york times and Atlassian for confluence.

The database will be MongoDB based, images and files will be stored in GridFS

Development of the CMS has now begun, more information about PromaTimes and our news organisation will be published soon.

We are starting a new country called Promatia, Ask Me Anything!

AlbertMarashi — Fri, 10 Jan 2020 06:15:01 +0000

We're starting a new country focused on digital governance, technological innovation, and a "Digital by default" policy.

Our government will digitize

banking
citizenship
licensing
business & organisations
voting
+ much more

You can check out our website here and become a citizen here

Citizens will be able to register businesses, and organisations online which will improve our ease of doing business index which is directly correlated to high living standards, improved economy, more jobs and freedom

A citizens 'myPro' account links their identity to government services. This means faster service, minimized bureaucracy, less forms to fill out and more efficient government

Our government was formed out a unification of a number of young nation projects such as Arkovia

Adding VueJS Loading State Indicators (Promises)

AlbertMarashi — Thu, 19 Dec 2019 01:57:45 +0000

Add Loading State Indicators to VueJS

Read full post here

While trying to figure out a good way to manage loading state for Promatia's sign up form and other asynchronous pages & components. I stumbled upon a neat way of managing asynchronous loading state.

Web apps often require loading state (things like loading spinners) to let a user know that an operation is taking place. These operations often take time, so it's best to let the user know something is loading, which helps improve UX and prevents form resubmissions and etc.

I created a neat module that can help with managing asynchronous loading state (promises) in a VueJS app

import { ref, computed } from '@vue/composition-api' // using vue 3 syntax

export default function () {
    let loading = ref(false) //initial value of false

    return computed({
        get () {
            return loading.value // return the loading value
        },
        async set (value) {
            loading.value = true //update loading ref value to be true
            await value //wait for promise completion
            loading.value = false //update loading ref back to false
        }
    })
}

The way it's used:

<button @click="promise = asyncFunction()">Click<button/>
<overlayLoader v-if="promise"/>

import promiser from '@/utils/promiser' //the helper we've just created 

export default {
    setup(){
        return {
            promise: promiser() //create and expose an instance of the computed variable
        }
    }
}

<overlayLoader/> is a component which displays a sync loader animation on top of a form, which captures clicks and prevents further actions

When <button> is clicked, it triggers the set() function inside the computed variable, which updates the loading state.

After clicking

Letsencrypt https generator for Koa Apps

AlbertMarashi — Wed, 13 Nov 2019 08:00:20 +0000

While researching options for automatic https certificate generation, I couldn't find any good options that satisfied my needs for my website.

I opted to use a library called acme-client on npm which exposes a letsencrypt acme API that is super simple to use (async/await)

const acme = require('acme-client')
const fs = require('fs')
const path = require('path')
const os = require('os')
const forge = require('node-forge')

const directoryUrl = acme.directory.letsencrypt[ENV.ssl.mode] // mode: 'staging' || 'production'
const sslDataPath = path.resolve(os.homedir(), './ssl/') //SSL path where certificates will be stored

// function to write the SSL data that is persisted across server restart (prevents letsencrypt rate-limiting)
function writeSSLObject(obj){
    fs.mkdirSync(sslDataPath, { recursive: true })
    fs.writeFileSync(`${sslDataPath}/${ENV.ssl.mode}.json`, JSON.stringify(obj), 'utf8')
}

/**
 * read sslObject data 
 * { 
 *   accountKey: 'Private Key for Letsencrypt API Communication',
 *   accountUrl: 'Letsencrypt API Account URL', 
 *   key: 'RSA Private Key',
 *   cert: 'Full chain certificate',
 * }
**/
function readSSLObject(){
    try {
        return JSON.parse(fs.readFileSync(`${sslDataPath}/${ENV.ssl.mode}.json`), 'utf8')
    } catch (error) {
        return {}
    }
}

async function getClient(){
    let opts = {
        directoryUrl
    }

    const sslObject = readSSLObject()

    if(sslObject.accountKey) opts.accountKey = sslObject.accountKey
    if(sslObject.accountUrl) opts.accountUrl = sslObject.accountUrl

    if(!opts.accountKey) opts.accountKey = String((await acme.forge.createPrivateKey()))

    const client = new acme.Client(opts)

    try {
        client.getAccountUrl() //check if account exists
    } catch (error) {
        await client.createAccount({
            email: ENV.ssl.email,
            termsOfServiceAgreed: true
        })

        writeSSLObject({...sslObject, accountUrl: client.getAccountUrl(), accountKey: opts.accountKey})
    }

    return { 
        client,
        cert: sslObject.cert,
        key: sslObject.key
    }
}

function getExpiry(cert){
    if(cert) return forge.pki.certificateFromPem(cert).validity.notAfter
}

module.exports = async function ssl(httpServer, http2server){
    let challengeFilePaths = {}
    let renewingCertPromise = null

    let { client, cert, key } = await getClient()
    let expires = getExpiry(cert)

    async function newCert(){
        const [privateKey, csr] = await acme.forge.createCsr({
            commonName: ENV.ssl.domains[0],
            altNames: ENV.ssl.domains
        })

        key = String(privateKey)
        cert = await client.auto({
            csr,
            challengePriority: ['http-01'],
            async challengeCreateFn(authz, challenge, challengeContents) {
                if (challenge.type === 'http-01') { //save the path in memory, with challenge contents which will be used by middleware
                    challengeFilePaths[`/.well-known/acme-challenge/${challenge.token}`] = challengeContents
                }
            },
            async challengeRemoveFn(auths, challenge){
                delete challengeFilePaths[`/.well-known/acme-challenge/${challenge.token}`]
            }
        })

        writeSSLObject({...readSSLObject(), key, cert})
        expires = getExpiry(cert)

        http2server.setSecureContext({
            key,
            cert
        })
    }

    function shouldRenewCert(){
        //if there is no renewal date, generate a new cert
        if(!expires) return true

        //check last renewal, and if more than 2 months, renew certificate
        //letsnecrypt certificates expire every 3 months
        let renewAfter = new Date(expires).setMonth(expires.getMonth() - 1)
        let now = new Date()

        return now > renewAfter
    }

    httpServer.on('listening', async () => { //wait for httpserver to be listening (done elsewhere in app)
        try {
            if(shouldRenewCert()) renewingCertPromise = newCert()

            if(renewingCertPromise){
                await renewingCertPromise
            }else{
                http2server.setSecureContext({
                    key,
                    cert
                })
            }

            http2server.listen(443)
        } catch (error) {
            console.error(error)
        }
    })

    /**
     * Return letsencrypt challenge middleware
     */
    return async function middleware(ctx, next){
        if(challengeFilePaths[ctx.url]){ //serve challenge contents if it matches URL
            return ctx.body = challengeFilePaths[ctx.url]
        }

        if(shouldRenewCert() && !renewingCertPromise){
            renewingCertPromise = newCert()
            await renewingCertPromise
            renewingCertPromise = null
        }

        if(renewingCertPromise) await renewingCertPromise

        await next()
    }
}

This code is used in production on Promatia

Promatia

AlbertMarashi — Thu, 31 Oct 2019 05:03:25 +0000

Promatia is a digital government located in Australia.
Proma Times

This is a test post.