250 Followers
·
Follow

Image for post
Image for post

วันนี้ผมจะมาสอนเทคนิคที่เรียกว่า Fluid Typography (แปลไทยน่าจะประมาณทำให้ตัวหนังสือเป็นของเหลวๆ ยืดหดได้ตามภาชนะครับ เพราะ Fluid แปลว่าของเหลว) มันจะไม่เหมือนกับการทำ Responsive Typography นะครับ เพราะ Responsive Typography มันคือการเอา breakpoint มาดักไว้

ลองมาดูตัวอย่างการทำ Responsive Typography นิดนึงจะได้เห็นภาพมากขึ้น

p { font-size: 15px; }

@media screen and (min-width: 480px) {
p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
p { font-size: 19px; }
}

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

Image for post
Image for post
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

และที่จะมาใช้กันก็คือแค่ rem, vh , vw , em

Prerequisite

viewport

ปกติแล้ว viewport คือพื้นที่ที่เรามองเห็นหน้าเว็บ เล็กใหญ่ขึ้นอยู่กับขนาดจอของ device นั้นๆ เช่น

www.algorithmtut.com

ถ้าลองดูเว็บผมจากมือถือจะเห็นพื้นที่เท่านี้ ความยาวนี้อาจจะแค่ 574px ซึ่งก็คือ 100% หรือ 100 viewport แต่ถ้าดูเว็บผมจากจอคอมหน้าจอมันก็จะกว้างบางคนจอใหญ่หน่อยก็ 1440px และวิธีคิดจะกลายเป็น 100% และ 100 viewport จะเท่ากับ…


Image for post
Image for post

บทความนี้ผมจะมาสอนวิธีการใช้ตัว Redux Toolkit แทนการใช้ Redux core ผมเชื่อว่าหลายๆ คนเจอปัญหาว่าการใช้งาน React กับ Redux นั้นยากมาก ทั้งมือใหม่และมือเก่า ในช่วงแรกๆ เสียเวลาชีวิตสุดๆ เลย กว่าจะเข้าใจเรื่อง Stores, Actions, Reducers, Action Creators ได้หมดเวลาไปหลาย ชม. และถ้าเกิดว่าตัว Action Creators เราดันเขียนมันให้แบบ Return function หรือ promise แทนการโยน Action กลับออกมาจะต้องมาใช้ Redux-thunk อีก (ใครนึกภาพไม่ออกแนะนำไปอ่านคอมเม้นของ Dan Abramov ผู้สร้าง Redux ได้ที่ Stackoverflow) [บทความอื่นๆ link] และวันนี้เราจะมาเขียนโค้ดให้เสร็จภายในไม่ถึง ชม. กัน ด้วย Redux Toolkit

Let’s get started

สำหรับใครที่ใช้ create-react-app แล้วอยากได้ตัว starter ที่มีโค้ดของ Redux toolkit ติดตั้งมาให้ แนะนำให้ติดตั้ง create-react-app ด้วยคำสั่งนี้

npx create-react-app [you-app-name] --template redux

และใครใช้ Next.js ก็ใช้คำสั่งนี้เลยครับ

npx create-next-app --example with-redux-toolkit [your-app-name]

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

# NPMnpm install @reduxjs/toolkit# Yarnyarn add…


Image for post
Image for post

Introduction

บทความนี้เราจะยังมาต่อในเรื่องการคูณของ Polynomial อยู่นะครับ แต่ว่าเป็นการอธิบายในแบบของการเอา Monomial มาคูณกับ Polynomial แทนครับ ก่อนจะไปอธิบายตรงนั้น ผมขออธิบายเรื่อง Distributive property ก่อน เพื่อให้ทุกคนเข้าใจว่าหลังจากนี้ไปถ้าผมจับเลขสองตัวมาคูณกันมันเกิดจากอะไร

Distributive property

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

เราสามารถนิยามมันได้แบบนี้ครับ

ถ้า a, b, c เป็นจำนวนจริง ดังนั้นถ้า a(b+c) = ab + ac

Image for post
Image for post

ยกตัวอย่างเช่น

3*(9.25)
= 3(9 + 0.25)
= 3(9) + 3(0.25)
= 27 + 0.75
= 27.75

หรือ

3(1 + 4)
= 3 * 1+ 3 * 4
= 3 + 12

Multiplication

หลังจากที่เราเข้าใจการคูณกระจายแล้วเราจะมาลองการเอา Monomial ไปคูณกับ Polynomial กัน อย่างเช่น

6(5y + 1)
= 6 * 5y + 6 * 1
= 30y + 6
-(y +5)
= -1(y + 5)
= -1 * y + (-1) * 5
= -y + (-5)
= -y - 5

และถ้าหากเราเอามารวมเข้ากับเลขยกกำลังในบทความก่อนหน้านี้ก็จะได้แบบนี้

-2x(5x² + 7x - 3)
= -2x * 5x² + -2x * 7x - (-2x) * 3
= -10x³ - 14x² - 6x
Image for post
Image for post

About

NSLog0

I’m a Software developer. I’m interesting about science, Music, Digital Art

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store