{{ page.title }}
{{ page.lead }}
{% endif %} {% if page.image %} -
- {% assign agency = agencies | where: "name", project.data.agency | first %}
- {% if agency.logo %}
- 
- {% endif %}
-
- {% endif %}
- {% if project.url and project.data.title %}
-
-
- {% endif %}
- {{ agency.name }}
-{{ project.data.title }}
- +
+ {% assign agency = agencies | where: "name", project.data.agency | first %}
+ {% if agency.logo %}
+ {% image_with_class agency.logo "maxw-8 margin-right-2" "" %}
{% endif %}
-
-
-
diff --git a/_includes/card-with-image-guides.html b/_includes/card-with-image-guides.html
index 7a81ff00f..451efe3e2 100644
--- a/_includes/card-with-image-guides.html
+++ b/_includes/card-with-image-guides.html
@@ -48,18 +48,15 @@
{% if hero_url %}
-
+{% endif %}
+{% if project.url and project.data.title %}
+
+ {{ project.data.excerpt }}
+{{ agency.name }}
{{ project.data.title }}
+ +{% endif %} + +
+
{{ project.data.excerpt }}
+
- 
+ {% image_with_class hero_url "flex-align-self-center maxh-card-lg" "" %}
{% endif %}
-
+ {% capture image_class %}{%- if image_size == "md" -%}maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}{% endcapture %}
{% capture card_image %}
- 
+ {% image_with_class image_path image_class image_alt_text %}
{% endcapture %}
{% capture card_text %}
diff --git a/_includes/card-with-image.html b/_includes/card-with-image.html
index a3b87d9b8..f43956105 100644
--- a/_includes/card-with-image.html
+++ b/_includes/card-with-image.html
@@ -34,11 +34,9 @@
>
@@ -58,29 +58,29 @@
+ {% capture image_class %}{%- if image_size == "md" -%} maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}{% endcapture %}
{% capture card_image %}
- 
+ {% image_with_class image_path image_class image_alt_text %}
{% endcapture %}
{% capture card_text %}
diff --git a/_includes/graphic-block.html b/_includes/graphic-block.html
index c9f172ec5..b3882e635 100644
--- a/_includes/graphic-block.html
+++ b/_includes/graphic-block.html
@@ -1,9 +1,6 @@
{{ content }}
-{% if page.banner_cta %}
+{% if banner_cta %}
{% include "banner-cta.html" %}
{% endif %}
diff --git a/_includes/layouts/post.html b/_includes/layouts/post.html
index 67f88bf92..8bfad9869 100644
--- a/_includes/layouts/post.html
+++ b/_includes/layouts/post.html
@@ -31,7 +31,7 @@
+ {% image_with_class item.image.light "maxw-3 margin-right-2 text-sub" "" %}
{%- unless item.platform == "RSS feed" -%}18F on {% endunless %}{{ item.platform }}
diff --git a/_sass/_components/blog.scss b/_sass/_components/blog.scss
index 38c37c215..377d3c422 100644
--- a/_sass/_components/blog.scss
+++ b/_sass/_components/blog.scss
@@ -100,3 +100,14 @@
text-align: right;
}
}
+
+.tile-strip {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: space-between;
+ margin-bottom: units(6);
+}
+.tile-strip img {
+ max-height: 67px;
+}
\ No newline at end of file
diff --git a/_sass/_components/utilities.scss b/_sass/_components/utilities.scss
index c55e38f98..45a7a2397 100644
--- a/_sass/_components/utilities.scss
+++ b/_sass/_components/utilities.scss
@@ -69,3 +69,50 @@
text-indent: units(-2);
}
+.width-500px {
+ width: 500px;
+}
+
+.width-400px {
+ width: 400px;
+}
+
+.width-380px {
+ width: 380px;
+}
+
+.width-300px {
+ width: 300px;
+}
+
+.width-210px {
+ width: 210px;
+}
+
+.width-200px {
+ width: 200px;
+}
+
+.width-140px {
+ width: 140px;
+}
+
+.width-80px {
+ width: 80px;
+}
+
+.image-open-source-blog {
+ width: 624.00px;
+ height: 468.00px;
+ margin-left: 0.00px;
+ margin-top: 0.00px;
+ transform: rotate(0.00rad) translateZ(0px);
+ -webkit-transform: rotate(0.00rad) translateZ(0px);
+}
+
+.image-conversation-with-Kurz {
+ float: right;
+ margin-left: 10px;
+ margin-bottom: 10px;
+ width: 300px;
+}
diff --git a/content/pages/home.html b/content/pages/home.html
index 4f454d355..1dc46eca7 100644
--- a/content/pages/home.html
+++ b/content/pages/home.html
@@ -23,7 +23,7 @@
-
-
diff --git a/_includes/layouts/guides.html b/_includes/layouts/guides.html
index 1d27b4348..cc7237eb0 100644
--- a/_includes/layouts/guides.html
+++ b/_includes/layouts/guides.html
@@ -4,26 +4,23 @@
class: 'primary-layout'
---
-{% assign page_title = page.subnav_title | default: page.title %}
+{% assign page_title = subnav_title | default: title %}
+ {% image_with_class image_path "width-full" image_alt_text %} +
{{ body_text }}
- 
+ {% if image %}
+ {% image_with_class image "margin-top-4" image_alt_text %}
{% endif %}
{{ page.title }}
- {% if page.lead %} -{{ page.lead }}
+{{ title }}
+ {% if lead %} +{{ lead }}
{% endif %} - {% if page.image %} -{{ title }}
{% if page.image and page.image_feature_small %}
-
+ {% image_with_class page.image "image-feature-small" page.image_accessibility %}
{% endif %}
{{ content }}
diff --git a/_includes/layouts/primary.html b/_includes/layouts/primary.html
index e50f0a2f2..2cb36f0ea 100644
--- a/_includes/layouts/primary.html
+++ b/_includes/layouts/primary.html
@@ -13,10 +13,7 @@
+ {% image_with_class page.image "margin-top-4" page.image_alt_text %}
{% endif %}
diff --git a/_includes/social-media.html b/_includes/social-media.html
index 7cf5c0fb7..46c1b9631 100644
--- a/_includes/social-media.html
+++ b/_includes/social-media.html
@@ -6,9 +6,7 @@ Follow 18F
-
+ {% image_with_class item.image.light "maxw-3 margin-right-2 text-sub" "" %}
{%- unless item.platform == "RSS feed" -%}18F on {% endunless %}{{ item.platform }}
diff --git a/_sass/_components/blog.scss b/_sass/_components/blog.scss
index 38c37c215..377d3c422 100644
--- a/_sass/_components/blog.scss
+++ b/_sass/_components/blog.scss
@@ -100,3 +100,14 @@
text-align: right;
}
}
+
+.tile-strip {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: space-between;
+ margin-bottom: units(6);
+}
+.tile-strip img {
+ max-height: 67px;
+}
\ No newline at end of file
diff --git a/_sass/_components/utilities.scss b/_sass/_components/utilities.scss
index c55e38f98..45a7a2397 100644
--- a/_sass/_components/utilities.scss
+++ b/_sass/_components/utilities.scss
@@ -69,3 +69,50 @@
text-indent: units(-2);
}
+.width-500px {
+ width: 500px;
+}
+
+.width-400px {
+ width: 400px;
+}
+
+.width-380px {
+ width: 380px;
+}
+
+.width-300px {
+ width: 300px;
+}
+
+.width-210px {
+ width: 210px;
+}
+
+.width-200px {
+ width: 200px;
+}
+
+.width-140px {
+ width: 140px;
+}
+
+.width-80px {
+ width: 80px;
+}
+
+.image-open-source-blog {
+ width: 624.00px;
+ height: 468.00px;
+ margin-left: 0.00px;
+ margin-top: 0.00px;
+ transform: rotate(0.00rad) translateZ(0px);
+ -webkit-transform: rotate(0.00rad) translateZ(0px);
+}
+
+.image-conversation-with-Kurz {
+ float: right;
+ margin-left: 10px;
+ margin-bottom: 10px;
+ width: 300px;
+}
diff --git a/content/pages/home.html b/content/pages/home.html
index 4f454d355..1dc46eca7 100644
--- a/content/pages/home.html
+++ b/content/pages/home.html
@@ -23,7 +23,7 @@
- 
+ {% image "assets/img/home/hero-2023.svg" "" %}
+ {% image "assets/img/home/hero-2023.svg" "" %}
What 18F can do
- {% include "graphic-block.html"
- image_path: "/assets/img/home/cando_illo_1.svg"
+ {% include "graphic-block.html",
+ image_path: "assets/img/home/cando_illo_1.svg"
body_text: "Modernize software development processes"
%}
{% include "graphic-block.html"
- image_path: "/assets/img/home/cando_illo_2.svg"
+ image_path: "assets/img/home/cando_illo_2.svg"
body_text: "Improve public-facing services like websites or applications"
%}
{% include "graphic-block.html"
- image_path: "/assets/img/home/cando_illo_3.svg"
+ image_path: "assets/img/home/cando_illo_3.svg"
body_text: "Digitize and streamline internal systems"
%}
- 
+ {% image "assets/img/home/cando_illo_4.svg" "" %}
+ {% image "assets/img/home/cando_illo_4.svg" "" %}
@@ -121,7 +121,7 @@
Some agencies we’ve worked with
-
{% for agency in agencies | where: "featured", true %}
-
-
Some agencies we’ve worked with
-
{% for agency in agencies %}
-
-
+ {% image_with_class agency.logo "margin-right-105 maxw-7" "" %} {% if agency.agency_url %}
What 18F has accomplished
MyUSCIS
-
+
{% image "assets/img/projects/myuscis.jpg" "A screenshot of the MyUSCIS homepage." %}
We helped the U.S. Citizenship and Immigration Services (USCIS) launch myUSCIS, a platform that allows users to easily access information about the immigration process and find immigration options for which they may qualify. Re-imagining the immigration process meant moving from a form-centric website to a human-centric one. We worked closely with USCIS across multiple disciplines to create a suite of resources and tools to demystify the naturalization process, move application forms online, and design an improved account system for applicants.
BetaFEC
-
+
{% image "assets/img/projects/beta-fec.jpg" "A screenshot of the betaFEC homepage" %}
The Federal Election Commission (FEC) has long been a pioneer of open data, but 18F was able to help the FEC build its first public API and a new website on top of that API. This site helps make campaign finance information more accessible to the public, as part of a larger redesign of the FEC’s online presence. Read more about the site and why we’ve released it as a beta.
College Scorecard
-
+
{% image "assets/img/projects/college-scorecard.jpg" "A screenshot of the college scorecard" %}
The College Scorecard site is an example of what 18F can do to help your agency provide an interactive, well-designed way for the public to access your data. We worked with the U.S. Digital Service and the Department of Education to build College Scorecard to give students and their families access to previously unreleased data about colleges and universities so they can make better decisions. The site is built on top of a public API, which also allows private individuals and companies to use the data. Read more about the College Scorecard project.
U.S. Web Design System
-
+
{% image "assets/img/projects/draft-us-web-design-standards.png" "A screenshot of standards.usa.gov" %}
In collaboration with the U.S. Digital Service, we created a collection of design patterns and user interface toolkits to help agencies focus on building their website or application without reinventing trustable, accessible solutions to common government problems. The Design System includes typography and color recommendations that are compliant with Section 508 of the Rehabilitation Act (the federal standard for accessibility), as well as a collection of foundational interface elements for government sites and the code that powers them. We have blogged about our work on the Design Systems several times.
analytics.usa.gov
-
+
{% image "assets/img/projects/analytics-usa-gov.png" "A screenshot of the analytics.usa.gov homepage." %}
You can now view a dashboard of analytics data from the websites of agencies participating in GSA's Digital Analytics Program. The basic dashboard has three views: one showing how many people are on government websites right now; the other two show the most popular pages on government sites in the last seven and 30 days. In 2016, we added agency-specific pages to the dashboard, allowing users to see the same data for several departments as well as across the entire government. This open source project has been adapted for use in other city and state governments.
cloud.gov
-
+
{% image "assets/img/projects/cloud-gov.png" "A screenshot of the cloud.gov homepage" %}
cloud.gov includes a Platform-as-a-Service (PaaS) specifically built for government, based on the open source Cloud Foundry. It provides a secure, scalable platform for teams to build and host their application or website. It can help development teams work faster and cheaper by handling much of their deployment complexity. The cloud.gov platform is currently in a small pilot program, but we will be expanding access over time.
Wage and Hour Division Field Operations Handbook
-
+
{% image "assets/img/projects/dol-handbook.jpg" "The 18F team working with Department of Labor staff in the GSA headquarters." %}
In two days, our consulting team was able to work with a team at the Department of Labor’s Wage and Hour Division to take the four-volume, printed Field Operations Handbook and create an internal prototype of an online, searchable version. We were also able to demonstrate the power of using agile design and development methods.
RFP Ghostwriting with the State of California
-
+
{% image "assets/blog/ca-child-welfare/ca-team.jpg" "The California, Code for America, and 18F team after the workshop." %}
We partnered with the Department of Health and Human Services, the State of California, and Code for America to draft a request for proposal (RFP) to fix the state's child welfare case management system. This system is used by more than 20,000 social workers to track and manage the more than 500,000 cases of child abuse and neglect that are reported in California each year. 18F's two-day RFP ghostwriting workshop got stakeholders on board with modular contracting and modern development methodologies, and helped the state trim their initial 1,500 page RFP into two 70-page documents.
Every Kid in a Park
diff --git a/content/pages/work-with-us.html b/content/pages/work-with-us.html index d8933ad96..4b2fb87cd 100644 --- a/content/pages/work-with-us.html +++ b/content/pages/work-with-us.html @@ -74,9 +74,7 @@Transform the way you work
{{ ask-qs | markdownify }}
-
-
- 
+ {% image "assets/img/work-with-us/work-with-us-illo-2.svg" "" %}
+ {% image "assets/img/work-with-us/work-with-us-illo-2.svg" "" %}
+ {% image "assets/img/work-with-us/work-with-us-illo-1.svg" "" %}
+ {% image "assets/img/work-with-us/work-with-us-illo-3.svg" "" %}
+ {% image "assets/blog/foia/in-hand.jpg" "a mockup of our app on an iPhone" %}
+ {% image "assets/blog/getting-to-work/18fdc-pif.jpg" "18F's DC troop" %}
+{% image_with_class "assets/blog/2014/11/25/image00.png" "image-open-source-blog" "ThirtyYearHistoryOfPostgresAndLucene (1).png" %}
The above graph shows our subjective evaluation of the usefulness of PostgreSQL relative to its total cost of ownership. This "geometrically" increasing usefulness is familiar from hardware performance curves plotted against time, but in this case owes very little to that phenomenon. Rather, it represents the typical commoditization of software. The community of users and developers drive important software tools from unique inventions to broadly available tools. Along the way, the tool usually becomes a commercial product, and then becomes available as an open source alternative.
@@ -66,11 +66,11 @@ The same diagram also plots the even more rapid evolution of a an open source fu
On the __Value Chain axis__, we have inserted the [standard three-tier architecture](https://en.wikipedia.org/wiki/Multitier_architecture), consisting of a Persistence Layer, Business Logic Layer, and Presentation Layer.
-
+{% image_with_class "assets/blog/2014/11/25/image03.png" "image-open-source-blog" "PostgresTemplateOpenSourceThreeLayerWithDecorations (1).png" %}
_The evolution of PostgreSQL_
-
+{% image_with_class "assets/blog/2014/11/25/image04.png" "image-open-source-blog" "LuceneTemplateOpenSourceThreeLayerWithDecorations (1).png" %}
_The evolution of Lucene_
@@ -86,7 +86,7 @@ __Now take each component and analyze it in terms of the evolution axis.__ That
__Now draw a draft Wardley-Duncan map of our your system.__ A large whiteboard with sticky notes is a convenient way to do this, but you can also print out our basic disposable diagram by following this [link]({{ site.baseurl }}/assets/blog/2014/11/25/image02.png) to this diagram:
-
+ {% image "assets/blog/dotgovs/dot-govs-screen.png" "A section of a spreadsheet of the .gov domain list" %}
+{% image "assets/blog/join-us/18f_govuk.png" "18F and GDS logos" %}
A common misconception of open source is that it is just a licence for using software. For individuals and organizations involved with open source projects, it is a philosophy of openness and collaboration embedded in the project from idea to launch. Whether it’s designing an interface, or deploying an application, open source is fundamental to everything we do. Organizations like 18F and the U.K.’s Government Digital Service (GDS) fully embrace open source, and this commitment to openness and transparency is transforming the delivery of government digital services in both countries.
diff --git a/content/posts/2015-02-10-a-story-of-an-agile-workshop.md b/content/posts/2015-02-10-a-story-of-an-agile-workshop.md
index 38623e1e5..a605c621d 100644
--- a/content/posts/2015-02-10-a-story-of-an-agile-workshop.md
+++ b/content/posts/2015-02-10-a-story-of-an-agile-workshop.md
@@ -83,7 +83,7 @@ been hastily brought in. Their bank of workstations was divided by a big
projector — the “stage” upon which the demos would be shown. Other
observers sat in the back of the room.
-
+{% image "assets/blog/agile-workshop/workshop3.JPG" "The room: developers on left, the demo area, and product owners on right." %}
## The first sprint brought a quick win
diff --git a/content/posts/2015-02-17-three-18f-products-that-will-help-your-workplace.md b/content/posts/2015-02-17-three-18f-products-that-will-help-your-workplace.md
index ba52be8ee..80d4dfd5c 100644
--- a/content/posts/2015-02-17-three-18f-products-that-will-help-your-workplace.md
+++ b/content/posts/2015-02-17-three-18f-products-that-will-help-your-workplace.md
@@ -44,7 +44,7 @@ like — in fact, I recommend it.
The Hub is just what it sounds like — a centralized place where team members share project documentation and more general information about how 18F works.
-
+{% image "assets/blog/three-products/hub.png" "A screenshot of The Hub" %}
The Hub is really easy to navigate, and it’s equally easy to update
— anyone can add new information in seconds. Yesterday, for example, I
@@ -68,7 +68,7 @@ Opportunities](https://www.digitalgov.gov/join-digitalgov/open-opportunities-in-
which connects people from across and within government agencies to
collaborate on projects. So far, over 100 projects have been completed.
-
+{% image "assets/blog/three-products/midas.png" "A screenshot of Midas" %}
Midas can benefit all organizations, but it’s especially useful for
those with distributed teams and whose employees have diverse skill
@@ -89,7 +89,7 @@ designated person collects these Snippets in a CSV file and sends out a
weekly email digest. Snippets subscribers can learn, at a glance, what
all of their colleagues are up to.
- 
+{% image "assets/blog/snippets/20141215-mbland.jpg" "A snippet from Mike Bland, describing his workflow" %}
If you don’t have the technical know-how to collect this data in a CSV,
you can have people fill out Snippets via email or on a blog — the point
diff --git a/content/posts/2015-02-24-how-to-use-github-and-the-terminal-a-guide.md b/content/posts/2015-02-24-how-to-use-github-and-the-terminal-a-guide.md
index 53be72479..ab0412b6a 100644
--- a/content/posts/2015-02-24-how-to-use-github-and-the-terminal-a-guide.md
+++ b/content/posts/2015-02-24-how-to-use-github-and-the-terminal-a-guide.md
@@ -53,11 +53,11 @@ If you'd rather not use the script, you can also [follow the detailed instructio
The terminal icon looks like this:
-
+{% image "assets/blog/github-tutorial/terminal.png" "Terminal App" %}
And you should have a window like this when you open it:
-
+{% image "assets/blog/github-tutorial/terminal-window.png" "Screen shot of blank terminal window" %}
* Go to Terminal and paste the following `curl --remote-name https://raw.githubusercontent.com/18F/laptop/master/mac` and press enter.
@@ -71,7 +71,7 @@ You're going to see the word "directory" a lot in this tutorial. Directory is an
1. Type `ls`: this will show you everything in the directory where you are currently located. If you type `ls -1` it will list them all in a single column for you. `ls` stands for "**l**i**s**t" and the `-1` tells your computer to list the directory in one column. If you are in your home directory, you will probably see a list in Terminal similar to this screenshot:
-
+{% image "assets/blog/github-tutorial/w_screenshot1.png" "Screenshot: home directory" %}
2. Now type `cd Documents`: this will take you into your Documents directory, if that was one of the options shown when you used the 'ls' command above. `cd` stands for "**c**hange **d**irectory."
3. Type `ls -1` again to see all the files inside your Documents directory.
@@ -87,7 +87,7 @@ I like to put all my GitHub projects in the same directory. So **the first thing
> **Pro tip:** You can always get back to your code directory by typing `cd ~/code`
-
+{% image "assets/blog/github-tutorial/mkdir-code.gif" "Screenshot: typing in mkdir code" %}
## Clone a repo on your computer
@@ -105,7 +105,7 @@ In this step we are going to _clone_ the 18f.gsa.gov project to your computer.
* Type in `cd ~/code` and press enter to get to the `code` directory we created earlier.
-
+{% image "assets/blog/github-tutorial/cd-code.gif" "Screenshot: typing in cd code" %}
* Go to [18f.gsa.gov's GitHub page](https://github.com/18F/18f.gsa.gov) and look on the right side of the page, under the links for "Issues" and "Graphs." You'll see it says "You can clone with HTTPS, SSH, or Subversion." Click on the SSH link and copy the URL (web address) that's in that text box to your clipboard.
@@ -113,7 +113,7 @@ In this step we are going to _clone_ the 18f.gsa.gov project to your computer.
* Type in `git clone ` and then paste the URL that you copied to your clipboard. This is now copying the 18f.gsa.gov repo to your local computer.
-
+{% image "assets/blog/github-tutorial/git-clone.gif" "screenshot: cloning repo" %}
> If you run into an error here and **have** run the Laptop script, you need to open and register your GitHub desktop application. The script installs the application, but the application will not auto-generate an SSH key until you log-in with your 18F GitHub account credentials. Just open GitHub desktop and it will guide you as a first time user. You'll validate your local computer with 2FA and then check a few more boxes. After completing that, re-try the `git clone [url]` command.
@@ -127,7 +127,7 @@ On this page you will see a list of files and folders in this project. All of th
You are seeing on the website is another view of files and folders as shown here:
-
+{% image "assets/blog/github-tutorial/w_screenshot2.png" "Screenshot: 18f.gsa.gov's repo in mac folder" %}
If you click on the `branch:staging` button, you can see a list of all of the "branches" that exist on this project. Every time you come directly to [18f.gsa.gov](https://github.com/18F/18f.gsa.gov), it will show you the staging branch because we've made that branch the default.
@@ -135,7 +135,7 @@ Branches are little sandboxes for other people working on the project to prepare
In the next step we're going to create a branch, and later on, when you make a pull request, GitHub will automatically assume you're trying to contribute to the staging branch.
-
+{% image "assets/blog/github-tutorial/screenshot4.gif" "Screenshot: showing what the 18f GitHub site looks like" %}
> On the right side, you can also see a list of the existing pull requests and issues. All of the pull requests go to the staging branch. When we merge the pull request to the staging branch, GitHub automatically brings those changes into the project, but does not make them live on https://18f.gsa.gov yet.
@@ -151,7 +151,7 @@ This last command will show you a little bit of information about what you're wo
* _"Your branch is up-to-date with 'origin/staging'"_ means your branch is up to date with the staging branch of the remote location called "origin." A Git repo can have any number of remote locations it can interact with, called "remotes". By default, when you clone a GitHub repo, a remote called "origin" is created that points to the repo on the GitHub website. To view your repo's remote names and their location, type `git remote -v`. The name "origin" is arbitrary. You could rename it to "github" if you wanted to, but we won't do that now.
* _"Nothing to commit / working directory clean"_ means you're completely up to date and haven't made any changes.
-
+{% image "assets/blog/github-tutorial/screenshot5.gif" "Screenshot: how to use git status" %}
## Build the 18F site
@@ -181,7 +181,7 @@ Okay. Now you're ready to start editing.
**Voila! You can now see all of the files that make up the site.** It should look like this.
-
+{% image "assets/blog/github-tutorial/image10.png" "Screen Shot: All of the files that make up the 18F site" %}
> We now want to create a branch, or a sandbox where you can make changes to the website. On this team we always work on branches. This allows you to collaborate with teammates without interfering with other people's existing work.
@@ -191,7 +191,7 @@ Okay. Now you're ready to start editing.
* Type `git status` to make sure you're now on the branch. You should see something that looks like this:
-
+{% image "assets/blog/github-tutorial/screenshot11.gif" "Screenshot: git checkout and status" %}
### Edit and commit a blog post
@@ -199,11 +199,11 @@ We're now going to walk you through creating a new blog post for 18f.gsa.gov.
* Type `ls -1F` to see a list of files and folders that make up 18f.gsa.gov's repo.
-
+{% image "assets/blog/github-tutorial/image13.png" "screen shot: ls -F command" %}
* Go back to Sublime Text and write your post. Then save your post in the `_posts` directory with the name `2015-02-23-new_post.md` where '2015-02-23' is today's date.
-
+{% image "assets/blog/github-tutorial/image14.png" "Screen shot: Saving post in _posts directory" %}
### Adding front matter
@@ -228,7 +228,7 @@ image: /assets/blog/how-to-github/image.jpg
A [complete explanation for the front-matter](https://github.com/18F/18f.gsa.gov/tree/staging/_posts#metadata-explained) can be found on the 18F Blogging Guide. And now you can start writing the text of your blog post on line 16. Say hello! It should look like this:
-
+{% image "assets/blog/github-tutorial/image15.png" "Screen Shot: Adding Front Matter and saving the post" %}
* When you are done writing, save the post by pressing Command + S.
@@ -251,7 +251,7 @@ A [complete explanation for the front-matter](https://github.com/18F/18f.gsa.gov
> You'll see that the file is now listed under changes to be committed.
-
+{% image "assets/blog/github-tutorial/screenshot16.gif" "Screen Shot: Git Add Post / Status" %}
> Well done! At this point, you've told Git that this file should be committed, but you haven't committed anything. So you could work on other things that need to be committed, or you could commit this file right now. We're going to commit right now.
@@ -275,7 +275,7 @@ create mode 100644 _posts/2015-02-23-new-post.md
* Type `git push origin 
+{% image_with_class "assets/blog/estonia/Estonia2.jpg" "width-500px" "The Estonian delegation with members of 18F, OSTP, and CTO Megan Smith" %}
*U.S. Chief Technology Officer Megan Smith, members of U.S. digital
services teams, and the representatives from Estonia.*
diff --git a/content/posts/2015-06-24-thomas-vander-wal-event.md b/content/posts/2015-06-24-thomas-vander-wal-event.md
index b22f20307..273ee497a 100644
--- a/content/posts/2015-06-24-thomas-vander-wal-event.md
+++ b/content/posts/2015-06-24-thomas-vander-wal-event.md
@@ -34,7 +34,7 @@ Vander Wal said during his lecture. But many companies don’t save
instant message conversations. And email buries data in an archive
that’s inaccessible to most.
-
+{% image "assets/blog/vander-wal/email.jpg" "An illustration of closed-node communication" %}
*An illustration of closed-node communication, from Vander Wal’s
presentation*
@@ -59,7 +59,7 @@ keeping](https://18f.gsa.gov/2015/05/28/18F-guides/), and — whenever
possible — we illuminate our processes, hopefully [to the benefit of
the larger tech community](https://pages.18f.gov/guides/).
-
+{% image "assets/blog/vander-wal/opennodes.jpg" "A slide listing the values of open node communication" %}
*Open-node communication allows members of the same community to share
institutional knowledge deftly and painlessly.*
diff --git a/content/posts/2015-07-06-18f-content-guide.md b/content/posts/2015-07-06-18f-content-guide.md
index e0b989046..63aeeba51 100644
--- a/content/posts/2015-07-06-18f-content-guide.md
+++ b/content/posts/2015-07-06-18f-content-guide.md
@@ -17,7 +17,7 @@ image: /assets/blog/content-style-guide/style-guide-screen.jpg
hero: false
---
-[](https://pages.18f.gov/content-guide/)
+[{% image "assets/blog/content-style-guide/style-guide-screen.jpg" "Screenshot of the 18F Content Guide" %}](https://pages.18f.gov/content-guide/)
18F recently introduced its [series of guides](https://18f.gsa.gov/2015/05/28/18F-guides/), a collection of best practices for our internal project teams. As Mike Bland writes in his post describing the guides, “Though these guides currently carry the 18F brand, the intention is to spread the use and cultivation of the material throughout the broader [U.S. Digital Service](https://wh.gov/usds/) effort.”
diff --git a/content/posts/2015-07-08-openfec-api.md b/content/posts/2015-07-08-openfec-api.md
index 124b19891..8118f41fa 100644
--- a/content/posts/2015-07-08-openfec-api.md
+++ b/content/posts/2015-07-08-openfec-api.md
@@ -14,7 +14,7 @@ excerpt: "Today marks the launch of the FEC’s first API. With that API, search
hero: false
---
-
+{% image "assets/blog/openfec-api/openfec-banner.jpg" "OpenFEC: Explore campaign finance data" %}
The Federal Election Commission (FEC) empowers citizens with the information they need to make informed decisions about their democracy.
@@ -23,7 +23,7 @@ Since opening its doors in the ‘70s, the FEC has evolved to better serve the p
With that API, searching for candidates and committees will be easier and more interactive. Information is organized around concepts like candidates, which are more welcoming than navigating buckets of information based on forms.
+{% image "assets/blog/lego-workshop/red-pill.gif" "The red and blue pill from The Matrix" %}
+{% image "assets/blog/technical-debt/graphic-1.jpg" "width-400px" "A bar graph showing how poor design can increase the cost of making changes or adding new features" %}
+{% image "assets/blog/technical-debt/graphic-2.jpg" "A grid of the four types of technical debt. Reckless and deliberate, reckless and inadvertent, prudent and deliberate, prudent and inadvertent." %} width="600px">
+{% image "assets/blog/technical-debt/graphic-3.jpg" "A graph showing how the cost of change increases over time when you have technical debt, and that hurts your ability to meet user needs." %}
+{% image_with_class "assets/blog/digital-economy-practice/dep-graphic2.jpg" "width-500px" "The Digital Economy Practice competencies include industry and policy, people and organization, design and product, technology and data, and acquisition and procurement." %}
+{% image_with_class "assets/blog/speaker-series/natalie-kurz.jpg" "image-conversation-with-Kurz" "CFPB's Natalie Kurz" %}
Last month, content strategist and UX designer Natalie Kurz [presented at 18F](https://18f.gsa.gov/2015/11/03/content-strategy-for-all-insights-from-cfpb-natalie-kurz/). Currently a Technology and Innovation Fellow at the [Consumer Financial Protection Bureau](http://www.consumerfinance.gov/), Kurz has spent more than 15 years helping clients create, maintain, and promote beautiful, brand-adherent content.
diff --git a/content/posts/2015-11-10-boston-is-using-gsa-calc-tool.md b/content/posts/2015-11-10-boston-is-using-gsa-calc-tool.md
index 60326a569..28ae77797 100644
--- a/content/posts/2015-11-10-boston-is-using-gsa-calc-tool.md
+++ b/content/posts/2015-11-10-boston-is-using-gsa-calc-tool.md
@@ -31,7 +31,7 @@ The tool, he says, offers city government contracting officers a way to get a br
“One of the challenges cities face in tech procurement is that you're making decisions based solely on information provided by vendors. CALC...can help ensure decisions are fully informed,” he says.
-
+{% image "assets/blog/calc-announcement/calc_demo.gif" "The CALC tool in action" %}
CALC helps contracting officers determine the range of pricing — at the highest level — for a specific labor category. For example, a search for “Senior Engineer” will return comparable labor categories and their rates, which can be further narrowed by filtering for associated criteria such as years of experience, education level, etc.
diff --git a/content/posts/2015-11-17-choose-design-over-architecture.md b/content/posts/2015-11-17-choose-design-over-architecture.md
index 5b66d4608..f0a264fa1 100644
--- a/content/posts/2015-11-17-choose-design-over-architecture.md
+++ b/content/posts/2015-11-17-choose-design-over-architecture.md
@@ -29,7 +29,7 @@ In short, architectural plans push the team towards [waterfall development](http
## Starting from user stories and user experience
-
+{% image "assets/blog/design-over-architecture/user-story-architecture.jpg" "A user story generating architecture organically." %}
*A user story generating architecture organically.*
[User stories](https://en.wikipedia.org/wiki/User_story) are simple scenarios told from the point of view of a person using the software. There can be many types of users for an application. For example, an application might have people consuming the application via a public web page and others who are developers consuming it via an API. The application may also need administrators to establish content or permissions.
@@ -77,7 +77,7 @@ After the team addresses lots of stories, driven by their top priorities, the ar
## Keeping our code from becoming a structureless mess
-
+{% image "assets/blog/design-over-architecture/messy-code.jpg" "Without good software design techniques, your code can become a mess as you fulfill more user stories." %}
*Without good software design techniques, your code can become a mess as you fulfill more user stories.*
Without a guiding architectural map, how does a team keep the code clean and useful?
@@ -97,7 +97,7 @@ Focusing on software design turns the process of getting to architecture on its
Seemingly since the dawn of programming, engineers have been concerned with making code more modular and flexible. In that time, we have developed great guiding principles.
-
+{% image "assets/blog/design-over-architecture/refactoring.jpg" "Using refactoring to impose design on the chaos that happens with continual development" %}
*Using refactoring to impose design on the chaos that happens with continual development.*
### SOLID
diff --git a/content/posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md b/content/posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md
index 32540d599..3a1e373a7 100644
--- a/content/posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md
+++ b/content/posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md
@@ -14,7 +14,7 @@ image: /assets/blog/gsa-homepage/gsa-homepage.jpg
hero: false
---
-
+{% image "assets/blog/gsa-homepage/gsa-homepage.jpg" "A screenshot of the new gsa.gov homepage" %}
*Originally posted on [GSA's blog](http://gsablogs.gsa.gov/gsablog/2015/11/17/gsa-gov-refreshed-with-eye-toward-mobile-users/).*
diff --git a/content/posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md b/content/posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md
index 39caf0dfb..4e7d11648 100644
--- a/content/posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md
+++ b/content/posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md
@@ -40,7 +40,7 @@ From the beginning, we conceived of onboarding as a series of
interlinking blocks. Here’s the way we drew our mental model of these
blocks back in September:
-
+{% image "assets/blog/onboarding/learning-modules.jpg" "An early sketch for onboarding modules" %}
Every 18F employee needs to know certain general stuff: what the [Hatch Act is](https://www.oge.gov/web/oge.nsf/Outside%20Employment%20and%20Activities/88E8E6E11682F97885257E96006364FF?opendocument), where to file
their health insurance, and how to add their biography to our website,
@@ -154,7 +154,7 @@ Mrs. Landingham releases one message per day to new hires over their
first 30 days. The messages are prewritten: when new hires are signed
up, they begin the 30 day cycle of messaging. They look like this:
-
+{% image "assets/blog/onboarding/dolores.jpg" "A test conversation with Mrs. Dolores Landingham, the onboarding chat bot." %}
We find that Mrs. Landingham is a fun, easy, and efficient way to
provide information to new hires. She helps them learn about Slack by
diff --git a/content/posts/2015-12-02-analytics-usa-gov-new-features-more-data.md b/content/posts/2015-12-02-analytics-usa-gov-new-features-more-data.md
index 46daf6a9a..f8505977a 100644
--- a/content/posts/2015-12-02-analytics-usa-gov-new-features-more-data.md
+++ b/content/posts/2015-12-02-analytics-usa-gov-new-features-more-data.md
@@ -22,7 +22,7 @@ hero: false
*This post was originally published on the [DigitalGov blog](https://www.digitalgov.gov/2015/12/01/analytics-usa-gov-new-features-and-more-data).*
-
+{% image "assets/blog/dap/analytics-homepage.jpg" "The analytics.usa.gov homepage." %}
As of writing this post, 25,225 of the 124,878 total visitors on federal government websites participating in the [Digital Analytics Program](http://www.digitalgov.gov/services/dap/) (DAP) are NOT located in the United States. And as a result of a new location feature on the expanded [analytics.usa.gov](https://analytics.usa.gov/), you are free to check for yourself how many current users are from outside the country, anytime you’d like.
@@ -35,7 +35,7 @@ Location data
We’ve created two new location charts on the dashboard, one showing the cities providing the most visitors and one showing U.S. vs. international traffic, including a breakdown of the countries with the most visitors outside the U.S. Both of the visualizations reflect data in real-time (updating every minute), so you can wake-up to see which countries are visiting U.S. government websites while we’re asleep! Additionally, while most of the time you’ll see U.S. cities on that particular chart, it is not limited to the United States. If there is a world event and for some reason a large proportion of people in Mumbai, India (for example), are visiting U.S. government websites, the chart will reflect that.
-
+{% image "assets/blog/dap/analytics-locations.jpg" "A snapshot of location data from analytics.usa.gov" %}
One thing to keep in mind about location information is that since we anonymize IP addresses of visitors at the earliest possible point, the location data is not accurate enough to pinpoint exact locations of visitors. With IP addresses anonymized, we rely on the network domain and service provider to determine a relative location. As a result, people visiting from a suburb may appear as visiting from the closest city.
@@ -52,13 +52,13 @@ Two important things to understand about downloads:
PDF files seem to dominate the list, but other extensions in the category include .doc, .xls., .mp3, among others. The data reflects the number of times the file was accessed in the past seven days.
-
+{% image "assets/blog/dap/analytics-downloads.jpg" "A screenshot of a top downloaded item, in this case an Application for Naturalization from USCIS." %}
You can click on the page title, “Application for Naturalization | USCIS,” to go to the page the file is located, or you can click on the file name, “n-400.pdf”, to download (or open) the file right from analytics.usa.gov!
Expanded downloadable files
---------------------------
-
+{% image "assets/blog/federal-front-door/image01.jpg" "A two-by-two grid showing how people think when confidence is plotted against resilience. When confidence and resilience are both high, people “will keep trying until a goal is achieved.” When confidence is high but resilience is low, people may apply once but will give up if it doesn't go well. With resilience high and low confidence, people may try a few times but will doubt themselves. And when both resilience and confidence are low, they probably won't apply at all." %}
+{% image_with_class "assets/blog/web-design-standards/vision-provider.jpg" "width-400px" "Stick figure zapping two Pantone chips." %}
### The Vision Provider
@@ -39,7 +39,7 @@ They want a cohesive resource they can point their team and contractors to so th
They may face challenges convincing less experienced folks on their team on why the Draft Standards are important, or they may themselves not want to override the brand identity for their agency that has already been developed. They wonder how much they can customize the Draft Standards before they defeat the purpose of a unified user experience.
-
+{% image_with_class "assets/blog/web-design-standards/newbie.jpg" "width-400px" "Stick figure of a person with an I heart gov shirt and a coffee cup." %}
### The Newbie
@@ -53,7 +53,7 @@ They’re excited to prove their mettle, but they may not be experienced enough
They don’t fully understand the need for design standards. They may resist using design standards because they don’t want their creativity to be stifled.
-
+{% image_with_class "assets/blog/web-design-standards/lone-ranger.jpg" "width-200px" "Stick figure of a cowboy." %}
### The Lone Ranger
@@ -69,7 +69,7 @@ They will use the Draft Standards to cut down on design and development time, an
The Lone Ranger wants to be able to get started with the Draft Standards quickly and not have to fuss with a lot of compatibility issues. They worry about tying their projects to a resource without knowing whether or not it will be maintained.
-
+{% image_with_class "assets/blog/web-design-standards/master-builder.jpg" "width-200px" "Stick figure wearing a hard hat." %}
### The Master Builder
@@ -83,7 +83,7 @@ They see their code as their personal craft and value clean, semantic markup tha
The Master Builder doesn’t want to have to do mindless “grunt work” such as styling tables or making form fields accessible, and would rather focus their attention on more creative problem solving.
-
+{% image_with_class "assets/blog/web-design-standards/reviewer.jpg" "width-400px" "Stick figure looking at a website with a magnifying glass." %}
### The Reviewer
@@ -95,7 +95,7 @@ The Reviewer is charged with inspecting other teammates’ code or designs and m
The reviewer wants to point to the Draft Standards to help these folks implement good front end code, reducing the amount of emergency clean-up they have to deal with. They may refer to the Draft Standards documentation when reviewing code.
-
+{% image_with_class "assets/blog/web-design-standards/decider.jpg" "width-400px" "Stick figure holding onto a yes/no switch." %}
### The Decider
@@ -107,7 +107,7 @@ The decider chooses whether or not to use the Draft Standards on a project. They
They will ask questions about how the Draft Standards will be maintained and how they will integrate with existing technology stacks and work-flows.
-
+{% image_with_class "assets/blog/web-design-standards/macgyver.jpg" "width-400px" "A monitor duct taped together." %}
### The MacGyver
@@ -119,7 +119,7 @@ The MacGyver is a back end developer who has been charged with front end design
They would like a resource with downloadable templates and components so they stand up sites quickly can get back to what they love — arguing data schematics.
-
+{% image_with_class "assets/blog/web-design-standards/pinch-hitter.jpg" "width-200px" "Stick figure with a baseball bat." %}
### The Pinch Hitter
@@ -133,7 +133,7 @@ They rely on the pattern library components to work out of the box, and they nee
They are concerned about conflicts with existing frameworks because these are difficult to resolve with their limited development experience.
-
+{% image_with_class "assets/blog/web-design-standards/influencer.jpg" "width-400px" "Stick figure posing next to a monitor that says new and shiny." %}
### The Influencer
@@ -141,7 +141,7 @@ They are concerned about conflicts with existing frameworks because these are di
The Influencer likes the idea of creating a consistent user experience across government websites and wants to empower government employees to work toward this goal. They play a key role in advocating for adoption of the standards, and they want the site itself to offer language and resources to help them out.
-
+{% image_with_class "assets/blog/web-design-standards/contract-manager.jpg" "width-400px" "Blind-folded stick finger pointing at three numbered doors." %}
### The Contract Manager
@@ -153,7 +153,7 @@ The Contract Manager is in charge of managing work for — you guessed it — go
They want their projects to benefit from quality design and front end development work, but do not necessarily know what it looks like or how to enforce it. They want to be able to specify that contractors follow web design standards with specific legalese.
-
+{% image_with_class "assets/blog/web-design-standards/clock-racer.jpg" "width-400px" "Stick figure coding with clocks in the background." %}
### The Clock Racer
diff --git a/content/posts/2016-03-22-helping-california-buy-a-new-child-welfare-system.md b/content/posts/2016-03-22-helping-california-buy-a-new-child-welfare-system.md
index bbbda68ea..7af340b32 100644
--- a/content/posts/2016-03-22-helping-california-buy-a-new-child-welfare-system.md
+++ b/content/posts/2016-03-22-helping-california-buy-a-new-child-welfare-system.md
@@ -39,7 +39,7 @@ results that users of the system actually need. We offer our partners
[a different
approach](https://18f.gsa.gov/2015/03/30/new-rfp-ghostwriting-service-to-improve-contract-success/).
-
+{% image "assets/blog/ca-child-welfare/ca-team.jpg" "The team from the State of California, Code for America, and 18F at the end of day two of the workshop." %}
*The team from the State of California, Code for America, and 18F at the end of day two of the workshop.*
Through a partnership with HHS, 18F was able to work on behalf of HHS with California’s Department of Social Services and Office of Systems Integration and Code for America to simplify the contracting documents and to incorporate
diff --git a/content/posts/2016-03-24-video-highlights-from-18f-speeches-over-the-last-year.md b/content/posts/2016-03-24-video-highlights-from-18f-speeches-over-the-last-year.md
index 0af3e4546..1d74570ca 100644
--- a/content/posts/2016-03-24-video-highlights-from-18f-speeches-over-the-last-year.md
+++ b/content/posts/2016-03-24-video-highlights-from-18f-speeches-over-the-last-year.md
@@ -20,7 +20,7 @@ team."
image: /assets/blog/anniversary/speaking-locations-map-fy15-16.jpg
---
-
+{% image "assets/blog/anniversary/speaking-locations-map-fy15-16.jpg" "A map of where 18F staffers spoke about our work in 2015 and 2016." %}
*A map of where 18F staffers spoke about our work in 2015 and 2016. This
map only records one dot per city, so multiple events only appear as a
single dot.*
diff --git a/content/posts/2016-03-28-interesting-things-we-learned-from-examining-traffic-patterns-on-analytics-usa-gov.md b/content/posts/2016-03-28-interesting-things-we-learned-from-examining-traffic-patterns-on-analytics-usa-gov.md
index 94d3bbb68..2a25848c6 100644
--- a/content/posts/2016-03-28-interesting-things-we-learned-from-examining-traffic-patterns-on-analytics-usa-gov.md
+++ b/content/posts/2016-03-28-interesting-things-we-learned-from-examining-traffic-patterns-on-analytics-usa-gov.md
@@ -11,7 +11,7 @@ description: "Ten federal agencies now have public dashboards and datasets for t
image: /assets/blog/dap/epa-analytics.jpg
---
-[](https://analytics.usa.gov/environmental-protection-agency/)
+[{% image "assets/blog/dap/epa-analytics.jpg" "A screenshot of the Environmental Protection Agency's dashboard on analytics.usa.gov" %}](https://analytics.usa.gov/environmental-protection-agency/)
Ten federal agencies [now have public dashboards and datasets](https://18f.gsa.gov/2016/02/18/analytics.usa.gov-agency-specific-dashboards/) for their web traffic on analytics.usa.gov. The dashboards show insights into how the public interacts with specific agency websites.
diff --git a/content/posts/2016-03-29-best-practices-for-building-an-accessible-website-using-the-draft-us-web-design-standards.md b/content/posts/2016-03-29-best-practices-for-building-an-accessible-website-using-the-draft-us-web-design-standards.md
index 688f76344..3384c8a29 100644
--- a/content/posts/2016-03-29-best-practices-for-building-an-accessible-website-using-the-draft-us-web-design-standards.md
+++ b/content/posts/2016-03-29-best-practices-for-building-an-accessible-website-using-the-draft-us-web-design-standards.md
@@ -113,7 +113,7 @@ Checker](http://webaim.org/resources/contrastchecker/))
to test foreground and background options and adjust their lightness and
darkness until they pass contrast requirements.
-
+{% image "assets/blog/web-design-standards/color-palette.jpg" "Neutral text on a variety of color backgrounds." %}
By implementing these practices and leveraging the Draft Standards, we
hope to help create guidelines that will set you on the path to creating
diff --git a/content/posts/2016-03-30-how-we-shared-a-visual-style-across-multiple-sites.md b/content/posts/2016-03-30-how-we-shared-a-visual-style-across-multiple-sites.md
index 23f67a5df..1056b7349 100644
--- a/content/posts/2016-03-30-how-we-shared-a-visual-style-across-multiple-sites.md
+++ b/content/posts/2016-03-30-how-we-shared-a-visual-style-across-multiple-sites.md
@@ -14,7 +14,7 @@ image: /assets/blog/cloud-gov/style-guide.jpg
In developing a redesign for cloud.gov, our team found we had multiple sites with separate codebases, sometimes written in different programming languages with different frameworks that all had a shared visual style. When figuring out a technical solution to coding the visual style that was mocked up for us, we needed a solution that would scale to all these different sites without requiring us to copy code. Our solution to this problem is our “shared style library”, a library of CSS, JavaScript, images, and fonts that can be distributed to multiple codebases to create a shared visual style. Our style library includes a build process to package and optimize all the assets, versioning to ensure consumer sites receive the correct features of the style library, and a distribution method that allows multiple types of sites in different frameworks to consume the library. The library is called "cloudgov-style", or "cg-style" and is available [on GitHub](https://github.com/18F/cg-style) and [npm](https://www.npmjs.com/package/cloudgov-style).
-[](https://pages.18f.gov/cg-style/)
+[{% image "assets/blog/cloud-gov/style-guide.jpg" "A screenshot of the cloud.gov style library" %}](https://pages.18f.gov/cg-style/)
## Design
The idea of cloudgov-style started with a redesign of cloud.gov itself, which included a styleguide, mockups for the [main cloud.gov landing page](https://cloud.gov), and the [cloud.gov docs site](https://docs.cloud.gov). The visual style was designed using the [Draft U.S. Web Design Standards](https://playbook.cio.gov/designstandards/) as it was a good starting point to ensure the design incorporated the same values as other government sites. Plus, starting with existing code made creating our visual style much faster.
@@ -165,7 +165,7 @@ Having these different options allows different consumer sites with different bu
## Style guide
Another feature of cloudgov-style is a minimal, coded, style guide to allow for visual regression testing of new code and for developers to see what components are available and how to implement them. This style guide is created with a simple Jekyll site in the [cloudgov-style repo](https://github.com/18F/cg-style/tree/master/documentation). The style guide has each component displayed in an example use case along with a code sample to show implementation.
-[](https://pages.18f.gov/cg-style/)
+[{% image "assets/blog/cloud-gov/style-guide-components.jpg" "An example of components being displayed next to their code on the cloudgov-style site." %}](https://pages.18f.gov/cg-style/)
While all the components are displayed on the homepage, each component also has an individual page where it's displayed in isolation. This is done to create a "clean" environment for visual regression testing. By placing each component on it's own page, there won't be any false negatives in visual regression testing when there are layout changes to the components. We decided to use a hand-coded style guide built on Jekyll rather than using a tool like [KSS](http://warpspire.com/kss/) to make it easier to place each component on it’s own page.
diff --git a/content/posts/2016-03-31-new-guide-provides-tools-for-product-leads.md b/content/posts/2016-03-31-new-guide-provides-tools-for-product-leads.md
index e0785fa1f..cfe1a2faf 100644
--- a/content/posts/2016-03-31-new-guide-provides-tools-for-product-leads.md
+++ b/content/posts/2016-03-31-new-guide-provides-tools-for-product-leads.md
@@ -12,7 +12,7 @@ description: "To help our product managers, newcomers and veterans alike, wear t
image: /assets/blog/product-guide/product-guide.jpg
---
-[](https://pages.18f.gov/product-guide)
+[{% image "assets/blog/product-guide/product-guide.jpg" "A screenshot of the 18F Product Guide" %}](https://pages.18f.gov/product-guide)
*The 18F Product Guide*
A product lead can wear many hats over the course of a project. Being a
diff --git a/content/posts/2016-04-04-national-earthquake-information-centers-open-source-team.md b/content/posts/2016-04-04-national-earthquake-information-centers-open-source-team.md
index 1d6bdf1b9..601e03513 100644
--- a/content/posts/2016-04-04-national-earthquake-information-centers-open-source-team.md
+++ b/content/posts/2016-04-04-national-earthquake-information-centers-open-source-team.md
@@ -10,7 +10,7 @@ description: The National Earthquake Information Center’s web team is committe
excerpt: I visited the Earthquakes team at their office on the Colorado School of Mines campus in Golden, CO, to learn about this open source team’s role in public service.
---
-
+{% image "assets/blog/earthquake-center/earthquakecenter.jpg" "A mountain and some buildings as seen from National Earthquake Information Center’s office on the Colorado School of Mines campus in Golden, CO." %}
*The view from the National Earthquake Information Center’s office on the Colorado School of Mines campus in Golden, CO.*
On January 28, 2016 people living at the Jersey Shore felt a shake. New
diff --git a/content/posts/2016-04-05-three-teams-using-the-draft-us-web-design-standards-talk-about-their-experiences.md b/content/posts/2016-04-05-three-teams-using-the-draft-us-web-design-standards-talk-about-their-experiences.md
index 3f4155ab8..335f7e7c4 100644
--- a/content/posts/2016-04-05-three-teams-using-the-draft-us-web-design-standards-talk-about-their-experiences.md
+++ b/content/posts/2016-04-05-three-teams-using-the-draft-us-web-design-standards-talk-about-their-experiences.md
@@ -41,7 +41,7 @@ incredibly useful and something that is needed across government
websites. The USAGov team then started connecting with the core team of
developers and designers to get this effort kicked off.
-
+{% image "assets/blog/web-design-standards/cfpb-form.jpg" "A USA.gov form that uses the Draft U.S. Web Design Standards" %}
[USA.gov](https://www.usa.gov/) has adopted the Draft Standards with
some of the forms that are used by our users and agency partners to
@@ -68,7 +68,7 @@ We are currently mapping components from the USAGov platform with the
ones included into the draft release of the Standards and will continue
to incorporate them in the future.
-[](http://vote.usa.gov/)
+[{% image "assets/blog/vote-usa-gov/vote.jpg" "The vote.usa.gov homepage" %}](http://vote.usa.gov/)
**LK:** Our team was very excited about the branding and dropdown
components featured in the Standards. Because of the short runway to
diff --git a/content/posts/2016-04-08-making-more-consistent-decisions-with-design-principles-a-new-18f-guide.md b/content/posts/2016-04-08-making-more-consistent-decisions-with-design-principles-a-new-18f-guide.md
index 932861909..4e845de96 100644
--- a/content/posts/2016-04-08-making-more-consistent-decisions-with-design-principles-a-new-18f-guide.md
+++ b/content/posts/2016-04-08-making-more-consistent-decisions-with-design-principles-a-new-18f-guide.md
@@ -48,7 +48,7 @@ principles themselves. The team should have the freedom to experiment
and push the boundaries without breaking the spirit of the design
principles.
-[
+[{% image "assets/blog/design/design-principles-guide.jpg" "A screenshot of the 18F Design Principles Guide" %}
](https://pages.18f.gov/design-principles-guide/create)
Check out the [Design Principles
diff --git a/content/posts/2016-04-12-7-18f-projects-that-state-and-local-governments-can-reuse.md b/content/posts/2016-04-12-7-18f-projects-that-state-and-local-governments-can-reuse.md
index 7a4fdc120..1a235cec6 100644
--- a/content/posts/2016-04-12-7-18f-projects-that-state-and-local-governments-can-reuse.md
+++ b/content/posts/2016-04-12-7-18f-projects-that-state-and-local-governments-can-reuse.md
@@ -22,7 +22,7 @@ highlighting seven below:
Public website analytics
----------------------------------------------
-[](https://bouldercolorado.gov/stats)
+[{% image "assets/blog/reusable-tools/analytics.jpg" "A screen shot of the City of Boulder's analytics dashboard" %}](https://bouldercolorado.gov/stats)
We worked with the [Digital Analytics
Program](https://www.digitalgov.gov/services/dap/), the [U.S. Digital
@@ -44,7 +44,7 @@ for their own use.
Quick mini-sites for content
--------------------------------------------------
-[](https://pages.18f.gov/agile/)
+[{% image "assets/blog/reusable-tools/pages.jpg" "A screen shot of an 18F guide on the pages platform" %}](https://pages.18f.gov/agile/)
We built a responsive, accessible [website
template](https://pages.18f.gov/) (based on open source work by the
@@ -63,7 +63,7 @@ domain.
Insight into how people interact with government
----------------------------------------------------------------------
-[](https://labs.usa.gov/files/FFD_ResearchReport.pdf)
+[{% image "assets/blog/reusable-tools/depend.jpg" "People depend on others (for example, family members, friends, and public library staff) for help with government websites, but government services are not set up to support this type of assistance." %}](https://labs.usa.gov/files/FFD_ResearchReport.pdf)
Over the last several months, staff from General Service
Administration’s USAGov and 18F teams have been talking to Americans
@@ -78,7 +78,7 @@ learned](https://18f.gsa.gov/tags/federal-front-door/) on the 18F blog.
Market research for procurement
-----------------------------------------------------
-[](https://calc.gsa.gov/)
+[{% image "assets/blog/calc-announcement/calc_demo.gif" "An animated demo of how to use the CALC tool" %}](https://calc.gsa.gov/)
We developed [a tool](https://calc.gsa.gov/) that helps you easily
conduct market research across a number of categories for acquiring
@@ -90,7 +90,7 @@ conduct market research.
Vocabulary for user-centered design
---------------------------------------------------------
-[](https://methods.18f.gov/)
+[{% image "assets/blog/reusable-tools/method-cards.jpg" "Some of our Design Method Cards" %}](https://methods.18f.gov/)
We [released](https://18f.gsa.gov/2015/08/10/18f-design-methods/) a
[deck of method cards](https://methods.18f.gov/) that help research
@@ -100,7 +100,7 @@ agencies.
Task management
---------------
-[](https://github.com/18F/checklistomania)
+[{% image "assets/blog/reusable-tools/checklistomania.jpg" "A screenshot of our Checklistomania tool showing two sample tasks" %}](https://github.com/18F/checklistomania)
We recently developed a [checklist
program](https://github.com/18F/checklistomania) that help users manage
@@ -113,7 +113,7 @@ task four is completed by an employee.
Help small businesses find opportunities
-----------------------------------------
-[](https://fbopen.gsa.gov/)
+[{% image "assets/blog/reusable-tools/fbopen.jpg" "The FBopen homepage" %}](https://fbopen.gsa.gov/)
[FBOpen](https://fbopen.gsa.gov/) is a set of open source tools to
help small businesses search for opportunities to work with the U.S.
diff --git a/content/posts/2016-04-19-looking-at-the-different-ways-to-test-content.md b/content/posts/2016-04-19-looking-at-the-different-ways-to-test-content.md
index a11989884..ad433c469 100644
--- a/content/posts/2016-04-19-looking-at-the-different-ways-to-test-content.md
+++ b/content/posts/2016-04-19-looking-at-the-different-ways-to-test-content.md
@@ -37,7 +37,7 @@ depending on the age of your audience. Finding appropriate ways to test
our content helps us improve and find best practice patterns for
creating copy.
-
+{% image "assets/blog/content-testing/content-graph.jpg" "A graph with comprehension and confusion at the top and bottom of the y-axis and failure and success on the left and right of the x axis. The desired spot for content is in the upper right quadrant between comprehension and success. " %}
*Christine’s graph of good content. The star marks
the sweet spot.*
@@ -78,7 +78,7 @@ Kid in a Park project to keep pressure low and still measure how well
kids understood the website. For example, one question we asked was,
“How would you use this website to sign up for Every Kid in a Park?”
-[](https://www.everykidinapark.gov)
+[{% image "assets/blog/every-kid-in-a-park/every-kid-in-a-park-homepage.jpg" "A screenshot of the Every Kid in a Park homepage" %}](https://www.everykidinapark.gov)
*The Every Kid in a Park homepage reads at a 4.5 grade level and was
tested with kids through the University of Maryland’s HCI lab.*
@@ -101,7 +101,7 @@ experienced in the previous two weeks. The feelings listed by users in
testing were matched to the ones already in the app — plus the feelings
people had written into the “add your own” field.
-
+{% image "assets/blog/content-testing/choose-words.jpg" "A grid of possible words such as OK, anxious, angry, and happy under the heading "How you feel right now"" %}
The goal was to test whether the feelings chosen for the app were
representative and appropriate.
@@ -129,7 +129,7 @@ asking users to sign up as organ donors. For example:
The sign-up rate for each piece of content was measured and the most
successful was:
-)
+{% image "assets/blog/content-testing/ab-test.jpg" "A screenshot of the GOV.UK screen with "Please join the NHS Organ Donor Register" on a thank you page." %})
Each content variant the NHS tested used plain language and could be
easily understood. The A/B test showed which call to action was *most
@@ -160,7 +160,7 @@ she accepted synonyms as answers. She was hoping to get test scores of
50 percent or greater accuracy; in practice, FEC’s Cloze test scores ranged
from 65 percent to 98 percent, even better than she hoped.
-
+{% image "assets/blog/content-testing/cloze-testing.jpg" "An example of a page from beta.fec.gov that used a Close test." %}
*This page from [beta.FEC.gov](https://beta.fec.gov) is one of several tested using a Cloze
test.*
diff --git a/content/posts/2016-04-20-a-clear-audience-makes-for-a-good-blog-post.md b/content/posts/2016-04-20-a-clear-audience-makes-for-a-good-blog-post.md
index 715b1ceff..144babb7c 100644
--- a/content/posts/2016-04-20-a-clear-audience-makes-for-a-good-blog-post.md
+++ b/content/posts/2016-04-20-a-clear-audience-makes-for-a-good-blog-post.md
@@ -25,7 +25,7 @@ and exit as a closed issue in the “approved” milestone after they’ve
been edited by a member of our blog team and sent through our approval
process.
-
+{% image "assets/blog/blogging-guide/blogging-metadata.jpg" "An example of an issue for a blog post." %}
*An example of an issue for a blog post.*
Each issue has five metadata headings, including audience, that the
diff --git a/content/posts/2016-04-21-checklistomania-makes-it-easy-to-keep-track-of-relative-tasks.md b/content/posts/2016-04-21-checklistomania-makes-it-easy-to-keep-track-of-relative-tasks.md
index ee5a0f63e..8d2ed60e1 100644
--- a/content/posts/2016-04-21-checklistomania-makes-it-easy-to-keep-track-of-relative-tasks.md
+++ b/content/posts/2016-04-21-checklistomania-makes-it-easy-to-keep-track-of-relative-tasks.md
@@ -22,7 +22,7 @@ you have to sign into your work email before you can set up two-factor
authentication or view your first paycheck. Keeping track of these tasks
and how they relate to each other is difficult and time consuming.
-
+{% image "assets/blog/checklistomania/tasks.jpg" "Screenshot of the tasks screen in Checklistomania" %}
Enter [Checklistomania](https://github.com/18F/checklistomania). We
developed the tool at 18F specifically for onboarding. It’s used by new
@@ -33,13 +33,13 @@ features:
- The checklists are centrally defined, so any member of an organization can subscribe to the authoritative checklist.
-
+{% image "assets/blog/checklistomania/users.jpg" "Screenshot of various checklists you can sign up for" %}
- Deadlines can be set according to a fixed date or relative to completion of other items. For example, if Task B must be completed three days after Task A (but only after Task A has been completed), the due date will shift accordingly.
- We can view each other’s checklists, which makes it easy to see everyone's status at a glance.
-
+{% image "assets/blog/checklistomania/users.jpg" "Screenshot of the users screen in Checklistomania" %}
[Checklistomania](https://github.com/18F/checklistomania) is an open
source project in the public domain and may be adapted by any
diff --git a/content/posts/2016-04-25-lean-on-me-asking-for-help-on-the-content-team.md b/content/posts/2016-04-25-lean-on-me-asking-for-help-on-the-content-team.md
index 91b1bd7a6..87fb73216 100644
--- a/content/posts/2016-04-25-lean-on-me-asking-for-help-on-the-content-team.md
+++ b/content/posts/2016-04-25-lean-on-me-asking-for-help-on-the-content-team.md
@@ -16,7 +16,7 @@ skills — we put this to good use by regularly asking each other for help
with projects. Here’s a diagrammatic look into some of our recent
collaboration.*
-
+{% image "assets/blog/content/collaborate-content.jpg" "A circle of head shots of the Content Team with lines connecting them" %}
[Emileigh](https://18f.gsa.gov/team/emileigh/)
------------------------------------------------
diff --git a/content/posts/2016-04-26-thinking-about-the-future-of-the-post-office-an-interview-with-amanda-weaver.md b/content/posts/2016-04-26-thinking-about-the-future-of-the-post-office-an-interview-with-amanda-weaver.md
index 33744f5af..549bc1bfa 100644
--- a/content/posts/2016-04-26-thinking-about-the-future-of-the-post-office-an-interview-with-amanda-weaver.md
+++ b/content/posts/2016-04-26-thinking-about-the-future-of-the-post-office-an-interview-with-amanda-weaver.md
@@ -26,7 +26,7 @@ I’m going to list some of our current projects and things we’re thinking abo
First, we’re trying to [understand their revealed preferences](https://www.uspsoig.gov/sites/default/files/document-library-files/2015/rarc-wp-15-012.pdf) using the latest scientific techniques from neuroscience. Second, we’re focused on innovations within the mail itself. How can we use the latest technology to make the physical mail piece more digitally interactive and thus more appealing to the digital natives?
-[](https://www.uspsoig.gov/document/internet-postal-things)
+[{% image "assets/blog/partners-in-government/internet-of-postal-things.jpg" "A map of potential pieces of the internet of postal things" %}](https://www.uspsoig.gov/document/internet-postal-things)
*A page from the [report on the Internet of Postal Things](https://www.uspsoig.gov/document/internet-postal-things)*
**The Internet of Postal Things.** We’re imagining [how the rich infrastructure of the Postal Service could be used](https://www.uspsoig.gov/document/internet-postal-things) if it were outfitted with sensors and interconnected with each other as well as the internet. This would create useful information to make the postal system smarter, and allow it to collect really useful information to the localities as a byproduct — think about sensors that could measure road conditions, the strength of mobile signals, or monitor air quality. We are currently expanding on this concept in another paper to explain how the Internet of Postal Things could aid in the efforts of “Smart Cities.”
@@ -95,7 +95,7 @@ These opportunities would compare with those of certain foreign postal organizat
Here’s a photo of one of our whiteboards, where we track complaints of the RARCers who bike to work everyday.
-
+{% image "assets/blog/partners-in-government/rarc.jpg" "A whiteboard with stick figures for every day o fthe week and a chart about the benefits of biking to work." %}
Check out these links ([1](https://www.instagram.com/rootchopper/), [2](https://www.flickr.com/photos/rootchopper/sets/72157662509216092), [3](https://rootchopper.wordpress.com/2015/12/11/the-office-bike-commuting-matrix/)) to see where others have been posted by another RARCer, John Pickett:
diff --git a/content/posts/2016-04-27-making-a-distributed-design-team-work.md b/content/posts/2016-04-27-making-a-distributed-design-team-work.md
index 559753134..36758c0b2 100644
--- a/content/posts/2016-04-27-making-a-distributed-design-team-work.md
+++ b/content/posts/2016-04-27-making-a-distributed-design-team-work.md
@@ -29,7 +29,7 @@ room or even the same time zone.
- **Keep it sketchy.** Just because something is destined to be a digital product doesn’t mean it needs to be clean, precise, and pretty. When video chatting, hold your notebook up to the camera, or take a picture of your sketch and upload it to Slack. Colin Macarthur (in Somerville, Massachusetts) adds that when you’re doing things remotely, you spend a lot of time looking at the screen, so you start to think that the computer is the right place to be working through ideas. Often, paper is the more efficient and creative place to be doing that thinking. He uses a document camera in addition to regular video calls to make it faster to show others what he’s thinking through on paper sketches.
-
+{% image "assets/blog/design/sketches.jpg" "Three example sketches of graphs, maps, and page wireframes" %}
*Examples of sketches we’ve shared across our distributed design team.*
- **Design in pairs.** Thinking through design challenges together at the same time can still happen when you’re not co-located. Tools like ScreenHero that allow you to share control of your desktop with a coworker are great ways to capture gestures or process movements. We’ve found that this works especially well for moving from visual design mockups to front end design implementation, or for visual brainstorming. Other shared workspace tools like Mural.ly are great for paired synthesis work, where you may have a handful of us bringing what we’ve learned together from interview sprints. Designing in pairs is also a useful learning and teaching opportunity, since you can walk through trouble spots on the same screen.
@@ -61,11 +61,11 @@ How to get started
+ {% image "assets/blog/data-act-implementation/persona.png" "The persona for an investigator according to the DATA Act team." %}
+ {% image "assets/blog/writing-lab/writing-lab-screenshot.png" "Screen shot of writing lab GitHub page" %}
+ {% image "assets/blog/digital-acquisition-accelerator/persona-template.jpg" "A persona template for participants." %}
+ {% image "assets/blog/digital-acquisition-accelerator/complete-persona.jpg" "A completed proto-persona" %}
+ {% image "assets/blog/digital-acquisition-accelerator/combining-labeling.jpg" "A diagram of culstered post-its." %}
+ {% image "assets/blog/eregs-comments/eregs-comment.gif" "gif of eRegulations comment page" %}
+ {% image "assets/blog/eregs-comments/previous-system.png" "gif of eRegulations comment page" %}
+ {% image "assets/blog/cloud-gov/chandika-raktabija.jpg" "A diagram showing how Chandika and Raktabija work together" %}
+ {% image "assets/blog/denver/union-station.jpg" "" %}
+ {% image "assets/blog/denver/quiet-car.jpg" "A group of bench seating in the Denver GSA space" %}
+ {% image "assets/blog/denver/quiet-car-2.jpg" "" %}
+ {% image "assets/blog/denver/dogbones.jpg" "" %}
+ {% image "assets/blog/denver/gallery-41.jpg" "" %}
+ {% image "assets/blog/content/gds-content-ux.jpg" "" %}
+{% image "assets/blog/meeting-facilitation/workshopping.jpg" "Members of the 18F team at a workshop meeting." %}
### Wrapping up
diff --git a/content/posts/2017-01-04-tracking-the-us-governments-progress-on-moving-https.md b/content/posts/2017-01-04-tracking-the-us-governments-progress-on-moving-https.md
index d794fc652..c42b6df81 100644
--- a/content/posts/2017-01-04-tracking-the-us-governments-progress-on-moving-https.md
+++ b/content/posts/2017-01-04-tracking-the-us-governments-progress-on-moving-https.md
@@ -12,7 +12,7 @@ image: /assets/blog/https-progress/white-house-https.png
hero: false
---
-
+{% image "assets/blog/https-progress/white-house-https.png" "WhiteHouse.gov using HTTPS." %}
[HTTPS](https://https.cio.gov/faq/#what-does-https-do%3f) is a protocol to create secure and private connections to websites or services on the internet. You're using HTTPS to read this article, as indicated by the `https://` and lock icon in your browser's location bar above. Because we use HTTPS for our website, it's very difficult for anyone to modify or inspect the communication between your device and our servers. If we used plain HTTP, it would be very easy for an attacker to insert malware or tracking information into your browser. HTTPS is the [minimum baseline that users should expect](https://18f.gsa.gov/2014/11/13/why-we-use-https-in-every-gov-website-we-make/) from any website they visit, government or otherwise.
@@ -62,13 +62,13 @@ For "parent" federal .gov domains (for example, gsa.gov), we have 18 months of s
Over the last 18 months, HTTPS and HSTS implementation among parent .gov domains has gone up substantially, with the use and enforcement of HTTPS moving from a minority to a majority:
-
+{% image "assets/blog/https-progress/chart-1-https-parent-domains.png" "HTTPS among "parent" .gov domains in the executive branch moved from around 30% to around 75%." %}
In particular, HSTS use among .gov domains was almost non-existent (2%) before M-15-13, and most or all of that was from [an 18F effort in February 2015 to preload the first 20 .gov domains](https://18f.gsa.gov/2015/02/09/the-first-gov-domains-hardcoded-into-your-browser-as-all-https/). HSTS is now present on almost half (43%) of live executive branch parent .gov domains.
Though we don't have time series data for subdomains, we can compare a snapshot of where the approximately 1,000 parent domains and a sizeable collection of approximately 26,000 subdomains ended up on December 31, 2016:
-
+{% image "assets/blog/https-progress/chart-2-https-all-domains.png" "HTTPS usage as of December 31, 2016 for .gov parent domains and subdomains in the executive branch." %}
When broadened to include subdomains, the numbers are lower than when only measuring parent domains. This is likely in part because identifying parent domains is much easier (even inside an agency), and in part because most agencies have a "long tail" of unused, abandoned, testing, or staging subdomains.
@@ -84,7 +84,7 @@ As of right now, that list has about 1,700 "live" federal websites that use a .g
When we break out how many of those visits went to sites that use and enforce HTTPS and use an HSTS policy, the numbers are much higher than if we just measured all subdomains without weighting by traffic:
-
+{% image "assets/blog/https-progress/chart-3-https-by-web-traffic.png" "HTTPS usage for .gov domains in the executive branch when measured by amount of web visits." %}
Of course, this isn't a complete dataset either — none of these are. And each one of them points to more work for federal agencies to do to eliminate the use of insecure connections to their services.
diff --git a/content/posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md b/content/posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md
index 854380d11..2aaf50498 100644
--- a/content/posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md
+++ b/content/posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md
@@ -12,7 +12,7 @@ image: /assets/blog/pshtt-post/https-report-title.png
hero: false
---
-
+{% image "assets/blog/pshtt-post/https-report-title.png" "Cover of HTTPS report delivered by DHS to agency security offices." %}
Sometimes, to accomplish a worthy goal, people and organizations benefit from a little push.
@@ -71,9 +71,9 @@ Together, `pshtt`'s analysis can determine whether a domain fully requires HTTPS
Here's an example of what our reports look like:
-
+{% image "assets/blog/pshtt-post/opm-chart.png" "Chart showing HTTPS progress for the Office of Personnel Management." %}
-
+{% image "assets/blog/pshtt-post/opm-table.jpg" "Table showing HTTPS progress for the Office of Personnel Management." %}
_(OPM has since fixed, or has plans to fix, the findings in this image.)_
diff --git a/content/posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md b/content/posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md
index 189258b61..e32718f09 100644
--- a/content/posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md
+++ b/content/posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md
@@ -34,7 +34,7 @@ Big software systems happen in two major varieties:
Before diving into the best way to mix and match these patterns, I want to describe each of their growth patterns and risks.
+ {% image_with_class "assets/blog/build-big/monolith.jpg" "width-210px" "A drawing representing a monolith" %}
- 
+ {% image_with_class "assets/blog/build-big/quizzical.jpg" "width-80px" "A drawing of a quizzical looking stick figure examining a manageable set of components." %}
+ {% image_with_class "assets/blog/build-big/components.jpg" "width-140px" "" %}
+ {% image_with_class "assets/blog/build-big/quizzical.jpg" "width-80px" "A drawing of a quizzical looking stick figure examining an out-of-control monolith." %}
+ {% image_with_class "assets/blog/build-big/complexity.jpg" "width-380px" "" %}
+ {% image "assets/blog/web-design-standards/before-after-epa.jpg" "" %}
+ {% image "assets/blog/nasa-https/pshtt-code.png" "The configuration file, in python, for the psst tool." %}
+ {% image "assets/blog/nasa-https/pshtt-report.png" "A spreadsheet showing a pshtt report." %}
+ {% image "assets/blog/fec/1-fecnavs.png" "An image of the new and previous FEC website navigation systems" %}
+ {% image "assets/blog/fec/2-newbetafec.png" "An image of three different design iterations for the committee pages" %}
+ {% image "assets/blog/fec/3-legalresource.png" "An image of the new combined legal search results and the new search interface for advisory opinions" %}
+ {% image "assets/blog/fec/4-candidatehelp.png" "An image of the new content structure in the Help for candidate and committees section" %}
+ {% image "assets/blog/fec/5-preflip.png" "An image showing how beta.FEC.gov linked to FEC.gov before the URL change." %}
+ {% image "assets/blog/fec/6-postflip.png" "An image showing how after the URL change, the new FEC.gov only links to transition.fec.gov pages, and not to classic.fec.gov." %}
+ {% image "assets/blog/data-act-implementation/renata.jpg" "Two women smiling, standing side by side. Woman on the right is holding a certificate." %}
+ {% image_with_class "assets/blog/prototype/design-prototype.png" "image-shadowed" "mock up of a prototype" %}
+ {% image_with_class "assets/blog/prototype/paid-fam-leave.png" "image-shadowed" "A prototype for paid family leave. Top of the screen is light blue with header" %}
+ {% image_with_class "assets/blog/user-interview/hi-med-low.jpg" "image-reduce right-aligned" "image of a large white butcher paper with three columns. Each column has a header that relate to level of priority - High, medium, low. Below each header are various post-its" %}
+ {% image_with_class "assets/blog/plainlang/plainlanggov.png" "image-shadowed" "Screenshot of the plainlanguage.gov home page" %}
+ {% image_with_class "assets/blog/advice/form.png" "image-shadowed" "An example of a form. Three sections all numbered from one to three. Each section has two text forms. At the bottom is a blue submit button and a cancel hyperlink that is red" %}
+{% image_with_class "assets/blog/ponce_laura.png" "height-card-lg" "Laura Ponce (she/her) smiling confidently to the camera" %}
+{% image_with_class "assets/blog/mike_gintz_headshot.jpg" "height-card-lg" "Mike Gintz (he/him) holding his really cute black dog smiling at the camera" %}
+{% image_with_class "assets/blog/peterson_ben.jpg" "height-card-lg" "Ben Peterson (he/him) wearing a cap smiling at the camera" %}
+{% image_with_class "assets/blog/18f-logo-l.png" "height-card-lg" "No image available, instead we used the 18F logo" %}
+{% image_with_class "assets/blog/strenio_erin.jpg" "height-card-lg" "Erin Strenio (she/her) smiling at the camera" %}
+{% image_with_class "assets/blog/strothman_julie.jpg" "height-card-lg" "Julie Strothman (she/her) smiling calmly at the camera" %}
+{% image_with_class "assets/blog/jeff-durland.jpg" "height-card-lg" "Jeff Durland (he/him) looking confident as he poses to the camera" %}
+{% image_with_class "assets/blog/mattdobson2.jpg" "height-card-lg" "Matt Dobson (he/him) smiling happily at the camera" %}
+{% image_with_class "assets/blog/pham_jacklynn.jpg" "height-card-lg" "Jacklynn Pham (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/korenfeld_igor.jpg" "height-card-lg" "Black and white picture of Igor Korenfeld (he/him) smiling calmly at the camera" %}
+{% image_with_class "assets/blog/lindpaintner_julia.png" "height-card-lg" "Julia Lindpainter (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/carpenter_malaika.jpeg" "height-card-lg" "Malaika Carpenter (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/rago_michelle.jpg" "height-card-lg" "Michelle Rago (she/her) smiles confidently to the camera" %}
+{% image_with_class "assets/blog/princessojiaku.jpg" "height-card-lg" "Princess Ojiaku confidently looking at the distance away from the camera" %}
+{% image_with_class "assets/blog/oskow_aviva.jpg" "height-card-lg" "Aviva Oskow holding her head using her hand as she looks away from the camera" %}
+{% image_with_class "assets/blog/austin_avatar.jpg" "height-card-lg" "Austin Hernandez (he/him) smiling happily at the camera" %}
+{% image_with_class "assets/blog/luetger_dave.jpg" "height-card-lg" "Dave Luetger (he/him) looks seriously away from the camera" %}
+{% image_with_class "assets/blog/annepetersen.jpg" "height-card-lg" "Anne Petersen (they/them) smiling confidently to the camera" %}
+{% image_with_class "assets/blog/chappen_eleni.jpeg" "height-card-lg" "Eleni Chappen (she/her) smiling proudly at the camera" %}
+{% image_with_class "assets/blog/dunkman_andrew.jpg" "height-card-lg" "Andrew Dunkman (he/him) proudly looking at the camera" %}
+{% image_with_class "assets/blog/matt_jadud.jpg" "height-card-lg" "Matt Jadud (he/him) smiling to the camera as he exits from a blue door" %}
+{% image_with_class "assets/blog/carly-headshot.png" "height-card-lg" "Carly Jugler (she/her) smiling at the camera" %}
+{% image_with_class "assets/blog/edwin_torres.jpg" "height-card-lg" "Edwin Torres (he/him) proudly smiling at the camera" %}
+{% image_with_class "assets/blog/tranovich_james.png" "height-card-lg" "James Tranovich (he/him) looking away from the camera smiling at something in the distance" %}
+{% image_with_class "assets/blog/ryan_ahearn.jpg" "height-card-lg" "Ryan Ahearn (he/him) smiling happily at the camera" %}
+{% image_with_class "assets/blog/hofschneider_ryan.jpg.jpg" "height-card-lg" "Ryan Hofschneider (he/him) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/alex-soble.jpeg" "height-card-lg" "Alex Soble (he/him) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/colin_murphy_headshot.jpg" "height-card-lg" "Colin Murphy (he/him) confidently looking at the camera" %}
+{% image_with_class "assets/blog/theis-emily.png" "height-card-lg" "Emily Theis (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/norman_allison.jpg" "height-card-lg" "Allison Norman (she/her) in a black and white picture smiling happily at the camera" %}
+{% image_with_class "assets/blog/juneau-vogel_selena.jpg" "height-card-lg" "Selena Juneau-Vogel (she/her) staring confidently at the camera" %}
+{% image_with_class "assets/blog/roy_ayushi.jpeg" "height-card-lg" "Ayushi Roy (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/patrick_kigongo.jpeg" "height-card-lg" "Patrick Kigongo (he/him) looking confidently at the camera with a bookcase behind him" %}
+{% image_with_class "assets/blog/hannah_kane.jpg" "height-card-lg" "Hannah Kane (she/her) smiling confidently at the camera" %}
+{% image_with_class "assets/blog/glenn.grieves.jpg" "height-card-lg" "Glenn Grieves (he/him) smiling happily at the camera" %}
+{% image_with_class "assets/blog/brouilette_alan.jpg" "height-card-lg" "Alan Brouilette (he/him) looking confidently away from the camera" %}
+{% image_with_class "assets/blog/miatta-myers.png" "height-card-lg" "Miatta Myers (she/her) smiling happily at the camera" %}
+{% image "assets/blog/navigating-atos/example-boundary-diagram.png" "boundary diagram with lines describing the types of connections between entities such as an API and routers" %}
As you explore the requirements of your system, consider selecting an architectural foundation that allows you to inherit as many of the [NIST 800-53 controls](https://csrc.nist.gov/publications/detail/sp/800-53/rev-5/final) as possible from an existing provider or product. This can dramatically reduce the scope of work required for the ATO, reduce timelines, and improve overall system security.
@@ -88,7 +88,7 @@ You can still make changes and keep building and improving your system after its
## Embrace DevOps, continuous integration, and automated testing, while staying flexible on format
-
+{% image "assets/blog/navigating-atos/zap.png" "ZAP scanning report indicating several findings" %}
DevOps, continuous integration, automated testing, automated security scanning using open-source tools such as OWASP ZAP: all of these modern software development practices show your team’s commitment to rigorous testing of your system. Take the time to walk through the practices your team is employing, and show how these techniques test and verify the security of your system. If your development team is running a full suite of automated tests for correctness, security, and accessibility on every proposed code change, make sure your security compliance team knows this is happening and sees the benefits. You may need to be flexible on the format you use to share information about the testing you are doing. Taking the time to put results into a familiar format like Word, PDF, or an HTML page can go a long way.
diff --git a/content/posts/2021-10-21-the_weekly_ship.md b/content/posts/2021-10-21-the_weekly_ship.md
index ca816709f..0bf8906ef 100644
--- a/content/posts/2021-10-21-the_weekly_ship.md
+++ b/content/posts/2021-10-21-the_weekly_ship.md
@@ -8,7 +8,7 @@ tags:
excerpt: "The weekly ship has been a staple of 18F projects for years. It is a way to engage partners, inform teammates, and reflect on our work."
---
-
+{% image "assets/blog/ship.jpeg" "Photo of a ship at sunset" %}
At 18F and its parent office Technology Transformation Services (TTS), we are committed to [working in the open](https://18f.gsa.gov/open-source-policy/). One way we do that with agency partners is through our "weekly ship" – a weekly memo that captures what we did that week, what’s upcoming, and how much we’ve spent on the project so far. We send weekly ships throughout the duration of a project. The weekly ship is a way we engage with our partners, but it’s also an internal ritual that promotes transparency by giving our co-workers project insight. At a glance, both our partners and anyone in TTS can understand the status of a project, the state of its funding, and where the project is heading.
diff --git a/content/posts/2022-01-21-what-have-you-learned-from-other-18F-designers.md b/content/posts/2022-01-21-what-have-you-learned-from-other-18F-designers.md
index 846e1dd7c..1c9e2d8bb 100644
--- a/content/posts/2022-01-21-what-have-you-learned-from-other-18F-designers.md
+++ b/content/posts/2022-01-21-what-have-you-learned-from-other-18F-designers.md
@@ -12,7 +12,7 @@ tags:
excerpt: "We asked 18F designers what they've learned from fellow designers while working together. Here's what they said."
---
-
+{% image "assets/blog/team_brainstorming.png" "Image of team brainstorming" %}
Special thanks to designer Jia Gu for the images in this post
{: .font-alt-xs }
@@ -91,7 +91,7 @@ I learned from fellow UX designer Melissa Braxton how to foster relationships an
+{% image "assets/blog/finding-post-award-balance/loc-fdr-study.jpg" "Franklin Roosevelt inspects stamps with a magnifying glass" %}
+{% image "assets/blog/inno-labs/portfolio-scope.png" "A rectangular graphic in landscape orientation with a white background. On the left is a cluster of nine small and medium-sized circles in shades of blue, gray, and black. The cluster is above a line of text that says, Overly-broad portfolio. On the right is a cluster with a large dark blue circle and three smaller ones to its right; medium blue, black, and gray. The text below them reads, More narrow scope with a specialized focus. Between the two lines of text, a thin, dark arrow points to the right, indicating that one should aim for a more narrow, focused scope for better success." %}
### Moving from experimentation to delivery without adequate support
diff --git a/content/posts/2022-11-14-improving-inclusion-continuously-how-we-iterated-on-our-bot-to-promote-more-inclusive-and-thoughtful-language.md b/content/posts/2022-11-14-improving-inclusion-continuously-how-we-iterated-on-our-bot-to-promote-more-inclusive-and-thoughtful-language.md
index 42f46133e..ef8df9cad 100644
--- a/content/posts/2022-11-14-improving-inclusion-continuously-how-we-iterated-on-our-bot-to-promote-more-inclusive-and-thoughtful-language.md
+++ b/content/posts/2022-11-14-improving-inclusion-continuously-how-we-iterated-on-our-bot-to-promote-more-inclusive-and-thoughtful-language.md
@@ -26,7 +26,7 @@ chat’s Slackbot](https://18f.gsa.gov/2016/01/12/hacking-inclusion-by-customizi
auto-response: whenever it saw the word “guys,” it would respond and ask if the
person meant something else, such as “friends” or “y’all.”
-
+{% image "assets/blog/inclusion-bot/legacy-guys-bot.png" "A screenshot from Slack showing the legacy bot response. It is a message with the text “custom response” above it. It is from the user Slackbot and the message says, “Did you mean y'all?” It also includes a link with the text “What's this?”" %}
Telling the stories of our work through avenues such as our blog is an important
way we adhere to our core values like working in the open and scaling our impact
@@ -75,12 +75,12 @@ suggesting different language. To help with these concerns, we updated the bot
so that only the person who triggers it will see a response. The Inclusion Bot
also adds an emoji to the original statement, signifying that it has responded:
-
+{% image "assets/blog/inclusion-bot/bot-response.png" "A screenshot taken from Slack. A user named Charlie Demonstrata, displaying pronouns as he/him and displaying their location as DC, says, “Hey guys! Just wanted to let you know this project was being grandfathered into the previous structure.” This message has an emoji response of a waving hand. Beneath the message is a response from a user named Inclusion Bot. This message has the text “Only visible to you” above it, and says, “Hello! Our inclusive TTS culture is built one interaction at a time, and inclusive language is the foundation. This bot helps us practice our inclusive values here in TTS. Some of your message could be unintentionally non-inclusive. Here are some alternatives that might work better.” It then suggests, “Instead of saying grandfathered, how about included retroactively?” and “Instead of saying guys, how about folks?” There is a button to the right that reads, “Why this suggestion?” At the bottom, there is small text that reads, “You can view the full list of words and phrases this bot watches for.” The text is blue, indicating a link." %}
Additionally, we added a button that users can click to get more information
about why the highlighted words or phrases can be problematic:
-
+{% image "assets/blog/inclusion-bot/bot-info-popup.png" "A screenshot of a Slack popup message. The header is an icon representing the bot Charlie, and the header text says “Inclusion Bot.” The first paragraph reads, “'Guys' is commonly used to refer to groups of people, but it is a gendered pronoun. It can make people who do not identify as 'guys' feel excluded even if that's not the intent. Regardless of our cultural background or innocent intent, we recommend alternative language that makes it clear everyone is included in the conversation! Consider a word like 'y'all' or 'folks' instead!” The second paragraph reads, “'Grandfathered' arose from voter restrictions that prevented Black people from voting. We want to avoid slavery and racist oppression references.” The third paragraph is small text that reads, “See our blog post for more information about this bot.” The words “blog post” are blue, indicating a link." %}
## Why it matters to TTS
diff --git a/content/posts/2023-02-24-18f-checks-in-with-emily-read-and-the-usgs-water-resources-mission-area-projects.md b/content/posts/2023-02-24-18f-checks-in-with-emily-read-and-the-usgs-water-resources-mission-area-projects.md
index 2ad02f895..d46a5e51c 100644
--- a/content/posts/2023-02-24-18f-checks-in-with-emily-read-and-the-usgs-water-resources-mission-area-projects.md
+++ b/content/posts/2023-02-24-18f-checks-in-with-emily-read-and-the-usgs-water-resources-mission-area-projects.md
@@ -18,7 +18,7 @@ excerpt: >
_This is the second in a series of blog posts where 18F checks in with our partners throughout the government. Previously in this series: [18F Checks In With Jerome Lee and the eAPD Project](https://18f.gsa.gov/2022/11/29/18f-checks-in-with-jerome-lee-and-the-eapd-project/)._
-
+{% image "assets/blog/usgs-wma-checkin/20210722_150403.jpg" "USGS hydrologic technician Travis Gibson confirms Great Salt Lake water levels at the SaltAire gauge." %}
USGS hydrologic technician Travis Gibson confirms Great Salt Lake water levels at the SaltAire gauge. Source: [USGS Multimedia Gallery](https://www.usgs.gov/media/images/great-salt-lake-reaches-new-historic-low)
{: .font-alt-xs }
diff --git a/content/posts/2023-04-25-18f-checks-in-with-the-dawson-project-at-the-us-tax-court.md b/content/posts/2023-04-25-18f-checks-in-with-the-dawson-project-at-the-us-tax-court.md
index 9ce72afa5..7a5f71508 100644
--- a/content/posts/2023-04-25-18f-checks-in-with-the-dawson-project-at-the-us-tax-court.md
+++ b/content/posts/2023-04-25-18f-checks-in-with-the-dawson-project-at-the-us-tax-court.md
@@ -21,7 +21,7 @@ excerpt: >
_This is the third in a series of blog posts where 18F checks in with our partners throughout the government. Previously in this series: [18F Checks In With Emily Read and the USGS Water Resources Mission Area Projects](https://18f.gsa.gov/2023/02/24/18f-checks-in-with-emily-read-and-the-usgs-water-resources-mission-area-projects/)._
-
+{% image "assets/blog/ustc-dawson-checkin/dawson-home.png" "The U.S. Tax Court DAWSON electronic case file system's homepage" %}
This is the current home page for DAWSON. The Tax Court’s electronic filing and case management system, launched in 2020, is named for the Court’s longest-serving judge, Howard A. Dawson, Jr. This system is entirely web-based and open source.
{: .font-alt-xs }
diff --git a/content/posts/2023-05-08-andrew-hyder-award.md b/content/posts/2023-05-08-andrew-hyder-award.md
index cdf100763..8ce91669d 100644
--- a/content/posts/2023-05-08-andrew-hyder-award.md
+++ b/content/posts/2023-05-08-andrew-hyder-award.md
@@ -14,7 +14,7 @@ TTS annually awards the Andrew Hyder Government Service Improvement Award to one
This award commemorates the life and work of Andrew Hyder, a consulting software engineer at 18F who tragically passed away in 2021. Andrew was a community organizer who brought together activists, technologists, community members, and others to improve the way that governments delivered services to those in need. Examples of his contributions can be found in these blog posts: [A dashboard for privacy offices](https://18f.gsa.gov/2020/12/15/a-dashboard-for-privacy-offices/) and [Forms Resource for Federalist Users](https://18f.gsa.gov/2020/02/18/forms-resource-federalist/).
-
+{% image "assets/blog/andrew-hyder-award-2023/andrew-hyder-photo.png" "Andrew Hyder speaking at Code for America" %}
"Feed the people" was Andrew’s well-known refrain, though it went beyond just nutritional benefits and programs like [GetCalFresh](https://www.getcalfresh.org/en/about). He challenged colleagues and partners to think about the true benefits and costs of our work, always seeing the connections from our keyboards to the lived experiences of people across the country.
@@ -22,7 +22,7 @@ It’s easy when you’re working at a high level to forget to pause, adjust, an
As we open the 2023 award nomination period to those in TTS internally, we’d like to recognize the work of 2022 honorees Jessica Dussault (18F) and Will Cahoe (10x).
-
+{% image "assets/blog/andrew-hyder-award-2023/jess-dussault-hyder-award.png" "Jess Dussault profile picture" %}
**Jess** is fun-loving, sincere, hard-working, and dedicated, and she brings enthusiasm and energy to everything that she works on. In her time as a consulting software engineer at 18F, Jess has demonstrated a dedication and enthusiasm to improving government public service through her efforts on projects and contributions to TTS culture.
@@ -30,7 +30,7 @@ She worked on improving how the public learns about government services through
Jess shares new approaches to improving government service through her writings on 18F’s blog, the TTS Engineering Newsletter, every day in Slack, and in the numerous meetings, team meetings, and coffees that she partakes in.
-
+{% image "assets/blog/andrew-hyder-award-2023/will-cahoe-hyder-award-photo.png" "Will Cahoe profile picture" %}
In all of **Will**’s work, he embodies the enthusiasm, warmth, and dedication that so many of us remember as hallmarks of Andrew's work in TTS. Will began his federal career in the Peace Corps, and joined TTS soon after. From his first day at GSA, he has infused TTS with humor, kindness, appreciation and celebration of differences, and an immovable dedication to public service. Will's creativity and ingenuity surface in everything he does – from problem solving to public speaking. Nothing Will does is dull, and the federal government is a better place because of his inventiveness.
diff --git a/content/posts/2023-09-07-catching-up-with-the-tanf-data-portal-project.md b/content/posts/2023-09-07-catching-up-with-the-tanf-data-portal-project.md
index 64e6a398c..69a40748f 100644
--- a/content/posts/2023-09-07-catching-up-with-the-tanf-data-portal-project.md
+++ b/content/posts/2023-09-07-catching-up-with-the-tanf-data-portal-project.md
@@ -58,7 +58,7 @@ Designing the contract and the system the way we did — for OFA to have control
**Lauren Frohlich**: Yeah, there are some milestones we can definitely put on there.
-
+{% image "assets/blog/tanf-data-portal-catchup/TDP-checkin--emotion-chart.jpg" "A line chart showing the emotional highs and lows of the TANF product owner over 5 years. The highs include the contract getting awarded and getting the ATO, followed by the first 10 partners using the new system. Emotions are at their lowest at the planned 18F roll off, and integration challenges afterwards. The emotions are consistently high when onboarding partners is in full swing." %}
**Lauren Frohlich**: Getting to ATO, that was like a 7 out of 10. And, not to be too negative but there were definitely some low points. It started to turn up again after the integration challenges. Some high points were getting focused on feature parity with the old system and launching production.
diff --git a/content/posts/2023-09-21-18f-website-refresh.md b/content/posts/2023-09-21-18f-website-refresh.md
index 88a191575..4ddac19a0 100644
--- a/content/posts/2023-09-21-18f-website-refresh.md
+++ b/content/posts/2023-09-21-18f-website-refresh.md
@@ -37,7 +37,7 @@ Interviews with our leadership team also clarified current organizational priori
## We did just enough design
-
+{% image "assets/blog/18f-website-refresh/refreshed-screenshot-collage.jpg" "A collage showcasing three of the newly refreshed 18F website pages." %}
As one would expect with a site “refresh,” we kept the amount of design to a minimum.
@@ -59,7 +59,7 @@ Because the previous site also used the U.S. Web Design System (USWDS), translat
## Websites are living products
-
+{% image "assets/blog/18f-website-refresh/refreshed-website-ribbon-cutting.jpg" "A ribbon cutting ceremony with the new 18F website in the background on a stage at GSA Headquarters." %}
That’s how we launched a new 18f.gsa.gov in the course of several weeks. It wasn’t a simple process, but it was a steady one thanks to clear goals, disciplined decisions, and good coordination.
diff --git a/content/posts/2024-01-12-andrew-hyder-award.md b/content/posts/2024-01-12-andrew-hyder-award.md
index 1c8b69664..2ceb2e094 100644
--- a/content/posts/2024-01-12-andrew-hyder-award.md
+++ b/content/posts/2024-01-12-andrew-hyder-award.md
@@ -11,7 +11,7 @@ excerpt: |
TTS is proud to present the 2023 Andrew Hyder Government Service Improvement Award to Lalitha Jonnalagadda. This is awarded annually to one or more federal employees who demonstrate both excellence in their work and a commitment to improving the public's experience with government.
-
+{% image "assets/blog/andrew-hyder-2023/jonnalagadda.jpg" "Lalitha Jonnalagadda" %}
Lalitha is a product manager at 18F. In her tenure at TTS, she has had the opportunity to collaborate with amazing federal teams through visioning, strategizing, coaching, delivering and launching digital products, most notably the [Department of Justice's civil rights portal](https://civilrights.justice.gov/). At 18F, Lalitha collaborated with and led teams in developing and coaching product management at FEMA, EPA, DOE, HHS' Office of Head Start and DOJ's OIP (for foia.gov).
@@ -25,6 +25,6 @@ Lalitha lives in Virginia with her husband and two boys. She is motivated to sol
This award commemorates the life and work of Andrew Hyder, a consulting software engineer at 18F who passed away in 2021. Andrew was a community organizer who brought together activists, technologists, community members, and others to improve the way that governments delivered services to those in need. Examples of his contributions can be found in these blog posts: [A dashboard for privacy offices](https://18f.gsa.gov/2020/12/15/a-dashboard-for-privacy-offices/) and [Forms Resource for Federalist Users](https://18f.gsa.gov/2020/02/18/forms-resource-federalist/).
-
+{% image "assets/blog/andrew-hyder-2023/hyder.png" "Andrew Hyder speaking at Code for America" %}
"Feed the people" was Andrew's well-known refrain, though it went beyond just nutritional benefits and programs like [GetCalFresh](https://www.getcalfresh.org/en/about). He challenged colleagues and partners to think about the true benefits and costs of our work, always seeing the connections from our keyboards to the lived experiences of people across the country.