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
/* | |
I used your style, your header div, but with a slide like this | |
<section data-state="showHeader" data-header="custom head"> | |
<p>Hello</p> | |
</section> | |
*/ | |
Reveal.addEventListener( 'slidechanged', function( event ) { |
var express = require('express'), | |
instant = require('instant'), | |
colors = require('colors'), | |
app = express(); | |
app.use(instant(__dirname)); | |
app.listen(3000, | |
console.log('Navigate to ' + 'http://localhost:3000'.green + ' to view your page') | |
); |
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// once cached, the css file is stored on the client forever unless | |
// the URL below is changed. Any change will invalidate the cache | |
var css_href = './index_files/web-fonts.css'; | |
// a simple event handler wrapper | |
function on(el, ev, callback) { | |
if (el.addEventListener) { | |
el.addEventListener(ev, callback, false); |
// Copyright 2014–2017, Eric Holk | |
// | |
// Licensed under the Apache License, Version 2.0 (the "License"); | |
// you may not use this file except in compliance with the License. | |
// You may obtain a copy of the License at | |
// | |
// http://www.apache.org/licenses/LICENSE-2.0 | |
// | |
// Unless required by applicable law or agreed to in writing, software | |
// distributed under the License is distributed on an "AS IS" BASIS, |
/*! CSS.supports() Polyfill | |
* https://gist.github.com/codler/03a0995195aa2859465f | |
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */ | |
if (!('CSS' in window)) { | |
window.CSS = {}; | |
} | |
if (!('supports' in window.CSS)) { | |
window.CSS._cacheSupports = {}; | |
window.CSS.supports = function(propertyName, value) { |
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).
This year marks the first year that we are doing full scale rendering of our SPA application on our mobile.walmart.com Node.js tier, which has provided a number of challenges that are very different from the mostly IO-bound load of our prior #nodebf.
The infrastructure outlined for last year is the same but our Home, Item and a few other pages are prerendered on the server using fruit-loops and hula-hoop to execute an optimized version of our client-side JavaScript and provide a SEO and first-load friendly version of the site.
To support the additional CPU load concerns as peak, which we hope will be unfounded or mitigated by our work, we have also taken a variety of steps to increase cache lifetimes of the pages that are being served in this manner. In order of their impact:
. | |
├── actions | |
├── stores | |
├── views | |
│ ├── Anonymous | |
│ │ ├── __tests__ | |
│ │ ├── views | |
│ │ │ ├── Home | |
│ │ │ │ ├── __tests__ | |
│ │ │ │ └── Handler.js |
This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.
A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons: