DEV Community: Michael R.

"Apple Music" Sent a Renewal Email to my Android…

Michael R. — Wed, 12 Nov 2025 11:47:50 +0000

Ever gotten an email from a reputable company like Apple, Verizon, or Coinbase, but something feels a bit off about it?

Introduction
How to ID Spam/Phishing Email?
- Check the Preview
- Check the Body
Why ID Spam/Phishing Email?
- Malicious Intent
- Hostile Takeovers
- Global Threat Actors
Summary
- Red Flags (Email Preview)
- Red Flags (Email Body)

Introduction

Most of us are aware, to some extent, of the danger posed by suspicious emails. But if your inbox is like mine, with 20–30 new emails arriving daily, finding enough time to skim them can be overwhelming, much less tell which ones are suspect. Seems absurd.

How to ID Spam/Phishing Email?

Maybe, like I once did, you naïvely assume these emails all magically end up in the Junk/Spam folder. But can we really trust our spam filter to catch 'em all? (even Ash didn't pull that one off) Perhaps try the latest freemium plugin instead? As if we can even afford that after rent and bills, right?

Check the Preview

Ironically, I received an email earlier today that managed to bypass my spam filter, security add-ons, and custom rules and somehow landed in my Focused Inbox (equivalent to 'Important' in Gmail). But as soon as I glanced at the preview, red flags started to pop up, including sloppy font styling, a vague subject line, and a deadline in mere hours. Let's take a look.

At this point, in most cases, we already have sufficient circumstantial evidence to justify deleting the email without even opening it. Why waste time entertaining spam or potential malware?

Report the email as junk so that anything from that sender will be filtered automatically; then, delete it to avoid accidentally clicking on it later.

Check the Body

But let's assume, for the sake of argument, that we already opened the email. Can we expect to see additional new red flags or just variants of those previously covered? Let's see what else we should be aware of.

After the FOMO pitch, fake Apple Music icon, and wildly inaccurate company details in the footer, I am positive Apple did not send this email. A reputable company would never be so sloppy. That being said, now I'm curious about the demise someone evidently had in mind for me. What if, half-awake or intoxicated, I had instead chosen to Renew my subscription?

Why ID Spam/Phishing Email?

Using extreme caution to avoid actually clicking the link, I combed through the original message using source view, located the embedded URL, and submitted it to VirusTotal for analysis.

Disclaimer: DO NOT interact with suspected spam or malicious content unless you understand the risks and have a valid reason for doing so.

Malicious Intent

The verdict was returned in under a minute, with vendor flags thrown for malicious content and phishing.

Hostile Takeovers

Chaos ensues as the malware deletes the trusted/disallowed cert lists. Clearly, the rabbit hole went very deep, far beyond my expectations.

Global Threat Actors

Lastly, note the actual destination of that link from the email. Far removed from anything related to Apple, it belongs to a ball bearing dealer in India.

Summary

Okay, and on that note, let's recap…

Next time those unread emails start piling up, apply what we learned today. Scan the previews, look for red flags, and deal with any obvious spam first.

Red Flags (Email Preview)

🚩- Visible changes in font size and thickness
🚩- Unclear or vague origin and subject line
🚩- Deadline in a few hours to trigger a rushed response

Now you can open and read the emails that appear legitimate, but stay vigilant, checking for suspicious details and not clicking on any links.

Red Flags (Email Body)

🚩- Fear of Missing Out (FOMO) emphasized in the message body
🚩- Icons or logos that appear fuzzy, altered, or modified
🚩- Inaccurate company name, address, or contact info

Finally, trust but verify. Except for actively generated security verification emails, use a website or app to log in directly, not an email link. At this point, you can both validate the email and conduct any necessary business.

At the risk of sounding cliché, better to be safe than sorry!

-killshot13

Don't forget to 💖 this article and leave a 🗨️; I look forward to reading your thoughts and opinions in the comments below.

Image Credit: "@theRealAppleMusic", adapted from "UnKnown Caller" by Rick Patin, used under CC BY 4.0. "@theRealAppleMusic" is licensed under CC BY 4.0 by Michael R.

Configuring VSCode Colorized Brackets

Michael R. — Fri, 31 Dec 2021 14:32:31 +0000

Overview

Most of us likely still remember that initial feeling of amazement after installing the the wildly popular but now deprecated Bracket Pair Colorizer extension by CoenraadS. After over 10M+ downloads, the options once delivered by that extension have now become native features in VS Code.

At first, I found it difficult to achieve the same level of comfort and functionality offered by Bracket Pair Colorizer. And judging from the nearly 100 issues opened on GitHub, I was not alone. That said, the VS Code team has changed my impression with their latest feature update this past October.

Vertical lines now depend on the indentation of the code that is surrounded by the bracket pair. (Image: Microsoft)

Discover What's New

I will cover each of the aforementioned updates briefly before sharing the configuration I am now using in VS Code. So without further ado, let's check out these new features! 😎

Bracket Pairs

Indentation of bracket characters can now be customized based on the programming language being used.
Colorization of bracket characters can now be defined based on functionality which is inferred from the depth of nesting.

Bracket Pair Guides

Horizontal lines now outline the scope of a bracket pair.
Vertical lines now depend on how the code within the bracket pair is indented.
Bracket pair guides now have a third option, 'active', providing a more granular level of control over colorized highlights.
🎉 Guide highlights now support color customizations! 🎉

Custom Settings Example

Now that we have an idea of the possibilities, here is a working example, copied from my settings.json as promised. It has been freshly revised to take advantage of the new updates.

The relevant changes made to the settings.json file.

Shows these settings applied to brackets in different languages.

Conclusion

You now have a good starting point for creating a customized bracket pair colorization that works well for you. Of course, I was not able to cover every setting and variable in this short article.

There are many options which you can enable or disable to optimize your VS Code experience. Remember you can always reference the default settings in case your settings.json file is or becomes a bit disorganized.

I'm excited to see the configurations and themes you all create using these new feature, so please leave a screenshot or code snippet in the comments.

Don't forget to 💖 this article and if you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

Best Practices: Sign-In Forms

Michael R. — Fri, 30 Jul 2021 10:18:48 +0000

Overview

This article specifically focuses on the design and development of sign-in forms and should be used as a reference only in this scope.

It does not seek to provide a comprehensive guide to building web forms and should not be regarded as such.

1 — HTML

1.1 — HTML Code Example

2 — Types & Attributes

2.1 — Types

2.1.1 — Code Examples Using Types

2.2. — Attributes

2.2.1 — Code Examples Using Attributes

3 — CSS

3.1 — CSS Code Examples

4 — JS

5 — A Quick Recap

6 — References

HTML

Give each input its own <label> element, and prefer <label> over <placeholder> if you must choose between the two. While <placeholder> tags can be useful, they should NOT be used to substitute or replace <label> elements.
Place the <label> element above the <input> element.
Don't force users to input information twice; yes, this extends to emails and passwords. Instead, have them confirm their account ownership by sending a confirmation email and make it simple for them to reset their password.

"When designing sign-in forms, strive to enforce the password quality over the password quantity."

Use <button> tags for buttons, and make consider making "SUBMIT" buttons more descriptive. Use wording like "Sign In" or "Subscribe" so the user knows what to expect after clicking.
A basic sign-in form should use the applicable HTML elements for each part instead of a cluster of <div> elements rendered with countless extra lines of JavaScript.

HTML Code Example

    <form>

    <section>
        <label for="email">Email</label>
        <input id="email">
    </section>

    <section>
    <label for="password">Password</label>
    <input id="password">
    </section>

    <button>Sign In</button>

    </form>

Types & Attributes

Additional details can (and should) be added to sign-in forms, providing additional context to the browser.
The <input> tag, along with its HTML siblings <select> and <textarea>, accepts two kinds of parameters— types and attributes.

Types

The value of type defaults to "text", but "email" and "password" are the preferred types to use with their respective inputs.
Password inputs should always define their type as such <input type=password> for security purposes. This signals the browser to render the user's password hidden by default.

Code Examples Using Types

    <input type="email">
    <input type="password">

    <button type="submit"> // or // <input type="submit">

Attributes

As with types, some attributes, like autocomplete, can smooth out the user experience when signing in.
Modern browsers use inference from these attributes to help decide when to display a password strength meter, offer to save a new or updated password, or autocomplete the form with credentials previously stored on the user's behalf.
A quality sign-in form will add the autocomplete attribute to all relevant inputs, allowing the browser's settings and/or the user's preferences to decide how to utilize the provided hints.
In addition, the required attribute can (and should) be used in all email/username and password fields.

Code Examples Using Attributes

    <input type-"email" autocomplete="email" required>
    <input type="text" autocomplete="username" required>

    <input type="password" autocomplete="new-password" required> 
    <input type="password" autocomplete="current-password" 
    required>

    <input type="number" autocomplete="one-time-code">

CSS

Use approximately 16px/1rem of padding for mobile as a general rule of thumb.
Same as above, but only 10px/0.625rem on the desktop.
All inputs and buttons should be visible and give enough room to tap each element in mobile view.
Design for thumbs, not fingers.
Increase font-size on mobile by at least 2px. Sometimes up to 4px may be necessary with specific fonts.
Leverage the browser's built-in ability to detect invalid input. You don't need JavaScript; render the :invalid attribute with <color: red> in the CSS.

CSS Code Examples


    /** GOOD */
    input[type=email]:invalid {
    color: red;
    }

    /** EVEN BETTER */
    input[type=email]:not(:placeholder-shown):invalid {
    color: red;
    }

JS

Make sure the sign-in button stays visible on mobile and doesn't get covered by the keyboard. One nearly fail-safe way to accomplish this is only to request the email on the initial screen, then defer to a second screen before requiring the password input.
Use JavaScript to render a "SHOW PASSWORD" icon or text button.
IMPORTANT: Provide additional form validation to sanitize user input before sending it to the server by checking against the expected REGEX cases and MIME types.

A Quick Recap

Let me condense everything you have just read into two sentences containing the key takeaways.

Most sign-in forms can provide the same level of functionality or even better by leveraging the native ability of HTML5 and CSS while using less JavaScript. This approach delivers improvements on many fundamental levels, including accessibility, Core Web Vitals, PWA criteria, and design simplicity.

To view the list of references I consulted for this article, please scroll to the bottom of the page; perhaps you will find them helpful.

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

Thank you for reading!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

References

mdEditor (for VSCode)

Michael R. — Mon, 28 Jun 2021 16:12:41 +0000

Overview
Features
Prerequisites
Installation
Usage
Credits

Overview (TL;DR)

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

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.
The syntax rules allow for the enforcement of any markdown flavor with a simple on/off option for each rule.
The linter looks for errors/problems and immediately flags them. A detailed explanation and reference link will appear on hover.
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.
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.
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

Visual Studio Code
This should be self-explanatory.

Pandoc
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.

Installation

mdEditor can be installed using the simple guide you are reading now, which paraphrases the README.md file from the main repository.

killshot13 / mdEditor

Awesome markdown editor for VS Code. Supports linting and prints to HTML, PDF, and MS Word (Docx)!

Decide where the root directory of the editor is going to live on your local drive (reference Overview for details), then clone mdEditor 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
--> 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

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

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

Credits

Extensive credit is owed to Dave for indirectly inspiring me to create mdEditor after reading this guide he authored.

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.

The 50,000px Rule: or, Minimum Sizing for High-Resolution Web Images

Michael R. — Mon, 31 May 2021 13:04:00 +0000

Introduction

Today, like most other days in any given month, I learned something new. But this tidbit of knowledge was particularly intriguing and, in my experience, not something that is well-known among web devs and SEO experts.

So I thought to myself, on the off chance that I haven't been living under a rock this whole time, why not pen a short piece and spread the word?

Hopefully, by now, I've piqued your curiosity a bit. So without further ado, let's explore what I have christened, the 50,000px Rule.

High-Level Overview

I recently became aware of this information while completing a Google Codelab on JSON-LD structured data. While a bit off-topic from my objective, some of the related verbiages caught my attention. Let's have a look!

"For best results, provide multiple high-resolution images (minimum of 50K pixels when multiplying width and height) with the following aspect ratios: 16x9, 4x3, and 1x1."
--Google Search Central

So basically, what Google is trying to say here is this. If this expression doesn't return true after plugging in the dimensions of your photos, then your site isn't serving high-resolution imagery.

<span>imgW * imgL &gt;= sqrt(50,000)</span>

Let's simplify the math just a tad. We know that (2 x2 =4), so let's assign these values to a simple square. Using the formula for a given square area, we can determine a 2in x2in square has a surface area of...surprise! Four square inches.

Now we must realize this calculation does not change based on the unit of measurement. If we instead had a 2-foot square or a 2-cm square, the unit of measure being used won't alter the actual values.

So then, is a pixel also a unit of measure? Of course! Pixels, abbreviated as "px," are a tiny unit of measure; one pixel is about 1⁄96 inch (0.26 mm).

While small, these specks do play an essential role in web design. Pixels are used to make sure a given element will render no matter what screen resolution is used for viewing.

Practical Application

Getting back to the 50,000px Rule, we should find the concept seems much simpler now. To meet the minimum requirements for a high-resolution image, a photograph just needs to have a square area of at least 50K pixels.

Let's calculate what this means using three aspect ratios widely recommended as variants of any image we might serve on a webpage.

1:1 - the basic square or thumbnail image

We should be familiar by now with this type of calculation. After taking the square root of 50,000, we discover the minimum size for a high-resolution photo with a 1:1 ratio.

1:1 aspect ratio

4:3 - the nostalgic "Academy ratio" used in older films

Once the shape changes from a square to a rectangle, the calculation process becomes less granular and involves ratios and fractions.

4:3 aspect ratio

16:9 - the current "widescreen" cinematic standard

As you might assume, the larger the base ratio, the larger the gap between 50,000 and the actual size of our image. With a 16:9 aspect ratio, we cannot get closer than 51,984 square pixels without using decimal numbers.

16:9 aspect ratio

Conclusion

So there you have it, folks, the 50,000 Rule demystified. Now I do not anticipate any developer, not even myself, will need to reference this information very often.

Still, it was fun to research and it also sets a concrete baseline for high-resolution imagery. I hope that you enjoyed reading this article and perhaps you have also learned something new today!

"For an image to be considered high-resolution when served on the Web, it must satisfy the 50,000px Rule."

Don't forget to 💖 this article and leave a 💭; I look forward to reading your thoughts and opinions in the comments below. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

What is Pandoc?

Michael R. — Fri, 07 May 2021 11:04:16 +0000

Cover Image Credit: RFC: Designing Logo of Pandoc

Introduction

Most developers have probably wondered or even asked the question at some point, "What exactly is Pandoc?" or "What do people use Pandoc for?"

I certainly did! So, I have written a short article to help answer that question. Much of the information in this article is sourced from a gist I had put together over the course of several months.

Defined as a universal document converter, Pandoc is an open-source software program for file conversion. Pandoc is not a markup language, nor is it a CLI, although it is used from one. 🙃

If you need to convert files from any conceivable format to another, Pandoc is your best friend. It has become popular across multiple industry and technology sectors.

The value of Pandoc shines brightest when used to transform file types like Markdown, Microsoft Word (.docx), and XML into more user-friendly documents and markup languages, including PDF and HTML.

Installing Pandoc

I will assume at this point, if you are still reading, you likely want to try Pandoc out for yourself.

Listed below are the steps I took to install and configure Pandoc on Windows (10 Pro Edition) and Linux (Ubuntu 20.04 Focal) for Markdown to PDF document conversion.

Please note all disclaimers remain flapping in the breeze. Pandoc is open-source software that carries no warranty of any kind. Likewise, I make no guarantee that you will achieve a favorable result simply by following the steps below. 🙃

Your Mileage Might Vary

--> Pandoc on Windows

I have been using the Chocolately package manager for Windows for several years now. So for me, the simplest way to get Pandoc up and running was first to install it with this command.

choco install pandoc

Then I grabbed the Windows installer for MikTex (one of many Pandoc engines) from the official downloads page and ran the .exe file to install.

Before-and-after view when running the markdown-to-pdf command in Pandoc

No further configuration was necessary, at least not from a functional point of view. However, Pandoc will let you customize certain behaviors at quite a granular level.

There is a configuration section toward the end of this article offers a good starting place for those wishing to take a deeper dive.

--> Pandoc on Linux

Getting Pandoc setup with .pdf capabilities on Linux proved a bit more challenging.

After navigating a good deal of noise encountered while researching different packages, I found the consensus seemed to favor a Pandoc/TexLive setup.

Since I am running Ubuntu Linux on WSL2, I opted to build from scratch to avoid conflicts with my local Windows environment.

Before-and-after view when running the markdown-to-html command in Pandoc

First, I pulled the latest tarball from the release page.

There are multiple assets available with each release, so check your OS architecture first rather than blindly copying the snippets. This way, you can ensure you are requesting the correct package for your machine.

wget https://github.com/jgm/pandoc/releases/download/2.13/pandoc-2.13-linux-amd64.tar.gz

Then, without switching directories, I used a two-step installation process.

sudo tar xvzf $TGZ --strip-components 1 -C '/usr/local'

Note that $TGZ and the destination folder in the snippet above are generic, and substitutions must be made to reflect your home directory.

sudo apt-get install texlive texlive-latex-extra

And with that, Pandoc was installed on Linux to convert markdown files to PDF documents!

Configuring Pandoc

These configuration options are just examples and may not apply in every situation.

One should always consult the official Pandoc documentation for complete details and the latest changes.

--pdf-engine=PROGRAM

Specifies which engine Pandoc should use when producing PDF output.
Valid values are pdflatex, lualatex, xelatex, latexmk, tectonic, wkhtmltopdf, weasyprint, prince, context, and pdfroff.
If the engine is not in your PATH, you can specify the full path of the engine here.
If this option is not specified, pandoc uses the following defaults depending on the output format specified.

> -t latex or none

defaults to pdflatex (other options: xelatex, lualatex, tectonic, latexmk)

> -t context:

defaults to context

> -t html:

defaults to wkhtmltopdf (other options: prince, weasyprint; visit Print-CSS for a good introduction to PDF generation from HTML/CSS.)

> -t ms:

defaults to pdfroff

Pandoc can even apply custom styling when rendering HTML from Markdown

--pdf-engine-opt=STRING

Use the given string as a command-line argument to the pdf-engine. For example, to use a persistent directory foo for Latexmk’s auxiliary files, use --pdf-engine-opt=-outdir=foo.
Note that no check for duplicate options is done.

Credit: Pandoc User's Guide

Conclusion

On a related note, if you find yourself working with markdown, HTML, PDF, or XML files quite often, you should check out a little project of mine called mdEditor for VS Code.

The frameworks installed by mdEditor automate the configurations we just covered in such detail. Now you can generate file conversion with a simple key-binding or click in the command palette!

killshot13 / mdEditor

Awesome markdown editor for VS Code. Supports linting and prints to HTML, PDF, and MS Word (Docx)!

I hope you have found this tutorial useful, and thank you for taking the time to follow along!

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

A Note on Pandoc

Copyright 2006–2021 John MacFarlane. Released under the GPL, version 2 or greater. This software carries no warranty of any kind. (See COPYRIGHT for full copyright and warranty notices.) For a full list of contributors, see the file AUTHORS.md in the Pandoc source code.

Pure CSS Blockquotes

Michael R. — Mon, 29 Mar 2021 01:34:49 +0000

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.

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

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

New WordPress Admin Color Palette

Michael R. — Thu, 18 Mar 2021 12:42:56 +0000

WOW!

So pretty...

Let me just say I am loving this brand-new color palette repository for WordPress! (core, .org, and related projects)

Oh, and if you're a WP plugin developer, listen up because this applies to you too. And you'll also want to grab this handy PostCSS tool to automate your CSS changes courtesy of @ryelle! 😁😎

In his February post, Standardization of WP-Admin colors in WordPress 5.7, WP Core dev Jb Audras offered the following in-depth summary, and I quote:

This is the first part of a larger project in cleaning up WordPress admin CSS. In WordPress 5.7, all colors used in the CSS are collapsed to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white.

This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.

The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step. Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. Themes and Plugin developers are encouraged to use this new color palette for better consistency between their products and WordPress Core.

Plugin authors that use the existing CSS Core classes should be all set up with the new color palette, as every Core class was updated accordingly.

Need/want more details? Check out the official Design Handbook or the CodePen palette shown below.

Now for a quick recruitment pitch 😅

Did you know that anyone is welcome to come and help shape future upgrades and improvements to WordPress? True open-source to the core, there are no prerequisites to joining the WordPress community.

It's also an excellent opportunity for those of us starting out as developers and designers to join a thriving open-source community and gain some valuable experience.

Interested? Consider contributing just 5% of your overall development time/effort by joining us in the Five for the Future initiative!

You will have the opportunity to help develop the subsequent versions of WordPress in countless ways, from casually providing feedback to working directly with the elite WP Core team.

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

"Discussions"

Michael R. — Wed, 17 Mar 2021 20:17:34 +0000

A THOROUGH REVIEW OF GITHUB'S LATEST BRAINCHILD

Overview

After nearly a year of private beta testing, GitHub confirmed last month in a blog post that its new Discussions feature is now available as a public beta.

First revealed during the live stream of GitHub's Satellite Virtual 2020, this latest addition to the GitHub platform seeks to provide a way for software communities to collaborate outside the codebase.

View of a "GitHub Discussion"

In theory, the new feature will improve collective participation for open-source projects while smoothing communication lines between project managers, developers, beta testers, and end-users.

"Discussions is a collaborative communication forum for the community around an open-source project." — GitHub Docs

Some prominent repositories, such as Node.js, Laravel, Next.js, and Prisma, participated in the first round of beta testing and have already successfully integrated Discussions. Based on current trends, it appears that Discussions is poised to reshape the existing structure of most GitHub repositories.

View of a "GitHub Discussion"

Features

By default, four categories are created to help Discussions stay organized.

💬 General

💡 Idea

🙏 Q&A

🙌 Show and tell

Aside from these templated options, repository owners can author unlimited custom threads. Users are encouraged to mark quality answers as helpful, similar to the familiar layout of Stack Overflow.

Discussions also attempts to establish content moderation by allowing top contributors to achieve higher privileges. This option should help relieve some stress for the developer(s), who would otherwise be forced to keep a constant eye on the conversations.

Video provided courtesy of Github and Michelle Mannering

Configuration

Anyone can configure Discussions quite easily; it took me about 5–10 minutes per repository on average.

The layout is almost identical to GitHub issues, allowing for creating any number of topics linked to a single repository, each with a unique title and URL. While this is conducive in most scenarios, the setup could intimidate some developers who maintain an extensive library of source code.

Fortunately, most of the configuration is already provided by a boilerplate template. I found the default options to be well-balanced, sparing precious design time while still allowing customization.

Getting Started with Discussions

As shown above, the option to enable Discussions is now available for every repository. To access, open the settings tab and scroll to the bottom of the features section.

You are now presented with a template containing several options to personalize if you so desire. Styling with Markdown is supported, so once you are satisfied, preview and publish just like a README.

A new menu tab should appear in the navbar of the repository. Here, members of the software community who utilize your code can now gather to converse and collaborate.

Outlook

Some developers contend that Discussions shares too much similarity with existing features to be worth the hassle. Others fear that management will pile more expectations onto an already overwhelming workload.

As it stands, Discussions admittedly leaves room for improvement and likely will not be suitable for every situation. That being said, the latest metrics released by GitHub in a new report are nothing short of impressive.*

Since January 2020 —

3000 discussions have been created.

50% of active Discussions users contributed or pushed code.

34% more pull requests were merged.

18% less time was required to accomplish a merge.

All figures were derived from beta testing conducted after the addition of Discussions to the Next.js repository, which produced a marked overall improvement in user participation and developer productivity.

*If you wish to read the entire report, visit octoverse.github.com, where you can also download a PDF copy for later reference.

Customization options for pinned Discussions

Conclusion

Every developer knows that data from a test environment cannot be used conclusively to predict future performance.

However, if the benchmarks established last year hold steady, we can safely assume that Discussions' popularity and usage will continue to increase across GitHub. So here is my personal opinion on the matter.

Provided as users, we treat Discussions like a tool and not a social media platform; and as project managers, we gradually and tactfully integrate the feature; I believe many benefits can be realized.

I would love to hear perspectives from all of you, so please leave your thoughts in the comments.

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

On Winning the Node Badge

Michael R. — Sat, 06 Mar 2021 20:12:32 +0000

Disclaimer: This post contains no technical content.

I wanted to write a brief post to express my gratitude for the overwhelming success of my latest article.

A special thanks goes out especially to my new subscribers and fans. I am honored and very grateful to you all.

To express my appreciation, here's the highlights of what you helped me achieve!

3x featured
50+ retweets
200+ reactions
Over 6,000 views ...and...

... 1 Node Badge!

And to the folks at daily.dev and DEV, thank you for providing the feedback, encouragement, and most of all the infrastructure to make this possible.

I look forward to writing more quality articles that each of you will enjoy and benefit from.

Thanks again! 🤗🤗🤗

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

How To Build an SMTP Mail Server with Express, Node, and Gmail

Michael R. — Fri, 26 Feb 2021 12:07:36 +0000

Overview

Recently I had the opportunity to develop and integrate an SMTP Email Server into a more extensive full-stack application. Today we will reference the code from my solution for this tutorial.

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 complete codebase can be viewed here:

killshot13 / express-smtp-mailer

A production-ready Node backend with an Express SMTP mail server configurable for use with contact forms, subscriptions, etc.

Features

Before we start coding, we should quantify the expected functionality of our Express mail server. We can always refer back to this list later if confusion develops.

Establish API routes to a contact form on the frontend.
Receive user data from these routes upon form submission.
Format a mailable JSON object with the data received.
Construct a transport function with Nodemailer in preparation for delivery.
Obtain authorization from Gmail using credentials stored in the server.
Call the transport function, prompting Nodemailer to hand off the email object to the Gmail SMTP Server for delivery.
Request confirmation of successful delivery and return an error message if not received.

Upon completion, we will have the perfect backend for processing contact forms. Alternatively, our server will also provide a solid base to build a full-stack MERN app with plenty of functionality.

The production version of the server we are building today powers the backend of Ormica, a real estate investment firm in S. Florida.

Prerequisites

A basic understanding of fundamental programming concepts and familiarity with at least one server-side programming language such as [Node, Python, Ruby, PHP].
A code editor such as Visual Studio
Node.js and npm locally installed. (Current LTS version preferred)

Some developers, including myself, prefer to use nvm or 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

Development

Part 1. Dependencies

The moment has arrived! Time to write some code.

Begin with these terminal commands to make an empty directory wherever you wish to store your server's local version and create the first file using npm.

    mkdir smtp-email-server
    cd smtp-email-server
    npm init

Follow the terminal prompts from npm to create a package.json file. In most cases, the default values will suffice, but be sure to change the entry point to server.js instead of the proposed index.js.

Now we need to add the required dependencies (npm packages) to our project. Run the following command and notice that npm automatically creates a new directory called node_modules. This is normal, so don't change or configure anything in this folder.

    npm install express nodemailer morgan dotenv

Let's glance at a brief overview of each package.

Express is a minimal and flexible Node.js web application framework that provides a robust set of features.
Nodemailer is a module designed to allow Node.js applications to send emails securely and efficiently.
Morgan is named after Dexter (a show you should not watch until completion) and provides HTTP request logger middleware for Node.js.
dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

Part 2. Routes

Let's begin by creating a routes folder containing routes.js.

    mkdir routes && cd routes && touch routes.js

Open routes.js in your code editor and establish a baseline by requiring the dependencies at the top of the file.

    require("dotenv").config();
    // routes.js
    const router = require("express").Router();
    const path = require("path");
    const nodemailer = require("nodemailer");

As you can see, Express has its own built-in router. I have opted to use this option instead of a separate npm package. This helps keep our application lightweight and efficient.

Our next order of work will involve setting up authentication using our Gmail account credentials. Don't forget to add the .env file in the root directory rather than our current location.

    const transport = {
        //this is the authentication for sending email.
        host: "smtp.gmail.com",
        port: 465,
        secure: true, // use TLS
        /* create a .env file and define your credentials. */
        auth: {
            user: process.env.SMTP_TO_EMAIL,
            pass: process.env.SMTP_TO_PASSWORD,
        },
     };

Remember the transport function we mentioned earlier? In this step, we will construct that same function. Let's have a look!

    // call the transport function
    const transporter = nodemailer.createTransport(transport);
    transporter.verify((error, success) => {
        if (error) {
            //if error happened code ends here
            console.error(error);
         } else {
            //this means success
            console.log("Ready to send mail!");
         }
    })

Now let's build the API routes. We will simultaneously define the schema for our JSON object (email).

In simple terms, we are telling Nodemailer about the form data it will be receiving from the front-end and how it should translate said data into a structured email.

Finally, we call the transporter.sendMail function, Nodemailer works its magic, and the email goes on its merry way to the recipient's inbox.

    router.get('/', (req, res, next) => {
        res.status(200).json({ msg: 'Working' })
    })
    router.post('/', (req, res, next) => {
        //make mailable object
        const mail = {
        from: process.env.SMTP_FROM_EMAIL,
        to: process.env.SMTP_TO_EMAIL,
        subject: 'New Contact Form Submission',
        text: `Contact Details:
                   Name: ${req.body.name} 
                   Email: ${req.body.email} 
                   Phone: ${req.body.tel} 
                   Message: ${req.body.message}` 
         }
         transporter.sendMail(mail, (err, data) => {
        if (err) {
            res.json({
                status: 'fail',
            })
            } else {
            res.json({
                status: 'success',
            })
        }
        })
    })

The last block of code in this file instructs Express to use the routes we have established; finally, we export the entire router to the Node server.

    // Answer API requests.
    router.use('/api', function (req, res) {
        res.set('Content-Type', 'application/json')
        res.send('{"message":"Hello from the custom server!"}')
    })
    /* All remaining requests return the React app, so it can 
    handle routing. */
    router.use('*', function (request, response) { 
        response.sendFile(path.resolve(__dirname, '/react- 
        ui/build', 'index.html'))
    })
    module.exports = router

NOTE: If you are unfamiliar with process.env or merely need a refresher, this Codeburst article provides a splendid reference point.

process.env: What it is and why/when/how to use it effectively | by Joseph Matthias Goh | codeburst

Joseph Matthias Goh ・ Jun 20, 2018 ・
codeburst.io

Part 3. Server

Let's create a server.js file in the root directory and open it with the editor.

Here we are just ensuring everything runs smoothly. I could write an entire article about each of the parameters defined here, but the template is pretty standard.

Let's start by defining some initial requirements.

    const express = require('express')
    const cluster = require('cluster')
    const numCPUs = require('os').cpus().length

Now we should check the environment to see if we are running in production. If so, we use a cluster of Node processes to distribute the stress of running the application as evenly as possible across the server cores.

    const isDev = process.env.NODE_ENV !== 'production'
    /* Multi-process to utilize all CPU cores. */
    if (!isDev && cluster.isMaster) {
        console.error(`Node cluster master ${process.pid} is running`)
         // Fork workers.
         for (let i = 0; i < numCPUs; i++) { 
             cluster.fork() 
         } 
    cluster.on('exit', (worker, code, signal) => {
        console.error(`Node cluster worker ${worker.process.pid} 
    exited: code ${code}, signal ${signal}`)
        })
    }

We will then connect to the frontend, priority serve our static HTML files, define some middleware for AJAX parsing, and finally call the routes we are importing from the routes.js file, all in that order.

We wrap it up with some error logging for the development environment, and voila! Our Express mail server is humming along.

     else {
    const app = express()
    const limiter = new rateLimit({
        windowMs: 1 * 60 * 1000, // 1 minute
        max: 5,
    })
    const morgan = require('morgan')
    const path = require('path')

    const PORT = process.env.PORT || 5000

    // apply rate limiter to all requests
    app.use(limiter)

    // Priority serve any static files.
    // Replace the example to connect to your frontend.
    app.use(express.static(path.join(__dirname, 
        '/example/frontend.js')))

    // dev middleware
    app.use(morgan('dev'))

    // configure body parser for AJAX requests
    app.use(express.urlencoded({ extended: false }))
    app.use(express.json())

    const routes = require('./routes/routes')

    // after all middleware functions
    app.use('/', routes)

        app.listen(PORT, function () {
        console.error(
            `Node ${
                isDev ? 'dev server' : 'cluster 
         worker ' + process.pid
            }: listening on port ${PORT}`
        )
    })
    }

SMTP Email Server is complete! Congratulations!

NOTE: If you encounter difficulty with the authentication process, read this Google Support documentation! It will save you hours of debugging and Excedrin.

Michael R

@killsh0t13

Some well-hidden tips to keep in mind when setting up an SMTP server. I learned the hard way to do better research! 😅

support.google.com/accounts/answe…

00:58 AM - 18 Jan 2021

Conclusion

We’ve successfully created an SMTP Email Server using Express and Node. We also learned how to integrate Nodemailer and Gmail to streamline the mailing process.

killshot13 / express-smtp-mailer

A production-ready Node backend with an Express SMTP mail server configurable for use with contact forms, subscriptions, etc.

Feel free to clone the source code and explore your own methods of implementation. I hope you have found this tutorial useful, and thank you for taking the time to follow along!

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

.ltag__user__id__497515 .follow-action-button { background-color: #243b4a !important; color: #acf4db !important; border-color: #243b4a !important; }

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

npm-publish

Michael R. — Sat, 24 Oct 2020 09:16:25 +0000

a guide to releasing your first npm package

Introduction

npm (node package manager) is the world's largest software registry. According to the documentation, npm consists of three distinct components:

the registry
the website
the CLI

The registry is an immense database containing all the node packages & modules ever published, complete with version info and metadata.

On the website, you can search for and view packages, create an npm profile, and manage user settings.

The CLI provides the primary means of interacting with npm, including the publishing of packages & modules, which we will now cover in-depth.

Prerequisites:

(1). an npm account
(2). a GitHub account
(3). the current version of Node.js
(4). the current stable version of npm

    npm install npm@latest -g

Package vs Module

It is important to understand the two types of objects you can publish to the registry.

How is a package defined?

a). A folder containing a program described by a package.json file.
b). A g-zipped tarball containing (a).
c). A URL that resolves to (b).
d). A <name>@<version> that is published on the registry with (c).
e). A <name>@<tag> that points to (d).
f). A <name> that has a latest tag satisfying (e).
g). A git URL that, when cloned, results in (a).

How is a module defined?

Any file or directory within node_modules that can be loaded by the Node.js require() function. To comply, at least one of these formats must be used.

A folder with a package.json file containing a "main" field.
A folder with an index.js file in it.
A JavaScript file.

A module can also be a package, but not all modules are packages by default.

Private vs Public

This parameter determines the visibility of your new npm package. For this article, it is assumed that you will elect to create a public package, but you may always reference the documentation for more details.

Scoped vs Unscoped

Here you will define whether you want to release your code completely to the public domain (unscoped) or publish the code within a retained namespace (scoped).

Unscoped packages are always public.
Private packages are always scoped.
Scoped packages are private by default; you must pass a command-line flag when publishing to make them public.

The command line interprets your decision by how your package is named. I'll create examples based on my own npm account username.

    PUBLIC/UNSCOPED: npm publish my-package
    PUBLIC/SCOPED: npm publish @killshot13_npm/my-package --access public
    PRIVATE/SCOPED: npm publish @killshot13_npm/my-package

To avoid confusing the reader, I shall refrain from much discussion about teams, organizations, and enterprise accounts.

Since this article is about publishing our first npm package, I doubt these factors will be of much concern at present. Just be aware of the concepts for future knowledge.

Create | Review | Test | Publish

At last, the moment you have been waiting for! These four simple steps are what you will be using to publish your package or module to the registry.

WARNING: If you deviate from this path or omit one of these steps, chances are you will encounter errors and spend a considerable amount of time debugging your files.

Create

    mkdir my-package
    cd my-package

Now that you have a root directory, initiate git and npm.

    git init
    git remote add origin git://YOUR URL HERE
    npm init
    // Follow the prompts to create a package.json file. 
    // Consider the conventions listed above when naming your package.

Now open the directory in your favorite code editor and add a README.md file and the rest of your package code files.

Review

In this step, use whatever means are at your disposal to double-check your code for environmental variables, including passwords, API keys, and other sensitive data.

If necessary, create the appropriate files and replace your existing code with default variables as needed to protect your secrets.

    .gitignore | .npmignore | .env | PROCESS.ENV

Test

Almost there! Just one more quick (hopefully) thing to wrap up before you publish. To keep bugs out of the registry, especially when publishing publicly, you should first test your package in your own environment.

Since you are already using the npm CLI, you can just run this command.

    // Use the full path to your project directory.
    npm install my-package

If everything functions as designed, congratulations, you are ready to publish your first package!

Publish

This is the simplest and most satisfying step. Navigate back to the root directory of your npm package.

    cd /path/to/package

Are you ready?

    npm publish my-package

If npm prints something that looks like this, you are golden!

Photo courtesy Dev Community

Tips & Tricks

Once you npm publish, you CANNOT change your package name! Take a moment to solidify your choice of words. Try to keep package names short and descriptive. For an example of what not to do, imagine installing this npm package.

I pity the fool!

    npm install --save @teambit/staged-components.component-status-resolver

Sometimes, even with an unscoped public package, npm refuses to publish unless you include a flag. Add --access public to your command and try again.

    npm publish my-package --access public

If you enabled 2FA when creating your npm account, you will have to provide the one-time token in your publish command.

    npm publish my-package --otp=811486

Conclusion

I hope you enjoyed this article. Feel free to add suggestions or ask questions in the comments below, and I will get back to you. Thank you for reading, and happy coding!

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

DEV Community: Michael R.

"Apple Music" Sent a Renewal Email to my Android…

Ever gotten an email from a reputable company like Apple, Verizon, or Coinbase, but something feels a bit off about it?

Introduction

How to ID Spam/Phishing Email?

Check the Preview

Check the Body

Why ID Spam/Phishing Email?

Malicious Intent

Hostile Takeovers

Global Threat Actors

Summary

Red Flags (Email Preview)

Red Flags (Email Body)

Configuring VSCode Colorized Brackets

Overview

Discover What's New

Bracket Pairs

Bracket Pair Guides

Custom Settings Example

Conclusion

Michael R.Follow

Best Practices: Sign-In Forms

Overview

Table Of Contents

HTML

HTML Code Example

Types & Attributes

Types

Code Examples Using Types

Attributes

Code Examples Using Attributes

CSS

CSS Code Examples

JS

A Quick Recap

Michael R.Follow

References

mdEditor (for VSCode)

Table of Contents

Overview (TL;DR)

Features

Prerequisites

Installation

killshot13 / mdEditor

Awesome markdown editor for VS Code. Supports linting and prints to HTML, PDF, and MS Word (Docx)!

Usage

Michael R.Follow

Credits

The 50,000px Rule: or, Minimum Sizing for High-Resolution Web Images

Introduction

High-Level Overview

Practical Application

Conclusion

Michael R.Follow

What is Pandoc?

Introduction

Installing Pandoc

--> Pandoc on Windows

--> Pandoc on Linux

Configuring Pandoc

Credit: Pandoc User's Guide

Conclusion

killshot13 / mdEditor

Awesome markdown editor for VS Code. Supports linting and prints to HTML, PDF, and MS Word (Docx)!

Michael R.Follow

Pure CSS Blockquotes

Overview

But How?

Usage

Michael R.Follow

New WordPress Admin Color Palette

WOW!

Michael R.Follow

"Discussions"

A THOROUGH REVIEW OF GITHUB'S LATEST BRAINCHILD

Overview

Features

Configuration

Outlook

Joseph Matthias Goh ・ Jun 20, 2018 ・
codeburst.io