Skip to content

Commit 11c9513

Browse files
miermontotomiermontoto
committed
17.3: optimizations, reduce LCP, add link to marquee
1 parent b29092c commit 11c9513

14 files changed

Lines changed: 106 additions & 112 deletions

File tree

‎.eleventy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ module.exports = function (eleventyConfig) {
3434
eleventyConfig.addShortcode("addScript", function (filename) {
3535
let filepath = findFileInDir("./src/static/js", `${filename}.js`);
3636
if (filepath) {
37-
return `<script src="${filepath.replace('src', '')}"></script>`;
37+
return `<script src="${filepath.replace('src', '')}" defer></script>`;
3838
}
3939

4040
console.log(`JS file ${filename} not found in ./src/static/js`);

‎package.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/content/collections/projects/gti.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ buttons: ['<a class="button download" href="/content/collections/projects/gti.da
1818
<span id="correct">0</span> / <span id="total">?</span>
1919
<span id="→">→</span>
2020
<span id="scored"><span id="score">0</span>%</span>
21-
<noscript class=".error">ERROR: JavaScript is NEEDED for the quiz to work!</noscript>
21+
<noscript>ERROR: JavaScript is NEEDED for the quiz to work!</noscript>
2222
</div>
2323
<div id="options">
2424
<input type="checkbox" id="shuffle-questions" checked>

‎src/index.data.json‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@
55
{"text": "mail", "url": "mailto:mier@mier.info"}
66
],
77
"marquee": [
8-
"still celebrating Homework 25th anniversary.",
9-
"the prime time of your life. now, live it.",
10-
"something's in the air.",
11-
"we are human, after all.",
12-
"WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.",
13-
"if love is the answer, you're home.",
14-
"the perfect song is framed with silence.",
15-
"make love.",
16-
"and we will never be alone again.",
17-
"many rooms to explore but the doors look the same.",
18-
"ROCK. ROBOT ROCK.",
19-
"touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.",
20-
"around the world.",
21-
"music sounds better with you.",
22-
"one more time."
8+
{"text": "still celebrating Homework 25th anniversary.", "url": ""},
9+
{"text": "the prime time of your life. now, live it.", "url": "https://www.youtube.com/watch?v=Kg_WWb181q8"},
10+
{"text": "something's in the air.", "url": ""},
11+
{"text": "we are human, after all.", "url": ""},
12+
{"text": "WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.", "url": ""},
13+
{"text": "if love is the answer, you're home.", "url": ""},
14+
{"text": "the perfect song is framed with silence.", "url": ""},
15+
{"text": "make love.", "url": ""},
16+
{"text": "and we will never be alone again.", "url": ""},
17+
{"text": "many rooms to explore but the doors look the same.", "url": ""},
18+
{"text": "ROCK. ROBOT ROCK.", "url": ""},
19+
{"text": "touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.", "url": ""},
20+
{"text": "around the world.", "url": ""},
21+
{"text": "music sounds better with you.", "url": ""},
22+
{"text": "one more time.", "url": ""},
23+
{"text": "D.V.N.O., four capital letters.", "url": ""},
24+
{"text": "use imagination as a destination.", "url": ""}
2325
]
2426
}

‎src/index.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ js: index
88

99
<div id="main-container">
1010
<div id="title">juan<br>mier</div>
11-
<div id="marquee"><noscript>js isn't enabled :')</noscript></div>
11+
<div id="marquee">⠀<noscript>js isn't enabled :')</noscript></div>
1212

1313
<div id="socials">
1414
{% for link in links %}

‎src/static/css/global.sass‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ code
6767
bottom: 15px
6868
right: 15px
6969
font-size: 16px
70-
color: rgba(255, 255, 255, 0.3)
70+
color: base.$dark
7171
user-select: none
7272
text-decoration: none
7373
cursor: alias
@@ -141,12 +141,10 @@ $rotation: 2.5rad
141141
width: 1.25em
142142
filter: invert(1) grayscale(1) brightness(1.5)
143143

144-
.error
144+
.error, noscript
145145
color: base.$wrong
146146
font-weight: bold
147147
font-size: 2em
148148

149149
quote
150150
font-style: italic
151-
color: base.$white
152-
font-family: 'Times New Roman', Times, serif

‎src/static/js/app/base64.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
window.addEventListener("load", function(event) {
2-
const decoded = document.querySelector('#decoded-text');
3-
const encoded = document.querySelector('#encoded-text');
4-
const copyDecoded = document.querySelector('#decoded-copy');
5-
const copyEncoded = document.querySelector('#encoded-copy');
2+
const decoded = document.getElementById('decoded-text');
3+
const encoded = document.getElementById('encoded-text');
4+
const copyDecoded = document.getElementById('decoded-copy');
5+
const copyEncoded = document.getElementById('encoded-copy');
66

77
const encode = () => {
88
encoded.value = b2a(decoded.value);

‎src/static/js/app/gti.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ let total;
55
let originalQuestions;
66

77
window.addEventListener('load', () => { // when the page loads (the content is rendered)
8-
originalQuestions = document.querySelector('#questions').innerHTML;
9-
document.querySelector('#reset').addEventListener('click', resetAll);
8+
originalQuestions = document.getElementById('questions').innerHTML;
9+
document.getElementById('reset').addEventListener('click', resetAll);
1010
total = document.querySelectorAll('.question-block').length;
11-
document.querySelector('#total').innerHTML = total;
11+
document.getElementById('total').innerHTML = total;
1212

1313
document.querySelectorAll('#shuffle-questions, #shuffle-answers').forEach((checkbox) => {
1414
checkbox.addEventListener('change', resetAll);
@@ -18,7 +18,7 @@ window.addEventListener('load', () => { // when the page loads (the content is r
1818
});
1919

2020
window.addEventListener('scroll', () => {
21-
let element = document.querySelector('#results');
21+
let element = document.getElementById('results');
2222
let stickyPos = element.getBoundingClientRect().top + window.scrollY;
2323

2424
if (window.pageY >= stickyPos) {
@@ -48,7 +48,7 @@ function recalc() {
4848
function shuffleQuestions() {
4949
let questions = document.querySelectorAll('.question-block');
5050
shuffle(questions).forEach((q) => {
51-
document.querySelector('#questions').appendChild(q);
51+
document.getElementById('questions').appendChild(q);
5252
});
5353
}
5454

@@ -83,15 +83,15 @@ function handleAnswerClick(e) {
8383

8484
let correct = isCorrect(target);
8585
if (correct) {
86-
document.querySelector('#correct').innerHTML++;
86+
document.getElementById('correct').innerHTML++;
8787
}
8888
block.parentNode.classList.add(correct ? 'correct' : 'wrong');
8989

90-
let score = document.querySelector('#correct').innerHTML / responded * 100;
91-
document.querySelector('#score').innerHTML = round(score);
90+
let score = document.getElementById('correct').innerHTML / responded * 100;
91+
document.getElementById('score').innerHTML = round(score);
9292

9393
if (responded == total) {
94-
document.querySelector('#results').classList.add('finished');
94+
document.getElementById('results').classList.add('finished');
9595
}
9696
}
9797

@@ -104,13 +104,13 @@ function round(number) {
104104
}
105105

106106
function resetAll() {
107-
document.querySelector('#questions').innerHTML = originalQuestions;
107+
document.getElementById('questions').innerHTML = originalQuestions;
108108

109-
if (document.querySelector('#shuffle-questions').checked) {
109+
if (document.getElementById('shuffle-questions').checked) {
110110
shuffleQuestions();
111111
}
112112

113-
if (document.querySelector('#shuffle-answers').checked) {
113+
if (document.getElementById('shuffle-answers').checked) {
114114
shuffleAnswers();
115115
}
116116

@@ -127,11 +127,11 @@ function resetAll() {
127127
ans.addEventListener('click', handleAnswerClick);
128128
});
129129

130-
document.querySelector('#correct').innerHTML = 0;
131-
document.querySelector('#score').innerHTML = 0;
130+
document.getElementById('correct').innerHTML = 0;
131+
document.getElementById('score').innerHTML = 0;
132132
responded = 0;
133133

134-
document.querySelector('#results').classList.remove('finished');
134+
document.getElementById('results').classList.remove('finished');
135135
}
136136

137137
function shuffle(collection) {

‎src/static/js/app/md5.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
window.addEventListener("load", function(event) {
2-
const input = document.querySelector('#md5-input');
3-
const output = document.querySelector('#md5-output');
4-
const copy = document.querySelector('#md5-copy');
2+
const input = document.getElementById('md5-input');
3+
const output = document.getElementById('md5-output');
4+
const copy = document.getElementById('md5-copy');
55

66
input.value = '';
77
output.innerHTML = '';

‎src/static/js/app/tiny.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
window.addEventListener("load", function(event) {
2-
const input = document.querySelector('#tiny-input');
3-
const output = document.querySelector('#tiny-output');
4-
const ignore = document.querySelector('#tiny-ignore');
5-
const copy = document.querySelector('#tiny-copy');
2+
const input = document.getElementById('tiny-input');
3+
const output = document.getElementById('tiny-output');
4+
const ignore = document.getElementById('tiny-ignore');
5+
const copy = document.getElementById('tiny-copy');
66

77
input.value = '';
88
output.innerHTML = '';

0 commit comments

Comments
 (0)