Forem: Navicstein Rotciv

What is defensive programming?

Navicstein Rotciv — Sun, 11 Sep 2022 03:03:51 +0000

What is defensive programming?

Defensive programming is a form of defensive design intended to develop programs that are capable of detect potential security abnormalities and make predetermined response - Wikipedia

in other words, defensive programming is writing code to handle cases that you do not think will, or even can happen, because you have a belief that your own beliefs are unreliable or assuming the worst case: that your users are complete crazy people and you must defend yourself and your program from their crazy inputs

for example, lets take a function that add two numbers and yields an output

func add(a, b int) (int, error) {
    if a == 0 || b == 0 {
        // gracefully return and error
        return 0, errors.New("can't add zero values")
    }

    // finally compute the function
    return a + b, nil
}

func main() {
    result, err := add(10, 30)
    if err != nil {
        log.Fatalln(err)
    }
    log.Println(result)
}

Here, errors are checked before the resulting operation is done

You can fight logical errors with unit tests that cover all code paths using code coverage tools for example, you can write a test to guard against zero values

package main

import "testing"

func TestAdd(t *testing.T) {
    output, err := add(0, 1)

    if err != nil {
        t.Fatalf(`TestAdd = %d, error -> %s`, output, err)
    }
}

Which fails

Running tool: /opt/go/bin/go test -timeout 30s -run ^TestAdd$ github.com/navicstein/def

--- FAIL: TestAdd (0.00s)
    /home/navicstein/Idea/def/main_test.go:9: TestAdd = 0, error -> can't add zero values
FAIL
FAIL    github.com/navicstein/def   0.002s
FAIL

In a static language like C or Go, the compiler would perform some of the sanity checks for us, for example not allowing to pass string where a number is expected.

There are three sources of errors to guard against

Logical errors in the code itself.
Errors in the input data, especially user supplied input.
Errors in the environment

let's look at another real world example, in this example we're going to assume we'll actually convert any video to an .mp4 video file

package main

import (
    "errors"
    "log"
    "path/filepath"
    "strings"
    "time"

    "golang.org/x/exp/slices"
)

type VideoParams struct {
    Url          string
    AudioBitrate string
    VideoBitrate string
    VideoCodec   string
    AudioCodec   string
}

// ConvertAnyVideoToMp4 converts any video to mp4
func ConvertAnyVideoToMp4(args VideoParams) error {
    if args.Url == "" {
        return errors.New("an input URL is required, please provide one")
    }

    var (
        fileExt = filepath.Ext(args.Url)
        exts    = []string{".flv", ".avi"}
    )

    // don't convert video is already an mp4 file
    if strings.ToLower(fileExt) == ".mp4" {
        return errors.New("video is alread an mp4 file, nothing to do")
    }

    // validate against supported files
    if !slices.Contains(exts, fileExt) {
        return errors.New("unsupported video file")
    }

    // Here, we're just supplying defaults as we can tolerate the nil arguments
    if args.AudioBitrate == "" {
        args.AudioBitrate = "8k"
    }

    if args.VideoBitrate == "" {
        args.VideoBitrate = "30k"
    }

    if args.AudioCodec == "" {
        args.AudioCodec = "mp3"
    }

    if args.VideoCodec == "" {
        args.VideoCodec = "4264"
    }

    doneCh := make(chan bool, 1)

    func() {
        log.Printf("Converting with: %#v", args)
        time.AfterFunc(time.Second*5, func() {
            doneCh <- true
        })
    }()

    if <-doneCh {
        log.Println("Finished converting video to mp4")
    }

    return nil
}

And in our usage file

    args := VideoParams{
        Url: "https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv",
    }

    if err := ConvertAnyVideoToMp4(args); err != nil {
        log.Fatalln(err)
    }

Which we can see that we have default values for attributes that were not specified by the user

❯ go run .
2022/09/11 03:40:12 Converting with: main.VideoParams{Url:"https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv", AudioBitrate:"8k", VideoBitrate:"30k", VideoCodec:"4264", AudioCodec:"mp3"}
2022/09/11 03:40:17 Finished converting video to mp4

in the example above, we're just checking and setting defaults then overriding the defaults with user defined attributes but It's a good practice to write test cases before the actual implementation of a function because it gives you a clear representation of what the function will do

Difference between defensive programming and exception handling

The term “defensive programming” seems to have two complementary meanings. In the first meaning, the
term is used to describe a programming style based on assertions, where you explicitly assert any assumptions
that should hold true as long as the software operates correctly.
In the other meaning, however, “defensive programming” denotes a programming style that aims at making
operations more robust to errors, by accepting a wider range of inputs.

While
Exception handling is the process of responding to unwanted or unexpected events when a computer program runs

Some key concepts to take home

Anything that can go wrong will go wrong - Murphy's Law

Error conditions will occur, and your code needs to deal with them (Out of memory, disk full, file missing, file corrupted, network error, etc)
Software should be tested to see how it performs under various error conditions
Program defensively, i.e., assume that errors are going to arise, and write code to detect them when they do.
Put assertions in programs to check their state as they run, and to help readers understand how those programs are supposed to work.
Use preconditions to check that the inputs to a function are safe to use.
Use post conditions to check that the output from a function is safe to use.
Write tests before writing code in order to help determine exactly what that code is supposed to do.

https://faculty.cs.byu.edu/~rodham/cs240/lecture-notes/Lecture-16-ErrorHandling&DefensiveProgramming/Lecture-16-ErrorHandlingAndDefensiveProgramming.pdf

https://www.state-machine.com/doc/Samek0308.pdf

https://glebbahmutov.com/blog/defensive-coding-examples/

What happened to Faker.js & it's creator?

Navicstein Rotciv — Sat, 26 Feb 2022 20:02:34 +0000

faker.js - generate massive amounts of fake data in the browser and node.js

Dreaming of been free

Imagine you woke up in the morning and decided to create something to ease your repetitive task of generating data anytime you create project

That’s how it started for Marak 8 years ago with the all-time favorite random JS data generation library Faker. It was a sincere and honest endeavour to freely push out such a handy tool both for huge corporations and small teams that took advantage of a faster & smoother seeding generator for test data.

In October 2020 Marak added a commit to the Faker repository confirming the most dreaded situation in open source (Lack of funding) When you create a piece of software and people use it you expect to make money of it, but that’s not valid with open source libraries that are entirely based on donations.

The countless added features to the Faker codebase over the years increased the maintenance cost and time invested into the project.

It’s a known fact in the industry that no matter how great your open source library may be, if a big tech firm doesn’t sponsor it, you are pretty much broke. Marak knew this and made this point very clearly in his post that he will stop maintaining until he will receive a full salary offer since he had no income. Now, this is where it gets interesting, this final commit added to the reader file the cryptic line that still haunts me as I’m writing this article https://www.reddit.com/r/opensource/comments/rwcccz/what_happened_to_fakerjs/.

A few days after the erasure of Faker & FakerCloud off the face of the internet, Marak pushed a controversial update to another of his maintained libraries colors.js.

A glimpse of hope

You can still install an older version of faker.js and view the docs at faker.dev

$ npm i faker@5.5.3

or alternatively, Faker is now a community project. Visit faker-js/faker, docs at fakerjs.dev and use npm install @faker-js/faker.

Hope you liked this content, see you later.

How to add page transitions to a nextjs app

Navicstein Rotciv — Fri, 29 Jan 2021 09:40:09 +0000

This tutorial assumes that you're already familiar with next.js and just what to add transitions to your pages and that you're have hope of using typescript

Step 1

Install required dependency

$ npm install react-transition-group

if you're using Typescript install the types for it

$ npm install -D @types/react-transition-group

Step 2

create a Transition.tsx component in the component folder

import {
  TransitionGroup,
  Transition as ReactTransition,
} from "react-transition-group"

import { ReactChild } from "react"

type TransitionKind<RC> = {
  children: RC
  location: string
}

const TIMEOUT: number = 200

const getTransitionStyles = {
  entering: {
    position: `absolute`,
    opacity: 0,
    transform: `translateX(50px)`,
  },
  entered: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 1,
    transform: `translateX(0px)`,
    animation: "blink .3s linear 2",
  },
  exiting: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 0,
    transform: `translateX(-50px)`,
  },
}

const Transition: React.FC<TransitionKind<ReactChild>> = ({
  children,
  location,
}) => {
  return (
    <TransitionGroup style={{ position: "relative" }}>
      <ReactTransition
        key={location}
        timeout={{
          enter: TIMEOUT,
          exit: TIMEOUT,
        }}
      >
        {(status) => (
          <div
            style={{
              ...getTransitionStyles[status],
            }}
          >
            {children}
          </div>
        )}
      </ReactTransition>
    </TransitionGroup>
  )
}
export default Transition

Step 3

Next, import this Transition.tsx component to your layouts/MainLayout or _app.tsx if you're doing this in the _app.tsx be sure to replace children with <Component {...pageProps} />.

We have imported useRouter from next//router and passed the pathname to location props

// import this `Transition.tsx` component to your `layouts/MainLayout` or `_app.tsx`
import React, { Fragment } from "react"
import Transition from "../components/Transition"
import { useRouter } from "next/router"

const MainLaylout: React.FC = () => {
  const router = useRouter()

  return (
    // you may import your header and footer here too
    <Fragment>
      <Transition location={router.pathname}>
        <div className="min-h-screen">{children}</div>
      </Transition>
    </Fragment>
  )
}
// React.memo may not be important
export default React.memo(MainLaylout)

Step 4

Now you have everything ready it's time to use the MainLayout in our pages..
to use the layout, import and wrap your pages with MainLayout

for example

import React, { Fragment } from "react"
// path to your main layout
import MainLayout from "layouts/MainLayout"

const IndexPage: React.FC = (props) => {
  return (
    <MainLayout>
      <div> replace with your content here..</div>
    </MainLayout>
  )
}
export default React.memo(IndexPage)

Wrap each of your pages with the main layout, congratulations, you've just added page transitions to a nextjs app

Stop working for free, Should you ever work for free as a developer?

Navicstein Rotciv — Sat, 05 Dec 2020 09:10:50 +0000

In general, the obvious answer is NO, don't be fooled into doing free work based on promises it will pay off for you in the end.

I receive invitations to work for free Sometimes clients even expect me to pay for my own data -- While that business model may work for some people -- like those who want to create the next Facebook in town -- working for free usually doesn't pay off.

But let's explore this idea and have an open mind before reaching a decision.

What if you have no experience as a freelance web developer?

When I talk to new web developers about freelancing, some of them tell me they will start freelancing once they are expert developers. Some go a step further and tell me they know they need to be a veteran before they can start freelancing.

You’ll get hired because people trust you, not because of your experience. Experience can build trust, but it’s not the only way to get there.

What if you have no work experience to get a full-time job?

It's not easy to get a job without experience, but it can be done. With no work experience, it can feel impossible to get a job. What do you do?

My answer is: YOU NEED EXPERIENCE

How do you get experience?

You charge for your services then you work for free. But this depends on where you live, most times, working for free means that you have other means of survival, and working efficiently means that you're surviving or have means of surviving, for example, in some parts of Africa, you need constant electricity, data, and a good PC, imagine a self-taught developer that started programing with just an old PC with 4GB RAM, in this case, you'll be limiting your experience by the number of programs the PC can carry. To work means that you have a good PC, data and in good conditions to work let alone the experience

You charge for your services

This is the first thing you try, Charge for X and ONLY if they don't go ahead, charge less (that's what I do) If they still don't go ahead? You do it for free (in exchange for a testimonial and to add it to your portfolio) - that's if you have enough time and little experience.

Working for free IS NOT a bad thing.

Yes, in the short-term, it sucks. But in the long-term, it's beneficial.
Working for free is TEMPORARY. Do it for 2 or 3 clients in exchange for a testimonial or portfolio experience. You get EXPERIENCE and this EXPERIENCE helps you land more clients or a higher paying job.

Trust wins work

When you’re new, the barriers to getting hired onto an engineering team are daunting. Freelancers have a different set of barriers, but they’re easier to negotiate. As a freelancer solving problems for businesses, it’s trust, not experience, that wins work.
It's that simple. EXPERIENCE and CREDIBILITY do the selling and convincing for you. Let it convince your prospective clients. Play the long-term game. Trust me, this strategy works. I'm speaking from experience and it's worked for many other high-paying freelancers as well.

Autogenerated schema types vs handcrafted one

Navicstein Rotciv — Mon, 02 Mar 2020 17:05:50 +0000

Hello community, lately ive been wondering the advantages of auto generated schema definitions like graphql-compose-mongoose, in respect to hand written schema definitions, there are many things the tools generates that i don't use (ever) in my applications, i know that soon there will be a bug somewhere in anything auto generated, please what does the community recommend? should i use an auto-generated tool, or carefully roll out mine by hand!

Creating Neumorphic components in React, Vue and Svelte

Navicstein Rotciv — Mon, 03 Feb 2020 17:03:29 +0000

Hello everyone!

In the next few days, I'll start creating a neumorpic component - a UI trends that's going to be popular soon.

Although i draw UI inspiration from dribble i didn't even know what some UI concepts was all about until i stumbled at a blog post on medium Neumorphism in user interfaces and since then I've been designing my applications UI with the concept but i feel like creating something new out of the spec, that's why am calling a frontend developers around to globe to help contribute in the creating of neumo a neumorphic UI trend this 2020 and beyond

What can be achieved with this?

if the project goes well, we would be able to achieve the following UI with our shiny project

see the following screenshots to be convinced

view more here - that's where i got it from

In the future, the specification could also introduce elements of other embed-able frameworks like vuetify, quasar for vue etc, the library should integrate well with other frameworks as well.

In the project I'll use all of the following concepts and technologies (& more)

Storybook - open source tool for developing UI components in isolation for React, Vue, and Angular.
Typescript - A typed superset of JavaScript that compiles to plain JavaScript.
Sass - CSS with superpowers
and more to come

The Goal

The goal of this project is to create a neumorphic UI component framework for creating applications super fast. If everything goes well, it will be released someday!

Contributions are welcome!

After I set up the initial project skeleton I'd appreciate any contributions from people who would like to collaborate in component development and/or learn hands-on.

Quick tip on how to update your projects dependencies (nodejs)

Navicstein Rotciv — Mon, 03 Feb 2020 15:16:05 +0000

If you want to keep your project secure, fast and enjoy the latest features of all your dependencies, it's important to keep them regularly up-to-date. since this is just a quick tip and not a full blog post, i won't go into details on why you should update your projects dependencies.

The problem

What are they used for? Do you really need them? Are they correctly ordered between dependencies and devDependencies? This may sound a bit obvious but if you're working on a project that you haven't initialized or where people were free to add dependencies, I'm pretty sure that you don't have a full control of what you're using.

To correctly update your dependencies and being able to adapt your code with the potential breaking changes, it's important that your dependencies contain a CHANGELOG file, some documentation or even better a migration guide.

Usually, a lot of dependencies have a CHANGELOG.md file at the root of their repository. This file contains the list of the changes (bugfixes / features) released with each new version. If the updates follow the semantic versioning, it'll be easier to predict if an update will be easy or not.

Updating using npm

There's no viable way of doing this is npm but installing a global package might help, you need to install a new global dependency by running

$ npm i -g npm-check-updates

The to check for an update run the following

$ ncu -n -u

the -n finds the newest versions available instead of the latest stable versions while the -u means overwrite package file

https://www.npmjs.com/package/npm-check-updates

Updating using yarn

By default, Yarn allows you to upgrade your dependencies in an interactive way. You just have to run yarn upgrade-interactive and you'll be prompted with all the possible updates (that follows the versions you've set in your package.json file) you can do.
for example

$ yarn upgrade-interactive

That's all, hope you enjoyed this tip consider to share it with your friends :)

Am drowned! 😭 can someone explain what prisma and apollo is like am 12!

Navicstein Rotciv — Tue, 21 Jan 2020 08:18:39 +0000

Hi everyone, I've been following graphql lately and i don't yet fully understand the difference between prisma, graphql and apollo grapghql, ive gone through their docs but the whole concept seems overwhelming i would want the community to explain how they differ from each other and what they tend to fix, Thanks

Reasons why you should switch from Windows to Linux for development

Navicstein Rotciv — Sun, 24 Nov 2019 15:25:17 +0000

There are a many reasons to choose desktop Linux over Windows, i'll try to be as direct as possible.

It's free

Microsoft will force you to upgrade to Windows 8.1/10 which means you’ll have to spend around ₦43,500.00 just for the OS, although you can get the crack versions which might not be safe because of malicious pre-built applications in the CD-ROM

Linux OS, on the other hand, is completely free and powered by the open source. If you choose to switch to Linux, you save at least a thousand Naira. Sounds good enough a reason, ain’t it?

Application Store

Most of the desktop Linux OS have their own "app store" or "software repository" just like playstore on android devices, you can easily find games, apps and other tools for work there and from a secure source.

Windows also have an application store but most applications are not free, although the applications on windows store are much advanced or better than linux, but free and open is often better than paid in most cases.

Better updating process

Windows updates are real pain. First Windows will notify that you have system updates. When you install them, it will be configured at shutdown time at a pace that even a tortoise can beat. You will be told to “preparing to configure Windows, do not shutdown your system” and the wait is eternal. And that’s not the end. At the next boot, it will again be configuring the updates. Moreover, the software and applications installed in Windows provide their updates separately. Remember Java, Adobe, VSCode and iTunes updates pop up?

Updates in Linux is a like a cool breeze. You will be regularly notified that updates are available. And these updates include not just system and security updates but available updates for different applications installed. Unlike Windows, you won’t have to wait at shutdown or start time. Updating in desktop Linux is a matter of one click.
or you can run the upgrade and update command.

Drivers included and free

As a Windows user, you must have struggled with drivers. This always happen to me anytime i want to work on an application that requires extra configuration, finding the correct driver for your system was a difficult task for me. I remember, I had several drivers folders in my external backup disk as I did not want to waste time looking for the audio, video or wireless drivers, then i found it hard to download files through the internet. But with Linux, most of these drivers are supported directly by the Linux kernel. Which means its more like plug and play for Linux, no struggling with drivers, largely.

For example what one will usually do with a clean installation of windows is to install the necessary drivers some drivers come from driver pack and most of the drivers are too large to download, the funniest thing is that when a driver fails to install or when the internet is slow, the whole installation process will start afresh, that's a difficult thing to keep up with especially here in Nigeria where data is somehow a problem.

Community support

Probably the best thing about Linux is the Linux community. You will never feel alone in Linux world. Apart from numerous Linux how-to blogs, just drop by any forum for any kind of problem you are facing with your system, someone will always try to help you out. Such is the support of Linux community.

Better commands

As a software engineer commands aid and eases our work, windows have a very limited set of commands unless you're using mingw-w64 which is limited and not extensible like the default terminal in Linux, another great feat is the ability to extend and theme the command shell.

Ease of use

The one misconception about Linux is that it is “geeks only” and one needs to be computer genius and command line ninja to use Linux. No, it is not true. It is not late 90’s where Linux was a complicated operating system. These days desktop Linux OSes run out of the box, have GUI tools and have all the functionality that you look for in Windows.

I hope this post makes your decision of switching to Linux easier especially to Ubuntu. Also you can follow me on my twitter handle. Time to ditch Windows and embrace the freedom has come. Welcome to Linux 💕!

A fair comparison of React.js and Vue.js in 2019 and beyond!

Navicstein Rotciv — Fri, 22 Nov 2019 19:33:50 +0000

A lot of developers have been unfairly comparing react to vue, but the truth is that you might have gotten some facts wrong! I'll try to be fair in this comparison

Firstly let's quickly look at this chart in google trends

You'll see that React wins, but let's be honest, Vue is more used in Asian Countries especially china which is the birth home of Vue.

First, it’s not fair to use google charts to compare framework popularity. For instance Chinese users (where Vue is really strong) don’t have access to Google, also if the framework you choose to work with is complex or has a lot of trouble shooting you might use the search engine more in search

React on the other hand is an american company, and that alone gives react a huge community support and secondly its made by a company that have already made a name.

Remember a good name is often better than silver and gold!

Github stars

Some developers measure a frameworks popularity by their stargazers, lets take a look at both

ignore the other information in the pictures

From the little pictures there, we'll find out that Vue has about 153 thousand stars, while React has about 139 thousand stars.

Popularity

React is more popular and searched programming technology in comparison to Vue.

This statement would have been true only if Chinese developers and users are massively using google, but since the Chinese don't do much of "our google" we can't say for sure that "X" wins "Y" but we can keep our finger crossed that in some areas "Vue" wins and in another area "React" wins it all depends on your location.
A Chinese developer will simply tell you that Vue wins in his country since it's used more there while an American developer will tell you that React wins, this is likely to be 'the chicken and the egg problem'

Time Traveling

Ok, let's put on our imagination helmet and time travel, imagine Vue not Angular been backed by google in the year 2014, a year after React was created, if Vue had been backed by a huge company like google, i believe that by now React would have been not worth mentioning in 2020 despite been backed by facebook.

Learning Curve

The learning curve is the ability of software developers to apply the codes of a particular language/framework or library. Between these two programming technologies, Vue is more friendly for web developers according to the statistics.

Material Design Component Frameworks

While this might not be worth mentioning its very good to mention that a component frameworks eases the overhead cost of bootstrapping the UI of your application.

Component frameworks are sets of well-defined interfaces that establish the protocols for component cooperation within the framework. These protocols are used by component developers to ensure the interoperability of their components within the scope of a given framework.

Let's take a look at the number of matured component framework each framework has.

For Vue

We have:

Quasar framework and
Vuetify Both are very matured, material design component framework

For React

We have

Material UI

If you've not heard of a component framework, it may be time to look into them.

Conclusion: React vs Vue

Based on the representation of my above analysis with the help of statistics and facts, we can summarize the following points about React vs Vue:

React is more popular than Vue in the US and English speaking countries
While Vue without doubt is more popular than React in Asian Countries
React is backed with a top brand, facebook but Vue is not.
Vue comes with battries* which makes it easier than React to get started with, especially the Vue UI which provides a graphical interface to work with.
The production size of Vue is smaller than React, no doubt!
Vue has more component frameworks than React

At the end of this blog, I assume that your doubts have got cleared regarding the right tech-stack for your application development. If you are still in dilemma then talk to an expert from a reputed web app development company

if you want to share your personal experience, you can reach me through the comment section at the end.

Deploying an app from Gitlab to Heroku using the Quasar framework and Sailsjs

Navicstein Rotciv — Sun, 03 Nov 2019 11:10:58 +0000

In this tutorial I'm quickly going to give you an idea on how to deploy an application from heroku to Gitlab using auto CI/CD

This tutorial assumes that you must have known a little bit of Quasar framework and JavaScript it also assumes that you have basic understanding of Node itself and Auto DevOps.

In this example will be using Sailsjs and Quasar framework so make sure you have those dependencies installed globally.

Getting things ready

$ npm i -g sails @quasar/cli

now that you have those dependency installed all you had to do is make a directory demoapp as a directory name [you can change the name to your taste]

$ mkdir demoapp && cd demoapp

Now create the client folder using quasar

$ quasar create client

Quasar will ask you some questions about your application, make sure you answer them to your projects requirements, it also needs to download a starter kit so make sure you have an active internet connection

After creating the client folder now create the server folder, you can open a new terminal tab to speed up the development process while installing dependencies for each.

$ sails new app --no-frontend

you should see something like this on your terminal

➜  demoapp sails new server --no-frontend
 info: Installing dependencies...
Press CTRL+C to cancel.
(to skip this step in the future, use --fast)

This creates a new sails app without a frontend this comes handy when you want to generate a server only based application without worrying about the views since the views we are going to be replaced with quasar-framework distribution files.

your root folder should look something like this

.
├── client
│   ├── babel.config.js
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── quasar.conf.js
│   ├── README.md
│   └── src
├── package.json
└── server
    ├── api
    ├── app.js
    ├── config
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    └── README.md

Now initialize git int the root project of your application

$ git init

Make sure to add your gitlab origin to your app folder

$ git remote add origin YOUR_APP_NAME

Setting up sails to load quasar dist file pragmatically

Naturally sails is meant to load files found in the assets folder, but we want our files to be in the views directory
So we will create a directory called views

from the root directory run:

$ mkdir ./server/views

Now create a config file telling sails where our built files from quasar will be or live

$ code ./server/config/paths.js

This will open VSCODE editor and create an empty file.
inside the paths.js file, place this code there:

module.exports.paths = {
    public: "views"
}

Now when you lift sails, it will load up any index.html found in the views folder.

Adding a buildscript

There are many ways to archive this but i prefer to use a simple bash script to install, build and copy the files to their respective folder.

Here's the install.sh script

#!/bin/bash
echo  ' - Alright, here we go. trigerring auto deploy .. ..'  &&  echo

installDependencies() {
    echo  " Installing global dependencies.."  &&       echo
    npm i -g @quasar/cli sails
}



setupServer() {
    echo  " Installing server dependencies .. .."
    cd ./server
    npm install
    cd ..
}



setupClient() {
    echo  " Installing application dependencies .. .."  &&  echo
    cd ./client
    npm install
    quasar build -m spa
    cd ..
}



copy() {
    echo  " Copying assets to server"  &&  echo
    mkdir -p ./server/views
    cp -R ./client/dist/spa/* ./server/views
    }
}

installDependencies && setupServer && setupClient && copy

What the script really does

Installs the global dependencies
Uses the dependencies to build their project files
Copies the built files to where the server will pick and load them up for public access.

Setting up heroku

First thing to do is to make sure that heroku toolbelt is installed on your machine

$ npm i -g heroku

Create an Heroku's account or login using your terminal

$ heroku login

Follow the prompt and login. After a successful login, create a project

$  heroku apps:create demoapp-ci

You can use the main heroku site for this but to be faster i used heroku CLI toolbelt,

Naturally heroku, prunes the devDependencies after installing dependencies

so to make sure that your devDependencies are still there after installing your projects dependencies
run

$  heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false -a YOUR_APP_NAME

where YOUR_APP_NAME is your projects application name on heroku.

Heroku looks for a start script in your package.json file and attempts to run it with npm start so create or initialize npm to create the file.

From the root folder of your project run:

$ npm init --yes

The above command creates a dummy package.json in the root folder of your app. Open the package.json file and add two commands in the script section

posintall - runs before heroku starts your application, this is where we'll be calling the install.sh script which will run and install our projects dependencies.
start - this is the main entry point of our server entry file.
Actually what we'll be doing in the start section is to cd into the server folder and run the start script there too

so your package.json file should look like this:

{
    "name": "demoapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "postinstall": "bash install.sh",
        "start": "cd ./server && npm run start",
        "test": "echo \"Error: no test specified\"      && exit 1"
},

    "keywords": [],
    "author": "",
    "license": "ISC"
}

Setting up Gitlab

Now that everything is setup, we would probably be setting up Gitlab, if you don't have an account try creating one or if you already have, login into your account and create a project, we'll be using demoapp as the name of the project.

Now add the newly created application to your local git, i used the SSH strategy in this case, you can opt-in for HTTPS

$ git remote add origin git@gitlab.com:YOUR_USERNAME/demoapp.git

replace YOUR_USERNAME with your gitlab username, don't yet push now until we'v setup everything.

Getting your HEROKU_API_KEY

This where Gitlab gets to talk to Heroku servers about your application once a code is pushed.

Goto your heroku's dashboard
under the API Key section click on reveal to show your API key, it should look like this c488826c-e081-4434-a27f-45133f93c389

Now goto back to gitlab, click on the navigation menu on the left side of your browser and goto setting > CI/CD

or copy this link and replace demoapp with your gitlabs project name
https://gitlab.com/navicstein/demoapp/-/settings/ci_cd

under the Variables section toggle the expand button
create a key as: HEROKU_API_KEY and copy the API Key from heroku into the value box then click Save ariables

Setting up CI/CD

As described by GitLab Pages documentation, everything happens with a .gitlab-ci.yml file placed in the root of your repository. This working example will get you started:
Paste this code in the root of your folder

image: node:12.13.0

stages:
    - production

cache:
    paths:
        - node_modules/

# HEROKU
production:
    type: deploy
    stage: production
    image: ruby:latest

script:
    - apt-get update -qy
    - apt-get install -y ruby-dev
    - gem install dpl
    - dpl --provider=heroku --app=demoapp-ci --api-key=$HEROKU_API_KEY

only:
    - master

In the script part of the yml file
- dpl --provider=heroku --app=demoapp-ci
replace demoapp-ci with the application name you created on heroku

Going live

If you come this far without any troubles, then congrats you're ready to push your code, but before that make sure you follow sails guidelines for deploying your application sails guidelines for deploying your application

$ git add .

$ git commit -am  "Going live"

Pushing will

trigger the CI and run the jobs
upload artifacts to heroku
heroku in turn will run the postinstall script before attempting to run the start script
finally, heroku will lift your app located at ./server/app.js This will push and trigger gitlabs servers to run the .gitlab-ci.yml in your folder once the build succeeds

open your application and see your app go life, feel free to contact me or follow me on twitter when you run into issues, i'll be happy to talk with you about your project or issues you encounter.

ORM's how they simply your queries.

Navicstein Rotciv — Thu, 17 Oct 2019 23:47:34 +0000

ORM's how they simply your queries.

Spoiler Alert, this is directly dealing with waterline ORM

In this post am going to walk you through the concept of ORM's, what they do and how they can simply your database queries.
Before we take a deep dive into ORM, we might want to know what it stands for first, according to wikipedia.

Object-relational mapping (ORM, O/RM, and O/R mapping tool) in computer science is a programming technique for converting data between incompatible type systems using object-oriented programming languages.

Unless you've worked with NoSQL databases like mongodb or ArangoDB, you've likely written your fair share of SQL queries, they look somehow like this:

SELECT * FROM users WHERE email = 'Navic_doe@mail.com'

Object-relational-mapping is the idea of being able to write queries like the one above, as well as much more complicated ones, using the object-oriented paradigm of your preferred programming language.

Here's how it'll look when writing with Waterlinejs


var users = await User.findOne({ email: 'Navic_doe@mail.com' })
// Array -> do something with users

In a nutshell, we are trying to interact with our database using our language adapter of our choice,
As you can see, we are using the waterline ORM library to execute the exact same query, except we can write it in JavaScript (or whatever language you’re using). We can use the same languages we know and love this time javascript, and also abstract away some of the complexity of interfacing directly with a database.

Why use an Waterline ORM instead of writing native queries?

Database Agnosticism

In schemaful databases like Postgres, Oracle, and MySQL, models are represented by tables. In MongoDB, they're represented by Mongo "collections". In Redis, they're represented using key/value pairs. Each database has its own distinct query dialect, and in some cases even requires installing and compiling a specific native module to connect to the server. This involves a fair amount of overhead, and garners an unsettling level of vendor lock-in to a specific database; for example, if your app uses a bunch of SQL queries, it will be very hard to switch to Mongo later, or Redis, and vice versa.

Waterline query syntax floats above all that, focusing on business logic like creating new records, fetching/searching existing records, updating records, or destroying records. No matter what database you're contacting, the usage is exactly the same. Furthermore, Waterline allows you to .populate() associations between models, even if the data for each model lives in a different database. That means you can switch your app's models from Mongo, to Postgres, to MySQL, to Redis, and back again—all without changing any code. For the times when you need low-level, database-specific functionality, Waterline provides a query interface that allows you to talk directly to your models' underlying database driver

Flexibility

let's imagine you're building an e-commerce website, with an accompanying mobile app. Users browse products by category or search for products by keyword, then they buy them. That's it! Some parts of your app are quite ordinary: you have an API-driven flow for logging in, signing up, order/payment processing, resetting passwords, etc. However, you know there are a few mundane features lurking in your roadmap that will likely become more involved.

You ask the business what database they would like to use:

"Datab... what? Let's not be hasty, wouldn't want to make the wrong choice. I'll get ops/IT on it. Go ahead and get started though."

he traditional methodology of choosing one single database for a web application/API is actually prohibitive for many production use cases. Oftentimes the application needs to maintain compatibility with one or more existing data sets, or it is necessary to use a few different types of databases for performance reasons.

Compatibility

The product owner/stakeholder walks up to you and says:

"Oh hey by the way, the product's actually already live in our point of sale system. It's some ERP thing I guess, something like "DB2"? Anyway, I'm sure you'll figure it out. Sounds easy right?"

Many enterprise applications must integrate with an existing database. If you're lucky, a one-time data migration may be all that's necessary, but more commonly, the existing dataset is still being modified by other applications. In order to build your app, you might need to marry data from multiple legacy systems, or with a separate dataset stored elsewhere. These datasets could live on five different servers scattered across the world! One colocated database server might house a SQL database with relational data, while another cloud server might hold a handful of Mongo or Redis collections.

What are some great ORMs?

Mongoose
Waterline
sequelize
knexjs
.. etc

If I am a startup with a young developer team and a strict deadline, i'll prefer waterline, they are not paying me to say that, i've greatly worked with both mongoose and waterline, waterline seems to do a lot of work underneath, it tends to do a thing almost automatically without you bothering about setup cost, scaling and other factor one might consider, another thing is the adapters, i can easily use mysql and postgresql with mongodb in one big app [though the use case is rare], lemme say i want to use a mysql database in google cloud platform for only saving references of a file uploaded to s3, and a remote mongo database - say mongo atlas (see what i did there, { SQL with NoSQL } silly me :) )
you can easily accomplish that with waterline, also waterline have a great support for cloud databases like AWS dynamodb, GCP cloud, GCP firestore etc all maintained by the official team.

I'd also vouch for Mongoose, it was my first ORM love as it solves all my problem quite very well, but i wanted more, as at the time i stopped using mongoose i had a problem of populating from children nodes to parents which was already available in sails, but if am already a startup with an old codebase that just wants to keep things on the go, i'll use mongoose.

Closing thoughts

Though some people think of the configuration process of an ORM as a pain point, I have loved the ease with which I can configure different databases for different environments using a consistent interface.

I have greatly enjoyed using an ORM. As a full-stack developer working on small teams where we don’t have a dedicated database guru, it has greatly simplified working with the data layer.

Overall, I prefer working with an ORM to not. That being said, I haven’t had to work at the scale where SQL tuning becomes more important, so I’m sure my opinion is very biased.

If you haven’t tried using one, I would suggest trying it out and seeing how it works for your development system, but ultimately somebody who is really strong with databases will always give you better performance than the best ORM system.

I hope that you have learned something new today! I would appreciate it if you could drop some 👏 or leave a comment below! Also, this is my first post ever, don't bite me if you come across stuff that's displeasing to you :) .