Home Blog Page 158

Tìm hiểu về Time Zone

Tìm hiểu về Time Zone

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

Cùng luận bàn những vấn đề liên quan đến time zone

Như Việt Nam chúng ta thì giá trị time zone chỉ có một GMT+7, với những nước to bự như Mỹ, Canada, Nga thì có phải tới vài ba cái time zone trong cùng một nước ( ko hiểu sao Trung Quốc thì chỉ có 1 giá trị Time zone, nên nhiều khu vực ở Trung Quốc mặt trời mọc lúc 10 AM)

GMT, UTC và Offset

GMT (Greenwich Mean Time) là thời gian tính theo cái đồng hồ Royal Observatory ở Greenwich, UK

UTC là một hệ thống tính toán thời gian quốc tế hơn, giá trị chuẩn xác hơn và được sử dụng rộng rãi hơn trong lập trình.

Offset

Giá trị +09:00 trong UTC+09:00 nghĩa là giờ địa phương đang trước mốc giờ chuẩn UTC 9 tiếng, khoảng khác biệt giữa giờ địa phương và giờ lấy làm mốc đó gọi là offset.

Một vài nước thích đặt tên time zone của mình theo tên riêng luôn, như Hàn Quốc thì nó là KST = UTC+09:00, giá trị time zone này cũng là giá trị của Nhật, Indo, và vài nước khác.

Giá trị offset lại ko phải căn cứ theo giờ, mà có thể chứa cả phút nữa, như Bắc Hàn thì dùng +08:30, Úc +08:45+09:30 một số vùng

Time zone !== offset

Đôi khi chúng ta hay dùng time zone và offset mang ý nghĩa tương tự nhau, như vậy thì chưa chuẩn xác. Lý do:

Summer time (DST)

Khái niệm này sẽ không gặp ở nhiều nước, đa phần các nước ở châu u sẽ dùng đến thuật ngữ “Summer time” này, nó có tên khoa học khác là Daylight Saving Time (DST) nghĩa là trong mùa hè thời gian nó sẽ đi trước một tiếng so với giờ chuẩn

Lấy một ví dụ, California USA dùng PST ( Pacific Standard Time) trong mùa đông và PDT (Pacific Daylight Time, UTC-07:00) trong mùa hè. Những khu vực sử dụng 2 time zone như vậy gọi là Pacific Time (PT)

Câu hỏi tiếp theo là như vậy căn cứ vào đâu để tính mùa hè và mùa đông bắt đầu/kết thúc. Phủ phàng là giá trị ngày DST ở các nước khác nhau là khác nhau và vào các năm khác nhau cũng khác nhau nốt. Như ở Canada và Mỹ, DST tính từ 2:00AM ngày chủ nhật đầu tiên của tháng 4 cho tới 12:00AM ngày chủ nhật cuối cùng tháng 10 cho tới năm 2006, nhưng sang năm 2007, thì nó từ 2:00AM ngày chủ nhật thứ 2 của tháng 3 đến 2:00AM ngày chủ nhật đầu tiên tháng 11

Time zone vui vui nó lại đổi

Nếu bạn thấy như vậy đã đủ phức tạp, thì bạn chưa biết gì đâu, Time zone nó còn phụ thuộc vào cả tình hình kinh tế, chính trị của một nước. Cụ thể năm 2007, tổng thống George Bush ký thỏa thuận năng lượng hồi năm 2005, làm giá trị DST này thay đổi trong năm 2007.

Vì quá rắc rối và phức tạp, Nga và Hy Lạp đã ko dùng luôn DST từ năm 2011

Trước đây Samoa sử dụng UTC-10:00, nhưng sau này nó chuyển sang UTC+14:00 để cắt giảm các thương vụ thất bại với Úc và New Zealand vì sự khác nhau về time zone. Vụ này lên báo toàn thế giới năm 2011, vì nó mất đi hẳn một ngày 30 tháng 12 để điều chỉnh time zone

Time zone trong môi trường Server-Client

Bây giờ hình dung bạn làm một cái app để lên lịch công việc, bạn lấy giá trị thời điểm user. Chọn ở phía client truyền xuống server rồi lưu lại giá trị đó, sau đó giá trị này được hiển thị lên phía client

Chuyện sẽ ra sao nếu client truy xuất từ những time zone khác nhau. Thí dụ lúc tạo lịch ở Việt Nam, nhưng sau đó nó đi công tác ở Mỹ rồi mở lên xem, giá trị lưu ở phía server phải là giá trị cố định và ko phụ thuộc time zone. Như vậy client chỉ cần làm việc là hiển thị giá trị đó đúng với time zone hiện tại.

Ngoài ra, lúc user tạo một mốc thời gian, chúng ta cũng chuyển nó qua đơn vị Unix time theo chuẩn ISO-8601 để chứa luôn thông tin offset 2017–03–10T11:30:00+09:00. Cái chúng ta làm đó thuật ngữ chuyên ngành hay dùng 2 từ để mô tả là parsing và formatting

Đối tượng Date trong javascript

Trong native javascript, chúng ta có đối tượng Date để làm việc với kiểu date, nhưng chắc không dev nào chịu xài đâu, vì nó có rất nhiều vấn đề, nên đa phần đều dùng thêm 1 thư viện bổ sung, đọc thêm bài Vì sao quần hùng kéo nhau không xài moment.js nữa

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 tuyển dụng IT mới nhất hấp dẫn tại TopDev

 

Cách mạng 0.4 của Neovim: Floating Window

Cách mạng 0.4 của Neovim: Floating Window

Bài viết đã được sự cho phép của tác giả Huy Trần

Trước khi bắt đầu: Nếu vì lý do gì đó mà bạn quyết định không đọc bài viết này vì bạn đang xài VSCode và thấy nó đủ xịn với bạn rồi, thì hãy suy nghĩ lại, đọc bài này, và tải về phiên bản Vim mình đã build. Nó không chỉ có mọi thứ hay ho mà VSCode có, mà còn có nhiều thứ khác xịn hơn mà VSCode không hề có.

Neovim từ phiên bản 0.4 có một chức năng cực kì hay ho đó là floating windows, giúp hiển thị một buffer ở bất kì vị trí nào trên màn hình. Nên nhớ là chúng ta đang nói đến Neovim, một editor hoạt động trên terminal, nơi mà mọi thứ chỉ là text và không hề có các khái niệm về giao diện đồ họa.

Sau khi chức năng này được release thì cộng đồng Neovim đã adopt nó khá nhanh, rất nhiều plugin áp dụng nó khá hiệu quả ví dụ như coc.nvim hay denite.nvim.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về floating window thông qua việc build một chức năng giúp cho Neovim có thể mở nhanh một cửa sổ terminal emulator, nằm floating trên màn hình. Mình thường dùng chức năng này khi cần thực hiện nhanh một thao tác nào đó như tạo git branch, push hoặc pull code mà lười xài Tmux.

Tìm hiểu API của Neovim

Neovim đã có sẵn terminal emulator built in, đó là lệnh :terminal, khi chạy lệnh này, cửa sổ hiện tại sẽ được thay thế bằng một terminal buffer. Vậy, ý tưởng sẽ là: Tạo một cửa sổ mới, làm cho nó float ở giữa màn hình và chạy lệnh :terminal trong đó.

Theo như document về floating windows để tạo một floating window, chúng ta cần hai thứ: 1) một buffer và 2) gọi hàm nvim_open_win() trên buffer đó.

Để tạo mới một buffer, ta có thể dùng hàm nvim_create_buf(). Kết hợp hai hàm này với nhau như thế này:

let buf = nvim_create_buf(v:false, v:true) let opts = { \ 'relative': 'cursor', \ 'width': 10, 'height': 2, \ 'col': 0, 'row': 1, \ 'anchor': 'NW', \ 'style': 'minimal' \ } let win = nvim_open_win(buf, 0, opts)

Nói qua về đối tượng opts, đây là các thông số thiết lập cho cửa sổ sẽ được tạo, có mấy thông số cần nói tới như là:

  • relative: cho biết cửa sổ mới sẽ có tọa độ dựa trên đối tượng nào, nếu là editor thì tọa độ sẽ dựa trên toàn bộ màn hình Vim, là win thì tọa độ sẽ dựa trên split window hiện hành, là cursor thì tọa độ sẽ dựa trên vị trí con trỏ hiện tại (dùng trong trường hợp làm autocomplete chẳng hạn).
  • style: hiện chỉ nhận 1 giá trị là minimal, nếu truyền giá trị này thì các thành phần như line number, cursor line,… sẽ được ẩn đi hết.
  • Mấy thông số như widthheight chắc khỏi cần nói tới.
  • Còn col và row là để chỉ định tọa độ ban đầu của cửa sổ.

Cả hai hàm nvim_create_buf() và nvim_open_win() đều trả về id của buffer / floating window vừa tạo ra, chúng ta sẽ dùng các id này khi cần thực hiện các thao tác thiết lập khác.

First implementation

Như vậy, chúng ta đã biết cần phải sử dụng những hàm nào trong API của Neovim để có thể implement chức năng floating terminal. Cụ thể các bước cần thực hiện là:

  1. Tạo một buffer mới
  2. Tạo floating window từ buffer này
  3. Khởi động terminal emulator trên buffer vừa tạo với lệnh :terminal

Ngoài ra, chúng ta muốn cửa sổ được tạo ra phải nằm chính giữa màn hình, trong trường hợp này, Neovim có hai biến &lines và &columns cho chúng ta biết kích thước của toàn bộ màn hình Neovim là bao nhiêu, để có thể tính toán ra các giá trị widthheightrow và col thích hợp.

Cách mạng 0.4 của Neovim: Floating Window

Mặc định, sau khi khởi tạo terminal trong một buffer, thì buffer đó vẫn còn trong chế độ Normal Mode, để tiện hơn chúng ta có thể dùng lệnh startinsert, đưa buffer đó vào chế độ Insert Mode luôn.

Implement như sau (chắc không nói thì các bạn cũng biết là chúng ta đang gõ vào file init.vim):

function! OpenFloatTerm() let height = float2nr((&lines - 2) / 1.5) let row = float2nr((&lines - height) / 2) let width = float2nr(&columns / 1.5) let col = float2nr((&columns - width) / 2) let opts = { \ 'relative': 'editor', \ 'row': row, \ 'col': col, \ 'width': width, \ 'height': height, \ 'style': 'minimal' \ } let buf = nvim_create_buf(v:false, v:true) let win = nvim_open_win(buf, v:true, opts) terminal startinsert endfunction

Xong rồi, giờ reload Neovim và chạy thử, kết quả sẽ như hình:

:so % | call OpenFloatTerm()

Cách mạng 0.4 của Neovim: Floating Window

Trông cũng xịn phết! Nhưng mà hơi xấu một tí.

Hiện tại thì Neovim chưa hỗ trợ các thành phần như margin, padding hay border cho floating windows, nên nhìn cái cửa sổ terminal hiện lên chưa đã con mắt cho lắm.

Trong phần tiếp theo, chúng ta sẽ cùng tìm cách fix.

Second implementation: Cải tiến giao diện

Có một trick, hơi hacky một tí để giải quyết vấn đề padding đó là tạo một cửa sổ to hơn nằm bên dưới cửa sổ terminal hiện tại, trông như thế này:

Cách mạng 0.4 của Neovim: Floating Window

Lưu ý, vì Neovim là môi trường text mode, một ô trên màn hình sẽ là một hình chữ nhật đứng, có tỉ lệ gần như là 1:2, nên việc tính lại tọa độ cũng như kích thước của cửa sổ làm border cũng sẽ được thực hiện với tỉ lệ 1:2.

Tọa độ của cửa sổ border sẽ nằm về phía trên và bên trái của cửa sổ terminal, tương tự kích thước của cửa sổ border cũng sẽ dài và cao hơn cửa sổ terminal:

column border=column main−2row border=row main−1width border=width main+4height border=height main+2column border=column main−2row border=row main−1width border=width main+4height border=height main+2

Hàm OpenFloatTerm() bây giờ sẽ có 2 bước:

function! OpenFloatTerm() let height = float2nr((&lines - 2) / 1.5) let row = float2nr((&lines - height) / 2) let width = float2nr(&columns / 1.5) let col = float2nr((&columns - width) / 2) " Border Window let border_opts = { \ 'relative': 'editor', \ 'row': row - 1, \ 'col': col - 2, \ 'width': width + 4, \ 'height': height + 2, \ 'style': 'minimal' \ } let border_buf = nvim_create_buf(v:false, v:true) let border_win = nvim_open_win(border_buf, v:true, border_opts) " Main Window let opts = { \ 'relative': 'editor', \ 'row': row, \ 'col': col, \ 'width': width, \ 'height': height, \ 'style': 'minimal' \ } let buf = nvim_create_buf(v:false, v:true) let win = nvim_open_win(buf, v:true, opts) terminal startinsert endfunction

Giờ chạy thử xem:

Cách mạng 0.4 của Neovim: Floating WindowCách mạng 0.4 của Neovim: Floating WindowCách mạng 0.4 của Neovim: Floating Window

Trông có vẻ thuận con mắt hơn tí rồi. Nhưng mà chúng ta lại gặp bug! Khi đóng cửa sổ terminal thì cửa sổ border nó vẫn còn nằm yên không chịu biến mất.

Nguyên nhân thì rõ ràng, chúng ta chỉ tương tác với cửa sổ terminal mà không làm gì cửa sổ border hết. Để giải quyết vấn đề này, chúng ta có hàm nvim_close_win(), dùng để đóng một cửa sổ bất kì, ta có thể gọi hàm này khi cửa sổ terminal bị đóng.

Làm sao để biết khi nào cửa sổ terminal bị đóng?

Lại tra tài liệu, chúng ta sẽ thấy sự kiện TermClose được gọi khi chúng ta rời khỏi chế độ Terminal. Để bắt sự kiện này, ta dùng lệnh autocmd, như thế này:

autocmd TermClose * ++once :q | call nvim_win_close(<window-id>, v:true)

Tham số * ở đây có nghĩa là lệnh áp dụng cho mọi buffer, tham số ++once sẽ làm cho lệnh này chỉ thực thi 1 lần. Đồng thời, khi terminal bị tắt, Neovim sẽ không đóng buffer chứa terminal đó đi, mà hiện dòng chữ [Process exited 0], chúng ta phải gửi thêm lệnh :q để đóng nó.

Đây là implementation hoàn chỉnh:

function! OpenFloatTerm() let height = float2nr((&lines - 2) / 1.5) let row = float2nr((&lines - height) / 2) let width = float2nr(&columns / 1.5) let col = float2nr((&columns - width) / 2) " Border Window let border_opts = { \ 'relative': 'editor', \ 'row': row - 1, \ 'col': col - 2, \ 'width': width + 4, \ 'height': height + 2, \ 'style': 'minimal' \ } let border_buf = nvim_create_buf(v:false, v:true) let s:border_win = nvim_open_win(border_buf, v:true, border_opts) " Main Window let opts = { \ 'relative': 'editor', \ 'row': row, \ 'col': col, \ 'width': width, \ 'height': height, \ 'style': 'minimal' \ } let buf = nvim_create_buf(v:false, v:true) let win = nvim_open_win(buf, v:true, opts) terminal startinsert " Hook up TermClose event to close both terminal and border windows autocmd TermClose * ++once :q | call nvim_win_close(s:border_win, v:true) endfunction

Và đây là thành phẩm:


Hy vọng qua bài viết này, các bạn sẽ hiểu được phần nào chức năng Floating Windows của Neovim, cũng như những ứng dụng mà nó mang lại. Từ đầu tới giờ viết dông dài vậy thôi chứ nếu bạn chỉ xài Vim như là một user bình thường thì không cần đọc bài này đâu.

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

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

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

Vì sao quần hùng kéo nhau không xài moment.js nữa

Vì sao quần hùng kéo nhau không xài moment.js nữa
Bài viết được sự cho phép của tác giả Lưu Bình An
Tất cả chúng ta đã từng và đang sử dụng moment.js mà ko hề dành chút thời gian để xem nó ảnh hưởng như thế nào đến performance

Trước đây khi nhắc đến thư viện xử lý ngày tháng, là trong đầu mọi developer frontend sẽ nghĩ ngay tới Moment.js, tuy nhiên dạo gần đây, đâu đâu cũng nghe cũng thấy đến các bài viết khuyên chúng ta bỏ ngay moment.js hoặc ít nhất là xài một cách cẩn trọng hơn.

Thằng Date object build sẵn của javascript thì ko đủ xài. Sớm hay muộn chúng ta cùng cần đến một thư viện thứ 3 để làm việc với ngày tháng, và lựa chọn hiển nhiên trước đây là moment.js. Một thư viện tất cả trong một, giải quyết tuốt tuồn tật các vấn đề liên quan đến ngày tháng.

Vậy tại sao bây giờ người ta chê nó?

Nó quá chậm

Trong quá trình thực hiện optimize cho dự án, tác giả bài này (ko phải mình nhé) đã phát hiện ra rằng, phần lớn những chổ tắt nghẽn là ở chỗ parsing ngày chuẩn ISO8601 từ database, cụ thể là hàm moment(ISO8601_DATE_HERE), khá là sốc với kết quả này, vì ko dùng bất cứ một định dạng đặc biệt nào, một input chuẩn ISO bình thường, nếu mà dùng moment(new Date(ISO8601_DATE_HERE)) thì nhanh hơn gấp 7 lần.

Thực hiện test và so sánh với một số thư viện khác

Vì sao quần hùng kéo nhau không xài moment.js nữa

Parsing giá trị ISO 8601

Moment.js tốn khoảng 9 giây để parse 100.000 giá trị ngày ISO8601, trong khi đó Day.js chỉ mất .5 giây, các API cung cấp khá giống nhau, tuy nhiên thằng Day.js khôn hơn, nó xác định giá trị z ở cuối string, nếu có nó sẽ gọi new Date(string). Trong khi Moment.js, Luxon và JS-Joda sử dụng một regex của từng thằng để làm.

Lưu ý không dùng Day.js hay Date-Fns nếu bạn cần hỗ trợ IE9, hy vọng là bạn không xui tới vậy, từ ES5 thì Date.parse mới làm việc tốt với ISO 8601

Parsing giá trị EPOCH

Kết quả parse EPOCH Time thì các thư viện cho kết quả tương đương, tuy nhiên nếu bạn là đứa nghiện tốc độ, khuyến nghị sử dụng Date-Fns

Format

Về vấn đề format, các thư viện lại gần như ko cung cấp hàm nào cả, đa phần tụi nó sẽ dùng regex để thực hiện. Riêng thằng JS-Joda sử dụng một hàm trong đó nó ì các kiểu để kiểm tra, rồi charAt nên nhanh hơn một chút so với những thằng dùng regex

Tính toán

Các phép toán trên ngày tháng đúng là lằn xà ngoằn, moment.js làm khá tốt hơn hẳn Day.js và Luxon, tuy nhiên vô đối vấn là JS-Joda trên vụ này.

So sánh

Kiểm tra 2 giá trị ngày có là bằng nhau tương đối phức tạp hơn so sánh 2 ngày có lớn hơn nhau, bởi vì chúng ta không thực hiện so sánh giá trị khoảng thời gian (timestamps) Mấy thư viện khác ngoài Luxon có vẻ ok, không rõ vì sao Luxon lại lấp vấp vụ này.

Nó quá nặng

Vì sao quần hùng kéo nhau không xài moment.js nữa

Moment.js dung lượng khoảng 232kB (zip lại thì cỡ 66 kB), mà theo Yoshihide Jimbo thì có thể cắt bớt chỉ còn 68 kB ( 23 kB zip) bằng cách loại bỏ locale.

JS-Joda chỉ nhẹ hơn Moment.js chút xíu, tuy nhiên do nó cũng là thư viện nặng vì phải chứa period và time zone, 2 thằng này dùng Moment.js bạn phải cài thêm dạng plugin

Mấy thằng còn lại như Luxon, Day.js, Date-Fns thì nhẹ khỏi nói, ít nhất cũng phải nhẹ hơn 22 lần so với moment.js

Nếu bạn đang dùng moment.js ở Backend thì ko sợ nhiều, chứ còn ở Frontend thì 1kb cũng có giá của nó.

Nó Mutable

Ví dụ bạn đang làm một cái app lịch hiển thị những sự kiện sắp diễn ra.

const startedAt = moment() const endedAt = startedAt.add(1, 'year') console.log(startedAt) // > 2020-02-09T13:39:07+01:00 console.log(endedAt) // > 2020-02-09T13:39:07+01:00

startedAtendedAt đều là mutable (có thể thay đổi), rõ ràng chúng ta không muốn giá trị của startedAt bị thay đổi sau khi gọi hàm add

const init = moment() const add = init.add(1, 'year') const sub = init.subtract(10, 'months') const start = init.startOf('year') const end = init.endOf('year') const utc = init.utc() const local = init.local() const offset = init.utcOffset(480)

Tất cả đống biến này đều trỏ tới cùng 1 object. Giải quyết cũng đơn giản

const startedAt = moment() const endedAt = moment(startedAt).add(1, 'year')

Khi dùng Moment.js luôn nhớ dùng cách này để tạo một instance mới

Quá khó để debug

Nếu giá trị input đẹp đẽ, sạch sẽ, mọi việc đều sẽ trót lọt (ko tính đến vụ mutation nhé). Tuy nhiên đời mà ai lại ko có lỗi lầm

Giờ chúng ta thử ví dụ, có object là. person { lastVisitedAt }

const person = { lastVisitedAt: '2017-11-11T00:00:00.000Z' } moment(person.lastVsitedAt).format() // > '2019-02-08T16:01:45+01:00'

Nếu bạn lỡ gõ nhầm tên property như vậy đi lastVsitedAt, thì moment(undefined) cũng không throw error luôn.

Giờ thử đưa mấy giá trị lạ lạ như sau vào moment()

moment().format() // > 2019-02-08T17:07:22+01:00 moment(undefined).format() // > 2019-02-08T17:07:22+01:00 moment(null).format() // > Invalid date moment({}).format() // > 2019-02-08T17:07:22+01:00 moment("").format() // > Invalid date moment([]).format() // > 2019-02-08T17:07:22+01:00 moment(NaN).format() // > Invalid date moment(0).format() // > 1970-01-01T01:00:00+01:00

Moment.js ko throw error mà chỉ trả về Invalid Date object

Khi gọi toISOString() nó lại lạ kỳ trả về null chứ ko phải chuỗi Invalid Date

moment().toISOString() // > 2019-02-08T16:14:10.835Z moment(undefined).toISOString() // > 2019-02-08T16:14:10.835Z moment(null).toISOString() // > null moment({}).toISOString() // > 2019-02-08T16:14:10.836Z moment("").toISOString() // > null moment([]).toISOString() // > 2019-02-08T16:14:10.836Z moment(NaN).toISOString() // > null moment(0).toISOString() // > 1970-01-01T00:00:00.000Z

Nói cách ngắn gọn, undefined không hợp lệ trong moment(), nhưng null thì ok. Bị lỗi ư, nó trả về một Invalid Date objectnull hoặc custom object tuỳ vào nó vui hay buồn.

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 JavaScript hấp dẫn tại TopDev

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

Những nhận định về thời gian làm việc, đồng hành và gắn bó với một tổ chức luôn là vấn đề mà nhiều nhân viên quan tâm. Đặc biệt là những “lính mới” vừa gia nhập chuyến hành trình nghề nghiệp.

Một câu hỏi lớn đặt ra là liệu bản thân mình sẽ gắn bó với công ty trong bao lâu. 1 năm, 2 năm hay nhiều hơn. Tất nhiên đó chỉ là những con số mang tính ước định. Cùng TopDev đi tìm lời giải đáp cho vấn đề này.

“Kịch bản” nào tốt nhất cho sự rời đi?

Mỗi cá nhân sẽ có những suy nghĩ riêng về các mốc thời gian tương ứng cho sự rời đi của mình. Đó có thể là chỉ là sự hình dung thời khoảng thời gian mà mỗi nhân viên có thể đồng hành và gắn bó cùng công ty. Song song đó là những phân tích, sự nhìn nhận chung mà bản thân nhân viên rút ra được để làm hài lòng “kịch bản” cho riêng mình.

đồng hành

Có lẽ 6 tháng đến 1 năm?

Đây có thể là quyết định bất ngờ, nảy ra trong chớp nhoáng hoặc khi bạn phải trải qua quá nhiều áp lực công việc chăng?

Áp lực có thể đến từ khối lượng công việc, mức phúc lợi, môi trường làm việc, các mối quan hệ công sở,..tất tần tật mọi yếu tố đó đều có thể dễ khiến nhân viên nản chí. Điều này chứng tỏ họ là một cá thể “cả thèm chóng chán”, thiếu năng lực thích nghi và vì thế họ nhảy việc liên tục. Họ thiếu nghị lực và sự cố gắng cần có, vì thế họ sẽ khó thành công.

3 – 5 năm tại một công ty thì sao?

Chúng ta sẽ có hai khía cạnh cần xem xét. Trong trường hợp nếu bạn được đảm nhận nhiều vị trí khác nhau hoặc có sự thăng tiến riêng thì khả năng đồng hành và gắn bó sẽ cao hơn. Khi đến một giai đoạn không còn đủ niềm vui trong công việc, bạn buộc phải dừng lại và tìm kiếm những điều mới mẻ, phù hợp hơn với mình.

Còn ngược lại thì sao? Bạn sẽ tự nghi ngờ về khả năng, sự phù hợp của mình với công việc và doanh nghiệp mình đang đồng hành. Hàng tá câu hỏi sẽ xoay quanh bạn: Mình chưa đủ nỗ lực sao? Có lẽ mình không còn biết làm thế nào để phát triển bản thân cả?,.. 

Cho dù bạn rời đi, đó cũng là quyết định của bạn nhưng nhớ, đừng bao giờ để bản thân mình phải đến mức thật sự tuyệt vọng vì cuộc sống này còn nhiều thứ còn khắc nghiệt hơn.

Trên 10 năm có phải là một sự gắn bó trọn vẹn nhất?

Con số 10 nó không là gì khi đặt nó trong phạm trù toàn học. Tuy vậy, khi suy xét ngoài thực tế, 10 năm là một quá trình làm việc dài, đòi hỏi ở bạn nhiều sự kiên trì, đôi lúc phải đánh đổi nhiều thứ về thời gian, công sức, các mối quan hệ để có được một chỗ đứng, vị thế như hiện tại.

đồng hành

Và tất nhiên, chúng ta sẽ đề cập đến những người với bề dày kinh nghiệm thuộc hàng top, họ đã được có cơ hội thử sức và trải nghiệm với nhiều vị trí khác nhau từ thấp đến cao. Vậy liệu họ có nên chuyển công ty trong giai đoạn này? Có hoặc không tùy thuộc vào mỗi người. 

Trên thực tế, họ là những người đã có chuyên môn vững chắc, nền tảng nghề nghiệp tốt nhưng cái họ mất đi chính là sự mạo hiểm và dấn thân – cái mà tuổi trẻ họ đã từng làm. Họ e ngại rằng khi qua một công ty khác với một thế hệ trẻ hơn, năng động hơn, tiếp cận với một lối văn hóa, môi trường làm việc khác họ sẽ khó thích nghi. Khoảng cách về tuổi tác và kinh nghiệm có thể sẽ làm họ shock và khó có thể trụ lại được. 

Đâu là câu trả lời lý tưởng cho vấn đề này?

Nếu tất cả các dấu hiệu xung quanh bạn đều chứng tỏ rằng bạn đã chọn sai công việc, thì việc lựa chọn đổi việc là điều đúng đắn và cần thiết phải diễn ra. Miễn là, khi nhảy việc có ý nghĩa thật sự với mục tiêu công việc tổng thể và dài hạn của bạn. Nếu được lựa chọn, bản thân chủ bài viết này sẽ chọn khoảng thời gian từ 1-2 năm để gắn bó và hợp tác, tất nhiên trước đó phải có 2 hoặc 3 tháng để trải nghiệm, tìm hiểu công ty thông qua quá trình thử việc.

Ngoài ra, việc nhìn nhận luôn luôn là điều cần phải lưu tâm, nếu mình nhận thấy cá nhân mình tạo được những giá trị và được tổ chức công nhận, mình sẽ tiếp tục gắn bó và lập kế hoạch hoạt động cho những năm tiếp theo. 

Để có những quyết định chính xác trong vấn đề này, bạn có thể tìm những “lối tắt” cho riêng mình. Hãy đặt ra những câu hỏi: 

  • Bạn đã bao nhiêu lần than vãn về công việc hiện tại của mình?
  • Bạn phải chấp nhận thay đổi cải thiện điều gì khi thực hiện công việc đó?
  • Công việc đó liệu có những triển vọng tốt hơn chăng?

Đây đều là những câu hỏi giả định nhưng chúng có vai trò quan trọng vì giúp bạn đánh giá được mức độ tự nhìn nhận về khả năng chịu áp lực trước các công việc, những đòi hỏi cần phải thích nghi khi quyết định bắt đầu trải nghiệm một công việc mới hoặc những lợi thế, triển vọng phát triển, thăng tiến khi bạn rời đi và gia nhập một “ngôi nhà mới”.

Lời kết

Chuyện nhảy việc đã không còn xa lạ trong môi trường làm việc hiện đại. Nhiều cơ hội luôn mở ra và chờ đón bạn nếu bạn có những quyết phù hợp. Hãy tự hỏi bản thân và đánh giá nhiều yếu tố xung quanh về sự đồng hành và gắn bó trước khi đi đến những quyết định nhảy việc.

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

Xem thêm Top Việc làm ngành cntt trên TopDev

MoMo đầu tư cho nguồn nhân lực trẻ mảng Công nghệ thông tin – Sản phẩm

Phía sau thành công của MoMo – Ví điện tử số 01 Việt Nam trên hành trình phát triển và mang đến người dùng các dịch vụ thanh toán đa tiện ích chính là dấu ấn của đội ngũ nhân lực đầy tài năng. Trong đó, nguồn nhân lực trẻ mảng công nghệ thông tin – sản phẩm được MoMo quan tâm, đầu tư phát triển như “át chủ bài” trước nhu cầu ngày càng cao của thị trường.

Chia sẻ về vai trò của nguồn nhân lực nói chung đối với sự phát triển không ngừng của MoMo những năm gần đây, bà Manisha Shah, Phó Tổng giám đốc cấp cao cho hay:

“MoMo là một tổ chức chuyển động rất nhanh. Với bốn giá trị cốt lõi gồm tinh thần đồng đội, đổi mới sáng tạo, học hỏi không ngừng và thực thi xuất sắc, chúng tôi tìm kiếm những nhân tố biết làm việc theo nhóm, mong muốn kiến tạo, có tài năng và đam mê hướng tới mục tiêu chung. Điều tiên quyết là bạn phải thoải mái với môi trường làm việc thay đổi liên tục để phát triển tại MoMo.” Bà Manisha Shah, Phó Tổng giám đốc cấp cao tại MoMo chia sẻ.

Trong bối cảnh đến năm 2025, theo dự báo của Ngân hàng Nhà nước Việt Nam, tín dụng cá nhân sẽ chiếm khoảng 24% thị trường ứng dụng công nghệ trong dịch vụ tài chính (Fintech). Theo đó, nhu cầu tài chính cá nhân ở Việt Nam được cho là sẽ tiếp tục tăng trưởng khi cách mạng 4.0 bùng nổ mạnh mẽ. Như hệ quả tất yếu, “làn sóng công nghiệp 4.0” này đã mở ra nhiều cơ hội việc làm cho các bạn trẻ tài năng đam mê lĩnh vực công nghệ thông tin và phát triển sản phẩm ở các công ty Fintech. MoMo, ở vị thế Ví điện tử số 01 Việt Nam, vì vậy luôn chú trọng phát triển nguồn nhân lực trẻ, tài năng này.

“MoMo Talents 2020 – Future in your hands” hứa hẹn là bệ phóng phát triển sự nghiệp toàn diện cho các bạn trẻ đam mê công nghệ và phát triển sản phẩm.

Để đón đầu xu hướng tuyển dụng này, những năm qua, chương trình tuyển dụng MoMo Talents được MoMo đầu tư, tổ chức thường niên theo quy mô ngày càng lớn.

Thông tin chương trình MoMo Talents 2020 thu hút nhiều sự quan tâm, tìm hiểu của các bạn sinh viên trẻ, tài năng tại các job fair.

Nhìn lại không khí háo hức chào đón sự trở lại của MoMo Talents mùa thứ 4 lần này từ các bạn sinh viên trẻ, bạn Trần Thị Lạng – Tech Trainee của MoMo Talents 2019 cho hay:

“Việc tham gia MoMo Talents là quyết định lớn, có ý nghĩa quan trọng với sự nghiệp của mình khi còn là một sinh viên sắp ra trường. Chương trình đã cho mình rất nhiều trải nghiệm và cơ hội thú vị. Mình đã được tham gia vào quy trình làm việc chuyên nghiệp và cũng không kém phần ‘’thử thách” tại MoMo. Có thể nói, bản thân mình ngày càng học hỏi được nhiều thứ mới mẻ và phát triển bản thân nhiều hơn. Điều mình thích thích là team mình có những người rất giỏi, mọi người luôn luôn chia sẻ với nhau những vấn đề trong cả công việc và cuộc sống, qua đó có thể hiểu nhau hơn cũng như cùng nhau giải quyết những vấn đề một cách dễ dàng hơn.”

“Mình trưởng thành hơn nhiều cả kiến thức chuyên môn lẫn kinh nghiệm sống khi được các anh chị đi trước hướng dẫn, hỗ trợ” Bạn Trần Thị Lạng – Tech Trainee MoMo Talents 2019 chia sẻ về môi trường làm việc tại MoMo.

Trong khi đó, bạn Nguyễn Phi Hùng, Tech Trainee MoMo Talents 2019, hiện đang là Data Engineer ở MoMo, nhắn gửi đến các thí sinh MoMo Talents 2020:

“Hãy tự tin đăng ký tham gia MoMo Talents 2020 bạn nhé. Chỉ cần bạn tự tin, không ngừng học hỏi và có tinh thần trách nhiệm với công việc, dưới sự hướng dẫn hỗ trợ nhiệt tình của các anh chị trong team, chắc chắn bạn sẽ trở thành một “phiên bản” tốt hơn khi tham gia chương trình MoMo Talents đó. Hy vọng sẽ sớm được gặp các bạn tại MoMo.”

Ngày 22/07 vừa qua, MoMo Talents 2020 đã chính thức mở đăng ký tại website: http://career.momo.vn/. Với nhiều đổi mới đầy hấp dẫn, mùa giải thứ 4 của MoMo Talents hứa hẹn sẽ mang đến cho các bạn sinh viên trẻ, tài năng nhiều trải nghiệm thú vị. Cánh cửa đến MoMo – Nơi làm việc tốt nhất châu Á 2020 đã mở cửa, đừng chần chờ nữa, đăng ký ngay bạn ơi!

Một vài ghi chép về lệnh Iterator trong JavaScript

Một vài ghi chép về lệnh Iterator trong JavaScript

Bài viết được sự cho phép của tác giả Huy Trần

Một phút dành cho việc tra từ điển liên quan đến Iterator:

  • iterate: make repeated use of a mathematical or computational procedure, applying it each time to the result of the previous application; perform iteration – là từ chỉ một hành động lặp đi lặp lại từng lượt trong một quá trình xử lý/tính toán nào đó.
  • iteration: là từ dùng để nói đến mỗi lần iterate.
  • iterable: là từ dùng để nói đến khả năng iterate của một đối tượng nào đó.

Kể từ sau đây thì mình sẽ dùng những chữ này mà không dịch ra tiếng Việt nữa, lý do là dịch ra thì viết dài dòng, bài đã dài rồi, bớt được gì thì bớt lại chút.


Trong JavaScript, vòng lặp for...of có tác dụng iterate qua nội dung của các đối tượng iterable (iterable objects).

const text = "hello"; // String là một iterable object for (const c of text) { console.log(c); } // Output: "h" "e" "l" "l" "o"

Một đối tượng được coi là iterable nếu như nó thõa mãn iterable protocol, theo đó, nó phải được implement phương thức Iterator @@iterator, hay còn có thể ghi là Symbol.iterator, như này:

a["@@iterator"] = ... // hoặc a[Symbol.iterator] = ...

Hồi xưa các cụ phải xài "@@iterator" vì Symbol chưa được support rộng rãi, tuy nhiên đến bây giờ thì hầu như ai cũng đã hỗ trợ Symbol, tất nhiên là trừ IE ra.

Một vài ghi chép về lệnh Iterator trong JavaScript

Việc implement phương thức [Symbol.iterator] này phải trả về một object thỏa mãn iterator protocol.

const obj = ...; for (const o of obj) { } // không chạy được vì obj không iterable obj[Symbol.iterator] = () => { ... }; for (const o ob obj) { } // giờ thì đã iterable rồi

Một object thỏa mãn giao thức iterator protocol nếu nó có một hàm next(), hà này không nhận vào tham số nào, và trả về một kết quả có dạng:

next() { return { value: ..., done: false }; }

Giá trị của value sẽ là giá trị xuất hiện trong mỗi iteration. Vòng lặp sẽ tiếp tục cho đến khi kết quả trả về có done là true.

Chúng ta có thể dễ dàng tạo ra một object thỏa mãn cả hai giao thức iterable và iterator theo cách sau:

let obj = { next: function() { // ... }, [Symbol.iterator]: function() { return this; } };

Cú pháp như này thì rất ngắn gọn, trông rất ngầu, nhưng mà đọc vô sẽ khó hiểu hơn, nên ở các phần tiếp theo chúng ta sẽ không viết như này nữa, mà viết theo cách khác dễ hiểu hơn (cũng dễ reuse hơn).

Thêm tí, nếu không lặp bằng for...of, chúng ta cũng có thể lặp thủ công như với generator:

let iter; while (iter = iterator.next(), !iter.done) { // ... }

Có thể thấy, iterator là một công cụ giải quyết vấn đề khá là lợi hại, để hiểu rõ hơn, hãy cùng xem qua một vài ví dụ với nó.

Ví dụ: Tách chuỗi

Một vài ghi chép về lệnh Iterator trong JavaScript

Giả sử chúng ta muốn implement một hàm words() cho kiểu dữ liệu String trong JavaScript, theo đó, hàm này sẽ có nhiệm vụ tách chuỗi hiện tại thành một mảng chứa các từ trong chuỗi.

const text = "The quick brown fox jump over a lazy dog";

Đầu tiên, chúng ta cần phải tạo ra một iterator, đây sẽ là một class tên WordIterator, class này sẽ có constructor làm nhiệm vụ tách chuỗi hiện tại thành nhiều từ, bằng hàm String.prototype.split(). Cuối cùng, ta sẽ implement hàm next(), có nhiệm vụ từng bước trả về mỗi từ đã được tách cho đến khi không còn từ nào nữa thì kết thúc.

class WordIterator { constructor(data) { this.data = data.split(/\s/); this.index = -1; } next() { this.index++; if (this.index < this.data.length) { return { value: this.data[this.index], done: false } } return { done: true }; } }

Tiếp theo, chúng ta sẽ implement hàm words() cho kiểu String, trong hàm này, chúng ta sẽ implement phương thức [Symbol.iterator] cho chuỗi đang được xử lý.

String.prototype.words = function() { const iterable = this; iterable[Symbol.iterator] = () => new WordIterator(this); return iterable; };

Ở trên, chúng ta tạo một biến trung gian iterable và implement phương thức [Symbol.iterator] cho biến này thay vì implemen trực tiếp vào kiểu String, vì chúng ta không muốn thay đổi behavior mặc định của kiểu String.

Thế là xong, chạy thử:

for (let word of text.words()) { console.log(word); } // Output: // "The" "quick" "brown" "fox" "jump" "over" "a" "lazy" "dog"

Quá dễ, phải không nào?

Oh, và các bạn biết sao không? Trong cách implement trên, chúng ta đã bỏ qua một thực tế là, kiểu Array đã là một iterable object rồi, để rồi phức tạp hóa cái solution lên  trên thực tế, chúng ta chỉ cần implement hàm words() như này:

String.prototype.words = function() { return this.split(/\s/); }

Ví dụ: Python’s range function

OK, giờ lấy ví dụ khác nhé.

Hẳn các bạn ai cũng đã từng dùng qua Python, hay cũng từng gặp hàm range() hay xrange() của Python. Nếu như các bạn không biết nó là gì, thì nói đơn giản, hàm này tạo ra Đây chỉ là một dạng đơn giản của hàm range(), trên thực tế hàm này còn có nhiều cách sử dụng khác nữa.một dãy số trong phạm vi của hai giá trị đầu vào, ví dụ range(5, 15) sẽ tạo ra dãy số [5, 6, 7,... 14].

Một vài ghi chép về lệnh Iterator trong JavaScript

Chúng ta sẽ mô phỏng hàm này trong JavaScript bằng iterator.

Hàm range() của chúng ta sẽ nhận vào hai tham số, from và to. Với mỗi lượt iterate của hàm next(), chúng ta sẽ tăng giá trị from lên một đơn vị cho tới khinào nó đụng giá trị to.

const range = (from, to) => { return { [Symbol.iterator]: function() { return this; }, next: function() { if (from < to) { from++; return { value: from - 1, done: false }; } return { done: true }; } } };

Ở đây chúng ta cũng sử dụng cú pháp implement kiểu rút gọn như đã nói ở phần trước chứ không cần tạo class, vì ở ví dụ này cũng không phức tạp gì mấy, và mục đích của chúng ta là sử dụng hàm range() luôn nên cũng không cần quan tâm đến chuyện reuse code làm gì.

Và đây là cách sử dụng:

for (const i of range(0, 100)) { console.log(i); }

Nếu để ý kĩ cách implement trên, có thể các bạn sẽ nhận ra là, hàm range() chỉ sinh ra giá trị tiếp theo chỉ khi nào nó được gọi, chứ không phải tạo sẵn ra luôn một dãy các số từ from tới to, đó cũng chính là đặc tính “laziness” của hàm xrange() trong Python.


Ví dụ: Lazy Evaluation

Call-by-need là một đặc điểm của Lazy Evaluation (đối lập với call-by-name, đặc tính chỉ các thanh niên nhanh nhẩu, chỉ cần gọi tên là xuất kích) – một khái niệm từ functional programming, giải thích một cách đơn giản không đầy đủ, thì đây là phương pháp xử lý mà khi ta có các biểu thức nối tiếp nhau, chỉ khi nào biểu thức phía sau cần sử dụng kết quả tính toán từ biểu thức phía trước, thì biểu thức trước mới được thực thi.

Một vài ghi chép về lệnh Iterator trong JavaScript

Giả sử, ta có một hàm evenNumbers() trả về một dãy các số chẵn bắt đầu từ 0, và ta muốn lấy ra n giá trị đầu tiên trong dãy số đó.

const list = evenNumbers();
console.log(list.slice(0, n));

Nếu evenNumbers() là một hàm call-by-name, thì ngay từ sau câu khai báo list, hàm này sẽ được thực thi ngay, và vì evenNumbers() là một hàm không có điểm dừng, chương trình trên sẽ không bao giờ chạy được đến dòng lệnh thứ 2, và nó sẽ treo.

Nếu evenNumbers() là một hàm call-by-need, thì nó sẽ chưa được gọi chừng nào giá trị trả về của nó vẫn chưa cần thiết được sử dụng, và trong trường hợp này, nó chỉ được sử dụng sau khi chúng ta kết thúc câu lệnh slice(), lúc chúng ta in kết quả ra màn hình. Và mặc cho logic của hàm evenNumbers() chạy không có điểm dừng, vì nó là lazy, nên nó chỉ trả về một lượng dữ liệu vừa đủ dùng, trong trường hợp này là n giá trị mà thôi.

Với iterator, ta có thể mô phỏng lại hoạt động của hàm evenNumbers() call-by-need trong JavaScript kiểu như sau, tất nhiên là không hoàn toàn đúng theo mô tả ở trên:

const evenNumbers = () => { let index = 0; return { [Symbol.iterator]: function() { return this; }, next: function() { index+=2; return { value: index, done: false }; }, take: function(n) { let values = []; for (let i = 0; i < n; i++) { values.push(this.next().value); } return values; } } }; console.log(evenNumbers().take(5));

Có thể thấy, ta có thể viết theo cách mà người bình thường không ai điên gì mà làm, đó là code logic của hàm next() không cần có điểm dừng.

Để nói kĩ hơn về Lazy Evaluation, sẽ có một bài viết khác vào một ngày nào đó.


Mặc dù khá là hữu ích, nhưng iterator hiện nay vẫn còn một nhược điểm đó là không thể thực hiện các thao tác bất đồng bộ (asynchronous) được, ví dụ, bạn muốn thực hiện HTTP request trong mỗi iteration, hoặc bạn muốn implement một iterator làm nhiệm vụ đọc một file và trả về từng byte hoặc từng line của file đó. Giải pháp thay thế thì hiện đã có proposal, đó là Async Iteration, và nó đã ở stage 4.

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

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

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

Nắm vững 5 khái niệm sau, xem như master React

nam-vung-5-khai-niem-sau-xem-nhu-master-react
Bài viết được sự cho phép của tác giả Lưu Bình An
Xạo vậy thôi chứ làm gì mà trở thành master React ngay lập tức được, lý lẽ bình thường muốn master bất cứ thứ gì cũng cần mồ hôi và nước mắt. Hiểu được 5 khái niệm được cho là căn cơ nhất này sẽ giúp bạn dễ sa lầy hơn.
  1. Component
  2. JSX
  3. Props & State
  4. Component API
  5. Component Type

Khái niệm #1: React component hoạt động ra sau

Để master React, điều đầu tiên cần nằm lòng là tất cả những gì React xây dựng điều xoay quanh component. Thế thì component là gì. Ví dụ tuyệt vời nhất là select HTML element, select có thể xem như một component được định nghĩa sẵn với kiểu hiển thị riêng của nó (màu xám, có label, nút tam giác nằm ở góc phải) và tự nó xử lý tác vụ đóng mở mấy cái option

Nắm vững 5 khái niệm sau, xem như master React

Giờ tưởng tượng là chúng ta sẽ tự build ra một cái component tương tự như select với giao diện và event chúng ta tự kiểm soát

Nắm vững 5 khái niệm sau, xem như master React

Đó là những gì React giúp chúng ta làm, xây dựng một đối tượng không chỉ output ra một HTML templete thông thường,  chúng ta sẽ viết ra những function để control những event trên cái template đó

Để tạo ra một React component căn bản nhất

class MyComponent extends React.component {
 render(){
  return Hello World!;
 }
}

Khái niệm #2: JSX chạy thế nào

Có thể thấy là với cách tạo ra một component như React thì javascript và HTML sống chung một nhà. Vũ khí bí mật của React để làm được chuyện “what-the-heck” đó là JSX language.

Ngày xưa, đi học được dạy phải tách biệt HTML ra một file và JS ra một file, thời gian sau này anh em làm frontend thấy làm gom như vậy làm thấy nhanh hơn, mà cũng không quá evil như mấy ông thầy dạy

class MyComponent extends React.component {
 render(){
returnToday is: {new Data()};
 }
}

Để ý cái cách ta chèn code javascript ở trong HTML bằng cách đưa nào vào bên trong dấu {}, đó là cách viết JSX

Tuyển dụng lập trình viên React lương cao

Khái niệm #3: Props và State

Bạn chắc chắn biết đến attribute href cho thẻ a , chưa biết? về lại w3com học nhé. Với một component của React những attribute như vậy được gọi là props . Props là cách mà các component tương tác lẫn nhau

class ParentComponent extends React.Component{
 render(){
  return <ChildComponent message="Hello World" />;
 }
}
class ChildComponent extends React.Component{
 render(){
  return And then I said, "{this.props.message}";
 }
}

Dữ liệu trong component có thể truyền từ cha xuống con và không có ngược lại

Đôi khi dữ liệu sẽ không phải được truyền từ cha xuống con, mà nó chỉ là một dữ liệu tạm thời nào đó, ví dụ như giá trị input của user chẳng hạn, lúc đó nó được gọi là state

Cho dễ hình dung, nếu xem cái bảng nam châm là một component thì props là nút gạt xóa, state là những gì viết trên bảng

Nắm vững 5 khái niệm sau, xem như master React

Bên trong một component, state được quản lý bằng hàm setState thường được viết lòng trong một hàm xử lý sự kiện

class MyComponent extends React.Component {
 handleClick = (e) => {
  this.setState ({clicked: true});
 }
 render(){
  return <a href="#" onClick={this.handleClick}> Click Me</a>;
 }
}

Khái niệm #4: Component API

Những hàm như render và setState là một phần của component API, ngoài ra nó còn một số hàm hữu ích khác nữa như constructor để khởi tạo state và kích hoạt các phương thức, một số hàm trigger trước khi component được load, sau khi load, sau khi unmounting. vâng vâng.

Thật ra việc master được React phần nhiều là master được việc lập trình và khái niệm để kiến trúc ra một component hơn là một loạt các API được hỗ trợ sẵn, vậy nên phần này kết thúc ở đây.

Khái niệm #5: Component Type

Mấy ví dụ trên, định nghĩa một component được khai báo dạng class

class MyComponent extends React.Component{
}

Giờ thì hãy quên cách viết này đi! Bây giờ ai cũng viết một component ở dạng function component

Một functional component là một function nhận một props object như tham số truyền vào và trả về một đống HTML lằn xà ngoằn. Y hệt như cách viết template kinh điển, khác biệt cơ bản là ở chổ mình có thể xài JavaScript bất cứ chổ nào khi cần

const myComponent = props => {
    return Hello {props.name}, Today is {new Date()};
}

Viết cách này có một hậu quả là mình không thể access được phương thức của component, trên thực tế việc này không ảnh hưởng gì làm vì phần lớn trường hợp ta không dùng tới.

Và như vậy component này sẽ không có phương thức setState , không có state luôn, người ta còn gọi là stateless functional component.

Cách viết này rất là gọn gàng, phù hợp cho những trường component đơn giản, nên áp dụng khi có thể.

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 công nghệ thông tin hấp dẫn tại TopDev

5 câu hỏi javascript và cách đánh bại chúng

5-cau-hoi-javascript-va-cach-danh-bai-chung
Bài viết được sự cho phép của tác giả Lưu Bình An
Mỗi công ty mỗi kiểu phỏng vấn, điều hay bị phàn nàn trong các buổi phỏng vấn là phần lớn nó không liên quan tới những công việc hằng ngày mà vị trí đó đòi hỏi. Cùng TopDev điểm qua 5 câu hỏi JavaScript hay gặp trong buổi phỏng vấn lập trình viên.
Có những lúc thấy các vấn đề liên quan trực tiếp tới frontend như các sự kiện của DOM, tương thích trên các trình duyệt khác nhau, phương pháp làm layout lại không được hỏi. Những người đứng vị trí tuyển dụng sẽ nhìn nhận như thế này

Chúng tôi thích thuê những người thông minh, chứ không thích người biết rõ về một kỹ thuật nào đó, nhưng lại thiếu sáng tạo, thiếu logic và thiếu biện chứng.

Dù là quan điểm nào đi nữa, nhưng phỏng vấn thì coding challenge vẫn là một phần quan trọng trong phỏng vấn.

Tuyển dụng Javascript lương cao cho bạn

Xác định chuỗi đối xứng (palindrome)

Câu hỏi Javascript 1:

Chuỗi đối xứng là chuỗi khi đảo ký tự từ trái qua phải và từ phải qua trái không thay đổi, như chữ “racecar”, “anna”, “tenet”. (Film tenet không biết khi nào mới chiếu, nghe đâu hoãn dài hơi vì covid)

Yêu cầu, cho bạn một chuỗi, xác định nó phải là đối xứng không

isPalindrome('racecar') === true
isPalindrome('table') === false

Đáp án

const palindrome = str => {
  // chuyển qua lowercase trước
  str = str.toLowerCase()
  // chuyển thành array, reverse rồi so sánh
  return str === str.split('').reverse().join('')
}

FizzBuzz

Câu hỏi Javascript 2:

Yêu cầu: viết một function đáp ứng những chuyện sau

  • log ra các số từ 1 đến n, n là một parameter truyền vào
  • log ra chữ fizz nếu là bội số của 3
  • log ra buzz nếu là bội số của 5
  • log ra fizzbuzz nếu là bội số của cả 3 và 5
fizzBuzz(5)
// 1
// 2
// fizz
// 4
// buzz

Để giải quyết bài toán này, chúng ta cần nhớ đến cách dùng % để biết được số dư của phép chia, trả về 0 là chia hết, ngược lại thì không chia hết

12 % 5 // 2 -> 12 không phải bội số của 5
12 % 3 // 0 -> 12 là bộ số của 3

Đáp án

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // kiểm tra xem có là bội số của cả 3 và 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // có phải là bội số của 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // có phải là bội số của 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}

Đảo chữ

Yêu cầu: viết một function, params truyền vào 2 chuỗi, trả về true nếu 2 chuỗi này là dạng đảo của nhau và false cho trường hợp ngược lại.

2 chuỗi gọi là đảo nhau nếu số ký tự hoàn toàn giống nhau (không kể hoa thường), chỉ khác thứ tự.

anagram('finder', 'Friend')  --> true
anagram('hello', 'bye') --> false

Đây là một cách làm

// hàm helper để build một object làm nơi lưu trữ
const buildCharObject = str => {
  const charObj = {}
  for(let char of str.replace(/[^\w]/g).toLowerCase()) {
    // nếu object đã chứa giá trị đang loop qua
    // tăng giá trị nó lên 1,
    // ngược lại, thêm mới ký tự này vào object với giá trị = 1
    charObj[char] = charObj[char] + 1 || 1
  }
  return charObj
}

// hàm chính
const anagram = (strA, strB) => {
  // lưu giá trị của strA vào object
  const aCharObject = buildCharObject(strA)
  // lưu giá trị strB vào object
  const bCharObject = buildCharObject(strB)

  // so sánh độ dài giữa 2 object
  if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) {
    return false
  }
  // đã chắc chắn về length giống nhau
  // kiểm tra tiếp số lượng các ký tự có giống nhau
  for(let char in aCharObject) {
    if(aCharObject[char] !== bCharObject[char]) {
      return false
    }
  }

  return true
}

Đếm số nguyên âm

Câu hỏi Javascript 3:

Nguyên âm: anh-ôm-em-ú-ì, aoeui.

Viết một function nhận vào string, trả về số lượng nguyên âm có trong string

findVowels('hello') // --> 2
findVowels('why') // --> 0

Đáp án

const findVowels = str => {
	let count = 0
	const vowels = ['a', 'o', 'e', 'u', 'i']
	for (var char = str.length - 1; i >= 0; i--) {
		if (vowels.includes(char.toLowerCase())) {
			count++
		}
	}
	return count
}

Có thể dùng regular expression

const findVowels = str => {
  const matched = str.match(/[aeiou]/gi)
  return matched ? matches.length : 0
}

Fibonacci

Câu hỏi Javascript 4:

Cái này kinh điển. Mọi dân lập trình đều đụng tới dãy số fibonacci, thật thiếu sót nếu không đề cập ở đây.

Fibonacci là dãy số, mà số bên phải = tổng 2 số đứng bên trái. Như thế này: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

Yêu cầu: một function nhận params là n, trả về giá trị n trong dãy fibonacci

fibonacci(3)  // --> 2

Đáp án

const fibonacci = num => {
	const result = [0, 1]

	for (let i = 2; i <= num; i++) {
		const prevNum1 = result[i - 1]
		const prevNum2 = result[i - 2]
		result.push(prevNum1 + prevNum2)
	}

	return result[num]
}

hoặc dùng đệ quy

const fibonacci = num => {
	// nếu là 1 hoặc 0
	if (num < 2) {
		return num
	}
	// từ 2 trở lên
	return fibonacci(num-1) + fibonacci(num-2)
}

Chúc các bạn phỏng vấn vui vẻ!

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 JavaScript job hấp dẫn tại TopDev

Từ lập trình viên Junior, cùng mình trở thành 1 lập trình viên mid-level nhé

lập trình viên

Có được 1 công việc lập trình đầu tiên luôn là mục tiêu hàng đầu của rất nhiều các bạn lập trình viên trẻ mới hành nghề, nhưng mình lại phát hiện ra rằng khá ít các lập trình viên muốn tiến bước xa hơn trên con đường sự nghiệp của họ.

Vì cũng vướng vào trường hợp tương tự, nên là mình đã lập nên hẳn 1 kế hoạch để định hướng sự nghiệp lập trình viên của mình. Trải qua 5 tháng ròng rã, mình đã tích lũy được mọi thứ cần thiết để có thể nhận được tới 3 lời đề nghị công việc tại vị trí lập trình viên mà phần lương bổng của nó còn gấp đôi lương hiện tại của mình. Thật sự đạt được điều này là không hề dễ dàng gì, nhưng rõ ràng là mình rất xứng đáng để nhận được nó.

Chắc hẳn các bạn cũng đang rất tò mò, và mình xin chia sẻ cách để biến nó thành hiện thực, từng bước một để bạn có thể làm theo.

Nhưng trước tiên vì đây là 1 bài viết khá chuyên sâu nên mình sẽ tóm tắt sơ lược các lời khuyên của mình.

Lộ trình sự nghiệp cho các lập trình viên Junior chỉ trong 7 bước:

1. Quyết định mục tiêu của bạn. Hãy tự hỏi kiểu công việc lập trình viên nào mà bạn muốn và khi nào thì bạn muốn công việc đó? Bạn có thể học được nhiều thứ trong 6 tháng học tập bán thời gian nếu bạn thực sự bỏ công cho nó.

2. Hãy tìm từ 10 tới 20 mô tả công việc hiện tại cho các công việc lập trình viên mà cuối cùng bạn muốn nhận. Tạo 1 danh sách về tất cả những yêu cầu và bao nhiêu lần mà mỗi thứ đưa ra.

3. Tìm từ 3 tới 5 kỹ năng chính thường được yêu cầu bởi các công việc đó, nhất là những cái mà bạn hiện chưa có.

4. Sử dụng các khóa học để tăng tốc độ việc bạn học 1 kỹ năng mới nhanh như thế nào. Các khóa có thể là 1 ý tưởng tuyệt vời vì chúng sẽ giúp bạn tiết kiệm thời gian và công sức.

5. Áp dụng vào công việc trước khi bạn đã học mọi thứ. Phỏng vấn tốt cũng là 1 kỹ năng bạn nên luyện tập.

6. Xây dựng các dự án với những gì bạn đã học được, đó cũng là cách tốt nhất để đảm bảo kỹ năng của bạn cứng rắn hơn.

7. Hãy nhận công việc mà bạn đã nỗ lực để có được. 

  Junior Developer là gì? Điều kiện đạt chuẩn và yêu cầu công việc của Junior Developer
  Mẫu CV Junior Developer cực thu hút cho dân IT

Mục tiêu

Mình đã lên kế hoạch để du lịch vòng quanh Đông Nam Á khoản 3 – 6 tháng, và biết rằng mình muốn có 1 công việc tốt hơn khi mình trở về nhà. Công việc lập trình viên JavaScript với vai trò Junior của mình đã cho mình thấy được 3 thứ:

  • Mình yêu code, không chỉ là 1 sở thích mà còn như 1 công việc. 
  • Mình thích thú với các việc về lập trình back-end. Nó dựa trên nền tảng logic hơn vốn làm mình thực sự thích.
  • Mình không thích Angular cho lắm.

Với sự hiểu biết này, mình đặt mục tiêu cho nơi mà mình muốn đến khi mình kết thúc hành trình, và những gì mình cần để học để đạt được việc đó. 

Mục tiêu của mình là trở thành 1 lập trình viên Mid-level full stack.

Sự điều chỉnh

Để trở thành 1 lập trình viên Mid-level full stack mà mình muốn, và để tìm ra mình còn thiếu gì để cải thiện, mình đã nhìn qua hàng tá công việc mà cuối cùng mình thực sự sẽ muốn nhận.

Đầu tiên, mình thấy những gì công việc yêu cầu ở 1 ứng viên và những gì nhà tuyển dụng lập trình viên mong muốn. Mình đã lập 1 danh sách của tất cả các kĩ năng và rồi sắp xếp chúng theo thứ tự bằng cách xem chúng xuất hiện bao nhiêu lần trong những mô tả công việc lập trình viên.

Với danh sách này mình đã xem qua các kỹ năng có thứ hạng cao nhất mà mình chưa có. Bạn không cần phải có khả năng làm tất cả mọi thứ trong danh sách để có thể nhận được những không việc này. Trung bình người trúng tuyển chỉ có khoản 70 – 80% những gì trong danh sách yêu cầu cho 1 vai trò nhất định. Hầu hết mọi lúc, những thứ thực sự là ‘yếu tố thành bại’ chỉ nằm ở 1 vài điểm quan trọng. Chúng ta đang nhắm để nhận được cấp độ đó và rồi bất kỳ kỹ năng nào khác cũng chỉ là ‘bonus’.

Qua nghiên cứu này, mình đã lập 1 danh sách các thứ mà hầu hết các công việc mà mình đang tìm kiếm yêu cầu:

  • Hiểu biết sâu về JavaScript.
  • Ít nhất 1 framework front-end (thường là React hay Angular).
  • Khả năng để tạo 1 REST API.
  • Kiến thức về 1 hoặc nhiều hơn về database.

Quá trình này có thể thực sự được dùng cho bất ai trong bất kỳ con đường sự nghiệp nào. Nhưng nó sẽ thực sự hiệu quả với việc lập trình, vì họ thường dùng 1 danh sách cụ thể về các kỹ năng mà 1 vai trò cần có.

Xây dựng kế hoạch

Với thông tin này, mình biết rằng mình cần phải cố gắng ở 1 vài điểm mấu chốt:

1. Tôi cần phải hoàn thành quyển ‘You Don’t Know JS’. Sê-ri sách này thực sự giúp mình hiểu rõ phần căn bản của JavaScript, nên mình suy đoán rằng sẽ rất tuyệt cho việc học thêm các thứ nâng cao hơn.

2. Mình cần phải trở nên thực sự giỏi 1 framework front-end. Mình đã xem thử Angular, Vue, và React và quyết định sẽ chọn React. Trước đây mình đã thử 1 chút về React và mình thích nó, mình không thực sự kết Angular cho lắm, và Vue thì lại ít khi được yêu cầu trong nhiều quảng cáo tìm việc.

3. Cho dù mình chỉ có thể tạo 1 API express từ scratch, mình không thực sự tự tin cho lắm và chỉ có thể làm phần cơ bản. Mình cần phải tự update bản thân sớm thôi, đặc biệt nếu mình đã muốn có được công việc back-end mà mình đã ưu tiên.

4. Mình có thể vừa kề bên phần cơ sở dữ liệu quan hệ – relational database (postgreSQL) hay học 1 DB mới. Mình đã quyết định rằng mình sẽ chọn học món MongoDB vì nó đã nổi tiếng rồi và mình cũng thêm NoSQL database vào CV của mình.

Mình không chắc là bao lâu mình sẽ khởi hành với những chuyến đi, nên tự quyết định luôn để lên kế hoạch cho việc học như vầy:

  1. Học React (và Redux) trong khi mò mẫm tiếp quyển You ‘t Know JavaScript.
  2. Tự nâng trình việc lập trình API và học MongoDB.
  3. Làm 1 cái gì đó với những kỹ năng mà mình đã có.
  4. Học thêm những thứ khác nữa chứ.

Mình đã thực hiện điều này cho 1 lý do tốt. Nếu mình kết thúc chuyến đi sau 3 tháng và đã hoàn tất mục #1 nhưng vẫn chưa thực hiện được nửa đường tới mục 2#, thì mình sẽ rất có khả năng xin được 1 công việc lập trình viên ở mức mid-level vì chúng chỉ bị giới hạn bởi hầu hết các công việc front-end.

lập trình viên

Học React và Redux, và (lại) đọc You Don’t Know JS

Tôi đã thử làm 1 chút về React trước đây rồi, bằng cách coi mấy video Youtube hay mấy bài hướng dẫn thông thường trên web, nhưng lần này mình muốn để đảm bảo rằng mình đã học nó theo đúng cách. Thế là nó làm mình mua luôn khóa huấn luyện ‘React JS và Redux: Mastering Web App từ Udemy.

Khóa này thực sự rất công phu, với 1 chút kinh nghiệm mà mình đã có với React cũng giúp mình khá nhiều, nhưng về Redux thì mình mù tịt. Xong khóa học, mình cảm thấy đã xây dựng được 1 website khá phức tạp và cũng tự tin cả về phần syntax, phần format của React và phần kiểm soát dữ liệu của Renux nữa.

Mình tốn tới 2 tuần cho khóa này, vì chỉ dành khoản 1-2 giờ và 1-2 tuần 1 lần cho nó. Mình đang tận hưởng kỳ nghỉ ở châu Á nên đây cũng không hẳn là ưu tiên của mình.

Cũng như việc dành thời gian cho khóa học khi mình dùng laptop, mình đọc theo cách riêng qua vài cuốn mới ra gần đây trong seri You Don’t Know JS. Mình lưu cả phiên bản Github online trên điện thoại và đọc nó luôn khi mình nghỉ giải lao.

Có được vài kinh nghiệm đời thực, mình hiểu ra rất nhiều hơn lần gần đây mình cố đọc những quyển này. 1 số cuốn như Promises rất khó hiểu khi bạn chưa bao giờ đụng vào chúng.

Xem ngay các vị trí HOT tuyển dụng React, tuyển lập trình Redux tại TopDev

Nâng trình về express và học MongoDB

Giờ đây mình khá thoải mái khi tạo các thứ về front-end, đã đến lúc tập trung lại phần kỹ năng back-end của minh.

1 lần nữa mình quyết định hốt thêm 1 khóa Udemy nữa. Mình nhận ra bởi vì chúng đi cùng nhau như 1 gói hoàn tất, các thứ vận hành mượt hơn và kết nối 1 cả quá trình học. Dĩ nhiên bạn có thể học tất cả những thứ giống nhau miễn phí trên Youtube hay các bài hướng dẫn online khác, nhưng chúng chưa bao giờ có vẻ liền lạc như 1 chủ đề bao quát.

Câu hỏi tiếp theo là nên chọn khóa nào. Có 1 số cái miễn phí và cả tốn phí, khóa dài và khóa ngắn.

Mình quyết định đầu tư bản thân và mua hẳn hoi 1 khóa (10$ tuy nhỏ nhưng mà kèo này thơm phết) và mình đã quản để thu hẹp xuống còn 3 khóa thôi. Dao động thời lượng từ 7 tiếng tới 25,5 tiếng.

Mình bị khóa 7 tiếng mê hoặc hoàn toàn, và mình cũng hoàn thành nó trong khoản 1 – 2 tuần trong khi vẫn tận hưởng được kỳ nghỉ. Khóa 25 tiếng rõ là sẽ cần nhiều thời gian hơn, nhưng có vẻ nó bao gồm nhiều chủ đề trong đó. Tới thời điểm này trong chuyến đi, mình quyết định vẫn sẽ đi du lịch tiếp miễn là số dư trong ngân hàng mình vẫn ở mức ổn định, và thế là mình chiến tiếp khóa 25 giờ luôn.

Tham khảo ngay các vị trí tuyển dụng MongoBD lương cao

Node với React: Lập trình web Full-stack

Mình thực sự đã làm 1 review đầy đủ về khóa này, và nó khá là tuyệt.

Mình đã xong khóa React và Redux trước đây, và các thứ React cũng lặp đi lặp lại. Nên là bạn không hao tốn thời giờ đâu, bạn có thể skip bớt video phần bạn đã biết rồi hay x2 tốc độ mà xem, và phần ‘skim watch’ cho nó frest hay để kiểm tra bất kỳ lời khuyên hữu dụng nào.

Các thứ về back-end là phần xịn nhất về khóa này. Nó bao hàm lượng chủ để rất đa dạng bao gồm: oAuth, xử lý email, chi trả, API, xử lý chính (?), MongoDB, mongoose, và deploy nâng cao.

Lý do khóa này dài vậy là do nó có nhiều chủ đề quá mà còn chi tiết đến tuyệt vời nữa. Cũng có lợi và có hại, nhưng mình đã xem xong gần hết video với tốc độ x1.5 và dừng ở nơi cần.

Khóa này lâu hơn khóa đầu, nhưng mình đã có thể kết thúc nó trong vòng 1 tháng rưỡi.

1 trong những thứ làm mình chật vật nhất chính là phần DevOps, cách để triển deploy và host ứng dụng theo 1 cách đáng tin. Nếu mình làm điều này bây giờ mình chắc chắn sẽ chọn Serverless vì nó gỡ bỏ kha khá rào cản cho phần lập trình back-end.

Mình bắt đầu viết

Ở 1 vài thời điểm, trong khi đang ở Trung Quốc, mình quyết định viết 1 chủ đề về độ khó khăn khi phải làm lập trình ở Trung Quốc. Nó được chấp nhận như bài công khai trên freeCodeCamp, và giờ đã có 7,1k lượt xem và 1300 cái vỗ tay. Mình khá kinh ngac rằng mọi người đọc thứ mình viết và còn thích nó.

Mình quyết định rằng mình đã cố viết nhiều bài hơn về những gì mình đang làm và những thứ hay ho xoay quanh công việc lập trình viên mà mình tìm ra. Nó còn cho mình 1 nơi trò chuyện khá tuyệt cho việc phỏng vấn sau này.

Mình tiếp tục viết và đã mở ra được các cơ hội đáng kinh ngạc. Mình đã được highlight như 1 Top Contributor trên Freecodecamp, còn có lời đề nghị cho công việc freelance, và ngay cả 1 contract viết sách.

Viết 1 blog cũng là cách hay để nhập quá trình của bạn và cho phép bạn đã cải thiện như thế nào.

lập trình viên

  Tại sao junior dev nên review commits của các senior?
  Junior Developer là gì? Điều kiện đạt chuẩn và yêu cầu công việc của Junior Developer

Làm 1 cái gì đó với những kỹ năng mình đã học được.

Giờ mình đã có tất cả tool cần thiết, mình muốn tạo 1 cái gì đó với chúng. Mình đã đi chơi được 3 tháng rưỡi và dự kiến rằng mình sẽ có thể tiếp tục chuyến đi thêm 1 – 3 tháng nữa. 

Điều này có nghĩa rằng mình có thể cần phải suy nghĩ về công việc sớm nếu mình muốn bắt đầu càng nhanh càng tốt khi mình trở về.

Để ứng tuyển cho vị trí lập trình viên, mình cần phải update CV và portfolio của mình. Điều này cho mình 1 cơ hội tuyệt hảo để dùng những gì mình đã học để dựng 1 portfolio bằng Node và React.

Đây chính xác là điều mình làm, như đã nói trước đây, mình không phải là dân thiết kế, nhưng cũng đủ xài. Mình còn dùng 1 API WordPress để host các bài blog trên trang.

Mình biết là phần thiết kế hơi tởm, nên mình đã post nó trong phần subreddit  review thiết kế web. Mình đã có khá nhiều lời khuyên hay, hầu hết các thứ xoay quanh việc dành thêm vài tháng tiếp theo để nghiên cứu và học phần căn bản thiết kế web. Điều này không hẳn là thứ mình đang tìm nhưng bù lại cũng có nhiều lời khuyên xịn lắm.

1 chút lời khuyên mình nhận được là tận dụng các thiết kế framework có sẵn. Điều này dẫn đến kết quả 1 website mới hoàn toàn, không cần dùng tới kỹ năng lập trình viên nào mình đã sử dụng trước kia, nhưng nó trông bớt lòe loẹt hơn. Nếu mình làm nó lại, mình sẽ chắc chắn thử và theo 1 cái gì đó như là Material UI.

Ứng tuyển cho công việc

Nơi tiếp theo tôi ghé thăm là 1 vùng núi xa xôi hẻo lánh tại Lào. Ở thời điểm này mình biết là mình có 2 tuần ở đây, rồi thêm 4 tuần nữa tại Trung Quốc lần nữa trước khi về nhà. Đã đến lúc kiếm việc thôi!

Nếu bạn không có deadline căng não như mình thì cũng nên thử. Nó thực sự giúp tăng động lực bạn để hoàn thành dự án hay để tìm việc (chả ai thích tìm bảng công việc cả).

Nếu bạn không muốn set 1 deadline thì hãy set 1 điểm trong kiến thức học của bạn khi bạn bắt đầu đi tìm việc.

Tốt nhất là sau khi bạn đã học mọi thứ thì nên là như vầy! Học cách phỏng vấn cho vị trí lập trình viên cũng là 1 kỹ năng và bạn nên có thêm kinh nghiệm với nó càng nhiều, càng thường xuyên càng tốt. Bắt đầu xin việc mà bạn ít quan tâm để thực hành suốt quá trình.

Tìm việc lập trình junior lương cao trên TopDev

Quá trình

Qua khóa học suốt 1 tháng rưỡi tiếp theo sau khi đã nộp đơn cho hơn 50 công việc chỉ liên quan đến lập trình viên, mình cũng nhận được email và nhiều cuộc trò chuyện Linkedin với khoản 25 người, và đã nắm trong tay được 5 cuộc phỏng vấn công việc cho tuần tôi trở về.

Hầu hết các tương tác của mình là qua email, nhưng nếu ai đó muốn gọi trực tiếp thì mình đã cố hết khả năng để phù hợp với nó (Mình còn 8 giờ phía trước)

Mình nghĩ rằng có 1 cuộc trò chuyện thực sự là cách tuyệt vời để cải thiện mối quan hệ giữa bạn và người khác, tăng cơ hội họ mời bạn tới buổi phỏng vấn hay giới thiệu 1 công việc cho bạn.

Nếu bạn không thấy thoải mái việc gọi điện hay Skype với mọi người thì hãy đu theo email, nhưng mình nghĩ bạn sẽ phải bỏ lỡ nhiều cải thiện các cơ hội đấy.

Dựng nhiều thứ hơn

1 trong những cuộc phỏng vấn cho vị trí lập trình viên đã yêu cầu mình làm nguyên mẫu những gì sẽ làm cho 1 công ty với 1 trang web tệ hại và dịch vụ khách hàng tối thiểu. Điều này thật tuyệt khi nó thúc đẩy mình để học về phần tạo mẫu.

Mình đã viết 1 seri các bài viết về cách nguyên mẫu mình làm và tạo ra 1 website. Bạn có thể xem website ở đây và đọc các bài viết do mình viết về lập trình viên ở đây.

Nó còn cho mình cơ hội để lấy những gì mình đã học suốt 4 tháng qua, luyện tập nó và dựng 1 cái gì đó mà phô diễn những gì mình có thể làm.

Cái cuối cùng mình làm trên dự án này là tạo ra 1 chat bot cho việc return các order.

Mình đã phải tìm hiểu về cách hoạt động của các chat bot và tốn 1 tuần để có được 1 phiên bản hoạt động tốt. Đây là 1 yếu tố lớn trong việc mình nhận 1 công việc và nó dẫn tới nhiều cơ hội khác nữa.

Học 1 hoặc 2 kỹ năng nhẹ khác mà bạn có thể thể hiện cũng có thể có tác dụng tốt. Chỉ cần đảm bảo rằng sau khi bạn đã sắp xếp các kỹ năng cốt lõi của mình.

lập trình viên

Phỏng vấn

Giờ đây mình đã có danh sách 5 cuộc phỏng vấn, mình phải chuyển hóa chúng thành lời đề nghị cho công việc.

Chuẩn bị

Mình đã viết các bài về chuẩn bị cho buổi phỏng vấn JavaScript và thành thục tiến trình phỏng vấn. Mình đảm bảo là đã tick mọi ô rồi.

Mình biết tất cả các điểm mình muốn nhấn mạnh, cách để trả lời các câu hỏi về điểm yếu của mình và những gì mỗi công ty đã làm.

Các buổi phỏng vấn

Mình đã luôn khá là giỏi trong các cuộc phỏng vấn mặc dù bình thường mình hơi hướng nội 1 chút. Mình đã phải dạy bản thân hành động hướng ngoại nhiều hơn và tham gia với những người phỏng vấn mình.

Nếu bạn thấy bản thân hành động nhút nhát và dè dặt trong các cuộc phỏng vấn, mình khuyên bạn nên thực hành điều này như bất kỳ kỹ năng nào khác. Tìm một nguồn tài nguyên tốt (charisma on command là một kênh Youtube tuyệt vời) và sau đó lặp lại những gì bạn học được. Bắt đầu với bạn bè và gia đình cho bạn các cuộc phỏng vấn giả nhưng sau đó thử và tìm những người mà bạn không quen thuộc và có thể giống với nhà phát triển thực sự hơn.

Mình đã có các bài kiểm tra công nghệ tại 3/4 các cuộc phỏng vấn (hai phần còn lại đã thực hiện online) và sự chuẩn bị của mình đã được đền đáp. Cũng có vài lúc lúng túng, nhưng mình đã tự nói với bản thân và hoàn thành tốt mọi nhiệm vụ của một lập trình viên cần có.

Việc bạn đi phỏng vấn cũng là một cơ hội để tìm hiểu thêm về công ty và khi làm việc ở đó sẽ ra sao. Một công ty có thể sẽ tuyệt vời trên giấy tờ nhưng thực sự lại không giống sự cường điệu đó hoặc có thể theo cách nào khác. Chọn đúng công ty là một quyết định lớn vì vậy hãy chắc chắn rằng bạn hãy yêu cầu tất cả thông tin bạn cần cho vị trí lập trình viên này.

Lời đề nghị và đàm phán

Từ ba cuộc phỏng vấn đầu tiên của tôi, tôi đã có hai lời đề nghị. Sau cuộc phỏng vấn thứ tư, tôi biết rằng họ là công ty cho tôi, vì vậy hãy cho họ biết rằng tôi sẽ xem xét lời đề nghị từ họ. Nếu bạn đã từng ở trong một tình huống tương tự, hãy cố gắng không dẫn dắt họ nếu bạn biết bạn sẽ không chấp nhận lời đề nghị từ họ.

Bây giờ tôi đã có đề nghị từ hai công ty rất muốn thuê tôi. Đó là thời gian để đàm phán. Tôi không bao giờ tuyệt vời trong việc đàm phán hoặc yêu cầu nhiều hơn, nhưng tôi đã đọc một vài bài báo và đã đi cho nó.

“Bạn có thể tự nghĩ rằng: “à , mình không muốn đặt các kỳ vọng cao quá, và các lời đề nghị cũng khá rộng rãi rồi, nên mình cứ nhận nó thôi”
Không. Hãy đàm phán.

“Hoặc là: “mình không muốn bắt đầu với các  bước sai lầm và có vẻ tham lam với các ông chủ tương lai.”

Không. Cứ đàm phán đi.

“Nhưng công ty này cũng nhỏ và…”

Không. Im miệng và đàm phán thôi.

Từ 10 quy tắc đàm phán 1 lời đời nghị công việc. Mình xin giới thiệu là bạn nên xem qua nó nếu bạn đang đi tìm việc.

Mình rõ ràng đã không làm điều này hoàn hảo (hay thực ra không hài lòng lắm), nhưng mình đã làm 1 số thứ để tăng cường cho đôi bàn tay này. Mình đã có 2 lời đề nghị khá là công bằng, nhưng mình cũng ưu tiên cho 1 công ty. Mình đã tự viết 1 script nhỏ và (sau vài bài tập hít thở để giúp mình bĩnh tĩnh lại) mình đã gọi cho vị giám đốc của công ty mình kết nhất. 

“Chào Dave, mình đang gọi tới anh để cập nhật về việc mình đang ở đâu. Cảm ơn đã cho mình 1 lời đời nghị, mình rất vui khi được xem như 1 mảnh ghép tuyệt vời đến công ty.
Mình đã có lời đề nghị khác cũng khá hấp dẫn và sẽ quyết định vào cuối tuần này, mình sẽ cho anh biết ngay 12h trưa thứ hai.

Có 1 thứ thực sự sẽ làm lời đề nghị này được tốt hơn nữa. Mình sẽ tái định cư ở bất cứ nơi nào mình nhận được việc, và vài sự hỗ trợ với chi phí cho việc này sẽ rất tuyệt.”

Câu chuyện không kết thúc y như thế, nhưng nó cũng khá hữu ích. Mình đã cám ơn họ vì lời đề nghị, nói cho họ biết deadline để mình đưa ra 1 quyết định, và hỏi về việc cải thiện lời đề nghị mà không phải yêu cầu mức lương cao hơn.

Tóm tắt

Mình đã tìm ra được những gì mình cần để có được công việc mình muốn. Mình dùng điều này để tạo 1 kế hoặc và rồi sử dụng các khóa học online để tăng tốc quá trình học tập.

Mình đã nộp đơn 1 đống việc và nhận lại được 5 buổi phỏng vấn. Việc chuẩn bị cho những buổi phỏng vấn kết thúc với 4 lời đề nghị, và 2 cái thực sự làm mình muốn chọn 1 trong 2. Mình đã thương thuyết lời đề nghị từ 2 công ty mình thích nhất và cuối cùng cũng nhận được công việc lập trình viên tuyệt vời tại 1 công ty tuyệt vời khác.

Nếu chủ đề này cũng truyền cảm hứng cho bạn để tiến tới bước tiếp theo để trở thành 1 lập trình viên full-stack rồi bạn sẽ cần biết các kĩ năng mà cần. May thay, mình đã có 1 bài hướng dẫn miễn phí về các kỹ năng và công cụ bạn sẽ cần để trở thành 1 lập trình viên full-stack.

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

Xem ngay những tin đăng tuyển dụng IT mới nhất trên TopDev

Muốn trở thành một web developer nên bắt đầu từ đâu?

Muốn trở thành một web developer nên bắt đầu từ đâu?

Bài viết được sự cho phép của tác giả Tino Phạm

Thế giới lập trình là rộng lớn với rất nhiều lĩnh vực và cơ hội mang lại cho bạn sự trải nghiệm, cũng như con đường đi mà bạn sẽ chọn lựa cho sự nghiệp, đam mê của mình.

Bạn là một người mới và đang mong muốn trở thành một web developer. Và thời điểm này bạn vẫn chưa thể xác định sẽ bắt đầu từ đâu khi đi trên con đường này.

Với kinh nghiệm của bản thân, mình sẽ chia sẽ để giúp bạn có định hướng và cái nhìn tổng quan hơn trước khi bước chân vào con đường trở thành web developer.

Muốn trở thành một web developer nên bắt đầu từ đâu?

Trong lĩnh vực lập trình ứng dụng web, chúng ta có lập trình cho Front-end và lập trình cho Back-end. Bắt đầu từ hướng lập trình Front-end là dễ dàng hơn cho bạn. Vì sao ư?

Để trở thành một Front-end developer bạn chỉ cần học một số công nghệ chính bên dưới:

  1. HTML5
  2. CSS3
  3. JavaScript
  4. Học một trong các Framework sau: Angular/ React/ Vue. Vì những Framework này giúp bạn xây dựng front-end cho ứng dụng nhanh hơn, dễ dàng mở rộng và thay đổi UI, đồng thời giữ cho code front-end có tổ chức hơn.

Trong khi để trở thành một Back-end developer bạn cần phải nắm được những công nghệ sau:

  1. Ngôn ngữ lập trình cho Back-end. Bạn sẽ phải chọn dùng một trong các ngôn ngữ: C#, Java, PHP, Python, etc.
  2. Bạn phải học một Framework tương ứng cho ngôn ngữ mà bạn đã lựa chọn. Ví dụ: bạn chọn dùng C# thì bạn phải học thêm về .NET Framework, .NET Core, etc. Bạn chọn dùng Java thì phải biết Framework: Hiberate hoặc Spring, etc. Bạn chọn dùng PHP thì phải biết thêm: Laravel hoặc Zend hoặc CodeIgniter, etc. Bạn chọn Python thì phải biết về Django framework, ect.
  3. Database (cơ sở dữ liệu): một Back-end developer cần phải biết thêm các loại databases để lưu trữ dữ liệu cho ứng dụng của mình như: SQL Server, Mongo DB, Elastic Search, PostgreSQL, Redis, Couch DB, etc.
  4. Hosting: bạn cần biết một số dịch vụ để deploy ứng dụng của mình như: Google Cloud Platform, AWS (Amazon Web Services), Microsoft Azure, etc.
  5. Các công cụ quản lý server: bạn cần có kiến thức về các công nghệ và dịch vụ như: Docker, Kubernetes, New Relic, Nginx, Varnish, etc.

Qua các thông tin ở trên, bạn dễ dàng nhận ra rằng để trở thành một Back-end developer bạn phải hiểu biết nhiều công nghệ hơn Front-end developer. Hơn nữa, Back-end developer còn phải có kiến thức về Architectural Styles, Architectural Patterns, Design Patterns để có thể đi tiếp con đường trở thành một Senior Developer hay xa hơn là trở thành một Software Architect.

Nhìn chung thì để trở thành một Back-end developer đòi hỏi bạn phải có nhiều nổ lực và kiên trì hơn. Vì vậy trở thành một Front-end developer tương đối dễ và nhanh hơn Back-end developer.

OK, con đường là do bạn lựa chọn. Hãy tìm hiểu và đi lựa chọn công việc mà bạn đam mê và chào mừng bạn đến với hội anh em “coder”.

  Tổng hợp tất tần tật những công cụ cần thiết cho web developer
  Những Plugin sublime text cần thiết cho web Developers

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

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

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

Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing

Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing

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

  Hướng dẫn thêm tracking code vào giao diện WordPress không cần plugin
  Khám phá những công nghệ được sử dụng trong Facebook giao diện mới
Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing

Khi phát triển phần mềm trên Swing nhiều lập trình viên gặp khó khăn trong việc thay đổi diện và tái sử dụng giao diện bởi họ đã thiết kế ngay trên JFrame. Có một cách khác là chúng ta sẽ thiết kế từng giao diện trên các JPanel. Sau đó sẽ dùng phương thức setContentPane() của JFrame để thay đổi nội dung của JFrame chính.

Sau đây ta sẽ xem một ví dụ trên Netbeans về phát triển một ứng dụng: Ứng dụng có giao diện đầu tiên là đăng nhập (login). Sau đó nếu đăng nhập thành công thì sẽ chuyển sang giao diện chính (home)

1. Tạo một java application

Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing
Create Java Application

2. Tạo một JFrame (Main) và 2 JPanel (PnLogin , PnHome)

Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing
Các thành phần của ứng dụng

3. PnLogin

  • Thiết kế giao diện cho PnLogin
Làm sao để tạo giao diện linh hoạt và tái sử dụng được trong Swing
Giao điẹn của PnLogin
  • Ở giao diện này khi người dùng đăng nhập đúng thì sẽ chuyển sang giao diện Home, bởi thế panel này cần có thuộc tính JPanel cần chuyển tới.
//panel sẽ được hiển thị khi login thành công
private JPanel pnLoginSuccess;

/**
 * Xác định panel sẽ hiển thị khi đăng nhập thành công
 * @param pnLoginSuccess
 */
public void setPnLoginSuccess(JPanel pnLoginSuccess) {
	this.pnLoginSuccess = pnLoginSuccess;
}
  • Code cho sự kiện click chuột vào nút Login:

Click chuột phải vào nút Login và chọn Events ==> Action ==> actionPerformed

JFrame parent = Utitilities.findJFrameOf(this);
if (parent != null) {
	parent.setContentPane(pnLoginSuccess);
	parent.pack();
} else {
	JOptionPane.showMessageDialog(parent, 
             "Panel Login only used for JFrame");
	System.exit(1);
}

Phương thức Utitilities.findJFrameOf(this) là để tìm JFrame chứa một component

package tap.chi.lap.trinh;

import java.awt.Component;
import java.awt.Container;
import javax.swing.JFrame;

/**
 *
 * @author cibervn
 */
public class Utitilities {

    /**
     *
     * @param component
     * @return top level container JFrame 
     *that contains component
     */
    public static JFrame findJFrameOf(Component component) {
        Container c = component.getParent();
        while (c.getParent() != null) {
            c = c.getParent();
        }
        if (c instanceof JFrame) {
            return (JFrame) c;
        }
        return null;
    }
}

4. Main

JFrame này chứa các panel có thể có, và cần phải xác định navigation giữa các giao điện

private PnLogin pnLogin;
    private PnHome pnHome;

    /**
     * Creates new form Main
     */
    public Main() {
        //
        initComponents();

        //Khởi tạo các Panel của ứng dụng
        initPanels();

        //Xây dựng giao diện ban đầu cho ứng dụng
        setContentPane(pnLogin);
        pack();
    }

    private void initPanels() {
        pnLogin = new PnLogin();
        pnHome = new PnHome();

        //Xác định navigation
        //Sau khi đăng nhập thành công sẽ 
        //chuyển sang giao diện của PnHome
        pnLogin.setPnLoginSuccess(pnHome);

    }

5. Tương tự như PnLogin ta xây dựng giao diện cho các panel khác.
Source code

Bài viết gốc được đăng tải tại Tạp chí Lập Trình

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

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

VECOM tổ chức Diễn đàn Chuyển đổi số trong lĩnh vực xuất nhập khẩu hàng hóa lần thứ 2 (VOIEF) – 2020

VOIEF

Diễn đàn Chuyển đổi số trong lĩnh vực xuất nhập khẩu hàng hóa lần thứ 2 (VOIEF – Vietnam Online Import-Export Forum) do Hiệp hội Thương mại Điện tử Việt Nam (VECOM)  được tổ chức vào ngày 28/07 tới đây sẽ là sự kiện quy mô toàn quốc thu hút sự quan tâm lớn của cộng đồng.

Diễn đàn VOIEF có những gì?

Theo Báo cáo Chỉ số Thương mại điện tử Việt Nam 2020, nhiều doanh nghiệp Việt Nam đã triển khai thương mại điện tử nhằm hỗ trợ xuất nhập khẩu theo cả mô hình doanh nghiệp tới doanh nghiệp (B2B) cũng như doanh nghiệp tới người tiêu dùng (B2C).

Với chủ đề “Giải pháp chuyển đổi số”, Diễn đàn tập trung cung cấp các giải pháp quan trọng đối với lĩnh vực xuất nhập khẩu hàng hóa đồng thời tạo cơ hội cho các bên liên quan tới lĩnh vực xuất nhập khẩu hàng hoá nắm bắt những cơ hội có được từ các hiệp định thương mại tự do, bao gồm EVFTA. Diễn đàn với sự tham gia của những tập đoàn toàn cầu với hệ sinh thái thương mai điện tử hàng đầu trong và ngoài nước như: Alibaba, Amazon, Facebook, Google… cùng nhiều doanh nghiệp lớn trong nước về TMĐT cũng như XNK.v

Đặc biệt, sự cấp bách của chuyển đổi số của các doanh nghiệp trong nước và các doanh nghiệp Việt Nam ở châu Âu để nắm bắt ngay cơ hội của Hiệp định Thương mại tự do Việt Nam – EU (EVFTA) có hiệu lực từ tháng 8/2020. Vì vậy, các vấn đề về thuế, thủ tục hải quan, mẫu xác nhận C/O truy xuất nguồn gốc xuất sứ là nền tảng cơ bản cần nắm bắt để có thể bắt tay đưa sản phẩm Việt ra thị trường thế giới.

Diễn đàn VOIEF 2020 sẽ được tổ chức tại Hà Nội kết hợp phát trực tuyến miễn phí tới mọi đối tượng quan tâm trong nước và nước ngoài.

VOIEF

Khi tham gia diễn đàn, bạn sẽ được những gì?

Thông qua sự kiện giúp các doanh nghiệp xuất nhập khẩu giao lưu, kết nối, trao đổi cơ hội hợp tác kinh doanh với các doanh nghiệp cung cấp dịch vụ hỗ trợ như thương mại điện tử, ngân hàng, bảo hiểm, logistics…

Tham gia diển đàn, bạn sẽ được:

  1. Nắm bắt các giải pháp, công nghệ tiên tiến, dịch vụ công trực tuyến… hỗ trợ xuất nhập khẩu

2. Cơ hội tiếp cận trực tiếp các cơ quan hoạch định chính sách và thực thi pháp luật về xuất nhập khẩu, hải quan… đồng thời cập nhật nhiều xu hướng xuất nhập khẩu mới, gặp gỡ hàng trăm doanh nghiệp kinh doanh xuất nhập khẩu tiềm năng.

3. Thúc đẩy liên kết , hợp tác kinh doanh với các đối tác

4. Rà soát các chính sách, giải pháp trong bối cảnh kinh tế số tác động sâu sắc tới quản lý, hỗ trợ hoạt động xuất nhập khẩu.

5. Điều chỉnh mô hình, phương thức hoạt động của các hiệp hội nhằm hỗ trợ tốt hơn hoạt động xuất nhập khẩu của doanh nghiệp hội viên.

Thông tin diễn đàn:

Diễn đàn VOIEF 2020 sẽ được tổ chức tại Hà Nội dưới cả 2 hình thức: trực tuyến (online) và tại chỗ (offline), miễn phí chi phí tham dự.

– Thời gian:8h00 – 12h00, thứ Ba, ngày 28/7/2020

– Địa điểm: Hanoi Tower, 49 Hai Bà Trưng, Hà Nội

Để BTC chuẩn bị chu đáo, Đại diện quý Doanh nghiệp tham dự Diễn đàn vui lòng đăng ký tại website sự kiện: http://voief.vecom.vn hoặc trực tiếp tại link: https://bit.ly/voief2020 trước ngày 24/07/2020

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

khuynh-huong-nguoi-tre-thieu-no-luc

“Có làm thì mới có ăn” – Câu nói được xem là khá thực tế trong xã hội hiện đại và dưới áp lực cạnh tranh của thời đại công nghệ kỹ thuật số, con người cần phải lao động nhiều hơn để tạo ra giá trị. 

Nhiều người trẻ với mong muốn sớm có những thành tựu nhanh chóng nhưng lại không chấp nhận “lăn xả” hoặc họ chấp nhận “nỗ lực tạm thời” nhưng thái độ làm việc thì thiếu chuyên nghiệp. Cùng TopDev tìm hiểu về khuynh hướng đạn này qua bài viết sau đây nhé!

Thiếu nỗ lực – Khuynh hướng làm việc khiến bạn tự hạ gục chính mình và trở thành kẻ thua cuộc

Bạn có biết không, cuộc sống là do bạn lựa chọn. Bạn có thể chọn cố gắng hết sức để đạt được thứ bạn mong muốn. Do đó, việc bạn phải đánh đổi bằng việc thức khuya, dậy sớm là điều hiển nhiên cần thực hiện để có được một mức lương cao. Không thể chấp nhận cái tư tưởng muốn an nhàn mà lại không cố gắng. Lương bèo bọt hay lương cao là do tự thân bạn nỗ lực mà đạt được, nếu cứ hi vọng có một công việc nhẹ nhàng với mức thu nhập cao ngất ngưỡng thì có lẽ bạn đang quá ảo tưởng về năng lực bản thân. Đồng thời tự hạ gục chính mình trước cuộc chơi đầy sự cạnh tranh về nghề nghiệp, trở thành kẻ thua cuộc trong phút chốc.

Hoặc là bạn tiếp tục phấn đấu hoặc là bỏ cuộc, điều quan trọng là bạn có lựa chọn được một công ty phù hợp với định hướng phát triển bản thân và thật sự quan tâm đến sức khỏe của mình hay không? Người trẻ cần nỗ lực nhưng điều đó không đồng nghĩa bạn sẽ chọn việc quá sức với mình. Tuy nhiên, nếu chọn việc nhàn rỗi với mức lương thấp thì bạn lại không có động lực và thiếu trách nhiệm. Đó tuy là một nghịch lý nhưng nó vẫn tồn tại trong tư tưởng của các bạn trẻ đang bắt đầu gia nhập cuộc chơi nghề nghiệp.

Ảo tưởng quá sớm về cái gọi là “đỉnh cao” nghề nghiệp dường như đã khiến bạn mất phương hướng. Bạn quên mất rằng, mọi thành công đều đến từ những nỗ lực mà có. Dù cho đó là sự may mắn khi bạn đạt được thành tựu khi còn trẻ nhưng việc chấp nhận nó và rồi thiếu đi những nỗ lực cần phải có khi bước sang giai đoạn mới, đó là suy nghĩ sai lầm của các bạn trẻ hiện nay. Cái gì nhanh đến thì sẽ nhanh đi và điều bạn thiếu chính là những trải nghiệm, sự kiên trì, không ngừng thay đổi để đạt đến những thành quả lớn hơn. 

Loại bỏ ngay quan niệm sai lầm: Có kinh nghiệm rồi thì ngừng cố gắng!

Bạn đã làm tại một công ty chuyên về tuyển dụng IT. Cũng xấp xỉ 30 rồi còn gì, về tuổi đời và tuổi nghề, bạn đều khá tự tin vì có một thời gian đủ lâu để bản thân phát triển kỹ năng, chuyên môn của mình về nghề nghiệp. Tuy nhiên, bạn cảm thấy bất mãn vì sếp từ chối giao cho mình vị trí Phó Giám đốc và khi ngẫm lại, bạn cũng cho rằng mức lương bạn nhận được cũng chẳng thấm vào đâu.

Vậy lý do là gì? Rất nhiều lý do khiến bạn tất nhiên bị loại khỏi danh sách ứng cử viên cho sự thăng tiến. Thứ nhất, những người được chọn khác bạn, họ chưa bao giờ xem mình là những người ở tuổi 30 cả. Họ làm việc hết mình với năng suất như những chàng trai/cô gái trẻ, họ không ngừng học tập những cái mới, tự chịu áp lực và khi đương đầu với khó khăn họ đều bình tĩnh vượt qua, tìm cách tháo gỡ chúng. Đó là những biểu hiện xác đáng nhất khiến họ đủ tố chất và khả năng để được giao phó cho một trọng trách mới.

  Giải pháp cho những ai đối mặt với căng thẳng tại nơi làm việc

nỗ lực

Còn bạn thì sao? Bạn chê lương thấp nên đi làm không tuân thủ giờ giấc. Điều này khiến các đồng nghiệp cảm thấy khó chịu. Chính vì lương thấp nên bạn tự cho mình cái quyền làm việc qua loa, đi trể về sớm và không nỗ lực trong công việc của mình. Khi được cấp trên giao cho các dự án tuyển lập trình viên, bạn chỉ đơn thuần phân bổ nhiệm vụ mà không kiểm soát tốt, công tác tuyển dụng thì chưa chặt chẽ, hời hợt từ việc truyền tải thông tin đến chăm sóc các ứng viên. Từ đó, dẫn đến hiệu suất làm việc không cao, trễ deadline, thiếu KPI và quan trọng là tác phong làm việc chưa tốt thì việc bạn nhận được mức lương “cao” là điều dễ hiểu.

Hãy dẹp ngay suy nghĩ bạn đã làm việc lâu năm, đủ những trải nghiệm và chuyên môn rồi nên nỗ lực quá nhiều là điều không thật sự cần thiết nữa. Sự lười nhát, thiếu cố gắng chỉ khiến bạn mãi dậm chân và khó phát triển. Bạn từng cố gắng rất nhiều để có những thành quả ở tuổi 20 nhưng lại lạc lõng vào năm 30 tuổi. Dù tuổi tác chỉ là một con số ước định nhưng bạn cần nhớ rằng sự nỗ lực là điều luôn luôn cần thúc đẩy. Dừng nỗ lực khi đạt được một chút thành công vào ở cái tuổi đời còn quá trẻ chưa nói lên được điều gì cả. Quan trọng là bạn hãy nhớ rằng không ai trả tiền cho bạn thông qua bằng cấp mà những gì bạn làm được mới là thước đo chính xác nhất thể hiện đúng những gì bạn được nhận.

Nhận thức về giá trị của sự nỗ lực 

Nỗ lực là bí quyết dẫn đến thành công bên cạnh trí thông minh sẵn có. Mọi người thường nói rằng nếu bản thân họ quá già hay nói cách khác là có thâm niên trong lĩnh vực nghề nghiệp mình theo đuổi thì việc đào tạo nhân sự tuyển dụng dường như quá khó khăn do áp lực lương cao. Ngược lại, nếu lương thấp thì họ lại thiếu hứng thú với công việc.

nỗ lực 

Trên thực tế, không có bất kỳ công việc nào là kiếm tiền một cách dễ dàng. Điều đó đồng nghĩa bạn phải đánh đổi công sức, chất xám của mình để đầu tư lâu dài cho việc phát triển nghề nghiệp.

Và tất nhiên, không có độ tuổi nào là không làm việc chăm chỉ cả. Có những người làm việc chăm chỉ hơn bạn và cũng có không ít người có mức lương thấp hơn. Tất cả đều do mọi nỗ lực tạo ra giá trị và thành quả của bạn. Chính vì vậy, bạn phải học cách quên đi tuổi tác của mình, đừng xem nó là rào cản bởi vì nỗ lực là chuyện không của riêng ai. 

Có thể nói rằng, cổ phiếu đáng giá nhất của người trẻ chính là sở hữu một tình thần mạnh mẽ, một sức khỏe tốt để họ có cơ hội phát huy tối đa năng lực của mình. Còn trẻ, đừng vội nghĩ đến việc nghỉ ngơi mà hãy cố gắng tạo ra giá trị. Khó có thể phán đoán được liệu thành quả mà bạn tạo ra sau 2 năm, 10 năm hay 30 năm sau sẽ như thế nào nhưng hãy tin rằng, bạn sẽ hài lòng và cảm thấy hạnh phúc vì trong quá khứ, mình đã từng nỗ lực rất nhiều để đạt đến thành công. 

Lời kết

Chung quy lại, bạn hãy nhớ rằng: Khi đến một thời điểm thật sự thích hợp, giai đoạn mà khả năng của bạn được ghi nhận, tổng hợp và xem xét xứng đáng cho một vị trí nào đó, giá trị của sự nỗ lực lúc này rất quan trọng vì nó là điểm cộng lớn giúp bạn có cơ hội được thăng tiến cao hơn. Nỗ lực phải luôn luôn hiện hữu và được thúc đẩy từng ngày, không chỉ đơn thuần dừng lại ở việc là phương tiện giúp thỏa mãn những đòi hỏi sớm của người trẻ.

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

Xem thêm IT Jobs Developer trên TopDev

 

Dịch vụ thị trường vận chuyển và giao nhận Landscape 2020

thị trường thanh toán điện tử landscape 2020

Nối tiếp báo cáo thị trường IT Landscape 2019, báo cáo mới nhất về thị trường vận chuyển và giao nhận 2020 vừa mới ra mắt, thông số trong báo cáo khá khả quan bất chấp dịch bệnh Covid được xem là một trong những đại dịch làm ảnh hưởng nghiêm trọng đến các ngành nghề khác nhau ở hầu hết các quốc gia, đặc biệt là Châu Âu.

Tổng quan về báo cáo Landscape 2020

Theo báo cáo thị trường Vietnam IT Landscape 2020, tuy 6 tháng đầu năm các ngành có xu hướng “tuột dốc” nhưng với tình hình hiện này thì chúng ta có thể thấy rõ nền kinh tế Việt Nam đang dần khởi sắc ở các ngành nghề nói chung và các công ty công nghệ nói riêng. Trong bài báo cáo này, chúng ta sẽ chỉ tập trung đến tình hình của ngành dịch vụ thị trường vận chuyển và giao nhận. Nhìn chung, tại Việt Nam, các dịch vụ vận chuyển khá được ưa chuộng, nhất là các dịch vụ vận chuyển của những công ty công nghệ như Grab, Goviet, Lalamove, Giaohangnhanh… 

Theo báo cáo thị trường vận chuyển và giao nhận 2020, trong năm 2011-2017 (6 năm), các dịch vụ vận chuyển, giao nhận công nghệ trong đó có ứng dụng đi lại chỉ có 2 ứng dụng phát triển đó là Uber và Grab, còn ở ứng dụng giao đồ ăn thì có ông trùm độc quyền Now tại thời điểm này. Ứng dụng vận chuyển hàng hóa thì có Vietnam Post, Viettel Post, Grab Express… đa số là các ứng dụng giao hàng được phân nhánh từ các công ty lớn của nhà nước. Nhưng kể từ năm 2018 trở đi, thì dịch vụ vận chuyển và giao nhận phát triển khá nhanh, các ứng dụng giao nhận, vận chuyển được ào ào ra mắt ví dụ như goviet, be, fastgo… đối với các ứng dụng đi lại. Ứng dụng giao đồ ăn cũng khá khả quan với các ứng dụng Grabfood, Loship, Gofood, Baemin… đã ra đời nhằm đáp ứng nhu cầu ăn uống được giao hàng tận nơi.

thị trường vận chuyển và giao nhận 2020

Xem thêm báo cáo về Thị trường vận chuyển và giao nhận 2020

Dù các ứng dụng giao hàng, vận chuyển phát triển mạnh mẽ là thế nhưng khi đến giai đoạn từ khoảng đầu năm 2020, thời điểm dịch dịch mon men phát triển tại Việt Nam thì thị trường vận chuyển giao nhận 2020 lại có 1 pha “hú hồn” vì dịch. Dịch bệnh đã làm ảnh hưởng rất nhiều đến hành vi của User khi sử dụng dịch vụ giao nhận, cụ thể, theo thống kê, thị trường vận chuyển và giao nhận Landscape 2020, ứng dụng Grab thì trong năm 2019, Grab Express có mức tăng trưởng 97%, Grab Food tăng trưởng tầm 1.800% trong năm.

Nhưng trong năm nay, theo báo cáo thị trường vận chuyển và giao nhận 2020 thì tổng doanh thu từ thị trường đặt xe đã giảm mạnh từ 3,126 triệu $/năm (2019) xuống thấp nhất từ trước đến nay là 2,000 triệu $/năm. Đây là một con số đáng báo động về sự suy thoái trong ngành. Tuy thị trường đặt xe “bê bết” là thế nhưng vẫn còn một thị trường có thể gỡ lại 1 chút, đó là thị trường đặt đồ ăn qua ứng dụng. Vì tình hình dịch bệnh làm thay đổi hành vi người dùng nên thay vì kéo nhau ra ngoài ăn thì mọi người sẽ order đồ ăn để ăn tại chỗ, nền tảng giao đồ ăn “soán ngôi”, tỷ lệ giao đồ ăn tăng vọt.

Dự kiến thị trường giao thực phẩm Đông Nam Á sẽ tăng từ 2 tỷ USD (2018) lên 8 tỷ USD (2025) – theo báo cáo của Google và Singapore Temasek. Trong riêng năm 2020, doanh thu của ngành vận chuyển và giao nhận nói chung tại Việt Nam là 302 triệu USD (tăng 45,9% so với cùng kì năm ngoái, người dùng (User) là 9.5 triệu người (tăng 37.1% so với năm ngoái). Tuy trong thời gian ảnh hưởng dịch bệnh từ thế giới, ngành này tuy có bị ảnh hưởng một ít nhưng may mắn thay chính phủ Việt Nam đã đưa ra những chủ trương phòng bệnh rất hiệu quả nên cũng đỡ được phần nào ảnh hưởng. Ngoài ra, dịch vụ đặt đồ ăn qua ứng dụng đã “gánh team” cho thị trường vận chuyển và giao nhận 2020 tại Việt Nam.

thị trường vận chuyển và giao nhận 2020

Khó khăn từ phía ứng dụng vận chuyển, giao nhận

Mới đây, Grab cũng đã đưa ra thông cáo báo chí rằng sẽ cắt giảm 5% đội ngũ nhân sự trên toàn thế giới trong đó có Việt Nam, tương đương với 360 người. Khi được hỏi tại sao Grab lại có những động thái này dù dịch bệnh đã phần nào nguôi ngoai, CEO của Grab Việt Nam – ông Anthony Tan đã chia sẻ trong tiếc nuối: “Grab phải áp dụng chiến lược bảo toàn nguồn vốn phù hợp hơn để dự phòng cho giai đoạn phục hồi có thể kéo rất dài, cần có một bộ máy tinh gọn hơn để đáp ứng được những thách thức của nền kinh tế hậu COVID-19”. Đồng thời ông cũng cam kết rằng sẽ không để cho sự việc tương tự như việc cắt giảm nhân sự này xảy ra thêm lần nào nữa.

  StackOverflow công bố báo cáo khảo sát Lập trình viên 2019: Python là ngôn ngữ phát triển nhanh nhất

  Báo cáo toàn cảnh thị trường IT Việt Nam 2019 - Các công ty công nghệ tại Việt Nam đang làm gì?

Trong khoảng từ cuối tháng 4 năm nay, Grab đã khuyến khích nhân viên chủ động nghỉ hoặc giảm thời gian làm trong ngày để tránh việc phải cắt giảm nhân sự trong mùa dịch, nhưng dường như chiến dịch ấy vẫn không quá khả quan, chính vì vậy mới xảy ra sự việc cắt giảm 5% nhân viên Grab trong giữa tháng 6. Ông Anthony Tan, chỉ cho biết Việt Nam cũng là 1 trong những nước phải cắt giảm nhân sự nhưng lại không tiết lộ chính xác con số. 

Xem thêm báo cáo về Thị trường vận chuyển và giao nhận 2020

Ngoài việc chia sẻ về sự việc không mong muốn như trên thì ông cũng chia sẻ thêm rằng kể từ tháng 2/2020 thì Grab đã cảm nhận rõ ràng về sự ảnh hưởng mạnh mẽ của dịch đối với dịch vụ vận chuyển và giao nhận. Định hướng cũng Grab trong tình hình này là Grab sẽ tập trung vào những mảng mạnh của công ty như di chuyển, giao nhận và thanh toán, hạn chế những dự án đang phát triển để bảo toàn nguồn vốn lưu động.

Đối với ứng dụng đặt xe Be, đại diện phía Be cũng cho biết, các hoạt động dịch vụ của Be cũng bị ảnh hưởng kể từ sau Tết Nguyên đán năm nay. Nhìn chung, các công ty của ngành dịch vụ vận chuyển và giao nhận đều có khó khăn chung trong tình hình hiện tại.

thị trường vận chuyển và giao nhận 2020

Khó khăn từ phía tài xế

Chia sẻ thực tế với các phóng viên các tờ báo lớn, một tài xế của ứng dụng xe ôm công nghệ Be cho hay vào thời điểm trước dịch, thông thường mỗi ngày anh có thể chạy với năng suất 20-25 chuyến/ngày, tính thêm cả điểm thưởng từ app thì thu nhập của các tài xế Be giao động trong khoảng từ 300.000-400.000 đồng/ngày. Nhưng trong thời điểm dịch bùng phát thì thu nhập của các tài xế bị ảnh hưởng trầm trọng, cụ thể là các chuyến xe giảm từ 25 chuyến/ngày còn 5 chuyến/ngày, dẫn đến việc không thể nhận thưởng, thu nhập giảm mạnh, sau khi trừ hết tất cả chi phí thì tiền thu về chỉ ở khoảng 30.000/ngày. 

Đó là đối với tài xế của ứng dụng Be, còn với ứng dụng có quy mô lớn hơn như Grab thì các tài xế chia sẻ, vào thời điểm trước dịch, lượng người dùng sử dụng Grab rất mạnh mẽ. Hầu như lúc nào mở ứng dụng Grab Driver lên cũng sẽ có khách ngay lập tức, một ngày có thể nhận đến 30-40 chuyến nếu chịu khó chạy liên tục cả ngày, nhưng khi dịch đến thì dù có mở app cả ngày vẫn chỉ có 2, 3 chuyến.

Không riêng gì các dịch vụ vận chuyển 2 bánh, những khó khăn ấy còn bao trùm lên cả các tài xế xe hơi công nghệ, khó khăn sẽ càng nặng trĩu hơn nếu những tài xế xe hơi này phải trả góp ngân hàng tiền mua xe. Khó khăn này chồng chất lên khó khăn kia làm những người lao động trong thị trường vận chuyển và giao nhận trở nên điêu đứng.

  Báo cáo thị trường IT 2020: Việt Nam sẽ trở thành quốc gia IT với nhiều chỉ số trong top thế giới

Trong mùa dịch này, khi may mắn bắt được một chuyến xe thì sự lo lắng vẫn luôn thường trực trong tâm trí của các tài xế xe ô tô vì không gian trong xe ô tô rất kín và khoảng cách ngồi giữa tài xế và hành khách cũng rất gần.

May mắn thay, trong báo cáo về thị trường vận chuyển và giao nhận 2020 thì chúng ta vẫn thấy những chỉ số khả quan, các chỉ số đã gia tăng đáng kể trong năm 2020 dù bị ảnh hưởng từ dịch bệnh.

thị trường vận chuyển và giao nhận 2020

Nguyên nhân của những thông số khả quan này phải kể đến công của thị trường ứng dụng giao đồ ăn và ứng dụng vận chuyển hàng hóa.

Dịch bệnh nổ ra làm thay đổi thói quen người tiêu dùng, chính vì thế thị trường giao đồ ăn và vận chuyển hàng hóa có dịp lên ngôi. Nguồn khách hàng chính của 2 thị trường này đến từ lao động khối văn phòng là chính, thay vì ra ngoài ăn thì mọi người lại có xu hướng mời gọi nhau ăn cùng 1 quán, sau đó đặt giao đồ ăn đến ăn tại ngay chỗ làm.

Cùng chung hoàn cảnh với thị trường giao thực phẩm, thị trường giao hàng cũng được ưa chuộng vì trong thời gian giãn cách mọi người ở nhà có nhu cầu shopping online hoặc gửi đồ đều sử dụng dịch vụ giao hàng như lalamove, ahamove, 60 giây, giao hàng tiết kiệm, giao hàng nhanh… thậm chí đôi khi đơn hàng quá tải, các ứng dụng giao hàng không chuyển hàng đến khách kịp nên phải tuyển thêm rất nhiều shipper trong mùa dịch. Vì tính tiện dụng cao nên việc đặt đồ ăn và giao hàng khá bùng nổ trong mùa dịch này, dẫn đến 1 cơ hội mới, 1 xu hướng sử dụng dịch vụ vận chuyển và giao nhận mạnh mẽ hơn.

Giải pháp

Trong bối cảnh tình hình hiện tại, các công ty, doanh nghiệp dịch vụ vận chuyển và giao nhận rất tất bật trong việc tuyên truyền các giải pháp tự bảo vệ bản thân cho cánh tài xế để có thể phòng ngừa và tránh lây nhiễm nguồn dịch bệnh không mong muốn khi tác nghiệp.

Giải pháp chung của các doanh nghiệp dịch vụ vận chuyển, giao nhận như Grab, Be, Goviet, Lalamove, Ahamove, Giao Hàng Nhanh, Giao Hàng Tiết Kiệm… là:

  • Khuyến khích/ bắt buộc tài xế luôn đeo khẩu trang khi ra đường
  • Rửa tay bằng dung dịch diệt khuẩn thường xuyên
  • Đối với các chuyến giao nhận hàng hóa, đồ ăn tài xế chủ động đặt đồ cần giao trước địa chỉ được yêu cầu giao tới, đứng cách xa 3 mét và gọi khách xuống nhận hàng.
  • Liên hệ ngay đến các cơ quan y tế và tổng đài của công ty nếu cảm thấy không khỏe trong người hoặc có dấu hiệu dịch bệnh.

Đối với các tài xế không tuân thủ các quy tắc phòng chống trên thì sẽ bị các ứng dụng giao hàng phát bằng nhiều hình thức khác nhau và nặng nhất là khóa tài khoản, không cho các tài xế ấy hoạt động nữa.

Bên cạnh đó, ứng dụng Be đã có kế hoạch cho việc “sống chung với lũ” nhằm giúp doanh nghiệp có thể duy trì qua mùa dịch và thúc đẩy hoạt động kinh doanh của thị trường. Còn đối với ứng dụng Grab, tình hình kinh tế của Grab cũng vẫn duy trì khá cân bằng nhờ có những bước đi hợp lý.

Tổng kết thị trường vận chuyển và giao nhận 2020

Theo báo cáo của Vietnam IT Landscape 2020 cho thấy thị trường vận chuyển và giao nhận Landscape 2020, dù nhu cầu sử dụng dịch vụ vận chuyển giao nhận có thay đổi và giảm mạnh, tuy nhiên ngành này vẫn “ăn điểm” so với những ngành khác nhờ có dịch vụ giao đồ ăn và giao hàng hóa tận nơi. Phần lớn người dùng trong thị trường này chỉ chuyển cách thức sử dụng dịch vụ chứ không hẳn là từ bỏ thế nên thông số trong báo cáo Vietnam IT Landscape 2020 đã thể hiện sự tăng trưởng từ năm này sang năm khác là hoàn toàn hợp lý.

Các bạn có thể truy cập vào báo cáo Vietnam IT Landscape 2020 hoặc nhấn nút xem báo cáo dưới đây để có thể tìm hiểu thêm các thông số báo cáo không chỉ của riêng thị trường vận chuyển và giao nhận 2020 mà còn nhiều ngành liên quan đến công nghệ khác nữa!

Nguồn tổng hợp từ TopDev

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

Xem thêm việc làm IT hấp dẫn từ TopDev!

Tạo slider component trong React Native bằng PanResponder

Tạo slider component trong React Native bằng PanResponder

Tạo một Slider component trong React Native bằng cách sử dụng PanResponder là một cách tuyệt vời để học cách xử lý các cử chỉ người dùng trong ứng dụng di động. PanResponder cho phép bạn nắm bắt và phản ứng với các sự kiện vuốt và kéo của người dùng. Dưới đây là một ví dụ đơn giản về cách bạn có thể tạo một slider component bằng PanResponder.

Tạo Slider Component

Tạo một tệp mới với tên Slider.js trong thư mục dự án của bạn và sao chép đoạn mã dưới đây vào:

import React, { useState, useRef } from 'react';
import { View, Animated, PanResponder, StyleSheet } from 'react-native';

const Slider = ({ width = 300, height = 40 }) => {
  const [position, setPosition] = useState(new Animated.Value(0));
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        position.setOffset(position._value);
        position.setValue(0);
      },
      onPanResponderMove: Animated.event(
        [null, { dx: position }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: () => {
        position.flattenOffset();
      },
    })
  ).current;

  const sliderWidth = width - height;

  return (
    <View style={[styles.container, { width, height }]}>
      <View style={styles.track} />
      <Animated.View
        {...panResponder.panHandlers}
        style={[
          styles.thumb,
          {
            transform: [
              {
                translateX: position.interpolate({
                  inputRange: [0, sliderWidth],
                  outputRange: [0, sliderWidth],
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    backgroundColor: '#ddd',
    borderRadius: 20,
    overflow: 'hidden',
  },
  track: {
    height: 4,
    backgroundColor: '#888',
    position: 'absolute',
    left: 0,
    right: 0,
  },
  thumb: {
    width: 40,
    height: 40,
    backgroundColor: '#FFF',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#888',
    position: 'absolute',
  },
});

export default Slider;

Sử dụng Slider Component trong Ứng Dụng

Trong tệp chính của bạn (ví dụ: App.js), bạn có thể sử dụng Slider component như sau:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import Slider from './Slider';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Slider />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Giải Thích và Tinh Chỉnh

  • PanResponder.create: Đây là cách bạn tạo một PanResponder mới. Nó có nhiều sự kiện khác nhau để lắng nghe các cử chỉ của người dùng.
  • Animated.Value: Đây là giá trị động mà bạn có thể thay đổi và liên kết với các thuộc tính của các thành phần khác.
  • onPanResponderMove: Sự kiện này được kích hoạt khi người dùng di chuyển ngón tay của họ. Trong trường hợp này, chúng ta sử dụng Animated.event để di chuyển thumb của slider theo ngón tay.
  • interpolate: Chúng ta sử dụng interpolate để đảm bảo giá trị của slider nằm trong phạm vi cho phép.

Bạn đã tạo thành công một Slider component đơn giản trong React Native bằng cách sử dụng PanResponder. Bạn có thể tùy chỉnh thêm component này để phù hợp với nhu cầu của ứng dụng của mình, chẳng hạn như thay đổi màu sắc, thêm nhãn giá trị, hoặc kết hợp với các logic khác trong ứng dụng.

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

Bài viết liên quan:

  9 ứng dụng tuyệt vời được viết bằng React Native

  Những lý do ảnh hưởng đến ReactNative performance của bạn

Điểm qua các kiểu navigator của thư viện react-navigation

diem-qua-cac-kieu-navigator-cua-thu-vien-react-navigation
Bài viết được sự cho phép của tác giả Lưu Bình An
Chúng ta cùng liệt kê qua các dạng navigator, khi nào, dùng ở đâu là hợp lý
  6 Javascript destructuring tricks
  1001 cách tạo Array trong Javascript (Phần 1)

Có rất nhiều thư viện khác nhau để làm navigation với React native, mình khuyến khích các bạn dùng react-navigation của Facebook phát triển cho React Native, nói chung cái gì đã có bản official của chính người sáng lập thì mình cứ đè nó ra xài

Stack

Điểm qua các kiểu navigator của thư viện react-navigation

Khi mở một màn hình mới, nó sẽ sếp chồng lên trên màn hình trước đó. Kiếu sếp bánh tráng.

Theo mặc định, màn hình mới chạy từ cạnh phải -> qua trái màn hình trong iOS, mờ -> đến rõ dần từ dưới lên trong android

API

createStackNavigator(RouteConfigs, StackNavigatorConfig)

Ví dụ

const StackScreens = createStackNavigator(
  {
    Main: { screen: Main },
    Login: { screen: Login }
  },
  {
    headerMode: 'none',
    mode: 'modal'
  }
);

Switch

Với Swtich Navigator chỉ hiển thị 1 màn hình, không có goBack(), phù hợp nhất với flow Authentication, flow này thường sẽ là

  • User mở ứng dụng
  • Ứng dụng load dữ liệu authentication (nếu có) trong AsyncStorage
  • Sau khi load, hiển thị trang chính hoặc màn hình đăng nhập
  • Sau khi user sign out, hiển thị màn hình đăng nhập

API

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

Ví dụ

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

import {HomeScreen, SignInScreen, OtherScreen, AuthLoadingScreen} from './screens';

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

Tham khảo thêm cách implement Authentication Flow

Drawer

Kiểu menu trượt từ bên trái thấy trong Android

Điểm qua các kiểu navigator của thư viện react-navigation

API

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

Ví dụ

  1. TouchableMenuIcon là component luôn hiển thị ở gốc trái của ứng dụng
  2. Chạm vào icon, SideMenu component được hiển thị, style tùy thích
  3. RootStack là một Stack Navigator chứa các màn hình chính của ứng dụng
  4. MyDrawerNavigator tạo ra từ createDrawerNavigator(), sẽ đảm nhiệm việc show side menu, để ý cái props contentComponent
import React, { Component } from 'react';
import { Button, View, Text, Image, TouchableOpacity } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import {RootStackScreen1, RootStackScreen2, RootStackScreen3} from './screens';


// 1) `TouchableMenuIcon` là component luôn hiển thị ở gốc trái của ứng dụng

class TouchableMenuIcon extends Component {

  toggleDrawer=()=>{    
    this.props.navigationProps.toggleDrawer();
  }
  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
          <Image
            source={{uri : 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png'}}
            style={{ width: 25, height: 25, marginLeft: 5}}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

// 2) Chạm vào icon, `SideMenu` component được hiển thị, style tùy thích

class SideMenu extends Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <View style={{flexDirection: 'column', marginTop:30, justifyContent: 'space-around'}}>
         <Button
              title="Screen 1"
              onPress={() => {
                this.props.navigation.navigate('RootStackScreen1');
                this.props.navigation.closeDrawer();

              }}
          />
          <Button
              title="Screen 2"
              onPress={() => {
                this.props.navigation.navigate('RootStackScreen2');
                this.props.navigation.closeDrawer();

              }}
            />
          <Button
              title="Screen 3"
              onPress={() => {
                this.props.navigation.navigate('RootStackScreen3');
                this.props.navigation.closeDrawer();

              }}
            />
        </View>
      </View>
    );
  }
}

// 3) `RootStack` là một Stack Navigator chứa các màn hình chính của ứng dụng
const RootStack = createStackNavigator(
  {
    RootStackScreen1: RootStackScreen1,
    RootStackScreen2: RootStackScreen2,
    RootStackScreen3: RootStackScreen3
  },
  {
    initialRouteName: 'RootStackScreen1',  
    navigationOptions: ({ navigation }) => ({
      title: "Root Stack", 
      headerLeft: <TouchableMenuIcon navigationProps={ navigation }/>
    })
  }
);



// 4) `MyDrawerNavigator` tạo ra từ `createDrawerNavigator()`, sẽ đảm nhiệm việc show side menu, để ý cái `props` **contentComponent**

export default MyDrawerNavigator = createDrawerNavigator(  
  {
    RootStack: RootStack,
  },
  {
    contentComponent: SideMenu
  }
);

Bottom Tab

Kiểu tab bar nằm ở dưới màn hình, các màn hình sẽ không được render cho đến khi user focus

Điểm qua các kiểu navigator của thư viện react-navigation

API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

Material Top Tab

Hoạt động tương tự như Bottom Tab, chỉ là menu tab đặt ở phía dưới màn hình

Điểm qua các kiểu navigator của thư viện react-navigation

API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

Ví dụ lấy từ https://reactnavigation.org/docs/

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 react hấp dẫn tại TopDev

Kỹ thuật phần mềm – Software Engineering là gì? Có nên theo ngành này?

Kỹ thuật phần mềm là gì? Có nên theo ngành này?

Hãy mở chiếc smartphone của mình ra và các bạn đếm thử xem mình đang sử dụng bao nhiêu ứng dụng để phục vụ nhu cầu cá nhân của bản thân? Có thể bạn chưa để ý nhưng tất cả những ứng dụng đó đều là sản phẩm của lĩnh vực kỹ thuật phần mềm.

Với sự phát triển không ngừng của các thiết bị điện tử ngày nay, ngành nghề này đang ngày một mở rộng và trở nên quen thuộc cũng như gần gũi với cuộc sống của chúng ta hơn bao giờ hết.

Không phải ngẫu nhiên mà nó nằm trong top 5 chuyên ngành ‘nóng hổi’ nhất của ngành Công nghệ Thông tin. Ngoài ra bạn còn có nhiều cơ hội để thử sức ở các vị trí sở hữu mức lương khá hấp dẫn như: thiết kế và phát triển phần mềm, quản lý sản phẩm phần mềm, hỗ trợ phần mềm…

Nếu các bạn đang là học sinh/ sinh viên sắp thi đại học và có ý định chọn sự nghiệp trong ngành công nghệ thông tin cho mình thì bài viết này sẽ giúp bạn tìm hiểu hơn về chuyên ngành thời thượng này!

Kỹ thuật phần mềm là gì?

kỹ thuật phần mềm

Ngành Kỹ thuật Phần mềm (Software Engineering) là một lĩnh vực chuyên về việc phát triển, thiết kế, triển khai và bảo trì các hệ thống phần mềm. Đây là một ngành quan trọng trong lĩnh vực Công nghệ Thông tin, tập trung vào việc áp dụng các nguyên lý kỹ thuật và khoa học máy tính để tạo ra các sản phẩm phần mềm chất lượng cao, hiệu quả và đáng tin cậy đến tay người dùng cuối.

Đối với những bạn thích lập trình thuần túy, thì đây là ngành rất phù hợp với bạn. ‘Phần mềm’, ‘chương trình’ hay ‘ứng dụng’ đều là các sản phẩm của việc lập trình. Là một ngành chuyên nghiên cứu về cách thức hoạt động, quy trình, testing của các phần mềm vi tính nhằm đáp ứng theo nhu cầu của người dùng và khách hàng.

Và chắc bạn cũng biết, chúng ta sử dụng phần mềm mọi lúc mọi nơi: từ ứng dụng văn phòng cơ bản như Microsoft Word, Excel, Powerpoint đến trình duyệt web Chrome, Firefox, Safari hay Facebook, Google search cũng là 1 dạng của ứng dụng, đó là chưa kể các hệ điều hành phổ biến như Windows hay Linux cũng là nhờ nó thôi! Ngành này khá rộng nên ngoài các hướng đi phổ biến như thiết kế chương trình, ứng dụng, website thì lập trình game cũng là 1 hướng khác khá thú vị.

  Kỹ thuật phần mềm vs Khoa học máy tính - Nên chọn ngành nào/

Ngoài lập trình là chính thì kiến thức từ các lĩnh vực lân cận như kỹ thuật máy tính, khoa học máy tính, quản lý, toán học, quản lý dự án, quản lý chất lượng, công thái học phần mềm và kỹ thuật hệ thống cũng rất cần thiết, tùy vào lộ trình của mỗi người. Nhưng đừng lo, các thầy cô sẽ dạy hết những môn này cho bạn trên ghế giảng đường.

Có thể bạn quan tâm: Con gái nên học ngành nào của Công nghệ thông tin?

Kỹ thuật phần mềm là một trong các ngành hot và có điểm xét tuyển cao nhất nhì hiện nay.

Tham khảo ngay Điểm chuẩn ngành CNTT năm 2023

Học ngành Kỹ thuật phần mềm cần chuẩn bị gì?

Toán, toán và rất nhiều kiến thức về toán. Cũng giống như hầu hết các môn hay ngành nào trong lĩnh vực Công nghệ thông tin, các bạn đều phải hiểu rõ và áp dụng toán để giải quyết các vấn đề, bên cạnh đó việc học toán hiệu quả cũng sẽ giúp bộ não bạn rèn luyện tư duy tốt hơn.

Tiếp theo cũng là 1 môn rất quen thuộc nhưng có lẽ không phải bạn học sinh theo ngành kỹ thuật nào cũng giỏi, đó là tiếng Anh. Thực sự tiếng Anh chuyên ngành CNTT ban đầu là 1 môn khó xơi, nhưng bạn nên tập làm quen dần và rèn dũa mỗi ngày. Để tiến xa với ngành thì bạn cũng nên có khả năng đọc hiểu tốt, vì hầu hết các tài liệu quan trọng của ngành CNTT đều được viết bằng tiếng Anh. Ở 1 số trường Đại học còn dạy thêm môn tiếng Nhật. Vì ngoài tiếng Anh thì đây cũng là 1 ngôn ngữ rất hữu ích cho công việc lập trình của bạn sau này.

Cuối cùng nhưng cũng không kém phần quan trọng là kỹ năng tự học, tự tìm tòi. Kiến thức trên giảng đường thường chỉ là phần thiết yếu, để các bạn hiểu rõ về nguyên lý cũng như cách vận hành. Công nghệ ngày nay luôn được cập nhật và cải tiến mỗi ngày, các thầy cô cũng không thể luôn chạy theo xu hướng mới nhất được mà các bạn phải tự tập làm điều đó. Tính tò mò và đam mê luôn là 1 lợi thế lớn.

>> Đọc thêm: Không giỏi máy tính có học công nghệ thông tin được không?

ngành kỹ thuật phần mềm

Ngành Kỹ thuật phần mềm học những gì?

2 năm đầu: Các bạn sẽ được làm quen dần với kiến thức nền tảng cho ngành Công nghệ Thông tin, mình xin liệt kê các môn quan trọng để các bạn chú ý nghiên cứu và học tập kỹ hơn như Toán rời rạc, Giải tích, Đại số tuyến tính, Xác suất thống kê, Vật lý Đại cương đối với các môn đại cương hay các môn chuyên ngành cũng quan trọng không kém như Nhập môn lập trình, Cấu trúc dữ liệu và giải thuật, Lập trình hướng đối tượng, Cơ sở dữ liệu, Nhập môn công nghệ phần mềm. Đây đều là những môn căn bản bắt buộc để bạn học chuyên sâu sau này.

2 năm cuối: Đây là lúc bạn chọn hướng đi nghiên cứu chuyên sâu ngành cho mình, có 2 hướng là Phát triển phần mềm hay Lập trình game tùy vào sở thích và khả năng của bạn.

Tham khảo các nhóm ngành Công nghệ thông tin khác

Chương trình đào tạo của mảng Phát triển phần mềm

1. Kiến thức cơ bản

  • Toán học ứng dụng: Giải tích, Đại số tuyến tính, Xác suất thống kê.
  • Cơ sở dữ liệu: Nguyên lý cơ sở dữ liệu, Hệ quản trị cơ sở dữ liệu, Thiết kế cơ sở dữ liệu.
  • Ngôn ngữ lập trình: C, C++, Java, Python.
  • Cấu trúc dữ liệu và giải thuật: Các loại cấu trúc dữ liệu, thuật toán tìm kiếm và sắp xếp, độ phức tạp của thuật toán.

2. Kiến thức chuyên ngành

  • Phân tích và thiết kế hệ thống: Mô hình hóa yêu cầu, Thiết kế phần mềm, Phương pháp phân tích và thiết kế hướng đối tượng.
  • Phát triển phần mềm: Quy trình phát triển phần mềm, Phương pháp Agile, Scrum.
  • Kiểm thử phần mềm: Kiểm thử đơn vị, Kiểm thử tích hợp, Kiểm thử hệ thống, Kiểm thử chấp nhận.
  • Quản lý dự án phần mềm: Lập kế hoạch, Quản lý rủi ro, Quản lý chất lượng, Quản lý tài nguyên.

3. Kiến thức nâng cao và ứng dụng

  • Công nghệ web: HTML, CSS, JavaScript, Frameworks như Angular, React.
  • Phát triển ứng dụng di động: Android, iOS, Frameworks như React Native, Flutter.
  • Bảo mật phần mềm: Các nguyên lý bảo mật, Mã hóa dữ liệu, Bảo mật mạng.
  • Trí tuệ nhân tạo và học máy: Giới thiệu về AI, Machine Learning cơ bản, Ứng dụng AI trong phát triển phần mềm.

Chương trình đào tạo của mảng Lập trình game

1. Kiến thức cơ bản

  • Toán học ứng dụng: Giải tích, Đại số tuyến tính, Hình học không gian, Toán học cho đồ họa.
  • Ngôn ngữ lập trình: C++, C#, Python.
  • Cấu trúc dữ liệu và giải thuật: Cấu trúc dữ liệu tuyến tính, cây, đồ thị, thuật toán game.

2. Kiến thức chuyên ngành

  • Nguyên lý phát triển game: Thiết kế game, Lập kế hoạch phát triển game, Quy trình sản xuất game.
  • Đồ họa máy tính: Đồ họa 2D và 3D, Rendering, Shaders, OpenGL, DirectX.
  • Lập trình game: Lập trình game 2D, Lập trình game 3D, Các engine game như Unity, Unreal Engine.
  • Thiết kế nhân vật và môi trường: Mô hình hóa 3D, Texturing, Rigging, Animation.

3. Kiến thức nâng cao và ứng dụng

  • Phát triển game đa nền tảng: Phát triển game cho PC, Console, Mobile.
  • AI trong game: Trí tuệ nhân tạo cho game, Hành vi nhân vật, Học máy trong game.
  • Âm thanh và nhạc nền: Thiết kế âm thanh, Nhạc nền cho game.
  • Kiểm thử và tối ưu hóa game: Quy trình kiểm thử game, Tối ưu hóa hiệu suất game, Quản lý lỗi.

>> Tham khảo chương trình đào tạo ngành Kỹ thuật phần mềm tại trường ĐH Công nghệ thông tin TPHCM tại đây.

Học công nghệ thông tin khó không? Những khó khăn khi học CNTT?

Học ngành kỹ thuật phần mềm ra trường làm gì?

Nhu cầu nhân lực cho ngành Kỹ thuật phần mềm là rất lớn, các bạn Kỹ sư phần mềm sau khi ra trường có thể làm việc được ngay trong các dự án vừa và lớn hoặc chọn việc tiếp tục học lên thạc sĩ, tiến sĩ để theo con đường nghiên cứu.

Các công việc cụ thể tiêu biểu có thể kể đến là kỹ sư phát triển phần mềm / game, kỹ sư kiểm thử phần mềm, kỹ sư phân tích và thiết kế phần mềm, kỹ sư bảo trì phần mềm cũng như các vị trí điều hành các cấp trong dự án. Tương ứng với các công việc trên bạn sẽ có cơ hội lớn làm ở các công ty chuyên về phát triển, thiết kế phần mềm / game; công ty tư vấn thiết kế giải pháp CNTT cho doanh nghiệp hay các cơ quan, đơn vị vận hành và phát triển ứng dụng của nhà nước.

Nếu bạn đi theo hướng nghiên cứu thì các viện nghiên cứu và chuyển giao công nghệ lĩnh vực CNTT với vai trò là cán bộ nghiên cứu, ứng dụng CNTT hay trở thành các giảng viên tại các trường đại học, cao đẳng, trung học phổ thông, trung cấp và dạy nghề đào tạo về ngành CNTT.

Học ngành kỹ thuật phần mềm ra trường làm gì?

Nhu cầu việc làm cao, mức lương hấp dẫn cũng như rất nhiều cơ hội làm tại các công ty công nghệ lớn trong và ngoài nước là những mô tả thường thấy cho 1 người kỹ sư phần mềm.

Đương nhiên thành công không phải ai cũng dễ dàng đạt được nếu như không chịu khó học hỏi,  cố gắng và luôn ‘update’ bản thân. Nếu bạn yêu thích lập trình và có khả năng viết code tốt cùng nhiều ý tưởng thú vị cho các dự án của mình thì rõ ràng đây đúng là hướng đi tốt cho bạn đấy! 

Tham khảo thêm các vị trí tuyển dụng software developer hấp dẫn tại Topdev.

Tham khảo series chọn trường cùng TopDev:

SASS là gì?

sass-la-gi

SASS – hẳn là một thuật ngữ khá quen thuộc đối với dân lập trình, nhưng trước khi hiểu sâu về SASS thì chúng ta cần ôn lại kiến thức CSS trước đã.

Thuật ngữ CSS chắc hẳn không còn gì xa lạ đối với dân lập trình nữa, dù mảng chuyên môn của bạn là gì đi nữa thì ít nhiều vẫn sẽ biết hoặc đã từng học qua CSS cơ bản. CSS không hẳn là một mảng quá khó trong lập trình nhưng nó khá tẻ nhạt, khô khan và dễ chán. 

“Ơn giời” ngoài CSS thì SASS và SCSS đã ra đời để tối ưu hóa hiệu quả, tiết kiệm thời gian và giảm đi sự khô khan của CSS. Phần này mình sẽ tập trung chia sẻ tất tần tật về SASS nhé!

Ngôn ngữ CSS là gì?

Các ngôn ngữ đánh dấu như HTML sẽ cung cấp một dàn bài đầy đủ, nhưng CSS sẽ là ngôn ngữ giúp dàn bài ấy trở nên thu hút hơn nhờ bố cục, hình ảnh, font chữ, màu sắc và cách trình bày. Có thể hiểu người ta dùng CSS để định hình phong cách cho Website và biến một nền tảng lập trình HTML đơn điệu thành một trang Web thu hút hơn giúp tăng chỉ số UX của Web.

SASS

Hiểu rõ khái niệm SASS là gì?

Đừng đặt nặng hay suy nghĩ quá phức tạp về nó, thực chất, đây là bộ tiền xử lý cũng như ngôn ngữ lập trình dùng để hỗ trợ cho nền tảng cơ bản CSS. Nhờ nó bạn sẽ có thể sắp xếp ngôn ngữ của CSS một cách dễ dàng và gọn gàng hơn bao giờ hết, đồng thời bạn cũng sẽ quản lý nhiều tệp biến đã định nghĩa sẵn từ trước. Ngoài ra. SASS khá hữu ích trong việc giúp bạn tiết kiệm dung lượng vì nó sẽ tự động nén tệp CSS lại.

  SASS/SCSS là gì?

  Xây dựng một bộ source SASS thế nào cho đẹp

Hướng dẫn cú pháp SASS cơ bản:

Ngôn ngữ Sass có hai sự lựa chọn cú pháp tùy theo nhu cầu lập trình của bạn:

SASS (Indented): Có sự khác biệt khá rõ ràng với CSS vì ở SASS chú trọng việc thụt lề để định nghĩa chứ không phải giống CSS là sử dụng dấu ngoặc. Bạn có thể chuyển đổi cứ pháp từ CSS sang SASS và ngược lại bằng lệnh sass-convert (chuyển đổi)

SCSS (Sassy CSS): có đến 90% đồng dạng và tuân thủ theo cú pháp ngôn ngữ CSS nhưng được mở rộng ra 1 chút.

Lợi ích của SASS ứng dụng lên CSS

SASS

Điểm ấn tượng đầu tiên của SASS lên CSS đó là nó tiện dụng cho việc đánh máy và nó ngắn hơn ngôn ngữ CSS thông thường. Nó thậm chí chỉ cần sử dụng rất ít những kí tự được xem là bắt buộc của CSS như dấu ngoặc nhọn ({}) và dấu chấm phẩy (;) để viết. Nó tiện dụng đến mức bạn chỉ cần dấu hai chấm (:) và dấu cộng (+) là đủ mà có thế không cần đến @mixin hay @include nào cả. 

Tuy ở ngôn ngử này còn có những lưu ý bắt buộc là khi viết code phải chủ động ghi nhớ thụt đầu dòng (vì thế dân lập trình hay truyền miệng vui nhau rằng SASS là ngôn ngữ “thụt dòng”) nhưng nó cũng khá tiện lợi cho với việc sử dụng mãi những ký tự dễ type nhầm như {, }, ; đấy. 

  SASS và SCSS là gì ? Tìm hiểu cách viết CSS bằng SASS/SCSS

Ngoài ra, do SASS có tính mạch lạc, rõ ràng khá cao nên ngôn ngữ của SASS cũng đồng dạng yêu cầu sự rõ ràng này khi lập trình, ví dụ điển hình là bạn phải đảm bảo không được quên thụt đầu dòng, code thật rõ và lưu ý phải định dạng tốt ngôn ngữ nếu không bạn có thể không hoàn thành được tệp.

Chưa hết đâu nhé! Thậm chí khi sử dụng Sass các bạn sẽ có thể cải thiện được nhược điểm từ trước của CSS về các:

Variable

Các lập trình viên thường sử dụng các Variable (biến) nhằm lưu trữ và tái sử dụng lại tài nguyên. Với cách này, lập trình viên có thể tùy ý tái sử dụng bất kỳ tài nguyên CSS có sẵn nào bằng ký pháp $ để tạo ra 1 biến khác như:

Hàm SASS như thế này:

$font-atack: Helvetica, sans-serif
$primary-color:#333

body
  font: 100% $font-atack
  color: $primary-color

Sẽ trả về kết quả CSS sau:

body { 
 font: 100% Helvetica, sans-serif;
 color: #333;
}

Như vậy, rõ ràng SASS lấy giá trị trong các biến ta đã định nghĩa ở $, trong trường hợp ở ví dụ cụ thể này thì là $front-stack$primary-color rồi output ra thành tệp CSS với cùng giá trị, chức năng được thay thế trong CSS. Đây là điểm cộng lớn vì sẽ giúp toàn trang giữ được tính nhất quán về màu sắc và font chữ.

Nesting

Như các bạn cũng biết tuy cùng là ngôn ngữ lập trình nhưng CSS lại không có chức năng lồng thẻ này trong thẻ kia như HTML. Tuy nhiên khi SASS sẽ giúp các bạn giải quyết vấn đề đó. Ngôn ngữ SASS có chức năng lồng thẻ CSS với nhau để giúp CSS tiêu trừ điểm yếu, nhưng khi bạn lạm dụng nó thì sẽ dẫn đến việc bị lẫn lộn, khó bảo trì hay sửa chữa và đặt biệt nếu bạn quá lạm dụng chức năng này thì đôi khi bạn sẽ tạo ra một sản phẩm khá tệ.

Hàm SASS như thế này:

nav 
  ul 
    margin: 0 
    padding: 0 
    list-style: none
  li 
    display: inline-block
  a 
    display: block 
    padding: 6px 12px 
    text-decoration: none

Sẽ trả về kết quả CSS sau:

nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none;
}
nav li { 
  display: inline-block; 
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; 
}

Bạn dễ dàng thấy bộ chọn nav trong ví dụ này trông như bội số chung được rút ra để ở trên, bạn cũng có thể hiểu bộ chọn thẻ ul, li, a đã được lồng trong nav. Nó đã biến tệp CSS này trở nên dễ nhìn, đọc và hiểu hơn đúng không nào?

Partials

Những file độc lập có thể tự chứa đựng file CSS, trong trường hợp cần thiết bạn có thể gắn nó vào các SASS khác, nó vẫn vận hành tốt mà không bị gián đoạn. Có thể hiểu, nó có cơ chế hoạt động độc lập 1 cách tuyệt vời, bạn có thể thêm bất kì đoạn CSS nào và SASS vẫn làm tốt vai trò của nó, giúp mọi thứ trở nên dễ dàng hơn kể cả việc chỉnh sửa. Những file SASS độc lập bắt đầu bằng dấu gạch ngang dưới ( _ ), để vận hành file bạn dùng chỉ thị @import để thao tác nhé.

Import 

Trong trường hợp muốn tách nhỏ CSS để chỉnh sửa chi tiết, thì rất dễ dàng thấy rõ nhược điểm của CSS ở phần này, đó là sẽ tạo ra request HTTP không cần thiết. SASS có thể khắc phục nhược điểm đó của CSS, khi sử dụng ký pháp @import thay vì nhận lại được request thì SASS sẽ đem file ta có nhu cầu import kết hợp với file đang nhu cầu tách nhỏ => dễ dàng thực hiện dễ dàng.

Mixins

Minxi của hỗ trợ người dùng tái sử dụng các CSS đã được khai báo từ trước thông qua Web. Ngoài ra, người dùng cũng có thể truyền thêm tham số bất kỳ để tạo minxi tùy biến. Ví dụ: 

Hàm SASS như thế này:

=transform($property)
   -webkit-transform: $property
   -ms-transform: $property
   transform: $property

.box 
   +transform (rotate (30deg))

Sẽ trả về kết quả CSS sau:

.box { 
  -webkit-transform: rotate (30deg);
  -ms-transform: rotate (30deg);
  transform: rotate (30deg);
}

Có thể thấy trong ví dụ về transform, mixin được đặt tên là transform theo cú pháp @mixin transform. Ngoài ra ở trong ví dụ còn sử dụng biến tên $property (được đặt trong cặp ngoặc tròn ( )) thể hiện ý nghĩa là bạn có thể truyền transform. Sau khi hoàn thành ký pháp, bạn có thể sử dụng nó như thông thường, đó là khai báo như 1 CSS trên web với cú pháp @include tên mixin là xong.

Extend

Tính năng thừa kế và một trong những đặc điểm nổi bật cũng như tiện lợi nhất của SASS. Điều này cũng là 1 phần  lý do giúp SASS trông gọn gàng hơn hẳn so với các ngôn ngữ khác. Có thể hiểu đơn giản tính thừa kế của nó như thế này, giả dụ bộ chọn thẻ a, b, c, d được định nghĩa là %XYZ, thì nghĩa là đâu %XYZ xuất hiện thì bộ thẻ a, b, c, d cũng sẽ có mặt và thực hiện đúng chức năng của nó. Chức năng này đã giúp nhiều người sử dụng SASS không cần phải viết nhiều tên lớp trong HTML.

Operators

Việc thực hiện các phép toán trong CSS chắc hẳn không còn xa lạ với các Coder vì đơn giản việc tính toán trong CSS rất tiện lợi. SASS cũng có những phép toán tiện lợi như thế ví dụ như phép tính cộng, trừ, nhân, chia và tính phần trăm, độ lớn của aside và article.

Điểm bất cập của SASS

Như các bạn đã biết, khi viết SASS các lập trình viên phải lưu ý thụt đầu dòng, tuy nhiên nếu bạn thụt đầu dòng một cách lộn xộn thì ngôn ngữ SASS sẽ dựa theo những thụt đầu dòng đó mà hiểu nhầm, lồng các selector rối cả lên! Ví dụ như tệp CSS bên dưới:

.element-a    
    color: hotpink    
    .element-b        
        float: left

Sẽ được hiểu và recode như sau:

.element-a {
    color: hotpink;
}
.element-a .element-b {    
    float: left;
}

Rõ ràng lúc này tệp CSS này của bạn đã bị SASS hiểu nhầm và đưa ra một khái niệm mới mất rồi. Chỉ cần bạn lơ là 1 chút với việc thụt đầu dòng, bạn cũng đã thấy sự khác biệt diễn ra ở đây. Khi đó .element-b sẽ vào hẳn một level và nó sẽ trở thành con của .element-a => sai ý nghĩa tệp CSS trước đó. Chính vì thế, điểm bất cập ở đây là bạn phải chú ý khi thụt dòng

Điểm bất lợi tiếp theo là khi sử dụng và làm quen với SASS, có nghĩa là bạn phải học thêm một loại ngôn ngữ mới hoàn toàn chỉ để bổ trợ cho ngôn ngữ chính là CSS. Khác với SCSS, ở SCSS có tự tương đồng về mặt ngôn ngữ, ý nghĩa và chức năng với CSS nên sẽ dễ tiếp cận và làm quen hơn so với SASS.

Vì SASS dùng cách thụt đầu dòng để định nghĩa nên rất khó để xác định vùng chọn ngay mà cần phải tốn thời gian để xác định lại. Ngoài ra ngôn ngữ này không được hỗ trợ nhiều plugin, điều này khá chán khi sử dụng.

Trình dịch từ SASS qua CSS

Hiện tại có 2 trình dịch miễn phí được mọi người sử dụng khá nhiều, đó là trình dịch Koala và trình dịch Laravel Mix. Cả 2 đều có thể giúp bạn biên dịch từ SASS sang thuần CSS.

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

Tham khảo các vị trí tuyển lập trình CSS mới nhất cho bạn

Viết và Deploy một Lambda Function trên Netlify

Merge vs Rebase trong Git

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

Lambda function là gì?

Giải thích về Serverless bạn đọc bài trước có đăng

Nếu bạn chỉ có một trang blog như thế này, viết bằng Gatsby, không có backend làm sao bạn có thể có được tính năng cho phép user đăng ký nhận bản tin? Ví dụ dùng dịch vụ của MailChimp đi.

Chúng ta ko thể đưa API key vào trang frontend được, hiển nhiên quá mà! Ai cũng có thể lấy được cái key này thì sao.

Chúng ta phải thông qua một bên ở giữa, là Lambda function trên Netlify, chúng ta đưa key này cho Netlify, nó sẽ có trách nhiệm bảo mật key này và truyền thông tin tới MailChimp

Chữ Lambda được phát minh đầu tiên bởi Amazon AWS, sau này Netlify cũng dùng luôn tên này, nó là kiểu các hàm trung gian, giúp chúng ta giao tiếp với phía server (vì đây là dạng serverless, chúng ta dùng dịch vụ của nó cung cấp, giống như vua chúa, nếu muốn giao tiếp với anh thì chú cứ thông qua thái dám, họ sẽ truyền tin tới cho anh)

Cứ dùng trang mặc định của Gatsby

Viết và Deploy một Lambda Function trên Netlify

Tạo một thư mục bên trong source code, nó sẽ chứa toàn bộ các hàm sẽ giao tiếp với Lambda. Thư mục này đặt đâu cũng được, cứ đặt vào dưới thư mục gốc tên functions

Mỗi file chỉ chứa 1 function

test.js

exports.handler = function(event, context, callback) {
}

Mỗi function sẽ nhận 3 parameter

  • event: chứa post data, header
  • context: function này được call ở đâu, thông tin user hiện tại
  • callback: hàm callback thôi, hàm này nhận param đâu tiền là error nếu có lỗi

Viết và Deploy một Lambda Function trên Netlify

Chạy các function Lambda ở local

Cần cài netlify-lambda để chạy test dưới local

npm install netlify-lambda

Viết và Deploy một Lambda Function trên Netlify

netlify-lambda serve <functions_directory>

<functions_directory> là thư mục chứa mấy function chúng ta viết

Thêm đoạn shortcut vào trong package.json để chạy lệnh này

Viết và Deploy một Lambda Function trên Netlify

Bước cuối cùng cần làm, tạo file config để báo với Netlify, đây không phải là thư mục chứa source code của chúng ta, đây là thư mục sau khi build. Tạo file Netlify.toml trong thư mục gốc

Viết và Deploy một Lambda Function trên Netlify

Sau khi build, file bên trong functions sẽ được đưa vào thư mục tên lambda

Chạy lại đoạn script shortcut hồi nãy khai báo npm run start:lambda, bên dưới hình này đoạn chạy bị lỗi là khi chưa tạo file Netlify.toml, chúng ta bắt buộc phải tạo file này trước khi chạy

Viết và Deploy một Lambda Function trên Netlify

Mở Postman lên gọi test thử

Viết và Deploy một Lambda Function trên Netlify

Function đầu tiên đã chạy thành công!!!

Chúng ta truyền thêm một object { "name" : "James" }, và muốn nhận được một JSON object thay vì là một string. Muốn vậy trong phần body chúng ta phải gọi JSON.stringify

callback(null, {
    statusCode: 200,
    body: JSON.stringify({ msg: "Thanks for visiting " + name })
});

// nếu không nhận được name= james

callback(new Error("You're not James"));

Viết và Deploy một Lambda Function trên Netlify

Test trên Postman

Viết và Deploy một Lambda Function trên Netlify

Trường hợp phát sinh lỗi

Viết và Deploy một Lambda Function trên Netlify

  Deploy ứng dụng web đến một máy chủ từ xa nhờ vào Git push
  Auto deploy dự án với Github Actions

Deploy lên Netlify

Nãy giờ chúng ta đang chạy các Lambda function ở dưới local bằng lệnh serve, để đưa lên Netlify, chúng ta cần build source code trước khi đẩy lên Netlify

Chúng ta phải setup chạy 2 script, một để build Gatsby, sau đó build mấy functions lambda

"props": "npm run build; npm run build:lambda"
Viết và Deploy một Lambda Function trên Netlify

Lưu ý: do đang dùng gatsby, nên cần 2 lệnh này, nếu bạn dùng một thằng khác, thì lệnh sẽ khác, tuy cách setup

Phải cập nhập lại Netlify.toml, chúng ta sẽ báo với Netlify: “Ê, khi nào tao chạy xong prop, thì mày deploy nhe”

Viết và Deploy một Lambda Function trên Netlify

Sau khi commit lên Github, Netlify sẽ bắt đầu trigger deploy, vào trang chính của Netlify, trong tab Deployment, bạn có theo dõi xem nó đang deploy tới đâu rồi

Viết và Deploy một Lambda Function trên Netlify

Sau khi deploy thành công, bạn có thể chuyển qua tab Function, các function nào đã có sẽ được liệt kê ở đây

Viết và Deploy một Lambda Function trên Netlify

Cơ bản là thế thôi, các bạn có thể làm “mọi thứ” với function mình viết (miễn là nó có cho), như gửi email, lưu dữ liệu xuống DB, gọi một API

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 công ty HOT tuyển dụng IT tại TopDev

Báo cáo thị trường IT quý II 2020: Ngành IT khôi phục trạng thái, Việt Nam khởi sắc “xây tổ” đón “đại bàng”

thị trường thanh toán điện tử landscape 2020

Mới đây nhất, đơn vị tuyển dụng IT TopDev vừa phát hành báo cáo thị trường IT nửa đầu năm 2020, đánh giá toàn bộ thị trường Công nghệ sau đại dịch COVID cũng như nhu cầu tuyển dụng của doanh nghiệp. Nhìn chung, doanh số, tốc độ tăng trưởng, cũng như nhu cầu tuyển dụng của các công ty trong ngành IT có dấu hiệu hồi phục và tăng trưởng trở lại sau đại dịch. 

Vẫn lấy ngành IT làm đầu tàu mũi nhọn cho sự phát triển của đất nước, sự khởi sắc của IT đem lại nhiều tín hiệu mừng cho nền kinh tế của đất nước cũng như sự lan tỏa tích cực đến các lĩnh vực và ngành nghề khác. Ông Nguyễn Hữu Bình – CEO của TopDev cho rằng ngành CNTT đang nhận được rất nhiều sự quan tâm của chính phủ Việt Nam cũng như của các tập đoàn công nghệ nước ngoài (Mỹ, Nhật, Hàn Quốc và Châu Âu), chính vì vậy mà doanh nghiệp cần cùng nhau chung tay để “xây tổ” cải tiến và thúc đẩy công nghệ để sẵn sàng cho những cuộc chuyển mình lớn trong tương lai. Đón “đại bàng” hay “chim sẻ” thời gian sẽ sớm trả lời, chỉ cần chúng ta có sự chuẩn bị đầy đủ, Việt Nam chắc chắn sẽ gặt quả ngọt.

DOWNLOAD

Xu hướng doanh nghiệp ưu tiên tái đào tạo nhân viên

Ứng biến với dịch COVID, các doanh nghiệp cũng có những thay đổi trong kế hoạch tuyển dụng để phù hợp với ngân sách của công ty. Hơn 50% doanh nghiệp vẫn duy trì tuyển dụng, vì nhìn chung ngành IT không chịu sự biến động mạnh như các ngành nghề khác. Dù vậy, vẫn có khoảng 10% doanh nghiệp buộc phải đưa ra những quyết định khó khăn nhằm đảm bảo nguồn tài chính và sự sống còn của công ty.

Ngay sau đại dịch, một số vị trí nhận được sự ưu tiên trong công tác tuyển dụng. Có thể thấy, doanh nghiệp chú trọng những vị trí thuộc cấp quản lý, đáng chú ý là nhân lực có kinh nghiệm nhận được sự quan tâm rất chênh lệch so với fresher (0-2 năm kinh nghiệm).

topdevreport_hinh2

Không còn chú trọng nhiều đến việc liên tục tuyển ứng viên mới đặc biệt là fresher, các doanh nghiệp có 2 xu hướng, một là tập trung tăng cường tuyển dụng những vị trí có nhiều kỹ năng và có tính chuyên môn cũng như kinh nghiệm cao hơn, hai là tận dụng nguồn nhân lực sẵn có cùng với các giải pháp đào tạo nội bộ để nâng cấp các nhân viên cứng của mình. Trong đó, upskill nhân viên hiện tại đang rất được cân nhắc với 26% người tham gia khảo sát chắc chắn lựa chọn, theo sau đó là re-skill với tỷ lệ lựa chọn chắc chắn thay đổi là 23%.

Ngoài ra còn có khái niệm rất mới mà doanh nghiệp có thể cân nhắc với những dự án vừa và nhỏ, chính là Gig workers. Gig workers có thể hiểu là những nhân viên thời vụ, làm việc độc lập và ký biên bản thỏa thuận với doanh nghiệp để cung cấp dịch vụ cho một số dự án nhất định.

Mức Lương một số vị trí lên đến 130 triệu đồng nghĩa với nhu cầu tuyển dụng dần khắt khe hơn, nâng tiêu chuẩn ở các vị trí

topdevreport_hinh4

Ở thời điểm hiện tại, số lượng và nhu cầu về nhân sự IT vẫn luôn tăng trưởng. Dù bối cảnh có nhiều thay đổi, mức lương trung bình thị trường IT vẫn không bị ảnh hưởng quá nhiều. Tuy nhiên, thị trường dần có những sự chuyển dịch và phân hóa rõ ràng hơn ở các nhân sự IT có trình độ khác nhau. Điều này thể hiện rõ nhất ngay ở giai đoạn Covid-19, các nhân sự IT đa năng hơn, đáp ứng nhu cầu khắt khe hơn sẽ được trọng dụng với mức lương trung bình tăng nhanh hơn trung bình thị trường song song với nhu cầu tuyển dụng vị trí này cũng gia tăng đáng kể (hơn 20%) so với giai đoạn trước đó. Về phía ngược lại, các nhân sự IT thông thường có xu hướng giảm về mức lương trung bình cũng như nhu cầu tuyển dụng chững lại đáng kể.

Về khía cạnh tuyển dụng lập trình viên, các vị trí đang thuộc top nhu cầu mà doanh nghiệp tìm kiếm là: Full Stack Developer (lập trình viên đa năng, đảm nhận cả front-end và back-end) chiếm 71.5%, Back-end Developer (thiết kế công nghệ, cơ sở dữ liệu đằng sau sản phẩm) chiếm 65.1%, và Mobile Developer (Lập trình viên ứng dụng di động) chiếm 54.3%.

Mức lương trung bình cao nhất trong giới lập trình thuộc về vị trí CTO/CIO (lên đến 130 triệu đồng), người đảm nhận công việc quản lý, tối ưu công nghệ của doanh nghiệp. Công nghệ được trả lương cao nhất là Kubernetes (38 triệu đồng). Nhìn chung, so với khảo sát năm 2019 do TopDev phát hành, không có sự tăng trưởng đột biến về mức lương trung bình cho các vị trí. Tuy nhiên, đối mặt với nhu cầu, đầu tư từ các doanh nghiệp lớn quốc tế, câu chuyện về phúc lợi và thu nhập của ngành lập trình sẽ luôn thay đổi và mang tính cạnh tranh hơn.

Việt Nam đã sẵn sàng đón nhận đầu tư?

Làn sóng dịch chuyển đầu tư là có thật, đơn cử là những động thái mở nhà máy và trung tâm nghiên cứu, tuyển dụng nhân sự tại Việt Nam của những ông lớn công nghệ như HCL, Samsung, Apple, Qualcomm hay Panasonic,…

Tuy nhiên, để đón được “đại bàng” thì câu chuyện cơ sở hạ tầng tại Việt Nam đã sẵn sàng hay chưa? Theo một chuyên gia kinh tế, có hai vấn đề “nút thắt cổ chai” cần được tối ưu hóa. Thứ nhất, về các khu công nghệ chưa được khai thác đúng mức trên vốn đầu tư, còn có nhiều cơ sở bỏ hoang; các công nghệ phụ trợ chỉ mới phù hợp chào đón các hãng vừa tầm và nhỏ. Thứ hai, khả năng chuyên môn còn chưa vững, còn thiếu về cả chất và lượng. Giải pháp sâu xa không chỉ về mặt nâng cao tay nghề, mà còn về mặt tư duy của lao động, thay đổi mindset để đóng góp vào sự phát triển của hãng.

Để giải quyết được các vấn đề đã nêu cần sự phối hợp giữa chính phủ và doanh nghiệp. Về phía các chính sách, Chính phủ nên bắt đầu với chương trình PPP để tối ưu ngân sách quốc gia, sau đó là hỗ trợ các doanh nghiệp vừa và nhỏ bằng những biện pháp miễn giảm các loại thuế phí, hay ổn định giá điện nước đầu vào của doanh nghiệp, hỗ trợ doanh nghiệp vượt qua giai đoạn hậu COVID.

Nhìn chung, nền kinh tế Việt Nam được nhận định sẽ sẵn sàng bật dậy sau dịch COVID-19. Theo nhận định của nhà kinh tế Edward Teather của UBS Research, “Nền kinh tế Việt Nam chịu một số tổn thương do tác động của dịch Covid-19, nhưng vẫn có triển vọng sáng nhất khu vực châu Á. Doanh số bán lẻ, nhập khẩu và sản xuất công nghiệp của Việt Nam đều tăng trong tháng 6 so với cùng kỳ năm trước. Rõ ràng là tình hình Việt Nam tốt hơn hầu hết nền kinh tế châu Á khác.”

Tóm lại, TopDev cho rằng, đi cùng với những cơ hội lớn vẫn sẽ có những thách thức không hề đơn giản về sự thay đổi và phát triển. Đón nhận làn sóng đầu tư cũng là “mở cửa” cho những sự thay đổi mới, mà trong đó công nghệ sẽ là trợ thủ đắc lực, giúp Việt Nam “gặt” quả ngọt.

Báo cáo nửa đầu năm 2020 về thị trường và nhu cầu nhân sự IT do TopDev phát hành đã được đăng tải, độc giả tìm hiểu thêm về xu hướng các ngành Công nghệ trong nước qua bản báo cáo IT Landscape 2020 tại đây.