Skip to content

Instantly share code, notes, and snippets.

View anied's full-sized avatar

Alexander Nied anied

View GitHub Profile
@anied
anied / git-alias-for-oh-my-zsh.sh
Last active January 24, 2024 19:28
My Git Aliases
# Mostly the same as git-alias.sh, but simplified for Oh My Zsh (because it handles the piping to a text buffer for you)
# Nice logs
git config --global alias.l 'log --graph --decorate --branches --remotes'
# Nice condensed logs
git config --global alias.lp 'log --graph --decorate --branches --remotes --pretty=format:"%C(auto) %h %d %s"'
# Diff
git config --global alias.d 'diff'
# Diff Staged
git config --global alias.ds 'diff --staged'
@anied
anied / nav-comparison.html
Last active June 25, 2021 01:07
Comparison of a native nav vs one with divs and ARIA
<!-- This... -->
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/schedule">Schedule</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
@anied
anied / accessible-tabbed-container.js
Created June 22, 2021 01:33
JS w/ keyboard handling for accessible tabbed container
const tabsContainer = document.querySelector("#tabs-container");
const focusTab = (target) => {
const tabs = document.querySelectorAll("[role='tab']");
const panes = document.querySelectorAll("[role='tabpanel']");
tabs.forEach((tab) => {
tab.removeAttribute("aria-selected");
tab.removeAttribute("tabindex");
});
panes.forEach((pane) => pane.classList.remove("active"));
@anied
anied / inaccessible-tabbed-container-ARIA-added.css
Created June 21, 2021 05:25
Inaccessible tabbed container w/ the ARIA added
body {
font-family: sans-serif;
}
#tabbed-container {
border: 2px solid black;
width: 90vw;
min-height: 200px;
display: grid;
grid-template-rows: 1.125rem auto;
@anied
anied / inaccessible-tabbed-container.css
Created June 19, 2021 01:32
Inaccessible Tabbed Container Example
#tabbed-container {
border: 2px solid black;
width: 90vw;
height: 200px;
display: grid;
grid-template-rows: 1.125rem auto;
grid-template-columns: auto;
grid-template-areas: "tabs-container", "panes-container";
}
@anied
anied / accessible-custom-checkbox.css
Created June 18, 2021 04:51
Example of an accessible custom checkbox implementation
.checkbox-wrapper {
display: flex;
}
#custom-subscribe {
display: inline-block;
border: 1px solid black;
height: 1rem;
width: 1rem;
margin-left: 0.5rem;
@anied
anied / inaccessible-custom-checkbox.css
Created June 18, 2021 02:55
Example of a custom checkbox with _no_ consideration for proper accessibility.
.hide {
display: none;
}
.checkbox-wrapper {
display: flex;
}
#custom-subscribe {
display: inline-block;
@anied
anied / native-checkbox.html
Created June 18, 2021 02:39
Checkbox created with native HTML elements
<label for="native-subscribe">
Subscribe to native newsletter
</label>
<input type="checkbox" id="native-subscribe" name="native-subscribe" />