benknight

[use-carousel] Headless UI React hook for building a scroll-based carousel

BYO-UI. No CSS necessary. Inspired by react-table.

Usage:

const {
  getLeftNavProps,
 getRightNavProps,

benknight

// lib/BusinessRenderData.js
import _get from 'lodash/get';
import React from 'react';
import { SocialFacebookSmall } from '@thumbtack/thumbprint-icons';
import vnmmLogo from '../assets/vnmm-logo.svg';
import messengerLogo from '../assets/messenger-logo.svg';
import { getLocalizedURL, getLocalizedVNMMURL } from '../lib/i18n';
import { getBadgesFromSurvey } from './badges';

class BusinessRenderData {

benknight

// src/mocks/Posts.js
export default [
  {
    id: 'p0',
    title: 'Post 0',
    body: 'Blah blah blah',
  },
  // etc.
];

benknight

import { cx } from 'css-in-js';
import { flex, flexAuto, noWrap } from '../styles/utilities';
import { Button, Button__green } from './styles';

const Button = props => {
  const className = cx([
    flex,
    flexAuto,
    Button,
    props.isGreen && Button__green

benknight

Before Unload Bookmarklet

Clicking this bookmarklet on a browser tab will cause the above alert to display when you try to close it. Handy if you have work you really don't want to lose.

benknight

// Route:
<Route name="agent-detail" path=":name" handler={AgentProfile}>
  <Route name="agent-detail-tab" path=":tab" handler={AgentProfile} />
</Route>

// Handler function
handleTabToggle(key) {
  this.replaceWith('agent-detail-tab', {name: this.state.slug, tab: key});
},

benknight

    var mediaQueryList = window.matchMedia('(orientation: portrait)');

    function setMaxHeight (mediaQueryList) {
      var vh = window.innerHeight;
      var vw = window.innerWidth;
      var header = document.querySelector('.site-header');

      if (mediaQueryList.matches) {
        header.style.height = Math.max(vh, vw);
      } else {

benknight

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@function em($target, $context: $baseFontSize) {
  @if $target == 0 {
    @return 0;
  }
  @return $target / $context + 0em;

benknight

$on-wide:            'screen and (min-width: 1600px)';
$off-wide:           'screen and (max-width: 1599px)';
$on-desktop:         'screen and (min-width: 850px)';
$off-desktop:        'screen and (max-width: 849px)';
$on-medium:          'screen and (max-width: 600px)';
$off-medium:         'screen and (min-width: 600px)';
$on-mobile:          'screen and (max-width: 480px)';
$off-mobile:         'screen and (min-width: 481px)';
$on-portrait:        'screen and (max-width: 400px)';
$on-retina:          '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';

benknight

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// Make text more legible.
html {
  -webkit-font-smoothing: antialiased;
}