Skip to content

Instantly share code, notes, and snippets.

View adamliptrot-oc's full-sized avatar

Adam Liptrot adamliptrot-oc

7 followers · 0 following
View GitHub Profile
@adamliptrot-oc
adamliptrot-oc / ghibli.html
Last active March 12, 2025 15:59
Hands-on CSS Starter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Neighbor Totoro</title>
</head>
<body>
<div class="wrapper">
<header>
<nav>
@adamliptrot-oc
adamliptrot-oc / ghibli.html
Last active March 12, 2025 12:14
Hands-on HTML Starter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Neighbor Totoro Nesting Dolls</title>
</head>
<body>
<ul>
<li><a href="/">Ghibli Store</a></li>
@adamliptrot-oc
adamliptrot-oc / ffmpeg.txt
Created October 7, 2024 10:53
Compress video files
ffmpeg -i big.mov -vcodec libx264 -preset veryfast small.mov
@adamliptrot-oc
adamliptrot-oc / get-tags.regexp
Created August 6, 2024 10:11
RegExp for getting all script tags
<script\s*.*>\s*.*</script>
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Created August 1, 2024 13:20
Visual regression testing with Cypress
const baseUrl = "https://liptrot.org";
const sizes = [[600, 900]]
const pages = [
{url:"/",name:"home"},
{url: "/guides", name:"guides"},
{url: "/posts/accessible-names/", name:"blog-accessible-names"}
]
sizes.forEach((size) => {
describe(`On ${size} screen`, () => {
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Created July 29, 2024 08:49
Automating virtual screen-readers with Guidepup and Jest
test("should navigate to the input and announce the label and hint", async () => {
document.body.innerHTML = `
<form>
<label for="ref">What is your reference?</label>
<div class="hint" id="ref-hint">This is 10 characters.</div>
<input type="text" name="ref" id="ref" aria-describedby="ref-hint" />
<button>Save</button>
</form>
`;
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Created July 29, 2024 08:48
Automating screenreaders with Guidepup and Playwright
test("I can navigate the tables page", async ({ page, voiceOver }) => {
await page.goto("http://liptrot.org/guides/vo-macos/tables/", {
waitUntil: "domcontentloaded",
});
const header = await page.locator('header');
await expect(header).toBeVisible();
await voiceOver.interact();
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Last active March 11, 2025 10:29
Use accessible attributes in selectors with Playwright
// get button with accessible name of "login" and aria-expanded=false
await page.getByRole('button', {name: "login", expanded: false});
// get h2 with accessible name of "conditions"
await page.getByRole('heading', {level: 2, name: "Conditions"});
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Last active March 11, 2025 10:29
State tests with Playwright
test('open account menu actions', async ({ page }) => {
const logInButton = page.getByRole('button', {name: 'login', expanded: false});
await logInButton.press('Enter');
const accountMenu = page.locator('#account-menu');
const accountMenuClose = page.locator('#account-menu-close')
// check menu is visible
await expect.soft(accountMenu).toBeVisible();
@adamliptrot-oc
adamliptrot-oc / test-spec.js
Last active March 11, 2025 10:29
Keyboard-only tests with Playwright
test('user can access carousel items', async ({ page }) => {
const carouselPrev = page.getByRole('button', {name: 'previous'});
const firstDeal = page.getByTestId('first-deal-item');
carouselPrev.focus();
await page.keyboard.press('Tab');
await expect(firstDeal).toBeFocused();