cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="content"></div>

<script id="main-tweet-template" type="text/x-handlebars-template">
  <div class="tweet">
    <div class="user">
      <img src="https://api.adorable.io/avatars/{{avatar}}" alt="" class="user-avatar">
      <div class="user-fullname">{{user-fullname}}</div>
      <div class="user-username">{{user-username}}</div>
    </div>
    <div class="tweet-text">
      {{tweet-text}} {{tweet-number}}/{{tweet-total}}
    </div>
    <time class="tweet-time">
      {{tweet-time}}
    </time>
    <div class="tweet-stats">
      <div class="retweets-and-likes">
        <strong>{{retweets}}</strong>
        <span>Retweet</span>
        <strong>{{loves}}</strong>
        <span>Likes</span>
      </div>
      <div class="tweet-stat-avatars">
        <img src="https://api.adorable.io/avatars/80/abott@adorable.png" alt="">
        <img src="https://api.adorable.io/avatars/80/bob@adorable.png" alt="">
        <img src="https://api.adorable.io/avatars/80/jimmy@adorable.png" alt="">
        <img src="https://api.adorable.io/avatars/80/bill@adorable.png" alt="">
        <img src="https://api.adorable.io/avatars/80/blaine@adorable.png" alt="">
        <img src="https://api.adorable.io/avatars/80/dee@adorable.png" alt="">
      </div>
    </div>
    <div class="tweet-actions">
      <span>🗯</span>
      <strong>{{comments}}</strong>
      
      <span>♽</span>
      <strong>{{retweets}}</strong>
      
      <span>♥︎</span>
      <strong>{{loves}}</strong>
      
      <span>✉️</span>
    </div>
  </div>
</script>

<script id="sub-tweet-template" type="text/x-handlebars-template">
  <div class="tweet thread-tweet">
    <div class="user">
      <img src="https://api.adorable.io/avatars/{{avatar}}" alt="" class="user-avatar">
      <div class="user-fullname">
        {{user-fullname}}
        <span class="user-username">{{user-username}}</span>
        <time class="time-ago">
          &middot;
          1h
        </time>
      </div>
      <div class="replying-to">
        Replying to <a href="#0" class="user-username">{{user-username}}</a>
      </div>
    </div>
    <div class="tweet-text">
      {{tweet-text}} {{tweet-number}}/{{tweet-total}}
    </div>
    
    <div class="tweet-actions">
      <span>🗯</span>
      <strong>{{comments}}</strong>
      
      <span>♽</span>
      <strong>{{retweets}}</strong>
      
      <span>♥︎</span>
      <strong>{{loves}}</strong>
      
      <span>✉️</span>
    </div>
  </div>
</script>

<main id="text">
<p><strong>A front end developer is aware of design.</strong> If they aren't a designer themselves, they know how important design is. They have good taste in design. They know about the tools involved. They know where the design role fits into the process.</p>
<p><strong>A front end developer is aware of the back end.</strong> If they aren't a back end coder themselves, they know how important the back end is. They know what the back end is capable of delivering and what it isn't. They know the responsibilities
  back end developers have. They know the languages involved. They know how to ask for what they need on the front end. </p>
<p><strong>A front end developer is aware of the network.</strong> They know that websites are delivered over the internet, a network, and that that network is a wild and sometimes unpredictable place. They know networks can be on or off, fast or slow, and
  reliable or unreliable. </p>
<p><strong>A front end developer is aware of performance.</strong> If they aren't entirely performance focused themselves, they know that performance is vital to a website's success. They know performance is a complex world onto itself. They know there are
  quick wins and long term struggles. They know that so long as the back end is fast, the other 80% of the time a website is loading is a front end concern.</p>
<p><strong>A front end developer is aware of content strategy.</strong> If they aren't a content strategist themselves, they know that websites live and die by the content on them. They know that the lack of a content plan can cause problems that you may
  not be able to develop your way out of. They know that the people that use the website is what matters and those people need to find what they need and expect it to be in good shape.</p>
<p><strong>A front end developer is aware of databases.</strong> The content lives there. The content must be in good shape. The front end developer can only work with what comes out of those databases. The front end developer needs to combine what comes
  out of those databases with templates to make the website happen.</p>
<p><strong>A front end developer is aware of testing.</strong> So many kinds! Integration testing. Regression testing. User testing! </p>
<p><strong>A front end developer is aware of systems.</strong> They might be responsible for implementing a design system, or an icon system, or a coding style guide. They might have to create those systems themselves. They might need to document those systems.</p>
<p><strong>A front end developer is aware of devops.</strong> They are writing and committing code along with every other coder on the project, so they need to adhere to the same setup as everyone else. If they didn't write the build system themselves, they
  know what it is, what it does, and what it is capable of. If they didn't set up deployment themselves, they know how to use it.</p>
<p><strong>A front end developer is aware of servers.</strong> Without them, there is no website. </p>
<p><strong>A front end developer is aware of accessibility.</strong> If they aren't well versed in building for accessibility themselves, they know that it's important. They know how to test for it. They know who to talk to about it. They know there is quick
  wins and long term struggles regarding it.</p>
<p><strong>A front end developer is aware of the device landscape.</strong> They know the web is everywhere these days and a good website needs to meet users there. Big screens, little screens, touch screens, far away screens, black and white screens. The front end developer is aware of the unknown.</p>
</main>

<button id="make-readable">Ughkgh. I can't read this.<br>Make it readable!</button>
            
          
!
            
              *, *::before, *::after {
  box-sizing: border-box;
}

body {
  line-height: 1.4;
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.ready-to-read-now {
  background: #737678;
}

#make-readable {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  background: lightblue;
  padding: 1rem 2rem;
  font-weight: bold;
  font-family: 'PT Serif', serif;
  font-size: 1.3rem;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(black, 0.4);
  &:focus,
  &:hover {
    background: black;
    color: white;
  }
}

.all-tweets-container {
  max-width: 700px;
  min-width: 500px;
  margin: 60px auto;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}

.tweet {
  padding: 2rem;
  position: relative;
}
.thread-tweet {
  .tweet-actions {
    padding-top: 10px;
    padding-left: 60px;
  }
  .tweet-text {
    padding-left: 60px;
  }
  &::before {
    content: "";
    position: absolute;
    left: 58px;
    width: 4px;
    background: #F5C9B4;
    height: 100%;
    border-radius: 3px;
  }
  &::last-of-type::before {
    display: none;
  }
}

.user {
  overflow: hidden;
  margin-bottom: 12px;
}
.user-avatar {
  width: 56px;
  float: left;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  border: 4px solid white;
}
.user-fullname {
  font-weight: bold;
  font-size: 18px;
}
.user-username {
  font-size: 14px;
  color: #657786;
  font-weight: normal;
  text-decoration: none;
}
a.user-username {
  color: #FA743E;
}
.replying-to {
  color: #657786;
  padding-top: 5px;
  font-size: 14px;
}

.tweet-time {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: #657786;
  border-bottom: 1px solid #e6ecf0;
}
.time-ago {
  font-size: 14px;
  color: #657786;
  font-weight: normal;
}

.tweet-stats {
  display: flex;
  border-bottom: 1px solid #e6ecf0;
  margin-bottom: 10px;
}

.retweets-and-likes {
  color: #657786;
  font-size: 14px;
  padding: 10px 0;
  line-height: 1.7;
  strong {
    color: #14171a;
    &:nth-of-type(2) {
      margin-left: 10px;
    }
  }
  span {
    &:nth-of-type(2) {
      padding-right: 10px;
    }
  }
}

.tweet-stat-avatars {
  padding: 10px 0 10px 10px;
  border-left: 1px solid #e6ecf0;
  img {
    width: 24px;
    display: block;
    float: left;
    margin-right: 6px;
    border-radius: 50%;
  }
}

.tweet-actions {
  color: #657786;
  font-size: 12px;
  font-weight: bold;
  span {
    margin-right: 5px;
  }
  strong {
    margin-right: 15px;
  }
}

#text {
  font-family: 'PT Serif', serif;
  margin: 5rem auto 15rem;
  max-width: 666px;
  line-height: 1.4;
  padding: 1rem;
}
            
          
!
            
              let button = document.querySelector("#make-readable");

button.addEventListener("click", function() {
  
  scroll(0, 0);
  
  let mainTweetSource = document.querySelector("#main-tweet-template").innerText;
  let mainTweetTemplate = Handlebars.compile(mainTweetSource);

  let subTweetSource = document.querySelector("#sub-tweet-template").innerText;
  let subTweetTemplate = Handlebars.compile(subTweetSource);

  let content = document.querySelector("#text").textContent;
  let contentArray = content.replace(/([.?!])\s*(?=[A-Z])/g, "$1|")
    .split("|"); 

  let allSubtweets = "";

  let mainTweetData = {
    "avatar": "200/abott@adorable.io.png",
    "user-fullname": "Jimmy Fiddlecakes",
    "user-username": "@everythingmatters",
    "tweet-text": contentArray.shift(),
    "tweet-time": "5:48 PM - 15 Sep 2017",
    "comments": contentArray.length + 1,
    "retweets": Math.floor(Math.random() * 100),
    "loves": Math.floor(Math.random() * 200),
    "tweet-number": 1,
    "tweet-total": contentArray.length + 1
  };
  let mainTweetHtml = mainTweetTemplate(mainTweetData);

  contentArray.forEach(function(sentence, i) {
    let subtweetData = {
      "avatar": "200/abott@adorable.io.png",
      "user-fullname": "Jimmy Fiddlecakes",
      "user-username": "@everythingmatters",
      "tweet-text": sentence,
      "retweets": Math.floor(Math.random() * 50),
      "loves": Math.floor(Math.random() * 50),
      "tweet-number": i + 2,
      "tweet-total": contentArray.length + 1
    };
    let subTweetHtml = subTweetTemplate(subtweetData);
    allSubtweets += subTweetHtml;
  });

  document.querySelector("#content").innerHTML = `
    <div class="all-tweets-container">
      ${mainTweetHtml}
      ${allSubtweets}
    </div>
  `;
  
  document.body.classList.add("ready-to-read-now");
  content.remove();
  button.remove();
  
});

            
          
!
999px
Loading ..................

Console