Skip to content

Instantly share code, notes, and snippets.

View bradfrost's full-sized avatar

Brad Frost bradfrost

View GitHub Profile
@bradfrost
bradfrost / gist:59096a855281c433adc1
Last active September 4, 2023 15:01
Why I'm Not A JavaScript Developer

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 / gist:c90ef0c63fdc38ad4512
Last active August 1, 2022 00:54
Atomic Design Book Original Outline

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 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 / 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 / gist:10906886
Last active July 17, 2021 15:39
Starter Kit Gruntfile.js
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 November 11, 2020 20:41
Anatomy of a successful README

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]

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