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
monochromer
emilebosch
/ applicaitnhelper.rb
Created
October 21, 2014 23:21
Make it possibe to have jade style mixins in slim http://jade-lang.com/reference/mixins/
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
| def mixin(name, &block) | |
| @mixins ||= {} | |
| @mixins[name] = block | |
| method = %{ | |
| def #{name}(*args, &block) | |
| call_mixin(:#{name}, *args, &block) | |
| end | |
| } | |
| eval(method) |
addyosmani
/ README.md
Last active
July 2, 2025 14:29
— forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
tobek
/ get-image-urls.js
Last active
June 24, 2025 19:27
Save images from chrome inspector/dev tools network tab
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
| /* open up chrome dev tools (Menu > More tools > Developer tools) | |
| * go to network tab, refresh the page, wait for images to load (on some sites you may have to scroll down to the images for them to start loading) | |
| * right click/ctrl click on any entry in the network log, select Copy > Copy All as HAR | |
| * open up JS console and enter: var har = [paste] | |
| * (pasting could take a while if there's a lot of requests) | |
| * paste the following JS code into the console | |
| * copy the output, paste into a text file | |
| * open up a terminal in same directory as text file, then: wget -i [that file] | |
| */ |
branneman
/ better-nodejs-require-paths.md
Last active
June 24, 2025 22:40
Better local require() paths for Node.js
When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:
const Article = require('../../../../app/models/article');Those suck for maintenance and they're ugly.
gblazex
/ SmoothScroll.js
Last active
October 12, 2024 16:59
PROJECT MOVED TO NEW ADDRESS: https://github.com/galambalazs/smoothscroll-for-websites
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
| IMPORTANT | |
| Please duplicate this radar for a Safari fix! | |
| This will clean up a 50-line workaround. | |
| rdar://22376037 (https://openradar.appspot.com/radar?id=4965070979203072) | |
| ////////////////////////////////////////////////////////////////////////////// | |
| (Now available as a standalone repo.) |
JeremyMorgan
/ OpenGraphHeader.htm
Last active
January 16, 2022 21:24
Template for Open Graph Tags. Adding these to your pages will help you display information better on Google+, Facebook and Twitter. Just replace the values with their own.
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
| <meta itemprop="name" content="[ TITLE ]" /> | |
| <meta itemprop="image" content="[ LISTING IMAGE ]" /> | |
| <meta itemprop="description" content="[ ARTICLE DESCRIPTION ]" /> | |
| <meta name="description" content="[ ARTICLE DESCRIPTION ]" /> | |
| <meta name="author" content="[ AUTHOR FULL NAME ]" /> | |
| <meta property="article:author" content="[ GOOGLE+ AUTHOR URL ]" /> | |
| <meta property="article:published_time" content="[ PUBLISHED TIMESTAMP ]" /> | |
| <meta property="article:section" content="[ CATEGORY ]" /> |
- Avoid too many reflows (the browser to recalculate everything)
- Use advanced CSS3 for graphic card rendering
- Precalculate sizes and positions
The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:
nodesocket
/ gist:3919205
Created
October 19, 2012 16:33
All world timezones in an HTML select element
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
| <select name="timezone_offset" id="timezone-offset" class="span5"> | |
| <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> | |
| <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> | |
| <option value="-10:00">(GMT -10:00) Hawaii</option> | |
| <option value="-09:50">(GMT -9:30) Taiohae</option> | |
| <option value="-09:00">(GMT -9:00) Alaska</option> | |
| <option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option> | |
| <option value="-07:00">(GMT -7:00) Mountain Time (US & Canada)</option> | |
| <option value="-06:00">(GMT -6:00) Central Time (US & Canada), Mexico City</option> | |
| <option value="-05:00">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option> |
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
| // Кватернионы — это гиперкомплексные числа, предложенные Гамильтоном в 1843 году. | |
| // Кватернионы с операциями на них образуют алгебраическую структуру, называемую "телом" или "кольцом с делением" (division ring) ℍ. | |
| // Такие алгебраические структуры отличаются от привычных нам полей (например, поля действительных чисел ℝ) тем, | |
| // что умножение в них некоммутативно, т.е. для кватернионов справедливо a * b =/= b * a. | |
| // Кватернионы очень удобны для записи вращений в трёхмерном пространстве, поэтому они нашли широкое применение в механике, | |
| // 3D-графике и компьютерном зрении. | |
| // В этом упражнении вы должны будете создать тип, представляющий кватернионы. | |
| // Этот тип будет размеченным объединением, т.к. мы можем по-разному определить кватернионы. |
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
| /* | |
| * Copyright (C) 2008 Apple Inc. All Rights Reserved. | |
| * | |
| * Redistribution and use in source and binary forms, with or without | |
| * modification, are permitted provided that the following conditions | |
| * are met: | |
| * 1. Redistributions of source code must retain the above copyright | |
| * notice, this list of conditions and the following disclaimer. | |
| * 2. Redistributions in binary form must reproduce the above copyright | |
| * notice, this list of conditions and the following disclaimer in the |