11 |
12 |
13 | {{ content | safe }}
14 |
15 |
16 |
17 |
11 |
12 |
13 |
14 |
15 | {{ content | safe }}
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/assets/utils/analytics.js:
--------------------------------------------------------------------------------
1 | const metadata = require('../../../_data/metadata.json')
2 |
3 | var analyticsCode = ``
4 | metadata.domain == "brycewray.com"
5 | ? analyticsCode = /*HTML*/`
6 |
7 |
8 |
9 | `
10 | : analyticsCode = ``
11 |
12 | module.exports = analyticsCode
--------------------------------------------------------------------------------
/src/assets/css/footnotes.css:
--------------------------------------------------------------------------------
1 | /* start, footnotes */
2 |
3 | .footnote-ref {
4 | font-size: 0.65em;
5 | }
6 |
7 | .footnote-ref a {
8 | @apply border-transparent;
9 | }
10 |
11 | .footnotes-sep {
12 | @apply mb-3;
13 | }
14 |
15 | .footnotes-list {
16 | @apply list-decimal pl-6;
17 | }
18 |
19 | .footnote-item, .footnote-item p {
20 | @apply text-sm tracking-normal;
21 | }
22 |
23 | .footnote-item pre, .footnote-item code {
24 | @apply text-xs;
25 | }
26 |
27 | /* == end, footnotes */
--------------------------------------------------------------------------------
/src/assets/css/index.css:
--------------------------------------------------------------------------------
1 | /*! purgecss start ignore */
2 | @import 'reset.css';
3 | @import 'fonts_Inter.css';
4 | @import 'prismjs.css';
5 | @import 'tailwindcss/base';
6 | @import 'global.css';
7 | @import 'utility.css';
8 | @import 'tables.css';
9 | @import 'footnotes.css';
10 | /* @import 'nav.css'; */
11 | @import 'lazyload.css';
12 | @import 'intervf.css';
13 | /* @import 'ffoxobliq.css'; */
14 | @import 'tailwindcss/components';
15 | /*! purgecss end ignore */
16 | @import 'tailwindcss/utilities';
--------------------------------------------------------------------------------
/src/assets/js/mobile-menu-helper.js:
--------------------------------------------------------------------------------
1 | // based on https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/javascript/navbars
2 |
3 | document.getElementById('collapse-button').addEventListener("click", function() {
4 | document.getElementById('collapse-button').classList.toggle("hamburger")
5 | document.getElementById('collapse-navbar').classList.toggle("hidden")
6 | document.getElementById('collapse-button').classList.toggle("close")
7 | document.getElementById('collapse-navbar').classList.toggle("flex")
8 | })
--------------------------------------------------------------------------------
/_data/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "brycewray.com",
3 | "url": "https://www.brycewray.com",
4 | "domain": "brycewray.com",
5 | "description": "brycewray.com — Observations, opinions, geekery.",
6 | "feed": {
7 | "subtitle": "brycewray.com — Observations, opinions, geekery.",
8 | "filename": "index.xml",
9 | "path": "/index.xml",
10 | "url": "https://www.brycewray.com/index.xml",
11 | "id": "https://www.brycewray.com/"
12 | },
13 | "author": {
14 | "name": "Bryce Wray",
15 | "email": "bw@brycewray.com"
16 | }
17 | }
--------------------------------------------------------------------------------
/src/assets/js/mobile-menu-helper-43fb7823038540f51b3a6b962b0b5089.js:
--------------------------------------------------------------------------------
1 | // based on https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/javascript/navbars
2 |
3 | document.getElementById('collapse-button').addEventListener("click", function() {
4 | document.getElementById('collapse-button').classList.toggle("hamburger")
5 | document.getElementById('collapse-navbar').classList.toggle("hidden")
6 | document.getElementById('collapse-button').classList.toggle("close")
7 | document.getElementById('collapse-navbar').classList.toggle("flex")
8 | })
--------------------------------------------------------------------------------
/_data/siteparams.json:
--------------------------------------------------------------------------------
1 | {
2 | "siteURLforOG": "https://www.brycewray.com",
3 | "siteBaseURL": "/",
4 | "siteTitle": "BryceWray.com",
5 | "siteAuthor": "Bryce Wray",
6 | "siteDescription": "brycewray.com — Observations, opinions, geekery.",
7 | "feed": {
8 | "subtitle": "brycewray.com — Observations, opinions, geekery.",
9 | "filename": "index.xml",
10 | "path": "/index.xml",
11 | "url": "https://www.brycewray.com/index.xml",
12 | "id": "https://www.brycewray.com"
13 | },
14 | "respSizes": [ 300, 450, 600, 750, 900, 1050, 1200, 1350, 1500 ]
15 | }
--------------------------------------------------------------------------------
/src/sitemap.html:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: /sitemap.xml
3 | eleventyExcludeFromCollections: true
4 | ---
5 |
6 | General note: This site’s appearance, configuration, hosting, and other basic considerations will change over time. As a result, certain content on this page could be at variance with what you’re currently seeing on the site, but the two were consistent when this post originally appeared.
` 4 | return disclaimer 5 | } 6 | 7 | // The HTML above is escaped properly only if white space is *not* used, hence the lack of indentation above. For more details, see https://github.com/11ty/eleventy/issues/180. -------------------------------------------------------------------------------- /_data/eleventyComputed.js: -------------------------------------------------------------------------------- 1 | // for excluding "future" content from production builds 2 | // https://saneef.com/tutorials/hiding-posts-with-future-dates-in-eleventy/ 3 | 4 | const isPageFromFuture = ({ date }) => 5 | process.env.ELEVENTY_ENV === "production" && date.getTime() > Date.now() 6 | 7 | module.exports = { 8 | permalink: (data) => { 9 | const { permalink, page } = data 10 | if (isPageFromFuture(page)) return false 11 | 12 | return permalink 13 | }, 14 | eleventyExcludeFromCollections: (data) => { 15 | const { eleventyExcludeFromCollections, page } = data 16 | if (isPageFromFuture(page)) return true 17 | 18 | return eleventyExcludeFromCollections 19 | }, 20 | } -------------------------------------------------------------------------------- /src/assets/css/intervf.css: -------------------------------------------------------------------------------- 1 | /* === handling Inter VF obliquing */ 2 | .italic, i, cite, em, var, address, dfn, h3, h5 { /* dealing with Inter VF */ 3 | font-variation-settings: 'slnt' -8; 4 | /* previous is needed by Chromium and Safari; its presence makes Firefox "over-slant" Inter VF, so we override that below with the media query for Firefox */ 5 | font-style: oblique 8deg; 6 | /* previous is needed by Firefox and Safari; it apparently has no effect on Chromium */ 7 | } 8 | 9 | @supports (-moz-appearance: none) { 10 | .italic, i, cite, em, var, address, dfn, h3, h5 { 11 | /* font-variation-settings: normal; */ 12 | font-style: normal; 13 | } 14 | } 15 | /* === end, handling Inter VF obliquing */ -------------------------------------------------------------------------------- /src/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 - Page not found 3 | layout: base 4 | permalink: 404.html 5 | eleventyExcludeFromCollections: true 6 | #Comes into play only on Netlify -- see https://www.11ty.dev/docs/quicktips/not-found/ 7 | --- 8 | 9 |Page not found
11 |Sorry, that page isn’t on this site.
12 |Please use the navigation menu (above) or the sitemap to find another page.
13 |{{ title }}
3 | {% if subtitle %}{{ subtitle }}
{% endif %} 4 | {% if description %}{{ description }}
{% endif %} 5 |
6 | {{ page.date | htmlDateString }}{% if lastmod %}
Last modified {{ lastmod | htmlDateString }}{% endif %}
7 |
13 | *(Spammers, you and your bots will never get past my **Junk** folder, so don't bother.)* 14 | 15 | **Note**: I'm always interested in *mentioning* what my readers have to say, so please let me know in your email if that's acceptable. To respect your [privacy](/privacy), I will **not** attribute your comments to you unless you give your explicit permission. *(However, I still may quote you while giving you anonymity. Even if you've given your permission to quote you by name, I reserve the right to quote you anonymously.)* 16 | {.yellowBox} 17 | 18 | ## Follow me 19 | 20 | - [brycewray on GitHub](https://github.com/brycewray/) 21 | - [@BryceWrayTX on Twitter](https://twitter.com/BryceWrayTX/) 22 | - This site’s news feed ([JSON](/index.json) or [RSS](/index.xml)) 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | (c) 2018–2021 Bryce Wray 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/assets/svg/svgLinkedInIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/css/tables.css: -------------------------------------------------------------------------------- 1 | 2 | table.leagues { 3 | @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse; 4 | } 5 | 6 | table.leagues td.col { 7 | @apply w-1/2; 8 | } 9 | 10 | @media (min-width: 900px) { 11 | table.leagues { 12 | @apply w-3/5; 13 | } 14 | table.noborders { 15 | @apply w-11/12; 16 | } 17 | } 18 | 19 | table.noborders { 20 | @apply w-full border-0 border-collapse mt-6 mx-auto mb-4; 21 | } 22 | 23 | table.noborders td { 24 | @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2; 25 | /* text-align: left !important; */ 26 | } 27 | 28 | table.noborders td img { 29 | @apply inline-block align-middle m-0; 30 | } 31 | 32 | table.noborders tr { 33 | @apply bg-blue-100; 34 | } 35 | 36 | table.noborders tr:nth-child(even) { 37 | @apply bg-gray-200; 38 | } 39 | 40 | table.noborders thead tr { 41 | @apply bg-blue-700; 42 | } 43 | 44 | table.noborders thead td { 45 | @apply text-white font-bold; 46 | } 47 | 48 | table.noborders td.td70 { 49 | @apply w-[70%]; 50 | } 51 | 52 | table.noborders td.td70 img { 53 | @apply block w-1/2 h-auto max-w-[50%]; 54 | } 55 | 56 | table.noborders td.td30 { 57 | @apply w-[30%]; 58 | } 59 | -------------------------------------------------------------------------------- /src/assets/css/fonts_Public_Sans.css: -------------------------------------------------------------------------------- 1 | /* === Inter, variable === */ 2 | /* === 3 | references: 4 | https://thetrevorharmon.com/blog/how-to-prepare-and-use-variable-fonts-on-the-web 5 | https://rwt.io/typography-tips/getting-bent-current-state-italics-variable-font-support 6 | === */ 7 | /* latin */ 8 | @font-face { 9 | font-family: 'Public Sans'; 10 | font-weight: 1 999; 11 | font-style: normal; 12 | font-display: swap; 13 | /* optional is best for first-run CLS checks; swap looks better on one-hit */ 14 | src: url('/assets/fonts/Public-Sans-Roman-VF-1-008_2020-01-08_subset.woff2') format('woff2-variations'); 15 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 16 | } 17 | @font-face { 18 | font-family: 'Public Sans'; 19 | font-weight: 1 999; 20 | font-style: italic; 21 | font-display: swap; 22 | /* optional is best for first-run CLS checks; swap looks better on one-hit */ 23 | src: url('/assets/fonts/Public-Sans-Italic-VF-1-008_2020-01-08_subset.woff2') format('woff2-variations'); 24 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 25 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | _cache 3 | .cache 4 | dist 5 | build 6 | node_modules 7 | 8 | # Compiled source # 9 | ################### 10 | *.com 11 | *.class 12 | *.dll 13 | *.exe 14 | *.o 15 | *.so 16 | 17 | # Packages # 18 | ############ 19 | # it's better to unpack these files and commit the raw source 20 | # git has its own built in compression methods 21 | *.7z 22 | *.dmg 23 | *.gz 24 | *.iso 25 | *.jar 26 | *.rar 27 | *.tar 28 | *.zip 29 | 30 | # Logs and databases # 31 | ###################### 32 | *.log 33 | *.sql 34 | *.sqlite 35 | 36 | # OS generated files # 37 | ###################### 38 | .DS_Store 39 | .DS_Store? 40 | ._* 41 | .Spotlight-V100 42 | .Trashes 43 | ehthumbs.db 44 | Thumbs.db 45 | _site 46 | _site 47 | 48 | *.code-workspace 49 | .env 50 | 51 | data/*.json 52 | 53 | .lazyimages.json 54 | 55 | pngquant* 56 | 57 | imgxfm_SAFE.js 58 | # Local Netlify folder 59 | .netlify 60 | 61 | .base64imgs.txt 62 | .base64imgs.json 63 | arraytest.js 64 | .firebase 65 | .vercel 66 | .firebaserc 67 | .Ulysses*.plist 68 | ztest.js 69 | 70 | .vscode 71 | 72 | gh-pages 73 | gh-pages.pub 74 | .nova 75 | 76 | src/_includes/css/*.* 77 | 78 | csshash 79 | 80 | csp.txt 81 | 82 | _data/csshash.json 83 | _data/year.json 84 | 85 | _data/jshash.json 86 | 87 | _data/lazyloadhelper.json 88 | _data/mobilemenuhelper.json -------------------------------------------------------------------------------- /src/assets/svg/svgTwitterIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jshash.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const md5 = require('md5') 3 | const DIRECTORY = 'src/assets/js' 4 | const LAZYDATAFILE = '_data/lazyloadhelper.json' 5 | const MOBIDATAFILE = '_data/mobilemenuhelper.json' 6 | var lazyloadFile = DIRECTORY + '/' + 'lazyload-helper.js' 7 | var mobimenuFile = DIRECTORY + '/' + 'mobile-menu-helper.js' 8 | 9 | var lazyloadMd5Total = 0 10 | var lazyloadContent = '' 11 | var mobimenuMd5Total = 0 12 | var mobimenuContent = '' 13 | 14 | lazyloadContent = fs.readFileSync(lazyloadFile) 15 | mobimenuContent = fs.readFileSync(mobimenuFile) 16 | 17 | lazyloadMd5Total = md5(lazyloadContent) 18 | console.log(`lazyload MD5 result = `, lazyloadMd5Total) 19 | mobimenuMd5Total = md5(mobimenuContent) 20 | console.log(`mobimenu MD5 result = `, mobimenuMd5Total) 21 | 22 | var lazyloadValue = `{ 23 | "lazyloadJS": "lazyload-helper-${lazyloadMd5Total}.js" 24 | }` 25 | var mobimenuValue = `{ 26 | "mobimenuJS": "mobile-menu-helper-${mobimenuMd5Total}.js" 27 | }` 28 | 29 | // actual file-handling 30 | 31 | fs.writeFileSync(LAZYDATAFILE, lazyloadValue) 32 | fs.writeFileSync(MOBIDATAFILE, mobimenuValue) 33 | 34 | // create the actual JS files 35 | fs.writeFile(DIRECTORY + '/' + 'lazyload-helper-' + lazyloadMd5Total + '.js', lazyloadContent, (err) => { 36 | if (err) 37 | console.log(err) 38 | }) 39 | fs.writeFile(DIRECTORY + '/' + 'mobile-menu-helper-' + mobimenuMd5Total + '.js', mobimenuContent, (err) => { 40 | if (err) 41 | console.log(err) 42 | }) 43 | -------------------------------------------------------------------------------- /src/assets/svg/svgGitHubIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_includes/layouts/sitemap/sitemap.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: sitemap 3 | layout: base 4 | eleventyExcludeFromCollections: true 5 | --- 6 | 7 |
9 |
29 | Sitemap
10 | 11 |Main pages
12 |-
13 |
- Home page 14 |
- About me 15 |
- Site’s privacy policy 16 |
- How to contact me 17 |
Posts
19 |-
20 |
- Complete list (first page of paginated list; five posts per page) 21 | {% for post in collections.post | reverse %} 22 |
- {{ post.data.title | safe }} • {{ post.date | htmlDateString }}
23 | {{ post.data.subtitle | safe }}
24 | {{ post.data.description | safe }} 25 |
26 | {% endfor %}
27 |
8 |
34 |
9 |
11 | Welcome to brycewray.com, offering its owner’s “observations, opinions, and geekiness” since 2018.
10 |
12 |
13 |
33 | Latest posts
14 | {% for post in collections.post | reverse %} 15 | {% if loop.index0 < 3 %} 16 |
17 |
29 | {% endif %}
30 | {% endfor %}
31 | {{ post.data.title | safe }}
18 |{{ post.data.subtitle | safe }}
19 |
20 |
21 | {% if post.data.lastmod %}
22 |
Last modified
23 | {% endif %}
24 |
26 | {{ post.data.description | safe }} 27 |
28 |All {{ collections.post.length }} posts (listed five per page)
32 |
47 | ![${alt}]()
60 |
61 | and
19 |
26 | ---
27 |
28 | *(With apologies to the late John Lennon and the very much still-with-us Sir Paul McCartney. [Original lyrics](https://en.wikipedia.org/wiki/When_I'm_Sixty-Four) © Sony/ATV Music Publishing LLC.*)
29 |
30 | Long before aging,
31 | I lost my hair
32 | Many years ago,
33 | So there's no point belaboring that
34 | Or hiding it by wearing a hat.
35 |
36 | Quarter past three is
37 | About when I wake.
38 | [I can't sleep much more](https://www.sleepfoundation.org/articles/aging-and-sleep).
39 | That's just the way
40 | My life goes these days:
41 | Now I'm sixty-four.
42 |
43 | I'm still a tech nerd,
44 | Although some folks my age
45 | [Struggle to use Word](https://www.dummies.com/software/microsoft-office/office-2019-for-seniors-for-dummies-cheat-sheet/).
46 |
47 | When my employer's
48 | Websites need work,
49 | Or when my own does, too,
50 | I'm just glad that I can still code
51 | And that I still "get" Admin mode.
52 |
53 | Building `do-while` [loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while), editing [styles](https://developer.mozilla.org/en-US/docs/Web/CSS):
54 | Who could ask for more?
55 | That's why work needs me
56 | And it still feeds me
57 | Though I'm sixty-four.
58 |
59 | Getting older is a thing you have to do
60 | In the course of life. That's just the deal.
61 | But it's not all bad.
62 | Now a grandchild's on the way:
63 | A little lass or lad.
64 |
65 | Thrilled with such good news,
66 | I've reached this day,
67 | Awaiting things to come,
68 | Knowing that a tiny face soon will see me
69 | And wonder just who I may be.
70 |
71 | "Kid, I'm your grandpa," I will explain.
72 | "Will be, forevermore."
73 | And on this birthday,
74 | Yes, sir, I do say:
75 | Now I'm sixty-four.
--------------------------------------------------------------------------------
/src/posts/2021/01/leaner-cleaner.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | title: "Leaner and cleaner"
4 | subtitle: "Simpler is (usually) better"
5 | description: "After I remind myself of this site’s original, spartan appearance, changes result."
6 | author: Bryce Wray
7 | date: 2021-01-31T10:10:00-06:00
8 | lastmod: 2021-05-16T10:05:00-05:00
9 | #draft: false
10 | discussionId: "2021-01-leaner-cleaner"
11 | featured_image: "rest-5977908_6000x4000.jpg"
12 | featured_image_width: 6000
13 | featured_image_height: 4000
14 | featured_image_alt: "Concept photo of simplicity, showing single twig sticking out of still water"
15 | featured_image_caption: |
16 | Image: Achim Ruhnau; Pixabay
17 | ---
18 |
19 | {% disclaimer %}
20 |
21 | To those of you who've been here before: yep, this **is** the same site. It just looks considerably different than it did yesterday.
22 |
23 | The most notable change is that it's completely free of "hero images," even the familiar guy-typing-on-a-typewriter photo that used to grace the home page. Now, the only images you see on this site are those which offer explanatory value (*e.g.*, the one further down on this particular page).
24 |
25 | There are other stylistic changes here and there, but they pretty much speak for themselves.
26 |
27 | I also took this "housecleaning" opportunity to make the home page more useful to stoppers-by, or at least I hope so. My usual rambling "well-sonny-this-is-how-I-remember-the-early-days-of-the-web" monologue is now where it probably should've been all along, which is on the ["About me" page](/about).
28 |
29 | ## Why the changes?
30 |
31 | So why all these fairly radical adjustments?
32 |
33 | They happened because I wanted to recapture a cleanness and simplicity the site once had, even before any of you had a chance to see it.
34 |
35 | In recent weeks, I've been looking at an old repository which shows how the site looked in its earliest days, back in the late summer of 2018 while it was still in development on my Mac before I actually took it live:
36 |
37 | {% imgc "orig-site_screen-cap_1518x1356.png", "Screen capture of this website’s pre-launch appearance in 2018", "1518", "1356" %}
38 |
39 | Of course, that was over 100 [posts](/posts) ago and a lot has changed in the interim; but, in the end, I decided that the simpler and cleaner I could make the site look, the better.[^BTW]
40 |
41 | [^BTW]: By the way: these changes notwithstanding, I'm still using [Cloudinary](https://cloudinary.com) to [host the site's remaining images](/posts/2020/07/transformed). I see no reason to change that, especially because I don't want to go back to keeping those images in the site repo. And the styling is still from [Tailwind CSS](https://tailwindcss.com), as has been the case since [last spring](/posts/2020/05/going-solo-eleventy)---although I did give some serious thought to trying it in the site's original styling setup, which used [SCSS](https://sass-lang.com). I chose not to do so because, although I'm trying to simplify, I also don't want to get too far behind the web dev industry, where [Tailwind's popularity continues to grow](https://2020.stateofcss.com/en-US/technologies/css-frameworks/).
42 |
43 | All of this also considerably lowered the site's download sizes. That's a win-win.
44 |
45 | And that's the story: short, sweet, and---like the result itself---simple.
--------------------------------------------------------------------------------
/src/posts/2021/06/beginners-luck-3-adding-zola-starter.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | tags: post
4 | title: "Beginner’s luck #3: adding a Zola starter"
5 | subtitle: "And then there were seven"
6 | description: "For those interested in a (somewhat) easy take on Hugo, here’s a starter set for you."
7 | author: Bryce Wray
8 | date: 2021-06-25T16:50:00-05:00
9 | lastmod: 2021-07-20T07:05:00-05:00
10 | discussionId: "2021-06-beginners-luck-3-adding-zola-starter"
11 | featured_image: susan-holt-simpson-H7SCRwU1aiM-unsplash_4608x3072.jpg
12 | featured_image_width: 4608
13 | featured_image_height: 3072
14 | featured_image_alt: "Colorful toy alphabet blocks"
15 | featured_image_caption: |
16 | Image: Susan Holt Simpson; Unsplash
17 |
18 | ---
19 |
20 | **Update, 2021-07-20**: Due to breaking changes introduced in Zola version 0.14.0 (released 2021-07-19), **DO NOT** use either starter set mentioned herein with that version or higher.
21 | {.yellowBox}
22 |
23 | This will be an unusually short entry. I just wanted to advise that I've built my seventh [static site generator (SSG)](https://jamstack.org/generators) [starter set](/posts/2021/03/beginners-luck-update). It uses [Zola](https://getzola.org), and you can find its GitHub repository at [https://github.com/brycewray/zola_solo](https://github.com/brycewray/zola_solo). There's also a [live demo](https://zola-solo.vercel.app).
24 |
25 | Unfamiliar with Zola? It's a [Rust](https://rust-lang.org)-based SSG that came about because its creator, [Vincent Prouillet](https://www.vincentprouillet.com/), was using the [Go](https://golang.org)-based [Hugo](https://gohugo.io). He loved the fact that Hugo was a single binary (see my article, "[Eleventy and Hugo: comparing and contrasting](/posts/2020/12/eleventy-hugo-comparing-contrasting)," for some insight into why that can be appealing) but became frustrated by the unwieldiness of Go templating. Instead, he decided to build a very Hugo-like SSG but with much simpler templating, based on his own creation: the [Tera](https://tera.netlify.app/) template engine. If you're familiar with how [Nunjucks](https://mozilla.github.io/nunjucks/) reads and works in [Eleventy](https://11ty.dev), you'll find Tera's syntax and feature set quite familiar and, therefore, comfortable.
26 |
27 | If you want to use this starter set, be sure to check the repo README for some important details---especially if you're interested in using footnotes in your Markdown. The README also notes that I don't plan any additional development on this set for the time being. This is for the same reasons as with my Hugo starter sets, mainly that there are certain needed features or compatibilities which each respective SSG lacks, as I [complained a few days ago about Hugo](/posts/2021/06/gems-in-rough-06).
28 |
29 | All that aside, I had some nerdy fun building this starter, debugging it, and generally learning more about how Zola works. Perhaps it will similarly appeal to your own geekiness.
30 |
31 | **Update, 2021-06-26**: I've now added an **eighth** starter repo. It's [another Zola starter](https://github.com/brycewray/zola_twcss) (with a [demo version](https://zola-twcss.vercel.app) also live), but uses [Tailwind CSS](https://tailwindcss.com)---**including** the [JIT mode](https://tailwindcss.com/docs/just-in-time-mode), which Hugo **still** doesn't support---rather than Sass. Unlike the other repo that I added yesterday, this one likely will stay in active development at least for a while because of Zola's ability to work with Tailwind and JIT, although I still am perturbed by Zola's own shortcomings (notably about footnote-handling).
32 | {.yellowBox}
--------------------------------------------------------------------------------
/src/posts/2020/09/goodbye-hello-part-5.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | tags: post
4 | title: "Goodbye and hello • Part 5"
5 | subtitle: "Failing to plan"
6 | description: "Two embarrassments: another site move and the reason behind it."
7 | author: Bryce Wray
8 | date: 2020-09-09T14:30:00-05:00
9 | lastmod: 2021-05-16T10:39:00-05:00
10 | discussionId: "2020-09-goodbye-hello-5"
11 | featured_image: "pencil-two-with-erasers-macro-1277094_3872x2592.jpg"
12 | featured_image_width: 3872
13 | featured_image_height: 2592
14 | featured_image_alt: "Closeup of two pencils and their erasers"
15 | featured_image_caption: |
16 | Image: Jeff Weese; Pixabay
17 | ---
18 |
19 | {% disclaimer %}
20 |
21 | Just when I thought the site's "lurch"[^danceRef] among hosts was over with [last week's landing](/posts/2020/09/goodbye-hello-part-4) at [Render](https://render.com), I tripped on a banana peel whose presence in my path was entirely my own fault.
22 |
23 | [^danceRef]: Can't call it the "dance" because I [already ran that term into the ground for another purpose](/posts/2019/12/sorta-strange-ssg-trip).
24 |
25 | When I drew up the requirements I mentioned in [Part 1](/posts/2020/07/goodbye-hello) for the site's host, I thought I'd covered all the use cases to which I'd become accustomed in the nearly two years of this site's existence.
26 |
27 | *\20 | (Older comments imported from previous comments host, Talkyard.) 21 |
22 |Cap Pike 2019-09-07
23 |People that use Word that don't "get" styles and formatting in general are generally just annoying. Like people who drive that don't bother with turn signals.
24 | ...and then there's Excel...
44 |
45 | 46 | *One more thing before I end this quickie: if you haven't already read [Chris Rosser](https://chrisrosser.net)'s [most recent review of iA Writer](https://chrisrosser.net/posts/2019/01/26/ia-writer-5-review/), I definitely urge you to do so. His workflow is quite different from mine since he actually coded his own text-to-HTML setup (whoa) but his observations are always keen and useful. "[Joe Bob says check it out](https://en.wikipedia.org/wiki/Joe_Bob_Briggs)."* -------------------------------------------------------------------------------- /src/posts/2021/03/gems-in-rough-03.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | title: "Gems in the rough #3" 4 | subtitle: "Tips ’n’ tricks, this ’n’ that" 5 | description: "The latest installment of unrequested advice about tinkering with websites." 6 | author: Bryce Wray 7 | date: 2021-03-06T15:55:00-06:00 8 | lastmod: 2021-04-15T16:30:00-05:00 9 | #draft: false 10 | discussionId: "2021-03-gems-in-rough-03" 11 | featured_image: "gem-amethyst-3804830_4928x3264.jpg" 12 | featured_image_width: 4928 13 | featured_image_height: 3264 14 | featured_image_alt: "Closeup of purple gemstone - amethyst" 15 | featured_image_caption: | 16 | Image: PaulaPaulsen; Pixabay 17 | --- 18 | 19 | As one gathers navel from one's lint, so also do I gather little bits of information I hope will be helpful for those of you who, as I do, have found a hobby in fiddling with personal [SSG](https://jamstack.org/generators)-built websites. [Back in December](/posts/2020/12/gems-in-rough), I began issuing such items as "Gems in the rough." Here be the latest thereof. 20 | 21 | --- 22 | 23 | Some time back, I went through a [somewhat](/posts/2020/11/using-postcss-cache-busting-eleventy) [tortured](/posts/2020/12/cache-busting-eleventy-take-two) [series](/posts/2020/12/hashing-out-cache-busting-fix-eleventy/) of explaining how to cache-bust the CSS for a [Eleventy](https://11ty.dev)-based site which uses Tailwind CSS. Turns out that, if you're willing to use [SCSS](https://sass-lang.com) instead, you can skip the whole mess by using internal CSS---*i.e.*, where it's included site-wide in your HTML's `head` rather than as a separate file, as I [discussed a few weeks ago](/posts/2021/02/tailwind-head-hugo-pipes/) regarding Hugo's [asset pipeline](https://gohugo.io/hugo-pipes+). Check out "[My Eleventy + SCSS/Sass Setup](https://www.belter.io/eleventy-sass-workflow/)" by [Duncan McDougall](https://twitter.com/duncanmcdougall) for all the coolness (and, to be fair, **he** credits **his** inspiration to [Andy Bell](https://twitter.com/piccalilli_)'s well-known [Hylia Starter Kit](https://hylia.website/)). 24 | 25 | *Not a tip but just a note: I'm experimenting with other website-building apps and methods, due to some upcoming Day Job stuff. Since the Day Job is moving toward being a [React](https://reactjs.org) shop, I'm spending significant time in [Next.js](https://nextjs.org), in particular. As of now, that's the platform toward which I'm leaning as the best all-around recommendation when I get asked. Of course, the final decision ain't mine. [**Update, 2021-04-15**: After an initial miscommunication gave me the wrong impression of the thinking in higher places, the decision eventually went against me, so I won't be doing this after all.]* 26 | 27 | Wondering which `display` setting you should use when calling a web font with `@font-face` CSS , especially for reducing [CLS](https://web.dev/cls/)? Some writers suggest `display: optional`. With that in place, a browser probably won't show the web font on first arriving at your site, but should when the user either refreshes that initial page or visits one or more subsequent pages in the site. This means that your visitors likely won't see the consistent appearance for which you installed the web font in the first place. Besides, you don't know whether someone actually **will** visit a subsequent page after finding the first one to which a search sent him/her. My advice: use `display: swap` and live with whatever CLS it causes **or** just settle for the totally CLS-free [system fonts stack approach](/posts/2018/10/web-typography-part-2). 28 | 29 | *Still keeping my eye on the [Cloudflare Pages](https://pages.cloudflare.com) beta test, which [now is an open beta](https://twitter.com/CloudflareDev/status/1366875729829400578). Build times are getting faster, but quite a few bugs must die before Pages will be safe for production use. For now, if you want a static site that lives on Cloudflare, stick with a [Workers site](https://developers.cloudflare.com/workers/platform/sites).* 30 | 31 | If you've ever tried to figure out why you couldn't click on a link in a fixed-[position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) element, like a header or footer that you want to stay in the same place, the [CSS `z-index` property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) is your friend. Keep adjusting that setting for all elements concerned until each appears as it should while allowing you to click links to your heart's content. -------------------------------------------------------------------------------- /src/_includes/layouts/posts/singlepost.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: singlepost 3 | layout: base 4 | --- 5 | 6 |
9 | {%- imgc featured_image, featured_image_alt, featured_image_width, featured_image_height, "posts" -%}
10 |
11 | {%- else -%}
12 |
17 |
--------------------------------------------------------------------------------
/src/_includes/layouts/partials/head.njk:
--------------------------------------------------------------------------------
1 | {% set socialImg = "https://res.cloudinary.com/brycewray-com/image/upload/c_fill,w_1024,h_512,q_auto,f_auto,x_0,z_1/" %}
2 | {% set fallbackImg = "typewriter-monochrome_2242164_6260x4374.jpg" %}
3 | {% set eleventyVersion = pkg.devDependencies['@11ty/eleventy'] | replace("^", "") %}
4 | {% set eleventyEnv = projEnv.environment %}
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {% if page.url === "/" %}
13 | {{ siteparams.siteTitle }}
14 |
15 |
16 | {% else %}
17 | {{ title }} | {{ siteparams.siteTitle }}
18 |
19 |
20 | {% endif %}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | {% if page.url === "/" %}
30 |
31 |
32 |
33 |
34 | {% else %}
35 |
36 |
37 |
38 |
39 | {% endif %}
40 |
41 |
42 |
43 |
44 |
45 |
46 | {% if page.url === "/" %}
47 |
48 |
49 | {% else %}
50 |
51 |
52 | {% endif %}
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | {% if eleventyEnv == "production" %}
92 |
93 |
94 | {% else %}
95 |
96 | {% endif %}
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
13 |
45 |
46 |
14 | {%- endif -%}
15 |
44 |
16 |
43 | {{ title }}
17 |18 | {% if subtitle %} 19 | {{ subtitle | safe }} 20 | {% else %} 21 | 22 | {% endif %} 23 |
24 | 25 |
26 | {{ page.date | htmlDateString }}
27 |
28 | {% if lastmod %}
29 | Last modified {{ lastmod | htmlDateString }}
30 | {% else %}
31 |
32 | {% endif %}
33 |
34 |
36 | {% if featured_image_caption %} 37 | {{ featured_image_caption | safe }} 38 | {% else %} 39 | 40 | {% endif %} 41 |
42 |
47 |
48 | {{ content | safe }}
49 |
57 |
58 |
59 | {% if page.url != "/about/" %}
60 |
50 |
55 |
56 |
61 |
77 | {% endif %}
78 |
--------------------------------------------------------------------------------
/src/posts/2020/09/goodbye-hello-part-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | tags: post
4 | title: "Goodbye and hello • Part 4"
5 | subtitle: "The future is now, so to Render we go"
6 | description: "My curiosity overcomes me and, yet again, I move the site."
7 | author: Bryce Wray
8 | date: 2020-09-05T09:00:00-05:00
9 | lastmod: 2021-05-16T10:39:00-05:00
10 | discussionId: "2020-09-goodbye-hello-4"
11 | featured_image: "jeremy-thomas-E0AHdsENmDg-unsplash_5005x3417.jpg"
12 | featured_image_width: 5005
13 | featured_image_height: 3417
14 | featured_image_alt: "Time exposure of a star field"
15 | featured_image_caption: |
16 | Image: Jeremy Thomas; Unsplash
17 | ---
18 |
19 | {% disclaimer %}
20 |
21 | Rather than continuing to pile addenda on the original "[Goodbye and hello](/posts/2020/07/goodbye-hello)" post about how I moved this site from [Netlify](https://netlify.com) to [Vercel](https://vercel.com) some weeks back, I've turned those addenda into [separate](/posts/2020/07/goodbye-hello-part-2) [posts](/posts/2020/08/goodbye-hello-part-3), each dated according to when I'd added its content to the first post. When I look at others' sites, I gather this is the more common---not to mention less mutually aggravating---way of explaining such changes to one's readers.
22 |
23 | ----
24 |
25 | So, to recapitulate: after having kept this site on Netlify for its first twenty-one-and-a-half months of existence, I moved it to [Render](https://render.com) in late June, [to Vercel a day later](/posts/2020/07/goodbye-hello), [back to Netlify a few weeks after that](/posts/2020/07/goodbye-hello-part-2), and [*again* to Vercel three weeks hence](/posts/2020/08/goodbye-hello-part-3).
26 |
27 | All the while, as you could probably tell in the first "Goodbye and hello," I was keenly interested in Render; but I ended up deciding that Render's older, somewhat more polished competitors were better fits.
28 |
29 | For a while, that was true.
30 |
31 | Still, throughout all the gyrations among these hosts, I'd never quite gotten past the idea that Render was special---a vendor with a bright future, and something I needed to keep watching. I found myself drawn to at least daily checks of the [Render Slack community](https://render-community.slack.com/join/shared_invite/zt-fs26mwq8-P98fMK7axMHNny54c_yzcg#/), where Render techs---and, surprisingly often, even Render CEO/Founder Anurag Goel himself---provided help to not only Render users (both free-tier and paying) but also those simply seeking more info about Render.
32 |
33 | ## All hands: prepare to jump (again)
34 |
35 | In recent days, the curiosity finally became too great.
36 |
37 | As a result, I created identical microsites on Vercel, Netlify, and Render (identical so comparing them would be a case of "apples *vs.* apples *vs.* apples"); then, I set up [Zach Leatherman's Speedlify tool](https://github.com/zachleat/speedlify/) to scan them three times a day, measuring each microsite's respective performance.
38 |
39 | As the days went by, a pattern emerged from the Speedlify results. While it didn't *always* win, the Render microsite *usually* won---this, despite the [vaunted advantages of Vercel's Global Edge Network](https://vercel.com/blog/new-edge-dev-infrastructure).[^1]
40 |
41 | Having determined early on that I would let the data be my guide, I found the case to be narrow, but clear, for Render. And, so, yesterday, my site was back on Render for the first time since that initial, one-day ride in late June.
42 |
43 | Of course, as is now achingly clear, whether I will let it *stay* there remains to be seen.
44 |
45 | That said: at least as of this writing, I am optimistic. Unlike the other moves, this one wasn't followed by a vague sense of unease that, maybe, I should've waited a little longer before I placed my "bet" on this "horse."
46 |
47 | It may not win every single race but, boy, does it have great days ahead of it, and I think I want to be around as it gets to them.
48 |
49 | **Note**: Unfortunately, it turned out I hadn't done my due diligence, and so there's a---wait for it---[Part 5](/posts/2020/09/goodbye-hello-part-5). (Arrgh.){.yellowBox}
50 |
51 | [^1]: Because of how hobbled Netlify's free tier is when compared to the free tiers of Render and Vercel, the Netlify microsite never really was in the ballgame. It served more as a point of comparison than anything else. The same was true for another identical microsite that I briefly had on [Firebase](https://firebase.google.com) at the beginning of the testing. I pulled it from the test after it became clear it almost never would exceed last place, and definitely never eclipse third place out of the (then) four competing microsites. Whether that's because of Firebase's [previously noted](/posts/2020/07/goodbye-hello) lack of [Brotli compression](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html), I can't say.
--------------------------------------------------------------------------------
/src/posts/2019/12/code-comfort-eleventy-webpack.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | tags: post
4 | title: "Code comfort: Eleventy and webpack"
5 | subtitle: "Peeking inside this site"
6 | description: "Some words about my Eleventy/webpack configuration."
7 | author: Bryce Wray
8 | date: 2019-12-14T11:05:00-06:00
9 | lastmod: 2021-05-29T12:24:00-05:00
10 | discussionId: "2019-12-code-comfort-eleventy-webpack"
11 | featured_image: code-1486361_5760x3840.jpg
12 | featured_image_width: 5760
13 | featured_image_height: 3840
14 | featured_image_alt: "Computer code on a monitor"
15 | featured_image_caption: |
16 | Image: Markus Spiske; Pixabay
17 | ---
18 |
19 | **Note, 2020-09-09**: Although the site long since is no longer using the stack mentioned here, at least some parts of the repo [remain online for viewing by the curious](https://github.com/brycewray/eleventy_bundler).{.yellowBox}
20 |
21 | *Following up on my [recent post](/posts/2019/12/packing-up) about how I got this site back to my favorite [static site generator](https://staticgen.com) (SSG), [Eleventy](https://11ty.dev), and also provided some enhancements with the [webpack](https://webpack.js.org) bundler app . . .*
22 |
23 | As I mentioned, my process in making this happy transition was much easier than it might have been, thanks to the publicly available code from others who'd done it before me. Thus, I'm following their kind example by making this site's [GitHub repo](https://github.com/brycewray/eleventy_bundler) public. What follows, then, is some explanation of which code does what.
24 |
25 | ## A tale of three webpack config files
26 |
27 | A lot of tutorials for using webpack will have you go through the motions of constructing a `webpack.config.js` file, only to come in when things get hot and heavy and say, "*Au contraire*, sucker! Actually, you need *separate* configuration files for development and production."
28 |
29 | Not gonna pull that one on ya.
30 |
31 | You *can* do it with just a `webpack.config.js` file---one to rule them all, so to speak---but just about all the best-practices-kinda-stuff you'll see says to set things up as follows, so that's what I'm telling you, too:[^configNames]
32 |
33 | [^configNames]: You can call them whatever you want as long as each ends with a *.js* extension, but using names like these adheres sufficiently to standards-of-sorts that, when you look at other people's code, you'll probably find the examples more helpful than if you go into "[Silly Walks](https://en.wikipedia.org/wiki/The_Ministry_of_Silly_Walks)" mode and call them *fred.js*, *wilma.js*, and *pebbles.js*, or somesuch.
34 |
35 | - `webpack.dev.js`---Contains only config code for *development*. Or, to put it another way: the code in this file is *not* intended for when you actually build your site on, say, [Netlify](https://www.netlify.com). [See my site's `webpack.dev.js` file here](https://github.com/brycewray/eleventy_bundler/blob/master/webpack.dev.js).
36 |
37 | - `webpack.prod.js`---You guessed it: this is the first file's bro, except that this one contains only config code for *production*. [See my site's `webpack.prod.js` file here](https://github.com/brycewray/eleventy_bundler/blob/master/webpack.prod.js).
38 |
39 | - `webpack.common.js`---Contains everything you'll need for *either* production or development. The other two files ***merge*** this content when they're run, thus ensuring everything happens as it should. Having this separate file, rather than duplicating code between the other two files, is DRY-friendly (well, [maybe](https://thevaluable.dev/dru-principle-cost-benefit-example)) and thus keeps peace among all of [Babbage](https://www.computerhistory.org/babbage/)'s descendants, genetic or otherwise. [See my site's `webpack.common.js` file here](https://github.com/brycewray/eleventy_bundler/blob/master/webpack.common.js).
40 |
41 | ## Configuring Eleventy itself
42 |
43 | As for `.eleventy.js`, the main config file for Eleventy (thankfully, no separate `.dev` and `.prod` versions here), see [my site's `.eleventy.js` file here](https://github.com/brycewray/eleventy_bundler/blob/master/.eleventy.js).
44 |
45 | ## package.json
46 |
47 | By now, the more observant among you, having seen certain items mentioned in these files, may be wondering what's in the `package.json` file. [Wonder no longer](https://github.com/brycewray/eleventy_bundler/blob/master/package.json)---although, I caution you, there are things in there I no longer use but simply haven't gotten around to opening up a can of `npm uninstall` on 'em as yet.
48 |
49 | ## Copy-pasta meal?
50 |
51 | So, there you go. If you see anything in this site's repo that's helpful to your project, by all means, [copy-pasta](https://knowyourmeme.com/memes/copypasta) to your heart's content. If nothing else, perhaps the `package.json` file will give you some hints about cool npm packages to try if you, too, decide to weld Eleventy and webpack---which, I assure you, is a [worthy endeavor](/posts/2019/12/packing-up).
--------------------------------------------------------------------------------
/src/posts/2021/06/mixed-nuts-2021-06.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | title: "Mixed nuts • June, 2021"
4 | subtitle: "More miscellany for your mental masochism"
5 | description: "The latest set of “takes” that don’t all fit in any one category."
6 | author: Bryce Wray
7 | date: 2021-06-11T16:30:00-05:00
8 | lastmod: 2021-07-11T09:57:00-05:00
9 | discussionId: "2021-06-mixed-nuts-2021-06"
10 | featured_image: "nuts-5503118_6000x4000.jpg"
11 | featured_image_width: 6000
12 | featured_image_height: 4000
13 | featured_image_alt: "Concept image: mixed nuts on a tabletop"
14 | featured_image_caption: |
15 | Image: Kai Reschke; Pixabay
16 | ---
17 |
18 | It's time once again to bounce around a few miscellaneous observations that, in fact, already have been bouncing in my brain like pinballs in a particularly old and janky machine. And I will try not to take too much offense at that reference on my own part.
19 |
20 | ---
21 |
22 | Everyday life with the internet requires manipulating passwords for a ridiculous number of sites and services. A common, but dangerous, response to that requirement is to use the same password on multiple sites. It's dangerous because, if *any one* of those sites gets cracked, the bad actors have your access to *all* of them. The smart response is to have a different and unguessable password on each site, and then [use a password manager app](https://www.howtogeek.com/141500/why-you-should-use-a-password-manager-and-how-to-get-started/)---preferably as cross-platform as possible---to keep them all straight. The one I've used for several years is [1Password](https://1password.com), but I've recently also begun using the [open-source](https://en.wikipedia.org/wiki/Open-source_software) [Bitwarden](https://bitwarden.com). 1Password has a free trial, after which it costs around $50/year. Bitwarden has a totally free version, although a $10/year subscription adds several highly desirable features, not to mention it's a low-pain way of supporting a worthy vendor in this space.
23 |
24 | *Also on the subject of personal cybersecurity: it was [announced](https://9to5mac.com/2021/06/07/ios-15-ipados-15-and-macos-monterey-gain-built-in-two-factor-code-generator-and-autofill/) at this week's 2021 edition of the [Apple Worldwide Developers Conference (WWDC)](https://en.wikipedia.org/wiki/Apple_Worldwide_Developers_Conference) that this fall's next major versions of iOS and macOS will make [time-based one-time password (TOTP) authentication](https://datatracker.ietf.org/doc/html/rfc6238) a built-in feature of the [iCloud Keychain](https://support.apple.com/en-us/HT204085). To my admittedly limited knowledge, they will be the first OSs with baked-in TOTP handling. Especially where the smartphone market is concerned, it remains to be seen how disruptive this may be to standalone password management providers such as, say, 1Password and Bitwarden.*
25 |
26 | If my recent visits to the [Firefox subreddit](https://reddit.com/r/firefox) constitute any indication, the Firefox community is sharply divided over the release of [the Proton UI in Firefox 89](https://www.xda-developers.com/mozilla-releases-firefox-89-update-with-new-proton-design/). I kinda like it myself; but my main problem with the latest ’fox version is that it seems to be a considerably greedier memory hog on macOS than Microsoft Edge, much less the memory-sippin' Safari (but definitely not the famously hungry Chrome). Speaking of Safari, it'll be getting a lot of new features this fall on both iOS and macOS, as [this WWDC 2021 video](https://developer.apple.com/videos/play/wwdc2021/10104/) makes clear.
27 |
28 | *It's not hard to find various ’net-based paeans to [VSCodium](https://vscodium.com/), which is a fully open-source version of the mostly-but-not-fully-open-source [Visual Studio Code](https://code.visualstudio.com). I gave VSCodium a try but didn't like how some of my favorite extensions, or at least their latest versions, are unavailable for it. I also disliked the hacky ways some suggest for getting around that, with which I simply chose not to futz. Given that VSCodium's main advantage over VS Code is that the former lacks Microsoft tracking but I already use Microsoft apps that, yeah, track me, I'll stick with the real thing. (I still use [Panic](https://panic.com)'s [Nova](https://nova.app), too, but not nearly as often.)*
29 |
30 | To end on an extremely non-techy note: it's nice when I can occasionally mosey out as a COVID-19-vaccinated human here in my little corner of the planet, especially when it's time to gather with similarly vaccinated relatives for a meal at a restaurant, something we wouldn't have considered not so long ago. One obviously also must be aware that the virus itself is far from ceasing its assault (especially in other parts of the world), but at least now---if/when you can get a vaccine to people and, just as important, get people to *accept* a vaccine---there would **appear** to be something of an end in sight for this trouble, albeit that it's taking its sweet time in arriving.
--------------------------------------------------------------------------------
/src/posts/2019/12/previous-next-eleventy.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: singlepost
3 | tags: post
4 | title: "“Previous” and “next” in Eleventy"
5 | subtitle: "The answer to an authentic FAQ"
6 | description: "A brief description of code that easily enables this oft-requested feature."
7 | author: Bryce Wray
8 | date: 2019-12-23T15:16:00-06:00
9 | lastmod: 2019-12-25T08:05:00-06:00
10 | discussionId: "2019-12-previous-next-eleventy"
11 | featured_image: "sand-1522182_3216x2136.jpg"
12 | featured_image_width: 3216
13 | featured_image_height: 2136
14 | featured_image_alt: "View from above of directional arrow in sand"
15 | featured_image_caption: |
16 | Image: Maret H.; Pixabay
17 | ---
18 |
19 | This one will be uncharacteristically short, you'll be happy to know. But I learned something yesterday that I just have to share with my fellow and sister [Eleventy](https://11ty.dev) aficionados out there.
20 |
21 | In reading not only the Eleventy [docs](https://11ty.dev/docs) but also numerous "how-to" articles by various Eleventy users, I'd been unable to learn a way to automate the inclusion of "Previous post" and "Next post" links, such as those you see at the bottom of each of my posts.
22 |
23 | (Note that all the code herein assumes you assign each post a `post` tag in its front matter, as shown in [this example](https://www.11ty.dev/docs/collections/).)
24 |
25 | You see, the most workable method I'd found so far from among the [starter projects](https://11ty.dev/docs/starter) and [others](https://11ty.dev/docs/sites) listed on the Eleventy site was quite manual: give each post an index number in its front matter (`idx: 41`, for example), and then find it that way. For example **(WARNING: if you're looking through this in a hurry, THIS *ISN'T* THE FINAL ANSWER!)**:
26 |
27 | {% raw %}
28 | ```html
29 | {% if collections.post[idx] %}
30 | Other posts
62 | {% if nextPost.url %} 63 |64 | Next: 65 | {{ nextPost.data.title }} 66 |
67 | {% endif %} 68 | {% if prevPost.url %} 69 |70 | Previous: 71 | {{ prevPost.data.title }} 72 |
73 | {% else %} 74 |75 | {% endif %} 76 |
31 | Next: 32 | {{ collections.post[idx].data.title }} 33 |
34 | {% endif %} 35 | {% if collections.post[idx-2] %} 36 |37 | Previous: 38 | {{ collections.post[idx-2].data.title }} 39 |
40 | {% endif %} 41 | 42 | ``` 43 | {% endraw %} 44 | 45 | Yes, it worked, but I wanted a "set-and-forget" method---something that would survive post deletions or any other possibility that might come up, not to mention a simple human failure to give the correct and unique `idx` assignment to a new post. And [so](https://github.com/11ty/eleventy/issues/211) [did](https://github.com/11ty/eleventy/issues/529) [others](https://github.com/11ty/eleventy/issues/819). 46 | 47 | I suspected there was a solution in the Eleventy API that was so ridiculously simple that, if I found it, I'd have two immediate reactions: joy from finding it and pain from the slap I'd give myself on top of the head for having missed it. 48 | 49 | Early yesterday morning, after having asked about an [earlier](https://github.com/11ty/eleventy/issues/529#issuecomment-532393625) proposed answer to the question, I saw a [reply](https://github.com/11ty/eleventy/issues/529#issuecomment-568257426) that quickly proved to be *The* Answer **(THIS one is what you're seeking, folks)** from [Pascal Widdershoven](https://pascalw.me) in the form of a wonderfully simple and elegant addition to one's `.eleventy.js` file: 50 | 51 | {% raw %} 52 | ```js 53 | eleventyConfig.addCollection("posts", function(collection) { 54 | const coll = collection.getFilteredByTag("posts"); 55 | 56 | for(let i = 0; i < coll.length ; i++) { 57 | const prevPost = coll[i-1]; 58 | const nextPost = coll[i + 1]; 59 | 60 | coll[i].data["prevPost"] = prevPost; 61 | coll[i].data["nextPost"] = nextPost; 62 | } 63 | 64 | return coll; 65 | }); 66 | ``` 67 | 68 | {% endraw %} 69 | 70 | Ah. A thing of beauty. 71 | 72 | Once you've added that to your site's `.eleventy.js` file, all you have to do is put something like the following in the appropriate place in your Eleventy template for single posts (this is in [Nunjucks](https://www.11ty.dev/docs/languages/nunjucks/), so please adjust according to the [template language](https://www.11ty.dev/docs/languages/) of your choice): 73 | 74 | {% raw %} 75 | 76 | ```html 77 | {% if nextPost.url %} 78 |79 | Next: 80 | {{ nextPost.data.title }} 81 |
82 | {% endif %} 83 | {% if prevPost.url %} 84 |85 | Previous: 86 | {{ prevPost.data.title }} 87 |
88 | {% endif %} 89 | ``` 90 | 91 | {% endraw %} 92 | 93 | And, no, I didn't swat myself, but I did get the joy. 94 | 95 | **Thank you, Mr. Widdershoven**, for the eye-opener! This has been an FAQ in the truest sense of that term, and you got us over the goal line. As I gratefully [told you yesterday](https://github.com/11ty/eleventy/issues/529#issuecomment-568258911): "You da man!" -------------------------------------------------------------------------------- /src/posts/2021/03/beginners-luck-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | tags: post 4 | title: "Beginner’s luck: an update" 5 | subtitle: "New and updated starter sets for Eleventy and Hugo" 6 | description: "The inventory has grown, so here’s what I currently offer for those interested in the two best SSGs." 7 | author: Bryce Wray 8 | date: 2021-03-25T20:25:00-05:00 9 | lastmod: 2021-04-22T12:57:00-05:00 10 | discussionId: "2021-03-beginners-luck-update" 11 | featured_image: susan-holt-simpson-H7SCRwU1aiM-unsplash_4608x3072.jpg 12 | featured_image_width: 4608 13 | featured_image_height: 3072 14 | featured_image_alt: "Colorful toy alphabet blocks" 15 | featured_image_caption: | 16 | Image: Susan Holt Simpson; Unsplash 17 | 18 | --- 19 | 20 | Interested in building a new website with, or converting an existing site to, either of the two best [static site generators](https://jamstack.org/generators) (SSGs)? Please read on, my friend. 21 | 22 | Recently, I've been spending spare hours working on [Eleventy](https://11ty.dev) and [Hugo](https://gohugo.io) **starter sets** for folks like you. And they're not only updated versions of the ones I [announced last July](/posts/2020/07/beginners-luck), but also **two new ones** I'm announcing today. 23 | 24 | Rather than expect you to find them on your own in my various scattered references across my humble little site, I thought I'd write this brief post to list them all together. Maybe you'll find them helpful in whatever you choose to do in Eleventy or Hugo. Each is always based on the current appearance and layout of this site, which I hope will make clearer the connection between the code and the result. 25 | 26 | I'll list each by the name of its respective [repository](https://en.wikipedia.org/wiki/Software_repository) ("repo") in [GitHub](https://github.com). I've also linked each to its live demo on [Vercel](https://vercel.com). 27 | 28 | ## Eleventy starters 29 | 30 | Incidentally: the *eleventy_solo* in each Eleventy starter's name comes from that of [**this** site's repo](https://github.com/brycewray/eleventy_solo) (and, if you're wondering why I chose that name, you may want to see my [post from last year](/posts/2020/05/going-solo-eleventy) about when, and why, I converted the site over from Eleventy/[webpack](https://webpack.js.org) to Eleventy-only). 31 | 32 | The Eleventy starters are distinguished by two things: which of the [numerous Eleventy **templating choices**](https://www.11ty.dev/docs/languages/) they use, [JavaScript](https://www.11ty.dev/docs/languages/javascript/) or [Nunjucks](https://www.11ty.dev/docs/languages/nunjucks/); and how they're **styled**. 33 | 34 | So, here we go. 35 | 36 | - **[eleventy_solo_starter](https://github.com/brycewray/eleventy_solo_starter)**---JavaScript templating; [Tailwind CSS](https://tailwindcss.com), which as of version 2.1.0 includes the just-in-time (JIT) compiler (for details about the advantages of this experimental addition to Tailwind, refer to the [official announcement](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) as well as [my related post](/posts/2021/03/jit-game-changer-tailwind-css/)). [View the demo](https://eleventy-solo-starter-alpha.vercel.app/). 37 | - **[eleventy_solo_starter_njk](https://github.com/brycewray/eleventy_solo_starter_njk)**---[Nunjucks](https://mozilla.github.io/nunjucks) templating; Tailwind CSS, now with the JIT compiler. [View the demo](https://eleventy-solo-starter-njk.vercel.app/). 38 | - **[eleventy_solo_starter_scss](https://github.com/brycewray/eleventy_solo_starter_scss)** *(**new**)*---JavaScript templating; [Sass/SCSS](https://sass-lang.com). [View the demo](https://eleventy-solo-starter-scss.vercel.app). 39 | - **[eleventy_solo_starter_njk_scss](https://github.com/brycewray/eleventy_solo_starter_njk_scss)** *(**new**)*---Nunjucks templating; Sass/SCSS. [View the demo](https://eleventy-solo-starter-njk-scss.vercel.app). 40 | 41 | ## Hugo starters 42 | 43 | For now, I still have only two Hugo starters. This is for two reasons: there's only one form of templating in Hugo (Go-based templating); and the Tailwind JIT compiler isn't yet compatible with Hugo. One is based on Tailwind CSS (again, no JIT) and the other on Sass/SCSS. Once the Hugo-*vs.*-JIT issues are resolved, I'll likely add a JIT-equipped Hugo starter, too. 44 | 45 | - [hugo_twcss](https://github.com/brycewray/hugo_twcss)---Tailwind CSS. [View the demo](https://hugo-twcss.vercel.app). 46 | - [hugo_solo](https://github.com/brycewray/hugo_solo)---Sass/SCSS. [View the demo](https://hugo-solo.vercel.app). 47 | 48 | ## Enjoy 49 | 50 | As usual, I've learned a few things while working on these, including the need to fix some embarrassing oversights in the older ones. Regardless of your proficiency with Eleventy and/or Hugo, perhaps you'll find them similarly educational. Have fun with them. 51 | 52 | If you use one of the repos, you'll probably want to "watch" that repo for changes (which have been frequent of late). Also, please [let me know](/contact)---including with [GitHub issues](https://guides.github.com/features/issues/), if you prefer---if you encounter difficulties with any of them. 53 | 54 | Happy SSG-ing! -------------------------------------------------------------------------------- /src/posts/2018/10/web-typography-part-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | tags: post 4 | title: "Readable web text, pretty please" 5 | subtitle: "Part 1 of a two-part series on web typography" 6 | description: "Can we just agree that type on the web should be, y’know, readable?" 7 | author: Bryce Wray 8 | date: 2018-10-17T14:40:00-05:00 9 | lastmod: 2020-09-23T07:07:00-05:00 10 | discussionId: "2018-10-web-typography-part-1" 11 | featured_image: "letters-691842_2504x1676.jpg" 12 | featured_image_width: 2504 13 | featured_image_height: 1676 14 | featured_image_alt: "Letters for old-style typesetting" 15 | featured_image_caption: | 16 | Image: Free-Photos; Pixabay 17 | --- 18 | 19 | As I suggested in a [recent post](/posts/2018/09/why-finally-settled-ulysses), I'm more than a little hung up on on-screen type; so I thought I'd do a little two-part series on website typography and share some appropriate insights and tips. They come from two decades as a web designer and three-and-a-half decades as a writer and formatter---oh, and nearly six decades of reading. Perhaps you'll find them useful. 20 | 21 | ## Readability . . . ! Do you _speak_ it? 22 | 23 | One would hope the following statement wouldn't be too terribly controversial but, given the appearance of many pages on the web these days, I fear it may be: 24 | 25 | _At a minimum, body type on web pages should be **easily readable** by anyone with **reasonably** normal vision and a **reasonably** functional and **reasonably** sized display_. 26 | 27 | (Note that I said, "body type." That's an important distinction. There should be a little more leeway for headlines, especially large ones.) 28 | 29 | By "easily readable," I mean: 30 | 31 | - **It should have decent contrast**.---In other words, there should be enough difference between the color of the type and the color of the background. 32 | I don't mean stark black on stark white, or vice versa, because that's _too_ much contrast on a display---especially on a super-high-contrast [OLED](https://en.wikipedia.org/wiki/OLED) display such as is becoming _de rigueur_ for [smartphones](https://www.oled-info.com/oled_devices/mobile_phones). UI experts have told me they suggest a combination of #333 (really dark gray) on \#fff (white). That's what I have on this site, except for headlines and the nav menu. 33 | So, no, having a substantial part of your page's body text appear as light-to-medium gray on white (or, worse, dark gray on black) isn't a good idea. By the way, the same is true for link text, particularly if you don't underline links (which I formerly didn't because I thought it was too 1990s-ish, but changed my mind after learning about the [difficulty that non-underlined links can cause, especially for the visually impaired](https://webaim.org/techniques/hypertext/link_text)). Link text should be a **different** color from your body text and **not** some color that melts into the background. Don't make me come over there and lecture you about ["mystery meat" navigation](http://www.webpagesthatsuck.com/mysterymeatnavigation.html). 34 | However, there's more to this. 35 | - **It should have sufficient width**.---With the ready availability of web fonts (a separate subject which I'll address in Part 2), many website designers want to use some of the slick, ultra-thin type they've seen, or implemented, in video or print. And, again, that's fine in sufficiently large **headline** text. But I draw the line on body text for a web page; that's no place for super-thin type. Indeed, it's yet another barrier to sufficient contrast. 36 | 37 | ## Now that's (not) what I'm talkin' about 38 | 39 | But, rather than rant aimlessly, let me show you some examples of sins against either or both of these principles of web typography. They were current as of when I originally posted this. 40 | 41 | {% imgc "Typography-scr-cap-2-2018-10-16_1344x200.jpg", "Thin and dim text that is hard to read", 1344, 200 %} 42 | 43 | {% imgc "Typography-scr-cap-3-2018-10-16_1398x252.jpg", "More dim text that is hard to read", 1398, 252 %} 44 | 45 | {% imgc "Typography-scr-cap-4-2018-10-16_1398x164.jpg", "Still more dim text that is hard to read", 1398, 164 %} 46 | 47 | We can do better, friends. 48 | 49 | I close with these comments, by blogger Kevin Marks, taken from a [2016 article](https://www.telegraph.co.uk/science/2016/10/23/internet-is-becoming-unreadable-because-of-a-trend-towards-light/) in _The Telegraph_: 50 | 51 | > To arbitrarily throw away contrast based on a fashion that looks good on my perfect screen in my perfectly lit office is abdicating [designers'] responsibilities to the very people for whom they are designing. My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print. You'll be making things better for people who read on smaller, dimmer screens, even if their eyes aren't aging like mine. It may not be trendy, but it's time to consider who is being left out by the web's aesthetic. 52 | 53 |54 | 55 | _In [Part 2](/posts/2018/10/web-typography-part-2/), I'll cover why_ this _site's typography looks the way it does, including why it doesn't look the same on different platforms---and why that's not only on purpose but also just fine and dandy. (Heresy!)_ -------------------------------------------------------------------------------- /src/posts/2020/11/mixed-nuts-2020-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | title: "Mixed nuts • November, 2020" 4 | subtitle: "Another set of odd-servations" 5 | description: "Follow my erratic mind, if you dare, as it proves anew that it deserves that adjective." 6 | author: Bryce Wray 7 | date: 2020-11-07T10:10:00-06:00 8 | lastmod: 2020-12-12T13:20:00-06:00 9 | draft: false 10 | discussionId: "2020-11-mixed-nuts-2020-11" 11 | featured_image: "usman-yousaf-qHETVV5u7Wk-unsplash_5184x3456.jpg" 12 | featured_image_width: 5184 13 | featured_image_height: 3456 14 | featured_image_alt: "Overhead view of mixed nuts in a decorative glass dish on an orange surface" 15 | featured_image_caption: | 16 | Image: Usman Yousaf; Unsplash 17 | --- 18 | 19 | Given the course of recent events in our storm-tossed existence, both here in the United States and elsewhere, it seems a good time to whip out another set of those miscellaneous observations I typically call "mixed nuts" (most recent such assortment was [this example](/posts/2020/09/mixed-nuts-2020-09)) . . . 20 | 21 | ---- 22 | 23 | Regardless of which country you inhabit or which party (if any) you follow, you can be sure of this about elections: the good guys always want all legally qualified citizens to vote *and* want all the votes to be counted, no matter how long it takes. 24 | 25 | *Trying to sell your house? Don't rely on those "we-buy-it-quick-so-you-can-get-out" companies, hereafter referred to as* ZeeCOs. *Folks I know contracted with a ZeeCO to buy their old house so they could get a new one. Just days before the dual closings, the ZeeCO suddenly backed out because the neighborhood's homeowners' association (HOA) was being sued for reasons that had zero effect on the [saleability](https://dictionary.cambridge.org/us/dictionary/english/saleable) of these folks' old house.[^1] Fortunately, they made other arrangements and still got the new house, but they'd learned never to trust ZeeCOs.* 26 | 27 | O, for the return of *real* cable news channels, fashioned after the way they operated before the mid-1990s, back when they actually spent most of their 24-hour cycles *reporting* and (mostly) separated editorial comments into a blissfully few specific panel shows. 28 | 29 | *Although this site is [now more than two years old](/posts/2020/09/two-but-not-terrible), only recently have I grasped the [importance of making a website properly cache its static assets](https://gtmetrix.com/leverage-browser-caching.html)---so, for example, your browser doesn't have to reload the CSS file every time you go from one of my pages to another. Thus, it was my pleasant surprise, on this site's recent, temporary return to the [Hugo](https://gohugo.io) static site generator (SSG), to discover how easy Hugo makes this process, thanks to its [fingerprinting capability](https://gohugo.io/hugo-pipes/fingerprint/). With [Eleventy](https://11ty.dev), you need some additional, external trickiness about which I learned and will be writing in the near future.* 30 | 31 | While writing a few days ago in [Ulysses](https://ulysses.app), I suddenly found I couldn't add footnotes, among other usually available elements, within "sheets" (as they're called in Ulysses-ese) created with the latest version. Reported to Big U Support. Turned out that, somehow, I'd switched Ulysses to vanilla [Markdown](https://daringfireball.net/projects/markdown) rather than its default flavor, Markdown XL. Oops. Just noting it in case other Ulysses users run into similar problems. 32 | 33 | *My "lurch" among [Jamstack](https://jamstack.wtf)-savvy website hosts [over](/posts/2020/07/goodbye-hello) [the](/posts/2020/07/goodbye-hello-part-2) [last](/posts/2020/08/goodbye-hello-part-3) [few](/posts/2020/09/goodbye-hello-part-4) [months](/posts/2020/09/goodbye-hello-part-5) makes it clear that, of the "automatic" hosts[^2], [Vercel](https://vercel.com)'s free tier has by far the best combination of superior worldwide performance (especially because of the [recent enhancements](https://vercel.com/blog/new-edge-dev-infrastructure) to its [Edge Network](https://vercel.com/docs/edge-network/overview)) and clean, no-fuss maintenance. That said, my [experiment](/posts/2020/10/forward-paas) with [Cloudflare Workers sites](https://workers.cloudflare.com) and [Workers KV storage](https://developers.cloudflare.com/workers/learning/how-kv-works) was extremely interesting from a geekiness standpoint and, were I to drop Vercel for some reason, a Cloudflare Workers site---although **not** free---would be the very close second choice.* 34 | 35 | **Update**: Cloudflare's subsequent announcement of a **free** tier for Cloudflare Workers KV storage followed by my successful test of that tier's performance further changed the equation, as explained in the updates I've since made to "[Forward PaaS](/posts/2020/10/forward-paas)." {.yellowBox} 36 | 37 | [^1]: If you think HOAs don't often get sued, you're kidding yourself. 38 | 39 | [^2]: By "automatic" host, I mean one that deploys your website every time you push a change to the site's remote repository. By contrast, you have to set up your own continuous deployment---*e.g.*, a [GitHub Action](https://github.com/features/actions/)---to deploy a [Firebase](https://firebase.google.com) site or a [Cloudflare Workers site](https://workers.cloudflare.com) that way. -------------------------------------------------------------------------------- /src/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | title: About me 4 | subtitle: Just who do I think I am? 5 | description: Not a bio (you’d fall asleep), but just some explanatory observations. 6 | author: Bryce Wray 7 | date: 2018-09-14T15:00:00-05:00 8 | lastmod: 2021-01-30T13:55:00-05:00 9 | discussionId: "about" 10 | featured_image: question-mark-over-mac-keyboard-49958_1280x905.jpg 11 | featured_image_width: 1280 12 | featured_image_height: 905 13 | featured_image_alt: Stylistic image of question mark superimposed over computer keyboard 14 | featured_image_caption: | 15 | Image: Dalomo; Pixabay 16 | --- 17 | 18 | Welcome. 19 | 20 | Eons ago, when [the web was a new thing](http://info.cern.ch/hypertext/WWW/TheProject.html)---and people still capitalized *Web* and used two words for *Web site*, consarn it---[ISPs](https://en.wikipedia.org/wiki/Internet_service_provider) tended to provide free file space for people to have [little personal websites](https://consumerist.com/2015/03/20/where-did-everyone-from-the-90s-go-when-we-all-got-facebook-and-quit-web-1-0/). Back in those days, one did so with whatever [FTP](https://en.wikipedia.org/wiki/File_Transfer_Protocol) client one could find, what we now know as static [HTML](https://www.w3schools.com/html/html_intro.asp) files (but not [CSS](https://www.w3schools.com/Css/), not yet anyway), and lots and lots of [dialup modem noise](https://en.wikipedia.org/wiki/File:Dial_up_modem_noises.ogg). 21 | 22 | And, yes, I had one, back on what then was called [GTE.net](https://en.wikipedia.org/wiki/GTE). In fact, I was a "Charter Subscriber" to that ISP. 23 | 24 | {% imgc "gte-net_HTML_1997-04-17_crop_1280x715.jpg", "HTML code from a 1997 website", 1280, 715 %} 25 | 26 | Yet, as that free-file-space thing gradually went away, so, too, did many personal sites---mine among them. 27 | 28 | Over the years, database-driven content management systems ([CMSs](https://en.wikipedia.org/wiki/Web_content_management_system)) like [WordPress](https://wordpress.org) appeared. They provide click-and-drag ease in building a personal site, but they tend to be [security nightmares unless properly maintained](https://ithemes.com/2017/01/16/wordpress-security-issues/), which many aren't. They also introduce a great deal of technical overhead. 29 | 30 | And then there are creatures like Facebook, Instagram, and Twitter, which [for all too many people](https://ia.net/topics/take-the-power-back) have become the only Web-based locations for ordinary folks’ thoughts. Of course, [all these platforms want](https://adammclane.com/2013/03/in-social-media-you-are-the-product/) is to grab your information, show you ads, and---particularly in the case of Facebook---contribute to the [dumbing-down of your culture](https://www.salon.com/2017/07/16/how-social-media-is-dumbing-down-our-communication/) and the [political polarization of your society](https://www.sciencedirect.com/science/article/pii/S0736585317305208). What's the harm??!? 31 | 32 | (Don't worry. This site is, and will remain, apolitical by design unless we're nearing World War III or something along those lines. Maybe even then, since I doubt my little ol’ site is going to stop The Really Big One.) 33 | 34 | Anyway, it seemed a lot of the fun had gone out of puttering around on the web and actually creating content. Then---first among the techno-cognoscenti and, more recently, among us ordinary folks---came websites powered by [static site generators (SSGs)](https://www.staticgen.com) and written in [Markdown](https://daringfireball.net/projects/markdown/). I found them a source of curiosity at first but gradually became more interested in the prospect, especially as I learned more about their [technical advantages](https://www.makeuseof.com/tag/reasons-ditch-cms-static-site-generator/); and, so, here we are. 35 | 36 | ## As for me . . . 37 | 38 | So, who am I, and what business do I have putting yet another site on this already overstuffed web? 39 | 40 | I love to write. More often than not, the muse is in one of her oh-let's-go-"techy"-instead-of-"fictiony" moods and so she tells me to write more stuff on this site. Sometimes it's even about the app or apps I use to write, which leads me to the next point . . . 41 | 42 | Am I anybody special? Nope; just an ordinary working guy who, for decades, has used a multitude of computing devices, operating systems, and apps---and learned a few things (and formed more than a few opinions) along the way. I've been told I can make complicated things easier to understand, and I try to do the same here. 43 | 44 | Finally: since the Kewl Kids went off and left us non-SSG users in the dust, it behooved me and my geek's curiosity to give this stuff a try, and that was the main reason I started the site in the first place. As one who's long delighted in hand-coding websites whenever possible, I love seeing the comeback of static sites. 45 | 46 | Thank you for stopping by. I hope you find this site a source of various little nuggets of helpful info, and occasionally a laugh or two---even if I hadn't intended it, but especially if I had. 47 | 48 | Again, welcome. 49 | 50 | **Note**: For those familiar with the site, you'll see that this text now encompasses both the long-time "About me" text and the site's original home page "welcome" text. 51 | {.yellowBox} -------------------------------------------------------------------------------- /src/posts/2021/07/gems-in-rough-07.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | title: "Gems in the rough #7" 4 | subtitle: "Eleventy Meetup #1, Firefox’s woes, and other website-related arcana" 5 | description: "Static site generator fans, here’s another (sorta) brief set of goodies for your edification." 6 | author: Bryce Wray 7 | date: 2021-07-17T14:23:00-05:00 8 | lastmod: 2021-07-18T13:28:00-05:00 9 | discussionId: "2021-07-gems-in-rough-07" 10 | featured_image: "gemstones-1419780_3648x2736.jpg" 11 | featured_image_width: 3648 12 | featured_image_height: 2736 13 | featured_image_alt: "Close-up view of colorful gemstones" 14 | featured_image_caption: | 15 | Image: cabotots; Pixabay 16 | --- 17 | 18 | Each entry in the "Gems in the rough" series is a collection of tips, explanations, and/or idle observations which I hope will be at least somewhat useful to those of you with websites built by [static site generators (SSGs)](https://jamstack.org/generators). 19 | {.blueBox} 20 | 21 | ## Eleventy Meetup #1 22 | 23 | The inaugural **[Eleventy Meetup](https://11tymeetup.dev/)** occurred earlier this week, and it was a blast. We heard interesting talks from [Eleventy](https://11ty.dev) creator [Zach Leatherman](https://zachleat.com) and [Mike Aparicio](https://twitter.com/peruvianidol) of [11ty.recipes](https://11ty.recipes) fame (and Mike's dog, too, albeit briefly). A good time was had by all. If you have the slightest interest in Eleventy, I urge you to check the [Meetup site](https://11tymeetup.dev) and sign up for the newsletter so you can be advised of future sessions. 24 | 25 | ## Firefox slips further 26 | 27 | Things are not great in the world of [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/) right now, and they got even sadder this week with news that, according to [StatCounter](https://gs.statcounter.com/browser-market-share), Firefox's share of the browser market in June dipped below that of [Microsoft Edge](https://www.microsoft.com/en-us/edge) and is nearing that of the [browser that ships with Samsung phones](https://en.wikipedia.org/wiki/Samsung_Internet) (which I'd guess many Samsung users eschew in favor of, yep, [Chrome](https://www.google.com/chrome/)): 28 | 29 | {% imgc "2021-07-17_StatCounter-browser-mkt-shr_June-2021_1872x576.png", "Screen capture of StatCounter’s June 2021 display of worldwide browser market share", 1872, 576 %} 30 | 31 | As for the elephant in the room represented by these numbers: we've clearly reached a phase of browser use like that of the "Internet Explorer *is* the internet" days where Chrome's massive and *non*-imperiled market share is concerned. Barring outside action by regulators that could affect this in ways not currently expected, I guess we who build websites will just have to hope our [new insect overlords](https://knowyourmeme.com/memes/i-for-one-welcome-our-new-insect-overlords) don't abuse this. (Yeah, right.) 32 | 33 | ## Azure Static Web Apps 34 | 35 | It escaped my notice until this week that Microsoft's [Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/) service [has been in general availability for two months](https://azure.microsoft.com/en-us/blog/develop-production-scale-modern-web-apps-quickly-with-azure-static-web-apps/). On learning this, I decided to give ASWA a try with the same Eleventy-based test repo I use on various [Jamstack](https://jamstack.org)-savvy hosts. 36 | 37 | Getting signed up was, well, challenging, as one tends to find for most things [Azure](https://azure.microsoft.com/en-us/); and the build process was lengthy[^ASWAslowbuild] and supports only a limited number of SSGs, *not* including Eleventy as of now. Still, I got it going. 38 | 39 | In my tests so far, the ASWA site's performance is so-so, especially compared to that of hosts with *far* less up-front hassle. It's not terrible, but I'd have expected more from an Azure-hosted site. Will keep a watch on it but, for now, I'm of the opinion that Microsoft is content to let the usual Jamstack hosts lead the way since ASWA probably doesn't fit its business model all that well. 40 | 41 | [^ASWAslowbuild]: To be fair, I should note that it depends on [GitHub Actions](https://github.com/features/actions), which in my experience adds about ninety to 120 seconds to the process on its own. That said, a build process taking nearly three times as long on ASWA compared to a similarly GitHub Actions-fueled one on a [CloudFlare Workers site](https://workers.cloudflare.com) doesn't augur well for Microsoft's setup right now. 42 | 43 | ## Comment-by-email 44 | 45 | On one of my at-least-daily visits to the [Eleventy Discord](https://www.11ty.dev/blog/discord/), I noticed a link to "[Emails, not comments](https://luke.work/blog/2021/07/alternative-to-comments/)" by [Luke Harris](https://twitter.com/lkhrs). The article described how, having decided not to have a commenting platform on his Eleventy site anymore, Mr. Harris made it a one-click action for anyone to reply to his articles by email. (He'd probably want me to add that he got the idea from [Kev Quirk's site](https://kevq.uk/), as the linked article duly notes.) 46 | 47 | The process was both appealingly simple and, to me, geekily interesting; so I stole, um, adopted his approach---as you can see at the bottom of this post, as well as all other pages on the site using the same template. Thank you, sir! -------------------------------------------------------------------------------- /src/posts/2021/02/tailwind-head-hugo-pipes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: singlepost 3 | title: "Tailwind-to-head with Hugo Pipes" 4 | subtitle: "An easy way to get internal CSS" 5 | description: "If your website draws that “render-blocking resource” gripe during tests, here’s one method for fighting it." 6 | author: Bryce Wray 7 | date: 2021-02-02T16:25:00-06:00 8 | lastmod: 2021-03-20T17:30:00-05:00 9 | #draft: false 10 | discussionId: "2021-02-tailwind-head-hugo-pipes" 11 | featured_image: "code-html-head-5421210_5103x3403.jpg" 12 | featured_image_width: 5103 13 | featured_image_height: 3403 14 | featured_image_alt: "Closeup of display of web page's HTML HEAD section" 15 | featured_image_caption: | 16 | Image: Sárfi Benjámin; Pixabay 17 | --- 18 | 19 | **Note**: For a [Eleventy](https://11ty.dev)-based solution, see "[Tailwind-to-head with Eleventy](/posts/2021/03/tailwind-head-eleventy)" from a few weeks later. 20 | {.yellowBox} 21 | 22 | External *vs.* internal---that is the question. At least, it is when you're considering how and where to provide CSS in your website. 23 | 24 | Among the CSS *cognoscenti*, there are endless debates about whether your site's CSS should be in one or more separate files (external) or included in ` 52 | {{ end }} 53 | ``` 54 | {% endraw %} 55 | 56 | ## SCSS, anyone? 57 | 58 | Finally, as a bonus, here's how you do it if you prefer to use [SCSS](https://sass-lang.com) (for which Hugo Pipes has its own out-of-the-box capabilities, not requiring either PostCSS or Node.js) rather than Tailwind CSS. As before, **external** first: 59 | 60 | {% raw %} 61 | ```go 62 | {{ $options := (dict "targetPath" "css/index.css" "outputStyle" "compressed" ) }} 63 | {{ $css := resources.Get "scss/index.scss" | resources.ToCSS $options | fingerprint }} 64 | ``` 65 | {% endraw %} 66 | 67 | . . . and then, **internal**: 68 | 69 | {% raw %} 70 | ```go 71 | {{ with resources.Get "scss/index.scss" | resources.ToCSS (dict "outputStyle" "compressed") }} 72 | 73 | {{ end }} 74 | ``` 75 | {% endraw %} 76 | 77 | Whichever way you roll on each choice above---external *vs.* internal, Tailwind/PostCSS *vs.* SCSS---here's hoping this is useful information for you Hugo aficionados. -------------------------------------------------------------------------------- /src/posts/posts.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | tags: 4 | - nav 5 | navtitle: Posts 6 | title: Posts 7 | description: Posts for this website 8 | eleventyExcludeFromCollections: true 9 | pagination: 10 | data: collections.post 11 | size: 5 12 | reverse: true 13 | alias: posts 14 | --- 15 | 16 |
18 |
81 |
82 | Posts
19 | 20 |
21 |
43 | {% for post in posts %} 44 |
58 |
80 | 22 | {% if pagination.firstPageHref != page.url %} 23 | {{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }} 24 | 25 | {{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }} 26 | {% else %} 27 | {{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }} 28 | 29 | {{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }} 30 | {% endif %} 31 | 32 | {% if pagination.lastPageHref != page.url %} 33 | {{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }} 34 | 35 | {{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }} 36 | {% else %} 37 | {{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }} 38 | 39 | {{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }} 40 | {% endif %} 41 |
42 |43 | {% for post in posts %} 44 |
45 |
56 | {% endfor %}
57 | {{ post.data.title | safe }}
46 |{{ post.data.subtitle | safe }}
47 |
48 | {% if post.data.lastmod %}
49 |
Last modified
50 | {% endif %}
51 |
53 | {{ post.data.description | safe }} 54 |
55 |58 |
59 | {% if pagination.firstPageHref != page.url %} 60 | {{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }} 61 | 62 | {{ '/src/assets/svg/svgPrevPageIcon.svg' | svgContents | safe }} 63 | {% else %} 64 | {{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }} 65 | 66 | {{ '/src/assets/svg/svgFirstPageIcon.svg' | svgContents | safe }} 67 | {% endif %} 68 | 69 | {% if pagination.lastPageHref != page.url %} 70 | {{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }} 71 | 72 | {{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgNextPageIcon.svg' | svgContents | safe }} 73 | {% else %} 74 | {{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }} 75 | 76 | {{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }}{{ '/src/assets/svg/svgLastPageIcon.svg' | svgContents | safe }} 77 | {% endif %} 78 |
79 |