Skip to content

Instantly share code, notes, and snippets.

View brianmaierjr's full-sized avatar
🙃

Brian Maier Jr. brianmaierjr

🙃
View GitHub Profile
@EllyLoel
EllyLoel / reset.css
Last active September 25, 2024 09:02
CSS Reset
/*
Made by Elly Loel - https://ellyloel.com/
With inspiration from:
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
Notes:
- `:where()` is used to lower specificity for easy overriding.
*/
@Myndex
Myndex / OrangeYouGladIHaveNoLife.md
Last active June 19, 2024 13:59
Orange You Wondering About Contrast? Part I of three on the APCA and why contrast is important. Especially orange contrast.

Orange You Wondering About Contrast?

What is contrast anyway? In this context, we are talking about the contrast of text on a background, and more directly, how well you can read that text. While this may seem simple in concept, the reality is not only challenging but increasingly important. The internet destroyed the printing industry nearly overnight. Where there were once magaine and newsstands, there are now empty spaces. And reading in general had dropped 40% in the last two decades.

And the internet is hard to read. Too hard, and it shouldn't be. There are some old existing standards on contrast and readability, some dating back to the last century, that are part of the problem. When WCAG 2 was being worked on nearly two decades ago, computers used bulky CRT monitors, and the iPhone was still on the drawing board.

Back then, cell phones were nothing but a phone, websites were only on your desktop/laptop, and those sites invariably used the same core websafe fonts & basic HTML colors. Served over

@prasetyop
prasetyop / admin.css
Last active March 13, 2023 13:33
Flexible Content Preview Pop Up
.acf-fc-popup .preview {
position: absolute;
right: 100%;
margin-right: 0px;
top: 0;
background: #383c44;
min-height: 100%;
border-radius: 5px;
align-content: center;
display: grid;
@ndunk28
ndunk28 / slick-on-mobile.js
Last active March 10, 2022 18:31
slick js only on mobile
// slider
$slick_slider = $('.slider');
settings_slider = {
dots: false,
arrows: false
// more settings
}
slick_on_mobile( $slick_slider, settings_slider);
// slick on mobile
@orkoden
orkoden / karabiner.json.magicforce68
Created February 9, 2017 13:31
Karabiner elements configuration file for using a MagicForce68 keyboard on macOS
{
"profiles": [
{
"devices": [
{
"disable_built_in_keyboard_if_exists": false,
"identifiers": {
"is_keyboard": true,
"is_pointing_device": false,
"product_id": 1957,
@JawsomeJason
JawsomeJason / _element.scss
Last active August 29, 2019 07:12
Sass Mixin to generate `@element` EQCSS Element Queries
/// Helper for EQCSS Element Queries `@element`
///
/// @author Jason Featheringham
/// @link https://gist.github.com/thejase/d2107285b6e10315dd6bc055115647fe Code source
/// @link http://elementqueries.com/ Plugin to parse EQCSS
/// @link https://gist.github.com/tomhodgins/6237039fa07c2e4b7acd1c8b0f9549a9 EQCSS syntax
///
/// @param {String} $scope (&) - Optional scope. Defaults to current context
/// @param {List} $conditions (()) - 1+ of Maps of EQCSS conditions
/// @content rules to enclose in element query
window.addEventListener('mouseover', function onFirstHover() {
window.USER_CAN_HOVER = true;
window.removeEventListener('mouseover', onFirstHover, false);
}, false);
@learncodeacademy
learncodeacademy / webpack.config.js
Created January 8, 2016 03:55
Sample Basic Webpack Config
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
@daneden
daneden / Instructions.md
Created December 1, 2015 00:25
Remap Caps Lock to Emoji on Mac

How to remap the caps lock key to the emoji selector on Mac

  1. Go to System Preferences -> Keyboard -> Modifier Keys...
  2. Change “Caps Lock” to “No action”
  3. Install Seil
  4. Change the Caps Lock key in Seil to keyCode 80 (F19)
  5. Install Karabiner
  6. Open Karabiner and go to Misc & Uninstall -> Open private.xml
  7. Copy the contents of this gist's example to the XML file and save
  8. In Karabiner, go to Change Keys -> Reload XML
@wesbos
wesbos / tab-trigger.js
Created November 16, 2015 19:33
How to properly get a TAB trigger working with Emmet inside of JSX
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{