Sinh viên đang học hay mới ra trường có nên làm cho startup không?

# Note: Một ngày nổi hứng viết hơi dài. Và cũng không có tí code nào trong này. Chỉ đơn giản là những gì mình nghĩ và cảm nhận trong ngày hôm nay. Bạn nào không muốn đọc có thể bỏ qua 😀

Câu chuyện hôm nay:

Ahamove CEO rời ghế. Mình hơi shock khi chờ đèn đỏ và đọc trên facebook thấy note của anh Trường về việc tạm biệt vị trí CEO của Ahamove. Và người lên thay là CTO. Đến công ty sớm, ngồi đọc đi đọc lại cái note và tự dưng thấy tâm trạng đi xuống như cơn mưa sáng nay ở Hà Nội. Hết công ty “M”, đến chuyện nhà Go Việt, giờ đến chuyện này. Cái nhìn về startup ở Việt Nam của mình có phần khác nhiều so với cậu sinh viên năm 3.

Gặp người em học cùng AI. Nay bất ngờ gặp cậu em cùng học AI ở công ty. Hoá ra ngồi gần mà mình chẳng nhận ra. Nói toẹt ra mình khá ngưỡng mộ nó. Thật. Toán giỏi, năng động, và “nhiệt”. Cái “nhiệt” đấy mình mong muốn tạo lại được nhưng khó vì không còn là cậu sinh viên sắp ra trường nữa rồi. Dù sao cũng thấy vui hơn chút. Ngày nào nó cũng đi bộ bắt bus đến công ty. Hôm nào đi học cũng đi bus về xong đi bộ 1.5km đến lớp học. Mà tinh thần vẫn tốt. Phần nào làm mình vui lại, lúc về nó còn chỉ mình bus. Hehe.

Đồng nghiệp trên chuyến xe về. Mình với ông anh đồng nghiệp ngồi nói chuyện về ngày xưa thích học gì, đang làm gì, làm thêm gì ngoài việc công ty,… Đủ thứ chuyện có thể nói trong lúc ngồi bus. Và nhận ra cơm áo gạo tiền có thể biến đổi con người. Nhanh lắm, không chạy đủ nhanh thì càng sớm cảm nhận thấy điều tồi tệ.

Hai cậu em hôm qua báo vào vòng trong hai cuộc thi khởi nghiệp. Biết nói thế nào nhỉ, mình quen 1 cậu em qua lớp học tiếng Anh. Và một ngày nó gọi mình, trình bày về một ý tưởng khá lạ. Sau vài phút giải quyết bớt việc và 5′ research. Mình gọi lại và đồng ý giúp tìm người, tư vấn công nghệ. Và đến giờ phút này chưa thể nói dự án thành công không. Nhưng chứng kiến những lúc làm việc nghiêm túc, có lúc bọn nó cãi nhau. Mình lặng lẽ ngồi đọc lại chat và im lặng cho “Hai Co-founder tranh luận” chán chê. Đến lúc cuối mình chỉ biết người rồi tự như: Mai nói. Lúc đó có ông em trước học trung tâm mình có hỗ trợ lớp nó về android đang thất tình. Kéo vào làm luôn. Để nó biết thêm chút vị đời còn “chán” và đắng hơn chia tay người yêu. Vậy đấy, tuổi trẻ mà. Đầu tư mạo hiểm chút cho bọn nó và bây giờ mình lãi rồi, lãi tinh thần hơn lãi tiền bạc.

Câu chuyện của tôi:

Trưa nay ngồi ngẫm lại bản thân mình. Tự nhiên giật mình.

Năm 3, thiếu tiền mua pin cho lap, đi làm thêm game, 1 được 1 thời gian ngắn nghỉ. Lí do rất lãng xẹt: “Em mong muốn học cho xong”. Thời điểm đi làm là lúc mình học thêm dang dở vì lịch học ở trường. Mà xin tiền bố mẹ học thêm, học còn không xong. Đến lúc laptop nó dở chứng, pin được không tới 30′. Mình khủng hoảng. May mắn có chị ở trung tâm học thêm bảo có đối tác cần tuyển thực tập. Mình xin luôn một chân. Vác máy đi làm, nhìn laptop mọi người xung quanh mà khao khát. Có bạn đi thực tập như mình, vác con máy trạm đi code. “Không sao, nghèo nhưng biết cố gắng”. Và một thời gian ngắn, ông bạn “khá thân” kéo mình về thực tại. Nó thất tình. Bỏ bê bài tập lớn, mình với một anh nữa lao vào làm cho kịp. Nó vác máy ảnh đi chụp gái với lời hứa tối về làm nốt, cân hết. Và sáng sớm hôm sau thì… Ai cũng biết rồi đó. Hai anh em xin cô cho nộp muộn. Cắm mặt ôm laptop làm, học xong ra quán làm tiếp kệ thằng thất tình nó “về ngủ vì quá mệt”. Sau vụ đó mình không còn mặt mũi nào đi thực tập tiếp. Bắt đầu xin đi làm, dù lương lúc đó đủ cho công thức: Tuần đổ xăng 1 lần, một ngày đi bộ, tháng đi xem phim 1 lần, đi ăn 3 bữa với người yêu. Nhưng cũng là lúc mình thất tình. Nên “đỡ” tiền. Sau khi đi làm và thấy mình không hợp. Mong muốn xa vời quá, đòi làm android, AR, mà mua điện thoại còn vay mẹ, mua cái cardboard2 còn phải đi bộ đi học với nhịn ăn mấy bữa.

Nghiêm túc bắt đầu thực tập lại, 3 tháng bắt đầu của nhiều thứ về sau. Mình chuyển qua tìm hiểu web. Vì nghĩ dễ bắt đầu, và nghe nói Ruby dễ học =)). Thế mà cũng được nhận thực tập 😐 Mấy hôm đọc ebook debian buồn ngủ, ngủ gật suốt. Rồi thực hành git trên terminal chứ không còn Source Tree nữa. Rồi thì code ra cái gì đó nó hơi tương lai chút. Nhưng cũng vỡ mộng sau 3 tháng không được nhận làm nhân viên dù là parttime, vẫn làm thực tập. Trường thì lôi về đi thực tập cho đối tác.

Quãng thời gian đáng nhớ nhất là thời gian với Techkids. Cãi nhau với mẹ đến phát khóc vì không được đi học (trẻ con thật :”>). Xong đi học thì quyết tâm: “ĐM, mày không kiếm được tiền trả mẹ thì bố mày khinh”. Và đấy là quãng thời gian đẹp nhất từ khi chọn bước theo lập trình. Gặp bạn bè, anh em giỏi => Cày đến 2-3 giờ sáng học trước để biết trước bài học. Những ngày hackathon xuyên đêm đầy cảm xúc. Lúc chưa học xong cũng được anh Huy, chịu trách nhiệm về các khoá học thời đó gọi, bảo mình làm test code đầu vào, rồi dần dần test kiến thức đầu vào cho Techkids. Vừa vui, vừa tự hào, vừa thấy mình nhỏ bé dần. Tự dưng ngồi đọc code người khác, đoán xem nó nghĩ gì, tổ chức code ok chưa, code thế thì sao, làm thế nào hay hơn không, code = ngôn ngữ khác thì thế nào. Những ngày tháng ấy vừa vui vì có tiền, trả mẹ được chút, giúp người yêu chuyển từ cô bán cafe sang dev với mức lương gấp đôi lúc trước. Nhưng hạnh phúc nhất là tiếp xúc với nhiều người lúc phỏng vấn và xem cách họ code, thức đêm chấm cho xong để hôm sau khai giảng người ta còn biết có được nhận không. Và quan trọng nhất là thấy mình nhỏ bé. Ở đó gặp những bạn sinh viên năm 1, 2 của một trường không trong top trường CNTT nhưng tinh thần tuyệt vời, mình trao học bổng cho toàn bộ và vớt luôn bạn nữ trong nhóm. Có những lần trao học bổng phải suy nghĩ, có những lần vớt học viên phải đắn đó. Có người giờ thành thầy dạy, có người đi du học vẫn thỉnh thoảng chat với mình, có người thành thày dạy Machine learning cho mình dù trước đó là vé vớt. Nhiều câu chuyện, nhiều cảm xúc, động lực đến từ quãng thời gian này. Mỗi lần nhớ lại mình không thấy tiếc thời gian đó. Chắc chắn.

Bắt đầu Fsoft, cơ duyên với Vuejs. Lúc đó anh họ bảo mình “hay vào công ty anh”, thế là cũng chỉnh sửa CV xíu. Từ thằng quay lại android, lại đâm đầu vào web tiếp. Và lần này với những gì học được từ Techkids, mình tận dụng được cơ hội. Làm admin vuejs Việt Nam khi là thằng sinh viên chưa được ra khỏi trường, gặp những người ảnh hưởng khá nhiều tới mình về sau. Mình bắt đầu hiểu về cách làm thế nào giữ motivation cho team. Bắt đầu tối tối ngồi tìm bài viết mới, tin tức mới để post lên group. Rồi những lúc thức tới 12h ngồi vừa Google, vừa code thử, vừa giải thích, sửa code cho người lạ. Gắn với vuejs từ đó, nó làm thay đổi cuộc sống mình kha khá, mở rộng quan hệ, chăm nghiên cứu, tìm tin tức mới hơn, update kiến thức code thường xuyên hơn.

Bước ngã đầu đời khi ra khỏi Fsoft. Team không quản lý, lười. Mình rời Fsoft vì… “Tiền”. Lúc đầu nghĩ do cơ hội, làm startup, đi với người giỏi để giỏi hơn. Nhưng sau nghĩ lại là vì tiền. Mình ép bản thân phải vượt qua những gì nhìn thấy. Và nhanh chóng thất bại sau hơn 1 tháng. Lại lang thang.

Công ty Nhật, team Việt. Mình có chia sẻ về việc chọn công ty này trong một bài viết trước đây. Thứ duy nhất đọng lại trong đầu mình là mình chán Nhật. Không phải vì họ không giỏi, mà vì họ không dám đuổi người. Dù yêu quý chị HR tốt bụng nhất từng gặp. Dù muốn làm việc với team lead ấn tượng và siêu tốt bụng, cực giỏi và tâm lý. Nhưng lại đi. Hai anh em ra đi cùng nhau luôn. Mình muốn tìm startup thật cơ, không phải như những gì đang thấy. Bác sĩ cũng bảo nên nghỉ ngơi một thời gian.

2018. Năm đáng nhớ trong những năm đầu sự nghiệp.

Nghỉ việc, mình lang thang vào thành phố Hồ Chí Minh tham gia event về Vue. Lần đầu đứng nói, hình như topic của mình hơi fail. Chả ai hỏi gì. Buồn đến mức uống cả nửa chai nước ngọt, ăn đến mức không đếm được pizza. Đêm hôm đó lang thang đi ăn đủ món trong bán kính 2km quanh khách sạn để nghĩ lại xem mình làm sai ở đâu, nói dở ở chỗ nào. Hay do không ai quan tâm đến 3D, AR trên web. Hôm sau đi phỏng vấn thử một số công ty đã nộp CV rồi đi mua ít quà đem về Hà Nội. Đến lúc lên máy bay mình mới nhớ ra chưa hề tính nếu họ gọi thì bao giờ quay lại thành phố Hồ Chí Minh. Nhưng cuối cùng, về Hà Nội và dấn thân vào công ty Blockchain mà mình thấy tiềm năng nhất trong những công ty mình thấy trong thời gian đó.

Công ty lương top đầu, sao lại nghỉ? Đây là câu hỏi bị hỏi nhiều nhất. Làm mình suy nghĩ nhất. Nhưng mà, mình chỉ trả lời: “không hợp”. Cũng có chút buồn, nhưng tư duy từ một số bài học của mình và những người mình hỏi về làm sản phẩm giúp mình quyết định ngừng. Và mình tin là quyết định đó đúng.

Một tháng làm remote, nhiều điều cần cải thiện. Bước vào con đường Blockchain tiếp theo. Một tháng làm remote do một anh giới thiệu, mình cảm nhận khá nhiều thức khác biệt, điểm yếu về sắp xếp thời gian, về cách xử lý giao tiếp, công việc,… Và thật sự tỉnh ngộ. Còn nhiều cái cần học lắm. Code thôi chưa đủ.

Công ty M đem lại quãng thời gian đáng nhớ tiếp theo. Lớn nhanh, chiến đấu nhanh, bại nhanh, mất nhanh. Những ngày tháng đi thuê địa điểm, chịu khó, chịu khổ là những ngày tháng vui nhất. Vui nhất là lúc anh em cùng cố gắng để ra sản phẩm. Có những tuần đi hackathon giúp đối tác, gặp đủ thứ chuyện, mệt không muốn gượng dậy nữa. Nhưng thành quả và bài học thì xứng đáng lắm. Dù lỗ khá nặng vì mới nhận được tiền thưởng từ cuộc thi đầu tiên, còn cuộc thi thứ hai thì… Và cuộc thi thứ ba thì… Ý tưởng chỉ chiếm nhiều nhất 20% thôi. Từ nghĩ ý tưởng, code, nửa đêm bắt taxi ra sân bay vào thành phố Hồ Chí Minh thi, đến lúc code mấy cái service xong, mình còn niềm tin vào sản phẩm. Nhưng cái ý tưởng điên rồ phút cuối, đập hết đi làm lại. Lúc đó chán nản, lang thang như thằng mất hồn. Chả code được gì nữa. Và tất nhiên, lần này không còn giải nhất hay ba nữa, còn chẳng vào nổi top 12, hay top 6. Về Hà Nội và ngẫm nghĩ thêm về việc: Ý tưởng thôi có đủ không? Tuần bảy ngày thì 5 ngày ở tpHCM và sân bay. Thực sự lúc đó mua khá nhiều sách về đọc để tìm hiểu nguyên nhân. Nhưng mọi thứ không êm đềm. Kết thúc bi thảm. Kết thúc của một công ty từng đặt cược nhiều hi vọng là một kết cục chả có gì vui vẻ. Dù sau đó hơn 80% anh em cố gắng đứng dậy, dựng lại, nhưng vô ích. Mình ngẫm ra một điều nữa về niềm tin vào con người cần đặt đúng chỗ. Ngày rời bỏ cái gọi là hi vọng mong manh cuối cùng anh em có thể một lần nữa tụ họp, mình vẫn tin rồi làm startup ở Việt Nam sẽ vượt qua được rào cản to lơn: con người.

Đứng dậy sau những ngày tháng chán nản. Cơ hội học hỏi mới, vị trí mới. Đó là những gì mình đúc kết lại cho thời gian vừa rồi. Làm consultant, cũng vui vì học được khá nhiều từ góc nhìn này ở công ty mà mình đã định từ chối. Nhưng CTO từng đồng ý cho mình mượn sạc macbook lúc nửa đêm, từng giới thiệu cho mình mấy startup ngon. Nhiều chuyện vui buồn, nhiều áp lực trong thời gian hơn 2 tháng. Nhưng cuối cùng mình tìm được động lực, niềm tin, và cái gì đó chưa biết nữa từ một số bạn trẻ hơn vài tuổi. Và quyết định chọn nơi tiếp theo cũng từ đó.

Chán startup rồi à? Sao lại liều mình lần nữa? Sao lại chọn lương thấp? Những câu hỏi đó được đặt ra bởi những người xung quanh. Và mình nghĩ mình đang liều. Bởi vì mình có câu trả lời rồi. Công ty startup hay công ty lớn không quá quan trọng nữa. Mình muốn làm gì, mình đóng góp được gì, hằng ngày mình có thấy khá hơn hôm trước không, có ai hỏi tại sao mình làm thế không, có ai để mình ủng hộ và chung niềm tin không,…? Và mình chọn combo mà một lần nữa lại nghèo đi một chút, mạo hiểm thêm chút, làm việc nhiều hơn chút. Nhưng. Mình biết tại sao mình làm ở đó, mình biết tại sao mình học thêm, mình biết đầu tư vào “bọn trẻ” được gì, và biết năm nay hãy im lặng mà tiến lên. Nếu một ngày bác sỹ đưa kết quả khám bệnh, vẫn còn cười được vì còn thời gian sống hạnh phúc và ý nghĩa.

Solve hackerrank challenges – part 1

Link challenges: https://www.hackerrank.com/challenges/jim-and-the-orders/problem

It’s one of challenges we can use greedy algorithms with 40 score and easy. So, let’s try it.

I choose javascript, because i work with js most of the time. And it has sort() for array.

Let’s see my solution:
Screen Shot 2018-04-15 at 03.37.17

So easy, right? I make an array name serveTimes, the structure of each element: [position, serveTime]

Because we need sort it, and return new position. So i group it into one. Then i custom sort function. Let’s see how sort() work with example:

Screen Shot 2018-04-15 at 03.42.13

It mean: when it check 2 element of arr (a and b). If a – b > 0, swap a and b. Actually, when we write a – b, so it return true when a – b > 0.

array.sort(function_return_condition_for_swap)

If you have better answer, please comment. I’m very happy to learn new solution 😀

 

Nodejs và redis siêu ngắn

Bình thường mình chỉ xài mỗi get với set. Nay mới phát hiện thêm 1 số cái hay nữa 😀

Bài viết này để tổng hợp những gì mình học được và muốn lưu lại sau code cho nhanh 😀

Kiểm tra ready và error

Screen Shot 2018-04-13 at 01.23.35

Get và set cơ bản

Screen Shot 2018-04-13 at 01.23.27

 

Với hash:

Screen Shot 2018-04-13 at 01.23.20

 

Với Set

Screen Shot 2018-04-13 at 01.39.53.png

 

Kiểm tra key tồn lại chưa:

Screen Shot 2018-04-13 at 01.48.35

 

Đặt thời gian hết hạn cho 1 key

Screen Shot 2018-04-13 at 01.46.33.png

 

Xoá key

Screen Shot 2018-04-13 at 01.48.29

Các bạn có bổ sung thêm thì comment nhé ^^

So sánh trong javascript

Javascript cũng có so sánh giống như ngôn ngữ lập trình khác. Tuy nhiên chúng lại khác nhau một chút. Cùng tìm hiểu nhé.

JS có == và === dùng để so sánh. Tại sao lại cần === cho tốn công gõ thêm dấu?
Xem ví dụ nhé

Screen Shot 2017-12-22 at 00.04.36.png

Okay, đúng rồi. === sẽ so sánh cả type nữa.

Trong trường hợp false == 0 thì 0 đã bị ép kiểu thành boolean nên false bằng false. Nhưng dùng === thì 0 vẫn là 0.

Tương tự với != và !== luôn nhé.

Đơn giản ngắn gọn thế thôi. Nhớ luôn dùng === và !== nhé.

Thử parcel và vue

Mấy hôm nay thấy Parcel nổi lên ác quá nên mình cũng tìm hiểu xem nó mặt mũi ra sao. Vì vốn yêu Vue(đọc là Viu, giống View đó chứ không phải Vếu) nên mình thử với vue ở mức cơ bản nhất để so sánh với webpack và browserify coi sao.

source thì đây: https://github.com/tungbt94/vue-parcel-test
Sau đây là một số điều mình thấy:
1. Có folder .cache để cache những gì mình chưa rõ. Nhưng nó giúp reload lại khá nhanh

Screen Shot 2017-12-18 at 23.22.08.png

 

2. Có Hot module replacement. Để tự động update code lên browser mà khỏi phải động chạm. Và code rất đơn giản

Screen Shot 2017-12-18 at 23.25.16.png

3. Không phải config gì cả. Cứ run thôi 😐 Chưa biết về lâu dài là sướng hay khổ nhưng với demo app thì rất sướng 😀

 

Tạm thời đấy là 3 điểm mình thấy thích nhất khi thử parcel. Có gì mới mình sẽ update thêm 😀

Từ callback tới async await

Nhân dịp trong một ngày phải sờ mó vào code nodejs của 3 năm trước, 2 năm trước, và hôm qua mới viết, mình nổi hứng tản mạn qua về callback, promise, async-await để xem cái bọn này sao lại nổi đình nổi đám trong JS.

Bắt đầu với callback nhé. Callback hiểu đơn giản là truyền một function sẽ được thực hiện sau khi task hoàn thành.

Ví dụ nhé: bạn viết đoạn code A,  nhưng chưa test được mà chờ đoạn code B của anh bạn đồng nghiệp xong. Đoạn code B lại cần chờ đoạn code A của bạn xong thì mới thực hiện xong được. Và thế là bạn vỗ vai anh bạn đồng nghiệp và nhờ anh ấy viết test luôn cho code của cả 2. Rảnh tay liền, pha một cốc cafe cho anh bạn đồng nghiệp thôi.

Dễ làm, dễ thực hiện với số task ít và cũng nhanh lẹ cho bạn đúng không? Nhưng bạn cứ thử tưởng tượng xem còn có C chờ B, D chờ C, E chờ D, F chờ E, G chờ F,… Ôi thôi, nát. Mà nhỡ có sai, sếp truy tội thì khá vất vả đó.

Và thế là sếp Promise ra đời. Anh ta sẽ yêu cầu bạn code đoạn A, then (thằng cha này sính ngoại ngữ) đồng nghiệp bạn code đoạn B, then bạn viết test cho cả 2. Cuối cùng sẽ xem có lỗi gì trong 2 đoạn hay không. Nghe giống Waterfall nhỉ? Phân tích, thiết kế, code, test nối đuôi nhau. Nhìn mọi thứ giờ có trật từ và rõ ràng hơn nhiều rồi. Thực ra vẫn là callback, nhưng các nhiệm vụ dễ kết nối với nhau, chơi cả làm việc song song, lại còn có bắt lỗi trước khi ném vào tay khách hàng.

Nhưng khoan, bắt lỗi? Nhưng vẫn là cách cũ, vẫn chỉ có 1 error to đùng ở cuối. Khó một nỗi là cứ code sau phải có code trước ở đó thì mới viết được, mà cũng không bắt người này chờ người kia mãi được. Vậy làm sao ta?

Thế rồi một ai đó nghĩ tới Generator function với yield – thứ có thể. Theo MDN thì:

The yield keyword is used to pause and resume a generator function

Và thế là async await xuất hiện. Mỗi khi bạn code đoạn code A. Bạn phải đưa ra lời hứa thực hiện nó ngon lành, không ra một lỗi nào. Anh bạn đồng nghiệp của bạn sẽ chờ lời hứa của bạn thực hiện xong thì sẽ thực hiện lời hứa code đoạn B ngon lành cành đào, 5 năm sau không cần maintain lại. Và cứ thế mọi chuyện diễn ra ở JS như bao công ty Java, C#, Python, Ruby, PHP,… khác.

Vậy async await có làm chậm quá trình code chạy cho ra kết quả cuối? Mình không dám chắc, mình có code thử nghiệm nhưng không khẳng định được. Khi lần mò đi hỏi thì có được câu trả lời:

Từ callback tới async-await giống như quy trình phần mềm từ kiểu code thằng nào thằng ấy lo, đến waterfall, rồi agile scrum. Cái hướng tới cuối cùng là ra sản phẩm cho người dùng xài được. Thuở sơ khai, mệnh thằng nào thằng đấy code, code xong ném cho thằng tiếp code thêm chức năng, chạy fail thì sửa. Cách này có thể rất nhanh nhưng cũng dễ fail. Waterfall ra đời làm mọi thứ tuần tự, nhưng khi gặp lỗi ở chân thác, thì khách hàng bị dội cả tấn nước đá lên đầu. Và rồi Agile ra đời, Scrum ra đời, người ta làm từng phần nhỏ xong xuôi, cho khách hàng chạy được, thấy sướng, rồi mới làm tiếp. Async, await cũng thế, tuy bị cắt nhỏ nhưng dễ đọc, dễ tìm lỗi, chơi cả loop, try/catch, và cả promise.

Đoạn trên mình dịch lại thành tiếng Việt từ câu trả lời của một cao nhân nào đó ẩn danh. Rất mong gặp được anh ngày nào đó để thỉnh giáo thêm và hiểu thêm nhiều về JS, và về cả quy trình phần mềm.

Hi vọng qua bài viết này các bạn nắm được sự ra đời callback, promise, async await. Và mong những cuộc tranh luận về các chủ đề kiểu “có nên đánh đổi tốc độ lấy async-await cho dễ đọc” sẽ nhiều hơn để các cao nhân và chỉ giáo nhiều hơn và chúng ta học hỏi được nhiều và sâu hơn.

Các bạn tham khảo kỹ hơn các khái niệm ở đây:

Promise: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Generator function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function%2A

yield: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield

Một số thông tin thú vị với Navigator trong js

Navigator là một object chứa thông tin về browser. Tuỳ trình duyệt mà bạn có thể có những property khác nhau nữa. Sau đây là một số property mình thấy khá hữu dụng:

navigator.appCodeName: code name của browser

navigator.appName: tên browser(Không phải Chrome, Firefox nha)
navigator.vendor: tên browser hiện tại(cái này chính là browser đang xài)
navigator.cookieEnabled: xem cookie có bật không

navigator.geolocation: cho biết vị trí người dùng, nhưng cần được cho phép

navigator.onLine: xem người dùng onlien không

navigator.connection: thông tin về mạng

navigator.language: ngôn ngữ của trình duyệt

navigator.languages: ngôn ngữ người dùng biết

navigator.storage: thông tin về storage(bạn có thể đọc thêm về storage của trình duyệt trong bài viết này)

navigator.platform: platform mà browser đang dùng(của Mac là MacIntel nhé :D)

navigator.userAgent: đây là user-agent sẽ nhìn thấy trong header khi gửi request 😀

navigator.hardwareConcurrency: Số logical processor cores có sẵn

Hi vọng những thông tin do navigator cung cấp có thể giúp các bạn frontend làm app tốt hơn. Cám ơn các bạn đã đọc ^^

 

Làm thế nào biết user online hay offline?

Tuần rồi có challenge về PWA khá hay nên mình pick và làm thử. Đề bài là cho người dùng nhập đoạn text bất kỳ, chỉ upload khi online. Còn offline thì tự động lưu lại và chờ khi người dùng có mạng mới tự upload lên.
Mấy chốt vấn đề chính ở chỗ xác định người dùng online hay offline. Theo thống kê thì có tới 82,3% người tham gia dùng cách cứ 100ms lại thử upload một lần.
Có một cách đơn giản hơn các bạn có thể dùng:

navigator.onLine

Nếu navigator.onLine === false => bạn offline. Điều ngược lại chưa chắc đã đúng, vì có thể do user đang set trình duyệt ở chế độ offline mode 😀

Bài viết này chia sẻ nhỏ nhỏ vầy thôi 😀 Cám ơn bạn đã đọc ^^

Template Literals, ơn giời cậu đây rồi

Ai code Javascript từ ES5 đều thấy JS có điểm hơi kém thông minh hơn các ngôn ngữ khác, đặc biệt trong string đúng không? Thật lòng đi!!!
Có bao giờ bạn gặp tình huống này:
Screen Shot 2017-12-11 at 22.42.10.png

Khổ lắm đúng không? Nhiều lúc mình chỉ muốn hỏi: “Sao mày không đi học ngôn ngữ nhà người ta đi hả?”
Và ơn giời, ES6 ra đời, mang Template Literals đến với JS. Và đoạn code kia viết lại như sau:

Screen Shot 2017-12-11 at 22.48.27.png

Hiểu đơn giản thì bạn có thể dùng các biến trong 1 String như các ngôn ngữ khác. Với cặp dấu “, ta sẽ có 1 string y hệt những gì ta viết bên trong. Còn với ${} bạn có thể truyền 1 giá trị vào đó 😀 Giống các ngôn ngữ hiện đại khác rồi đúng không? Còn dễ đọc, dễ viết hơn nữa chứ ❤

Server-Side Rendering vs Cliend-Side Rendering

Server-side rendering gần đây có vẻ khá hot. React, Angular(từ ver 2), Vue(từ ver 2) đều tập trung hỗ trợ. Vậy server-side rendering là gì?

Server-side rendering là cách render ra web nguyên thuỷ, ngay từ những ngày đầu web ra đời. Nó cho phép server render ra HTML, CSS, JS và gửi cho client. Mỗi tương tác của người dùng được client nhận và gửi lên server, server sẽ render lại HTML, CSS, JS tương ứng và trả về. Sau một thời gian dài, client-side rendering ra đời, hầu hết tương tác với người dùng được chuyển cho client xử lý.
Vậy tại sao SSR quay trở lại? Với SSR, mỗi khi bạn truy cập trang web nào đó như codeandplaygame.wordpress.com chẳng hạn. Browser sẽ gửi request lên server, chờ server render ra toàn bộ HTML, CSS, JS rồi trả về. Browser chỉ việc đọc HTML, CSS, JS đó và load ra cho bạn xem. Tất cả nội dung bạn nhìn thấy đã được server trả về hết trong 1 lần. Sau đó, khi bạn click vào bài viết Tạo ứng dụng Server-Side Rendering đơn giản để đọc nội dung đầy đủ bên trong. Một lần nữa browser lại gửi request lên server và đòi trả về HTML, CSS, JS cho trang mới và mở một trang MỚI HOÀN TOÀN. Bạn có thấy có nhiều phần trùng nhau giữa 2 trang không?
Vậy điểm mạnh, yếu của SSR là gì?
Mạnh:

  • Tốt cho việc SEO.
  • Thời gian khởi tạo trang ban đầu nhanh hơn.
  • Tốt cho static sites.

Yếu:

  • Số request lên server nhiều.
  • Nếu bạn cần vào page A > A/B > A/B/C thì sẽ chậm hơn CSR.
  • Nếu reload lại page liên tục(trong web giá các loại coin chẳng hạn) thì việc load lại full page sẽ rất khổ.
  • Với mỗi tương tác bạn lại gọi server, điều này giảm khả năng tương tác với người dùng.

Vậy CSR thì sao? Lần tải về đầu tiên, bạn sẽ phải ôm cả tá HTML, CSS, JS mà có thể nhiều phần bạn chưa dùng ngay. Nhưng với mỗi tương tác của bạn, JS sẽ bắt sự kiện và xử lý, render lại phần nào cần thiết trong trang web. Khi bạn vào codeandplaygame.wordpress.com thì một phần hoặc toàn bộ HTML, CSS, JS của trang Tạo ứng dụng Server-Side Rendering đơn giản đã được tải về kèm trước rồi đó :D. Khi bạn click vào tiêu đề thì JS sẽ load ra cho bạn nội dung cần xem mà không cần chờ server nữa.

Vậy điểm mạnh, yếu của CSR là?
Mạnh:

  • Tương tác với người dùng tốt.
  • Sau lần load đầu tiên thì các lần load về sau sẽ nhẹ.
  • Nhiều thư viện js hiện nay hỗ trợ CSR.

Yếu:

  • Khó mà SEO được tốt
  • Lần load đầu tiên có thể rất lâu.
    Đôi khi cần thêm thư viện hỗ trợ.

Hi vọng đọc xong bài viết này các bạn có thể hiểu hơn về SSR và CSR. Nếu có thắc mắc gì cứ comment nhé ^^