search

gitcoinco / skunkworks

experimental laboratory
63 stars 35 forks source link

Add dark mode to vitalik.ca #273

Closed owocki closed 2 years ago

owocki commented 2 years ago

Vitalik has offered 1 eth to make a PR to https://github.com/vbuterin/blogmaker and https://github.com/vbuterin/blog to add proper dark mode.

Requirements:

How to submit:

  1. Apply on Gitcoin. Please list past front end work you've done in the application.
  2. DO NOT START WORK BEFORE YOU ARE APPROVED. YOU RISK NOT BEING PAID IF YOU DO SO.
  3. Once I approve you, you may start work.
  4. Submit a PR back to Vitaliks repo, and post a comment on this thread with screenshots of how dark mode looks on Vitaliks site.
  5. I will review submissions for sanity + make a recommendation back to Vitalik
  6. If Vitalik + I agree, your bounty will be paid out.
gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 1.0 ETH (1083.66 USD @ $1083.66/ETH) attached to it.

vivaco2 commented 2 years ago

Thanks

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Workers have applied to start work.

These users each claimed they can complete the work by 1 day, 2 hours from now. Please review their action plans below:

1) l2ig has applied to start work _(Funders only: approve worker | reject worker)_.

Add dark mode with the least amount of additions 2) codedbyjordan has applied to start work _(Funders only: approve worker | reject worker)_.

I am a long term blog writter and familiar with various blog framwork and plugin including hexo, wordpress, etcs. And recently added a dark mode to w3itch.io. I am also a subscriber to vitalik's blog and this will ensure that the final layout can be read comfortably in dark mode as well as aligh with current css style. 4) vivaco2 has applied to start work _(Funders only: approve worker | reject worker)_.

Thanks for the opportunity.i want this eth very much. 5) ronm has applied to start work _(Funders only: approve worker | reject worker)_.

Leveraging prefers-color-scheme media detection is CSS and through the use of a few CSS custom properties this can be achieved very straight forward with minimal additions to existing codebase. 6) unreleased has applied to start work _(Funders only: approve worker | reject worker)_.

Work Plan

Would be really cool to say I did some work for Vitalik!

Could do this with beautiful code in less than 2 hours with a toggle. 10yr web experience

Twitter: @unreleased Email: hello@conorre.id

Some Work: https://rapidtags.io/ https://notify.express/ new rapidtags (unreleased): https://twitter.com/RapidTagsIO/status/1446815108261371904 7) othernamesweretaken has applied to start work _(Funders only: approve worker | reject worker)_.

I can deliver extremely fast. I have worked with JS and CSS 8) twirlingtechgoddess has applied to start work _(Funders only: approve worker | reject worker)_.

Contribute a small addition to the single python file in blogmaker, while maintaining the simplicity of the project structure.

Make sure all the images on vitalik.ca posts look good in dark mode. If they do not, make some edit so they do. 9) daslanis has applied to start work _(Funders only: approve worker | reject worker)_.

Change the background to dark grey, add a button for on-off and fix the image border or background accordingly! 10) xyingsoft has applied to start work _(Funders only: approve worker | reject worker)_.

I am interested on this simple task. 11) 0xcadams has applied to start work _(Funders only: approve worker | reject worker)_.

Past Frontend Work:

I've worked with a lot of CSS, mostly using frameworks like React w/ Tailwind and CSS-in-JS libraries. I'm very comfortable with HTML/CSS under the hood.

See more here (https://github.com/0xcadams). 12) racherin has applied to start work _(Funders only: approve worker | reject worker)_.

I'll add a simple switch button at the top. After that, I will implement the dark mode by paying attention to the texts and other color changes in the blog posts and main page. 13) reuixiy has applied to start work _(Funders only: approve worker | reject worker)_.

Steps:

  1. Go through colors and change them to CSS variable then use media query to match system preference
  2. Add a toggle?
  3. Go through all the images One of my projects: https://github.com/reuixiy/hugo-theme-meme 14) wottpal has applied to start work _(Funders only: approve worker | reject worker)_.

i have several years of professional frontend experience, e.g. i just recently did stablecoins.wtf (which is a very dark experience). 15) nicoland00 has applied to start work _(Funders only: approve worker | reject worker)_.

Add a button with javascript which will function as a switch in the css of vitalik.ca.
I would add new darker colors to the background making it darker blue where its white and white/light grey where its dark (letters), even giving it a little orange in the dates. 16) gitcoincode has applied to start work _(Funders only: approve worker | reject worker)_.

Easy-pesy, let me do it for you 17) robbelouwet has applied to start work _(Funders only: approve worker | reject worker)_.

Hi,

My name is Robbe, and I'm in my last year of my master's degree in computer science, i study cryptography at KU Leuven, Belgium. I have more than enough experience from past jobs, have done work in front-end, back-end, azure cloud devops, and of course blockchain and cryptography.

I would be more than happy to venture into the depths and take upon me this extremely difficult, near-impossible task. Also, I need to pay of my student dorm room. Also, I'm free the coming 2 weeks, so will work until it is finished. 18) efstajas has applied to start work _(Funders only: approve worker | reject worker)_.

Hey there 👋 I'm Jason from Berlin, a Full-Stack Engineer and Product Designer.

My personal website at https://jason-e.dev/ has dark mode — not just that, each of the project pages has its own distinct dark mode theme! All the images are optimised to work in light & dark mode too.

I'm currently working for Radicle.xyz on a new frontend application that also has dark mode, and at my previous job at Grover.com, I came up with the global color system and theming solution for a unified dark mode across all our applications.

Some of my frontend work:

To add dark mode to blogmaker, I'd go for a pure CSS solution with a media query to re-color the page's elements depending on the user's system color theme. If an on-site theme picker is desired, I'd add a simple script to remove or add a dark mode class at the root of the document tree, which would come with the necessary color overrides. For the images, I'd add a pretty white border with some padding in order to avoid having to serve up different assets depending on the theme.

Cheers ✌️

Jason 19) kepano has applied to start work _(Funders only: approve worker | reject worker)_.

Migrate colors to CSS variables that can respond to the user's color-scheme preference, and via a button displayed in the header. In addition add helper classes for allowing certain images such as diagrams to be automatically inverted where applicable.

Examples of related work I have done on implementing dark modes: https://github.com/kepano/obsidian-system-dark-mode https://github.com/kepano/obsidian-minimal https://minimal.guide https://minimal.guide/Block+types/Images 20) brunocroh has applied to start work _(Funders only: approve worker | reject worker)_.

Happy to see Vitalik here! Gitcoin is amazing!

Links of my past work with frontend above!

I have 7 years of experience with frontend (HTML, CSS, and A LOT of javascript). I'm a community leader of the Frontend community from Goiânia, Brazil, and tweet educational posts about frontend on Twitter in PT-BR (https://twitter.com/brunocroh)

you can see my current website, done in about 2/3 hours. https://brunocroh.com (Github: https://github.com/brunocroh/blog)

And my current job https://tc.com.br (Web and Mobile)

Here you can see PR of my last contribution on Gitcoin (https://github.com/Crystal-Ball-ZG/nft-discord-bot/pull/3)

I can do this job in a simple and fast way! I would be happy to make my first contribution to the Ethereum community!

Thank you for your time @owocki and @vbuterin! 21) deivitto has applied to start work _(Funders only: approve worker | reject worker)_.

Create some styles on dark scheme mode following the style in vitalik.ca light mode Add the css they need to every page Never use exactly #FFF white color for fonts in dark mode Go across all the pages in manual analysis and check if everything looks good, if not, add the selector if already is easy to access to the elements (what it looks like) or add a class style to the structure page with the proper css. Every css code would try to be applied to the most elements as possible in a modular way to reduce the code length Check if everything is all right by myself looking for the maximum coverage of the pages and then send to revision. Wait until an answer Talk about any possible correction it's suggested: think about it, argue if there's a more efficient way to do the suggestion, implement it, check everything in the scope again ??? Profit for everyone! 22) fbuervenich has applied to start work _(Funders only: approve worker | reject worker)_.

I am a full stack engineer with several years of proven experience in several different technologies (https://github.com/FBuervenich).

I would implement the dark mode

Some previous frontend work with dark mode: https://date-picker-svelte.kasper.space https://kadium.kasper.space https://kasper.space https://github.com/probablykasper/ferrum

  1. Choose dark mode color scheme.
  2. Get confirmation from Vitalik that he's happy with it.
  3. Add a toggle button to change between light and dark mode. The toggle button will be similar to the one presented here unless there is a request for a different style of button: https://overreacted.io/
  4. Set the default dark mode to the system color preferences. 25) soptq has applied to start work _(Funders only: approve worker | reject worker)_.

I have experiences in adding dark mode engine to my personal website soptq.me, and I wrote a blog about it at https://soptq.me/2019/09/16/dark-mode/ (in Chinese). Consequently, I believe I can complete this task with minimal addition to the original codebase. 26) snayyar00 has applied to start work _(Funders only: approve worker | reject worker)_.

A simple toggle for switching it to dark mode using Python script and css. Leveraging prefered-color-scheme media detection in CSS/Python for the images to make sure they look good in dark mode. Making sure they have proper contrast within background and image. Previous experience as fullstack developer working on 100+ websites. 27) prabhchintan has applied to start work _(Funders only: approve worker | reject worker)_.

I have deployed dark mode on my website (prabrandhawa.com) where it matches the device settings of the user (on both desktop and mobile). I plan to do the same to vitalik.ca!

This will also serve as an excuse to read all of Vitalik's posts, something I have told myself I should do but have only managed to skim half a dozen so far.

PS: I should mention that I am not a professional programmer, but rather closer to a hacker that is confident he can put this together. 28) fionnachan has applied to start work _(Funders only: approve worker | reject worker)_.

Work plan: I'll extract all the style colors into CSS variables at :root. I'll add a single .js file for handling the toggle action of the light/dark mode button. By default styles will be in light mode. When the user toggles it to dark mode, #doc div will get a class name called .dark-mode, and for .dark-mode, the CSS variables are all set to the dark mode set of colors. If anything in existing posts are not accessible / not look good in dark mode, I'll add a background color and a border to the wrapper. If it doesn't look good still, I'll perhaps go with a CSS filter solution. Additionally, the default mode for users will be stored in the browser's local storage to ensure it works across the site and for future visits.

Past frontend work: all frontend & design work are done by me in this project: https://github.com/Cezar-X/cezarx codepens: https://codepen.io/fionnachan/ 29) reincha has applied to start work _(Funders only: approve worker | reject worker)_.

Following your requirements, complete what someone had already started. from publish.py:

latest work : http://edgesforledges.com/watchlists/binance, no dark mode though 🙈

thanks! 30) nftboi has applied to start work _(Funders only: approve worker | reject worker)_.

Past work:

https://market.theheroes.app https://synthopia.io https://pxg.wtf/ https://www.audioglyphs.io/ https://www.pixelglyphs.io/

Github: https://github.com/nftboi/ 31) maxdavidwow has applied to start work _(Funders only: approve worker | reject worker)_.

Moon/Sun toggle + prefers-color-scheme + localStorage entry 32) spacecowb0y has applied to start work _(Funders only: approve worker | reject worker)_.

I'm ready to fix Vitalik's html markup and and dark mode to it. 33) costakamby has applied to start work _(Funders only: approve worker | reject worker)_.

no frontend work, I’m a backend developer. How hard can it be? applying cuz gitcoin seems cool (and i dont mind going through the blogs :) ) 34) noahdotms has applied to start work _(Funders only: approve worker | reject worker)_.

Hi vitalik :) I am a web3 front end developer and would love to help you out with this :D I have developed some open source front end things and a game on Optimism! 35) ify01 has applied to start work _(Funders only: approve worker | reject worker)_.

I will create a perfect dark mode design for this project 36) il3ven has applied to start work _(Funders only: approve worker | reject worker)_.

I understand that Vitalik uses .css files from HackMd. They are the source for all the styles. The posts themselves are pure HTML. I intend to replace all colors with CSS variables. The value of these variables can be changed on the click of a button.

I am already familiar with Vitalik's blog. I previously forked it to add a new feature. https://github.com/il3ven/blogmaker-github-actions

I will take care of the following points and all the requirements mentioned in the bounty:

I have plenty past experience of web development including my contributions to the ethereum.org website. Check out my GitHub at https://github.com/il3ven. 37) jsongerber has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, I’m a Swiss developer and have 10 years of experience in website design and development, in communication agencies and now as a freelance. The devil is in the details, as i like to approach design. Some website I made: Crypto: https://theresidency.io/ Real estate: https://appt.ch/ Associative: - https://cartapulse.ch/ 38) nattwasm has applied to start work _(Funders only: approve worker | reject worker)_.

ACTION PLAN Techniques from easiest to hardest to add toggle dark mode:

  1. Use filter: invert(100%) with toggle theme button
  2. Use Radix Colors or an other color system a. JS that checks dark/light/auto from system preference
    b. toggle button
  3. Generate custom colors (Primer) and show theme a. Generate colors and have variables on Figma and CSS variables b. JS that checks dark/light/auto from system preference
    c. toggle button

Potential color/design tools: https://primer.style/prism https://www.radix-ui.com/colors https://figma.com

Example: https://natt.xyz

Qualifications: Former Web Engineering at Adobe and currently Design Engineer at nfty chat (Web3 messaging) 39) developer-piyush has applied to start work _(Funders only: approve worker | reject worker)_.

In past i have worked on many bounties related to gitcoin.

Work Exp: One of the task involves, decentralization of Quadraticlands which is currently maintained by me and live at http://decentralized.quadraticlands.com/

I will be implementing Dark Mode to a given website with a toggle on/off button functionality and after it is done, i will follow the steps to submit the task i.e by making the PR to official github and submitting video proof here.

Thank you 40) carlfairclough has applied to start work _(Funders only: approve worker | reject worker)_.

  1. clone blogmaker and blog
  2. apply a css media query to listen for the user's dark-mode preferences
  3. apply a default, lightweight dark-mode colour theme to the css (< 10 lines, perhaps just 2 styles would suffice)
  4. Search for inlined colour styles in blog and apply updates as necessary. It may be necessary to abstract these inlined styles into classes. It seems they are applied fairly consistently, so the previous media query can be used to toggle colours and thus make things even more lightweight.
  5. Review images so that alternate versions can be created if necessary for dark-mode. CSS inversion would work, however browser support isn't amazing and so wrapping these and applying a dark-mode toggle may be necessary.
  6. Open PR with screenshots of simple posts, posts with inlined styles, and posts with images.

Note: this does not accommodate a manual dark-mode toggle, however this could be included with a small amount of additional code—as this involves introducing an addition to the markup, I'd prefer to avoid it.

Learn more on the Gitcoin Issue Details page.

drewcook commented 2 years ago

Hey @owocki - I applied on Gitcoin. I forgot to post any past work, but I've got ample amounts on my Github.

https://dco.dev/work is probably the best one stop shop. https://polyecho.xyz is another related to music NFTs.

Cheers and hoping for the consideration, would be fun.

owocki commented 2 years ago

from vitalik:

Answers to people's questions:

owocki commented 2 years ago

i'm sure you all saw it yesterday but vitalik blogged about this bounty :) https://twitter.com/VitalikButerin/status/1547603783202377731

thanks everyone for the applications! there are sooooo many good ones it was really hard to choose 1 person to move forward. i would have chosen multiple people but i didnt want to encourage spec work and i didnt want multiple submissions when vitalik has only offered 1 ETH for 1 coder here. (perhaps next time we could chunk the prize and have 5 submissions paid, the top one gets 0.5 ETH, next gets 0.25 ETH, 0.1 ETH and so on..)

anyway, i ended up selecting @drewcook because his github is full of contributions to open source + he was one of the first applicants. i am open to feedback on my selection mechanism, perhaps there is a more egaliatarian way to choose a worker next time Vitalik or some other A list person/program wants to the use the platform

@drewcook let us know what your plan to turn this around is by monday morning please :). this is a big moment for the gitcoin community to have vitalik putting work on platform, so i hope you'll meet the moment! if you cannot make it work, please let us know also by monday morning.

drewcook commented 2 years ago

@owocki Wow, what an honor to be chosen to contribute in this manner! Thank you for the consideration!

I will be spending this weekend looking into the blog repositories and going over in detail how things are set up within them.

My initial thought is to use CSS variables with a toggle switch to map the CSS variable to their respective value sets. There will be one set for the original values in light mode and a different set for dark mode. The native HTML elements will inherit these CSS variables rather than the original hardcoded values.

This acts as non-intrusive way of overriding the styles with the flip of switch, and it should result in minimal interference with other aspects of the codebase. The toggle switch will likely be located in either the top right or top left corner of the page, but I'm open to suggestions here on visual styles/placement from Vitalik. The idea is to keep it simple and out of the way.

Here's a quick codepen highlighting the underlying methodology. The values used here are arbitrary, and the button/JS is rudimentary just to convey the PoC. However, the final deliverable will be very similar. https://codepen.io/drewcook/pen/XWENzjx

One further enhancement to this is going to be remembering what the user's choice for light/dark mode is, so that it is persisted over their session and remembered when they revisit. I'll implement this by storing a value in localStorage, similar to how we do for preferred wallet selections in dApps.

I'll post back with more details after vetting the codebase.

unreleased commented 2 years ago

Hi Drew,

For user experience I also recommend using the appropriate media queries to detect the users preferred default style.

/* Light mode @.*** (prefers-color-scheme: light) { body { background-color: white; color: black; } }

Please see attached, more information is available here: @.***/prefers-color-scheme

On Fri, 15 Jul 2022 at 14:20, Drew Cook @.***> wrote:

@owocki https://github.com/owocki Wow, what an honor to be chosen to contribute in this manner! Thank you for the consideration!

I will be spending this afternoon looking into the blog repositories and going over in detail how things are set up within them. My initial thought is to use CSS variables with a toggle switch to map the CSS variable to their respective value sets. There will be one set for the original values in light mode and a different set for dark mode. The native HTML elements will inherit these CSS variables rather than the original hardcoded values.

This acts as non-intrusive way of overriding the styles with the flip of switch, and it should result in minimal interference with other aspects of the codebase. The toggle switch will likely be located in either the top right or top left corner of the page, but I'm open to suggestions here on visual styles/placement from Vitalik. The idea is to keep it simple and out of the way.

Here's a quick codepen highlighting the underlying methodology. The values used here are arbitrary, and the button/JS is rudimentary just to convey the PoC. However, the final deliverable will be very similar. https://codepen.io/drewcook/pen/XWENzjx

I'll post back with more details after vetting the codebase, and I'll have this delivered by Monday.

— Reply to this email directly, view it on GitHub https://github.com/gitcoinco/skunkworks/issues/273#issuecomment-1185885582, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIE4Z4MNUMPXCG5G3CGPIGDVUHB2TANCNFSM53ST3IUQ . You are receiving this because you were mentioned.Message ID: @.***>

drewcook commented 2 years ago

@owocki - I've spent some time vetting the codebase this weekend and have determined that my approach above is going to work pretty well. I've got a working version applied to the blog's index page thus far. Here are some further details on how adding in this feature is going to look like throughout the blog's file structure:

For a new global.css stylesheet:

For the index.html page:

For the publish.py file:

Overall, this should create very minimal interference with the rest of the markup and file structure that exists already. That is the underlying approach here, as I don't want to update anything more than what is needed to accomplish this.

Here are a couple screenshots of my local build with the changes outlined above implemented on the blog's index page:

image image

Again, the actual color values can be anything for dark mode, and I'm open to hearing feedback from Vitalik if he would like specific hex values. Also, Enable Dark Mode could likely be named better. Maybe Toggle Dark Mode makes more sense. I'm open to suggestions for this as well.

owocki commented 2 years ago

thanks @drewcook - can you submit a WIP PR back to vitaliks github repo so we can checkout the code? any way you can expose your local build to me/vitalik so we can poke around and preview how the posts look?

drewcook commented 2 years ago

@owocki - I created a WIP PR to show my changes, but I'm having some blocking issues running publish.py posts/* and compiling the markdown files into the proper places. I've added notes in the PR outlining these issues and attached videos showcasing them. I'm following the directions in this readme. I will need some assistance/guidance here I believe.

PR: https://github.com/vbuterin/blog/pull/38

drewcook commented 2 years ago

Updated PR to blogmaker - https://github.com/vbuterin/blogmaker/pull/11

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 1.0 ETH (1898.39 USD @ $1898.39/ETH) has been submitted by:

  1. @drewcook

@owocki please take a look at the submitted work:

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 1.0 ETH (1893.33 USD @ $1893.33/ETH) attached to this issue has been cancelled by the bounty submitter

owocki commented 2 years ago

thanks @drewcook for the great work on this! vitalik paid out off-platform so im closing this out here.