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
program = [ comment ], [ "port" ], "module", module_name, "exposing", "(", exposed_list, ")", { import_statement }, { declaration }, { comment }; | |
module_name = identifier, { ".", identifier }, [ comment ]; | |
exposed_list = identifier | "(", identifier, { ",", identifier }, ")", [ comment ] | ".."; | |
import_statement = "import", module_name, [ import_alias ], [ "exposing", "(", exposed_list, ")" ], [ comment ]; | |
import_alias = "as", identifier, [ comment ]; | |
declaration = type_declaration | |
| type_alias_declaration |
import { useState, useContext } from 'react'; | |
import { useDispatch, StoreContext } from 'redux-react-hook'; | |
export default function useTodo() { | |
const [newTodo, setNewTodo] = useState(''); | |
const store = useContext(StoreContext); | |
const todos = store.getState(); | |
const dispatch = useDispatch(); |
import React from 'react'; | |
import useTodo from '../logic-hooks/useTodo'; | |
import TodoInput from '../components/TodoInput'; | |
import TodoList from '../components/TodoList'; | |
export default function TodoInterface() { | |
const { todos, newTodo, setNewTodo, addTodo } = useTodo(); | |
return ( | |
<> |
import React from 'react'; | |
export default function TodoList({ todos }) { | |
return ( | |
<ol> | |
{todos.map((todo, index) => ( | |
<li key={index}>{todo.text}</li> | |
))} | |
</ol> | |
); |
import React from 'react'; | |
export default function TodoInput({ newTodo, setNewTodo, addTodo }) { | |
return ( | |
<input | |
type="text" | |
onChange={e => setNewTodo(e.target.value)} | |
onKeyDown={e => { | |
if (e.key === 'Enter') { | |
addTodo(); |