|
19801
|
runing gAme by @maulshreesrivastava39 | Stardance
|
maulshreesrivastava39
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: runing gAme by @maulshreesrivastava39 | Sta Title: runing gAme by @maulshreesrivastava39 | Stardance...
|
1793822101.989335
|
1794426901.989335
|
|
19802
|
Frictionless by @senn | Stardance
|
senn
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Frictionless by @senn | Stardance
|
1793407634.8257515
|
1794012434.8257515
|
|
19803
|
My very own WebOS by @Danik | Stardance
|
Danik
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @Danik | Stardance
|
1794048876.3943067
|
1794653676.3943067
|
|
19804
|
My first slack bot! by @muhammadadeen | Stardance
|
muhammadadeen
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @muhammadadeen | Sta Title: My first slack bot! by @muhammadadeen | Stardance...
|
1793857880.1799934
|
1794462680.1799934
|
|
19805
|
Tick Tock by @ryderklh | Stardance
|
ryderklh
|
5
|
85.0
|
988
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-09-08T12:39:47Z", "hours": 30.0, "multiplier": 12.69, "payout": 386, "blessing": "neutral", "text": "WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a Timer and a Stopwatch. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title automatically save in localStorage & url# Digital Clock 12-hour / 24-hour format 3 Font styles (Sans, Serif, Mono) Fullscreen mode (Header/Footer kept!) Smooth breathing colon animation automatically save in localStorage & url# ⭐Timer ⭐Mutiple timers at one page ⭐Keep going after refreshing website ⭐Circular progress bar ⭐Sortable timers ⭐Alarm and flash on completion ⭐Stopwatch ⭐Mutiple stopwatches at one page ⭐Keep going after refreshing website ⭐Sortable timers ⭐Able to lap and split ⭐Able to copy total time and laps info Time Progress Bar Export as image Switchable hide/show Pomodoro Timer Customable number of cycles Pause at any time Notification Sound Lightweight Light mode/Dark mode Quick link to other tools WHAT I LEARNT? A lot of new things about git How to write devlogs JS, Astro… TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif) ⭐Timer ⭐Stopwatch Time Progress Pomodoro Timer ⭐means new features of the previous ship", "repo": "https://github.com/klhrd/TickTock", "demo": "https://klhrd.github.io/TickTock"}, {"ship_num": 2, "ts": "2026-08-02T07:51:47Z", "hours": 22.0, "multiplier": 15.66, "payout": 346, "blessing": "neutral", "text": "WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a Pomodoro Timer and a Time Progress Displayer. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title automatically save in localStorage & url# Digital Clock 12-hour / 24-hour format 3 Font styles (Sans, Serif, Mono) Fullscreen mode (Header/Footer kept!) Smooth breathing colon animation automatically save in localStorage & url# ⭐Time Progress Bar ⭐Export as image ⭐Switchable hide/show ⭐Pomodoro Timer ⭐Customable number of cycles ⭐Pause at any time ⭐Notification Sound Lightweight ⭐Light mode/Dark mode ⭐Quick link to other tools ⭐means new features of the previous ship WHAT I LEARNT? A lot of new things about git JS, Astro… TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif) Time Progress Pomodoro Timer", "repo": "https://github.com/klhrd/TickTock", "demo": "https://klhrd.github.io/TickTock"}, {"ship_num": 3, "ts": "2026-07-15T07:24:47Z", "hours": 18.0, "multiplier": 7.76, "payout": 136, "blessing": "neutral", "text": "WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a beautiful, highly customizable Digital Clock. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features ⭐Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title ⭐Digital Clock ⭐12-hour / 24-hour format ⭐3 Font styles (Sans, Serif, Mono) ⭐Fullscreen mode (Header/Footer kept!) ⭐Smooth breathing colon animation automatically save in localStorage & url# Lightweight ⭐means new features of the previous ship WHAT I LEARNT? A lot of new things about Astro and NodeJS How to structure routes for multiple tools (Refactoring files) Advanced CSS (using global variables to adjust layout gaps dynamicly) REPLIES Thank you so much for the 115 stardust and the amazing feedback! I read every single review from Ship #2, and they helped me make this update so much better. 1. ABOUT MORE FEATURES Many suggested adding more tools or events. I turned the website into a Hub and built the Digital Clock as our second official tool! 2. ABOUT THE SCREENSHOT IN README Two reviewers mentioned adding screenshots. I’ve updated the README with fresh screenshots so people skimming through can see the UI instantly. TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif)", "repo": "https://github.com/klhrd/TickTock", "demo": "https://klhrd.github.io/TickTock"}, {"ship_num": 4, "ts": "2026-07-01T04:33:49Z", "hours": 13.0, "multiplier": 9.33, "payout": 115, "blessing": "neutral", "text": "WHAT I MADE/THINK? I made a long-term countdown timer for events. It’s really hard for me to build things in a way that is completely new to me. I’ve been stuck not only with programming languages but also with English. However, through this project (STARDANCE), though I didn’t create something really impressive, I think I learnt A LOT. Features Live Countdown Full mode ⭐Days mode Customizable ⭐Change Target Date ⭐Edit Event Title ⭐automatically save in localStorage & url# ⭐share btn Dark Mode UI ⭐means new features of the previous ship WHAT I LEARNT? basic GIT code basic HTML/CSS3/JS How to write DevLogs REPLIES I’ve read all the replies of the ship#1. And lots of them mentioned the same thing. Thanks to everyone who give me feedback. Hope there’s the better version of previous ships. 1. ABOUT CHANGEABLE TARGET Now you can pick any target date and even edit the event title right from the sidebar. 2. ABOUT LANGUAGE I’ve fully migrated the app to English now. 3. ABOUT DEVLOG I’ve leveled up my devlog game for this update—documented all the engineering details and bugs I fixed this time. TRY IT! 2027 New Year NC Finals Weekend US Open", "repo": "https://github.com/klhrd/TickTock", "demo": "https://klhrd.github.io/TickTock"}, {"ship_num": 5, "ts": "2026-06-16T15:10:14Z", "hours": 2.0, "multiplier": 2.98, "payout": 5, "blessing": "neutral", "text": "What I Made I made a Countdown Web App called “Tick Tock.” It shows the exact years, months, days, hours, minutes, and seconds left until January 1, 2027. What Was Challenging Calculating months and years was hard. Months have different days (28, 30, or 31), so I had to write smart JavaScript code to borrow days and keep the timer 100% accurate. What I Am Proud Of It Works!: Actually this is my first time using html to build a website. Clean Design: I fixed the layout bugs and made a dark-mode interface. How to Test It https://klhrd.github.io/TickTock/", "repo": "https://github.com/klhrd/TickTock", "demo": "https://klhrd.github.io/TickTock"}]...
|
[{"post_id": 64186, "ts": "202 [{"post_id": 64186, "ts": "2026-09-08T12:37:49Z", "hours": 0.7658, "text": "Devlog 52: GitHub Pages Audio Path Resolution Fixes Absolute Repository Subpath Hardcoding Replaced environment variable dynamic paths ( import.meta.env.BASE_URL ) with direct base-path URLs ( '/TickTock/sounds/alarm.wav' ) in playAlarm() . i have no idea why that happened"}, {"post_id": 62827, "ts": "2026-09-06T11:02:52Z", "hours": 0.4825, "text": "Devlog 51: Asset Migration Asset Directory Migration Moved audio assets ( alarm.wav and notif.wav ) from the static /public/sounds/ directory into the source-managed asset pipeline at src/assets/sounds/ . Module Import & Bundler Integration Replaced hardcoded absolute URL paths ( \"/public/sounds/...\" ) with explicit ES module imports ( import alarmSoundUrl from '../assets/sounds/alarm.wav' and import notifSoundUrl from '../assets/sounds/notif.wav' ) across timer.js and pomodoro.js ."}, {"post_id": 62807, "ts": "2026-09-06T10:16:06Z", "hours": 1.0094, "text": "Devlog 50 Layout Refactoring Scroll Restructuring Shifted .stopwatch-container layout from vertical wrapping ( flex-wrap: wrap ) to a single-row horizontal scroll track ( flex-wrap: nowrap with overflow-x: auto )."}, {"post_id": 62744, "ts": "2026-09-06T08:02:07Z", "hours": 2.8789, "text": "Devlog 49: Lap Data Export Plaintext Lap Data Serialization formatLapsOutput : a dedicated text formatter that converts active stopwatch data into structured tab-separated values (TSV) suitable for copying. Async Clipboard Copy Logic Implemented an async wrapper using navigator.clipboard.writeText() with built-in error handling ( try/catch ) and user alerts for unsupported environments or clipboard permission rejections. Interactive Copy Feedback UI Wired copyBtn click events to trigger text copying and dynamically update the button icon ( check or error ) and theme accent color."}, {"post_id": 60192, "ts": "2026-09-02T12:48:53Z", "hours": 1.0839, "text": "Devlog 48: DOM Selector Bugfixes & Homepage Quick Access DOM Query Selector & Reference Repairs Updated querySelector in updateListedStopwatch from target class .listed-stopwatch-demo to parent wrapper .listed-stopwatch[data-id=\"...\"] , resolving element lookup failures during live updates. Homepage Integrated direct links and dedicated preview cards for the Stopwatch application into index.astro and BaseLayout.astro ."}, {"post_id": 59556, "ts": "2026-09-01T13:21:58Z", "hours": 0.6392, "text": "Devlog 47: Pause Compensation Pause Duration Offset Implemented pauseDuration calculation Date.now() - pauseStartTime during resume actions status === \"paused\" . Shifted all existing lap timestamps lap.endTime += pauseDuration forward to subtract paused time intervals. State-Aware Timestamp Resolution Standardized timestamp evaluation across renderers handleLap , renderListedStopwatch , updateListedStopwatch , and updateCardUI using ternary state checks: const now = stopwatch . status === \" running \" ? Date . now () : stopwatch . pauseStartTime ;"}, {"post_id": 58906, "ts": "2026-08-31T13:58:04Z", "hours": 1.9278, "text": "Devlog 46: UI Fine-tuning & Timing Logic Optimization Lap Calculations -Replaced laps.forEach with for (let j = 0; j <= i; j++) to ensure cumulative total times ( totalMS ) strictly correspond to the current lap index. Layout Enhanced formatTime() rendering logic by applying inline styles width , transform: scaleX(0.8) , text-align: center to dynamic span elements, preventing font-width shifting during rapid ticker updates. Dynamic Rendering Integrated updateListedStopwatch() into the global interval loop, enabling sidebar preview labels to tick synchronously with active main cards. Optimized state updates to target individual time elements instead of triggering full list re-renders on every ticker frame. Added optional chaining laps?.[0]?.startTime across rendering pipelines to prevent runtime exceptions when initializing empty stopwatches."}, {"post_id": 57947, "ts": "2026-08-30T08:58:55Z", "hours": 3.6403, "text": "Devlog 45: Initial Stopwatch Logic & Dynamic State Scaffolding Core State & Lap Data Architecture Designed a stopwatch schema tracking dynamic state ( idle | running | paused ) and an array of individual lap records ( laps ). Streamlined time calculation to compute elapsed milliseconds dynamically directly using timestamps ( Date.now() - lap.startTime ), eliminating redundant accumulator fields like startTime or elapsedTime . Interactive Handlers & Lifecycle Operations Implemented core lifecycle handlers: handleStart , handlePause , handleReset , handleLap , and handleDelete . Integrated updateCardUI and updateCardBtns to reflect running, paused, and idle UI visual feedback dynamically. Built active DOM updates for lap histories inside updateCardLapGrid using index-based duration summation for lap and total times. Enabled global runtime updates via startGlobalTick() timer intervals and list reordering via handleMoveStopwatch() ."}, {"post_id": 57110, "ts": "2026-08-29T06:40:01Z", "hours": 1.7286, "text": "Devlog 44: Stopwatch Layout Template & Layout Migration Ported side-menu and main container structures from Timer to Stopwatch layout ( index.astro ). Structured sidebar elements: .stopwatch-adding-action-btn and .stopwatch-list-container for dynamic item injection. Added template placeholders ( #listed-stopwatch-template and #stopwatch-card-template ). Stopwatch Card & Lap Data Display Integrated core display components: .stopwatch-text and .stopwatch-text-sub . Created interactive control group ( .stopwatch-card-action-btn ) supporting Start, Pause, Replay, and Lap actions. Designed a 3-column CSS Grid table ( .stopwatch-lap-container ) to organize lap metrics ( i , lap , total )."}, {"post_id": 55411, "ts": "2026-08-27T06:58:34Z", "hours": 0.3914, "text": "Devlog 43: Timer Integration & Navigation Update Navigation & Home Page Integration Added Timer card entry to the main landing page ( tool-card layout with hourglass Material symbol). Added direct Timer link to the global navigation bar in BaseLayout.astro . Feature Branch Merge Merged feature/timer-main into main , bringing in the new /timer page route, timer.js logic, sound assets ( alarm.wav ), and updated layout components. YEAYYY"}, {"post_id": 55007, "ts": "2026-08-26T13:10:35Z", "hours": 1.7997, "text": "Devlog 42: Timer Reordering & List Re-Sorting Reordering UI Controls Added .sort-action control group with .sort-up and .sort-down arrow buttons to the template layout. Dynamic Array Mutation & Re-rendering Implemented handleMoveTimer(id, direction) to handle array element swapping with upper and lower boundary bounds checks. Bound click handlers in renderListedTimer() to execute reordering operations, trigger LocalStorage updates, and instantly re-render the UI layout via renderAll() ."}, {"post_id": 54924, "ts": "2026-08-26T04:43:44Z", "hours": 0.4733, "text": "Devlog 41: Dual-Text Display & Running Animation Sub-Text Total Duration Display Added .timer-text-sub element inside the ring container to preserve and display the initial totalSeconds value. Styled sub-text using lighter font weights and var(--text-muted) . Dynamic Running Visual Effects Added .is-running state toggle based on timer.status === \"running\" . Implemented @keyframes timer-text-flash pulsing animation to provide continuous visual feedback while countdown is active."}, {"post_id": 54897, "ts": "2026-08-26T03:33:47Z", "hours": 1.2658, "text": "Devlog 40: Alarm Audio & LocalStorage Independent Alarm Audio Handling new Audio() allowing each finished timer to play independent looping sound effects concurrently. Bound alarm termination directly to handleReset() and handleDelete() . LocalStorage Serialization Fixes Sanitized timer state object before serialization in saveTimers() by stripping transient DOM/Audio references ( alarmAudio ) to prevent JSON stringification crashes. Added type validation ( typeof alarmAudio.pause === \"function\" ) inside stopAlarm() to prevent runtime TypeError issues during state rehydration. Post-Reload Alarm & Visual Sync Updated renderAll() to resume alarm sound playback and background pulse animation for ended timers across page reloads. Cleared endTime correctly during timer reset to normalize state lifecycle. alarm.wav Using LMMS to create alarm.wav for the alarming when timer.status===\"ended\" ."}, {"post_id": 54221, "ts": "2026-08-25T03:40:02Z", "hours": 0.5936, "text": "Devlog 39: Smooth Action Button Transitions Button Collapse & Spacing Animate Added max-width , margin: 0 , and padding: 0 constraints to .is-hidden to smoothly collapse hidden buttons without leaving blank layout gaps. Expanded base state with explicit max-width boundary to allow width-based CSS transitions. much smoother ♪(´▽｀)"}, {"post_id": 53651, "ts": "2026-08-24T09:46:13Z", "hours": 4.4989, "text": "Devlog 38: Multi-Timer Logic & Bug Fixes JS Managed multi-timer state using plain object arrays. Implemented saveTimers() and loadTimers() for LocalStorage persistence. Linked input fields with setupArrowBtns() to handle unit value increment and decrement bounds. Cloned <template> elements to dynamically generate sidebar list items and main cards via renderAll() . Added item deletion logic via handleDelete() to update state and UI. Established a startGlobalTick() loop running every 200ms using endTime offsets to prevent background tab drift. Calculated SVG circle strokeDashoffset dynamically based on remaining time ratios. Debugging & UI Patching Placing <template> tags inside slot=\"template-content\" . Adding missing id=\"timer-container\" . .textContent.textContent to .textContent Data.now() to Date.now() . timers.status to timer.status . finally got multi-timer state and progress rings syncing properly… bugs fixed and back to smooth sailing…"}, {"post_id": 52458, "ts": "2026-08-22T16:09:04Z", "hours": 7.2022, "text": "Devlog 37: Multi-Timer UI Layout & Input Controls Form Inputs & Adjustments Built HH/MM/SS number input boxes with range limits and zero-padding logic on blur. Implemented stepper adjustment buttons for quick time value tweaking. Sidebar Timer List Layout Added sidebar timer list container to preview user-created countdown items. Integrated quick action delete buttons for item removal. Main Dashboard Circular Timer Constructed countdown card layout featuring SVG dynamic progress ring. Centered time readout using tabular-nums formatting to eliminate number jitter. Action Control Group Laid out card control buttons including play, pause, and replay. the ui was so tiring… i DID remember to open a new branch (feature/timer-main) …"}, {"post_id": 39335, "ts": "2026-08-02T07:50:09Z", "hours": 0.4922, "text": "Devlog 36: Update Docs & Merge Update Docs Readme: Add the links of the new tools Ship#4: Write Ship#4.md Merge!!!!! Merge feature/pomodoro into main Fortunately no error poping out!"}, {"post_id": 39323, "ts": "2026-08-02T07:15:21Z", "hours": 0.8742, "text": "Devlog 35: Pomodoro State Transition & Auto-Loop Refactoring Core Logic & State Fixes Auto-Phase Transition Fix : Resolved state lock ( status: 'running' ) preventing automatic transition from Focus to Break. Added explicit status resetting in handlePhaseEnd before invoking startTimer . Timer Precision : Replaced Math.round with Math.ceil in countdown logic to eliminate early sound triggers caused by rounding errors. Timestamp Recalibration : Implemented dynamic endTime re-calculation when switching modes ( work ↔ break ) to maintain state consistency."}, {"post_id": 39287, "ts": "2026-08-02T05:00:19Z", "hours": 2.2125, "text": "Devlog 34: Pomodoro Core Timer & Segmented Timeline Integration Features Implemented static audio notification system via HTML5 Audio API targeting public/sounds/notification.mp3 . Architecture & State Management Implemented timestamp delta verification ( endTime - Date.now() ) to maintain countdown accuracy during background tab throttling or page reloads. Decoupled primary control actions across main page and sidebar controls ( #menu-start-btn , #cycles-input ). Bug Fixes & Refactoring Fixed ReferenceError during event initialization by enforcing state argument scoping within bindEvents . Refactored loadStateFromLocalStorage parsing logic to filter \"undefined\" string literals and clear corrupted cache gracefully."}, {"post_id": 37493, "ts": "2026-07-30T08:56:03Z", "hours": 4.0386, "text": "Devlog 33: Pomodoro Segmented Timeline & Layout Integration Segmented Timeline Layout Integrated BaseLayout slots for the new Pomodoro page, separating sidebar settings from the main dashboard. Built a visual segmented timeline ( .timeline-track ) with flex-proportional work/break segments and a dynamic progress pin ( .timeline-pin ). Core Logic & State Setup Refactored state object fields ( workDuration , breakDuration , timeRemaining ) to ensure clean state initialization. Added timestamp delta checking on startup to preserve accurate remaining time across page reloads or background tabs."}, {"post_id": 36218, "ts": "2026-07-28T04:48:53Z", "hours": 0.3056, "text": "Devlog 32: Dynamic Canvas Aspect Ratio Calculation Features & Refactoring Implemented dynamic aspect ratio calculation for PNG exports ( Height = 140 * Count + 180 ). Applied responsive auto-scaling for .export-canvas to ensure optimal vertical spacing regardless of selected cards count. Merged feature/export-image branch into main after verifying clean template rendering and correct node referencing."}, {"post_id": 36205, "ts": "2026-07-28T04:19:06Z", "hours": 2.29, "text": "Devlog 31: Template Canvas Architecture & Reference Refactoring Independent Canvas Architecture Replaced direct DOM manipulation of live dashboard elements with a dedicated, off-screen template canvas ( .export-canvas ). Cloned active .progress-card elements into an isolated container ( .export-cards-holder ), ensuring the on-screen UI remains completely untouched and non-flickering during image generation. Moved aspect ratio, high-resolution dimensions (600x600), padding, and font-scaling rules directly into CSS for clean separation of concerns. Error Fixes & Cleanup Fixed ReferenceError caused by leftover references to targetContainer and stampEl inside initExportImageFeature . Updated html2canvas target from main dashboard container to the temporary canvasEl . Streamlined fallback DOM cleanup logic inside the try...catch block to guarantee off-screen elements are properly garbage collected."}, {"post_id": 35003, "ts": "2026-07-26T04:47:24Z", "hours": 1.3903, "text": "Devlog 30: Image Export Feature & Template Refactoring Image Export Feature Integrated html2canvas library to enable one-click PNG image export of the active progress dashboard. Added an “Export as Image” button inside the custom sidebar menu with dedicated styling. Handled theme-aware background rendering by dynamically querying computed global CSS variables ( --bg-app ). DOM Template & Dynamic Watermark Refactored dynamic watermark creation using the HTML <template> element ( #export-watermark-template ), cleanly separating DOM structure from JavaScript execution logic. Configured dynamic timestamps using now.toLocaleString() to inject real-time snapshot dates and times into exported images. Added ignoreElements filtering in html2canvas to prevent unchecked/hidden .progress-card elements from creating top/bottom visual gaps in exported images. Bug Fixes & Refactor Fixed a TypeError on insertBefore / appendChild by referencing clone.firstElementChild to extract the correct Element Node from DocumentFragment . Resolved HTML/JS ID typos ( export-watermark-template ) and method call mismatches to ensure reliable script execution."}, {"post_id": 33941, "ts": "2026-07-24T08:29:42Z", "hours": 0.9675, "text": "Devlog 29: URL Hash Sync, LocalStorage Persistence & Universal Share Event URL & State Persistence Integrated URL Hash ( #year,month,... ) and localStorage synchronization into time-progress.js to preserve users’ toggle preferences across reloads and shares. Added a hashchange event listener to ensure UI check states dynamically update when users use browser navigation (Back/Forward). Centralized Layout Share Event Refactored the #share-menu-btn event listener into BaseLayout.astro , eliminating duplicate share logic across individual tool pages. Leveraged document.title dynamically to provide clean, contextual titles for native Web Share API and clipboard copy fallbacks."}, {"post_id": 33891, "ts": "2026-07-24T05:26:11Z", "hours": 1.0658, "text": "Devlog 28: Layout Overflow Fixes and UI Polish Layout & Scrollbar Stability Added scrollbar-gutter: stable to html in global.css to reserve vertical scrollbar space, preventing horizontal overflow caused by layout reflow. Applied overflow-x: hidden to main containers and .progress-card to prevent percentage tags and thumbs from clipping past container edges at 100%. CSS Rule Corrections Fixed CSS property error by setting .track width to 100% instead of unitless value. Fine-tuned progress bar wrapper styles to ensure smooth visual layout under both dark and light themes."}, {"post_id": 33283, "ts": "2026-07-23T02:15:39Z", "hours": 4.0661, "text": "Devlog 27: Time Progress Bar Feature Porting and JS Modular Refactoring Astro Slot Architecture & CSS Variable Integration Ported the standalone Time Progress Bar tool into the Astro layout system using designated slots ( #head , #header-content , #custom-menu , and #main-content ). Converted hardcoded hex colors into semantic global theme CSS variables ( --accent-color , --component-bg-standard , --text-heading ), ensuring native support for Dark and Light mode toggling. Replaced the dropdown filter with sidebar multi-select checkboxes for custom control over visible time progress units. JavaScript Modular Refactoring & Bug Fixes Decoupled single-script logic into dedicated, single-responsibility functions ( initSidebarToggles , calculateTimeProgress , updateTicksUI , updateProgressCardUI , and updateSingleCardUI ). Resolved JavaScript syntax errors, including missing function keywords, JS Automatic Semicolon Insertion (ASI) line-break issues on return statements, and uncalled Date method parentheses. Streamlined animation frame rendering by passing structured data from math calculations directly into UI updater functions."}, {"post_id": 32236, "ts": "2026-07-21T08:41:47Z", "hours": 0.8689, "text": "Devlog 26: Typo Correction and Expandable Directory Menu Typo Correction Fixed property naming error from –accent-contract-text to –accent-contrast-text in global CSS. Expandable Tools Directory Converted static directory links into a native component with smooth arrow rotation styling. Enabled server-side open status via open={isHomePage} in BaseLayout, defaulting to expanded on the home hub and collapsed on sub-tool pages."}, {"post_id": 31792, "ts": "2026-07-20T13:53:15Z", "hours": 1.3728, "text": "Devlog 25: Theme Toggle Implementation with Dark and Light Modes Light Theme Tokens Override Added :root[data-theme=“light”] in global.css to swap semantic theme variables for light background, borders, and high-contrast amber accents. Preserved existing component styles while smoothly transitioning body colors on theme switch. Sidebar Toggle Component and Logic Integrated a theme toggle button (#theme-toggle-btn) inside the BaseLayout header actions. Built persistent theme state logic using localStorage and system prefers-color-scheme detection. Used textContent on icon elements to dynamically switch between dark_mode and light_mode icons without type errors."}, {"post_id": 31215, "ts": "2026-07-19T13:11:06Z", "hours": 2.2447, "text": "Devlog 24: Color Architecture Refactoring with Design Tokens Two-Tier CSS Variables Global Tokens: Extracted hardcoded hex colors into primitive color names inside global.css. Theme Tokens: Created a semantic layer mapping elements like –bg-app and –accent-color directly to global tokens. Clean Codebase Update Component Styles: Replaced absolute colors across the layout, dashboard hub, countdown, and clock templates with var() variables. Script Alignment: Updated dynamic checkmark colors in JavaScript to read –accent-color instead of raw hex values. Future Scope: The design is now fully abstracted, meaning light mode implementation will only require token swapping without editing individual component code."}, {"post_id": 28755, "ts": "2026-07-15T06:57:18Z", "hours": 0.2736, "text": "Devlog 23: Global Branding Relocation and Logo Navigation Moving Title Label to BaseLayout Unifying the brand and improving UX Header Linkification : Refactored the main title-label (“TickTock”) out of individual page templates and integrated it directly into the global BaseLayout.astro . Back-to-Home UX : Wrapped the brand title in an <a> tag. Now, clicking the brand logo on any sub-tool instantly routes the user back to the home dashboard Hub, offering an intuitive, web-app-like navigation experience."}, {"post_id": 28732, "ts": "2026-07-15T05:22:01Z", "hours": 0.4186, "text": "Devlog 22: F11-Equivalent Fullscreen via Root Element Standardizing Fullscreen to document.documentElement Fixing disappearing layout elements The Pitfall : Previously, calling requestFullscreen() on the individual #clock-screen container caused the browser to isolate it from the DOM layout. This triggered default browser styling which rendered a pitch-black backdrop, and completely hid crucial layout parts like the header, footer, and side menu buttons. The Solution : We shifted the fullscreen API target from the sub-container directly to document.documentElement (the global <html> node). This aligns the button’s behavior perfectly with standard keyboard F11 fullscreen events. The Result : All global UI elements (header, footer, navigation) now scale smoothly and remain perfectly visible and interactive without any layout shifts or z-index clashing."}, {"post_id": 28188, "ts": "2026-07-14T09:57:23Z", "hours": 1.1836, "text": "Devlog 21: Architecture Normalization and Layout Fine-Tuning Directory Restructuring & Future-Proofing Preparing for scalability Digital Clock Renaming : To prevent future routing conflicts as the project scales, we successfully renamed clock.js to digital-clock.js and adjusted the main page path to /src/pages/digital-clock/ . This cleanly isolates this feature from upcoming modules like World Clock or Pomodoro Timer. Dependency Clean-up : Updated all asset paths and module script injections across the hub, fully standardizing the multi-tool routing structure under the /TickTock/ basePath. Layout Fixes with Global CSS Variables Resolving invalid CSS properties via JS injection Replacing Non-Standard Styles : Fixed a crucial layout issue where arbitrary if(...) conditions inside CSS were breaking colon component constraints. Dynamic Width Injection : Migrated the layout parameters directly into digital-clock.js using the standard document.documentElement.style.setProperty API. The .colon element now seamlessly reads the responsive --clock-colon-width CSS variable, adapting perfectly across Sans, Serif, and Mono configurations without any jumping side effects."}, {"post_id": 28133, "ts": "2026-07-14T07:16:36Z", "hours": 2.5658, "text": "Devlog 20: Settings Memory and Dynamic Sharing Adding Setting Memory and URL Sync Keeping your clock layout saved Persistent settings : The clock now remembers your favorite layout. Your choice of time format (12/24h) and font style is instantly saved directly to your browser’s local storage. URL sync : We linked these settings directly to the URL hash (like #12hr&mono ). When you refresh or load the page, your exact preferred theme loads up right away. Smart Sharing and Hub Integration Spreading the time and completing the hub Dynamic sharing : Added a share button that grabs your exact custom clock URL. It uses the Web Share API when available, and easily falls back to copying the link to your clipboard with a smooth checkmark animation on success. Connecting the dashboard : Linked the completed clock page to our homepage hub grid and updated the site layout, officially making TickTock a multi-tool station."}, {"post_id": 27501, "ts": "2026-07-13T03:45:40Z", "hours": 3.5772, "text": "Devlog 19: Building the Adaptable Digital Clock Implementing Native Date Formatting Problem : The clock header needed to show the full current date (e.g., “Sunday, July 12, 2026”) dynamically without taxing browser performance or importing heavy external date libraries. Solution : Added a #date-label placeholder to the template and used the native JavaScript toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) inside the main runtime loop to render lightweight, perfectly formatted timestamps on every update. Creating Fluid Visual Oscillations via Math.sin() Problem : Traditional blinking colons look rigid and distracting, failing to deliver a premium, organic feel for an active time-management tool. Solution : Avoided simple CSS toggles and leveraged a true trigonometric formula inside a requestAnimationFrame loop. By mapping high-precision timestamps through Math.sin() , the opacity gracefully curves between 0.2 and 1.0 , producing a perfectly smooth, wave-like breathing animation. Binding Custom Display and Layout Controls Problem : The interface required instant controls for 12/24-hour formats, font adjustments, and a standalone full-screen view while managing layout side effects. Solution : Wired up event listeners to modify global runtime states and inline CSS font families on the fly. Integrated the HTML5 Fullscreen API onto the #clock-screen element, backed by a global fullscreenchange listener to seamlessly catch manual ESC escapes and keep the toggle button states perfectly in sync."}, {"post_id": 26388, "ts": "2026-07-11T04:39:33Z", "hours": 0.4408, "text": "Devlog 18: Adding Hub Sharing Functionality Integrating Client-Side Script Safely Implementing the Homepage Share Button Problem : The dashboard needed a simple button to share the current hub URL, but running browser APIs directly could break Astro’s static site generation (SSG) compiler. Solution : Added an inline <script is:inline> block to the index page. This bypasses the server-side build process and safely binds the sharing and clipboard logic only when the page loads in the user’s browser."}, {"post_id": 25792, "ts": "2026-07-10T07:52:27Z", "hours": 1.6289, "text": "Devlog 17: Project Hub and README Expansion Moving from a Single Page to a Tool Hub Goal : Transformed TickTock from a single countdown page into a comprehensive time-management utility hub powered by Astro. Implementation : Created a main dashboard page ( src/pages/index.astro ) to serve as the gateway for current and future time tools, using a shared layout for a consistent user experience. Adding Future Roadmap and Project Documentation Goal : Wrote a complete README.md to document the new project architecture, local testing steps, and automated GitHub Pages deployment. Future Vision : Updated the repository roadmap to announce upcoming tools built for the Hack Club Stardance event, including a Pomodoro Timer, World Clock Board, Minimalist Timer, and Time Progress Bars."}, {"post_id": 24763, "ts": "2026-07-08T15:29:37Z", "hours": 1.7703, "text": "Devlog 16: Dashboard Layout Fixes Fixing Layout and Compression Issues Compressed Card Icons Problem : The card icons shrank and deformed when the screen size changed. Solution : Added flex-shrink: 0; to the icon class to force them to keep their correct size. Cards Stacking Vertically Problem : The tool cards unexpectedly stacked into a narrow, single column right in the middle of the screen. Even though there was plenty of empty space on both sides of the desktop browser, the grid refused to expand horizontally and display the cards side-by-side. Troubleshooting : The grid’s layout formula was correctly set to repeat(auto-fit, minmax(250px, 1fr)) , which should have allowed multiple columns. However, the parent container ( .home-container ) was set to display: flex with align-items: center . In a vertical Flexbox layout, this alignment forces child elements like the grid to shrink to their absolute minimum width based on content, instead of filling the screen. To make matters worse, a strict max-width: 300px; was hardcoded onto the .tool-grid . Since two cards plus their gaps required at least 525px to sit side-by-side, the 300px restriction made it mathematically impossible for the browser to create a second column. Solution : Removed the restrictive max-width: 300px; from the grid and replaced it with a generous max-width: 1200px; to allow proper breathing room on large screens. Added width: 100%; to the grid class, forcing the grid container to break out of the Flexbox compression and stretch completely across the parent container. This allowed the responsive auto-fit engine to finally see the available width and cleanly arrange the cards into multiple columns. Fixing Grid Spacing and Syntax Errors Layout Breaking Off-Screen Problem : The grid expanded past the screen edges and cut off the card content. Solution : Added box-sizing: border-box; to the main container so that padding is counted inside the total width. Broken Units and Side Scrollbars Problem : An annoying horizontal scrollbar appeared at the bottom of the page. Solution : Fixed a typo where width: 100sww; was written instead of 100svw , and added body { margin: 0; } to clear default browser spaces."}, {"post_id": 24045, "ts": "2026-07-07T10:37:16Z", "hours": 5.7283, "text": "Devlog 15 Phase 1: Creating the Skeleton and Splitting Components Overextending the Style Files The project started as a single page where all HTML, CSS, and JS lived together. When I created the unified BaseLayout.astro , I kept the old global.css . However, that file had specific styles just for the countdown page, which broke the layout of the new homepage. Cleaning Up Style Pollution To fix this, I moved the countdown-specific CSS directly into the <style> tag of the countdown page ( index.astro ). Astro automatically confines these styles to their own page, ensuring they no longer mess up the homepage layout. Phase 2: Fixing Astro’s Route Misinterpretation Keeping Scripts in the Wrong Folder I originally placed the logic script ( script.js ) inside the src/pages/countdown/ folder to keep it close to the page. During local testing, Astro threw an error saying there was no API route handler for that JavaScript file. Moving Scripts to a Dedicated Folder I learned that Astro treats every file inside src/pages/ as a public URL or an API route. To fix this, I moved the file to a new src/scripts/ folder and renamed it countdown.js , keeping the pages folder strictly for actual web pages. Phase 3: Resolving Build Crashes from File Names Using Special Characters in Names Inside my documentation folder, I named a development note file ship#2.md . When I ran npm run build , the entire build process crashed immediately with a path error. Removing the Broken Characters The build tool (Vite) treats the # symbol as a URL anchor link, which breaks file path reading. I renamed the file to ship2.md , and the system was able to parse the path and build successfully. Phase 4: Overcoming the Environment Conflict (Server vs. Client) Running Browser Code on the Server This was the biggest challenge. When I imported countdown.js into the page, the build failed multiple times, throwing errors like window is not defined and document is not defined . Protecting the Code with Environment Guards Astro runs pages on the server to generate static HTML during the build step. Because Node.js does not have browser features like window or document , the script crashed. I fixed this with two steps: I imported the script using the ?url suffix in Astro so the server only records its path instead of running it. I wrapped all the browser-specific logic inside a typeof window !== \"undefined\" check. This ensures the script stays quiet during the server build and only runs once it reaches the user’s browser."}, {"post_id": 19753, "ts": "2026-07-01T04:23:10Z", "hours": 0.8367, "text": "Devlog 14: Localization Migration and Pre-Ship Consolidation UI Text Internationalization Migrated all hardcoded multi-byte interface character arrays across template structures ( index.html ) and operational state modules ( script.js ) into standardized Western European typography strings. Refactored semantic definitions within input control placeholders and baseline reference containers to achieve uniform structural layout scaling under single-byte font rendering constraints. Documentation and Release Management Compiled a foundational system architectural reference ( README.md ) specifying setup logic, reactive routing hooks, and custom persistence implementations. Executed full client-side behavior validations on state-tracking components ahead of the definitive production deployment pipeline for Ship #2."}, {"post_id": 19164, "ts": "2026-06-30T12:38:15Z", "hours": 2.1061, "text": "Devlog 13: Native Sharing Integration and Address Synchronization Control Native Sharing and Fallback Mechanics Integrated a social propagation module ( #share-menu-btn ) inside the header actions block, utilizing the Web Share API to access native mobile distribution panels. Engineered an automated asynchronous clip fallback sequence that overrides processing blocks on unsupported desktop environments, programmatically duplicating host URL hashes via the navigator clipboard asset pool. Applied stateful visual interaction hints onto the interactive sharing interface, dynamically toggling system icons to verify action fulfillment before returning properties to base states. Hash Serialization and Router Interdependency Fixes Resolved an critical structural validation bug inside the initial state loader ( loadInitialState ) where an premature execution return statement truncated processing flows, preventing state restorations. Re-architected data assignment flows inside initialization cycles ( initTimer ), deploying window.history.replaceState() to inject fully compiled variable string parameters back into empty browser URI paths. Secured total address compliance across baseline entries, guaranteeing structural data layers are available to secondary network nodes even when sharing operations occur prior to custom value updates."}, {"post_id": 18227, "ts": "2026-06-29T09:35:11Z", "hours": 0.5422, "text": "Devlog 12: Fluid Typography and Viewport-Adaptive Interface Spacing Viewport-Proportional Layout Calibration Implemented fluid layout scaling mechanics across the primary text blocks utilizing the CSS clamp() function, anchoring layout metrics dynamically between absolute pixel boundaries and relative viewport height units ( vh ). Re-architected spacing margins below the core header display ( #event-label ) to smoothly scale inside an adaptive range ( clamp(5px, 2vh, 30px) ), optimizing structural vertical padding on shifting device orientations. Calibrated upper layout boundaries for the structural footer element ( #target-label ) using fluid scaling boundaries ( clamp(15px, 3vh, 40px) ), ensuring consistent geometric clear space relative to adjacent countdown blocks. Text Alignment and Flow Refactoring Transformed the target calendar description layer ( #target-label ) from inline formatting definitions into explicit block layout models ( display: block ), stabilizing custom spacing calculations and forcing uniform horizontal element boundaries. Enforced complete cross-axis block isolation by assigning absolute width restrictions ( width: 100% ) onto trailing description elements, smoothly pushing metadata strings down beneath the dynamic flexible tracking container."}, {"post_id": 18207, "ts": "2026-06-29T08:34:16Z", "hours": 1.9631, "text": "Devlog 11: Modular Display Mode Architecture and Layout Jitter Resolution Feature Implementation & State Persistence Introduced a feature toggle layout inside the sidebar control node, offering real-time transitions between comprehensive chronological breakdowns and solitary metric configurations. Wired state persistence modules utilizing the local browser data subsystem ( localStorage ) to preserve client display configurations across session cycles and application reboots. Updated the data ingestion routing logic ( loadInitialState ) to safely aggregate user layout states without stepping over parameter strings delivered via URL fragment references. Precision Calculation & Dynamic Interface Masking Integrated an isolated decimal extraction calculation routine within the interval processing tree ( updateTimer ) dedicated to managing strict single-unit tracking parameters. Configured programmatic style visibility switches across atomic timer components, enforcing clean element masking on non-applicable duration counters when single-unit modes trigger. Typographic Stabilization & Layout Shifting Mitigation Corrected a severe layout jitter anomaly inside flexible grid clusters caused by variable font character dimensions shifting container boundaries during fast string state invalidations. Implemented font-variant-numeric: tabular-nums to enforce strict monospaced numeral allocation, keeping external box dimensions static regardless of structural text mutations. Introduced a dynamic responsive structural modifier block ( .mode-single ) to adjust component paddings, implement generous baseline tracking, and elevate text sizing bounds when processing simplified metrics."}, {"post_id": 17619, "ts": "2026-06-28T14:25:59Z", "hours": 1.4517, "text": "Devlog 10: Structural File Extraction and Modular Synchronization Stability Code Base Decomposition and Externalization Refactored the unified codebase by isolating inline design frameworks and layout scripts into dedicated style.css and script.js internal resources. Streamlined index.html structure down to essential structural markup definitions, using external linkages to boost source reading efficiency and code maintainability. Character Processing and Stability Verification Verified text encoding boundaries across external routing changes to preserve multibyte text inputs (“目標日”, “目標”) without producing character distortion issues. Maintained responsive flex alignments and layout fluid bounds on smaller screens while decoupling runtime system layers."}, {"post_id": 16999, "ts": "2026-06-27T16:08:49Z", "hours": 1.4744, "text": "Devlog 09: Synchronization Bug Fixes and URL Component Decoding Argument Reference and Logic Rectification Corrected a ReferenceError inside the titleInput listener by swapping an un-sanitized token ( newDate ) with the valid, persistent variable targetString . Fixed an assignment error where a single operator ( if(newTitle=\"\") ) muted intended comparison logic, replacing it with a strict equality check ( newTitle === \"\" ). URL Normalization and Component Decoding Integrated decodeURIComponent() into loadInitialState() and the hashchange observer to prevent percent-encoded character corruption. Resolved text distortion for multibyte layouts (e.g., Chinese characters), ensuring continuous string fidelity across shared links. Established a default text fallback (“目標”) to secure interface rendering stability during empty input states."}, {"post_id": 14154, "ts": "2026-06-23T04:14:30Z", "hours": 0.9578, "text": "Devlog 08: Viewport Configuration and Responsive Layout Calibration Viewport Meta Integration and RWD Layering Integrated the standard responsive configuration tag <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> into the document structure header. Resolved a layout compression behavior where mobile rendering engines applied fallback desktop scaling parameters (typically a virtual width of 980px), forcing severe global downscaling on compact displays. Enabled native device pixel scale translations, forcing media container thresholds to evaluate against true hardware dimensions rather than high-density viewport projections. Fluid Grid and Token-Based Scaling Fixed an interface clipping issue where structural boundaries failed to dynamically contract on viewport widths below 600px. Activated the custom @media (max-width: 600px) breakpoint directives, downscaling internal flex container gaps from 15px to 10px and adjusting modular countdown component nodes for enhanced display symmetry. Re-calibrated proportional font metrics across mobile layouts, mapping secondary tracking units down to a structured 1.6rem baseline and bringing the primary title signature to an optimized 2rem boundary. Cross-Platform Interface Layout Fixes Restructured flex-wrap component mechanics within the core visualization container to smoothly adapt from unified desktop rows into multi-line mobile block grids. Eliminated persistent scrollbar overheads on handheld viewports by normalizing absolute coordinate assets and applying elastic percentage constraints across core elements."}, {"post_id": 13621, "ts": "2026-06-22T10:22:17Z", "hours": 0.3853, "text": "Devlog 07: URL Hash Routing Priority and Timer Encapsulation Debugging Feature and Priority Cascading Extended the state management architecture to support deep-linking properties using URL fragments (window.location.hash). Established a strict target resolution cascading hierarchy where URL fragment inputs take precedence over local user configuration memory, which in turn overrides the default fallback value (URL Hash > LocalStorage > “2027-01-01”). Implemented a regex filter pattern ( /^\\d{4}-\\d{2}-\\d{2}$/ ) to sanitize incoming window location string tokens prior to committing them to the execution state. Refactoring and State Synchronization Modularized individual timer logic fragments into a single initialization routine initTimer() . This routine synchronously updates text container parameters, binds default input values, clears residual interval clocks, and re-allocates tracking loops. Modified input element state transformation bindings to mirror newly elected target values into the URL fragment row (window.location.hash) concurrently with local system memory blocks. Resolution of Block Scope Diagnostics Scope Overlap Fix: Corrected a critical runtime ReferenceError located inside the initTimer() wrapper where repeating the let primitive on the timerId reference allocated a local block-scope variable that collided with pre-initialization clear routines. Removing the redundant declarative keyword reinstated proper execution. -Missing Invocation Fix: Appended an initial entry point declaration initTimer(targetString) to successfully boot up active countdown cycles on fresh page load sequences."}, {"post_id": 13112, "ts": "2026-06-21T13:27:59Z", "hours": 0.9197, "text": "Devlog 06: Sidebar Menu and Persistent LocalStorage Integration Requirements and Architecture Adopted the HTML5 semantic element to create a dedicated, off-screen sidebar panel for user controls, separating configuration options from the main countdown content. Integrated Google Material Icons stylesheet to render interactive trigger (“menu”) and dismissal (“close”) action elements. Implemented a native calendar interface using to capture target date modifications directly from the client view. Styling and Motion Mechanics Utilized fixed positioning (position: fixed) to pin the sidebar along the right viewport boundary, utilizing full height (100vh) to serve as a slide-out drawer. Applied transform: translateX(100%) to fully obscure the panel behind the right viewport edge by default, attaching a smooth CSS transition property (0.3s ease). Created a structural “.open” modifier class applied to the sidebar element (sidebar.open) that neutralizes the horizontal translation (translateX(0)) to bring the drawer into view upon click events. State Persistence via LocalStorage Refactored the global variable initialization to prioritize data retrieval from browser memory using localStorage.getItem(“targetDate”), ensuring fallback capability to the hardcoded default date string (“2027-01-01”) if empty. Bound a “change” event listener to the date input element. When a user updates the field, the new value is mirrored into localStorage under the unified key “targetDate”. Configured runtime updates where changing the input dynamically forces a complete recalculation of the timestamp integer and immediately restarts the global interval timer thread to prevent rendering stale countdown frames. Critical Bugs and Diagnostics Code Review Syntax Error Fix: Corrected an unescaped double-quote attribute typo inside the HTML element declaration where id=”“sidebar was breaking JavaScript’s DOM node selection lookup query. Selector Misalignment Fix: Resolved an animation breakdown where the “.open” conditional style rule was incorrectly targeted at the menu button instead of the sidebar wrapper element, preventing the slide-out sequence. Namespace Sync Fix: Addressed a string mismatch bug where initialization logic incorrectly requested the corrupted key string “targerDate” while event dispatchers stored mutations under “targetDate”, which consistently caused storage caching to break on reload."}, {"post_id": 13051, "ts": "2026-06-21T10:39:08Z", "hours": 0.5522, "text": "Devlog 05: Integrating Google Fonts Icons 1. Goal Implement a hamburger menu button by integrating Google Material Icons into the project. 2. Step 1 Implementation Added the Google Material Icons stylesheet link to the . Created a <button> containing a <span> with the material-icons class and the text “menu” to render the hamburger icon. Styled the button using CSS ( background: none , border: none ) to remove default browser styling and positioned it at the top-left corner using position: absolute ."}, {"post_id": 11692, "ts": "2026-06-19T01:41:54Z", "hours": 0.4172, "text": "Devlog 04: Dynamic Time Box VisibilityRequirement Hide time boxes that have a value of 0 to keep the UI clean, but prevent a box from hiding if a larger time unit still holds a value (e.g., if years > 0, months must not be hidden even if months == 0). Solution Implemented a cascading flag logic ( let hasValue = false ) executed from the largest unit (years) down to the smallest (minutes). Once any larger unit turns the flag true, all subsequent boxes remain visible regardless of their own value. Box elements are hidden dynamically using parentElement.style.display = \"none\" ."}, {"post_id": 10619, "ts": "2026-06-17T13:47:01Z", "hours": 0.6303, "text": "Devlog #2: Precision Countdown Algorithm Fixes Problem The previous countdown relied on dividing total seconds, which failed to calculate years and months accurately because real-world months have a variable number of days (28, 30, 31). Solution Shifted from pure division to a calendar-based object subtraction method. The system now calculates the differences for Y, M, D, H, M, S individually and applies a borrowing logic from the smallest unit up to the largest. It uses new Date(Y, M, 0).getDate() to dynamically fetch the exact number of days in the previous month when borrowing days. Logic Debunk: mo < 0 vs mo <= 0 The correct condition is mo < 0. The variable represents the difference between months. If mo equals 0, the target month and current month are the same, meaning no year needs to be borrowed. Using <= 0 would trigger a false borrow when months are identical, causing the month value to incorrectly jump by +12 and the year to decrease by 1. Bug Fixes Corrected the day borrowing condition from if (mo < 0) to if (d < 0). Fixed a typo where let m (minutes) was mistakenly subtracting now.getMonth() instead of now.getMinutes()."}, {"post_id": 10379, "ts": "2026-06-17T01:59:17Z", "hours": 0.3014, "text": "add some todos and changelog"}, {"post_id": 9955, "ts": "2026-06-16T14:11:15Z", "hours": 1.8083, "text": "the first project using html this year making a countdown timer"}]...
|
Title: Tick Tock by @ryderklh | Stardance
Devlogs Title: Tick Tock by @ryderklh | Stardance
Devlogs:
the first project using html this year making a countdown timer
add some todos and changelog
Devlog #2: Precision Countdown Algorithm Fixes Problem The previous countdown relied on dividing total seconds, which failed to calculate years and months accurately because real-world months have a variable number of days (28, 30, 31). Solution Shifted from pure division to a calendar-based object subtraction method. The system now calculates the differences for Y, M, D, H, M, S individually and applies a borrowing logic from the smallest unit up to the largest. It uses new Date(Y, M, 0).getDate() to dynamically fetch the exact number of days in the previous month when borrowing days. Logic Debunk: mo < 0 vs mo <= 0 The correct condition is mo < 0. The variable represents the difference between months. If mo equals 0, the target month and current month are the same, meaning no year needs to be borrowed. Using <= 0 would trigger a false borrow when months are identical, causing the month value to incorrectly jump by +12 and the year to decrease by 1. Bug Fixes Corrected the day borrowing condition from if (mo < 0) to if (d < 0). Fixed a typo where let m (minutes) was mistakenly subtracting now.getMonth() instead of now.getMinutes().
Devlog 04: Dynamic Time Box VisibilityRequirement Hide time boxes that have a value of 0 to keep the UI clean, but prevent a box from hiding if a larger time unit still holds a value (e.g., if years > 0, months must not be hidden even if months == 0). Solution Implemented a cascading flag logic ( let hasValue = false ) executed from the largest unit (years) down to the smallest (minutes). Once any larger unit turns the flag true, all subsequent boxes remain visible regardless of their own value. Box elements are hidden dynamically using parentElement.style.display = "none" .
Devlog 05: Integrating Google Fonts Icons 1. Goal Implement a hamburger menu button by integrating Google Material Icons into the project. 2. Step 1 Implementation Added the Google Material Icons stylesheet link to the . Created a <button> containing a <span> with the material-icons class and the text “menu” to render the hamburger icon. Styled the button using CSS ( background: none , border: none ) to remove default browser styling and positioned it at the top-left corner using position: absolute .
Devlog 06: Sidebar Menu and Persistent LocalStorage Integration Requirements and Architecture Adopted the HTML5 semantic element to create a dedicated, off-screen sidebar panel for user controls, separating configuration options from the main countdown content. Integrated Google Material Icons stylesheet to render interactive trigger (“menu”) and dismissal (“close”) action elements. Implemented a native calendar interface using to capture target date modifications directly from the client view. Styling and Motion Mechanics Utilized fixed positioning (position: fixed) to pin the sidebar along the right viewport boundary, utilizing full height (100vh) to serve as a slide-out drawer. Applied transform: translateX(100%) to fully obscure the panel behind the right viewport edge by default, attaching a smooth CSS transition property (0.3s ease). Created a structural “.open” modifier class applied to the sidebar element (sidebar.open) that neutralizes the horizontal translation (translateX(0)) to bring the drawer into view upon click events. State Persistence via LocalStorage Refactored the global variable initialization to prioritize data retrieval from browser memory using localStorage.getItem(“targetDate”), ensuring fallback capability to the hardcoded default date string (“2027-01-01”) if empty. Bound a “change” event listener to the date input element. When a user updates the field, the new value is mirrored into localStorage under the unified key “targetDate”. Configured runtime updates where changing the input dynamically forces a complete recalculation of the timestamp integer and immediately restarts the global interval timer thread to prevent rendering stale countdown frames. Critical Bugs and Diagnostics Code Review Syntax Error Fix: Corrected an unescaped double-quote attribute typo inside the HTML element declaration where id=”“sidebar was breaking JavaScript’s DOM node selection lookup query. Selector Misalignment Fix: Resolved an animation breakdown where the “.open” conditional style rule was incorrectly targeted at the menu button instead of the sidebar wrapper element, preventing the slide-out sequence. Namespace Sync Fix: Addressed a string mismatch bug where initialization logic incorrectly requested the corrupted key string “targerDate” while event dispatchers stored mutations under “targetDate”, which consistently caused storage caching to break on reload.
Devlog 07: URL Hash Routing Priority and Timer Encapsulation Debugging Feature and Priority Cascading Extended the state management architecture to support deep-linking properties using URL fragments (window.location.hash). Established a strict target resolution cascading hierarchy where URL fragment inputs take precedence over local user configuration memory, which in turn overrides the default fallback value (URL Hash > LocalStorage > “2027-01-01”). Implemented a regex filter pattern ( /^\d{4}-\d{2}-\d{2}$/ ) to sanitize incoming window location string tokens prior to committing them to the execution state. Refactoring and State Synchronization Modularized individual timer logic fragments into a single initialization routine initTimer() . This routine synchronously updates text container parameters, binds default input values, clears residual interval clocks, and re-allocates tracking loops. Modified input element state transformation bindings to mirror newly elected target values into the URL fragment row (window.location.hash) concurrently with local system memory blocks. Resolution of Block Scope Diagnostics Scope Overlap Fix: Corrected a critical runtime ReferenceError located inside the initTimer() wrapper where repeating the let primitive on the timerId reference allocated a local block-scope variable that collided with pre-initialization clear routines. Removing the redundant declarative keyword reinstated proper execution. -Missing Invocation Fix: Appended an initial entry point declaration initTimer(targetString) to successfully boot up active countdown cycles on fresh page load sequences.
Devlog 08: Viewport Configuration and Responsive Layout Calibration Viewport Meta Integration and RWD Layering Integrated the standard responsive configuration tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> into the document structure header. Resolved a layout compression behavior where mobile rendering engines applied fallback desktop scaling parameters (typically a virtual width of 980px), forcing severe global downscaling on compact displays. Enabled native device pixel scale translations, forcing media container thresholds to evaluate against true hardware dimensions rather than high-density viewport projections. Fluid Grid and Token-Based Scaling Fixed an interface clipping issue where structural boundaries failed to dynamically contract on viewport widths below 600px. Activated the custom @media (max-width: 600px) breakpoint directives, downscaling internal flex container gaps from 15px to 10px and adjusting modular countdown component nodes for enhanced display symmetry. Re-calibrated proportional font metrics across mobile layouts, mapping secondary tracking units down to a structured 1.6rem baseline and bringing the primary title signature to an optimized 2rem boundary. Cross-Platform Interface Layout Fixes Restructured flex-wrap component mechanics within the core visualization container to smoothly adapt from unified desktop rows into multi-line mobile block grids. Eliminated persistent scrollbar overheads on handheld viewports by normalizing absolute coordinate assets and applying elastic percentage constraints across core elements.
Devlog 09: Synchronization Bug Fixes and URL Component Decoding Argument Reference and Logic Rectification Corrected a ReferenceError inside the titleInput listener by swapping an un-sanitized token ( newDate ) with the valid, persistent variable targetString . Fixed an assignment error where a single operator ( if(newTitle="") ) muted intended comparison logic, replacing it with a strict equality check ( newTitle === "" ). URL Normalization and Component Decoding Integrated decodeURIComponent() into loadInitialState() and the hashchange observer to prevent percent-encoded character corruption. Resolved text distortion for multibyte layouts (e.g., Chinese characters), ensuring continuous string fidelity across shared links. Established a default text fallback (“目標”) to secure interface rendering stability during empty input states.
Devlog 10: Structural File Extraction and Modular Synchronization Stability Code Base Decomposition and Externalization Refactored the unified codebase by isolating inline design frameworks and layout scripts into dedicated style.css and script.js internal resources. Streamlined index.html structure down to essential structural markup definitions, using external linkages to boost source reading efficiency and code maintainability. Character Processing and Stability Verification Verified text encoding boundaries across external routing changes to preserve multibyte text inputs (“目標日”, “目標”) without producing character distortion issues. Maintained responsive flex alignments and layout fluid bounds on smaller screens while decoupling runtime system layers.
Devlog 11: Modular Display Mode Architecture and Layout Jitter Resolution Feature Implementation & State Persistence Introduced a feature toggle layout inside the sidebar control node, offering real-time transitions between comprehensive chronological breakdowns and solitary metric configurations. Wired state persistence modules utilizing the local browser data subsystem ( localStorage ) to preserve client display configurations across session cycles and application reboots. Updated the data ingestion routing logic ( loadInitialState ) to safely aggregate user layout states without stepping over parameter strings delivered via URL fragment references. Precision Calculation & Dynamic Interface Masking Integrated an isolated decimal extraction calculation routine within the interval processing tree ( updateTimer ) dedicated to managing strict single-unit tracking parameters. Configured programmatic style visibility switches across atomic timer components, enforcing clean element masking on non-applicable duration counters when single-unit modes trigger. Typographic Stabilization & Layout Shifting Mitigation Corrected a severe layout jitter anomaly inside flexible grid clusters caused by variable font character dimensions shifting container boundaries during fast string state invalidations. Implemented font-variant-numeric: tabular-nums to enforce strict monospaced numeral allocation, keeping external box dimensions static regardless of structural text mutations. Introduced a dynamic responsive structural modifier block ( .mode-single ) to adjust component paddings, implement generous baseline tracking, and elevate text sizing bounds when processing simplified metrics.
Devlog 12: Fluid Typography and Viewport-Adaptive Interface Spacing Viewport-Proportional Layout Calibration Implemented fluid layout scaling mechanics across the primary text blocks utilizing the CSS clamp() function, anchoring layout metrics dynamically between absolute pixel boundaries and relative viewport height units ( vh ). Re-architected spacing margins below the core header display ( #event-label ) to smoothly scale inside an adaptive range ( clamp(5px, 2vh, 30px) ), optimizing structural vertical padding on shifting device orientations. Calibrated upper layout boundaries for the structural footer element ( #target-label ) using fluid scaling boundaries ( clamp(15px, 3vh, 40px) ), ensuring consistent geometric clear space relative to adjacent countdown blocks. Text Alignment and Flow Refactoring Transformed the target calendar description layer ( #target-label ) from inline formatting definitions into explicit block layout models ( display: block ), stabilizing custom spacing calculations and forcing uniform horizontal element boundaries. Enforced complete cross-axis block isolation by assigning absolute width restrictions ( width: 100% ) onto trailing description elements, smoothly pushing metadata strings down beneath the dynamic flexible tracking container.
Devlog 13: Native Sharing Integration and Address Synchronization Control Native Sharing and Fallback Mechanics Integrated a social propagation module ( #share-menu-btn ) inside the header actions block, utilizing the Web Share API to access native mobile distribution panels. Engineered an automated asynchronous clip fallback sequence that overrides processing blocks on unsupported desktop environments, programmatically duplicating host URL hashes via the navigator clipboard asset pool. Applied stateful visual interaction hints onto the interactive sharing interface, dynamically toggling system icons to verify action fulfillment before returning properties to base states. Hash Serialization and Router Interdependency Fixes Resolved an critical structural validation bug inside the initial state loader ( loadInitialState ) where an premature execution return statement truncated processing flows, preventing state restorations. Re-architected data assignment flows inside initialization cycles ( initTimer ), deploying window.history.replaceState() to inject fully compiled variable string parameters back into empty browser URI paths. Secured total address compliance across baseline entries, guaranteeing structural data layers are available to secondary network nodes even when sharing operations occur prior to custom value updates.
Devlog 14: Localization Migration and Pre-Ship Consolidation UI Text Internationalization Migrated all hardcoded multi-byte interface character arrays across template structures ( index.html ) and operational state modules ( script.js ) into standardized Western European typography strings. Refactored semantic definitions within input control placeholders and baseline reference containers to achieve uniform structural layout scaling under single-byte font rendering constraints. Documentation and Release Management Compiled a foundational system architectural reference ( README.md ) specifying setup logic, reactive routing hooks, and custom persistence implementations. Executed full client-side behavior validations on state-tracking components ahead of the definitive production deployment pipeline for Ship #2.
Devlog 15 Phase 1: Creating the Skeleton and Splitting Components Overextending the Style Files The project started as a single page where all HTML, CSS, and JS lived together. When I created the unified BaseLayout.astro , I kept the old global.css . However, that file had specific styles just for the countdown page, which broke the layout of the new homepage. Cleaning Up Style Pollution To fix this, I moved the countdown-specific CSS directly into the <style> tag of the countdown page ( index.astro ). Astro automatically confines these styles to their own page, ensuring they no longer mess up the homepage layout. Phase 2: Fixing Astro’s Route Misinterpretation Keeping Scripts in the Wrong Folder I originally placed the logic script ( script.js ) inside the src/pages/countdown/ folder to keep it close to the page. During local testing, Astro threw an error saying there was no API route handler for that JavaScript file. Moving Scripts to a Dedicated Folder I learned that Astro treats every file inside src/pages/ as a public URL or an API route. To fix this, I moved the file to a new src/scripts/ folder and renamed it countdown.js , keeping the pages folder strictly for actual web pages. Phase 3: Resolving Build Crashes from File Names Using Special Characters in Names Inside my documentation folder, I named a development note file ship#2.md . When I ran npm run build , the entire build process crashed immediately with a path error. Removing the Broken Characters The build tool (Vite) treats the # symbol as a URL anchor link, which breaks file path reading. I renamed the file to ship2.md , and the system was able to parse the path and build successfully. Phase 4: Overcoming the Environment Conflict (Server vs. Client) Running Browser Code on the Server This was the biggest challenge. When I imported countdown.js into the page, the build failed multiple times, throwing errors like window is not defined and document is not defined . Protecting the Code with Environment Guards Astro runs pages on the server to generate static HTML during the build step. Because Node.js does not have browser features like window or document , the script crashed. I fixed this with two steps: I imported the script using the ?url suffix in Astro so the server only records its path instead of running it. I wrapped all the browser-specific logic inside a typeof window !== "undefined" check. This ensures the script stays quiet during the server build and only runs once it reaches the user’s browser.
Devlog 16: Dashboard Layout Fixes Fixing Layout and Compression Issues Compressed Card Icons Problem : The card icons shrank and deformed when the screen size changed. Solution : Added flex-shrink: 0; to the icon class to force them to keep their correct size. Cards Stacking Vertically Problem : The tool cards unexpectedly stacked into a narrow, single column right in the middle of the screen. Even though there was plenty of empty space on both sides of the desktop browser, the grid refused to expand horizontally and display the cards side-by-side. Troubleshooting : The grid’s layout formula was correctly set to repeat(auto-fit, minmax(250px, 1fr)) , which should have allowed multiple columns. However, the parent container ( .home-container ) was set to display: flex with align-items: center . In a vertical Flexbox layout, this alignment forces child elements like the grid to shrink to their absolute minimum width based on content, instead of filling the screen. To make matters worse, a strict max-width: 300px; was hardcoded onto the .tool-grid . Since two cards plus their gaps required at least 525px to sit side-by-side, the 300px restriction made it mathematically impossible for the browser to create a second column. Solution : Removed the restrictive max-width: 300px; from the grid and replaced it with a generous max-width: 1200px; to allow proper breathing room on large screens. Added width: 100%; to the grid class, forcing the grid container to break out of the Flexbox compression and stretch completely across the parent container. This allowed the responsive auto-fit engine to finally see the available width and cleanly arrange the cards into multiple columns. Fixing Grid Spacing and Syntax Errors Layout Breaking Off-Screen Problem : The grid expanded past the screen edges and cut off the card content. Solution : Added box-sizing: border-box; to the main container so that padding is counted inside the total width. Broken Units and Side Scrollbars Problem : An annoying horizontal scrollbar appeared at the bottom of the page. Solution : Fixed a typo where width: 100sww; was written instead of 100svw , and added body { margin: 0; } to clear default browser spaces.
Devlog 17: Project Hub and README Expansion Moving from a Single Page to a Tool Hub Goal : Transformed TickTock from a single countdown page into a comprehensive time-management utility hub powered by Astro. Implementation : Created a main dashboard page ( src/pages/index.astro ) to serve as the gateway for current and future time tools, using a shared layout for a consistent user experience. Adding Future Roadmap and Project Documentation Goal : Wrote a complete README.md to document the new project architecture, local testing steps, and automated GitHub Pages deployment. Future Vision : Updated the repository roadmap to announce upcoming tools built for the Hack Club Stardance event, including a Pomodoro Timer, World Clock Board, Minimalist Timer, and Time Progress Bars.
Devlog 18: Adding Hub Sharing Functionality Integrating Client-Side Script Safely Implementing the Homepage Share Button Problem : The dashboard needed a simple button to share the current hub URL, but running browser APIs directly could break Astro’s static site generation (SSG) compiler. Solution : Added an inline <script is:inline> block to the index page. This bypasses the server-side build process and safely binds the sharing and clipboard logic only when the page loads in the user’s browser.
Devlog 19: Building the Adaptable Digital Clock Implementing Native Date Formatting Problem : The clock header needed to show the full current date (e.g., “Sunday, July 12, 2026”) dynamically without taxing browser performance or importing heavy external date libraries. Solution : Added a #date-label placeholder to the template and used the native JavaScript toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) inside the main runtime loop to render lightweight, perfectly formatted timestamps on every update. Creating Fluid Visual Oscillations via Math.sin() Problem : Traditional blinking colons look rigid and distracting, failing to deliver a premium, organic feel for an active time-management tool. Solution : Avoided simple CSS toggles and leveraged a true trigonometric formula inside a requestAnimationFrame loop. By mapping high-precision timestamps through Math.sin() , the opacity gracefully curves between 0.2 and 1.0 , producing a perfectly smooth, wave-like breathing animation. Binding Custom Display and Layout Controls Problem : The interface required instant controls for 12/24-hour formats, font adjustments, and a standalone full-screen view while managing layout side effects. Solution : Wired up event listeners to modify global runtime states and inline CSS font families on the fly. Integrated the HTML5 Fullscreen API onto the #clock-screen element, backed by a global fullscreenchange listener to seamlessly catch manual ESC escapes and keep the toggle button states perfectly in sync.
Devlog 20: Settings Memory and Dynamic Sharing Adding Setting Memory and URL Sync Keeping your clock layout saved Persistent settings : The clock now remembers your favorite layout. Your choice of time format (12/24h) and font style is instantly saved directly to your browser’s local storage. URL sync : We linked these settings directly to the URL hash (like #12hr&mono ). When you refresh or load the page, your exact preferred theme loads up right away. Smart Sharing and Hub Integration Spreading the time and completing the hub Dynamic sharing : Added a share button that grabs your exact custom clock URL. It uses the Web Share API when available, and easily falls back to copying the link to your clipboard with a smooth checkmark animation on success. Connecting the dashboard : Linked the completed clock page to our homepage hub grid and updated the site layout, officially making TickTock a multi-tool station.
Devlog 21: Architecture Normalization and Layout Fine-Tuning Directory Restructuring & Future-Proofing Preparing for scalability Digital Clock Renaming : To prevent future routing conflicts as the project scales, we successfully renamed clock.js to digital-clock.js and adjusted the main page path to /src/pages/digital-clock/ . This cleanly isolates this feature from upcoming modules like World Clock or Pomodoro Timer. Dependency Clean-up : Updated all asset paths and module script injections across the hub, fully standardizing the multi-tool routing structure under the /TickTock/ basePath. Layout Fixes with Global CSS Variables Resolving invalid CSS properties via JS injection Replacing Non-Standard Styles : Fixed a crucial layout issue where arbitrary if(...) conditions inside CSS were breaking colon component constraints. Dynamic Width Injection : Migrated the layout parameters directly into digital-clock.js using the standard document.documentElement.style.setProperty API. The .colon element now seamlessly reads the responsive --clock-colon-width CSS variable, adapting perfectly across Sans, Serif, and Mono configurations without any jumping side effects.
Devlog 22: F11-Equivalent Fullscreen via Root Element Standardizing Fullscreen to document.documentElement Fixing disappearing layout elements The Pitfall : Previously, calling requestFullscreen() on the individual #clock-screen container caused the browser to isolate it from the DOM layout. This triggered default browser styling which rendered a pitch-black backdrop, and completely hid crucial layout parts like the header, footer, and side menu buttons. The Solution : We shifted the fullscreen API target from the sub-container directly to document.documentElement (the global <html> node). This aligns the button’s behavior perfectly with standard keyboard F11 fullscreen events. The Result : All global UI elements (header, footer, navigation) now scale smoothly and remain perfectly visible and interactive without any layout shifts or z-index clashing.
Devlog 23: Global Branding Relocation and Logo Navigation Moving Title Label to BaseLayout Unifying the brand and improving UX Header Linkification : Refactored the main title-label (“TickTock”) out of individual page templates and integrated it directly into the global BaseLayout.astro . Back-to-Home UX : Wrapped the brand title in an <a> tag. Now, clicking the brand logo on any sub-tool instantly routes the user back to the home dashboard Hub, offering an intuitive, web-app-like navigation experience.
Devlog 24: Color Architecture Refactoring with Design Tokens Two-Tier CSS Variables Global Tokens: Extracted hardcoded hex colors into primitive color names inside global.css. Theme Tokens: Created a semantic layer mapping elements like –bg-app and –accent-color directly to global tokens. Clean Codebase Update Component Styles: Replaced absolute colors across the layout, dashboard hub, countdown, and clock templates with var() variables. Script Alignment: Updated dynamic checkmark colors in JavaScript to read –accent-color instead of raw hex values. Future Scope: The design is now fully abstracted, meaning light mode implementation will only require token swapping without editing individual component code.
Devlog 25: Theme Toggle Implementation with Dark and Light Modes Light Theme Tokens Override Added :root[data-theme=“light”] in global.css to swap semantic theme variables for light background, borders, and high-contrast amber accents. Preserved existing component styles while smoothly transitioning body colors on theme switch. Sidebar Toggle Component and Logic Integrated a theme toggle button (#theme-toggle-btn) inside the BaseLayout header actions. Built persistent theme state logic using localStorage and system prefers-color-scheme detection. Used textContent on icon elements to dynamically switch between dark_mode and light_mode icons without type errors.
Devlog 26: Typo Correction and Expandable Directory Menu Typo Correction Fixed property naming error from –accent-contract-text to –accent-contrast-text in global CSS. Expandable Tools Directory Converted static directory links into a native component with smooth arrow rotation styling. Enabled server-side open status via open={isHomePage} in BaseLayout, defaulting to expanded on the home hub and collapsed on sub-tool pages.
Devlog 27: Time Progress Bar Feature Porting and JS Modular Refactoring Astro Slot Architecture & CSS Variable Integration Ported the standalone Time Progress Bar tool into the Astro layout system using designated slots ( #head , #header-content , #custom-menu , and #main-content ). Converted hardcoded hex colors into semantic global theme CSS variables ( --accent-color , --component-bg-standard , --text-heading ), ensuring native support for Dark and Light mode toggling. Replaced the dropdown filter with sidebar multi-select checkboxes for custom control over visible time progress units. JavaScript Modular Refactoring & Bug Fixes Decoupled single-script logic into dedicated, single-responsibility functions ( initSidebarToggles , calculateTimeProgress , updateTicksUI , updateProgressCardUI , and updateSingleCardUI ). Resolved JavaScript syntax errors, including missing function keywords, JS Automatic Semicolon Insertion (ASI) line-break issues on return statements, and uncalled Date method parentheses. Streamlined animation frame rendering by passing structured data from math calculations directly into UI updater functions.
Devlog 28: Layout Overflow Fixes and UI Polish Layout & Scrollbar Stability Added scrollbar-gutter: stable to html in global.css to reserve vertical scrollbar space, preventing horizontal overflow caused by layout reflow. Applied overflow-x: hidden to main containers and .progress-card to prevent percentage tags and thumbs from clipping past container edges at 100%. CSS Rule Corrections Fixed CSS property error by setting .track width to 100% instead of unitless value. Fine-tuned progress bar wrapper styles to ensure smooth visual layout under both dark and light themes.
Devlog 29: URL Hash Sync, LocalStorage Persistence & Universal Share Event URL & State Persistence Integrated URL Hash ( #year,month,... ) and localStorage synchronization into time-progress.js to preserve users’ toggle preferences across reloads and shares. Added a hashchange event listener to ensure UI check states dynamically update when users use browser navigation (Back/Forward). Centralized Layout Share Event Refactored the #share-menu-btn event listener into BaseLayout.astro , eliminating duplicate share logic across individual tool pages. Leveraged document.title dynamically to provide clean, contextual titles for native Web Share API and clipboard copy fallbacks.
Devlog 30: Image Export Feature & Template Refactoring Image Export Feature Integrated html2canvas library to enable one-click PNG image export of the active progress dashboard. Added an “Export as Image” button inside the custom sidebar menu with dedicated styling. Handled theme-aware background rendering by dynamically querying computed global CSS variables ( --bg-app ). DOM Template & Dynamic Watermark Refactored dynamic watermark creation using the HTML <template> element ( #export-watermark-template ), cleanly separating DOM structure from JavaScript execution logic. Configured dynamic timestamps using now.toLocaleString() to inject real-time snapshot dates and times into exported images. Added ignoreElements filtering in html2canvas to prevent unchecked/hidden .progress-card elements from creating top/bottom visual gaps in exported images. Bug Fixes & Refactor Fixed a TypeError on insertBefore / appendChild by referencing clone.firstElementChild to extract the correct Element Node from DocumentFragment . Resolved HTML/JS ID typos ( export-watermark-template ) and method call mismatches to ensure reliable script execution.
Devlog 31: Template Canvas Architecture & Reference Refactoring Independent Canvas Architecture Replaced direct DOM manipulation of live dashboard elements with a dedicated, off-screen template canvas ( .export-canvas ). Cloned active .progress-card elements into an isolated container ( .export-cards-holder ), ensuring the on-screen UI remains completely untouched and non-flickering during image generation. Moved aspect ratio, high-resolution dimensions (600x600), padding, and font-scaling rules directly into CSS for clean separation of concerns. Error Fixes & Cleanup Fixed ReferenceError caused by leftover references to targetContainer and stampEl inside initExportImageFeature . Updated html2canvas target from main dashboard container to the temporary canvasEl . Streamlined fallback DOM cleanup logic inside the try...catch block to guarantee off-screen elements are properly garbage collected.
Devlog 32: Dynamic Canvas Aspect Ratio Calculation Features & Refactoring Implemented dynamic aspect ratio calculation for PNG exports ( Height = 140 * Count + 180 ). Applied responsive auto-scaling for .export-canvas to ensure optimal vertical spacing regardless of selected cards count. Merged feature/export-image branch into main after verifying clean template rendering and correct node referencing.
Devlog 33: Pomodoro Segmented Timeline & Layout Integration Segmented Timeline Layout Integrated BaseLayout slots for the new Pomodoro page, separating sidebar settings from the main dashboard. Built a visual segmented timeline ( .timeline-track ) with flex-proportional work/break segments and a dynamic progress pin ( .timeline-pin ). Core Logic & State Setup Refactored state object fields ( workDuration , breakDuration , timeRemaining ) to ensure clean state initialization. Added timestamp delta checking on startup to preserve accurate remaining time across page reloads or background tabs.
Devlog 34: Pomodoro Core Timer & Segmented Timeline Integration Features Implemented static audio notification system via HTML5 Audio API targeting public/sounds/notification.mp3 . Architecture & State Management Implemented timestamp delta verification ( endTime - Date.now() ) to maintain countdown accuracy during background tab throttling or page reloads. Decoupled primary control actions across main page and sidebar controls ( #menu-start-btn , #cycles-input ). Bug Fixes & Refactoring Fixed ReferenceError during event initialization by enforcing state argument scoping within bindEvents . Refactored loadStateFromLocalStorage parsing logic to filter "undefined" string literals and clear corrupted cache gracefully.
Devlog 35: Pomodoro State Transition & Auto-Loop Refactoring Core Logic & State Fixes Auto-Phase Transition Fix : Resolved state lock ( status: 'running' ) preventing automatic transition from Focus to Break. Added explicit status resetting in handlePhaseEnd before invoking startTimer . Timer Precision : Replaced Math.round with Math.ceil in countdown logic to eliminate early sound triggers caused by rounding errors. Timestamp Recalibration : Implemented dynamic endTime re-calculation when switching modes ( work ↔ break ) to maintain state consistency.
Devlog 36: Update Docs & Merge Update Docs Readme: Add the links of the new tools Ship#4: Write Ship#4.md Merge!!!!! Merge feature/pomodoro into main Fortunately no error poping out!
Devlog 37: Multi-Timer UI Layout & Input Controls Form Inputs & Adjustments Built HH/MM/SS number input boxes with range limits and zero-padding logic on blur. Implemented stepper adjustment buttons for quick time value tweaking. Sidebar Timer List Layout Added sidebar timer list container to preview user-created countdown items. Integrated quick action delete buttons for item removal. Main Dashboard Circular Timer Constructed countdown card layout featuring SVG dynamic progress ring. Centered time readout using tabular-nums formatting to eliminate number jitter. Action Control Group Laid out card control buttons including play, pause, and replay. the ui was so tiring… i DID remember to open a new branch (feature/timer-main) …
Devlog 38: Multi-Timer Logic & Bug Fixes JS Managed multi-timer state using plain object arrays. Implemented saveTimers() and loadTimers() for LocalStorage persistence. Linked input fields with setupArrowBtns() to handle unit value increment and decrement bounds. Cloned <template> elements to dynamically generate sidebar list items and main cards via renderAll() . Added item deletion logic via handleDelete() to update state and UI. Established a startGlobalTick() loop running every 200ms using endTime offsets to prevent background tab drift. Calculated SVG circle strokeDashoffset dynamically based on remaining time ratios. Debugging & UI Patching Placing <template> tags inside slot="template-content" . Adding missing id="timer-container" . .textContent.textContent to .textContent Data.now() to Date.now() . timers.status to timer.status . finally got multi-timer state and progress rings syncing properly… bugs fixed and back to smooth sailing…
Devlog 39: Smooth Action Button Transitions Button Collapse & Spacing Animate Added max-width , margin: 0 , and padding: 0 constraints to .is-hidden to smoothly collapse hidden buttons without leaving blank layout gaps. Expanded base state with explicit max-width boundary to allow width-based CSS transitions. much smoother ♪(´▽｀)
Devlog 40: Alarm Audio & LocalStorage Independent Alarm Audio Handling new Audio() allowing each finished timer to play independent looping sound effects concurrently. Bound alarm termination directly to handleReset() and handleDelete() . LocalStorage Serialization Fixes Sanitized timer state object before serialization in saveTimers() by stripping transient DOM/Audio references ( alarmAudio ) to prevent JSON stringification crashes. Added type validation ( typeof alarmAudio.pause === "function" ) inside stopAlarm() to prevent runtime TypeError issues during state rehydration. Post-Reload Alarm & Visual Sync Updated renderAll() to resume alarm sound playback and background pulse animation for ended timers across page reloads. Cleared endTime correctly during timer reset to normalize state lifecycle. alarm.wav Using LMMS to create alarm.wav for the alarming when timer.status==="ended" .
Devlog 41: Dual-Text Display & Running Animation Sub-Text Total Duration Display Added .timer-text-sub element inside the ring container to preserve and display the initial totalSeconds value. Styled sub-text using lighter font weights and var(--text-muted) . Dynamic Running Visual Effects Added .is-running state toggle based on timer.status === "running" . Implemented @keyframes timer-text-flash pulsing animation to provide continuous visual feedback while countdown is active.
Devlog 42: Timer Reordering & List Re-Sorting Reordering UI Controls Added .sort-action control group with .sort-up and .sort-down arrow buttons to the template layout. Dynamic Array Mutation & Re-rendering Implemented handleMoveTimer(id, direction) to handle array element swapping with upper and lower boundary bounds checks. Bound click handlers in renderListedTimer() to execute reordering operations, trigger LocalStorage updates, and instantly re-render the UI layout via renderAll() .
Devlog 43: Timer Integration & Navigation Update Navigation & Home Page Integration Added Timer card entry to the main landing page ( tool-card layout with hourglass Material symbol). Added direct Timer link to the global navigation bar in BaseLayout.astro . Feature Branch Merge Merged feature/timer-main into main , bringing in the new /timer page route, timer.js logic, sound assets ( alarm.wav ), and updated layout components. YEAYYY
Devlog 44: Stopwatch Layout Template & Layout Migration Ported side-menu and main container structures from Timer to Stopwatch layout ( index.astro ). Structured sidebar elements: .stopwatch-adding-action-btn and .stopwatch-list-container for dynamic item injection. Added template placeholders ( #listed-stopwatch-template and #stopwatch-card-template ). Stopwatch Card & Lap Data Display Integrated core display components: .stopwatch-text and .stopwatch-text-sub . Created interactive control group ( .stopwatch-card-action-btn ) supporting Start, Pause, Replay, and Lap actions. Designed a 3-column CSS Grid table ( .stopwatch-lap-container ) to organize lap metrics ( i , lap , total ).
Devlog 45: Initial Stopwatch Logic & Dynamic State Scaffolding Core State & Lap Data Architecture Designed a stopwatch schema tracking dynamic state ( idle | running | paused ) and an array of individual lap records ( laps ). Streamlined time calculation to compute elapsed milliseconds dynamically directly using timestamps ( Date.now() - lap.startTime ), eliminating redundant accumulator fields like startTime or elapsedTime . Interactive Handlers & Lifecycle Operations Implemented core lifecycle handlers: handleStart , handlePause , handleReset , handleLap , and handleDelete . Integrated updateCardUI and updateCardBtns to reflect running, paused, and idle UI visual feedback dynamically. Built active DOM updates for lap histories inside updateCardLapGrid using index-based duration summation for lap and total times. Enabled global runtime updates via startGlobalTick() timer intervals and list reordering via handleMoveStopwatch() .
Devlog 46: UI Fine-tuning & Timing Logic Optimization Lap Calculations -Replaced laps.forEach with for (let j = 0; j <= i; j++) to ensure cumulative total times ( totalMS ) strictly correspond to the current lap index. Layout Enhanced formatTime() rendering logic by applying inline styles width , transform: scaleX(0.8) , text-align: center to dynamic span elements, preventing font-width shifting during rapid ticker updates. Dynamic Rendering Integrated updateListedStopwatch() into the global interval loop, enabling sidebar preview labels to tick synchronously with active main cards. Optimized state updates to target individual time elements instead of triggering full list re-renders on every ticker frame. Added optional chaining laps?.[0]?.startTime across rendering pipelines to prevent runtime exceptions when initializing empty stopwatches.
Devlog 47: Pause Compensation Pause Duration Offset Implemented pauseDuration calculation Date.now() - pauseStartTime during resume actions status === "paused" . Shifted all existing lap timestamps lap.endTime += pauseDuration forward to subtract paused time intervals. State-Aware Timestamp Resolution Standardized timestamp evaluation across renderers handleLap , renderListedStopwatch , updateListedStopwatch , and updateCardUI using ternary state checks: const now = stopwatch . status === " running " ? Date . now () : stopwatch . pauseStartTime ;
Devlog 48: DOM Selector Bugfixes & Homepage Quick Access DOM Query Selector & Reference Repairs Updated querySelector in updateListedStopwatch from target class .listed-stopwatch-demo to parent wrapper .listed-stopwatch[data-id="..."] , resolving element lookup failures during live updates. Homepage Integrated direct links and dedicated preview cards for the Stopwatch application into index.astro and BaseLayout.astro .
Devlog 49: Lap Data Export Plaintext Lap Data Serialization formatLapsOutput : a dedicated text formatter that converts active stopwatch data into structured tab-separated values (TSV) suitable for copying. Async Clipboard Copy Logic Implemented an async wrapper using navigator.clipboard.writeText() with built-in error handling ( try/catch ) and user alerts for unsupported environments or clipboard permission rejections. Interactive Copy Feedback UI Wired copyBtn click events to trigger text copying and dynamically update the button icon ( check or error ) and theme accent color.
Devlog 50 Layout Refactoring Scroll Restructuring Shifted .stopwatch-container layout from vertical wrapping ( flex-wrap: wrap ) to a single-row horizontal scroll track ( flex-wrap: nowrap with overflow-x: auto ).
Devlog 51: Asset Migration Asset Directory Migration Moved audio assets ( alarm.wav and notif.wav ) from the static /public/sounds/ directory into the source-managed asset pipeline at src/assets/sounds/ . Module Import & Bundler Integration Replaced hardcoded absolute URL paths ( "/public/sounds/..." ) with explicit ES module imports ( import alarmSoundUrl from '../assets/sounds/alarm.wav' and import notifSoundUrl from '../assets/sounds/notif.wav' ) across timer.js and pomodoro.js .
Devlog 52: GitHub Pages Audio Path Resolution Fixes Absolute Repository Subpath Hardcoding Replaced environment variable dynamic paths ( import.meta.env.BASE_URL ) with direct base-path URLs ( '/TickTock/sounds/alarm.wav' ) in playAlarm() . i have no idea why that happened
Ships:
What I Made I made a Countdown Web App called “Tick Tock.” It shows the exact years, months, days, hours, minutes, and seconds left until January 1, 2027. What Was Challenging Calculating months and years was hard. Months have different days (28, 30, or 31), so I had to write smart JavaScript code to borrow days and keep the timer 100% accurate. What I Am Proud Of It Works!: Actually this is my first time using html to build a website. Clean Design: I fixed the layout bugs and made a dark-mode interface. How to Test It https://klhrd.github.io/TickTock/
WHAT I MADE/THINK? I made a long-term countdown timer for events. It’s really hard for me to build things in a way that is completely new to me. I’ve been stuck not only with programming languages but also with English. However, through this project (STARDANCE), though I didn’t create something really impressive, I think I learnt A LOT. Features Live Countdown Full mode ⭐Days mode Customizable ⭐Change Target Date ⭐Edit Event Title ⭐automatically save in localStorage & url# ⭐share btn Dark Mode UI ⭐means new features of the previous ship WHAT I LEARNT? basic GIT code basic HTML/CSS3/JS How to write DevLogs REPLIES I’ve read all the replies of the ship#1. And lots of them mentioned the same thing. Thanks to everyone who give me feedback. Hope there’s the better version of previous ships. 1. ABOUT CHANGEABLE TARGET Now you can pick any target date and even edit the event title right from the sidebar. 2. ABOUT LANGUAGE I’ve fully migrated the app to English now. 3. ABOUT DEVLOG I’ve leveled up my devlog game for this update—documented all the engineering details and bugs I fixed this time. TRY IT! 2027 New Year NC Finals Weekend US Open
WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a beautiful, highly customizable Digital Clock. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features ⭐Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title ⭐Digital Clock ⭐12-hour / 24-hour format ⭐3 Font styles (Sans, Serif, Mono) ⭐Fullscreen mode (Header/Footer kept!) ⭐Smooth breathing colon animation automatically save in localStorage & url# Lightweight ⭐means new features of the previous ship WHAT I LEARNT? A lot of new things about Astro and NodeJS How to structure routes for multiple tools (Refactoring files) Advanced CSS (using global variables to adjust layout gaps dynamicly) REPLIES Thank you so much for the 115 stardust and the amazing feedback! I read every single review from Ship #2, and they helped me make this update so much better. 1. ABOUT MORE FEATURES Many suggested adding more tools or events. I turned the website into a Hub and built the Digital Clock as our second official tool! 2. ABOUT THE SCREENSHOT IN README Two reviewers mentioned adding screenshots. I’ve updated the README with fresh screenshots so people skimming through can see the UI instantly. TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif)
WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a Pomodoro Timer and a Time Progress Displayer. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title automatically save in localStorage & url# Digital Clock 12-hour / 24-hour format 3 Font styles (Sans, Serif, Mono) Fullscreen mode (Header/Footer kept!) Smooth breathing colon animation automatically save in localStorage & url# ⭐Time Progress Bar ⭐Export as image ⭐Switchable hide/show ⭐Pomodoro Timer ⭐Customable number of cycles ⭐Pause at any time ⭐Notification Sound Lightweight ⭐Light mode/Dark mode ⭐Quick link to other tools ⭐means new features of the previous ship WHAT I LEARNT? A lot of new things about git JS, Astro… TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif) Time Progress Pomodoro Timer
WHAT I MADE/THINK? I expanded TickTock from a single timer into a multi-tool station (Hub)! This time, I built a Timer and a Stopwatch. It was a huge challenge for me to handle standard browser behaviors, especially turning a single-page SPA into a structured Astro website with a homepage and sub-pages. It took lots of testing, but I feel so proud when everything finally aligned perfectly. Features Homepage Hub Dashboard Live Countdown Customizable Countdown Full mode / Days mode Change Target Date Edit Event Title automatically save in localStorage & url# Digital Clock 12-hour / 24-hour format 3 Font styles (Sans, Serif, Mono) Fullscreen mode (Header/Footer kept!) Smooth breathing colon animation automatically save in localStorage & url# ⭐Timer ⭐Mutiple timers at one page ⭐Keep going after refreshing website ⭐Circular progress bar ⭐Sortable timers ⭐Alarm and flash on completion ⭐Stopwatch ⭐Mutiple stopwatches at one page ⭐Keep going after refreshing website ⭐Sortable timers ⭐Able to lap and split ⭐Able to copy total time and laps info Time Progress Bar Export as image Switchable hide/show Pomodoro Timer Customable number of cycles Pause at any time Notification Sound Lightweight Light mode/Dark mode Quick link to other tools WHAT I LEARNT? A lot of new things about git How to write devlogs JS, Astro… TRY IT! TickTock Home Hub NC Finals Weekend Digital Clock (12H / Classic Serif) ⭐Timer ⭐Stopwatch Time Progress Pomodoro Timer ⭐means new features of the previous ship...
|
1793872330.6333325
|
1793958730.6333325
|
|
19806
|
My awesome macropad! by @jesal | Stardance
|
jesal
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My awesome macropad! by @jesal | Stardance
|
1793530313.1584148
|
1794135113.1584148
|
|
19807
|
My very own WebOS by @Myke | Stardance
|
Myke
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @Myke | Stardance
|
1793771251.5080056
|
1794376051.5080056
|
|
19808
|
My first slack bot! by @Vedang | Stardance
|
Vedang
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @Vedang | Stardance
|
1794059450.3815296
|
1794664250.3815296
|
|
19809
|
EEG CONCENTRATION HEADBAND by @nishchaybhudia | St EEG CONCENTRATION HEADBAND by @nishchaybhudia | Stardance...
|
nishchaybhudia
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: EEG CONCENTRATION HEADBAND by @nishchaybhud Title: EEG CONCENTRATION HEADBAND by @nishchaybhudia | Stardance...
|
1793919161.4601798
|
1794783161.4601798
|
|
19810
|
The ALARM by @m1cha3l | Stardance
|
m1cha3l
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: The ALARM by @m1cha3l | Stardance
|
1794059304.0876582
|
1794664104.0876582
|
|
19811
|
3D Space Flight by @mrbotred | Stardance
|
mrbotred
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: 3D Space Flight by @mrbotred | Stardance
|
1793483720.6326652
|
1794088520.6326652
|
|
19812
|
Untitled project by @Xiao_Benett | Stardance
|
Xiao_Benett
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled project by @Xiao_Benett | Stardanc Title: Untitled project by @Xiao_Benett | Stardance...
|
1793782148.514425
|
1794646148.514425
|
|
19813
|
My very own WebOS by @muntean_andrew | Stardance
|
muntean_andrew
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @muntean_andrew | Star Title: My very own WebOS by @muntean_andrew | Stardance...
|
1793638148.5935826
|
1794242948.5935826
|
|
19814
|
My first slack bot! by @azizbekismatov2010 | Stard My first slack bot! by @azizbekismatov2010 | Stardance...
|
azizbekismatov2010
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @azizbekismatov2010 Title: My first slack bot! by @azizbekismatov2010 | Stardance...
|
1793505307.4898398
|
1794110107.4898398
|
|
19815
|
Retrolette by @shreyaluu | Stardance
|
shreyaluu
|
0
|
7.3
|
0
|
[]
|
[{"post_id": 50024, "ts": "202 [{"post_id": 50024, "ts": "2026-08-19T01:36:58Z", "hours": 2.3847, "text": "So, i’ve come a long way since the last journal! I think i’m almost done with the schematic part, just need to add the rotary encoder for volume / play/pause control. Here is everything i added in the last few hours: storage I researched how I’m going to store my songs - because I want to be able to play things offline, I’d like to have my songs downloaded on the player itself. For this, I’ll need to have extra storage; the on-board storage for the ESP32 is only enough for maybe one or two songs. The solution I found was to use the Adafruit Micro SD SPI or SDIO Card Breakout Board, along with a compatible 32 GB SD card. I found one at my local Walmart (according to the website) so I’ll go pick that up sometime :3. I also struggled for a good while trying to add this onto my KiCad. First, I thought I could just get the Eagle files from the adafruit GitHub, but apparently that library includes all the parts they use to make their boards but not the board itself. To get around this, I just used their 9-pin header, which was labeled according to the pins on the board. I’m not making a PCB, after all; I’m going to wire it up the old-school way. OR maybe i’ll use a perfboard hmmmm… nfc support Next, the main part of this whole project - NFC support! I found this NFC reader called the PN532, which I can use to read the nfc tags in the vinyl disks. I also put it on KiCad track number LEDs Since having one song per vinyl is a bit much tbh, I decided to have a button that changes the track (can only go forward sorry i dont have enough pins). For this, I need to be able to yk show the track number… and the ‘easiest’ way to do that was with 4 leds that represent the number in binary! note: at the time i’m writing this, i JUST changed it to 5 LEDs. They’re linked in a chain so they only need one pin reset rc circuit basically, when the power is turned on, the adafruit dac needs to be reset. so if i had it as a separate gpio pin, i’d write it into the code that okay, once the power’s on, switch this to low for a bit then keep it high. but the problem with that is, that wastes a gpio pin. apparently there’s this thing called an RC power-on delay circuit, which means that, when the power’s on, the capacitor takes a little time to charge, which keeps the reset low for some time. Then, once the capacitor fully charges up, the reset pin’s on high the rest of the time. So I researched this a bit then implemented it to my own circuit, freeing up a GPIO pin that I can use for a button or something! Speaking of the button… the button This is the button that changes the track number. I added this in KiCad, connecting it to the freed up GPIO pin mentioned above. rotary encoder plan Instead of adding a traditional rotary encoder, which requires three additional pins, i’m thinking about using the Adafruit breakout board, which lets the rotary encoder use the already-in-use I2C. all timelapses in this journal https://lapse.hackclub.com/timelapse/MZIoUOo8jHLk https://lapse.hackclub.com/timelapse/ZwfmAnuRbDRx https://lapse.hackclub.com/timelapse/ocHd5FBWXQlM"}, {"post_id": 49195, "ts": "2026-08-17T20:51:36Z", "hours": 3.0444, "text": "since the last devlog, i’ve been heavily researching a lot more… i figured out what MC i want to use (XIAO ESP32S3, because it can have wifi capabilities and includes LiPo battery management), researched a ton about the battery things such as how to display the charge, etc. in my notebook, i’m writing about the parts i want, plus drawing to-scale squares/rectangles to represent each of the parts; i want to make this as compact as possible. i also researched about the audio system- like how to make it play music out loud vs into headphones, and found this neat part i can use called the Adafruit TLV320DAC3100. it has a built-in headphone jack so that’s super awesome! here are the parts i have finalized so far: ESP32 3.7 volt LiPo battery - 1000mAh (or maybe 800 mAh, depending on prices and shipping costs) 3.7 v to 4.2 v battery gauge self-latching on/off switch Adafruit TLV320DAC3100 Speaker as always- you can watch my full timelapses here: https://lapse.hackclub.com/user/@shreyaluu"}, {"post_id": 47677, "ts": "2026-08-15T19:07:51Z", "hours": 1.8675, "text": "okay, so this session was largely ideation and a lot of planning. i’m not fully done with the planning yet, but i figured i should post a devlog before i continue… so here i am (p.s. from the future: this first devlog sets the stage for eeeeeverything so if you’re here PLEASE read the whole thing! i’m trying to devlog this in a lot of detail and if you’re a reviewer/rater i’d appreciate it so much if you got to know the entire project before you judged :3 i’m not that good at hardware but i’m learning and trying so yeah) this ‘session’ (i say in quotes because it was split over four Lapse sessions - watch them here: https://lapse.hackclub.com/user/@shreyaluu ) saw me trying to figure out things like where components will go in the end, putting together ideas of what i might want the final product to look like (i have a lot of inspo pictures and some sketches i drew myself but nothing is for certain yet), etc. some other questions: storage? sd card probably battery? charging? how does that work? what microcontroller to use (i’m thinking rp2040 because that’s what i have, but might switch to esp32 depending on what i need yk?) oh wait, silly me… i forgot to explain what the project is in the first place THE PROJECT the idea is: a vintage-looking mini vinyl player that can play songs depending on what vinyl (a glorified 3d printed disk) you put inside it. it will detect this by using nfc stickers on the disks (i found an awesome deal on amazon for a bunch of these) and an nfc reader inside the vinyl player itself. based on the input from the nfc, it’ll play the correct file (stored locally) from either speakers (or, ambitiously, a headphone jack) THE INSPIRATION a lot of my favorite artists are putting out albums lately… and they have vinyls that come with them. i can’t buy those vinyls or a vinyl player… but i can make my own! PLUS i’ve always wanted to get deeper into hardware- lately i’ve just done some simple projects and going into something like this would be awesome. i love music and tech so why not combine both?"}]...
|
Title: Retrolette by @shreyaluu | Stardance
Devlo Title: Retrolette by @shreyaluu | Stardance
Devlogs:
okay, so this session was largely ideation and a lot of planning. i’m not fully done with the planning yet, but i figured i should post a devlog before i continue… so here i am (p.s. from the future: this first devlog sets the stage for eeeeeverything so if you’re here PLEASE read the whole thing! i’m trying to devlog this in a lot of detail and if you’re a reviewer/rater i’d appreciate it so much if you got to know the entire project before you judged :3 i’m not that good at hardware but i’m learning and trying so yeah) this ‘session’ (i say in quotes because it was split over four Lapse sessions - watch them here: https://lapse.hackclub.com/user/@shreyaluu ) saw me trying to figure out things like where components will go in the end, putting together ideas of what i might want the final product to look like (i have a lot of inspo pictures and some sketches i drew myself but nothing is for certain yet), etc. some other questions: storage? sd card probably battery? charging? how does that work? what microcontroller to use (i’m thinking rp2040 because that’s what i have, but might switch to esp32 depending on what i need yk?) oh wait, silly me… i forgot to explain what the project is in the first place THE PROJECT the idea is: a vintage-looking mini vinyl player that can play songs depending on what vinyl (a glorified 3d printed disk) you put inside it. it will detect this by using nfc stickers on the disks (i found an awesome deal on amazon for a bunch of these) and an nfc reader inside the vinyl player itself. based on the input from the nfc, it’ll play the correct file (stored locally) from either speakers (or, ambitiously, a headphone jack) THE INSPIRATION a lot of my favorite artists are putting out albums lately… and they have vinyls that come with them. i can’t buy those vinyls or a vinyl player… but i can make my own! PLUS i’ve always wanted to get deeper into hardware- lately i’ve just done some simple projects and going into something like this would be awesome. i love music and tech so why not combine both?
since the last devlog, i’ve been heavily researching a lot more… i figured out what MC i want to use (XIAO ESP32S3, because it can have wifi capabilities and includes LiPo battery management), researched a ton about the battery things such as how to display the charge, etc. in my notebook, i’m writing about the parts i want, plus drawing to-scale squares/rectangles to represent each of the parts; i want to make this as compact as possible. i also researched about the audio system- like how to make it play music out loud vs into headphones, and found this neat part i can use called the Adafruit TLV320DAC3100. it has a built-in headphone jack so that’s super awesome! here are the parts i have finalized so far: ESP32 3.7 volt LiPo battery - 1000mAh (or maybe 800 mAh, depending on prices and shipping costs) 3.7 v to 4.2 v battery gauge self-latching on/off switch Adafruit TLV320DAC3100 Speaker as always- you can watch my full timelapses here: https://lapse.hackclub.com/user/@shreyaluu
So, i’ve come a long way since the last journal! I think i’m almost done with the schematic part, just need to add the rotary encoder for volume / play/pause control. Here is everything i added in the last few hours: storage I researched how I’m going to store my songs - because I want to be able to play things offline, I’d like to have my songs downloaded on the player itself. For this, I’ll need to have extra storage; the on-board storage for the ESP32 is only enough for maybe one or two songs. The solution I found was to use the Adafruit Micro SD SPI or SDIO Card Breakout Board, along with a compatible 32 GB SD card. I found one at my local Walmart (according to the website) so I’ll go pick that up sometime :3. I also struggled for a good while trying to add this onto my KiCad. First, I thought I could just get the Eagle files from the adafruit GitHub, but apparently that library includes all the parts they use to make their boards but not the board itself. To get around this, I just used their 9-pin header, which was labeled according to the pins on the board. I’m not making a PCB, after all; I’m going to wire it up the old-school way. OR maybe i’ll use a perfboard hmmmm… nfc support Next, the main part of this whole project - NFC support! I found this NFC reader called the PN532, which I can use to read the nfc tags in the vinyl disks. I also put it on KiCad track number LEDs Since having one song per vinyl is a bit much tbh, I decided to have a button that changes the track (can only go forward sorry i dont have enough pins). For this, I need to be able to yk show the track number… and the ‘easiest’ way to do that was with 4 leds that represent the number in binary! note: at the time i’m writing this, i JUST changed it to 5 LEDs. They’re linked in a chain so they only need one pin reset rc circuit basically, when the power is turned on, the adafruit dac needs to be reset. so if i had it as a separate gpio pin, i’d write it into the code that okay, once the power’s on, switch this to low for a bit then keep it high. but the problem with that is, that wastes a gpio pin. apparently there’s this thing called an RC power-on delay circuit, which means that, when the power’s on, the capacitor takes a little time to charge, which keeps the reset low for some time. Then, once the capacitor fully charges up, the reset pin’s on high the rest of the time. So I researched this a bit then implemented it to my own circuit, freeing up a GPIO pin that I can use for a button or something! Speaking of the button… the button This is the button that changes the track number. I added this in KiCad, connecting it to the freed up GPIO pin mentioned above. rotary encoder plan Instead of adding a traditional rotary encoder, which requires three additional pins, i’m thinking about using the Adafruit breakout board, which lets the rotary encoder use the already-in-use I2C. all timelapses in this journal https://lapse.hackclub.com/timelapse/MZIoUOo8jHLk https://lapse.hackclub.com/timelapse/ZwfmAnuRbDRx https://lapse.hackclub.com/timelapse/ocHd5FBWXQlM...
|
1794044888.556693
|
1794649688.556693
|
|
19816
|
My very own WebOS by @armandH | Stardance
|
armandH
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @armandH | Stardance
|
1794001707.461371
|
1794606507.461371
|
|
19817
|
Untitled by @armandH | Stardance
|
armandH
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled by @armandH | Stardance
|
1793872458.4690151
|
1794477258.4690151
|
|
19818
|
Circuitel by @Thepdi | Stardance
|
Thepdi
|
1
|
71.0
|
0
|
[{"ship_num": 1, "ts": "2026-1 [{"ship_num": 1, "ts": "2026-10-31T16:07:09Z", "hours": 71.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "This is track-your-time, you need to create a profile, create your car and then add circuits time, it is not done, I need to deploy it, this is just a test url to get more time", "repo": "https://github.com/petrut-darius/track_your_time", "demo": "https://track-your-time.petrutdarius.com"}]...
|
[{"post_id": 80710, "ts": "202 [{"post_id": 80710, "ts": "2026-10-18T16:14:29Z", "hours": 10.1894, "text": "I made the mobile view, the website is responsive now! I started the live notifs part, added the reset password feature, and only need to add the angular part for the live notifs to work, and then design them! Next week most likely the project will be pushed to production!"}, {"post_id": 77932, "ts": "2026-10-08T20:39:07Z", "hours": 9.6656, "text": "I have worked on the overall design and added the circuit time form, you now can add record times to any circuit based on a car! Still need to add some things on the display part, and resolve live notifs and the admin dashboard. Getting there!"}, {"post_id": 75976, "ts": "2026-10-01T19:56:51Z", "hours": 10.9531, "text": "I started designing the front-end, added pagination and search on /circuits and on /cars, will stick a bit on the design part, then get to add circuit time, leaderbord of friends, live notifs, and the symfony admin dashboard"}, {"post_id": 72797, "ts": "2026-09-23T19:12:04Z", "hours": 9.9614, "text": "Created the add car feature, update car feature & everything that has a relation with the friend requests. I know get along way more with Angular, and get a little bit of happiness from it, still a lot to learn."}, {"post_id": 68858, "ts": "2026-09-15T21:46:44Z", "hours": 12.3469, "text": "Started developing the angular part, it’s cruel, I got so many errors, and also the learning path I think is at like 85 degrees, anyways I think at least the profile part is done(without symfony tests), nothing pretty still"}, {"post_id": 65049, "ts": "2026-09-09T21:39:15Z", "hours": 13.1917, "text": "I worked so much on the API side, I added the CarController, ProfileController, ResetPassword feature, and all type of things, but most important the login request-response works, the user is authenticated and the refresh-token works. Still a lot to do, like write tests, the overall design, and most of the angular part:))))"}, {"post_id": 58461, "ts": "2026-08-30T21:34:15Z", "hours": 4.6281, "text": "Hello, this is an time circuit tracker app, it is based on Symfony as the REST API and on Angular as the SPA, it will save a users track time. It will many cool features like JWT auth, private chats between friends, and many more. I will do my best, because I want this app to check all the points for a php junior job. Have a nice day! Will keep up with updates."}]...
|
Title: Circuitel by @Thepdi | Stardance
Devlogs:
Title: Circuitel by @Thepdi | Stardance
Devlogs:
Hello, this is an time circuit tracker app, it is based on Symfony as the REST API and on Angular as the SPA, it will save a users track time. It will many cool features like JWT auth, private chats between friends, and many more. I will do my best, because I want this app to check all the points for a php junior job. Have a nice day! Will keep up with updates.
I worked so much on the API side, I added the CarController, ProfileController, ResetPassword feature, and all type of things, but most important the login request-response works, the user is authenticated and the refresh-token works. Still a lot to do, like write tests, the overall design, and most of the angular part:))))
Started developing the angular part, it’s cruel, I got so many errors, and also the learning path I think is at like 85 degrees, anyways I think at least the profile part is done(without symfony tests), nothing pretty still
Created the add car feature, update car feature & everything that has a relation with the friend requests. I know get along way more with Angular, and get a little bit of happiness from it, still a lot to learn.
I started designing the front-end, added pagination and search on /circuits and on /cars, will stick a bit on the design part, then get to add circuit time, leaderbord of friends, live notifs, and the symfony admin dashboard
I have worked on the overall design and added the circuit time form, you now can add record times to any circuit based on a car! Still need to add some things on the display part, and resolve live notifs and the admin dashboard. Getting there!
I made the mobile view, the website is responsive now! I started the live notifs part, added the reset password feature, and only need to add the angular part for the live notifs to work, and then design them! Next week most likely the project will be pushed to production!
Ships:
This is track-your-time, you need to create a profile, create your car and then add circuits time, it is not done, I need to deploy it, this is just a test url to get more time...
|
1793879487.6213243
|
1793965887.6213243
|
|
19819
|
My awesome macropad! by @tyri | Stardance
|
tyri
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My awesome macropad! by @tyri | Stardance
|
1793537588.1447217
|
1794401588.1447217
|
|
19820
|
Knomo - know what should you do by @sahilaw | Star Knomo - know what should you do by @sahilaw | Stardance...
|
sahilaw
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Knomo - know what should you do by @sahilaw Title: Knomo - know what should you do by @sahilaw | Stardance...
|
1793785793.5602524
|
1794649793.5602524
|
|
19821
|
GUI for a Pi by @nox4092 | Stardance
|
nox4092
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: GUI for a Pi by @nox4092 | Stardance
|
1793789664.6917756
|
1794394464.6917756
|
|
19822
|
My first slack bot! by @Saba | Stardance
|
Saba
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @Saba | Stardance
|
1793983641.256989
|
1794588441.256989
|
|
19823
|
My first slack bot! by @mustaqim | Stardance
|
mustaqim
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @mustaqim | Stardanc Title: My first slack bot! by @mustaqim | Stardance...
|
1793850460.6550457
|
1794455260.6550457
|
|
19824
|
FTC bot by @Taran_the_Idiot | Stardance
|
Taran_the_Idiot
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: FTC bot by @Taran_the_Idiot | Stardance
|
1793454809.2920594
|
1794059609.2920594
|
|
19825
|
portfolio by @Ashu-cipher | Stardance
|
Ashu-cipher
|
1
|
22.0
|
0
|
[{"ship_num": 1, "hours": 22.0, &# [{"ship_num": 1, "hours": 22.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "I made a portfolio site for myself, actually i had a portfolio site i made in 2025 but i thought of refining it, so i refined it using next.js, for me challenging part was git, i rebased and accidentally i had 999+ commits like wth, i restored to previous commit and it was fixed. I learnt more about React by this project. Ik this is a portfolio site, you have no usability for this, still it is what it is, i hope you like it. Thanks♡", "repo": "https://github.com/Ashu-Cipher/Ashu-Cipher.github.io", "demo": "https://ashu-cipher.github.io/", "ts": "2026-06-23T17:26:46Z"}]...
|
[{"post_id": 11930, "ts": "202 [{"post_id": 11930, "ts": "2026-06-19T13:44:43Z", "hours": 3.0, "text": "oh, i did forget about devlog, i’m making a portfolio site to replace my old one, i am done with navbar and cursor styling, much more to do"}, {"post_id": 11964, "ts": "2026-06-19T15:08:06Z", "hours": 0.0, "text": "done with footer"}, {"post_id": 12039, "ts": "2026-06-19T17:12:24Z", "hours": 1.0, "text": "completed landing page and global styling"}, {"post_id": 12306, "ts": "2026-06-20T02:37:02Z", "hours": 1.0, "text": "done with terminal commands, and animations"}, {"post_id": 12356, "ts": "2026-06-20T05:01:01Z", "hours": 0.0, "text": "completed Typewriter component"}, {"post_id": 12383, "ts": "2026-06-20T06:51:52Z", "hours": 1.0, "text": "completed Contacts section"}, {"post_id": 12475, "ts": "2026-06-20T11:31:08Z", "hours": 1.0, "text": "done with Hero section, feeling like a here lol"}, {"post_id": 12501, "ts": "2026-06-20T12:45:44Z", "hours": 0.0, "text": "completed glitchtext section, so basically ui is almost done, only matrix rain is left in ui, working on it"}, {"post_id": 12529, "ts": "2026-06-20T13:38:11Z", "hours": 0.0, "text": "completed matrixrain, basically done with ui"}, {"post_id": 12583, "ts": "2026-06-20T15:27:00Z", "hours": 1.0, "text": "done with adding skills, next is adding projects"}, {"post_id": 12658, "ts": "2026-06-20T18:00:33Z", "hours": 1.0, "text": "completed Project section, ui is done, i need to debug it first"}, {"post_id": 12967, "ts": "2026-06-21T06:55:41Z", "hours": 2.0, "text": "it’s almost done, with some problems, i will fix it"}, {"post_id": 13091, "ts": "2026-06-21T12:53:05Z", "hours": 3.0, "text": "finally, after so much debugging, this and that, integrating github actions, verifying google metadata, it’s done, it’s live on ashu-cipher.github.io check it out and give me some improvement suggestion, only thing left to update is its README file, will do it soon and ship"}, {"post_id": 13146, "ts": "2026-06-21T14:52:40Z", "hours": 0.0, "text": "work on same error for last half hours still not solved, can anybody help. i have used web3forms for email submission, but whenever i send email, it’s sent but it still shows submission error, idk why, i tried multiple time, still stuck on that."}, {"post_id": 13173, "ts": "2026-06-21T15:41:07Z", "hours": 0.0, "text": "FINALLY, error is resolved, thanks to claude haiku"}, {"post_id": 13746, "ts": "2026-06-22T15:09:37Z", "hours": 0.0, "text": "updated README, about to ship"}]...
|
Title: portfolio by @Ashu-cipher | Stardance
Devl Title: portfolio by @Ashu-cipher | Stardance
Devlogs:
oh, i did forget about devlog, i’m making a portfolio site to replace my old one, i am done with navbar and cursor styling, much more to do
done with footer
completed landing page and global styling
done with terminal commands, and animations
completed Typewriter component
completed Contacts section
done with Hero section, feeling like a here lol
completed glitchtext section, so basically ui is almost done, only matrix rain is left in ui, working on it
completed matrixrain, basically done with ui
done with adding skills, next is adding projects
completed Project section, ui is done, i need to debug it first
it’s almost done, with some problems, i will fix it
finally, after so much debugging, this and that, integrating github actions, verifying google metadata, it’s done, it’s live on ashu-cipher.github.io check it out and give me some improvement suggestion, only thing left to update is its README file, will do it soon and ship
work on same error for last half hours still not solved, can anybody help. i have used web3forms for email submission, but whenever i send email, it’s sent but it still shows submission error, idk why, i tried multiple time, still stuck on that.
FINALLY, error is resolved, thanks to claude haiku
updated README, about to ship
Ships:
I made a portfolio site for myself, actually i had a portfolio site i made in 2025 but i thought of refining it, so i refined it using next.js, for me challenging part was git, i rebased and accidentally i had 999+ commits like wth, i restored to previous commit and it was fixed. I learnt more about React by this project. Ik this is a portfolio site, you have no usability for this, still it is what it is, i hope you like it. Thanks♡...
|
1793775379.217819
|
1794639379.217819
|
|
19826
|
My awesome macropad! by @smilerts | Stardance
|
smilerts
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My awesome macropad! by @smilerts | Stardan Title: My awesome macropad! by @smilerts | Stardance...
|
1793800346.8992105
|
1794405146.8992105
|
|
19827
|
My very own WebOS by @omoshjoe02 | Stardance
|
omoshjoe02
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @omoshjoe02 | Stardanc Title: My very own WebOS by @omoshjoe02 | Stardance...
|
1794052443.6251543
|
1794657243.6251543
|
|
19828
|
Untitled by @LeLicorne_ | Stardance
|
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled by @LeLicorne_ | Stardance
|
1793976903.6261141
|
1794581703.6261141
|
|
19829
|
App by @stevenbuntoro | Stardance
|
stevenbuntoro
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: App by @stevenbuntoro | Stardance
|
1793966050.515269
|
1794570850.515269
|
|
19830
|
My very own WebOS by @jamalorignal | Stardance
|
jamalorignal
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @jamalorignal | Starda Title: My very own WebOS by @jamalorignal | Stardance...
|
1793501688.6670442
|
1794106488.6670442
|
|
19831
|
Electromagnetic acceleretor !! by @mateopasqualini Electromagnetic acceleretor !! by @mateopasqualini_kurkuma | Stardance...
|
mateopasqualini_kurkuma
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Electromagnetic acceleretor !! by @mateopas Title: Electromagnetic acceleretor !! by @mateopasqualini_kurkuma | Stardance...
|
1794070404.625438
|
1794675204.625438
|
|
19832
|
DUM-E by @Saksham0777 | Stardance
|
Saksham0777
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: DUM-E by @Saksham0777 | Stardance
|
1793962447.8078413
|
1794567247.8078413
|
|
19833
|
My first slack bot! by @odilbekegamnazarov26 | Sta My first slack bot! by @odilbekegamnazarov26 | Stardance...
|
odilbekegamnazarov26
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first slack bot! by @odilbekegamnazarov2 Title: My first slack bot! by @odilbekegamnazarov26 | Stardance...
|
1793980163.2923486
|
1794584963.2923486
|
|
19834
|
Frictionless by @pranav123 | Stardance
|
pranav123
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Frictionless by @pranav123 | Stardance
|
1793541108.6946328
|
1794145908.6946328
|
|
19835
|
Untitled by @martin_chen_au | Stardance
|
martin_chen_au
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled by @martin_chen_au | Stardance
|
1793919180.608613
|
1794783180.608613
|
|
19836
|
Achromatic by @martin_chen_au | Stardance
|
martin_chen_au
|
0
|
2.67
|
0
|
[]
|
[{"post_id": 10964, "ts": "202 [{"post_id": 10964, "ts": "2026-06-17T23:43:13Z", "hours": 2.6728, "text": "Initial commits. I started adding – perhaps excessively – rounded elements with a clean background — though unfortunately not monochrome — and text. Links and styling is going fine, but margins and positioning and padding is not going very well; as shown the top bar (meant to mimic a window top bar) is not positioning correctly!"}]...
|
Title: Achromatic by @martin_chen_au | Stardance
Title: Achromatic by @martin_chen_au | Stardance
Devlogs:
Initial commits. I started adding – perhaps excessively – rounded elements with a clean background — though unfortunately not monochrome — and text. Links and styling is going fine, but margins and positioning and padding is not going very well; as shown the top bar (meant to mimic a window top bar) is not positioning correctly!...
|
1793897258.6117954
|
1794761258.6117954
|
|
19837
|
Foxy bot by @FIhhy | Stardance
|
FIhhy
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Foxy bot by @FIhhy | Stardance
|
1793516010.389588
|
1794120810.389588
|
|
19838
|
Movie reccomendation system by @naishasaxena79 | S Movie reccomendation system by @naishasaxena79 | Stardance...
|
naishasaxena79
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Movie reccomendation system by @naishasaxen Title: Movie reccomendation system by @naishasaxena79 | Stardance...
|
1793393501.8257577
|
1793998301.8257577
|
|
19839
|
My very own WebOS by @Zuha | Stardance
|
Zuha
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @Zuha | Stardance
|
1793454511.1107965
|
1794059311.1107965
|
|
19840
|
Grand Strategy Game by @Craig | Stardance
|
Craig
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Grand Strategy Game by @Craig | Stardance
|
1793519737.247422
|
1794124537.247422
|
|
19841
|
My awesome macropad! by @Mithun | Stardance
|
Mithun
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My awesome macropad! by @Mithun | Stardance
|
1793937188.2363937
|
1794541988.2363937
|
|
19842
|
Untitled project by @Farkhad | Stardance
|
Farkhad
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled project by @Farkhad | Stardance
|
1793368411.5370138
|
1793973211.5370138
|
|
19843
|
Untitled project by @bhavana | Stardance
|
bhavana
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled project by @bhavana | Stardance
|
1793901065.276688
|
1794765065.276688
|
|
19844
|
My first project by @Mohinur | Stardance
|
Mohinur
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My first project by @Mohinur | Stardance
|
1794001963.0696175
|
1794606763.0696175
|
|
19845
|
Baymax by @haniaa0515 | Stardance
|
haniaa0515
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Baymax by @haniaa0515 | Stardance
|
1793469047.7274485
|
1794073847.7274485
|
|
19846
|
Weather Journal by @wuff | Stardance
|
wuff
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Weather Journal by @wuff | Stardance
|
1793346446.0424094
|
1793951246.0424094
|
|
19847
|
Untitled project by @isha_gandhi | Stardance
|
isha_gandhi
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: Untitled project by @isha_gandhi | Stardanc Title: Untitled project by @isha_gandhi | Stardance...
|
1793512066.9403584
|
1794116866.9403584
|
|
19848
|
My very own WebOS by @Fizza | Stardance
|
Fizza
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My very own WebOS by @Fizza | Stardance
|
1793562461.2353685
|
1794167261.2353685
|
|
19849
|
trentOS by @thenasaplusit | Stardance
|
thenasaplusit
|
2
|
4.0
|
9
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-06-28T14:13:07Z", "hours": 2.0, "multiplier": 4.9, "payout": 9, "blessing": "neutral", "text": "I added a music player, the ability to resize windows, and a stupid little terminal (because what good is an OS without a terminal?). It was much easier to implement than WebOS 1 since I got the hang of the basic syntax.", "repo": "https://github.com/Hacker-Anirudh/trentOS", "demo": "https://trent.sudothelinuxwizard.com/"}, {"ship_num": 2, "ts": "2026-06-16T15:13:28Z", "hours": 2.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "It’s finally done (I hate HTML/CSS/JavaScript so much this 2h project felt like a 10 hour Flutter project)! I like how the windows turned out, it gives off pre-Liquid Glass macOS vibes.", "repo": "https://github.com/Hacker-Anirudh/trentOS", "demo": "https://trent.sudothelinuxwizard.com/"}]...
|
[{"post_id": 17613, "ts": "202 [{"post_id": 17613, "ts": "2026-06-28T14:11:39Z", "hours": 0.2764, "text": "I added a meme “terminal” (not the easiest, but it was fine especially with some AI assistance). The coolest change, however, is that I added my new custom domain! It’s not HTTPS yet (thanks GitHub Pages!), but it shouldn’t matter given you don’t have to input any personal data, and I’ll add it as soon as I can."}, {"post_id": 17104, "ts": "2026-06-27T19:30:43Z", "hours": 1.5692, "text": "I added window resizing and a music toggle. The former was just a two-line CSS patch surprisingly."}, {"post_id": 9985, "ts": "2026-06-16T14:56:39Z", "hours": 0.6189, "text": "This is more like it, just need to add content to the other apps (and another function, I thought of this “Shut down” button that does window.close in JS."}, {"post_id": 9945, "ts": "2026-06-16T13:59:05Z", "hours": 0.3786, "text": "Looks a lot more presentable now, but still need to add some more logic."}, {"post_id": 9897, "ts": "2026-06-16T11:55:03Z", "hours": 0.82, "text": "Is it bad it took me 48 minutes to come up with this?"}]...
|
Title: trentOS by @thenasaplusit | Stardance
Devl Title: trentOS by @thenasaplusit | Stardance
Devlogs:
Is it bad it took me 48 minutes to come up with this?
Looks a lot more presentable now, but still need to add some more logic.
This is more like it, just need to add content to the other apps (and another function, I thought of this “Shut down” button that does window.close in JS.
I added window resizing and a music toggle. The former was just a two-line CSS patch surprisingly.
I added a meme “terminal” (not the easiest, but it was fine especially with some AI assistance). The coolest change, however, is that I added my new custom domain! It’s not HTTPS yet (thanks GitHub Pages!), but it shouldn’t matter given you don’t have to input any personal data, and I’ll add it as soon as I can.
Ships:
It’s finally done (I hate HTML/CSS/JavaScript so much this 2h project felt like a 10 hour Flutter project)! I like how the windows turned out, it gives off pre-Liquid Glass macOS vibes.
I added a music player, the ability to resize windows, and a stupid little terminal (because what good is an OS without a terminal?). It was much easier to implement than WebOS 1 since I got the hang of the basic syntax....
|
1794070502.111602
|
1794156902.111602
|
|
19850
|
My awesome macropad! by @Shanzay | Stardance
|
Shanzay
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: My awesome macropad! by @Shanzay | Stardanc Title: My awesome macropad! by @Shanzay | Stardance...
|
1793515797.3477774
|
1794120597.3477774
|