SASS เทคนิคช่วยเขียน CSS ให้เป็นเรื่องง่าย ๆ

ปัจจุบันการเขียน CSS เริ่มง่ายขึ้นไปทุกทีครับ จากที่เมื่อก่อนต้องมาเขียนทีละตัว ทีละบรรทัด เดี๋ยวนี้มีเครื่องมือช่วยให้เขียนบรรทัดเดียว กลายเป็น 5-10 บรรทัดได้ง่าย ๆ เลย ซึ่งเทรนด์ในการเขียน CSS ให้ดีนี่นอกจากจะต้องเขียนได้ง่ายแล้ว ต้องเขียนเป็นระเบียบ และอ่านเข้าใจง่ายสำหรับมาแก้ในภายหลัง หรือให้คนในทีมมาแก้

 
SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS (ใครยังไม่รู้จัก LESS CSS กับ CSS Preprocessor แนะนำให้กดลิงค์เข้าไปอ่านก่อนคร้าบ) หลักการเขียนจะคล้าย ๆ กับ CSS ทั่วไป แต่มีฟังก์ชั่นเพิ่มขึ้นมาช่วยให้เขียนได้ง่ายขึ้น โดยหลังจากเขียนเสร็จแล้วก็ Compile เป็นไฟล์ CSS ปกติเพื่อเอาไปใช้งานจริงได้เลยครับ
 

การใช้งาน SASS เบื้องต้น

ถ้าใครกังวลว่า SASS จะ Compile ยากมั้ย หรืออ่านเจอในเว็บไซต์ของ SASS ว่าต้องใช้ Command Line (เขียนโค้ดเหมือนสมัย MS DOS) ในการใช้งาน ไม่ต้องห่วงครับ เพราะผมก็เกลียด Command Line เหมือนกัน จะแนะนำเครื่องมือเด็ด ๆ ที่ช่วยให้การใช้ SASS ง่ายไปเลยครับ และนี่เป็นเหตุผลที่ผมมาใช้ SASS เลย
 
ความสามารถพื้นฐานของ SASS ในการเขียน CSS จะเหมือนกับ LESS CSS เลยครับ แต่การเขียนอาจจะต่างกันนิดหน่อย โดยความสามารถจะมีดังนี้
 

1. การใส่ตัวแปร

การใส่ตัวแปรทำได้โดยตั้งชื่อตัวแปรแบบมี $ นำหน้าครับ เหมือนกับภาษา Ruby เลย (แอดมินเคยเขียน Ruby ตอนทำเกมใน RPG Maker มาก่อนครับเลยคุ้น ๆ) ลองดูตัวอย่างโค้ด SASS ด้านล่าง
 
$textcolor: #ffffff;
p {
color: $textcolor;
}
ในที่นี้เราสร้างตัวแปรชื่อว่า textcolor เก็บค่าสีขาว (#ffffff) โดยเราเอาไปใช้กับสีของแท็ก p ได้เลย พอ Compile เป็นไฟล์ CSS ออกมาจะกลายเป็นแบบนี้
 
p {
color: #ffffff;
}
 

2. การใส่ SELECTOR ซ้อน SELECTOR

เราสามารถเขียน selector ซ้อนด้านใน selector อีกอันได้ แทนที่จะเขียน CSS แบบนี้
 
p { font-size: 10pt; }
p a { font-size: 12pt; }
เราก็สามารถเขียนใน SASS แบบด้านล่างได้ครับ เมื่อ Compile เราจะได้ผลลัพธ์ออกมาเหมือนด้านบนเลยคร้บ
 
p {
font-size: 10pt;
a {
font-size: 12pt;
}
}
 

3. การสร้างฟังก์ชั่น (MIXIN)

สำหรับใครที่ไม่เคยเขียนโปรแกรมมาก่อน การสร้าง Function ใน SASS จะเรียกว่า Mixin ครับ โดยเป็นการรวม CSS หลาย ๆ บรรทัดไว้ใน Function เดียว เพื่อให้เรียกใช้ง่ายขึ้นครับ ลองดูตัวอย่างโค้ด CSS ด้านล่างนะครับ
 
.heading {
font-size: 20pt;
font-weight: bold;
font-family: Georgia, serif;
}
.title {
font-size: 20pt;
font-weight: bold;
font-family: Georgia, serif;
}
 
จะมาเขียนทีละบรรทัดก็เสียเวลาใช่มั้ยครับ เราสามารถเขียนสร้าง Mixin แล้วเรียกใช้แบบด้านล่างใน SASS แทนได้เลย
 
@mixin title-text {
font-size: 20pt;
font-weight: bold;
font-family: Georgia, serif;
}
.heading { @include title-text; }
.title { @include title-text; }
 

4. การดึง PROPERTY จาก SELECTOR อื่น

บางครั้งการเขียน Mixin ก็ไม่จำเป็นครับ เรามี selector ที่มี property ที่เราต้องการอยู่แล้ว อยากดึงมาใช้เลย ก็สามารถเขียนแบบนี้ใน SASS ได้ครับ
 
.button { width: 100px; height: 50px; }
.button-blue {
@extend .button;
background: blue;
}
 
โค้ดด้านบนเป็นการดึง width กับ height จาก .button มาใส่ .button-blue ครับ ซึ่งจะดีในการเขียน HTML ที่เราไม่ต้องมาเขียน class=”button button-blue” เขียนแค่ class=”button-blue” ก็พอ
 

COMPASS ส่วนเสริมของ SASS ที่ LESS CSS เทียบไม่ติด

ความสามารถพื้นฐานของ SASS นี่เทียบกับ LESS CSS แทบไม่เห็นความแตกต่างเลยครับ สิ่งที่ทำให้มันแตกต่าง คือ ส่วนเสริมอย่าง Compass, Susy, Bourbon, Neat ครับผม
 
ซึ่งในบทความนี้ก็ขอแนะนำ Compass ส่วนเสริมที่คนใช้เยอะที่สุด และทีมงานที่พัฒนา Compass ก็ติดต่อกับทีมงานของ SASS อย่างใกล้ชิด ทำให้มั่นใจได้ว่าโปรเจคนี้ไม่หายไปง่าย ๆ แน่นอน
 
เว็บไซต์ Compassเว็บไซต์ Compass
มาลองดูความสามารถเด็ด ๆ ของ Compass กันครับ จริง ๆ ความสามารถมันมีเยอะมาก อธิบายในโพสเดียวคงต้องอ่านกัน 2 วันครับ
 

1. ดึงขนาดรูปได้อัตโนมัติ

การเปลี่ยนลิงค์ตัวอักษรธรรมดาให้กลายเป็นรูปด้วย CSS ปกติเราจะเขียนแบบนี้ครับ
 
a.button {
background: url(button.png) no-repeat;
width: 200px;
height: 50px;
display: block;
text-indent: -9999px;
}
 
ซึ่งเราต้องไปแก้ width, height ตามขนาดรูปของไฟล์รูปครับ กว่าจะเขียนเสร็จต้องเช็คชื่อไฟล์ เช็คขนาดให้เรียบร้อย แต่ Compass ลดทั้งหมดนี้เหลือแค่บรรทัดเดียว โดยเขียนแบบด้านล่างเลยครับ
 
a.button {
replace-text-with-dimensions('button.png');
}
 
ขนาดรูปทั้งหมด Compass จะไปดึงมาให้เราโดยอัตโนมัติ แค่ระบุว่าไฟล์รูปชื่ออะไรก็พอ
 

2. ใส่ RESET CSS, CLEARFIX ในบรรทัดเดียว

ผมติดการใช้ Reset CSS มากครับ ใส่แล้วไม่ต้องคิดมากว่า Web Browser อื่นจะแสดงผลไม่เหมือนกัน ซึ่ง Compass ใส่ Reset CSS มาในตัวให้อยู่แล้วครับ แค่พิมพ์ว่า
 
@import 'compass/reset'
บรรทัดเดียวจบ ได้ Reset CSS ยาว ๆ มาใช้งานได้เลยครับ ซึ่งเป็น Reset CSS ของ Eric Meyer ที่ซัพพอร์ท HTML5 ด้วย
 
อีกคลาสที่ผมชอบใช้คือตัว Clearfix ครับ ซึ่งเอาไว้แก้ปัญหาการจัดวางของ Float ที่ลอยหลุดออกนอกกรอบไปชนส่วนอื่น จากปกติที่ต้องไปก็อปจากเว็บมาใส่ทุกครั้ง โดยโค้ดจริงจะเป็นแบบนี้ครับ
 
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;<
}
 
แต่ Compass มีให้ใช้อยู่แล้ว เราจะใช้ก็เขียนใน Compass แค่นี้เองครับ
 
@include pie-clearfix;
 

3. เขียน CSS3 โดยใส่ PREFIX ให้อัตโนมัติ

ผมชอบใช้ CSS3 Transition ในการทำเว็บไซต์มากครับ โดยเมื่อใช้แล้วการเปลี่ยนสี / ขนาด / ตำแหน่ง อย่างเช่นตอนชี้เม้าส์ (hover) มันจะค่อย ๆ เปลี่ยนครับ ทำให้เว็บไซต์ดู smooth ขึ้นมาก ซึ่งจะติดปัญหาว่าถ้าจะให้ซัพพอร์ททั้ง Firefox กับ Chrome ต้องเขียน prefix แบบนี้ครับ
 
a {
-webkit-transition: 0.5s;
transition: 0.5s;
}
 
เวลาจะแก้ค่าต่าง ๆ ก็ต้องกลับไปแก้ทั้งบรรทัด prefix (-webkit-) และบรรทัดที่ไม่ใส่ prefix ซึ่งถ้าเป็น Compass เราสามารถเขียนแบบนี้ได้ครับ
 
a {
@include transition(0.5s);
}
 
จะเห็นว่าเวลาแก้ค่าต่าง ๆ เราก็แก้แค่บรรทัด @include บรรทัดเดียว ซึ่งจะช่วยลดเวลาได้เยอะมากถ้าเราใส่ค่ายาว ๆ เช่น transition: opacity 0.5s ease-in
 
สำหรับความสามารถอื่น ๆ ของ Compass เข้าไปดูได้ที่ เว็บไซต์ Compass CSS เลยครับ
 
PREPROS โปรแกรมที่จะทำให้คุณอยากใช้ SASS ทันที
ผมไม่ได้เขียนเกินจริงนะครับ เพราะโปรแกรม Prepros นี่แหละที่ทำให้ผมย้ายมาใช้พวก CSS Preprocessor เต็มรูปแบบ ทั้ง LESS CSS และ SASS ซึ่งจากเดิมการเล่นกับพวกนี้ยากเหลือเกินครับ ต้องติดตั้งผ่าน Command Line ให้เสียเวลา
 
ถึงแม้จะมีการพัฒนาโปรแกรมที่ช่วยการ Compile ให้ง่ายขึ้น ทุกโปรแกรมก็เสียเงิน เช่น CodeKit, Compass.app แล้วซัพพอร์ทเฉพาะ Mac OS อีก คนใช้ Windows ก็อดไปตามระเบียบ
 
หน้าตาเว็บไซต์ Preprosหน้าตาเว็บไซต์ Prepros
จนมาได้รู้จัก Prepros ครับ โปรแกรมนี้สามารถ Compile SASS, LESS CSS รวมถึงภาษา Preprocessor อื่น ๆ เช่น HAML, JADE, CoffeScript โดยอัตโนมัติ ใช้ได้ทั้ง Windows, Mac OS แถมเป็นโปรแกรมฟรี
 
วิธีการใช้ก็ง่าย ๆ เลยครับ เข้าไปที่เว็บไซต์ของ Prepros ก่อน แล้วทำตามนี้เลยครับ
 

ขั้นตอนการติดตั้ง Prepros

- กดปุ่มโหลดโปรแกรมตาม OS ที่เราใช้เลยครับ กดปุ่มโหลด Chrome Extension ครับ โปรแกรมนี้ต้องใช้กับ Google Chrome เท่านั้น ซึ่งปกติผมก็ทำเว็บไซต์ใน Chrome อยู่แล้วครับ (แต่การวัดขนาดต่าง ๆ ผมจะเปิดรูป Design ใน Firefox แทนแล้ววัดครับ เพราะปลั๊กอิน MeasureIt ใน Firefox สามารถวัดขนาดรูปได้)

- ติดตั้งเสร็จเรียบร้อยแล้วก็ลองเปิดโปรแกรม Prepros ขึ้นมา
 
- จากนั้นให้สร้างโปรเจคที่มีไฟล์ SASS ครับ โดยไม่ต้องติดตั้ง SASS และ Compass ในเครื่อง โปรแกรมมีมาให้หมดแล้วครับ สามารถทำตามขั้นตอนนี้ได้เลย
 
- สร้างโฟลเดอร์ขึ้นมา สมมติว่าชื่อ web ในโฟลเดอร์ web ให้สร้างไฟล์ HTML ที่เรียกไฟล์ CSS จาก “css/style.css” โดยไม่ต้องไปสร้างโฟลเดอร์ css หรือไฟล์ style.css
 
- ในโฟลเดอร์ web ให้สร้างโฟลเดอร์ชื่อ scss ขึ้นมา ในโฟลเดอร์ web/scss ให้สร้างไฟล์ style.scss ขึ้นมา ในไฟล์นี้เราเขียนเป็น SASS ได้เลย ลากโฟลเดอร์ web เข้าไปใส่ในโปรแกรม Prepros จะเห็นชื่อโฟลเดอร์โผล่ขึ้นมาด้านซ้าย
 
- ลองเขียน SASS ในโปรแกรม Text Editor ของเรา แล้วกดเซฟ จะมี Popup ของ Prepros ขึ้นมามุมบนขวาสีเขียวว่า Compile เสร็จแล้ว แต่ถ้าขึ้นสีแดงแปลว่าเราเขียน CSS ผิด อาจลืมใส่ { หรือ ;
เข้าไปดูในโฟลเดอร์เรา จะเห็นว่าโฟลเดอร์ css กับไฟล์ css/style.css ถูกสร้างขึ้นมาโดยอัตโนมัติ โดยสร้างจาก style.scss ทีื่ compile ให้เรียบร้อยแล้ว
 
ถ้าเราเปิดหน้าเว็บไซต์อยู่ใน Browser Google Chrome จะรีเฟรช CSS ให้อัตโนมัติด้วย (แต่ไม่รีเฟรช HTML นะครับ ถ้าแก้ HTML ต้องรีเฟรชเอง ยกเว้นว่าจะใช้ HTML Preprocessor เช่น JADE)
 
ลองไปเล่นกันดูนะครับ รับรองว่าทำเว็บได้เร็วขึ้นมาก ๆ ไม่ต้องมากด Refresh Browser ทุกครั้งที่แก้ไฟล์อีกด้วย
 

สรุป SASS VS LESS CSS ตัวไหนดีกว่า ใช้ตัวไหนดี

สองตัวนี้จะเห็นว่าการทำงานคล้าย ๆ กันเลยครับ โดย SASS จะมี Extension ดี และใช้ยากกว่า เพราะ LESS CSS มี less.js ช่วย compile โดยที่เราไม่ต้องลงโปรแกรมอะไรเพิ่ม แต่ SASS ไม่มี
 
ถ้าถามว่าใช้ตัวไหนดีกว่ากัน ผมคิดว่าถ้าโปรเจคมีขนาดใหญ่ ใช้ SASS จะเหมาะกว่า เพราะมี Extension อย่าง Compass ที่เทพมาก ๆ เสียเวลาติดตั้งนานกว่า LESS CSS หน่อยแต่คุ้มค่าแน่นอนครับ ส่วน LESS CSS จะเหมาะกับโปรเจคที่เล็กกว่า หรือต้องทำงานกับทีมที่ยังไม่มีประสบการณ์การใช้ CSS Preprocessor มากนัก เพราะเริ่มต้นได้ง่าย ไม่ค่อยมีฟีเจอร์แปลก ๆ ให้งงมากนัก (แต่เวอร์ชั่นหลัง ๆ LESS CSS เค้าก็พยายามเพิ่มฟีเจอร์ตาม SASS แล้วครับ)


ปฏิวัติงานรับทําเว็บไซต์ ฉีกทุกข้อจำกัด ไอเดียเฉียบล้ำนำสมัย ดีไซน์ก้าวกระโดด เพราะดีไซน์บ่งบอกถึงตัวตน พร้อมให้บริการ ด้วยทีมงานมืออาชีพ รับทำเว็บไซต์ ร้านค้าออนไลน์ รับทำเว็บไซต์ มีเอกลักษณ์ไม่ซ้ำใคร ในราคาไม่แพง คุ้มค่า รับทำเว็บไซต์ ให้คุณเข้าถึงกลุ่มเป้าหมาย รองรับติดอันดับ GOOGLE

Iphone

วิสัยทัศน์พันธกิจ รับทำเว็บไซต์

“Professional Standard” คือคำที่ทีมงานใช้ในการสื่อสารและยึดมั่นในการทำงานร่วมกัน หลายปีที่ผ่านมาเราได้รับทั้งคำชื่นชมต่าง ๆ มากมายเกี่ยวกับผลิตภัณฑ์ ผลงานและงานบริการที่บริษัทฯ ได้เป็นผู้พัฒนาและ ส่งมอบงานคุณภาพให้กับลูกค้า ด้วยความมุ่งมั่นที่จะส่งมอบ “งานคุณภาพสูง เหนือความคาดหมาย” และ “ตรงต่อเวลา” ให้กับลูกค้า

รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ให้ตรงใจธุรกิจของคุณ และช่วยเพิ่มโอกาสที่ดีกว่าให้ธุรกิจคุณ ไม่ว่าจะในรูปแบบบริษัท หน่วยงาน องค์กร หรือบุคคลทั่วไป ทางเราเล็งเห็นถึงปัญหาของลูกค้า จึงได้สร้างทีมงานที่มีความชำนาญและมีประสบการณ์โดยตรงในการ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ มาบริการธุรกิจคุณ

ขั้นตอน รับทำเว็บไซต์

เราไม่ได้แค่ รับทำเว็บไซต์ ตาม Site Map ที่ลูกค้าต้องการ แต่นี่คือ ขั้นตอนและขบวนการทำงานเกี่ยวกับ WEB Development ของเราทั้งหมด
รับทำเว็บไซต์
1.

Requirement (เก็บข้อมูลสำหรับ รับทำเว็บไซต์)

บริษัททำการเก็บรวบรวมข้อมูลต่างๆ สำหรับใช้ในการทำเว็บไซต์ เพื่อให้ท่านได้รับดีไซต์ ออกแบบเว็บไซต์ ที่ตรงใจธุรกิจของท่านมากที่สุด และนอกจากนี้ทางเรามีความยินดีที่ จะออกพบท่านนอกสถานที่ หากลูกค้า ต้องการพบกับทีมงานเพื่อขอคำปรึกษา สำหรับรับทำเว็บไซต์

2.

DESIGN (ออกแบบเว็บไซต์ มีเอกลักษณ์ไม่ซ้ำใคร)

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

3.

HTML & CSS (รับทำเว็บไซต์ ด้วยเทคนิคสมัยใหม่)

สร้าง Prototype หน้าหลัก และหน้าย่อยต่างๆ ของเว็บไซต์ทั้งหมด รวมถึงหน้าจอที่จะแสดงบนมือถือหรือแท็บเล็ต ด้วยเทคโนโลยีสมัยใหม่ของการ รับทำเว็บไซต์ Web Responsive และ Web Parallax มาผสมผสานกัน เพื่อสร้างโอกาสทางการค้า และประสบความสำเร็จ ในสายงานธุรกิจของคุณ รับทำเว็บไซต์ ดีไซน์หรู คุณภาพดี

4.

CMS (รับทำเว็บไซต์ พร้อมออกแบบระบบหลังบ้าน)

พัฒนาระบบบริหารและจัดการหลังบ้าน สำหรับทีมทำงาน พร้อมเชื่อมต่อกับ Front Office ด้วยระบบจัดการข้อมูล รับทำเว็บไซต์ ใช้งานง่ายที่สุด ดีที่สุด ครบที่สุด ทรงพลังที่สุด เพื่อให้รองรับและตอบสนอง ต่อการใช้งานในธุรกิจของคุณ รับทำเว็บไซต์ สวยเด่นสะดุดตา โดยทีมงาน รับทำเว็บไซต์ มากประสบการณ์

5.

SEO (รับทำเว็บไซต์ รองรับติดอันดับ Google)

เป็นการปรับแต่งเว็บไซต์ ด้วยวิธีการต่างๆ เพื่อให้ติดอันดับในผลการค้นหา ของ Search Engine เช่น Google รับทำเว็บไซต์ ปรับแต่งโครงสร้าง และหน้าเว็บไซต์ให้รองรับกับ seo สามารถเจาะ หรือเข้าถึงกลุ่มเป้าหมายได้ตรง มีความแม่นยำ อีกทั้งยังมีประสิทธิภาพในการเข้าถึงลูกค้า ซึ่งจะมีผลต่อความก้าวหน้า ของธุรกิจโดยตรง

6.

SUPPORT (ให้คำปรึกษาหลังการ รับทำเว็บไซต์)

หลังจากทำการ รับทำเว็บไซต์ ให้กับลูกค้าจนแล้วเสร็จ ทางทีมงานยังมีบริการให้คำปรึกษาหลังการขายตลอด 24 ชั่วโมง สำหรับลูกค้าที่มีปัญหา หรือมีคำถามเพิ่มเติมเกี่ยวกับการออกแบบเว็บ หรือต้องการพัฒนาเว็บไซต์ เพิ่มเติมในวันข้างหน้า ลูกค้าสามารถติดต่อขอคำแนะนำ รับทำเว็บไซต์ ได้ตลอดเวลา

ลูกค้าบางส่วนของเรา รับทำเว็บไซต์

รับทำเว็บไซต์ มีคุณภาพเห็นผลจริง รับทำเว็บไซต์ สำหรับธุรกิจ SME รับทำเว็บไซต์ ใช้ต่อยอด ในเชิงธุรกิจ หรือเจ้าของกิจการมือใหม่ อีกระดับของ รับทำเว็บไซต์ เพื่อประโยชน์ในเชิงธุรกิจ รับทำเว็บไซต์ สวยโดดเด่น

ลูกค้า รับทำเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

samuiairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท คราวน์ เทค แอดวานซ์ จำกัด (มหาชน)

บริษัท คราวน์ เทค แอดวานซ์ จำกัด (มหาชน)

ajthai.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินสุโขทัย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินสุโขทัย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

sukhothaiairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ลีดเดอะ เทรด โปรดักส์ จำกัด

บริษัท ลีดเดอะ เทรด โปรดักส์ จำกัด

leadertrade.net
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ที เอส ฟลาวมิลล์ จำกัด (มหาชน)

บริษัท ที เอส ฟลาวมิลล์ จำกัด (มหาชน)

tmill.co.th
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท เอฟ ที เซลล์แอนด์เซอร์วิส จำกัด (โปรคลีน)

บริษัท เอฟ ที เซลล์แอนด์เซอร์วิส จำกัด (โปรคลีน)

procleanth.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท บิสเทค (ประเทศไทย) จำกัด

บริษัท บิสเทค (ประเทศไทย) จำกัด

bistecthai.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : ร้านอาหาร ไหมไทย

ร้านอาหาร ไหมไทย

maithaibenicia.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ฟิลเตอร์วิชั่น จำกัด (มหาชน)

บริษัท ฟิลเตอร์วิชั่น จำกัด (มหาชน)

filtervision.co.th
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : สนามบินตราด - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

สนามบินตราด - บริษัท การบินกรุงเทพ จำกัด (มหาชน)

tratairport.com
ลูกค้า รับทําเว็บไซต์ ออกแบบเว็บไซต์ : บริษัท ฟังก์ชั่น อินเตอร์เนชั่นแนล จำกัด

บริษัท ฟังก์ชั่น อินเตอร์เนชั่นแนล จำกัด

functioninter.com

สนใจใช้บริการ รับทำเว็บไซต์ กับบริษัท ซอฟท์เมลท์ จำกัด? ส่ง ข้อความ

ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์

ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ราคาแพ็คเกจ รับทำเว็บไซต์ รับออกแบบเว็บไซต์

ทำเว็บขายของ, ร้านค้าออนไลน์

เริ่มต้นธุรกิจออนไลน์เพื่อเตรียมต้อนรับ AEC กับเว็บไซต์ในยุคไทยแลนด์ 4.0 ในยุคของโลกดิจิทัลอย่างเต็มตัว ไม่ต้องลงทุนสูง อีกระดับการเป็นเจ้าของธุรกิจ SME ด้วยตัวคุณเอง ในราคาไม่แพง คุ้มค่า เพิ่มยอดขาย สร้างแบรนด์ให้เป็นที่รู้จัก ตรงใจธุรกิจของคุณ

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 5 - Docker คืออะไร และมีข้อดีอย่างไรบ้าง !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 5 - Docker คืออะไร และมีข้อดีอย่างไรบ้าง !!!...

เนื่องจากในการพัฒนา application สมัยก่อนทุก application จะใช้ environment เดียวกันซึ่งเป็น...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 4 - การเขียนคำสั่ง Gitlab CI บนไฟล์ .gitlab-ci.yml !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 4 - การเขียนคำสั่ง Gitlab CI บนไฟล์ .gitlab-ci.yml !!!...

การทำ CI ใน Gitlab CI นั้น จำเป็นต้องสร้างไฟล์ .gitlab-ci.yml ไว้ในโฟลเดอร์ของโปรเจ็คซะก่อ...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 3 - การใช้งาน Firebase Hosting !!!

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 3 - การใช้งาน Firebase Hosting !!!

Firebase Hosting คือ ส่วนหนึ่งของบริการ Google Firebase สำหรับใช้ทำเป็น Web Hosting ที่ให้...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 2 - การสร้าง Hybrid App ด้วย Ionic Framework...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 2 - การสร้าง Hybrid App ด้วย Ionic Framework...

Ionic Framework คือ Framework ที่ช่วยให้พัฒนาแค่ครั้งเดียวแต่เราสามารถ Build ให้ออกมาใช้งา...

อ่านต่อ
การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 1 - การจัดการ Project ด้วย Gitlab ผ่าน Sourcetree !!!...

การพัฒนา Project แบบ CI/CD ด้วย Gitlab ตอนที่ 1 - การจัดการ Project ด้วย Gitlab ผ่าน Sourcetree !!!...

GitLab คือ Git Hosting (Remote Repository) ที่ใช้จัดการ Git Repository และยังสามารถจัดการ ...

อ่านต่อ
การใช้งาน Git Repository และ Git Hosting กับกระบวนการพัฒนาระบบ !!!

การใช้งาน Git Repository และ Git Hosting กับกระบวนการพัฒนาระบบ !!!

Git คือ Version Control แบบ Distributed เป็นระบบที่ใช้จัดเก็บและควบคุมการเปลี่ยนแปลงที่เกิ...

อ่านต่อ
การพัฒนาระบบตามแนวทาง CI/CD และ DevOps คืออะไร?

การพัฒนาระบบตามแนวทาง CI/CD และ DevOps คืออะไร?

เพื่อแก้ปัญหาจึงเกิดเป็นการพัฒนาระบบตามแนวทาง CI/CD โดยทำงานตั้งแต่การ Plan, Code, Build, ...

อ่านต่อ
การพัฒนาระบบแบบ Microservice Architecture คืออะไร?

การพัฒนาระบบแบบ Microservice Architecture คืออะไร?

การพัฒนาระบบโดยแยกพัฒนาแต่ละเซอร์วิซออกจากกันโดยชัดเจน โดยกำหนด API ไว้ให้เรียกใช้ แต่ละเซ...

อ่านต่อ

รับทำเว็บไซต์

รับทำเว็บไซต์ มีเอกลักษณ์ไม่ซ้ำใคร รับทำเว็บไซต์ เพิ่มโอกาสในการขาย ให้ธุรกิจก้าวนำคู่แข่ง รองรับการแสดงผลทุกอุปกรณ์ มีเว็บไซต์สวยงามน่าเชื่อถือ ด้วยทีมงานคุณภาพ ผลงานกว่าพันผลงาน รับทำเว็บไซต์ ตรงใจธุรกิจของคุณ และช่วยเพิ่มโอกาสที่ดีกว่าให้ธุรกิจคุณ

รับทำเว็บไซต์ ทุกพื้นที่ ทั่วกรุงเทพฯ รับทำเว็บไซต์ รามคำแหง มีนบุรี บางกะปิ รับทำเว็บไซต์ ทวีวัฒนา ดอนเมือง สายไหม รับทำเว็บไซต์ บางขุนเทียน คลองสามวา ประเวศ รับทำเว็บไซต์ สะพานใหม่ สุขุมวิท เกษตร รับทำเว็บไซต์ รามอินทรา วังทองหลาง บางเขน รับทำเว็บไซต์ ลาดพร้าว คลองจั่น นวมินทร์ รับทำเว็บไซต์ สุขุมวิท ห้วยขวาง คลองเตย รับทำเว็บไซต์ พญาไท สาทร ดินแดง ทำเว็บไซต์ ปทุมวัน ราชเทวี รับทำเว็บไซต์ บึงกุ่ม บางนา ภาษีเจริญ ยานนาวา รับทำเว็บไซต์ จตุจักร ตลิ่งชัน สะพานสูง สวนหลวง

ติดต่อ รับทำเว็บไซต์

บริษัท ซอฟท์เมลท์ จำกัด :
1294 ห้อง 3 (เอ) ชั้น 3 ถนนสุทธิสาร วินิจฉัย ซอยอุดมสุข แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310
Phone : 086-394-0954
Email : sales@softmelt.com
Line ID : softmelt

กรุณากรอกข้อมูล และหัวข้อ ที่ท่านสนใจทำเว็บไซต์ ทางทีมงานจะติดต่อกลับภายใน 24 ชั่วโมง