bholtbholt’s gists

bholtbholt / _stimulus-helper.js

Last active November 6, 2024 02:51

Testing Stimulus with Jest in a Rails App. Stimulus isn't mounted before the test runs, so these helpers wrap the calls in async functions to fix race conditions.

	// This helper file provides a consistent API for testing Stimulus Controllers
	//
	// Use:
	// import { getHTML, setHTML, startStimulus } from './_stimulus_helper';
	// import MyController from '@javascripts/controllers/my_controller';
	//
	// beforeEach(() => startStimulus('my', MyController));
	// test('should do something', async () => {
	// await setHTML(`<button data-controller="my" data-action="my#action">click</button>`);
	//

bholtbholt / nested-stores.js

Created February 6, 2022 20:25

How to handle accessing nested data in Svelte stores using curried functions

	// $list has a nested structure like:
	// lists: [
	// {
	// "id": "TODO-ns88qrJDVXizlF0l",
	// …properties omitted for brevity
	// "cards": [
	// {
	// "id": "6OPzS6B6WoBT0J_EGqUEy",
	// "listId": "TODO-ns88qrJDVXizlF0l",
	// …properties omitted for brevity

bholtbholt / academy_banner.rb

Last active October 12, 2017 22:40

Ruby on Rails server-side component library

	- options[:text_link][:class] = "comp_academy-banner-link" if options[:text_link]
	- options[:text_link][:target] = "_blank" if options[:text_link]
	- options[:text_link][:label] << " »" if options[:text_link]
	- options[:image_src] \|\|= "legacy/knowledge_base_icon.png"

	%header.comp_academy-banner{ id: options[:id] }
	= image_tag( options[:image_src], alt: "Unbounce Academy Icon", class: "margin-right flex-auto", width: options[:image_width] )
	.flex-expand
	= content_tag(:h3, options[:title], class: "comp_title") if options[:title]
	= content_tag(:p, options[:text]) if options[:text]

bholtbholt / index.html

Last active May 11, 2017 19:28

Service Workers Example

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Server A</title>
	<link href='https://fonts.googleapis.com/css?family=Ravi+Prakash' rel='stylesheet' type='text/css'>
	<style>
	p {
	font-family: 'Ravi Prakash', serif;
	font-size: 6em;

bholtbholt / flexbox-koans.html

Last active November 26, 2016 00:19

A koans-style worksheet to learn Flexbox.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Flexbox Koans</title>
	<style>
	/* Resets */
	html { box-sizing: border-box; height: 100%; }
	, :before, *:after { box-sizing: inherit; }
	body { font-family: Verdana, Geneva, sans-serif; display: flex; flex-direction: row-reverse; height: 100%; margin: 0 }

Brian Holt bholtbholt