Coding With Emojis

I agree, using emojis in code as a function name or variable is AWEFUL, maybe one day it might become a convention (C’mon react hooks as a fishing hook is brilliant) but today this is quite an odd idea.

However, when building complex user interfaces, I believe you can use emojies to very easily convey how the code ‘looks’ from within the text, here’s an example:

First of all, building a large UI is great but be honest, you hate that you had to use 24 nested <div />'s

Move absolutely all of those divs into a single parent div



<div id="example-wrapper">
	<div id="theme-picker-section" >...</div>
	<div id="side-bar-section" >...</div>
	<div id="search-bar-section" >...</div>
	<!--- etc --->
</div>

Within the CSS, create a selector like this


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: "";
}

From here we can visualise the layout structure in the grid-areas-template

For example if we return to the UI, we can see we have two perfect columns and 6 rows

With that, we’ll want to add our grid layout into the grid-template-areas, where normally you would use the css selector names


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: 
		"theme-picker theme-picker"
		"side-bar  search-bar"
		"side-bar  view-area"
		"side-bar  scroll-bar"
		"side-bar  image"
		"side-bar  shapes-picker"
}

But that’s wordy, so let’s use Emojis instead!


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: 
		"🎨  🎨"
		"⬅️  🔍"
		"⬅️  🪟"
		"⬅️  🅿️"
		"⬅️  🖼️"
		"⬅️  🔼"
}

And then simply update each of the original CSS selectors with it’s corresponding emoji identifier


#theme-picker-section {
	grid-area: 🎨;
}

#search-bar-section {
	grid-area: 🔍;
}

#side-bar-section {
	grid-area: ⬅️;
}

#image-section {
	grid-area: 🖼️;
}

/* etc */

And just like that, you went from terrible divs to an elegantly structured grid