Frontend: Notee

Note lại một số phần đã làm với Front-end ^^

Căn chỉnh vị trí text và content

• Content: https://getbootstrap.com/docs/4.0/utilities/flex/

  <div class="d-flex justify-content-start">...</div>
  <div class="d-flex justify-content-end">...</div>
  <div class="d-flex justify-content-center">...</div>
  <div class="d-flex justify-content-between">...</div>
  <div class="d-flex justify-content-around">...</div>

• Text: https://getbootstrap.com/docs/4.0/utilities/text/

  <p class="text-left">Left aligned text on all viewport sizes.</p>
  <p class="text-center">Center aligned text on all viewport sizes.</p>
  <p class="text-right">Right aligned text on all viewport sizes.</p>
  
  <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
  <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
  <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
  <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Tab list

https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

Drawer

• Cái này bootstrap chưa thấy hỗ trợ mạnh, thử dùng http://carolineamaba.com/bootstrap-drawer/
• Với React hay Material thì hỗ trợ rồi: https://material-ui.com/components/drawers/
• Demo: https://material-ui.com/components/drawers/

Wow js + animatie css

• https://wowjs.uk/
• https://animate.style/

Slick Slide

• https://kenwheeler.github.io/slick/

Đọc kĩ các mode, bạn sẽ ít khi phải custom thứ gì :D

Slick Nav

• https://computerwolf.github.io/SlickNav/

Google Font Family

• Varela Round: https://fonts.googleapis.com/css?family=Varela+Round
• Nunito: https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i
• Montserrat: https://fonts.googleapis.com/css2?family=Nunito:wght@400%3b600%3b700%3b800&family=Montserrat:wght@400%3b500%3b600%3b700%3b800&display=swap

<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />

/*Import google fonts */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400%3b600%3b700%3b800&family=Montserrat:wght@400%3b500%3b600%3b700%3b800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
$font-family-default: 'Arial',
sans-serif;
$font-family-title: 'Nunito',
sans-serif;
// $font-family-text: 'Montserrat',
$font-family-text: 'Open Sans',
sans-serif;

// Use syntax
/* GENERAL */
body {
    font-family: $font-family-default;
    font-weight: normal;
    font-style: normal;
    background: #f7f8f9;
}

HTML Symbols

• https://www.w3schools.com/charsets/ref_utf_punctuation.asp

Order

• Thứ tự hiển thị trên view: https://www.w3schools.com/cssref/css3_pr_order.asp

em, rem, px…

Chia giao diện làm n phần mà không dùng col

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

Thống kê

• CharJS: https://www.chartjs.org/docs/latest/
• Highcharts: https://www.highcharts.com/demo/line-basic

typeahead

• http://twitter.github.io/typeahead.js/

Class name

• bg-white, pt-10, d-none
• mb-30 bg-white border-radius-10 mt-20 justify-content-center

• font-size-small, text-pink

• BEM

Limit text 3 line

.text-limit-3-row {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical;
}

Font awesome

• https://fontawesome.com/v4.7/examples/

Preview img

$('#avatar').change(function(e) {
    const file = e.target.files[0];
    const a = URL.createObjectURL(file);

    $('#preview-img').html(
        `
        <img src=${a} />
        `
    )
    
    // Other syntax
    // const [file] = $(this).files
    // console.log("Fileeee ", file);
})

Transitions

https://www.w3schools.com/css/css3_transitions.asp

Custom video

https://codepen.io/jamespeilow/pen/xJEaOZ

Chỉnh nội dung theo chiều dọc

vertical-align

Loading, Spin.js

• https://spin.js.org/
• keyword: spiner
• Example: Spinner Front Awesome

Js Noteee :D

Làm việc với query string

• URLSearchParams

  const paramsString = 'q=URLUtils.searchParams&topic=api';
  let searchParams = new URLSearchParams(paramsString);
  
  //Iterate the search parameters.
  for (let p of searchParams) {
    console.log(p);
  }
  
  searchParams.has('topic') === true;      // true
  searchParams.get('topic') === "api";     // true
  searchParams.getAll('topic');            // ["api"]
  searchParams.get('foo') === null;        // true
  searchParams.append('topic', 'webdev');
  searchParams.toString();                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
  searchParams.set('topic', 'More webdev');
  searchParams.toString();                 // "q=URLUtils.searchParams&topic=More+webdev"
  searchParams.delete('topic');
  searchParams.toString();                 // "q=URLUtils.searchParams"

Web API

• https://developer.mozilla.org/en-US/docs/Web/API

Date format: Bootstrap vs JQuery UI