• Tổng quan về CNTT cho các bạn mới tìm hiểu về lập trình

    TỔNG QUAN VỀ NGÀNH CNTT

    Các bạn mới học bơi hết vào đây nhé, Topic này giải đáp tập trung các câu hỏi các bạn đang thắc mắc.
    Dưới đây là một số câu hỏi mà các bạn hỏi đi hỏi lại hàng trăm lần trong group, các bạn có thể tìm thấy câu tl bên dưới:

    1. CNTT có những ngành gì?

    CNTT có nhiều mảng, ngành, nhưng phổ biến nhất là
    Kỹ thuật phần mềm: Thiết kế phần mềm website hay các ứng dụng mobile, game ... tóm lại là lập trình viên
    An toàn thông tin: setup hệ thống mạng, bảo vệ dữ liệu hệ thống, xử lý sự cố, phân tích tìm lỗ hổng ...
    Thế muốn trở thành hacker thì học gì? Hack là can thiệp chỉnh sửa vào hệ thống, thay đổi cách hoạt động ban đầu của nó tùy mục đích.
    Thế nên muốn thành hacker thì phải giỏi lập trình, kiến thức mạng, phần cứng ... tốt nhất giỏi lập trình đã rồi tính.

    2. Học lập trình ra trường làm gì?

    Học lập trình thì khối thứ để làm, làm web, làm phần mềm, làm app mobile, game ...
    Cao cấp hơn là quản lý dự án (PM), đi khách (BA) ..., đánh thuê (freelancer) hoặc tự làm sản phẩm riêng.
    Yên tâm là Cái gì cũng ra tiền nhé. Học xong không có việc ra tiền thì cứ tìm đến ông Nam, xin được hết :)))

    3. Không biết tiếng anh có học được lập trình không?

    CÓ GÌ MÀ KHÔNG ĐƯỢC! quan trọng là ham tìm hiểu, không biết tiếng anh thì tìm mentor hướng dẫn bằng tiếng việt.
    Tiếng anh cần để mai này ae học cái mới cho dễ, nhiều tài liệu, thế nên biết thì tốt hơn. Chứ tiếng anh không phải rào cản, lý do để ngừng học lập trình.

    4.Lập trình có yêu cầu bằng cấp không, học trường tư liệu có xin được việc

    Cái này ae hỏi cả tỉ lần rồi. Giờ nó dựa vào năng lực để trả lương, ae kiến thức ít làm được ít thì tiền ít, làm tốt thì lương cao thế thôi.
    Không cần bằng cấp, chỉ cần ae giỏi thôi. Trường tư hay công quan trọng đầu ra các ae phải có kiến thức. Nếu có kiến thức mà không có việc thì quá vô lý. Đến gặp ông Nam, Tôi check thực lực biết ngay.

    5. Em mới học lập trình thì có học được không

    Được. Không cần giải thích nhiều. Dựa vào thực tế, Mình đào tạo quá nhiều ae mới học để đi làm ngay rồi, nên khẳng định là được.

    6. Học CNTT cần những gì

    Đam mê, có chút logic, cố gắng, Laptop, lộ trình chuẩn, cần có người hướng dẫn.

    7. Cần những kỹ năng gì để đi làm.

    THÁI ĐỘ, TRÁCH NHIỆM HẾT MÌNH VÌ CÔNG VIỆC, kiến thức, kỹ năng google, kỹ năng làm việc nhóm...

    8. Máy tính nào đủ để học CNTT

    Thiết bị tùy vào mục đích học tập. Cá nhân mình nghĩ mua để học tập đủ dùng thôi, sinh viên mới nhập học nên mua máy cũ tiết kiệm tiền, mai này biết mình thích gì thì đầu tư mua sau
    Mua cũ thì mua được máy cấu hình tốt vs chi phí rẻ hơn.
    Học web: thì mua máy ram 8GB, chip i5 là vừa tầm dùng ổn - Giá tầm 9tr quay đầu
    Học App Mobile: nếu thêm được ram thì sẽ ổn định 16GB, chip i5 - giá tầm 11tr quay đầu
    Một số khái niệm :
    Ram: bộ nhớ lưu trữ trên máy tính khi chạy, tắt đi thì mất, cái gì lưu trên ram thì đọc rất nhanh. Phần mềm chạy được đều cần Ram, nên để chạy nhiều phần mềm cùng lúc ổn định cần Ram nhiều
    Chip: tốc độ xử lý, chip cao thì xử lý càng nhanh và ngốn điện, có nhiều dòng chip tiết kiện pin, tạm thời i5 là đủ dùng
    Ổ cứng: HDD loại thường, SSD: ghi đọc nhanh, đắt hơn. VD: cứ cái gì tới dùng ổ cứng thì SSD sẽ vượt trội hơn hẳn
    Chẳng hạn khởi động máy siêu nhanh, mở chương trình nhanh, copy dữ liệu nhanh ...

    ĐỊNH HƯỚNG LẬP TRÌNH

    9. Học lập trình bắt đầu từ đâu, như nào

    Thường: kiến thức trên trường học nền tảng kiến thức máy tính cả các môn đại cương bắt buộc tốn ít nhất 3 năm + 4 tháng đồ án + 6 tháng thực tập => nhanh nhất 4 năm đi làm
    Với mình thì mình khuyên mọi người đi làm sớm lấy kinh nghiệm, vừa học vừa làm. Để làm được vậy thì nên như sau:
    Học đồng thời kiến thức bên ngoài, 2 tháng nền tảng + 3 tháng tập trung làm 1 ngôn ngữ + 1 tháng project => 6 tháng đủ đi làm ngay.
    Tất nhiên là để đạt được tốc độ trên thì cần có người hướng dẫn, chứ một mình không thể đạt được tốc độ trên được.
    Bỏ tiền đi học thêm là xứng đáng, đầu tư học cho bản thân kiến thức theo mình cả đời, từ kiến thức mới kiếm tiền sớm. Suy nghĩ xa một chút, chứ đừng lãng phí khoảng thời gian sinh viên an nhàn.
    Các bạn sẵn sàng bỏ gần trăm triệu + 4 năm đại học trong khi không biết mình có việc hay không, thay vì đó bỏ khoảng 15tr vào một trung tâm họ đào tạo kiến thức trong 6 tháng có thể đi làm ngay lại đắn đo?
    Mình không hướng các bạn không theo trường mà hãy đặt câu hỏi sao mình không học cả 2 bên. Kiến thức học được có thể giúp việc học trên trường dễ hơn, điểm cao hơn...
    Nếu các bạn sẵn sàng dành thời gian khoảng 4-6 tháng xác định học tập nghiêm túc thì đến Nodemy tìm ông Nam. Mình tự tin giúp các bạn có kiến thức đi làm được.

    10. Nên học ngôn ngữ nào đầu tiên, học ra sao

    Tùy quan điểm mỗi người, thường ae hay bảo học C. Nhưng chuẩn thì các bạn nên học Java. Mà thực tế học cái gì quen cái đấy, nên tập trung một ngôn ngữ thôi, học được concept cách tạo ra 1 sản phẩm mới quan trọng.
    Có concept thì mai sau học ngôn ngữ khác cũng thế. Mà để đi ra sản phẩm nhanh nhất thì ae nên theo Javascript(JS)
    JS học 1 có thể làm web, server, mobile ... đủ cả gọi là fullstack
    Chốt ae nào theo mình thì học JS.

    11. Tài liệu học và nên học ở đâu.

    Giờ 4.0 thông tin không thiếu trên internet, google, youtube có hết, có các course trên Udemy ...
    Mình có 1 channel về JS mọi người có thể follow, Nodemy: https://www.youtube.com/channel/UCMfiIOjAzHZ9vyoqNdcPvNA
    Đó là một phần thôi, như mình nói việc các bạn học kiến thức nhưng kinh nghiệm vận dụng khi đi làm lại là khác.
    Mình rất vui nếu các bạn có thể tự học được vì tự học là cần thiết với lập trình viên. Nhưng đổi lại có kiến thức sâu, hệ thống chuẩn để đi làm nhanh nhất thì mình khuyên chân thành nên xác định đầu tư đi học.
    Các bạn bỏ công sức, thời gian, tiền bạc thì nhất định sẽ được những thứ khác biệt so với các bạn khác. Yên tâm là vậy.
    Bạn nào có ở Hà Nội có thể qua trực tiếp Nodemy gặp mình trao đổi, mình cho các bạn trải nghiệm, 1 tuần các bạn sẽ thấy khác biệt hoàn toàn.

    Nếu mọi người đọc đến đây vẫn còn thắc mắc thì các bạn để lại comment bên dưới, mình sẽ giải đáp. Ngoài ra mình có tạo 1 group trao đổi trên slack cho bạn nào thực sự quan tâm, mình sẽ tư vấn cho các bạn trên đó.
    Để tránh loãng group mọi câu hỏi tương tự hãy comment tập trung trong POST này, sẽ có người giải đáp cho bạn.

    Link Slack trao đổi: https://join.slack.com/t/newworkspace-bgc9133/shared_invite/zt-i0wip3yr-rzcq_TCLe64t256xPBRpzA

    posted in Chia sẻ
  • Tổng hợp kiến thức JavaScript cơ bản cho người mới bắt đầu

    1. JavaScript thật sự là gì?

    JavaScript (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính năng của một ngôn ngữ động, được tích hợp và nhúng trong HTML giúp website sống động hơn. Cụ thể hơn, JavaScript có thể tính toán, thao tác, và phê duyệt dữ liệu cũng như cập nhật thay đổi cả HTML và CSS của trang web.

    Ngoài việc ứng dụng trong lập trình các website thì JavaScript còn có thể sử dụng để xây dựng ứng dụng cho website máy chủ và ứng dụng di động, app và thậm chí cả game nữa nhé 😉

    Các bạn mới bắt đầu có thể luyện tập JavaScript ở các trang như w3schools, codecademy, JSFiddle, JS Bin

    2. Các kiến thức cơ bản của JavaScript

    2.1. Alert, console.log, comment

    - Hàm alert()
    Hàm alert() trong javascript có nhiệm vụ hiển thị ra màn hình một hộp thoại kèm theo nội dung do chúng ta setup.

    Cú pháp:
    094aa19e-e869-4009-af21-d92c910f65d8-image.png

    Ví dụ: Thông báo ra màn hình chữ: 'hello'
    b1337e0c-db06-4d96-814c-ff65bd6c826e-image.png

    Màn hình sẽ hiển thị ra như sau:
    e969fe1f-3251-4512-8736-fce479555347-image.png

    - Hàm console.log()
    Trong JavaScript, hàm console.log() thường được sử dụng để debug, nó có nhiệm vụ show ra giá trị của tất cả các loại dữ liệu như number, integer, array, object, chính vì vậy khi muốn biết trong một biến đó có giá trị gì thì ta sẽ sử dụng hàm console.log().

    Cú pháp:
    1d0c1fed-b4f1-4795-9a99-21ea679c41ec-image.png

    Ví dụ:
    e9bbb81b-708a-439b-bbf1-2e062ae1ef15-image.png

    - Comment
    Có 2 kiểu comment trong JavaScript* như sau:
    a28d6604-191b-46cc-9711-0b98e238ea60-image.png

    2.2. Variable

    Biến cũng như một thùng chứa dùng để lưu trữ một giá trị dữ liệu

    7 kiểu biến cơ bản sau đây:

    • String:
      0d99b4a7-4a24-481b-80cf-4a1c8111168a-image.png

    • Number:
      d6e93d1f-edad-4048-a9f8-5b5f18198844-image.png

    • Boolean:
      Đối tượng Boolean trong JavaScript là một đối tượng đại diện cho giá trị trong hai trạng thái: true hoặc false
      1cff956d-0966-455a-8a63-aa334f54c879-image.png

    • Undefined:
      Undefined có nghĩa là không xác định. Khi bạn khai báo một biến mà không gán giá trị cho nó, giá trị của biến đó sẽ là undefined
      a8967b1e-d0c6-43a0-97e5-cd101437322f-image.png

    • Null:
      Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể sử dụng để gán cho một biến như là một đại diện không có giá trị.
      81e8236b-0141-46c0-a34d-059d139c2792-image.png

    • Function:
      831f2f26-5e85-43c6-b62f-3aa558ebe929-image.png

    • Object:
      Về mặt định nghĩa, một đối tượng (một object) là một danh sách các item, mỗi item là một cặp name-value, trong đó value có thể là: các kiểu dữ liệu cơ bản, function, hay cũng có thể là một object khác (kiểu dữ liệu phức hợp).
      a605eb4d-4160-4cb9-90ee-7e72fdb89876-image.png

      Array cũng là một object

      488e7acb-dd45-41a7-8389-fe3cd57b01a2-image.png

    2.3. Function

    • Function (hàm, chức năng), gọi chung là subprogram (chương trình con) có thể được gọi ở bên ngoài hoặc bên trong chính nó.

      59ec8653-4e13-4cf3-b3aa-55eec4eb5b33-image.png

      Ví dụ:
      b66b5f64-0673-4ef9-a018-f0c200d4e774-image.png

    • Function không có tham số và không trả về bất cứ giá trị gì.
      d2c72fc7-4a0d-4dd7-87b0-eda188d2acd3-image.png

    • Function vô danh (Anonymous functions)

      Anonymous functions hay còn gọi là hàm ẩn danh, là một hàm được sinh ra đúng vào thời điểm chạy của chương trình. Thông thường khi bạn khai báo một hàm thì trình biên dịch sẽ lưu lại trong bộ nhớ nên bạn có thể gọi ở trên hay dưới vị trí khai báo hàm đều được, nhưng với anonymous functions thì nó sẽ được sinh ra khi trình biên dịch xử lý tới vị trí của nó.
      f8382693-2d46-4cc8-8cb2-cc34de819db4-image.png

    • Function có một tham số và trả về một giá trị cụ thể

      249624f2-c404-4658-a2f5-9f3440a85106-image.png

    • Function self-invoking
      Đây là function có thể gọi chính nó

      ea2f701e-d817-4235-9507-540d1530ccb4-image.png

    2.4. For, if, while

    - if
    Cú pháp:
    24caa0e1-6d63-4bdb-9216-4d6223bffc68-image.png

    Ví dụ: so sánh nếu 9 > 7 thì sẽ in ra True còn không thì sẽ in ra False
    1db807c1-057a-4d21-9ec6-f092c00ca694-image.png

    - for
    Vòng lặp for trong javascript thường dùng để lặp một mảng hoặc một khoảng (min max) nào đó nhằm mục đích xử lý giải quyết vấn đề cho bài toán
    Ví dụ:
    a5941f35-268a-46b6-aa16-7f3e1de521a6-image.png
    Kết quả:
    3311906b-4338-47e8-8166-c6868c6f733f-image.png

    - while
    Vòng lặp whiledo while dùng để lặp với trường hợp tác không biết chính xác số lần lặp là bao nhiêu và trường hợp điều kiện dừng vòng lặp phức tạp, điều này hoàn toàn khác với vòng lặp for. Khi sử dụng vòng lặp while rất dễ bị lặp vô hạn nếu ban không xử lý đúng logic, vì thế hãy cẩn thận khi sử dụng nhé.

    Cú pháp:
    ca9b9023-23dd-4070-858e-ccdde59711c6-image.png

    Ví dụ: Dùng vòng lặp while lặp từ 1 tới 10
    1357b097-4cc3-4ca3-af7e-7f357cf91f8b-image.png

    2.5. Switch case

    Lênh switch case có công dụng giống như lệnh if else đó là đều dùng để rẻ nhánh chương trình, ứng với mỗi nhánh sẽ có một điều kiện cụ thể và điều kiện đó phải sử dụng toán tử so sánh bằng, còn đối với lệnh if else thì bạn có thể truyền vào một mệnh đề bất kì và sử dụng nhiều toán tử khác nhau.

    Cú pháp:
    49362a26-0d19-4b61-8b61-276d1db51315-image.png

    2.6. Array

    Đối tượng Array trong javascript là một đối tượng toàn cục được dùng để xây dựng nên các mảng, là những đối tượng cấp cao và giống một dạng danh sách

    - Tạo một Mảng
    f4bd50a1-402f-42be-96f7-3ac48bf8c3ea-image.png

    - Truy cập đến một phần tử của Mảng
    5301f23f-e2cb-4452-8e5e-a3ef7203c513-image.png

    - Thêm phần tử vào cuối Mảng
    f780ce8d-60e9-4edb-ad11-31989a84a396-image.png

    - Xóa phần tử ở vị trí cuối của Mảng
    96245ad0-a34b-41eb-b458-0353f2750616-image.png

    2.6. Object

    - Khai báo một Object
    9c9b3146-cba5-4d8d-87a0-b99053681be6-image.png

    - Gọi thuộc tính của một Object
    564f6043-a0e2-4074-88df-85a89ad84c5e-image.png

    3. Một số hàm cơ bản của JavaScript

    3.1. Math

    Đối tượng Math cung cấp cho bạn các thuộc tính và phương thức cho các hằng số và hàm toán học. Không giống các đối tượng Global khác, Math không là một constructor. Tất cả thuộc tính và phương thức của Math là tĩnh (Static) và có thể được gọi bởi sử dụng Math như là một đối tượng mà không phải tạo nó.

    Ví dụ: tham chiếu hằng số pi
    5e35384f-27f7-4c74-97af-5352ca41cc8f-image.png

    Các thuộc tính của Math:
    1266287e-e828-4653-8760-ca701f840774-image.png

    Các phương thức của Math:
    cdc9d2f6-a735-4ec9-a5e8-70661680e498-image.png

    3.2. Array.slice()

    Phương thức slice() trả về một bản sao tham chiếu (shalow copy) một phần của một mảng dưới dạng một mảng mới nhận các giá trị có chỉ số từ begin đến end (không bao gồm end). Mảng ban đầu không thay đổi

    34542309-2916-4720-983e-f8672fe654b4-image.png

    3.3. Array.filter()

    Phương thức filter() dùng để tạo ra một mảng mới với tất cả các phần tử thỏa mãn điều kiện của một hàm test

    f4661ee1-a7e0-4934-9fcd-2a0979c0890a-image.png

    Và trong JavaScript còn rất rất nhiều các hàm hay ho nữa đấy nhé 😉

    4. Tổng kết

    Bài viết cũng đã dài rồi, vậy chúng ta đã biết thêm kha khá kiến thức về javascript rồi đấy nhé 😉
    Nếu có phản hồi gì, hãy đóng góp cho chúng mình ở phía bên dưới để chúng mình bổ sung để hoàn thiện hơn nha.
    Còn bây giờ thì, xin chào và hẹn gặp lại ở các bài viết tiếp theo.🖐

    posted in Tutorials
  • RE: Hiểu về Scope trong Javascript

    Bài viết rất hữu ích. Mình có bổ xung thêm,
    Lí do và chúng ta nên sử dụng let thay cho var trong vòng for vì như vậy sẽ kiểm soát được biến i khi vòng for kết thúc, đảm bảo không ảnh hưởng với những đoạn code bên ngoài về sau (nếu như code bên ngoài cũng đang sử dụng một biến tên i)

    Với var

    for(var i = 0; i < 10; i++){
    
    }
    console.log(i) // kết quả = 10
    
    

    Với let

    for(let i = 0; i < 10; i++){
    
    }
    console.log(i) // i không tồn tại, i is not defined
    
    
    posted in Tutorials
  • RE: Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

    Tuyệt nhỉ,
    Cái này làm animation trong game thì tuyệt rồi.

    posted in Case Study Thực Tế
  • Hướng dẫn tạo hiệu ứng ảnh Slide Before After với Javascript

    Slide image Before After:

    Hiệu ứng Slide Before After rất hữu ích nếu như bạn muốn so sánh 2 hình ảnh với nhau tạo trải nghiệm thích thú khi sử dụng website. Chúng ta có thể dùng Slide Before After để làm nổi bật sự khác biệt giữa ảnh trước và ảnh sau một cách rõ rệt.

    Slide Before After.gif

    Rất thú vị phải không nào 😃 . Nào cùng mình bắt đầu thiết kế hiệu ứng Slide Before After nhé.

    Các bước thực hiện

    Bước 1: Tạo HTML
    Tạo file index.html

    Code hoàn chỉnh như sau

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    
    

    Lưu ý: Các bạn nhớ bổ sung file style.css và script.js vào cùng thư mục file HTML nhé

    Bước 2: Trang trí giao diện với CSS
    Tạo file với với tên style.css

    Đầu tiên chúng ta sẽ set kích thước cho khung ảnh

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    

    Ở trên nếu bạn muốn ảnh to hoặc nhỏ chỉ cần sửa max-width: 600px bằng kích thước bạn muốn là được.

    Cấu hình CSS cho ảnh trước và sau:

    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    

    Chú ý: các bạn có thể thay hình ảnh Before After tại background-image bằng đường dẫn ảnh của mình.

    Tiếp theo là handle chính là hình tròn điều khiển ở giữa 2 tấm ảnh:

    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    

    Cuối cùng là input, giúp chúng ta có thể di chuyển handle tròn bên trên theo chiều ngang một cách mượt mà:

    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    Bước 3: Thiết lập Javascipt thay đổi hiệu ứng
    Tạo file script.js

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Với hàm moveDivisor, mỗi khi chung ta di chuyển handle tròn bên trên thì tỉ lệ hiển thị ảnh của Before và After sẽ thay đổi tạo lên hiệu ứng thay đổi hình ảnh

    Tổng kết:

    File HTML:

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    

    File CSS:

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    
    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    
    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    File JS:

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Chúc mọi người thực hiện thành công hiệu ứng Slide Before After nhé 😃
    Link download code: https://github.com/namndwebdev/frontend-casestudy/tree/master/Slide-Before-After

    Video chi tiết

    Slide Before After

    Nguồn : Codepen.io

    posted in Case Study Thực Tế
  • RE: [Hỏi Ngu] Mình muốn làm siêu nhân Node.JS? Mình phải làm như thế nào?

    @NHI-Nguyen-Thi-Yen Spam? Bạn nên tạo một bài viết mới để giới thiệu về blog của mình thì tốt hơn nhé. Trường hợp, bài viết không có giá trị hoặc spam, mình sẽ xóa và block tài khoản.

    Cảm ơn bạn đã tham giá diễn đàn!

    posted in Node.JS
  • RE: Nhập môn lập trình căn bản về Javascript từ căn bản đến nâng cao (Phần II)

    @Dương-Nguyễn Đây là link tham chiếu nhanh cách sử dụng Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

    posted in Tutorials
  • RE: Nhập môn lập trình căn bản về Javascript từ căn bản đến nâng cao (Phần II)

    @Dương-Nguyễn Đây là phần 2 chứ em nhỉ? 😃 có thêm ví dụ nữa thì tốt quá.

    Mà em học thêm cú pháp Markdown để viết bài trông đẹp hơn nhé.
    Ví dụ 1 đoạn code như này:

    /**
     * Autodiscover mode
     */
    require('@kites/core')
      .engine({
        loadConfig: true
      })
      .init()
      .then(app => {
        app.logger.info('Kites application started!');
      })
      .catch(err => {
        console.error('Kites start app error: ', err);
      });
    

    Trông sẽ đẹp hơn rất nhiều!

    posted in Tutorials
  • RE: Làm sao deploy Node.js trên Windows posted in Hỏi Đáp
  • RE: Làm sao deploy Node.js trên Windows

    @Nguyễn-Loan Nên dùng nginx cho đơn giản nhé em.

    posted in Hỏi Đáp