DEV Community

Cover image for Revamp your profile's color scheme!
Rei Allen Ramos
Rei Allen Ramos

Posted on

12 1

Revamp your profile's color scheme!

Hey awesome devs! 👋 As a side-project, I created this app to seamlessly browse color palettes for your account! If that's not your thing, you can also enter a username and scrape their profile to identify which colors they use.

But why?

From a user point-of-view, I feel the color pickers in the profile settings aren't as intuitive as they can be (not all of us are gifted in color theory 😕). However if you have available hex values then good for you!

From a developer point-of-view, this is a part of my journey in learning Python. The frontend was fairly easily done with VueJS, but on the backend side I got to learn about web scraping with BeautifulSoup4. As a bonus, I also learned how to deploy images in Google Cloud Run 🌈!

Code available here.

Shoutout to Michael from yo@dev.to for responding and pointing me to the right direction when using the DEV logo! 👌

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (13)

Collapse
 
rpalo profile image
Ryan Palo

Aww yeah! This is a really neat thing, and a super clean interface :) Thanks for sharing!

My color scheme, light blue and black

Collapse
 
reiallenramos profile image
Rei Allen Ramos • Edited

Thank you! I used Skeleton CSS to create a basic responsive layout.

Collapse
 
pp profile image
Paweł Ludwiczak

This is so cool! I think it would be nice addition to DEV profile. We could even randomize colors for users when they join so they don't end up with generic colors! Probably one thing we could add is picking colors that pass contrast ratio because we use these colors for "Follow" button and others so it's important to keep colors accessible and readable. But I love the idea, it's great!

Collapse
 
reiallenramos profile image
Rei Allen Ramos

Ohhh the contrast ratio bit is very interesting! I never thought about how colors are being used to attract or divert attention. For me it was just about what looks good together. TIL!

Collapse
 
inozex profile image
Tiago Marques

Didn't work for me :/
Can't find my account..
Anyway, good initiative 🙂

Collapse
 
reiallenramos profile image
Rei Allen Ramos • Edited

Looks good from my end. Can you try again?

screenshot

Collapse
 
inozex profile image
Tiago Marques • Edited

It's working now 🙂
But there's a small issue, at least in Edge and Chrome for Android, the submit button doesn't get enabled if I type, only if I paste the text from the clipboard.
In Firefox Night preview for Android it works, but the button still has the disabled style.
(Ps: I'm using Android 7.1, if that might help)

Collapse
 
ben profile image
Ben Halpern

Cool!

Collapse
 
reiallenramos profile image
Rei Allen Ramos

Thanks! It means a lot :D

Collapse
 
michaeltharrington profile image
Michael Tharrington

So dang cool!

https://dev-to-uploads.s3.amazonaws.com/i/ac3mba9aee7o60ykymyi.png

Collapse
 
reiallenramos profile image
Rei Allen Ramos

It worked!! 😊 Thanks a lot!

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Sooo coool!

Collapse
 
reiallenramos profile image
Rei Allen Ramos

Thanks man! 👌

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️