Owain Stratton owain-stratton

funstage-carousel-widget

Description of funstage-carousel-widget

Configuration:

Arguments and default values:

gmFeedWidget Guide

The Globalmouth feedwidget is a widget showing sports events from the Kambi Sportsbook API. The events shown are requested from a CMS to determine which events to show. The widget alternates views between live and pre-match events on a sliding animation.

gmFeedWidget function

Parameters

Globalmouth Website Sandbox

Third party sites in review

Nav Slider

The nav-slider widget component is built using ReactJS and the Kambi Widget Core Library. It provides a convenient navigation by icon slider for in-play live betting within the 888 sports book.

Running the widget for development

Install project dependencies stated within package.json

hex_grid_demo

A Pen by Owain Stratton on CodePen.

License.

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Convert MOV to GIF using FFmpeg and ImageMagick

I tried a few different techniques to make a GIF via command-line and the following gives me the best control of quality and size. Once you're all setup, you'll be pumping out GIFs in no time!

Preparation

Install FFmpeg

$ brew install ffmpeg [all your options]
- Example: $ brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools

Install ImageMagick

	$baseColor: rgb(255, 255, 255);

	$palette-settings: (
	primary: (
	base: rgb(76, 40, 24),
	terracotta: rgb(168, 102, 78),
	grey: rgb(94, 91, 84),
	tan: rgb(180, 120, 65),
	creme: rgb(161, 146, 111)
	),

	$baseFont: 1;
	$fontScale: 1.618; // Golden Ratio

	$baseLineHeight: 1.4 * $baseFont;

	$small: $baseFont / $fontScale;
	$regular: $baseFont;
	$medium: $baseFont * $fontScale;
	$large: $medium * $fontScale;
	$xLarge: $large * $fontScale;

	const BASE_SIZE = 14;
	// Golden Ratio / Fibonacci Sequence
	// 0 1 1 2 3 5 8 13 21 ...

	const UI_THEME = {
	fonts: {
	xxs: BASE_SIZE *
	}
	}