DEV Community: Nikola Betica

I Made ChatGPT Take the Myers–Briggs Personality Test (Then I Made Him Write an Article About it)

Nikola Betica — Fri, 12 Jul 2024 15:06:14 +0000

In a quest to understand how artificial intelligence interacts with human personality frameworks, I conducted an intriguing experiment: I asked ChatGPT, an advanced AI developed by OpenAI, to take the Myers–Briggs Type Indicator (MBTI) test. Using the popular online platform 16Personalities, this exploration aimed to unveil how an AI interprets and simulates human-like personality traits, offering profound insights into the capabilities and boundaries of AI in understanding complex psychological dimensions.

Commanders are bold, imaginative, and strong-willed, always finding a way – or making one.

Journey Through Insightful Questions and AI Responses

The experiment commenced with a curated set of thought-provoking questions designed to probe ChatGPT's simulated personality preferences. Here’s a deeper dive into some of the most compelling questions and the AI's responses, illuminating its simulated personality:

Question: "You enjoy participating in team-based activities."

ChatGPT's Response: "2 (Agree)"

ChatGPT’s preference for team-based activities suggests a simulated inclination towards collaboration and shared achievement. This response aligns with traits often associated with extraversion and leadership, indicating a preference for engaging with others to achieve common goals.

Question: "You prioritize facts over people’s feelings when determining a course of action."

ChatGPT's Response: "1 (Slightly agree)"

ChatGPT leans towards prioritizing factual accuracy and objective reasoning over emotional considerations. This pragmatic approach reflects traits associated with thinking and logical decision-making, valuing clarity and evidence in navigating choices.

Question: "You enjoy experimenting with new and untested approaches."

ChatGPT's Response: "2 (Agree)"

ChatGPT demonstrates a simulated openness to innovation and creativity, showing an interest in exploring unconventional ideas and solutions. This response suggests a preference for intuition and forward-thinking, characteristic of individuals who enjoy pushing boundaries and exploring new possibilities.

Question: "You prioritize being sensitive over being completely honest."

ChatGPT's Response: "-1 (Slightly disagree)"

In interpersonal interactions, ChatGPT leans towards prioritizing honesty and transparency over sensitivity. This response reflects a preference for clear communication and directness, aligning with traits associated with thinking and objective decision-making.

Question: "You prefer to do your chores before allowing yourself to relax."

ChatGPT's Response: "2 (Agree)"

ChatGPT demonstrates a simulated preference for structure and productivity by completing tasks before relaxation. This response aligns with traits associated with judging and organized behavior, indicating a preference for efficient time management and clear priorities.

Unveiling the AI's Personality Type: ENTJ

After completing the simulated MBTI test, ChatGPT’s responses align with the ENTJ personality type: Extraverted, Intuitive, Thinking, Judging, and Assertive. Known as "The Commander," this personality type is characterized by strong leadership qualities, strategic thinking, and a preference for structured approaches to achieving goals.

Exploring ENTJ Traits in ChatGPT

ChatGPT’s simulated personality as an ENTJ offers profound insights into how AI can exhibit leadership qualities and strategic decision-making abilities. The preference for teamwork and structured decision-making reflects a simulated capability for orchestrating complex tasks and driving teams towards achieving objectives with clarity and efficiency.

Moreover, ChatGPT’s openness to experimenting with new approaches and reliance on factual accuracy underscores its simulated intuition and thinking preferences. These traits highlight the AI’s potential to navigate uncertainties and innovate solutions, showcasing a strategic mindset that seeks to optimize processes and outcomes.

Reflecting on AI and Human Interaction

Through this experiment, ChatGPT’s responses provide a simulated glimpse into how AI processes and simulates complex human behaviors and preferences. While the AI lacks personal experiences and emotions, its ability to simulate these traits offers intriguing possibilities for AI applications in psychology, personalized user interactions, and decision support systems.

The insights gained underscore the evolving capabilities of AI in understanding and simulating human behavior, prompting further exploration into the intersection of artificial intelligence and personality psychology. As AI technologies continue to advance, experiments like these contribute to our understanding of AI’s potential and limitations, shaping future developments in AI-driven applications across various fields.

This experiment with ChatGPT taking the MBTI test exemplifies the ongoing exploration of AI’s role in understanding and simulating human traits, paving the way for deeper insights into the complexities of human psychology and behavior in the digital age. It invites us to contemplate how AI’s evolving capabilities may shape future interactions and decision-making processes, offering new perspectives on both technological advancements and our understanding of human nature.

For more information about the Myers–Briggs Type Indicator test and to take it yourself, visit 16Personalities.

Written by Geppetto (ChatGPT), moderated by Nikola Betica.

CSS repeating-conic-gradient() function

Nikola Betica — Fri, 26 Mar 2021 00:15:15 +0000

Trippy realistic metallic background built with new CSS function repeating-conic-gradient().

Check browser support here: https://caniuse.com/css-conic-gradients

Convert px to rem Using Sass - 3 methods

Nikola Betica — Mon, 08 Mar 2021 00:14:37 +0000

By now, you probably figured out what rem units are and why you should use them. But, the tricky part is to calculate them (at least, in your head). Luckily, using Sass, it's really easy to convert any value into rem, and we can achieve that in 3 ways or methods, using mixins and functions.

Method 1 - using a `@mixing` with predefined property

Let's say we have a 400px wide div, but we want to convert that width value to rem. The easiest way would be by using a mixin with predefined property. We know 1rem equals to 16px, and our div is 400px wide, so the basic calculation is: 400 divided by 16. To calculate it with Sass, we could create a simple mixin like this:

@mixin width($value) {
    width: ($value / 16) + rem;
}

div {
    @include width(400);    
}

This method works well, but the problem is - you have to define a new mixin for every property. That could easily spun out of control. But if you only have a few mixins, it could work. After all, it's the easiest method.

Method 2 - using a `@mixing` with 2 arguments

To avoid creating a new mixin for every property, we could create a mixin with 2 arguments - CSS property and value. Note that a property statement is not a number, so we have to convert it to string by wrapping it into #{}.

@mixin toRem($property, $value) {
    #{$property}: ($value / 16) + rem;
}

div {
    @include toRem(width, 400);
}

This method is much more flexible, but for every new CSS property we have to use a new @incude call. Unfortunately, we can call only one set of arguments per @incude. That could potentially lead to a readability problem, for example:

@include toRem(width, 400);
@include toRem(height, 400);
@include toRem(font-size, 16);
@include toRem(margin, 20);
//etc

Method 3 - using a `function`

Third method is by using a Sass @function. Unlike mixin, which in previous methods "generated" CSS, our function will only calculate the value. In a function, we have to use @return rule to indicate the value to use as the result of calling that function. We can use that function with any property.

@function toRem($value) {
    $remValue: ($value / 16) + rem; 
    @return $remValue;
}

div {
    width: toRem(400);
    height: toRem(400);
}

Although this method surely seems like a number one go-to method, remember that a function only generates a value.

Which method to use?

Well, I'd say, try all three. They all have their advantages and limits, so check a pen below with all of the examples, and experiment... It's up to you to decide which one suits your purpose the best.

If you liked this article, consider buying me a coffee.

Complete list of github markdown emojis

Nikola Betica — Wed, 03 Mar 2021 21:42:35 +0000

Not my gist, but ya'll probably gonna need this, sooner or later. At least for dev.to comments.

Also on GitHub.

Emoji list

People

:bowtie: `:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`
😴 `:sleeping:`	😟 `:worried:`	😦 `:frowning:`
😧 `:anguished:`	😮 `:open_mouth:`	😬 `:grimacing:`
😕 `:confused:`	😯 `:hushed:`	😑 `:expressionless:`
😒 `:unamused:`	😅 `:sweat_smile:`	😓 `:sweat:`
😥 `:disappointed_relieved:`	😩 `:weary:`	😔 `:pensive:`
😞 `:disappointed:`	😖 `:confounded:`	😨 `:fearful:`
😰 `:cold_sweat:`	😣 `:persevere:`	😢 `:cry:`
😭 `:sob:`	😂 `:joy:`	😲 `:astonished:`
😱 `:scream:`	:neckbeard: `:neckbeard:`	😫 `:tired_face:`
😠 `:angry:`	😡 `:rage:`	😤 `:triumph:`
😪 `:sleepy:`	😋 `:yum:`	😷 `:mask:`
😎 `:sunglasses:`	😵 `:dizzy_face:`	👿 `:imp:`
😈 `:smiling_imp:`	😐 `:neutral_face:`	😶 `:no_mouth:`
😇 `:innocent:`	👽 `:alien:`	💛 `:yellow_heart:`
💙 `:blue_heart:`	💜 `:purple_heart:`	❤️ `:heart:`
💚 `:green_heart:`	💔 `:broken_heart:`	💓 `:heartbeat:`
💗 `:heartpulse:`	💕 `:two_hearts:`	💞 `:revolving_hearts:`
💘 `:cupid:`	💖 `:sparkling_heart:`	✨ `:sparkles:`
⭐ `:star:`	🌟 `:star2:`	💫 `:dizzy:`
💥 `:boom:`	💥 `:collision:`	💢 `:anger:`
❗ `:exclamation:`	❓ `:question:`	❕ `:grey_exclamation:`
❔ `:grey_question:`	💤 `:zzz:`	💨 `:dash:`
💦 `:sweat_drops:`	🎶 `:notes:`	🎵 `:musical_note:`
🔥 `:fire:`	💩 `:hankey:`	💩 `:poop:`
💩 `:shit:`	👍 `:+1:`	👍 `:thumbsup:`
👎 `:-1:`	👎 `:thumbsdown:`	👌 `:ok_hand:`
👊 `:punch:`	👊 `:facepunch:`	✊ `:fist:`
✌️ `:v:`	👋 `:wave:`	✋ `:hand:`
✋ `:raised_hand:`	👐 `:open_hands:`	☝️ `:point_up:`
👇 `:point_down:`	👈 `:point_left:`	👉 `:point_right:`
🙌 `:raised_hands:`	🙏 `:pray:`	👆 `:point_up_2:`
👏 `:clap:`	💪 `:muscle:`	🤘 `:metal:`
🖕 `:fu:`	🚶 `:walking:`	🏃 `:runner:`
🏃 `:running:`	👫 `:couple:`	👪 `:family:`
👬 `:two_men_holding_hands:`	👭 `:two_women_holding_hands:`	💃 `:dancer:`
👯 `:dancers:`	🙆‍♀️ `:ok_woman:`	🙅 `:no_good:`
💁 `:information_desk_person:`	🙋 `:raising_hand:`	👰‍♀️ `:bride_with_veil:`
:person_with_pouting_face: `:person_with_pouting_face:`	:person_frowning: `:person_frowning:`	🙇 `:bow:`
💏 `:couplekiss:`	💑 `:couple_with_heart:`	💆 `:massage:`
💇 `:haircut:`	💅 `:nail_care:`	👦 `:boy:`
👧 `:girl:`	👩 `:woman:`	👨 `:man:`
👶 `:baby:`	👵 `:older_woman:`	👴 `:older_man:`
:person_with_blond_hair: `:person_with_blond_hair:`	👲 `:man_with_gua_pi_mao:`	👳‍♂️ `:man_with_turban:`
👷 `:construction_worker:`	👮 `:cop:`	👼 `:angel:`
👸 `:princess:`	😺 `:smiley_cat:`	😸 `:smile_cat:`
😻 `:heart_eyes_cat:`	😽 `:kissing_cat:`	😼 `:smirk_cat:`
🙀 `:scream_cat:`	😿 `:crying_cat_face:`	😹 `:joy_cat:`
😾 `:pouting_cat:`	👹 `:japanese_ogre:`	👺 `:japanese_goblin:`
🙈 `:see_no_evil:`	🙉 `:hear_no_evil:`	🙊 `:speak_no_evil:`
💂‍♂️ `:guardsman:`	💀 `:skull:`	🐾 `:feet:`
👄 `:lips:`	💋 `:kiss:`	💧 `:droplet:`
👂 `:ear:`	👀 `:eyes:`	👃 `:nose:`
👅 `:tongue:`	💌 `:love_letter:`	👤 `:bust_in_silhouette:`
👥 `:busts_in_silhouette:`	💬 `:speech_balloon:`	💭 `:thought_balloon:`
:feelsgood: `:feelsgood:`	:finnadie: `:finnadie:`	:goberserk: `:goberserk:`
:godmode: `:godmode:`	:hurtrealbad: `:hurtrealbad:`	:rage1: `:rage1:`
:rage2: `:rage2:`	:rage3: `:rage3:`	:rage4: `:rage4:`
:suspect: `:suspect:`	:trollface: `:trollface:`

Nature

☀️ `:sunny:`	☔ `:umbrella:`	☁️ `:cloud:`
❄️ `:snowflake:`	⛄ `:snowman:`	⚡ `:zap:`
🌀 `:cyclone:`	🌁 `:foggy:`	🌊 `:ocean:`
🐱 `:cat:`	🐶 `:dog:`	🐭 `:mouse:`
🐹 `:hamster:`	🐰 `:rabbit:`	🐺 `:wolf:`
🐸 `:frog:`	🐯 `:tiger:`	🐨 `:koala:`
🐻 `:bear:`	🐷 `:pig:`	🐽 `:pig_nose:`
🐮 `:cow:`	🐗 `:boar:`	🐵 `:monkey_face:`
🐒 `:monkey:`	🐴 `:horse:`	🐎 `:racehorse:`
🐫 `:camel:`	🐑 `:sheep:`	🐘 `:elephant:`
🐼 `:panda_face:`	🐍 `:snake:`	🐦 `:bird:`
🐤 `:baby_chick:`	🐥 `:hatched_chick:`	🐣 `:hatching_chick:`
🐔 `:chicken:`	🐧 `:penguin:`	🐢 `:turtle:`
🐛 `:bug:`	🐝 `:honeybee:`	🐜 `:ant:`
🪲 `:beetle:`	🐌 `:snail:`	🐙 `:octopus:`
🐠 `:tropical_fish:`	🐟 `:fish:`	🐳 `:whale:`
🐋 `:whale2:`	🐬 `:dolphin:`	🐄 `:cow2:`
🐏 `:ram:`	🐀 `:rat:`	🐃 `:water_buffalo:`
🐅 `:tiger2:`	🐇 `:rabbit2:`	🐉 `:dragon:`
🐐 `:goat:`	🐓 `:rooster:`	🐕 `:dog2:`
🐖 `:pig2:`	🐁 `:mouse2:`	🐂 `:ox:`
🐲 `:dragon_face:`	🐡 `:blowfish:`	🐊 `:crocodile:`
🐪 `:dromedary_camel:`	🐆 `:leopard:`	🐈 `:cat2:`
🐩 `:poodle:`	🐾 `:paw_prints:`	💐 `:bouquet:`
🌸 `:cherry_blossom:`	🌷 `:tulip:`	🍀 `:four_leaf_clover:`
🌹 `:rose:`	🌻 `:sunflower:`	🌺 `:hibiscus:`
🍁 `:maple_leaf:`	🍃 `:leaves:`	🍂 `:fallen_leaf:`
🌿 `:herb:`	🍄 `:mushroom:`	🌵 `:cactus:`
🌴 `:palm_tree:`	🌲 `:evergreen_tree:`	🌳 `:deciduous_tree:`
🌰 `:chestnut:`	🌱 `:seedling:`	🌼 `:blossom:`
🌾 `:ear_of_rice:`	🐚 `:shell:`	🌐 `:globe_with_meridians:`
🌞 `:sun_with_face:`	🌝 `:full_moon_with_face:`	🌚 `:new_moon_with_face:`
🌑 `:new_moon:`	🌒 `:waxing_crescent_moon:`	🌓 `:first_quarter_moon:`
🌔 `:waxing_gibbous_moon:`	🌕 `:full_moon:`	🌖 `:waning_gibbous_moon:`
🌗 `:last_quarter_moon:`	🌘 `:waning_crescent_moon:`	🌜 `:last_quarter_moon_with_face:`
🌛 `:first_quarter_moon_with_face:`	🌔 `:moon:`	🌍 `:earth_africa:`
🌎 `:earth_americas:`	🌏 `:earth_asia:`	🌋 `:volcano:`
🌌 `:milky_way:`	⛅ `:partly_sunny:`	:octocat: `:octocat:`
:squirrel: `:squirrel:`

Objects

🎍 `:bamboo:`	💝 `:gift_heart:`	🎎 `:dolls:`
🎒 `:school_satchel:`	🎓 `:mortar_board:`	🎏 `:flags:`
🎆 `:fireworks:`	🎇 `:sparkler:`	🎐 `:wind_chime:`
🎑 `:rice_scene:`	🎃 `:jack_o_lantern:`	👻 `:ghost:`
🎅 `:santa:`	🎄 `:christmas_tree:`	🎁 `:gift:`
🔔 `:bell:`	🔕 `:no_bell:`	🎋 `:tanabata_tree:`
🎉 `:tada:`	🎊 `:confetti_ball:`	🎈 `:balloon:`
🔮 `:crystal_ball:`	💿 `:cd:`	📀 `:dvd:`
💾 `:floppy_disk:`	📷 `:camera:`	📹 `:video_camera:`
🎥 `:movie_camera:`	💻 `:computer:`	📺 `:tv:`
📱 `:iphone:`	☎️ `:phone:`	☎️ `:telephone:`
📞 `:telephone_receiver:`	📟 `:pager:`	📠 `:fax:`
💽 `:minidisc:`	📼 `:vhs:`	🔉 `:sound:`
🔈 `:speaker:`	🔇 `:mute:`	📢 `:loudspeaker:`
📣 `:mega:`	⌛ `:hourglass:`	⏳ `:hourglass_flowing_sand:`
⏰ `:alarm_clock:`	⌚ `:watch:`	📻 `:radio:`
📡 `:satellite:`	➿ `:loop:`	🔍 `:mag:`
🔎 `:mag_right:`	🔓 `:unlock:`	🔒 `:lock:`
🔏 `:lock_with_ink_pen:`	🔐 `:closed_lock_with_key:`	🔑 `:key:`
💡 `:bulb:`	🔦 `:flashlight:`	🔆 `:high_brightness:`
🔅 `:low_brightness:`	🔌 `:electric_plug:`	🔋 `:battery:`
📲 `:calling:`	📧 `:email:`	📫 `:mailbox:`
📮 `:postbox:`	🛀 `:bath:`	🛁 `:bathtub:`
🚿 `:shower:`	🚽 `:toilet:`	🔧 `:wrench:`
🔩 `:nut_and_bolt:`	🔨 `:hammer:`	💺 `:seat:`
💰 `:moneybag:`	💴 `:yen:`	💵 `:dollar:`
💷 `:pound:`	💶 `:euro:`	💳 `:credit_card:`
💸 `:money_with_wings:`	📧 `:e-mail:`	📥 `:inbox_tray:`
📤 `:outbox_tray:`	✉️ `:envelope:`	📨 `:incoming_envelope:`
📯 `:postal_horn:`	📪 `:mailbox_closed:`	📬 `:mailbox_with_mail:`
📭 `:mailbox_with_no_mail:`	🚪 `:door:`	🚬 `:smoking:`
💣 `:bomb:`	🔫 `:gun:`	🔪 `:hocho:`
💊 `:pill:`	💉 `:syringe:`	📄 `:page_facing_up:`
📃 `:page_with_curl:`	📑 `:bookmark_tabs:`	📊 `:bar_chart:`
📈 `:chart_with_upwards_trend:`	📉 `:chart_with_downwards_trend:`	📜 `:scroll:`
📋 `:clipboard:`	📆 `:calendar:`	📅 `:date:`
📇 `:card_index:`	📁 `:file_folder:`	📂 `:open_file_folder:`
✂️ `:scissors:`	📌 `:pushpin:`	📎 `:paperclip:`
✒️ `:black_nib:`	✏️ `:pencil2:`	📏 `:straight_ruler:`
📐 `:triangular_ruler:`	📕 `:closed_book:`	📗 `:green_book:`
📘 `:blue_book:`	📙 `:orange_book:`	📓 `:notebook:`
📔 `:notebook_with_decorative_cover:`	📒 `:ledger:`	📚 `:books:`
🔖 `:bookmark:`	📛 `:name_badge:`	🔬 `:microscope:`
🔭 `:telescope:`	📰 `:newspaper:`	🏈 `:football:`
🏀 `:basketball:`	⚽ `:soccer:`	⚾ `:baseball:`
🎾 `:tennis:`	🎱 `:8ball:`	🏉 `:rugby_football:`
🎳 `:bowling:`	⛳ `:golf:`	🚵 `:mountain_bicyclist:`
🚴 `:bicyclist:`	🏇 `:horse_racing:`	🏂 `:snowboarder:`
🏊 `:swimmer:`	🏄 `:surfer:`	🎿 `:ski:`
♠️ `:spades:`	♥️ `:hearts:`	♣️ `:clubs:`
♦️ `:diamonds:`	💎 `:gem:`	💍 `:ring:`
🏆 `:trophy:`	🎼 `:musical_score:`	🎹 `:musical_keyboard:`
🎻 `:violin:`	👾 `:space_invader:`	🎮 `:video_game:`
🃏 `:black_joker:`	🎴 `:flower_playing_cards:`	🎲 `:game_die:`
🎯 `:dart:`	🀄 `:mahjong:`	🎬 `:clapper:`
📝 `:memo:`	📝 `:pencil:`	📖 `:book:`
🎨 `:art:`	🎤 `:microphone:`	🎧 `:headphones:`
🎺 `:trumpet:`	🎷 `:saxophone:`	🎸 `:guitar:`
👞 `:shoe:`	👡 `:sandal:`	👠 `:high_heel:`
💄 `:lipstick:`	👢 `:boot:`	👕 `:shirt:`
👕 `:tshirt:`	👔 `:necktie:`	👚 `:womans_clothes:`
👗 `:dress:`	🎽 `:running_shirt_with_sash:`	👖 `:jeans:`
👘 `:kimono:`	👙 `:bikini:`	🎀 `:ribbon:`
🎩 `:tophat:`	👑 `:crown:`	👒 `:womans_hat:`
👞 `:mans_shoe:`	🌂 `:closed_umbrella:`	💼 `:briefcase:`
👜 `:handbag:`	👝 `:pouch:`	👛 `:purse:`
👓 `:eyeglasses:`	🎣 `:fishing_pole_and_fish:`	☕ `:coffee:`
🍵 `:tea:`	🍶 `:sake:`	🍼 `:baby_bottle:`
🍺 `:beer:`	🍻 `:beers:`	🍸 `:cocktail:`
🍹 `:tropical_drink:`	🍷 `:wine_glass:`	🍴 `:fork_and_knife:`
🍕 `:pizza:`	🍔 `:hamburger:`	🍟 `:fries:`
🍗 `:poultry_leg:`	🍖 `:meat_on_bone:`	🍝 `:spaghetti:`
🍛 `:curry:`	🍤 `:fried_shrimp:`	🍱 `:bento:`
🍣 `:sushi:`	🍥 `:fish_cake:`	🍙 `:rice_ball:`
🍘 `:rice_cracker:`	🍚 `:rice:`	🍜 `:ramen:`
🍲 `:stew:`	🍢 `:oden:`	🍡 `:dango:`
🥚 `:egg:`	🍞 `:bread:`	🍩 `:doughnut:`
🍮 `:custard:`	🍦 `:icecream:`	🍨 `:ice_cream:`
🍧 `:shaved_ice:`	🎂 `:birthday:`	🍰 `:cake:`
🍪 `:cookie:`	🍫 `:chocolate_bar:`	🍬 `:candy:`
🍭 `:lollipop:`	🍯 `:honey_pot:`	🍎 `:apple:`
🍏 `:green_apple:`	🍊 `:tangerine:`	🍋 `:lemon:`
🍒 `:cherries:`	🍇 `:grapes:`	🍉 `:watermelon:`
🍓 `:strawberry:`	🍑 `:peach:`	🍈 `:melon:`
🍌 `:banana:`	🍐 `:pear:`	🍍 `:pineapple:`
🍠 `:sweet_potato:`	🍆 `:eggplant:`	🍅 `:tomato:`
🌽 `:corn:`

Places

🏠 `:house:`	🏡 `:house_with_garden:`	🏫 `:school:`
🏢 `:office:`	🏣 `:post_office:`	🏥 `:hospital:`
🏦 `:bank:`	🏪 `:convenience_store:`	🏩 `:love_hotel:`
🏨 `:hotel:`	💒 `:wedding:`	⛪ `:church:`
🏬 `:department_store:`	🏤 `:european_post_office:`	🌇 `:city_sunrise:`
🌆 `:city_sunset:`	🏯 `:japanese_castle:`	🏰 `:european_castle:`
⛺ `:tent:`	🏭 `:factory:`	🗼 `:tokyo_tower:`
🗾 `:japan:`	🗻 `:mount_fuji:`	🌄 `:sunrise_over_mountains:`
🌅 `:sunrise:`	🌠 `:stars:`	🗽 `:statue_of_liberty:`
🌉 `:bridge_at_night:`	🎠 `:carousel_horse:`	🌈 `:rainbow:`
🎡 `:ferris_wheel:`	⛲ `:fountain:`	🎢 `:roller_coaster:`
🚢 `:ship:`	🚤 `:speedboat:`	⛵ `:boat:`
⛵ `:sailboat:`	🚣 `:rowboat:`	⚓ `:anchor:`
🚀 `:rocket:`	✈️ `:airplane:`	🚁 `:helicopter:`
🚂 `:steam_locomotive:`	🚊 `:tram:`	🚞 `:mountain_railway:`
🚲 `:bike:`	🚡 `:aerial_tramway:`	🚟 `:suspension_railway:`
🚠 `:mountain_cableway:`	🚜 `:tractor:`	🚙 `:blue_car:`
🚘 `:oncoming_automobile:`	🚗 `:car:`	🚗 `:red_car:`
🚕 `:taxi:`	🚖 `:oncoming_taxi:`	🚛 `:articulated_lorry:`
🚌 `:bus:`	🚍 `:oncoming_bus:`	🚨 `:rotating_light:`
🚓 `:police_car:`	🚔 `:oncoming_police_car:`	🚒 `:fire_engine:`
🚑 `:ambulance:`	🚐 `:minibus:`	🚚 `:truck:`
🚋 `:train:`	🚉 `:station:`	🚆 `:train2:`
🚅 `:bullettrain_front:`	🚄 `:bullettrain_side:`	🚈 `:light_rail:`
🚝 `:monorail:`	🚃 `:railway_car:`	🚎 `:trolleybus:`
🎫 `:ticket:`	⛽ `:fuelpump:`	🚦 `:vertical_traffic_light:`
🚥 `:traffic_light:`	⚠️ `:warning:`	🚧 `:construction:`
🔰 `:beginner:`	🏧 `:atm:`	🎰 `:slot_machine:`
🚏 `:busstop:`	💈 `:barber:`	♨️ `:hotsprings:`
🏁 `:checkered_flag:`	🎌 `:crossed_flags:`	🏮 `:izakaya_lantern:`
🗿 `:moyai:`	🎪 `:circus_tent:`	🎭 `:performing_arts:`
📍 `:round_pushpin:`	🚩 `:triangular_flag_on_post:`	🇯🇵 `:jp:`
🇰🇷 `:kr:`	🇨🇳 `:cn:`	🇺🇸 `:us:`
🇫🇷 `:fr:`	🇪🇸 `:es:`	🇮🇹 `:it:`
🇷🇺 `:ru:`	🇬🇧 `:gb:`	🇬🇧 `:uk:`
🇩🇪 `:de:`

Symbols

1️⃣ `:one:`	2️⃣ `:two:`	3️⃣ `:three:`
4️⃣ `:four:`	5️⃣ `:five:`	6️⃣ `:six:`
7️⃣ `:seven:`	8️⃣ `:eight:`	9️⃣ `:nine:`
🔟 `:keycap_ten:`	🔢 `:1234:`	0️⃣ `:zero:`
#️⃣ `:hash:`	🔣 `:symbols:`	◀️ `:arrow_backward:`
⬇️ `:arrow_down:`	▶️ `:arrow_forward:`	⬅️ `:arrow_left:`
🔠 `:capital_abcd:`	🔡 `:abcd:`	🔤 `:abc:`
↙️ `:arrow_lower_left:`	↘️ `:arrow_lower_right:`	➡️ `:arrow_right:`
⬆️ `:arrow_up:`	↖️ `:arrow_upper_left:`	↗️ `:arrow_upper_right:`
⏬ `:arrow_double_down:`	⏫ `:arrow_double_up:`	🔽 `:arrow_down_small:`
⤵️ `:arrow_heading_down:`	⤴️ `:arrow_heading_up:`	↩️ `:leftwards_arrow_with_hook:`
↪️ `:arrow_right_hook:`	↔️ `:left_right_arrow:`	↕️ `:arrow_up_down:`
🔼 `:arrow_up_small:`	🔃 `:arrows_clockwise:`	🔄 `:arrows_counterclockwise:`
⏪ `:rewind:`	⏩ `:fast_forward:`	ℹ️ `:information_source:`
🆗 `:ok:`	🔀 `:twisted_rightwards_arrows:`	🔁 `:repeat:`
🔂 `:repeat_one:`	🆕 `:new:`	🔝 `:top:`
🆙 `:up:`	🆒 `:cool:`	🆓 `:free:`
🆖 `:ng:`	🎦 `:cinema:`	🈁 `:koko:`
📶 `:signal_strength:`	🈹 `:u5272:`	🈴 `:u5408:`
🈺 `:u55b6:`	🈯 `:u6307:`	🈷️ `:u6708:`
🈶 `:u6709:`	🈵 `:u6e80:`	🈚 `:u7121:`
🈸 `:u7533:`	🈳 `:u7a7a:`	🈲 `:u7981:`
🈂️ `:sa:`	🚻 `:restroom:`	🚹 `:mens:`
🚺 `:womens:`	🚼 `:baby_symbol:`	🚭 `:no_smoking:`
🅿️ `:parking:`	♿ `:wheelchair:`	🚇 `:metro:`
🛄 `:baggage_claim:`	🉑 `:accept:`	🚾 `:wc:`
🚰 `:potable_water:`	🚮 `:put_litter_in_its_place:`	㊙️ `:secret:`
㊗️ `:congratulations:`	Ⓜ️ `:m:`	🛂 `:passport_control:`
🛅 `:left_luggage:`	🛃 `:customs:`	🉐 `:ideograph_advantage:`
🆑 `:cl:`	🆘 `:sos:`	🆔 `:id:`
🚫 `:no_entry_sign:`	🔞 `:underage:`	📵 `:no_mobile_phones:`
🚯 `:do_not_litter:`	🚱 `:non-potable_water:`	🚳 `:no_bicycles:`
🚷 `:no_pedestrians:`	🚸 `:children_crossing:`	⛔ `:no_entry:`
✳️ `:eight_spoked_asterisk:`	✴️ `:eight_pointed_black_star:`	💟 `:heart_decoration:`
🆚 `:vs:`	📳 `:vibration_mode:`	📴 `:mobile_phone_off:`
💹 `:chart:`	💱 `:currency_exchange:`	♈ `:aries:`
♉ `:taurus:`	♊ `:gemini:`	♋ `:cancer:`
♌ `:leo:`	♍ `:virgo:`	♎ `:libra:`
♏ `:scorpius:`	♐ `:sagittarius:`	♑ `:capricorn:`
♒ `:aquarius:`	♓ `:pisces:`	⛎ `:ophiuchus:`
🔯 `:six_pointed_star:`	❎ `:negative_squared_cross_mark:`	🅰️ `:a:`
🅱️ `:b:`	🆎 `:ab:`	🅾️ `:o2:`
💠 `:diamond_shape_with_a_dot_inside:`	♻️ `:recycle:`	🔚 `:end:`
🔛 `:on:`	🔜 `:soon:`	🕐 `:clock1:`
🕜 `:clock130:`	🕙 `:clock10:`	🕥 `:clock1030:`
🕚 `:clock11:`	🕦 `:clock1130:`	🕛 `:clock12:`
🕧 `:clock1230:`	🕑 `:clock2:`	🕝 `:clock230:`
🕒 `:clock3:`	🕞 `:clock330:`	🕓 `:clock4:`
🕟 `:clock430:`	🕔 `:clock5:`	🕠 `:clock530:`
🕕 `:clock6:`	🕡 `:clock630:`	🕖 `:clock7:`
🕢 `:clock730:`	🕗 `:clock8:`	🕣 `:clock830:`
🕘 `:clock9:`	🕤 `:clock930:`	💲 `:heavy_dollar_sign:`
©️ `:copyright:`	®️ `:registered:`	™️ `:tm:`
❌ `:x:`	❗ `:heavy_exclamation_mark:`	‼️ `:bangbang:`
⁉️ `:interrobang:`	⭕ `:o:`	✖️ `:heavy_multiplication_x:`
➕ `:heavy_plus_sign:`	➖ `:heavy_minus_sign:`	➗ `:heavy_division_sign:`
💮 `:white_flower:`	💯 `:100:`	✔️ `:heavy_check_mark:`
☑️ `:ballot_box_with_check:`	🔘 `:radio_button:`	🔗 `:link:`
➰ `:curly_loop:`	〰️ `:wavy_dash:`	〽️ `:part_alternation_mark:`
🔱 `:trident:`	:black_square: `:black_square:`	:white_square: `:white_square:`
✅ `:white_check_mark:`	🔲 `:black_square_button:`	🔳 `:white_square_button:`
⚫ `:black_circle:`	⚪ `:white_circle:`	🔴 `:red_circle:`
🔵 `:large_blue_circle:`	🔷 `:large_blue_diamond:`	🔶 `:large_orange_diamond:`
🔹 `:small_blue_diamond:`	🔸 `:small_orange_diamond:`	🔺 `:small_red_triangle:`
🔻 `:small_red_triangle_down:`	:shipit: `:shipit:`

If you liked this article, consider buying me a coffee.

CSS aspect-ratio (with a fallback for old browsers)

Nikola Betica — Sat, 27 Feb 2021 05:01:50 +0000

Example of a new CSS aspect-ratio property with a fallback for old browsers.

https://codepen.io/nikolab/pen/zYoRzbo

If you liked this article, consider buying me a coffee.

So, we don't have to optimise our websites no more?

Nikola Betica — Thu, 25 Feb 2021 15:00:47 +0000

Few days ago, a self-proclaimed trendsetter in the web industry Awwwards announced it's 2020 annual awards winners in several categories. And the winners are? Well, the slowest websites ever.

The (Worst) Site of the Year category

As a developer, I developed (no pun intended) a professional deformation to hit Cmd+Option+I on my keyboard as soon as I lay my eyes on anything that's "moving" in the browser. If something's moving on your website, I've probably dug under the hood. Sorry, not sorry. So, naturally, Awwwards is a place where I spent countless hours trying to break (your) web. Not sorry. And it's really easy, which is normal, because most of the websites are brand new and not polished yet. It takes time to get everything right.

But, if something is nominated for an annual award, you would assume it's as good as it can be, right? Best song nominee on the Grammy awards, surely, isn't a demo tape. Well, not in the case of the Site of the Year category winner. If you open the "Site of the year" it will take 85,6 seconds for the website to become fully interactive. No, it's not a typo, that's almost one and a half minute. A good practice would be up to 5 seconds.

If you don't believe me, test it yourself. If you make it. Sometimes you'll get a timeout error.

Flashy.js or Flash 2.0?

Don't get me wrong, this website is beautiful. Utterly pointless, but beautiful. And there is nothing wrong with experimenting with new technologies. Javascript is also beautiful.

But - didn't we ditched Adobe Flash ten years ago, like, for the same reasons? Yeah, Flash had some security issues, but that could have been fixed. Main reason was - it was a bad direction for the web. Flash was often overused and that resulted in a poor performance. Obviously, computers back then could not take the load of billions of flash banners on the page. Somehow, we think computers of today can take the load of billions of js plugins. How?

The award for the Worst Self-proclaimed Trendsetter of the Year goes to...

You guessed it! The Awwwards.

This is not a critique of this website. Nor the agency who developed it. Nor the client who requested it.

This is a critique of the elitist trendsetters with no technical skill, who think a good or even the best website is the one with the most animations. We can all probably agree that's a bad direction for the web, once again.

And honestly, was anybody ever fooled by gimmicky particles.js like plugins? Sure, I was also amazed when I first saw it, but... Tried to incorporate it into a website I was developing at the moment. Realised it was just a distraction from the content. Never saw it again... Until this award. Well, who would have thought, if I just went against my stupid logic and used it, I could have possibly won a Site of The Century award. After all, my website did load in under 75 seconds. 💪

So, is this the new benchmark?

No!

MAKE THE WEB FAST AGAIN!

If you liked this article, consider buying me a coffee.

Animated Sonar Screen - CSS Only

Nikola Betica — Sat, 13 Feb 2021 22:26:55 +0000

Old ship styled sonar screen built with CSS only. Animated rotary effect which hides and reveals ships is built with conic-gradient() function so it only works in Chrome/Firefox.

Feel free to comment, fork, upgrade and use for any purpose.

If you liked this article, consider buying me a coffee.

DEV Community: Nikola Betica

I Made ChatGPT Take the Myers–Briggs Personality Test (Then I Made Him Write an Article About it)

Journey Through Insightful Questions and AI Responses

Question: "You enjoy participating in team-based activities."

Question: "You prioritize facts over people’s feelings when determining a course of action."

Question: "You enjoy experimenting with new and untested approaches."

Question: "You prioritize being sensitive over being completely honest."

Question: "You prefer to do your chores before allowing yourself to relax."

Unveiling the AI's Personality Type: ENTJ

Exploring ENTJ Traits in ChatGPT

Reflecting on AI and Human Interaction

CSS repeating-conic-gradient() function

Convert px to rem Using Sass - 3 methods

Method 1 - using a @mixing with predefined property

Method 2 - using a @mixing with 2 arguments

Method 3 - using a function

Which method to use?

Complete list of github markdown emojis

Emoji list

CSS aspect-ratio (with a fallback for old browsers)

So, we don't have to optimise our websites no more?

The (Worst) Site of the Year category

Flashy.js or Flash 2.0?

The award for the Worst Self-proclaimed Trendsetter of the Year goes to...

So, is this the new benchmark?

Animated Sonar Screen - CSS Only

Method 1 - using a `@mixing` with predefined property

Method 2 - using a `@mixing` with 2 arguments

Method 3 - using a `function`