diff options
Diffstat (limited to 'doc/development/fe_guide/index.md')
| -rw-r--r-- | doc/development/fe_guide/index.md | 125 |
1 files changed, 19 insertions, 106 deletions
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md index 405e830406e..70f7aad207b 100644 --- a/doc/development/fe_guide/index.md +++ b/doc/development/fe_guide/index.md @@ -86,135 +86,48 @@ Now that our values have been defined, we can base our goals on these values and We have detailed description on how we see GitLab frontend in the future in [Frontend Goals](frontend_goals.md) section -### Frontend onboarding course +### First time contributors -The [Frontend onboarding course](onboarding_course/index.md) provides a 6-week structured curriculum to learn how to contribute to the GitLab frontend. +If you're a first-time contributor, see [Contribute to GitLab development](../contributing/index.md). -### Browser Support +When you're ready to create your first merge request, or need to review the GitLab frontend workflow, see [Getting started](getting_started.md). -For supported browsers, see our [requirements](../../install/requirements.md#supported-web-browsers). +For a guided introduction to frontend development at GitLab, you can watch the [Frontend onboarding course](onboarding_course/index.md) which provides a six-week structured curriculum. -Use [BrowserStack](https://www.browserstack.com/) to test with our supported browsers. -Sign in to BrowserStack with the credentials saved in the **Engineering** vault of the GitLab -[shared 1Password account](https://about.gitlab.com/handbook/security/#1password-guide). +### Helpful links -## Initiatives +#### Initiatives You can find current frontend initiatives with a cross-functional impact on epics with the label [frontend-initiative](https://gitlab.com/groups/gitlab-org/-/epics?state=opened&page=1&sort=UPDATED_AT_DESC&label_name[]=frontend-initiative). -## Principles - -[High-level guidelines](principles.md) for contributing to GitLab. - -## Development Process - -How we [plan and execute](development_process.md) the work on the frontend. - -## Architecture - -How we go about [making fundamental design decisions](architecture.md) in the GitLab frontend team -or make changes to our frontend development guidelines. - -## Testing +#### Testing How we write [frontend tests](../testing_guide/frontend_testing.md), run the GitLab test suite, and debug test related issues. -## Pajamas Design System +#### Pajamas Design System Reusable components with technical and usage guidelines can be found in our [Pajamas Design System](https://design.gitlab.com/). -## Design Patterns - -JavaScript [design patterns](design_patterns.md) in the GitLab codebase. - -## Design Anti-patterns - -JavaScript [design anti-patterns](design_anti_patterns.md) we try to avoid. - -## Vue.js Best Practices - -Vue specific [design patterns and practices](vue.md). - -## Vuex - -[Vuex](vuex.md) specific design patterns and practices. - -## Axios - -[Axios](axios.md) specific practices and gotchas. - -## GraphQL - -How to use [GraphQL](graphql.md). - -## HAML - -How to use [HAML](haml.md). - -## ViewComponent - -How we use [ViewComponent](view_component.md). - -## Icons and Illustrations - -How we use SVG for our [Icons and Illustrations](icons.md). - -## Dependencies - -General information about frontend [dependencies](dependencies.md) and how we manage them. - -## Keyboard Shortcuts - -How we implement [keyboard shortcuts](keyboard_shortcuts.md) that can be customized and disabled. - -## Editors - -GitLab text editing experiences are provided by the [source editor](source_editor.md) and -the [rich text editor](content_editor.md). - -## Frontend FAQ +#### Frontend FAQ Read the [frontend's FAQ](frontend_faq.md) for common small pieces of helpful information. -## Style Guides - -See the relevant style guides for our guidelines and for information on linting: - -- [JavaScript](style/javascript.md). Our guide is based on -the excellent [Airbnb](https://github.com/airbnb/javascript) style guide with a few small -changes. -- [SCSS](style/scss.md): [our SCSS conventions](https://gitlab.com/gitlab-org/frontend/gitlab-stylelint-config) which are enforced through [`stylelint`](https://stylelint.io). -- [HTML](style/html.md). Guidelines for writing HTML code consistent with the rest of the codebase. -- [Vue](style/vue.md). Guidelines and conventions for Vue code may be found here. - -## [Tooling](tooling.md) - -Our code is automatically formatted with [Prettier](https://prettier.io) to follow our guidelines. Read our [Tooling guide](tooling.md) for more detail. - -## [Performance](performance.md) - -Best practices for monitoring and maximizing frontend performance. - -## [Security](security.md) - -Frontend security practices. - -## Accessibility - -Our [accessibility standards and resources](accessibility.md). - -## Logging - -Best practices for [client-side logging](logging.md) for GitLab frontend development. - -## [Internationalization (i18n) and Translations](../i18n/externalization.md) +#### [Internationalization (i18n) and Translations](../i18n/externalization.md) Frontend internationalization support is described in [this document](../i18n/index.md). The [externalization part of the guide](../i18n/externalization.md) explains the helpers/methods available. -## [Troubleshooting](troubleshooting.md) +#### [Troubleshooting](troubleshooting.md) Running into a Frontend development problem? Check out [this guide](troubleshooting.md) to help resolve your issue. + +#### Browser support + +For supported browsers, see our [requirements](../../install/requirements.md#supported-web-browsers). + +Use [BrowserStack](https://www.browserstack.com/) to test with our supported browsers. +Sign in to BrowserStack with the credentials saved in the **Engineering** vault of the GitLab +[shared 1Password account](https://about.gitlab.com/handbook/security/#1password-guide). |