Skip to content

Instantly share code, notes, and snippets.

View calvinjuarez's full-sized avatar
👨‍💻

Calvin Juárez calvinjuarez

👨‍💻
View GitHub Profile
@calvinjuarez
calvinjuarez / simon-says.bash.md
Last active February 27, 2024 22:47
Simon Says: A dumb bash thing.

alias simon-says='sudo'

or better yet

function simon {
    [[ "$1" != "says" ]] && return 1
    
    shift
 
@calvinjuarez
calvinjuarez / Modal.vue
Last active December 13, 2023 22:28
Vue 3 `<dialog>`-based Modal Component (Bootstrap-friendly)
<script setup>
import { ref } from 'vue';
const $dialog = ref(null);
const showing = ref(false);
function close() { showing.value = false; }
function show() { showing.value = true; }
@calvinjuarez
calvinjuarez / 1--box.html
Created February 12, 2021 20:46
My Complex Box Naming Convention
<!-- A comprehensive demo of each piece of the convention and how they fit together. -->
<div class="boxes">
<section class="box">
<div class="box-inner">
<div class="box-X"></div>
<div class="box-main">
<header class="box-header">
<h1 class="box-heading">Foo</h1>
<h2 class="box-subheading">Bar</h2>
@calvinjuarez
calvinjuarez / defineMixin.js
Created October 18, 2018 22:09
A Pass at JS Mixins
/**
* Defines a mixin function.
* @param {string} [name='Mixin'] Name to show on Webkit. It will be
* prepended with a `+`, 'cause this
* is my gist.
* @param {function|object} props The mixin itself. If a function
* (class) is passed, its prototype
* will be set to the Base's.
* Otherwise, it will be set as the
* prototype of a new class function.
@calvinjuarez
calvinjuarez / boilerplate.html
Last active September 5, 2018 22:44
HTML Boilerplate
<!DOCTYPE html>
<html class="js-unavailable" lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ TITLE }}</title>
<meta name="application-name" content="{{ SHORT_TITLE }}">
<meta name="apple-mobile-web-app-title" content="{{ SHORT_TITLE }}">
<link rel="shortcut icon" type="image/png" href="{{ PATH_TO_ICO_OR_32X32_PNG }}">
@calvinjuarez
calvinjuarez / pre_log.php
Created December 5, 2017 01:36
A function to output a PHP variable in a `<pre>` with trace info in a data attribute.
<?php
/**
* @file A function to output a PHP variable in a `<pre>` with a class and trace info.
* @author Calvin Juárez <[email protected]>
* @copyright 2017 Calvin Juárez
* @license MIT {@link https://spdx.org/licenses/MIT.html MIT License on SPDX.org}
*/
/**
* An inline <pre> log function that attempts to provide caller file and function information
@calvinjuarez
calvinjuarez / restart-mamp-mysql.sh
Created May 31, 2017 00:43
Command line script for restarting MAMP's MySQL server.
#!/bin/bash
echo "Restarting MAMP's MySQL server."
# stop mysql
/Applications/MAMP/bin/stopMysql.sh
# MAMP needs this tmpdir to work, but doesn't create it itself
mkdir -p /Applications/MAMP/tmp/mysql/tmpdir/
@calvinjuarez
calvinjuarez / BEM-thought.md
Last active May 24, 2017 17:09
A thought I Slacked to myself as it hit me on 24 May 2017 about how I'd do BEM, if I did BEM

Quick thought:

I think my ideal BEM-style syntax would be this:

.some_block {...}
  .some_block__some_element {...}
.some_block-some_modifier {...}

OR

@calvinjuarez
calvinjuarez / match-mustache-regex.js
Last active February 29, 2024 14:14
Quick Regular Expression sketch for matching Mustache-style bits in a string.
var re = /\{\{((?!\}\})(.|\n))*\}\}/g
/**
* Note: This was not tested against any thourough example or any specific spec. Just kind of what I
* felt in my gut. That said, if you feel like commenting with suggestions for improvement, especially
* against any particular spec or whatever, please be my guest.
*
* To see my initial test, visit https://regex101.com/r/GQZ2nW/1/.
*
* Thanks!
@calvinjuarez
calvinjuarez / html-attribute-order.md
Created April 20, 2017 22:19
HTML Attribute Order

Preferred Order of HTML Attributes

When under my control, I like to order HTML attributes in this way.

  1. Identifiers
    • class
    • id
    • type
    • for
  • name