HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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; }
}
Also see: Tab Triggers