Skip to content

Instantly share code, notes, and snippets.

View bholtbholt's full-sized avatar

Brian Holt bholtbholt

16 followers · 9 following
View GitHub Profile
@bholtbholt
bholtbholt / _stimulus-helper.js
Last active June 20, 2024 08:34
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
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
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
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
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 }