Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions .devcontainer/Dockerfile
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/blob/v0.202.3/containers/python-3/.devcontainer/base.Dockerfile
# [Choice] Python version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.9, 3.8, 3.7, 3.6, 3-bullseye, 3.9-bullseye, 3.8-bullseye, 3.7-bullseye, 3.6-bullseye, 3-buster, 3.9-buster, 3.8-buster, 3.7-buster, 3.6-buster
# See here for image contents: https://github.com/devcontainers/images/tree/main/src/python
# [Choice] Python version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.9, 3.8, 3.7, 3.6, 3-bullseye, 3.9-bullseye, 3.8-bullseye, 3.7-bullseye, 3.6-bullseye
ARG VARIANT=3-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}
FROM mcr.microsoft.com/devcontainers/python:1-${VARIANT}

# Remove stale Yarn apt repository that has an expired GPG key and causes apt-get update failures
RUN rm -f /etc/apt/sources.list.d/yarn.list /etc/apt/sources.list.d/yarn.list.save

# [Optional] Allow the vscode user to pip install globally w/o sudo
ENV PIP_TARGET=/usr/local/pip-global
Expand Down
9 changes: 9 additions & 0 deletions .devcontainer/devcontainer-lock.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {
"version": "2.17.0",
"resolved": "ghcr.io/devcontainers/features/docker-in-docker@sha256:25b9f05705ffba7dbe503230ac76081419306f8c8bc88e0ce78c4ecd99a0c78c",
"integrity": "sha256:25b9f05705ffba7dbe503230ac76081419306f8c8bc88e0ce78c4ecd99a0c78c"
}
}
}
62 changes: 35 additions & 27 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,41 @@
}
},

// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.profiles.linux": {
"bash": {
"path": "/bin/bash"
}
},
"python.defaultInterpreterPath": "/usr/local/bin/python",
"python.languageServer": "Default",
"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
// Features to add to the dev container.
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
},

// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"ms-python.python",
"ms-python.vscode-pylance"
],
"customizations": {
"vscode": {
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.profiles.linux": {
"bash": {
"path": "/bin/bash"
}
},
"python.defaultInterpreterPath": "/usr/local/bin/python",
"python.languageServer": "Default",
"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
},
"extensions": [
"ms-python.python",
"ms-python.vscode-pylance",
"ms-azuretools.vscode-docker"
]
}
},

// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [8000],
Expand All @@ -60,12 +68,12 @@
// },

// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip3 install -r requirements-docs.txt",
"postCreateCommand": "pip3 install -r requirements-docs.txt && chmod +x .devcontainer/run-megalinter.sh",

// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "vscode",

"mounts": [
"source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/vscode/.ssh,type=bind"
],
]
}
21 changes: 21 additions & 0 deletions .devcontainer/run-megalinter.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
#!/usr/bin/env bash
# Run MegaLinter locally from the devcontainer — mirrors the CI setup in
# .github/workflows/mega-linter.yml and config in .mega-linter.yml.
#
# Usage:
# .devcontainer/run-megalinter.sh # lint only changed files
# VALIDATE_ALL_CODEBASE=true .devcontainer/run-megalinter.sh # lint everything
#
# Reports are written to ./megalinter-reports/ in the repo root.
set -euo pipefail

REPO_ROOT="$(git rev-parse --show-toplevel)"
VALIDATE_ALL="${VALIDATE_ALL_CODEBASE:-false}"

echo "Running MegaLinter (VALIDATE_ALL_CODEBASE=${VALIDATE_ALL})..."
docker run --rm \
-v "${REPO_ROOT}:/tmp/lint" \
-w /tmp/lint \
-e VALIDATE_ALL_CODEBASE="${VALIDATE_ALL}" \
-e DEFAULT_BRANCH=main \
oxsecurity/megalinter:v8.1.0
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -345,3 +345,6 @@ _site
site/
mkdocs/
megalinter-reports/

# Copilot project tracking
.copilot-tracking/
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ items:
The process for design reviews should be documented and available
to the whole team from the outset of the project. This story is to
explicitly document that process in the team's [working
agreement](https://microsoft.github.io/code-with-engineering-playbook/agile-development/team-agreements/working-agreements/readme/)
agreement](https://microsoft.github.io/code-with-engineering-playbook/agile-development/team-agreements/working-agreements/)
acceptanceCriteria:
- Design review process is well-documented within the working
agreement
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ If you are unsure if your content will match this playbook, you are welcome to c
## General guidance

- Quality is more important than quantity
- Write in a way that you would want someone else to explain something to you. Use [`plain english`](http://www.plainenglish.co.uk/how-to-write-in-plain-english.html)
- Write in a way that you would want someone else to explain something to you. Use [`plain english`](https://www.plainenglish.co.uk/)
- Be friendly, technical, professional and concise
- Communicate as engineers, not marketing; we want to share what we learned, not "sell" our ideas
- Don't recreate introductory content, link to it
Expand Down
2 changes: 1 addition & 1 deletion docs/CI-CD/continuous-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ In the spirit of transparency and embracing frequent communication across a dev
### Everyone Commits to the Git Repository Each Day

- End of day checked-in code should contain unit tests at the minimum.
- Run the build locally before checking in to avoid CI pipeline failure saturation. You should verify what caused the error, and try to solve it as soon as possible instead of committing your code. We encourage developers to follow a [lean SDLC principles](https://leankit.com/learn/lean/principles-of-lean-development/).
- Run the build locally before checking in to avoid CI pipeline failure saturation. You should verify what caused the error, and try to solve it as soon as possible instead of committing your code. We encourage developers to follow a [lean SDLC principles](https://en.wikipedia.org/wiki/Lean_software_development).
- Isolate work into small chunks which ties directly to business value and refactor incrementally.

## Isolated Environments
Expand Down
18 changes: 9 additions & 9 deletions docs/UI-UX/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Design Ops, short for Design Operations, is a practice that focuses on optimizin
- Creating and maintaining a design system that includes reusable components, style guides, and design tokens.
- Promoting consistency and efficiency by using shared design assets.
- For most projects within ISE we use [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/webcomponents) to handle most projects, this enables rapid development that allow for web application re-use on non-customer engagements or _white label_ applications.
- Other Design Systems used by customers include: [Google's Material Design](https://mui.com/material-ui/),
- Other Design Systems used by customers include: [Google's Material Design](https://mui.com/material-ui/),

4. **Documentation**:
- Documenting design decisions, guidelines, and best practices.
Expand All @@ -77,7 +77,7 @@ Design Ops, short for Design Operations, is a practice that focuses on optimizin
6. **Metrics and KPIs**:
- Defining key performance indicators (KPIs) to measure the effectiveness of design processes.
- Using metrics to identify areas for improvement and track progress over time.
- __For long-term projects:__ Incorporate _A/B testing_ for better user experiences, and enhancements to the solution.
- **For long-term projects:** Incorporate _A/B testing_ for better user experiences, and enhancements to the solution.

### Benefits of Design Ops for Software Engineers and Product Owners

Expand All @@ -90,19 +90,19 @@ By integrating Design Ops into the development process, software engineers can w

## Establishing a web application's architecture

The benefit of building software applications is that there are truly infinite ways to build something. A team can use the latest shiny tools, or they can utilize the tried-and-tested ones. It is for this reason that focussing completely on the user until a solution is defined is better than obsessing over technology choices.
The benefit of building software applications is that there are truly infinite ways to build something. A team can use the latest shiny tools, or they can utilize the tried-and-tested ones. It is for this reason that focussing completely on the user until a solution is defined is better than obsessing over technology choices.

When choosing a front-end framework or library, consider the project's complexity, performance, and scalability needs. Evaluate the team's expertise with potential options to ensure efficient development. Assess long-term maintainability and community support. Conduct [Trade Studies](./../design/design-reviews/trade-studies/README.md) to weigh pros and cons, focusing on alignment with project goals and user experience. This thorough analysis helps balance innovation with practicality.


### Some platforms/frameworks to consider when planning a project:
### Some platforms/frameworks to consider when planning a project

1. HTML/CSS/JavaScript
- Back to the basics! Start with a single **index.html**, include a popular CSS framework such as [Bootstrap](https://getbootstrap.com/) using their CDN link, and start prototyping!
- Rarely will you have to support legacy browsers; thus, you can rely on modern JavaScript language features! No need for build tools or even TypeScript (did you know you can [type check JavaScript](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html)).
- For static _vanilla_ websites like this; we still recommend a build system like [Vite](https://vitejs.dev/) to build and manage assets for deployment.
- For static _vanilla_ websites like this; we still recommend a build system like [Vite](https://vite.dev/) to build and manage assets for deployment.
1. React
- [React](https://reactjs.org/) allows for the creation of reusable UI components, and is used for most projects in ISE.
- [React](https://react.dev/) allows for the creation of reusable UI components, and is used for most projects in ISE.
- Ideal for projects that require a dynamic and responsive user interface.
- Works well with a variety of state management libraries like Redux or Context API.
- Has a massive 3rd party library support.
Expand All @@ -112,7 +112,7 @@ When choosing a front-end framework or library, consider the project's complexit
- A robust framework for building client-side applications. [Angular](https://angular.dev/) provides a comprehensive solution with built-in features like dependency injection, routing, and state management.
- Ideal for large-scale applications where maintainability and scalability are crucial.
- Better Unit Testing support out of the box than React.
- __Angular has no support for Fluent UI, and has tight integration with Google Cloud Platform.__
- **Angular has no support for Fluent UI, and has tight integration with Google Cloud Platform.**
1. Blazor
- A framework for building interactive web UIs using C# instead of JavaScript. [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) allows you to share code between the client and server.
- Great for teams already familiar with the .NET ecosystem.
Expand All @@ -125,7 +125,7 @@ When choosing a front-end framework or library, consider the project's complexit
- A React-based framework that enables server-side rendering and static site generation. [Next.js](https://nextjs.org/) improves performance and SEO.
- Great for building fast, scalable web applications with a focus on developer experience.
- Provides built-in support for API routes, making it easier to build full-stack applications.
- __Recommended by Meta going forward rather than use create-react-app.__
- **Recommended by Meta going forward rather than use create-react-app.**
- Next.js is very heavy in terms of features, and it doesn't allow for re-use in non-Next.js applications like create-react-app, React-Native, or Electron based apps.
1. Svelte
- [Svelte](https://svelte.dev/) is a modern framework that shifts much of the work to compile time, resulting in highly optimized and performant applications.
Expand All @@ -146,5 +146,5 @@ When choosing a front-end framework or library, consider the project's complexit
### Further information

> For more information of utilizing any of these frameworks/platforms, read the [Recommended Technologies](./recommended-technologies.md) document.
>
>
> Continue reading the [Trade Study](./../design/design-reviews/trade-studies/README.md) section of this site for more information on completing this step in the design process.
Loading
Loading