Skip to content

Instantly share code, notes, and snippets.

View davidl's full-sized avatar

David Lantner davidl

View GitHub Profile
@davidl
davidl / Character Count
Last active April 23, 2021 12:38
Simple HTML document with minimal CSS and JavaScript to count the characters in a textarea with a configurable target length.
View in browser: https://bl.ocks.org/davidl/raw/b8d4fda8abd91b19edf819ff2ac2e86b/?raw=true
@davidl
davidl / source-colors.less
Last active December 16, 2015 01:19
Use your devtools-theme colors for source views
// XML source viewer:
#webkit-xml-viewer-source-xml + .header,
#webkit-xml-viewer-source-xml + div + #tree {
background-color: @background !important;
color: @foreground !important;
}
#webkit-xml-viewer-source-xml + .header {
border-bottom: 1px solid @html-comment !important;
color: @html-comment !important;
@davidl
davidl / codemirror.less
Created April 5, 2013 15:30
Initial styles for CodeMirror in the Chrome DevTools
#-webkit-web-inspector .CodeMirror {
background-color: @background !important;
color: @foreground !important;
.CodeMirror-selected { background-color: @selection !important; }
.CodeMirror-gutters {
background-color: @current-line !important;
border-right: 1px solid @foreground !important;
}
@davidl
davidl / status-rappers.less
Last active December 15, 2015 12:48
Generate CSS to add HTTP status rappers to your Chrome Dev Tools Network panel
// Mixin to generate URLs, e.g.: .rapStatus('200')
@rapPath: 'http://www.httpstatusrappers.com/images/';
.rapStatus(@statusImg: '') {
background-image: e(%('url(%s%s.png)', @rapPath, @statusImg)) !important;
}
#-webkit-web-inspector {
.status-column {
overflow: visible !important;
@davidl
davidl / status-cats.css
Last active December 15, 2015 11:39
Add some HTTP status cats to your Chrome Dev Tools Network panel by adding these lines to your Custom.css file. Check out https://github.com/bentruyman/devtools-themes for more.
#-webkit-web-inspector .status-column {
overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
overflow: visible !important;
position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
border-color: transparent transparent #000 transparent !important;
border-style: solid !important;
@davidl
davidl / status-rappers.css
Last active December 15, 2015 11:09
Chrome DevTools Status Rappers - illustrate your Network panel
#-webkit-web-inspector .status-column {
overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
overflow: visible !important;
position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
border-color: transparent transparent #000 transparent !important;
border-style: solid !important;
@davidl
davidl / dabblet.css
Created November 30, 2012 15:36
Demo for Prism.js pull request 61 re: empty CDATA sections
/* Demo for Prism.js pull request 61 re: empty CDATA sections */
@davidl
davidl / plist-colors.xslt
Created August 15, 2012 16:19
XSLT to transform a PLIST file to HTML with illustrated color information
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>
<!--
This file is intended to transform a ".plist" file into a HTML
document that highlights color information by illustrating it
and making the color values (hexadecimal and RGB/RGBa) easier to
select and copy.
@davidl
davidl / Custom.css
Last active September 30, 2015 19:07 — forked from star-szr/Custom.css
My Custom.css for Chrome Dev Tools. Built using https://github.com/bentruyman/devtools-themes (IR_Black) with personalizations.
@-webkit-keyframes webkit-inspector-error{0%{color:#ff6c60} 50%{color:#f91300} 100%{color:#ff6c60}}@-webkit-keyframes webkit-inspector-fadeout{from{background-color:#c5c8c6} to{background-color:#1d1f21}}#-webkit-web-inspector{background-color:#1d1f21}#-webkit-web-inspector .monospace,#-webkit-web-inspector .source-code{font-family:'DroidSansMono',Menlo,monospace !important}
#-webkit-web-inspector ::selection{background:rgba(197,200,198,0.25) !important;opacity:1}
#-webkit-web-inspector #toolbar{background-image:-webkit-linear-gradient(#444, #333) !important;border-bottom:1px solid #444 !important;border-top:1px solid #000 !important}
#-webkit-web-inspector #toolbar .toolbar-label{color:#c5c8c6 !important}
#-webkit-web-inspector #toolbar .toggled-on .toolbar-label{color:#f9faf9 !important}
#-webkit-web-inspector #toolbar .toolbar-item.toggleable.toggled-on{background-image:-webkit-linear-gradient(#333, #444) !important}
#-webkit-web-inspector #search-results-matches{color:#f9faf9 !important;text-shadow:none !i