rattrayalex

Bacon = require('baconjs')
Imm = require('immutable')
React = require('react')

window.Actions =
  changeFirstName: new Bacon.Bus()
  changeLastName: new Bacon.Bus()
  changeCountry: new Bacon.Bus()
  addCountryBird: new Bacon.Bus()
  addFriend: new Bacon.Bus()

kevinold

var Immutable = require('immutable');
var todos = OrderedMap();

var TodoStore = createStore({
  getAll() { return todos; }
});

Dispatcher.register(function(action) {
  if (action.actionType === "create") {
    var id = createGUID();

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

savuori

module InputWithAddAction (Model, Action, view, update, init) where

import Html exposing (div, input, button, text)
import Html.Events exposing (onClick, on, targetValue)
import Html.Attributes exposing (value)
import Signal


type Action = UpdatedValue String

ohanhi

The Why and When of Choosing Elm

What is Elm?

• Language (and "framework") for building web frontend applications
• Can be used in place of HTML, CSS and JavaScript
• Compiles into the above

kurobeats

%253Cscript%253Ealert('XSS')%253C%252Fscript%253E
<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onafterprint="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onbeforeprint="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onbeforeunload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onerror="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onhashchange="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onmessage="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x ononline="alert(String.fromCharCode(88,83,83))">

jinjor

# make sure every time only one file is re-compiled

echo "time\t\tlines\timports\tfile"

for f in `find src -name *.elm`
do
  elm-make $f --output=/dev/null > /dev/null
  sleep 1
  touch $f
  a=`wc -l $f | awk '{print $1}'`

Chadtech

Only have one outgoing port, and only one incoming port

If you have many ports, they could be all over your project, and therefore hard to manage and easy for forget about. Keep track of all of them by representing your outgoing ports in a union type like..

type JsMsg
    = Download
    | Login Login.Payload
    | Logout
    | Track Tracking.Payload

bvaughn

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.

samsch

Stop using JWTs!

TLDR: JWTs should not be used for keeping your user logged in. They are not designed for this purpose, they are not secure, and there is a much better tool which is designed for it: regular cookie sessions.

If you've got a bit of time to watch a presentation on it, I highly recommend this talk: https://www.youtube.com/watch?v=pYeekwv3vC4 (Note that other topics are largely skimmed over, such as CSRF protection. You should learn about other topics from other sources. Also note that "valid" usecases for JWTs at the end of the video can also be easily handled by other, better, and more secure tools. Specifically, PASETO.)

A related topic: Don't use localStorage (or sessionStorage) for authentication credentials, including JWT tokens: https://www.rdegges.com/2018/please-stop-using-local-storage/

The reason to avoid JWTs comes down to a couple different points:

• The JWT specification is specifically designed only for very short-live tokens (~5 minute or less). Sessions