Mikel Kew mikelkew

Stimulus cheatsheet

Website: https://stimulusjs.org/
GitHub repo: https://github.com/stimulusjs/stimulus
Handbook: https://stimulusjs.org/handbook/introduction
Discourse: https://discourse.stimulusjs.org/

Lifecycle callbacks

initialize: once, when the controller is first instantiated
connect: anytime the controller is connected to the DOM

Dynamically Add Critical CSS to Your Rails App

Optimizing the delivery of CSS is one way to improve user experience, load speed and SEO of your web app. This involves determining the "critical path CSS" and embeding it into the html of your page. The rest of the CSS for the site is loaded asynchronously so it does not block the rendering of your "above the fold" content. This Gist will show you how to dynamically generate critical path CSS for your Rails app.

In this example we will use the mudbugmedia/critical-path-css gem.

Prerequisites

You will need to set up caching and Active Job in your Rails app. I recommend using a thread-safe background job manager like resque.

Proposal

Many modern Rails application use third-party assets like JavaScript and CSS libraries or frameworks. In most cases these assets are minified and compressed by tools outside of the Rails asset pipeline. For example popular gem React on Rails uses WebPack to build JavaScript bundles. When we include these files to assets pipeline it goes to minify again. We can safely avoid double minification and reduce assets compilation time. Meanwhile it is still good to add a digest and gzip compression.

Example

Savings are strongly depend on how many minified assets are used in an application, some numbers for a random application:

# standard setup

	function switch_pg {
	local version_to_run=$1
	local currently_running_version=$(psql --no-psqlrc -t -c 'show server_version;' postgres \| xargs)

	# check if you're erroneously switching to the same version
	if [ "$version_to_run" = "$currently_running_version" ]; then
	echo "Postgres $version_to_run is already running."
	return 1
	fi

	# Add color coding based on Rails environment for safety

	if defined? Rails
	banner = if Rails.env.production?
	"\e[41;97;1m #{Rails.env} \e[0m "
	else
	"\e[42;97;1m #{Rails.env} \e[0m "
	end

	# Build a custom prompt

	// DISCLAIMER : You can now probably use `data-turbo-action="advance"` on your frame to perform what this controller is aiming to do
	// https://turbo.hotwired.dev/handbook/frames#promoting-a-frame-navigation-to-a-page-visit
	// Note that you probably want to disable turbo cache as well for those page to make popstate work properly

	import { navigator } from '@hotwired/turbo'
	import { Controller } from '@hotwired/stimulus'
	import { useMutation } from 'stimulus-use'

	export default class extends Controller {
	connect (): void {

	defmodule Mix.Tasks.NTest do
	use Mix.Task

	@wildcard "apps//test//_test.exs"

	def run([i, n \| args]) do
	{i, _} = Integer.parse(i)
	{n, _} = Integer.parse(n)

	test_paths =

	const hoverTime = 400
	const fetchers = {}
	const doc = document.implementation.createHTMLDocument('prefetch')

	function fetchPage (url, success) {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.setRequestHeader('VND.PREFETCH', 'true')
	xhr.setRequestHeader('Accept', 'text/html')
	xhr.onreadystatechange = () => {