The cerner.github.io from cerner

Correct grouping of header and icon on culture page on small screens

The header, image, and paragraph alignment of the culture page on the desktop view doesn't transform properly when the view is adjusted to small screens. The header, image, and paragraph should remain grouped together.

Desktop:

Mobile:

Add DevCon 2020 playlist on the Tech Talks page

A new DevCon 2020 playlist is been created, and it would be good to have that as another highlighted playlist on the site (would be right below the main tech talks that we have hosted).

Address navigation bar design

Navigation bar should be increased in height to at least 70px.
Navigation links should span bar and should be white.

Major Uplift Discussion

As this comment notes, quite a few dependencies in this repo are pretty out of date.

Some of the major dependencies are

Ruby
- Current: 2.2.3
- Latest: 2.7.1
Jekyll
- Current: 0.12.1
- Latest: 4.0.0
Bootstrap
- Current: v2.2.2
- Latest: 4.4.0

Other gems

bundle outdated --only-explicit --filter-major
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...

Outdated gems included in the bundle:
  * compass (newest 1.0.3, installed 0.12.2, requested ~> 0.12.2) in groups "development"
  * haml (newest 5.1.2, installed 3.1.8, requested ~> 3.1.7) in groups "development"
  * jekyll (newest 4.0.0, installed 0.12.1, requested ~> 0.12) in groups "development"
  * json (newest 2.3.0, installed 1.8.6, requested ~> 1.8) in groups "development"
  * liquid (newest 4.0.3, installed 2.3.0, requested ~> 2.3.0) in groups "development"
  * pygments.rb (newest 1.2.1, installed 0.3.7, requested ~> 0.3.4) in groups "development"
  * rake (newest 13.0.1, installed 0.9.6, requested ~> 0.9) in groups "development"
  * sinatra (newest 2.0.8.1, installed 1.4.8, requested ~> 1.4.2) in groups "default"
  * stringex (newest 2.8.5, installed 1.4.0, requested ~> 1.4.0) in groups "development"

We were discussing amongst a few of us and were wondering if it is worth the effort to update these dependencies, or if it's time to consider moving to something newer. The idea of moving to hugo has been thrown around a bit if we just want to get onto something newer and easier to install/run. We've also talked a bit about moving to something that would allow for blog posts to be created via a CMS (whether headless and triggering builds of a static site or a fully managed blogging platform).

Some of these options are going to be way more work than others. It's probably important to understand what the groups goals are. For example unless we want to overhauling the look and feel, it might be good to stay on our old version of bootstrap so we don't have to open that can of worms. I think the cheapest option by far is going to be to just upgrade our dependencies, but i haven't done much investigation and maybe upgrading from jekyll 0.12 to jekyll 4 is going to be just as hard as moving to a new framework. It would probably depend on the passivity of the plugins.

Update ruby version to latest (2.7.x)

Ruby 2.2.3 is out of date and we should update to a newer version to build off of

superscript 1 vs apostrophe

I noticed in a few places, namely on the Culture page, that a superscript 1 is being used instead of an apostrophe. For example:

"We also know that it¹s important"

Add content for DevCon 2021 videos

The Tech Talks page has prescribed channels for each DevCon. Once newer content is pushed for DevCons in the past month, we will want to make this advertised in our site.

Transitioning to Hugo for static site generation

We have been maintaining the site with Jekyll, but that has a burden of maintaining several of the dependencies (Ruby and all the related gems). We are wanting to make it easier for other Cerner engineers to contribute to this for generating content. It is desirable to evaluate to moving to using Hugo for our site generation for the following benefits:

Hugo makes it very easy for other OSes (Windows/Mac) for generating content
We can leverage other ecosystems that are making use of Hugo to simplify our build / preview content (ex. pull request preview builds)
Removes the added management of all of these language specific dependencies that we are not interested in maintaining (Ruby and gem versions)
Helps us re-evaluate our theme in this transition to leverage existing themes and build them to be with a newer Cerner theme.

Preview of this site can be seen on this draft PR that is collected all the changes: #147

List of TODOs

Bonus

This are tasks that are identified, which are not required but tracking them so they are not lost.

Hyperlinks aren't blue for some reason. Maybe i'm just used to it, but should we change that?
Refactor the Tech Talks page to use shortcodes to reduce all the Bootstrap boilerplate
Add child pages for DevCon + ShipIt to the Culture page. These can be two card views that can then be opened into their pages, including a highlighting video.

Update yarn dependencies based on past dependabot alerts

We have some past dependabot dependency alerts that could be applied. Will do them in a batch for this month (Jan 2022).

Update build validation on PRs and leverage GitHub Actions (site build, link test, spellcheck)

It would be beneficial to simplify the build and validation jobs on our project. Currently we used Travis CI; however, it is just ensuring it can run Hugo - and that can easily be simplified in a GitHub action and not even require Travis CI builds. This could also include a few other inclusions:

Link test via broken-link-checker
Spellcheck via cspell

Update pull request build previews to build content with future publish date

We are wanting to update our Heroku configuration to supply --buildFuture to build content with a future publish date.

“Recent Posts” and “Github Repos” should be bolded.

Easier Blog Previewing while writing

Currently the way someone has to go about writing a new post is to run the site locally, edit the markdown, and preview it locally. It would be ideal if we could eliminate some of these steps so its easier for people to contribute content.

Before we dive into proposals, I think it would be good to understand what problems people want to solve and what amount of change we are comfortable with. For example if just making it so you don't have to run things locally but instead can create some markdown in the Github UI in a branch and it deploys your branch so you can view it, is that good enough? Or would the feedback loop be too slow? Or is our actual goal to get away from having to use markdown as its not user friendly for people unfamiliar with it? If we are wanting to not have to write markdown are we wanting to maintain the same look and feel of the site and want to investigate a headless CMS? Or do we want to consider a full fledged service.

Adjust blog post link styling

Remove blue link color from post titles. (not necessary to indicate it’s a link and looks better when the page is not full of blue link text)

Add Open Graph image tag to improve link sharing

When sharing links to our site, we can improve how other tools (Twitter, Facebook) represent the page, but adding in some basic Open Graph metatags (like img):

<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

https://ogp.me/

We currently add this with our theme, which could include the image tag:

<meta property="og:description" content="a blog by engineers, for engineers" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://engineering.cerner.com/" />
<meta property="og:updated_time" content="2020-09-24T00:00:00+00:00" />

Since we do image processing today on our blog pages, this may be a nice inclusion for blog posts. We can have a fixed default one include (Cerner's logo).

Include splunk-pickaxe as part of the OSS page

We are wanting to include this on the OSS page + give it an icon. This should reference the blog announcement of the project too.

https://engineering.cerner.com/blog/managing-splunk-knowledge/
https://github.com/cerner/splunk-pickaxe

Optimize header image design & placement

Header images need to be resized for responsive scaling. (waiting on size recommendations based on development capabilities.)
These were intended to be animated and could be converted easily once a size is settled on. Not a need, but nice to have.
New images should also consider title placement so that it can be centered horizontally and legible.
Header images need to be shortened height-wise so that they don't take up so much of the screen (today, the use must scroll a lot to read the content)

Investigate and correct f-twelve links to their demo

It appears that f-twelve from our OSS blog post has a broken link to their demo:

https://engineering.cerner.com/blog/introducing-f-twelve-an-open-source-dev-console/

It appears they may be using GH pages for publishing this, which would require repository setting changes when they moved from master -> main.

Demo index.html file is here: https://github.com/cerner/f-twelve/blob/main/demo/index.html

It is assumed this demo would not be hosted in the blog site, but since the we are using the DNS record to point to GitHub for our organizational site page, these others can be referenced (like beadledom's documentation: https://engineering.cerner.com/beadledom/4.1/docs/)

Fix tech talk page styling issues

Not sure if we need the blue link text here either as it’s pretty clear that they are links. If distinguishing is needed between archive year and post titles aI’d recommend bolding the archive year text.

Fixing casing for canadarm.png on the Open Source page

The the canadarm logo is called Canadarm.png but is referenced as canadarm.png. Local preview resolved that fine for whatever reason, but the live site does not.

Feature Branch Deploys

As a contributor, I want branches to be auto deployed so i can preview my changes prior to merging, so that people can write blogs in markdown without having to run the site locally to preview changes, and so reviewers can see the most up to date changes without relying on old screenshots.

Design Proposal

There are many services and tools available that offer varying out of the box experiences to achieve this.

Other options:

Netflify: Netflify offers a great out of box full service experience. You can simply point it at a github repo and it will build and deploy any branch you want as well as pull requests. Each deployment gets a unique url and the github app will comment with the link on the PR. You can also integrate custom domain names with free lets encrypt support. While i swear by this service, the free tier only allows a single admin, and the next tier is pretty pricey.
Heroku: Heroku also offers a platform as a service experience that allows for configuring similar branch deployments. However, heroku doesn't utilize a static site deployment model, it uses running containers (dynamos). The free tier then limits how long dyanmos can be up during a day. Often times it will sleep so to view it you have to wait 30 seconds for it to spin up the site.
Github Actions: fairly new on the block, but free and powerful. However, where Netflify is a full service out of the box, github actions would need to be used to stitch together other services as it just offers the compute but not the storage. Github pages can't support more than a single deployment (without some very hacky folder shenanigans). S3 would be a logical service to use for the hosting. There are some hurdles to using it though. For Cerner security compliance, all S3 buckets must be encrypted and not allow public reads to bucket contents. To host a publicly visible site in a bucket then you would need to also configure cloudfront and an OAI on top of the bucket. On top of that, you then have to decide if you want to create a Stack per PR or store each PRs content in a separate folder. The separate folder per PR is cheaper and simpler to implement, but then each PR's site has an extra path in the url. To get around this the jekyll build config would need to parameterize https://github.com/cerner/cerner.github.io/blob/source/_config.yml#L29 to account for loading assets.

Preferred Option:

From a hosting and deployment perspective, AWS Amplify offers almost the same full feature set as Netflify
https://aws.amazon.com/amplify/ . To try it out, i implemented it using a fork of the repo https://github.com/alex-bezek/cerner.github.io. Because everything i wanted to do is covered in the free tier, i just used my own aws account for convenience.
The steps i took were:

Create a new Amplify application https://console.aws.amazon.com/amplify/home
Setup to use github as the source
Authorized the amplify app to interact with my github org and select the cerner.github.io repository
selected source as the primary branch to build
Edit the build settings to the following (the package installs are needed for pygments to work)

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - apt-get update -y
        - apt-get install default-jdk -y
        - apt install python-pip -y
        - apt install python2.7 -y
        - apt-get install python-pygments -y
        - bundle install
    build:
      commands:
        - bundle exec rake generate
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

Select Advanced Settings and use https://hub.docker.com/r/artemius/ruby-2.2.3 as my build image. The default build image doesn't support our version of ruby and i didn't want to upgrade everything https://github.com/aws-amplify/amplify-console/blob/master/images/amazonlinux1/Dockerfile#L12
Save and deploy. This will deploy the source branch.
Next select "Previews" from the side menu and enable them.
Select the source branch, click manage, and enable previews for that branch.
Follow the prompts to install the github application so it can watch for PRs and comment with links to deployments.

Outputs

Primary Branch deployed: https://source.df01c5fpiua30.amplifyapp.com/
Pull Request: alex-bezek#1
PR Deploy: https://pr-1.df01c5fpiua30.amplifyapp.com/

Make it real

In order to use it in a production setting, there are some additional things we would want to do

Codify the configuration via cloud formation templates https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/AWS_Amplify.html
Create a deployer IAM Role with write permissions to AWS Amplify https://docs.aws.amazon.com/IAM/latest/UserGuide/list_awsamplify.html
Install the amplify app into the public Cerner github org
Maybe create our own build container and host it in the Amazon Elastic Container Registry so we don't rely on an old random public image.

Pricing

https://aws.amazon.com/amplify/console/pricing/

Because it's just managing static assets, the pricing is very reasonable. At 1000 free build minutes per month, and our current build taking only 7 minutes (which could be reduced much further with a custom container with packages pre-installed) we likely would never pass this (we would need over 140 builds in a month).

Future thoughts

While not in scope for this issue, amplify could be used to automate the deployment of the primary branch instead of using github pages. While it is probably less work to just setup a github action to deploy the source branch, it would be nice to only manage a single method of deployments. A couple of other minor benefits are

Github pages has limitations around its usage https://help.github.com/en/github/working-with-github-pages/about-github-pages#usage-limits . Most likely we are no where near the bandwith limits. The site size limit is 1gb, and while we are only at ~225mb, images add up over time
Public github pages do not offer any SLA uptime i can see, while AWS services do
Amplify fronts its s3 bucket with cloudfront giving us a CDN.

Evaluate site with axe browser plugin for accessibility issues

We will want to look at our current static generated templates for accessibility issues with the axe plugin. We can then address and inventory outstanding items related to the site.

Scan Results

Existing

Finding	Occurrences
ARIA attributes must conform to valid names	1
Elements must have sufficient color contrast	63
Frames must have title attribute	1
Form elements must have labels	1
Zooming and scaling must not be disabled	1
All page content must be contained by landmarks	1
Links with the same name have a similar purpose	1

New site

Results for the newly updated landing site from #136

Finding	Occurrences
Elements must have sufficient color contrast	13
Images must have alternate text	2
Links must have discernible text	7
Heading levels should only increase by one	2

TODOs

Elements must have sufficient color contrast
Images must have alternate text
Links must have discernible text
Heading levels should only increase by one

Search returns 404 page on enter

On pressing Enter while cursor is in the search box causes a 404 page at http://engineering.cerner.com/search?q={search term}. Hitting enter while in the search box should have no effect.

Refresh content on the Culture page

As we work to refresh the engineering.cerner.com site, we are wanting to revisit the Culture page to see if we want to include any changes.

Remove OSS projects that may no longer be active

We have a couple of OSS projects that we will remove from our OSS site page for being highlighted (which may be good to also archive the repos):

New Open Source Icon: Bunsen

Name: Bunsen

Image:

Description: Bunsen integrates Apache Spark and FHIR, combining Spark's scalable processing advantages with FHIR's well-defined and curated data. This enables a number of deep analytic and machine learning workloads that can be ported across systems.

@Kallie-Riff said she may be able to help with adding this, please let us know if not and we can get another person to assist. Possibly @anelson425 can?

Thanks in advance!

Adjust 'Engineering Health' title design

“Engineering Health” title size should be increased by at least one increment, maybe two.
Subtitle should include Cerner logotype instead of bolded “Cerner”. This should be one consistent weight if logotype isn’t included.

Update "Learn More" links in the OSS page for each project

We refactored several of the links and it appears some of them are broken which point back the the "Learn more" for the blog post.

Goal of this is to update all the "Learn more" links to the correct location based on availability of:

Blog announcement of the project
Wiki / README on OSS site

Navigation indicator (pixel triangle) disappears when you expand a post.

Include Jenkins ssh-steps as part of the OSS page

The ssh-steps Jenkins plugin project is built and maintained by Cerner engineers (mostly @nrayapati), which could/should be highlighted as well. Since the project it supports (Jenkins), manages all of its open-source projects in its org, that is one reason why it isn't included today.

https://github.com/jenkinsci/ssh-steps-plugin

This change would introduce / highlight it on the OSS page, and reference it to the blog that announced it: https://engineering.cerner.com/blog/ssh-steps-for-jenkins-pipeline/

Green stroke on bottom branded bar should be Cerner green (#7bc143)

Blue stroke above navigation should be Cerner blue (hex #0d94d2)

Cerner Speaker Tab

Support new Cerner Speaker tab to show embedded youtube

Transition from master -> main branch for static generation

We are wanting to change terminology used in this project. Currently we are using the master branch to support the published static site contents. Since this is a user/organization GitHub pages site, we have to host the content in the master branch.

Based on the response of natfriedman, it sounds like GitHub is in the works of making this happen for the default branch configuration of repositories. It is assumed that similar changes would also occur for the restriction on GitHub Pages.

It's a great idea and we are already working on this! cc @billygriffin22
— Nat Friedman (@natfriedman) June 12, 2020

https://docs.github.com/en/github/working-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites

If the repository for your user or organization site has a master branch, your site will publish automatically from that branch. You cannot choose a different publishing source for user or organization sites.

Open Source Icon

Can we add the Beadledom icon and description to the open source page, @Kallie-Riff @hCarmitchel?

Icon: http://ip-visprod/adobe/SolutionBranding/OpenSourceProjectGraphics/Beadledom/

Description:
Beadledom is a bundle of common components required for building JAX-RS web services. It is the starting point for new services. The core of Beadledom provides health checks, monitoring via Stagemonitor, API docs via Swagger, JSON serialization via Jackson, and integration of these components with Guice.

Evaluate site layout on Microsoft Edge browser

Looks like we may have overlap of text with the logo (Alan + Grace) when using Edge.

Fix culture page styling issues

Section Titles should be increased by at least one increment.
Padding between text and section containers can be reduced by 5-10 pixels.
“Stretch yourself as a dev” section image needs to be adjusted to fill space better (refer to mockups)

Alan and Grace at the bottom were a cool addition and provide more context/explanation to the header images. Maybe we can’t reveal them with elastic scrolling they can get their own section?

New Open Source Icon: jwala

Name: jwala

Image location: [https://wiki.ucern.com/pages/viewpage.action?spaceKey=UserExperience&title=Open+Source+Project+Graphics]

Description: Jwala is a web application that provides management for a group of Tomcat servers. Jwala is capable of creating and persisting definitions of Group instances, and exposes a RESTful interface to do so. The definition of a Group includes Web Apps, JVMs, Web Servers, and Resources.

@Kallie-Riff and @hCarmitchel can you please help add this icon and description to the EH blog?

Lazy load YouTube embedded video references

Currently the tech-talk tab loads all videos into the page during render.
These videos should be 'lazy loaded' onto the page - so when the user clicks play the video will load but not before that happens. We will use the same design for the upcoming internal speakers tab.

Thinking about using something similar to this to solve the issue.

If load speeds are still slow after this change we could consider looking at pagination (might want this anyway for better usability).

cerner / cerner.github.io Goto Github PK

cerner.github.io's People

Contributors

Stargazers

Watchers

Forkers

cerner.github.io's Issues