Skip to content

Instantly share code, notes, and snippets.

View piclez's full-sized avatar

Peter WD piclez

View GitHub Profile
@equivalent
equivalent / README.md
Last active July 25, 2025 10:22
Rails 7 importmaps dropzone.js direct upload ActiveStorage

This is simple implementation of technologies in hobby project of mine built in Rails7 where I need direct upload to S3.

@hucancode
hucancode / README.md
Last active May 28, 2024 20:51
Flatten Strapi 4's response JSON

Update 29/11/2022

There is a plugin on Strapi Marketplace that do this response transforming stuffs in a more configurable way. Checkout this if you are interested.

@tabishiqbal
tabishiqbal / _form.html.erb
Last active January 15, 2025 21:39
Ruby on Rails Tom-Select Example with Stimulus controller
<%= form_with(model: team) do |form| %>
<div>
<%= form.label :name %>
<%= form.text_field :name, class: "input" %>
</div>
<div>
<%= f.select :user_id, {}, {placeholder: "Select user"}, {class: "w-full", data: { controller: "select", select_url_value: users_path }} %>
</div>
@ryangjchandler
ryangjchandler / README.md
Last active September 25, 2023 23:56
Tailwind Palette to CSS Variables

Tailwind Shades to CSS Variables

This script can be used to generate a set of CSS variables from a Tailwind shades object.

Overview

Let's say you have the following JavaScript object. You might have generated such an object on a site such as Tailwind Shades.

{
@DmitryTsepelev
DmitryTsepelev / 0_unique_data.md
Last active February 21, 2024 15:50

How to run examples

  1. Run $ createdb uniq-db-test to create DB
  2. Run example with Ruby (e.g., $ ruby 1_find_or_create_by_single_thread.rb)

Benchmark output

With many successful INSERTs

Warming up --------------------------------------
@brenogazzola
brenogazzola / migrate_im_to_vips.md
Last active July 22, 2025 04:25
Steps to migrate ImageMagick to Libvips

For apps built before the image_processing gem became the default, the migration will involve two steps:

  1. Migrating to the image processing syntax while still using ImageMagick;
  2. Switching to Vips and updating the compression options;

Migrate to the image processing syntax

Before changing from ImageMagick to Vips, it's better to first test the new syntax and ensure everything is still working.

1. Move everything that has to do with compression to a saver hash:

variant(format: :jpg, strip: true, quality: 80)
@jeromecornet
jeromecornet / File locations
Last active August 26, 2021 21:14
Tailwindcss with sprockets
tailwind_transformer.rb -> app/models/tailwind_transformer.rb
tailwind.rb -> config/initializers/tailwind.rb
tailwind.config.js.erb -> config/tailwind.config.js.erb
package.json -> ./package.json
@ordinz
ordinz / modal_controller.js
Created March 19, 2021 07:46
Extend Modal from "tailwindcss-stimulus-components"
import {Modal} from "tailwindcss-stimulus-components"
export default class extends Modal {
connect(){
this.element[this.identifier] = this
this.toggleClass = 'hidden'
}
}
@praveenjuge
praveenjuge / index.html
Created August 6, 2020 11:52
Apline Tailwind Dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./build.css" />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body class="p-12 m-12">
@cschulte22
cschulte22 / _flash_notifications.html.erb
Created July 29, 2020 22:16
Rails flash with tailwind / alpinejs
<% if flash.any? %>
<div class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end z-50" data-flash-notifications='true'>
<% flash.each do |msg_type, msg| %>
<div x-data="{flashVisible: false, flashType: '<%= msg_type %>'}" x-show='flashVisible' x-init="() => {flashVisible=true; setTimeout(() => {flashVisible=false}, 5000)}" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
x-transition:leave="transition ease-out duration-100"