Menu

Humanitarian Toolbox is a wonderful cause. Good project background

A massive thanks to Steve Gordon for an excellently ran Codeathon. We did 30 PR’s during the day with 19 people working simultaneously on the same codebase.

What follows is a technical resource of the important parts of the day that I don’t want to forget.

Thanks to Dan Clarke and Ian Thomas for making sure I take good photos with people looking at the camera.

Git Workflow

What I found interesting was how to use Git with a fast changing code base. Here is my ‘flow’

I had already forked the project and setup my upstream remote detailed

git remote add upstream https://github.com/HTBox/allReady.git

// look for an issue in Github Issues eg 2204 
// add 'working on it' in the comments section
git checkout -b 2204
// work on the code and change files
git add filename (use gitkraken to stage - avoid whitespace changes)
git checkout master
git stash (as had gulp compiled site.js, mappingTools.js etc I didn't want to commit)
git fetch upstream
git merge upstream/master
git checkout 2204
git rebase master
git push origin 2204 -f  (when ready to push up branch to do a PR)

Start the PR message with the corresponding issue number eg #2204 Fixed the image in Edit

GitKraken article here

Javascript dependencies

I had to fight to get the js dependencies installed and had to reset my repo a few times just to make sure nothing crazy was happening:

git reset --hard head
git clean -dfx

This was as good as I got Menu which was good enough to changes to the UI.

Appveyor

We use appveyor to check every PR (build and run tests). It did take approx 6:30 per build which meant there was always a queue which slowed some PR’s down. Appveyor

Slack

We use a private slack channel throughout the day here

Working on Issue 2239

Issue 2239 There were 3 small issues:

  • The Name field is considered required and should be marked with a red asterisk
  • We should include a message “Fields marked with an * are required” message at the top of the form.
  • The “Name” label should be renamed to “Task Name”

The Name was a simple change on the VolunteerTaskViewModel. The second we eventually just put in p tag html in whatever pages needed it. I’d like to talk about the first.

Menu How did we get these red stars showing on every form in the solution which has a required DataAnnotation?

Menu I created a quick db diagram to familiarise myself with concepts. Domain Language was useful too.

I tried to use a simple ‘required’ bootstrap concept to put in the *’s. Ian Thomas then came up with the great idea of using Tag Helpers working on a related issue: here

namespace AllReady.TagHelpers
{
    [HtmlTargetElement("label", Attributes=ForAttributeName)]  
    public class LabelRequiredTagHelper: LabelTagHelper  
    {  
        private const string ForAttributeName = "asp-for";  
   
        public LabelRequiredTagHelper(IHtmlGenerator generator) : base(generator)  
        {  
        }  
   
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)  
        {  
            await base.ProcessAsync(context, output);  

            // Automatically mark required fields with an asterisk, except booleans
            // because MVC always sets IsRequired to true for booleans.
            if (For.Metadata.IsRequired && For.Metadata.ModelType.FullName != "System.Boolean")  
            {  
                var span = new TagBuilder("span");  
                span.AddCssClass("required");
                span.InnerHtml.Append("*");
                output.Content.AppendHtml(span);  
            }  
        }  
    }  
}

Very nice! Html No * required - applied automatically depending upon DataAnnotation

Summary

  • Git(Hub) skills are important and codeathons help you to learn them well!
  • Working with other programmers was interesting
  • Doing something (no matter how small) is a good feeling
  • I will help with this project more