Shaun simshaun

I spent a few hours chasing down just how to get my static assets (css, fonts, images) to load in an Electron app built using electron-forge v6 (https://www.electronforge.io/) and its webpack plugin (https://www.electronforge.io/config/plugins/webpack) while in development mode. There really isn't any documentation available online, either in the electron-forge documentation or in places like blogs or gists or stackoverflow. So I thought I'd put it down here.

Step 1

Load CopyWebpackPlugin npm i -D copy-webpack-plugin

Step 2

Use the plugin to move your directories into place.

AND (&)

OR (|)

100  
101  
---

101

Firefox Dark Background

How to change the background on Firefox to a dark one on new tab / loading screen ?

Procedure

Type about:config in the URL bar
Search toolkit.legacyUserProfileCustomizations.stylesheets and double-click the field to set it to true
Type about:support in the URL bar
Look for Profile folder field and click on the open button next to it.

I created this because I was frusterated by having to change the integer values when the environments changed for my projects. A simple update of PHP 5.6 (I think it was PHP 5.6.16 to 5.6.17) changed the integer values, which are usually what is suggested to be used in parameters.yml or config.yml.

By using the constants, you don't have to worry about stupid stuff like that. (Since that's what they were designed for.)

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

	import { useRef } from 'react';

	let uniqueId = 0;
	const getUniqueId = () => uniqueId++;

	export function useComponentId() {
	const idRef = useRef(getUniqueId());
	return idRef.current;
	}

	...
	let config = Encore.getWebpackConfig();
	if(!Encore.isProduction()) {
	fs.writeFile("fakewebpack.config.js", "module.exports = "+JSON.stringify(config), function(err) {
	if(err) {
	return console.log(err);
	}
	console.log("fakewebpack.config.js written");
	});
	}

	/*
	* Example adds certain named Product Attribute fields to the product Edit screen ready for completion.
	* (Pre-requisite )
	* This saves the Shop Admin having to add them manually.
	*
	* Why might you want to do this instead of adding Custom fields? There's plenty of nice documentation on adding custom fields
	* for example: http://www.remicorson.com/mastering-woocommerce-products-custom-fields/
	*
	* Well a Product Attributes are a built in WooCommerce feature, using Terms which are a built in Wordpress feature.
	* - no add-ons required

	<?php

	add_filter( 'woocommerce_shipping_package_name', 'rmg_package_names', 10, 3 );

	function rmg_package_names( $package_name, $i, $package ) {

	if ( ! empty( $package['name'] ) ) {
	$package_name = $package['name'];
	}

	#!/bin/sh

	printf "Switching php to version 5.6 with symlinks.\n"
	printf "Press any key to continue...\n"

	read CONTINUE

	printf "Creating backups..."

	# Backup original binaries