https://nhanhovan.github.io/articles/

1<!doctype html>
2<html lang="vi" class="no-js">
3  <head>
4    
5<meta charset="utf-8">
6
7
8<!-- begin _includes/seo.html --><title>Bài viết - Van Nhan</title>
9<meta name="description" content="Trang web cá nhân và blog chia sẻ kiến thức của Hồ  Văn Nhân - Full-stack Developer tại Đà Nẵng. Nơi chia sẻ các dự án, bài viết công nghệ và trải nghiệm lập trình.">
10
11
12  <meta name="author" content="Hồ Văn Nhân">
13  
14
15
16<meta property="og:type" content="website">
17<meta property="og:locale" content="vi">
18<meta property="og:site_name" content="Van Nhan">
19<meta property="og:title" content="Bài viết">
20<meta property="og:url" content="https://nhanhovan.github.io/articles/">
21
22
23  <meta property="og:description" content="Trang web cá nhân và blog chia sẻ kiến thức của Hồ  Văn Nhân - Full-stack Developer tại Đà Nẵng. Nơi chia sẻ các dự án, bài viết công nghệ và trải nghiệm lập trình.">
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38<link rel="canonical" href="https://nhanhovan.github.io/articles/">
39
40
41
42
43
44
45
46
47
48
49
50
51<!-- end _includes/seo.html -->
52
53
54
55  <link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Van Nhan Feed">
56<meta name="viewport" content="width=device-width, initial-scale=1.0">
57

58<script>
59  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
60  
61</script>

61
62
63<!-- For all browsers -->
64<link rel="stylesheet" href="/assets/css/main.css">
65<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
66<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css"></noscript>
67
68
69
70    <!-- Content Security Policy (CSP) -->
71<meta http-equiv="Content-Security-Policy"
72  content="default-src 'self'; script-src 'self' 'unsafe-inline' https://kit.fontawesome.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://use.fontawesome.com https://cdn.jsdelivr.net; font-src 'self' https://fonts.gstatic.com https://use.fontawesome.com https://cdn.jsdelivr.net; img-src 'self' data: https://*; connect-src 'self' https://*; frame-src 'self' https://*;">
73
74<!-- Dark mode: áp dụng theme trước khi render để tránh FOUC -->

75<script>
76  (function () {
77    try {
78      var theme = localStorage.getItem('theme') || 'light';
79      if (theme === 'dark') {
80        document.documentElement.setAttribute('data-theme', 'dark');
81      }
82    } catch (e) { }
83  })();
84</script>

84
85
86<!-- Custom CSS (dark mode styles) -->
87<link rel="stylesheet" href="/assets/css/custom.css">
88
89<!-- Favicon -->
90<link rel="icon" type="image/png" href="/assets/images/favicon.png">
91
92<!-- Dark mode JS -->

93<script src="/assets/js/dark-mode.js" defer></script>

93
94  </head>
95
96  <body class="layout--single wide">
97
98    
99<nav class="skip-links" aria-label="Skip links">
100  <ul>
101    <li><a href="#site-nav" class="screen-reader-shortcut">Skip to primary navigation</a></li>
102    <li><a href="#main" class="screen-reader-shortcut">Skip to content</a></li>
103    <li><a href="#footer" class="screen-reader-shortcut">Skip to footer</a></li>
104  </ul>
105</nav>
106
107
108    <!-- ① BANNER: custom include -->
109    <div class="site-banner" role="banner" aria-label="Site banner">
110  
111  <img class="site-banner__image" src="/assets/images/2026-06-15-banner-header.png" alt="Site banner">
112</div>
113
114    <!-- ② MASTHEAD: custom navigation include -->
115    <div class="masthead">
116  <div class="masthead__inner-wrap">
117    <div class="masthead__menu">
118      <nav id="site-nav" class="custom-nav">
119        <!-- Checkbox for toggling mobile menu -->
120        <input type="checkbox" id="nav-menu-toggle" class="nav-menu-toggle" />
121        
122        <!-- Hamburger Menu Button -->
123        <label for="nav-menu-toggle" class="nav-menu-btn">
124          <span class="navicon"></span>
125        </label>
126
127        <!-- Navigation Links -->
128        <ul class="visible-links">
129            
130            <li class="masthead__menu-item">
131              <a href="/">Home</a>
132            </li>
133            
134            <li class="masthead__menu-item active">
135              <a href="/articles/">Bài viết</a>
136            </li>
137            
138            <li class="masthead__menu-item">
139              <a href="/projects/">Dự án</a>
140            </li>
141            
142            <li class="masthead__menu-item">
143              <a href="/about/">Giới thiệu</a>
144            </li></ul>
145        
146        <!-- Theme Switcher (Single instance in DOM) -->
147        <div class="theme-toggle-container">
148          <div class="theme-switch-wrapper">
149  <label class="theme-switch" for="dark-mode-toggle">
150    <input type="checkbox" id="dark-mode-toggle" aria-label="Chuyển sang Dark Mode" />
151    <span class="slider round"></span>
152  </label>
153</div>
154        </div>
155      </nav>
156    </div>
157  </div>
158</div>
159
160
161    <div class="initial-content">
162      <div id="main" role="main">
163  
164
165
166  <article class="page" itemscope itemtype="https://schema.org/CreativeWork">
167    <meta itemprop="headline" content="Bài viết">
168    
169    
170    
171
172    <div class="page__inner-wrap">
173
174      <!-- ① Title + metadata — luôn hiển thị (ẩn ở trang tổng hợp articles và projects) -->
175      
176
177      <!-- ② Ảnh bài viết — hiển thị sau title/meta, trước nội dung -->
178      
179
180      <section class="page__content" itemprop="text">
181        
182        <div class="archive-posts-grouped">
183  
184  
185  
186    
187    
188      
189      <h2 class="archive__subtitle">2026</h2>
190      <ul class="archive-posts-list">
191      
192    
193    <li class="archive-post-item">
194      <h3 class="archive-post-title">
195        <a href="/2026/02/25/ai-and-me-from-pilot-to-captain/">Từ người lái thuê đến thuyền trưởng AI</a>
196      </h3>
197      <div class="archive-post-meta">
198        <span class="archive-post-date">
199          <i class="far fa-calendar-alt"></i> 25/02/2026
200        </span>
201        
202          
203          <span class="archive-post-readtime">
204            <i class="far fa-clock"></i> 4 phút đọc
205          </span>
206        
207      </div>
208      
209        <p class="archive-post-excerpt">Làm sao để không bị tụt lại phía sau trước làn sóng AI? Hãy cùng thay đổi tư duy từ một người làm thuê công nghệ sang một thuyền trưởng thực thụ.</p>
210      
211    </li>
212  
213    
214    
215    <li class="archive-post-item">
216      <h3 class="archive-post-title">
217        <a href="/2026/01/13/principle-80-20/">Làm chủ suy nghĩ tiêu cực</a>
218      </h3>
219      <div class="archive-post-meta">
220        <span class="archive-post-date">
221          <i class="far fa-calendar-alt"></i> 13/01/2026
222        </span>
223        
224          
225          <span class="archive-post-readtime">
226            <i class="far fa-clock"></i> 4 phút đọc
227          </span>
228        
229      </div>
230      
231        <p class="archive-post-excerpt">Chia sẻ câu chuyện và phương pháp giúp bạn nhận diện, chuyển hóa những suy nghĩ tiêu cực thành nguồn động lực mạnh mẽ.</p>
232      
233    </li>
234  
235    
236    
237      
238        </ul>
239      
240      <h2 class="archive__subtitle">2023</h2>
241      <ul class="archive-posts-list">
242      
243    
244    <li class="archive-post-item">
245      <h3 class="archive-post-title">
246        <a href="/2023/07/17/introduction-to-flask/">Lập trình Web với Flask</a>
247      </h3>
248      <div class="archive-post-meta">

249        <span class="archive-post-date">
250          <i class="far fa-calendar-alt"></i> 17/07/2023
251        </span>
252        
253          
254          <span class="archive-post-readtime">
255            <i class="far fa-clock"></i> 1 phút đọc
256          </span>
257        
258      </div>
259      
260        <p class="archive-post-excerpt">Tìm hiểu về Flask, một microframework Python tối giản và linh hoạt, giúp bạn xây dựng ứng dụng web nhanh chóng.</p>
261      
262    </li>
263  
264    
265    
266    <li class="archive-post-item">
267      <h3 class="archive-post-title">
268        <a href="/2023/07/17/shopify-developers-platform/">Phát triển Shopify Theme &amp; App</a>
269      </h3>
270      <div class="archive-post-meta">
271        <span class="archive-post-date">
272          <i class="far fa-calendar-alt"></i> 17/07/2023
273        </span>
274        
275          
276          <span class="archive-post-readtime">
277            <i class="far fa-clock"></i> 1 phút đọc
278          </span>
279        
280      </div>
281      
282        <p class="archive-post-excerpt">Khám phá quy trình phát triển giao diện (Theme) và ứng dụng (App) trên hệ sinh thái thương mại điện tử Shopify.</p>
283      
284    </li>
285  
286    
287    
288    <li class="archive-post-item">
289      <h3 class="archive-post-title">
290        <a href="/2023/07/16/what-is-vuejs/">Tìm hiểu Vue.js</a>
291      </h3>
292      <div class="archive-post-meta">
293        <span class="archive-post-date">
294          <i class="far fa-calendar-alt"></i> 16/07/2023
295        </span>
296        
297          
298          <span class="archive-post-readtime">
299            <i class="far fa-clock"></i> 1 phút đọc
300          </span>
301        
302      </div>
303      
304        <p class="archive-post-excerpt">Giới thiệu tổng quan về Vue.js, một framework JavaScript linh hoạt và dễ tiếp cận cho việc xây dựng giao diện người dùng hiện đại.</p>
305      
306    </li>
307  
308    
309    
310    <li class="archive-post-item">
311      <h3 class="archive-post-title">
312        <a href="/2023/04/20/liberating-structure/">Tìm hiểu Liberating Structures</a>
313      </h3>
314      <div class="archive-post-meta">
315        <span class="archive-post-date">
316          <i class="far fa-calendar-alt"></i> 20/04/2023
317        </span>
318        
319          
320          <span class="archive-post-readtime">
321            <i class="far fa-clock"></i> 1 phút đọc
322          </span>
323        
324      </div>
325      
326        <p class="archive-post-excerpt">Khám phá bộ công cụ Liberating Structures giúp giải phóng sức sáng tạo và tối ưu hóa hiệu suất làm việc nhóm.</p>
327      
328    </li>
329  
330  
331    </ul>
332  
333</div>
334
335
336        
337
338
339        
340      </section>
341
342      <footer class="page__meta">
343        
344        
345
346  
347
348  
349
350
351        
352
353
354
355      </footer>
356
357      
358
359      
360
361    </div>
362
363    
364  </article>
365
366  
367</div>
368
369    </div>
370
371    
372
373    <div id="footer" class="page__footer">
374      <footer>
375        <!-- start custom footer snippets -->
376
377<!-- end custom footer snippets -->
378        <div class="page__footer-follow">
379  <ul class="social-icons">
380    
381
382    
383  </ul>
384</div>
385
386<div class="page__footer-copyright">&copy; 2026 Van Nhan</div>
387      </footer>
388    </div>
389
390    
391
392  

392<script src="/assets/js/main.min.js"></script>

392
393
394
395
396
397
398
399
400
401
402
403
404  </body>
405</html>