Skip to content

Instantly share code, notes, and snippets.

View marcamos's full-sized avatar
🕺
Raising kids and websites

Marc Amos marcamos

🕺
Raising kids and websites
37 followers · 28 following
View GitHub Profile
@marcamos
marcamos / handle-multiple-nav-menus-accessibly.js
Last active December 22, 2022 13:31
Simple, accessible, nav menu system that is keyboard friendly. Demo here: https://codepen.io/marcamos/pen/zYEXegV
const navButtonEl = '[aria-controls^="nav-menu-"]';
const navMenuEl = '[id^="nav-menu-"]';
const navButtons = Array.from(document.querySelectorAll(navButtonEl));
const navMenus = Array.from(document.querySelectorAll(navMenuEl));
const closeNavMenu = () => {
navButtons.forEach(button => {
button.setAttribute('aria-expanded', false);
});
navMenus.forEach(menu => {
menu.hidden = true;
@marcamos
marcamos / lazy-load.js
Last active February 2, 2022 14:19
Lazy-loading polyfill; it covers the various ways you can use an <img> element, <picture> elements, and CSS background images … but it gets out of the way if the environment natively supports lazy-loading.
// Use #1: <img> element using src and srcset:
// <img data-lazy-srcset="/path/to/image-2x.jpg 2x"
// data-lazy-src="/path/to/image-1x.jpg"
// alt="TODO" width="TODO" height="TODO" loading="lazy" />
//
// Use #2: <img> element using src, srcset, and sizes:
// <img data-lazy-srcset="your srcset list here"
// data-lazy-src="/path/to/image.jpg"
// sizes="your sizes list here"
// alt="TODO" width="TODO" height="TODO" loading="lazy" />
@marcamos
marcamos / launch-checklist.md
Last active June 8, 2021 12:16
  • Run a project-wide search for 'todo' / 'TODO' / 'to do' / 'TO DO' and make sure they’re resolved
  • Write any and all necessary project documentation (in /_docs/project)
  • realfavicongenerator.net
  • Ensure the following items have good values:
    • Anything/everything in <head> … </head>
    • humanstxt.org
    • (Craft CMS only) Anything/everything generated by SEOmatic
  • Confirm 404 is reached when expected
  • Confirm robots.txt has the desired values
  • Confirm analytics script is in-place when in production
@marcamos
marcamos / add-homestead-url.md
Last active December 15, 2017 20:20
Add a new Laravel Homestead URL
  1. sudo vim /etc/hosts
  2. type i to edit the file
  3. add 192.168.10.10 [repo-name].test on a new line
  4. press esc to exit edit mode
  5. type :wq, then enter, to write and quit vim
  6. vim ~/Homestead/Homestead.yaml
  7. type i to edit the file
  8. under sites:, add another pair of map: / to: entries
  9. press esc to exit edit mode
  10. type :wq, then enter, to write and quit vim
@marcamos
marcamos / modernizr-classes-ie.markdown
Last active December 31, 2015 18:29
* modernizr-classes-ie.markdown: A list of classes added to each version of IE, via Modernizr. * report-filtered-classes.js: If pre-defined classes *are* found on the HTML element (from Modernizr), log them to the console. You can do something entirely different, such as prepending a list of the found classes to the body element (for example).

Classes inserted into IE by Modernizr

Updated December 23rd, 2013: These lists were gathered from a Windows 7 virtual machine on a MacBook Pro.

IE11

  • js
  • flexbox
  • canvas
  • canvastext
@marcamos
marcamos / Gruntfile.js
Last active January 16, 2018 19:51
Learning Grunt by writing a verbose Gruntfile that replaces (and, goes beyond) what we're used to with CodeKit.
module.exports = function(grunt) {
"use strict";
// -------------------------------------------------------------------------
// #### Load plugins as needed ####
// Using a 'just in time' approach -- meaning: only load plugins when they
// are needed -- this will automatically find, then load, any and all
// plugins that are needed by the task currently being executed. It will
// scan the devDependencies object, in package.json, and match any of the
@marcamos
marcamos / show-or-hide-stuff-based-on-url-parameters.php
Last active December 10, 2015 22:38
Use PHP to show (or not show) something based on the existence (or lack of) a particular parameter.
<?php if (isset ($_GET["preview"])) { ?>
"Preview" exsists as a URL parameter
<? } ?>
<?php if (!isset ($_GET["preview"])) { ?>
"Preview" does not exsist as a URL parameter
<? } ?>
<?php if ($_GET["preview"] == "true") { ?>