Example Code: html2canvas แบบฉบับเอาไปลองใช้จริงมาแล้ว

สาเหตุมาจากตัวเว็บที่พัฒนาตัวนี้ ข้อมูลการใช้มันน้อยเกิ๊นนนน แทบต้องไปค้นหาต่อใน Stackoverflow เอาเองว่า ทำอย่างนี้มันต้องทำยังไงวะ ทำไมไม่ทำเอกสารให้มันดีๆ หน่อย แบบมีหลายๆ ตัวอย่างหน่อย อ่ะ อันนี้เคนก็หาและเอาไปใช้จริงจนสามารถใช้งานได้พอควรละ เอามาให้เป็นโค้ดตัวอย่างสำหรับนำไปเริ่มต้นใช้งานได้ง่าย…

แก้บั๊ก Error please install mysql2 manually บน Vercel

เวลาใช้ Sequalize ด้วย mysql แล้วอัพขึ้นไปที่ Vercel เคนเจอ Error นี้เลย แต่ว่าตอนทำบนเครื่องตัวเองคือไม่เป็นไรนะ ใช้งานได้ปกติ วิธีการแก้ไข ไปที่ไฟล์ models/index.js ทำการ import mysql2 เข้ามา import mysql2 from ‘mysql2’; แล้วใส่โค้ดอันนี้เข้าไปหลัง const db = {}; if (config.dialect === ‘mysql’) { …

[PHP] เทียบวันที่ และเวลา เพื่อแสดงว่า ผ่านมาเท่าไหร่แล้ว หรือ เหลืออีกเท่าไหร่ถึงจะถึง

แบบถ้าเอาเวลาตั้งต้น กับเวลาที่ต้องการ มาลบกันแล้วหาว่าผ่านมานานเท่าไหร่แล้ว กี่วัน กี่นาที หรือเมื่อไม่กี่นาทีที่ผ่าน function time_elapsed_string($datetime, $full = false) { $now = new DateTime; $ago = new DateTime($datetime); $diff = $now->diff($ago); // หาจำนวนสัปดาห์ เผื่อใครต้องการ แต่ตอนนี้ผม…

Submit Form ไม่ได้เพราะโค้ด Html script tag

เคยเจอกันไหมครับ พอดีเราแบบอยากจะให้เอาโค้ด Html หรือโค้ด Javascript เช่น โค้ดพวก Messenger หรือ Google ให้ใส่ใน Textarea หรือ CKEditor แล้วบันทึกลง Database แต่พอ Submit แล้วดันขึ้น Error 403 Forbidden: You don’t have permission to access this resource. ตัวอย่างโค้ดที่อยากใส่ <!– Messenger ปลั๊…

Python ดาวน์โหลดรูปจำนวนมากได้ง่ายๆ

จะดาวน์โหลดรูปตามคีย์เวิร์ดที่ต้องการ ปกติก็ต้องไปค้นหาใน Google Images และทยอยเซฟมา แต่ถ้าอยากดาวน์โหลดรูปจำนวนมากๆ ล่ะ? เซฟจนมือหงิกแน่ๆ แต่ Python ก็ทำได้ง่ายๆ ด้วยแพ็คเกจ simple_image_download from simple_image_download import simple_image_download as sid response = sid.simple_image_download key…

Sublime Text วิธีการทำให้ Ctrl+Tab ขยับเรียงตามการเปิดไฟล์

โดยพื้นฐานเวลาเรากด Ctrl+Tab มันจะเป็นการขยับตามการใช้งานปัจจุบันย้อนกลับไปอันที่แล้ว เช่น มี 3 ไฟล์ 1,2,3 จากนั้นเปิด 1 แล้วไปเปิด 2 เมื่อเรากด Ctrl+Tab มันจะกลับไป 1 อันแรก และ 3 อันที่ 2 แทนที่จะขยับไป 3 ที่เป็นอันที่ต่อจาก 2 ก่อน แล้วค่อยไป 1 วิธีการตั้งค่าให้เรียงตามลำดับ ไปที่ Sublime Text -> …

ใช้ filegetcontents() ไม่ได้ ก็ลองใช้ cURL แทนดูสิ

ตัวอย่างงานนี้ ก็คือเราจะไปเอารายละเอียด IP ผู้ใช้ที่เข้ามาในเว็บไซต์ว่า IP นี้มีรายละเอียดอย่างไร อยู่ประเทศไหน อะไรยังไงบ้าง ก็ไปหาๆ โค้ดจากต่างประเทศ ส่วนมากก็จะให้ใช้ file_get_contents() ซึ่งมันต้องไปเปิด allow_url_fopen ที่ php.ini ของเซิร์ฟเวอร์นี่สิ ด้วยความขี้เกียจ ก็ไปหาวิธีอื่นว่ามีไหม จึง…

เข้าใจการใช้สัญลักษณ์ + > ~ ใน CSS

เวลาเราเขียน CSS เราจะเจอสัญลักษณ์อยู่หลายแบบเลย แต่ที่ใช้กันส่วนใหญ่จะเจอ 4 แบบนี้ คือ แบบเว้นวรรค เรียกว่า Descendant Selectorแบบใช้เครื่องหมาย > เรียกว่า Child Selectorแบบใช้เครื่องหมาย + เรียกว่า Adjacent Sibling Selectorแบบใช้เครื่องหมาย ~ เรียกว่า General Sibling Selector] โค้ดเริ่มต้น เป็นโค้…

เรียนรู้อะไรจาก Laravel ไปแล้วบ้าง

รวบรวมสิ่งที่ได้เรียนรู้จากการใช้งาน Laravel เผื่อได้ย้อนกลับมาอ่าน และการจดก็เป็นการจำที่ดี Livewire ส่วนเสริมที่ทำให้ Laravel มีความสามารถในการสร้าง Component และเรียกใช้ได้ เหมือน Component ใน React, Vue, Angular ก็ถือว่าเจ๋งดีอยู่ ทำให้ PHP มี Component ได้ แม้ไม่ต้องใช้ Javascript TailwindCSS F…

เริ่มต้นกับ Big Data กับ Python

หลังจากเป็นมือใหม่มาราวๆ 2 สัปดาห์ ก็พอจะมาบอกได้ว่ามันน่าจะเริ่มจากตรงไหนอะไรยังไงนะ เนื่องเพราะแฟนเรียน Big Data นั่นแหละ เราเลยต้องรู้ด้วย เนื่องจากเคนใช้ iMac เพราะงั้นทุกโปรแกรมที่ใช้ก็จะอิงจาก Mac เป็นหลักนะ ใครใช้ Windows ก็อาจจะต้องไปลองหาๆ เพิ่มเติมเอานะ จะพยายามพิมพ์เอาไว้เพื่อให้อ่านแล้วเ…

Selector สิ่งที่ต้องการ และ get ค่าที่ต้องการ

ใน Inpect Element ของ Web Browser โดยเขียนภาษา Javascript นั่นเอง ด้วยคำสั่ง querySelectorAll แต่ตัวคำสั่งเวลาไปหามันจะกลับมาในรูปแบบ NodeList ไม่ใช่ Array อ่ะ เลยต้องมาสั่งวนทีละตัว มันไม่สามารถเอามาแสดงค่าได้เลย เลยต้องทำแบบนี้ let links = document.querySelectorAll(“.classname or element tag selec…

รวบรวมสิ่งที่เรียนรู้เกี่ยวกับ Nuxt JS

กลับมาตั้งใจจะเขียน Nuxt JS อีกครั้ง เหมือนไปเล่น React และ Next JS ยังไงก็รู้สึกมึนๆ งงๆ อยู่ดี เลยมาลอง Nuxt JS ที่เรารู้สึกว่าง่ายกว่าดูก่อนละกัน สำหรับผู้เริ่มต้นก็มีคลิปสอนมากมายเลยนะ ลองดูหลายๆ คลิปดูก่อนเพื่อให้เกิดความเข้าใจ ของเคนเองก็ดูของหลายคนเหมือนกัน อันนี้จะเป็นของคุณ SaKKo sama เค้าส…

typegoose enum ต้องใส่ type ด้วย

ตอนนี้ decorator ตัว arrayProp มันถูกยกเลิกการใช้งานไปละ และให้ใช้รวมกับ prop ปกติแทน แล้วเราเรียน สร้างระบบ Authentication ด้วย JWT ตามคลิปของช่อง AmateurCoder ซึ่งเค้าสอนดีมากๆ แหละ แต่ตอนที่เค้าสอนกับตอนนี้มันมีอะไรเปลี่ยนแปลงอยู่บ้างนิดหน่อย อย่างที่เจอตอนนี้หลักๆ เลยคือตอนสร้าง enum ซึ่งของที่เ…

DataTables ซ่อนบาง Column ตามเงื่อนไขที่กำหนด

เอาโค้ดตัวเต็มไปตัดต่อเอาเองเน้อ แต่หลักๆ คือใช้ Event drawCallback ของตัว DataTables นะ let dataTables = $(‘#datatable’).DataTable({ ajax: { url: backofficeUrl + “manage/youtube/get_items”, type: ‘POST’, data: {} }, columns: [{ data: ‘id’, }, { data: ‘name’, visible: false, }, ], columnDefs: [{ tar…

คำสั่ง Scroll to Bottom ของ Javascript

อันนี้เอาไว้ใช้เล่นๆ ใน Console ของ Web Browser นะ ส่วนใหญ่เคนเอาไว้เลื่อนโหลดโพสต์ของเพจในปริมาณมากๆ คือขี้เกียจกด Page Down ทีละอันอ่ะ สั่งด้วย Javascript แล้วค่อยมาหยุดมันง่ายกว่า let timeSecond = 2 let time = timeSecond * 1000 let scroller = setInterval(function() { document.documentElement.scro…

วิธีออกจาก each ใน jQuery

ในการใช้ .each() บางทีเราก็ไม่ได้ต้องการให้วนครบทุกรอบจริงๆ เราเพียงแค่วนจนกว่าจะเจอแล้วก็ไปต่อหรือออกเลย วิธีทำก็ไม่ยากครับ แค่ใส่ return false; เข้าไป มันก็จะหลุดออกจาก .each() แล้วไปต่อ แบบนี้ let msg = ”; $(‘input[name^=input_sender_address_]’).each(function() { if ($(this).val().trim() == ”) …

DataTables Ajax แบบส่งค่า แต่อยากให้ค่าเปลี่ยนทุกรอบที่ส่ง

เนื่องจากตัว DataTables ถ้าไม่เขียนแบบพิเศษโดยเพิ่มเป็นฟังก์ชั่นเข้าไป เวลาทำงานถึงแม้เราจะบอกว่าให้ไป get จาก $(‘#element’).val() มันก็จะดึงแค่รอบเดียวนะ ถึงเราเปลี่ยนมันก็จะจำแค่ค่าที่มันดึงครั้งแรกสุด วิธีทำก็อย่างที่บอกคือใช้ฟังก์ชั่นอัดเข้าไปใน data แทนการใส่ค่าปกติแบบนี้ แล้วก็เคนใช้ร่วมกับ jQ…

DataTables รูปแบบการเขียนโค้ด Server-side

การทำในส่วนโค้ดของ Server-side ของ DataTables นั้นจะใช้ภาษาอะไรก็ได้ แต่ในตัวอย่างในโค้ดของเคนจะเป็นภาษา PHP และใช้อยู่ใน Codeigniter 3 นะ เพราะเคนใช้อันนี้เป็น Framework หลัก HTML ในส่วนนี้จะไม่ต้องทำอะไรมาก แค่สร้าง Table ใส่ Class ใส่ Id และกำหนดแค่ส่วน thead แค่นี้ก็โอเคแล้ว <table class=”tab…

Next.js Axios ตั้งค่า defaults config

ในขณะที่ create-react-app มี react-scripts ซึ่งช่วยให้การตั้งค่า Proxy ใน package.json เป็นไปอย่างง่ายดาย แต่ใน Next.js มันทำไม่ได้ ก็หาวิธีอยู่ตั้งนาน การเซ็ตค่าต่างๆ ของ Axios ใน Next.js นั้นต้องทำแบบ Manual ไม่สามารถให้มันดึงอัตโนมัติได้ ดังนั้นจึงต้องทำการสร้างไฟล์ตัวกลางมาเพื่อกำหนด defaults co…

Git หาย หลังจากอัปเดท macOS Catalina

หลังจากทำการอัปเดตมาเป็น Catalina ก็พบเจอ VS Code มันฟ้องว่าในเครื่องไม่มี git.path นะ ให้ติดตั้ง git ด้วย ซึ่งน่าแปลกใจเพราะคนใช้ macOS มันจะมี git ติดมาให้อยู่แล้ว แต่ไม่เป็นไรเรามาแก้ไขปัญหานี้กันดีกว่า ปัญหามันคือ ตัว XCode Command-line Tools มันต้องการการอัปเกรด วิธีการแก้ไข ทำการเปิด Terminal …

MySql นำเข้าฐานข้อมูลไม่ได้เพราะขนาดไฟล์เกิน

ในส่วนนี้จะต้องไปแก้ไขที่ไฟล์ php.ini ของตัวที่ใช้รัน Server ของเราครับ อย่างของเคนเองจะใช้เป็น XAMPP ก็จะง่ายหน่อย เพราะที่ตัวโปรแกรมมันจะมีปุ่มเมนู Config แค่กดแล้วเลือกแก้ไขไฟล์ php.ini มันก็จะขึ้น Notepad มาให้เลย จากนี้สิ่งที่เราจะต้องไปแก้ไขจะมี 2 ตัว คือ post_max_sizeupload_max_filesize ความต…