GitLab / Frontend Skillsharing

In this session we learn how to contribute to this epic, about converting old Frontend tests to use @vue/test-utils.

https://gitlab.com/groups/gitlab-org/-/epics/2445

We also go over this set up, about contributing just to Frontend tests, avoiding the whole GDK setup:

https://gitlab.com/-/snippets/2293410

Here's the resulting MR we made during this session:

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/85145

The first in a series of workshops dedicated to monitoring, analyzing, and improving the performance of GitLab.

Jannik Lehman: introduction into what and why we measure and monitor
Denys Mishunov: deeper dive into Grafana and Sitespeed reports

No description provided.

The pair programming session from 11/01/2021 on provide/inject pattern in Source Editor extensions architecture

Demonstration of an important aspect in refactoring the Bootstrap CSS utilities into gitlab-ui utility classes.

SPOILER: We can never assume 16px as the default font size on the users' computers

Discussing the PoC for the Inversion of Control architecture for the extensions in Source Editor.

Group level conversation about Source Editor and its architecture

The group discussion about the current and future architecture for the extensions of Source Editor.

In this session, we address adding additional contexts which we'll want to be included during our Startup CSS generation process.

A short recap of Adam Argyle's presentation on Hover Conf 2021!

Original Slides from Adam Argyle: https://2021-hover-conf-new-in-css.netlify.app
Expanded Notes and More: https://gitlab.com/dfosco/hover-conf-2021

You may notice your big pipeline looks a little different on Gitlab and has a callout about feedback! If you’re into learning more about how we got to this new pipeline graph — in 50+ MRs with contributions from 6+ engineers and at least three UXers and two PMs — this is the video for you.
If you are interested in: project planning, deleting code, modernizing in place, GraphQL, observability, or failures, there will be something here for you.

Learn more at https://gitlab.com/gitlab-org/gitlab/-/issues/328538

Debugging frontend production bugs, made easy.

Result MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42885

In this meeting, we talk about Vue components testing best practices.

In this video, I demonstrate a technique of using `vimdiff` and `git show` to compare a file which was deleted and replaced with an existing one.

On this call, we discuss guidelines to review GitLab UI Merge Requests.

The retrospective session dedicated to answering the questions after "Pragmatic Web Performance" workshop at Virtual Contribute 2020

In this video we walk through reviewing Sourcegraph dependency update MR's like https://gitlab.com/gitlab-org/gitlab/-/merge_requests/30257.


**Prerequisites:**
- Install docker
- Configure GDK with network IP's


**Start Sourcegraph:**
- Create directories for Sourcegraph
- Start Sourcegraph https://gitlab.com/pslaughter/dotfiles/-/blob/gitlab/home/.dot/dockers/sourcegraph


**Set up Sourcegraph:**
- Create Sourcegraph admin account
- Set up `externalUrl` in Sourcegraph management console
- Configure Sourcegraph to query GitLab instance
- Configure GitLab with Sourcegraph instance
- Set up Sourcegraph with CORS for GitLab instance


**Use cases:**
- View definition/references from Blob
- View definition/references from Commit
- View definition/references from Merge Request

First iteration of our Frontend Foundation office hours.



Handbook: To be added

Agenda: https://docs.google.com/document/d/1rTkn3ZZEYALgLgrtl8rbMJ0PH2Tw6T2n19t9b3Ebur4

Here's the resulting MR from this session:
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28223


Near the end, we run into a really weird issue where a textarea is not updating like we expect. After hopping off the call, this was fixed. It looks like there was an accidental insertion where we returned `$nextTick` *and* used `done` which caused some timing issues 🤷‍♀️

**Result:**
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27691#pinning-tests

**What's a pinning test?**
https://wiki.c2.com/?PinningTests

It's a "temporary" snapshot test to pin down behavior that gives you confidence in refactoring. The book Working Effectively with Legacy Code explains it best.

**Does GitLab not have good enough test coverage?**
We are committed to good test coverage (at all levels of testing) and improving this every release, but tests can't prove the absence of bugs (only the presence of them). Whether there is or isn't existing test coverage, adding a pinning test (which doesn't take long) can further help us refactor confidently and quickly.

No description provided.

Here's a snippet for the `git review-mb` alias:

- https://gitlab.com/gitlab-org/gitlab/snippets/1936414

We walk through using user callouts in order to create user-dismissable banners in the GitLab UI.

Just showing how to add small commits to tweak an original commit and then at the end fixing them up all without disturbing any other commits in the branch, potentially added by another collaborator (eg Backend).

In this video, we review the design versions dropdown feature. https://gitlab.com/gitlab-org/gitlab-ee/issues/9491 The UI part is already implemented, so we're not touching any templates. Instead, we cover the flow of fetching new data from GraphQL endpoint and incorporate them into design management application.

Chapters:
1. Show GraphiQL explorer
2. Integrate the query
3. Using this query in the Vue component
4. Refactor Design dropdown to fetch data from Apollo cache

For more information about FE Skillsharing, see https://gitlab.com/gitlab-org/frontend/skillsharing