Skip to content

Instantly share code, notes, and snippets.

Brad Frost bradfrost

Block or report user

Report or block bradfrost

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 lazy-load-dynamic-component.js
const DynamicComponent = React.lazy(() =>
import(`path/to/${reactComponentName}`)
);
return (
//This works, but now how to I crawl in and grab its properties and PropTypes?
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent title="Lazy loaded component" />
</Suspense>
)
@bradfrost
bradfrost / react-breacrumb-example.jsx
Last active Feb 3, 2019
React component structure
View react-breacrumb-example.jsx
<Breadcrumbs>
<Breadcrumb text="Home" href="/" />
<Breadcrumb text="Child" href="/child" />
<Breadcrumb text="Grandchild" href="/child/grandchild" />
</Breadcrumbs>
// or
<Breadcrumbs items={[
{
@bradfrost
bradfrost / gulpfile.js
Created Dec 4, 2018
Sample Gulpfile for Pattern Lab Node
View gulpfile.js
/******************************************************
* PATTERN LAB NODE
* EDITION-NODE-GULP
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
var gulp = require('gulp'),
path = require('path'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
@bradfrost
bradfrost / style-guide-pattern.md
Last active Nov 8, 2017
Markdown IA for a style guide's pattern detail page
View style-guide-pattern.md

layout: component-detail group: components subgroup: blocks-and-cards permalink: /components/blocks-and-cards/card.html

title: Card description: This is a card. status: Complete

View gist:1ab38c3ddf108d2bd7f7bd4731ac5db4
// set up the defaults for the
var baseIframePath = window.location.protocol + "//" + window.location.host + window.location.pathname.replace("index.html", "");
var patternName = ((config.defaultPattern !== undefined) && (typeof config.defaultPattern === 'string') && (config.defaultPattern.trim().length > 0)) ? config.defaultPattern : 'all';
var iFramePath = baseIframePath + "styleguide/html/styleguide.html?" + Date.now();
if ((oGetVars.p !== undefined) || (oGetVars.pattern !== undefined)) {
patternName = (oGetVars.p !== undefined) ? oGetVars.p : oGetVars.pattern;
}
if (patternName !== "all") {
patternPath = urlHandler.getFileName(patternName);
View primary-nav.json
"navItems" : [
{
"label" : "Nav item",
"currentPage" : true
},
{
"label" : "Nav item",
"navItemClass" : "has-children",
"navChild" : {
"navChildList" : [
@bradfrost
bradfrost / primary-nav.mustache
Created May 17, 2017
Primary nav with dropdown
View primary-nav.mustache
<nav id="nav" class="c-primary-nav" role="navigation">
<ul class="c-primary-nav__list">
{{# navItems }}
<li class="c-primary-nav__item {{ styleModifier }}">
<a href="{{ url }}" class="c-primary-nav__link {{# currentPage }}is-current {{/ currentPage }}{{# navChild }} c-primary-nav__link--has-children js-nav-dropdown-trigger{{/ navChild }}">
{{ label }}
@bradfrost
bradfrost / gulp-style-guide-export.js
Created May 16, 2017
A Gulp task pseudo-code for exporting from Pattern Lab into an adjacent style guide directory
View gulp-style-guide-export.js
/******************************************************
* PATTERN LAB NODE
* EDITION-NODE-GULP
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
var gulp = require('gulp'),
path = require('path'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
@bradfrost
bradfrost / frontend-guidelines.md
Last active Oct 24, 2019
Frontend Guidelines WIP
View frontend-guidelines.md

Frontend Guidelines

These guidelines will govern how we write frontend code for The Spruce (and hopefully beyond!)

HTML Guidelines

HTML Principles

  • Author semantic markup - HTML gives structure to content, and browsers, search engines, and assistive devices make use of that structure to benefit users. Headings should be <h1> through <h6> tags, groups of objects should be marked up as <ul> or <ol> tags, and so on.
  • Legibility - Markup should be easily readable by authors, especially considering that markup is often mixed with Freemarker and other non-HTML code. Use proper spacing, naming, and commenting conventions to keep code legible for yourself and your teammates.
  • Bake in accessibility - Incorporate accessibility best practices into markup as you author markup rather than tacking it on as an afterthought.
View gist:2202230dd991d52d3a8375ef508a540d
---
title: Block Media
state: inreview
---
The media block consists of...
You can’t perform that action at this time.