Tag Archive CSS

Laravel: mix

มันคือ webpack ที่อธิบายง่าย ๆ คือ การ pack รวมเอา css, js มาไว้เป็นไฟล์เดียว หรือแค่ไฟล์ 4 ไฟล์ แทนที่จะโหลด css โหลด javascript หลาย ๆ ไฟล์ทำให้เว็บเราโหลดเร็วขึ้นเยอะเลย

เพราะว่าต้องใช้ npm ในการทำงานแนะนำว่าให้ทำตาม npm: ‘cross-env’ Is Not Recognized as an Internal or External Command ก่อนเพื่อป้องกันปัญหาที่จะเกินขึ้น

เริ่มจากการเพิ่ม package ที่จะใช้ใน command line ก่อนเช่น

  • npm i @fortawesome/fontawesome-free
  • npm i datatables
  • npm i icheck-bootstrap
  • npm i jquery
  • npm i jquery-ui
  • npm i moment
  • npm i numeral
  • npm i overlayscrollbars
  • npm i sweetalert2

เพิ่มโค้ทในไฟล์ /resources/js/bootstrap.js และเพิ่มโค้ทในไฟล์ /resources/sass/app.scss ตามคู่มือ 6.9 Laravel Mix

run command
npm run production
จะมีไฟล์เพิ่มมาใน /public/css/app.css และ /public/js/app.js

แก้ config AdminLte ให้ใช้ mix โดยเปิดไฟล์ /config/adminlte.php เปลี่ยน ‘enabled_laravel_mix’ => false, เป็น ‘enabled_laravel_mix’ => true,

จากนั้นลองใช้งานเว็บและ view source ดูจะเห็นว่าส่วนที่โหลด css และ javascript จะหายไปเยอะเลย

สะสาง css ยุ่งโดย CSScomb

เจอ css ที่มันเขียนแบบวุ่นมากๆ ไม่เป็นระเบียบเลย เดิมจะใช้ Dreamweaver ช่วยจัด แต่หลังๆ พยามจะใช้โปรแกรม freeware / opensource มากขึ้นก็ไปเจอ CSScomb เป็น css formatter ที่ทำงานได้กับหลายๆโปรแกรมๆ รวมทั้ง sublime ด้วย

ถ้าไม่เคยลง package control มาก่อนให้ลง package control ก่อน

  1. โดยไปที่ View > Show Console จะมี กล่องเปิดขึ้นมา
    • sublime 3 ใส่
      import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    • หรือ ถ้าใช้ sublime 2 ใส่

      import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
  2. รอให้ มี box เตือนขึ้นมาปิดซับลาม แล้วเปิดขึ้นมาใหม่

ลง phpfmt โดย

  1. กด ctrl shift และ P พร้อมกัน จะมี กล่องขึ้นมาด้านบนตรงกลาง
  2. เลือก Package Control: Install Package
  3. เลือก CSScomb

กำหนดรูปแบบได้โดย

  1. ไปเลือก option จากเครื่องมือในเว็บ Build config คลิกแบบที่ชอบไปเรื่อย ของผมได้
    [{
    	"always-semicolon": true,
    	"block-indent": "\t",
    	"color-case": "lower",
    	"color-shorthand": false,
    	"element-case": "lower",
    	"eof-newline": false,
    	"leading-zero": true,
    	"quotes": "double",
    	"remove-empty-rulesets": true,
    	"sort-order-fallback": "abc",
    	"space-after-colon": " ",
    	"space-after-combinator": " ",
    	"space-after-opening-brace": "\n",
    	"space-after-selector-delimiter": "\n",
    	"space-before-closing-brace": "\n",
    	"space-before-colon": "",
    	"space-before-combinator": " ",
    	"space-before-opening-brace": "\n",
    	"space-before-selector-delimiter": "",
    	"space-between-declarations": "\n",
    	"strip-spaces": true
    }]
  2. ไปที่ Preference > Package Settings > CSScome > Seetings – user วางที่ copy มา ทับของเดิมได้เลย

    ทดลองใช้โดย Tools > Run CSScomb ถึงจะทำได้ไม่เท่าที่หวังแต่ก็ช่วยได้เยอะอยู่

HTML5 IE หน้าเว็บเพี้ยน

อ้ายอีที่ขัดขวางการเจริญเติมโตของเว็บเทคโนโลยีกันมานานคงไม่พ้น internet explorer ไออี ตัวปัญหาเจ้าเก่าเจ้าประจำ ดั้งเดิมนั้นเอง เพราะว่ามันโดนฝั่งมากับ windows และต่างจาก chrome, Firefox, opera ตรงที่เจ้าอื่นๆมันจะ update อัตโนมัติ พยามพัฒนาตัวเองให้เป็นคนใหม่ มีความสามารถมากขึ้นเสมอๆ แต่เจ้าที่ตัวนี้ user ต้องพยามในการอัพเดตมันเอง แถมวินโดวน์เก่าๆ ยังไม่สามารถลงเวอร์ชั่นที่ล่าสุดได้ตามข้อจำกัดของวินโดว์นั้นๆ

ถ้าเราใช่ HTML5 และ tag ใหม่ อย่าง article, aside, footer, header, nav, section, time หวังว่าท่าน google จะทรงโปรด เพราะว่าแบ่งข้อมูลให้ท่านพิจารณาในการทำ SEO อย่างเต็มที่ แต่กลับกลายเป็นว่าหน้าเว็บเละอย่างไม่เคยเป็นมาก่อนใน IE8 ลงไป ลองใช้ compatibility mode ไล่ version ต่ำลงมาเรื่อยๆ ถึงจะเห็นว่าเป็นที่ IE9 ลงมา

เป็นเพราะว่ามันเห็น tag ใหม่ๆ อย่าง article, aside, footer, header, nav, section, time เป็นการเขียนผิด โดนกะลาครอบอยู่กับ HTML4 สมัยเมื่อ 10 ปีที่แล้ว แถมพาลไม่สนใจ css ที่มี tag พวกนี้อยู่ด้วย วิธีแก้คือสร้าง object ใหม่อีกครั้งด้วย JavaScript

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

หรือจะใช้ tools อย่าง html5shiv

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

เราก็จะสามารถใช้ css กับเท็กใหม่ๆ พวกนี้ได้และควรใช้ css reset ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่