eyesofkids

// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

const contains = (() => Array.prototype.includes
  ? (arr, value) => arr.includes(value)
  : (arr, value) => arr.some(el => el === value)

eyesofkids

All github Emoji (Smiles)

ali.md/emoji

| 😄 | 😆 | 😊 | 😃 | ☺️ | 😏 | 😍 | 😘 | :kissing_face: | 😳 | 😌 | 😆 | 😁 | 😉 | :wink2: | 👅 | 😒 | 😅 | 😓

😩 | 😔 | 😞 | 😖 | 😨 | 😰 | 😣 | 😢 | 😭 | 😂 | 😲 | 😱 | | 😫 | 😠 | 😡 | 😤 | 😪 | 😋 | 😷

😎 | 😵 | 👿 | 😈 | 😐 | 😶 | 😇 | 👽 | 💛 | 💙 | 💜 | ❤️ | 💚 | 💔 | 💓 | 💗 | 💕 | 💞 | 💘 | ✨

eyesofkids

{
  // http://eslint.org/docs/rules/

  "ecmaFeatures": {
    "binaryLiterals": false,                    // enable binary literals
    "blockBindings": false,                     // enable let and const (aka block bindings)
    "defaultParams": false,                     // enable default function parameters
    "forOf": false,                             // enable for-of loops
    "generators": false,                        // enable generators
    "objectLiteralComputedProperties": false,   // enable computed object literal property names

eyesofkids

Note: This post is a summary of information paraphrased from an excellent blog post by Christian Sepulveda.

Prerequisites

• Create-React-App
• Yarn

Instructions

Create the app and download the necessary dependencies.

eyesofkids

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

eyesofkids

Findings: React is by far the most popular front-end framework/library (and continues to grow faster). In addition, React is more loved and "wanted" than other front-end frameworks (although it is more used: satisfaction tends to decrease with popularity).

Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.

Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979

Stack Overflow trends

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs

eyesofkids

MySQL Backup for macOS

This shell script creates daily backups of all MySQL databases on macOS. Currently the script uses mysql@5.7, installed by homebrew.

• Daily backups are kept for a week.
• Weekly backups are kept for a month.
• Monthly backups are kept for a year.

Setup

eyesofkids

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

eyesofkids

export interface ICrudService<T> {
  getAll: () => Promise<T[]>;
  getOne: (id: string) => Promise<T | null>;
  create: (data: T) => Promise<T>;
  update: (id: string, data: T) => Promise<T>;
  delete: (id: string) => Promise<T>;
}

eyesofkids

import type { NextApiRequest, NextApiResponse } from "next";

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

export const CrudRouteHandler = async <T>(
  request: NextApiRequest,
  response: NextApiResponse,
  service: ICrudService<T>
) => {
  const id = request.query.id as string;