bradfrost

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

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

/******************************************************
 * 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

/******************************************************
 * 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

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

Name of Project [version number]

]

[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]

bradfrost

bradfrost

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.

bradfrost

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

<Breadcrumbs>
    <Breadcrumb text="Home" href="/" />
    <Breadcrumb text="Child" href="/child" />
    <Breadcrumb text="Grandchild" href="/child/grandchild" />
</Breadcrumbs>

// or

<Breadcrumbs items={[
    {