Workshop: Making Government Websites with Federalist + GitHub Basics
Articles,  Blog

Workshop: Making Government Websites with Federalist + GitHub Basics

good morning everyone online I think
there’s a whole group of you and good morning again to folks in the room thank
you for coming to this workshop on using federalists us web design standards and
github this workshops a little bit multi segmented and as the segment’s go on
we’re more and more flexible depending on what folks in the room need so I’m
going to start by going through a pretty straight presentation in the middle
we’re gonna split into two sections those that want to talk about managing a
complex site using github and federalists we’ll go in the other room
those that want to do they get huh basics training which is the vast
majority of you my registrations will stay in here and we’re gonna build up
from the ground up talking about what all the different concepts mean when we
talk about talk about github and then in the final section those that are in the
room and this this won’t apply as much to online folks so though y’all of
course will follow up with me afterward we’ll actually try to get on federalists
together and and have you using and working with it right in front of you
signing up during the break that’s my general plan I am very very friendly
with questions for folks online Jeremy is gonna be your conduit of questions to
me so he’ll post a question to me and I’ll whip down and answer it so make
sure you’re just talking in the chat there for folks in the room just raise
your hand I’m very friendly about taking questions as they come up or if things
aren’t clear the goal is to for you all to get the information not for me to
make it through a slide deck that’s not as important as you getting all the
information that you need and of course I’m gonna be available for follow-ups
both at my own local address as well as the general federal so dresses and
you’ll be a cop you’ll get a copy of this presentation after we’re done with
that I think we’re ready to get started any other questions all right let’s go
so today’s schedule he did arrivals we’re now doing a federalist overview
will do the breakouts we’ll check them with folks at 10:45 about what else
they’re missing in case we need to iterate on the 11 o clock session we’ll
have a break you can go out and get coffee and water and whatever else those
that need to go to the rest of their workday can and those that want to stay
we’ll have a more localized workshop for you welcome sir please find a seat okay
so this the presentations going to be focused on
Federalists itself there we go we’re gonna talk about five things in this
presentation first we’re going to talk about the problem that caused us to
build Federalists in the first place and I’ll try to make the case as to here’s
the problem I’m trying to solve if it’s not the problem that you’re seeing
that’s a great point of feedback I want to hear after then we’re going to talk
about how Federalist solves that problem as well as how the us web design
standards or the u.s. web balance system is involved in that we’re going to talk
about compliance specifically to make sure we answer your questions about that
then we’ll do a demo and I’ll show off various workflows and uses of
Federalists after I get the screen stall work together because I’m already
predicting them I have a problem with that with the Hangout and then we’ll
talk about next steps and move on to the breakouts so let’s first talk about the
problem that that Federalists exists with them making a website in the
government is really hard we’ve heard that from different agencies different
agencies quote me different numbers sometimes they say watching just a basic
HTML page saying hello world will cost sixty six thousand dollars or ninety
five thousand dollars or a hundred and thirty thousand dollars depending on how
you want to account for it and there are a lot of reasons for that but I’ll
summarize four here one is hosting especially the ability to deal with
traffic surges which if you’re in a data center mean you need a lot more machines
than you would otherwise need another piece is getting the authority to
operate or the ATO within your agency in whatever contexts that exists and for
some of y’all that’s a big lift for others of you that’s what’s an ATM kind
of a situation and and we’re here to solve both of those things
there’s maintaining compliance and then maintaining your site making and then
being able to update content and all three of these things or all four of
these things can be difficult so if I can move on there we go let’s skip them
okay okay so let’s first talk about hosting I’ve borrowed this this slide
from our friends at the cloud echo system which is our underlying platform
when you talk about hosting there’s a lot of stuff that you have to do you
have to do server acquisition facility utility at the point of the data center
and then there’s all this as it pertains to the platform and these
are all mean required for compliance and they all have a bunch of regulations
behind them you have different solutions that you
can choose that get you to that point of having the underlying platform and this
has nothing to do with the content of your site this is just all the stuff you
need to run a web server in the federal government you could run your own data
center which means the agency is responsible for the application of the
platform the hardware and the facility you could use infrastructure as a
service and when I say when we talk about Microsoft Azure or Amazon Web
Services or AWS that’s infrastructure as a service but even then you’re still
responsible at the agency level for a platform or an application or you can
use a platform as a service in that case that takes care of most of the of the
areas but there’s still the spots at the top federalists exists partly to help
solve all these things so that you just have to focus on your content there’s a
lot of complex security requirements and a lot of pages to read the number of
pages depends on how you count them but it’s at least 4,000 and includes all of
these different pieces and that is a giant lift especially for a small team
at a small agency trying to be able to lift and understand these things
themselves I think I see a lot of you nodding hopefully on the online as well
I have experienced this issue or not hopefully but that’s the world that we
live in and that’s the world that made us build federalists the way we did
content updates I’ll admit this is a harder workflow than exists for a lot of
folks but sometimes this is a real-life scenario where the content author at an
agency has to get content approval then send it to a CEO or someone to deal to
the contract who then send it to the contractor sometimes a prime contractor
who then needs to send it to the subcontractor who then sends it gets a
ticket which then has to be triage which is then fixed and if there’s a typo you
have to go through the whole system again sometimes instead of a contractor
it might be your agency central IT shop that makes the update for you but that’s
partly tied back to the compliance question because every time that someone
gets access to your website that’s another security possible issue and so
it kind of adds into the level of complexity and sometimes agencies solve
this problem just by denying content authors the ability to actually edit
your site because that lowers the security threshold but it
raises friction otherwise to make site updates and then lastly okay so when you
add it we could all these things together they add up to a norm of six
months to launch a website in the government and for any kind of if you
have a political appointee that’s wanting to watch something very quickly
that can be in transit bull if you don’t have a budget to handle you know money
for that long time that doesn’t work if you have something you need to watch or
announce it quickly that doesn’t work so that’s the issue that we are here to try
to solve any questions about that so far and remember for folks that are online
please leave your questions in the chat box on YouTube there’s a link to that
YouTube chat box from the digital gov event page so a lot of agencies solve
this problem with a CMS now it might be WordPress or Drupal and that is a
perfectly great solution to solve the problem as long as you have some other
things that are important to go on with it you need to make sure that you have a
team that’s managing that CMS you need to make sure you have a team that’s
dedicated for maintenance of that CMS when bugs come out or issues come out or
there’s a CVE released by Homeland Security saying you need to make sure
you patch this you need someone that’s watching over that CMS to make sure that
someone can’t login get root access and then disrupt all the sites so a lot of
agencies and offices that we work with are more like small businesses they
don’t necessarily have a fully dedicated team to manage that kind of CMS they’re
more like an auto shop on the corner of your hometown that has a web server in
the back corner that’s kind of handling its website but otherwise doesn’t do a
lot on the internet and there’s not a dedicated web staff and that leads to
frustration especially for small teams and small agencies or small teams inside
of our agencies as we’re all about spreading ownership so what is
federalists and how to set it we’ll solve this
the mission of federalists is to make it easy for people to launch content and
site updates by handling the backend solution of your website the first thing
I want to do as far as education in this workshop is to distinguish between two
things the front end of your site and the back end of your site the front end
of your site is how your looks and feels it’s how the buttons
look it’s one of the links point it’s all the stuff that people the public
interact with and click with the backend is the thing that’s hosting your website
it’s the web server it’s the infrastructure it’s the platform it’s
all the stuff the public doesn’t see it’s all the stuff that makes things in
compliance land especially really hard your ATO does not care about if your
website has a typo that’s on the front end your ATO doesn’t care if your
website has horrible colors that clash against each other that’s on the front
end better list is here to solve the backend stuff the US web design
standards are here to help you with the front-end stuff so that’s how those two
things work together Federalists is making the compliance and back in part
easy the US web design standards is doing the other part and we’ll get into
that in a second so specifically the kind of groups that we’re thinking about
would be a small office a microwave Chansey a program a campaign you can
look at plain language job as an example of a small website there’s Katherine
that we just that we just launched that’s run by a pretty small team that’s
interagency how many different agencies work on that team Kathleen but so that’s
it people kind of on their own time from three different agencies helping to run
this site we want to make sure that they’re equipped to run their own site
you’ll see all these examples but if you want to visit right now we have a brand
new page of examples that federalists that 18f that gov / content / examples
especially for you folks online that might be helpful so we want to help and
empower those folks to be able to own their content or you in here to be able
to own your own content so we do that by using something called static web
hosting so let’s talk about static versus dynamic web hosting I know those
are not the easiest to follow word sometimes it might be more you might
want to say basic web hosting but static and I named acharya lee the best term is
that we can use static websites work because you build them up one time over
here and then they sit over here and everyone from the public interacts with
them and they don’t change they can’t change they’re just a bunch of HTML
files or a bunch of pages sitting on a server that can’t be interacted with
that makes them cheaper in terms of for hosting aids
because they can be served at pretty low cost the cost is actually minuscule
compared to the average cost of a visitor that you’d have for a dynamic
site a dynamic site like WordPress like a WordPress site or something like that
is one where the user can actually interact with it where the web server
allows you to submit a comment and let’s think about it for a second when I
submit a comment my page actually changes that that comment changes the
HTML that everyone else visits if you visit a media website or you know a blog
that changes the HTML you can’t do that on a static server so you can’t submit
comments you can’t submit information any kind of interactivity that you’re
going to be using is gonna happen separately through a different server
that might run an API an API is a way of interacting with it with a computer on
the internet and sending it information but the cool thing about this compared
to a big CMS is that if you have a static site and an API server those
things together have a much smaller security blueprint than you would have
otherwise because you don’t have to worry about someone getting root access
to change all that stuff on your site if the API server only elects people you
know ask for data ends up being a way of doing a slightly smaller scope in terms
of things you can do but that applies to the vast majority of government sites
and then if you want to add in some of these other features and functionality
as I’ll show you during the demo time you can do that pretty easily using
using federalists and using API servers everyone with me so far there’s that
static versus dynamic distinction make sense folks online does that make sense
to you static versus dynamic can’t change this stuff or just can’t change
this stuff and I look for Jeremy to make any comments I don’t understand why it
doesn’t okay there we go so let’s talk about how the u.s. web design standards
play into this the u.s. web design standards are a project that came out of
eighteen FN are now owned by the digital gov team and they exist to solve as soon
as it loads come on maybe yeah this problem you have a lot
of different ways of building buttons and imagine this but for menus or for
side templates or for logos or for coloreds or for any number of other
things there’s a huge diversity in these systems and each one of these has to get
designed each one of these requires you if you’re a contract if you’re a
contractor you have to design all these if you’re a government official you have
to ask for these and then approve them versus just having one available out of
the box so remember how I talked about federalist is the backend solution well
the u.s. web design standards are here to make it easier to do the front end
stuff they’re not and the name standards has a lot of meaning in government
they’re not standards in the sense of being required there a design standard
is meant to be a set of tools that are available for you to leverage and use
and that team is actively thinking about you know the accuracy of its name but
it’s meant to be a set of resources that you can use out of the box so for
example the US web design standard says here’s a specific set of colors that you
might want to use that all work together that are all 508 compliant in terms of
in terms of the contrast that you can use that allow you to you know leverage
these things and if you notice this presentation is making a lot of use of
that color right there although it may not show up an image well so the US web
dunno handers are now part of the digital gov team that is Jeremy Z who is
for folks online the person that you’re talking with interacting with and he and
I are working together to push more content to make the front end side of
your work easier but I want to distinguish again between the back end
of federalists which is done in at V 1.0 and the front end stuff which is an
forever work-in-progress because all of you have a huge diversity of front-end
needs or focus in federalists is solving the back end stuff solving the ATO stuff
solving the compliance stuff you can see more information about that and the u.s.
web design standards federalists is here to solve the backend stuff the US web
design handers is here for the front-end stuff any questions about that so far
yes there’s a bunch of different ways to do it but that’s the it’s that’s the
same kind of idea about what they’re trying to get at
and it depends on how you start off so the process of starting off with that
you don’t have to use the web design standards with federal you could use it
you know is on the standards we didn’t and we weren’t involved in that
at all USDA dot-gov is on the standards we
weren’t involved in that and all that was our favorite kind of use case
because we were able to have impact without doing anything and I’m sure they
deployed it in different ways you can deploy the standards on Drupal you can
deploy them on WordPress you could deploy them standalone there’s lots of
different options and that federalists exists to help you with that but it’s
different if they’re kind of focused in different areas of course so let’s now
talk about compliance and do a time check we’re doing just fine timewise
okay so there’s two things that Federalist has for compliance and I’m
speaking here specifically to give you especially folks online in the room
tools that you can use with your security team and oh I should have
repeated a question that’s a good call so the question that Catherine know that
Margo asked was can you repeat the question what kind of fire to do that oh
yeah is our the web design standards like bootstrap and bootstrap being a
tool for starting up websites pretty easily thank you for the reminder Jeremy
okay so let’s say that you want to use Federalist and now you have someone from
your internal IT shop that’s like what is this thing where did it come from
who are you you know that kind of thing here’s the toy that you need to answer
it there’s two pieces remember how I talked in the first in that first slide
about the infrastructure in the platform well Federalist itself is supported by
infrastructure and platform it’s not running on a data center it’s running
and tried in Amazon Web Services data center or set of data centers that are
all working together via however they run their back-end Amazon Web Services
that’s provides all of the servers and infrastructure in management of the
hardware and we use a few different services that they use the first one is
called s3 that stands for secure scalable storage and it’s their back-end
hosting service and then we use their content delivery network called crown
front and we use HTTP that work in that that builds into the Amazon CloudFront
the important thing for your security folks to know is that this it has a
FedRAMP PA tio for those that don’t know what FedRAMP is that ramp is a program
where DoD DHS and GSA combined authorize a system
and therefore make it pretty easy to use and leverage and federal X is just
sitting on top of the work that Amazon already did admit to be secure however
it’s not inevitable that we’re always going to be hosted on Amazon the stuff
that runs federalists could also be hosted on other infrastructures we’ve
just done one so far in a you know time saving time saving time saving and
efficiency move the other piece here is cloud gov a platform as a service if you
don’t know about cloud backup I’d suggest you go to cloud backup but cloud
agava is a platform that’s built on top of Amazon Web Services that does the
vast majority of the things that we need for an ATO so it all remember that giant
one list of like compliance and security requirements from the top end cloud
backup is handling most of those for me Federalist is only responsible for a
small portion of them and I’m really thankful to the cloud backup program and
all the people running it because they make it possible for Federals to do what
it does on top of these things Federalist has done the work
individually as I wait my computer backup to get an authority to operate
from GSA that’s leveraging the FedRAMP certification of AWS and of cloud keV so
Federalist has an authority to operate and it’s our view that you can use
Federalists as long as your agency is willing to trust the ATO that GSA is
granted that ATO is not very complicated mostly what it’s doing a thing we’re
using different parts of cloud gov to work together and if you’re furious on
the technical back-end I don’t cover it in this presentation but you can go to
Federalist – Doc’s at 18f gov or if you go to Federalist at 18f gov you can go
to the documentation page linked at the top and you can look at the how
Federalist works screen and they’ll show you a diagram of all the pieces there
but basically we’re using a bunch of stuff in cloud bag of and GSA has
allowed us to ATO how they’re all assembled together to work together to
build out your site and on the back end it’s a I’m really happy to follow up
during the break about that but it that kind of we’re crossing the Rubicon with
that question – like stuff that hopefully you don’t have to worry about
because you’re using better lists Oh let’s now I think yeah current customers
so we have a lot of different agencies and pages already on federal if there
are 96 sites that are hosted in part of our ATO right now for a bunch of
different agencies including education interior NSF the privacy and civil
liberties oversight board Treasury and DHS a few different GSA offices and then
I know team agree on a process although that may have been signed in the past
week I can’t recall and seven sites under build so we’re it’s being used by
a substantial number but we think it can scale much higher and hosting this event
is our experiment to see if we can raise awareness in the federal community so
that we can boost this number higher does remember how I talked about each
heo costs ninety six thousand dollars or sixty six thousand dollars or one
hundred and thirty thousand dollars with federalists we can launch a new site as
part of our ato in just a few days because Federalist has already handled
all that back-end stuff all we have to worry about is your front-end and that’s
a pretty low lift in a pretty insignificant list it’s not invisible if
your site has a problem or if it’s doing something it’s not supposed to we won’t
let you go i but it’s much easier because all you have to worry about is
your content if you have a page that says hello world you can go out with
that in under a day if you have to okay so I’ve been talking for a while any
questions so far or shall I move into a demo let’s do a demo give me a second to
get the screen sharing all work down here it didn’t break the screen sharing
that’s so great okay for anyone in this room that is already using federalist or
anyone online that is already using Federalists you can do some of these
things with me for other folks in the room you’re gonna have to watch and
we’ll cover that more later in the meantime you can alog into github and
but well y’all going to get hub in a little bit for part of this demo so this
is the federalist front end in both it both doubles as the hello federalist
site for us as well as the wall gun screen in the back end of the app so i’m
gonna press the login button the first thing to know about federalist and
compliance is that you don’t have to have a separate account for federalist
instead we just build on top of your github account so your agency just has
to control who has github permissions to edit stuff admin stuff reads stuff but
essentially if you have control to edit the backend code of the site then
federalists thinks you federal this is okay granting you the ability to edit
the federalists settings for the site so as long as you can mess up the site that
way you can mess up the fight this way it’s basically the way to think about it
but it means you know a separate set of logins yeah Jimmy not using wall gimmick
abusing get the github that calm credential and the question was can you
clarify is federalists using a log and ugh of credential or github tom we’re
using your credentials because we don’t want you to have to
track in two different places who has access to edit stuff about the site you
shouldn’t have to you know log into federalists and change
permissions there and log into github and change permissions there if the site
content sitting on github just in one place and this lets us simplify and it
also makes her ato easier which makes the cost lower for you know questions
online so far great so I’m looking at a whole long list of websites here most of
you are not gonna have anything like this list I just do a lot of demos and
so I have a lot of sites well let’s click into one of the sites
for example and look at one of our templates so this is the federalists
modern team template and all of its gory and it doesn’t have a lot except for
some basic gsa content and it has you know a few
different items you can click some different things to scroll through a
header and a footer then it has this about page I want you to pay attention
to this about page it says about GSA mission history some basic type of web
content so you in web development in the life we’re in front and land right now
right this is this is a header this is a smaller header this is another header
we’re gonna edit this stuff in a second off the template you can see this
template is sitting at HTTPS which means it’s secure because federalists
automatically provides the certificate to host your website securely you don’t
have to worry about that all you have to do is current connect your domain name
system to the right place so here’s our template we’re now gonna make a new copy
of it so I’m gonna go to this add website button I’m gonna choose the
modern team template which is the template we just had I’m gonna press use
this and then I’m gonna make W slight demo 24 because I’ve done this 24 times
now on this on this particular account I’ll press the create site button and
really hope that there’s not some kind of bug that just goes to crop up today
and there wasn’t it’s already building that’s great I’m always nervous whenever
you do that everyone that ever demo software always has that paralyzing fear
I like to name it that makes it more control okay so now I’m building out the
site let’s talk about what’s actually happening on the back end right now
federalists is taking the content of this template sitting here the back end
inside of github and it’s forking it it’s doing an action in github that
we’ll cover in the training a little in a little bit but it’s making a whole
copy of this code so the code that builds this site the front-end code that
builds the site it’s making a copy of it and it’s putting it over in my personal
space in github it’s putting it in my personal profile it’s calling it W slack
demo 24 and then it’s gonna go into federalists and and build out that site
right in front of me so if I press the refresh button you can see that it is
the bill that’s currently in progress open up this screen you can see here’s
the code sitting in and github 4w slack demo 24 now this screen I’m going to
cover a lot more about and they github training so if it’s a
it’s new and scary especially for folks online please don’t worry about that
you’ll be able to we’ll talk a lot more about all the different things on the
screen and what it means for right now I just want to direct your attention if
you can see especially folks in the back it’s hard to see there’s a list of
folders here I’m gonna go to the one that says pages and then I’m going to
open up the one that says about MD so here’s that same stuff if you remember
that was sitting here in our template about GSA mission in history so someone
is streaming and needs to turn off their volume thank you but I appreciate your
interest in hearing me twice so when federalists is building up
something you might you might be asking well how does it actually take my raw
web content and put it up there well your raw web content can look a few
different ways you could just make a bunch of HTML in Dreamweaver and we’ve
had a contractor that actually did that made a bunch of stuff in Dreamweaver and
then shipped it over to us and we’ll publish that exactly as it is the vast
majority of federal sites use a static site builder to put their pages together
a builder is something like Jekyll or like Hugo you might have heard of those
those things before and they work like a like a chef with a recipe so they take
the raw content of your site is sitting here and what we call a markdown format
that’s the dot MD that were and when we say about that Indy up here and then
somewhere else is the actual HTML page that has all the images and styling and
all that kind of stuff the advantage of building this way is that you can give
your content experts the ability to edit your site without having to worry about
all that HTML stuff that even its tracks all of that away but it’s completely up
to you Federalist makes it possible to go one way or the other way that matters
a lot especially in the government for teams that may not have a dedicated
front and expert or a dedicated expert that knows HTML Katherine if I can pick
on you one more time like you have a team that knows a lot about content and
doesn’t know a lot about the specific colors and stylings the intent of the
system is to let you edit your content without having to worry
about all that color and styling all that Jekyll does in the build process is
that it takes your HTML templates that you have it takes the content that you
have and then it mixes them together so I want to point out here this says
layout page what that means is that it’s it’s telling it’s telling federalists
hey take the HTML for a page whatever that looks like in the template combine
it with my markdown here make that file and that’s the resulting HTML that gets
published so at this point I’ve definitely stalled long enough for the
bill to complete successfully awesome and we’re gonna look at the website
you’ll see this looks like an exact carbon copy of this because it’s the
same back-end code and one of the points of federalists is that you can use all
the code sharing the github makes possible you can borrow beg steal from
all the other folks that are using federalists to make your site with the
best way possible so I’m now gonna close my template pages
and go back to this about page that looks much the same now I want to edit
some of the content on this about page so I’ll note this is not an easy as an
edit processes you’ll have with Drupal or WordPress you you gain a lot in the
world of compliance and ATO you do gain some complexity here but I think if you
sit to the next hour anyone on your team or you will be confident doing these
edits in github I’m gonna go to this edit button on the top right and press
edit this file and this is what stuff in markdown actually looks like the headers
have these two hash tags in front of them or three over here and then
otherwise the text is just written if I want to write something in bold I say
this is in and then I put asterisks on each side if I want to make a bulleted
list I few go this I’ll do starred space this is a bullet I want to make a
numbered list this is a number less hold on you’ve made that number is also a number less there’s nothing
too complicated to make some edits here generally though people aren’t in the
government website aren’t like bolding and italicized but they may be using
some numbers but there’s nothing this isn’t very hard if you do have to
remember what the syntax looks like or how to actually format it correctly but
the good news is that and github you can press this preview button and it shows
you oh here’s all the things I added this is in bold this is a bullet this is
the number of Lists this is also a number list now I want to also delete
some stuff just to show you what that’s like so I’m going to delete this history
section and I’m going to add something to this this is an added sentence so
I’ve made some content edits here in this screen which is not as friendly I
know as WordPress or Drupal but hopefully not that scary if I preview it
it’ll show you oh I deleted some stuff I changed this
that’s what the yellow means would that added sentence and I added that stuff we
good so far and I’m getting requests to bump up the font size of my screen so
folks online hopefully you can see that a little bit better
I made that green I changed that and I deleted this yes yes you can so Jekyll
gentle lets you put in HTML straight when you need to or if you want to do
that it’s not it’s not as simple as like you know you can switch back and forth
on a given page but it is possible to do that
and we’ve done that before so I on this page if I recall correctly and I might
even corrected by Jeremy if I’m wrong about this you can actually put raw HTML
into the markdown file and it will still render it on that page in that section
specifically so you exact precisely yeah that’s that’s one of the exact purposes
okay so I’ve now made these edits we’re gonna talk more and to get a basic
session I know a lot of folks are curious about that about what all this
stuff means at the bottom here but for the moment I’m just gonna do this thing
called creating a new branch I’ll make a branch that says W / – demo and I’ll say
whoa I pulled this we lost it didn’t we hold
on are we good it sounds sorry about this everybody the sounds coming from my
own computer you oh it doesn’t show anything oh that’s
fine no no we’re good oh I’m not sure okay there we go hold on
I didn’t share this does that do it okay we’re back sorry about that everyone
that oh that’s that’s what happens when you just disconnect one cord and I have
a question online Jeremy says yes I’m correct about how Jekyll works awesome
yes you need we will talk exactly about that in a moment
and it’s a great question so I’ve now made that edit or I’m making that edit
I’m going to press propose file change or this n is a edit or my demo and press
the screen propose final chain button and then I’ll press this next screen
button that says create pull request we’ll talk more in the next section
about what that means for folks that don’t know so what federalists is
actually doing on the back end right now is it’s building out a whole new copy of
my site a whole new copy of the entire site with this change so that the change
can be approved so if I go back into here and I press this refresh button you
can see the list of builds here my W slack demo build right there that I just
did that build is in progress federalists will build out every copy of
your site that sits in github the development copy the final copy all the
different copies and that means if you want to test if a change looks good or
if it works correctly it’s very easy to see what it looks like using the
federalists platform so that when it comes time to put the site live you know
exactly what its gonna look like purpose of federal is in doing this is
to make it really easy for version control to happen or if you have a
agency executive you could just send them the link to the new site and they
can go oh that looks good and they’re happy with it it makes approvals pretty
much a breeze so what’s happening right now is federalists is doing that same
process of pulling in the code building out it has to build out the whole site
again even though we made one change and then it’s gonna deploy that that new
code the about screen is different and it tells you in github with this yellow
it’s item right here to build is still
running and until that time if I click this details button I don’t have the
logs so let’s say that I made it an issue in or problem in my build you’d
see that the logs would tell me oh you meant you had a typo here or this screen
didn’t work but in this case we went through just fine so I’m gonna open up
this detail screen and you’ll see now that I’m not in the same site I was in
before instead I’m at this federalists proxy
address and then it says slash preview this is where all your site previews
look that aren’t then aren’t live you’re looking a github you see how I’m in W
slack that’s my personal profile slash W slack in the 24 that’s the repo we’ll
talk more about what that means but here I’m at the same address have you slide
them except W slightly mo 24 and then this is the name of my branch that I
made now if I was at the about page there’s my changes and I can look at
them make sure that they work so federal is just building out put them right up
here if no one has any comments or edits to make could be you know really
important changes I’m gonna make and now then it scroll down and typically you
could set up some kind of approval process if someone else has to sign off
or approve but for the purposes of this demo I’m going to improve my own my own
edit I’ll press merge and merge and then all that’s gonna happen is the stuff
sitting here let me actually restore that the stuff sitting here is gonna
move on to the screen when i refresh it in just a little bit so that’s the
process of editing in Federalist you make him edit you see what the copy of
the site looks like and you move it right on over and no one has to do any
kind of interaction with the backend of your system the actual build process is
happening in the backend of cloud backup the actual deployment process is
happening with Amazon s3 you have no access to any of that and the thing
that’s nice about that is that it means that you can’t mess up each other sites
which means that you can all trust that any if anyone up I was using Federal’s
as a malicious actor they couldn’t mess up your site we have a walled garden set
up with that and the technical explanation for that’s available and our
documentation site in the white paper let me refresh this build complete up
its the build is still in progress of the update
the other thing to talk about in terms of if you need to troubleshoot or have a
problem federalists does show you all the files that have been published into
s3 so I can press this view files button and it shows me all the different things
that’s uploaded and that way you can verify or troubleshoot if you have a
problem so you get all the things that you need out of the backend of the
systems without actual access to the backend there’s a there’s a few things
on the settings screen and for the most part these just help you go live at the
right URL otherwise you have all the tools that you need because federalists
this this back-end stuff doesn’t relate to the front end of your site so it says
the build completed successfully so now I’m going to refresh this page tada the
site is live and that took what five minutes ten minutes
that’s your content update process when you need to change something if you want
to change something significant it’ll happen just as quickly because Federal’s
just has to rebuild your site so we are six minutes off of the time that I
allocated for this is everything that we did so far makes sense to folks any
questions from online or in the room yes sir yeah every branch is gonna have its
own URL so as you update a branch that branch URL will keep updating you can
have infinite branches I wouldn’t recommend it but you know you can have a
lot of branches and each one of those is gonna have its own URL so let’s say that
you want to experiment with three different types of of pages or looks or
different you know deployments of colors and the web design standards you can
make all three of those as a branch build-out all three of those and then
show those three in a meeting and have people all click around in them so they
don’t have to choose based on a screen shot they can actually choose by
interacting with the site and then whichever one is the winner is the one
you merge into the final copy of the site other questions yes I forgot to
repeat it again I’m sorry just history changes let’s say you
change something and then they want to revert back to
previous version I’m instead of having multiple branches if you don’t have that
previous branch is there a way to go back yeah so you do that with with
finagling within github that is probably not something we’re gonna cover in this
course but I’ll show you right here here’s a full history of all the
different sites that we did and I can look here and actually examine right
here this is the edit that I made so this is the the code representation of
the history of I added this stuff in bold I had these number lists we deleted
that stuff github shows that all so the entire history of every edit that it was
ever made on your repo is there in public so it’s very easy to go back and
pull the code from the prior version yep that’s me right here we’re gonna cover
that in the basic section yes sir Thank You Janelle because of the build process
and the ATO so all the framework has already said you can’t change anything
in the framework you can’t change anything about the backend but nothing
that you’ve seen and interacted with in this demo is on the backend it’s all
that’s all the stuff so you have complete control over what your site
looks like all the different pages how you click around them a federalist site
could be a one a one-line hello world HTML it could be something much more
complicated all that stuff is up to you and in your purview vendor list just
does the backend process scanning security compliance if there’s a
security update we make sure that gets updated within you know within a few
days when you need to so that you don’t have to worry about your site the other
nice thing about your site is let’s say that your site was rendered with some
kind of security issue well no one can interact with it it’s static it doesn’t
change so the only way for your site to change is a federalist builds out a new
copy of it and deploys it that means we can feel pretty good about security
questions oh wait bye-bye there yeah right here sir Aven yeah can you help her but for the
for the styling hmm is it in line or css the u.s. web design standards I want to
see if I can get Jeremy Jeremy if you want to type an answer to that now I’ll
read out what you say but I’ll answer while you’re doing that the styling the
u.s. web design deters come with a bunch of stuff sitting in other files and
other formats that come and can be attached to CSS you don’t have to put it
in line but in line you’re calling certain classes in your HTML that
explain that oh yeah it does have a CSS component yes it absolutely does yeah
that that’s what that’s how you’re getting and rendering your styling
Jeremy’s answering a question there great thank you and you can see these
layouts for example if I go to page that HTML this is what the actual HTML of
that site I just showed you and you see how it says class USA section the USA
sections a US web design standards thing so this is all that your site actually
requires in the rest of its being called for the standards Jeremy says how you
build your site is separate from al federal strokes right you can build you
can use the standards in a bunch of different ways and not stick a
Federalist man nope okay we’re at 9:59 yep one more question okay okay we’re at
9:59 so we finished with the first section we’re now going to split into
two different sections um David can you stand up and wave your hand please
that’s David he is going to take you into the other room if you want to talk
about the deploying and using the web design standards and federalist on a big
complicated site managing that with github and here we’re going to be
focused on the github basics and building up from the ground up there
about how to use that federal still be part of it but not a big part this is
this is the second part of the workshop and then at the in section and West
folks have really other ideas I think we’ll get you all done by federalists
and using it yourself so with that let’s take about three minutes to move to
where we need to go those that want to follow David can those that want to stay
in the room can also do that there’s a question on the line from Jeremy the
just Department asks can this be used for a government
Trinette if your internet is public then short if it’s not we’ll have to work on
customizing federalists so that we can support it behind security but
federalists is designed and build an ACO to operate in the public with public
content that’s about the right percentage of people I’m expecting to
leave you okay hi everybody we’re back to get her
basics a whole new session with a whole new me I’m now watching the live chat on
YouTube so if you have any questions just pop in there and I will be looking
over um for this class especially and I’m especially talking to the folks
online it would be good if you silence your chat close your windows you know
mute your phone try to really pay attention because we’re gonna be
covering a lot of topics in this meeting that build on top of each other
and if you miss one section I’m talking especially for the folks online because
someone calls you or someone stops by your office or any number of things it’s
easy to get a little bit lost and to not be really sure how to catch up so I’d
really ask that you focus on this and if you invest this hour then I think github
will always make sense forever into the future or at least hopefully to that
point okay so this is the github basics class this this slide deck is actually
hosted on Federalist so it’s gonna show you some Federalist capabilities to host
slide decks this is all in markdown rendered using something called reveal
j/s at slides at 18f gov slash github – basics for those of you on laptops
right now you can see this deck right now by going to slides at 18f gov slash
github – basics and that’s also in this class especially please stop me if
anything doesn’t make sense because as I’m talking here to the person that has
no idea what they’re going on has no idea what a pull request is all the rest
of it we want to really build up from the basics here thank you for posting
the slide deck way okay so we’re gonna talk about concepts practice will do at
reference materials and then you have a link to the slides so let’s talk about
the concepts first the first concept I want to talk about is git git is here to
solve a problem we’ll start with the problem again how do you deal with
multiple copies of a document let’s say that you are editing some kind of press
release to push out about a program and then you have you know Wiegel needs to
sign off on it HR needs to sign off on it finance needs to sign off at the
program leadership needs to sign off on it so you write up a copy
extend it to four different people they all send back edits and you have to make
those edits all work together and sometimes the edits are contradictory
that is a giant pain you’re gonna end up with a process of you know where you
have to send it to one person they make changes another person they make changes
another person they make changes and that’s long and slow and difficult
you’ll end up with copies of documents called like the draft with Fred’s
comments or the final copy or the final final copy or the final final I promise
this is actually it copy and it’s a painful and tiring get is here to
provide something called version control and that would just let you track
multiple edits by multiple people on the same thing in one place and let you jump
back in time programmers like it because it makes it pretty easy to find bugs
let’s say you have a bug that shows up in your software you can just jump back
in time until when the bug doesn’t show up and you’ll be able to isolate oh
that’s the change that caused the bug to happen which helps you solve the problem
but for us that are doing content or web development it’s still an easy and handy
to have it so that you can track and get approval for various kind of software
updates yet is a tool that lets developers do version control you never
have to use get itself when you’re using github but you’re using concepts from
get get is something that you really use a manipulate inside the command line but
that’s not necessary to run a page on federalists yes sir okay well let’s now
talk about github github is a web interface forget it’s the website like
many others there are lots of competitors out there and we don’t
endorse any of them specifically that allows you to use stuff from git and
it’s used by many government agencies one reason for that is that github for
public repositories is free and so there’s no buy required if you want to
use github go to site content and just like a typo fix so let’s look at this
screen for example this is just adding a single word to so much larger effort to
enable more businesses view or deleting that line in the pink then with white
house D is a much more direct whereas this jutsu we just added a lot
and yet this screen has so much information it’s really scary for people
that haven’t used it before and I had never touched github until I joined the
government too and so on years ago so let’s try to deconstruct this page a
little bit first thing we say is that this is the person that made the change
might call you Andre we made the change on January 5th typos fix he made it in a
place called master that’s what he removed that’s what he added and then
there’s all this stuff this is really more used in get more than github but
this is the name the long name of the change he made and that’s the short
version of it with six letters most of this stuff you don’t have to worry about
if you’re using github for content edits or for the basics you just need to see
oh this is the change that was made and you can look at it like this by saying
oh and remember how what you did the preview before you can see this little –
and that’s the change that was made you can also put the split button over here
and see okay click it one more time one second you can see here oh this is the
old version and that’s the new version there’s lots of different ways of
viewing what’s going on with get out here my head’s not my head sorry about
that so that’s the that’s what an edit looks like and github it’s a lot of
stuff to basically just show a small type of correction
but the main thing here is what’s in red and what’s in green let’s go back to the
slide deck it is gonna get hub will be our platform for the rest of our
concepts today first talk about orgs when I was kind of github screen you can
see that there’s github calm slash white an example that is github calm slash 18f
which is my office so this is like a profile screen you as a user are gonna
have something like github /w slash or whatever your user name is and this
shows all of our a thousand and sixty nine different code repositories that we
have at 18f the order gets the first level of
organization and you always will see it and you look at the top left of a github
page you’ll only see the org show up first or if it’s your personal profile
you’ll see that show up first and that’s always a github back slash the name of
that work my personal github account is slash W slack and you’ll see
here in my repositories I have 89 including W slack demo 24 that all you
all saw me update 17 minutes ago you can see I’ve been doing lots of different
demos of federalists here and all my different demos but this is the top
level of organization and github when you look at a github address bar my goal
here is to make it so that you can look at a github address bar and always know
where you are and always know kind of what’s going on just by looking at that
by itself it’s get pretty long call okay the next line is repository or repo it’s
just a folder of files that you’re doing version control with it lives in Newark
or lives in a personal account but it’s just a folder like you could have on
your desktop with files that you’re using with version control so here’s an
example you can see this this this is like a local file system it says
underscore data underscore includes assets post plugins layouts all that
kind of stuff when I look here you’ll see underscore includes underscore data
posts plugins layouts so this is just a web way of looking at this kind of
screen one way is how it looks on your local computer one way a how it was in
the internet but it’s just looking at folders version control on the internet
and if we look here let’s decode this URL and this is hard to see I I might
put a bloat up a little bit this is slash 18f the org and
18 not the repo if I look in the top left here you see the information
repeated 18f the org 18 not JSA techs have the repo so wherever you land on
github you can always look at the left to understand where you are which
org urine which repo you’re in the top left is always going to be your friend
for identifying that even as much as you might be caught in the rest of this
stuff yes sir yeah that’s the last thing that happened to that folder and what
and what someone did so the last thing that Andre did enjoin was that he did
this change called format fix to one of the files so I can actually click on
that open that up and go oh he we we didn’t have a space between our
different are different italics and so it didn’t show up right so we added that
a folder description this is all just about managing that the content yeah
that would be nice but no this is this is this is pretty fundamental in terms
of just trying to look at all the different sites and this is helpful
fragrant figuring out who made an update last in what section as you can see over
here some of these have been not been updated recently at all I’ve been
updated much more recently just depending on what the content is so we
don’t we don’t have to edit them when you think about the site you know your
content and your actual styling can be different you look at the content all
the time the styling itself might be updating much more much less really
rigging the screen 18f the org GS 818 F to G is there you have the repo and then
there’s the single on the top that says you know commits and branches and
releases let’s give them all that now a commit is like when you save a new
version of something but it’s smarter than that we already showed you before
what that type it looks like that gets remembering not only what that specific
changes that you made but the entire status of everything in the repo
everything that folder when you made that change so let’s go back to one of
these past commits that Andres made this style at its one I opened up this this
is the change he made looks like he it’s something on this strategist thing to
fix the typo style edits he did something to fix the style I can’t see
what it is and then if I want to view what the whole repository looks like at
that point this is the repository of that version in time and I can browse
around it so it makes it very easy for you to say where did my website look
like canucks ago you can just jump back to month and see all the different
styling content it’s very easy to track all those things and trace them
individually it’s not usually a purpose of going back in time to find an old
version but you can because a commits not just remembering the specific edit
you made but what the entire site looks like at the time it’d be like if
Microsoft Word you know how you can like restore restore old versions what what
if you could restore every single you know step back through the entire site
control Z all the way to the dawn of time it’s like being able to do that next up is the idea of a branch a branch
sits inside a repo and it’s like a little sandbox for other people working
on the project to make contributions without changing the main copy of a
project so your main copy of your project might be a branch called master
we look back at 18f 30s attic up here you’ll see branch master that’s the main
one or if we look at the federalists repo you’ll see here arm our main branch
is actually listed staging but the branch we do production is master for
base branch because we make all our changes on a staging version first we
make sure they all work actually this address called federalists type and
staging that 18f drag of looks exactly federalist but had some changes to it
and then once we’re happy that everything is working we didn’t break
anything then we move them up to master the branch it’s just another place for
someone to experiment with that’s like okay
remember how in the Federalist demo that I did a little while ago we made edit
and we open up a new branch I made a whole new version of the site that’s
what this is I’m making a whole new version of my site with my edit that
someone can look at and that it an update branch is like building out
another copy of the house on the same property and see what happens if you
change the floorplan same property completely different house operates with
Federalists and Sohn what about master he talked about state it what questions
do you all have about this especially for folks online what making gets them
so far what kind of conceptual and sync some nods in the room okay
branch just another version so I’ll show it off a little bit more let’s look back
at my one of my demo sites then modern team can put back in the Federalists
back in here so far so good thank you I appreciate the feedback from
online so for example our modern team template it has three different branches
I can jump to the W / update branch you see that one is one commit behind master
so it’s missing something but it was from November first and then this one is
from October 24th and it’s also a little old but these are just all the different
versions of the site that exist out there big thing about branches they
exist inside the repo does the Justice Department that’s a great YouTube name
what happens if two people will try to edit the same file at the same time
you’re gonna have a collision that’ll take place and the person that made the
edit the second time around is gonna be said hey the Edit you made didn’t work
and it’s gonna show you a screen and make you reconcile it at the time or
just cancel your edits so you typically want to coordinate so that two people
aren’t doing that but the event yet that makes it pretty easy to address and
resolve that when it pops up it’ll just it’ll basically show you here’s one copy
here’s the other copy choose what the final copy looks like
great question I’ll talk about a fork works and branches are pretty easily
confused so remember we talked about with branches now we’re gonna talk about
Forks orcs are on someone else’s property with they’re on branches though
if a branch was another copy of the house on the same property a fork is I
walked over into my property and I built the same house and that means that it’s
not subject to the governance of the branch it’s not sitting inside your own
repo so for example of that um what’s what’s what’s a good fork that I want to
use here so I look at eight you know if we look at the web design standards
let’s look at some of the forks we have of this as soon as it loads I may have
picked something it was too popular let’s see there we go I’ll pick on Brian
so be ruffridge I think his name is Brian if I remember right he has his own
copy of the web design standards and it’s it’s in his old work his profile
but it has the same name and he has the same branching structure as the other
web design standards so if I go back this you’ll see here it says develop and
then for Brian has almost all the same stuff some different things though it
says Fort from this and it has his last update was five days ago where his web
design standards last update was 21 hours ago so now these are two different
copies of the thing just can be operated on independently do four different Forks
can be operated on independently the difference about a fourth goes that you
don’t control it someone else has copied your code they can go and do whatever
they want with it it may decide to send something back to
you but they don’t have to make sense so Forks someone else’s property in a
different org at the same content and then a branch same property federalists
only builds out ranches it only builds out stuff inside
your org so if someone else Forks your site and tries to make an edit to it or
update federal it isn’t going to build it for them because Federalist doesn’t
support that or get supports your site in Europe so that means you have to give
people permission to edit your site in order for them to be able to edit it and
use and use Federalist if you don’t give them that permission I have to make
their edits using forks they won’t be able to use the preview functionality after the slide back pull requests this
is the hardest term and it makes no sense without it like plain language dog
of this is not plain language and knowledge can preach that to the Gotham
up a pull request is a request to pull content pulling one branch into another
it’s saying I have this branch over here and I want to request that changes from
over there get pulled into over here and when that happens it’s called a merge
because back when yet was just in the command line you use a command called
git pull to do that so a pull request is basically saying hey github can you
please do a git pull command and pull the changes from over there to over here
well that’s a pull request is a request to pull the changes from over there and
no over here when I open that pull request from earlier today let’s
actually go back and find that so let’s go back to my own personal repo I think
it was W select demo 24 that I was in hopefully yeah bingo so this is the pull
request that I did and we can now understand what this page is saying whew
so it says I want to merge a change into the master branch from the W slack demo
branch and the changes I want to make are there’s the bold here’s the bullet
here’s the number west here’s the mission stuff changed and then deleted
history and I’d rather will turn it this way so I’ll click on that
so repor request is saying I did this commit I changed this stuff can you
please pull all these over into the main copy of the site it’s just real quest
question what are the implications of poor request between
staging and master branches what dependencies change set up a standard
process to pull your changes through a standard flow in Federalist case we
always pull things into a stating branch we make sure they work and then we put
them in a master branch if your site has a strong change control workflow and you
need you do that you can do it plus they just have one master copy you test out
the changes separately and then you merge them all into the master copy you
don’t necessarily need to have a staging branch but it’s nice to have it because
it means you have a place that you can you have like a mandatory rest stop on
the way of a change to going live on the under live website that would especially
apply if people need to rely on your website not to have typos or problems
you always want to have a place for that final check the staging branch controls
that so in practice what that means is that we just never merge from from you
know our preview trialing development branches into master
we always merge into staging large from stage into master because the thing
we’re moving around are these individual commits members so yes and I think
that’s something I want to there’s a lots of different ways of doing that
depending on the use case so we have to like figure out which one we’re doing
the first step though is that you have to make sure github repo private which
means you have to pay github for it because otherwise all those edits that
you’re making or public in the first spot that has been a pain for people
wanting to embargo information and stuff like that
well we typically see was that folks will oh I need to repeat the question
Bruce’s question was if we have something that we want that’s a
sensitive that we want to make sure is not embargoed or is embargo and that we
don’t want to put out in public and I’m talking about how to do that you can the
most common workflow I would expect is to make your github repo private for
whatever that stuff is maybe just build out maybe maybe actually fork your main
site into private Bell build out a branch that does the private thing that
branch is public but it’s not Google’s not indexing it no one can find it if
they google for it whatever else and then just show your show your executives
that and then you don’t need the private repo anymore so you can have a version
like that relatively easy and that enables your website to still operate in
public but with you being able to privately kind of preview things but you
are there’s some tension there because github and Federalists are supremest on
openness that being able to restrict that it’s difficult I’d want to talk
more about four different ways of doing that we want to make sure we choose the
right one for the most number of people let’s now talk about issues issues are
conversations on github associated with a repo you can have ideas comments
suggestions if you’ve ever been on like an internet forum an issue is just
basically a forum but with a higher expectation of professionality an
example issues page I’d like you all to go to this please if you have your
laptops open even folks that feel distracted go to slash 18f
slash hour of code slash 18f online folks especially talking to you
18f i get up that complex 18f slash hour of code we use this for practice it’s
not working are you capitalizing anything in there
oh the link is in the chat now oh yeah slash github duck um
slash 18f slash our code now I’m gonna click on this issues tab has everyone in
the room got in there raise your hand if you’re not there Bruce is still going
you find it Bruce they’re fine I am so sorry ok so now I
am going to do an issue so I’m at this screen I’m gonna press this green button
in the top right that says new issue everyone do that with me ready and
online people too quick now we’re at 18f how
or of code issues new this is my issue for class you can type in here whatever
you want but let’s try doing some markdown if you remember it
mark round involves this is a header for example this is some body content then
this is a bullet and this is another bullet remember to have a space there
and you can use this preview screen to make sure that looks right if you want
to experiment you know have three things makes a smaller header you can do that
at the time my editing stuff in issue is anyone not able to see the screen anyone
having a problem with the screen at all this is this is our exercise number one yes you don’t have this stuff on the
right yeah that’s a plugin I use as part of managing github that’s a GSA plugin
you don’t need that this is just all stuff for me to manage the issues for my
big complex projects right we’re just focused on the stuff in the left right
now a great question the question was she couldn’t see the things that are on
the right of my screen where it says pipeline assignees labels all that kind
of stuff yeah that doesn’t exist for for other views and that is okay okay so now
I’m gonna press submit new issue after all of you do and we should have a bunch
of new issues e21 click how about look at the issue us if shoes that just
opened up whoo thank you so we can look here and I’ll just pick
on Matt hello world bullet one bullet two and some italics yeah you did it so
this is how to contribute on it github issue thread you’re just talking back
and forth with people if I wanted to say something back to Matt I’d go Matt hello
you found an issue yay or something like that and comment I’m going to go back to
Shoeless because hopefully people online are also filing it now there’s 14
awesome good job people online and I will go
through each one of these issues later on today and I’m gonna reply back to you
and then close out your issue and I’ll answer any questions you have so you
didn’t need questions about the class that you want to ask me directly you can
just post them in here you can come back to this as many times as you want to we
have folks that post in this online when they are like catching up on all
trainings you can send people to here and they can experiment to their heart’s
content well there’s 15 yeah I feel so happy
about that for that time to write and file an issue but note that issue has
nothing to do with the code it’s just a place to talk about different issues
around the website or to flag a problem so let’s look for example at an issue on
the web design standards someone filed something saying the select arrow is
missing in IE 10 and 11 starting in u.s. web design standards version 1.4 x
here’s how to reproduce it etc and then people are already talking about it when
the issue is fixed rather than one of these closed ones let’s look at focus
disappeared on hover so Maya filed an issue that said the
focus disappeared when I hover it and it shouldn’t do that she assigned it to
herself and then she fixed it and it’s focused in on hover pull requests so if
we look at this pull request and now we all know what a pull request is we can
actually understand this she fixed the focus state by doing some code things
there’s a preview here because the web presents a entered site is actually
hosted on federalists you can look at a version of the site that actually has
this fixed and this is the back end component version of the site so that’s
one of those federalists previews that we already showed you we can look at the
files that she changed she had to remove some stuff here and add some stuff there
and some CSS files whatever those are and then when she merged it and it went
live so the issue for kind of functions as a tracking system for them you don’t
have to use it like that it’s a great place to have race of the comments 17
issues open now makes me so happy folks and you can also experiment this
issue to figure out oh this is what it’s like to edit content and mark out
because that’s all you need to do in order to edit content on the markdown
site any questions more about issues yeah
yeah it depends on how the site works so there’s two let’s talk about two
different build up out of the github basics for a second and I’ll repeat the
question how does this update that Maya did land
on a site that I make if your federalist site is building entirely from your own
local content that’s hosted on your own github repo you have to update your own
github repo in order to get the update if your github repo says hey and
building this site you’ll look over there for the code or for the
instructions and that over there has been updated then you are good so you
have a choice that you have to make you have you can either rely on something
over there there and it creates a dependency for your site or you can make
it so you have to update it yourself that’s a great question that Jeremy can
talk more about in the break up as well or so that’s a good follow up to kind of
have with me and then and then I think they’re covering that kind of stuff
because Jeremy is uh he has to deal with all that kind of like updates for a big
complex site but it’s a good question other questions back to the slide deck
markdown we talked about markdown already but then formally it’s text that
can be easily converted to HTML so for example this slide deck that we’ve been
looking at today concepts get problem version control this is all just
markdown the links all the images everything else I wrote this in markdown
and it’s created as a slide deck because of that recipe thing we talked about
earlier where you take the markdown you combine it with the HTML oh boom I got a
website wikipedia has the best thing I’ve ever
seen about mark guy I’m syntax but you know headings
subheadings bullets numbered lists and in the links a link is just done with
brackets and in parentheses and this is all the HTML looks like that you’d have
to do otherwise so it’s a little bit easier to do the markdown but it still
is a little bit tricky yeah tada yeah this this this presentation
has been iterated on a bunch yes sir so the slide back has is using a plug-in
called reveal about je s that sucks in the markdown and uses it to generate the
slide deck just like Carol would otherwise with HTML templates and suck
in the markdown and then generate a web page reveal that je s takes the markdown
and pushes it a different format but that’s just that’s just a benefit of the
plugin and then Federalist Federalist is hosting this site so Federalist is
running that code on the back end to build out the slide deck for me so I
could even host multiple versions of this ever ever add do okay so I have
three practice activities and screenshots side we already do the issue
one together there’s also making your own test
repository and putting a file in it editing your file and creating a pull
request what I’d ask for you all to do in this class in front of me right here
is let’s go back to my W slack demo 24 site and I’ll put the link over here
come type it right /w slash slash tip you slack in the 24 and if you
go here and then go to my pages screen am I about got MB I’m and I’ll link to
that on the chat as well I want you to make an edit and send a poor request to
me so let me actually load that up over here slash my name give you slack damn out of 24 yep
yeah it’s /w slack /w slack yeah so you’re slow yep
so right here I’m trying to poke the link let me pull this up here these
folks line for the chat there it is it’s not letting me am I not allowed to post
addresses in there okay cool yeah that’s the basic version of it so we’re on this
for in the screen everyone here now we’re gonna go and scroll down to and
I’ll spin a second then all this stuff with underscores this is like the
backend code of the site so if you wanted to worry about how your site
looks or the how the button looked all that kind of stuff you click it here our
content all lives in pages so we’re gonna open up pages put there then open
up about got in B you can you can all look at this at the same time
and then when you go up to this top right button you won’t see edit this
file like it says right there you’ll see create a fork its github is gonna tell
you you want to make a fork and then edit the file because you don’t have
access to write it right to my repo but I want you to go ahead and click that
button that says create a fork and then make an edit and send it to me if you
hit the fort button at the top right you mean so that that’s just gonna create a
fork by itself hitting the pencil makes the fork and to jump at it yes yeah so what would happen otherwise
is that if I gave if you had ax write access to my to this repo if I had
already given you the ability to edit it then you can either edit this branch or
you could go down to the bottom if you remember when I hit this edit button see
at the bottom how it lets you it’s letting me commit directly to the master
branch or lets me create a new branch so that’s what you can do if you have
permission to you so it’s yep it’s not gonna let you do that
though because you don’t have that back and access you’re gonna be making a fork
how are folks doing with making Forks in the room I’m actually gonna spend we
have we have a two minutes here I’ll browse around for a second so spend time
being creative in your edit that you send me how we doing folks
I’ll be back make sense make sense make sense all crazy stuff I know how we
doing hey cool all right okay so I’m gonna look on someone’s screen just to
make sure I’m accurate so you made an edit now and it says there’s a blue box
at the top that says you’re editing a file on a project that’s it I scroll
down to the bottom of the screen after you make your edit and then you can type
in two things there in that in that screen it’s asking me for both a title
of your commitment and it’s asking for a description so put it in a title saying
like this is a test edit this is my first ever pull request or something
like that in a description saying I changed I added some lines I sit in some
bold text I added some italics whatever you get descriptions is that you want
someone to be able to figure out what you did not by having to read your code
but by just reading the description so if I’m trying to track down when someone
messed with site X if subscription says so I’m being friendly my neighbors it’s
like a little edit summary I go through that and then I’m gonna go back and look
at someone’s screen again just to make sure I’m act heard about what happens
next so if someone can hit the the proposed file change if I go look at you
again then it’s gonna there’s a green button at the top that says create pull
request click that button now there’s that same information that you have but
this is what’s gonna start the pull request and press the green button one
more time green green and you’re done you’ve made the poor request so what
folks type folks in I’ll get folks a second to do that okay
how you doing how was the Justice Department doing with us at it hopefully
if I look at poor request I have five woo I want more sending your edits we’ll
look at one of the test edits here here’s vids update and it says you’re a
first-time contributor yay because github added this as a feature Frank’s
not yet it’s awesome time to be up be here this class is very
helpful I like it so far thank you that’s very kind I have a 6-4
class you keep on going through and sending them and you’ll be able to have
been able to submit a pull request in this class we’re almost to the end of
our time here if you want to practice though you can follow on the slide back
here here’s how to open an issue and the
specific buttons to click I’ll note these screenshots are old and github
move their stuff around a little bit so you see these things on the left side
there now sitting on the top it says code issues portal class so you have to
translate it around a little bit with the with the screenshots I’ll make a new
set whenever I’ve time I’m sorry about that but this should be a pretty good
guide for being able to set up your own repo set up your own pull request and it
has all the different places to click and enter things thanks to my old
colleague stuff so the three different works workshops that you can follow on
your own time and then finally reference materials here’s a bunch of other videos
and exercises and things from github and blog posts that we have done and then
you can see a copy of the slides or the code that makes them as well as the
training video and with that with four minutes to spare we’re done with github
basics did this make sense and now you know and you’ve helmet Leslie yeah
moaning portal glass like that and I’m so excited I got7 I think we can do
better and submit more but fair enough okay we’re gonna be on break now for the
next 15 minutes for focus on line I think this ends the training session if
you have any other requests for comments or things like that just put
in the chat I’ll be watching them during the break I’ll keep on talking if you
don’t you don’t need to mute me questions come up I’ll just keep on
answering them for folks in the room free I’d ask to make sure that you have
github accounts that are set up and if you’ve set those up then please let me
get a piece new piece of paper sitting somewhere I said on my bag what I’d like
is for you to write down your github username and then just pass around but
yeah there we go thank you I have one if you need it just write down your github
username hello and pass it around and then pass it up to me and I will give
you access to Federalists so that you can start using Federalists in the next
hour – then that’s really fine yeah so your team slash government join join the chat you can post it there
– okay so why y’all post it around everyone go get some water I need some
water because I’ve been talking for a straight hour and a half and we’ll be
back I don’t see any other questions coming for the chat so we’re gonna go
ahead and mute thanks everybody online yes yes yeah that’s the right one it’s
not written to refer to github specifically but in practice it could
apply to github gitlab a bunch of those other competitors but yeah that’s it
that’s all the arguments thank you for coming

Leave a Reply

Your email address will not be published. Required fields are marked *