DEV Community: Oluwaseyi Muyiwa

How to Leverage on the Power of Browsers Storage using VanillaDb

Oluwaseyi Muyiwa — Sat, 02 Sep 2023 17:13:56 +0000

Over the years the Browsers have improved from been just a text reader to a whole big machine that served as home for all websites, and web applications today.

The part of the browser features that caught my attention the most is the Browsers Storage (local and session Storage), the browsers storage gives developers the ability to build persistent Web Application User Interface.

What are Browsers Storage ?

Browsers Storage namely localStorage, sessionStorage, indexedDB, shared Database etc, are features which are available in the browser to store data in various ways and conditions.

VanillaDb ?

VanillaDb is a tiny little tools that is built on top of browsers storage to make working with browser storages more seamless.

i will be implementing how to use this tiny tool (vanillaDb) in your applications when required, i will do this by building a small web Application called rosters-list-app.

rosters-list-app is a web application that store team roasters, and display the players name.

starting the project, i will be using Vite to start a react project, after Vite is done, delete the files that comes with Vite and arrange all your files, now install vanillaDb into your project using

  npm i vanilla-db

after installing the package it's time to code.

firstly i want to create two states in main.jsx folder, one for all players list the other is for the new player name we are adding,

now we can create a form to input new player name and store them in browsers storage using vanillaDb, the form goes like this.

on the form we have a function called "handle" that run when we submit the form, inside the function we create a data object and the config that will help vanillaDB to store the data.

the config contains the database we want to use (in this case localStorage), the database key and the data we want to store, vanillaDb.set(config) will store the data in the browsers localStorage.

now, what about how to get the data stored ? easy, to get the data store call vanillaDb.get() and pass in query that points to the data you stored.

the query contains the browsers database used and the database key.
Now the Web Application is working well the datas are stored and rendered successfully.

VanillaDb is a tiny tool that comes with some other features you will like to try out, trust me you will want to check our this tiny tool to do so check the links below.

GitHub: https://github.com/Seyifunmitan/vanilla-db
NPM: https://www.npmjs.com/package/vanilla-db

VanillaDB: A Tiny Browser-Based Database

Oluwaseyi Muyiwa — Sun, 27 Aug 2023 19:28:08 +0000

VanillaDB

VanillaDB is a tiny browser-based database library that is built on localstorage, sessionStorage and indexedDB.

Installation

Install vanilla-DB using npm

  npm install --save vanilla-db

Usage/Examples

Once the package is installed, you can import the library using import

import { vanillaDb } from 'vanilla-db'

const config = {
  db: 'local' // 'session',
  key: 'your database key',
  data
}

vanillaDb.set(config)

config contains your database of choice which can either be "local" or "session", your database key and the data you intended to store in the DB.


const query = {
  db: 'local' // 'session',
  key: 'your database key',
}

vanillaDb.get(query)

query contains the Database you stored data in and the database key.

More Features

sync(key) - sync data stored in session to local Database
remove(db, key) - remove stored data by key
length(db) - return the length of data stored in Database

Usage/Examples

import { vanillaDb } from 'vanilla-db'

vanillaDb.sync(key)

where key is the key of the data stored in Database


const db =  'local' // 'session',
const key = 'your database key',

vanillaDb.remove(db, key)

db is the Database you stored data in and the database key.


const db =  'local' // 'session',

vanillaDb.length(db)

db is the Database you stored data.

It’s February it’s New Month 🎈

Oluwaseyi Muyiwa — Sat, 01 Feb 2020 11:28:49 +0000

Happy new month friends, I hope January was awesomely filled with good moments 😊.

Today been the first day of February
I’m taking my time to share my plans and how I work so my followers can follow the timeline and So will be able to give my best in teaching the little I knew about software development.

MY TIMELINE:
I post weekly on my personal tech blog howtothese.xyz and I use dev.to too.

My focus is to teach absolute beginners the little I know, share tips and work on open projects.

If you are a web developer beginner Or just getting started with JavaScript you are free to drive in to my blog anytime and learn the little I’m willing to offer cause I know they might be helpful.

Friends it’s new month I wish you all the best 🎊🎉

Getting Started: Easy Way to Objects in JavaScript

Oluwaseyi Muyiwa — Mon, 27 Jan 2020 22:56:09 +0000

Almost Everything in JavaScript are objects, ranging from functions to object itself etc, except the primitive values.
Even some primitive values when called with the ‘new’ keyword will still return an object.

Math, RegExp, Date, function are all objects,
with the new keyword string, number, Boolean will also return an object.

In JavaScript objects controls almost everything, objects is the main route, the emperor of JavaScript, if you understand how objects works in and out, there’s chances you will understand how JavaScript works.

what are primitive values ?
Primitive values are values with no property and methods, In JavaScript Primitive values are not objects, they are immutable and hard coded value, which can’t be change.

Example of primitive values in JavaScript are string, numbers, Boolean, null, and undefined.

Let name = ‘John Doe’

Primitive data types
Are data that has a primitive value.

What are objects
Let take a glance through variables in JavaScript,
const pie = 3.14

JavaScript variable can only contain a single value, in this example the only value is 3.14, Objects are also variables.

Objects are variables that can contain more than one value, basically a collection of named values

Learning Vanilla Javascript in 2020 & others part 1

Oluwaseyi Muyiwa — Tue, 14 Jan 2020 22:35:51 +0000

"BECAUSE MODERN WEB DEVELOPMENT IS DOMINATED BY FRAMEWORKS -Market trend"

Obviously the trend here and there is that every developer most jump from writing vanilla javascript or any other programming languages majorly, to writing a framework because thats the market trend now.

What’s do you think about this trend ?

Comment your view below, you are all welcome 😊😊

TGIF 🎉🎊

Oluwaseyi Muyiwa — Fri, 10 Jan 2020 17:18:01 +0000

Thank God it’s Friday

Yeah it’s Friday friends, I know it has been a great week so far, A great week of new beginning, new projects, promotions at work or you just accomplish those tasks, 🤨
Cheers🍻

As we all Stay Happy learning those new things, pls don’t forget to always
Feel Good while you do More.
Smile 😁

Bind:(“TGIF”)

Five Reasons Why You Should Try Out Sveltejs

Oluwaseyi Muyiwa — Wed, 08 Jan 2020 23:30:58 +0000

svelte is relatively new in town, not new, but the new version seems new I bet you will like to try it out lol

hey devs, I almost agreed that all JavaScript use interface frameworks are all the same until I heard something about svelte, few days later I tried out the framework and see the strength of the JavaScript UI framework,

firstly, What is Svelte ?

Svelte is a JavaScript framework written by Rich Harris. Svelte applications do not include framework references. Instead, building a Svelte applications generates code to manipulate the DOM, which may give better client run-time performance.

Svelte is a JavaScript user interface framework that works exactly like a compiler which means you write your codes in svelte and, the framework help you compile your codes to vanilla JavaScript in other to manipulate the document objects (DOM).

This process seems little bit tricky, As we all known how react came into web development, which results in modern web development, web components and change how user interface works, in my own view svelte is not like React, nor Angular or Vue, Although some features still work the same, but I still view svelte as a new framework that does its job efficiently with difference.

I so much like the concept of how JavaScript works, the language is pretty much the language I can say I understand and willing to work with for sometimes, but yet with lots of passion put in, I still find working with react a bit difficult or clumsy.
The way react works is fine, awesome and very reactive but lots of works have to done before a react-app works just fine all this makes me feel like trying out another user interface framework that can make life more easier for me, it’s not bad at all then I tried out svelte and discover the strength of the framework.

Don’t get me wrong friends, JavaScript is not going any where, Angular Works fine same as Vue works pretty ok, and React been the boss of all, I’m not preaching then off all, JavaScript user interface frameworks works efficiently okay, but svelte is new in town, so relatively new that you should try out the framework awesomeness.

with my overview of the five reasons why you should consider trying out svelte, check out the framework strength, I will like to let you know that all the reason are all my overview and what I experienced so far from trying out the framework.
Here are my five reasons why you should consider trying out svelte

Svelte Works Differently
According to the speech by Harris rich and the descriptions including blog posts on svelte official website and the way svelte actually works, the flows and how things get done are totally different from other frameworks. The major difference between svelte and other user interface frameworks is that svelte compile your svelte codes into vanilla JavaScript.

Svelte is small and reactive enough
I can say with confidence in me that, svelte is reactive enough guys drive in and try out this framework.
Comparing svelte with other user interface frameworks I think svelte is relatively small in size and build faster.

Svelte is easy to start with
I can say with few minutes of your time you can quickly understand how svelte works and build something with the compiler framework as it’s easy to start with and grow over time, I’m not yet a expert in svelte but the framework is quite good, easy to start with and it’s promising.

Svelte is smooth with PWA
A lot of us have try building react-app using progressive web application techniques well, the concept with react, angular, vue and other user interface frameworks even vanilla JavaScript works fine, I won’t say much try and build PWA techniques with svelte and unveil the strength of the compiler framework.

Friends let make it interactive this time, comment below your view about sveltejs I have more to deliver on svelte thank you.

Javascript Arrays for Absolute Beginner

Oluwaseyi Muyiwa — Fri, 03 Jan 2020 14:01:41 +0000

Assuming we want to keep the record of available cookies in a grocery store, where we have multiple values of available cookies, we have lots of lollipops, ice-creams, vanillas and more all available in the store.
Assigning each available values to a variable is fine if we only have few available cookies in the store.

Let cookie1 = “strawberry-cookies”
Let cookie2 = “Stick-sweets”

All variables store each values of all the available cookies separately in the memory of the system, and makes our program more complicated and unclean.

What if we have more available cookies ? Then, we need an array, we need a collection of all the available cookies. An Array is basically the collection of values as explained.

Cookies = [“strawberry-cookies”, “Stick-sweets”, “Lollipop”, “Kolas“, “Pinky” ]

all the available cookies are all stored in a single variable name, they are stored and can access with their index.

Array are collection of values, An array is also a special variable, which can hold more than one value at a time.
In javascript array values are stored and accessed through the index, javascript is a zero based programming language so, in an javascript array the first value is stored on the 0 index.

Arrays are a special type of objects. The typeof operator in JavaScript returns “object” for arrays.
But, Javascript arrays are still best described as arrays.

Array in javascript have lots of built-in methods that makes the concept productive enough and fun to use.

Creating an Array in Javascript

To create an array in javascript we can use the new array keyword

let cookies = new Array(“strawberry-cookies”, “Stick-sweets”, “Lollipop”, “Kolas“, “Pinky”)

or we assign a square bracket to a variable, both way works fine but like this below is more efficient and clean

let cookies = [“strawberry-cookies”, “Stick-sweets”, “Lollipop”, “Kolas“, “Pinky” ]

As said earlier, everything in an array can be changed or manipulated thru its index, for example if we want to change the color pinky to ice-creams ?
we will have to access the value thru its index which is the 4th index of the cookies array

cookies[4] = ‘ice-creams’

Arrays can be used for lots of purposes in our program.

We have lots of built-in methods in javascript, let check them out and build a fun project.
Shalom