Jerome Dahdah jdahdah

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.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

The help center has a series of HTML templates with accompanying components. I put this together to brief myself on the available features within a help center. The official documentation can be found here

Table of Contents

Header
Footer
Home
Category
Section
Article
Contribution

	# 2023-11-27 MIT LICENSE

	Here's the open source version of my ChatGPT game MonkeyIslandAmsterdam.com.

	It's an unofficial image+text-based adventure game edition of Monkey Island in Amsterdam, my home town.

	Please use it however you want. It'd be nice to see more ChatGPT-based games appear from this. If you get inspired by it, please link back to my X https://x.com/levelsio or this Gist so more people can do the same!

	Send me your ChatGPT text adventure game on X, I'd love to try it!

	// dm Klopapier Widget
	//
	// Copyright (C) 2020 by marco79 <[email protected]>
	//
	// Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted.
	//
	// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
	// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
	// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
	// IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE

	import React, { Component } from "react";
	import { useEffect, useState } from "react";

	function createLoadReducer() {
	return (state = { loading: false }, action) => {
	switch (action.type) {
	case "LOADING":
	return { loading: true };
	case "ERROR":
	return { loading: false, error: action.data };

	[Settings]
	ID = "Your_Site_ID"

	# Settings in the [build] context are global and are applied to all contexts unless otherwise overridden by more specific contexts.

	[build]
	# This is the directory to change to before starting a build.
	base = "project/"
	# NOTE: This is where we will look for package.json/.nvmrc/etc, not root.
	# This is the directory that you are publishing from (relative to root of your repo)

	import { FieldProps } from 'formik'
	import React from 'react'
	import Select, { Option, ReactSelectProps } from 'react-select'

	export const SelectField: React.SFC<ReactSelectProps & FieldProps> = ({
	options,
	field,
	form,
	}) => (
	<Select

	<?php

	/*
	I wrote this function to progressively obfuscate text in MAKEbook.io. When it KINDA worked, I just used it.
	It can take a lot of improvement. I kinda just tweaked the values until it was good enough. It's not SO progressive though.

	It takes all the output of your PHP scripts via ob_start(), reroutes that to the obfuscation function.

	You should check if user paid for book or not, then either run ob_start or not!

	helpers do
	def inline_svg name
	root = Middleman::Application.root
	file_path = "#{root}/source/assets/images/svg/#{name}.svg"
	if File.exists?(file_path)
	File.read(file_path)
	else
	"<span class='icon-error'>Icon #{name} not found</span>"
	end
	end