fbpx

Website giá rẻ? Có thật sự rẻ không?

Nhu cầu của con người ngày càng tăng cao, đặc biệt là trong lĩnh vực công nghệ thông tin. Một trong những nhu cầu đó là có một trang web riêng cho mình hoặc cho doanh nghiệp. Tuy nhiên, nhiều người lại chọn lựa những website giá rẻ để tiết kiệm chi phí. Nhưng liệu website giá rẻ có thật sự rẻ? Chúng ta hãy cùng tìm hiểu.

Tại sao có website giá rẻ?

Có nhiều lý do để có những website giá rẻ. Đối với người dùng, họ muốn có một trang web cho mình nhưng lại không muốn bỏ ra quá nhiều tiền. Đối với lập trình viên, họ muốn lấy tiền nhanh chóng thông qua việc mua theme và chỉnh sửa lại để bán cho khách hàng.

Website giá rẻ có thật sự rẻ? Không!

Tuy nhiên, sự tiết kiệm chi phí đó lại có thể gây ra rất nhiều vấn đề cho người sử dụng. Đầu tiên, khi có những lỗi vặt xuất hiện trên trang web, người sử dụng sẽ không có được sự hỗ trợ cần thiết để khắc phục. Thứ hai, khi muốn nâng cấp hoặc thay đổi giao diện trang web, người dùng sẽ gặp rất nhiều khó khăn vì dữ liệu hiện tại không được đảm bảo. Cuối cùng, chi phí bỏ ra để chỉnh sửa, mò mẫm sẽ không đáng kể hơn so với thời gian mà người sử dụng phải bỏ ra để làm việc.

Vậy còn Website với giá trị như thế nào là hợp lý?

Không có con số chính xác nào để đánh giá giá trị của một trang web. Tuy nhiên, giá trị của một trang web có thể được đánh giá dựa trên sự hiệu quả trong công việc, độ hoàn thiện và sự hỗ trợ từ nhà cung cấp. Trang web tốt là trang web được thiết kế để phục vụ cho mục đích cụ thể, và được cập nhật thường xuyên để đảm bảo tính ổn định. Hơn nữa, trang web tốt cũng sẽ gây thiện cảm với khách ghé thăm vì độ hoàn thiện của nó.

Tổng kết bài viết

Với những lý do và khó khăn mà người sử dụng sẽ gặp phải khi sử dụng website giá rẻ, chúng ta có thể kết luận rằng không nên lựa chọn những website giá rẻ để tiết kiệm chi phí. Thay vào đó, hãy đầu tư vào một trang web có giá trị thực sự để đảm bảo tính ổn định và sự hỗ trợ tốt nhất cho công việc của mình.

Ý kiến của các bạn

Quý độc giả hãy chia sẻ ý kiến của mình về vấn đề này. Bạn có từng trải qua những trang web giá rẻ?

Thành lập Group chia sẽ kiến thức về lập trình

Lý do tại sao tôi thành lập Group?

Như các bạn cũng biết, việc viết 1 bài Blog cũng không phải chuyện đơn giản gì. Khi tôi viết bài, tôi cũng phải suy nghĩ rất nhiều về cách sắp xếp bố cục, khái niệm với nhau từ đó mà người xem có thể xem và hiểu được về những bài tôi viết. Nhưng thay vào đó, tần suất để viết  1 bài sẽ thấp vì tôi không có nhiều thời gian cho chuyện này. Vì thế tôi lập ra một Group trên Facebook chủ yếu vừa chia sẽ kiến thức cho mọi người cũng như là giúp mình ôn lại kiến thức tốt hơn.

Có gì đặc biệt trong đây?

Trong Group này sẽ khác với Group thông thường, trong đó mọi người chỉ có thể xem bài viết hoặc đăng bài dưới sự kiểm duyệt của tôi. Vì thế, group sẽ không lẫn nhiều bài viết câu hỏi hay thảo luận, thường không có nhiều lợi ích cho người xem. Ngoài ra, những bài viết tôi viết bên trong đây cũng rút gọn thời gian cho ra 1 bài viết vì tôi ko phải sắp xếp nhiều và chỉnh chu cho nó. Cứ xem như là 1 bài chia sẽ thông thường mà các bạn thường thấy trên các diễn đàn thôi. Nhờ đó kiến thức sẽ tới người đọc dễ dàng hơn rất nhiều.

Hi vọng các bạn sẽ ủng hộ tôi và sân chơi này!

Facebook URL: https://www.facebook.com/groups/laptrinhwebvn/

Tìm hiểu Git LFS

Tìm hiểu Git LFS

Git LFS (Large File Storage) là một bản mở rộng của Git được phát triển bởi Atlassian (Nổi tiếng với Bitbucket và JIRA), Github và cộng đồng Open-Source . Git LFS giúp chúng ta tối ưu dung lượng tổng thể của 1 Repository khi Clone, Pull và Checkout trên Git bằng cách thay thế các file Media (Hình ảnh, Video, File thông thường…) thành những chuỗi text được trỏ lên Server và lưu với một cách thức khác với thông thường.

Git LFS sẽ giúp chúng ta giảm thiểu rất đáng kể khi chúng ta Clone, Pull hay Checkout với Repository. Khi mà trước đây nếu Repository của bạn có nhiều file lớn thì khi clone nó sẽ clone về toàn bộ Repository bao gồm tất cả File History Version (Các bản cập nhật của file) khiến dung lượng Repository của chúng ta càng ngày càng tăng.

Hiểu được điều này nên Git LFS được xây dựng trên kỹ thuật Lazyload (Cần thì lấy), vì thế mà khi clone, pull hay checkout source về sẽ rất nhanh và chúng ta có thể tải về các file lớn sau cũng được. Nhất là lúc cần fix code gấp mà gặp mạng mẽo bị “cá mập” cắn thì có mà than trời.

Một tin tốt cho các bạn là khi các bạn cài đặt Git LFS thì không ảnh hưởng nhiều đến thao tác trước giờ bạn làm với Git, các bạn chỉ cấu hình lúc đầu thôi mà còn rất là dễ nữa. Còn lại Git LFS sẽ tự động hết cho các bạn.

Cài đặt Git LFS

Yêu cầu:

  • Đã cài đặt Git.
  • Tạo Repository để test hoặc sử dụng Repository đang có sẵn của bạn.
  • Hiều về Git trước đó là một lợi thế để bạn tiếp tục xem tiếp bài này.

Bước 1: Download Git LFS

  • Windows: Truy cập vào https://git-lfs.github.com và tải về bản cài đặt, hoặc khi các bạn cài Git thì sẽ có bảng Option cho bạn chọn để cài kèm với Git LFS.
  • MacOS: các bạn cần cài Brew và dùng lệnh brew install git-lfs trong Terminal.
  • Linux: các bạn truy cập vào https://github.com/git-lfs/git-lfs/wiki/Installation để rõ hơn khi cài đặt trên các phiên bản Linux khác nhau.

Bước 2: Chọn hoặc tạo Repository của bạn

  • Hãy cd vào đúng thư mục Repository của bạn trong Git Bash/Command Prompt/Windows PowerShell (Windows) hoặc Terminal (MacOS/Linux) và gõ lệnh:
git lfs install

Bước 3: Track những file có dung lượng lớn mà bạn muốn bằng Regular Expression (Regex) với lệnh sau:

// Track tất cả file với extension
git lfs track "*.jpg"

// Track tất cả file với nhiều extension
git lfs track "*.jpg" "*.png" "*.gif"
  • Ở bước này nhỡ Track lộn thì sao? Ví dụ thay vì bạn ghi là  git lfs track “*.jpg” thì bạn lại ghi là git lfs track “.jpg” nó không đúng với Regex nhưng Git LFS vẫn chấp nhận nhưng lại là với file đúng với tên gọi là .jpg  . Lúc đó bạn hãy mở file .gitattributes  lên và xóa dòng sau .jpg filter=lfs diff=lfs merge=lfs -text  là xong. Cái này các bạn tự vọc đi rất dễ.

Bước 4: Commit và Push kèm file .gitattributes  (rất quan trọng) và các file đó trong Repository sẽ bị xóa trên Git (Chỉ đối với Repository các bạn đang làm việc và đã có sẵn file trước đó) để việc setup Git LFS hoàn tất. Các bạn yên tâm nó sẽ không xóa file ở máy đâu nha, xóa file trên Git và chuyển nó ở 1 chỗ lưu trữ khác thôi.

Bước 5: Các bạn có thể kiểm tra Git LFS hoàn tất chưa có thể vào trang Repository của mình để xem, thường thì nó sẽ để là Git LFS Installed thì như vậy là hoàn tất rồi đó.

Như vậy sau 5 bước chúng ta đã hoàn thành cài đặt Git LFS, quá nhanh và dễ dàng đúng không các bạn. Nếu sau này các bạn Clone, Pull hay Checkout thì nếu máy bạn đã cài đặt sẵn Git LFS thì nó sẽ tự động tải về các file media cho các bạn và bạn yên tâm nó chỉ tải về những gì cần thiết cho commit bạn đang clone thôi nên rất nhẹ luôn chứ nếu mà tải hết như Git thông thường thì dẹp luôn đi chứ xài Git LFS làm gì nữa.

Các vấn đề gặp phải khi sử dụng Git LFS

Git LFS có rất nhiều lợi ích của nó nhưng đôi khi nó cũng có thể gây cho các bạn một số phiền phức phổ biến như sau:

  • Máy quên cài Git LFS: đối với trường hợp này thì các bạn hãy cài như trên rồi sau đó tại Repository đó các bạn chạy lệnh thủ công git lfs pull  để nó tự động tải về.
  • Git LFS trên MacOS và Linux đôi khi gặp trục trặc 1 chút ở vấn đề cài đặt như Permission này nọ, cái này đòi hỏi các bạn 1 chút kiến thức về Terminal thì sẽ quyết nhanh thôi.
  • Khi làm việc với đồng nghiệp thì bắt buộc họ cũng phải cài đặt Git LFS nên sẽ hơi khó chịu 1 chút với những đồng nghiệp “cứng đầu” không chịu cài dù có giải thích. Những người này có thể là họ ngại làm quen cái mới hoặc Repository của họ đã quá nhỏ rồi và cũng có khi là do cái tôi lớn quá nên nói không nghe.

Đó là những vấn đề sẽ xảy ra khi bạn dùng Git LFS, nếu bạn có thể giải quyết ổn thỏa hết các vấn đề trên thì “triển” thôi nào.

Tìm hiểu Git LFS qua Video

  • Sẽ cập nhật sau…

Các bạn có thể tham khảo 1 Repository mẫu về Git LFS tại đây: https://github.com/thienanblog/git-lfs-example

Một ví dụ trước và sau khi dùng Git LFS

Trước khi sử dụng Git LFS

Sau khi sử dụng Git LFS

Trân trọng cám ơn độc giả đã xem qua bài viết này, mong được sự ủng hộ của các bạn ở các bài viết tới.

Redux Video Series

Trong Series này các bạn sẽ được tìm hiểu về Redux là gì một cách nhanh nhất có thể. Mọi kiến thức được tóm gọn ít nhất qua các ví dụ thực tiễn thay vì chỉ lý thuyết suông rồi mới thực hành. Nên sẽ rất phù hợp với người mới chưa biết gì về Redux sẽ nhanh chóng nắm bắt được nó hơn so với cách thông thường là phải thông qua tài liệu của Redux và làm từng bước giống họ.

Tìm hiểu Reducer là gì trong Javascript

Reducer là gì? Chắc hẳn đây là câu hỏi mà đa số người dùng sử dụng qua thư viện của Redux hoặc vô tình biết qua phương thức reduce() này nên sẽ thắc mắc về nó.

(Bài viết này có bao gồm một số kiến thức ở bài Tìm hiểu về Mutable và Immutable Object trong Javascript)

Reducer được dùng thay thế cho vòng lặp ở một số nhiệm vụ nhất định, giúp cho việc viết Code nhanh hơn. Nên các bạn cũng không cần quá bận tâm nếu như các bạn thật sự không thích cách làm việc này của nó mà có thể thay thế bằng các vòng lặp khác như for, foreach, map…

Source: https://jsbin.com/fatifam/2/edit?js,console

Tìm hiểu về Mutable và Immutable Object trong Javascript

Bắt kịp với xu hướng mới, trong Video này chúng ta cùng tìm hiểu về 2 khái niệm Mutable Object và Immutable Object khác nhau như thế nào? Và tại sao chúng ta nên sử dụng chúng? Nhất là xu thế hiện tại rất chuộng bộ đôi “sát thủ” React + Redux. Hãy cùng tôi tìm hiểu nó các bạn nhé!

Tìm hiểu Component trong ReactJS

Trong ReactJS, mỗi đoạn code sẽ được phân chia thành những Component không lệ thuộc lẫn nhau và có thể tái sử dụng khi cần thiết. Vì vậy trong bài viết này chúng ta sẽ tìm hiểu cách viết và sử dụng Component như thế nào trong ReactJS.

Yêu cầu trong bài viết

Bài viết này được viết trên nền tảng JavaScript ES6 + Babel Compiler có sẵn trong create-react-app . Vì thế, các bạn hãy tập làm quen với các cú pháp mới và “lạ” trong bài viết này.

Cú pháp

Để khởi tạo Component chúng ta sẽ có nhiều cách như sau:
  • Dùng let, const trong JavaScript ES6 hoặc var ở các phiên bản JavaScript thấp hơn.
  • Dùng Function.
  • Dùng Class trong JavaScript ES6.

Ví dụ

import React, { Component } from 'react';

// Ví dụ 1
let Tab_let = () => {
  return (
    <div>Khởi tạo bằng let</div>
  );
};

// Ví dụ 2
const Tab_const = () => {
  return (
    <div>Khởi tạo bằng const</div>
  );
};

// Ví dụ 3 - const hoặc let đều được
const Tab_shorthand = () => (
  <div>Cách tắt khi dùng Arrow Function</div>
);

// Ví dụ 4
function Tab_function() {
  return (
    <div>Khởi tạo bằng Function</div>
  );
}

// Ví dụ 5
class Tab_class extends Component {
  render() {
    return (
      <div>Khởi tạo bằng Class</div>
    );
  }
}
Qua ví dụ trên thì khi dùng let hoặc const, chúng ta cần dùng Arrow Function hoặc Anonymous Function để gán vào cho biến hoặc hằng. Trong khi Function có cách dùng tương tự cách định nghĩa biến và hằng thì Class lại phải kế thừa từ Class Component trong ReactJS để có thể chạy được.
Ở ví dụ 3, các bạn nên lưu ý là cú pháp dùng 2 dấu (…)  này có ý nghĩa là vừa vừa return như ví dụ 2 và vừa tạo ra JSX ở bên trong nó. Chúng ta sẽ tìm hiểu sâu hơn về JSX ở những bài sau nên bài này các bạn “chịu khó” vẫn chưa hiểu nó nhé.
Tiếp tục sau khi khởi tạo, tên của biến, hằng, function và class sẽ trở thành 1 Component với HTML Tag là <tenBien /> . Nên nhớ là HTML Tag phải là thẻ tự đóng, còn khi nào thì nên dùng thẻ bao thì tôi sẽ nói rõ khi chúng ta tìm hiểu tới khái niệm về Props (Properties).

Cách sử dụng

Chúng ta chỉ đơn giản sử dụng tên thẻ như trước đó tôi đã đề cập vào bất kỳ vị trí nào nằm bên trong phạm vi sử dụng React. Chắc có lẽ sẽ có nhiều bạn đến khúc này sẽ bị lấn cấn đó là làm sao biết phạm vi của React là ở đâu? Và nó đã được khởi tạo như thế nào?
Quay lại bài viết trước, các bạn có nhớ rằng khi các bạn tạo dựng ReactJS bằng cách dùng create-react-app , chúng ta đã thấy qua file index.js  trong thư mục src  chứ. Vâng, chính là nó! Tôi sẽ giải thích cho các bạn qua cấu trúc file public/index.html  và src/index.js  bằng hình ảnh sau:
1.index-html-index-js-structure.png
Hình ảnh trên chứa các phương thức mặc định dùng để khởi động ReactJS cũng như trỏ tới <div id=”root”></div>  để nhận biết đâu là vùng hoạt động của ReactJS. Tiếp tục, chúng ta quay trở lại file App.js  và thêm những Component mà chúng ta đã viết ở trên vào:
2.add-to-app
Và kết quả nhận được:
result

Lời kết

Như vậy, chúng ta đã tạo ra những Component trong ReactJS bằng nhiều cú pháp khác nhau và kết hợp với cú pháp JSX để tạo ra React Element. Vậy JSX là gì? Component chỉ có vậy thôi sao? Hãy đón xem tiếp ở phần sau các bạn nhé.

Tìm hiểu ReactJS và hướng dẫn cài đặt

ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook. Tới nay, ReactJS đã thu hút hàng triệu lập trình viên trên thế giới. ReactJS thường được dùng bởi Frontend Developer trong thiết kế Web Application một cách nhanh chóng hơn. Vậy để tìm hiểu ReactJS, chúng ta phải tìm hiểu từ đâu? Và cần gì để chạy được ReactJS? Qua bài viết này, các bạn đọc giả sẽ hiểu được cách cài đặt và sử dụng ReactJS một cách đơn giản nhất.

Yêu cầu

  • Cài đặt NodeJS phiên bản mới >= 6 (LTS hoặc bản hiện tại – https://nodejs.org/en/download/)
  • Cài đặt Visual Studio Code/Sublime Text hoặc WebStorm (tùy chọn)

Cài đặt

Đầu tiên, các bạn phải chắc chắn rằng mình đã cài đặt đúng phiên bản NodeJS và có NPM bằng cách gõ vào cửa sổ Command Prompt/Windows Powershell hay Terminal trên Mac và Linux:
Như ở trên, các bạn cũng đã thấy phiên bản hiện tại của NodeJS là 8.6.0 và như thế là đã đạt tiêu chuẩn của ReactJS, còn NPM khi bạn cài các phiên bản 8.x trở lên thì NPM cũng đã ở phiên bản 5.x. Vì thế các bạn hãy kiểm tra kỹ, tránh tình trạng cài nhầm NPM phiên bản thấp hơn khi xài các thư viện khác khi thư viên đó đòi hỏi 1 phiên bản NodeJS hoặc NPM thấp hơn để có thể chạy ổn định.
Tiếp tục, chúng ta sẽ tiến hành cài đặt ReactJS thông qua Package đã được viết sẵn cho chúng ta bằng cách gõ vào lệnh npm install -g create-react-app  và nó sẽ cài đặt như hình bên dưới:
Sau khi cài đặt hoàn tất, các bạn có thể gõ tiếp lệnh theo cú pháp sau:
create-react-app thienanblog

Trong đó thienanblog  là tên Folder mà các bạn ấn định nên không cần phải làm theo bài viết. Tuy nhiên với những bạn không rành thì trước mắt cứ làm theo đi đã, để dễ dàng theo dõi bài viết hơn.

Quá trình cài đặt hoàn tất, các bạn cũng sẽ thấy ứng dụng trả về cho chúng ta cách thức để khởi chạy ReactJS như sau:
Tôi sẽ giải thích cho các bạn các cú pháp họ đã đính kèm cho chúng ta:
  • npm start  : tiến hành khởi tạo Server phát triển để chạy ReactJS trên môi trường Web của NodeJS.
  • npm run build  : tiến hành xây dựng sản phẩm sau khi hoàn tất giai đoạn phát triển, bao gồm sẽ copy các file tĩnh đi kèm khi các bạn bỏ vào đúng thư mục chỉ định (Các bạn có thể xem chi tiết ở 1 bài viết khác trong Blog này).
  • npm test  : tiến hành kiểm thử ứng dụng (Dành cho các bạn biết qua về thư viện Tester).
  • npm run eject  : khi các bạn chạy lệnh này, tool này sẽ không còn tự động hóa mọi vấn đề khi phát triển nữa mà nó sẽ bung ra toàn bộ các config để những bạn nào am hiểu về Webpack hay Babel… có thể config lại theo ý đồ của mình (Không khuyến khích các bạn không rành). Nên nhớ, một khi đã chạy mà quên backup thì “toi” luôn nhé.

Như vậy ở bên trên các bạn cũng đã tìm hiểu qua 1 số lệnh cơ bản của ReactJS rồi, giờ thì chạy thôi nào:

cd thienanblog
npm start

 

Một cửa sổ sẽ hiện lên và các bạn thấy ReactJS đã chạy rồi đấy:

 

 

Xong như vậy là chúng ta đã hoàn tất cách cài đặt ReactJS. Chuyển sang tinh chỉnh một số File nào. Bạn hãy vào trong thư mục src  và tìm file App.js  như hình:

 

 

Sau đó tinh chỉnh lại như sau và save lại:

 

/// ...
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
/// ...

Lập tức màn hình Browser sẽ tự động Reload lại mà không cần bạn phải F5. Đó chính là do NodeJS vẫn đang chạy, nên vì thế nó sẽ nhận biết được khi nào các bạn thay đổi nội dung trong file.

Viết Component đơn giản

Tiếp tục, chúng ta sẽ viết ngay 1 Component đơn giản nhất trong ReactJS bằng cách gõ vào đoạn Code sau:

function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}

Đoạn code trên chắc chắn sẽ có rất nhiều bạn thấy dòng code “quái lạ”… làm thế nào mà có HTML gì đó ở trong đây vậy? Đó chính là JSX đấy các bạn ạ và nó là gì thì từ từ rồi chúng ta sẽ biết, đừng vội nản các bạn nhé. Và nội dung file App.js  sẽ như sau:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
export default App;

 

Sau đó, các bạn save lại và xem lại kết quả của chúng ta:

 

Lời kết

Như vậy, chúng ta đã tìm hiểu ReactJS và cách cài đặt như thế nào, cũng như đã tự viết ra 1 Component đầu tiên cho mình. Hãy theo từng bước và thử lại nhiều lần ở các vấn đề mà bạn khó hiểu, vì sắp tới chúng ta còn phải tìm hiểu tiếp về Component và JSX các bạn nhé.

Tìm hiểu Array Object trong JavaScript

array-object
Array Object là một mảng chứa các phần tử, cho phép truy xuất các phương thức của Object bên trong nó để đáp ứng các nhu cầu xử lý dữ liệu khác nhau khi mà Array chỉ có tác dụng duy nhất là lấy phần tử trong nó ra. Trong bài này, chúng ta cùng tìm hiểu Array Object nhé.

Continue reading Tìm hiểu Array Object trong JavaScript

Sự khác biệt giữa Arrow Function và Function thông thường

Sơ lược về bài viết

Ở bài viết trước, chúng ta đã xem qua Tìm hiểu về một số cú pháp ES6 trong JavaScript . Trong bài viết này, chúng ta sẽ tìm hiểu về sự khác biệt giữa Arrow Function và Function thông thường khi sử dụng trên thực tế. Tuy Arrow Function và Function phần giống nhau về cách định nghĩa 1 hàm nhưng tham chiếu đến bối cảnh (context) hay môi trường xung quanh nó sẽ khác. Vậy tham chiếu đến bối cảnh hay môi trường xung quanh là như thế nào? Chúng ta sẽ cùng bắt đầu tìm hiểu.

Continue reading Sự khác biệt giữa Arrow Function và Function thông thường