Caching rất dễ Mình không nói đùa đâu, caching rất là dễ. Ai cũng có thể làm được chỉ sau 10 phút đọc tutorial. Nó cũng giống như việc đứa trẻ lên 3 đã có thể cầm bút để vẽ vậy. Thế nhưng biết cầm bút vẽ khác với việc vẽ được cái gì đó, và lại càng khác hơn việc vẽ được cái gì đó đẹp. Nghệ thuật caching cũng vậy. Nếu bạn đã từng nghe đến câu nói nổi tiếng...
Happy New Year Trending Redis in-memory cache JavaScript caching
Mở đầu Bạn đã bao giờ nghe đến intersection observer hay sử dụng nó trong javascript chưa. Nếu chưa thì trong bài viết này mình sẽ giới thiệu đến các bạn intersection observer là gì và sử dụng nó với mục đích gì nhé. Nào hãy cùng mình tìm hiểu. Ví dụ Với Intersection Observer, chúng ta có thể lắng nghe sự thay đổi của một element trong viewport (vùng hiển thị trên màn hình). Nếu bạn chưa hiểu...
JavaScript observer
Trong phần trước chúng ta đã tìm hiểu một số thành phần cơ bản trong bộ Complier của JavaScript. Trong bài viết trước có xuất hiện khái niệm Lexical Environment mà mình chưa có thời gian để giải thích cụ thể, vậy thì trong bài viết này chúng ta sẽ cùng tìm hiểu cụ thể hơn về khái niệm này và cách nó liên quan đến Closures của JavaScript như thế nào. Trước khi đọc bài viết này, nếu chưa...
Happy New Year JavaScript Lexical Environments Execution Contexts closures
Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go) 1. Sao chép một chuỗi nhiều lần Thay vì phải gõ 1 chuỗi lặp đi lặp lại thì bạn có thể sử dụng method...
Front-end JavaScript
1. Yêu cầu Yêu cầu bài toán là người dùng nhập năm sinh vào ô input, khi click vào button thì tính tuổi của họ. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript. 2. HTML - CSS <!DOCTYPE html> <html lang="en"> <head> ...
HTML JavaScript CSS vanilla js
Các bạn có thể đọc qua phần 1 ở đây Để mọi người không quên, mình xin tóm tắt gọn lại khái niệm lexical environment: Lexical Environment là một object giấu tên có trong mọi object trong Javacript, nó chứa các biến trong 1 scope và các reference đến môi trường bên ngoài. Oke chứ ? Giờ thì đến định nghĩa về Closure: Closure là một hàm mà có thể nhớ và truy cập lexical environment của nó ngay cả khi ở...
JavaScript Beginner closure
Giới thiệu Javascript 2015 (ES6) ra mắt kèm theo rất nhiều tính năng giúp chúng ta viết code một cách gọn gàng, sạch đẹp hơn, dễ dàng đọc hơn. Một số chức năng tiêu biểu như: let, const, arrow function, promises, ... Trong bài viết này chúng ta sẽ tìm hiểu về let và const phục vụ trong việc khai báo dữ liệu trong JS. Sự khác biệt của let, const và var. Sự khác biệt Hoisting Trước tiên ta sẽ tìm hiểu xem...
Happy New Year JavaScript es6
Giới thiệu Chào mọi người. Hiện nay trong môi trường phát triển có rất nhiều công cụ giúp chúng ta có thể viết code nổi tiếng như Sublime, Atom, Visual Code và nhiều công cụ khác nữa nhưng có lẽ trong vài năm gần đây Visual Code đang nổi lên như 1 công cụ phổ biến mà rất nhiều người ban đầu từ dùng những công cụ khác cũng đã thử với Visual Code và dần thích nó. Hôm nay mình xin giới thiệu...
JavaScript CSS ReactJS visual code
Trải nghiệm thực tế Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi. Nhắc đến Java chúng ta đều biết nó là một ngôn ngữ lập trình hướng đối tượng. Mô hình lập trình hướng đối tượng hầu như được áp dụng trong hầu hết các dự án lớn. Với những ưu điểm mà mô hình này mang lại giúp tăng năng suất, đơn giản hóa việc bảo trì, dễ...
JavaScript FE TypeScript
Lời mờ đầu JavaScript cung cấp cho chúng ta rất nhiều các phương pháp khác nhau để xử lý các mảng. Hôm nay, tôi sẽ điểm qua một số cách cần thiết để bạn cải thiện kỹ năng phát triển JavaScript của mình chỉ trong vài phút. 1. Array.map () Bất cứ khi nào bạn sử dụng method .map() với một mảng, nó sẽ tạo ra một mảng mới, được sửa đổi từ mảng ban đầu. Method map() cho phép bạn duyệt...
JavaScript
Hi mọi người, trong các bài viết trước chúng ta đã tìm hiểu về 4 nguyên lý đầu tiên của SOLID, trong bài viết này, chúng ta cùng tìm hiểu về chữ cái cuối cùng nhé 1. D - Dependency Inversion Principle Nguyên tắc Dependency Inversion (viết tắt là DIP) đề cập đến việc tách rời các module. Khi tuân theo nguyên tắc này, các mối quan hệ phụ thuộc thông thường được thiết lập từ các module cấp cao đến...
JavaScript SOLID
Khi làm Frontend, chúng ta luôn phải có yêu cầu request API, hoặc request file từ server, đây đều gọi chung là tạo các HTTP request. Có nhiều thư viện hỗ trợ cho việc này, đó có thể là fetch() hoặc axios. Trong bài viết này, chúng ta sẽ cùng tìm hiểu công cụ nào hỗ trợ tốt hơn trong việc này. Tổng quan và cú pháp Fetch fetch() là một hàm của đối tượng window trong javascript, cho phép chúng ta lấy dữ...
Happy New Year JavaScript axios Fetch
Khái niệm Promise đã khá quen thuộc với chúng ta rồi. Khi muốn tạo hoặc nhận xử lý bất đồng bộ (xử lý chờ) trong javascript chúng ta thường sẽ nghĩ đến và sử dụng Promise. Nhưng đó mới chỉ là những cách sử dụng cơ bản của Promise thôi. Hôm nay chúng ta hãy thử biến đổi nó một chút và hy vọng sau khi biến đổi xong thì nó sẽ mang lại nhiều lợi ích cũng như tiện lợi trong xử lý tình...
JavaScript Promise
Giới thiệu Để phát triển web hoặc phát triển đa nền tảng, JavaScript đang trở nên phổ biến rộng rãi. Trước đây nó chỉ được coi là một ngôn ngữ kịch bản front-end nhưng giờ đây nó cũng trở nên phổ biến với tư cách là back-end. Ngay cả Facebook’s React Native cũng dựa trên JavaScript. Do đó, chắc chắn sẽ rất hữu ích nếu biết một số thủ thuật trong JavaScript không chỉ ngăn chúng ta viết...
Happy New Year JavaScript Tips Tricks
ECMAScript 2015 (còn được gọi là ES6) là một bản cập nhật lớn cho Javascript kể từ ES5, được chuẩn hóa vào năm 2009. Kể từ đó, Javascript đã đưa ra các bản cập nhật gia tăng hàng năm. Các bản cập nhật từ ES6 trở lên thường được gọi là Javascript hiện đại. Hôm nay chúng ta hãy xem javascript mới có những cái gì? Ký tự Các ký tự cho phép nhúng các biểu thức vào chuỗi với cú pháp rõ...
JavaScript
Dạo này ăn dầm nằm dề với "nàng" React nhiều quá, lắm khi không ngóc đầu lên được. Ông bà ta có câu "Chán cơm thèm phở", nên lang thang trên các blog để mong tìm được 1 chút thú vui khác React đã khá quen thuộc, thì vô tình thấy một frameworkJS là MithrilJS, tuy nó chưa quá nổi tiếng trên cộng đồng Frontend, nhưng đọc lướt qua phần giới thiệu lại thấy khá ấn tượng... 1....
Happy New Year Front-end JavaScript
Tối ưu hóa hiệu suất là một phần phát triển quan trọng mà mọi lập trình viên phải đối mặt Chúng ta không thể có một lượng người dùng lớn nếu như trang web của chúng ta xử lí các tác vụ một cách chậm chạp, hoặc là khi cố gắng điều hướng sang một trang khác trong ứng dụng, người dùng ngay lập tức nhận thấy thời gian tải cao. Tại thời điểm đó, chúng ta biết là cần phải bắt...
Happy New Year JavaScript React dynamic import code spliting
Giới thiệu Là lập trình viên chắc hẳn chúng ta đã nghe về đệ quy, vậy đệ quy là gì? Đệ quy là một mẫu lập trình hữu ích trong các trường hợp khi một tác vụ có thể được chia thành nhiều tác vụ cùng loại, nhưng đơn giản hơn một cách tự nhiên. Hoặc khi một nhiệm vụ có thể được đơn giản hóa thành một hành động dễ dàng cộng với một đối số đơn giản hơn của cùng một...
JavaScript linked list Recursive Function Call Stacks
Giới thiệu Là lập trình viên chắc hẳn chúng ta đã nghe về đệ quy, vậy đệ quy là gì? Đệ quy là một mẫu lập trình hữu ích trong các trường hợp khi một tác vụ có thể được chia thành nhiều tác vụ cùng loại, nhưng đơn giản hơn một cách tự nhiên. Hoặc khi một nhiệm vụ có thể được đơn giản hóa thành một hành động dễ dàng cộng với một đối số đơn giản hơn của cùng một...
JavaScript linked list Recursive Function Call Stacks
Xin chào quý vị rất thân ái! Chào mừng quý vị đến với bài viết tiếp theo của em sau chuỗi em đang chìm đắm trong dự án và chủ đề của lần gặp gỡ này sẽ là "Các điều thú vị sắp tới của JavaScript ES2021 (ES12)". ES2021 (ES12) sẽ ra mắt trong giữa năm 2021. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu 4 features thú vị gồm: String.prototype.replaceAll(), numeric separators, logical assignment...
JavaScript
Kể từ ngày release của Rails 6, Webpack đã trở thành JavaScript bundler mặc định cho các Rails App. Vốn đã quen với việc sử dụng Sprockets, và vốn là một Dev backend, mình cũng như không ít các bạn sẽ khó hiểu và khó tiếp cận với công cụ Webpack mới này. Ở bài viết này, mình sẽ cố gắng hướng dẫn và gỉai thích các khái niệm và ý tưởng cơ bản từ góc nhìn của một Dev Rails đã quen làm việc...
Happy New Year JavaScript Ruby on Rails
Có một số những chức năng trong một website yêu cầu tính toán rất tốn thời gian. Nếu như một method được gọi thường xuyên, nó có thể ảnh hưởng rất nhiều tới performance của browser. Vì vậy để tránh tình trạng này, chúng ta sử dụng kỹ thuật debouncing và throttling. Cả 2 kỹ thuật này được sử dụng cho việc tối ưu performance và giới hạn số lần gọi những functions. 1. Trường hợp...
Happy New Year JavaScript
Node package manager hay còn gọi là NPM, là một kho lưu trữ các libs, packages của hệ sinh thái node js; cũng giống như các kho lưu trữ khác: NuGet của .Net, Composer của PHP, Maven của java, Pip của python, ...; NPM hỗ trợ tối đa cho việc install, uninstall, update, control version các packages trong dự án Node - javascript. Sau đây mình xin tổng hợp một số câu lệnh NPM hay dùng trong quá trình làm dự án. Khởi tạo...
JavaScript Nodej.js npm
Chào các bạn đã trở lại với series làm ứng dụng học toán đơn giản với React native của mình Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.bloodycotech001, vì 1 số lý do nên mình vẫn chưa update app kịp những gì có trong bài viết. Nếu các bạn có thời gian, có thể cho mình xin 1 đánh giá ( bao nhiêu sao cũng được) và 1 comment chân thành từ các bạn về app hoặc...
JavaScript Android React Mobile App React Native
Flattening multidimensional Arrays in JavaScript Một số cách Flatten hợp nhất mảng đa chiều thành mảng một chiều duy nhất const myArray = [[1, 2], 3, 4, 5, [6, 7, 8, 9]]; // expected output: Array [1, 2, 3, 4, 5, 6, 7, 8, 9] Sử dụng concat(), apply() const myNewArray = [].concat.apply([], myArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9] Sử dụng reduce() const myNewArray = myArray.reduce((prev, curr) => prev.concat(curr), []); // [1, 2, 3, 4, 5, 6, 7, 8, 9] Sử...
Happy New Year JavaScript
I. Function: Function là một trong những khái niệm cơ bản nhưng được sử dụng nhiều trong Javasript. Hôm nay mình xin được phép chia sẻ với các bạn một số thông tin bên lề của Function trong Javascript nhé. A JavaScript function is a block of code designed to perform a particular task. Một phương thức là 1 tập hợp câu lệnh để thực hiện 1 nhiệm vụ cụ thể. Với định nghĩa trên, chúng ta có cú pháp cơ bản...
JavaScript frontend
Xin chào mọi người, hôm nay mình xin tiếp tục chia sẻ cho các bạn về những gì cơ bản nhất của Vuejs, để trở thành 1 Fresher chính hiệu ^^ , hãy ghé qua các bài viết trước của mình ở đây nhé. Và lần này mình xin giới thiệu về một thư viện bé nhỏ khi các bạn làm việc với đa ngôn ngữ. Đó là Vue I18n, hãy cùng tìm hiểu về thư viện này thôi! Cài đặt Đơn giản thôi, các bạn có thể cài...
Happy New Year JavaScript frontend
1. Yêu cầu Yêu cầu bài toán là khi người dùng click vào button Copy thì sẽ lưu giá trị trong ô input bên cạnh vào bộ nhớ thay cho việc người dùng phải nhấn Ctrl + C mất thời gian. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú...
HTML JavaScript CSS vanilla js
Google Apps Script là một nền tảng phát triển ứng dụng giúp tạo các ứng dụng tích hợp với Google Workspace (Google Sheets, Google Docs, Google Slides…) một cách nhanh chóng và dễ dàng. Nếu spreadsheet của bạn gồm nhiều sheet và mỗi lần chuyển đổi qua lại giữa các sheet bạn gặp đôi chút khó khăn thì sao chúng ta không thử tạo custom menu để việc điều hướng được dễ dàng hơn. Khởi đầu Giả sử...
JavaScript Google Sheets Apps Script Custom menu
Vấn đề không tự sinh ra cũng không tự mất đi, nó chỉ chuyển từ dạng này sang dạng khác, hoặc từ chỗ này sang chỗ khác. Đây là định luật bảo toàn vấn đề áp dụng trong thế giới phần mềm do chính mình phát biểu =))). Bạn có vấn đề, bạn tìm cách giải quyết nó, và vấn đề khác lại xuất hiện bởi vì giải pháp của bạn cho vấn đề phía trước, và bạn lại tìm cách giải quyết nó,...
Happy New Year JavaScript caching High Performance Optimization
JavaScript và những điều bạn cần biết (Phần 1) JavaScript là ngôn ngữ quá đỗi quen thuộc với chúng ta. Bài viết này mình sẽ không nêu những lý thuyết ví dụ như javaScript là gì bla bla..(cái này bạn nào muốn đọc thì có thể google ra 1 núi ạ ) mình chỉ viết ngắn gọn những điều bạn cần phải biết về JavaScript dựa theo kinh nghiệm bản thân mình đúc kết và định nghĩa theo "ngôn ngữ...
Happy New Year JavaScript
React.js là một UI library khá nổi tiếng trong lập trình web, có hàng trăm hàng ngàn developer đang làm việc với React.js hàng ngày. Tất cả trong số đó chắc hẳn ai cũng rất quen thuộc hai khái niệm cơ bản của React là state và props. Thế nhưng liệu bạn đã thực sự hiểu cách mà React xử lý chúng? (ở đây mình chỉ nhắc đến Functional component) Nhắc lại một chút về 2 khái niệm trên. State là data...
JavaScript ReactJS React state props