DEV Community: artemismars

What is Currying in javascript

artemismars — Wed, 31 Aug 2022 00:53:23 +0000

Description

Currying: n parameters can turn into n functions.

Example code

n parameters

function foo(x, y, z) {
  return x + y + z;
}

n functions

function foo(x) {
  return function bar(y) {
    return function baz(z) {
      return x + y+ z;
    }
  }
}

const result = foo(10)(10)(10);
console.log(result);

>> 30

This is possible because functions are First Class Citizens in javascript.

When do we use currying?

If n parameters are passed into one function then the function does complex operation inside itself then it will be very difficult to track how the function is working with each parameter.
But if you use currying then you can split how each step of the operation works parameter by parameter.

Create your react app fast!

artemismars — Tue, 30 Aug 2022 16:14:00 +0000

I am glad to introduce my react boilerplate which will start your react app faster than create-react-app.
This will automatically install and run your react app and you can start your coding right away.

try copy and paste this command in your terminal and hit the enter 😄

Run this command in your terminal!

git clone https://github.com/NEARworld/near-react-boilerplate.git && cd ./near-react-boilerplate && git remote remove origin && npm i && npm run build && npm start

If You liked it please star the repo thanks 😄
https://github.com/NEARworld/near-react-boilerplate

Also You can check Typescript version in the README.md !

rust day 1

artemismars — Sat, 23 Jul 2022 13:20:08 +0000

use std::io;

std is a standard library.
:: syntax indicates that io is an associated function.

let mut guess = String::new();

:: syntax indicates that new is an associated function.
Associated function means a function that's implemented on a type.
It returns a new instance of String.
It's a empty string.

use std::io;

fn main() {
    let mut guess = String::new();
    io::stdin()
        .read_line(&mut guess)
        //...
}

If we hadn't imported io library with use std::io at the beginning of the program, we could still use the functoin stdin() by writing this function call as std::io::stdin().
The stdin function returns an instance of std::io::Stdin, which is a type that represents a handle to the standard input for your terminal.

addEventListener

artemismars — Tue, 19 Jul 2022 14:58:09 +0000

HTML codes

<div id='container'>
    container
</div>

addEventListener function

this function listens to an event that is passed through the first parameter
and calls a function that is passed through the second parameter

const container = document.getElementById("container");

function backgroundToRed(event) {
    event.target.style.backgroundColor = 'red';
}

container.addEventListener('mouseover', backgroundToRed);

React - How to give a focus to a list item?

artemismars — Thu, 24 Mar 2022 14:16:50 +0000

This topic is related to Menu on the website.

For example,
If you visit a website and click a menu item then you will move to other path showing different page.
But the menu item has a background color (focus).

I am going to show you how to implement that feature.

import {useLocation} from 'react-router-dom'

We do this with react-router-dom library. It has a hook called useLocation.

const location = useLocation();

const styles = {
  active: {
    background: '#f4f4f4'
  }
}

return (
  <List>
    {menuItems.map(item => (
      <ListItem sx={location.pathname === item.path ? styles.active : null}>
        <ListItemIcon>{item.icon}</ListItemIcon>
        <ListItemText primary={item.text}/>
      </ListItem>
    ))}
  </List>
)

important part

<ListItem sx={location.pathname === item.path ? styles.active : null}>

Material UI - Grid layout

artemismars — Thu, 24 Mar 2022 13:13:07 +0000

import {Grid} from '@mui/material'

// codes..

return (
  <Grid container>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>1</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>2</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>3</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>4</Card>
    </Grid>
  </Grid>
)

xs means

@media query(min-length: 0px) {
  // codes..
}

and This means apply CSS properties when width is up and 0px.
So, xs={12} means If width is >=0px then take 12 columns.

Grid layout basically 12 columns in MUI.
So, If each Grid item takes 12 columns then they will take all the columns one by one so they will be stacked.

You can see total 4 Grid items in the code.
If responsive breakpoint is up and lg then takes 3 columns.
So, each Grid item will take 3 columns.
It means all Grid items will be at a row.

MUI default breakpoints

xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px

React - How to redirect

artemismars — Thu, 24 Mar 2022 12:51:40 +0000

import {useHistory} from 'react-router-dom'

useHistory was the thing to redirect in React.
But in react-router-dom v6, it changed.

import {useNavigate} from 'react-router-dom'
const navigate = useNavigate();

const handleSubmit = (e) => {
  e.preventDefault()
  // some codes..
  fetch('http://localhost:8000/notes', {
    method: 'POST',
    header: {'Content-Type': 'application/json'},
    body: JSON.stringify({title, details, category}),
  }).then(() => navigate('/')) // navigate() here! redirect to '/'
}

Material UI - Typography

artemismars — Thu, 24 Mar 2022 00:45:52 +0000

How to import

import {Typography} from '@mui/material'

How to use

<Typography 
  variant='h2' 
  component='h1'
  color='textSecondary'
>
  Some text here..
</Typography>

variant sets Typography components to be h2 tag in web page.
But there's a component prop.
component='h1'
This prop makes the tag to be h1.
But it will look like h2 in the page.
The reason is variant prop makes the component inherits CSS properties from h2 tag.

so the Typography component will be h1 looking like h2.

color prop has a value, textSecondary.
This value name is set by MUI. They specified some color names.
Check the color names in the following link below.

Palette
https://mui.com/material-ui/customization/palette/#palette-colors

Color
https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes

Material UI - Install

artemismars — Thu, 24 Mar 2022 00:33:27 +0000

Material UI (MUI) Install

Basic libraries

@emotion/styled
@emotion/react

@mui/material

I needed 3 libraries to use material UI.
@mul/material includes bunch of MUI components.
emotion supports customized React components and MUI uses emotions components.

That's why I needed to install emotion libraries to use MUI components.

How to import components from MUI then?

import {Typography} from '@mui/material'

There's one more thing.
MUI icons
To use Icons, I needed to install this library.

@mui/icons-material

How to import icons from the library

import {SendIcon} from '@mui/icons-material'

import SendIcon from '@mui/icons-material/Send'

Check the full list of MUI icons here!
https://mui.com/components/material-icons/

Check the list of MUI components here!
https://mui.com/material-ui/getting-started/supported-components/#main-content

A code example

import {Button} from '@mui/material'
import SendIcon from '@mui/icons-material/Send'

export default function App() {
  return (
    <Button 
      startIcon={<SendIcon/>
    }>
      Button
    </Button>
  )
}

Output:

Why sequelize?

artemismars — Tue, 15 Mar 2022 14:42:11 +0000

I was using mongoose usually But some developers told me I need to learn SQL database too.

So, I decided to learn MySQL because someone introduced me 'planetscale' which is a MySQL Cloud Database service.
planetscale link
https://planetscale.com/

Anyway! We are going to use MySQL and sequelize in this post!
I explained why I use MySQL but What is sequelize now?
sequelize is a Node module that supports ORM(Object Relational Mapping). Shortly, I would say sequelize is an ORM tool.
Ok. But what is ORM?
You know Nodejs handles data from database via object data type.
for example,

const user = {
  email: 'example@example.com',
  password: '123123'
};

Since, NodeJS uses objects to deal with data from database in general. But SQL databases use tables and they are different from javascript objects.

But what if javascript objects are transformed to tables?
Then, Node Developers would handle the data with SQL databases easier.
That's what sequelize does!

I will write down some basic sequelize codes.
Then, you may think it is very similar with using mongoose!

db.js

const Sequelize = require('sequelize');
// You should install a database driver!
// for example, if you want to use mysql database then install mysql2 module.
// npm install mysql2
const sequelize = new Sequelize(database_name, username, password, 
  {
    dialect: mysql,
    host: '127.0.0.1'
});

// if you want to test the connection!
// you can use 'authenticate()' method.
(async () => {
  try {
    await sequelize.authenticate();
    console.log('database connection successful');
  } catch (error) {
    console.log('database connection failed');
  }
})();

module.exports = {Sequelize, sequelize}

The difference between Sequelize and sequelize is that Sequelize is a sequelize node module itself but sequelize is a connection to a database. Their names follow the convention recommended by the official sequelize document!

user.js

const {sequelize, Sequelize} = require('./db.js');
const User = sequelize.define('User', {
  email: Sequelize.TEXT,
  password: Sequelize.TEXT
},
  {
    timestamps: true
  }
)

// User is now sequelize model!
console.log(sequelize.models.User === User); // true!

module.exports = User;

signup.js

const User = require('./user.js');

module.exports = async function(req, res) {
  try {
    const user = User.create({
      email: req.body.email,
      password: req.body.password
    });
    res.send(user);
  } catch (error) {
    res.send(error.message);
  }
}

Next time! I will post the comparison between using mongoose, raw query and sequelize!

Thanks for reading my post! If you have some feedbacks, feel free to leave comments! thanks :)

NodeJS and DOM API

artemismars — Mon, 14 Mar 2022 12:42:07 +0000

NodeJS is a server-side javascript runtime environment.
DOM API is a client-side api implemented in Web Browsers.

Something NodeJS new learners can be confused.

<html>
  <head>
  </head>
  <body>
    <div class='card'>
      card
    </div>
  </body>
</html>

const div = document.querySelector('.card');
div.addEventListener('click', clickHandler);

You can see this javascript code trying to play with a div tag with a class name .card.
But this is impossible in NodeJS.
The reason is document is a global object that is supported by Web browsers. Thus, You cannot use document in NodeJS.

You may be confused because you are writing it in Javascript.
but Javascript doesn't have that.
You may link your javascript file to a html file, like

<script src="public/js/test.js" />

First, You will open a html file. (i.e index.html).
Then, Web browser will load the html codes and javascript codes through <script> tag. Your javascript codes will be executed in Web browser architecture and the web browser has DOM API which supports document object.

But When you use NodeJS, There's no way your javascript code on NodeJS will be executed on Web browsers.

Thanks for reading my post! If you have some feedback, please share it via comments! :)

What is NodeJS?

artemismars — Mon, 14 Mar 2022 09:14:53 +0000

I've been studying nodejs half a year but I was just implementing APIs without understanding the foundation of tools I use.
I decided to write this post to check the foundation stuff of NodeJS! :)

NodeJS is an runtime environment that is built on V8 engine ( which compiles javascript codes into native machine codes).

NodeJS has some special features like event-driven, non-blocking(asynchronous) programming.

What is Event driven programming?

Event driven programming in NodeJS means that events occurred by opening file or network communication, like request and response ,are handled via callback functions. here's some example.

File System

import fs from 'fs';

fs.readFile('/example/test.txt', (err, data) => {
  if (err) throw err;
  console.log(data);
});

Network event

app.get('/', (req, res) => {
  res.send("hello world");
});

NOTE!
This is not supported by NodeJS!
Because NodeJS takes only V8 engine parts. and DOM API is provided by Web browser thus it's not possible to access DOM API on Nodejs.
so the following code is a wrong example as nodejs example!

divTag.addEventListener('click', clickHandler);

You can see that those events are handled through callback
functions. Events are processed by Event Loop. and the Event loop
processes the Phases and these Phases have Queues. Event loops
will choose phases with Round Robin scheduling method.

A round robin is an arrangement of choosing all elements in a group equally in some rational order, usually from the top to the bottom of a list and then starting again at the top of the list and so on.

Non-Blocking
NodeJS supports a single thread programming. This means every process in NodeJS lives in a thread. But since it's single thread if the first process is working long time then next processes should wait until the first process ends. But NodeJS is Non-Blocking. So, Even tho the first process didn't end yet, next processes can be executed. This will make your app still working even tho there's heavy data being processed.
Cross-Platform runtime environment.
Your Nodejs codes will work on different operating systems like OSX, MacOS, Windows!

If you have some advice, please share it via comments!
Thanks for reading my post!