Skip to content

Instantly share code, notes, and snippets.


Jeremy Wilken gnomeontherun

View GitHub Profile
gnomeontherun / demo-users.ts
Created Jun 5, 2020
sample data for a list of users
View demo-users.ts
export interface IUser {
id: number;
first_name: string;
last_name: string;
email: string;
company: string;
avatar: string;
export const Users = [{
gnomeontherun / new-typography.css
Created Oct 28, 2019
New Clarity typography demo
View new-typography.css
.clr-h-display {
color: #29373d;
font-size: 40px;
line-height: 48px;
font-family: "Metropolis";
font-weight: 500;
letter-spacing: -0.5px;
.clr-h-heading {
gnomeontherun / clr-forms-dark-deprecated.css
Last active Jun 9, 2020
Clarity Deprecated Forms CSS, light and dark options
View clr-forms-dark-deprecated.css
@charset "UTF-8";input[type=date],input[type=datetime-local],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=time],input[type=url]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:0 0;height:1rem;color:#e9ecef;display:inline-block;min-width:2.5rem;border-bottom:1px solid #adbbc4;padding:0 .25rem}.select select:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus{outline:0}input[type=date]:not([readonly]),input[type=datetime-local]:not([readonly]),input[type=email]:not([readonly]),input[type=number]:not([readonly]),input[type=password]:not([readonly]),input[type=tel]:not([readonly]),input[type=text]:not([readonly]),input[type=time]:not([readonly]),input[type=url]:not([readonly]){ba
gnomeontherun /
Last active Sep 18, 2015
Web Components: What's in a name?

The term "component" is overloaded in frontend development. There are Web Components, Angular Components, Ember Components, and React Components. What makes them different? How do these all behave?

Examine the principles behind these various types of components and how they address the concepts of reusability, modularity, and encapsulation. Under the hood, these different approaches often solve the same problems, but there are tradeoffs.

You'll see a set of examples built with Web Components, Angular, Ember, and React that demonstrate how the different approaches work and expose some of the limitations they have.

gnomeontherun /
Last active Sep 18, 2015
Building an Angular 2 App with TypeScript

Learn how to structure and build an Angular 2 app using TypeScript and ES6. Angular 2 comes with some new paradigms and features that make it a powerful tool for today's web.

Using an example driven approach, you'll dig into components and how they encapsulate small pieces of reusable functionality. Get practical training on the Angular 2 architecture, how TypeScript can improve your applications, and how features of ES6 make Angular 2 more approachable and easier to work with.

If you're familiar with Angular 1, this is a chance to see how it differs from Angular 2 and learn about the upgrade path.


Keybase proof

I hereby claim:

  • I am gnomeontherun on github.
  • I am gnomeontherun ( on keybase.
  • I have a public key whose fingerprint is 588A 742D B118 43E6 8EC3 4B0F 59F7 9F51 8896 2125

To claim this, I am signing this object:

gnomeontherun / angular-js-myapp.js
Created Aug 8, 2013
Demonstration of AngularJS and how to define a batch of routes without declaring each directly with $routeProvider.
View angular-js-myapp.js
var routes = [
url: '/',
params: {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
url: '/bookmarks',
gnomeontherun / angularjs-interceptor.js
Last active Jun 27, 2020
Intercept XHR/Ajax requests with AngularJS http interceptors. This allows you to globally intercept and modify requests and responses. You don't need to declare all of the methods, just the ones you need. Some example uses would be logging errors, adding extra headers, or triggering 'loading' screens. This intercepts ALL requests/responses, so y…
View angularjs-interceptor.js
// Intercepting HTTP calls with AngularJS.
angular.module('MyApp', [])
.config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
// console.log(config); // Contains the data about the request before it is sent.
gnomeontherun / gist:3955552
Created Oct 25, 2012
Notes about Node.js as I learn
View gist:3955552

Day 2

  • npm install package --save will auto add to dependencies
  • Use an MVC structure
  • You can have dependencies just for development
  • There are a few higher level frameworks (Tower.js, Geddy, Derby, Locomotive.js) but it seems wise to keep it simple
  • Use an MVC structure
  • The power of node modules cannot be understated. On the other hand it seems best to limit as much as possible to only required modules
  • Get your code clearly organized from the start
  • Use an MVC structure
gnomeontherun / script.php
Created Mar 14, 2012
Square One Distribution Installer Script
View script.php
defined('_JEXEC') or die();
class CornerstoneInstallerScript
public function preflight($parent)
return true;
You can’t perform that action at this time.