Justin Hall wKovacs64

Making Gatsby work with Internet Explorer 10 and 11

I created this gist in order to help myself and others keep track of tips and tricks in order to make Gatsby v2 play nicely with Internet Explorer 10 and 11.

This is experience based. Please share your experiences when you have a solution to a problem.

External compilation of modules

If you suspect that an es6-based module is breaking your app, then try to add gatsby-plugin-compile-es6-packages and include the package as one of the modules.

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Concept

People talk about two servers: a web server (e.g. Nginx, Apache, etc.) and a app server (e.g. Language specific servers like Unicorn, Node.js, Tomcat, Http-Kit, etc.). There are exceptions where app servers not required at all (as web server itself provides preprocessors for handling), but let's not talk about now.
Web servers are really fast and supports lot of standard and commonly used MIME-type requests. Concept of serving a file is -- forming and sending a response of bytes of data and labeling it with requested MIME-type by a client (e.g. web browser).
Every response format (in layman's language, a file) is recognized by it's MIME-type, for e.g. a PNG image file has "image/png" MIME-type. JavaScript file has "text/javascript". HTML responses (or files) has "text/html". Plain text files have "text/plain".
Modern Browsers supports a lot of standard MIME-types. Images, videos, text files (XML, HTML, SVG, JS), and they better know how to visualize it. Browser also knows unrec

	<head>
	<!-- this will run -->
	<style nonce='1234'>
	.a {
	color: red;
	}
	</style>

	<!-- this won't run -->
	<style>

	#!/bin/bash
	#
	# Credits to fuckbecauseican5 from https://www.reddit.com/r/hackintosh/comments/4s561a/macos_sierra_16a238m_install_success_and_guide/
	# Adapted to work with the official image available into Mac App Store
	#
	# Enjoy!

	hdiutil attach /Applications/Install\ macOS\ Sierra.app/Contents/SharedSupport/InstallESD.dmg -noverify -nobrowse -mountpoint /Volumes/install_app
	hdiutil create -o /tmp/Sierra.cdr -size 7316m -layout SPUD -fs HFS+J
	hdiutil attach /tmp/Sierra.cdr.dmg -noverify -nobrowse -mountpoint /Volumes/install_build

	// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
	// My basic render function structure:
	function RenderLogicExample({
	someBoolean, // 1) Destructure values from `props` object
	someList,
	}) {
	// 2) Declare state values
	const [a, setA] = useState(0);
	const [b, setB] = useState(0);

	'use strict';

	module.exports = function CustomError(message, extra) {
	Error.captureStackTrace(this, this.constructor);
	this.name = this.constructor.name;
	this.message = message;
	this.extra = extra;
	};

	require('util').inherits(module.exports, Error);

	<android.support.v4.widget.DrawerLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:background="@color/background_material_dark"
	android:layout_marginTop="@dimen/status_bar_padding"
	android:id="@+id/drawer_layout"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	>
	<RelativeLayout

	import java.util.List;
	import java.util.concurrent.TimeUnit;

	import rx.Observable;
	import rx.Subscriber;
	import rx.schedulers.Schedulers;

	public class DebounceBuffer {

	public static void main(String args[]) {

	<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
	<SharePointWebControls:ScriptLink language="javascript" name="reputation.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false" />