mselmany

import { createBrowserRouter, RouteObject } from 'react-router-dom'


const routes = [
  myRoute1,
  myRoute2,
  myRoute3,
] satisfies RouteObject[]

type Route = {

mselmany

<link rel="shortcut icon" width=32px>
<canvas style="display: none" id="loader" width="16" height="16"></canvas>

<script>
class Loader {
  constructor(link, canvas) {
    this.link = link;
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.context.lineWidth = 2;

mselmany

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

mselmany

import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}

mselmany

#!/bin/sh

STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep ".jsx\{0,1\}$")

if [[ "$STAGED_FILES" = "" ]]; then
  exit 0
fi

PASS=true

mselmany

var months = [];

for( var i = 0; i < 12; i++ ){
  months.push( new Date(0,i).toLocaleString({},{month:'short'}) );
  // you can also pass a local like : "en-US" instead of an empty object `{}`.
  // an empty object triggers the system's auto-detection
}

console.log(months);

mselmany

# Backup
docker exec CONTAINER /usr/bin/mysqldump -u root --password=root DATABASE > backup.sql

# Restore
cat backup.sql | docker exec -i CONTAINER /usr/bin/mysql -u root --password=root DATABASE

mselmany

<div>
  <h2>
    Orign Location
  </h2>
</div>
<div id="locationField">
  <input id="originautocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>

<div>

mselmany

const hexagons = ({
  fill = COLORS.white.replace('#', ''),
  opacity = 0.08,
  width = 28,
}) => {
  const height = (width * 49) / 28

  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23${fill}' fill-opacity='${opacity}' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
`
}

mselmany

Cross domain messaging and dynamic iframe height

CONTENT:

• General reviews
• Same domain solutions
• Cross domain solutions