Skip to content

Instantly share code, notes, and snippets.

View tkrotoff's full-sized avatar

Tanguy Krotoff tkrotoff

126 followers · 47 following
View GitHub Profile
@tkrotoff
tkrotoff / #FormValidationErrorMessageHack.tsx
Last active June 18, 2023 10:29
I want an error tooltip on a button when clicked, let's use the browser native input validation error message
import { forwardRef } from 'react';
// ref is optional with forwardRef(), I want it to be mandatory
// type ... = ReturnType<typeof forwardRef<T, P>>;
type ForwardMandatoryRefComponent<T, P> = React.ForwardRefExoticComponent<
React.PropsWithoutRef<P> & React.RefAttributes<T> & { ref: React.Ref<T> }
>;
type Props = {
// Why? https://stackoverflow.com/a/25367640
@tkrotoff
tkrotoff / #wait.ts
Last active June 18, 2023 08:47
Cancelable await wait()
// https://gist.github.com/tkrotoff/c6dd1cabf5570906724097c6e3f65a12
// https://stackoverflow.com/a/67911932
export function wait(ms: number, options: { signal?: AbortSignal } = {}) {
const { signal } = options;
return new Promise<void>((resolve, reject) => {
// FIXME Not supported by Jest 29.3.1 + Node.js 19.3.0
//signal?.throwIfAborted();
if (signal?.aborted) reject(signal.reason);
@tkrotoff
tkrotoff / #ObjectValues.ts
Last active June 18, 2023 08:42
Recursively converts all values from null to undefined and vice versa
/* eslint-disable guard-for-in, @typescript-eslint/ban-types, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */
import { Primitive } from 'type-fest';
// [Generic way to convert all instances of null to undefined in TypeScript](https://stackoverflow.com/q/50374869)
// ["I intend to stop using `null` in my JS code in favor of `undefined`"](https://github.com/sindresorhus/meta/discussions/7)
// [Proposal: NullToUndefined and UndefinedToNull](https://github.com/sindresorhus/type-fest/issues/603)
// Types implementation inspired by
@tkrotoff
tkrotoff / #RouterProgressBar.tsx
Last active May 14, 2023 22:55
Progress bar like NProgress in 90 lines of code (vs NProgress v0.2.0 is 470 lines .js + 70 lines .css)
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useProgressBar } from './useProgressBar';
// https://github.com/twbs/bootstrap/blob/v5.3.0-alpha1/scss/_variables.scss#L1529
const transitionSpeed = 600;
// https://gist.github.com/tkrotoff/db8a8106cc93ae797ea968d78ea28047
// https://stackoverflow.com/q/60755316
@tkrotoff
tkrotoff / MinimalHTML5.md
Last active May 26, 2021 10:49
Minimal HTML5 structure 
<!DOCTYPE html><title>Hello, World!</title>
  • doctype is mandatory
  • title is mandatory
  • head is not
  • body is not

Verified with https://validator.w3.org/

@tkrotoff
tkrotoff / HowToTest.md
Last active January 29, 2021 22:19
How I structure my tests

File structure

  • src/fooBar.js
  • src/fooBar.html
  • src/fooBar.scss
  • src/fooBar....
  • src/fooBar.test.js => npm run test
  • src/fooBar.test.e2e.js (if I have E2E tests - Puppeteer, Playwright...) => npm run test:e2e

Tests should not be separated from the source code (think autonomous modules).

@tkrotoff
tkrotoff / Log.cs
Created April 11, 2013 13:44
Enhancements for C# System.Diagnostics.Trace: add class and method names to the trace message
namespace Log
{
/// <summary>
/// Helps you trace the execution of your code.
/// </summary>
/// <remarks>
/// Same as System.Diagnostics.Trace but adds the class and method names to the trace message.<br/>
/// <br/>
/// More documentation about Trace and Debug:<br/>
/// <list type="bullet">
@tkrotoff
tkrotoff / event.rb
Created October 9, 2012 13:45
Rails JSON serialization and deserialization
class Event < ActiveRecord::Base
include EventJSON
attr_accessible *EventJSON.attributes
validates :starts_at, presence: true
validates :ends_at, presence: true
validates :all_day, inclusion: { in: [true, false] }
end
@tkrotoff
tkrotoff / svndumpfilter.rb
Last active September 30, 2015 10:37
A simple regexp to manipulate svn dump files
#!/usr/bin/env ruby
# A simple regexp to manipulate svn dump files.
#
# Example of a svn dump file:
#
# Node-path: MySourceCode.cpp
# Node-kind: file
# Node-action: add
# Prop-content-length: 10
@tkrotoff
tkrotoff / Grids.md
Last active August 29, 2015 14:15
Popular CSS Grids

Most popular CSS grids as of February 2015

Bootstrap

  • Stars: 77643
  • Columns: 12 by default
  • Syntax: "row", "col-md-1", "col-xs-12 col-md-8"

Foundation

  • Stars: 19381
  • Columns: 12