
CSS stands for Cascading Style Sheets. It is a language for defining how web
pages should be styled, whether texts bold or not, spacing between elements,
etc. CSS in a way is easy to pickup, but tricky to master. That is why there are
a lot of toolings, techniques, frameworks, etc developed to ease how to do
stylings.

This is an example of CSS _rule_ / _ruleset_, CSS codes that would apply styling
to a web page.

```css
  h1, .heading {
    font-weight: bold;
    font-size: 3rem;
    color: blue;
  }
```

The snippet have anatomy of these:

- The _rule_ have _group of selector_ `h1, heading` that target the HTML
  elements corresponding with `h1` tag and `heading` class.
- In the code snippet above the curly brackets and the things between is a _code
  block_.
- _declaration_ is line of code that is within the _code block_, e.g:
  `font-weight: bold;`
- Within _declaration_ we have three main things to take a note: _css property_,
  _colon_, _value_, and _semicolon_. For example:
  ```
  font-weight: bold;
  ```
  - `font-weight` is _css property_.
  - `bold` is _value_.
  - _colon_ separate the _css property_ and _value_.
  - _semicolon_ is ending the _css declaration_.


CSS Basics: Syntax Fundamentals


I've been doing programming for more or less 10 years, in different technologies and devices. I've done some desktop applications with C++, Java, and more recent ones with JavaScript (Electron). I've done mobile apps with React Native. Some data science with Python and R. But most of my works in the years are in the Web (PHP, JavaScript, CSS, etc).

A lot of my past knowledges are obsolete (even atrophied) because I’m not actively work with these technologies anymore, for example Java, C++, Python.

Currently, for the past few years I’m mainly working with JavaScript stack, React for Front-End and Node for Backend. I still have a lot of things to learn, but I think I’m quite comfortable to work with these stacks.

For a lot of things I might not directly know how to use particular technologies or solve exact problem, but I can figure out how to look for the informations needed to solve. For example, I recently need to validate JSON object against JSON Schema. I can write my own validator with JSON.parse but this might not be the best solution. So I look into existing solutions and found [AJV](https://ajv.js.org/) library that helps to solve this validation.

I’ve always been wanting to deepen my fundamentals in web engineering. For example, I usually use CSS frameworks to speed up developments and standardize the engineering. I know how to use flex and grid for layouting, CSS rules and their properties, but I still feel that my knowledge of CSS still not deep enough, where if I understand it more deeply I might create combinations of rules that would solve problems more efficiently, better specificity, etc.

JavaScript fundamentals are also something I want to deepen. For example, until now I’m still not sure how to use JavaScript generators to solve problems, I usually can get by using Promise/async-await. I’ve been using JavaScript generators for Redux-Saga but aside from this usage I haven’t bee using it anywhere else. Maybe there are some problems that I usually solve with Promises that might be better done with generators, I’m still not sure.

For more practical aspect, my works are mostly in React now. I think I’m comfortable to work with it (working with functional components, React hooks, JSX, etc) but I think there are still a lot that I need to explore, e.g. Suspense, some specific hooks (useLayoutEffect), advanced memoizations, etc.

I just bought [CSS for JS course](https://css-for-js.dev/) by Josh Comeau I hope to deepen my CSS with this, so far the course has been really great. Found a lot of things that I actually use in my daily works, but found a lot of _"Aha!"_ or _"Gotcha!"_ going through it.

My other plan would be to buy [Epic React Dev](https://epicreact.dev/) by Kent C. Dodds. I read a lot of good things for this course, and I’ve been reading Kent’s articles a lot regarding React engineering. So will look into it.


My Current Learning Plan as a Web Engineer


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.

<img
  src="/images/posts/2021-05-09---client-and-websocket-interaction-diagram.svg"
  alt="Web socket interaction"
/>

[(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.
