Subcategories

• Tutorials
  8
  Topics
  11
  Posts

  

  JQuery là một trong những Framework phổ biến nhất hiện nay ,nó được sử dụng ở 73% các trang web hiện nay . Với một lập trình viên NodeJS thì JQuery lại là một công cụ không hề xa lạ , tuy nhiên những mẹo nhỏ sau đây phần lớn các lập trình viên không biết hoặc không nắm rõ nó , qua bài viết này mình sẽ cung cấp đến các bạn những mẹo nhỏ để các bạn làm việc hiệu quả hơn nhé .

  Jquery-là-gì-1.jpg

  Mẹo 1 : Cách kiểm tra một phần tử có tồn tại hay không ?
  Đoạn code sau đây sẽ giúp bạn kiểm tra một phần tử có tồn tại hay không .Trước khi sử dụng phần tử HTML, bạn cần đảm bảo đó là một phần của DOM.

  if ($("#selector").length) { // làm gì đó với phần tử }

  Mẹo 2 : Cách kiểm tra JQuery đã được tải hay chưa

  Trong quá trình viết JQuery đôi khi ta mắc lỗi sơ đẳng này ,… sau đây sẽ là các kiểm tra JQuery đã chạy hay chưa :

  if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); }

  Chạy đoạn code trên và hệ thống sẽ thông báo cho bạn .

  Mẹo 3 : Cách để tải trước ảnh với JQuery

  Nếu trong quá trình chạy web hình ảnh web của bạn không hiển thị ( Ví dụ :khi di chuột ), thì bạn nên tải trước chúng :

  $.preloadImages = function () { for (var i = 0; i <argument.length; i ) { $('<img>').attr('src', argument[i]); } }; $.preloadImages('img/hover-on.png', 'img / hover-off.png');

  Mẹo 4: Cách tự động sửa ảnh khi ảnh bị hỏng

  Thi thoảng bạn phát hiện các liên kết ảnh bị hỏng trên trang web của bạn , việc thay thế từng link ảnh rất mất thời gian , sau đây sẽ là cách để bạn làm điều đó nhanh chông hơn:

  $('img').on('error', function () { if (!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass ('broken-image'); } });

  Ngoài ra nếu bạn muốn ẩn những hình ảnh bị hỏng , thì bạn có thể dùng đoạn code sau :

  $('img').on ('error', function () { $(this).leather(); });

  Mẹo 5 : Cách Đăng một Form với AJAX
  Các phương thức AJAX của jQuery là một cách phổ biến để yêu cầu text, HTML, XML hoặc JSON. Nếu bạn muốn gửi biểu mẫu qua AJAX, bạn có thể thu thập dữ liệu nhập của người dùng thông qua phương thức val( ) :

  $ .post ('sign_up.php', { user_name: $('input[name=user_name]').val(), email : $('input[name=email]').val(), mật khẩu : $('input[name=password]').val(), });

  Nhưng tất cả các cuộc gọi val() đều đắt tiền và sử dụng .val() trên các phần tử <textarea> sẽ loại bỏ các ký tự trả về từ các giá trị báo cáo của trình duyệt. Một cách tốt hơn để thu thập các form thông tin của người dùng là sử dụng hàm serialize() để thu thập chúng dưới dạng chuỗi:

  $.post ('sign_up', $('#sign-up-form').serialize());

  Mẹo 6 : Cách để vô hiệu hóa các trường đầu vào
  Trong quá trình làm From biểu mẫu , hoặc trong một input style đăng nhập , đăng xuất ,… đôi khi bạn muốn vô hiệu hóa chúng cho đến khi người dùng điền đầy đủ thông tin , hoặc lựa chọn ô “Tôi đã đọc xong điều khoản .” , sau đây sẽ là cách để chúng ta vô hiệu hóa chúng :

  $('input[type="submit"]').prop('disabled', true);

  Tất cả những gì bạn cần làm là chạy lại prop tại đầu vào, nhưng đặt giá trị disabled thành false:

  $('input[type="submit"]').prop('disabled', false);

  Mẹo 7 : Cách để dừng việc tải các liên kết
  Với đoạn code sau đây sẽ giúp bạn dừng tải các liên kết :

  $('a.no-link').on('click', function (e) { e.preventDefault(); });

  Mẹo 8 : Lưu JQuery Selectors vào bộ nhớ đệm

  Hãy nghĩ về số lần bạn viết cùng một selector nhiều lần trong bất kỳ dự án nào. Mỗi selector $ ('. Element') phải tìm kiếm toàn bộ DOM mỗi lần, bất kể bộ chọn đó đã chạy trước đó chưa. Thay vào đó, bạn có thể chạy bộ chọn một lần và lưu kết quả vào một biến:

  var blocks = $ ('#blocks').find('li');

  Bây giờ bạn có thể sử dụng biến blocks bất cứ nơi nào bạn muốn mà không phải tìm kiếm DOM mỗi lần:

  $('#hideBlocks').on('click', function () { blocks.fadeOut(); }); $('#showBlocks').on('click', function () { blocks.fadeIn(); });

  Mẹo 9 : Simple Accordion

  Sau đây sẽ là phương pháp để đơn giản một accordion nhanh chóng :

  // Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });

  10 Kiểm tra điều kiện khi gọi method
  Khi nhắc đến kiểm tra điều kiện thì chúng ta nghĩ đến ngay việc sử dụng if - else ví dụ như :

  if (success) { obj.show(); } else { obj.hide(); }

  Ngoài cách trên chúng ta có thể sử sụng method để rút ngắn chúng :

  var methodName = (success ? 'show' : 'hide'); obj[methodName]();

  11 Cộng chuỗi
  Cộng chuỗi hay nối chuỗi ,nói một cách đơn giản là ta gộp các chuỗi lại với nhau .
  Cách đơn giản để nối chuỗi :

  'A'+'B'+'C' // ABC

  Hoặc chúng ta có thể dùng hàm join() như thế này :

  ['A','B','C'].join() //ABC

  Qua bài viết này mình hi vọng sẽ các bạn phần nào khi sủ dụng JQuery hiệu quả hơn , chúc các bạn thanh công !

• AngularJS

  Thảo luận về AngularJS

  33
  Topics
  134
  Posts

  S

  You will actually want to search for many phone number list sites in presence that offer these sorts of administrations, many are for the most part better compared to numerous others. There are web locales that say they are truly for nothing, regardless they phone number list commonly produce out dated information or the expression thoroughly free is used to have the option to get you to showed up at their specific paid site. A couple of paid web sites offer phone number list whole data sets identifying with individual data of people that reach from wireless number, common court freely available reports, alongside criminal capture back-ground archives.

  Many administrations are basic and furthermore phone number list straight forward to execute. Initial segment is type in the wireless number you need inside the query field identifying with the converse telephone query web website alongside phone number list permit the site to finish the job. In only a couple of moments you will see whether current realities and subtleties can be found in the information base. Just what amount will this kind of administration cost? It is generally just twelve us dollars for simply a solitary pursuit to 45 us Last Database dollars for one year of limitless phone number list ventures. Real administrative alongside nearby laws end up being incorporated to ensure the security of the telephone end client.

  These sorts of lawful rules wound up phone number list being set up to keep everybody's realities elite and hidden. The information is simply intended to be utilized relating to customized purposes. The specific laws and guidelines are set up which makes the specific access related with private information by means of this load of administrations proper, as long as the phone number list data is utilized for individual use and isn't offered to different others. phone number list Applying and utilizing these organizations lets commoners to gain admittance to regularly private information. It will permit anybody to search for lost contacts, obscure and baffling guests and to find people.

• ReactJS

  Thảo luận về ReactJS

  15
  Topics
  45
  Posts

  N

  Tài liệu và ví dụ ở đây nha
  https://redux-form.com/8.3.0/examples/simple/
  https://codesandbox.io/s/mZRjw05yp?file=/SimpleForm.js

• Case Study Thực Tế

  Chia sẻ các hiệu ứng, xử lý các vấn đề giao diện thường gặp trong các dự án thực tế

  2
  Topics
  3
  Posts

  

  Tuyệt nhỉ,
  Cái này làm animation trong game thì tuyệt rồi.

• Ionic

  Thảo luận về Ionic

  3
  Topics
  18
  Posts

  

  Chào cả nhà! Mình tên là Lộc, mình mới học xong TypeScript và Angular.. Mình muốn xin thực tập không lương về Angular và được Ionic Framework thì càng tốt ạ.
  Bạn nào có công ty nào hay bạn nào cần thì liên hệ mình nha : 098.460.3636 - 0936241524
  Hy vọng được học hỏi ở các bạn rất nhiều.
  Mình ở Hồ Chí Minh ạ!!!

• HTML/CSS

  Kiến thức căn bản về HTML, CSS

  4
  Topics
  5
  Posts

  ?

  Nguồn bài viết: https://dynonguyen.com/huong-dan-trien-khai-lazy-loading/

  Kỹ thuật lazy loading được áp dụng rất nhiều trong thực tế, nó giúp website tải nhanh hơn, giảm băng thông cho server, từ đó tăng trải nghiệm người dùng. Bài viết này, mọi người hãy cùng mình tìm hiểu về kỹ thuật này và cách triển khai nó nhé.

  Let’s get started !

  lazy-loading.jpg

  Kỹ thuật Lazy Loading là gì ?

  Lazy loading (Tải chậm, tải lười biếng) là một kỹ thuật được dùng để ngăn trình duyệt tải tất cả các tài nguyên của website cùng một lúc. Chỉ khi người dùng thật sự cần đến thì mới tải.

  Kỹ thuật này được áp dụng cho tất cả các loại tài nguyên từ Javascript, css, nội dung, đến hình ảnh. Bài viết này mình sẽ tập trung về lazy loading images, các tài nguyên kia cũng tương tự cách làm như thế.

  Ưu điểm:

  Tốc độ tải trang nhanh hơn đáng kể.

  Cải thiện trải nghiệm người dùng lên.

  Tiết kiệm được rất nhiều băng thông cho hosting.

  Cách 1: Bắt sự kiện scroll

  Trình duyệt sẽ load bức ảnh nếu tìm thấy thuộc tính src trong thẻ img (trừ trường hợp ở cách 3) hoặc thuộc tính background-image trong css.

  Vì vậy, nguyên lý cách này rất đơn giản:

  *Không dùng thuộc tính src, thay vào đó dùng một thuộc tính data-src (hoặc data-gì-đó) để chứa link của image.

  Nếu không dùng thẻ img mà dùng background-image css, thì ban đầu đặt background-image: none Bắt sự kiện scroll của document. Khi bức ảnh tiến vào khung nhìn của màn hình thì ta chép thuộc tính data-src qua src (Hoặc đổi background-image: none thành url(‘src’). Xoá sự kiện scroll khi đã tải tất cả ảnh. <style> .grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } img { width: 100%; height: 450px; } </style> <div class="grid"> <img class="lazy-load" data-src="http://lorempixel.com/450/450" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/460" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/470" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/480" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/490" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/420" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/40" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/450/440" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/420/450" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/451/450" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/452/450" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/454/451" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/454/452" alt="Photos" /> <img class="lazy-load" data-src="http://lorempixel.com/454/453" alt="Photos" /> </div> document.addEventListener("DOMContentLoaded", function () { let timeout = null; let lazyImgList = document.querySelectorAll('img.lazy-load'); const windowHeight = window.innerHeight; // độ cao màn hình const lazyLoadImage = () => { // áp dụng kỹ thuật debounce để giảm số lần thực thi hàm khi scroll if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { const windowYOffset = window.pageYOffset; // vị trí scroll hiện tại lazyImgList.forEach((img, index) => { // Load ảnh khi ảnh bước vào khung nhìn màn hình // Bạn cũng có thể load nó trước khi vào view-port để tăng UX if (img.offsetTop <= windowYOffset + windowHeight) { img.src = img.dataset?.src; // Chép link ảnh qua thuộc tính src img.classList.remove('lazy-load'); } }); // Cập nhật lại list lazyImgList = document.querySelectorAll('img.lazy-load'); // Xoá event khi đã load tất cả các ảnh if (lazyImgList.length === 0) { document.removeEventListener('scroll', lazyLoadImage); return; } }, 30); } // load lần đầu nếu ảnh ở trên cùng trước khi người dùng scroll lazyLoadImage(); lazyImgList.length && document.addEventListener('scroll', lazyLoadImage); })

  Tuy nhiên, chúng ta không nên dùng cách này, bạn chỉ nên dùng nó khi thật sự cần code cho các trình duyệt cũ, nếu không thì nên tham khảo các cách bên dưới nhé. Vì cách này có rất nhiều nhược điểm:

  Phụ thuộc nhiều vào JavaScript Xử lý scroll không tốt sẽ ảnh hưởng nhiều đến hiệu năng. Trang có thể bị giật lag khi tải ảnh. Cách 2: Dùng Intersection Observer API

  Intersection Observer API cung cấp các API giúp chúng ta tạo ra những giao điểm trên màn hình. Nó sẽ quan sát trình duyệt một cách bất đồng bộ, khi người dùng scroll đến giao điểm đấy thì nó sẽ chạy chức năng mà chúng ta đã định nghĩa.

  Cách này cũng sẽ tối ưu hơn nhiều so với cách 1, vì chúng ta không cần phải viết, tính toán cho sự kiện scroll. Mà trình duyệt sẽ tự quan sát và thực thi.

  Ứng dụng của Intersection Observer API rất nhiều, điển hình là Infinite scroll, Lazy loading.

  // HTML, CSS giống ở cách 1 document.addEventListener("DOMContentLoaded", function () { const imgLazyObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // Chép link ảnh qua src entry.target.src = entry.target.dataset?.src; // bỏ theo dõi bức ảnh này observer.unobserve(entry.target); } }); }, { // Chạy callback ở trên khi ảnh vừa vào view-port threshold: 0 }); document.querySelectorAll('img.lazy-load').forEach(img => { imgLazyObserver.observe(img) }); }) Cách 3: Dùng thuộc tính loading của thẻ img

  Với cách này, bạn chỉ cần thêm thuộc tính loading="lazy" vào thẻ img là được.

  Nhìn có vẻ đơn giản, tuy nhiên cách này rất hiệu quả, nhanh và gọn nhẹ. Bạn không cần phải thêm bất kỳ một dòng code javascript nào nữa.

  Nếu loading="eager" thì trình duyệt sẽ tải bức ảnh đó ngay lặp tức nhé (mặc định). Tham khảo W3School.

  <style> .grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } img { width: 100%; height: 450px; } </style> <div class="grid"> <img src="http://lorempixel.com/350/350" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/360" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/370" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/380" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/390" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/320" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/330" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/350/340" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/320/350" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/351/350" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/352/350" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/353/350" loading="lazy" alt="Photos" /> <img src="http://lorempixel.com/354/350" loading="lazy" alt="Photos" /> </div>

  Tuy nhiên, một điểm yếu của cách này là nhiều trình duyệt cho hỗ trợ (Safari chỉ mới thử nghiệm). Vì thế, nếu dùng thì bạn nên thêm polyfill cho các trình duyệt chưa support nhé. Và cách này cũng không hỗ trợ khi dùng background-image css.

  Cách 4: Dùng thư viện có sẵn

  Những cách trên để cho chúng ta hiểu được nguyên tắc, cách thức hoạt động của Lazy loading. Tuy nhiên, bạn có thể hoặc nên sử dụng các thư viện có sẵn để tiết kiệm thời gian và chính xác hơn nếu như logic code của bạn không quá chuyên biệt và phức tạp.

  Một vài thư viện hỗ trợ việc này như:

  LazySizes JQuery-Lazy Vanilla-LazyLoad Tuppola/Lazyload