<p>Redux is the most popular state management solution for react applications, it provides a way to store and reason about state in a consistent way.</p>
<p>You dispatch actions which signify a single data change:</p>
<pre><code class="language-js">const action = {
  type: &quot;ADD_USER&quot;,
  data: &quot;Jim&quot;,
};
</code></pre>
<p>You have a reducer function which process any actions dispatched along with the current state and computes the new state.</p>
<pre><code class="language-js">function reducer(state, action) {
  switch (action.type) {
    case &quot;ADD_USER&quot;:
      return { ...state, user: action.data };
  }
}
</code></pre>
<p>This allows you to have your state in a central place, decoupling it from your views and making it available to any component regardless where they are in the component tree.</p>
<p>It also promotes immutability, it is difficult to ascertain wether an object has been modified or not, by making your data immutable and returning a new object when changes have been made makes it a simple compare to determine if the data has changed.</p>
<p>This is a simplified version of what redux does, the pattern is simple and easy to implement, and the redux browser tools are great for debugging what is happening in your app.</p>
<p>React hooks were introduced in <a href="https://reactjs.org/docs/hooks-intro.html">React 16.8</a> and provided some apis to handle state in function components.</p>
<h2 id="usestate">useState</h2>
<p>useState is a react hook that allows you to store some state in a react function component across update calls.</p>
<pre><code class="language-js">const [state, setState] = useState(1);
</code></pre>
<p>A function component is called on every component update so useState provides a way to store and retrieve some state, you can pass in the initial state and it will return the state and a method to update the state.</p>
<p>Theoretically you could use this as your only method of storing state in your application but it will quickly become cumbersome to manage anything beyond a single piece of data.</p>
<h2 id="usereducer">useReducer</h2>
<p>Is essentially the same as redux, you pass it your data reducer function which will handle your actions passed into the dispatch function.</p>
<pre><code class="language-js">const initialState = { count: 0 };

const [state, dispatch] = useReducer(
  function reducer(state, action) {
    switch (action.type) {
      case &quot;INCREMENT&quot;:
        return { count: state.count++ };
    }
  },
  initialState,
  init
);

return (
  &lt;div&gt;
    {state.counter}
    &lt;button onClick={() =&gt; dispatch({ type: &quot;INCREMENT&quot; })}&gt;Increment&lt;/button&gt;
  &lt;/div&gt;
);
</code></pre>
<p>You can pass in an optional initial state and a function to lazy initialise state.</p>
<p>How do we make this available to the components in our component tree?</p>
<h2 id="context">Context</h2>
<p>Context is a convenience component that allows you pass an object to any child component in the tree without having to use component props. Context was previously an experimental api and will not be supported beyond 16.x, they have provided a <code>useContext</code> hook.</p>
<pre><code class="language-js">const DataContext = React.createContext(defaultValue);

function App() {
  return (
    &lt;DataContext.Provider value={{ state, dispatch }}&gt;
      &lt;App /&gt;
    &lt;/DataContext.Provider&gt;
  );
}
</code></pre>
<p>Place your provider in your app root, and useContext to access the value in any child component.</p>
<p>The default value is provided if the accessing component does not have a parent provider in the tree.</p>
<pre><code class="language-js">function Login() {
  const { state, dispatch } = useContext(DataContext);

  return &lt;div&gt;{state.user}&lt;/div&gt;;
}
</code></pre>
<p>A popular and simple state management method without adding any additional dependencies, although you may still want to go with redux for the additional features it provides and its what you know.</p>


Replace redux with react context and useReducer

<p>How do you hand errors consistently and in a nice and clean manner?</p>
<p>Where you want to handle specific errors you can use a try catch block</p>
<pre><code class="language-js">try {
  // some code that might throw an error
} catch (error) {
  // handle error
}
</code></pre>
<p>This is great except it won&#39;t catch errors from async code, unless your using async and await. Using regular promises you will still have to use <code>.catch()</code> to handle any errors thrown from the promise.</p>
<p>With the introduction of React 16 along came <a href="https://reactjs.org/docs/error-boundaries.html">error boundaries</a> which allow you to catch any errors from within your react child component tree, handle them however you like and display an alternative UI.</p>
<p>An error boundary is simply a class component that sits in your component tree and catches any errors from components below it in the tree, with some caveats, it cannot catch errors from async code or error handlers, server side rendering or errors from within the error boundary component itself.</p>
<pre><code class="language-js">class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return &lt;h1&gt;Something went wrong.&lt;/h1&gt;;
    }
    return this.props.children;
  }
}
</code></pre>
<p>An error boundary must be a class component and contain one of these methods <code>componentDidCatch</code> or <code>getDerivedStateFromError</code>.</p>
<p>Now we have single place to catch and handle our applications errors.</p>
<p>We can tidy this up with the use of the simple <a href="https://github.com/bvaughn/react-error-boundary">react-error-boundary</a> package that simplifies the creation of an error boundary to a function component</p>
<pre><code class="language-js">import { ErrorBoundary } from &quot;react-error-boundary&quot;;

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    &lt;div role=&quot;alert&quot;&gt;
      &lt;p&gt;Something went wrong:&lt;/p&gt;
      &lt;pre&gt;{error.message}&lt;/pre&gt;
      &lt;button onClick={resetErrorBoundary}&gt;Try again&lt;/button&gt;
    &lt;/div&gt;
  );
}

const ui = (
  &lt;ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() =&gt; {
      // reset the state of your app so the error doesn&#39;t happen again
    }}
  &gt;
    &lt;ComponentThatMayError /&gt;
  &lt;/ErrorBoundary&gt;
);
</code></pre>
<p>It also provides some additional helpful features like the ability to capture and log any errors and also a simple way to reset the application state allowing us to recover nicely from the error.</p>
<p>Theres also a <code>useErrorHandler</code> hook which returns a function we can use to handle any errors from within our async code</p>
<pre><code class="language-js">const handleError = useErrorHandler();

function handleSubmit(event) {
  event.preventDefault();
  const name = event.target.elements.name.value;
  fetchGreeting(name).then(
    (newGreeting) =&gt; setGreeting(newGreeting),
    handleError
  );
}
</code></pre>
<p>A tidy and consistent way to handle any application errors from within your react application.</p>


Error handling in react

<p>Automated UI testing is on the rise, automating the functional testing of your application is like having a bundle of manual testers prodding and poking at your application making sure it works the way you said it would.</p>
<p>My previous experience of automated UI testing was with Selenium and Xpath, yes I know xpath, it was horrible to code and the tests were flakey and hard to implement on a modern single page application.</p>
<p>Often these tests are done after the bulk of development has been done as an extra safety net to catch any braking changes, and they work.</p>
<p>There are a few problems with selenium though, its c# or Java and its likely your frontend developers don&#39;t know either of these languages, possibly these tests are the responsibility of the test team and the feedback loop to triaging issues and fixing is slow. Selenium tests are slow, cypress tests are javascript and ran with your app, cypress can also test as the app is rendered making them very fast.</p>
<p>Along comes Cypress off the back of the release of Puppeteer a node library with an api to control a headless chrome browser, Cypress allows you to write UI tests in javascript using a familiar api like jquery of old or css selectors to access elements, but with built support for the asynchronous nature of a modern single page application, making the barrier and speed to writing automated UI tests very low.</p>
<p>Importantly this enables your developers to write these tests themselves with the ability to run them locally quickly and easily providing a feedback loop that also aids the development process.</p>
<h3 id="tests">Tests</h3>
<p>Cypress is built on top of mocha and existing and popular javascript testing framework that most front end developers should be familiar with.</p>
<pre><code class="language-js">it(&quot;contains type&quot;, () =&gt; {
  cy.visit(&quot;https://example.cypress.io&quot;);

  cy.contains(&quot;type&quot;);

  cy.get(&quot;.email&quot;).type(&quot;email@example.com&quot;);

  cy.get(&quot;.todo-list li&quot;).should(&quot;have.length&quot;, 2);
});
</code></pre>
<p>Tests look like normal unit tests, it almost looks too easy, thats because cypress has built in flake resistance, it will wait on state changes, elements being enabled or animations finishing, no need to tell cypress it has to wait.</p>
<p>The test above will visit the url, wait for page load and check the text &#39;type&#39; is found, the test will fail if it cannot find &#39;type&#39;, theres no need to assert.</p>
<pre><code class="language-js">it(&quot;types email&quot;, () =&gt; {
  cy.get(&quot;.email&quot;).type(&quot;email@example.com&quot;);
});
</code></pre>
<p>Here we are testing we can type in an email, the get method finds elements by selector and will automatically retry until it finds the element or fail the test.</p>
<pre><code class="language-js">it(&quot;todo items&quot;, () =&gt; {
  cy.get(&quot;.todo-list li&quot;).should(&quot;have.length&quot;, 2);
});
</code></pre>
<p>We can use assertions to check we have the correct amount of items in our list.</p>
<p>The tests are simple to write and there&#39;s no funny wait conditions or hacks to write them reliably as cypress handles this for us.</p>
<p>Cypress has built in support for mocking and intercepting api calls to return predefined fixtures.</p>
<p>There is also the ability to record screenshots and video of your test runs which you may want to publish as part of you build/deployment process.</p>
<h3 id="gui">GUI</h3>
<p><img src="/images/cypress.png" alt="Untitled"></p>
<p>Cypress also comes with a nice gui allowing you to view in great detail your test run and also debug them right in the browser.</p>
<p>Here you can see a test run with detailed output of the cypress commands called and xhr calls made, you can navigate back through a test run and see what the UI was at that time allowing you to debug any issues. Theres also a handy select item feature which will output a get selector to yous use in your test.</p>
<p>You can of course run cypress headless as part of your CI/CD process.</p>
<h3 id="eco-system">Eco system</h3>
<p>There is also a rich eco system of plugins available, allowing you to write your tests in BDD, output a rich test report, automatically test your apps accessibility using axe or even run visual regression testing.</p>
<p>There&#39;s now no excuses not to be doing automated UI testing, and in most cases will be more helpful in eliminating bugs than traditional unit testing depending on the nature of your application.</p>
<p>Happy testing.</p>


Why you should be UI testing with Cypress

<p><a href="https://dashboard.heroku.com/">Heroku</a> is great and makes deploying apps very easy but it
does not natively provide a way to deploy .net apps despite supporting nearly all other popular
languages like Java, Node, GO, Ruby etc.
Fortunately they allow you to use open source <a href="https://devcenter.heroku.com/articles/buildpacks">buildpacks</a>
to build your application and there are a ton out there that you can find on their buildpacks <a href="https://elements.heroku.com/buildpacks">page</a>
making it very easy to find one that suits.
To deploy our asp .net core application we are going to use <a href="https://github.com/jincod/dotnetcore-buildpack#v3.1">this</a>
provided by github user jincod 👏.</p>
<p>There are a few ways to add a buildpack, on the settings page for your app you can add a url
to a buildpack, which is what I done to add the buildpack above, notice the tag on the end of
the url for .net core v3.1, or you can select one supported by heroku.</p>
<p><img src="/images/heroku_buildpacks.png" alt="Heroku buildpack settings"></p>
<p>You can also add a buildpack using the heroku cli</p>
<pre><code class="language-js">heroku buildpacks:set https://github.com/jincod/dotnetcore-buildpack#v3.1 -a myapp
</code></pre>
<hr>
<h2 id="ssl">SSL</h2>
<p>Adding a cert and handling x-forwarded-for header.</p>
<p>You can add an SSL cert from the settings page and paid dynos have automated certificate management which means they&#39;ll automatically renew every month.</p>
<p>Your app in heroku sits behind a proxy which means you can&#39;t simply use the built int <code>UseHttpsRedirection</code> method, we need to check the <code>X-Forwarded-Proto</code> header which contains the original requested protocal.</p>
<p>Here is a simple middleware that redirects if the protcol is not &quot;https&quot;, found on this <a href="https://blog.shortbar.com/forcing-asp-net-core-to-https-with-a-reverse-proxy-afc0e5224dab">blog post</a>.</p>
<pre><code class="language-csharp">public class ReverseProxyHttpsEnforcer {
    private const string ForwardedProtoHeader = &quot;X-Forwarded-Proto&quot;;
    private readonly RequestDelegate _next;

    public ReverseProxyHttpsEnforcer(RequestDelegate next) {
        _next = next;
    }

    public async Task Invoke(HttpContext ctx) {
        var h = ctx.Request.Headers;
        if (h[ForwardedProtoHeader] == string.Empty || h[ForwardedProtoHeader] == &quot;https&quot;) {
            await _next(ctx);
        } else if (h[ForwardedProtoHeader] != &quot;https&quot;) {
            var withHttps = $&quot;https://{ctx.Request.Host}{ctx.Request.Path}{ctx.Request.QueryString}&quot;;
            ctx.Response.Redirect(withHttps);
        }
    }
}

public static class ReverseProxyHttpsEnforcerExtensions {
    public static IApplicationBuilder UseReverseProxyHttpsEnforcer(this IApplicationBuilder builder) {
        return builder.UseMiddleware&lt;ReverseProxyHttpsEnforcer&gt;();
    }
}
</code></pre>
<p>This works great, thanks to the internet.</p>
<p>Links</p>
<ul>
<li><a href="https://blog.shortbar.com/forcing-asp-net-core-to-https-with-a-reverse-proxy-afc0e5224dab">David Albrecht Blog</a></li>
</ul>


Deploying an ASP .Net Core app on Heroku with SSL

<p>Here&#39;s a quick list of HTML elements/tags to replace the trusty <code>div</code>
Taken from the <a href="%22https://developer.mozilla.org/en-US/docs/Web/HTML/Element%22">MDN Html Reference page</a>.</p>
<h3 id="address">Address</h3>
<pre><code class="language-html">&lt;section&gt;&lt;/section&gt;
</code></pre>
<p>Used for...yip, address data.</p>
<h3 id="article">Article</h3>
<pre><code class="language-html">&lt;article&gt;&lt;/article&gt;
</code></pre>
<p>Meant for individual distributable bits of the site.</p>
<h3 id="aside">Aside</h3>
<pre><code class="language-html">&lt;aside&gt;&lt;/aside&gt;
</code></pre>
<p>Content not directly related to the main content.</p>
<h3 id="nav">Nav</h3>
<pre><code class="language-html">&lt;nav&gt;&lt;/nav&gt;
</code></pre>
<p>Should contain navigation elements, links, menus etc.</p>
<h3 id="main">Main</h3>
<pre><code class="language-html">&lt;main&gt;&lt;/main&gt;
</code></pre>
<p>The main unique content of the page, does not affect document flow.
Important for screenreaders to allow them to find the pages main content.</p>
<h3 id="section">Section</h3>
<pre><code class="language-html">&lt;section&gt;&lt;/section&gt;
</code></pre>
<p>Define a section of the site that can be enhanced with any of the other tags.</p>
<h3 id="code">Code</h3>
<pre><code class="language-html">&lt;code&gt;&lt;/code&gt;
</code></pre>
<p>Theres a code tag for code.</p>
<h3 id="em">Em</h3>
<pre><code class="language-html">&lt;em&gt;&lt;/em&gt;
</code></pre>
<p>To give emphasis.</p>
<h3 id="audio-video">Audio, Video</h3>
<pre><code class="language-html">&lt;video controls autolplay&gt;&lt;/video&gt;
</code></pre>
<p>To embed video or audio.</p>
<h3 id="progress">Progress</h3>
<pre><code class="language-html">&lt;progress max value /&gt;
</code></pre>
<p>Display a progress bar.</p>
<h3 id="time">Time</h3>
<pre><code class="language-html">&lt;time datetime=&quot;01-01=2020&quot;&gt;Yesterday&lt;/time&gt;
</code></pre>
<p>Allows you to set date or duration that is more specific than that displayed, useful for search engines.</p>
<hr>
<h3 id="more-reading">More reading</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">MDN HTML elements reference</a></li>
<li><a href="https://www.htmlgoodies.com/tutorials/html5/new-tags-in-html5.html">HTML Goodies</a></li>
</ul>


HTML Elements I don't use

<p>A monorepo is a single repository that contains many other projects/packages/libraries,
the monorepo has been championed by google who reportedly have all their code in single
repository totalling billions of lines of code with tens of thousands of thousands of developers
working on it.</p>
<h2 id="benefits">Benefits</h2>
<h3 id="onboarding">Onboarding</h3>
<p>One of the main benfits in using a monorepo is in developer onboarding, whatever size of company
you are its likely theres a decent amount of learning and knowledge sharing that has to be done
before a new start can actually run your whole app locally and start to make changes.
Of all the places I have worked the larger the company generally the more difficult this, all the
more difficult with the shift to SPA everything, its possible there are integrations that they
never know about because their in another repo on another porject with another team.
This then becomes a barrier to sharing work/knowledge around, leaving certain teams and people
responsible for certain bits of code.
With a monorepo a new developer only has one repo to pull and understand how to make changes and
test those changes, often in an enterprise environment different teams can use different tooling
and even process to contribute code, with a monorepo centralising and standardising should be
easier.</p>
<h3 id="integration--sharing">Integration &amp; Sharing</h3>
<p>The tedious task of bumping versions up the dependency tree would be no longer, &quot;every commit is a release&quot; and every other team and developer would have the latest changes. Sharing code between packages would be easier probably more common, often the overhead of repository management can decide that sharing code is&#39;nt worth the management pain.
Integration testing would be made easier from the outset rather than an after thought, often the integration of two packages is not tested until moved to the test team, in a monorepo developers should be able to work on the whole flow rather their own isolated code.</p>
<h3 id="refactoring">Refactoring</h3>
<p>Making large refactors, updating package versions, find and replace or codemods should be easier, backed up with integration tests giving greater confidence in the changes made and easier depedency management and version bumping.</p>
<h2 id="tooling">Tooling</h2>
<p>The main issue with managing a monorepo is tooling, <a href="https://github.com/lerna/lerna">Lerna</a> is a popular tool for managing a single repository of npm packages, but changes to your build or deployment pipeline would be required depending on your setup. Github has not long added <a href="https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners">code owners</a> allowing certains bits of a repo to be managed by different people.</p>
<p>I think it most cases a monorepo would provide a better developer experience and make writing better solutions easier which would outway the cost of supporting a monorepo, although like everything it depends on your circumstances.</p>
<h3 id="more-reading">More reading</h3>
<ul>
<li><a href="https://medium.com/@Jakeherringbone/you-too-can-love-the-monorepo-d95d1d6fcebe">You too can love the monorepo</a></li>
<li><a href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext">Google monorepo</a></li>
<li><a href="https://hackernoon.com/4-ways-to-go-monorepo-in-2019-ea5d19fc1f08">Monorepo tools</a></li>
<li><a href="https://github.com/lerna/lerna">Lerna</a></li>
</ul>
