The latest articles on Forem by Justin Maximillian Kimlim (@kimlimjustin). https://forem.com/kimlimjustin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png https://forem.com/kimlimjustin en Justin Maximillian Kimlim Sat, 04 Apr 2026 16:34:05 +0000 https://forem.com/kimlimjustin/-31n9 https://forem.com/kimlimjustin/-31n9 <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi" class="crayons-story__hidden-navigation-link">I Put VS Code, Claude, and a Terminal Inside a File Manager I built using React and Rust — Here's What Happened</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/kimlimjustin" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/kimlimjustin" class="crayons-story__secondary fw-medium m:hidden"> Justin Maximillian Kimlim </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Justin Maximillian Kimlim <div id="story-author-preview-content-3454361" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/kimlimjustin" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Justin Maximillian Kimlim</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi" class="crayons-story__tertiary fs-xs"><time>Apr 4</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi" id="article-link-3454361"> I Put VS Code, Claude, and a Terminal Inside a File Manager I built using React and Rust — Here's What Happened </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/productivity"><span class="crayons-tag__prefix">#</span>productivity</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> Justin Maximillian Kimlim Sat, 04 Apr 2026 16:33:31 +0000 https://forem.com/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi https://forem.com/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-39hi <p>Remember when file managers were just... folders and files?</p> <p>I got tired of switching between Finder, VS Code, Terminal, and ChatGPT every 30 seconds. So I built a file manager that has all of them built in. It's called <strong>Xplorer</strong>, it's free, and I just shipped the first alpha.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5ri1zcwoh88ekuuukvx.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5ri1zcwoh88ekuuukvx.png" alt="Xplorer — A modern file manager" width="800" height="481"></a></p> <h2> The "Why" — File Managers Haven't Changed Since 2005 </h2> <p>Think about it. Your code editor got AI autocomplete, your browser got extensions, your terminal got split panes. But your file manager? Still the same grid things...</p> <p>I wanted one app where I could:</p> <ul> <li>Browse files</li> <li>Preview code with syntax highlighting</li> <li>Ask AI "what's in this PDF?"</li> <li>Run git commands</li> <li>Open a terminal</li> <li>Install extensions</li> </ul> <p>So I built it.</p> <h2> What It Looks Like </h2> <h3> VS Code Vibes, But For Your Files </h3> <p>Multi-tab browsing, split panes, file tree sidebar, AI chat — all in one window. Browse two folders side-by-side, ask the AI about a file, and preview code with syntax highlighting. No more juggling 5 different apps.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" alt="Split view with multiple tabs, file browsing, and AI chat sidebar" width="800" height="512"></a></p> <p>And yes — you can actually code in it too. There's a full code editor extension with syntax highlighting, multi-tab editing, an architecture analyzer, git history, and a project workspace sidebar. It's basically VS Code inside your file manager.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15491pgqtteeso8fu0r9.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15491pgqtteeso8fu0r9.png" alt="Full IDE mode — code editor, architecture panel, git history, workspace tree" width="800" height="482"></a></p> <p>The git integration lives in the bottom panel — stage commits, view diffs, push/pull, browse history. The terminal persists even when you navigate to different folders (which sounds obvious, but most file managers kill your terminal when you click a folder).</p> <h3> AI That Actually Sees Your Files </h3> <p>Select any file — a PDF, a Word doc, a spreadsheet, source code — type "explain this file", and the AI reads the actual content and tells you what's inside. Not just the filename. The <em>content</em>.</p> <p>In the screenshot below, I selected a Chinese probability textbook PDF. The AI read it and told me it's a "Probability Theory Exam Crammer's Bible, compiled for a 2026 Spring semester course at Tsinghua University." I didn't open the file. I didn't copy-paste anything. It just read it.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnl2qu51o0dj8jnk6rwk.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnl2qu51o0dj8jnk6rwk.png" alt="AI chat reads your files — select a PDF and ask questions about it" width="800" height="477"></a></p> <p>It works with anything: PDFs, <code>.docx</code>, <code>.xlsx</code>, <code>.pptx</code>, Python scripts, Rust code, config files. You can ask follow-up questions, ask it to summarize, or ask it to compare two files. It's like having ChatGPT built into your file manager, except it can actually <em>see</em> what's on your disk.</p> <p>The AI search is smart too — type "latest" and it sorts by date. Type "big videos" and it filters by type and size. It even works across languages.</p> <h3> Run Claude Code or Codex Right In Your File Manager </h3> <p>See that terminal at the bottom? That's Claude Code running inside Xplorer. Command palette on top, other extensions on the right, integrated terminal at the bottom. You can browse your project files, run <code>claude</code> in the terminal, and manage extensions — all without leaving the window.</p> <p>The command palette (Ctrl+Shift+P) works just like VS Code — search files, jump to folders, run commands. And the terminal is a real PTY, so anything you run in Terminal.app or iTerm works here too — including Claude Code.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx9ljc7my4vvfnq3vbszz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx9ljc7my4vvfnq3vbszz.png" alt="Command palette, Claude Code in terminal, and extensions panel" width="800" height="485"></a></p> <h2> The Extension Marketplace </h2> <p>Just like VS Code has extensions, Xplorer has a marketplace at <a href="https://xplorer.space" rel="noopener noreferrer">xplorer.space</a>. That's how features above can work. One-click install, auto-updates.</p> <p>There are 25+ extensions right now:</p> <ul> <li> <strong>Git UI</strong> — full branch, staging, diff, blame interface</li> <li> <strong>SSH Manager</strong> — browse remote servers like local folders</li> <li> <strong>Code Editor</strong> — edit files with syntax highlighting</li> <li> <strong>Image Editor</strong> — crop, resize, filters</li> <li> <strong>SQLite Browser</strong> — open and query databases</li> <li> <strong>5 Themes</strong> — Tokyo Night, Dracula, Nord, Cyberpunk, Ocean Deep</li> </ul> <p>And if you're a developer, you can build your own with the public SDK.</p> <h2> More Screenshots </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" alt="File browsing with split view" width="800" height="512"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxx5ueto6s2za6xv0zz8.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxx5ueto6s2za6xv0zz8.png" alt="Rich file previews — code, images, PDFs, 3D models" width="800" height="568"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01fwzjkv6jxbv0vt0feg.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01fwzjkv6jxbv0vt0feg.png" alt="AI chat assistant built right in" width="800" height="483"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5oriz471tng7b92gs1s.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5oriz471tng7b92gs1s.png" alt="Git integration in the bottom panel" width="800" height="326"></a></p> <h2> Built With </h2> <ul> <li> <strong>Tauri 2 + Rust</strong> — 10x smaller than Electron, native speed</li> <li> <strong>React 18</strong> — modern UI with hooks</li> <li> <strong>AI</strong> — works with Ollama (free/local), Claude, OpenAI, Gemini, DeepSeek, Mistral</li> <li>Runs on <strong>macOS, Windows, and Linux</strong> </li> </ul> <h2> Try It </h2> <p>This is an alpha release — it's fully functional but expect rough edges. Back up important files before going wild with file operations.</p> <p><strong>Download</strong>: <a href="https://github.com/kimlimjustin/xplorer/releases" rel="noopener noreferrer">github.com/kimlimjustin/xplorer/releases</a></p> <p><strong>Source code</strong>: <a href="https://github.com/kimlimjustin/xplorer" rel="noopener noreferrer">github.com/kimlimjustin/xplorer</a> (AGPL-3.0)</p> <p><strong>Extension marketplace</strong>: <a href="https://xplorer.space" rel="noopener noreferrer">xplorer.space</a></p> <p>If you like it, a star on GitHub or a <a href="https://github.com/sponsors/kimlimjustin" rel="noopener noreferrer">sponsorship</a> would mean the world to me.</p> <p><em>Back years ago I posted <a href="https://dev.to/kimlimjustin/i-wrote-a-fully-functioning-file-explorer-using-typescript-1e4n">I wrote a fully functioning File Explorer using TypeScript</a>. That was the version I built when I learn programming. This is the sequel — rewritten from scratch in Rust with AI superpowers.</em></p> showdev typescript react productivity Justin Maximillian Kimlim Sat, 04 Apr 2026 10:18:15 +0000 https://forem.com/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-k1n https://forem.com/kimlimjustin/i-put-vs-code-claude-and-a-terminal-inside-a-file-manager-i-built-using-react-and-rust-heres-k1n <p>Remember when file managers were just... folders and files?</p> <p>I got tired of switching between Finder, VS Code, Terminal, and ChatGPT every 30 seconds. So I built a file manager that has all of them built in. It's called <strong>Xplorer</strong>, it's free, and I just shipped the first alpha.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5ri1zcwoh88ekuuukvx.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5ri1zcwoh88ekuuukvx.png" alt="Xplorer — A modern file manager" width="800" height="481"></a></p> <h2> The "Why" — File Managers Haven't Changed Since 2005 </h2> <p>Think about it. Your code editor got AI autocomplete, your browser got extensions, your terminal got split panes. But your file manager? Still the same grid things...</p> <p>I wanted one app where I could:</p> <ul> <li>Browse files</li> <li>Preview code with syntax highlighting</li> <li>Ask AI "what's in this PDF?"</li> <li>Run git commands</li> <li>Open a terminal</li> <li>Install extensions</li> </ul> <p>So I built it.</p> <h2> What It Looks Like </h2> <h3> VS Code Vibes, But For Your Files </h3> <p>Multi-tab browsing, split panes, file tree sidebar, AI chat — all in one window. Browse two folders side-by-side, ask the AI about a file, and preview code with syntax highlighting. No more juggling 5 different apps.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" alt="Split view with multiple tabs, file browsing, and AI chat sidebar" width="800" height="512"></a></p> <p>And yes — you can actually code in it too. There's a full code editor extension with syntax highlighting, multi-tab editing, an architecture analyzer, git history, and a project workspace sidebar. It's basically VS Code inside your file manager.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15491pgqtteeso8fu0r9.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15491pgqtteeso8fu0r9.png" alt="Full IDE mode — code editor, architecture panel, git history, workspace tree" width="800" height="482"></a></p> <p>The git integration lives in the bottom panel — stage commits, view diffs, push/pull, browse history. The terminal persists even when you navigate to different folders (which sounds obvious, but most file managers kill your terminal when you click a folder).</p> <h3> AI That Actually Sees Your Files </h3> <p>Select any file — a PDF, a Word doc, a spreadsheet, source code — type "explain this file", and the AI reads the actual content and tells you what's inside. Not just the filename. The <em>content</em>.</p> <p>In the screenshot below, I selected a Chinese probability textbook PDF. The AI read it and told me it's a "Probability Theory Exam Crammer's Bible, compiled for a 2026 Spring semester course at Tsinghua University." I didn't open the file. I didn't copy-paste anything. It just read it.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnl2qu51o0dj8jnk6rwk.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxnl2qu51o0dj8jnk6rwk.png" alt="AI chat reads your files — select a PDF and ask questions about it" width="800" height="477"></a></p> <p>It works with anything: PDFs, <code>.docx</code>, <code>.xlsx</code>, <code>.pptx</code>, Python scripts, Rust code, config files. You can ask follow-up questions, ask it to summarize, or ask it to compare two files. It's like having ChatGPT built into your file manager, except it can actually <em>see</em> what's on your disk.</p> <p>The AI search is smart too — type "latest" and it sorts by date. Type "big videos" and it filters by type and size. It even works across languages.</p> <h3> Run Claude Code or Codex Right In Your File Manager </h3> <p>See that terminal at the bottom? That's Claude Code running inside Xplorer. Command palette on top, other extensions on the right, integrated terminal at the bottom. You can browse your project files, run <code>claude</code> in the terminal, and manage extensions — all without leaving the window.</p> <p>The command palette (Ctrl+Shift+P) works just like VS Code — search files, jump to folders, run commands. And the terminal is a real PTY, so anything you run in Terminal.app or iTerm works here too — including Claude Code.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx9ljc7my4vvfnq3vbszz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx9ljc7my4vvfnq3vbszz.png" alt="Command palette, Claude Code in terminal, and extensions panel" width="800" height="485"></a></p> <h2> The Extension Marketplace </h2> <p>Just like VS Code has extensions, Xplorer has a marketplace at <a href="https://xplorer.space" rel="noopener noreferrer">xplorer.space</a>. That's how features above can work. One-click install, auto-updates.</p> <p>There are 25+ extensions right now:</p> <ul> <li> <strong>Git UI</strong> — full branch, staging, diff, blame interface</li> <li> <strong>SSH Manager</strong> — browse remote servers like local folders</li> <li> <strong>Code Editor</strong> — edit files with syntax highlighting</li> <li> <strong>Image Editor</strong> — crop, resize, filters</li> <li> <strong>SQLite Browser</strong> — open and query databases</li> <li> <strong>5 Themes</strong> — Tokyo Night, Dracula, Nord, Cyberpunk, Ocean Deep</li> </ul> <p>And if you're a developer, you can build your own with the public SDK.</p> <h2> More Screenshots </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq87rynptr9ca3o06iem.png" alt="File browsing with split view" width="800" height="512"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxx5ueto6s2za6xv0zz8.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxx5ueto6s2za6xv0zz8.png" alt="Rich file previews — code, images, PDFs, 3D models" width="800" height="568"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01fwzjkv6jxbv0vt0feg.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01fwzjkv6jxbv0vt0feg.png" alt="AI chat assistant built right in" width="800" height="483"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5oriz471tng7b92gs1s.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5oriz471tng7b92gs1s.png" alt="Git integration in the bottom panel" width="800" height="326"></a></p> <h2> Built With </h2> <ul> <li> <strong>Tauri 2 + Rust</strong> — 10x smaller than Electron, native speed</li> <li> <strong>React 18</strong> — modern UI with hooks</li> <li> <strong>AI</strong> — works with Ollama (free/local), Claude, OpenAI, Gemini, DeepSeek, Mistral</li> <li>Runs on <strong>macOS, Windows, and Linux</strong> </li> </ul> <h2> Try It </h2> <p>This is an alpha release — it's fully functional but expect rough edges. Back up important files before going wild with file operations.</p> <p><strong>Download</strong>: <a href="https://github.com/kimlimjustin/xplorer/releases" rel="noopener noreferrer">github.com/kimlimjustin/xplorer/releases</a></p> <p><strong>Source code</strong>: <a href="https://github.com/kimlimjustin/xplorer" rel="noopener noreferrer">github.com/kimlimjustin/xplorer</a> (AGPL-3.0)</p> <p><strong>Extension marketplace</strong>: <a href="https://xplorer.space" rel="noopener noreferrer">xplorer.space</a></p> <p>If you like it, a star on GitHub or a <a href="https://github.com/sponsors/kimlimjustin" rel="noopener noreferrer">sponsorship</a> would mean the world to me.</p> <p><em>Back years ago I posted <a href="https://dev.to/kimlimjustin/i-wrote-a-fully-functioning-file-explorer-using-typescript-1e4n">I wrote a fully functioning File Explorer using TypeScript</a>. That was the version I built when I learn programming. This is the sequel — rewritten from scratch in Rust with AI superpowers.</em></p> ai rust react showdev Justin Maximillian Kimlim Mon, 22 Nov 2021 12:50:22 +0000 https://forem.com/kimlimjustin/xplorer-a-modern-file-explorer-that-was-written-using-typescript-has-its-performance-improved-on-the-recent-release-4f99 https://forem.com/kimlimjustin/xplorer-a-modern-file-explorer-that-was-written-using-typescript-has-its-performance-improved-on-the-recent-release-4f99 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk2o0ygyjvsz2sw61vlu.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk2o0ygyjvsz2sw61vlu.png" alt="Xplorer dark"></a></p> <p>Hello devs!</p> <p>About two months ago, I released the first version of Xplorer and wrote a post about it which makes both of the blog and the repository went into trending 🚀. Thanks a lot for it. <em>Please read this blog before continue reading</em></p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/i-wrote-a-fully-functioning-file-explorer-using-typescript-1e4n" class="ltag__link__link"> <div class="ltag__link__content"> <h2>I wrote a fully-functioning File Explorer, using TypeScript.</h2> <h3>Justin Maximillian Kimlim ・ Sep 25 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#typescript</span> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#node</span> <span class="ltag__link__tag">#xplorer</span> </div> </div> </a> </div> <p> <strong>What is Xplorer?</strong> (<em>click to expand</em>) <p>Xplorer is a file explorer built from ground-up to be fully customizable. And even without any customization, it already looks modern!</p> <p>Xplorer is a cross-platform application built using <a href="https://tauri.studio" rel="noopener noreferrer">Tauri</a>, and you can run it on Windows, MacOS, or Linux without having much trouble. One of the key feature is Xplorer allows you to preview the files you have directly inside Xplorer. And it's not only limited to picture or document preview, but also video preview.</p> <p>To summarize, Xplorer's features contain:</p> <ul> <li> It looks modern</li> <li> Easy to use</li> <li> Cross-platform</li> <li> <a href="https://xplorer.vercel.app/docs/guides/operation/#preview-file" rel="noopener noreferrer">File Preview</a>, even for videos!</li> <li> Customizable</li> <li> Supports multiple tab</li> <li> Most importantly, Free and Open Source Software(FOSS), which means you can change components inside if you see fit</li> </ul> <p>Xplorer is currently under heavy development. You can give your suggestions and feedbacks in our <a href="https://github.com/kimlimjustin/xplorer/discussions/" rel="noopener noreferrer">Discussions</a> page. If you feel comfortable in writing code using Typescript and Rust, we highly encourage you to <a href="https://xplorer.vercel.app/community/Contributing/" rel="noopener noreferrer">contribute to this project</a>.</p> </p> <p> <strong>Some Screenshots</strong> (<em>click to expand</em>) <br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fntyptgs99c479xwvcmo6.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fntyptgs99c479xwvcmo6.png" alt="Xplorer on Garuda Linux with Light+ theme"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe6mryvlcbt7szd7gaigp.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe6mryvlcbt7szd7gaigp.png" alt="Xplorer on Windows with Dark+ theme"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8dz9gb8jg1gono0k13ff.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8dz9gb8jg1gono0k13ff.png" alt="Xplorer on macOS with Light+ theme"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F903v4ectksohiuz8ly7k.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F903v4ectksohiuz8ly7k.png" alt="Xplorer on Windows with Dark theme"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fip5fm7y1ecsqa49xbl6m.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fip5fm7y1ecsqa49xbl6m.png" alt="Xplorer on Windows with Light theme"></a> </p> <p>During that period, I received many inputs regarding the performance of Xplorer, I actually realized this when first developing Xplorer and have no clue to improve it because I didn't know any other framework for developing desktop application using JS Stack besides Electron at that time until some people suggesting me using <a href="https://tauri.studio" rel="noopener noreferrer">Tauri</a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4jumrwyqpuziwkecoihu.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4jumrwyqpuziwkecoihu.png" alt="_One of many suggestions_"></a></p> <p>And soon, I tried it and boom 💥! The performance went rocket (although some of the features may be not as fast as the native one) as it now relies on Rust as the backend to handle file operation while it still relies on TypeScript, SCSS, HTML for the frontend. The installer size, memory consumption has drop a lot when the performance increased after migrating it to Tauri.</p> <p>The new version of Xplorer is now a polygot program as it uses Rust for handling file operation while the HTML, SCSS, and TypeScript (which is transpiled to JS and CSS) still maintain the same for the frontend look.</p> <h2> Pros </h2> <ul> <li>Improve performance and memory usage</li> <li>Decrease installer size up to 90%</li> <li>Improve startup speeds (from ∼ 1.52 s to ∼ 1.28 s) (_tested on i7-9700 32GB)</li> <li>Thread safe</li> <li>It's cross platform</li> <li>Non-ASCII drive name supports (thanks to <a href="https://docs.rs/sysinfo/0.21.1/sysinfo/" rel="noopener noreferrer"><code>sysinfo</code></a> crate)</li> </ul> <h2> Cons </h2> <ul> <li>Some features like dragging file from Xplorer to another application has gone as Tauri has no this feature.(<a href="https://github.com/tauri-apps/tauri/issues/2593" rel="noopener noreferrer">https://github.com/tauri-apps/tauri/issues/2593</a>)</li> <li>Opening folder might be slower than on Electron for some cases because Xplorer need to communicate to Rust</li> </ul> <p>Overall, using Tauri is much better than Electron IMO, especially when using the app in less computing capability computers. Also, Tauri also let user to develop cross platform application with webpages (HTML, CSS, JS) just like Electron does but more lightweight.</p> <h2> Another improvement/changes of Xplorer </h2> <ul> <li>Introduce new icon </li> <li>Add ability to continue the previous session on startup 🚀</li> <li>More personalized settings ⚙️</li> <li>Supports previewing almost all programming languages with syntax highlighting 👁️‍🗨️</li> <li>Improve some functions algorithms 🚀</li> </ul> <p><strong>More detailed changelog:</strong> <a href="https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0" rel="noopener noreferrer">https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0</a></p> <h2> Notable features </h2> <ul> <li>File Previewing <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpd1mwdx7t8gyqkg6s0kq.png" alt="Xplorer supports file previewing"> </li> <li>Looks Modern <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo659mi8njqfvggmy46zj.png" alt="Xplorer looks modern"> </li> <li>Support Multiple Tab <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuc9tdctjttgi0a4xc3zk.png" alt="Xplorer support multiple tab"> </li> </ul> <h2> Links </h2> <p>GitHub link: <a href="https://github.com/kimlimjustin/xplorer" rel="noopener noreferrer">https://github.com/kimlimjustin/xplorer</a><br> Documentation site: <a href="https://xplorer.vercel.app" rel="noopener noreferrer">https://xplorer.vercel.app</a><br> Discord: <a href="https://discord.gg/MHGtSWvfUS" rel="noopener noreferrer">https://discord.gg/MHGtSWvfUS</a><br> Install it now: <a href="https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0" rel="noopener noreferrer">https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0</a></p> <p>Any comments will be appreciated, also, don't forget to drop a star on GitHub if you like to :D</p> <p>Happy coding! 🎉</p> typescript showdev rust xplorer Justin Maximillian Kimlim Sat, 25 Sep 2021 13:23:10 +0000 https://forem.com/kimlimjustin/i-wrote-a-fully-functioning-file-explorer-using-typescript-1e4n https://forem.com/kimlimjustin/i-wrote-a-fully-functioning-file-explorer-using-typescript-1e4n <p>I am very happy to introduce <a href="https://xplorer.vercel.app" rel="noopener noreferrer">Xplorer</a> to help you organize your files and/or folders.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fecv6gk12ld5lij18gmeu.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fecv6gk12ld5lij18gmeu.png" alt="Xplorer win"></a></p> <h2> Features </h2> <h3> Designed Out Of The Box </h3> <p>Xplorer is not written on traditional language like C, C++ or C#. It is written on TypeScript, HTML and SCSS, using the Electron framework, this makes Xplorer looks much more modern, and it will support theme customization in the future release. There are four available default themes for now.</p> <h3> Cross Platform </h3> <p>As I mentioned, Xplorer is powered by the web because it's written with the Electron framework, this makes it possible to run Xplorer from any platform.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Windows</th> <th>Garuda Linux</th> <th>macOS Catalina</th> </tr> </thead> <tbody> <tr> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fecv6gk12ld5lij18gmeu.png" alt="Xplorer win"></td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtr9o9gk7qfkc2j3trg1.png" alt="Xplorer linux"></td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg18nvk0d62zglblxcqgi.png" alt="Xplorer mac"></td> </tr> </tbody> </table></div> <h3> File Preview </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3xogjs2c7y4ll6pnw656.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3xogjs2c7y4ll6pnw656.png" alt="preview"></a></p> <p>I know it's quite annoying to open a file and close to search for the correct file users are searching for. Hence, I've implemented this native file preview feature, see available file types to preview <a href="https://xplorer.vercel.app/docs/guides/operation/#preview-file" rel="noopener noreferrer">here</a></p> <h3> Supports Multiple Tabs </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8md5rb848ii9g3u9o4n2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8md5rb848ii9g3u9o4n2.png" alt="support-tabs"></a></p> <p>Xplorer helps you organize your files easier by supporting multiple tabs :)</p> <p>and many others more</p> <h2> Installation </h2> <p>You can reach the installer on <a href="https://xplorer.vercel.app" rel="noopener noreferrer">GitHub release section</a></p> <h2> About </h2> <p>Xplorer is a File Explorer built on TypeScript, focused on modernization and customization. It will support extension just like VSCode does. (thought by the time I write this documentation, the feature to user to auto generate their theme is not done yet, but it will be ASAP).</p> <p>Contributors in need. </p> <h3> Links </h3> <p>GitHub link: <a href="https://github.com/kimlimjustin/xplorer" rel="noopener noreferrer">https://github.com/kimlimjustin/xplorer</a><br> Documentation site: <a href="https://xplorer.vercel.app" rel="noopener noreferrer">https://xplorer.vercel.app</a></p> <h3> Why it was built using TypeScript? </h3> <ul> <li>Typed Secured</li> <li>TypeScript/JavaScript has became the most used language.</li> <li>TypeScript has a very strong community.</li> <li>Can be run in various OSes.</li> <li>You can easily write plugin using TypeScript/JavaScript</li> <li>Modern layouts can be built using the HTML and CSS via Electron.</li> <li>I'm bad at C/C++ xD</li> </ul> <p>Any comments will be appreciated :) Thanks</p> <h2> Happy coding! 🎉 </h2> typescript showdev node xplorer Justin Maximillian Kimlim Sun, 25 Apr 2021 13:03:03 +0000 https://forem.com/kimlimjustin/i-built-doge-theme-of-reddit-using-mern-stack-58hd https://forem.com/kimlimjustin/i-built-doge-theme-of-reddit-using-mern-stack-58hd <p>Hello developers, I've recently created a doge theme version of Reddit, called Dogeit using the MERN Stack (MongoDB, Express JS, React JS, and Node JS).</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/kimlimjustin"> kimlimjustin </a> / <a href="https://github.com/kimlimjustin/dogeit"> dogeit </a> </h2> <h3> 🐶 Doge version of reddit. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> Dogeit</h1> <p>🐶 Doge version of reddit.</p> <p><a rel="noopener noreferrer" href="https://camo.githubusercontent.com/9760b756128c0edc2bf3f6762c49f46fe3329685901a71e2fdb6f0047230bfdc/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3145394d7447534b3647616e5a43344b7a494d674a6b7361334d70797376384450"><img src="https://camo.githubusercontent.com/9760b756128c0edc2bf3f6762c49f46fe3329685901a71e2fdb6f0047230bfdc/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3145394d7447534b3647616e5a43344b7a494d674a6b7361334d70797376384450" alt="Dogeit demo"></a></p> <h2> Local Setup</h2> <ul> <li>Clone this repository or fork it</li> <li>Navigate to <code>client</code> directory <ul> <li>Run <code>yarn</code> or <code>npm i</code>.</li> <li>Create a new file called <code>.env</code> which stores environment variables such as <ul> <li> <code>REACT_APP_SERVER_URL</code>, your server endpoint</li> <li> <code>REACT_APP_GITHUB_CLIENT_ID</code>, your GitHub OAuth Client ID</li> <li> <code>REACT_APP_SECURITY_KEY</code>, a random token used to secure your application</li> </ul> </li> <li>Start application by running <code>npm start</code> or <code>yarn start</code> </li> </ul> </li> <li>Navigate to <code>server</code> directory <ul> <li>Run <code>yarn</code> or <code>npm i</code> </li> <li>Create a new file called <code>.env</code> which stores environment variables such as <ul> <li> <code>GITHUB_CLIENT_ID</code>, your GitHUb OAuth Client ID</li> <li> <code>GITHUB_CLIENT_SECRET</code>, your GitHUB OAuth Client Secret</li> <li> <code>CLIENT_URL</code>, your client endpoint</li> <li> <code>ATLAS_URI</code>, your MongoDB Atlas URI</li> <li> <code>SECURITY_KEY</code>, a random token used to secure your application, note that this token value must be the same as <code>REACT_APP_SECURITY_KEY</code> value in <code>client/.env</code> file</li> <li> <code>EMAIL_ADDRESS</code>, Your Email Address</li> <li> <code>EMAIL_PROVIDER</code>, Your Email Provider</li> <li> <code>EMAIL_PASS</code>…</li> </ul> </li> </ul> </li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/kimlimjustin/dogeit">View on GitHub</a></div> </div> <p>Any comments will be appreciated :)</p> <h3> If you like this project, be sure to drop a star on GitHub 🌟! </h3> <h2> Happy coding! </h2> <p>You might also like these articles:</p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k" class="ltag__link__link"> <div class="ltag__link__content"> <h2>3 Good quality apps for windows to make your computer seems modern</h2> <h3>Justin Maximillian Kimlim ・ Mar 14 '21 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#productivity</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#github</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>My personal website built using HTML, CSS, and vanilla JavaScript</h2> <h3>Justin Maximillian Kimlim ・ Mar 18 '21 ・ 1 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#portfolio</span> <span class="ltag__link__tag">#css</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> Justin Maximillian Kimlim Wed, 24 Mar 2021 13:46:02 +0000 https://forem.com/kimlimjustin/good-quality-apps-for-windows-to-make-your-computers-seem-modern-sequel-30gf https://forem.com/kimlimjustin/good-quality-apps-for-windows-to-make-your-computers-seem-modern-sequel-30gf <p>Are you bored with the layout of windows apps? Try to make your computer modern with these open-source applications!</p> <p>Before going through, this post is a continuance from the previous post I made, you can read it here:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k" class="ltag__link__link"> <div class="ltag__link__content"> <h2>3 Good quality apps for windows to make your computer seems modern</h2> <h3>Justin Maximillian Kimlim ・ Mar 14 '21 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#productivity</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#github</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> <p>1. Notepads<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2j-LC1yl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo6vmw71z5pjonp5pfbb.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2j-LC1yl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo6vmw71z5pjonp5pfbb.png" alt="Notepads Demo" width="880" height="688"></a></p> <p>Notepads (Notepad Sets) is a modern, lightweight text editor with a minimalist design. Notepads has the following features:</p> <ul> <li>Fluent design with a built-in tab system.</li> <li>Blazingly fast and lightweight.</li> <li>Launch from the command line or PowerShell by typing: notepads or notepads %FilePath%.</li> <li>Multi-line handwriting support.</li> <li>Built-in Markdown live preview.</li> <li>Built-in diff viewer (preview your changes).</li> <li>Session snapshot and multi-instances.</li> </ul> <p>Documentation site: <a href="https://www.notepadsapp.com/">https://www.notepadsapp.com/</a><br> GitHub link: <a href="https://github.com/JasonStein/Notepads">https://github.com/JasonStein/Notepads</a><br> Get it from Microsoft Store: <a href="https://www.microsoft.com/en-id/p/notepads-app/9nhl4nsc67wm?rtc=1">https://www.microsoft.com/en-id/p/notepads-app/9nhl4nsc67wm?rtc=1</a></p> <p>2. Fluent Terminal<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--z1lCohxR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gwz7gmem0noe4oqknp8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--z1lCohxR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gwz7gmem0noe4oqknp8.png" alt="Alt Text" width="880" height="645"></a><br> The fluent terminal is a terminal emulator based on UWP and web technologies with a good design. Fluent terminal has some features such as multiple tabs and windows, import and export themes, and others. You can find out the whole features <a href="https://github.com/felixse/FluentTerminal">here</a>.</p> <p>GitHub link: <a href="https://github.com/felixse/FluentTerminal">https://github.com/felixse/FluentTerminal</a><br> Get it from Microsoft Store: <a href="https://www.microsoft.com/store/apps/9p2krlmfxf9t?cid=storebadge&amp;ocid=badge">https://www.microsoft.com/store/apps/9p2krlmfxf9t?cid=storebadge&amp;ocid=badge</a></p> <p>3. ImageGlass</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lRm-ZAmQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnm74qt90dpbwmbkhj1m.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lRm-ZAmQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnm74qt90dpbwmbkhj1m.png" alt="ImageGlass" width="880" height="549"></a></p> <p>ImageGlass is a lightweight software application that targetting to help you view images in a clean and intuitive working environment.</p> <p>Documentation site: <a href="https://imageglass.org/">https://imageglass.org/</a><br> GitHub link: <a href="https://github.com/d2phap/ImageGlass">https://github.com/d2phap/ImageGlass</a><br> Download it here: <a href="https://imageglass.org/release/imageglass-8-0-12-8-kobe-30#downloads">https://imageglass.org/release/imageglass-8-0-12-8-kobe-30#downloads</a></p> <p>Please star this article and share it if you like it :)</p> <h2> Happy Coding! 🎉 </h2> <p>You might also like these articles:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k" class="ltag__link__link"> <div class="ltag__link__content"> <h2>3 Good quality apps for windows to make your computer seems modern</h2> <h3>Justin Maximillian Kimlim ・ Mar 14 '21 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#productivity</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#github</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>My personal website built using HTML, CSS, and vanilla JavaScript</h2> <h3>Justin Maximillian Kimlim ・ Mar 18 '21 ・ 1 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#portfolio</span> <span class="ltag__link__tag">#css</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIXr74Hg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--Gj1-08zY--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/510950/a4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21 ・ 2 min read</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> productivity webdev github showdev Justin Maximillian Kimlim Thu, 18 Mar 2021 12:43:39 +0000 https://forem.com/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd https://forem.com/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd <p>Hello, developers! 👋 <br> I've recently created a <a href="https://kimlimjustin.github.io" rel="noopener noreferrer">personal website</a> using HTML, CSS, vanilla JavaScript, and looking for any feedback for my personal website.</p> <p>link: <a href="https://kimlimjustin.github.io" rel="noopener noreferrer">https://kimlimjustin.github.io</a></p> <p>Feature my personal website has:</p> <ul> <li>Loading animation using CSS</li> <li>Animate on scroll using AOS library</li> <li>Recent blog from dev.to using <a href="https://docs.forem.com/api/" rel="noopener noreferrer">DEV API</a> </li> <li>Theme and light themes</li> <li>A terminal simulator built using Vanilla JavaScript</li> </ul> <p>My website is also open source, here's the link of its code: <a href="https://github.com/kimlimjustin/kimlimjustin.github.io" rel="noopener noreferrer">https://github.com/kimlimjustin/kimlimjustin.github.io</a></p> <p>Any comments will be appreciated :) Thanks</p> <h2> Happy coding! 🎉 </h2> <p>You might also like these articles:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Google Forms Clone with Django and Vanilla Javascript</h2> <h3>Justin Maximillian Kimlim ・ Dec 2 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#django</span> <span class="ltag__link__tag">#javascript</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k" class="ltag__link__link"> <div class="ltag__link__content"> <h2>3 Good quality apps for windows to make your computer seems modern</h2> <h3>Justin Maximillian Kimlim ・ Mar 14 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#productivity</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#github</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/whatsapp-clone-with-mern-stack-mongodb-express-react-node-12pd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Whatsapp clone with MERN stack (Mongodb, Express, React, Node)</h2> <h3>Justin Maximillian Kimlim ・ Nov 11 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#node</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> showdev webdev portfolio css Justin Maximillian Kimlim Sun, 14 Mar 2021 12:55:39 +0000 https://forem.com/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k https://forem.com/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k <p>Are you bored with the layout of windows apps? Try to make your computer modern with these three open-source applications!</p> <p>Before going through, here's a video of these three applications:</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozqpurc6duzoq4v4b1wv.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozqpurc6duzoq4v4b1wv.gif" alt="Alt Text"></a></p> <ol> <li>Xplorer <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpsxeztbtyxxpt124wrn.png" alt="Xplorer win"> </li> </ol> <p>Xplorer is a file explorer built from ground-up to be fully customizable and without customization, it also looks modern!<br> It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike.<br> It also allowed file preview directly inside it, not only pictures or documents, but also videos!</p> <p>So to summary, Xplorer's features contain:</p> <ul> <li> Looks modern</li> <li> Easy to use</li> <li> Cross-platform</li> <li> File Preview, even videos!</li> <li> Most importantly, FOSS, Free and Open Source, which mean you can change components inside if you see fit</li> </ul> <p>Documentation site: <a href="https://xplorer.vercel.app" rel="noopener noreferrer">https://xplorer.vercel.app</a><br> GitHub link: <a href="https://github.com/kimlimjustin/xplorer" rel="noopener noreferrer">https://github.com/kimlimjustin/xplorer</a></p> <ol> <li>Modern Flyout <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj3lazyv88gh8mez7puoc.png" alt="Modern Flyout)"> Modern Flyout is an open-source, modern, and Fluent Design-based replacement for the old Metro-themed flyouts present in Windows 10. This application aims to provide a Fluent Design System based replacement for the old, built-in, Metro Design based Audio/Airplane mode/Brightness flyouts present in Windows.</li> </ol> <p>Documentation site: <a href="https://modernflyouts-community.github.io/" rel="noopener noreferrer">https://modernflyouts-community.github.io/</a><br> GitHub link: <a href="https://github.com/ModernFlyouts-Community/ModernFlyouts" rel="noopener noreferrer">https://github.com/ModernFlyouts-Community/ModernFlyouts</a><br> Get it from Microsoft Store: <a href="https://www.microsoft.com/store/apps/9MT60QV066RP?ocid=badge" rel="noopener noreferrer">https://www.microsoft.com/store/apps/9MT60QV066RP?ocid=badge</a></p> <ol> <li>Lively Wallpaper <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxge1eivu0q7st4vj07i.gif" alt="wallpaper_video"> </li> </ol> <p>Lively is a Free and Open-Source Software (FOSS) for animated desktop wallpapers. Lively turn Video &amp; GIF Files, Emulators, HTML, Web address &amp; Shaders, Games into Windows desktop wallpaper or screensavers; Wallpapers will completely pause playback( 0% cpu &amp; gpu usage) when fullscreen application/games are running.</p> <p>Documentation site: <a href="https://rocksdanister.github.io/lively/" rel="noopener noreferrer">https://rocksdanister.github.io/lively/</a><br> GitHub link: <a href="https://github.com/rocksdanister/lively" rel="noopener noreferrer">https://github.com/rocksdanister/lively</a><br> Get it from Microsoft Store: <a href="https://www.microsoft.com/store/apps/9NTM2QC6QWS7?cid=storebadge&amp;ocid=badge" rel="noopener noreferrer">https://www.microsoft.com/store/apps/9NTM2QC6QWS7?cid=storebadge&amp;ocid=badge</a></p> <p>Please star this article and share it if you like it :)</p> <h3> Happy Coding! 🎉 </h3> <p>You might also like these articles:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/google-keep-clone-with-django-and-vanilla-javascript-4pnl" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Google Keep Clone with Django and Vanilla JavaScript</h2> <h3>Justin Maximillian Kimlim ・ Mar 6 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#django</span> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#webdev</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Google Forms Clone with Django and Vanilla Javascript</h2> <h3>Justin Maximillian Kimlim ・ Dec 2 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#django</span> <span class="ltag__link__tag">#javascript</span> </div> </div> </a> </div> productivity webdev github showdev Justin Maximillian Kimlim Sat, 06 Mar 2021 13:23:05 +0000 https://forem.com/kimlimjustin/google-keep-clone-with-django-and-vanilla-javascript-4pnl https://forem.com/kimlimjustin/google-keep-clone-with-django-and-vanilla-javascript-4pnl <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Theme / View</th> <th>Light Theme</th> <th>Dark Theme</th> </tr> </thead> <tbody> <tr> <td>Grid</td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3j5lq2l34jsaak9w7z8u.png" alt="Google Keeps Clone demo"></td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvxmtcgu17lepvvwjwfjp.png" alt="Google Keeps Clone demo"></td> </tr> <tr> <td>List</td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkj69ldlzdzfgk81f9fd.png" alt="Google Keeps Clone demo"></td> <td><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7zx64ygtuanflsa6gmw3.png" alt="Google Keeps Clone demo"></td> </tr> </tbody> </table></div> <p>Try it online <a href="https://google-keeps-clone.herokuapp.com/" rel="noopener noreferrer">here</a>!</p> <p><a href="https://google-keeps-clone.herokuapp.com/" rel="noopener noreferrer">Google Keep Clone</a> is an easy-to-use open-source application built using Django and Vanilla JavaSCript technologies and distributed under the <a href="https://github.com/kimlimjustin/google-keep-clone/blob/master/LICENSE" rel="noopener noreferrer">MIT license</a>.</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/kimlimjustin" rel="noopener noreferrer"> kimlimjustin </a> / <a href="https://github.com/kimlimjustin/google-keep-clone" rel="noopener noreferrer"> google-keep-clone </a> </h2> <h3> Clone of Google Keep built using Django and Javascript </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Google Keep Clone</h1> </div> <p>Try it online <a href="https://google-keeps-clone.herokuapp.com/" rel="nofollow noopener noreferrer">here</a>!</p> <div class="markdown-heading"> <h3 class="heading-element">Demo</h3> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Theme / View</th> <th>Light Theme</th> <th>Dark Theme</th> </tr> </thead> <tbody> <tr> <td>Grid</td> <td><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d5ca2f6cd64f4eb7ae4cfea205a81bdbd1a939fea4b8865ad59709d1090cb25e/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31685a3943755a575a4b6c4b712d34766c584a6a6733755164644c756267735156"><img src="https://camo.githubusercontent.com/d5ca2f6cd64f4eb7ae4cfea205a81bdbd1a939fea4b8865ad59709d1090cb25e/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31685a3943755a575a4b6c4b712d34766c584a6a6733755164644c756267735156" alt="Google Keeps Clone demo"></a></td> <td><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/80b0ef852f4bf15db39e4fdbae8bae08ebc32a64c7b594e26e16d6dc10210971/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31453856432d55784746725239355065466264574178643078546334675f436d73"><img src="https://camo.githubusercontent.com/80b0ef852f4bf15db39e4fdbae8bae08ebc32a64c7b594e26e16d6dc10210971/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31453856432d55784746725239355065466264574178643078546334675f436d73" alt="Google Keeps Clone demo"></a></td> </tr> <tr> <td>List</td> <td><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/26aabecf8f992ce8eafabe63804cdcf3f76c2e551d215ac796960b991a773d90/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31424446584e59646e4f567430426e30724668666a74553732415a314a676c7959"><img src="https://camo.githubusercontent.com/26aabecf8f992ce8eafabe63804cdcf3f76c2e551d215ac796960b991a773d90/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31424446584e59646e4f567430426e30724668666a74553732415a314a676c7959" alt="Google Keeps Clone demo"></a></td> <td><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2beadda88fa74c3e81977514735b825c7de2d04a1a0c9eef51f22618d042d5cf/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31584130634366442d704f766b5a71576d78626f704b65795542576b6e75333130"><img src="https://camo.githubusercontent.com/2beadda88fa74c3e81977514735b825c7de2d04a1a0c9eef51f22618d042d5cf/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31584130634366442d704f766b5a71576d78626f704b65795542576b6e75333130" alt="Google Keeps Clone demo"></a></td> </tr> </tbody> </table></div> <div class="markdown-heading"> <h6 class="heading-element">For the best experience, please use a device with a width of at least 350px</h6> </div> <div class="markdown-heading"> <h2 class="heading-element">Built using:</h2> </div> <ul> <li>Python with Django framework and Jinja templating language</li> <li>Vanilla JavaScript</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Getting started:</h2> </div> <ul> <li>Clone this repository or fork it <ul> <li>To clone this repository, type <code>git clone https://github.com/kimlimjustin/google-keep-clone.git</code> on your terminal</li> <li>To fork this repository, click fork button of this repository then type <code>git clone https://github.com/&lt;your username&gt;/google-keep-clone.git</code> </li> </ul> </li> <li>Install all the dependencies of this project by typing <code>pip install -r requirements.txt</code> on your terminal.</li> <li>Migrate the database by typing <code>python manage.py migrate</code> on the terminal.</li> <li>Run this project <ul> <li>Run the project locally by typing <code>python manage.py runserver</code> on the terminal and it will be accessible in your localhost.</li> <li>To run it on your local network, type <code>python manage.py runserver 0.0.0.0:8000</code> and it will be accessible in your local…</li> </ul> </li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/kimlimjustin/google-keep-clone" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>GitHub link: <a href="https://github.com/kimlimjustin/google-keep-clone" rel="noopener noreferrer">https://github.com/kimlimjustin/google-keep-clone</a><br> Try it online: <a href="https://google-keeps-clone.herokuapp.com/" rel="noopener noreferrer">https://google-keeps-clone.herokuapp.com/</a></p> <h3> If you like this project, be sure to drop a star on GitHub 🌟! </h3> <h2> Happy coding! </h2> <p>You might also like these articles:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Google Forms Clone with Django and Vanilla Javascript</h2> <h3>Justin Maximillian Kimlim ・ Dec 2 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#django</span> <span class="ltag__link__tag">#javascript</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/whatsapp-clone-with-mern-stack-mongodb-express-react-node-12pd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Whatsapp clone with MERN stack (Mongodb, Express, React, Node)</h2> <h3>Justin Maximillian Kimlim ・ Nov 11 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#node</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> showdev django javascript webdev Justin Maximillian Kimlim Thu, 04 Mar 2021 12:52:06 +0000 https://forem.com/kimlimjustin/development-progress-of-abstractmark-the-modern-markup-language-22ae https://forem.com/kimlimjustin/development-progress-of-abstractmark-the-modern-markup-language-22ae <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpnn4c60n8n5ikp4ic0xw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpnn4c60n8n5ikp4ic0xw.png" alt="Alt Text"></a></p> <h1> Quick overview of AbstractMark </h1> <p>In short, AbstractMark is the next generation of markdown language which inherits markdown language to be simple but with more features like the styling to build a modern website. Despite being simple, you can build modern web pages using it! Indeed, the <a href="https://abstractmark.netlify.app/" rel="noopener noreferrer">AbstractMark Documentation Site</a> is built using AbstractMark itself.</p> <p>For more information about AbstractMark, you can visit this previous blog about AbstractMark.<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> <br> Otherwise, you can visit our <a href="https://abstractmark.netlify.app/" rel="noopener noreferrer">documentation website</a>. <h2> Links 🔗 </h2> <ul> <li><a href="https://abstractmark.netlify.app/" rel="noopener noreferrer">AbstractMark documentation site</a></li> <li><a href="https://github.com/abstractmark/abstractmark" rel="noopener noreferrer">GitHub</a></li> <li><a href="https://abstractmark.netlify.app/playground" rel="noopener noreferrer">AbstractMark Playground</a></li> <li><a href="https://abstractmark.netlify.app/syntax" rel="noopener noreferrer">AbstractMark Syntax Guide</a></li> <li><a href="https://abstractmark.netlify.app/cheatsheet" rel="noopener noreferrer">AbstractMark Cheatsheet</a></li> </ul> <h1> Current Development Progress 💻 </h1> <p>For now, AbstractMark has been implemented on JavaScript and is being implemented on Python. Version 0.1.1 of JavaScript implementation has been released and available on <a href="https://www.npmjs.com/package/@abstractmark/abstractmark" rel="noopener noreferrer">npm</a> while Python implementation is still in early development progress.</p> <p>Surely we will expand AbstractMark into another language, but of course, with your help. AbstractMark not only needs contributors but also maintainers!</p> <h2> JavaScript Implementation Progress </h2> <p>All of the AbstractMark syntaxes had been implemented on JavaScript. This implementation progress is regularly maintained too! The current version is v0.1.1. Version 0.1.1 is a version that fixed typography and spacing bugs from the previous version, v0.1.0. Version 0.1.1 of AbstractMark includes the following features:<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcjt9rcf84dbfzyf8u1t2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcjt9rcf84dbfzyf8u1t2.png" alt="Features available on version 0.1.1"></a></p> <p>Also, AbstractMark CLI had been implemented on the JavaScript version. You can install AbstractMark CLI by typing <code>npm i @abstractmark/abstractmark -g</code> on your terminal. For further information about AbstractMark CLI, please visit this <a href="https://abstractmark.netlify.app/cli" rel="noopener noreferrer">documentation</a></p> <h2> Python Implementation Progress </h2> <p>Python implementation progress is still in early development progress. We will write a new post after AbstractMark implemented on Python, stay tuned!</p> <p>Any comments or contributions or even star <a href="https://github.com/abstractmark/abstractmark" rel="noopener noreferrer">this repository</a> is much appreciated.</p> <h3> Happy Coding! 🎉 </h3> <p>You might also like these articles:<br> </p> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1" class="ltag__link__link"> <div class="ltag__link__content"> <h2>AbstractMark, the modern markdown language.</h2> <h3>Justin Maximillian Kimlim ・ Feb 15 '21</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#markdown</span> <span class="ltag__link__tag">#abstractmark</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Google Forms Clone with Django and Vanilla Javascript</h2> <h3>Justin Maximillian Kimlim ・ Dec 2 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#showdev</span> <span class="ltag__link__tag">#django</span> <span class="ltag__link__tag">#javascript</span> </div> </div> </a> </div> <div class="ltag__link"> <a href="/kimlimjustin" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F510950%2Fa4dfddf4-687c-498a-95f6-0a355bc05446.png" alt="kimlimjustin"> </div> </a> <a href="/kimlimjustin/whatsapp-clone-with-mern-stack-mongodb-express-react-node-12pd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Whatsapp clone with MERN stack (Mongodb, Express, React, Node)</h2> <h3>Justin Maximillian Kimlim ・ Nov 11 '20</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#javascript</span> <span class="ltag__link__tag">#node</span> <span class="ltag__link__tag">#showdev</span> </div> </div> </a> </div> javascript showdev markdown abstractmark Justin Maximillian Kimlim Mon, 15 Feb 2021 14:04:55 +0000 https://forem.com/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 https://forem.com/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu8ds2sc2je7yr24snruh.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu8ds2sc2je7yr24snruh.png" alt="Alt Text"></a></p> <h1> Introduction </h1> <p>Have you ever considered creating a website or post with custom CSS styling and even more features and keep the source as clean as traditional Markdown language? If you are, AbstractMark will be a good markup language for you! Indeed, you'll be able to create a well-designed website just by using AbstractMark itself!</p> <p>AbstractMark is a lightweight markup language designed to inherit the traditional syntax and add supports for styling website and using a constant syntax (which means in most cases, there'd be only one syntax, ex: there's only one way to bold a text, <code>**Bold text**</code>).</p> <blockquote> <p>FYI, AbstractMark is different from <a href="https://en.wikipedia.org/wiki/WYSIWYG" rel="noopener noreferrer">WYSIWYG</a> editor. AbstractMark inherited from Markdown to use AbstractMark-formatted file which are <code>.am</code> and <code>.abstractmark</code> extended file.</p> </blockquote> <h1> Quick Start: </h1> <p>For now, which is the early development progress for JavaScript Implementation, you can both try it on <a href="https://abstractmark.netlify.app/playground" rel="noopener noreferrer">our playground</a> and AbstractMark CLI by installing AbstractMark globally on npm package manager which is documented <a href="https://github.com/abstractmark/javascript#abstractmark-cli" rel="noopener noreferrer">here</a>.</p> <h1> Overview </h1> <p>Overview of AbstractMark syntaxes that are not supported in traditional markdown language</p> <ul> <li> <p>Class</p> <ul> <li>Defining class and its styles which are CSS-based. </li> </ul> <pre class="highlight plaintext"><code>---define .className{ //styles here } .otherClass{ //Other styles here } </code></pre> <ul> <li>Using class on an element </li> </ul> <pre class="highlight plaintext"><code>Element {.className} </code></pre> <p>For example: <code># Heading {.className}</code></p> </li> <li><p>Inline style<br><br> <code>element {key: value}</code>, example: <code># Hello World {color:red}</code></p></li> <li><p>External stylesheet<br><br> <code>stylesheet: (stylesheet link)</code></p></li> <li><p>External JavaScript<br><br> <code>script: (external script link)</code></p></li> </ul> <h1> Links </h1> <p>GitHub: <a href="https://github.com/abstractmark" rel="noopener noreferrer">https://github.com/abstractmark</a><br> Documentation site (in progress): <a href="https://abstractmark.netlify.app/" rel="noopener noreferrer">https://abstractmark.netlify.app/</a><br> Playground: <a href="https://abstractmark.netlify.app/playground" rel="noopener noreferrer">https://abstractmark.netlify.app/playground</a><br> Cheatsheet: <a href="https://abstractmark.netlify.app/cheatsheet" rel="noopener noreferrer">https://abstractmark.netlify.app/cheatsheet</a></p> <h1> Development Progress </h1> <p>For now, AbstractMark has been implemented on JavaScript language and released its beta version, besides, CLI has been built on top of JavaScript is available now. Of course, we'll implement it in other languages, but we need not only contributors but also maintainers! Please <a href="https://github.com/abstractmark" rel="noopener noreferrer">reach us</a> if you are interested. Development progress will be also posted as a blog monthly on dev.to :) Stay tuned!</p> <p>Please drop a star on GitHub or consider using it if you like to :)</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/abstractmark" rel="noopener noreferrer"> abstractmark </a> / <a href="https://github.com/abstractmark/abstractmark" rel="noopener noreferrer"> abstractmark </a> </h2> <h3> Next level generation of markdown, allowing users to add styling, classes, and more into their markdown. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">AbstractMark</h1> </div> <p>Next level generation of markdown, allowing user to add styling, classes and more into their markdown.</p> <div> <p><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/46d2e5090edcebee245288ef063271adf5d01f5e6d36c86c00a74cec36765731/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3150534f7434543743564f42677462435761306d335942596a6f6a6c465a582d55"><img src="https://camo.githubusercontent.com/46d2e5090edcebee245288ef063271adf5d01f5e6d36c86c00a74cec36765731/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3150534f7434543743564f42677462435761306d335942596a6f6a6c465a582d55" alt="AbstractMark Logo"></a></p> </div> <div class="markdown-heading"> <h2 class="heading-element">Table of Contents</h2> </div> <ul> <li><a href="https://github.com/abstractmark/abstractmark#introduction" rel="noopener noreferrer">Introduction</a></li> <li><a href="https://github.com/abstractmark/abstractmark#syntax" rel="noopener noreferrer">Syntax</a></li> <li><a href="https://github.com/abstractmark/abstractmark#license" rel="noopener noreferrer">License</a></li> <li><a href="https://github.com/abstractmark/abstractmark#code-of-conduct" rel="noopener noreferrer">Code of conducts</a></li> <li><a href="https://github.com/abstractmark/abstractmark#contributing-guidelines" rel="noopener noreferrer">Contributing Guidelines</a></li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Introduction</h2> </div> <p>AbstractMark is next level markup language extended from markdown that supports styling, classes and more. AbstrackMark allows user to create a well-designed website using an easy-to-read and easy-to-write plain text format, then convert it to valid HTML or markdown file. AbstrackMark is still on development progress. AbstractMark will be implemented on various programming language soon (contributors needed). File extension for AbstractMark will be <code>.abstrackmark</code> and <code>.am</code>. AbstractMark documentation <a href="https://abstractmark.netlify.app" rel="nofollow noopener noreferrer">here</a></p> <div class="markdown-heading"> <h2 class="heading-element">Implementation</h2> </div> <ul> <li><a href="https://github.com/abstractmark/javascript" rel="noopener noreferrer">JavaScript</a></li> <li><a href="https://github.com/abstractmark/python" rel="noopener noreferrer">Python</a></li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Syntax</h2> </div> <p>AbstractMark Syntax Documentation <a href="https://abstractmark.netlify.app/syntax" rel="nofollow noopener noreferrer">Here</a></p> <div class="markdown-heading"> <h2 class="heading-element">Code of Conduct</h2> </div> <p>For the Code of Conduct, please visit <a href="https://github.com/abstractmark/abstractmarkCODE_OF_CONDUCT.md" rel="noopener noreferrer">CODE_OF_CONDUCT.md</a></p> <div class="markdown-heading"> <h2 class="heading-element">Contributing Guidelines</h2> </div> <p>Thanks for your interest in contributing to AbstractMark! Please take a moment to review this <a href="https://github.com/abstractmark/abstractmarkCONTRIBUTING.md" rel="noopener noreferrer">document</a></p> <div class="markdown-heading"> <h2 class="heading-element">License</h2> </div> <p>AbstractMark is distributed under <a href="https://github.com/abstractmark/abstractmarkLICENSE" rel="noopener noreferrer">MIT License</a></p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/abstractmark/abstractmark" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> javascript markdown abstractmark