DEV Community: Natserract

Local Storage Running in Observer

Natserract — Sun, 14 Nov 2021 15:47:56 +0000

Called localStorageObserver this is a simple storage library for JavaScript, get inspire from localForage but running as Observer. This library support TypeScript, and EasyTo-Use.

Problems why created this library:

window.addEventListener('storage', () => {})

This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects. https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

How to use

To use localStorageObserver, just drop a single line into your app:

import localStorageObserver from 'local-storage-observer'

See more real example.

Download the latest localStorageObserver from GitHub, or install with npm:

npm install local-storage-observer

Configuration

You can set several configuration with the config() method. Avalaible options description, storeName, and version (use for future, currently isn't some affect in your app).

Example:

localStorageObserver.config({
  storeName: 'local_storage_observer',
})

Note: you must call config() before you interact with your data. This means calling config() before using get$(), or set$().

Get Item

Gets an item from the local storage and supplies the result to a subscriber. If the key does not exist, get\$() will return null.

localStorageObserver.get$(key).subscribe((next) => {
  console.log('Result', JSON.parse(next))
})

Note: localStorageObserver doesn't store the value null / undefined.

Set Item

Saves data to local storage.

localStorageObserver.set$(key, values).subscribe((next) => {
  console.log('Step two, set$', next)
})

You can store the following types of JavaScript objects:

Array
String
Number
Object

Remove Item

Removes the value of a key from the local storage.

localStorageObserver.remove$(key).subscribe({
  next: (message) => console.log('Message: ', message),
  error: (error) => console.error('Error: ', error),
})

Clear Item

Removes the value of a key from the local storage.

localStorageObserver.clear$().subscribe((message) => {
  console.log('Message: ', message)
})

Unsubscribe

Cleanup a subscription

useEffect(() => {
  ...

  return () => {
    localStorageObserver.destroySubscription$()
  }
}, [])

Install package on: https://www.npmjs.com/package/local-storage-observer

Realworld Redwood Firebase PostgreSQL Example

Natserract — Sat, 13 Nov 2021 08:03:36 +0000

Zero config fullstack apps with Redwood.js. In this project, show how to build fullstack apps with Redwood.js combined with Firebase for authentication and PostgreSQL DB. Check this source https://github.com/natserract/postfirewood

Infix, prefix, postfix. Is it Matter?

Natserract — Tue, 19 Oct 2021 06:49:01 +0000

When learning a programming language, of course there are some mandatory things that should not be missed, such as understanding syntax, data types, operators, etc. So in this article, I will discuss about operators.

Operator is actually just a symbol used to perform certain mathematical or logical operations. There are many types of operators, for example: (+), (*), (++). The fact that we will not be able to escape from mathematics in life, especially in mathematical programming language that is functional programming. As one mathematician blogger say:

"After my involving myself in the subject, one thing that stands out is the relatively low distance between thought expressed in my ordinary day-to-day mathematical discourse, and thought expressed in Haskell code."

Most of the time we write mathematical expressions like this:

> 2 + 3

This is a common method used both in programming languages and in schools. If you look at the code above, the position of the operator (+) is in the middle operand, this is in accordance with the principle The main point of fp is that the value of an expression depends only on the value of its sub-expression.

Infix

Infix is basically just a method used to perform an operation, where the operator position is placed between the operands, for example like this:

λ> 3 + 5 * 2

That's operation is actually interpreted as "First multiply 5 * 2, then add the result by 3, then the final result is 13". Here some questions begin to arise, why the first operation evaluated is `() first, not (+)? Shouldn't the result be 3+5=8*2=16`??*

Ok, the answer is because all these operators have their own priority, in this table 9 is the highest. I found this out while reading fixity declarations on haskell.

+--------+----------------------+-----------------------+-------------------+
| Prec-  |   Left associative   |    Non-associative    | Right associative |
| edence |      operators       |       operators       |    operators      |
+--------+----------------------+-----------------------+-------------------+
| 9      | !!                   |                       | .                 |
| 8      |                      |                       | ^, ^^, **         |
| 7      | *, /, `div`,         |                       |                   |
|        | `mod`, `rem`, `quot` |                       |                   |
| 6      | +, -                 |                       |                   |
| 5      |                      |                       | :, ++             |
| 4      |                      | ==, /=, <, <=, >, >=, |                   |
|        |                      | `elem`, `notElem`     |                   |
| 3      |                      |                       | &&                |
| 2      |                      |                       | ||                |
| 1      | >>, >>=              |                       |                   |
| 0      |                      |                       | $, $!, `seq`      |
+--------+----------------------+-----------------------+-------------------+

The table above relates to the order in which operations will be evaluated first.

After seeing how the priority/precedence/precedence is for each of the operators above, this time the case is slightly different, namely by adding brackets ( )

λ> (3 + 5) * 2

That's operation mean's "first add 3 and 5, then multiply by 2, then the final result is 16. The question arises again, instead of `() having priority 7 > 6 (+)`??*

Ok, this is because infix notation has a rule that if there is a parenthesis ( ) then the highest priority is ( ) which is worth 13. So the result is 16.

Prefix (aka Polish)

Prefix otherwise known as "Polish notation", where the position of the operator is written before the operand. The expression is like this /* A + B C D. Take a look at the code below:

> (+) 3 5 * 2

In the prefix operation, evaluation is carried out from left to right, based on the two values closest to the right. If you refer to the code above, it means "first add 3 and 5, then multiply by 2, then the final result is 16". The first evaluation occurs at (3 + 5) because these two numbers are close to each other, just multiply by 2."

I give another case, an example of an expression like this + * 2 10 / 14 2. Evaluation happens "First multiply 2 and 10, divide 14 by 2, last 20 + 7 = 27".

By the way the prefix notation doesn't support brackets ( ), so it won't have any effect. Haskell has no prefix operators, with the exception of minus (-), which is both infix and prefix.

Postfix (aka !Polish)

Postfix is called "reverse polish notation", where the operator is at the end of the operand. This notation is used in several old programming languages such as Forth and Postscript . Take a look at the code below:

λ> (!) :: Bool -> Bool
λ> (!) = not
λ> (True !)

In haskell itself to support postfix operators, yo've to use syntax extensions on GHC, so you don't get scolded by the compiler.

Yes, that's 3 kinds of notation used in writing expressions. Although prefer to infix syntax because it is easier to read, each has its own purpose and purpose. This article is important for you, especially those who are learning functional programming, where mathematics happens everywhere.

But most importantly, I hope this article is useful, Thanks!

Functional Programming in Rust

Natserract — Sun, 22 Mar 2020 00:55:44 +0000

A month ago when I first developed a non-commercial project using ReasonML, I got a new experience, is a functional programming. This language is an alternative syntax from OCaml. OCaml itself is a purely functional language, the features offered are interesting. For example: type inference, strongly type system, algebraic datatypes, and many more. Interesting right?

Now after trying that, I began to interest functional programming. Finally i tried to implement the functional paradigm in a different language, namely Rust.

Introduction

Functional programming (FP) is a programming paradigm which allows us to write expressive, concise, and elegant code. Functional programming also helps developers to manage code so that it doesn't DRY (Don't Repeat Yourself) that's mean doesn't write the same code over and over again. Other functional languages for example like Lisp, Clojure, Erlang, Haskell, R, and many more.

Okay, but why Rust?

The question is, is a Rust functional language? the answer is, no. Although Rust himself was inspired by ML family of language, Rust it's not functional. But fortunately Rust has several features that are similar to other functional languages, such as: algebraic datatypes, expressive types, and others.

Tables of Contents

Primitive Types
Closures
Currying
Higher Order Functions(HOF)
Lazy evaluations

Primitive Types

In order not to jump right away, it would be nice if we had to know several data types in Rust. This also applies to all programming languages.

Booleans

The most basic datatype is the simple true / false value, in Rust it's called bool

let x = true;
let y: bool = false;

Char

The char data type has a single Unicode value. We can use char data type with a single tick (')

let x = 'x';
let two_hearts = '💕';

Unlike some other languages, char in Rust is not one byte, but four.

Numeric Types

Rust has several numeric type category variants, such as signed(i) and unsigned(u), fixed size (8, 16, 32, 64) and variable(isize, usize) types.

let x = 42; // `x` has type `i32`.
let y = 1.0; // `y` has type `f64`.

Arrays

Like many other programming languages, Rust also has an array data type. By default, arrays in Rust can't be changed. Unless you initialize it with mut

let a = [1, 2, 3]; // a: [i32; 3]
let mut m = [1, 2, 3]; // m: [i32; 3]

Functions

Functions also have data types! For example like:

fn foo(x: i32) -> i32 { x }
let x: fn(i32) -> i32 = foo;

In this case, the foo () function has a return type numeric: i32, and returns the valuex.

For more information, you can check here: primitive types

Closures

Closure is a mechanism by which an inner function will have access to the variables defined in its outer function’s lexical scope even after the outer function has returned. Up to here understand? in short closures is an inner function that has access to retrieve a value throughout the scope both inside and outside.

fn fmt(prev_str: &str) -> String {
    let mut new_str = String::new();

    let closure_annotated = |next_str| -> String {
        new_str.push_str(prev_str);
        new_str.push_str(next_str);
        return new_str;
    };

    closure_annotated("dolor sit amet")
}

let r_txt = "Lorem ipsum ";
assert_eq!("Lorem ipsum dolor sit amet", fmt(r_txt));

In this case, in new_str.push_str () section where closure_annotated accesses thenew_str variable then changes the value.

Currying

Currying is a process in functional programming in which we can transform a function with multiple arguments into a sequence of nesting functions. It returns a new function that expects the next argument inline.

#[derive(Debug)]
struct States<'a> {
    a: &'a i32,
    b: &'a i32,
}

trait Currying {
    type ReturnType: Fn(i32) -> i32;
    fn add(self) -> Self::ReturnType;
}

impl Currying for States<'static>{
    type ReturnType = Box<dyn Fn(i32) -> i32>;

    fn add(self) -> Self::ReturnType {
        Box::new(move|x| {
            x * self.a
        })
    }
}

let r_value: States = States {
    a: &100,
    b: &100
};

let r1 = r_value.add();
let r2 = r1(5);

assert_eq!(500, r2);

There are 2 parameters here, namely a,b where each has a numeric data type, then in trait section is a function interface, a place for initializing functions. These traits are similar to typescript interfaces.

Higher Order Functions(HOF)

Higher order functions are functions that use other functions as parameters or as a result of returns.

fn map<F>(arr: &[i32], func: F) -> Vec<i32> where F: Fn(&i32) -> i32{
    let mut new_array: Vec<i32> = vec![];
    for i in arr.iter() {
        new_array.push(func(i))
    }

    return new_array
}

let lists = vec![1, 4, 9, 16];
let result = map(&lists, |i| *i + 2);

assert_eq!(vec![3, 6, 11, 18], result)

So func andmap are higher order functions, where this function is used to change every contents of an array. The return result is a new array of the same length as the modified originalArray.

Lazy Evaluation

Lazy evaluation or non-strict evaluation is a process of holding the evaluation of an expression/function until the value is needed. The goal is to avoid repeated evaluations.

struct State {
    x: i32,
}

trait Lazy {
    fn add(&self) -> i32;
    fn multiply(&self) -> i32;
    fn add_or_multiply(&self, add: bool) -> i32;
}

impl Lazy for State {
    fn add(&self) -> i32 {
        println!("executing add");
        &self.x + &self.x
    }

    fn multiply(&self) -> i32 {
        println!("executing multiply");
        &self.x * &self.x
    }

    fn add_or_multiply(&self, add: bool) -> i32 { 
        match add {
            true => self.add(),
            false =>  self.multiply(),
        }
    }
}

let val: State = State {
    x: 20
};

assert_eq!(40, val.add_or_multiply(true));
assert_eq!(400, val.add_or_multiply(false));

Functional programming (FP) provides many advantages, and its popularity has been increasing as a result. However, each programming paradigm comes with its own unique jargon and FP is no exception. By providing a glossary, i hope to make learning FP easier✌️

Source code: rustfp.github

Design Patterns: Vue feels like React - TypeScript 🔥

Natserract — Sat, 30 Nov 2019 13:04:07 +0000

Cover photo by Ricardo Gomez Angel on Unsplash.

When you first want to learn about a front-end technology, you will be confused by the many choices of tools, for example React, Vue, Angular, Svelte, etc. Of course we will not know if we do not try one of these, certainly all of these technologies have their pros and cons.

But in this article, we will not discuss which is the best, but we will discuss about how react developers can easily master these two frameworks (React & Vue), with the same pattern.

So, this is a long journey! Prepare yourself! 😃

Setting Up Project

First we have to do is set up the project, let's start by creating a directory structure first.

1. The root directory structure

There are containers and presentational folders in the components folder. The difference is, the presentational component focuses on the UI element, while the container component which regulates the logic / storing data part, which will be displayed in the component container.


    ├── src
    | ├── assets
    | ├── components
    |   ├── container
    |   ├── presentational
    ├── redux
    | ├── action
    | ├── reducer
    ├─

You can freely set the directory structure that you like, this is my directory structure for creating projects

2. Use jsx & typescript

So, let's start by installing some of the dependencies that are needed. We can do this with type the following command:

npm i --save-dev typescript babel-preset-vca-jsx
npm i --save-dev @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime 
npm i --save-dev @babel/preset-typescript @types/webpack-env source-map-loader 
npm uninstall babel-plugin-transform-runtime

We need to uninstall this package babel-plugin-transform-runtime, because we have installed the latest version @babel/plugin-transform-runtime

And then, we have to set some additional config because some dependencies require a supported Babel version

Note: I happen to use this boilerplate: Vue Webpack Template you can choose any boilerplate.

Update your babel core dan babel loader

npm i --save-dev babel-core@^7.0.0-0 babel-loader@^8.0.6 
npm i --save-dev @babel/core@^7.6.4 @babel/preset-env@^7.6.3

After installing all dependencies, we have to set additional config on .babelrc open the file, then add config .babelrc we also need to set the webpack loader webpack config

Note: For typescript loader, you can use Awesome TypeScript Loader

And don't forget, you also need to add some config in.eslintrc.js

rules: {
    'import/extensions': ['error', 'always', {
      jsx: 'never',
      ts: 'never',
      tsx: 'never'
    }],
}

And next, create new file tsconfig.json and follow this config tsconfig.json

Note: If you wanna using TSLint, you can follow this step configuring TSLint

After all config has been added, hooray! it's time to replace all your project file extensions from .jsx/.js to .tsx/.ts

3. Installing additional dependencies

npm i --save @vue/composition-api vuejs-redux redux @types/redux

Main Concept

As very popular front-end tools, both of these tools have the same features, such as two-way data-binding, templating, routing, components, dependency injection, and many more.

Similar but not the same, there are some differences between these two tools, namely in terms of writing syntax, rendering components, managing state and data. Therefore, in this section we will peel one by one how to implement the react pattern in vue.

Components and Props

Components are special types of instructions such as JavaScript functions that will be displayed as separate parts and can be reused.

Here I use Vue.component and createComponent (vue composition api) you can use both

In rendering a component, the two are very different. React defines components as classes or functions, while Vue defines components as objects.

export default createComponent({
    name: 'ComponentProps',
    props: {
        name: String,
        authorName: Array as () => string[]
    },
    setup(props) {
        return () => (
            <div className="components-props">
                <h2>{props.name}</h2>
                <p>{props.authorName}</p>
            </div>
        )
    }
})

We no longer need to use template again, just JSX like React 🙂

render () {
  return (
      <ComponentProps 
         name="Your name here" 
         commentId={['Name1', 'Name2']} 
      />
  )
}

Conditional Rendering

Conditional rendering works the same way like conditions work in JavaScript, we can use ternary or conditional operator.

export default createComponent({
    name: 'ConditionalRendering',
    props: {
        show: Boolean
    },
    setup(props) {
        return () => props.show ? <p>True Condition</p> : <p>False Condition</p>
    }
})

render() {
   return <ConditionalRendering show={false}/>
}

Handling Events

In Vue JS, when handling events, vue gives us directions for using v-on directive to handle these events. Since we already use JSX, so we don't need that anymore, we can use the JSX attribute like in React :)

export default createComponent({
    setup(props) {
        return () => (
            <button onClick={props.handleButtonClick}>
                Click Event
            </button>
        )
    },
    props: {
        handleButtonClick: Function as () => void
    }
})

render () {
  return (
       <HandlingEvent 
          handleButtonClick={() => alert("Click event. This works!")} 
       />
  )
}

Children in JSX

Children is a component that is used to display anything that you include between the opening and closing tags when calling the component.

In order to access this component, we can use slots function to be used as a content distribution outlet.

export default Vue.component('Children', {
    render() {
        return (
            <div className="children">
                {this.$slots.default}
            </div>
        )
    }
})

render () {
  return (
     <div className='container'>
        <Children>
          {/* what is placed here is passed as children */}
        </Children>
     </div>
  )
}

Lifecycle & Hooks

Lifecycle is a method that regulates the stages of the lifecycle in a component, and has their respective uses

setup: is called right after the initial props resolution when a component instance is created. Lifecycle-wise, it is called before the beforeCreate hook.
onBeforeMountfunctions that are executed before the rendering process is run.
onMountedfunction that are called only once after the first rendering is done. Usually this function is used for performing any side-effect causing operations such as AJAX requests.
onUnmountedfunction that are executed to eliminate or delete a component from DOM.

import {
    createComponent,
    reactive as useState,
    onBeforeMount as componentWillMount,
    onMounted as componentDidMount,
    onUnmounted as componentWillUnmount
} from '@vue/composition-api';

const LifecycleHooks = createComponent({
    setup() {
        const state = useState<{ loading: boolean, users: object }>({
            loading: false,
            users: []
        })

        componentWillMount(() => {
            console.log("Component before mount")
        })

        componentDidMount(() => {
            const API_URL = 'https://jsonplaceholder.typicode.com/users'
            fetch(API_URL)
                .then(res => res.json() as Promise<any>)
                .then(data => {
                    state.users = data,
                        state.loading = !state.loading;
                })
                .catch((err: Error) => {
                    throw err
                })
            console.log("Component Mounted")
        });

        componentWillUnmount(() => {
            console.log("Component Will Unmount")
        })

        return () => (
            <div className="lifecycle-hooks">
                {state.loading ? JSON.stringify(state.users) : <span>Loading...</span>}
            </div>
        )
    }
})

export default LifecycleHooks

Yes, I used as ... for importing the module, this is only the naming, so it looks the same as the method name in React

reactive function is the equivalent of Vue 2's Vue.observable() it will return a new object that looks exactly the same as obj, and returns a reactive proxy of the original.
watch function expects a function. It tracks reactive variables inside, as the component does it for the template. When we modify a reactive variable used inside the passed function, the given function runs again.

import {
    createComponent,
    reactive as useState,
    watch as useEffect
} from '@vue/composition-api';

const LifecycleHooks = createComponent({
    setup() {
        const state = useState<{ count: number }>({
            count: 0
        })

        /* => Re-run it whenever the dependencies have changed */
        useEffect(() => state.count, (nextState, prevState) => {
            console.log(nextState, '<= this is nextState')
            console.log(prevState, '<= this is prevState');
        })

        return () => (
            <div className="lifecycle-hooks">
                <button onClick={() => state.count++}>
                    Update Value
                </button>
            </div>
        )
    }
})

Redux & Vue

Surely you must already know what is Redux ?, yes you're right! Redux is an Agnostic State Management Library framework for Javascript Apps. Not like Vuex, redux can be used in any framework.

Redux has 4 main concepts: reducers, actions, action creators, and store. In Redux states are immutable and pure functions. Here are some things to know more about redux in vue:

Actions

Actions are simple Javascript objects that represent payloads of information that send data from your application to your store. Actions have a type and an optional payload.

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const RESET = 'RESET'


export const increment = () => {
    return { 
        type: INCREMENT 
        // your payload here
    }
}

export const decrement = () => {
    return { 
        type: DECREMENT 
    }
}

export const reset = () => {
    return { 
        type: RESET 
    }
}

Reducers

Reducers specify how the application's state changes in response to actions sent to the store. Reducers can then be combined to one root reducer to manage all of your applications state.

type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' } | { type: 'RESET' };

const Counter = (state: number = 0, action: Action) => {
    switch (action.type) {
        case 'INCREMENT': {
            return state + 1;
        }
        case 'DECREMENT': {
            return state - 1;
        }
        case 'RESET': {
            return state
        }
        default: return state
    }
}

export default Counter

Using combineReducers to calls all reducers when dispatching an action in one root reducer function. It's very useful:)

import { combineReducers } from 'redux'
import userReducer from './reducer/user.reducer'

export default combineReducers({
    user: userReducer
    // your another reducer here
})

Store

A store is a place where you store the state of your application. Store, holds the whole state tree of your application that refers to the object with a few methods on it together. There is only a single store in a Redux application.

import Vue from 'vue'
import { createStore } from 'redux'

import Provider from 'vuejs-redux';
import RootReducer from './rootReducer'

const store = createStore(RootReducer);

export default Vue.component('Provider', {
    render() {
        return (
            <Provider 
                mapStateToProps={this.mapStateToProps} 
                mapDispatchToProps={this.mapDispatchToProps} 
                store={store}> 
                {this.$scopedSlots.default}
            </Provider>
        )
    },

    props: ['mapStateToProps', 'mapDispatchToProps'],

    components: {
        Provider
    }
})

We can also create a custom provider that receive mapStateToProps and mapDispatchToProps as props and importing the store and passing it to every Provider.

import Vue from 'vue';
import ContextConsumer from './redux';
import * as actions from './redux/action/user.action';

import ComponentContainer from './components/container/component-wrap';

export default Vue.component('App', {
  render() {
   return (
      <ContextConsumer 
          mapStateToProps={this.mapStateToProps} 
          mapDispatchToProps={this.mapDispatchToProps}>
            {({ incrementAction, userData }) => (
                <ComponentContainer>
                    <SingleComponent
                      value={userData.user}
                      handleClick={incrementAction} 
                    />
                </ComponentContainer>
            )}
      </ContextConsumer>
    )
  },

  components: {
    ContextConsumer
  },

  methods: {
    mapStateToProps(state) {
      return {
        userData: state
      }
    },
    mapDispatchToProps(dispatch) {
      return {
        incrementAction: () => dispatch(actions.increment())
      }
    }
  }
})

Higher-Order Components

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.

If you understand the concept of higher-order functions (HOF), of course it will be very easy to make HOC, because HOC is an implementation of HOF :)

import Vue from 'vue'

const useDataFetchingHOC = (WrappedComponent: JSX.IntrinsicElements) => (urlParam: string) => {
    return Vue.component('HOCFetch', {
        data: () => ({
            fetchData: null
        }),
        mounted: function() {
            fetch(urlParam)
                .then(response => {
                    if (!response.ok) { throw new Error(response.statusText) }
                    return response.json() as Promise<any>;
                })
                .then(data => this.fetchData = data)
                .catch((err: Error) => {
                    throw err
                })
        },

        render(createElement) {
            return !this.fetchData ? createElement('span', 'Loading Fetch...') :
                createElement(WrappedComponent, {
                    attrs: this.$attrs,
                    props: this.$props,
                    on: this.$listeners
            })
        }
    })
};

export default useDataFetchingHOC

import { createComponent } from '@vue/composition-api'
import useDataFetchingHOC from '../presentational/hoc-component'

const dataSourceUrl = "https://jsonplaceholder.typicode.com/users";

const ContentSite = createComponent({
    setup() {
      return () => (
        <div className="content">
          <p>Yes, i'm in HOC</p>
        </div>
      )
    }
  })

export default useDataFetchingHOC(ContentSite)(dataSourceUrl)

Thanks For Reading

Thanks for reading, i hope you have enjoyed this article, and that it gave you some sort of inspiration for your own work. To be sure, Vue and React are very cool front-end tools, and are in great demand by many users. So, keep trying and learning new things, and don't forget always trust yourself! 😎

The complete source code for this project is available at Gitlab.