From a707a4245a4bb073b5217e7909198d7b39de7683 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 22 Dec 2016 11:38:22 -0600 Subject: [PATCH 01/79] add new homepage layout --- pages/home.html | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/home.html b/pages/home.html index cba109412..bcb507c04 100644 --- a/pages/home.html +++ b/pages/home.html @@ -2,6 +2,7 @@ permalink: / layout: default title: Home +redirect_from: /dashboard/ ---
From 3f215de95238f58813da60c5e0b0353ba5850b7c Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 22 Dec 2016 17:51:12 -0600 Subject: [PATCH 02/79] our work --- Gemfile.lock | 8 --- _data/navigation.yml | 6 +-- _includes/card.html | 10 +++- _plugins/projects.rb | 0 _plugins/utility.rb | 36 +++++++++++-- _projects/fec-gov.md | 2 + _projects/hhs-states.md | 8 +-- _projects/test-gov.md | 36 +++++++++++++ _sass/_components/card.scss | 5 ++ _sass/_components/filters.scss | 19 +++++++ _sass/_components/links.scss | 3 ++ _sass/_components/lists.scss | 7 +++ _sass/_core/variables.scss | 1 + _sass/_templates/what-we-deliver.scss | 38 -------------- _styleguide/index.md | 2 + assets/css/main.scss | 4 +- pages/home.html | 75 +++++++++++---------------- pages/our-work.html | 65 +++++++++++++++++++++++ 18 files changed, 221 insertions(+), 104 deletions(-) create mode 100644 _plugins/projects.rb create mode 100644 _projects/test-gov.md create mode 100644 _sass/_components/filters.scss create mode 100644 _sass/_components/links.scss create mode 100644 _sass/_components/lists.scss delete mode 100644 _sass/_templates/what-we-deliver.scss create mode 100644 pages/our-work.html diff --git a/Gemfile.lock b/Gemfile.lock index d02ba4f94..44f61cd15 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,10 +1,3 @@ -GIT - remote: https://github.com/18F/jekyll-archives.git - revision: 9ad78a4aa38de0af570a53f3c12558408e9537f7 - specs: - jekyll-archives (2.1.0) - jekyll (>= 2.4) - GEM remote: https://rubygems.org/ specs: @@ -135,7 +128,6 @@ DEPENDENCIES accesslint-ci (= 0.2.6) html-proofer jekyll (~> 3.1) - jekyll-archives! jekyll-feed jekyll-paginate jekyll-redirect-from diff --git a/_data/navigation.yml b/_data/navigation.yml index 725918c25..e69c67cb3 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -7,9 +7,9 @@ assigned: in_drawer: false in_footer: false - - text: What we deliver - href: pages/what-we-deliver.md - permalink: /what-we-deliver/ + text: Our work + href: pages/our-work.md + permalink: /our-work/ in_menu: true in_drawer: true in_footer: true diff --git a/_includes/card.html b/_includes/card.html index c9c067770..4e47cac00 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -1,6 +1,14 @@ {% assign card_link = include.link | prepend: site.baseurl %} -
+{% assign columns = include.columns | default: 3 %} + +{% if columns == 2 %} + {% assign wds_grid_class = 'usa-width-one-half' %} +{% else %} + {% assign wds_grid_class = 'usa-width-one-third' %} +{% endif %} + +
{{ include.image_alt }} diff --git a/_plugins/projects.rb b/_plugins/projects.rb new file mode 100644 index 000000000..e69de29bb diff --git a/_plugins/utility.rb b/_plugins/utility.rb index 2624ae413..024388c99 100644 --- a/_plugins/utility.rb +++ b/_plugins/utility.rb @@ -96,11 +96,39 @@ def check_type(value, second_value = nil, third_value = nil) _type = value.class _second_type = second_value.class _third_type = third_value.class - # puts '---------------------' - # puts "#{value} is a #{_type}" - # puts '---------------------' - # binding.pry + puts '---------------------' + puts "#{value} is a #{_type}" + puts '---------------------' + binding.pry end + + def find_collection(site, collection) + document = site.collections.select { |c| c.label == collection }[0].docs + document.map { |d| d.data } + end + + def where_obj(array, one, two) + array.map do |object| + if object[one] && object[two] + new_o = {} + new_o[one] = object[one] + new_o[two] = object[two] + new_o + end + end.uniq + end + + def buckets(array, buckets) + array.in_groups(buckets) + end + end +end + +class Array + def in_groups(num_groups) + return [] if num_groups == 0 + slice_size = (self.size/Float(num_groups)).ceil + self.each_slice(slice_size).to_a end end Liquid::Template.register_filter(Jekyll::Utility) diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 3a8b9fafb..04d694eaa 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -11,6 +11,8 @@ tags: expiration_date: github_repo: https://github.com/18F/openFEC-web-app project_url: https://beta.fec.gov/ +agency_partner: Federal Election Commission (FEC) +agency_partner_url: /work/fec/ --- The Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections. diff --git a/_projects/hhs-states.md b/_projects/hhs-states.md index 4d9682b77..52af849fa 100644 --- a/_projects/hhs-states.md +++ b/_projects/hhs-states.md @@ -9,8 +9,10 @@ image_accessibility: "Grayscale photograph of eleven people meeting in small gro tags: - state and local practice expiration_date: -github_repo: -project_url: +github_repo: +project_url: +agency_partner: Health and Human Services +agency_partner_url: /work/hhs/ --- Health and Human Services (HHS) is a federal agency, but many crucial HHS programs — like Medicaid — are administered by states. @@ -21,4 +23,4 @@ HHS encourages states to upgrade legacy systems by offering funding incentives, In our first project with HHS, we helped California get on the right path to buying a new system for child welfare case management by facilitating a two-day workshop to break a monolithic contract into smaller pieces (along with colleagues from California’s Department of Social Services, the Office of Systems Integration, and Code for America). -Next, HHS asked us to work with other states who needed to procure case management systems for child welfare. We also began applying what we learned to a new challenge: working with the Centers for Medicare and Medicaid Systems (also within HHS) to support states who were upgrading Medicaid data systems. \ No newline at end of file +Next, HHS asked us to work with other states who needed to procure case management systems for child welfare. We also began applying what we learned to a new challenge: working with the Centers for Medicare and Medicaid Systems (also within HHS) to support states who were upgrading Medicaid data systems. diff --git a/_projects/test-gov.md b/_projects/test-gov.md new file mode 100644 index 000000000..04d694eaa --- /dev/null +++ b/_projects/test-gov.md @@ -0,0 +1,36 @@ +--- +layout: project-tag-results +project-type: "Project" +title: "The Federal Election Commission" +subtitle: Making campaign data easier to use +excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. +image: /assets/img/home/hero-fec.png +image_accessibility: Image of the FEC data explorer with stylized magnifying glass. +tags: +- fec.gov +expiration_date: +github_repo: https://github.com/18F/openFEC-web-app +project_url: https://beta.fec.gov/ +agency_partner: Federal Election Commission (FEC) +agency_partner_url: /work/fec/ +--- + +The Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections. + +The FEC has published campaign finance data for decades, but their legacy website was dense and hard to use. They wanted to make it easier for journalists, transparency groups, and members of the public to use their data and learn how money flows through federal campaigns. + +### Start small, learn together + +We started by working with the FEC to launch an API (application programming interface), which allows technical users (like journalists) to access data in a predictable way. + +Next, we launched a [public beta](https://beta.fec.gov), which allowed us to get feedback from real users and build new features based on what we learned. + +As our FEC partners saw the benefits of working iteratively and putting user needs first, they asked us to work alongside them to solve other problems, including: + +- Creating search tools so laws, regulations, and enforcement actions are easier to find and use. +- Migrating confusing legacy content into a new structure so visitors can find and understand the information they need. +- Exploring how to update the online filing process to help political groups and candidates file the right forms. + +Through all these projects, we’ve worked closely with FEC teams so they can transform their whole approach to interacting with the public online. + +In the words of one product owner at the FEC: “We didn’t know where to start, but in the end, we got so much more than a website. We had a complete culture change about how to do user-centered design and agile.” diff --git a/_sass/_components/card.scss b/_sass/_components/card.scss index bdd40e2bd..80ddd50e9 100644 --- a/_sass/_components/card.scss +++ b/_sass/_components/card.scss @@ -1,8 +1,13 @@ .card-link { border: 1px solid $color-gray-lighter; display: inline-block; + margin-bottom: $paragraph-margins-thick; text-decoration: none; + @include media($medium-screen) { + margin-bottom: 0; + } + &:hover, &:focus { border: 1px solid $color-bright-hover; diff --git a/_sass/_components/filters.scss b/_sass/_components/filters.scss new file mode 100644 index 000000000..876431697 --- /dev/null +++ b/_sass/_components/filters.scss @@ -0,0 +1,19 @@ +.form-checkboxes { + margin-bottom: $paragraph-margins-thick; +} + +.form-inline { + + display: inline-block; + margin-right: $paragraph-margins-thick; + position: relative; + + input { + margin-left: 0; + } + + input, + label { + cursor: pointer; + } +} diff --git a/_sass/_components/links.scss b/_sass/_components/links.scss new file mode 100644 index 000000000..4f85628bb --- /dev/null +++ b/_sass/_components/links.scss @@ -0,0 +1,3 @@ +.link-plain { + text-decoration: none; +} diff --git a/_sass/_components/lists.scss b/_sass/_components/lists.scss new file mode 100644 index 000000000..abe19d712 --- /dev/null +++ b/_sass/_components/lists.scss @@ -0,0 +1,7 @@ +.list-columns { + @include unstyled-list(); + + li { + margin-bottom: $paragraph-margins; + } +} diff --git a/_sass/_core/variables.scss b/_sass/_core/variables.scss index 19afd54ac..aaaecbc86 100644 --- a/_sass/_core/variables.scss +++ b/_sass/_core/variables.scss @@ -31,6 +31,7 @@ $color-gray-hover : #fafafa; // Spacing $section-margins: 5rem; $paragraph-margins: 1.5rem; +$paragraph-margins-thick: 3rem; $nav-width-extra: 88px; // width needed to add so nav doesn't break on medium-screen size $text-max-width: 60.6rem; diff --git a/_sass/_templates/what-we-deliver.scss b/_sass/_templates/what-we-deliver.scss deleted file mode 100644 index 9d6e29a67..000000000 --- a/_sass/_templates/what-we-deliver.scss +++ /dev/null @@ -1,38 +0,0 @@ -// What we deliver page -// ========================== - -.page-what-we-deliver { - .main-content { - img { - width: 8rem; - margin-bottom: $site-margins; - } - } - - .usa-width-one-sixth { - text-align: center; - - @include media($medium-screen) { - @include span-columns(2); - - &:nth-child(3n) { - @include span-columns(2); - } - - &:nth-child(6n) { - margin-right: 0; - } - } - } - - .section-list { - &:first-child { - padding-top: 0; - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - } -} diff --git a/_styleguide/index.md b/_styleguide/index.md index 67f5351a3..8eebed207 100644 --- a/_styleguide/index.md +++ b/_styleguide/index.md @@ -110,6 +110,7 @@ nav_items: title="The Federal Election Commission" description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" link=dead_end_link + columns=2 %} {% include card.html image_src="/assets/img/home/hero-every-kid.png" @@ -117,6 +118,7 @@ nav_items: title="State and local" description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" link=dead_end_link + columns=2 %}
{% endcapture %} diff --git a/assets/css/main.scss b/assets/css/main.scss index 7122d82f7..bde0ceb04 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -44,6 +44,9 @@ @import "_components/search-results"; @import "_components/footer"; @import "_components/card"; +@import "_components/filters"; +@import "_components/lists"; +@import "_components/links"; // 18F site templates // ========================== @@ -51,4 +54,3 @@ @import "_templates/home"; @import "_templates/how-we-work"; @import "_templates/join"; -@import "_templates/what-we-deliver"; diff --git a/pages/home.html b/pages/home.html index 09244840c..14afbbe8c 100644 --- a/pages/home.html +++ b/pages/home.html @@ -5,12 +5,10 @@ redirect_from: /dashboard/ --- -
-
-
-

We’re helping the Federal Election Commission make campaign finance data easier to use.

- Learn more about fec.gov -
+
+
+

We work with federal agencies to approach technology projects in new ways

+
@@ -22,48 +20,27 @@

Building 21st century digital government

As an office within the General Services Administration, we know how to work with government. All our projects support agencies in transforming how they deliver digital services and technology products.

-
-
-

What we deliver

-
-
-
- -
-

Custom products to solve your problems

-
-
-
- -
-

Innovative ways to buy technology

-
-
-
- -
-

Platforms built for government

-
-
-
- -
-

A path to becoming a digitally-powered organization

-
-
-
- -
-

Modern digital service techniques

-
-
-
- Learn more about what we deliver -
-
+
+

Featured projects

+ {% include card.html + image_src="/assets/img/home/hero-fec.png" + image_alt="Image of a chart with a stylized magnifying glass" + title="The Federal Election Commission" + description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" + link="/project/fec-gov/" + columns=2 + %} + {% include card.html + image_src="/assets/img/home/hero-every-kid.png" + image_alt="Image of state and local" + title="State and local" + description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" + link="/project/fec-gov/" + columns=2 + %}
-

Blog

+

From our blog

    {% for post in site.posts limit:3 %}
  • @@ -81,3 +58,9 @@

    {% endfor %}

+
+
+

Let's work together

+ +
+
diff --git a/pages/our-work.html b/pages/our-work.html new file mode 100644 index 000000000..f2b46c52e --- /dev/null +++ b/pages/our-work.html @@ -0,0 +1,65 @@ +--- +title: What we deliver +permalink: /our-work/ +layout: default-intro +lead: We help federal agencies build, buy, and share modern digital services to improve the user experience of government. +content_wide: true +redirect_from: + - /consulting/ + - /what-we-deliver/ +--- +
+

Who and how we've helped

+

Filter by project type

+
+ + + + + + + + + + + + +
+ {% include card.html + image_src="/assets/img/home/hero-fec.png" + image_alt="Image of a chart with a stylized magnifying glass" + title="The Federal Election Commission" + description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" + link="/project/fec-gov/" + %} + {% include card.html + image_src="/assets/img/home/hero-every-kid.png" + image_alt="Image of state and local" + title="State and local" + description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" + link="/project/fec-gov/" + %} + {% include card.html + image_src="/assets/img/home/hero-every-kid.png" + image_alt="Image of state and local" + title="State and local" + description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" + link="/project/fec-gov/" + %} +
+
+ {% assign agency_partners = site | find_collection: 'projects' | where_obj: 'agency_partner', 'agency_partner_url' %} + {% assign partner_buckets = agency_partners | buckets: 3 %} +

Agency Partners and public offerings

+
    + {% for bucket in partner_buckets %} +
  • + +
    • + {% endfor %} +
+
From d88b42dc5e4dc7c16298872f9735ba491516a971 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Fri, 23 Dec 2016 13:38:07 -0600 Subject: [PATCH 03/79] programmatically generate cards --- _includes/card.html | 4 +++- _plugins/projects.rb | 0 _plugins/utility.rb | 12 ++++++------ _projects/fec-gov.md | 2 ++ _projects/hhs-states.md | 2 ++ _projects/test-gov.md | 36 ----------------------------------- pages/our-work.html | 42 +++++++++++++++++------------------------ 7 files changed, 30 insertions(+), 68 deletions(-) delete mode 100644 _plugins/projects.rb delete mode 100644 _projects/test-gov.md diff --git a/_includes/card.html b/_includes/card.html index 4e47cac00..883234e14 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -8,7 +8,9 @@ {% assign wds_grid_class = 'usa-width-one-third' %} {% endif %} -
+{% assign project_bucket = include.project_bucket | default: 'none' %} + +
{{ include.image_alt }} diff --git a/_plugins/projects.rb b/_plugins/projects.rb deleted file mode 100644 index e69de29bb..000000000 diff --git a/_plugins/utility.rb b/_plugins/utility.rb index 024388c99..07271b01c 100644 --- a/_plugins/utility.rb +++ b/_plugins/utility.rb @@ -107,19 +107,19 @@ def find_collection(site, collection) document.map { |d| d.data } end - def where_obj(array, one, two) + def where_obj(array, first, second) array.map do |object| - if object[one] && object[two] + if object[first] && object[second] new_o = {} - new_o[one] = object[one] - new_o[two] = object[two] + new_o[first] = object[first] + new_o[second] = object[second] new_o end end.uniq end - def buckets(array, buckets) - array.in_groups(buckets) + def in_groups(array, groups) + array.in_groups(groups) end end end diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 04d694eaa..8959b51bf 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -3,6 +3,7 @@ layout: project-tag-results project-type: "Project" title: "The Federal Election Commission" subtitle: Making campaign data easier to use +permalink: /project/fec-gov/ excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. image: /assets/img/home/hero-fec.png image_accessibility: Image of the FEC data explorer with stylized magnifying glass. @@ -13,6 +14,7 @@ github_repo: https://github.com/18F/openFEC-web-app project_url: https://beta.fec.gov/ agency_partner: Federal Election Commission (FEC) agency_partner_url: /work/fec/ +project_bucket: laws-and-mandates --- The Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections. diff --git a/_projects/hhs-states.md b/_projects/hhs-states.md index 52af849fa..bac72dc14 100644 --- a/_projects/hhs-states.md +++ b/_projects/hhs-states.md @@ -3,6 +3,7 @@ layout: project-tag-results project-type: "Partner" title: "Health and Human Services" subtitle: Helping states update crucial systems +permalink: /project/hhs-states/ excerpt: HHS hired 18F to help states implement current best practices and upgrade legacy systems. image: /assets/img/projects/hero_stateandlocal.png image_accessibility: "Grayscale photograph of eleven people meeting in small groups during a workshop" @@ -13,6 +14,7 @@ github_repo: project_url: agency_partner: Health and Human Services agency_partner_url: /work/hhs/ +project_bucket: internal-services --- Health and Human Services (HHS) is a federal agency, but many crucial HHS programs — like Medicaid — are administered by states. diff --git a/_projects/test-gov.md b/_projects/test-gov.md deleted file mode 100644 index 04d694eaa..000000000 --- a/_projects/test-gov.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -layout: project-tag-results -project-type: "Project" -title: "The Federal Election Commission" -subtitle: Making campaign data easier to use -excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. -image: /assets/img/home/hero-fec.png -image_accessibility: Image of the FEC data explorer with stylized magnifying glass. -tags: -- fec.gov -expiration_date: -github_repo: https://github.com/18F/openFEC-web-app -project_url: https://beta.fec.gov/ -agency_partner: Federal Election Commission (FEC) -agency_partner_url: /work/fec/ ---- - -The Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections. - -The FEC has published campaign finance data for decades, but their legacy website was dense and hard to use. They wanted to make it easier for journalists, transparency groups, and members of the public to use their data and learn how money flows through federal campaigns. - -### Start small, learn together - -We started by working with the FEC to launch an API (application programming interface), which allows technical users (like journalists) to access data in a predictable way. - -Next, we launched a [public beta](https://beta.fec.gov), which allowed us to get feedback from real users and build new features based on what we learned. - -As our FEC partners saw the benefits of working iteratively and putting user needs first, they asked us to work alongside them to solve other problems, including: - -- Creating search tools so laws, regulations, and enforcement actions are easier to find and use. -- Migrating confusing legacy content into a new structure so visitors can find and understand the information they need. -- Exploring how to update the online filing process to help political groups and candidates file the right forms. - -Through all these projects, we’ve worked closely with FEC teams so they can transform their whole approach to interacting with the public online. - -In the words of one product owner at the FEC: “We didn’t know where to start, but in the end, we got so much more than a website. We had a complete culture change about how to do user-centered design and agile.” diff --git a/pages/our-work.html b/pages/our-work.html index f2b46c52e..0bb8a7f02 100644 --- a/pages/our-work.html +++ b/pages/our-work.html @@ -25,37 +25,29 @@

Filter by project type

- {% include card.html - image_src="/assets/img/home/hero-fec.png" - image_alt="Image of a chart with a stylized magnifying glass" - title="The Federal Election Commission" - description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" - link="/project/fec-gov/" - %} - {% include card.html - image_src="/assets/img/home/hero-every-kid.png" - image_alt="Image of state and local" - title="State and local" - description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" - link="/project/fec-gov/" - %} - {% include card.html - image_src="/assets/img/home/hero-every-kid.png" - image_alt="Image of state and local" - title="State and local" - description="We're helping the Federal Election Commission (FEC) make campaign finance data easier to use" - link="/project/fec-gov/" - %} + + {% assign projects_list = site | find_collection: 'projects' | sort: 'title' %} + {% for project in projects_list %} + {% include card.html + image_src=project.image + image_alt=project.image_accessibility + title=project.title + description=project.excerpt + link=project.permalink + project_bucket=project.project_bucket + %} + {% endfor %}
+
- {% assign agency_partners = site | find_collection: 'projects' | where_obj: 'agency_partner', 'agency_partner_url' %} - {% assign partner_buckets = agency_partners | buckets: 3 %} + {% assign agency_partners = site | find_collection: 'projects' | where_obj: 'agency_partner', 'agency_partner_url' | sort: 'agency_partner' %} + {% assign partner_groups = agency_partners | in_groups: 3 %}

Agency Partners and public offerings

From 6142a324ca279653cb10c94bd26d0f588c32cdd8 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Tue, 27 Dec 2016 17:20:54 -0600 Subject: [PATCH 06/79] yaml front matter --- Gemfile.lock | 8 ++++++++ _includes/card.html | 4 ++-- _projects/fec-gov.md | 2 +- _projects/hhs-states.md | 2 +- pages/our-work.html | 2 +- tests/schema/_projects.yml | 16 ++++++++++++++-- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 44f61cd15..d02ba4f94 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,10 @@ +GIT + remote: https://github.com/18F/jekyll-archives.git + revision: 9ad78a4aa38de0af570a53f3c12558408e9537f7 + specs: + jekyll-archives (2.1.0) + jekyll (>= 2.4) + GEM remote: https://rubygems.org/ specs: @@ -128,6 +135,7 @@ DEPENDENCIES accesslint-ci (= 0.2.6) html-proofer jekyll (~> 3.1) + jekyll-archives! jekyll-feed jekyll-paginate jekyll-redirect-from diff --git a/_includes/card.html b/_includes/card.html index 883234e14..3736a304d 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -8,9 +8,9 @@ {% assign wds_grid_class = 'usa-width-one-third' %} {% endif %} -{% assign project_bucket = include.project_bucket | default: 'none' %} +{% assign project_type = include.project_type | default: 'none' %} -
+
{{ include.image_alt }} diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 8959b51bf..2859e0bf7 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -14,7 +14,7 @@ github_repo: https://github.com/18F/openFEC-web-app project_url: https://beta.fec.gov/ agency_partner: Federal Election Commission (FEC) agency_partner_url: /work/fec/ -project_bucket: laws-and-mandates +project_type: laws-and-mandates --- The Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections. diff --git a/_projects/hhs-states.md b/_projects/hhs-states.md index c87d87c0a..a3a6f24c4 100644 --- a/_projects/hhs-states.md +++ b/_projects/hhs-states.md @@ -14,7 +14,7 @@ github_repo: project_url: agency_partner: Health and Human Services agency_partner_url: /work/hhs/ -project_bucket: internal-systems +project_type: internal-systems --- Health and Human Services (HHS) is a federal agency, but many crucial HHS programs — like Medicaid — are administered by states. diff --git a/pages/our-work.html b/pages/our-work.html index 848d9a705..c5f317063 100644 --- a/pages/our-work.html +++ b/pages/our-work.html @@ -34,7 +34,7 @@

Who and how we've helped

title=project.title description=project.excerpt link=project.permalink - project_bucket=project.project_bucket + project_type=project.project_type %} {% endfor %} diff --git a/tests/schema/_projects.yml b/tests/schema/_projects.yml index 2d464b296..e231c4b5c 100644 --- a/tests/schema/_projects.yml +++ b/tests/schema/_projects.yml @@ -1,12 +1,17 @@ --- layout: "String" title: "String" - +excerpt: "String" tags: type: Array rules: [no-dash, lowercase] github_repo: "String" project_url: "String" +project_type: + type: "String" + oneof: ["public-servies", "internal-systems", "laws-and-mandates"] +agency_partner: "String" +agency_partner_url: "String" config: path: '_projects' ignore: @@ -14,5 +19,12 @@ config: - .. - . - .DS_Store - optional: ['subtitle', 'excerpt', 'image', 'image_accessibility', 'expiration_date', 'github_repo'] + optional: + - 'subtitle' + - 'excerpt' + - 'image' + - 'image_accessibility' + - 'expiration_date' + - 'github_repo' + - 'permalink' --- From aca0343d9220f186dcc33eee7331ee448a217182 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Tue, 27 Dec 2016 17:51:18 -0600 Subject: [PATCH 07/79] simplify how we call projects --- _includes/card-project.html | 11 +++++++++++ _includes/card.html | 4 ++-- pages/home.html | 18 ++++-------------- 3 files changed, 17 insertions(+), 16 deletions(-) create mode 100644 _includes/card-project.html diff --git a/_includes/card-project.html b/_includes/card-project.html new file mode 100644 index 000000000..8fe1e0f0f --- /dev/null +++ b/_includes/card-project.html @@ -0,0 +1,11 @@ + +{% assign project = site | find_collection: 'projects' | where: 'slug', include.project | first %} + +{% include card.html + image_src=project.image + image_alt=project.image_accessibility + title=project.title + description=project.excerpt + link=project.permalink + columns=2 +%} diff --git a/_includes/card.html b/_includes/card.html index 3736a304d..879a37326 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -3,9 +3,9 @@ {% assign columns = include.columns | default: 3 %} {% if columns == 2 %} - {% assign wds_grid_class = 'usa-width-one-half' %} + {% assign wds_grid_class = 'usa-width-one-half' %} {% else %} - {% assign wds_grid_class = 'usa-width-one-third' %} + {% assign wds_grid_class = 'usa-width-one-third' %} {% endif %} {% assign project_type = include.project_type | default: 'none' %} diff --git a/pages/home.html b/pages/home.html index 8bc21a25e..03f7ca792 100644 --- a/pages/home.html +++ b/pages/home.html @@ -22,21 +22,11 @@

Building 21st century digital government

Featured projects

- {% include card.html - image_src="/assets/img/home/hero-fec.png" - image_alt="Image of a chart with a stylized magnifying glass" - title="Making campaign data easier to use" - description="We helped the Federal Election Commission make it easier for journalists and members of the public to use their data." - link="/project/fec-gov/" - columns=2 + {% include card-project.html + project='fec-gov' %} - {% include card.html - image_src="/assets/img/projects/hero_stateandlocal.png" - image_alt="Grayscale photograph of eleven people meeting in small groups during a workshop" - title="Helping states update crucial systems" - description="Health and Human Services hired us to help states implement current best practices and upgrade legacy systems." - link="/project/hhs-states/" - columns=2 + {% include card-project.html + project='hhs-states' %}
From 990d4a521f5ec58d627872e11c0f6fb807ab3770 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Wed, 28 Dec 2016 15:05:46 -0800 Subject: [PATCH 08/79] homepage restructure and content changes --- _data/navigation.yml | 8 +++++++ _includes/card-project.html | 2 +- _projects/fec-gov.md | 2 +- _projects/hhs-states.md | 2 +- pages/home.html | 45 ++++++++++++++++++++----------------- 5 files changed, 35 insertions(+), 24 deletions(-) diff --git a/_data/navigation.yml b/_data/navigation.yml index e69c67cb3..ec90638e0 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -10,6 +10,14 @@ assigned: text: Our work href: pages/our-work.md permalink: /our-work/ + in_menu: false + in_drawer: false + in_footer: false + children: + - + text: What we deliver + href: pages/what-we-deliver.md + permalink: /what-we-deliver/ in_menu: true in_drawer: true in_footer: true diff --git a/_includes/card-project.html b/_includes/card-project.html index 8fe1e0f0f..7bc2c6323 100644 --- a/_includes/card-project.html +++ b/_includes/card-project.html @@ -4,7 +4,7 @@ {% include card.html image_src=project.image image_alt=project.image_accessibility - title=project.title + title=project.subtitle description=project.excerpt link=project.permalink columns=2 diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 2859e0bf7..6687d38b1 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -4,7 +4,7 @@ project-type: "Project" title: "The Federal Election Commission" subtitle: Making campaign data easier to use permalink: /project/fec-gov/ -excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. +excerpt: We helped the Federal Election Commission make it easier for journalists and members of the public to use their data. image: /assets/img/home/hero-fec.png image_accessibility: Image of the FEC data explorer with stylized magnifying glass. tags: diff --git a/_projects/hhs-states.md b/_projects/hhs-states.md index 597b33b86..0abe88063 100644 --- a/_projects/hhs-states.md +++ b/_projects/hhs-states.md @@ -4,7 +4,7 @@ project-type: "Partner" title: "Health and Human Services" subtitle: Helping states update crucial systems permalink: /project/hhs-states/ -excerpt: HHS hired us to help states implement current best practices and upgrade legacy systems. +excerpt: Health and Human Services hired us to help states implement current best practices and upgrade legacy systems. image: /assets/img/projects/hero_stateandlocal.png image_accessibility: "Grayscale photograph of eleven people meeting in small groups during a workshop" tags: diff --git a/pages/home.html b/pages/home.html index 03f7ca792..d4e45d39a 100644 --- a/pages/home.html +++ b/pages/home.html @@ -7,17 +7,9 @@
-

We help agencies approach technology projects in new ways

- -
-
-
-
-

Building 21st century digital government

-
-
-

18F works with federal agencies to improve processes and deliver efficient, easy-to-use digital services to the public.

-

As an office within the General Services Administration, we know how to work with government. All our projects support agencies in transforming how they deliver digital services and technology products.

+

We help federal agencies meet their missions

+ +
@@ -29,6 +21,27 @@

Featured projects

project='hhs-states' %}
+
+
+

Building 21st century digital government

+
+
+

18F is an office of the General Services Administration, and we help federal agencies solve several kinds of problems. We can work with you to improve your public-facing services, implement new laws or mandates, or improve your internal systems.

+

Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

+ +
+
+
+
+

Have a project in mind? Want to see if 18F can help your agency?

+ + +
+

From our blog

    @@ -48,13 +61,3 @@

    {% endfor %}

-
-
-

Have a project in mind? Want to see if 18F can help your agency?

- - -
-
From a22bc3c77d076308ad74713d8dca1d19633c3d00 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Wed, 28 Dec 2016 15:55:48 -0800 Subject: [PATCH 09/79] remove redirect to our work --- pages/our-work.html | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/our-work.html b/pages/our-work.html index c5f317063..198d05f37 100644 --- a/pages/our-work.html +++ b/pages/our-work.html @@ -6,7 +6,6 @@ content_wide: true redirect_from: - /consulting/ - - /what-we-deliver/ ---

Who and how we've helped

From dacc6df6af48632436b20af8bb2219c2eb25c82c Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Thu, 29 Dec 2016 09:39:46 -0800 Subject: [PATCH 10/79] change CTA copy --- pages/home.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/pages/home.html b/pages/home.html index d4e45d39a..e3ba49099 100644 --- a/pages/home.html +++ b/pages/home.html @@ -34,12 +34,9 @@

Building 21st century digital government

-

Have a project in mind? Want to see if 18F can help your agency?

- - +

Want to see if 18F can help your agency?

+ +
From 06ab623b61ac18fd61e90b72bb20eaf8ef893d96 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Thu, 29 Dec 2016 13:39:33 -0800 Subject: [PATCH 11/79] copy revisions --- pages/home.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/home.html b/pages/home.html index e3ba49099..b7b3deba4 100644 --- a/pages/home.html +++ b/pages/home.html @@ -6,10 +6,10 @@ ---
-
-

We help federal agencies meet their missions

- - +
+

We support your mission

+

18F works with federal agencies to improve processes and deliver efficient, easy-to-use digital services to the public.

+
@@ -26,8 +26,8 @@

Featured projects

Building 21st century digital government

-

18F is an office of the General Services Administration, and we help federal agencies solve several kinds of problems. We can work with you to improve your public-facing services, implement new laws or mandates, or improve your internal systems.

-

Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

+

As an office within the General Services Administration, we know how to work with government. We can help you improve public-facing services, implement new laws or mandates, or improve internal systems.

+

When you build or buy websites and software with 18F, you remain in control of your process and feel confident about your outcomes. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

From 6b03c28f7a27a79f077c53bc5f426f5bfc5389df Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Fri, 30 Dec 2016 14:57:30 -0800 Subject: [PATCH 12/79] experimental homepage changes --- _includes/card-project.html | 3 ++- _includes/card.html | 3 ++- _sass/_components/card.scss | 13 +++++++++++++ _sass/_components/hero.scss | 20 +++++++++++++------- pages/home.html | 9 +++------ 5 files changed, 33 insertions(+), 15 deletions(-) diff --git a/_includes/card-project.html b/_includes/card-project.html index 7bc2c6323..254a29da0 100644 --- a/_includes/card-project.html +++ b/_includes/card-project.html @@ -4,7 +4,8 @@ {% include card.html image_src=project.image image_alt=project.image_accessibility - title=project.subtitle + title=project.title + tagline=project.subtitle description=project.excerpt link=project.permalink columns=2 diff --git a/_includes/card.html b/_includes/card.html index 879a37326..a77ee5392 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -15,7 +15,8 @@ {{ include.image_alt }}
-

{{ include.title }}

+

{{ include.title }}

+

{{ include.tagline }}

{{ include.description }}

Learn more
diff --git a/_sass/_components/card.scss b/_sass/_components/card.scss index 838779b40..9e2426e93 100644 --- a/_sass/_components/card.scss +++ b/_sass/_components/card.scss @@ -26,6 +26,10 @@ background-color: $color-white; float: left; padding: $paragraph-margins * 2; + + h3 { + margin-top: 0; + } } .card-image { @@ -35,3 +39,12 @@ .card-description { color: initial; } + +.agency-tag { + color: $color-gray; + font-size: $tiny-font-size; + font-weight: $font-bold; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-bottom: 0; +} \ No newline at end of file diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index b259f29a8..a8e40da6a 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -3,21 +3,27 @@ .hero { @include padding($site-margins null); - background-image: url('../img/home/hero-fec.png'); + background-image: url('../img/page-feature/hire-us.jpg'); background-position: center; background-size: cover; + padding-top: 0; + padding-bottom: 0; + padding-left: 0; } .hero-callout { - background-color: $color-dark; - padding: 3rem; - - h2 { - font-size: $h2-font-size * 0.85; + padding-top: $site-margins * 3; + padding-right: $site-margins; + padding-bottom: $site-margins * 3; + padding-left: $site-margins * 3; + width: 50%; + + p { + font-size: $h3-font-size; } @include media($small-screen) { - max-width: 300px; + /*max-width: 300px;*/ } > *:first-child { diff --git a/pages/home.html b/pages/home.html index b7b3deba4..1a7311c1c 100644 --- a/pages/home.html +++ b/pages/home.html @@ -5,9 +5,9 @@ redirect_from: /dashboard/ --- -
-
-

We support your mission

+
+
+

We support your mission

18F works with federal agencies to improve processes and deliver efficient, easy-to-use digital services to the public.

@@ -28,15 +28,12 @@

Building 21st century digital government

As an office within the General Services Administration, we know how to work with government. We can help you improve public-facing services, implement new laws or mandates, or improve internal systems.

When you build or buy websites and software with 18F, you remain in control of your process and feel confident about your outcomes. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

-

Want to see if 18F can help your agency?

-
From f2ce183eccc844e1b02ef95e62c858ce9f767e1f Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Fri, 30 Dec 2016 17:23:41 -0600 Subject: [PATCH 13/79] hound --- _sass/_components/filters.scss | 22 +++++++++++----------- _sass/_components/lists.scss | 4 ++-- assets/js/section-filterable.js | 16 +++++++--------- 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/_sass/_components/filters.scss b/_sass/_components/filters.scss index 876431697..aaf3c56a4 100644 --- a/_sass/_components/filters.scss +++ b/_sass/_components/filters.scss @@ -1,19 +1,19 @@ .form-checkboxes { - margin-bottom: $paragraph-margins-thick; + margin-bottom: $paragraph-margins-thick; } .form-inline { - display: inline-block; - margin-right: $paragraph-margins-thick; - position: relative; + display: inline-block; + margin-right: $paragraph-margins-thick; + position: relative; - input { - margin-left: 0; - } + input { + margin-left: 0; + } - input, - label { - cursor: pointer; - } + input, + label { + cursor: pointer; + } } diff --git a/_sass/_components/lists.scss b/_sass/_components/lists.scss index abe19d712..6ee302728 100644 --- a/_sass/_components/lists.scss +++ b/_sass/_components/lists.scss @@ -1,7 +1,7 @@ .list-columns { - @include unstyled-list(); + @include unstyled-list(); li { - margin-bottom: $paragraph-margins; + margin-bottom: $paragraph-margins; } } diff --git a/assets/js/section-filterable.js b/assets/js/section-filterable.js index 435ff7137..e6724732c 100644 --- a/assets/js/section-filterable.js +++ b/assets/js/section-filterable.js @@ -1,19 +1,17 @@ (function() { var attached = function() { - - console.log('section-filterable.js loaded') var $this = $(this); var $filter = $this.attr('data-filter') || '.card'; var $filterableForm = $this.find('.filterable-form'); var $filterableInputs = $this.find('.filterable-form').find('input'); var filterItems = $this.find($filter); - var selectedIds = function () { + var selectedIds = function() { var nodeIds = $filterableForm .find('input:checked') - .map(function(){ + .map(function() { return this.id; }) @@ -21,23 +19,23 @@ } // show all - var reset = function () { + var reset = function() { filterItems.attr('aria-hidden', false); } - var hideAll = function (ids) { + var hideAll = function(ids) { ids.attr('aria-hidden', true); } - var filterIds = function (ids) { - return filterItems.filter(function(i, item){ + var filterIds = function(ids) { + return filterItems.filter(function(i, item) { var bucketId = $(item).attr('data-bucket'); // return if checked ids don't match the value of the card return ids.indexOf(bucketId) < 0 }); } - $filterableInputs.on('change', function filter(event) { + $filterableInputs.on('change', function filter() { var ids = selectedIds() if (ids) { var filteredIds = filterIds(ids); From 39df306a51328262ccc1867dec9bfc5128923ed3 Mon Sep 17 00:00:00 2001 From: Elaine Kamlley Date: Tue, 3 Jan 2017 16:51:06 -0500 Subject: [PATCH 14/79] updating wds to adopted list styling --- _config-blog.yml | 12 ++ _sass/_components/header.scss | 2 + _sass/_components/post-list.scss | 1 + .../wds/fonts/sourcesanspro-bold-webfont.eot | Bin .../wds/fonts/sourcesanspro-bold-webfont.ttf | Bin .../wds/fonts/sourcesanspro-bold-webfont.woff | Bin .../fonts/sourcesanspro-bold-webfont.woff2 | Bin .../fonts/sourcesanspro-italic-webfont.eot | Bin .../fonts/sourcesanspro-italic-webfont.ttf | Bin .../fonts/sourcesanspro-italic-webfont.woff | Bin .../fonts/sourcesanspro-italic-webfont.woff2 | Bin .../wds/fonts/sourcesanspro-light-webfont.eot | Bin .../wds/fonts/sourcesanspro-light-webfont.ttf | Bin .../fonts/sourcesanspro-light-webfont.woff | Bin .../fonts/sourcesanspro-light-webfont.woff2 | Bin .../fonts/sourcesanspro-regular-webfont.eot | Bin .../fonts/sourcesanspro-regular-webfont.ttf | Bin .../fonts/sourcesanspro-regular-webfont.woff | Bin .../fonts/sourcesanspro-regular-webfont.woff2 | Bin _sass/_libs/wds/img/arrow-down.png | Bin _sass/_libs/wds/img/arrow-down.svg | 0 _sass/_libs/wds/img/arrow-right.png | Bin _sass/_libs/wds/img/arrow-right.svg | 0 _sass/_libs/wds/img/correct9.png | Bin .../_libs/wds/img/external-link-alt-hover.png | Bin .../_libs/wds/img/external-link-alt-hover.svg | 0 _sass/_libs/wds/img/external-link-alt.png | Bin _sass/_libs/wds/img/external-link-alt.svg | 0 _sass/_libs/wds/img/external-link-hover.png | Bin _sass/_libs/wds/img/external-link-hover.svg | 0 _sass/_libs/wds/img/external-link.png | Bin _sass/_libs/wds/img/external-link.svg | 0 _sass/_libs/wds/img/logo-img.png | Bin _sass/_libs/wds/img/minus.png | Bin _sass/_libs/wds/img/minus.svg | 0 _sass/_libs/wds/img/plus.png | Bin _sass/_libs/wds/img/plus.svg | 0 .../wds/img/social-icons/png/facebook25.png | Bin .../_libs/wds/img/social-icons/png/rss25.png | Bin .../wds/img/social-icons/png/twitter16.png | Bin .../wds/img/social-icons/png/youtube15.png | Bin _sass/_libs/wds/img/us_flag_small.png | Bin _sass/_libs/wds/js/components/accordion.js | 2 +- .../stylesheets/components/_accordions.scss | 131 +++++++++++------- .../wds/stylesheets/components/_search.scss | 2 + .../wds/stylesheets/components/_sidenav.scss | 1 + .../wds/stylesheets/core/_utilities.scss | 25 +--- .../wds/stylesheets/elements/_buttons.scss | 7 +- .../_libs/wds/stylesheets/elements/_list.scss | 65 ++------- 49 files changed, 122 insertions(+), 126 deletions(-) mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-bold-webfont.eot mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-bold-webfont.ttf mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff2 mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-italic-webfont.eot mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-italic-webfont.ttf mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff2 mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-light-webfont.eot mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-light-webfont.ttf mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff2 mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-regular-webfont.eot mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-regular-webfont.ttf mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff mode change 100644 => 100755 _sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff2 mode change 100644 => 100755 _sass/_libs/wds/img/arrow-down.png mode change 100644 => 100755 _sass/_libs/wds/img/arrow-down.svg mode change 100644 => 100755 _sass/_libs/wds/img/arrow-right.png mode change 100644 => 100755 _sass/_libs/wds/img/arrow-right.svg mode change 100644 => 100755 _sass/_libs/wds/img/correct9.png mode change 100644 => 100755 _sass/_libs/wds/img/external-link-alt-hover.png mode change 100644 => 100755 _sass/_libs/wds/img/external-link-alt-hover.svg mode change 100644 => 100755 _sass/_libs/wds/img/external-link-alt.png mode change 100644 => 100755 _sass/_libs/wds/img/external-link-alt.svg mode change 100644 => 100755 _sass/_libs/wds/img/external-link-hover.png mode change 100644 => 100755 _sass/_libs/wds/img/external-link-hover.svg mode change 100644 => 100755 _sass/_libs/wds/img/external-link.png mode change 100644 => 100755 _sass/_libs/wds/img/external-link.svg mode change 100644 => 100755 _sass/_libs/wds/img/logo-img.png mode change 100644 => 100755 _sass/_libs/wds/img/minus.png mode change 100644 => 100755 _sass/_libs/wds/img/minus.svg mode change 100644 => 100755 _sass/_libs/wds/img/plus.png mode change 100644 => 100755 _sass/_libs/wds/img/plus.svg mode change 100644 => 100755 _sass/_libs/wds/img/social-icons/png/facebook25.png mode change 100644 => 100755 _sass/_libs/wds/img/social-icons/png/rss25.png mode change 100644 => 100755 _sass/_libs/wds/img/social-icons/png/twitter16.png mode change 100644 => 100755 _sass/_libs/wds/img/social-icons/png/youtube15.png mode change 100644 => 100755 _sass/_libs/wds/img/us_flag_small.png diff --git a/_config-blog.yml b/_config-blog.yml index ee6b5a859..d0d829123 100644 --- a/_config-blog.yml +++ b/_config-blog.yml @@ -329,3 +329,15 @@ exclude: - _posts/2016-10-14-iterative-workplace-design-denver-federal-center.md - _posts/2016-10-24-embracing-opportunities-to-improve-and-innovate.md - _posts/2016-10-25-three-small-steps-you-can-take-to-reboot-agile-in-your-organization.md +- _posts/2016-07-22-building-empathy-with-stakeholder-interviews-part-2-conversation.md +- _posts/2016-10-26-writing-for-web-easy-writing-for-users-not.md +- _posts/2016-10-28-california-takes-new-approach-procurement.md +- _posts/2016-11-04-code-gov-the-next-milestone-federal-open-source-code.md +- _posts/2016-11-14-modular-procurement-state-local-government.md +- _posts/2016-11-17-leadership-innovation-california-child-welfare-services.md +- _posts/2016-11-22-a-vulnerability-disclosure-policy-for-the-technology-transformation-service.md +- _posts/2016-11-25-what-18f-is-thankful-for-this-thanksgiving.md +- _posts/2016-11-30-curate-best-thinking-available.md +- _posts/2016-12-02-presidential-innovation-fellows-now-accepting-applications-spring-2017.md +- _posts/2016-12-12-connecting-culture-change-at-18F-and-PBS.md +- _posts/2016-12-13-lowering-risk-of-experimentation-open-source-code.md diff --git a/_sass/_components/header.scss b/_sass/_components/header.scss index 572e9f5b8..8e121e51b 100644 --- a/_sass/_components/header.scss +++ b/_sass/_components/header.scss @@ -14,6 +14,8 @@ header[role=banner] { // *TODO*: De-nest this once we fix lists in WDS li { display: inline-block; + background: transparent; + width: auto; a { @include padding(2.3rem 2rem); diff --git a/_sass/_components/post-list.scss b/_sass/_components/post-list.scss index aef8807fe..72ad569a7 100644 --- a/_sass/_components/post-list.scss +++ b/_sass/_components/post-list.scss @@ -19,6 +19,7 @@ display: inline-block; margin-top: $section-margins; padding-bottom: $section-margins; + margin-bottom: 1em; &:first-child { margin-top: 0; diff --git a/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.eot b/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.eot old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.ttf b/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.ttf old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff b/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff2 b/_sass/_libs/wds/fonts/sourcesanspro-bold-webfont.woff2 old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.eot b/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.eot old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.ttf b/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.ttf old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff b/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff2 b/_sass/_libs/wds/fonts/sourcesanspro-italic-webfont.woff2 old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.eot b/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.eot old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.ttf b/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.ttf old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff b/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff2 b/_sass/_libs/wds/fonts/sourcesanspro-light-webfont.woff2 old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.eot b/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.eot old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.ttf b/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.ttf old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff b/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff2 b/_sass/_libs/wds/fonts/sourcesanspro-regular-webfont.woff2 old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/arrow-down.png b/_sass/_libs/wds/img/arrow-down.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/arrow-down.svg b/_sass/_libs/wds/img/arrow-down.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/arrow-right.png b/_sass/_libs/wds/img/arrow-right.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/arrow-right.svg b/_sass/_libs/wds/img/arrow-right.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/correct9.png b/_sass/_libs/wds/img/correct9.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-alt-hover.png b/_sass/_libs/wds/img/external-link-alt-hover.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-alt-hover.svg b/_sass/_libs/wds/img/external-link-alt-hover.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-alt.png b/_sass/_libs/wds/img/external-link-alt.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-alt.svg b/_sass/_libs/wds/img/external-link-alt.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-hover.png b/_sass/_libs/wds/img/external-link-hover.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link-hover.svg b/_sass/_libs/wds/img/external-link-hover.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link.png b/_sass/_libs/wds/img/external-link.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/external-link.svg b/_sass/_libs/wds/img/external-link.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/logo-img.png b/_sass/_libs/wds/img/logo-img.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/minus.png b/_sass/_libs/wds/img/minus.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/minus.svg b/_sass/_libs/wds/img/minus.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/plus.png b/_sass/_libs/wds/img/plus.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/plus.svg b/_sass/_libs/wds/img/plus.svg old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/social-icons/png/facebook25.png b/_sass/_libs/wds/img/social-icons/png/facebook25.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/social-icons/png/rss25.png b/_sass/_libs/wds/img/social-icons/png/rss25.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/social-icons/png/twitter16.png b/_sass/_libs/wds/img/social-icons/png/twitter16.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/social-icons/png/youtube15.png b/_sass/_libs/wds/img/social-icons/png/youtube15.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/img/us_flag_small.png b/_sass/_libs/wds/img/us_flag_small.png old mode 100644 new mode 100755 diff --git a/_sass/_libs/wds/js/components/accordion.js b/_sass/_libs/wds/js/components/accordion.js index 5ff6fed35..e66d9372e 100755 --- a/_sass/_libs/wds/js/components/accordion.js +++ b/_sass/_libs/wds/js/components/accordion.js @@ -70,7 +70,7 @@ Accordion.prototype.show = function ($button) { */ Accordion.prototype.hideAll = function () { var self = this; - this.$('button').each(function () { + this.$('ul > li > button, .usa-accordion-button').each(function () { self.hide($(this)); }); return this; diff --git a/_sass/_libs/wds/stylesheets/components/_accordions.scss b/_sass/_libs/wds/stylesheets/components/_accordions.scss index cad90a927..929a1b2e0 100755 --- a/_sass/_libs/wds/stylesheets/components/_accordions.scss +++ b/_sass/_libs/wds/stylesheets/components/_accordions.scss @@ -4,70 +4,99 @@ $accordion-border: 3px solid $color-gray-lightest; // Accordion Styles +@mixin accordion-list-styles { + @include unstyled-list; + color: $color-base; + margin: 0; + padding: 0; + width: 100%; +} + +@mixin accordion-list-item-styles { + background-color: $color-gray-lightest; + font-family: $font-sans; + list-style: none; + margin-bottom: 6px; + width: 100%; +} + +// scss-lint:disable PropertyCount +@mixin accordion-button-styles { + @include button-unstyled; + background-color: $color-gray-lightest; + background-image: url('../img/minus.png'); + background-image: url('../img/minus.svg'); + background-position: right 3rem center; + background-repeat: no-repeat; + background-size: 13px; + color: $color-base; + cursor: pointer; + display: inline-block; + font-family: $font-sans; + margin: 0; + padding: 1.5rem 5.5rem 1.5rem 3rem; + width: 100%; + + &:focus { + box-shadow: $focus-shadow; + } + + &:hover { + background-color: $color-gray-lighter; + color: $color-base; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0; + } +} +// scss-lint:enable PropertyCount + +@mixin accordion-button-unopened-styles { + background-image: url('../img/plus.png'); + background-image: url('../img/plus.svg'); + background-repeat: no-repeat; + background-size: 1.3rem; +} + .usa-accordion, .usa-accordion-bordered { + @include accordion-list-styles; + + .usa-accordion, + .usa-accordion-bordered { margin-top: 1rem; } + // TODO deprecated ruleset based on old accordion. > ul { - color: $color-base; - margin: 0; - padding: 0; - width: 100%; + @include accordion-list-styles; + // TODO deprecated ruleset based on old accordion. > li { - background-color: $color-gray-lightest; - font-family: $font-sans; - list-style: none; - margin-bottom: 6px; - width: 100%; + @include accordion-list-item-styles; } - } - - [aria-expanded=false] { - background-image: url('../img/plus.png'); - background-image: url('../img/plus.svg'); - background-repeat: no-repeat; - background-size: 1.3rem; - } - - // scss-lint:disable PropertyCount - button { - background-color: $color-gray-lightest; - background-image: url('../img/minus.png'); - background-image: url('../img/minus.svg'); - background-position: right 3rem center; - background-repeat: no-repeat; - background-size: 13px; - color: $color-base; - cursor: pointer; - display: inline-block; - font-family: $font-sans; - margin: 0; - padding: 1.5rem 5.5rem 1.5rem 3rem; - width: 100%; - &:focus { - box-shadow: $focus-shadow; + // TODO deprecated ruleset based on old accordion. + button { + @include accordion-button-styles; } - &:hover { - background-color: $color-gray-lighter; - color: $color-base; + // TODO deprecated ruleset based on old accordion. + [aria-expanded=false] { + @include accordion-button-unopened-styles; } + } - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; - } + > li { + @include accordion-list-item-styles; } - // scss-lint:enable PropertyCount + } .usa-accordion-bordered { @@ -94,3 +123,11 @@ $accordion-border: 3px solid $color-gray-lightest; @include accessibly-hidden(); } + +.usa-accordion-button { + @include accordion-button-styles; +} + +.usa-accordion-button[aria-expanded=false] { + @include accordion-button-unopened-styles; +} diff --git a/_sass/_libs/wds/stylesheets/components/_search.scss b/_sass/_libs/wds/stylesheets/components/_search.scss index 33cebac23..b5bb3f9eb 100755 --- a/_sass/_libs/wds/stylesheets/components/_search.scss +++ b/_sass/_libs/wds/stylesheets/components/_search.scss @@ -21,6 +21,7 @@ $usa-btn-big-width: 11.6rem; border-right: none; border-top-right-radius: 0; float: left; + font-size: $small-font-size; height: 3.3rem; margin: 0; padding-bottom: 0; @@ -63,6 +64,7 @@ $usa-btn-big-width: 11.6rem; [type="search"], .usa-search-input { + font-size: $base-font-size; height: $height; width: calc(100% - #{$width}); } diff --git a/_sass/_libs/wds/stylesheets/components/_sidenav.scss b/_sass/_libs/wds/stylesheets/components/_sidenav.scss index 807d88a3f..efa080ccd 100755 --- a/_sass/_libs/wds/stylesheets/components/_sidenav.scss +++ b/_sass/_libs/wds/stylesheets/components/_sidenav.scss @@ -40,6 +40,7 @@ } .usa-sidenav-sub_list { + @include unstyled-list(); margin: 0; width: 100%; diff --git a/_sass/_libs/wds/stylesheets/core/_utilities.scss b/_sass/_libs/wds/stylesheets/core/_utilities.scss index d186d63f7..2d00c935c 100755 --- a/_sass/_libs/wds/stylesheets/core/_utilities.scss +++ b/_sass/_libs/wds/stylesheets/core/_utilities.scss @@ -6,14 +6,13 @@ } // Screen reader only helper -.usa-sr-only { +@mixin sr-only() { position: absolute; left: -999em; } -@mixin sr-only() { - position: absolute; - left: -999em; +.usa-sr-only { + @include sr-only(); } // Aria hidden helper @@ -26,22 +25,12 @@ // Unstyled list helper @mixin unstyled-list() { - display: block; + @include margin(0 null); list-style-type: none; - margin: 0; - padding: 0; - - li { - display: list-item; - margin: 0; + padding-left: 0; - &::before { - display: none; - } - - &::after { - display: none; - } + > li { + margin-bottom: 0; } } diff --git a/_sass/_libs/wds/stylesheets/elements/_buttons.scss b/_sass/_libs/wds/stylesheets/elements/_buttons.scss index 1656fdedb..e64987719 100755 --- a/_sass/_libs/wds/stylesheets/elements/_buttons.scss +++ b/_sass/_libs/wds/stylesheets/elements/_buttons.scss @@ -171,18 +171,17 @@ button, } @mixin button-unstyled { - background-color: transparent; + background: none; border: 0; border-radius: 0; - font-weight: $font-normal; - margin: 0; outline: 0; padding: 0; text-align: left; -webkit-font-smoothing: auto; + &:focus, &:hover { - background-color: transparent; + box-shadow: initial; } } diff --git a/_sass/_libs/wds/stylesheets/elements/_list.scss b/_sass/_libs/wds/stylesheets/elements/_list.scss index 210d94322..bec84face 100755 --- a/_sass/_libs/wds/stylesheets/elements/_list.scss +++ b/_sass/_libs/wds/stylesheets/elements/_list.scss @@ -1,20 +1,15 @@ ul, ol { - @include margin(2em null 2em 0.9em); - list-style: none; - padding-left: 0; - display: table; + @include margin(1em null); + padding-left: 1.94em; // Approximately 15px left padding at default font size +} - li { - line-height: $base-line-height; - margin-bottom: 0.75em; - margin-top: 0.75em; +li { + line-height: $base-line-height; + margin-bottom: 0.5em; - &::after { - content: ''; - display: block; - margin-bottom: 0.5em; - } + &:last-child { + margin-bottom: 0; } } @@ -31,49 +26,7 @@ p { } } -ul li { - display: table-row; - - &::before { - content: '\2022'; - display: table-cell; - padding-right: 0.4em; - } -} - -ol > li { - counter-increment: table-ol; - display: table-row; - - &::before { - content: counter(table-ol) '.'; - display: table-cell; - padding-right: 0.4em; - text-align: right; - } -} - -li { - margin-bottom: 0.5em; -} - // Unstyled lists - .usa-unstyled-list { - list-style-type: none; - margin: 0; - padding: 0; - - li { - display: list-item; - margin: 0; - - &::before { - display: none; - } - - &::after { - display: none; - } - } + @include unstyled-list; } From 9e62f4aef687e0c0e17539949a1a70aa0a528a98 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Tue, 3 Jan 2017 14:11:57 -0800 Subject: [PATCH 15/79] homepage experimentation --- _includes/card.html | 2 +- _sass/_components/card.scss | 2 +- _sass/_components/hero.scss | 3 ++- _sass/_core/variables.scss | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/_includes/card.html b/_includes/card.html index a77ee5392..f28e2f5d6 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -16,7 +16,7 @@ alt="{{ include.image_alt }}" />

{{ include.title }}

-

{{ include.tagline }}

+

{{ include.tagline }}

{{ include.description }}

Learn more
diff --git a/_sass/_components/card.scss b/_sass/_components/card.scss index 9e2426e93..0fc7d18bb 100644 --- a/_sass/_components/card.scss +++ b/_sass/_components/card.scss @@ -27,7 +27,7 @@ float: left; padding: $paragraph-margins * 2; - h3 { + h4 { margin-top: 0; } } diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index a8e40da6a..657b8f113 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -16,10 +16,11 @@ padding-right: $site-margins; padding-bottom: $site-margins * 3; padding-left: $site-margins * 3; - width: 50%; + width: 100%; p { font-size: $h3-font-size; + max-width: 60rem; } @include media($small-screen) { diff --git a/_sass/_core/variables.scss b/_sass/_core/variables.scss index aaaecbc86..7ddc080b1 100644 --- a/_sass/_core/variables.scss +++ b/_sass/_core/variables.scss @@ -2,6 +2,7 @@ $h1-font-size: 3.6rem; $h2-font-size: 3.2rem; $h3-font-size: 2.4rem; +$h4-font-size: 2.2rem; $h5-font-size: 1.4rem; $h6-font-size: 1.2rem; From 655e4ee789ef5f1a6b370de69b6a58498595339a Mon Sep 17 00:00:00 2001 From: Elaine Kamlley Date: Wed, 4 Jan 2017 13:19:18 -0500 Subject: [PATCH 16/79] small adjustment on nav accordion to match current styling --- _sass/_components/nav-accordion.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/_components/nav-accordion.scss b/_sass/_components/nav-accordion.scss index 94e546a64..8e0c95f41 100644 --- a/_sass/_components/nav-accordion.scss +++ b/_sass/_components/nav-accordion.scss @@ -10,6 +10,7 @@ li { border-top-color: $color-gray-lighter; + background:transparent; } button { From b47d8bb089ad189b77e97594205fb7b67b3609d5 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Wed, 4 Jan 2017 11:58:55 -0800 Subject: [PATCH 17/79] revert messy changes --- _sass/_components/hero.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index 657b8f113..e4e90b1e3 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -6,17 +6,10 @@ background-image: url('../img/page-feature/hire-us.jpg'); background-position: center; background-size: cover; - padding-top: 0; - padding-bottom: 0; - padding-left: 0; } .hero-callout { - padding-top: $site-margins * 3; - padding-right: $site-margins; - padding-bottom: $site-margins * 3; - padding-left: $site-margins * 3; - width: 100%; + padding: $site-margins; p { font-size: $h3-font-size; @@ -24,7 +17,7 @@ } @include media($small-screen) { - /*max-width: 300px;*/ + max-width: 300px; } > *:first-child { From 2879889046e20c21fb271c2e8e7de73aa5dfe25a Mon Sep 17 00:00:00 2001 From: Corey Mahoney Date: Wed, 4 Jan 2017 12:01:10 -0800 Subject: [PATCH 18/79] add trailing newline --- _sass/_components/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/_components/card.scss b/_sass/_components/card.scss index 0fc7d18bb..ac902a07e 100644 --- a/_sass/_components/card.scss +++ b/_sass/_components/card.scss @@ -47,4 +47,4 @@ letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 0; -} \ No newline at end of file +} From 682ef3c7fb62746790a82b997bd99544acf8f945 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Wed, 4 Jan 2017 15:27:30 -0600 Subject: [PATCH 19/79] matches_url --- _plugins/utility.rb | 23 ++-- spec/_plugins/utlity_spec.rb | 45 ++++++++ spec/_posts/page.rb | 200 +++++++++++++++++++++++++++++++++++ 3 files changed, 257 insertions(+), 11 deletions(-) create mode 100644 spec/_posts/page.rb diff --git a/_plugins/utility.rb b/_plugins/utility.rb index 5f51b5b4c..774a2b835 100644 --- a/_plugins/utility.rb +++ b/_plugins/utility.rb @@ -26,6 +26,18 @@ def hash_link(str) end end + def matches_collections(page, nav_item) + binding.pry + returned_page = nil + collections = nav_item['collections'] || nil + if collections + collections.each do |collection| + returned_page = true if page['collection'] == collection + end + end + returned_page + end + def matches_url(page_url, url) page_url = clip_char(page_url.to_s.downcase, '/') url = clip_char(url.to_s.downcase, '/') @@ -70,17 +82,6 @@ def crawl_pages(item, page_url, _debug) end end - def matches_collections(page, item) - returned_page = nil - collections = item['collections'] || nil - if collections - collections.each do |collection| - returned_page = true if page['collection'] == collection - end - end - returned_page - end - def find_page(page_url, nav_items) unless @match nav_items.each do |item| diff --git a/spec/_plugins/utlity_spec.rb b/spec/_plugins/utlity_spec.rb index 41ac7c0c9..f6c88df2f 100644 --- a/spec/_plugins/utlity_spec.rb +++ b/spec/_plugins/utlity_spec.rb @@ -8,6 +8,19 @@ class UtilityClass before(:each) do @utility_class = UtilityClass.new @utility_class.extend(Jekyll::Utility) + + @nav_item = { + "text": "What we deliver", + "href": "pages/what-we-deliver.md", + "permalink": "/what-we-deliver/", + "in_menu": true, + "in_drawer": true, + "in_footer": true, + "children": nil + } + @baseurl = Jekyll.sites[0].config['baseurl'] + @collections = Jekyll.sites[0].collections + @posts = @collections['posts'] end describe '#clip_char' do context 'single parameter, string' do @@ -52,4 +65,36 @@ class UtilityClass expect(@utility_class.hash_link('#text')).to eq '#text' end end + + describe '#matches_url' do + it 'strips forward slashes' do + expect(@utility_class.matches_url('/text/', 'text')).to be true + expect(@utility_class.matches_url('/text', 'text')).to be true + expect(@utility_class.matches_url('text/', 'text')).to be true + end + + it 'reverse strips forward slashes' do + expect(@utility_class.matches_url('text', '/text/')).to be true + expect(@utility_class.matches_url('text', '/text')).to be true + expect(@utility_class.matches_url('text', 'text/')).to be true + end + + it 'does not strip double forward slashes' do + expect(@utility_class.matches_url('//text', 'text/')).to be_nil + expect(@utility_class.matches_url('text//', 'text/')).to be_nil + expect(@utility_class.matches_url('text//', 'text//')).to be true + end + end + + describe '#matches_collections' do + it 'strips forward slashes' do + + first_post = @posts.docs[0] + f_p = @posts[0] + binding.pry + expect(@utility_class.matches_url('/text/', 'text')).to be true + expect(@utility_class.matches_url('/text', 'text')).to be true + expect(@utility_class.matches_url('text/', 'text')).to be true + end + end end diff --git a/spec/_posts/page.rb b/spec/_posts/page.rb new file mode 100644 index 000000000..6e809206d --- /dev/null +++ b/spec/_posts/page.rb @@ -0,0 +1,200 @@ +{ + "next": { + "next": { + "next": { + "path": "_posts/2014-03-27-uncle-sam-wants-you-to-be-a-hero-hacker.md", + "url": "/2014/03/27/uncle-sam-wants-you-to-be-a-hero-hacker/", + "id": "/2014/03/27/uncle-sam-wants-you-to-be-a-hero-hacker", + "relative_path": "_posts/2014-03-27-uncle-sam-wants-you-to-be-a-hero-hacker.md", + "collection": "posts", + "draft": false, + "categories": [ + + ], + "layout": "post", + "tumblr_url": "http://18fblog.tumblr.com/post/80900714466/uncle-sam-wants-you-to-be-a-hero-hacker", + "date": "2014-03-27 14:37:00 -0500", + "title": "Uncle Sam wants YOU to be a hero hacker", + "description": "The Presidential Innovation Fellows program is now accepting applications from creative, energetic policy hackers, entrepreneurs, user experience experts, designers, front-end developers, back-end developers, system architecture wizards, data wranglers, and more to serve their tours of duty to radically improve the delivery of government digital services.", + "image": "", + "authors": [ + "robert", + "mhz" + ], + "tags": [ + "presidential innovation fellows", + "talent" + ], + "slug": "uncle-sam-wants-you-to-be-a-hero-hacker", + "ext": ".md" + }, + "path": "_posts/2014-03-21-29-minutes.md", + "output": nil, + "previous": { + "path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "url": "/2014/03/19/hello-world-we-are-18f/", + "id": "/2014/03/19/hello-world-we-are-18f", + "relative_path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "collection": "posts", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-19 09:14:29 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/80066867648/hello-world-we-are-18f", + "title": "Hello, world! We are 18F", + "description": "18F is a startup within GSA, encompassing the Presidential Innovation Fellows program and a cutting edge digital delivery team. We’re doers, recruited from the most innovative corners of industry and the public sector, who are passionate about “hacking” bureaucracy to drive efficiency, transparency, and savings for government agencies and the American people.", + "image": "", + "authors": [ + "18F" + ], + "tags": [ + "transformation services", + "culture change", + "modern practices" + ], + "hero": false, + "slug": "hello-world-we-are-18f", + "ext": ".md" + }, + "content": "I want to relate a great little thing that happened here at [18th and\nF](http://gsa.gov/) yesterday.\n\nAt 11am yesterday morning, members of the GSA.gov team, Sarah Hyder and\nPatrick Son, met with Hillary Hartley, Alison Rowland, and me to talk\nabout how to integrate [FBOpen](https://fbopen.gsa.gov) into GSA's\nmobile website, [m.gsa.gov](http://m.gsa.gov), on its [How To Sell to\nthe Government](http://m.gsa.gov/m/#!/buy-sell/how-to-sell)\" page.\n\nAt 11:29am, we had working code up and running on their staging server.\n\nWe get so used to things taking multiple meetings, multiple\ndays/weeks/months, and lots of back and forth. A couple stars aligned to\nmake this one easy, but bottom line: it took 29 minutes to go from “How\ncould we do this?” to a working code integration that went live the same\nafternoon.\n\nI thought you should hear about what can happen when you get two simple,\nclean GSA codebases in a room together. This is what gets me excited\nabout working at [18F](https://18f.gsa.gov/) every day!\n\nKudos especially to Sarah, Patrick and their team. In\n[m.gsa.gov](http://m.gsa.gov/) they've built something on a nice,\nflexible, modern architecture that's amenable to the same rapid\nprototyping and iteration that 18F is all about.\n", + "url": "/2014/03/21/29-minutes/", + "id": "/2014/03/21/29-minutes", + "relative_path": "_posts/2014-03-21-29-minutes.md", + "collection": "posts", + "excerpt": "I want to relate a great little thing that happened here at 18th and F yesterday. At 11am yesterday morning, members of the GSA.gov team, Sarah Hyder and Patrick Son, met with Hillary Hartley, Alison Rowland, and me to talk about how to integrate FBOpen into GSA's mobile website, m.gsa.gov, on its How To Sell to the Government\" page.", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-21 11:00:00 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/80267258221/29-minutes", + "title": "29 minutes", + "description": "I want to relate a great little thing that happened here at 18th and F yesterday.", + "image": "", + "authors": [ + "aaron" + ], + "tags": [ + "culture change" + ], + "slug": "29-minutes", + "ext": ".md" + }, + "path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "output": nil, + "previous": { + "next": { + "path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "url": "/2014/03/19/hello-world-we-are-18f/", + "id": "/2014/03/19/hello-world-we-are-18f", + "relative_path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "collection": "posts", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-19 09:14:29 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/80066867648/hello-world-we-are-18f", + "title": "Hello, world! We are 18F", + "description": "18F is a startup within GSA, encompassing the Presidential Innovation Fellows program and a cutting edge digital delivery team. We’re doers, recruited from the most innovative corners of industry and the public sector, who are passionate about “hacking” bureaucracy to drive efficiency, transparency, and savings for government agencies and the American people.", + "image": "", + "authors": [ + "18F" + ], + "tags": [ + "transformation services", + "culture change", + "modern practices" + ], + "hero": false, + "slug": "hello-world-we-are-18f", + "ext": ".md" + }, + "path": "_posts/2014-03-12-coming-soon.md", + "output": nil, + "previous": nil, + "content": "

We’re truly gratified so many of you liked our sneak preview!\nWe’ll be back real soon.

\n\n

Happy #Web25!

\n", + "url": "/2014/03/12/coming-soon/", + "id": "/2014/03/12/coming-soon", + "relative_path": "_posts/2014-03-12-coming-soon.md", + "collection": "posts", + "excerpt": "Coming soon!", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-12 09:11:00 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/79359602658/coming-soon", + "title": "Coming soon", + "description": "Coming soon!", + "image": "/assets/img/logos/18F-Logo-M.png", + "authors": [ + "18F" + ], + "tags": [ + "18f" + ], + "slug": "coming-soon", + "ext": ".md" + }, + "content": "**What is 18F?**\n\nA) A team of innovators, recruited from the private sector and public\nservice.
\nB) In-house designers, developers, and product people making government\nservices simple and easy to use for the American people.
\nC) A new unit of the [General Services Administration](https://gsa.gov/)\nfocused on IT delivery, housed in the agency headquarters at 18th & F\nStreets in NW DC.
\nD) All of the above.\n\nYou guessed it. The correct answer is D – [All of the\nabove.](https://18f.gsa.gov/)\n\n[18F](https://18f.gsa.gov/) is a startup within GSA, encompassing the\n[Presidential Innovation Fellows](https://wh.gov/innovationfellows)\nprogram and a cutting edge digital delivery team. We’re doers, recruited\nfrom the most innovative corners of industry and the public sector, who\nare passionate about “hacking” bureaucracy to drive efficiency,\ntransparency, and savings for government agencies and the American\npeople.\n\n**But what do we actually do?**\n\n- Partner with agencies to deliver high quality in-house digital\n services using agile methodologies pioneered by top technology\n startups.\n- Rapidly deploy working prototypes using [Lean Startup\n principles](http://theleanstartup.com/principles) to get a desired\n product into a customer’s hands faster.\n- Offer digital tools and services that result in governmentwide\n reuse and savings, allowing agencies to reinvest in their core\n missions.\n- We’re transparent about our work, develop [in the\n open](https://github.com/18f), and commit to continuous\n improvement.\n\n**How do we do it?**\n\nFirst and foremost, by being focused on our users. We provide effective\nuser-centered services focused on the interaction between government and\nthe public it serves. At 18F, we want to build the 21st century\ngovernment you deserve.\n\nAgencies should see 18F as a new way to procure, build and deliver\ninnovative technology, digital services, and public-facing applications.\nWe operate using three models: for you, with you, or by you. We can\nbuild your solution for you; work with your team and provide additional\nexpertise or core capacity; or consult on how to build or buy\nuser-centric interfaces most effectively. 18F’s team of experts is here\nto help. After all, we all share the same goal of delivering incredible,\neasy-to-use digital services for the people and businesses we serve.\n\nOpen source code invites participation by talented and creative people,\nand we harness great open source projects in the service of our partner\nagencies. We use Agile Methods, the latest technologies, rapid\nprototyping, and great design to deliver our software. Our stack is\nmodern and flexible, using Python, Ruby, Node, WebFlow, SOLR,\nElasticSearch, NoSQL, and d3. Next month there may be something new —\nthe most important thing we’ve learned is to never stop learning.\n\n> *“It is not enough to adapt to today’s demands, we must anticipate the\n> changes that Americans expect from government.”*\n> Dan Tangherlini, Administrator, GSA\n\nLike lean startup, we favor experimentation, customer feedback and\nanalytics, and iterative design over a sequential “waterfall” model.\n([Read more about “Why the Lean Start-Up Changes Everything” in Harvard\nBusiness\nReview.](http://steveblank.com/2013/05/06/free-reprints-of-why-the-lean-startup-changes-everything/))\nIf startups and companies like General Electric can do it, why not the\nU.S. Government? Our goal with this approach is two-fold: build\nuser-centered digital services, and prove that building technology in an\nagile manner is possible in government at scale. [Let us\nknow](https://18f.gsa.gov/#contact) how we can help you, and how you can\nhelp us (hint: we want you!).\n\n[Team 18F](https://18f.gsa.gov/#team)\n", + "url": "/2014/03/19/hello-world-we-are-18f/", + "id": "/2014/03/19/hello-world-we-are-18f", + "relative_path": "_posts/2014-03-19-hello-world-we-are-18f.md", + "collection": "posts", + "excerpt": "18F is a startup within GSA, encompassing the Presidential Innovation Fellows program and a cutting edge digital delivery team. We’re doers, recruited from the most innovative corners of industry and the public sector, who are passionate about “hacking” bureaucracy to drive efficiency, transparency, and savings for government agencies and the American people.", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-19 09:14:29 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/80066867648/hello-world-we-are-18f", + "title": "Hello, world! We are 18F", + "description": "18F is a startup within GSA, encompassing the Presidential Innovation Fellows program and a cutting edge digital delivery team. We’re doers, recruited from the most innovative corners of industry and the public sector, who are passionate about “hacking” bureaucracy to drive efficiency, transparency, and savings for government agencies and the American people.", + "image": "", + "authors": [ + "18F" + ], + "tags": [ + "transformation services", + "culture change", + "modern practices" + ], + "hero": false, + "slug": "hello-world-we-are-18f", + "ext": ".md" + }, + "path": "_posts/2014-03-12-coming-soon.md", + "output": nil, + "previous": nil, + "content": "

We’re truly gratified so many of you liked our sneak preview!\nWe’ll be back real soon.

\n\n

Happy #Web25!

\n", + "url": "/2014/03/12/coming-soon/", + "id": "/2014/03/12/coming-soon", + "relative_path": "_posts/2014-03-12-coming-soon.md", + "collection": "posts", + "excerpt": "Coming soon!", + "draft": false, + "categories": [ + + ], + "layout": "post", + "date": "2014-03-12 09:11:00 -0500", + "tumblr_url": "http://18fblog.tumblr.com/post/79359602658/coming-soon", + "title": "Coming soon", + "description": "Coming soon!", + "image": "/assets/img/logos/18F-Logo-M.png", + "authors": [ + "18F" + ], + "tags": [ + "18f" + ], + "slug": "coming-soon", + "ext": ".md" +} From ed5e03322b7f4a034e5d9b404069cf080f832a2b Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Wed, 4 Jan 2017 17:06:13 -0800 Subject: [PATCH 20/79] new project intros and layout refinements --- _layouts/project-tag-results.html | 10 ++++--- _projects/doi-every-kid-in-a-park.md | 27 +++++++++++++++++++ _projects/ed-college-scorecard.md | 34 +++++++++++++++++++++++ _projects/fec-gov.md | 5 ++-- _sass/_components/tag-index.scss | 12 +++------ _sass/_core/variables.scss | 2 +- pages/how-we-work.md | 10 ++----- pages/what-we-deliver.md | 40 ++++++++++------------------ 8 files changed, 90 insertions(+), 50 deletions(-) create mode 100644 _projects/doi-every-kid-in-a-park.md create mode 100644 _projects/ed-college-scorecard.md diff --git a/_layouts/project-tag-results.html b/_layouts/project-tag-results.html index a80d475ae..ca35b3e04 100644 --- a/_layouts/project-tag-results.html +++ b/_layouts/project-tag-results.html @@ -9,12 +9,14 @@ {% if page.image %}
+ style="background-image: url({{ site.baseurl }}{{ page.image }});" + aria-label="{{ page.image_accessibility }}">
-

{{ page.project-type }}:
- {{ page.title }}

+

+ {{ page.project-type }}:
+ {{ page.title }} +

diff --git a/_projects/doi-every-kid-in-a-park.md b/_projects/doi-every-kid-in-a-park.md new file mode 100644 index 000000000..ed372e183 --- /dev/null +++ b/_projects/doi-every-kid-in-a-park.md @@ -0,0 +1,27 @@ +--- +layout: project-tag-results +project-type: "Project" +agency: "Department of the Interior" +title: "Every Kid in a Park" +subtitle: Designing for every user +excerpt: We helped the Department of the Interior reach fourth graders and help kids discover public lands. +image: /assets/blog/every-kid-in-a-park/glacier-park.jpg +image_accessibility: "Photograph of a group of children wearing orange shirts at a national park" +tags: +- every kid in a park +expiration_date: +github_repo: https://github.com/18F/ekip-api +project_url: https://www.everykidinapark.gov +--- + +Today, more than 80 percent of American families live in urban areas, and many lack easy access to outdoor spaces. The Department of the Interior created the Every Kid in a Park program to make it easier for fourth graders to discover public lands — but they needed a way for the program to reach fourth graders. + +The challenge was designing a website that fourth graders would be able to use. How do you design a federal website for an audience that doesn’t know the word federal? + +### Building a federal website for 10-year-olds + +Before we got involved, the Department of the Interior had already held events to talk to fourth graders and test out ideas for the website, so they were on the right path toward understanding real users and prioritizing their needs. + +We took that research and turned it into concrete design decisions. Our content designer wrote everything at a fourth grade reading level, including the legal section, privacy policy, and even the section for parents and guardians (we found kids were especially interested in the “grown-ups” section). Our visual designers used bright colors and pictures with families playing in parks (adults liked night landscapes, but kids found them scary). + +These design decisions helped make the program a huge success. Since it launched in September 2015, more than a million visitors to the site have downloaded nearly two million passes. This site showed what you can accomplish when you relentlessly focus on the needs of users — even when those users are still learning how to tie their shoes. diff --git a/_projects/ed-college-scorecard.md b/_projects/ed-college-scorecard.md new file mode 100644 index 000000000..d9a25b6a3 --- /dev/null +++ b/_projects/ed-college-scorecard.md @@ -0,0 +1,34 @@ +--- +layout: project-tag-results +project-type: "Project" +agency: "Department of Education" +title: "College Scorecard" +subtitle: Turning data into informed choices +excerpt: We worked with the Department of Education to bring together federal data from several agencies to help students assess colleges and universities. +image: /assets/blog/college-scorecard/college-scorecard-3.jpg +image_accessibility: "Grayscale photograph of eleven people meeting in small groups during a workshop" +tags: +- college scorecard +expiration_date: +github_repo: https://github.com/RTICWDT/college-scorecard +project_url: https://collegescorecard.ed.gov/ +--- + +Higher education may be the single most important investment students can make in their futures, but finding reliable information about affordability and value can be difficult. The Department of Education wanted to bring together data from several agencies to help students make informed choices about what school to attend. + +The Department of Education had worked with the [U.S. Digital Service](https://www.usds.gov/) and other agencies to gather the data, but they needed help getting it online and making it usable. + +### Interactive and open data is usable data + +Before we wrote any code, we started with research about how students, parents, and guidance counselors use data and how frustrating it is to find unreliable numbers. We used that research to create a cardboard prototype, then took that prototype to students to see if we were on the right track. + +Ultimately, we decided to build several tools that would help get the data to the public: + +- An API (application program interface) to help journalists, nonprofits, and private organizations access previously unreleased data from thousands of institutions. +- An interactive website where students can browse data about affordability, graduation rates, and how much students earn after graduation. +- A data site that supports academics, journalists, and researchers who are exploring college outcomes. + +College Scorecard has become a go-to resource for students and provided the data for many other tools that guide students in their decision-making process — even Google has integrated the data into search results. + +The process of building College Scorecard also had a profound effect on the Department of Education: their in-house digital service team has extended these iterative development and user-centered design techniques to other projects. + diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 3a8b9fafb..0ef145234 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -1,7 +1,8 @@ --- layout: project-tag-results -project-type: "Project" -title: "The Federal Election Commission" +project-type: "Partner" +agency: "Federal Election Commission" +title: "Federal Election Commission" subtitle: Making campaign data easier to use excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. image: /assets/img/home/hero-fec.png diff --git a/_sass/_components/tag-index.scss b/_sass/_components/tag-index.scss index 2077f4fd0..78f6eb2a4 100644 --- a/_sass/_components/tag-index.scss +++ b/_sass/_components/tag-index.scss @@ -3,18 +3,12 @@ .page-tag-results { .hero { - padding-bottom: $section-margins * 1.5; - } - - .hero-callout { - max-width: 21rem; - padding-top: $paragraph-margins; - padding-bottom: $paragraph-margins; - padding-left: $paragraph-margins * 1.2; + padding: $section-margins $paragraph-margins; } .hero-callout-title { - line-height: 1.2; + font-size: $h2-font-size * 0.85; + max-width: 22rem; } .post-list { diff --git a/_sass/_core/variables.scss b/_sass/_core/variables.scss index 756599a18..25c836e27 100644 --- a/_sass/_core/variables.scss +++ b/_sass/_core/variables.scss @@ -5,7 +5,7 @@ $h3-font-size: 2.4rem; $h5-font-size: 1.4rem; $h6-font-size: 1.2rem; -$base-font-size: 1.8rem; +$base-font-size: 1.8rem; $tiny-font-size: 1.2rem; diff --git a/pages/how-we-work.md b/pages/how-we-work.md index 360ee3697..47d2b6d9b 100644 --- a/pages/how-we-work.md +++ b/pages/how-we-work.md @@ -5,15 +5,9 @@ layout: default-intro lead: We’ll work hand-in-hand with your team, use modern techniques, and talk with real users to build the right thing, not just any thing. --- -We find our way through every project by putting the needs of the public first. -We use [human-centered design, agile methodologies, and open source software](https://playbook.cio.gov/) -to build world-class digital services for the American public. We’re committed -to working in the open, building accessible products, and deploying early and -often. +We find our way through every project by putting the needs of the public first. We use [human-centered design, agile methodologies, and open source software](https://playbook.cio.gov/) to build world-class digital services for the American public. We’re committed to working in the open, building accessible products, and deploying early and often. -See exactly how we put all of those principles into practice by reading -through our guides. We’re public about the standards we use, -and we publish any guidance we create for our staff. +See exactly how we put all of those principles into practice by reading through our guides. We’re public about the standards we use, and we publish any guidance we create for our staff. ### Our guides diff --git a/pages/what-we-deliver.md b/pages/what-we-deliver.md index 2a9962da4..268b512b3 100644 --- a/pages/what-we-deliver.md +++ b/pages/what-we-deliver.md @@ -18,11 +18,11 @@ redirect_from: /consulting/ If your agency’s project has a digital component, our team of software developers, visual designers, writers, and security experts can help you build it. We can help you: - Improve a challenging user process by reimagining a daunting task, as we did with the [U.S. Citizenship and Immigration Service](https://my.uscis.gov/) and their immigration and visa processes. -- Build a new site and API to showcase and synthesize data from multiple sources, as we did with Department of Education's [College Scorecard](https://collegescorecard.ed.gov/). +- Build a new site and API to showcase and synthesize data from multiple sources, as we did with Department of Education's [College Scorecard]({{ site.baseurl }}/project/ed-college-scorecard/). - Help you make your data more accessible with a user-friendly site and developer tools, as we did with the [Federal Election Commission]({{ site.baseurl }}/project/fec-gov/). - Build web-based tools to streamline internal agency processes, as we did with [Communicart](https://cap.18f.gov/) and [CALC](https://calc.gsa.gov/). - Scope a solution or collaborate on an idea in a way that empowers you to meet the needs of your users, as we did with the [Department of Labor’s Wage and Hour Division](https://18f.gsa.gov/2015/09/09/how-a-two-day-spring-moved-an-agency-twenty-years-forward/). -- Do user research and discovery sprints to promote a new digital model that houses information, as we did with NASA and the National Oceanic and Atmospheric Administration’s Climate Discovery project. +- Do user research and discovery sprints to promote a new digital model that houses information, as we did with NASA and the National Oceanic and Atmospheric Administration’s [Climate Discovery project](https://climate-data-user-study.18f.gov/). {% endmarkdown %}
@@ -32,18 +32,15 @@ If your agency’s project has a digital component, our team of software develop
- {% markdown %} +{% markdown %} ### Innovative ways to buy technology -We believe federal IT acquisitions can be faster, cheaper, and produce -better results. If your agency is developing a new request for quotation -for IT services or is interested in innovative ways to buy technology, -our team is excited to work with you. We can help you: +We believe federal IT acquisitions can be faster, cheaper, and produce better results. If your agency is developing a new request for quotation for IT services or is interested in innovative ways to buy technology, our team is excited to work with you. We can help you: - Write agile, modular, and user-centered design into your request for quotations through our RFP Ghostwriting service, like we did with the [Department of Health and Human Services]({{ site.baseurl }}/project/hhs-states/). - Develop a marketplace to buy IT services using modern techniques, like we did with the [Agile Blanket Purchase Agreement](https://pages.18f.gov/ads-bpa/). - Buy small pieces of open source code to advance your projects, like we’re doing with our [micro-purchase platform](https://micropurchase.18f.gov/). - {% endmarkdown %} +{% endmarkdown %}
@@ -52,19 +49,15 @@ our team is excited to work with you. We can help you:
- {% markdown %} +{% markdown %} ### Platforms built for government -Federal agencies face a unique set of technology problems. We’re -building a suite of secure, scalable tools and platforms that any agency -can use to solve these common problems. Our platforms are built with the -needs of government addressed right at the beginning and are being -actively improved to meet your needs. We can help you: +Federal agencies face a unique set of technology problems. We’re building a suite of secure, scalable tools and platforms that any agency can use to solve these common problems. Our platforms are built with the needs of government addressed right at the beginning and are being actively improved to meet your needs. We can help you: - Host your applications in the cloud with our [cloud.gov platform](https://cloud.gov/). - Build customizable and easy-to-maintain static sites with the [Federalist platform](https://federalist.18f.gov/). - Release and manage your API with [api.data.gov](https://api.data.gov/). - {% endmarkdown %} +{% endmarkdown %}
@@ -73,18 +66,16 @@ actively improved to meet your needs. We can help you:
- {% markdown %} +{% markdown %} ### A path to becoming a digitally-powered organization -We can embed a fully-dedicated 18F team within your agency to work -hand-in-hand with you to increase your internal digital capacity, help -you form new digital habits, and ultimately drive organizational culture change. We can help you: +We can embed a fully-dedicated 18F team within your agency to work hand-in-hand with you to increase your internal digital capacity, help you form new digital habits, and ultimately drive organizational culture change. We can help you: - Attract, empower, and grow your own digital team. - Adopt a DevOps culture and begin a transition to the cloud. - Institute lean-agile practices, including agile acquisitions. - Establish a model to modernize your legacy systems. - {% endmarkdown %} +{% endmarkdown %}
@@ -93,17 +84,14 @@ you form new digital habits, and ultimately drive organizational culture change.
- {% markdown %} +{% markdown %} ### Modern digital service techniques -We can provide your team with the skills and knowledge they need to -modernize your agency’s digital services. We’ve also built a number of -knowledge-sharing and documentation tools for 18F’s own use that you can -copy and use at your agency. We can help you: +We can provide your team with the skills and knowledge they need to modernize your agency’s digital services. We’ve also built a number of knowledge-sharing and documentation tools for 18F’s own use that you can copy and use at your agency. We can help you: - Run a workshop on agile software development, like the [Lego workshop we did with the Small Business Administration](https://18f.gsa.gov/2015/08/31/how-playing-with-legos-taught-executives-agile/) or the longer one we did with the [Social Security Administration](https://18f.gsa.gov/2015/02/11/a-story-of-an-agile-workshop/). - Host a design studio, like we did with the [Department of the Interior](https://18f.gsa.gov/2014/09/25/design-studio-onrr/). - Create your own lightweight knowledge sharing platform based off 18F’s [Guides](https://pages.18f.gov/guides-template/) and [Pages](https://pages.18f.gov/) projects. - {% endmarkdown %} +{% endmarkdown %}
From 925ba37ab7aee0da753966c0cbcf91239ec47e4c Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Wed, 4 Jan 2017 18:13:29 -0800 Subject: [PATCH 21/79] various markdown fixes --- .../2015-09-21-cfpb-design-speaker-series.md | 165 ++---------- ...tizens-register-and-connect-with-states.md | 1 + ...uilding-a-better-government-design-team.md | 90 ++----- .../2015-10-06-how-we-start-a-new-project.md | 164 +++--------- _posts/2015-10-07-digital-economy-practice.md | 56 +--- ...26-micro-purchase-criteria-announcement.md | 74 ++---- ...seiti-what-we-learned-where-were-headed.md | 1 + ...for-all-insights-from-cfpb-natalie-kurz.md | 70 ++--- .../2015-11-04-complexity-is-the-adversary.md | 12 +- ...-09-conversation-with-cfpb-natalie-kurz.md | 234 ++++------------ ...015-11-10-boston-is-using-gsa-calc-tool.md | 1 + ...5-11-17-choose-design-over-architecture.md | 251 +++++------------- ...-refreshed-with-eye-toward-mobile-users.md | 45 +--- ...ernment-decisions-with-machine-learning.md | 131 +-------- _posts/2015-11-30-complex-data-in-useiti.md | 106 ++------ ...ved-18fs-onboarding-process-in-3-months.md | 1 + ...nalytics-usa-gov-new-features-more-data.md | 91 ++----- ...ironmental-digital-services-marketplace.md | 30 +-- ...wer-of-mindset-normatives-matthew-milan.md | 81 ++---- ...12-08-using-emoji-for-knowledge-sharing.md | 1 + _posts/2015-12-11-how-we-test-18f-gsa-gov.md | 101 ++----- ...-landingham-transformed-18fs-onboarding.md | 3 +- ...-visits-us-to-begin-series-of-exchanges.md | 6 +- ...5-12-29-is-your-project-using-agilefall.md | 145 ++-------- .../2015-12-30-turning-learning-up-to-11.md | 33 +-- ...-turning-learning-up-to-11-transparency.md | 23 +- ...-new-years-resolution-be-even-more-open.md | 1 + ...-introducing-the-css-coding-style-guide.md | 2 - ...rchase-auctions-round-2-what-we-learned.md | 1 + ...n-learn-from-the-interiors-social-feeds.md | 1 + ...ring-the-best-data-from-user-interviews.md | 228 ++++------------ ...tics.usa.gov-agency-specific-dashboards.md | 1 + ...interacting-with-the-federal-government.md | 1 + ...-questions-for-the-nasa-chief-historian.md | 6 +- 34 files changed, 451 insertions(+), 1706 deletions(-) diff --git a/_posts/2015-09-21-cfpb-design-speaker-series.md b/_posts/2015-09-21-cfpb-design-speaker-series.md index 0b3edfac0..208110c1a 100644 --- a/_posts/2015-09-21-cfpb-design-speaker-series.md +++ b/_posts/2015-09-21-cfpb-design-speaker-series.md @@ -12,151 +12,42 @@ description: "Designers Mollie Bates and Natalia Fitzgerald will be speaking tom image: /assets/blog/speaker-series/cfpb-speakers.jpg --- -![Consumer Financial Protection Bureau designers Mollie Bates and Natalia Fitzgerald]({{site.baseurl}}/assets/blog/speaker-series/cfpb-speakers.jpg) +Designers Mollie Bates and Natalia Fitzgerald are intimately acquainted with the ins and outs of consumer finance. Not only did the two personally feel the effects of the 2008 market crash, but both helped build the design team at the [Consumer Financial Protection Bureau](http://www.consumerfinance.gov/) (CFPB), an organization "devoted to empowering consumers to take more control over their economic lives" through leadership, education, and enforcement of regulations. -Designers Mollie Bates and Natalia Fitzgerald are intimately acquainted -with the ins and outs of consumer finance. Not only did the two -personally feel the effects of the 2008 market crash, but both helped -build the design team at the [Consumer Financial Protection -Bureau](http://www.consumerfinance.gov/) (CFPB), -an organization "devoted to empowering consumers to take more control over their economic lives" through leadership, education, and enforcement of regulations. - -Bates and Fitzgerald will be speaking tomorrow at 18F on their -experience building the design team at the CFPB, as well as more -generally on their approaches to user-centered design. In anticipation -of this event, we sat down with them (in a metaphorical sense) to chat. -Below are the results of our email-based conversation. +Bates and Fitzgerald will be speaking tomorrow at 18F on their experience building the design team at the CFPB, as well as more generally on their approaches to user-centered design. In anticipation of this event, we sat down with them (in a metaphorical sense) to chat. Below are the results of our email-based conversation. *Note: This interview has been edited for clarity.* -**18F: Before starting with CFPB, what was your take on the average -American’s knowledge of consumer finance? What did you identify as the -biggest problem regarding transparency and communication of consumer -finance data, and how did your views change once you began working at -the CFPB?** - -**Mollie Bates**: Before starting at CFPB, I think I had just a vague -understanding of the cascading problems in our economy created by people -not fully understanding the terms and risks of their mortgages. I don’t -think I had any awareness of the average American’s knowledge of -consumer finance; I was only familiar with my own struggles to read the -fine print on a credit card contract or calculate the impacts of -interest on my budget. Now that I work at the CFPB, I have a much -broader understanding of the variety and complexity of consumer -financial products that consumers often deal with, from mortgages and -student loans to prepaid cards and debt collection. The terms and risks -of these products are so complicated; as designers, we often play the -“average American” role on the team when we’re working with lawyers and -economists. If we don’t understand it and can’t simply explain it to -others, we know our audience won’t get it either. - -**Natalia Fitzgerald**: I was living in Chicago in September 2008 when -the bottom dropped out of the market. Prior to the market collapse, I -didn’t consider the average American’s knowledge of consumer finance. -But, I imagine that my experiences mirrored those of other Americans. I -can still recall my feelings of financial uncertainty and vulnerability. -Despite all attempts at frugality and budgeting on my part, I couldn’t -get around the fact that I had mandatory monthly expenses to pay: rent, -car payment, student loans, utilities, food and credit cards. To add to -the feeling of instability, there were ongoing budget reductions at my -job, which meant that, on some days, I would clock in only to find that -certain co-workers were gone — laid off discreetly in order to balance -the budget. It was a tense time. - -Shortly after the Bureau’s first birthday in July of 2012, I joined the -design team at the CFPB. At that time, the team was a hardworking and -dedicated unit of fewer than ten people. I didn’t know it yet, but I -would spend the next two years building a robust in-house graphic design -team within the agency. - -Three years in, I still feel committed to our mission of transforming -the financial landscape by empowering consumers with well-designed, -user-centered tools and resources. Armed with impartial information, -data, and an avenue for filing complaints, the American people now have -a voice within the financial marketplace. - -**18F: What’s the biggest government-specific design challenge you’ve -faced to date, and how did you address it?** - -**MB**: I think that corporate America already understands the -bottom-line value of incorporating design into communication, marketing, -and products. Government is playing catch-up, and that’s the biggest -challenge I see. We are working hard to build relationships across the -Bureau so that everyone has a positive experience working with our team -and asks their colleague *“Has the design team looked at that?”* before -we release a report, chart, or something else to the public. - -**NF**: As a government agency, we are required by law to comply with -Section 508, which dictates that federal agencies make their electronic -and information technology fully accessible to all audiences, including -people with disabilities. Accessibility for all Americans has always -been at the core of our mission as an organization, but this year we -have strived to move toward a stricter adherence to the Web Content -Accessibility Guideline (WCAG) 2.0. The guidelines are extensive and -there are many details to consider and work through. To add a level of -complexity, the guidelines were last updated in 2008, so a lot has -changed in terms of technology and the way web content is viewed. In the -absence of updated guidelines, we are charged with filling in the gaps -that exist and working to adhere not just to the specifications of the -law, but also to the spirit of the law. In working through this -challenge, we must carefully consider the diverse needs of our users. -We’re definitely becoming better designers as a result. - -**18F: What strategies do you use to improve communication within your -own design team?** - -**MB**: More than half of our design and development team members work -from their homes around the country, so we value asynchronous, -transparent communication. We use GitHub issue threads to iterate on -design projects and build our design standards. (You can snoop on, or -join, our discussions on our [Design Manual -repo](https://github.com/cfpb/design-manual/issues).) We also have -three cross-project design pods that meet weekly for an hour of peer -critique, and then we meet as a full team each Friday to show progress -on projects. Our critique technique has changed as our team has grown, -and we’re always striving to find a replacement for the irreplaceable -“hang it on a wall and discuss in person”-style of critique. - -**NF**: We face a lot of communications obstacles stemming from the -separation of our large team into smaller self-sustaining project teams, -a substantial remote workforce, and a diversity of projects that are -progressing all at once. As designers, it is our responsibility to -ensure that the work we produce is consistent and clear. So, it’s -especially important that we avoid working in silos and that we keep up -with the work that other teams are producing. - -Although we don’t all work side-by-side, we have developed a rich -culture of sharing and collaboration. This has taken many forms over the -years, from graphic design critiques, to brand development meetings, to -asynchronous feedback using GitHub. More recently, we set up a system of -cross-project critique sessions. In order to encourage -cross-pollination, we mixed up the groupings so that a single member -from each project team is represented. Breaking people out of their -project teams and maintaining a continuous conversation about the work -as it develops has improved our team culture and knocked down walls that -previously existed. +**18F: Before starting with CFPB, what was your take on the average American’s knowledge of consumer finance? What did you identify as the biggest problem regarding transparency and communication of consumer finance data, and how did your views change once you began working at the CFPB?** + +**Mollie Bates**: Before starting at CFPB, I think I had just a vague understanding of the cascading problems in our economy created by people not fully understanding the terms and risks of their mortgages. I don’t think I had any awareness of the average American’s knowledge of consumer finance; I was only familiar with my own struggles to read the fine print on a credit card contract or calculate the impacts of interest on my budget. Now that I work at the CFPB, I have a much broader understanding of the variety and complexity of consumer financial products that consumers often deal with, from mortgages and student loans to prepaid cards and debt collection. The terms and risks of these products are so complicated; as designers, we often play the “average American” role on the team when we’re working with lawyers and economists. If we don’t understand it and can’t simply explain it to others, we know our audience won’t get it either. + +**Natalia Fitzgerald**: I was living in Chicago in September 2008 when the bottom dropped out of the market. Prior to the market collapse, I didn’t consider the average American’s knowledge of consumer finance. But, I imagine that my experiences mirrored those of other Americans. I can still recall my feelings of financial uncertainty and vulnerability. Despite all attempts at frugality and budgeting on my part, I couldn’t get around the fact that I had mandatory monthly expenses to pay: rent, car payment, student loans, utilities, food and credit cards. To add to the feeling of instability, there were ongoing budget reductions at my job, which meant that, on some days, I would clock in only to find that certain co-workers were gone — laid off discreetly in order to balance the budget. It was a tense time. + +Shortly after the Bureau’s first birthday in July of 2012, I joined the design team at the CFPB. At that time, the team was a hardworking and dedicated unit of fewer than ten people. I didn’t know it yet, but I would spend the next two years building a robust in-house graphic design team within the agency. + +Three years in, I still feel committed to our mission of transforming the financial landscape by empowering consumers with well-designed, user-centered tools and resources. Armed with impartial information, data, and an avenue for filing complaints, the American people now have a voice within the financial marketplace. + +**18F: What’s the biggest government-specific design challenge you’ve faced to date, and how did you address it?** + +**MB**: I think that corporate America already understands the bottom-line value of incorporating design into communication, marketing, and products. Government is playing catch-up, and that’s the biggest challenge I see. We are working hard to build relationships across the Bureau so that everyone has a positive experience working with our team and asks their colleague *“Has the design team looked at that?”* before we release a report, chart, or something else to the public. + +**NF**: As a government agency, we are required by law to comply with Section 508, which dictates that federal agencies make their electronic and information technology fully accessible to all audiences, including people with disabilities. Accessibility for all Americans has always been at the core of our mission as an organization, but this year we have strived to move toward a stricter adherence to the Web Content Accessibility Guideline (WCAG) 2.0. The guidelines are extensive and there are many details to consider and work through. To add a level of complexity, the guidelines were last updated in 2008, so a lot has changed in terms of technology and the way web content is viewed. In the absence of updated guidelines, we are charged with filling in the gaps that exist and working to adhere not just to the specifications of the law, but also to the spirit of the law. In working through this challenge, we must carefully consider the diverse needs of our users. We’re definitely becoming better designers as a result. + +**18F: What strategies do you use to improve communication within your own design team?** + +**MB**: More than half of our design and development team members work from their homes around the country, so we value asynchronous, transparent communication. We use GitHub issue threads to iterate on design projects and build our design standards. (You can snoop on, or join, our discussions on our [Design Manual repo](https://github.com/cfpb/design-manual/issues).) We also have three cross-project design pods that meet weekly for an hour of peer critique, and then we meet as a full team each Friday to show progress on projects. Our critique technique has changed as our team has grown, and we’re always striving to find a replacement for the irreplaceable “hang it on a wall and discuss in person”-style of critique. + +**NF**: We face a lot of communications obstacles stemming from the separation of our large team into smaller self-sustaining project teams, a substantial remote workforce, and a diversity of projects that are progressing all at once. As designers, it is our responsibility to ensure that the work we produce is consistent and clear. So, it’s especially important that we avoid working in silos and that we keep up with the work that other teams are producing. + +Although we don’t all work side-by-side, we have developed a rich culture of sharing and collaboration. This has taken many forms over the years, from graphic design critiques, to brand development meetings, to asynchronous feedback using GitHub. More recently, we set up a system of cross-project critique sessions. In order to encourage cross-pollination, we mixed up the groupings so that a single member from each project team is represented. Breaking people out of their project teams and maintaining a continuous conversation about the work as it develops has improved our team culture and knocked down walls that previously existed. **18F: Finally, what piece of advice would you offer a new designer?** -**MB**: Start working full-time with a group of designers that can help -you grow and learn. You can only learn what you like and what your -strengths are by working, so don’t fret over getting the perfect job! +**MB**: Start working full-time with a group of designers that can help you grow and learn. You can only learn what you like and what your strengths are by working, so don’t fret over getting the perfect job! -**NF**: My advice? Learn the fundamentals. When I was a new designer I -felt pressure to keep up with the latest trends in graphic design. I now -know that effective design is all about the fundamentals and there’s -nothing trendy about that. The fundamentals today — balance, -composition, spacing, typography and hierarchy — are the same as they -were one hundred years ago. In a world of rapidly changing technology, -the fundamentals remain constant. Learn them now and they will serve you -for your entire career. +**NF**: My advice? Learn the fundamentals. When I was a new designer I felt pressure to keep up with the latest trends in graphic design. I now know that effective design is all about the fundamentals and there’s nothing trendy about that. The fundamentals today — balance, composition, spacing, typography and hierarchy — are the same as they were one hundred years ago. In a world of rapidly changing technology, the fundamentals remain constant. Learn them now and they will serve you for your entire career. \*\*\* -A big thanks to Mollie and Natalia for taking the time to share their -stories with us. To learn more about Mollie and Natalia’s experience -shaping the design team at CFPB and to hear more of their insights into -the design process, tune in to the livestream of their talk, which will -air on Sept. 22 at 3:30 p.m. ET. We’ll tweet the link just before the -event starts, so follow [@18F](https://twitter.com/18F) if you haven’t -already. +A big thanks to Mollie and Natalia for taking the time to share their stories with us. To learn more about Mollie and Natalia’s experience shaping the design team at CFPB and to hear more of their insights into the design process, tune in to the livestream of their talk, which will air on Sept. 22 at 3:30 p.m. ET. We’ll tweet the link just before the event starts, so follow [@18F](https://twitter.com/18F) if you haven’t already. diff --git a/_posts/2015-09-22-usa-gov-launches-vote-usa-gov-to-help-citizens-register-and-connect-with-states.md b/_posts/2015-09-22-usa-gov-launches-vote-usa-gov-to-help-citizens-register-and-connect-with-states.md index 008a3f7dc..028d4db49 100644 --- a/_posts/2015-09-22-usa-gov-launches-vote-usa-gov-to-help-citizens-register-and-connect-with-states.md +++ b/_posts/2015-09-22-usa-gov-launches-vote-usa-gov-to-help-citizens-register-and-connect-with-states.md @@ -8,6 +8,7 @@ tags: excerpt: One of the most important rights of American citizens is the right to vote. It is the foundation of our democracy, and in many ways, the basis of our government. This is why the team at USA.gov is excited to announce the launch of vote.USA.gov. description: Every American citizen has a right to vote but many don't know how to register. Vote.usa.gov is a website to help citizens register to vote in their state. image: /assets/blog/vote-usa-gov/vote.jpg +hero: false --- _This post originally appeared on the [GSA Blog](http://gsablogs.gsa.gov/gsablog/2015/09/22/usa-gov-launches-vote-usa-gov-to-help-citizens-register-and-connect-with-states/) by Sarah Crane, Acting Director of the Federal Citizen Information Center. Presidential Innovation Fellows Andrew Stroup, Kate McCall-Kiley, and Luke Keller were involved in the building and launch of [vote.usa.gov](https://vote.usa.gov/)._ diff --git a/_posts/2015-10-02-building-a-better-government-design-team.md b/_posts/2015-10-02-building-a-better-government-design-team.md index 73452c081..4fe0e03b2 100644 --- a/_posts/2015-10-02-building-a-better-government-design-team.md +++ b/_posts/2015-10-02-building-a-better-government-design-team.md @@ -9,64 +9,32 @@ tags: - speaker series - distributed excerpt: "Building a high-performing design team is tough under the best of circumstances. Add in governmental regulations, a distributed workforce, and rapid growth of the parent organization, and the process is even tougher." -description: "Building a high-performing design team is tough under the best of circumstances. Add in governmental regulations, a distributed workforce, and rapid growth of the parent organization, and the process is even tougher." image: /assets/blog/speaker-series/cfpb-talk.jpg --- -![Mollie Bates and Natalia Fitzgerald give a talk at 18F about the design team at the Consumer -Financial Protection Bureau]({{site.baseurl}}/assets/blog/speaker-series/cfpb-talk.jpg) - -Building a high-performing design team is tough under the best of -circumstances. Add in governmental regulations, a distributed workforce, -and rapid growth of the parent organization, and the process is even -tougher — a difficulty Mollie Bates and Natalia Fitzgerald are very -familiar with. - -Bates and Fitzgerald helped build the design team at the [Consumer -Financial Protection Bureau](http://www.consumerfinance.gov/) (CFPB), -whose goal is to help consumers reclaim control over their financial -well-being by providing educational materials, improving the -accessibility of financial data, collecting and responding to consumer -complaints, and enforcing regulations. - -“It didn’t happen overnight,” Bates said of the team’s growth, and the -process definitely presented challenges. By staying flexible and -creative, CFPB has grown a team of more than 70 designers and developers -(of roughly 1,600 total employees). Having a team of this size allows -CFPB to do more in-house design and development than most federal -agencies. +*Image: Mollie Bates and Natalia Fitzgerald give a talk at 18F about the design team at the Consumer Financial Protection Bureau* + +Building a high-performing design team is tough under the best of circumstances. Add in governmental regulations, a distributed workforce, and rapid growth of the parent organization, and the process is even tougher — a difficulty Mollie Bates and Natalia Fitzgerald are very familiar with. + +Bates and Fitzgerald helped build the design team at the [Consumer Financial Protection Bureau](http://www.consumerfinance.gov/) (CFPB), whose goal is to help consumers reclaim control over their financial well-being by providing educational materials, improving the accessibility of financial data, collecting and responding to consumer complaints, and enforcing regulations. + +“It didn’t happen overnight,” Bates said of the team’s growth, and the process definitely presented challenges. By staying flexible and creative, CFPB has grown a team of more than 70 designers and developers (of roughly 1,600 total employees). Having a team of this size allows CFPB to do more in-house design and development than most federal agencies. {{ "https://www.youtube-nocookie.com/embed/EXP1DHH2GrI" | embed: "Building a better government design team" }} -*How* the team grew was the subject of a presentation Bates and -Fitzgerald gave at 18F on Tuesday, Sept. 22. Starting with an overview -of the CFPB’s seven core functions and a brief history of the -independent bureau within the Federal Reserve System, the two shifted to -a discussion of the four tactics employed to bring together the team -that exists today. +*How* the team grew was the subject of a presentation Bates and Fitzgerald gave at 18F on Tuesday, Sept. 22. Starting with an overview of the CFPB’s seven core functions and a brief history of the independent bureau within the Federal Reserve System, the two shifted to a discussion of the four tactics employed to bring together the team that exists today. How did the team get to where it is today? ## Build a diverse team of creatives -Assembling a group of driven, hardworking, creative folks seems the -obvious first step in creating a design team, but there’s more to it -than that. Early on, CFPB's design team featured predominantly -generalists, and gradually grew to include more specialists. As the team -grew, Bates and Fitzgerald made careful observations on the types of -people who flourished in the CFPB environment. +Assembling a group of driven, hardworking, creative folks seems the obvious first step in creating a design team, but there’s more to it than that. Early on, CFPB's design team featured predominantly generalists, and gradually grew to include more specialists. As the team grew, Bates and Fitzgerald made careful observations on the types of people who flourished in the CFPB environment. -The most successful CFPB designers are those who are “pragmatic, -collaborative, team-driven, empathetic, and diplomatic (in other words, -really patient and flexible),” Bates said. She added, “Of course, -everyone here is really driven by our mission.” +The most successful CFPB designers are those who are “pragmatic, collaborative, team-driven, empathetic, and diplomatic (in other words, really patient and flexible),” Bates said. She added, “Of course, everyone here is really driven by our mission.” ## Embrace and cultivate team culture -The CFPB design team is both distributed and comprised of smaller -project teams — two factors that could lead to siloed work. To help -designers break out of their bubbles and stay as open and collaborative -as possible, the team promotes the following four values: +The CFPB design team is both distributed and comprised of smaller project teams — two factors that could lead to siloed work. To help designers break out of their bubbles and stay as open and collaborative as possible, the team promotes the following four values: - **Iteration** — Agile doesn’t always cater to designers, but the team has found a way to align the design team’s work with that of the developers and UX designers. @@ -78,42 +46,18 @@ as possible, the team promotes the following four values: ## Establish core standards -Establishing design standards helps your users more quickly familiarize -themselves with your brand (and its unique internal logic), but it also -helps your team members. Early on, the design team acknowledged that -developing and crystallizing CFPB’s brand standards would improve -designers’ efficiency. +Establishing design standards helps your users more quickly familiarize themselves with your brand (and its unique internal logic), but it also helps your team members. Early on, the design team acknowledged that developing and crystallizing CFPB’s brand standards would improve designers’ efficiency. -“There’s no need to reinvent the wheel with each new project,” -Fitzgerald explained. Templates enable designers to work more -efficiently and focus on what really matters: doing mission-oriented -work. +“There’s no need to reinvent the wheel with each new project,” Fitzgerald explained. Templates enable designers to work more efficiently and focus on what really matters: doing mission-oriented work. ## Expand and maximize your reach -Finally, designers at CFPB work to expand and maximize their -organization’s reach. How does this play out on a practical level? At -CFPB, it involves creating opportunities for new work, working well with -design partners and colleagues, and designing for all users. +Finally, designers at CFPB work to expand and maximize their organization’s reach. How does this play out on a practical level? At CFPB, it involves creating opportunities for new work, working well with design partners and colleagues, and designing for all users. -CFPB encourages designers to take on small projects, which could turn -into something much larger, and to serve as stewards of good design. “We -have the opportunity to serve as a resource of design expertise,” -Fitzgerald said, “and to practice design diplomacy in each project.” +CFPB encourages designers to take on small projects, which could turn into something much larger, and to serve as stewards of good design. “We have the opportunity to serve as a resource of design expertise,” Fitzgerald said, “and to practice design diplomacy in each project.” -Perhaps the most notable way the team maximizes its reach is by creating -products that serve as broad an audience as possible. CFPB has an -in-house 508 accessibility expert, and the team actively seeks ways to -make its products even more accessible. They write using plain language -(and provide content in multiple languages), and do extensive testing to -ensure products’ functionality. +Perhaps the most notable way the team maximizes its reach is by creating products that serve as broad an audience as possible. CFPB has an in-house 508 accessibility expert, and the team actively seeks ways to make its products even more accessible. They write using plain language (and provide content in multiple languages), and do extensive testing to ensure products’ functionality. ## Learn more -You can view the entirety of Bates and Fitzgerald’s talk [right -here](https://www.youtube.com/watch?v=EXP1DHH2GrI). To see some of the -speakers’ principles in action, head over to the [CFPB website](http://www.consumerfinance.gov/) -and explore their [Design Manual](https://cfpb.github.io/design-manual/) -and [Open Tech sites](http://cfpb.github.io/). And finally, if -you have feedback for the CFPB, please share it via their [GitHub repos](https://github.com/cfpb) — your -contributions help the CFPB create more useful products. +You can view the entirety of Bates and Fitzgerald’s talk [right here](https://www.youtube.com/watch?v=EXP1DHH2GrI). To see some of the speakers’ principles in action, head over to the [CFPB website](http://www.consumerfinance.gov/) and explore their [Design Manual](https://cfpb.github.io/design-manual/) and [Open Tech sites](http://cfpb.github.io/). And finally, if you have feedback for the CFPB, please share it via their [GitHub repos](https://github.com/cfpb) — your contributions help the CFPB create more useful products. diff --git a/_posts/2015-10-06-how-we-start-a-new-project.md b/_posts/2015-10-06-how-we-start-a-new-project.md index 0d5e91af1..ff2a33221 100644 --- a/_posts/2015-10-06-how-we-start-a-new-project.md +++ b/_posts/2015-10-06-how-we-start-a-new-project.md @@ -7,134 +7,48 @@ tags: - platforms - federalist - user-centered design -excerpt: "We built the first iteration of Federalist in a matter of months. Today, -we’re lifting the curtain and looking at what went into building the -platform, so you can get a sense of what it looks like when 18F starts a -project from scratch." -description: "We built first iteration of Federalist in a matter of months. Today, -we’re lifting the curtain and looking at what went into building the -platform, so you can get a sense of what it looks like when 18F starts a -project from scratch." +excerpt: "We built the first iteration of Federalist in a matter of months. Today, we’re lifting the curtain and looking at what went into building the platform, so you can get a sense of what it looks like when 18F starts a project from scratch." image: /assets/blog/federalist/federalist-screenshot.jpg --- -![A screenshot of the Federalist homepage]({{site.baseurl}}/assets/blog/federalist/federalist-screenshot.jpg) - -We recently [launched a -site](https://18f.gsa.gov/2015/09/15/federalist-platform-launch/) using -[Federalist](https://federalist.18f.gov/), an -alpha-stage content management -platform that makes it easy and inexpensive for federal agencies to -build secure, reliable, and accessible websites. - -We built the first iteration of Federalist in a matter of months. Today, -we’re lifting the curtain and looking at what went into building the -platform, so you can get a sense of what it looks like when 18F starts a -project from scratch. - -About six months ago, Dave Cole, -the lead developer on the Federalist project, first pitched the idea of -creating a platform that would build static government websites to the -General Service Administration's Office of Citizen Services and -Innovative Technologies (OCSIT). - -Dave’s [pitch](https://github.com/18F/federalist/blob/master/README.md#initial-proposal) called for a platform that contained templates for common use cases, -like a departmental website, a single page report website, API and -developer documentation, and a project dashboard. - -“Agencies wishing to use a template [could] simply create a cloned copy -of the template, add their own content, and modify it to suit their -needs,” he said, noting that social, analytics, and accessibility -components would be built into each site. - -After receiving positive feedback from OSCIT, he sketched out what the -platform might look like: It would have a web-based front end that would -interface with a JSON API server that would handle authentication, -managing users, building sites, and receiving webhook requests from -GitHub. - -Content creators across the government would not have to worry about -linking up services like GitHub, a text editor, and Amazon Web Services -or Microsoft’s Azure to create their static sites — Federalist would -take care of that for them. And the platform would handle the publishing -infrastructure in order to provide scalable, fast, and affordable static -hosting for websites across the federal government. +We recently [launched a site](https://18f.gsa.gov/2015/09/15/federalist-platform-launch/) using [Federalist](https://federalist.18f.gov/), an alpha-stage content management platform that makes it easy and inexpensive for federal agencies to build secure, reliable, and accessible websites. + +We built the first iteration of Federalist in a matter of months. Today, we’re lifting the curtain and looking at what went into building the platform, so you can get a sense of what it looks like when 18F starts a project from scratch. + +About six months ago, Dave Cole, the lead developer on the Federalist project, first pitched the idea of creating a platform that would build static government websites to the General Service Administration's Office of Citizen Services and Innovative Technologies (OCSIT). + +Dave’s [pitch](https://github.com/18F/federalist/blob/master/README.md#initial-proposal) called for a platform that contained templates for common use cases, like a departmental website, a single page report website, API and developer documentation, and a project dashboard. + +“Agencies wishing to use a template [could] simply create a cloned copy of the template, add their own content, and modify it to suit their needs,” he said, noting that social, analytics, and accessibility components would be built into each site. + +After receiving positive feedback from OSCIT, he sketched out what the platform might look like: It would have a web-based front end that would interface with a JSON API server that would handle authentication, managing users, building sites, and receiving webhook requests from GitHub. + +Content creators across the government would not have to worry about linking up services like GitHub, a text editor, and Amazon Web Services or Microsoft’s Azure to create their static sites — Federalist would take care of that for them. And the platform would handle the publishing infrastructure in order to provide scalable, fast, and affordable static hosting for websites across the federal government. ## Coding the site -Soon after he sketched out a proof of concept for Federalist, Dave -started working with Brad Nunnally, a designer; Jeremia Kimelman, a -developer; and Gail Swanson, a designer and researcher, to research and -code the platform. - -Much of the team’s initial research came from looking at -[notalone.gov](https://18f.gsa.gov/2014/05/09/a-few-notes-on-notalone-gov/) -and [the homepage of healthcare.gov](http://www.digitalgov.gov/2013/05/01/new-healthcare-gov-is-open-cms-free/) — -government websites built using similar technology stacks. By creating a -platform, the Federalist team knew that lots of government agencies -would be able to build similar sites without starting from the ground -up. - -Jeremia recalled his initial reaction to Dave’s proof of concept and the -sense of purpose that underlaid the team’s MVP: “I remember Dave showing -us the requirements he had laid out for building a web-based front end -that would interface with GitHub and saying, ‘What’s the simplest thing -we could initially build to satisfy these requirements?’” said Jeremia. -“We then wrote the [initial -commit](https://github.com/18F/federalist/tree/6ad14fec13826778d20a2046bdf2e41b36bec660) -– which basically was a very, very simple version of what Federalist -eventually became.” - -After throwing up the initial code, Dave, Gail, and Jeremia sketched out -priorities for the platform. The three began working on a more refined -proof of concept, and had plans to then build collaboration tools -(followed by scalability tools) before approaching users. - -But then a client approached them about building a site — and they -wanted it soon. The impending deadline shifted the group’s approach. - -“At that point, the research we were doing switched into real-time,” -said Dave. “As soon as we built the basic platform, we brought on users, -which was really helpful. It meant we had to test as we went, and solve -the needs of both developers and content creators at the same time.” - -Bringing users on board early also helped inform the product’s roadmap. -As Jeremia recalled, the team “needed to make sure scalability worked -immediately because we had a client and they were going to launch a -website.” - -In addition to dealing with scalability challenges, the team also had to -consider the tricky balance between creating a product for one client -and creating a template that could be used by future clients. - -Gail recalled the struggles inherent in this situation. “You’re constantly -thinking ‘I could use a really inventive layout for this client, but -that might not work for future clients.' So it was a constant -back-and-forth between a specific implementation of the site and a -generalized platform, and bouncing between those two to get something -that satisfied on all fronts.” Ultimately, the team found a compromise -that incorporated engaging, scalable features, and customizability. - -Federalist launched on September 15 and has several other projects on -the horizon. The key to its success, said Jeremia, was the team’s -thinking in terms of platform and not websites. - -“We’re always thinking ‘How do we standardize what we build so we don’t -have to start from scratch each time?’” he said. “Federalist does that, -and using tools that have already been reviewed for security -compliance.” - -Convenience, customizability, and ease of use — that’s what Federalist’s -platform strives to provide to agencies. “[That’s] what we wanted to -turn around and offer people,” Jeremia said, stressing that the -pre-approval of components makes it easier for agencies to set up and -use the platform. - -To date, Federalist has enjoyed notable success, but the team isn’t -resting on its laurels. They’re continually collecting feedback from -users and identifying ways to make their product even more usable and -user-friendly. They’d love your feedback, too: If you have thoughts to -share, [you can contact the team -here](https://github.com/18f/federalist/issues) or [sign up for the -alpha platform -here](https://docs.google.com/forms/d/1iB8aW7c9r1QH3s8XElQCrnXRGjAiPUYpWG1CMeEqGIo/viewform). +Soon after he sketched out a proof of concept for Federalist, Dave started working with Brad Nunnally, a designer; Jeremia Kimelman, a developer; and Gail Swanson, a designer and researcher, to research and code the platform. + +Much of the team’s initial research came from looking at [notalone.gov](https://18f.gsa.gov/2014/05/09/a-few-notes-on-notalone-gov/) and [the homepage of healthcare.gov](http://www.digitalgov.gov/2013/05/01/new-healthcare-gov-is-open-cms-free/) — government websites built using similar technology stacks. By creating a platform, the Federalist team knew that lots of government agencies would be able to build similar sites without starting from the ground up. + +Jeremia recalled his initial reaction to Dave’s proof of concept and the sense of purpose that underlaid the team’s MVP: “I remember Dave showing us the requirements he had laid out for building a web-based front end that would interface with GitHub and saying, ‘What’s the simplest thing we could initially build to satisfy these requirements?’” said Jeremia. “We then wrote the [initial commit](https://github.com/18F/federalist/tree/6ad14fec13826778d20a2046bdf2e41b36bec660) – which basically was a very, very simple version of what Federalist eventually became.” + +After throwing up the initial code, Dave, Gail, and Jeremia sketched out priorities for the platform. The three began working on a more refined proof of concept, and had plans to then build collaboration tools (followed by scalability tools) before approaching users. + +But then a client approached them about building a site — and they wanted it soon. The impending deadline shifted the group’s approach. + +“At that point, the research we were doing switched into real-time,” said Dave. “As soon as we built the basic platform, we brought on users, which was really helpful. It meant we had to test as we went, and solve the needs of both developers and content creators at the same time.” + +Bringing users on board early also helped inform the product’s roadmap. As Jeremia recalled, the team “needed to make sure scalability worked immediately because we had a client and they were going to launch a website.” + +In addition to dealing with scalability challenges, the team also had to consider the tricky balance between creating a product for one client and creating a template that could be used by future clients. + +Gail recalled the struggles inherent in this situation. “You’re constantly thinking ‘I could use a really inventive layout for this client, but that might not work for future clients.' So it was a constant back-and-forth between a specific implementation of the site and a generalized platform, and bouncing between those two to get something that satisfied on all fronts.” Ultimately, the team found a compromise that incorporated engaging, scalable features, and customizability. + +Federalist launched on September 15 and has several other projects on the horizon. The key to its success, said Jeremia, was the team’s thinking in terms of platform and not websites. + +“We’re always thinking ‘How do we standardize what we build so we don’t have to start from scratch each time?’” he said. “Federalist does that, and using tools that have already been reviewed for security compliance.” + +Convenience, customizability, and ease of use — that’s what Federalist’s platform strives to provide to agencies. “[That’s] what we wanted to turn around and offer people,” Jeremia said, stressing that the pre-approval of components makes it easier for agencies to set up and use the platform. + +To date, Federalist has enjoyed notable success, but the team isn’t resting on its laurels. They’re continually collecting feedback from users and identifying ways to make their product even more usable and user-friendly. They’d love your feedback, too: If you have thoughts to share, [you can contact the team here](https://github.com/18f/federalist/issues) or [sign up for the alpha platform here](https://docs.google.com/forms/d/1iB8aW7c9r1QH3s8XElQCrnXRGjAiPUYpWG1CMeEqGIo/viewform). diff --git a/_posts/2015-10-07-digital-economy-practice.md b/_posts/2015-10-07-digital-economy-practice.md index 8b35a43a2..95b49600f 100644 --- a/_posts/2015-10-07-digital-economy-practice.md +++ b/_posts/2015-10-07-digital-economy-practice.md @@ -9,63 +9,25 @@ tags: - best practices - digital economy practice -excerpt: "We’ve come to realize that there may be opportunities to -achieve high impact in targeted areas by aligning our subject -expertise with our digital expertise. To test our hypothesis, we’re launching an alpha version of our first policy vertical (or niche market) within 18F Consulting: the Digital Economy Practice." -description: "We’ve come to realize that there may be opportunities to -achieve high impact in targeted areas by aligning our subject -expertise with our digital expertise. To test our hypothesis, we’re launching an alpha version of our first policy vertical (or niche market) within 18F Consulting: the Digital Economy Practice." +excerpt: "We’ve come to realize that there may be opportunities to achieve high impact in targeted areas by aligning our subject expertise with our digital expertise. To test our hypothesis, we’re launching an alpha version of our first policy vertical (or niche market) within 18F Consulting: the Digital Economy Practice." image: /assets/blog/digital-economy-practice/dep-graphic2.jpg +hero: false --- -Since launching [more than a year -ago](https://18f.gsa.gov/2015/03/20/one-year-in-and-looking-forward/), -18F has made tremendous progress toward introducing new ways to -[deliver services to the public](https://18f.gsa.gov/dashboard/). As -we continue to explore how to better serve our colleagues across the -government, we’ve come to realize that there may be opportunities to -achieve high impact in targeted areas by aligning our *subject -expertise* (for example, finance, healthcare) with our *digital -expertise* (for example, human-centered design, agile development) to -help agencies achieve their policy goals. Being adopters of the lean -startup philosophy, this means one thing: Let’s run an experiment. To -test our hypothesis, we’re launching an alpha version of our first -policy vertical (or niche market) within [18F -Consulting]({{ site.baseurl }}/consulting/): the Digital Economy -Practice. +Since launching [more than a year ago](https://18f.gsa.gov/2015/03/20/one-year-in-and-looking-forward/), 18F has made tremendous progress toward introducing new ways to [deliver services to the public](https://18f.gsa.gov/dashboard/). As we continue to explore how to better serve our colleagues across the government, we’ve come to realize that there may be opportunities to achieve high impact in targeted areas by aligning our *subject expertise* (for example, finance, healthcare) with our *digital expertise* (for example, human-centered design, agile development) to help agencies achieve their policy goals. Being adopters of the lean startup philosophy, this means one thing: Let’s run an experiment. To test our hypothesis, we’re launching an alpha version of our first policy vertical (or niche market) within [18F Consulting]({{ site.baseurl }}/consulting/): the Digital Economy Practice.
The Digital Economy Practice competencies include industry and policy, people and organization, design and product, technology and data, and acquisition and procurement.
-Across the government, agencies work hard to improve economic outcomes -for our country and others. Whether it’s the U.S. Department of the -Treasury’s myRA, which helps people start to save -for retirement, or the Securities and Exchange Commission’s [Tick Size -Pilot](http://www.sec.gov/news/pressrelease/2015-82.html), which -studies different stock price quotation methods in order to improve -access to capital for small publicly-traded companies, there are -countless government initiatives aimed at expanding economic -opportunity. +Across the government, agencies work hard to improve economic outcomes for our country and others. Whether it’s the U.S. Department of the Treasury’s [*my*RA](https://myra.treasury.gov/), which helps people start to save for retirement, or the Securities and Exchange Commission’s [Tick Size Pilot](http://www.sec.gov/news/pressrelease/2015-82.html), which studies different stock price quotation methods in order to improve access to capital for small publicly-traded companies, there are countless government initiatives aimed at expanding economic opportunity. -Our consulting team has already been partnering with numerous federal -agencies to help their digital projects succeed, but this new initiative -will allow us to work on broad goals instead of discrete projects. As -agencies map the path of digital products, services, and innovations -that they need to meet their economic policy goals, we will bring our -*business* and *technical* expertise to help them define and achieve -success. As we work with agencies at a higher, more strategic level to -see how digital services can help them at each step of the process, we -hope we can greatly increase our impact on federal digital services. +Our consulting team has already been partnering with numerous federal agencies to help their digital projects succeed, but this new initiative will allow us to work on broad goals instead of discrete projects. As agencies map the path of digital products, services, and innovations that they need to meet their economic policy goals, we will bring our *business* and *technical* expertise to help them define and achieve success. As we work with agencies at a higher, more strategic level to see how digital services can help them at each step of the process, we hope we can greatly increase our impact on federal digital services. -##Working with the Digital Economy Practice +## Working with the Digital Economy Practice -If your agency is working on an economic policy initiative, and you’d -like to engage with 18F Consulting’s Digital Economy Practice, feel free -to reach out to us at inquiries18F@gsa.gov. +If your agency is working on an economic policy initiative, and you’d like to engage with 18F Consulting’s Digital Economy Practice, feel free to reach out to us at inquiries18F@gsa.gov. -##Join 18F Consulting +## Join 18F Consulting -If you’re passionate about America, technology, and economic policy and -are interested in joining 18F Consulting’s Digital Economy Practice, -we’d love to hear from you. Drop us a line at [join18F@gsa.gov](mailto:join18f@gsa.gov). +If you’re passionate about America, technology, and economic policy and are interested in joining 18F Consulting’s Digital Economy Practice, we’d love to hear from you. Drop us a line at [join18F@gsa.gov](mailto:join18f@gsa.gov). diff --git a/_posts/2015-10-26-micro-purchase-criteria-announcement.md b/_posts/2015-10-26-micro-purchase-criteria-announcement.md index 8d02bff79..53e6f66fb 100644 --- a/_posts/2015-10-26-micro-purchase-criteria-announcement.md +++ b/_posts/2015-10-26-micro-purchase-criteria-announcement.md @@ -13,74 +13,32 @@ description: "Today, we're beginning our micro-purchase experiment. Here are the excerpt: "Today, we're beginning our micro-purchase experiment. Here are the details of what we are looking for and our acceptance criteria for the final submission." --- -Two weeks ago, [we -announced](https://18f.gsa.gov/2015/10/13/open-source-micropurchasing/) -our intention to pursue an experiment in open-source micro-purchasing. -Today, the experiment *begins*. Here's how it works. +Two weeks ago, [we announced](https://18f.gsa.gov/2015/10/13/open-source-micropurchasing/) our intention to pursue an experiment in open-source micro-purchasing. Today, the experiment *begins*. Here's how it works. -First, go to [this GitHub issue](https://github.com/18f/calc/issues/255) to see the basis for the micro-purchase. In the title -of the issue is the current bid. There, you’ll have access to this -[Google -Form](https://docs.google.com/a/gsa.gov/forms/d/1eRFX0hSTTXMc2FulK6kPP2P02ZApQqlYZL7oVDghJJo/viewform), -where you can provide your DUNS number, your GitHub username, and your -bid. (Note: You must be registered in SAM.gov to participate in this -first iteration). +First, go to [this GitHub issue](https://github.com/18f/calc/issues/255) to see the basis for the micro-purchase. In the title of the issue is the current bid. There, you’ll have access to this [Google Form](https://docs.google.com/a/gsa.gov/forms/d/1eRFX0hSTTXMc2FulK6kPP2P02ZApQqlYZL7oVDghJJo/viewform), where you can provide your DUNS number, your GitHub username, and your bid. (Note: You must be registered in SAM.gov to participate in this first iteration). -As we mentioned before, we’ve identified an item from our product -backlog for the [CALC](https://calc.gsa.gov) product that we've tagged -as a "micro-purchase." That issue is [available -here](https://github.com/18F/calc/issues/255), and reads as follows: -> -# Load Schedule 70 data into CALC +As we mentioned before, we’ve identified an item from our product backlog for the [CALC](https://calc.gsa.gov) product that we've tagged as a "micro-purchase." That issue is [available here](https://github.com/18F/calc/issues/255), and reads as follows: + +> ## Load Schedule 70 data into CALC > -As previously explained, this issue has been tagged as a -"micro-purchase" issue. The opening "bid" for this issue is $3,499, and -vendors may offer lower bids. The vendor with the lowest bid at closing -time will have 10 working days to provide code that satisfies the -requirements and acceptance criteria below. Upon successful completion, -the vendor will be paid. If the vendor fails to complete the -requirements and satisfy the acceptance criteria within the 10 working -day period, then the vendor with the next lowest bid shall have 10 -working days to provide the code. If the acceptance criteria are not -satisfied, vendors shall not receive payment pursuant to this -competition. +> As previously explained, this issue has been tagged as a "micro-purchase" issue. The opening "bid" for this issue is $3,499, and vendors may offer lower bids. The vendor with the lowest bid at closing time will have 10 working days to provide code that satisfies the requirements and acceptance criteria below. Upon successful completion, the vendor will be paid. If the vendor fails to complete the requirements and satisfy the acceptance criteria within the 10 working day period, then the vendor with the next lowest bid shall have 10 working days to provide the code. If the acceptance criteria are not satisfied, vendors shall not receive payment pursuant to this competition. > -## Description of issue +> ### Description of issue > -Currently, CALC uses a [management command to load -data](https://github.com/18F/calc/blob/master/contracts/management/commands/load_data.py) -from 7 different schedules. We want to load the Schedule 70 data -provided into CALC (note, the data will likely need to be reformatted). +> Currently, CALC uses a [management command to load data](https://github.com/18F/calc/blob/master/contracts/management/commands/load_data.py) from 7 different schedules. We want to load the Schedule 70 data provided into CALC (note, the data will likely need to be reformatted). > -## Acceptance criteria +> ### Acceptance criteria > -1. Either a new Django management command or modification to -[https://github.com/18F/calc/blob/master/contracts/management/commands/load_data.py](https://github.com/18F/calc/blob/master/contracts/management/commands/load_data.py) -to load the Schedule 70 as Contract objects in the database. +> 1. Either a new Django management command or modification to [this file](https://github.com/18F/calc/blob/master/contracts/management/commands/load_data.py) to load the Schedule 70 as Contract objects in the database. > -2. Whether a new command or a modification to the existing command, the -rating from -[Code Climate](https://codeclimate.com/github/18F/calc) -for the file must be at a B or better rating, and test coverage for the -command at 90% or better upon completion. +> 2. Whether a new command or a modification to the existing command, the rating from [Code Climate](https://codeclimate.com/github/18F/calc) for the file must be at a B or better rating, and test coverage for the command at 90% or better upon completion. > -3. Front-end changes to ensure the ability to filter results by schedule -type (e.g. Schedule 70 data or others) and easily see the schedule -source for each row in the results. +> 3. Front-end changes to ensure the ability to filter results by schedule type (e.g. Schedule 70 data or others) and easily see the schedule source for each row in the results. > -## Bid submission deadline +> ### Bid submission deadline > -Bids for this issue close at 12 p.m. EST on Thursday, Oct. 29, 2015. To -bid on the issue, [click here](https://docs.google.com/a/gsa.gov/forms/d/1eRFX0hSTTXMc2FulK6kPP2P02ZApQqlYZL7oVDghJJo/viewform) +> Bids for this issue close at 12 p.m. EST on Thursday, Oct. 29, 2015. To bid on the issue, [click here](https://docs.google.com/a/gsa.gov/forms/d/1eRFX0hSTTXMc2FulK6kPP2P02ZApQqlYZL7oVDghJJo/viewform) -If you’re interested in bidding, the closing time for the bid is 12 p.m. -on Thursday, October 29, 2015. The opening bid starts at $3,499, and -the lowest bid at the closing time will have 10 working days to ship the -code necessary to satisfy the criteria. If the criteria are met, the -vendor gets paid. If the criteria aren't met the vendor shall not -receive payment, the next lowest bidder will have the opportunity. +If you’re interested in bidding, the closing time for the bid is 12 p.m. on Thursday, October 29, 2015. The opening bid starts at $3,499, and the lowest bid at the closing time will have 10 working days to ship the code necessary to satisfy the criteria. If the criteria are met, the vendor gets paid. If the criteria aren't met the vendor shall not receive payment, the next lowest bidder will have the opportunity. -Bear with us as we try this experiment out. There will no doubt be -hiccups, but if you have any questions, please email -[micropurchase@gsa.gov](mailto:micropurchase@gsa.gov). In the -meantime, let’s ship it. +Bear with us as we try this experiment out. There will no doubt be hiccups, but if you have any questions, please email [micropurchase@gsa.gov](mailto:micropurchase@gsa.gov). In the meantime, let’s ship it. diff --git a/_posts/2015-11-02-useiti-what-we-learned-where-were-headed.md b/_posts/2015-11-02-useiti-what-we-learned-where-were-headed.md index 9f711f64f..ba80104f6 100644 --- a/_posts/2015-11-02-useiti-what-we-learned-where-were-headed.md +++ b/_posts/2015-11-02-useiti-what-we-learned-where-were-headed.md @@ -10,6 +10,7 @@ tags: description: During Sunshine Week, we wrote about our progress on the U.S. Extractive Industries Transparency Initiative (USEITI). Since then, the 18F team has worked with the USEITI team to process research on the current state of the project as well as the next steps for the U.S. as a candidate country for the global initiative. excerpt: During Sunshine Week, we wrote about our progress on the Extractive Industries Transparency Initiative, or EITI, an international coalition organized here by the U.S. Department of the Interior and a multi-stakeholder group that includes representatives from nonprofits, academia, industry and local governments. Since March, the 18F team has worked with the USEITI team to process research on the current state of the project as well as the next steps for the U.S. as a candidate country for the global initiative. image: /assets/blog/eiti/drill.jpg +hero: false --- ![An oil rig on public land. Courtesy of the Department of Energy]({{site.baseurl}}/assets/blog/eiti/drill.jpg) diff --git a/_posts/2015-11-03-content-strategy-for-all-insights-from-cfpb-natalie-kurz.md b/_posts/2015-11-03-content-strategy-for-all-insights-from-cfpb-natalie-kurz.md index afd7a94ae..661f3204b 100644 --- a/_posts/2015-11-03-content-strategy-for-all-insights-from-cfpb-natalie-kurz.md +++ b/_posts/2015-11-03-content-strategy-for-all-insights-from-cfpb-natalie-kurz.md @@ -9,51 +9,26 @@ tags: - speaker series - communication tools and practices -description: "Natalie Kurz, a content strategist at the Consumer Financial Protection -Bureau, recently spoke at 18F about some best practices for creating and promoting digestible, user-friendly content." -excerpt: "Natalie Kurz, a content strategist at the Consumer Financial Protection -Bureau, recently spoke at 18F about some best practices for creating and promoting digestible, user-friendly content." +description: "Natalie Kurz, a content strategist at the Consumer Financial Protection Bureau, recently spoke at 18F about some best practices for creating and promoting digestible, user-friendly content." +excerpt: "Natalie Kurz, a content strategist at the Consumer Financial Protection Bureau, recently spoke at 18F about some best practices for creating and promoting digestible, user-friendly content." image: /assets/blog/speaker-series/natalie-kurz-presentation.jpg --- -![Natalie Kurz presents at 18F]({{site.baseurl}}/assets/blog/speaker-series/natalie-kurz-presentation.jpg) -*Natalie Kurz from the Consumer Financial Protection -Bureau presents at 18F.* - -Natalie Kurz realizes that the concept of content strategy can seem -nebulous to many, especially to folks who don’t work directly with -content. - -“When I’m introducing content strategy to people who aren’t as familiar -with the topic, I like to start by comparing different error messages,” -Kurz explained. “404s are a bite-sized way to understand how a company -communicates with their users. It’s an easy way to illustrate a content -strategy in practice.” - -Creating and promoting digestible, user-friendly content has been Kurz’s -professional focus for more than 15 years. Hailing from a journalism -background, Kurz has crafted content strategies for enterprise clients -such as Canon, State Farm, Jiffy Steamer, and more. She’s currently a -Technology and Innovation Fellow at the [Consumer Financial Protection -Bureau](http://www.consumerfinance.gov/), -where she’s conducting user research to improve the organization’s -intranet and develop content governance strategies, among other -projects. - -Kurz recently visited 18F to discuss how to build a content strategy -from the ground up, even if you don’t identify as a content strategist. - -“Who are content strategists?” Kurz rhetorically asked the audience. -“They’re a lot of different people, actually, but most importantly, -they’re *you*.” She went on to explain that each person’s talents and -skills bring unique value to bear on an organization’s approach to -content. - -She then went into more detail, providing concrete steps folks can take -to develop a content strategy. - -While there are many deliverables and tasks associated with creating a -content strategy, Kurz recommends starting with six main components: +*Image: Natalie Kurz from the Consumer Financial Protection Bureau presents at 18F.* + +Natalie Kurz realizes that the concept of content strategy can seem nebulous to many, especially to folks who don’t work directly with content. + +“When I’m introducing content strategy to people who aren’t as familiar with the topic, I like to start by comparing different error messages,” Kurz explained. “404s are a bite-sized way to understand how a company communicates with their users. It’s an easy way to illustrate a content strategy in practice.” + +Creating and promoting digestible, user-friendly content has been Kurz’s professional focus for more than 15 years. Hailing from a journalism background, Kurz has crafted content strategies for enterprise clients such as Canon, State Farm, Jiffy Steamer, and more. She’s currently a Technology and Innovation Fellow at the [Consumer Financial Protection Bureau](http://www.consumerfinance.gov/), where she’s conducting user research to improve the organization’s intranet and develop content governance strategies, among other projects. + +Kurz recently visited 18F to discuss how to build a content strategy from the ground up, even if you don’t identify as a content strategist. + +“Who are content strategists?” Kurz rhetorically asked the audience. “They’re a lot of different people, actually, but most importantly, they’re *you*.” She went on to explain that each person’s talents and skills bring unique value to bear on an organization’s approach to content. + +She then went into more detail, providing concrete steps folks can take to develop a content strategy. + +While there are many deliverables and tasks associated with creating a content strategy, Kurz recommends starting with six main components: - **Inventory:** Conduct a content audit to create a snapshot of your current content, and determine how it maps to your future content. @@ -67,13 +42,6 @@ content strategy, Kurz recommends starting with six main components: - **Governance:** Define the people, processes, and policies central to your content strategy. -Kurz concluded by offering several tangible ways folks can start -developing a content strategy at their organizations. “You can start by -identifying content strategists already on your team or by selecting an -executive sponsor,” she said, “or you might hone your brand voice, -develop contextual tones, or get to work on a mobile strategy.” -Regardless of where you start, Kurz’s practical, actionable advice will -make the process a lot simpler. +Kurz concluded by offering several tangible ways folks can start developing a content strategy at their organizations. “You can start by identifying content strategists already on your team or by selecting an executive sponsor,” she said, “or you might hone your brand voice, develop contextual tones, or get to work on a mobile strategy.” Regardless of where you start, Kurz’s practical, actionable advice will make the process a lot simpler. -If you missed the live event, you can watch a recording of it [here](https://plus.google.com/u/0/events/c7bnoqckt7i2ha8n5ksraghvcus), -and stay tuned for our soon-to-be-published interview with Natalie. +If you missed the live event, you can watch a recording of it [here](https://plus.google.com/u/0/events/c7bnoqckt7i2ha8n5ksraghvcus), and stay tuned for our soon-to-be-published interview with Natalie. diff --git a/_posts/2015-11-04-complexity-is-the-adversary.md b/_posts/2015-11-04-complexity-is-the-adversary.md index 2b4833ec7..a145899a8 100644 --- a/_posts/2015-11-04-complexity-is-the-adversary.md +++ b/_posts/2015-11-04-complexity-is-the-adversary.md @@ -11,6 +11,7 @@ tags: description: "What if we told you that most catastrophic digital security vulnerabilities had one common denominator? One overriding contributor to root causes? Would you believe that one factor is also the biggest impediment to great design and software? That one thing? Complexity." excerpt: "What if we told you that most catastrophic digital security vulnerabilities had one common denominator? One overriding contributor to root causes? Would you believe that one factor is also the biggest impediment to great design and software? That one thing? Complexity." image: /assets/blog/complexity-and-security/security-documentation-1.jpg +hero: false --- What if we told you that most catastrophic digital security vulnerabilities had one common denominator? One overriding contributor to root causes? Would you believe that *one factor* is *also* the biggest impediment to great design and software? @@ -33,12 +34,11 @@ When we do invest in documentation, we should overwhelmingly focus on a small an We're moving in the right direction. The U.S. Computer Emergency Readiness Team (US-CERT) has **[put out five new best practices](https://www.us-cert.gov/ncas/current-activity/2015/07/31/Best-Practices-Protect-You-Your-Network-and-Your-Information)** for both the public and private sector. This list was compiled after responding to a significant number of data breaches over the past year, covering incidents both within and outside the government. -> -1. Implement Two-Factor Authentication: Two-factor authentication works to significantly reduce or eliminate unauthorized access to your networks and information. -2. Block Malicious Code: Activate application directory whitelisting to prevent non-approved applications from being installed on your network. -3. Limit Number of Privileged Users: System administrators have privileged access that gives them the “keys to your kingdom.” Limit system administrator privileges only to those who have a legitimate need as defined by your management directives. -4. Segment Your Network: Don’t put all your eggs in one basket by having a “flat network.” Use segmentation techniques so that if one part of your network is breached that the integrity of the rest of the network is protected. -5. Lock Your Backdoors: Third parties that share network trust relationships with you may prove to be an Achilles heel by serving as an attack vector into your network. Take action to ensure that all network trust relationships are well-protected using best practices. Have a means to audit the effectiveness of these defenses. Consider terminating or suspending these relationships until sufficient controls are in place to protect your backdoors. +> 1. Implement Two-Factor Authentication: Two-factor authentication works to significantly reduce or eliminate unauthorized access to your networks and information. +> 2. Block Malicious Code: Activate application directory whitelisting to prevent non-approved applications from being installed on your network. +> 3. Limit Number of Privileged Users: System administrators have privileged access that gives them the “keys to your kingdom.” Limit system administrator privileges only to those who have a legitimate need as defined by your management directives. +> 4. Segment Your Network: Don’t put all your eggs in one basket by having a “flat network.” Use segmentation techniques so that if one part of your network is breached that the integrity of the rest of the network is protected. +> 5. Lock Your Backdoors: Third parties that share network trust relationships with you may prove to be an Achilles heel by serving as an attack vector into your network. Take action to ensure that all network trust relationships are well-protected using best practices. Have a means to audit the effectiveness of these defenses. Consider terminating or suspending these relationships until sufficient controls are in place to protect your backdoors. This is a great start! There's nothing new on this list — these are things any organization, either in the public or the private sector, can and should implement ***today***. But that means this is also a summary of what should *already* be true. It doesn't create the roadmap of where we should go from here. All of this is technology that's been available for years. diff --git a/_posts/2015-11-09-conversation-with-cfpb-natalie-kurz.md b/_posts/2015-11-09-conversation-with-cfpb-natalie-kurz.md index 21e0ee99e..90ed06ef8 100644 --- a/_posts/2015-11-09-conversation-with-cfpb-natalie-kurz.md +++ b/_posts/2015-11-09-conversation-with-cfpb-natalie-kurz.md @@ -9,187 +9,59 @@ tags: - speaker series - communication tools and practices -description: "Last month, content strategist and UX designer Natalie Kurz from the Consumer Financial Protection Bureau presented at 18F. Prior to her presentation, we had the chance to chat with Kurz via email about her experience working with different types of content, her -predictions for the field, and the collaborative approaches she recommends." -excerpt: "Last month, content strategist and UX designer Natalie Kurz from the Consumer Financial Protection Bureau presented at 18F. Prior to her presentation, we had the chance to chat with Kurz via email about her experience working with different types of content, her -predictions for the field, and the collaborative approaches she recommends." +excerpt: "Last month, content strategist and UX designer Natalie Kurz from the Consumer Financial Protection Bureau presented at 18F. Prior to her presentation, we had the chance to chat with Kurz via email about her experience working with different types of content, her predictions for the field, and the collaborative approaches she recommends." image: /assets/blog/speaker-series/natalie-kurz.jpg +hero: false --- -
-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. - -Prior to her presentation, we had the chance to chat with Kurz via email -about her experience working with different types of content, her -predictions for the field, and the collaborative approaches she -recommends. To get more of her insights into successful content-strategy -practices, read on. - -**1. During the past decade, digital content creation and strategy have -become more prominent as design disciplines. What content-related trends -do you see on the horizon?** - -I think there will be a big trend toward more personalized, adaptive -content as companies begin to realize that users want to have a full -experience regardless of what device they may be using to view content. -Users have come to expect more than a watered-down “mobile” experience. -And as content delivery platforms continue to evolve, I think we’ll see -a trend toward chunked, reusable content that is more easily displayed -on any screen size. Which also means we’ll see an uptick in content -modeling, metadata definitions, and CMS design to accommodate the -content in a more reusable way. - -**2. On a more personal note: You have a background in journalism and -spent years creating health, beauty, and lifestyle content. What spurred -your shift in focus from (primarily) writing and editing to UX? What -difficulties, if any, did you encounter as you made this shift, and how -did you work through them?** - -I actually started in UX before getting my masters in journalism; I just -didn’t know that was what I was doing! My first job out of undergrad was -working in the collections department as a project manager of Sara Lee -Bakery Group. While there, I saw a lot of inefficiencies within their -software system, which was built off SAP. So I worked with a few -developers to improve the system’s workflow, allowing collectors to -better track their efforts over time. It was UX design, but that wasn’t -even a phrase on my radar! - -I left that job to pursue a passion in journalism. In subsequent jobs, I -would be hired to write online content and in the process would make -suggestions regarding user flows, design patterns and overall -interactions that I noticed felt “off.” I was fortunate to work for -teams that embraced my self-taught skills and let me expand my job -description by learning about usability testing and creating wireframes. -I started referring to myself as a UX designer and was then hired as a -director of a growing web development agency to essentially develop an -entire UX and content strategy practice. That was my crash course in the -breadth of what UX means. - -It ended up being a very natural transition for me. I think that’s -because in every job I’ve ever had, I’ve gravitated toward solving -problems, which is a core tenant of good UX work. Define the problem, -then solve it. It’s also at the heart of being a journalist — tease out -the problem and define what the story is really about. Both professions -are also heavily reliant on empathy, listening, and organizing -information. To be honest, the biggest conflict I encountered along the -way was myself. I spent many years wavering between calling myself a -user experience designer and a content strategist. Until I decided I -really could be both. - -**3. You’ve mentioned that few folks in writing-related fields receive -formal training as content strategists, yet many of us are expected to -create content strategies. A few questions on this topic: Do you feel -that certain writing-rich backgrounds lend themselves more to the -transition to content strategy (for example, journalists make better -content strategists)? If so, which backgrounds, and why?** - -I think there are a few key traits that are essential to being a good -content strategist, but I don’t believe those traits are limited to any -specific background or profession. You have to be a good writer. While -content strategy doesn’t necessarily equate to content creation, in -reality both tasks usually fall to a single lucky person. But creating -content strategies does require a deep understanding of language — the -structure, the connotations, the musicality of words. You need to be -able to tap into literary techniques for creating voice and tone, -identify when to use first or third person and determine if your brand -should use personal pronouns or not. - -You also have to have a burning, innate desire to analyze, organize, -label and group things. Much of content strategy is the “behind the -scenes” stuff of creating giant spreadsheets, identifying content types -and metadata, building content models and determining the who, when and -how of the content lifecycle and governance. - -I think that’s why we see a lot of journalists, information architects -and library scientists making the switch to content strategy. The skills -that made them good at those jobs are the same ones required in content -strategy. But it doesn’t matter what field you come from. And as there -becomes more awareness around the importance of content strategy, we’re -starting to see degree programs that are more focused on the discipline, -which is fantastic. - -**4. What are your thoughts on how best to integrate a content -strategist into a cross-functional product team? Any thoughts on how a -content strategist’s work could fit into the agile cycle?** - -Ok, first the easy answer to the first question. Content strategy is an -umbrella that sits on top of your project, much like project management. -It is a crucial piece of every stage. Many folks operate under the -assumption that the strategy gets created during the discovery phase, -some content is written at the beginning of design and then that content -resource rolls onto another project. I’ve seen this fail 100% of the -time. - -The key thing with incorporating content strategy into an agile cycle is -to identify a content resource from day one that will remain a permanent -member of the team until the project closes. It’s not enough to have a -writer jump into the middle of sprint seven to “write some content that -goes here.” That’s not content strategy. That’s copywriting as an -afterthought. Much of the heavy lifting of content strategy is planning -— you can’t help determine a train’s course if you’re expected to vault -yourself onto it while it’s moving and is only a few hours away from its -destination. - -Within every sprint, there should be some content strategy work going -on. Content audits, analysis, messaging, research, defining user goals -(in tandem with UX work), creating content models and metadata -libraries, writing editorial guidelines, creating a governance plan. -There’s certainly enough to do! - -And there are ways to make the content work more agile. Think small. -Break out a key user task (like the checkout process) or business -requirement (this section is what drives revenue) and focus on the -content surrounding that thing first. Use a rolling audit process, so -you aren’t diving into “all the things” at once. Just like the mentality -of “minimal viable product” you can create a “minimal viable strategy.” -There are so many tasks and deliverables associated with content -strategy, but you will never have the time or budget to do them all. -Pick the things that will have the biggest impact on the project — or -biggest impact within the current sprint — and put your focus there. For -instance, if you’re honing in on the event section, a content audit may -not be as helpful as modeling the event content type. - -Also, I can’t stress enough how important it is to test wires and -prototypes with actual content. Get real feedback on the language, tone, -clarity, structure, placement within the design. Include questions in -your testing scripts that are focused specifically on the content. I’ve -seen award-winning designs fail because the content was never vetted -with users and it failed to communicate the intended message. - -For more about how to incorporate content strategy into agile processes, -check out [Josh Tong’s blog post](http://www.joshtong.net/blog/how-agile-and-lean-principles-can-improve-content-strategy-and-governance/) -or [Corey Vilhauer’s slides](http://www.slideshare.net/blendinteractive/small-cs-content-strategy-on-a-shoestring) -on “small content strategy” from Confab Central 2015. - -**5. What are some of the biggest barriers to being successful as a -content strategist on a software team?** - -I think the biggest one is getting picked for the team in the first -place. In my experience, there is a collective sigh of relief from the -team once you’re there, because it means they don’t have to struggle -through the process by themselves any longer. I think software teams -understand the value of content strategy and are just hungry for people -to do it. - -**6. Finally, what piece of advice would you offer to a new content -designer or content strategist?** - -I’m a huge fan of learning by doing. Don’t be afraid to just dive in. -Volunteer to handle content on your team if no one else is doing it — -more than likely your initiative and help will be valued because you’re -filling a vital need. - -Get educated on the topic. Read the books from thought leaders. Attend -some workshops or conferences for hands-on and practical experience. - -Finally, help educate your stakeholders and teammates on what content -strategy is and what it isn’t — it’s an ongoing process to plan for the -creation and delivery of content, not just a set of deliverables or -replacing “lorem ipsum” with actual words. It should never be an -afterthought. +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. + +Prior to her presentation, we had the chance to chat with Kurz via email about her experience working with different types of content, her predictions for the field, and the collaborative approaches she recommends. To get more of her insights into successful content-strategy practices, read on. + +**1. During the past decade, digital content creation and strategy have become more prominent as design disciplines. What content-related trends do you see on the horizon?** + +I think there will be a big trend toward more personalized, adaptive content as companies begin to realize that users want to have a full experience regardless of what device they may be using to view content. Users have come to expect more than a watered-down “mobile” experience. And as content delivery platforms continue to evolve, I think we’ll see a trend toward chunked, reusable content that is more easily displayed on any screen size. Which also means we’ll see an uptick in content modeling, metadata definitions, and CMS design to accommodate the content in a more reusable way. + +**2. On a more personal note: You have a background in journalism and spent years creating health, beauty, and lifestyle content. What spurred your shift in focus from (primarily) writing and editing to UX? What difficulties, if any, did you encounter as you made this shift, and how did you work through them?** + +I actually started in UX before getting my masters in journalism; I just didn’t know that was what I was doing! My first job out of undergrad was working in the collections department as a project manager of Sara Lee Bakery Group. While there, I saw a lot of inefficiencies within their software system, which was built off SAP. So I worked with a few developers to improve the system’s workflow, allowing collectors to better track their efforts over time. It was UX design, but that wasn’t even a phrase on my radar! + +I left that job to pursue a passion in journalism. In subsequent jobs, I would be hired to write online content and in the process would make suggestions regarding user flows, design patterns and overall interactions that I noticed felt “off.” I was fortunate to work for teams that embraced my self-taught skills and let me expand my job description by learning about usability testing and creating wireframes. I started referring to myself as a UX designer and was then hired as a director of a growing web development agency to essentially develop an entire UX and content strategy practice. That was my crash course in the breadth of what UX means. + +It ended up being a very natural transition for me. I think that’s because in every job I’ve ever had, I’ve gravitated toward solving problems, which is a core tenant of good UX work. Define the problem, then solve it. It’s also at the heart of being a journalist — tease out the problem and define what the story is really about. Both professions are also heavily reliant on empathy, listening, and organizing information. To be honest, the biggest conflict I encountered along the way was myself. I spent many years wavering between calling myself a user experience designer and a content strategist. Until I decided I really could be both. + +**3. You’ve mentioned that few folks in writing-related fields receive formal training as content strategists, yet many of us are expected to create content strategies. A few questions on this topic: Do you feel that certain writing-rich backgrounds lend themselves more to the transition to content strategy (for example, journalists make better content strategists)? If so, which backgrounds, and why?** + +I think there are a few key traits that are essential to being a good content strategist, but I don’t believe those traits are limited to any specific background or profession. You have to be a good writer. While content strategy doesn’t necessarily equate to content creation, in reality both tasks usually fall to a single lucky person. But creating content strategies does require a deep understanding of language — the structure, the connotations, the musicality of words. You need to be able to tap into literary techniques for creating voice and tone, identify when to use first or third person and determine if your brand should use personal pronouns or not. + +You also have to have a burning, innate desire to analyze, organize, label and group things. Much of content strategy is the “behind the scenes” stuff of creating giant spreadsheets, identifying content types and metadata, building content models and determining the who, when and how of the content lifecycle and governance. + +I think that’s why we see a lot of journalists, information architects and library scientists making the switch to content strategy. The skills that made them good at those jobs are the same ones required in content strategy. But it doesn’t matter what field you come from. And as there becomes more awareness around the importance of content strategy, we’re starting to see degree programs that are more focused on the discipline, which is fantastic. + +**4. What are your thoughts on how best to integrate a content strategist into a cross-functional product team? Any thoughts on how a content strategist’s work could fit into the agile cycle?** + +Ok, first the easy answer to the first question. Content strategy is an umbrella that sits on top of your project, much like project management. It is a crucial piece of every stage. Many folks operate under the assumption that the strategy gets created during the discovery phase, some content is written at the beginning of design and then that content resource rolls onto another project. I’ve seen this fail 100% of the time. + +The key thing with incorporating content strategy into an agile cycle is to identify a content resource from day one that will remain a permanent member of the team until the project closes. It’s not enough to have a writer jump into the middle of sprint seven to “write some content that goes here.” That’s not content strategy. That’s copywriting as an afterthought. Much of the heavy lifting of content strategy is planning — you can’t help determine a train’s course if you’re expected to vault yourself onto it while it’s moving and is only a few hours away from its destination. + +Within every sprint, there should be some content strategy work going on. Content audits, analysis, messaging, research, defining user goals (in tandem with UX work), creating content models and metadata libraries, writing editorial guidelines, creating a governance plan. There’s certainly enough to do! + +And there are ways to make the content work more agile. Think small. Break out a key user task (like the checkout process) or business requirement (this section is what drives revenue) and focus on the content surrounding that thing first. Use a rolling audit process, so you aren’t diving into “all the things” at once. Just like the mentality of “minimal viable product” you can create a “minimal viable strategy.” There are so many tasks and deliverables associated with content strategy, but you will never have the time or budget to do them all. Pick the things that will have the biggest impact on the project — or biggest impact within the current sprint — and put your focus there. For instance, if you’re honing in on the event section, a content audit may not be as helpful as modeling the event content type. + +Also, I can’t stress enough how important it is to test wires and prototypes with actual content. Get real feedback on the language, tone, clarity, structure, placement within the design. Include questions in your testing scripts that are focused specifically on the content. I’ve seen award-winning designs fail because the content was never vetted with users and it failed to communicate the intended message. + +For more about how to incorporate content strategy into agile processes, check out [Josh Tong’s blog post](http://www.joshtong.net/blog/how-agile-and-lean-principles-can-improve-content-strategy-and-governance/) or [Corey Vilhauer’s slides](http://www.slideshare.net/blendinteractive/small-cs-content-strategy-on-a-shoestring) on “small content strategy” from Confab Central 2015. + +**5. What are some of the biggest barriers to being successful as a content strategist on a software team?** + +I think the biggest one is getting picked for the team in the first place. In my experience, there is a collective sigh of relief from the team once you’re there, because it means they don’t have to struggle through the process by themselves any longer. I think software teams understand the value of content strategy and are just hungry for people to do it. + +**6. Finally, what piece of advice would you offer to a new content designer or content strategist?** + +I’m a huge fan of learning by doing. Don’t be afraid to just dive in. Volunteer to handle content on your team if no one else is doing it — more than likely your initiative and help will be valued because you’re filling a vital need. + +Get educated on the topic. Read the books from thought leaders. Attend some workshops or conferences for hands-on and practical experience. + +Finally, help educate your stakeholders and teammates on what content strategy is and what it isn’t — it’s an ongoing process to plan for the creation and delivery of content, not just a set of deliverables or replacing “lorem ipsum” with actual words. It should never be an afterthought. diff --git a/_posts/2015-11-10-boston-is-using-gsa-calc-tool.md b/_posts/2015-11-10-boston-is-using-gsa-calc-tool.md index f47f3f8ec..1428852f3 100644 --- a/_posts/2015-11-10-boston-is-using-gsa-calc-tool.md +++ b/_posts/2015-11-10-boston-is-using-gsa-calc-tool.md @@ -12,6 +12,7 @@ tags: description: "We hoped CALC, a powerful labor category and pricing research tool from GSA and 18F, would save federal contracting officers time and money. Turns out, it’s also saving cities time and money. In August, we found out the City of Boston has been using CALC to vet pricing they receive in response to a request for proposals." excerpt: "We hoped CALC, a powerful labor category and pricing research tool from GSA and 18F, would save federal contracting officers time and money. Turns out, it’s also saving cities time and money. In August, we found out the City of Boston has been using CALC to vet pricing they receive in response to a request for proposals." image: /assets/blog/calc-announcement/calc_demo.gif +hero: false --- In May, 18F and [GSA’s Professional Services diff --git a/_posts/2015-11-17-choose-design-over-architecture.md b/_posts/2015-11-17-choose-design-over-architecture.md index fda953fc9..5b66d4608 100644 --- a/_posts/2015-11-17-choose-design-over-architecture.md +++ b/_posts/2015-11-17-choose-design-over-architecture.md @@ -15,193 +15,107 @@ description: "Conventional wisdom often encourages engineers to start with a big image: /assets/blog/design-over-architecture/architecture-overview.jpg --- -![A comical sketch of an architectural overview of a coding project]({{site.baseurl}}/assets/blog/design-over-architecture/architecture-overview.jpg) - -Conventional wisdom often encourages engineers to start with a big -architectural overview. Services with databases are connected via lines -and arrows to other services. Caching layers, load balancers, and other -complex shapes are wedged into the flow of information. For tech savvy -people, these diagrams give some comfort that performance and security -are addressed. Non-tech people can point to the diagram with some -comfort that very smart people are doing very complex things. - -Architectural plans provide comfort to everyone because they look like a -plan. The way forward is for the engineers to fill in servers and -infrastructure, making the map real. - -Unfortunately, this kind of a grand plan usually leads to [technical-debt](https://18f.gsa.gov/2015/10/05/managing-technical-debt/) -that collapses towards complete immobility. Complexities in even one of -these services can take down the entire project. Unknown problems at the -beginning can't be rolled into the new plan easily because all services -are dependent on this architectural contract. - -In short, architectural plans push the team towards [waterfall -development](https://en.wikipedia.org/wiki/Waterfall_model#Criticism), -a system that has fallen out of favor as more and more projects have -failed. +Conventional wisdom often encourages engineers to start with a big architectural overview. Services with databases are connected via lines and arrows to other services. Caching layers, load balancers, and other complex shapes are wedged into the flow of information. For tech savvy people, these diagrams give some comfort that performance and security are addressed. Non-tech people can point to the diagram with some comfort that very smart people are doing very complex things. + +Architectural plans provide comfort to everyone because they look like a plan. The way forward is for the engineers to fill in servers and infrastructure, making the map real. + +Unfortunately, this kind of a grand plan usually leads to [technical-debt](https://18f.gsa.gov/2015/10/05/managing-technical-debt/) that collapses towards complete immobility. Complexities in even one of these services can take down the entire project. Unknown problems at the beginning can't be rolled into the new plan easily because all services are dependent on this architectural contract. + +In short, architectural plans push the team towards [waterfall development](https://en.wikipedia.org/wiki/Waterfall_model#Criticism), a system that has fallen out of favor as more and more projects have failed. ## How can we avoid architectural handcuffs? -“Design” is an ambiguous word in the software world. On the one hand, -“design” is used to describe the graphical user experience. On the other -hand, engineering software “design” is the process of building small, -modular components that are decoupled. Both of these types of design are -essential for freeing a project from impending technical debt brought on -by an architecture-first plan. Here are some ways that focusing on user -experience design and software design can help your project avoid -technical debt. +“Design” is an ambiguous word in the software world. On the one hand, “design” is used to describe the graphical user experience. On the other hand, engineering software “design” is the process of building small, modular components that are decoupled. Both of these types of design are essential for freeing a project from impending technical debt brought on by an architecture-first plan. Here are some ways that focusing on user experience design and software design can help your project avoid technical debt. ## Starting from user stories and user experience ![A user story generating architecture organically.]({{site.baseurl}}/assets/blog/design-over-architecture/user-story-architecture.jpg) *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. +[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. Formats for a user story are pretty simple: -> As a ***user of some kind*** , I want ***to see or do something*** , so that -> ***some benefit is had***. +> As a **user of some kind**, +> I want **to see or do something**, +> so that **some benefit is had**. -In this story, you would fill in the bold sections with a user -type, a goal, and benefit. An application should start with tiny -scenarios like this that build functionality for each user. It’s the job -of the product or project manager to write these stories and prioritize -them. +In this story, you would fill in the bold sections with a user type, a goal, and benefit. An application should start with tiny scenarios like this that build functionality for each user. It’s the job of the product or project manager to write these stories and prioritize them. -Often teams are used to thinking in terms of architectural plans, and -the stories they have in mind are far too big. Instead of thinking of -one scenario for one user they are imagining the whole. This is an -example of a story that is too big and architecturally focused: +Often teams are used to thinking in terms of architectural plans, and the stories they have in mind are far too big. Instead of thinking of one scenario for one user they are imagining the whole. This is an example of a story that is too big and architecturally focused: -> As a website consumer, I want to be able to see all the publicly -> available information so that I will be informed about the services -> available. +> As a website consumer, +> I want to be able to see all the publicly available information +> so that I will be informed about the services available. A better first story would be something like this: -> As a website consumer, I want to be able to see a homepage with the -> agency logo so that I know I am at the right place +> As a website consumer, +> I want to be able to see a homepage with the agency logo +> so that I know I am at the right place -For teams used to thinking of architecture, this will seem like an -impossibly small story. Because it’s the first story, it will still -involve a lot of effort for the engineering team: +For teams used to thinking of architecture, this will seem like an impossibly small story. Because it’s the first story, it will still involve a lot of effort for the engineering team: 1. Build a web application with a homepage and logo. 2. Setup a staging server to make that website available to the product manager. 3. Create a production server and [devops](https://en.wikipedia.org/wiki/DevOps) procedures for migrating from staging to production. -Subsequent stories will not require this much setup. A good second story -for an agency might be this: +Subsequent stories will not require this much setup. A good second story for an agency might be this: -> As a website consumer, I want to be able to see a list of projects so -> that I know what is happening in the agency. +> As a website consumer, +> I want to be able to see a list of projects +> so that I know what is happening in the agency. -With the infrastructure in place, this story will roll out much faster. -In this fictitious project stories might roll out like this: +With the infrastructure in place, this story will roll out much faster. In this fictitious project stories might roll out like this: - As a website consumer, I want to see a page dedicated to each project in the projects list, in order to see more details about the project. - As a website consumer, I want to be able to navigate between project details pages and the project list, in order to move between important information quickly and easily. -Having finished a small set of stories about projects at the agency, the -product person might decide that the most important priority is showing -employee profiles so that the public can reach the people they need. -They would build out a cluster of small stories to accomplish all the -related goals. +Having finished a small set of stories about projects at the agency, the product person might decide that the most important priority is showing employee profiles so that the public can reach the people they need. They would build out a cluster of small stories to accomplish all the related goals. -After the team addresses lots of stories, driven by their top -priorities, the architecture will have evolved on its own. That can be -pretty dangerous if not also kept in check via the other side of the -design process, software design. +After the team addresses lots of stories, driven by their top priorities, the architecture will have evolved on its own. That can be pretty dangerous if not also kept in check via the other side of the design process, software design. ## Keeping our code from becoming a structureless mess ![Without good software design techniques, your code can become a mess as you fulfill more user stories.]({{site.baseurl}}/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 a guiding architectural map, how does a team keep the code clean -and useful? - -**This is where the second notion of “design” guides a project:** -[**software -design**](http://www.objectmentor.com/resources/articles/Principles_and_Patterns.pdf). -You can think of software design as a discipline of keeping code small, -modular, and decoupled. Instead of a 20 line function, the engineer -breaks up functionality into six smaller methods that each play a little -part. Instead of every object knowing about every other object in the -application, objects are handed the things they need to accomplish their -tasks. - -**If we think about these modules as bricks, then their independence and -flexibility makes it easy to construct almost anything: a retaining -wall, a house, a palace**. Smaller modules aggregate into bigger -modules. Groups of modules can become a service. User stories about -security and performance can build out all the shapes and lines in an -architectural diagram. - -Focusing on software design turns the process of getting to architecture -on its head. Instead of drilling down from an architectural map into -services and code, we promote and organize code into an architecture. -There are two huge wins to this approach: +Without a guiding architectural map, how does a team keep the code clean and useful? + +**This is where the second notion of “design” guides a project:** [**software design**](http://www.objectmentor.com/resources/articles/Principles_and_Patterns.pdf). + +You can think of software design as a discipline of keeping code small, modular, and decoupled. Instead of a 20 line function, the engineer breaks up functionality into six smaller methods that each play a little part. Instead of every object knowing about every other object in the application, objects are handed the things they need to accomplish their tasks. + +**If we think about these modules as bricks, then their independence and flexibility makes it easy to construct almost anything: a retaining wall, a house, a palace**. Smaller modules aggregate into bigger modules. Groups of modules can become a service. User stories about security and performance can build out all the shapes and lines in an architectural diagram. + +Focusing on software design turns the process of getting to architecture on its head. Instead of drilling down from an architectural map into services and code, we promote and organize code into an architecture. There are two huge wins to this approach: - The abstractions were grown from the code and product itself and are a better fit than ones imposed from on high. - The modules of code are decoupled and can be rearranged when needs change. ## How to make great software designs -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. +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. ![Using refactoring to impose design on the chaos that happens with continual development]({{site.baseurl}}/assets/blog/design-over-architecture/refactoring.jpg) *Using refactoring to impose design on the chaos that happens with continual development.* ### SOLID -[SOLID](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)) -is an acronym where each letter stands for a particular -[object-oriented](https://en.wikipedia.org/wiki/Object-oriented_programming) -design principle. Despite its object focus, SOLID has proven itself -useful across programming paradigms. Many have argued that SOLID can be -boiled down to its first principle: [*single -responsibility*](https://en.wikipedia.org/wiki/Single_responsibility_principle). -This principle states that every module should have just one purpose. - -To make this distinction more concrete, imagine an application being -created by an agency. The agency is connecting to data being created by -a non-governmental organization. This external organization has created -a great API that makes it easy for the agency’s engineers to get the -data they need. During the course of developing many user stories, the -engineering team realizes they have consumed data from that service in -three, slightly different ways. - -They apply the single responsibility principle to make the design -better. They look at the three places that they’re connecting with the -API and see two patterns: +[SOLID](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)) is an acronym where each letter stands for a particular [object-oriented](https://en.wikipedia.org/wiki/Object-oriented_programming) design principle. Despite its object focus, SOLID has proven itself useful across programming paradigms. Many have argued that SOLID can be boiled down to its first principle: [*single responsibility*](https://en.wikipedia.org/wiki/Single_responsibility_principle). This principle states that every module should have just one purpose. + +To make this distinction more concrete, imagine an application being created by an agency. The agency is connecting to data being created by a non-governmental organization. This external organization has created a great API that makes it easy for the agency’s engineers to get the data they need. During the course of developing many user stories, the engineering team realizes they have consumed data from that service in three, slightly different ways. + +They apply the single responsibility principle to make the design better. They look at the three places that they’re connecting with the API and see two patterns: - An authorization process has to be part of each request to the API. - The data coming back is parsed in very similar ways once received. -The agency engineers create an API client object that handles the -authorization. Then they create a parser that takes apart the data -consistently. +The agency engineers create an API client object that handles the authorization. Then they create a parser that takes apart the data consistently. -Wrapping up this logic in one place means that they’re inoculated from -massive changes, when they happen. When the non-governmental -organization decides to radically change the way they’re sending out -data, it changes in one place instead of three. When the agency connects -to their API in a number of other ways, and then the API changes their -authentication flow, that too changes in just one place. +Wrapping up this logic in one place means that they’re inoculated from massive changes, when they happen. When the non-governmental organization decides to radically change the way they’re sending out data, it changes in one place instead of three. When the agency connects to their API in a number of other ways, and then the API changes their authentication flow, that too changes in just one place. -The other SOLID principles, which I leave to your personal research, are -also concerned with reducing the cost of change by making code smaller -and simpler. +The other SOLID principles, which I leave to your personal research, are also concerned with reducing the cost of change by making code smaller and simpler. ### Optimize for change, but don't optimize in advance @@ -211,69 +125,28 @@ and simpler. --- -Often when building software, we engineers are building something simple -and imagine that it will surely need more features soon. Being prudent, -we often choose to build those features now. Sometimes it’s a security -feature; sometimes performance; sometimes a more polished graphical -design. +Often when building software, we engineers are building something simple and imagine that it will surely need more features soon. Being prudent, we often choose to build those features now. Sometimes it’s a security feature; sometimes performance; sometimes a more polished graphical design. -As good as these intentions always are, the additions [make the code -complicated](http://c2.com/cgi/wiki?PrematureOptimization) and hard to -work with. They lead to an increase in defects and reduced velocity. -These defects often decrease performance and security, in direct -opposition to their goals. +As good as these intentions always are, the additions [make the code complicated](http://c2.com/cgi/wiki?PrematureOptimization) and hard to work with. They lead to an increase in defects and reduced velocity. These defects often decrease performance and security, in direct opposition to their goals. -While it’s true that change is inevitable, optimizing for change -dictates that we keep things clean, simple, and decoupled. +While it’s true that change is inevitable, optimizing for change dictates that we keep things clean, simple, and decoupled. -When the desire to add optimizations arise the product team needs to be -an informed partner. They should make priority decisions and separate -concerns into new user stories. +When the desire to add optimizations arise the product team needs to be an informed partner. They should make priority decisions and separate concerns into new user stories. ### Commit to refactoring -The right abstractions for a growing, breathing software project cannot -be guessed correctly in advance. Trying to make that guess is the -“optimizing in advance” that we advise against. Instead, wait for -patterns to emerge and then refactor. - -Martin Fowler introduced a helpful guide called the [rule of -three](https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)). -Duplicate code should be tolerated twice, but when a third instance is -needed, it’s time to refactor out an abstraction to remove that -duplication. This idiom may seem to stand at odds with the single -responsibility principle, but good design requires the right -abstractions, not just adherence to principles. It’s often impossible to -understand the real duplication when presented with only two examples. -Some teams I’ve worked with have required four examples to build the -right abstraction. - -Software teams need to recognize that continual improvement leads to -much higher velocity in the short- and long-term. While changing to a -practice of continually refactoring initially impacts velocity, once -it’s part of the practice, everything works faster and better. +The right abstractions for a growing, breathing software project cannot be guessed correctly in advance. Trying to make that guess is the “optimizing in advance” that we advise against. Instead, wait for patterns to emerge and then refactor. + +Martin Fowler introduced a helpful guide called the [rule of three](https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)). Duplicate code should be tolerated twice, but when a third instance is needed, it’s time to refactor out an abstraction to remove that duplication. This idiom may seem to stand at odds with the single responsibility principle, but good design requires the right abstractions, not just adherence to principles. It’s often impossible to understand the real duplication when presented with only two examples. Some teams I’ve worked with have required four examples to build the right abstraction. + +Software teams need to recognize that continual improvement leads to much higher velocity in the short- and long-term. While changing to a practice of continually refactoring initially impacts velocity, once it’s part of the practice, everything works faster and better. ## There is still a place for architectural planning -User stories and good software design practices will grow architecture -organically. - -There are a few decisions that still require us to think about -architecture first. Languages and frameworks have an impact on team -culture and the ability of the team to recruit top talent. Choose -languages and frameworks that are modern, open source, and -well-supported. Database technologies can be abstracted with adapter -layers, but it’s still important to carefully consider your needs and -the implications of your choices. - -Breaking software into individual services allows multiple teams to work -on the same system at once. This optimization into services should -follow the successful implementation of many user stories that follow -user personas from end to end. This will make sure the system works as a -whole. - -Focusing on design over architecture is a paradigm shift that forces -teams to think about the problem from the outside in. The win in this -approach is that there is no last minute integration step when a team -hopes that all the parts work together. Choosing design over -architecture wins by reducing project risk. +User stories and good software design practices will grow architecture organically. + +There are a few decisions that still require us to think about architecture first. Languages and frameworks have an impact on team culture and the ability of the team to recruit top talent. Choose languages and frameworks that are modern, open source, and well-supported. Database technologies can be abstracted with adapter layers, but it’s still important to carefully consider your needs and the implications of your choices. + +Breaking software into individual services allows multiple teams to work on the same system at once. This optimization into services should follow the successful implementation of many user stories that follow user personas from end to end. This will make sure the system works as a whole. + +Focusing on design over architecture is a paradigm shift that forces teams to think about the problem from the outside in. The win in this approach is that there is no last minute integration step when a team hopes that all the parts work together. Choosing design over architecture wins by reducing project risk. diff --git a/_posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md b/_posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md index 01a12abb0..c8f650752 100644 --- a/_posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md +++ b/_posts/2015-11-17-gsa-gov-refreshed-with-eye-toward-mobile-users.md @@ -8,48 +8,23 @@ tags: - gsa - design - web design standards -excerpt: "GSA unveiled a refreshed gsa.gov website yesterday with a more -crisp design layout, improved usability, and features geared more toward -mobile users." -description: "GSA unveiled a refreshed gsa.gov website yesterday with a more -crisp design layout, improved usability, and features geared more toward -mobile users." +excerpt: "GSA unveiled a refreshed gsa.gov website yesterday with a more crisp design layout, improved usability, and features geared more toward mobile users." +description: "GSA unveiled a refreshed gsa.gov website yesterday with a more crisp design layout, improved usability, and features geared more toward mobile users." image: /assets/blog/gsa-homepage/gsa-homepage.jpg +hero: false --- ![A screenshot of the new gsa.gov homepage]({{site.baseurl}}/assets/blog/gsa-homepage/gsa-homepage.jpg) *Originally posted on [GSA's blog](http://gsablogs.gsa.gov/gsablog/2015/11/17/gsa-gov-refreshed-with-eye-toward-mobile-users/).* -Increasingly, website traffic is coming from mobile users. With this in -mind, the General Services Administration (GSA) unveiled a newly refreshed [gsa.gov -website](http://www.gsa.gov/portal/category/100000) on Nov. 16. - -“Our ultimate goal for the refresh was to continue our work to get -important government information into the hands of users--no matter how -or where they’re accessing the information,” said Sarah Bryant, Director -of GSA’s Enterprise Web Management Team within the Office of -Communications and Marketing. “With the focus on mobile users, the -refreshed gsa.gov is another step toward anticipating the future needs -of our customer agencies to make smarter, more strategic decisions that -provide better value to our stakeholders.” - -The website refresh is also using resources from the [U.S. Web Design -Standards](https://playbook.cio.gov/designstandards/), which were -released by U.S. Digital Service and -[18F](https://18f.gsa.gov/2015/09/28/web-design-standards/) earlier -this fall. The U.S. Web Design Standards are designed to create better -online experiences for the American people. The standards include -typography and color scheme recommendations that are 508 compliant, -flexible, and designed for ease of readability in addition to interface -elements and the code that powers them. By using these standards, we are -ensuring that the individuals visiting gsa.gov will have a better -digital experience. - -In addition to a section highlighting the most requested GSA services -and information, the revamped gsa.gov also showcases a host of user -engagement platforms including upcoming events, news, and customer -support. +Increasingly, website traffic is coming from mobile users. With this in mind, the General Services Administration (GSA) unveiled a newly refreshed [gsa.gov website](http://www.gsa.gov/portal/category/100000) on Nov. 16. + +“Our ultimate goal for the refresh was to continue our work to get important government information into the hands of users--no matter how or where they’re accessing the information,” said Sarah Bryant, Director of GSA’s Enterprise Web Management Team within the Office of Communications and Marketing. “With the focus on mobile users, the refreshed gsa.gov is another step toward anticipating the future needs of our customer agencies to make smarter, more strategic decisions that provide better value to our stakeholders.” + +The website refresh is also using resources from the [U.S. Web Design Standards](https://playbook.cio.gov/designstandards/), which were released by U.S. Digital Service and [18F](https://18f.gsa.gov/2015/09/28/web-design-standards/) earlier this fall. The U.S. Web Design Standards are designed to create better online experiences for the American people. The standards include typography and color scheme recommendations that are 508 compliant, flexible, and designed for ease of readability in addition to interface elements and the code that powers them. By using these standards, we are ensuring that the individuals visiting gsa.gov will have a better digital experience. + +In addition to a section highlighting the most requested GSA services and information, the revamped gsa.gov also showcases a host of user engagement platforms including upcoming events, news, and customer support. On average, gsa.gov receives more than 5 million page views a month. diff --git a/_posts/2015-11-18-automating-easy-government-decisions-with-machine-learning.md b/_posts/2015-11-18-automating-easy-government-decisions-with-machine-learning.md index 1466a854f..9e1ebb349 100644 --- a/_posts/2015-11-18-automating-easy-government-decisions-with-machine-learning.md +++ b/_posts/2015-11-18-automating-easy-government-decisions-with-machine-learning.md @@ -9,135 +9,30 @@ tags: - best practices - data access -excerpt: "Machine learning is a subfield of computer science that focuses on the -problem of learning from data. We think there’s a big opportunity to make government -more efficient by using the massive paper trail that government -agencies have been creating over the decades as datasets for machine -learning algorithms." -description: "Machine learning is a subfield of computer science that focuses on the -problem of learning from data. We think there’s a big opportunity to make government -more efficient by using the massive paper trail that government -agencies have been creating over the decades as datasets for machine -learning algorithms." +excerpt: "Machine learning is a subfield of computer science that focuses on the problem of learning from data. We think there’s a big opportunity to make government more efficient by using the massive paper trail that government agencies have been creating over the decades as datasets for machine learning algorithms." image: /assets/blog/machine-learning/computer-motherboard.jpg --- -![A computer motherboard]({{site.baseurl}}/assets/blog/machine-learning/computer-motherboard.jpg) +Should I get married? What is my calling? Should I eat gluten? A lot of decisions in life are hard. We spend months or years collecting information from different sources, mulling them over many restless nights, talking them over with friends and family. Those hard decisions are a big part of what makes you who you are, and everyone makes them in a slightly different way. -Should I get married? What is my calling? Should I eat gluten? A lot of -decisions in life are hard. We spend months or years collecting -information from different sources, mulling them over many restless -nights, talking them over with friends and family. Those hard decisions -are a big part of what makes you who you are, and everyone makes them in -a slightly different way. +And then, there’s the decision over whether transaction \#39000946 is a duplicate of transaction \#39000843. Or deciding whether or not a document entitled “Ideas for the Advancement of the State Department” relates to the State Department. These are easy decisions — not in the sense that they’re cheap or instantaneous for a person to make, but in the sense that, given all the data and proper training, everyone will reach the same conclusion. All the data required to make them is right in front of you, and there’s a clear answer for that decision given that data. -And then, there’s the decision over whether transaction \#39000946 is a -duplicate of transaction \#39000843. Or deciding whether or not a -document entitled “Ideas for the Advancement of the State Department” -relates to the State Department. These are easy decisions — not in the -sense that they’re cheap or instantaneous for a person to make, but in -the sense that, given all the data and proper training, everyone will -reach the same conclusion. All the data required to make them is right -in front of you, and there’s a clear answer for that decision given that -data. +## Programmed by data -Programmed by data ------------------- +Since the dawn of the digital age, scientists have been striving to make a “thinking machine,” endowed with a human-like ability to solve any problem in any domain. That effort has had the same success as nuclear fusion: it’s always 25 years away. However, that doesn’t mean there hasn’t been a lot of progress. Since the ‘90s, researchers and businesses have started to use algorithms that are programmed by organically-created data — such as a list of financial transactions or an archive of U.N. transcripts. This approach — called machine learning — has proven to be very successful for these types of “easy” decisions, capable of nearing or matching human performance, but at orders of magnitude greater speed and dramatically reduced cost. -Since the dawn of the digital age, scientists have been striving to make -a “thinking machine,” endowed with a human-like ability to solve any -problem in any domain. That effort has had the same success as nuclear -fusion: it’s always 25 years away. However, that doesn’t mean there -hasn’t been a lot of progress. Since the ‘90s, researchers and -businesses have started to use algorithms that are programmed by -organically-created data — such as a list of financial transactions or -an archive of U.N. transcripts. This approach — called machine learning -— has proven to be very successful for these types of “easy” decisions, -capable of nearing or matching human performance, but at orders of -magnitude greater speed and dramatically reduced cost. +For example, it’s pretty easy for you to place that email entitled “You’re a Winner!” into your spam folder, but so many clutter your inbox everyday that they cumulate into a serious distraction. Having your email provider’s staff manually read your email wouldn’t just be creepy, it would be unfeasibly expensive. And, since spam is ever-evolving, it’s nearly impossible to write a fixed set of rules that does a good job. That’s why, when you flag a message as spam, [you are actually programming a machine learning algorithm](http://www.smithsonianmag.com/smart-news/how-google-keeps-your-spam-out-of-your-inbox-58828900/?no-ist). And machine learning isn’t new to government, either: the U.S. Postal Service was one of the early pioneers in implementing machine learning at a large scale. When you send a letter through the USPS, the address is read by an algorithm that has learned to turn images into text by training on a wide variety of handwritten addresses. Writing rules for every type of handwriting would be a nightmare — much better to program it by just showing it the data. Now, the system [reads 98 percent of the addresses perfectly](http://mentalfloss.com/article/53599/how-do-postal-workers-decipher-really-sloppy-handwriting), but when it gets stumped, the postal service still has handwriting experts on staff to step in. Reading an address is generally easy, but reading 160 billion of them every year is quite a chore. -For example, it’s pretty easy for you to place that email entitled -“You’re a Winner!” into your spam folder, but so many clutter your inbox -everyday that they cumulate into a serious distraction. Having your -email provider’s staff manually read your email wouldn’t just be creepy, -it would be unfeasibly expensive. And, since spam is ever-evolving, it’s -nearly impossible to write a fixed set of rules that does a good job. -That’s why, when you flag a message as spam, [you are actually -programming a machine learning -algorithm](http://www.smithsonianmag.com/smart-news/how-google-keeps-your-spam-out-of-your-inbox-58828900/?no-ist). -And machine learning isn’t new to government, either: the U.S. Postal -Service was one of the early pioneers in implementing machine learning -at a large scale. When you send a letter through the USPS, the address -is read by an algorithm that has learned to turn images into text by -training on a wide variety of handwritten addresses. Writing rules for -every type of handwriting would be a nightmare — much better to program -it by just showing it the data. Now, the system [reads 98 percent of the addresses perfectly](http://mentalfloss.com/article/53599/how-do-postal-workers-decipher-really-sloppy-handwriting), -but when it gets stumped, the postal service still has handwriting -experts on staff to step in. Reading an address is generally easy, but -reading 160 billion of them every year is quite a chore. +## A little better on each sample -A little better on each sample ------------------------------- +Machine learning is a subfield of computer science that focuses on the problem of learning from data. A “model” is an algorithm for making a prediction, paired with some way to train it — that is, a way to modify its prediction parameters to fit them to the data set. The training process is not magic: in many cases, the algorithms just tweak the parameters after each sample to do a little bit better next time. Once the model is trained, you can use it to make predictions on new data that’s in the same format you trained it on — that’s it! -Machine learning is a subfield of computer science that focuses on the -problem of learning from data. A “model” is an algorithm for making a -prediction, paired with some way to train it — that is, a way to modify -its prediction parameters to fit them to the data set. The training -process is not magic: in many cases, the algorithms just tweak the -parameters after each sample to do a little bit better next time. Once -the model is trained, you can use it to make predictions on new data -that’s in the same format you trained it on — that’s it! +For example, American Express has access to a long list of transactions from their customers, along with what transactions were reported as fraudulent. In the past, they would write out a long list of rules for determining if a transaction is fraudulent — for example, “if the transaction is in a different country and greater than $1,000, it is fraudulent.” These rules were written by human analysts that studied patterns in the data, but that approach proved to be expensive and difficult to manage. -For example, American Express has access to a long list of transactions -from their customers, along with what transactions were reported as -fraudulent. In the past, they would write out a long list of rules for -determining if a transaction is fraudulent — for example, “if the -transaction is in a different country and greater than $1,000, it is -fraudulent.” These rules were written by human analysts that studied -patterns in the data, but that approach proved to be expensive and -difficult to manage. +Now, [they use a machine learning approach](https://www.mapr.com/blog/machine-learning-american-express-benefits-and-requirements#.Vhba6o93mRt): programmers define a model that takes in a transaction, and predicts whether or not the transaction is fraudulent. It starts out with random parameters that make terrible predictions, but by adjusting the parameters a little bit for each transaction to get closer to the right answer, it gets better and better. Eventually, it presents a short list of fraudulent transactions to an AmEx representative, and they give you a call asking if you just bought $2,500 worth of Pez dispensers. Machine learning is responsible for the success of fraud detection, spam filtering, Google Translate, driverless cars, and much more. When there is not enough data available, or where legal or regulatory constraints are at play, handwritten rules can still be used alongside the machine learning approach. -Now, [they use a machine learning approach](https://www.mapr.com/blog/machine-learning-american-express-benefits-and-requirements#.Vhba6o93mRt): -programmers define a model that takes in a transaction, and predicts -whether or not the transaction is fraudulent. It starts out with random -parameters that make terrible predictions, but by adjusting the -parameters a little bit for each transaction to get closer to the right -answer, it gets better and better. Eventually, it presents a short list -of fraudulent transactions to an AmEx representative, and they give you -a call asking if you just bought $2,500 worth of Pez dispensers. -Machine learning is responsible for the success of fraud detection, spam -filtering, Google Translate, driverless cars, and much more. When there -is not enough data available, or where legal or regulatory constraints -are at play, handwritten rules can still be used alongside the machine -learning approach. +## Machine learning and government -Machine learning and government -------------------------------- +Here at 18F, we think **there’s a big opportunity to make government more efficient** by using the massive paper trail that government agencies have been creating over the decades as datasets for machine learning algorithms. For example, payments made by an agency may be flagged as “improper” — by utilizing the history of transactions and flags, a machine learning system may be able to automatically filter down the list of transactions to those most likely to be improper. Or, if an agency has a large body of documents, we could build a tool to explore and organize them using modern search and natural language processing. Or, a machine learning system could be used to reduce duplicate entries in an database — recognizing that “two” businesses with a similar address and the same phone number probably refer to the same real-life entity. -Here at 18F, we think **there’s a big opportunity to make government -more efficient** by using the massive paper trail that government -agencies have been creating over the decades as datasets for machine -learning algorithms. For example, payments made by an agency may be -flagged as “improper” — by utilizing the history of transactions and -flags, a machine learning system may be able to automatically filter -down the list of transactions to those most likely to be improper. Or, -if an agency has a large body of documents, we could build a tool to -explore and organize them using modern search and natural language -processing. Or, a machine learning system could be used to reduce -duplicate entries in an database — recognizing that “two” businesses -with a similar address and the same phone number probably refer to the -same real-life entity. - -In most cases, it will be a human making the final decision on whether -or not to take action, but even then the system can be used to organize -and accelerate the process. Machine learning systems are tools that -allow more focus on the hard problems of government, not robotic -overlords. And they don’t have to be time consuming or expensive to -build: by leveraging the outstanding advances in open source machine -learning software, a small team can put together a functional prototype -in several weeks. You don’t necessarily need a ton of data, either: in -most cases a couple thousand samples is sufficient to determine if -machine learning will work in your application. If you’re curious about -how machine learning or other data services could be used in your -agency, feel free to reach out to us at -[inquiries18f@gsa.gov](mailto:inquiries18f@gsa.gov). +In most cases, it will be a human making the final decision on whether or not to take action, but even then the system can be used to organize and accelerate the process. Machine learning systems are tools that allow more focus on the hard problems of government, not robotic overlords. And they don’t have to be time consuming or expensive to build: by leveraging the outstanding advances in open source machine learning software, a small team can put together a functional prototype in several weeks. You don’t necessarily need a ton of data, either: in most cases a couple thousand samples is sufficient to determine if machine learning will work in your application. If you’re curious about how machine learning or other data services could be used in your agency, feel free to reach out to us at [inquiries18f@gsa.gov](mailto:inquiries18f@gsa.gov). diff --git a/_posts/2015-11-30-complex-data-in-useiti.md b/_posts/2015-11-30-complex-data-in-useiti.md index 95dabd711..7818574d6 100644 --- a/_posts/2015-11-30-complex-data-in-useiti.md +++ b/_posts/2015-11-30-complex-data-in-useiti.md @@ -9,19 +9,10 @@ authors: excerpt: "We've been working with the Office of Natural Resource Revenues on implementing the global Extractive Industries Transparency Initiative (EITI) standard, which includes all kinds of data. One new data point we have this year is the federal production number: The amount of a given resource produced on federal lands." description: "We've been working with the Office of Natural Resource Revenues on implementing the global Extractive Industries Transparency Initiative (EITI) standard, which includes all kinds of data. One new data point we have this year is the federal production number: The amount of a given resource produced on federal lands." image: /assets/blog/eiti/minot.png +hero: false --- -Of the dozens of offices in the government that deal with natural -resources, the Office of Natural Resource Revenues (ONRR, pronounced -“honor”) is responsible for implementing [the global Extractive -Industries Transparency Initiative (EITI) -standard](https://eiti.org/eiti/implementation). A few weeks ago, we -wrote about [the work that lies ahead](https://18f.gsa.gov/2015/11/02/useiti-what-we-learned-where-were-headed/) -for the USEITI project. -We’re working with a lot of data and finding the best way to present it -to the world. One new data point we have from ONRR this year is the -*federal production number*: The amount of a given resource produced on -federal lands. +Of the dozens of offices in the government that deal with natural resources, the Office of Natural Resource Revenues (ONRR, pronounced “honor”) is responsible for implementing [the global Extractive Industries Transparency Initiative (EITI) standard](https://eiti.org/eiti/implementation). A few weeks ago, we wrote about [the work that lies ahead](https://18f.gsa.gov/2015/11/02/useiti-what-we-learned-where-were-headed/) for the USEITI project. We’re working with a lot of data and finding the best way to present it to the world. One new data point we have from ONRR this year is the *federal production number*: The amount of a given resource produced on federal lands. The "federal production number" ------------------------------- @@ -30,89 +21,30 @@ The "federal production number"
Minot, ND. photo by Bobak Ha'Eri. Licensed CC 3.0, BY-SA. Pumpjack graphic by hunotika from the Noun Project. Licensed CC 3.0, BY-SA.
-Let’s imagine you live in Minot, North Dakota. You’ve probably heard -about an oil boom in your state, in fact, you might even know some -people involved in the industry in your county. There’s a good chance -that some of the money made in that boom is going back to federal, -state, local, and tribal governments, and we’ve historically known -exactly how much that is. What we haven’t known before was how much -federal oil was actually produced. +Let’s imagine you live in Minot, North Dakota. You’ve probably heard about an oil boom in your state, in fact, you might even know some people involved in the industry in your county. There’s a good chance that some of the money made in that boom is going back to federal, state, local, and tribal governments, and we’ve historically known exactly how much that is. What we haven’t known before was how much federal oil was actually produced. -In 2013, nearly $181 million in royalties were paid on oil produced on -federal lands in North Dakota. If we know how much we made, we could -just divide that by how much we paid per barrel and know how much was -produced, right? It turns out to be a little more complicated than that. +In 2013, nearly $181 million in royalties were paid on oil produced on federal lands in North Dakota. If we know how much we made, we could just divide that by how much we paid per barrel and know how much was produced, right? It turns out to be a little more complicated than that. -Sales numbers don’t account for things like any product lost in transit -or used on site. So some data were missing; there might be a statistical -way to calculate the difference, but there was also a reporting problem. +Sales numbers don’t account for things like any product lost in transit or used on site. So some data were missing; there might be a statistical way to calculate the difference, but there was also a reporting problem. Reporting production levels --------------------------- -Drilling for oil, mining for coal, or retrieving other natural resources -are called *extractive industries*. When companies use federal lands to -do it, they need to take out a lease. Much like an apartment, the lease -is permission to use the land for a specific period of time and purpose. -As part of the lease, they pay rent to the federal government just like -you’d pay rent to a landlord. Before any work begins, they also pay out -a reclamation bond, money the company will get back after they finish -development and restore the land according to the law. - -In order to produce and sell natural resources on that land, though, -companies negotiate agreements with federal, state, and local -authorities. The resources came out of public land, so some of the money -made off those lands goes back to the public. This is called a -*royalty*. Agreements can cover many different leases, and the portion -of production that comes from federal lands changes whenever a lease is -added or removed. New leases can be added every month, so the federal -portion of production, then, can change monthly. - -At the end of each month, ONRR reports revenue according to the split, -but production is reported as a single number – 300 barrels of oil, 10 -tons of coal – for the entire agreement. Since royalties get broken down -differently than production volume, inferring production from sales is a -poor estimate but until recently, the only one we had. - -Arriving at the federal production number, then, meant going back to the -beginning and reporting production more accurately for every agreement -going forward. “Production data is the start of where the money comes -from," said ONRR’s Jon Swedin. Eventually people across the U.S. -Department of the Interior rallied around that idea and now, after -several years of work, ONRR will publish federal production as part of -the 2015 USEITI report. +Drilling for oil, mining for coal, or retrieving other natural resources are called *extractive industries*. When companies use federal lands to do it, they need to take out a lease. Much like an apartment, the lease is permission to use the land for a specific period of time and purpose. As part of the lease, they pay rent to the federal government just like you’d pay rent to a landlord. Before any work begins, they also pay out a reclamation bond, money the company will get back after they finish development and restore the land according to the law. + +In order to produce and sell natural resources on that land, though, companies negotiate agreements with federal, state, and local authorities. The resources came out of public land, so some of the money made off those lands goes back to the public. This is called a *royalty*. Agreements can cover many different leases, and the portion of production that comes from federal lands changes whenever a lease is added or removed. New leases can be added every month, so the federal portion of production, then, can change monthly. + +At the end of each month, ONRR reports revenue according to the split, but production is reported as a single number – 300 barrels of oil, 10 tons of coal – for the entire agreement. Since royalties get broken down differently than production volume, inferring production from sales is a poor estimate but until recently, the only one we had. + +Arriving at the federal production number, then, meant going back to the beginning and reporting production more accurately for every agreement going forward. “Production data is the start of where the money comes from," said ONRR’s Jon Swedin. Eventually people across the U.S. Department of the Interior rallied around that idea and now, after several years of work, ONRR will publish federal production as part of the 2015 USEITI report. Designing for production data ----------------------------- -Now that we have that information, USEITI and 18F’s job is to figure out -how to take it (and a lot more) and show it to the world. We’re working -with datasets from many different sources and each is unique and must be -handled differently. To better understand the “shape” of each set, the -team made a [data catalog](https://github.com/18f/doi-extractives-data/wiki/Data-Catalog) -that breaks each one down to understand where it comes from, what it -tells us, and how it’s reported. - -Revenue and production data, for example, look very similar: They’re -broken into the same geographic areas, have similar properties (like the -production year and name of the commodity), both are reported down to -the county level, and they have a common source. After cataloging them, -we learned that federal production and revenue data were different -enough that they couldn’t be served by the same interface. - -The difference: Revenue has a common unit, U.S. dollars. Every revenue -report has how many dollars were paid by the company. This means that -without any interaction you can say: “Here’s the total amount of money -brought in across *the entire natural resource industry* in 2014,” and -that means something. You can’t do that with production data because -every resource is reported in different units. - -Why even bother publishing the production number anyway? Well, for one, -people wanted it. Whenever ONRR published revenue numbers, people would -often use it as a proxy for production numbers. But there’s another -reason that takes us back to Minot. That oil boom? Some of that money is -made on land that belongs to you and other residents of your county, -state, tribe, and country. Natural resources are an important part of -the national debate right now, even more so in communities impacted by -extractives industries. You deserve to know how much is being taken out -of the land to be an active and informed participant in that debate. +Now that we have that information, USEITI and 18F’s job is to figure out how to take it (and a lot more) and show it to the world. We’re working with datasets from many different sources and each is unique and must be handled differently. To better understand the “shape” of each set, the team made a [data catalog](https://github.com/18f/doi-extractives-data/wiki/Data-Catalog) that breaks each one down to understand where it comes from, what it tells us, and how it’s reported. + +Revenue and production data, for example, look very similar: They’re broken into the same geographic areas, have similar properties (like the production year and name of the commodity), both are reported down to the county level, and they have a common source. After cataloging them, we learned that federal production and revenue data were different enough that they couldn’t be served by the same interface. + +The difference: Revenue has a common unit, U.S. dollars. Every revenue report has how many dollars were paid by the company. This means that without any interaction you can say: “Here’s the total amount of money brought in across *the entire natural resource industry* in 2014,” and that means something. You can’t do that with production data because every resource is reported in different units. + +Why even bother publishing the production number anyway? Well, for one, people wanted it. Whenever ONRR published revenue numbers, people would often use it as a proxy for production numbers. But there’s another reason that takes us back to Minot. That oil boom? Some of that money is made on land that belongs to you and other residents of your county, state, tribe, and country. Natural resources are an important part of the national debate right now, even more so in communities impacted by extractives industries. You deserve to know how much is being taken out of the land to be an active and informed participant in that debate. diff --git a/_posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md b/_posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md index 99aeab4a2..39caf0dfb 100644 --- a/_posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md +++ b/_posts/2015-12-01-how-we-dramatically-improved-18fs-onboarding-process-in-3-months.md @@ -14,6 +14,7 @@ tags: excerpt: "Over the past three months, we’ve released several products that help new hires acclimate to our organization. In this blog post, we’ll detail what we did and why it works really well." description: "Over the past three months, we’ve released several products that help new hires acclimate to our organization. In this blog post, we’ll detail what we did and why it works really well." image: /assets/blog/onboarding/dolores.jpg +hero: false --- Three months ago, my colleague Andrew Maier and I were tasked with diff --git a/_posts/2015-12-02-analytics-usa-gov-new-features-more-data.md b/_posts/2015-12-02-analytics-usa-gov-new-features-more-data.md index f206fd993..778624bd3 100644 --- a/_posts/2015-12-02-analytics-usa-gov-new-features-more-data.md +++ b/_posts/2015-12-02-analytics-usa-gov-new-features-more-data.md @@ -18,72 +18,32 @@ tags: excerpt: "We’ve recently added a few new features to analytics.usa.gov: location data, download data, and expanded downloadable files." description: "We’ve recently added a few new features to analytics.usa.gov: location data, download data, and expanded downloadable files." image: /assets/blog/dap/analytics-homepage.jpg +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).* ![The analytics.usa.gov homepage.]({{site.baseurl}}/assets/blog/dap/analytics-homepage.jpg) -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. - -[Back in March of this year](http://mashable.com/2015/03/19/white-house-open-source-analytics/#lw5sIJFfwqq9), -DAP released [analytics.usa.gov](https://analytics.usa.gov/) in -collaboration with [18F](https://18f.gsa.gov/), which provides the -technical support to take DAP data and [turn it into a beautiful, -open-source, public -dashboard](https://18f.gsa.gov/2015/03/19/how-we-built-analytics-usa-gov/). -We have been overwhelmed with positive response via [social -media](https://twitter.com/18F/status/578563466018963456), [press -coverage](https://www.washingtonpost.com/news/the-switch/wp/2015/03/19/the-most-popular-government-web-sites-ranked/), -and thoughtful comments on -[GitHub](https://github.com/18F/analytics.usa.gov). To our delight, a -few other folks used portions of our code to stand up their own web -analytics dashboards, including the city governments of [Philadelphia, -PA](http://analytics.phila.gov/) and [Boulder, -CO](https://bouldercolorado.gov/stats). We even got [President Obama -to check it -out](https://www.digitalgov.gov/files/2015/12/POTUSdap.jpeg). - -We’ve recently added a few new features to -[analytics.usa.gov](https://analytics.usa.gov/): -location data, download data, and expanded downloadable files. +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. + +[Back in March of this year](http://mashable.com/2015/03/19/white-house-open-source-analytics/#lw5sIJFfwqq9), DAP released [analytics.usa.gov](https://analytics.usa.gov/) in collaboration with [18F](https://18f.gsa.gov/), which provides the technical support to take DAP data and [turn it into a beautiful, open-source, public dashboard](https://18f.gsa.gov/2015/03/19/how-we-built-analytics-usa-gov/). We have been overwhelmed with positive response via [social media](https://twitter.com/18F/status/578563466018963456), [press coverage](https://www.washingtonpost.com/news/the-switch/wp/2015/03/19/the-most-popular-government-web-sites-ranked/), and thoughtful comments on [GitHub](https://github.com/18F/analytics.usa.gov). To our delight, a few other folks used portions of our code to stand up their own web analytics dashboards, including the city governments of [Philadelphia, PA](http://analytics.phila.gov/) and [Boulder, CO](https://bouldercolorado.gov/stats). We even got [President Obama to check it out](https://www.digitalgov.gov/files/2015/12/POTUSdap.jpeg). + +We’ve recently added a few new features to [analytics.usa.gov](https://analytics.usa.gov/): location data, download data, and expanded downloadable files. 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. +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. ![A snapshot of location data from analytics.usa.gov]({{site.baseurl}}/assets/blog/dap/analytics-locations.jpg) -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. +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. Download data ------------- -You can now see not just the popular pages and sites along the -right-hand column, but also the most frequently accessed “downloads”. +You can now see not just the popular pages and sites along the right-hand column, but also the most frequently accessed “downloads”. Two important things to understand about downloads: @@ -91,37 +51,18 @@ Two important things to understand about downloads: 2. Downloads are logged when visitors click links to them from a page that participates in the Digital Analytics Program. It does not include visits from direct links to files, such as links that were emailed, posted on social media, or posted on websites that do not participate in DAP. -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. +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. ![A screenshot of a top downloaded item, in this case an Application for Naturalization from USCIS.]({{site.baseurl}}/assets/blog/dap/analytics-downloads.jpg) -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! +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 ---------------------------
A list of types of data you can download from analytics.usa.gov.
-There’s a limit to how much data we can display on the page for you, so -we have greatly expanded the downloadable data reports. We offer -downloads of various types of data (some in CSV format and some in JSON) -so that you can work with the data yourself! - -Previously, the downloadable files generally only contained the same -data that was displayed on analytics.usa.gov. Now, some of the files -include hundreds or even thousands of rows, where applicable. We have -set lower limits on the larger datasets to remove the “long tail” -effect. We list pages that have least 10 visitors on the page in -real-time, and domains which have received at least 1,000 visits in 30 -days. - -Over the coming months, we will continue to expand and improve on -[analytics.usa.gov](https://analytics.usa.gov). We hope you like what -we’ve done so far, but there is more to come. We’re continuously -evaluating new ideas, and welcome your feedback [on GitHub](https://github.com/18F/analytics.usa.gov/issues) -or [via email](mailto:dap@support.digitalgov.gov). Tell us what you -think, and what you’d like to see in the future. +There’s a limit to how much data we can display on the page for you, so we have greatly expanded the downloadable data reports. We offer downloads of various types of data (some in CSV format and some in JSON) so that you can work with the data yourself! + +Previously, the downloadable files generally only contained the same data that was displayed on analytics.usa.gov. Now, some of the files include hundreds or even thousands of rows, where applicable. We have set lower limits on the larger datasets to remove the “long tail” effect. We list pages that have least 10 visitors on the page in real-time, and domains which have received at least 1,000 visits in 30 days. + +Over the coming months, we will continue to expand and improve on [analytics.usa.gov](https://analytics.usa.gov). We hope you like what we’ve done so far, but there is more to come. We’re continuously evaluating new ideas, and welcome your feedback [on GitHub](https://github.com/18F/analytics.usa.gov/issues) or [via email](mailto:dap@support.digitalgov.gov). Tell us what you think, and what you’d like to see in the future. diff --git a/_posts/2015-12-03-epa-environmental-digital-services-marketplace.md b/_posts/2015-12-03-epa-environmental-digital-services-marketplace.md index 40c4cd658..66dfcbcdc 100644 --- a/_posts/2015-12-03-epa-environmental-digital-services-marketplace.md +++ b/_posts/2015-12-03-epa-environmental-digital-services-marketplace.md @@ -14,32 +14,12 @@ description: "The Environmental Protection Agency (EPA) is working on ways to co image: /assets/blog/epa-marketplace/blue-sky-clouds.jpg --- -![Blue sky and clouds]({{site.baseurl}}/assets/blog/epa-marketplace/blue-sky-clouds.jpg) +Over the past year, the Environmental Protection Agency (EPA) has undertaken a [broad initiative to transform the way it delivers digital services](http://fedscoop.com/epa-to-grow-digital-services-with-godbout-at-helm). We’ve been working hand-in-hand with the EPA to make this transformation a success by [supporting such programs as eManifest](http://fedscoop.com/hazardous-waste-regulator-portals-get-a-boost-from-epa-digital-services). -Over the past year, the Environmental Protection Agency (EPA) has -undertaken a [broad initiative to transform the way it delivers digital services](http://fedscoop.com/epa-to-grow-digital-services-with-godbout-at-helm). -We’ve been working hand-in-hand with the EPA to make this transformation -a success by [supporting such programs as eManifest](http://fedscoop.com/hazardous-waste-regulator-portals-get-a-boost-from-epa-digital-services). +Working with 18F is just one of many ways in which the EPA is trying to build greater capacity for delivering valuable, high-quality digital services. They are also working on ways to contract with high-quality digital service vendors, which is why the EPA just released a [Request for Information (RFI) for creating an Environmental Digital Services marketplace](https://www.fbo.gov/index?s=opportunity&mode=form&id=318612f638d28fae5675eef7bcc3dfc3&tab=core&_cview=0). -Working with 18F is just one of many ways in which the EPA is trying to -build greater capacity for delivering valuable, high-quality digital -services. They are also working on ways to contract with high-quality -digital service vendors, which is why the EPA just released a [Request for Information (RFI) for creating an Environmental Digital Services marketplace](https://www.fbo.gov/index?s=opportunity&mode=form&id=318612f638d28fae5675eef7bcc3dfc3&tab=core&_cview=0). +Modeled after 18F’s [Agile Delivery Services marketplace](https://18f.gsa.gov/2015/01/08/creating-a-federal-marketplace-for-agile-delivery-services/), the EPA plans to create a marketplace of vendors who specialize in modern digital practices such as human-centered design, agile software development, and DevOps. Vendors who qualify for this marketplace will then be able to bid on EPA contracts for digital services. -Modeled after 18F’s [Agile Delivery Services marketplace](https://18f.gsa.gov/2015/01/08/creating-a-federal-marketplace-for-agile-delivery-services/), -the EPA plans to create a marketplace of vendors who specialize in -modern digital practices such as human-centered design, agile software -development, and DevOps. Vendors who qualify for this marketplace will -then be able to bid on EPA contracts for digital services. +The EPA is looking to distinguish this marketplace from previous efforts by evaluating vendors based on their expertise in environmental business issues and their pattern of environmentally sustainable behavior. In October, when we [announced our Digital Economy consulting practice](https://18f.gsa.gov/2015/10/07/digital-economy-practice/), we talked about the potential benefits of combining industry expertise with digital expertise to achieve policy goals, and we’re excited that the EPA is trying this with the environment. -The EPA is looking to distinguish this marketplace from previous efforts -by evaluating vendors based on their expertise in environmental business -issues and their pattern of environmentally sustainable behavior. In -October, when we [announced our Digital Economy consulting practice](https://18f.gsa.gov/2015/10/07/digital-economy-practice/), we -talked about the potential benefits of combining industry expertise with -digital expertise to achieve policy goals, and we’re excited that the -EPA is trying this with the environment. - -We’re excited to see how the EPA’s new Environmental Digital Services -marketplace initiative unfolds, and we encourage all interested vendors -to [respond to the RFI](https://www.fbo.gov/index?s=opportunity&mode=form&id=318612f638d28fae5675eef7bcc3dfc3&tab=core&_cview=0). +We’re excited to see how the EPA’s new Environmental Digital Services marketplace initiative unfolds, and we encourage all interested vendors to [respond to the RFI](https://www.fbo.gov/index?s=opportunity&mode=form&id=318612f638d28fae5675eef7bcc3dfc3&tab=core&_cview=0). diff --git a/_posts/2015-12-03-power-of-mindset-normatives-matthew-milan.md b/_posts/2015-12-03-power-of-mindset-normatives-matthew-milan.md index ee54f00e9..387719207 100644 --- a/_posts/2015-12-03-power-of-mindset-normatives-matthew-milan.md +++ b/_posts/2015-12-03-power-of-mindset-normatives-matthew-milan.md @@ -12,105 +12,56 @@ tags: excerpt: "Matthew Milan, founder of and design leader at software design firm Normative, visited 18F’s main office to share his insights into the importance of the shared mindset and how your team can develop its own. Here are some of his takeaways." description: "Matthew Milan, founder of and design leader at software design firm Normative, visited 18F’s main office to share his insights into the importance of the shared mindset and how your team can develop its own. Here are some of his takeaways." image: /assets/blog/speaker-series/matthew-milan.jpg +hero: false --- -You may not be familiar with the name Doug Engelbart, but you’re -unquestionably familiar with the ideas he espoused. In a now-famous [1968 -demonstration](http://www.dougengelbart.org/firsts/dougs-1968-demo.html), Engelbart -spoke on nearly all of the elements of contemporary computing — word -processing, hypertext, use of a mouse, and more. Prior to this demo, -Engelbart was considered somewhat of an eccentric. Afterward, he was -lauded as an innovator. +You may not be familiar with the name Doug Engelbart, but you’re unquestionably familiar with the ideas he espoused. In a now-famous [1968 demonstration](http://www.dougengelbart.org/firsts/dougs-1968-demo.html), Engelbart spoke on nearly all of the elements of contemporary computing — word processing, hypertext, use of a mouse, and more. Prior to this demo, Engelbart was considered somewhat of an eccentric. Afterward, he was lauded as an innovator. What changed? -In short, *how* Engelbart’s unique mindset was presented shifted his -colleagues’ opinion of him. Stewart Brand, editor of the Whole Earth -Catalog and co-founder of the Long Now Foundation, helped to shape -Engelbart’s raw material into a presentation that was direct, -convincing, and easy to comprehend. +In short, *how* Engelbart’s unique mindset was presented shifted his colleagues’ opinion of him. Stewart Brand, editor of the Whole Earth Catalog and co-founder of the Long Now Foundation, helped to shape Engelbart’s raw material into a presentation that was direct, convincing, and easy to comprehend.
Matthew Milan
-This concept — the transformative power of shared mindset — was the -focus of Matthew Milan’s recent talk for the 18F Design Presents speaker -series. Milan, founder of and design leader at software design firm -[Normative](http://www.normative.com/), has fifteen years’ experience in -the domain of emerging technologies, and he excels at translating -complex information into compelling user experiences. +This concept — the transformative power of shared mindset — was the focus of Matthew Milan’s recent talk for the 18F Design Presents speaker series. Milan, founder of and design leader at software design firm [Normative](http://www.normative.com/), has fifteen years’ experience in the domain of emerging technologies, and he excels at translating complex information into compelling user experiences. -Milan visited 18F’s main office to share his insights into the -importance of the shared mindset and how your team can develop its own. -Here are some of his important takeaways: +Milan visited 18F’s main office to share his insights into the importance of the shared mindset and how your team can develop its own. Here are some of his important takeaways: Mindset, defined ---------------- -Milan describes mindset as a “philosophical stance codified in the -mind.” Much more than a simple set of rules, it can be thought of as a -shared will: something that exists in the space between thinking and -feeling. +Milan describes mindset as a “philosophical stance codified in the mind.” Much more than a simple set of rules, it can be thought of as a shared will: something that exists in the space between thinking and feeling. Flexibility is key ------------------ -One thing that mindset is *not* is inflexible. It’s not dogmatic or -doctrinaire; rather, it’s mutable — shaped by research, lived -experience, and shared insight. The traditional binary model of mindset -includes the fixed mindset (which is more reactive) and the growth -mindset (which is more proactive). +One thing that mindset is *not* is inflexible. It’s not dogmatic or doctrinaire; rather, it’s mutable — shaped by research, lived experience, and shared insight. The traditional binary model of mindset includes the fixed mindset (which is more reactive) and the growth mindset (which is more proactive). -The good news? You don’t need to align yourself with one type of mindset -or the other — you can take elements from both and design your own -unique stance. As Milan said, “You can adopt parts of both -perspectives.” +The good news? You don’t need to align yourself with one type of mindset or the other — you can take elements from both and design your own unique stance. As Milan said, “You can adopt parts of both perspectives.” Follow the loop --------------- -Developed by U.S. Air Force colonel John Boyd, the [OODA loop](https://www.mindtools.com/pages/article/newTED\_78.htm) is the -decision-making model used across a range of domains, from warfare to -technology startups. It includes the processes of observing, orienting, -deciding, and (finally) acting. +Developed by U.S. Air Force colonel John Boyd, the [OODA loop](https://www.mindtools.com/pages/article/newTED\_78.htm) is the decision-making model used across a range of domains, from warfare to technology startups. It includes the processes of observing, orienting, deciding, and (finally) acting. -Of especial importance to mindset is the *orientation* stage of the -cycle. According to Milan, “Your orientation draws on your cultural -traditions, previous experience, analysis, and synthesis. It’s what -makes stuff work.” In short, it’s your mindset. Knowing that your -mindset not only impacts each decision, but is central to your arrival -at each decision, can help you refresh your focus on it and cultivate it -to align with your organization’s core values. +Of especial importance to mindset is the *orientation* stage of the cycle. According to Milan, “Your orientation draws on your cultural traditions, previous experience, analysis, and synthesis. It’s what makes stuff work.” In short, it’s your mindset. Knowing that your mindset not only impacts each decision, but is central to your arrival at each decision, can help you refresh your focus on it and cultivate it to align with your organization’s core values. Theory of extended mind ----------------------- -Being mindful of the impact of shared knowledge can help you and your -team more quickly get onto the same page, aligning your actions with one -another and your organization’s ideals. Milan explained that our -interactions with our physical space — putting up sticky notes on a -whiteboard, for example — can help us extend our cognition, facilitating -the development of a stronger shared mindset. +Being mindful of the impact of shared knowledge can help you and your team more quickly get onto the same page, aligning your actions with one another and your organization’s ideals. Milan explained that our interactions with our physical space — putting up sticky notes on a whiteboard, for example — can help us extend our cognition, facilitating the development of a stronger shared mindset. Cognition in the wild --------------------- -Peter Merholz, co-founder of Adaptive Path, believes in the importance -of mindset — even above other elements of the design process. In a [2009 -blog post](http://www.peterme.com/2009/12/03/mindset-not-process-outcomes-not-methods-what-i-would-tell-interaction-design-students-2-in-a-series/), -Merholz wrote, “What’s more important than process is mindset. And when -it comes to interaction design, that mindset is having empathy for and -understanding your users.” +Peter Merholz, co-founder of Adaptive Path, believes in the importance of mindset — even above other elements of the design process. In a [2009 blog post](http://www.peterme.com/2009/12/03/mindset-not-process-outcomes-not-methods-what-i-would-tell-interaction-design-students-2-in-a-series/), Merholz wrote, “What’s more important than process is mindset. And when it comes to interaction design, that mindset is having empathy for and understanding your users.” -Though much time has been devoted to the study and codification of -methods and methodologies, considerably less has been spent on mindset. -While UX is the dominant design mindset (and has been for some time), -Milan reminds us that it’s just that: one way of approaching design. +Though much time has been devoted to the study and codification of methods and methodologies, considerably less has been spent on mindset. While UX is the dominant design mindset (and has been for some time), Milan reminds us that it’s just that: one way of approaching design. Crafting your own mindset -------------------------- -Is your team ready to reevaluate and refine its shared mindset? Take -these tips into account: +Is your team ready to reevaluate and refine its shared mindset? Take these tips into account: - **Look to mindsets in the wild**: Identify companies whose ideologies and impact align with your values, and learn as much as you can about their mindsets. - **Model behavior and intent**: Members of your leadership team shouldn’t just enact your organization’s values, but should verbally communicate them, too. Verbal repetition of your organization’s core values helps reinforce them and can keep your team on the same page. @@ -119,6 +70,4 @@ these tips into account: Ready for more? ---------------- -You can watch the entirety of Milan’s presentation, including a Q&A, -[right here](https://www.youtube.com/watch?v=KtWjA6tg5Y4). And, as -always, stay tuned for updates about our upcoming presentations. +You can watch the entirety of Milan’s presentation, including a Q&A, [right here](https://www.youtube.com/watch?v=KtWjA6tg5Y4). And, as always, stay tuned for updates about our upcoming presentations. diff --git a/_posts/2015-12-08-using-emoji-for-knowledge-sharing.md b/_posts/2015-12-08-using-emoji-for-knowledge-sharing.md index e75a26f3f..5e9672e18 100644 --- a/_posts/2015-12-08-using-emoji-for-knowledge-sharing.md +++ b/_posts/2015-12-08-using-emoji-for-knowledge-sharing.md @@ -16,6 +16,7 @@ description: "Our coworkers are very, very good at documenting the things they l in Slack, our chat program, because it’s part of their daily workflow. So I tried an experiment: I asked my 18F coworkers to tag messages that every new 18F employee should know with the :evergreen_tree: emoji." image: /assets/blog/onboarding/evergreen-tree.png +hero: false --- In the process of [rethinking diff --git a/_posts/2015-12-11-how-we-test-18f-gsa-gov.md b/_posts/2015-12-11-how-we-test-18f-gsa-gov.md index 282f136d5..20f45cc91 100644 --- a/_posts/2015-12-11-how-we-test-18f-gsa-gov.md +++ b/_posts/2015-12-11-how-we-test-18f-gsa-gov.md @@ -12,74 +12,32 @@ tags: - tools you can use - jekyll -excerpt: "As our blog got more -complicated, we started making mistakes that were hard to catch before -publishing. So we came up with a way to catch many of those errors, -before they end up in your browser." -description: "As our blog got more -complicated, we started making mistakes that were hard to catch before -publishing. So we came up with a way to catch many of those errors, -before they end up in your browser." +excerpt: "As our blog got more complicated, we started making mistakes that were hard to catch before publishing. So we came up with a way to catch many of those errors, before they end up in your browser." +description: "As our blog got more complicated, we started making mistakes that were hard to catch before publishing. So we came up with a way to catch many of those errors, before they end up in your browser." image: /assets/blog/18f-site/site-with-tests.png +hero: false --- -[About a year ago](https://18f.gsa.gov/2014/11/17/taking-control-of-our-website-with-jekyll-and-webhooks/) -we converted this site to run fully on Jekyll and migrated our blog from -Tumblr. When we did that we gained some freedom and the ability to edit -our content on GitHub. We’ve received quite a few pull requests from -readers to fix typos and optimize images. As our blog got more -complicated, we started making mistakes that were hard to catch before -publishing. So we came up with a way to catch many of those errors, -before they end up in your browser. +[About a year ago](https://18f.gsa.gov/2014/11/17/taking-control-of-our-website-with-jekyll-and-webhooks/) we converted this site to run fully on Jekyll and migrated our blog from Tumblr. When we did that we gained some freedom and the ability to edit our content on GitHub. We’ve received quite a few pull requests from readers to fix typos and optimize images. As our blog got more complicated, we started making mistakes that were hard to catch before publishing. So we came up with a way to catch many of those errors, before they end up in your browser. ![A screenshot of an image error]({{site.baseurl}}/assets/blog/18f-site/site-with-tests.png) *Basic content problems are a pain. This is why we run automated tests on 18f.gsa.gov.* -One advantage of hosting our site’s code on GitHub is we can integrate -with continuous integration (CI) services to check our work before we -publish. Many open source projects use a CI to run various tests on -their code. We use it to run tests on our content. We use Travis CI but -there are many others out there. Until recently, the only test we ran -was building the site to know if it was successful. - -Just building the site caught a few high-level errors but not all. We -added the `html-proofer` to our test suite, which checks internal -links and validates the HTML on every generated page. This helps us -catch more errors but is still kind of like a chainsaw: It tears through -the material but misses detail-level problems. If a post was missing the -`authors` field in the frontmatter, for example, all the tests would -pass but the generated page would be missing a byline. This is the kind -of error we wouldn’t catch until we merged the content into the site and -previewed it on our staging server. - -Manually inspecting things is the worst, especially when you can make a -computer to do it for you. This is why we wrote the -`jekyll_frontmatter_tests` gem. It’s pretty simple and helps us -catch problems like this before we publish. It works by comparing our -posts to a “schema” that describes which fields should exist in the -frontmatter and how their values should be formatted. Let’s walk through -installation and setup for testing a Jekyll site’s posts. - -For these instructions, we recommend typing in each of the commands, not -copy-pasting. +One advantage of hosting our site’s code on GitHub is we can integrate with continuous integration (CI) services to check our work before we publish. Many open source projects use a CI to run various tests on their code. We use it to run tests on our content. We use Travis CI but there are many others out there. Until recently, the only test we ran was building the site to know if it was successful. + +Just building the site caught a few high-level errors but not all. We added the `html-proofer` to our test suite, which checks internal links and validates the HTML on every generated page. This helps us catch more errors but is still kind of like a chainsaw: It tears through the material but misses detail-level problems. If a post was missing the `authors` field in the frontmatter, for example, all the tests would pass but the generated page would be missing a byline. This is the kind of error we wouldn’t catch until we merged the content into the site and previewed it on our staging server. + +Manually inspecting things is the worst, especially when you can make a computer to do it for you. This is why we wrote the `jekyll_frontmatter_tests` gem. It’s pretty simple and helps us catch problems like this before we publish. It works by comparing our posts to a “schema” that describes which fields should exist in the frontmatter and how their values should be formatted. Let’s walk through installation and setup for testing a Jekyll site’s posts. + +For these instructions, we recommend typing in each of the commands, not copy-pasting. ## Installation -Install it by adding `jekyll_frontmatter_tests` to your -`_config.yml` in the `jekyll-plugins` section and then `gem -install jekyll_frontmatter_tests`. Once installed, you should have an -extra command called `test` when you run `jekyll --help`. Here’s -what [18f.gsa.gov’s `_config.yml`](https://github.com/18F/18f.gsa.gov/blob/staging/_config.yml), -and [`Gemfile`](https://github.com/18F/18f.gsa.gov/blob/staging/Gemfile) -look like. +Install it by adding `jekyll_frontmatter_tests` to your `_config.yml` in the `jekyll-plugins` section and then `gem install jekyll_frontmatter_tests`. Once installed, you should have an extra command called `test` when you run `jekyll --help`. Here’s what [18f.gsa.gov’s `_config.yml`](https://github.com/18F/18f.gsa.gov/blob/staging/_config.yml), and [`Gemfile`](https://github.com/18F/18f.gsa.gov/blob/staging/Gemfile) look like. ## Configuration -Next, create a “schema” file in a directory called -`deploy/tests/schema`. If you don’t have that directory, you can make -it by running `mkdir -p deploy/tests/schema` from the root of your -Jekyll directory. Then create a file called `_posts.yml`. You can do -this by running `touch deploy/tests/schema/_posts.yml`. +Next, create a “schema” file in a directory called `deploy/tests/schema`. If you don’t have that directory, you can make it by running `mkdir -p deploy/tests/schema` from the root of your Jekyll directory. Then create a file called `_posts.yml`. You can do this by running `touch deploy/tests/schema/_posts.yml`. Open `deploy/tests/schema/_posts.yml` in your favorite editor. @@ -96,10 +54,7 @@ tags: - jekyll ``` -In that example, each post is required to have a `title` that is a -string, an array of `authors`, and an array of `tags`. Each one of -those needs a line in the `_posts.yml` file, with the expected “type” -on the right. +In that example, each post is required to have a `title` that is a string, an array of `authors`, and an array of `tags`. Each one of those needs a line in the `_posts.yml` file, with the expected “type” on the right. ``` --- @@ -108,14 +63,7 @@ tags: “Array” authors: “Array” ``` -Once that’s in place, we need to add a `config` section at the bottom -of the schema file. This will give the plugin a little information it -wouldn’t otherwise know. There are two required sections in this part -right now: `path` and `ignore`. The first tells the test where to -find the posts, the second tells it to ignore specific files that might -also be in that directory. In 18f.gsa.gov, for example, we have a README -in our `_posts` directory so we add README.md to this section. If -you’re using a Mac, yours might look like this: +Once that’s in place, we need to add a `config` section at the bottom of the schema file. This will give the plugin a little information it wouldn’t otherwise know. There are two required sections in this part right now: `path` and `ignore`. The first tells the test where to find the posts, the second tells it to ignore specific files that might also be in that directory. In 18f.gsa.gov, for example, we have a README in our `_posts` directory so we add README.md to this section. If you’re using a Mac, yours might look like this: ``` --- @@ -146,10 +94,7 @@ ignore: ## Running the tests -Now that you have your schema file in place, run `jekyll test`. The -command will check each post to make sure it has a title that is a -string, an array of tags, and an array of authors. If the test passes, -you’ll see the following: +Now that you have your schema file in place, run `jekyll test`. The command will check each post to make sure it has a title that is a string, an array of tags, and an array of authors. If the test passes, you’ll see the following: ``` Starting tests @@ -171,16 +116,8 @@ The test exited with errors: see above. ## Integrating with Travis -We use Travis to test 18f.gsa.gov, but these tests will probably run on -any continuous integration service. All you need to do is add -`bundle exec jekyll -test` [to your Travis configuration](https://github.com/18F/18f.gsa.gov/blob/staging/.travis.yml#L10). -On this site we have a [“go -script”](https://github.com/18F/18f.gsa.gov/blob/staging/go) that runs -a couple other things (including a site build) in addition to testing -all our blog posts and team member profiles. - -That’s it! It was built for Jekyll 3.0 from the start but should work with earlier version. It’ll work for complex sites like ours down to the simplest of blogs. -Just make a schema file for each collection and :boom: you’re testing. +We use Travis to test 18f.gsa.gov, but these tests will probably run on any continuous integration service. All you need to do is add `bundle exec jekyll test` [to your Travis configuration](https://github.com/18F/18f.gsa.gov/blob/staging/.travis.yml#L10). On this site we have a [“go script”](https://github.com/18F/18f.gsa.gov/blob/staging/go) that runs a couple other things (including a site build) in addition to testing all our blog posts and team member profiles. + +That’s it! It was built for Jekyll 3.0 from the start but should work with earlier version. It’ll work for complex sites like ours down to the simplest of blogs. Just make a schema file for each collection and :boom: you’re testing. _Update:_ As a cruel bit of irony we made a couple mistakes with the open graph image in this post. We're already thinking about ways to write tests to prevent this! diff --git a/_posts/2015-12-15-how-bot-named-dolores-landingham-transformed-18fs-onboarding.md b/_posts/2015-12-15-how-bot-named-dolores-landingham-transformed-18fs-onboarding.md index af9958599..cf7287561 100644 --- a/_posts/2015-12-15-how-bot-named-dolores-landingham-transformed-18fs-onboarding.md +++ b/_posts/2015-12-15-how-bot-named-dolores-landingham-transformed-18fs-onboarding.md @@ -216,7 +216,7 @@ end Once we had our class that found the correct message to send to each employee, we needed a way to automatically run the task once per day. We chose [Clockwork](https://github.com/tomykaira/clockwork) for the job: - ```ruby +```ruby # Gemfile gem "clockwork" @@ -254,6 +254,7 @@ env: DEFAULT_URL_HOST: dolores-app.18f.gov RESTRICT_ACCESS: true ``` + and set up `script/start` to run foreman: ```sh diff --git a/_posts/2015-12-22-uk-digital-service-visits-us-to-begin-series-of-exchanges.md b/_posts/2015-12-22-uk-digital-service-visits-us-to-begin-series-of-exchanges.md index ab4dc0cca..e1bfc0233 100644 --- a/_posts/2015-12-22-uk-digital-service-visits-us-to-begin-series-of-exchanges.md +++ b/_posts/2015-12-22-uk-digital-service-visits-us-to-begin-series-of-exchanges.md @@ -13,13 +13,13 @@ description: "Chris Ferguson, Director of GDS's digital group, and a team from t image: /assets/blog/gds/2015-visit.jpg github: https://github.com/18F/blog-drafts/issues/351 --- + +_Image: Photo courtesy of Ross Dakin, Presidential Innovation Fellow_ + Across the pond, the motto of the United Kingdom's [Government Digital Service (GDS)](https://gds.blog.gov.uk/) is “the strategy is delivery.” Over here, we say “delivery is the strategy,” but we’re both focused on the same thing: Fostering positive change across government by shipping quality digital solutions. Or as Chris Ferguson, Director of GDS’s digital group, recently put it, “Get on with it and demonstrate that you are there to get things done.” -![Chris Ferguson with Hillary Hartley and Phaedra Chrousos]({{site.baseurl}}/assets/blog/gds/2015-visit.jpg) -_Photo courtesy of Ross Dakin, Presidential Innovation Fellow_ - Ferguson and a team from GDS recently spent a week in Washington meeting with teams at 18F, the U.S. Digital Service (USDS), and others in the [federal digital coalition](https://18f.gsa.gov/2015/05/11/moveforward/). The teams shared successes, challenges, and plans for how they will continue to support digital progress in their respective governments. This follows [a summer trip by digital coalition leaders to the UK](https://gds.blog.gov.uk/2015/07/29/same-but-different-a-common-international-approach-to-digital-government/) to share knowledge and seed partnerships across civic technology groups. And it comes on the heels of regular video chats this summer and fall between GDS and 18F content teams to share their latest work, ideas, and problems. During their visit to the nation’s capital, Ferguson sat down for a fireside chat with Phaedra Chrousos, associate administrator for the [Office of Citizen Services and Innovative Technologies 18F](http://www.gsa.gov/portal/category/25729), and Hillary Hartley, deputy director of 18F. Throughout the conversation, all three talked about the importance of putting users at the center of digital public services. diff --git a/_posts/2015-12-29-is-your-project-using-agilefall.md b/_posts/2015-12-29-is-your-project-using-agilefall.md index 69e03a19c..04669b586 100644 --- a/_posts/2015-12-29-is-your-project-using-agilefall.md +++ b/_posts/2015-12-29-is-your-project-using-agilefall.md @@ -9,126 +9,45 @@ tags: - agile - best practices - how we work -excerpt: "At 18F, we’ve spent a lot of time working with -federal agencies and coaching them through the transition to agile, but -on first blush it’s not always easy to tell who’s really adopted agile -versus those who just say they’re agile because they know they’re -supposed to." -description: "At 18F, we’ve spent a lot of time working with -federal agencies and coaching them through the transition to agile, but -on first blush it’s not always easy to tell who’s really adopted agile -versus those who just say they’re agile because they know they’re -supposed to." +excerpt: "At 18F, we’ve spent a lot of time working with federal agencies and coaching them through the transition to agile, but on first blush it’s not always easy to tell who’s really adopted agile versus those who just say they’re agile because they know they’re supposed to." image: --- -Knowing when (or if) your organization has successfully transitioned -fully into an agile methodology can be tricky. Becoming an agile -organization is harder than it looks, and it’s helpful to be able to -identify traditional development practices that can slow down or derail -your quest for agility. At 18F, we’ve spent a lot of time working with -federal agencies and coaching them through the transition to agile, but -on first blush it’s not always easy to tell who’s really adopted agile -versus those who just *say* they’re agile because they know they’re -supposed to. - -This is a critical concern as more and more of our government partners -invest significant time into rethinking their investments in information -technology and the methodology that they and their contracting partners -apply in meeting project goals. It’s not that the goal is to be agile, -it’s that there are improvements in productivity, quality, customer -satisfaction, and time-to-market that we want to achieve by becoming -agile, and to the extent that we fail to become agile, we will fail to -reap those benefits. - -##Understanding agilefall - -Certainly [not a new -concept](http://redmonk.com/cote/2006/05/31/agile-rebellion/), -“agilefall” is the methodology that emerges when managers and -stakeholders attempt to adopt agile practices they understand or feel -they can tolerate, but still prefer that nice, top-down management -approach that a waterfall methodology affords them. (Extreme -simplification: “Waterfall” is about having the predictability of -advance plans and internal processes, “agile” is about having the -flexibility to adapt, learn, and change. For more on the differences -between the two, see [here for agile](https://en.wikipedia.org/wiki/Agile_software_development) and -[here for waterfall](https://en.wikipedia.org/wiki/Waterfall_model).) - -A waterfall methodology relies on defining requirements upfront and then -completing subsequent phases in order. Generally, this approach doesn’t -work well for software development, since it’s incredibly difficult to -understand what the best solution will be if you’ve never built it -before. Agile, on the other hand, focuses on an iterative approach, -placing working code above process. The result is that as the team -learns what kind of product will be most beneficial to users, the team -can rapidly adjust requirements to build a better solution. Iterative -development of software may mean that what was initially envisioned as a -solution and what is developed in the end may look quite different — but -that’s a good thing when it equates to a truly useful, useable product -and happier customers. - -Agilefall is a natural conflation of the two approaches, and can result -in poor outcomes since the structure of it introduces competing -concepts. It’s hard to develop and design iteratively if managers are -expecting to review progress as they always have. (This problem is often -unfairly characterized as micro-managing behavior, but is more fairly -recognized as a natural outcome of traditional business practices.) This -doesn’t mean that a project is necessarily doomed, but it has the -double-whammy effect of neutralizing agile's greatest advantage while -retaining the most frustrating features of waterfall. Some people -describe agile as an attitude and waterfall as a methodology. To -highlight the difference, let’s explore a few examples. - -##Clues your project may follow agilefall - -You may find yourself wondering how far along that agilefall path your -project or organization has wandered. Here are some clues that your -project or organization has adopted agilefall: +Knowing when (or if) your organization has successfully transitioned fully into an agile methodology can be tricky. Becoming an agile organization is harder than it looks, and it’s helpful to be able to identify traditional development practices that can slow down or derail your quest for agility. At 18F, we’ve spent a lot of time working with federal agencies and coaching them through the transition to agile, but on first blush it’s not always easy to tell who’s really adopted agile versus those who just *say* they’re agile because they know they’re supposed to. + +This is a critical concern as more and more of our government partners invest significant time into rethinking their investments in information technology and the methodology that they and their contracting partners apply in meeting project goals. It’s not that the goal is to be agile, it’s that there are improvements in productivity, quality, customer satisfaction, and time-to-market that we want to achieve by becoming agile, and to the extent that we fail to become agile, we will fail to reap those benefits. + +## Understanding agilefall + +Certainly [not a new concept](http://redmonk.com/cote/2006/05/31/agile-rebellion/), “agilefall” is the methodology that emerges when managers and stakeholders attempt to adopt agile practices they understand or feel they can tolerate, but still prefer that nice, top-down management approach that a waterfall methodology affords them. (Extreme simplification: “Waterfall” is about having the predictability of advance plans and internal processes, “agile” is about having the flexibility to adapt, learn, and change. For more on the differences between the two, see [here for agile](https://en.wikipedia.org/wiki/Agile_software_development) and [here for waterfall](https://en.wikipedia.org/wiki/Waterfall_model).) + +A waterfall methodology relies on defining requirements upfront and then completing subsequent phases in order. Generally, this approach doesn’t work well for software development, since it’s incredibly difficult to understand what the best solution will be if you’ve never built it before. Agile, on the other hand, focuses on an iterative approach, placing working code above process. The result is that as the team learns what kind of product will be most beneficial to users, the team can rapidly adjust requirements to build a better solution. Iterative development of software may mean that what was initially envisioned as a solution and what is developed in the end may look quite different — but that’s a good thing when it equates to a truly useful, useable product and happier customers. + +Agilefall is a natural conflation of the two approaches, and can result in poor outcomes since the structure of it introduces competing concepts. It’s hard to develop and design iteratively if managers are expecting to review progress as they always have. (This problem is often unfairly characterized as micro-managing behavior, but is more fairly recognized as a natural outcome of traditional business practices.) This doesn’t mean that a project is necessarily doomed, but it has the double-whammy effect of neutralizing agile's greatest advantage while retaining the most frustrating features of waterfall. Some people describe agile as an attitude and waterfall as a methodology. To highlight the difference, let’s explore a few examples. + +## Clues your project may follow agilefall + +You may find yourself wondering how far along that agilefall path your project or organization has wandered. Here are some clues that your project or organization has adopted agilefall: ### 1. Has nothing changed except the terminology? *Your new Scrummaster (who was called your Project Manager until you “adopted” agile) continues to run the same every-three-months all-hands meeting that previously consisted of executives showing slide decks and talking about their personal goals, but now calls them “retrospectives” instead of “quarterlies”.* -This is a clear sign of agilefall. The project momentum and structure is -unchanged, many of the same productivity and quality challenges exist, -and team members quickly fall into — or never had to change — old -routines. **Simply calling something “agile” or “iterative” does not -make it so**. Agility is more a philosophy than a method anyway. -Elements of agile, like sprint cycles, shouldn’t be co-opted simply as -the new descriptions for the way you achieve your waterfall objectives. -If you find yourself in this position, read on. Help is coming. +This is a clear sign of agilefall. The project momentum and structure is unchanged, many of the same productivity and quality challenges exist, and team members quickly fall into — or never had to change — old routines. **Simply calling something “agile” or “iterative” does not make it so**. Agility is more a philosophy than a method anyway. Elements of agile, like sprint cycles, shouldn’t be co-opted simply as the new descriptions for the way you achieve your waterfall objectives. If you find yourself in this position, read on. Help is coming. ### 2. Is the first “sprint” devoted to writing immutable project requirements? *Your product owner tells you they want a new iOS app for a new initiative. They want you to “use agile” because they’ve heard it helps developers build better things quicker and with fewer problems than waterfall. During your first meeting you begin by documenting all the things managers in the room tell you they want, and then everyone begins building out a schedule (probably called a “sprint cycle”) to build the new app.* -If, during the first meeting, managers in the room are already enforcing -a product roadmap by determining which piece of the product will be -built during Sprint 6 then you’re doing agilefall. Since your users -should be helping you set your product vision and requirements, the idea -that you can infer this with upper management on day one is 100 percent -counter to that notion. In agile, management tells you they think they -need an iOS app for their new initiative. The rest is up to the -prospective users and the team. +If, during the first meeting, managers in the room are already enforcing a product roadmap by determining which piece of the product will be built during Sprint 6 then you’re doing agilefall. Since your users should be helping you set your product vision and requirements, the idea that you can infer this with upper management on day one is 100 percent counter to that notion. In agile, management tells you they think they need an iOS app for their new initiative. The rest is up to the prospective users and the team. ### 3. Speaking of sprints, does everybody assume QA testing happens in the last two? *Quality Assurance testing, user experience testing, and stakeholder review meetings are all scheduled to happen in the final weeks before your launch. When things fail, features are cut in order to make the launch deadline. When user research indicates that features should be added, changed, or eliminated, you make a note of it and tell them it will be in the next iteration if management approves.* -If you don’t test regularly, how will you know what to build? Successful -iterative development relies on testing of the product (both the user -kind and the black-box/white-box kind) throughout the development -process, not just at the end. Testing at the end to ensure the product -that management instructed you to build six months ago doesn’t crash is -neither user testing nor agile, and why do user testing at all if you -can’t change the product before launch? +If you don’t test regularly, how will you know what to build? Successful iterative development relies on testing of the product (both the user kind and the black-box/white-box kind) throughout the development process, not just at the end. Testing at the end to ensure the product that management instructed you to build six months ago doesn’t crash is neither user testing nor agile, and why do user testing at all if you can’t change the product before launch? -The largest failure of agile teams worldwide is the failure to produce -working software every iteration or on a regular, short cadence -(kanban). Working software means tested, potentially shippable software. -This drives the testing regimen. The agilefall sin is to not produce -tested, working software regularly. +The largest failure of agile teams worldwide is the failure to produce working software every iteration or on a regular, short cadence (kanban). Working software means tested, potentially shippable software. This drives the testing regimen. The agilefall sin is to not produce tested, working software regularly. --- @@ -136,24 +55,13 @@ tested, working software regularly. --- -##Help! What should I do? +## Help! What should I do? -If the clues above sound like your organization, it’s probably well -worth your time to invest in an agile coach and training session for -your project managers and company leadership to help them fully adopt an -agile methodology. (You can contact us at -[inquiries18F@gsa.gov](mailto:inquiries18F@gsa.gov) if you’d like our -consulting team to lead workshop for your organization.) +If the clues above sound like your organization, it’s probably well worth your time to invest in an agile coach and training session for your project managers and company leadership to help them fully adopt an agile methodology. (You can contact us at [inquiries18F@gsa.gov](mailto:inquiries18F@gsa.gov) if you’d like our consulting team to lead workshop for your organization.) -We’re aware that upper management is often cast as a pointy-haired -villain in methodology examples. We tend to find this unfair, and -believe rather that the waterfall issues you may encounter in senior -leadership are more the result of old habits than control issues. Upper -management often responds with great enthusiasm to the agile philosophy -once they understand it properly. +We’re aware that upper management is often cast as a pointy-haired villain in methodology examples. We tend to find this unfair, and believe rather that the waterfall issues you may encounter in senior leadership are more the result of old habits than control issues. Upper management often responds with great enthusiasm to the agile philosophy once they understand it properly. -Here are some simple approaches you can use in the meantime to get your -project back on track: +Here are some simple approaches you can use in the meantime to get your project back on track: 1. **Identify barriers and pain points accurately.** Take some time with your team to visually draw out your project dependencies, goals, deadlines and major barriers. Are you missing opportunities in your process to adapt to user feedback? Are certain stakeholders only seeing progress at defined intervals, especially at the beginning and end of your project? Identify blockers and pain points like this and raise them with your team. If these areas are further complicating your development process and sidelining the user’s voice, try to involve key stakeholders throughout the process, and make sure they’re seeing the user feedback throughout the iteration process. Remember that your users are your customers, and if they’re unhappy, your project is unlikely to succeed. Such adjustments should be seen as a rational business decision. @@ -163,7 +71,4 @@ project back on track: For further reading, check out [18F’s Agile Guide](https://pages.18f.gov/agile/). -We’ll discuss some other ways you can get your project back on the agile -path in a future blog post. Have some techniques you’ve used in your -organization to get things back on track? Let us know and we’ll include -some examples from the community. +We’ll discuss some other ways you can get your project back on the agile path in a future blog post. Have some techniques you’ve used in your organization to get things back on track? Let us know and we’ll include some examples from the community. diff --git a/_posts/2015-12-30-turning-learning-up-to-11.md b/_posts/2015-12-30-turning-learning-up-to-11.md index db635ab00..25ecfa8b9 100644 --- a/_posts/2015-12-30-turning-learning-up-to-11.md +++ b/_posts/2015-12-30-turning-learning-up-to-11.md @@ -15,40 +15,17 @@ description: "The feature that distinguishes high-performing organizations acros industries is their ability to facilitate knowledge sharing across the entire organization. This is the first post in a series about the tools and processes we use at 18F to facilitate knowledges sharing." image: /assets/blog/turn-up-to-11/turn-up-to-11.jpg +hero: false --- [![A screenshot from the movie Spinal Tap showing a guitar amp dial that goes up to 11]({{ site.baseurl }}/assets/blog/turn-up-to-11/turn-up-to-11.jpg)](https://en.wikipedia.org/wiki/Up_to_eleven) -The feature that distinguishes high-performing organizations across all -industries is their ability to facilitate knowledge sharing across the -entire organization. Organizations that then put this knowledge to use -to improve how they work have a sustained competitive advantage. -Accomplishing this requires a combination of values, processes, and -tools. +The feature that distinguishes high-performing organizations across all industries is their ability to facilitate knowledge sharing across the entire organization. Organizations that then put this knowledge to use to improve how they work have a sustained competitive advantage. Accomplishing this requires a combination of values, processes, and tools. -I recently had the honor of being invited to speak at the [DevOps -Enterprise Summit 2015](http://devopsenterprise.io/). My talk, -[“Pain Is Over, If You Want It”](http://devopsenterprise.io/sessions/pain-is-over-if-you-want-it/), -was a condensed version of [my previous -“Google and the Government” -talks](https://18f.gsa.gov/2014/12/11/large-scale-development-culture-change/) -with up-to-date information about how the principles outlined in that -talk have played out so far at 18F. Though the talk was not concerned -with the DevOps movement specifically, the core concepts of knowledge -sharing, connecting and empowering people, and instigating cultural -transformation were directly relevant, and echoed throughout every other -presentation at the conference. +I recently had the honor of being invited to speak at the [DevOps Enterprise Summit 2015](http://devopsenterprise.io/). My talk, [“Pain Is Over, If You Want It”](http://devopsenterprise.io/sessions/pain-is-over-if-you-want-it/), was a condensed version of [my previous “Google and the Government” talks](https://18f.gsa.gov/2014/12/11/large-scale-development-culture-change/) with up-to-date information about how the principles outlined in that talk have played out so far at 18F. Though the talk was not concerned with the DevOps movement specifically, the core concepts of knowledge sharing, connecting and empowering people, and instigating cultural transformation were directly relevant, and echoed throughout every other presentation at the conference. -You can view the video of my DOES15 presentation below, as well as -review [the slides for the talk](https://goo.gl/CrCUii). +You can view the video of my DOES15 presentation below, as well as review [the slides for the talk](https://goo.gl/CrCUii). {{ "https://www.youtube-nocookie.com/embed/ahtihwxgriA" | embed: "Mike Bland: Pain is over, if you want it" }} -Throughout my presentation, I drove home the importance of transparency, -autonomy, and collaboration as critical factors in bringing about -organizational culture change, and tied in all the work I and others -have been doing at 18F to bolster each of these. Watch the video above -to get an overview of these concepts, then check back for two more posts -that will go into a little more detail about the tools and processes I -mentioned in the presentation to provide a status update and a sense of -future possibilities. +Throughout my presentation, I drove home the importance of transparency, autonomy, and collaboration as critical factors in bringing about organizational culture change, and tied in all the work I and others have been doing at 18F to bolster each of these. Watch the video above to get an overview of these concepts, then check back for two more posts that will go into a little more detail about the tools and processes I mentioned in the presentation to provide a status update and a sense of future possibilities. diff --git a/_posts/2016-01-04-turning-learning-up-to-11-transparency.md b/_posts/2016-01-04-turning-learning-up-to-11-transparency.md index 4ff878991..b6e8a75f6 100644 --- a/_posts/2016-01-04-turning-learning-up-to-11-transparency.md +++ b/_posts/2016-01-04-turning-learning-up-to-11-transparency.md @@ -8,30 +8,15 @@ tags: - best practices - communication tools and practices - hub -excerpt: "In the second post in this series on how transparency, -autonomy, and collaboration produce -organizational culture change, I describe a few of the -initiatives we’ve undertaken to increase transparency into 18F’s -internal operations." -description: "In the second post in our series on how transparency, -autonomy, and collaboration produce -organizational culture change, we describe a few of the -initiatives we’ve undertaken to increase transparency into 18F’s -internal operations." +excerpt: "In the second post in this series on how transparency, autonomy, and collaboration produce organizational culture change, I describe a few of the initiatives we’ve undertaken to increase transparency into 18F’s internal operations." +description: "In the second post in our series on how transparency, autonomy, and collaboration produce organizational culture change, we describe a few of the initiatives we’ve undertaken to increase transparency into 18F’s internal operations." image: /assets/blog/turn-up-to-11/skeleton-t-shirt.jpg +hero: false --- [![An image of a man wearing a skeleton t-shirt from the movie Spinal Tap]({{ site.baseurl }}/assets/blog/turn-up-to-11/skeleton-t-shirt.jpg)](https://i.ytimg.com/vi/XuzpsO4ErOQ/maxresdefault.jpg)[*“This is my exact inner structure, done in a tee shirt. Exactly medically accurate. See?”*](http://www.imdb.com/title/tt0088258/quotes?item=qt0261729) -In the [first post of this -trilogy](https://18f.gsa.gov/2015/12/30/turning-learning-up-to-11/), I -summarized my DevOps Enterprise 2015 talk that focused on transparency, -autonomy, and collaboration as primary factors in producing -organizational culture change. In this post, I’ll describe a few of the -initiatives we’ve undertaken to increase transparency into 18F’s -internal operations. While primarily for the benefit of our team -members, we hope they will inspire other organizations to adopt similar -models and tools. +In the [first post of this trilogy](https://18f.gsa.gov/2015/12/30/turning-learning-up-to-11/), I summarized my DevOps Enterprise 2015 talk that focused on transparency, autonomy, and collaboration as primary factors in producing organizational culture change. In this post, I’ll describe a few of the initiatives we’ve undertaken to increase transparency into 18F’s internal operations. While primarily for the benefit of our team members, we hope they will inspire other organizations to adopt similar models and tools. 18F Hub and the new 18F Handbook -------------------------------- diff --git a/_posts/2016-01-08-18f-new-years-resolution-be-even-more-open.md b/_posts/2016-01-08-18f-new-years-resolution-be-even-more-open.md index bc13f4be0..e70921283 100644 --- a/_posts/2016-01-08-18f-new-years-resolution-be-even-more-open.md +++ b/_posts/2016-01-08-18f-new-years-resolution-be-even-more-open.md @@ -11,6 +11,7 @@ tags: excerpt: "We've been thinking a lot lately about our role within the open source community, and it's our 2016 resolution to increase the number of non-employee contributors to our projects, including: contributors with little previous experience with open source, and contributors to documentation, bug filing, and other non-coding work." description: "We've been thinking a lot lately about our role within the open source community, and it's our 2016 resolution to increase the number of non-employee contributors to our projects, including: contributors with little previous experience with open source, and contributors to documentation, bug filing, and other non-coding work." image: /assets/blog/open-source/documentation.jpg +hero: false --- Ah, a brand new year. Time to [reflect on the diff --git a/_posts/2016-01-11-introducing-the-css-coding-style-guide.md b/_posts/2016-01-11-introducing-the-css-coding-style-guide.md index b8a9e2744..814200d69 100644 --- a/_posts/2016-01-11-introducing-the-css-coding-style-guide.md +++ b/_posts/2016-01-11-introducing-the-css-coding-style-guide.md @@ -21,8 +21,6 @@ tags: 18F is releasing our [CSS coding style guide](https://pages.18f.gov/frontend/css-coding-styleguide/), which specifies our best practices and rules for writing consistent, maintainable CSS code. It was built with extensive user research to ensure we accurately understood the problems our developers were facing and to match them up with conventions in the public frontend community. -![screenshot: css from css guide]({{ site.baseurl }}/assets/blog/css-guide/css-guide.png) - ## What’s in the guide The guide uses two approaches to improving CSS code at 18F: a written guide and a linter to automatically check code for compliance to our guidelines. diff --git a/_posts/2016-01-15-micro-purchase-auctions-round-2-what-we-learned.md b/_posts/2016-01-15-micro-purchase-auctions-round-2-what-we-learned.md index d5ee31139..6a15e4480 100644 --- a/_posts/2016-01-15-micro-purchase-auctions-round-2-what-we-learned.md +++ b/_posts/2016-01-15-micro-purchase-auctions-round-2-what-we-learned.md @@ -11,6 +11,7 @@ tags: excerpt: "The auctions have closed, the bids are in, the winners are off coding, and some already have been paid. Let’s look at some early lessons from our latest round of micro-purchase auctions." description: "The auctions have closed, the bids are in, the winners are off coding, and some already have been paid. Let’s look at some early lessons from our latest round of micro-purchase auctions." image: /assets/blog/micro-purchase/closed-auctions.jpg +hero: false --- ![A screenshot of two closed auctions]({{ site.baseurl }}/assets/blog/micro-purchase/closed-auctions.jpg) diff --git a/_posts/2016-01-21-what-we-can-learn-from-the-interiors-social-feeds.md b/_posts/2016-01-21-what-we-can-learn-from-the-interiors-social-feeds.md index e835387a1..e7884f46d 100644 --- a/_posts/2016-01-21-what-we-can-learn-from-the-interiors-social-feeds.md +++ b/_posts/2016-01-21-what-we-can-learn-from-the-interiors-social-feeds.md @@ -10,6 +10,7 @@ tags: excerpt: "One of my favorite projects is the U.S. Department of the Interior's work on social media. I recently asked Rebecca Matulka, the senior digital media strategist for Interior what she’s learned while running an online community that helps Interior achieve its larger strategic goals." description: "One of my favorite projects is the U.S. Department of the Interior's work on social media. I recently asked Rebecca Matulka, the senior digital media strategist for Interior what she’s learned while running an online community that helps Interior achieve its larger strategic goals." image: /assets/blog/interior/interior-deer.jpg +hero: false ---

diff --git a/_posts/2016-02-09-tips-for-capturing-the-best-data-from-user-interviews.md b/_posts/2016-02-09-tips-for-capturing-the-best-data-from-user-interviews.md index b14c53bad..c163dcccd 100644 --- a/_posts/2016-02-09-tips-for-capturing-the-best-data-from-user-interviews.md +++ b/_posts/2016-02-09-tips-for-capturing-the-best-data-from-user-interviews.md @@ -10,179 +10,61 @@ tags: - tools you can use - communication tools and practices -excerpt: "User interviews are, at a minimum, an opportunity for you to ask your -intended audience about their expectations, what their needs are and to -get direct feedback on the work you’ve done so far or on what you plan -to do. But an interview is only as good as the data you get out of it." -description: "In this blog post, we’ve detailed some of the -steps we take to help capture the best data possible when conducting -user interviews. This post is intended as a guide for people who need to -conduct user interviews and for people simply curious about how we work." +excerpt: "User interviews are, at a minimum, an opportunity for you to ask your intended audience about their expectations, what their needs are and to get direct feedback on the work you’ve done so far or on what you plan to do. But an interview is only as good as the data you get out of it." +description: "In this blog post, we’ve detailed some of the steps we take to help capture the best data possible when conducting user interviews. This post is intended as a guide for people who need to conduct user interviews and for people simply curious about how we work." image: /assets/blog/user-interview/note-taking.jpg --- -![A group taking notes at a table](/assets/blog/user-interview/note-taking.jpg) - -[User -research](http://www.usability.gov/what-and-why/user-research.html) is -part of every project we work on at 18F, and interviews are a core -component of that process. In this blog post, we’ve detailed some of the -steps we take to help capture the best data possible when conducting -interviews. This post is intended as a guide for people who need to -conduct user interviews and for people simply curious about how we work. - -Interviews are, at a minimum, an opportunity for you to ask your -intended audience about their expectations, what their needs are, and to -get direct feedback on the work you’ve done so far or on what you plan -to do. But an interview is only as good as the data you get out of it. - -While note-taking during user interviews might seem straightforward, -putting some thought into the process can help you gather the most -useful data. There are a number of things one can do to ensure the most -useful information makes its way back to your team for further analysis. -Below is list of ideas and practices for note-taking during interviews -to maximize the information that comes out of them. - -1. Know what you want to capture --------------------------------- - -The key to taking notes during user interviews is capturing the right -information. And capturing the right information, if you’re not -prepared, can be harder than you might think. It’s important to gather -the interviewee’s behaviors, attitudes, and experience with the set of -tools or problems you present in the interview. This is because the -information gathered in a user interview will be used later in the -process to answer questions and solve problems as the product is being -built and finalized. This means that you don’t have to act like a court -stenographer and transcribe everything said by everyone in the room. -Instead, **you should capture only the quotes and parts of the -discussion that are relevant to your research**. - -Being comprehensive will take on a slightly different meaning in these -situations. However, that’s not to say you should ignore everything -else. If it’s your first time taking notes during an interview, you’ll -likely be eager to capture everything and miss nothing, which could lead -to you furiously taking notes but still missing context or the nuance in -what a subject is saying. - -If you go into a interview knowing what information you’re looking for, -you’ll know what to capture in the written notes and spend less time on -bits of information that are less relevant. Having this confidence won’t -just make the notes more useful, but might also remove distracting -elements. - -2. Get your questions ready ---------------------------- - -Have prompts ready before you go into the interview to understand what -you need to capture. It’s good practice to write your prompts down — it -will keep you from forgetting them and will keep you on track. You’ll -want the interviewees to feel comfortable while making the conversations -you have be as productive as possible, so having to pause often and say, -“*um, there was something else I wanted to ask but I’m forgetting*,” can -make things more awkward than having to glance at a notebook from time -to time. - -3. Designate a note taker -------------------------- - -If possible, have a dedicated note taker who is not also the dedicated -interviewer. Make it possible for other people on your team to hear or -observe the interview. Using Google Hangouts, appear.in, or a simple -conference service can help facilitate this and keep the number of -people physically in the room to a minimum. Allowing others to get a -feel for the mood and tone in the room during interviews can help put -notes into context later. Designating a note-taker can also be a good -way for someone to become acquainted with user research if they are new -to the field. - -4. Use and prepare tools to make note-taking easier ---------------------------------------------------- - -Capturing notes in places like spreadsheets or other types of electronic -forms can help you stay organized and act as a cue for what areas you -still need to cover. Practically speaking, this means to capture -interview notes into the cells of spreadsheets where questions and -prompts are preloaded into the columns. If you’re spreadsheet averse, -simply using the interview guide you prepared as a note-taking template -can be helpful as well. - -5. Capture verbatim notes and interpretations separately --------------------------------------------------------- - -When capturing interviews, be clear about when what you’re writing down -is your interpretation versus what the subject actually said. For -instance, when you observe a person to be happy or uncomfortable with an -idea and you write that down, denote that interpretation by placing -brackets around the text. When you can, capture direct quotes and use -quotation marks to communicate that the text is from the subject -verbatim. Direct quotations are very useful. In addition to them adding -reliability to the information gathered, they also help people -understand the context and mood in which things were said. - -6. Make analysis easier by annotating along the way ---------------------------------------------------- - -Star or otherwise highlight quotes or observations you think are -valuable so that you can easily find them later. Midway through a -project, you can often start tagging observations with themes as you -write. - -7. Don’t forget body language! ------------------------------- - -Noting non-verbal signals can be very helpful when interpreting quotes -or paraphrases. When the interview participant says, “Well, that was -fun!” the quote means something very different depending on whether the -words are accompanied by a smile or a sigh. Smiling, nodding, pausing, -tensing up, or gesturing quickly are all examples of non-verbal signals -that help us interpret what an interviewee really means. Feel free to -note the body language you’re witnessing along with what’s actually -being said, and if you’re unsure about how a person reacted to the -interview questions, talk with teammates who observed the interview -along with you. - -8. Consider privacy from the beginning --------------------------------------- - -If your notes are going to be visible to your entire organization, take -a moment to think about whether there is personally identifiable -information (PII) in them that’s not absolutely necessary. Be sure to -strip out any PII as soon as the research phase is completed. This is -especially true if you’re researching a subject that is sensitive or -potentially stigmatizing. One common practice is to separate PII from -notes by putting all the contact information in a separate spreadsheet -and labelling notes with pseudonyms or code numbers. Make sure to scrub -the body of the notes for any specific references which could -de-anonymize them, such as place of employment if they work at a small -company. Clearly specify in your notes, at time of writing, any -information that participants want to keep confidential. It’s easy to -forget to do this later, and you don’t want to make mistakes. - -9. Be cool ----------- - -If you get behind, don’t get flustered. Even seasoned user researchers -will have trouble keeping up with all the information coming in. While -it’s hard to solve this particular problem for everyone, doing your best -to be prepared will help you efficiently capture everything you’ve set -out to collect. - -10. Do your best to not cause distractions ------------------------------------------- - -Try to keep a low profile and try not to distract the interviewee or -interviewer. Especially try to keep laptops and typing as inconspicuous -as possible. If you’re in a position where you’re both interviewing and -note-taking, try to make sure the laptop doesn’t form a barrier between -you and the interview subject. - -11. Be sure to debrief ----------------------- - -Work with the interviewer to identify key takeaways immediately after -the interview. While the interview is still fresh in your mind, talk -about the things that you found pertinent or interesting, and record -these as such. Also record follow-up questions or document and material -requests that the subject offered, and note whether these are -forthcoming or you’ve already received them. +[User research](http://www.usability.gov/what-and-why/user-research.html) is part of every project we work on at 18F, and interviews are a core component of that process. In this blog post, we’ve detailed some of the steps we take to help capture the best data possible when conducting interviews. This post is intended as a guide for people who need to conduct user interviews and for people simply curious about how we work. + +Interviews are, at a minimum, an opportunity for you to ask your intended audience about their expectations, what their needs are, and to get direct feedback on the work you’ve done so far or on what you plan to do. But an interview is only as good as the data you get out of it. + +While note-taking during user interviews might seem straightforward, putting some thought into the process can help you gather the most useful data. There are a number of things one can do to ensure the most useful information makes its way back to your team for further analysis. Below is a list of ideas and practices for note-taking during interviews to maximize the information that comes out of them. + +## 1. Know what you want to capture + +The key to taking notes during user interviews is capturing the right information. And capturing the right information, if you’re not prepared, can be harder than you might think. It’s important to gather the interviewee’s behaviors, attitudes, and experience with the set of tools or problems you present in the interview. This is because the information gathered in a user interview will be used later in the process to answer questions and solve problems as the product is being built and finalized. This means that you don’t have to act like a court stenographer and transcribe everything said by everyone in the room. Instead, **you should capture only the quotes and parts of the discussion that are relevant to your research**. + +Being comprehensive will take on a slightly different meaning in these situations. However, that’s not to say you should ignore everything else. If it’s your first time taking notes during an interview, you’ll likely be eager to capture everything and miss nothing, which could lead to you furiously taking notes but still missing context or the nuance in what a subject is saying. + +If you go into a interview knowing what information you’re looking for, you’ll know what to capture in the written notes and spend less time on bits of information that are less relevant. Having this confidence won’t just make the notes more useful, but might also remove distracting elements. + +## 2. Get your questions ready + +Have prompts ready before you go into the interview to understand what you need to capture. It’s good practice to write your prompts down — it will keep you from forgetting them and will keep you on track. You’ll want the interviewees to feel comfortable while making the conversations you have be as productive as possible, so having to pause often and say, “*um, there was something else I wanted to ask but I’m forgetting*,” can make things more awkward than having to glance at a notebook from time to time. + +## 3. Designate a note taker + +If possible, have a dedicated note taker who is not also the dedicated interviewer. Make it possible for other people on your team to hear or observe the interview. Using Google Hangouts, appear.in, or a simple conference service can help facilitate this and keep the number of people physically in the room to a minimum. Allowing others to get a feel for the mood and tone in the room during interviews can help put notes into context later. Designating a note-taker can also be a good way for someone to become acquainted with user research if they are new to the field. + +## 4. Use and prepare tools to make note-taking easier + +Capturing notes in places like spreadsheets or other types of electronic forms can help you stay organized and act as a cue for what areas you still need to cover. Practically speaking, this means to capture interview notes into the cells of spreadsheets where questions and prompts are preloaded into the columns. If you’re spreadsheet averse, simply using the interview guide you prepared as a note-taking template can be helpful as well. + +## 5. Capture verbatim notes and interpretations separately + +When capturing interviews, be clear about when what you’re writing down is your interpretation versus what the subject actually said. For instance, when you observe a person to be happy or uncomfortable with an idea and you write that down, denote that interpretation by placing brackets around the text. When you can, capture direct quotes and use quotation marks to communicate that the text is from the subject verbatim. Direct quotations are very useful. In addition to them adding reliability to the information gathered, they also help people understand the context and mood in which things were said. + +## 6. Make analysis easier by annotating along the way + +Star or otherwise highlight quotes or observations you think are valuable so that you can easily find them later. Midway through a project, you can often start tagging observations with themes as you write. + +## 7. Don’t forget body language! + +Noting non-verbal signals can be very helpful when interpreting quotes or paraphrases. When the interview participant says, “Well, that was fun!” the quote means something very different depending on whether the words are accompanied by a smile or a sigh. Smiling, nodding, pausing, tensing up, or gesturing quickly are all examples of non-verbal signals that help us interpret what an interviewee really means. Feel free to note the body language you’re witnessing along with what’s actually being said, and if you’re unsure about how a person reacted to the interview questions, talk with teammates who observed the interview along with you. + +## 8. Consider privacy from the beginning + +If your notes are going to be visible to your entire organization, take a moment to think about whether there is personally identifiable information (PII) in them that’s not absolutely necessary. Be sure to strip out any PII as soon as the research phase is completed. This is especially true if you’re researching a subject that is sensitive or potentially stigmatizing. One common practice is to separate PII from notes by putting all the contact information in a separate spreadsheet and labelling notes with pseudonyms or code numbers. Make sure to scrub the body of the notes for any specific references which could de-anonymize them, such as place of employment if they work at a small company. Clearly specify in your notes, at time of writing, any information that participants want to keep confidential. It’s easy to forget to do this later, and you don’t want to make mistakes. + +## 9. Be cool + +If you get behind, don’t get flustered. Even seasoned user researchers will have trouble keeping up with all the information coming in. While it’s hard to solve this particular problem for everyone, doing your best to be prepared will help you efficiently capture everything you’ve set out to collect. + +## 10. Do your best to not cause distractions + +Try to keep a low profile and try not to distract the interviewee or interviewer. Especially try to keep laptops and typing as inconspicuous as possible. If you’re in a position where you’re both interviewing and note-taking, try to make sure the laptop doesn’t form a barrier between you and the interview subject. + +## 11. Be sure to debrief + +Work with the interviewer to identify key takeaways immediately after the interview. While the interview is still fresh in your mind, talk about the things that you found pertinent or interesting, and record these as such. Also record follow-up questions or document and material requests that the subject offered, and note whether these are forthcoming or you’ve already received them. diff --git a/_posts/2016-02-18-analytics.usa.gov-agency-specific-dashboards.md b/_posts/2016-02-18-analytics.usa.gov-agency-specific-dashboards.md index d1d007ae6..a0949ca3e 100644 --- a/_posts/2016-02-18-analytics.usa.gov-agency-specific-dashboards.md +++ b/_posts/2016-02-18-analytics.usa.gov-agency-specific-dashboards.md @@ -14,6 +14,7 @@ tags: excerpt: "We’ve added agency-specific dashboards to analytics.usa.gov! Starting today, you’ll see a dropdown from the main analytics.usa.gov page that allows you to view the same dashboard, but filtered for websites that are administered by one of 10 specific agencies." description: "We’ve added agency-specific dashboards to analytics.usa.gov! Starting today, you’ll see a dropdown from the main analytics.usa.gov page that allows you to view the same dashboard, but filtered for websites that are administered by one of 10 specific agencies." image: /assets/blog/dap/analytics-commerce.jpg +hero: false --- We’ve added agency-specific dashboards to diff --git a/_posts/2016-03-02-strategies-people-use-when-interacting-with-the-federal-government.md b/_posts/2016-03-02-strategies-people-use-when-interacting-with-the-federal-government.md index 9af45b06e..49aceae00 100644 --- a/_posts/2016-03-02-strategies-people-use-when-interacting-with-the-federal-government.md +++ b/_posts/2016-03-02-strategies-people-use-when-interacting-with-the-federal-government.md @@ -16,6 +16,7 @@ tags: excerpt: "Over the next two weeks, we’re publishing a full report with findings from our research to better understand the public's overall experience interacting with the federal government and their attitudes about sharing information with government agencies. In today’s installment, we detail the strategies people use when interacting with the government." description: "Over the next two weeks, we’re publishing a full report with findings from our research to better understand the public's overall experience interacting with the federal government and their attitudes about sharing information with government agencies. In today’s installment, we detail the strategies people use when interacting with the government." image: /assets/blog/federal-front-door/ffd-microsite.jpg +hero: false --- diff --git a/_posts/2016-03-03-five-questions-for-the-nasa-chief-historian.md b/_posts/2016-03-03-five-questions-for-the-nasa-chief-historian.md index 7f3e35f89..6a4f75f22 100644 --- a/_posts/2016-03-03-five-questions-for-the-nasa-chief-historian.md +++ b/_posts/2016-03-03-five-questions-for-the-nasa-chief-historian.md @@ -13,11 +13,7 @@ image: /assets/blog/nasa-historian/space.jpg NASA’s design choices — in particular, their iconic [“meatball”](http://history.nasa.gov/meatball.htm) and [“worm”](http://www.nasa.gov/audience/forstudents/5-8/features/symbols-of-nasa.html) logos — have long been a source of public fascination, and no one is better aware of this than Dr. Bill Barry. Barry has served as NASA’s Chief Historian since 2010. His tenure with NASA began in 2001; prior to his current role, he served as NASA’s European Representative at the United States Embassy in Paris and as a Senior International Programs Specialist in NASA’s Office of External Relations. -18F Design Presents is extremely happy to be welcoming Dr. Barry to the 18F headquarters on Friday, March 4, for a discussion of NASA’s logos and the importance of design to government missions. In preparation for the event, we had an email conversation with Dr. Barry about the meatball (and more). Read on for the full conversation. - -![A picture taken from the International Space station showing the Eastern seaboard of the United States]({{site.baseurl}}/assets/blog/nasa-historian/space.jpg) - -*** +18F Design Presents is extremely happy to be welcoming Dr. Barry to the 18F headquarters on Friday, March 4, for a discussion of NASA’s logos and the importance of design to government missions. In preparation for the event, we had an email conversation with Dr. Barry about the meatball (and more). Read on for the full conversation. **Kate Garklavs**: NASA switched from “the meatball” logo, pictured here: From 8607049ffe5db2adc3327f7a92aebf46885d763a Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 00:58:31 -0600 Subject: [PATCH 22/79] add more tests to rspec --- _plugins/utility.rb | 22 +++---- spec/_plugins/utlity_spec.rb | 95 +++++++++++++++++++++++----- spec/_posts/project_page.rb | 116 +++++++++++++++++++++++++++++++++++ 3 files changed, 205 insertions(+), 28 deletions(-) create mode 100644 spec/_posts/project_page.rb diff --git a/_plugins/utility.rb b/_plugins/utility.rb index 774a2b835..64d1039fe 100644 --- a/_plugins/utility.rb +++ b/_plugins/utility.rb @@ -26,8 +26,13 @@ def hash_link(str) end end + def matches_url(page_url, url) + page_url = clip_char(page_url.to_s.downcase, '/') + url = clip_char(url.to_s.downcase, '/') + page_url == url || nil + end + def matches_collections(page, nav_item) - binding.pry returned_page = nil collections = nav_item['collections'] || nil if collections @@ -38,14 +43,15 @@ def matches_collections(page, nav_item) returned_page end - def matches_url(page_url, url) - page_url = clip_char(page_url.to_s.downcase, '/') - url = clip_char(url.to_s.downcase, '/') - page_url == url || nil + def matches_permalink_alt(page_url, item) + url_alt = item['permalink_alt'] + url_alt = clip_char(url_alt.to_s.downcase, '/') + page_url[0...url_alt.length] == url_alt || nil end def matches_url_parent(page, item) is_match = matches_collections(page, item) + if !is_match url = item['permalink'] page_url = page['url'] @@ -62,12 +68,6 @@ def matches_url_parent(page, item) end end - def matches_permalink_alt(page_url, item) - url_alt = item['permalink_alt'] - url_alt = clip_char(url_alt.to_s.downcase, '/') - page_url[0...url_alt.length] == url_alt || nil - end - def crawl_pages(item, page_url, _debug) if matches_url(page_url, item['permalink']) # puts "found #{item['text'].inspect}" diff --git a/spec/_plugins/utlity_spec.rb b/spec/_plugins/utlity_spec.rb index f6c88df2f..7e300c517 100644 --- a/spec/_plugins/utlity_spec.rb +++ b/spec/_plugins/utlity_spec.rb @@ -10,17 +10,38 @@ class UtilityClass @utility_class.extend(Jekyll::Utility) @nav_item = { - "text": "What we deliver", - "href": "pages/what-we-deliver.md", - "permalink": "/what-we-deliver/", - "in_menu": true, - "in_drawer": true, - "in_footer": true, - "children": nil + "text" => "Blog", + "href" => "blog/index.html", + "permalink" => "/blog/", + "permalink_alt" => "/blog/", + "in_menu" => true, + "in_drawer" => true, + "in_footer" => true, + "children" => nil } - @baseurl = Jekyll.sites[0].config['baseurl'] - @collections = Jekyll.sites[0].collections - @posts = @collections['posts'] + + @project_nav_item = { + "text" => "Project", + "href" => "project/fec-gov/index.html", + "permalink" => "/project/fec-gov/", + "permalink_alt" => "/project/", + "in_menu" => true, + "in_drawer" => true, + "in_footer" => true, + "children" => nil + } + # binding.pry + @nav_item_with_collection = @nav_item.dup + @nav_item_with_multiple_collections = @nav_item.dup + @nav_item_with_collection['collections'] = [] + @nav_item_with_multiple_collections['collections'] = [] + @nav_item_with_collection['collections'] << 'posts' + @nav_item_with_multiple_collections['collections'] << 'posts' + + @first_post = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/page.rb'))) + @project_page = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/project_page.rb'))) + @post_url = @first_post['url'] + @post_url = @utility_class.clip_char(@post_url.to_s.downcase, '/') end describe '#clip_char' do context 'single parameter, string' do @@ -87,14 +108,54 @@ class UtilityClass end describe '#matches_collections' do - it 'strips forward slashes' do + it 'returns nil if the nav_item does not have an associated collection' do + actual = @utility_class.matches_collections(@first_post, @nav_item) + expect(actual).to be_nil + end - first_post = @posts.docs[0] - f_p = @posts[0] - binding.pry - expect(@utility_class.matches_url('/text/', 'text')).to be true - expect(@utility_class.matches_url('/text', 'text')).to be true - expect(@utility_class.matches_url('text/', 'text')).to be true + it 'returns true if the nav_item does not have an associated collection' do + actual = @utility_class.matches_collections(@first_post, @nav_item_with_collection) + expect(actual).to be true + end + + it 'returns true if the nav_item does not have an associated collection' do + actual = @utility_class.matches_collections(@first_post, @nav_item_with_multiple_collections) + expect(actual).to be true + end + end + + describe '#matches_permalink_alt' do + it 'returns true if the url matches the nav item' do + actual = @utility_class.matches_permalink_alt('blog', @nav_item) + expect(actual).to be true + end + + it 'does not match if the url does not match the nav item' do + actual = @utility_class.matches_permalink_alt(@post_url, @nav_item) + expect(actual).to be_nil + end + + it "matches a nav_item 'permalink_alt' with a post's 'url'" do + actual = @utility_class.matches_permalink_alt('/something-else/', @nav_item) + expect(actual).to be_nil + end + end + + describe '#matches_url_parent' do + it 'checks if the post matches the nav item' do + actual = @utility_class.matches_url_parent(@first_post, @nav_item) + expect(actual).to be_nil + + actual = @utility_class.matches_url_parent(@project_page, @project_nav_item) + expect(actual).to be true + end + + it 'checks if the post matches the nav item with a collection attribtue' do + actual = @utility_class.matches_url_parent(@first_post, @nav_item_with_collection) + expect(actual).to be true + + actual = @utility_class.matches_url_parent(@project_page, @project_nav_item) + expect(actual).to be true end end end diff --git a/spec/_posts/project_page.rb b/spec/_posts/project_page.rb new file mode 100644 index 000000000..9c75fd3cf --- /dev/null +++ b/spec/_posts/project_page.rb @@ -0,0 +1,116 @@ +{ + "next": { + "next": nil, + "path": "_projects/hhs-states.md", + "output": nil, + "previous": { + "next": { + "path": "_projects/hhs-states.md", + "url": "/project/hhs-states/", + "id": "/project/hhs-states", + "relative_path": "_projects/hhs-states.md", + "collection": "projects", + "draft": false, + "categories": [ + + ], + "layout": "project-tag-results", + "project-type": "Partner", + "title": "Health and Human Services", + "subtitle": "Helping states update crucial systems", + "image": "/assets/img/projects/hero_stateandlocal.png", + "image_accessibility": "Grayscale photograph of eleven people meeting in small groups during a workshop", + "tags": [ + "state and local practice" + ], + "expiration_date": nil, + "github_repo": nil, + "project_url": nil, + "slug": "hhs-states", + "ext": ".md", + "date": "2017-01-05 00:52:51 -0600" + }, + "path": "_projects/fec-gov.md", + "output": nil, + "previous": nil, + "content": "\n\nThe Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections.\n\nThe FEC has published campaign finance data for decades, but their legacy website was dense and hard to use. They wanted to make it easier for journalists, transparency groups, and members of the public to use their data and learn how money flows through federal campaigns.\n\n### Start small, learn together\n\nWe started by working with the FEC to launch an API (application programming interface), which allows technical users (like journalists) to access data in a predictable way.\n\nNext, we launched a [public beta](https://beta.fec.gov), which allowed us to get feedback from real users and build new features based on what we learned.\n\nAs our FEC partners saw the benefits of working iteratively and putting user needs first, they asked us to work alongside them to solve other problems, including:\n\n- Creating search tools so laws, regulations, and enforcement actions are easier to find and use.\n- Migrating confusing legacy content into a new structure so visitors can find and understand the information they need.\n- Exploring how to update the online filing process to help political groups and candidates file the right forms.\n\nThrough all these projects, we’ve worked closely with FEC teams so they can transform their whole approach to interacting with the public online.\n\nIn the words of one product owner at the FEC: “We didn’t know where to start, but in the end, we got so much more than a website. We had a complete culture change about how to do user-centered design and agile.”\n", + "url": "/project/fec-gov/", + "id": "/project/fec-gov", + "relative_path": "_projects/fec-gov.md", + "collection": "projects", + "excerpt": "We helped the FEC make it easier for journalists and members of the public to use their data.", + "draft": false, + "categories": [ + + ], + "layout": "project-tag-results", + "project-type": "Project", + "title": "The Federal Election Commission", + "subtitle": "Making campaign data easier to use", + "image": "/assets/img/home/hero-fec.png", + "image_accessibility": "Image of the FEC data explorer with stylized magnifying glass.", + "tags": [ + "fec.gov" + ], + "expiration_date": nil, + "github_repo": "https://github.com/18F/openFEC-web-app", + "project_url": "https://beta.fec.gov/", + "slug": "fec-gov", + "ext": ".md", + "date": "2017-01-05 00:52:51 -0600" + }, + "content": "Health and Human Services (HHS) is a federal agency, but many crucial HHS programs — like Medicaid — are administered by states.\n\nHHS encourages states to upgrade legacy systems by offering funding incentives, but many states struggle to manage risk and build usable systems while navigating federal and state contracting rules. HHS hired 18F to step in and help states set these projects up for success through the technology acquisition process.\n\n### Reducing risk by breaking up contracts\n\nIn our first project with HHS, we helped California get on the right path to buying a new system for child welfare case management by facilitating a two-day workshop to break a monolithic contract into smaller pieces (along with colleagues from California’s Department of Social Services, the Office of Systems Integration, and Code for America).\n\nNext, HHS asked us to work with other states who needed to procure case management systems for child welfare. We also began applying what we learned to a new challenge: working with the Centers for Medicare and Medicaid Systems (also within HHS) to support states who were upgrading Medicaid data systems.", + "url": "/project/hhs-states/", + "id": "/project/hhs-states", + "relative_path": "_projects/hhs-states.md", + "collection": "projects", + "excerpt": "HHS hired 18F to help states implement current best practices and upgrade legacy systems.", + "draft": false, + "categories": [ + + ], + "layout": "project-tag-results", + "project-type": "Partner", + "title": "Health and Human Services", + "subtitle": "Helping states update crucial systems", + "image": "/assets/img/projects/hero_stateandlocal.png", + "image_accessibility": "Grayscale photograph of eleven people meeting in small groups during a workshop", + "tags": [ + "state and local practice" + ], + "expiration_date": nil, + "github_repo": nil, + "project_url": nil, + "slug": "hhs-states", + "ext": ".md", + "date": "2017-01-05 00:52:51 -0600" + }, + "path": "_projects/fec-gov.md", + "output": nil, + "previous": nil, + "content": "\n\nThe Federal Election Commission (FEC) regulates how candidates and political groups raise and spend money in federal elections.\n\nThe FEC has published campaign finance data for decades, but their legacy website was dense and hard to use. They wanted to make it easier for journalists, transparency groups, and members of the public to use their data and learn how money flows through federal campaigns.\n\n### Start small, learn together\n\nWe started by working with the FEC to launch an API (application programming interface), which allows technical users (like journalists) to access data in a predictable way.\n\nNext, we launched a [public beta](https://beta.fec.gov), which allowed us to get feedback from real users and build new features based on what we learned.\n\nAs our FEC partners saw the benefits of working iteratively and putting user needs first, they asked us to work alongside them to solve other problems, including:\n\n- Creating search tools so laws, regulations, and enforcement actions are easier to find and use.\n- Migrating confusing legacy content into a new structure so visitors can find and understand the information they need.\n- Exploring how to update the online filing process to help political groups and candidates file the right forms.\n\nThrough all these projects, we’ve worked closely with FEC teams so they can transform their whole approach to interacting with the public online.\n\nIn the words of one product owner at the FEC: “We didn’t know where to start, but in the end, we got so much more than a website. We had a complete culture change about how to do user-centered design and agile.”\n", + "url": "/project/fec-gov/", + "id": "/project/fec-gov", + "relative_path": "_projects/fec-gov.md", + "collection": "projects", + "excerpt": "We helped the FEC make it easier for journalists and members of the public to use their data.", + "draft": false, + "categories": [ + + ], + "layout": "project-tag-results", + "project-type": "Project", + "title": "The Federal Election Commission", + "subtitle": "Making campaign data easier to use", + "image": "/assets/img/home/hero-fec.png", + "image_accessibility": "Image of the FEC data explorer with stylized magnifying glass.", + "tags": [ + "fec.gov" + ], + "expiration_date": nil, + "github_repo": "https://github.com/18F/openFEC-web-app", + "project_url": "https://beta.fec.gov/", + "slug": "fec-gov", + "ext": ".md", + "date": "2017-01-05 00:52:51 -0600" +} From 898e317314915e9fe9490ec7678377f00ffbd743 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 10:42:06 -0600 Subject: [PATCH 23/79] #crawl_pages --- _plugins/author.rb | 4 ++-- _plugins/utility.rb | 11 ++++------ spec/_plugins/utlity_spec.rb | 41 +++++++++++++++++++++++++++++++++++- 3 files changed, 46 insertions(+), 10 deletions(-) diff --git a/_plugins/author.rb b/_plugins/author.rb index dd0140a12..117e7d67f 100755 --- a/_plugins/author.rb +++ b/_plugins/author.rb @@ -95,7 +95,7 @@ def lookup(input, args) if data[input] # if there's an entry for input, return the value data[input][key] else # if not, exit with a "no such author error" - puts "L 97 author.rb: No such author: #{input} in #{@page_path}" + puts "author.rb#lookup: No such author: #{input} in #{@page_path}".red False end end @@ -143,7 +143,7 @@ def team_link(input) if full_name full_name else - puts "L 143 author.rb: No such author: #{input} in #{@page_path}" + puts "author.rb#team_link: No such author: #{input} in #{@page_path}".red end else name = authors[index].data['name'].downcase diff --git a/_plugins/utility.rb b/_plugins/utility.rb index 64d1039fe..ffbe23985 100644 --- a/_plugins/utility.rb +++ b/_plugins/utility.rb @@ -3,6 +3,7 @@ module Jekyll module Utility + attr_reader :match def clip_char(str, char = '-') str = str.to_s @@ -68,16 +69,12 @@ def matches_url_parent(page, item) end end - def crawl_pages(item, page_url, _debug) + def crawl_pages(item, page_url) if matches_url(page_url, item['permalink']) - # puts "found #{item['text'].inspect}" @match = item - # puts "setting @match to #{@match['text'].inspect} for #{_debug.inspect}" elsif item['children'] - # puts "skipping #{item['text'].inspect}" item['children'].each do |child| - # puts "recurse for #{child['text'].inspect}" - crawl_pages(child, page_url, child['text']) + crawl_pages(child, page_url) end end end @@ -86,7 +83,7 @@ def find_page(page_url, nav_items) unless @match nav_items.each do |item| break if @match - crawl_pages(item, page_url, item['text']) + crawl_pages(item, page_url) end end @match diff --git a/spec/_plugins/utlity_spec.rb b/spec/_plugins/utlity_spec.rb index 7e300c517..2ff0487eb 100644 --- a/spec/_plugins/utlity_spec.rb +++ b/spec/_plugins/utlity_spec.rb @@ -21,7 +21,7 @@ class UtilityClass } @project_nav_item = { - "text" => "Project", + "text" => "fec-gov", "href" => "project/fec-gov/index.html", "permalink" => "/project/fec-gov/", "permalink_alt" => "/project/", @@ -30,6 +30,19 @@ class UtilityClass "in_footer" => true, "children" => nil } + + @project_nav_item_children = { + "text" => "Project", + "href" => "project/index.html", + "permalink" => "/project/", + "permalink_alt" => "/project/", + "in_menu" => true, + "in_drawer" => true, + "in_footer" => true, + "children" => [ + @project_nav_item + ] + } # binding.pry @nav_item_with_collection = @nav_item.dup @nav_item_with_multiple_collections = @nav_item.dup @@ -158,4 +171,30 @@ class UtilityClass expect(actual).to be true end end + + describe '#crawl_pages' do + it 'checks top level nav items' do + actual = @utility_class.crawl_pages(@project_nav_item, '/blog/') + expect(actual).to be_nil + + actual = @utility_class.crawl_pages(@nav_item, '/blog/') + expect(@utility_class.match).to match @nav_item + end + + it 'does not match child nav items to parent nav items' do + actual = @utility_class.crawl_pages(@project_nav_item, '/project/fec-gov/') + expect(@utility_class.match).to match @project_nav_item + end + + it 'matches with parent if it is an exact match' do + actual = @utility_class.crawl_pages(@project_nav_item_children, '/project/') + expect(@utility_class.match).to match @project_nav_item_children + end + + it 'matches with the child if it is an exact match' do + actual = @utility_class.crawl_pages(@project_nav_item_children, '/project/fec-gov/') + expect(@utility_class.match).to match @project_nav_item + end + end end + From 33becb76ed75eb9173414dc16f444464e59a03e2 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 11:48:24 -0600 Subject: [PATCH 24/79] find page and clean up --- Gemfile.lock | 2 +- _authors/unpublished_author.md | 14 ++ _plugins/author_data.rb | 26 +++- _plugins/update_author_data.rb | 23 +--- spec/_data/blog.yml | 29 ++++ spec/_data/join.yml | 97 +++++++++++++ spec/_data/navigation.yml | 199 +++++++++++++++++++++++++++ spec/_data/project.yml | 24 ++++ spec/_plugins/author_data_spec.rb | 52 +++++++ spec/_plugins/matching_posts_spec.rb | 45 ++---- spec/_plugins/utlity_spec.rb | 121 ++++++++-------- spec/_posts/page.rb | 15 +- spec/_posts/project_page.rb | 2 + 13 files changed, 527 insertions(+), 122 deletions(-) create mode 100644 _authors/unpublished_author.md create mode 100644 spec/_data/blog.yml create mode 100644 spec/_data/join.yml create mode 100644 spec/_data/navigation.yml create mode 100644 spec/_data/project.yml diff --git a/Gemfile.lock b/Gemfile.lock index f6643aee1..b0d921508 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -204,4 +204,4 @@ RUBY VERSION ruby 2.3.1p112 BUNDLED WITH - 1.13.6 + 1.13.7 diff --git a/_authors/unpublished_author.md b/_authors/unpublished_author.md new file mode 100644 index 000000000..b903dcb62 --- /dev/null +++ b/_authors/unpublished_author.md @@ -0,0 +1,14 @@ +--- +name: unpublished-author +first_name: unpublished +last_name: author +full_name: Unpublished Author +role: Testing +city: +state: +github: 18F +twitter: 18F +team: 18F +published: false +--- + diff --git a/_plugins/author_data.rb b/_plugins/author_data.rb index d6da01d00..de9cab0c2 100644 --- a/_plugins/author_data.rb +++ b/_plugins/author_data.rb @@ -2,12 +2,24 @@ module SiteData class AuthorData - attr_reader :path, :basepath + attr_reader :path, :basepath, :penned_authors, :site_post_paths, :all_authors, :excluded_authors def initialize(test_path = nil) @test_path = test_path @basepath = @test_path ? @test_path : Dir.pwd @path = File.join(@basepath, '_authors') + + @site_post_paths = Dir.entries(File.join(Dir.pwd, '_posts')).select do |f| + !File.directory? f and f != '.DS_Store' + end + + @all_authors = Dir.entries(File.join(Dir.pwd, '_authors')).select do |f| + !File.directory? f and f != '.DS_Store' + end.flatten.uniq + + @penned_authors = find_penned_authors + + @excluded_authors = all_authors - penned_authors end def update(author_file, key, value) @@ -62,5 +74,17 @@ def write_update(author_path, updated_file, key, value) def frontmatter_regex /\A(---\s*\n.*?\n?)^((---|\.\.\.)\s*$\n?)/m end + + def find_penned_authors + penned_authors = [] + @site_post_paths.each do |post_path| + frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts/', post_path)) + if frontmatter['output'] != false && frontmatter['published'] != false + authors = frontmatter['authors'].map { |a| "#{a}.md" } + penned_authors << authors + end + end + penned_authors.flatten.uniq + end end end diff --git a/_plugins/update_author_data.rb b/_plugins/update_author_data.rb index c0194a565..003d9ada7 100644 --- a/_plugins/update_author_data.rb +++ b/_plugins/update_author_data.rb @@ -4,31 +4,12 @@ # at /author/:name/ Jekyll::Hooks.register :site, :after_init do || author_data = SiteData::AuthorData.new - penned_authors = [] - site_post_paths = Dir.entries(File.join(Dir.pwd, '_posts')).select do |f| - !File.directory? f and f != '.DS_Store' - end - - all_authors = Dir.entries(File.join(Dir.pwd, '_authors')).select do |f| - !File.directory? f and f != '.DS_Store' - end.flatten.uniq - - site_post_paths.each do |post_path| - frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts/', post_path)) - if frontmatter['output'] != false && frontmatter['published'] != false - authors = frontmatter['authors'].map { |a| "#{a}.md" } - penned_authors << authors - end - end - penned_authors = penned_authors.flatten.uniq - excluded_authors = all_authors - penned_authors - - penned_authors.each do |author| + author_data.penned_authors.each do |author| author_data.update(author, 'published', true) end - excluded_authors.each do |author| + author_data.excluded_authors.each do |author| author_data.update(author, 'published', false) end end diff --git a/spec/_data/blog.yml b/spec/_data/blog.yml new file mode 100644 index 000000000..2eff1e603 --- /dev/null +++ b/spec/_data/blog.yml @@ -0,0 +1,29 @@ +blog: + text: Blog + href: blog/index.html + permalink: /blog/ + permalink_alt: /tags/ + collections: ['authors', 'posts'] + in_menu: true + in_drawer: true + in_footer: true + children: +blog_single_collection: + text: Blog + href: blog/index.html + permalink: /blog/ + permalink_alt: /tags/ + collections: ['posts'] + in_menu: true + in_drawer: true + in_footer: true + children: +blog_collectionless: + text: Blog + href: blog/index.html + permalink: /blog/ + permalink_alt: /tags/ + in_menu: true + in_drawer: true + in_footer: true + children: diff --git a/spec/_data/join.yml b/spec/_data/join.yml new file mode 100644 index 000000000..21096a979 --- /dev/null +++ b/spec/_data/join.yml @@ -0,0 +1,97 @@ +text: Join 18F +href: pages/join.md +permalink: /join/ +collections: ['join'] +in_menu: true +in_drawer: true +in_footer: true +children: + - + text: 'So you want to join 18F?' + permalink: /join/so-you-want-to-join-18f/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'How to apply' + permalink: /join/how-to-apply/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Interview process' + permalink: /join/interview-process/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + children: + - + text: 'Child 1' + permalink: /join/interview-process/child-1/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: Benefits + permalink: /join/benefits/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Government pay grades explained' + permalink: /join/government-pay-grades-explained/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Leave policies' + permalink: /join/leave-policies/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true diff --git a/spec/_data/navigation.yml b/spec/_data/navigation.yml new file mode 100644 index 000000000..725918c25 --- /dev/null +++ b/spec/_data/navigation.yml @@ -0,0 +1,199 @@ +assigned: + - + text: Home + href: pages/home.md + permalink: / + in_menu: false + in_drawer: false + in_footer: false + - + text: What we deliver + href: pages/what-we-deliver.md + permalink: /what-we-deliver/ + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: How we work + href: pages/how-we-work.md + permalink: /how-we-work/ + in_menu: true + in_drawer: true + in_footer: false + children: + - + text: Hire 18F + href: pages/hire.md + permalink: /hire/ + collections: ['hire'] + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: 'Partnership playbook' + permalink: /hire/partnership-playbook/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + children: + - + text: '1. We build in the open' + permalink: /hire/partnership-playbook/we-build-in-the-open/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '2. How we work' + permalink: /hire/partnership-playbook/how-we-work/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '3. Who we work with' + permalink: /hire/partnership-playbook/who-we-work-with/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '4. Getting started' + permalink: /hire/partnership-playbook/getting-started/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '5. What to expect' + permalink: /hire/partnership-playbook/what-to-expect/ + collections: ['hire'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: Join 18F + href: pages/join.md + permalink: /join/ + collections: ['join'] + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: 'So you want to join 18F?' + permalink: /join/so-you-want-to-join-18f/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'How to apply' + permalink: /join/how-to-apply/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Interview process' + permalink: /join/interview-process/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + children: + - + text: 'Child 1' + permalink: /join/interview-process/child-1/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: Benefits + permalink: /join/benefits/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Government pay grades explained' + permalink: /join/government-pay-grades-explained/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Leave policies' + permalink: /join/leave-policies/ + collections: ['join'] + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: Blog + href: blog/index.html + permalink: /blog/ + permalink_alt: /tags/ + collections: ['authors', 'posts'] + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: Projects + permalink: /project/ + collections: ['projects'] + in_menu: false + in_drawer: false + in_footer: false + children: +unassigned: [] diff --git a/spec/_data/project.yml b/spec/_data/project.yml new file mode 100644 index 000000000..3c5fa4323 --- /dev/null +++ b/spec/_data/project.yml @@ -0,0 +1,24 @@ +project: + text: Projects + permalink: /project/ + collections: ['projects'] + in_menu: false + in_drawer: false + in_footer: false + children: +project_with_children: + text: Projects + permalink: /project/ + collections: ['projects'] + in_menu: false + in_drawer: false + in_footer: false + children: + - text: fec-gov + permalink: /project/fec-gov + permalink_alt: /project/ + collections: ['projects'] + in_menu: false + in_drawer: false + in_footer: false + children: diff --git a/spec/_plugins/author_data_spec.rb b/spec/_plugins/author_data_spec.rb index 5643e4270..1047f92ba 100644 --- a/spec/_plugins/author_data_spec.rb +++ b/spec/_plugins/author_data_spec.rb @@ -6,6 +6,9 @@ before(:each) do root = File.dirname(File.dirname(__FILE__)) @author_data = SiteData::AuthorData.new(root) + @penned_authors = @author_data.penned_authors + @excluded_authors = @author_data.excluded_authors + @all_authors = @author_data.all_authors end context 'given a file with only YAML frontmatter' do @@ -166,4 +169,53 @@ expect(author_name).to eq 'burt' end end + + describe 'class variables' do + it "generates a list of 'penned_authors'" do + expect(@penned_authors).to be_kind_of(Array) + expect(@penned_authors).not_to be_empty + expect(@penned_authors.size).to be > 0 + end + + it "generates a list of 'excluded_authors'" do + expect(@excluded_authors).to be_kind_of(Array) + expect(@excluded_authors).not_to be_empty + expect(@excluded_authors.size).to be > 0 + end + + it "'all_authors' should be the sum of 'excluded_authors' and 'penned_authors'" do + all_authors_size = @excluded_authors.size + @penned_authors.size + expect(@all_authors.size).to eq all_authors_size + end + + it "aaron.md is in 'all_authors'" do + aaron_included = @all_authors.include? 'aaron.md' + expect(aaron_included).to be true + end + + it "aaron.md is in 'penned_authors'" do + aaron_included = @penned_authors.include? 'aaron.md' + expect(aaron_included).to be true + end + + it "aaron.md is not in 'excluded_authors'" do + aaron_included = @excluded_authors.include? 'aaron.md' + expect(aaron_included).to be false + end + + it "unpublished_author.md is in 'all_authors'" do + unpublished_included = @all_authors.include? 'unpublished_author.md' + expect(unpublished_included).to be true + end + + it "unpublished_author.md is not in 'penned_authors'" do + unpublished_included = @penned_authors.include? 'unpublished_author.md' + expect(unpublished_included).to be false + end + + it "unpublished_author.md is in 'excluded_authors'" do + unpublished_included = @excluded_authors.include? 'unpublished_author.md' + expect(unpublished_included).to be true + end + end end diff --git a/spec/_plugins/matching_posts_spec.rb b/spec/_plugins/matching_posts_spec.rb index e81f90094..68e5d1e32 100644 --- a/spec/_plugins/matching_posts_spec.rb +++ b/spec/_plugins/matching_posts_spec.rb @@ -1,43 +1,26 @@ # require_relative '../../_plugins/matching_posts' # RSpec.describe Jekyll::MatchingPosts do -# class DummyClass +# class MatchingPostsClass # end # before(:each) do -# @dummy_class = DummyClass.new -# @dummy_class.extend(Jekyll::MatchingPosts) +# @matching_posts = MatchingPostsClass.new +# @matching_posts.extend(Jekyll::MatchingPosts) + +# @author_page = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/page.rb'))) # end -# it "takes returns an embed given one variable" do -# # binding.pry -# author_page = {"draft"=>false, -# "categories"=>[], -# "layout"=>"default-profile", -# "name"=>"18F", -# "first_name"=>"18F", -# "last_name"=>nil, -# "full_name"=>"18F", -# "role"=>"Organization", -# "city"=>nil, -# "state"=>nil, -# "github"=>"18F", -# "twitter"=>"18F", -# "team"=>"18F", -# "redirect_from"=>"/team/18F/", -# "published"=>true, -# "title"=>"18f", -# "slug"=>"18F", -# "ext"=>".md", -# "tags"=>[], -# "date"=>"2016-12-30 11:45:32 -0600" -# } +# describe 'd ' do -# posts = @dummy_class.match_posts(author_page, 'authors') +# it "takes returns an embed given one variable" do -# expected_count = 8 -# actual_count = posts.count +# posts = @matching_posts.match_posts(@author_page, 'tags') +# binding.pry +# expected_count = 7 +# actual_count = posts.count -# expect(expected_count).to eq actual_count -# end +# expect(expected_count).to eq actual_count +# end +# end # end diff --git a/spec/_plugins/utlity_spec.rb b/spec/_plugins/utlity_spec.rb index 2ff0487eb..be4a6c943 100644 --- a/spec/_plugins/utlity_spec.rb +++ b/spec/_plugins/utlity_spec.rb @@ -9,53 +9,26 @@ class UtilityClass @utility_class = UtilityClass.new @utility_class.extend(Jekyll::Utility) - @nav_item = { - "text" => "Blog", - "href" => "blog/index.html", - "permalink" => "/blog/", - "permalink_alt" => "/blog/", - "in_menu" => true, - "in_drawer" => true, - "in_footer" => true, - "children" => nil - } - - @project_nav_item = { - "text" => "fec-gov", - "href" => "project/fec-gov/index.html", - "permalink" => "/project/fec-gov/", - "permalink_alt" => "/project/", - "in_menu" => true, - "in_drawer" => true, - "in_footer" => true, - "children" => nil - } - - @project_nav_item_children = { - "text" => "Project", - "href" => "project/index.html", - "permalink" => "/project/", - "permalink_alt" => "/project/", - "in_menu" => true, - "in_drawer" => true, - "in_footer" => true, - "children" => [ - @project_nav_item - ] - } - # binding.pry - @nav_item_with_collection = @nav_item.dup - @nav_item_with_multiple_collections = @nav_item.dup - @nav_item_with_collection['collections'] = [] - @nav_item_with_multiple_collections['collections'] = [] - @nav_item_with_collection['collections'] << 'posts' - @nav_item_with_multiple_collections['collections'] << 'posts' + @nav_items = YAML.load(File.read(File.join(Dir.pwd, 'spec/_data/navigation.yml')))['assigned'] + + @nav_item_join = YAML.load(File.read(File.join(Dir.pwd, 'spec/_data/join.yml'))) + + blog_variations = YAML.load(File.read(File.join(Dir.pwd, 'spec/_data/blog.yml'))) + @nav_item_blog = blog_variations['blog'] + @nav_item_blog_single_collection = blog_variations['blog_single_collection'] + @nav_item_blog_collectionless = blog_variations['blog_collectionless'] + + project_variations = YAML.load(File.read(File.join(Dir.pwd, 'spec/_data/project.yml'))) + @nav_item_project = project_variations['project'] + @nav_item_project_with_children = project_variations['project_with_children'] + @nav_item_project_child = @nav_item_project_with_children['children'][0] @first_post = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/page.rb'))) @project_page = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/project_page.rb'))) @post_url = @first_post['url'] @post_url = @utility_class.clip_char(@post_url.to_s.downcase, '/') end + describe '#clip_char' do context 'single parameter, string' do it 'removes dashes from the beginning of a string' do @@ -122,79 +95,103 @@ class UtilityClass describe '#matches_collections' do it 'returns nil if the nav_item does not have an associated collection' do - actual = @utility_class.matches_collections(@first_post, @nav_item) + actual = @utility_class.matches_collections(@first_post, @nav_item_blog_collectionless) expect(actual).to be_nil end it 'returns true if the nav_item does not have an associated collection' do - actual = @utility_class.matches_collections(@first_post, @nav_item_with_collection) + actual = @utility_class.matches_collections(@first_post, @nav_item_blog_single_collection) expect(actual).to be true end it 'returns true if the nav_item does not have an associated collection' do - actual = @utility_class.matches_collections(@first_post, @nav_item_with_multiple_collections) + actual = @utility_class.matches_collections(@first_post, @nav_item_blog) expect(actual).to be true end end describe '#matches_permalink_alt' do it 'returns true if the url matches the nav item' do - actual = @utility_class.matches_permalink_alt('blog', @nav_item) + actual = @utility_class.matches_permalink_alt('tags', @nav_item_blog_collectionless) expect(actual).to be true end it 'does not match if the url does not match the nav item' do - actual = @utility_class.matches_permalink_alt(@post_url, @nav_item) + actual = @utility_class.matches_permalink_alt(@post_url, @nav_item_blog_collectionless) expect(actual).to be_nil end it "matches a nav_item 'permalink_alt' with a post's 'url'" do - actual = @utility_class.matches_permalink_alt('/something-else/', @nav_item) + actual = @utility_class.matches_permalink_alt( + '/something-else/', + @nav_item_blog_collectionless + ) expect(actual).to be_nil end end describe '#matches_url_parent' do it 'checks if the post matches the nav item' do - actual = @utility_class.matches_url_parent(@first_post, @nav_item) + actual = @utility_class.matches_url_parent(@first_post, @nav_item_blog_collectionless) expect(actual).to be_nil - actual = @utility_class.matches_url_parent(@project_page, @project_nav_item) + actual = @utility_class.matches_url_parent(@project_page, @nav_item_project) expect(actual).to be true end it 'checks if the post matches the nav item with a collection attribtue' do - actual = @utility_class.matches_url_parent(@first_post, @nav_item_with_collection) + actual = @utility_class.matches_url_parent(@first_post, @nav_item_blog_single_collection) expect(actual).to be true - actual = @utility_class.matches_url_parent(@project_page, @project_nav_item) + actual = @utility_class.matches_url_parent(@project_page, @nav_item_project) expect(actual).to be true end end describe '#crawl_pages' do it 'checks top level nav items' do - actual = @utility_class.crawl_pages(@project_nav_item, '/blog/') - expect(actual).to be_nil + @utility_class.crawl_pages(@nav_item_project, '/blog/') + expect(@utility_class.match).to be_nil - actual = @utility_class.crawl_pages(@nav_item, '/blog/') - expect(@utility_class.match).to match @nav_item + @utility_class.crawl_pages(@nav_item_blog_collectionless, '/blog/') + expect(@utility_class.match).to match @nav_item_blog_collectionless end it 'does not match child nav items to parent nav items' do - actual = @utility_class.crawl_pages(@project_nav_item, '/project/fec-gov/') - expect(@utility_class.match).to match @project_nav_item + @utility_class.crawl_pages(@nav_item_project, '/project/fec-gov/') + expect(@utility_class.match).to be_nil end it 'matches with parent if it is an exact match' do - actual = @utility_class.crawl_pages(@project_nav_item_children, '/project/') - expect(@utility_class.match).to match @project_nav_item_children + @utility_class.crawl_pages(@nav_item_project_with_children, '/project/') + expect(@utility_class.match).to match @nav_item_project_with_children end it 'matches with the child if it is an exact match' do - actual = @utility_class.crawl_pages(@project_nav_item_children, '/project/fec-gov/') - expect(@utility_class.match).to match @project_nav_item + @utility_class.crawl_pages(@nav_item_project_with_children, '/project/fec-gov/') + expect(@utility_class.match).to match @nav_item_project_child end end -end + describe '#find_page' do + it 'finds a top level page: /blog/' do + actual = @utility_class.find_page('/blog/', @nav_items) + expect(actual).to match @nav_item_blog + end + + it 'finds a top level page: /join/' do + actual = @utility_class.find_page('/join/', @nav_items) + expect(actual).to match @nav_item_join + end + + it 'finds a child level page' do + actual = @utility_class.find_page('/join/leave-policies/', @nav_items) + expect(actual).to match @nav_item_join['children'].last + end + + it 'finds a grandchild level page' do + actual = @utility_class.find_page('/join/interview-process/child-1/', @nav_items) + expect(actual).to match @nav_item_join['children'][4]['children'][0] + end + end +end diff --git a/spec/_posts/page.rb b/spec/_posts/page.rb index 6e809206d..0ac0eb4ec 100644 --- a/spec/_posts/page.rb +++ b/spec/_posts/page.rb @@ -1,3 +1,5 @@ +# rubocop:disable all + { "next": { "next": { @@ -29,7 +31,7 @@ "ext": ".md" }, "path": "_posts/2014-03-21-29-minutes.md", - "output": nil, + "output": null, "previous": { "path": "_posts/2014-03-19-hello-world-we-are-18f.md", "url": "/2014/03/19/hello-world-we-are-18f/", @@ -84,7 +86,7 @@ "ext": ".md" }, "path": "_posts/2014-03-19-hello-world-we-are-18f.md", - "output": nil, + "output": null, "previous": { "next": { "path": "_posts/2014-03-19-hello-world-we-are-18f.md", @@ -115,8 +117,8 @@ "ext": ".md" }, "path": "_posts/2014-03-12-coming-soon.md", - "output": nil, - "previous": nil, + "output": null, + "previous": null, "content": "

We’re truly gratified so many of you liked our sneak preview!\nWe’ll be back real soon.

\n\n

Happy #Web25!

\n", "url": "/2014/03/12/coming-soon/", "id": "/2014/03/12/coming-soon", @@ -171,8 +173,8 @@ "ext": ".md" }, "path": "_posts/2014-03-12-coming-soon.md", - "output": nil, - "previous": nil, + "output": null, + "previous": null, "content": "

We’re truly gratified so many of you liked our sneak preview!\nWe’ll be back real soon.

\n\n

Happy #Web25!

\n", "url": "/2014/03/12/coming-soon/", "id": "/2014/03/12/coming-soon", @@ -198,3 +200,4 @@ "slug": "coming-soon", "ext": ".md" } +# rubocop:enable all diff --git a/spec/_posts/project_page.rb b/spec/_posts/project_page.rb index 9c75fd3cf..39341ff0e 100644 --- a/spec/_posts/project_page.rb +++ b/spec/_posts/project_page.rb @@ -1,3 +1,4 @@ +# rubocop:disable all { "next": { "next": nil, @@ -114,3 +115,4 @@ "ext": ".md", "date": "2017-01-05 00:52:51 -0600" } +# rubocop:enable all From 12f13e877c48e8cd78e9e6c6f3bc1f4173250114 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 14:55:54 -0600 Subject: [PATCH 25/79] remove matching post spec --- spec/_plugins/matching_posts_spec.rb | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 spec/_plugins/matching_posts_spec.rb diff --git a/spec/_plugins/matching_posts_spec.rb b/spec/_plugins/matching_posts_spec.rb deleted file mode 100644 index 68e5d1e32..000000000 --- a/spec/_plugins/matching_posts_spec.rb +++ /dev/null @@ -1,26 +0,0 @@ -# require_relative '../../_plugins/matching_posts' - -# RSpec.describe Jekyll::MatchingPosts do -# class MatchingPostsClass -# end - -# before(:each) do -# @matching_posts = MatchingPostsClass.new -# @matching_posts.extend(Jekyll::MatchingPosts) - -# @author_page = YAML.load(File.read(File.join(Dir.pwd, 'spec/_posts/page.rb'))) -# end - -# describe 'd ' do - -# it "takes returns an embed given one variable" do - -# posts = @matching_posts.match_posts(@author_page, 'tags') -# binding.pry -# expected_count = 7 -# actual_count = posts.count - -# expect(expected_count).to eq actual_count -# end -# end -# end From 1bc014d5d65c44a4e9139f0f061b47dd9a0fe997 Mon Sep 17 00:00:00 2001 From: coreycaitlin Date: Thu, 5 Jan 2017 14:03:22 -0800 Subject: [PATCH 26/79] style updates and title changes --- _layouts/project-tag-results.html | 6 +- ...ass-uses-every-kid-in-a-park-to-explore.md | 125 ++++-------------- _projects/doi-every-kid-in-a-park.md | 1 - _projects/ed-college-scorecard.md | 1 - _projects/fec-gov.md | 3 +- _projects/hhs-states.md | 4 +- 6 files changed, 35 insertions(+), 105 deletions(-) diff --git a/_layouts/project-tag-results.html b/_layouts/project-tag-results.html index ca35b3e04..d8550471a 100644 --- a/_layouts/project-tag-results.html +++ b/_layouts/project-tag-results.html @@ -14,8 +14,10 @@

- {{ page.project-type }}:
- {{ page.title }} + {{ page.agency }}:
+ + {{ page.title }} +

diff --git a/_posts/2016-07-06-illinois-fourth-grade-class-uses-every-kid-in-a-park-to-explore.md b/_posts/2016-07-06-illinois-fourth-grade-class-uses-every-kid-in-a-park-to-explore.md index 3325ec52d..5b9e139cb 100644 --- a/_posts/2016-07-06-illinois-fourth-grade-class-uses-every-kid-in-a-park-to-explore.md +++ b/_posts/2016-07-06-illinois-fourth-grade-class-uses-every-kid-in-a-park-to-explore.md @@ -6,125 +6,56 @@ authors: tags: - every kid in a park - agency work -excerpt: "One fourth grade class in Monticello, Illinois used the Every -Kid in the Park website to learn more about National Parks and create a -culminating project for their school’s annual open house." -description: "One fourth grade class in Monticello, Illinois used the -Every Kid in the Park website to learn more about National Parks and -create a culminating project for their school’s annual open house." +excerpt: "One fourth grade class in Monticello, Illinois used the Every Kid in the Park website to learn more about National Parks and create a project for their school’s annual open house. We reached out to Washington Elementary fourth grade teacher Robyn Garrett to learn more about how she used national parks in her curriculum." image: /assets/blog/every-kid-in-a-park/nps-stamps.jpg --- -Last year, we worked with the Department of the Interior to launch the -website for [Every Kid in a Park](https://everykidinapark.gov/), a -program that gives U.S. fourth graders free access to all federal lands -and waters — including national parks, forests, wildlife refuges, and -marine sanctuaries — for a full year. (They can also bring their -families with them for free.) - -The website [everykidinapark.gov](https://everykidinapark.gov/) was -designed, developed, and written for 10-year-olds. The site includes a -comprehensive list of sites, explains how the program works, and shows -how to print a pass. - -One fourth grade class in Monticello, Illinois took the Every Kid in the -Park idea even further. They used the website to learn more about -National Parks and create a culminating project for their school’s -annual open house. - -We reached out to Washington Elementary fourth grade teacher Robyn -Garrett, who led the project, to learn more about how she used national -parks and [Every Kid in a -Park](https://18f.gsa.gov/tags/every-kid-in-a-park/) in her curriculum. - -**Melody Kramer: Robyn, tell me a little bit about the end of the year -project you created with your class.** - -**Robyn Garrett:** Each year, I create a culminating project for our -school’s end-of-the-year open house. The goal is to make history real to -our fourth graders and to let them know it is still all around them. - -This year we utilized the [National Park Service -website](https://www.nps.gov/index.htm) and [Every Kid In a -Park](https://everykidinapark.gov/). We used the sites to research and -connect our study of early American history and the impact our geography -had on the decisions made by Native Americans and Early settlers. - -Each student selected a state at the beginning of the year to build a -background for their final projects. The final project required them to -build a structure to be created depicting a National Monument in their -chosen state. The monument needed to include four lights wired to a -switch to fulfill their science component. They had to write a paper -that explained the historical significance of the monument, which -fulfilled their writing component. Finally, they each had to give an -oral presentation on their monument to the class, which helped with -their speaking and listening skills. +Last year, we worked with the Department of the Interior to launch the website for [Every Kid in a Park](https://everykidinapark.gov/), a program that gives U.S. fourth graders free access to all federal lands and waters — including national parks, forests, wildlife refuges, and marine sanctuaries — for a full year. (They can also bring their families with them for free.) + +The website [everykidinapark.gov](https://everykidinapark.gov/) was designed, developed, and written for 10-year-olds. The site includes a comprehensive list of sites, explains how the program works, and shows how to print a pass. + +One fourth grade class in Monticello, Illinois took the Every Kid in the Park idea even further. They used the website to learn more about National Parks and create a culminating project for their school’s annual open house. + +We reached out to Washington Elementary fourth grade teacher Robyn Garrett, who led the project, to learn more about how she used national parks and [Every Kid in a Park](https://18f.gsa.gov/tags/every-kid-in-a-park/) in her curriculum. + +**Melody Kramer: Robyn, tell me a little bit about the end of the year project you created with your class.** + +**Robyn Garrett:** Each year, I create a culminating project for our school’s end-of-the-year open house. The goal is to make history real to our fourth graders and to let them know it is still all around them. + +This year we utilized the [National Park Service website](https://www.nps.gov/index.htm) and [Every Kid In a Park](https://everykidinapark.gov/). We used the sites to research and connect our study of early American history and the impact our geography had on the decisions made by Native Americans and Early settlers. + +Each student selected a state at the beginning of the year to build a background for their final projects. The final project required them to build a structure to be created depicting a National Monument in their chosen state. The monument needed to include four lights wired to a switch to fulfill their science component. They had to write a paper that explained the historical significance of the monument, which fulfilled their writing component. Finally, they each had to give an oral presentation on their monument to the class, which helped with their speaking and listening skills. These projects were then displayed for our open house. ![Models of the Statue of Liberty and other national parks created by the fourth grade students.]({{ site.baseurl }}/assets/blog/every-kid-in-a-park/nps-models.jpg) -*Monuments from National Park Service sites that were created by fourth graders -in Monticello, IL.* +*Monuments from National Park Service sites that were created by fourth graders in Monticello, IL.* -**MK: Could you share what students researched and learned for their -presentations?** +**MK: Could you share what students researched and learned for their presentations?** -**RG:** In addition to researching a specific monument, each student -also selected a National Park to research. They reported on the -location, when the park was formed, and who the president was who -designated it. The significance of the park was researched and written -into a “commercial” with three slides of pictures of their selected -park. These then played during our open house. +**RG:** In addition to researching a specific monument, each student also selected a National Park to research. They reported on the location, when the park was formed, and who the president was who designated it. The significance of the park was researched and written into a “commercial” with three slides of pictures of their selected park. These then played during our open house. -Lastly, students used the internet to find the distance from Monticello, -IL to the National Park they researched. This information was recorded -in miles and driving time on the large map marking each park we -researched. +Lastly, students used the internet to find the distance from Monticello, IL to the National Park they researched. This information was recorded in miles and driving time on the large map marking each park we researched. -The students were amazed by the size of the protected land and the -beautiful sites. We watched bits and pieces of the PBS program on the -National Parks, which endeared them to President Theodore Roosevelt, -President Franklin Roosevelt, and John Muir. In turn, they found pages -of quotes on the websites which we included on another wall of the gym. +The students were amazed by the size of the protected land and the beautiful sites. We watched bits and pieces of the PBS program on the National Parks, which endeared them to President Theodore Roosevelt, President Franklin Roosevelt, and John Muir. In turn, they found pages of quotes on the websites which we included on another wall of the gym. ![Stamps for Glacier, Glacier Bay, Canyonlands, and other national parks drawn and colored by the fourth graders.]({{ site.baseurl }}/assets/blog/every-kid-in-a-park/nps-stamps.jpg) -*Students made stamps for their National Park, which hung in the school -gymnasium.* +*Students made stamps for their National Park, which hung in the school gymnasium.* **MK: Did you use any lessons from the Every Kid in a Park website?** -**RG:** We used the first three lessons (on [exploring federal lands -and -water](https://s3.amazonaws.com/ekip-prod/activities/scholastic-one.pdf), -[environmental -stewardship](https://s3.amazonaws.com/ekip-prod/activities/scholastic-two.pdf), -and [our nation’s Native -people](https://s3.amazonaws.com/ekip-prod/activities/scholastic-three.pdf)) -from Every Kid in a Park’s educator section. - -The most impactful was the lesson on stewardship. We went on a field -trip to the local 4-H camp and our lunch discussion was about how being -good stewards of the land could make a difference right here and now. -That is what every teacher strives for — students connecting the -classroom to the world around them. Students reflected on parks they had -visited and many that they hope to visit. I believe this program had a -huge impact on my students. +**RG:** We used the first three lessons (on [exploring federal lands and water](https://s3.amazonaws.com/ekip-prod/activities/scholastic-one.pdf), [environmental stewardship](https://s3.amazonaws.com/ekip-prod/activities/scholastic-two.pdf), and [our nation’s Native people](https://s3.amazonaws.com/ekip-prod/activities/scholastic-three.pdf)) from Every Kid in a Park’s educator section. + +The most impactful was the lesson on stewardship. We went on a field trip to the local 4-H camp and our lunch discussion was about how being good stewards of the land could make a difference right here and now. That is what every teacher strives for — students connecting the classroom to the world around them. Students reflected on parks they had visited and many that they hope to visit. I believe this program had a huge impact on my students. **MK: Do you have a favorite park to visit?** -**RG:** My favorite National Park is Canyon de Chelly. It is stunning -and has a rich history that is difficult to understand unless shared by -the people who live there. I was blessed to have had wonderful Navajo -guides during my visits. +**RG:** My favorite National Park is Canyon de Chelly. It is stunning and has a rich history that is difficult to understand unless shared by the people who live there. I was blessed to have had wonderful Navajo guides during my visits. **MK: Is there anything else you want to add?** -**RG:** I will continue to incorporate these lessons into our studies. -It is vital that our children understand the blessings of this great -country and are impassioned to protect them. +**RG:** I will continue to incorporate these lessons into our studies. It is vital that our children understand the blessings of this great country and are impassioned to protect them. -The Every Kid in a Park initiative planted a seed with these students -and their families. Thank you for making it such a positive part of my -instruction. +The Every Kid in a Park initiative planted a seed with these students and their families. Thank you for making it such a positive part of my instruction. \ No newline at end of file diff --git a/_projects/doi-every-kid-in-a-park.md b/_projects/doi-every-kid-in-a-park.md index ed372e183..0d4fe3d01 100644 --- a/_projects/doi-every-kid-in-a-park.md +++ b/_projects/doi-every-kid-in-a-park.md @@ -1,6 +1,5 @@ --- layout: project-tag-results -project-type: "Project" agency: "Department of the Interior" title: "Every Kid in a Park" subtitle: Designing for every user diff --git a/_projects/ed-college-scorecard.md b/_projects/ed-college-scorecard.md index d9a25b6a3..4bae5fee5 100644 --- a/_projects/ed-college-scorecard.md +++ b/_projects/ed-college-scorecard.md @@ -1,6 +1,5 @@ --- layout: project-tag-results -project-type: "Project" agency: "Department of Education" title: "College Scorecard" subtitle: Turning data into informed choices diff --git a/_projects/fec-gov.md b/_projects/fec-gov.md index 0ef145234..8e3cb45f9 100644 --- a/_projects/fec-gov.md +++ b/_projects/fec-gov.md @@ -1,8 +1,7 @@ --- layout: project-tag-results -project-type: "Partner" agency: "Federal Election Commission" -title: "Federal Election Commission" +title: "beta.fec.gov" subtitle: Making campaign data easier to use excerpt: We helped the FEC make it easier for journalists and members of the public to use their data. image: /assets/img/home/hero-fec.png diff --git a/_projects/hhs-states.md b/_projects/hhs-states.md index 4d9682b77..c94b910f5 100644 --- a/_projects/hhs-states.md +++ b/_projects/hhs-states.md @@ -1,7 +1,7 @@ --- layout: project-tag-results -project-type: "Partner" -title: "Health and Human Services" +agency: "Health and Human Services" +title: "State and local procurement" subtitle: Helping states update crucial systems excerpt: HHS hired 18F to help states implement current best practices and upgrade legacy systems. image: /assets/img/projects/hero_stateandlocal.png From 0d7dad2315760c391a43f38e39d6239dbdd56914 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 15:06:07 -0600 Subject: [PATCH 27/79] rubocop config --- .rubocop.yml | 1 + _config.yml | 1 + _plugins/author_data.rb | 10 ++++++---- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.rubocop.yml b/.rubocop.yml index 587f669f1..5f5f1504e 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -11,6 +11,7 @@ AllCops: Exclude: - 'bin/**/*' - 'db/schema.rb' + - '_site/**/*' UseCache: true Metrics/AbcSize: diff --git a/_config.yml b/_config.yml index f88a9f36d..d076dc5b4 100644 --- a/_config.yml +++ b/_config.yml @@ -108,6 +108,7 @@ exclude: - PULL_REQUEST_TEMPLATE.md - ISSUE_TEMPLATE.md - 'Accessibility Scanning Using Pa11y-ci.md' + - bin # jekyll plugins gems: diff --git a/_plugins/author_data.rb b/_plugins/author_data.rb index de9cab0c2..c27ba6de2 100644 --- a/_plugins/author_data.rb +++ b/_plugins/author_data.rb @@ -78,10 +78,12 @@ def frontmatter_regex def find_penned_authors penned_authors = [] @site_post_paths.each do |post_path| - frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts/', post_path)) - if frontmatter['output'] != false && frontmatter['published'] != false - authors = frontmatter['authors'].map { |a| "#{a}.md" } - penned_authors << authors + if File.exist? File.join(Dir.pwd, '_posts', post_path) + frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts', post_path)) + if frontmatter['output'] != false && frontmatter['published'] != false + authors = frontmatter['authors'].map { |a| "#{a}.md" } + penned_authors << authors + end end end penned_authors.flatten.uniq From 4976f80ec97f488e5770fe2c9475e798e9fe1d6e Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 5 Jan 2017 16:59:43 -0600 Subject: [PATCH 28/79] refactor --- _plugins/author_data.rb | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/_plugins/author_data.rb b/_plugins/author_data.rb index c27ba6de2..818ca6222 100644 --- a/_plugins/author_data.rb +++ b/_plugins/author_data.rb @@ -78,13 +78,12 @@ def frontmatter_regex def find_penned_authors penned_authors = [] @site_post_paths.each do |post_path| - if File.exist? File.join(Dir.pwd, '_posts', post_path) - frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts', post_path)) - if frontmatter['output'] != false && frontmatter['published'] != false - authors = frontmatter['authors'].map { |a| "#{a}.md" } - penned_authors << authors - end - end + next if !File.exist? File.join(Dir.pwd, '_posts', post_path) + frontmatter = YAML.load_file(File.join(Dir.pwd, '_posts', post_path)) + checks = frontmatter['output'] != false && frontmatter['published'] != false + next if !checks + authors = frontmatter['authors'].map { |a| "#{a}.md" } + penned_authors << authors end penned_authors.flatten.uniq end From bcf2d0acc06fe91796c7f15018fda95b80010b9b Mon Sep 17 00:00:00 2001 From: Elaine Kamlley Date: Thu, 5 Jan 2017 18:02:34 -0500 Subject: [PATCH 29/79] updated hover states for closing icon on nav accordian and changed icon from img to svg --- _includes/navigation/drawer.html | 2 +- _includes/svg/close.svg | 9 +++++++++ _sass/_components/nav-accordion.scss | 14 +++++++++++--- _sass/_components/post-list.scss | 2 +- _sass/_core/variables.scss | 3 ++- 5 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 _includes/svg/close.svg diff --git a/_includes/navigation/drawer.html b/_includes/navigation/drawer.html index a8551c237..d3a69ab10 100644 --- a/_includes/navigation/drawer.html +++ b/_includes/navigation/drawer.html @@ -1,6 +1,6 @@
diff --git a/_includes/details-code.html b/_includes/details-code.html index 3900b17f3..2f0c66cb9 100644 --- a/_includes/details-code.html +++ b/_includes/details-code.html @@ -1,6 +1,6 @@ {% capture code %} ```{{ include.lang | default: 'text' }} -{{ include.content | markdownify }} + {{ include.content | markdownify }} ``` {% endcapture %} diff --git a/_includes/feature-image.html b/_includes/feature-image.html index 8713c54d0..3ce0c4593 100644 --- a/_includes/feature-image.html +++ b/_includes/feature-image.html @@ -1,5 +1,7 @@ -{% if page.image %} +{% assign include_image = include.image | default: page.image %} + +{% if include_image %} {% unless page.hero == false %} -
+
{% endunless %} {% endif %} diff --git a/_includes/svg/icons/folderwithclock.svg b/_includes/svg/icons/folderwithclock.svg new file mode 100644 index 000000000..d874f3737 --- /dev/null +++ b/_includes/svg/icons/folderwithclock.svg @@ -0,0 +1,20 @@ + + + + Group 10 + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_includes/svg/icons/gavel.svg b/_includes/svg/icons/gavel.svg new file mode 100644 index 000000000..dd928614e --- /dev/null +++ b/_includes/svg/icons/gavel.svg @@ -0,0 +1,17 @@ + + + + Group 8 + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/_includes/svg/icons/monitor.svg b/_includes/svg/icons/monitor.svg new file mode 100644 index 000000000..6a0df4e8c --- /dev/null +++ b/_includes/svg/icons/monitor.svg @@ -0,0 +1,26 @@ + + + + Group 9 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_sass/_components/_icon-stacked.scss b/_sass/_components/_icon-stacked.scss new file mode 100644 index 000000000..6fc736e91 --- /dev/null +++ b/_sass/_components/_icon-stacked.scss @@ -0,0 +1,6 @@ +.icon-stacked { + float: left; + margin: 0; + margin-bottom: $site-margins; + margin-right: $site-margins; +} diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index e4e90b1e3..a12e77d22 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -2,10 +2,10 @@ // ========================== .hero { - @include padding($site-margins null); background-image: url('../img/page-feature/hire-us.jpg'); background-position: center; background-size: cover; + padding: 0; } .hero-callout { @@ -26,7 +26,23 @@ .usa-button { font-size: $small-font-size; - width: 100%; + } +} + +.hero-callout-primary { + padding-left: 0; + position: relative; + max-width: initial; + + &:before { + background-color: $color-dark; + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + width: 1000%; + right: 100%; } } diff --git a/_sass/_components/layout.scss b/_sass/_components/layout.scss index 5b5501999..22df1050b 100644 --- a/_sass/_components/layout.scss +++ b/_sass/_components/layout.scss @@ -38,6 +38,10 @@ } } +.background-gray { + background-color: $color-gray-lightest; +} + .background-dark { background-color: $color-dark; color: $color-white; diff --git a/_styleguide/index.md b/_styleguide/index.md index 354349143..afc1a0183 100644 --- a/_styleguide/index.md +++ b/_styleguide/index.md @@ -114,6 +114,25 @@ Here is an example embed and how lang="html" %} +### Hero banner – left aligned with image +{% capture hero_banner_image %} +
+
+

We work with federal agencies to approach technology projects in new ways

+ + + {% include feature-image.html + image='/assets/img/page-feature/hire-us.jpg' %} +
+
+{% endcapture %} + +{% include details-code.html + text="See code" + content=hero_banner_image + lang="html" +%} + ### Card diff --git a/assets/css/main.scss b/assets/css/main.scss index f52004dc5..8227ecb44 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -48,7 +48,7 @@ @import "_components/filters"; @import "_components/lists"; @import "_components/links"; - +@import "_components/icon-stacked"; // 18F site templates // ========================== diff --git a/pages/home.html b/pages/home.html index 1a7311c1c..7ab9e0df4 100644 --- a/pages/home.html +++ b/pages/home.html @@ -5,21 +5,52 @@ redirect_from: /dashboard/ --- -
-
+
+
+
+
+

We work with federal agencies to successfully deliver efficient, easy-to-use digital services.

+ +
+
+
+
+ +
+

We support your mission

-

18F works with federal agencies to improve processes and deliver efficient, easy-to-use digital services to the public.

- -
+

As an office within the General Services Administration, we know how to work with government. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

+
+
+
+
{% include svg/icons/monitor.svg %}
+ Improve your public-facing services +
+
+
{% include svg/icons/gavel.svg %}
+ Implement new laws or mandates +
+
+
{% include svg/icons/folderwithclock.svg %}
+ Digitize and streamline internal systems +
+
-
-

Featured projects

- {% include card-project.html - project='fec-gov' - %} - {% include card-project.html - project='hhs-states' - %} + +
+
+

Featured projects

+ {% include card-project.html + project='fec-gov' + %} + {% include card-project.html + project='hhs-states' + %} + + {% include card-project.html + project='doi-every-kid-in-a-park' + %} +
From 2a8b4ae1625392726d324f1ca139f720efaa280f Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 12 Jan 2017 15:19:03 -0600 Subject: [PATCH 52/79] icon list --- _sass/_components/_icon-stacked.scss | 6 ---- _sass/_components/hero.scss | 3 +- _sass/_components/icon-list.scss | 11 +++++++ _sass/_components/layout.scss | 9 ++++++ assets/css/main.scss | 2 +- pages/home.html | 44 ++++++++++++++-------------- 6 files changed, 44 insertions(+), 31 deletions(-) delete mode 100644 _sass/_components/_icon-stacked.scss create mode 100644 _sass/_components/icon-list.scss diff --git a/_sass/_components/_icon-stacked.scss b/_sass/_components/_icon-stacked.scss deleted file mode 100644 index 6fc736e91..000000000 --- a/_sass/_components/_icon-stacked.scss +++ /dev/null @@ -1,6 +0,0 @@ -.icon-stacked { - float: left; - margin: 0; - margin-bottom: $site-margins; - margin-right: $site-margins; -} diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index a12e77d22..0db8a0ee4 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -32,9 +32,8 @@ .hero-callout-primary { padding-left: 0; position: relative; - max-width: initial; - &:before { + &::before { background-color: $color-dark; content: ''; display: block; diff --git a/_sass/_components/icon-list.scss b/_sass/_components/icon-list.scss new file mode 100644 index 000000000..297541dae --- /dev/null +++ b/_sass/_components/icon-list.scss @@ -0,0 +1,11 @@ +.icon-list { + display: flex; + margin-bottom: $paragraph-margins-thick; +} + +.icon-list-image { + // float: left; + margin: 0; + margin-bottom: $site-margins; + margin-right: $site-margins; +} diff --git a/_sass/_components/layout.scss b/_sass/_components/layout.scss index 22df1050b..68607fe7e 100644 --- a/_sass/_components/layout.scss +++ b/_sass/_components/layout.scss @@ -30,6 +30,15 @@ } } +.usa-flex { + display: flex; +} + +.usa-flex-vertically-center { + align-self: center; + flex-direction: column; +} + .usa-section { @include padding($section-margins null); diff --git a/assets/css/main.scss b/assets/css/main.scss index 8227ecb44..df504ca54 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -48,7 +48,7 @@ @import "_components/filters"; @import "_components/lists"; @import "_components/links"; -@import "_components/icon-stacked"; +@import "_components/icon-list"; // 18F site templates // ========================== diff --git a/pages/home.html b/pages/home.html index 7ab9e0df4..bbdd723de 100644 --- a/pages/home.html +++ b/pages/home.html @@ -16,25 +16,34 @@

We work with federal agencies to successfully deliver efficient, easy-to-use

-
-
+
+

We support your mission

As an office within the General Services Administration, we know how to work with government. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

-
-
-
{% include svg/icons/monitor.svg %}
- Improve your public-facing services +
+
@@ -52,15 +61,6 @@

Featured projects

%}
-
-
-

Building 21st century digital government

-
-
-

As an office within the General Services Administration, we know how to work with government. We can help you improve public-facing services, implement new laws or mandates, or improve internal systems.

-

When you build or buy websites and software with 18F, you remain in control of your process and feel confident about your outcomes. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

-
-

Want to see if 18F can help your agency?

From f3aac96e61d0a0841b4e9aa24874ba49a2101f4f Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 12 Jan 2017 16:22:33 -0600 Subject: [PATCH 53/79] we support your mission --- _sass/_components/card.scss | 6 ++-- _sass/_components/icon-list.scss | 11 ++++-- _sass/_components/layout.scss | 21 +++++++++--- _sass/_core/typography.scss | 10 ++++-- _sass/_core/utility.scss | 8 +++++ _sass/_core/variables.scss | 7 ++-- pages/home.html | 59 ++++++++++++++------------------ 7 files changed, 74 insertions(+), 48 deletions(-) diff --git a/_sass/_components/card.scss b/_sass/_components/card.scss index ac902a07e..6c185cd90 100644 --- a/_sass/_components/card.scss +++ b/_sass/_components/card.scss @@ -3,7 +3,7 @@ } .card-link { - border: 1px solid $color-gray-lighter; + border: 2px solid $color-gray-lighter; display: inline-block; margin-bottom: $paragraph-margins-thick; text-decoration: none; @@ -14,11 +14,11 @@ &:hover, &:focus { - border: 1px solid $color-bright-hover; + border: 2px solid $color-bright-hover; } &:active { - border: 1px solid $color-primary-darker; + border: 2px solid $color-primary-darker; } } diff --git a/_sass/_components/icon-list.scss b/_sass/_components/icon-list.scss index 297541dae..d34c0346c 100644 --- a/_sass/_components/icon-list.scss +++ b/_sass/_components/icon-list.scss @@ -1,11 +1,18 @@ .icon-list { display: flex; margin-bottom: $paragraph-margins-thick; + + &:last-of-type { + margin-bottom: 0; + } } .icon-list-image { - // float: left; margin: 0; - margin-bottom: $site-margins; margin-right: $site-margins; + + svg { + width: 50px; + height: 50px; + } } diff --git a/_sass/_components/layout.scss b/_sass/_components/layout.scss index 68607fe7e..fd014fd7d 100644 --- a/_sass/_components/layout.scss +++ b/_sass/_components/layout.scss @@ -30,13 +30,24 @@ } } -.usa-flex { - display: flex; +.usa-flex-vertically-top { + margin-bottom: $section-margins; } -.usa-flex-vertically-center { - align-self: center; - flex-direction: column; +@include media($medium-screen) { + .usa-flex { + display: flex; + } + + .usa-flex-vertically-top { + align-self: flex-start; + flex-direction: column; + } + + .usa-flex-vertically-bottom { + align-self: flex-end; + flex-direction: column; + } } .usa-section { diff --git a/_sass/_core/typography.scss b/_sass/_core/typography.scss index 14e6b688f..b8a6f4bb4 100644 --- a/_sass/_core/typography.scss +++ b/_sass/_core/typography.scss @@ -29,6 +29,10 @@ h6 { font-family: $font-sans; } +h4 { + font-size: $h4-font-size; +} + a { color: $color-medium; @@ -37,8 +41,6 @@ a { } } - - .h1 { @extend h1; } @@ -63,3 +65,7 @@ a { @extend h6; } +.paragraph-bold { + font-weight: $font-bold; +} + diff --git a/_sass/_core/utility.scss b/_sass/_core/utility.scss index db798ee19..4656efbe1 100644 --- a/_sass/_core/utility.scss +++ b/_sass/_core/utility.scss @@ -1,3 +1,11 @@ .align-center { text-align: center; } + +.p-line-height { + line-height: $paragraph-line-height; +} + +.p-weight { + font-weight: $font-normal; +} diff --git a/_sass/_core/variables.scss b/_sass/_core/variables.scss index a713987a9..d1adadb94 100644 --- a/_sass/_core/variables.scss +++ b/_sass/_core/variables.scss @@ -2,14 +2,15 @@ $h1-font-size: 3.6rem; $h2-font-size: 3.2rem; $h3-font-size: 2.4rem; -$h4-font-size: 2.2rem; +$h4-font-size: 2.1rem; $h5-font-size: 1.4rem; $h6-font-size: 1.2rem; -$base-font-size: 1.8rem; - +$base-font-size: 1.7rem; $tiny-font-size: 1.2rem; +$paragraph-line-height: 1.5; + $icon-small: 1rem; $icon: 1.3rem; diff --git a/pages/home.html b/pages/home.html index bbdd723de..75dd7ad0f 100644 --- a/pages/home.html +++ b/pages/home.html @@ -16,34 +16,33 @@

We work with federal agencies to successfully deliver efficient, easy-to-use

-
-
-

We support your mission

-

As an office within the General Services Administration, we know how to work with government. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

-
- + +
@@ -61,14 +60,8 @@

Featured projects

%}
-
-
-

Want to see if 18F can help your agency?

- -
-
-

From our blog

+

Recent blog posts

From 8b8148d965b0c25e1214e572f0077c53d4801522 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 12 Jan 2017 16:46:23 -0600 Subject: [PATCH 54/79] top banner --- _sass/_components/hero.scss | 15 +++++++++++++++ pages/home.html | 4 ++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/_sass/_components/hero.scss b/_sass/_components/hero.scss index 0db8a0ee4..863020cc3 100644 --- a/_sass/_components/hero.scss +++ b/_sass/_components/hero.scss @@ -8,6 +8,14 @@ padding: 0; } +.hero-primary { + background-image: none; + + @include media($medium-screen) { + background-image: url('../img/page-feature/hire-us.jpg'); + } +} + .hero-callout { padding: $site-margins; @@ -30,9 +38,16 @@ } .hero-callout-primary { + max-width: initial; padding-left: 0; + padding-right: 0; position: relative; + @include media($medium-screen) { + min-width: 300px; + padding-right: $site-margins; + } + &::before { background-color: $color-dark; content: ''; diff --git a/pages/home.html b/pages/home.html index 75dd7ad0f..1b04218dc 100644 --- a/pages/home.html +++ b/pages/home.html @@ -6,9 +6,9 @@ ---
-
+
-
+

We work with federal agencies to successfully deliver efficient, easy-to-use digital services.

From 108bf26fc32a029db38b4a2f43fe0b026c740ee3 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Thu, 12 Jan 2017 17:55:09 -0600 Subject: [PATCH 55/79] support your mission section --- Gemfile.lock | 8 ++++++++ _sass/_components/icon-list.scss | 8 ++++++-- pages/home.html | 6 +++--- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index bf3e51de7..3d4367b86 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,10 @@ +GIT + remote: https://github.com/18F/jekyll-archives.git + revision: 9ad78a4aa38de0af570a53f3c12558408e9537f7 + specs: + jekyll-archives (2.1.0) + jekyll (>= 2.4) + GEM remote: https://rubygems.org/ specs: @@ -185,6 +192,7 @@ DEPENDENCIES colorize html-proofer jekyll (~> 3.1) + jekyll-archives! jekyll-feed jekyll-paginate jekyll-redirect-from diff --git a/_sass/_components/icon-list.scss b/_sass/_components/icon-list.scss index d34c0346c..457cc8632 100644 --- a/_sass/_components/icon-list.scss +++ b/_sass/_components/icon-list.scss @@ -1,6 +1,10 @@ .icon-list { display: flex; - margin-bottom: $paragraph-margins-thick; + margin-bottom: $paragraph-margins; + + @include media($medium-screen) { + margin-bottom: $paragraph-margins-thick; + } &:last-of-type { margin-bottom: 0; @@ -9,7 +13,7 @@ .icon-list-image { margin: 0; - margin-right: $site-margins; + margin-right: $paragraph-margins; svg { width: 50px; diff --git a/pages/home.html b/pages/home.html index 1b04218dc..4c5420e49 100644 --- a/pages/home.html +++ b/pages/home.html @@ -22,7 +22,7 @@

We support your mission

As an office within the General Services Administration, we know how to work with government. Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways.

-