kyleshevlin

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

kyleshevlin

// Sometimes you'll have a component that you want to allow the consumer
// to render a different HTML element for semantic purposes. Use an `as`
// prop and a facade pattern to make it happen.

export function CallToAction({as = 'button', ...props}) {
  return <CallToActionFacade as={as} {...props} />
}

function CallToActionFacade({ as, ...props }) {
  switch (as) {

tannerlinsley

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

screeny05

declare global {
    enum ChooseFileSystemEntriesType {
        'open-file',
        'save-file',
        'open-directory'
    }

    interface ChooseFileSystemEntriesOptionsAccepts {
        description?: string;
        mimeTypes?: string;

bfollington

import React, { useReducer } from "react";
import { messages, initialMessagesState } from "./slices/messages";

const App: React.FC = () => {
  const [messageList, dispatch] = useReducer(
    messages.reducer,
    initialMessagesState
  );

  return (

gaearon

const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }      
  }

a1mersnow

window.onload = function () {
  let names = Object.getOwnPropertyNames(window)

  names = names.filter(x => !x.match(/^on/))
  names = names.filter(x => !x.match(/^webkit|^WebKit/))

  /**
   * ---------------------------------- WHATWG ---------------------------------------
   */
  {

spemer

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar except button or resizer */

wsargent

Windows 10 Development Environment for Scala

This is a guide for Scala and Java development on Windows, using Windows Subsystem for Linux, although a bunch of it is applicable to a VirtualBox / Vagrant / Docker subsystem environment. This is not complete, but is intended to be as step by step as possible.

Harden Windows 10

Read the entire Decent Security guide, and follow the instructions, especially:

• Set UAC to full
• Enable Drive Encryption

ryanflorence

<script>
  window.Promise || document.write('<script src="https://unpkg.com/es6-promise@3.2.1/dist/es6-promise.min.js"><\/script>');
  window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch@1.0.0/fetch.js"><\/script>');
</script>