Skip to content

Commit 934a92b

Browse files
AaqilyousufAaqilyousuf
authored
Merge branch 'main' into improve/check-broken-links-md
2 parents 95e471d + 3988998 commit 934a92b

File tree

10 files changed

+612
-78
lines changed

10 files changed

+612
-78
lines changed

‎mkdocs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ extra_css:
2323
- css/footer.css
2424
- css/home.css
2525
- css/nav.css
26+
- css/partners.css
2627
- css/search.css
28+
- css/team.css
2729
- css/tokens.css
2830
- css/utilities.css
2931

‎pages/blog/language-server-protocol-lsp-how-editors-speak-code/header.png‎

84.5 KB
Loading

‎pages/blog/language-server-protocol-lsp-how-editors-speak-code/index.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: "Language Server Protocol (LSP): How Editors Speak Code"
3+
slug: "language-server-protocol-lsp-how-editors-speak-code"
4+
date: 2025-08-15
5+
authors: ["Ansh Arora"]
6+
tags: ["Makim", "Automation", "Developer Experience"]
7+
categories: ["Devops", "Dev Tools"]
8+
description: |
9+
The Language Server Protocol (LSP) powers modern code editors like VS Code by
10+
enabling real-time autocompletion, hover info, diagnostics, and more.
11+
thumbnail: "/header.png"
12+
template: "blog-post.html"
13+
---
14+
15+
# Language Server Protocol (LSP): How Editors Speak Code
16+
17+
When you open a code file in VS Code and get real-time suggestions, hover
18+
tooltips, or error squiggles, have you ever wondered **how** your editor
19+
understands the language you’re writing in?
20+
21+
This magic isn’t hardcoded per-language into the editor. Instead, it’s often
22+
powered by something called the **Language Server Protocol (LSP)**.
23+
24+
Let’s dive into what LSP is, why it exists, and how it powers modern development
25+
environments.
26+
27+
## What is the Language Server Protocol?
28+
29+
The **Language Server Protocol (LSP)** is a standardized way for development
30+
tools (like VS Code, Vim, or Emacs) to communicate with language-specific
31+
services (called language servers).
32+
33+
Instead of writing new editor plugins for every language and every editor, **LSP
34+
decouples the logic**:
35+
36+
- The **editor (client)** handles the UI and editor behavior.
37+
- The **language server** handles parsing, validation, completions, and other
38+
language-specific logic.
39+
40+
They talk to each other via a common JSON-RPC protocol over standard
41+
input/output, TCP, or WebSockets.
42+
43+
## Why was LSP created?
44+
45+
Before LSP, supporting multiple languages across editors was a mess:
46+
47+
- Each editor needed custom plugins.
48+
- Each language had to build and maintain these plugins.
49+
50+
This was inefficient and hard to maintain.
51+
52+
**Microsoft introduced LSP in 2016**, alongside VS Code, to fix this
53+
fragmentation. Now, language authors can focus on building a single LSP server,
54+
and editors can plug into it easily.
55+
56+
![LSP Languages and Editors](https://code.visualstudio.com/assets/api/language-extensions/language-server-extension-guide/lsp-languages-editors.png)
57+
58+
## Core Features of LSP
59+
60+
Here are some features LSP enables out-of-the-box:
61+
62+
- Autocompletion
63+
- Go to Definition
64+
- Hover Information
65+
- Diagnostics (errors/warnings)
66+
- Formatting
67+
- Find References
68+
- Rename Symbol
69+
- Signature Help
70+
71+
These features work **consistently across any editor** that supports!
72+
73+
## How Does It Work?
74+
75+
Here's a simplified lifecycle of how an editor (client) talks to a language
76+
server:
77+
78+
1. **Editor launches the language server.**
79+
2. **Sends an `initialize` request** to begin communication.
80+
3. As you edit:
81+
82+
- Sends `textDocument/didOpen`, `didChange`, or `didSave`.
83+
- Receives back diagnostics or suggestions.
84+
85+
4. On hover, completion, or definition jumps:
86+
87+
- Sends `textDocument/hover`, `completion`, or `definition` requests.
88+
- Displays server responses in the UI.
89+
90+
All of this happens over a well-defined set of JSON-RPC messages.
91+
92+
### Anatomy of a Language Server
93+
94+
A language server is just a **program** that:
95+
96+
- Parses the user’s code (possibly building an AST or symbol table).
97+
- Responds to LSP method calls.
98+
- Tracks open files and their versions.
99+
100+
## Final Thoughts
101+
102+
The Language Server Protocol has quietly become the **backbone of modern
103+
developer tooling**. Whether you’re building an IDE, a DSL, or a configuration
104+
tool, LSP lets you ship a polished editing experience with far less effort.
105+
106+
If you're working on your own language, plugin, or platform, building an LSP
107+
server is one of the smartest investments you can make.

‎pages/blog/packaging-a-vs-code-extension-using-pnpm-and-vsce/header.png‎

61.2 KB
Loading

‎pages/blog/packaging-a-vs-code-extension-using-pnpm-and-vsce/index.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: "Packaging a VS Code Extension Using pnpm and VSCE"
3+
slug: "packaging-a-vs-code-extension-using-pnpm-and-vsce"
4+
date: 2025-08-31
5+
authors: ["Ansh Arora"]
6+
tags: ["Makim", "Automation", "VSCode", "pnpm", "esbuild"]
7+
categories: ["Packaging", "Node", "Extensions"]
8+
description: |
9+
A step-by-step guide to packaging and publishing VS Code extensions with pnpm and vsce,
10+
covering how to avoid dependency resolution issues.
11+
thumbnail: "/header.png"
12+
template: "blog-post.html"
13+
---
14+
15+
# Packaging a VS Code Extension Using pnpm and VSCE
16+
17+
VS Code’s `vsce` tool doesn't play nicely with `pnpm` out of the box; here’s a
18+
proven workaround using bundling and the `--no-dependencies` flag to get things
19+
running smoothly.
20+
21+
---
22+
23+
## Why pnpm + vsce can be problematic
24+
25+
`vsce` relies on `npm list --production --parseable --depth=99999`, which fails
26+
under pnpm's symlink-based dependency management, often throwing
27+
`npm ERR! missing:` errors.
28+
([github.com](https://github.com/microsoft/vscode-vsce/issues/421),
29+
[daydreamer-riri.me](https://daydreamer-riri.me/posts/compatibility-issues-between-vsce-and-pnpm/))
30+
31+
---
32+
33+
## Solution Overview
34+
35+
1. **Bundle your extension** using a bundler such as **esbuild** or **Webpack**
36+
2. **Use `--no-dependencies`** when running `vsce package` and `vsce publish`
37+
38+
Because all dependencies are bundled, `vsce` no longer needs to resolve them
39+
from `node_modules`.
40+
41+
---
42+
43+
## Step-by-Step Setup
44+
45+
### 1. Install Tools
46+
47+
```bash
48+
pnpm add -D @vscode/vsce esbuild
49+
```
50+
51+
@vscode/vsce` is the CLI for packaging and publishing VSCode extensions. Recent
52+
versions (e.g., v3.6.0) support npm (≥6) and Yarn (1.x), but don't officially
53+
support pnpm.
54+
55+
### 2\. Configure `package.json`
56+
57+
Scripts Add build and packaging commands: jsonc Copy code
58+
59+
```json
60+
{
61+
"scripts": {
62+
"vscode:prepublish": "pnpm run bundle",
63+
"bundle": "esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --minify",
64+
"package": "pnpm vsce package --no-dependencies",
65+
"publish": "pnpm vsce publish --no-dependencies"
66+
}
67+
}
68+
```
69+
70+
- `vscode:prepublish`: runs before packaging; bundles source using esbuild
71+
- `bundle`: compiles `extension.ts` into `out/main.js` and excludes the `vscode`
72+
module
73+
- `package` / `publish`: calls VSCE via pnpm, skipping dependency resolution
74+
75+
### 3\. Why It Works
76+
77+
By bundling dependencies manually, `vsce` doesn’t need to resolve them during
78+
packaging or publishing. The `--no-dependencies` option avoids pnpm’s symlink
79+
issues entirely.
80+
81+
## Sample `package.json` Snippet
82+
83+
```json
84+
{
85+
"devDependencies": {
86+
"@vscode/vsce": "^3.6.0",
87+
"esbuild": "^0.XX.X"
88+
},
89+
"scripts": {
90+
"vscode:prepublish": "pnpm run bundle",
91+
"bundle": "esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --minify",
92+
"package": "pnpm vsce package --no-dependencies",
93+
"publish": "pnpm vsce publish --no-dependencies"
94+
}
95+
}
96+
```
97+
98+
### **Wrap-Up**
99+
100+
Using **pnpm** with VS Code extensions involves a few extra steps because `vsce`
101+
doesn’t support pnpm’s dependency structure directly. The ideal workflow: _
102+
**Bundle your extension first**, then _ **Use `--no-dependencies`** to package
103+
and publish safely.

‎theme/css/partners.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* ===== Partners grid (dark/light friendly, glass cards) ===== */
2+
3+
:root{
4+
--pc-text: var(--fg, #e8eaf0);
5+
--pc-bg: rgba(16,18,27,.6);
6+
--pc-border: rgba(255,255,255,.12);
7+
--pc-hover: rgba(255,255,255,.06);
8+
}
9+
[data-bs-theme="light"]{
10+
--pc-text: #111827;
11+
--pc-bg: #ffffff;
12+
--pc-border: rgba(0,0,0,.08);
13+
--pc-hover: rgba(0,0,0,.04);
14+
}
15+
16+
.partners-grid .partner-card{
17+
background: var(--pc-bg);
18+
border: 1px solid var(--pc-border);
19+
border-radius: 1rem;
20+
backdrop-filter: blur(10px);
21+
-webkit-backdrop-filter: blur(10px);
22+
box-shadow: 0 10px 24px rgba(0,0,0,.08);
23+
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
24+
position: relative;
25+
}
26+
.partners-grid .partner-card:hover{
27+
transform: translateY(-2px);
28+
box-shadow: 0 16px 36px rgba(0,0,0,.16);
29+
border-color: color-mix(in oklab, var(--pc-border) 60%, var(--brand, #3b82f6));
30+
}
31+
32+
.partners-grid .partner-body{
33+
color: var(--pc-text);
34+
}
35+
.partners-grid .partner-title a{
36+
color: inherit;
37+
text-decoration: none;
38+
}
39+
.partners-grid .partner-title a:hover{
40+
text-decoration: underline;
41+
}
42+
.partners-grid .partner-summary{
43+
color: color-mix(in oklab, var(--pc-text) 80%, transparent);
44+
margin-bottom: .75rem;
45+
}
46+
47+
.partners-grid .icon{ width: 18px; height: 18px; }
48+
49+
.partners-grid .icon-btn{
50+
--_bd: var(--pc-border);
51+
--_fg: var(--pc-text);
52+
display: inline-flex; align-items: center; justify-content: center;
53+
gap: .35rem;
54+
border: 1px solid var(--_bd);
55+
border-radius: 999px;
56+
padding: .35rem .45rem;
57+
line-height: 1;
58+
color: var(--_fg);
59+
background: transparent;
60+
text-decoration: none;
61+
transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
62+
}
63+
.partners-grid .icon-btn:hover{
64+
background: var(--pc-hover);
65+
border-color: color-mix(in oklab, var(--_bd) 60%, var(--brand, #3b82f6));
66+
}
67+
.partners-grid .icon-btn:active{ transform: translateY(1px); }
68+
69+
/* Logo band: fixed height + hidden overflow so nothing spills into the title */
70+
.partners-grid .logo-wrap{
71+
height: 110px; /* was 130px */
72+
padding: 12px 16px;
73+
overflow: hidden; /* hard stop */
74+
display: flex; align-items: center; justify-content: center;
75+
border-bottom: 1px dashed var(--pc-border);
76+
background: color-mix(in oklab, var(--pc-bg) 92%, transparent);
77+
border-top-left-radius: 1rem; border-top-right-radius: 1rem;
78+
}
79+
80+
/* Logos: clamp both height and width so tall/wide marks don’t dominate */
81+
.partners-grid .logo-wrap img{
82+
display: block;
83+
object-fit: contain;
84+
width: auto;
85+
max-width: 80%; /* prevent super-wide brands from touching edges */
86+
max-height: clamp(44px, 8vw, 78px); /* scale responsively but never huge */
87+
transform: scale(var(--logo-scale, 1)); /* per-partner fine-tune (see below) */
88+
transform-origin: center;
89+
}
90+
91+
/* Slightly larger on very wide screens, still bounded */
92+
@media (min-width: 1400px){
93+
.partners-grid .logo-wrap{ height: 120px; }
94+
.partners-grid .logo-wrap img{ max-height: 84px; }
95+
}
96+
97+
/* And a touch smaller on tight screens to avoid crowding */
98+
@media (max-width: 480px){
99+
.partners-grid .logo-wrap{ height: 96px; }
100+
.partners-grid .logo-wrap img{ max-height: 64px; }
101+
}
102+
103+
/* Optional: keep long names tidy */
104+
.partners-grid .partner-title{
105+
display: -webkit-box;
106+
-webkit-line-clamp: 2; /* clamp to 2 lines */
107+
-webkit-box-orient: vertical;
108+
overflow: hidden;
109+
}

‎theme/css/team.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* ===== Team page (scoped) ===== */
2+
.team-grid .card{
3+
border-radius: 1rem;
4+
border: 1px solid var(--card-border, rgba(255,255,255,.12));
5+
background: var(--card-bg, rgba(20,24,33,.6));
6+
overflow: hidden;
7+
}
8+
[data-bs-theme="light"] .team-grid .card{
9+
background: #fff;
10+
border-color: rgba(0,0,0,.08);
11+
}
12+
13+
.team-grid .card-img-top{
14+
display:block;
15+
width:100%;
16+
aspect-ratio: 4 / 3; /* keeps consistent header area */
17+
object-fit: cover; /* crops tall/wide headshots neatly */
18+
}
19+
20+
.team-grid .card-title{
21+
font-size: 1.15rem;
22+
margin-bottom: .25rem;
23+
}
24+
25+
/* Social icon row */
26+
.team-grid .social{
27+
display: flex;
28+
align-items: center;
29+
gap: .5rem;
30+
}
31+
32+
/* Tight, consistent SVG icon sizing + inherit theme color */
33+
.team-grid .social .icon{
34+
width: 22px; /* <- right here: fix HUGE icon */
35+
height: 22px;
36+
display: inline-block;
37+
vertical-align: middle;
38+
fill: currentColor; /* ensure symbols use text color */
39+
}
40+
.team-grid .social a{
41+
color: var(--fg, #e6e9f0);
42+
opacity: .85;
43+
text-decoration: none;
44+
}
45+
[data-bs-theme="light"] .team-grid .social a{
46+
color: #1f2937;
47+
}
48+
.team-grid .social a:hover{
49+
color: var(--brand, #3b82f6);
50+
opacity: 1;
51+
}
52+
53+
/* Sponsor iframe wrapper spacing */
54+
.team-grid .sponsor{
55+
margin-top: .5rem;
56+
}

0 commit comments

Comments
 (0)