• First, an introduction to where this tech came from.
• Second, then we’ll talk about what it can do now.
• Lastly, we’ll dream a little about what it might do in the future.

Introduction

“Deep Neural Networks” rocketed in the ’20s, thanks to loads of data and super-fast computing. Text-to-image technology, since the mid-2010s, stepped up big time with these networks in 2022. This tech takes text and images, and blends them together making things easier to understand and use.

A big moment arrived on July 12, 2022, when a Midjourney text-to-image product hit open beta. It could spawn images from words (text prompts) and it left everyone dumbfounded. Then, on November 30, 2022, ChatGPT launched making a massive impact. It showed us the power of these models and with the understanding of the model, we’re now ready for more.

As part of “Deep Neural Networks”, different techniques have come and gone over the years.

2014–2016, Generative Adversarial Networks (GANs) helped create images between “real” and “fake”. Developed by Ian Goodfellow in 2014, GAN was just the beginning.

2016–2018, A significant stride was made with StackGAN They made high-quality images from words by using two stages — stage 1) creating a rough image from text, and stage 2) then making it better using the rough image and text.

2017, AttnGAN improved upon StackGAN by introducing attention mechanisms

2020+, with a combo of successful models from NLP and GANs for better image output. Prime examples are DALL-E by OpenAI which makes awesome images from words.

2022, The current hot shot is Stable Diffusion (based on diffusion techniques introduced in 2015), launched in 2022. It starts with random noise and tries to guess the original image. Interestingly, while training, noise is removed from the image. But in use, we reverse it — input is noise and it tries to guess the original image. It further compresses the image, making it more effective, faster, and smaller.

Current

These days, everyone is using the “diffusion” technique as a fundamental model. Notably, a significant change came through the way we command the generated image, called “prompt”.

Navigating prompts to get an expected image requires a certain level of skill, and because of that, we now have the role of “prompt engineering.” People with this expertise know how to guide text-to-image AI to churn out desired visual outputs.

• You have no idea what to prompt? There is a prompt marketplace, for buying and selling prompts like PromptBase
• If guidance is all you need, PromptPerfect offers help
• Need to control an image’s pose? Try controller.
• Dealing with low-resolution images? Upscale Media has got you
• Need a free tool? everyone loves free stuff, and guess what? “Diffusion” can be used for free at huggingface.co/CompVis/stable-diffusion.
• Explore more style: although the generic model might need fine-tuning to give your images a unique style, you can also get styled models from civitai.com

Now you can tailor to the style you want, only one more step is to add generated image to your daily working tool like “Adobe Illustrator”. Recently, Adobe Firefly — released built-in text-to-image generation, no need external tool any more. Feature like

• text-to-image
• inpaint / fil the space
• recoloring
• text-to-vector-graphic

Despite progressing leaps and bounds, text-to-image AI presents ongoing challenges.

• Weird shapes like hands still a challenge
• Maintaining image consistency across various prompts and there is some workaround for that
• Various file support like SVG, PNG, JPG, and other formats
• Specific styles generated like pixel-art style

Despite these hurdles, the journey to perfecting text-to-image AI moves on, and the future holds exciting possibilities.

Future in the next 3 years

Predicting the future can be quite a gamble, but it’s always exciting. With sound intuition and industry knowledge, we might gain a valuable head start. Here’s a glimpse into what we might expect.

• We anticipate high-resolution image generation and detailed control over outputs will become commonplace.
• The boundary between “real” and “generated” will blur to a point where distinguishing one from the other will be impossible.
• Moreover, the role of “prompt engineer” will become a general skill — something every user should master, just like Microsoft Word or Excel.
• Increasingly, we might find ourselves acting more like “auditors” or “tailors” of generated images, using AI tools to pivot, demo, or test ideas rapidly, significantly boosting our productivity.
• Moreover, AI, and specifically text-to-image models, will likely become built-in features of relevant existing products. Take, for instance 1) the vector generation integrated into Adobe Firefly, 2) or the coding assistant GitHub Copilot in Visual Studio Code and IntelliJ IDEA, 3) ChatGPT could expand capabilities to include image generation and understanding, 4) and even Gmail could employ AI for email composition.
• Company can either tap into it by using 1) APIs like OpenAI API or 2) develop and utilize their own models akin to Retro Diffusion Extension for Aseprite.
• While this presents an exciting landscape, I believe big companies would hold an advantage due to their substantial resources and existing user base.
• Yet, AI startups can thrive by strategically focusing on niche markets. They need to find areas substantial enough for survival yet too small to grab big company attention.
• In terms of models, while a “one model suits all styles” approach will likely be developed, its huge size and corresponding processing power requirements might keep it from widespread real-world usage. Instead, specialized niche models might be more viable.
• Fully automated, virtual models to promote products could become ingrained in our commerce systems.
• Legal and ethical debates around AI and copyright issues will continue, requiring thoughtful regulation.
• Above all, one thing is clear: AI presents “Significant Business Opportunities”. There are many undiscovered business ideas in AI waiting to be unearthed in the coming years. Let’s wait and see!

Conclusion

The journey of text-to-image generation has been an eventful one. From humble beginnings to a significant boom with advancements in “deep neural networks”, this technology has gone through a radical transformation.

The Midjourney shows potential of this technology, leading to an array of exceptional results. This progress isn’t lost on industry players who rapidly adapted it into their products, a prime example being Adobe Firefly.

Our predictions for the future of the technology, while speculative, are filled with continued growth. The impact of text-to-image technology is far-reaching. It’s opened up numerous opportunities across different industries and, as we move forward, it is likely to become a tool used by everyone.

As we conclude this journey, one thing we know for certain is this: no matter where we go from here, text-to-image generation will play a substantial part in shaping our digital landscape.

1. Introduction
2. GPT In Agoda
3. Preparation for the Hackathon
4. Hackathon days
5. Evening Presentation
6. Useful Resources
7. Conclusion

So, let us dive. For the technical details, you also can find them in the “Useful Resource” section.

Introduction

ChatGPT is a chatbot that can communicate with humans via text input and has reached an impressive milestone of a million users in under a week. This technology is becoming ubiquitous, but how can we harness its incredible capabilities, and is it worth investing our time in learning it? With technology advancing at such a rapid pace, hackathons offer an excellent opportunity to dive into new technologies.

Hackathons are exciting events that bring together groups of people to collaborate on a project within a specific timeframe, such as Global Game Jam. Personally, I have taken part in hackathons, such as Global Game Jam, and found them to be both enjoyable and rewarding. Working with friends in a time-constrained environment makes for a fast, fun, and efficient learning experience. If you are keen on exploring cutting-edge technologies like AI, participating in a hackathon could be the ideal starting point.

GPT In Agoda

At Agoda, we are constantly exploring new technologies, and GPT is one promising technology that we are particularly interested in due to its potential for advancing various applications. We heavily rely on Slack as our primary messaging platform to facilitate seamless communication among our SE (Software Engineer) team. As a result, we have developed an internal Slackbot that is contextually designed around Agoda’s Confluence Space.

The diagram shows how Slackbot was built, which can be simplified into the following steps;

1. We collect Confluence data, indexing and saving it.
2. When receiving a trigger (we use emoji) then we get the user’s “query” and find a high similarity context (against the indexing data from 1)
3. We create a prompt that combines “query” and “context”
4. Then we use that generated prompt to call OpenAI API
5. After getting the OpenAI API response, we return to the user with a reference Slack thread URLs

The generated prompt, looking like this.

Given these contexts below 
-------------------------------- 
<context> 
-------------------------------- 
If the given context is relevant to the question,
use it to help answer the question 
Please generate an answer. 
Answer the question: <query>

At first, I was skeptical about the effectiveness of this approach. But much to my surprise, it worked well, providing satisfactory responses with relevant references. Then, in February 2023, Agoda announced an internal hackathon. I spent a week researching GPT and its capabilities and decided to participate.

Preparation for the Hackathon

To summarize what we did, a week prior to the event, we conducted further research. We brainstormed, proposed, and discussed ideas within the department, which we then categorized into six sections. In total, 197 people joined the event, resulting in 41 teams. Personally, I decided to join a team called “SupportHero” with some of my friends.

Hackathon days

At the beginning of the hackathon, the CTO and other organizers introduced the event and provided guidelines to assist us in developing our projects and preparing for presentations. My team was: Abhishek Kumar Pandey, Carlin Campbell, Nathachai Thongniran, Rajesh Veeranki, Tzahi Hakikat, and Venkat Shukla.

First day: Grooming Day

After dedicating almost a day to ideation and planning, our team settled on a project called “SupportHero.” Our idea was to leverage Slack data to create a more efficient system for addressing common inquiries. Given that Slack is the primary messaging platform for Agoda’s software engineering team, we felt that it would be the most relevant and up-to-date data source. SupportHero aimed to tackle repetitive questions that often surface. It featured two main functionalities:

1. Answer the question (aim to answer repetitive questions)
2. Summary the Slack thread then update the Confluence FAQ page

Second day: Workday

On the second day of the hackathon, it was all about putting in the work to get our project ready for the demo. We had delicious food served. One thing that made this day even more enjoyable was having the assistance of ChatGPT and GitHub Co-pilot in writing our code.

Third day: make it ready

On the third day of the hackathon, we dedicated our efforts to enhancing our project’s functionality and appearance. We modified the bot to include reference Slack thread URLs in its responses, which would provide additional support even if the answer were not entirely accurate. Additionally, some team members worked on creating a captivating demo presentation that included recording, image and video editing, and slide creation.

Initially designed to handle repetitive tickets, our bot eventually evolved into an FAQ page. Realizing its potential, we decided to make it available on channels where repetitive tickets were common. As we continued to develop the bot, we realized that all channels could benefit from its functionality, particularly with the summarize feature. Look at how the bot’s recommendation function works!

Evening Presentation

During our presentation, I was responsible for ensuring that our bot remained operational for those who wanted to try it out. The energy in the room was electric, and each team brought their unique ideas. After all the teams had presented, it was time for the awards.

My team won an award for “Best Use of Historical Data.”

Useful Resources

Here are resources that you might want to check out.

• https://github.com/hwchase17/langchain
• https://github.com/jerryjliu/gpt_index
• https://github.com/dair-ai/Prompt-Engineering-Guide
• https://medium.com/@francois.ascani/running-chatgpt-on-your-internal-confluence-documentation-d7761aa8fc68
• https://medium.com/@silvio.pavanetto/confluence-gpt-automating-confluence-page-creation-with-chatgpt-707be9464cb3
• https://github.com/openai/openai-cookbook/blob/main/examples/Question_answering_using_embeddings.ipynb
• https://www.mlq.ai/fine-tuning-gpt-3-question-answer-bot/

Conclusion

As the world rapidly advances with technology, we are convinced that it can enhance productivity and positively impact our lives. GPT is one such technology that we find remarkable and believe will have a significant impact on everyone. As a technology company that embraces the intersection of travel and innovation, Agoda provided us with the perfect environment to unleash our creativity and potential. If this resonates with you, we invite you to join us.

First of all, I backup all files to an external hard disk and then follow the step below.

Hardware

My normal workstation is minimal, just a computer and 1 monitor.

When I connect my MacBook to the monitor, my external monitor seem to display a bit differently e.g. brightness. So I need to re-adjust it.

System Preferences

I usually open or take the screenshot of my setting of the old one beside then just copy/follow one by one.

• Dock & Menu Bar
• Mission Controrl
• Spotlight
• Notifications & Focus
• Internet Accounts
• Trackpad
• Sharing
• Keyboard
• Finder
  - New Finder windows show: Downloads
  - View > Show View Options > Always open in view list (Use as Defaults)

Ordering

Order Dock, Sidebar, and organize Launchpad

SSH

Setup a new SSH key for the Git repository which depends on the registry you use. We can use the old existing SSH key, but I do follow the security practice that suggest to generate new one for each machine.

• Bitbucket, Set up an SSH key
• GitHub, Generating a new SSH key and adding it to the ssh-agent
• GitLab, Use SSH keys to communicate with GitLab

Program

• Git, install, and setup globally

# setup
git config --global user.name "Nathachai Thongniran"
git config --global user.email "inid3a@gmail.com"

git config --list
git config --global user.name
git config --global user.email

• XCode
• VSCode, install, setup global settings.json and keybindings.json
• Drive: Google Drive, One Drive, Dropbox
• Jetbrains toolbox and install DataGrip, PyCharm, and IntelliJ IDEA
• Sourcetree, Git client
• Google Chrome, a web development browser with great debugging tools. install, import bookmark, and setup

chrome://settings/syncSetup/advanced
chrome://settings/content

• VLC, free and open-source, portable, cross-platform media player software and streaming media server
• Docker, a tool for container technology
• Postman, API testing platform
• Lens, UI client for Kubernetes
• Cyberduck, a cross-platform UI client for file storage servers
• Messaging Channel: Slack, Microsoft Teams, Discord, Telegram
• The Unarchiver, compress and uncompress files

VSCode Extensions

My Best IDE ever. General programming language of mine is JavaScript and Python. So these extensions are generally around it.

• ESLint, a lining tool for JavaScript
• Helm Intellisense, Syntax Highlighter for Helm
• Jupyter, it is required to install the Python extension
• One Dark Pro, my only theme
• Prettier, code formatting for many programming languages
• Python, a feature-rich extension for Python
• Remote-SSH, allow using remote machine via SSH
• Live Server, local server with live reload feature
• StandardJS, another listing tool for JavaScript
• Conda Cheatsheet, open the Conda cheatsheet inside the editor

Terminal

Terminal setup is simple iterm2 + ohmyzsh and here is the tutorials

• How to Configure your macOs Terminal with Zsh like a Pro
• iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + [Powerlevel10k] — (macOS)
• iTerm2 + zsh + oh-my-zsh The Most Power Full Terminal on macOS

Command-line interface (CLI) Program

Here is a list of CLI tools

• Homebrew, and also install

brew help
brew update
brew upgrade

# wget, tool for retrieving files over HTTP
# nmap, network scanner
# telnet, provide a bidirectional interactive text communication
# k6, load testing
# wrk, load testing (another one)
# jq, command-line JSON processor
# kubectl, CLI to interact with Kubernetes clusters
brew install wget nmap telnet k6 wrk jq kubectl

• Cloud Provider CLI: Install the gcloud CLI, Installing or updating the latest version of the AWS CLI
• Node Version Manager (NVM), install and set the default NodeJS version

nvm ls
nvm ls-remote
nvm install 16.15.0
nvm alias default 16.15.0
nvm use default 16.15.0

• Conda, Python package management. I do prefer Miniconda

conda -V
conda search python
conda create — name base3.10.4 python=3.10.4
conda activate base3.10.4

• Commitizen, defines a standard way for Git commit message

npm install -g commitizen
npm install -g cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

• chromepass, password generation which runs 100% locally

npm install -g chromepass
chromepass

• httpie, command-line HTTP client

python -m pip install --upgrade httpie

• Datastores
  - Installing Postgres via Brew
  - Install MySQL on macOS Sierra
  - Install Redis on macOS

Thank you so much for your time, see ya!

Code สำหรับ project นี้นะครับ: https://github.com/jojoee/vscode-conda-cheatsheet

1. แรงบัลดาลใจ

ปัจจุบัน editor ที่ผมใช้อยู่เป็นหลักเลยคือ Visual Studio Code (มีใช้ตัวอื่นบ้างก็จะเป็นเครือของ Jetbrains)

ด้วยความที่เป็น Editor ที่เร็ว, มี extension ให้เลือกใช้เยอะและใช้งานได้ดี เลยสนใจและอยากลองทำ extension ขึ้นมาบ้าง

ซึ่งในเนื้อหาถัดๆไปจะขอใช้ตัวอักษร VSCode แทนคำว่า Visual Studio Code นะครับเพื่อความสะดวกในการอ้างถึง

.

2. กำหนดขอบเขตของงาน

ส่วนนี้จะเป็นการกำหนดที่สิ่งคาดหวังและเวลาที่จะใช้ในการพัฒนา

1. อยากจะศึกษา ว่าเราจะสามารถทำ VSCode extension ได้อย่างไร
2. จากข้อ 1) เราก็จะเข้าใจคนออกแบบโปรแกรมมากขึ้น ว่าถ้าเราอยากจะออกแบบโปรแกรมให้มีส่วนต่อขยาย (extension) จะออกแบบอย่างไร หรืออย่างน้อยก็ต้องคำถึงเรื่องอะไรบ้าง
3. ต้องการใช้เวลาประมาณ 1 อาทิตย์ในการพัฒนา (พอเอาเข้าจริงๆใช้เวลาประมาณ 2 อาทิตย์)
4. จากข้อ 3) ต้องหา project ที่น่าจะมีประโยชน์และสามารถใช้งานได้จริงภายใน 1 อาทิตย์

3. รายละเอียด project

จากที่ค้นคว้ามาก็เจอ project “cheatsheet” เนี่ยแหละที่คิดว่าจะสามารถทำให้เสร็จทันได้ภายใน 1 อาทิตย์

cheatsheet เหมือนเป็นพวกสรุปสูตร ตาม domain ต่างๆเช่น VSCode cheatsheet, Docker cheatsheet, Next.js cheatsheet ซึ่งมีได้หลายรูปแบบเช่น website หรือ pdf file ตามตัวอย่างด้านบนครับ

ซึ่งใน VSCode marketplace ก็ยังมี extension จำพวกนี้ค่อนข้างน้อยอยู่ดังรูป มีแค่ประมาณ 8 extensions เอง

โดยสรุปแล้ว project ที่จะทำก็จะเป็น Conda cheatsheet โดยมีทั้งหมด 3 features ดังตัวอย่างด้านล่างได้แก่

.

1. เปิด Conda cheatsheet เวอร์ชั่น pdf ไฟล์ (เหมือนเปิด pdf file ให้)
2. เปิด Conda cheatsheet เวอร์ชั่น website (เปิด website ด้วย url ตรงๆ)
3. เปิด Conda cheatsheet เวอร์ชั่น webview (เราเขียนเนื้อหาด้วย html ขึ้นมาเอง)

(Conda เป็น ตัวจัดการ Python environment management, “คล้ายๆ” nvm ที่เป็น Node Version Manager ของ Javascript)

4. ประสบการณ์ระหว่างการพัฒนา

เนื้อหาในส่วนนี้จะเป็นเนื้อหาในระหว่างการพัฒนาตัว extension

4.1 เวลาในการพัฒนา

ใช้เวลาในการพัฒนาไปทั้งหมด 2 อาทิตย์ (จากที่วางแผนไว้แค่ 1 อาทิตย์)

• 1 อาทิตย์แรกใช้เวลาไปกับการอ่าน tutorial แล้วเอา code ของเขามาลองเล่น
• 1 อาทิตย์ถัดมา ใช้ไปกับการพัฒนาจริงๆ

ตัวอย่าง website สอนการเขียนและตัวอย่าง code

• Your First Extension
• Extension Anatomy
• Webview API
• How To Create Your First Visual Studio Code Extension
• Creating Your First Visual Studio Code Extension
• How to Create a VSCode Extension
• https://github.com/microsoft/vscode-extension-samples

4.2 การพัฒนา

การพัฒนาของ project นี้จะขึ้น project ตั้งต้นด้วยเครื่องมือจากคำแนะนำ VSCode website (จากบทความ Your First Extension) เองเลย ซึ่งเราจะใช้ Yeoman

เราจะต้องลง Yeoman และ generator ซึ่งมันจะ setup ส่วนประกอบต่างๆให้เรา เช่น ทำให้ build tool, unit test, lint tool, etc.

(yo / Yeo / Yeoman เป็นเครื่องมือในการทำ โปรเจคตั้งต้น / boilerplate / starter)

// example command
npm install -g yo generator-code && yo code

โดยเมื่อ VSCode generator ทำงานเสร็จเราก็จะได้ structure ตามนี้ ซึ่งไม่เหมือนกันตามรูปแบบของ extension (ในที่นี้ผมเลือก “New Extension (TypeScript)”)

ซึ่งไฟล์หลักๆในการพัฒนาก็จะเป็นไฟล์ “extension.ts” ครับ

4.3 indentation ไม่เหมือนกัน

ปัญหาแรกที่เจอมาคือ indentation ไม่ตรงกับที่ผมใช้

ผมก็เลยเปลี่ยน indentation ทั้งหมดให้เป็น space 2 อัน ด้วย eslint ที่ติดมากับ generator ด้วย คำสั่ง “lint:fix” ใน package.json

.

.

.

4.4 พัฒนา features

ในที่นี้เรากะว่าจะพัฒนากันอยู่ 3 features

• Conda Cheatsheet: PDF
• Conda Cheatsheet: Website
• Conda Cheatsheet: Webview

ถึงแม้จะฟังดูไม่เหมือนกัน แต่เทคนิคที่ใช้นั้นผมตัดสินใจเลือกใช้เทคนิคเดียวกันทั้งหมดคือ webview ครับ

• Conda Cheatsheet: PDF — ใช้ webview embed <img> เข้าไป โดย html
• Conda Cheatsheet: Website — ใช้ webview embed <iframe>
• Conda Cheatsheet: Webview — ใช้ webview เหมือนกัน + ทำ html ขึ้นมาเอง

สรุปก็คือทั้ง 3 features เราจะใช้เทคนิคเดียวกันหมดคือทำ webview ขึ้นมาครับ

4.5 พัฒนา features “Conda Cheatsheet: Webview”

โดย feature “Conda Cheatsheet: PDF” และ “Conda Cheatsheet: Website” นั้นค่อนข้างตรงไปตรงมา แต่ feature “Conda Cheatsheet: Webview” เราจำเป็นต้อง เขียน html ขึ้นมาเองใหม่ครับ

ซึ่งปกติแล้ว cheatsheet ทั้งหลายจะประกอบด้วย 2 ส่วนหลักๆครับ ซึ่งก็คือ code และ description แสดงผลซ้ำไปซ้ำมา ทำให้เราตัดสินใจใช้ Pug (เป็น template engine) มา render template ให้เราครับ

4.6 ทำ webview ให้ support light และ dark theme ของ VSCode

ใน VSCode นั้นปกติจะมี theme อยู่ 2 แบบ light และ dark ซึ่งเราก็ต้องการที่จะทำให้ support ทั้ง 2 themes โดยการเพิ่มตัวแปรใน css file

โดยเราจะใช้ตัวแปร “vscode-menu-selectionBackground” และ “vscode-menu-selectionForeground” เพื่อให้ css เราปรับไปตาม VSCode theme ที่เราเลือก (อ้างอิง Theme Color)

4.7 click ที่ code เพื่อที่จะ copy code

ใน feature webview นั้นเราต้องการที่จะทำให้สามารถ copy code หลังจาก click ที่ code นั้นๆได้ด้วย เพื่อนำไปวาง (หรือ paste หรือ ctrl + v) เพื่อใช้งานได้ทันที

การทำ feature นี้ต้อง setup ตัวส่ง event (ในไฟล์ html ที่ render) และทำตัวรับ event ดังรูปด้านบนครับ

4.8 compile template on the fly และ pre-compile

ตอนแรกที่ผมพัฒนา “Conda Cheatsheet: Webview” feature ผมตั้งใจให้ เรียก module “pug” ขณะ run-time เพื่อ render “pug” template เป็น html format

ทำให้เวลาผมทำเป็น VSCode extension package (ขึ้น VSCode marketplace) นั้น package ของผมนั้นใหญ่มาก เพราะต้องเอา code ของ “pug” module ขึ้นไปด้วย

ผมเลยต้องเปลี่ยนเป็น จาก “เปลี่ยน .pug เป็น .html ขณะใช้งาน” เป็น “pre-compile เป็น html ก่อนทำเป็น VSCode extension package”

ด้านล่างเป็นการเปรียบเทียบลำดับการทำงานของ “ก่อน” และ “หลัง” ปรับแต่ง

ก่อน (เปลี่ยน .pug เป็น .html ขณะใช้งาน)
- ทำเป็น VSCode extension package เพื่อขึ้น VSCode marketplace
- user เรียกใช้งานคำสั่ง
- VSCode extension เรียกใช้งาน module “pug” เพื่อแปลง .pug เป็น .html
- นำ html ไปใช้งานใน webview

หลัง (pre-compile เป็น html ก่อนทำเป็น VSCode extension package)
- เขียน script ขึ้นมาทำการ แปลง .pug เป็น .html เตรียมไว้เลย
- ทำเป็น VSCode extension package เพื่อขึ้น VSCode marketplace
- user เรียกใช้งานคำสั่ง
- VSCode extension จะเรียกใช้งาน .html (ที่ compile ไว้แล้ว) ไปใช้งานได้เลย

ผลก็คือขนาดของ VSCode extension package ลดลงจาก 3.37MB เป็น 359.68KB (ลดไปประมาณ 98%)

conda-cheatsheet-1.2.2.vsix (3513 files, 3.37MB) - before
conda-cheatsheet-1.2.3.vsix (14 files, 359.68KB) - after

4.9 การทำ gif, screenshot

เพื่อเป็นการสาธิตวิธีการใช้งาน ให้ผู้ใช้เข้าใจได้ง่ายขึ้น ว่า VSCode extension นี้ทำอะไรได้บ้าง, โดยที่ผมใช้หลักๆคือ OSX capture screenshot, GIPHY Capture KeyCastr

4.10 ทำ CI + auto publish ขึ้น VSCode marketplace

ขั้นตอนในการ Publishing Extensions คร่าวๆคือ

• สมัคร Azure DevOps organization
• สร้าง Personal Access Token (PAT) เพื่อใช้ในการ publish VSCode extension
• ใช้ PAT ในการ publish VSCode extension

เนื่องจากผมคุ้นเคยกับ Travis CI อยู่แล้ว ก็เลยใช้ตัวนี้ในการทำ CI + auto publish ขึ้น VSCode marketplace ซะเลย

เพื่อนๆ สามารถดูตัวอย่าง Travis CI config ได้ที่ .travis.yml ครับ

.

.

.

.

.

5. สิ่งที่ควรปรับปรุงแก้ไขและศึกษาทำเพิ่ม

สำหรับ project นี้สิ่งที่ยังขาดและสามารถเพิ่มเติมได้ก็คือ การ auomate ครับ เช่น

• feature “Conda Cheatsheet: PDF” — ด้วยความที่เราต้อง download และเปลี่ยนเป็นรูปภาพ ทำให้เรายังต้องทำแบบ manual, ถ้าให้ดีก็น่าจะเขียน script มาทำงานแทนเรา (download + แปลง pdf เป็น image ไฟล์)
• feature “Conda Cheatsheet: Webview” — script สำหรับการ pre-compile จาก .pug เป็น .html นั้นดีแล้ว — แต่ในระหว่างการพัฒนาถ้ามีการเปลี่ยนแปลง .pug, เราไม่ได้เขียน watch task ให้มัน auto compile เมื่อ .pug เมื่อมีการแก้ไข
• ยังไม่ได้เขียน test ใดๆ

6. ส่งท้าย

ขอบคุณผู้อ่านที่เสียสละเข้ามาเยี่ยมชมนะครับ ผิดพลาดอย่างไร หรือเพิ่มเติมส่วนไหน คอมเม้นด้านล่างได้เลยนะครับ หวังว่าจะเป็นประโยชน์แก่ผู้อ่านไม่มากก็น้อยนะครับ — ลิ้งไปตัว project ครับ https://github.com/jojoee/vscode-conda-cheatsheet

สวัสดีครับ อาทิตย์ที่ผ่านมา ได้เข้าร่วมงาน PWA Online hackathon จึงอยากมาแชร์ประสบการณ์ การแข่งขันให้ฟังกันครับ

โดยมีหัวข้อดังนี้

1. PWA Online hackathon: overview

เป็นการแข่ง hackathon แบบ online (ทำที่ไหนก็ได้) ระหว่าง 23–25 มิถุนายน 2560, โดยจะมีกฏหลักๆดังนี้

• ไม่มี backend
• สามารถรันบน static server ได้
• code อยู่บน GitHub
• host อยู่บน Firebase hosting
• application มี Web app manifest
• ติดตั้ง Service Worker เพื่อทำให้ใช้งาน ขณะที่ไม่สามารถเชื่อมต่อ internet ได้
• ถ้าจะใช้ Firebase ใช้ได้แค่บางอย่างเท่านั้น — Firebase rules

โดยการให้คะแนนก็จะพิจารณาถึง

• ความสมบูรณ์ของ Web Application
• ความคิดสร้างสรรค์
• การเลือกใช้เทคโนโลยี
• (คะแนนพิเศษ) คะแนน Lighthouse เกิน 98 แต้ม
• (คะแนนพิเศษ) มี Web notification
• (คะแนนพิเศษ)ใช้ Geolocation API หรือ getUserMedia API
• (คะแนนพิเศษ) ทำ Web application เป็น Web VR

2. การเตรียมตัว

งานนี้ประกาศตั้งแต่ 25 พฤษภาคม เห็นประกาศก็สนใจทันที, ส่วนตัวเป็น web programmer อยู่แล้ว และได้ศึกษา PWA จาก Udacity: Front-End Web Developer Nanodegree และ Firebase มาแล้ว

เลยคิดว่าคงจะต้องศึกษาเพิ่มไม่มากเท่าไร กะไว้ว่าจะใช้ 1 อาทิตย์ก่อนแข่งเตรียมตัว แต่พอเอาเข้าจริง มีเนื้อหาให้ต้องศึกษา ค่อนข้างเยอะเลยทีเดียว ทำให้เตรียมตัวไม่ได้ดีเท่าที่ควร

3. Tool ที่ใช้

• Editor: Visual Studio Code
• Package manager, dependency management: npm และ yarn
• Development flow, build tool: Gulp และ npm
• Browser: Chrome และ Chrome Canary

4. Package และ Service ที่ใช้

4.1 Unit test

• Library: mocha
• Assertion: chai ช่วยสนับสนุนการ test แบบ BDD ​(syntax จะเหมือนภาษาพูด)
• Coverage: nyc ช่วยบอกว่า test ที่เราเขียนไป ครอบคลุมกี่ %
• Report: codecov ใช้งานได้ฟรีสำหรับ coverage report — ตัวอย่าง coverage report ของโปรเจค pwa-online-hackathon บน codecov

4.2 Lint tool

Lint tool พวกนี้จะช่วยควบคุมคุณภาพของ code ได้เบื้องต้น และช่วยกัน bug ได้บางส่วน

• Javascript: ESLint และ standard
• HTML: HTMLHint
• CSS: stylelint

4.3 Development flow, build flow

• Static server: firebase/firebase-tools — จริงๆแล้วมีหลายตัว เช่น http-server, SimpleHTTPServer แต่ตัดสินใจใช้ firebase-tools เพราะยังไงก็ต้องใช้ในการ deploy ขึ้น Firebase hosting ด้วย
• Development flow:ใช้ npm-run-all package รัน ESLint และ Gulp (ทำ concat และ minify ทั้ง javascript และ css ไฟล์) ให้ทำงานไปพร้อมๆกัน

4.4 Source control และ commit conventions

• Source control: Git และเก็บไว้ที่ Github
• Commit conventions: cz-cli และ cz-conventional-changelog

ปกติแล้วเวลาเรา commit เราจะเขียน commit message อะไรก็ได้ — ปัญหาก็คือบางที commit message นั้นสื่อสารไม่ชัดเจนว่า commit นั้นเปลี่ยนแปลงอะไรบ้าง

โดย tool นี้จะช่วยเลือกหมวดหมู่ของ commit เราให้ ทำให้เราพอจะรู้คร่าวๆ ว่าใน commit นั้นๆทำอะไรบ้าง โดยไม่ต้องดู code ที่เปลี่ยนไปเลย

แล้วเราจะใช้ ghooks ช่วยในการ commit ด้วย — โดยเมื่อเรารัน yarn commit เราจะสั่งให้ไปรัน yarn validate ก่อนเสมอ ทำให้ code ถูก validate ก่อนที่จะ commit ทุกครั้ง

4.5 Build CI service

ใช้ Travis CI ในการทดสอบการ build project บน environment ที่ต่างกัน โดย project นี้จะทดสอบบน Node.js version 6, 7 , 8 และตั้งค่าไว้ว่า เมื่อ build สำเร็จก็ให้ทำการสร้าง coverage report ไปที่ โปรเจค pwa-online-hackathon ที่อยู่บน codecov.io

4.6 Project management tool

จะเขียน todo list (รายการที่จะต้องทำ) ลงใน README.md ง่ายๆแบบนี้เลย

5. ประสบการณ์ระหว่างการแข่งขัน

โดยจะไล่ตาม commit timeline

23/06@20.00

• ติดตั้ง tool เช่น Gulp, firebase/firebase-tools, ESLint, etc.
• หา idea — สรุปว่า จะทำเกมแนว clicker / idle games

โดยจะเป็นเกมอ้างอิงถึงระบบขนส่ง (Public transportation) กะว่าจะใส่อะไรสนุกๆ อย่าง รถม้าลําปาง, Uber, จรวด SpaceX, หรืออะไรแปลกๆลงไป แล้วจะได้ใช้ Geo location API เพื่อที่จะได้คะแนนพิเศษด้วย

ตัวอย่างเกมแนว clicker / idle games

24/06@01.00

• นอน

24/06@9.30

• ตั้งค่า tool, lib เช่น ESLint, Firebase, Lodash

เนื่องจากยังคิด game layout ใน screen size ขนาดต่างๆ ไม่ได้ (เช่น PC, tablet, mobile) เลยทำได้แค่ ตั้งค่า tool, lib ไปเรื่อยๆ

24/06@11.00

• ใส่หิมะ, ดาว, ดาวตก ไปใน background ของ game
• ตั้งค่า Gulp task เช่น concat javascript ทุกไฟล์
• ติดตั้ง Web App Manifest
• ติดตั้ง GoogleChrome/lighthouse — ไว้ตรวจสอบคุณภาพของ game ตามแนวทางของ PWA (Progressive Web Apps) และ optimze เพื่อเพิ่มคะแนน
• ใส่ Service woker (ทำให้ใช้งานขณะที่ไม่สามารถเชื่อมต่อ internet ได้)
• Deploy ไปที่ Firebase hosting

24/06@18.00

• ตัดสินใจเปลี่ยนเกม เนื่องจากคิด game layout บนขนาดต่างๆไม่ออก — เป็นเกมปัจจุบัน MeteorKiller: Kill all Star lord’s meteor , โดยใช้ดาวตกที่ได้ทำไว้ก่อนหน้าเป็นตัวหลักของเกม
• ออกแบบและคิด feature ของเกมเพิ่มเติม
• Game over screen

24/06@22.00

• ทำ icon homescreen ของ game กะไว้ว่าจะให้เหมือนดาวตก แบบ modern หน่อยๆ แต่ว่าผลงานที่ได้ ออกมาแล้วดูจะไม่เหมือนไม่สักเท่าไร แต่ก็โอเค
• ใส่ effect ตอน click (กลมๆ เหลืองๆ)
• เพิ่มระบบ score และ high score

25/06@01.00

• นอน

25/06@07.00

• sign-in และ sign-out ด้วย Firebase ผ่าน Gmail

25/06@11.00

• ติดตั้ง Firebase notification
• ติดตั้ง Firebase Realtime Database ไว้เก็บ score และ high score
• ทำ screenshake เมื่อเลือด (life) ในเกมลด — feature นี้จะเป็นการ สั่นจอแบบหลอกๆ (สังเกต ตอนสั่น, จะสั่นแค่ตรง คะแนน ไม่ได้สั่นทั้งจอ เพราะคิดว่า ถ้าสั่นทั้งจอ คนเล่นจะเล่นยาก)
• ใส่เสียง effect เวลาเลือดลด — เอามาจาก Bfxr

25/06@16.00 ถึงจบงาน 20.00

ทำการเพิ่ม performance และคะแนน GoogleChrome/lighthouse

• เพิ่ม start screen เวลาเริ่มเกม, เพื่อให้ไม่ให้เกม render เยอะขณะทำการเปิดเกมขึ้นมา ซึ่งทำให้ใช้ทรัพยากรเครื่องลดลง (ปล. code ส่วนนี้ไม่ค่อยดี เนื่องจากตอนแรกที่ทำ game engine ไม่ได้ออกแบบให้รองรับอะไรแบบนี้ไว้)
• สร้าง debounce function ขึ้นมาใช้เอง แล้วเอา Lodash ออก
• สร้าง random number และ boolean ขึ้นมาใช้เองแล้วเอา Chance.js ออก
• หลังจาก concat + minify ไฟล์ css และ javascript ทั้งหมด — ก็จะใช้ gulp-inline-source ในการยัด css และ javascript เข้า index.html ไฟล์เดียวเลย เพื่อจะได้โหลดแค่ไฟล์เดียว และรวมถึงลดปัญหาจาก network latency ด้วย (ปัจจุบันสามารถเอา css เข้าไปได้แล้ว แต่ javascript ยังต้องทำเองอยู่ ด้วยการ copy and paste)

6. ปัญหาที่เจอ

6.1 Commit ด้วยคำสั่ง yarn commit

ผ่าน commitizen (cz-conventional-changelog) และ ghooks ใช้เวลานานมากประมาณ 60 วินาที ต่อการ commit 1 ครั้ง บน Windows OS

6.2 Performance score of Lighthouse

คะแนน Performance ของ Lighthouse แกว่งบน Windows OS

• บน Windows คะแนนแกว่งระหว่าง 85–99
• บน OSX จะได้ 99 ตลอด

6.3 Lighthouse tool

ขณะที่เขียนบทความอยู่ เราสามารถรัน GoogleChrome/lighthouse ได้ 3 แบบ

1. CLI
2. Lighthouse Chrome extension ของ Chrome Web Browser
3. Audits tab ใน Chrome DevTools ของ Chrome Canary

ตอนที่พัฒนาบน Windows OS จะใช้วิธีที่ 1 และ 2 พอทดสอบไปสักพัก ก็ใช้งานไม่ได้อีกเลย, จึงใช้วิธีที่ 3 มาโดยตลอด

7. สิ่งที่ควรปรับปรุงแก้ไขและศึกษาทำเพิ่ม

7.1 Test และ QA tool เยอะเกินไป

บางตัวแทบจะไม่ได้ใช้ เช่น unit test หรือบางตัวก็ไม่แน่ใจว่าคุ้มไหม กับเวลาที่ใช้ไป ในการติดตั้ง, ตั้งค่าและปรับปรุง

7.2. Development flow + build flow ในหัวข้อที่ 4.3

• คิดว่าในส่วนนี้ควรใช้ tool เดียวไปเลย เช่น Gulp, webpack module bundler
• คำสั่ง yarn dev ที่ใช้ในการพัฒนาหลัก ยังขาดการเรียกใช้งานบาง tool อยู่เช่น htmlhint และ stylelint

7.3 Test

• Unit test แทบจะไม่ได้ใช้ในโปรเจคนี้เลย
• การทดสอบการแสดงผล — code ส่วนใหญ่เป็นการ render บน canvas จนตอนนี้ก็ยังไม่แน่ใจว่าจะทดสอบ code ส่วนนี้ให้มีให้มีประสิทธิภาพได้อย่างไร (ตอนนี้คิดได้แค่ว่า ถ้าจะทดสอบคงใช้ใช้เทคนิคแบบเดียวกับ storybooks/storybook ที่ใช้ทดสอบ React)
• คำสั่งทดสอบที่เขียนไว้ใน .travis.yml ที่ใช้ยังไม่ตอบโจทย์เท่าไร คำสั่ง coverage และ coverage.check ไม่ค่อยได้ใช้เพราะไม่ได้เขียน test สักเท่าไร, ส่วน build นั้นยังไงก็ผ่านเพราะแค่ concat และ minify ไฟล์เฉยๆ

# .travis.yml
script:
- npm run build
- npm run coverage
- npm run coverage.check

7.4 Automated script

resize homescreen icon อัตโนมัติ เช่น เวลาทำรูปใหม่ก็จะได้ไม่ต้องมา resize ขนาดเป็นขนาดต่างๆเอง

7.5 Code pattern

ควรต้องนั่งดูทั้งโปรเจคใหม่อีกที ในโปรเจคผสมหลาย pattern มากเพื่อให้มันทำงานได้ (กลัวเสร็จไม่ทัน) ซึ่งส่วนตัวแล้วคิดว่าเขียนเป็น pattern เดียวกันหมดเลยน่าจะดีกว่า เช่นใช้ ES6 ทั้งโปรเจค

8. FAQ

8.1 ทำไมต้องเขียน game engine ขึ้นมาเอง

1. อยากศึกษาการเขียน game engine
2. ไม่เข้าใจ core ของ game framework เพียงพอ — ส่วนตัวเคยได้ลองเขียนเกมบนเวบ โดยใช้ Phaser — game framework มาบ้าง แต่มีปัญหาตรงที่เวลาอยากทำอะไรแปลกๆ ต้องค้น Google ตลอดแทบจะ 100% เพราะเนื่องจากไม่เข้าใจ core ของมัน

8.2 ทำไมเอา Lodash และ Chance.js ออก

1. เพื่อศึกษา
2. เพื่อรีดประสิทธิภาพให้ได้มากที่สุด

ผมใช้ debounce ของ Lodash กับ random number และ boolean ของ Chance.js สรุปแค่ 3 functions แต่ขนาดของทั้ง 2 libraries นั้นเยอะมาก ก็เลยตัดสินใจเอาออก แต่อย่างการเล่นไฟล์เสียง นั้นผมไม่ค่อยแน่ใจ ผมก็เลยยังคงใช้ howler.js

9. ส่งท้าย

ขอบคุณผู้อ่านที่เสียสละเข้ามาเยี่ยมชมนะครับ — ผิดพลาดอย่างไร, อยากให้ขยายความจุดไหนเพิ่มหรือคิดเห็นอย่างไร คอมเม้นด้านล่างได้เลยครับ

ท้ายนี้อยากจะขอบคุณคณะผู้จัดงาน และ ผู้สนันสนุนงานด้วยครับที่ได้จัดงานดีๆ แบบนี้ขึ้นมา

ปล. code อาจไม่ตรงไปบ้าง เพราะตอนนี้ยัง push code ใหม่ขึ้นไปที่ GitHub ไม่ได้ครับ

• PWA Online Hackathon | We challenge you to make awesome PWA
• jojoee/pwa-online-hackathon

Updated 1@27/06/2017 เปลี่ยนคำพูดที่ใช้เล็กน้อย
Updated 2@28/06/2017 อัพเดทหัวข้อ 7.3 และ เปลี่ยนคำพูดที่ใช้เล็กน้อย