Before any installation, you should approve Xcode license agreement by the following command:
sudo xcodebuild -license |
You should execute the following command to install Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
If you are asked about Xcode Command line tool while installing with Homebrew, please install it.
If you want to use a coftable Zsh customized by the community, let’s install
robbyrussell/oh-my-zsh.
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" |
You should install Git command line tool:
brew install git |
After installing Git, we recommend to set global .gitignore
:
# install generator for .gitignore |
You should set basic passwords to skip filling password by vi ~/.netrc
:
machine github.com |
In addition, please add a alias git push-f
to vi ~/.gitconfig
[alias] |
If you want to fill a path more quickly,
wting/autojump is one of the greatest solutions.
brew install autojump |
After installing, set the following setting by vi ~/.zshrc
# autojump |
After the setting, execute the following command to reflect the setting:
source ~/.zshrc |
brew install fzf |
After installing, set the following setting by vi ~/.zshrc
# fzf |
After the setting, execute the following command to reflect the setting:
source ~/.zshrc |
Ricty is a fonts for programming, if you want to try it, please set the following command:
# Installing HackGen |
To avoid installing unnecessary documents, add the following setting vim ~/.gemrc
:
install: --no-document |
After the above setting, let’s install the following rbenv and Ruby-build:
# installing rbenv / ruby-build |
Edit the following setting by vi ~/.zshrc
:
# rbenv |
The setting is reflected by the following command:
source ~/.zshrc |
Install Ruby by rbenv:
# show list of ruby versions which is able to install |
Please refer to nvm: Node Version Manager and install it.
brew install yarn |
Install PostgreSQL:
brew install postgresql |
Please set alias to vi .zshrc
:
# Docker |
After setting, reflect the upper settings:
source ~/.zshrc |
Download JDK from Java SE - Downloads / Oracle and install it.
After install JDK, you should install Maven & gradle too.
brew install maven32 gradle |
After that, please write the bellow code in .zshrc
:
# Java |
Please refer to Cloud SDK | Cloud SDK and install it.
brew install heroku/brew/heroku |
If you use Chromedriver for selenium test or etc, please execute the follows:
brew tap homebrew/cask |
Please refer to the following articles and configure it.
Please write the bellow code in .zshrc
:
# nodebrew(Node.js) |
ln -s /Applications/SourceTree.app/Contents/Resources/stree /usr/local/bin/ |
Application > System Preferences > Keybord > Shortcut > Keybord > Move focus next window |
Application > System Preferences > Keybord > Shortcut > Input Source > Select the previous source > command + space |
Application > System Preferences > Keybord > Shortcut > Spotlight > Show spotlight search > control + space |
Application > System Preferences > Sharing > Computer Name |
Application > System Preferences > Mouse > Tracking Speed |
sudo defaults write bluetoothaudiod "Enable AptX codec" -bool true |
defaults write -g KeyRepeat -int 2 |
Before any installation, you should approve Xcode license agreement by the following command:
sudo xcodebuild -license |
You should execute the following command to install Homebrew:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
If you are asked about Xcode Command line tool while installing with Homebrew, please install it.
If you want to use a coftable Zsh customized by the community, let’s install
robbyrussell/oh-my-zsh.
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" |
You should install Git command line tool:
brew install git |
After installing Git, we recommend to set global .gitignore
:
# install generator for .gitignore |
You should set basic passwords to skip filling password by vi ~/.netrc
:
machine github.com |
In addition, please add a alias git push-f
to vi ~/.gitconfig
[alias] |
If you want to fill a path more quickly,
wting/autojump is one of the greatest solutions.
brew install autojump |
After installing, set the following setting by vi ~/.zshrc
# autojump |
After the setting, execute the following command to reflect the setting:
source ~/.zshrc |
Ricty is a fonts for programming, if you want to try it, please set the following command:
# Installing Ricty |
To avoid installing unnecessary documents, add the following setting vim ~/.gemrc
:
install: --no-document |
After the above setting, let’s install the following rbenv and Ruby-build:
# installing rbenv / ruby-build |
Edit the following setting by vi ~/.zshrc
:
# rbenv |
The setting is reflected by the following command:
source ~/.zshrc |
Install Ruby by rbenv:
# show list of ruby versions which is able to install |
Install PostgreSQL:
brew install postgresql |
Please set alias to vi .zshrc
:
# Docker |
After setting, reflect the upper settings:
source ~/.zshrc |
Please refer to nvm: Node Version Manager and install it.
Download JDK from Java SE - Downloads / Oracle and install it.
After install JDK, you should install Maven & gradle too.
brew install maven32 |
After that, please write the bellow code in .zshrc
:
# Java |
.
Please refer to Cloud SDK | Cloud SDK and install it.
brew install heroku/brew/heroku |
If you use Chromedriver for selenium test or etc, please execute the follows:
brew tap homebrew/cask |
Please refer to the following articles and configure it.
Please write the bellow code in .zshrc
:
# nodebrew(Node.js) |
ln -s /Applications/SourceTree.app/Contents/Resources/stree /usr/local/bin/ |
Application > System Preferences > Keybord > Use all F1, F2, etc... |
Application > System Preferences > Keybord > Shortcut > Keybord > Move focus next window |
Application > System Preferences > Keybord > Shortcut > Input Source > Select the previous source > command + space |
Application > System Preferences > Keybord > Shortcut > Spotlight > Show spotlight search > control + space |
Application > System Preferences > Sharing > Computer Name |
Application > System Preferences > Mouse > Tracking Speed |
Install Scrapy and Scrapyinghub library at the first time:
pip install scrapy shub |
After then, please create a new project for Scrapy:
scrapy startproject PROJECT_NAME |
In scrapy, you create some spiders which is crawler in a project. You can create the spider by the following command:
# Generate code to scrape a new site |
After the above command, please change spiders/blogsider.py
:
import scrapy |
So, your spider can get title in entry list.
You can execute your crawler on local:
# Execute scraping in local |
If you create an account on Scrapy Cloud - Scrapyinghub, you can deloy your code to there and execute it on theere.
After creating the account, please create project and confirm API key and Project Id.
Create scrapinghub.yml
:
projects: |
Please set your project id and stack information which you want to use. If you want to know more detail of stack information, please see shub/deploying.
Let’s deply your code to Scrapyinghub with the API key:
# Install a library for scrapying hub |
After then, you can confirm the result items by Scrapyinghub screen.
print("Existing settings: %s" % self.settings.attributes.keys()) |
If you want to know more detail, please see https://doc.scrapy.org/en/latest/topics/settings.html .
Scrapy Cloud on Scrapyinghub has useful API. Please confirm as follows:
https://doc.scrapinghub.com/scrapy-cloud.html
Scrapy provides reusable item pipelines for downloading files attached to a particular item.
If you want to know more detail, please see official document: Downloading and processing files and images.
About settings.py
:
DEPTH_LIMIT
: Depth to scrapeDOWNLOAD_DELAY
: Intervals for downloading data in scrapingpip install scrapy-sentry |
# sentry dsn |
In Python, there are two type of string.
str = u'...'
bytes = b'...'
# str => byte |
s = "This be a string" |
str = "this is string example....wow!!!"; |
s = "Kilometer" |
x = 'blue,red,green' |
'test\n\r'.replace('\n', ' ').replace('\r', '') #=> 'test' |
number=5 |
s = "This be a string" |
This method returns a copy of the string with all occurrences of substring old replaced by new.
str = "this is string example....wow!!! this is really string" |
' Hello '.strip() #=> 'Hello' |
a = 'sample' |
A list comprehension consists of the following parts:
[i for i in range(10)] #=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] |
lst = ['a'] |
>> len([1,2,3]) #=> 3 |
list1 = ['1', '2', '3'] |
Converting multi dimensional array to flatten array is as follows:
l = [[1, 2, 3], [4, 5, 6], [7], [8, 9]] |
myList = ['a','b','c','d'] |
lst = ['a', 'b', 'b', 'c'] |
if "key" in dict: |
format(f, ".15g") |
a = (1, 2, 3) |
r'...'
is literal for Regex. It is better to use it for Regex.
import re |
p = re.compile('name (.*) is valid') |
import re |
This is example for removing HTML tags/formatting from a string:
import re |
import datetime |
pip install dateutil
and add the following code:
from dateutil import parser |
from datetime import datetime |
import time |
datetime.datetime(2012,4,1,0,0).timestamp() |
int(x) |
The following code is little strange:
sys.path.append(os.path.dirname(os.path.abspath(__file__)) + '/../sub_package1') |
Installing the whole root package and placing the sub packages under it will make the loading of the module natural.
mkdir sample_project/root_package |
The the above directory structure supports the following loading pattern.
from root_package.sub_package1 import SubPackage1 |
@classmethod
With @classmethod
, we don’t have to specify the class name internally.
|
In Python, the null
object is the singleton None
.
x = "OK" if n == 10 else "NG" |
raise RuntimeError('specific message') from error |
super().__init__()
methodsclass Polygon(object): |
def func(a, b, *, option1=1, option2=2): |
from .user import User |
import sys |
isinstance([0, 10, 20, 30], list) #=> True |
id(x) |
JSON decoder can not load multiple JSON object like this:
{"name": "foo"} |
It makes some error json.decoder.JSONDecodeError: Extra data..
If you want to load multiple JSON object, please use as follows:
import json |
Generate CSV file from list(array):
import csv |
file = open(“testfile.txt”, ”w”) |
import os |
if os.environ.get('abc'): |
from functools import lru_cache |
lst = list(gen) |
mkdir PROJECT_DIR |
Create requirements.txt
:
Django==2.0.7 |
You will install following libraries:
Add Dockerfile
:
FROM python |
Add docker-compose.yml
:
version: '3.5' |
Start a Docker container and use bash in the container by the following terminal commands:
docker-compose up -d |
If you want to stop the docker containers, please execute docker-compose down
.
In docker container, please execute it:
django-admin.py startproject myapp |
Create new application in your project:
python manage.py startapp cms |
python manage.py migrate |
python manage.py runserver |
After then, please execute open http://$(docker-machine ip):8000/
in your local terminal(not docker container).
Configure myapp/setting.py
:
ALLOWED_HOSTS = ['DOCKER_MACHINE_IP'] # Please add docker machine ip |
# Input user id and password |
You can logging into admin by open http://$(docker-machine ip):8000/admin
with the above user id and password
Modify cms/admin.py
:
from django.contrib import admin |
Modify cms/models.py
:
from django.db import models |
# Create migration file |
Modify cms/views.py
:
from django.shortcuts import render, get_object_or_404, redirect |
Create cms/templates/cms/base.html
:
{% load i18n static %} |
Create cms/templates/cms/book_list.html
:
{% extends "cms/base.html" %} |
Create cms/templates/cms/book_edit.html
:
{% extends "cms/base.html" %} |
Create cms/forms.py
:
from django.forms import ModelForm |
Create cms/urls.py
from django.urls import path |
Modify admin/urls.py
:
from django.contrib import admin |
http://$(docker-machine ip):8000/cms/book/ |
pip install google-cloud-bigquery |
please see https://cloud.google.com/bigquery/docs/reference/libraries .
Additionally, please set the PATH to environment variables.
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[FILE_NAME].json" |
Create a dataset if there is not the dataset:
from google.cloud import bigquery |
Create a table if there is not the table:
from google.cloud import bigquery |
You can add description or required option to schema information.
BQ_TABLE_SCHEMA = [ |
If you want to know more detail for SchemaField
method, please see bigquery.schema.SchemaField
Upload tuple object to BigQuery. It use stream buffer, so I don’t recommend it.
from google.cloud import bigquery |
from google.cloud import bigquery |
This is a sample which is uploading a CSV file to google cloud storage and load the CSV file to BigQuery.
Before coding, please execute as follows:
pip install google-cloud-storage |
After installing google-cloud-storage
, add following functions:
from google.cloud import bigquery |
If you want to delete some records in BigQuery, please add #standardSQL
, like this:
#standardSQL |
More Detail: Setting a query prefix
yarn global add serverless |
If you want to develop a function with Python, it is better to use Dockerfile, because it is easy to use pip library in lambda.
Create Dockerfile
for development:
FROM python:3.6 |
Also, create docker-compose.yml
:
version: '3.5' |
After then, create .env.docker
:
aws_access_key_id=YOUR_ACCESS_KEY_ID |
Please add your AWS Access information and do not commit the .env.docker
file in git repository.
docker-compose up -d |
sls config credentials --provider aws --key $AWS_ACCESS_KEY_ID --secret $AWS_SECRET_ACCESS_KEY |
Create new service:
# Create service with Python 3.x |
Modify serverless.yml
configuration file:
(diff --no-index --unified=1 serverless.org.yml serverless.yml
):
@@ -25,3 +25,3 @@ provider: |
Enable to confirm your devloping function on local
# Call the function |
After development, you can deploy your code by one command:
sls deploy -v |
Enable to confirm your devloping function on local or you can call your API by curl
:
# Call the function |
If you want to use library, please install pip libraries as follows:
# In docker |
sls remove |
You can configure memory size and timeout for function in AWS lambda:
# https://serverless.com/framework/docs/providers/aws/guide/functions/ |
If you want to know more detail, please see https://serverless.com/framework/docs/providers/aws/guide/functions/ .
Please configure including/excluding a file or a folder.
# you can add packaging information here |
If you want to know more detail, please see https://serverless.com/framework/docs/providers/aws/guide/packaging/
Enable to configure cron/scheduled job.
# Cron (scheduled job) information |
If you want to know more detail, please see https://serverless.com/framework/docs/providers/aws/events/schedule/
My impression for serverless is as follows:
serverless deploy
) is simple and useful to create the required IAM, set up CloudWatch logs, set up S3 for deployment, deploy, etc.Node version is 6.14.0, so please be careful: https://cloud.google.com/functions/docs/writing/ .
echo '6.14.0' > .nvmrc |
Create a project:
serverless create --template google-nodejs --path gcf-nodejs |
Install npm libraries:
cd gcf-nodejs |
https://serverless.com/framework/docs/providers/google/guide/credentials
serverless deploy |
# Confirm your code by function |
If you want to know more detail, please see https://serverless.com/framework/docs/providers/google/guide/quick-start/ .
If your function read/edit data in DynamoDB table, you can add these additional permission statements directly in your serverless.yml
:
provider: |
If you want to know more details, please see https://serverless.com/blog/abcs-of-iam-permissions/ .
Load and delete a credential data from environment variable in AWS lambda:
def load_credential(): |
Whole files of this tutorial are as follows:
https://github.com/morizyun/react-redux-typescript-firebase-auth
It will be needs for using Firebase authentication.
You can install create-react-app on command line:
# If you have not install it yet, please do: |
After then, you can run app process by yarn start
on terminal and open http://localhost:3000
.
Also, please create some directories:
Please change tslint.json
to add as follows:
{ |
# Create folders |
Create src/index.ts
file:
import * as React from "react"; |
Add src/constants/routes.ts
file:
export const SIGN_UP = "/signup"; |
Create src/components/Account/index.tsx
file:
import * as React from "react"; |
Create src/components/App/index.tsx
file:
import * as React from "react"; |
Create src/components/Home/index.tsx
file:
import * as React from "react"; |
Create src/components/Home/UserList.tsx
file:
import * as React from "react"; |
Create src/components/Landing/index.tsx
file:
import * as React from "react"; |
Create src/components/Navigation/index.tsx
file:
import * as React from "react"; |
Create src/components/PasswordChange/index.tsx
file:
import * as React from "react"; |
Create src/components/PasswordForget/index.tsx
file:
import * as React from "react"; |
Create src/components/PasswordForget/PasswordForgetForm.tsx
file:
import * as React from "react"; |
Create src/components/Session/withAuthentication.tsx
file:
import * as React from "react"; |
Create src/components/Session/withAuthorization.tsx
file:
import * as React from "react"; |
Create src/components/SignIn/index.tsx
:
import * as React from "react"; |
Create src/components/SignIn/SignInForm.tsx
file:
import * as React from "react"; |
Create src/components/SignOut/index.tsx
file:
import * as React from "react"; |
Create src/components/SignUp/index.tsx
file:
import * as React from "react"; |
Create SingUpForm.tsx
file:
import * as React from "react"; |
After then, please confirm http://localhost:3000
again. You can see some pages for sign up, sign in, password reset, change password and sign out.
Create src/firebase/auth.tsx
file:
import { auth } from "./firebase"; |
Create src/firebase/db.ts
file:
import { db } from "./firebase"; |
Create src/firebase/firebase.ts
file:
import * as firebase from "firebase/app"; |
Create src/firebase/index.ts
file:
import * as auth from "./auth"; |
Create src/reducers/index.ts
file:
import { combineReducers } from "redux"; |
Create src/reducers/session.ts
file:
const INITIAL_STATE = { |
Create src/reducers/user.ts
file:
const INITIAL_STATE = { |
Create src/store/index.ts
file:
import { createStore } from "redux"; |
Whole files of this tutorial are as follows:
https://github.com/morizyun/react-redux-typescript-firebase-auth
This article describes how to setup Jest with TypeScript.
yarn add --dev jest ts-jest @types/jest |
Modify package.json
to add run test configuration
.
(If you want to run test sequentially, please use jest --runInBand
.)
"scripts": { |
Create jest.config.js
file for configuring Jest.
module.exports = { |
Create ./__tests__/setup.ts
file for putting common configuration.
(e.g. clean up after all tests have run or setuping/closing DB)
// Example |
Create a ./src/sum.ts
function file.
const sum = (a, b) => { |
After create a file which you want to write test, add ./__tests__/specs/sum.ts
test file.
import { sum } from "../../../src/sum.ts"; |
Run the test.
yarn test |
supertest suports unit test for Express.js App.
yarn add supertest # npm install supertest --save-dev |
import * as request from "supertest"; |
If I want to use create sample data, I needs to write the following things:
let user; |
If you don’t have a development environment for Node.js, I recommend installing nvm. If you are interested, please see my post nvm: Node Version Manager .
Before we get started, we should install TypeScript and TypeScript Node:
yarn global add typescript ts-node # npm install -g typescript ts-node |
Create a project folder and initiate the npm project.
# Create a folder and change directory to the folder |
Install Express.js and dependencies.
yarn add @types/express express body-parser # npm install --save @types/express express body-parser |
Create tsconfig.json
file.
{ |
Create a folder to put TypeScript files. You will put your TypeScript files.
mkdir src |
Create nodemon.json
file.
{ |
Edit package.json
file to add script configuration.
"scripts": { |
Create src/app.ts
file.
import * as express from "express"; |
Additionally, generate src/server.ts
.
import app from "./app"; |
So, for your development, you can run a dev server by the following command:
yarn dev |
Create src/routes
folder and add src/routes/MainRoutes.ts
file.
import { Request, Response } from "express"; |
After then, you should create src/controllers
and add src/controllers/MainController.ts
file.
import * as express from "express"; |
After creating the route file, we need to import it to src/app.ts
:
import * as express from "express"; |
Now you can see the result in Browser (http://localhost:3000
).
This is Dockerfile
for TypeScript & Express.js.
FROM node |
basic-auth-connect supports basic authentication in Express v4 apps.
Please run the following command:
yarn add basic-auth-connect |
Add following code:
import * as basicAuth from 'basic-auth-connect'; |
After then, if you provide BASIC_AUTH_USER
and BASIC_AUTH_PASSWORD
environment variable, you can use basic authentication in Express app.
Hopefully, this article will help you understand the basic of Big O notation with JavaScript sample code.
O(1)
O(1)
shows the execution time(or space) of an algorithm is always same regardless of the size of the input data set.
function isFirstElementNull(elements) { |
O(N)
O(N)
illustrates an algorithm’s performance will grow linearly and in direct proportion to the size of the input data set. The example is as follows:
function findValue(elements, expect) { |
In Big O notation, we should always assume the upper limit where the algorithm will perform the maximum number of iterations. So, in that case, the worst case is return false
after finishing the loop.
O(N**2)
O(N**2)
(N squared) describes an algorithm whose performance is directly proportional to the square of the size of the input data set. This is common with algorithms that involve nested iterations. O Notation of deeper nested iteration will be O(N**3)
, O(N**4)
or etc.
function hasDuplicatedValue(elements) { |
O(2**N)
O(2**N)
represents an algorithm whose growth doubles with each addition to the input data set and it’s exponential.
function fibonacci(number) { |
O(log N)
Big O notation of Binary search like following example is O(log N)
.
function binarySearch(elements, expect) { |
O(log N)
algorithm like the binary search denotes produces a growth curve that peaks at the beginning and slowly flattens out as the size of the data sets increase. This makes algorithms extremely efficient when processing with large data sets.
I wrote this article referencing A beginner’s guide to Big O notation - Rob Bell.
In addition, I could understand it with the following articles:
]]>In this post, I will share some points that you should keep in mind in coding.
eval
If eval
get user input, it can open up your code for injection attacks and it is slow as it will run the interpreter/compiler.
use strict
To invoke strict mode, write use strict;
statement before any other statements;
You can opt-in to use a restricted variant and eliminate (Undeletable properties, Object literals must be unique, etc)
; |
sudo node app.js
Your process can bring down the entire system, as it will have a credential to do anything if you use sodo node app.js
. Please set up an HTTP proxy/server (Nginx, Apache) to forward a request.
Fo example, child_process.exec
makes a call to execute /bin/sh
.
tmpfile
Please pay extra attention to tmpfile
, like handling uploading files. These files can easily eat up all your disk space.
HttpOnly
cookieBy default, cookies can be read by JS on your same domain. This mean is dangerous in case of Cross-Site Scripting & any third-party JS library can read them. So, you should set HttpOnly
flag on a cookie.
helmetjs/helmet help secure Expres apps with various HTTP header, for example CSP, crossdomain, xframe, xssfilter and much more.
Example is as follows:
<body onload="document.form[0].submit()"> |
The above snippet can easily delete your user profile.
To prevent CSRF, you should add CSRF token to your form.(Express or other famous Node.js framework support the token.)
There is some greate middlewares in Express and Koa, like them:
To protect your apps from a brute force attacks, you have to implement some kind of rate-limiting. Both Express and Koa has great middlewares for it.
In Express, you can easily create a cookie using expressjs/cookie-session or some other middlewares. These libraries prevent Cookie security risks.
var cookieSession = require("cookie-session"); |
To avoid the injection, you probably use the following modules:
Node Security Project is a great tool that can check your used modules for know vulnerabilities. The tool adds security checks right into your GitHub pull request flow.
Snyk is sililar to the Node Security Project, so please check it too.
The goad of Retire.js is to help deletet use of version with known vulnerabilities.
.bind(this)
We can lose .bind(this)
by using arrow function.
import React, { Component } from "react"; |
We should use “Stateless functional components”, if it is possible.
// Bad |
HOC + Functional Stateless Component is a good solution in stateless functional components.
According to responsibilities, we should separate React components.
// Bad |
Let’s use object-rest-spread to update difference ditection in React state.
// object-rest-spread |
Flux Standard Action is a human-friendly standard for Flux action objects.
// Good |
Please be careful the following methods. In the feature, them will be un-usable. It is useful command: reactjs/react-codemod.
componentWillMount
componentWillReceiveProps
componentWillUpdate
npm
, it is recomended to use in sever side.Installation command for CasperJS is as follows:
npm install casperjs -g |
The following code is a a script to scrape web page by using CasperJS.
In this case, I tried to be able to scpecify URL to scrape and a destination to save scraped HTML.
// scrape.js |
After that, if you run the command below, HTML of your target URL will be saved.
casperjs scrape.js https://google.com /tmp/html.txt --ssl-protocol=TLSv1 |
Happy Hacking!
While using PostgreSQL DB, sometimes you may want to know which table/index is using capacity.
SELECT pgn.nspname, relname, pg_size_pretty(relpages::bigint * 8 * 1024) AS size, CASE WHEN relkind = |
Source of the above SQL is here:
PostgreSQL seems to have unnecessary data remaining index unless you delete record well.
If there is such kind of data, it is better to run REINDEX
command, like this:
REINDEX { INDEX | TABLE | DATABASE | SYSTEM } name [ FORCE ] |
It would be nice to use pg_repack
which rebuilding a bloated table / index and rearranging records order to a specified index.
It can run online because it does not keep locking.
Control a position of NULL in sort order:
ORDER BY some_time DESC NULLS LAST |
By the way, the default of PostgreSQL is NULLS FAST
Happy Hacking!
]]>Aribnb’s style guide is really great and easy to understand. ESLint also check your code based on the style guide.
Install following libraries:
npm install --save-dev eslint babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react |
ESLint configuration is as follows:
// .eslint.json |
Please see moore detail Configuring ESLint.
./node_modules/bin/eslint sample.js |
overcommit is a git hook management tool which can execute various command before git commit, push or etc.
The following configuration is how to use ESLint with overcommit.
At first, overcommit configuration like this:
# .overcommit.yml (Add following comfigugration) |
Ater the configuration, execute bundle exec overcommit --sign
, so ESLint will be executed automatically before git push
.
The configuration of free CI wercker is as follows:
eslint: |
Happy Hacking!
The following code is the library istallation command:
$ npm install react-bootstrap --save |
[React-Bootstrap] (https://react-bootstrap.github.io) does not include Bootstrap CSS, so we need to load CSS by yourself.
In my opinion, it is better to load CSS yourself because we can use our favorite theme. Also we can manage the CSS by npm
.
<!-- Latest compiled and minified CSS --> |
A usual Bootstrap navigation bar will be the following code:
// components/NavigationSample.jsx |
For example, above layout will be following codes:
// components/LayoutSample.jsx |
<Col xs={12} md={4}>
=> <div class="col-md-4 col-xs-12">
<Row>
=> <div class="row">
<Grid>
=> <div class="container">
<Button>
=> <button type="button" class="btn">
Happy Hacking!
Install following libraries:
$ npm init -y |
Add following codes to .babelrc
:
{ |
Please add following codes in webpack.config.js
:
module: { |
In the context of React, CSS Modules look like this:
/* css/table-custom-styles.scss */ |
In ES6 syntax, we can support CSS like this:
// components/Table.jsx |
ES7 decorators syntax is as follows:
// components/Table.jsx |
Happy Hacking!
brew upgrade |
npm install -g create-react-app |
In this section, we are using RubyGem react_on_rails.
At first, add the following to your Gemfile and bundle install
:
gem 'react_on_rails' |
Commit this to git and please run following commands:
# Run the generator with a sample "Hello World" App with React.js |
Please see http://localhost:3000/hello_world.
All JavaScript in React On Rails is loaded from npm: react-on-rails.
To manually install this, please execute following command like this:
cd client && npm i --saveDev react react-on-rails react-helmet nprogress |
Supporting following flow:
class ApplicationController < ActionController::Base |
Usage example is as follows:
class ArticlesController < ApplicationController |
Entry point of shared JavaScript code is like this:
// client/entry_points/main.js |
actionPath
import React from "react"; |
When a user clicks a link, a client communicates with the server with XHR and post a state to Router.
So I use the original Link tag instead of a tag.
import React from "react"; |
Link
example is as follows:
<Link href="/">txt</Link> |
import React from "react"; |
This is a script to use webpack
in deploy process of ElasticBeansTalk.
To use webpack you need to run npm install
beforerake assets: precompile
.
(10
is depend on each environment, so please fix it.)
files: |
This article has created by the following Japanese articles. Thank you very much, @r7kamura!
It is a React Component sets supprting Google Material Design Guideline.
The body of ES6 arrow functions share the same lexical this
as the code that surrounds them.
// before |
Most of your components would be stateless functions:
import React from 'react' |
A component can have a attribute to identify the component named ref
.
All ref in the same componet are grouped into refs
.
If you write the following code:
<input type="text" ref="name"/> |
You can access the element by this.refs.name
or this.refs.mail
.
// components/Parent.jsx |
It is possible to draw in raw HTML by using dangerouslySetInnerHTML
.
<div className="text" dangerouslySetInnerHTML={{__html: this.props.message}}> |
let children = React.addons.createFragment({ |
[Number].toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,'); |
In React.js, we should not use target='_blank'
in link tag.
We should add rel="noreferrer noopener"
import React from "react"; |
Error is as follows:
Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {...}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. |
Solution:
var newArray = this.state.oldArray.map(function(obj){ |