rupl / chrisruppel.com Goto Github PK

My friends and family that read travel posts have frequently brought up that the photos can't be looked at individually like a standard gallery. Additionally the captions often get in the way. I can fix two problems at once by removing my current mechanism for captions and installing Photoswipe

I'll have to write some JS that scrapes the data out of my markup, but hopefully it will work with <picture> data as easily as simple <img>. If not, I'll add the low/high-def URLs to separate attributes that the gallery can read.

Sometimes overriding location with a custom preposition makes the page title clearer. But when I include the location in other places (such as home/about pages, or the Links sidebar) then it makes no sense ("I was last seen from Lak Lake, Vietnam"). Adding the ability to double-override the preposition within the _include would make the wording flow best in all situations. I think I'd want it to work like this (assuming I have location.prep set to from:

{% include location.html location=page.location prep=in %}

Which would output Kalaw Trekking Day 1 from Kalaw, Myanmar in the page title but I was last seen in Kalaw, Myanmar on the home page.

Instead of these dull gray boxes I want something with character. Homemade SVGs from busta would be personal and fun!

Might as well give this a spin now that there are generators: https://webmanife.st/

Hot on the heels of #59, it would be cool to reduce the rather long travel list to show only the links a visitor has saved offline. I can make this easier on myself by using the URLs I was already embedding in each article, and comparing them to the cache entries:

<article class="teaser--title" data-url="/travel/bus-from-hanoi-to-laos/">

...will be a 🍰 to match a cache entry of chrisruppel-offline--/travel/bus-from-hanoi-to-laos/

From there, maybe I can offer a button to toggle all entries, or better yet, an explanation that says there are more links but until the network comes back, they won't work.

I noticed I am getting errors on a piece of custom code I copied to supply the SW with a window.location substitute:

Uncaught TypeError: Cannot read property 'pathname' of null
    at service-worker.js:106

Time to code like a grown-up. To start things off:

• Move my inline head JS into a file. Update SW to cache it so I can achieve the same perf benefits of inlining.
• re-organize MapBox include, move the inline code into a file and move config into data-attributes on the map container.
• Move Google Analytics into a file. The account number must still somehow come from the environment. Maybe another data-attr + ID on the script tag?

This is more of an experiment than a serious attempt at revenue, but it would be interesting to allow Bitcoin donations for worthwhile content. A small CTA at the bottom of an article, maybe a suggested donation of $1 or something small.

See http://indiewebify.me/ Level 3.1

This will require a new Jekyll post type, and honestly it will require my image pipeline to be moved somewhere more permanent than inside Heroku's build process . Can't be rebuilding every time I want to reply to something. Fixed by #15

From #25:

My tags are currently travel-specific and it strikes me as useful to have two clouds instead of combining them... I just can't imagine tagging a technical post with #snorkeling 😁

I saw on tantek.com that a few hidden inputs is all that is needed to do nice, focused Google searches on a website. The results are even rich snippets! Here's a sample URL that it would redirect a visitor to, provided they entered laos as the search term:

https://www.google.com/search?as_sitesearch=chrisruppel.com&tbs=sbd%3A1%2Ccdr%3A1%2Ccd_min%3A1%2F1%2F1970&q=laos&gws_rd=ssl)

The search box could be progressively enhanced with my travel.json file, providing auto-complete results below the box and letting them skip the Google page entirely if something compelling appears.

🔗 Read about it on Smashing Mag.

It would eliminate the double-refresh needed to get latest HTML

The HTML which defines my work availability calendar gets cached along with the rest of that URL as part of my SW. While the fast page load is nice, I need to make an additional request if the internet connection is present so that the calendar is always up to date. If there's no connection, the last-cached calendar is fine, but I'll display a warning saying the calendar is out of date.

If I want to be independent, I need to make my contact page better. Here are some particularly well-designed contact pages:

• https://sarasoueidan.com/contact/ — "what I do, what I don't do"
• http://rachelnabors.com/consulting — selling her main service by highlighting its usefulness

TODOs

• Availability calendar #50
• Describe the services I want to provide #54
• List logos of select clients from previous work #55
• Supply a contact form of some sort. #51

Great writeup here:

🔗 https://bitsofco.de/styling-broken-images/

🔗 https://www.eff.org/dnt-policy
🔗 https://raw.githubusercontent.com/EFForg/dnt-policy/master/dnt-policy-1.0.txt

I still have to accomplish a few things in order to earn this file, but I think I can get there. This would be in addition to the human-readable privacy policy in #79

Eventually I'll need to redirect a URL. Perhaps I could generate a redirects.json within Jekyll then suck that up with Express. That way, the old URL(s) can live inside the document using the new URL.

I broke them during #15 but didn't think it was important enough to prevent from shipping the fix for the photos.

🔗 Article by Dean Hume

Overall goal is to make travel pages even traveler friendlier. Some options to consider:

• avoiding big ol' images
• killing webfonts instantly
• Make JS opt-in (except for GA?)

Loading it for 2% of users would be good. Just a few dozen monthly data points to help get a real idea of how the site is working.

🔗 Client-side approach to measuring SpeedIndex
💻 https://github.com/WPO-Foundation/RUM-SpeedIndex

I no longer leave the source directory (_img in this repo) in the Heroku slug to decrease its compiled size. All media has been migrated to S3 as of #15 — except I just now realized that photospheres had an issue that I previously overlooked.

Initially I thought it was the lack of site.img-host prefixed on the image path (attempted to fix with ff0239e), but that's not enough. When I redeployed, I saw a new error in Chrome, which is a years-old issue that I was unaware of:

photosphere.min.js:10 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at https://chrisruppel-assets-eu1.s3.amazonaws.com/img/photosphere/koh-yao-noi-tour.jpg may not be loaded.(…)

Since I'd rather not fragment where images are stored, I need to fix this CORS issue to restore photospheres.

Heroku complained:

WARNING:

You have the .bundle/config file checked into your repository
It contains local state like the location of the installed bundle
as well as configured git local gems, and other settings that should
not be shared between multiple checkouts of a single repo. Please
remove the .bundle/ folder from your repo and add it to your .gitignore file.
https://devcenter.heroku.com/articles/bundler-configuration

Minifying images as postinstall (during slug compilation) would drastically reduce downtime between releases and also 404s after new release boots.

At the moment, the blocker is that the compiled slug is too big when originals plus cuts are present. But maybe I could delete the source directory after the task successfully runs. If the minified images are the only copy then the slug should be smaller than it is now since it currently includes originals.

As I add more image cuts, their sizes are drastically smaller than the originals so the savings from minification will outweight the added size from extra cuts. In the next couple years I can't imagine adding more than 4 total anyway (orig, 640, 320, 32).

I'll probably hit the slug size limit as I keep adding photos, but this is a solution aimed at creating more stable deployments and fewer race conditions within the site.

🔗 https://indiewebify.me/#send-webmentions

I saw a very nice example from Practical ARIA Examples by Heydon Pickering. Example screenshot:

I was looking at an old entry and noticed the KML path was gone. It's definitely still loading the data because the waypoints are still there:

No console errors, so it might just be an issue with leaflet-omivore being out of date. The problem seems to apply to all maps with KML.

It's pretty lame to show Cannot GET /missing/path/ on 404s. I need classy error pages, or at least something on brand to avoid confusion.

I found this gist that suggests I can set environment variables in Heroku and let Jekyll consume them: https://gist.github.com/nicolashery/5756478

Then I can move my GA/MapBox/Disqus tokens out of source control.

I did each individual trip entry, but I forgot to markup the travel lists with structured data. It should reuse the structure from trip.html... bonus points if I can actually reuse templates.

Sometimes I want to publish tech-related links that I endorse. Optionally they could appear in the blog stream. My main difficulty at the moment would be isolating and reusing tags (specifically, the tech tags that don't yet exist until #27 is resolved)

🔗 Example: https://adactio.com/links/tags/serviceworker

Time to give this a whirl. My header has gotten pretty disorganized as I bolted new sections on to the site in a piecemeal fashion. If a browser lacks support I'll give them the ol' one-column layout.

I'd like to create a simple set of options that allow visitors to control how the site behaves. Some of the preferences I'd provide:

• Clearly display value of navigator.doNotTrack to the visitor with a link informing them that they can control the setting within their browser.
• Opt-out of analytics on my site only (Matomo is already configured to respect browser DNT flag, but maybe others who don't know about DNT want to disable tracking as awareness increases)
• Control auto-loading of embeds (Twitter, Youtube, Codepen)
• Control auto-loading of content (Mapbox, Disqus)

I was thinking that pressing ? would open this dialog, but maybe a dedicated page at /privacy is better, including some policy about (lack of) data retention.

There appears to be an encoding issue in your tags, specifically the data-comment attribute. This can be seen in the Thai longboat image located at https://chrisruppel.com/travel/koh-phi-phi-thailand/. Unsure if it is all special characters, however the specific character in question is a colon.

Image (provided by @mattgrill):

They can't be part of the build process. In the long term they can't even be part of the codebase because it will make my Heroku slug size huge eventually.

I have very few twitter embeds but there's apparently a tag that instructs Twitter not to track people viewing content on my site:

• https://twitter.com/bcrypt/status/903724091143630848
• https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have

Currently I'm using the 101 of SW Cache, caches.addAll() to store the HTML and images that are to be viewed offline. While easy to implement, it has caused me problems related to CORS. My S3 bucket was misconfigured for a long time, and it didn't have a max-age while misconfigured.

The S3 stuff is better now, but the flakiness of my "Save Offline" button could be improved by making the images optional. Then the HTML response is the only hard dependency for offline viewing, which is often what people want anyway (my most frequently-saved articles have to do with visas and other travel stuff where the person might not have a good connection while saving the article).

Solution is to split the images off from the main "Save offline" routine, and add them in if possible in the background after the HTML saves. Hopefully I can add to a cache after creating it!

it is time

From #25:

Similar to /travel/list/ but for the tech blog, would be good to have a client-side search or something from the get-go.

Not quite sure how yet, and I might have to go back and crop many photos since I was relying on background-size: [contain|cover] to display a lot of them. But I think if I add an explicit type to each gallery I can predict the sizes attr based on the other bits of yaml.

Since my site is essentially static, I need to hook a contact form in somehow.

🔗 https://developers.google.com/web/showcase/2016/service-worker-perf

I'm already collecting the outcome and URL of each person who hits the "Save/Update article offline" button, but disabled the SW registration event since it was too broad and didn't really offer an insight. This article offers a much better approach to measuring performance improvements.

I have a lot of problems with uncaught exceptions in my Service Worker. The console just fills up with request-related errors when offline. They're not even errors really. The resources are truly not available and I don't expect them to be. But since it's expected I should be able to catch them and let the request fail "silently" by fixing the structure of my Promises. Here's a sample error log:

:3456/travel/list/ Failed to load resource: net::ERR_INTERNET_DISCONNECTED
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
:3456/css/main.min.css Failed to load resource: net::ERR_INTERNET_DISCONNECTED
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
:3456/css/fonts.min.css Failed to load resource: net::ERR_INTERNET_DISCONNECTED
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
:3456/static/[email protected] Failed to load resource: net::ERR_INTERNET_DISCONNECTED
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
:3456/js/main.min.js Failed to load resource: net::ERR_INTERNET_DISCONNECTED
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

I saw a tweet pointing out that WaPo is doing this on their articles. What a cool idea!

🔗 https://twitter.com/igrigorik/status/882993263644377093
🔗 https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

I'd like to provide a separate page to display my work history.

• URL: /work/history/
• content: /work/_posts

I like this type of timeline: https://www.kickstarter.com/projects/1345510482/jewelbots-friendship-bracelets-that-teach-girls-to/updates

Giving each entry lots of space means I can bring them in with cool effects, or have plenty of space to add optional info like an image.

• Add a link that opens a new issue here on GitHub with a title prefix or something.
• Add a label for Feedback here on GitHub.

The travel list is cached by the SW, it would be cool to check travel.json and update the page on the initial revisit instead of prompting the person to refresh for new content. The next refresh will contain the latest stuff regardless.

Alternatively, when new page is fetched by SW it could put a little notification that advises the visitor of updated content.

Curently, a directory is hardcoded into _includes/gallery.html. It assumes the source image is in _img/travel. Different blog sections should have different directories of images.

• Alter gallery to take a directory as an argument
• Update gulp processes to handle other directories. This will probably involve reorganizing photos completely, including the existing S3 structure: _site/img/[SIZE]/[DIR]/[SOURCE]
• Fix any existing blog posts.. I had to dump non-travel images into the _img/travel folder to get publishing quickly.

Here's a list of posts that need to be updated later on:

• 2016-04-17-bustashape-vetenskapsfestivalen-gothenburg-2016
• 2017-01-10-arduino-soil-moisture-sensor
• 2017-01-12-lilypad-arduino-biking-jacket

Goal is to eliminate Procfile or reduce it back down to the most basic command: node index.js

I think I have to re-order the buildpacks once again and do the $PATH altering that my Heroku support ticket advised. That way the Ruby is installed first, and when node runs it will both use node 4.x AND be able to do the Jekyll compile (since Ruby was installed first)

Then (if I finally resolve #15) the only command being run is starting Express and serving site.

From #25:

My Disqus comments currently are hardcoded to be for Travel. Either figure out how to use two different Disqus groups or just combine them and change the group name to be generic.

This is an edge-case since rarely will a user get all the way down to the bottom, but when nothing is left, the button produces an error instead of becoming disabled as designed:

main.min.js:1 Uncaught TypeError: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'.