Juwan Petty juwanpetty

While building a React Chrome extension using the create-react-app utility (v2.x), I came across the following error on loading my unpacked extension:

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’
blob: filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-
GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Basically, this error arises as Chrome (or almost any modern browser) will not allow inline scripts to get executed. This CSP restriction resulted in the above error as the build script in create-react-app bundles the .js files in <script> tags in the <body> of index.html.

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css

What are CSS modules, subcomponents, and modifiers?

Recently I've been researching SMACSS by Johnathan Snook and the BEM Methodology by Yandex as well as examing my own style of crafting CSS. I've started adopting an approach based on SMACSS that uses the Base, Layout, Module, State approach for structuring my CSS, though I'ved expanded on the concept of modules based on my research into the BEM methodolgy. I've started using a pattern which I refer to it as Module, Subcomponent, Modifier.

Modules

The concept of modules is the same concept of modules described in SMACSS. So if your fimiliar with SMACSS, you already know what modules are.

	import * as React from "react";
	import { useMousePosition } from "~/hooks/useMousePosition";

	/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
	export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
	const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() \|\| {};
	const [mouseX, mouseY] = useMousePosition();
	const positions = { x, y, h, w, mouseX, mouseY };
	return (
	<div

	Mute these words in your settings here: https://twitter.com/settings/muted_keywords

	ActivityTweet
	generic_activity_highlights
	generic_activity_momentsbreaking
	RankedOrganicTweet
	suggest_activity
	suggest_activity_feed
	suggest_activity_highlights
	suggest_activity_tweet

	// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

	// Remove any duplicates from an array of primitives.
	const unique = [...new Set(arr)]

	// Sleep in async functions. Use: await sleep(2000).
	const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
	// or
	const sleep = util.promisify(setTimeout);

	## How to hide API keys from github ##

	1. If you have already pushed commits with sensitive data, follow this guide to remove the sensitive info while
	retaining your commits: https://help.github.com/articles/remove-sensitive-data/

	2. In the terminal, create a config.js file and open it up:

	touch config.js
	atom config.js