When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Copy this into the console of any web page that is interactive and doesn't | |
| do hard reloads. You will hear your DOM changes as different pitches of | |
| audio. | |
| I have found this interesting for debugging, but also fun to hear web pages | |
| render like UIs do in movies. | |
| */ | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
willmendesneto
/ a11y-dev-mode.css
Last active
March 2, 2026 03:20
Using CSS for highlight errors in HTML - A11Y Linting HTML with CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Highliting accessibility errors in HTML */ | |
| /* highlight HTML element with invalid value for lang attribute */ | |
| html:not([lang]), | |
| html[lang=""] { | |
| border: 2px dotted red !important; | |
| } | |
| /* highlight images missing alt text */ | |
| img:not([alt]) { |
emmabostian
/ attributes.css
Last active
March 4, 2026 10:22
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Seven different types of CSS attribute selectors | |
| // This attribute exists on the element | |
| [value] | |
| // This attribute has a specific value of cool | |
| [value='cool'] | |
| // This attribute value contains the word cool somewhere in it | |
| [value*='cool'] |
tomsoderlund
/ ExampleComponent.js
Last active
May 13, 2021 01:50
Shared state using React Hooks and Context, to allow sharing of state between multiple components or hooks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useContext } from 'react' | |
| import { UserContext, UserContextProvider } from './UserContext' | |
| export default (props) => { | |
| const [user, setUser] = useContext(UserContext) | |
| return ( | |
| <UserContextProvider user={null}> | |
| <div>User name: {user && user.name}</div> | |
| </UserContextProvider> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <opml version="1.0"> | |
| <head> | |
| <title>RSS subscriptions for mundizzle@gmail.com</title> | |
| <dateCreated>Sun, 09 Jun 2019 11:05:23 -0500</dateCreated> | |
| <ownerEmail>mundizzle@gmail.com</ownerEmail> | |
| </head> | |
| <body> | |
| <outline text="A List Apart: The Full Feed" title="A List Apart: The Full Feed" type="rss" xmlUrl="http://feeds.feedburner.com/alistapart/main" htmlUrl=" https://alistapart.com "/> | |
| <outline text="Cognition by Happy Cog" title="Cognition by Happy Cog" type="rss" xmlUrl="http://feeds.feedburner.com/cognitionfeed" htmlUrl="http://cognition.happycog.com/feed"/> |
JoeyBurzynski
/ 55-bytes-of-css.md
Last active
August 2, 2026 10:41
58 bytes of css to look great nearly everywhere
whoisryosuke
/ prettier.sh
Created
April 13, 2019 19:08
Prettier - Format or unminify code (single file or any folder of certain files)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Quickly fix one file | |
| npx prettier --write your-file.html | |
| # Quickly fix all files of one type | |
| npx prettier --write src/**/*.{js,jsx} |
Andy-set-studio
/ get-css-custom-prop.js
Last active
October 19, 2025 21:53
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Pass in an element and its CSS Custom Property that you want the value of. | |
| * Optionally, you can determine what datatype you get back. | |
| * | |
| * @param {String} propKey | |
| * @param {HTMLELement} element=document.documentElement | |
| * @param {String} castAs='string' | |
| * @returns {*} | |
| */ | |
| const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function decorate(tag, template) { | |
| customElements.define(tag, class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| } | |
| connectedCallback() { | |
| let root = this.shadowRoot; | |
| if(!root.firstChild) { |
