Beaglefoot

// Throw this into dev console and set 'max-width: 100%' for returned list of elements
Array.from(document.querySelectorAll('*')).filter(el => {
    if (el.getBoundingClientRect().width > window.innerWidth) return true;
    
    const {
      width,
      paddingLeft,
      paddingRight,
      marginLeft,
      marginRight

Beaglefoot

<div class="container">

  <div class="image-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="338" viewBox="0 0 512 338">
      <rect x="0" y="0" width="512" height="338" fill="#8094a2" />
      <g transform="scale(2.000000) translate(0.5 0.5)">
        <polygon fill="#ffffff" fill-opacity="0.501961" points="271,5 15,78 -16,-16" />
        <polygon fill="#000b0f" fill-opacity="0.501961" points="271,21 148,88 250,184" />
        <polygon fill="#1e2529" fill-opacity="0.501961" points="-6,131 195,165 3,184" />
        <polygon fill="#d7f8ff" fill-opacity="0.501961" points="210,-16 59,98 -16,1" />

Beaglefoot

console.clear();

class Slider extends React.Component {
  state = { focusedImgIndex: 0, isPlaying: true };
  playIntervalId = null;
  forceUpdateBound = () => this.forceUpdate();

  componentDidMount() {
    if (this.props.interval) {
      this.playIntervalId = setInterval(

Beaglefoot

<div class="surface angle">
  <h1 class="header">Pick a card</h1>
  
  <div class="card">
    <svg class="icon fire" viewBox="0 0 257 310" xmlns="http://www.w3.org/2000/svg" ><g color="#000"><path style="marker:none" d="M26.604 238.398c-15.72-13.475-16.584-33.341-14.857-45.261 1.458-10.057 14.904-21.512 17.722-32.209 1.079-4.093 3.95-12.469-3.343-24.181-6.33-10.164-9.245-14.986-9.245-14.986s12.71 7.074 18.584 11.565c5.873 4.492 19.997 18.616 21.38 21.725 1.381 3.11 8.155-14.832 3.091-24.977-3.81-7.635-8.11-16.403-8.11-16.403s22.665 16.813 26.314 26.321c4.39 11.438.635 26.541.635 26.541l9.412 5.713s12.337-11.342 14.756-22.744c1.649-7.772 1.995-10.64-8.163-16.29-3.096-1.721-8.513-3.615-12.032-6.585-11.056-9.328-15.202-15.547-14.165-23.148 1.036-7.602 10.192-24.704 10.192-24.704s2.246 17.275 8.465 22.112c6.219 4.837 31.268 3.11 38.87 12.093 7.6 8.983 9.673 23.84 8.982 29.368-.69 5.528 2.073.345 3.8-8.983 1.728-9.329 2.42-20.385 2.42-20.385s4.145 1.036 6.564-5.528c2.418-6.565 2.418-15.893 1.727-17.275-.69-1.382-8

Beaglefoot

Footer

A Pen by Stanislav on CodePen.

License.

Beaglefoot

DatePicker (with React)

A Pen by Stanislav on CodePen.

License.

Beaglefoot

<div class="buttons">
  <button class="button__success">Success</button>
  <button class="button__info">Info</button>
  <button class="button__warning">Warning</button>
  <button class="button__error">Error</button>
</div>

Beaglefoot

console.clear();

enum FoldIcon {
  folded = '+',
  unfolded = '-'
}

interface IData {
  id: number;
  title: string;

Beaglefoot

#!/usr/bin/bash

function h2s() {
    local hours=$1
    echo "${wait_time:0:-1} * 3600" | bc | cut -d. -f1
}

function humanize_duration() {
    local total_seconds=$1
    local hours=$(( $total_seconds / 3600 ))

Beaglefoot

type Task<R> = () => Promise<R>

/** Execute array of promise-returning functions with provided concurrency level */
async function* concurrentGen<R>(tasks: Task<R>[], concurrency: number) {
  async function withIndex(task: Task<R>, index: number) {
    const result = await task()
    return { result, index }
  }

  const queues = tasks.splice(0, concurrency).map(withIndex)