Forem: Brama Udi

Add vite-plugin-pages to SolidJS

Brama Udi — Wed, 26 Jan 2022 03:39:03 +0000

Since official SolidJS starter template are vite-based we can easily use vite-plugin-pages to create automatic routing a.k.a file based routing with official solid-app-router package.

First create a new project by running these commands in your terminal:

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

Or for TypeScript:

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

Then install the router dependencies:

> npm i solid-app-router
> npm i -D vite-plugin-pages@v0.18.2

Configure vite.config.js:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
+ import Pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
+    Pages({
+      react: true,
+      importMode: 'async',
+    }),
    solidPlugin()
  ],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
});

Then src/index.jsx:

import { render } from "solid-js/web";
import { Router } from "solid-app-router";
import App from "./App";

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("root")
);

And finally src/App.jsx:

import { useRoutes, Link } from "solid-app-router";
import { lazy } from "solid-js";
import routes from 'virtual:generated-pages'

export default function() {
  const Routes = useRoutes(routes.map(route => ({
    ...route,
    component: lazy(route.component)
  })));
  return (
    <>
      <h1>Solid App</h1>
      <ul>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/about">About</Link></li>
      </ul>
      <Routes />
    </>
  );
}

Note: use vite-plugin-pages v0.18.2, the greater version contains breaking changes and the Solid implementation seems more complicated. :/

Still using jQuery, even if you can create your own if you want?

Brama Udi — Mon, 22 Jun 2020 10:29:00 +0000

Thanks to jQuery for making our pass time lot easier, but you might not need jQuery for now, it's not deprecated anymore but it was completely outdated.

I remember the time when jQuery was become a very popular JS Framework, most of Javascript user using it, i almost always founded Javascript tutorial covered with jQuery, it's good at that time but not for nowadays.

What's the problem?

You must stop using jQuery, but why? It's really helpful to me? I thought you even know that, that's outdated and with just using a native API of Javascript it can be done.

But how if i was written an complex app with it? Or i want to work again with my old project? Should i rewrite from scratch? If like so then what do you need is just write your own jQuery. Fortunately this is can be really simple 😁

I'll show you how simple it was, as example we can make jQuery $ selector with native JavaScript API, like this:

const $ = (q) => document.querySelector(q)

Then try to find element using CSS selector like what we do in jQuery like $('.box') and it's work perfectly.

But if you can realize, we can't get all of the whole elements if there is more than one .box classed div, to fix that change the querySelector to querySelectorAll, the return will give you a list of founded node as object.

const $ = (q) => document.querySelectorAll(q)

How about the Function?

In jQuery we have a lot of "helper" function to manipulate the DOM, we can also do that too.

To extend our own simple jQuery code we need to wrap it in a class and define the selector by creating the class instance using a function.

Let's move to the real part of making your own jQuery:

class ownJQ {
  constructor(q) {
    const el = document.querySelectorAll(q)
    el.forEach((node, index) => this[index] = node)

    this.length = el.length
  }

  toggle(className) {
    for (let i = 0; i < this.length; i ++) {
      this[i].classList.toggle(className)
    }

    return this
  }
}

Then lets define the selector function, you can freely choose the selector variable but for similarity purpose i use $ sign:

const $ = (q) => new ownJQ(q)
// Return result:
// ownJQ {0: div.box, 1: div.box, 2: div.box, length: 3}

Now our own jQuery has ready to use, to prove that work as expected lets testing our toggle function, what this function do is toggle the founded elements with the given class name.

$('.box').toggle('bg-red')
// Return result:
// ownJQ {0: div.box.bg-red, 1: div.box.bg-red, 2: div.box.bg-red, length: 3}

That's cool, but how it's work?

I designing the class API as similar as the jQuery do, at first after we defined the ownJQ class we need to find all the target element inside the constructor function.

constructor(q) {
  // Find element by query
  const el = document.querySelectorAll(q)
  // Push founded node element to class itself
  // with their index number as key
  el.forEach((node, index) => this[index] = node)

  // All elements total
  this.length = el.length
}

constructor is class built-in function that run when the class instance is on creation

toggle(className) {
  // Iterate all element
  for (let i = 0; i < this.length; i ++) {
    // Do toggle class to each node
    this[i].classList.toggle(className)
  }

  // Return the class itself,
  // make it work with chaining function
  return this
}

Hopefully this actually as simple as i said, and this is for bonus:

// You can try this at home
text(v) {
  let texts = []
  for (let i = 0; i < this.length; i++) {
    v ? this[i].innerText = v : texts.push(this[i].innerText)
  }

  return v ? this : texts
}

I think it's better then rewrite your whole project especially if you're lazy people like me, but i strongly recommended to you by rewriting your old project with new technology then you can learned new things from it.

Here's the example & source code:

Source: https://repl.it/@bramaudi/YourOwnJQuery
Demo: https://yourownjquery--bramaudi.repl.co/

Basic Routing & Auth in React

Brama Udi — Fri, 19 Jun 2020 23:45:59 +0000

In this articles i'm using CRA (create-react-app) to create React project.

npm init react-app ProjectName
# or
npx create-react-app ProjectName
# if using yarn
yarn create react-app ProjectName

Install Dependency

The project created by CRA is just only contains React core so if we want to do routing we'll need to install a package called react-router-dom.

npm i react-router-dom
# or
yarn add react-router-dom

Router Configuration

I'm usually make a seperate folder called router to handle all my routing files, so let create this inside our src dir.

After that we will create an index.js file inside router folder then paste this;

// src/router/index.js
import React, { Suspense, lazy } from 'react'
import { Switch, Route } from 'react-router-dom'

// navigation guard / middleware
import { PrivateRoute } from './_private'
import { GuestRoute } from './_guest'

// Preloading component
const Loading = () => <h1>Loading ...</h1>

// Import helper func
const views = (path) => {
    return lazy(() => import(`../views/${path}`))
}

// route list
const routes = [
  {
    path: '/',
    component: 'index'
  },
  {
    path: '/login',
    component: 'login',
    guest: true
  },
  {
    path: '/secret',
    component: 'secret',
    private: true
  },
  {
    path: '404', // 404 fallback
    noExact: true, // all route "exact" by default
    component: '404'
  }
]

const router = () => (
  <Suspense fallback={<Loading />}>
    <Switch>
      {routes.map((route, index) => {
        if (route.path !== '404') {
          if (route.private) {
            return route.noExact ?
            <PrivateRoute key={index} path={route.path} component={views(route.component)} /> :
            <PrivateRoute key={index} exact path={route.path} component={views(route.component)} />
          }
          else if (route.guest) {
            return route.noExact ?
            <GuestRoute key={index} path={route.path} component={views(route.component)} /> :
            <GuestRoute key={index} exact path={route.path} component={views(route.component)} />
          }
          else {
            return route.noExact ?
            <Route key={index} path={route.path} component={views(route.component)} /> :
            <Route key={index} exact path={route.path} component={views(route.component)} />
          }
        } else {
          return <Route key={index} component={views(route.component)} />
        }
      })}
    </Switch>
  </Suspense>
)

export default router

In the code above we importing Suspense and lazy module, this is useful for lazy loading / code-splitting our React component for performant purpose and it also will displaying a loading placeholder component at loading time.

With the configuration like that we will have something like route rules like this;

Prop. Name	Required	Value	Info
path	✓	String	Router URL
component	✓	String	Views component
private	×	Boolean	Only logged user can access
guest	×	Boolean	Only guest can access
noExact	×	Boolean	All routes all exact by default, so it can be optional for specified use

To make the navigation guard work as expected we have to make a middleware for the private route and guest-only route.

So create a file named _private.js;

// src/router/_private.js
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import Auth from '../store/auth'

const FALLBACK = '/login'

export const PrivateRoute = ({ component: Component, ...rest}) => {
    return (
        <Route
            {...rest}
            render={props => {
                if (Auth.state.logged) {
                    return <Component {...props} />
                }
                else {
                    return (
                        <Redirect to={{
                                pathname: FALLBACK,
                                state: {
                                    from: props.location
                                }
                            }}
                        />
                    )
                }
            }}
        />
    )
}

and create file named _guest.js too then paste the code above but with these following changes;

- if (Auth.state.logged) {
+ if (!Auth.state.logged) {

- const FALLBACK = '/login'
+ const FALLBACK = '/secret'

- export const PrivateRoute = ({ component: Component, ...rest}) => {
+ export const GuestRoute = ({ component: Component, ...rest}) => {

Store Configuration

Here the store are plain javascript where used to handle auth state variable that will be global state.

I'm personally use folder named store to store all my "state-handle file", do the same thing with auth.js;

// src/store/auth.js
const state = {
    logged: !!localStorage.getItem('token')
}

const actions = {
    login: () => {
        return new Promise((resolve, reject) => {
            localStorage.setItem('token', JSON.stringify({
        // In real world token is obtained from api request
                token: 'abcdef321654'
            }))
            resolve()
        })
    },

    logout: () => {
        return new Promise((resolve, reject) => {
            localStorage.removeItem('token')
            resolve()
        })
    }
}

export default { state, actions }

Views Component

Now we should write the views components where these will be a our pages display, all these files are located in views dir;

index.js

import React from 'react'

const Index = () => <h1>Index Page</h1>

export default Index

login.js

import React from 'react'
import Auth from '../store/auth'

const handleLogin = (props) => {
    Auth.actions.login().then(
        () => {
            props.history.push('/secret')
        }
    )
    .catch(
        () => alert('Login failed')
    )
}

const Login = (props) => (
    <div>
        <h1>Login Page</h1>
        <button onClick={() => handleLogin(props)}>Login</button>
    </div>
)

export default Login

secret.js

import React from 'react'
import Auth from '../store/auth'

const handleLogout = (props) => {
    Auth.actions.logout().then(
        () => {
            props.history.push('/login')
        }
    )
}

const Secret = (props) => (
    <div>
        <h1>Secret Page</h1>
        <button onClick={() => handleLogout(props)}>Logout</button>
    </div>
)

export default Secret

Ok, save all and run the project.

npm run start # or "yarn start"

Because we didn't make a navigation links, so we've to manually navigate between the pages by editing the url in address bar to test the route XD

Our project structure should look like this;

├── package.json
├── public # your static content
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
└── src # our working directory
    ├── App.css
    ├── App.js
    ├── index.js
    ├── router # routing files
    │ ├── _guest.js
    │ ├── index.js
    │ └── _private.js
    ├── serviceWorker.js
    ├── setupTests.js
    ├── store # state
    │ └── auth.js
    └── views # views component
        ├── index.js
        ├── login.js
        └── secret.js

Some of React testing files like App.test.js, App.css, are not included.

I also have created the repo for this, you can visit the link in down below for more practice:

https://github.com/bramaudi/react-boilerplate

Fix MySQL Cant Logged As Normal User

Brama Udi — Tue, 16 Jun 2020 15:48:32 +0000

Problem: User "root" can't logged in normal terminal, but can login on super user terminal only a.k.a sudo.

Solution:

1.) Login as sudo.

sudo mysql -u root

2.) Check if root user is exists (actually this is optional).

SELECT User,Host FROM mysql.user;

3.) Delete root user in MySQL.

DROP USER 'root'@'localhost';

4.) Create the root user again.

CREATE USER 'root'@'%' IDENTIFIED BY '';

5.) Setup permission for the new user.

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';

FLUSH PRIVILEGES;

Logout from MySQL (quit) then try login back with normal terminal user, it should be fixed.

Enabling Mouse Middle Click Emulation in Linux

Brama Udi — Sun, 14 Jun 2020 12:26:05 +0000

What i mean about "Middle Click Emulation"? Hmm, this is like a feature that allow you to emulate a middle click when pressing left and right buttons simultaneously, really good if you hate/have broken mouse wheel click.

As i remember some Linux like "Linux Mint" enable it by default, but if you try on your current Linux OS and it doesn't work then follow these step to enable.

Prerequisite

xinput installed, i.e. if you are on Debian you can install it with apt package manager when don't have it, apt-get install xinput.

Steps

1.) Find your mouse device ID

xinput

In my case the mouse ID are 8

2.) Find mouse "emulate" props ID

xinput list-props 8

In result above we've found props ID for Emulate Middle Click is 265 and they still have a 0 value.

3.) To enable it lets change the Emulate Middle Click value to 1

xinput set-prop 8 265 1

Thats all, you can place the last command xinput set-prop 8 265 1 to $HOME/.profile or $HOME/.bashrc file for persistent changes after reboot.

UPDATE: Recently i use GNOME desktop environment and use Wayland session, the xinput's result keep showing me some virtual devices like this

... and of course make the tutorial above is meaningless, then the solution here is just paste the command below:

gsettings set org.gnome.desktop.peripherals.mouse middle-click-emulation true

Reference:

libinput-force-middle-click-emulation

Rating Algorithm + Example written in JS, PHP, and Go

Brama Udi — Sun, 14 Jun 2020 10:09:29 +0000

As we know Rating are used to make a feedback between developer and user or something similar, i thinks that was the best way to ask people about how the feel do you experience when using the product, it's simple and easy to understand for both devs & user.

Math

The logic behind rating system is quite simple as this:

rating = quantity / sum total

For more explanation i have create some condition to simulate the rating usage in real life;

Example: There is a guy who sell a fried rice, he want to ask his customer about the food taste, he take a survey for 10 of his customer to rate between 1 to 5 point.

Then the result is:

4 3 3 4 2 5 2 3 5 1

Then we can get the rating result by counting like this;

A = 4 + 3 + 3 + 4 + 2 + 5 + 2 + 3 + 5 + 1
B = 10
rating = A / B

Explain: A is addition of each rate quantity, so in this case A will have value 32 while B is a rate quantity itself then the value is 10, and rating value are the result of divided value of A and B which is give a result 3.2.

Just Show Me The Code

Ok, don't waste your time by reading my ~shit~ explanation while you're getting more understand with just reading the code. :)

JavaScript:

const rates = [4, 3, 3, 4, 2, 5, 2, 3, 5, 1]

let total = 0
rates.forEach(data => {
  total += data
})

const qty = rates.length
const rating = total / qty

console.log("Rating Result:", rating) // Rating Result: 3.2

PHP:

$rates = array(4, 3, 3, 4, 2, 5, 2, 3, 5, 1);

$total = 0;
foreach ($rates as $data) {
  $total += $data;
}

$qty = count($rates);
$rating = $total / $qty;

echo 'Rating Result: ' . $rating; // Rating Result: 3.2

Go:

package main

import "fmt"

var rates = []int{4, 3, 3, 4, 2, 5, 2, 3, 5, 1}

func main() {

    var total int = 0
    for _, data := range rates {
        total += data
    }

    var qty int = len(rates)

    // The function float64() is needed
    // to convert decimal number of result 
    var rating float64 = float64(total) / float64(qty)

    fmt.Printf("Rating Result: %.1f\n", rating) // Rating Result: 3.2
}