Skip to content

Instantly share code, notes, and snippets.

View bradfrost's full-sized avatar

Brad Frost bradfrost

View GitHub Profile
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 February 3, 2019 06:37
React component structure
<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 December 4, 2018 15:54
Sample Gulpfile for Pattern Lab Node
/******************************************************
* 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 November 8, 2017 13:27
Markdown IA for a style guide's pattern detail page

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

// 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);
@bradfrost
bradfrost / primary-nav.json
Created May 17, 2017 21:30
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 21:28
Primary nav with dropdown
<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 15:54
A Gulp task pseudo-code for exporting from Pattern Lab into an adjacent style guide directory
/******************************************************
* 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 October 24, 2019 08:30
Frontend Guidelines WIP

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.