Skip to content

Commit

Permalink
Wordpress Posts Update
Browse files Browse the repository at this point in the history
  • Loading branch information
odiengineering committed Dec 6, 2023
1 parent 49c1d6a commit b11f0e4
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 35 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"meta": {
"created_date": "2021-12-21T21:02:50",
"updated_date": "2022-03-28T22:26:33",
"updated_date": "2023-12-06T18:45:40",
"field_reference": "https://developer.wordpress.org/rest-api/reference/posts/",
"api_version": "v2",
"api_url": "https://live-digital-ca-gov.pantheonsite.io/wp-json/wp/v2/",
Expand All @@ -18,15 +18,15 @@
"date": "2021-12-21T13:02:50",
"date_gmt": "2021-12-21T21:02:50",
"guid": "https://live-digital-ca-gov.pantheonsite.io/?p=152",
"modified": "2022-03-28T15:26:33",
"modified_gmt": "2022-03-28T22:26:33",
"modified": "2023-12-06T10:45:40",
"modified_gmt": "2023-12-06T18:45:40",
"slug": "increasing-access-to-the-emergency-broadband-benefit-by-listening-to-californians",
"status": "publish",
"type": "post",
"link": "https://live-digital-ca-gov.pantheonsite.io/2021/12/21/increasing-access-to-the-emergency-broadband-benefit-by-listening-to-californians/",
"title": "Increasing access to the Emergency Broadband Benefit by listening to Californians",
"excerpt": "<p>The California ODI team wanted to better understand the specific pain points and blockers that might prevent eligible Californians from successfully applying for the Emergency Broadband Benefit.</p>\n",
"author": "Jim Bumgardner",
"author": "Aaron Hans",
"featured_media": 168,
"comment_status": "closed",
"ping_status": "closed",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"meta": {
"created_date": "2021-07-21T16:26:43",
"updated_date": "2021-07-22T17:53:41",
"updated_date": "2023-12-06T18:45:50",
"field_reference": "https://developer.wordpress.org/rest-api/reference/posts/",
"api_version": "v2",
"api_url": "https://live-digital-ca-gov.pantheonsite.io/wp-json/wp/v2/",
Expand All @@ -18,15 +18,15 @@
"date": "2021-07-21T09:26:43",
"date_gmt": "2021-07-21T16:26:43",
"guid": "https://live-digital-ca-gov.pantheonsite.io/?p=59",
"modified": "2021-07-22T10:53:41",
"modified_gmt": "2021-07-22T17:53:41",
"modified": "2023-12-06T10:45:50",
"modified_gmt": "2023-12-06T18:45:50",
"slug": "introducing-the-new-ca-cannabis-website",
"status": "publish",
"type": "post",
"link": "https://live-digital-ca-gov.pantheonsite.io/2021/07/21/introducing-the-new-ca-cannabis-website/",
"title": "Introducing the new CA Cannabis website",
"excerpt": "<p>We’re proud to have led the months-long collaboration to build the Cannabis.ca.gov site. </p>\n",
"author": "Jim Bumgardner",
"author": "Aaron Hans",
"featured_media": 41,
"comment_status": "closed",
"ping_status": "open",
Expand All @@ -36,7 +36,9 @@
"meta": {
"footnotes": ""
},
"categories": [],
"categories": [
"Uncategorized"
],
"tags": [
"Bureau of Cannabis Control",
"CA.gov",
Expand Down Expand Up @@ -83,7 +85,24 @@
"twitter_title": "Introducing the new CA Cannabis website",
"twitter_description": "We’re proud to have led the months-long collaboration to build the Cannabis.ca.gov site. "
},
"headless_categories": [],
"headless_categories": [
{
"term_id": 1,
"name": "Uncategorized",
"slug": "uncategorized",
"term_group": 0,
"term_taxonomy_id": 1,
"taxonomy": "category",
"description": "",
"parent": 0,
"filter": "raw",
"cat_ID": 1,
"category_description": "",
"cat_name": "Uncategorized",
"category_nicename": "uncategorized",
"category_parent": 0
}
],
"headless_tags": [
{
"term_id": 17,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,11 @@ <h2 class="wp-block-heading">Focus on documentation</h2>

<p>We use the README markdown content for both:</p>

<ul><li>The content on the <a rel="noreferrer noopener" href="https://designsystem.webstandards.ca.gov/components/feature-card/readme/" target="_blank">component’s detail page on the Design System website</a></li><li>Its <a href="https://www.npmjs.com/package/@cagov/ds-feature-card">package homepage on npm</a></li></ul>
<ul>
<li>The content on the <a rel="noreferrer noopener" href="https://designsystem.webstandards.ca.gov/components/feature-card/readme/" target="_blank">component’s detail page on the Design System website</a></li>

<li>Its <a href="https://www.npmjs.com/package/@cagov/ds-feature-card">package homepage on npm</a></li>
</ul>

<h2 class="wp-block-heading">Accessibility testing</h2>

Expand All @@ -67,7 +71,31 @@ <h2 class="wp-block-heading">Accessibility testing</h2>

<p>Our <a href="https://designsystem.webstandards.ca.gov/components/#component-maturity">component maturity model</a> describes how we ensure each component is accessible. The automated steps run during each commit to the Design System repository. Our accessibility verification process for each component includes:</p>

<ul><li>Testing with the <a href="https://www.deque.com/axe/">axe</a> accessibility tool and passes all automated AA level checks</li><li>Reviewing with the <a href="https://www.apple.com/voiceover/info/guide/_1121.html">VoiceOver screen reader</a> on desktop</li><li>Reviewing with the <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en">TalkBack screen reader</a> on mobile</li><li>Verifying you can reach all all actionable elements via keyboard commands only</li><li>Reviewing the component layout on a variety of screen sizes</li><li>Reviewing the component display using content in:<ul><li>English</li><li>Spanish</li><li>Simplified Chinese</li><li>German</li><li>Arabic (using right to left display)</li></ul></li></ul>
<ul>
<li>Testing with the <a href="https://www.deque.com/axe/">axe</a> accessibility tool and passes all automated AA level checks</li>

<li>Reviewing with the <a href="https://www.apple.com/voiceover/info/guide/_1121.html">VoiceOver screen reader</a> on desktop</li>

<li>Reviewing with the <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en">TalkBack screen reader</a> on mobile</li>

<li>Verifying you can reach all all actionable elements via keyboard commands only</li>

<li>Reviewing the component layout on a variety of screen sizes</li>

<li>Reviewing the component display using content in:
<ul>
<li>English</li>

<li>Spanish</li>

<li>Simplified Chinese</li>

<li>German</li>

<li>Arabic (using right to left display)</li>
</ul>
</li>
</ul>

<h2 class="wp-block-heading">Individual component management</h2>

Expand All @@ -87,7 +115,13 @@ <h2 class="wp-block-heading">User-driven development</h2>

<p>Outside thoughts help us improve the usability of Design System components. We’ve learned from state digital teams:</p>

<ul><li>How they manage their services</li><li>What web components they use</li><li>How the Design System can best support them</li></ul>
<ul>
<li>How they manage their services</li>

<li>What web components they use</li>

<li>How the Design System can best support them</li>
</ul>

<p>We regularly glean insights from the staff attending Digital Web Services Network meetings. For example, we learned recently that teams need to be able to customize components.&nbsp;</p>

Expand All @@ -99,11 +133,27 @@ <h2 class="wp-block-heading">Publicizing component maturity</h2>

<p>This clearly flags early versions of components as not yet fully baked. This gives us the freedom to use an iterative development process where we:</p>

<ol><li>Ship versions of components on real sites</li><li>Do user testing</li><li>Gather feedback from developers</li><li>Improve components based on what we learned</li></ol>
<ol>
<li>Ship versions of components on real sites</li>

<li>Do user testing</li>

<li>Gather feedback from developers</li>

<li>Improve components based on what we learned</li>
</ol>

<p>Our promotion requirements are strict, especially in the later stages. If we make radical changes to a component we might even move it backwards on the maturity scale. This gives developers confidence that mature components are fully vetted for:</p>

<ul><li>Accessibility</li><li>User experience</li><li>Performance</li><li>Ease of use</li></ul>
<ul>
<li>Accessibility</li>

<li>User experience</li>

<li>Performance</li>

<li>Ease of use</li>
</ul>

<p>The entire Design System is still in Beta status (though many components are still in Alpha). We’re still gathering more feedback from people and improving these tools.</p>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"meta": {
"created_date": "2022-05-31T17:25:07",
"updated_date": "2022-06-01T16:08:39",
"updated_date": "2023-12-06T18:45:15",
"field_reference": "https://developer.wordpress.org/rest-api/reference/posts/",
"api_version": "v2",
"api_url": "https://live-digital-ca-gov.pantheonsite.io/wp-json/wp/v2/",
Expand All @@ -18,15 +18,15 @@
"date": "2022-05-31T10:25:07",
"date_gmt": "2022-05-31T17:25:07",
"guid": "https://live-digital-ca-gov.pantheonsite.io/?p=513",
"modified": "2022-06-01T09:08:39",
"modified_gmt": "2022-06-01T16:08:39",
"modified": "2023-12-06T10:45:15",
"modified_gmt": "2023-12-06T18:45:15",
"slug": "tech-choices-in-the-california-design-system",
"status": "publish",
"type": "post",
"link": "https://live-digital-ca-gov.pantheonsite.io/2022/05/31/tech-choices-in-the-california-design-system/",
"title": "Tech choices in the California Design System",
"excerpt": "<p>Learn about the decisions we made (and why we made them) in putting the Design System together.</p>\n",
"author": "Jim Bumgardner",
"author": "Aaron Hans",
"featured_media": 557,
"comment_status": "closed",
"ping_status": "closed",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,27 +1,40 @@
<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="876" height="584" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open.png" alt="" class="wp-image-476" srcset="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open.png 876w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-576x384.png 576w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-768x512.png 768w" sizes="(max-width: 876px) 100vw, 876px" /></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="876" height="584" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open.png" alt="" class="wp-image-476" srcset="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open.png 876w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-576x384.png 576w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-768x512.png 768w" sizes="(max-width: 876px) 100vw, 876px" /></figure></div>
<p>We work in the open! This means that:</p>

<ul><li>You can see just about everything we are doing.</li><li>You can influence our projects.</li></ul>
<ul>
<li>You can see just about everything we are doing.</li>

<li>You can influence our projects.</li>
</ul>

<h2 class="wp-block-heading">Why we work in the open</h2>

<p>From the start, the Office of Digital Innovation (ODI) has made working in the open a core value. We often cite the motto “default to open.” There are tons of benefits to defaulting to open. From an engineering perspective it encourages:</p>

<ul><li>Code hygiene</li><li>Standards definition and compliance (because our work history is visible to everybody)</li></ul>
<ul>
<li>Code hygiene</li>

<li>Standards definition and compliance (because our work history is visible to everybody)</li>
</ul>

<p>It also allows us to work seamlessly with anybody interested in our work. This includes state employees as well as supporters outside the government. We’ve accepted external contributions in several of our projects, including:</p>

<ul><li><a href="https://alpha.ca.gov">Alpha</a></li><li><a href="https://covid19.ca.gov">covid19.ca.gov</a></li><li><a href="https://designsystem.webstandards.ca.gov">California Design System</a></li></ul>
<ul>
<li><a href="https://alpha.ca.gov">Alpha</a></li>

<li><a href="https://covid19.ca.gov">covid19.ca.gov</a></li>

<li><a href="https://designsystem.webstandards.ca.gov">California Design System</a></li>
</ul>

<h2 class="wp-block-heading">A recent collaboration</h2>

<p>Here’s an example of how a state employee contributed to the California Design System. Kurtis Kroon from the Franchise Tax Board reviewed the code of the <a href="https://designsystem.webstandards.ca.gov/components/accordion/readme/">accordion component</a> and suggested we use the <code>&lt;details&gt;</code> element to simplify.</p>

<p>This was a great idea. It required a full component rewrite. We collaborated with other teams by sharing codepens. Here’s an early version:</p>

<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="787" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1024x787.png" alt="" class="wp-image-478" srcset="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1024x787.png 1024w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-576x443.png 576w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-768x590.png 768w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1536x1181.png 1536w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration.png 1954w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="787" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1024x787.png" alt="" class="wp-image-478" srcset="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1024x787.png 1024w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-576x443.png 576w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-768x590.png 768w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration-1536x1181.png 1536w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-collaboration.png 1954w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></div>
<p>The result was a big improvement on the component’s progressive enhancement. Now if all JavaScript on the page fails, the accordion will look different but function the same. This version lets the browser handle the open and close. This change simplified the component’s markup:</p>

<figure class="wp-block-table"><table><thead><tr><th class="has-text-align-center" data-align="center"><strong>Before</strong></th><th class="has-text-align-center" data-align="center">After</th></tr></thead><tbody><tr><td class="has-text-align-center" data-align="center"><p class="cagov-reponsive-note">Before</p><img decoding="async" loading="lazy" width="410" height="1426" class="wp-image-482" style="width: 410px;" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-code-before.png" alt="The code for the accordion component. It's long, about 75 lines." srcset="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-code-before.png 410w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-code-before-166x576.png 166w, https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-code-before-294x1024.png 294w" sizes="(max-width: 410px) 100vw, 410px" /></td><td class="has-text-align-center" data-align="center"><p class="cagov-reponsive-note">After</p><img decoding="async" loading="lazy" width="520" height="290" class="wp-image-483" style="width: 520px;" src="https://live-digital-ca-gov.pantheonsite.io/wp-content/uploads/2022/05/working-in-open-code-after.png" alt="The revised accordion component code. It's short, 11 lines long."></td></tr></tbody></table></figure>
Expand All @@ -36,19 +49,43 @@ <h2 class="wp-block-heading">Chipping in with pull requests</h2>

<p>We’re happy to work with any potential contributors, even if it’s not part of a course! The California Design System is still new and needs all kinds of expertise. It doesn’t even have to be help with code. We can use help with:</p>

<ul><li>Documentation</li><li>Design</li><li>User testing</li></ul>
<ul>
<li>Documentation</li>

<li>Design</li>

<li>User testing</li>
</ul>

<p>The collaboration has been fruitful. These students get real world experience contributing to an open source project. The state gets:</p>

<ul><li>Working code</li><li>Better documentation</li><li>A fresh perspective on our project from sharp coders outside of government</li></ul>
<ul>
<li>Working code</li>

<li>Better documentation</li>

<li>A fresh perspective on our project from sharp coders outside of government</li>
</ul>

<p>We’re really impressed with these folks. They’ve all:</p>

<ul><li>Made significant contributions to the project</li><li>Met with us to get guidelines on code, design, and accessibility</li><li>Provided weekly update summaries on all their activity</li></ul>
<ul>
<li>Made significant contributions to the project</li>

<li>Met with us to get guidelines on code, design, and accessibility</li>

<li>Provided weekly update summaries on all their activity</li>
</ul>

<p>Check out the GitHub profiles for:</p>

<ul><li><a href="https://github.com/saldanaj27">Javi</a></li><li><a href="https://github.com/jayliquek">Jayli</a></li><li><a href="https://github.com/alexhu00">Alex</a></li></ul>
<ul>
<li><a href="https://github.com/saldanaj27">Javi</a></li>

<li><a href="https://github.com/jayliquek">Jayli</a></li>

<li><a href="https://github.com/alexhu00">Alex</a></li>
</ul>

<p>Here’s some of their work on the Design System:</p>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"meta": {
"created_date": "2022-05-19T16:38:16",
"updated_date": "2022-05-19T19:54:09",
"updated_date": "2023-12-06T18:45:28",
"field_reference": "https://developer.wordpress.org/rest-api/reference/posts/",
"api_version": "v2",
"api_url": "https://live-digital-ca-gov.pantheonsite.io/wp-json/wp/v2/",
Expand All @@ -18,15 +18,15 @@
"date": "2022-05-19T09:38:16",
"date_gmt": "2022-05-19T16:38:16",
"guid": "https://live-digital-ca-gov.pantheonsite.io/?p=474",
"modified": "2022-05-19T12:54:09",
"modified_gmt": "2022-05-19T19:54:09",
"modified": "2023-12-06T10:45:28",
"modified_gmt": "2023-12-06T18:45:28",
"slug": "working-in-the-open-on-the-california-design-system",
"status": "publish",
"type": "post",
"link": "https://live-digital-ca-gov.pantheonsite.io/2022/05/19/working-in-the-open-on-the-california-design-system/",
"title": "Working in the open on the California Design System",
"excerpt": "<p>Working in the open is important to us. Here&#8217;s what that looks like in our work on the California Design System.</p>\n",
"author": "Jim Bumgardner",
"author": "Aaron Hans",
"featured_media": 504,
"comment_status": "closed",
"ping_status": "closed",
Expand Down

0 comments on commit b11f0e4

Please sign in to comment.