codeepic

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

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

Reset Udemy Progress

Last Updated: 06/18/2024

Step 1. Go to the Udemy course in your browser

Go to the course and have any video up. The following code relies on the right sidebar to be visible to uncheck all your progress.

Step 2. Open browser console

You can do this with ctrl+shift+j and making sure the console tab is selected for chrome/brave

	@import "compass";
	/**
	* Mixin scrollbar
	*/
	@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
	::-webkit-scrollbar {
	width: $size;
	height: $size;
	}

	<body>
	<div id="chart">
	<svg width="100" height="100">
	<circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="white" />
	</svg>
	</div>
	<button id="download">Download</button>
	<script>
	document.getElementById('download').onclick = function () {
	var chartElement = document.querySelector('#chart > svg');

	import {Injectable} from '@angular/core';
	import {DateAdapter} from '@angular/material';
	import {addDays, addMonths, addYears, format, getDate, getDaysInMonth, getMonth, getYear, parse, setDay, setMonth, toDate} from 'date-fns';

	// CONFIG. Use environment or something for a dynamic locale and settings

	import {es as locale} from 'date-fns/locale';
	const WEEK_STARTS_ON = 1; // 0 sunday, 1 monday...

	export const MAT_DATE_FNS_DATE_FORMATS = {

	{
	"name": "workshop-setup",
	"version": "1.0.0",
	"description": "This is the common setup script for most of my workshops",
	"bin": "./setup.js"
	}