Frontend

Bài viết được sự cho phép của tác giả Kien Dang Chung Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?… mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triển tư duy công việc sau này, bạn không chỉ là một người lập trình (coder) mà biết đâu bạn có thể trở thành một người nghiên cứu, một người phát triển những ngôn ngữ, những công nghệ mới? Dài dòng một chút những chia sẻ về nghề và giờ là lúc chúng ta cùng đi vào tìm hiểu kiến thức HTML cơ bản. Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML. HTML5 khác HTML như thế nào? 1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản Trong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn...

Để showcase được sản phẩm/ dịch vụ của công ty thì bạn cần những hình ảnh/ video bắt mắt nhất mới nổi bật được. Ví dụ, dịch vụ của bạn là Khách sạn, thì cách tốt nhất để hút khách là bạn phải show ra nhiều hình ảnh đa dạng nhiều phòng, hồ bơi và các dịch vụ khác mà bạn cung cấp. Chứ một biển chữ thông tin sẽ không mảy may giúp ích được gì đâu! Vì thế việc up thật nhiều ảnh là một chiến thuật tốt để “khoe khoang” về sản phẩm, tuy nhiên sẽ dễ sa vào tình trạng bị “nhiễu” – overload. Ảnh lẻ và một số element có thể sẽ không được tốt như kỳ vọng vì nó cũng cạnh tranh với hàng loạt các nhóm ảnh và các element khác trên trang web nữa. Lúc này mới thấy Lightbox đóng vai trò khá quan trọng. Nó giúp tập trung sự chú ý của web visitor vào một ảnh/ một phần nhất định trong một gallery và portfolio trồi lên giữa page và làm mờ đi phần còn lại cho đến user thực hiện thao tác. Vấn đề còn lại lúc này vẫn còn cả ngàn lightbox plugin ngoài kia, và khá khó để chọn ra cái nào hợp nhất cho page của bạn. Bài viết này sẽ tổng hợp hết cho bạn Top 5 plugin lightbox cho năm 2022 . Bài post sẽ cover tất cả các feature để bạn dễ chọn lựa cái thích hợp nhất cho page của mình. 1. Plugin đầu tiên chắc chắn là LC Lightbox. Nó có đầy đủ các feature bạn cần cho một lightbox plugin và nhiều tính năng khác nữa. Một số feature nổi bật nhất gồm có: Bạn có thể tạo slideshow cho...

Tôi đích thân tự chọn vài trích đoạn những code hữu ích nhất từ trang ‘ 30secondsofcode ’, vốn đã là 1 nguồn tài nguyên tuyệt vời. Và bạn cũng đừng ngại chi mà hãy ủng hộ nó hết mình nhé. Trong đề tài này tôi đã cố sắp xếp dựa theo cách sử dụng các thực hành của chúng. Và trả lời các câu hỏi thường gặp mà bạn có thể phải đối mặt trong dự án của mình: Học Javascript 1: Syntax Parser, Execution Context, Lexical Environment là gì Những thứ kỳ quặc của Javascript? 1. Cách để ẩn hết các yếu tố quy định? const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); // Example hide(document.querySelectorAll('img')); // Hides all <img> elements on the page 2. Làm thế nào để kiểm tra nếu yếu tố đó có lớp quy định? const hasClass = (el, className) => el.classList.contains(className); // Example hasClass(document.querySelector('p.special'), 'special'); // true 3. Cách để chuyển đổi 1 lớp cho 1 yếu tố? const toggleClass = (el, className) => el.classList.toggle(className); // Example toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore 4. Làm thế nào để lấy vị trí cuộn của trang hiện tại? const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop }); // Example getScrollPosition(); // {x: 0, y: 200} 5. Cách để cuộn-mượt hơn tới đầu trang? const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; // Example scrollToTop(); 6. Làm thế nào để kiểm tra nếu yếu tố ‘parent’ đang mang yếu tố ‘child’? const elementContains = (parent, child) => parent !== child && parent.contains(child); // Examples...

Tác giả: Sarthak Sharma Đã có một thời gian khi ai đó hỏi “Bootstrap là gì?” Chúng ta đều sẽ trả lời rằng đó là “một điều kỳ diệu”. Thời điểm đó đã qua, giờ đây chúng ta đã quá hiểu và biết quá rõ những khả năng cũng như giới hạn của Bootstrap, cùng với việc sử dụng các CSS Framework trở nên thông dụng trong toàn ngành vì chúng tiết kiệm rất nhiều thời gian. Nhưng có một câu hỏi được đặt ra đó chính là “Liệu chúng ta có có thật sự cần CSS Framework?”. Bài viết này sẽ nếu ra những lý do bạn không cần CSS Framework. Có thể bạn quan tâm: 5 điều phiền toái nhất của CSS CSS trong JavaScript: Công cụ không thể thiếu cho component-based styling Chưa tận dụng hết CSS Có khoảng thời gian mà tất cả những gì chúng ta cần làm đó là thêm bootstrap.min.css và BOOM – phiên bản production của ứng dụng đã sẵn sàng… hoặc chúng ta nghĩ rằng nó đã sẵn sàng. Vì thật ra thì nó không đơn giản như vậy. Cùng xem qua ví dụ từ trang web này nhé. Họ đang sử dụng Bootstrap cho landing page của mình. Có thể thấy nó đang được tối ưu hoá dung lượng nhưng điểm đặc biệt ở đây chính là có hơn 90% CSS Framework không được sử dụng tới. Chỉ cần sử dụng công cụ coverage ở Chrome là bạn có thể kiểm tra bất kỳ trang web nào bằng cách bấm cmd + shift + p và gõ “coverage”. Đương nhiên Bootstrap có các công cụ như Customize and Download cho phép bạn lựa chọn các thành phần và giảm kích thước của tệp đã tải xuống. Tuy nhiên vẫn còn...

TypeScript chắc hẳn không quá xa lạ đối với các lập trình viên, tuy nhiên, bạn có thật sự hiểu hết về TypeScript, giữa TypeScript và JavaScript có mối quan hệ gì không? Trong bài viết hôm nay của Station D, chúng ta sẽ cùng tìm hiểu cặn kẽ TypeScript là gì và tại sao nên sử dụng ngôn ngữ này thay vì các ngôn ngữ lập trình khác. TypeScript Là gì? TypeScript là gì? TypeScript (viết tắt là TS) là một ngôn ngữ lập trình mã nguồn mở ( OOP ) được phát triển và duy trì bởi Microsoft vào năm 2012. TypeScript được xem là một phần mở rộng của JavaScript, sử dụng cú pháp của JavaScript và bổ sung thêm các tính năng mạnh mẽ như kiểu tĩnh và hướng đối tượng để hỗ trợ Type (các kiểu dữ liệu). TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type. Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng một file và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của JavaScript và mở rộng nó bằng một loạt tính năng mới. Nhờ đó mà hiệu năng làm việc được tăng lên đáng kể. Tuy nhiên một project viết bằng TypeScript cần có compiler (trình biên dịch) để biên dịch những dòng code đó thành JavaScript để browser có thể đọc hiểu được. Tại sao vậy? Nhắc lại kiến thức căn bản đó là browser chỉ hiểu được HTML, CSS và JavaScript, vì vậy cần phải có TypeScript Compiler. Tại sao cần có TypeScript Compiler Tham khảo thêm các việc làm Typescript lương cao cho bạn. Tính năng của TypeScript Null Checking TypeScript hỗ trợ kiểm tra null...

Dù có là 1 lập trình viên web hay không, chắc hẳn bạn cũng đã bắt gặp HTTP status code (mã trạng thái HTTP) ít nhất 1 hay nhiều lần rồi đúng không nào? 200, 404, 500… đều là những HTTP status code phổ biến. Thậm chí các truyện vui hay ảnh chế meme về 404 cũng khá nổi tiếng và đầy rẫy trên mạng Internet mà hầu hết bất kỳ ai cũng có thể hiểu được. Vậy thì có bao giờ bạn thắc mắc HTTP status code là gì và ý nghĩa các con số của chúng hay chưa? Hôm nay chúng ta sẽ nói tổng quát 1 chút về HTTP status code và ý nghĩa nằm ẩn sau các con số đó nhé! HTTP Status Code – Mã trạng thái HTTP là gì? Khi được nhận và phiên dịch 1 yêu cầu HTTP từ phía client, HTTP status code sẽ được máy chủ cung cấp để đáp ứng yêu cầu đó của họ. Nó bao gồm code từ IETF Request for Comments (RFC), các thông số kỹ thuật khác và 1 số code bổ sung được sử dụng trong 1 số ứng dụng phổ biến của giao thức HTTP. Chữ số đầu tiên của HTTP status code chỉ định 1 trong 5 loại phản hồi quy chuẩn. Các cụm tin nhắn được hiển thị chỉ mang tính tượng trưng, nhưng cũng có thể cung cấp bất kỳ thông tin bổ sung nào để chúng ta có thể đọc được. Trừ khi có những chỉ định khác, HTTP status code được xem như 1 phần của quy chuẩn HTTP/1.1 (RFC 7231). Cơ Quan Cấp Số Được Ấn Định Trên Internet (tức IANA hay The Internet Assigned Numbers Authority) chính là nơi duy trì sổ đăng ký chính thức của...

Expressjs là gì ? Nếu đã từng vào nhà hàng kiểu ngồi (sit-down restaurant), bạn sẽ hiểu được những kiến thức cơ bản về Express. Nhưng nếu chỉ mới build backend Node.js lần đầu thì… bạn sẽ gặp khá nhiều khó khăn. Yes, nếu đã làm việc với Javascript bạn sẽ học Node nhanh hơn. Nhưng thách thức đối mặt khi xây dựng backend hoàn toàn khác với những thách thức khi sử dụng Javascript ở frontend. Khi học Node, tôi đã chọn 1 cách học khó nhằn là nghiên cứu eBooks, các tài liệu hướng dẫn, videos.. cứ như vậy cho đến khi thực sự hiểu tại sao mình lại làm những gì mình đang làm. Tự học Node.js thì bắt đầu từ đâu? Học Node.js có khó không? Nhưng có 1 cách dễ hiểu hơn, là sử dụng câu chuyện so sánh liên quan đến nhà hàng kiểu ngồi để giải thích 4 phần quan trọng nhất trong app Express đầu tiên của bạn. Express.js là 1 framework dùng để sắp xếp code nổi tiếng, thường được các bạn mới bắt đầu code sử dụng. Bài viết “Expressjs là gì?”sẽ tập trung vào 4 phần chính sau: Require statements trong Expressjs là gì? Middleware Routing trong Expressjs là gì? App.listen()/ Starting the server Trong phép so sánh này, bạn sẽ là chủ nhà hàng đang muốn tuyển Manager chung – người tạo nên tất cả quy trình và quản lý nhà hàng 1 cách trơn tru nhất, đem lại cho khách hàng những trải nghiệm vui vẻ, hạnh phúc. . Tổng quan bài viết Expressjs là gì như sau: Định nghĩa về Expressjs là gì? Expressjs là một framework được xây dựng trên nền tảng của Nodejs . Nó cung cấp các tính năng mạnh mẽ để phát...

Bài viết được sự cho phép của tác giả Tino Phạm Với sự phát triển ngày càng nhiều của các ứng dụng web, các nhà phát triển đã bắt đầu tìm kiếm những giải pháp có thể cải thiện tính bền vững và khả năng bảo trì của mã nguồn. Đó là lý do mà TypeScript, một ngôn ngữ lập trình được phát triển bởi Microsoft, đã ra đời như một sự mở rộng mạnh mẽ của JavaScript. Trong bài viết này, chúng ta sẽ so sánh hai ngôn ngữ Typescript vs JavaScript, để xem chúng khác nhau ra sao và nên chọn ngôn ngữ lập trình nào. Nhắc lại về TypeScript TypeScript làm một ngôn ngữ lập trình mã nguồn mở được phát triển bởi Microsoft. Cha đẻ của TypeScript là Anders Hejlsberg, một kiến trúc sư trưởng (Lead Architect) của ngôn ngữ C# và là cha đẻ của ngôn ngữ lập trình Delphi và Turbo Pascal. Tuyển dụng lập trình Typescript lương cao 3000 USD So sánh Typescript vs JavaScript TypeScript được biết đến như một ngôn ngữ lập trình hướng đối tượng trong khi JavaScript là ngôn ngữ dựa trên prototype. TypeScript có tính năng kiểu tĩnh nhưng JavaScript không hỗ trợ tính năng này. TypeScript hỗ trợ interfaces nhưng JavaScript không có. Tính Năng TypeScript JavaScript Kiểu Dữ Liệu Cung cấp kiểu tĩnh Kiểu động Công Cụ Hỗ Trợ Có IDE và trình soạn thảo tốt Công cụ tích hợp hạn chế Cú Pháp Tương tự JavaScript, với tính năng bổ sung Cú pháp JavaScript tiêu chuẩn Tương Thích Tương thích ngược với JavaScript Không thể chạy TypeScript trong tệp JavaScript Gỡ Lỗi Kiểu mạnh mẽ giúp phát hiện lỗi Có thể cần nhiều gỡ lỗi hơn Đường Học Cần thời gian để học tính năng...

Tác giả: Kyle Prinsloo Cách nhanh nhất để lên trình Front end là tự triển những project thật. Bạn có thể xem tutorials, hay tham gia rất nhiều khóa học, nhưng nếu không tự ứng dụng và thực hành thì sẽ rất khó để bạn thực sự tiếp thu những kỹ năng cần thiết cho những projects thực tế. Những project từ client thì sẽ không có hướng dẫn từ A đến Z, nếu có thì họ cũng chẳng cần bạn làm gì. Với project được giao, bạn phải tự thân vận động từ solution, thực hiện từng bước, thậm chí hack quá trình để về đích. Vì vậy cách tốt nhất để luyện skill là bắt tay tự làm những project front-end và tự rút ra bài học kinh nghiệm cá nhân luôn một thể. Chưa cần khách hàng vào thời điểm này khi tự bạn có thể build project cho riêng mình. Chọn Project cá nhân như thế nào? Xác định level kỹ năng Khoan hãy chọn những project quá nâng cao so với trình hiện tại, nhất là nếu bạn dễ nản khi gặp khó khăn. Nhưng cũng đừng quên mục tiêu đặt ra là để master front-end, cho nên hãy chọn một project cao hơn so với skill level hiện tại, mà vẫn khả thi. Ví dụ, bạn vừa hoàn thành HTML và CSS, thì đã đến lúc tìm hiểu thêm JavaScript. Xử lý problem cá nhân hay bài toán mà bạn quan tâm Bạn sẽ hào hứng và “dính” với project hơn nếu có problem liên quan đến cuộc sống xung quanh hay nó có thể đáp ứng mong muốn nào đó của riêng bạn. Có thể nhiều lúc bạn mất kiểm soát về thời gian khi lướt Facebook quá nhiều, hoặc bạn đang muốn...

Dù đang là sinh viên hay đã làm việc trong ngành công nghệ thông tin về mảng lập trình web thì những gì mình sắp giới thiệu dưới đây đều là những kỹ năng thiết thực và quan trọng để bạn trở thành 1 lập trình viên frontend tốt hơn cũng như giúp bạn tìm 1 công việc phù hợp ưng ý được dễ dàng khi hầu hết các công ty đều yêu cầu các kĩ năng này khi tuyển dụng. Lập trình viên frontend là gì? Trong các bài viết trước, mình đã giới thiệu đến các bạn 7 hướng đi của 1 lập trình viên web cũng như lộ trình trong sự nghiệp lập trình viên web cho những ai còn đang phân vân chưa biết mình nên trở thành 1 frontend , backend hay devops thì hôm nay mình chỉ tập trung nói về lập trình viên frontend. Chúng ta bắt đầu thôi: Để bạn có cái nhìn rõ hơn mình xin giới thiệu sơ về mảng lập trình web 1 chút, cơ bản gồm 2 phần chính, với yêu cầu những kỹ năng, kiến thức công nghệ khác nhau: frontend sẽ là thứ người dùng tương tác trực tiếp (user interface – giao diện người dùng) và backend là những gì đằng sau nó và làm cho 1 website hoạt động. Tóm lại, frontend sẽ chăm sóc ‘client-side’, còn backend chính là ‘server-side’. Nếu ví von 1 trang web như cơ thể người thì HTML sẽ là khung xương, phần cơ bản nhất. Để cơ thể vận động được cần có cơ và gân, hay để 1 dynamic web chạy cần có JavaScript và các ngôn ngữ lập trình khác. Cuối cùng để xem cơ thể đó xấu hay đẹp cần da thịt đắp lên hay...

Liệu HTTP là gì? Có lẽ điều quen thuộc nhất khi chúng ta bắt gặp khi sử dụng trình duyệt để truy cập Internet chính là HTTP. Chắc các bạn cũng đã biết khi thấy 1 địa chỉ web đều bắt đầu với http:// hay https://. Hôm nay qua bài viết này, Station D sẽ giới thiệu cho các bạn về những điều cơ bản nhất của HTTP nha. HTTP là gì? HTTP là từ viết tắt của Hyper Text Transfer Protocol nghĩa là Giao thức Truyền tải Siêu Văn Bản được sử dụng trong www . HTTP là 1 giao thức cho phép tìm nạp tài nguyên, chẳng hạn như HTML doc. Nó là nền tảng của bất kỳ sự trao đổi dữ liệu nào trên Web và cũng là giao thức giữa client (thường là các trình duyệt hay bất kỳ loại thiết bị, chương trình nào) và server (thường là các máy tính trên đám mây). 1 doc hoàn chỉnh được tái tạo từ các doc con khác nhau được fetch – tìm nạp, chẳng hạn như văn bản, mô tả layout, hình ảnh, video, script v..v.. HTTP status code là gì? Danh sách đầy đủ HTTP status code Http Methods: thất tinh bắc đẩu trận Ảnh mô tả việc fetching 1 trang web. Nguồn: Mozilla Được thiết kế lần đầu từ những năm 90, HTTP là 1 giao thức có thể mở rộng vốn đã phát triển dần theo thời gian. 1 giao thức lớp ứng dụng được gửi thông qua nền tảng TCP/IP , hay qua 1 kết nối TCP được mã hóa TLS. Mặc dù về mặt lý thuyết, bất kỳ giao thức truyền tải đáng tin cậy nào cũng có thể được sử dụng. Nhờ vào khả năng mở rộng của nó, HTTP...

Sau cả ngàn project thì chắc chắn anh em cũng muốn có một cái gì đó nhìn cho đẹp đẹp, cho mát mắt. Level sử dụng phức tạp đi kèm với load animation đẹp thì đỉnh không còn gì bằng! Giới thiệu cho anh em source 9 bộ CSS animation “sịn sò” để apply vào product của mình. Một số animation bên dưới interactive được, chỉ cần rà chuột và click vào nhé. 1. Loading indicator “sịn” (chỉ trên CSS)   See the Pen Oddly satisfying loading indicator (CSS only) by eight ( @eight ) on CodePen . 2. CSS animation ảo See the Pen Oddly satisfying CSS Only animation by eight ( @eight ) on CodePen . 3. “ Mờ mờ nhân ảnh”… 4. Loading style Lửa trại  See the Pen campfire by ByteKnight ( @byteknight ) on CodePen . 5. Style pastel dots See the Pen growing pastel dots by Rachel Smith ( @rachsmith ) on CodePen . 6. Lines cầu vồng See the Pen Rainbow lines by ByteKnight ( @byteknight ) on CodePen . 7. Style thôi miên See the Pen Mesmerizing by xposedbones ( @xposedbones ) on CodePen . 8. Animation Test See the Pen Animation Test – Creeper Lines animated by xposedbones ( @xposedbones ) on CodePen . 9. Style “Musical background” theo rà chuột   See the Pen Musical background on mousemove by ByteKnight ( @byteknight ) on CodePen . Hi vọng rằng tất cả các animation “độc” trên sẽ tiếp thêm động lực cho anh em là project. Sáng tạo là một phần rất quan trong trong công việc của chúng ta và nó cần một ít thời gian mỗi ngày để phát triển thêm nữa!💆 Responsive HTML bằng một dòng CSS Một số đơn vị CSS có thể bạn...