Skip to content

Instantly share code, notes, and snippets.

View jaredcwhite's full-sized avatar
🌲

Jared White jaredcwhite

🌲
View GitHub Profile
@jaredcwhite
jaredcwhite / README.md
Last active April 21, 2024 14:28
Use Shoelace Form Components with Hotwire Turbo

This is a Stimulus controller which will allow a Shoelace Form component to be processed and submitted by Turbo.

Just wrap your <sl-form> control with a form tag:

<%= form_with url: "/test-submit" do %>
  <sl-form data-controller="shoelace-form">
    controls go here
  </sl-form>
&lt;% end %&gt;
@jaredcwhite
jaredcwhite / string.rb
Last active April 18, 2024 00:37
Truncating in the middle of a Ruby string
class String
def middle_truncate(truncate_length = 30)
return self if length <= truncate_length + 2
"#{self[..(truncate_length / 2)]}…#{self[-(truncate_length / 2)..]}"
end
end
puts "Well, this is a very long string and I hope I can see if it will truncate!".middle_truncate
@jaredcwhite
jaredcwhite / Gemfile
Last active February 19, 2024 21:52
Streamlined example
source "https://rubygems.org"
gem "streamlined"
@jaredcwhite
jaredcwhite / button_click.test.js
Created September 28, 2023 18:51
Setting up web-test-runner
// test/button_click.js
import { fixture, assert, aTimeout, html as testhtml } from "@open-wc/testing"
// Custom elements could go here, or be imported
describe("button click", () => {
it("handles click properly", async () => {
const el = await fixture(testhtml`
<test-element>
@jaredcwhite
jaredcwhite / convertkit_features.rb
Last active August 31, 2023 17:41
Working with the ConvertKit API
class ConvertkitFeatures
TAG_ID = 0000000 # redacted
FORM_ID = 0000000 # redacted
def api_secret = ENV.fetch("CONVERTKIT_API")
def conn
@conn ||= Faraday.new("https://api.convertkit.com/v3") do |f|
f.request :json
customElements.define("paywalled-content", class extends HTMLElement {
static observedAttributes = ["open"]
attributeChangedCallback(name, oldValue, newValue) {
if (name === "open" && newValue !== null) {
this.shadowRoot.querySelector("slot").removeAttribute("name")
} else {
this.shadowRoot.querySelector("slot").name = "public"
}
}
@jaredcwhite
jaredcwhite / semantics.html
Last active March 23, 2023 23:10
Example of how I write HTML markup in 2021
<timeline-post post-id="54235" source-id="13" >
<sl-card style="margin-bottom: var(--sl-spacing-large)">
<a href="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss" target="_blank" slot="image"><img
src="https://photos5.appleinsider.com/gallery/41951-81380-34258-61556-jamf-pro-head-xl-xl.jpg"
alt="article thumbnail"
class="post-thumbnail"
/></a>
<h3><a target="_blank" class="link" href="https://appleinsider.com/articles/21/05/11/jamf-acquires-zero-trust-cloud-security-startup-wandera-in-400m-deal?utm_medium=rss">Jamf acquires 'zero trust' cloud security startup Wandera in $400M deal</a></h3>
@jaredcwhite
jaredcwhite / turbo_transitions.js
Created September 13, 2022 15:49
Nice transitions using Turbo
document.addEventListener("turbo:visit", () => {
let main = document.querySelector("main");
if (main.dataset.turboTransition == "false") return;
let [movement, scale] = ["-12px", "0.99"];
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
[movement, scale] = ["-6px", "1"]
};
@jaredcwhite
jaredcwhite / class soup.html
Created April 6, 2022 15:49
Utility classes suuuuuuck
<div class="bg-gradient-to-b from-pink-100 to-purple-200">
<div class="container m-auto px-6 py-20 md:px-12 lg:px-20">
<div class="m-auto text-center lg:w-8/12 xl:w-7/12">
<h2 class="text-2xl text-pink-900 font-bold md:text-4xl">…</h2>
</div>
<div class="mt-12 m-auto -space-y-4 items-center justify-center md:flex md:space-y-0 md:-space-x-4 xl:w-10/12">
<div class="relative z-10 -mx-4 group md:w-6/12 md:mx-0 lg:w-5/12">
<div aria-hidden="true" class="absolute top-0 w-full h-full rounded-2xl bg-white shadow-xl transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"></div>
<div class="relative p-6 space-y-6 lg:p-8">
<h3 class="text-3xl text-gray-700 font-semibold text-center">…</h3>
@jaredcwhite
jaredcwhite / turbo_dsd.js
Last active September 16, 2022 07:36
Attaching shadow roots on Turbo events
export function attachShadowRoots(root, callback = null) {
const shadowNodes = []
root.querySelectorAll("template[shadowroot]").forEach(template => {
const node = template.parentNode
shadowNodes.push(node)
const mode = template.getAttribute("shadowroot")
const shadowRoot = node.attachShadow({ mode })
shadowRoot.appendChild(template.content)
template.remove()
attachShadowRoots(shadowRoot).forEach(childNode => shadowNodes.push(childNode))