From e598f56012b20ed6b978540d80db434508851614 Mon Sep 17 00:00:00 2001 From: Charly Abraham Date: Sun, 22 Mar 2026 23:13:16 +0530 Subject: [PATCH 1/3] feat: add basic coding concepts blog article Target keyword: "basic coding concepts" (932K monthly searches, difficulty 7/100). Covers 10 programming fundamentals with JavaScript examples and FAQ section. --- .../2026-03-22-basic-coding-concepts/index.md | 360 ++++++++++++++++++ 1 file changed, 360 insertions(+) create mode 100644 blog/2026-03-22-basic-coding-concepts/index.md diff --git a/blog/2026-03-22-basic-coding-concepts/index.md b/blog/2026-03-22-basic-coding-concepts/index.md new file mode 100644 index 00000000..f4d1f249 --- /dev/null +++ b/blog/2026-03-22-basic-coding-concepts/index.md @@ -0,0 +1,360 @@ +--- +slug: basic-coding-concepts +title: "Basic Coding Concepts: A Hands-On Beginner's Guide" +description: "Master the basic coding concepts every beginner needs — variables, loops, functions, and more — with examples you can run instantly in your browser." +authors: [charly] +tags: [Coding Basics, Programming, Beginner Guide, JavaScript, Learn to Code] +keywords: [basic coding concepts, coding basics, programming fundamentals, learn coding, basic programming concepts] +--- +# What Is Coding? + +Coding is giving a computer step-by-step instructions to solve a problem. + + + +To instruct computers, you need programming languages. It's similar to languages like English or German, which people use to talk to each other — except programming languages are how humans talk to computers. + +There are several languages. Which language to use depends on the problem you're trying to solve — for building websites, HTML, CSS and JavaScript. For artificial intelligence, mostly Python. For high-performance software, C, C++ and Rust. For data analysis, SQL. + +There is nothing called the best programming language. You choose the right one for the problem you're trying to solve. To simplify — if you're in China, you may need to speak Chinese to get things done efficiently, even though English works. If you're in the Middle East, you may need Arabic to get things done efficiently, even though English works. Similar to English, JavaScript can be used to solve most problems. + +Even though there are many languages, all of them share similar concepts — explained here with the help of JavaScript, since it's the easiest to learn. + +## 1\. Variables — Storing Information + +A variable is a labeled container that holds a piece of information. Picture a moving box with "Kitchen Stuff" written on the side in marker. The label tells you what's inside without opening it. Variables work the same way — you give data a name so you can use it later. + +```js +let name = "Alex"; +let age = 25; +let isStudent = true; + +console.log(name + " is " + age + " years old."); +// Output: Alex is 25 years old. +``` + +Three lines. Three labeled boxes. The `console.log()` line prints a message by combining those values together. + +JavaScript gives you three ways to create variables. `let` is for values that might change — a score in a game, the number of items in a cart. `const` is for values that won't change — a user's birth date, a tax rate. `var` is the old way of doing things. You'll see it in older code, but stick with `let` and `const` for anything new. + +Quick rule of thumb: use `const` by default. Switch to `let` only when you know the value needs to change. That habit alone prevents a whole category of bugs. + +[**Try this code in your browser →**](https://phcode.dev) + +## 2\. Data Types — Different Kinds of Information + +Not all data is the same. A person's name is different from their age, which is different from whether they're logged in or not. JavaScript has several data types to handle these differences. + +```js +let score = 99; // Number +let greeting = "Hello!"; // String (text) +let isOnline = false; // Boolean (true or false) +let address = null; // Null (intentionally empty) +let phone; // Undefined (not yet assigned) + +console.log(typeof score); // "number" +console.log(typeof greeting); // "string" +console.log(typeof isOnline); // "boolean" +console.log(typeof address); // "object" (a known JavaScript quirk) +console.log(typeof phone); // "undefined" +``` + +Numbers handle math. Strings handle text — anything between quotes. Booleans are yes/no switches, only ever `true` or `false`. `null` means "this is intentionally blank," like a form field you've deliberately left empty. `undefined` means "this hasn't been given a value yet." + +The `typeof` operator is your detective tool. Not sure what kind of data you're working with? Run `typeof` on it. You'll use this constantly when debugging, especially when something that should be a number is secretly a string (it happens more than you'd think). + +[**Try this code in your browser →**](https://phcode.dev) + +## 3\. Operators — Doing Things with Data + +Operators let you perform actions on data — math, comparisons, logic. You've been using operators your entire life. The `+` on a calculator? That's an operator. + +```js +// Arithmetic +let total = 15 + 10; // 25 +let half = total / 2; // 12.5 +let remainder = 17 % 5; // 2 (modulo — the leftover after division) + +// Comparison +console.log(10 === 10); // true (strict equality) +console.log(10 === "10"); // false (different types) +console.log(5 > 3); // true +console.log(5 !== 3); // true (not equal) + +// Logical +let hasTicket = true; +let isVIP = false; +console.log(hasTicket && isVIP); // false (AND — both must be true) +console.log(hasTicket || isVIP); // true (OR — at least one is true) +console.log(!isVIP); // true (NOT — flips the value) +``` + +The triple equals `===` is worth remembering. JavaScript also has `==` (double equals), which tries to convert types before comparing — `10 == "10"` returns `true`, which isn't usually what you want. Stick with `===` to avoid surprises. + +Logical operators — `&&` (AND), `||` (OR), `!` (NOT) — show up everywhere in real code. "If the user is logged in AND has admin privileges, show the dashboard." That's `&&` in action. + +[**Try this code in your browser →**](https://phcode.dev) + +## 4\. Conditionals — Making Decisions + +Programs need to make choices. Should the app show a login screen or a dashboard? Should the discount apply or not? Conditionals are how code decides what to do next. + +Think of getting dressed in the morning. If it's cold outside, you grab a jacket. If it's warm, you don't. If it's raining, you grab an umbrella too. Your brain runs through these checks automatically — conditionals make a computer do the same thing. + +```js +let temperature = 72; + +if (temperature > 85) { + console.log("It's hot — stay hydrated!"); +} else if (temperature > 65) { + console.log("Nice weather — perfect for a walk."); +} else if (temperature > 45) { + console.log("A bit chilly — grab a jacket."); +} else { + console.log("It's cold — bundle up!"); +} +// Output: Nice weather — perfect for a walk. +``` + +The computer checks each condition from top to bottom. The moment one is true, it runs that block and skips the rest. Change `temperature` to 30 and run it again — you'll get a completely different message. + +Every `if` needs a condition inside parentheses that evaluates to `true` or `false`. The `else if` blocks are optional extras — add as many as you need. The final `else` is the fallback, the "none of the above" case. + +[**Try this code in your browser →**](https://phcode.dev) + +## 5\. Loops — Repeating Actions + +Imagine you're stuffing 500 envelopes by hand. Same action, 500 times. Tedious. A loop tells the computer to repeat a task for you — whether that's 5 times or 5 million. + +```js +// For loop — when you know how many times +for (let i = 1; i <= 5; i++) { + console.log("Count: " + i); +} +// Output: Count: 1, Count: 2, Count: 3, Count: 4, Count: 5 + +// While loop — when you don't know how many times +let tries = 0; +let unlocked = false; + +while (!unlocked) { + tries++; + console.log("Attempt #" + tries); + if (tries === 3) { + unlocked = true; + console.log("Access granted!"); + } +} +``` + +The `for` loop has three parts crammed into one line: a starting point (`let i = 1`), a condition to keep going (`i <= 5`), and what happens after each round (`i++`, which adds 1). It's compact but powerful. + +The `while` loop is simpler in structure — it just keeps going as long as its condition is true. You'll reach for `for` loops when you know the count ahead of time (loop through 10 items, count from 1 to 100). Use `while` when you're waiting for something to happen — a user entering the right password, a sensor reading hitting a threshold. + +One warning: if your condition never becomes false, the loop runs forever. That's called an infinite loop, and it'll freeze your browser tab. Always make sure something inside the loop eventually breaks the condition. + +[**Try this code in your browser →**](https://phcode.dev) + +## 6\. Functions — Reusable Blocks of Code + +A function is a named set of instructions you can run whenever you want. Think of it like a recipe card in a box. You don't rewrite the whole recipe every time you make pancakes — you just pull out the card. Functions work the same way. + +```js +function calculateTip(billAmount, tipPercent) { + let tip = billAmount * (tipPercent / 100); + let total = billAmount + tip; + return total; +} + +let dinner = calculateTip(85, 20); +let lunch = calculateTip(32, 15); + +console.log("Dinner total: $" + dinner); // Dinner total: $102 +console.log("Lunch total: $" + lunch); // Lunch total: $36.8 +``` + +The function `calculateTip` takes two inputs (called parameters): the bill amount and the tip percentage. It does the math, then `return` sends the result back to wherever the function was called. + +Write once, use everywhere. That's the whole point. If 12 different parts of your program need to calculate tips, you don't write the formula 12 times. You call the function 12 times. And if the formula ever needs to change — say, you want to add tax — you change it in one place. + +Functions also make your code readable. `calculateTip(85, 20)` tells you exactly what's happening. The raw math `85 * (20 / 100) + 85` doesn't. + +[**Try this code in your browser →**](https://phcode.dev) + +## 7\. Arrays and Objects — Organizing Data + +Real programs deal with collections of data, not just single values. Arrays and objects are two ways to organize multiple pieces of information. + +An array is an ordered list. Think of a playlist — song 1, song 2, song 3, in that order. + +```js +let colors = ["red", "green", "blue", "yellow"]; + +console.log(colors[0]); // "red" (arrays start at 0, not 1) +console.log(colors.length); // 4 + +colors.push("purple"); // adds to the end +console.log(colors); // ["red", "green", "blue", "yellow", "purple"] +``` + +An object is a collection of labeled data — like a contact card. Each piece of information has a name (key) and a value. + +```js +let person = { + name: "Jordan", + age: 28, + city: "Portland", + hobbies: ["hiking", "cooking", "guitar"] +}; + +console.log(person.name); // "Jordan" +console.log(person.hobbies[0]); // "hiking" +``` + +Arrays count by position (0, 1, 2, 3). Objects use names. When the order matters — a list of search results, steps in a process — use an array. When you need labeled fields — a user profile, a product listing, a configuration — use an object. + +Notice that `hobbies` inside the person object is itself an array. You can nest these structures inside each other. A database of 1,000 users might be an array of objects, each containing arrays. That's how real apps store data. + +[**Try this code in your browser →**](https://phcode.dev) + +## 8\. Scope — Where Variables Live + +Not every variable is available everywhere in your code. Where you create a variable determines where you can use it. That's scope. + +```js +let globalMessage = "Available everywhere"; + +function greetUser() { + let localMessage = "Only available inside this function"; + console.log(globalMessage); // Works fine + console.log(localMessage); // Works fine +} + +greetUser(); +console.log(globalMessage); // Works fine +console.log(localMessage); // ERROR: localMessage is not defined +``` + +`globalMessage` lives outside any function — it's accessible from anywhere in your code. `localMessage` lives inside `greetUser`, so it only exists while that function is running. Try to use it outside? JavaScript doesn't know what you're talking about. + +This isn't a limitation — it's a feature. Scope keeps your variables from accidentally overwriting each other. Imagine two different functions both using a variable called `total`. Without scope, they'd clobber each other's values. With scope, each function gets its own private `total` that doesn't interfere. + +Best practice: keep variables as local as possible. If a variable only needs to exist inside a function, declare it there. Global variables are convenient but get messy fast in larger programs. + +[**Try this code in your browser →**](https://phcode.dev) + +## 9\. Comments and Readability + +Code spends way more time being read than being written. Six months from now, you'll open a file and wonder what you were thinking. Comments are notes to your future self — and to anyone else who reads your code. + +```js +// Calculate the user's age from their birth year +let birthYear = 1998; +let currentYear = 2026; +let age = currentYear - birthYear; + +/* + Apply a discount based on membership level: + - Gold members: 20% off + - Silver members: 10% off + - Everyone else: no discount +*/ +function getDiscount(memberLevel, price) { + if (memberLevel === "gold") { + return price * 0.8; // 20% off + } else if (memberLevel === "silver") { + return price * 0.9; // 10% off + } + return price; // no discount +} +``` + +Single-line comments start with `//`. Multi-line comments sit between `/*` and `*/`. Both are completely ignored by the computer — they exist only for human readers. + +Don't comment every single line. Good code mostly reads itself. Comment the *why*, not the *what*. `// subtract 1` on a line that says `x - 1` adds nothing. But `// subtract 1 because array indexes start at 0` explains a decision someone might question later. + +Variable and function names carry a lot of weight too. `getDiscount` tells you more than `calc` or `doStuff`. Readable names plus a few well-placed comments — that's the sweet spot. + +[**Try this code in your browser →**](https://phcode.dev) + +## 10\. Debugging — Finding and Fixing Errors + +Bugs happen. Every single program has them at some point. Debugging isn't a sign you did something wrong — it's a normal part of coding. The skill isn't avoiding bugs entirely; it's finding and fixing them quickly. + +Your best friend? `console.log()`. When something isn't working, sprinkle it through your code to see what's actually happening versus what you expected. + +```js +function calculateAverage(numbers) { + let sum = 0; + for (let i = 0; i <= numbers.length; i++) { // Bug: <= should be < + console.log("Index:", i, "Value:", numbers[i]); + sum += numbers[i]; + } + let average = sum / numbers.length; + return average; +} + +let grades = [90, 85, 92, 78]; +console.log("Average:", calculateAverage(grades)); +// Output shows: Index: 4 Value: undefined +// That's the clue — index 4 doesn't exist in a 4-item array +``` + +The `console.log` inside the loop reveals the problem. Index 4 returns `undefined` because arrays with 4 items only go up to index 3. Adding `undefined` to a number produces `NaN` (Not a Number), and the whole result breaks. The fix: change `<=` to `<` in the loop condition. + +Three errors you'll see constantly when starting out: + +- **Typos** — `consol.log` instead of `console.log`. JavaScript doesn't know what `consol` is. +- **Missing brackets** — forgetting a `}` to close a function or `if` block. The error message often points to the wrong line, which is extra confusing. +- **Undefined variables** — using a variable name you haven't declared, or using it outside its scope. + +Don't panic when you see red error messages. Read them carefully — they usually tell you exactly which line the problem is on. That line number plus a `console.log` or two will get you unstuck 90% of the time. + +[**Try this code in your browser →**](https://phcode.dev) + +## What to Learn After These Basic Coding Concepts + +You've now got the 10 building blocks that every program is made of. Variables store data. Conditionals make decisions. Loops repeat tasks. Functions organize your code. These basic coding concepts don't change whether you're building a website, a mobile app, or a game. + +Here's where to go from here: + +- **DOM manipulation** — this is how JavaScript changes what you see on a web page. Click a button, and text appears. Submit a form, and a message pops up. It's where coding starts feeling tangible. +- **APIs** — short for Application Programming Interfaces. They let your code talk to other services. Want to display weather data or pull in tweets? That's an API call. +- **Git** — a tool that tracks every change you make to your code, so you can undo mistakes and collaborate with others. Phoenix Code has [built-in Git support](/docs/Features/git) so you can start using it right away. +- **Live Preview** — see your HTML and CSS changes in real time as you type. Phoenix Code's [Live Preview](/docs/Features/Live%20Preview/live-preview) makes this instant — no manual refreshing. + +Pick one thing, build something small, and keep going. That's genuinely how everyone learns this. + +## Frequently Asked Questions + +### What are the 5 basics of coding? + +The five core concepts are variables (storing data), conditionals (making decisions with if/else), loops (repeating actions), functions (reusable blocks of code), and data structures like arrays and objects (organizing information). Every programming language has its own version of these five ideas. Master them in one language, and picking up another becomes dramatically easier. + +### How long does it take to learn basic coding? + +The 10 concepts in this article? A few focused hours of reading and experimenting. Feeling comfortable enough to build small projects on your own — a to-do list, a quiz app, a personal website? Roughly 2 to 4 weeks of regular practice, maybe 30 minutes to an hour a day. You won't feel like an expert, and that's fine. Competence comes before confidence in coding. + +### Do you need math to learn coding? + +Basic arithmetic — addition, subtraction, multiplication, division — covers most of what web development requires. You won't need algebra or calculus to build websites, process forms, or create interactive pages. Advanced math only enters the picture in specialized fields: data science, 3D game physics, cryptography, machine learning. For the vast majority of coding, if you can calculate a tip at a restaurant, your math is strong enough. + +### What's the difference between coding and programming? + +Coding is the act of writing code — typing instructions in a programming language. Programming is the broader process: analyzing a problem, designing a solution, writing the code, testing it, and fixing bugs. In everyday conversation, people use the two words interchangeably. If someone says "coding" and someone else says "programming," they're almost always talking about the same thing. Don't get hung up on the distinction. + +### What's the best programming language to start with? + +JavaScript runs in every web browser without any setup. You can build websites, server applications, mobile apps, and even games with it. It also has the largest developer community, which means more tutorials, more answers on forums, and more help when you're stuck. Python is another excellent choice, especially if you're interested in data science or automation. Both are beginner-friendly. Pick whichever one aligns with what you want to build — you can't really go wrong with either. + +### Can you learn coding for free? + +Yes — completely free. [Phoenix Code](https://phcode.dev) is a free, open-source code editor that runs directly in your browser. No downloads, no accounts, no credit cards. Pair it with [MDN Web Docs](https://developer.mozilla.org/) (Mozilla's comprehensive reference for HTML, CSS, and JavaScript) and freeCodeCamp (free structured courses with certificates), and you've got everything you need to go from zero to building real projects without spending a cent. + +## Start Coding Now + +Every basic coding concept in this article is something you can practice today. Open [phcode.dev](https://phcode.dev) in your browser — it's free, works on any device, and doesn't require installation or an account. Create a new JavaScript file, paste in any of the examples above, and start experimenting. Change the values. Break the code on purpose. Fix it. That cycle of writing, breaking, and fixing is exactly how coding skills develop. + +If you prefer a desktop app with offline access, you can [download Phoenix Code](https://phcode.dev/download) for Windows, Mac, or Linux. And when you're ready to see your HTML and CSS come alive as you type, check out the [Live Preview documentation](/docs/Features/Live%20Preview/live-preview) to get started with real-time feedback. + +The best time to start coding was yesterday. The second best time is right now. From 239d9b4a941513f90c7e8cffcbda53437e143c1d Mon Sep 17 00:00:00 2001 From: Charly Abraham Date: Thu, 2 Apr 2026 17:51:19 +0530 Subject: [PATCH 2/3] feat: integrate Algolia Agent Studio Ask AI search Upgrade @docsearch/react to v4.6 for Agent Studio support and add askAi config with a swizzled SearchBar to inject agentStudio flag that Docusaurus 3.9.2 validation doesn't yet recognize. --- docusaurus.config.js | 7 +- package-lock.json | 213 ++++------------------------------- package.json | 3 + src/theme/SearchBar/index.js | 14 +++ 4 files changed, 45 insertions(+), 192 deletions(-) create mode 100644 src/theme/SearchBar/index.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 0d54856f..6cb15d46 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -185,7 +185,12 @@ const config = { // Public API key: it is safe to commit it apiKey: "e988677555350573b539eb974e2b7891", indexName: "phcode", - contextualSearch: false + contextualSearch: false, + askAi: { + assistantId: "d43f2205-8075-439d-822b-b3825b74cb49", + apiKey: "0c73a640624ba54f777a5491ee884aa3", + indexName: "markdown-index", + } }, // Replace with your project's social card image: "img/socialcard.png", diff --git a/package-lock.json b/package-lock.json index e0bf880f..ace3e6f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "docs", "version": "1.1.1", "dependencies": { + "@docsearch/css": "^4.6.0", + "@docsearch/react": "^4.6.0", "@docusaurus/core": "^3.7.0", "@docusaurus/plugin-client-redirects": "^3.7.0", "@docusaurus/plugin-google-gtag": "^3.7.0", @@ -27,6 +29,7 @@ "devDependencies": { "@docusaurus/module-type-aliases": "3.9.2", "@docusaurus/types": "3.9.2", + "baseline-browser-mapping": "^2.10.10", "http-server": "14.1.1", "shx": "0.4.0" }, @@ -34,76 +37,6 @@ "node": ">=18.0" } }, - "node_modules/@ai-sdk/gateway": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.9.tgz", - "integrity": "sha512-E6x4h5CPPPJ0za1r5HsLtHbeI+Tp3H+YFtcH8G3dSSPFE6w+PZINzB4NxLZmg1QqSeA5HTP3ZEzzsohp0o2GEw==", - "license": "Apache-2.0", - "dependencies": { - "@ai-sdk/provider": "2.0.0", - "@ai-sdk/provider-utils": "3.0.17", - "@vercel/oidc": "3.0.3" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "zod": "^3.25.76 || ^4.1.8" - } - }, - "node_modules/@ai-sdk/provider": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-2.0.0.tgz", - "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==", - "license": "Apache-2.0", - "dependencies": { - "json-schema": "^0.4.0" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/@ai-sdk/provider-utils": { - "version": "3.0.17", - "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.17.tgz", - "integrity": "sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw==", - "license": "Apache-2.0", - "dependencies": { - "@ai-sdk/provider": "2.0.0", - "@standard-schema/spec": "^1.0.0", - "eventsource-parser": "^3.0.6" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "zod": "^3.25.76 || ^4.1.8" - } - }, - "node_modules/@ai-sdk/react": { - "version": "2.0.93", - "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-2.0.93.tgz", - "integrity": "sha512-2TzhpQr10HuWxpqyHpSAUMRUqD1G2O73J2sAaJChomVDbjr7BwpM0mdR3aRamCXNtuLiJmTFQhbNzw8fXMBdYw==", - "license": "Apache-2.0", - "dependencies": { - "@ai-sdk/provider-utils": "3.0.17", - "ai": "5.0.93", - "swr": "^2.2.5", - "throttleit": "2.1.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "react": "^18 || ^19 || ^19.0.0-rc", - "zod": "^3.25.76 || ^4.1.8" - }, - "peerDependenciesMeta": { - "zod": { - "optional": true - } - } - }, "node_modules/@algolia/abtesting": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.10.0.tgz", @@ -3289,9 +3222,9 @@ } }, "node_modules/@docsearch/core": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@docsearch/core/-/core-4.3.1.tgz", - "integrity": "sha512-ktVbkePE+2h9RwqCUMbWXOoebFyDOxHqImAqfs+lC8yOU+XwEW4jgvHGJK079deTeHtdhUNj0PXHSnhJINvHzQ==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/@docsearch/core/-/core-4.6.2.tgz", + "integrity": "sha512-/S0e6Dj7Zcm8m9Rru49YEX49dhU11be68c+S/BCyN8zQsTTgkKzXlhRbVL5mV6lOLC2+ZRRryaTdcm070Ug2oA==", "license": "MIT", "peerDependencies": { "@types/react": ">= 16.8.0 < 20.0.0", @@ -3311,25 +3244,20 @@ } }, "node_modules/@docsearch/css": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-4.3.2.tgz", - "integrity": "sha512-K3Yhay9MgkBjJJ0WEL5MxnACModX9xuNt3UlQQkDEDZJZ0+aeWKtOkxHNndMRkMBnHdYvQjxkm6mdlneOtU1IQ==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-4.6.2.tgz", + "integrity": "sha512-fH/cn8BjEEdM2nJdjNMHIvOVYupG6AIDtFVDgIZrNzdCSj4KXr9kd+hsehqsNGYjpUjObeKYKvgy/IwCb1jZYQ==", "license": "MIT" }, "node_modules/@docsearch/react": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-4.3.2.tgz", - "integrity": "sha512-74SFD6WluwvgsOPqifYOviEEVwDxslxfhakTlra+JviaNcs7KK/rjsPj89kVEoQc9FUxRkAofaJnHIR7pb4TSQ==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-4.6.2.tgz", + "integrity": "sha512-/BbtGFtqVOGwZx0dw/UfhN/0/DmMQYnulY4iv0tPRhC2JCXv0ka/+izwt3Jzo1ZxXS/2eMvv9zHsBJOK1I9f/w==", "license": "MIT", "dependencies": { - "@ai-sdk/react": "^2.0.30", "@algolia/autocomplete-core": "1.19.2", - "@docsearch/core": "4.3.1", - "@docsearch/css": "4.3.2", - "ai": "^5.0.30", - "algoliasearch": "^5.28.0", - "marked": "^16.3.0", - "zod": "^4.1.8" + "@docsearch/core": "4.6.2", + "@docsearch/css": "4.6.2" }, "peerDependencies": { "@types/react": ">= 16.8.0 < 20.0.0", @@ -4512,15 +4440,6 @@ "node": ">= 8" } }, - "node_modules/@opentelemetry/api": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", - "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==", - "license": "Apache-2.0", - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/@philpl/buble": { "version": "0.19.7", "resolved": "https://registry.npmjs.org/@philpl/buble/-/buble-0.19.7.tgz", @@ -4747,12 +4666,6 @@ "micromark-util-symbol": "^1.0.1" } }, - "node_modules/@standard-schema/spec": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", - "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", - "license": "MIT" - }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -5691,15 +5604,6 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, - "node_modules/@vercel/oidc": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.0.3.tgz", - "integrity": "sha512-yNEQvPcVrK9sIe637+I0jD6leluPxzwJKx/Haw6F4H77CdDsszUn5V3o96LPziXkSNE2B83+Z3mjqGKBK/R6Gg==", - "license": "Apache-2.0", - "engines": { - "node": ">= 20" - } - }, "node_modules/@webassemblyjs/ast": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", @@ -5985,24 +5889,6 @@ "node": ">=8" } }, - "node_modules/ai": { - "version": "5.0.93", - "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.93.tgz", - "integrity": "sha512-9eGcu+1PJgPg4pRNV4L7tLjRR3wdJC9CXQoNMvtqvYNOLZHFCzjHtVIOr2SIkoJJeu2+sOy3hyiSuTmy2MA40g==", - "license": "Apache-2.0", - "dependencies": { - "@ai-sdk/gateway": "2.0.9", - "@ai-sdk/provider": "2.0.0", - "@ai-sdk/provider-utils": "3.0.17", - "@opentelemetry/api": "1.9.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "zod": "^3.25.76 || ^4.1.8" - } - }, "node_modules/ajv": { "version": "8.17.1", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", @@ -6357,11 +6243,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.20", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz", - "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==", + "version": "2.10.10", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.10.tgz", + "integrity": "sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==", + "license": "Apache-2.0", "bin": { - "baseline-browser-mapping": "dist/cli.js" + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" } }, "node_modules/basic-auth": { @@ -9056,15 +8946,6 @@ "node": ">=0.8.x" } }, - "node_modules/eventsource-parser": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz", - "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==", - "license": "MIT", - "engines": { - "node": ">=18.0.0" - } - }, "node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -11067,12 +10948,6 @@ "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, - "node_modules/json-schema": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz", - "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==", - "license": "(AFL-2.1 OR BSD-3-Clause)" - }, "node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", @@ -18171,19 +18046,6 @@ "node": ">= 10" } }, - "node_modules/swr": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz", - "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==", - "license": "MIT", - "dependencies": { - "dequal": "^2.0.3", - "use-sync-external-store": "^1.4.0" - }, - "peerDependencies": { - "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -18366,18 +18228,6 @@ "tslib": "^2" } }, - "node_modules/throttleit": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz", - "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==", - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/thunky": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", @@ -18984,15 +18834,6 @@ "react": ">= 16.8.0" } }, - "node_modules/use-sync-external-store": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", - "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", - "license": "MIT", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -19876,16 +19717,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/zod": { - "version": "4.1.12", - "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", - "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", - "license": "MIT", - "peer": true, - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } - }, "node_modules/zwitch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", diff --git a/package.json b/package.json index 726ddcbb..fa693f5e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "serveStatic": "http-server build -p 8001 -c-1" }, "dependencies": { + "@docsearch/css": "^4.6.0", + "@docsearch/react": "^4.6.0", "@docusaurus/core": "^3.7.0", "@docusaurus/plugin-client-redirects": "^3.7.0", "@docusaurus/plugin-google-gtag": "^3.7.0", @@ -38,6 +40,7 @@ "devDependencies": { "@docusaurus/module-type-aliases": "3.9.2", "@docusaurus/types": "3.9.2", + "baseline-browser-mapping": "^2.10.10", "http-server": "14.1.1", "shx": "0.4.0" }, diff --git a/src/theme/SearchBar/index.js b/src/theme/SearchBar/index.js new file mode 100644 index 00000000..94472ccb --- /dev/null +++ b/src/theme/SearchBar/index.js @@ -0,0 +1,14 @@ +import SearchBar from '@theme-original/SearchBar'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +// Wrap SearchBar to inject agentStudio: true into askAi config. +// Docusaurus 3.9.2's Joi validation doesn't recognize agentStudio yet, +// but @docsearch/react 4.6+ requires it for Agent Studio assistants. +export default function SearchBarWrapper(props) { + const {siteConfig} = useDocusaurusContext(); + const askAi = siteConfig.themeConfig.algolia?.askAi; + if (askAi && !askAi.agentStudio) { + askAi.agentStudio = true; + } + return ; +} From 8e2c00ca875149136cbbe2be784941dd5d6d8ec6 Mon Sep 17 00:00:00 2001 From: Charly Abraham Date: Thu, 2 Apr 2026 18:06:20 +0530 Subject: [PATCH 3/3] Revert "feat: add basic coding concepts blog article" This reverts commit e598f56012b20ed6b978540d80db434508851614. --- .../2026-03-22-basic-coding-concepts/index.md | 360 ------------------ 1 file changed, 360 deletions(-) delete mode 100644 blog/2026-03-22-basic-coding-concepts/index.md diff --git a/blog/2026-03-22-basic-coding-concepts/index.md b/blog/2026-03-22-basic-coding-concepts/index.md deleted file mode 100644 index f4d1f249..00000000 --- a/blog/2026-03-22-basic-coding-concepts/index.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -slug: basic-coding-concepts -title: "Basic Coding Concepts: A Hands-On Beginner's Guide" -description: "Master the basic coding concepts every beginner needs — variables, loops, functions, and more — with examples you can run instantly in your browser." -authors: [charly] -tags: [Coding Basics, Programming, Beginner Guide, JavaScript, Learn to Code] -keywords: [basic coding concepts, coding basics, programming fundamentals, learn coding, basic programming concepts] ---- -# What Is Coding? - -Coding is giving a computer step-by-step instructions to solve a problem. - - - -To instruct computers, you need programming languages. It's similar to languages like English or German, which people use to talk to each other — except programming languages are how humans talk to computers. - -There are several languages. Which language to use depends on the problem you're trying to solve — for building websites, HTML, CSS and JavaScript. For artificial intelligence, mostly Python. For high-performance software, C, C++ and Rust. For data analysis, SQL. - -There is nothing called the best programming language. You choose the right one for the problem you're trying to solve. To simplify — if you're in China, you may need to speak Chinese to get things done efficiently, even though English works. If you're in the Middle East, you may need Arabic to get things done efficiently, even though English works. Similar to English, JavaScript can be used to solve most problems. - -Even though there are many languages, all of them share similar concepts — explained here with the help of JavaScript, since it's the easiest to learn. - -## 1\. Variables — Storing Information - -A variable is a labeled container that holds a piece of information. Picture a moving box with "Kitchen Stuff" written on the side in marker. The label tells you what's inside without opening it. Variables work the same way — you give data a name so you can use it later. - -```js -let name = "Alex"; -let age = 25; -let isStudent = true; - -console.log(name + " is " + age + " years old."); -// Output: Alex is 25 years old. -``` - -Three lines. Three labeled boxes. The `console.log()` line prints a message by combining those values together. - -JavaScript gives you three ways to create variables. `let` is for values that might change — a score in a game, the number of items in a cart. `const` is for values that won't change — a user's birth date, a tax rate. `var` is the old way of doing things. You'll see it in older code, but stick with `let` and `const` for anything new. - -Quick rule of thumb: use `const` by default. Switch to `let` only when you know the value needs to change. That habit alone prevents a whole category of bugs. - -[**Try this code in your browser →**](https://phcode.dev) - -## 2\. Data Types — Different Kinds of Information - -Not all data is the same. A person's name is different from their age, which is different from whether they're logged in or not. JavaScript has several data types to handle these differences. - -```js -let score = 99; // Number -let greeting = "Hello!"; // String (text) -let isOnline = false; // Boolean (true or false) -let address = null; // Null (intentionally empty) -let phone; // Undefined (not yet assigned) - -console.log(typeof score); // "number" -console.log(typeof greeting); // "string" -console.log(typeof isOnline); // "boolean" -console.log(typeof address); // "object" (a known JavaScript quirk) -console.log(typeof phone); // "undefined" -``` - -Numbers handle math. Strings handle text — anything between quotes. Booleans are yes/no switches, only ever `true` or `false`. `null` means "this is intentionally blank," like a form field you've deliberately left empty. `undefined` means "this hasn't been given a value yet." - -The `typeof` operator is your detective tool. Not sure what kind of data you're working with? Run `typeof` on it. You'll use this constantly when debugging, especially when something that should be a number is secretly a string (it happens more than you'd think). - -[**Try this code in your browser →**](https://phcode.dev) - -## 3\. Operators — Doing Things with Data - -Operators let you perform actions on data — math, comparisons, logic. You've been using operators your entire life. The `+` on a calculator? That's an operator. - -```js -// Arithmetic -let total = 15 + 10; // 25 -let half = total / 2; // 12.5 -let remainder = 17 % 5; // 2 (modulo — the leftover after division) - -// Comparison -console.log(10 === 10); // true (strict equality) -console.log(10 === "10"); // false (different types) -console.log(5 > 3); // true -console.log(5 !== 3); // true (not equal) - -// Logical -let hasTicket = true; -let isVIP = false; -console.log(hasTicket && isVIP); // false (AND — both must be true) -console.log(hasTicket || isVIP); // true (OR — at least one is true) -console.log(!isVIP); // true (NOT — flips the value) -``` - -The triple equals `===` is worth remembering. JavaScript also has `==` (double equals), which tries to convert types before comparing — `10 == "10"` returns `true`, which isn't usually what you want. Stick with `===` to avoid surprises. - -Logical operators — `&&` (AND), `||` (OR), `!` (NOT) — show up everywhere in real code. "If the user is logged in AND has admin privileges, show the dashboard." That's `&&` in action. - -[**Try this code in your browser →**](https://phcode.dev) - -## 4\. Conditionals — Making Decisions - -Programs need to make choices. Should the app show a login screen or a dashboard? Should the discount apply or not? Conditionals are how code decides what to do next. - -Think of getting dressed in the morning. If it's cold outside, you grab a jacket. If it's warm, you don't. If it's raining, you grab an umbrella too. Your brain runs through these checks automatically — conditionals make a computer do the same thing. - -```js -let temperature = 72; - -if (temperature > 85) { - console.log("It's hot — stay hydrated!"); -} else if (temperature > 65) { - console.log("Nice weather — perfect for a walk."); -} else if (temperature > 45) { - console.log("A bit chilly — grab a jacket."); -} else { - console.log("It's cold — bundle up!"); -} -// Output: Nice weather — perfect for a walk. -``` - -The computer checks each condition from top to bottom. The moment one is true, it runs that block and skips the rest. Change `temperature` to 30 and run it again — you'll get a completely different message. - -Every `if` needs a condition inside parentheses that evaluates to `true` or `false`. The `else if` blocks are optional extras — add as many as you need. The final `else` is the fallback, the "none of the above" case. - -[**Try this code in your browser →**](https://phcode.dev) - -## 5\. Loops — Repeating Actions - -Imagine you're stuffing 500 envelopes by hand. Same action, 500 times. Tedious. A loop tells the computer to repeat a task for you — whether that's 5 times or 5 million. - -```js -// For loop — when you know how many times -for (let i = 1; i <= 5; i++) { - console.log("Count: " + i); -} -// Output: Count: 1, Count: 2, Count: 3, Count: 4, Count: 5 - -// While loop — when you don't know how many times -let tries = 0; -let unlocked = false; - -while (!unlocked) { - tries++; - console.log("Attempt #" + tries); - if (tries === 3) { - unlocked = true; - console.log("Access granted!"); - } -} -``` - -The `for` loop has three parts crammed into one line: a starting point (`let i = 1`), a condition to keep going (`i <= 5`), and what happens after each round (`i++`, which adds 1). It's compact but powerful. - -The `while` loop is simpler in structure — it just keeps going as long as its condition is true. You'll reach for `for` loops when you know the count ahead of time (loop through 10 items, count from 1 to 100). Use `while` when you're waiting for something to happen — a user entering the right password, a sensor reading hitting a threshold. - -One warning: if your condition never becomes false, the loop runs forever. That's called an infinite loop, and it'll freeze your browser tab. Always make sure something inside the loop eventually breaks the condition. - -[**Try this code in your browser →**](https://phcode.dev) - -## 6\. Functions — Reusable Blocks of Code - -A function is a named set of instructions you can run whenever you want. Think of it like a recipe card in a box. You don't rewrite the whole recipe every time you make pancakes — you just pull out the card. Functions work the same way. - -```js -function calculateTip(billAmount, tipPercent) { - let tip = billAmount * (tipPercent / 100); - let total = billAmount + tip; - return total; -} - -let dinner = calculateTip(85, 20); -let lunch = calculateTip(32, 15); - -console.log("Dinner total: $" + dinner); // Dinner total: $102 -console.log("Lunch total: $" + lunch); // Lunch total: $36.8 -``` - -The function `calculateTip` takes two inputs (called parameters): the bill amount and the tip percentage. It does the math, then `return` sends the result back to wherever the function was called. - -Write once, use everywhere. That's the whole point. If 12 different parts of your program need to calculate tips, you don't write the formula 12 times. You call the function 12 times. And if the formula ever needs to change — say, you want to add tax — you change it in one place. - -Functions also make your code readable. `calculateTip(85, 20)` tells you exactly what's happening. The raw math `85 * (20 / 100) + 85` doesn't. - -[**Try this code in your browser →**](https://phcode.dev) - -## 7\. Arrays and Objects — Organizing Data - -Real programs deal with collections of data, not just single values. Arrays and objects are two ways to organize multiple pieces of information. - -An array is an ordered list. Think of a playlist — song 1, song 2, song 3, in that order. - -```js -let colors = ["red", "green", "blue", "yellow"]; - -console.log(colors[0]); // "red" (arrays start at 0, not 1) -console.log(colors.length); // 4 - -colors.push("purple"); // adds to the end -console.log(colors); // ["red", "green", "blue", "yellow", "purple"] -``` - -An object is a collection of labeled data — like a contact card. Each piece of information has a name (key) and a value. - -```js -let person = { - name: "Jordan", - age: 28, - city: "Portland", - hobbies: ["hiking", "cooking", "guitar"] -}; - -console.log(person.name); // "Jordan" -console.log(person.hobbies[0]); // "hiking" -``` - -Arrays count by position (0, 1, 2, 3). Objects use names. When the order matters — a list of search results, steps in a process — use an array. When you need labeled fields — a user profile, a product listing, a configuration — use an object. - -Notice that `hobbies` inside the person object is itself an array. You can nest these structures inside each other. A database of 1,000 users might be an array of objects, each containing arrays. That's how real apps store data. - -[**Try this code in your browser →**](https://phcode.dev) - -## 8\. Scope — Where Variables Live - -Not every variable is available everywhere in your code. Where you create a variable determines where you can use it. That's scope. - -```js -let globalMessage = "Available everywhere"; - -function greetUser() { - let localMessage = "Only available inside this function"; - console.log(globalMessage); // Works fine - console.log(localMessage); // Works fine -} - -greetUser(); -console.log(globalMessage); // Works fine -console.log(localMessage); // ERROR: localMessage is not defined -``` - -`globalMessage` lives outside any function — it's accessible from anywhere in your code. `localMessage` lives inside `greetUser`, so it only exists while that function is running. Try to use it outside? JavaScript doesn't know what you're talking about. - -This isn't a limitation — it's a feature. Scope keeps your variables from accidentally overwriting each other. Imagine two different functions both using a variable called `total`. Without scope, they'd clobber each other's values. With scope, each function gets its own private `total` that doesn't interfere. - -Best practice: keep variables as local as possible. If a variable only needs to exist inside a function, declare it there. Global variables are convenient but get messy fast in larger programs. - -[**Try this code in your browser →**](https://phcode.dev) - -## 9\. Comments and Readability - -Code spends way more time being read than being written. Six months from now, you'll open a file and wonder what you were thinking. Comments are notes to your future self — and to anyone else who reads your code. - -```js -// Calculate the user's age from their birth year -let birthYear = 1998; -let currentYear = 2026; -let age = currentYear - birthYear; - -/* - Apply a discount based on membership level: - - Gold members: 20% off - - Silver members: 10% off - - Everyone else: no discount -*/ -function getDiscount(memberLevel, price) { - if (memberLevel === "gold") { - return price * 0.8; // 20% off - } else if (memberLevel === "silver") { - return price * 0.9; // 10% off - } - return price; // no discount -} -``` - -Single-line comments start with `//`. Multi-line comments sit between `/*` and `*/`. Both are completely ignored by the computer — they exist only for human readers. - -Don't comment every single line. Good code mostly reads itself. Comment the *why*, not the *what*. `// subtract 1` on a line that says `x - 1` adds nothing. But `// subtract 1 because array indexes start at 0` explains a decision someone might question later. - -Variable and function names carry a lot of weight too. `getDiscount` tells you more than `calc` or `doStuff`. Readable names plus a few well-placed comments — that's the sweet spot. - -[**Try this code in your browser →**](https://phcode.dev) - -## 10\. Debugging — Finding and Fixing Errors - -Bugs happen. Every single program has them at some point. Debugging isn't a sign you did something wrong — it's a normal part of coding. The skill isn't avoiding bugs entirely; it's finding and fixing them quickly. - -Your best friend? `console.log()`. When something isn't working, sprinkle it through your code to see what's actually happening versus what you expected. - -```js -function calculateAverage(numbers) { - let sum = 0; - for (let i = 0; i <= numbers.length; i++) { // Bug: <= should be < - console.log("Index:", i, "Value:", numbers[i]); - sum += numbers[i]; - } - let average = sum / numbers.length; - return average; -} - -let grades = [90, 85, 92, 78]; -console.log("Average:", calculateAverage(grades)); -// Output shows: Index: 4 Value: undefined -// That's the clue — index 4 doesn't exist in a 4-item array -``` - -The `console.log` inside the loop reveals the problem. Index 4 returns `undefined` because arrays with 4 items only go up to index 3. Adding `undefined` to a number produces `NaN` (Not a Number), and the whole result breaks. The fix: change `<=` to `<` in the loop condition. - -Three errors you'll see constantly when starting out: - -- **Typos** — `consol.log` instead of `console.log`. JavaScript doesn't know what `consol` is. -- **Missing brackets** — forgetting a `}` to close a function or `if` block. The error message often points to the wrong line, which is extra confusing. -- **Undefined variables** — using a variable name you haven't declared, or using it outside its scope. - -Don't panic when you see red error messages. Read them carefully — they usually tell you exactly which line the problem is on. That line number plus a `console.log` or two will get you unstuck 90% of the time. - -[**Try this code in your browser →**](https://phcode.dev) - -## What to Learn After These Basic Coding Concepts - -You've now got the 10 building blocks that every program is made of. Variables store data. Conditionals make decisions. Loops repeat tasks. Functions organize your code. These basic coding concepts don't change whether you're building a website, a mobile app, or a game. - -Here's where to go from here: - -- **DOM manipulation** — this is how JavaScript changes what you see on a web page. Click a button, and text appears. Submit a form, and a message pops up. It's where coding starts feeling tangible. -- **APIs** — short for Application Programming Interfaces. They let your code talk to other services. Want to display weather data or pull in tweets? That's an API call. -- **Git** — a tool that tracks every change you make to your code, so you can undo mistakes and collaborate with others. Phoenix Code has [built-in Git support](/docs/Features/git) so you can start using it right away. -- **Live Preview** — see your HTML and CSS changes in real time as you type. Phoenix Code's [Live Preview](/docs/Features/Live%20Preview/live-preview) makes this instant — no manual refreshing. - -Pick one thing, build something small, and keep going. That's genuinely how everyone learns this. - -## Frequently Asked Questions - -### What are the 5 basics of coding? - -The five core concepts are variables (storing data), conditionals (making decisions with if/else), loops (repeating actions), functions (reusable blocks of code), and data structures like arrays and objects (organizing information). Every programming language has its own version of these five ideas. Master them in one language, and picking up another becomes dramatically easier. - -### How long does it take to learn basic coding? - -The 10 concepts in this article? A few focused hours of reading and experimenting. Feeling comfortable enough to build small projects on your own — a to-do list, a quiz app, a personal website? Roughly 2 to 4 weeks of regular practice, maybe 30 minutes to an hour a day. You won't feel like an expert, and that's fine. Competence comes before confidence in coding. - -### Do you need math to learn coding? - -Basic arithmetic — addition, subtraction, multiplication, division — covers most of what web development requires. You won't need algebra or calculus to build websites, process forms, or create interactive pages. Advanced math only enters the picture in specialized fields: data science, 3D game physics, cryptography, machine learning. For the vast majority of coding, if you can calculate a tip at a restaurant, your math is strong enough. - -### What's the difference between coding and programming? - -Coding is the act of writing code — typing instructions in a programming language. Programming is the broader process: analyzing a problem, designing a solution, writing the code, testing it, and fixing bugs. In everyday conversation, people use the two words interchangeably. If someone says "coding" and someone else says "programming," they're almost always talking about the same thing. Don't get hung up on the distinction. - -### What's the best programming language to start with? - -JavaScript runs in every web browser without any setup. You can build websites, server applications, mobile apps, and even games with it. It also has the largest developer community, which means more tutorials, more answers on forums, and more help when you're stuck. Python is another excellent choice, especially if you're interested in data science or automation. Both are beginner-friendly. Pick whichever one aligns with what you want to build — you can't really go wrong with either. - -### Can you learn coding for free? - -Yes — completely free. [Phoenix Code](https://phcode.dev) is a free, open-source code editor that runs directly in your browser. No downloads, no accounts, no credit cards. Pair it with [MDN Web Docs](https://developer.mozilla.org/) (Mozilla's comprehensive reference for HTML, CSS, and JavaScript) and freeCodeCamp (free structured courses with certificates), and you've got everything you need to go from zero to building real projects without spending a cent. - -## Start Coding Now - -Every basic coding concept in this article is something you can practice today. Open [phcode.dev](https://phcode.dev) in your browser — it's free, works on any device, and doesn't require installation or an account. Create a new JavaScript file, paste in any of the examples above, and start experimenting. Change the values. Break the code on purpose. Fix it. That cycle of writing, breaking, and fixing is exactly how coding skills develop. - -If you prefer a desktop app with offline access, you can [download Phoenix Code](https://phcode.dev/download) for Windows, Mac, or Linux. And when you're ready to see your HTML and CSS come alive as you type, check out the [Live Preview documentation](/docs/Features/Live%20Preview/live-preview) to get started with real-time feedback. - -The best time to start coding was yesterday. The second best time is right now.