Chuyển tới nội dung
Home » Front End Developer 2019 | Đôi Nét Về Khách Mời Trần Trọng Thanh

Front End Developer 2019 | Đôi Nét Về Khách Mời Trần Trọng Thanh

The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners

Lời khuyên và bài học thực tế

Anh nghĩ nhìn chung về vị trí này thì những thách thức hay gặp là giúp cải thiện performance cho web app của mình và làm sao để đưa ra được 1 framework chuẩn và bộ thư viện chuẩn cho toàn bộ team. Bây giờ khi mình đã deliver được rất nhiều website và web app rồi thì team size của mình bắt đầu lớn lên, số lượng nhân sự trong team sẽ nhiều lên thì xu hướng bây giờ là làm sao để các bạn front-end tạo ra được những trang web mới hoặc những chức năng mới cho sản phẩm trên web của mình.

Và một thử thách nữa là mình phải tạo ra một cái design system – một nơi để hệ thống hóa lại những component hoặc các mẫu, chuẩn hóa tất cả lại vào một design system giúp cho các bạn front-end tạo thành một module tùy theo yêu cầu của doanh nghiệp.

Một thử thách khác là làm sao để giúp các bạn Dev Engineer làm việc với nhau tốt nhất theo tiêu chuẩn mà mình đưa ra cũng như với các phòng ban khác trong cùng 1 working group.

Rất nhiều thử thách đặt ra vậy thì, liệu có thách thức nào khiến anh nhớ mãi đến tận bây giờ không?

Anh nghĩ trải nghiệm đáng nhớ nhất của mình ở Chợ Tốt là khi anh vào Chợ Tốt cũng được khoảng 3 tháng, lúc đó anh tham gia một dự án đã gần hoàn thành và sắp release. Yêu cầu lúc đó là đánh giá performance, tốc độ tải trang của app đó trước khi đưa lên production. Kết quả đánh giá khá thấp, đó cũng là challenge đầu tiên của anh, nhiệm vụ của anh cùng với các bạn trong team lúc đó là làm sao để cải thiện điểm này lên.

Bọn anh cùng chung tay đánh giá và xem xét các điểm, các nút thắt cổ chai hoặc những vấn đề đối với bộ đóng gói, kích thước size của nó khá lớn, có một số vấn đề như vậy. Cũng mất một khoảng thời gian cùng làm việc với các bạn trong team sau đó đã cải thiện được rất nhiều. Lúc đó theo anh nhớ thì tool lighthouse của front-end điểm này đã được cải thiện ít nhất cũng gấp 2, gấp 3, tất nhiên là điểm tuyệt đối thì nó cũng không cao lắm so với mong đợi, nhưng so với trước khi anh tiếp nhận và kết quả cuối cùng thì nó đã cải thiện rất nhiều. Nhờ đó anh cũng rút ra được khá nhiều các bài học để đưa ra hướng dẫn và lưu ý để các bạn Junior sau này làm việc có thể cải thiện được những nút thắt cổ chai đó.

Cách anh phân bổ tasks và quản lý team như thế nào?

Vị trí của anh thì đóng vai trò như người điều phối là chính và thư ký cho một nhóm các bạn Front-end Engineer. Các bạn sẽ làm việc cùng với một Fullstack team cùng với những bạn khác như backend, dev, mobile dev và product order, tester. Working group đó chạy theo mô hình scrum như mọi người cũng hay biết. Ở vị trí web charter anh sẽ cố gắng đưa ra một số hoạt động như là họp định kỳ để khi đó mình nắm được tình hình và cách làm việc của các bạn trong working group như thế nào, các bạn có khó khăn gì thì trong buổi họp định kỳ đó mình sẽ đưa ra để mọi người cùng nhau giải quyết. Đó cũng là cách để mình hiểu các bạn hơn, nắm được bạn đang làm gì trong công việc của bạn đó.

Đa số là hoạt động online, mình sử dụng Zira và có các dự án trên đó, mình sẽ đưa ra các ý kiến như về chuẩn hóa, conversion hay những quy chuẩn của team, tùy theo mỗi quy trình mà mình sẽ đưa ra những task cụ thể. Trong các buổi họp chung mình sẽ hướng dẫn cho các bạn, từ đó các bạn sẽ triển khai trong công buổi họp để các bạn liên quan thảo luận với nhau.

Theo quan sát và đánh giá của anh về khối lượng công việc cũng như trình độ mà các bạn cần đạt được thì anh nghĩ ít nhất cần 3 năm để đạt được vị trí Senior.

Trong 3 năm đó thứ nhất là để các bạn tích lũy kinh nghiệm làm việc thực tế trong các dự án và để học các kiến thức liên quan. Nên anh nghĩ là sẽ không có shortcut – lối tắt để chỉ sau 1 – 2 năm đã trở thành Senior được. Và khi các bạn Junior vào thì các bạn cũng phải học rất nhiều để nắm vững những framework đó. Để đạt được vị trí Senior thì anh nghĩ mình phải luôn đặt ra những mục tiêu học là những nền tảng của Front-end, về những cái cản bản nhất của JavaScript, CSS.

Như anh đề cập có một số bạn vẫn ở vị trí Junior dù đã đi làm một thời gian khá là lâu anh nghĩ là do các bạn chưa có tinh thần học hỏi, các bạn chỉ đến công ty và làm các task được giao mà thôi. Ở công ty thì các bạn sẽ làm trực tiếp các tính năng và các phần được giao, công việc này phần nào đó sẽ lặp đi lặp lại cho nên để mình có thể tiến xa hơn, hiểu sâu hơn thì bắt buộc các bạn nên tự học thêm về nó.

Có một tip anh rút ra được là dù mình làm ở những cấp độ cao – highlevel nhưng mình vẫn phải luôn đặt ra câu hỏi cách hoạt động của nó như thế nào, research để tìm hiểu cách hoạt động bên dưới của nó. Khi có cái mình thấy hay, thấy tò mò về cách hoạt động thì phải luôn luôn đi tìm hiểu nó và đó cũng là cách để mình có những kiến thức nền tảng cho mình. Qua thời gian mình sẽ có đủ kiến thức và khả năng đạt được vị trí Senior.

Rất cảm ơn những chia sẻ hết sức thiết thực của anh Trần Trọng Thanh. Hy vọng qua bài phỏng vấn lần này, các bạn độc giả sẽ có được những lựa chọn phù hợp cho bản thân. Chúc các bạn đạt nhiều thành công trong cuộc sống.

Xem thêm những việc làm Front-end developer Jobs hấp dẫn tại TopDev

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

Lộ trình trở thành Front End Developer cho người mới bắt đầu

Front End Developer đang là vị trí công việc đang khá hot trong ngành CNTT, được nhiều bạn trẻ theo đuổi bởi mức thu nhập hấp dẫn cùng cơ hội nghề nghiệp rộng mở. Nếu bạn đang muốn tìm hiểu từ đầu về lộ trình trở thành front end developer cùng những kiến thức cơ bản về nghề này thì bài viết này là dành cho bạn!

Đôi nét về khách mời Trần Trọng Thanh

  • Bắt đầu bằng công việc Flash Developer, công việc về những giao diện và trải nghiệm dành cho người dùng tại công ty Pyramid Consulting
  • Công tác 3 năm tại Singapore, vị trí UI Developer và Front-end
  • Về Việt Nam khởi nghiệp với Nâu Studio
  • Hiện tại đang là Principal Web Engineer tại Chợ Tốt

Tại sao anh lại chọn Frontend mà không phải những hướng khác như Backend hay Fullstack?

Mình bắt đầu từ Flash, sau đó tới UI và đến bây giờ là Front-end: tất cả những thứ đó đều xoay quanh một cái giao diện để tương tác trực tiếp với người dùng, điều đó tạo cho mình sự hứng thú rất lớn so với việc làm Backend hay những công việc phải tương tác nhiều với data.

Thử tưởng tượng mình làm ra một cái sản phẩm, 1 front-end website được xuất lên Internet, nó sẽ tiếp xúc được với rất nhiều người dùng trên đó, mình sẽ rất tự hào với sản phẩm, thành quả mà mình đem lại.

The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners
The 2019 Frontend Developer Crash Course – HTML & CSS Tutorial for Beginners

Lộ trình trở thành Front End Developer

Hãy bắt đầu lộ trình trở thành Front End Developer với khoá học lập trình Front End của VTI Academy, học viện đào tạo CNTT trực thuộc tập đoàn công nghệ VTI Group.

Với khung chương trình bám sát yêu cầu dự án thực tế, khi tham gia khóa học, các bạn sẽ được trang bị đầy đủ kiến thức từ cơ bản tới nâng cao, học theo chuẩn lộ trình trở thành một Front End Developer chuyên nghiệp.

Lộ trình trở thành Front End Developer của VTI Academy gồm khung chương trình học như sau:

Học phần 1: Cơ bản nền tảng Web Basic

Học phần 2: Tổng quan về ECMAScript 6 (ES6) – và JavaScript nâng cao

Học phần 3: Lập trình cơ bản với React

Học phần 4: Lập trình với React nâng cao

Học phần 5: Dự án cuối khóa

Sau khi học xong, học viên có thể:

  • Làm chủ HTML, CSS, JavaScript, thư viện Bootstrap, Jquery trong xây dựng giao diện web
  • Làm chủ thư viện ReactJS, các khái niệm từ cơ bản đến nâng cao
  • Tạo ra sản phẩm thực tế ngay trong khóa học, xây dựng projet phù hợp với yêu cầu doanh nghiệp
  • Hiểu về quy trình phát triển sản phẩm phần mềm khi làm việc trong doanh nghiệp
  • Sẵn sàng tham gia dự án ở vai trò lập trình viên Front-end với ReactJS

Front End Developer cần học gì?

Lộ trình trở thành front end developer có thể linh hoạt điều chỉnh nhất định để phù hợp với khả năng và nhu cầu của từng cá nhân, nhưng đều cần đảm bảo trang bị được những kỹ năng, kiến thức sau:

Hiểu biết HTML và CSS

HTML (Hypertext Markup Language) và CSS (Cascading Style Sheets) là hai ngôn ngữ đầu tiên bạn cần khi học lập trình front end. Nắm chắc những ngôn ngữ cơ bản này mới giúp bạn thiết kế được giao diện trang web.

Kỹ năng JavaScript

Ngoài ra, Javascript là ngôn ngữ lập trình đóng vai trò tạo tương tác giữa giao diện trang web và người dùng. Javascript cùng CSS và HTML là những yếu tố thiết yếu trong quá trình xây dựng một trang web.

Nắm bắt jQuery

Frontend sử dụng vô cùng nhiều các hiệu ứng và phải giao tiếp với server thông qua Javascript thường xuyên. Để được như vậy thì code javascript thường rất dài.

iQuery chính là thư viện ngôn ngữ lập trình Javascript giúp cung cấp các hiệu ứng, cách thức xử lý chỉ với những dòng lệnh đơn giản.

Công cụ này giúp việc xây dựng chức năng bằng Javascript nhanh và dễ dàng hơn nhiều.

Hiểu biết về Javascript frameworks

Framework là kiến trúc kiểm soát luồng đi của data trong ứng dụng. Các framework của Javascript hiện nay bao gồm Ember, AngularJS, ReactJS, Backbone…

Biết cách sử dụng thành thạo những “bộ khung” này sẽ giúp bạn biết mọi thứ trong ứng dụng nên được sắp xếp ra sao cũng như các chức năng cơ bản giúp ứng dụng vận hành. Đây cũng là những Frontend framework cần ghi nhớ khi bạn học front end.

Kinh nghiệm dùng CSS Preprocessors

CSS Preprocessors (Ngôn ngữ tiền xử lý CSS) có nhiệm vụ cấu trúc và logic hoá các đoạn mã CSS để nó đến gần hơn một ngôn ngữ trong lập trình.

Sử dụng CSS Preprocessors sẽ tiết kiệm thời gian code, bảo trì và phát triển CSS một cách dễ dàng. Đồng thời, nó sẽ giúp tổ chức những tập tin CSS rõ ràng hơn.

LESS và SASS là những Preprocessors được sử dụng nhiều nhất hiện tại.

Thiết kế Mobile và Responsive

Không chỉ giới trẻ mà hầu hết các thế hệ ngày nay đều truy cập Internet thiết bị di động nhiều hơn là desktop. Do vậy, kỹ năng thiết kế giao diện trên di động cũng đóng vai trò quan trọng nếu bạn muốn trở thành một lập trình viên frontend giỏi.

Ngoài ra, am hiểu về responsive design sẽ hỗ trợ bạn làm website tương thích với nhiều loại thiết bị điện tử với kích cỡ hiển thị đa dạng.

Sử dụng hệ thống quản lý nội dung (CMS)

CMS (Content Management System) là hệ thống quản lý nội dung mà không chỉ lập trình viên mà biên tập viên website, content writer… đều hay sử dụng để làm việc. Phần lớn các trang web hiện nay được xây dựng trên các hệ thống điển hình như Magento, WordPress, và Drupal.

Bạn nên làm quen và thành thạo với cách làm việc với hệ thống này.

Kỹ năng xử lý vấn đề

Ngoài các ngôn ngữ lập trình, bạn cũng nên biết cách thực hiện, triển khai thiết kế cũng như cách fix bug và nhận diện front end, back end code…

Sự nhanh nhạy, thông minh trong cách giải quyết vấn đề chính là một trong những điều kiện tiên quỷeet nếu bạn muốn biết cách để trở thành lập trình viên frontend là gì.

Kiến thức về UI/UX

Học lập trình front end còn xuất hiện hai yếu tố vô cùng quan trọng là UI (User Interface – giao diện người dùng) và UX (User Experience – trải nghiệm người dùng). Nếu UI là thiết kế giao diện trực quan thì UX là nghiên cứu cách người dùng sử dụng website. Từ đây, bạn sẽ biết được cần thay đổi những gì và thử nghiệm để làm trang web phát triển tốt hơn.

Becoming a Frontend Developer / Designer in 2019 - Five Step Guide
Becoming a Frontend Developer / Designer in 2019 – Five Step Guide

Front End Developer là gì?

Để xác định được lộ trình trở thành front end developer, đầu tiên bạn cần hiểu được định nghĩa cơ bản: Front-end Developer là gì.

Front end là một phần quan trọng của một trang web, cho phép người dùng tương tác và sử dụng. Tất cả những gì bạn thấy trên một trang web, từ font chữ, màu sắc, danh mục sản phẩm, menu, thanh trượt, và nhiều yếu tố khác, đều phụ thuộc vào sự kết hợp hoàn hảo giữa HTML, CSS và Javascript.

Front end developer là những chuyên gia đảm nhiệm vai trò quan trọng trong việc phát triển phần giao diện người dùng trên Client Side. Một cách đơn giản, họ là những người thực hiện công việc xây dựng và phát triển giao diện của trang web, nhằm cung cấp trải nghiệm tốt nhất cho người dùng khi sử dụng sản phẩm trên trang web của họ.

Do đó, lộ trình trở thành front end developer sẽ là hành trình bạn trang bị những kiến thức kĩ năng cần thiết để đảm nhiệm được những công việc này.

Đăng nhập/Đăng ký
Ranking
Cộng đồng
|
Kiến thức
|
Lập trình web
01 tháng 04, 2022
Admin
23:44 01/04/2022
Frontend
lg

[Nghề IT] Lộ trình của một chuyên gia lập trình Web (Web Developer) 2019 – Phần 2. Front end là gì? Lập trình front end từ A đến Z
Cùng tác giả
Không có dữ liệu
0
0
0
Admin
2995 người theo dõi
1283
184
Có liên quan
Không có dữ liệu
Chia sẻ kiến thức – Kết nối tương lai
Về chúng tôi
Về chúng tôi
Giới thiệu
Chính sách bảo mật
Điều khoản dịch vụ
Học miễn phí
Học miễn phí
Khóa học
Luyện tập
Cộng đồng
Cộng đồng
Kiến thức
Tin tức
Hỏi đáp
CÔNG TY CỔ PHẦN CÔNG NGHỆ GIÁO DỤC VÀ DỊCH VỤ BRONTOBYTE
The Manor Central Park, đường Nguyễn Xiển, phường Đại Kim, quận Hoàng Mai, TP. Hà Nội
THÔNG TIN LIÊN HỆ
[email protected]
©2024 TEK4.VN
Copyright © 2024
TEK4.VN

Xin chào mọi người, năm 2019 này chắc hẳn mỗi người đều có cho mình một mục tiêu riêng rồi nhỉ? Nếu một trong những mục tiêu đó của bạn là học code hoặc trở thành một nhà phát triển web thì tôi rất vui và hân hạnh được chia sẻ với bạn Lộ trình phát triển web năm 2019 này.

Đây là ví dụ minh họa tuyệt vời về cách trở thành một nhà phát triển web năm 2019 và hướng dẫn bạn cách học và thành thạo việc phát triển web năm 2019.

Đó là tổng hợp các hướng đi khác nhau để học về front-end, back-end và tất cả những thứ khác mà một nhà phát triển web nên biết. Bạn không chỉ biết về phát triển web mà còn về các công cụ lập trình thiết yếu – điều quan trọng nhất đối với tất cả các lập trình viên và các nhà phát triển phần mềm.

Lộ trình được chia làm 3 phần. Đầu tiên là về các kĩ năng phổ biến mà mọi nhà phát triển web đều nên biết, thứ hai và thứ ba lần lượt là về phát triển front-end và back-end, hai phần chính của phát triển web.

Bạn có thể học front-end hoặc back-end hoặc cả hai tùy theo ý thích. Nếu bạn muốn trở thành một nhà phát triển web fullstack thì bạn phải học cả front-end và back-end.

Trong frontend bạn có thể chọn học framework mà bạn muốn như react, Angular hoặc Vue.js. Bạn không cần phải học tất cả các framework mà chỉ cần học cái mà bạn muốn. Nếu bạn hỏi ý kiến của tôi thì tôi sẽ nói rằng Vue.js là lựa chọn 2019 tốt hơn hai loại còn lại tuy nhiên cũng phải nói lại hai loại kia lại được sử dụng nhiều hơn Vue.js nhiều.

Tuy nhiên, bạn vẫn có thể đã thấy lộ trình này trước đây rồi. Kamranahmedse đã tạo hướng dẫn trực quan để trở thành một nhà phát triển web này và đăng lên kho GitHub của anh ấy. Đây là một trong những nơi yêu thích của tôi và tôi đã đánh dấu lại để xem lại nhiều lần.

Năm ngoái, tôi tình cờ phát hiện ra trang web tuyệt vời này trong khi đang lướt web. Tôi lần đầu tiên thấy Lộ trình DevOps ở đây và ngay lập tức trở thành fan của Kamran Ahmed. Thực tế, tôi còn in và dán những lộ trình này lên bàn để lúc nào cũng xem được.

Lộ trình cho bạn biết bạn nên học thứ gì nhưng lại không cho bạn biết học như thế nào và học các kỹ năng đó ở đâu. Tôi đã cố gắng bổ sung những phần đó bằng cách cung cấp thêm cá link của một số khóa học cũng như một số đầu sách hữu dụng mà bạn có thể học về các công nghệ, các ngôn ngữ lập trình, các framework và các thư viện được yêu cầu để trở thành nhà phát triển web và được nhắc đến trong lộ trình này.

Một hướng dẫn minh họa cho việc trở thành nhà phát triển web năm 2019

Front – end cho người mới bắt đầu – Đảm bảo đầu ra – Lộ trình rõ ràng

Đây là nơi mà mà bạn sẽ bắt đầu. Như tôi đã nói trước đó, bạn có thể tùy ý chọn học front-end hoặc back-end. Dưới đây là tám gợi ý màu vàng mà bạn phải học đối với cả hai lựa chọn, đây đều là những điều cơ bản mà mỗi một lập trình viên đều phải biết.

Đề xuất học cho một trong hai lựa chọn

1. Git

Một trong những hệ thống kiểm soát phiên bản phổ biến nhất. Chúng ta không thể sống thiếu Git. Bạn có thể kiểm tra Hướng dẫn hoàn thành Git trên Udemy để bắt đầu.

SSH

Đây là một khái niệm mạng phổ biến khác mà mọi nhà phát triển web cần phải biết, nó cho phép bạn xóa đăng nhập vào một máy chủ khác.

3.HTTP/HTTPS

Giao thức HTTP là phần chính của web và một nhà phát triển web cần có nền kiến thức tốt về cả HTTP và HTTPS.

Sử dụng thiết bị đầu cuối cơ bản khái niệm dòng lệnh Linux cơ bản

Dòng lệnh Linux rất rất quan trọng không chỉ đối với một nhà phát triển web mà với bất kỳ lập trình viên nào, nên tôi cực kỳ khuyên bạn hãy bỏ thời gian học nó thật nghiêm túc. Khóa học các khái niệm về dòng lệnh Linux cơ bản trên Udemy là một lựa chọn tốt để bắt đầu nếu bạn thích các khóa học miễn phí, hoặc bạn có thể sử dụng các khóa Linux miễn phí và bắt đầu học về Linux.

Cấu trúc data và các thuật toán

Đây là những building blocks của bất kỳ chương trình nào và việc có kiến thức tốt về cấu trúc data và các thuật toán là chìa khóa thành công trong công việc tiếp theo của bạn hoặc giúp bạn làm tốt công việc hiện tại của mình.

Nếu bạn hứng thú với học thuật toán và cấu trúc dữ liệu thì tôi khuyên bạn nên chọn khóa học trong ngôn ngữ lập trình mà bạn hiểu.

Ví dụ đối với các nhà phát triển Java, Data Structures and Algorithms: Deep Dive Using Java là lựa chọn tốt để khởi đầu.

Tương tự đối với các nhà phát triển JavaScript, JavaScript Algorithms and Data Structures Masterclass của Colt Steele là lựa chọn không tồi.

Nếu bạn dùng Python thì Algorithms and Data Structures in Python là lựa chọn dành cho bạn.

Và nếu bạn không nghĩ đến việc học từ các nguồn trên thì bạn có thể dùng danh sách các khóa thuật toán miễn phí để bắt đầu.

Mã hóa ký tự

Nếu bạn đang tạo các ứng dụng toàn cầu có thể hiện các thông tin ở nhiều ngôn ngữ khác nhau trên thế giới thì bạn nên có một nền kiến thức tốt về việc mã hóa ký tự. Hay đơn giản là để cho trình duyệt của bạn biết cách thể hiện dữ liệu.

Github

Rõ ràng là mọi lập trình viên nên biết về Git và GitHub vì chúng là tiêu chuẩn về nguồn kiểm soát phiên bản và lưu trữ code. Nếu bạn muốn học và hiểu về Git và GitHub, bạn có thể kiểm tra mục những khóa Git miễn phí.

Lộ trình nhà phát triển frontend 2019

Nếu bạn muốn trở thành một nhà phát triển front-end năm 2019 thì bạn nên theo dõi Lộ trình nhà phát triển Front-end dưới đây. Bạn nên tập trung vào các ô màu vàng chính là những điều quan trọng cần chú ý nhất. Bên dưới lộ trình bạn có thể thấy các nguồn thêm vào như sách và các khóa học phục vụ mục đích học tập này.

Những điều cơ bản về phát triển web

Điều khá hiển nhiên là nếu bạn muốn trở thành một người phát triển web thì bạn nên có kiến thức cơ bản về internet, các ứng dụng web, các giao thức như HTTP và phát triển web nói chung.

Tôi gợi ý những nguồn sau:

  1. The Web Develpoer BootCamp by Colt Steel
  2. The 2019 Complete Web Developer BootCamp by Angela Yu
  3. The Advanced Web Developer Bootcamp

HTML và CSS

HTML và CSS là phần chính của bất cứ website nào. HTML cung cấp cấu trúc trong khi CSS lại cung cấp style, giúp chúng nhìn đẹp mắt hơn và hấp dẫn trực quan hơn. Nếu bạn muốn trở thành một người phát triển frontend nghiêm túc thì bạn phải hiểu cả hai và bạn có thể kiểm tra các khóa HTML và CSS miễn phí để học trực tuyến.

JavaScript

Giống như bốn tính chất chính của lập trình hướng đối tượng là tính trừu tượng, tính bao đóng, tính đa hình và tính kế thừa, phát triển web cũng có ba ngôn ngữ chính tên là HTML, CSS và JavaScript.

Hai cái đầu tiên cung cấp cấu trúc và style nhưng đó là JavaScript thêm các tính tương tác khiến chúng sống động hơn. Điều cực kỳ quan trọng đối với một nhà phát triển Java hiện đại học JavaScript và có nhiều khóa học dành cho cả trình độ JavaScript cơ bản và nâng cao, sau đây là một số gợi ý:

  1. The Complete JavaScript Course 2019
  2. A Beginner’s Guide to Advanced JavaScript and ES6

TypeScript

Giống như chúng ta có C và C++, TypeScript có thể được coi như JavaScript++ mặc dù nó không phổ biến bằng C++.

TypeScript thêm type-safety trong code, điều này có nghĩa là bạn có thể bắt loại JavaScript xấu liên quan đến những lỗi trong giai đoạn phát triển.

Điều này khiến cho việc phát triển code hướng đối tượng trở nên dễ dàng hơn đối với JavaScript. Nếu bạn muốn học TypeScript thì Understanding TypeScript là một khóa học tuyệt vời để bắt đầu và nếu bạn cần nhiều lựa chọn hoặc thay thế miễn phí, sau đây là một danh sách các khóa học TypeScript miễn phí khác.

Angular

Đã qua rồi cái thời mọi người đều xây dựng website bằng HTML, CSS và JavaScript đơn giản. Ngày nay hầu hết các công việc đều được hoàn thành bằng một framework như Angular, ReactJS hoặc Vue.js.

Chúng không chỉ cung cấp cấu trúc để lưu trữ code mà còn làm cho quá trình phát triển ứng dụng web trở nên dễ dàng ít tốn thời gian hơn.

Việc học Angular là lựa chọn tốt đối với bất kỳ nhà phát triển hiện đại nào vì Angular được Google hỗ trợ. Nếu bạn muốn học Angular thì không có khóa học nào phù hợp hơn khóa Angular 7 (formerly Angular 2) — The Complete Guide của Max trên Udemy.

React JS

Tương tự như Angular, React cũng là một thư viện phổ biến cho việc phát triển các ứng dụng web. Nó cho phép bạn viết các thành phần có thể tái sử dụng mà sau đó bạn có thể tạo các trang web tương tác hiện đại.

Giống như Angular được Google phát hành, React cũng được Facebook phát hành và hiện tại trở nên khá phổ biến. Nếu bạn muốn học React thì bạn có thể tham gia khóa Modern React with Redux của Stephen Grider hoặc React—The Complete Guide của Max trên Udemy. Cả hai khóa đều học react trực tuyến.

Vue.js

Năm ngoái Vue hoặc Vue JS đã thực sự tăng tốc và càng ngày càng có nhiều người đề xuất và sử dụng Vue.js. Tôi vẫn là người mới bắt đầu học Vue và vẫn cần thời thêm thời gian để tìm hiểu và chuyển sang ứng dụng dựa trên Vue, tuy nhiên nếu bạn muốn bạn có thể bắt đầu với khóa Vue.js Essentials trên Udemy.

Lộ trình nhà phát triển Backend 2019

Nếu bạn muốn trở thành một nhà phát triển back-end 2019 thì bạn có thể theo dõi lộ trình nhà phát triển Back-end này. Một lần nữa, bạn có thể bắt đầu với những ô màu vàng cùng với các công nghệ chính cần thiết để học và phát triển. Bên dưới lộ trình là một số tài liệu cũng như link đến các khóa học và đầu sách phục vụ mục đích học tập của bạn.

Node.js

Có nhiều lựa chọn để phát triển phần backend của các ứng dụng web như Java và Spring hoặc có thể là Python + Django nhưng những năm gần đây Node.js dần trở thành lựa chọn được ưa thích hơn cả.

Điều tuyệt nhất về NodeJS là nó cho phép bạn phát triển một ứng dụng web hoàn chỉnh sử dụng chỉ một ngôn ngữ lập trình duy nhất – JavaScript.

Java

Tôi chính là một người phát triển Java, học phát triển web và các ngôn ngữ lập trình khác, do đó khi nói đến việc phát triển backend thì lựa chọn của tôi là Java. Bạn cũng có thể dùng Core Java hoặc Java + Spring Boot để viết phần back-end hiệu năng cao. Nếu bạn muốn đi theo Java và Spring thì đây là các khóa mà bạn có thể tham gia để tăng tốc.

Python

Python lại là ngôn ngữ lập trình tuyệt vời khác có đầy đủ các framework và thư viện mạnh mẽ. Nếu bạn muốn phát triển backend bằng Python thì bạn có thể dùng Django – một framework phát triển web full-stack dành cho các nhà phát triển Python.

Ruby

Ruby là một ngôn ngữ mạnh mẽ hoàn hảo để phát triển web. Nó có một framework tuyệt vời gọi là Rails, giúp việc tạo các ứng dụng Web thực sự dễ dàng và nhanh chóng. Nếu bạn muốn bắt đầu với Ruby, bạn có thể xem khóa học dành cho nhà phát triển Ruby on Rails hoàn chỉnh trên Udemy.

PHP và MySQL

Hãy quên tất cả những điều tiêu cực mọi người nói về PHP đi. Đây vẫn là cách dễ nhất để viết mã phía máy chủ và nhiều, gần 50% internet chạy trên PHP và MySQL stack.

Nếu bạn có hứng thú với học PHP, bạn có thể tham gia khóa PHP cho người bắt đầu trên Udemy.

Đó là tất cả những gì về cách để trở thành một nhà phát triển web năm 2019. Cám ơn bạn đã đọc bài viết này.

NAB Innovation Centre Vietnam

Ha Noi – Ho Chi Minh

The NAB Innovation Centre Vietnam is owned by NAB – Australia’s largest business bank.

30 việc làm lap trinh vien front end tại Việt Nam

SUPER HOT

Đăng 3 ngày trước

Senior Frontend Developer (ReactJS/VueJS)

Linh hoạt

Ho Chi Minh

  • No.1 Construction Tech company in Japan
  • Hybrid working with focus on Engineering team work
  • Highly competitive salary and benefits

HOT

Đăng 9 ngày trước

Junior/Middle Frontend Dev (ReactJS, CSS ,HTML5)

Tại văn phòng

Ha Noi

HOT

Đăng 14 giờ trước

Senior Front End Developer (ReactJS) – Up to 1500$

Tại văn phòng

Ho Chi Minh

HOT

Đăng 9 ngày trước

Middle Front-end Developer

Tại văn phòng

Ha Noi

HOT

Đăng 10 ngày trước

Frontend Developer (Javascript/HTML/CSS)

Tại văn phòng

Ha Noi

HOT

Đăng 13 ngày trước

Mid – Senior Frontend Developer (JavaScript, Angular)

Tại văn phòng

Ho Chi Minh

Đăng 14 ngày trước

Front End Web Developer (Angular, Typescript, RxJS)

Tại văn phòng

Ho Chi Minh

Đăng 14 ngày trước

Senior Front End Dev (React.js)

Tại văn phòng

Ho Chi Minh

  • First class software engineering culture
  • Greenfield projects
  • Cutting‐edge technologies

Đăng 16 ngày trước

Senior Front End Developer (ReactJS, Javascript)

Tại văn phòng

Ho Chi Minh

Đăng 16 ngày trước

Frontend Developer -ReactJS (Senior/Middle)

Tại văn phòng

Ho Chi Minh

Đăng 19 ngày trước

Frontend Dev (React, JavaScript, React Native)

Tại văn phòng

Ha Noi

Đăng 22 ngày trước

Web Frontend developer (Angular)

Tại văn phòng

Ha Noi

Đăng 23 ngày trước

Frontend Developer (Angular)

Linh hoạt

Ho Chi Minh – Da Nang

  • You can work outside office up to 3 days a week
  • Premium insurance
  • Global international teams & opportunity to travel

Đăng 27 ngày trước

Frontend Developer (JavaScript, Vue3, TypeScript)

Tại văn phòng

Ho Chi Minh

Đăng 28 ngày trước

Junior/Fresher Front-end Developer (JavaScript/ReactJS)

Tại văn phòng

Ho Chi Minh

Đăng 28 ngày trước

Remote Frontend Developer -Angular/React Native/ReactJS

Làm từ xa

Ho Chi Minh – Ha Noi – Others

Đăng 29 ngày trước

Front End Developer ( Javascript, ReactJS, VueJS )

Tại văn phòng

Ha Noi

  • Lương thưởng theo năng lực và cao nhất khối IT
  • Môi trường làm việc trẻ trung, vui vẻ
  • Cơ hội học tập và làm việc ở nước ngoài

Đăng 29 ngày trước

Frontend Dev (React Native/ React JS/ HTML5/NodeJS )

Tại văn phòng

Ho Chi Minh

  • Mức lương thỏa thuận
  • Cơ hội thăng tiến
  • Du lịch hằng năm

Đăng 30 ngày trước

Senior/Middle Frontend Developer

Linh hoạt

Ha Noi

Đăng 30 ngày trước

Frontend Developer (ReactJS, Javascript)

Linh hoạt

Ho Chi Minh

Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses

This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.

It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.

The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem.

The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter.

The intention is to release an update to the content yearly. This is currently the fourth year an edition has been released.

What is in this Handbook:

Chapter 0 provides a lite recap of the year in front-end development and what may be to come. Chapter 1 & 2 aim to give a brief overview of the discipline and practice of front-end development. Chapters 3 & 4 organize and recommend learning paths and resources. Chapter 5 organizes and list the tools used by front-end developers and Chapter 6 highlights front-end information outlets.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/front-end-handbook-2019

This chapter provides a baseline explanation for front-end development and the front-end developer discipline.

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.

Image source: https://www.upwork.com/hiring/development/front-end-developer/

A front-end developer architects and develops websites and web applications using web technologies (i.e., HTML, CSS, and JavaScript), which typically runs on the Open Web Platform or acts as compilation input for non-web platform environments (i.e., React Native).

A person enters into the field of front-end development by learning to build a website or web application which relies on HTML, CSS, and JavaScript and commonly runs in a web browser but can also run in a headless browser, WebView, or as compilation input for a native runtime environment. These four run times scenarios are explained below.

Web Browsers (most common)

A web browser is software used to retrieve, present, and traverse information on the WWW. Typically, browsers run on a desktop or laptop computer, tablet, or phone, but as of late a browser can be found on just about anything (i.e, on a fridge, in cars, etc.).

The most common web browsers are (shown in order of most used first):

Headless Browsers

Headless browsers are a web browser without a graphical user interface that can be controlled from a command line interface programmatically for the purpose of web page automation (e.g., functional testing, scraping, unit testing, etc.). Think of headless browsers as a browser that you can run programmatically from the command line that can retrieve and traverse web page code.

The most common headless browsers are:

Webviews

Webviews are used by a native OS, in a native application, to run web pages. Think of a webview like an iframe or a single tab from a web browser that is embedded in a native application running on a device (e.g., iOS, android, windows).

The most common solutions for webview development are:

Native from Web Tech

Eventually, what is learned from web browser development can be used by front-end developers to craft code for environments that are not fueled by a browser engine (i.e. web platform). As of late, development environments are being dreamed up that use web technologies (e.g., CSS and JavaScript), without web engines, to create native applications.

Some examples of these environments are:

Notes:

This chapter will break down and broadly describes the practice of front-end engineering starting with, “How Front-End Developers Are Made”.

How exactly does one become a front-end developer? Well, it’s complicated. Just consider this road map:

Image source: https://github.com/kamranahmedse/developer-roadmap

Today, in general, one can’t go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and JavaScript professionally. From my perspective, most of the people working on the front-end today generally seem to be self-taught from the ground up or cross over into the front-end space from design or computer science fields.

If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below (Chapter 3 and Chapter 4 will dive into more details on learning resources).

A short word of advice on learning. Learn the actual underlying technologies, before learning abstractions. Don’t learn jQuery, learn the DOM. Don’t learn SASS, learn CSS. Don’t learn JSX, learn HTML. Don’t learn TypeScript, learn JavaScript. Don’t learn Handlebars, learn JavaScript ES6 templates. Don’t just use Bootstrap, learn UI patterns.

Lately a lot of non-accredited, expensive, front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are typically teacher directed courses, that follow a more traditional style of learning, from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.).

Keep in mind, if you are considering an expensive training program, this is the web! Everything you need to learn is on the web for the taking, costing little to nothing. However, if you need someone to tell you how to take and learn what is low cost to free, and hold you accountable for learning it, you should consider a traditional instructor lead class room setting. Otherwise, I am not aware of any other profession that is practically free for the taking with an internet connection, a couple of dollars a month for screencasting memberships, and a burning desire for knowledge.

For example, if you want to get going today, consuming one or more of the following self-directed resources below can work:

When getting your start, you should fear most things that conceal complexity. Abstractions (e.g. jQuery) in the wrong hands can give the appearance of advanced skills, while all the time hiding the fact that a developer has an inferior understanding of the basics or underlying concepts.

It is assumed that on this journey you are not only learning, but also doing as you learn and investigate tools. Some suggest only doing to learn. While others suggest only learning about doing. I suggest you find a mix of both that matches how your brain works and do that. But, for sure, it is a mix! So, don’t just read about it, do it. Learn, do. Learn, do. Repeat indefinitely because things change fast. This is why learning the fundamentals, and not abstractions, are so important.

A great divide has been brewing in the front-end developer space for several years between two very different types of so-called front-end developers. On the one side, you have JavaScript-focused programmers who write JavaScript for front-end runtimes that likely have computer science skills with a software development history. They more than likely view HTML and CSS as an abstraction (i.e. JSX and CSS in JS). On the other side, you have, most likely, non-computer science educated developers who focus on HTML, CSS, and JavaScript as it specifically pertains to the UI. In 2019, when entering or trying to understand the front-end developer space you will absolutely feel this divide. The term front-end developer is on the verge of meaninglessness without clarifying words to address what type of front-end developer is being discussed.

Below is a list and description of various front-end job titles (Keep in mind titles are hard). The common, or most used (i.e., generic), title for a front-end developer is, “front-end developer” or “front-end engineer”. Note that any job that contains the word “front-end”, “client-side”, “web UI”, “HTML”, “CSS”, or “JavaScript” typically infers that a person has some degree of HTML, CSS, DOM, and JavaScript professional know how.

Front-End Developer: The generic job title that describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.

Front-End Engineer (aka JavaScript Developer or Full-stack JavaScript Developer): The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires computer science knowledge and years of software development experience. When the word “JavaScript Application” is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end software applications).

CSS/HTML Developer: The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and application, know how.

Front-End Web Designer: When the word “Designer” is included in the job title, this will denote that the designer will possess front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.

UI (User Interface) Developer/Engineer: When the word “Interface” or “UI” is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end developer skills or front-end engineering skills.

Mobile/Tablet Front-End Developer: When the word “Mobile” or “Tablet” is included in the job title, this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively or on the web platform, i.e., in a browser).

Front-End SEO Expert: When the word “SEO” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.

Front-End Accessibility Expert: When the word “Accessibility” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.

Front-End Dev. Ops: When the word “DevOps” is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and quality.

Front-End Testing/QA: When the word “Testing” or “QA” is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing.

Notes:

The following core web technologies are employed by front-end developers (consider learning them in this order):

For a comprehensive list of all web related specifications have a look at platform.html5.org or MDN Web APIs.

The nine technologies just mentioned are defined below along with a link to the relevant documentation and specification for each technology.

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

Most relevant specifications / documentation:

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

Most relevant specifications / documentation:

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

Most relevant specifications:

A uniform resource locator (URL) (also called a web address) is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI), although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI. URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications.

Most relevant specifications:

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

Most relevant specifications / documentation:

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.

Most relevant specifications / documentation:

When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.

— Mozilla

Most relevant documentation:

It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

Most relevant specifications:

Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e., unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers).

Image source: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

A basic to advanced understanding of HTML, CSS, DOM, JavaScript, HTTP/URL, and web browsers is assumed for any type of professional front-end developer role.

Beyond the skills just mentioned, a front-end developer might also be specifically skilled in one or more of the following:

A front-end developer crafts HTML, CSS, and JS that typically runs on the web platform (e.g. a web browser) delivered from one of the following operating systems (aka OSs):

These operating systems typically run on one or more of the following devices:

Image source: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios:

A front-end developer is typically only one player on a team that designs and develops web sites, web applications, or native applications running from web technologies.

A bare-bones development team for building professional web sites or software for the web platform will typically, minimally, contain the following roles.

The roles are ordered according to overlapping skills. A front-end developer will typically have a good handle on UI/Interaction design as well as back-end development. It is not uncommon for team members to fill more than one role by taking on the responsibilities of an over-lapping role.

It is assumed that the team mentioned above is being directed by a project lead or some kind of product owner (i.e., stakeholder, project manager, project lead, etc.)

A larger web team might include the following roles not shown above:

The term “Full-Stack” developer has come to take on several meanings. So many, that not one meaning is clear when the term is used. Just consider the results from the two surveys shown below. These results might lead one to believe that being a full-stack developer is commonplace. But, in my almost 20 years of experience, this is anything but the case in a professional context.

Image source: https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

Image source: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

The roles to design and develop a website or web application require a deep set of skills and vast experience in the area of visual design, UI/interaction design, front-end development, and back-end development. Any person who can fill one or more of these 4 roles at a professional level is an extremely rare commodity.

Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles (i.e. Visual Design, Interaction Design/IA, Front-end Dev, Back-end Dev). Those who claim to operate at an expert level at one or more of these roles are exceptionally rare.

However, given that JavaScript has infiltrated all layers of a technology stack (i.e. Node.js) finding a full-stack JS developer who can code the front-end and back-end is becoming less mythical. Typically, these full-stack developers only deal with JavaScript. A developer who can code the front-end, back-end, API, and database isn’t as absurd as it once was (excluding visual design, interaction design, and CSS). Still mythical in my opinion, but not as uncommon as it once was. Thus, I wouldn’t recommend a developer set out to become a “full-stack” developer. In rare situations, it can work. But, as a general concept for building a career as a front-end developer, I’d focus on front-end technologies.

A plethora of technical job listing outlets exist. The narrowed list below are currently the most relevant resources for finding a specific front-end position/career.

Notes:

The national average in the U.S for a mid-level front-end developer is somewhere between $65k and 100k.

Of course when you first start expect to enter the field at around 40k depending upon location and experience.

Notes:

This chapter highlights the many resources (video training, books, etc.) that an individual can use to direct their own learning process and career as a front-end developer.

The learning resources identified (articles, books, videos, screencasts etc..) will include both free and paid material. Paid material will be indicated with [$].

The Internet is a global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and peer-to-peer networks for file sharing.

Image source: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

Image source: http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.

Image source: http://gs.statcounter.com/browser-market-share

In the past, front-end developers spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today. Today, abstractions (e.g., React, Webpack, Post-CSS, Babel etc…) combined with modern browsers make browser development fairly easy. The new challenge is not which browser the user will use, but on which device they will run the browser.

The latest versions of most modern browsers are considered evergreen browsers. That is, in theory, they are supposed to automatically update themselves silently without prompting the user. This move towards self-updating browsers has been in reaction to the slow process of eliminating older browsers that do not auto-update.

As of today, most front-end developers use Chrome and “Chrome Dev Tools” to develop front-end code. However, the most used modern browsers all offer a flavor of developer tools. Picking one to use for development is a subjective choice. The more important issue is knowing which browsers, on which devices, you have to support and then testing appropriately.

The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates domain names, which can be easily memorized by humans, to the numerical IP addresses needed for the purpose of computer services and devices worldwide. The Domain Name System is an essential component of the functionality of most Internet services because it is the Internet’s primary directory service.

Image source: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

HTTP – The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

CORS – Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g., fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

WebSockets – WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center.

Image source: https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg

User Interface Design – User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).

Interaction Design Pattern – A design pattern is a formal way of documenting a solution to a common design problem. The idea was introduced by the architect Christopher Alexander for use in urban planning and building architecture, and has been adapted for various other disciplines, including teaching and pedagogy, development organization and process, and software architecture and design.

User Experience Design – User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.

Human–Computer Interaction – Human–computer interaction (HCI) researches the design and use of computer technology, focusing particularly on the interfaces between people (users) and computers. Researchers in the field of HCI both observe the ways in which humans interact with computers and design technologies that lets humans interact with computers in novel ways.

Minimally I’d suggest reading the following canonical texts on the matter so one can support and potential build usable user interfaces.

HTML – HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

CSS – Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

Liken to constructing a house, one might consider HTML the framing and CSS to be the painting & decorating.

Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine’s unpaid results — often referred to as “natural,” “organic,” or “earned” results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine’s users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines.

Image source: https://visual.ly/community/infographic/computers/how-does-seo-work

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.

DOM – The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

BOM – The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish.

jQuery – jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

The ideal path, but certainly the most difficult, would be to first learn JavaScript, then the DOM, then jQuery. However, do what makes sense to your brain. Most front-end developers learn about JavaScript and then DOM by way of first learning jQuery. Whatever path you take, just make sure JavaScript, the DOM, and jQuery don’t become a black box.

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the

tag in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the tag had to be installed on the user’s computer or a fallback font, such as a browser’s default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.

The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Explorer added support for the font downloading feature in version 4.0, released in 1997. Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in Web typography, as well as the usage of font downloading.

Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e., unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers).

Accessibility can be viewed as the “ability to access” and benefit from some system or entity. The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone.

Accessibility is not to be confused with usability, which is the extent to which a product (such as a device, service, or environment) can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

Accessibility is strongly related to universal design which is the process of creating products that are usable by people with the widest possible range of abilities, operating within the widest possible range of situations. This is about making things accessible to all people (whether they have a disability or not).

Image source: http://www.evolutionoftheweb.com/

The BOM (Browser Object Model) and the DOM (Document Object Model) are not the only browser APIs that are made available on the web platform inside of browsers. Everything that is not specifically the DOM or BOM, but an interface for programming the browser could be considered a web or browser API (tragically in the past some of these APIs have been called HTML5 APIs which confuses their own specifics/standardize with the actual HTML5 specification specifying the HTML5 markup language). Note that web or browser APIs do include device APIs (e.g.,

Navigator.getBattery()

) that are available through the browser on tablet and phones devices.

You should be aware of and learn, where appropriate, web/browser APIs. A good tool to use to familiarize oneself with all of these APIs would be to investigate the HTML5test.com results for the 5 most current browsers.

MDN has a great deal of information about web/browser APIs.

Keep in mind that not every API is specified by the W3C or WHATWG.

In addition to MDN, you might find the following resources helpful for learning about all the web/browser API’s:

JSON, (canonically pronounced sometimes JavaScript Object Notation), is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX).

Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages.

The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

A JavaScript template is typically used, but not always with a MV* solution to separate parts of the view (i.e., the UI) from the logic and model (i.e., the data or JSON).

Note that JavaScript 2015 (aka ES6) added a native templating mechanism called “Templates strings”. Additionally, templating as of late has been replaced by things like JSX, a template element, or HTML strings.

If I was not using React & JSX I’d first reach for JavaScript “Templates strings” and when that was lacking move to nunjucks.

Static site generators, typically written using server side code (i.e., ruby, php, python, nodeJS, etc.), produce static HTML files from static text/data + templates that are intended to be sent from a server to the client statically without a dynamic nature.

Not a lot of general content is being created on this topic as of late. Most of the content offered for learning how to build front-end/SPA/JavaScript applications presupposes you’ve decided up a tool like Angular, Ember, React, or Aurelia.

My advice, in 2019 learn React and Mobx and Apollo/graphql.

Once you have a good handle on React move on to learning a more robust state management solution like MobX. If you are an experienced developer with Functional Programming knowledge look at Redux. If you need help understanding the role of state management beyond React’s

setState

watch, “Advanced State Management in React (feat. Redux and MobX)”.

Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience.

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “Progressive Web Apps” to describe apps taking advantage of new features supported by modern browsers, including Service Workers and Web App Manifests, that let users upgrade web apps to be first-class applications in their native OS.

According to Google Developers, these characteristics are:


Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.


Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.


Connectivity independent – Service workers allow work offline, or on low quality networks.


App-like – Feel like an app to the user with app-style interactions and navigation.


Fresh – Always up-to-date thanks to the service worker update process.


Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.


Discoverable – Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.


Re-engageable – Make re-engagement easy through features like push notifications.


Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.


Linkable – Easily shared via a URL and do not require complex installation.

Web development tools allow web developers to test and debug their code. They are different from website builders and IDEs in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user facing interface of a website or web application.

Web development tools come as browser add-ons or built in features in web browsers. The most popular web browsers today like, Google Chrome, Firefox, Opera, Internet Explorer, and Safari have built in tools to help web developers, and many additional add-ons can be found in their respective plugin download centers.

Web development tools allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to the increasing demand from web browsers to do more popular web browsers have included more features geared for developers.

While most browsers come equipped with web developer tools, the Chrome developer tools are currently the most talked about and widely used.

I’d suggest learning and using the Chrome web developer tools, simply because the best resources for learning web developer tools revolves around Chrome DevTools.

A command-line interface or command language interpreter (CLI), also known as command-line user interface, console user interface, and character user interface (CUI), is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines).

Node.js is an open-source, cross-platform runtime environment for developing server-side web applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z and IBM i. Its work is hosted and supported by the Node.js Foundation, a collaborative project at Linux Foundation.

Node.js provides an event-driven architecture and a non-blocking I/O API designed to optimize an application’s throughput and scalability for real-time web applications. It uses Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in library to allow applications to act as a web server without software such as Apache HTTP Server, Nginx or IIS.

A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing software packages for a computer’s operating system in a consistent manner. It typically maintains a database of software dependencies and version information to prevent software mismatches and missing prerequisites.

A component of software configuration management, version control, also known as revision control or source control, is the management of changes to documents, computer programs, large web sites, and other collections of information. Changes are usually identified by a number or letter code, termed the “revision number,” “revision level,” or simply “revision.” For example, an initial set of files is “revision 1.” When the first change is made, the resulting set is “revision 2,” and so on. Each revision is associated with a timestamp and the person making the change. Revisions can be compared, restored, and with some types of files, merged.

The most common solution used for version control today is Git. Learn it!

Build automation is the process of automating the creation of a software build and the associated processes including: compiling computer source code into binary code, packaging binary code, and running automated tests.

Gulp is great. However, you might only need

npm run

. Before turning to additional complexity in your application stack ask yourself if

npm run

can do the job. If you need more, use Gulp.

Read:

Web performance optimization, WPO, or website optimization is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser. With the average internet speed increasing globally, it is fitting for website administrators and webmasters to consider the time it takes for websites to render for the visitor.

Unit Testing – In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use. Intuitively, one can view a unit as the smallest testable part of an application.

Functional Testing – Functional testing is a quality assurance (QA) process and a type of black box testing that bases its test cases on the specifications of the software component under test. Functions are tested by feeding them input and examining the output, and internal program structure is rarely considered (not like in white-box testing). Functional testing usually describes what the system does.

Integration Testing – Integration testing (sometimes called integration and testing, abbreviated I&T) is the phase in software testing in which individual software modules are combined and tested as a group. It occurs after unit testing and before validation testing. Integration testing takes as its input modules that have been unit tested, groups them in larger aggregates, applies tests defined in an integration test plan to those aggregates, and delivers as its output the integrated system ready for system testing.

A headless browser is a web browser without a graphical user interface.

Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, color, font selection and execution of JavaScript and AJAX which are usually not available when using other testing methods. Google stated in 2009 that using a headless browser could help their search engine index content from websites that use AJAX.

PhantomJS is no longer maintained, Headless Chrome steps in.

Offline development (aka offline first) is an area of knowledge and discussion around development practices for devices that are not always connected to the Internet or a power source.

Image source: http://bradfrost.com/blog/post/this-is-the-web/

A website or web application can run on a wide range of computers, laptops, tablets and phones, as well as a handful of new devices (watches, thermostats, fridges, etc.). How you determine what devices you’ll support and how you will develop to support those devices is called, “multi-device development strategy”. Below, I list the most common multi-device development strategies.

This chapter highlights a few options for instructor directed learning via front-end development schools, courses, programs, and bootcamps.

The table below contains a small selection of instructor-led courses (i.e. programs, schools, and bootcamps). Use the table to get a general idea of what is available, the cost, duration, and locations of courses. (Be aware the information can change quickly)

company program price estimate on site remote duration
Betamore Front-end Web Development 3,000 Baltimore, MD 10 weeks
BLOC Become a Front-end Developer 4,999 yes 16 weeks @ 25hr/wk or 32 weeks @ 10hr/wk
General Assembly Front-end Web Development 3,500 multiple locations 3 hrs/day 2 days/wk for 8 weeks
Thinkful Front-end Web Development 300 per month yes 15 hrs/wk for 3 months
Turing School of Software & Design Front-End Engineering 20,000 Denver, CO 7 months full time

Notes:

If you can’t afford a directed education (can be very expensive), a self directed education using screencasts, books, and articles is a viable alternative to learn front-end development for the self-driven individual.

This chapter identifies the tools of the trade. Make sure you understanding the category that a set of tools falls within, before studying the tools themselves. Note that just because a tool is listed, or a category of tools is documented, this does not equate to an assertion on my part that a front-end developer should learn it and use it. Choose your own toolbox. I’m just providing the common toolbox options.

A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code.

Front-end code can minimally be edited with a simple text editing application like Notepad or TextEdit. But, most front-end practitioners use a code editor specifically design for editing a programming language.

Code editors come in all sorts of types and size, so to speak. Selecting one is a rather subjective engagement. Choose one, learn it inside and out, then get on to learning HTML, CSS, DOM, and JavaScript.

However, I do strongly believe, minimally, a code editor should have the following qualities (by default or by way of plugins):

Used to share limited amounts of immediately runnable code. Not a true code editor but a tool that can be used to share small amounts of immediately runnable code in a web browser.

I recommending using Visual Studio Code because of the quality of the tool and the continuous improvements made to the editor that likely won’t stop or slow due to the fact that Microsoft is behind the tool. It is widely used:

Image source: https://2018.stateofjs.com/other-tools/text_editors

Used for functional testing and monkey testing.

Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.

https://github.com/trending?l=html&since=monthly

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

https://github.com/trending?l=css&since=monthly

https://github.com/trending?l=javascript&since=monthly

https://www.npmjs.com/browse/depended

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to native APIs.

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to native APIs.

These solutions use a JS engine at runtime to interpret JS and bridge that to native APIs. No browser engine or WebView is used. The UI is constructed from native UI components.

If you are new to front-end/JavaScript application development I’d start with Vue.js. Then I’d work my way to React. Then I’d look at Angular 2+, Ember, or Aurelia.

If you are building a simple website that has minimal interactions with data (i.e. mostly a static content web site), you should avoid a front-end framework. A lot of work can be done with a task runner like Gulp and jQuery, while avoiding the unnecessary complexity of learning and using an app framework tool.

Want something smaller than React, consider Preact. Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped).

If you need a basic set of UI Widgets/Components start with Semantic UI. If you are building something that needs a grid, spreadsheet, or pivot grid you’ll have to look at Kendo UI or Webix. Keep in mind that most of these solutions still require jQuery.

For more tools look here.

Before reaching for Gulp make sure npm scripts or yarn script won’t fit the bill. Read, “Why I Left Gulp and Grunt for npm Scripts”.

Notes:

Việc làm có thể bạn sẽ quan tâm

Có thể bạn quan tâm

Trước sự phát triển vượt bậc của nền kinh tế, rất nhiều ngành nghề trở nên khan hiếm nhân lực hoặc thiếu nhân lực giỏi. Tại Việt Nam, rất nhiều doanh nghiệp có nhu cầu tuyển Lập trình Front-End với mức lương hấp dẫn. Vị trí Lập trình Front-End đóng vai trò to lớn với sự phát triển chung của bất kỳ tổ chức, doanh nghiệp nào. Cơ hội việc làm của Lập trình Front-End là cực lớn, mức thu nhập của vị trí này được đánh giá là cao hơn so với các ngành cùng lĩnh vực.

Tại TopCV, bạn có thể tìm thấy những tin tuyển dụng Lập trình Front-End với mức lương vô cùng hấp dẫn. Những nhà tuyển dụng kết nối với TopCV đều là những công ty lớn tại Việt Nam. Bạn sẽ có cơ hội làm việc tại các công ty nội địa và các doanh nghiệp có vốn đầu tư nước ngoài. TopCV là nền tảng tuyển dụng công nghệ cao giúp các nhà tuyển dụng có nhu cầu tìm việc làm Lập trình Front-End và ứng viên kết nối với nhau. Nhanh tay apply vị trí Lập trình Front-End tại Hà Nội, Lập trình Front-End tại TP Hồ Chí Minh ở TopCV, bạn sẽ tìm thấy những việc làm ưng ý với mức lương tốt nhất

Các từ khóa liên quan:

Việc làm theo lĩnh vực

Việc làm theo mức lương

Việc làm theo kinh nghiệm

Việc làm theo hình thức công việc

Tìm việc làm theo khu vực

Tìm việc làm theo vị trí công việc

Cảm ơn bạn đã chia sẻ

Front-end developer chịu trách nhiệm về những công việc tiếp xúc trực tiếp với tương tác của người dùng, trong khi back-end developer lại làm việc với data và những công nghệ đằng sau. Vậy, con đường sự nghiệp của một Front-end developer sẽ diễn ra như thế nào? Và nên tích lũy những gì, ở đâu để lên trình nhanh nhất?

Hãy cùng TopDev trò chuyện cùng chuyên gia đến từ Chợ Tốt và tìm kiếm câu trả lời cho riêng mình nhé!

15 VS Code Extensions For Front-End Developers in 2019
15 VS Code Extensions For Front-End Developers in 2019

Những khái niệm cơ bản về Front-end

Cách hoạt động và một số khái niệm cơ bản cần nắm?

Một lập trình viên Front-end – Front-end Developer sẽ làm ra các thành phần cho một website được chạy trực tiếp trên trình duyệt, những gu lập trình đó là HTML, CSS và JavaScript. Tuy nhiên với xu hướng mới bây giờ cùng những kỹ năng sẵn có của các bạn Frontend thì có thể mở rộng hoạt động cho mình như viết ứng dụng cho mobile theo mô hình hybrid, thậm chí là có thể viết những ứng dụng chạy trên desktop về sử dụng nền tảng web để có thể chạy được trên nhiều hệ điều hành khác nhau. Đó chính là một cái nhìn tổng quát về Front-end.

Ngoài ra theo mình các bạn cần có một số kỹ năng khác thiên về giao diện và trải nghiệm người dùng hơn, ví dụ như bạn phải có khả năng quan sát và chú ý đến chi tiết, nó sẽ giúp ích rất nhiều cho quá trình làm việc.

Vì làm với giao diện, bạn phải có sự nhạy cảm với màu sắc về hình khối và bố cục, như phải chú ý đến canh lề, canh hàng giữa các khối trên giao diện của mình hoặc những icon khi đặt vào nó có ngay giữa hay chưa. Đôi khi nếu mình không có những cảm quan đó thì mình sẽ không để ý và bỏ qua.

Và điều cuối cùng anh nghĩ là một bạn frontend giỏi cần có khả năng tưởng tượng, vì khi làm frontend các bạn rất hay sử dụng các animation hoặc những chuyển động trên trang, bằng khả năng tưởng tượng mình sẽ hình dung được trước những cái đó sẽ xảy ra như thế nào rồi từ đó mới thực hiện lại trong code của mình, như thế chắc chắn nó sẽ chuẩn xác hơn.

Công việc của Fresher chủ yếu là các bạn sẽ làm theo những mẫu có sẵn mà các anh chị đi trước đưa ra. Tiếp theo là Junior thì ở trình độ này các bạn đã có thể làm việc được rồi nhưng vẫn phải tiếp tục học vì những kiến thức chuyên sâu như CSS, JavaScript ở trường không có dạy nên các bạn phải vừa học vừa làm. Đây cũng là khoảng thời gian để các bạn thu nhặt kinh nghiệm cho mình và làm sao để cho công việc trở nên thành thục hơn.

Ngoài ra có một vị trí cũng hay được đưa ra mà anh muốn nói đến là Middle. Với Middle hầu như các công việc cơ bản các bạn đã thành thục rồi, nhưng ở vị trí này các bạn bắt đầu tìm hiểu sâu hơn về những công nghệ mới của Frontend ví dụ như là frameworks và có thể giúp đỡ các bạn ở vị trí thấp hơn giải quyết các vấn đề liên quan.

Đối với Senior thì cái mà vị trí này cần quan tâm nhiều nhất chính là user experience. Khi anh càng lên các vị trí cao hơn thì anh thấy các vị trí này càng đòi hỏi phải tập trung hơn và phải có khả năng hỗ trợ hơn ở một góc độ mới là developer experience. Tại sao lại nói như vậy? Vì khi các bạn đã lên đến vị trí Senior rồi thì các bạn phải làm sao hỗ trợ cho team của mình hoạt động hiệu quả hơn, với kinh nghiệm của mình phải đưa ra được những giải pháp cũng như các framework, các thiết kế để làm sao team mình có thể tạo ra những trải nghiệm tốt nhất cho user.

Theo anh nghĩ thì trước tiên mình cần trau dồi thêm khả năng đọc tiếng Anh vì những nguồn thông tin cập nhật mới nhất nó không được viết bằng tiếng Việt, nên nếu em có khả năng đọc tốt, khả năng research tốt thì việc học của mình sẽ đạt hiệu quả cao hơn.

Còn về các nguồn học thì anh thấy gần đây có nổi lên một số nguồn platform nổi bật các bạn lập trình viên hay vào để viết bài là Viblo.asia, là trang để các bạn lập trình viên chia sẻ kinh nghiệm của mình. Cũng như các bạn frontend mới học thì các bạn viết rất nhiều bài JavaScript và frontend, đó là những topic mà các bạn rất quan tâm, mình thấy đó cũng là một cái hay. Còn khi các bạn học đại học, để tra cứu thì anh thấy có website Mozilla Developer Network, các bạn có thể search bất cứ chủ đề nào về JavaScript hoặc frontend với các từ khóa thì sẽ cho ra ngay kết quả mà mình tìm. Đây là những nguồn tra cứu công nghệ frontend trội nhất. Còn để thực hành các bạn cũng có thể vào trang “”w3school””, trên đây có khá nhiều các bài tập để mình có thể thực hành.

Nhưng khi mà các bạn lên cao hơn ở tầm vươn ra với thế giới rồi thì anh thấy kênh hữu hiệu nhất để mình cập nhật những kiến thức mới đó chính là thông qua nền tảng Twitter. Vì không giống như Việt Nam, các lập trình viên ở nước ngoài đa số họ sử dụng Twitter nên mình cũng hay lên đó. Đầu tiên các bạn có thể tìm và follow những tác giả của những thư viện vùng mở rồi sau đó từ những người mà bạn follow nó sẽ có các đề xuất để mình tiếp tục follow các topic và các nhân vật KOLs, họ rất hay chia sẻ và giúp mình có thêm những cập nhật mới. Còn nếu các bạn muốn có một nơi để mình tìm những thông tin cập nhật mới bằng tiếng Việt qua facebook thì các bạn có thể tham gia nhóm mà anh đang là admin: Sài Gòn Frontend Developer, anh cũng chỉ join mỗi group đó và hay post lên group đó thôi. Có những cập nhật gì mới hay những cái gì hay ho anh sẽ post lên đó để những bạn có cùng sở thích với mình tiện theo dõi.

Công việc của vị trí Principal Engineer là gì?

Anh sẽ nói qua về Chợ Tốt cho những bạn chưa biết, hiện tại đây là nền tảng rao vặt miễn phí lớn nhất ở Việt Nam. Nơi để người dùng vào trang này hiện tại chia làm 2 nền tảng chính là web và mobile app. Nhiệm vụ chính của anh ở vị trí này là xây dựng một đội ngũ Frontend Engineer mạnh ở Chợ Tốt, từ đó anh sẽ giúp công ty và team đưa ra web app cũng như sản phẩm về web có chất lượng cho nền tảng Chợ Tốt của công ty.

Nói sơ qua về cấu trúc của Chợ Tốt, một team gọi là product và test, các bạn sẽ được phân vào nhiều working group theo những nhóm chức năng của nền tảng, như làm về seller và buyer hoặc liên quan đến molitization. Các bạn frontend trong Chợ Tốt sẽ được phân rải rác vào trong những working group này để làm việc cho những chức năng đó. Các frontend developer đó sẽ họp lại với nhau thành một nhóm gọi là Web Charter, anh sẽ như là thư ký của Web Charter này. Những thử thách ở vị trí này có thể kể đến là mình sẽ hỗ trợ các bạn frontend những vấn đề khó hoặc hóc búa, đôi khi những frontend ở trình độ thấp hơn mà họ không thể giải quyết được như xử lý các vấn đề về performances hay mức độ tải trang cho một số app mà Chợ Tốt đang làm.

Ngoài ra anh sẽ giúp thiết kế những framework sử dụng chung giữa các team với nhau. Thêm nữa anh sẽ giúp chuẩn hóa quy trình để làm sao khi các bạn deliver qua app của mình sao cho nó đạt chất lượng cao thông qua các hoạt động như code review hay là những công cụ kiểm tra social code của bạn. Anh cũng tham gia phỏng vấn tuyển dụng các bạn Frontend và Fullstack Dev vào công ty, giúp cho đầu vào đảm bảo và training đào tạo các bạn sau này.

Kết luận

Hi vọng bài viết này đã giúp bạn có được những thông tin hữu ích về lộ trình trở thành front end developer cùng những yêu cầu cơ bản của nghề này. VTI Academy tự hào đã đào tạo ra rất nhiều lập trình viên front end tài năng, bứt phá sự nghiệp trong mảng front end developer nói riêng và ngành CNTT nói chung. Hãy trở thành một phần trong đó nhé!

Front-End Developer Handbook 2019

Cody Lindley

Written by

Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.

It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.

The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem.

The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter.

The intention is to release an update to the content yearly.

Read Online:

Download:

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Frontend developer | front end developer mock interview | Interviewing my Subscriber
Frontend developer | front end developer mock interview | Interviewing my Subscriber

Keywords searched by users: front end developer 2019

What Is A Front End Developer And How To Become One? - Designveloper
What Is A Front End Developer And How To Become One? – Designveloper
The 2019 Web Developer Roadmap | Hackernoon
The 2019 Web Developer Roadmap | Hackernoon
What Is Front End Developer? | Roles And Skills With Career Growth
What Is Front End Developer? | Roles And Skills With Career Growth
Five Skills A Front End Developer Needs In 2019
Five Skills A Front End Developer Needs In 2019
9 Front End Developer Resume Examples & Guide For 2024
9 Front End Developer Resume Examples & Guide For 2024
15 Vs Code Extensions For Front-End Developers In 2019 - Youtube
15 Vs Code Extensions For Front-End Developers In 2019 – Youtube
Thông Báo Tuyển Dụng Front–End Developer (Mã Tin Tuyển Dụng Td879)
Thông Báo Tuyển Dụng Front–End Developer (Mã Tin Tuyển Dụng Td879)
Mô Tả Công Việc Vị Trí Lập Trình Front-End
Mô Tả Công Việc Vị Trí Lập Trình Front-End

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *