Worklog - Week 20/09

MỤC TIÊU:

• Template và nội dung ban đầu cho dev.vms

VMS

• Implement bare structure cho trang /services (chỉ cần load các thông tin text lên là được)
  • content/services/_index.md
    • Khai báo cho slider
• Implement các building blocks
  • Trang _default/list.md và _default/single.md có hỗ trợ slider và các sections trong frontmaster
    • Gọi thông qua partials/slider.html và partials/sections.html
  • Implement header
    • Implement top menu
  • Implement top slider
    • Apply tiny-slider: https://ganlanyuan.github.io/tiny-slider/demo/#animation1_wrapper
  • Implement các loại section
    • Implement section loại overview
    • Implement section loại insights
    • Implement section loại news
      • Dùng slider
      • Error: chưa show cùng lúc 4 item trong 1 slide
        • Fix: do typo tên class nên không init slide đúng được
    • Implement section loại stories
    • Recognitions tương tự stories nhưng với background khác
    • Implement loại testimonials/quotes: https://www.infosys.com/services/applied-ai.html
    • Resource center section cũng là 1 loại variation: https://www.infosys.com/services/modernization/offerings/batch-offloading.html
    • Implement offerings với các groups và links
    • Implement section loại title chỉ có title và text
    • Refactor: phân biệt title, subtitle và text: https://www.infosys.com/services/applied-ai.html
    • Thay type bằng label
  • Implement footer
    • Implement footer menu
  • Apply WOW/AOS
    • https://wowjs.uk/docs.html
    • https://github.com/michalsnik/aos
  • Hỗ trợ ngôn ngữ tiếng Việt để tăng reach đối với khách hàng người Việt
• Implement trang /services
  • Có slider gồm những featured content có liên quan chung đến services
• Error: tại sao trang http://dev.vietmaisolutions.com/services/blockchain/ ko show nội dung bên trong lên?
  • Fixed: là do phần code định nghĩa nội dung bị đặt nhầm ngoài frontmaster
• Implement trang /services/a-specific-service/
  • Có slider gồm những featured content có liên quan đến service này
• [3] Implement trang /services/a-specific-service/overview.html
• Implement trang /about
• Implement trang / (home)
• Implement một trang thông thường có khai báo header_background: https://www.infosys.com/newsroom/features/2021/best-big-companies-work-for-2021.html
• [2] Implement một trang thông thường khác: https://www.infosys.com/services/data-analytics/case-studies/future-of-retail-demand.html
  • https://www.infosys.com/services/modernization/offerings/batch-offloading.html
• Các section riêng có thể có menu riêng
  • Các trang nằm trong careers thì có menu riêng –> khai báo trong [[menu.careers]]
  • Các trang nằm trong services thì có menu riêng –> khai báo trong [[menu.services]]
• Dùng fontawesome 4.7.0
• Dùng font Myriad pro
• SVG logo, font Inconsola với generator là https://danmarshall.github.io/google-font-to-svg-path/
• Error: Chưa lấy được baseURL để show trên header
  • Fixed: tất cả các biến khai báo trong config khi lấy ra thì đều phải uppercase ký tự đầu tiên –> site.BaseURL, hoặc .Site.BaseURL hoặc $.Site.BaseURL đều trả cùng kết quả
• Toggle / hide top menu khi scroll
• Thay remote images trong css bằng static images
• CSS/JS nào kích thước nhỏ thì embed vào HTML luôn
• Check responsive style trên phone
• Tách riêng file SCSS cho các section khác nhau (nhưng khi build ra thì merge các file lại với nhau)
• …

OLC

• Kết xuất ra Excel để import vào hóa đơn điện tử

Python

• https://colab.research.google.com/drive/1-ILTvMkVWbox_M2ByJpVGW6faBEoEw_X
• Build GCC 11.2.0 from source in Centos 7

ML

• Paper mới: A Novel Handwritten Digit Classification System Based on Convolutional Neural Network Approach

Hugo

• GREAT GREAT: Code và web ví dụ về dev với Hugo: https://github.com/hugoinaction/hugoinaction
• Cách tạo 1 theme from scratch: https://retrolog.io/blog/creating-a-hugo-theme-from-scratch/
• Cách tạo layout với hero image: https://pakstech.com/blog/hugo-single-page-template/
• GREAT: Different settings for different sections: https://moonbooth.com/hugo/sections/
• Displaying menus: https://bwaycer.github.io/hugo_tutorial.hugo/extras/menus/
• GREAT: Hugo book: https://livebook.manning.com/book/hugo-in-action/chapter-1/v-4/70
• Cách dùng SCSS trong theme: https://moonbooth.com/hugo/how-to-write-a-theme/
• Loop in Hugo: https://mertbakir.gitlab.io/hugo/loops-in-hugo/
• Hugo để build mọi website: https://www.thenewdynamic.com/article/toward-using-a-headless-cms-with-hugo-part-1/
• GREAT: Performance tips: https://martijnvanvreeden.nl/10-ways-to-improve-your-hugo-website-performance/

SVG

• In order to create an SVG file, you need to have a vector version of the logo or illustration
• Creating an SVG file, or Scalable Vector Graphics file, to use for your website can be done with fairly simple design tools like Adobe Illustrator, Photoshop, or Corel Draw.
• Tạo SVG từ text + Google Font: https://danmarshall.github.io/google-font-to-svg-path/

Misc

• rel="dns-prefetch" để tăng performance của trang web
• Slider / carousel: https://github.com/ganlanyuan/tiny-slider
  • Hoặc https://swiperjs.com/ (slider dùng trong nhiều framework, chứng tỏ nó rất ok)
    • Demo: https://swiperjs.com/demos
• Slider: https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
• The YAML names should obey the Python lower_case_with_underscores naming convention
• Page-level .Params are only accessible in lowercase.
• Google fonts:
  • https://fonts.googleapis.com/css?family=Khand:500
  • https://fonts.googleapis.com/css?family=PT%20Sans
  • https://www.cufonfonts.com/font/myriad-pro

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>

<body>

<h1>Generated from: http://www.cufonfonts.com</h1><br/>
<h1 style="font-family:'Myriad Pro Regular';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Condensed';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Condensed Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Light';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Semibold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Semibold Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Bold Condensed';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Bold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Bold Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Myriad Pro Bold Condensed Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>


</body>
</html>

Takeaways

• Nên dùng Stripe cho nghiệp vụ thanh toán