emilong

import React, { Component } from 'react'
import { SubWidgetLink } from './routes'

export default class MyComponentWithALink extends Component {
  render() {
    const { widget } = this.props

    return (
      <div>
        ...

aldendaniels

React now supports the use of ES6 classes as an alternative to React.createClass().

React's concept of Mixins, however, doesn't have a corollary when using ES6 classes. This left the community without an established pattern for code that both handles cross-cutting concerns and requires access to Component Life Cycle Methods.

In this gist, @sebmarkbage proposed an alternative pattern to React mixins: decorate components with a wrapping "higher order" component that handles whatever lifecycle methods it needs to and then invokes the wrapped component in its render() method, passing through props.

While a viable solution, this has a few drawbacks:

1. There's no way for the child component to override functionality defined on the higher order component.

evantahler

#! /usr/bin/env node
// I am ./bin/buildSitemap.js

const path = require('path')
const glob = require('glob')
const fs = require('fs')

const SITE_ROOT = process.env.SITE_ROOT || 'https://www.actionherojs.com'
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')

regilero

# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value

# Generate $prerender_ua bool value based on user agent
# indexation bots will get this as 1, 
# prerender user agent will always get 0 (avoid loops)
map $http_user_agent $prerender_ua {

    default 0;

donaldpipowitch

Install @codemod/cli globally:

$ npm install -g @codemod/cli
# or
$ yarn global add @codemod/cli

This package works out of the box with most code bases, because it comes bundled with @babel/preset-env and @babel/preset-typescript. If you need other presets or plugins for parsing your source code you can use a custom Babel config as well. Note that the codemod will not apply the transformations from these presets and plugins - they are only used for parsing. Therefor you keep your TypeScript types in your source code for example. Formatting will be kept the same as much as possible.

yyx990803

// example vite.config.js
import { cdn } from './vite-plugin-cdn'

export default {
  plugins: [
    // also supported: esm.run, jspm
    // loads the dep over the CDN during dev
    // auto downloads and includes into the bundle during build
    cdn('skypack', {
      vue: '^3.0.5'

anuraghazra

In these two files if you change getToken{slow,fast}'s passed value (just add a random letter anywhere) you'll see that the fast version is getting type checked about 3x to 5x faster than the slow one.

I'm not sure why using key remapping and using keyof {} is about 3x to 5x faster when doing type checking.

My guess is that in the slow version is using index access with the {}[keyof Theme] which is generally slower?

• Slow version: https://tsplay.dev/WJ4bRN
• Fast version: https://tsplay.dev/w24J4m

davidfowl

using System.Buffers;
using System.Net.WebSockets;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/ws", async (HttpContext context) =>
{
    const int MaxMessageSize = 1024 * 1024;

terjanq

Postviewer - writeup

Challenge's overview

The rumor tells that adm1n stores their secret split into multiple documents. Can you catch 'em all? https://postviewer-web.2022.ctfcompetition.com

The challenge consisted of an all client-side simple page, i.e. no backend code was involved. A user can upload any file which will be then locally stored in indexedDB. They can preview their files by either clicking on the title or by visiting file's URL, for example https://postviewer-web.2022.ctfcompetition.com/#file-01d6039e3e157ebcbbf6b2f7cb2dc678f3b9214d. The preview of the file is rendered inside a blob created from data: URL. The rendering occurs by sending file's contents to the iframe via postMessage({ body, mimeType }, '*')

Additionally, there is a /bot endpoint which lets players send URLs to an xss-bot imitating another user. The goal is to steal their documents.

rikschennink

export default (element: HTMLElement, options: any = {}) => {
    // if added as action on non focusable element you should add tabindex=0 attribute

    const {
        direction = undefined,
        shiftMultiplier = 10,
        bubbles = false,
        stopKeydownPropagation = true,
    } = options;