7 ms·
Edison Bulb Night Mode
- cfj 3y agoI like this a lot. I had a similar idea for my own site[0], but I leaned a bit more heavily into the actual cord behavior of the thing. [0] https://svarden.se/post/the-worlds-most-satisfying-toggle https://svarden.se/post/the-worlds-most-satisfying-toggle
- petemilly 3y agoYour lamp is awesome. The little bounce of the cord is really fun
- _nalply 3y agoWhat if there was a real Edison bulb having a night mode? I imagined it having a circuit to dim it during the night, like a night light. For example having a few filaments inside a bulb and switching between parallel for more light and serial for less light. Our home was not well insulated and in a corner of our sleeping room we had condensing moisture (it was unavoidable because in the corner the temperature was way too low,the lowest I had was 9°C or 48°F). I thought about putting some nichrome wire (for example terrarium heating wires) in the corners and having a switch between parallel and serial as a means for two different power levels. The idea is a parallel switch. If you turn the switch, multiple contacts are connected and disconnected. If you connect the wires cleverly, you can switch between parallel and serial. Luckily our landlord found a permanent solution for this problem after I showed him the measurement I made, so I didn't need to build this. So that's why I started to get a picture of an Edison bulb that has such a switch inside its base.
- p1mrx 3y agoIt sounds like you're trying to backport the LED smart bulb to a 19th century platform.
- akoboldfrying 3y agoMaybe that's not needed. Do 19th century light bulbs support docker?
- xattt 3y agoYes, if you can get the sockets and 2° bulbs small enough to fit within the glass envelope of the 1° bulb. Capable bulbs have VT-x (vitrification technology).
- bombcar 3y agoLook up the so called three way bulb. It had two filaments and could have one, the other, or both on.
- adaml_623 3y agoRegarding the local storage Vs server side defaults I don't understand why you wouldn't use a web cookie to store the on/off state? Am I missing something
- speps 3y agoA lot of people have forgotten that cookies aren't just for session id and can store anything. The browser also sends them all in the initial GET request. So yes you're right, it could have been done server-side for the 2nd visit. Also, because of cookie banners, they got a bad reputation even though most countries allow you to store non personal data. Even just data that is necessary for the functionality of the website doesn't need permission.
- globular-toast 3y agoThat requires a dynamic backend, though. A lot of people use static site generators for their blogs these days. Otherwise you're absolutely right and this is a perfect use for a cookie.
- petemilly 3y agoSetting a cookie is a good idea—I honestly just didn't think of it. I created a todo for myself to explore that whenever I can get around to it.
- josephwegner 3y agoReally great article, and the site looks great! One small piece of feedback: > the server-rendered HTML will always default to light mode. This creates a flicker for night owls You might consider switching this - render the dark-mode version by default, and have the flicker be from dark-to-light. For users operating mostly in dark mode, a bright flash of white can be painful. The same is not true for users operating in light mode - they will barely notice a moment of dark.
- theodorejb 3y agoTo avoid a flicker, add <meta name="color-scheme" content="light dark" /> to the <head> tag, and also put the JavaScript code in <head> so it runs before any content is shown.
- petemilly 3y agoAh that's also a good idea. I added a todo for myself to take a stab at this at some point.
- petemilly 3y agoGood call! Updated, thanks for the tip.
- lloydatkinson 3y agoIronically dragging doesn’t work on mobile
- deleted 3y ago[deleted]
- CSSer 3y agoThis looks nice and all, but this doesn’t work on mobile devices due to pull to refresh.
- rcdemski 3y agoI just tap the icon on my phone and get the effect. It’s cute
- TaylorAlexander 3y agoClick works on desktop too, no need to pull.
- batch12 3y agoYeah this got me for a second too. Just touch the bulb instead.
- petemilly 3y agoThanks for pointing this out. I updated it to allow drag/pull on mobile (prevent the pull-to-refresh with CSS `overscroll-behavior: none` on touch events).
- seanosaur 3y agoVery cool! Love the little cord pull. > ...the server-rendered HTML will always default to light mode. This creates a flicker for night owls... I played with this a bit and yes, that flicker is harsh. I appreciate the fade-in, but maybe have the initial color on load be somewhere between light and dark and then fade it to whichever is set by the client.
- petemilly 3y agoThanks! @josephwegner suggested above defaulting to dark, which I did for now.
- dfee 3y agoCute bulb and effect. I like that your dark mode isn’t so harsh, as well. I feel they’re often max contrast, which is the last thing my eyes want to see. This is more of a … solarized?
- p1mrx 3y agoGenerally, pulling down on a light bulb only turns it off once.
- runlevel1 3y agoThat's one classy looking personal page.
- mindhunter 3y agoIf he’d run the dark mode JavaScript in the head and control the style through a css class, it would not flash.
- CGamesPlay 3y agoTwo improvements that could be made: 1. My dark mode preferences change throughout the day. Caching the value in localStorage means that it will require manual updates twice a day. Add a behavior that automatically unsets the localStorage key whenever it would set it to the currently system-preferred value. 2. Apply the override using a CSS class on the body element calculated from a synchronous JavaScript block to avoid the flash.
- petemilly 3y agoThanks, and yeah I was on the fence about #1 (I also like to auto-toggle at night sometimes). My hesitation is that some people might just like one theme better on my website and don't want it to keep resetting based on OS preference. Not sure which case is more common... #2 is a great idea. I made a todo for myself to do that at some point.
- CGamesPlay 3y agoThe nice thing about only storing the value when it's different from the current default and unsetting it otherwise is that anyone who prefers one theme never has to change it (because their system is already in that theme) or only has to change it one time and it will stay that way forever. But users who prefer the site to just Do The Right Thing can also have that behavior.
- eternityforest 3y agoI love the landscape at the bottom of the page! It really gives a sense of the page being a place. I might have to steal that page bottom concept! I've never actually seen it before. The bulb is a really nice detail, and the color schemes are both really nice.
- petemilly 3y agoThanks, and go for it! I'd be interested to see your remix if you end up getting to a landscape/place footer