Skip to content

Instantly share code, notes, and snippets.

View alexdiliberto's full-sized avatar

Alex DiLiberto alexdiliberto

View GitHub Profile
@alexdiliberto
alexdiliberto / UpdateChocolatey.bat
Created April 18, 2023 20:17 — forked from lowleveldesign/UpdateChocolatey.bat
Scripts to automatically update all Chocolatey packages installed on your system
@echo off
powershell -NoProfile -ExecutionPolicy ByPass -File "%~d0%~p0%~n0.ps1"
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
@alexdiliberto
alexdiliberto / random-walk.html
Created January 25, 2021 02:23 — forked from hacknightly/random-walk.html
A Random Walk in JavaScript
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
@alexdiliberto
alexdiliberto / adapters.application.js
Created May 7, 2020 14:45
REST Adapter With Sideloading
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
});

I’m gonna start blanket adding the following rule to all my stylesheets:

:focus:not(:focus-visible) { outline: none }

Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers that don’t support :focus-visible.

@alexdiliberto
alexdiliberto / full-width-image.hbs
Created April 3, 2020 20:58
Full width image + Tailwind (marketing pages)
{{!-- https://github.com/embermap/emberconf2020-tailwind-css-best-practices --}}
<article class="flex flex-col items-center px-4 mt-4">
<h1 class="w-full max-w-md mx-auto text-xl font-bold">
Lowest Common Ancestor
</h1>
<p class="max-w-md mt-4 text-xs font-medium text-gray-600">
One of the biggest challenges when writing a JavaScript application is keeping multiple parts of the interface in sync. A user interaction in one part of the interface often affects data in another. If not managed well, this data can end up in multiple places, but with inconsistent values.
</p>
@alexdiliberto
alexdiliberto / aspect-ratio.hbs
Created April 3, 2020 17:05
image aspect ratio component
<div class="relative" style={{this.style}}>
<div class="absolute object-cover w-full h-full overflow-hidden">
{{yield}}
</div>
</div>
{"requestedUrl":"https://alexdiliberto.com/","finalUrl":"https://alexdiliberto.com/","lighthouseVersion":"5.6.0","userAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/78.0.3904.74 Safari/537.36","fetchTime":"2019-12-23T21:20:34.599Z","environment":{"networkUserAgent":"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse","hostUserAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/78.0.3904.74 Safari/537.36","benchmarkIndex":624},"runWarnings":[],"configSettings":{"emulatedFormFactor":"mobile","locale":"en-US","onlyCategories":["pwa","performance","accessibility","best-practices","seo"]},"audits":{"audio-caption":{"id":"audio-caption","title":"`<audio>` elements contain a `<track>` element with `[kind=\"captions\"]`","description":"Captions make audio elements usable for deaf or hearing-impaired users, providing critical inf
@alexdiliberto
alexdiliberto / prefers-reduced-motion.css
Created October 29, 2019 01:34
The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}