Leo's Blog - Leo's coding journey

Tricky use case of Array.prototype.map in JS

Mon, 21 Sep 2020 22:12:03 GMT

If you are familiar with functional programming, Array.prototype.map must be a function that you work with every day.

For me, map() is a powerful function, but there might be some tricky use case of it that you don’t know about!

Let’s walk through some basic knowledge

The map() method creates a new array from the calling array by applying a provided callback function once for each element of the calling array

Simple use cases

Giving this array

const devs = [
	{ id: "1", name: "Leo", yob: 1995 },
	{ id: "2", name: "Paul", yob: 1995 },
	{ id: "3", name: "Jesse", yob: 1996 },
	{ id: "4", name: "Ken", yob: 1997 }
];

What can we do using map() function:

Getting new values from array

const ages = devs.map(dev => {
	const currentYear = new Date().getFullYear()
	return currentYear - dev.yob
});

console.log(ages); // => [25, 25, 24, 23]

Extracting values from array of objects

const names = devs.map(dev => dev.name);

console.log(names); // => ["Leo", "Paul", "Jesse", "Ken"]

Rendering list in React application

import React from "react";

export default DeveloperProfiles = ({ devs }) => {
	return (
		<ul>
			{
				devs.map(dev => <li key={dev.id}>{dev.name}</li>)
			}
		</ul>
	);
}

Tricky use case

It is common to pass the pre-defined callback function as map() argument like this:

const extractId = (dev) => {
	return dev.id
};

const ids = devs.map(extractId);

console.log(ids); // => ["1", "2", "3", "4"]

But this habit may lead to unexpected behaviors with functions that take additional arguments.

Consider this case - we need to get all ids as numbers:

// ids = ["1", "2", "3", "4"]
const idsInNumber = ids.map(parseInt);

console.log(idsInNumber); // => ???

You might expect the result is [1, 2, 3, 4], but the actual result is [1, NaN, NaN, NaN] 😮😮

We encountered this problem at Cốc Cốc recently, it took me a while to figure out, and here’s the answer…

Usually, we use map() callback with 1 argument (the element being traversed), but Array.prototype.map passes 3 arguments:

the element
the index
the calling array (which we don’t use most of the time)

And the callback in this case - parseInt is often used with 1 argument but it takes 2:

// Syntax
parseInt(string [, radix])

string: the value to parse
radix [Optional]: an integer that represent the radix (the base in mathematical numeral systems) - usually, it’s 10

For example:

parseInt("10"); // => 10
parseInt("10", 10); // => 10
parseInt("10", 2); // => 2
parseInt("10", 4); // => 4

And here you can see the source of confusion 👀!

The third argument of map() is ignored by parseInt - but not the second one!

Hence, the iteration steps of map() look like this:

// map(parseInt) => map(parseInt(value, index))

/* index is 0 */ parseInt("1", 0); // => 1
/* index is 1 */ parseInt("2", 1); // => NaN
/* index is 2 */ parseInt("3", 2); // => NaN
/* index is 3 */ parseInt("4", 3); // => NaN

Solution

As you’ve known the source of the problem, the solution is not to pass all of the map()’s arguments to your callback if you’re not sure how it works

Passing only the arguments that your callback needs

function returnInt(element) {
  return parseInt(element, 10)
}

["1", "2", "3", "4"].map(returnInt);
// => [1, 2, 3, 4]

// Same as above, but using the concise arrow function syntax
// Better use this if you don't need to re-use the callback
["1", "2", "3", "4"].map(numb => parseInt(numb, 10));
// => [1, 2, 3, 4]

A simpler way to achieve our case like Airbnb style guide

["1", "2", "3", "4"].map(Number);
// => [1, 2, 3, 4]

And that’s what I know about Array.prototype.map function, feel free to share your use case in the comment section 👇

Happy coding!

References

Javascript - function declaration vs function expression

Wed, 16 Sep 2020 22:12:03 GMT

Post này chỉ là 1 note nhỏ của mình cho những dev hay quên về 2 khái niệm function declaration và function expression để mỗi lần nhắc đến chỉ việc vào đây xem lại chứ không cần phải google nữa 😅😅

Chắc hẳn anh em ngày ngày làm việc với javascript sẽ viết rất nhiều function với các cú pháp như:

function doSomething() {} // function declaration

// hoặc
const doSomething = function() {} // function expression

// hoặc
const doSomething = () => {} // function expression

Cách viết đầu tiên chính là function declaration, và 2 cách sau là function expression, vậy chúng khác gì nhau và sử dụng như thế nào?

Definition

Khác biết đầu tiên chính là cách định nghĩa function

Function declaraion được khai báo với từ khóa function và luôn bao gồm tên của function đó

function doSomething() {}

Function expression được khai báo tương tự như function declaraion nhưng được gán vào 1 biến và sẽ chạy khi được gọi qua biến đó, tên của function có thể bỏ đi (anonymous function)

const doSomething = function() {}

// Anonymous function in ES6 syntax
const doSomething = () => {}

Hoisting

Hoisting là 1 cơ chế của Javascript thể hiện việc đưa function và variable lên trên cùng của scope trước khi code được thực thi.

Hoisting chỉ áp dụng function declarations, không áp dụng cho function expressions

Có thế hiểu đơn giản qua ví dụ sau:

sayHello() // => "Hello"

function sayHello() {
  console.log("Hello")
}

Bạn có thể call function declaration ở bất cứ đâu trong scope nó khởi tạo

Tuy nhiên function expression chỉ có thể gọi sau khi định nghĩa

sayHello() // => Uncaught ReferenceError: Cannot access 'sayHello' before initialization

const sayHello = function() {
  console.log("Hello")
}

Tùy theo thói quen của dev và rule của project hoặc team leader đặt ra mà có thể sử dụng 1 trong 2 cách define function này.

Tuy nhiên có 1 số trường hợp đặc biệt để sử dụng function expression

IIFE

Immediately Invoked Function Expressions hay 1 anonymous function được chạy ngay sau khi khởi tạo

(function() {
    console.log('Code runs!')
})();

// ES6
(() => {
    console.log('Code runs!')
})();

Callback

1 trường hợp sử dụng function expression nữa đó là dùng làm callback

buttonElement.addEventListener('click', function(e) {
    console.log('button is clicked!')
})

hoặc

array.map(item => {
  // do stuff to an item
})

Đây là trường hợp phổ biến sử dụng function expression vì chúng ta không cần biết đến function này trong toàn bộ scope

Tóm lại, có thể sử dụng linh hoạt 2 cách define function trên, nếu muốn 1 function có thể sử dụng linh hoạt nhiều nơi trong scope thì sử dụng function declaration còn nếu chỉ cần giới hạn trong 1 thời điểm sử dụng thì dùng function expression

Tham khảo

Tìm hiểu về Render Blocking CSS và đo page rendering time với Chrome Performance API

Sat, 12 Sep 2020 02:12:03 GMT

CSS được browser xem là 1 trong những render blocking resources - những tài nguyên mà trang của bạn bắt buộc phải tải thì người dùng mới có thể nhìn thấy nội dung được

Tại sao nên tránh Render Blocking CSS

Render blocking CSS sẽ làm chậm việc hiển thị website của bạn đến người dùng
Mỗi file CSS mà website của bạn tải sẽ tăng thêm thời gian vào first-paint của page, có nghĩa là user sẽ phải đợi lâu hơn để nhìn thấy content nếu trang của bạn phải tải nhiều CSS

CSS ảnh hưởng rất nhiều đến thời gian hiển thị trang

Khi bắt đầu tải trang, browser sẽ luôn tự động tải tất cả các file CSS, không quan tâm đến việc nó có block quá trình render hay không!

Vậy phải làm thế nào để hạn chế được render blocking css ?

Solutions

Nếu như bạn nhận thấy trang của mình có những CSS mà chỉ sử dụng trong 1 vài điều kiện nhất định ví dụ như style cho content bên trong 1 modal mà user phải click để open modal mới thấy, content bên trong tab không hiển thị đầu tiên, hoặc những style chỉ apply riêng cho large monitor hoặc mobile devices…

Thì đây là 1 số cách có thể giúp trang của bạn tải nhanh hơn

Sử dụng media attribute

Khi muốn load css vào web page của mình chúng ta sẽ sử dụng thẻ link như thế này

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet">
<link href="style.mobile.css" rel="stylesheet">

Browser sau khi load xong HTML sẽ tải thêm 3 file CSS này nữa và chỉ hiển thị nội dung sau khi đã tải xong tất cả

Tuy nhiên print.css chỉ dùng khi in document (Ctrl/Cmd + P) và style.mobile.css là những style chỉ apply trên mobile mà thôi

Trong trường hợp này chúng ta có thể sử dụng media attribute

<link href="style.css" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">
<link href="style.mobile.css" media="(max-width: 568px)" rel="stylesheet">

Lúc này browser sẽ hiểu rằng chỉ cần tải xong file style.css là ngay lập tức có thể hiển thị nội dung trang cho người dùng mà không cần biết 2 file còn lại đã tải xong hay chưa

Đối với link sử dụng media attribute:

media="print": những style trong file này sẽ chỉ apply khi in document, không cần cho render nên sẽ không block lần render đầu tiên khi tải trang
media="(max-width: 568px)": những style này chỉ apply trên những device với max-witdh = 568px và cũng không block lần render đầu tiên khi tải trang trên desktop/tablet device

Sử dụng media attribute chúng ta có thể điều chỉnh việc hiển thị trang theo các trường hợp cụ thể như: sau khi đã render xong, điều chỉnh kích thước màn hình, thay đổi hướng thiết bị (ngang/dọc)…

Giá trị của media bắt buộc phải là 1 media type hoặc media query, rất hữu ích khi cần load các external stylesheets - nó hỗ trợ browser lựa chọn được những CSS cần thiết nhất cho lần render đầu tiên

Combine css or inline css

1 cách khá hiệu quả là các bạn có thể để trực tiếp CSS vào trong 1 thẻ style trên header của document nếu CSS không quá to, cách này cải thiện performance rất tốt khi chỉ cần DOM load xong là có thể hiển thị ngay được rồi

Hoặc có thể hạn chế tải nhiều file CSS quá. Thông thường khi code các dev sẽ có xu hướng tách ra nhiều file CSS khác nhau theo component, module… để dễ quản lý, tuy nhiên việc load nhiều file CSS sẽ lâu hơn so với chỉ load 1 hoặc 2 file

1 trong những kĩ thuật giúp Gatsby site tải rất nhanh chính là Inline CSS

Performance API

Bây giờ chúng ta hãy thử đo đạc page rendering time sau khi áp dụng 1 số kĩ thuật để tránh Render Blocking CSS với Chrome Perfomance API nhé

Mình có viết 1 ví dụ đơn giản để các bạn có thể hiểu về Render Blocking CSS ở đây: https://hta218.github.io/render-blocking-css-example/

Trong ví dụ mình có load 2 file CSS và so sánh page rendering time với 2 màn hình có device-width lớn hơn và nhỏ hơn 800px

<link rel="stylesheet" href="tailwind.css" media="(min-width: 800px)" />
<link rel="stylesheet" href="bootstrap.css" media="(min-width: 800px)" />

Để sử dụng Performance API thì cần chú ý kiểm tra kĩ browser compatibility

if ("PerformanceObserver" in window) {
	try {
		// Create PerformanceObserver instance
		const perfObsever = new PerformanceObserver(perf => {
			const perfEntries = perf.getEntriesByType('paint');
			perfEntries.forEach(({ name, startTime }) => {
				// Get the result inside this callback
				console.log(`The time to ${name} was ${startTime} milliseconds.`);
			});
		})

		// observe "paint" event
		perfObsever.observe({ entryTypes: ["paint"] })
	} catch (err) {
		console.error(err)
	}
} else {
	// Remember to check the browser compatibility before using this API
	console.log("Performance API isn't supported!")
}

Có nhiều Performance metric khác nhau, trong trường hợp này mình sử dụng PerformancePaintTiming

Để thấy rõ hơn kết quả các bạn có thể mở chrome devtool lên, throttle internet và CPU speed cho giống với điều kiện ở máy user hơn nhé

Với màn hình >800px (ví dụ cho load tất cả các CSS trước first page render)

Chúng ta cần hơn 6 giây cho first paint (sau khi tất cả CSS load xong) - tương đương với user phải đợi 6s mới thấy nội dung của page

Với trường hợp chỉ cần load 1 file CSS cho first paint (các file còn lại vẫn được load nhưng không dùng đến hoặc không cần dùng cho lần render đầu tiên)

User nhìn thấy content sớm hơn 2 giây, có thể thấy page render ngay cả khi 2 file CSS còn lại vẫn chưa load xong

Kết quả đo đạc với Performance API được tổng hợp lại

Hoặc đơn giản hơn, các bạn có thể sử dụng trực tiếp PerformancePaintTiming API

if (window.performance) {
	const performance = window.performance;
	const perfEntries = performance.getEntriesByType('paint');

	perfEntries.forEach({ name, startTime } => {
		console.log(`The time to ${name} was ${startTime} milliseconds.`);
	});
} else {
	console.log("Performance timing isn't supported.");
}

Kết bài

Có thể thấy sự khác biệt rõ rệt với page rendering time, ảnh hưởng trực tiếp đến user’s experience khi webpage phải tải quá nhiều CSS không cần thiết, vì vậy chúng ta cần phải rất chú ý đến resource này.

Có nhiều biện pháp để tránh Render Blocking CSS như: sử dụng media type hoặc media query, combine CSS, inline CSS, những thay đổi này tuy nhỏ nhưng ảnh hưởng rất tốt đến perfomance

Tham khảo

Tích hợp Tailwind CSS vào React application

Sun, 30 Aug 2020 22:12:03 GMT

Tailwind CSS là 1 low-level CSS framework rất dễ tùy biến, không như những framework, UI Kits khác khi tập trung vào các pre-design components (buttons, cards, modals…) có thể giúp bạn phát triển nhanh ban đầu nhưng sau đó sẽ rất mất công để custom styling cho các component đó. Tailwind tập trung vào low-level utility classes (utility-first) giúp bạn tự build hoàn toàn design của mình mà không phải lo lắng về việc override các style có sẵn.

Khá giống với Bootstrap nhưng bộ utility class của Tailwind CSS phong phú hơn rất nhiều

Bài này mình sẽ hướng dẫn anh em cách để tích hợp Tailwind CSS vào React app nhé 😄 😄

Tạo react app

Cách đơn giản nhất để tạo react app là sử dụng create-react-app script với npx

npx create-react-app my-app && cd my-app

Sử dụng npx anh em có thể chạy create-react-app script mà không cần phải cài package này

Thêm dependencies

Cài đặt các dependency sau để set up Tailwind CSS

yarn add tailwindcss postcss-cli autoprefixer -D
## hoặc npm install tailwindcss postcss-cli autoprefixer --save-dev

Chỉ cần thêm vào devDependencies thôi nhé

Ở đây ngoài Tailwind CSS chúng ta cài thêm:

PostCSS: 1 công cụ để phân tích và chuyển đổi styling bằng các JS plugin, giúp bạn gợi ý CSS, hỗ trợ variables và mixins, biên dịch các CSS mới…
Autoprefixer: 1 plugin của PostCSS hỗ trợ việc thêm các vendor prefix(-webkit-, -moz-, -ms-, -o-,…) bằng cách lấy thông tin từ Can I Use để CSS bạn viết có thể tương thích ở nhiều trình duyệt khác nhau

Config PostCSS

PostCSS giúp quản lý và cấu hình việc build CSS.

Tạo file config:

touch postcss.config.js

Thêm config sau:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

Quá trình build sử dụng 2 plugin là tailwindcss và autoprefixer

Injecting Tailwind CSS

Tạo 1 sub-folder là styles trong folder src. Trong folder styles tạo file tailwind.css

Hoặc dùng command line:

mkdir src/styles && touch src/styles/tailwind.css

Import các module sau của Tailwind CSS

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwind.css

Folder chứa file tailwind.css các bạn có thể đặt tùy ý theo project của mình nhé, có thể là src/static, src/assets, src/styles …

Thêm build script

Mở file package.json, thêm build script sau (vào object scripts):

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

Script này sẽ sử dụng PostCSS CLI để build css dựa trên những config trong file tailwind.css với output (flag -o) là file main.css

Anh em có thể tùy ý chọn tên file và vị trí, ở đây mình để cả file input chứa config và output trong cùng 1 folder là src/styles

Bây giờ anh em có thể tự trigger build bằng lệnh:

yarn build:css
# hoặc npm run build:css

Sau khi config và build xong, project của bạn sẽ trông như thế này:

Để tiện hơn thì các bạn nên tích hợp build:css command vào script start và build của project, như vậy sẽ đảm bảo CSS luôn đc build lại theo những update mới nhất của mình mỗi lần start project:

"scripts": {
	"start": "npm run build:css && react-scripts start",
	"build": "npm run build:css && react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject",
	"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
}

Tất cả scripts sau khi hoàn thiện

Bây giờ để build CSS và start project thì chỉ cần yarn start là đủ.

Sử dụng trong react component

Import CSS đã build vào file start của project (của mình là index.js):

import './styles/main.css';
// ... other imports

index.js

Tạo 1 component cơ bản:

import React from 'react';

function App() {
	return <div className="flex justify-center pt-8">
		<div className="max-w-sm w-full lg:max-w-full lg:flex shadow-lg">
			<div className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style={{ backgroundImage: `url('https://image-us.24h.com.vn/upload/1-2020/images/2020-02-06/kodfd-1580928361-474-width640height480.jpg')` }} title="Woman holding a mug">
			</div>
			<div className="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
				<div className="mb-8">
				<p className="text-sm text-gray-600 flex items-center">Latest News</p>
					<div className="text-gray-900 font-bold text-xl mb-2">Messi is moving to Manchester City</div>
					<p className="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
				</div>
				<div className="flex items-center">
					<img className="w-10 h-10 rounded-full mr-4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRG2WOlZ4KLuNN1ksjNOmh6oZ091IUhJiZD7w&usqp=CAU" alt="Avatar of Jonathan Reinink" />
					<div className="text-sm">
						<p className="text-gray-900 leading-none">Jonathan Reinink</p>
						<p className="text-gray-600">Aug 18</p>
					</div>
				</div>
			</div>
		</div>
	</div>;
}

export default App;

App.js

Kết quả sẽ trông như thế này:

Kết bài

Hi vọng anh em có thể tích hợp và sử dụng Tailwind CSS trong project của mình qua tutorial này, cá nhân mình thấy đây là 1 framework khá đơn giản và dễ sử dụng, chất lượng ổn.

Anh em để lại nhận xét cho mình ở dưới comment nhé :D

Tham khảo

Set up path aliases trong Node.js + Typescript

Wed, 26 Aug 2020 22:12:03 GMT

Dạo gần đây mình đang code 1 pet project sử dụng nodejs ở back-end, vừa để tự học thêm trong thời gian rảnh vừa khỏi quên kiến thức, thì gặp phải 1 vấn để rất nhức nhối liên quan đến đường dẫn (path) mà có thể anh em đã gặp phải nhiều rồi…

import { saveUser } from '../../../../../models/User'
import homeController from '../../../../../controllers/home'

Code này hẳn đã khiến nhiều anh em đau đầu khi không thể biết được cần phải đi ra, đi vào bao nhiêu folder để tìm đúng file mong muốn 😭😭, nếu chẳng may cần chuyển chỗ 1 folder thì sẽ phải update lại path ở tất cả những file import module đó 😤

Nhưng nếu chúng ta có thể định nghĩa alias (hiểu đơn giản là shortcut) cho những module thường xuyên phải import trong toàn bộ project thì sao?

Ví dụ như này:

import { saveUser } from '@models/User'
import homeController from '@controllers/home'

Trong đó:

@models tương đương với module ./src/models/*
@controllers tương đương với module ./src/controllers/*

Giải pháp hoàn toàn đơn giản với module-alias và config tsconfig.json. Anh em làm theo hướng dẫn để set up nhé

Update tsconfig.json

Mở file tsconfig.json lên và thêm vào những config sau vào compilerOptions object:

"compilerOptions": {
	// other configs...
	"baseUrl": "./src",
	"paths": {
			"*": [
					"node_modules/*",
					"src/types/*"
			],
			"@controllers/*": [
					"controllers/*"
			],
			"@models/*": [
					"models/*"
			]
	}
}

Trong đó @controllers hay @models chính là alias cho module của các bạn (có thể dùng bất cứ naming convention nào tùy ý, không cần thiết phải chứa @ ở đầu, đó chỉ là prefix mình dùng để dễ phân biệt thôi)

Bây giờ bạn hoàn toàn có thể sử dụng alias đã config trong project rồi, nhưng JS sẽ không resolve được module import với lỗi sau

[Node] Error: Cannot find module ‘@models/User’

Cài đặt module-alias package

Module này sẽ giúp resolve các path alias trong file JS sau khi biên dịch

Cài đặt:

npm i --save module-alias # hoặc yarn add module-alias

Config trong package.json:
```
"_moduleAliases": {
	"@models": "dist/models",
	"@controllers": "dist/controllers"
}
```
Lưu ý rằng dist/ là folder chứa code sau khi build của các bạn nhé (tùy vào config nó có thể là dist/, build/…)
Cuối cùng là register module vào app của anh em
```
import 'module-alias/register';
```
Chỉ cần import 1 lần vào file start của project thôi nhé (có thể là index.ts, app.ts, server.ts…)

🎉🎉🎉 Done

Bây giờ anh em chỉ cần reload IDE, start project và có thể xài alias thoải mái rồi nhé.

VS Code support luôn tính năng này bằng cách đọc file tsconfig.json, chỉ cần reload lại là được.

Chúc anh em thành công!

Tham khảo

Việc tìm dev như thế nào? [Part 2] - Phỏng vấn, nhận offer và đi làm

Fri, 31 Jul 2020 00:00:00 GMT

Phần trước mình đã chia sẻ với anh em cách chuẩn bị profile, viết CV, nhận job description và apply vào vị trí mình mong muốn, nếu được gọi phỏng vấn thì anh em có thể tham khảo các kinh nghiệm phỏng vấn, deal lương của mình để nhận được offer tốt nhé.

Mình chọn được 1 số vị trí phù hợp để ứng tuyển và nhận được lời mời phỏng vấn ngay

1 vài chiếc interview

Chuẩn bị và sắp xếp thời gian

Nếu anh em phỏng vấn offline thì chỉ nên hẹn 1 lần phỏng vấn 1 buổi thôi nhé, thời gian nói chuyện làm quen, test, phỏng vấn là khá mất thời gian đấy. Mình không thể đảm bảo được sẽ mất 1 hay 2 tiếng nên nếu mất quá nhiều thời gian là đến muộn buổi phỏng vấn tiếp theo thì dễ bị 1 điểm trừ nhé 😅
Vì mình phỏng vấn vào đợt cách ly xã hội, hầu hết công ty đều work from home nên tất cả đều là online interview, nếu anh em cũng phỏng vấn online thì có thể sắp xếp được 2 shot phỏng vấn 1 buổi do không mất thời gian đi lại và chuẩn bị nhiều, chú ý hẹn lịch cách nhau để đủ thời gian nhé
Nếu có nhiều buổi phỏng vấn thì anh em nên chủ động note lại vào calendar, tải cả app để nhắc nhở mình khỏi quên
Tốt nhất nên sắp xếp phỏng vấn trong 1,2 tuần nếu anh em đã nghỉ hẳn việc nhé, nghỉ nhiều thì không có tiền tiêu :)). Phỏng vấn trong lúc còn đi làm thì nên cách ngày ra không có sếp cũ quạo nha 😅😅
Nên tìm hiểu trước về công ty, xem sản phẩm họ đang làm là gì, sử dụng công nghệ nào… có nơi sẽ hỏi ứng viên xem có biết mình vào sẽ làm sản phẩm gì không, chuẩn bị trước sẽ giúp bạn ghi điểm trong tình huống này

Vòng gửi xe

1 số công ty sẽ gửi bài test trước yêu cầu làm trong 1 vài ngày, hoặc cho test ngay tại buổi phỏng vấn, kinh nghiệm của mình phần này là anh em hãy coi đây như 1 task bình thường lúc mình đi làm, hỏi người phỏng vấn bạn thật kĩ để hiểu rõ requirements

Anh em hãy xem người phỏng vấn như 1 đồng nghiệp của mình, hỏi ngay nếu cần bất kì sợ giúp đỡ nào. Bạn chắc chắn sẽ được đánh giá cao hơn nếu trao đổi với người phỏng vấn thay vì chỉ ngồi im code hối hả từ đầu đến cuối

Round 1️⃣

Sau khi pass bài test sẽ đến technical interview, bạn sẽ được phỏng vấn về kĩ thuật với Senior/Team Leader/Tech Lead/CTO

Có công ty sẽ chỉ phỏng vấn bằng tiếng việt, có công ty cả việt cả anh, thông thường họ sẽ hỏi mình có phỏng vấn được bằng tiếng anh không, hoặc sẽ làm bài test tiếng anh trước. Nếu có thể mình khuyên các bạn nên phỏng vấn bằng tiếng anh nhé.

Mình có 2 chiếc interview full tiếng anh, còn lại là technical tiếng việt sau đó sẽ có hr phỏng vấn tiếng anh (chủ đề tự do). Làm việc trong môi trường tiếng anh sẽ rất có ích cho sự nghiệp của bạn sau này (mình hiểu rất rõ vì hiện giờ sếp mình người Nga, ngày nào đi làm cũng nói tiếng anh ~~gãy~~ với ổng hết…)

Trong lúc phỏng vấn thì anh em chú ý có gì nói nấy thôi nhé, hãy nói hết ý hiểu của mình khi được hỏi, không chém gió, không à ừ mất thời gian, nếu câu nào mình không biết, không nhớ hoặc quá khó cứ thẳng thắn nói rằng mình không trả lời được

Thường chỉ có 1 vòng phỏng vấn technical này thôi, nên đây là cơ hội duy nhất để người phỏng vấn đánh giá trình độ của bạn, vì vậy phần nào mà mình nắm chắc thì hãy trình bày tự tin, đầy đủ, chi tiết vào nhé!

Anh em thấy đó, vòng phỏng vấn technical cũng không có gì phức tạp cả, cứ thoải mái ra là phỏng vấn ngon thôi 👏 👏

Chém thế chứ thật ra cũng run đấy 😅 => anh em đi phỏng vấn nhiều vào là sẽ tự tin ngay nhé 😎

Sau vòng này thường là các công ty sẽ trả lời xem mình có pass hay không, còn nếu anh em gặp các công ty không có tâm chờ mãi không thấy hr mail trả lời hay contact gì thì chắc suất là tạch rồi nhé

Công ty có tâm thì cho dù reject cũng luôn báo cho ứng viên

Round 2️⃣

Nếu hr contact anh em phỏng vấn vòng 2 thì chúc mừng anh em, đến đây thì 96.69% là pass nhé

Vòng này thường sẽ là hr, pm, ceo, cto (tùy công ty)… sẽ join phỏng vấn cùng (không hỏi gì liên quan đến kĩ thuật) hầu hết đều là các câu hỏi để tìm hiểu thêm về mình, xem khả năng giao tiếp, tính cách, thái độ làm việc có hợp với văn hóa công ty hay không

Phần này thì mình cứ ngoan ngoãn đối đáp thôi là ổn nhé (sếp nào cũng muốn nhân viên ngoan mà 😅)

🌟 1 điểm chú ý là ở vòng này thường bạn sẽ được hỏi về mức lương mong muốn (expected salary), theo kinh nghiệm của mình, anh em đừng nên đưa ra 1 con số cụ thể nhé! Hãy trả lời bằng khoảng lương mà anh em mong muốn. Ví dụ muốn lương $1k thì hãy trả lời là “mức lương mong muốn của em là từ 1k - 1k3”, thường thì công ty chỉ trả mức minimum mà mình yêu cầu thôi nên anh em chú ý nhé

Sau đó sẽ hỏi đến ngày anh em có thể đi làm được, là mình thì sẽ không đi làm luôn mà chọn nghỉ 1,2 tuần cho thoải mái, tranh thủ đi đu đưa với gấu cho sướng 😁, anh em cũng nên nghỉ ngơi cho tinh thần thoải mái và chuẩn bị trước khi đi làm nhé!

Quy trình phỏng vấn mỗi công ty mỗi khác nhưng thông thường sẽ như trên, quan trọng nhất vẫn là anh em chuẩn bị kiến thức cho công việc mình làm thật chắc, tất cả những thứ khác chỉ là phụ thôi nhưng đều nên có để bản thân được đánh giá cao hơn, vì dev đâu phải chỉ code đâu đúng không? 😁

Deal lương cao ngon ntn?

Như mình đã nói, anh em nên đưa ra range lương mà mình muốn chứ không nên chỉ đưa ra 1 con số, hầu như các công ty sẽ không trả mức mà anh em mong muốn đâu (trừ khi anh em muốn quá ít thi ngta sẽ gật đầu cái rụp ngay nha 😅)
Hãy sẵn sàng deal lương nếu cảm thấy công ty trả thấp với khả năng của mình, đừng ngần ngại nói rằng mình mong muốn mức cao hơn họ trả, tuy nhiên lý do anh em đưa ra phải là hợp lý nhé, ví dụ như so sánh với mức lương cũ, hoặc 1 công ty khác có offer cao hơn 1 chút nhưng mà mình muốn làm ở đây hơn! Chắc chắn anh em sẽ được trả cao hơn nếu chịu khó negotiate nhé!

Làm sao tìm được công ty tốt?

Sự nghiệp của anh em phụ thuộc rất nhiều vào nơi anh em làm việc, vậy làm sao để tìm được công ty tốt?

Xem review: anh em hãy tìm hiểu ngay về công ty của mình qua các kênh review như reviewcongty, itviec, không nên quá tin vì nhiều công ty drama lắm, nhưng chỗ nào mà chửi nhiều quá thì anh em nên né nha vì công ty ngon thì ít khi ngta lên những chỗ thế này để khen, nhưng công ty mà nhiều người vào chê thì có vấn đề đấy. Anh em cũng có thể hỏi người quen làm ở đây, sẽ đáng tin cậy hơn nhiều nhé!
Hỏi người phỏng vấn: thường ngay sau khi phỏng vấn xong anh em sẽ được hỏi xem có thắc mắc hay câu hỏi gì không, lúc này anh em hãy cứ mạnh dạn hỏi những thứ sau nhé:
- Xin nhận xét của người phỏng vấn bạn về khả năng của mình sau khi phỏng vấn, đây chính là sếp của bạn sau này, người hằng ngày bạn sẽ làm việc, nói chuyện, gặp mặt nhiều hơn cả gặp người yêu. Hỏi và chú ý cách họ phỏng vấn mình xem sếp có phải là 1 người vui vẻ, thoải mái, biết quan tâm không? Bạn không biết thì sẵn sàng chỉ cho bạn chứ không chê bai gì không?
  Đúng người thì anh em mới làm việc lâu dài được nhé, chứ gặp sếp khó đăm đăm, hay để ý, 3 bữa lại bảo e ở lại làm thêm 1 tý hoặc đến giờ về thì vào họp với ~~chị~~ anh thì khó làm việc cùng lắm đấy!
- Hỏi về chính sách lương, thưởng của công ty, công ty có lương tháng 13 không? Benefit ntn? Bao nhiêu ngày phép 1 năm? Có remote working không? công ty đóng bảo hiểm và thuế thu nhập cá nhân đầy đủ không?
- Hỏi về thời gian làm việc của team, có làm sáng thứ 7 không? công ty có hay OT không? Nếu OT thì trả lương cho nhân viên ntn?
Nhà tuyển dụng sẽ đánh giá cao khi bạn hỏi vì nó thể hiện sự nghiêm túc của bạn với công việc, nếu chọn thì bạn hãy tìm hiểu kĩ trước khi nhận offer nhé!
Đánh giá qua hr: anh em hãy xem quá trình tiếp cận của hr, có quan tâm đến mình không, JD có chuyên nghiệp không, hẹn giờ có chuẩn không, sau buổi phỏng vấn có hỏi han xem mình phỏng vấn thế nào… nếu họ được đào tạo ở công ty chuyên nghiệp thì chắc chắn sẽ luôn rất quan tâm đến ứng viên nhé.

Kết bài

Hi vọng qua bài này anh em có thể nắm được quy trình tuyển dụng, biết cách chuẩn bị, trả lời phỏng vấn sao cho tốt, làm thế nào để deal lương ngon hay chọn được công ty tốt để phát triển sự nghiệp.

Tuy nhu cầu tuyền dụng luôn rất cao nhưng dev cũng có dev this dev that, anh em hãy chú ý update kiến thức của mình liên tục, viết 1 profile đẹp, chăm đi phỏng vấn với 1 sự chuẩn bị kĩ càng và thái độ nghiêm túc thì chắc chắn sẽ luôn tìm được việc xịn lương cao!

Hãy để công việc luôn tìm đến với dev nhé!

Việc tìm dev như thế nào? [Part 1] - Chuẩn bị profile

Tue, 28 Jul 2020 00:00:00 GMT

Có thể anh em đã chưa biết, mình mới chuyển công ty sang làm tại Cốc Cốc, trải qua 2 tháng thử việc hiện nay mình đã là 1 nhân viên chính thức 🎉 🎉 🎉

Để có đc cơ hội này mình cũng đã trải qua cơ số cuộc phỏng vấn hay có, dở có. Bài này mình muốn chia sẻ với anh em cách chuẩn bị profile + phỏng vấn để có đc 1 công việc tốt nhé 😎!

Theo mình thấy, nhu cầu tuyển dụng ngành IT hiện nay là rất cao, sự thiếu hụt nhân lực cung < cầu sẽ còn kéo dài, do vậy chỉ cần có trình độ lập trình trên trung bình là hoàn toàn có thể tìm đc rất nhiều vị trí ứng tuyển với mức lương mình cho là ổn so với các ngành khác mà không cần nhờ vả hay quan hệ gì.

Vậy làm sao để dev tìm đc công việc mà mình mong muốn 🤔?

Câu trả lời chính là ở cách bạn chuẩn bị chiếc profile của mình!

Viết CV

CV chính là thứ tối thiểu nhưng lại cực kì quan trọng để bạn có đc 1 công việc, nếu chưa có bạn có thể google ngay từ khóa software developer/software engineer cv template có rất nhiều mẫu để anh em có thể tham khảo và viết theo, tuy nhiên cần chú ý lựa chọn mẫu nào không quá màu mè, chỉ cần đơn giản, bố cục rõ ràng, dễ nhìn dễ đọc là đủ…

Nên viết CV như thế nào?

Do’s 👍

CV của bạn phải có đầy đủ nội dung cần thiết cho nhà tuyển dụng, theo mình 2 phần quan trọng nhất là kỹ năng (skill) và kinh nghiệm làm việc (working experiences), các bạn hãy trình bày hết những skill mà mình có (nhớ là chỉ những gì mình biết thôi nha, chém gió đến lúc người ta hỏi không trả lời đc là xấu hổ lắm đấy 😁😁), kinh nghiệm làm việc ở đây chính là những project mà bạn đã kinh qua ở các cty trc, hay kể cả đồ án, bài tập lớn trong trường đại học.
Bạn đã làm những gì, phụ trách công việc nào, có thành quả gì không?…
Sắp xếp nội dung trong cv sao cho hợp lý, Kỹ năng và Kinh nghiệm làm việc là 2 phần đáng chú ý nhất, hãy xếp lên đầu, các phần còn lại như học tập, thành tích, side project hay sở thích thì hãy xếp xuống cuối, vì chúng k đc nhiều sự quan tâm, với mình những phần này cho vào chỉ để cv đẹp hơn thôi.
Ngoài ra những thông tin thêm như điểm số, thành tích học tập, giải thưởng trong các cuộc thi hoặc recommendations từ ex-senior/ex-leader cũng là 1 lợi thế (cái này thì mình k có 😅)
Nếu có khả năng tốt nhất nên viết CV của bạn bằng tiếng anh, theo mình đây là 1 điểm cộng lớn cho dev, vì ngành này tiếng anh là thực sự quan trọng

Don’ts 👎

Đừng kể tất cả những công nghệ mà bạn từng tiếp xúc, chỉ list những thứ mình đã kinh qua và có kinh nghiệm làm việc. Nếu bạn k hiểu về 1 skill mình viết trong cv thì sẽ k thể trả lời khi đc nhà tuyển dụng hỏi
Không thêm thông tin dư thừa: các tài khoản mạng xã hội như facebook hay instagram không nên đưa vào vì không ai quan tâm đến chúng cả thậm chí còn thể hiện sự thiếu chuyên nghiệp với nhà tuyển dụng. Các bạn chỉ nên để những profile cá nhân như Github, Linkedin hay các kênh contact cho công việc như Skype hay Telegram…
Nếu để ảnh trong cv đừng nên để ảnh thiếu nghiêm túc, hãy chọn ảnh nghiêm túc của bạn hoặc có thể k cần ảnh trong cv, ng ta quan tâm đến bạn có làm đc việc k chứ k ai quan tâm bạn có đẹp chai khoai to hay k đâu (trừ vợ 😸)
HTML: ⭐⭐⭐⭐⭐
CSS: ⭐⭐⭐⭐⭐⭐⭐
JavaScript: ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Progress bars or rankings to show off levels of skill are bullshit, never use them!

Nếu k muốn tự viết anh em hoàn toàn có thể tìm các cv generator tool, tuy nhiên mình khuyến khích anh em tự viết vì sẽ tiện nhất để customize theo ý muốn.

Tìm cơ hội

Mông má xong rồi thì ra chợ tìm mối thôi!

Các kênh tuyển dụng là nơi dễ tìm kiếm cơ hội nhất, hãy tạo tài khoản cho mình ở 1 số kênh tuyển dụng lớn như:

1 số kênh bằng tiếng anh:

Chú ý tạo profile đầy đủ, upload cv và điền công việc mong muốn. Có thể bật thông báo hoặc subscribe để nhận thông tin về mail.

Đảm bảo ngày nào cũng có các em hr xinh tươi gọi điện, nhắn tin mời về làm việc

Kinh nghiệm bản thân

Cá nhân mình thấy quan trọng nhất chính là Linkedin, anh em hãy chú ý chuẩn bị 1 profile thật sáng sủa và đầy đủ ở đây (thậm chí còn có thể export cv từ profile Linkedin hoặc import profile sang các kênh tuyển dụng khác)

Hãy connect với thật nhiều người trong ngành, dev, hr, sale… mở rộng connection sẽ giúp các bạn nhận đc nhiều cơ hội tốt hơn.

Bật chế độ Open for opportunity để hr tìm đến bạn dễ dàng hơn (tuy nhiên khi có việc rồi anh em có thể tắt đi, vì các em hr spam tin nhắn và gọi điện nhiều lắm)

Để chủ động hơn trong tìm kiếm cơ hội anh em có thể post bài như mình

Linkedin thực sự xịn khi giúp dev và hr connect

Sau đó là hàng loạt tin nhắn và cuộc gọi của hr trên mọi mặt trận

Kinh nghiệm của mình là các bạn hãy hỏi hr đưa Job Description (JD) trc, các bạn nên đọc kĩ để xem có fit với khả năng của mình k, cũng như công việc có phải là những việc thử thách, mình muốn làm hay k, công nghệ có phù hợp k…

Tiếp theo hỏi range lương cho vị trí đó ở cty, nếu ~~cao~~ phù hợp thì mình apply ngay thôi.

Khi đã xin JD rồi mà thấy k phù hợp thì các bạn cũng nên trả lời hr nhé, vì dù gì họ cũng đã mất công đưa thông tin cho mình rồi 😃.

JD mà mình nhận đc (vẫn còn nhiều nữa 😅)

Các bạn thấy đấy, chỉ cần chuẩn bị 1 profile tốt và biết pr bản thân 1 chút là cơ hội đã tìm đến với mình rất nhiều rồi.

Hi vọng sau phần này anh em nào đang có ý định nhảy việc sẽ tút tát lại profile của mình để có nhiều cơ hội hơn, phần tiếp theo mình sẽ chia sẻ quá trình phỏng vấn, cách chọn công ty, deal lương và xách mông đi làm nhé!

Chia tay Bravebits - Từ Junior Developer đến Developer

Wed, 29 Apr 2020 16:20:03 GMT

Mình mới kết thúc 1 năm 8 tháng ~~fix bug~~ học tập và làm việc ở Bravebits (12/08/2018 - 17/04/2020)

Dưới đây là đôi lời tâm sự chia sẻ về quá trình làm việc ở BB, nơi mình đã học đc vô số điểu bổ ích cả về công việc và cuộc sống.

Phỏng vấn như đi chơi

Cuối tháng 7/2018 mình nghỉ làm giảng viên lập trình tại MindX Technology & Startup School để tập trung vào con đường ~~fix bug~~ trở thành 1 lập trình viên chuyên nghiệp.

Theo dõi fanpage của BB từ ngày mới học lập trình đến nay mới có cơ hội nộp (mặc dù trc đó đã interview ở 1 số cty và cũng định bụng vào chỗ khác rồi 😅), đc vài hôm thì anh CEO mail mời đến phỏng vấn…

Ấn tượng đầu tiên là toà nhà tìm khó vãi (cái này nhiều ng tìm k đc chứ k phải mình ~~ngu~~ k biết tìm nha). Đến nơi thì đc anh Phong (CTO) và Minh (Technical Leader) đưa vào bếp phỏng vấn.

Không như các cty khác hỏi mình rất nhiều về kỹ thuật, anh Phong và Minh chả hỏi gì chỉ xem github, đọc code và hỏi qua về các thứ mình đã làm. Anh Phong còn chỉ chú ý ngồi chơi thử game mình viết. Sau đó là: “Em có chơi game k”, “Có thích đi phượt k”, “Có nhậu không”…

Phỏng vấn về mình thấy hơi thiếu chuyên nghiệp nên k có ý định vào, nhưng mấy hôm sau thì nhận đc tin cty mình thích reject (giờ nghĩ lại cũng thấy may) và thêm nữa anh CEO đưa ra offer 1X.000.000 (x > 1), với mình là ổn cho 1 sinh viên mới ra trường và thế là mối duyên tình với BB bắt đầu…

Đi làm

Mình (áo kẻ) trong 1 buổi họp cùng team

Chính thức bắt đầu 1 cuộc sống giờ giấc, healthy và balance. Tháng đầu tiên mình đc giao học công nghệ, làm quen với app. Cảm thấy khá may mắn vì những thứ đc học đều là những thứ mình thích, sản phẩm chính (PageFly - top 3 page builder app, >25k users 👏) khá xịn công việc lại đc support bởi những anh em có rất nhiều kinh nghiệm và làm việc toàn chat với khách tây nên mấy tháng đầu kiến thức và trình tiếng anh của mình tăng vèo vèo…

Set up những ngày đầu đi làm

Công ty chu cấp đầy đủ trang thiết bị (Mac, phụ kiện …) cho anh em làm việc, cơm công ty (gần bằng cơm gấu nhà mình nấu) rất ngon ~~vào mấy tháng mà tăng 5kg 🐷~~, lại thêm có sẵn bàn bóng bàn, máy PS cho anh em giải trí.

Các xếp 3,4 tháng 1 lần lại tổ chức đi chơi, nhậu… thay đổi không khí

Cao bằng - Tam đảo - Quy nhơn

SVĐ Mỹ Đình - VN vs Malay

Facebook iD8 - Singapore

Quá trình làm việc cứ đều như vắt tranh, 8h đến công ty mở máy tính ra ~~lướt youtube~~ check Crisp support khách hàng, trong ngày tập trung vào ~~fix bug~~ dev các feature mới, thỉnh thoảng ~~check fb~~ hỗ trợ đội support, chiều đến lại code, họp, ăn rồi ~~đá pes~~ về…

BB Choice Awards 2019

Đồng nghiệp

Ở BB có lẽ con người chính là nhân tố đáng trân trọng nhất, mình rất may mắn vì đã đc cùng làm việc với những người anh em tài giỏi, tốt bụng

Anh Quang (PM) - không chơi fb

Vịnh bắc bộ chưa tìm được người giỏi CSS hơn anh

Một người xếp tốt nhất từ trc đến giờ đc làm việc cùng, tuy anh hơi già và ít tóc nhưng anh luôn quan tâm đến anh em, thường xuyên hỏi thăm công việc, cuộc sống và rất chu đáo với anh em.

Không hiểu anh kén chọn hay sao mà tận đầu năm nay mới thấy lấy vợ, chúc anh chị trăm năm hạnh phúc sớm sinh quý tử 👦.

Minh Phan (Technical Leader)

Có thể nói Minh là người mà mình ấn tượng nhất khi vào công ty, đẹp chai (khoai bé hơn mình), tài giỏi, luôn đảm bảo sự tin tưởng cho anh em trong việc đặc biệt là khả năng học hỏi và đáp ứng công nghệ mới là rất nhanh, Minh luôn là hình mẫu để mình học tập.

Và những người anh em trên bến dưới thuyền khác

Anh Phong - Anh Dũng - Liquid Leader, Bảo - Hưởng

Duy Anh - Hùng - Việt Anh, Anh Quyết - Trưởng phòng IT

Công ty nhân viên ít nhưng rất nhiều leader 😆😆

Kết bài

Chia tay view đẹp từ văn phòng

Khen thì nhiều nhưng sạn thì cũng cũng có 1 ít: nhiều lúc lương thưởng chưa đc hợp lý, cũng có đồng nghiệp this đồng nghiệp that, có những đợt anh em phải OT nhiều. Công ty bé nên dev đôi lúc phải cân thêm những việc khác k tập trung đc vào code, cty chưa biết giữ người giỏi…

Tuy nhiên mình nghĩ công ty nào thì cũng có sạn cả thôi, quan trọng là mình sống chung với nó ntn.

Gần 2 năm làm việc, buồn ít mà vui thì nhiều, mình đã học hỏi và phát triển bản thân hơn cả trong công việc và cuộc sống, từ 1 junior dev đến nay cũng đã đủ tự tin để xoá chữ ~~junior~~ trong CV của mình.

Chúc các anh chị em ở lại luôn mạnh giỏi, thành công, chúc công ty phát triển hơn nữa 📈

Tạm biệt Bravebits 👋 👋 👋

Deploy và cấu hình website trên namecheap trong vòng 1 nốt nhạc [Part 2]

Sat, 25 Apr 2020 16:20:03 GMT

Ở phần trước mình đã hướng dẫn anh em mua và connect domain với hosting, activate SSL Certificate.

Phần này mình sẽ hướng dẫn cách đẩy code lên server để website go live nhé 🚀

Trên server có những gì 👀?

Để tìm hiểu cấu trúc folder trên server anh em vào cPanel (bài trc mình có hướng dẫn cách vào). Mở File Manager trong section Files

Đây chính là cấu trúc thư mục trên server! By default mình sẽ ở root directory là /home/<cpanel-username>

Folder chúng ta cần quan tâm là ./public_html, đây là nơi chứa toàn bộ source code (html, css, js) của trang. Mục tiêu chính là đưa toàn bộ file code lên đây.

File Manager cho phép upload trực tiếp file lên nhưng k cho upload folder 💆. Chính vì vậy mình sử dụng 1 tool đc namecheap recommend là FileZilla.

Authorize FileZilla

FileZilla sẽ kết nối và 🚚 lên server thông qua việc truy cập đến server bằng FTP (File Transfer Protocol).

Để 1 middle-man 👷 có thể giúp chúng ta đưa file lên server, nghiễm nhiên cần cấp quyền cho tool đó => cần tạo 1 FTP Account, FileZilla sẽ dùng tài khoản này để đưa code lên server cho chúng ta.

Tạo 1 FTP Account rất đơn giản:

Vào cPanel, click FPT Accounts trong section Files.
Nhập username, password (chú ý đừng quên nhé 😅).

Note ⚠️: 1 điểm cần chú ý khi tạo FTP Account là anh em cần để access-directory cho account này là root-directory nhé, không thì account này sẽ k có quyền access vào ./public_html folder đâu 😅.

Setup FileZilla

Sau khi đã download và cài đặt FileZilla, chúng ta sẽ connect đến server bằng FTP Account vừa tạo.

Quick connect là cách đơn giản nhất để connect đến server, anh em cần 4 thông tin:

Host name: ftpes://<host-name> (đừng quên prefix ftpes:// nhé!)

(Host name ở ngay trên URL trong cPanel).

Username: chính là FTP Account anh em vừa tạo, với format: <ftp-account-name>@<your-domain>
Password
Port: auto là 21.

Cung cấp đủ thông tin rồi click Quickconnect. Phải thấy tín hiệu successful thì mới đc nhé.

(Đừng giật mình khi thấy mất port nhé, FileZilla tự xoá đấy 😤)

Đẩy code lên server

Phần phức tạp nhất đã xong 🙈 🙉, bây giờ đẩy code lên server thôi!

Trong FileZilla gồm 2 phần:

Local site: toàn bộ thư mục trong máy, anh em tìm đến folder chứa code của mình (chú ý là phần code đã build nhé) - trong trường hợp này của mình là folder ./public (có thể là ./build, ./dist, ./public … tuỳ theo config app)
Remote site: toàn bộ folder trên server, anh em tìm đến ./public_html.

Chọn tất cả file ở Local và kéo sang Remote là … xong 🎉

Bây giờ chỉ việc mở site của mình ra kiểm tra thành quả rồi fix lỗi typo thôi 😆😆😆

Two Factor Authentication (Optional)

Two Factor Authentication (2FA) hay bảo mật 2 lớp (hoàn toàn free từ namecheap) là việc thêm 1 lớp bảo mật cho tài khoản namecheap (phải qua đc cả 2 lớp mới truy cập đc resource của mình - sẽ k lo lắng nếu chẳng may bị mất account vì lớp bảo mật thứ 2 nằm trên 1 device khác).

Lớp thứ nhất chính là username/password lớp thứ 2 có thể chọn 1 trong nhiều cách:

U2F (Universal 2nd Factor): sử dụng 1 physical device giống như 1 chiếc chìa khoá để bảo mật.
TOTP (Time-based One-Time Password): sử dụng 1 password ngắn hạn trên 1 device khác thông qua Authentication app như: Google Authenticator, Authy …
Text Message Authentication: thông qua tin nhắn trên điện thoại.

Mình chọn sử dụng TOTP thông qua app Google Authenticator.

Anh em tải app về điện thoại rồi vào cPanel mở Two Factor Authentication trong section Security, scan QR Code, Done!

Mỗi lần đăng nhập namecheap sẽ hỏi thêm TOTP từ app để bảo an toàn.

Kết bài

Hi vọng tutorial này giúp anh em hiểu thêm về server và có thể tự host 1 trang của riêng mình.

Nếu k muốn mua chúng ta hoàn toàn có thể sử dụng các Free Hosting Service khác như: Github Page, Heroku, Netlify, Zeit Now… (đều có hỗ trợ build tool và config đầy đủ, chỉ cần connect source code là xong).

Anh em có suy nghĩ gì thì để lại dưới phần comment nhé! (Email chỉ để generate Gravatar thôi, mình k spam gì đâu 😉).

Tham khảo

Deploy và cấu hình website trên namecheap trong vòng 1 nốt nhạc [Part 1]

Thu, 23 Apr 2020 16:20:03 GMT

Trước giờ mình luôn muốn sở hữu 1 site cá nhân, nhưng vì mình ~~lười~~ không có thời gian nên đợt này nghỉ việc, ở nhà cách ly mới tìm hiểu để làm đc.

Bài này mình chỉ hướng dẫn anh em cách config domain và web hosting mua trên namecheap (nên mặc định anh em đã có source code của riêng mình rồi nhé 🗿)

Tại sao có tutorial này?

Mặc dù namecheap đã có hướng dẫn đầy đủ để build 1 website from scratch nhưng bơi 🏊 trong 1 đống document là k dễ dàng gì.

Nên mình viết tutorial này để chia sẻ lại những gì mình đã làm và tìm hiểu trong 2 ngày để ~~mình xem lại nhỡ sau này quên~~ giúp anh em có thể tự config site của mình nhanh hơn nhé 😄.

Để có 1 site hoàn chỉnh cần những gì?

Lúc đầu mình nghĩ chỉ cần mua 1 tên miền (domain) rồi đẩy code lên đó là xong. Nhưng k phải thế, 3 thứ cơ bản để chạy 1 website bao gồm: domain name, hosting và platform

Domain name 🔍: là địa chỉ website của mình, vd: pondhub.com, leohuynh.dev … Có thể hiểu đây như là địa chỉ nhà của mình, thay cho địa chỉ ip giúp ng khác dễ dàng tìm kiếm.
Hosting 🏠: là nơi lưu trữ toàn bộ data và thông tin về website.

— Web hosting, in the simplest term, is a remote hard drive connected to your computer by (you guessed it) the Internet.

Nếu domain là địa chỉ nhà thì hosting chính là ngôi nhà của mình.

Platform 💻: là những công cụ để build trang web, sản phẩm chính là phần source code của website.

=> cần mua domain và hosting để có 1 trang hoàn chỉnh.

Mình quyết định mua cả 2 trên namecheap ~~do chưa có nhiều kinh nghiệm~~ cho tiện config và có gì còn dễ hỏi support bên họ 😄.

Anh em lên https://www.namecheap.com/domains/ (nhớ tạo account trc nhé), search domain, click Add To Cart thì namecheap sẽ gợi ý mua cùng Web Hosting và PositiveSSL (cái này để bảo mật cho site của mình, giải thích rõ hơn ở dưới).

Mua trên namecheap khá đơn giản, chỉ cần cung cấp đủ thông tin rồi 💸💸💸 thế là xong.

Connect domain với hosting như thế nào?

Nhà và địa chỉ tất nhiên ở 1 nơi rồi, tại sao phải connect làm gì nữa 👀?

Lí do đơn giản là vì địa chỉ nhà (Web hosting) thực chất là 1 dãy số (IP Address, vd: 127.0.0.1) chúng ta đi đến địa chỉ này mới thực sự là truy cập vào website.

=> cần connect domain name với hosting để có thể đến đúng nơi bằng địa chỉ dễ nhớ.

Khi mua domain và hosting cùng ở namecheap, việc config này sẽ rất dễ dàng

Vào Account / Dashboard / Domain List, click Manage ở domain vừa mua
Chọn Namecheap Web Hosting DNS ở section Nameservers
Click save (dấu ✔️ ở cuối dòng)
Done

Vậy tại sao truy cập vào ~~domain name~~ địa chỉ dễ nhớ hơn chúng ta vẫn đến đc nơi cần đến 👀??

Chính là nhờ DNS (Mình k đi sâu vào khái niệm này)

— DNS (domain name system) hiểu đơn giản là The Phone Book of the Internet, bạn hoàn toàn có thể bấm trực tiếp số (IP Address) để gọi cho gấu (hosting) hoặc tìm theo tên (domain) trong danh bạ.

Activate SSL Certificate

Nếu anh em k mua PositiveSSL có thể bỏ qua phần này nhé.

SSL (Secure Sockets Layer) là 1 lớp bảo mật cho website, bảo vệ website bằng HTTPS với 2 nhiệm vụ chính:

Đảm bảo data đến và đi từ website luôn đc mã hóa.
Kiểm duyệt data đến và đi có nội dung chính xác.

Trang nào có SSL Certificate sẽ đc gắn cờ Secured trên Web browser, đảm bảo sự tin tưởng khi truy cập.

Mình sẽ hướng dẫn anh em cách đơn giản nhất đó là sử dụng cPanel của namecheap:

Vào Account / Dashboard / Domain List, chọn tab Products.
Click Go to cPanel, đăng nhập với tài khoản namecheap.
Trong cPanel mở Namecheap SSL.
Click Activate PossitiveSSL.

Đợi khoảng 5-10’ rồi ấn sync để xem đã activate thành công chưa nhé (nếu chưa thì anh em đợi thêm rồi sync lại cho đến khi status chuyển sang active là đc).

Tạm kết

Đến đây anh em đã hoàn thiện đc 90% website của mình rồi 😮, phần tiếp theo mình sẽ hướng dẫn ~~90%~~ 10% còn lại 😢 bao gồm:

Tìm hiểu cấu trúc thư mục trên server (web hosting).
Sử dụng FileZilla để đẩy code lên server.
Set up 2FA (Two Factor Authentication - hay bảo mật 2 lớp) để tăng bảo mật.

Rất cảm ơn anh em đã kiên nhẫn đọc đến đây 🙏, để lại suy nghĩ cho mình dưới phần bình luận nhé. Thanks you so much!