<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Oscar Franco</title>
    <description>The latest articles on DEV Community by Oscar Franco (@ospfranco).</description>
    <link>https://dev.to/ospfranco</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F539525%2F055cc71d-4d76-41b5-8fe2-493e56c5e802.jpeg</url>
      <title>DEV Community: Oscar Franco</title>
      <link>https://dev.to/ospfranco</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ospfranco"/>
    <language>en</language>
    <item>
      <title>The easiest way to create billables</title>
      <dc:creator>Oscar Franco</dc:creator>
      <pubDate>Fri, 23 Jul 2021 18:13:26 +0000</pubDate>
      <link>https://dev.to/ospfranco/the-easiest-way-to-create-billables-4opm</link>
      <guid>https://dev.to/ospfranco/the-easiest-way-to-create-billables-4opm</guid>
      <description>&lt;p&gt;Filling your hours at the end of the month is a task on it’s own, but why?&lt;/p&gt;

&lt;p&gt;If you are a white-collar worker in today’s world, your work centers around computers, all your work is already recorded and stored in some shape, yet, some of the old processes are still stone age, one of these is filling work reports.&lt;/p&gt;

&lt;p&gt;In my previous companies and when working as a freelancer, this task was always delayed and left at the end, but in the end it still needs to be done. The end of the month would become a nightmare for the entire company as people rushed to fill the hours to bill the clients.&lt;/p&gt;

&lt;p&gt;So here is a better solution, for the XXI century, it’s called &lt;a href="https://numbra.io"&gt;Numbra&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PIkpP36y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10i4pmjqkwdne75sm6x4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PIkpP36y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10i4pmjqkwdne75sm6x4.jpg" alt="appPreview"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Numbra’s premise is simple, connect your day to day systems and get ready to go reports.&lt;/p&gt;

&lt;p&gt;Currently the product is focused for developers and software teams, the two available integrations are with Github (import your commits for the day) and Google Calendar (import your daily meetings), this already provides a solid foundation to for you to present your billables to your client.&lt;/p&gt;

&lt;p&gt;Of course, you can export the data, either to a PDF or CSV file, but the beauty of it lies in the automation of the process.&lt;/p&gt;

&lt;p&gt;Numbra is currently in MVP phase and it is completely free to use, sign up and leave some feedback! You can help shape the future of the product!&lt;/p&gt;

&lt;p&gt;Go to &lt;a href="https://numbra.io"&gt;https://numbra.io&lt;/a&gt; and sign up now!&lt;/p&gt;

</description>
      <category>saas</category>
      <category>tooling</category>
    </item>
    <item>
      <title>CI Demon, a tool to monitor your builds/deployments from your desktop</title>
      <dc:creator>Oscar Franco</dc:creator>
      <pubDate>Mon, 26 Apr 2021 14:28:00 +0000</pubDate>
      <link>https://dev.to/ospfranco/ci-demon-a-tool-to-monitor-your-builds-deployments-from-your-desktop-2d05</link>
      <guid>https://dev.to/ospfranco/ci-demon-a-tool-to-monitor-your-builds-deployments-from-your-desktop-2d05</guid>
      <description>&lt;p&gt;Here is a little tool I created to solve one of problems. I have worked in different companies as a software tech lead. In the projects where I worked, keeping track of the status of the software was tricky. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4vidGfKo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inmjtkokggemb82c4dzi.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4vidGfKo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inmjtkokggemb82c4dzi.jpg" alt="CI Demon"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have decent amount of team members and your software starts to mature, keeping track of what is broken becomes vital. You want to quickly get notified when a branch might be in a broken state or when a deployment fails.&lt;/p&gt;

&lt;p&gt;Previously I had been using &lt;a href="https://github.com/erikdoe/ccmenu"&gt;CCMenu&lt;/a&gt;, it adds a small icon on your macOS status bar that turns red whenever there is a broken branch. However, it came with a lot of limitations, it was a super simple tool, despite the complexity of the task it tries to solve. Therefore I came up with &lt;a href="https://apps.apple.com/de/app/ci-demon/id1560355863?mt=12"&gt;CI Demon&lt;/a&gt;, it basically takes the same idea as CCMenu (to put the status of your CI in your desktop) but expands it by offering a more complete solution.&lt;/p&gt;

&lt;p&gt;It not only shows the status of your main project branch, but also all the branches (or even PRs), it shows additional info, like on which step the build failed. It integrates with each service API so it provides more detailed information. It can trigger a rebuild. You can also quickly share a failing branch directly from the app, and the list goes on.&lt;/p&gt;

&lt;p&gt;People who use it, are super happy with it, it is a fairly niche tool, but I know it solves a problem; observability. Having a dedicated tool for the job will always trump integration with other tools (like slack messages, which quickly get lost).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://apps.apple.com/de/app/ci-demon/id1560355863?mt=12"&gt;Give it a try&lt;/a&gt;! I promise you won't be disappointed.&lt;/p&gt;

</description>
      <category>github</category>
      <category>circleci</category>
      <category>macos</category>
    </item>
    <item>
      <title>Post Jest test results into github PRs via actions</title>
      <dc:creator>Oscar Franco</dc:creator>
      <pubDate>Sun, 13 Dec 2020 11:23:38 +0000</pubDate>
      <link>https://dev.to/ospfranco/post-jest-test-results-into-github-prs-via-actions-43lm</link>
      <guid>https://dev.to/ospfranco/post-jest-test-results-into-github-prs-via-actions-43lm</guid>
      <description>&lt;p&gt;At work we recently decided to abandon Bitrise for our simple CI javascript tests, that means, we continue to use bitrise for building our main app (react-native), but we decided to move our jest tests to github actions&lt;/p&gt;

&lt;h2&gt;
  
  
  Why leave Bitrise
&lt;/h2&gt;

&lt;p&gt;There is one thing like about bitrise, the amount of available workflows and steps and how you can chain them to create your CI workflow, however, it is &lt;strong&gt;really really slow&lt;/strong&gt; and it also becomes &lt;strong&gt;very expensive&lt;/strong&gt; for anything that is worth it, at least compared to other alternatives.&lt;/p&gt;

&lt;p&gt;Even though we are already on a medium plan, we started hitting a major problem, our app takes at least an hour to compile on iOS, we also have to build Android and Huawei versions, and without paying more money our builds were starting to queue for too long, a simple PR would not get the tests run for a solid hour or more, blocking the entire team.&lt;/p&gt;

&lt;h2&gt;
  
  
  But why Github Actions
&lt;/h2&gt;

&lt;p&gt;Actually, I had never worked with github actions, but I decided to give it a go, to compare it with circleCI and actually it was very good!&lt;/p&gt;

&lt;p&gt;One of the main reasons it is so good is because it is already integrated to where you code lives, no need to create a org in a different platform, no need to create users, etc, you simply commit the yaml and it starts building the second you push, you won't get better UX than that!&lt;/p&gt;

&lt;p&gt;Second reason I really liked it, is the speed! it's just fast, period!&lt;/p&gt;

&lt;h2&gt;
  
  
  The big limitation
&lt;/h2&gt;

&lt;p&gt;So getting a basic workflow is not hard, you will find many tutorials out there, but basically it resumes to something simple like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;JS Checks&lt;/span&gt;
&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;push&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;tests&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;

    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/checkout@v2&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Use Node.js 12.x&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/setup-node@v2.1.2&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;node-version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;12.x&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Install Dependencies&lt;/span&gt;
        &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;yarn&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Run tests&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;yarn test&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It's pretty stupid simple, however, I wanted to push things a bit further, I hated having to open the bitrise log page, because loading web pages nowadays is sooo slow, so I wanted to see my failing tests directly on my PR!&lt;/p&gt;

&lt;p&gt;A quick google search revealed nothing of use, people apparently have been asking for this feature to github, but nothing official is supported, eventually I ran into an action by tangro, that claimed it would posts some results into the code, unfortunately it did not work organization my repository.&lt;/p&gt;

&lt;h2&gt;
  
  
  Enter gh-jester
&lt;/h2&gt;

&lt;p&gt;So, I forked the project, removed the unnecessary parts and added actually the useful output that I was looking for, you can check the &lt;a href="https://github.com/ospfranco/gh-jester"&gt;source code&lt;/a&gt;, here is a finished YAML you can copy and paste into your github repo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;JS Checks&lt;/span&gt;
&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;push&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;tests&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;

    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Cancel Previous Runs&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;styfle/cancel-workflow-action@0.6.0&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;access_token&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ github.token }}&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/checkout@v2&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Use Node.js 12.x&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/setup-node@v2.1.2&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;node-version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;12.x&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Install Dependencies&lt;/span&gt;
        &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;yarn&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Run tests&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ospfranco/gh-jester@v1.0.13&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;post-comment&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
        &lt;span class="na"&gt;env&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;GITHUB_TOKEN&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ "{{ secrets.GITHUB_TOKEN"}} }}&lt;/span&gt;
          &lt;span class="na"&gt;GITHUB_CONTEXT&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ "{{ toJson(github)"}} }}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Basically, it will run your jest tests and if the tests are failing it will post a nice resume on the commit itself (which will also appear on the PR), bear in mind, the trigger needs to be [push] for it to correctly post the comment with the info.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VRx8u9Bw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/iljqcl32up154sfdp8cd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VRx8u9Bw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/iljqcl32up154sfdp8cd.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And that is it! you can now enjoy your life letting the machines notify you when something is wrong instead of having to open slow websites.&lt;/p&gt;

&lt;h2&gt;
  
  
  Taking it to the next level
&lt;/h2&gt;

&lt;p&gt;So this is all nice and well, here I'm going to share with you how to super charge this even more.&lt;/p&gt;

&lt;p&gt;First you get &lt;a href="https://tempomat.dev"&gt;Tempomat&lt;/a&gt;, now you have notifications in your Dekstop on your builds (of course because it supports github actions), now you have completely automated a chunk of your work.&lt;/p&gt;

&lt;p&gt;Once you have set up your github actions workflow and have tempomat installed this is what happens:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You push code&lt;/li&gt;
&lt;li&gt;Github will run your tests (and something goes wrong)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;gh-jester&lt;/code&gt; will conveniently posts the resume of what went wrong&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Tempomat&lt;/code&gt; will notice your build has failed and send you a desktop notification&lt;/li&gt;
&lt;li&gt;You click on the notification, Voila! Your life just became faster and simpler, all the info you need and you didn't even have to ask for it or navigate to some slow site&lt;/li&gt;
&lt;li&gt;Enjoy the time you saved or simple produce even more code!&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>github</category>
      <category>testing</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
