DEV Community: Shakya Peiris

Implement Traits on External Types in Rust

Shakya Peiris — Tue, 02 Apr 2024 08:47:10 +0000

Say you are using an type from an external crate and you want to implement a specific functionality/method on that type. As an example say you are using the linked list of my recently developed rust_dsa crate and you want to implement a method on it to print it's values in the following format.



let mut h = Node::new(Some(0));
// Snippet
println!("Linked list: {}", head);

If it's from a local trait, you can simply implement the Display trait on it as follows



impl<T: Debug + Clone + Copy> fmt::Display for Node<T> {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        match &self.next {
            Some(next) => {
                print!(
                    "{} <- ",
                    Node {
                        value: self.value,
                        next: Some(next.cl)
                    }
                );
                write!(f, "{:?}", self.value.as_ref().unwrap())
            }
            None => {
                write!(f, "{:?}", self.value.as_ref().unwrap())
            }
        }
    }
}

But since you are using Node which is from an external trait you will face the following error when you compile your binary

So what can you do about it? You can simply implement a wrapper for that specific type and implement the Trait of your choice as follows by accessing the Type you want as a child of the Wrapper as a tuple element.



struct  Wrapper<'a, T>(&'a Box<Node::<T>>);



impl<'a, T: Debug> fmt::Display for Wrapper<'a, T> {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        match &self.0.next {
            Some(next) => {
                print!("{} <- ", Wrapper(&next));
                write!(f, "{:?}", self.0.value.as_ref().unwrap())
            },
            None => {
                write!(f, "{:?}", self.0.value.as_ref().unwrap())
            }
        }
    }
}

That's it for new types and feel free to explore more on new types in Rust book's guide on Advanced traits.

How to build a simple router for a Node.js application

Shakya Peiris — Sun, 09 Oct 2022 11:29:42 +0000

A couple of days ago I started to build a Node.Js backend without any 3rd party dependencies and today I'm going to explain how I developed a router for that application.

Before going further I would like to tell you that this is the first time I'm doing this type of project and the logic behind the router might not be the most efficient or the best solution. So I'd like to invite you to share your thoughts with me and others.

So basically when you consider a route, you can break it down into a couple of components.

Subroutes and path parameters
Query parameters

First, let's see how we can develop a logic for subroutes and path parameters.

You can think of a route as a tree data structure where each route will have a set of sub-routes with or without a wild card(path parameter).

Configure a path

Initially, we have to separate query params and the path as follows.

let endpoint;
if (req.url.includes('?')) {
    endpoint = req.url.split('?')[0];
} else endpoint = req.url;

Now before we add/configure an endpoint, we have to separate each subroutes using '/'.

if (endpoint[endpoint.length - 1] != '/') endpoint += '/';
let path = endpoint.split('/');

If we splice path '/someroute/another' using the above algorithm we get an output as follows

['', 'someroute', 'another', '']

For every route, we are getting the '' route at the beginning. So for every route, we can ignore it.

let adjPath = path.slice(1, path.length);

Next, we can set an iterator to the adjPath array and go from each level to the next level adding each part of the path to the tree.

We can identify wildcards using the ':' in front of it. So we can set that path as a wild card.

static constructPath(path, currIndex, head) {
        if (currIndex === path.length) {
            return;
        }
        const newObj = new Router(path[currIndex]);
        if (path[currIndex][0] === ':') {
            head.wildCard = newObj;
            this.constructPath(path, currIndex + 1, head.wildCard);
        } else {
            const childrenAvailable = head.children.find(
                (c) => c.path === path[currIndex]
            );
            if (childrenAvailable) {
                const childrenIndex = head.children.findIndex(
                    (c) => c.path === path[currIndex]
                );
                this.constructPath(
                    path,
                    currIndex + 1,
                    head.children[childrenIndex]
                );
            } else {
                head.addChildren(newObj);
                this.constructPath(
                    path,
                    currIndex + 1,
                    head.children[head.children.length - 1]
                );
            }
        }
    }

While configuring the given path, we have to check whether the current subroute is already configured or not. If it's already configured, then we can just continue to the next section of the route.

By repeating the above steps we can set up a tree data structure for the routes of our application.

Run controllers upon requests

Except for constructing the tree in the above section, we have to keep track of which endpoint to run on which route. We can do it by simply setting an object with adjPath variable as the key.

Before we run the controller, we have to check whether the requested path is valid or not and find its format (with path parameters). We can do it simply by searching the tree data structure.

Before that again we have to convert the requested path to an array as above.

Then for each subroute, we can check whether it includes in the tree or whether a wildcard exists. If both are false, we can send a 404 response saying that the requested path is not available.

static getPath(path, currIndex, head) {
        if (currIndex === path.length) {
            return [];
        }
        const pathExists = head.children.find(
            (p) => p.path === path[currIndex]
        );
        let res;
        if (pathExists) {
            const tempRes = this.getPath(path, currIndex + 1, pathExists);
            if (!tempRes) return null;
            res = [pathExists.path, ...tempRes];
        } else if (head.wildCard) {
            const tempRes = this.getPath(path, currIndex + 1, head.wildCard);
            if (!tempRes) return null;
            res = [head.wildCard.path, ...tempRes];
        } else return null;

        return res;
    }

After that, we can compare differences between the returned value from the getPath function and the array which contains the path and name those different items as path parameters.

Ex: constructedPath = ['someroute', ':param', 'end', '']
reqPath = ['someroute', 'paramValue', 'end', '']

let params = {};
for (let i = 0; i < constructedPath.length; i++) {
    if (reqPath[i] !== constructedPath[i]) {
        params = {...params,[constructedPath[i].substring(1,constructedPath[i].length)]: reqPath[i],};
    }
}

From that, we can find the value for path parameter 'param' and it is 'paramValue'.

Finally, we can find query parameters from the URL by splitting it at '?' and implementing the following algorithm.

let query = {};
const splittedQuery = req.url.split('?');
if (splittedQuery.length == 2) {
    const queryParams = splittedQuery[1].split('&');
    queryParams.forEach((q) => {
    const n = q.split('=');
        query = { ...query, [n[0]]: n[1] };
    });
}

So that's how I implement a router for my third-party dependency-free node.js application.

For more information and how I implemented the above routing strategies checkout here

Thank You!

The Logic Behind Tic-Tac-Toe game

Shakya Peiris — Sun, 02 Oct 2022 05:40:13 +0000

Tic-tac-toe is a paper and pencil game that can be traced back to ancient Egypt, where such game boards were found in roofing tiles dating back to 1300 B.C.

I have recently developed an online multiplayer Tic-tac-toe and today I'm going to explain to you how I designed the algorithm behind the game.

I have been doing competitive programming for quite a while and, I could say this was the first project I had to use my problem-solving skills to solve a real-world problem.

First of all, we can draw a flow chart for the algorithm as follows.

According to the above flow chart, we have to keep track of all the moves on a hypothetical board. For that, we can use a 3x3 nested array where every element is initially an empty string and change it to 'X' or 'O' depending on the player who moves.

When a player makes a move on the board we have to make the same move on the hypothetical board and first check whether the moving square is already occupied or not. For that, we can implement a simple algorithm as follows



let board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', ''],
]
const checkAvailability = (x, y, player) => {
    if (board[x][y] !== '') return alert('Square is already occupied');
    board[x][y] = player
}

Since I developed the game using vanilla.js I had to do some additional work as follows.



<div class="container">
    <div class="row">
    <div class="square" id="1-1"></div>
    <div class="square" id="1-2"></div>
    <div class="square" id="1-3"></div>
    </div>
    <div class="row">
    <div class="square" id="2-1"></div>
    <div class="square" id="2-2"></div>
    <div class="square" id="2-3"></div>
    </div>
    <div class="row">
    <div class="square" id="3-1"></div>
    <div class="square" id="3-2"></div>
    <div class="square" id="3-3"></div>
    </div>
</div>



const btnIds = ['1-1', '1-2', '1-3', '2-1', '2-2', '2-3', '3-1', '3-2', '3-3'];

btnIds.forEach((btn) => {
    const button = document.getElementById(btn);

    //Listen for moves on each square
    button.addEventListener('click', (e) => {
        const coordinate = btn.split('-');
        const y = parseInt(coordinate[0]) - 1;
        const x = parseInt(coordinate[1]) - 1;

        //Check whether the selected button is empty
        if (board[y][x] === '') {
            // Eligible
        } else {
                // Not eligible
        }
    });
});

Now we have checked the eligibility for a move and next, we have to check whether the game is ended or not. There are two scenarios where a Tic-tac-toe game end.

Win/Loss
A player will win a game if he can place three of his characters in a horizontal row, vertical column, or diagonal.
Draw
In a draw scenario, all squares of the board should be occupied by either 'X' or 'O' and there should not be any three consecutive squares in a vertical column, horizontal row, or a diagonal with the same character.

We can implement the algorithm for it as follows.



const checkWinner = (board) => {
    // Checking rows
    for (let i = 0; i < 3; i++) {
        const a = board[i][0];
        const b = board[i][1];
        const c = board[i][2];

        if (a != '' && a === b && b === c) {
            return 'win';
        }
    }

    // Checking columns
    for (let i = 0; i < 3; i++) {
        const a = board[0][i];
        const b = board[1][i];
        const c = board[2][i];

        if (a != '' && a === b && b === c) {
            return 'win';
        }
    }

    // Left Top to Bottom right diagonal
    const a = board[0][0];
    const b = board[1][1];
    const c = board[2][2];

    if (a != '' && a === b && b === c) {
        return 'win';
    }

    // Right Top to Left bottom diagonal
    const d = board[0][2];
    const e = board[1][1];
    const f = board[2][0];

    if (d != '' && d === e && e === f) {
        return 'win';
    }

    // Check for draw
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            const square = board[i][j];
            if (square === '') return undefined;
        }
    }

    return 'draw';
};

Finally, we can combine all the above functionalities and implement the complete algorithm as follows.



const checkAvailability = (x, y, player) => {
    if (board[x][y] !== '') return alert('Square is already occupied');
    board[x][y] = player

    if (checkWinner(board)) return alert(checkWinner(board));
    const nextPlayer = player === 'X' ? 'O' : 'X';
    alert(`${nextPlayer}s' chance`)
}

Additionally, we can add a few more conditions to implement functionalities such as checking whether the chance is for which player, not allowing the players to move once the game end, etc.

Be creative and implement your solutions for the above scenarios and feel free to ask others whenever you are stuck.

Have a great weekend. Thank You!

Client-Side Authentication is Easy with AuthBee!!!

Shakya Peiris — Tue, 21 Dec 2021 17:00:41 +0000

Hello Everyone! I hope you are doing well. So today I'm going to introduce you AuthBee, a JavaScript library that you can use to implement client-side authentication without much pain.

Why you need to choose AuthBee?

When I started coding, I felt really difficult in implementing client-side token authentication with JWT because of some complex concepts such as Automatic log out, etc... So, in AuthBee all those concepts are concatenated to simple functions which are exported from authbee package and you will only need to import them from the package and call them in your program with respective parameters.

Main features of AuthBee

Login
Logout
Get authentication data provided when login (token)
Validate token and automatically logout when necessary

How to use AuthBee

You can simply call the function exported from the package and call them in your JavaScript code. For more details, you can refer to documentation and the example in GitHub repo.

Want to contribute to AuthBee?

I always highly appreciate your contribution to this project and, the reason for the development of these types of projects is people like you. So no matter whether you are a beginner or an expert, you are welcome to contribute and make sure you have already read contribution guidelines of the project.

Future of AuthBee

For now, I'm planning to add the following features to the project. If you have any idea on a new feature or found a bug then please report it to the issue section of the github repo.

Add typescript definitions
Make package compatible for SSR

So that's about the AuthBee and hope this package will be useful to you in your future projects. Thank You!!!

Formna - A Form Validation Library for Vanilla.Js Developers

Shakya Peiris — Wed, 08 Sep 2021 02:53:26 +0000

Hello everyone! Hope you are doing well. It's been a long time since I have posted a blog post on dev.to and today I thought to share the details about the first NPM package developed by me about you. You can check out more details about it through the following links.

npmjs.com: https://www.npmjs.com/package/formna
GitHub: https://github.com/Formna/Formna

What is Formna?

Formna is a JavaScript library that you can use to implement form validation in your vanilla.js project. Also, it consists of a feature which you can send any request to any according to URL configuration set by you with the data fetched through the respective form.

Why Formna stands out?

Even though there are some other libraries that you can use to implement form validation in Vanilla.Js, I don't think they are much reactive and they do not have a feature that you can use to send HTTP requests by the library itself.

Story behind this library?

Even though I wanted to build a JavaScript library for a long time I wasn't able to do that. But, the previous weekend I participated in a Hackathon, and since its theme was save I came up with an idea which we can save time in development. My project was selected to the top 10 projects but it wasn't stronger to compete with other projects (ideas) and I made some mistakes in the Q & A session of the pitch. Even though I wasn't able to win a hackathon up to now, at the end of every hackathon I was able to build new things and gain more and more knowledge.

Conclusion

Using Formna you can build reactive forms in vanilla.js without putting in much effort.

Thank You!

My first day with Flutter!!

Shakya Peiris — Fri, 11 Jun 2021 17:32:26 +0000

Hello everyone hope you are reacting well. Recently I joined a Sri Lankan JavaScript meetup named Colombo JavaScript and two members of the organizing committee of that meetup, Chathu Vishwajith and Pubudu Kodikara hosted a pair-programming live stream on Flutter and it was streamed via YouTube, Fb and Twitch(SLDevTalks) and that live stream inspired me to learn Flutter!

Before touching Flutter I thought to learn Dart because I have never used dart before and since it's somewhat looks like JavaScript, I was able to learn even OOP within an hour. To learn dart I watched the following video on YouTube. But I don't recommend if you don't have a pretty good understanding about programming and I'll the put my recommendation for beginner programmers also.

Dart Tutorial for ones with prior programming experience : https://www.youtube.com/watch?v=Ej_Pcr4uC2Q&t=1621s

Dart for beginners : https://www.youtube.com/watch?v=5xlVP04905w

My first dart app :


class MyPig{
  String name;
  int age;

  MyPig(this.name,this.age);

  void tellMeAboutYou(){
    speak("Oink Oink I'm $name and I'm $age years old");
  }

  void eat(String food){
    List favouriteFoods = ["apple","orange","pizza","burger"];
    List worstFoods = ["rice and curry","pickles","cauliflower"];

    if (favouriteFoods.contains(food)){
      speak("Mmm Yumy I like $food");
    }
    else if (worstFoods.contains(food)){
      speak("Ewww I don't like $food");
    }
    else if (food.length % 2 == 0){
      speak("Mmm This is tasty what's the name of this food?");
    }
    else{
      speak("Eww I don't wanna know what this food is!");
    }
  }

  void friends(List friendList){
    speak("Oink Oink I have lot of friends");
    for (var friend in friendList){
      speak(friend);
    }
  }

  void speak(String word){
    print(word);
  }
}

void main () {
  MyPig emilly = MyPig("Emilly",4);
  emilly.tellMeAboutYou();
  emilly.eat("apple");
  emilly.friends(["Peter","Shakya","Other Friends"]);
}

Then today, I got up at around 4.30 am and start to learn the art of flutter and to learn I have chosen the Udemy course conducted by Dr.Angela Yu. That course was sponsored by google and recommended by more than 35,000 students(according to the amount of reviews and total number of students is > 100k). At, the end of the day, I was able to learn the basic thing like how component tree works, how Scaffold works, Material colors, Material app, etc... and at the end of the I built a simple app with an appBar and an image at it's center. And also today, I have learned how to put an icon to my flutter app too.

My First Flutter app :

void main()=>runApp(
    MaterailApp(
        home:Scaffold(
            backgroundColor : Colors.blueGray,
            appBar : AppBar(
                title : Text("My App"),
            )
            body:Center(
                child : Image(
                    image : NetworkImage(""),//url or to access 
                                 //localfiles you can use Assets
                )
            )
        )
    ),
);

Hope I would be able to publish blogs related to Flutter and dart in the near future and until then good bye!

Why so00 DYNAMIC?

Shakya Peiris — Wed, 09 Jun 2021 09:35:24 +0000

Hello everyone! Hope you are reacting well. So, this is my first post in dev.to and I thought to start with a Next.Js blog. So today let's discuss how to work in dynamic pages using getStaticProps and getStaticPath.

In Next.Js not like in react, they provide us file based routing and you can see those pages under pages folder. In there you can create new files with .js extension and make sure you have named it with the route you needed. (eg : if you want to have an about page you have to name that page as about.js and for '/' path you must name it as index.js). Also you can define dynamic URLs with as follows and make sure you have defined the parameter inside square brackets.

eg : [blogId].js

To access that parameter inside the dynamic URL, we can use useRouter hook which is imported from next/router. Then you can grab the parameter values as follows. But this is not the way we are going to follow today.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => () => {
    const router = useRouter()
    return(
        <h1>{router.query.blogId}</h1>
    )
}

export default MyPage

When it comes to data fetching, if we do data fetching in Next.Js as we do in react components with useEffect, that fetched content do not affect SEO because the page is hydrated from data after it pre-renders and therefor server won't be able to see that fetched data. There for we can use built in functions called as getStaticProps and getServerSideProps to fix that issue. Today I'm going to focus on getStaticProps function which is the most preferred way to do this task.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => (props) => {
    return(
        props.map(article => {
               return <h1>{article.title}</h1>
        })
    )
}

export async function getStaticProps(){
    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    return{
        props:data
    }
}

export default MyPage

As you can see in the above getStatic Props async function after the data is fetched we have to return that data inside an object with the key props so that page component will be able to access that data via props.

Also, in the above page it show only data fetched for the first time to the server. There for even if changd the data in our backend API data in the component does not change. Therefor to fix that issue we can put a revalidate time out inside the returned object with revalidate key as follows.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => (props) => {
    return(
        props.map(article => {
               return <h1>{article.title}</h1>
        })
    )
}

export async function getStaticProps(){
    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    return{
        props:data,
        revalidate:1, //this revalidates in every second
    }
}

export default MyPage

Then how can we access the url parameters? That's simple. You can pass an argument to the function called as context. Context is a nested object. From that, you can access url parameters as follows.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => (props) => {
    return(
        props.map(article => {
               return <h1>{article.title}</h1>
        })
    )
}

export async function getStaticProps(context){

    const blogId = context.params.blogId /*blogId is the name of 
    parameter*/

    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    return{
        props:data
        revalidate:1, //this revalidates in every second
    }
}

export default MyPage

If you run the dev server with npm run dev with above setup you will get an array saying about getStaticPath. Now let's see how we can fix that issue.

So to fix that issue you have to call a built in next.js function called getStaticPath inside your page and return an object with two keys, fallback (boolean) and paths (array) as follows.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => (props) => {
    return(
        props.map(article => {
               return <h1>{article.title}</h1>
        })
    )
}

export async function getStaticPath(){
    return{
        fallback:true,
        paths:[]
    }
}

export async function getStaticProps(context){

    const blogId = context.params.blogId /*blogId is the name of 
    parameter*/

    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    return{
        props:data
        revalidate:1, //this revalidates in every second
    }
}
export default MyPage

So in the above paths array you can define all the possible parameter values so that if user enters a different value than those defined ones, he/she will be redirected to a 404 page. Also, you can set fallback to false when you are in develop server and make sure you have set it true or "blocking" when you deploy your app.

//in [blogId].js file
import {Router} from 'next/router'

const MyPage => (props) => {
    return(
        <h1>{props.title}</h1>
    )
}

export async function getStaticPath(){
    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    return{
        fallback:true,
        paths:data.map(item => {return{param:{blogId:item.id}}})
    }
}

export async function getStaticProps(context){

    const blogId = context.params.blogId /*blogId is the name of 
    parameter*/

    const url = ""
    const response = await fetch(url)
    const data = await response.json()
    const article = data.find((article) => article.id === blogId )
    return{
        props:article
        revalidate:1, //this revalidates in every second
    }
}
export default MyPage

Refer the above code snippet for the complete process.
Github Link for a same sort of project : https://github.com/shakyapeiris/meetup_web.git
So that's it! Thanks You!