You Might Not Need Frameworks

Native methods for replace frontend frameworks.

Ajax JSON

jQuery

$.getJSON('/my/url', function(data) {

});

JavaScript (native)

fetch('/my/url')
  .then(response => response.json())
  .then(data => console.log(data)); // Do something.

Ajax GET

jQuery

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

JavaScript

fetch('/my/url')
  .then(data => console.log(data)) // Success
  .catch(error => console.log(error)); // Error

Ajax POST

jQuery

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

JavaScript

fetch('/my/url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  data: data, // Data
});

Smooth Scrolling

jQuery framework

$(document).ready(function(){  
  // Add smooth scrolling to all links  
  $("a").on('click', function(event) {  
  
    // Make sure this.hash has a value before overriding default behavior  
    if (this.hash !== "") {  
      // Prevent default anchor click behavior  
      event.preventDefault();  
  
      // Store hash  
      var hash = this.hash;  
  
      // Using jQuery's animate() method to add smooth page scroll  
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area  
      $('html, body').animate({  
        scrollTop: $(hash).offset().top  
      }, 800, function(){  
  
       // Add hash (#) to URL when done scrolling (default click behavior)  
        window.location.hash = hash;  
      });  
    } // End if  
  });  
});

CSS

html {  
  scroll-behavior:  smooth;  
}

This trick is used in this website.

Tables

Bootstrap

<table class="table">
  ...
</table>

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

Zebra Striped Tables

Bootstrap

<table class="table table-striped">
  ...
</table>

CSS

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Responsive Tables

Bootstrap

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

CSS

<div style="overflow-x:auto;">  
  <table>  
    ...  
  </table>  
</div>