วิธี Share รูป Source code สวยๆ

ปกติถ้าเราจะ Share รูปของ Source code เราก็มักจะใช้ Snipping Tool ใน windows หรือ กด Print screen แล้วส่งเป็นรูปไป เพื่อนๆรู้ไหมว่านอกจากนี้ยังมีอีกวิธีหนึ่งคือใช้ เว็บ carbon https://carbon.now.sh/ ซึ่งสามารถแสดงรูป Source code ของเราได้อย่างสวยงาม รองรับหลายภาษา เหมาะกับการเอาไปโพสใน Facebook, Twitter หรือแม้กระทั้งใส่ใน Blog ต่างๆ นอกจากนี้ยังเอาไปแนบเป็น iframe หรือจะ share link URL ไปให้เปิดเองก็ได้อีกด้วย

มีให้เลือกหลากหลาย ไม่ว่าจะเป็น Image, Medium.com, Iframe หรือ link URL

Export Download เป็นรูปต่างๆก็ได้

ตัวอย่างที่ได้จาก เว็บ carbon
Code ตัวอย่าง

#!/usr/bin/env python3
# Mobile Verification Toolkit (MVT)
# Copyright (c) 2021 MVT Project Developers.
# See the file 'LICENSE' for usage and copying permissions, or find a copy at
#   https://github.com/mvt-project/mvt/blob/main/LICENSE

import os
import sys

sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

from mvt import android
android.cli()

Share โดย URL
https://bit.ly/3zGlFmd

Share โดย iframe

Share โดย รูป

CodeBlocks ขึ้น Can’t find compiler

ใครที่ลง CodeBlocks แล้วหลังจากเปิดโปรแกรมแล้วมีขึ้น warning แบบนี้บาง
Environment error
Can’t find compiler executable in your configured search path’s for GNU GCC Complier.

สาเหตุที่เป็นแบบนี้เพราะเพื่อนไม่ได้ติดตั้ง MinGW หรืออาจจะติดตั้งแล้วแต่ไม่ได้ ตั้ง Path นั้นเอง
สามารถตรวจสอบได้โดยการพิมพ์ command line

gcc –version
'gcc' is not recognized as an internal or external command,
operable program or batch file.

วิธีแก้ไข ก่อนอื่นให้แน่ใจว่าเรา Dowload CodeBlocks ที่มี MinGW มาด้วย โดย Download ที่ https://www.codeblocks.org/downloads/binaries/

ให้เลือกที่มีเขียนว่า mingw หรือ mingw-32bit สำหรับคนที่ใช้เครื่อง 32 bit

หลังจากโหลดมาแล้วก็ตอนที่ติดตั้งให้ เลือกติ๊กถูกที่ MinGW Complier Suite ด้วย

ทำการกำหนด Path ของ compiler โดยไปที่ My com เลือก properties > Advance System settings > แถบ Advanced > เลือก Environment variables

เลือกไปที่ New ในส่วนของ System variables แล้วเลือกไปที่ Path ทำการ Edit

กดไปที่ New แล้วใส่ Path ของ Complier ลงไป โดยปกติจะเป็น C:\Program Files\CodeBlocks\MinGW\bin

สามารถทดลองเช็คได้โดยเปิด Command line เช็คเหมือนเดิม พิมพ์ gcc –version จะต้องขึ้น MinGW version แสดงขึ้นมา

gcc --version
gcc (x86_64-posix-seh-rev0, Built by MinGW-W64 project) 8.1.0
Copyright (C) 2018 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

ทำตามขั้นตอนแค่นี้ก็จะสามารถใช้งาน CodeBlocks ได้แล้วโดยตัว CodeBlocks จะทำการเรียก complier MinGW โดยอัตโนมัติ

C/C++ Advanced Lint Extension ที่ต้องมีสำหรับคนเขียนโปรแกรม C/C++

บทความนี้จะมาแนะนำ Extension ที่สำหรับคนเขียนโปรแกรม C/C++ จำเป็นอย่างยิ่งที่ควรจะมีติดไว้ใน Vs code นั้นก็คือ C/C++ Advanced Lint โดยเจ้า C/C++ Advanced Lint ตัวนี้จะทำหน้าที่เป็นตัวตรวจสอบข้อผิดพลาดในการเขียน Code ของเรา หรือการเขียนที่มีโอกาสที่จะเกิด Bug โดยทุกครั้งที่เราเขียน Code หรือทุกครั้งที่เรา save ไฟล์ C/C++ Advanced Lint จะสั่งให้ Static analysis ตรวจสอบ Code โดยอัตโนมัติ โดยรองรับ Static analysis ต่างๆ ไม่ว่าจะเป็น Cppcheck, Clang, หรือ FlexeLint

มาดูวิธีการติดตั้งและใช้งานกันดีกว่า ในที่นี้จะยกตัวอย่างการใช้งาน C/C++ Advanced Lint ร่วมกับ Cppcheck

โดยลง Extension ที่มีชื่อว่า C/C++ Advanced Lint

สำหรับการใช้งาน ก่อนอื่นให้เราลง Cppcheck สามารถทำตามบทความนี้ได้เลยถ้าใครไม่เคยลง แนะนำโปรแกรม Cppcheck

หลังจากลงเสร็จแล้วก็ Restart แล้วอย่าลืมทดลองใช้ command cppcheck –version ถ้าขึ้นเวอร์ชั่นก็ถือว่าติดตั้งได้สำเร็จ

หลังจากนั้นก็จากนั้นก็เข้ามา Setting C/C++ Advanced Lint Extension โดยเลือก Enable Cppcheck และ Cppcheck Executable เลือก cppcheck

ส่วน Language ก็เลือกตามที่เราใช้งาน ในที่นี้เลือกเป็น C และเราอยากจะให้ Lint ทำการเช็ค Code เราตอนไหน สามารถเลือกได้ระหว่าง หลังจากเรากด Save ไฟล์ก็เลือก onSave หรือ จะให้ตรวจสอบไปเรื่อยๆขณะพิมพ์ก็เลือกเป็น onType

พอตอนเราใช้งานจริงก็จะขึ้นดังรูปให้เราดูตรง tab ที่เขียนว่า PROBLEMS ก็จะเห็นว่ามีการแจ้งเตื่อน และ warning ขึ้นมาดังรูป ทำให้การเขียน code ของเราสามารถตรวจเจอ Bug ได้เร็วและไม่มีปัญหาต่อไปภายหลัง เรียกได้ว่า เจอ Bug ตั้งแต่เนิ่นๆกันเลยทีเดียว

เว็บไซต์ช่วยตรวจสอบ XML

ถ้าเราอยากจะตรวจสอบว่าไฟล์ xml (eXtensible Markup Language) หรือ Syntax ของภาษาว่าถูกต้องหรือไม่ เราสามารถใช้เว็บไซต์ที่สามารถตรวจสอบ XML ได้หรือที่เราเรียกกันว่า XML Validator โดยเว็บไฟไซต์ที่ว่าก็คือเว็บนี้ https://codebeautify.org/xmlvalidator

โดยเราสามารถนำเอา Code มาแปะแล้วให้เว็บช่วยตรวจสอบหรือจะใช้วิธีการอัพโหลดไฟล์เข้าไปโดยอัพโหลดจากเครื่องของเหล่าหรือจะวาง Link URL ก็ได้

โดยสมมติว่าถ้า XML ของเรามีส่วนผิด ตัวเว็บก็จะขึ้นฟ้องว่าผิดที่บรรทัดไหน เพราะอะไร ทำให้เราสามารถกลับไปแก้ไขหรือวิเคราะห์สาเหตุของไฟล์ XML ที่ผิดปกติได้อย่างง่ายดาย

ตัวอย่างไฟล์ XML ที่มีการพิมพ์จุดไว้ที่บรรทัดแรก

.<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="CompilerConfiguration">
    <option name="DEFAULT_COMPILER" value="Javac" />
    <resourceExtensions />
    <wildcardResourcePatterns>
      <entry name="!?*.java" />
      <entry name="!?*.form" />
      <entry name="!?*.class" />
      <entry name="!?*.groovy" />
      <entry name="!?*.scala" />
      <entry name="!?*.flex" />
      <entry name="!?*.kt" />
      <entry name="!?*.clj" />
    </wildcardResourcePatterns>
    <annotationProcessing>
      <profile default="true" name="Default" enabled="false">
        <processorPath useClasspath="true" />
      </profile>
    </annotationProcessing>
  </component>
</project>

เอาเข้าไปตรวจสอบ XML Validator ก็จะเห็นขึ้นคำเตือนที่บรรทัดที่ 1

วิธีการตรวจสอบเวอร์ชั่น Package ที่ติดตั้งใน Python

วิธีการตรวจสอบว่า Package Python ที่เราได้เคยติดตั้งลงไปแล้วนั้นเป็นเวอร์ชั่นอะไร โดยเราสามารถทำได้ง่ายๆโดย

ใช้คำสั่งว่า pip show xxx โดย xxx นั้นคือชื่อ package

ตัวอย่างการใช้คำสั่งในการตรวจสอบว่า pyserial package ที่เราเคยติดตั้งลงไปนั้นเป็นเวอร์ชั่นอะไรอยู่

จะเห็นว่าคำสั่ง pip show pyserial ได้แสดงข้อมูลของตัว pyserial Package ที่เราได้ติดตั้งลงไป ไม่ว่าจะเป็นเวอร์ชั่นที่ติดตั้ง, ชื่อของ Package, URL Package และตำแหน่งที่ติดตั้งลงไปในเครื่องทั้งหมด

วิธีติดตั้ง Selenium และการใช้งานกับ Python

บทความนี้จะมาสอนวิธีลง Selenium IDE ใช้งานกับ Google Chrome ร่วมกับ Python เบื้องต้น โดยติดตั้งลงบน Windows มาเริ่มกันที่ก่อนอื่นให้เราไปโหลด Extension ของ Google Chrome ที่ https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=en

มาทดลองการใช้งานกันหน่อย โดยไปที่ Extension เลือก Selenium IDE

เลือก Create a new project และตั้งชื่อ project

ใส่เว็บ Facebook ไปทดสอบหน่อย กด START RECORDING

จะมาที่หน้าเว็บที่เราจะทดสอบก็จะเห็น Selenium IDE is recording อยู่ด้านขวาล่างสีแดงๆ ให้เรากรอก Username password

ในหน้าต่าง Selenium เราก็จะเห็น Command ต่างๆที่เราทำการบันทึกเกิดขึ้นเป็น Command เมื่อเราบันทึกเสร็จแล้วให้เรากดปุ่ม Stop recording ขวามือบน เราสามารถทดสอบการทำงานตามที่เราบันทึกไปได้โดยกดปุ่ม Play Run all tests ด้านซ้ายมือเพื่อทดสอบดูได้

เราสามารถ Export ออกมาเป็น Code เพื่อนำมาเขียนเงื่อนไขต่างๆเพื่อประยุกต์การใช้งานได้โดยการคลิกขวาที่ Test แล้วเลือก Export

จะเห็นว่าสามารถเลือกภาษาที่เราใช้งานได้ไม่ว่าจะเป็น C#, Java, Javascript, Python, Ruby โดยในที่นี้จะเลือกเป็น Python แล้วกด Export

ก็จะได้ Code Python มาตามด้านล่างนี้

# Generated by Selenium IDE
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

class TestLogin():
  def setup_method(self, method):
    self.driver = webdriver.Chrome()
    self.vars = {}
  
  def teardown_method(self, method):
    self.driver.quit()
  
  def test_login(self):
    # Test name: login
    # Step # | name | target | value
    # 1 | open | https://www.facebook.com/ | 
    self.driver.get("https://www.facebook.com/")
    # 2 | setWindowSize | 974x1050 | 
    self.driver.set_window_size(974, 1050)
    # 3 | click | id=email | 
    self.driver.find_element(By.ID, "email").click()
    # 4 | click | id=email | 
    self.driver.find_element(By.ID, "email").click()
    # 5 | type | id=email | username
    self.driver.find_element(By.ID, "email").send_keys("username")
    # 6 | type | id=pass | pass
    self.driver.find_element(By.ID, "pass").send_keys("pass")
  

โดยก่อนใช้งาน Selenium กับ python เราจะต้องไปติดตั้ง pytest และ selenium โดยใช้คำสั่ง

pip install pytest
pip install selenium

แล้วก็ที่ขาดไม่ได้เลยก็คือ Chrome Driver
https://sites.google.com/a/chromium.org/chromedriver/home
เลือก ตัว Stable และเลือก Windows version

Unzip แล้วนำไปวางที่ Drive C:

ก่อนที่จะ run เราต้องแก้ไข code บรรทัดที่ 15 เป็น

self.driver = webdriver.Chrome(executable_path=r"C:\chromedriver.exe")

และเพิ่มบรรดทัดที่ 37 – 39

obj = TestLogin()
obj.setup_method(obj)
obj.test_login()

ก็จะกลายเป็นแบบนี้ save เป็นไฟล์ชื่อว่า test_login2.py

# Generated by Selenium IDE
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

class TestLogin():
  def setup_method(self, method):
    self.driver = webdriver.Chrome(executable_path=r"C:\chromedriver.exe")
    self.vars = {}
  
  def teardown_method(self, method):
    self.driver.quit()
  
  def test_login(self):
    # Test name: login
    # Step # | name | target | value
    # 1 | open | https://www.facebook.com/ | 
    self.driver.get("https://www.facebook.com/")
    # 2 | setWindowSize | 974x1050 | 
    self.driver.set_window_size(974, 1050)
    # 3 | click | id=email | 
    self.driver.find_element(By.ID, "email").click()
    # 4 | click | id=email | 
    self.driver.find_element(By.ID, "email").click()
    # 5 | type | id=email | username
    self.driver.find_element(By.ID, "email").send_keys("username")
    # 6 | type | id=pass | pass
    self.driver.find_element(By.ID, "pass").send_keys("pass")
  
obj = TestLogin()
obj.setup_method(obj)
obj.test_login()

แล้วเราลองนำ code นี้ไป run ดูใน command line

python test_login2.py

ก็จะเห็นว่าตัว Selenium จะทำการเปิด Chrome (จะเห็นว่ามีขึ้นว่า Chrome is being controlled by automated test software) แล้วทำงานตาม command ที่เราเขียนอัตโนมัติแล้วละ

แนะนำโปรแกรม Cppcheck

Cppcheck เป็นโปรแกรมที่เอาไว้ตรวจสอบวิเคราะห์การเขียนโปรแกรมภาษา C หรือ C++ (รวมไปถึง Embedded C/C++ ด้วย) ที่ไม่ถูกต้องหรืออาจมีโอกาสทำให้เกิด Bug หรือสามารถเรียกได้อีกแบบว่าเป็น C/C++ static code analysis tool ซึ่ง Cppcheck นั้นสามารถแสดงผลการตรวจเช็คโดยแจ้งเตือนได้หลายแบบหลายระดับตั้งแต่ระดับ Warning ไปจนถึง Critical ทำให้เราสามารถเขียน Code ภาษา C หรือ C++ ได้อย่างมีประสิทธิภาพลดความผิดพลาดลดโอกาสการเกิด Bug โดยบทความนี้จะมาแนะนำวิธีใช้งานเบื้องต้นและการนำไปใช้งาน

โดยเพื่อนๆสามารถ Download Cppcheck นำไปใช้งานได้ฟรีๆที่ http://cppcheck.sourceforge.net/

เลือกโหลดที่ Windows 64-bit Installer

 

การสร้างโปรเจคใน Cppcheck ครั้งแรก

หลังจากเราติดตั้งเสร็จแล้ว ให้เราเปิดโปรแกรมมาแล้วเลือกไปที่  File เลือก New Project File

 

เลือกที่ Save Project

 

ที่แถบ Paths and Defines ให้ กด Add ทั้งสอง ที่ Paths และ Include Paths ให้เลือกที่เก็บ Folder ของไฟล์โปรแกรมของเรา (.c, .h, .cpp)

 

ที่แถบ Addon ให้เราเลือก  Cert ด้วย โดยโปรแกรมจะทำการตรวจเช็คตามกฏต่างๆของ Cert coding standard (มาตรฐานการเขียน Code ภาษา C และ C++ สามารถดูเพิ่มเติมได้ที่ https://wiki.sei.cmu.edu/confluence/display/c/SEI+CERT+C+Coding+Standard และ https://wiki.sei.cmu.edu/confluence/pages/viewpage.action?pageId=88046682) แล้วก็กด OK

 

กด Yes ต่อ

Cppcheck จะทำการตรวจสอบ Code ของเราและแสดงผลการตรวจสอบ โดยแบ่งเป็น Errors, Warning, Styles warning, Portability waring, Performance warning และ Information message โดยสามารถเลือกเปิดปิดดูได้ที่ไอคอนด้านบนได้เลย

 

 

สามารถทดลองตรวจสอบ Code ของเรา โดยทดลองใช้งาน Demo ตรวจสอบผ่านเว็บได้่ที่

http://cppcheck.net/demo/

วิธีแก้ Codeblocks Complie ช้า

มีใครใช้โปรแกรม Codeblock แล้วเจอปัญหาว่าเวลา Compile แล้วใช้เวลานานมากๆกว่าจะ Compile เสร็จ (บางทีใช้เวลาเป็น 10 วิ) แล้วจะแก้ไขทำยังให้มันเร็วขึ้นดีนะ ในบทความนี้จะมามาบอกวิธีทำกัน

ตัวอย่างโปรแกรมที่ Compile ในรูปใช้เวลาถึง 6.2วินาที กว่าจะแสดงโปรแกรมที่เราเขียนขึ้นมา

จริงๆแล้วสาเหตุส่วนใหญ่ที่ทำให้ compile ช้ามากๆกว่าจะ run ได้นั้นก็อาจจะเป็นเพราะ โปรแกรม Antivirus นั้นทำการ scan ไวรัสโปรแกรมของเราทุกครั้งที่เราสร้างโปรแกรม ไฟล์ .exe ขึ้นมานั้นเอง
วิธีแก้ไขก็คือให้ไปปิด โปรแกรม Antivirus หรือจะกดให้โปรแกรมอยู่ใน mode silent ก็ได้ ยกตัวอย่างโปรแกรม Avast เราสามารถเพิ่มโปรแกรมที่ยกเว้นการ Scan ได้โดยเข้าไป Setting ได้ที่ Exclusions

หลังจากลองปิดโปรแกรม Antivirus ไป ก็จะเห็นว่า Compile ใช้เวลาเหลือ 0.04 วินาทีเท่านั้น

วิธีแปลง Shift js เป็น UTF-8 โดย ICONV


บทความนี้จะมาสอนวิธีการแปลง encode โดยใช้ ICONV ในตัวอย่างจะใช้การแปลง Encode ภาษาญี่ปุ่น Encode Shift js เป็น UTF-8 ซึ่งตัวอย่างนี้จะทำบน Windows โดยใช้ LibIconv for Windows

ก่อนอื่นให้เราไปโหลด LibIconv for Windows http://gnuwin32.sourceforge.net/packages/libiconv.htm

เลือก Download • Complete package, except sources
หรือกด Link นี้ http://gnuwin32.sourceforge.net/downlinks/libiconv.php

ทำการติดตั้งตามปกติเสร็จแล้วก็ Restart เครื่อง แล้วทดสอบว่า iconv ใช้งานได้ไหมโดยการเช็คจาก version

ถ้าใช้งานได้ก็ทำขั้นตอนถัดไปนั้นก็คือเริ่มทำการแปลงได้เลย

ตัวอย่างจะเป็นการแปลงไฟล์ test.txt ที่ encode Shift js ไป UTF-8 หลังแปลงแล้วเป็นไฟล์ test2.txt เราสามารถใช้คำสั่งว่า
iconv -f SHIFT_JIS -t UTF-8 test.txt > test2.txt

ซึ่ง สามารถเอาไปใช้กับนามสกุลอื่นก็ได้เช่นไฟล์ code ของเรา .h
iconv -f SHIFT_JIS -t UTF-8 typedef.h > typedef2.h

ตัวอย่างก่อนแปลงเปิดดูใน encode UTF-8 จะเห็นว่าตรง comment อ่านไม่ออกเลยขึ้นเป็นภาษาต่างด้าว

ถ้าเปิดดูใน encode Shift js ก็จะอ่านคันจิออก

หลังแปลงแล้วก็จะได้ไฟล์ typedef2.h เปิดดูใน UTF-8 ก็เห็นว่าอ่านได้แล้วตรงกับต้นฉบับใน Shift js เลย

แต่ข้อควรระวังก็คือใน UTF-8 อาจจะไม่มีคันจิบางตัวอักษร ทำให้อ่านไม่ออกได้เหมือนกัน ซึ่งเพื่อนๆสามารถประยุกต์ใช้งาน ICONV กับ Encode อื่นๆได้ในลักษณะเดียวกัน รวมไปถึงประยุกต์ใช้งานในการแปลง Encode หลายๆไฟล์หรือทั้ง Folder โดยนำ ICONV ไปใช้งานร่วมกับ Scrip ต่างๆได้ โดย Document ฉบับเต็ม และ encode อื่นๆที่ ICONV support สามารถเช็คได้ที่นี้ http://www.gnu.org/software/libiconv/