Skip to content

Instantly share code, notes, and snippets.

James Bradford arniebradfo

Block or report user

Report or block arniebradfo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View cra-2-ts-css-modules-guide.md

CRA 2.x + TS setup:

This will give you complete intellisense and type safety within your app and CSS modules

typesafe-css-modules

🚨 NOTE

  • refactoring className from ts file wont update your css/scss className, to change class names you have to change it within your .module.scss file
@arniebradfo
arniebradfo / button.css
Last active May 27, 2018
Detect Tab vs Click Navigation
View button.css
form button:focus,
.input-tabbing button:focus
{
border: 1px solid DeepPink;
}
@arniebradfo
arniebradfo / button.css
Last active May 27, 2018
Device Mouse or Touch Input Detection
View button.css
.input-mouse button:hover{
background-color: black;
color: white;
}
@arniebradfo
arniebradfo / keeps-class.comonent.ts
Last active Jul 25, 2018
Angular non destructive class HostBinding
View keeps-class.comonent.ts
import { Component, Input, HostBinding } from '@angular/core';
/*
<gist-keeps-class class="some classes" [booleanInput]="true" [stringInput]="some-thing"></gist-keeps-class>
will output this:
<gist-keeps-class class="some classes has-boolean some-thing" >
this component keeps class="class" attributes
</gist-keeps-class>
it's not throughly tested, but should work?
@arniebradfo
arniebradfo / app-component-registry.ts
Last active Jan 15, 2020
Get a Angular component by a string corresponding to its class name
View app-component-registry.ts
/**
* @author http://bradford.digital
* @link https://stackoverflow.com/questions/42949647/resolve-type-of-component-from-string-in-angular2
*
* Keep a registry of key:value pairs that is the string name of a component and the Component reference
* The registry is stored in an exported const named COMPONENTREGISTRY
* Add to the registry by using the registerComponent() function as an adorner. example:
* @registerComponent
* @Component({...})
* export class AnExampleComponent {...}
@arniebradfo
arniebradfo / any.component.html
Last active Mar 31, 2020
Angular *ngFor recursive list tree template
View any.component.html
<h1>Angular 2 Recursive List</h1>
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list">
{{item.title}}
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</ul>
</li>
</ng-template>
@arniebradfo
arniebradfo / safariValidationPollyfill.js
Last active Jun 7, 2016
Safari Form Validation Pollyfill - halts form submission if it has invalid required fields and adds tool tip like other browsers do
View safariValidationPollyfill.js
/**
* Safari Form Validation Pollyfill
* halts form submission if it has invalid required fields
* and adds tool tip emulating other browser's native behavior
* Tooltip is styled to match safari
*
* @requires modernizer.js
* @link https://gist.github.com/arniebradfo/1d59554b8e2db28d1b3effc048be06cc/
* @author James Bradford
* @link http://arniebradfo.com
We couldn’t find that file to show.
@arniebradfo
arniebradfo / wp-shortcode-add-body-class.php
Last active Apr 29, 2016
WordPress shortcode that adds classes to the html body
View wp-shortcode-add-body-class.php
<?php // ...in functions.php
// adds wp shortcode that adds css classes to the html body
// use in your page and post content like this:
// [bodyclass class="add these classes to the body"]
function use_bodyclass_shortcode( $classes ) {
global $post;
// check if the post has the bodyclass shortcode
You can’t perform that action at this time.