Chris Ruppel

Login: rupl

Company: null

Location: Freiburg, Deutschland

Bio: Frontend developer interested in digital art and web performance.

Blog: https://chrisruppel.com

Blog: https://chrisruppel.com

Member of

1. ot-crew

Repositories

anypixel

A web-friendly way for anyone to build unusual displays

aragon

Aragon dapp to create and manage blockchain companies.

Aura

A Sass+Compass based Responsive Website framework

Aurora

Drupal HTML5 Base Theme

blocking-critical-css

An example showing how inlined critical CSS can still block page renders.

breakpoint

Really simple media queries in Sass

bustashape

Collaborative, real-time artboards

bustashape-beacon

Physical Web beacon for bustashape.com

chrisruppel.com

My personal website

colorPicker

Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...)

cookbook

A Drupal 7 Feature for kitchen recipes

critical

Extract & Inline Critical-path CSS in HTML pages

CSS1K

A demonstration of what can be accomplished with only 1 K of CSS.

css3playground.com

My collection of experiments and toys built with CSS3.

css3please

css3 please!

devopera

Repository for Dev.Opera source code

devsmeetup.github.io

Developer MeetUp Freiburg

dotfiles-1

My dot's

dotfiles-old

my dotfiles, yo

drupal-7-release-party

Drupal 7 Release Party Status Page

Drupal-8-JavaScript-Plan

null

drush_make_generator

Bringing drush make to the masses in a simple GUI.

el-flecha-negra

Retired codebase for El Flecha Negra website.

emulsify-gulp

Gulp setup to be used with https://github.com/fourkitchens/emulsify

eq.js

Lightweight JavaScript powered element queries

etherwallet

null

feature-detection

Intro to Feature Detection

filter-css

Filter css rules by selector, RegExp or @type

flip-card

A Polymer element that uses CSS 3D Transforms to create the classic two-sided flip card.

frontend-ops

Automate your frontend workflow: dev, debug, test, deploy

frontend-perf

Making websites fast ? tips for frontend performance

frontend-testing

Learn how to use Automated Frontend Testing tools. Covers functional and performance testing.

fun-games-css

Interactive slides for my SXSWi 2013 talk entitled Fun and Games with CSS3.

generator-style-prototype

Yeoman Generator for Style Prototypes

grunt-devperf

Helps front-end developers to maintain a good quality, based on phantomas and grunt-phantomas.

grunt-dust

Grunt.js plugin to compile dustjs templates.

grunt-perfbudget

Grunt task for performance budgeting.

grunt-phantomas

Grunt plugin wrapping phantomas to measure frontend performance

grunt-plt-report

Generates a page load time report from a set of HAR files (network waterfalls)

HackyHour

The HTML5.tx afterparty is not just a happy hour, but a Hacky Hour. Our speakers have contributed challenges for those who want to stretch and exercise what they learned during the conference.

healthcare.gov

null

high-performance-theming

High Performance Theming - Presented at DrupalCon Munich 2012

HipsterIpsum

HipsterIpsum Chrome extension

horseman

A manifesto about the future of Drupal.

houdini

A brief intro to Houdini, the future of CSS

incrementable

Increment length values in textfields

infusion

Example site for an inclusive pattern library theme

intake

A webapp to assist in the North (http://github.com/snugug/north) intake process, specifically around the Content Strategy section

ish.

ish. is yet another viewport resizer

iwanttouse.com

Browser Share by feature

j5-101

My personal experiments learning J5 + node-pixel.

jekyll-tagging

Jekyll plugin to automatically generate a tag cloud and tag pages.

jquery.hasEventListener

hasEventListener is a jQuery plugin which checks if an Object or a DOM element actually has a particular/live/delegated event listener bound to it.

kittenipsum.org

meow

lsd-mobile

Slides for Large Scale Drupal mobile webinar

magic-tricks-with-houdini

Houdini Talk

mapbox-studio-picture-book.tm2

Picture book style for mapbox studio.

matchMedia.js

matchMedia polyfill for testing media queries in JS

meet-modernizr

Slides for 'Meet the Modernizr module' - this deck is primarily about the Drupal module

melodrama

:performing_arts: Create a new presentation without any drama!

microjs.com

Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!

mobile_example

A responsive Drupal theme which delivers both mobile and desktop experiences without any theme switching.

Modernizr

Feature detect HTML5 and CSS3 features, with handy css and javascript hooks so you can progressively enhance to your heart's content.

modernizr-neue

Neue is the new new

neveragaindottech.github.io

Source files for the neveragain.tech site

node-pixel

Library for using addressable LEDs (such as NeoPixels/WS2812) with Firmata and JohnnyFive

offline-first

:electric_plug: Everything you need to know to create offline-first web apps.

onelessjpg.org

A one-pager to visualize the weight of various JS libs against a single image. Probably a picture of a kitten.

perf-tooling

List of performance analysis, monitoring and optimization tools

phantomas

PhantomJS-based web performance metrics collector and monitoring tool

picture-element

This is the element specification.

polymer-flip-card

A demo of my first Polymer element: a CSS 3D flip card.

prerender

A quick intro to Prerendering in web browsers.

Pressflow.org-prototype

Responsive prototype for the new pressflow.org using Foundation.

prism

Lightweight, robust, elegant syntax highlighting.

prose

A content editor for GitHub.

range-touch

:iphone: Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!

react-input-placeholder

Input is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.

recipes

a collection of personal recipes

render-example

A tiny repo to demonstrate performance differences in different animation techniques.

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

responsive-nav.js

Responsive navigation plugin without library dependencies and with fast touch screen support.

reveal.js

The HTML Presentation Framework

rupl.github.io

root directory for my GH pages stuff

rupl.net

static archive of an old DH site

saettfro

School food production - Automated greenhouses

sass-textmate-bundle

Sass support for TextMate & Sublime Text 2

screensizes

Visualizes other visitors' screen sizes in real-time

ScriptCraft

JS Weekly readers: you should check out the original repo!

shoov.io

The Shoov.io static website

simpleA11Y

Making #A11Y tips and tricks easier to digest and leveraging the community into the cloud.

Singularity

Grids without limits

smoothState.js

Unobtrusive page transitions with jQuery.

style-prototype-drupal

Style Prototype components for Drupal 7

style-prototype-example

A sample style prototype for RWD training at DrupalCon

Style-Prototypes

JavaScript and Sass for Style Prototypes

susy-style-guide

A coding style guide to help developers get started with Sass, Compass, and Susy. Contains documentation and workflow suggestions that can be compiled. Perfect for teams that are just getting started with these technologies.

thirdpartysla

3rd party SLA tester / ranker

this-is-responsive

This Is Responsive

tkadlec

null

try_git

null

una.github.io

Redesign of my blog to match my new portfolio :) and migrate off of Tumblr

unfold

Unfolding the Box Model ? interactive slides exploring CSS 3D Transforms

updates.html5rocks.com.new

null

viewport-width-visualization

what do the widths and devices of responsive design look like?

vole

Vole is a social, peer-to-peer web app for sharing words, pictures and videos.

vole.github.io

The Vole website.

vrt-email-course

null

webdrivercss

Regression testing tool for WebdriverIO

WebFundamentals

Best practices for modern web development

webmention-test

Tiny repo to test Webmentions on my personal site.

withBacon

Source code for withbaconfy.com - hat tip to Ben and Ezra

wraith

Wraith ? A responsive screenshot comparison tool

www.githooks.com

A guide to git hooks.

X-rayHTML

A little something to help build documentation pages.

Commits To