Here’s what I learned at Rustbelt Refresh 2019: “Next Steps with CSS Layout” with Rachel Andrew~!
simurai simurai
- GitHub Staff
- http://simurai.com
- @simurai
paulirish
/ how to screencapture and make animated gifs or whathaveyou.md
Last active
March 31, 2024 22:07
Screencapture and animated gifs
I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).
- Launch quicktime player
- do Screen recording
- Web Docs: DocHub - DevDocs
- All CSS properties
- HTML Elements: Native - Native2 - Simple - HTML5 demos
- Specs
- Can I use
- Should I use
- jQuery -> JS
- Default Font Family
- Shadow DOM selectors - Form Pseudo Elements
leostratus
/ webkit-pseudo-elements.md
Created
September 21, 2012 01:44
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
- Allow them to be animated (already works in Firefox, soon also in WebKit).
- Allow more than 2 pseudo elements. Maybe we don't need it if Web Components will come.
- Once an element has
display: none, it shouldn’t affectfirst/last-childand other pseudo selectors. Or maybe it makes sense to add something likedisplay: removed. It would behave like when that element is removed from the DOM aka make pseudo selectors ignore them. Use case: When you temporarly wanna remove items in a list, see demo, but keep the design intact.
lensco
/ Custom.css
Created
August 18, 2011 11:28
User stylesheet to customize the WebKit Inspector (cleaning up and improving the styles panel). See http://bricss.net/post/9076968710/customize-the-webkit-inspector-chrome-dev-tools
This file contains 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
| .monospace { | |
| font: 11px/1.3 Monaco !important; | |
| } | |
| /* slightly larger indentation of source code */ | |
| .outline-disclosure ol { | |
| -webkit-padding-start: 18px !important; | |
| } | |
| /* margin underneath styles panel heading */ |
bebraw
/ gameengines.md
Created
January 6, 2011 18:07
List of JS game engines. You can find a wikified version at https://github.com/bebraw/jswiki/wiki/Game-Engines. Feel free to modify that. I sync it here every once in a while.
IMPORTANT! Remember to check out the wiki page at https://github.com/bebraw/jswiki/wiki/Game-Engines for the most up to date version. There's also a "notes" column in the table but it simply does not fit there... Check out the raw version to see it.
This table contains primarily HTML5 based game engines and frameworks. You might also want to check out the [[Feature Matrix|Game-Engine-Feature-Matrix]], [[Game Resources]] and [[Scene Graphs]].
| Name | Size (KB) | License | Type | Unit Tests | Docs | Repository | Notes |
|---|---|---|---|---|---|---|---|
| Akihabara | 453 | GPL2, MIT | Classic Repro | no | API | github | Intended for making classic arcade-style games in JS+HTML5 |
| AllBinary Platform | Platform Dependent | AllBinary | 2D/2.5D/3D | n |