Skip to content

Instantly share code, notes, and snippets.

@bion

bion/gist:3c98eeeb8015c7f597870c61da657b2b

Last active December 27, 2023 21:06
Show Gist options
  • Save bion/3c98eeeb8015c7f597870c61da657b2b to your computer and use it in GitHub Desktop.
Save bion/3c98eeeb8015c7f597870c61da657b2b to your computer and use it in GitHub Desktop.
Download ZIP
CiviForm front end questionnaire answers
Raw
gistfile1.md

[Bion] Copied from https://github.com/bradfrost/frontend-guidelines-questionnaire/

Frontend Guidelines Questionnaire

A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together.

HTML

HTML Principles

  • What are some general principles your team should follow when writing HTML? (for example, authoring semantic HTML5 markup, accessibility, etc. See these resources for inspiration)

[Bion] We strive to use semantic markup, preferring browser default behavior over custom implementations when possible.

HTML Tools

  • Are you using an HTML preprocessor (such as HAML, Pug, etc)?
  • Are you using a templating engine (such as Mustache, Handlebars, etc)?

[Bion] We currently generated HTML directly in Java code. We are considering a switch to using Thymeleaf.

  • Does your backend architecture influence the frontend markup in any way (for example, WordPress will add wp-paginate to a class in your markup)? If so, can you highlight these conventions?

[Bion] No

HTML Style

  • Spaces or Tabs?

[Bion] Spaces

  • What does HTML commenting look like?

[Bion] We don't have HTML comments at the moment because we don't have templates.

CSS

[Bion] Most of this section is moot because we strive to minimize custom CSS and use TailwindCSS classes for styling as much as practicable.

CSS Principles

  • What are some general principles your team should follow when writing CSS? (For example, modularity, avoiding long selector strings, etc. See these resources for inspiration)

CSS Methodology

  • Is your team using a CSS methodology (such as SMACSS, BEM, or OOCSS)? If yes, where is the documentation for that methodology?
  • Are you deviating from the methodology in any way? If so, can you highlight these conventions?

CSS Tools

  • Is the team using a preprocessor (such as Sass or Less)?
  • What are the guidelines for using that preprocessor (check out Sass Guidelines for inspiration)?
  • Are you using a CSS base (such as Normalize or a reset)?
  • Are you using any CSS postprocessors (such as Prefixfree or Autoprefixer)?
  • Are there specific CSS techniques you're utilizing (such as critical CSS)?

CSS Frameworks

  • Is the team using a framework (such as Bootstrap or Foundation)? If yes, where is the documentation for that framework?
  • Are you deviating from the framework in any way? If so, can you highlight these conventions?

CSS Style

  • Spaces or Tabs?
  • Spacing around rules?
  • Grouping properties?
  • What does CSS commenting look like?

JavaScript

JavaScript Principles

[Bion] See https://github.com/civiform/civiform/wiki/Frontend-Development#client-side-code-typescript

JavaScript tools

  • Are you using a JavaScript framework (such as jQuery, Ember, Angular, etc)?
  • Where is the documentation for those frameworks?
  • Are you using any polyfills or shims (such as any of these)?
  • What third-party scripts are dependencies for your project (such as scripts for form validation, graphs, animation, etc)?
  • Do you test your JavaScript? If so, what tools do you use (such as Jasmine, Karma, Selenium, etc)?

JavaScript Style

(See these resources for inspiration)

  • Spaces or Tabs?
  • What does JS commenting look like?
  • What patterns are you following? (See these resources)

Media

  • How are you handling icons (such as using SVG, icon fonts, etc)?

[Bion] See https://github.com/civiform/civiform/blob/main/server/app/views/components/Icons.java

  • How are you handling responsive images (such as using srcset & <picture />)?

[Bion] Our images are not currently responsive

  • Are you using any tools to optimize and serve images?

[Bion] No

Fonts

  • How do you load custom fonts?

[Bion] We don't us custom fonts, current fonts are Tailwind default: https://tailwindcss.com/docs/font-family

  • Do you use any tools to help implement web fonts (such as Font Squirrel, etc)?

[Bion] No

  • Do you use a service to manage and serve custom fonts (such as Fonts.com, Typekit, etc)?

[Bion] No

Performance

  • Do you use performance budgets? If so, what metrics are you using to determine budgets? Where are you keeping track of performance budgets?

[Bion] Not currently

[Bion] Seattle can share Google Analytics info with us.

[Bion] We don't currently decrease file size.

[Bion] None

Accessibility

  • Are you following the accessibility recommendations laid out in this checklist?

[Bion] No. We follow WCAG and W3 recommendations

  • What accessibility-related tools are you using in your workflow?

[Bion] We use Axe

Tooling

  • Are you using a task runner (such as Grunt or Gulp)?

[Bion] Yes, we use SBT and NPM/nodejs.

  • Are you using a dependency manager (such as Bower or Composer)?

[Bion] Yes, webpack

  • Are you using any scaffolding tools (such as Yeoman)?

[Bion] No

[Bion] No

  • Are any other specific pieces of software that are needed to work on this project?

[Bion] No

Version control

[Bion] Git, GitHub, GitHub issues, see docs

  • What version control system are you using for your frontend code (such as Git or Subversion)?
  • Where is your version-controlled code hosted (such as Github or Bitbucket)?
  • Do you use a version control workflow (such as gitflow, centralized, feature-branch, etc)?
  • Who's responsible for managing and governing the version controlled code??
  • Where are issues tracked?

Support and Optimization

It's important to recognize the difference between "support" and "optimization". You should do your best to support as many environments as possible while simultaneously optimizing for the environments that make the most sense for your business and users.

  • What browsers are you optimizing for?

[Bion] Chrome

  • What devices are you optimizing for?

[Bion] For applicants: low-end smart phones. For admins and TIs: desktop computers.

[Bion] No

[Bion] N/A

Localization

  • Is your website served in different languages? If so, what considerations do you need to address when localizing for other languages?

[Bion] Yes. We need to consider culturally appropriate transation

Deployment/Integration

  • How is your front-end code integrated into a production environment?

[Bion] HTML and other assets are served directly from the production web servers

Documentation

[Bion] No

  • Where does your documentation live? What are the links to the documentation?

[Bion] Here: https://github.com/civiform/civiform/wiki/Frontend-Development

  • Who's responsible for maintaining and governing the documentation?

[Bion] All full-time contributors

  • What happens when the guidelines are updated?

[Bion] An announcement is made in meetings and/or Slack

Feel free to modify or extend (such as adding specific sections for performance, accessibility, etc) this document for your own organization's needs. For questions, comments, additions, and corrections, please open an issue on Github and/or reach out to @brad_frost on Twitter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment