{"id":51029002,"url":"https://github.com/azhar25git/glancesql","last_synced_at":"2026-06-21T22:03:08.464Z","repository":{"id":361838966,"uuid":"1256054096","full_name":"azhar25git/glancesql","owner":"azhar25git","description":"GlanceSQL is a single-file interactive SQL learning website.","archived":false,"fork":false,"pushed_at":"2026-06-01T13:00:01.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-01T14:22:11.366Z","etag":null,"topics":["learning","sql","tutorial"],"latest_commit_sha":null,"homepage":"https://minisoft.bd/glancesql/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azhar25git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-01T12:21:04.000Z","updated_at":"2026-06-01T13:00:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/azhar25git/glancesql","commit_stats":null,"previous_names":["azhar25git/glancesql"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/azhar25git/glancesql","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azhar25git%2Fglancesql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azhar25git%2Fglancesql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azhar25git%2Fglancesql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azhar25git%2Fglancesql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azhar25git","download_url":"https://codeload.github.com/azhar25git/glancesql/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azhar25git%2Fglancesql/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34627233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["learning","sql","tutorial"],"created_at":"2026-06-21T22:03:07.552Z","updated_at":"2026-06-21T22:03:08.459Z","avatar_url":"https://github.com/azhar25git.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GlanceSQL\n\n\u003e **Master SQL in One Glance** — 131 topics, zero setup, one page.  \n\u003e **Visit: https://glancesql.minisoft.bd/**\n\nGlanceSQL is a single-file interactive SQL learning website. No build step, no backend, no database — just open it in a browser and start learning. Every SQL concept from `SELECT` to the CAP theorem, explained with simple analogies, executable examples, and visual data tables.\n\n---\n\n## Screenshot\n\n```\n┌──────────────────────────────────────────────────────────┐\n│  🔍 GlanceSQL                    🌙  Progress: 72%      │\n├─────────────┬────────────────────────────────────────────┤\n│  Core       │  🎯 GROUP BY                              │\n│  Concepts   │  Think of it like gathering LEGO bricks   │\n│  ├─ What is │  by color — you sort them into piles and  │\n│  │  SQL     │  count each pile.                         │\n│  ├─ What is │                                           │\n│  │  DB      │  ┌─────────────────────────────────────┐  │\n│  ├─ ...     │  │ SELECT dept, COUNT(*) AS emp_count  │  │\n│             │  │ FROM employees                      │  │\n│  Querying   │  │ GROUP BY dept                       │  │\n│  Data       │  └─────────────────────────────────────┘  │\n│  ├─ SELECT  │                                           │\n│  ├─ ...     │  dept        │ emp_count                   │\n│             │  ─────────────────────────────────        │\n│  Functions  │  Engineering │ 3                          │\n│  ├─ COUNT   │  Sales       │ 2                          │\n│  ├─ ...     │                                           │\n│             │  ✅ Key Takeaway                           │\n│  Anti-      │  GROUP BY collapses rows into summary     │\n│  Patterns   │  buckets. Every col in SELECT must be     │\n│  ├─ SQL Inj │  in GROUP BY or wrapped in an aggregate.  │\n│  └─ ...     └───────────────────────────────────────────┘\n└──────────────────────────────────────────────────────────┘\n```\n\n*(Styled with a dark-by-default theme, light mode toggle, and syntax-highlighted code blocks via Prism.js.)*\n\n---\n\n## Features\n\n| Feature | Description |\n|---|---|\n| **131 Topics** | 18 categories from beginner to expert — every SQL concept covered |\n| **Zero Setup** | No npm install, no build, no database — open `index.html` in any browser |\n| **Dark/Light Theme** | Toggle with one click, persisted to localStorage |\n| **Lazy Loading** | Content loads on demand — instant page load, smooth navigation |\n| **Sidebar Search** | Filter 131 topics by name, ID, or category in real time |\n| **Progress Tracking** | Mark topics as complete; progress bar and localStorage persistence |\n| **Syntax Highlighting** | All code blocks rendered with Prism.js for clarity |\n| **Keyboard Navigation** | Arrow keys to move between topics, Escape to close sidebar |\n| **Fully Responsive** | Sidebar collapses on mobile, content scales to any screen |\n\n---\n\n## Topic Coverage\n\n### 18 Categories, 131 Topics\n\n```\nCore Concepts (6)         ──  What is SQL, What is a Database, Relational Concepts,\n                              Data Types, SQL Syntax, Comments\n\nQuerying Data (11)        ──  SELECT, SELECT DISTINCT, FROM, AS Alias, Comparison Ops,\n                              AND/OR/NOT, ORDER BY, LIMIT/OFFSET, NULL, IS NULL, WHERE\n\nFiltering \u0026 Patterns (5)  ──  LIKE, Wildcards, IN, BETWEEN, CASE Expression\n\nData Manipulation (4)     ──  INSERT, UPDATE, DELETE, TRUNCATE\n\nFunctions (15)            ──  COUNT, SUM/AVG, MIN/MAX, UPPER/LOWER, LENGTH, TRIM,\n                              SUBSTRING, REPLACE, CONCAT, COALESCE, NULLIF, CAST,\n                              ROUND/CEIL/FLOOR, ABS, Date Functions\n\nAggregation (5)           ──  GROUP BY, HAVING, GROUPING SETS, ROLLUP, CUBE\n\nJoins (8)                 ──  INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL JOIN, CROSS JOIN,\n                              NATURAL JOIN, SELF JOIN, Non-Equi JOIN\n\nSet Operations (3)        ──  UNION, INTERSECT, EXCEPT/MINUS\n\nSubqueries (6)            ──  Scalar, Row, Table, Correlated, EXISTS, ANY/ALL\n\nSchema \u0026 DDL (13)         ──  CREATE TABLE, ALTER TABLE, DROP TABLE, NOT NULL, UNIQUE,\n                              PRIMARY KEY, FOREIGN KEY, CHECK, DEFAULT, Indexes, Views,\n                              Sequences, Temp Tables\n\nAdvanced SQL (15)         ──  CTE, Recursive CTE, ROW_NUMBER, LEAD/LAG, Window Frames,\n                              FIRST_VALUE/LAST_VALUE, PIVOT/UNPIVOT, MERGE/UPSERT,\n                              LATERAL, STRING_AGG, JSON Functions, Full-Text Search,\n                              Spatial Data, Gaps \u0026 Islands, Running Totals\n\nTransactions (5)          ──  BEGIN/COMMIT/ROLLBACK, SAVEPOINT, Isolation Levels,\n                              LOCK TABLE, Deadlocks\n\nStored Logic (5)          ──  Stored Procedures, User Functions, Triggers, Cursors,\n                              Dynamic SQL\n\nPerformance (7)           ──  EXPLAIN, Query Optimization, Indexing Strategies,\n                              Index Maintenance, Partitioning, Query Hints,\n                              CBO vs RBO\n\nDatabase Design (11)      ──  1NF, 2NF, 3NF, BCNF, Denormalization, ER Modeling,\n                              Referential Integrity, Sharding, Replication,\n                              ACID vs BASE, CAP Theorem\n\nDialect Features (6)      ──  MySQL, PostgreSQL, SQL Server, SQLite, Oracle,\n                              ANSI SQL Standards\n\nAnti-Patterns (6)         ──  SQL Injection, N+1 Query, Cartesian Explosions,\n                              Halloween Problem, Implicit vs Explicit Joins,\n                              Index Bloat\n```\n\n---\n\n## Architecture\n\nGlanceSQL is a **pure frontend** application — three files, no dependencies beyond CDN scripts.\n\n```\nindex.html    (̃6430 lines)  — Layout, Alpine.js templates, sidebar, Prism integration\nmain.js       (̃6430 lines)  — 131 topics, content generator, Alpine component, datasets\nstyles.css    (  ~450 lines)  — Theme variables, Prism overrides, animations, responsive rules\n```\n\n### How It Works\n\n1. **Topics Array:** `main.js` defines 131 topic objects (`{ id, t, c, d, i }`) organized into 18 categories.\n2. **Content Generator:** A `generateContent()` function with 131 `else if` branches returns custom HTML, SQL syntax, example data, and result tables for each topic.\n3. **Lazy Loading:** When a user clicks a topic, `loadContent()` calls `generateContent()` once and caches the result. Subsequent clicks are instant.\n4. **Alpine.js Component:** `window.__gsComponent` manages state — current topic, search, dark mode, progress, sidebar visibility.\n5. **Theming:** CSS custom properties for dark/light mode. A single class toggle on `\u003chtml\u003e` swaps all colors.\n\n### CDN Dependencies\n\n- **[Tailwind CSS](https://tailwindcss.com/)** (CDN) — utility-first CSS for layout\n- **[Alpine.js](https://alpinejs.dev/)** (CDN) — reactive state management\n- **[Prism.js](https://prismjs.com/)** (CDN) — SQL syntax highlighting\n\nNo build step, no package managers, no backend.\n\n---\n\n## Content Style\n\nEvery topic follows a consistent pedagogical structure:\n\n| Section | What It Contains |\n|---|---|\n| **🎯 Analogy** | A real-world comparison that makes the concept intuitive |\n| **📝 Syntax Block** | Correct SQL with comments explaining each part |\n| **🔢 Example Data** | A small dataset displayed as a table (e.g., 5–10 rows) |\n| **📊 Result Table** | What the query produces — shown as a formatted table |\n| **✅ Key Takeaway** | One-paragraph summary with the essential rules |\n| **💡 Pro Tip / ⚠️ Warning** | Practical advice or common pitfalls |\n\nWhere appropriate, topics include **multiple examples** (e.g., CTE shows two different datasets; window functions compare ROW_NUMBER vs RANK vs DENSE_RANK).\n\n---\n\n## Customization\n\n### Adding a New Topic\n\n1. Add an entry to the `TOPICS` array in `main.js`:\n   ```js\n   { id:'my-new-topic', t:'My New Topic', c:'category-id', d:'intermediate', i:'📘' },\n   ```\n2. Add an `else if` branch in `generateContent()` with `sections.push({...})` calls.\n3. The topic appears in the sidebar automatically.\n\n### Changing the Theme\n\nAll colors are defined as CSS custom properties in `styles.css`. Edit the `:root` (light) and `.dark` (dark) blocks.\n\n---\n\n## FAQ\n\n**Does it work offline?**\nOnce loaded, all content is cached in memory. The CDN scripts are the only online dependency. You can download all three files and serve them locally for full offline use.\n\n**Do I need to know JavaScript to use it?**\nNo. The website is fully usable through the browser UI. JavaScript knowledge is only needed if you want to add or modify topics.\n\n**Can I add my own examples?**\nAbsolutely. Fork the repo, edit `main.js`, and add your topic. Content is always loaded from the file — no server or API involved.\n\n**Why no database?**\nGlanceSQL is a learning tool, not a query executor. Example datasets and result tables are hardcoded to illustrate concepts clearly. The focus is on understanding SQL syntax and semantics, not on executing live queries.\n\n---\n\n## License\n\nMIT — free to use, modify, and distribute.\n\nBuilt with ❤️ for SQL learners everywhere.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazhar25git%2Fglancesql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazhar25git%2Fglancesql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazhar25git%2Fglancesql/lists"}