Stencil : Styling

December 9, 2018 09:44

Shadow DOM Shadow DOM เป็น API ที่อยู่ใน browser ที่ให้ความสามารถในทำ DOM encapsulation และ style encapsulation โดย Shadow DOM จะแยก component ออกจากภายนอก ทำให้ไม่ต้องกังวลกับ scope ของ css หรือผลกระทบกับ component ภายนอก หรือ component ภายนอกจะกระทบกับ component ภายใน ใน Stencil ค่า default การใช้งาน Shadow DOM ใน web component ที่สร้างด้วย Stencil จะถูกปิดอยู่  หากต้องการเปิดใช้งาน Shadow DOM ใน web component ต้องกำหนดค่า shadow param ใน component decorator ดังตัวอย่างด้านล่างนี้ @Component({ tag: ‘shadow-component’, styleUrl: ‘shadow-component.scss’, shadow: true }) export class ShadowComponent { } สิ่งจำเป็นเมื่อเปิดใช้งาน Shadow DOM QuerySelector เมื่อต้องการ query element ที่อยู่ภายใน web component จะต้องใช้ this.el.shadowRoot.querySelector() เนื่องจาก DOM ภายใน web component อยู่ภายใน shadowRoot Global Styles จะต้องใช้ CSS custom properties css selector สำหรับ web component element คือ “:host”  selector โดยทั่วไป จะเก็บ styles ไว้ภายไต้ ชื่อ tag ของ component นั้น my-element { div { background: blue; } } ในกรณีของ Shadow DOM  อยู่ภายใต้ tag :host :host { div { background: blue; } } Scoped CSS สำหรับ browser ที่ไม่สนับสนุน Shadow DOM, web component ที่สร้างโดย Stencil จะกลับไปใช้ scoped CSS แทนที่จะ load Shadow DOM polyfill ที่มีขนาดใหญ่  Scoped CSS จะทำการกำหนดขอบเขต CSS ให้กับ element โดยอัตโนมัตตอน runtime CSS Variables CSS Variables เหมือนกับ Sass Variables แต่ต่างกันตรงที่ CSS Variables รวมอยู่ใน browser โดยที่ CSS Variables ให้ความสามารถในการกำหนด CSS properties ที่ใช้ได้ภายใน app  ตัวอย่างการใช้งานที่พบบ่อยคือ การกำหนดสี (color) ถ้ามีสีหลักที่ต้องการใช้ร่วมกันทั้ง app แทนที่จะกำหนดสีนั้นๆในแต่ละที่ที่ใช้งาน ก็จะสร้าง variable ขึ้นมาและใช้ variable นั้นในทุกๆที่ที่ต้องการ ซึ่งถ้าต้องการเปลี่ยนสี ก็สามารถเปลี่ยนที่ variable ที่เดียว การใช้งาน CSS Variables ใน Stencil สร้าง

Read More »

Virtual data center with OpenNebula

November 29, 2018 14:17

OpenNebula เป็นชื่อของ open source software สำหรับทำ virtual data center เวอร์ชั่นล่าสุดคือ 5.6.1 (https://opennebula.org) ผมได้ทดลองในห้องปฏิบัติการ และเขียนเป็นขั้นตอนการติดตั้งจนกระทั่งได้ VM ขึ้นมา แต่ยังไม่ลงรายละเอียดถึงขั้นใช้งาน storage network ได้ ซึ่งจะได้ทดลองกันต่อไป ในตอนนี้ จะเรียกว่า basic set up ก็ได้นะ ในการ set up ระบบจริงตามคำแนะนำ แต่ละเครื่องควรมี network card 2 cards เพื่อแยกระหว่าง network ที่ให้บริการ กับ Management network การ set up จะต้องมีเครื่องที่เป็น Front-end เพื่อทำหน้าที่เป็น database และเว็บเพจสำหรับทำ configuration และสั่งการ และจะต้องมีเครื่องที่เป็น Hypervisor อย่างน้อย 1 เครื่อง โดยเลือกได้ว่าจะใช้ KVM หรือ vcenter สเปคเครื่อง hypervisor นี้ต้องรองรับ Virtualization extensions (Intel VT-x or AMD-V) เตรียมการทดลองโดยใช้ เครื่องคอมพิวเตอร์ที่ผมนำมาใช้มี 3 เครื่อง อายุเครื่องก็พอสมควร (ตามกำลังทรัพย์ที่มีในห้องปฏิบัติการ) แต่ทั้ง 3 เครื่องนี้ มีเพียง 1 network card ครับ เครื่อง Front-end 1 เครื่อง สเปค Pentium(R) Dual-Core CPU E5200 @ 2.50GHz มี RAM 4 GB อันนี้เป็นเครื่องทั่วไปที่รัน apache2 web server และ mariadb database ได้ ใช้เครื่อง KVM จำนวน 2 เครื่อง เพื่อจะให้เห็นว่าสามารถสร้าง VM ไปที่ KVM node ที่ต้องการได้ เครื่อง KVM node01 เป็น AMD Phenom(tm) II X4 945 Processor มี RAM 8 GB และ KVM node02 เป็น Intel(R) Core(TM) i5 CPU M 520 @ 2.40GHz มี RAM 4 GB นอกจากเครื่องคอมฯ แล้ว ผมก็มี network switch (L2-managed) เพื่อกำหนด port ให้รองรับ 802.1Q VLAN ผมออกแบบให้มี 2 VLAN คือ VLAN ID 6 (untagged) และ VLAN ID 7 (tagged) ซึ่ง VLAN 6 ก็คือ ครึ่งแรกของ network class C 192.168.6.0 เขียนแบบ CIDR 192.168.6.0/25 มี gateway คือ 192.168.6.1 และ VLAN 7 ก็คือ ครึ่งหลังของ network 192.168.6.128/25 มี gateway คือ 192.168.6.129 ผมเขียนขั้นตอนไว้ในเว็บไซต์

Read More »

python #02 – ติดตั้ง Tensorflow และ Keras

November 27, 2018 17:16

ต่อจาก python #01 – ติดตั้ง jupyter notebook บน Windows ต่อไปเราจะใช้ Machine Learning Library “Tensorflow” และใช้ “Keras” ซึ่งเป็น High-level Neuron Network API ซึ่งจะไปเรียกใช้ Backend คือ Tensorflow อีกชั้นหนึ่ง จาก jupyter notebook ทำตามขั้นตอนต่อไปนี 1.  คำสั่งต่อไปนี้ เพื่อติดตั้ง Tensorflow 2.  คำสั่งต่อไปนี้ เพื่อติดตั้ง Keras จะได้ผลประมาณนี้ สร้าง Neural Network ด้วย Keras เริ่มจาก import ส่วนต่าง ๆ ได้แก่ Models และ Layers สมมุติเราจะสร้าง Model แบบนี้ เสร็จแล้วก็ต้อง compile ตั้งค่า Hyperparameters ต่าง ๆ ดู Summary ได้ผลประมาณนี้

Read More »

python #01 – ติดตั้ง jupyter notebook บน Windows

November 27, 2018 10:43

jupyter Notebook เป็น Open Source Web Application ให้เราสามารถเขียนภาษา python ได้ง่ายขึ้น สามารถ Share ได้ด้วย และยังสามารถใส่คำอธิบาย (Markdown) ได้ด้วย ติดตั้งลงในเครื่องส่วนตัวได้ ในบทความนี้ แสดงวิธีติดตั้งและใช้งานบน Microsoft Windows ดังนี้ 1. ขั้นแรก ต้องมี Python ก่อน (หมายเหตุ: ณ เวลานี้ 27/11/61 รุ่นล่าสุดคือ 3.7.1 แต่เนื่องจากจะแนะนำการใช้งาน Tensorflow, Keras จึงยังต้องเลือกใช้ Python 3.6.7) https://www.python.org/ftp/python/3.6.7/python-3.6.7.exe เมื่อติดตั้งแล้ว ควร Restart เครื่องสักหนึ่งครั้ง 2. ติดตั้ง pip ซึ่งใช้ในการติดตั้งเครื่องมือต่าง ๆเปิด Windows Console (กดปุ่ม Win + R) แล้วพิมพ์คำสั่ง cmdจากนั้น ใช้คำสั่งต่อไปนี้ 3. (Optional) ติดตั้ง virtualenv เพื่อให้สามารถจัดการ Virtual Environment ได้ง่ายขึ้น เพราะอาจจะต้องทำหลาย Project ซึ่งใช้รุ่นของ Package/Module ที่แตกต่างกันบนเครื่องเดียวกัน 4. ติดตั้ง jupyter notebook 5. เมื่อติดตั้งเสร็จแล้ว ก็ใช้คำสั่งต่อไปนี้ ระบบจะเปิด Web Browser มายัง http://localhost:8888 จากนั้น คลิกที่ปุ่ม New > Python3 จากนั้น เราก็จะสามารถใช้คำสั่ง Python ทั่ว ๆ ไปได้ นอกจากนี้ ยัง Save ได้ และสามารถส่งต่อให้ผู้อื่นใช้ได้ด้วย

Read More »

Ubuntu server 18.04 config static IP with netplan

November 26, 2018 15:41

เดิมก่อนหน้า Ubuntu server 18.04 LTS จะออกมาให้ใช้งานกันนั้น จะเป็น Ubuntu server 16.04 LTS เราตั้งค่า (config) static IP ให้กับ server ด้วยไฟล์นี้ /etc/network/interfaces ซึ่งก็คือ software package ชื่อ ifupdown และ DNS resolver ที่ใช้ก็คือ resolvconf แต่ใน Ubuntu server 18.04 นี้ เปลี่ยนไปใช้ package ชื่อ netplan แก้ไขที่ไฟล์ /etc/netplan/01-netcfg.yaml และใช้ DNS resolver คือ systemd-resolve ซึ่งจะ connect สอบถามชื่อ DNS จาก internal DNS ที่ IP 127.0.0.53 (ตรวจดูด้วยคำสั่ง cat /etc/resolv.conf) โดย default จะเป็นค่า network interface แบบ รับค่า IP มาจาก DHCP server ไฟล์ /etc/netplan/01-netcfg.yaml network: version: 2 renderer: networkd ethernets: enp0s3: dhcp4: yes dhcp6: yes หากต้องการใช้เลข IP แบบ Static IP ก็ต้องตั้งค่าเองในแฟ้ม /etc/netplan/01-netcfg.yaml เป็นตัวอย่างประมาณว่า IP คือ 10.0.100.251 ใน class C (/24) มี gateway คือ 10.0.100.1 ทำหน้าที่ nameserver ด้วย และมี nameserver ที่สองคือ 192.100.77.10 network: version: 2 renderer: networkd ethernets: enp0s3: dhcp4: no addresses: [ 10.0.100.251/24 ] gateway4: 10.0.100.1 nameservers: addresses: – 10.0.100.1 – 192.100.77.10 หลังจากแก้ไขค่าเสร็จแล้ว สั่งให้ network ทำงานใหม่ ใช้คำสั่ง sudo netplan apply ถ้าตอนนี้ใช้ netplan version 0.36.3 เราสามารถตั้งชื่อ network interface เป็นชื่อ vif1 แทน physical network interface เดิม ก่อนอื่น ให้ใช้คำสั่ง ifconfig เพื่อดูค่า MAC address ของ enp0s3 สมมติคือ 44:bb:33:85:91:08 ตัวอย่างการแก้ไขข้อมูล network: version: 2 renderer: networkd ethernets: vif1: match: macaddress: “44:bb:33:85:91:08” set-name: vif1 dhcp4: no addresses: [ 10.0.100.251/24 ] gateway4: 10.0.100.1 nameservers: addresses: – 10.0.100.1 – 192.100.77.10 หลังจากแก้ไขค่าเสร็จแล้ว ใช้คำสั่ง sudo reboot หลาย ๆ คน อาจจะอยากตั้งชื่อ network interface เป็นชื่อ eth0

Read More »