Welcome to my blog and my playground.
I am Thai Pangsakulyanont. I put on this website various small projects, articles, and toys I made. Feel free to look around. For bigger projects, please see my website or my GitHub profile.
(This is a sequel to What is a functor?)
In this article, I’ll show some cases where something looks like a functor (it has a .map(f) method), but did not obey every functor law.
» read more on Medium
This is my attempt at explaining about a functional programming concept called ‘functor’ in an easy-to-understand way. I’ll be explaining it in JavaScript.
» read more on Medium
(This is a response to The Single Biggest Mistake Programmers Make Every Day)
It reminds me of this from the Zen of Python:
Simple is better than complex.
Complex is better than complicated.It is not until recently — when I got to work with some very complicated code — that I finally experience the differences between complex and complicated.
» read more on Medium
I’m playing with Otto to set up a development environment for my Node.js project.
The problem comes when I try to
npm install
inside the VM. Lots of weird errors going on. The/vagrant
folder is shared between my Mac and my virtual machine. By extension, this means thenode_modules
are shared as well.
npm install
seems to cause a lot of crazy disk I/O on the shared folder, causing gibberish bytes to be written in some files, causing installation failure.The solution is to isolate that folder, so that the
» read more on Mediumnode_modules
folder lives in the VM instead of shared between guest and host.
(This is a response to Things To Avoid When Writing CSS)
You shouldn’t organise CSS by splitting it into separate files any more than you should organise a pane of glass by dropping it on a concrete floor.
An alternative to not splitting your CSS into multiple files, is to learn how to properly organize your CSS in multiple files. When done properly, this brings many advantages:
» read more on Medium
- Your CSS files will be small and easy to navigate. No need to scroll up and down, and your text editor will love you.
- Your CSS files will be more modular.
- Your CSS selectors won’t cascade or conflict with other selectors.
- Your style will be more predictable, even though you can’t predict which file gets included first.
(This is a response to Straight-line code over functions — FunFunFunction #3)
I sometimes prefer to write a single, straight-line functions rather than writing a function that calls many small closely-related functions, especially in imperative code.
But when a function starts to get longer than 15 lines, I start feeling that the code becomes less readable.
One of the pattern I found very useful when writing JavaScript code is to write functions in functions.
» read more on Medium
(This is a sequel to Different definitions of inheritance)
Learn how you can do composition using classical inheritance and fluent ES6 classes. This article shows you that after all, it’s not about which technique is used to structure your application (classes, stamps, prototypes, factories); it’s actually about how one approaches Object-Oriented Analysis and Design.
» read more on Medium
(This is a sequel to ES6 class ≠ classical inheritance)
Get to understand ‘inheritance’ and ‘composition’ from both a technical aspect, and from an OOAD aspect, and learn how these words with ambiguous meaning causes a lot of confusion in the development community.
» read more on Medium
I’ve read several articles by Eric Elliott on JavaScript, such as 10 Interview Questions Every JavaScript Developer Should Know and The Two Pillars of JavaScript.
He emphasizes that classical inheritance is dangerous and should not be used (which I agree), but somehow, the
class
syntax also gets the blame. In fact, it seems to me that the terms classical inheritance,class
, and ES6 class were used interchangeably.And that is totally wrong.
» read more on Medium
Atom 1.0 has recently been released. It is a very nice text editor that is “hackable to the core.” You can change its look and behavior with CSS (Less) and CoffeeScript.
So I added some subtle 3D effects to the text editor’s tree view and the minimap to make it look more “cool.”
» read more on Medium
I recently gave a talk at Code Mania 10, organized by Thai Programmer Network.
This talk was about frontend web development in 2015. I briefly gave an overview of new web technologies from the past four years, and gave an example of a web development workflow using ES6, React and Webpack.
» read more
I created a publication on Medium called “Code, Applied to Life” because I want to inspire people to get more excited about code. I want to show how a small piece of code (or shell script) can make your life easier.
This publication is looking for writers. Let’s tell the world how you use code to solve everyday problems. Please contact me if you want to help contribute to this collection!
» read more on Medium
So I’m sleepy, but want to make sure that I wake up on time.
For numerous times, my phone’s alarm clocks failed me. Some morning I wake up late with a notification, saying ‘missed alarm.’ My iPad, too. It would play the alarm song once before going completely silent.
In this episode, I created a simple alarm clock in shell script that tells iTunes to start playing songs after a certain period of time passes.
» read more on Medium
We recently launched the new Oozou website. Having worked on some projects (both mine and others; both inside and outside Oozou) with CSS code that’s not quite easy to maintain, this time I want to find ways to write CSS in a more maintainable and predictable way.
» read more on Oozou Blog
On SlimWiki code, one failing test took me a whole day to track down. The worst thing is that the spec passes when the example is run in isolation, but fails when run in a test suite.
» read more on Oozou Blog
I competed in this year’s Static Showdown. This year I created a web-based synthesizer.
This year’s grand sponsor is the Polymer project, with a special prize for Best Use of Web Components, so this event is the best time to experiment with Polymer.
(Update: I won that prize.)
This article describes the process of building this application using Polymer, Gulp, Jade, Sass and ES6.
» read more on Medium
I’m working as a TA for a university course (Software Specification and Design), and I’m creating a GitHub organization for students to submit assignments.
The problem is getting all students into this organization.
In this episode, I created a simple web site where students can enter their GitHub username and have an invite automatically send to them.
» read more on Medium
Happy new year! In this short episode, we’ll look into how we can use the Sass REPL to generate colors for GitHub labels.
» read more on Medium
My GitHub project consists of several sub-projects. To make the labels consistent, we can use some tool to copy the label from one project to another. In this instance, I want to copy the labels from
» read more on Mediumbemusic/bemuse
tobemusic/bms-js
.
Just in time for Christmas, the spacet.me Labs is proud to present a tool to help you learn to sing in four-part harmony. A HTML5, ES6, and Web Audio experiment.
» read more on Medium
When we do asynchronous operations involving multiple values or objects using promises, sometimes our code could become messy. This article proposes an approach that could make the code more clean.
» read more on Oozou Blog
Mac OS X comes with a new system font, Helvetica Neue. Maybe it’s just me, but for such a new and modern interface, Helvetica Neue feels… ancient, and Helvetica is already everywhere…
A more futuristic font such as Avenir Next may be a better choice.
» read more on Medium
Usually, when I write CSS (or Sass), making an element animate involves creating an
@keyframe
declaration and giving it a name, and referencing it in the CSS ruleset by name.More often than not, that particular animation would have been used only once in your whole CSS file. This article introduces a mixin to help.
» read more on Medium
At where I stay at NAIST, I use the room’s television in place of a speaker. But because there is no video signal, the TV keeps turning off by itself after 15 minutes.
So I have to set a reminder every 15 minutes, and I quickly did this in the irb.
» read more on Medium
In this episode, I’ll get Ruby 2.1 to run on my Kindle Paperwhite. This involves jailbreaking my Kindle.
» read more on Medium
I don’t have any countdown timer app installed, but I have Ruby…
» read more on Medium
I want to convert a table from Numbers into a wiki language, so I wrote some quick-and-dirty Ruby code in the IRB to help me with this.
» read more on Medium
Every week, I listen to Uplifting Only on SoundCloud. It is a two-hour mix of Orchestral Uplifting and Uplifting Trance music.
Recently, I have been able to get this SoundCloud feed into iTunes. I want to create a script that notifies me when the song changes, so I don’t have to manually check for the playing song in iTunes.
» read more on Medium
In my last article, I grouped my Facebook photos during my internship by week: each week has its own photo album.
Since I might visit several places in a single week, I want to put a “title image” to separate between the photos of different places or different date on the same week.
» read more on Medium
I am doing an internship at Nara Institute of Science and Technology for 2 months. During my time here, I traveled a lot and took many photos, and uploaded them to Facebook.
The problem is that when there are so many photos in a single album, performance degrades, so I want to split them into many albums, while interlinking them together.
One approach to do this is by putting links in the description of each album, linking to the other albums.
» read more on Medium
I was at a software development training camp when, at the day of presentation, I was asked to randomly choose which group to present first…
» read more on Medium
Tired of having to create your
.gitignore
manually? Like, having to add.DS_Store
,Thumbs.db
,*.swp
,*.swo
,*.swn
,node_modules
?I stumbled upon this project called git-ignore.
» read more on Medium
I wanted to share my Mac’s Internet connection from en2 (Bluetooth PAN) to en1 (Wi-Fi), but didn’t want to run a full-fledged Internet Sharing (DHCP, Wireless Access Point, …).
» read more
I have to work on a very small C++ project with my friends, so I want to edit my code like Google Docs.
code.stypi.com provides a real-time collaborative code editor, like Etherpad or Google Docs, but it only supports editing a single file. So some quick and dirty script must be used to enable quick development and testing cycle.
» read more
Just playing with http://studio.substack.net/, a Browser Synths with Code Studio. It is a website where you enter JavaScript code and it generates sound from it.
Here’s what I came up with.
» read more
A sophomore student asked me if I can write a solution to a programming problem “Brick” in one line. So I tried it and decided to write a walkthrough.
» read more
Today I’d like to introduce you to this recipe you can put in your
.bashrc
:» read morealias please='sudo bash -c "$(history -p !!)"'
pushnot is an open source push notification server written in Node.js. You can use it to push notifications to your Mac.
» read more
I’m tired of having to write
function(x) { return x.something }
again and again and again and again and again, and I’m working on a very small standalone script, so using it.js seems to be an overkill for me.So I came up with a simple recipe:
» read morefunction itself(code) { return new Function('its', 'return its' + code) } var its = itself
While working on a CasperJS test suite, I wanted to make it generate another file after the test result file was generated, so I had to monkey-patch their test framework (see the section after this article for why I had to do it).
Monkey-patching is a way to override or extend the behaviour of a method without changing its original source code. This article shows you how you can do it in a beautiful way in JavaScript.
» read more
Or, how I explained the expected value of a Geometric Random Variable to a friend.
» read more on Medium
Just as iron sharpens iron, friends sharpen the minds of each other. —Proverbs 27:17 (CEV)
I like to teach my friends about coding stuff, usually about the web, JavaScript, Ruby, and sometimes other things. When I do, I like to find new ways to help people see what actually happened. Anyway, this post isn’t about me; it’s about Angular.js. I used it to create an array visualizer to help visualize how sorting algorithms work, within 15 minutes.
» read more on Medium
I just released a new small JavaScript library called it.js.
If you’ve ever used any of these:
array.map
,array.filter
,_.sortBy
,_.all
, or_.any
, you’ll know that these “higher-order” functions wants you to to pass in some kind of function. Usually this function just takes an object, looks up a property or call a method, and return the result.This library, it.js, helps you create that function, so you can write:
var ok = _.every(fields, It.send('validate'))
Instead of
var ok = _.every(fields, function(field) { return field.validate() })
This library is a byproduct of me building another AngularJS app, the new version of Friendlist, friend list manager for Facebook.
This article will show you what you can do with it.js. For more detailed documentation, please see the project page on GitHub!.
» read more
When I use Vim, sometimes when I make an edit, I want to test if it works by running some command. (Something like
gcc % && ./a.out
).So I made a simple Vim script to help:
» read more
This article tells story about my first AngularJS web app, and development of my first AngularJS library called synchroscope that lets multiple web clients to synchronize AngularJS scope variables in realtime. If you just want to see the library, please see the GitHub project.
My Computer Engineering department has an activity to welcome first-year students every year, the Freshy Camp. I work on the registration part, so I made a web app to make the registration process quicker and more accurate.
I think I’d go with AngularJS because I’ve never used it, and I’m wondering why everyone loves it.
» read more
ttycast v0.2.0 is just released. This new version is easier to use, includes server-side terminal emulation (instead of client-side), configurable terminal size, and recording support to
» read more.tty
file.
In Node.js, Buffers has toString() that can convert a buffer into a String with a specified encoding, and StringDecoder does the same. So, when to use StringDecoder?
» read more
At the college, we’re learning about abstract data types and few sorting algorithms, and so in this article I try to explain about the quicksort algorithm using some kind of an interactive demo.
» read more
Tomorrow I’m going to have a discrete maths test, and so there are few friends asking me several questions.
So I think, wouldn’t it be nice if there is a way to send them these mathematical equations (or few paragraph of text) in a way that is as easy as posting a Gist?
That’s why I created Pagist.
» read more
Just a diary for myself. Yesterday, while I was using my MacBook Pro normally, a soft touch on the return key broke it apart into two pieces.
» read more
While creating a Live Scoreboard for this year’s DJMAX Technika Thailand Championship, some of the data (list of participants, offline judge results) are stored on Google Spreadsheets.
I need to find a way to incorporate these data into the web app, and I find a purely client-side way to do it.
» read more
I just refactored dtinthstagram a bit, to make the code more concise, also making use of Backbone.js. Here’s the experience of it.
» read more
I’m giving my friend a JavaScript and Node.js crash course through Skype, using ttycast to stream my live terminal session through to friend. Then I talked to him about what command-line apps can do: browsing the web, installing software, chatting, and watching movies right inside a Terminal!
» read more
An Ajax app I made some time ago. It is an open-source super-smooth web-based Instagram viewer. If you are an Instagram user, try it out! :D
» read more
Yesterday, I went to Chocolate Ville, a very beautiful restaurant, planning to take bunch of photos. I went with many friends, my MacBook Pro and my New iPad.
After the food is ordered, my friends went to look around and take more photos, while I and another friend were waiting for the food (someone has to look for our belongings), I then felt like oh it’s a nice idea to take photos of everyone.
…but instead of asking the waitress to take a photo for us, I think I’d make my MacBook press the shutter button on my iPad for me. So while waiting for the food, I quickly created a remote shutter in Node.js.
» read more
#thaiWitter has been using the engine in Firefox 3.6 since 2011, and I attempt to roll my own #thaiWitter app in XULRunner.
This blog post describes its experience.
» read more
ttycast is a Node.js app that allows you to broadcast your tty online, in really real time!
» read more
I just came from an HTML5 training. The instructors taught us some basic jQuery and told us to make an app about lifestyle.
So I think I’d try something new, so instead I play with Knockout.js
» read more
Today, I started applying The Pomodoro Technique, so I made for myself a simple countdown timer.
This blog post also covers how to make a NSStatusItem that lives at the far right of the items.
» read more
For some time blog has been running on a Ruby on Rails webapp hosted on Heroku, which makes it feels somewhat “slow”. So I decided to make my website totally static and host them somewhere.
I got the blog engine done and then wondered where and how to put these static files. I chose Amazon S3 and tried to find a nice way to put the files up. I ended up writing my own syncer in Java.
» read more
This is my new static site generator system, inspired by Jekyll, but is written in Node.js. The name stands for Static Site Generator using Views and Contents. It aims to be extremely flexible.
» read more
Just tried using Jailcoder to build and run iOS apps on my iPad. So here is a quick how to.
» read more
While I was making dtinthstagram, I thought that it would be a good idea to make it work in Fluid, as well as a support for dock badges.
So I implemented it in a straightforward way. Then I found that going to other page and back to the old page breaks the Fluid JavaScript API.
» read more
I’ve been chatting some OOP with a friend, who went to an army camp during the Object-Oriented Programming class. So I explained to him a bit on how
» read moreActionListener
s work. And here’s how the conversation went:
What it does, given a background color, an opacity, and a target color: It finds a color which when drawn on the background color with the given opacity, results in the target color.
» read more
When I was making an auto form submission script, I tried to find out how to pass data from outside script to
page.evaluate
script. In all form submission examples that I’ve seen, they all use fixed data. As of 1.3.0, it’s still unsupported.So I thought I would pass it as a global variable instead.
» read more
So I played a bit with the PC Speaker like I like to do before in an AX-11. I tried using Beep() on Windows 7, but it didn’t work, so I had to use Linux. I searched a lot on the Internet for how to make it generate a tone so I’ll post it here for future reference.
» read more
I just finished tweaking my Eclipse color theme.
On code with good balance of code and documentation, it will have a mix of cool colors and warm colors. Without the comments and stuff, it will look reddish.
» read more
Not long ago while developing the #thaiWitter 3 server (Node.js + Express App), I realized that Heroku/Cedar doesn’t gzip the output, so I need to gzip them myself. I go with node-compress.
» read more
So in the preview of #thaiWitter 3 I’ve added Piggyback SSL to my Heroku app, and I couldn’t find a way for the app to check if it’s requested via SSL or not…
» read more
The newer version of thaiWitter (known as thaiWitter 3) is almost out
» read more
I’m been working on a little experiment that I need to process a set of images (loading it, and putting it in canvas, and then process it) sequentially.
In JavaScript, image loading is asynchronous, so I made these utility functions that makes processing things sequentially a lot easier.
» read more
I’m a bit tired of all those applications that tries to determine your top friends based on some factor, knowing that Facebook knows the ranking of your friend more than any other applications could know. So I created this little experiment.
» read more
Hello! I am new to Ruby on Rails!
And I’m liking it! <3
» read more
Since the beginning, thaiWitter has a characteristic about the way it scrolls from one place to another place. This article discusses, in mathematics style, about how it scrolls from one position to another.
» read more