DEV Community: Pontakorn Paesaeng

I built a note taking app to practice React

Pontakorn Paesaeng — Sun, 25 Jul 2021 13:19:39 +0000

Original Thai version: https://pontakorn.dev/blog/note-taking-app-with-react

I am during university vacation right now so I am kinda free. I have no idea what to do next and just stumble upon Zustand from a discussion about state management tools. So, I decided that I would try to it with React.

Structure of Starnote

React: Yeah, I use React to practice React. Actually, I wanted to try CSS-in-JS solution except there are too few components to even benefit from it.

CSS Module: Since there is no benefit using CSS-in-JS library. I tried using CSS Module instead. At least, I don't have to worry about cascading and naming much.

Vite: I use Vite for all projects including React, Vue, or even Svelte. It's easy to setup things and it's fast to reload.

Zustand: I found it from this thread. I am interested because it only uses React Hook and not wrapping components.

I use TypeScript for this project because it is easier to find bug and TypeScript has better autocomplete.

Starnote Development

It is a side project without plan to publish. The MVP version includes CRUD operations, Markdown support, syntax highlighting and saving to localStorage.

store/note.ts: This is where I put Zustand store and code working with localStorage. It might be large but I think it's too small to separate into different files.

TheSidebar and TheEditor: I only use one component so I prefix them with "The". They both connect with Zustand directly.

There is nothing interesting about development of Zustand enough to put on this blog. I want to write my own CSS so I didn't use WindiCSS or Tailwind. I use ReactMarkdown and ReactSyntaxHighlighter but not markdown editor. It's just a normal textarea.

Possible improvement

If anyone tried to use Starnote with mobile, they wil find that it is not responsive yet. If there is anything to improve, I would try this one first. So, I can fully put live demo online.

Also, I would like to implement online saving. Users would be able to edit their notes from anywhere. I don't focus on this part yet. If I get a chance to do, I might try either Firebase or Supabase to not having to write backend.

Do you use built-in terminal or terminal emulator?

Pontakorn Paesaeng — Sun, 25 Jul 2021 06:05:22 +0000

I just want to have a friendly discussion why someone use built-in terminal (VSCode Terminal, Intellij Terminal) or terminal emulator (Kitty, iTerm2, Terminal).

I personally use built-in terminal more because it's more convenient for me.

I built a Hugo template with WindiCSS

Pontakorn Paesaeng — Thu, 24 Jun 2021 15:00:26 +0000

Link: https://github.com/pontakornth/hugo-with-windicss

How did I build it?

Hugo actually has some assets processing features such as SCSS and PostCSS. WindiCSS is also available as PostCSS module but the author said that it should be the last resort.

NPM script can actually run other command as well. I can use it to run hugo command. The problem is CSS need to be generated along with Hugo dev server for good developer experience (DX).

npm-run-all comes to rescue

I don't really remember where I know npm-run-all in the first place. It is a package that allow you to run command in parallel or sequence. It is possible to run multiple command using && in Unix-based system. However, it is not supported on Windows CMD.

WindiCSS config

If you read the config files, you will see extract field. It is a field that allow WindiCSS to include and exclude files from building. This feature allow WindiCSS to generate enough CSS to display things correctly but no additional unused CSS.

I don't include anything besides basic template so you can build on your own without having to modify the theme or rebuild from scratch. I hope you enjoy building your site.

I build a minimal Conway's Game of Life with JavaScript

Pontakorn Paesaeng — Wed, 16 Jun 2021 04:46:51 +0000

It's minimal version I can come up with for now. Currently, starting positions of cells are hard coded. But, the game is working correctly.

I wish to add a feature where I can toggle cell by clicking. I see why Conway's game of life become an example project for WASM with Rust. It's difficult to do it efficiently. For example, to change state of the grid, I created a whole new array just to store next state. It can be done more efficiently by storing change instead.

The code is not really consistent for now. But, I will left it be because I need to reference it when I improve the code in another project.

I made a 100 days of code blog

Pontakorn Paesaeng — Wed, 12 May 2021 15:22:19 +0000

Link: https://100days-pontakorn.vercel.app/

Before the challenge, I had little or no motivation to code after studying. So, I decided to take this challenge but not really strictn. I don't use 1 hour rule because it might prevent coding after getting tired by studying in university. There is a some kind of "pause period" because I needed to study for the final exam.

Most projects are about frontend web development. Some of them are projects that related to the web development or can apply what I have learned from the project to the web. My goal is to practice and apply knowledge to improve myself for taking a job.

The blog is currently built with Nuxt and Nuxt Content. It is a great stack for simple blog.I use WindiCSS for styling because it generate only CSS I used and it integrates well with Nuxt.

I hope I can finish 100 days of code with myself improved significantly.

Variable are named after its purpose, not the other way around

Pontakorn Paesaeng — Mon, 09 Nov 2020 03:30:29 +0000

Original Thai Version here: https://pontakornth.vercel.app/blog/we-defined-variable-name-not-program

It's common problems I found after teaching my friends and girlfriend basic programming. They tend to associate variable name with what is named. For example, i is used as index althought i is the value in for i in a_list.

So I will show the snippet of running code but variables and functions name are not related to its purpose.

import math
def slow_sort(a_list: list, query: int):
    star_platinum = len(a_list) - 1
    the_world = 0
    while the_world <= star_platinum:
        hermit_purple = math.floor((the_world + star_platinum) / 2)
        jonathan_joestar = a_list[hermit_purple]
        if jonathan_joestar == query:
            return hermit_purple
        elif jonathan_joestar < query:
            the_world = hermit_purple + 1
        else:
            star_platinum = hermit_purple - 1
    return -1

If it's not familiar to you, it's fine. This is a snippet of binary search. As you see the variable is not related, to its purpose at all. However, it runs perfectly fine.

To conclude, the variable name is not necessary related to its purpose but it should. When you are programming, you need to remember the purpose of the variable. Happy coding.

Any good project that's not a web

Pontakorn Paesaeng — Thu, 21 May 2020 11:01:21 +0000

Most of time I develop a web as a project and it's getting more boring. Even challenging project doesn't seem to be interesting now. By the way, I know other language such as Rust, Python and Go but I don't know what to program now. Feel free to recommend anything. I wish this post to be useful for everyone.

Deno ฉบับรวบรัด

Pontakorn Paesaeng — Sun, 17 May 2020 10:10:05 +0000

ตอนนี้ Deno เวอร์ชัน 1.0 ก็ออกมาเรียบร้อยแล้ว จึงทำให้ได้รับความสนใจจากโปรแกรมเมอร์ในฐานะตัวรัน JavaScript ตัวอื่นนอกจาก NodeJS

Deno คืออะไร

Deno คือตัวรัน JavaScript อีกตัวนอกจาก NodeJs ใช้เอนจินต์ V8 เหมือนกัน Deno เขียนโดยใช้ภาษา Rust มีโครงสร้างไลบรารี่คล้าย ๆ กับภาษา Go นอกจากนี้ยังสามารถรัน TypeScript ในตัวได้ด้วย

จุดเด่นของ Deno

Deno เป็นตัวรัน JavaScript ที่ตั้งค่าความปลอดภัยสูงสุดตั้งแต่ต้นเลย สคริปต์ต่าง ๆ จะใช้ระบบไฟล์ ต่อเน็ต อะไรก็ไม่ได้จนกว่าเราจะอนุญาต นอกจากนี้จะไม่มี node_module หรือ package.json แต่จะ import จาก url และไฟล์ภายในเครื่อง

นอกจากนี้ Deno ก็มีตัว Debugger รวมถึง Formatter ในตัวอีกด้วย เรียกได้ว่าเครื่องมือครบครันกันทีเดียว

ตัวอย่าง

// ดัดแปลงมาจาก https://deno.land/std/datetime
import { parseDate } from 'https://deno.land/std/datetime/mod.ts'
console.log(parseDate("20-01-2020", "dd-mm-yyyy"));

จะเห็นได้ว่าเราใช้ Url ในการ import ไลบรารี่ ไฟล์ใน Url จะสามารถ cache ได้ครับ

ที่มาและแหล่งศึกษาเพิ่มเติม

ทาง Deno มีเว็บไซต์อย่างเป็นทางการที่ deno.land ครับ จะรวมคู่มือและเอกสารของตัว Deno เอง ส่วน standard library จะอยู่ในเว็บไซต์ deno.land/std ครับ

What I learned from using Svelte to create basic note taking app.

Pontakorn Paesaeng — Thu, 30 Apr 2020 04:18:24 +0000

The code is store on this repo
This is not production ready. It's not even linted.

I heard about Svelte that it is simple and good. So I decided to go through the tutorial and created a simple project base on knowledge I have. These are what I learned

Svelte is easy to setup.

There are official Webpack and Rollup template. However, I used community created Parcel plugin as I am more familiar with Parcel.

Single file component is easy to pickup.

I find that Svelte is easy to learn especially when you use Vue or Nuxt before. There is no need to declare a component. You can just declare a variable and used in template. This is convenient. You might still have to get used to label syntax and dollar sign for store.

Condition and loop are represented by its block so it's similar to how you write other program

<ol>
{#each pages as page (page.id)}
 <li>{page.name}</li>
{/each}
</ol>

Svelte syntax may cause false positive error in linting.

I didn't lint the code this time but my VSCode validation report unused label and values even it's used in template. Store is used with dollar sign so it can trigger false positive on some linting program. You might want to use dedicated plugin for Svelte.

Reactivity may need additional work.

Svelte's reactivity has a problem dealing with array and object update. If you use other methods than assignment, you need to reassign variable to itself. It can lead to redundant code.

This is my first time using Svelte. There are more things I need to learn. I don't know if I am going to use Svelte in next project but this is one of the tool I considered. Thanks for reading. Feel free to comment anything.

Any tips or example for using Firestore with MobX

Pontakorn Paesaeng — Wed, 12 Feb 2020 12:24:41 +0000

I am doing a NextJs app and I just need state management and Firestore intergration. Redux is too complicated for this job within time limit at the end of February.

The last tutorial I found is using Firebase Realtime Database. The data is aleady on Firestore so I can't change that. I appreciate your support and thank you in advance.

Also, it would be nice if you can help me to persist MobX state in localStorage.

What exactly is big O, big Θ, big Ω ?

Pontakorn Paesaeng — Wed, 15 Jan 2020 13:44:58 +0000

I took a course at Khan Academy but I didn't understand it yet. I think understand these would improve my understanding of alorithms.