├── LICENSE ├── README.md └── site ├── index.html └── md-page.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Peyman Borhani 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # `The Perfect Tech-guide & Awesome-list ` 🛠i 3 | ### A developer's info-guide on: `tech` - `tools` - `Libs` - `Frameworks` 4 |
5 | 6 | - [Article is about](): `best practices` + `guide` + `awesome list` of tech-stack(libs,tools..), platforms, workflow. 7 | - [Multiple options](): are for you to decide based on your goals.(compare X vs Y, pros/cons, use-case..) 8 | - [Recommendations](): given based on summary of various factors: test or compared reviews of experts on the field. 9 |
10 | 11 | > [*Decisions*](): have long-term impact. Dev-stack/toolchain + working method/strategy impacts your progress. 12 | > [*Making right choices*](): early on, increase success and progress chances, self-respecting your skills. 13 | > [*Nothing's perfect*, yet..]() better options/methods improves DX, workflow, structure, progress, efficiency. 14 |
15 | 16 | [GitHub Repo >> https://github.com/Systemic-Labs/Perfect-Stack](https://github.com/Systemic-Labs/Perfect-Stack) 17 | 18 | [To Contribute]() >> `add links` to items, `reason/prove` an obvious better option, `improve doc`. 19 | >* target users - keywords: `developers`, `designers`, `researchers`, `students`, `startups`, `decision makers` 20 |
21 | 22 |
23 | 24 | # `Shortcuts ` 25 | 26 | > ### [ Intro ](#starter-intro) 27 | > ### [ Awesome list ](#awesome-list) 28 | > ### [ Programming Languages ](#programming-languages) 29 | > ### [ Frameworks - more info/details ](#frameworks-information) 30 | > ### [ Extra information and discussion ](#extra-information) 31 | 32 | *** 33 |
34 | 35 | ## Intro 36 | 37 | ### [`To beginners and startups`](#to-beginners-and-startups) 38 | 39 | First of all, don't choose software development, in hope to make money! (this advice might include any non-essential support and services jobs/products that's not actively in demand). 40 | With recent Ai advancement, and a over-saturated matured non-essential market, job demands are quite low, many unemployed workforce. 41 | Therefore: 42 | > Have 2nd source of income, job or support, while becoming a pro in your field. 43 | > You must have strong goals, motives, reasons, plans, being persistent until success. 44 | > You must gain high experience and achievements, be top competitive in your field. 45 | 46 | #### Technical Decisions 47 | 48 | Don't make technical decisions just based on what majority follow, market hype, and main trends.., instead, decide based on multiple factors, such as: 49 | [Pros/Cons - Review Comparison]() - [Requirements]()- [Best fit / Integration](), 50 | [Problem solves]() - [Feasable / Accessible]() - [High Rated]() - [Popularity](), 51 | [Focus / Goals]() - [Priority / Importance]() - [Stable Eco-system]() 52 | and finalize your decision considering: 53 | - `Main Priority` - `Best fitting` - `Feasable? Can be done? (adopt / implement / execute)` 54 | - `Work type`: startup/job/personal - `State`: start / scale / remake / migrate / extend. 55 | - `Impact`: team, users, cost, deadline, dev-cycle, integration, stablity, milestone, completion. 56 | 57 |
..more on this topic.. >> press to expand ↴ 58 | 59 | Majority of developers adopted older popular tech/methods by the circumstances in past, by workplace/education requirements job offers, senior advice, or the 1st option encountered, or just due to common hype, in the past, but not the best choice now. 60 | This cycle repeats and non optimal tech get stuck in social, market, and job/edu systems, then if you adopt it, by the time you build your work on it, the tech might be near end of life, or bad/slow pace, as it holds to legacy patterns, and compatibility patches to make it work with ongoing needs of the users. 61 | 62 | Therefore instead of market hype, make decisions based on facts, use whatever is best for the job, mostly if you're doing your own business or planning a `startup`, deciding better tech/methods, results in productivity, efficiency and saves time/cost. 63 | 64 | Therefore If you're not forced or bound by a legacy eco-system or specific rules/conditions, do your research, compare options, and make decisions you benefit. 65 | [*..extra pointers on this topic..>>*](#new-developer-or-decision-maker) 66 |
67 | . 68 | `Wish you good luck!` 69 | 70 | *** 71 | 72 |
73 | 74 | ## Target Platforms 75 | 76 | [Native SDK]() `Android, iOS, embeded runtimes.. if targeting specific device abilities or inclusive native functions of an embeded device, phones or a VR headset.` 77 | 78 | [Web]() `if the development target is general, multi-platform, web/communication based, and not limited by vendor lock-in, then use the web platform, which has most use cases, most open and is cross-platform. It covers all platforms client, server, browser, mobile devices, cloud and desktop.` 79 | 80 | [System]() `in case lower level control/privacy/system access is required, or direct Hardware/OS access and high performance at scale, then a server/workstation system/s plus a custom software stack (low/mid level programming languages, SDK, runtimes..) is more suitable.` 81 | 82 | [Cloud]() `A complete or custom system solution on web/network. You subscribe to a managed virtual system, in different levels from VPS, API, Host.. much features, managed/maintained. All pros, only cons: no physical control/access/privacy(unless self hosted)` 83 | 84 | ### `Learning tips` 85 | - Being a Dev is not easy, takes time, effort, practice and experience to gain practical skills, much to cover. 86 | - 1st learn the basics including the new updates. Ex: for web >> Basics and new additions of JS, HTML, CSS. 87 | - Learn the main skill from Docs, or best resources, search for recent materials with high views/stats on youtube. 88 | - Group work, join friends, divide tasks/learning, share your findouts, practice as a team, is too much for one person. 89 | 90 | `More info: beginner guideline details` -> [Web-Dev guideline](#web-development-guideline) 91 | 92 | *** 93 | 94 |
95 |
96 | 97 | # Awesome list 98 | 99 | *** 100 | 101 |
102 | 103 | ## [AI](#ai) 104 | 105 | ### General 106 | [Prompt/Cloud](): `Deepseek` - `ChatGPT` - `Gemini` - `Groq` 107 | [Prompt/Local](): `native device` - `chat with RTX` - `Jan` - `Ollama` 108 | [Platform / API](): `Nvidia NIM`, `Claude`, `OpenAI`, `Google`, `x.ai` 109 | [Inference Providers](): `HF` - `Fireworks` - `Together.Ai` - `Replicate` - `OctoAI` 110 | [Browser/Runtime (client/local)](): `Ollama` - `Web LLM` - `Web-AI` - `MLC-LLM` - `Jan/Nitro` 111 | [Docs-Info-Research](https://github.com/codefuse-ai/Awesome-Code-LLM) codefuse-ai/Awesome-Code-LLM 112 | [AI Strategy Model HL](): `Local First` `prepare process` `intent tunning` `Specialized Agents` > `Orchestration` > `Solution` > `Story/Mission follow-up` 113 | [AI Strategy Process ML](): `Re-iterate pipelines` > `deductive/inductive/integrate process` > `Build logical-conceptual solution stucture model` > `intent elements & rank` > `Result` 114 | [AI Strategy Process LL](): `in-context learning` > `fine-tuning EiF` > `Map categories` > `Rag cycle` > `output pipelines` > `update/unify/integrate/testing` > `Output` 115 | 116 |
117 | 118 | ### LLM - AI models 119 | [Top Rank](): `DeepSeek-R1`, `Gemini-2.x/exp`, `GPT-ox`, `Claude-3.x-Opus` 120 | [Full Opensource](): `DeepSeek-V3/R1` -- `Phi4` -- `Mixtral MoE` 121 | [Local Run](): Desktop: `Qwen2.5-Inst(md)` `Phi-4(md)` Server: `DeepSeek-R1` 122 | [Local Run](): Mobile: `Phi-4(sm)` `Qwen2.x-(sm)` `SmolVLM` 123 | [Vision/VLM](): `PaliGemma` `SmolVLM` - (visual & text LLM) 124 | 125 | ### Dev Environments 126 | [Hybrid Local](): VS-Code + `Github Copilot` - Pros: `Free` + `Local` + `Cloud` 127 | [Cloud Environment](): `Gitpod` - `stackblitz` - dev > build > deploy/container/integration 128 | [AI Hybrid IDE](): Cursor: `extras` - `better results` -- Windsurf: `Simpler defaults` 129 | 130 | * `AGI`(Artificial General Intelligence) -- `MoE`(Mixture of Experts) 131 |
132 | 133 | ### AI Tools, Audio, Video 134 | 135 | [Autonomous Agents](): long-term mem: `MemGPT` - `CrewAI` -- toolchain: `Langchain` - `AutoGPT` 136 | [Science/Research](): `NotebookLM (Gemini 2.x exp)` + Specific tools/models/libs 137 | [Audio LL](): text to music: `Udio` 138 | [Audio TTS](): `LLASA TTS` - `Parler TTS` - `PlayHT` 139 | [Audio HL](): `Replika` - `ElevenLabs` -- speech to text: `Deepgram` 140 | [Image Dev/API](): `DALL-E`, `Stable Diffusion`, `Imagen` 141 | [Image - User/App](): `MidJourney`, `FreePik`, `Adobe Firefly` 142 | [Physics Engine](): `Genesis` -- [Image to 3D world](): `Odyssey ` 143 | [Video creation](): `Veo2` - `Kling-v1.6` - `Sora` - `Mochi(local)` 144 | [Visual input](): `Grok vision` - `Amazon Rekognition` - `Imagen` 145 | [Code assist](): `AI IDEs` - `Github Copilot` - `Ollama` + `Qwen2.x LLM` 146 | [Dev assist](): `ready-made Agents workflow` - `Open Devin` - `Devika` 147 | [Dev Tools](): Local Hub: `Ollama UI` `LM-studio` `Jan` - interact with websites: `GPT Crawler` 148 | 149 |
150 | 151 | ### Best youtube AI Channels - *`links open's Youtube channel`* 152 | `Concept` -- [bycloud](https://www.youtube.com/@bycloudAI) 153 | `Tutorial/Practical` -- [Ai Jason](https://www.youtube.com/@AIJasonZ/videos) 154 | `News/Info/General` -- [Matthew Berman](https://www.youtube.com/@matthew_berman/featured) 155 | `Research/Science` -- [Code your own AI](https://www.youtube.com/@code4AI/videos) 156 |
157 | 158 | ##### `About ` [Different AI generations](#about-ai---generations) >> 159 | ##### *[AI Awesome list Gist - more info/tools/applications](https://gist.github.com/Peyman-Borhani/57c3dd9ec0754c68d1dda3698b00f760)* >> (Archived/Out-dated) 160 | 161 | [_^_](#shortcuts-) 162 | 163 | *** 164 |
165 | 166 | ## [Frameworks](#frameworks--) >> 167 | 168 | - **`Mobile`**: [Web based:]() (multi-platform) Tauri, Socket - Capacitor [Native:]() device SDK(only if required) 169 | - **`Desktop`**: Tauri (Web App), Deno executable(Web/CLI). 170 | - **`Front-end`**: Svelte(best overall, best DX) - Vue(past populary, jobs) - Solid(React replacement). 171 | - **`Back-end`**: JS runtime-> Deno, Node.js/Bun - or specific platform, services, programming languages.. 172 | - **`Full-stack`**: Svelte-kit (true fullstack) - Astro(many frameworks) - Next/Nuxt (popular backends) 173 | - **`Crossplatform`**: Tauri(desktop, mobile, Rust functions) - Socket runtime (desktop, mobile, P2P data) 174 | - **`Programming Languages`**: JS, Zig, Rust, Go, Elixir, Mojo, all based on use-case: client/server, AI, Mobile. [..more >>](#programming-languages) 175 | 176 | [_^_](#shortcuts-) 177 |
178 | 179 | ### [UI](#ui-) >> 180 | **`Standard CSS`**: 181 | 182 | - when more control, precision and customization or zero dependency is required. 183 | - Big-picture of system design is clear to a CSS specialist, just by looking at the code. 184 | - new CSS standards solve much issuess developers had in the past. 185 | - recommended for: highly custom UIs, advanced projects, 186 | - in any case you must master it to be able to effectively design or use other libs. 187 | 188 | **`UI Lib / Kit `** - *main advantages* >> 189 | - reduced text instructions (+readability) 190 | - more uniform design model in teams. (mostly for junior devs) 191 | - faster development and prototyping. (mostly on abstract components) 192 | - tooling automation, pre/post processing.. 193 | 194 | ### [UI categories](#ui-categories) 195 | 196 | - **`CSS utility frameworks`** 197 | -`UnoCSS`: use presets of tailwind, DaisyUI, etc.. it compiles to to standard CSS. 198 | -`Lightening CSS`: tool for short codes, presets, functions, optimizing, speed, minifier. 199 | - **`Headless/Structure`** (you do custom style): headless ui, Melt UI, Bits UI (Svelte) 200 | - **`Tailwind`**: short-code classes, has pro/cons, yet from v3.4 is good to use in right way. 201 | - **`Minimal Libs`**: Melt UI(basics), Pico CSS(default styles), BeerCSS, DaisyUI(pure CSS lib) 202 | - **`CSS toolkit`**: Tailwind or UnoCSS - build available CSS presets/syntax into standard CSS 203 | - **`UI-Kits`**: CSS components: `Daisy UI` - functional components: `Skeleton`, `flowbite`, `ShadCN` 204 | - **`Icon-sets`**: `unplugin-icons`: best to import various icons, no deps, vite plugin tooling 205 | - **`Fonts`**: `System font` `Roboto` `Segoe-UI` `Lucida` `Oswald` `Slabo` `Commit-Mono` 206 | - **`3D`**: Spline, Babylone.js(FW), Three.js(lib), Threlte(Svelte+three), Unity Tiny 207 | 208 | ### [UI Recommendations](#ui-recommendations--reason) + `reason`: 209 | 210 | - `UnoCSS` - best toolkit and presets. (code in other Lib, compiled into standard CSS) 211 | - `picoCSS` - best for predefined styling of standard HTML Tags. 212 | - `DaisyUI` - best pure CSS UI components lib you can get while JS is optional. 213 | - `BeerCSS` - better option in case you're into material design concept. 214 | - `Shadcn` - best customizable components kit (mostly in Shadcn-Svelte). 215 | - `Skeleton UI`- best UI components kit for Svelte framework. 216 | - `Agnostic UI`- various pros, in case it benefit your work. 217 | 218 | [_^_](#shortcuts-) 219 |
220 | 221 | ### [Cloud platforms](#cloud-platforms): 222 | 223 | - `Cloudflare`: most professional option, reliable, advanced network system and services. 224 | - `Hosting clouds`: used to host site/app, but now offer many cloud functions/solutions Ex: Vercel or Netlify 225 | - `Enterprise`: (more features+scale - extra cloud functions/services) 226 | 1. Amazon AWS -- 2. Azure (Microsoft) -- 3. Google/Firebase 227 | 228 | #### [`Alternatives`](#alternatives): 229 | - `Cloud`: Vercel, Supabase - `CMS`: Prismic, Builder.io 230 | - `Self-host`: [Cloud](): Coolify - [CMS](): Sveltia - [Server](): `PocketBase` 231 | - `Decentralised` -> Nostr, Bluesky/AT protocol. Social features, free, secure, anti-censorship. 232 | - `Self hosted lib`: Gun.js => free, encrypted, distributed (web torrent) 233 | - `Fullstack servers` + `default options`: cyclic.sh(full options +S3 +DynamoDB) - railway.app (+postgreSQL) 234 | 235 | [_^_](#shortcuts-) 236 |
237 | 238 | ### [Database](#database): 239 | 240 | - `Next-Gen`: (decentralized/p2p privacy, security, extras): Nostr, AT protocol, GunDB. 241 | - `Performance`: cloud edge DBs `->` Turso(libSQL), Cloudflare/DenoDeploy(KV). `multi-model`: Redis + modules. 242 | - `Innovative`: Drizzle + Turso - EdgeDB - SurrealDB - Dgraph(graphQL+DX) - Vector DBs (AI use-cases). 243 | - `Open Source`: 244 | - `libSQL`: a fork of SQLite but both local, remote and server. 245 | - `Arango DB` (multi-model) to self host or cloud. 246 | 247 | - `Recommendations`: 248 | 249 | > **` Nostr`** : decentralized communication protocol. user ownership of data, privacy and sharing. 250 | > **` Turso`** : libSQL DB on cloud/edge. (fastest SQL on edge) 251 | > **` libSQL`** : best SQLite fork for local DB (server/mobile app) 252 | > **` Drizzle`**: ORM worth using, **`Reason`**: work with various DB formats without knowing them. 253 | > **` EdgeDB`**: simple + you prefer: EdgeQL + native ORM/graphQL-ish model (no need seperate ORM). 254 | > **` SurrealDB`**: advanced, lots of DB models, features, customize and options. 255 | 256 | [_^_](#shortcuts-) 257 | 258 |
259 | 260 | ### [API / Communication patterns](#api): 261 | 262 | 263 | - `REST `: a client request data/information.. from a server, which responds with state+data. 264 | - `GraphQL`. similar to rest but query a specific set of data, by relation/s, only effective if correctly queried(not less, not more). 265 | - `gRPC / tRPC` . binary data, prioritise performance, volume, and security. next generation of protobuffers. 266 | - `WebSocket` For real time, low latency applications. 267 | - `WebRTC / WebTorrent` applications of distributed net, shared, p2p, serverless, save cost, user privacy/annonymity. 268 | - `ORM (DB interaction model)` custom SQL/nonSQL query access method. custom relational behavior, code to DB interfacing. 269 |
270 | 271 | ## [Programming Languages](#programming-languages) 272 | 273 | ### Low level 274 | - **`Rust`**: WebASM std / Safe / Precise / System / Performance / Resources / Community. 275 | - **`Zig`** - **`Carbon`**: C++ alternatives - **`Julia`**: low-level Performance, high-level syntax. 276 | - **`Go`**: (Low/Med level): simple good syntax, well developed/maturity, good for backend. 277 | - **`Nim`**(+fast, semi python syntax). **`Mojo`**: (+python-like, resources, AI, Devs like it). 278 | 279 | ### High level 280 | - **platform based**: `All: Web/JS`, `AI: Python, JS (APIs)`, `Mac/IOS: Swift`. 281 | - **other good langs**: `Elixir`, `Haskel`, `C++`, `C#`, `Bend`. 282 | - **`Bend`**: Parallel processing computation. Use CPU/GPU cores **WITHOUT** specific/low-level methods (Cuda, Metal..) 283 | 284 | ### Type Safety 285 | [Typescript](): Not a language, a superset over JS - a type system for JS - compiles to JS. 286 | [Valibot](): schema library for validating structural data. also on runtime and integration point. 287 | `..note`: type safety feature is effective in specific scenarios/points, and is not required in general. 288 | 289 |
`..more on type safety and typescript`: Majority misunderstand TS for safety, security and a language by itself, while it mostly impacts development cycle. In production is only effective if implemented for runtime on integration validation points. Therefore use Typescript/typesafety layer only when the usecase is valid, or required. such as IO, restricted or custom defined data structures. `Ex`: database schemas, configuration, components I/O authentication.. 290 | `Practical usage`: In large teams - random/outsourced/careless developers drop into codebase. 291 | When type restrictions is forced on developers, they pre-encounter potential issues/errors, before conflict is reached, which forces them to solve it and follow type integrity on code import/export, and prevent careless mistakes (in algorithms, process..) before delivering their work. This ensures all follow same guidelines and defined boundries to get expected results even if they don't access/visualize/understand the code structure and intentions. 292 | The Cons: Only runs at dev time, removed in production. A solo dev or small team owning codebase won't need it, unless proven otherwise or on integration and run-time. a codebase becomes more complex to read/visualize.. Only good TS devs/teamlead can understand or reason the usage, for others is just a complexity addon. 293 | 294 | Therefore it cost more time, resources and efficiency. It's simpler and more efficient to use a validation system such as `Valibot`, at integration, critical or specific points, it works in JS too, and in runtime. 295 |
296 | 297 | [_^_](#shortcuts-) 298 |
299 | 300 | ### [Other stuff]() 301 | - **`Hosting`**: .. Vercel, Cloudflare Pages, Deno Deploy, Begin, Netlify. 302 | - **`Store/e-commerce`**: free open-source, best for developers: `Medusa` . best for non-devs: `Shopify`. 303 | - **`Static Site Generator`**: Astro(all), Hugo(go), Hexo(js), Next(react), Nuxt(vue), MkDocs(py) 304 | - **`Content Management System`**: Primo(svelte), Strapi, Ghost, Netlify CMS, Apostrophe, Factor(vue). 305 | - **`Audio API`**: Tone.JS(free, all round audio API), Twilio(Call communication, speech). 306 | - **`Dev/Repo` Platforms**: Github, Gitlab, Gitea (self-host), Stackblitz, Notion, Collab.. 307 | - **`Dev tools`**: CLI tools(GIT, bash, pnpm), vite(bundler), vs-code + extensions, emmet.. 308 | - **`Kubernetes`**: Fault Taulerant application containers to manage scale, monitor, resources. 309 | - **Photo/Image**: format -> `Avif`, compress/encode-> `Avif encoder (best from: AOM, lovell, rav1)` 310 | - Libs: `Sharp`, `lib-vips`, `lib-heif`, `ImageMagic (good as online tool/ or cloud usage..)` 311 | 312 | [_^_](#shortcuts-) 313 | *** 314 |
315 | 316 |
317 | 318 | ## [Frameworks information](#frameworks-information) 319 | 320 |
321 | 322 | ### [Frameworks Architecture](#frameworks-architecture) 323 | 324 | - `Front-end`(client side) - `Backend`(server-side) - `Fullstack`(Front and back) - `Unified Fullstack`(integrated model). 325 | - **SSG** `Static Site Generation` pre-built app/content > host-CDN > page/app delivered on user request > on client side. 326 | - **CSR** `Client side rendering` both static and dynamic content on client side. Updates are based on app logic and UI design. 327 | - **SSR** `Server Side Rendering` UI > client > user interaction > server > processed real-time on server > new renders > client. 328 | - **Modern** `Custom Multi Model` SSG + SSR + custom optimizations, only changes updates/delivers. `+performance` `+efficiency`. 329 | - various features: `Reactivity` - `Signals` - `Runtime` - `Compiled` - `Snippets` - `defined structure` - `Event management`. 330 | 331 | ### [Frontend](#frontend): 332 | - **1. `Svelte`**: (Best overall), DX+, innovative, compiles to standard web, long term strategic choice. 333 | - **2. `Solid`**: (Minimal) fast, efficient, reliable, fine tuned reactivity, react devs alternative. 334 | - **3. `Vue`**: (community) __ `Angular` / `React` / `.Net` (GG/FB/MS company platforms), Job offers/forced/required. 335 |
336 | 337 | ### [Backend](#backend): 338 | 339 | #### JavaScript Runtimes: 340 | - **`Deno`**: secure by default, lighter, faster, Wasm, better concept, +DX. *(recommended)* 341 | - **`Node`**: core JS Runtime most libs, support, popular. Node.JS BE frameworks: `hono`, `polka`, `koa` 342 | - **`Bun`** : Node.js compatible but higher performance. 343 | 344 | #### Python eco-system: jobs, popularity, AI libs/community, resources, ease of usage, +beginners. 345 | 346 | [_^_](#shortcuts-) 347 |
348 | 349 | ### [Fullstack](#fullstack): 350 | **`Sveltekit`**: complete yet custom scalable solution, flexible use of frontend + backend. 351 | > *Best web/app framework + DX, combined best practices and innovations in web ecosystem.* 352 | **`Phoenix`**: Live view generative FE + Elixir BE. Best for server oriented web development. 353 | **`Astro`**: your frontend of choice + a unified good set of predefined patterns, tools, DB! 354 | **`Custom Build`**: `Vite(bundler/dev-server)` + `Nitro(Server)` + `Vinxi(Router)` + `FE UI/interface` 355 | 356 | **`Node.js cloudish frameworks`**: Next(Vercel/React), Nuxt(VUE), Astro(multi platform). 357 |
358 | 359 | ### [Svelte framework pros](#svelte-framework-pros): 360 | **`Developer Experience`**: write less code, concentrate on your ideas, not development complexity. 361 | **`Standard`**: the code is compiled to standard JS. Fast/optimized, can be used anywhere, reusable. 362 | **`Less complexity`**: easier to read code, compiled, no v-dom overhead, no framework caused issues at runtime. 363 | > less Testing/Dependency issues: unexpected reactions, conflicts, misunderstanding source of issues. 364 | > less Errors: due to not having runtime dependencies, or external factors except your own code. 365 | 366 | **`Less Cost`**: easier to read code of other devs => continue their work + less bugs + less testing + faster development. 367 | **`Smaller bundle size`** (Compiled), without virtual-dom and framework overhead... 368 | 369 | [_^_](#shortcuts-) 370 | *** 371 |
372 | 373 | 374 | # [Extra Information](#extra-information) 375 |
376 | 377 | ## **Web Development - about definitions** 378 | - `Front-end`: Dev/Design of client side web app/site, dev/Design. HTML5, CSS, JavaScript, PWA, frameworks, Web assembly.. 379 | - `Back-end`: processing/data on server network, host/cloud, centralized or distributed. SSR(Server Side Rendering). 380 | - `DevOps`: manage and process dev/product ecosystem. analytics, control, automation on Local, remote, distributed systems 381 | - `Cloud`: online server platforms, you can subscribe to services: process, storage, resources, ready made functions. 382 | - `Cloud services`: when you don't have a scalable server/resources. 2- require API/Apps/services from amazon, google.. 383 | - `Developer Experience`: (DX) satisfaction rate of developer, plus how empowering, practical, direct, and unambiguous it be. 384 | - `Correct development method` ⇒ simplify, reuse, secure, update, avoid complex dependencies/overhead. 385 | - `Software Engineering`: use engineering principles and process-methods to approach the issue/task. 386 | - `Solution Architect`: a senior lead/engineer that evalutes an idea/goal/issue, then design, document and execute a structured plan while making many considerations. 387 | > A solution architect has some business insight/strategy and various technical knowledge/experience, using engineering principles, analytics.. design-pattern-process-methodology and some research experience. 388 | 389 | [_^_](#shortcuts-) 390 | 391 | *** 392 | 393 | ## **[Web development guideline](web-development-guideline):** 394 | **1. Learn the base web standards** -> (HTML, CSS, Javascript) follow/practice tutorials. Make few apps.(ex: Todo) 395 | **2. New web dev** -> latest updates in JS/ES, HTML, CSS practice well. 396 | **3. Update previous apps you made**, using new things you learned. make a game and a blog site. 397 | **4. Deploy**: learn how to host/deploy your site. Host on cloudflare pages, deno deploy, begin, netlify, github pages,... 398 | **5. Learning decision**: learn extra stuff once is required(predict it). (Ex: DB, AI, specific tools/libs...) 399 | **6. Learn a Framework**: better Dev-eXp & scoping. composable, reusable components, structure and configuration. 400 | **7. Learn Design**: Patterns, tools, UI/UX(user interface/experience). Concepts: visual clarity, visual effects, utility 1st. 401 | **8. Responsive design**: native looks, any device, clear focus, usability/accessibility. CSS flex, grid... 402 | **9. Backend**: 1. Sveltekit(if using svelte) ___ 2. Deno: new js-runtime replacement for Node.js by its creator. 403 | **10.Personal** various experiences, use GIT, github, Make a portfolio site (show case). a social profile: Linkedin + twitter. 404 | **11.Testing/Typing**: only if neccessary and: in large teams on complex projects with security risk or much new/junior/outsourced devs. 405 | **12.Summary**: Be an expert in one field, pro on few more, know about the rest. Fullstack: Frontend + Backend + Eco-system + Experience. 406 | 407 | [_^_](#shortcuts-) 408 | 409 | 410 | ## **[About AI - Generations](about-ai---generations)** 411 | 412 | `Past AI`: Machine Learning + Data/algorithms. 413 | Output results such as detection/decision/states... are made from a defined input processed by Machine Learning + Data science tools/patterns to extract meaningful data/states, using specific algorithms and models. 414 | 415 | `Pre/Current`: Generative AI, builds result from input data. 416 | - input can befrom single or multiple sources such as: files/DB/web/user prompt/system/parameters... 417 | - input/User describes a composed request: question/s, problem/s, statement prompt/s, data. 418 | - then Ai model process all to construct/expand/difuse/compose/conclude... Finally it generates the result based on request/objective. 419 | 420 | `Present`: Generative AGI. Is the same as above, but more accurate, matured and efficient. 421 | - multi-modal, multi-tooling, larger models, improved data quality and training, higher performance hardware. 422 | - various methods and techniques used to improve results. 423 | - increase precision/performance, reduce hallucination/mistakes, iterative pipelines to improve/abstract/clean/test data, verify, validate results. 424 | 425 | `Future Ai`: is a systemic AGI. It creates custom composed advanced solutions, adding real-time autonomuos abilities. 426 | The past generation recognise, detect, compose a result, This new generation understands (input + general concept + you). 427 | - focused concepts and Results processed in realtime cycle, by a general purpose dynamic multi-model. 428 | - the output iterates/evolves based on all defined parameters, whatever interacts with it. 429 | - time-scalable, includes a history record, remember and relates, process past and current events, consider future. 430 | - optional autonomous act: triggers new events or impact external entities, based on various factors/parameters + input/sensor data. 431 | 432 | [_^_](#shortcuts-) 433 | 434 | 435 | ### [Work Tips](#work-tips): 436 | - Better: learn best new tech options, practice, freelance, get hired, build an idea startup team. 437 | - Easier: take a positive internship, learn, collab, you either get hired or improve portfolio/experience. 438 | - Collaborate: Learn/Use collaboration tools/platforms like GitHub. 439 | - Job: find a job or startup a new team. Wish you the best. 440 | 441 | *** 442 |
443 | 444 | ## [The Web - status summary](#the-web-status-summary) 445 | The web was originally made to communicate with text and data, it later evolved to present simple graphics and images. 446 |
...press to expand. 447 | Hardware advancements in performance and capacity, plus emerging smartphones and social networks caused web based online services go mainstream in network communications, it progressed fast and competes with native platforms. 448 | The sudden progress pace in contrast with the concept of keeping it backward compatible with legacy standards, caused some complexity and confusion in the last decade due to workarounds to support new features by vendor prefixes, various 3rd party libs, tools and frameworks to achieve demands of dev/user/market. The slow adoption of new trends was caused by issues with backward compatibility of existing sites and old systems while native mobile and desktop platforms had all breaking changes at once to support new hardware. By then 3rd party libs, prefixes and frameworks... were made to solve/patch the issue and provide features that didn't exist in web standards yet. 449 | 450 | Good news, the new web standards and innovations, improved the situation, furthermore Frameworks evolved and matured including new Web APIs to provide functionality and access to new technologies. Therefore with much flexibility, compatibility and openness, Web eco-system can now compete with native desktop and mobile platforms. 451 | 452 | Whenever learning something, learn latest stable standards and best practices, some of the old prefixes, 3rd party libs,... are not required anymore...(as explained above) unless is justified, mandatory or no alternatives. The recommended trends mentioned here were handpicked by checking reviews comparison, personal experiments, and by looking into new trends top professionals adopt. 453 |
454 | 455 | [_^_](#shortcuts-) 456 | *** 457 |
458 | 459 | ### [New developer or decision maker?](#new-developer-or-decision-make?) 460 |
461 | ...Details - Reasons and Pointers on choosing tech stack/methods... (press to expand) 462 | 463 | Avoid learning 6 ~ 10+ years old stuff if a better alternative is available. 464 | old tech was made for past era ecosystem, development model and HW/SW/issues. 465 | 466 | Is still popular due to seniors who learned it in past when it was a valid option and using it at work for years, later new developers are forced to follow them. This process might repeat multiple times.. 467 | 468 | The old popular tech nature: it works, is popular and has big community and resources, yet in time it becomes more complex, due to extensions, compatibility patches and conflict solving layers to make both the original and new syntax/tools/requirements work together... Aside of that each time a new feature is added, this process might repeat, and the platform gets large, complex, multiple different revisions.(Ex: MS SDKs, .net framework..) 469 | 470 | Breaking changes and migration: when a new feature that contradicts something in the system which can't be solved, the devs will decide to either give up on the feature, add extra flags/configs or make a breaking change, thus you must stay on old branch or learn + update your previous codes or totally migrate if is hopeless. 471 | Each time a breaking change shows up, you might need to repeat this process. this makes multiple dev branches in a company if the team can't / won't follow. 472 | 473 | Prevent Issues: an old legacy target which depends on layers of other legacy tech, will encounter conflicts, compatibility, deprecated dependencies, which will cost time + resources + man power to solve them. 474 | Low level coding is not affected much by the mentioned issues. they rarely change, and if so, is about new features, compatibility and stability. 475 | 476 | Unnessecary overhead: as old devs retire, new ones might add extra layers of abstraction instead of updating the original code, these issues cause: extra complexity, overhead, extra cost in long-term, Large number/size of files, large developer teams, or slow working pace,... 477 |
478 | 479 | [_^_](#shortcuts-) 480 | *** 481 |
482 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | # `The Perfect Tech-guide & Awesome-list ` 🛠i 3 | ### A developer's info-guide on: `tech` - `tools` - `Libs` - `Frameworks` 4 |
5 | 6 | - [Article is about](): `best practices` + `guide` + `awesome list` of tech-stack(libs,tools...), platforms, workflow. 7 | - [Multiple options](): are for you to decide based on your goals.(compare X vs Y, pros/cons, use-case..) 8 | - [Recommendations](): given based on summary of various factors: test or compared reviews of experts on the field. 9 |
10 | 11 | > [*Decisions*](): have long-term impact. Dev-stack/toolchain + working method/strategy impacts your progress. 12 | > [*Making right choices*](): early on, increase success and progress chances, self-respecting your skills. 13 | > [*Nothing's perfect*, yet...]() better options/methods improves DX, workflow, structure, progress, efficiency. 14 |
15 | 16 | [To Contribute]() >> `add links` to items, `reason/prove` an obvious better option, `improve doc`. 17 | >* target users - keywords: `developers`, `designers`, `researchers`, `students`, `startups`, `decision makers` 18 |
19 | 20 | 21 | # `Shortcuts ` 22 | 23 | > ### [ Starter intro ](#starter-intro) 24 | > ### [ Awesome list ](#awesome-list) 25 | > ### [ Programming Languages ](#programming-languages) 26 | > ### [ Frameworks - more info/details ](#frameworks-information) 27 | > ### [ Extra information and discussion ](#extra-information) 28 | 29 | *** 30 |
31 | 32 | ## Starter intro 33 | 34 | ### [`To beginners and startups`](#to-beginners-and-startups) 35 | 36 | > Don't make technical decisions just based on what others do, market hype, popular trends... 37 | ...instead, decide based on multiple factors, such as: 38 | 39 | [Pros/Cons - Review Comparison]() - [Requirements]()- [Best fit / Integration](), 40 | [Problem solves]() - [Feasable / Accessible]() - [High Rated]() - [Popularity](), 41 | [Focus / Goals]() - [Priority / Importance]() - [Stable Eco-system]() 42 | and finalize your decision considering: 43 | - `Main Priority` - `Best fitting` - `Feasable? Can be done? (adopt / implement / execute)` 44 | - `Work type`: startup/job/personal - `State`: start / scale / remake / migrate / available. 45 | - `Impact`: team, users, cost, dev-cycle, integration, stablity, milestone, completion. 46 | 47 |
...Why? >> press to expand this topic ↴ 48 | 49 | Majority of developers adopted older popular tech/methods by the circumstances in past, by workplace/education requirements job offers, senior advice, or the 1st option encountered, or just due to common hype, in the past, but not the best choice now. 50 | This cycle repeats and non optimal tech get stuck in social, market, and job/edu systems, then if you adopt it, by the time you build your work on it, the tech might be near end of life, or bad/slow pace, as it holds to legacy patterns, and compatibility patches to make it work with ongoing needs of the users. 51 | 52 | Therefore instead of market hype, make decisions based on facts, use whatever is best for the job, mostly if you're doing your own business or planning a `startup`, deciding better tech/methods, results in productivity, efficiency and saves time/cost. 53 | 54 | Therefore If you're not forced or bound by a legacy eco-system or specific rules/conditions, do your research, compare options, and make decisions you benefit. 55 | [*...extra pointers on this topic...>>*](#new-developer-or-decision-maker) 56 |
57 | 58 | ` Wish you good luck! ` 59 | *** 60 |
61 | 62 | ## Target Platforms 63 | 64 | [Native SDK]() `Android, iOS, embeded runtimes... if targeting specific device abilities or inclusive native functions of an embeded device, phones or a VR headset.` 65 | 66 | [Web]() `if the development target is general, multi-platform, web/communication based, and not limited by vendor lock-in, then use the web platform, which has most use cases, most open and is cross-platform. It covers all platforms client, server, browser, mobile devices, cloud and desktop.` 67 | 68 | [System]() `in case lower level control/privacy/system access is required, or direct Hardware/OS access and high performance at scale, then a server/workstation system/s plus a custom software stack (low/mid level programming languages, SDK, runtimes...) is more suitable.` 69 | 70 | [Cloud]() `A complete or custom system solution on web/network. You subscribe to a managed virtual system, in different levels from VPS, API, Host... much features, managed/maintained. All pros, only cons: no physical control/access/privacy(unless self hosted)` 71 | 72 | ### `Learning tips` 73 | - Being a Dev is not easy, takes time, effort, practice and experience to gain practical skills, much to cover. 74 | - 1st learn the basics including the new updates. Ex: for web >> Basics and new additions of JS, HTML, CSS. 75 | - Learn the main skill from Docs, or best resources, search for recent materials with high views/stats on youtube. 76 | - Group work, join friends, divide tasks/learning, share your findouts, practice as a team, is too much for one person. 77 | 78 | > ` Go to beginner guideline details `-> [Web-Dev guideline](#web-development-guideline) 79 | *** 80 |
81 | 82 | # Awesome list 83 |
84 | 85 | ## [AI](#ai) 86 | 87 | ### General 88 | - [Chat/Prompt](): Online: `Groq` - `ChatGPT` - Local: `chat with RTX` - `Jan`. 89 | - [Platform / API](): `Nvidia NIM`, `OpenAI`, `Clarifi(various)`, `Google`, `Microsoft`, `x.ai`. 90 | - [Browser/Runtime (client/local)](): `Web LLM` _ `Web-AI` _ `MLC-LLM` _ `Jan/Nitro` 91 | - [AI Strategy](): `first local`, `Specific`, `in-context learning > fine-tuning EiF to usecase > RAG` 92 |
93 | 94 | ### AGI - LLM models 95 | - [Top Ranked](): `Claude-3-Opus`, `GPT4-o-next`, `Grok`, `Llama-3-400B+ instruct`. 96 | - [Opensource](): `Phi3` _ `Mixtral MoE` _ `Command R+` _ `DBRX`. 97 | - [Run Locally](): Mobile: `Phi3-mini-3.8B` _ Desktop: `Phi-3-small` - `Llama-3-8B instruct`. 98 | - [Vision/LM](): `PaliGemma` combined visual+text LLM + can fine-tune well for specific use-case. 99 | 100 | * `AGI`(Artificial General Intelligence) .... `MoE`(Mixture of Experts) 101 |
102 | 103 | ### Tools, Audio, Video... 104 | - [Autonomous Agents]() _ `long-term mem`: [MemGPT]() - [CrewAI]() _ `+toolchain`: [Langchain]() - `AutoGPT` 105 | - [Audio](): `Udio` text to music _ `PlayHT` or `ElevenLabs` text to speach _ `Deepgram ` speech to text 106 | - [Image](): `DALL-E`, `Stable Diffusion`, `Imagen` - APP-(user): `MidJourney`, `FreePik`, `Adobe Firefly` 107 | - [Visual input](): `Grok vision` - [Video creation](): `Sora ` most realistic videos bythe mean time. 108 | - [Code assist](): `Github Copilot` - `GPT-4 Chat/API` - [open-source](): `Open Devin` - `Devika`. 109 | - [Dev Assist](): - Local AI Hub: `Ollama UI` `LM-studio` `Jan` - interact with a website: `GPT Crawler` 110 |
111 | 112 | Best youtube AI Channels: [bycloud](https://www.youtube.com/@bycloudAI) - [Ai Jason](https://www.youtube.com/@AIJasonZ/videos) - [Matthew Berman](https://www.youtube.com/@matthew_berman/featured) 113 |
114 | 115 | ##### `About ` [Different AI generations](#about-ai---generations) >> 116 | ##### *[Check AI Awesome list for more AI info/tools/applications, more details.](https://gist.github.com/Peyman-Borhani/57c3dd9ec0754c68d1dda3698b00f760)* >> 117 | 118 | [_^_](#shortcuts-) 119 | 120 | --- 121 |
122 | 123 | ## [Frameworks](#frameworks--) >> 124 | - **`Mobile`**: [Web based:]() (multi-platform) Tauri, Socket - Capacitor [Native:]() device SDK(only if required) 125 | - **`Desktop`**: Tauri (Web App), Deno executable(Web/CLI). 126 | - **`Front-end`**: Svelte(best overall, best DX) - Vue(past populary, jobs) - Solid(React replacement). 127 | - **`Back-end`**: JS runtime-> Deno, Node.js/Bun - or specific platform, services, programming languages... 128 | - **`Full-stack`**: Svelte-kit (true fullstack) - Astro(many frameworks) - Next/Nuxt (popular backends) 129 | - **`Crossplatform`**: Tauri(desktop, mobile, Rust functions) - Socket runtime (desktop, mobile, P2P data) 130 | - **`Programming Languages`**: JS, Zig, Rust, Go, Elixir, Mojo, all based on use-case: client/server, AI, Mobile. [(..more)>>]() 131 | 132 | [_^_](#shortcuts-) 133 |
134 | 135 | ### [UI](#ui-) >> 136 | **`Standard CSS`**: 137 | > 138 | - when more control, precision and customization or zero dependency is required. 139 | - Big-picture of system design is clear to a CSS specialist, just by looking at the code. 140 | - new CSS standards solve much issuess developers had in the past. 141 | - recommended for: highly custom UIs, advanced projects, 142 | - in any case you must master it to be able to effectively design or use other libs. 143 | 144 | **`UI Lib/kit `** - *main advantages* >> 145 | - reduced text instructions (+readability) 146 | - more uniform design model in teams. (mostly for junior devs) 147 | - faster development and prototyping. (mostly on abstract components) 148 | - tooling automation, pre/post processing... 149 | 150 | ### [UI categories](#ui-categories) 151 | 152 | - **`CSS utility framework`** - such as: `UnoCSS` or `Lightening CSS`(used in Tailwind) 153 | > toolkit, short codes, presets, functions, optimizing, speed, minifier) 154 | - **`Headless/Structure`** (you do custom style): headless ui, Melt UI, Bits UI (Svelte) 155 | - **`Tailwind CSS`**: has pro/cons, yet from v3 (mostly 4) I confirm general use-case to be valid 156 | - **`Minimal Libs`**: Melt UI(basics), Pico CSS(default styled), BeerCSS, DaisyUI(pure CSS lib) 157 | - **`CSS toolkit`**: Tailwind or UnoCSS - build available CSS presets/syntax into standard CSS 158 | - **`UI-Kits`**: Daisy UI(CSS) .... `functional components`: Skeleton, flowbite, ShadCN 159 | - **`Icon-sets`**: `unplugin-icons` : best way of using icons, no deps, vite plugin tooling 160 | - **`3D (WebGL/GPU)`**: Spline, Babylone.js(FW), Three.js(lib), Threlte(Svelte+three), Unity Tiny 161 | 162 | 163 | ### [UI Recommendations](#ui-recommendations--reason) + `reason`: 164 | - `UnoCSS` - best toolkit and presets. (code in other Lib, compiled into standard CSS) 165 | - `picoCSS` - best for predefined styling of standard HTML Tags. 166 | - `DaisyUI` - best CSS UI lib you can get where JS is optional (pre UI kit). 167 | - `BeerCSS` - better option in case you're into material design concept. 168 | - `Shadcn` - best customizable components kit (mostly in Shadcn-Svelte). 169 | - `Skeleton UI`- best UI components kit for Svelte framework. 170 | - `Agnostic UI`- various pros, in case it benefit your work. 171 | 172 | [_^_](#shortcuts-) 173 |
174 | 175 | ### [Cloud platforms](#cloud-platforms): 176 | 177 | - `Cloudflare`: most professional option, reliable, advanced network system and services. 178 | - `Hosting clouds`: used to host site/app, but now offer many cloud functions/solutions Ex: Vercel or Netlify 179 | - `Enterprise`: (more features+scale - extra cloud functions/services) 180 | > 1. Amazon AWS .... 2. Google/Firebase .... 3. Azure (Microsoft) 181 | 182 | - #### [`Alternatives`](#alternatives): 183 | - `Cloud`: Vercel, Supabase - `CMS`: Prismic, Builder.io 184 | - `Self-host`: [Cloud](): Coolify - [CMS](): Sveltia - [Server](): `PocketBase` 185 | - `Decentralised` -> Nostr, Bluesky/AT protocol. Social features, free, secure, anti-censorship. 186 | - `Self hosted`: PocketBase ... `Basic/Dapp` -> Gun.js => free, encrypted, distributed(web torrent). 187 | - `Fullstack servers` + `default options`: cyclic.sh(full options +S3 +DynamoDB) - railway.app (+postgreSQL) 188 | 189 | [_^_](#shortcuts-) 190 |
191 | 192 | ### [Database](#database): 193 | - `Next-Gen`: Nostr, AT protocol, GunDB - decentrlized, secure, extra features(DB+SN/COMM). 194 | - `Performance`: cloud edge DBs `->` Turso(libSQL), Cloudflare/DenoDeploy(KV). `multi-model`: Redis + modules. 195 | - `Innovative `: Drizzle + Turso - EdgeDB - SurrealDB - Dgraph (graphQL+DX) - Vector DBs (AI use-cases). 196 | - `Open Source`: `libSQL` (fastest SQL on edge), `Arango DB` (multi-model) both can self host or cloud. 197 | - `Recommendations`: 198 | > **` Nostr`** : decentralized communication protocol. user ownership of data, privacy and sharing. 199 | > **` Turso`** : libSQL DB on cloud/edge networks, libSQL is a fork of SQLite but both local, remote and server. 200 | > **` Drizzle`**: the only ORM worth using, **`Reason`**: work with various DB formats without knowing them. 201 | > **` EdgeDB`**: simple + you prefer EdgeQL + includes ORM/graphQL-ish model (no need for seperate ORM). 202 | > **` SurrealDB`**: advanced, lots of DB models, features, customize and options. 203 | 204 | [_^_](#shortcuts-) 205 |
206 | 207 | ### [API / Communication patterns](#api): 208 | 209 | - `REST `... a client request data/information... from a server, which responds with state+data. 210 | - `GraphQL`. similar to rest but query a specific set of data, only effective if correctly queried(not less, not more). 211 | - `gRPC / tRPC` . binary data, prioritise performance, volume, and security. next generation of protobuffers. 212 | - `WebSocket` For real time, low latency applications. 213 | - `WebRTC / WebTorrent` applications of distributed net, shared, p2p, serverless, save cost, user privacy/annonymity. 214 | - `ORM (DB interaction model)` custom SQL/nonSQL query access method. custom relational behavior, code to DB interfacing. 215 |
216 | 217 | ### [Programming Languages](#programming-languages): 218 | 219 | #### Low level 220 | - **`Rust`**: WebASM std / Safe / Precise / System / Performance / Resources / Community. 221 | - **`Zig`** - **`Carbon`**: C++ alternatives - **`Julia`**: low-level Performance, high-level syntax. 222 | - **`Go`**: (Low/Med level): simple good syntax, well developed/maturity, good for backend. 223 | - **`Nim`**(+fast, semi python syntax). **`Mojo`**: (+python-like, resources, AI, Devs like it). 224 | 225 | #### High level 226 | - **platform based**: `All: Web/JS`, `AI: Python, JS (APIs)`, `Mac/IOS: Swift`. 227 | - **other good langs**: `Elixir`, `Haskel`, `C++`, `C#`, `Bend`. 228 | - **`Bend`**: Parallel processing computation. Use CPU/GPU cores **WITHOUT** specific/low-level methods (Cuda, Metal...) 229 | 230 | **(Type Safety / Typescript)**: 231 | - `Typescript`: Not a language, a superset over JS - a type system for JS - compiles to JS. 232 | - `Valibot`: schema library for validating structural data. also on runtime and integration point. 233 | - `...note`: type safety feature is effective for specific use-case and not universal usage.
`...more on type safety and typescript`: Majority misunderstand TS for safety, security and a language by itself, while it mostly impacts development cycle. For product is only effective if is implemented at runtime and integration validation points. Therefore use Typescript/typesafety layer only when the usecase is valid, or required. such as immutable restricted and custom defined data structures. `Ex`: database schemas, configuration, authentication... 234 | `more usecases`: large teams - random/changing developers. different developers encounter type restrictions and potential issues/errors, they are forced to resolve type and other restrictions before merging or deliver to other devs. This ensures all follow same guidelines and patterns, getting defined results... yet codebase becomes more complex, takes time and cost. It's simpler and more efficient to use a validation system, such as `Valibot`, can use it in JS too, and in runtime. 235 |
236 | 237 | [_^_](#shortcuts-) 238 |
239 | 240 | ### [Other stuff]() 241 | - **`Hosting`**: .. Vercel, Cloudflare Pages, Deno Deploy, Begin, Netlify. 242 | - **`Store/e-commerce`**: free open-source, best for developers: `Medusa` . best for non-devs: `Shopify`. 243 | - **`Static Site Generator`**: Astro(all), Hugo(go), Hexo(js), Next(react), Nuxt(vue), MkDocs(py) 244 | - **`Content Management System`**: Primo(svelte), Strapi, Ghost, Netlify CMS, Apostrophe, Factor(vue). 245 | - **`Audio API`**: Tone.JS(free, all round audio API), Twilio(Call communication, speech). 246 | - **`Dev/Repo` Platforms**: Github, Gitlab, Gitea (self-host), Stackblitz, Notion, Collab... 247 | - **`Dev tools`**: CLI tools(GIT, bash, npm...), vite(bundler), vs-code + extensions, emmet... 248 | - **`Kubernetes`**: Fault Taulerant application containers to manage scale, monitor, resources. 249 | 250 | [_^_](#shortcuts-) 251 | *** 252 |
253 | 254 | 255 | ## [Frameworks information](#frameworks-information) 256 |
257 | 258 | ### [Frameworks Architecture](#frameworks-architecture) 259 | 260 | - `Font-end`(client side) - `Backend`(server-side) - `Fullstack`(Front and back) - `Unified Fullstack`(integrated model). 261 | - **SSG** `Static Site Generation` pre-built app/content > host-CDN > page/app delivered on user request > on client side. 262 | - **CSR** `Client side rendering` both static and dynamic content on client side. Updates are based on app logic and UI design. 263 | - **SSR** `Server Side Rendering` UI > client > user interaction > server > processed real-time on server > new renders > client. 264 | - **Modern** `Custom Multi Model` SSG + SSR + custom optimizations, only changes updates/delivers. `+performance` `+efficiency`. 265 | - various features: `Reactivity` - `Signals` - `Runtime` - `Compiled` - `Snippets` - `defined structure` - `Event management`. 266 | 267 | ### [Frontend](#frontend): 268 | - **1. `Svelte`**: (Best overall), DX+, innovative, compiles to standard web, long term strategic choice. 269 | - **2. `Solid`**: (Minimal) fast, efficient, reliable, fine tuned reactivity, react devs alternative. 270 | - **3. `Vue`**: (community) __ `Angular` / `React` / `.Net` (GG/FB/MS company platforms), Job offers/forced/required. 271 |
272 | 273 | ### [Backend](#backend): 274 | 275 | #### JavaScript Runtimes: 276 | - **`Deno`**: secure by default, lighter, faster, Wasm, better concept, +DX. *(recommended)* 277 | - **`Node`**: core JS Runtime most libs, support, popular. Node.JS BE frameworks: `hono`, `polka`, `koa` 278 | - **`Bun`** : Node.js compatible but higher performance. 279 | 280 | #### Python eco-system: jobs, popularity, AI libs/community, resources, ease of usage, +beginners. 281 | 282 | [_^_](#shortcuts-) 283 |
284 | 285 | ### [Fullstack](#fullstack): 286 | **`Sveltekit`**: complete yet custom scalable solution, flexible use of frontend + backend. 287 | > *Best web/app framework + DX, combined best practices and innovations in web ecosystem.* 288 | **`Phoenix`**: Live view generative FE + Elixir BE. Best for server oriented web development. 289 | **`Astro`**: your frontend of choice + a unified good set of predefined patterns, tools, DB! 290 | **`Custom Build`**: `Vite(bundler/dev-server)` + `Nitro(Server)` + `Vinxi(Router)` + `FE framework/tools` 291 | 292 | **`Node.js cloudish frameworks`**: Next(Vercel/React), Nuxt(VUE), Astro(multi platform). 293 |
294 | 295 | ### [Svelte framework pros](#svelte-framework-pros): 296 | **`Developer Experience`**: write less code, concentrate on your ideas, not development complexity. 297 | **`Standard`**: the code is compiled to standard JS. Fast/optimized, can be used anywhere, reusable. 298 | **`Less complexity`**: easier to read code, compiled, no v-dom overhead, no framework caused issues at runtime. 299 | > less Testing/Dependency issues: unexpected reactions, conflicts, misunderstanding source of issues. 300 | > less Errors: due to not having runtime dependencies, or external factors except your own code. 301 | 302 | **`Less Cost`**: easier to read code of other devs => continue their work + less bugs + less testing + faster development. 303 | **`Smaller bundle size`** (Compiled), without virtual-dom and framework overhead... 304 | 305 | [_^_](#shortcuts-) 306 | *** 307 |
308 | 309 | 310 | # [Extra Information](#extra-information) 311 |
312 | 313 | ## **Web Development - about definitions** 314 | - `Front-end`: Dev/Design of client side web app/site, dev/Design. HTML5, CSS, JavaScript, PWA, frameworks, Web assembly... 315 | - `Back-end`: processing/data on server network, host/cloud, centralized or distributed. SSR(Server Side Rendering). 316 | - `DevOps`: manage and process dev/product ecosystem. analytics, control, automation on Local, remote, distributed systems 317 | - `Cloud`: online server platforms, you can subscribe to services: process, storage, resources, ready made functions. 318 | - `Cloud services`: when you don't have a scalable server/resources. 2- require API/Apps/services from amazon, google,... 319 | - `Developer Experience`: (DX) satisfaction rate of developer, plus how empowering, practical, direct, and unambiguous it be. 320 | - `Correct development method` ⇒ simplify, reuse, secure, update, avoid complex dependencies/overhead. 321 | - `Software Engineering`: use engineering principles and process-methods to approach the issue/task. 322 | - `Solution Architect`: a senior lead/engineer that evalutes an idea/goal/issue, then design, document and execute a structured plan while making many considerations. 323 | > A solution architect has some business insight/strategy and various technical knowledge/experience, using engineering principles, analytics,... design-pattern-process-methodology and some research experience. 324 | 325 | [_^_](#shortcuts-) 326 | *** 327 | 328 | 329 | ## **[Web development guideline](web-development-guideline):** 330 | **1. Learn the base web standards** -> (HTML, CSS, Javascript) follow/practice tutorials. Make few apps.(ex: Todo) 331 | **2. New web standards** -> ES6/next, new HTML, new CSS (grid,...) practice/try what you learn. 332 | **3. Update the previous apps you made**, using new things you learned. make a game and a blog site. 333 | **4. Deploy**: learn how to host/deploy your site. Host on cloudflare pages, deno deploy, begin, netlify, github pages,... 334 | **5. Learning decision**: learn extra stuff once is required(predict it). (Ex: DB, AI, specific tools/libs...) 335 | **6. Learn a Framework**: better Dev-eXp & scoping. composable, reusable components, structure and configuration. 336 | **7. Learn Design**: Patterns, tools, UI/UX(user interface/experience). Concepts: visual clarity, visual effects, utility 1st. 337 | **8. Responsive design**: native looks, any device, clear focus, usability/accessibility. CSS flex, grid... 338 | **9. Backend**: 1. Sveltekit(if using svelte) ___ 2. Deno: new js-runtime replacement for Node.js by its creator. 339 | **10.Personal** various experiences, use GIT, github, Make a portfolio site (show case). a social profile: Linkedin + twitter. 340 | **11.Testing/Typing**: only if neccessary and: in large teams on complex projects with security risk or much new/junior/outsourced devs. 341 | **12.Summary**: Be an expert in one field, pro on few more, know about the rest. Fullstack: Frontend + Backend + Eco-system + Experience. 342 | 343 | [_^_](#shortcuts-) 344 | 345 | 346 | ## **[About AI - Generations](about-ai---generations)** 347 | 348 | `Past AI`: Machine Learning + Data/algorithms. 349 | Output results such as detection/decision/states... are made from a defined input processed by Machine Learning + Data science tools/patterns to extract meaningful data/states, using specific algorithms and models. 350 | 351 | `Pre/Current`: Generative AI, builds result from input data. 352 | - input can befrom single or multiple sources such as: files/DB/web/user prompt/system/parameters... 353 | - input/User describes a composed request: question/s, problem/s, statement prompt/s, data. 354 | - then Ai model process all to construct/expand/difuse/compose/conclude... Finally it generates the result based on request/objective. 355 | 356 | `Present`: Generative AGI. Is the same as above, but more accurate, matured and efficient. 357 | - multi-modal, multi-tooling, larger models, improved data quality and training, higher performance hardware. 358 | - various methods and techniques used to improve results. 359 | - increase precision/performance, reduce hallucination/mistakes, iterative pipelines to improve/abstract/clean/test data, verify, validate results. 360 | 361 | `Future Ai`: is a systemic AGI. It creates custom composed advanced solutions, adding real-time autonomuos abilities. 362 | The past generation recognise, detect, compose a result, This new generation understands (input + general concept + you). 363 | - focused concepts and Results processed in realtime cycle, by a general purpose dynamic multi-model. 364 | - the output iterates/evolves based on all defined parameters, whatever interacts with it. 365 | - time-scalable, includes a history record, remember and relates, process past and current events, consider future. 366 | - optional autonomous act: triggers new events or impact external entities, based on various factors/parameters + input/sensor data. 367 | 368 | [_^_](#shortcuts-) 369 | 370 | 371 | ### [Work Tips](#work-tips): 372 | - Better: learn best new tech options, practice, freelance, get hired, build an idea startup team. 373 | - Easier: take a positive internship, learn, collab, you either get hired or improve portfolio/experience. 374 | - Collaborate: Learn/Use collaboration tools/platforms like GitHub. 375 | - Job: find a job or startup a new team. Wish you the best. 376 | 377 | *** 378 |
379 | 380 | ## [The Web - status summary](#the-web-status-summary) 381 | The web was originally made to communicate with text and data, it later evolved to present simple graphics and images. 382 |
...press to expand. 383 | Hardware advancements in performance and capacity, plus emerging smartphones and social networks caused web based online services go mainstream in network communications, it progressed fast and competes with native platforms. 384 | The sudden progress pace in contrast with the concept of keeping it backward compatible with legacy standards, caused some complexity and confusion in the last decade due to workarounds to support new features by vendor prefixes, various 3rd party libs, tools and frameworks to achieve demands of dev/user/market. The slow adoption of new trends was caused by issues with backward compatibility of existing sites and old systems while native mobile and desktop platforms had all breaking changes at once to support new hardware. By then 3rd party libs, prefixes and frameworks... were made to solve/patch the issue and provide features that didn't exist in web standards yet. 385 | 386 | Good news, the new web standards and innovations, improved the situation, furthermore Frameworks evolved and matured including new Web APIs to provide functionality and access to new technologies. Therefore with much flexibility, compatibility and openness, Web eco-system can now compete with native desktop and mobile platforms. 387 | 388 | Whenever learning something, learn latest stable standards and best practices, some of the old prefixes, 3rd party libs,... are not required anymore...(as explained above) unless is justified, mandatory or no alternatives. The recommended trends mentioned here were handpicked by checking reviews comparison, personal experiments, and by looking into new trends top professionals adopt. 389 |
390 | 391 | [_^_](#shortcuts-) 392 | *** 393 |
394 | 395 | ### [New developer or decision maker?](#new-developer-or-decision-make?) 396 |
397 | ...Details - Reasons and Pointers on choosing tech stack/methods... (press to expand) 398 | 399 | - Avoid learning 6 ~ 10+ years old stuff if a better alternative is available. 400 | old tech was made for past era ecosystem, development model and HW/SW/issues. 401 | 402 | - Is still popular due to seniors who learned it in past when it was a valid option and using it at work for years, later new developers are forced to follow them. This process might repeat multiple times... 403 | 404 | - The old popular tech nature: ___ it works, is popular and has big community and resources, yet in time it becomes more complex, due to extensions, compatibility patches and conflict solving layers to make both the original and new syntax/tools/requirements work together... Aside of that each time a new feature is added, this process might repeat, and the platform gets large, complex, multiple different revisions.(Ex: MS SDKs, .net framework,...) 405 | 406 | - Breaking changes and migration: ___ when a new feature that contradicts something in the system which can't be solved, the devs will decide to either give up on the feature, add extra flags/configs or make a breaking change, thus you must stay on old branch or learn + update your previous codes or totally migrate if is hopeless. 407 | - Each time a breaking change shows up, you might need to repeat this process. this makes multiple dev branches in a company if the team can't / won't follow. 408 | 409 | - Prevent Issues: an old legacy target which depends on layers of other legacy tech, will encounter conflicts, compatibility, deprecated dependencies, which will cost time + resources + man power to solve them. 410 | 411 | - Low level coding is not affected much by the mentioned issues. they rarely change, and if so, is about new features, compatibility and stability. 412 | 413 | - Unnessecary overhead: as old devs retire, new ones might add extra layers of abstraction instead of updating the original code, these issues cause: extra complexity, overhead, extra cost in long-term, Large number/size of files, large developer teams, or slow working pace,... 414 |
415 | 416 | [_^_](#shortcuts-) 417 | *** 418 |
419 | 420 | -------------------------------------------------------------------------------- /site/md-page.js: -------------------------------------------------------------------------------- 1 | !function(){function I(g){"use strict";var A={omitExtraWLInCodeBlocks:{defaultValue:!1,describe:"Omit the default extra whiteline added to code blocks",type:"boolean"},noHeaderId:{defaultValue:!1,describe:"Turn on/off generated header id",type:"boolean"},prefixHeaderId:{defaultValue:!1,describe:"Add a prefix to the generated header ids. Passing a string will prefix that string to the header id. Setting to true will add a generic 'section-' prefix",type:"string"},rawPrefixHeaderId:{defaultValue:!1,describe:'Setting this option to true will prevent showdown from modifying the prefix. This might result in malformed IDs (if, for instance, the " char is used in the prefix)',type:"boolean"},ghCompatibleHeaderId:{defaultValue:!1,describe:"Generate header ids compatible with github style (spaces are replaced with dashes, a bunch of non alphanumeric chars are removed)",type:"boolean"},rawHeaderId:{defaultValue:!1,describe:"Remove only spaces, ' and \" from generated header ids (including prefixes), replacing them with dashes (-). WARNING: This might result in malformed ids",type:"boolean"},headerLevelStart:{defaultValue:!1,describe:"The header blocks level start",type:"integer"},parseImgDimensions:{defaultValue:!1,describe:"Turn on/off image dimension parsing",type:"boolean"},simplifiedAutoLink:{defaultValue:!1,describe:"Turn on/off GFM autolink style",type:"boolean"},excludeTrailingPunctuationFromURLs:{defaultValue:!1,describe:"Excludes trailing punctuation from links generated with autoLinking",type:"boolean"},literalMidWordUnderscores:{defaultValue:!1,describe:"Parse midword underscores as literal underscores",type:"boolean"},literalMidWordAsterisks:{defaultValue:!1,describe:"Parse midword asterisks as literal asterisks",type:"boolean"},strikethrough:{defaultValue:!1,describe:"Turn on/off strikethrough support",type:"boolean"},tables:{defaultValue:!1,describe:"Turn on/off tables support",type:"boolean"},tablesHeaderId:{defaultValue:!1,describe:"Add an id to table headers",type:"boolean"},ghCodeBlocks:{defaultValue:!0,describe:"Turn on/off GFM fenced code blocks support",type:"boolean"},tasklists:{defaultValue:!1,describe:"Turn on/off GFM tasklist support",type:"boolean"},smoothLivePreview:{defaultValue:!1,describe:"Prevents weird effects in live previews due to incomplete input",type:"boolean"},smartIndentationFix:{defaultValue:!1,description:"Tries to smartly fix indentation in es6 strings",type:"boolean"},disableForced4SpacesIndentedSublists:{defaultValue:!1,description:"Disables the requirement of indenting nested sublists by 4 spaces",type:"boolean"},simpleLineBreaks:{defaultValue:!1,description:"Parses simple line breaks as
(GFM Style)",type:"boolean"},requireSpaceBeforeHeadingText:{defaultValue:!1,description:"Makes adding a space between `#` and the header text mandatory (GFM Style)",type:"boolean"},ghMentions:{defaultValue:!1,description:"Enables github @mentions",type:"boolean"},ghMentionsLink:{defaultValue:"https://github.com/{u}",description:"Changes the link generated by @mentions. Only applies if ghMentions option is enabled.",type:"string"},encodeEmails:{defaultValue:!0,description:"Encode e-mail addresses through the use of Character Entities, transforming ASCII e-mail addresses into its equivalent decimal entities",type:"boolean"},openLinksInNewWindow:{defaultValue:!1,description:"Open all links in new windows",type:"boolean"},backslashEscapesHTMLTags:{defaultValue:!1,description:"Support for HTML Tag escaping. ex:
foo
",type:"boolean"},emoji:{defaultValue:!1,description:"Enable emoji support. Ex: `this is a :smile: emoji`",type:"boolean"},underline:{defaultValue:!1,description:"Enable support for underline. Syntax is double or triple underscores: `__underline word__`. With this option enabled, underscores no longer parses into `` and ``",type:"boolean"},completeHTMLDocument:{defaultValue:!1,description:"Outputs a complete html document, including ``, `` and `` tags",type:"boolean"},metadata:{defaultValue:!1,description:"Enable support for document metadata (defined at the top of the document between `\xab\xab\xab` and `\xbb\xbb\xbb` or between `---` and `---`).",type:"boolean"},splitAdjacentBlockquotes:{defaultValue:!1,description:"Split adjacent blockquote blocks",type:"boolean"}};if(!1===g)return JSON.parse(JSON.stringify(A));var C,I={};for(C in A)A.hasOwnProperty(C)&&(I[C]=A[C].defaultValue);return I}var v={},C={},i={},l=I(!0),c="vanilla",u={github:{omitExtraWLInCodeBlocks:!0,simplifiedAutoLink:!0,excludeTrailingPunctuationFromURLs:!0,literalMidWordUnderscores:!0,strikethrough:!0,tables:!0,tablesHeaderId:!0,ghCodeBlocks:!0,tasklists:!0,disableForced4SpacesIndentedSublists:!0,simpleLineBreaks:!0,requireSpaceBeforeHeadingText:!0,ghCompatibleHeaderId:!0,ghMentions:!0,backslashEscapesHTMLTags:!0,emoji:!0,splitAdjacentBlockquotes:!0},original:{noHeaderId:!0,ghCodeBlocks:!1},ghost:{omitExtraWLInCodeBlocks:!0,parseImgDimensions:!0,simplifiedAutoLink:!0,excludeTrailingPunctuationFromURLs:!0,literalMidWordUnderscores:!0,strikethrough:!0,tables:!0,tablesHeaderId:!0,ghCodeBlocks:!0,tasklists:!0,smoothLivePreview:!0,simpleLineBreaks:!0,requireSpaceBeforeHeadingText:!0,ghMentions:!1,encodeEmails:!0},vanilla:I(!0),allOn:function(){"use strict";var g,A=I(!0),C={};for(g in A)A.hasOwnProperty(g)&&(C[g]=!0);return C}()};function d(g,A){"use strict";var C=A?"Error in "+A+" extension->":"Error in unnamed extension",I={valid:!0,error:""};v.helper.isArray(g)||(g=[g]);for(var e=0;e"+a+""+n+t}}function t(e,r){"use strict";return function(g,A,C){var I="mailto:";return A=A||"",C=v.subParser("unescapeSpecialChars")(C,e,r),e.encodeEmails?(I=v.helper.encodeEmailAddress(I+C),C=v.helper.encodeEmailAddress(C)):I+=C,A+''+C+""}}v.helper.matchRecursiveRegExp=function(g,A,C,I){"use strict";for(var e=s(g,A,C,I),r=[],t=0;t',showdown:''},v.Converter=function(g){"use strict";var A,C,e={},a=[],n=[],t={},I=c,r={parsed:{},raw:"",format:""};for(A in g=g||{},l)l.hasOwnProperty(A)&&(e[A]=l[A]);if("object"!=typeof g)throw Error("Converter expects the passed parameter to be an object, but "+typeof g+" was passed instead.");for(C in g)g.hasOwnProperty(C)&&(e[C]=g[C]);function o(g,A){if(A=A||null,v.helper.isString(g)){if(A=g=v.helper.stdExtName(g),v.extensions[g]){console.warn("DEPRECATION WARNING: "+g+" is an old extension that uses a deprecated loading method.Please inform the developer that the extension should be updated!");var C=v.extensions[g],I=g;if("function"==typeof C&&(C=C(new v.Converter)),v.helper.isArray(C)||(C=[C]),!(I=d(C,I)).valid)throw Error(I.error);for(var e=0;e? ?(['"].*['"])?\)$/m))I="";else if(!I){if(I="#"+(C=C||A.toLowerCase().replace(/ ?\n/g," ")),v.helper.isUndefined(n.gUrls[C]))return g;I=n.gUrls[C],v.helper.isUndefined(n.gTitles[C])||(t=n.gTitles[C])}return g='"}return g=(g=(g=(g=(g=n.converter._dispatch("anchors.before",g,a,n)).replace(/\[((?:\[[^\]]*]|[^\[\]])*)] ?(?:\n *)?\[(.*?)]()()()()/g,A)).replace(/\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<([^>]*)>(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g,A)).replace(/\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]??(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g,A)).replace(/\[([^\[\]]+)]()()()()()/g,A),a.ghMentions&&(g=g.replace(/(^|\s)(\\)?(@([a-z\d\-]+))(?=[.!?;,[\]()]|\s|$)/gim,function(g,A,C,I,e){if("\\"===C)return A+I;if(v.helper.isString(a.ghMentionsLink))return C="",A+'"+I+"";throw new Error("ghMentionsLink option must be a string")})),g=n.converter._dispatch("anchors.after",g,a,n)});var a=/([*~_]+|\b)(((https?|ftp|dict):\/\/|www\.)[^'">\s]+?\.[^'">\s]+?)()(\1)?(?=\s|$)(?!["<>])/gi,n=/([*~_]+|\b)(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+?)([.!?,()\[\]])?(\1)?(?=\s|$)(?!["<>])/gi,o=/()<(((https?|ftp|dict):\/\/|www\.)[^'">\s]+)()>()/gi,p=/(^|\s)(?:mailto:)?([A-Za-z0-9!#$%&'*+-/=?^_`{|}~.]+@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)(?=$|\s)/gim,h=/<()(?:mailto:)?([-.\w]+@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi;v.subParser("autoLinks",function(g,A,C){"use strict";return g=(g=(g=C.converter._dispatch("autoLinks.before",g,A,C)).replace(o,r(A))).replace(h,t(A,C)),g=C.converter._dispatch("autoLinks.after",g,A,C)}),v.subParser("simplifiedAutoLinks",function(g,A,C){"use strict";return A.simplifiedAutoLink&&(g=C.converter._dispatch("simplifiedAutoLinks.before",g,A,C),g=(g=A.excludeTrailingPunctuationFromURLs?g.replace(n,r(A)):g.replace(a,r(A))).replace(p,t(A,C)),g=C.converter._dispatch("simplifiedAutoLinks.after",g,A,C)),g}),v.subParser("blockGamut",function(g,A,C){"use strict";return g=C.converter._dispatch("blockGamut.before",g,A,C),g=v.subParser("blockQuotes")(g,A,C),g=v.subParser("headers")(g,A,C),g=v.subParser("horizontalRule")(g,A,C),g=v.subParser("lists")(g,A,C),g=v.subParser("codeBlocks")(g,A,C),g=v.subParser("tables")(g,A,C),g=v.subParser("hashHTMLBlocks")(g,A,C),g=v.subParser("paragraphs")(g,A,C),g=C.converter._dispatch("blockGamut.after",g,A,C)}),v.subParser("blockQuotes",function(g,A,C){"use strict";g=C.converter._dispatch("blockQuotes.before",g,A,C);var I=/(^ {0,3}>[ \t]?.+\n(.+\n)*\n*)+/gm;return A.splitAdjacentBlockquotes&&(I=/^ {0,3}>[\s\S]*?(?:\n\n)/gm),g=(g+="\n\n").replace(I,function(g){return g=(g=(g=g.replace(/^[ \t]*>[ \t]?/gm,"")).replace(/\xa80/g,"")).replace(/^[ \t]+$/gm,""),g=v.subParser("githubCodeBlocks")(g,A,C),g=(g=(g=v.subParser("blockGamut")(g,A,C)).replace(/(^|\n)/g,"$1 ")).replace(/(\s*
[^\r]+?<\/pre>)/gm,function(g,A){return A.replace(/^  /gm,"\xa80").replace(/\xa80/g,"")}),v.subParser("hashBlock")("
\n"+g+"\n
",A,C)}),g=C.converter._dispatch("blockQuotes.after",g,A,C)}),v.subParser("codeBlocks",function(g,e,r){"use strict";g=r.converter._dispatch("codeBlocks.before",g,e,r);return g=(g=(g+="\xa80").replace(/(?:\n\n|^)((?:(?:[ ]{4}|\t).*\n+)+)(\n*[ ]{0,3}[^ \t\n]|(?=\xa80))/g,function(g,A,C){var I="\n",A=v.subParser("outdent")(A,e,r);return A=v.subParser("encodeCode")(A,e,r),A="
"+(A=(A=(A=v.subParser("detab")(A,e,r)).replace(/^\n+/g,"")).replace(/\n+$/g,""))+(I=e.omitExtraWLInCodeBlocks?"":I)+"
",v.subParser("hashBlock")(A,e,r)+C})).replace(/\xa80/,""),g=r.converter._dispatch("codeBlocks.after",g,e,r)}),v.subParser("codeSpans",function(g,e,r){"use strict";return g=(g=void 0===(g=r.converter._dispatch("codeSpans.before",g,e,r))?"":g).replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,function(g,A,C,I){return I=(I=I.replace(/^([ \t]*)/g,"")).replace(/[ \t]*$/g,""),I=A+""+(I=v.subParser("encodeCode")(I,e,r))+"",I=v.subParser("hashHTMLSpans")(I,e,r)}),g=r.converter._dispatch("codeSpans.after",g,e,r)}),v.subParser("completeHTMLDocument",function(g,A,C){"use strict";if(A.completeHTMLDocument){g=C.converter._dispatch("completeHTMLDocument.before",g,A,C);var I,e="html",r="\n",t="",a='\n',n="",o="";for(I in void 0!==C.metadata.parsed.doctype&&(r="\n","html"!==(e=C.metadata.parsed.doctype.toString().toLowerCase())&&"html5"!==e||(a='')),C.metadata.parsed)if(C.metadata.parsed.hasOwnProperty(I))switch(I.toLowerCase()){case"doctype":break;case"title":t=""+C.metadata.parsed.title+"\n";break;case"charset":a="html"===e||"html5"===e?'\n':'\n';break;case"language":case"lang":n=' lang="'+C.metadata.parsed[I]+'"',o+='\n';break;default:o+='\n'}g=r+"\n\n"+t+a+o+"\n\n"+g.trim()+"\n\n",g=C.converter._dispatch("completeHTMLDocument.after",g,A,C)}return g}),v.subParser("detab",function(g,A,C){"use strict";return g=(g=(g=(g=(g=(g=C.converter._dispatch("detab.before",g,A,C)).replace(/\t(?=\t)/g,"    ")).replace(/\t/g,"\xa8A\xa8B")).replace(/\xa8B(.+?)\xa8A/g,function(g,A){for(var C=A,I=4-C.length%4,e=0;e/g,">"),g=C.converter._dispatch("encodeAmpsAndAngles.after",g,A,C)}),v.subParser("encodeBackslashEscapes",function(g,A,C){"use strict";return g=(g=(g=C.converter._dispatch("encodeBackslashEscapes.before",g,A,C)).replace(/\\(\\)/g,v.helper.escapeCharactersCallback)).replace(/\\([`*_{}\[\]()>#+.!~=|-])/g,v.helper.escapeCharactersCallback),g=C.converter._dispatch("encodeBackslashEscapes.after",g,A,C)}),v.subParser("encodeCode",function(g,A,C){"use strict";return g=(g=C.converter._dispatch("encodeCode.before",g,A,C)).replace(/&/g,"&").replace(//g,">").replace(/([*_{}\[\]\\=~-])/g,v.helper.escapeCharactersCallback),g=C.converter._dispatch("encodeCode.after",g,A,C)}),v.subParser("escapeSpecialCharsWithinTagAttributes",function(g,A,C){"use strict";return g=(g=(g=C.converter._dispatch("escapeSpecialCharsWithinTagAttributes.before",g,A,C)).replace(/<\/?[a-z\d_:-]+(?:[\s]+[\s\S]+?)?>/gi,function(g){return g.replace(/(.)<\/?code>(?=.)/g,"$1`").replace(/([\\`*_~=|])/g,v.helper.escapeCharactersCallback)})).replace(/-]|-[^>])(?:[^-]|-[^-])*)--)>/gi,function(g){return g.replace(/([\\`*_~=|])/g,v.helper.escapeCharactersCallback)}),g=C.converter._dispatch("escapeSpecialCharsWithinTagAttributes.after",g,A,C)}),v.subParser("githubCodeBlocks",function(g,r,t){"use strict";return r.ghCodeBlocks?(g=t.converter._dispatch("githubCodeBlocks.before",g,r,t),g=(g=(g+="\xa80").replace(/(?:^|\n)(```+|~~~+)([^\s`~]*)\n([\s\S]*?)\n\1/g,function(g,A,C,I){var e=r.omitExtraWLInCodeBlocks?"":"\n";return I=v.subParser("encodeCode")(I,r,t),I="
"+(I=(I=(I=v.subParser("detab")(I,r,t)).replace(/^\n+/g,"")).replace(/\n+$/g,""))+e+"
",I=v.subParser("hashBlock")(I,r,t),"\n\n\xa8G"+(t.ghCodeBlocks.push({text:g,codeblock:I})-1)+"G\n\n"})).replace(/\xa80/,""),t.converter._dispatch("githubCodeBlocks.after",g,r,t)):g}),v.subParser("hashBlock",function(g,A,C){"use strict";return g=(g=C.converter._dispatch("hashBlock.before",g,A,C)).replace(/(^\n+|\n+$)/g,""),g="\n\n\xa8K"+(C.gHtmlBlocks.push(g)-1)+"K\n\n",g=C.converter._dispatch("hashBlock.after",g,A,C)}),v.subParser("hashCodeTags",function(g,e,r){"use strict";g=r.converter._dispatch("hashCodeTags.before",g,e,r);return g=v.helper.replaceRecursiveRegExp(g,function(g,A,C,I){C=C+v.subParser("encodeCode")(A,e,r)+I;return"\xa8C"+(r.gHtmlSpans.push(C)-1)+"C"},"]*>","","gim"),g=r.converter._dispatch("hashCodeTags.after",g,e,r)}),v.subParser("hashElement",function(g,A,C){"use strict";return function(g,A){return A=(A=(A=A.replace(/\n\n/g,"\n")).replace(/^\n/,"")).replace(/\n+$/g,""),A="\n\n\xa8K"+(C.gHtmlBlocks.push(A)-1)+"K\n\n"}}),v.subParser("hashHTMLBlocks",function(g,A,e){"use strict";g=e.converter._dispatch("hashHTMLBlocks.before",g,A,e);function C(g,A,C,I){return-1!==C.search(/\bmarkdown\b/)&&(g=C+e.converter.makeHtml(A)+I),"\n\n\xa8K"+(e.gHtmlBlocks.push(g)-1)+"K\n\n"}var I=["pre","div","h1","h2","h3","h4","h5","h6","blockquote","table","dl","ol","ul","script","noscript","form","fieldset","iframe","math","style","section","header","footer","nav","article","aside","address","audio","canvas","figure","hgroup","output","video","p"];A.backslashEscapesHTMLTags&&(g=g.replace(/\\<(\/?[^>]+?)>/g,function(g,A){return"<"+A+">"}));for(var r=0;r]*>)","im"),a="<"+I[r]+"\\b[^>]*>",n="";-1!==(o=v.helper.regexIndexOf(g,t));){var o=v.helper.splitAtIndex(g,o),s=v.helper.replaceRecursiveRegExp(o[1],C,a,n,"im");if(s===o[1])break;g=o[0].concat(s)}return g=g.replace(/(\n {0,3}(<(hr)\b([^<>])*?\/?>)[ \t]*(?=\n{2,}))/g,v.subParser("hashElement")(g,A,e)),g=(g=v.helper.replaceRecursiveRegExp(g,function(g){return"\n\n\xa8K"+(e.gHtmlBlocks.push(g)-1)+"K\n\n"},"^ {0,3}\x3c!--","--\x3e","gm")).replace(/(?:\n\n)( {0,3}(?:<([?%])[^\r]*?\2>)[ \t]*(?=\n{2,}))/g,v.subParser("hashElement")(g,A,e)),g=e.converter._dispatch("hashHTMLBlocks.after",g,A,e)}),v.subParser("hashHTMLSpans",function(g,A,C){"use strict";function I(g){return"\xa8C"+(C.gHtmlSpans.push(g)-1)+"C"}return g=(g=(g=(g=(g=C.converter._dispatch("hashHTMLSpans.before",g,A,C)).replace(/<[^>]+?\/>/gi,I)).replace(/<([^>]+?)>[\s\S]*?<\/\1>/g,I)).replace(/<([^>]+?)\s[^>]+?>[\s\S]*?<\/\1>/g,I)).replace(/<[^>]+?>/gi,I),g=C.converter._dispatch("hashHTMLSpans.after",g,A,C)}),v.subParser("unhashHTMLSpans",function(g,A,C){"use strict";g=C.converter._dispatch("unhashHTMLSpans.before",g,A,C);for(var I=0;I]*>\\s*]*>","^ {0,3}\\s*
","gim"),g=r.converter._dispatch("hashPreCodeTags.after",g,e,r)}),v.subParser("headers",function(g,e,r){"use strict";g=r.converter._dispatch("headers.before",g,e,r);var t=isNaN(parseInt(e.headerLevelStart))?1:parseInt(e.headerLevelStart),A=e.smoothLivePreview?/^(.+)[ \t]*\n={2,}[ \t]*\n+/gm:/^(.+)[ \t]*\n=+[ \t]*\n+/gm,C=e.smoothLivePreview?/^(.+)[ \t]*\n-{2,}[ \t]*\n+/gm:/^(.+)[ \t]*\n-+[ \t]*\n+/gm,A=(g=(g=g.replace(A,function(g,A){var C=v.subParser("spanGamut")(A,e,r),A=e.noHeaderId?"":' id="'+a(A)+'"',A=""+C+"";return v.subParser("hashBlock")(A,e,r)})).replace(C,function(g,A){var C=v.subParser("spanGamut")(A,e,r),A=e.noHeaderId?"":' id="'+a(A)+'"',I=t+1,A=""+C+"";return v.subParser("hashBlock")(A,e,r)}),e.requireSpaceBeforeHeadingText?/^(#{1,6})[ \t]+(.+?)[ \t]*#*\n+/gm:/^(#{1,6})[ \t]*(.+?)[ \t]*#*\n+/gm);function a(g){var A=g=e.customizedHeaderId&&(A=g.match(/\{([^{]+?)}\s*$/))&&A[1]?A[1]:g,g=v.helper.isString(e.prefixHeaderId)?e.prefixHeaderId:!0===e.prefixHeaderId?"section-":"";return e.rawPrefixHeaderId||(A=g+A),A=(e.ghCompatibleHeaderId?A.replace(/ /g,"-").replace(/&/g,"").replace(/\xa8T/g,"").replace(/\xa8D/g,"").replace(/[&+$,\/:;=?@"#{}|^\xa8~\[\]`\\*)(%.!'<>]/g,""):e.rawHeaderId?A.replace(/ /g,"-").replace(/&/g,"&").replace(/\xa8T/g,"\xa8").replace(/\xa8D/g,"$").replace(/["']/g,"-"):A.replace(/[^\w]/g,"")).toLowerCase(),e.rawPrefixHeaderId&&(A=g+A),r.hashLinkCounts[A]?A=A+"-"+r.hashLinkCounts[A]++:r.hashLinkCounts[A]=1,A}return g=g.replace(A,function(g,A,C){var I=C,I=(e.customizedHeaderId&&(I=C.replace(/\s?\{([^{]+?)}\s*$/,"")),v.subParser("spanGamut")(I,e,r)),C=e.noHeaderId?"":' id="'+a(C)+'"',A=t-1+A.length,C=""+I+"";return v.subParser("hashBlock")(C,e,r)}),g=r.converter._dispatch("headers.after",g,e,r)}),v.subParser("horizontalRule",function(g,A,C){"use strict";g=C.converter._dispatch("horizontalRule.before",g,A,C);var I=v.subParser("hashBlock")("
",A,C);return g=(g=(g=g.replace(/^ {0,2}( ?-){3,}[ \t]*$/gm,I)).replace(/^ {0,2}( ?\*){3,}[ \t]*$/gm,I)).replace(/^ {0,2}( ?_){3,}[ \t]*$/gm,I),g=C.converter._dispatch("horizontalRule.after",g,A,C)}),v.subParser("images",function(g,A,i){"use strict";function n(g,A,C,I,e,r,t,a){var n=i.gUrls,o=i.gTitles,s=i.gDimensions;if(C=C.toLowerCase(),a=a||"",-1? ?(['"].*['"])?\)$/m))I="";else if(""===I||null===I){if(I="#"+(C=""!==C&&null!==C?C:A.toLowerCase().replace(/ ?\n/g," ")),v.helper.isUndefined(n[C]))return g;I=n[C],v.helper.isUndefined(o[C])||(a=o[C]),v.helper.isUndefined(s[C])||(e=s[C].width,r=s[C].height)}A=A.replace(/"/g,""").replace(v.helper.regexes.asteriskDashAndColon,v.helper.escapeCharactersCallback);g=''+A+'"}return g=(g=(g=(g=(g=(g=i.converter._dispatch("images.before",g,A,i)).replace(/!\[([^\]]*?)] ?(?:\n *)?\[([\s\S]*?)]()()()()()/g,n)).replace(/!\[([^\]]*?)][ \t]*()\([ \t]??(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g,function(g,A,C,I,e,r,t,a){return n(g,A,C,I=I.replace(/\s/g,""),e,r,0,a)})).replace(/!\[([^\]]*?)][ \t]*()\([ \t]?<([^>]*)>(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(?:(["'])([^"]*?)\6))?[ \t]?\)/g,n)).replace(/!\[([^\]]*?)][ \t]*()\([ \t]??(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g,n)).replace(/!\[([^\[\]]+)]()()()()()/g,n),g=i.converter._dispatch("images.after",g,A,i)}),v.subParser("italicsAndBold",function(g,A,C){"use strict";return g=C.converter._dispatch("italicsAndBold.before",g,A,C),g=A.literalMidWordUnderscores?(g=(g=g.replace(/\b___(\S[\s\S]*)___\b/g,function(g,A){return""+A+""})).replace(/\b__(\S[\s\S]*)__\b/g,function(g,A){return""+A+""})).replace(/\b_(\S[\s\S]*?)_\b/g,function(g,A){return""+A+""}):(g=(g=g.replace(/___(\S[\s\S]*?)___/g,function(g,A){return/\S$/.test(A)?""+A+"":g})).replace(/__(\S[\s\S]*?)__/g,function(g,A){return/\S$/.test(A)?""+A+"":g})).replace(/_([^\s_][\s\S]*?)_/g,function(g,A){return/\S$/.test(A)?""+A+"":g}),g=A.literalMidWordAsterisks?(g=(g=g.replace(/([^*]|^)\B\*\*\*(\S[\s\S]+?)\*\*\*\B(?!\*)/g,function(g,A,C){return A+""+C+""})).replace(/([^*]|^)\B\*\*(\S[\s\S]+?)\*\*\B(?!\*)/g,function(g,A,C){return A+""+C+""})).replace(/([^*]|^)\B\*(\S[\s\S]+?)\*\B(?!\*)/g,function(g,A,C){return A+""+C+""}):(g=(g=g.replace(/\*\*\*(\S[\s\S]*?)\*\*\*/g,function(g,A){return/\S$/.test(A)?""+A+"":g})).replace(/\*\*(\S[\s\S]*?)\*\*/g,function(g,A){return/\S$/.test(A)?""+A+"":g})).replace(/\*([^\s*][\s\S]*?)\*/g,function(g,A){return/\S$/.test(A)?""+A+"":g}),g=C.converter._dispatch("italicsAndBold.after",g,A,C)}),v.subParser("lists",function(g,i,o){"use strict";function l(g,A){o.gListLevel++,g=g.replace(/\n{2,}$/,"\n");var C=/(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[(x|X| )?])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(\xa80| {0,3}([*+-]|\d+[.])[ \t]+))/gm,n=/\n[ \t]*\n(?!\xa80)/.test(g+="\xa80");return i.disableForced4SpacesIndentedSublists&&(C=/(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[(x|X| )?])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(\xa80|\2([*+-]|\d+[.])[ \t]+))/gm),g=(g=g.replace(C,function(g,A,C,I,e,r,t){t=t&&""!==t.trim();var e=v.subParser("outdent")(e,i,o),a="";return r&&i.tasklists&&(a=' class="task-list-item" style="list-style-type: none;"',e=e.replace(/^[ \t]*\[(x|X| )?]/m,function(){var g='"+(e=(e=(A||-1\n"})).replace(/\xa80/g,""),o.gListLevel--,g=A?g.replace(/\s+$/,""):g}function c(g,A){if("ol"===A){A=g.match(/^ *(\d+)\./);if(A&&"1"!==A[1])return' start="'+A[1]+'"'}return""}function e(e,r,t){var g,a=i.disableForced4SpacesIndentedSublists?/^ ?\d+\.[ \t]/gm:/^ {0,3}\d+\.[ \t]/gm,n=i.disableForced4SpacesIndentedSublists?/^ ?[*+-][ \t]/gm:/^ {0,3}[*+-][ \t]/gm,o="ul"===r?a:n,s="";return-1!==e.search(o)?function g(A){var C=A.search(o),I=c(e,r);-1!==C?(s+="\n\n<"+r+I+">\n"+l(A.slice(0,C),!!t)+"\n",o="ul"===(r="ul"===r?"ol":"ul")?a:n,g(A.slice(C))):s+="\n\n<"+r+I+">\n"+l(A,!!t)+"\n"}(e):(g=c(e,r),s="\n\n<"+r+g+">\n"+l(e,!!t)+"\n"),s}return g=o.converter._dispatch("lists.before",g,i,o),g+="\xa80",g=(g=o.gListLevel?g.replace(/^(( {0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(\xa80|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm,function(g,A,C){return e(A,-1"),e.push(a+="

"))}for(r=e.length,t=0;t]*>\s*]*>/.test(o)&&(s=!0)}e[t]=o}return g=(g=(g=e.join("\n")).replace(/^\n+/g,"")).replace(/\n+$/g,""),C.converter._dispatch("paragraphs.after",g,A,C)}),v.subParser("runExtension",function(g,A,C,I){"use strict";return g.filter?A=g.filter(A,I.converter,C):g.regex&&((I=g.regex)instanceof RegExp||(I=new RegExp(I,"g")),A=A.replace(I,g.replace)),A}),v.subParser("spanGamut",function(g,A,C){"use strict";return g=C.converter._dispatch("spanGamut.before",g,A,C),g=v.subParser("codeSpans")(g,A,C),g=v.subParser("escapeSpecialCharsWithinTagAttributes")(g,A,C),g=v.subParser("encodeBackslashEscapes")(g,A,C),g=v.subParser("images")(g,A,C),g=v.subParser("anchors")(g,A,C),g=v.subParser("autoLinks")(g,A,C),g=v.subParser("simplifiedAutoLinks")(g,A,C),g=v.subParser("emoji")(g,A,C),g=v.subParser("underline")(g,A,C),g=v.subParser("italicsAndBold")(g,A,C),g=v.subParser("strikethrough")(g,A,C),g=v.subParser("ellipsis")(g,A,C),g=v.subParser("hashHTMLSpans")(g,A,C),g=v.subParser("encodeAmpsAndAngles")(g,A,C),A.simpleLineBreaks?/\n\n\xa8K/.test(g)||(g=g.replace(/\n+/g,"
\n")):g=g.replace(/ +\n/g,"
\n"),g=C.converter._dispatch("spanGamut.after",g,A,C)}),v.subParser("strikethrough",function(g,C,I){"use strict";return C.strikethrough&&(g=(g=I.converter._dispatch("strikethrough.before",g,C,I)).replace(/(?:~){2}([\s\S]+?)(?:~){2}/g,function(g,A){return A=A,""+(A=C.simplifiedAutoLink?v.subParser("simplifiedAutoLinks")(A,C,I):A)+""}),g=I.converter._dispatch("strikethrough.after",g,C,I)),g}),v.subParser("stripLinkDefinitions",function(g,a,n){"use strict";function A(g,A,C,I,e,r,t){return A=A.toLowerCase(),C.match(/^data:.+?\/.+?;base64,/)?n.gUrls[A]=C.replace(/\s/g,""):n.gUrls[A]=v.subParser("encodeAmpsAndAngles")(C,a,n),r?r+t:(t&&(n.gTitles[A]=t.replace(/"|'/g,""")),a.parseImgDimensions&&I&&e&&(n.gDimensions[A]={width:I,height:e}),"")}return g=(g=(g=(g+="\xa80").replace(/^ {0,3}\[(.+)]:[ \t]*\n?[ \t]*?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n\n|(?=\xa80)|(?=\n\[))/gm,A)).replace(/^ {0,3}\[(.+)]:[ \t]*\n?[ \t]*\s]+)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n+|(?=\xa80))/gm,A)).replace(/\xa80/,"")}),v.subParser("tables",function(g,w,k){"use strict";return w.tables&&(g=(g=(g=(g=k.converter._dispatch("tables.before",g,w,k)).replace(/\\(\|)/g,v.helper.escapeCharactersCallback)).replace(/^ {0,3}\|?.+\|.+\n {0,3}\|?[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*:?[ \t]*(?:[-=]){2,}[\s\S]+?(?:\n\n|\xa80)/gm,A)).replace(/^ {0,3}\|.+\|[ \t]*\n {0,3}\|[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*\n( {0,3}\|.+\|[ \t]*\n)*(?:\n|\xa80)/gm,A),g=k.converter._dispatch("tables.after",g,w,k)),g;function A(g){for(var A=g.split("\n"),C=0;C"+(e=v.subParser("spanGamut")(e,w,k))+"\n"));for(C=0;C"+v.subParser("spanGamut")(a,w,k)+"\n"));c.push(u)}for(var p=i,h=c,m="\n\n\n",_=p.length,b=0;b<_;++b)m+=p[b];for(m+="\n\n\n",b=0;b\n";for(var f=0;f<_;++f)m+=h[b][f];m+="\n"}return m+="\n
\n"}}),v.subParser("underline",function(g,A,C){"use strict";return A.underline&&(g=C.converter._dispatch("underline.before",g,A,C),g=(g=A.literalMidWordUnderscores?g.replace(/\b_?__(\S[\s\S]*)___?\b/g,function(g,A){return""+A+""}):g.replace(/_?__(\S[\s\S]*?)___?/g,function(g,A){return/\S$/.test(A)?""+A+"":g})).replace(/(_)/g,v.helper.escapeCharactersCallback),g=C.converter._dispatch("underline.after",g,A,C)),g}),v.subParser("unescapeSpecialChars",function(g,A,C){"use strict";return g=(g=C.converter._dispatch("unescapeSpecialChars.before",g,A,C)).replace(/\xa8E(\d+)E/g,function(g,A){A=parseInt(A);return String.fromCharCode(A)}),g=C.converter._dispatch("unescapeSpecialChars.after",g,A,C)});"function"==typeof define&&define.amd?define(function(){"use strict";return v}):"undefined"!=typeof module&&module.exports?module.exports=v:this.showdown=v}.call(this),String.prototype.includes||(String.prototype.includes=function(g,A){"use strict";if(g instanceof RegExp)throw TypeError("first argument must not be a RegExp");return-1!==this.indexOf(g,A=void 0===A?0:A)}),[Element.prototype,Document.prototype,DocumentFragment.prototype].forEach(function(g){g.hasOwnProperty("prepend")||Object.defineProperty(g,"prepend",{configurable:!0,enumerable:!0,writable:!0,value:function(){var g=Array.prototype.slice.call(arguments),C=document.createDocumentFragment();g.forEach(function(g){var A=g instanceof Node;C.appendChild(A?g:document.createTextNode(String(g)))}),this.insertBefore(C,this.firstChild)}})}),document.addEventListener("DOMContentLoaded",function(){var g=document.createElement("style"),A='body { padding: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} ',A=(A+"blockquote { padding: 0 1em; color: #6a737d; border-left: 0.25em solid #dfe2e5;} "+"code { padding: 0.2em 0.4em; background: rgba(27,31,35,0.05); border-radius: 3px;} "+"pre > code { background: none } "+"pre { padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; } "+"table { border-collapse: collapse; } "+"td, th { border: 1px solid #ddd; padding: 10px 13px; } ",g.innerHTML='body { padding: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} blockquote { padding: 0 1em; color: #6a737d; border-left: 0.25em solid #dfe2e5;} code { padding: 0.2em 0.4em; background: rgba(27,31,35,0.05); border-radius: 3px;} pre > code { background: none } pre { padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; } table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 10px 13px; } ',document.head.prepend(g),document.createElement("meta")),g=(A.setAttribute("name","viewport"),A.setAttribute("content","width=device-width, initial-scale=1, shrink-to-fit=no"),document.head.appendChild(A),document.createElement("meta"));g.setAttribute("charset","UTF-8"),document.head.appendChild(g);window.navigator.userAgent.indexOf("MSIE ")?(A=document.querySelector("noscript"),(g=document.createElement("pre")).appendChild(A),C=g.textContent||g.innerText,delete A,delete g):C=document.querySelector("noscript").innerText;var C,A=new showdown.Converter({emoji:!0,underline:!0}),g=(A.setFlavor("github"),A.addExtension(function(){return[{type:"output",regex:/]+>/g,replace:function(g){var A=g.match(/"(.*?)"/)[1];return A.includes(window.location.hostname)||"/"==A[0]||"."==A[0]||"#"==A[0]?g:''}}]},"externalLink"),A.makeHtml(C));document.body.innerHTML=g,document.title=document.title||document.body.firstElementChild.innerText.trim(),setTimeout(function(){var g=window.location.hash;window.location.hash="",window.location.hash=g},100)}); 2 | --------------------------------------------------------------------------------