Tommy Hodgins tomhodgins

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

	import React from 'react'
	import { Box, useElementQuery } from 'atomic-layout'

	// Initially, I thought of EQ as a standalone query-value binding
	// with the React component being an application surface.
	// The problem with this is that the props assignment becomes abstracted,
	// and it's not easy to scan which props are assigned to a component,
	// and which comes from the EQ declared eslewhere.
	const InitialIdea = () => {
	const styles = useElementQuery(

	<!DOCTYPE html><html lang=en>
	<title>Page Not Found</title>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">

	<h1>Page Not Found</h1>
	<p>Sorry, but the page you were trying to view does not exist.</p>

	let _str = (function(){
	const tag = document.createElement('span')
	return {
	propToAttr: (string) {
	tag.dataset[string] = true
	return tag.attributes[0].name.split(/^data-/)[1]
	},
	attrToProp(string) {
	tag.setAttribute(`data-${string}`, true)
	return Object.entries(tag.dataset)[0][0]

	// ==UserScript==
	// @name jsfiddle annoyances
	// @namespace https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/
	// @version 0.0.3
	// @description Kill the anti-features!
	// @author Thykka
	// @match https://jsfiddle.net/*
	// @updateURL https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/raw
	// @downloadURL https://gist.githubusercontent.com/thykka/d130a68229dc9bda81e6f11f7388d52d/raw
	// @grant none

	//add this as the URL of your bookmark, then just click the bookmark to trigger the script when you are on an IG page with an image selected.
	javascript:(function(){var dialog = document.querySelector('.vCf6V'); var standAlone = document.querySelector('._97aPb'); if(!dialog && standAlone){ dialog = standAlone; } if(!dialog && !standAlone){ alert('Please open a IG image to scrape it.'); } else { dialog.querySelectorAll('.FFVAD').forEach(function(e){ var list = e.srcset.split(',').reverse(); list.forEach(function(source){ var sizeimg = source.split(' '); prompt('The image size is:'+sizeimg[1],sizeimg[0]) }) }) }})();

	//alternative; opens largest image in new tab automatically
	javascript:(function(){var dialog = document.querySelector('.vCf6V'); var standAlone = document.querySelector('._97aPb'); if(!dialog && standAlone){ dialog = standAlone; } if(!dialog && !standAlone){ alert('Please open a IG image to scrape it.'); } else { dialog.querySelectorAll('.FFVAD').forEach(function(e){ var list = e.srcset.split(','

	package main

	import (
	"encoding/hex"
	"os"
	"strconv"
	)

	func main() {
	f, err := os.OpenFile("colours.css", os.O_WRONLY, 0600)

	A gilbert project is a directory with 5 sub directories:

	- static/
	- pages/
	- content/
	- templates/
	- dest/

	Upon calling render, the site will:
	- create an index of files in static; only referenced files will be copied to the destination

	interface IState {
	sticky: boolean;
	}

	export class HeaderBar extends React.Component<{}, IState> {
	sentinelRef: React.RefObject<HTMLDivElement>;
	observer: IntersectionObserver;

	state = { sticky: false };

	const wrapWithQuotes = (parts, ...values) => {
	let result = parts[0];

	values.forEach((value, i) => {
	result += `"${value}"` + parts[i + 1];
	});

	return result;
	};