[{"slug":"dark-mode-toggle-sveltekit-tailwind-windicss","title":"Dark Mode Toggle for SvelteKit with Tailwind or WindiCSS","category":"Programming","creationDate":"2021-06-06","excerpt":"

How I added a dark mode toggle and headroom fixed header hiding feature to this SvelteKit site.

\n","lead":"How I added dark mode toggle, headroom fixed header hider, and back to top features; dark mode honor's your system preference.","author":"Mark Jones","tags":["Dark Mode","WindiCSS","SvelteKit","Static Site"],"html":"

My dark mode toggle honors your system preferences: if your system theme preference is light, you may notice a dark-to-light switch on first load as I enabled it by default, since dark mode is my preference, and then switch to your preference.

≠ Minor Upgrade

From a diff summary comparison 37 files changed, 160 insertions(+), 306 deletions(-). This included a few other updates but the majority was dark mode edits. It's probably easier if you start with plans for dark mode but adding it involves some analisys:

Just add dark:(bg-color text-color) or abstract a common CSS class? The answer varies.

Additional color abstractions

An additional color abstraction can be helpful; the color 'text-gray' can become an easy inversion; dark (text-gray-700) for the light theme and light (text-gray-400) for the dark theme.

WindiCSS Example

// windi.config.js\ntheme: {\n  colors: {\n    gray: {\n      DEFAULT: '#4a5568', // gray-700\n      light: '#cbd5e0', // gray-400\n      100: '#f1f2f5',\n      ...,\n      400: '#cbd5e0',\n      ...,\n      700: '#4a5568',\n      800: '#2d3748',\n      900: '#1a202c',\n    }\n  }\n}

Global CSS Dark Inversion for Color Abstractions

/* global.css */\n.dark .bg-gray {\n  @apply bg-gray-700;\n}\n.dark .text-gray {\n  @apply text-gray-400;\n}\n.dark .bg-gray-light {\n  @apply bg-gray-800;\n}\n.dark .text-gray-light {\n  @apply text-gray-700;\n}

Consider Nightwind for TailwindCSS

JJRanalli came up with a clever solution inverting your colors called Nightwind. Seems pretty cool and includes honoring your system preference and even though it defaults to light, I won't hold that against it. Maybe WindiCSS will get something like that too.

Toggle adapted from munxar's windicss example

I'm thankful for munxar's WindiCSS+SvelteKit example. It was critical in helping me migrate to WindiCSS for this site. Awesomely, munxar's example included a Svelte way to toggle the dark mode. I updated the styling to be up/down but otherwise, the example gave me critical insight into including a dark mode toggle.

Preferred Color Scheme Default

By using window.matchMedia('(prefers-color-scheme: ...)').matches I can honor your preference. Using the code below, it ultimately defaults to dark but adjusts on first loading and upon changing your system's setting.

let dark = true\nconst updateSystemPreferenceDarkTheme = () => {\n  dark = ! matchMedia('(prefers-color-scheme: light)').matches\n}\nonMount(() => {\n  updateSystemPreferenceDarkTheme();\n  matchMedia('(prefers-color-scheme: light)')\n    .addEventListener(\"change\",updateSystemPreferenceDarkTheme)\n});\n

3D Rotation Effect on Blog Cards

When you hover or focus on a blog card, a 3D animation rotates and shows the thumbnail image or title.

I thought this might help a slow browser or connection feel faster. Upon tapping the card to the blog entry, you hover/focus briefly before navigating to the actual page. But page navigation is so fast that the animation is rarely ever seen when you tap on the entry. Is it worth adding a delay for touch events to see the animation just before navigationg? Tell me below.

\n\n

I like and loathe fixed headers. They're great, except when they cover the #target or take up too much space on my not-very-tall laptop screen. There are many ways to adjust this but getting it entirely out of the way seems perfect to me.

Headroom.js allows one to show the fixed navigation when you scroll up, making the assumption that you may want to use the navigation. The Back To Top button on this site borrows the same technique and both will show when you're at the bottom of the page. I adapted svelte-headroom to include options for pinning to the bottom for Back To Top, show and hide at top and bottom, similar to headroom.js.

What do you think? Do you loathe fixed headers? Love them?

Improvement Recommendations Welcome

If you've got a better way to handle the dark mode toggle, something that's more intelligently integrated with the tailwind/windi theme, please share. I feel like there must be a better way to this; inverting most everything (with exclusions) could be much simpler... What do you think? How do you add Dark Mode? Any neat tricks?

\n","readingTime":"4 min read"},{"slug":"added-feature-utterances-comments","title":"Added Feature: Utterances Comments","category":"Programming","creationDate":"2021-06-02","excerpt":"

Feel like commenting? Now you can.

\n","lead":"After evaluating a handful of commenting systems, Utterances likely provides the least friction for most developers.","author":"Mark Jones","tags":["Static Site","SvelteKit","Comments","Utterances"],"html":"

I wanted a commenting feature for blog posts to make it feel more bloggy. Utterances is utterly simple and very easy to integrate to a project already on GitHub or .

Other Commenting Systems Evaluated

I found Uzay-G's article on dev.to about commenting systems for static sites helpful. I also considered:

Disqus
staticman
commento

While staticman appeals to the freegan in me, the set up requires more than Utterances. Given the low volume of visitors to my fledgling site, this is more of a step to be inviting for feedback from y'all.

References

https://averagelinuxuser.com/static-website-commenting/

Why Utterances?

The topics in this blog are generally of interest to other developers likely on GitHub, utteranc.es just makes that super easy.

Adapt Utterances Code to Svelte Component

Utterances code

<script src=\"https://utteranc.es/client.js\"\n    repo=\"[user/repo]\"\n    issue-term=\"pathname\"\n    label=\"✨💬\"\n    theme=\"preferred-color-scheme\"\n    crossorigin=\"anonymous\"\n    async>\n</script>

As a Svelte Component

// $lib/CommentsUtterances.svelte\n<script>\nimport { onMount } from 'svelte';\nonMount(() => {\n    const s = document.createElement('script')\n    const tag = document.getElementById('utterances')\n    s.setAttribute('repo',\"[user/repo]\")\n    s.setAttribute('issue-term',\"pathname\")\n    s.setAttribute('label',\"✨💬\")\n    s.setAttribute('theme',\"preferred-color-scheme\")\n    s.setAttribute('crossorigin',\"anonymous\")\n    s.src = 'https://utteranc.es/client.js'\n    tag.parentNode.insertBefore(s, tag)\n});\n</script>\n<div id=\"utterances\"></div>

theme="preferred-color-scheme" magically observes your system preference.

What do you think?

Now you can tell me! Scroll passed the share widget and give me clue! Or better, use the share widget and add a comment below.

\n","readingTime":"2 min read"},{"slug":"new-site-sveltekit","title":"New Website: Now with SvelteKit!","category":"Programming","creationDate":"2021-05-26","excerpt":"

The new TAOCode site reworked with SvelteKit.

\n","lead":"Built with SvelteKit, MDSVEX, and WindiCSS","layout":"blog","author":"Mark Jones","tags":["Static Site","Svelte","SvelteKit","MDSVEX","WindiCSS"],"html":"

Less than 6 months since I started this new site using Svelte with Routify, I've upgraded to SvelteKit and a new codebase, thanks to Markus Hatvan for sharing his site's code.

Why Upgrade So Soon?

I wanted to tag my content so that it could be navigated by subject or category. I looked for solutions within the Routify ecosystem but did not find a suitable demonstration and this probably isn't Routify's realm of responsibility. Certainly this is possible via Svelte in general (maybe with stores?), but I hadn't found a Svelte demonstration out there either; then I came across Markus Hatvan's code which had all the features I wanted and in SvelteKit, the shiny new code with official Svelte routing.

I initially chose Routify simply because the starter package from Reepolee worked and it was fast! Development startup in roughly 10 seconds and builds in a similar amount of time on my local system. Svite indeed! MarkJonesVoice is still based on Reepolee's build with Routify + Vite + MDSVEX.

A Better Build

I came across Markus' SvelteKit + Tailwind build on GitHub and saw that he already had functioning tags and categories and it was on SvelteKit. Perfect! So I started a new version of the site build based on it.

With WindiCSS

I like TailwindCSS but truly ❤️ WindiCSS. Even though Tailwind JIT (used by MH's build) is faster than the regular Tailwind, WindiCSS feels faster for both dev startup and production build.

Current local system production build times for this site:

WindiCSS: 21.24s
TailwindCSS: 40.65s

For the production build I don't think the JIT mode for Tailwind makes any difference but it certainly improves dev start-up time, just not as much as WindiCSS.

Thanks Markus Hatvan

Thank you Markus Hatvan, for sharing his site's source markushatvan.com source on github.

\n","readingTime":"2 min read"},{"slug":"2-easy-habits-1-year-later","title":"2 Easy Habits - 1 Year Later","creationDate":"2021-05-20","category":"Life","excerpt":"

2 habits made 1 year ago that have improved my health.

\n","lead":"Based on over 40 years of experience, I can attest that my future days *and weight* are dependent on my daily habits. **Duh, *right‽*** The lesson finally sunk in and *—with my focus on health—* I've been able to stick to *2 easy daily habit changes*.","cover":"pen-writing-on-a-paper.jpeg","tags":["Health","Wellbeing","Exercise","Fasting"],"html":"

May 20, 2020 — I was in a minor health crisis if I'd bother to pay attention to my weight. The daily walks around the neighborhood weren't enough to offset the cheese and crispy-crunchy late-night and overnight snacking.

To my thinking: 30 minutes everyday is better than 1 hour every-other-day and eat nutritionally dense food and eating less are key to weight loss.

1) Exercise: 30+ minutes/day

I've stuck to various bodyweight and strength-focused circuit training, 6 days a week with a day off. This varies, some days I will workout for over 40 minutes but I try to keep the intensity to a level that makes much more than 30 minutes a challenge, especially in the beginning. Some days I'm sore and the workout is a little less intense.

I use suspension straps (TRX style) for a variety of upper body and core strength-training exercises. For lower body, many varieties of squats, lunges, deadlifts, ice skaters, bridges, etc... are available with no equipment needed, just move!

I like exercising before breaking my fast, I've never felt like hunger detracted from my workout. If anything, the frenetic energy of hunger helps compel me to move, knowing that I'll have food soon after. This maximizes my fat burning potential and it aids in recovery to eat something after a strong workout, helping to be strong for the next workout.

2) Fast: 12+ hours/night

A surprisingly easy way to eat less. That's important but there appears to be a bit more to fasting than simply eating less. It shifts what your body does with itself; it can more readily access fat as an energy source.

I've never intentionally fasted before so this was a bit scary to start with last year, now it's truly habit. It took at least 3 months to get used to fasting with such intention, after 6 months I've often extended up to 16+ hours. My hunger level varies and when I can quietly get up to 16 hours of fast without hunger being a big annoying irritant, I do. Sometimes I break my fast shorter because I'm too distracted by hunger... but never less than 12 hours.

Results

I lost 30 pounds in the first 6 months! This was great and I thought, cool, only another 20 to go!

Except that I've hit a plataeu for the last 6 months and have maintained a higher-than-ideal weight but much healthier than before.

Weight is just one dimension, I've gained a general mood improvement, improved energy and mental/emotional health. I feel like I can actually take on life again, whereas I was feeling a bit dragged by the bus of life before.

Background

Facing many life changes largely brought on by the global coronavirus pandemic, something finally clicked last year and I knew I needed to make some changes for my longterm health and wellbeing.

Pool Closure

My primary form of exercise has been swimming. I love getting out of gravity for a moment, even if it means always smelling the pool chemicals in my hair and beard. But then the pools were closed and I needed to find another option.

Houshold Changes

During the first part of the pandemic lockdown my best friend moved in with his 2 children. This was a delight and they helped straighten up my place and make it a space we could all share, but it was a big adjustment for me personally; I couldn't imagine braving the start of this lockdown without the support and company of these fine people.

After that Cassidy came to live with me. It's been great to have loved ones to share these stressful days.

Sit-Stand Desk

I got an electronic sit-stand desk and like it very much. I split my time between sitting and standing, shifting is as easy as pressing a button and waiting about 30 seconds.

Exercise Inspiration

I have a few workouts on YouTube that I've done repeatedly. Even after a year I still consider myself generally a "beginner" and modify the workouts by skipping jumping and opting for other low-impact modifications.

I get my heart rate up while challenging my myself with the intent to build muscle strength. By executing in a circuit, I get some cardio benefits while using the time wisely.

Along with some YouTube works (favorites from SELF and Fitness Blender), I have designed my own suspension strap upper body plus core workout.

\n","readingTime":"4 min read"},{"slug":"salem-cae","title":"Salem CAE","creationDate":"2021-04-14","published":"2021-04-14T09:20:00.000Z","category":"Portfolio","excerpt":"

Salem's Celebration of Academic Excellence Drupal powered micro site

\n","lead":"Built with a custom Bulma CSS based theme on Drupal 9","layout":"blog","author":"Mark Jones","thumbnail":"/images/portfolio/salem-cae-thumbnail.jpg","tags":["Drupal 9","CMS","Bulma CSS","SASS/SCSS"],"html":"

The Celebration of Academic Excellence at Salem College is a tradition that just got a new home online.

Goals

Collaborative online editing
Embed videos of student presentations
High resolution images with PDF downloads
Organize Student Presentations by Session and Subject
Include a commenting system

Using Drupal 9 and Bulma CSS I was able to build the site in just under a week. Not bad but there were a few places I was hoping to "inject" some Bulma CSS classes using Drupal Views and/or Layout Builder but eventually I could only get the layout I wanted by customizing the main site CSS. Starting with Bulma still reduced my development time by providing an exceptional starting point. That being said, producing this site has revealed that I prefer TailwindCSS.

Other CMS Options

Since many Content Management Systems can provide video and comments/discussions, we explored a few fairly standard options.

WordPress

WordPress is immensely popular and I use it for some sites, often where the principal consideration is the maintainer's familiarity; if the main stake-holder in the site is already familiar with WordPress and it seems like a good fit for the project I'll use WordPress. It has many plugins and themes and the recent versions have a pretty cool page builder, similar to ConcreteCMS. Drupal's layout builder starts to introduce this to the Drupalverse but I've found Concrete or WordPress a nicer UI.

However, WordPress sites are always being attacked by hackers... always. I get daily alerts about 'admin' user being locked out for failing repeated login attempts. It's immensely helpful to have some kind of security plugin with WordPress to help defend your site. I rarely feel this way about Drupal and is why I almost always prefer a static site.

Google Sites

Google Sites has been a friendly way to put together fairly simple web sites, especially when collaborating to produce the site as multiple editors can work on the site like a Google Doc.

Unfortunately the lack of 2 critical things -- listing pages and theme customization -- lead us away from Google Sites. You can do limited theme customization with Google Sites that would likely be acceptable style-wise for this site. That you can't list out the projects or tag items made it unappealing... Having to add a Presentation and then a custom preview to mimic listing just seemed like more work and error prone than we wanted.

Why Drupal?

Partly familiarity (5+ years) but largely because it's a very capable platform; this site is a trivial use-case for what Drupal can provide.

I've previously put in lots of theme work when developing a site on Drupal but this time I explored a few of the most popular themes, settling on Bulma because it generally did a fair job making the basic layout that I could work with. I'd hoped to simply add CSS classes to enhance the layout in a declarative(?) way like TailwindCSS but found that more difficult than simply dropping in some custom CSS... Not very tailwind like but gets the job done.

\n","readingTime":"3 min read"},{"slug":"markjonesvoice","title":"Mark Jones Voice","category":"Portfolio","creationDate":"2021-04-04","excerpt":"

WindiCSS themed Svelte/Vite WebApp

\n","lead":"Using a similar tech stack to this site, App includes Instant Quote, uses Cloud Functions and WindiCSS","layout":"blog","author":"Mark Jones","thumbnail":"/images/portfolio/markjonesvoice-thumbnail.jpg","site_url":"https://MarkJonesVoice.com","tags":["WindiCSS","Svelte","Vite","App","Accessible"],"html":"

A promotional site for my voicework, you can get an Instant Quote and Hire Me with only a word count. If you haven't counted the words, you can paste the script into the Instant Quote which will count them for you! Try using your voice-to-text for a mind-blowing meta experience watching your script be written from your speech while the word count grows!

Tech Stack

WindiCSS
Svelte
Vite
Firebase Hosting

This site was a rewrite from vanilla JS built on 11ty. Read more about markjonesvoice.com

\n","readingTime":"1 min read"},{"slug":"firebase-cloud-function-send-email","title":"Cloud Function to Send Email","creationDate":"2021-03-23","category":"Programming","excerpt":"

Firebase Cloud Function to send email via MailJet with nodemailer

\n","lead":"Lessons learned creating a Firebase Cloud Function to send an HTML form submission email via MailJet.","layout":"blog","author":"Mark Jones","tags":["Email","MailJet","Firebase","Cloud Function","Learning"],"html":"

The Hire Me form on MarkJonesVoice needed to be handled by something. Before, it was a PHP script, adapted from a the Hugo Zen Theme's contact.php and running on Google Compute Engine instance.

The PHP solution seems anachronistic and requires a server just be available online, sitting there. Also, the resulting PHP code was not exactly pretty and wasn't flexible enough to send ad-hoc fields; they needed to be named in the script explicitly. The code could've accommodated that but requiring a server sitting there waiting for the occassional email just seemed wasteful.

Formsubmit.io

I came across formsubmit.io and really liked how it handled email with ad-hoc fields, really cool. You can choose from 3 templates to somewhat customize your email. If you want to exclude a field from being added to the email, it only needs to be prefixed with '_', also how they require the "control" fields like '_reply', etc...

Ultimately, the lack of style control led me to make my own Cloud Function but I designed it to be more like formsubmit than my lackluster PHP handler.

Firebase Cloud Function

The code segments below contain just the relevant parts of the for handling AJAX (multipart/form-data). You may want to check out any of the recommended reading for links to get you started.

Busboy for "multipart/form-data" (and AJAX) submission

I discovered that I couldn't receive the POST via AJAX in the Cloud Function without processing it through Busboy. Why? When submitting an HTML Form element using AJAX (on-page submission), it's always sent as enctype="multipart/form-data". This surprised me as the PHP script seamlessly handled multipart/form-data but node requires something to extract the fields.

Note that this wasn't an issue for posting directly to the Cloud Function with the default enctype="application/x-www-form-urlencoded". But I wanted on-page submission, so... I tracked down this code to extract the fields:

const Busboy = require('busboy');\n\nfunction extractMultipartFormData (req: functions.https.Request): Record<string,any> {\n  return new Promise((resolve, reject) => {\n    if (req.method !== 'POST') {\n      return reject(405);\n    } else {\n      const busboy = new Busboy({ headers: req.headers });\n      const fields: Record<string,any> = {};
\n  busboy<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'field'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>fieldname<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>fields<span class="token punctuation">[</span>fieldname<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  busboy<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'finish'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">{</span> fields <span class="token punctuation">}</span><span class="token punctuation">;</span>\n    <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  busboy<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>rawBody<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    busboy<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>rawBody<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n    req<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>busboy<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n
\n  });\n};

Email Form Handler Function

export const emailFormHandler =  functions.https.onRequest(async (req,res) => {\n    try {\n\n    const origin = ''+req.headers.origin;\n    if (/markjonesvoice\\.com/.test(origin)) {\n        res.set('Access-Control-Allow-Origin', origin);\n        res.set('Vary', 'Origin');    \n    } else {\n        console.log('Unauthorized origin domain: '+origin);\n        res.status(403);\n        res.send(`Domain ${origin} not authorized.`);\n        return;\n    }\n    const mpfd = await extractMultipartFormData(req);\n    const fields = mpfd.fields;\n\n    const json = fields.hasOwnProperty('_json');\n\n    if (req.method !== \"POST\") {\n        if (json) {\n            res.json({'status':'Error','message':'Requires POST method.'});\n        } else {\n            res.status(405).end();\n        }\n        return;\n    }\n\n    // set some defaults in case required control fields are missing\n    const mSubject = (fields.hasOwnProperty('_subject')) ? fields._subject : \"New Form Submission\";\n    const fromUrl = (fields.hasOwnProperty('_referer') ? fields._referer : req.get('referer'));\n    const fromEmail = (fields.hasOwnProperty('_from_email') ? fields._from_email : \"mark@markjonesvoice.com\");\n    const fromName = (fields.hasOwnProperty('_from_name') ? fields._from_name : \"Mark Jones Voice\");\n    const nextUrl = (fields.hasOwnProperty('_next') && fields['_next'] !== '') ? fields._next : fromUrl;\n    const includeAll = (fields.hasOwnProperty('_include_fields') && fields._include_fields === 'all'); \n    const includeEmpty = (fields.hasOwnProperty('_include_fields') && fields._include_fields === 'empty'); \n\n    // honey trap... '_url' or '_honey' are never set except by bots\n    if (fields.hasOwnProperty('_honey') && fields._honey !== \"\" \n    || fields.hasOwnProperty('_url') && fields._url !== \"\"\n    || fields.hasOwnProperty('name') && \n        (fields.name === undefined || fields.name === \"No Script\" || fields.name === \"\")) {\n    if (json) {\n        res.json({status:\"Error\",message:\"Rejected for honeypot or name.\"});\n    } else {\n        res.status(400).end();\n    }\n    functions.logger.warn('HoneyPot or invalid name submission rejected:',fields);\n    return;\n    }\n\n    let reportHTML = \n    `<div style=\"font-size: 1.1em; background-color: #301F2F; color: #DADADA; text-align: center; padding: 1.5em 0.5em;\">\n    <div><a style=\"font-weight: 900; font-size: 2.5em; text-decoration: none;\" href=\"https://markjonesvoice.com/\"><img alt=\"Mark Jones Voice\" style=\"max-width: 100%; width: 75%; min-width: 300px;\" src=\"${logoGreen}\"></a></div>\n    <p><i>Received: ${(new Date()).toLocaleString(\"en-US\",{timeZone:\"America/New_York\"})}</i>.</p>\n    <table width=\"100%\" border=0 cellspacing=0>\n    <thead>\n    <tr style=\"color: #DADADA; background-color: #241d24; font-size: 1.2em;\">\n        <th style='padding: 0.5em 0.75em;'>⚿</th>\n        <th style='padding: 0.5em 0.75em;'>🛈</th>\n    </tr>\n    </thead><tbody>`;\n    for (const key in data) {\n        const item = data[key];\n        reportHTML += `<tr><td style='background-color: #301F2F; color: #AAA; padding: 0.5em; text-align: right; font-size: 75%;'><b>${key.toUpperCase().replace(/_/g,' ')}</b></td>\n        <td style='background-color: #F4F4F4; border-bottom: 3px solid #301F2F; border-top: 3px solid #301F2F; color: #111; padding: 0.5em; text-align: left;'>${item.toString().replace(/\\n\\r?/g,\"<br>\")}</td></tr>`;\n    }\n    reportHTML += `</tbody></table>\n    <p>From: <a style=\"color: #96ab37;\" href=\"${fromUrl}\">${fromUrl}</a></p>\n    </div>`;\n\n    const reportOpts = {\n        // from: `${fields.name} <${fields.email}>`,\n        from: `${fromName} <${fromEmail}>`, // sender address\n        to: reportRecipients,\n        cc: fields.hasOwnProperty('cc') ? fields.email : '',\n        replyTo: `${fields.name} <${fields.email}>`,\n        subject: mSubject, // Subject line\n        // text: '!' + reportHTML, // plain text body\n        html: reportHTML, // html body\n    };\n\n  /* send reporting email */\n    const transporter = nodemailer.createTransport(\n        `smtps://userid:password@in-v3.mailjet.com`\n    );\n\n    //this is callback function to return status to firebase console\n    const getDeliveryStatus = function (error: any, info: { messageId: any; }) {\n        if (error) {\n            return console.log(error);\n        }\n        console.log('Message sent: %s', info.messageId);\n        // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>\n    };\n\n    if ( ! fields.hasOwnProperty('cc') && fields.hasOwnProperty('_autoreply')) {\n        const replyHTML = `<div style=\"font-size: 1.2em; padding: 1.5em;\">\n    <div><a style=\"font-weight: 900; font-size: 2.5em; text-decoration: none;\" href=\"https://markjonesvoice.com/\"><img alt=\"Mark Jones Voice\" style=\"max-width: 100%; width: 75%; min-width: 400px;\" src=\"${logoPurple}\"></a></div>\n    <p>Hi ${fields.name},</p>\n    <p>${fields._autoreply}</p>\n    <p>I've received your request and will get back to you shortly.</p>\n    <p>- Mark</p>\n    <div><small style=\"color: #333\"><i>Received: ${(new Date()).toLocaleString(\"en-US\",{timeZone:\"America/New_York\"})}</i></small></div>\n    <div><small style=\"color: #333\"><i>From: <a style=\"color: #61435e;\" href=\"${fromUrl}\">${fromUrl}</a></i></small></div>\n    </div>`;\n        const replyOpts = {\n            from: `${fromName} <${fromEmail}>`, // sender address\n            to: fields.email, // list of receivers\n            subject: (fields.hasOwnProperty('_autoreply_subject') ? fields._autoreply_subject : 'MJV Submission Received'), // Subject line\n            html: replyHTML,\n        };\n        // if (false) console.log('RO',transporter,reportOpts,firestore,replyOpts,getDeliveryStatus);\n        transporter.sendMail(replyOpts, getDeliveryStatus);\n    }\n\n    //call of this function send an email, and return status\n    transporter.sendMail(reportOpts, getDeliveryStatus);\n    if (json) {\n        res.json({status:\"Sent\",message:\"Your message was sent\"});\n    } else { \n        res.redirect(nextUrl+\"?status=Sent\");\n    }\n\n    } catch (err) {\n        console.log('Error in emailFormHandler()',err);\n    }\n});

Bonus: Store Submission Data in Firestore

Firestore must be set up and inialized by this point.

admin.initializeApp({\n    credential: admin.credential.applicationDefault(),\n    databaseURL: \"path/to/your/firestore\",\n});\n\ninterface IContactData extends Record<string,any> {\n    date: Date,\n    subject: string,\n    email: string,\n    name?: string,\n    message?: string,\n    fromURL?: string,\n}\n/* store data */\nconst data: IContactData = {\n    date: new Date(),\n    subject: mSubject,\n    email: fields.email,\n    name: fields.name,\n    from_URL: fromUrl,\n}\nfunction addField(fieldName:string) {\n    if (fields.hasOwnProperty(fieldName) \n    && (includeEmpty || fields[fieldName] !== '')) {\n        data[fieldName] = fields[fieldName];\n    }\n}\nfor (const key in fields) {\n    if (includeAll || ! key.startsWith('_')) {\n      addField(key);\n    }\n}
\nconst collection = firestore.collection('web_forms');\nconst docref = collection.add(data)\n.then(function() {\n    console.log("Saved!",docref);\n}).catch(function (error) {\n    console.log("Error while saving,",error);\n});\n/* end store data */

Conclusion

My cloud function does what I want it to do and does a fair job filtering spam thanks to the honeypot. The only real trick that I'm sharing is how to handle the AJAX with busboy; I didn't find a great reference for just wanting to deal with the fields, most of the time Busboy is introduced to receive the file for upload, hence multipart.

\n","readingTime":"6 min read"},{"slug":"traincycle","title":"TRAINcycle","description":"A training collaboration site for the arts","creationDate":"2021-03-03","category":"Portfolio","excerpt":"

Static site with Hugo, TailwindCSS, Animated SVG and more

\n","lead":"A medium sized Hugo static site with light/dark TailwindCSS custom theme and nice animation","site_url":"https://TRAINcycle.org","thumbnail":"/images/portfolio/traincycle-thumbnail.png","layout":"blog","author":"Mark Jones","tags":["Static Site","Hugo","TailwindCSS","Animated SVG"],"html":"

This is one of the larger static sites I've developed. It builds in under 1 minute with TailwindCSS compilation taking up the majority of the time.

Beyond Hugo, I created the rotating cog animation including figuring out a functional tooth count and rotation rate to create the illusion of cogs rotating against each other.

\n","readingTime":"1 min read"},{"slug":"etsaman","title":"Etsaman.VIP","creationDate":"2021-03-01","category":"Portfolio","excerpt":"

Static Site and Shopping Cart with advanced animated SVG

\n","lead":"An art project and one of my first Static Sites using Hugo.","layout":"blog","author":"Mark Jones","site_url":"https://Etsaman.VIP","thumbnail":"/images/portfolio/etsaman-thumbnail.jpg","tags":["Static Site","Hugo","Animated SVG","Humor"],"html":"

Tech Stack

Hugo for site generation
Magento for shopping cart
Greensock animation for the Animated Poop flow

\n","readingTime":"1 min read"},{"slug":"my-1st-svelte-app","title":"My 1st Svelte App - Mark Jones Voice","creationDate":"2021-02-12","category":"Programming","excerpt":"

My first Svelte App, using Vite, WindiCSS and MDSVEX

\n","lead":"Re-written from an 11ty static site, now Svelte and *~90% leaner*.","layout":"blog","author":"Mark Jones","tags":["Svelte","Vite","blog","WindiCSS"],"html":"

Originally I worked up a Vanilla JS + TailwindCSS 11ty site. This involved lots of event throwing and catching to maintain the variables and their interaction with clumsy functions that only served to keep the multiple variables updated as the user starts selecting options; hence why it was a natural fit to become a Svelte App.

Additionally, the site required a PHP script to handle the Hire Me form submission.

Enter Svelte

Using svelte made it easier to do even more, like show a wait animation while awaiting the response from the Hire Me form. Before using svelte that was just another complexity to manage, one too many.

I estimate that my code shrunk to nearly 1/10th its prior "Vanilla JS" size when rewritten in Svelte. It's not just less lines of code, it's easier to read and understand what's going on. Hence why Svelte is Cool.

Enter Cloud Functions

Instead of requiring a PHP script (and server to keep the script available), I created a Firebase Cloud Function to send email from the Hire Me form. This also took less code than the equivalent PHP script. It also has the advantage of connecting into Firebase Firestore to record the data in the cloud in addition to sending the email. Plus, it's NodeJS instead of PHP, and I like JS a bit more than PHP.

App v2.1

The first version of the MJV App with Svelte, Vite, Routify and MDSVEX used TailwindCSS+PostCSS and took over 10 minutes to build on my local system! What‽ ... It seemed crazy to take that long to build 3 pages. To be fair, GitHub would build it in under 2 minutes on production deploy. I still don't know why it was so slow on my local system. I gave up trying to fix it because the Tailwind part adds 20 seconds to startup. Worth it if the dev environment stays snappy but it turns out there's a faster way...

Enter WindiCSS

While exploring how to improve Tailwind's speed, I came across WindiCSS and there's simply no turning back.

WindiCSS starts up quickly, under 2 seconds no longer over 20 (wow!)
WindiCSS provides everything I love about TailwindCSS but can "rebuild" in under a second, roughly 10x quicker than using TailwindCSS+PostCSS.
Configuring WindiCSS was easy, a couple small edits to use Windi's modules for things like typography and colors.

Starter Template

I'm still figuring out how to brew up my own starter templates and adding WindiCSS can be tricky to those of us new to Rollup; thanks to reepolee on github for sharing the starter package svelte-routify-windi-vite which was my point of departure for the version 2.1 of MarkJonesVoice.

\n","readingTime":"3 min read"},{"slug":"svelte-is-nice-piece-of-app","title":"Svelte is a Nice Piece of App","creationDate":"2021-02-01","category":"Programming","excerpt":"

After sampling many other App frameworks... svelte won me over!

\n","lead":"I landed on a nice, fast, fun build using Svelte, Vite and MDSVEX styled by WindiCSS","author":"Mark Jones","tags":["Svelte","WebApp","static site"],"html":"

I'm impatient. I want things to run fast enough that I don't have time to wonder what's taking so long?

After all, if it's just a few pages, why would it take nearly 10 minutes to build?

I've

Laziness Rules!

I prefer to be lazy and don't want to come up with CSS names. I understand why, in some situations, you might prefer BEM style CSS but for me, Tailwind provides just the right amount of style, standard names, and flexibility within reasonable, functional limits.

Why TailwindCSS

With the ability to create a custom theme by setting up a few colors and otherwise have a concise, elegant(ish), responsive standard library of classes. 👨‍🍳💋

I'm a fan of the shorthand class naming convention and there's always room to extend the theme as needed by adding custom abstractions.

Bottom line: Tailwind saves me time, except when it doesn't...

Why WindiCSS

I was experiencing 20+ second wait on starting the dev site. While not bad, every theme level CSS edit had

What Apps/SSGs have I sampled?

Gatsby
\nI never got Gatsby set up properly. I tried. It was slow to start even before adding Tailwind. I moved on.
11ty
\nI wanted to love 11ty but it was slower than Hugo to build and troubling

\n","readingTime":"2 min read"},{"slug":"why-i-started-this-blog","title":"Why I Started This Blog","creationDate":"2021-01-12","category":"Life","excerpt":"

In gratitude for others that have shared useful ideas and solutions.

\n","lead":"I doubt I'll ever realize just how much I've gained from others sharing what they've learned or created. I made this blog to share some notes on things I've learned, especially around making web sites.","cover":"pen-writing-on-a-paper.jpeg","tags":["Hustle","Creativity","Writing","Personal development","Blogging"],"html":"

A Deeper Explanation

I hope to share my ideas effectively and help you get to useful solutions quickly. I'm often finding answers on stackoverflow and the self-service/self-help sites often including other bloggers like me, sharing their expertise.

Partly, I'll have some solutions here that I may want to refer back to, a notes journal for my own reference, just publicly available so that others may find useful.

Irregular by Nature

Posts will come as I have relevant information to share and in their own organic timeline. I'd previously considered something like this but I did not like the various platforms I've tried to produce it. Although my effort in producing this blog is for sharing knowledge, there's no release schedule and the content strategy is simply quality writing on interesting subjects or hard-to-solve problems.

General Topics

Programming; especially JavaScript - Node and App making, and PHP or Go/Hugo, the things I use to produce web sites and topics I want to learn more about.
My portfolio; a showcase of things I've produced with notes that may be valuable to others.
Art and animation; I find delight in creating animated SVGs and nice CSS transitions.
Other related or unrelated topics

\n\n

After I've searched a dozen times and have determined that whatever I've learned hasn't yet be captured in a conclusive way, I'll put my notes up here; this is largely for myself. Could I use Google Docs or similar? Yes, of course, but then it wouldn't be as beautiful nor something that I can trick out anyway I like.

My Main Hustle

Coding websites, themes, CMS, CDN, etc... has been my main source of income, my main hustle, instead of a side-hustle. I like programming and improving projects and deliverables.

Side Hustle

For a side hustle, check out MarkJonesVoice. I'd love to read a script for your production, though I totally get that thes cross-over between a programmer's blog and voice over actor is maybe a bit of a stretch.

Know the name: TAOCode

I've sat on this domain for a long time. Perhaps a project worthy of the name will emerge and provide a future gig for me. I mean, it seems like The Art of Code should maybe be an Oracle or Dev.to or something special. It begins by me putting what I can into it and seeing where this effort takes me.

After all, I code websites for other people all the time, but like the landscaper, my own was a bit neglected for a number of years. I hope you find this site so useful that you think: "we should hire the taocode guy".

\n","readingTime":"3 min read"},{"slug":"new-site","title":"New Website!","category":"Programming","creationDate":"2021-01-10","excerpt":"

The new TAOcode site launched.

\n","lead":"Built with Svelte, Svite, Routify, Windicss, and MDSVEX","layout":"blog","author":"Mark Jones","tags":["Static Site","Svelte","Routify","Vite","WindiCSS"],"html":"

\n
May 24, 2021 Update: this site is now powered by SvelteKit. Read more about this update on
\n

I've worked on websites since Before Google (BGE). There have been so many advancements since those PERL scripts running through the /cgi-bin/ folder in the mid-90s. I've loved the static site since before it has become the trend. It's is a direction that I like for many projects because it makes hosting faster, cheaper and more secure.

I've created a handful of static sites using Hugo and 11ty and have made attempts with many other projects like Gatsby and more. Most of these I got stuck somewhere trying some combination with Tailwindcss or some image processing library. If I didn't get stuck, I became dissappointed and lacked the patience to have to wait for 1) start-up dev time over 30 seconds and 2) dev edits taking more than a couple seconds or over 20 seconds for some CSS change to update after Tailwind does all its magic. Delays in edits or long start-up times make coding way less fun and make it challenging to experiment with the code, having to pay the waiting penalty for a typo. Uncool.

Hugo

Hugo, a Go Language static site generator (SSG), works well. It's been faster and simpler to set-up than most any JS SSG I've tried (Gatsby, 11ty, ...). It's easy to be successful with a free template and offers awesome systems from related content to menu handling, taxonomy (tags), and has shortcodes and partial templates. I find Hugo an impressive platform.

\n\n

Hugo Pros

Great starting recipe
Easy to be succesfull
Very fast site generation
Quick reloads for editing

I love Hugo but not necessarily the Go language.

Hugo supports so many website needs but it is a bit of an island unto itself. Yes, it can incorporate Node.js projects and do advanced things like SASS, SCSS, Lesss, PostCSS and all so it's extensible, but then there's a language shift (JS) from the Go Language.

\n\n

Hugo Cons

I find it a little strange to have to "double" shortcodes and partial templates. That is, your templates can't use your shortcodes. I've ended up with nearly duplicated code from partial to shortcode to provide the functionality between template and content.

Advanced image processsing/optimizing can be added to Hugo but like many advanced features it requires a bit of you to know how to navigate the tools as there's a lot of freedom. This is great, but I know there's more for me to understand about Hugo's more advanced features.

\n\n

Why Svelte?

Because it's fast and effecient.

This is a static site, right? So why use Svelte? The line between WebApp and static site is blurry; Gatsby is built React, for example.

Svelte is the coolest development experience. I've generally had fair success in learning Svelte ideas and love how easy it is to do wizard level app features using Svelte. Ultimately, I really appreciate effeciency and speed.

Why Routify?

Isn't SvelteKit available? Sure, but it's not static site focussed, whereas Vite + Routify are speedy and spit out a SSG in seconds.

Why Windicss?

Because I love Tailwind but suffer from it's rebuild time. Now that I've found windicss, I'm in love. ♡

WindiCSS does some magic that makes TailwindCSS syntax very fast to make any changes.

Thanks to Reepolee

Special thanks to reepolee on github for sharing the starter package svelte-routify-windi-vite.

\n","readingTime":"3 min read"},{"slug":"salem","title":"Salem Academy & College","creationDate":"2008-10-20","excerpt":"

Combination of Drupal, Concrete CMS, WordPress and more

\n","lead":"Over a decade of site delivery evolution; currently using mostly Drupal on Google Compute Engine","category":"Portfolio","author":"Mark Jones","thumbnail":"/images/portfolio/salem-thumbnail.jpg","site_url":"https://www.salem.edu","tags":["Drupal","ConcreteCMS","Wordpress","Gulp","SASS/SCSS/LESS"],"html":"

Managing the public facing sites for salem.edu and salemacademy.com has been my main job since 2008.

I've used many systems over the years from Joomla, Plone, and Cascade Server to Drupl, WordPress and ConcreteCMS.

Tech Stack

Drupal for many sites
ConcreteCMS for salemacademy.com
Gulp for theme task running
SASS/SCSS for theme

\n","readingTime":"1 min read"}]

≠ Minor Upgrade

Additional color abstractions

WindiCSS Example

Global CSS Dark Inversion for Color Abstractions

Consider Nightwind for TailwindCSS

Toggle adapted from munxar's windicss example

Preferred Color Scheme Default

3D Rotation Effect on Blog Cards

Fixed Header Hider

Improvement Recommendations Welcome

Other Commenting Systems Evaluated

References

Why Utterances?

Adapt Utterances Code to Svelte Component

Utterances code

As a Svelte Component

What do you think?

Why Upgrade So Soon?

A Better Build

With WindiCSS

Thanks Markus Hatvan

1) Exercise: 30+ minutes/day

2) Fast: 12+ hours/night

Results

Background

Pool Closure

Houshold Changes

Sit-Stand Desk

Exercise Inspiration

Goals

Other CMS Options

WordPress

Google Sites

Why Drupal?

Tech Stack

Formsubmit.io

Firebase Cloud Function

Busboy for "multipart/form-data" (and AJAX) submission

Email Form Handler Function

Bonus: Store Submission Data in Firestore

Recommended Reading

Conclusion

Tech Stack

Enter Svelte

Enter Cloud Functions

App v2.1

Enter WindiCSS

Starter Template

Laziness Rules!

Why TailwindCSS

Why WindiCSS

What Apps/SSGs have I sampled?

A Deeper Explanation

Irregular by Nature

General Topics

Document Findings, Share Insight

My Main Hustle

Side Hustle

Know the name: TAOCode

Hugo

Hugo Pros

Hugo Cons

Why Svelte?

Why Routify?

Why Windicss?

Thanks to Reepolee

Tech Stack