Skip to content

Instantly share code, notes, and snippets.

View jdanyow's full-sized avatar
💭
Confirming my whereabouts

Jeremy Danyow jdanyow

💭
Confirming my whereabouts
View GitHub Profile
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.6.0/dist/index.css" crossorigin="anonymous">
<style>
/* truncation */
.truncate {
display: inline-flex !important;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.6.0/dist/index.css" crossorigin="anonymous">
</head>
<body>
<div class="display-flex align-items-center">
<details class="popover">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous">
<style>
/* debug */
li {
@jdanyow
jdanyow / index.html
Last active December 10, 2021 23:33
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<!--atlas styles-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous">
<!--docs styles-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous">
<style>
/* debug */
li {
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<script type="module">
import { Validator } from 'https://cdn.jsdelivr.net/npm/@cfworker/json-schema@1.9.0/dist/index.js';
const validator = new Validator({ type: 'number' });
let result = validator.validate(1);
document.body.insertAdjacentHTML('beforeend', `<pre><code>${JSON.stringify(result, null, 2)}</code></pre>`);

Architecture to enable docs-ui PR review

Most folks working in docs-ui rely on the ability to test PRs against stable services which match production. These include content services like OPS, docfx, DHS, content-proxy, and learn hierarchy, but also profile, progress, gamification, and others.

For devs working on this type of functionality it would be detrimental to reliability of the product if they were integrating PRs with services which do not match production. In the past there have also been productivity issues when we were developing against PPE versions of services. For example, during learn's early development we had to use the PPE environment's nightly builds of OPS and docfx. When there were bugs in these services the US team was essentially down for the day because we couldn't integrate. With the current team sizes the impact of a down service like auth or content would be significant.

Another set of folks working in docs-ui rely on the ability to test PRs against unstable services which may n

  1. Remove right rail scrollbar. This enables the subsequent experiments and gives us right-rail content that will work on any page, regardless of experiment outcomes. This also gives us what we need for air-gapped environments.

    • Implement new version of "in this article". Shows first N sections, and remaining count.

      N should be a little flexible so that we never end up in a state where it shows less than "and 2 more".

      In this article:
      - Lorem
      
  • Ipsum

docs-ui developer workflows

npm run develop

  1. Developer's browser
  2. Static file hosting using browser-sync, middleware using docfx publish.json files
  3. File system (docfx v3 build output)
flowchart LR
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://design.docs.microsoft.com/index.ed466f8c.css">
</head>
<body>
<div class="columns">
<div class="display-flex"> <!-- put the column size classes here, for example, "is-6-widescreen is-9-desktop" --->