Skip to content

Instantly share code, notes, and snippets.

View calvinjuarez's full-sized avatar
👨‍💻

Calvin Juárez calvinjuarez

👨‍💻
15 followers · 13 following
View GitHub Profile
@calvinjuarez
calvinjuarez / css-breakpoint-thoughts.css
Created January 17, 2025 19:16
/*
* This feels like a strong set of default breakpoints. I've also got some
* loose thoughts on each.
*
* 600, 800, 1050, 1300, 1500
* ▲ ▲ ▲ ▲ ▲ ▲
* | | | | | ╰ XXL 'crazy huge'; notable: 1920
* | | | | | Large monitors at full-screen. We tend NOT
* | | | | | to consider these sizes for browser-based
* | | | | | tools. We know everything will fit because
@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!