DEV Community: Youn

Most Commonly Used Kaomoji List

Youn — Wed, 19 Aug 2026 06:58:07 +0000

Kaomoji List by Emotion and Situation

Here is a list of the most commonly used kaomojis (Japanese text emoticons), organized by emotion and situation.

# Retro and Minimalist

;)
^_~
;-)
:)
^_^
^_____^
:-)
:D
^0^
:-D
:(
:-(
U_U
OwO
O.O
^o^
^3^
X_X
T_T
+_+
O_O
¬_¬
=.=
^_+
^.^
*_*
^^;
^_-
-_-

# Happiness

ヾ(≧▽≦*)o
φ(*￣0￣)
q(≧▽≦q)
ψ(｀∇´)ψ
（￣︶￣）↗
*^____^*
(～￣▽￣)～
( •̀ ω •́ )✧
[]~(￣▽￣)~*
φ(゜▽゜*)♪
o(*^＠^*)o
O(∩_∩)O
(✿◡‿◡)
(*^▽^*)
（*＾-＾*）
(*^_^*)
(❁´◡`❁)
(≧∇≦)ﾉ
(●ˇ∀ˇ●)
\^o^/
(‾◡◝)
╰(*°▽°*)╯
o(*￣▽￣*)ブ
(^_-)db(-_^)
♪(^∇^*)
(≧∀≦)ゞ
o(*￣︶￣*)o
( $ _ $ )
(☆▽☆)
ㄟ(≧◇≦)ㄏ
( *︾▽︾)
ƪ(˘⌣˘)ʃ
o(*￣▽￣*)o
♪(´▽｀)
(^0^* )
(≧∇≦)/
ヽ(○･▽･○)ﾉ♪
♪(´▽｀)ノ
\(^o^)/
(ﾉ^o^)ﾉ
ヽ(°〇°)ﾉ

# Greetings

ヾ(•ω•`)o
\(￣︶￣*\))
(* ￣3)(ε￣ *)
－O－
(*￣3￣)╭
( ´･･)ﾉ(._.`)
(｡･∀･)ﾉﾞ
o(*￣▽￣*)ブ
(_　_)。゜zｚＺ
(ToT)/~~~
(∪.∪ )...zzz
!(*￣(￣　*)
(￣o￣) . z Z
(づ￣ 3￣)づ
（＾∀＾●）ﾉｼ
（づ￣3￣）づ╭❤～
\(@^0^@)/
ヾ(^▽^*)))
(～﹃～)~zZ
☆⌒(*＾-゜)v
(￣o￣) . z Z
(*￣;(￣ *)
||ヽ(*￣▽￣*)ノミ|Ю
☆⌒(*＾-゜)v
(＾Ｕ＾)ノ~ＹＯ
o(*°▽°*)o
ヾ(￣▽￣) Bye~Bye~
( ﾟдﾟ)つ Bye
(๑•̀ㅂ•́)و✧
(o゜▽゜)o☆
(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
(∩^o^)⊃━☆
✪ ω ✪
d=====(￣▽￣*)b
o(*￣▽￣*)o
(╹ڡ╹ )
(u‿ฺu✿ฺ)
♪(´▽｀)
(╯▽╰ )
ヽ(✿ﾟ▽ﾟ)ノ
( •̀ .̫ •́ )✧
Ψ(￣∀￣)Ψ
o(≧∀≦)o
b(￣▽￣)d
o(^▽^)o
(¬‿¬)
(•_•)
(⌐■_■)
( ﾉ ﾟｰﾟ)ﾉ
(^◡^)
( ´ ▽ ` )ﾉ

# Acting Cute

(￣y▽,￣)╭
(o|o)
(^人^)
§(*￣▽￣*)§
ψ(._. )>
(/▽＼)
(o′┏▽┓｀o)
(*≧︶≦))(￣▽￣* )ゞ
(　o=^•ェ•)o　┏━┓
◑﹏◐
(○｀ 3′○)
(ಥ _ ಥ)
(⓿_⓿)
(❤´艸｀❤)
(ง •_•)ง
ผ(•̀_•́ผ)
（〃｀ 3′〃）
(●'◡'●)
(. ❛ ᴗ ❛.)
ლ(╹◡╹ლ)
o(〃＾▽＾〃)o
(。・ω・。)
(✿◠‿◠)
(ﾉ*ФωФ)ﾉ
ˋ( ° ▽、° )
(*/ω＼*)
=￣ω￣=
ο(=•ω＜=)ρ⌒☆
(✿◕‿◕✿)
(◔◡◔)
(★‿★)
╰(￣ω￣ｏ)
~(￣▽￣)~*
〜(￣▽￣〜)
(〜￣▽￣)〜
(～o￣3￣)～
(っ´Ι`)っ
ԅ(¯﹃¯ԅ)
(￣﹃￣)
(❤ ω ❤)
(°°)～
（￣。。￣）
( ఠൠఠ )ﾉ
ฅʕ•̫͡•ʔฅ
(￣(工)￣)
(ʘ ͟ʖ ʘ)
( ͡~ ͜ʖ ͡°)
¯\_( ͡° ͜ʖ ͡°)_/¯
(ʘᴥʘ)
¯\_(ツ)_/¯
(▰˘◡˘▰)
₍ᐢ.ˬ.ᐢ₎
(≧◡≦)

# Sadness

/_ \
（；´д｀）ゞ
(￣ ‘i ￣;)
( *^-^)ρ(*╯^╰)
(ノへ￣、)
（＞人＜；）
(#｀-_ゝ-)
≡(▔﹏▔)≡
⊙﹏⊙∥
╯︿╰
(┬┬﹏┬┬)
(´。＿。｀)
(˘･_･˘)
(；′⌒`)
〒▽〒
(T_T)
(≧﹏ ≦)
o(TヘTo)
X﹏X
( ͡o╭╮ ͡o)
(╯︵╰,)o)
(╥ᆺ╥；)
o(╥﹏╥)o
(╥_╥)
(╥╯θ╰╥)
(｡╯︵╰｡)
(╯︵╰)
(◞‸◟)
(个_个)
(×﹏×)

Things to Keep in Mind When Using Kaomoji

The key considerations when using Kaomoji are text encoding issues (character corruption) and automatic line breaks.

# Text Corruption and Automatic Line Breaks

Kaomoji often include uncommon special characters, such as Greek letters, Cyrillic characters, and Chinese character radicals.
To prevent characters from missing or text from becoming corrupted, you should choose Kaomoji that use only Unicode characters, which are the globally standardized character set.

The Kaomoji introduced here are selected with this in mind whenever possible. If you plan to use them on a web page, double-check that the font specified in the CSS font-family property supports those Kaomoji characters.

In addition, on narrow smartphone screens or when text wraps automatically, parts of a Kaomoji may be split across lines due to font size or line-width constraints, making the shape difficult to recognize.

References

よく使われる人気の顔文字（Kaomoji）一覧：感情・シーン別まとめ - codingEverybody

よく使われる人気の顔文字を、感情やシーン別にまとめました。気になる顔文字を見つけて、そのままコピーしてご活用ください。

codingeverybody.jp

HTML crossorigin Attribute : CORS Request Modes

Youn — Wed, 19 Aug 2026 06:51:30 +0000

Definition and Usage

The crossorigin attribute specifies the CORS (Cross-Origin Resource Sharing) request mode used when fetching resources linked to an element from an external origin.

CORS (Cross-Origin Resource Sharing)

CORS is a web standard mechanism that allows web browsers to request and access external resources that might otherwise be blocked for security reasons.

Using the crossorigin attribute allows you to safely use external resources (e.g., external images, fonts, and scripts) according to web standards by specifying the CORS request mode.

Usage Notes

# Understanding the Interaction Between Resources from External Origins and the Current Web Page

- Same-Origin Policy (SOP)

Browsers implement a core security mechanism called the Same-Origin Policy (SOP). This policy restricts how documents or scripts loaded from the current origin can interact with resources from an external origin.

When resources from an external origin are linked to a web page, browsers restrict interactions with those resources for security reasons. This security rule is called the Same-Origin Policy (SOP).

- Cases Where the Same-Origin Policy Allows Access to Resources from an External Origin

The Same-Origin Policy does not unconditionally restrict access to resources from an external origin.
It allows limited access to resources from external origins. A prime example is when resources are simply embedded into the current web page.

External script files embedded using <script src="…"></script>
External CSS files linked using <link rel="stylesheet" href="…">
Media played using <video>and <audio>
Images displayed using <img> and <picture>
Content embedded using <iframe>
External resources embedded using <object> and <embed>
Fonts applied using the CSS @font-face rule (some browsers may require the same origin)

- Cases Where the Same-Origin Policy Restricts Access to Resources from an External Origin

Simply embedding resources from an external origin does not generally restrict access.
However, when the current web page interacts with resources from an external origin, access is restricted because it may affect security.

Data communication: When the current web page communicates with resources from an external origin (e.g., fetching data through an AJAX request)
Access to cookies and stored information: When resources from an external origin attempt to access information from the current web page (e.g., attempting to access user cookies)
External origin resources within simply embedded resources from an external origin: When resources from an external origin exist within simply embedded resources from another external origin, access may be restricted to maintain security.
Script execution: When attempting to execute scripts from external origin resources on the current web page, or when external origin resources attempt to call script APIs of the current web page (certain specific APIs may be allowed).

# CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) is a web standard mechanism that allows interactions between the current origin, which is restricted by the Same-Origin Policy, and resources from an external origin.

This mechanism can be broadly divided into two approaches: specifying the CORS request mode using the HTML crossorigin attribute, and configuring CORS policies on the server to allow interactions with resources from an external origin.

This article covers how to specify the CORS request mode applied when fetching resources from an external origin using the crossorigin attribute.

Specifying CORS Request Modes for External Origin Resources Using the crossorigin Attribute

The crossorigin attribute is used for requests to resources from an external origin, such as those made by the <link>, <img>, <script>, <video>, and <audio> elements. It specifies the CORS request mode applied when fetching external origin resources linked to the element.

The crossorigin attribute value specifies the CORS request mode applied when fetching resources from an external origin. This value determines how the CORS request is processed.

# Things to Keep in Mind

Unlike general resources, web fonts are loaded into web pages using the CSS @font-face rule. During this process, browsers may perform CORS requests in the background. Therefore, even for same-origin web font resources, when preloading them using <link> with rel="preload", it is recommended to use crossorigin="anonymous" as well to ensure that the same CORS request mode is used as the actual font loading request.

References

HTML crossorigin Attribute – Specifying CORS Request Modes - codingCourses

The crossorigin attribute specifies the CORS (Cross-Origin Resource Sharing) request mode used when fetching resources linked to an element from an external origin.

coding.courses

JavaScript getElementById() Function

Youn — Wed, 19 Aug 2026 03:35:57 +0000

Definition and Usage

The getElementById() function returns the Element object whose HTML id attribute value matches the specified string. If no matching element exists, it returns null.

Basic Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>getElementById() Example</title>
    </head>
    <body>
        <p id="hello">Welcome! Nice to meet you!</p>
        <script>
            const changeColor = newColor => {
                const element = document.getElementById("hello"); // Finds the element with id="hello".
                element.style.color = newColor;
            }
        </script>
        <button type="button" onclick="changeColor('red');">Change to Red</button>
        <button type="button" onclick="changeColor('blue');">Change to Blue</button>
    </body>
</html>

Syntax

document.getElementById(id);

Return Value

Returns the element (Element) object whose HTML id attribute value matches the specified string.
Returns null if no matching element exists.

Things to Keep in Mind

# Preventing Errors When the Target Element Does Not Exist

The getElementById() function returns null if the element to find does not exist.

# The Value of the Target Element's id Attribute Is Case-Sensitive

The id parameter of the getElementById(id) function is a case-sensitive string.

# getElementById() Is Only a Method of the document Object

The getElementById() function is a document-only method used to find elements based on the entire HTML document.
Therefore, it cannot be used on Element objects accessed through properties such as parentNode and parentElement.

References

JavaScript getElementById() Function – A Complete Guide - codingCourses

The getElementById() function returns the Element object whose HTML id attribute value matches the specified string. If no matching element exists, it returns null.

coding.courses