A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
(function($) { | |
$('a[href*=#]:not([href=#])').click(function() | |
{ | |
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
|| location.hostname == this.hostname) | |
{ | |
var target = $(this.hash), | |
headerHeight = $(".primary-header").height() + 5; // Get fixed header height | |
////////////////////////////////////////////////////////////// | |
// Font Variables (http://cssfontstack.com/) | |
////////////////////////////////////////////////////////////// | |
// | |
// Serif font-stacks | |
// | |
$baskerville-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default; |
Agnes en_US # Isn't it nice to have a computer that will talk to you? | |
Albert en_US # I have a frog in my throat. No, I mean a real frog! | |
Alex en_US # Most people recognize me by my voice. | |
Alice it_IT # Salve, mi chiamo Alice e sono una voce italiana. | |
Alva sv_SE # Hej, jag heter Alva. Jag är en svensk röst. | |
Amelie fr_CA # Bonjour, je m’appelle Amelie. Je suis une voix canadienne. | |
Anna de_DE # Hallo, ich heiße Anna und ich bin eine deutsche Stimme. | |
Bad News en_US # The light you see at the end of the tunnel is the headlamp of a fast approaching train. | |
Bahh en_US # Do not pull the wool over my eyes. | |
Bells en_US # Time flies when you are having fun. |
Just migrated it from Codepen.io to markdown. Credit goes to David Conner.
Working with DOM | Working with JS | Working With Functions |
---|---|---|
Accessing Dom Elements | Add/Remove Array Item | Add Default Arguments to Function |
Grab Children/Parent Node(s) | Add/Remove Object Properties | Throttle/Debounce Functions |
Create DOM Elements | Conditionals |
In this tutorial, I will be explaining how to set up a simple webhook to relay your tweets to a Discord channel
module.exports = { | |
config: { | |
// default font size in pixels for all tabs | |
fontSize: 12, | |
// font family with optional fallbacks | |
fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace', | |
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk) | |
cursorColor: 'rgba(248,28,229,0.8)', |