Lập Trình

Bài viết được sự cho phép của tác giả Tino Phạm Phần 2: Tạo ứng dụng với Angular 2 + Typescript Phần 1 mình đã hướng dẫn bạn cài đặt môi trường để có thể phát triển ứng dụng với Angular 2. Trong phần này, chúng ta sẽ đi vào thực hành Angular 2. Để bắt đầu tạo ứng dụng thực hành với Angular 2, các bạn có thể tham khảo về cách học một công nghệ mới và xin hãy chia sẽ với mình về ý kiến của bạn. OK, bắt đầu thực hành thôi nào. 8 lợi thế khi sử dụng Polymer so với Angular và React Angular - Tự xây dựng module "lazy load images" Bước 1: tạo thư mục vơi tên “ AngularDemo “. Bước 2: Mở Visual Studio Code (VS Code) > File > Open Folder… > tìm và chọn thư mục “AngularDemo”. Bước 3: Click vào button New File > đặt tên file là tsconfig.json với nội dung như sau: { "compilerOptions" : { "target" : "es5" , "module" : "system" , "moduleResolution" : "node" , "sourceMap" : true , "emitDecoratorMetadata" : true , "experimentalDecorators" : true , "removeComments" : false , "noImplicitAny" : false }, "exclude" : [ "node_modules" , "typings/main" , "typings/main.d.ts" ] } Bước 4: Tạo file typings.json với nội dung: { "globalDependencies" : { "core-js" : "registry:dt/core-js#0.0.0+20160602141332" , "jasmine" : "registry:dt/jasmine#2.2.0+20160621224255" , "node" : "registry:dt/node#6.0.0+20160621231320" } } Bước 5: Tạo file package.json với nội dung như sau: { "name" : "angular2-demo" , "version" : "1.0.0" , "scripts" : { "start" : "concurrent "npm run tsc:w" "npm run lite" " , "tsc" : "tsc" , "tsc:w" : "tsc -w" , "lite" : "lite-server" , "typings" : "typings" , "postinstall" : "typings install" }, "license" : "ISC" , "dependencies" : { "angular2"...

Bài viết được sự cho phép của tác giả Nguyễn Hữu Khanh Trong bài viết này, mình hướng dẫn các bạn cách cài đặt PostgreSQL server sử dụng Docker các bạn nhé! 20 trường hợp sử dụng lệnh Docker cho developer Cách tạo một Docker đơn giản cho Node.JS Chúng ta sẽ sử dụng command docker run để chạy một Docker Image của PostgreSQL trên Docker Hub https://hub.docker.com/_/postgres như sau: docker run --name <container_name> -e POSTGRES_USER=<postgre_user> -e POSTGRES_PASSWORD=<postgre_password> -p 5432:5432 -v <mount_folder>:/var/lib/postgresql/data -d postgres:<tag> Trong đó: — name <container_name> là tên Docker container mà các bạn muốn đặt cho container của PostgreSQL server. -e POSTGRES_USER=<postgre_user> khai báo biến môi trường POSTGRES_USER, là tên user mà chúng ta sẽ sử dụng để đăng nhập vào PostgreSQL service. Tham số này là optional, nếu các bạn không khai báo thì mặc định, user với username “postgres” sẽ được sử dụng. -e POSTGRES_PASSWORD=<postgre_password> là mật khẩu để đăng nhập với username ở trên. Tham số này là bắt buộc các bạn nhé! -v <mount_folder>:/var/lib/postgresql/data giúp chúng ta mount một thư mục trên máy cài Docker với thư mục /var/lib/postgresql/data của PostgreSQL server, giúp chúng ta có thể synchronize data của PostgreSQL server trong container lên máy cài Docker, phòng trường hợp Docker Container của chúng ta có vấn đề gì, có thể chạy lại mà không mất dữ liệu. -d là tham số giúp chúng ta chạy câu lệnh trong background, giúp chúng ta có thể tiếp tục container khi tắt Terminal hoặc Ctrl+C. postgres:<tag> là tag Docker Image của PostgreSQL server mà các bạn muốn chạy. Các bạn có thể định nghĩa thêm biến môi trường POSTGRES_DB để định nghĩa tên database mặc định sẽ được tạo khi container chạy. Mặc định, tên database này sẽ có giá trị giống với tên...

Bài viết được sự cho phép của BBT Tạp chí Lập trình Giả sử như bạn cần mua một chiếc máy tính, nhưng bạn vẫn chưa quyết định được nên sử dụng máy tính của hãng nào. Ngoài kia bao la bạt ngàn những thương hiệu chất lượng cao như Apple, Lenovo, Asus, HP… Như vậy để có thể chọn được chiếc máy tính ưng ý, bạn sẽ có 2 cách sau: Giới thiệu Abstract Factory Pattern Hướng dẫn sử dụng Factory trong Design Pattern – Đến showroom của từng hãng, rồi tham khảo từng máy. Bạn đi hết showroom của hãng này tới showroom của hãng khác để xem, rồi nhớ thông tin trong đầu để so sánh chiếc này hợp hơn, chiếc kia rẻ hơn … – Bạn đến một cửa hàng bày bán tất cả các loại laptop của tất cả các hãng, rồi bạn hỏi tư vấn là với số tiền này, bạn có thể chọn được laptop loại nào. Hay bạn đang muốn xem thử máy của hãng A, bạn nhờ tư vấn viên mang ra giúp bạn một chiếc. Rồi bạn băn khoăn một chiếc của hãng B, bạn lại nhờ tư vấn viên mang ra một chiếc khác. Rõ ràng là cách thứ hai tiết kiệm thời gian và công sức cho bạn rất nhiều. Đây chính là cách mà mẫu thiết kế Factory hoạt động. Mẫu thiết kế factory là gì? Factory pattern là một mẫu thiết kế thuộc nhóm Khởi tạo. Pattern này sử dụng một interface hay một abstract class mà tất cả các lớp chúng ta cần khởi tạo đối tượng sẽ kế thừa. Factory sẽ định nghĩa việc khởi tạo đối tượng, nhưng đối tượng nào sẽ được tạo thì phụ thuộc vào các lớp con. Do vậy,...

Diễn đàn Tiếp thị Di động Việt Nam 2020, thuộc chuỗi sự kiện MMA IMPACT sẽ được tổ chức tại TP. Hồ Chí Minh vào ngày 19/11/2020, với nhiều nội dung đột phá giúp các nhà tiếp thị phát huy hết các tiềm năng và chung tay kiến tạo tương lai của Tiếp thị hiện đại. Diễn đàn về tiếp thị di động lớn nhất trong năm mà các marketers không thể bỏ qua MMA Impact Việt Nam là một trong chuỗi sự kiện toàn cầu do Hiệp Hội Tiếp thị Di Động (MMA), Hiệp hội toàn cầu hàng đầu về tiếp thị di động đứng ra tổ chức, là cơ hội để các chuyên gia đầu ngành thảo luận và chia sẻ về các xu hướng và thách thức sắp tới của ngành tiếp thị di động. Năm nay, khi hầu hết các nước Châu Á Thái Bình Dương đều diễn ra trực tuyến, MMA Impact tại Việt Nam sẽ vẫn được tổ chức offline. Được tổ chức bởi Hiệp hội Mobile Marketing (MMA) Việt Nam – đơn vị uy tín với hơn 45 công ty thành viên tại Việt Nam, đại diện cho đa phần hệ sinh thái Mobile Marketing, MMA Impact Việt Nam 2020 hứa hẹn sẽ quy tụ hơn 400 nhà lãnh đạo doanh nghiệp và các nhà tiếp thị hàng đầu đến từ nhiều lĩnh vực khác nhau. Ban điều hành của MMA bao gồm các đại diện tiêu biểu đến từ: Adtima, Abbott, Cốc Cốc, Dentsu Aegis Network, FrieslandCampina, FECredit, Google, GroupM, Unilever Vietnam, Suntory PepsiCo Vietnam, Biti’s, Pinetech… Bằng hệ sinh thái và nền tảng của mình, MMA đã khẳng định vai trò dẫn đầu trong việc thúc đẩy ngành tiếp thị di động, kết nối các doanh nghiệp, và tạo sân chơi...

Thông thường chúng ta sẽ dùng một nhà kho để chứa dữ liệu state như Redux , một component container bọc ở nút đầu tiên trong app, các component con bên trong có thể truy xuất và cập nhập các dữ liệu một cách dễ dàng Với các API mới được React bổ sung là useState , createContext , useContext chúng ta có thêm một lựa chọn để làm nhà kho mà ko cần dùng đến Redux Ví dụ chúng ta có 3 dữ liệu như bên dưới const teamMembersNames = ["John", "Mary", "Jason", "David"]; const [sharing, setSharing] = React.useState([]); const [help, setHelp] = React.useState([]); const [pairing, setPairing] = React.useState(teamMembersNames); Câu hỏi là làm sao chúng ta đưa dữ liệu vào nhà kho . Chúng ta sẽ dùng API createContext (tạo em cái kho) Khi sử dụng React.createContext chúng ta sẽ nhận về 2 component là Provider (anh tung) và Consumer (em hứng). // ./src/utils/store.js export const StoreContext = React.createContext(null); export default ({ children }) => { // các em đã vào nhà kho const teamMembersNames = ["John", "Mary", "Jason", "David"]; const [sharing, setSharing] = React.useState([]); const [help, setHelp] = React.useState([]); const [pairing, setPairing] = React.useState(teamMembersNames); const store = { sharing: [sharing, setSharing], help: [help, setHelp], pairing: [pairing, setPairing] }; return ( <StoreContext.Provider value={store}>{children}</StoreContext.Provider> ); }; Để các component bên trong <App/> đều dùng được <Consumer /> // ./index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import StoreProvider from "./utils/store"; ReactDOM.render( <StoreProvider> <App /> </StoreProvider>, document.getElementById("root") ); Với bất kỳ component nào muốn sử dụng, để lấy được dữ liệu trong store, chúng ta sử dụng useContext import React from "react"; import { StoreContext } from "../utils/store"; const SomeComponent = () => { // dữ liệu dùng chung const { sharing } = React.useContext(StoreContext); };...

Bài viết được sự cho phép của tác giả Lê Chí Dũng Khi develop website chắc hẳng chúng ta cần sự hỗ trợ của một số plugin để tăng tốc develop cũng như kiểm thử lại chất lượng sản phẩm! Sau đây mình sẽ giới thiệu một số extension trên Chrome cho web developer mình hay sử dụng và thấy chúng khá hiệu quả trong việc hỗ trợ công việc của mình. Page Analytics (by Google) Tool analytics được cung cấp bởi Google cho phép bạn dễ dàng xem việc phân tích tracffic website mà bạn đang quản lý. Download PageSpeed Insights Checker for Mobile Tool check speed load trên các thiết bị mobile. Bạn sẽ dễ dàng check tốc độ load của các trang web hiện tại với 1 cú click. Download User-Agent Switcher for Chrome Tool này sẽ giúp bạn dễ dàng chuyển user-agent bạn muốn trên website để dễ check giao diện, xử lý,… Download Performance-Analyser Sau khi cài tool, tool sẽ tự động đo performance khi bạn load website nên khi nào cần xem chỉ cần click để xem không phải load lại trang và nó không ảnh hưởng tốc độ tải website. Download HTTP/2 and SPDY indicator Nếu bạn cần test protocol thì không thể thiếu tool này nó sẽ phân tích cho bạn về http1.1, http2,… Download Lighthouse Nếu bạn cần 1 bản report chi tiết về hiệu suất về website thì không thể thiếu tool này. Nó được cung cấp bởi Google, thường dùng để check Progressive Web App,…. Download Page load time Tool này sẽ cung cấp tóm gọn thời gian load của website để bạn biết nên cải thiện những phần nào! Download Image Analyzer Tool này sẽ giúp bạn xem thông tin về size, dung lượng, exif… của từng tấm...

Trong lập trình hướng đối tượng (OOP), việc ghi đè phương thức (method overriding) là một tính năng cho phép con lớp định nghĩa lại các phương thức được kế thừa từ lớp cha. Phương thức ghi đè sẽ có cùng tên và tham số với phương thức trong lớp cha, nhưng có thể có hành vi khác nhau. Từ khóa override được sử dụng trong java để chỉ ra rằng phương thức trong con lớp đang ghi đè phương thức của lớp cha. Từ khóa này giúp trình biên dịch Java kiểm tra xem phương thức được ghi đè có tuân theo các quy tắc nhất định hay không. Tìm hiểu về từ khóa override trong Java Trong Java , từ khóa override được sử dụng để ghi đè phương thức của lớp cha trong lớp con. Điều này có nghĩa là khi một phương thức được gọi từ một đối tượng của lớp con, phương thức trong lớp con sẽ được thực thi thay vì phương thức trong lớp cha. Điều này cho phép chúng ta định nghĩa lại các phương thức đã có trong lớp cha và điều chỉnh hành vi của chúng theo ý muốn. Để sử dụng từ khóa override, chúng ta cần thực hiện các bước sau: Tạo một con lớp kế thừa từ lớp cha có phương thức muốn ghi đè. Định nghĩa một phương thức mới trong con lớp có cùng tên và tham số với phương thức trong lớp cha. Sử dụng từ khóa override trước khai báo phương thức trong con lớp. Ví dụ: class Cha { public void inRa() { System.out.println("Đây là lớp cha"); } } class Con extends Cha { @Override public void inRa() { System.out.println("Đây là lớp con"); } } Trong ví dụ trên, phương thức inRa()...

Bài viết được sự cho phép của tác giả Lưu Bình An Phương thức **slice** (copy cho em một miếng) có thể sử dụng trên 2 kiểu String và Array Cách sử dụng cơ bản thì ta có thể truyền vào index bắt đầu, và index kết thúc ( kết quả tả về không bao gồm index kết thúc ) Index kết thúc cũng có thể bỏ qua , lúc này nó sẽ hiểu là lấy hết luôn các phần tử còn lại. Và nếu mà chúng ta truyền giá trị index kết thúc nó lớn hơn chiều dài của mảng, thì nó cũng không lỗi, mà trả về toàn bộ như không truyền vào Còn vui vui, bạn không truyền vào index bắt đầu luôn, thì nó cũng không lỗi nốt, mà sẽ sao y toàn bộ các phần tử vào mảng mới Xem thêm các việc làm JavaScript hấp dẫn tại Station D Với index bắt đầu nhận vào là undefined nó sẽ hiểu là 0 (em cũng lại javascript) Index bắt đầu lớn hơn độ dài của array ? Nó sẽ cho ta kết qua là một mảng rỗng Chưa đủ thú vị? Vậy truyền vào số âm thì sao? Lúc này nó sẽ được tính theo cơ chế index ngược , các giá trị âm sẽ được tính theo index: thằng cuối cùng là -1, áp cuối là -2, và cứ tiếp tục đi ngược lên. Sự khác nhau của bộ 3 Slice, Splice và Split trong Javascript 12 thủ thuật hữu ích trong JavaScript Chúng ta có thể dùng nó để lấy các phần tử từ phải qua trái (2 phần tử cuối, 3 phần tử cuối, ví dụ vậy) Đối với String thì cũng cách dùng cũng tương tự như Array (mai quá!) Mình...

Phỏng vấn Manual Tester cần chuẩn bị những kiến thức gì? Bài viết này sẽ cung cấp một số kiến thức tổng quan giúp bạn chuẩn bị tốt hơn trước khi bước vào buổi phỏng vấn Manual Tester. Manual Tester nói riêng và tester nói chung là những vị trí không thể thiếu trong team development. Bản thân họ là người chịu trách nhiệm cũng như góp phần đóng góp cho sự thành công của product. Nhiều bạn QC/QA dễ thương lắm chứ bộ. Không phí phạm thời gian nữa, giải trí chút xíu và giờ là bắt đầu bộ câu hỏi phỏng vấn ngay là luôn. 1. Sự khác biệt giữa quality assurance, quality control và software testing Câu hỏi đầu tiên phỏng vấn Manual Tester là câu hỏi cơ bản. Đầu tiên là Quality Assurance (đảm bảo chất lượng). QA là vị trí đề cập đến công việc theo dõi và lập kế hoạch để đảm bảo hệ thống kiểm tra kiểm soát chất lượng được tuân theo để tạo ra một sản phẩm chất lượng. QA theo dõi các test report và sửa đổi quy trình để đáp ứng việc giữ cho hệ thống hoặc sản phẩm ở trạng thái tốt. Kiểm soát chất lượng (QC) có liên quan đến chất lượng của sản phẩm. QC không chỉ tìm ra các lỗi mà còn đề xuất các cải tiến cho sản phẩm nếu có. Có thể hiểu rằng các quy trình được đề ra bởi QA sẽ được đề xuất bởi QA được thực hiện bởi QC. QC có trách nhiệm hoàn thành những chiến lược và phương án của QA đề ra. Kiểm thử phần mềm là quá trình đảm bảo rằng sản phẩm do nhà phát triển phát triển đáp ứng yêu cầu của người...

Tác giả: John Au-Yeung Các dev thường dễ mắc sai sót khi làm việc, tuy nhiên hoàn toàn có thể tránh được những sai lầm này nếu biết về nó từ trước. Bài viết này sẽ chỉ ra những lỗi sai mà các newbie front end developer hay gặp nhất và cách để khắc phục chúng như thế nào. Phụ thuộc quá nhiều vào việc sử dụng Frameworks Nhiều front end developer có thói quen phụ thuộc hoàn toàn vào frameworks dù rõ ràng vẫn có thể tự làm được những việc đó mà không cần dùng đến framework. Vậy nên tốt nhất, hãy chỉ dùng framework khi đã thành thạo với các cấu trúc JavaScript đơn giản và thao tác DOM. Nếu không thì sẽ khó mà hiểu được nguyên lý hoạt động của vấn đề đó. Xem thêm Top 7 JavaScript Frameworks Front end Developer không nên đặt tất cả code ở một chỗ JavaScript đã có các module tiêu chuẩn những năm gần đây nên không có lí do gì để sử dụng các scripts quá dài nữa. Hãy sử dụng module để chia code thành các phần khác nhau để dễ quản lý hơn. Bạn cũng không nên sử dụng biến toàn cục – global variables nữa mà hãy chuyển sang sử dụng nhiều biến xuất trên từng module. Ngoài ra, nếu muốn gom các code thành một custom component, front end developer có thể sử dụng web components API để thực hiện và sử dụng ở bất kỳ nơi nào. Các project được tạo bởi framework đều chia code thành các module, đây là phương pháp tốt nhất mà bạn nên thực hiện để tránh các sai lầm. Nhiều công ty tuyển dụng Frontend Developer đãi ngộ tốt, ứng tuyển ngay! Sử dụng Inline-styles Inline-styles...

Bài viết được sự cho phép của tác giả Kiên Nguyễn Làm việc với Javascript nhiều, vấn đề các bạn thường gặp là kiểm tra xem một object có phải là number hay không ? (Javascript check is a number or not?). Xin được giới thiệu 3 cách thông dụng dưới đây giúp kiểm tra isNumber trong Javascript : 10 câu hỏi javascript để nâng cao trình độ 10 tip tối ưu code trên JavaScript mà web developer nào cũng nên biết 1. Sử dụng isNaN() Như cái tiêu đề function, NaN (Not a number) . Hàm này kiểm tra một giá trị truyền vào có phải là số hay không ?. Syntax: Number.isNaN(value) Trường hợp parameter value là số -> isNaN() trả về false. Trường hợp parameter value không phải là số isNaN() trả về true. Chú ý rằng sử dụng isNaN() để kiểm tra number trong Javascript sẽ có hai cách gọi: isNaN(), this is global function , converts the tested value to a Number, then tests it. Nếu chỉ sử dụng isNaN(), đây là function toàn cục , trước khi kiểm tra value có là number hay không?. Nó sẽ convert trước các giá trị này rồi mới kiểm tra . // Trường hợp là string sẽ tự động convert qua number rồi mới chekc // Không convert được -> not a number -> true isNaN('123') //false isNaN('Hello') //true isNaN('2005/12/12') //true // Chú ý khi sử dụng với '' isNaN('') //false -> '' vẫn được hiểu là number // NaN thì cho dù là String cũng check được isNaN(true) //false isNaN(undefined) //true isNaN('NaN') //true isNaN(NaN) //true // Các phép toán chia cho 0 chắc chắn không là number isNaN(0 / 0) //true The isNaN() function is different from the Number specific Number.isNaN() method. Number.isNaN() does not convert...

javascript Dịch từ b ài viết của tác giả: Kevin Gardner Giới thiệu Lập trình từ khi ra đời cho đến nay vẫn không ngừng phát triển. Bạn càng có kỹ năng coding tốt thì càng có nhiều cơ hội làm việc tốt hơn. Quan trọng là hãy biết cách “làm mới” mình mỗi ngày, đừng tự mãn với những gì mình có mà hãy cố gắng học hỏi thêm thật nhiều kiến thức mới từ những kiến thức cơ bản như ngôn ngữ JavaScript đến các ngôn ngữ, kỹ thuật chuyên môn hơn như Assembly , C ,…. Dưới đây là 5 chiến thuật tuyệt vời bạn có thể áp dụng để trở thành một dev giỏi hơn. 10 kênh Youtube học lập trình không thể bỏ qua dành cho Junior Web Developer / Designer 5 ngôn ngữ lập trình “khó chịu” nhất thế giới 5 chiến thuật học hỏi tốt nhất (áp dụng cả với JavaScript) 1. Lên kế hoạch để vượt qua điểm yếu của bản thân Một trong những kỹ năng quan trọng của dev là biết mình cần phải làm gì. IT là một lĩnh vực rộng nên mỗi dev chỉ cần tập trung vào đúng lĩnh vực chuyên môn của mình và làm tốt nhất có thể trong khả năng với một số nhiệm vụ hay ngôn ngữ lập trình nhất định. Cần biết cách vượt qua điểm yếu của chính mình Khi mới bắt đầu bạn nên làm quen với ngôn ngữ JavaScript cơ bản . Đó là ngôn ngữ nền tảng web chuẩn, được sử dụng phổ biến nhất và thường được ứng dụng trong build mobile app . Bạn cũng nên cân nhắc về khả năng tài chính của mình để đăng kí thêm những khóa học JavaScript online hoặc tự...