danielberndt

Quick Guide to Tinkering with the Codecks API

Version: Aug 2020

The Codecks API is the source for powering the web app, so expect it to be fairly stable and expansive. We can't yet make any guarantees regarding the stability of all schema definitions and endpoints at this point. So tread with care!

To get started you need to extract your access token. This token will allow anyone who holds it to impersonate you. This also means they have access to all the same Organizations and contents as you do via the web app. So be careful who you share it with. You might want to create an observer user and use their token if this helps your use case (and the observer limitations suit your use case) you might also create a new non-observer user but this will count towards your user quota.

To extract the token, check your Codecks cookies using your browser web dev tools and look for the content of the auth-token cookie.

danielberndt

import React from "react";

export default class IsIntersecting extends React.Component {
  state = {isIntersecting: false};
  observer = null;

  rootRef = React.createRef();
  elementRef = React.createRef();

  componentDidMount() {

danielberndt

import * as http from "http";

interface Handler<T extends http.IncomingMessage> {
  (req: T, res: http.ServerResponse): any;
}

type WithDB = {db: number};
function withPg<T extends http.IncomingMessage>(handler: Handler<T & WithDB>): Handler<T> {
  return (req, res) => {
    const newReq = req as T & WithDB;

danielberndt

import React from "react";
import B from "glamorous";
import {Link} from "react-router-dom";
import col from "./colors";

const FullHeight = B.div({
  display: "flex",
  flexDirection: "column",
  flex: "auto",
  minWidth: 0,

danielberndt

import React from "react";
import ResizeObserver from "resize-observer-polyfill";
import shallowEqual from "fbjs/lib/shallowEqual";

export default class PausableMeasure extends React.Component {
  node = null;
  state = {bounds: null};

  componentWillMount() {
    if (!this.props.dontMeasure) this.setup();

danielberndt

const routes = [
  {label: "Home", url: "/"},
  {label: "Sub Page", url: "/sub"}
];

const TabsElement = () => (
  <Tabs value="match">{routes.map(({label, url}) => (
    <Route path={url} exact>{({match}) => (
      <Tab label={label} value={match && "match"} containerElement={p => <Link {...p} to={url}/>}/>
    )}</Route>

danielberndt

`
this allows you to use all of webpack's goodness to load your sprites.

here's some benefits:
 - saving one roundtrip since webpack's json-loader will inline the json data into the script. Thus it doesn't need to be loaded from the server first
 - use a lot of the file-loader power and beyond to create cache-busting urls, and apply image-minification via e.g. image-webpack-loader
`

import PIXI from "pixi.js";

danielberndt

require 'slack-notifier'

slack_notifier = Slack::Notifier.new HOOKURL, username: 'oh-noes'

rescue_from :all do |e|
  attachment = {
    fallback: "stacktrace",
    color: "danger",
    fields: e.backtrace.map {|line| {value: slack_notifier.escape(line), short: false}}
  }

danielberndt

// By including either of those libraries the minified code size will increase by...

var request = require("superagent"); // 9.05 kB
var request = require("qwest"); // 7.8 kB
var request = require("rest"); // 28.8 kB
var request = require("browser-request"); // 6.37 kB
var request = require("reqwest"); // 10.1 kB

danielberndt

public abstract class CrudController<T extends Model> {
    
    protected Form<T> form;
    private Template1<Form<T>,Html> composeTemplate;
    private Template1<T,Html> showTemplate;
    private Template2<T,Form<T>,Html> editTemplate;
    private Template1<List<T>,Html> listTemplate;
    private Finder<Long,T> finder;

    public CrudController(Class<T> clazz,