แนะนำ responsive lightbox plugin ขนาดเล็ก ใช้งานง่าย

lity

แนะนำ responsive light box plugin ขนาดเล็ก ใช้งานง่าย ขนาดเพียง 2kB เราแค่ระบุ data-lity เข้าไปใน html tag ก็ใช้ได้แล้วครับ

ตัวอย่างการใช้งาน

ดูรายละเอียดการใช้งานเต็มๆได้ที่นี่
http://sorgalla.com/lity/

แนะนำ 5 Date Picker (ปฏิทิน) ที่น่าใช้

1. Pickadate.js
http://amsul.ca/pickadate.js

2. Bootstrap Datepicker
https://github.com/eternicode/bootstrap-datepicker

3. jQuery UI datepicker
https://jqueryui.com/datepicker/

4. Zebra_Datepicker
http://stefangabos.ro/jquery/zebra-datepicker/

5. Eyecon.ro datepicker
http://www.eyecon.ro/datepicker/
ถ้าให้เลือกตัวที่ชอบที่สุดน่าจะเป็น Pickdate.js (mobile-friendly,responsive) กับคู่มือที่ละเอียดดีจริงๆ

13 ข้อ แนวทางการเพิ่มความเร็ว (Speed) ให้กับหน้าเว็บไซต์

จริงๆ แล้วการเพิ่มความเร็วให้หน้าเว็บเพจมีหลายวิธี โพสต์นี้จะเน้นไปที่ CSS นะครับ และเพิ่มเรื่องการจัดการรูปภาพให้ด้วยครับ

 

…………………………………………………….

9 แนวทางเพิ่มความเร็วให้เว็บไซต์ด้วย CSS

…………………………………………………….

1. เขียนโค้ดแบบ Shorthand แน่นอนเมื่อโค้ดสั้นลง การประมวลผลย่อมน้อยลง ส่งผลให้หน้าเว็บโหลดเร็วขึ้น
2. หลีกเลี่ยงการทำ CSS Hacks ให้กับแต่ละบราวเซอร์ เพราะมันเพิ่มขนาดให้กับไฟล์และซับซ้อน
3. ลดขนาดไฟล์ของ CSS ลง เพื่อเพิ่มความเร็วในการโหลด
4. ควรเขียน CSS ใน tag <head>
5. พยายามใช้ external CSS เพียง 1 ไฟล์
6. อย่าใช้การเรียกแบบ @import
7. เอา CSS ที่ไม่ใช้ออกให้หมด อย่าปล่อยทิ้งไว้
8. อย่าเขียน CSS ให้ tag HTML เช่น h1 และ DIV
9. ถ้าเป็นเพียงคำสั่ง CSS เล็กๆ ก็ให้เขียนแบบ inline ได้

………………………………………………………………………………..

4 แนวทางเพิ่มความเร็วให้กับเว็บไซต์ด้วยการจัดการรูปภาพ (Images)

………………………………………………………………………………..
1. นามสกุลรูปภาพ ใช้ JPGs เมื่อภาพมีคุณภาพ ความละเอียดสูง
ใช้ PNG กับรูปภาพที่เป็นไอคอน,โลโก้,ข้อความ,สัญลักษณ์ต่างๆ
ใช้ GIFs สำหรับภาพเล็กๆ ไม่มีรายละเอียดมาก และแน่นอนควรหลีกเลี่ยง BMPs หรือ TIFFs.
2. ขนาดภาพควรเหมาะสม ควรบันทึกรูปภาพให้พอดีกับความกว้างของ Template สร้างรูปภาพในแบบ Responsive โดยกำหนดความกว้างคงที่แต่ความสูงให้กำหนดเป็นแบบ auto
3. การบีบอัดรูปภาพ สำหรับนามสกุล JPGs ให้ใช้การบีบอัดที่ 60-70% และสำหรับหน้าจอแบบ Retina ให้เพิ่มขึ้นเป็น 150-200%
4. แน่นอนควรใช้รูปภาพให้น้อยที่สุดเท่าที่จะเป็นไปได้

แนะนำ PouchDB

pd

เป็น JavaScript Database (NoSQL) ที่ช่วยให้ web app หรือ mobile app ของเราเก็บข้อมูลแบบ offline ได้ และสามารถ sync กับ server ได้ทันทีที่ online!

เหมาะมากสำหรับ app ใดๆก็ตามที่อยากเก็บข้อมูล local ไว้ตลอดเวลา และซิงค์กับ server ทันทีเมื่อออนไลน์ครับ ประยุกต์ใช้ได้เยอะมาก จะทำเป็นโปรแกรม chat ก็ได้ หรือจะทำเป็น app แบบ realtime ก็ยังไหว

ลองใช้ดูครับ มีตัวอย่างเป็น todo app ให้ลองเล่นด้วย

อ้อที่ว่า sync กับ Server หมายถึง เราต้องติดตั้ง CouchDB (คนละตัวกับ PouchDB นะ) ที่ server เราด้วยครับ หรือใครไม่มี server ก็แนะนำให้ใช้ cloudant.com เป็น CouchDB แบบ Cloud ครับ

เว็บหลัก:
https://pouchdb.com

เริ่มได้ที่นี่มี youtube สอน:
https://pouchdb.com/getting-started.html

รวมลิงก์ 11 library ที่น่าใช้สำหรับ Laravel 5

l55

1. Role-based Permissions for Laravel 5 (RBAC)
https://goo.gl/bMN7kU

2. Scaffold generator for Laravel 5 with bootstrap 3 (Gen CRUD)
https://goo.gl/KpxMNC

3. A package to backup your Laravel 5 app (Backup site and DB)
https://goo.gl/NNPKxX

4. An eloquent way of importing and exporting Excel and CSV files
https://goo.gl/dLCKuh

5. Get started with Laravel 5.2 and Angular (material)
https://goo.gl/PNKmbW

6. Simple laravel5 example for tutorial
https://goo.gl/MhA5Ru

7. jQuery DataTables API for Laravel 5
https://goo.gl/J44a0z

8. Lavalite – CMS built on Laravel 5.2
https://goo.gl/9wxP3G

9. A library to help you work with dates in multiple languages, based on Carbon.
https://goo.gl/5LGZsz

10. No CAPTCHA reCAPTCHA For Laravel.
https://goo.gl/vFiPsS

11. A MongoDB based Eloquent model and Query builder for Laravel
https://goo.gl/TUIZ1C

สรุป 14 คำสั่ง NPM ที่ใช้บ่อย สำหรับสาย Node.js

npm

 

npm init
เริ่มต้นใช้งาน และช่วยให้เราสร้าง และใส่รายละเอียดเกี่ยวกับโปรเจคของเรา (package.json)

npm install module_name
ติดตั้ง module

npm install -g module_name
ติดตั้ง module ในระดับ global

npm install module_name –save
ติดตั้ง module และเพิ่มมันเข้าไปในไฟล์ package.json (ข้างใน dependencies)

npm install module_name –save-dev
เหมือนกันกับข้างบน ติดตั้ง module และเพิ่มมันเข้าไปในไฟล์ package.json (ข้างใน dependencies) และบอกว่าจะนำมาช่วยในส่วนของนักพัฒนา

npm list
แสดงรายการ modules ทั้งหมดที่ติดตั้งไปแล้วในโปรเจคของเรา

npm list -g
แสดงรายการ modules ระดับ global ทั้งหมดที่ถูกติดตั้งบน OS ของเรา

npm remove module_name
uninstall module ออกจากโปรเจคของเรา

npm remove -g module_name
uninstall module ระดับ global

npm remove module_name –save
uninstall module ออกจากโปรเจคของเรา พร้อมทั้งนำออกจาก attribute dependencies ด้วย (ในไฟล์ package.json)

npm remove module_name –save-dev
เหมือนกันกับด้านบน uninstall module ออกจากโปรเจคของเรา พร้อมทั้งนำออกจาก attribute dependencies ด้วย (ในไฟล์ package.json)

npm update module_name
update เวอร์ชัน module ให้ใหม่ล่าสุด

npm update -g module_name
update เวอร์ชัน module ให้ใหม่ล่าสุด ในระดับ global

npm -v
แสดงเวอร์ชันปัจจุบันของ npm

ป.ล. module_name คือ ชื่อ module/library ที่เราต้องการติดตั้งครับ

รวมลิงก์แหล่งศึกษา PHP 7 ที่ควรอ่านครับ

php7

1. PHP Manual: Migrating from PHP 5.6.x to PHP 7.0.x
https://secure.php.net/manual/en/migration70.php

2. PHP 7 UPGRADING doc
https://github.com/php/php-src/blob/PHP-7.0.0/UPGRADING

3. PHP 7 Requests for Comments
https://wiki.php.net/rfc#php_70

4. PHPNG (next generation)
https://wiki.php.net/phpng

5. Getting Ready for PHP 7
https://www.digitalocean.com/…/blog/getting-ready-for-php-7/

6. What to Expect When You’re Expecting: PHP 7, Part 1
https://blog.engineyard.com/2015/what-to-expect-php-7

7. What to Expect When You’re Expecting: PHP 7, Part 2
https://blog.engineyard.com/2015/what-to-expect-php-7-2

8. Zend: 5 Things You Must Know About PHP 7
http://www.zend.com/en/resources/php-7

9. The PHP 7 Revolution: Return Types and Removed Artifacts
http://www.sitepoint.com/php-7-revolution-return-types-rem…/

10. PHP 7: 10 Things You Need to Know
http://www.hongkiat.com/blog/php7/

11. ‪#‎php7‬ on Twitter
https://twitter.com/hashtag/php7

12. GoPHP7 Extensions Project
http://gophp7.org/gophp7-ext/

13. Laracasts – PHP 7 Up and Running
https://laracasts.com/series/php7-up-and-running

.
แถม ใครใช้ Ubuntu 14.04, 15.04, และ 15.10 สามารถติดตั้ง PHP 7 เพียงได้ 3 คำสั่ง ดังนี้

sudo add-apt-repository ppa:ondrej/php-7.0
sudo apt-get update
sudo apt-get install php7.0

——————————
ขอให้สนุกกับการเรียนรู้ครับ