front-end development

Terminal#

Common Commands#

ssh
scp
bat
ack
the_silver_searcher

Command Line Shortcuts #

Ctrl + a Move cursor to the beginning
Ctrl + e Move cursor to the end
Ctrl + u Delete command
Ctrl + k Delete all characters after the cursor
Ctrl + w Delete one word backward

Vim #

Three modes
Basic operations: move, delete, copy
Editor

Language Server Protocol#

The goal of the protocol is to allow programming language support to be implemented and distributed independently of any given editor or IDE.

The Language Server Protocol (LSP) is an open, JSON-RPC-based network protocol for communication between a source code editor or integrated development environment (IDE) and a server that provides specific programming language features. The goal of this protocol is to enable editors or IDEs to support more programming languages

Features

Go to definition
Find all references
Hover
Completion
Rename
Format
Refactor
Highlight
UpdateImportOnFileMove
AutoImport

User opens a file called "Document" (as referred to in the tool): The tool notifies the language server that the document has been opened ("textDocument/didOpen"). From now on, the facts about the document's content are no longer on the file system, but are kept in memory by the tool.
User makes edits: The tool notifies the server of document changes ('textDocument/didChange') and the language server updates the semantic information of the program. When this happens, the language server analyzes this information and notifies the tool of any errors and warnings detected (textDocument/publishDiagnostics).
User performs "go to definition" on a symbol in the editor: The tool sends a "textDocument/definition" request with two parameters: (1) the document URI and (2) the text position from where the "go to definition" request was initiated to the server. The server responds with the document URI and the position within the document where the symbol is defined.
User closes the document (file): The tool sends a "textDocument/didClose" notification, informing the language server that the document is no longer in memory and that the current content on the file system is now up to date.
JSON-RPC transport protocol

The client in that case is typically software intending to call a single method of a remote system. Multiple input parameters can be passed to the remote method as an array or object, whereas the method itself can return multiple output data as well.

Request
- method - String
- params - Object or Array
- id
Response
- result
- error
- id

Take a closer look at the "textDocument/definition" request. Here is the payload between the client tool and the language server for a "go to definition" request in a C++ document.

This is the request:

{
    "jsonrpc": "2.0",
    "id" : 1,
    "method": "textDocument/definition",
    "params": {
        "textDocument": {
            "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/use.cpp"
        },
        "position": {
            "line": 3,
            "character": 12
        }
    }
}

And the response:

{
    "jsonrpc": "2.0",
    "id": "1",
    "result": {
        "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/provide.cpp",
        "range": {
            "start": {
                "line": 0,
                "character": 4
            },
            "end": {
                "line": 0,
                "character": 11
            }
        }
    }
}

When a user works with different languages, VS Code typically starts a language server for each programming language.

Language services in the VS Code editor are special extensions that enable the editor to support multiple programming languages.

The editor has built-in language servers for many languages, such as TypeScript/JavaScript, HTML, CSS, and more can be installed as extensions, such as Vetur.

VS Code#

VS Code Extensions#

VueDX
- Definition
  - Goto component definition
  - Goto prop definition
  - Goto expression definition
- Renaming
  - Rename prop
  - Rename data
  - Rename computed
  - Rename method
  - Rename variables/function in setUp()
  - Rename component or Vue file
File Utils
- New File
- New Folder
- Delete file
- Duplicate
- Rename
- Copy Name
- Move
advanced-new-file
Auto Rename Tag
Color the tag name
Live Preview
Tailwind CSS intelliSense
Volar

VS Code Shortcuts

Chrome Browser#

CSS Debug #

Increase and decrease property value using keys
- Shift + up/down: ±10
- Command(mac)/Ctrl (window)+ up/down: ±100
- Alt(window)/Option (mac)+ up/down: ±0.1
Capture node screenshot
Add, edit, and delete CSS classes.
- .cls
- Enter key
Quickly hide elements using the h key

Chrome Extensions#

OneTab - Convert all tabs into a list
The Great Suspender - Freeze unused webpages to free up system resources
JSON Viewer
Site Palette
wappalyzer
Vimium

Auxiliary Tools#

vscodedev - Online VS Code editor
regex - Online regex debugger

Cabbage