Syncing master and develop - 09/30

README.md

@@ -2,8 +2,9 @@
 
 ### [devpedia.pages.dev](https://devpedia.pages.dev/) | [devpedia.dev](https://devpedia.dev/)
 
-A simple project simplifies technical terms, concepts, jargon, and whatnot: Open-source and ad-free. It is fueled by contributions and donations (and coffee, of course).
+Dev encyclopedia is a simple, easy-to-use, and ad-free website that simplifies technical terms, concepts, jargon, and whatnot. It has a simple UI, covers various fields like UI/UX, Backend Development, AI/ML, and more, with 420+ simplified terms.
 
+It is fueled by contributions and donations (and coffee, of course).
 
 [![featured-on-dev-community](https://github.com/user-attachments/assets/b7d701ae-643c-4a24-b274-d6c46dd63351)](https://dev.to/devteam/top-7-featured-dev-posts-of-the-week-k9b#:~:text=%40buzzpy%20introduces%20Dev%20Encyclopedia)
 [![featured-on-hackernoon](https://github.com/user-attachments/assets/7c3c9037-d46a-4fd8-938a-26f905d8331a)](https://hackernoon.com/9-1-2024-techbeat#:~:text=Introducing%20Dev%20Encyclopedia%3A%20A%20Wikipedia%20Specifically%20for%20Developers)

package.json

@@ -26,7 +26,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.11.1",
     "@typescript-eslint/parser": "^8.8.0",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^9.11.1",
     "eslint-plugin-astro": "^1.2.4",
     "eslint-plugin-jsx-a11y": "^6.10.0",
@@ -35,6 +35,6 @@
     "prettier": "^3.3.3",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-astro": "^0.14.1",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.9"
   }
 }

src/components/Head.astro

@@ -1,29 +1,66 @@
 ---
 const { title = "Dev Encyclopedia", ...props } = Astro.props
 ---
-
 <!-- Common meta tags -->
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<meta name="title" content={title} />
-<meta
-  name="description"
-  content="Discover concise explanations and samples for tech terms and concepts in the Dev Encyclopedia. Find everything you need for development, all in one place."
-/>
-<meta
-  name="keywords"
-  content="dev encyclopedia,developer encyclopedia,developer dictionary,developer resources,developer tools,software resources,programming resources,programming terms,tech terms"
-/>
-<meta name="robots" content="index,follow" />
-<meta name="language" content="en" />
-<meta name="author" content="Chenuli Jayasinghe" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="title" content="DevPedia | Open-Source Developer Reference">
+<meta 
+  name="description" 
+  content="400+ programming terms explained clearly. Open-source tech dictionary with category filters for frontend, backend, DevOps, and CS fundamentals. Community-maintained knowledge base.">
+<meta 
+  name="keywords" 
+  content="open source programming dictionary, coding glossary, developer reference, tech terminology, frontend concepts, backend concepts, DevOps terms, computer science basics, GitHub knowledge base">
+<meta name="robots" content="index, follow">
+<meta name="language" content="en">
+<meta name="author" content="Chenuli Jayasinghe">
+
+<!-- Canonical URL -->
+<link rel="canonical" href="https://devpedia.dev" />
+
+<!-- Open Graph -->
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://devpedia.dev">
+
+<meta property="og:title" content="Dev Encyclopedia | A dictionary for programmers">
+<meta 
+  property="og:description" 
+  content="Community-driven encyclopedia for programmers with 400+ terms + category filters. Learn about programming concepts and tech jargon in Plain English">
+<meta property="og:image" content="https://i.ibb.co/nMwVhk7c/social-media-cover.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+
+<!-- Structured Data -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "Dev Encyclopedia",
+  "url": "https://devpedia.pages.dev",
+  "description": "A dictionary for programmers",
+  "license": "https://github.com/Buzzpy/Dev-Encyclopedia/blob/develop/LICENSE",
+  "isAccessibleForFree": true,
+  "keywords": "programmer dictionary, dev encyclopedia, devpedia, programming, development, glossary, open source, technical terms, programmer encyclopedia",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Programming and Doodles",
+    "founder": "Chenuli Jayasinghe",
+    "foundingDate": "2024",
+    "email": "chenuli@devpedia.dev",
+    "sameAs": "https://github.com/Buzzpy"
+  }
+}
+</script>
 
-<!-- Open Graph tags -->
-<meta property="og:title" content="Dev Encyclopedia" />
-<meta property="og:type" content="website" />
-<meta property="og:url" content="https://devpedia.dev/" />
-<meta
-  property="og:description"
-  content="Discover concise explanations and samples for tech terms and concepts in the Dev Encyclopedia. Find everything you need for development, all in one place."
-/>
-<meta property="og:image" content="" />
-<meta property="og:image:alt" content="" />
+<!-- Footer Microdata -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WPFooter",
+  "copyrightHolder": {
+    "@type": "Organization",
+    "name": "Programming and Doodles",
+    "copyrightYear": "2025"
+  },
+  "copyrightNotice": "Content available under CC BY-SA 4.0 license"
+}
+</script>

src/components/Hero.astro

@@ -12,6 +12,23 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b))
 
 <hero-com data>
   <div class="hero-section">
+    <div class="hero-paragraph" id="heroParagraph" style="font-size: 10px;
+    margin-top: -12px !important;  /* Pull element UP */
+    padding-top: 0 !important;
+    position: relative;
+    top: -8px; /* Fine-tune position */
+    display: block;">
+        Backed by 
+        <a href="https://codedoodles.xyz" 
+           target="_blank" 
+           rel="dofollow noopener noreferrer" 
+           style="color:rgb(128, 128, 128);"
+           aria-label="Visit Programming and Doodles official website">
+          <span itemscope itemtype="https://schema.org/Organization">
+            <meta itemprop="name" content="Programming and Doodles™">
+            <span itemprop="name">Programming and Doodles</span>&#8482;</span>
+        <time datetime="2025">2025.</time></a> All rights reserved.
+      </div>
     <div class="search-and-filter">
       <div class="search-bar">
         <i class="fas fa-search"></i>
@@ -53,14 +70,17 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b))
           id="darkModeText">Dark Mode</span
         >
       </button>
-
-      <button class="button" id="builderButton">
-        <i class="fas fa-hammer" style="padding-right: 10px;"></i> Builder's Note
-      </button>
-
+
       <button class="button" id="sponsorButton">
         <i class="fa-solid fa-dollar-sign" style="padding-right: 10px;"></i> Sponsor
       </button>
+      <button
+      class="button"
+      onclick="window.open('https://docs.google.com/forms/d/e/1FAIpQLSfKxg9lGenniBRrmPQz_qsCa7NtlN1uZPu_vv780UiRCppcOQ/viewform', '_blank')"
+    >
+      <i class="fa-solid fa-pen" style="padding-right: 10px;"></i> User survey
+    </button>
+
     </div>
 
     <div class="hero-title" id="heroTitle" style="padding-top: 50px;">

src/content/terms/AGI_(Artificial_GeneraL_Intelligence).json

@@ -0,0 +1,17 @@
+{
+    "title":"AGI (Artificial General Intelligence)",
+    "subtext":"AI with human-like cognitive abilities",
+    "categories":["Artificial Intelligence"],
+    "author":"halukerenozlu",
+    "description": {
+        "title": "AGI (Artificial General Intelligence)",
+        "texts":[
+            "Artificial general intelligence (AGI)—sometimes called human-level intelligence AI—is a type of artificial intelligence that would match or surpass human capabilities across virtually all cognitive tasks.", "Unlike artificial narrow intelligence (ANI), whose competence is confined to well-defined tasks, an AGI system can generalise knowledge, transfer skills between domains, and solve novel problems without task-specific reprogramming. "
+        ],
+        "image": "",
+        "references": [
+            "https://en.wikipedia.org/wiki/Artificial_general_intelligence",
+            "https://aws.amazon.com/what-is/artificial-general-intelligence/"
+        ]
+    } 
+}

src/content/terms/Beautifulsoup.json

@@ -1,7 +1,7 @@
 {
     "title": "Beautifulsoup",
     "subtext": "HTML/XML parsing library",
-    "categories": ["Web Scraping", "Scripting"],
+    "categories": ["Web Scraping"],
     "author": "Buzzpy",
     "description": {
       "title": "Beautifulsoup",

src/content/terms/Behaviour_driven_development.json

@@ -1,7 +1,7 @@
 {
     "title": "Behaviour Driven development (BDD)",
     "subtext": "A software development approach",
-    "categories": ["Software Development", "Testing Methodologies", "Agile Methodologies"],
+    "categories": ["Software Development", "SDLC"],
     "author": "Rilwan",
     "description": {
       "title": "Behaviour Driven development (BDD)",

src/content/terms/Bundlers.json

@@ -1,7 +1,7 @@
 {
   "title": "Bundlers",
   "subtext": "Tools that compile and optimize JavaScript code for efficient loading",
-  "categories": ["JavaScript", "Development Tools"],
+  "categories": ["JavaScript"],
   "author": "KrishDave",
   "description": {
     "title": "Bundlers",

src/content/terms/Churn_rate.json

@@ -0,0 +1,18 @@
+{
+    "title": "Churn Rate",
+    "subtext": "Measuring how many customers leave",
+    "categories": ["SaaS"],
+    "author": "Buzzpy",
+    "description": {
+      "title": "Churn Rate",
+      "texts": [
+        "Churn Rate is the percentage of users or revenue lost in a given period. High churn indicates dissatisfaction or poor product-market fit.",
+        "SaaS companies obsess over churn, because reducing it even slightly can massively improve long-term revenue."
+      ],
+      "image": "https://assets-global.website-files.com/625f87c5d4e4fb29d37658dc/62d5745f8912a58213485db7_churn-rate.webp",
+      "references": [
+        "https://www.profitwell.com/blog/churn-rate",
+        "https://baremetrics.com/academy/churn-rate"
+      ]
+    }
+  }

src/content/terms/Code_refactoring.json

@@ -1,7 +1,7 @@
 {
     "title": "Code refactoring",
     "subtext": "Improving the internal structure of code without altering its external behavior" ,
-    "categories": ["Software Development", "Code Maintenance", "Software Design"],
+    "categories": ["Software Development"],
     "author": "Rilwan",
     "description": {
       "title": "Code refactoring",

src/content/terms/Cold_Start_problem.json

@@ -0,0 +1,18 @@
+{
+  "title": "Cold Start Problem",
+  "subtext": "Initial latency in systems due to lack of prior data",
+  "categories": ["Machine Learning", "DevOps"],
+  "author": "Buzzpy",
+  "description": {
+    "title": "Cold Start Problem",
+    "texts": [
+      "The Cold Start Problem refers to the challenge of making accurate predictions or delivering optimal performance in systems when there is little to no historical data available.",
+      "For instance, a new user on a recommendation platform may receive less personalized suggestions until the system gathers sufficient interaction data."
+    ],
+    "image": "https://thingsolver.com/wp-content/uploads/cold-start-problem.webp",
+    "references": [
+      "https://calv.info/bookshelf/cold-start-problem"
+
+    ]
+  }
+}

src/content/terms/Crawling.json

@@ -1,7 +1,7 @@
 {
     "title": "Crawling",
     "subtext": "Web content discovery",
-    "categories": ["Web Scraping", "Data Mining", "Search Engines"],
+    "categories": ["Web Scraping", "Data Science"],
     "author": "Buzzpy",
     "description": {
       "title": "Crawling",

src/content/terms/Dark_Patterns.json

@@ -0,0 +1,17 @@
+{
+    "title": "Dark Patterns",
+    "subtext": "Interfaces that trick users into actions",
+    "categories": ["UI/UX Design"],
+    "author": "Buzzpy",
+    "description": {
+      "title": "Dark Patterns",
+      "texts": [
+        "Dark patterns are deceptive UI techniques designed to trick users into doing things they might not have intended—like signing up for recurring payments.",
+        "Ethical design avoids dark patterns and respects user consent and transparency."
+      ],
+      "image": "https://www.uxdesigninstitute.com/blog/wp-content/uploads/2022/12/219_dark_patterns_in_UX_illustration_blog.png",
+      "references": [
+        "https://www.uxdesigninstitute.com/blog/what-are-dark-patterns-in-ux/"
+      ]
+    }
+  }

src/content/terms/Data_streaming.json

@@ -1,7 +1,7 @@
 {
     "title": "Data Streaming",
     "subtext": "A continuous flow of data that allows for real-time processing and analysis." ,
-    "categories": ["Data Processing", "Real-time Data", "Data Analytics"],
+    "categories": ["Data Science"],
     "author": "Rilwan",
     "description": {
       "title": "Data streaming",

src/content/terms/Dependency.json

@@ -1,7 +1,7 @@
 {
     "title": "Dependency",
     "subtext": "A required software library or component that other software relies on",
-    "categories": ["Software Development", "Package Management", "Build Systems"],
+    "categories": ["Software Development", "Software Architecture"],
     "author": "Rilwan",
     "description": {
       "title": "Dependency",

src/content/terms/Dev_Ergonomics.json

@@ -0,0 +1,17 @@
+{
+  "title": "Dev Ergonomics",
+  "subtext": "Designing tools that feel good to use",
+  "categories": ["General"],
+  "author": "Buzzpy",
+  "description": {
+    "title": "Dev Ergonomics",
+    "texts": [
+      "Dev Ergonomics is the practice of designing developer tools and environments that reduce mental friction, cognitive overload, and context-switching fatigue.",
+      "A well-designed CLI with intuitive commands, syntax-highlighted logs, or a zero-config tool are all examples of ergonomic thinking in developer workflows."
+    ],
+    "image": "",
+    "references": [
+      "https://medium.com/rebaze/into-developer-ergonomics-d3d7e0d1da6f"
+    ]
+  }
+}

src/content/terms/Developer_Experience.json

@@ -0,0 +1,19 @@
+{
+    "title": "DX (Developer Experience)",
+    "subtext": "Optimizing tools and workflows for developers",
+    "categories": ["General"],
+    "author": "Buzzpy",
+    "description": {
+      "title": "DX (Developer Experience)",
+      "texts": [
+        "Developer Experience (DX or DevEx) refers to the overall experience developers have while interacting with tools, libraries, platforms, and documentation.",
+        "A high-quality DX leads to faster development, fewer bugs, and happier developers. This includes clear error messages, well-structured documentation, intuitive APIs, fast feedback loops, and seamless onboarding.",
+        "For example, tools like Vite and Next.js are praised for their excellent DX due to instant reloads, easy configuration, and strong community support."
+      ],
+      "image": "https://miro.medium.com/v2/resize:fit:1400/format:webp/0*Quy-0wA1qaj726j9",
+      "references": [
+        "https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9"
+      ]
+    }
+  }
+

src/content/terms/Digital_Twins.json

@@ -1,7 +1,7 @@
 {
   "title": "Digital Twins",
   "subtext": "Virtual replicas of physical objects or systems",
-  "categories": ["IoT", "Simulation"],
+  "categories": ["IoT", "Other"],
   "author": "Buzzpy",
   "description": {
     "title": "Digital Twins",

src/content/terms/ECMAScript.json

@@ -1,7 +1,7 @@
 {
   "title": "ECMAScript",
   "subtext": "The standardized scripting language behind JavaScript",
-  "categories": ["Programming", "JavaScript"],
+  "categories": ["JavaScript", "Other"],
   "author": "KrishDave",
   "description": {
     "title": "ECMAScript",

src/content/terms/Empty_State_Design.json

@@ -0,0 +1,17 @@
+{
+    "title": "Empty State Design",
+    "subtext": "Making blank screens helpful",
+    "categories": ["UI/UX Design"],
+    "author": "Buzzpy",
+    "description": {
+      "title": "Empty State Design",
+      "texts": [
+        "Empty states appear when there’s no content to show—like a new inbox or a deleted list.",
+        "Well-designed empty states guide users toward action, explain what’s missing, or offer a friendly message to reduce confusion."
+      ],
+      "image": "https://img.uxcel.com/practices/replace-the-element-1602859019475/a-1702667421183-2x.jpg",
+      "references": [
+        "https://www.toptal.com/designers/ux/empty-state-ux-design"
+      ]
+    }
+  }

src/content/terms/Favicon.json

@@ -1,7 +1,7 @@
 {
     "title": "Favicon",
     "subtext": "Website's tiny icon",
-    "categories": ["Frontend Development"],
+    "categories": ["Frontend Development", "UI/UX Design"],
     "author": "Buzzpy",
     "description": {
       "title": "Favicon",