DEV Community: Cicada0315

Part 2: React-Redux

Cicada0315 — Wed, 16 Jun 2021 19:22:08 +0000

Let's actually make a new react app and go one by one to learn how to use redux with react.

Install

//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >

//(optional) install Yarn
$ npm install --global yarn

//install redux  
$ npm install redux
$ npm install react-redux

Useful tools

Redux DevTools,
https://github.com/zalmoxisus/redux-devtools-extension
React Developer Tools,
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko

Short Explanation for each library

import { createStore } from 'redux'

import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer])

It creates store and returns that store. For more details for createStore or reducer use my first blog.
Link: https://dev.to/cicada0315/part-1-redux-1mi5

import { Provider } from 'react-redux'

Using component makes the Redux store available to any child components. In other word, it Enables to access store and dispatch actions from any component. You can simply think that it can pass store as props to the child components. Most of time the will render at the top level so that everyone can have access for store.

import { Provider } from 'react-redux'
  <Provider store={store}>
  </Provider>,
)

import { connect } from 'react-redux'

To gain access to the store somewhere in our component we have to use this connect.

import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);

connect(): It's a function connects a React component to a Redux store.
mapStateToProps(aka mapState): It's a function takes a first argument called state, optionally a second argument called ownProps, and return a plain object which become a props for your component.
This function is passed in as the first argument to connect() and when connect() is run then it will passing in current state to the mapStateToProps.

const mapStateToProps = (state) => ({ characters: state.characters })

mapDispatchToProps: It can be function, an object, or not supplied(null). This function expected to return an object. It is used for dispatching actions to the store.
This function is passed in as the second argument to connect().

const mapDispatchToProps = (dispatch) => {
  return {
    createCharacter: (character) => dispatch({ type: 'CREATE_CHARACTER', character }),
  }
}

Good things to know!

Those three code is equivalent to each other

//three different code is equivalent to each other
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);
export default connect(mapStateToProps, { createCharacter })(ComponentName);
export default connect(state => ({ characters: state.characters }), { createCharacter })(ComponentName);

Dive into coding!

Let's use what we've discussed above and make a simple app that can create characters and show list of created character.

Component tree (create folders and files under src)

src/components/CharacterForm.js
src/components/Character.js
src/containers/Characters.js
src/reducers/charactersReducer.js

Modify index.js

In index.js, I created store and take that store as provider argument to make it available to the child component of Apps.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'; //add
import { createStore } from 'redux'; //add
import charactersReducer from "./reducers/charactersReducer"; //add

const store = createStore(charactersReducer); //add

ReactDOM.render(
  <React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js

import './App.css';
import CharacterForm from './components/CharacterForm';
import Characters from './containers/Characters';

function App() {
  return (
    <div className="App">
      <h1>Welcome to Character Storage</h1>
      <CharacterForm />
      <Characters />
    </div>
  );
};

export default App;

reducers/charactersReducer.js

For more information about reducer use my part 1: redux? blog.
link: https://dev.to/cicada0315/part-1-redux-1mi5

export default function charactersReducer(state={characters: []}, action) {
    switch(action.type){
        case "CREATE_CHARACTER":
            return {
                ...state,
                characters: [...state.characters, action.character]
            }
        default:
                return state
    }
}

containers/Characters.js

To gain access to the store which contains characters array, I used connect() with first argument mapStateToProps here. Then, I used that characters array with map method to pass character as props to the child component character.

import React, { Component } from 'react'
import Character from '../components/Character'
import { connect } from 'react-redux';

class Characters extends Component {
    render() {
        const characters = this.props.characters.map(character => <Character character={character}/>);
        return (
            <div>
                <h1>Character list</h1>
               {characters}
            </div>
        );
    };
};

const mapStateToProps = (state) => {
    return{
        characters: state.characters
    };
};

export default connect(mapStateToProps)(Characters);

components/Character.js

function Character(props){
    return (
      <div className="character">
        <h1>{props.character.name}</h1>
        <img src={props.character.image_url} alt={props.character.name} height="400" width="800"/>
        <h3>Description: {props.character.description}</h3>
      </div>
    );
}

export default Character;

components/CharacterForm.js

To gain access to the store to dispatch action, I used connect() here too. Once the form is submitted. It will call the function handleSubmit which will dispatch createCharacter(this.state) which will pass the new created character in it as this.state as eventually add that new character to our state.characters array.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class CharacterForm extends Component{
    state={
        name: "",
        image_url: "",
        description: ""
    };

    handleChange=(e)=>{
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    handleSubmit=(e)=>{
        e.preventDefault();
        this.props.createCharacter(this.state);
        this.setState({
            name: "",
            image_url: "",
            description: ""
        });
    }

    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                <h1>Create New Character</h1>
                Name: <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/><br />
                Image_url: <input type="url" name="image_url" value={this.state.image_url} onChange={this.handleChange}/><br />
                Description: <textarea name="description" value={this.state.description} onChange={this.handleChange}/><br />
                <input type = "submit" value = "Create New Character" />
                </form>
            </div>
        );
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        createCharacter: (character) => dispatch({ type: 'CREATE_CHARACTER', character }),
    }
  }

export default connect(null, mapDispatchToProps)(CharacterForm);

We have everything here, so why don't you try in visual studio? You can use marvel website to add new characters.
link: https://www.marvel.com/characters

Reference

https://react-redux.js.org/using-react-redux/connect-mapstate
https://react-redux.js.org/using-react-redux/connect-mapdispatch

Part 1: Redux?

Cicada0315 — Tue, 15 Jun 2021 17:56:37 +0000

What is Redux?

Redux is a state container for JavaScript applications. It's basically another library. Redux puts all of our data(state) in one place. All the parts of Redux are plain old JavaScript including state(obj). You can use Redux together with React, or with any other view library. I will go over how Redux-React works in another blog but first let's learn about Redux.
How Redux-React works,
link: https://dev.to/cicada0315/part-2-redux-react-1lp

Why using Redux?

Redux state is separate from the component tree so, we can get any part of this data(state) for any component just by connecting the component.

Redux made complex interaction between components much easier. For example, there is one parent and from that parent there is two sibling components. If both of siblings displaying or manipulating the same data (state), the data needs to be stored in their parent component's state and passing props up and down to accessible for both siblings. Passing props up and down makes code complicated and messy. However, with Redux, every component we allow can get the update state data regardless of the their position of component tree.

Image_link: https://css-tricks.com/learning-react-redux/

Three Principles

Three principles comes from this link:
https://redux.js.org/understanding/thinking-in-redux/three-principles

1. Single source of truth

The global state of your application is stored in an object tree within a single store.

2. State is read-only

The only way to change the state is to emit an action, an object describing what happened.

3. Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure function reducers.

pure function: It returns the same result for same arguments, it does not alter input data, no modification of local and global variables and it does not depend on the external state like a global variable.

const addtwo = n => n+2;

link: https://www.tutorialspoint.com/redux/redux_pure_functions.htm

Reducers: It's a pure functions that take the previous state and an action. It returns the next state without mutating the previous state. Simply, it only returns new state obj.

function reducer(state, action){ }

More terminology to understand redux

store: It's a container that carry the whole state tree of your application. There should only be a single store in your app (use combineReducers to create a single root reducer out of many).
To change the state is through(dispatch) an action and this is the only way.

createStore() method: It is provided by the redux library. Creates and returns store as obj that will have a dispatch method and a getState(which returns the current state value) method.

createStore(reducer, [preloadedState], [enhancer])

preloadedState (any): Optional parameter that can define the initial state.
enhancer (Function): Optional parameter that enhance the store.

dispatch function: Dispatches an action. This is the only way to trigger a state change.

dispatch(action)
dispatch({type: 'INCREASE_COUNT'})

How redux works?

Note: Not actually using Redux yet just showing you how redux works(implementing redux not using redux library).
Redux dispatches action, dispatch evokes reducer and then with updated state it renders the view. The flows like down below image.

Diagram_link: https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

Let's sum up everything we discussed in one example code. I will implement a bank account which shows in DataFlowDiagram above:

Example code,

There is two buttons deposit $10 and withdraw $10, every time you click deposit $10 then the balance increase $10 on the other hands, whenever you click withdraw $10 then the balance decrease by $10.

//script.js
function createStore(reducder){
  let state;
  function dispatch(action){
    state=reducer(state, action);
    render();
  };
  function getState(){
    return state;
  };
  return {
    dispatch, getState
  };
};

function reducer(state ={
  balance: 0
}, action){
  switch (action.type) {
    case 'DEPOSIT':
      return {
        balance: state.balance+ action.payload
      };
    case 'WITHDRAW':
      return {
        balance: state.balance- action.payload
      };
     default:
      return state;
  };
};

function render(){
  const accountbalancetag=document.getElementById("output");
  accountbalancetag.innerText="Balance:" +store.getState().balance;
};

const handledeposit=(e)=>{
  store.dispatch({ type: 'DEPOSIT', payload:10 });
};

const handlewithdraw=(e)=>{
  store.dispatch({ type: 'WITHDRAW', payload:10 });
};

let store =createStore(reducer);
const depositbutton=document.getElementById("deposit");
depositbutton.addEventListener('click', handledeposit);
const withdrawbutton=document.getElementById("withdraw");
withdrawbutton.addEventListener('click', handlewithdraw);

//index.html
<div>
  <h1>Bank Account</h1>
  <h2 id="output">
  Balance: 0
  </h2>
  <button id="deposit">
    Deposit $10
  </button>
  <br />
  <button id="withdraw">
    Withdraw $10
  </button>
</div>

If you want to see what is happening use this,
link: https://playcode.io/new/
Copy and paste code to the appropriate field to check what the app looks like. Whenever you modify the code then you have to wait 7sec but it's really good when you are doing quick check with complete code.

I hope this helps you to understand Redux.

Better to know before learning React

Cicada0315 — Tue, 15 Jun 2021 14:55:34 +0000

I thought it would be nice to know some of the main terms or useful tools before learning React.

React

React is front-end JavaScript library for building user interfaces or UI components.
reterence:
https://en.wikipedia.org/wiki/React_(JavaScript_library)

React Tools

Node.js

Node.js is a back-end JavaScript runtime environment (server environment) that executes JavaScript code outside a web browser.

npm (Node Package Manager)

npm is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for the javaScript. All npm packages are defined in files called package.json(must be written in JSON).
reterence:
https://en.wikipedia.org/wiki/Npm_(software)

npx (Node Package eXecute)

It comes with the npm 5.2.0 version. It is an npm package runner that can execute any package from npm registry.
reterence:
https://www.geeksforgeeks.org/what-are-the-differences-between-npm-and-npx/

npm vs npx

If you want to run certain package with npm then you have to specify that package to package.json and install it locally. But with npx package will automatically installed.

npm install some-package
$ npm install -g create-react-app
$ create-react-app my-app
npx some-package
$ npx create-react-app my-app

yarn

Yarn is new JavaScript Package Manager that is to solve a problems that has faced by teams(Facebook, Google, Exponent and Tilde) with npm.

JSX (JavaScript XML)

JSX is a syntax extension to javaScript. It let us to write HTML elements in JavaScript. We don't have to use JSX, but it makes much easier to write react application as you can see in the below example:

//This example provided in https://www.w3schools.com/react/react_jsx.asp
//With JSX
const output = <h1>With JSX</h1>;
ReactDOM.render(output, document.getElementById('root'));

//Whitout JSX
const output  = React.createElement('h1', {}, 'Without JSX!');
ReactDOM.render(output , document.getElementById('root'));

reference:
https://www.w3schools.com/react/react_jsx.asp

Babel

Babel is a JavaScript compiler. Transform ES6+ code into a backwards compatible version(older version) of JavaScript.

//This example provided in https://babeljs.io/docs/en/index.html
// Babel Input: ES6(ES2015) arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

reference:
https://babeljs.io/docs/en/index.html

Webpack

Webpack is an open-source JavaScript module bundler. When compiling a React application with Webpack, It will outputting a single file which 'bundle' up all of our files with with dependencies properly placed.
reference:
https://webpack.js.org/

React Router

By default, React comes without routing so to use it we need to install it.

npm install react-router-dom

BONUS tool

Styling

React-Bootstrap

npm install react-bootstrap bootstrap@4.6.0

For detailed instruction of how to use visit the
Link: https://react-bootstrap.github.io/getting-started/introduction/

Material-UI (implement Google's Material Design specification)

npm install @material-ui/core

For detailed instruction of how to use visit the
Link: https://material-ui.com/getting-started/usage/

Create react app

Now you have all the basic source, to make a new project use following command.

$ npm install -g create-react-app
$ create-react-app < APP-NAME >  
//Once you have npm installed you can run the following both to install and upgrade Yarn:
$ npm install --global yarn
//To start up the server
$ cd < APP-NAME >
$ npm start 
or 
$ yarn start

As I learn, I will add more to this blog if I find more useful tools.

Hooks For Beginner

Cicada0315 — Thu, 10 Jun 2021 22:47:11 +0000

What is Hooks?

Hooks are a new addition in React 16.8. They are JavaScript functions that let you use state and other React features without writing a class (Hooks don’t work inside classes).

State Hook ('useState')

'useState' enables you to add state to functional components. We call this Hook inside a functional component to add some local state to it. React will preserve this state between re-renders.

const [state, setState] = useState(initialState);

Returns a stateful value(state), and a function(setState) to update it.

Example

In this example, we are making total state. It is initialize as 0. Whenever you click the Button then the total state will increment by 1 and page will re-render with updated total state.

import React, { useState } from 'react';

function Example() {
  const [total, setTotal] = useState(0);
  return (
    <div>
      <h1>clicked {total} times</h1>
      <button onClick={() => setTotal(count + 1)}>Button</button>
    </div>
  );
}

Using class: Equivalent with above code

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0
    };
  }

  render() {
    return (
      <div>
        <h1>clicked {this.state.total} times</h1>
        <button onClick={() => this.setState(previousState => ({ total: previousState.total + 1 }))>
          Button
        </button>
      </div>
    );
  }
}

You can also use the State Hook more than once in a single component and the state can be any type unlike state in a class which is always be an object like example below:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [vegetable, setVegetable] = useState('onion');
  const [users, setUsers] = useState([{ Name: 'Jean' }]);
  // ...
}

Effect Hook ('useEffect')

Effect Hook serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API(simply working as all three combined). The function passed to useEffect will be called(run) after the render is committed to the screen. In other words, by using this Hook, you tell React that your component needs to do something after render.

With one parameter

useEffect(didUpdate);

Example

import React, { useState, useEffect } from 'react';
function Example() {
  const [total, setTotal] = useState(0);

  // Similar to componentDidMount and componentDidUpdate: 
  // Update the document title using the browser API   
useEffect(() => {document.title = `clicked ${total} times`;});
  return (
    <div>
      <h1>clicked {total} times</h1>
      <button onClick={() => setTotal(total + 1)}>
        Button
      </button>
    </div>
  );
}

In here userEffect is working as componentDidMount and componentDidUpdate combined as explained in the code above.

With two parameters

useEffect(didUpdate, [dependency array]);

with one paremeter, useEffect run after every render which means it runs both after the first render and after every update.

what if we want call this function when only certain value changes(update)? That is why we need second parameter which called as dependency array.
Dependency array is the second optional parameters in the useEffect function. The Effect will only executed when the second parameter value of array updated and inside the array we can put more then one value.

Example

const App=()=>{
  const [value, handleChange] = useFrom({ email: "", password: ""});
  useEffect(()=>{
    console.log("render");
  }, [values.password]);

  return(
    <div>
    <>
      <input name="email" value={values.email} onChange={handleChange}/>
      <input type="password" name="password" value={values.password} onChange={handleChange} />
    </>
    </div>
   );
};

So whenever {values.password} changes then the Effect fires off again and again.

If you put second parameter as empty array [], it only implement componentDidMount not componentDidUpdate. So, it not doing to evoke when there any is changes. In other words, re-render is not going to call the Effect anymore and render only when component Mount.

useEffect(()=>{
    console.log("render");
  }, []);

Effect Hook with cleanup

Simply put return function inside userEffect will performs the cleanup when the component unmount which is similar to componentWillUnmount.

useEffect(()=>{
    console.log("render");

    return ()=>{
      console.log("unmount");
    }
  }, []);

If we user second parameter for some value like previous example. then we can cleaning up the old value and getting new value.

useEffect(()=>{
    console.log("render");

    return ()=>{
      console.log("unmount");
    }
}, [values.password]);

We can have more then one useEffect in one component and it fired in order.

Keep in mind!

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks)

If you are still confused leave a comment or recommend to watch youtube link that I put in below.

reference:

https://reactjs.org/docs/hooks-overview.html
https://www.youtube.com/watch?v=j1ZRyw7OtZs

JS spread operator (...)

Cicada0315 — Fri, 04 Jun 2021 15:41:17 +0000

Definition

JavaScript ES6 introduced the spread operator and it only worked for arrays. ES2018 expands the spread operator (...) to make it works with own enumerable properties of an object.

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

I feel like this definition is hard to understand. So let me put in other words, the spread operator takes an iterable such as array and expands it into elements.

Examples

Array

1. Merge Arrays

Without spread operator, using Array.prototype.concat(),

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let newArray=array1.concat(array2);
newArray; //-> [1, 2, 3, 4, 5, 6]

With spread operator,

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let mergeArray = [...array1, ...array2];
mergedArray; //-> [1, 2, 3, 4, 5, 6]

2. Clone Array

In JavaScript, arrays are reference types("pass by reference", it just copies address of that array), so you can't just create a new copy of an array using =. When you are change the new array or original array, it will also change the other another like example below:

let original = [1, 2, 3];
let newArray = original;

newArray[0]=5;
newArray; //-> [5, 2, 3]
original; //-> [5, 2, 3]

Oh no, both of them changed. Let's try again with spread operator.

let original = [1, 2, 3];
let newArray = [...original];

newArray[0]=5;
newArray; //-> [5, 2, 3]
original; //-> [1, 2, 3]

Now, original array didn't affect when we changed the newArray, only newArray was modified.

3. String to Array

Using spread operator to a string, it will return an array of individual substrings (split into characters).

let st = 'hello';
let array = [...st];
array; //-> ['h', 'e', 'l', 'l', 'o']

4. Math

The Math object in javascript, the array won't work but with spread operator it will work

let array = [1,2,3,10];
console.log(Math.max(array)); //->NaN
console.log(Math.max(...array)); //->10

reference:
https://www.samanthaming.com/tidbits/92-6-use-cases-of-spread-with-array/
https://www.geeksforgeeks.org/javascript-spread-operator/

Object

The spread operator (…) with objects is used to create copies of existing objects with new or updated values or to make a copy of an object with more properties.

let's say we have 3 objects,

let user1 = {
    name: 'jean',
    age: 30
};
let user2 = {
    name: 'John',
    age: 20
};
let jean = {
    location: 'NY',
    hobby: 'coding'
};

1. Clone Object

Using Object.assign()

let clonedUser = Object.assign({}, user1);
clonedUser; //-> {name: 'jean', age: 30 }

Using Spread Operator

let clonedUser = { ...user1 };
clonedUser; //-> {name: 'jean', age: 30 }

Both of them works same way.

2. Merge Objects (with different properties)

Using Object.assign()

This will modify the user1 too.

let MergedUser = Object.assign(user1, jean);
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}
user1; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}

Making new Merged obj, won't modify the user1

let MergedUser = Object.assign({}, user1, jean);
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}
user1; //-> {name: 'jean', age: 30 }

Without using {} empty object, it will modify the user1. Simply saying that first take the user1 and then add jean to the user1. If you don't want to mutate user1 then you must use empty obj. "let MergedUser = Object.assign({}, user1, jean);" this is saying that create the empty newobj and copy user1 to it and then add jean to that newobj.

Using Spread Operator

let MergedUser = { ...user1, ...jean};
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}

3. Merge Objects (with same properties)

Using Object.assign

let MergedUser = Object.assign({}, user1, user2);
MergedUser; //-> {name: "John", age: 30}

Using Spread Operator

let MergedUser = { ...user1, ...user2};
MergedUser; //-> {name: "John", age: 30}

The properties are overwritten by other objects that have the same properties later in the parameters order.
This overwriting will come in handy when you pass objects to other functions that update state.

Bonus Update property

const obj = { hi: "x", hello: "y" };
const updatedObj = { ...obj, hi: "z" };
updatedObj; //-> {hi: z, hello: "b"}

This is what I talked earlier when explaining with using Object.assign() with empty obj or not. So in this case, we update obj with new value.

Bonus Create new obj with Updated property of other obj

//using Object.assign()
let user = {id: 1, name: 'jean', age: 30};
let YoungerUser = Object.assign({}, user, {age: user.age - 1})
//using spread operator
let user = {id: 1, name: 'jean', age: 30};
let YoungerUser = {...user, age: user.age - 1}

It's creating new obj, "YoungerUser". Start with a new empty object, copy over everything from the original user, then overwrite the age property with a new value.
reference:
https://www.rockyourcode.com/use-the-spread-operator-to-update-objects/

MemoryCardGame

Cicada0315 — Tue, 18 May 2021 01:04:30 +0000

"In some ways, programming is like painting. You start with a blank canvas and certain basic raw materials. You use a combination of science, art, and craft to determine what to do with them." - Andrew Hunt

Step1: Deciding type of website

This is first project using javaScript so I didn't want to do complex project instead I decided to make simple memoryCardGame.

Step2: Setting backend

table relation

class Category < ApplicationRecord
    has_many :cards
end

class Card < ApplicationRecord
  belongs_to :category
end

Controller

Use scaffold
rails g scaffold Category name
rails g scaffold Card name url category:belongs_to

class CategoriesController < ApplicationController
  before_action :set_category, only: [:show, :update, :destroy]

  # GET /categories
  def index
    @categories = Category.all

    render json: @categories, only: [:id, :name], include: {
      cards: {
        only: [:id, :name, :url, :category_id] 
      }
    }
  end

  # GET /categories/1
  def show
    render json: @category, only: [:id, :name], include: {
      cards: {
        only: [:id, :name, :url] 
      }
    }
  end

  # POST /categories
  def create
    @category = Category.new(category_params)

    if @category.save
      render json: {
        status: 201,
        store: @category
      }, status: :created, location: category_path(@category)
    else
      render json: {
        status: 422,
        errors: @store.errors.full_messages.join(", ")
      }, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /categories/1
  def update
    if @category.update(category_params)
      render json: @category
    else
      render json: @category.errors, status: :unprocessable_entity
    end
  end

  # DELETE /categories/1
  def destroy
    @category.destroy
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_category
      @category = Category.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def category_params
      params.require(:category).permit(:name)
    end
end

Step3: Setting frontend

index.html

Create form

fetch post request to add new category with new 6 cards

Category-container

fetch get request to show a list of category

Game

When user clicks the play button next to the each list then event function will generate new Game with that category.

styles.css

Since I have show the card flips to user. I put two different images (font-face and back-face) in the same location and made them 3d.
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://www.w3schools.com/cssref/css3_pr_transform-style.asp
https://www.w3schools.com/cssref/css3_pr_transition.asp

#memory-game {
    width: 640px;
    height: 640px;
    margin-right: 5%;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
}

.memory-card {
    /*board is 640 we have 160 for each but we need somespace with each other so -10 and have margin 5px*/
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;   
    transform: scale(1);
    /*preserve-3d: Specifies that child elements(.front-face and .back-face) will preserve its 3D position*/
    transform-style: preserve-3d;
    transition: transform .5s;
}

.memory-card.flip {
    transform: rotateY(180deg);
}

/*put front and back same spot*/
.front-face, .back-face {
    width: 100%;
    height: 100%;
    position: absolute;
    border-style: solid;
    border-color: wheat;
    border-width: 2px;
    border-radius: 5px;
    backface-visibility: hidden;
}

/*then rotate front 180deg to only see the back-face at first*/
.front-face {
    transform: rotateY(180deg);
}

src/index.js

This part is relatively easy then setting up the board. As long as I follow the logic everything is okay.
Useful-1: style.order
https://www.w3schools.com/jsref/prop_style_order.asp
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

function shuffle(){
    const cards = document.querySelectorAll('.memory-card');
    for(let i=0; i<cards.length; i++){
        let randomPos = Math.floor(Math.random() * 12);
        cards[i].style.order = randomPos
    }
}

Useful-2: classList
https://www.w3schools.com/jsref/prop_element_classlist.asp
classList.add(); Adds one or more class names to an element.

Future

For now it only works 6 set of cards. I want to modify this project so that it can generate game with any sets of cards.

Rails: Up

Cicada0315 — Thu, 29 Apr 2021 20:41:50 +0000

Step1: Deciding type of website

There is one website that I really enjoy which contains bunch of ramdom stories, images or gifs. I can even upload them by myself. Since I am practicing, I thought, it will be better to mimic one of the familiar website so I choose to make my version of this website.

Step2: Plans

Models

I used below link do draw relational diagrams. I will have four models as you can find in below as well.

link: https://dbdiagram.io/home

// Creating tables
Table users {
  id int [pk, increment]
  last_name string
  first_name string
  username string
  email string
  password string
}

Table posts {
  id int [pk, increment]
  user_id integer
  title string
  link string
  content text
  view integer

}

Table comments {
  id int [pk, increment]
  user_id integer
  post_id integer
  content text
}

Table likes {
  id int [pk, increment]
  user_id integer
  post_id integer
}

// Creating references
// You can also define relaionship separately
// > many-to-one; < one-to-many; - one-to-one
Ref: posts.user_id > users.id

Ref: comments.user_id > users.id
Ref: comments.post_id > posts.id

Ref: likes.user_id > users.id
Ref: likes.post_id > posts.id

Controllers

apllication_cotroller
comments_controller
likes_controller
posts_controller
users_controller
sessions_controller
static_controller

Views

layouts: application
posts: new, edit, show, index, kups, topups, newups, _form, _post
sessions: new
static: about, _errors
users: new

Step3: Implement

static

aboutUps- explained about the website

users

signup

sessions

posts

user can upload files, write content, provide link for image or gif.
user can modify or delete the post they uploaded.
user can comment post.
user can like(thumbsup) the post.
whenever people see the post then the view is incremented.

Reference

https://getbootstrap.com/
https://guides.rubyonrails.org/v5.2.0/active_storage_overview.html
https://github.com/Ejguzman3988/ft-020121-ImgTube

Comment

There was a lot of different things that I need to consider. It was little bit confusing time to time but I managed to make decent website. It is always fun to make new website. One of my feature, uploading files view is not neat since I cannot use javascript. I am so excited for the future project that will be done using javascript. I will do much more and efficient way than this one.

Website: Poison

Cicada0315 — Sat, 27 Mar 2021 02:19:50 +0000

Step1: Deciding type of website

I was thinking either making dog website or cocktail website since I love both of them. I ended up deciding cocktail website.

TheCocktailDB API: https://www.thecocktaildb.com/api.php

Step2: Getting Data

I want to get all the cocktails so I used my base as List all cocktails by first letter (https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a) and changed f= as all the alphabet characters. I used gem 'httparty'.

@base_endpoint= "https://www.thecocktaildb.com/api/json/v1/1/search.php?f="
def get_cocktails_data
      char=[*('a'..'z')]
      #delete u and x since api doesn't contain any cocktail.
      char.delete('u') 
      char.delete('x')
      char.each do |alphabet|
        cocktail_url=@base_endpoint+alphabet
        cocktails_array=HTTParty.get(cocktail_url)["drinks"]
        self.create_cocktail_objects(cocktails_array)
      end
end

Step3: Making database

Using rake and sqlite3, created tables(cocktails, users) and added data that I got from API.

rake db:create_migration NAME=create_cocktails
rake db:create_migration NAME=create_users

class CreateCocktails < ActiveRecord::Migration[5.2]
  def change
    create_table :cocktails do |t|
      t.string :name
      t.string :glass
      t.string :ingredient
      t.string :instruction
      t.string :image
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name
      t.date :birthday
      t.string :email
      t.string :password_digest

      t.timestamps
    end
  end
end

rake db:migrate
rake db:seed

Step4: Building MVC

Model

cocktail.rb (belongs_to user)
user.rb (has_many cocktails)

View

layout.erb
welcome.erb
index.erb
users: new.erb
sessions: new.erb
cocktails:

edit.erb
index.erb
new.erb
show.erb

Controller

application_controller.rb
cocktail_controller.rb
sessions_controller.rb
users_controller.rb

Step5: CRUD(Create, Read, Update, Delete)

Create

get '/cocktails/new' do
        redirect_if_not_logged_in
        erb :'cocktails/new'
end

post '/cocktails' do
        cocktail = current_user.cocktails.build(params[:cocktail])

        if cocktail.save
            redirect "/cocktails/#{cocktail.id}"
        else
            flash[:error] = "#{cocktail.errors.full_messages.join(", ")}"
            redirect "/cocktails/new"
        end
end

Read

get '/cocktails' do
        @cocktails = current_user.cocktails
        erb :'cocktails/index'
end

get '/cocktails/:id' do
        @cocktail=Cocktail.find(params[:id])
        erb :'cocktails/show'
end

Update

get '/cocktails/:id/edit' do
        erb :'cocktails/edit'
end

patch '/cocktails/:id' do
        redirect_if_not_logged_in
        redirect_if_not_authorized

        if @cocktail.update(params["cocktail"])
            redirect "/cocktails/#{@cocktail.id}"
        else
            redirect "/cocktails/#{@cocktail.id}/edit"
        end
end

Delete

delete "/cocktails/:id" do
        @cocktail.destroy
        redirect "/cocktails"
end

Step6: Front-end (Making look nicer)

I used below links mostly to make my website look nicer and I got help from Laura Berge and Eriberto Guzman (thank you).

Bootstrap: https://getbootstrap.com/

W3schools: https://www.w3schools.com/

Future

I will make another join table called party which users can share their cocktail list to make a shopping list for the party.

MarvelBattle#ruby

Cicada0315 — Fri, 26 Feb 2021 14:36:20 +0000

Keep thinking then you can find a better way to do things. But, if you stuck more than an hour for one thing, stop! You are not going to get anywhere. Try to rest for a while and try again. Fresh view will help you figure out. -Cicada

Day1

Step1: Pick an API

Deciding which API you are going to use is not esay yet, most important step. Try to see what is available to you and match with what you want to make. I want my program to be fun and efficient so I made my decision with Marvel API!

Marvel API: https://developer.marvel.com/

API list link: https://apilist.fun/

NOTE: Some API is easy to access but some of them you need to sign-up

Step2: Make connection to Marvel API

1. Get an API Key:

In order to use marvel API, you have to sign up and get a key

2. Creating url that can connect to marvel API:

I want to get the list of all the marvel characters and this was what I used.

base_endpoint= "https://gateway.marvel.com"
ts=Time.now.to_i.to_s
url_hash=Digest::MD5.hexdigest("#{ts}#{PRIVATEKEY}#{PUBLICKEY}"
url=base_endpoint+"/v1/public/characters?ts=#{ts}&apikey=#{PUBLICKEY}&hash=#{url_hash}"

More info: https://developer.marvel.com/documentation/generalinfo

Day2 & 3

Feature1: Display all the characters by it's name

Using connection with marvel api, I made each character's object that contains below information.

Character {

id (int, optional): The unique ID of the character resource.,

name (string, optional): The name of the character.,

description (string, optional): A short bio or description of the character.,

modified (Date, optional): The date the resource was most recently modified.,

resourceURI (string, optional): The canonical URL identifier for this resource.,

urls (Array[Url], optional): A set of public web site URLs for the resource.,

thumbnail (Image, optional): The representative image for this character.,

comics (ComicList, optional): A resource list containing comics which feature this character.,

stories (StoryList, optional): A resource list of stories in which this character appears.,

events (EventList, optional): A resource list of events in which this character appears.,

series (SeriesList, optional): A resource list of series in which this character appears.

}

link: https://developer.marvel.com/docs#!/public/getCreatorCollection_get_0

Once you made character objects then simply calling down code will give you list of marvel characters

def display_characters
  Marvel_Characters.all.each.with_index(1) do |character, index|
    puts "#{index}. #{character.name}"
  end
end

#Welcome to MarvelBattle
#We always fight for justice!
#1. 3-D Man
#2. A-Bomb (HAS)
#3. A.I.M.
#4. Aaron Stack
#5. Abomination (Emil Blonsky)
#6. Abomination (Ultimate)
#7. Absorbing Man
#8. Abyss
#9. Abyss (Age of Apocalypse)
#10. Adam Destine
...

NOTE: when getting characters the default is only 20 but there is total of 1493 characters so if you want to get more characters you have to change offset.

Feature2: Show user choice of character's information

Interact with user via termial. I gave options to user so that they can see detailed information of each of the character that they choose.

Character_information option:

Enter 1: Image

Enter 2: Abilities

Enter 3: Comics

Enter 4: Series

Enter 5: Description

Feature3: MarvelBattle (User vs Computer)

Step1: Geting each of the character's ability.

This was really tricky since I cannot get this information directly. I used 'nokogiri' to able to make it work (scraping). I tried add this ability to each of the object when I make the character's object for the first time but it took so long since I have total of 1493 characters. I end up deceide add ability only when user want to see the ability of the character or when they are ready to play. (which gives me 1 vs 1493 or 6 vs 1493)

Step2: Play setting

When user select three character, computer will choose ramdom three characters as well. then user is ready to play!

def initialize(player, computer)
  puts "#{player.name} VS Computer"
  puts "Match1: #{player.my_characters_arr[0].name} VS #{computer.character_arr[0].name}"
  puts "----------------------------------"
  puts "Match2: #{player.my_characters_arr[1].name} VS #{computer.character_arr[1].name}"
  puts "----------------------------------"
  puts "Match3: #{player.my_characters_arr[2].name} VS #{computer.character_arr[2].name}"
  puts "----------------------------------"
end
#Username VS Computer
#Match1: A-Bomb (HAS) VS Agent Brand
#----------------------------------
#Match2: 3-D Man VS Air-Walker (Gabriel Lan)
#----------------------------------
#Match3: A.I.M. VS 3-D Man
#----------------------------------

Day4

Play

Each of the marvel character has six abilities with rate.
[durability, energy, fighting_skills, intelligence, speed, strength]
Each match, program will compute each character's ability and tells you which character won for that match. When you enter 4 will tells you who won the battle.

Enter 1: Match1

Enter 2: Match2

Enter 3: Match3

Enter 4: Winner of this battle

Enter 5: Go back to option

Enter 6: To end the program

Future

Impovement1: Able to show image in new browser when using wsl

For now I made error handling block for the image, it's not working with wsl. I will keep working on that to able to show image in new browser even when using wsl.

Improvement2: Make a game more interactive

For now porgram jsut computes each of the character's each of the character's ability and show the result. In the future I want to make it more interactive like give option to user so that they can choose ability they want to use for attack or defends.

This was my first project using ruby. Some of the part was hard but most of time it was fun. I hope this blog helps when you are acutally runing my program or trying to make new program with Marvel API.

Why Software Engineering?

Cicada0315 — Sat, 06 Feb 2021 15:29:46 +0000

System.out.println("Hello")
puts "My name is Jean."
print "Nice to see you"

I learned Java last few years and I am learning Ruby and Python nowadays. Every language seems similar but different. It's interesting to learn how each language works. I enjoy the ability to create an actual working, moving program from lines of code. It’s really fascinating that everything associated with programs on computers work through lines of code.

Coding is sometimes challenging. It's like a puzzle. Sometime, I stuck whole day to try to figure out how to make it work and try to make it more efficient. I really enjoy the journey of trying to figure out how to make a program work. I'm over the moon when the program that I worked on whole day finally working! I bet all the programmers feel the same:)

"Welcome every problem as an opportunity. Each moment is the great challenge, the best thing that ever happened to you. The more difficult the problem, the greater the challenge in working it out." - Grace Speare, Author

As the technology industry growing, computers have become a major part of our lives today. Privacy and security are becoming major concerns as well. In the future, I want to contribute to making a safe networking environment for people when they use their computers.

P.S. this is my first blog. I hope you have more understanding about me.