checklist posts - idmontie's Portfolio

<p>The following is a checklist I like to use to ensure I&#x27;m covering all the bases when building a component library. It&#x27;s a work in progress, but I hope it can be useful to others.</p>
<h2>Visual Language</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Color
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Palettes, by category</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Dark mode</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Typography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Headings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Paragraph</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Lead paragraphs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Readable text</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Iconography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Icons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Meaning</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Space
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Units / measurements</li>
</ul>
</li>
</ul>
<h2>Text</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Block quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Unordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Internal link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  External link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code</li>
</ul>
<h2>Buttons</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Buttons
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Primary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Secondary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Button groups</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Menu buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Split buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Floating action button</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Brand buttons (Google, FB, Discord)</li>
</ul>
</li>
</ul>
<h2>Forms</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form controls
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text input</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Email/number/other variant inputs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Multi-line text area</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Radio and radio group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Checkbox and checkbox group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Select</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  File upload</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Required label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Switch</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Slider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Calendar picker</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Rich text editor</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form structure</li>
</ul>
<h2>Layout</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Divider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Box</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Marketing grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  App grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Page transitions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Resopnsive breakpoints</li>
</ul>
<h2>Content</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Image</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Avatar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code block</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footnotes</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Thumbnails</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Video</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Map widget</li>
</ul>
<h2>UI Components</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Alerts</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Accordion</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Back to top</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Badges/tags/chips/pills</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Breadcrumbs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Caption</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cards
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Panel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Callout</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Chat</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Comments</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tables
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Data table</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Property table</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Drawer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Filters</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Header</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Error (standard error handler)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Loading / spinner / shimmer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Toast</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Notification / badge (dot)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Modal</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pagination</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Popover</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Progress bar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Search</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sidebar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sort by</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tabs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tooltips</li>
</ul>
<h2>Navigation</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Action bar / toolbar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Main menu / Megamenu</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Inline menu</li>
</ul>
<h2>Marketing</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Contact us</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cookie notification</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero billboard</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero carousel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Legend</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pull quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ratings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Reviews</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Social networking</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Status (alpha, beta)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tips / tutorial</li>
</ul>
<h2>UI Patterns</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Authentication</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Create account</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Permissions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Purchase/checkout</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Settings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Site / app structure</li>
</ul>


The following is a checklist I like to use to ensure I'm covering all the bases when building a component library. It's a work in progress, but I hope it can be useful to others.

## Visual Language

- [ ]  Color
  - [ ]  Palettes, by category
  - [ ]  Dark mode
- [ ]  Typography
  - [ ]  Headings
  - [ ]  Text
  - [ ]  Paragraph
  - [ ]  Lead paragraphs
  - [ ]  Readable text
- [ ]  Iconography
  - [ ]  Icons
  - [ ]  Meaning
- [ ]  Space
  - [ ]  Units / measurements

## Text

- [ ]  Block quote
- [ ]  Unordered list
- [ ]  Ordered list
- [ ]  Internal link
- [ ]  External link
- [ ]  Code

## Buttons

- [ ]  Buttons
  - [ ]  Primary
  - [ ]  Secondary
  - [ ]  Button groups
  - [ ]  Menu buttons
  - [ ]  Split buttons
  - [ ]  Floating action button
  - [ ]  Brand buttons (Google, FB, Discord)

## Forms

- [ ]  Form controls
  - [ ]  Text input
  - [ ]  Email/number/other variant inputs
  - [ ]  Multi-line text area
  - [ ]  Radio and radio group
  - [ ]  Checkbox and checkbox group
  - [ ]  Select
  - [ ]  File upload
  - [ ]  Label
  - [ ]  Required label
  - [ ]  Switch
  - [ ]  Slider
  - [ ]  Calendar picker
  - [ ]  Rich text editor
- [ ]  Form structure

## Layout

- [ ]  Divider
- [ ]  Box
- [ ]  Marketing grid
- [ ]  App grid
- [ ]  Page transitions
- [ ]  Resopnsive breakpoints

## Content

- [ ]  Image
- [ ]  Avatar
- [ ]  Code block
- [ ]  Footnotes
- [ ]  Thumbnails
- [ ]  Video
- [ ]  Map widget

## UI Components

- [ ]  Alerts
- [ ]  Accordion
- [ ]  Back to top
- [ ]  Badges/tags/chips/pills
- [ ]  Breadcrumbs
- [ ]  Caption
- [ ]  Cards
  - [ ]  Panel
  - [ ]  Callout
- [ ]  Chat
- [ ]  Comments
- [ ]  Tables
  - [ ]  Data table
  - [ ]  Property table
- [ ]  Drawer
- [ ]  Filters
- [ ]  Footer
- [ ]  Header
- [ ]  Error (standard error handler)
- [ ]  Loading / spinner / shimmer
- [ ]  Toast
- [ ]  Notification / badge (dot)
- [ ]  Modal
- [ ]  Pagination
- [ ]  Popover
- [ ]  Progress bar
- [ ]  Search
- [ ]  Sidebar
- [ ]  Sort by
- [ ]  Tabs
- [ ]  Tooltips

## Navigation

- [ ]  Action bar / toolbar
- [ ]  Main menu / Megamenu
- [ ]  Inline menu

## Marketing

- [ ]  Contact us
- [ ]  Cookie notification
- [ ]  Hero billboard
- [ ]  Hero carousel
- [ ]  Legend
- [ ]  Pull quote
- [ ]  Ratings
- [ ]  Reviews
- [ ]  Social networking
- [ ]  Status (alpha, beta)
- [ ]  Tips / tutorial

## UI Patterns

- [ ]  Authentication
- [ ]  Create account
- [ ]  Permissions
- [ ]  Purchase/checkout
- [ ]  Settings
- [ ]  Site / app structure


Component Library Checklist

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up."
    }), "\n", _jsx(_components.p, {
      children: "At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature."
    }), "\n", _jsx(_components.p, {
      children: "What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application."
    }), "\n", _jsx(_components.p, {
      children: "Maslow's Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs."
    }), "\n", _jsx(_components.p, {
      children: "Applying Maslow's Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful."
    }), "\n", _jsx(_components.p, {
      children: "Basic functionality:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "A single build/run script"
      }), "\n", _jsx(_components.li, {
        children: "Basic functionality (e.g. CRUD operations for a web app)"
      }), "\n", _jsx(_components.li, {
        children: "User interface (e.g. layout, navigation, responsive design)"
      }), "\n", _jsx(_components.li, {
        children: "Integration with external services (e.g. databases, APIs)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Safety and security:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Linting (e.g. ESLint, Prettier)"
      }), "\n", _jsx(_components.li, {
        children: "Unit tests (e.g. Jest, Mocha)"
      }), "\n", _jsx(_components.li, {
        children: "Basic error handling and reporting (e.g. logging, alerting)"
      }), "\n", _jsx(_components.li, {
        children: "Input validation (e.g. form validation)"
      }), "\n", _jsx(_components.li, {
        children: "Security best practices (e.g. encryption, password hashing, session management)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Love and belonging:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Basic analytics (e.g. page views, user engagement)"
      }), "\n", _jsx(_components.li, {
        children: "User authentication and authorization (e.g. sign-up, login, role-based access control)"
      }), "\n", _jsx(_components.li, {
        children: "User feedback (e.g. contact form, survey)"
      }), "\n", _jsx(_components.li, {
        children: "Social media integration (e.g. sharing, commenting)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Esteem:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Advanced analytics (e.g. user behavior tracking, A/B testing)"
      }), "\n", _jsx(_components.li, {
        children: "Performance monitoring (e.g. load testing, monitoring of server resources)"
      }), "\n", _jsx(_components.li, {
        children: "User experience optimization (e.g. user testing, usability analysis)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Self-actualization:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "End-to-end testing (e.g. Selenium, Cypress)"
      }), "\n", _jsx(_components.li, {
        children: "Accessibility and internationalization (e.g. support for screen readers, translation)"
      }), "\n", _jsx(_components.li, {
        children: "Scalability (e.g. load balancing, caching)"
      }), "\n", _jsx(_components.li, {
        children: "Continuous integration and delivery (e.g. Jenkins, Travis CI)"
      }), "\n", _jsx(_components.li, {
        children: "Deployment (e.g. Docker, Kubernetes)"
      }), "\n", _jsx(_components.li, {
        children: "Automated testing (e.g. unit test, integration test)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up.</p>
<p>At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature.</p>
<p>What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application.</p>
<p>Maslow&#x27;s Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs.</p>
<p>Applying Maslow&#x27;s Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful.</p>
<p>Basic functionality:</p>
<ul>
<li>A single build/run script</li>
<li>Basic functionality (e.g. CRUD operations for a web app)</li>
<li>User interface (e.g. layout, navigation, responsive design)</li>
<li>Integration with external services (e.g. databases, APIs)</li>
</ul>
<p>Safety and security:</p>
<ul>
<li>Linting (e.g. ESLint, Prettier)</li>
<li>Unit tests (e.g. Jest, Mocha)</li>
<li>Basic error handling and reporting (e.g. logging, alerting)</li>
<li>Input validation (e.g. form validation)</li>
<li>Security best practices (e.g. encryption, password hashing, session management)</li>
</ul>
<p>Love and belonging:</p>
<ul>
<li>Basic analytics (e.g. page views, user engagement)</li>
<li>User authentication and authorization (e.g. sign-up, login, role-based access control)</li>
<li>User feedback (e.g. contact form, survey)</li>
<li>Social media integration (e.g. sharing, commenting)</li>
</ul>
<p>Esteem:</p>
<ul>
<li>Advanced analytics (e.g. user behavior tracking, A/B testing)</li>
<li>Performance monitoring (e.g. load testing, monitoring of server resources)</li>
<li>User experience optimization (e.g. user testing, usability analysis)</li>
</ul>
<p>Self-actualization:</p>
<ul>
<li>End-to-end testing (e.g. Selenium, Cypress)</li>
<li>Accessibility and internationalization (e.g. support for screen readers, translation)</li>
<li>Scalability (e.g. load balancing, caching)</li>
<li>Continuous integration and delivery (e.g. Jenkins, Travis CI)</li>
<li>Deployment (e.g. Docker, Kubernetes)</li>
<li>Automated testing (e.g. unit test, integration test)</li>
</ul>
<p>Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time.</p>


I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up.

At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature.

What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application.

Maslow's Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs.

Applying Maslow's Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful.

Basic functionality:

- A single build/run script
- Basic functionality (e.g. CRUD operations for a web app)
- User interface (e.g. layout, navigation, responsive design)
- Integration with external services (e.g. databases, APIs)

Safety and security:

- Linting (e.g. ESLint, Prettier)
- Unit tests (e.g. Jest, Mocha)
- Basic error handling and reporting (e.g. logging, alerting)
- Input validation (e.g. form validation)
- Security best practices (e.g. encryption, password hashing, session management)

Love and belonging:

- Basic analytics (e.g. page views, user engagement)
- User authentication and authorization (e.g. sign-up, login, role-based access control)
- User feedback (e.g. contact form, survey)
- Social media integration (e.g. sharing, commenting)

Esteem:

- Advanced analytics (e.g. user behavior tracking, A/B testing)
- Performance monitoring (e.g. load testing, monitoring of server resources)
- User experience optimization (e.g. user testing, usability analysis)

Self-actualization:

- End-to-end testing (e.g. Selenium, Cypress)
- Accessibility and internationalization (e.g. support for screen readers, translation)
- Scalability (e.g. load balancing, caching)
- Continuous integration and delivery (e.g. Jenkins, Travis CI)
- Deployment (e.g. Docker, Kubernetes)
- Automated testing (e.g. unit test, integration test)

Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time.


Component Library Checklist

The Hierarchy of Webapp Needs