Loadbuster Homepage

about.markdown

Loadbuster Homepage

A Pen by Jonathan Ohayon on CodePen.

License.

index.html

<section class="parallax">
  <div class="parallax-inner">
    <h1>Loadbuster</h1>
    <h3>A simple toolkit to create easy to use load-testing.</h3>
  </div>
</section>
<div class="container">
  <section>
    <h1>Usage</h1>
    <div class="border"></div>
    <pre>
      <code class="language-js">
  const Loadbuster = require('loadbuster') // Require the module from npm
  const loadbuster = new Loadbuster() // Create a new instance
  // Add actions to perform on load testing
  loadbuster.defineActions([{
    type: 'http', // Action type
    url: 'http://exmaple.com', // HTTP Action URL
    method: 'GET' // HTTP Action Method
  }, {
    type: 'cli', // Action Type
    command: 'get-data', // CLI Action command to execute
    environment: { // Environment variables to add to the command
      DEBUG: '*:*'
    }
  }])
  loadbuster.startLoad(1000) // Start testing the load with 1000 requests
      </code>
    </pre>
  </section>
</div>
<footer>
  Built with <div class="love"></div> by&nbsp;<a href="http://jonathano.com" target="_blank">Jonathan Ohayon</a>
</footer>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.js"></script>

style.scss

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Roboto+Mono:400,700';

h1, h3, footer {
  line-height: 1.3;
  font-family: 'Source Sans Pro', sans-serif;
}

body {
  padding-top: 100vh;
  background-color: #fff;
}

.parallax {
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background-image: linear-gradient(#52edc7, #5ac8fb);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: -1;
  h3 { color: #fff; }
  h1 { color: #fff; margin-bottom: 15px; }
}

h1 {
  font: {
    size: 40px;
    weight: 700;
  }
}
h3 { font-size: 24px; }

.container {
  background-color: #fff;
  padding: 10px 20px;
  margin-bottom: 70px;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.26), 0 -3px 7px 0 rgba(0, 0, 0, 0.26);
}

section:not(.parallax) {
  margin: 25px auto;
  width: calc(100% - 60px);
  max-width: 890px;
  background-color: #fff;
}

.border {
  width: 100%;
  height: 1px;
  margin: 15px 0;
  background-color: #BDBDBD;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  // background-color: #5ac8fb;
  background-image: linear-gradient(#52edc7, #5ac8fb);
  background-attachment: fixed;
  color: #fff;
  font-size: 17px;
  z-index: -1;
  position: fixed;
  bottom: 0;
  left: 0;
}

.love {
  background: {
    image: url(http://s3.jonathano.com/casey/heart-emoji.png);
    size: cover;
  }
  width: 19px;
  height: 19px;
  margin: 0 5px;
  position: relative;
}

a {
  text-decoration: none;
  color: darken(#fff, 6%);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.css" rel="stylesheet" />