## Bookmarks

#### Add Your Location for Local Weather

Go to WeatherWidget.io

Add Your Location

Select Get Code

Paste href URL below

Note: "?unit=us" in pasted URL and design settings not needed.

#### Team Time Zones

India IST Time

Eastern EST Time

Central CST Time

Mountain MST Time

Pacific PST Time

#### Client Time Calculator

#### Quick HTML Entities

#### Countdown

00:00:00
Your browser does not support the audio element.

#### Stopwatch

00:00:00.00
Your browser does not support the audio element.

## Special Characters

0 results

No special character results found.

## Todo List & Dev Events

Open Dev Event Calendar

Date | Dev Event Topic | Presenter
--- | --- | ---

#### Sign Up for an Event!

Dev Event Sign Up

#### Resource Hubs

Litmus Resources Hub Salesforce Resources Hub EOA Email Development Braze Resources Hub Figma Resources Library Accoustic Resources Hub

#### Blog Feeds

Litmus Blog Salesforce MC Blog Email On Acid Blog Parcel Blog Figma Blog Salesforce Ben Blog

#### YouTube Channels

Litmus YouTube Salesforce YouTube Cameron Robert YouTube Parcel YouTube Figma YouTube Salesforce Ben YouTube

### Dev Event Presenting Resources

#### PowerPoint Templates

Canva PowerPoint Templates
Dev Event Basic Template
Powerpoint 2025 Template

#### Presentation Design

PowerPoint Basics Tutorial
Storytelling: SCQA Framework
PowerPoint Design with Luis

#### Creative Assets

Adobe Stock Photos Freepik Photos & Icons
Pexels Free Stock Photos

## Emoji Search

0 results

No emoji results found.

## Code Snippets

# Over 30 Accordion Items

#### Build Resources

Parcel Email Resources Outlook Dark Mode CSS Blend Modes Good Email Code
Can I Email
Color Hex

#### PT to PX Converter

Prepare <HTML> for a code snippet!

## Shortcuts & Cheatsheets

Confluence Adobe Workfront Figma Apple Mac OS Microsoft Windows 11 OS Microsoft Teams Microsoft Outlook
Salesforce Google Chrome Chrome Dev Tools Abobe Photoshop Adobe Dreamweaver Github Git
AMPscript Liquid HTML CSS JavaScript VS Code Emmet

## Render Search

Client | Email Client | Render Issue | Code Correction
--- | --- | --- | ---

No render results found.

## Documentation

## Email Dev Resources Tab:

### 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

# Are You Sure?

## You will lose:

#### -Your weather location.

#### -D365 time in the calc.

#### -All of your todo items.

Yep - Clear the cache!

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

## Checklists

#### Render Reviews

- Check for Litmus
- Check CWS for # of renders
- Check for creative comp

#### Initial Reviews

- Check for Litmus
- Check CWS for # of renders
- Check for creative comp

#### Builds & Changes

- Check for Litmus
- Check CWS for # of renders
- Check for creative comp