Skip to content

Commit 2c84428

Browse files
escape-devescape-dev
committed
feat: optimize data loader
1 parent 8bf990b commit 2c84428

File tree

7 files changed

+156
-133
lines changed

7 files changed

+156
-133
lines changed

‎assets/js/app.js‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
const CONFIG = {
2+
BASE_URL: "./assets/js/data/",
3+
FILE_EXT: ".json",
4+
};
5+
16
function toggleDropdown(dropdownId) {
27
const dropdown = document.getElementById(dropdownId);
38

@@ -32,68 +37,60 @@ function syntaxHighlight(json) {
3237
);
3338
}
3439

35-
const experiences = {
36-
message: "OK",
37-
data: [
38-
{
39-
title: "Freelance Backend Developer",
40-
description:
41-
"Working as a backend developer, responsible for developing and maintaining the company's backend services",
42-
start_date: "January 2024",
43-
end_date: null,
44-
is_active: true,
45-
skills: ["Kotlin", "Spring Boot", "PostgreSQL", "Gitlab", "Scrum"],
46-
},
47-
{
48-
title: "Freelance Backend Developer",
49-
company_name: "PT. Qatros Teknologi Nusantara",
50-
description:
51-
"As a backend developer, I create APIs, design database systems, and integrate third-party APIs like Challonge for tournament bracket generator. At MovesGG, a platform for gaming tournaments, I focus on building scalable backend services to handle tournament management and ensure smooth integration with external services.",
52-
start_date: "December 2022",
53-
end_date: "March 2023",
54-
is_active: false,
55-
skills: ["Ruby", "Ruby on Rails", "Scrum", "PostgreSQL", "Gitlab"],
56-
},
57-
{
58-
title: "Internship Web Developer",
59-
company_name: "PT. Git Solution",
60-
description:
61-
"Internship as a full stack web developer, develop online learning management system (LMS) using Laravel.",
62-
start_date: "September 2021",
63-
end_date: "December 2021",
64-
is_active: false,
65-
skills: ["PHP", "Laravel", "PostgreSQL", "Git", "RESTApi"],
66-
},
67-
],
68-
};
40+
async function getContent(filename) {
41+
return fetch(`${CONFIG.BASE_URL}/${filename}${CONFIG.FILE_EXT}`)
42+
.then((response) => response.json())
43+
.then((data) => data)
44+
.catch((error) =>
45+
console.error("Something shit happened: " + error.message)
46+
);
47+
}
6948

70-
const projects = {
71-
message:
72-
"The project I worked on was an internal system at my previous company, and due to confidentiality agreements, I’m unable to share specific details.",
73-
data: null,
74-
};
49+
function createContentHtml(content, contentJson) {
50+
const { name, method, url, description, status } = content;
7551

76-
const reachMeOut = {
77-
message: "OK",
78-
data: [
79-
{
80-
platform_name: "linkedin",
81-
url: "https://www.linkedin.com/in/hafizalfikri/",
82-
},
83-
{
84-
platform_name: "github",
85-
url: "https://github.com/escape-dev",
86-
},
87-
{
88-
platform_name: "email",
89-
url: "[email protected]",
90-
},
91-
],
92-
};
52+
return `<div class="dropdown-container">
53+
<button class="dropdown-btn" onclick="toggleDropdown('${name}')">
54+
<span class="get-method">${method}</span>
55+
<p class="dropdown-description">
56+
${url}
57+
<small>${description}</small>
58+
</p>
59+
</button>
60+
<div class="dropdown-content" id="${name}">
61+
<table>
62+
<tr>
63+
<th>Code</th>
64+
<th>Description</th>
65+
</tr>
66+
<tr>
67+
<td class="json-viewer">${status}</td>
68+
<td class="json-viewer">
69+
<pre> ${syntaxHighlight(contentJson)} </pre>
70+
</td>
71+
</tr>
72+
</table>
73+
</div>
74+
</div>`;
75+
}
76+
77+
async function renderContent() {
78+
const mainContent = document.getElementById("main-content");
79+
const listContents = await getContent("listContents");
80+
81+
const contentPromises = listContents.data.map(async (value) => {
82+
const contentJson = await getContent(value.name);
83+
84+
return { value, contentJson };
85+
});
86+
87+
const contents = await Promise.all(contentPromises);
88+
89+
const contentHtml = contents
90+
.map(({ value, contentJson }) => createContentHtml(value, contentJson))
91+
.join("");
92+
93+
mainContent.innerHTML = contentHtml;
94+
}
9395

94-
document.getElementById("experience-content").innerHTML =
95-
syntaxHighlight(experiences);
96-
document.getElementById("projects-content").innerHTML =
97-
syntaxHighlight(projects);
98-
document.getElementById("reach-me-out-content").innerHTML =
99-
syntaxHighlight(reachMeOut);
96+
document.addEventListener("DOMContentLoaded", renderContent);

‎assets/js/data/experiences.js‎

Whitespace-only changes.

‎assets/js/data/experiences.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"message": "OK",
3+
"data": [
4+
{
5+
"title": "Freelance Backend Developer",
6+
"description": "Working as a backend developer, responsible for developing and maintaining the company's backend services",
7+
"start_date": "January 2024",
8+
"end_date": null,
9+
"is_active": true,
10+
"skills": [
11+
"Kotlin",
12+
"Spring Boot",
13+
"PostgreSQL",
14+
"Gitlab",
15+
"Scrum"
16+
]
17+
},
18+
{
19+
"title": "Freelance Backend Developer",
20+
"company_name": "PT. Qatros Teknologi Nusantara",
21+
"description": "As a backend developer, I create APIs, design database systems, and integrate third-party APIs like Challonge for tournament bracket generator. At MovesGG, a platform for gaming tournaments, I focus on building scalable backend services to handle tournament management and ensure smooth integration with external services.",
22+
"start_date": "December 2022",
23+
"end_date": "March 2023",
24+
"is_active": false,
25+
"skills": [
26+
"Ruby",
27+
"Ruby on Rails",
28+
"Scrum",
29+
"PostgreSQL",
30+
"Gitlab"
31+
]
32+
},
33+
{
34+
"title": "Internship Web Developer",
35+
"company_name": "PT. Git Solution",
36+
"description": "Internship as a full stack web developer, develop online learning management system (LMS) using Laravel.",
37+
"start_date": "September 2021",
38+
"end_date": "December 2021",
39+
"is_active": false,
40+
"skills": [
41+
"PHP",
42+
"Laravel",
43+
"PostgreSQL",
44+
"Git",
45+
"RESTApi"
46+
]
47+
}
48+
]
49+
}

‎assets/js/data/listContents.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"message": "OK",
3+
"data": [
4+
{
5+
"name": "experiences",
6+
"url": "/experiences",
7+
"description": "return all my experiences",
8+
"status": "200",
9+
"method": "GET"
10+
},
11+
{
12+
"name": "projects",
13+
"url": "/projects",
14+
"description": "return all my projects",
15+
"status": "422",
16+
"method": "GET"
17+
},
18+
{
19+
"name": "reachMeOut",
20+
"url": "/reach-me-out",
21+
"description": "return all my contacts",
22+
"status": "200",
23+
"method": "GET"
24+
}
25+
]
26+
}

‎assets/js/data/projects.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"message": "The project I worked on was an internal system at my previous company, and due to confidentiality agreements, I’m unable to share specific details.",
3+
"data": null
4+
}

‎assets/js/data/reachMeOut.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"message": "OK",
3+
"data": [
4+
{
5+
"platform_name": "linkedin",
6+
"url": "https://www.linkedin.com/in/hafizalfikri/"
7+
},
8+
{
9+
"platform_name": "github",
10+
"url": "https://github.com/escape-dev"
11+
},
12+
{
13+
"platform_name": "email",
14+
"url": "[email protected]"
15+
}
16+
]
17+
}

‎index.html‎

Lines changed: 1 addition & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -23,77 +23,7 @@ <h1>
2323
always eager to learn and improve my development skills.
2424
</p>
2525
</section>
26-
<section class="experience">
27-
<div class="dropdown-container">
28-
<button class="dropdown-btn" onclick="toggleDropdown('experience')">
29-
<span class="get-method">Get</span>
30-
<p class="dropdown-description">
31-
/experiences
32-
<small>return all my experience</small>
33-
</p>
34-
</button>
35-
<div class="dropdown-content" id="experience">
36-
<table>
37-
<tr>
38-
<th>Code</th>
39-
<th>Description</th>
40-
</tr>
41-
<tr>
42-
<td class="json-viewer">200</td>
43-
<td class="json-viewer">
44-
<pre id="experience-content"></pre>
45-
</td>
46-
</tr>
47-
</table>
48-
</div>
49-
</div>
50-
<div class="dropdown-container">
51-
<button class="dropdown-btn" onclick="toggleDropdown('projects')">
52-
<span class="get-method">Get</span>
53-
<p class="dropdown-description">
54-
/projects
55-
<small>return all my detail</small>
56-
</p>
57-
</button>
58-
<div class="dropdown-content" id="projects">
59-
<table>
60-
<tr>
61-
<th>Code</th>
62-
<th>Description</th>
63-
</tr>
64-
<tr>
65-
<td class="json-viewer">403</td>
66-
<td class="json-viewer">
67-
<pre id="projects-content"></pre>
68-
</td>
69-
</tr>
70-
</table>
71-
</div>
72-
</div>
73-
<div class="dropdown-container">
74-
<button class="dropdown-btn" onclick="toggleDropdown('reach-me-out')">
75-
<span class="get-method">Get</span>
76-
<p class="dropdown-description">
77-
/reach-me-out
78-
<small>return all my contacts</small>
79-
</p>
80-
</button>
81-
<div class="dropdown-content" id="reach-me-out">
82-
<table>
83-
<tr>
84-
<th>Code</th>
85-
<th>Description</th>
86-
</tr>
87-
<tr>
88-
<td class="json-viewer">200</td>
89-
<td class="json-viewer">
90-
<pre id="reach-me-out-content"></pre>
91-
</td>
92-
</tr>
93-
</table>
94-
</div>
95-
</div>
96-
</section>
26+
<section class="experience" id="main-content"></section>
9727
</main>
9828
<script src="./assets/js/app.js"></script>
9929
</body>

0 commit comments

Comments
 (0)