DEV Community: Godwin Jemegah

How to Reasonably Keep Your Tauri Commands Organized in Rust

Godwin Jemegah — Tue, 13 Aug 2024 23:52:30 +0000

When building Tauri applications, it's important to keep your codebase organized, especially as your project grows. Trust me, as someone who's relatively new to Rust, I've had my fair share of messy situations—spending hours digging myself out of self-made holes. If you're anything like me, you want to avoid that. So, let's talk about how to keep things neat by splitting your Tauri commands into separate files.

Start with a Commands Module

First things first, create a commands module. This will be the hub for all your Tauri commands. In your src directory, make a folder named commands. Inside this folder, you’ll create files for different groups of related commands. For instance:

system_info.rs for system-related commands
process_info.rs for commands dealing with processes
greet.rs for something simple like a greeting command

Here’s what your directory might look like:

src/
│
├── commands/
│   ├── mod.rs
│   ├── system_info.rs
│   ├── process_info.rs
│   └── greet.rs
│
└── main.rs

Organize Commands into Separate Files

Now, go ahead and move your command functions into these respective files. By doing this, you’re breaking down your project into manageable chunks, making it easier to maintain. Plus, it’s a lot less intimidating when you need to revisit or expand a specific functionality.

Tie It All Together in `mod.rs`

Once your commands are in their own files, you need to make sure they’re accessible throughout your project. In the commands/mod.rs file, expose each command with pub mod statements.

pub mod greet;
pub mod system_info;
pub mod process_info;

Register Commands in `main.rs`

Finally, in your main.rs, import these commands and register them with Tauri’s Builder. This way, Tauri knows where to find your commands when you call them from the frontend.

mod commands;

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![
            commands::greet::greet,
            commands::system_info::get_system_info,
            // Other commands...
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Wrapping Up

Keeping your Tauri commands organized in separate files is a small step that makes a big difference, especially as your project grows. By splitting your code into bite-sized pieces, you’ll save yourself from the chaos of an unorganized codebase. Trust me, your future self will thank you!

How to create a dynamic sitemap.xml for your Sveltekit app.

Godwin Jemegah — Tue, 15 Aug 2023 14:38:21 +0000

Search Engine Optimization (SEO) is a critical aspect of making your website discoverable and ranking well in search engine results. Sitemaps play a significant role in enhancing SEO by providing search engines with a structured roadmap of your website's content. They help search engines understand the organization of your site, index its pages efficiently, and ensure that your latest and most important content gets appropriately prioritized.

So, you've built your nice SvelteKit application, a blog maybe?, but you need to submit a sitemap.xml file to Google search console. Let me guess, your routes are dynamic so you can't just manually index all your routes?. Don't worry, I'll show you how.

I recently just built my blog at n3-rd.tech and had this exact problem, using the official Dev.to API, I had all my posts dynamically generated and it was a big problem. How did I get a solution?, well here it is.

Creating a Route for our sitemap

First thing we'll do is create a new directory in our src/routes folder named sitemap.xml (directory, not a file!). Then in our directory, we'll create a +server.js file

Coding the actual sitemap

In our +server.js file, we'll start by setting the headers and setting our content type to xml

export async function GET({ fetch, setHeaders })  {
setHeaders({
'Content-Type': 'application/xml'
});

When we've done that, we'll define our site and make a fetch request to get our posts

const site  =  'https://www.website.';
const response  =  await  fetch('https://dev.to/api/articles?username=yourUsername');
if (!response.ok) {
throw  new  Error('Failed to fetch posts.');
}
const posts = await response.json();

Our site url is defined in the site variable and we fetch the our posts and throw an error if that fails, then we define our response in the posts variable.
note that you may be fetching your posts with a different method, adjust the fetch request to adapt your own method.

Next, we'll define our sitemap like this :

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${site}</loc>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
${posts.map(post  =>  `
<url>
<loc>${site}/articles/${post.id}</loc>
<changefreq>weekly</changefreq>
<lastmod>${post.published_at.split('T')[0]}</lastmod>
</url>
`).join('')}
</urlset>`;
return new Response(sitemap);
}

We first define our base url using our site variable created earlier, we then use the .map() function on the posts array to iterate through each article and generate XML <url> elements for them. Each <url> element contains a <loc> element with the article URL, a <changefreq> element with 'weekly', and a <lastmod> element with the article's published date. The code split('T')[0] is optional and I only used it to format the date provided by the API.
The .join('') function is then used to concatenate all the generated <url> elements into a single string.
Our constructed XML sitemap is then returned as a response using the Response constructor, passing in the sitemap string.
Note: You should adjust this code based on your website structure

The final code should look similar to this:

export async function GET({ fetch, setHeaders })  {
setHeaders({
'Content-Type': 'application/xml'
});

const site  =  'https://www.website.';
const response  =  await  fetch('https://dev.to/api/articles?username=yourUsername');
if (!response.ok) {
throw  new  Error('Failed to fetch posts.');
}
const posts = await response.json();

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${site}</loc>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
${posts.map(post  =>  `
<url>
<loc>${site}/articles/${post.id}</loc>
<changefreq>weekly</changefreq>
<lastmod>${post.published_at.split('T')[0]}</lastmod>
</url>
`).join('')}
</urlset>`;
return new Response(sitemap);
}

That's all!, our sitemap should be available through the /sitemap.xml route.

Please Like, share and comment any issues below, Thank You

I will also soon be publishing it on GeeksforGeeks” with the text GeeksforGeeks being linked to https://www.geeksforgeeks.org/.

Setting JavaScript framework standards ( what’s wrong with the React-set standard and why everyone should be like Svelte)

Godwin Jemegah — Fri, 11 Aug 2023 01:37:55 +0000

React is great, yeah, absolutely no lies. Released on May 29 2013 and maintained by Facebook (coughs - “Meta”), it has grown to be the the most used JavaScript framework - or library 🌚, Suppressing Angular and kicking jQuery in the nuts.

The standard way of building web apps has so far been defined by this superhuman framework and it’s been the most recommended framework for a long time, but what if it’s about to change?. React, for all its glory sadly is shit ( we all know it, yes. But we won’t admit it), it’s sadly gone down the over complexity road that so many of our beloved frameworks have and has been a messy mud fest.

In this article, we will look at some aspects of React’s web standards that are not so brilliant and why Svelte should set the latest standards for JavaScript frameworks and web development. Now you might not agree with me, but hopefully after this is over you’ll take a good look at yourself and say, “maybe this bloke might be right”.

State Management

State management is one of the useful aspects of most JavaScript frameworks, It is the management of input or data state across multiple data flows across an application.

React does have in-built state management capabilities, but you’d rather use Redux or some other state management tool because it’s not the best to work with.
Here is an example of state management in Redux:

// store.js
import { createStore } from 'redux';

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;


// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions'; // Create these actions

const Component = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      {count}
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};

export default Component;

The equivalent of that in Svelte, using Svelte Store:

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// component.svelte
<script>
import {count} from 'store.js'
const increment = () =>{
count.update((n) => n + 1);

const decrement = () =>{
count.update((n) => n - 1);
}

</script>

<button on:click={increment}>
    +
</button>
{$count}
<button on:click={decrement}>
    -
</button>

Component Boilerplate

React components can sometimes require a lot of boilerplate code, especially when dealing with state management, props, and lifecycle methods. Svelte's simplified syntax and reactive statements can significantly reduce the amount of boilerplate, making codebases cleaner and easier to maintain.

Now you might say React is a more matured framework and Svelte just took advantage of it’s shortcomings to create a more efficient system, but frameworks can always evolve, and React should also be expected to. In my opinion, code should be fluid and shouldn’t have so much boilerplate.

Performance Benefits

While React performs much of its work at runtime, Svelte's build process analyzes and optimizes your code, it generates efficient JavaScript that directly manipulates the DOM. This streamlined approach usually leads to faster load times and improved runtime performance.
Svelte avoids using the Virtual DOM, a core concept in React.

While the Virtual DOM minimizes direct DOM manipulation, it introduces a reconciliation process that can sometimes slow down updates. Svelte, however, compiles components into lean JavaScript code. As a result, Svelte updates and renders components more quickly, enhancing the overall responsiveness of your application.

Tooling Integration

Tooling integration plays a pivotal role in shaping the development experience of modern web frameworks. React, is known for its flexibility and extensive ecosystem, but it often needs a lot of configuration and setup to harness its full potential ( Do simple things most times).

Developers often navigate through a maze of build tools, transpilers, and linters, which can occasionally slow down project initiation and hinder rapid development.
In contrast, Svelte favours those seeking swifter project setup and streamlined development workflows. Svelte's shifts the burden of heavy tooling away from developers, thanks to its compile-time framework that generates optimized JavaScript code.

The absence of a virtual DOM in Svelte simplifies the tooling landscape, resulting in a lighter configuration process and reduced cognitive load. As a result, developers can swiftly dive into coding, unburdened by the tooling complexities that React may entail. This attractive balance between functionality and simplicity positions Svelte as an appealing alternative for projects where rapid iteration and minimal setup friction are important.

So yeah, those are my thoughts, if you haven’t used Svelte by the way, try it out at svelte.dev

Build A Simple Web App With Sveltekit and Appwrite

Godwin Jemegah — Tue, 04 Apr 2023 10:51:13 +0000

What is Sveltekit?

SvelteKit is a web development framework that is built on top of Svelte, a popular front-end JavaScript framework. It aims to simplify the process of building high-performance, scalable web applications by providing a range of tools and features that make it easy to create server-rendered web pages and applications.

SvelteKit includes features such as server-side rendering, file-based routing, API endpoints, automatic code-splitting, and more. It also supports a wide range of integrations and plugins, including popular databases, authentication providers, and hosting platforms.

What is Appwrite?

Appwrite is an open-source backend server software that provides developers with a set of powerful tools and APIs to build serverless and scalable applications. It provides various backend services, such as authentication, database management, storage, and cloud functions, that can be easily integrated into any frontend technology stack.

Appwrite's features include:

Authentication and user management: Appwrite supports user authentication through various providers like Email/Password, Google, Apple, Facebook, and GitHub. It also provides user management APIs to create, update, and delete users.
Database management: Appwrite supports NoSQL databases like MongoDB, Couchbase, and Elasticsearch, as well as SQL databases like MySQL and PostgreSQL.
Storage: Appwrite provides a simple and scalable storage API that supports local file storage, Amazon S3, and Google Cloud Storage.
Cloud Functions: Appwrite allows developers to create serverless functions that can be triggered by events or scheduled to run periodically.
API documentation: Appwrite provides extensive documentation for all its APIs and SDKs, making it easy for developers to integrate with the backend services.

Installation

First, let's start by installing sveltekit, you can use any of the package managers ( NPM, Yarn or PNPM ). For this tutorial, I'll be using PNPM and Vite. If you don't have Vite installed, follow this tutorial.

Create a Sveltekit application by running

    pnpm create vite //PNPM
    npm create vite@latest // NPM
    yarn create vite //Yarn

We'll name it "appkit" and choose Svelte as our framework, but the variant should be Sveltekit

We'll then select the Skeleton project option

We won't be using Typescript for this so select no for Typescript and only ESlint and Prettier in the Additional options.

Our project would be created and we'll navigate into the directory and install all dependencies

cd appkit
pnpm install

we'll now run the app using the pnpm dev command and open the url ( default is http://localhost:5173/ )
We should see this basic page

Next we'll configure docker, make sure it is installed or install it here.

Configuring the Node Adapter

To be able to run this app successfully in Docker, we will have to Install the Svelte node adapter

pnpm add -D @sveltejs/adapter-node

Then modify our svelte.config.js file to use it.

import  adapter  from  '@sveltejs/adapter-node';
export  default  {
kit:  {
adapter:  adapter()
}
};

Writing the dockerfile

Create a .dockerignore at the root of the project, this file specifies files and directories that should be excluded from the build context when creating a Docker image. This can help reduce the size of the final image and improve build performance.

# .dockerignore

.vscode

node_modules

.git
.gitattributes

.eslintignore
.eslintrc.cjs

.prettierrc
.pretieriignore

README.md

Dockerfile

Now we'll start writing our Dockerfile

To create a Dockerfile for our Node.js application, we need to start by selecting a suitable runtime environment. While Node.js is commonly installed on local machines, we need to ensure it is available in our Docker image. Therefore, we'll use the official Node.js image as our base, which comes pre-installed with Node.js and npm.

# Start with a lightweight Node.js image
FROM node:16-alpine

# Install pnpm package manager
RUN npm install -g pnpm

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies using pnpm
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# Copy the app's source code and build using pnpm
COPY . .
RUN pnpm build

# Expose port 3000 and start the app
EXPOSE 3000
CMD ["node", "build"]

Once you've created the Dockerfile, navigate to the root of your project and execute the docker build . -t appkit command. This will build a Docker image named appkit. Once the build process is complete, you should see the terminal confirming the creation of the image in your terminal.

Running The Application

Once you've created the Dockerfile, you can run your application inside a container by executing the command docker run -d -p 3000:3000 --name app-container appkit. This command does the following:

-d: runs the container in detached mode, meaning it runs in the background.
-p 3000:3000: maps port 3000 of the container to the port 3000 of the host machine.
--name app-container: gives a name to the container, which is optional but can be useful for easily identifying the container.
appkit: the name of the image we want to run (the image we built previously).

After running the command, you should be able to access the application at http://localhost:3000.

We have successfully built a Sveltekit app with Docker, now time to add Appwrite.

Installing Appwrite

We can Install appwrite on our machine through a docker run command.
Unix Systems( Linux e.t.c)

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.2.1

CMD ( Windows )

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:1.2.1

Powershell

docker run -it --rm `
    --volume /var/run/docker.sock:/var/run/docker.sock `
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw `
    --entrypoint="install" `
    appwrite/appwrite:1.2.1

Setting up our Appwrite project

To create your first project on Appwrite, navigate to the Appwrite console at http://localhost/ and click on the icon located on the top navigation header or the 'Create Project' button available on the console homepage. Provide a name for your project and click on 'create' to begin.

You can use PNPM to install Appwrite SDK to your project from the command line. Run the following command:

pnpm add appwrite

then create an appwrite.js file in the src folder

import  {  Client  as  Appwrite,  Databases,  Account  }  from  'appwrite';
const  server  =  {
endpoint:  'http://localhost/v1',
project:  'YOUR_PROJECT_ID'
};
const  client  =  new  Appwrite();
const  account  =  new  Account(client);
client.setEndpoint(server.endpoint).setProject(server.project);
const  sdk  =  {  account  };
export  {  sdk,  server  };

This creates a new Appwrite client instance by importing the necessary classes (Client, Databases, Account) from the 'appwrite' package. It sets the server endpoint and project ID, and creates an account instance using the client. Finally, it exports the account instance as part of an SDK object along with the server information.

This SDK object can then be imported and used in other files to interact with the Appwrite API.

User Authentication

To get started navigate to the src folder and create a file called store.js
This will create a svelte store and we will add the following code

import  {  sdk  }  from  './appwrite';
import  {  writable  }  from  'svelte/store';
const  createState  =  ()  =>  {
const  {  subscribe,  set,  update  }  =  writable({
account:  null,
alert:  null
});

return  {
subscribe,
signup:  async  (email,  password,  name)  =>  {
return  await  sdk.account.create('unique()',  email,  password,  name);
},
user:  async  ()  =>  {
return  await  sdk.account.get();
},
login:  async  (email,  password)  =>  {
await  sdk.account.createEmailSession(email,  password);
const  user  =  await  sdk.account.get();
state.init(user);
},
logout:  async  ()  =>  {
await  sdk.account.deleteSession('current');
},
alert:  async  (alert)  =>
update((n)  =>  {
n.alert  =  alert;
return  n;
}),
init:  async  (account  =  null)  =>  {
return  set({  account, alert:  null  });
},
checkSession:  async  ()  =>  {
const  user  =  await  sdk.account.get();
state.init(user);
}
};
};
export  const  state  =  createState();

The createState() function returns an object that has various methods for handling authentication, such as signup(), login(), and logout(). These methods all make use of the sdk object imported from the appwrite.js file to interact with the Appwrite backend.

The writable() function from the svelte/store library is used to define the initial state of the store and provide methods for updating it. The initial state of the store contains an account property set to null and an alert property also set to null.

The subscribe() method is used to listen for changes to the store's state, while the set() and update() methods are used to update the state. The init() method is used to initialize the store's state, and the checkSession() method is used to check the user's authentication status on Appwrite's backend.

Login and Signup

Create three new svelte kit routes named login, signup and app

Signup Page


<!-- routes/signup/+page.svelte -->
<script>
    import { goto } from '$app/navigation';
    import { state } from '../../store';

    let email = '';
    let name = '';
    let password = '';
    let confirmPassword = '';
    let error = null;

    const handleSubmit = async (event) => {
        event.preventDefault();
        if (password !== confirmPassword) {
            state.alert({
                color: 'red',
                message: 'Passwords do not match'
            });
            return;
        }
        try {
            await state.signup(email, password, name);
            goto('/app');
        } catch (error) {
            state.alert({
                color: 'red',
                message: error.message
            });
        }
    };
</script>

<form on:submit|preventDefault={handleSubmit}>
    <h1>Sign Up</h1>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" bind:value={name} required />
    <label for="email">Email</label>
    <input type="email" id="email" name="email" bind:value={email} required />
    <label for="password">Password</label>
    <input type="password" id="password" name="password" bind:value={password} required />
    <label for="confirm-password">Confirm Password</label>
    <input
        type="password"
        id="confirm-password"
        name="confirm-password"
        bind:value={confirmPassword}
        required
    />
    <input type="submit" value="Sign Up" />
</form>

<style>
    form {
        display: inline-block;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-top: 50px;
    }

    label {
        display: block;
        font-size: 18px;
        margin-bottom: 10px;
        text-align: left;
    }

    input[type='text'],
    input[type='email'],
    input[type='password'] {
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    input[type='submit'] {
        background-color: #3498db;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    input[type='submit']:hover {
        background-color: #2980b9;
    }
</style>

This creates a simple signup page. The script imports the goto function from the $app/navigation module and the state object from the ../../store module. The script defines four variables for the user's email, name, password, and confirmPassword. The variable error is also defined to handle any errors that may occur during the signup process.

The handleSubmit function is defined to handle form submissions. It prevents the default form submission behavior and checks if the password and confirmPassword fields match. If they do not match, an error message is displayed using the state.alert function. Otherwise, the state.signup function is called with the user's email, password, and name. If there are any errors, they are caught and displayed using the state.alert function. If the signup is successful, the goto function is used to redirect the user to the /app page.

The HTML form contains fields for the user's name, email, password, and confirmPassword. It also contains a submit button that calls the handleSubmit function when clicked.

Login page

<!-- routes/login/+page.svelte -->
<script>
    import { goto } from '$app/navigation';
    import { state } from '../../store';

    let email = '';
    let password = '';
    let error = null;

    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            await state.login(email, password);
            goto('/app');
        } catch (error) {
            alert(error.message);
        }
    };
</script>

<div>
    <h2>Login</h2>
    <form on:submit|preventDefault={handleSubmit}>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" bind:value={email} required />
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" bind:value={password} required />
        </div>
        <button type="submit">Login</button>
    </form>
</div>

<!-- Style -->
<style>
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    div {
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 5px;
    }

    input {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 250px;
    }

    button {
        background-color: #007aff;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0051a8;
    }

    h2 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }
</style>

App Page

<!-- routes/login/+page.svelte -->
<script>
    import { goto } from '$app/navigation';
    import { state } from '../../store';
    import { onMount } from 'svelte';

    onMount(async () => {
        await state.checkSession().catch(() => {
            goto('/login');
        });
    });
    const logout = async () => {
        await state.logout();
        goto('/login');
    };
</script>

<h1>App</h1>
<button on:click={logout}>Logout</button>

This component has a logout button. The script section contains two functions: onMount and logout.

onMount is a Svelte lifecycle function that is called when the component is mounted on the page. The onMount function contains an asynchronous call to state.checkSession(), which is a function that checks if the user's session is still valid. If the session is not valid, the function redirects the user to the login page using goto('/login').

The logout function is called when the user clicks on the "Logout" button. It calls the state.logout() function, which logs the user out and destroys the session. Then, it redirects the user to the login page using goto('/login').

Viola!, we have built a simple app with Sveltekit and Appwrite.

If you have any problems, feel free to comment or contact me on Twitter

The Source code can be found here

How to get dominant colour of an image with the Color Thief library in JavaScript

Godwin Jemegah — Thu, 03 Nov 2022 22:58:23 +0000

We have all seen many designs, music players in particular dynamically changing design properties according to the dominant colour (ahem 'color') of an image.

Spotify does it, Deezer does it, Youtube Music does it, and I recently did it to showcase my 2022 Spotify playlist Here. Now let's do it too!.

We start with a basic boilerplate

Then we'll code ourselves a simple HTML and CSS webpage with the Color Thief CDN link

(also available on NPM npm i --save colorthief)

HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Dominant color tutorial</title>
</head>
<body>

    <div class="background">
        <div class="image-container">
                        <img src="https://loremflickr.com/420/340" alt="image" crossorigin="anonymous">

        </div>
    </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="index.js" defer></script>
</html>

CSS



body{
    margin: 0;
    padding: 0;
}
.background{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container{
    width:40vw;
    height: 60vh;
    background-color: #000;
}
.image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

So we should be left with a nice randomly generated kitten page

Now for the fun part, Javascript!



    window.onload = () => {
    getDominantImageColor = ()=>{
        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");
        // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);
        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";
    }
    getDominantImageColor();
    }

Don't worry, I'll explain the javascript part

First we make sure our page is fully loaded by wrapping our code in the window.onload function



window.onload = () => {
//code here
}

Then we'll get our image and the background element



        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");

Next, we'll initialize colorthief and get the color palette of the image



     // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);

Set the background color to the RBG value of the palette



        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";

Then we'll call the function



    getDominantImageColor();

everything together should look like this



    window.onload = () => {
    getDominantImageColor = ()=>{
        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");
        // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);
        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";
    }
    getDominantImageColor();
    }

Our page should now be working!.

Hurray!

Any suggestions or issues, feel free to comment and follow me lol.

How To Make A Qr-code Generator With Vue JS And Quasar Framework

Godwin Jemegah — Sat, 16 Oct 2021 02:42:35 +0000

What Is Vue JS (Like you don't already know 🙄)**

Vue JS is one of the most popular JavaScript front-end frameworks today, created by Evan You in February 2014, it has risen in popularity over the years. The latest version of Vue JS as of October 2021 is Vue 3.

You can install Vue CLI with the following commands 👇🏽:



yarn global add @vue/cli
# OR
npm install -g @vue/cli

What Is The Quasar Framework?

Quasar Framework is a Vue JS framework that lets you develop Vue JS apps with ease and simplicity, it provides components and many other features for developing a SPA (Single Page Application), PWA (Progressive Web App), BEX (Browser Extension), SSR (Server-side Rendered App), Hybrid Mobile app, Multi-Platform Desktop App and every other Heavenly thing you desire. You can check out the documentation here.

Quasar CLI can be installed with the following commands 👇🏽:



yarn global add @quasar/cli
# or
npm install -g @quasar/cli

When both Vue CLI and Quasar CLI are installed, we move on to the next step

Creating A New Quasar App 📱

We'll create a new quasar app by navigating to our desired location and running:



quasar create qr-generator

This may take a while to wrap up but when its done, open the newly generated qr-generator folder in your preferred IDE, I use Visual Studio Code

You should see a file structure like this 👇🏽:

Now, we run the app by opening our terminal in the qr-generator folder location and entering 👇🏽:



quasar dev

We should now see a home screen like this 👇🏽:

Now that we've created a new Quasar App, its time to get into the coding part

Coding Our App 🖥

The first thing we'll do is to go into the pages folder and open up Index.vue, we should see the following code:



<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    >
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex'
})
</script>

We'll remove the image and add an input field and a button attaching v-models to create a two way binding for the input:



<template>
  <q-page>

     <q-input v-model="qrLink" label="Input value to generate" />
     <br/>
     <q-btn color="primary" label="Generate QR Code" />

      <canvas id="qr-code">

    </canvas>

  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex',
  data(){
    return{
      qrLink: ''
    }
  },
  methods: {

  }
})
</script>

Now we'll create a function in methods that lets us generate the Qr-code, but first we'll test if it works:



 methods: {
    generateQrCode: function(){
      console.log('generated code')
    }
  }

Then we'll bind the function to the button with @click



<q-btn color="primary" label="Generate QR Code" 
     @click="generateQrCode"
     />

When we click the button and check our console we should see the message:

Now we'll need to actually generate a QR Code, for this we'll need to install a library called QRious:



$ npm install --save qrious
# OR:
$ yarn add qrious

Then import it:



import QRious from "qrious";

Then we'll need to add some validation to the input field:



<q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />

Then in the generateQrCode function we'll also add some validation and the code to generate the Qr-code itself:



generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
                level: "H",
                padding: 25,
                size: 300,
                element: document.getElementById("qr-code"),
                value: this.qrLink,
              });
      }
    }

And Viola!, We have built our Qr-code generator 🎊

The code should look like this:



<template>
  <q-page>
    <q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />
    <br />
    <q-btn color="primary" label="Generate QR Code" @click="generateQrCode" />

    <canvas id="qr-code"></canvas>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import QRious from "qrious";

export default defineComponent({
  name: "PageIndex",
  data() {
    return {
      qrLink: "",
    };
  },
  methods: {
    generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
          level: "H",
          padding: 25,
          size: 300,
          element: document.getElementById("qr-code"),
          value: this.qrLink,
        });
      }
    },
  },
});
</script>

Contact me if it looks like this

Visit the Github repo for this article here

My Github Profile

My Twitter

My Portfolio

Deploy a javascript only blog with CMS JS

Godwin Jemegah — Sat, 19 Dec 2020 12:18:40 +0000

Deploying a blog can be sometimes strenous, from Jekyll to Ghost CMS and Hugo, I've tried out quite a lot of CMS Deployment methods, but there's just one that more than meets my eye - CMS JS

CMS JS is a Javascript only(yes, javascript only!) blog CMS that can be deployed in only a matter of minutes. This ensures that you dont need any backend tools like Node JS or Ruby to have your own blog, CMS JS is a lightweight and simple alternative

How to set up CMS JS

CMS JS currently has two modes, Server mode and Github mode which means you can choose to host your content on Github with Github Pages or you can choose to self host your content.

Learn more about server mode here

How to set up server mode

Clone the starter repo: git clone https://github.com/chrisdiana/cms.js-starter.git or download the latest release
Navigate to js/config.js and modify the settings to your liking. Change mode to GITHUB or SERVER mode based on your hosting environment
If you're using Github mode, you'll want to make sure your Github settings are correct, then create a new branch from your master or working branch called gh-pages(Github's default branch for hosting)
And you're done!, as easy as you could imagine

Themeing

Unfortunately, CMS JS does not provide so much fancy themes like most CMS providers do, though it is quite very easy to customise it comes with a few not so great themes.
You can find them here

Well, that's that, if you want to read more about CMS JS, check out the Wiki or chekout the Github repository

If you enjoyed this post you can buy me a cofee to encourage me to write more techy stuff :D