Skip to content

Instantly share code, notes, and snippets.

View gnomeontherun's full-sized avatar

Jeremy Wilken gnomeontherun

266 followers · 45 following
View GitHub Profile
@gnomeontherun
gnomeontherun / demo-users.ts
Created June 5, 2020 01:22
sample data for a list of users
export interface IUser {
id: number;
first_name: string;
last_name: string;
email: string;
company: string;
avatar: string;
}
export const Users = [{
@gnomeontherun
gnomeontherun / new-typography.css
Created October 28, 2019 22:24
New Clarity typography demo
.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
gnomeontherun / clr-forms-dark-deprecated.css
Last active June 9, 2020 14:10
Clarity Deprecated Forms CSS, light and dark options
@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
gnomeontherun / components-whats-in-a-name.md
Last active September 18, 2015 18:41
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
gnomeontherun / building-angular2-app-typescript.md
Last active September 18, 2015 18:29
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.

@gnomeontherun
gnomeontherun / keybase.md
Last active August 29, 2015 14:03

Keybase proof

I hereby claim:

  • I am gnomeontherun on github.
  • I am gnomeontherun (https://keybase.io/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
gnomeontherun / angular-js-myapp.js
Created August 8, 2013 19:49
Demonstration of AngularJS and how to define a batch of routes without declaring each directly with $routeProvider.
var routes = [
{
url: '/',
params: {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}
},
{
url: '/bookmarks',
@gnomeontherun
gnomeontherun / angularjs-interceptor.js
Last active November 4, 2020 06:46
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…
// 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
gnomeontherun / gist:3955552
Created October 25, 2012 21:30
Notes about Node.js as I learn

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
gnomeontherun / script.php
Created March 14, 2012 03:18
Square One Distribution Installer Script
<?php
defined('_JEXEC') or die();
class CornerstoneInstallerScript
{
public function preflight($parent)
{
return true;
}