Skip to content

Instantly share code, notes, and snippets.

Avatar

Brad Frost bradfrost

View GitHub Profile
@bradfrost
bradfrost / gist:c90ef0c63fdc38ad4512
Last active Aug 1, 2022
Atomic Design Book Original Outline
View gist:c90ef0c63fdc38ad4512

Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate, interface systems.

The book will begin by addressing the "why": why designers should care about thinking about Web interfaces in a more systematic way. I'll discuss the history of modular designsystems (after all, this type of thinking been around for a long while now), but discuss how the ever-shifting Web landscape is making systematic thinking a necessity. 

The first section will also discuss the emerging trends and techniques that encourage more systematic thinking: style tiles, element collages, pattern libraries, UI frameworks, and more. And while I'll certainly extol the virtues of these techniques, I'll also bring to light a lot of the shortcomings and frustrations of UI frameworks and pattern libraries. This sets the stage to introduce a more sound, deliberate way of constructing an interface system.

The second chapter will define atomic design. Atomic desig

@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 / gist:59096a855281c433adc1
Last active Dec 15, 2021
Why I'm Not A JavaScript Developer
View gist:59096a855281c433adc1

Answering the Front-end developer JavaScript interview questions to the best of my ability.

  • Explain event delegation

Sometimes you need to delegate events to things.

  • Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

  • Explain how prototypal inheritance works.
@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 / gist:10906886
Last active Jul 17, 2021
Starter Kit Gruntfile.js
View gist:10906886
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'source/js/libs/*.js', // All JS in the libs folder
@bradfrost
bradfrost / anatomy-of-a-successful-readme.md
Last active Nov 11, 2020
Anatomy of a successful README
View anatomy-of-a-successful-readme.md

Name of Project [version number] Build Status: Linux

]

[Introduction text about the project. This should be a short summary of the project that explains what it is and why anyone should care about it]

[optional image]

Getting Started

Requirements

[include a bulleted list of any dependencies your project requires. Include links to the dependencies, and additionally links to helpful resources to get up and running with the project's dependencies]

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.
@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 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={[
{