Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/srv.js

Created August 2, 2019 09:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save subzey/bdd4ab3c03e724fe37260f85b31f3a71 to your computer and use it in GitHub Desktop.
Save subzey/bdd4ab3c03e724fe37260f85b31f3a71 to your computer and use it in GitHub Desktop.
Download ZIP
separated stles demo
Raw
srv.js
const port = 8080;
require('http')
.createServer((req, res) => {
switch (req.url) {
case '/':
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
res.end(`
<!doctype html>
<html>
<body>
<p><a href="/separated/">Separated styles</a></p>
<p><a href="/all-in-head/">All styles in head</a></p>
</body>
</html>
`)
case '/separated/':
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
res.end(`
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/head.css">
</head>
<body>
<link rel="stylesheet" type="text/css" href="/block-1.css">
<div class="block-1">Hello!</div>
<link rel="stylesheet" type="text/css" href="/block-2.css">
<div class="block-2">Hello!</div>
<link rel="stylesheet" type="text/css" href="/block-3.css">
<div class="block-3">Hello!</div>
</body>
</html>
`);
break;
case '/all-in-head/':
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
res.end(`
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/head.css">
<link rel="stylesheet" type="text/css" href="/block-1.css">
<link rel="stylesheet" type="text/css" href="/block-2.css">
<link rel="stylesheet" type="text/css" href="/block-3.css">
</head>
<body>
<div class="block-1">Hello!</div>
<div class="block-2">Hello!</div>
<div class="block-3">Hello!</div>
</body>
</html>
`);
break;
case '/head.css':
setTimeout(() => {
res.writeHead(200, { 'Content-Type': 'text/css;charset=utf-8' });
res.end('body { background: black }');
}, 500);
break;
case '/block-1.css':
setTimeout(() => {
res.writeHead(200, { 'Content-Type': 'text/css;charset=utf-8' });
res.end('.block-1 { height: 300px; background: red }');
}, 1000);
break;
case '/block-2.css':
setTimeout(() => {
res.writeHead(200, { 'Content-Type': 'text/css;charset=utf-8' });
res.end('.block-2 { height: 300px; background: green }');
}, 1500);
break;
case '/block-3.css':
setTimeout(() => {
res.writeHead(200, { 'Content-Type': 'text/css;charset=utf-8' });
res.end('.block-3 { height: 300px; background: blue }');
}, 2000);
break;
default:
res.writeHead(404);
res.end();
}
})
.on('listening', () => {
console.log(`http://localhost:${port}/`);
})
.listen(port);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment