sorted-colors VS emoji-cheat-sheet

On fonts and colors. Used by some plugins. CSS Colors Chart.js plugin colors

Another fun resource for browsing the built-in colors: https://enes.in/sorted-colors/

And discussion from when it was posted on HN: https://news.ycombinator.com/item?id=26503572

This is great! For those who like this, you may also like https://enes.in/sorted-colors which also does the named web colours.

We’ve moved from using the attributes within HTML tags to using the actual </code> tag the in the head of the HTML doc. This is our introduction to the CSS rule. Much easier on the eyes. I always find it odd that people who are comfortable with JavaScript find CSS confusing. To me this syntax is the most straightforward. I remember the first time I saw the CSS rule and thinking <em>“this makes sense.”</em> It’s actually a lot of fun so it’s easy to get carried away. Sometimes I’ll go nuts and style an element to the point where it makes more sense to just throw together an image in Affinity Designer.</p> <p>Next up was our first challenge. For this we had to create a multi-page site with a nested file structure. Nothing too crazy. Some trial and error. Lots of page refreshing and questioning if you put the 2 periods and slash in the right order, in the right place — welcome to coding. Aside from that we had to style each page slightly differently. For mine I referenced this awesome <a href="https://enes.in/sorted-colors/">color palette generator</a> and threw in some linear-gradients to accent each block element. If you’re interested you can check it <a href="https://peprojects.dev/alpha-3/jose/challenge-1/">here</a>.</p> <p>For the next lesson we got introduced to the pen tool in Affinity Designer and CodePen:</p> <ol> <li> <p>The Pen Tool</p> <ol> <li>Takes some getting used to.</li> <li>I can see it’s power but I suck at it right now.</li> <li>Slowly gaining a natural sense of how to use it.</li> <li>Created this creepy ghost with hollow eyes <em>(see fig. 1)</em>. Don’t judge me.</li> </ol> </li> <li> <p>CodePen</p> <ol> <li>Love this site. Great for workshopping ideas, collaboration, inspiration, etc.</li> <li>Had to create text with an image inside it</li> <li>I chose <em>CAGE</em> and put a different image of the controversial Nicolas Cage inside each letter.</li> <li>Chose a font with a thick width so I could get his face in there.</li> <li>Messed with some CSS properties I don’t fully understand but hey! I got a working model. Looks cool too. Check it <a href="https://codepen.io/j-negrete/full/dyzepVW">here</a>.</li> <li>He looks so <em>“at home”</em> with a fire background.</li> </ol> </li> <li> <p>Had to create a pen using the <code>float:</code> property</p> <ol> <li>Never used this before. I find it useful but a lot of devs don’t seem too stoked on this.</li> <li>Created my own version of this page from the <a href="https://forestparkconservancy.org/forest-park/facts/">Forest Park website</a>.</li> <li>Used an image of the Olmstead bros for the <code>float:</code> property.</li> <li>Interested? Check it <a href="https://codepen.io/j-negrete/full/gOxzLyO">here</a>.</li> </ol> </li> </ol> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vI4j2XoJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://community.codenewbie.org/remoteimages/uploads/articles/457i42clhmoqyspzww36.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vI4j2XoJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://community.codenewbie.org/remoteimages/uploads/articles/457i42clhmoqyspzww36.jpg" alt="creepy ghost" loading="lazy" width="880" height="550"></a></p> <p>Hello <code><iframe></code>s and hash links. Got familiarized with embedding the YouTube videos on a webpage. <code><iframe></code>s have their use but Derek showed us how if used incorrectly they can mess up the google search for your site. Hash links are pretty standard if you’re setting up a single page site. Easy and intuitive. Added some smooth scrolling with hash links to the Dead Moon redesign I’m having fun with. Check it <a href="https://codepen.io/j-negrete/full/LYjmZWK">here</a>.</p> <p>Next up we learned about CSS resets. There’s all these automated sizes and margins when you don’t reset, so it’s nice to build from scratch and have full control. Along with that we learned about some useful CSS properties like <code>letter-spacing:</code> and <code>line-height:</code>. Never thought twice about these 2 things but now I can’t unsee it. Also learned how to combine selectors to style multiple elements at the same time. For the sake of practice, I got a little wacky with styling <a href="https://codepen.io/j-negrete/full/eYEKpMK">this page</a>.</p> <p>Like I’ve said in the past, some days at PE aren’t completely buried in the computer. To take a break from coding we learned about the history of printing. We watched 3 documentaries. All really cool and interesting. I really enjoyed the last one on Linotype. It was a bit sad seeing it get phased out in favor of computers but you can’t argue when computers can pump out 1,000 lines a minute whereas the Linotype machine can only do 14. The scene with the guy using the machine one last time was particularly sad. He’s just drags his fingers slowly across the keys, trying to make the most of it.</p> <p>Derek took a day off so Drake could teach us about <code>box-sizing:</code>. Thanks <a href="https://codepen.io/perpetual-education/pen/qBRpOWy?editors=1100">Drake</a>.</p> <p>Now that we’re a bit more comfortable using CSS and HTML we were tasked with styling an article. The goal was to try and make it look legit and fun to read. I started thinking of random topics I’m interested in and looked up an article on Slab City. I took the text and photos from this <a href="https://www.npr.org/2012/01/24/145645412/down-and-out-escape-to-slab-in-california-desert">NPR article</a> and styled it in my own way. I initially made a <a href="https://codepen.io/j-negrete/full/KKveeWP">colored version</a> but then noticed that that we were suppose to make it <a href="https://codepen.io/j-negrete/full/abyKRKy">black and white</a>. Whoops. Did a quick fix. Always knew that double border would look cool at some point. Adjusted the font for <em>SLAB</em> in the title too. Did a google search for “CSS make photo grey” and up came the MDN doc for the <code>filter:</code> property. Pretty cool.</p> <p>Believe it or not, Bill Murray hired me to make his personal site. Well… Derek pretended to be him — same thing though. William (as his friends call him) has no taste. You’d figure all that time spent with Wes Anderson would have a profound effect on him but I guess not. This exercise was just a fun intro to what it might be like working with a client. I look forward to deleting these from my CodePen archive. Marble backgrounds? 🤮</p> <p>Moving onto semantic markup and the inner-column — a good standard way of designing a page. Basically you set the content of each <code>display: block;</code> element inside a <code><div></code> to make an inner-column. Looks nice and organized when you put a <code><border: 1px solid red;></code> around everything.</p> <p>After learning this William( 🤡 ) contacted me again to update his site. He let his friend take a stab at it. She did pretty good but I had to do a few quick fixes. This was more so practice for semantic markup, creating an inner-column, and spotting redundant CSS declarations.</p> <p>Now we’re jumping from CodePen and back into Sublime to revisit our multi-page site. When we first built this it had no styling but now we’re tasked with creating one style sheet that can be applied to every page. Kept it pretty simple for this one. Just used a subtle color combo and the <em>Roboto</em> font. Really basic styling depending on <code>font-size:</code> and <code>font-weight:</code>. I like it. Hey! I added my <a href="https://peprojects.dev/alpha-3/jose/4-page-site/qmc.html">movie lists</a> to the site if you’re ever bored and don’t know what to watch.</p> <p>Following this we had another easygoing day. This time we watched a documentary on Helvetica. Another one of the those things I can’t unsee now that I’m aware of it. I thought I was a nerd but holy crap, I got nothing on these typography nerds. Some of those scenes reminded me of <em>Spinal Tap</em> and <em>King of Kong</em>. I like the scene where David Carson (sort of the anti-Helvetica dude) looks at the word <em>caffeinated</em> (spelled in Helvetica) and says, “that doesn’t say caffeinated!”</p> <p>Back to coding. Now we get to research, plan, and execute a project. We had to do a lot (for me) within the time constraints. This was fun but some of my code is super wonky. Hey, desperate times call for desperate syntax. For this one I made a tame version of Jacob Leach’s personal <a href="https://jacobleech.com/">site</a>. Here’s my sad <a href="https://codepen.io/j-negrete/full/QWMVebG">version</a>.</p> <p>Welp, that’s the gist. See ya again next week! ✌️</p> <p>…craving some Elton John.</p>

</code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> <p>💡: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks.</p> </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> <p>To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. </p> <p>Since the profiles are open-source, you can use some of the good ideas for your awesome profile!</p> <p>You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. 😉</p> <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> <p>For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix.</p> <p>If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. </p> <p>Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a></p> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> <p>For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons.</p> <p>If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands.</p> <p>Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a></p> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> <p>In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>.</p> <p>If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>.</p> <p>Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"+1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"-1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"100"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1234"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1st_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"2nd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"3rd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"8ball"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="w"> </span></code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list

I found a list of most, if not all Unicode characters with some similar :short_codes: but discord changes a bunch and it is tedious to go into the page, grab the short code, check the short code on discord and add it to the list for 3000+ characters.

Emoji Code Cheatsheet

Emojis

You can copy them from here 💖

Try https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md

ikatyang/emoji-cheat-sheet – A markdown version emoji cheat sheet.