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
# This is an annotated subset of the Nginx configuration from our Magento production platform @ www.hypernode.com | |
# See https://www.byte.nl/blog/magento-cacheleak-issue | |
# !!!! If you are a Hypernode customer, do not use this config as it will result in duplicate statements. !!!!! | |
user app; | |
worker_processes 4; | |
pid /var/run/nginx.pid; | |
events { |
<?php | |
/** | |
* Simple static proxy trait | |
* | |
* Aura DI is used for lazy loading | |
* | |
* Set `const PROXY_IDENTIFIER = "SomeClass" in your proxy class, and use this trait. | |
* | |
* Call `Some\Proxy\SomeClass::register(new SomeClassInstance)` to have it register the alias. | |
* |
// module.xml | |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> | |
<module name="VendorName_ModuleName" setup_version="0.0.1" > | |
<sequence> | |
<module name="Magento_Config"/> | |
</sequence> | |
</module> | |
</config> | |
// di.xml |
/* | |
* Wraps axios and provides | |
* more convenient post method | |
* calls with payload data | |
*/ | |
export function post(uri, data) { | |
return axios.post(uri, data, { | |
headers: getHeaders(), | |
withCredentials: true | |
}) |
/* | |
* Returns default headers list | |
* which will be used with every request. | |
*/ | |
function getHeaders(multipart = false) { | |
let defaultHeaders = BASE_HEADERS | |
if (multipart) { | |
defaultHeaders = {} | |
} |
(function (context, trackingId, options) { | |
const history = context.history; | |
const doc = document; | |
const nav = navigator || {}; | |
const storage = localStorage; | |
const encode = encodeURIComponent; | |
const pushState = history.pushState; | |
const typeException = 'exception'; | |
const generateId = () => Math.random().toString(36); | |
const getId = () => { |
/* | |
Copy this into the console of any web page that is interactive and doesn't | |
do hard reloads. You will hear your DOM changes as different pitches of | |
audio. | |
I have found this interesting for debugging, but also fun to hear web pages | |
render like UIs do in movies. | |
*/ | |
const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.