Jira Account

Reach out to Felicity Tarr to get an invite to Jira.

LinkedInLearning

Reach out to get an invite to LinkedInLearning

Please use LinkedInLearning to assist with your professional development.
Message the frontend-engineers Slack channel with the chapters of the videos you found helpful.

Start with these at your convenience

• Learning React.js
  • Chapter 4: React State with Hooks
  • Chapter 5: React Enhancements
• Learning Typescript
• Learning GraphQL

Typescript Trainer

Codemastery.dev is a fantastic way to learn Typescript. I highly recommend visiting and revisiting this trainer.
Disclaimer: The lessons at the end under Toolbelt are unfinished.

Slack

Setup username as lowercase with an underscore between first and last name (e.g. robert_jensen)

Node

Get the latest long-term-support version (e.g. https://nodejs.org/dist/v16.14.0/node-v16.14.0.pkg)

After installing, check the node version with the following:

node -v

If you get a response with a version then it was successfully installed:

v18.16.0

Git

Add this to your git config, which helps withOSX being case insensitive

Github

Zonos org invitation

Reach out to Austin Gray to get an invitation to the Zonos Organization with your personal Github account

You can add your Zonos email as a secondary email to your Github settings.

Frontend team invitation

Reach out to Robert Jensen to get an invitation to the Frontend Team.

Vercel invitation

Reach out to Robert Jensen to get added to the Vercel Zonos team.

Add SSH Key for your Zonos Computer

Angular commit message

We pattern our commit messages after Angular Commit Format Reference Sheet

Github Pull Request Template

We strive to connect all of our changes to Jira issues, so we have a Pull Request Template that should be used for each Pull Request. Our Pull Request Template shows up automatically when opening a new Pull Request.

Frontend Repositories

• Dashboard
• Dashboard account (authentication)
• Amino (UI library)
• Admin
• Admin account (authentication)
• Main site (zonos.com)
• Zonos Docs

SentinalOne

For SOC2 compliance, we set up SentinalOne on our machines

Slack Apps

DX

DX stands for developer experience. We use this App to ask frequent questions so we can gather anonymous feedback to improve our processes and procedures. It is very important to answer these questions and very helpful to respond to others' suggestions.

Google Calendar

This Slack App is a great way to stay punctual for your meetings. It pings you a minute before the meeting starts.

GitHub

The GitHub app is a good alternative to the email notificaiton system that comes with GitHub. The notifications are quite customizable. GitHub - Slack integration

Vercel

Vercel has a CLI which is a convenient way to stay up-to-date with your environment variables:

• Install the Vercel CLI
• pnpm install -g vercel@latest
• Link the current repository
• vercel link
• Download environment variables
• vercel env pull vercel.env

It is recommended to pull to a separate file to not lose our current .env. That is the 4th argument in the above command, which will create a file called vercel.env that you can then verify and replace yours with.

Figma

Submit an Access Request to access the Zonos Figma team to view designs.

VS Code Extensions

• env-cmd-file-syntax → Nixon.env-cmd-file-syntax
• ESLint → dbaeumer.vscode-eslint
• GraphQL → GraphQL.vscode-graphql
• Paste JSON as Code → quicktype.quicktype
• Prettier → esbenp.prettier-vscode
• Sort lines → Tyriar.sort-lines
• vscode-styled-components → styled-components.vscode-styled-components
• package import sizes → wix.vscode-import-cost

VS Code Settings

Open Settings.json

Shift + CMD + p. Type settings. Click on preferences: open settings(JSON)

Auto-sorting imports

We have a pretty cool setup for sorting our imports using simple-import-sort but it requires adding the following to VS Code's settings.json

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Format on save

We have some pretty strict linting rules alongside prettier to keep our codebase styled consistently. I recommend adding the following to your settings.json which makes it so you can just save the file to auto-format:

"[json]": {
  "editor.defaultFormatter": esbenp.prettier-vscode
},
"editor.formatOnSave": true,

VS Code Serverless API debugging

Nextjs comes with a pretty cool serverless API setup found in src/pages/api. To debug these routes you need to add the following configuration to your .vscode/launch.json

{
  "version": 0.2.0,
  "configurations": [
    {
      "type": node,
      "request": attach ,
      "skipFiles": [<node_internals>/**'],
      "port": 9229
    }
  ]
}

After adding this configuration, you can debug your serverless API by clicking:

Run and Debug (shift + CMD + d) and then Attach to application.

Focus Friday

We try not to schedule meetings of Friday to allow the engineers to get some heads-down time.

API Docs

Swagger UI - You need the zonos cookie for it to load correctly, which can be obtained by logging in to dashboard (prod).

Test Stores

• 1327 - testing shipping rates
• 2458 - testing quoter

Mock checkout

Use credit card number 1111 8888 4444 2222. Might need to add URL param &test=1842 at end.

Domain naming and branching strategy

Example base URL: dashboard.zonos.com

Please use qa.dashboard.zonos.com for all purposes instead of the production domain so that we can have a better QA process.

Releases

Release Cycle

• Dashboard - We try to release dashboard once a week early in the week

Dashboard Process

1. Checkout main and pull the latest (make sure all branches are up to date in general, but only qa and main matter)
2. Checkout a new branch. We use the syntax build/release-<VERSION>.
   So for version 3.2.45, it would be build/release-3.2.45.
   This new version will be one high (usually patch) than what is currently in main.
   You can check the package.json or the last release in GitHub if you are unsure.
3. Pull the latest changes from qa into your release branch.
   git pull origin qa works best as it pulls from the remote which is always up to date.
4. Run the version script using the package manager(pnpm or pnpm). e.g. pnpm version:patch.
   This will automatically tag and push to GitHub.
5. Go to GitHub and go to the releases page for dashboard. Select draft a new release in the top right.
6. Choose the tag of the version you just pushed.
7. Click "Generate release notes." Copy the description for use later in teh PR. Now click "Publish release".
8. Create a new PR from your version branch to main.
   The default is qa so make sure to switch the base.
   Paste the generated notes in the description and aggressively ping your coworkers to review it.

Scrum descriptions

Building off the definition of an Agile story, story points are metrics used in Agile product development and management to guess how difficult it will be to implement a user story. Put another way, it's a numeric value that helps the development team understand how challenging the story is.

Story points in Agile are abstract measurements that developers use instead of hours. Points are relative values, so a story with a value of four is twice as hard as a story with a value of two. The actual numbers don't matter — you could assign values between 1,000,000 and 5,000,000 if you want. Instead, you want to give the team an idea of the story's relative difficulty. Story points tell you how much effort a given story will take to resolve.

At Zonos, we have been using the Fibonacci Sequence (1, 2, 3, 5, 8, 13, 21) to assign our story points.

What is a Spike?

A way team members can research and get familiar with new software.