rubycoloredglasses

Playing Video in your Subaru Starlink System

Sat, 16 Sep 2023 17:53:00 -0400

If you own a Subaru Outback or Legacy released in 2015 - 2018 that includes the Starlink system (the one without Apple Carplay), then you might not know that you can do the following cool things with a USB drive or SD card.

View a slideshow of images
Upload an image to display when you turn the “screen off”
Sit back and watch videos while the car is parked (with parking break on)

You can find details on how this is done in the 2017 Legacy and Outback Subaru Starlink Owners Manual, but I’m here to extract that and tell you what to do.

Note: Don’t add files to the navigation/map system SD card, as this will break the navigation.

General

The USB thumb drive or SD card should be formatted as FAT 16 or FAT 32
Maximum number of folders: 3000
Maximum number of files: 9999
Maximum files per a folder: 255
MP3/WMA/AAC files in folders up to 8 levels deep can be played. However, the start of playback may be delayed when using discs containing numerous levels of folders. For this reason, we recommend creating discs with no more than 2 levels of folders.

Music

The player relies on ID3 tags included in the files to identify the title of the artists, album, track, cover art, etc. If you import CDs or MP3 files you buy on Bandcamp into the Apple Music app, you edit this metadata for your music, and even apply cover artwork.

The manual states that the Starlink system supports streaming audio from iPod devices (classic, iPod Touch 1st - 5th gen, iPod nano 1st - 7th gen, iPhone 1 - 5). I’m using an iPhone 14 Pro and it works fine.

Compatible Files Types:

MP3 - ‘.mp3’ extension
WMA - ‘.wma’ extension
AAC - ‘.m4a’ extension

Video

Ensure to engage the parking brake when watching video content, otherwise you will only get a blue video thumbnail.

iPod video is not supported.

The following video codecs are supported:

WMV9 - WMV or AVI file type
MPEG4 - MPEG4 or AVI file type
H.264/AVC - MPEG4 or AVI file type

The following video resolutions are supported:

Low definition television
- 128×96 (MMS-Small - Lowest size recommended for use with 3GPP video)
- 160×120 (QQVGA - Lowest commonly used video resolution)
- 176×144 (QCIF Webcam)
- 320×240 (QVGA, NTSC square pixel)
- 352×240 (SIF (525) - NTSC-standard VCD / super-long-play DVD)
- 352×288 (CIF / SIF (625) - PAL-standard VCD / super-long-play DVD)
480p
- 640×480 (480p - 4:3 ratio)
- 720×480 (480p - 3:2 ratio)
576p
- 720×576 (considered standard definition for PAL regions)

If you are using a Mac, I recommend using Handbrake to convert your videos. I used the “Fast 480p30” and “Fast 576p25” presets in Handbrake to convert videos and they worked just fine.

Images

The compatible photo file extensions are JPG and JPEG.

Slideshow

You can view a slideshow of images if you are parked with the emergency parking break engaged. From the “INFO” menu the USB drive or SD card will show up as an option, select that option. A menu will display (e.g. “USB Photo”) with options shown to display a Slide Show, with Play Time (Fast, Normal Slow) and Play Mode (Normal, Random) options.

Image files can be viewed at the same time that audio files are being played back.
Ensure to engage the parking brake when watching video content. If not, only a blue screen will be displayed. Audio, however, can be heard normally.

Screen Off

You can set an image as the screen off images by uploading images from a USB drive or SD card.

When saving the images to a USB or SD card, make sure to place them in an ‘Image’ folder located in the root folder of the drive. If this folder name is not used, the system cannot download the images. The folder name is case sensitive.
Go to Home > Settings > General, then tap “Customize Screen Off Image”
After you’ll uploaded the images to your system, you can go to Home > Settings > Screen Off to make your console display the “Screen Off” image.

Generating Jekyll Posts from an External Source

Sat, 16 Sep 2023 17:31:00 -0400

I want to use a headless CMS with Jekyll as the source of my blog posts. There aren’t many plugins that aim to faciliate this.

There is a WordPress jekyll-import tool, but this is intended for a one time import of Wordpress content to Markdown files inside of your Jekyll project, not a continual build process that sources all content from an API.

The Jekyll Engine

Jekyll Posts are just a natively supported form of Jekyll collection. The documentation for Jekyll even states that if you configure your “collections” to load from a different directory, you will need to move your _posts and _drafts folder under that directory as well.

Jekyll builds your site through a process that involves the following steps:

Read - Reads data from directories/files into the Jekyll::Site object
Generate - Runs each of the Generators defined by plugins you’ve installed or coded yourself
Render - Renders content in memory (markdown converted to HTML, SASS converted to CSS, etc.)
Cleanup - Removes orphaned files and empty directories in destination
Write - Writes static files, pages, and posts to build directory (e.g. _site)

The entire process is about “reading” data from files into Ruby objects that are stored inside of the Jekyll::Site object. This includes pages, posts, collections, and data.

After this it runs the generators defined by Jekyll plugins you install, or that you write yourself.

Next it goes through a rendering process, where the content loaded from Markdown files is converted to HTML. For instance, inside of each Jeyll::Document object used to represent each blog post, the Markdown is stored to the ‘content’ attribute, but the rendered HTML is stored in the ‘output’ attribute.

The cleanup step performs the necessary file cleaning up in the site destination directory.

Lastly all the rendered data is then written to actual files under the destination directory (e.g. defaults to _site).

Here’s how I inspected objects in memory through each step of the site building process using IRB.

require 'jekyll'

options = {
  "source"      => File.expand_path("."),
  "destination" => File.expand_path("./_site"),
  "incremental" => true,
  "profile"     => true,
  "watch"       => true,
  "serving"     => true,
}

# merge build options with configuration data
options = Jekyll.configuration(options)

# initialize the site object
site = Jekyll::Site.new(options)
site.class
# => Jekyll::Site

# initialize attribute defaults
site.reset

# read data from directories/files
site.read

# inspect posts collection
site.collections['posts'].class
# => Jekyll::Collection
site.collections['posts'].docs.count
# => 163

example_doc = site.collections['posts'].docs[0]
# => #<Jekyll::Document _posts/2004-09-09-bug-tracking.md collection=posts>

example_doc.path
# => "/Developer/redconfetti.github.io/_posts/2004-09-09-bug-tracking.md"
example_doc.type
# => :posts
example_doc.data
# => {
#   "draft"=>false,
#   "categories"=>["php"],
#   "layout"=>"post",
#   "published"=>true,
#   "title"=>"PHP/MySQL Bug Tracking",
#   "author"=>"maxwell keyes",
#   "date"=>2004-09-09 16:51:00 -0400,
#   "comments"=>true,
#   "tags"=>["bug tracking"],
#   "slug"=>"bug-tracking",
#   "ext"=>".md",
#   "excerpt"=><Jekyll::Excerpt id=/2004/09/bug-tracking#excerpt>
# }
example_doc.data["permalink"]
# => nil

# Content is the markdown string
example_doc.content
# => "For anyone who needs a free web based Bug Tracking system programmed
# using\nPHP/MySQL, check out Flyspray.\n"

example_doc.output
# => nil

# After file content is loaded into Jekyll::Site, it is rendered from Markdown
# to actual HTML using site.render
site.render
# => nil

example_doc.output
# => "<!DOCTYPE html>\n<html>\n  <head>\n  <meta charset=\"utf-8\">\n  
# <meta name=\"viewport\" content=\"width=device-width initial-scale=1\" />\n
# <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\n
# <title>PHP/MySQL Bug Tracking</title>
# ...
# <footer class=\"footer\">\n  <span class=\"footer__copyright\">
# &copy; 2023 Jason Miller. All rights reserved.</span>\n</footer>\n\n
# </body>\n</html>\n"

site.cleanup

site.write

Custom Post Approach

I tried to write a plugin/generator for Jekyll that used a class that inherits from Jekyll::Document, and patches various methods so that it can be used without sourcing data from a Markdown file under the _posts directory. I was not able to get this to work without errors and complications.

Instead, it’s better that you create a custom page template, as suggested by the Jekyll Generators documentation, with a generator that locates the custom page by name, and simply adds the custom data under the pages data hash attribute.

Liquid Drops

The only complication that could not be avoided is that the Liquid templating system used by Jekyll will raise errors if you use custom defined objects in your page template (.e.g undefined method 'to_liquid').

If the objects you are iterating over and injecting into your page are not one of the basic Ruby types, then you’ll need to make sure the objects you’re iterating over inherit from Liquid::Drop.

See Liquid Drops

Wordpress RSS Feed Example

Here’s an example of code needed for a simple Jekyll generator that can retrieve posts from an RSS/XML feed hosted under Wordpress.com.

##########################################
# Gemfile

# XML to Hash translator
# https://github.com/savonrb/nori
gem 'nori', '~> 2.6'

# Nokogiri
# https://github.com/sparklemotion/nokogiri
gem 'nokogiri', '~> 1.15'

# Backport Jekyll Sass Converter to avoid deprecation warnings 
gem 'jekyll-sass-converter', '~> 2.2'

##########################################
# _config.yml

wp_posts_page:
  title: 'Blog'
  layout: 'wp_posts_page'
  feed_url: 'https://redconfetti.wordpress.com/feed/'

##########################################
# _plugins/wordpress_posts.rb

require "net/http"
require "uri"
require "nori"

module WordpressPosts
  class Generator < Jekyll::Generator
    def generate(site)

      @post_page_config = site.config['wp_posts_page']
      raise 'Missing Wordpress configuration in _config.yml' unless @post_page_config

      page_layout = @post_page_config['layout']
      page_title = @post_page_config['title']
      page_slug = page_title.strip
        .downcase
        .gsub(/[\s\.\/\\]/, '-')
        .gsub(/[^\w-]/, '')
        .gsub(/[-_]{2,}/, '-')
        .gsub(/^[-_]/, '')
        .gsub(/[-_]$/, '')

      feed_url = @post_page_config['feed_url']
      post_feed = WordpressFeed.new(feed_url)

      # get template
      posts_page = site.pages.find { |page| page.name == 'wp_posts_page.html'}

      posts_page.data['post_feed'] = post_feed.items
    end
  end
end

class WordpressFeed
  attr_accessor :rss_url

  def initialize(rss_url)
    self.rss_url = rss_url
  end

  def rss_channel
    @channel ||= begin
      rss = hash_data['rss'] || {}
      rss['channel']
    end
  end

  def items
    @item ||= begin
      [rss_channel['item']].flatten.collect do |item|
        ItemDrop.new(item)
      end
    end
  end

  private

  def hash_data
    @hash_data ||= begin
      if !xml_string.blank?
        return Nori.new.parse(xml_string)
      end
    end
  end

  def xml_string
    @xml_string ||= begin
      uri = URI(rss_url)
      Net::HTTP.get(uri)
    end
  end

  class ItemDrop < Liquid::Drop
    attr_accessor :feed_item
    def initialize(feed_item)
      self.feed_item = feed_item || {}
    end

    def content
      feed_item['content:encoded']
    end

    def title
      feed_item['title']
    end

  end
end

Page template (_layouts/wp_posts_page.html)

---
layout: page
title: Blog
permalink: /blog/
---

<ul style="list-style-type: none; padding: 0; margin: 0;">
  
</ul>

Storyblok

The above approach isn’t very ideal due to how Wordpress.com embeds oversized images into the posts. Also the free Wordpress hosting account limits the feed to 350 posts.

Hopefully the above example provides you with enough understanding to obtain content from any external data source and embed it into your custom Jekyll pages.

If you want to go with a free CMS for your own site, consider Storyblok. The article, Add a headless CMS to Jekyll, gives good instructions on how to use the Storyblok Ruby Gem with Jekyll. With Storyblok you can define your own schema for the objects you’re embedding in your pages, and nest the objects inside of the content of other objects.

RubyGems SSL Error with jRuby

Wed, 22 Mar 2023 18:08:51 -0400

I spent several days investigating an error that was coming up with our Rails application build using jRuby v9.3.3 - v9.3.10. Everytime the build would try to run bundle install we would get the following error.

Fetching source index from https://rubygems.org/
Retrying fetcher due to error (2/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/ due to underlying error <Unrecognized SSL message, plaintext connection? (https://rubygems.org/specs.4.8.gz)>

Retrying fetcher due to error (3/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/ due to underlying error <Unrecognized SSL message, plaintext connection? (https://rubygems.org/specs.4.8.gz)>

Retrying fetcher due to error (4/4): Bundler::HTTPError Could not fetch specs from https://rubygems.org/ due to underlying error <Unrecognized SSL message, plaintext connection? (https://rubygems.org/specs.4.8.gz)>

Could not fetch specs from https://rubygems.org/ due to underlying error
<Unrecognized SSL message, plaintext connection?
(https://rubygems.org/specs.4.8.gz)>
ERROR: bundle install failed

You will notice it attempts 3 times, this is because the script is actually running:

bundle install --local --retry 3 || { echo "WARNING: bundle install --local failed, running bundle install"; bundle install --retry 3 || { echo "ERROR: bundle install failed"; exit 1; } }

When we would run our script from the command line, it would work just fine. When we would try to run it from our Bamboo application (used for Continuous Integration), it would fail with the above errors.

We’re using RVM to manage the different Ruby versions needed by our applications on the Bamboo server. We thought it might be an issue with Bundler, but it turned out that one of our JAVA configurations was causing this issue.

We noticed that JAVA_OPTS was not set when our admin ran the build scripts from the command line, but with the Bamboo job it was set, and it included the -Djava.security.properties option pointing to a file that used the following:

jdk.tls.disabledAlgorithms=SSLv3, RC4, DES, MD5withRSA, DH keySize < 1024, \
    EC keySize < 224, 3DES_EDE_CBC, anon, NULL, RSASSA-PSS

When we added this to the export for JAVA_OPTS, the issue occurred when running the build scripts, or when running the RubyGems troubleshooting script (curl -sL https://git.io/vQhWq | ruby). When we removed it, the error returned.

Long time nuclear waste warning messages

Thu, 09 Dec 2021 15:37:18 -0500

I wanted to apply the robotic voice synthesis to Long-time nuclear waste warning messages.

say -v fred "This place is a message"
say -v fred "and part of a system of messages"
say -v fred "pay attention to it\!"
say -v fred "Sending this message was important to us."
say -v fred "We considered ourselves to be a powerful culture."
say -v fred "This place is not a place of honor."
say -v fred "no highly esteemed deed is commemorated here."
say -v fred "nothing valued is here."
say -v fred "What is here was dangerous and repulsive to us."
say -v fred "This message is a warning about danger."
say -v fred "The danger is in a particular location."
say -v fred "it increases towards a center."
say -v fred "the center of danger is here."
say -v fred "of a particular size and shape, and below us."
say -v fred "The danger is still present, in your time, as it was in ours."
say -v fred "The danger is to the body, and it can kill."
say -v fred "The form of the danger is an emanation of energy."
say -v fred "The danger is unleashed only if you substantially disturb this place physically."
say -v fred "This place is best shunned and left uninhabited."

Updating RBEnv on Raspberry Pi

Mon, 14 Jun 2021 10:19:55 -0400

Here’s a modified version of instructions provided by Yosei Ito. I used apt remove instead of apt uninstall.

sudo apt remove ruby-build
$ mkdir -p "$(rbenv root)"/plugins
$ git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

This worked very well for me, helping me to install Ruby 2.7.3, and install the gem dependencies for this website without any errors or need for using ‘sudo’ when installing gems via Bundler.

Generating a New Rails Project

Thu, 10 Dec 2020 10:38:55 -0500

The great thing about working with a framework like Ruby on Rails is how you can pick and choose the components that make up your application. Developers often have preferences concerning solutions or tools they use in their projects. They have the choice of testing tools such as Rspec or Cucumber, testing factory libraries such as FactoryBot or Fabrication, authentication solutions such as Devise or AuthLogic, and authorization solutions such as CanCan or Pundit.

It can feel heavy having to reconfigure a freshly generated Rails application to use these different components, because you spend most of your time configuring the new application rather than jumping into actually building the functionality.

Application Templates

Thankfully Rails supports Application Templates that make configuring a new application a breeze.

It’s possible for you to configure your own custom template with your primary preferences all in one file. You could maintain your own template in a Github Gist using this option.

See my example template.

App Template Command

Even better than this is that you can choose to apply certain configurations to your application ala carte by using the ‘app:template’ rails command. This command allows you to run template fragments from publicly hosted template scripts. You can find many scripts for various solutions on Rails Bytes.

My Recipe

I prefer to use tools provided by the JavaScript / ECMAScript eco-system facilitated by NodeJS packages for my front-end, using Webpack. Ruby on Rails applications get support for this from Webpacker. I like ReactJS, but I prefer VueJS for my own personal projects.

Because I use Webpack as my asset pipeline for the front-end application and assets, I don’t need the Rails asset-pipeline or page rendering helpers. This causes me to prefer using an API-only configuration with Ruby on Rails.

To create a new application, I use the following command to generate an API Application, using Webpacker to with a VueJS front-end.

rails new my_application --api --webpack=vue --database=sqlite3 --skip-test --skip-turbolinks --skip-sprockets

After I’m done generating the application, I use the following application templates to setup my app.

EditorConfig - Specifies file formatting guidelines for many code editors
Rspec - Popular unit testing framework for Ruby
FactoryBot - Fixtures replacement for testing
StandardRB - Ruby style guide, linter, and formatter. See StandardRB
dotenv - A Ruby gem to load environment variables from .env. See dotenv-rails

Here are some optional recommendations that depend on the type of application you are developing:

Friendly ID - “Swiss Army bulldozer” of slugging and permalink plugins for Ruby on Rails. See friendly_id
Ahoy - Track visits and events in Ruby, JavaScript, and native apps. Data is stored in your database by default so you can easily combine it with other data. See Ahoy
PgHero - Performance Dashboard for PostgreSQL. See PgHero
Pundit - Authorization system. See Pundit
Vue with InertiaJS - Library supporting conventional interface between front-end tools (React, Vue.js, and Svelte) and back-end (Laravel and Rails). See InertiaJs
SendGrid - Configures Ruby support for SendGrid email service API
GraphQL - Add a GraphQL API to your Rails app
DelayedJob - Background Job processing. See DelayedJob
Sidekiq - Background Job processing. See Sidekiq

How to Insert Special Entities in React

Wed, 09 Dec 2020 16:14:10 -0500

Generating Characters

You can generate UTF-16 characters in ES6 using String.fromCharCode(), which takes one or more UTF-16 codes as input and returns the unicode character(s) specified.

// hex code input
let copyright = String.fromCodePoint(0x00A9);
// "©"

// decimal code input
let copyright = String.fromCodePoint(0169);
// "©"

Here is a list of the codes for common characters I’ve seen used in websites:

Label	Character	Decimal	Hex	HTML
Copyright	©	169	0x000A9	`©`
Registered	®	174	0x000AE	`®`
Trademark	™	8482	0x02122	`™`
Euro	€	8364	0x020AC	`€`
Dollar	$	36	0x00024	`&dollar;`
Ohm	Ω	8486	0x02126	`&ohm;`
Degree	°	176	0x000B0	`°`
Micro	µ	181	0x000B5	`µ`
Em Dash	—	8212	0x201	`—`
Non Breaking Space		160	0x000A0	` `

If you need a symbol not listed above, see the HTML5 Character Reference, or the List of Unicode Characters.

Using with React Components

After generating the character as a constant, just insert it into your JSX as needed.

import React from 'react';

const copyrightMessage = () => {

  const copyright = String.fromCodePoint(0x00A9);
  const year = '2020';
  const companyName = 'Company Name';

  return (
    <span>
     {`${copyright} ${year} ${companyName}`}
    </span>
  );
};

export default copyrightFooter;

See also JSX Gotchas for more approaches.

A New Solution for Personal and Small Business Websites

Sat, 05 Dec 2020 11:02:40 -0500

Static Website Beginnings

I’ve maintained my own personal blog, and maintained websites for small businesses, since 2000. I started building websites by manually coding the files in HTML, and creating images I crafted in Photoshop. I’d update the website by uploading the files to the web hosting server using FTP. I later expanded on this by learning CSS and JavaScript. For the longest time I used Macromedia Dreamweaver (now owned by Adobe), because it was the closest thing to a web-standard compliant WYSIWYG editor, with a text/code editor that supported code coloring. In 2002 I multiplied the power I yielded in developing functional websites by learning how to use server-side PHP coding with the MySQL database. This was my humble beginning as a full-stack developer.

For myself this was fine, but for small businesses their relationship with their “webmaster” could easily become strained because being available to update a clients website usually didn’t pay much. Many website maintainers might be unresponsive for days or weeks before updating your website. Even communicating the simple text changes you desired were difficult to convey via email to your webmaster.

My Romance with Wordpress

I worked for a hosting company from 2004 - 2008 so that I could expand upon my ability to create websites by understanding the web hosting servers that host the websites. I pursued learning Linux system administration, which included learning how to install and configure all related services manually from the Linux command line. The WHM/cPanel system, which made management of a server simpler via a web-based management interface, had just grown in popularity in 2004, and was expanding in use to power armies of website servers in data centers around the world. The majority of websites hosted from these servers were powered by PHP/MySQL.

During this time many individuals and companies were adopting Content Management Systems (CMS) to power their website, because they provided an “administration” area that allowed them to edit the content on their webpages, or even create new pages or blog posts, without needing to contact a website developer. These systems were PHP/MySQL applications, so working with them was a no brainer.

The one CMS that stuck out due to its ease of use was Wordpress. Even though Wordpress was designed as a blog rather than a CMS, Wordpress can be configured to support a website by configuring a custom page as the homepage, rather than the blog index page it defaults to. Additionally the blog functionality can be hidden from the public website by removing the blog index page from the websites navigation menu altogether. This approach, combined with the hundreds of plugins and themes made for Wordpress made it a perfect platform for any personal or small business website. Really it could meet the needs of any website short of complex custom web applications.

The cost and hassle of designing and maintaining a website had been eliminated. Someone is now able to setup and maintain a website themselves without coding skills necessary what so ever. Today you can sign-up for Wordpress hosting with companies such as BlueHost or HostGator, purchase and download a beautiful premium design/theme from a site such as ThemeForest, and then upload and activate that theme in your Wordpress dashboard. Setting up the pages and content for the website are all accessible to those with average computer skills when using the Wordpress administrative Dashboard.

I would tell everyone I knew that if they have a small business, Wordpress is the best solution for their website, as opposed to limited template based websites provided by platforms like Wix or SquareSpace. Wordpress has much more flexibility and ability to expand in functionality as your business grows. You can use free themes/plugins to begin, upgrade to premium themes/plugins later, and if necessary you can even hire designers or developers to create completely custom themes or plugins as needed.

For a period of time I had my own cPanel web server running from a Virtual Private Server (VPS) hosted by Linode. I had created and hosted several websites for small businesses and and friends hosted from this platform.

The Pitfalls of Wordpress

I had tried to support these Wordpress sites by logging into their admin area and updating the themes, plugins, and the Wordpress software itself when I could. Everytime I did this I worried that I would unknowingly break the functionality somewhere on these websites. Eventually down the line, this is exactly what would happen.

Updates to the Wordpress software, which are necessary to avoid security issues with your website, often cause plugins and themes you are using to stop working properly. The developers of Wordpress plugins and themes bare no guarantee that they will provide updates so that your website continues to function properly. Premium themes or plugins may offer some additional support and updates in the future, but there is still no guarantee of this.

I purchased an all-purpose theme builder framework called “Headway” for some of the sites I maintained. It was not able to support upgrades or migrations to the newer major versions of the framework theme they had released, so many sites were stuck with the version they were using. Unexpectedly, “Headway” had longer continued to be supported and maintained as of 2016. This was very frustrating for the websites I had invested so much time into designing using their framework.

Often enough I would bare the responsible for helping to fix a website that had become defaced by hackers, or contain mysterious scripting used to run phishing scams. Sometimes hackers would try to send spam email from my server via a hacked website, thus causing other website users to have issues sending email from my server, because my server had been added to a spam blacklist as a result of the spam activity.

Just a note: Hosting your email from a cPanel service is not worth the hassle either. I recommend using an email service such as Google Workspace, Fastmail, or ProtonMail.

The Promise of JAMstack

So what’s a better solution to setting up and maintaining a person or small business website? JAMstack!

Right now the this approach is only available to companies with budgets large enough to hire custom website developers to implement, but I forsee this becoming more acccessible to non-developers in the future.

So what is this solution, and how is it better?

The JAMstack recipe calls for using a static website generator to generate a website that is powered by modern development tools such as ReactJS and GraphQL, that sources your content from a Headless Content Management System (CMS). Static websites have no code running on the server side, so there is much lower risk of your website being hacked. The only code is the JavaScript which runs in the visitors web browser. Because your content is managed separately by a Headless CMS, your content can be published not only to your website but also to other platforms like mobile applications.

The full JAMstack solution is made possible by using multiple components that are provided as separate or integrated services. These include:

Headless CMS - Like Wordpress, this enables you to manage the text and images that show up in your website in the form of pages, posts, or other types of content.
Custom Website Code - Powered by a static website generator like Gatsby; provides your site design, sources your updated content from the Headless CMS, to create your static website presentation.
Git repository host - Most people use Github, Gitlab, or BitBucket to host their website code in a Git repository.
Build system - This system is triggered by updates to your website code, or by updates to your content in the Headless CMS. This system might be a continuous integration / continuous delivery (CI/CD) system, or simply a script setup on your web server. When triggered it builds the updated version of your website and deploys it to the public website.
Hosting - This can be a simple web server, a cluster of servers, or a content delivery network (CDN).

Several Headless CMS services currently exist with free tier plans. See JAMstack - Top Headless Content Management Systems

So all you need to do if you’re a small business with the resources to hire a developer is ask them to to integrate a website layout you choose from a premium website design template market such as ThemeForest into a JAMstack codebase powered by frameworks such as Gatsby or one of the other site generators, and configure it to automatically regenerate and publish to your static hosting provider each time you update or add any content to the Headless CMS.

Netlify currently provides a CMS, build system, and CDN hosting with a free tier plan to help you get started, with paid plans once your business needs more. Render also provides an integrated build service and hosting.

Hopefully at some point in the future a flexible all-in-one solution will exist that enables a business to create a website as quick and easy as Wordpress, but powered by a flexible JAMstack infrastructure that you can override with your own custom front-end once your business needs custom development work.

It turns out that designers are starting to publish Gatsby themes already.

There may be some themes on ThemeForest that support Gatsby, such as Flexiblog which supports the Contentful or Sanity CMS. If you really want to find a design that supports this approach, I’d recommend checking out JAMstack Themes.

VueJS - Built-In & Reserved Tags

Sat, 28 Mar 2020 18:42:00 -0400

I’m working on an app that is meant to present a list of “steps” along a certain “path”. I tried to create a component called “path”, but this wasn’t allowed.

I got this error in the console.

vue.runtime.esm.js:638 [Vue warn]: Do not use built-in or reserved HTML elements as component id: path

It turns out that HTML and SVG tags are reserved and cannot be used as VueJS component names.

Built-In Tags
- slot
- component
Reserved Tags
- HTML Tags
  - html
  - body
  - base
  - head
  - link
  - meta
  - style
  - title
  - address
  - article
  - aside
  - footer
  - header
  - h1
  - h2
  - h3
  - h4
  - h5
  - h6
  - hgroup
  - nav
  - section
  - div
  - dd
  - dl
  - dt
  - figcaption
  - figure
  - picture
  - hr
  - img
  - li
  - main
  - ol
  - p
  - pre
  - ul
  - a
  - b
  - abbr
  - bdi
  - bdo
  - br
  - cite
  - code
  - data
  - dfn
  - em
  - i
  - kbd
  - mark
  - q
  - rp
  - rt
  - rtc
  - ruby
  - s
  - samp
  - small
  - span
  - strong
  - sub
  - sup
  - time
  - u
  - var
  - wbr
  - area
  - audio
  - map
  - track
  - video
  - embed
  - object
  - param
  - source
  - canvas
  - script
  - noscript
  - del
  - ins
  - caption
  - col
  - colgroup
  - table
  - thead
  - tbody
  - td
  - th
  - tr
  - button
  - datalist
  - fieldset
  - form
  - input
  - label
  - legend
  - meter
  - optgroup
  - option
  - output
  - progress
  - select
  - textarea
  - details
  - dialog
  - menu
  - menuitem
  - summary
  - content
  - element
  - shadow
  - template
  - blockquote
  - iframe
  - tfoot
- SVG Tags
  - svg
  - animate
  - circle
  - clippath
  - cursor
  - defs
  - desc
  - ellipse
  - filter
  - font-face
  - foreignObject
  - g
  - glyph
  - image
  - line
  - marker
  - mask
  - missing-glyph
  - path
  - pattern
  - polygon
  - polyline
  - rect
  - switch
  - symbol
  - text
  - textpath
  - tspan
  - use
  - view

Updating Vue-Loader to v15 with Webpacker

Sun, 01 Mar 2020 14:37:00 -0500

I recently decided to jump into working with VueJS again within the context of a project I’m working on that uses Rails 5 with Webpacker.

I upgraded Webpacker from v3.6 to v4.2.2, Vue from v2.5.16 to v2.6.11, and Vue-Loader from v14.2.2 to v15.9.0.

After making this update I got the following error:

ERROR in ./app/javascript/my_pack/components/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include
VueLoaderPlugin in your webpack config.
Error: vue-loader was used without the corresponding plugin. Make sure to
include VueLoaderPlugin in your webpack config. at Object.module.exports
(/Users/jason/Projects/my_app/node_modules/vue-loader/lib/index.js:36:29)

I was able to identify that I needed to make some configuration changes after updatiing Vue-Loader from v14 to v15.

I’m a bit rusty on how to navigate the Node/JS eco-system, and the documentation on Webpack doesn’t apply to the Rails method of configuring the app with Webpacker.

I recall that after I first setup this Rails app to use Vue with Webpacker that I had to use the following rake task to configure it to use Vue:

bundle exec rails webpacker:install:vue

I wasn’t able to resolve this error until I applied these modifications to config/webpack/environment.js.

I didn’t want to miss any other updates to the boilerplate configuration, nor do I want my own modifications overwritten. So what I recommend you do to upgrade is to make any commits in Git before re-running the above rake task again. Here’s what I got from the output:

$ bundle exec rails webpacker:install:vue
Copying vue loader to config/webpack/loaders
    conflict  config/webpack/loaders/vue.js
Overwrite /Users/jason/Projects/seed/config/webpack/loaders/vue.js? (enter "h" for help) [Ynaqdhm] Y
       force  config/webpack/loaders/vue.js
Adding vue loader plugin to config/webpack/environment.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
Adding vue loader to config/webpack/environment.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
Updating webpack paths to include .vue file extension
File unchanged! The supplied flag value not found!  config/webpacker.yml
Copying the example entry file to /Users/jason/Projects/seed/app/javascript/packs
      create  app/javascript/packs/hello_vue.js
Copying Vue app file to /Users/jason/Projects/seed/app/javascript/packs
      create  app/javascript/app.vue
Installing all Vue dependencies
         run  yarn add vue vue-loader vue-template-compiler from "."

Expect that it will duplicate certain modifications it makes, but if you use git diff on the modified files afterwards you can surely detect these and fix them.

$ git diff config/webpack/environment.js
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 08d2baf..0f3a57d 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,8 +1,12 @@
 const { environment } = require("@rails/webpacker")
 const { VueLoaderPlugin } = require("vue-loader")
 const vue = require("./loaders/vue")
+const { VueLoaderPlugin } = require("vue-loader")
+const vue = require("./loaders/vue")

 environment.loaders.append("vue", vue)
 environment.plugins.prepend("VueLoaderPlugin", new VueLoaderPlugin())

+environment.plugins.prepend("VueLoaderPlugin", new VueLoaderPlugin())
+environment.loaders.prepend("vue", vue)
 module.exports = environment

I already manually added ‘.vue’ under ‘extensions’ in the config/webpacker.yml file. I deleted app/javascript/app.vue and app/javascript/packs/hello_vue.js because I don’t need them. Now I’m no longer getting the error from ./bin/webpack-dev-server.