Forem: Coding with his cats

Set up Elm project with Tailwindcss & Parcel

Coding with his cats — Thu, 30 Jul 2020 11:32:04 +0000

I just list out the steps here without explanation. Feel free to ask if you have any question. Thanks for reading!

Initialize project with NPM

npm init --yes

Install dependencies

npm install \
elm elm-format \
tailwindcss \
postcss-modules parcel-bundler

Build HTML with Parcel

create src directory and
create basic HTML file named index.html:

File: src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Run:

npx parcel src/index.html

You should get something like this:

➜ npx parcel src/index.html 
Server running at http://localhost:1234 
✨  Built in 76ms.

Now you should be able to open your browser and go to http://localhost:1234 and see big "Hello" text on that page.

Add tailwindcss support

create index.tailwind.css (you can name it differently) under src:

File: src/index.tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Add link to this file in your index.html

File: src/index.html

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
    <link rel="stylesheet" href="index.tailwind.css" />
  </head

If you go to "network" tab in your browser, you should see that the page already loaded index.tailwind.css. But, without compilation, tailwindcss will not work.

Add PostCSS configuration

To tell Parcel to compile tailwindcss, we need to add PostCSS configuration file to our project.

Create postcss.config.js file:

File: postcss.config.js

module.exports = {
  plugins: [require("tailwindcss")],
};

You need to re-run Parcel to let it aware of this new configuration. Stop current Parcel process and run it again:

npx parcel src/index.html

Note: if you still get uncompiled css file, you may need to remove Parcel cache and dist directories before run Parcel:

rm -rf .cache dist
npx parcel src/index.html

If you see your "Hello" text styles changed, that means you get the right one.

Add Elm support

Initialize Elm

npx elm init

Create Main.elm under src

File: src/Main.elm

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


type alias Model =
    { count : Int }


initialModel : Model
initialModel =
    { count = 0 }


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

Note: I borrow the content from Ellie App.

Create index.js under src:

File: src/index.js

import { Elm } from "./Main.elm";

Elm.Main.init({ node: document.querySelector("main") });

Add this file to src/index.html

File: src/index.html

  <body>
    <main></main>
    <script src="index.js"></script>
  </body>

After saved, re-run Parcel again. Done.

ลดขนาด tailwindcss ไฟล์ด้วย Purge

Coding with his cats — Sat, 27 Jun 2020 15:57:04 +0000

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

แต่ข้อเสียสำคัญของ tailwindcss ก็คือขนาดไฟล์ที่ใหญ่มาก ประมาณ 1-1.2MB ถ้าไม่ตัดอะไรออกเลย วิธีแก้ก่อนหน้านี้คือการใช้ PurgeCSS ในการตัด class ที่ไม่ได้ใช้ทิ้ง ซึ่งก็ไม่ได้ยากอะไรแต่ก็ต้องยุ่งยากขึ้นในการติดตั้งและ config ตัว PurgeCSS ให้ทำงานได้ถูกต้อง

คนทำ tailwindcss เขาก็รู้แหละ ใน version 1.4 เป็นต้นมา เขาก็เลย built-in PurgeCSS มาเลย! ทีนี้สบาย ง่าย จบใน config เดียว

ตัวอย่าง tailwind.config.js ที่เมื่อเราทำ production build (NODE_ENV=production) มันจะเข้าไปดูว่ามี class อะไรถูกใช้บ้าง (ในกรณีนี้คือเข้าไปดูใน elm ไฟล์และ HTML)

module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.elm"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

เมื่อรัน build

➜ npx tailwindcss build src/index.tailwind.css -o src/index.css

   tailwindcss 1.4.6

   🚀 Building... src/index.tailwind.css

   ✅ Finished in 1.8 s
   📦 Size: 29.12KB
   💾 Saved to src/index.css

จาก 1.2MB เหลือแค่ 30KB เท่านั้นเอง

ข้อควรระวัง

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

แบบนี้จะไม่เจอเพราะประกอบชื่อ class จากค่าคงที่

class ("bg-teal-" ++ shade) -- shade คือค่าน้ำหนักสี

แบบนี้ถึงจะเจอเพราะใช้ชื่อ class ของ tailwindcss แบบเต็ม ๆ

class
  (case shade of
    Light -> "bg-teal-200"
    Normal -> "bg-teal-400"

Docker-compose exec using stdin as an input

Coding with his cats — Mon, 22 Jun 2020 21:43:31 +0000

Sometimes you want to execute command inside docker-compose service using input from the host machine. Instead of copy content from host machine to inside the container and run the command, you can use docker-compose exec with stdin as an input.

Example scenario: Execute external SQL files inside the container

You have backup .sql file on your host machine and want to restore it into your Postgresql container. You can run:

cat /path/to/sql/file \
  | docker-compose exec -T service_name \
  psql -U username -d database_name

Option: -T does the trick. By default, exec command of docker-compose allocates pseudo-tty. With -T, it will not -- which means it expects to do one-time command execution so that we can pipe the content of our SQL file in with |.