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.

            
              <svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  style="position:absolute;width:0;height:0;visibility:hidden">
  <defs>
    <symbol id="facebook" viewBox="0 0 16 16">
      <path fill="currentColor" fill-rule="nonzero" d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0 "></path>
    </symbol>
    <symbol id="mail" viewBox="0 0 24 24">
      <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z "></path>
    </symbol>
    <symbol id="twitter" viewBox="0 0 16 16">
      <path fill="currentColor" fill-rule="nonzero" d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z "></path>
    </symbol>
  </defs>
</svg>


<article class="sans-serif dark-gray ph3 ph0-ns mv5 center grid layout measure-wide-m mw8-l">

  <div class="layout--meta mt5 mt0-ns h-100-ns flex flex-column justify-between">
    <div class="mb3 mb0-ns">
      <p class="f6 mt2">By Adrianne Jeffries</p>
      <time class="f6 ttu tracked silver">apr—24—2017 10:05am est</time>
    </div>

    <div class="lh-solid">
      <a class="link dark-gray hover-light-purple mr3"
        href="https://facebook.com" title="Facebook">
        <svg class="dib v-mid" width="0.9em" height="0.9em">
          <use xlink:href="#facebook" />
        </svg>
      </a>
      <a class="link dark-gray hover-light-purple mr3"
        href="https://facebook.com" title="Twitter">
        <svg class="dib v-mid" width="1em" height="1em">
          <use xlink:href="#twitter" />
        </svg>
      </a>
      <a class="link dark-gray hover-light-purple mr3"
        href="https://facebook.com" title="Mail">
        <svg class="dib v-mid" width="1em" height="1em">
          <use xlink:href="#mail" />
        </svg>
      </a>
    </div>
  </div>

  <header class="layout--title avenir">
    <h1 class="lh-solid f1 f-subheadline-m f-headline-l purple b mv0">
      Hawaii’s Online Gaming Curse
    </h1>
    <h2 class="f4 f3-l mb0 light-red lh-title">The island’s physical isolation adds milliseconds of latency to an internet connection. In competitive eSports, milliseconds matter.</h2>
  </header>

  <section class="layout--copy1 cols-no-break cols--1 cols--2-l mt5 lh-copy">
    <p class="mt0">It was a Thursday at around 10 p.m., and the weekly <em>League of Legends</em> tournament was underway at PC Gamerz, a gaming cafe in Honolulu, Hawaii. The store was cool and dark inside, lit by the glow of monitors and a neon-green Monster energy drink sign plugged into the wall. Most of the patrons — almost all young men — were fixated on their screens, but occasionally something would happen in a game, and a corner of the room would break out into raucous commentary.</p>

    <p>This tournament was just for fun, but some of the players seemed to harbor quiet ambition to get more serious about the game. <em>League of Legends</em> is the most watched, most played competitive video game in the world, with professional leagues sponsored by the likes of Intel, Geico, and Monster Energy. According to <a class="link fw6 dark-gray bb b--light-purple dim" href="http://www.esportsearnings.com/games">esportsearnings.com</a>, <em>League of Legends</em> tournaments have awarded $38 million since the game started in 2009. One player attending the weekly tournament, Blaise Lum (handle: Too Tilted), said he plays around 50 hours a week. I asked if he had considered going pro. “I’m nowhere near that good,” he demurred. “Maybe one day, you never know.”</p>

    <p>If Lum wanted to become professional, he’d face an obstacle that’s merely an inconvenience for most <em>League</em> players in Hawaii, but a significant disadvantage for the serious ones. The game’s server is in Chicago. That means if you live in the Midwest, your computer can communicate with it almost instantaneously. If you’re in L.A., it can take roughly 60 milliseconds. But if you’re in Hawaii, it can take 120 milliseconds, with some players reporting as long as 200 milliseconds. And at the highest echelons of competitive video gaming, milliseconds matter.</p>

    <p>We rarely think about the physicality of the internet. In 2006, former Senator Ted Stevens of Alaska was ridiculed for saying the internet was “not a big truck” but rather “a series of tubes.” While Stevens clearly had a limited understanding of the internet, he was right in one sense: The internet is mostly a series of fiberoptic tubes, wrapped in protective layers of steel and plastic, that run above ground and under the sea.</p>

    <p>There are some very specific situations in which the physical limitations of the internet come to the fore. Probably the best-known example is high-frequency trading, in which traders set up shop <a class="link fw6 dark-gray bb b--light-purple dim" href="https://www.telegraph.co.uk/finance/newsbysector/banksandfinance/10736960/High-frequency-trading-when-milliseconds-mean-millions.html">as close to stock exchanges as possible</a>. These limitations are also a <a class="link fw6 dark-gray bb b--light-purple dim" href="https://motherboard.vice.com/en_us/article/how-high-speed-communications-networks-are-making-remote-surgery-realistic">big concern</a> for the emerging field of remote surgery, in which a doctor in the U.S. might operate on a patient in France.</p>

    <blockquote class="mv5 mh0 measure-narrow center avenir f4 fw6 tc ph3 purple">
      <hr class="mt0 mb3 mw4 bt-0 bl-0 br-0 bb bw2 b--light-green" />
      We rarely think about the physicality of the internet
      <hr class="mb0 mt3 mw4 bt-0 bl-0 br-0 bb bw2 b--light-green" />
    </blockquote>

    <p>High frequency traders, remote surgeons, and competitive eSports players are all worried about the same thing: latency, which is the lag time between when users at different ends of a connection register a piece of data. Another word for this is ping, which refers to a test in which a machine sends a small data packet to another machine and calculates how long it takes to come back. Low ping will make a connection seem faster. High ping will make it seem slower. In reality, the data is traveling at the same speed, it’s just going farther, or making more stops that add small delays along the way.</p>
  </section>

  <section class="layout--copy2 lh-copy">
    <p class="mt0">In <em>League</em> and other eSports games, playing on a high ping is a big disadvantage. The goal of the game is to set up defenses to protect your base while pushing forward to capture the enemy’s base, and there are typically lightning bolts and fireballs and slime-spitting dragons shooting across the screen. Playing on a high ping means players may not see all of the action that happens in a game. “It's harder for us to dodge them,” said Devin Wolery, the owner of PC Gamerz. “Or when we attack, they they can dodge it easier.” Or as Lum said, “Those extra seconds, even like milliseconds, they just make you feel really off.”</p>

    <p>In 2015, Riot Games, which publishes <em>League of Legends</em>, <a class="link fw6 dark-gray bb b--light-purple dim" href="http://kotaku.com/league-of-legends-pros-arent-happy-about-riots-latest-l-1723450285">moved</a> the game’s servers from Los Angeles to Chicago in order to “improve connection quality for the vast majority of [North American] players.”</p>

    <p>The change evened out latency for players on the east and west coasts, but it doubled latency for Hawaii players overnight.</p>

    <p>Latency can really screw things up for a young eSports scene, said Zack Johnson, who runs gg Circuit, a global tournament provider for gaming centers like PC Gamerz. Players on the mainland sometimes say they don’t want to compete against Hawaii players, he said, because the high ping throws things off.</p>

    <p>“It really is that they’re out on an island all by themselves,” Johnson said. “In basketball, the hoop is always 10 feet. Every field is always the same. In eSports, there is so much difference in latency, it’s very hard to make that playing field even.”</p>

    <p>That’s partly why all the big tournaments — the ones where the winning team gets cash prizes of over $1 million — happen in big stadiums, and in person. It’s not just for the spectacle; it’s because otherwise it would be difficult to guarantee a fair game. “We haven't had any professional players come out of Hawaii since the server change,” Wolery said.</p>

    <p>That doesn’t mean no professional players have come out of Hawaii. Dyrus, birth name Marcus Hill, <a class="link fw6 dark-gray bb b--light-purple dim" href="https://www.youtube.com/watch?v=3l7TaWNeDvE">played</a> for multiple pro <em>League</em> teams before retiring in 2015 at the ripe age of 23. Matthew Elento, 19, who played as MattLife and now Matt, is a starter for Team Liquid, a well-known eSports organization based in the Netherlands and L.A. that fields teams in multiple games.</p>
  </section>

  <figure class="layout--media ma0 mt3 ba bw3 b--light-green">
    <div class="vh-75 cover bg-center" style="background-image: url('https://outline-prod.imgix.net/20170424-GEPmOt4IKI504DMmKioc?auto=format&q=60&w=1000&s=087d55dcc0dbf252bfa0792b17c3e1d6')">
    </div>
  </figure>

  <section class="layout--aside flex flex-column lh-copy">
    <div class="bg-light-green pa3 f6 fw5">
      Players at PC Gamerz in Honolulu.<br />
      <span class="baskerville">Jordan Oplinger / The Outline</span>
    </div>

    <div class="mv5 mv0-l flex-auto-l flex-l items-center-l">
      <blockquote class="ma0 avenir f4 fw6 ph3 purple bl bw2 b--light-green">
        “Any kid playing video games in Hawaii would know the struggles of playing from Hawaii.”
      </blockquote>
    </div>
  </section>

  <section class="mt0 mt3-l layout--copy3 lh-copy cols-no-break cols--1 cols--2-l">
    <p class="mt0">“Any kid playing video games in Hawaii would know the struggles of playing from Hawaii,” Elento, who now lives in L.A., said. “You have latency for everything.”</p>

    <p>Latency doesn’t really matter until you get to the highest levels of competition, Elento added, because top players have extremely quick reaction times. It takes years of training to get good enough to go pro, and for 95 percent of that time, he said, ping wasn’t a factor. But in that last stretch, when he was playing against expert players, it really hurt.</p>

    <p>He had to learn how to “see into the future,” he said, and predict and input moves in advance. Elento likens the scenario to that of a football player, but “instead of being a regular football player, he has to close his eyes for a quarter of a second for every second, and he has to judge all of his decisions based on information he knew before, and he has to just plug in the information for the last quarter of a second.”</p>

    <p>Gamers playing on high latency develop a “sixth sense” for how to do this, Elento said. When he was growing up in Honolulu, he had an online friend in Australia whose latency was even worse. Yet they both made it to the pro level. “It’s honestly just annoying,” he said. “It’s an obvious competitive disadvantage, but it’s not like it’s unplayable.”</p>

    <p>Riot Games has a <em>League of Legends</em> server in Australia now. It also has servers in Japan, Turkey, Russia, and Brazil. It has two servers for Europe and two for Latin America in addition to the Chicago server for North America. It does not have any servers in Africa, even though they are frequently requested, according to the fan-maintained <a class="link fw6 dark-gray bb b--light-purple dim" href="http://leagueoflegends.wikia.com/wiki/Servers"><em>League of Legends</em> wiki</a>.</p>

    <p>Elento and Wolery said that if Riot could add some kind of server in Hawaii — a small server, perhaps, or a so-called tournament realm server, which is the type of server Riot uses when pros play remote games — it would make a world of difference.</p>

    <blockquote class="mv5 mh0 avenir f4 fw6 tc ph3 purple">
      <hr class="mt0 mb3 mw4 bt-0 bl-0 br-0 bb bw2 b--light-green" />
      Gamers playing on high latency develop a sixth sense for anticipating moves
      <hr class="mb0 mt3 mw4 bt-0 bl-0 br-0 bb bw2 b--light-green" />
    </blockquote>

    <p>“I would hope Riot would help out Hawaii and give them a tournament realm that they could play in,” Elento said. “I’m not sure how feasible that is... But that’s definitely something that would help out the competitive Hawaiian scene.”</p>

    <p>Riot Games declined to comment when asked about latency in Hawaii, saying it was too busy with ongoing Spring Finals playoff series to answer questions. In the meantime, players like Lum will just have to practice clairvoyance.</p>

    <p>“A lot of it is for fun. But I know there's like a certain amount of people who are very competitive. I guess I'm one of them,” Lum said. “That ping hurts sometimes, but it’s something you can power through.”</p>
  </section>

</article>

<a href="https://github.com/winkerVSbecks/grid-experiments"
   target="_blank"
   class="dib grow f4 pa3 lh-solid fixed bottom-1 right-1">
  <svg class="bg-white br-100 light-red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill-rule="nonzero" fill="currentColor" d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 "></path></svg>
</a>
            
          
!
            
              .grid { display: grid; }

.layout--meta { grid-area: meta; }
.layout--title { grid-area: title; }

.layout--copy1 { grid-area: copy1; }
.layout--copy2 { grid-area: copy2; }
.layout--copy3 { grid-area: copy3; }

.layout--media { grid-area: media; }
.layout--aside { grid-area: aside; }

.layout {
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 1em;
  grid-template-areas:
    "title title title title title title"
    "meta  meta meta meta meta meta"
    "copy1 copy1 copy1 copy1 copy1 copy1"
    "copy2 copy2 copy2 copy2 copy2 copy2"
    "media media media media media media"
    "aside aside aside aside aside aside"
    "copy3 copy3 copy3 copy3 copy3 copy3";
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .layout {
    grid-template-areas:
      "meta  meta title title title title"
      "copy1 copy1 copy1 copy1 copy1 copy1"
      "copy2 copy2 copy2 copy2 copy2 copy2"
      "media media media media media media"
      "aside aside aside aside aside aside"
      "copy3 copy3 copy3 copy3 copy3 copy3";
  }
}

@media screen and (min-width: 60em) {
  .layout {
    grid-template-areas:
      "meta  title title title copy2 copy2"
      "copy1 copy1 copy1 copy1 copy2 copy2"
      "copy1 copy1 copy1 copy1 copy2 copy2"
      "media media media media media media"
      "aside aside copy3 copy3 copy3 copy3";
  }
}

.cols-no-break blockquote {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.cols--1 { column-count: 1; }
.cols--2 { column-count: 2; }
.cols--3 { column-count: 3; }

@media screen and (min-width: 30em) {
  .cols--1-ns { column-count: 1; }
  .cols--2-ns { column-count: 2; }
  .cols--3-ns { column-count: 3; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .cols--1-m { column-count: 1; }
  .cols--2-m { column-count: 2; }
  .cols--3-m { column-count: 3; }
}

@media screen and (min-width: 60em) {
  .cols--1-l { column-count: 1; }
  .cols--2-l { column-count: 2; }
  .cols--3-l { column-count: 3; }
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console