Skip to content

Instantly share code, notes, and snippets.

Avatar

Tabish Iqbal tabishiqbal

View GitHub Profile
@tabishiqbal
tabishiqbal / google-sheets-dataclip-autoupdate.md
Created Oct 6, 2021 — forked from aGHz/google-sheets-dataclip-autoupdate.md
Auto-updating importData of Heroku Dataclips in Google Sheets
View google-sheets-dataclip-autoupdate.md

Dataclips URLs

Dataclips has a reliable way to construct the URL of a clip's CSV version:

https://dataclips.heroku.com/<hash>-<description>.csv

Thankfully the description is irrelevant, so we can just get the hash from the web interface (looks like aujqawhjdmlbbwrqxutcpzzqyika) and add -1 at the end. Every time we change the

@tabishiqbal
tabishiqbal / select_controller.js
Last active Dec 3, 2021
Tom-Select Example with Stimulus
View select_controller.js
import { Controller } from "stimulus"
import TomSelect from "tom-select"
export default class extends Controller {
static values = { url: String }
connect() {
this.initTomSelect()
}
@tabishiqbal
tabishiqbal / region_reflex.rb
Last active May 3, 2021
Stimulus Reflex populate dropdowns
View region_reflex.rb
class RegionReflex < ApplicationReflex
def select_state
state_id = element[:value].to_i
@state = State.find(state_id)
@state_cities = @state&.cities
end
end
View categories_controller.rb
class CategoriesController < ApplicationController
def fields
render json: Field.where(category_id: params[:id]).order(:id)
end
end
@tabishiqbal
tabishiqbal / README.md
Created May 2, 2021 — forked from leastbad/README.md
Choices.js Stimulus wrapper preview
View README.md

Choices.js Stimulus wrapper

https://joshuajohnson.co.uk/Choices/

Soon, this will be published as an NPM package, but there's an absence of documentation right now. It supports almost all functions from the original library; soon it will support 100% of them.

This wrapper adds Ajax pre-fetch search. Happens if controller has a data-search-path attribute.

Stimulus controller targets use new v2 syntax. Controller attaches a reference to itself on the element so that you can access the internal state from external scripts.

@tabishiqbal
tabishiqbal / bare_transitions.js
Created Sep 12, 2020 — forked from bnjamin/bare_transitions.js
Transitions stolen from alpine.js
View bare_transitions.js
export function transitionIn (el, show = () => {}) {
const attrs = getXAttrs(el, 'transition')
// If any transition attrs.
if (attrs.filter(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value)).length > 0) {
transitionClassesIn(el, attrs, show)
} else {
// If not, just show that damn thing.
show()
}
@tabishiqbal
tabishiqbal / form.html.erb
Created Sep 10, 2020 — forked from eminkel/form.html.erb
StimulusJS Tag Component
View form.html.erb
<div class="mt-6">
<%= f.label :tags, class: 'form-label' %>
<div class="border border-gray-300 rounded-md flex-1 block w-full transition duration-150 ease-in-out pt-1.5 px-2 mt-1" data-controller="tags" data-tags-tag-collection data-tags-autocomplete="true" data-tags-show-dropdown="" data-target="tags.container">
<div class="flex flex-wrap cursor-text" data-action="click->tags#active">
<div class="flex flex-wrap" data-target="tags.tags">
<div class="text-sm p-2 bg-gray-100 rounded-md flex items-center space-x-1.5 mb-1.5 mr-2">
<p>tag</p>
<div class="inline-flex bg-gray-500 text-gray-100 rounded-full p-1 hover:bg-gray-700 cursor-pointer">
<svg class="h-3 w-3" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"></path></
@tabishiqbal
tabishiqbal / contact-form.md
Created Jun 6, 2020 — forked from stevecondylios/contact-form.md
Tutorial: Create and Deploy a Contact Form to Production in Ruby on Rails 5
View contact-form.md

Create a Contact Form in Rails 5

This is a complete, step-by-step tutorial showing how to create a fully functional contact form in production in rails 5. Rather than reinvent things, the following borrows from the best available documentation and tutorials (most notably, this tutorial on making a contact form in development). The finished contact form can be viewed here.

This tutorial uses:

  • heroku for deployment,
  • gmail for the mailer, and
  • github for version control

It would be a good idea to create a new gmail account to use for your mailer now, if you haven't already. If you haven't yet got a heroku account and installed the heroku CLI, it would be easiest to do so now.

@tabishiqbal
tabishiqbal / hello.vue
Created May 22, 2020 — forked from SatoshiGardener/hello.vue
Stimulus.js + Vue.js
View hello.vue
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
@tabishiqbal
tabishiqbal / __readme.md
Created Apr 30, 2020 — forked from maxivak/__readme.md
Tree with ancestry. Rails
View __readme.md

Contents:

  • show full path for the item
  • show tree in ol li
  • show tree in dropdown select

Show full path for item

  • one item