Email Dev Resources Tab:

 Main Build Resources
 Bookmarks Section
 Special Characters Section
 Todo List & Dev Events Section
 Emoji Search Section
 Code Snippets Section
 Shortcuts & Cheatsheets Section
 Render Search Section

---

Main Build Resources:

Bootstrap 5.3.3:
Documentation: https://getbootstrap.com/docs/5.3/getting-started/introduction
CDN Links: https://cdnjs.com/libraries/bootstrap
File Locations:
CSS: css/bootstrap.min.css
JS: js/bootstrap.bundle.min.js

Bootstrap Icons 1.11.3:
Website: https://icons.getbootstrap.com/
CDN Link: https://cdnjs.com/libraries/bootstrap-icons
File Locations:
CSS: css/bootstrap-icons.min.css
Web Open Font Format Files:
css/fonts/bootstrap-icons.woff
css/fonts/bootstrap-icons.woff2

Fonts:
Lexend (Headings): https://fonts.google.com/specimen/Lexend
Poppins (Paragraphs): https://fonts.google.com/specimen/Poppins
Locations:
CSS: css/fonts.css
Woff2: css/fonts/familyName/..

jQuery 3.7.1:
Website: https://releases.jquery.com/
File Location:
JS: js/jquery-3.7.1.min.js

Original Sidebar Nav Design: https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202

---

Bookmarks Section

Date & Time snippet: Script located in js/script.js

Weather Widget:
Website: https://weatherwidget.io
Functionality:
Hover over the weather column to see carousel feature. Follow the instructions on the second slide to add your weather.
Requires an internet connection.
Custom dark/light colors were added through HTML attributes in index.html with versions displaying block or none depending on dark/light.
Dark mode browser extensions may affect colors.

Bookmark Icons:
Main Bookmarks Script: js/customize/bookmarks-main.js
Reviews Bookmarks Script: js/customize/bookmarks-reviews.js
Icons: img/bookmarks/ directory
Icon size: 200px x 200px
Retrieve favicons for new bookmarks: https://webutility.io/favicon-extractor
Bookmark icon images should be live on the web to open multiple links at once due to web browser same-origin policy.

Google Search Snippet: Script located in js/script.js

HTML Entity Encoder/Decoder Feature:
Uses library: https://github.com/mathiasbynens/mothereff.in/tree/master/html-entities
Files: js/entity-encoder/entity-encoder.js directory
Project is dependent on js/entity-encoder/vendor/he.js

Countdown Timer, Stopwatch, Time Calculator, and Time Zones Snippets: Scripts located in js/script.js

Case Convert & Entity Replace:
Located in js/script.js.
Uses entity names unless entity numbers are needed.
Features:
Text added is trimmed when the textarea loses focus.
The Superscript button will <sup< ®, ℠, ™, †, ‡, and §.
The Title Case button omits: a, an, the, at, by, in, of, on, to, up, and, but, or, nor, so, & yet.
Hash, amp, and semi (# & ;) won't convert. See these and hidden special character entities in the special character search section.
Double check dashes when pasting from copy docs (standard dash converts to non-breaking hyphen).

---

Special Characters Section

Special Characters Search JS & JS Objects: Located in js/customize/entities.js
Functionality:
No library or pre-built search feature reference.
Add new HTML entities to entities.js with object properties:
character
htmlEntityName
htmlEntityNumber
description

---

Dev Event & News Section

To Do List feature originally built following a YouTube tutorial: https://www.youtube.com/watch?v=Ttf3CEsEwMQ (bugs fixed and new features added (including sorting & caching) with Chat Bot help).
To Do List JS located in js/script.js
Uses Sortable.js to drag and sort todo items:
https://sortablejs.github.io/Sortable/
https://github.com/SortableJS/Sortable
https://cdnjs.com/libraries/Sortable
If todos aren't clearing when page is refreshed, clear the local storage below. Note: this will clear all todos and weather.

Clear Local Storage

Dev Event Calendar: Located in js/customize/dev-events.js
Functionality:
No library or pre-built snippet reference.
Add new event events to dev-events.js with objects properties:
date
name
presenter
Uses Magnific Popup 1.2.0 (Bootstrap Modal not used), files are in css/magnific-popup.min.css & js/magnific-popup.min.js
https://dimsemenov.com/plugins/magnific-popup/
https://github.com/dimsemenov/Magnific-Popup
https://cdnjs.com/libraries/magnific-popup.js

---

Emoji Search Section

Emoji Entity Search JS & JS JSON/Objects: Located in js/customize/emojis.js
Functionality:
No library or pre-built search feature reference.
Emoji list is from JSON resource: https://gist.github.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb
Add new emojis to js/customize/emojis.js with object properties:
emoji
name
shortname (not displayed)
unicode
html
category
order (not displayed)

Note: above is the object order, not the order displayed in search feature results. New emojis can be added manually, use https://api-ninjas.com/api/emoji to search for emoji entity info to include for search feature.

---

Code Snippets Section

Code Snippets JS: Located in js/customize/code-snippets.js
Functionality:
No library or pre-built accordion feature reference, uses customized Bootstrap accordions.
Accordion Component: https://getbootstrap.com/docs/5.3/components/accordion/

• Add up to 30 snippets by adding code within template literals (backticks) as the value to a new object property.
• The object property name in "double quotes" will show as the Accordion Title before expanding.
• Code snippets require HTML entity encoding due to < html > characters. Use the HTML entities encoder to add your code to js/customize/code-snippets.js.
• Save your code outside the dev tab before encoding.

Code Snippet Highlighting:
Uses highlight.js for code color customization:
Highlight.js 11.8.0: Included in js/highlight.min.js
Color Customization:
Customize colors with css/customize.css or by picking and activating a color theme: https://highlightjs.org/demo then use https://cdnjs.com/libraries/highlight.js to pick your theme’s CSS, add the style file to the head section of index.html, and activate the color theme with the hljs.configure JS snippet at the bottom of index.html below the js/highlight.min.js file.

(Hidden By Default) HTML Entity Encoder/Decoder Feature is the same as in Bookmarks section:
Uses library: https://github.com/mathiasbynens/mothereff.in/tree/master/html-entities
Files: js/entity-encoder/entity-encoder.js directory
and uses a different setting to encode less characters for snippet prep than the quick entities bookmark section feature. Project is dependent on js/entity-encoder/vendor/he.js

---

Shortcuts & Cheatsheets Section

Cheatsheet links go to resources at https://cheatsheets.zip and others.

---

Render Search Section

(Section Hidden By Default)
No library or pre-built search feature reference.
Add new render issues to js/render-search.js with object properties:
clientSpecific
emailClient
description
codeExample

Use the HTML encoder to prepare render snippets for the codeExample.