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
#!/usr/bin/env python | |
#-*- coding: utf-8 -*- | |
# This program is free software: you can redistribute it and/or modify | |
# it under the terms of the GNU General Public License as published by | |
# the Free Software Foundation, either version 3 of the License, or | |
# (at your option) any later version. | |
# | |
# This program is distributed in the hope that it will be useful, | |
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
<?php | |
/** | |
* Instructions: | |
* | |
* 1. Put this into the document root of your Kirby site | |
* 2. Make sure to setup the base url for your site correctly | |
* 3. Run this script with `php statify.php` or open it in your browser | |
* 4. Upload all files and folders from static to your server | |
* 5. Test your site |
<?php if($user = $site->user() and $user->hasRole('admin')):?> | |
<form autocomplete="off" class="form" method="post" action="/panel/api/pages/update/<?php echo kirby()->request()->path();?>"> | |
<label class="label" for="form-field-title">Title</label> | |
<input autocomplete="on" class="input" id= "form-field-title" name="title" required="" type="title" value="<?php echo $page->title() ?>"> | |
<input type="submit" value="Save"> | |
</form> | |
<?php endif;?> |
* { | |
font-size: 12pt; | |
font-family: monospace; | |
font-weight: normal; | |
font-style: normal; | |
text-decoration: none; | |
color: black; | |
cursor: default; | |
} |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
<?php | |
kirbytext::$tags['srcset'] = array( | |
'attr' => array( | |
'retina', | |
'alt', | |
'class' | |
), | |
'html' => function($tag) { |
<?php | |
// This file walks you through the most common features of PHP's SQLite3 API. | |
// The code is runnable in its entirety and results in an `analytics.sqlite` file. | |
// Create a new database, if the file doesn't exist and open it for reading/writing. | |
// The extension of the file is arbitrary. | |
$db = new SQLite3('analytics.sqlite', SQLITE3_OPEN_CREATE | SQLITE3_OPEN_READWRITE); | |
// Errors are emitted as warnings by default, enable proper error handling. |
import dawesometoolkit.*; | |
import processing.pdf.*; | |
final String PROJECT = "project-x"; | |
final int BACKGROUND_COLOR = #000000; | |
final int SECONDS_TO_CAPTURE = 60; | |
final int VIDEO_FRAME_RATE = 60; | |
int videoFramesCaptured = 0; | |
boolean recordVideo = false; |
from drawBotGrid import BaselineGrid, columnBaselineGridTextBox | |
import os | |
import datetime | |
import itertools | |
import unicodedata | |
# When you add more fonts, it stacks the strings for each | |
# weight to enable easy comparisons. | |
fonts = ('Helvetica Neue Thin', 'Helvetica Neue', 'Helvetica Neue Bold') | |
#fonts = ('Helvetica Neue Thin', 'Helvetica Neue') |