hackur

CodePen Challenge: Card Carousel

A Pen by Gemma Croad on CodePen.

License.

hackur

<header class="fake-shader">
  <h1>Who needs shaders?</h1>
  <p>Just HTML and CSS. Scroll down for more.</p>
</header>
<section> 
  <h2>How does this work?</h2>
  <p>I'm using 3 tiny blurry images encoded as base64 strings</p>
  <ul class="images">
    <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAXCAYAAABqBU3hAAAMEElEQVR4AQCBAH7/AIKs5/+CrOf/gqzn/4Gs5/9/quX/e6bi/3ai3f9xndj/a5jT/2iUz/9mk87/ZpPO/2iW0P9rmdP/bZvV/26d1v9unNX/a5nR/2eVzP9ikMb/XovA/1qHu/9Yhbj/WIW3/1mFtv9ahbb/WoW1/1mEs/9XgrD/VYCt/1N9q/9SfKn/AIEAfv8AiLDp/4ix6f+Isen/h7Dp/4Wu5/+Cq+T/faff/3eh2v9yndb/bpnS/22Y0f9tmdH/b5vT/3Kf1v91otn/d6Pa/3aj2f90oNX/b5zQ/2qWyv9mkcT/Yo2//2CLvP9girr/YIq5/2GKuP9hirf/YIm1/16Hs/9chLD/WoKt/1iBrP8AgQB+/wCUue3/lLnt/5S57f+TuO3/kbbr/46z6P+Jr+P/hKre/3+m2v97otf/eqHW/3uj1/99ptn/gand/4St4P+Gr+H/hq/g/4Os3f9/p9j/eqLR/3Wdy/9xmMb/bpXC/22UwP9tk77/bZO9/22TvP9skbr/ao+3/2iNtP9lirH/ZImw/wCBAH7/AKTD8f+kw/H/pMPx/6PD8f+hwe//nr7s/5m66P+UteP/j7Hf/4yu3P+Lrdv/jK/d/5Cz4P+Ut+T/mLvo/5q96v+aven/mLvm/5O24f+Nsdr/iKvT/4Omzf+Aosj/fqDF/32fw/9

hackur

CSS 3D Card with Vanilla Tilt

An interactive card with a 3D parallax tilt effect using vanilla-tilt.js and CSS transforms.

A Pen by Puneet | Techartist on CodePen.

License.

hackur

Flowchart

flowchart LR
    A[If I] --> B{could};
    B -- Yes --> C[I would];
    C --> D[Let it go, Surrender, Dislocate];

Pie chart

hackur

<?php

/**
 *
 * VehicleHistory.com
 *
 * Online Assessment - Question #3
 *
 */

hackur

## Global install of the app generator
npm install -g create-react-app

## Setup the app (first-time only)
create-react-app my-app
cd my-app
git init

# Create the Heroku app; requires free account at https://www.heroku.com/
heroku create -b https://github.com/heroku/heroku-buildpack-static.git

hackur

// React Native SVG Component
// https://github.com/react-native-community/react-native-svg
// 
// Process
// 1. Clean up SVG in graphics app (Illustrator/Sketch/etc) to set consistent width, height, and make sure the viewBox is "0, 0, W, H"
// 2. Open SVG in text editor to remove width, height, and any undesired/unnecessary styles
// 3. Open in https://jakearchibald.github.io/svgomg/ and optimize.
// 4. Integrate info app by converting SVG tags to component-based SVG tags used in https://github.com/react-native-community/react-native-svg and updating with JS variables such that I can controls dimensions, colors, etc.
// 5. Use in other components.
//

hackur

/*
  Open console.
  (Import https://raw.githubusercontent.com/MikeMcl/decimal.js/master/decimal.js first if you want/need number formatting)
  Then copy & paste this + enter, to run this.
  Copy console output to a NewFile.js or NewFile.jsx file.
  prettier --write NewFile.js
*/
/* eslint no-console: ["error", { allow: ["log"] }] */
/* global document, Decimal*/
(() => {

hackur

var express = require('express');
var path = require('path');
var webpackConfig = require('./webpack.config');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var proxyMiddleware = require('http-proxy-middleware');

var devConfig = webpackConfig.devServer;
var app = express();

hackur

<!-- General Settings -->
<advancedsettings>
<loglevel hide="true">-1</loglevel> <!-- Comment: Disables logging -->
<playcountminimumpercent>95</playcountminimumpercent>
<skiploopfilter>0</skiploopfilter> <!-- Comment: For RPi or similar use 16 or higher (low CPU usage) -->
<nodvdrom>true</nodvdrom>

<!-- MySQL Library -->
<videodatabase>
	<type>mysql</type>