
I've been working with WebSocket for some of my projects in the past. WebSocket is a technology that allow us to have realtime interaction within a platform. Here I will write about basics of WebSocket and barebone setup to try this technology.

In general I'll write about:

1. Realtime functionality requirement
1. What is WebSocket technology
1. Setting up WebSocket server on Node.js
1. Simple scripts in the browser console to interact with the server in realtime

## Realtime functionality requirement

Think about WhatsApp chat, Telegram chat, or Facebook Notifications. These are features that require realtime interactions where the users of the application expect to send/receive information without delay. There are a few ways we can achieve this.

1. Long polling

   The client ask if there is any new updates to the server. This can be in periodic intervals. Here the client need to handle when to ask for an updates to the server.

1. Server sent events [(MDN link)](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

   Server sent new informations to the client. However the client can't send information to the server (one way communication).

1. WebSocket

   This technology will allow client and server send and receive information (bi-directional).

On some cases we might choose one solution to another. For example when we need notifications for new update it might be better to do **_server sent events_** rather than wiring up WebSocket as the client doesn't need to send information to the server.

## What is WebSocket technology

WebSocket is a techology that allows client and server to send and receive informations through events. These events are fired-up on client side and the server side. The client and server then can handle these events in realtime.

WebSocket connection is initiated with `GET 1.1 UPGRADE` request from the client side, when the WebSocket server accept the request the it will give `101 Switching Protocols` response. After these handshakes that the client and WebSocket server can send and receive data in realtime.

![Client and WebSocket Server](/images/2021-05-09---client-and-websocket-interaction-diagram.svg)

[(MDN Reference for WebSocket)](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)

## Setting up WebSocket server on Node.js

Here I'll use node and [websocket package](https://www.npmjs.com/package/websocket) to wire-up WebSocket server.

1. Create a project folder

   ```
   mkdir websocket-server
   ```

1. Initialize node project

   ```shell
   npm init -y
   ```

1. Install `websocket` package

   ```shell
   npm install websocket
   ```

1. Create the index file

   ```shell
   touch index.js
   ```

1. Edit the index.js file and create basic webserver

   ```javascript
   const http = require('http');

   const httpServer = http.createServer((req, res) => {
     console.log('we have received a request');
   });

   httpServer.listen(8080, () =>
     console.log('Server is listening to http://localhost:8080')
   );
   ```

   This will create a basic server that we can run using this command:

   ```shell
   node index.js
   ```

   When we try to open `http://localhost:8080` in the browser, the script will log `we have received a request` in the command line.

1. Next lets add websocket server in the index.js

   ```javascript
   const http = require('http');
   const WebSocketServer = require('websocket').server;

   const httpServer = http.createServer((req, res) => {
     console.log('we have received a request');
   });

   httpServer.listen(8080, () => console.log('Server is listening to 8080'));

   const websocket = new WebSocketServer({
     httpServer: httpServer,
   });
   ```

   These will initialize the WebSocket for us using the `websocket` package and wire-it up to our http server

1. Next we'll need to add the WebSocket events handling

   ```javascript
   const http = require('http');
   const WebSocketServer = require('websocket').server;

   const httpServer = http.createServer((req, res) => {
     console.log('we have received a request');
   });

   httpServer.listen(8080, () => console.log('Server is listening to 8080'));

   const websocket = new WebSocketServer({
     httpServer: httpServer,
   });

   let connection = null;

   websocket.on('request', (request) => {
     connection = request.accept(null, request.origin);
     connection.on('close', () => console.log('WebSocket is Closed!'));

     connection.on('message', (message) => {
       console.log(`Received message: ${message.utf8Data}`);
     });
   });
   ```

   These will handle the WebSocket events that we receive from client.

1. To show how the server send the information in realtime lets add a function that trigger periodically to the client.

   ```javascript
   const http = require('http');
   const WebSocketServer = require('websocket').server;

   const httpServer = http.createServer((req, res) => {
     console.log('we have received a request');
   });

   httpServer.listen(8080, () => console.log('Server is listening to 8080'));

   const websocket = new WebSocketServer({
     httpServer: httpServer,
   });

   let connection = null;

   websocket.on('request', (request) => {
     connection = request.accept(null, request.origin);
     connection.on('close', () => console.log('WebSocket is Closed!'));

     connection.on('message', (message) => {
       console.log(`Received message: ${message.utf8Data}`);
     });

     serverSendMessage();
   });

   const serverSendMessage = () => {
     connection.send(`Server send message at ${new Date().toISOString()}`);

     setTimeout(serverSendMessage, 5000);
   };
   ```

   These will send a message with the date every 5 seconds to the client after the WebSocket connection is established.

## Simple script in the browser console to interact with WebSocket server in realtime

To try the WebSocket on the client side we can use browser console DevTools directly without writing any extra html stuff. So this will be pure JavaScript codes using API that are already build-in within the browser.

1. Don't forget to run the WebSocket server in command line:

   ```shell
   node index.js
   ```

1. Open your browser and the DevTools (for Chrome based browser usually we can open by pressing F12 key)

1. Then write this in the console:

   ```javascript
   let ws = new WebSocket('http://localhost:8080');
   ```

   This will initialize the WebSocket on the client side

1. Next lets log the messages that are sent by the Server

   ```javascript
   ws.onmessage = (message) => console.log(`Server: ${message.data}`);
   ```

   This will add an event listener to the `onmessage`, so everytime there is a new message from the server we will log it.

1. Next lets try sending a message from the client

   ```javascript
   ws.send('Hello server, this is from client');
   ```

   You will see the message in the command line. Now we have barebone realtime interactions between client and WebSocket server. You can play with this and send modified texts to the WebSocket server.

1. To end the connections execute this on the browser console:

   ```javascript
   ws.close();
   ```

## Summary

This write-up shows you how to code barebone WebSocket server and interact with it from client side with browser console. Obviously this is not production ready codes. These shows the basics of WebSocket interactions. We'll need to handle a lot more cases when we really want to implement realtime interactions with WebSocket.

For me personally I'd work with library such as Socket.io if I want to implement realtime feature because there are a lot of cases that are covered by the library already. Hopefully this post help you learn something new. Thanks for reading.


Barebone WebSocket with Node and Browser Console


Tahun 2021 mulai hari ini. Tahun lalu banyak capaian, juga tidak-capaian. Saya tidak punya resolusi yang konkret untuk dimulai tahun ini. Hanya saja ada beberapa keinginan yang ingin saya wujudkan.

- Mempelajari framework selain React

Saya sudah lumayan banyak berkecimpung di pengembagan aplikasi dengan basis React. Saya sadar masih banyak yang masih perlu saya sempurnakan. Tapi mungkin perlu beralih di framework lain juga untuk memperluas pandangan. Framework yang lumayan menarik bagi saya adalah Svelte.js. Entah mungkin kalau ada kesempatan situs ini saya rombak dengan Svelte.js

- Aktualisasi intelektualitas

Saya agak sulit mencari istilah yang cocok untuk ini. Tapi pada praktiknya saya ingin menuntaskan draft buku dan video tutorial yang pernah saya inisiasi.

- Belajar investasi lebih jauh

Portofolio investasi saya masih minim lebih banyak di tabungan. Sudah ada rekening saham, reksadana, dsb tapi belum saya maksimalkan. Mungkin tahun ini akan lebih banyak belajar finansial lagi.

- Intermittent fasting

Saya sudah di umur kepala tiga, dan kesehatan sudah tidak seperti dekade sebelumnya. Dari riset yang sudah saya lakukan sesuatu yang sangat besar manfaatnya untuk kesehatan saya yang bisa saya lakukan adalah puasa, mengurangi apa yang saya makan. Dampaknya akan jauh lebih besar dari olah raga (untuk saya saat ini) bila bisa mengimplementasikan dengan baik. Mungkin akan saya coba pola intermittent fasting atau puasa sunah seperti biasa. Mungkin nanti hambatan terbesar adalah mengurangi kopi waktu puasa, soalnya kalau kerja biasa ditemani kopi.

Dan mungkin beberapa yang lain.

Situs ini juga mungkin akan beralih fokus lagi untuk tahun ini. Awalnya situs ini saya desain sebagai catatan personal untuk software engineering yang saya dalami. Mungkin nanti akan saya alihkan fokusnya menjadi protofolio/branding, tuangan-tuangan pikiran, catatan-catatan, dsb.

Bahasa juga awalnya banyak menulis dengan bahasa Inggris karena saya ingin mengasah kemampuan menulis saya dalam bahasa tersebut. Tapi mungkin saya akan banyak menulis lagi dalam bahasa Indonesia, entah lihat nanti mungkin.


Permulaan di 2021


Part of my posts on learning regular expressions

## Match characters occured **zero** or more times

This trips me up. Matching character that occurede **zero** or more times using the star `*`.

```javascript
const yes = 'yattaaaaaa!'
const goodbye  = 'tata'
const sheepSays = 'baba'

const taRegex = /ta*/gi

cconst yesResult = yes.match(taRegex)
console.log(yesResult) //will result ["t", "taaaaa"]

const goodbyeResults = goodbye.match(taRegex)
console.log(goodbyeResults) // will result ["ta", "ta"]

const sheepSaysResults = sheepSays.match(taRegex)
console.log(sheepSaysResults) // will result null
```

## Find characters with Lazy Matching

Regex default to greedy matching for example

```javascript
const span = "<span>this is element</span>"
const spanRegex = /<.*>/
const results = span.match(spanRegex)

console.log(results) // will return ["<span>this is element</span>"]
```

the results will return `<span>this is element</span>` because the regex will match the longest string.

If we want to match the shortest string we use question mark `?`

```javascript
const span = "<span>this is element</span>"
const spanRegex = /<.*?>/
const results = span.match(spanRegex)

console.log(results) // will return ["<span>"]
```


Regular Expressions Note 3: Match zero character or more times and lazy matching


Part of my post series on learning regular expressions:

## Matching a group of character

We can match a group of character by using the angle brackets `[]`

```javascript
const stringToMatch =
  "The big bug is in the bog not in the big. Please, I beg you not to bug the bug"
const bgRegex = /b[iua]g/g
const results = stringToMatch.match(bgRegex)

// results will be ["big", "bug", "big", "bug", "bug"]. `bog` and `beg` will be ignored
```

## Matching a range of alphabets

We can add range to the group of character in the angle brackets `[]`

```javascript
const stringToMatch =
  "They ban the bin word. Others, circumvent this by changing the letter i with number 1 to become b1n"
const bnRegex = /b[a-z]n/gi
const results = stringToMatch.match(bnRegex)

// results will be ["ban", "bin"]
```

## Matching a range of alphabets and numbers

The range in the previous group of character example did not match the numerics so the `b1n` was not matched. We can add numerics by addding the range in the angle brackets `[]` aside from the alphabets.

```javascript
const stringToMatch =
  "They ban the bin word. Others, circumvent this by changing the letter i with number 1 to become b1n"
const bnRegex = /b[a-z0-9]n/gi
const results = stringToMatch.match(bnRegex)

// results will be ["ban", "bin", "b1n"]
```

## Negating a character

We can add a character negation in the angle bracket using caret `^` (this is the alternate character on key 6 in the number rows if you are struggling searching it like me 😂)

```javascript
const stringToMatch = "the bug is riding a bus on a bun"
const buRegex = /bu[^n]/gi
const results = stringToMatch.match(buRegex)

// results will be ["bug", "bus"]
```

## Matching characters that occur at least once

Repeating characters on can be matched using the plus `+` sign in regex

```javascript
const stringToMatch = "The bug is passing a gate"
const sRegex = /s+/g
const results = stringToMatch.match(sRegex)

// results will be ["s", "ss"]
```


Regular Expressions Note 2: match a group of characters, character negation, and at least one occurance


One aspect of programming which I often time needed is text or string processing. I often need to reach out to regex (Regular Expression), but honestly most of the time I have no idea what I was typing 😂.

Starting here I'll note some of the things I learned on Regular Expression, so that (hopefully) I will not be as clueless as the usual.

## Using pipe

We can match string with `or` logic using pipe `|`

```javascript
const stringToMatch = "I love to eat carrot"
const foodRegex = /carrot|pizza|apple/
const result = foodRegex.test(stringToMatch)
```

## Ignore case sensitivity

When matching using regex the default is we also match the case. To match regex ignoring the case we add `i` flag to the regex.

```javascript
const stringToMatch = "Do you like to eat VEGETABLE?"
const vegRegexCaseSensitive = /vegetable/
const vegRegexCaseInsensitive = /vegetable/i
const caseSensitiveResult = vegRegexCaseSensitive.test(stringToMatch)
const caseInsensitiveResult = vegRegexCaseInsensitive.test(stringToMatch)
```

## Wildcard for matching any character

To match any character we can use `.` wildcard.

```javascript
const stringToMatch = "The bug in the bag is pretty big"
const regexWithWildcard = /b.g/
const matchResults = stringToMatch.match(regexWithWildcard)
```

## Global flag for matching all occurances

The previous examples only return/match the first occurance of string matched with the regex. To find/match all occurances we can use the `g` (global) flag on the regex.

```javascript
const stringToMatch = "The bug in the bag is pretty big"
const regexWithWildcard = /b.g/g
const matchResults = stringToMatch.match(regexWithWildcard)
```


Regular Expressions Note 1: or logic pipe, wildcard, i flag, g flag


I recently need to define the return type of function. But the return type I assigned doesn't seem to work. After looking into the type definition I realize that the required return type was incomplete.

Fortunately I learned about [Type Inference](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-inference-in-conditional-types) and [ReturnType](https://dev.to/busypeoples/notes-on-typescript-returntype-3m5a) in TypeScript.

An example for using `ReturnType` for infering return type is like this:

```javascript
const parseData = (datum: string) => {
  return parseInt(datum, 10)
}

type A = ReturnType<typeof parseInt>
```

- The `typeof` will return the type of the function, which is `(datum: string) => number`.
- Then the `RetunType` will capture the return type
- The result is type A which is `number`


Typescript Note: ReturnType


In my projects, I often use `console.log` to debug output or trace some behaviors. It is tremendously helpful when developing. But if I'm not careful they can spill over to production environments, which is undesirable.

In my linter, I have set up some rules to warn when there are `console.log` in the project codebase. However, it doesn't seem to be enough. Because sometimes there are occasions where they are needed.

I found out a babel plugin for removing `console.log`, `transform-remove-console`, and recently incorporating them in my projects. I think this will improve the production build quality.

This is my setup for the babel plugin.

- Install the plugin as a development dependency

  ```bash
  yarn add --dev babel-plugin-transform-remove-console
  ```

- Create (if not existed) `.babelrc` file with this content

  ```json
  {
    "presets": ["next/babel"],

    "env": {
      "production": {
        "plugins": ["transform-remove-console"]
      }
    }
  }
  ```


Next.js Note: Removing console logs on production


To checkout a remote branch from git repository we can use these steps:

1. First `fetch` to update using

   ```bash
   git fetch
   ```

2. Then we can check the available branches

   ```bash
   git branch --all
   ```

3. Lastly checkout the remote branch

   ```bash
   git checkout --track <remote-branch>
   ```


Checkout Remote Branch


I recently read [Digital Garden](https://joelhooks.com/digital-garden) and watched this [egghead.io](https://egghead.io/lessons/egghead-sector-the-future-of-mdx-and-digital-gardens). I love the Digital Garden idea. Working on my contents here in this blog for the past few years I saw ups and downs in my writings.

In some months I got so motivated and wrote almost every day. But most of the time I got so slumped I don't want to write anything at all 😂.

I love the idea where the contents of my site are really up to me. I don't need to conform with chronological blog format to display my contents. I can do that format on some parts and in other parts, I can work on other kinds of formats.

This sparks my initial enthusiasm for creating my platform for this site. In the past I used Medium for this site, then I migrate to self-hosted WordPress. I wanted to own my platform and tools. But recently I want more. I want to create this site 'closer to the metal'.

So again I migrated my site to another platform. I statically generate this site using `Next.js` and write my contents in Markdown.

For this rework, I used the TypeScript blog starter `Next.js` template and remove some components and styles. So these reworks are almost barebone. I'll modify and experiment with things that I found interesting.

Some of my past posts are broken in this migration. I might tend to them or just let them die out. Let us see how things will go.

I also think about what do I want from this site. I'm not sure if I want this as a personal branding tool, where I showcase my expertise, or maybe just personal notes where I dump things that I learn and progressively add them.

I think I tend to want to use this site as my [Progressive Summarization](https://fortelabs.co/blog/progressive-summarization-a-practical-technique-for-designing-discoverable-notes/) tool. I often worry about my writings, are they polished enough, grammatically corrects, etc. In retrospect, I don't think it matters. I just need to output something. Dump my brain and make this as my second brain or something.

I need to curb my perfectionism and just enjoy creating content here. I also enjoy reading things on dev.to so maybe I'll also cross-post some of my posts here over there.

This post, lots of this is unpolished. I also don't know how to end this post. So let's just end this and [Learn in Public](https://www.swyx.io/writing/learn-in-public/).


Digital Garden


In react native we can adjust how ScrollView behave when it wraps children that can trigger device keyboard to be shown (e.g. TextInput). The default behaviour of ScrollView is it will dismiss the keyboard when tapping outside of the focused TextInput. We can add `keyboardShouldPersistTaps` prop to adjust this behaviour.

The prop accept one of these values:

- `never`, the default behaviour. The ScrollView will dismiss the keyboard and the children will not receive the tap.
- `always`, the ScrollView will dismiss the device keyboard and its children can catch taps.
- `handled`, the keyboard will not be dismissed by ScrollView, the children will catch the taps.

Reference:
ScrollView `keyboardShouldPersistTaps` <https://reactnative.dev/docs/scrollview#keyboarddismissmode>


React Native ScrollView Keyboard


With `useEffect` we can do data fetching when component is mounted. An example as follows:

```javascript
import React, { useState, useEffect } from "react"
import "./styles.css"

export default function App() {
  const [users, setUsers] = useState([])

  const fetchUsers = async () => {
    const fetchResponse = await fetch(
      "https://jsonplaceholder.typicode.com/users",
      { method: "Get" }
    )
    const fetchData = await fetchResponse.json()
    setUsers(fetchData)
  }

  useEffect(() => {
    fetchUsers()
  }, [])

  return (
    <div className="App">
      <button onClick={fetchUsers}>Fetch Users</button>
      {users.map(user => (
        <p key={user.id}>{JSON.stringify(user)}</p>
      ))}
    </div>
  )
}
```

The `useEffect` without dependency will run the `fetchUsers` async function when the component mounted. A better way to write the `useEffect` here is by adding the `fetchUsers` function as dependency, this won't change the functionality but will be more inline with how the `useEffect` is used in React. So the `useEffect`will be like this:

```javascript
useEffect(() => {
  fetchUsers()
}, [fetchUsers])
```

Reference:

- [https://www.robinwieruch.de/react-hooks-fetch-data](https://www.robinwieruch.de/react-hooks-fetch-data)


React Hooks: Data Fetching on Component Mount with useEffect


Using the `setState` hook we can store data from fetch API and use it in our functional component. An example for this as follows:

```javascript
import React, { useState } from "react"
import "./styles.css"

export default function App() {
  const [users, setUsers] = useState([])

  const fetchUsers = async () => {
    const fetchResponse = await fetch(
      "https://jsonplaceholder.typicode.com/users",
      { method: "Get" }
    )
    const fetchData = await fetchResponse.json()
    setUsers(fetchData)
  }

  return (
    <div className="App">
      <button onClick={fetchUsers}>Fetch Users</button>
      {users.map(user => (
        <p key={user.id}>{JSON.stringify(user)}</p>
      ))}
    </div>
  )
}
```

When we click on the `Fetch Users` button, it will run the `fetchUsers` async function. The function will store its Promise result in `setUsers` then the `users` variable will contain the data.

Reference:

- [https://www.robinwieruch.de/react-hooks-fetch-data](https://www.robinwieruch.de/react-hooks-fetch-data)


React Hooks: Manual Data Fetching and useState


In react hooks we can utilize `useEffect` hook to add codes that can "observe" the other variables or codes and run the codes inside its callback function.

An example here

```javascript
import React from "react"

export default function App() {
  const [buttonToggle, setButtonToggle] = React.useState(false)

  React.useEffect(() => {
    alert("Toggled")
  }, [buttonToggle])

  return (
    <div className="App">
      <button
        style={{ backgroundColor: buttonToggle ? "transparent" : "yellow" }}
        onClick={() => {
          setButtonToggle(!buttonToggle)
        }}
      >
        Toggle
      </button>
    </div>
  )
}
```

The `useEffect` here "observe" the changes in `buttonToggle` variable and when the variable value change it will display an `alert` in browser window.

Reference:

- <https://reactjs.org/docs/hooks-effect.html>


React Hooks: useEffect


From React there is a new way of managing state in functional components, using hooks. One of it is `useState` where we can get and set state values in functional components.

To utilize `useState` in our functional components we need to understand its parts. There are two important parts, the variable from `useState` and function which set the said variable. These two parts are destructured array values from `useState`

```javascript
const [theVariable, setTheVariable] = React.useState("initial value")
```

The `useState` accept initial value which we can define. `theVariable` will contain the state in the `useState` then the `setTheVariable` is a function which accept value that set `theVariable`

A more complete functional component example utilizing `useState` as follows:

```javascript
import React from "react"

export default function App() {
  const [buttonToggle, setButtonToggle] = React.useState(false)

  return (
    <div className="App">
      <button
        style={{ backgroundColor: buttonToggle ? "transparent" : "yellow" }}
        onClick={() => {
          setButtonToggle(!buttonToggle)
        }}
      >
        Toggle
      </button>
    </div>
  )
}
```

Here the `useState` contains the boolean value which is used as the toggle indicator for the button `Toggle`.

Reference:

- <https://reactjs.org/docs/hooks-state.html>


React Hooks: useState


When we need to do multiple fetch requests we can use `Promise.all()` to make our fetch promises parallels, which can improve the app performance.

An example of this as follows:

```javascript
const dataFetch = ["data1", "data2"]
const promiseArray = []

dataFetch.forEach(datum => {
  const fetchPromise = fetch(`https://somewhereremote.com/${datum}`, {
    method: "GET",
  })
  promiseArray.push(fetchPromise)
})

Promise.all(promiseArray)
  .then(values => {
    console.log(values)
  })
  .catch(error => {
    console.error(error.message)
  })
```

Reference:

- <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all>


Parallel Fetch Requests using Promise.all()


JavaScript does type conversion when evaluating various data types in Boolean contexts. For example:

```javascript
const jedi = "Skywalker"
const name = jedi ? jedi : "No name"
```

The `name` variable will be have `Skywalker` string as its value because the jedi was evaluated as truthy. Other type of coercion, falsy, also happens when non Boolean data types which identified as false evaluated in Boolean context, for example:

```javascript
const jedi = ""
const name = jedi ? jedi : "No name"
```

In the example above the `name` variable value will be `No name` because the `jedi` was evaluated as false.

Examples of other truthy values:

```javascript
if (true)
if ({})
if (\[\])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
```

Examples of falsy values

```javascript
if (false)
if (null)
if (undefined)
if (0)
if (0n)
if (NaN)
if ('')
if ("")
if (\`\`)
if (document.all)
```


JavaScript Truthy and Falsy


We can send or get data from remote server using Fetch API in JavaScript. The `fetch` method will retrun a `Promise`which will need to be handled using Promise `.then` or the syntactic sugar `async-await`.

An example of `GET` request, a method for getting data from server:

```javascript
const fakeJSONGetResponse = await fetch(
  "https://jsonplaceholder.typicode.com/posts/1"
)

const fakeJSONGetData = await fakeJSONGetResponse.json()

console.log({ fakeJSONGetData })
```

An example of `POST` request, a method for sending data to a server:

```javascript
const fakeJSONPostResponse = await fetch(
  "https://jsonplaceholder.typicode.com/posts",
  {
    method: "POST",
    body: JSON.stringify({
      title: "foo",
      body: "bar",
      userId: 1,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  }
)

const fakeJSONPostData = await fakeJSONPostResponse.jason()

console.log({ fakeJSONPostData })
```

An example of `PUT` request, a method for complete update on all properties:

```javascript
const fakeJSONPutResponse = await fetch(
  "https://jsonplaceholder.typicode.com/posts/1",
  {
    method: "PUT",
    body: JSON.stringify({
      id: 1,
      title: "foo",
      body: "bar",
      userId: 1,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  }
)

const fakeJSONPutData = await fakeJSONPutResponse.json()

console.log({ fakeJSONPutData })
```

An example of `PATCH` request, a method for partially updating data:

const fakeJSONPatchResponse = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
body: JSON.stringify({
title: 'foo'
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})

const fakeJSONPatchData = await fakeJSONPatchResponse.json()

console.log({fakeJSONPatchData})

An example of `DELETE` request, a method for deleting data:

const fakeDeleteResponse = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})

const fakeDeleteData = await fakeDeleteResponse.json()

console.log({fakeDeleteData})

References:

- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [JSONPlaceholder](https://jsonplaceholder.typicode.com/guide.html)


JavaScript Fetch


ES6 introduced a new way to express function in our codes, arrow function. It is a more compact way of expressing function with some bits of difference with regular function.

Before ES6, we can do something like this to make a function:

```javascript
function theFunction(objectVariable) {
  objectVariable.newProperty = "new"
  return objectVariable
}
```

In ES6 we can do the same thing with the following syntax:

const theFunction = objectVariable => objectVariable.newProperty = 'new'

It would take some time to get used to the way this syntax work. The arrow function above used some of its features to make it more concise, for example, optional parentheses on the function parameter and implicit return value.

We can also write the arrow function to looks more closely to the regular JavaScript function, for example:

```javascript
const theFunction = objectVariable => {
  objectVariable.newProperty = "new"
  return objectVariable
}
```

Now the function resembled the regular function quite a bit.

The arrow function is widely used right now on ES6 based codes because it is concise and suits the flow of lots of other new JavaScript functions. For example, Array's filter, map, reduce functions. I'll get into them more in my next writings.

There are quite a lot of nuances when using the arrow function, but knowing this fundamental way of expressing the syntax would cover quite a lot of ground to be practical.

Reference: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)


ES6 Basics: Arrow Function Expression


Recently I was asked about variable declarations in ES6 JavaScript. The person that asks me wasn't familiar with ES6 so I explained it a bit. After thinking through I think I glossed over the basics on this. I'll write my basic understandings on this topic.

## Scoping

So pre ES6 we only have `var` for declaring variables. In ES6, we have two other ways of declaring variables, using const and let. The first difference that came to my mind regarding `var` and the new variable declarations is that `var` is function scoped; `const` and `let` are block scoped (curly braces). Let's see the codes below:

```javascript
function superHeroName() {
  var name = "spiderman"
  console.log(name) // this will work printing 'spiderman' in the console
}
console.log(name) // this will print empty string because of var hoisting
```

This would turn as expected the `console.log(name)` will not output 'spiderman' but an empty string. The `var` is declared and assigned in the `superHeroName` function so its value should not be available outside the function. The variable, however, is _[hoisted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)_; declared in the global scope. Then how if we use `var` not in a function but in a block?

```javascript
do {
  var family = "Ben Parker"
  console.log(family) // this will print 'Ben Parker' in the console
} while (false)

console.log(family) // this will also print 'Ben Parker' in the console, huh!?
```

This might not work as we expected. The `var` declaration/assignment in the `do` block might be intended only as a temporary variable inside the curly braces but it _leak_ outside to the global scope.

## IIFE (Immediately Invoked Function Expression)

We might be able to use [IIFE (Immediately Invoked Function Expression)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) to prevent the variable polluting the global scope.

```javascript
;(function () {
  do {
    var lover = "Mary Jane"
    console.log(lover) // this will correctly output 'Mary Jane'
  } while (false)
})()

console.log(lover) // this will be not work
```

The `console.log(lover)` outside of the IIFE will return `ReferenceError: lover is not defined`. Signifies that the `lover` variable scoped in the IIFE and not in the global scope. This can circumvent the _leaking_ of `var` but the code might not be the prettiest thing in the world 😏

## const vs let

`const` and `let` are block scoped so when they are declared inside curly braces they can only be used there.

```javascript
do {
  const power = "heightened spider sense"
  console.log(power)
} while (false)

console.log(power) // this will not work
```

The `const` in the above example properly scoped `power` variable inside the block. When we tried to `console.log(power)` outside of the block it will return `ReferenceError: power is not defined`.

So what is the difference of `const` and `let`? well the most basic thing is that `const` doesn't allow variable reassignment and `let` can reassign. Lets see an example here:

```javascript
const bitten = "by spider"
console.log(bitten) // will output 'by spider'
bitten = "by elephant" // will not work
```

The `bitten = 'by elephant'` will not work and return error `TypeError: invalid assignment to const 'bitten'`. How about `let`?

```javascript
let spiderman = "Peter Parker"
console.log(spiderman) // will output 'Peter Parker'
spiderman = "Miles Morales"
console.log(spiderman) // will output 'Miles Morales'
```

The reassignment will work as expected. So `const` is immutable? nope! when we assign a value to`const` doesn't mean that we cant modify the assigned value but only the reference that is read-only. For example if we have an object as `const` we can't change the object to another value, but the we can modify the object properties. Lets see the code below:

```javascript
const enemy = { name: "doctor octopus", status: "uncaught" }
console.log(enemy) // will output `Object { name: "doctor octopus", status: "uncaught" }`
enemy.status = "jailed"
console.log(enemy) // will output `Object { name: "doctor octopus", status: "jailed" }`
```

So when we want to do something like a for-loop we need to use `let` as it can be reassigned for each iteration, but `const` can't.

## Temporal Dead Zone

One thing about [hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) is that all variables are hoisted, they are processed before any code executed. `const` and `let` are also hoisted, but they can't be used until they are declared. An example code:

```javascript
console.log(costume) // will output 'undefined'
var costume = "red and blue"

console.log(finance) // cannot work
let finance = "poor"

console.log(smart) // cannot work
const smart = true
```

The `console.log(finance)` will return error `ReferenceError: can't access lexical declaration 'finance' before initialization`. The same one will also happen to `console.log(smart)`. The `finance` and `smart` are actually hoisted, they are processed in the background. But they are in _Temporal Dead Zone_ they can't be used before officially declared. To fix the above code we need to rewrite it as follow:

```javascript
console.log(costume)
var costume = "red and blue"

let finance = "poor"
console.log(finance) // will output 'poor'

const smart = true
console.log(smart) // will output 'true'
```


ES6 Basics: var, const, and let


When writing React application we need components to present the application elements. However, often times creating a complete component class might be an overkill for a simple representation, for example a simple button. We can use Stateless Functional Component to simplify how we create a dumb/stateless component

Stateless component can only render props, this should be its only function. An example of a stateless functional component in a file _button.js_:

```javascript
import React from ‘react’;

const Button = props => (
   <button onClick={props.onClick}>
      {props.label}
   </button>
);

export default Button;
```

We then can use the Button in our application, like this:

```javascript
import React from ‘react’;
import Button from './button';

class MyComponentClass extends React.Component {
  render() {
    return <Button label='Stateless Button' onCLick={console.log('button')} />;
  }
}
```

Stateless component is a much simpler way to organize our dumb/stateless representations.


React Stateless Functional Component


When we get into React we might see some event handling with like `` `this.handleClick = this.handleClick.bind(this);` `` In fact, that was an example from one of [React's documentation](https://reactjs.org/docs/handling-events.html). This 'binding' is called _Constructor Bind_, we can use another way to handle an event, by using _Class properties_.

_Class properties_ eliminate the need to do binding on the Constructor of a class. Take for example the code from [React's event handling documentation](https://reactjs.org/docs/handling-events.html):

```javascript
class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isToggleOn: true }

    // This binding is necessary to make \`this\` work in the callback
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn,
    }))
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? "ON" : "OFF"}
      </button>
    )
  }
}

ReactDOM.render(<Toggle />, document.getElementById("root"))
```

The documentation specifically wrote:

> // This binding is necessary to make \`this\` work in the callback
> this.handleClick = this.handleClick.bind(this);

We can make this shorter using _Class Properties,_ leveraging arrow functions in the class we can eliminate the binding of _this_ on the constructor. Take the example above we can change it into:

```javascript
class Toggle extends React.Component {
  state = { isToggleOn: true }

  handleClick = () => {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn,
    }))
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? "ON" : "OFF"}
      </button>
    )
  }
}

ReactDOM.render(<Toggle />, document.getElementById("root"))
```

The code seem simpler than when we use _Constructor Binding_. However there is a caveat when we choose to use _Class Properties_. The performance can be potentially worse than when we use _Constructor Binding_. Worse, but in most cases it might not matter much.

Some references:

- [https://medium.com/@nikolalsvk/loosing-bind-this-in-react-8637ebf372cf](https://medium.com/@nikolalsvk/loosing-bind-this-in-react-8637ebf372cf)
- [https://medium.com/dailyjs/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557](https://medium.com/dailyjs/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557)
- [https://codeburst.io/use-class-properties-to-clean-up-your-classes-and-react-components-93185879f688](https://codeburst.io/use-class-properties-to-clean-up-your-classes-and-react-components-93185879f688)


React: Constructor Bind vs Class Properties


When developing Block for Gutenberg we start by enqueuing the JavaScript and CSS. There is two way to hook the enqueue block: [enqueue_block_editor_assets](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) and [enqueue_block_assets.](https://developer.wordpress.org/reference/hooks/enqueue_block_assets/)

The [enqueue_block_editor_assets](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) is used to enqueue the block only in the editor side of WordPress. This is used for main JavaScript Block and CSS that overrides the Block editor only styles.

```php
/\*\*
 \* Enqueue block editor only JavaScript and CSS
 \*/
function sample\_block\_editor\_scripts()
{

    $blockPath = '/assets/js/editor.blocks.js';
    $editorStylePath = '/assets/css/blocks.editor.css';

    wp\_enqueue\_script(
        'sample-blocks-js',
        plugins\_url( $blockPath, \_\_FILE\_\_ ),
        \[ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-editor' \],
        filemtime( plugin\_dir\_path(\_\_FILE\_\_) . $blockPath )
    );

    wp\_enqueue\_style(
        'sample-blocks-editor-css',
        plugins\_url( $editorStylePath, \_\_FILE\_\_),
        \[\],
        filemtime( plugin\_dir\_path( \_\_FILE\_\_ ) . $editorStylePath )
    );

}

add\_action( 'enqueue\_block\_editor\_assets', 'sample\_block\_editor\_scripts' );
```

The [enqueue_block_assets](https://developer.wordpress.org/reference/hooks/enqueue_block_assets/) is used when the Block represent on how the Block be seen by the users. Gutenberg makes the close representation of Block in the editor and front-end a possibility. This is done by hooking the main Block CSS here.

```php
/\*\*
 \* Enqueue front end and editor JavaScript and CSS
 \*/
function sample\_block\_scripts()
{
    $blockPath = '/assets/js/frontend.blocks.js';
    $stylePath = '/assets/css/blocks.style.css';

    wp\_enqueue\_script(
        'sample-blocks-frontend-js',
        plugins\_url( $blockPath, \_\_FILE\_\_ ),
        \[
          'wp-i18n', 'wp-element', 'wp-blocks',
          'wp-components', 'wp-api', 'wp-editor'
        \],
        filemtime( plugin\_dir\_path(\_\_FILE\_\_) . $blockPath )
    );

    wp\_enqueue\_style(
        'sample-blocks-css',
        plugins\_url($stylePath, \_\_FILE\_\_),
        null,
        filemtime(plugin\_dir\_path(\_\_FILE\_\_) . $stylePath )
    );

}

add\_action('enqueue\_block\_assets', 'sample\_block\_scripts');
```


Enqueuing Block in WordPress Gutenberg


There are multitudes of WordPress theme in the wild. Sometimes we saw something we like. Most of them came with customization settings that can change how WordPress present things. Sometimes what we want can't be customized easily through the settings. Child theme can be a way for us to customize the theme to our needs.

A child theme is an extension of the parent theme. There are two most basic files we need to make a child `styles.css` and `functions.php`. The parent theme still need to exist along the child theme. The additional styles can be put in the child theme's style.css and the new functionalities in the functions.php.

The basic style.css for a child theme may look like this

```php
 /*
Theme Name: Theme blabla Child
Description: Child Theme for Theme blabla
Author: Indra Lukmana
Author: http://www.indralukmana.com
Template: blabla
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blablachild
*/

.article {
    margin-bottom: 30px !important;
}
```

The style header comment section need to refer the parent theme in **Template** item. Then the custom styles can be added after the comment header. However, for this to work we also need to refer the parent style in the functions.php.

The basic content for functions.php are as follows

```php
<?php

function blabla_child_enqueue_styles(){
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/style.css');
}

add_action( 'wp_enqueue_scripts', 'blabla_child_enqueue_styles' );
```

The functions.php can also have additional functions which can customize how the theme behave. For example the following _filter_ function. It will add read more link on a post which have explicit excerpt defined. In normal behavior the post won't have read more link.

```php
function add_excerpt_read_more( $excerpt ){
    global $post;

    if ( has_excerpt( $post->ID)) {
        $more = sprintf(
            '<a class="read-more" href="%1$s">%2$s »</a>',
            get_permalink( get_the_ID() ),
            __( 'Read More', 'blablachild')
        );
        return $excerpt . $more;
    }

    return $excerpt;

}
add_filter( 'the_excerpt', 'add_excerpt_read_more');
```


WordPress Child Theme


I've been using Webpack for quite a while for my JavaScript tooling. For ES6 JavaScript codes to work in the browsers they need to be "translated" to ES5. This is because different browser versions have different supports for ES6. Therefore, if we want our ES6 codes to work on browser versions we target we need to compile then into ES5. Babel is a package for translating ES6 to ES5.

Babel 7 have new capability in specifying the browsers we want to target by using `[@babel/preset-env](https://babeljs.io/docs/en/next/babel-preset-env.html)`[package.](https://babeljs.io/docs/en/next/babel-preset-env.html) An example configurations when we target specific browsers are like this:

```javascript
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    },
  ],
]

module.exports = { presets }
```

The configuration will target the browsers listed when compiling the ES5 scripts. We can get away with only using the `@babel/env` but this won't take advantage of the browser targeting capability. I'm still not clear what this advantage entail off. I know that different browsers have different supports on ES6 ([https://caniuse.com/#feat=es6](https://caniuse.com/#feat=es6)), so I'm guessing when translating on a specific target Babel will choose which code to translate based on the browser's capability. I'm wondering if this is true, wouldn't translating all the code would be better for wide range of support? maybe I'll dig into it later.

I still haven't gotten deep enough on other configurations in Babel. But I think this basic configuration in Webpack can get me going. My dependency list in package.json:

```javascript
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
```

And my Webpack configuration:

```javascript
const path = require("path")
const UglifyJSPlugin = require("uglifyjs-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.min.js",
    path: path.resolve(__dirname, "dist"),
  },
  devtool: "cheap-eval-source-map",

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    watchContentBase: true,
    compress: true,
    port: 9000,
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: [["@babel/env"]],
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true },
          },
        ],
      },
    ],
  },
  plugins: [
    new UglifyJSPlugin(),
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
  ],
}
```


Experimenting with Babel 7 in Webpack


Function declaration `function() {}` is used in ES5 JavaScript. In ES6 JavaScript there is another way to declare function `() => {}` termed as arrow function.

Aside from syntactic difference, the most significant difference is the usage of `_this_` in a function. The regular function declaration in ES5 creates its own `_this_` in its own context. This can be suboptimal in some cases. For example:

```javascript
let book = {
  title: "ES5 vs ES6",
  author: "John Doe",
  friends: ["peter", "erin", "scott"],
  desc: function () {
    return this.friends.map(function (friend) {
      return `${friend} like the book '${this.title}', which was written by ${this.author}`
    })
  },
}

console.log(book.desc())
```

The code will output:

```javascript
;[
  "peter like the book 'undefined', which was written by undefined",
  "erin like the book 'undefined', which was written by undefined",
  "scott like the book 'undefined', which was written by undefined",
]
```

We can circumvent this by binding `this`, passing `this` as argument to the function, or create a variable with the value of `this` in the function.

Example binding `this`:

```javascript
let book = {
  title: "ES5 vs ES6",
  author: "John Doe",
  friends: ["peter", "erin", "scott"],
  desc: function () {
    return this.friends.map(
      function (friend) {
        return `${friend} like the book '${this.title}', which was written by ${this.author}`
      }.bind(this)
    )
  },
}

console.log(book.desc())
```

Example on passing `this` as argument:

```javascript
let book = {
  title: "ES5 vs ES6",
  author: "John Doe",
  friends: ["peter", "erin", "scott"],
  desc: function () {
    return this.friends.map(function (friend) {
      return `${friend} like the book '${this.title}', which was written by ${this.author}`
    }, this)
  },
}

console.log(book.desc())
```

Example `this` on a variable:

```javascript
let book = {
  title: "ES5 vs ES6",
  author: "John Doe",
  friends: ["peter", "erin", "scott"],
  desc: function () {
    const book = this
    return this.friends.map(function (friend) {
      return `${friend} like the book '${book.title}', which was written by ${book.author}`
    })
  },
}

console.log(book.desc())
```

They will output this:

```javascript
;[
  "peter like the book 'ES5 vs ES6', which was written by John Doe",
  "erin like the book 'ES5 vs ES6', which was written by John Doe",
  "scott like the book 'ES5 vs ES6', which was written by John Doe",
]
```

With arrow function in ES6 we don't need to define `this`, for example:

```javascript
let book = {
  title: "ES5 vs ES6",
  author: "John Doe",
  friends: ["peter", "erin", "scott"],
  desc: function () {
    return this.friends.map(friend => {
      return `${friend} like the book '${book.title}', which was written by ${book.author}`
    })
  },
}

console.log(book.desc())
```


JavaScript: `this` in Arrow Function and Regular Function


XXE attacks exploit XML processors by executing malicious XML files. This can be exploited by attackers if a web-based application allows its user to upload XML files.

WordPress inherently disables custom XML loading. This prevents External Entity and Entity Expansion attacks.

Reference:

[OWASP 2017: XML External Entities](https://www.owasp.org/index.php/Top_10-2017_A4-XML_External_Entities_(XXE))


WordPress Security: OWASP 2017 - A4 XML External Entities (XXE)


Confidential data can be intercepted in the middle of transport (between user and application server). This can be a great risk when associated with personal or financial data.

WordPress internals has several mechanisms which mitigate this risk:

- Usage of Portable PHP Password Hashing Framework on users password
- Integrated permission system which controls private data access.
- Front-end password strength meter which helps user measure their password strength.
- Hints on password strength improvement on a weak password
- Optional configuration requiring WordPress to use HTTPS

Reference:

[OWASP 2017 - A3 Sensitive Data Exposure](https://www.owasp.org/index.php/Top_10-2017_A3-Sensitive_Data_Exposure)


WordPress Security: OWASP 2017 - A3 Sensitive Data Exposure


Authentication allow users to access their data using their own credentials. In web application this is one of major risks. Web application which have broken authentication can allow users access data of other users which they are not supposed to have access.

Web application with broken authentication can be e through several ways, such as credentials surfing (using a list of known username and passwords to login), brute force logins, passwords stored in plain text, incorrect session management, etc.

WordPress has core mechanisms which can prevent broken authentication. Core user account details and authentication management, password salting and stretching, session destroy when logout, etc.

Reference:

[OWASP 2017 - A2 Broken Authentication](https://www.owasp.org/index.php/Top_10-2017_A2-Broken_Authentication)


WordPress Security: OWASP 2017 – A2 Broken Authentication


WordPress, as any kind of web application, can have security risks. One of it is an injection of malicious code which is not intended by the WordPress owner to be executed. This type of security risk has been defined by OWASP.

Injection can happen because of several things:

- There is no validation, sanitation, or filtering on user-generated data
- Execution of queries without proper escaping
- Hostile data input in the system

WordPress community has wrote a handbook explaining best practices which can prevent injection. The core API of WordPress already has functions which can help developers to properly validate, escape, and filter data. Some examples such as esc\_url() a function to sanitize URLs, wpdb::prepare() method to prepare SQL queries for safe execution, etc.

References:

[WordPress Plugin Handbook: Security](https://developer.wordpress.org/plugins/security/)

[My WordPress notes on security](https://wpdevnote.wordpress.com/tag/security/)


WordPress Security: OWASP 2017 - A1 Injection


In plugin development we create code to add custom functionality into WordPress. This is a powerful feature for WordPress. However if we are not careful we can introduce a performance bottleneck into WordPress.

Luckily we can test the performance of PHP components using [Xdebug](https://wpdevnote.wordpress.com/2018/06/22/wordpress-dev-environment-xdebug/). However using only Xdebug is not enough, we need a way to visualize it. For this purpose we can use Webgrind to show how the performance of our WordPress and the plugin we develop.

To enable the profiling feature in Xdebug you need to add extra settings to the php.ini

```php
xdebug.profiler\_enable = 1

xdebug.profiler\_output\_name = xdebug.out.%t

xdebug.profiler\_output\_dir = /tmp

xdebug.profiler\_enable\_trigger = 1
```

Restart the local server after the setting addition. Then install the Webgrind. Webgrind is a web application which we can install directly into our local server. However, it is highly discouraged to install it on production server. The installation is straight forward.

1. Download [Webgrind](https://github.com/jokkedk/webgrind).
2. Extract Webgrind to a folder accessible to the web server.
3. Start using Webgrind with your browser of choice by navigating to the URL of your Webgrind install, e.g. `http://localhost/webgrind`.

Reference:

[Webgrind Installation](https://github.com/jokkedk/webgrind/wiki/Installation)


WordPress Plugin Performance: Profiling using Xdebug and Webgrind


SQL Injection is code injection on SQL queries used in an application using SQL database. WordPress uses MySQL so it has risks getting an attack through SQL Injection. In OWASP (Open Web Application Security Project) Injection is listed as the top threat in web-based applications, SQL Injection is a part of it.

We can prevent SQL Injection by utilising the wpdb functions provided by WordPress. Functions such as wpdb->insert(), wpdb->replace(), wpdb->update(), wpdb->delete(), wpdb->get_results(), etc. can be used to tamper data in database. If we can we should use these kind of functions which provided by the WordPress as they are quite safe.

However, sometimes we might still need to use some queries using the wpdb->query(). This can be risky if we do not properly escape the queries used. Luckily, WordPress already provided a function to help us prevent malicious queries, wpdb()->prepare.

Using wpdb()->prepare for the SQL query in wpdb->query() can prevent injection in WordPress. An example for this is:

```php
\[code language="php"\] $wpdb->query( $wpdb->prepare(" INSERT INTO $wpdb->postmeta ( post\_id, meta\_key, meta\_value ) VALUES ( %d, %s, %s ) ", 101, "Sample meta", "Sample value" ) ); \[/code\]
```

Reference:

[wpdb Class Reference](https://codex.wordpress.org/Class_Reference/wpdb#Protect_Queries_Against_SQL_Injection_Attacks)


WordPress Plugin Security: Preventing SQL Injection


When I wrote plugins and themes I sometimes have a peculiarity when loading them in browsers. When I made changes in styles, the changes are not loaded even though I have saved them and there is no error. At first when I got this peculiarity I was frustrated searching for the errors in my codes.

As it turns out there is a feature in browsers where they cache the styles from pages that they have opened. This is actually a very good feature as when you visit a website for a first time it might get slow as the browser download all the require files for the website. But after that the website can get more faster as the downloaded files are saved in the browser's cache. However when you are developing plugins or themes and made a lot of changes this might hinders you.

Fortunately we can just clear the cache in the browsers, then the files on the website which we develop will be downloaded again. This will in-effect show the changes you made on the website.

I usually use Chrome to test my WordPress site in development. To clear the cache you can just open the DevTools or right click then inspect on the web page you want to test. Right click on the refresh button. There will be some choices here, just choose the 'Empty Cache and Hard Reload' then the style changes will be implemented.

Or the shortcut cmd + shift + r

![Chrome DevTools: Empty Cache and Hard Reload](images/screen-shot-2018-07-03-at-22-48-251.png)

For other browsers there are also a similar feature you can try to look for it in the reference below.

Reference:

[WordPress Codex: I Make Changes but Nothing Happens](https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens)

[Chrome not loading new styles after css update](https://stackoverflow.com/questions/40383732/chrome-not-loading-new-styles-after-css-update)

[Chrome not showing updated page](https://stackoverflow.com/questions/12570771/chrome-not-showing-updated-page)


Chrome DevTools: Empty Cache and Hard Reload


PHP based applications can have its structures exposed to the public. WordPress is also the same. This can have potential security risks if not taken care of properly. The agreed best practice is to configure the server, where the WordPress live, to prevent its directory structures. However, for average users, this might not be feasible.

The core WordPress files include blank index.php files which can prevent directory listing for poorly configured servers. For our own created plugin, however, we need to manually add it.

First,  let's see what happens if we do not add the file and the WordPress live on a poorly configured server. Here I am using a local dev server with minimum settings.

\[caption id="attachment_67" align="alignnone" width="2880"\]![Directory Listing on Exposed Plugin Structure](images/screen-shot-2018-07-02-at-21-41-31.png) Directory Listing on Exposed Plugin Structure\[/caption\]

Here we can see that if we type the directory address directly in the browser the content will be exposed to the public. This is risky as unauthorized people can try to figure exploits based on the plugin.

We can mitigate this risk by adding an index.php file to the directory which we want to secure.

\[caption id="attachment_68" align="aligncenter" width="282"\]![index.php Example in Plugin Folder](images/screen-shot-2018-07-02-at-21-59-40.png) index.php Example in Plugin Folder\[/caption\]

The index.php file can contain simple explanations, such as these:

```php
<?php

/\*\*

\* This file is intentionally left empty.

\*

\* This file exists to stop directory listings on poorly configured servers.

\*/
```

Then if we try to open the folder directly again it will show nothing.

\[caption id="attachment_69" align="alignnone" width="2880"\]![Direct Access Plugin Folder with index.php](images/screen-shot-2018-07-02-at-22-02-29.png) Direct Access Plugin Folder with index.php\[/caption\]

This is, of course, a sub-optimal security patching. As this is a security through obscurity. The best way of course by properly configuring the servers. However, if a proper configuration cannot be done then this file can help mitigate the risk on the plugin.

References:

[Directory Listings](https://wiki.apache.org/httpd/DirectoryListings)

[Empty index.php](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/451)

[Why do folders have Empty index.php pages?](https://wordpress.stackexchange.com/questions/114843/why-do-folders-have-empty-index-php-pages)

[Should Plugin Folders Include a Blank index.php File?](https://wordpress.stackexchange.com/questions/45365/should-plugin-folders-include-a-blank-index-php-file)


WordPress Plugin Security: Prevent Directory Listing


In plugin development, we will create PHP files which can be accessed and/or executed. These files need to be protected from unauthorized access. This is done by doing a check if the file is accessed directly.

There are two approaches which we can implement.

1. if ( ! defined('ABSPATH) ) exit;
2. if ( ! defined('WPINC') ) exit;

You can improve your plugin security by putting one of these two codes on top of your PHP files. This will in effect block unauthorized access on the files.

References:

[WordPress StackExchange Answer](https://wordpress.stackexchange.com/a/217217/146170)


WordPress Plugin Security: Preventing Direct Access


Data submission or request in WordPress can be a source of risk. We need to make sure that the data or request is submitted by the correct user with the necessary capabilities.

_Nonces_ are a generated number which only works once, this is used to verify the origin and intent for the requests done by the user. This can help to make sure that data or request submitted already have a pre-approval from our WordPress site. These _nonces_ can be used as a verifier when data or request received in WordPress.

An example risk scenario is when a spammer made a comment then creates a link to approve his spam. A site owner who got this spam has the authority to approve it, _the nonce_ can be used to check if the site owner is really intending to do what he wants to do.

To utilize nonce, first, it needs to be created and embedded into the necessary link or field in WordPress form. This is done through WordPress function wp\_create\_nonce().

The embedded nonce then can be evaluated when the appropriate user made a request using wp\_verify\_nonce().

References:

[WordPress Plugin Handbook: Nonces](https://developer.wordpress.org/plugins/security/nonces/)

[wp\_create\_nonce()](https://developer.wordpress.org/reference/functions/wp_create_nonce/)

[wp\_verify\_nonce()](https://developer.wordpress.org/reference/functions/wp_verify_nonce/)


WordPress Plugin Security: Nonces


Sanitizing output for plugin security is the process of stripping unwanted data which will be rendered to users. The unwanted data can be incorrect HTML or script tags. This process usually called escaping data. Escaping data can help in preventing Cross-Site Scripting.

For the most common scenarios, these functions can be help securing WordPress:

- `esc\_html()`
- `esc\_url()`
- `esc\_js()`
- `esc\_attr()`

References:

[WordPress Plugin Handbook: Securing Output](https://developer.wordpress.org/plugins/security/securing-output/)


WordPress Plugin Security: Sanitizing Output


WordPress offer a variety of functions to sanitize input. Sanitizing is a process of formatting input into a standardized formats. This can help mitigate potentially unsafe data and convert them into safe ones.

Functions which goes in _sanitize\_\*()_ series can do many of sanitizing process. One example is the _sanitize\_email()_. This functions will do validation on several things and strips out characters not allowed in email, some validation implemente are:

- Test for minimum email length
- Test for @ character which signify email address
- Test for invalid characters
- Test for leading and trailing periods and whitespaces

After validating the function will return a valid email address which can be used.

Other sanitizing functions will have different validation and conversion process according to the context of the data.

References:

[WordPress Plugin Handbook: Sanitizing Input](https://developer.wordpress.org/plugins/security/securing-input/)

[WordPress Code Reference: sanitize\_email()](https://developer.wordpress.org/reference/functions/sanitize_email/)


WordPress Plugin Security: Sanitazing Input


Data validation in WordPress plugin concern with the pattern of data processed by the plugin. Data with certain context should match the pattern generally acceptable. For example:

- Phone number only contain numerical content
- Postal code data contain valid postal code for designated country
- Required fields must be filled before processing

The process of validation should be done as early as possible to save resource and mitigate errors. This can be done throug JavaScript on the front end or PHP code in the plugin.

Lets try an example on Phone number

```php
<?php

function is\_phone\_number($phone\_number){

    if ( empty( $phone\_number ) ){

        return false;

    }

    if ( strlen( trim($phone\_number) ) > 17 ){

        return false;

    }

    if ( ! is\_numeric( $phone\_number ) ){

        return false;

    }

    return true;

}
```

The function above can be used to validate phone number. There are some optimization which can be added for example using regex instead of is_numeric to check exact numbers for countries. But for general phone numbers this function should do well to validate them

This function utilized as if condition can serve as a gatekeeper when we work with phone number to ensure befor we do any actions the number is valid one. An example for the function usage is if there is a field of phone_number which we try to process

```php
if ( isset( $\_POST\['phone\_number'\] ) && is\_phone\_number($\_POST\['phone\_number'\] ){
  // do something
}
```

Various PHP functions and WordPress core functions can serve as validation tools. Some examples can be seen in the reference bellow.

References:

[WordPress plugin handbook: Data Validation](https://developer.wordpress.org/plugins/security/data-validation/)


WordPress Plugin Security: Data Validation


One aspect of plugin security which we need to take notice when developing WordPress plugin is the user roles and their capabilities. WordPress can have many user and they can have specific roles with different capabilities.

The basic roles in WordPress area:

- Super Admin
- Administrator
- Editor
- Author
- Contributor
- Subscriber

Each of this roles have different capabilities which we restrict their actions in WordPress.

This restriction can be implemented in plugin by this function

current\_user\_can()

This coupled with the user capabilites as the parameter can restrict functions only to be run by the coresponding users.

For example in basic WordPress installation only users which registered as Super Admin, Administrator, Editor or Author can publish post. If we restrict functions with

current\_user\_can( 'publish\_posts' )

then Contributor and Subscriber will be restricted.

For the official explanation of 'current\_user\_can' function and more complete Roles and Capabilities mappings you can go to the references below.

References:

current\_user\_can ([link](https://developer.wordpress.org/plugins/security/checking-user-capabilities/))

User Roles and Capabilities ([link](https://codex.wordpress.org/Roles_and_Capabilities))


WordPress Plugin Security: User Capabilities


In the past, I have used various tools to edit codes, from full-featured IDE (Integrated Development Environment) to simple text editors. Around this past 5 months, I have been using [Visual Studio Code](https://code.visualstudio.com) (shorten to VSCode) for my programming and text editing. The applications suited my needs in working with a variety of programming languages and also in developing WordPress plugin and theme.

The official guide for PHP environment can be found in [here](https://code.visualstudio.com/docs/languages/php). In this post, I will show some basic extensions and settings I found useful in developing WordPress plugin.

* * *

## Code Completion

The base installation already has some basic capabilities in PHP code completion. But one extension I found useful in expanding the capability is the [PHP Intellisense Extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense) by Felix Becker.

To use the extension properly you need to set up the PHP 7+ executable path in VSCode setting. If you use XAMPP as my [previous post](https://wpdevnote.wordpress.com/2018/06/22/wordpress-dev-environment%e2%80%8b-local-server/) then you probably can use this path to set up the extension (don't forget to surround the path with double quotes).

"php.executablePath": "/Applications/XAMPP/xamppfiles/bin/php"

You also might need to turn off the basic built-in PHP IntelliSense.

"php.suggest.basic": false

* * *

## Debugging

The Xdebug I explained [before](https://wpdevnote.wordpress.com/2018/06/22/wordpress-dev-environment-xdebug/) can be used in VSCode. This will integrate the Xdebug and the VSCode debugging capability.

To enable this you will need the [PHP Debug Extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) by Felix Becker. Then add additional settings in your php.ini file in etc folder XAMPP. Don't forget to change the _.so_ filename according to your installed Xdebug.

; Enable Xdebug

zend\_extension = /Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so

\[XDebug\]

xdebug.remote\_enable = 1

xdebug.remote\_autostart = 1

* * *

These two are the most basic extensions. There are several other extensions which can expand the editor capability for WordPress development, but I will write separate posts for them.


WordPress Dev Environment: VSCode - Code Completion and Debugging


One essential process in development is debugging. One tool which can help this process tremendously is Xdebug which allow us to add breakpoints in codes and see what variables are passing and the contents of the variables when the application running. This allows us to debug the codes if we see mistakes in the variables.

To use Xdebug we need to integrate it with the local server. For Windows, there are binaries which can be installed directly to the PHP extension. For Mac, we need to take a bit more steps.

To install Xdebug make sure that you have installed the CLI make tools ([https://developer.apple.com/xcode/](https://developer.apple.com/xcode/)). Also, make sure you can run phpize from your XAMPP in the terminal. If you cannot run it then add the following line to .bash\_profile file in your home directory ( if you don’t have it just create it yourself).

```php
export PATH=/Applications/XAMPP/xamppfiles/bin:$PATH
```

First, let's open the PHP information that we used as a local server. You can open it from PHPInfo link in XAMPP dashboard. Select all texts in the page (CMD + A) and copy them. We need to do this to get a personalized installation from Xdebug page.

Then open [https://xdebug.org/wizard.php](https://xdebug.org/wizard.php) and paste the PHPInfo you copied before in here, then analyze the PHP information.

\[caption id="attachment\_28" align="alignnone" width="2880"\]![Xdebug Tailored Installation Instructions](images/xdebug-wizard.png) Xdebug Tailored Installation Instructions\[/caption\]

You will get a personalized installation step such as this.

![Xdebug Tailored Installation Instructions Steps](images/xdebug-install.png)

Just follow the steps explained in the page and Xdebug will be enabled in your server. To check this open PHPInfo from XAMPP dashboard and search for Xdebug.


WordPress Dev Environment: Xdebug


WordPress is PHP based so we need a local server for our development. There are numerous alternatives for this purpose such as XAMPP, MAMP, DesktopServer, etc. I myself prefer to use XAMPP for development. You can get it in [XAMPP Download Page](https://www.apachefriends.org/download.html). In Mac version, you can choose regular XAMPP version or the VM (Virtual Machine). I tried the VM version but cannot get it to work so I just use the regular version.

After you install it you will have a XAMPP folder in Mac Applications. You will mainly interact with *htdocs* folder and *manager-osx* app for your development.

\[caption id="attachment_15" align="alignnone" width="1764"\]![XAMPP folder in Mac Applications](images/screen-shot-2018-06-18-at-17-18-10.png) XAMPP folder in Mac Applications\[/caption\]

When you open the *manager-osx* app you will have the following window.

\[caption id="attachment_17" align="alignnone" width="1564"\]![XAMPP manager-osx startup](images/screen-shot-2018-06-18-at-17-27-01.png) XAMPP manager-osx startup\[/caption\]

The XAMPP server then can be started in the _Manage Servers._ Just click on the Start All and the server will be ready for development.

\[caption id="attachment_16" align="alignnone" width="1564"\]![XAMPP Manage Servers](images/screen-shot-2018-06-18-at-17-16-39.png) XAMPP Manage Servers\[/caption\]

When you click on the Go To Application button in the welcome tab, the app will open the XAMPP dashboard in the default browser. You must first start the servers in Manage Servers before this can happen.

\[caption id="attachment_18" align="alignnone" width="2872"\]![XAMPP Localhost Dashboard](images/xampp-localhost-dashboard.png) XAMPP Localhost Dashboard\[/caption\]

To use the local server for WordPress development you just need to copy the WordPress application to the *htdocs* folder in XAMPP applications folder.

\[caption id="attachment_21" align="alignnone" width="1764"\]![XAMPP htdocs](images/screen-shot-2018-06-18-at-21-27-39.png) XAMPP htdocs\[/caption\]

In my example, I put the WordPress application in a folder named _WordPress_. The local WordPress application then can be accessed in the browser using <http://localhost/WordPress.> The <http://localhost> URL is the local server served by the XAMPP and the WordPress in the URL is the folder name.

The next step is installing WordPress and setup the database. The process is straightforward the WordPress application offer step-by-step guidance on the installation process.


WordPress Dev Environment:​ Local Server


Thank you for joining me. This blog will be containing my personal notes on WordPress development (Plugin and Themes). This will comprise of best practices I had learned and implemented in my works, tools that I used, etc.

Actually, I already have physical notes that I wrote in my own notebook. But as time goes on I think I need to put them online. My notes are messy and have low readability. By putting them online I need to edit them for the general audiences. This in effect will make me think about what I am writing and the contents more. Hopefully, this can crystallize my own understanding (and probably other readers).

These notes, however, are my own personal practice. The official guidelines in WordPress Codex would be much more detailed and serve general audiences better. Some of my notes would probably not suit other developers. Some others might find pointers for their works.

Nevertheless, I hope I can take my writing skill up a notch with this blog.

The first thing to set up before we delve into programming in WordPress is the environment. I am using a Macbook so my examples will be tailored more for Mac users in this post. The tools, however, are cross platforms so if you want to use it in Windows, Linux, or something else you can find the respective tutorials easily.

After (or while) setting-up the environment I will delve into practices in WordPress development. So let's begin.
