Update(cde): pull fresh content from stackbit

Author: killshot13

package-lock.json

@@ -7,7 +7,7 @@ excerpt: >-
   nearly a year...
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--mS00IFfr--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73suok4xhx023jic9t21.jpg
-comments_count: 2
+comments_count: 3
 positive_reactions_count: 5
 tags:
   - github

src/pages/posts/discussions-1n5b.md

@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--U2LLP4Iw--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de3p75v2w0yfb2sxcgpy.jpg
 comments_count: 5
-positive_reactions_count: 227
+positive_reactions_count: 233
 tags:
   - tutorial
   - node
@@ -24,7 +24,7 @@ Recently I had the opportunity to develop and integrate an SMTP Email Server int
 
 We'll primarily be using Express and Node to create this server. We’ll also integrate Nodemailer to construct a mailable object and Gmail SMTP Server to deliver our emails free of charge.
 
-The full codebase can be viewed here:
+The complete codebase can be viewed here:
 
 ---
 
@@ -48,7 +48,7 @@ Before we start coding, we should quantify the expected functionality of our Exp
 
 5. *Obtain authorization* from Gmail using credentials stored in the server.
 
-6. *Call the transport function*, prompting Nodemailer to handoff the email object to the Gmail SMTP Server for delivery.
+6. *Call the transport function*, prompting Nodemailer to hand off the email object to the Gmail SMTP Server for delivery.
 
 7. *Request confirmation* of successful delivery and return an error message if not received.
 
@@ -80,7 +80,7 @@ The production version of the server we are building today powers the backend of
 
 >Some developers, including myself, prefer to use [nvm](https://github.com/nvm-sh/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows) to simplify Node version management, which is perfectly fine.
 >
->For further reference you can check out also [How To Use Multiple Node Versions With NVM On MacOS - Node Version Manager](https://daily.dev/posts/how-to-use-multiple-node-versions-with-nvm-on-macos-node-version-manager)
+>For further reference, you can check out also [How To Use Multiple Node Versions With NVM On MacOS - Node Version Manager](https://daily.dev/posts/how-to-use-multiple-node-versions-with-nvm-on-macos-node-version-manager)
 
 ---
 

src/pages/posts/how-to-build-an-smtp-mail-server-with-express-node-and-gmail-aof.md

@@ -0,0 +1,229 @@
+---
+stackbit_url_path: posts/mdeditor-for-vscode-16nn
+title: mdEditor (for VSCode)
+date: '2021-06-28T16:12:41.414Z'
+excerpt: >-
+  Table of Contents    Overview Features Prerequisites Installation Usage
+  Credits             ...
+thumb_img_path: >-
+  https://res.cloudinary.com/practicaldev/image/fetch/s--4OnHOVW_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guqx0sw882p4q2bxyiq5.png
+comments_count: 0
+positive_reactions_count: 2
+tags:
+  - markdown
+  - news
+  - opensource
+  - showdev
+canonical_url: 'https://dev.to/killshot13/mdeditor-for-vscode-16nn'
+template: post
+---
+## Table of Contents
+
+- [Overview](# overview)
+- [Features](# features)
+- [Prerequisites](# prerequisites)
+- [Installation](# installation)
+- [Usage](# usage)
+- [Credits](# references)
+
+---
+
+## Overview (TL;DR) <a name = "overview"></a>
+
+In a nutshell, mdEditor is a VS Code Workspace that can be installed from GitHub. It creates a sort of self-contained Markdown environment on your local machine. 
+
+mdEditor provides the configuration guidelines and creates the structure for an awesome VSCode Markdown editor. By creating a reusable Code-Workspace, the main portion of your IDE environment is protected from rule conflicts.
+
+---
+
+## Features <a name = "features"></a>
+
+1. The Code-Workspace, once opened with VS Code, loads everything you need for importing, exporting, linting, custom rulesets, automatic styling, and file conversion --> PDF, DOCX, and HTML.
+
+2. The syntax rules allow for the enforcement of any markdown flavor with a simple on/off option for each rule.
+
+3. The linter looks for errors/problems and immediately flags them. A detailed explanation and reference link will appear on hover.
+
+4. The auto-fix feature is enabled by default to run each time a file is saved. This formats your Markdown using the enabled rules, which corrects most errors automatically with no manual edits needed.
+
+5. The file conversion tool uses an extension to integrate Pandoc with VS Code. With a simple key-binding (
+`CTRL + K`
+, 
+`P`
+), you can create 
+`.pdf`
+, 
+`.docx`
+, and 
+`.html`
+ files from Markdown, after which the new files can be viewed immediately and/or exported elsewhere.
+
+6. The default stylesheet is applied during file conversion, ensuring  uniformity and consistency in the output. You can apply custom styles using CSS to achieve the desired appearance of the converted files.
+
+---
+
+## Prerequisites <a name = "prerequisites"></a>
+
+**[Visual Studio Code](https://code.visualstudio.com/Download)**
+This should be self-explanatory.
+
+**[Pandoc](http://pandoc.org/installing.html)**
+This may require some guidance if you don't currently use Pandoc. I wrote a gist to help first-time users; here is [the link](https://gist.github.com/killshot13/5b379355d275e79a5cb1f03c841c7d53).
+
+---
+
+### Installation <a name = "installation"></a>
+
+mdEditor can be installed using the simple guide you are reading now, which paraphrases the README.md file from the [main repository](https://github.com/killshot13/mdEditor).
+
+
+<iframe class="liquidTag" src="https://dev.to/embed/github?args=killshot13%2FmdEditor%20no-readme" style="border: 0; width: 100%;"></iframe>
+
+
+Decide where the root directory of the editor is going to live on your local drive (reference [Overview](# overview) for details), then clone [mdEditor](https://github.com/killshot13/mdEditor.git) to that location.
+
+Now, open mdEditor at the base directory using VSCode. Your IDE will auto-discover the 
+`.code-workspace`
+ file and prompt you to reopen the folder as a workspace. 
+
+Confirm this choice, unless you want a different configuration. If so, there is a blank 
+`settings.json`
+ in the 
+`.vscode`
+ folder for you. Otherwise, just delete that file to avoid confusion.
+
+Once open, you should receive another prompt to install the recommended VS Code extensions. Once again, choose confirm to install, and leave the default settings in place. 
+
+The extensions will power the linting rules and Pandoc style guide within the workspace. Here are the links in case you encounter any issues.
+
+--> [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
+--> [vscode-pandoc](https://marketplace.visualstudio.com/items?itemName=DougFinke.vscode-pandoc)
+
+Now, using this diagram, verify the file structure of your local installation of mdEditor is a rough match.
+
+**Tree View**
+_mdEditor_
+\+---.vscode
+    |       
+`settings.json`
+
+    |
+    +---md
+    |       
+`project1.md`
+
+    |       
+`project2.md`
+
+    |
+    +---styles
+    |       
+`style.css`
+
+    |       
+`syntax.md`
+
+    |
+    |
+`.markdownlint.json`
+
+    |
+`mdEditor.code-workspace`
+
+    |
+`README.md`
+
+    |
+`LICENSE`
+
+    \---
+
+**NOTE: On Linux you must uncomment the 
+`pandoc.htmlOptString`
+ in the 
+`mdEditor.code-workspace`
+ file. The current version, which uses Windows OS file separators, must be replaced with the Linux version; otherwise, the css styles will not be applied correctly.**
+
+Installation is complete.
+Nice job!
+
+---
+
+## Usage <a name = "usage"></a>
+
+To test linting & formatting, click the 
+`test.txt`
+ file (in the 
+`md`
+ folder); it should open in the main editor window.
+
+In the sidebar, keeping the 
+`test.txt`
+ tab in focus, change the filetype from 
+`txt`
+ to 
+`md`
+ and save.
+
+Check the output in the PROBLEMS tab of your lower (terminal) panel. Several formatting violations should appear. Now make a tiny edit and save again. Most of the errors should be gone, having been corrected automatically.
+
+To test the filetype output, enter the key combination 
+`CTRL + K`
+, then press 
+`P`
+. Options to create 
+`.pdf`
+, 
+`.docx`
+, or 
+`.html`
+ file should appear in the dropdown. Click each option in turn and confirm the desired result was produced.
+
+Workspace setup is now complete and mdEditor is ready to use.
+
+>NOTE: The 
+`syntax.md`
+ file in the 
+`styles`
+ folder contains a detailed description of the linting rules available within the editor workspace. Any rule can be toggled on/off by editing the 
+`.markdownlint.json`
+ file using this syntax. 
+`"ruleID" : bool`
+
+
+Happy markdown'ing! :)
+
+Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!
+
+  -- killshot13
+
+---
+
+
+<iframe class="liquidTag" src="https://dev.to/embed/user?args=killshot13" style="border: 0; width: 100%;"></iframe>
+
+
+---
+
+## Credits <a name = "references"></a>
+
+_Extensive credit is owed to [Dave](https://twitter.com/thisDaveJ) for indirectly inspiring me to create mdEditor after reading [this guide](https://thisdavej.com/build-an-amazing-markdown-editor-using-visual-studio-code-and-pandoc/) he authored._
+
+[mdEditor](https://github.com/killshot13/mdEditor) is free software released under the [MIT license](https://github.com/killshot13/mdEditor/blob/main/LICENSE). Copyright 2020-2021 Michael Rehnert
+
+All software programs, extensions, plugins, and digital content referenced and/or used in the documentation and/or installation guide of mdEditor is the respective intellectual property of the creators, developers, and owners thereof and is entitled to the protections granted under U.S. Copyright law.
+
+*[This post is also available on DEV.](https://dev.to/killshot13/mdeditor-for-vscode-16nn)*
+
+
+<script>
+const parent = document.getElementsByTagName('head')[0];
+const script = document.createElement('script');
+script.type = 'text/javascript';
+script.src = 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js';
+script.charset = 'utf-8';
+script.onload = function() {
+    window.iFrameResize({}, '.liquidTag');
+};
+parent.appendChild(script);
+</script>    

src/pages/posts/mdeditor-for-vscode-16nn.md

@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--DRSma37v--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y56ze6gdam4dnsn0tvl7.jpg
 comments_count: 0
-positive_reactions_count: 3
+positive_reactions_count: 4
 tags:
   - codepen
   - ux

src/pages/posts/new-wordpress-admin-color-palette-1001.md

@@ -6,7 +6,7 @@ excerpt: "a guide to releasing your first npm\_package               Introductio
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--aGL9eipc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwut6pn4vr6qfi5lno74.png
 comments_count: 0
-positive_reactions_count: 4
+positive_reactions_count: 5
 tags:
   - npm
   - tutorial

src/pages/posts/npm-publish-29g1.md

@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--IQGV29YR--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ongx7g58br8kxelasq1.png
 comments_count: 0
-positive_reactions_count: 3
+positive_reactions_count: 4
 tags:
   - discuss
   - webdev

src/pages/posts/on-winning-the-node-badge-2m0n.md

@@ -0,0 +1,84 @@
+---
+stackbit_url_path: posts/pure-css-blockquotes-2l2e
+title: Pure CSS Blockquotes
+date: '2021-03-29T01:34:49.003Z'
+excerpt: >-
+  Overview   Developed using only CSS and HTML, these blockquotes examples offer
+  a nice way to...
+thumb_img_path: >-
+  https://res.cloudinary.com/practicaldev/image/fetch/s--EV9q4ugL--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru2tip2zq0wwr2qeszfb.png
+comments_count: 1
+positive_reactions_count: 6
+tags:
+  - codepen
+  - css
+  - html
+canonical_url: 'https://dev.to/killshot13/pure-css-blockquotes-2l2e'
+template: post
+---
+## Overview
+
+Developed using only CSS and HTML, these blockquotes examples offer a nice way to show off your site's accent color(s) without much extra work.
+
+By using the natural breakpoints in the 
+`border`
+ and changing the 
+`width`
+ of the "negative space", I was able to create two nice angled versions. 
+
+---
+
+
+<iframe class="liquidTag" src="https://dev.to/embed/codepen?args=https%3A%2F%2Fcodepen.io%2Fkillshot13%2Fpen%2FMWJeOwE" style="border: 0; width: 100%;"></iframe>
+
+
+---
+
+## But How?
+
+This is made possible by giving 
+`border-bottom`
+ and 
+`border-top`
+ the exact same color as 
+`background-color`
+, creating a simulated angle that would otherwise be hard to achieve on such a narrow width.
+
+I'm sure I cannot be the only one to have thought of this idea, but I have not yet come across it so I am quite proud to take credit for this version of the concept at least. 🙃🙃🙃
+
+## Usage
+
+Of course, anyone is free to use it or find ways to improve it. Just put a link back in the comments, please!
+
+Don't forget to 💖 this article and/or leave a 💭. Even better, you can click my name below to 🎆subscribe🎇! 
+
+Until next time...
+
+  -- killshot13
+
+---
+
+
+<iframe class="liquidTag" src="https://dev.to/embed/user?args=killshot13" style="border: 0; width: 100%;"></iframe>
+
+
+---
+
+
+
+
+
+*[This post is also available on DEV.](https://dev.to/killshot13/pure-css-blockquotes-2l2e)*
+
+
+<script>
+const parent = document.getElementsByTagName('head')[0];
+const script = document.createElement('script');
+script.type = 'text/javascript';
+script.src = 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js';
+script.charset = 'utf-8';
+script.onload = function() {
+    window.iFrameResize({}, '.liquidTag');
+};
+parent.appendChild(script);
+</script>