Reposted by
@kingjamesh
Reposted by
@kingjamesh
6.7b 🤪🤪🤪
6.7b 🤪🤪🤪
Devlog 9: Portfolio View Gallery buttons and information updates
stardance just crashed on me so im writing this again. Its been a month since my last devlog, since then I’ve been super busy and have really just been updating information around the website. I made my view portfolio buttons high contrast and black so they’re more noticable compared to my old green outlined buttons.
The project is almost ready to be shipped, I just have ot add a guide/tutorial upon opening the hardware portfolio so the user knows the renders can be manipulated
Devlog #1: Schematic + started designing PCB
I made my schematic for my hackpad and started designing the PCB on KiCad. It’s going to be a 8 key macropad with a rotary encoder and oled display.
Note: I can’t seem to upload a second screenshot of the start of my PCB design. Routing is killing me though
Devlog 8: Revamp Programming Portfolio
This has kinda been a work in progress for the past week or so but I’ve been busy with exams so I didn’t have a chance to finish it until now. I made some changes to my programming portfolio, mainly with the image sizing. In my old version, all of my app screenshots would be super tall and made scrolling annoying, so I addressed this by capping the height of the imgs. I also updated all of my information again and added (& replaced) some projects in my portfolio.
To do:
- ddd some sort of overlay in eng. portfolio that tells the user that they can move the models around
- deal with the bg particles
- deal with the mouse (maybe)
Devlog 7: Addressing comments + small changes
I started to address some of the comments from my reviewers. So far, I’ve changed my GitHub contribution bar colors to match the actual gh colors instead of the old lighter colors that matched my color scheme. I also updated all of my information to make it more updated.
To do:
- Background dots effect - make it stick to hero so user can just scroll past it, maybe change them so they look less like a dirty screen
- Redo my programming portfolio - looks kinda ugly rn ngl
- Cursor - Someone commented that the trailing circle was a bit annoying, so I’m going to look into other things I can change it
Devlog #3: Extension UI
I finally got to the css styling. I decided on a pretty simple and minimal UI design. I also added a dark mode and a light mode to my extension. It works by toggling a button in the top right. UI is all done!
I also improved my URL handling, so now I don’t have to type in https:// every time. Almost done.
Devlog #2: iFrame + Redirect
I was working on the redirect js and i realized redirect is kinda slow for a new tab page. I did a little research and decided to pivot towards using iFrames. Once I finished this, i realized that some sites like github don’t load inside an iframe. They send an X-Frame-Options or CSP frame-ancestors header and then the browser blocks the embed. However, I found iFrame to be way faster for the websites that it worked on so i decided to implement both.
Detecting blocked sites in iframe
With a little testing, i found that blocked iframes load almost instantly (and throw this in the console: Framing 'https://github.com/' violates the following Content Security Policy directive: "frame-ancestors 'none'". The request has been blocked.). Normal (unblocked) iframes take way longer because they actually have to load the page. I decided to choose which feature to implement based on time. If the site’s loaded under 125 ms, i treat it as a fail and redirect instead of using iframe. If it goes past 800 ms, i also redirect. iFrame works between 125 ms and 800 ms.
Blocked Sites Storage
Once a site fails, I save the url to a blocked list in localStorage and sync it to chrome.storage.local. On the next visit, this list is checked. If the url is already known to fail, i just skip the iFrame attempt completely and just go straight for the redirect
ui looks the same so code ss today
other ss is blocked iframe example
Ship
Devlog #7: Timelapse Video
I wanted to be able to export a video of the long exposure actually building up, so I added an export that renders a short timelapse .mov of the composite building up, ending on the finished exposure. I attached an example of the buildup, I’m still playing around with speed and stuff, it looks kinda ugly rn.
The Build-Up
I built an incremental acumulator on the blend engine that I’m already using for the other features. It holds the min, max, and sum textures, and each step basically folds one new frame forward into them.
Video frame 1 is the blend of just the first source frame, video frame 2 is the blend of the first two, and so on until the last video frame is the full exposure. The last frame stays for about a second before the end. Usually, it ends up being around 4 seconds long.
Writing the File
For the video itself I used AVAssetWriter with H.264. Each output frame resolves the current composite to a CGImage, draws it into a bgra pixel buffer, and appends it. The finished .mov goes to a temp file, then to the share sheet and save to the phone’s photo library.
I now have a lot of different features and settings, and they are taking up most of the app. The long exposure itself looks really small right now, so I need to rework the ui.
Ship
Devlog #2: Custom New Tab v1
I followed the guide and did my js + css styling. for my background, i just took the one that i use normally in google. For my shortcuts, i took svgs from online and used them as icons. I also decided to implement a weather thing on the top right, which will use an api to show the current weather in my location. still need to find and pick an api to use
Loading more…