How to use breakpoints in drupal 8?

There we have simple way to use breakpoints means separate media query in drupal 8 and that will also help in speed up or optimize the website.
We have some following points, that will easily clear your doubts about breakpoints and separate media query.
1. We will create a file with the name of 'yourthemeORmoduleName.breakpoints.yml', Example for theme like your theme name is 'bartik' the file name will be 'bartik.breakpoints.yml'.
2. This breakpoints file will be use for write the code of media query for responsiveness. This file will be located in 'themes/bartik/' root.
Example:
bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.small:
  label: small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.medium:
  label: medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.large:
  label: large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 1.5x
    - 2x
Here the breakpoint properties are:
    Very first we will take a unique breakpoint name like: bartik.small:      (moduleName/themeName.unique breakpointName),
    Example: bartik.small: ,bartik.medium: ,bartik.large: ,bartik.wide: ,bartik.narrow: ,bartik.mobile:
   
    label - The human readable name of the breakpoint
    mediaQuery - a valid @media query(for responsiveness)
    weight - where the breakpoint is ordered in relation to other breakpoints
    multiplier - the ratio between the physical pixel size of the active device and the device-independent pixel size
               - 1x
               - 1.5x // supports Android
               - 2x  // supports Mac retina display
              
3. After that we will create new library and attach this breakpoints in 'bartik.libraries.yml' file.
Syntax:
libraryName:
  version: 1.0
  css:
    theme:
      css/desktop-small.css: { media: all and (min-width: 851px) }
      css/mobile.css: { media: only screen and (max-width: 767px) }
      css/mobile-common.css: { media: all and (min-width: 560px) and (max-width: 850px) }
     
    Same like we can create many viewports / breakpoints / media queries and attach with libraries and templates of our website.

4. Now this specific library we will render on template where we want to apply.
Example: {{ attach_library('mythemeName/libraryName') }}   

So in this way we can optimize the site and increase the performance with the help of breakpoints because with the help of this only in case of Mobile or Tab or Ipad or Desktop specific mentioned css will be rendered else not.
And the most important thing is clear the Cache and run Cron.

Note: If have any suggestions or issue regarding 'How to use breakpoints in drupal 8?' then you can ask by comments.  

How to add custom js file in custom module in drupal 8 ?

It is very simple way to add custom JQuery file in custom module, but we have few methods for this.

Method 1: Our custom libraries(js/css) will be apply on all pages of project.
If we want to add custom js file in whole pages of project then we have to use this method.

1. First we have to create js file like 'gallery.js' file in js folder in our custom module.
2. Then we have to create a 'hook.libraries.yml' file means there hook will be module name.
     
Example: Suppose our Module name will be 'gallery' So we will create file with name of     'gallery.libraries.yml' in custom module folder means this file should be placed with '.routing.yml' file.
3. The code for '.libraries.yml' file is..

image_gallery:
  version: 8.4.5
  js:
    js/gallery.js: {}   
  dependencies:
    - core/jquery
  css:
    theme:
      css/gallery.css: {}

Note: There is a library called image_gallery that when included in a page will deliver the 'js/gallery.js' and 'css/gallery.css' file.

4. Then we have to create '.module' file.

Example: Suppose our Module name is gallery so file name will be 'gallery.module'. There our code for attachment of this library to our module is..

<?php
function gallery_page_attachments(array &$attachments) {
   $attachments['#attached']['library'][] = 'gallery/image_gallery';
}
?>

5. Here 'gallery/image_gallery' means 'module name/libraries name' and in the time of controller function return of page will be written like..
return array('#markup' => t($html)); // here $html is return the result for page.   

Method 2: Our custom libraries(js/css) will be apply only on custom module pages of project.  
1. Whole process and file creation will be same but we will not use attachments code in '.module' file.
2. In this case we just have to create '.libraries.yml' file and apply code..

image_gallery:
  version: 8.4.5
  js:
    js/gallery.js: {}   
  dependencies:
    - core/jquery
  css:
    theme:
      css/gallery.css: {}
     
3. Then in the time of controller function return of page will be written like..
   
return [
    '#markup' => t($html),
    '#attached' => array(
        'library' => array(
            'gallery/image_gallery',
        ),
    ),
];       

here 'gallery/image_gallery' means 'module name/libraries name' and '$html' is the written result for page.

Note: If have any suggestions or issue regarding 'How to add custom js file in custom module in drupal 8 ?' then you can ask by comments.