mikaelbr

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var reactify = require('reactify');
var watchify = require('watchify');
var notify = require("gulp-notify");

var scriptsDir = './scripts';
var buildDir = './build';

mikaelbr

import {useEffect, useState} from 'react';

/**
 * A specialized useState hook for doing isLoading messages. This delays
 * setting flag as true for `delayTimeInMs`. This is to avoid unnecessary loading indicators.
 *
 * @param {boolean} initialState initial flag, true if loading false otherwise.
 * @param {number} [delayTimeInMs=400] milliseconds to delay before setting flag to true
 * @returns {[boolean, React.Dispatch<React.SetStateAction<boolean>>]} usual useState return
 */

mikaelbr

Proper way to Type React Components

I was slow to embrace TypeScript. Not because I think TypeScript is bad, but more for my love of the dynamism of JavaScript. Surprisingly, I find myself looking back at the past projects and they've all been in TypeScript. I think it might be time to face the truth: I mostly code in TypeScript. But in my React projects, there has always been one thing bothering me: React.FC.

For some reason when I was learning TypeScript and React almost all blog posts, tutorials and examples were using React.FC to type up function components. And

mikaelbr

const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
const eventName = k => k.substr(2).toLowerCase();
const isString = s => typeof s === "string";

function attrs(el, props) {
  // Remember, JSX sets props to `null` if nothing is defined, so in that case, we just return unchanged el
  if (!props) {
    return el;
  }
  

mikaelbr

type AllowedChildren =
  | React.ReactElement<BasicItemProps>
  | React.ReactElement<HeaderItemProps>
  | AllowedChildren[];

type ListSectionProps = {
  children: AllowedChildren;
};

const childrenTypes = [BasicItem, HeaderItem];

mikaelbr

export default function compass (onChange, onFirst = function () { }) {
  let hasListened = false;

  OrientationPublisher.init(trigger);

  function trigger (...args) {
    if (!hasListened) {
      onFirst(...args);
      hasListened = true;

mikaelbr

type ScreenDimensions = {
  height: number;
  width: number;
}

function useScreenDimension(): ScreenDimensions {
  const [dimensions, setDimensions] = useState<ScreenDimensions>(() =>
    Dimensions.get('screen'),
  );

mikaelbr

using System;
using System.Diagnostics;
using Microsoft.Owin.Hosting;
using Microsoft.Owin.FileSystems;
using Microsoft.Owin.StaticFiles;
using Owin;

namespace Test.Owin.StaticFiles
{
    public class Program

mikaelbr

# An example of Functional Reactive Programming, by implementing a 
# simple collaborative piano.

# By Mikael Brevik <@mikaelbr>

socket = io.connect()
scale = [
    'A2', 'Bb2', 'B2', 'C3', 'Db3', 'D3', 'Eb3', 'E3', 'F3', 'Gb3', 'G3', 'Ab3',
    'A3', 'Bb3', 'B3', 'C4', 'Db4', 'D4', 'Eb4', 'E4', 'F4', 'Gb4', 'G4', 'Ab4',
    'A4', 'Bb4', 'B4', 'C5'

mikaelbr

{"lastUpload":"2020-05-22T11:42:02.254Z","extensionVersion":"v3.4.3"}