Tìm hiểu phương thức slice của mảng trong JavaScript

Bài viết được sự cho phép của tác giả Lưu Bình An

Phương thức **slice** (copy cho em một miếng) có thể sử dụng trên 2 kiểu String và Array

Cách sử dụng cơ bản thì ta có thể truyền vào index bắt đầu, và index kết thúc (kết quả tả về không bao gồm index kết thúc)

Index kết thúc cũng có thể bỏ qua, lúc này nó sẽ hiểu là lấy hết luôn các phần tử còn lại.

Và nếu mà chúng ta truyền giá trị index kết thúc nó lớn hơn chiều dài của mảng, thì nó cũng không lỗi, mà trả về toàn bộ như không truyền vào

Còn vui vui, bạn không truyền vào index bắt đầu luôn, thì nó cũng không lỗi nốt, mà sẽ sao y toàn bộ các phần tử vào mảng mới

Xem thêm các việc làm JavaScript hấp dẫn tại TopDev

Với index bắt đầu nhận vào là undefined nó sẽ hiểu là 0 (em cũng lại javascript)

Index bắt đầu lớn hơn độ dài của array? Nó sẽ cho ta kết qua là một mảng rỗng

Chưa đủ thú vị? Vậy truyền vào số âm thì sao?

Lúc này nó sẽ được tính theo cơ chế index ngược, các giá trị âm sẽ được tính theo index: thằng cuối cùng là -1, áp cuối là -2, và cứ tiếp tục đi ngược lên.

Sự khác nhau của bộ 3 Slice, Splice và Split trong Javascript

12 thủ thuật hữu ích trong JavaScript

Chúng ta có thể dùng nó để lấy các phần tử từ phải qua trái (2 phần tử cuối, 3 phần tử cuối, ví dụ vậy)

Đối với String thì cũng cách dùng cũng tương tự như Array (mai quá!)

Mình nghĩ slice cũng là một trong những phương thức chúng rất hay sử dụng, như trong reducer của redux, dùng nó để sao y một state nào đó. Nên việc nắm vững, thực hành với nó nhiều là điều rất chi cần thiết.

https://dev.to/sandeshgit/understanding-the-slice-method-in-javascript-the-basics-negative-indexing-and-the-concept-of-shallow-copy-3m3i

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

Xem thêm tin tuyển dụng lập trình viên mới nhất

Apple từ chối phát triển 16 WebAPI cho Safari và thuyết âm mưu

Bài viết được sự cho phép của tác giả Lương Văn Phúc

Lời tựa

Chỉ mới tuần trước thôi, cộng đồng developer trên thế giới đã “dậy sóng” khi Apple thông báo sẽ KHÔNG hỗ trợ 16 Web API cho trình duyệt Safari của mình. Bạn thử search google từ khóa “Apple declined to implement 16 Web APIs” sẽ thấy các trang lớn nhỏ đều đăng tin này. Vậy 16 Web API này cụ thể là gì? Việc Apple từ chối chúng có ảnh hưởng gì đến miếng cơm manh áo của lập trình viên tụi mình không? Hãy cùng mình xem xét và bạn sẽ tự có câu trả lời cho bản thân.

Trong bài viết này, mình sẽ cố gắng giải thích rõ hơn về ngữ cảnh của thị trường, sau đó mình sẽ giúp các bạn hiểu (cơ bản) về từng API và ứng dụng của nó như thế nào. Đương nhiên những giải thích của mình đến từ việc tự tìm hiểu cá nhân, nên nếu có sai sót gì thì các bạn góp ý trong phần Comment nhé.

Khoảng cách công nghệ giữa App và Web

Apple từ chối phát triển 16 WebAPI cho Safari và thuyết âm mưu

Bạn hãy tự hỏi mình xem vì sao chúng ta tải một app từ Appstore về dùng, thay vì sử dụng các trang web với những chức năng tương tự? Có rất nhiều lý do không thể kể hết, mình xin liệt kê một vài lý do ngẫu nhiên theo trí nhớ của mình (mình mặc định các bạn hiểu là native app nhé, chứ không phải webapp):

App chạy nhanh hơn web rất nhiều?
App có thể chạy offline, web thì không?
App có các tính năng như Geolocation, Bluetooth, Push notification, Device Motion, Sensors… web thì không?

KHOAN, hình như có gì đó KHÔNG đúng! Nếu bạn đang cảm giác như vậy, thì chứng tỏ bạn cũng rất hay cập nhật tin tức công nghệ. Đúng vậy, web đã có những tính năng trên, và còn nhiều hơn thế nữa.

Web đang phát triển từng ngày, hàng loạt các API được phát triển trong cuộc đua với app. Những gì app có thể làm được, thì web cũng đang dần rút ngắn khoảng cách với app. Và trong một tương lai không xa, web sẽ thay thế app? Các bạn có tin vào điều đó không?

Các bạn có thể tham khảo trang web What web can do today để xem “Ngày nay web có thể làm được gì”.

“Thuyết âm mưu” về Apple

Bạn nghĩ sao nếu thật sự tương lai web sẽ thay thế app, và người dùng sẽ không còn tải app từ các Appstore nữa? Apple sẽ ra sao nếu app không còn đất dụng võ? Các native app developer sẽ thay đổi thế nào để thích ứng?

Và vì thế, có tin đồn rằng Apple đang muốn kìm hãm sự phát triển của web để hạn chế sự đe dọa đến đế chế của mình. Và tin đồn đó càng được tin tưởng khi Apple vừa từ chối không hỗ trợ 16 Web API giúp tăng sức mạnh của web và rút ngắn khoảng cách với app.

Lý do Apple đưa ra là gì?

Tin đồn ở trên vẫn chỉ là tin đồn thôi nhé. Lý do Apple đưa ra là để tránh “user fingerprinting”. Nói đơn giản là Apple không muốn tăng khả năng user bị lấy cắp thông tin về hành vi sử dụng web (bởi các công ty quảng cáo trực tuyến hay công ty thu thập và phân tích thông tin người dùng) để phục vụ cho nhiều mục đích khác nhau như quảng cáo online…

Tất nhiên lý do Apple đưa ra rất hợp tình hợp lý với triết lý phát triển sản phẩm lâu đời của mình. Nên tin đồn trên là mình bổ sung để các bạn đọc chơi cho biết thôi nhé.

8 highlight từ sự kiện Apple WWDC 2017 mà bạn cần phải biết

16 Web API bị Apple từ chối hỗ trợ

Mình xin dài dòng thêm một câu nữa thôi nhé 😅. Tuy Apple từ chối hỗ trợ (cho Safari) nhưng hầu hết đều được hỗ trợ bởi Chrome và Firefox, vì thế chúng ta vẫn có thể lạc quan về sự phát triển của web trong tương lai.

1. Web bluetooth

API này cho phép trang web kết nối đến các thiết bị xung quanh thông qua bluetooth. Chỉ với API này, ứng dụng của nó là vô cùng nhiều. Bạn hãy tưởng tượng căn nhà của bạn sử dụng bóng đèn được tắt mở thông qua bluetooth. Thông thường bạn sẽ phải tải app để điều khiển tắt mở, nhưng giờ web đã có thể làm được rồi nhé.

Ứng dụng: https://googlechrome.github.io/samples/web-bluetooth
Can I Use: https://caniuse.com/#feat=web-bluetooth

Demo: các bạn thử bật bluetooth trên máy của mình và chạy dòng code đơn giản này với Chrome nhé:


navigator.bluetooth.getAvailability()
  .then(isBluetoothAvailable => {
    console.log(`Bluetooth is ${isBluetoothAvailable ? 'available' : 'unavailable'}`);
  });

2. Web MIDI API

MIDI là viết tắt của Musical Instrument Digital Interface. Nó là API để kết nối và thao tác đến các thiết bị âm nhạc điện tử.

Mình thuộc nhóm mù âm nhạc nên cũng không hứng thú với Web API này lắm. Các bạn nếu có hứng thú thì có thể tìm hiểu thêm.

Tham khảo: https://www.smashingmagazine.com/2018/03/web-midi-api/
Can I Use: https://caniuse.com/#feat=midi

3. Magnetometer API

API này cho phép trang web kết nối với các bộ cảm biến đo từ trường (từ kế) xung quanh. Đây là loại cảm biến ít được biết đến, nó giúp trang web có khả năng đọc được cường độ từ trường bằng cách sử dụng cảm biến của thiết bị. Ứng dụng của nó thường dành cho các thiết bị ngoại vi như gamepad (điều khiển hành động của người chơi), hoặc cũng có thể biến trang web của bạn thành một chiếc la bàn. Các bạn có thể tham khảo demo ứng dụng WebVR (Web Virtual Reality) ở link bên dưới. Mình không thực sự rành về lĩnh vực này, nếu các bạn muốn tìm hiểu sâu hơn về nó thì có thể google thêm nhé.

Demo: https://intel.github.io/generic-sensor-demos/
Can I Use: https://caniuse.com/#feat=mdn-api_magnetometer

4. Web NFC API

API này cho phép trang web tương tác với các thẻ thông minh NFC (gọi là Tag) thông qua thiết bị đọc NFC. Theo thế giới di động, NFC (Near-Field Communications) là công nghệ kết nối không dây tầm ngắn trong khoảng cách 4 cm. Công nghệ này sử dụng cảm ứng từ trường để thực hiện kết nối giữa các thiết bị (smartphone, tablet, loa, tai nghe,…) khi có sự tiếp xúc trực tiếp (chạm).

API vẫn đang được phát triển và chưa có trên các browser hiện tại. Tuy nhiên bạn có thể thử với Chrome khi bật cờ enable-experimental-web-platform-features lên.

Can I Use: https://caniuse.com/#feat=webnfc

5. Device Memory API

Cho phép trang web lấy được thông tin về bộ nhớ (RAM) của thiết bị (tình bằng gigabyte). API này khá đơn giản, bạn hãy thử chạy đoạn script này với Chrome nhé:

const memory = navigator.deviceMemory;
console.log (`This device has at least ${memory}GiB of RAM.`);

Can I Use: https://caniuse.com/#feat=mdn-api_navigator_devicememory

6. Network Information API

API này cung cấp thông tin về kết nối mạng của thiết bị, và cho phép trang web biết khi nào loại kết nối (connection type) thay đổi. Bạn hãy thử chạy đoạn script này với Chrome nhé:

console.log(navigator.connection);

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
Can I Use: https://caniuse.com/#feat=mdn-api_networkinformation

7. Battery Status API

API này cung cấp thông tin về pin của thiết bị, ví dụ như pin còn bao nhiêu %, có đang cắm sạc không… Bạn hãy chạy thử đoạn script này với Chrome nhé:

navigator.getBattery().then(function(battery) {
  console.log("Your battery level: " + battery.level * 100 + "%");
});

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API
Can I Use: https://caniuse.com/#feat=mdn-api_networkinformation

8. Web Bluetooth Scanning

Cho phép trang web dò (scan) các thiết bị kết nối bluetooth trong phạm vi. Tính năng này vẫn đang được phát triển, nếu bạn muốn thử nghiệm thì có thể bật cờ enable-experimental-web-platform-features lên nhé.

Demo: https://googlechrome.github.io/samples/web-bluetooth/scan.html
Tham khảo: https://www.chromestatus.com/feature/5346724402954240

9. Ambient Light Sensor

Google translate: “Cho phép trang web nhận biết được mức độ ánh sáng hiện tại hoặc độ rọi của ánh sáng xung quanh thiết bị thông qua các cảm biến của thiết bị. Bạn hãy tưởng tượng mình đang lướt web, mức độ độ ánh sáng phòng tự nhiên tụt xuống (ai đó kéo rèm chẳng hạn), thì trang web sẽ tự động chuyển sang các chế độ màu sắc phù hợp với mức độ sáng hiện tại.

Demo (Ambient Map demo): https://intel.github.io/generic-sensor-demos
Can I Use: https://caniuse.com/#feat=mdn-api_ambientlightsensor

10. HDCP Policy Check extension for EME

HDCP là viết tắt của High-bandwidth Digital Content Protection. API này cho phép trang web kiểm tra xem thiết bị có “HDCP policies” hay không, thường được sử dụng trong việc streaming video. HDCP không nằm trong hiểu biết của mình, nên mình lược dịch một vài thông tin từ nguồn trên mạng nhé.

Mục đích của HDCP là để bảo vệ bản quyền các nội dung số khi nó được truyền đến TV nhà bạn, thường là thông qua cổng kết nối HDMI hoặc DVI. Netflix yêu cầu HDCP khi stream nội dung từ thiết bị kết nối với TV của bạn.

Ngày nay, HDCP là một chính sách bắt buộc để stream các nội dung chất lượng cao. Ngày trước các web developer muốn có được quyền HDCP sẽ phải chờ đợi được cấp phép hoặc buộc phải stream với chất lượng thấp. HDCP Policy Check API ra đời để giải quyết vấn đề đó.

Tham khảo: https://developers.google.com/web/updates/2018/08/chrome-69-media-updates#hdcp
Demo: https://googlechrome.github.io/samples/hdcp-detection/

11. Proximity Sensor

Cho phép trang web biết được khoảng cách (và các thông tin khác) giữa thiết bị và một vật ở xa, thông qua cảm biến “proximity sensor”. Một ví dụ để tưởng tượng về ứng dụng của nó với app nhé. Bạn có để ý khi gọi điện thoại (smartphone), bạn kê điện thoại lên gần tai để nghe, và wow (chỉ là bộ cảm biến bắn ra một event thôi), điện thoại tự tắt màn hình để tiết kiệm pin (và giảm nóng thiết bị). Ứng dụng của nó thì nhiều vô số kể, chỉ là bạn có nghĩ ra không thôi.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/Proximity_Events
Can I Use: https://caniuse.com/#feat=proximity

12. WebHID

Cho phép trang web biết được thông tin về các thiết bị HID (Human Interface Device) được kết nối. Các thiết bị này ví dụ như: chuột máy tính, bàn phím, gamepad, touchscreen…

Tham khảo: https://blog.scottlogic.com/2019/04/03/upcoming-webhid-api.html

13. Serial API

Cho phép trang web đọc và ghi dữ liệu từ các thiết như microcontroller, máy in 3D… Mình không quan tâm về phần cứng lắm, tuy nhiên nếu bạn yêu thích về phần cứng, thì bạn sẽ hiểu ứng dụng của nó nhiều thế nào.

Tham khảo 1: https://github.com/svendahlstrand/web-serial-api
Tham khảo 2: https://dev.to/unjavascripter/the-amazing-powers-of-the-web-web-serial-api-3ilc
Demo: https://codelabs.developers.google.com/codelabs/web-serial/#0

14. Web USB

Cho phép trang web giao tiếp với các thiết bị thông qua cổng USB (Universal Serial Bus). Tất nhiên khi nói đến USB, chúng ta không chỉ nói đến các thiết bị lưu trữ mà chúng ta vẫn hay gọi là USB, mà còn các thiết bị khác như chuột, bàn phím và rất nhiều thiết bị khác. Và với những thiết bị “không chuẩn” ấy (non-standardized USB devices), thường chúng ta sẽ phải cài driver để có thể sử dụng. Đó là một trong những vấn đề mà WebUSB API giải quyết.

Bạn hãy chạy thử đoạn script này với Chrome nhé:

navigator.usb.requestDevice({ filters: [] })
.then(device => {
  console.log(device);
});

Tham khảo: https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web
Can I Use: https://caniuse.com/#feat=webusb

15. Geolocation Sensor

Trước đó chúng ta đã Geolocation API rồi, và đây là phiên bản mở rộng “xịn” hơn. Nó được giới thiệu là mang tính nhất quán với các bộ API khác trong “gia đình” Sensor APIs (https://www.w3.org/das/roadmap), tăng khả năng bảo mật, quyền riêng tư và dễ dàng mở rộng.

Tham khảo: https://www.w3.org/TR/geolocation-sensor/

16. Idle Detection

Cho phép chúng ta biết được khi nào thì user ở trạng thái “idle”, hay có thể nói nôm na là không tương tác với thiết bị. Các trường hợp user ở trạng thái idle như: user không tương tác với chuột, bàn phím, màn hình, bật chế độ screensaver, khóa màn hình, hoặc thao tác trên một màn hình khác. Chúng ta có thể xác lập khoảng thời gian để bắn ra sự kiện này.

Tham khảo: https://web.dev/idle-detection/

Kết luận

Như các bạn thấy, các API trên hầu hết được phát triển để Web có thể tương tác với phần cứng và người dùng tốt hơn (với mobile app, windows app hay macos app thì đơn giản). Tuy nhiên tiện dụng quá thì sẽ dễ bị kẻ xấu lợi dụng, và đó là cũng là lý do Apple từ chối phát triển các API trên, ngay cả Chrome và Firefox cũng phải cân nhắc một số API với lý do tương tự.

Bài viết gốc được đăng tải tại grab-cv.com

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

Wireframe là gì? Cách thiết lập Wireframe hiệu quả?

Wireframe là một công cụ quan trọng trong quá trình thiết kế và phát triển sản phẩm. Trong quá trình sáng tạo sản phẩm, nó được xem là “ngôn ngữ” được thể hiện thông qua các bản vẽ thiết kế giúp developer, product manager và designer có thể giao tiếp được với nhau. Cùng TopDev xem Wireframe có những điều thú vị nào cần khám phá.

Wireframe là gì?

Wireframe (khung xương/cấu trúc dây) là một công cụ trực quan để thiết kế web ở cấp độ cấu trúc. Một wireframe thường được sử dụng để bố trí nội dung và chức năng trên một trang. Wireframe còn được sử dụng trong quá trình thiết lập cấu trúc cơ bản của trang web trước khi thiết kế trực quan. Tất nhiên, quá trình ấy cần được tạo lập, bổ sung và hoàn thiện nội dung.

Một cách mô tả khác, có thể hiểu Wireframe là các bố cục trắng đen được phác thảo theo kích thước và vị trí cụ thể tương ứng với từng thành phần trang, tính năng trang, các khu vực chuyển đổi hay mỗi sự điều hướng cho trang web của bạn. Chúng đơn thuần, không có màu sắc, sự chọn lựa về phông chữ, logo hay bất kỳ yếu tố thiết kế nào. Điều wireframe tập trung chính là cấu trúc của trang web.

Yếu tố phân biệt và mục đích sử dụng Wireframe?

Wireframe có khả năng hỗ trợ và phụ ứng với những vấn đề nảy sinh trong quá trình thiết kế giao diện. Một Wireframe là một bố cục của một trang web thể hiện những yếu tố giao diện nào sẽ tồn tại trên các trang chính. Đây là một phần quan trọng của quá trình thiết kế tương tác.

Wireframe không phải là bản phác thảo, bản nháp… Và tất, bản thảo, bản nháp cũng không được gọi là Lo-fi Wireframe, nó chỉ đơn thuần là Sketch.

Khi nhìn vào Sketch (hình bên trái), khó để chúng ta nắm bắt được ý đồ cụ thể UX. Ngược lại, cũng là những nét nguệch ngoạc tưởng chừng khó hình dung, nhưng nếu là dân học thuật về thiết kế bạn sẽ biết rõ về các chức năng, vị trí, vai trò các thành phần.

Xem thêm: UX/UI Design cần kỹ năng nào? Vai trò của designer trong công ty

Nếu chỉ đơn thuần thảo luận và vẽ ra các chức năng thì nó cũng chỉ là Sketch, không phải Wireframe. Khi thực hiện UX dựa trên một quyết định tổng thể chung, thì sự thống nhất đó bước đầu gọi là Wireframe.

Mục đích của Wireframe trước hết là cung cấp sự hiểu biết trực quan đầu tiên về một trang web.

Tiếp đó là thu hút để nhận được sự đồng ý của các bên liên quan và nhóm dự án trước khi giai đoạn sáng tạo được tiến hành. Wireframes cũng có thể được sử dụng để tạo điều hướng, đảm bảo những thuật ngữ và cấu trúc nội dung được sử dụng cho trang web đáp ứng đúng mong đợi của người dùng.

Ưu – nhược điểm của Wireframe

Ưu điểm

Wireframe cung cấp một hình ảnh tổng thể trong thời gian sớm nhất, được sử dụng để xem xét đàm phán với khách hàng. Nhìn nhận từ góc độ thực tế, các wireframe đảm bảo đầy đủ nội dung và chức năng của trang trên cơ sở định vị chính xác dựa trên nhu cầu của người dùng và doanh nghiệp. Đây cũng chính là lợi thế lớn nhất mà cấu trúc wireframe mang lại cho người dùng.

Khi phát triển dự án, chúng có vai trò thiết thực hỗ trợ sử dụng giữa các thành viên của một nhóm, giúp họ làm việc để thống nhất về tầm nhìn và phạm vi hoạt động của dự án.

Nhược điểm

Vì các wireframe không bao gồm bất kỳ thiết kế hoặc yêu cầu kỹ thuật nào, nên không phải lúc nào khách hàng cũng dễ dàng nắm bắt được khái niệm/thuật ngữ này. Nhà thiết kế web cũng sẽ phải dịch các wireframe thành một thiết kế. Ngoài ra, cần có sự phối hợp giữa người thiết kế và copywriter khi làm việc với phần nội dung website cho phù hợp.

Tại sao bạn nên sử dụng Wireframe?

Thứ nhất, khả năng hiển thị và truyền tải trực quan: Mỗi sơ đồ trang web đa phần được tổ chức thực hiện một cách trừu tượng. Trong khi đó, wireframe biến bản chất trừu tượng – phức tạp thành một đối tượng – object cụ thể – đơn giản hơn, dễ nắm bắt.

Thứ hai, sự tiếp cận và phản ánh chính xác các tính năng của một trang web: Trong nhiều trường hợp, khách hàng chưa hiểu rõ về ý tưởng mà bạn truyền tải. Wireframe tiếp cận và mô tả đầy đủ, cung cấp những thông tin rõ ràng về cách vận hành các tính năng và mức độ hữu dụng của chúng thế nào. Từ đó, bạn dễ dàng đưa ra quyết định loại bỏ một tính năng nào đó nếu nó chưa phù hợp với mục tiêu của trang web.

Thứ ba, ưu tiên về khả năng sử dụng: Wireframe đẩy khả năng sử dụng lên hàng đầu cũng như nhìn nhận nó một cách khách quan về: đường dẫn chuyển đổi, đặt tên liên kết, vị trí điều hướng,… Đồng thời, wireframe có thể chỉ ra các lỗ hổng trong kiến trúc trang web. Điều này sẽ giúp bạn kiểm soát được những rủi ro có thể xảy ra và kịp thời có những phương án, giải pháp back-up một cách hiệu quả hơn.

Cuối cùng, tối ưu hóa thời gian cho quá trình: Wireframes đảm bảo rằng việc kết hợp các khía cạnh đa chiều về sự sáng tạo, thương hiệu của trang web trong một bước. Điều này cho phép khách hàng cung cấp phản hồi sớm hơn trong quy trình. Hơn thế nữa, Wireframe giúp người dùng tính toán nhiều hơn, khiến mọi thứ trở nên rõ ràng, cụ thể nhất.

Wireframe và những thuật ngữ có liên quan

Mỗi thuật ngữ khi được sinh ra để mô tả cho một hoạt động khoa học chuyên ngành nào đó. Khi đặt chung một phạm trù, chúng ta sẽ nhận ra mối liên hệ giữa nó và các thuật ngữ liên quan. Cả 3 thuật ngữ Wireframe, Mockups và Prototype đều có mục đích, vai trò khác nhau đối với quá trình thiết kế.

Xem thêm: Javascript Prototype là gì?

Wireframes là các minh họa đơn giản về cấu trúc và các thành phần của một trang web. Đó là các yếu tố đồ họa như đường thẳng, hình hộp với các gam màu đen, trắng ,… Wireframe cung cấp những mô tả, hướng dẫn cụ thể giúp bạn định hình chính xác ngay từ ban đầu.

Mockups là cấp độ tiếp theo từ Wireframe. Nó thường tập trung vào các yếu tố thiết kế trực quan. Mockups có thể sử dụng các yếu tố đồ họa tinh tế thay cho những tông màu thiếu tính thẩm mỹ. Điều này có ý nghĩa quan trọng đối với bản sắc thương hiệu. Vì nó là sự tái diễn của các ngôn ngữ hình ảnh thương hiệu.

Prototype được sử dụng trước khi lập trình logic trên một trang. Nó mang bố cục trang web semi-functional của một mockup với mục đích cung cấp cái nhìn sâu sắc hơn về các chức năng của trang web trước khi nó được xây dựng. Nguyên mẫu Prototype thường được tạo bằng HTML/CSS, thậm chí là JavaScript, để hiển thị cách giao diện người dùng hoạt động.

Các mức độ trung thực

Tính chân thật luôn là điều mà mỗi nhà sáng tạo mong muốn truyền tải đến người xem. Dựa trên những định ban đầu, bạn nên có những thay đổi linh hoạt về mức độ chi tiết và mục tiêu của Wireframe.

Block diagrams

Block diagrams cung cấp các thông tin cơ bản nhất của một Wireframe như: bố cục, các loại nội dung hoặc các chức năng cơ bản mà bạn muốn thể hiện.

Bạn có thể dễ dàng thiết lập hệ thống phân cấp thông tin, kiểu chữ, thêm văn bản, thay đổi kích thước để nhấn mạnh nội dung. Đừng quá đi sâu vào chi tiết. Nhớ rằng việc đề cao tính tổng quát sẽ tốt hơn khi không làm mất bố cục tổng thể của Wireframe.

Grey boxes

Các sắc thái của gam màu xám là lựa chọn tốt để bạn làm nổi bật bố cục, đồng thời tiết kiệm thời gian lựa chọn màu sắc đến mức tối đa. Cách này giúp bạn dễ dàng kiểm tra được User Flows và cách tổ chức nội dung.

Xem thêm: Tại sao sử dụng Flow, và sử dụng Flow như thế nào trong React

High-Fidelity Text

Cách thức này tạo ra sự chân thật nhất. Khi nó không đi quá sâu vào các chi tiết đồ họa. Cụ thể hơn là điền những đoạn văn thật (không phải “lorem ipsum”), chiều dài đoạn văn, font chữ lý tưởng,…

High-Fidelity Color

Tuong tự, đây cũng là cách thức giúp bạn có thể thêm màu sắc vào background, nút, đoạn văn để nhấn mạnh hành động mong muốn hoặc User Flows. Tuy nhiên, đừng sa đà và bị phân tâm vào các yếu tố chi tiết. Điều đó sẽ khiến người xem bị mất tập trung bởi màu sắc và các yếu tố quá nhiều.

High-Fidelity Media

Cách thức này giúp bạn hạn chế đi các chi tiết đồ họa. Có nghĩa, bạn có thể chèn hình ảnh, video hoặc cái gì tương tự. Điều này cũng một phần giúp nhấn mạnh nội dung, tác động đến cấu trúc và hệ thống phân cấp thông tin tổng thể.

Các bước xây dựng khung thiết kế wireframe hiệu quả

Thiết kế Wireframe là một bước rất quan trọng bất kỳ quá trình thiết kế giao diện nào.

Nó trông giống như một bản thiết kế kiến trúc; bạn cần trình bày nó trong sơ đồ đen trắng trước khi xây dựng một cấu trúc hoàn chỉnh. Tương tự, đối với một thiết kế giao diện, bạn cần nắm các bước thực hiện, tổ chức bố cục, nội dung,…

Wireframe xác định cách thức mà người dùng tương tác với giao diện. Chẳng hạn như, Wireframe chứa nhiều trạng thái khác nhau: nút bấm hoặc các hành vi của menu.

Thiết kế wireframe tạo ra sự tương tác với giao diện trực quan. Điểm đặc biệt chính là nó không bị phân tâm bởi các yếu tố màu sắc, kiểu chữ,… Có 9 bước mà bạn cần lưu tâm khi thiết lập thiết kế Wireframe hiệu quả.

Bước 1: Khai thác những cảm hứng

Tìm ra những ý tưởng hay là điều đầu tiên bạn phải quan tâm. Một bức ảnh có thể vẽ ra hàng nghìn từ ngữ khác nhau. Theo dõi và cố gắng nắm bắt ạn có thể nhanh chóng có được một cái nhìn tổng thể và nắm bắt được sự trực quan về cách các nhà thiết kế đang vận hành quy trình thiết kế Wireframe như thế nào?

Ban cũng có thể sử dụng các phần mềm đánh dấu bookmark trên trình duyệt khá tiện dụng này.

Một điểm khá thú vị là nếu liên tục quan sát những gì mà các nhà thiết kế hoặc các trang web đang làm cho Wireframe của họ, bạn sẽ dần hình dung ra cách Wireframe giúp tổ chức thông tin cho giao diện như thế nào.

Bước 2: Thiết kế quy trình của bạn

Thiết kế là một quá trình được tổ chức. Bạn phải tìm ra các quy trình nếu bạn muốn phát huy những thế mạnh của mình. Sau đây là một số sơ đồ cho thấy một số quy trình điển hình:

Dựa vào trải nghiệm cá nhân, bạn nên cân nhắc việc nên lựa chọn bất kỳ Framework HTML/CSS nào trong các dự án. Hãy đưa ra các quyết định, quá trình nào bạn cảm thấy phù hợp nhất. Đôi khi, hãy thử nghiệm để tự đánh giá được quy trình nào mang lại hiệu quả cao. Bạn không cần quá giỏi trong việc phát thảo. Đơn giản là hãy cố gắng để tự xem xét hành trình. Đó là cơ sở để bạn phát triển quy trình ưa thích của riêng mình.

Xem thêm: Top 5 Web Framework tốt nhất

Lấy một ví dụ minh họa. bạn sử dụng Illustrator như là công cụ thiết kế Wireframe chủ yếu là vì ba lý do:

1. Phong cách, bạn có thể linh động và lưu các phong cách của kiểu và đối tượng, sử dụng lại chúng trong suốt phần còn lại, tương tự như CSS.

2. Dễ dàng chỉnh sửa, di chuyển hoặc co giãn kích thước các đối tượng.

3. Có sự linh hoạt trong việc chuyển đổi sang Photoshop.

Tuy nhiên, tôi có sử dụng các công cụ khác và nó phụ thuộc vào tình huống của dự án. Tôi sẽ tóm tắt một số công cụ phổ biến, điểm mạnh và yếu của chúng trong phần tiếp theo.

Bước 3: Thông minh trong việc lựa chọn các công cụ

TopDev gợi ý cho bạn một số công cụ được sử dụng phổ biến hiện nay trong việc xây dựng Wireframe trong UI UX.

Xem thêm: Hiểu tất tần tật về UX Design với UX360: User Experience in a nutshell

Đầu tiên phải kể đến 3 công cụ được các designer yêu thích trong thiết kế wireframe:

1. Omnigraffle

Đây là một công cụ được yêu thích của người dùng Macbook. Omnigraffle cũng có một thư viện đóng góp từ dữ liệu thực từ những người dùng. Và được hỗ trợ rộng rãi bao gồm các thành phần có thể tái sử dụng.

Omnigraffle còn có các tính năng hiệu quả: tự động bố cục, kiểu đối tượng tùy biến, smart guide,… Các tính năng này cũng có mặt trong bộ phần mềm Adobe CS. Nếu bạn không có bộ CS, Omnigraffle là lựa chọn hợp lý (khoảng 100$) để tạo các Wireframe chi tiết.

2. Axure

Được xem là “người anh cả”, Axure là công cụ hỗ trợ tốt cho thiết kế Wireframe chuyên nghiệp. Nhưng công cụ này mới xuất hiện trên hệ điều hành Windows.

Tuy nhiên, công cụ này chỉ mới xuất hiện. Dù vậy độ phủ sóng vì các năng thông minh, đặc biệt là Dark mode của Axure là điều không cần bàn cãi.

3. Illustrator

Nếu có xuất phát điểm từ một designer thì bạn hẳn rất rõ về Adobe Illustrator.

Đây là một trong những công cụ khá được các nhà thiết kế yêu thích. Illustrator giúp tạo ra các Wireframe nhanh chóng, như vẫn đảm bảo được độ phức tạp đặc thù. Điểm nổi bật của Illustrator là khả năng xuất sang định dạng PSD với các layer có thể chỉnh sửa. Đồng thời, công cụ này còn hỗ trợ sao chép và dán mạnh mẽ cho Photoshop; kiểm soát typography mạnh mẽ với các phong cách mà bạn có thể lưu, chỉnh sửa và tái sử dụng. Dưới đây là mẫu giao diện làm việc của Adobe Illustrator.

Ngoài các công cụ phổ biến, bạn có thể tham thêm các công cụ dưới đây:

4. Indesign

Indesign thu hút người dùng do lợi thế đặc biệt. Như việc tạo ra sự các nguyên mẫu có tính tương tác và độ chuẩn xác cao.

Có những điểm mạnh tương đồng với Adobe Illustrator về khả năng kiểm soát typography mạnh mẽ hơn; Indesign có khả năng kiểm soát typography tốt hơn. Đồng thời, hỗ trợ các master page mạnh mẽ và gần đây là có khả năng tạo ra các nguyên mẫu có tính tương tác.

5. Balsamiq

Balsamiq được giới thiết kế đánh giá cao và trở nên phổ biến khi các Wireframe được tạo ra giống với các bản thảo chuyên nghiệp. Công cụ này nổi bật hơn với một thư viện khổng lồ bao gồm các thành phần có thể tái sử dụng.

Bạn cũng có thể sử dụng nó trên hầu hết các nền tảng khác nhau: Mac, Windows và Linux. Hơn thế nữa, còn có một phiên bản web nếu bạn muốn làm việc trên đám mây. Các ứng dụng của bên thứ ba như iMockups cho iOS cũng hỗ trợ việc xuất ra các định dạng Balsamiq.

6. Flairbuilder

Flairbuilder là một công cụ mới được sáng chế nhằm hỗ trợ mạnh mẽ cho các tương tác.

Không những thế, nó còn có một thư viện thành phần khổng lồ, hỗ trợ các master page. Và tất nhiên, bạn dễ dàng có thể xuất ra nguyên mẫu để xem trực tuyến.

Các bạn đừng lo nếu các phần mềm desktop không phải là sự lựa chọn hoàn hảo. Hãy thử trải nghiệm các ứng dụng trực tuyến hữu ích sau đây:

7. Keynote/Powerpoint

Với những tính năng nổi bật, Keynotopia chuyển đổi ứng dụng thuyết trình yêu thích của bạn thành công cụ thiết kế nguyên mẫu nhanh nhất. Chính điều này đã giúp tạo các mockup ứng dụng di động, web và desktop. Đối với những người không sử dụng mac, Keynotopia còn cung cấp các template powerpoint.

Fireworks

Fireworks có thể làm việc trên toàn bộ quá trình thiết kế. Từ các Wireframe cơ bản cho đến giao diện đầy đủ. Fireworks hỗ trợ các master page (được mô tả như các template) tái sử dụng trên các trang con. Ngoài ra, Fireworks còn cho phép bạn tạo các các nguyên mẫu có tính tương tác.

Bước 4: Thiết lập một Grid

Hiểu một cách đơn giản, hệ thống Grid là một cách tổ chức theo cấu trúc. Nó không quá phức tạp trong việc bố trí các thành phần.

Lấy ví dụ cụ thể, bạn dùng Illustrator để tiến hành thiết lập. Trước tiên, đó là thiết lập kích thước tài liệu. Giả sử bạn chọn kích thước 1280 x 900. Điều này cho phép sự co giãn giữa các độ phân giải di động lên mức tối đa 1140 pixel.

Đặt template đã tải về từ CSS grid vào tài liệu của bạn

Bước 5: Xác định bố cục với các ô

Hãy bắt đầu bằng cách vẽ các ô trên Grid. Tiếp đó hãy quan tâm đến thứ tự thông tin mà bạn muốn trình bày với người xem. Một trình tự hoàn hảo sẽ bắt đầu từ trên xuống dưới, sau đó là từ trái sang phải. Như ví dụ dưới đây mô tả.

Tùy vào mục tiêu và đối tượng, bạn có thể sáng tạo với bố cục. Tuy nhiên, vẫn giữ được thứ bậc của thông tin trong đầu. Dưới đây là một ví dụ thực tế mô tả vấn đề này.

Bước 6: Xác định thứ bậc thông tin với Typography

Khi đã sắp xếp các ô hợp lý, bạn hãy bắt đầu thêm vào đó một ít nội dung. Nó sẽ giúp bạn đánh giá được thông tin có được cấu trúc hóa tốt hay không. Nguyên tắc quan trọng nằm ở sự giống nhau. Tức là thông tin mà bạn muốn truyền tải phải rõ ràng, ngay cả trong một Wireframe đen trắng.

Một bí quyết ở bước này là bạn hãy sử dụng các kích thước phông chữ khác nhau. Đó là cách tuyệt vời để phân biệt các cấp độ thông tin khác nhau.

Mặt khác, bạn nên điền thêm thông tin chi tiết vào. Bạn có thể nhận ra bố cục ban đầu không hoạt động tốt. Đó là toàn bộ vấn đề của quá trình thiết kế Wireframe. Như ví dụ dưới đây mô tả.

Bước 7: Tinh chỉnh với dãy màu xám

Tận dụng dãy màu xám giúp bạn xác định được cường độ trực quan của các thành phần.

Bước 8: Wireframe có mức độ chi tiết cao

Đây là bước giúp nâng cao và tối ưu hóa toàn bộ quá trình tổ chức Wireframe. Nó không bắt buộc phải được thực hiện. Tuy nhiên, để đảm bảo hiệu suất của quá trình sáng tạo, bạn có thể cân nhắc.

Việc tạo ra một Wireframe có độ chi tiết cao cũng rất quan trọng. Nó đồng nghĩa bạn cần bổ sung nhiều chi tiết hơn. Hãy điền các bản sao thực tế vào Wireframe và cố gắng xác định kích thước phông chữ lý tưởng:

Hoặc nó cũng có thể liên quan đến màu sắc:

Ở giai đoạn trực quan hoặc viết code, bạn muốn mình thoát ra khỏi chế độ phác thảo hoặc thử nghiệm thì cách tốt nhất là thực hiện việc lặp lại các chu kỳ (phản hồi <-> thiết kế Wireframe).

Xem thêm: Clean code là gì? Làm sao để viết code clean

Bên cạnh đó, tốt nhất là bạn hãy bỏ qua việc xác định quá nhiều chi tiết. Và đi thẳng vào giai đoạn thiết kế nguyên mẫu có tính tương tác (đó là 37signals). Hiểu đơn giản là các chi tiết không thể được truyền đạt đầy đủ trên một hình ảnh phẳng. Vì thế, đừng tập trung quá nhiều vào nó. Nếu bạn làm việc với một nhóm các nhà phát triển, hãy nhờ họ đánh giá các Wireframe. Đây là cơ sở quan trọng bạn cần nhớ khi làm việc trên giao diện trực quan.

Bước 9: Chuyển đổi Wireframe thành Giao diện trực quan

Đây là bước cuối cùng trước để hoàn thiện giao diện trực quan. Đề xuất công cụ lý tưởng cho bước này chính lại là Illustration. Công cụ này có thể xuất nó thành một tập tin .psd với hầu hết các layer có thể chỉnh sửa.

Dưới đây là một ví dụ về Wireframe đã được chuyển đổi sang một giao diện trực quan. Bộ khung của Wireframe còn khá nguyên vẹn, mặc dù đã thực hiện các tinh chỉnh một cách trực quan.

Những nền tảng sáng tạo Wireframe ưa chuộng

Để tối giản quy trình thiết kế, chúng ta có thể tìm kiếm những mẫu thiết kế trên các trang web thuộc nền tảng sáng tạo. Những trang web dưới đây đều cung cấp cho các mẫu thiết kế được người dùng chia sẻ. Bạn có thể thỏa sức trải nghiệm. Đây có thể là bước đầu để bạn nắm bắt được xu hướng thiết kế mới nhất.

Cho dù bạn làm việc với Wireframe hay Prototype trong một hay vài năm, bạn vẫn sẽ cảm nhận được sự hữu ích. Đồng thời, có thể học hỏi, tự sáng tạo theo cách riêng của mình. Hoặc bạn cũng có thể khai thác những cảm hứng cho các sản phẩm và gắn trực tiếp vào các công cụ thiết kế như Sketch, Balsamiq,…

Cùng TopDev điểm qua một số thư viện tiềm năng cho chuyên mục sáng tạo giao diện trực quan.

Wireframes To Go

Có rất nhiều mẫu thiết kế do cộng đồng đóng góp. Tại đây, bạn có thể tìm thấy vô số UI Component hoặc Wireframe cho toàn bộ trang web. Lưu ý, các mẫu thiết kế tại trang này chỉ hỗ trợ cho Balsamiq Mockups mà thôi.

Sketch App Resources

Có lẽ chúng ta cũng không quá xa lạ với Sketch, Nó là một công cụ thiết kế phổ biến hiện nay và chỉ chạy trên Mac OS. Trang web sáng tạo này có nhiều mẫu dành cho Web, Mobile, Wearable và icon.

Figma Resources

Dù được xem là đàn em của Sketch nhưng xét về chức năng thì Figma có những thế mạnh vượt trội hơn. Điển hình là nó hỗ trợ đa nền tảng như Mac OS, Windows và Web. Ngoài điểm nổi trội, trang web này vẫn đảm bảo những tính năng tương tự như Sketch App Resources.

I Love Wireframes

Nhiều mẫu thiết kế được cộng đồng đóng góp vào một group trên vào một group trên chung trên một nền tảng. Thường những mẫu thiết kế sáng tạo trên trang web này rất đặc biệt và đa dạng thể loại hơn.

Wireframe Showcase

Trang này vô số Wireframe hoàn chỉnh của một trang web hoặc một phần trong một trang web. Nó gồm Wireframe và hình ảnh cuối cùng sau khi hoàn thiện.

Thông qua nguồn dữ liệu được chia sẻ, bạn sẽ nhận ra mô tuýp chung. Từ đó, có thể phá đi và sáng tạo trên nền tảng thiết kế có sẵn.

Web Without Words

Đây là một trang web khá thú vị. Vì đặc trưng của nó là loại bỏ tất cả hình ảnh,, chữ. Đồng thời, trang web trừu tượng hóa các thành phần bằng các kí hiệu dùng trong Wireframe một cách hiệu quả.

Tổng kết về Wireframe

Wireframe hiện tại đã trở thành người bạn đồng hành không thể thiếu của nhóm ngành sáng tạo. Ngoài ra, các công ty, tổ chức lớn cũng đưa Wireframe vào việc phát triển các sản phẩm sáng tạo của họ thông qua các dự án.

Dù vẫn còn nhiều điểm chưa hoàn thiện nhưng Wireframe vẫn có những ưu thế nhất định. Những chức năng và hiệu ứng phác họa, đen trắng xám hoặc xanh, thể hiện được giao diện một cách tốt nhất. Nhờ sự hỗ trợ đắc lực từ các công cụ công nghệ, Wireframe lại tạo ra các sản phẩm giao diện đậm tính sáng tạo và đầy nổi trội.

Có thể bạn quan tâm:

Typescript vs Javascript: Nên chọn ngôn ngữ nào?

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 bổ sung	Cú pháp quen thuộc

Có thể nói TypeScript là một phiên bản nâng cao của JavaScript vì nó bổ sung những kiểu dữ liệu tĩnh và các lớp hướng đối tượng, đồng thời nó bao gồm luôn các phiên bản ES mới nhất (tùy version của TypeScript).
Các file TypeScript có đuôi (phần mở rộng – extension) là *.ts . Trong khi các file JS có đuôi được biết là *.js
Code được viết bằng TypeScript sẽ được biên dịch thành JavaScript thuần. Thường thì chúng ta sẽ dùng lệnh tsc để biên dịch vì trong TypeScript có tích hợp sẵn một trình biên dịch được viết bằng TypeScript luôn.
Với TypeScript chúng ta có thể khai báo biến với từ khóa: var, let và const. Trong khi var chỉ được dùng trong JS ( hình như từ ES6 trở đi JavaScript cũng dùng được var, let và const)
Các biến trong code TypeScript thường được dùng với kiểu dữ liệu rõ ràng hơn trong code JavaScript.
- Ví dụ 1: Khai báo biến trong TypeScript

var name: string = "Thang Pham";
var isSingle: bool = true;

- Ví dụ 2: Khai báo biến trong JavaScript

var name = "Thang Pham";
var isSingle = true;

TypeScript kiểm tra kiểu của các biến khi biên dịch code (compile time) trong khi JS kiểm tra lúc chạy (run time)
- Ví dụ 3: TypeScript kiểm tra kiểu dữ liệu

function add(num1: number, num2: number){
    return num1 + num2;
}
add(1, 2); //3
add(1, "hai"); //error

- Ví dụ 4: JavaScript kiểm kiểu dữ liệu

function add(num1: number, num2: number){
    return num1 + num2;
}
add(1, 2); //3
add(1, "hai"); //1hai

Khi nào nên sử dụng Typescript?

Ngăn ngừa lỗi: TypeScript phát hiện lỗi tại thời điểm biên dịch, giảm thiểu khả năng gặp lỗi trong thời gian chạy. Điều này đặc biệt có giá trị trong các dự án lớn, nơi việc gỡ lỗi có thể tốn thời gian.
Kiểu tĩnh: Với TypeScript, bạn có thể định nghĩa kiểu cho biến, hàm và đối tượng, giúp mã của bạn trở nên dễ dự đoán và dễ bảo trì hơn. Điều này đặc biệt hữu ích trong môi trường làm việc nhóm, nơi sự nhất quán là rất quan trọng.
Khả năng mở rộng: Nếu bạn đang làm việc trên một dự án lớn hoặc có kế hoạch mở rộng ứng dụng, các tính năng như interfaces, enums và generics của TypeScript có thể giúp quản lý độ phức tạp.

>> Học TypeScript từ đâu? Cùng khám phá trong bài viết của TopDev!

Khi nào nên duy trì JavaScript?

Đơn giản và nhanh chóng: JavaScript dễ bắt đầu hơn, đặc biệt cho các dự án nhỏ hoặc khi bạn cần xây dựng nhanh.
Quen thuộc: Nếu bạn đã quen thuộc với JavaScript và làm việc trên các dự án nhỏ, có thể không cần thiết phải chuyển sang TypeScript.

Tại sao chọn TypeScript trong khi đã có JavaScript?

JavaScript, ban đầu được thiết kế như một ngôn ngữ phía client, đã mở rộng ra sử dụng phía server. Tuy nhiên, sự phức tạp ngày càng tăng và những hạn chế trong lập trình hướng đối tượng đã cản trở việc áp dụng JavaScript trong các doanh nghiệp. Để giải quyết vấn đề này, TypeScript đã được tạo ra để cải thiện JavaScript, cung cấp kiểu tĩnh và các tính năng cho phát triển server-side mạnh mẽ hơn.

TypeScript được sử dụng để code Front-end như Angular 2 (và các phiên bản về sau), React, Ionic,… và back-end như NodeJs.
TypeScript hỗ trợ đầy đủ các tính năng mà JavaScript có với các phiên bản JavaScript mới nhất (ECMAScript versions) vì như mình đã nói nó được xem như là một bản nâng cao của JS.
Bạn có thể code với JS thì với qua TypeScript cũng như vậy. Vì dù sao thì code TypeScript cũng sẽ được biên dịch lại thành JS mà.
TypeScript giúp bạn viết code theo phong cách OOP như: C#, Java. Nghĩa là nó có: class, abstract class, interface, encapsulation, ….
Dễ dàng hơn để phát triển các dự án lớn vì nó giúp bạn kiến trúc hệ thống theo Module, namespace.
Bạn sẽ dễ dàng code TypeScript khi mà nó được tích hợp trong rất nhiều IDEs như: Visual Studio Code, Sublime Text,…

Trên đây là những so sánh TS vs JS. Hy vọng giúp được anh em trong quá trình chọn học cũng như chọn ngôn ngữ để bắt đầu project của mình.

Bài viết tham khảo thangphampt.wordpress.com

Xem thêm các việc làm JavaScript hấp dẫn tại TopDev

Top 20 chứng chỉ IT được săn đón nhất trong ngành CNTT

Theo Global Knowledge, dữ liệu cho thấy các khách hàng của họ sau khi chọn học các khóa này thì đã có công việc tốt hơn sau khi tốt nghiệp. Các báo cáo về thị trường tuyển dụng IT cũng chỉ ra sự thật là các nhà tuyển dụng đang dần nâng cao yêu cầu và tìm kiếm những ứng viên có nhiều kỹ năng để đáp ứng công việc.

Điểm qua top 20 chứng chỉ IT danh giá nhất trong ngành CNTT, những chứng chỉ lập trình viên này hoàn toàn có thể được học online tại nhà, cùng tìm hiểu thật kỹ để xác định lĩnh vực bạn muốn trau dồi bản thân để thăng tiến trong sự nghiệp nhé.

TITIL – Thư viện cơ sở hạ tầng công nghệ thông tin

ITIL (Information Technology Infrastructure Library) nói tóm gọn là một framework tổng hợp được nhiều doanh nghiệp sử dụng để xây dựng hệ thống quản lý dịch vụ CNTT (IT Service Management).

Mục tiêu mà ITIL hướng tới là nâng cao sự hài lòng của khách hàng, tối ưu hóa chi phí hoạt động CNTT, nâng cao hình ảnh bộ phận CNTT, giúp tạo ra lợi thế cạnh tranh, framework mô tả quy trình cần có trong dịch vụ CNTT, hướng dẫn triển khai, kỹ năng cần có, định nghĩa từng vai trò và trách nhiệm của người tham gia cung cấp dịch vụ.

Một số doanh nghiệp đầu tư FDI vào Việt Nam yêu cầu vendor phải có chứng chỉ ITIL quốc tế có thể kể đến Lazada, Suntory PepsiCo Vietnam, Coca Cola Vietnam, HSBC Bank Vietnam, SCC Vietnam, AIG Insurance vì hệ thống dịch vụ CNTT mà họ cung cấp được xây dựng theo giá trị thực tiễn của ITIL và đạt mức tăng trưởng nhất định. Các tập đoàn lớn trong nước cũng dần triển khai nâng cao năng lực đội ngũ với ITIL như VNPT, EVN, PVN, bộ Tài Chính hay Kho bạc Nhà nước.

Ai cần học ITIL?

CIO/CTO: Vị trí này cần biết ITIL để hoạch định chiến lược phát triển dịch vụ, cách quản lý các danh mục đầu tư
IT Manager: Tham gia hoạch định chiến lược cung cấp dịch vụ CNTT, danh mục đầu tư, đưa ra các cam kết SLA (Service Level Agreement), tham gia thiết kế hệ thống dịch vụ CNTT
IT Operation Manager: Tham gia thiết kế quy trình dịch vụ, hướng dẫn, triển khai công cụ Helpdesk/ Service Desk, quản lý Service Catalogue,…
IT Help desk/ Service Desk: Nắm rõ quy trình hệ thống, phân tích và thực hiện vận hành hệ thống dịch vụ CNTT hiệu quả.

VCP-DCV

VMware Certified Professional (VCP) được chứng nhận và cấp bởi Vmware, chứng nhận kỹ năng và chuyên môn về kỹ thuật ảo hóa trung tâm dữ liệu. Chứng chỉ VCP là sự kết hợp giữa mạng data center truyền thống và quản lý đám mây.

Để đạt được chứng chỉ lập trình này, các ứng viên cần tối thiểu sáu tháng kinh nghiệm với các công nghệ về cơ sở hạ tầng VMware và nắm vững kiến thức Domain Name System (DNS), định tuyến và kỹ thuật kết nối cơ sở dữ liệu, biết triển khai cấu hình, quản lý và quy mô các môi trường VMware vSphere.

Kiến thức và kinh nghiệm sau khi bạn hoàn thành chứng chỉ VCP:

Có thể cài đặt, cấu hình, nâng cấp & Server vCenter an toàn và VMware ESXi.
Có thể xác định Kiến trúc và giải pháp vSphere.
Có thể cấu hình vNetwork Standard và chuyển mạch phân tán.
Có thể xác định và cấu hình cài đặt VLAN, VSS và Policies VDS .
Có thể lập kế hoạch, triển khai và cấu hình Shared Storage và Virtual Appliance Storage (SVA) cho vSphere.
Có thể tạo, triển khai và quản lý các máy ảo, Templates và vApps.
Có thể di chuyển các máy ảo, và sao lưu / khôi phục các máy ảo sử dụng VMware Data Recovery.
Có thể thực hiện xử lý sự cố cơ bản cho Mạng vSphere, lưu trữ và máy chủ ESXi.
Có thể giám sát việc thực hiện và quản lý vSphere vCenter Server

AWS Certified Cloud Practitioner, Chứng chỉ về kỹ năng đám mây AWS

Bài thi The AWS Certified Cloud Practitioner examination dành cho những cá nhân có kiến thức và kĩ năng cần thiết để chứng minh việc hiểu tổng thể về AWS Cloud, độc lập với các vai trò kỹ thuật cụ thể được chứng nhận bởi các chứng chỉ IT khác. Bài thi diễn ra tại trung tâm khảo thí hoặc từ nơi thoải mái và tiện lợi như ở nhà hoặc văn phòng với kì thi trực tuyến.

Trở thành AWS Certified Cloud Practitioner là một khuyến nghị, và tùy chọn để hướng tới đạt được Associate-level (cấp độ hội viên) hoặc Specialty certification (cấp độ chuyên môn).

Tìm hiểu hệ thống chứng chỉ AWS

Khả năng được chứng thực bởi chứng chỉ AWS:

Đưa ra định nghĩa về AWS Cloud và cơ sở hạ tầng chung cơ bản
Mô tả các nguyên tắc kiến trúc cơ bản của AWS Cloud
Mô tả giá trị của AWS Cloud
Mô tả các dịch vụ chính trên nền tảng AWS và các trường hợp sử dụng phổ biến (ví dụ: điện toán và phân tích)
Mô tả các khía cạnh cơ bản về bảo mật và tuân thủ của nền tảng AWS và mô hình bảo mật được chia sẻ
Xác định các mô hình thanh toán, quản lý tài khoản và định giá
Xác định các nguồn tài liệu hướng dẫn hoặc hỗ trợ kỹ thuật (ví dụ: báo cáo nghiên cứu chuyên sâu hoặc phiếu hỗ trợ)
Mô tả các đặc điểm cơ bản/cốt lõi của việc triển khai và vận hành trên AWS Cloud

Yêu cầu:

Các thí sinh nên có ít nhất sáu tháng kinh nghiệm với AWS Cloud ở vai trò bất kỳ, bao gồm vai trò kỹ thuật, quản lý, bán hàng, thu mua hoặc tài chính
Thí sinh cần có hiểu biết cơ bản về các dịch vụ CNTT và cách sử dụng những dịch vụ đó trên nền tảng Đám mây AWS.

AWS Certified Solutions Architect-Associate

Bài thi AWS Certified Solutions Architect – Associate dành cho những người muốn thực hiện vai trò kiến trúc sư giải pháp và có một năm kinh nghiệm hoặc nhiều hơn trong việc thiết kế các hệ thống phân tán khả dụng, tiết kiệm chi phí, và có hệ thống phân phối mở rộng cao trên AWS.

Xem thêm: Chứng chỉ AWS là gì?

Đảm bảo các kiến thức:

Mô tả một cách hiệu quả kiến thức của việc làm thế nào để kiến trúc và triển khai các ứng dụng bảo mật và mạnh mẽ trên nền tảng các công nghệ của AWS
Xác định giải pháp dựa trên các nguyên tắc thiết kế kiến trúc theo yêu cầu của khách hàng
Cung cấp hướng dẫn thực thi dựa trên những kinh nghiệm thực tế tốt nhất cho tổ chức thông qua vòng đời của dự án

Yêu cầu tiên quyết:

Kinh nghiệm sử dụng thực tế các dịch vụ điện toán, kết nối mạng, lưu trữ và cơ sở dữ liệu của AWS
Kinh nghiệm làm việc thực tế với các dịch vụ triển khai và quản lý của AWS
Khả năng nhận biết và xác định các yêu cầu kỹ thuật đối với ứng dụng dựa trên AWS
Khả năng nhận biết dịch vụ AWS nào đáp ứng được điều kiện kỹ thuật đề ra
Kiến thức về thực tiễn tốt nhất được khuyến nghị cho việc xây dựng các ứng dụng bảo mật và tin cậy trên nền tảng AWS
Hiểu biết về các nguyên tắc kiến trúc cơ bản khi xây dựng trên AWS Cloud
Hiểu biết về cơ sở hạ tầng toàn cầu của AWS
Hiểu biết về các công nghệ mạng liên quan đến AWS
Hiểu biết về các tính năng và công cụ bảo mật mà AWS cung cấp cũng như mối liên quan giữa các tính năng và công cụ đó với các dịch vụ truyền thống

Bằng AWS Certified Developer – Associate

Chứng nhận, từ Amazon, được thiết kế cho các nhà phát triển làm việc với các dịch vụ AWS. Qua đó chứng minh khả năng của bạn để phát triển, triển khai và gỡ lỗi các ứng dụng dựa trên Cloud với AWS. Khi các tổ chức ngày càng khẩn trương áp dụng công nghệ Cloud, internet of things, machine learning và các công nghệ mới nổi khác, chứng nhận AWS Certified Developer certification đã trở nên có giá trị hơn đối với ứng viên.

Yêu cầu: Một hoặc nhiều năm kinh nghiệm thực hành thiết kế và duy trì các ứng dụng dựa trên AWS, kiến thức vững chắc về một hoặc nhiều ngôn ngữ lập trình bậc cao cũng như là sự hiểu biết về các dịch vụ AWS.

Việc làm AWS lương cao

CISA – Chuyên gia kiểm định hệ thống thông tin

Certified Information Systems Auditor, viết tắt là CISA – Chuyên gia kiểm định hệ thống thông tin.

Chuyên gia kiểm định hệ thống thông tin (CISA) là một loại chứng chỉ lập trình do Hiệp hội kiểm toán và kiểm soát hệ thống thông tin (ISACA) ban hành. Đây là tiêu chuẩn toàn cầu cho các chứng chỉ liên quan đến các công việc trong hệ thống thông tin, đặc biệt là kiểm toán, kiểm soát và bảo mật giám sát và đánh giá hệ thống CNTT của một tổ chức hoặc doanh nghiệp. Bài kiểm tra của chứng chỉ này sẽ đánh giá chuyên môn của bạn trong quy trình kiểm toán hệ thống thông tin (IS), khả năng báo cáo của bạn về các quy trình tuân thủ và truy cập vào các lỗ hổng bảo mật.

Để đủ điều kiện thi chứng chỉ CISA, bạn cần có 5 năm kinh nghiệm trở lên trong ngành kiểm toán, kiểm soát, đảm bảo hoặc bảo mật hệ thống thông tin hoặc CNTT. Để duy trì chứng chỉ, bạn sẽ cần báo cáo ít nhất 20 khóa học CPE hàng năm, chứng chỉ sẽ hết hạn sau 3 năm.

CISSP – Chứng chỉ bảo mật CNTT

Tới thời điểm hiện tại, chứng chỉ CISSP (Certified Information Systems Security Professional) được coi là một trong những chứng chỉ cao cấp và giá trị nhất ở lĩnh vực bảo mật và công nghệ thông tin, được cấp và quản lý bởi tổ chức độc lập (ISC)².

Chứng chỉ này cần thiết cho những ai? Câu trả lời là những vị trí đảm nhiệm về bảo mật như: Chuyên viên tư vấn bảo mật, Chuyên viên phân tích bảo mật, Giám đốc bảo mật, Kỹ sư bảo mật hệ thống, Giám đốc/Trưởng phòng CNTT, Giám đốc An ninh thông tin (CISO), Chuyên viên đánh giá bảo mật, Giám đốc bảo mật, Kỹ sư an ninh mạng, Kỹ sư mạng, …

Một số nội dung trong bài thi chứng chỉ CISSP:

Quản lý truy cập thông tin
An toàn mạng và viễn thông
Điều hành an toàn thông tin và quản lý rủi to
An toàn bảo mật trong phát triển phần mềm
Mã hóa thông tin
Kiến trúc và thiết kế an toàn
Pháp lý, quy định, điều tra và tuân thủ
An toàn trong môi trường vật lý

Để đạt được chứng chỉ IT này không hề đơn giản, cho đến tháng 7 năm 2020 mới chỉ có khoảng 26 người Việt Nam sở hữu – một con số quá nhỏ so với nhu cầu bảo mật thông tin mạnh mẽ như hiện nay. Cho nên, nếu sở hữu chứng chỉ này trong tay, bạn chính là gương mặt vàng của lĩnh vực bảo mật!

PMP – Chứng chỉ quản lý dự án chuyên nghiệp

PMP – Project Management Professional là một chứng chỉ lập trình viên quốc tế do Viện Quản lý Dự án (Hoa Kỳ) đưa ra từ năm 1984. Đây là chứng chỉ quốc tế công nhận một người có tri thức và kỹ năng để dẫn dắt, quản lý nhóm nhằm thực hiện dự án, chuyển giao kết quả đáp ứng theo yêu cầu ràng buộc của dự án.

PMP cần thiết vì nó phục vụ cho chính công việc của những người làm dự án, kể cả ở vị trí quản lý như Project Management Office staff, Project Manager hay ở vị trí là một thành viên bình thường. Người PM có thể áp dụng khung (framework) trong PMP vào việc điều hành dự án, thay đổi những cách làm không hiệu quả, nâng cao khả năng thành công của dự án. Các thành viên dự án cũng có thể dùng kiến thức PMP để hiểu được các thuật ngữ, nắm được quy trình, process trong phát triển dự án, hỗ trợ PM quản lý dự án…

Tuy trong cùng lĩnh vực PM (Project Manager) có rất nhiều loại chứng chỉ khác nhưng PMP (Project Management Professional) được đánh giá là thông dụng nhất bởi tính đa ngành với một số lĩnh vực như: xây dựng, sản xuất, CNTT.

Tìm việc làm Project Manager

Điều kiện thi chứng chỉ cũng khá khắt khe:

Nếu bạn đạt trình độ học vấn Tốt nghiệp Trung học/Cao đẳng: yêu cầu tối thiểu 5 năm kinh nghiệm quản lý dự án ~ tương đương 7500 giờ làm việc.
Nếu bạn đạt trình độ Tốt nghiệp Đại học: yêu cầu tối thiểu 3 năm kinh nghiệm quản lý dự án ~ tương đương 4500 giờ làm việc thực tế

Ngoài ra 2 đối tượng trên phải tham gia 35 giờ học về quản lý dự án.

CRISC – Chứng chỉ kiểm soát rủi ro và an ninh CNTT

Chứng chỉ CRISC (Certified Risk and Information Systems Control) của ISACA dành cho các chuyên gia thiết kế, thực hiện, giám sát và duy trì kiểm soát an ninh CNTT. CRISC là một trong những chứng chỉ uy tín nhất trong ngành công nghiệp đổi mới, tập trung vào đánh giá rủi ro CNTT trong kinh doanh.

Bài kiểm tra bao gồm 4 phần chính: Nhận dạng rủi ro CNTT (Identification), Đánh giá rủi ro (Assessment), Ứng phó Giảm thiểu thiệt hại (Mitigation), Giám sát và Báo cáo rủi ro (Control Monitoring and Reporting)

Điều kiện tiên quyết để thi lấy chứng chỉ là ba năm kinh nghiệm liên quan đến việc xác định và quản lý rủi ro bảo mật.

CIS – Chứng chỉ quản lý bảo mật

Tương tự với chứng chỉ CISSP, có cùng cấp độ về quản lý bảo mật. Tuy nhiên, chứng chỉ CISM (Certified Information Security Manager) thiên về các hoạt động, công tác bảo mật cũng như cách thức phát triển, tích hợp duy trì các chương trình bảo mật dựa theo mô hình tổng thể.

CISM bao gồm 4 lĩnh vực:

Quản trị bảo mật thông tin
Quản trị rủi ro thông tin
Quản lý và phát triển chương trình bảo mật thông tin
Quản lý sự cố bảo mật.

Chứng chỉ được thiết kế dành cho các đối tượng thuộc cấp độ chuyên gia quản lý bảo mật thông tin (IS Professional level). Đây là những người phải giữ được tầm nhìn bằng cách quản lý, thiết kế, giám sát và đánh giá hệ thống bảo mật thông tin trong tổ chức/doanh nghiệp.

Sở hữu chứng chỉ này sẽ đảm bảo được ứng viên có kỹ năng thành thạo trong việc quản lý rủi ro bảo mật, quản trị, quản lý và phát triển các chương trình, quản lý và khắc phục sự cố.

Google Certified Professional Cloud Architect

Theo báo cáo của People Knowledge về thu nhập và kỹ năng CNTT toàn cầu, các chuyên gia CNTT được trả lương cao nhất thế giới phần lớn tập trung nhiều hơn trong các lĩnh vực liên quan đến điện toán đám mây, an ninh mạng, quản lý dự án và mạng.

Dù chỉ mới ra mắt từ năm 2017 nhưng chứng chỉ GCP Cloud Architect do Google cấp lại đứng đầu bảng hai năm liên tiếp trong danh sách.

Chứng chỉ này công nhận những năng lực về:

Thiết kế và lập kế hoạch kiến trúc giải pháp đám mây
Quản lý và cung cấp cơ sở hạ tầng giải pháp đám mây
Thiết kế để bảo mật và tuân thủ
Phân tích và tối ưu hóa các quy trình kỹ thuật và kinh doanh
Quản lý và triển khai kiến trúc đám mây
Đảm bảo giải pháp và độ tin cậy hoạt động

Có thể thấy hoàn thành chứng chỉ này bạn sẽ được chứng minh năng lực ở khả năng thiết kế, phát triển và quản lý kiến trúc đám mây của Google khi sử dụng các công nghệ GCP. Và để đạt được nó, chuyên gia IT cần có kiến thức chuyên sâu về giải pháp ở những tình huống riêng biệt.

Trong tương lai gần, thành thạo các công cụ Google sẽ là điểm sáng trong CV, cũng như dần trở thành điều kiện quan trọng khi tuyển dụng tại hầu hết các công ty lớn, khi mà kỹ năng về cloud đang được tìm kiếm và yêu cầu ở rất nhiều nơi.

Chứng nhận trong quản trị doanh nghiệp CNTT ( Certified in the Governance of Enterprise IT – CGEIT)

Được cung cấp thông qua ISACA, chứng nhận CGEIT thể hiện kiến thức của bạn về quản trị CNTT doanh nghiệp. Nó cho thấy bạn có khả năng áp dụng những nguyên tắc và khái niệm quản trị CNTT trong môi trường chuyên nghiệp. Khóa học vốn được thiết kế cho những người có “vai trò quản lý, tư vấn hoặc các vị trí đảm bảo liên quan đến quản trị CNTT”, bao gồm IS và IT director, chuyên gia tư vấn, giám đốc điều hành, manager, theo ISACA. Chứng nhận CGEIT hiện đang được xếp hạng là một trong những chứng chỉ IT quốc tế có giá trị nhất, theo dữ liệu từ Global Knowledge.

Yêu cầu: Năm năm kinh nghiệm quản lý hoặc nhiều hơn, đã từng đảm nhiệm vai trò tư vấn hoặc giám sát hay hỗ trợ các sáng kiến quản trị CNTT trong môi trường doanh nghiệp. Bạn sẽ cần trải nghiệm ở hai hoặc nhiều lĩnh vực CGEIT, bao gồm quản lý chiến lược, phân tích lợi ích, tối ưu hóa rủi ro và tài nguyên.

Chứng nhận ScrumMaster

Scrum Alliance cung cấp chứng nhận ScrumMaster vốn rất nổi tiếng và được tôn trọng trong ngành IT. Trở thành một ScrumMaster tức bạn đã thành thạo về Scrum và cách áp dụng nó tại nơi làm việc. Đó là một chứng nhận đặc biệt hữu ích cho các vị trí quản lý dự án, chương trình, cũng như là các nhà phát triển sản phẩm. Song song đó, bạn cũng sẽ nhận được tư cách là thành viên hai năm với Scrum Alliance, điều này sẽ cho phép bạn truy cập vào các sự kiện dành riêng cho các thành viên.

Yêu cầu: Bạn sẽ cần tham dự khóa học CSM trực tiếp, do một giảng viên Scrum giảng dạy.

Chứng nhận Hacker (Certified Ethical Hacker – CEH)

Được cung cấp bởi EC-Council, chứng chỉ Hacker (CEH) được chứng nhận cho thấy bạn có các kỹ năng và kiến thức để tìm lỗ hổng trong hệ thống máy tính và có khả năng ngăn chặn tấn công. Một “hacker có đạo đức” là người sử dụng cùng một kỹ năng và kiến thức như một hacker mũ đen để phát triển các biện pháp an ninh nhằm ngăn chặn các cuộc tấn công tiềm năng. Thông thường, các doanh nghiệp sẽ yêu cầu bạn phải nghĩ như một hacker để tìm điểm yếu trong hệ thống và mạng máy tính, nhờ đó sẽ dễ dàng hơn trong việc sửa các lỗ hổng bảo mật và ngăn chặn các mối đe dọa tiềm ẩn.

Yêu cầu: Bạn sẽ cần hai năm kinh nghiệm làm việc trong lĩnh vực bảo mật thông tin.

Bằng đai xanh Six Sigma

Six Sigma là một phương pháp quản lý được sử dụng để đơn giản hóa quản lý chất lượng liên quan đến nhiều cấp độ. Vì vậy mà bạn không thể nhảy vượt các cấp trong chứng chỉ Six Sigma, vì vậy bất kể bạn đang ở đâu trong sự nghiệp của mình thì đều phải bắt đầu với chứng chỉ Green Belt – cấp thấp nhất. Là một đai xanh Six Sigma, bạn sẽ được hướng dẫn bởi một đai đen trong tổ chức của mình, người sẽ cố vấn bạn trong khi bạn học phương pháp luận.

Yêu cầu: Ba năm kinh nghiệm làm full-time tại một hoặc nhiều lĩnh vực của Six Sigma Green Belt.

Chứng chỉ Citrix Certified Professional – Virtualization (CCP-V)

Chứng nhận của CCP-V thể hiện năng lực trong các ứng dụng desktop ảo sử dụng công nghệ Citrix. Trong đó bao gồm cài đặt các công nghệ, định thành phần kỹ thuật và cấu hình thử nghiệm. Trong năm 2014, chứng nhận này cũng đã thay thế chứng chỉ Citrix Certified Enterprise Engineer (CCEE) và tập trung vào các kỹ năng để triển khai, duy trì và xác định giải pháp dựa trên phần mềm XenDesktop của Citrix.

Yêu cầu: Bạn cần phải đạt được chứng nhận cấp associate của mình trước khi có thể chuyển sang CCP-V.

Chứng chỉ Microsoft Certified Solutions Expert (MCSE) – Cơ sở hạ tầng máy chủ

Chứng nhận MCSE là đặc biệt nhất trong danh sách này, vì nó không còn được cung cấp thông qua Microsoft – mà được thay thế bằng chứng nhận MCSE: Cloud Platform và Infrastructure. Tuy nhiên, chứng nhận vẫn được góp mặt vào trong danh sách vì nó vẫn hợp lệ nếu bạn nhận được chứng chỉ trước tháng 3 năm 2017.

Chứng nhận này chứng minh khả năng của bạn để chạy một trung tâm dữ liệu hiệu quả cũng như là kiến thức vững vàng trong các lĩnh vực như công nghệ đám mây, ảo hóa, lưu trữ, mạng, hệ thống và quản lý danh tính.

Yêu cầu: Để kiếm được chứng nhận MCSE, trước tiên bạn cần có một trong bốn chứng chỉ MCSA được cung cấp bởi Microsoft.

Chứng nhận Cisco Certified Network Professional (CCNP) Routing và Switching

Chứng nhận CCNP dành cho các chuyên gia IT đã hoàn thành chứng chỉ CCNA và chuyển sang lớp tiếp theo. Theo giấy chứng nhận CCNP, bạn có thể chọn chuyên về Cloud, trung tâm dữ liệu, định tuyến và chuyển mạch cũng như là bảo mật.

Yêu cầu: Bạn sẽ cần hoàn thành bài kiểm tra CCNA Routing và Switching hoặc bất kỳ bài kiểm tra CCIE nào trước khi chuyển sang kỳ thi chứng nhận CCNP.

Chứng chỉ Citrix Certified Associate – Networking (CCA-N)

Chứng chỉ CCA-N tập trung vào việc chứng minh trình độ sử dụng NetScaler Gateway trong môi trường doanh nghiệp. Bài kiểm tra bao gồm các lĩnh vực xung quanh việc sử dụng NetScaler Gateway để truy cập an toàn các máy tính desktop, ứng dụng và dữ liệu từ xa.

Yêu cầu: Không có điều kiện tiên quyết để lấy chứng chỉ CCA-N.

Đừng chỉ học khi còn là sinh viên. Đừng ra trường và mãi chỉ là “thợ code”. Để tiến xa hơn trong giới lập trình, ngoài kinh nghiệm thực chiến, bạn sẽ cần một “giấy chứng nhận” năng lực được công nhận bởi tổ chức uy tín trên toàn cầu. Trau dồi kiến thức không bao giờ là thừa thãi, nếu là bạn, thì bạn sẽ lựa chọn chứng chỉ lập trình nào để phấn bắt đầu?

TopDev tổng hợp

Xem thêm các vị trí IT Jobs hấp dẫn tại TopDev

Khám phá sự độc đáo trong phong cách làm việc chỉ có tại TOPICA

Khởi đầu từ một dự án start up còn non trẻ, Topica đã không ngừng vươn lên và ngày một lớn mạnh, hướng đến mục tiêu phát triển giáo dục, lan tỏa tri thức, liên kết giữa học viên với giảng viên tại nhiều quốc gia khác nhau trên thế giới.

TOPICA và sự vươn lên vị trí hàng đầu Đông Nam Á

Tổ hợp Công nghệ Giáo dục TOPICA (TOPICA) là Công ty Công nghệ Giáo dục đa quốc gia sở hữu đội ngũ lên đến hơn 2000 nhân viên và nhiều văn phòng đặt tại Singapore, Bangkok, Hà Nội, TP. HCM và Đà Nẵng.

Topica, tiền thân là Dự án vườn ươm doanh nghiệp CRC-TOPIC do World Bank Infodev tài trợ, được khởi động lần đầu tiên tại Việt Nam vào năm 2004. Sau đó 2 năm, với sự hỗ trợ từ Bill Gates – Chủ tịch Microsoft và Phó Thủ tướng Phạm Gia Khiêm, chương trình Phát triển hạ tầng E-Learning được công bố và khởi động tại 64 tỉnh thành trên khắp Việt Nam (TOPIC64).

Đến năm 2008, Tổ hợp giáo dục TOPICA chính thức được thành lập với sứ mệnh nhân rộng mô hình đào tạo trực tuyến chất lượng cao tới người học ở Việt Nam và Đông Nam Á.

Sau Harvard, Stanford, MIT và Duke, lần đầu tiên tại Việt Nam, TOPICA đưa ứng dụng công nghệ 3D vào giảng dạy. Sinh viên học trực tuyến những trải nghiệm việc “đến trường”, “vào lớp”, “thực hành” trong môi trường Second Life như trên giảng đường thật.

Lần đầu trong lịch sử, Việt Nam xuất khẩu công nghệ E-Learning với 12 hệ thống tích hợp, 300 quy trình cho trường ĐH chuyên ngành IT lớn nhất của “cường quốc gia công phần mềm” Philippines. Đồng thời, sản phẩm luyện nói tiếng Anh live trực tuyến của Việt Nam dẫn đầu thị trường Thái Lan, trở thành đơn vị xuất khẩu E-learning dẫn đầu Đông Nam Á.

Tạo dựng hướng đi riêng, tiên phong xuất khẩu công nghệ E-Learning

Sớm nhìn thấu được hiệu quả và lợi ích của công nghệ E-Learning đem lại, TOPICA đã và đang dẫn đầu trong việc triển khai, phát triển và đưa việc học tập online lan rộng, phát triển vững mạnh trên thị trường trong nước và nước ngoài.

TOPICA tự hào là đơn vị đào tạo trực tuyến hàng đầu Đông Nam Á với hệ thống sản phẩm giáo dục có mặt tại hơn 6 quốc gia, cung cấp các chương trình giáo dục trực tuyến bao gồm: Topica UNI, Topica Native, Edumall, Kidtopi, TOPICA Founder Institute.

Topica Uni là sản phẩm cung cấp hạ tầng công nghệ và dịch vụ cho 15 trường Đại học tại Việt Nam, Mỹ và Philippines để triển khai chương trình đào tạo Cử nhân trực tuyến chất lượng cao với hơn 1000+ Giảng viên doanh nhân.
Topica Native là đơn vị tiên phong trên thế giới phát triển ứng dụng luyện nói tiếng Anh online qua Google Glass, mang đến trải nghiệm Augmented Reality (thực tế ảo) đầu tiên cho học viên tại Thái Lan, Indonesia và Việt Nam.
Edumall là nền tảng học tập trực tuyến lớn nhất cung cấp hàng ngàn khóa học về tất cả các chuyên ngành, lĩnh vực khác nhau, thu hút hàng triệu học viên Việt Nam và Thái Lan.
Kidtopi là chương trình học tiếng Anh cao cấp 1-1 trực tuyến, với các giáo viên Mỹ hàng đầu, và công nghệ AI theo dõi hứng thú và tiến bộ của học sinh.
Topica Founder Institute là vườn ươm khởi nghiệp duy nhất tại Việt Nam đã có các startup nhận đầu tư tổng cộng gần 30 triệu USD.

Sức hút đến từ sự độc đáo trong văn hóa và quyền lợi đặc biệt cho các nhân tài IT

Coi trọng giá trị con người, đề cao tính sáng tạo và sự độc nhất của từng cá nhân, TOPICA mang đến cho mỗi “Topican” môi trường làm việc thoải mái, được tự tin thể hiện bản thân và thoải mái cháy hết mình với niềm đam mê công việc. Topican được phép là chính mình, được thưởng khi dám nhận bản thân chưa hiểu vấn đề, dám đứng lên thể hiện quan điểm và dám thuyết phục sếp chấp nhận ý tưởng.

Thêm vào đó, Topica tạo cơ hội tuyệt đối cho thành viên của mình tham gia các dự án đầy thách thức. Ngay cả khi thất bại, mỗi Topican vẫn là một “hiệp sĩ” vì những nỗ lực, cố gắng đã bỏ ra.

Và để tăng tốc trong cuộc đua công nghệ đầy gam go của thời đại 4.0, TOPICA đang nỗ lực tìm kiếm những lập trình viên tài năng, những người có thể cùng sánh vai và phát triển TOPICA ngày một lớn mạnh.

Cùng khám phá các vị trí việc làm IT đang chờ đợi các nhân tài lựa chọn để bùng nổ tại TOPICA:

TOPICA luôn chào đón những nhân tố tài năng dám đương đầu với thách thức và sẵn sàng trao tay những quyền lợi đặc biệt:

Tại Topica, Developer là “ngôi sao” của mỗi dự án, là “cha đẻ” của mỗi sản phẩm và được khuyến khích tự hào về “đứa con” của mình.
Tech Seminar hàng tháng, Hackathon hàng quý, Startup Founder Showcase hàng năm với hàng chục nhà đầu tư trong ngoài nước và các Startup hàng đầu.
E-Sports, Fussball, Bóng bàn, Phi tiêu, Gym. Flashmob với anh chị em đồng nghiệp hàng ngày
Cơ hội phát triển bản thân với các dự án thử thách và thoải mái đề xuất ý tưởng của chính mình;
Mức lương cạnh tranh, xứng đáng với năng lực cùng loạt thưởng hấp dẫn: Thưởng dự án, thưởng sáng kiến, thưởng tăng tốc, thưởng nóng, thưởng khi nghĩ ra cách thưởng mới…
Trang phục tự do với “quần sóc dép lê”, nhấn mạnh sự thoải mái tuyệt đối;

Các tài năng công nghệ còn chần chờ gì không mau ứng tuyển và trở thành Topican ngay hôm nay.

Apply CV nhanh chóng chỉ với 1 cú click chuột.

Dịch vụ Thị trường Điện toán đám mây và lưu trữ web Landscape 2023

Thị trường điện toán đám mây & Lưu trữ web 2023 là một thị trường đã khá nổi tiếng với thế giới, nhưng tại Việt Nam thì thị trường này lại còn khá mới mẻ và trẻ. Tuy còn non nớt là thế nhưng thị trường Điện toán đám mây đã được những chuyên gia trong ngành dự đoán về sự bùng nổ phát triển của nó trong tương lai và Điện toán đám mây cũng đã đạt được những thành công nhất định tại thị trường Việt Nam trong những năm gần đây.

Tổng quan

Cha đẻ của Điện toán đám mây là một tập đoàn công nghệ máy tính đa quốc gia IBM. Sau khi ra mắt vào năm 2008, thì Điện toán đám mây đã được ông lớn VNTT, Microsoft nhắm tới để phát triển tại thị trường Việt Nam. Sau đó Microsoft đã hợp tác với FPT để cùng nhau phát triển Điện toán đám mây trong dự án RQ1-Renovation.

Dự án kế tiếp mà FPT hợp tác với Microsoft là một dự án với sứ mệnh là đem lại nền công nghệ mới, tạo điều kiện cho các lập trình viên Việt Nam có thêm cơ hội để phát huy thể hiện tài năng. Dự án này bao gồm mục tiêu phát triển truyền thông, dịch vụ hạ tầng, hợp tác và đặc biệt là lưu trữ dữ liệu.

Thị trường Điện toán đám mây & Lưu trữ web Landscape

Cũng đã có một số cơ quan của Chính phủ đã áp dụng mô hình Điện toán đám mây riêng tư và Điện toán đám mây chung (cộng đồng) để triển khai một vài dự án làm mới bộ trung tâm tích hợp dữ liệu của Chính phủ, xây mới môi trường kiểm thử/phát triển cho Bộ Tài nguyên & Môi trường, TT&TT, Khoa học & Công nghệ cho các khu vực như HCM, Đà Nẵng…

Trong thời gian gần đây Microsoft và FPT không còn “độc chiếm” thị trường Điện toán đám mây nữa, đã có thêm nhiều công ty khác cũng đồng thời phát triển trong thị trường và cung cấp dịch vụ Điện toán đám mây như HostVN, MOS, VNTT, Prism, Exa…

Đã có một vài công ty SI (công ty tích hợp hệ thống) và một số ISV (nhà cung cấp phần mềm độc lập) có chiến lược đầu tư nguồn vốn, chất xám vào thị trường Điện toán đám mây để phát triển Điện toán đám mây riêng tư và Điện toán đám mây công cộng.

Tuy Thị trường điện toán đám mây & Lưu trữ web có chút nhộn nhịp nhưng các nhà cung cấp Điện toán đám mây tại Việt Nam vẫn còn bị hạn chế nhiều mặt và vẫn chỉ là những công ty nhỏ lẻ với quy mô nhỏ. Thậm chí còn có một vài công ty chỉ triển khai dự án Điện toán đám mây ở mức khảo sát và nghiên cứu chứ chưa thật sự ứng dụng công nghệ Điện toán đám mây này.

Nhiều chuyên gia công nghệ nhận xét thị trường Thị trường điện toán đám mây & Lưu trữ web là giải pháp ít tốn kém, đem lại hiệu quả cao và tối ưu nhất để giúp các doanh nghiệp, công ty trong nước giảm thiểu chi phí tối đa, tăng năng suất làm việc tối đa. Nhưng với những gì thị trường Điện toán đám mây ở Việt Nam đem lại trong thực tế thì chúng ta vẫn chưa thể đạt được những kết quả đó.

Việt Nam là một trong những nước hàng đầu của thị trường dịch vụ đám mây tại Đông Nam Á

Điểm yếu của đế chế Amazon trong cuộc chiến đám mây với Microsoft, IBM và Oracle

Tại Đông Nam Á, doanh thu từ thị trường điện toán đám mây ước lượng đạt 40 tỷ đô trong năm 2025, trong đó Việt Nam là một trong những nước có tốc độ tăng trưởng kinh tế nhanh nhất liên quan đến sử dụng điện toán đám mây, từ năm 2010 đến 2016, tốc độ tăng trưởng đạt 64.4%

Có thể trong tương lai ngắn, thị trường Điện toán đám mây sẽ được phát triển mạnh mẽ. Dấu hiệu rõ nhất để thể hiện dự đoán này sẽ thành hiện thực đó là vì đa số các doanh nghiệp, cơ quan, tổ chức tại Việt Nam đã có hiểu biết nhất định về những kiến thức cơ bản của Điện toán đám mây.

Chính vì thế việc phát triển bùng nổ Thị trường điện toán đám mây & Lưu trữ web tại nước ta là điều hoàn toàn có thể diễn ra. Trong một số công cố đã qua nghiên cứu trong VIO đã cho biết có khoảng:

25% thị trường vẫn đang trong giai đoạn nghiên cứu, tìm hiểu thông tin nhưng chưa có kế hoạch sử dụng đám mây.
8% thị trường cho biết họ sẽ sử dụng Điện toán đám mây sau thời gian tìm hiểu.
39% thị trường đã dấn thân và đang sử dụng Điện toán đám mây.
19% thị trường còn lại đã hoàn toàn bị “thu phục” bởi Điện toán đám mây và đã lên kế hoạch phát triển, sử dụng lâu dài trên thị trường Điện toán đám mây 2020.
3% còn lại cho biết họ hoàn toàn không có dự định triển khai dự án đám mây.

Khó khăn của thị trường Điện toán đám mây

Dù Thị trường điện toán đám mây & Lưu trữ web đang trong giai đoạn phát triển tích cực, tuy nhiên vẫn còn một số yếu tố khách quan làm ảnh hưởng đến tốc độ phát triển của nó như:

Cơ sở hạ tầng chưa được phát triển một cách đồng bộ để có thể vận hành đám mây trơn tru
Vẫn còn một số doanh nghiệp, khách hàng chưa có sự tin tưởng vào dịch vụ, các nhà cung cấp Điện toán đám mây
Vấn đề bảo mật thông tin dữ liệu nước ta còn nhiều thiếu sót
Chi phí sử dụng, đầu tư cao so với quy mô công ty và quy mô của thị trường Điện toán đám mây
Không cạnh tranh lại các công ty dịch vụ Điện toán đám mây nước ngoài
Tính liên kết giữa các nhà cung cấp với nhau còn chưa được vững mạnh
Không có tính sáng tạo, không thu hút, gây kích thích được các doanh nghiệp sử dụng

Trong năm 2018, Việt Nam chỉ đứng ở vị trí thứ 14 trong bảng xếp hạng các nước nhiều doanh nghiệp sử dụng dịch vụ đám mây với số điểm là 41/100. Trong giai đoạn từ năm 2010 – 2016 Việt Nam đạt kỷ lục có mức độ tăng trưởng cao nhất khối ASEAN với mức tăng trưởng là 64,4% (so với mức phát triển trung bình của cả khối ASEAN là 49.5%).

So với mô hình Công nghệ truyền thống thì chắc hẳn công nghệ mới mẻ như thị trường Điện toán đám mây sẽ ngày trở nên phổ biến và chiếm ưu thế hơn rất nhiều lần.

Tuy số liệu tăng trưởng khả quan là thế nhưng doanh thu mà thị trường Điện toán đám mây mang về còn rất thấp. Cụ thể là vì các doanh nghiệp chỉ chấp nhận chi trả trung bình 1,7$/năm/người cho việc sử dụng đám mây (số liệu từ năm 2016).

Nếu so sánh mức chi phí này với Singapore thì họ chấp nhận chi tiêu cho việc sử dụng dịch vụ đám mây gấp 107 lần so với nước ta. Malaysia gấp 6,5 lần, Thái gấp 2,4 lần và Philippines gấp 1,3 lần Việt Nam.

Điện toán đám mây - Công nghệ mới cho doanh nghiệp vừa và nhỏ

Cloud Computing - Xu hướng toàn cầu đang thâm nhập và thống trị tại thị trường Việt Nam

Bộ trưởng Bộ Thông tin và truyền thông Nguyễn Mạnh Hùng cho biết, Việt Nam là một trong số những nước sớm ban hành tiêu chí, chỉ tiêu kỹ thuật cho hạ tầng điện toán đám mây. Điện toán đám mây sẽ là thành phần quan trọng nhất của hạ tầng số. Hạ tầng số phải được đầu tư trước, thúc đẩy chuyển đổi số phát triển kinh tế số.

Tín hiệu tốt là ngày càng có nhiều doanh nghiệp lựa chọn sử dụng dịch vụ đám mây vì họ đã dần nhìn nhận được những lợi ích mà dịch vụ này đem lại. Theo báo cáo, các tổ chức, doanh nghiệp sử dụng Điện toán đám mây có thể tiết kiệm lên đến 40% chi phí dự định tự đầu tư, rút ngắn thời gian dự án từ 1 tháng đến 1.5 tháng, không còn tốn chi phí về nhân sự, bảo hành, bảo trì hệ thống….

Lợi thế Thị trường điện toán đám mây & Lưu trữ web 2023

Tuy thị trường Điện toán đám mây 2023 ở Việt Nam còn chưa được đầu tư với quy mô lớn để có thể phát triển mạnh mẽ hơn nhưng trong thời đại công nghệ lên ngôi, xu hướng thị trường cũng đang dần chuyển sang công nghệ AI thì việc bùng nổ thị trường Điện toán đám mây là điều chắc chắn sẽ xảy ra.

Có 3 nhóm cung cấp dịch vụ chính trong thị trường Điện toán đám mây 2023 đó là:

Doanh nghiệp cung cấp nước ngoài
Doanh nghiệp lớn trong nước tự thực hiện dự án Điện toán đám mây
Doanh nghiệp nhỏ/lẻ, startup cung cấp dịch vụ đám mây

Các doanh nghiệp cung cấp dịch vụ đám mây như Google, Microsoft có lợi thế hơn trong việc triển khai các dự án liên quan vì họ không những có nguồn vốn dồi dào mà họ còn có nhiều kinh nghiệm và đã dành rất nhiều thời gian cho nó hơn các công ty tại Việt Nam. Dù là vậy như những công ty nước ta cũng đang từng bước chạy tiến lên trong thị trường Điện toán đám mây.

Lợi thế về chi phí băng thông

Bài toán chi phí về băng thông khá rõ ràng, đối với các doanh nghiệp sử dụng các server ở nước ngoài, khi truyền tải dữ liệu chi phí sẽ mắc hơn rất nhiều khu sử dụng hạ tầng đám mây.

Nếu sử dụng dịch Điện toán đám mây của các doanh nghiệp cung cấp dịch vụ đám mây trong nước thì chi phí chắc chắn sẽ tiết kiệm được khá nhiều (rơi vào khoảng 50%), lý do là vì lượng server/người nhiều hơn dẫn đến việc đường truyền rẻ hơn, ổn định hơn.

Ngoài ra nếu sử dụng Điện toán đám mây tại các doanh nghiệp cung cấp trong nước thì sẽ đc hỗ trợ nhiều hơn, thậm chí là nhận được sự hỗ trợ tức thì.

Với lợi thế về chi phí, khi người dùng không cần phải lắp đặt phần cứng hay bất kỳ phần mềm nào. Ngoài ra Enterprise Mobility với nhu cầu ngày càng tăng về lưu trữ dữ liệu cũng là nhân tố góp phần cho sự phát triển của các dịch vụ đám mây trong những năm tới.

Lợi thế về “sân nhà”

Dịch vụ Hosting Việt Nam vừa tốt, vừa tiện - sao phải thuê của nước ngoài!

13 web hosting miễn phí dành cho lập trình viên

Các chuyên gia cho biết, việc xã hội ngày càng tiến bộ và cập nhật nền tiên tiến mỗi ngày là điều không thể tránh khỏi, dần dà công nghệ AI sẽ thay thế con người trong nhiều lĩnh vực và Điện toán đám mây cũng thế, chúng sẽ mang lại nhiều lợi ích.

Sau đại dịch Covid-19, thống kê cho thấy các doanh nghiệp có xu hướng sử dụng đám mây nhiều hơn, dữ liệu từ các doanh nghiệp được lưu trữ và thu về hiệu quả hơn. Vai trò thực thụ của những doanh nghiệp cung cấp Điện toán đám mây là giúp người dùng có thể dễ dàng sử dụng đám mây và hỗ trợ những lúc thật sự cần thiết.

Ông Vũ Minh Trí – Chủ tịch Câu lạc bộ Điện toán đám mây và Trung tâm dữ liệu Việt Nam cho hay: “Phải hướng đến các giải pháp cụ thể cho doanh nghiệp. Trong đó, giải các bài toán cho doanh nghiệp hiện nay như giảm chi phí”. Trên thực tế, đây cũng là mục tiêu mà các doanh nghiệp cung cấp các hướng đến, đó là chủ động thiết kế giải pháp Điện toán đám mây cho các ngành có nguồn dữ liệu khổng lồ cần lưu trữ như ngân hàng, bất động sản, bảo hiểm, xây dựng…

Câu lạc bộ Điện toán đám mây và Trung tâm dữ liệu Việt Nam là câu lạc bộ được lập nên với 12 thành viên có chuyên môn trong lĩnh vực Điện toán đám mây với sứ mệnh lan tỏa kiến thức về thị trường Thị trường điện toán đám mây & Lưu trữ web, chia sẻ của những doanh nghiệp về việc sử dụng đám mây.

Ông Trí cho hay: “Đồng thời, là nơi quy tụ những chuyên gia hàng đầu về cloud tại thị trường Việt Nam, chúng tôi cũng muốn tư vấn cho Chính phủ những định hướng phát triển cloud trong tương lai”.

Lợi thế kết hợp công nghệ AI và Điện toán đám mây sớm

Việc kết hợp công nghệ AI và Điện toán đám mây là một nước khá thông minh của giới công nghệ trong thế giới. Các chuyên gia trên thế giới đánh giá thị trường Thị trường điện toán đám mây & Lưu trữ web 2023 là: “Việt Nam đang trong thời điểm sớm để triển khai trí tuệ nhân tạo (AI). Điều đó sẽ giúp Việt Nam có không gian để phát triển, thay đổi và ứng dụng AI trong tương lai”.

Vì thế việc có thể sớm nhận thức và triển khai kế hoạch dự án kết hợp giữa công nghệ AI và Điện toán đám mây sẽ là lợi thế lớn nhất của Việt Nam so với thế giới. Dù Việt Nam chỉ là một thị trường với quy mô không lớn nhưng với bước đi sớm như thế này thì trong tương lai thị trường Điện toán đám mây sẽ phát triển nhanh chóng.

Hiện nay thị trường Điện toán đám mây của Việt Nam đã có khả năng tính toán, tiếp nhận và xử lý dữ liệu… Có thể nói Điện toán đám mây Việt Nam đã trang bị đủ và sẵn sàng cho việc bùng nổ.

Tổng thư ký Hiệp hội Internet Việt Nam Vũ Thế Bình dự đoán trong 2-3 năm tới, thị trường Điện toán đám mây và Trung tâm dữ liệu tại Việt Nam sẽ sôi động và có lẽ sẽ đóng góp lớn cho quá trình chuyển đổi số của các doanh nghiệp nói riêng và của đất nước nói chung.

Có thể bạn muốn xem thêm:

Xem thêm Top công việc IT tại TopDev!

CSS Box Model – Các cách hiển thị element với thuộc tính display

Bài viết được sự cho phép của tác giả Lương Văn Phúc

Đây là bài viết cuối trong series về CSS Box Model của mình. Nếu như các bài viết trước tập trung phân tích sâu về một element và các thuộc tính của nó, thì bài viết này sẽ giúp bạn có cái nhìn bao quát hơn về mối quan hệ giữa các element trên trang web, chúng đẩy nhau hay hút lại với nhau như thế nào, từ đó giúp bạn có thể layout được các element tới những vị trí một cách chính xác nhất.

Bạn có thể theo dõi bài viết phần 1 và 2 tại đây:

Phần 1: CSS Box Model – Cơ bản dành cho người mới bắt đầu
Phần 2: CSS Box Model và box-sizing: border-box là gì vậy?

Block và Inline

Có lẽ hầu hết các bạn đều đã quen với 2 loại box cơ bản này rồi: block và inline. Nếu bạn nào không nhận ra chúng, thì có thể các bạn sẽ nhận ra dòng CSS ví dụ như display: block và display: inline

Vậy block và inline nó khác nhau thế nào, một thẻ p nó khác gì một thẻ span? Hãy cùng nhau phân tích một chút lý thuyết để hiểu rõ hơn nhé.

Nếu một element có thuộc tính display là block, thì nó sẽ:

Element sẽ rớt xuống một dòng mới.
Element sẽ tự nở rộng ra tối đa, cho đến khi nào lấp đầy khoảng trống của container đang chứa nó. Thông thường chúng ta sẽ thấy kết quả là element sẽ có chiều rộng bằng với container cha của nó.
Các thuộc tính width và height đều có tác dụng lên element (tất nhiên là để thay đổi chiều rộng và cao của nó).
Padding, margin và border (nếu có) của element sẽ đẩy các element xung quanh ra xa nó.

Có nhiều thẻ mặc định đã là block rồi, ví dụ như p, h1, h2, div, nên mặc định các thẻ đó sẽ biểu hiện với các tính chất như mô tả bên trên. Đương nhiên khi chúng ta gọi là “mặc định”, điều đó có nghĩa là chúng ta có thể thay đổi.

Tiếp theo, nếu một element có thuộc tính display là inline, thì nó sẽ:

Element sẽ không rớt xuống dòng mới trên trang.
Các thuộc tính width và height sẽ không có tác dụng, nên nếu bạn cố gắng gán kích thước cho các inline element thì sẽ vô ích thôi.
Padding, margin, border ở hướng dọc (top và bottom) vẫn có tác dụng nhưng sẽ không làm đẩy các inline element khác ra xa nó.
Padding, margin, border ở hướng ngang (left và right) vẫn có tác dụng và vẫn sẽ đẩy các inline box khác ra xa nó.

Một ví dụ đơn giản là dễ thấy nhất:

Block direction và Inline direction

Nếu nói về block và inline mà không nói về hướng mà chúng được sắp đặt thì hơi thiếu sót. Tuy nhiên vấn đề này cũng có nhiều thứ để bàn (nằm ngoài mục đích của bài viết), nên mình chỉ nêu vài ý cơ bản ở đây.

Mặc định khi bạn vào một trang web, thì hầu hết chúng có writing-mode là horizontal-tb, có nghĩa là content sẽ được sắp xếp từ trái sang phải (horizontal) và từ trên xuống dưới (tb: top bottom). Thường thì chúng ta ít để ý đến điều này, vì ngôn ngữ tiếng Việt và tiếng Anh đều đi theo hướng như vậy.

Với block direction, các block sẽ được sắp xếp chồng lên nhau chiều dọc (element sau nằm dưới element trên). Còn với inline direction, các element sẽ được sắp xếp cạnh nhau theo hàng ngang.

CSS Box Model - Các cách hiển thị element với thuộc tính display

Bổ sung với mục đích tham khảo: với writing-mode là vertical thì hướng của các block sẽ đi theo chiều ngang. Tuy nhiên bản chất cách hoạt động của nó cũng không thay đổi.

Thuộc tính hiển thị bên trong (inner) và ngoài (outer)

Bạn có biết một element tồn tại 2 loại thuộc tính hiển thị là bên trong và bên ngoài không? Khi bạn viết display: block;, có 2 thứ sẽ diễn ra:

Outer: bạn đang khai báo rằng element của bạn là một block khi tương tác với các element xung quanh.
Inner: bạn đang khai báo rằng các element con trực tiếp của nó sẽ được layout theo cách bình thường như mô tả ở trên (gọi là normal flow)

Bạn có thấy lạ lẫm không? Một ví dụ khác, khi bạn viết display: flex;, cũng có 2 thứ sẽ diễn ra:

Outer: bạn đang khai báo rằng element của bạn là một block khi tương tác với các element xung quanh.
Inner: bạn đang khai báo rằng các element con trực tiếp của nó sẽ trở thành các flex item và được layout dựa trên các quy tắc của flexbox.

Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser?

Cách đặt tên class của element trong HTML sao cho phù hợp?

Ví dụ

Hãy cùng xem qua một ví dụ đơn giản sau nhé:

<p>Lorem ipsum dolor sit amet, <span class="child">consectetur adipiscing</span> elit. Integer sed pellentesque justo...</p>
<p>Aliquam nulla nisl, rutrum id lacus quis, tempor efficitur magna...</p>

.child {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  padding: 50px;
  margin: 50px 0;
}

Ở ví dụ trên, thẻ span mặc định là một inline box, vì thế:

Nó nằm cùng dòng với các content khác
Width và height hoàn toàn bị bỏ qua. Lưu ý code CSS không lỗi trong trường hợp này, nó chỉ không có tác dụng mà thôi.
Với padding là 50px, bạn thấy nó đẩy các chữ xung quanh ra xa theo chiều ngang, nhưng chiều dọc thì không đẩy, mặc dù nó vẫn tồn tại (bằng chứng là màu nền của nó)
Với margin top và bottom là 100px, nó hoàn toàn bị bỏ qua.

Tiếp theo, chúng ta thử chuyển nó về block xem sao:

.child {
  display: block; /* <= thêm dòng này */
  background-color: lightblue;
  width: 100px;
  height: 100px;
  padding: 50px;
  margin: 50px 0;
}

Vì là block nên nó tự rớt xuống một dòng mới.
Width và height lúc này có tác dụng.
Với padding là 50px, bạn thấy nó đẩy các chữ xung quanh ra xa theo cả chiều ngang lẫn chiều dọc
Margin lúc này đã có tác dụng.

display: inline-block

Trong một số trường hợp, bạn sẽ muốn dung hòa các hiệu ứng của block và inline. Chẳng hạn như bạn vẫn muốn tùy chỉnh kích thước của element với width và height, nhưng bạn vẫn muốn nó nằm inline với các element khác. Với display: inline-block, bạn sẽ giúp element có một số tính chất của cả block và inline.

Kết luận

Bài viết cũng khá dài rồi nên mình không muốn trình bày thêm những vấn đề liên quan khác ví dụ như “Margin collapsing”. Như bạn đã thấy, kiến thức cơ bản về layout thật ra rất đơn giản nhưng có thể vì không được dạy ở trường đại học (thời của mình) nên rất ít bạn có thể hiểu và áp dụng một cách đúng đắn. Tuy nhiên nó cũng khá đơn giản thôi nên các bạn hãy dành thời gian để hiểu rõ về nó nhé.

Bài viết gốc được đăng tải tại grab-cv.com

Có thể bạn quan tâm:

Xem thêm TOP tuyển dụng lập trình IT mới nhất tại TopDev

Dự thi Quiz 04 của Kambria Code Challenge với tổng giải thưởng lên đến 700$

Đăng ký dự thi Quiz 04 của Kambria Code Challenge ngay hôm nay với tổng giải thưởng lên đến $700 cùng nhiều cơ hội nghề nghiệp.

👉 Đăng ký Quiz 04: https://bit.ly/Standard-Quiz-04-Bounty

Các coder tham gia Quiz 04 Kambria Code Challenge sẽ có cơ hội đạt giải thưởng với tổng trị giá ~$700.

Giải thưởng của Standard Quiz 04 Bounty:

🔹Giải quán quân: $75 + 79.000 KAT

🔹1 x Giải Á quân 1: $50 + 52.000 KAT

🔹2 x Giải Á quân 2: $25 + 26.000 KAT

Giải thưởng của Special Quiz 04 Bounty:

🔹Giải quán quân: $125 + 85,000 KAT

KAT là token sử dụng trên nền tảng của Kambria – Blockchain ủy quyền đầu tiên trên thế giới cung cấp mã nguồn mở robot và hệ sinh thái AI.

Ngoài ra, khi tham gia Quiz 04, các bạn sẽ được:

1️⃣ Kiểm tra kiến thức của bạn về AI

2️⃣ Luyện tập. Chứng minh. Nhận thưởng!

3️⃣ Kết nối với các đối tác của Kambria

4️⃣ Cơ hội nghề nghiệp

5️⃣ Thử thách bản thân

Quiz 04 tập trung vào chủ đề: “Reinforcement learning (Học Tăng Cường)” – một lĩnh vực con của học máy. Cuộc thi sẽ bắt đầu vào lúc 14:00, thứ 7 ngày 22/08/2020.

Tháp nhu cầu Maslow và ứng dụng trong quản lý nhân sự

Ảnh hưởng từ đại dịch toàn cầu Covid -19, nhu cầu tuyển dụng nhân sự ngày được quan tâm hơn. Đặc biệt, sự cạnh tranh không chỉ đến từ phía ứng viên, mà các doanh nghiệp cũng cần có nhiều giải pháp hiệu quả trong quá trình tuyển dụng nhân sự. Trong số đó, việc ứng dụng tháp nhu cầu Maslow trong chiến lược nhân sự được đánh giá là cách thức hiệu quả trong việc tuyển dụng, thu hút và giữ chân nhân tài.

Cùng TopDev phân tích những điều thú vị xoay quanh tháp nhu cầu Maslow qua bài viết dưới đây.

Tháp nhu cầu Maslow là gì?

Tháp nhu cầu Maslow là một lý thuyết nền tảng quan trọng. Thuyết Maslow nhà tâm lý học Abraham Maslow thiết lập dựa trên hình thức phân tầng các cấp bậc. Việc phát triển và hoàn thiện các nội dung dưới dạng phân tầng tạo ra sự thuận lợi trong việc tiếp thu và vận dụng lý thuyết trong thực tiễn.

Maslow là lý thuyết nền tảng có giá trị nhất dưới góc nhìn tâm lý học. Đồng thời, việc ứng dụng tháp nhu cầu Maslow trong quản trị nhân sự có ý nghĩa lớn vì nó trở thành một công cụ đầy giá trị giúp nhà quản lý khai thác, sử dụng nguồn nhân lực một cách hiệu quả nhất.

Cấu trúc về hệ giá trị phân lập của tháp nhu cầu Maslow

Dựa trên những nhu cầu khác nhau, tháp Maslow được phân thành 5 mức độ cụ thể tương ứng từ thấp đến cao. Những nhu cầu cao hơn được thỏa mãn khi nhu cầu thấp hơn được đáp ứng.

1. Các giá trị mức thấp:

Nhu cầu sinh lý (Physiological Needs): Những hoạt động thuộc về tâm lý, hoạt động, trạng thái,… làm con người có thể tồn tại như: Ăn, uống, ngủ nghỉ, đi lại,…

Nhu cầu về an toàn, an ninh (Safe/Security Needs): An toàn sức khỏe, tài sản, trí tuệ, tâm lý,…

2. Các giá trị mức cao:

Nhu cầu xã hội (Belonging Needs): Nhu cầu về những mong muốn được gắn bó và quan tâm. Biểu hiện là các giao tiếp cộng đồng, người thân, bạn bè, mối quan hệ đồng nghiệp,..

Nhu cầu tôn trọng (Esteem Needs): Nhu cầu nhận được sự nể trọng từ những người cùng tổ chức, xã hội,…

Nhu cầu thể hiện bản thân (Self-actualization): Đây được đánh giá là nhu cầu đỉnh cao của thang nhu cầu Maslow. Đó là mong muốn được thể hiện và khẳng định giá trị của bản thân mình trong cuộc sống.

Mỗi người trong chúng ta đều tồn tại 5 nhu cầu này. Muốn thay đổi về hành vi con người thì nhất thiết phải tác động vào nhu cầu cá nhân trước.

Ứng dụng tháp nhu cầu Maslow trong tuyển dụng nhân sự

Để áp dụng tháp Maslow trong quản trị nhân sự, việc nghiên cứu và xác định rõ các nhu cầu của nhân viên rất quan trọng. Vì chỉ khi nắm bắt được tâm lý con người và những chuyển biến phức tạp trong phạm trù đó, bạn mới có thể thiết lập một chiến lược thành công nhất.

Nhu cầu về sinh lý

Nhà quản lý nhân sự cần nắm bắt được những mong muốn của nhân viên trong công việc. Cụ thể, lương thưởng và phúc lợi là vấn đề đầu tiên mà ứng viên quan tâm. Nó quyết định khả năng ứng viên có duy trì được cuộc sống được hay không?

Nhà quản lý hoàn toàn có thể giải quyết vấn đề này bằng cách cách đưa ra chính sách lương tốt, chế độ đãi ngộ công bằng – minh bạch dựa trên các tiêu chí khác nhau như: Chỉ số đo lường hiệu suất làm việc – KPI, thái độ làm việc và những mối quan hệ xã hội.

Xem thêm: KPI là gì? Kinh nghiệm triển khai KPI hiệu quả

Ngoài ra, nhà quản lý nên đáp ứng nhu cầu cơ bản của nhân viên bằng cách đảm bảo phúc lợi như: Thưởng sáng kiến, thưởng doanh số, lương tháng 13, chương trình chăm sóc sức khỏe nhân viên, du lịch hàng năm…và cung cấp các miễn phí các bữa ăn trưa hoặc ăn giữa ca, party từng quý cho nhân viên.

Nhu cầu về sự an toàn, an ninh

Nhu cầu về sự an toàn, muốn được bảo vệ của nhân viên thường sẽ xảy đến trong một khoảng thời gian. Tất nhiên những gì nhân viên muốn thấy là sự rõ ràng về hợp đồng lao động cũng như các chế độ y tế bảo hiểm.

Để đáp ứng nhu cầu này, một số giải pháp mà nhà quản lý có thể lựa chọn như:

– Tạo lập không gian làm việc tự nhiên, an toàn với đầy đủ những tiện nghi cần thiết.

– Đồng bộ các quy chế về tăng ca, chế độ lương thưởng hợp lý nếu có OT

– Tuân thủ và đáp ứng đúng với các tiêu chuẩn nhằm bảo vệ an toàn lao động. Cụ thể như trang bị đồng phục bảo hộ lao động, xây dựng hệ thống chữa cháy khẩn cấp, các thiết bị hỗ trợ khi thực hiện các công việc nguy hiểm

– Đảm bảo lượng khối lượng về các đầu công việc, có sự công bằng xét trên khía cạnh sự nỗ lực.

– Thiết lập không gian phát triển về thể chất, tâm lý cho nhân viên; tạo điều kiện giúp nhân viên thư giãn, rèn luyện thể dục thể thao.

Nhu cầu xã hội

Nhu cầu xã hội là những mong muốn về sự thuộc về. Có thể hiểu sự giao tiếp xã hội, những mong muốn về tình cảm, sự gắn bó,… Vậy làm thế nào để đáp ứng được nhu cầu xã hội? Mấu chốt của vấn đề thành công trong việc phát triển nhu cầu xã hội chính là sự tương tác.

Tạo điều kiện để nhân viên mở rộng giao lưu giữa các bộ phận thông qua các hoạt động.
Cho nhân viên cơ hội bày tỏ những suy nghĩ từ các buổi review trong các quý.
Tạo môi trường tương tác hiệu quả thông qua các dịp lễ. Ví dụ: 8/3, ngày Phụ Nữ Việt Nam, sinh nhật nhân viên,…

Nhu cầu được tôn trọng

Khi đã gắn bó đủ lâu tại một doanh nghiệp, nhân viên họ mong muốn được chia sẻ, trình bày, góp tiếng nói của mình cho sự phát triển chung. Đồng thời, sự công nhận về năng lực, sự đề bạt và thăng tiến trở thành một nhu cầu lớn của nhân viên. Vì họ luôn mong rằng những nỗ lực của mình sẽ được ghi nhận.

Xem thêm: Đồng hành và gắn bó với một công ty, bao lâu là đủ?

Để đáp ứng nhu cầu này, nhà quản lý nên :

Quan tâm đến việc xây dựng lộ trình phát triển cho nhân viên phụ ứng với khả năng của họ. Tạo cơ hội để họ khẳng định, cạnh tranh công bằng để chứng minh giá trị bản thân.
Thiết lập chính sách đánh giá, nhận xét nhân viên theo khung tiêu chí: chuyên môn, kỹ năng, thái độ,…
Hoàn thiện các chính sách tuyên dương khen ngợi cho những nhân viên có thành tích nổi bật.

Nhu cầu được thể hiện bản thân

Lương bổng là thứ quan trọng. Tuy nhiên, đến một thời điểm nào đó, nó không phải thứ giữ chân một nhân viên lâu dài. Vào thời điểm chín muồi của sự nghiệp, điều họ muốn chính là niềm vui trong công việc. Đây cũng chính là thời điểm quan trọng của việc sống vì những đam mê.

Thế đâu là những cách thức giúp đáp ứng nhu cầu thể hiện bản thân của nhân viên:

Tạo cơ hội cho các nhân viên phát triển khả năng, vận dụng sáng tạo vào công việc. Những dự án nên được giao cho từng nhân viên phù hợp với năng lực của họ. Trên hết, họ rất cần sự dẫn dắt, hỗ trợ từ những người giàu kinh nghiệm hơn.
Khuyến khích họ đưa ra những đóng góp vào quá trình phát triển các hoạt động của tổ chức
Tạo điều kiện bộc lộ tiềm năng, thể hiện các lý tưởng dưới các hình thức khác nhau: ổn định, giao quyền.

Lời kết

Tâm lý nhân sự là một vấn đề khá thú vị. TopDev không qua phân tích sâu vào vấn đề tâm lý mà chỉ tri nhận nó dưới một khía cạnh nhỏ trong chuyên môn tâm lý – Tháp nhu cầu/thang nhu cầu Maslow.

Thang Maslow giúp cho nhà quản lý nhận ra được các nhu cầu tâm lý và mức độ của nó. Vì thế, không quá khó để họ xây dựng các chiến lược phù hợp cho từng nhân viên. Nhờ thuyết Maslow, người lãnh đạo đã hiểu rõ hơn về mong muốn của nhân viên của mìnH. Đồng thời, giúp họ phát triển bản thân toàn diện hơn trên con đường chinh phục đỉnh cao sự nghiệp.

Có thể bạn quan tâm:

Xem thêm Top Việc làm it trên TopDev

Tin tức CSS tháng 8, 2022 có gì mới

Bài viết được sự cho phép của tác giả Lương Văn Phúc

Frontend nói chung và CSS nói riêng vẫn đang được phát triển liên tục. Ngoài những kiến thức cơ bản, bạn cũng nên cập nhật những kĩ thuật/tin tức mới nhất để không bị đi sau thị trường nhé. Nếu bạn là một người mong muốn cập nhật liên tục những kĩ thuật mới nhất, tin tức mới nhất về CSS, thì bài viết này dành cho bạn.

Trong bài viết này, hãy cùng mình điểm qua một vài kĩ thuật CSS mới đang được phát triển. Lưu ý là những kĩ thuật này đang được phát triển, nghĩa là chúng chỉ mới trong giai đoạn beta (thử nghiệm) nên chưa được hỗ trợ bởi các browser hiện tại đâu nhé.

Flexbox Gaps

Điều này có lạ lẫm với bạn không? Với mình thì nó thật sự lạ lẫm nhưng cũng không ngạc nhiên lắm. Từ trước đến nay, CSS luôn có những cái gọi là “trick” được truyền tay nhau để giúp thỏa mãn được các thiết kế từ các bạn designer, và CSS luôn cố gắng tạo ra những thuộc tính native để thay thế cho các trick đó. “Gap” là một trong số chúng.

Mà “Gap” là gì vậy? Thật ra nó chỉ đơn giản là một vùng trống giữa các element mà thôi, chả có gì đặc biệt đúng không nào.

Tuy nhiên ngày xưa, và cả hiện tại nữa, để tạo ra các gap như vậy, chúng ta thường dùng margin. Có thể bạn sẽ thắc mắc rằng “margin mà gọi là trick à”, thì bạn đã đúng nhé, margin không phải là trick nhé. Tuy nhiên nếu dùng margin (ví dụ mỗi item sẽ có margin-right và margin-bottom), bạn thường sẽ phải clear margin của item cuối cùng, nếu bạn không muốn có một vùng margin thừa ở cuối (còn rất nhiều cách khác để xử lý margin của item cuối). Và lúc này, giá như có một thuộc tính định nghĩa ra khoảng cách giữa các item thì tốt biết mấy nhỉ.

.container {
  display: inline-flex;
}

.item {
  width: 113px;
  height: 74px;
  margin-right: 20px;
  background-color: #F7B500;
  border-radius: 8px;
}

Và CSS Grid ra đời để giải quyết các vấn đề về tạo grid chỉ với CSS, kèm theo là các thuộc tính gap, column-gap, row-gap. Tên thuộc tính rất rõ rồi đúng không nào, mình sẽ không nói thêm về nó, vì nó đã tồn tại được một thời gian rồi chứ không còn mới mẻ gì.

Nhưng, đó là những thuộc tính của CSS Grid nhé, còn với Flexbox thì không, bạn vẫn phải dùng margin (hoặc các cách khác) để tạo gap. Tin vui là thuộc tính gap sẽ được áp dụng cho Flexbox trong tương lai gần nhé. Bạn tham khảo danh sách các browser đã support Flexbox gap tại đây: Can I Use

.container {
  display: inline-flex;
  gap: 20px;
}

.item {
  width: 113px;
  height: 74px;
  background-color: #F7B500;
  border-radius: 8px;
}

Aspect Ratio Unit

Một câu hỏi nhỏ dành cho bạn như sau: bạn hãy tạo ra một thẻ div với kích thước 100×100 px. Đơn giản phải không nào

.item {
  width: 100px;
  height: 100px;
}

Hãy nâng cấp câu hỏi trên khó hơn một tí: với thẻ div 100×100 px trên, bạn hãy biến nó thành 200×200 px, nhưng chỉ được thay đổi chiều rộng mà không được thay đổi chiều cao. Hay nói cách khác, bất kể width là bao nhiêu, hãy làm height của nó bằng với width. Khó hơn rồi đúng không nào.

Để làm được điều đó, chúng ta thường sử dụng trick theo đúng nghĩa đen luôn là padding hack.

.item {
  width: 200px;
}

.item::after {
  content: '';
  display: block;
  padding-top: 100%;
}

Và thuộc tính aspect-ratio ra đời để giải quyết vấn đề này.

.item {
  width: 200px;
  aspect-ratio: 1 / 1;
}

Thuộc tính này hiện chưa được support chính thức bởi browser, vì thế các bạn hãy cẩn thận trước khi sử dụng cho production nhé. Để thử nghiệm cho biết (như hình chụp của mình ở trên), bạn có thể bật cờ “Experimental Web Platform features” của Chrome để thử các tính năng mới.

5 điều phiền toái nhất của CSS

7 đơn vị CSS có thể bạn không biết

Native Masonry

Bạn đã từng dựng layout như vầy chưa. Nó được gọi là Masonry layout. Với CSS đơn thuần, sẽ rất khó để bạn có thể dựng được layout như vầy, nhưng không hẳn là không thể, chỉ là bạn sẽ mất khá nhiều công sức thôi, bạn tham khảo các cách sau:

Phân trang web ra hẳn 3 column, rồi tính toán để phân chia các tấm ảnh vào từng column
Tính toán trước ở backend (hoặc hardcode) kích thước các tấm ảnh theo một quy tắc của bạn. Sau đó sử dụng position absolute + một tí javascript
Tự viết javascript thuần để tính toán và sắp xếp các tấm ảnh
Sử dụng thư viện hỗ trợ như https://masonry.desandro.com/

Với sự ra đời của CSS Grid, việc tạo Masonry layout đã đơn giản hơn, tuy nhiên nó cũng không phải là giải pháp “native”. Bản chất CSS Grid là để tạo grid, chứ không phải tạo ra Masonry layout.

Tuy nhiên, team Firefox đang thử nghiệm tính năng tạo Masonry layout chính thức với CSS Grid. Bạn có thể thử nghiệm với Firefox Nightly, bật cờ layout.css.grid-template-masonry-value.enabled lên.

::marker

Bạn đã bao giờ nhận task đổi màu cho marker chưa? Nếu dùng color, bạn sẽ đổi màu cho cả marker và text bên trong.

Task trên cũng khá đơn giản, và có rất nhiều trick để làm được việc đó như tạo marker giả với ::before chẳng hạn. Hoặc dùng icon và cho position: absolute

Giờ đây bạn có thể style cho marker dễ dàng hơn với ::marker

li::marker {
  color: blue;
}

li:last-child::marker {
  content: "😋";
}

Kết bài

CSS ngày càng phát triển không ngừng, những tính năng mới vẫn liên tục được cập nhật (và vứt vào sọt rác). Vì vậy bạn hãy cẩn thận trước khi quyết định sử dụng nó nhé.

Thêm nữa, một trang web gối đầu giường dành cho bất kì frontend developer nào là trang Can I Use. Nếu bạn chưa biết đến trang này, thì hãy bookmark nó ngay nhé.

Bài viết gốc được đăng tải tại grab-cv.com

Có thể bạn quan tâm:

Xem thêm các việc làm it HCM hấp dẫn tại TopDev

CSS Box Model và box-sizing: border-box là gì vậy?

Bài viết được sự cho phép của tác giả Lương Văn Phúc

Bài viết này là phần 2 của series về box model của mình. Bạn có thể theo dõi phần 1 và phần 3 (cuối) tại:

Phần 1: CSS Box Model – Cơ bản dành cho người mới bắt đầu

Phần 3: CSS Box Model – Các cách hiển thị element với thuộc tính display

Lý do mình chọn viết về CSS Box Model

Trong thế giới của CSS hay web layout nói chung, có rất nhiều thứ cơ bản mà một lập trình viên giao diện cần nắm vững. Nhưng mình chọn Box Model để giới thiệu đầu tiên vì nó rất cơ bản nhưng lại vô cùng quan trọng trong việc layout. Mình từng thấy các bạn junior khác chỉ layout kiểu đối phó (thử sai), viết css theo bản năng hoặc kinh nghiệm cá nhân, miễn sao kết quả giống design hoặc chạy được là được.

Việc này có rất nhiều tác hại:

Các bạn sẽ tự hình thành các kinh nghiệm sai và sử dụng nhiều lần về sau.
Sẽ có những bug layout tiềm ẩn và chỉ đợi 1 viên gạch bị vỡ, cả layout sẽ vỡ; bạn sẽ loay hoay không biết nên fix từ đâu hoặc chỉ cố gắng tìm cách lấp vá layout.
Code của bạn sẽ rất khó maintain sau này, đặc biệt là khi có người mới vào.
Code của bạn sẽ bị audit (nếu có) và được đánh giá kém nếu có một bên thứ 3 nhìn vào.
Kiến thức không vững cũng rất dễ bị vặn vẹo trong các buổi phỏng vấn.

Trong các bài tiếp theo, mình sẽ viết về những chủ đề cơ bản và cũng rất quan trọng khác của CSS như Inheritance, Cascade, Specificity, BFC, Flexbox, Grid…

5 điều phiền toái nhất của CSS

CSS Framework có thật sự cần thiết như chúng ta nghĩ?

Bài viết này dành cho ai?

Bạn hãy tưởng tượng mình đang tham gia một buổi phỏng vấn và được hỏi câu “Box model trong CSS là gì?”. Nếu bạn cảm giác không tự tin trả lời câu hỏi này, hoặc chỉ trả lời kiểu cụt ngủn “nó nói về padding, margin, border của mấy cái element trên trang web”, thì bài viết này là dành cho bạn.

Mình mặc định bạn đã có chút kiến thức cơ bản về CSS nên sẽ không giải thích chi tiết những phần ngoài phạm vi bài viết.

CSS Box Model là gì?

Có một điều nếu bạn luôn phải nhớ là bất kì element nào trên trang web đều là một khối hình chữ nhật, kể cả các hình tròn, hình oval, hay các đoạn text dài ngắn khác nhau:

CSS Box Model và box-sizing: border-box là gì vậy?

Vậy để giúp browser biết được một element rộng/cao bao nhiêu để render cho chính xác và đúng ý của developer, box model là thứ mà browser dựa vào để tính toán. Nói lý thuyết hơn, box model trong CSS chỉ đơn giản là một tập các quy tắc và công thức cộng trừ để giúp browser xác định được chiều rộng, cao (và một số thứ khác) của một element.

Các thành phần của Box Model

Như mình chia sẻ ở trên, bất kì element nào cũng là một khối hình chữ nhật, và nó bao gồm 4 thành phần: content, padding, border, và margin (tốt nhất là không nên Việt hóa những từ này 😃 ). Mỗi thành phần đều có một đường biên bên ngoài tương ứng: content edge, padding edge, border edge, margin edge.

content: là vùng chứa nội dung của một element, với chiều rộng/cao được xác định qua thuộc tính width và height. Vùng này thường chứa text, hình ảnh, video…
padding: cho biết độ rộng của vùng padding bao quanh vùng content
border: cho biết độ rộng (và style) của border bao quanh vùng padding
margin: cho biết độ rộng của vùng margin bao quanh vùng border

Là một developer, bạn có thể dễ dàng xem được các thuộc tính này của các element rất trực quan thông qua DevTools của browser.

Công thức tính đơn giản mặc định:

Chiều rộng của một element = chiều rộng content width + padding trái + padding phải + border trái + border phải
Chiều cao của một element = chiều cao content height + padding trên + padding dưới + border trên + border dưới

Các thuộc tính css tương ứng:

Chiều rộng/cao của content: width, height
Padding: padding, padding-left, padding-right, padding-top, padding-bottom
Border: border, border-left, border-right, border-top, border-bottom

.element {
  width: 80px;
  height: 100px;
  padding: 30px 20px 40px;
  margin: 30px auto;
  border: 1px solid black;
}

Có thể bạn để ý mình không liệt kê margin trong công thức. Mặc dù margin là một phần của box model và đi kèm với element, nhưng nó không được tính vào chiều rộng/cao của element.

Có bạn từng hỏi mình margin và padding khác nhau thế nào. Mình sẽ có một bài viết phân biệt chi tiết sau, nhưng nói đơn giản thì margin là vùng ở bên ngoài border, còn padding là vùng bên trong border, và khi nào dùng margin/padding cũng là một điều căn bản mà các bạn developer cần nắm vững (bạn có thể google để biết thêm về sự khác nhau giữa chúng).

Tất cả chỉ là quá khứ, hãy cùng quay về hiện tại:

Vấn đề từng gây khó chịu 1:

Khi layout một trang web, chắc chắn sẽ có những lúc bạn tăng giảm padding của một element, hay thêm border cho nó đẹp hơn (theo thiết kế mới của designer chẳng hạn). Vấn đề phát sinh là khi bạn thực hiện các thay đổi trên, tổng chiều rộng của element sẽ thay đổi và làm cả layout bị xê dịch vì những thay đổi đó.

Ví dụ cho dễ hiểu:

Element (chiều rộng) = 200px (content) + 40px (padding) = 240px

Khi bạn tăng padding lên 60px, chiều rộng của element sẽ tăng lên 260px, và sẽ đẩy những thứ xung quanh làm thay đổi layout. Để sửa lỗi này, bạn phải giảm chiều rộng của content còn 180px, để đảm bảo tổng chiều rộng vẫn là 240px. Giá như content nó tự co giãn để đảm bảo tổng chiều rộng không đổi thì tốt biết mấy.

Vấn đề từng gây khó chịu 2:

Một lỗi layout thường gặp khác là chiều rộng của element con bị tràn ra khỏi cha

.parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 2px solid greenyellow;
}

.child {
  width: 300px;
  height: 200px;
  padding: 30px;
  color: #ffffff;
  background-color: steelblue;
}

Giải pháp hiện tại

Box model được nâng cấp (rất lâu rồi) với thuộc tính box-sizing, 2 value chính là: content-box và border-box

content-box: tất cả element đều được gán mặc định là content-box, và cũng là những gì mình phân tích ở trên. Lưu ý lại, thuộc tính width và height là để định nghĩa chiều rộng/cao của phần content mà thôi nhé.
border-box: thuộc tính width và height sẽ tự động bao gồm luôn content, padding và border, còn chiều rộng của content sẽ tự động co giãn tương ứng nếu chúng ta thay đổi padding và border, đảm bảo kích thước của cả element sẽ không thay đổi, đồng nghĩa với việc layout tổng sẽ không thay đổi.

Và khi box-sizing ra đời, “rất hiếm” developer nào (quan điểm cá nhân) muốn quay lại quá khứ và sử dụng box-sizing với value là content-box nữa trừ những trường hợp đặc biệt của project (Cho mình biết nếu bạn có trường hợp nào cần dùng content-box nhé)

Công thức tính theo `box-sizing: border-box`:

Chiều rộng của một element = width = chiều rộng content (auto) + padding trái + padding phải + border trái + border phải
Chiều cao của một element = height = chiều cao content (auto) + padding trên + padding dưới + border trên + border dưới

Trang web có cả nghìn element, liệu việc thêm thuộc tính box-sizing vào từng element có khả thi?

Tất nhiên là chúng ta sẽ không phải thêm thủ công vào từng element, với sự giúp đỡ của Universal selector *, chúng ta chỉ cần một dòng CSS đơn giản:

* {
  box-sizing: border-box;
}

/* Hoặc cẩn thận hơn */
*, *::before, *::after {
  box-sizing: border-box;
}

Với đoạn code trên, tất cả element sẽ được canh chỉnh theo border-box, và đương nhiên bạn vẫn có thể dễ dàng override cho từng element cụ thể mà bạn muốn

.content-element {
  box-sizing: content-box;
}

Lưu ý

Để không làm bài viết phức tạp hơn, mình cố gắng trình bày những trường hợp đơn giản và điển hình nhất và bỏ qua một số chi tiết khác. Ví dụ: Chiều rộng/cao của element còn bị ảnh hưởng bởi nhiều yếu tố khác như min-width, max-width, min-height, max-height, các hiệu ứng của flexbox…

Lời kết

Cảm ơn bạn vì đã đọc đến tận cuối bài. Hi vọng bài viết đã bổ sung thêm phần nào kiến thức về CSS Box model cho bạn.

Box model là nội dung khá cơ bản và được sử dụng hầu như mỗi ngày của bất kì frontend developer nào. Vì thế nếu bạn chưa nắm vững nó thì hãy dành thời gian tìm hiểu thêm nhé.

Bài viết gốc được đăng tải tại grab-cv.com

Có thể bạn quan tâm:

Xem thêm các vị trí tuyển dụng it lương cao tại TopDev

Dịch vụ thị trường Trí tuệ nhân tạo AI Landscape

Thị trường Trí tuệ nhân tạo AI so với những quốc gia trên thế giới nói chung và Đông Nam Á nói riêng thì thị trường Trí tuệ nhân tạo AI được xem là khá “lạc hậu” so với các nước bạn.

Để có thể biết thêm chi tiết tốc độ tăng trưởng của thị trường Trí tuệ nhân tạo AI, TopDev xin gửi đến bạn đọc bảng báo cáo về Thị trường Trí tuệ nhân tạo Landscape 2020 với đầy đủ các số liệu cụ thể.

Trong bài viết dưới đây, TopDev sẽ phân tích tình hình thị trường Trí tuệ nhân tạo AI 2020 đã bị giúp ích như thế nào trong giai đoạn dịch Covid-19.

Xu hướng thị trường Trí tuệ nhân tạo AI 2020

Trong vài chục năm trở lại đây, Việt Nam đã cố gắng phát triển vươn lên và đã đạt được những thành tựu nhất định trong ngành.

Tuy không đạt được nhiều thành tựu lớn như nước bạn nhưng ngành Trí tuệ nhân tạo ở Việt Nam cũng đã có những bước phát triển nhanh vượt bậc trong cuộc cách mạng công nghệ.

Trong những năm tiếp theo, dự báo vẫn sẽ là những năm tập trung nguồn lực để phát triển AI. AI ngày nay đang dần đi vào trong cuộc sống của mỗi người, thay thế con người làm được nhiều hoạt động sản xuất.

Xem thêm báo cáo về Thị trường Trí tuệ nhân tạo Landscape 2020

Trong thời gian qua chính phủ đã có nhiều sự tập trung vào loại công nghệ này, đặc biệt là ở lĩnh vực ứng dụng AI vào việc chuyển giọng nói thành văn bản. Hiện tại, trí tuệ nhân tạo được đưa vào danh mục công nghệ cao ưu tiên đầu tư phát triển của chính phủ trong cuộc cách mạng 4.0, ứng dụng rộng rãi ở các lĩnh vực đa dạng hơn.

Góp sức cùng những nỗ lực của Nhà nước, các ông lớn công nghệ tại Việt Nam như FPT, Viettel cũng nghiên cứu để ứng dụng AI trong đa dạng lĩnh vực, mà trong đó có thể kể đến y tế, giao thông, hay thương mại điện tử.

Ngành học AI được trường Đại học Bách khoa Hà Nội thành lập và tuyển sinh từ năm 2019 (với điểm xét tuyển trên 27) nhằm đảm bảo nguồn nhân lực được đào tạo bài bản, và chất lượng.

Hệ sinh thái AI tại Việt Nam cũng ngày càng phong phú với các cộng đồng trong nước, nổi bật là Liên hiệp các cộng đồng AI Việt Nam với các thành viên tiêu biểu: Câu lạc bộ khoa – trường – viện công nghệ thông tin – truyền thông Việt Nam FISU; Cộng đồng nghiên cứu, triển khai và ứng dụng trí tuệ nhân tạo AI4Life; Cộng đồng chuyển đổi số – Digital Transformation; Cộng đồng Machine Learning cơ bản; Cộng đồng Google Developer; Cộng đồng Business Intelligence; Cộng đồng VietAI – trí tuệ nhân tạo Việt.

Ngoài ra, trong giai đoạn dịch bệnh bùng nổ, nhờ có công nghệ AI mà rất nhiều ứng dụng đã được ra đời để hỗ trợ cho công tác thông tin, báo cáo và công tác phòng ngừa dịch bệnh như ứng dụng Bluezone vừa được Chính phủ Việt Nam ra mắt hay đơn cử là web thông báo thời gian trực tiếp lượng người nhiễm bệnh, tử vong tại các nước trên thế giới như Kompa…

Vai trò của AI đối với thế giới được xem là vai trò chính cho sự phát triển của kinh tế, còn tại Việt Nam, vai trò của AI được nhà nước nhận định là công cụ công nghệ sẽ tạo ra sự đột phá, là công cụ chính cần được lưu tâm phát triển để thúc đẩy phát triển kinh tế, ứng dụng hiện đại.

Đến bây giờ có một số người vẫn hiểu sai về Trí tuệ nhân tạo AI, Ai không chỉ đơn thuần là công nghệ và nó còn liên quan đến nhiều lĩnh vực khác nhau như tâm lý học, khoa học, toán học, điều khiển học, kinh tế, ngôn ngữ học, triết học.

Các nhà khoa học nổi tiếng cho rằng lợi ích của AI là việc nó có thể mô tả, phân tích và lập lại chính xác các vấn đề. AI được phát triển để có tư duy, trí tuệ cơ bản như:

Có khả năng học hỏi kinh nghiệm và áp dụng tri thức
Có khả năng xác định và chọn các đặc trưng quan trọng của đối tượng hay sự kiện hoặc quá trình
Ứng xử, xử lý tình huống từ đơn giản đến phức tạp
Có cung phản xạ và phản ứng nhanh chóng và chính xác đối với các tình huống mới
Có khả năng nhận dạng hình ảnh và hiểu được ngữ nghĩa
Có thể xử lý thông tin dạng ký hiệu và thao tác với chúng
Có khả năng sáng tạo ra cái mới và có trí tưởng tượng

Tổng quan thị trường Trí tuệ nhân tạo AI 2020

Trong năm 2018, thị trường Trí tuệ nhân tạo AI có mức độ tăng trưởng 70% so với cùng kỳ năm trước đó là năm 2017, thu về doanh thu 200 tỷ USD, với sự phát triển này, Bộ trưởng Bộ Kế hoạch và Đầu tư – ông Nguyễn Chí Dũng nhận định rằng chúng ta cần thúc đẩy và phát triển công nghệ Trí tuệ nhân tạo mạnh mẽ hơn bao giờ hết để có thể thành công đột phá công nghệ trong 10 năm tiếp theo.

Ông cũng đồng thời nhận thông tin đến mọi người rằng: “Việt Nam xác định công nghệ AI là một trong các công nghệ đột phá, mũi nhọn. Để thúc đẩy phát triển AI, Chính phủ giao Bộ Kế hoạch và Đầu tư xây dựng Chiến lược quốc gia về Cuộc cách mạng công nghiệp 4.0”.

Theo ông, thị trường Trí tuệ nhân tạo AI 2020 thuộc nhóm ngành công nghệ được ưu tiên tập trung thúc đẩy phát triển. Để có thể đạt được những thành tựu mới trong ngành, chúng ta cần tập trung hơn trong việc đào tạo nhân lực, chủ yếu là:

Nâng cao trình độ đội ngũ giảng viên, người hướng dẫn
Nâng cao cơ sở hạ tầng, phòng thí nghiệm
Đầu tư thêm nhiều tổ chức, trung tâm đào tạo công nghệ mới
Lập quỹ đầu tư, hỗ trợ khoa học – kỹ thuật, Trí tuệ nhân tạo
Mở rộng thêm nguồn nhân lực có đam mê với công nghệ

Một số lời khuyên nhanh để tiếp cận Trí tuệ nhân tạo

Ông Vũ Đức Đam, ông là Phó Thủ tướng Chính phủ Việt Nam cũng đã lên tiếng khẳng định rằng thị trường Trí tuệ nhân tạo AI là mối liên kết chặt chẽ giữa những thành tố trong thế giới hiện đại thu nhỏ mang tên Trí tuệ nhân tạo của cả nước.

Ông một lần nữa cho thấy tầm nhìn về thị trường Trí tuệ nhân tạo AI 2020, ông cho rằng bản chất tồn tại thật sự của Trí tuệ nhân tạo AI là để cùng nhau phát triển một xã hội trở nên văn minh, phát triển và an toàn hơn.

Những dự án Trí tuệ nhân tạo hiện đang được ứng dụng tại các thành phố lớn ví dụ cụ thể là chúng đã được ứng dụng trong việc vận chuyển, kiểm tra an ninh, bảo mật nhiều loại thông tin riêng tư…

Có thể nói, ứng dụng của Trí tuệ nhân tạo không còn nằm bó buộc trong mức độ của những người yêu khoa học kỹ thuật nữa mà giờ nó đã trở thành vấn đề về việc phát triển đất nước.

Trí tuệ nhân tạo AI sẽ tạo ra cơ hội cho Việt Nam bứt phá, phát triển mạnh hơn, nó sẽ giúp kết nối giữa con người với máy móc, doanh nghiệp, Chính phủ, trường đào tạo…

Ứng dụng thực tế của Trí tuệ nhân tạo AI tại Việt Nam trong các lĩnh vực như giáo dục, giao thông, thương mại điện tử, y tế, ngân hàng, mạng xã hội… Có thể nói Trí tuệ nhân tạo AI có thể ứng dụng lên tất cả các ngành nghề, dịch vụ khác nhau không giới hạn phạm vi hoạt động, chính điều này tạo nên sự bùng nổ.

Các ngành nghề có thể ứng dụng Trí tuệ nhân tạo để tăng năng suất, lợi nhuận, doanh thu, trải nghiệm khách hàng… đây là một bước tiến mới cực kỳ có lợi cho các ngành nghề khác giúp phát triển kinh tế.

Ở các nước phát triển như Đức, AI cũng được ưu tiên phát triển như ngành cốt lõi của đất nước. Deep learning – được xem là cội nguồn của AI trên nền tảng Big Data, có thể giúp người dùng tận dụng nguồn dữ liệu có sẵn trong Big Data để làm việc hiệu quả hơn, phân tích hành vi người dùng chính xác hơn.

Tầm nhìn phát triển Trí tuệ nhân tạo AI

Công nghệ trí thông minh nhân tạo AI chắc chắn sẽ là 1 trong những công nghệ cần đặt nặng trách nhiệm và tập trung phát triển hết mình trong kế hoạch 10 năm tiếp theo của Việt Nam vì nếu phát triển đúng hướng và tận dụng tốt công nghệ AI thì chắc hẳn sẽ có sợ tiến bộ vượt bậc.

Về phía nước Đức, ông Ulli Waltinger, Giám đốc công nghệ Siemens cho rằng thị trường Trí tuệ nhân tạo AI đang từng bước tác động ngày càng mạnh mẽ đến sự phát triển của xã hội – kinh tế. Cũng như Việt Nam, tại Đức, công nghệ AI cũng được xem là yếu tố cốt lõi cần được tập trung phát triển mạnh để có thể gây được bước tiến lớn cho đất nước. C

ó hẳn 250 chuyên gia AI tại Siemens được đầu tư tạo môi trường tốt thoải mái nghiên cứu. Tập đoàn Siemens chỉ có một số nguyên tắc cần các chuyên gia phải tuân theo đó là phải tuyệt đối giữ kín bí mật công nghệ, chia sẻ kiến thức, có trách nhiệm trong việc phát triển AI.

Việc làm kỹ sư AI lương cao

Các quốc gia trên thế giới đầu tư vào thị trường AI

AI đi vào thực tiễn (Phần 2): Trí tuệ nhân tạo đang xâm nhập và định hình tương lai

AI-Powered Future: Data drive product - Trí tuệ nhân tạo vận hành Thế giới

Mỹ

Vào 4 năm trước, năm 2016, OSTP (Văn phòng Tổng thống về khoa học và công nghệ) của Mỹ gửi đến Chính phủ Mỹ 23 khuyến nghị về việc phát triển Trí tuệ nhân tạo AI. Bên cạnh đó, Hội đồng khoa học và công nghệ quốc gia Mỹ cũng đã đưa ra 1 số chiến lược để giúp Mỹ có hướng đi đúng đắn trong việc phát triển công nghệ AI. Các chiến lược đó là:

Đầu tư lâu dài cho việc nghiên cứu thị trường Trí tuệ nhân tạo AI
Triển khai và phát triển các phương pháp hiệu quả sao cho có sự hài hòa trong công việc giữa con người với công nghệ AI
Hiểu rõ các vấn đề khi phát sinh sự việc về pháp lý, đạo đức có thể gây ảnh hưởng đến xã hội của AI và giải quyết nó.
Cam kết việc đảm bảo an ninh và an toàn khi sử dụng các hệ thống AI
Tiếp tục tìm tòi các nhóm dữ liệu lớn được chia sẻ và phát triển môi trường phù hợp để huấn luyện và kiểm nghiệm AI
Tập trung đo lường và đánh giá chuẩn xác kết quả của các dự án công nghệ AI thông qua các tiêu chuẩn đã đặt ra từ trước
Nắm vững nhu cầu nhân lực của việc nghiên cứu và phát triển Trí tuệ nhân tạo AI

Trung Quốc

Trung là một trong những nước có nguồn vốn đầu tư vào ngành Trí tuệ nhân tạo AI lớn nhất. Chiến dịch phát triển công nghệ AI của Trung Quốc được phân chia theo 3 giai đoạn:

Giai đoạn 1: Được tiến hành vào năm 2020, trong năm nay Trung quốc chủ trương theo sát và bắt kịp nền công nghệ AI của các nước phát triển như Mỹ, Nhật với nguồn vốn đầu tư lên đến 150,8 tỷ USD.

Giai đoạn 2: Được lên kế hoạch tiến hành vào năm 2025, mục tiêu là trở thành quốc gia đứng đầu trong ngành công nghệ AI.

Giai đoạn 3: Từ năm 2030 trở đi, mục tiêu trở thành người đi đầu chủ chốt trong ngành AI đối với thế giới.

Anh

Nước Anh chú trọng đến việc đào tạo chất lượng nhân lực cho ngành AI, họ sẵn sàn kêu gọi đầu tư từ Châu Âu, Nhât và Mỹ, các tập đoàn tư nhân để có nguồn vốn dồi dào đào tạo hơn 1.000 tiến sĩ, 8.000 chuyên gia chuyên về công nghệ AI tại 2 trường đại học hàng đầu.

Khối EU

Để tránh việc chảy máu chất xám giữa các nước thì quỹ “EU Horizon 2020” và Ủy ban châu Âu đã đầu tư ít nhất 24 tỷ USD cho việc nghiên cứu AI. Vào cuối tháng 3 năm 2018, báo cáo của Pháp đánh giá Mỹ và Trung đang là 2 quốc gia phát triển đứng đầu trong công nghệ AI. Chính vì vậy, Pháp đã đầu tư 1,8 tỷ USD vào nền phát triển AI từ giờ cho đến 2022, mục tiêu của pháp là trở thành AI hub của khối.

Nhật Bản

Nhật là nước có thị trường Trí tuệ nhân tạo AI phát triển bậc nhất hiện nay, mục tiêu hiện nay của Nhật không còn gói gọn trong cụm từ công nghiệp 4.0 nữa mà là “xã hội 5.0”. Nhật là nước có nền công nghệ rất tiến bộ, họ đã ứng dụng công nghệ AI trong mọi khía cạnh cuộc sống từ xã hội, kinh tế, sản xuất cho đến đời sống…

Ngoài ra, Nhật cho hay, chiến lược phát triển AI của Nhật sẽ ưu tiên phát triển trong linh vực y tế, chăm sóc sức khỏe và giao thông….hơn hết. Cụ thể là sẽ phát triển AI với mục đích hỗ lái xe không người lái, y tế… Để nói về các khoản đầu tư vào AI của Nhật thì ngân sách ít hơn hẳn so với mức đầu tư của Mỹ và Trung.

Hàn Quốc

Kể từ sau năm 2016, Hàn Quốc mới được Chính phủ ủng hộ trong việc phát triển Trí tuệ nhân tạo AI, vì trước đó Hàn có chủ trương quản lý chặt chẽ thông tin cá nhân nên Big Data tại Hàn không được dồi dào, làm ảnh hưởng đến sự phát triển của AI – đạt 3,2% thị phần AI trên toàn thế giới.

Nhưng kể từ năm 2016 trở đi thì Chính phủ đã chủ động trong việc phát triển AI hơn, cụ thể là Chính phủ đã đầu tư ~ 863 triệu USD (1.000 tỷ Won) cho việc nghiên cứu phát triển công nghệ Trí tuệ nhân tạo AI.

Mở ra một trung tâm nghiên cứu quốc gia có sự góp mặt của các công ty công nghệ lớn như LG, Samsung, Naver, Hyundai… các công ty này đều được đầu tư tàm khoản 3 tỷ Won cho viện nghiên cứu này. Chính phủ sẽ ưu tiên hỗ trợ nguồn lực, tài chính cho các dự án từ viện nghiên cứu.

Tổng kết

Hầu như các nước trên thế giới bao gồm cả Việt Nam đều có sự nhận định và mục tiêu chung là xem thị trường Trí tuệ nhân tạo AI là công nghệ quan trọng, mang tính cốt lõi trong thời đại công nghệ 4.0. Có rất nhiều quốc gia đã “nhanh chân” ứng dụng công nghệ AI trong sản xuất, công việc và đời sống.

Tất cả các nước đều phải thừa nhận về những lợi ích mà Trí tuệ nhân tạo AI đã đem tới, AI làm thay đổi thói quen sống của con người, giúp ích cho kinh tế, y tế, quân sự và cả chính trị.

Chính vì những lợi ích đó nên xã hội loài người càng cần phải tập trung đầu tư chất xám, nguồn vốn để có thể phát triển mạnh công nghệ AI. Ngoài ra, các nước cũng nên có phương án, giải pháp phù hợp cho quy trình chuyển đổi hài hòa giữa con người và AI.

Dự đoán thị trường Trí tuệ nhân tạo AI 2020 và trong tương lai sẽ có sự đầu tư lớn hơn lên đến chục tỷ USD. Vào năm 2022, công nghệ AI sẽ có những tác động, ảnh hưởng đến nhiều xã hội loài người trong tất cả các ngành hàng.

Nó sẽ giúp tối ưu hóa hiệu quả, thời gian, tăng năng suất và giúp phân tích dữ liệu dựa trên các thông tin, cơ sở khoa học với xác suất hiệu quả cao hơn cả con người.

Có thể bạn muốn xem thêm:

"Ở Việt Nam, cơ hội để thực sự làm về Trí tuệ nhân tạo còn quá ít, trong khi những thứ mang hình thù và dáng dấp AI thì quá nhiều"

21 nghề nghiệp "đắt giá" trong tương lai, triển vọng và khó bị thay thế bởi trí tuệ nhân tạo

Xem thêm Top công việc IT tại TopDev!

Trải nghiệm khóa học nâng cao Machine Learning với VietAI

Theo báo cáo mới nhất về những việc làm triển vọng của Linkedin năm 2020, kỹ sư Học Máy (Machine Learning) và kỹ sư Trí Tuệ Nhân Tạo (Artificial Intelligence) đứng đầu bảng với nhu cầu tuyển dụng tăng trưởng 74% mỗi năm trong 4 năm gần với mức lương cao mơ ước.

Trong khi đó, nguồn nhân lực chỉ đáp ứng được 10% nhu cầu thị trường Việt Nam. Nhận thấy được vấn đề này, đội ngũ những chuyên gia hàng đầu về AI từ Việt Nam và thung lũng Silicon của VietAI đã tạo nên khóa học trực tuyến Machine Learning (Học Máy) cơ bản vào tháng 8-2020.

Khóa học Machine Learning tại VietAI có gì đặc biệt

Khóa học này được thiết kế dựa trên những kiến thức toán và lập trình nền tảng mà mọi người từ sinh viên cho đến những kỹ sư ở các lĩnh vực khác nhau đều có thể học được. Thông qua hình thức học trực tuyến, học viên có thể học ở bất cứ đâu và bất kỳ lúc nào. Không chỉ dừng lại ở việc học bằng cách xem những video được ghi hình sẵn, học viên còn được trực tiếp gặp gỡ, học hỏi và trao đổi với Giảng Viên, trợ giảng thông qua Webinar định kỳ trong suốt khóa học.

Chuẩn hóa về nội dụng học tập

Nội dung chương trình học được cập nhật bởi những kiến thức mới nhất từ trung tâm Công nghệ Trí tuệ nhân tạo – thung lũng Silicon (Mỹ) – nhưng được chuẩn hóa và áp dụng vào trong bối cảnh Việt Nam, với những vấn đề gần gũi trong cuộc sống hằng ngày như bài thực hành lập trình thuật toán để phân loại xe gắn máy, quần áo thời trang hàng ngày v.v.

Khóa học này của VietAI còn đặc biệt bổ sung thêm những bài giảng về chủ đề về Reinforcement Learning (Học Tăng Cường) và tầm quan trọng của công nghệ này ở nhiều khía cạnh khác nhau. Do đó, học viên có thể xây dựng nền móng cho những lớp học chuyên sâu hơn như lớp Deep Learning (Học Sâu) cơ bản và nâng cao của VietAI.

Dàn cố vấn giàu chuyên môn từ các chuyên gia hàng đầu

Ban cố vấn của khóa học có sự góp mặt của TS. Lương Minh Thắng (Senior Research Scientist tại Google Brain), TS. Vũ Duy Thức (CEO kiêm Co-founder của Ohmnilabs và Kambria), PGS.TS Trần Minh Triết (Phó hiệu trưởng Trường Đại Học Khoa học Tự nhiên kiêm Viện trưởng Viện John von Neumann). Thêm vào đó, đội ngũ giảng viên khách mời gồm có Vũ Thùy Ngân (Research Scientist tại Deepmind) và Nguyễn Phong (Visiting Researcher tại Mila – Quebec Artificial Intelligence Institute). Ngoài ra, khóa học còn đặc biệt nhận được sự tài trợ bởi Google và FPT AI.

Ngoài những tiện ích về hình thức học, học viên còn có thể học hỏi và xây dựng mối quan hệ với những chuyên gia hàng đầu về AI đến từ Việt Nam và thung lũng Silicon, qua đó học viên sẽ có thêm nhiều cơ hội được giới thiệu đến những cơ hội việc làm tại các công ty công nghệ hàng đầu ở trong và ngoài nước.

Kiến tạo những giá trị thực cho cộng đồng Trí Tuệ

Trải nghiệm thực tế Machine Learning từ những người trong cuộc

Những cựu học viên của VietAI đều đạt được những thành tựu nổi bật trong lĩnh vực Trí Tuệ Nhân Tạo. Trong đó, VietAI được biết đến với việc đã đào tạo thành công hai Google Developer Experts trong lĩnh vực Machine Learning (Học Máy) đầu tiên tại Việt Nam, đó chính là anh Nguyễn Bá Ngọc và anh Nguyễn Thái Bình. Hơn nữa, chị Nguyễn Thanh Hòa, một trong những cựu học viên xuất sắc của VietAI, đã theo đuổi thành công đam mê của mình trên con đường nghiên cứu với vị trí Research Engineer tại Pasteur Institute, Pháp.

Những khóa học của VietAI đều được đánh giá rất cao về chất lượng chương trình cũng như đội ngũ giảng dạy. Chương Huỳnh, cựu học viên của VietAI và hiện đang nghiên cứu Trí Tuệ Nhân Tạo tại VinAI, cho hay “VietAI đưa mình tới những kiến thức nền móng về Trí Tuệ Nhân Tạo qua những bài giảng súc tích dễ hiểu, những bài luyện tập đầy thực tiễn, và những câu chuyện nghề từ đội ngũ giảng viên đầy kinh nghiệm. Trải qua ba tháng, mình đã có thêm tự tin để tiếp tục theo đuổi con đường nghiên cứu chuyên sâu về Trí Tuệ Nhân Tạo cũng như định hướng rõ ràng hơn về công việc cho những năm sắp tới.”

Khao khát kiến tạo những giá trị mới

Hơn nữa, VietAI còn rất quan tâm đến việc xây dựng và đóng góp cho cộng đồng Trí Tuệ Nhân Tạo tại Việt Nam. Với mong muốn tạo thêm cơ hội và khuyến khích nhiều bạn tiếp cận nguồn kiến thức và theo đuổi lĩnh vực này, VietAI sẽ hỗ trợ thêm những phần học bổng cho khóa học, đặc biệt là học bổng cho phụ nữ.

Khóa học hiện đã mở đơn nhận học viên, hãy cùng VietAI đón đầu công nghệ và đăng ký khóa học trực tuyến Machine Learning (Học Máy) cơ bản ngay hôm nay! Mọi thông tin chi tiết về khóa học đều có thể tìm thấy ở đây: https://ml.vietai.org/.

Tham khảo thêm: Tuyển dụng lập trình Machine Learning lương cao tại Topdev

Viết cho tuổi 20

Bài viết được sự cho phép của tác giả Huỳnh Quán Cẩm

“Are you happy in your life?”

Tui có thói quen soi gương mỗi sáng. Không hẳn vì tui là một kẻ ái kỷ, mà cảm giác được thức dậy, được tiếp tục sống, nó rất tuyệt. Có ai đó từng nói rằng: “Every day you wake up is a beautiful day!”.

Đồng hành và gắn bó với một công ty, bao lâu là đủ?

Sớm đòi hỏi nhưng thiếu nỗ lực, khuynh hướng làm việc của người trẻ?

Lúc 20 tuổi nhìn vào trong gương, tui tự nhủ 30 tuổi mình sẽ thế nào. Tui sẽ làm gì? Có giàu không? Tui sẽ gánh vác xã hội hay xã hội sẽ gánh vác tui? Tui có tìm được một nửa của cuộc đời, hay vẫn tiếp tục forever alone?

Và nếu lúc đó, nhân loại phát minh được cỗ máy thời gian, phiên bản 30 tuổi của tui quay lại, ổng sẽ nói gì với tui?

Thời gian nhanh như chó chạy, thấm thoát 10 năm trôi qua y như phim. Cỗ máy thời gian thì vẫn chưa có. Nhưng nghĩ lại … tui nợ thằng nhóc đó một câu trả lời.

Thôi thì viết tạm ở đây, khi nào 30 tuổi tự khắc nó sẽ đọc.

Tuổi đôi mươi

Thường thì người ta chỉ nên kể về bản thân khi đã thành công, và tui thì không nghĩ tui thành công hay có gì hơn người cả. Tuy nhiên blog của tui, tui thích thì tui viết thôi .

Những năm đầu của tuổi 20 trôi qua nhẹ nhàng không để lại quá nhiều dấu vết. Loay hoay cũng chỉ có ăn, ngủ với học. Học nửa chừng thì có thằng bạn rủ đi kinh doanh. Công việc nhẹ nhàng, không cần bằng cấp, chỉ cần biết chém gió và hô khẩu hiệu thiệt to. Nhỏ lớn cứ nghĩ đi làm được trả tiền là định lý bất di bất dịch rồi. Ai dè ngược đời mới ngày đầu đã tốn mợ 100k tiền tài liệu. Định xin má thêm chút tiền mua sách “dạy con làm giàu” thì bả tán vào mồm biểu nghỉ. Con bả bả dạy chứ sách siếc gì. Mà cũng may hồi đó chưa có trò ra phố đi bộ tuyên bố hùng hồn này kia. Thà mất tiền thì được chứ mất mặt thì nonono.

Ra trường may mắn tìm được việc ngay. Công việc thợ IT cắt template Joomla, lương 4 triệu/tháng không bao ăn ở. Công ty cấp cho một cái ghế nhựa Đại Đồng Tiến có cái lỗ tròn tròn ở giữa. Ngồi được 2 bữa ê mông chịu không nổi đành phải nghỉ. Lỗ mất 2 ngày công -___-. Mà kệ cha nó, mình còn trẻ, có gì đâu mà căng ¯\_(ツ)_/¯.

Sau đó, tui được nhận vào làm ở công ty Fu. Tính chất công việc không khác lắm nhưng được cái ghế ngồi thoải mái nên làm được tới 3 năm. Chắc tại mình lùn trắng thơm nên sếp tạo nhiều cơ hội thăng tiến. Đi làm vui cũng nhiều, nuối tiếc cũng không ít nhưng không tiện kể ra. Cơ mà có cái tip cho bạn nào định/đang build team nè: mua cái ghế càng xịn thì nhân viên gắn bó càng lâu.

Rồi tui xin nghỉ ở Fu để nhảy sang start-up I với mức lương thấp hơn và khối lượng công việc nhiều hơn. Tui nghĩ rằng họ có thể cho tui mức growth cao hơn. Mắc dịch cái sau khi pass probation ở I thì tui … nhận lời mời làm Engineering Manager cho start-up D. Offer không thể chối từ nên đành cáo lỗi cùng sếp I. Để rồi sau 8 tháng, start-up thành ra fucked-up. Công ty hết tiền. Anh em ra đường. Hên là lúc đầu công ty cấp Macbook nên thanh lý cũng được giá, trang trải được lương cho anh em. Cấp cái khác là anh em đói meo rồi. Tip nữa nè: có điều kiện thì mua Mac đi, lỡ công ty có cúp lương còn thanh lý cấn lương được.

Sáng đầu tiên thất nghiệp, tui nhìn vào gương, tự hỏi: “Cái quần què gì đang diễn ra vậy ta?”. Tui nghĩ rằng mình cần một khoảng thời gian off để tìm lại cân bằng. Sau đó, tui đi du lịch, làm shipper, giữ xe, tham gia meet-up, dự conference. Nói chung là không code cái quần gì cả. Không ngờ xả hơi cái đi tong 9 tháng. Hên là trước đó có dành dụm được chút tiền.

Không ngày nào trong 9 tháng đó tui không tự dằn vặt bản thân rằng mình đã sai ở chỗ nào. Sao không chịu ở yên mà nhảy việc làm chi? Để rồi tui nhận ra trong vòng một năm qua tui đã học được nhiều thứ hơn so với 3 năm trước. Vậy thì … đúng chứ đâu có sai!! Tốn con mợ nó 9 tháng để suy ngẫm vớ va vớ vẩn. Cơ mà tui lĩnh ngộ được cách để tiến bộ nhanh nhất là bước ra khỏi vùng an toàn của bản thân.

Thế là tui nhảy ra khỏi vùng an toàn thêm lần nữa, gia nhập công ty Fo ở một đất nước lạnh lẽo, một châu lục xa xôi.

Tui nghĩ đó là quyết định sáng suốt. Ở Fo tui được tôi luyện về công việc: từ cách định hình sản phẩm, cách làm việc nhóm, đến cách xây dựng hệ thống; học hỏi từ nhiều đồng nghiệp xịn: từ cách họ suy nghĩ, cách họ thuyết phục, đến cách họ giải quyết những bài toán cụ thể. Ngoài ra, bắt đầu cuộc sống mới ở một nơi xa lạ, tui học được cách tự lập, cách ứng phó với môi trường hoàn toàn mới: từ việc mùa đông mặc áo gì, khai thuế ra làm sao, đến cách cà khịa với tụi Tây như thế nào?

Đến tháng 9 năm ngoái, vợ chồng tui đã đón chào đứa con đầu lòng, đánh dấu kết không quá tệ cho tuổi 20.

Are you happy “in” your life?

Đọc đến đây hẳn bạn đọc cũng đứng ngồi không yên: lòng vòng nãy giờ, rốt cục thằng cha này định nói gì vậy?

Trước khi vào chủ đề chính, để tui dắt bạn đi thêm một vòng nữa. Số là vài tháng trước, tui có đọc một cuốn tiểu thuyết sci-fi tên là Dark Matter của Blake Crouch…

Chuyện kể rằng anh J là một giáo sư vật lý quèn, có 1 vợ 1 con gia đình hạnh phúc. Cơ mà ảnh có một sự nuối tiếc lớn trong cuộc đời. Số là ngày xưa anh J từng đứng trước cơ hội trở thành một khoa học gia ngôi sao nhưng ảnh đã từ chối để xây dựng gia đình nhỏ bên cô vợ D. Mặc dù cảm thấy hạnh phúc, nhưng lâu lâu anh J vẫn ngậm ngùi: “Nếu ngày ấy tiếp tục nghiên cứu, biết đâu giờ mình nhận giải Nobel rồi nhỉ?”.

Rồi một bữa ảnh ra quán bar để dự tiệc ăn mừng giải thưởng vật lý của một người bạn. Không ngờ đó trở thành chuyến đi định mệnh. Một người lạ mặt xuất hiện bắt cóc anh. Hắn đã hỏi anh một câu hỏi đầy chất “thiền” trước khi đánh ngất anh thêm một lần nữa:

Are you happy “in” your life?

Sau câu hỏi đó, cuộc đời anh quay ngoắt 180 độ. Khi tỉnh lại, anh J thấy mình vẫn ở nơi cũ nhưng không còn ai bên cạnh. Anh trở về nhà, nhưng dường như mọi thứ đã thay đổi. Vợ của anh không còn là vợ của anh nữa. Con anh thì chưa bao giờ ra đời. Những chuyện li kì liên tiếp xuất hiện.

Truyện diễn tiến tiếp ra sao chắc tui để bạn tự đọc. Cơ mà chủ đề lớn của Dark Matter thì khá đơn giản. Cuộc đời là vô số lần ta phải đứng trước những lựa chọn khác nhau. Mỗi quyết định sẽ rẽ đời ta theo một hướng nào đó. Tất nhiên ta sẽ phải sống tiếp với quyết định của mình. Nhưng nhiều lúc ta bâng quơ suy nghĩ, ở một thế giới khác, nơi mà ta đưa ra một quyết định khác, biết đâu ta hạnh phúc hơn bây giờ? Và, giá như được chọn lại, ta sẽ quyết định như thế nào?

Qua câu chuyện, thông điệp mà Dark Matter muốn truyền tải đó là: Đôi khi thay vì tập trung quá nhiều vào “việc làm lại”, ta có thể tìm kiếm sự trân trọng vào hiện tại, từ đó hy vọng tới tương lai.

Hồi nhỏ, má tui hay lèm bèm về “tri túc giả, nhân thường lạc” (tạm dịch: người biết hài lòng thì thường hạnh phúc). Mặc dù không dám cãi nhưng lúc đó tui cũng băn khoăn. Lúc nào cũng hài lòng thì sao thế giới phát triển. Nếu Newton hài lòng vì không tốn công hái mà táo vẫn rụng, sao ta có 3 định luật mang tên ông? Nếu Mã Vân hài lòng với nghề giáo viên anh văn thì sao ổng luyện thành công Đô La Thần Chưởng, trở thành cao thủ võ lâm?

Đương nhiên càng lớn thì càng ngộ ra thêm. Tui nhận ra mấu chốt không nằm ở “tri túc” mà nằm ở “thường lạc”. Nếu “thường lạc” là một cảnh giới mà ta muốn đạt tới (khúc này bác Nguyên Vũ nhập), thì biết hài lòng là một phương thức giúp ta tìm kiếm sự bình yên trong lòng. Tri túc không hẳn là dậm chân tại chỗ, hài lòng cũng không có nghĩa là cam lòng. Tri túc là một tâm thế giúp bạn thấy được “big picture” của đời mình. Từ đó, bạn biết mình có cái gì, và khi theo đuổi những thứ mà bạn mong muốn, bạn biết được mình phải đánh đổi bằng cái gì. Nói cách khác, tri túc giúp bạn sắp sếp các ưu tiên trong cuộc sống và nhận ra mức cân bằng của bản thân.

Từng có người dạy tui rằng: Sống là một quá trình mà bạn không ngừng tìm kiếm “trạng thái cân bằng” trong các mối quan hệ. Nếu bạn có chơi game The Sims, tui nghĩ bạn sẽ biết câu đó định nói gì. Trong game bạn được giao một nhân vật. Ứng với tính cách đã chọn, bạn cố gắng cân bằng các Sims bars của nhân vật: đáp ứng nhu cầu về ăn uống, năng lượng, quan hệ (xã hội), công việc, vv của chúng. Khi bạn bắt nhân vật vùi đầu vào công việc và học tập nhưng không dành thời gian nói chuyện với vợ/chồng, họ sẽ bỏ nhà ra đi. Hoặc bạn có thể cho nhân vật party chơi bời, nhưng họ sẽ không có tiền (ừa, trừ phi bạn biết cheat code).

Ngoài đời thì không có cheat code, cũng chẳng có mấy cây Sims bar để chỉ cho bạn biết rằng bạn đang thiếu cái gì cả. Bạn chỉ có thể tự canh chỉnh mức happiness của bản thân: biết mình có gì, thiếu gì và cần gì. Sau đó thì hài lòng với nó, và tìm cách cân bằng nó.

Đoạn kết

Trong thế giới mà ta đang sống, nơi mà chủ nghĩa tiêu thụ được tôn sùng tới mức bệnh hoạn thì thật khó để mà tri túc. Mọi thứ xung quanh đều được tối ưu để truyền thông điệp rằng: bạn cần đi nhanh hơn, sống gấp gáp hơn, kiếm nhiều tiền hơn, bạn sẽ mua được nhiều hàng hơn, trở nên hạnh phúc hơn. Người ta cho rằng: cái gì không mua được bằng tiền thì mua được bằng rất nhiều tiền.

Thật ra, tui nghĩ, nếu bạn chịu khó lâu lâu dừng lại một chút. Dừng hẳn. Chỉ một vài giây thôi. Bạn hít thở thật sâu. Nhìn xung quanh. Bạn thấy vợ con bạn đang ôm nhau ngủ khì khì. Bạn đang mải mê viết blog. Bạn viết dở như hạch, y chang như cái sự nghiệp của bạn vậy. Bạn chỉ là một Averge Joe không hơn không kém. Nhìn lên trên thì chả bằng ai, nhìn xuống dưới thì bạn cũng chẳng hơn mấy người. Bạn biết mình cần phải tiếp tục cố gắng. Tuy vậy bạn vẫn mỉm cười hài lòng. Vì bạn biết rằng: À thật ra thì … mình cũng có ai đó.

Đôi khi, hạnh phúc không đắt đến thế đâu…

Bài viết gốc được đăng tải tại quan-cam.com

Có thể bạn quan tâm:

Xem thêm các Jobs Fresher Developer hấp dẫn tại TopDev

Dịch vụ thị trường Fintech – Công nghệ Tài chính Landscape 2020

Thị trường fintech tuy là một thị trường còn mới mẻ và non nớt ở thị trường Việt Nam nhưng sức ảnh hưởng của thị trường này khá lớn. Thậm chí nó còn làm thay đổi cả hành vi người dùng trong ngành Tài chính.

Theo báo cáo Thị trường Fintech Landscape nhận định rằng dịch vụ thanh toán trực tiếp lại nằm ngoài danh sách chịu ảnh hưởng của Covid-19. Vào cuối năm 2016 từ con số 40 công ty nay đã tăng gần bốn lần lên 140 ở thời điểm hiện tại trên nhiều lĩnh vực khác nhau (Trong đó, 32 đơn vị trung gian thanh toán được NHNN cấp phép đủ điều kiện kinh doanh).

Theo ý kiến các chuyên gia ngân hàng, để phát triển mạnh Fintech thì rất cần vốn đầu tư, từ công nghệ, thị trường cho đến nhân lực và cả người dùng, vì dù cho có bước phát triển mạnh mẽ, song Fintech vẫn là lĩnh vực mới ở Việt Nam và còn rất non trẻ nếu so sánh với mức độ phát triển trên thế giới.

Khái niệm Fintech là gì?

Financial Technology có nghĩa là Công nghệ Tài chính, gọi tắt là Fintech được hiểu nôm na là sử dụng công nghệ trong tất cả các hoạt động thuộc về dịch vụ tài chính thì được gọi là Fintech.

10 bí kíp để startup và FinTech startup thành công đột phá

CHINH PHỤC ĐƯỜNG ĐUA CÔNG NGHỆ CÙNG MOMO - ỨNG DỤNG FINTECH SỐ 1 VIỆT NAM

Cụm từ Fintech còn được sử dụng phổ biến chung cho các công ty sử dụng các công nghệ tiên tiến làm chủ đạo cho mục đích kinh doanh, nâng cao hiệu quả cho các hoạt động đầu tư, các hoạt động ngân hàng… bằng công nghệ internet, điện thoại thông minh, các phần mềm mã nguồn nói chung hoặc thậm chí là công nghệ đám mây…

Xem thêm báo cáo về Thị trường Fintech Landscape 2020

Theo khía cạnh cắt nghĩa đầy đủ hơn, Fintech được tờ Huffington Post của Mỹ định nghĩa là một ngành nghề mới, đó là ngành công nghiệp tài chính đem áp dụng công nghệ tiên tiến để có thể tăng năng suất, nâng cao hiệu quả công việc trong lĩnh vực hoạt động tài chính. Nó ứng dụng công nghệ mạng internet vào các công quy trình, sản phẩm, ứng dụng, mô hình kinh doanh, và chỉ hoạt động được khi có sự can thiệp của công nghệ.

Chức năng của Fintech

Ngành Fintech có 2 chức năng chính phù hợp cho 2 nhóm đối tượng sử dụng, đó là các công ty chuyên về phục vụ, hỗ trợ người tiêu dùng và công ty hỗ trợ hoạt động công nghệ cho các định chế tài chính chủ chốt (back-office).

Nhóm đối tượng Công ty phục vụ người tiêu dùng:

Nhóm này sẽ cung cấp người dùng các ứng dụng, app mobile, sản phẩm thuộc về kỹ thuật số, công nghệ để cải thiện phương thức quản lý tiền bạc, tài chính cho người dùng, ngoài ra còn có thể cải thiện các trường hợp cá nhân khách hàng vay mượn, tài trợ vốn cho các startup nhỏ và vừa.

Nhóm đối tượng Công ty hỗ trợ hoạt động công nghệ:

Nhóm này là nhóm các công ty chuyên về “hậu cần” back-office, chuyên hỗ trợ tất tần tật các hoạt động công nghệ trong Fintech. Không chỉ thể, nhóm này còn hỗ trợ cho các định chế tài chính trong ngành Fintech.

Bất kỳ tổ chức/doanh nghiệp nào có phát sinh giao dịch về cho vay, nhận tiền, cho thuê tiền mua tài sản/tài chính, chuyển tiền, phát hành các phương thức thanh toán , bảo lãnh, cam kết tài chính, các công việc liên quan thị trường tiền tệ, chứng khoán, ngoại hối….. đều được gọi chung 1 cái tên là ‘định chế tài chính’. Ví dụ như ngân hàng là một định chế tài chính phổ biến.

Có thể hiểu, Fintech bao gồm những dịch vụ cơ bản về tiền tệ như thanh toán tiền, cho vay, chuyển tiền, gửi tiền thì nó còn có vai trò to lớn hơn, cao cả hơn đó chính là:

Crowd-Funding – Gọi vốn cộng đồng
Peer to peer lending – Cho vay đồng cấp
Personal Finance – Tư vấn tài chính cá nhân
Insur-Tech – Công nghệ bảo hiểm
Crypto Blockchain – Tiền tệ số hóa
Data Management – Quản lý dữ liệu

Tầm ảnh hưởng của ngành Fintech theo báo cáo của Landscape

Fintech có một ảnh hưởng khá mạnh đến ngành tài chính, có thể nói, ngành này mạnh đến mức đủ khả năng tái định hình lại ngành tài chính hiện tại. Nó tác động, ảnh hưởng mạnh mẽ đến từng thành phần chi tiết của ngành tài chính.

Ở các công ty P2P (Peer to Peer Lending – kết nối người đi vay và người cho vay thông qua Internet) – các công ty cho vay hiện nay hoạt động khá hiệu quả nhờ vào Fintech. Fintech không những giúp giảm bớt nguồn nhân sự tư vấn mà còn giúp giảm bớt thời gian phê duyệt các khoản vay từ người dùng xuống chỉ còn trong vòng vài giờ.

Lược bỏ được các khâu giấy tờ phức tạp nhưng vẫn có tính hiệu quả và đảm bảo cao, an toàn, chính vì vậy làm tăng năng suất hiệu quả và khách hàng sử dụng.

Các chuyên gia của ngân hàng đầu tư tài chính lớn nhất thế giới Morgan Stanley đã dự đoán rằng, dù 5 năm trước, năm 2015, các khoản vay thông qua internet ở Mỹ có con số khá khiêm tốn là 20 tỷ USD. Nhưng 5 năm sau con số này sẽ tăng trưởng nhanh, và đạt kỷ lục lên đến 120 tỷ USD trong cuối năm 2020.

Trong lĩnh vực quản lý và đầu tư, thậm chí các quỹ đầu tư lớn như Vanguard và BlackRock đã đầu tư hẳn ‘robo adviser’ để tự động điều chỉnh hóa các danh mục đầu tư match với mức độ rủi ro khi đầu tư theo nhu cầu của khách hàng.

Có 1 vài quỹ đầu tư khác cũng đang cho thử nghiệm hình thức điều chỉnh tự động hóa mức độ rủi ro sao cho phù hợp với khách hàng bằng cách cho robot học các thuật toán cao cấp hơn.

Bên cạnh đó có 1 vài Startup và ngân hàng đầu tư đa quốc gia hay cả NHTW Anh đã cho ra mắt các loại tiền ảo (tương tự bitcoin) dùng để thay thế tiền mặt, có thể dùng để chuyển tiền…

Ngoài ra, top 5 xu hướng về Fintech đáng chú ý được thị trường fintech 2020 tìm hiểu và tổng hợp chính là: big data và AI, RPA – tự động hóa quá trình robot, giao diện đàm thoại, blockchain, thanh toán di động. Trong tương lai chắc hẳn 5 xu hướng này sẽ bùng nổ tại thị trường fintech 2020.

Các ảnh hưởng lớn như:

Thay đổi thói quen sử dụng dịch vụ của người dùng

Thấy rõ nhất ở các dịch vụ ngân hàng, Trong những năm trở lại đây, mỗi lần xuất hiện giao dịch, các khách hàng thay vì phải đứng xếp hàng đợi ngoài ngân hàng làm đủ thứ giấy tờ thủ tục như trước thì nay chỉ cần mở app của ngân hàng đó hoặc lên website là đã được hỗ trợ giao dịch.

Hiện nay hầu hết các ngân hàng tại Việt Nam đều phát triển cùng 1 lộ trình đó là phát triển website, ứng dụng ngân hàng, ngân hàng kỹ thuật số, mobile banking, tablet banking, giao dịch không giấy tờ….

Hỗ trợ phân tích khách hàng

Cùng với các kỹ thuật công nghệ cao và hiện đại, ứng dụng kỹ thuật Big Data, thị trường fintech 2020 đã phân tích hàng ngàn hành vi khách hàng sử dụng giúp cho các ngân hàng, định chế tài chính thu thập thêm nhu cầu của khách hàng từ đó có thể cho ra những chiến lược kinh doanh, chế độ hậu đãi mới thu hút khách hàng hiệu quả hơn.

Đặc biệt, nhờ ứng dụng kỹ thuật Big Data này, các định chế tài chính cũng sẽ dễ dàng phác họa được con đường phát triển, giảm thiểu chi phí nhưng chất lượng vẫn được nâng cao, gia tăng trải nghiệm khách hàng.

Giao dịch không dùng giấy

Đây là xu hướng mới nối tiếp xu hướng “thanh toán không tiền mặt” mà trong bài báo cáo Dịch vụ thị trường thanh toán điện tử Landscape 2020 đã đề cập qua. “Giao dịch không dùng giấy” sẽ trở thành xu hướng mới ngày này, nhằm giảm thiểu chi phí giấy tờ không cần thiết, bảo vệ môi trường…

Các chi nhánh lớn nhỏ của ngân hàng không cần cạnh tranh nhau mọc lên như nấm để đáp ứng nhu cầu giao dịch nữa mà thay vào đó khách hàng sẽ làm điều đó trên app hoặc web. Giảm thiểu được rất nhiều loại chi phí vận hành hoạt động, thay vào đó sẽ đổ nhiều vốn và công sức hơn vào việc phát triển cũng như duy trì chất lượng công nghệ.

Tạo ra sân chơi chung – chia thị phần cho công ty Fintech

Để có thẻ duy trì được sự cân bằng của đôi bên, ‘nước lên thì thuyền lên’ các định chế tài chính sẵn sàng chia lại thị phần của mình cho các công ty Fintech tạo ra một sân chơi chung công bằng và cùng nhau phát triển.

Biến động ở các thị trường nhân sự

Thị trường fintech 2020 phát triển cũng làm các ngành khác ảnh hưởng theo, ví dụ như hậu quả của việc công nghệ phát triển đó là làm dư ra lượng người lao động ở các ngân hàng, công ty tài chính, chứng khoán, bảo hiểm…

Tuy là một ngành còn khá trẻ nhưng Fintech có tương lai khá sáng sủa. Các cơ quan, công ty, doanh nghiệp tài chính thế giới nói chung và tài chính Việt Nam nói riêng đều mong đợi Fintech sẽ mang đến làn sóng mới làm bùng nổ thị trường tài chính trong tương lai.

Với những lợi ích mà Fintech đã đem đến như giúp giảm tải nhiều loại chi phí, minh bạch, giao dịch đơn giản tiện lợi thì chủ tịch Cục dự trữ liên bang Mỹ – ngài Janet Yellen đã nhận định rằng “nền công nghệ tiền ảo sẽ giúp nâng cấp hệ thống thanh toán quốc tế đã cũ kỹ”

Ngài Mark Carney – Thống đốc NHTW Anh đã nêu lên cái nhìn của ngài về Fintech và tin rằng ngành này có thể làm thay đổi nhận thức, cách thức làm việc của các ngân hàng hiện tại, đồng thời cũng sẽ ảnh hưởng tích cực đến các công ty và người dùng đang quản lý và tiết kiệm tiền bạc.

Tuy nhiên, ngài vẫn còn đắn đo về tính an toàn và mức độ chính xác của hệ thống tài chính và ngài hy vọng sẽ cải thiện được vấn đề này trong tương lai.

VNG đồng hành cùng sinh viên thời đại mới khám phá công nghệ Fintech

FE CREDIT TECHSPEC – TRẢI NGHIỆM LẬP TRÌNH VÀ LÀM VIỆC TẠI MÔI TRƯỜNG FINTECH HÀNG ĐẦU VIỆT NAM

Quy mô của Fintech trên thế giới

Vào năm 2016, rất nhiều công ty đầu tư mạo hiểm trên thế giới đã đầu tư tổng cộng 17 tỷ USD vào các Startup Fintech, tỷ lệ góp vốn này tăng gấp 6 lần năm 2012.

Ở một đất nước tuy ít dân số nhưng lại có tiềm lực mạnh như Singapore thì đã có hơn 100 Startup về Fintech. Vì sự phát triển quá mạnh mẽ này mà rất nhiều ngân hàng truyền thông quan ngại rằng Fintech sẽ dần chiếm lấy thị trường của họ.

Để tránh bị Fintech vượt mặt, các ngân hàng cũng đã cố gắng lấn sân vào Fintech. Họ dùng chính thương hiệu lớn mạnh có sẵn của họ kết hợp công nghệ tiên tiến để thử nghiệm người dùng.

Tuy nhiên, điểm bất cập ở đây là hơn 90% hệ thống quản trị, quản lý tại các ngân hàng là “hàng lỗi thời”, do đó quá trình chuyển giao thử nghiệm từ ngân hàng truyền thống sang ngân hàng Fintech khá mất thời gian và tiền bạc vì họ phải nâng cấp toàn bộ hệ thống và training nhân viên sao cho có đủ tiêu chuẩn, kiến thức hỗ trợ được khách hàng của họ.

Một trong những ngành kinh tế thu hút nhân sự trẻ và đang hot hiện nay đó là ngành Tài chính – Ngân hàng.

Chính vì lượng khách hàng mới mỗi năm ngày càng có xu hướng hiện đại hóa và sử dụng công nghệ nhiều hơn nên các ứng dụng công nghệ Fintech cũng ngày càng được nâng cấp và cho ra đời những ứng dụng với chức năng mở rộng, hiện đại hơn… thế chỗ cho hầu hết các phương thức vận hành lỗi thời của các dịch vụ tài chính đã tồn tại từ rất lâu tại các ngân hàng hoặc các định chế tài chính.

Fintech tác động đến những ai?

Mặc dù ngành Fintech chỉ có 2 nhóm đối tượng sử dụng, là các định chế tài chính (công ty đầu tư, bảo hiểm, chứng khoán, tài chính, ngân hàng…) và khách hàng, tuy nhiên về mức độ tác động, ảnh hưởng thì bài báo cáo thị trường fintech sẽ chia làm 3 loại đối tượng bị Fintech ảnh hưởng trực tiếp và nhiều nhất. Đó là:

Định chế tài chính

Các định chế tài chính được xem là gốc rễ của Fintech, nó sử dụng ‘công cụ phát triển’ là Fintech để nâng cấp tất cả các hoạt động dịch vụ trong định chế tài chính để thu hút và giữ chân khách hàng. Vì nhận thấy tầm quan trọng của Fintech trong ngành Tài chính – ngân hàng tiên tiến này nên họ cũng đã đầu tư không ít vào các công ty phát triển Fintech.

Công ty Fintech

Đây là những công ty chuyên về cung cấp và phát triển công nghệ, cập nhật ứng dụng, phần mềm phù hợp cho từng mô hình định chế tài chính khác nhau. Có thể nói, họ là đội ngũ kỹ thuật công nghệ đứng sau các công ty định chế tài chính (một vài định chế tài chính lớn mạnh cũng có thể tự mình đảm nhiệm vị trí của các công ty Fintech và ngược lại)

52 Công Ty về Fintech đang chờ đón bạn

Khách hàng

Đây là nhóm đối tượng đơn giản nhất nhưng lại có sức ảnh hưởng lớn nhất. Nhóm đối tượng này là những người sử dụng sản phẩm, dịch vụ của các định chế tài chính. Khách hàng là nhóm đối tượng đứng giữa và hưởng lợi (chế độ, hậu đãi thành viên, công nghệ hiện đại) từ các công ty định chế tài chính khi họ cạnh tranh với nhau.

Khuyết điểm của ngành Fintech

Dù được đánh giá cao là thế, nhưng Fintech vẫn mang các khuyết điểm cần được giải quyết dứt điểm. Các công ty Fintech cung cấp khá nhiều hình thức dịch vụ tài chính khác nhau, từ các loại tài khoản nghỉ hưu cho người lớn tuổi đến các khoản vay nợ, thế chấp… trực tuyến.

Vì tính đa dạng cũng như như tính đơn giản nên đã có khá nhiều người tham gia vào Fintech, tuy nhiên số lượng người sử dụng lại không thật sự hiểu rõ về bản chất của ngành và cả những nghĩa vụ và quyền hạn mà họ phải chấp nhận.

Các cá nhân có thu nhập thấp, hoặc các cá nhân không có cơ hội tiếp cận với Internet đều không thể sử dụng Fintech được và họ lo sợ rằng, Fintech sẽ thay thế hình thức ngân hàng truyền thống lâu nay.

Để bảo vệ người dùng và toàn hộ hệ thống Fintech mà không làm ảnh hưởng đến sự phát triển mạnh mẽ của nó, Mỹ cho biết họ sẽ hỗ trợ về luật về việc ban hành giấy phép chính thức cho các công ty Fintech kèm theo điều kiện nhất định.

Khi đó, các công ty Fintech này buộc phải tuân theo luật lệ, điều khoản khi hoạt động trong ngành Fintech. Chính điều này đồng thời sẽ giúp bảo vệ cả người dùng và các công ty Fintech mà không làm ảnh hưởng đến tiến độ phát triển của nó.

Bên cạnh những rủi ro có thể xảy ra đó, thì những lợi ích mà ngành Fintech đem đến là không thể phủ nhận. Thị trường fintech ngày càng phát triển mạnh mẽ, kéo theo sự phát triển kinh tế của thế giới về mặt tích cực.

Có thể bạn muốn xem thêm:

Xem thêm Top công việc IT tại TopDev!

Các mức độ kiểm thử được sử dụng trong kiểm thử chức năng của một phần mềm

Bài viết được sự cho phép của BBT Tạp chí Lập trình

Trong vòng tròn phát triển sản phẩm, kiểm thử phần mềm là bước cuối cùng trước khi sản phẩm đến tay khách hàng. Có rất nhiều mức độ khác nhau trong quá trình kiểm thử. Mỗi mức độ sẽ gồm nhiều phương pháp khác nhau có thể được sử dụng trong quá trình tiến hành kiểm thử. Hai mức độ kiểm thử chính sẽ là : kiểm thử chức năng và kiểm thử phi chức năng.

Unit Test là gì? Khái niệm và vai trò

Hướng dẫn viết unit test trong React

Trong bài viết này chúng ta sẽ tìm hiểu các phương pháp kiểm thử trong kiểm thử chức năng. Mỗi phương pháp kiểm thử có một mục đích cụ thể và cung cấp giá trị cho vòng đời phát triển phần mềm.

Kiểm thử chức năng là một loại của kiểm thử hộp đen, dựa trên các mô tả của phần mềm đã được kiểm thử. Ứng dụng sẽ được kiểm tra bằng việc cung cấp đầu vào và sau đó được kiểm tra xem đã đúng mục đích chức năng được thiết kế chưa. Kiểm thử chức năng được tiến hành khi mà phần phềm đã hoàn thành, tích hợp vào hệ thống để đánh giá xem đã đúng như mô tả chưa.

Đây là 5 bước liên tiếp trong khi kiểm thử chức năng một ứng dụng

Xác định chức năng liên quan của ứng dụng định kiểm thử
Tạo dữ liệu test dựa trên yêu cầu của sản phẩm
Xác định đầu ra dựa trên dữ liệu test và yêu cầu của ứng dụng
Viết kịch bản và chạy các test case
So sánh kết quả thực tế và kết quả dựa trên các test case đã viết

Một kiểm thử hiệu quả sẽ áp dụng những bước ở trên cho tất cả các chức năng và nó sẽ đảm bảo nghiêm ngặt các yêu cầu về tiêu chuẩn khi nói đến chất lượng phần mềm

Kiểm thử đơn vị (Unit Testing)

Loại kiểm thử này được chạy bởi developer trước khi cài đặt để chuyển giao cho đội kiểm thử thực hiện những test case chính thống. Unit test được developer chạy tương ứng cho từng đơn vị mã nguồn. Developer sử dụng bộ dữ liệu kiểm thử từ test case để đảm bảo chất lượng.
Mục đích của unit test là cô lập từng phần của chương trình và kiểm tra các bộ phận độc lập đấy đã hoạt động chính xác theo yêu cầu hay chưa.

Kiểm thử theo phương pháp này không thể tìm được mọi lỗi của ứng dụng. Không thể đánh giá mọi tình huống có thể xảy ra trong chương trình. Nó bị giới hạn bởi các tình huống và bộ dữ liệu test mà developer sử dụng để kiểm thử chương trình.

Kiểm thử tích hợp (Integration Testing)

Tích hợp có nghĩa là kết hợp. Ví dụ, trong giai đoạn kiểm thử này, các module phần mềm khác nhau được kết hợp và kiểm tra thành một nhóm để đảm bảo rằng hệ thống tích hợp đã sẵn sàng để kiểm thử hệ thống.

Kiểm thử tích hợp kiểm tra luồng dữ liệu từ một module này đến một module khác. Loại kiểm thử này được thực hiện bởi những tester.

Có hai kiểu : Tích hợp từ dưới đi lên (Bottom-up integration) và tích hợp đi trên đi xuống (Top-down integration)

Tích hợp từ dưới đi lên:

Việc kiểm thử được bắt đầu bằng unit test, sau đó sẽ đi đến mức cao hơn, đó là kết hợp các thành phần và chức năng của hệ thống.

Tích hợp từ trên đi xuống:

Những module cấp cao nhất được thử nghiệm đầu tiên rồi đến các module thấp hơn được thử nghiệm.

Trong một môi trường phát triển phần mềm hiện đại, kiểm thử từ dưới lên thường được thực hiện đầu tiên và sau đó là kiểm thử từ trên xuống. Quá trình này được kết thúc sau nhiều vòng kiểm thử trên ứng dụng hoàn chỉnh, tốt nhất là sử dụng các kịch bản kiểm thử dựa trên các tình huống thực tế.

Kiểm thử hệ thống (System Testing)

Kiểm thử hệ thống được thực hiện trên một hệ thống hoàn chỉnh, tích hợp. Nó cho phép kiểm tra sự tuân thủ của hệ thống theo yêu cầu. Loại kiểm thử này kiểm tra sự tương tác tổng thể của các thành phần. Nó liên quan đến tải, hiệu suất, độ tin cậy và kiểm tra bảo mật.

Kiểm thử hệ thống thường xuyên nhất là kiểm tra cuối cùng để xác minh rằng hệ thống đáp ứng các đặc điểm kỹ thuật. Nó đánh giá cả nhu cầu chức năng và phi chức năng để thử nghiệm.

Đây là bước đầu tiên trong vòng đời phát triển phần mềm nơi mà ứng dụng sẽ được kiểm tra toàn bộ. Ứng dụng sẽ được kiểm thử kĩ để xác minh xem nó có đáp ứng các mô tả về chức năng và kĩ thuật không.

Ứng dụng được kiểm thử trong môi trường gần giống với môi trường thực tế nơi mà sản phẩm sẽ được cài đặt.

Kiểm thử chấp nhận (Acceptance Testing)

Kiểm thử chấp nhận là kiểm thử được tiến hành để tìm xem các yêu cầu của đặc điểm kỹ thuật hoặc hợp đồng có được đáp ứng với những yêu cầu của khách hàng hay không. Kiểm thử chấp nhận về cơ bản được thực hiện bởi người dùng hoặc khách hàng.

Đây là loại kiểm thử quan trọng vì nó được thực hiện bởi đội QA đánh giá xem liệu ứng dụng có đáp ứng các thông số kĩ thuật và yêu cầu của khách hàng. Đội QA sẽ tập hợp các kịch bản trước và các test case đó sẽ được sử dụng để kiểm thử ứng dụng.

Bài viết gốc được đăng tải tại tapchilaptrinh.vn

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

5 sai lầm thường thấy khi viết react component

Bài viết được sự cho phép của tác giả Lưu Bình An

Tổng hợp những lỗi thường thấy khi bạn viết react component, và làm sao để khắc phục

Đây cũng chẳng phải là những lỗi bắt buộc phải sửa, thoạt nhìn bạn cũng sẽ ko biết được nó có bị sai gì không, cũng không ảnh hưởng đến performance hay gì. Tuy nhiên mỗi người sẽ có ý kiến khác nhau trên một vấn đề, có người sẽ bắt fix, người thì cho là ko cần thiết, rất mong các bạn bổ sung cho quan điểm của mình.

8 quyết định quan trọng về React Component

Cách tôi viết document cho react component

Sử dụng useState khi không thực sự cần thiết

Đôi khi chúng ta sử dụng useState trong nhiều trường hợp không cần thiết, đưa những giá trị vào state không thực sự ảnh hưởng đến việc cập nhập component.

Ví dụ, trong ta có 2 cái nút: Counter và Submit, nút counter tăng giá trị count, nút submit sẽ gửi giá trị count lên API. Lưu ý là không có hiển thị giá trị count trên giao diện

❌

function ClickButton(props) {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount((c) => c + 1);
  };

  const onClickRequest = () => {
    apiCall(count);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

Nhìn chung code này cũng sẽ ko có lỗi gì đâu, chỉ là nếu để ý bạn sẽ thấy khi state thay đổi, component re-render, nhưng rõ ràng việc re-render cũng chẳng thay đổi gì, vì chúng ta không hiển thị giá trị count ra giao diện

✅ Cách làm đề nghị như sau

function ClickButton(props) {
  const count = useRef(0);

  const onClickCount = () => {
    count.current++;
  };

  const onClickRequest = () => {
    apiCall(count.current);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

Ở đây chúng ta dùng useRef, giá trị của useRef dù có thay đổi cũng không ảnh hưởng đến việc re-render.

Sử dụng router.push thay vì link

Ví dụ nếu chúng ta muốn navigate đến một trang nào đó khi user click vào❌

function ClickButton(props) {
  const history = useHistory();

  const onClick = () => {
    history.push('/next-page');
  };

  return <button onClick={onClick}>Go to next page</button>;
}

Vấn đề là nếu làm như vậy, làm sau user có thể mở ra một tab mới?, các trình screen reader cũng sẽ ko hiểu được nó là một link (accessibility không tốt).

✅ Cách làm đề nghị như sau

function ClickButton(props) {
  return (
    <Link to="/next-page">
      <span>Go to next page</span>
    </Link>
  );
}

Handle action bằng useEffect

useEffect là một trong những hook tốt nhất, và tốn nhiều giấy mực nhất của react. Mặc dù cũng hữu ích đấy nhưng cũng không ít lúc phải mệt mỏi với nó.

Thí dụ có một cái component fetch một danh sách dữ liệu, rồi render ra

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = () => {
    setLoading(true);
    callApi()
      .then((res) => setData(res))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (!loading && !error && data) {
      onSuccess();
    }
  }, [loading, error, data, onSuccess]);

  return <div>Data: {data}</div>;
}

Ở đây chúng ta setup 2 hook useEffect, cái đầu để load dữ liệu lần đầu tiên, cái thứ 2 để gọi onSuccess khi có thay đổi về dữ liệu.

Vấn đề là nó làm mất quan hệ 1-1 giữa action và function cần gọi. Nói một cách dễ hiểu hơn là việc onSuccess không đảm bảo chỉ được gọi khi get dữ liệu thành công, đâu đó trong code bạn vẫn có thể có những cách khác để gọi onSuccess.

✅ Cách làm đề nghị như sau

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = () => {
    setLoading(true);
    callApi()
      .then((fetchedData) => {
        setData(fetchedData);
        onSuccess();
      })
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    fetchData();
  }, []);

  return <div>{data}</div>;
}

Mỗi component một nhiệm vụ

Compose nhiều component nói chúng là khó, khó ở chỗ khi nào tách thì hợp lý. Lấy ví dụ như cái header sẽ xuất hiện một nút burger trên mobile và tab trên desktop❌

function Header({ menuItems }) {
  return (
    <header>
      <HeaderInner menuItems={menuItems} />
    </header>
  );
}

function HeaderInner({ menuItems }) {
  return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

Vấn để ở đây là với logic isMobile như vậy, chúng ta có thực sự cần thiết tách HeaderInner ra không?

✅ Cách làm đề nghị như sau

function Header(props) {
  return (
    <header>{isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}</header>
  );
}

Chỉ một công việc thực hiện trong `useEffect`

Nếu không cẩn thận việc sử dụng useEffect lắm lúc cũng giống như cơn ác mộng với componentWillReceivedProps và componentDidUpdate một thời. Tưởng tượng chúng ta có một component fetch dữ liệu từ backend, hiển thị breadcrumb tùy theo vị trí hiện tại ❌

function Example(props) {
  const location = useLocation();

  const fetchData = () => {
    /*  Calling the api */
  };

  const updateBreadcrumbs = () => {
    /* Updating the breadcrumbs*/
  };

  useEffect(() => {
    fetchData();
    updateBreadcrumbs();
  }, [location.pathname]);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

Chúng ta đang chạy 2 effect khác nhau: 1 là fetch dữ liệu, 2 là update breadcrumb trên giá trị location (nếu có thay đổi). Rõ ràng là đôi khi location có change thật nhưng chúng ta đâu cần fetchData chạy

Nên tách ra mỗi effect chỉ làm 1 việc thôi.

✅ Cách làm đề nghị như sau

function Example(props) {
  const location = useLocation();

  const updateBreadcrumbs = () => {
    /* Updating the breadcrumbs*/
  };

  useEffect(() => {
    updateBreadcrumbs();
  }, [location.pathname]);

  const fetchData = () => {
    /*  Calling the api */
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

Không biết còn trường hợp nào chúng ta vẫn hay mắc phải không, các bạn có thể chia sẻ thêm.

Five common mistakes writing react components (with hooks) in 2020

Bài viết gốc được đăng tải tại VuiLapTrinh

Có thể bạn quan tâm:

Xem thêm các việc làm lập trình React hấp dẫn tại TopDev

Tìm đồng nghiệp thật khó

Gần đây tôi tham gia phỏng vấn tuyển dụng cho team mình (lẫn cho công ty) khá nhiều. Càng làm tôi càng thấy tìm được một đồng nghiệp tốt đã khó, tìm ra một đồng nghiệp hoàn hảo gần như là không thể.

Phỏng vấn tuyển dụng là một qui trình khá căng thẳng, cho cả hai phía. Bạn có thể coi tuyển dụng cũng như kết hôn, khi hai người không hợp nhau nằm chung giường, thì dĩ nhiên sẽ khó có đứa trẻ nào được sinh ra.

Để tìm được bạn đồng nghiệp đáng yêu mà bạn muốn làm việc cùng hàng ngày, tương tự như tìm vợ, yếu tố lớn nhất là “may mắn”. Tuy nhiên khi đã may mắn, để gặp được người phù hợp, bạn nên làm thế nào để họ về chung một nhà, cũng như ngược lại khi gặp một người cố tình tán bạn nhưng lại thực sự không phù hợp, làm thế nào để không bị nhìn nhầm.

Nếu so sánh 2 nguy cơ: loại mất đồng nghiệp tốt (false positive), và phải làm việc cùng đồng nghiệp tồi (false negative) thì nguy cơ thứ hai gây ra hậu quả trầm trọng hơn rất nhiều.

Vậy làm thế nào để giảm nguy cơ thứ hai xuống tối thiểu?

Câu trả lời là không có câu trả lời! Ah mà thực ra là có câu trả lời nhưng nó giống như NP problem vậy. Tuy nhiên cá nhân tôi có đúc rút được một số cách để giảm thiểu nguy cơ thứ 2 (loại đồng nghiệp xấu).

Cách 1: Structured interview

Tôi biết khá nhiều công ty, có khi phải lên đến 90% các công ty tôi biết là phỏng vấn theo phong cách giáo sư xoay, hay còn gọi là ngẫu hứng. Riêng định nghĩa của từ “ngẫu hứng” đã có tính chất bất định. Structured interview đơn giản là một bộ câu hỏi có chuẩn bị trước. Độ sâu của câu hỏi tất nhiên sẽ tuỳ vào kiến thức của ứng viên, nhưng việc nó có cấu trúc sẽ giúp rất nhiều vào việc không bỏ sót nhưng điểm nhỏ mà đến lúc làm việc cùng bạn mới nhận ra.

Ngoài ra có một ưu điểm quan trọng của cách này là, nó giúp tránh các thiên kiến. Là engineer bạn sẽ có rất nhiều sở thích, nhưng không có nghĩa bạn đem sở thích đó vào phỏng vấn. Việc bạn thích compiler hay low level programming rất dễ dẫn đến xu hương đem các vấn đề đó vào phỏng vấn, cũng như dễ làm bạn có thiện cảm với người có kiến thức sâu về các mảng này, mặc dù không chắc mảng đó có liên quan đến công việc hiện tại.

13 điều giúp ứng viên... rớt phỏng vấn xin việc

Cách 2: Chú trọng system design test hơn algorithm test

Tôi nghĩ algorithm test là một qui trình rất quan trọng để kiểm chứng 2 điểm: một là bạn có “biết code” hay không, hai là bạn có biết cách giải thích các suy nghĩ của mình một cách dễ hiểu không. Cả 2 điểm đều quan trọng, với tôi thì điểm thứ 2 (communication) quan trọng hơn.

Tuy nhiên algorithm test không khó để luyện tập, có rất nhiều tài liệu trên mạng mà bạn có thể dễ dàng tìm thấy. Ở một số nước như India hày US thì các practice về algorithm test hầu như ai cũng nắm rõ. Tất cả những ứng viên tôi phỏng vấn đến từ 2 nước này đều dễ dàng pass algorithm test với các câu trả lời “đẹp như sách” (tất nhiên lý do có thể bao gồm algorithm test của công ty tôi chưa đủ khó nữa).

Vì vậy cá nhân tôi thấy algorithm test chỉ nên chiếm tỉ trọng 10~15% trong việc quyết định hire/no hire. Thay vào đó các câu hỏi liên quan đến system design nên được tăng tỉ trọng thêm. Các câu hỏi liên quan đến system design nên gần gũi với các project hàng ngày của team bạn, thay vì dùng các mẫu câu hỏi tìm được trên mạng. Nếu bạn đang làm ecommerce thì nên hỏi cách thiết kế payment gateway, nếu bạn đang làm storage team thì nên hỏi về cách làm một database đơn giản.

Cách 3: Tìm người có thể thay đổi tình trạng hiện tại thay vì tìm người để giao việc

Tuỳ vào từng giai đoạn của công ty bạn có thể có nhu cầu tìm người khác nhau. Khi công ty ở giai đoạn prototyping có thể bạn sẽ nghĩ rằng chỉ cần một lập trình viên làng nhàng có thể hoàn thành feature sớm nhất có thể. Cách nghĩ đó là hoàn toàn sai lầm. Bạn có thể tuyển một bạn sinh viên mới ra trường, chưa có kĩ năng nhưng có tiềm năng lớn hơn là tuyển một bạn “senior” kinh nghiệm 10×1 năm. (10 năm làm cùng 1 công việc).

Nói thì dễ nhưng việc nhìn ra “tiềm năng” từ một người khó vô cùng. Cá nhân tôi, định nghĩa “tiềm năng” chính là việc người đó có khả năng “thay đổi”. Dù tình trạng hiện tại có tồi tệ đến đâu, luôn luôn có những thứ có thể làm cho tốt hơn. Khả năng thay đổi mọi thứ có thể ví giống như “Midas gold touch”. Một người không thoả mãn với hiện tại, và có khả năng thực thi để thay đổi hiện tại luôn là một người bạn muốn có mặt trong team mình. Chính vì vậy một câu hỏi ưa thích của tôi khi phỏng vấn là “bạn đã làm gì để cải tiến team của mình” và “bạn tự hào nhất với project nào của mình”.

Cách 4: Xoá bỏ các định kiến (bias)

Con gái không biết code đc, ứng viên đến từ Sillicon Valley là hoàn hảo… là hàng loạt các định kiến mà hầu hết các công ty công nghệ đếu có. Bạn có thể không nói rõ các định kiến đó ra miệng, nhưng chắc hẳn nó sẽ vẫn đâu đó có trong đầu bạn. Structure Interview chính là cách tốt nhất để xoá bỏ định kiến. Ngoài ra việc bạn biết là bạn đang mang các định kiến cũng là một bước đầu tiên rất tốt. Hãy lập một list những điều bạn cảm thấy vừa lòng với đồng nghiệp hiện tại, và tạo nên một bộ câu hỏi dựa trên đó.

TL;DR

Tìm đồng nghiệp rất khó, thậm chí nhiều team còn chả có cơ hội thử thực hiện những điều tôi nói ở trên vì họ còn chả có hồ sơ đến! Tuy nhiên cá nhân tôi thấy nếu bạn đang ở vị trí ngược lại (người đi tìm việc chứ không phải nhà tuyển dụng), có một vài điểm có thể có ích với bạn:

Luôn cố gắng thay đổi tình trạng hiện tại. Bạn đang vướng trong một đống shit code, shit architecture, hãy vẽ nên một bức tranh mới tốt đẹp hơn và vẽ ra từng bước để thay đổi nó. Cá nhân tôi là một người ám ảnh bởi việc luôn làm mọi thứ tốt hơn, và tôi nghĩ cách nghĩ đó đã giúp tôi rất nhiều, kể cả việc thăng tiến trong công ty lẫn cả ngoài xã hội.
Tìm dự án nào mà khiến bạn tự hào là đã từng làm nó để ghi vào CV. Kĩ năng “tìm dự án ngon” là một kĩ năng thiết yếu mà tôi nghĩ bạn sẽ lãng phí thời gian lẫn năng lực cá nhân nếu không có kĩ năng này.
Khi không làm được hai điều trên ở team hiện tại (có thể vì chính trị công ty, vì công ty quá … lởm), hãy tìm việc mới ngay khi có thể.

TopDev via huydx.com

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

Quiz 04 gồm 2 Bounty có cấp độ với tổng giải thưởng lên đến $700

Quiz 04 bao gồm 2 bounty với cấp độ & giải thưởng khác nhau:

Bạn chỉ có thể tham gia 1 trong 2 bounty:

💎Standard Quiz 04 Bounty: tất cả mọi người đều có thể đăng ký tham gia. Bounty này có tổng cộng 15 câu hỏi với độ khó tương đương với các Quiz trước đây của Kambria Code Challenge.

👉Tìm hiểu thêm: https://bit.ly/Standard-Quiz-04-Bounty

💎Special Quiz 04 Bounty: chỉ những thí sinh đã tham gia ít nhất 2 Quiz của Kambria Code Challenge mới được tham gia Special Bounty. Special Bounty có tổng cộng 20 câu hỏi với độ khó cao hơn, cùng với giải thưởng lớn hơn.

Nếu bạn đủ điều kiện để tham gia Special Quiz 04 Bounty, hãy chú ý kiểm tra email thường xuyên. Kambria sẽ gửi email để hướng dẫn bạn tham gia vòng thi đặc biệt này.

Giải thưởng của Standard Quiz 04 Bounty:

🔹Giải quán quân: $75 + 79.000 KAT

🔹1 x Giải Á quân 1: $50 + 52.000 KAT

🔹2 x Giải Á quân 2: $25 + 26.000 KAT

Giải thưởng của Special Quiz 04 Bounty:

🔹Giải quán quân: $125 + 85,000 KAT

👉Đăng ký Standard Bounty: https://bit.ly/Standard-Quiz-04-Bounty

Quiz 04 là vòng cuối cùng của chương trình Kambria Code Challenge. Kambria Code Challenge là chuỗi các bài thi và hackathon trực tuyến liên quan đến lĩnh vực Trí tuệ nhân tạo (AI) và đã thu hút được sự tham gia của các lập trình viên xuất sắc tại Việt Nam và trên nhiều nước khác nhau. Ngoài ra, các lập trình viên có điểm số cao nhất sẽ được giới thiệu với các đối tác của Kambria, cung cấp các cơ hội việc làm mới.

Chương Trình Tích Lũy Điểm Thưởng

Các thí sinh tham gia và hoàn thành bài thi Quiz 04 sẽ được nhận Kambria Credit. Kambria Credit là chương trình tích lũy điểm thưởng, được sử dụng để thanh toán cho các dịch vụ trên nền tảng Kambria. Tìm hiểu thêm về Kambria Credit.

KAT là token sử dụng trên nền tảng của Kambria – Blockchain ủy quyền đầu tiên trên thế giới cung cấp mã nguồn mở robot và hệ sinh thái AI.

Thông tin cuộc thi:

Thời gian: 14:00, thứ 7, ngày 22/08/2020.
Đăng ký dự thi tại: https://bit.ly/Standard-Quiz-04-Bounty
Thông tin về cuộc thi: https://kambria.io/blog/kambria-code-challenge-quiz-04-reinforcement-learning/

Website: App.kambria.io/bounty