Quick and simple tutorial on adding a Changelog to your website ⚡️

We recently added a Changelog to keep our users informed of new features, improvements or bug fixes to Pingly. We could use Twitter for this, but didn't want to inundate our follows with Tweets. We also wanted it to be sub-directory of our main domain and weren't ready to commit to hosting it elsewhere, otherwise there are some great hosted options

The following code/templates uses Rails as Pingly's front-end is powered by that, but it should be easy to translate to your framework/language of choice.

HTML - changelog.html.erb

<div id="changelog-container">
  <div class="logo"><a href="/"><%= image_tag('pingly-logo-v2.svg', width: 60) %></a></div>

  <div class="header">Pingly Changelog</div>

  <div class="changelog-item">
    <div class="date"><%= time_ago_in_words(DateTime.strptime('2018-11-26T11:33:00-05:00', '%Y-%m-%dT%H:%M:%S%z')) %> ago</div>
    <div class="content">
      <div class="title">Keyboard shortcut: Command + Enter to send email reply</div>
      <div class="type improvement">Improvement</div>
      <div class="body">Added Command + Enter keyboard shortcut to send an email reply. This matches the compose keyboard shortcut too.</div>
    </div>
  </div>
  <!-- REPEAT ABOVE changelog-item FOR EACH ENTRY -->
      
</div>  

Note the time_ago_in_words function which shows the relative time since adding the change. Ex: 1 month ago, 3 days ago

CSS - changelog.scss

#changelog-container {
  width: 720px;
  margin:0 auto;
  padding-top:50px;
  color:#1a3754;

  a {
    color:#1c9bdd;
    text-decoration:none;
  }

  .logo {
    margin-bottom:50px;
    text-align: center;
  }

  .header {
    margin-bottom:50px;
    margin-top:50px;
    font-size:40px;
    font-weight:bold;
    text-align: center;
  }

  .changelog-item {
    padding-top:35px;
    padding-bottom:35px;
    border-top:1px solid #eeeeee;
    .date {
      display:inline-block;
      width:170px;
      vertical-align: top;
      opacity:.5;
    }
    .content {
      display:inline-block;
      width:540px;
      .title {
        font-size:28px;
        font-weight:600;
        line-height:28px;
      }
      .type {
        display:inline-block;
        color:white;
        border-radius:30px;
        padding:4px 15px 4px 15px;
        margin-top:12px;
        margin-bottom:12px;
        font-size:15px;
        font-weight:bold;
      }
      .new {background-color:#1c9bdd;}
      .improvement {background-color:#2cb967;}
      .fix {background-color:#ffb400;}
      .body {
        font-size:18px;
        font-weight:300;
        line-height:26px;
      }
    }
  }
}

Rails - routes.rb

get '/changelog', to: 'static#changelog'

The above code is quick, simple and to the point.

We could have made it a little more "robust" by putting the Changelog data into it's own text file that the view could iterate through, but we didn't see the need for that complexity yet. Maybe for version 2 😉 😆


Need email for your business or side-project? Get email on your domain in minutes with Pingly for free.