Fun with Neocities

Last week I pulled together a new web-based résumé and today I was introduced to neocities.org, a future cousin ye-olde geocities. I didn't do anything with geocities back in its day but that doesn't mean I can be nostalgic for a more democratic web.

The first thing I did was upload my new resume there at https://billmerrill.neocities.org. I showed this off at the Office Nomads weekly Show & Tell and I agreed that it was kinda lame, NeoCities demands more.

I started work on artify.js, an overlay to improve my résumé. I've only just started, but I thought I'd write about my task of finding a list of emoji that I could use in javascript.

There are several npm packages that claim to be able to help me, but I have no interest. I hope to keep the artification down to 1 js file, 1 css file, and perhaps associated images assets and I can not-written-here all I want on my personal projects.

I found multiple websites with big tables of emoji including the utf-8 text which I wanted. I thought of a variety of ways I might extract this but was most pleased with the realization that I could use the DOM and javascript themselves. The webpage I found myself on already provided jQuery so this was pretty easy.

On this page I ran this code in the console

emos = Array();  
$("span.emoji:not(.android):not(.symbola)").each(function(index, object) {o = $(object); emos.push(o.text())});
emostr = "";  
$(emos).each(function(index, object) { emostr += "'" + object + "',"; });

to give me

emojis = ['😁','😂','😃','😄','😅','😆','😉','😊','😋','😌','😍','😏','😒','😓','😔','😖','😘','😚','😜','😝','😞','😠','😡','😢','😣','😤','😥','😨','😩','😪','😫','😭','😰','😱','😲','😳','😵','😷','😸','😹','😺','😻','😼','😽','😾','😿','🙀','🙅','🙆','🙇','🙈','🙉','🙊','🙋','🙌','🙍','🙎','🙏','✂','✅','✈','✉','✊','✋','✌','✏','✒','✔','✖','✨','✳','✴','❄','❇','❌','❎','❓','❔','❕','❗','❤','➕','➖','➗','➡','➰','🚀','🚃','🚄','🚅','🚇','🚉','🚌','🚏','🚑','🚒','🚓','🚕','🚗','🚙','🚚','🚢','🚤','🚥','🚧','🚨','🚩','🚪','🚫','🚬','🚭','🚲','🚶','🚹','🚺','🚻','🚼','🚽','🚾','🛀','Ⓜ','🅰','🅱','🅾','🅿','🆎','🆑','🆒','🆓','🆔','🆕','🆖','🆗','🆘','🆙','🆚','🇩🇪','🇬🇧','🇨🇳','🇯🇵','🇰🇷','🇫🇷','🇪🇸','🇮🇹','🇺🇸','🇷🇺','🈁','🈂','🈚','🈯','🈲','🈳','🈴','🈵','🈶','🈷','🈸','🈹','🈺','🉐','🉑','©','®','‼','⁉','8⃣','9⃣','7⃣','6⃣','1⃣','0⃣','2⃣','3⃣','5⃣','4⃣','#⃣','™','ℹ','↔','↕','↖','↗','↘','↙','↩','↪','⌚','⌛','⏩','⏪','⏫','⏬','⏰','⏳','▪','▫','▶','◀','◻','◼','◽','◾','☀','☁','☎','☑','☔','☕','☝','☺','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','♠','♣','♥','♦','♨','♻','♿','⚓','⚠','⚡','⚪','⚫','⚽','⚾','⛄','⛅','⛎','⛔','⛪','⛲','⛳','⛵','⛺','⛽','⤴','⤵','⬅','⬆','⬇','⬛','⬜','⭐','⭕','〰','〽','㊗','㊙','🀄','🃏','🌀','🌁','🌂','🌃','🌄','🌅','🌆','🌇','🌈','🌉','🌊','🌋','🌌','🌏','🌑','🌓','🌔','🌕','🌙','🌛','🌟','🌠','🌰','🌱','🌴','🌵','🌷','🌸','🌹','🌺','🌻','🌼','🌽','🌾','🌿','🍀','🍁','🍂','🍃','🍄','🍅','🍆','🍇','🍈','🍉','🍊','🍌','🍍','🍎','🍏','🍑','🍒','🍓','🍔','🍕','🍖','🍗','🍘','🍙','🍚','🍛','🍜','🍝','🍞','🍟','🍠','🍡','🍢','🍣','🍤','🍥','🍦','🍧','🍨','🍩','🍪','🍫','🍬','🍭','🍮','🍯','🍰','🍱','🍲','🍳','🍴','🍵','🍶','🍷','🍸','🍹','🍺','🍻','🎀','🎁','🎂','🎃','🎄','🎅','🎆','🎇','🎈','🎉','🎊','🎋','🎌','🎍','🎎','🎏','🎐','🎑','🎒','🎓','🎠','🎡','🎢','🎣','🎤','🎥','🎦','🎧','🎨','🎩','🎪','🎫','🎬','🎭','🎮','🎯','🎰','🎱','🎲','🎳','🎴','🎵','🎶','🎷','🎸','🎹','🎺','🎻','🎼','🎽','🎾','🎿','🏀','🏁','🏂','🏃','🏄','🏆','🏈','🏊','🏠','🏡','🏢','🏣','🏥','🏦','🏧','🏨','🏩','🏪','🏫','🏬','🏭','🏮','🏯','🏰','🐌','🐍','🐎','🐑','🐒','🐔','🐗','🐘','🐙','🐚','🐛','🐜','🐝','🐞','🐟','🐠','🐡','🐢','🐣','🐤','🐥','🐦','🐧','🐨','🐩','🐫','🐬','🐭','🐮','🐯','🐰','🐱','🐲','🐳','🐴','🐵','🐶','🐷','🐸','🐹','🐺','🐻','🐼','🐽','🐾','👀','👂','👃','👄','👅','👆','👇','👈','👉','👊','👋','👌','👍','👎','👏','👐','👑','👒','👓','👔','👕','👖','👗','👘','👙','👚','👛','👜','👝','👞','👟','👠','👡','👢','👣','👤','👦','👧','👨','👩','👪','👫','👮','👯','👰','👱','👲','👳','👴','👵','👶','👷','👸','👹','👺','👻','👼','👽','👾','👿','💀','💁','💂','💃','💄','💅','💆','💇','💈','💉','💊','💋','💌','💍','💎','💏','💐','💑','💒','💓','💔','💕','💖','💗','💘','💙','💚','💛','💜','💝','💞','💟','💠','💡','💢','💣','💤','💥','💦','💧','💨','💩','💪','💫','💬','💮','💯','💰','💱','💲','💳','💴','💵','💸','💹','💺','💻','💼','💽','💾','💿','📀','📁','📂','📃','📄','📅','📆','📇','📈','📉','📊','📋','📌','📍','📎','📏','📐','📑','📒','📓','📔','📕','📖','📗','📘','📙','📚','📛','📜','📝','📞','📟','📠','📡','📢','📣','📤','📥','📦','📧','📨','📩','📪','📫','📮','📰','📱','📲','📳','📴','📶','📷','📹','📺','📻','📼','🔃','🔊','🔋','🔌','🔍','🔎','🔏','🔐','🔑','🔒','🔓','🔔','🔖','🔗','🔘','🔙','🔚','🔛','🔜','🔝','🔞','🔟','🔠','🔡','🔢','🔣','🔤','🔥','🔦','🔧','🔨','🔩','🔪','🔫','🔮','🔯','🔰','🔱','🔲','🔳','🔴','🔵','🔶','🔷','🔸','🔹','🔺','🔻','🔼','🔽','🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛','🗻','🗼','🗽','🗾','🗿','😀','😇','😈','😎','😐','😑','😕','😗','😙','😛','😟','😦','😧','😬','😮','😯','😴','😶','🚁','🚂','🚆','🚈','🚊','🚍','🚎','🚐','🚔','🚖','🚘','🚛','🚜','🚝','🚞','🚟','🚠','🚡','🚣','🚦','🚮','🚯','🚰','🚱','🚳','🚴','🚵','🚷','🚸','🚿','🛁','🛂','🛃','🛄','🛅','🌍','🌎','🌐','🌒','🌖','🌗','🌘','🌚','🌜','🌝','🌞','🌲','🌳','🍋','🍐','🍼','🏇','🏉','🏤','🐀','🐁','🐂','🐃','🐄','🐅','🐆','🐇','🐈','🐉','🐊','🐋','🐏','🐐','🐓','🐕','🐖','🐪','👥','👬','👭','💭','💶','💷','📬','📭','📯','📵','🔀','🔁','🔂','🔄','🔅','🔆','🔇','🔉','🔕','🔬','🔭','🕜','🕝','🕞','🕟','🕠','🕡','🕢','🕣','🕤','🕥','🕦','🕧'];  

Now I have an array of emoji ready for my purposes.

css .not

This was the first time I'd used the negation psuedo-class in css. It was necessary to remove duplicates and it worked great! There were three spans with class emoji per character, but I could filter 2 of them using the android and symbola classes. Perfect.

span.emoji:not(.android):not(.symbola)