Dan Bamikiya danBamikiya

## 1.ngx-reactify.tsx
import { ApplicationRef, ComponentRef, createComponent, Type } from "@angular/core";
import { createApplication } from "@angular/platform-browser";
import React, { useEffect, useRef, useState } from "react";

type AnyComponentRef = ComponentRef<unknown>;

export type ReactifyProps = {
  component: Type<unknown>;
  inputs?: Record<string, unknown>;
};

## named-insured.bui
{
  "id": "named-insured",
  "index": 0,
  "status": "incomplete",
  "graphql": {
    "raw": "... raw graphql persist query ...",
    "values": {
      "/entity/quote_id": "1B1C579D-D6A6-4619-A726-B23911C765EF",
      "/quote_id": "171D54A0-9C2A-42D4-AE6E-F55292F652A7"
    }

## minesweeper.html
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div id="canvas"></div>
  <button id="restart">Restart</button>
  <script src="minesweeper.js"></script>
  <style>
    * {

## composing-route-in-react-router-v6.md

      
              1 file
            
          
              8 forks
            
          
              42 comments
            
          
              75 stars
            
          
                mjackson
                / composing-route-in-react-router-v6.md
            
            
              Last active
              March 12, 2024 08:39
            
              
                Notes on route composition in React Router v6, along with a suggested improvement you can make today to start upgrading
              
          
    Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.
This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.
Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren

  
## README.md

      
              4 files
            
          
              2 forks
            
          
              0 comments
            
          
              29 stars
            
          
                itsMapleLeaf
                / README.md
            
            
              Last active
              July 10, 2023 18:18
            
              
                Typed remix helpers
              
          
    This is no longer needed! Remix's built-in types have improved significantly. But I'll keep this here for historical reasons.

Typed helpers for low-boilerplate type inference with Remix data.

I suffix them with *Typed so I don't accidentally import the core remix helpers.
This doesn't support regular Response objects to prevent accidentally using them with the typed helpers.


## demo.js
const loader = new loadScript();
loader.load([
    '//apis.google.com/js/client:platform.js?onload=startApp',
    '//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.3/dropbox.min.js'
]).then(({length}) => {
    console.log(`${length} scripts loaded!`);
});

## generate-nginx-config.js
const { readdirSync, statSync, writeFileSync } = require('fs')
const { join } = require('path')


// ----------------------------------------- Config
const DIR = '/home/deploy/www';
const TARGET = '/home/deploy/deployNginxConfig';

const HEADER = `
# Config generated by 'generate-nginx-config.js', do not hand-edit

## Frontend development best practices (React.js).md

      
              1 file
            
          
              5 forks
            
          
              32 comments
            
          
              16 stars
            
          
                anton-karlovskiy
                / Frontend development best practices (React.js).md
            
            
              Last active
              July 9, 2023 15:15
            
          
    Re: selfies project written in CRA and PWA


Planning of a project

The project planning is mostly based on Fullstack Project Planning.

For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.


React Project Structure

The project structure is mostly based on React Project Structure Best Practices for Scalable Application.

A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).


## bookmarklets.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              9 stars
            
          
                iamandrewluca
                / bookmarklets.md
            
            
              Last active
              October 18, 2023 07:30
            
              
                Collection of bookmarklets that I use day to day #bookmarklets
              
          
    Any other ideas are welcome. Just ask if what you want is possible.


TODO: Migrate here iamandrewluca/awesome-bookmarklets

Post: https://dev.to/iamandrewluca/bookmarklets-browser-search-engine-2m30

[Generate a password in browser][1]
[Toggle password inputs to text back and forth][2]
[Request picture in picture on first found video that is playing][3]
[Open any URL with host as localhost:3000][4]


## custom-metrics.js
[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;

[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);
	import { ApplicationRef, ComponentRef, createComponent, Type } from "@angular/core";
	import { createApplication } from "@angular/platform-browser";
	import React, { useEffect, useRef, useState } from "react";

	type AnyComponentRef = ComponentRef<unknown>;

	export type ReactifyProps = {
	component: Type<unknown>;
	inputs?: Record<string, unknown>;
	};
	{
	"id": "named-insured",
	"index": 0,
	"status": "incomplete",
	"graphql": {
	"raw": "... raw graphql persist query ...",
	"values": {
	"/entity/quote_id": "1B1C579D-D6A6-4619-A726-B23911C765EF",
	"/quote_id": "171D54A0-9C2A-42D4-AE6E-F55292F652A7"
	}
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {
	const loader = new loadScript();
	loader.load([
	'//apis.google.com/js/client:platform.js?onload=startApp',
	'//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.3/dropbox.min.js'
	]).then(({length}) => {
	console.log(`${length} scripts loaded!`);
	});
	const { readdirSync, statSync, writeFileSync } = require('fs')
	const { join } = require('path')


	// ----------------------------------------- Config
	const DIR = '/home/deploy/www';
	const TARGET = '/home/deploy/deployNginxConfig';

	const HEADER = `
	# Config generated by 'generate-nginx-config.js', do not hand-edit
	[lcp]
	const po = new PerformanceObserver(() => {});
	po.observe({type: 'largest-contentful-paint', buffered: true});
	const lastEntry = po.takeRecords().slice(-1)[0];
	return lastEntry.renderTime \|\| lastEntry.loadTime;

	[cls]
	const po = new PerformanceObserver(() => {});
	po.observe({type: 'layout-shift', buffered: true});
	return po.takeRecords().reduce((val, entry) => val + entry.value, 0);