Skip to content

Instantly share code, notes, and snippets.

View gross-atom-icon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.