Forem: AlbertMarashi

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

Should you use sticky headers?

AlbertMarashi — Wed, 18 Mar 2020 00:35:20 +0000

When building websites, you should always use sticky headers when possible. Sticky headers stay at the top of the screen and allow users to easily access navigation and contact buttons.

Sticky Headers improve CTR & SEO

In my experience of building websites, and doing SEO Optimisations for Insane Marketing, adding sticky headers to client websites has always increased CTR (click-through-rate) by about 1% which can amount to a higher number of conversions

Some tips:

Ensure the header is not large (and doesn't take up a lot of space on mobile screens)
If the header is large, make it compacted when the user scrolls down, but don't remove functionality
Add a shadow to the header (especially if your header is white, on white background)

Pros

Time-saving
Good navigation
Better branding

Cons

Takes up space
Can be distracting

Examples

Patrick Clare - Renovations Adelaide

Patrick Clare Renovations Adelaide had massive improvements in traffic and user engagement which improved SEO after implementing a sticky header

Improved CTR by 2%
Improved Branding Awareness

Promatia

Promatia saw massive user engagement increases and citizen signups on their government website, this helped them sign up more citizens and increased branding of the organization.

View Promatia's Sticky Header

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.

Building a digital citizen portal using Vue.JS, MongoDB and Node

AlbertMarashi — Tue, 29 Oct 2019 05:56:54 +0000

Technology has enabled an extremely convenient way of life, governments, however, have often remained behind in the digital space, lacking any innovation.

You're in the lucky few if your government is even using a legacy digital system, where most governments will have virtually no digitized core government services.

I decided to build a new government on the grounds that a government must be technologically innovative.

I set out to build a digital government called Promatia

The government's central digital foundation would be myPro, which is Promatia's online accounts system, where anyone, not limited to citizens would be able to signup. This account would serve as the central hub for the digital government.

Citizens would be able to use this account to register businesses, apply for citizenship, and do other various citizen tasks.

The government portal would serve as a central location for all government services.

All government services would use a single account, that would be used across all government services using SSO (Single sign-on)

Citizens would be able to apply for citizenship

The front-end is using Vue, and Node.js in the backend. Creating this site has prompted me to create an entire CMS using:

Vue (for frontend)
MongoDB (for database)
GraphQL (for API)
Node (for server)
Koa (for routing)

We'll be posting regular news updates about Promatia's website on our government-run news website Proma Times

Currently, the website is not online, and will be offline until further development

Promatia's Digital Government

AlbertMarashi — Sat, 07 Sep 2019 08:38:38 +0000

Promatia is building a digital government/micronation as a political experiment.

We will be using NodeJS for the server backend, VueJS for front-end.

We have also used https://futureaus.github.io/servue/ for server-side rendering.

Full Stack

VueJS
MongoDB
NodeJS
Webpack
GraphQL
Moongraph (custom ORM for MongoDB)

Here are some mockups of what our government portal will look like:

and pics of the main site design below:

We will be live-streaming videos at Promatia's Twitch Channel Or https://www.twitch.tv/promatiagov

Fuck you, Internet Explorer 💖

AlbertMarashi — Sun, 23 Jun 2019 11:53:19 +0000

Fuck you Internet Explorer for not supporting new CSS Features

Fuck you Internet Explorer for not supporting new HTML Features

Fuck you Internet Explorer for not supporting new JS features

Fuck you Internet Explorer for not being an evergreen browser

Fuck you Internet Explorer for not working with modern frameworks

Fuck you Internet Explorer for stopping progress

Fuck you Internet Explorer for being a huge headfuck for every web developer around the world.

But finally, Thankyou Internet Explorer for being ahead of it's time, for being responsible for the internet, for being for our jobs, and allowing humanity to progress with technology, even if it made things really annoying sometimes.

You are the reason this website exists, IE

but, it's time to forgive and forget.

I urge all web developers to follow suit and speak with their organisations, clients, and developers to tell them that IE is now a relic of the past

Despite the few business-benefits that may exist of supporting IE, it has come time for even big corporates to abandon IE, and move towards evergreen browsers such as Chrome, Edge, and Firefox

By every developer doing their part, we ensure IE does in fact become a relic of the past.

DEV.to developers reading this,

This is how you can help

Urge Website Visitors that don't already, to use an Evergreen browser.

What is an evergreen browser?

~~If developers are interested, I can provide and develop some IE-friendly code for developers that will tell users it's deprecated and how to easily change browsers.~~

This has already been done by browser-update.org

You are responsible for the innovation of the internet, and reducing IE usage across the globe.

I classify web developers into:

A+: Doesn't even accept that IE exists, and codes to evergreen standards
A: Accepts that IE exists, and that it may cause risks to abandon it, but are willing to take it
A-: Willing to let their companies know that they're behind the curve by supporting IE
B: Letting clients know they're on an outdated browser
C: Trying to code for IE standards

https://promatia.com https://arkovia.com https://promatimes.com

Why I am building a digital government

AlbertMarashi — Tue, 18 Jun 2019 10:23:23 +0000

Governments often lack innovation in the digital space, and technology has enabled an extremely convenient way of life, compared to traditional living.

You're lucky if your government is using a legacy digital system, where most won't even be using websites for many government functions.

I decided to build Arkovia on the grounds that a government must be technologically innovative.

I set out to build a digital government on Arkovia.com

The government's central digital foundation would be myArk, which is Arkovia's online accounts system, where anyone, not limited to citizens would be able to signup. This account would serve as the central hub for the digital government.

Citizens would be able to use this account to register businesses, apply for citizenship, and do other various citizen tasks.

The front-end is using Vue, and Node.js in the backend. Creating this site has prompted me to create an entire CMS using:

Vue (for frontend)
MongoDB (for database)
GraphQL (for API)
Node (for server)
Koa (for routing)

I will be posting regular updates on the progress on the backend

Edit
The new government website is now https://promatia.com

We will be publishing news updates on https://promatimes.com