It's coming up to nearly a year now since I took a leap to quit my full-time job (having gotten savings in place) and focus on learning development and get into my first job. I figured 2020 would be a start on a very long road to a serious outlook to this career (where I had only dabbled previously, with projects, and sporadic paid work.

Well, we all know what's happened to 2020, and the job market in the UK has all but dried up; advertised jobs have gone to about less than 1% of what it was before Covid.

So back in March, I've gotten some serious advice to get going on learning, certifications, projects etc. and be job-ready and skilled once recovery starts taking place. I've been learning Data-Structures & Algorithms, Typescript, GraphQL back-end, etc. I'm still pretty flaky with designing, but I'm getting there.

All of this while battling a somewhat depression ( us Brits are notorious for downplaying mental health, but in times like these, you've got to acknowledge it at least. I mean, I just quit an almost sure thing, personal-life stuff etc.)

Last month I built my own website using Typescript, React ( GatsbyJs ) and a GraphQL CMS. In the past two weeks I revisited an older project that I never completed and vastly improved it's functionality while not once referencing the old material.

My Color Contrast App is based on the idea of allowing you to pick your own colors, branding etc. but then being able to plug it into this react app to ensure that the colors align with one-another across the board. This way whether it's light/dark mode or even a multitude of different themes on the site, you know that each color's shade is the same and interchangeable.

I.e. red-100 has the same contrast to white as blue-100, green-100, etc.

This is important as Hex/Rgb is hard to read for contrast, and HSL's L value isn't a good value for contrast as greens are much lighter and blues are much darker regardless of the L value.

The Repo: github
The Live demo: Netlify

The Todos:

• Design a mobile friendly version (Though, this is an edge case)
• Implement Server-Side State with login credentials
• Long-press on editor fields
• Create download file / Copy CSS Custom Variables from State
• Better Tests (I'm still new to testing everything, but I'm getting better)

What I'm stuck on:

I'm not sure the best way is to be able to dynamically create a downloadable file based on state. It's just a text file with a .sketchpalette file extension that will work with the Sketch Palette plugin.

Similarly, to be able to copy the state as CSS Custom Variables I've read somewhere I would need to populate a textfield with the state output, and copy from that rather than directly from a function?

I'm still new to testing, having only really worked on my website with tests and then this one too. I'm at about 95% coverage which I'm happy about as it covers as the User would interact rather than implementation, however, if anyone can point out major potholes I've missed, please, let me know! I'd love to be able to improve!

Other than that, if you have any comments on the project and other feedback, please, let me know! I'm kind of working in a bubble right now and explaining these projects to a non-tech family member, or a 5-month old puppy can be a bit one-way.