<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Job</title>
    <description>The latest articles on DEV Community by Job (@ayybbbt).</description>
    <link>https://dev.to/ayybbbt</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2461175%2Ff4b5695b-ba4b-4507-a8ab-3d2f8109ab88.jpg</url>
      <title>DEV Community: Job</title>
      <link>https://dev.to/ayybbbt</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ayybbbt"/>
    <language>en</language>
    <item>
      <title>Companies Like DataAnnotation.Tech &amp; Mercor</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Sat, 20 Sep 2025 13:46:21 +0000</pubDate>
      <link>https://dev.to/ayybbbt/companies-like-dataannotationtech-mercor-3mko</link>
      <guid>https://dev.to/ayybbbt/companies-like-dataannotationtech-mercor-3mko</guid>
      <description>&lt;p&gt;I've been watching the explosion of companies hiring AI trainers. What started with Data Annotation Tech has turned into an entire ecosystem. Students, freelancers, and remote workers are all chasing these gigs that pay $15-30 an hour for training AI models.&lt;/p&gt;

&lt;p&gt;The market is flooded now. Here's the complete list of what I'm seeing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Complete List of AI Training Companies
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Rise Data Labs: New player, catching up&lt;/li&gt;
&lt;li&gt;Scale AI: Over 100 trainer positions, infrastructure leader&lt;/li&gt;
&lt;li&gt;Outlier: Up to $30/hour for coding, quick onboarding, weekly pay&lt;/li&gt;
&lt;li&gt;Stellar AI: $25 minimum rate, PayPal payments&lt;/li&gt;
&lt;li&gt;Data Annotation Tech: The original, consistent work flow&lt;/li&gt;
&lt;li&gt;Mercor: Recruiting for OpenAI Expert Model Trainers&lt;/li&gt;
&lt;li&gt;Invisible Technologies: Domain experts (workplace issues reported)&lt;/li&gt;
&lt;li&gt;Alignerr: Similar work to DA, decent pay&lt;/li&gt;
&lt;li&gt;SuperAnnotate: Data labeling and AI training&lt;/li&gt;
&lt;li&gt;Micro1: Emerging in the space&lt;/li&gt;
&lt;li&gt;Handshake: Expanding AI training division&lt;/li&gt;
&lt;li&gt;Appen: Global platform, various AI projects&lt;/li&gt;
&lt;li&gt;Remotasks (Scale AI subsidiary): Overflow work&lt;/li&gt;
&lt;li&gt;TELUS International: AI Rater positions&lt;/li&gt;
&lt;li&gt;OneForma: WFH AI training roles&lt;/li&gt;
&lt;li&gt;Clickworker: Microtasks and AI training&lt;/li&gt;
&lt;li&gt;TaskUs: Customer service + AI training&lt;/li&gt;
&lt;li&gt;Labelbox: Data labeling focus&lt;/li&gt;
&lt;li&gt;Amazon Mechanical Turk: Crowdsourced AI tasks&lt;/li&gt;
&lt;li&gt;WeLocalize: Localization + AI training&lt;/li&gt;
&lt;li&gt;Babel.Audio: Voice recording for AI (sells voice rights)&lt;/li&gt;
&lt;li&gt;Prolific: Research studies, some AI work&lt;/li&gt;
&lt;li&gt;Cloud Connect: Adding more AI studies&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What These AI Training Companies Actually Do
&lt;/h2&gt;

&lt;p&gt;They're all middlemen. AI labs need training data and human feedback but don't want to hire thousands of contractors directly. These companies handle the logistics, screening, and payments.&lt;/p&gt;

&lt;p&gt;You evaluate model outputs, write training examples, rank responses, or fix code. The work is repetitive but requires domain knowledge. If you can code, you get the higher-paying projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  What It’s Really Like
&lt;/h2&gt;

&lt;p&gt;Most of these companies have the same problems. Work comes in waves, then disappears for weeks. Pay is decent but inconsistent. Getting accepted is getting harder as they have enough people.&lt;/p&gt;

&lt;p&gt;Outlier rejects people with math degrees for failing their math tests. Stellar AI isn't really hiring despite keeping applications open. Invisible laid off entire teams when their project manager got arrested.&lt;/p&gt;

&lt;h2&gt;
  
  
  Which Ones Are Worth It
&lt;/h2&gt;

&lt;p&gt;From what I'm seeing in forums:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Best for beginners&lt;/strong&gt;: Outlier, Mercor&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Best pay&lt;/strong&gt;: Stellar AI (if you can get in), coding work on Outlier&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Most consistent work&lt;/strong&gt;: Rise Data Labs, Scale AI, Data Annotation Tech&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Red flags: Companies asking to send you equipment or checks upfront. Anything that sounds too good to be true probably is.&lt;/p&gt;

&lt;h2&gt;
  
  
  Proceed with caution
&lt;/h2&gt;

&lt;p&gt;This entire ecosystem exists because AI training needs human judgment at scale. But the endgame is reducing that human dependency. These companies are building themselves out of their current business model.&lt;/p&gt;

&lt;p&gt;The smart ones know this. They're positioning themselves as AI training infrastructure rather than just human labor platforms. The ones that don't adapt will disappear when the demand for manual training drops.&lt;/p&gt;

&lt;p&gt;If you're doing this work, treat it as temporary income while building other skills. The AI training gold rush is real money right now, but it won't last forever.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>rlhf</category>
      <category>rl</category>
    </item>
    <item>
      <title>Thoughts from fellow vibe coders?</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Sat, 13 Sep 2025 18:38:02 +0000</pubDate>
      <link>https://dev.to/ayybbbt/-3c9o</link>
      <guid>https://dev.to/ayybbbt/-3c9o</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/ayybbbt" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2461175%2Ff4b5695b-ba4b-4507-a8ab-3d2f8109ab88.jpg" alt="ayybbbt"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/ayybbbt/hiring-swes-ai-trainers-wont-last-4ipf" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Hiring SWEs AI Trainers Won't Last&lt;/h2&gt;
      &lt;h3&gt;Job ・ Sep 13&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#openai&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#rlhf&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>openai</category>
      <category>rlhf</category>
    </item>
    <item>
      <title>Hiring SWEs AI Trainers Won't Last</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Sat, 13 Sep 2025 18:09:52 +0000</pubDate>
      <link>https://dev.to/ayybbbt/hiring-swes-ai-trainers-wont-last-4ipf</link>
      <guid>https://dev.to/ayybbbt/hiring-swes-ai-trainers-wont-last-4ipf</guid>
      <description>&lt;p&gt;Companies are desperately hiring "SWE AI Trainers." Mercor is recruiting for most frontier AI Labs. Invisible wants experts for AI training roles. Scale AI has over 100 trainer positions open. New players like &lt;a href="https://risedatalabs.com/" rel="noopener noreferrer"&gt;Rise Data Labs&lt;/a&gt;, &lt;a href="https://www.micro1.ai/" rel="noopener noreferrer"&gt;Micro1&lt;/a&gt;, and &lt;a href="https://joinhandshake.com/expert-ai" rel="noopener noreferrer"&gt;Handshake&lt;/a&gt; are catching up.&lt;/p&gt;

&lt;p&gt;And I think this won't last.&lt;/p&gt;

&lt;p&gt;AI labs need domain experts who can spot what generalist trainers miss. When Claude suggests code that compiles but has a memory leak, you want someone who's debugged production crashes reviewing that output.&lt;/p&gt;

&lt;p&gt;These trainers write examples, evaluate outputs, fine-tune reward models. It's RLHF but with actual engineering expertise.&lt;/p&gt;

&lt;p&gt;That’s the short-term fix.&lt;/p&gt;

&lt;p&gt;Because every time I use Cursor or Claude to code, I’m already:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Evaluating the AI's suggestion (accept/modify/reject)&lt;/li&gt;
&lt;li&gt;Generating training data through my interactions&lt;/li&gt;
&lt;li&gt;Working naturally, not performing artificial tasks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm essentially a distributed evaluator every time I code with AI. So is every other developer using these tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  Users Are Already Trainers
&lt;/h2&gt;

&lt;p&gt;Traditional AI training pays specialists to create evals and examples. But coding AI gets this for free. When I reject a suggestion, modify it, or build on it, that's a training signal.&lt;/p&gt;

&lt;p&gt;My debugging sessions, refactoring choices, and architectural decisions are exactly what AI labs pay SWE trainers to demonstrate manually.&lt;/p&gt;

&lt;h2&gt;
  
  
  Data &amp;gt; Compute
&lt;/h2&gt;

&lt;p&gt;The industry shifted from compute-limited to data-limited. Coding assistants sitting on millions of real developer interactions have something AI labs can't easily replicate.&lt;/p&gt;

&lt;p&gt;I think coding assistants and agents will stop relying on foundation models and train their own specialized ones. Cursor with their IDE, and Replit with their development environment all sit on massive datasets of real developer interactions.&lt;/p&gt;

&lt;p&gt;Why pay for general capabilities when you have domain-specific interaction data?&lt;/p&gt;

&lt;p&gt;The feedback loop compounds: better models get more users, more users generate better training data, better training data creates better models.&lt;/p&gt;

&lt;p&gt;As AI labs launch their own code agents, Cursor's next move should be building their own subject-specific LLMs.&lt;/p&gt;

&lt;p&gt;They have the data. Why keep paying for foundation models when you can train specialized ones that understand your users' exact workflows?&lt;/p&gt;

&lt;h2&gt;
  
  
  SWE AI Trainers future
&lt;/h2&gt;

&lt;p&gt;The current SWE trainer hiring is bootstrapping. Once these tools have enough user data, the manual training becomes redundant. The specialized knowledge gets captured through millions of real developer interactions.&lt;/p&gt;

&lt;p&gt;Coding assistants will train their own models on user interaction data. This becomes their primary advantage against AI labs entering the space. It's also more efficient than paying for general compute and fine-tuning.&lt;/p&gt;

&lt;p&gt;This pattern will repeat in other expert-heavy domains where AI integrates into workflows. Anywhere natural human-in-the-loop feedback exists, specialized trainers are temporary.&lt;/p&gt;

&lt;p&gt;The current hiring trendfor SWE AI trainers is real money, but it's a bridge to something else.&lt;/p&gt;

</description>
      <category>openai</category>
      <category>rlhf</category>
      <category>career</category>
      <category>ai</category>
    </item>
    <item>
      <title>AI Color Palette Generator</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Tue, 26 Nov 2024 01:09:15 +0000</pubDate>
      <link>https://dev.to/ayybbbt/ai-color-palette-generator-5fl5</link>
      <guid>https://dev.to/ayybbbt/ai-color-palette-generator-5fl5</guid>
      <description>&lt;p&gt;After weeks fine-tuning, my AI color palette generator is finally live. For those who've seen my previous posts about this project - yes, it's that one!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it does:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Feed it any description, and it spits out a color palette. Simple as that. Want colors for a "retro terminal interface" or "cyberpunk dashboard"? The AI's got you covered.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Some nerdy prompts to try:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Matrix-inspired terminal"&lt;/li&gt;
&lt;li&gt;"Synthwave code editor"&lt;/li&gt;
&lt;li&gt;"Minimal dark mode UI"&lt;/li&gt;
&lt;li&gt;"Futuristic OS interface"&lt;/li&gt;
&lt;li&gt;"8-bit gaming vibes"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Check it out: &lt;a href="https://colorify.rocks/" rel="noopener noreferrer"&gt;colorify.rocks&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In the pipeline&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CSS/SCSS export (because who wants to copy/paste hex codes?)&lt;/li&gt;
&lt;li&gt;Tailwind config generation (yes, really!)&lt;/li&gt;
&lt;li&gt;API access&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Tech stack&lt;/strong&gt;: Laravel, Tailwind, Livewire, Alpine.js, OpenAI.&lt;/p&gt;

&lt;p&gt;What would make this actually useful in your dev workflow? Need specific framework support? Particular export formats? &lt;/p&gt;

</description>
      <category>ai</category>
      <category>openai</category>
      <category>laravel</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Discovered - currently not indexed</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Tue, 26 Nov 2024 00:30:11 +0000</pubDate>
      <link>https://dev.to/ayybbbt/discovered-currently-not-indexed-18o0</link>
      <guid>https://dev.to/ayybbbt/discovered-currently-not-indexed-18o0</guid>
      <description>&lt;p&gt;It’s been two days since I implemented my optimized &lt;a href="https://dev.to/ayybbbt/color-theory-playing-with-colors-programmatically-h96"&gt;sitemap strategy for Colorify.Rocks&lt;/a&gt;, prioritizing Design-like colors out of the 16 million possible pages. While Google has noticed the sitemap, most pages are still showing the status: "Discovered – currently not indexed."&lt;/p&gt;

&lt;h2&gt;
  
  
  Understanding "Discovered – Currently Not Indexed"
&lt;/h2&gt;

&lt;p&gt;According to Google, this status means that the page was found but not yet crawled. Google explains this as follows:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The page was found by Google, but not crawled yet. Typically, Google wanted to crawl the URL but this was expected to overload the site; therefore Google rescheduled the crawl. This is why the last crawl date is empty on the report.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  My Take on Google's Explanation
&lt;/h2&gt;

&lt;p&gt;While Google's statement suggests that the delay is about protecting your server from overload, I believe that’s not the full story. Yes, Google is concerned about your site’s capacity, but there’s a bigger picture at play: Google’s own crawl budget.&lt;/p&gt;

&lt;p&gt;Crawling billions of websites is an expensive process. Even though crawling my pages wouldn’t have a significant impact on Google’s resources, they have to carefully allocate their crawl budget to prioritize content that they believe adds the most value to users.&lt;/p&gt;

&lt;h2&gt;
  
  
  Here’s my perspective:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Short-Term Delay: If this status appears for a few days, it’s usually fine and part of the normal crawling process.&lt;/li&gt;
&lt;li&gt;Long-Term Issue: If the status persists, it may indicate that Google doesn’t currently view the page as valuable or worth prioritizing. That’s when action is needed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;How to Show Google That Your Page Should Be Crawled&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you’re in this situation and want to encourage Google to prioritize crawling certain pages, here are some steps to take:&lt;/p&gt;

&lt;p&gt;Eliminate Orphan Pages: Ensure the page isn’t isolated. Add internal links to it from other pages on your site.&lt;/p&gt;

&lt;p&gt;If it’s a high-priority page, link to it from your most authoritative pages—those already getting strong attention from Google.&lt;/p&gt;

&lt;p&gt;Submit the Page to Google: Use the URL Inspection Tool in Google Search Console to request indexing for individual pages.&lt;/p&gt;

&lt;p&gt;This adds the page to Google’s priority crawl queue, giving it a higher chance of being crawled sooner.&lt;/p&gt;

&lt;p&gt;Note: You can only submit 10–15 pages per day, so focus on your most important ones.&lt;/p&gt;

&lt;p&gt;Enhance Internal Link Strategy: Use descriptive anchor text for links pointing to the page. This helps Google understand its relevance and topic.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Focus on Internal Links First?
&lt;/h2&gt;

&lt;p&gt;There are many off-page SEO techniques that can help drive attention to your pages. However, from a purely technical SEO perspective, internal linking and direct submission are two of the fastest, most actionable ways to signal a page's importance to Google.&lt;/p&gt;

&lt;p&gt;If you’re seeing “Discovered – currently not indexed,” don’t panic. Use this as an opportunity to refine your internal linking strategy, request indexing for critical pages, and monitor how Google’s crawling evolves.&lt;/p&gt;

&lt;p&gt;Remember, it’s a process that takes time. By combining these techniques with consistent monitoring in Google Search Console, you can help Google recognize the value of your content and encourage faster indexing. I’ll continue sharing updates as I gather more insights!&lt;/p&gt;

</description>
      <category>indexing</category>
      <category>google</category>
      <category>seo</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Color Theory: Playing with Colors Programmatically</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Sat, 23 Nov 2024 18:55:46 +0000</pubDate>
      <link>https://dev.to/ayybbbt/color-theory-playing-with-colors-programmatically-h96</link>
      <guid>https://dev.to/ayybbbt/color-theory-playing-with-colors-programmatically-h96</guid>
      <description>&lt;p&gt;When I first started building Colorify Rocks, my color palette website, I had no idea how deep the rabbit hole of programmatic color manipulation would go. What started as a simple "let me build a color picker" project turned into a fascinating journey through color theory, mathematical color spaces, and accessibility considerations. Today, I want to share what I learned while building this tool, along with some Python code that might help you in your own color adventures.&lt;/p&gt;

&lt;h2&gt;
  
  
  It's Just Colors, How Hard Can It Be?
&lt;/h2&gt;

&lt;p&gt;Oh, past me. How naive you were! My journey started with a simple goal: build a website where people could generate and save color palettes. Easy, right? Just grab a hex code and... wait, what's HSL? And why do we need RGB? And what in the world is CMYK?&lt;/p&gt;

&lt;p&gt;Want to see what I'm talking about? Check out our &lt;a href="https://colorify.rocks/color/3b49df" rel="noopener noreferrer"&gt;color analysis for #3B49DF&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's the first piece of code I wrote to handle color conversions, which now makes me chuckle at its simplicity:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;__init__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;hex_code&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;hex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;hex_code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;lstrip&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;#&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="c1"&gt;# Past me: "This is probably all I need!"
&lt;/span&gt;    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;to_rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="c1"&gt;# My first "aha!" moment with color spaces
&lt;/span&gt;        &lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;hex&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="n"&gt;g&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;hex&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;hex&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;rgb(&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;,&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;,&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;)&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Everything is Math
&lt;/h2&gt;

&lt;p&gt;Then came the moment I realized that colors are basically just math in disguise. Converting between color spaces meant diving into algorithms I hadn't touched since high school. Here's what the code evolved into&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;_rgb_to_hsl&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="c1"&gt;# This was my "mind-blown" moment
&lt;/span&gt;    &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;255&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;r&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;g&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;b&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])]&lt;/span&gt;
    &lt;span class="n"&gt;cmax&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cmin&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nf"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;cmax&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;cmin&lt;/span&gt;
    &lt;span class="c1"&gt;# The math that made me question everything I knew about colors
&lt;/span&gt;    &lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;cmax&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(((&lt;/span&gt;&lt;span class="n"&gt;g&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;elif&lt;/span&gt; &lt;span class="n"&gt;cmax&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;g&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;l&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;cmax&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;cmin&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;
    &lt;span class="n"&gt;s&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="n"&gt;delta&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nf"&gt;abs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;h&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;round&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;round&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;s&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;l&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;round&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;l&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Colors Have Relationships
&lt;/h2&gt;

&lt;p&gt;One of the most exciting features I built for Colorify Rocks was the color harmony generator. It turns out colors have relationships with each other, just like musical notes! Here's how I implemented color harmonies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_color_harmonies&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    This is probably my favorite piece of code in the entire project.
    It&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s like playing with a color wheel, but in code!
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
    &lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;hsl&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;h&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;hsl&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;hsl&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;l&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;complementary&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_get_complementary&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;analogous&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_get_analogous&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;triadic&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_get_triadic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;split_complementary&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_get_split_complementary&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;_get_analogous&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="c1"&gt;# The magic numbers that make designers happy
&lt;/span&gt;    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_hsl_to_hex&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;360&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_hsl_to_hex&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_hsl_to_hex&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;360&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Accessibility
&lt;/h2&gt;

&lt;p&gt;The biggest eye-opener came when a user with color blindness submitted feedback. I had completely overlooked accessibility! This led me to implement color blindness simulation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;simulate_color_blindness&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;protanopia&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    This feature wasn&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;t in my original plan, but it became one of
    the most important parts of Colorify Rocks
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
    &lt;span class="n"&gt;matrices&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;protanopia&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;0.567&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.433&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;0.558&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.442&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.242&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.758&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
        &lt;span class="p"&gt;],&lt;/span&gt;
        &lt;span class="c1"&gt;# Added more types after learning about different forms of color blindness
&lt;/span&gt;        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;deuteranopia&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;0.625&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.375&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;0.7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.7&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="c1"&gt;# Matrix multiplication that makes sure everyone can use our color palettes
&lt;/span&gt;    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_apply_color_matrix&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;matrices&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;type&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As Colorify Rocks grew, designers started asking for more features. The big one? Shades and tints of colors. This led to some fun experimentation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_color_variations&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;steps&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    This started as a simple feature request and turned into
    one of our most-used tools
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;shades&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_generate_shades&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;steps&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;tints&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_generate_tints&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;steps&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;tones&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;_generate_tones&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;steps&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>color</category>
      <category>python</category>
    </item>
    <item>
      <title>Large Sitemaps: 16M Pages Challenge</title>
      <dc:creator>Job</dc:creator>
      <pubDate>Wed, 20 Nov 2024 20:43:24 +0000</pubDate>
      <link>https://dev.to/ayybbbt/large-sitemaps-16m-pages-challenge-1k0</link>
      <guid>https://dev.to/ayybbbt/large-sitemaps-16m-pages-challenge-1k0</guid>
      <description>&lt;p&gt;Colorify.Rocks is a project that generates color palettes and provides a page for every HEX color. Each page includes information like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5dlomkeipxaiesqeref.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5dlomkeipxaiesqeref.png" alt="Sitemap" width="586" height="383"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Color Values&lt;/li&gt;
&lt;li&gt;Complementary Colors&lt;/li&gt;
&lt;li&gt;Analogous Colors&lt;/li&gt;
&lt;li&gt;Triadic Colors&lt;/li&gt;
&lt;li&gt;Shades and Tints&lt;/li&gt;
&lt;li&gt;Color Blindness Combinations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With a total of 16 million pages, the challenge is managing such a large number efficiently. While all pages are useful, not all colors are equally important. The goal is to optimize the crawl budget so that search engines focus on the most relevant pages.&lt;/p&gt;

&lt;p&gt;Including all 16 million pages in sitemaps would require over 300 files (since each sitemap can hold up to 50,000 URLs).&lt;/p&gt;

&lt;p&gt;This approach presents two major issues:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Inefficient Crawling: Search engines might waste time crawling less relevant colors.&lt;/li&gt;
&lt;li&gt;Complex Management: Maintaining hundreds of sitemap files is time-consuming and prone to errors.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;An optimized solution was necessary to prioritize important pages while still ensuring the rest remain discoverable.&lt;/p&gt;

&lt;p&gt;By focusing on Material Design-like colors, I prioritized around 25,000 pages representing a diverse and balanced subset of the color spectrum. For example, shades like &lt;a href="https://colorify.rocks/color/f44336" rel="noopener noreferrer"&gt;#F44336&lt;/a&gt; (a vibrant red) highlight the importance of visually impactful colors frequently used in design systems. These carefully selected pages ensure that the sitemap emphasizes relevance without overwhelming search engines.&lt;/p&gt;

&lt;p&gt;Here’s why I didn’t choose other methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web Safe Colors: Only 216 colors, which is far too few for modern use.&lt;/li&gt;
&lt;li&gt;Named CSS Colors: About 16 colors, which doesn’t even begin to cover the spectrum.&lt;/li&gt;
&lt;li&gt;Pure/Near-Pure Colors: Around 2,000 colors, but these miss subtle and popular shades.&lt;/li&gt;
&lt;li&gt;Popular Color Ranges: While ~2.1 million colors cover a broader set, this is still a large number.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25deascyoccolhb543gm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25deascyoccolhb543gm.png" alt="Approaches" width="800" height="515"&gt;&lt;/a&gt;&lt;br&gt;
By using Material Design-like colors, I created a smaller, more manageable sitemap that still represents a diverse range of colors.&lt;/p&gt;

&lt;p&gt;The sitemap doesn’t need to include every page. Each color page links to complementary, analogous, and related colors, allowing search engines to discover the rest of the site naturally.&lt;/p&gt;

&lt;p&gt;This way, the sitemap becomes a prioritization tool rather than a full index. Google can focus on the most important pages first, while still crawling the others over time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Technical Considerations&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Including all pages would create more than 300 sitemaps, which is unnecessary for most projects.&lt;/li&gt;
&lt;li&gt;A smaller sitemap with ~25,000 pages makes it easier for search engines to focus on high-value content.&lt;/li&gt;
&lt;li&gt;Monitoring crawl reports and indexing status helps refine the approach over time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO often requires testing different strategies. This sitemap setup is part of an experiment to see how search engines handle a prioritization-first approach on a large site.&lt;/p&gt;

&lt;p&gt;Over time, I’ll adjust based on how Google indexes and crawls the site. It’s about finding the best way to balance efficiency and discoverability.&lt;/p&gt;

&lt;p&gt;This approach is just the first step, and I’ll keep refining it as I gather more data. If you’ve dealt with similar challenges, I’d love to hear your thoughts!&lt;/p&gt;

</description>
      <category>seo</category>
      <category>sitemap</category>
    </item>
  </channel>
</rss>
