Skip to content

Instantly share code, notes, and snippets.

View johnnyicon's full-sized avatar

JG johnnyicon

10 followers · 3 following
View GitHub Profile
@rubys
rubys / importmap-jsx.rb
Last active August 4, 2023 22:24
#
# Proof of concept - import maps with JSX transpilation. Can trivially
# be extended to TypeScript and all the languages currently supported
# with Sprockets.
#
# There are two parts to this:
# * Have `find_javascript_files_in_tree` in importmap-rails to not only
# find JS files, but also files that can be transpiled to JS.
# * Add sprockets JSX transformer, making use of esbuild
#
@sandren
sandren / tailwind.md
Last active July 10, 2024 16:28
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@osulyanov
osulyanov / config.yml
Last active November 30, 2022 23:58
Circle CI workflows config to test and deploy Ruby on Rails application with PostgreSQL database. Test with Rspec, precompile assets then deploy with Capistrano.
# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
defaults: &defaults
working_directory: ~/repo
docker:
- image: circleci/ruby:2.4.1-node-browsers
environment:
@emilsoman
emilsoman / phoenix_to_umbrella
Last active July 13, 2024 21:50
How to move an existing phoenix app under an umbrella app
How to convert existing phoenix app to an umbrella app.
https://elixir-lang.slack.com/archives/phoenix/p1472921051000134
chrismccord [10:14 PM]
@alanpeabody yes, it's straightforward
[10:14]
1) mix new my_umbrella --umbrella
@maxim
maxim / rails_load_path_tips.md
Last active April 13, 2023 13:28
How to use rails load paths, app, and lib directories.

In Rails 3

NOTE: This post now lives (and kept up to date) on my blog: http://hakunin.com/rails3-load-paths

If you add a dir directly under app/

Do nothing. All files in this dir are eager loaded in production and lazy loaded in development by default.

If you add a dir under app/something/

@mdigital
mdigital / .bashrc
Created May 31, 2012 21:33 — forked from henrik/.bashrc
Git branch and dirty state in Bash prompt.
# http://henrik.nyh.se/2008/12/git-dirty-prompt
# http://www.simplisticcomplexity.com/2008/03/13/show-your-git-branch-name-in-your-prompt/
# username@Machine ~/dev/dir[master]$ # clean working directory
# username@Machine ~/dev/dir[master*]$ # dirty working directory
function parse_git_dirty {
[[ $(git status 2> /dev/null | tail -n1) != "nothing to commit (working directory clean)" ]] && echo "*"
}
function parse_git_branch {
git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e "s/* \(.*\)/[\1$(parse_git_dirty)]/"
@kinopyo
kinopyo / gist:2426829
Created April 20, 2012 07:23
Ruby: Get module name or class name without module
n = Notification::Answer.new
n.class.name.split('::').last || ''
# => "Answer"
n.class.name.split('::').first || ''
# => "Notification"
@enjalot
enjalot / index.html
Created September 8, 2011 15:15
Simple Pie Chart example with D3.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>
<style type="text/css">
@chriseppstein
chriseppstein / readme.md
Created August 31, 2011 21:57 — forked from mislav/Gemfile
How to integrate Compass with Rails 3.1 asset pipeline

This gist is no longer valid. Please see Compass-Rails for instructions on how to install.

@nateps
nateps / gist:1172490
Created August 26, 2011 01:38
Hide the address bar in a fullscreen iPhone or Android web app
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<title>Test fullscreen</title>
<style>
html, body {
margin: 0;
padding: 0;