TOAST UI Editor 3.0 Dark Theme

🎊 TOAST UI Editor 3.0 is here! 🎊

With the release of TOAST UI Editor 2.0, we were able to improve a lot of features including the Editor’s markdown parsing accuracy, syntax highlighting feature, scroll sync accuracy, and more. All of these improvements were made possible due to the implementation of our own ToastMark markdown parser. However, because we focused mainly on the markdown editor for the 2.0, there were no further improvements on the UI like toolbars and switch tabs.

We worked on TOAST UI 3.0 with not only markdown on our mind but also improving the overall structure of the editor and the usage. We added…


Mock data refers to artificial data created by developers for testing purposes. When are mock data most commonly used?

  • When it is hard to pin down expected values in E2E testing environment due to the dynamic nature of the actual data
  • When it is hard to assess different data representations in the UI testing environment

Test codes require mock data, and at some point, you can easily find similar mock data scattered around the project.

This article serves to record my experience managing mock data in a single integrated environment as well as cypress’s mocking toggle feature.

General Mocking With Storybook and cypress

For the project…


I began to wonder why Reflect was used to implement the Vue 3 Reactivity's Proxy trap. Upon Googling, only thing I could find was how to use the Proxy's handlers or other tutorials, so I decided to take a deeper look into it. This article reviews the basic concepts of Proxy and Reflect as well as explore why Reflect was used with the Proxy.

1. Metaprogramming

Before we dive headfirst into Proxy, allow me to introduce another topic. Proxy is a syntax that is built to support some feature within programming languages-the Metaprogramming.

Metaprogramming is when one computer program treats another program…


For any web applications that target the global stage, internationalization(i18n) is a must. Internationalization is often implemented through i18n libraries or through self-implemented code. This article is written with the front-end developers who are suffering from the manual “copy-and-paste” process in mind. Follow this guide and executing a single line of script shall set you free.

General Internationalization Support

Libraries that use gettext or libraries like i18next provide functions that take the key and return the translated string like the example below.

// Translated Data
const ko_KR = {
'name': '이름'
};
// Using gettext
const translation = gettext('name');
// 이름
// Using…


Vue.js 3.0.0 alpha was released on January 2020, and nine months later, on September 2020, vue-next 3.0 was released officially with the code name "One Piece" (yes, the anime). There was a lot of changes with the Vue 3, but I will discuss mainly on the new reactivity system for which I've been waiting.

In order to facilitate your understanding, this article contains simple codes that highlight the flow of the reactivity systems of vue@2.6.12 and vue-next@3.0.4.

Preface

Before we dive into how reactivity system in Vue 3 works, let’s take a look at how it is implemented in Vue 2…


🎊 TOAST UI Chart 4.0 is here! 🎊

TOAST UI Chart v3 was developed based on svg and raphael.js. We supported and were loved by a wide range of browsers from IE8 to more modern browsers. However, as time passed, raphael.js stopped updating, and we needed to find a new solution to continue building the Chart. TOAST UI Chart team removed all of the dependencies and rebuilt the entire product based on canvas from scratch in order to make the Chart lighter.

As we kick off the new year 2021, we would like to introduce the brand-new TOAST UI Chart. …


  1. Origin of Time Zones
  2. The Law and Time Zones
  3. Browser’s Time Zone Support and Its Limitations
  4. Time Zone Data and Its Problems
  5. Front End’s Solution
  6. Goodbye moment.js

For Koreans, Summer Time is not a very familiar concept. For those who live in the effective ranges of Summer Time, there are days when a day is 25 hours or 23 hours long. We usually take 24-hour days as the norm, but why do some countries fixate on such fluctuation?

Time zone is an idea to represent different times all around the world. Browsers, in order to account for these time zones…


It is always a crowd’s favorite to ask questions like “how should one test private methods?” and “Should one test private methods?” on different communities, and I have long thought to organize my thoughts and to write a summary for such questions. The topic itself is relatively straightforward, but the answer may differ from one developer to another. Especially, the topic seems extra divided in the international forums. However, in essence, this question can be boiled down to what effective test cases are.

Private methods were drafted within the object oriented perspective, and functions hidden in the closures, in the…


In the last weekly pick, I mentioned that the new improved features of Lighthouse will be updated.

This May, the Lighthouse 6.0 was officially released and is planned to be implemented to Chrome 84. If you are excited to try it out immediately, you can download the Chrome Nightly Build (Canary).

Brief Introduction of the Lighthouse

Lighthouse is a tool that is designed to audit and improve the web’s performance and can be found under the Chrome DevTools. It offers guidance and performance indices so that the pages that we build can be loaded faster and be interacted better by the users.

Such performance auditing…


What is Github Actions?

Github Actions was released at the end of last year and it is a tool that can help automate the entire development workflow within Github. This means that you can do code version control, review, test, build, distribute, and much more and manage everything on Github. Github Actions basically does what previous CI tools like Jenkins, Travis CI, or CircleCI have been doing to some degree, except on Github. Even in terms of supported languages, it currently supports Node.js, Python, Java, PHP, Ruby, C/C++, .Net, Android, and iOS, and the list is projected to continue to grow.

With Actions, you…

TOAST UI

JavaScript UI Library Open Source by http://ui.toast.com

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