artokun

Animated data-driven button

I needed to make a button that resizes based on data driven values. The animation uses two absolutely positioned spans that emulate a scrolling effect. The base text is transparent and is what actually resizes the width of the element.

If you can find a better solution please fork, fix and comment.

A Pen by Arthur Longbottom on CodePen.

License.

artokun

let arr = [1, 2, 3, 4, 5];
let sum = 0;
var sum2 = 0;
var sum3 = 0;

//ES6 Loop
for (let v of arr) {
	sum += v;
}

artokun

# yarn add babel-eslint eslint eslint-config-prettier eslint-config-standard eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-standard prettier
{
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [

artokun

import Vue from 'vue';
import App from './App';
import router from './router';

/* Import the firebase SDK and extend with firestore */
import firebase from 'firebase';
require('firebase/firestore');

/* Paste your firebase configuration below */
const config = {

artokun

<template>
  <div>
    <h1>System List</h1>
    <ul>
      <li :key="item.key" v-for="item in testCollection">{{item}}</li>
    </ul>
  </div>
</template>

<script>

artokun

{
  "name": "spacetime-api",
  "version": "0.0.1",
  "description": "SpaceTraders SpaceTime Service",
  "main": "index.js",
  "jest": {
    "setupTestFrameworkScriptFile": "./tests/setup.js"
  },
  "scripts": {
    "start": "pm2 start index.js --name api",

artokun

const mongoose = require('mongoose');

// Load models since we will not be instantiating our express server.
require('../models/System');
require('../models/Celestial');

beforeEach(function(done) {
  /*
    Define clearDB function that will loop through all 
    the collections in our mongoose connection and drop them.

artokun

const mongoose = require('mongoose');
const factory = require('../factories/systemFactory');
const System = mongoose.model('System');
const Celestial = mongoose.model('Celestial');

process.env.TEST_SUITE = 'spacetime-systems-test';

describe('Systems', () => {
  beforeEach(() => {
    System.ensureIndexes({ loc: '2d' });

artokun

World (Node3D)
|- RTSController (Node3D)
   |- Elevation (Node3D)
      |- MainCamera (Camera3D)

artokun

import * as THREE from 'three'
import { Points, useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'
import { useFrame, useLoader } from '@react-three/fiber'
import { useMemo, useRef } from 'react'
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'

type GLTFResult = GLTF & {
  nodes: {
    Object_2: THREE.Mesh