DB 0003

[JS] Promise Basics

2021-12-16T01:00:00+11:00

1. Resolve case

//resolve
var promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('done!'), 1000);
});

promise.then(
  (result) => console.log('CASE 1', result),
  (error) => console.log('CASE 1',error.message)
);

2. Reject case

//reject
var promise = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('failed!')), 2000);
});

promise.then(
  (result) => console.log('CASE 2',result),
  (error) => console.log('CASE 2',error.message)
);

3. Handling only error with passing null in resolve

// handle only error
var promise = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('handle failed!')), 2000);
});

promise.then(null, (e) => console.log('CASE 3',e.message));

// or you can use catch
promise.catch((e) => console.log('CASE 3', e.message));

4. Finally - Execute always without result of resolve or reject

//finally (good for cleanup)
new Promise(function (resolve, reject) {
  setTimeout(() => resolve('Resolved'), 1000);
})
  .finally(() => console.log('CASE 4 Finally! I always run!'))
  .then(
    (result) => console.log('CASE 4', result),
    (error) => console.log('CASE 4', error.message)
  );

[Node.js] Koa Server initialization with formatter

2021-12-10T23:00:00+11:00

Step 1. Setup packages required

# generate package.json
yarn init -y

# add koa
yarn add koa

# add eslint
yarn add --dev eslint

yarn run esline --init # Answer the questions

Step 2. Create Prettier connfig file.

Change this settings upto your flavour.

// create .prettierrc file on the root of source folder
{
    "singleQuote": true,
    "trailingComma": "all",
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 80
}

# Set ESLint does not control prettier styled
$ yarn add eslint-config-prettier

// create .eslintrc.json on the root of source folder
{
  "env": {
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-unused-vars": "warn",
  }
}

Step 3. Setup Koa server

Inital template of koa server running on port 4000. Two middle ware included as an example.

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
  ctx.body = 'Hello World';
  console.log(1);
  await next();
  console.log('END')
});

app.use((ctx, next) => {
  console.log(2);
  next();
});

app.listen(4000, () => {
  console.log('server is running at http://localhost:4000');
});

Step 4. Run the server

$ node src

# Check on the browser - http://localhost:4000

[Java] Custom HTTP RequestURL XSS Filter

2021-12-10T06:00:00+11:00

Sample to show how to check requestURL and prevent Croos-Site-Script Attack Using common XSS Filter to convert URL to clean string.

package com.handler.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

public class XSSFilter implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void destroy() {
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		String requestURI = ((HttpServletRequest) request).getRequestURI();
		String newURI = cleanXSS(requestURI);
		request.getRequestDispatcher(newURI).forward(request, response);
		chain.doFilter(request, response);
	}

	private String cleanXSS(String value) {
		value = value.replaceAll("<", "& lt;").replaceAll(">", "& gt;");
		value = value.replaceAll("\\(", "& #40;").replaceAll("\\)", "& #41;");
		value = value.replaceAll("'", "& #39;");
		value = value.replaceAll("eval\\((.*)\\)", "");
		value = value.replaceAll("[\\\"\\\'][\\s]*javascript:(.*)[\\\"\\\']", "\"\"");
		value = value.replaceAll("script", "");
		return value;
	}

}

Then set filter in the web.xml

<filter>
    <filter-name>XSSFilter</filter-name>
    <filter-class>com.handler.filter.XSSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>XSSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

[JS] Slice Strings

2021-12-08T06:00:00+11:00

Example codes of String.slice()

let str = "stringify";
console.log(str.slice(0, 5) ); // 'strin', from 0 to 5
console.log(str.slice(0, 1) ); // 's', from 0 to 1

str = "stringify";
console.log(str.slice(2) ); // ringify, from 2 to end

str = 'stringify';

// from last 4 to last 1
console.log(str.slice(-4, -1) ); // gif
str = 'stringify';

Please aware that String.substring() and String.slice result is not same

// same value will be returned
console.log(str.substring(2, 6) ); // "ring"
console.log(str.substring(6, 2) ); // "ring"

// slice result is not same as substring
console.log(str.slice(2, 6) ); // "ring"
console.log(str.slice(6, 2) ); // ""

[JS] Cut string into limited length

2021-12-06T23:00:00+11:00

Sample function to cut string into desired limit value.

const limitTitle = (title, limit = 17) => {
  const newTitle = [];
  if(title.length > limit) {
    title.split(' ').reduce((acc, cur) => {
      if (acc + cur.length <= limit) {
        newTitle.push(cur);
      }
      return acc + cur.length
    }, 0);
    return `${newTitle.join(' ')} ...`;
  }
  return title;
}

console.log(limitTitle("This is an example title"));

[JS] Formatting console output

2021-12-03T23:00:00+11:00

You can pass arguments to the console.log like a C printf();

With %c and second parameter, you can inject CSS style to the text.

%s Formats the value as a string

%i or %d Formats the value as an integer

%f Formats the value as a floating point value

%o Formats the value as an expandable DOM element

%O Formats the value as an expandable JavaScript object

%c Applies CSS style rules to the output string as specified by the second parameter

console.log("%s is %i", "Pie", 3.1415926535);
// Pie is 3
console.log("%s is %f", "Pie", 3.1415926535);
// Pie is 3.1415926535

console.log("%c CSS text", "color: blue; font-size: 13px");
// Check out in the browser console

[React] Routing

2021-12-02T08:00:00+11:00

Example of React DOM Router usage.

Here assume that you already have Menu and Page Component to render.

Configure index.js to wrap <App/> in the <BrowserRouter/>

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Then place each path <Route/> in the <Routes/> and declare the path and the element.

App.js

import { Routes, Route } from "react-router-dom";
import Menu from "./components/Menu";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";

function App() {
  return (
    <div>
      <Menu />
      <hr />
      <Routes>
        <Route path="/page1" element={<Page1/>} />
        <Route path="/page2" element={<Page2/>} />
      </Routes>
    </div>
  );
}

export default App;

[Python] Pandas export as a csv file

2021-11-30T02:00:00+11:00

Sample code that how to export data as a csv using pandas library. this function will create filename string with date as a actual filename.

from datetime import datetime
import pandas

def export_csv(_data, _headers, _filename):
	date = datetime.today().date()
	df = pandas.DataFrame(_data)
	path = 'C:\\download\\csv\\' + _filename + str(date) + '.csv'
	df.to_csv(path, header=_headers, index=False, encoding='utf-8-sig')

# Usage
headers = ['A', 'B', 'C'];
data = [];
export_csv(data, headers, 'sample');

[Spring-Security] Error - creating bean with name ‘org.springframework.security.filterChains’

2021-11-27T06:00:00+11:00

If you have below exception when configure spring security, check out the security-config.xml (name could be anything depends on your setting).

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.security.filterChains': Cannot resolve reference to bean 'org.springframework.security.web.DefaultSecurityFilterChain#0' while setting bean property 'sourceList' with key [0]; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.security.web.DefaultSecurityFilterChain#0': Cannot resolve reference to bean 'org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter#0' while setting constructor argument with key [5]; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter#0': Cannot resolve reference to bean 'org.springframework.security.authentication.ProviderManager#0' while setting bean property 'authenticationManager'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.security.authentication.ProviderManager#0': Cannot resolve reference to bean 'org.springframework.security.config.authentication.AuthenticationManagerFactoryBean#0' while setting constructor argument; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.security.config.authentication.AuthenticationManagerFactoryBean#0': FactoryBean threw exception on object creation; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'org.springframework.security.authenticationManager' is defined: 

Did you forget to add a global <authentication-manager> 
element to your configuration (with child <authentication-provider> elements)? 
Alternatively you can use the authentication-manager-ref attribute on your 
<http> and <global-method-security> elements.

Solution: To solve this problem, you need to add <authentication-manager> as mentioned below of the exception message in th security-config.xml.

The admin user here is just an example.

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans
	xmlns="http://www.springframework.org/schema/security"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
       http://www.springframework.org/schema/security
       http://www.springframework.org/schema/security/spring-security-4.2.xsd">
	<http auto-config="false">
			...
	</http>
	<authentication-manager>
		<authentication-provider>
			<user-service>
				<user name="admin" password="123"
					authorities="ROLE_USER, ROLE_ADMIN" />
				<user name="guest" password="123" authorities="ROLE_USER" />
			</user-service>
		</authentication-provider>
	</authentication-manager>
</beans:beans>

[Python] Check Null or N/A or empty String

2021-11-25T23:00:00+11:00

Sample function to check if string is None or empty "" or “N/A” or “-“

return true if str is not contains conditions.

def is_not_blank_or_na(str):
	return bool(str and str.strip()) and not bool(str == 'N/A' or str == '-' or str.startswith(' ') or str == 'None' or str is None)