Scott C. Krause | Monday, Jul 25, 2022
Neodigm 55 is low-code, performant, accessible, and open source. Because it’s so easy to get started it is the perfect solution for quick landing pages or event sites.
Powerful Popups 💡
A modal dialog cannot be closed until the user has answered the questions. The user cannot click anything outside of the popup until satisfying the requirements of the dialog, usually this means clicked a button.
Popups can be chained together in a way that the user encounters them in a consecutive sequence. This is good for linear processes because when one popup closes and the next one opens.
Enhanced CTA Buttons command attention and have a mind of their own. They drive conversions with ambient and interactive animation.
The visual presence leaves no doubt that this is the button that needs to be clicked.
Enchanted CTA Button Usage 💡
🔸 Audio feedback and scrolling animation on hover and click
🔸 Ambient animation makes it clear that this is the button to click
🔸 Random ambient animation cycles, focus user attention on the next action
🔸 Google Analytics / Tag Manager Trackable
🔸 May contain a Marquee component for verbose text
🔸 May be Disabled
For Example 👁️
<a id="js-open-pup--sm" target="_blank" rel="noopener" tabindex="0" aria-haspopup="true" data-n55-enchanted-cta data-n55-enchanted-cta-alt="Text|Alternate" data-n55-enchanted-cta-ambient="emit" data-n55-enchanted-cta-dont-touch="false" data-n55-enchanted-cta-shape-off="false" data-n55-enchanted-cta-size="medium" data-n55-flash-theme="marcom" data-n55-sodapop-id="myPopup--sm" data-n55-theme="night" data-n55-toast="Toast Message" data-n55-wired4sound-click="7" ><span data-n55-wired4sound-mouseover="3">Open Popup ⭐ Small</span><span>Toast Msg ⭐ Flash Theme</span> </a>
Simply copy the two lines of code and paste into the head of any HTML page that you want to make enchanted.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/arcanus55/neodigm55@gh-pages/dist/neodigm55_v2_0.min.css"></link> <script src="https://cdn.jsdelivr.net/gh/arcanus55/neodigm55@gh-pages/dist/neodigm55_v2_0.min.js"></script>
Neodigm Toast is a super convenient way to show a quick message without disrupting the user’s flow. It just pops from the bottom of the screen, displays a message, and then animates off screen.
Its unobtrusive nature makes it perfect for dynamic messages that need to be seen but do not need to occupy precious screen real-estate.
Toast Usage 💡
Neodigm Toast messages are queued, meaning they will be displayed for 6 seconds in the sequence in which they were called; Allowing adequate time for each message to be read and understood.
On a mobile device a Toast message will cause a slight vibration to call attention to the message.
A Toast message may contain two lines of text. The pipe character is used to break text onto multiple lines.
You can add immersive sound effects to your website.
Neodigm Popup (Soda Pop)
Neodigm Popup (Medium)
Neodigm Popup (Large)
<neodigm-parallax data-n55-parallax="PATH TO YOUR BACKGROUND IMAGE" data-n55-parallax-size="small"> <section> <aside></aside> </section> </neodigm-parallax>
Parallax scrolling is a web design technique in which the website background remains fixed while the foreground moves. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive browsing experience.
The Marquee display is a powerful and distinct way to draw attention to important text.
<neodigm-marquee data-n55-marquee-text=" YOUR SCROLLING TEXT HERE " data-n55-marquee-size="small"> <pre data-n55-theme="warning"></pre> </neodigm-marquee>
Neodigm Popup (Modal Dialog)
Neodigm Popup (Daisy Chain)
Neodigm Popup (Daisy Chain)
Popups, Toast, Parallax, and SFX
Curated GA4 Links
Indispensable Curated Google Analytics 4 Links
Curated SFDC Qlik Tableau Links
Indispensable Curated Salesforce Qlik Tableau Links
Curated LWC Links
Indispensable Curated LWC Links
Curated Links Vue.js
Indispensable Curated Vue Links
Curated PWA Links
Indispensable Curated PWA Links
Curated Creative Links
Indispensable Curated Creative Links
Transition to TypeScript
Indispensable Curated TypeScript Links
The Clandestine Dead Drop
The Ironclad Clandestine Dead Drop
New Macbook Setup for Developers
New Macbook Config for Devs 2022
Indispensable Curated Svelte Links
UX Usability Heuristics
HE Heuristic Evaluation
Curated Blogfolios Links
Curated Emerging Tech Links
Indispensable Curated Tech Links
Cytoscape Skills Data Visualization
Persuasive Infographics & Data Visualizations
eCommerce Accessibility A11y
Accessibility Challenges Unique to eCommerce
Roll Dice in High-Fidelity 3D
Create 3D Dice with Strong Random Entropy
Calculate Aspect Ratio of Viewport
Calculate Aspect Ratio of Viewport
Produce CSV with client-side JS. Construct Blog and Download as CSV file.
PWA Add to Home Screen
Progressive Web App ⚡ Advanced Cache && Notification Patterns
Convert an HTML formatted data attrib name to a JS formatted name.
Oracle PL/SQL Stored Procedure
Vintage Stored Procedure to denormalize department codes
Dark Mode and Reduced Motion
Making Dark Mode work with both a UI switch && the OS preference.
Vanilla JS Popover Microinteraction
A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
Vue.js double tap Microinteraction
Firing both a tap and a double-tap on the same element
CSS Advanced Accessibility
Motion, theme, and skip A11Y CSS solutions
JS Airport Geo-Proximity Radius
Airport geo-proximity logic that answers questions, like; “What are the three closest airports to me right now?”
Cypress E2E Quality Assurance
End to End testing 🚀 Headless browser automation
Asynchronous eCom Nav Category Count
Asynchronous recursive crawl reports the total number of products by category.
Color of the Year CSS Styles
Color of the Year 2000 thru 2021 CSS Utility classes
Solve Anagram Puzzle
Do two strings contain the exact amount of letters to form two words?
Virtual Keyboard Extention Configuration
TS Virtual Keyboard Chrome Extention
Web Music Ad Blocker Snippet
Automatically mute the Music player when Ads are playing and unmute when they are done (in Chrome).
Capture Entire DOM State into Inline CSS Snapshot
Save As HTML a snapshot capture of entire DOM State with inline CSS