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
Mana Tinratreengam mtinra
mtinra
/ README.md
Created
August 3, 2019 02:50
— forked from addyosmani/README.md
108 byte CSS Layout Debugger
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require("express"); | |
| const app = express(); | |
| const port = process.env.SERVER_PORT || 3000; | |
| app.use(function(req, res, next) { | |
| res.header("Access-Control-Allow-Origin", "*"); | |
| res.header( | |
| "Access-Control-Allow-Headers", | |
| "Origin, X-Requested-With, Content-Type, Accept" | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| const request = new XMLHttpRequest(); | |
| const url = 'https://www.google.co.th/'; | |
| function CORSTesting() { | |
| if(request) { | |
| request.open('GET', url, true); | |
| request.send(); | |
| } | |
| } |
mtinra
/ Find and replace in chrome dev tool.md
Last active
April 10, 2019 07:34
open console then
document.body.innerHTML = document.body.innerHTML.replace(/ABC/g, "XYZ")https://www.labnol.org/internet/find-replace-text-in-web-pages/29080/
mtinra
/ cognito.yaml
Last active
May 14, 2021 16:02
— forked from singledigit/cognito.yaml
Create a Cognito Authentication Backend via CloudFormation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| AWSTemplateFormatVersion: '2010-09-09' | |
| Description: Cognito Stack | |
| Parameters: | |
| AuthName: | |
| Type: String | |
| Description: Unique Auth Name for Cognito Resources | |
| API_ID: | |
| Type: String | |
| Despription: API Gateway ID |
mtinra
/ grid-pile-stacking-css-grids-for-impossible-layouts.markdown
Created
June 3, 2018 03:15
GRID PILE: Stacking CSS Grids for Impossible Layouts
Stacking CSS Grids to resolve lack of sub-grid without flattening HTML source.
A Pen by Morten Rand-Hendriksen on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DATABASE_PATH = postgres://user:pass@localhost:5432/dbname |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Fetch is return promise | |
| // function fetchAlmbums() { | |
| // fetch('http://rallycoding.herokuapp.com/api/music_albums') | |
| // .then(res => res.json()) | |
| // .then(json => console.log(json)); | |
| // } | |
| // fetchAlmbums(); | |
| const fetchAlmbums = async () => { |
https://github.com/DominikSerafin/vuebar
Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com https://github.serafin.io/vuebar/
NewerOlder