Forem: Sheary Tan

Data Decryption and Encryption using AES

Sheary Tan — Tue, 09 Nov 2021 02:25:43 +0000

In this post we are going to do a basic data encryption and decryption using OpenSSL.

To encrypt the data

First, lets create a plain text file with a simple text in it

$ echo TextDataToEncrypt > message.txt

And we have successfully generated a text file!

Next we are using 256-bit AES in CBC mode to encrypt the file:

$ openssl enc -aes-256-cbc -in message.txt -out message.bin

It will then ask you to enter your password for the encryption:

enter aes-256-cbc encryption password:
Verifying - enter aes-256-cbc encryption password:

After that a file message.bin containing the encrypted data from the message.txt file will be generated.

We can view this file:

$ cat message.bin

It is desirable to encode the binary file in a text format for compatibility/interoperability reasons.
A common one is base64.
This is how to create base64-encoded message:

$ openssl enc -base64 -in message.bin -out message.b64

We can then view the file:

$ cat message.b64
U2FsdGVkX1/Xe/SswefSAEA6z3cykrRZOFEFwIvREwQTY=

To decrypt the data

Here we are decrypting text data from message.bin:

$ openssl enc -d -aes-256-cbc -in message.bin -out message.dec

It will ask you to enter the password you've entered before:

enter aes-256-cbc decryption password:

It will then generate a decrypted file (message.dec). We can view the decrypted text by running the command:

$ cat message.dec
TextDataToEncrypt

And that's it!

Source: Mastering Blockchain. I don't own any of these information, I am just sharing.

How to reuse your Trix WYSIWYG editor with Vue?

Sheary Tan — Thu, 13 Feb 2020 08:13:40 +0000

When adding a WYSIWYG editor to your site, have you considered:

1) Which library to use?
2) How to implement one?
3) What if I have more than 2 editors I have to add?
4) Could I make them reusable?

Yes you can.

Here I am using the Trix editor from Basecamp.

Have a look at the doc and install the library before getting started!

Before making it reusable, let's quickly set the editor up first.

Getting Started

First, let's add the editor tag like what the doc has mentioned:

<template>
   <div>
       <input id="x" type="hidden" name="content">
       <trix-editor input="x"></trix-editor>
   </div>
</template>

Now you've got a nice editor. But it would be great to store the text you've typed in somewhere. Let's create a two-way binding on the form input:

<template>
   <div>
       <input id="x" type="hidden" name="content" v-model="trixText"> <!-- new code here -->
       <trix-editor input="x"></trix-editor>
   </div>
</template>

<script>
import Trix from 'trix';
export default {
   data() {
      return {
          trixText: '' // new code here
      }
   }
}
</script>

Listen to the changes on the Trix editor

From the doc:

The editor emits several events which you can use to observe and respond to changes in editor state.
More of that can be found here.

Here we will be using the trix-change listener.

<template>
   <div>
       <input id="x" type="hidden" name="content" v-model="trixText">>
       <trix-editor input="x"></trix-editor>
   </div>
</template>

<script>
export default {
   data() {
      return {
          trixText: ''
      }
   },
   methods: {
       setTextToTrix: function() {
           this.trixText = document.getElementById("x").value; 
       }
   }
   mounted() {
       document.addEventListener("trix-change", this.setTextToTrix); // Listen to the changes on the editor
   }
}
</script>

And remove the event listener once done.

<!-- TrixComponent.vue -->
<script>
export default {
 ..
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix); // New code here
  }
};
</script>

Make it reusable

So now you've got your basic editor set up! It's time to make it reusable.

The secret to make the trix-editor reusable:

The id on the tags

<input id="x" type="hidden" name="content" v-model="trixBody"> <!-- notice the id? -->
<trix-editor ref="trix" input="x"></trix-editor> <!-- notice the id? -->

That means we can create a unique id for each component that is using TrixComponent.vue.

To demonstrate this, let's have 2 components: ComponentA.vue and ComponentB.vue using the same editor that you just created.

And let's work on ComponentA.vue first.

<!-- ComponentA.vue -->

<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span> <!-- Data received will be in HTML format -->
    </h6>
    <TrixComponent></TrixComponent> <!-- TrixComponent -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      textA: "",
    };
  },
  methods: {
  }
};
</script>

We can pass the id as props from ComponentA.vue to TrixComponent.vue.

<!-- ComponentA.vue -->
<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span>
    </h6>
    <TrixComponent :id="id"></TrixComponent> <!-- pass the id here -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      id: "A" // Here we have an id 'A'
    };
  },
  methods: {
  }
};
</script>

And we can assign the props(id) to the the input & the trix-editor.

<!-- TrixComponent.vue -->
<template>
  <div>
    <input :id="id" type="hidden" name="content" v-model="trixText"> <!-- Set the id according to the props -->
    <trix-editor :input="id"></trix-editor> <!-- Set the id according to the props --> 
  </div>
</template>

<script>
export default {
  props: ["id"], // Receive the id from the parent component
  data() {
    return {
      trixText: ""
    };
  },
  methods: {
    setTextToTrix(e) {
      this.trixText = document.getElementById(this.id).value; // REMEMBER TO UPDATE THE ID HERE TOO!
    },
  },
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix);
  },
};
</script>

Getting data back from `TrixComponent.vue`

We will emit the data back from TrixComponent.vue to its parent component, which is ComponentA.vue

<!-- TrixComponent.vue -->
<template>
  <div>
    <input :id="id" type="hidden" name="content" v-model="trixText">
    <!-- updated here -->
    <trix-editor :input="id"></trix-editor>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      trixText: ""
    };
  },
  methods: {
    setTextToTrix(e) {
      this.trixText = document.getElementById(this.id).value;
    },
    emitDataBackToComponent() {
      this.$emit("dataFromTrix", this.trixText); // Emit the data back to the parent component
    }
  },
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix);
  },
  updated() {
    this.emitDataBackToComponent(); // Fire the event whenever there's an update
  }
};
</script>

And ComponentA.vue will then be able to receive the data from TrixComponent.vue

<!-- ComponentA.vue -->
<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span>
    </h6>
    <TrixComponent :id="id" @dataFromTrix="getDataFromTrix"></TrixComponent> <!-- Receive the data back -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      textA: "",
      id: "A"
    };
  },
  methods: {
    getDataFromTrix: function(data) {
      this.textA = data; // Assign the data back to the the variable
    }
  }
};
</script>

It will be the same logic for ComponentB.vue: just pass a different id (maybe id: 'B'?) to TrixComponent.vue.

That's it!
You've now created a reusable trix editor :)

Here is the code example.

Happy coding 😊

What to consider when creating a new site?

Sheary Tan — Wed, 12 Feb 2020 01:41:23 +0000

Hope you're great ☺️!

Let's help those who wanted to create a site as a portfolio/marketing etc! No matter what level of coding you're in, let's share your thought! 😄

What do you have to consider when creating a new blogging site, personal website, company website etc?

In terms of:

Development

1) The stack you use (MEAN stack, MERN stack, LAMP stack etc)
2) Serverless or not
3) Web design ideas

Marketing

1) Search Engine Optimization (SEO)
2) Google Adwords
3) How do you reach your audience and promote your site?

And anything you would like to add!

Let's help each other out, happy coding! ☺️

Adding timestamps to the SQL raw queries with Laravel Eloquent? Here is how.

Sheary Tan — Sat, 22 Jun 2019 16:33:17 +0000

Using Laravel Eloquent

When adding the data into the database with Laravel Eloquent, timestamps will normally be inserted automatically if you have declared the timestamps column on the migration script.

And the migration script looks like this:

// create_person_table.php

class CreatePersonTable extends Migration
{
    public function up()
    {
        Schema::create('person', function (Blueprint $table) {
            $table->increments('id');
            $table->string('person_name');

            $table->integer('company_id');
            $table->foreign('company_id')->references('id')->on('companies');

            $table->timestamps();
            $table->softDeletes();
        });
    }

    public function down()
    {
        Schema::dropIfExists('person');
    }
}

and to add a new person from the controller:

// PersonController.php

namespace App\Http\Controllers;

use App\Person;

class PersonController extends Controller
{
    public function store(Request $request)
    {
        $newPerson = new Person;
        $newPerson->person_name = $request->person_name;
        $newPerson->company_id = $request->company_id;
        $newPerson->save();

        return redirect()
            ->route('members.folder.show', $request->id);
    }
}

And the timestamps(created_at & updated_at) will be created for you automatically in the database.

Using SQL Raw Queries

But what if there are some cases where you have to manually insert your data into the database without using the Laravel Eloquent, especially when you have a complicated SQL query?

Let's take a simple example by converting the example above into a SQL query instead:

// PersonController.php

namespace App\Http\Controllers;

use App\Person;

class PersonController extends Controller
{
    public function store(Request $request)
    {
       $person = DB::select(
            DB::raw("INSERT INTO person (person_name, company_id) VALUES (:personName, :companyId);"),
            array(
                "personName" => $request->person_name,
                "companyId" => $request->company_id.
            )
        );

        return $person;
    }
}

FYI: Read this article to understand the best practise when writing raw queries in laravel in order to prevent SQL injection

Since we didn't declare the created_at and updated_at columns on the INSERT section, you will then see the value null on both of the columns in the database.

So how do we add the timestamps manually into our database with the SQL raw query? Do we simply just hardcode the date or?

Solution

CURRENT_TIMESTAMP

First you have to add the created_at and updated_at columns on the INSERT section:

$person = DB::select(
            DB::raw("INSERT INTO person (person_name, company_id, created_at, updated_at) VALUES (:personName, :companyId);"),
            array(
                "personName" => $request->person_name,
                "companyId" => $request->company_id.
            )
        );

and add the CURRENT_TIMESTAMP to the values section:

$person = DB::select(
            DB::raw("INSERT INTO person (person_name, company_id, created_at, updated_at) VALUES (:personName, :companyId, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);"),
            array(
                "personName" => $request->person_name,
                "companyId" => $request->company_id.
            )
        );

Now run your code and add a record. You will then see the timestamps appear on the created_at and updated_at columns in your database!

Here is how I change the value of const keyword in Javascript

Sheary Tan — Wed, 27 Feb 2019 04:21:25 +0000

Every Javascript developer knows that var and let is reassignable but const cannot be reassigned or redeclared again.

But there is a little secret about const, let's look at some code.

const val = 10; // 10
val = 15; // Uncaught TypeError: Assignment to constant variable

As expected, we are unable to reassign val to another number. How about string?

const str = 'I am a String'; // 'I am a String'
str = 'I am a Cheese Stringers now'; // Uncaught TypeError: Assignment to constant variable

Still no. How about the array and object?

// Array
const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable = [14, 15, 16]; // Uncaught TypeError: Assignment to constant variable

// Obj
const objVariable = {1: 10, 2: 20, 3: 30, 4: 40}; // {1: 10, 2: 20, 3: 30, 4: 40}
objVariable = {5: 50, 6: 60}; // Uncaught TypeError: Assignment to constant variable

Javascript: Nope nope nope you can't do that nope...
But what if we do this:

const arrVariable = [10, 11, 12, 13]; // [10, 11, 12, 13]
arrVariable.push(14); // [10, 11, 12, 13, 14]

What?! Let's continue and play around a bit...

arrVariable[0] = 'Eat'; // ['Eat', 11, 12, 13, 14]
arrVariable[1] = '🥑'; // ['Eat', '🥑', 12, 13, 14]
arrVariable[2] = {1: 'Avocado'}; // ['Eat', '🥑', {1: 'Avocado'}, 13, 14]
arrVariable[3] = true; // ['Eat', '🥑', {1: 'Avocado'}, true, 14]

OMG what just happened?

From MDN Web Docs, it describes:

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.

Who is the variable identifier/constant here? arrVariable, not the array itself.

MDN said variable identifier/constant cannot be reassigned, which means arrVariable cannot be reassigned. But what about the array? It doesn't have any effect, of course, it is still mutable.

const tells the reader that your variable cannot be reassigned, which is why it is highly recommended to use. It prevents us to create some unnecessary bugs and improve code readability.

Similar to object:

const objVariable = {1: 10, 2: 20, 3: 30, 4: 40}; // {1: 10, 2: 20, 3: 30, 4: 40}
objVariable[1] =  '🍕'; // {1: '🍕', 2: 20, 3: 30, 4: 40}
objVariable[2] = ['Pizza', 'is', 'life']; // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: 30, 4: 40}
objVariable[3] = true; // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: true, 4: 40}
objVariable[5] = {1: '🍺', 2: '🍔'} // {1: '🍕', 2: ['Pizza', 'is', 'life'], 3: true, 4: 40, 5: {1: '🍺', 2: '🍔'}

So next time if someone asks you about our friend const, you know what to say.

Lastly,

arrVariable = 'I am an 🥑'; // Uncaught TypeError: Assignment to constant variable 

😑😑😑😑😑

Still nope, anyway...

Continue - Empty Interfaces in Go

Sheary Tan — Wed, 25 Jul 2018 15:00:34 +0000

Empty interface

As the name stated, it does not contain any methods. This is useful when we want to store different types of data.

From the previous post, we only use numbers for our example. What if we want to include different types of data?

For example:

package main

import "fmt"

type animal struct {
    age   int
    color string
    sound string
}

type cat struct {
    animal
    bossy bool
}

type dog struct {
    animal
    friendly bool
}

func main() {
    cassy := cat{animal{3, "white", "meow"}, true}
    kitty := cat{animal{2, "black", "meow"}, true}
    missy := cat{animal{1, "brown", "meow"}, true}
    cats := []cat{cassy, kitty, missy}

    rocky := dog{animal{4, "brown", "woof"}, true}
    lucy := dog{animal{3, "white", "woof"}, true}
    tucker := dog{animal{2, "black", "woof"}, true}
    dogs := []dog{rocky, lucy, tucker}

    for i, val := range cats {
        fmt.Println(i, " - ", val)
    }

    for i, val := range dogs {
        fmt.Println(i, " - ", val)
    }
}

// 0  -  {{3 white meow} true}
// 1  -  {{2 black meow} true}
// 2  -  {{1 brown meow} true}
// 0  -  {{4 brown woof} true}
// 1  -  {{3 white woof} true}
// 2  -  {{2 black woof} true}

It is a simple code so I don't think I would need to explain here...Well alright.. So we have two types here with dog() and cat(), bunch of dogs and cats, and two for loops to loop through the dogs and cats and finally print out the dogs and cats.

See the problem here? Same as the previous post, why do we need to write two different functions (in this case it's the for loops) to do the same thing?

But what's different from the previous post is that we have different types here: int, string, and bool in the type.

Instead why don't we include our friend interface:

package main

import "fmt"

type animals interface{}

type animal struct {
    age   int
    color string
    sound string
}

type cat struct {
    animal
    bossy bool
}

type dog struct {
    animal
    friendly bool
}

func main() {
    cassy := cat{animal{3, "white", "meow"}, true}
    kitty := cat{animal{2, "black", "meow"}, true}
    missy := cat{animal{1, "brown", "meow"}, true}

    rocky := dog{animal{4, "brown", "woof"}, true}
    lucy := dog{animal{3, "white", "woof"}, true}
    tucker := dog{animal{2, "black", "woof"}, true}

    friends := []animals{cassy, kitty, missy, rocky, lucy, tucker}

    for i, val := range friends {
        fmt.Println(i, " - ", val)
    }
}


// 0  -  {{3 white meow} true}
// 1  -  {{2 black meow} true}
// 2  -  {{1 brown meow} true}
// 3  -  {{4 brown woof} true}
// 4  -  {{3 white woof} true}
// 5  -  {{2 black woof} true}

So here we have got an empty animal interface, recall the statement of 'This is useful when we want to store different types of data.', we definitely have a bunch of different types for the type cat and dog.

It is difficult to specify which type do we need exactly, so why don't we just chuck everything into something(empty interface) that accept everything?

Or you can do this too:

Empty Interface as param

package main

import (
    "fmt"
)

type animal struct {
    age   int
    color string
    sound string
}

type cat struct {
    animal
    bossy bool
}

type dog struct {
    animal
    friendly bool
}

func result(a interface{}) { // Here!
    fmt.Println(a)
}

func main() {
    cassy := cat{animal{3, "white", "meow"}, true}
    rocky := dog{animal{4, "brown", "woof"}, true}

    result(cassy)
    result(rocky)
}

// {{3 white meow} true}
// {{4 brown woof} true}

Here I only included a dog and a cat just to reduce the complexity.

Or this:

Empty Interface as slice

package main

import "fmt"

type animal struct {
    age   int
    color string
    sound string
}

type cat struct {
    animal
    bossy bool
}

type dog struct {
    animal
    friendly bool
}

func main() {
    cassy := cat{animal{3, "white", "meow"}, true}
    kitty := cat{animal{2, "black", "meow"}, true}
    missy := cat{animal{1, "brown", "meow"}, true}

    rocky := dog{animal{4, "brown", "woof"}, true}
    lucy := dog{animal{3, "white", "woof"}, true}
    tucker := dog{animal{2, "black", "woof"}, true}

        // Here!
    friends := []interface{}{cassy, missy, kitty, rocky, lucy, tucker}

    fmt.Println(friends)
}

// [{{3 white meow} true} {{1 brown meow} true} {{2 black meow} true} {{4 brown woof} true} {{3 white woof} true} {{2 black woof} true}]

Which will return a slice (array).

The basic idea of interface: to prevent the repetition when calling methods. Empty interface? To prevent the repetition when calling methods with different types.

Thank you for reading my post, I am still a newbie Gopher but working hard to become a qualified Gopher :3

Brief Introduction to Interfaces in Go

Sheary Tan — Wed, 25 Jul 2018 13:54:57 +0000

As a new Gopher and a CodeNewbie who has never typed C++ or any strongly-typed languages before, I was having a hard time looking for some beginners-friendly resources about Interfaces in Go.

So here I am, decided to write one and doing my best to help any beginners.

What is Interfaces?

Interfaces in Go provide a way to specify the behavior of an object: if something can do this, then it can be used here. - Effective Go

Well it basically means interfaces is a type that has a bunch of methods.

Alright without talking too much, lets make things clear today.

Write some code

Aim: To implement two methods sum() and substr() which will then print out the sum and subtraction of two numbers.

1) Let's start with the setup

package main

import "fmt"

func main() {
}

2) Then the type, here we have item1 and item2 with two numbers type float64 respectively:

package main

import "fmt"

type item1 struct {
    num1, num2 float64
}

type item2 struct {
    num1, num2 float64
}

func main() {
}

3) Now we need some instructions (methods) for the code to work:

package main

import "fmt"

type item1 struct {
    num1, num2 float64
}

type item2 struct {
    num1, num2 float64
}

// Method
func (a item1) sum() float64 {
    return a.num1 + a.num2
}

// Method
func (a item1) substr() float64 {
    return a.num1 - a.num2
}

// Method
func (b item2) sum() float64 {
    return b.num1 + b.num2
}

// Method
func (b item2) substr() float64 {
    return b.num1 - b.num2
}

func main() {
}

Before continuing, let's get a better understanding on the method.

// Method
func (b item2) substr() float64 {
    return b.num1 - b.num2
}

b is a reference to item2, which is the way we access num1 and num2 inside item2. Then we have the name substr(), the return type float64 and the return method.

4) Implementing result1 and result2 and print out the result:

package main

import "fmt"

type item1 struct {
    num1, num2 float64
}

type item2 struct {
    num1, num2 float64
}

// Method
func (a item1) sum() float64 {
    return a.num1 + a.num2
}

// Method
func (a item1) substr() float64 {
    return a.num1 - a.num2
}

// Method
func (b item2) sum() float64 {
    return b.num1 + b.num2
}

// Method
func (b item2) substr() float64 {
    return b.num1 - b.num2
}

// Result 1 & Result 2
func result1(i item1) {
    fmt.Println("Sum: ", i.sum())
    fmt.Println("Substr: ", i.substr())
}

func result2(i item2) {
    fmt.Println("Sum: ", i.sum())
    fmt.Println("Substr: ", i.substr())
}

func main() {
    a := item1{num1: 10, num2: 5}
    b := item2{num1: 20, num2: 10}

    result1(a) 
    result2(b)
}

// Sum:  15
// Substr:  5
// Sum:  30
// Substr:  10

Here we passed two variables: a and b to two functions: result1 and result2, and got the results.

But here is the problem:

Why do we need to write two functions (result1 and result2) that basically do the same thing?

So here is the thing you have been waiting for: Interfaces

5) Implementing interface. I mentioned before, interface is a type that has a collection of methods (function). It has both sum() and substr(), which are the names of the methods below:

package main

import "fmt"

type math interface {
    sum() float64
    substr() float64
}

type item1 struct {
    num1, num2 float64
}

type item2 struct {
    num1, num2 float64
}

// Method
func (a item1) sum() float64 {
    return a.num1 + a.num2
}

// Method
func (a item1) substr() float64 {
    return a.num1 - a.num2
}

// Method
func (b item2) sum() float64 {
    return b.num1 + b.num2
}

// Method
func (b item2) substr() float64 {
    return b.num1 - b.num2
}

func main() {

}

6) Print out the result:

package main

import "fmt"

type math interface {
    sum() float64
    substr() float64
}

type item1 struct {
    num1, num2 float64
}

type item2 struct {
    num1, num2 float64
}

// Method
func (a item1) sum() float64 {
    return a.num1 + a.num2
}

// Method
func (a item1) substr() float64 {
    return a.num1 - a.num2
}

// Method
func (b item2) sum() float64 {
    return b.num1 + b.num2
}

// Method
func (b item2) substr() float64 {
    return b.num1 - b.num2
}

func result(m math) {
    fmt.Println("Sum: ", m.sum())
    fmt.Println("Substr: ", m.substr())
}

func main() {
    a := item1{num1: 10, num2: 5}
    b := item2{num1: 20, num2: 10}

    result(a)
    result(b)
}

// Sum:  15
// Substr:  5
// Sum:  30
// Substr:  10

So now we just have to include interface math with result, we will then be able to access sum() and substr() by calling it once in the main() section.
Here we are calling result once for both variables and got the same results!

Continue -> Empty interface

Thanks for reading my first ever published article!