YouTube มีอะไรน่าดู?

เวลามีคนถามว่าได้ subscribe Netflix หรือเปล่า เราจะบอกว่าแค่ YouTube ก็ดูไม่หมดไม่สิ้นแล้ว… เลยอยากลอง List ช่องที่ subscribe ให้ดู เผื่อจะไปตามกันบ้าง

สาระ

Defunctland

ช่องนี้เป็นช่องนึงที่ content คุณภาพโหดมากและไม่น่าเชื่อว่าฟรี เจ้าของช่องคงเป็นแฟนพันธุ์แท้สวนสนุกอะไรแบบนั้น เค้าจะมาเล่าถึงประวัติสวนสนุกและเครื่องเล่นต่างๆ ที่ปิดไปแล้ว (ถึงชื่อ Defunct)

Death Wears Bunny Slippers

Image result for nuke silo ra2
Not Like This

หลายๆ คนน่าจะเคยเล่นเกม Fallout ที่เรา (เคย) ใช้ชีวิตอยู่ในหลุมหลบภัยนิวเคลียร์ ก็เป็น Fantasy ที่สนุกดี แต่สำหรับแชนเนลนี้เจ้าของช่องซื้อฐานยิงนิวเคลียร์สมัยสงครามเย็นเอามาบูรณะใหม่ให้อยู่ได้

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

แชนเนลนี้ก็เลยจะเล่าถึงว่าเค้าเปิดทางเข้าฐานกลับมาได้อย่างไร (ซึ่งงานช้างมาก ไม่ว่างจริงทำไม่ได้ และไม่ใช่มีตังค์ก็ทำได้เพราะเสี่ยงอันตรายมาก)

เสียดายว่าเจ้าของแชนเนลไม่ค่อยอัพคลิปอะไรแล้ว เค้าบอกว่างานก่อสร้างมันก็ค่อยเป็นค่อยไป จะหวังคลิปทุกสัปดาห์ไม่ได้หรอกนะ…

colinfurze

เข้าใจว่าช่องนี้น่าจะดังมากอยู่แล้ว (ถึงกับมี content ใน YouTube Red) แต่เอาจริงๆ เพิ่งมารู้จักได้ไม่นาน

เจ้าของช่องชอบทำสิ่งประดิษฐ์บ้าๆ ชนิดที่ว่าอย่าทำตามที่บ้านเลย เช่นในคลิปคือรถ BMW ที่ขับได้จริง แล้วยังดัดแปลงให้เป็นอ่างน้ำร้อน แถมด้านหลังยังมีเตาปิ้งย่างอีกด้วย (…)

Kento Bento

ช่องนี้เล่าเรื่องที่น่าสนใจ และสำคัญคือต้องเป็นเรื่องในเอเชียด้วย

เช่น คลิปนี้เค้าเล่าว่าทำไมผู้หญิงเอเชียน่ารัก (สปอย: คำตอบคือเพราะเราชอบผู้หญิงหน้าดูเด็ก และผู้หญิงเอเชียมักหน้าดูเด็ก)

Wendover Production

ช่องนี้ทำสารคดีทั่วๆ ไป คุณภาพค่อนข้างดี แต่คิดว่ายาวไปหน่อย ที่สำคัญคือเหมือนเจ้าของช่องจะชอบการบินมาก ทุกตอนต้องมีพูดถึงเครื่องบินไม่มากก็น้อย…

Half as Interesting

ช่อง Wendover ข้างบนเคยมีซีรีส์ That Wikipedia List ซึ่งคนชอบ ก็เลยแยกเป็น channel ใหม่ออกมาในชื่อ Half as Interesting เพราะเนื้อหาจะยาวครึ่งเดียว แต่ครึ่งเดียวก็ยังยาวไปมันเลยหายไปอีกครึ่งให้กับมีมไร้สาระด้วย…

แต่โดยรวมแล้วรู้สึกว่าชอบ HAI มาก เนื้อหาออกบ่อย สั้น กระชับ และได้ความรู้ trivia ดี

The B1M

ไม่คิดว่าจะมีความสนใจใน field นี้ด้วย แต่ก็รู้สึกว่าการก่อสร้างเป็นเรื่องใกล้ตัวก็เลยดู

ช่องนี้บรรยาย accent หนักหน่อย ฟังไม่ยากเพราะเค้าบรรยายช้าๆ แต่ด้วยความช้านี่แหละเลยดูก่อนนอนไม่ได้ หลับ ถ้าพูดเร็วๆ ก็คงฟังไม่ทันมั้ง…

Cooking

Alex French Guy Cooking


Alex เป็นคนฝรั่งเศส แต่แชนเนลนี้จะพูดภาษาอังกฤษเกี่ยวกับการทำอาหารต่างๆ ที่แปลกคือ Alex จะชอบทำอะไรพลิกแพลงทุกครั้ง เช่นในตอนนี้เค้าเอาเครื่องทำเส้นมือหมุนมาต่อมอเตอร์…. (แน่นอนว่าพัง) แล้วก็จะมีพาร์ททฤษฎีที่ละเอียดว่าทำไมต้องทำแบบนี้ ไม่ใช่แค่เอาสูตรมาทำโชว์เฉยๆ

Content ช่องนี้ออกทุกสัปดาห์ แต่รู้สึกว่าของปีนี้ยังไม่ค่อยโดนเท่าไร อาจจะเพราะเป็นเมนูไกลตัวไปด้วย

Townsends

ชอบประวัติศาสตร์นะ รายการอาหารก็ชอบดู… ช่องนี้ดูคลิปเดียวได้ครบสองอย่างเลย!

ช่องนี้ตามชื่อ เป็นของตระกูล Townsends ซึ่งพ่อเค้า Jas Townsend เป็นผู้ก่อตั้งบริษัทขายเสื้อผ้าและอุปกรณ์ยุคศตวรรษที่ 18 สำหรับกลุ่ม reenactment ส่วนพิธีกรของช่องนี้คือ John Townsend เป็นเจ้าของบริษัทในปัจจุบัน ฉะนั้นพวกอุปกรณ์ทำครัวหรือเสื้อผ้าที่ใส่ก็คือสินค้าบริษัทเค้าหมด แต่ไม่เคยเห็นช่องนี้พยายามขายของเลยนอกจากหนังสือ Cookbook ที่เค้าเอาสูตรมา

เนื้อหาในช่องก็จะเกี่ยวกับยุคศตวรรษที่ 18 ทั้งหมด ส่วนมากก็จะทำอาหาร แต่ก็มีเรื่องอื่นๆ เหมือนกันอย่างตามวิดีโอข้างบน

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

Gaming

98DEMAKE

แชนเนลนี้เอาเกมดังๆ มา “demake” คือตรงข้ามกับ remake ถ้า remake คือเอาเกมเก่ามาทำใหม่ อันนี้เอาเกมใหม่มาทำเก่า

ตั้งแต่ subscribe มายังไม่ค่อยเห็นอัพอะไร ช่วงนี้เค้าขายเกมใหม่เค้า September 1999 เป็นเกมผีแต่ภาพแบบ VHS

Ahoy

อีกช่องสารคดีหนึ่งที่คุณภาพคับแก้วมาก คนพากย์เสียงก็มืออาชีพ ฟังแล้วรู้สึก Mysterous ดี

ช่องนี้จะเล่าถึงประวัติศาสตร์เกมมิ่ง เช่นตอน Polybius นี้เล่าถึงเกมที่ไม่มีอยู่จริงแต่เป็นตำนานของอินเทอร์เน็ต คิดว่าตอนนี้น่าจะเป็น EP ที่เทพที่สุดในช่องแล้ว

Squirrel Monkey

คล้ายๆ ช่อง 98DEMAKE แต่ย้อนยุคไปอีกหน่อย เค้าทำมาเป็นลักษณะคล้ายๆ รายการสื่อการสอนสมัยก่อน คนพากย์ก็ไม่ใช่ใครแฟนเค้านั่นเอง…

Errant Signal

ถ้าเล่นเกมจบแล้วอยากฟังคนพูดเกี่ยวกับเกมนั้น Errant Signal นี่เป็นแชนเนลเดียวที่ดูอยู่เลย มันไม่ใช่ช่องรีวิวเกมเพราะมันสปอยทั้งเกม แต่ช่องนี้เค้าจะวิเคราะห์เนื้อเรื่องผสมกับ Game Design ด้วย

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

Game Maker’s Toolkit

แต่ถ้าอยากฟังเฉพาะ Game Design ช่องนี้ก็เอา mechanics ของเกมมาย่อยให้ฟังพร้อมตัวอย่างเข้าใจง่ายๆ

LGR

ช่องนี้ดังอยู่แล้วอาจจะไม่ต้องแนะนำเยอะ เค้าจะชอบรีวิวของเก่าๆ ไม่ว่าจะเป็นเกมเก่าหรือ hardware เก่าๆ แต่บางทีของใหม่ก็มีอยู่บ้างนะ

Travel

ออกตัวก่อนว่าไม่ค่อยชอบรายการท่องเที่ยวเท่าไร แต่รายการที่ดูนี่ชอบมาก

ONLY in JAPAN

ช่องนี้เป็นรายการท่องเที่ยวทั่วๆ ไป เนื้อหาค่อนข้างกระชับไม่ยืดเหมือนรายการในไทยเท่าไร โดยเฉพาะว่าเค้าเน้นเนื้อหามากกว่าพิธีกร

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

Strange Parts

ผมไม่รู้ว่าจะเอารายการนี้ไว้หมวดไหนดี มันคือ Travel for Nerds โดยเฉพาะ

เจ้าของช่องเป็นฝรั่งที่อยู่ที่เสินเจิ้น ซึ่งเค้าก็พาไปเที่ยวเมืองที่เป็นศูนย์กลางการผลิตอิเล็คทรอนิคส์ของโลกสไตล์ Nerdๆ ด้วยการสร้างอะไรแปลกๆ แล้ว source หาส่วนประกอบจากร้านในเมือง

อ้อ… เค้าเคยไปเดิน Akihabara กับเจ้าของช่อง Only in Japan ข้างบนด้วยนะ

Abroad in Japan

ในบรรดาที่ดูอยู่คิดว่าชอบช่องนี้ที่สุดแล้ว!

Chris Broad เป็นคนอังกฤษที่ไปเป็นครูฝรั่งสอนภาษาอยู่ที่ญี่ปุ่น ด้วยความเบื่อก็เลยทำ YouTube เล่นๆ แล้วดันดังก็เลยมาทำ YouTube เต็มเวลา ที่พิเศษคือเค้ามี passion ด้าน filmmaking ด้วย รายการแต่ละตอนถึงจะ 10 กว่านาทีแต่ดูแล้วจะรู้สึกกระชับมาก

ช่วงนี้มีซีรีส์ Journey Across Japan ช่วงแรกลงทุกวัน (บ้าพลังมาก) แต่ตอนหลังเริ่มค่อยๆ ลงแล้ว เค้าบอกว่าอยากให้มันพรีเมี่ยม

มีเพื่อนนิยามช่องนี้ง่ายๆ คือ content ตอนไหนก็ได้ที่เค้าไม่ได้ถ่ายที่บ้าน สนุกหมด

อีก content หนึ่งของช่องนี้ที่พรีเมี่ยมมากคือหนัง Natsuki The Movie เล่าถึงเพื่อนคนญี่ปุ่นที่ไปอังกฤษครั้งแรก จะเรียกว่าเป็น Vlog แบบเรื่องยาวก็ได้ แล้วมันไม่น่าเบื่อด้วยนะ

Etc

Deerstalker Pictures

เอาไว้ดูแฟนเซอร์วิส จบนะ

Content ออกค่อนข้างบ่อยด้วย ประมาณเดือนละครั้ง ซึ่งก็ถือว่าเยอะมากเพราะงานดีย์จริงๆ

Emotion CSS SSR ทำงานอย่างไร?

ผมเป็นแฟน Emotion CSS มาสักพักแล้ว รู้สึกว่ามัน clean กว่าตัวเลือกอื่นๆ มาก โดยเฉพาะว่ามันไม่ผูกกับ React เลยรู้สึกเหมือนเขียน style ก่อน แล้วเอาไปใส่ component ไม่ใช่ component ที่ถูก style มาแล้ว (พูดง่ายๆ คือมันรู้สึกเหมือนเขียน old school CSS มากกว่า )

แต่ Emotion กลับชอบเปลี่ยน core บ่อยมาก

  • Emotion 5 ใช้ CSS parser ที่ดึงมาจาก styled component แล้ว insertStyle เอง
  • Emotion 6 ใช้ glam
  • Emotion 8 ใช้ stylis.js

วันนี้อยากจะพูดถึงสักหน่อยว่า Emotion มันทำ server side rendering อย่างไร เนื่องจากว่าก่อนหน้านี้เพิ่งส่ง pull request เข้าไปแก้บั๊กเกี่ยวกับ SSR

Emotion 9

ใน Emotion 9 ฟังค์ชั่น css จะ return string cache_key-name ทำให้เราสามารถใช้ className={...} ได้ ซึ่งปกติ cache.key ก็จะตั้งเป็น css ทำให้เราจะเห็นเว็บที่ใช้ emotion ใช้ class ประมาณว่า css-1fe12ej

จากนั้น เวลาเราเรียก renderStylesToString ใน server side rendering มันจะใช้ regex <|${cssKey}-([a-zA-Z0-9-_]+) match เข้าไปยัง HTML ที่ได้จาก React renderToString

จะเห็นว่า Regex นี้ match ได้สองแบบคือ

  1. ตัว < (open tag)
  2. cache_key-name ตามรูปแบบที่ css สร้างไว้

เมื่อพบข้อความที่คล้าย class name แล้ว มันจะทำ list ไว้จนกระทั่งพบตัว < ถัดไป พอพบแล้ว ที่ตัว < ก่อนหน้าจะถูกแทรก <style> tag ที่มี definition ของ class เหล่านั้นลงไป เราจึงจะเห็นว่าในเว็บที่ใช้ emotion จะมี <style> tag อยู่จำนวนมาก แต่จะแทรกอยู่หน้าครั้งแรกที่ใช้ครั้งเดียว ไม่ใช่เป็นก้อนใหญ่ๆ ไว้ในหัวเว็บ

วิธีนี้แน่นอนว่าไม่ใช่ foolproof เพราะผมเองก็เคยเจอบั๊กที่ว่าเว็บมี <a href="...-css-programmer"> แล้ว emotion เลย lookup id programmer ทำให้เกิด <style>undefined</style> ซึ่งก็แก้ไปใน pull request ที่ส่งเข้าไปแล้ว

หรืออีกวิธีหนึ่งที่เทสได้คือลองพิมพ์ css-... ที่ตรงกับ class ที่มีอยู่จริงลงในหน้าเว็บ ก็จะปรากฏว่ามันจะแทรก css ชื่อนั้นลงไปหน้า tag นั้นด้วย ตรงนี้คิดว่าไม่อันตรายถึงขั้น security (เพราะแค่แทรก style tag จาก style ที่มีอยู่จริงในเว็บ) แต่ก็ทำให้เว็บมันรกๆ ได้

<style data-emotion-css="1fjv9nj">.css-1fjv9nj{color:#36629e;}</style><li>ugc textcss-1fjv9nj</li>

ความเจ๋งของเทคนิคทั้งหมดนี้คือ Emotion จึงไม่ได้ผูกกับ React หรือ library ใดเลย เพราะจะสังเกตว่าทุกอย่างทำงานอยู่บน string ทั้งหมด จะใช้กับ HTML อย่างเดียวก็ได้

Emotion 10

Emotion 10 มาพร้อมกับฟีเจอร์ใหม่ Zero configuration serverless ซึ่งตอนนี้น่าจะเป็นเจ้าเดียวที่มี มันทำได้ยังไง?

Emotion 10 เปลี่ยน API ของ css ออกไป โดยจะ return เป็น object แทน จากนั้นจะเห็นว่า Emotion 10 บังคับให้ลง babel plugin หรือ เขียน /** @jsx jsx */ ไว้ที่หัวไฟล์

สิ่งที่ directive นี้ทำคือเปลี่ยนวิธีที่ Babel compile React component ใหม่ จากเดิมคือ

<div css="example">body</div>

React.createElement(
    "div"
    {css: "example"},
    "body"
)

จะเปลี่ยนเป็น

jsx("div", {css: "example"}, "body")

ซึ่งจะเห็นว่าเหมือนกับของเดิม แค่เปลี่ยน function เป็น jsx เท่านั้น แล้วในโค้ดเราจะต้อง import {jsx} from "@emotion/core" มาด้วย

เมื่อลองไล่โค้ด jsx ดูก็จะเห็นว่ามันครอบ React.createElement จริงไว้อีกทีหนึ่ง โดยถ้า component มี prop ชื่อ css มันจะแอบสลับ component ให้เป็น <Emotion __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div" css="example">body</Emotion>

ท่านี้คนเขียน React อาจจะคุ้นเคยถ้าเรียกมันว่า Higher order component ซึ่งอาจจะเขียนได้แบบนี้

function jsx(Element){
    return (...props) => {
        if(!props.css){
            return <Element {...props} />;
        }

        return <Emotion __EMOTION_TYPE_PLEASE_DO_NOT_USE__={Element} {...props} />
    }
}

แล้วเอา HOC นี้ไปครอบทุก element ในหน้า รวมถึง primitive element ด้วย Emotion จึงเลือกใช้การเปลี่ยน React.createElement แทนที่จะใช้ HOC ปกติเพื่อความสะดวก

ทีนี้ <Emotion /> ทำงานยังไง?

ซอร์สโค้ดของ component นี้อยู่ในไฟล์เดียวกัน ก็มีส่วนซับซ้อนมากมาย แต่ส่วนที่เราสนใจคือส่วนที่มันทำให้ zero config server side rendering ได้

วิธีการที่มันทำก็น่าสนใจมาก โดยใช้ React Fragment ที่เพิ่งมาใหม่ (แต่ก็เก่าแล้ว)

return (
  <React.Fragment>
    <style
      {...{
        [`data-emotion-${cache.key}`]: serializedNames,
        dangerouslySetInnerHTML: { __html: rules },
        nonce: cache.sheet.nonce
      }}
    />
    {ele}
  </React.Fragment>
)

พูดง่ายๆ ก็คือ <Emotion /> นั้นก็เป็น HOC อีกชั้นหนึ่งที่จะครอบ component จริงไว้คู่กับ <style> tag ใน React Fragment (และ inject className เข้าไป) หรือเป็นโค้ด HOC อาจจะแบบนี้

function Emotion({css, __EMOTION_TYPE_PLEASE_DO_NOT_USE__, ...props}){
    let rules = getCssString(css);
    let className = getCssClassName(css);
    let Element = __EMOTION_TYPE_PLEASE_DO_NOT_USE__;
    return (
        <>
            <style dangerouslySetInnerHTML: { __html: rules } />
            <Element {...props} className={className} />
        </>
    )
}

ด้วยการใช้ Fragment ทำให้ Emotion 10 ทำ server side rendering ได้ โดยไม่ต้องแก้โค้ดฝั่ง server ใดๆ

Tradeoff

ก็เสียดายว่าท่าพวกนี้นั้นกลับกลายเป็นว่า Emotion 10 ผูกติดกับ React แน่นมาก

ใน Docs ของ Emotion เองแนะนำให้ migrate ไปใช้ API ใหม่นี้ทั้งหมด แต่ก็เขียนไว้ว่าเฉพาะถ้าคุณใช้ React นะ ก็ยังไม่รู้ว่าในอนาคต API เดิมจะยังมีการพัฒนาต่อหรือไม่ ตอนนี้ใน GitHub เองก็ยังมีทั้ง package ของ API เก่าและใหม่อยู่ด้วยกัน