Frontend

Bài viết được sự cho phép của tác giả Phạm Minh Khoa Storybook là một công cụ thiết kế và phát triển những UI Components cho ứng dụng của bạn trên một môi trường hoàn toàn biệt lập. Storybook mang lại trải nghiệm mới khi thiết kế những UI components tưởng chừng chỉ dừng lại ở khâu design trước khi chuyển sang giai đoạn code Frontend. Ngày nay khi phát triển một dự án, chúng ta dành rất nhiểu thời gian để xây dựng những UI Components. Hơn hết, chúng ta cần chú trọng làm rành mạch các thuộc tính cũng như hiển thị hết các tính năng cần có (props and states) của những Components này…ngay từ điểm khởi đầu …Không thể phủ nhận đó là cái khó trong một dự án Frontend! Dựa vào design ta có thể hoàn thiện một Component, hay thậm chí hoàn thành cả một Page. Nhưng bạn có chắc chắn chất lượng code vừa hoàn thiện đã cover toàn bộ các trường hợp? Những người đồng hành có tái sử dụng được hay bạn không viết lại một cái đã có 80% rồi?… Tất cả liệu đã tường minh?… Storybook đã có ~28k star ở thời điểm này và nó được sử dụng rộng rãi bởi những ông lớn như Airbnb, Coursera, LonelyPlanet. Hãy bắt đầu khai thác lợi ích mà Storybook có thể mang lại. Hãy lấy ví dụ trực quan, hãy tưởng tượng bạn đối mặt với một trong hai trường hợp sau trong dự án Frontend: Trường hợp lý tưởng : Design đã xong 98%, đã có StyleGuide, gần như các phần core là cố định sẽ không có thay đổi lớn nào. Trường hợp éo le : Design mới chỉ hoàn thành 60%, dự án lên kế hoạch làm...

Bài viết được sự cho phép bởi tác giả Sơn Dương Theo khảo sát State of JavaScript , Vue.js là một front-end framework được nhiều người tìm hiểu nhất. Trong bài viết này, chúng ta cùng tìm hiểu lý do tại sao chọn Vue.JS. Đồng thời, mình cũng sẽ hướng dẫn các bạn cách xây dựng một ứng dụng đơn giản với Vue.js Một JavaScript framework tuyệt vời Như bạn đã biết, Javascript đã có tuổi đời hơn 10 năm, không quá trẻ nhưng cũng không phải là lâu đời nếu so với các ông già gân như Java , C# . Cộng đồng người sử dụng Javascript ngày càng lớn mạnh, do đó mà số lượng JS framework mới ra mắt rất nhiều. Nổi bật nhất trong số đó là React, Vue, Angular và tân binh svelteJS. Bài viết này mình sẽ không so sánh để chọn ra một JS framework tốt nhất, các bạn có thể xem lại bài viết này của mình: React vs Angular vs Vue.js: Lựa chọn nào tốt nhất? Vue.js được xây dựng với cách tiếp cận để nó là một framework nhỏ gọn, linh hoạt và hiệu quả, dễ bảo trì, dễ thực hiện test. Đồng thời, VueJS cũng phải dễ tích hợp vào các công nghệ khác. Tức là nếu bạn đã có sẵn ứng dụng, bạn có thể sử dụng Vue.js để xây dựng giao diện cho một phần của ứng dụng đó mà không nhất thiết phải đập hết cái cũ đi. Ngoài ra, bạn cũng có thể xử lý business logic ngay trên giao diện của ứng dụng với Vue.js. Vue có rất nhiều extension bổ sung giúp bạn làm điều đó. Cũng giống với các front-end framework hiện đại khác, Vue cũng cho phép bạn tạo các component...

DevOps khá là hot vào lúc này! Có nhiều cơ hội làm việc đang nằm chờ các kỹ sư DevOps xuất sắc cùng chuyên gia trong năm 2020 và những năm tới. Đối với 1 người lập trình Java có kinh nghiệm và muốn trở thành 1 kỹ sư DevOps làm mình nghĩ mình đã đến đúng nơi rồi. Ưu điểm quan trọng nhất của DevOps là nó giúp mình cung cấp phần mềm tốt hơn và cung cấp nhiều quyền kiểm soát hơn đối với quy trình phát triển phần mềm và môi trường của bản thân với sự trợ giúp của các công cụ hiện đại và tự động hóa. Đó là lý do tại sao đề nghị cho các chuyên gia DevOps ngày càng tăng theo cấp số nhân. Nó còn là 1 trong những công việc có thu nhập cao bên cạnh chuyên gia Data Science và Machine learning. Các kỹ sư DevOps khắp nơi đang kiếm khoản $105,000 1 năm và trung bình $ 146,000 tại San Francisco, theo Glassdoor. Điều này làm mình nghĩ rằng nếu muốn tăng lương hay kiếm nhiều tiền hơn trong lúc bản thân còn phong độ kèm theo 1 công việc thú vị, nghiên cứu DevOps là 1 sự lựa chọn tốt. Trước đây, mình đã chia sẻ DevOps Developer RoadMap, thứ cung cấp hướng dẫn đầy đủ và tầm nhìn để trở thành 1 kỹ sư DevOps. Trong bài viết này, mình sẽ chia sẻ vài khóa học online mà bạn cần để trở thành 1 Kỹ sư DevOps. Ngày nay, việc tìm hiểu về các công cụ tích hợp liên tục như Jenkins và container như Docker ( Jenkins là gì? và Docker là gì? , hãy click vào đường link để tìm hiểu thêm nhé) cùng...

Làm sao có thể nhớ hết được các APIs ? Đừng lo vì đã có cheatsheets! Dưới đây là tập hợp các frontend cheatsheets hay nhất mà tôi tập hợp được. Javascript ES2015 features Javascript Javascript Regular expression React Redux Vuejs Vuex Angular 4 Flexbox SCSS Stylus GraphQL Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 1) Roadmap Frontend Developer - "Con đường tắt" để trở thành cao thủ Frontend Developer Ứng tuyển ngay các vị trí tuyển dụng Frontend trên Station D

Dù xuất phát điểm bạn ở đâu, là một tay gà mờ hay lão làng trong ngành, việc liên tục cập nhật khái niệm, ngôn ngữ và framework mới là điều bắt buộc để theo kịp xu hướng, đặc biệt là các tip và trick về frontend. Lấy ví dụ, cách đây 4 năm, React, nguồn mở của Facebook trở thành lựa chọn số 1 của các nhà lập trình JavaScript trên toàn cầu. Tuy nhiên, Vue và Angular có chỗ đứng nhất định trong thị trường, và theo sau đó là sự ra đời hàng loạt của các framework Next.js, Nuxt.js và Gatsby, Gridsome, Quasar. Nếu bạn định hướng bản thân là một nhà lập trình JavaScript chuyên nghiệp, bạn cần có sự phong phú trong kinh nghiệm ở nhiều framework khác nhau. Và nếu bạn thực sự đã vạch ra kế hoạch để trở thành một master, thì xin chúc mừng bạn, những tổng hợp dưới đây là 9 dự án, bao gồm những topic cụ thể kèm theo thư viện JavaScript để bạn tham khảo. Hãy nhớ rằng bạn chỉ thực sự thành thạo nó khi bắt tay thực hành và tự tạo cho riêng mình. Xây dựng ứng dụng tìm kiếm phim bằng React (với Hook) Bạn sẽ học được gì? Xây dựng ứng dụng này, bạn sẽ cải thiện Kỹ năng React của mình bằng Hooks API. Dự án minh họa dưới đây sử dụng các thành phần của React, tập hợp nhiều hook, API bên ngoài và tất nhiên là một số định dạng thông qua CSS. Tech Stack & Features React with Hooks create-react-app JSX CSS Dù không sử dụng bất kì một class nào, những dự án này mang đến cho bạn một điểm khởi đầu hoàn hảo với các chức năng...

Khi bắt dầu dàn trang design cho web, hãy sử dụng những hệ thống grid phổ biến hiện nay như Bootstrap Grid. Nếu bạn là designer mà chưa biết đến CSS framework này thì thiệt thiếu xót trầm trọng… Tác giả: Lưu Bình An Grid Khi bắt đầu dàn trang cho web, sử dụng những hệ thống grid phổ biến hiện nay như Bootstrap Grid . Nếu bạn là designer mà chưa biết đến CSS framework này thì thiệt thiếu xót trầm trọng, nó giải quyết phần lớn các yêu cầu cơ bản về layout, thống nhất sử dụng ngay từ đầu sẽ giúp ít rất nhiều cho mấy anh developer. Quan trọng nhất nên lưu ý là hệ thống grid ngày nay sử dụng độ rộng tương đối (theo giá trị phần trăm của container) và khoảng cách padding cố định. Bạn có thể đọc bài viết sau để hiểu cách xây dựng hệ thống grid trên Sketch Khi sử dụng hệ thống grid như bootstrap bạn sẽ không bao giờ cần phải nói cho anh developer kích thước của từng cột là mấy, vì thực sự lúc này kích thước nó chỉ là một giá trị tương đối Responsive design Bạn designer chỉ cần chỉ cho anh developer từng element nó sẽ như thế nào trên các kích thước màn hình khác nhau, luôn luôn nghĩ các element có một kích thước tương đối chứ không phải một giá trị cố định nào đó như 320 – 1024 -1920, vì giao diện responsive phải có khả năng thích nghi với nhiều dạng kích thước màn hình khác nhau nữa. Không chỉ vậy, một số hình có kích thước phụ thuộc vào container của nó, ví dụ trên desktop bạn cho một cái hình kích thước 200×200, nhưng trên...

Đối với bất kỳ bạn lập trình viên mới nào thì React hiện tại đang là một thư viện JavaScript được sử dụng rộng rãi, được phát triển và duy trì bởi Meta (tiền thân là Facebook). React đã trở thành một thư viện front-end được ưa chuộng nhất và lên tục được phát triển về cả mức độ phổ biến và tầm ảnh hưởng của mình. Để cho các bạn mới bắt đầu tiếp cận với thế giới React một cách thuận tiện nhất, mình có tổng hợp một số các hướng dẫn, gợi ý dành cho các bạn trong bài viết này hôm nay. Chúng ta cùng bắt đầu nhé Sử dụng Create React App để khởi tạo projects Một trong những chức năng đơn giản mà hiệu quả nhất của React là khả năng tạo ra một dự án mới bằng một dòng lệnh duy nhất: sử dụng Create React App. Bạn có thể chạy 1 trong 3 dòng lệnh dưới đây: npx create-react-app my-app npm init react-app my-app yarn create react-app my-app Đây là cách nhanh và cũng là tốt nhất dành cho các bạn mới học React, 1 project React với tên “my-app” (tất nhiên các bạn có thể đổi tên nó) được tạo ra với đầy đủ các package cần thiết cho bạn. Sau khi cài đặt, chúng ta có thể ngay lập tức chạy ứng dụng của mình ở chế độ development bằng lệnh: “npm start” hoặc “fiber start”, cổng (port) mặc định sẽ là 3000, thậm chí nó còn tự động mở trình duyệt lên và chạy ứng dụng vừa được tạo ra. Tìm hiểu những cú pháp cơ bản React là thư viện thân thiện với lập trình viên, hãy bắt đầu học và nắm chắc những khái niệm dưới đây,...

Functors là gì? Đôi khi, logic chính xác sẽ là bất khả thi bởi sự phức tạp của data trong thế giới lập trình. Do đó, data trừu tượng (data abstraction) là một tool rất hữu ích giúp ta tạo một đại diện đơn giản cho data. Để có thể đạt được điều này, chúng ta tạo ra ‘ Containers ’, những container này sẽ chỉ chứa data và không làm gì khác. Ta cũng không cung cấp cho chúng những properties hoặc methods như trong lập trình hướng đối tượng OOP. Khi cho một giá trị vào container thì nó sẽ giúp giữ giá trị đó được an toàn, trong khi được pass qua functional logic. Và ta chỉ lấy nó khi rất cần thiết. Như vậy, container có 2 task chính: Chứa giá trị bên trong chính nó Trả giá trị lại khi chúng ta cần Và nó cũng không làm biến đổi giá trị. Thật ra, những container này cũng không có gì mới, chúng ta đã sử dụng chúng kể từ khi bắt đầu JavaScripting. Khi làm về functional programming, những containers này cực kì quyền năng, bởi chúng góp phần vào nền tảng cho cấu trúc của functional, và giúp chúng ta với những kĩ thuật như Pure Functional Error Handling và Asynchronous Actions (cùng nhiều cái khác nữa). >>> Xem thêm về tính trừu tượng đuợc nhắc đến trong Bí thuật đơn giản hóa code của bạn Trước khi đi sâu vào những container này thì mình sẽ nói về một loại container đặc biệt là Functors. Functors là gì? Functors chính là container có thể được dùng với ‘map’ function. Trước khi chúng ta tạo ra container cho riêng mình, hãy nhìn lại những loại container mà ta thường dùng trước đây: Các...

Hiểu về thuộc tính position trong CSS – Khi bạn thiết kế các layout cho website việc chuyển từ file thiết kế theo định dạng HTML (Hypertext Markdown Language) bạn sẽ buộc phải sử dụng thuộc tính position trong CSS . Ví dụ như làm thanh tính năng trên menu, header, v.v. Có thể hiểu nó là thuộc tính xác định loại của phương pháp định vị trí cho thành phần. Với thuộc tính position chúng ta có 5 giá trị chính cần biết: Static: Đây được xem là giá trị hiển thị Position trong css một cách mặc định (default) , các thành phần sẽ nằm theo thứ tự của văn bản . Relative: Định vị trí tuyệt đối cho các thành phần, không gây ảnh hưởng tới vị trí ban đầu hay các thành phần khác. Absolute: Giá trị này sẽ giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít nhất là theo cửa sổ trình duyệt. Fixed: Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt. Fixed: Định vị và giúp cho phần tử luôn cố định một chỗ, ví dụ như khi bạn scroll trình duyệt chẳng hạn, phần tử sẽ không thay đổi. Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). Mẹo quy ước tên cho CSS giúp bạn rút ngắn 2/3 thời gian khi debug! Responsive HTML bằng một dòng CSS Trước hết hãy nói về thuộc tính position relative, absolute và các thuộc tính cool ngầu khác Thuộc tính Position Relative Thuộc tính position: relative trong CSS giúp Định vị trí tuyệt đối cho các thành phần. Ví dụ: selector{position: relative;} Nếu bạn sử dụng thuộc tính này thì sẽ phải sử dụng kèm theo...

TỔNG QUAN Lập trình viên Front-end là người tập trung phát triển phía Client Side, nói một cách đơn giản dễ hiểu là tập trung vào mảng phát triển xây dựng giao diện và trải nghiệm cho người dùng, là người phụ trách phát triển hiển thị và trải nghiệm người dùng cho ứng dụng web. Front-end Developer chính là người quyết định cái nhìn đầu tiên của người dùng về trang web, đồng thời mang lại một trang web dễ dàng thao tác và sử dụng. >>> Xem thêm: Frontend cần học những gì để trở nên thật giỏi Những yêu cầu từ phía nhà tuyển dụng Một frontend dev phải có tư duy về UI/UX Lập trình viên không đơn thuần chỉ là một coder giỏi mà còn phải có tư duy như một Designer, một Business Analyst (BA) có thể phát triển sản phẩm đẹp, tiện dụng mang lại trải nghiệm tốt nhất cho người dùng. Bởi vì trong sự cạnh tranh khốc liệt thì một sản phẩm đẹp hơn sẽ chiếm được tình cảm và sự ủng hộ từ phía người dùng, người ta không thể sử dụng một thiết bị rất đẹp về mọi thứ như iPhone, nhưng khi mở ứng dụng của bạn lên lại thấy xấu, thiết kế cẩu thả, mắc phải các lỗi cơ bản về hiển thị. Có hàng tá sản phẩm giống bạn nhưng lại rất tiện dụng, trong khi đó sản phẩm của bạn lại rối rắm, phức tạp, thì rõ ràng không ai muốn bỏ thời gian, công sức để tìm hiểu. Nói một cách khác, một sản phẩm xấu, hoặc khó sử dụng sẽ làm cho người dùng cảm thấy nó thiếu chuyên nghiệp và không tôn trọng họ. Sản phẩm đẹp sẽ giúp bạn nâng cao...

Tác giả: Đông Đông Leonardo da Vinci đã từng nói : “Tối giản là đỉnh cao của sự tinh tế”. Mặc dù đã trải qua biết bao nhiêu thời đại, chân lí này cho đến nay vẫn giữ nguyên vẹn giá trị của nó. Với những sản phẩm mà sự sống còn dựa trên cảm tình và trải nghiệm của khách hàng như website hay app mobile, thì câu nói trên đích thực có sự ảnh hưởng đến các tác phẩm thiết kế của chúng ta… Xin chớ nhầm lẫn rằng, đơn giản không phải là đơn điệu, hời hợt và nhàm chán. Thay vào đó, sự đơn giản tinh tế đem đến cho thiết kế những nét cuốn hút rất riêng, giúp nó trở nên trực quan và thực sự hữu ích cho người dùng. Những sản phẩm tối giản không những giải quyết được nhu cầu của người dùng, mà còn giúp người dùng tránh tiêu tốn thời gian vào những thứ rườm rà không cần thiết. Rất hiếm khi ta nghe ai đó đánh giá một sản phẩm kĩ thuật số bằng những cụm từ như yêu thương, trân trọng. Mà sẽ mô tả chúng với các từ ngữ quen thuộc như: đẹp, bắt mắt, bóng bẩy (khi nói về giao diện thiết kế), hay trực quan, dễ dùng, khó thao tá c (về tính năng), còn (về nội dung) thì là cung cấp nhiều thông tin hữu ích, có chọn lọc … Hãy trở thành một designer thiết kế trải nghiệm người dùng ( UX ) có tâm. Vì việc tôn trọng thời gian và công sức của người sử dụng là việc thực sự rất đáng làm, nếu như bạn đang hướng tới nghề thiết kế giao diện ( UI ). Bài viết này với...

Lập trình web là công việc đòi hỏi nhiều kĩ năng và kiến thức chuyên môn khó. Có rất nhiều phương pháp để tự học, nhưng đa phần trong số đó đều đã lỗi thời và không còn có ích cho các lập trình viên bởi sự phát triển chóng mặt của ngành công nghệ này. Nếu bạn đang tìm kiếm những nguồn tài liệu miễn phí trên Internet thì xin chúc mừng, bạn đã đến đúng địa chỉ. Bài viết này sẽ cung cấp cho thần dân nhà dev những nguồn tự học giúp anh em thoát khỏi thời gian dài vừa fix bug vừa tìm hiểu nguyên nhân tại sao framework của bạn ngừng hoạt động. Front-end căn bản Interneting is Hard Đây là trang web với đầy đủ tài liệu hướng dẫn cách sử dụng HTML và CSS để xây dựng những website hiện đại. Nó sẽ bắt đầu từ góc nhìn của những học viên chưa biết gì về HTML hay CSS. Nếu bạn đang tìm kiếm một nơi cung cấp cho bạn về kiến thức nền tảng như thế thì hãy tham khảo ngay link phía trên. Mozilla Developer Network Đây có lẽ là nguồn tham khảo tốt nhất cung cấp các kiến thức tổng quát về lập trình web và thay thế được cho W3 Schools trong thư viện điện tử của tôi. CSS Diner Luyện tập CSS selector cũng giống như chọn lựa trái cây và rau củ vậy! CSS selector rất quan trọng để xây dựng nên một nền tảng CSS sạch và bền vững. Front-end tuyển dụng lương cao trên Station D Sự tương thích của các đặc tính của browser CanIUse Thực tế là không phải browser nào cũng được tạo ra theo cách giống nhau. CanIUse sẽ chỉ rõ...