zachleat/browser-window

Stars
249
Rank 162,987 (Top 4 %)
Language
JavaScript
Created about 1 year ago
Updated 12 months ago

zachleat/browser-window

zachleat

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Used in demos as a way to fake a Safari-esque web browser window.

`browser-window`

A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).

“this is maybe my favoritest [web component] yet.”—Dave Rupert, President of Web Components

Installation

Via npm or download browser-window.js directly for use in your project.

npm install @zachleat/browser-window

web-font-loading-recipes

A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/

speedlify

Benchmark the web performance and accessibility of sites over time.

BigText

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

fontfaceonload

A simple utility to execute a callback when a webfont loads.

table-saw

A small web component for responsive <table> elements.

details-utils

A suite of utilities to add more features to the <details> element.

zachleat.com

zachleat.com is powered by Eleventy and WebC.

Humane-Dates

Show the difference between a date and now (4 days ago)

carouscroll

Add next/previous buttons to a horizontal scrollable container.

performance-leaderboard

A plugin to run Lighthouse against a set of urls to see which site is the fastest.

postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies.

seven-minute-tabs

A minimal no-theme Tabs web component.

filter-container

Filtering visible child elements based on form field values.

video-radio-star

A lightweight web component helper for HTML5 videos.

font-family-reunion

Compatibility tables for default local fonts.

spider-pig

Get a list of local URL links from a root URL.

snow-fall

A web component to add snow to your web site (or to an element on your web site).

announcement-banner

An announcement banner web component.

speedlify-score

A web component that shows Lighthouse scores via Speedlify.

hypercard

Web component to add a three-dimensional hover effect to a card.

jQuery-Gravatar

Retrieve a gravatar image dynamically from any e-mail address.

squirminal

The squirminal is a fake antique terminal web component

bench-framework-markdown

A set of scripts to test markdown processing speeds in various site generators/frameworks

infinity-burger

A new kind of hamburger menu

queue-code

Allows you to “type” syntax highlighted source code for presentations and screencasts.

pagefind-search

A web component to search with Pagefind.

performance-leaderboard-pagespeed-insights

A plugin to run Lighthouse on Pagespeed Insights against a set of urls to see which site is the fastest.

esm-import-transformer

Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`

idea-book

A public dump of ideas for side projects, for public upvoting/downvoting/commenting.

selecthor

A better way to test, learn, and demo CSS selectors

github-issue-to-json-file

Convert a well formed GitHub Issue Form populated Markdown body into a JSON data file in the repository.

JavaScript-Code-Katas

Let's practice our JavaScript testing.

webcare-webshare

f2em.com

A Front End Engineer's Manifesto

avatar-local-cache

Saves a image URL for an avatar to the local file system (and optimizes the image).

performance-sometime

Improving the web font rendering of the default Wordpress theme.

this-website-is-a-tech-talk

educational-sensational-inspirational-foundational

A website dedicated to a history of foundational web development blog posts.

heading-anchors

Adds and positions sibling anchor links for heading elements (h1–h6) when they have an `id` attribute.

throbber

A loading indicator overlay for images (and maybe other things later).

artificial-chart

An SVG charting library based on D3.js

gruntlerplate

A default grunt configuration for new projects.

ToolOrDie

A presentation on Web Developer Workflow.

ALARMd

Web based alarm clock

node-retrieve-globals

Execute a string of JavaScript using Node.js and return the global variable values and functions.

parity-purchasing-power-price

Web Component to show Parity Purchasing Power prices.

font-stats

Generates useful information about a font from a font file.

w3c-banners

A non-image based non-normative proposal for conformance of W3C status banners.

rainglow

A demo for 11tymeetup.dev

css-tricks-font-loading

A case study of the font loading for css-tricks.com

iliveinomaha-banner

Retina friendly progressively enhanced banner for iliveinomaha.com

foitfout

A web font loading demo to showcase FOIT and FOUT behavior side by side.

async-css-loading

Test cases for asynchronous css loading

JsTestDriver-Boilerplate

Easy boilerplate for test driven JavaScript projects using the JsTestDriver tool.

Compatibility-Tests

HTML5 tests used for research for blog posts

BUSYNESS

This project is retired.

uniclode

Another Eleventy Serverless demo, select characters to form a Unicode Range

Raging-Netflix-Queue

RETIRED—A Google Chrome extension, provides a single click add to your Netflix queue while browsing the web.

fundraising-status

Web component to show the current status of a fundraiser.

a-single-html-file

I am a single HTML file.

noop

A minimal module to test importing in other tools.

a11y-tests

A series of small atomic tests used to compare accessibility linting tools.

eleventy-components

unicode-range-interchange

Do math on Unicode Ranges for web fonts.

twitter-avatar-url

Find a twitter avatar image url from a twitter username.

demo-cloudcannon-image-optimization

netlify-kasa-build-status

A little script to update my lights with the status of a Netlify build

browser-logo-icon-set

A multi-color vector icon set (grunticon generated) of browser logos

DOM-Sailbloat

Find the bloat in your document using this Firebug Lite plugin.

rawhyde

A boilerplate for the Jekyll/Grunt/Buttsweater combination used on zachleat.com and nebraskajs.com.

Firebug-Code-Coverage

Retired source code for an old JavaScript Code Coverage plugin for Firebug.

tweetback-zachleat

Snapper

demo-eleventy-base-blog

Just testing GitHub templates

myspacebook

It’s out of this world.

Parlour

A full screen photo gallery with flickr integration.

package-zachleat

Meta package for Zach Leatherman

eleventy-sample-css-manager

Sample created for https://twitter.com/jaffathecake/status/1153759414765203463

gif-party

edge-redirects-test

zachleat

I AM A ✨ SPECIAL ✨ REPOSITORY

space-jam

reverse-proxy-test