Mike Eling DRFR0ST

CSS Layout Debugger

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

	import { useRef, useState } from 'react';
	import NetInfo from "@react-native-community/netinfo";

	/**
	* Returns information about internet connectivity.
	* @example const [isConnected, checkConnection] = useConnectivity();
	*/
	export const useConnectivity = () => {
	const [ isConnected, setConnected ] = useState<boolean \| null>(null);
	const ref = useRef<[ typeof isConnected, () => void ] \| null>(null);

	/**
	* Returns a function that delays callback.
	*/
	const useDelay = () => {
	const ref = useRef<(fn: Function, ms: number) => void \| null>(null);

	if(ref.current === null) {
	let t = -1;
	const delay = (fn: Function, ms: number) => {
	clearTimeout(t);

	/**
	* Freeze your object with this Freezer.
	* @author Me or You
	* @param roomTemperatureData Data for super cooling.
	* @example Freezer({ value: "foo" }, { name: "bar" });
	* @returns Frozen as hell data.
	*/
	const Freezer = (...roomTemperatureData: Object[]) => Object.freeze( roomTemperatureData.map(item => Object.freeze(item) ) );

	(() => {
	// Interval, wykonuje się co 400 ms.
	setInterval(() => {
	// Sprawdza czy cookie "interface" ma ustawioną wartość "si".
	const isSi = getCookie("interface") == "si" ? true : false;
	// Sprawdza czy użytkownik jest away from the keyboard.
	const afk = isSi ? hero.stasis : Engine.hero.d.stasis;
	// Sprawdza czy użytkownik dedł.
	const dead = isSi ? g.dead : Engine.dead;
	// Sprawdza czy użytkownik się napitala.

	<div>
	<h1>This are the terms of my service</h1>
	<h3>Consider having no problems at all with it</h3>

	<ol>
	<li><a href="#foo">Foo</a></li>
	<li><a href="#bar">Bar</a></li>
	<li><a href="#baz">Baz</a></li>
	<li><a href="#qux">Qux</a></li>
	</ol>

	function getHighlightedText(text, highlights) {
	let parts = text.split(new RegExp(`(${highlights.join("\|")})`, "gi"));
	return (
	<span>
	{parts.map((part, i) => (
	<span
	key={i}
	style={highlights.indexOf(part) > -1 ? { fontWeight: "bold" } : {}}>
	{part}
	</span>

	import React, { PureComponent } from "react";
	import { View } from "react-native";
	import PropTypes from "prop-types";

	/**
	* @class
	* @description Simple Flexbox wrapper.
	* @author Mike Eling <mike.eling97@gmail.com>
	*/
	class FlexWrapper extends PureComponent {