I got tired of opening DevTools for quick asset checks, so I tried building a browser-only alternative

Dafin Edison J — Mon, 02 Feb 2026 06:15:20 +0000

I do a lot of quick UI audits and handoffs, and most of the time I don’t need full DevTools.

I just want to answer questions like:

What images are being used?
Which fonts are loaded?
What CSS files are active?

Opening DevTools every time felt heavy for that use case, so I experimented with a pure client-side approach.

What I explored

Traversing the DOM to collect image sources
Reading document.styleSheets to extract CSS rules
Parsing @font-face declarations to list fonts
Grouping assets by type (images / fonts / styles)
Gracefully skipping cross-origin-blocked resources

What I learned

Cross-origin restrictions are the biggest limitation
Fonts behind CDNs are tricky to resolve consistently
Shadow DOM complicates asset discovery
This will never replace DevTools — it’s more of a quick inspection layer

The interesting part for me wasn’t the UI, but understanding how much you can (and can’t) introspect from the browser sandbox.

If you’ve built similar dev utilities:
How do you handle asset discovery?
Would you reach for an extension instead?
Any clever workarounds for cross-origin stylesheets?

Built this mostly to scratch my own itch — curious how others approach this problem.

Building SpeedTrackr: How I Created an AI Sprint Analysis Platform in 100 Hours

Dafin Edison J — Sat, 19 Jul 2025 10:59:43 +0000

As an athlete determined to break sub-10.5 seconds in the 100 m and a self-taught developer, I’ve always been fascinated by how artificial intelligence could accelerate human performance. Driven by necessity and curiosity, I built SpeedTrackr—an AI-powered sprint analysis and tracking platform—in just 100 focused hours. Here’s the full story, the challenges, the breakthroughs, and lessons learned along the way.

Why Sprint Analysis Needs AI

Traditional sprint analysis is slow, subjective, and often inaccessible. Coaches rely on manual video review or expensive hardware, making it tough for casual athletes to get actionable feedback. The lack of affordable, automated solutions became my motivation:

What if anyone could upload a sprint video and get instant, data-driven form analysis and training guidance?

SpeedTrackr’s core feature—AI Sprint Form Analysis—uses kinogram video analysis to deliver precise feedback in seconds. To support athletes at every level, I also launched a Free Tools section—no login or payment required—for sprint calculators, weekly planners, and strength percentage calculators.

Planning and Initial Roadmap

Core Goals:
1. Real-time sprint performance tracker
2. Kinogram (frame-by-frame overlay) generation
3. Automated training plan suggestions
4. Web + mobile access
Constraints: 100 development hours, minimal budget, solo effort
Tech Stack: React/Next.js (frontend), Python AI modules (backend), Vercel (hosting), credit-based pricing for AI-powered coaching software

The 100-Hour Build Breakdown

Phase 1: Foundations (0–20 hours)

Mapped user flow: upload sprint video → AI processing → instant feedback
Designed wireframes in Figma; prioritized clarity and speed
Initialized code repos, authentication, and serverless functions

Phase 2: AI Sprint Analysis (21–50 hours)

Integrated pose-estimation (MediaPipe) for joint tracking
Developed algorithms to measure stride length, ground contact, hip angle, and cadence
Generated kinograms—video overlays showing key form checkpoints
Built a scoring system for sprint efficiency

Phase 3: Productizing the Experience (51–80 hours)

Crafted a dashboard: upload area, analysis report, kinogram viewer, and stats panels
Added AI Sprint Form Analysis prompts (e.g., “Drive knees higher,” “Increase arm swing”)
Implemented a credit system—free credits + purchasable credit packs
Ensured responsive design for all devices

Phase 4: Testing, Feedback, and Launch (81–100 hours)

Ran closed alpha tests with friends, coaches, and fellow athletes
Squashed stability bugs and refined scoring for varied video quality
Added onboarding tutorials and detailed error messages
Published documentation, privacy policy, and launched publicly

What Makes SpeedTrackr Unique

Instant Feedback: Analysis and kinograms in seconds
Actionable Advice: AI-generated drills based on your form
Affordable: One-time credit packs (Single Credit, Value Pack, Premium Pack) instead of subscriptions
Accessible: Designed for beginners and elite athletes alike

Technical Lessons Learned

Robust AI Models Are Essential: Real-world footage introduces noise—shadows, glare, varied camera angles—so extensive data filtering was needed.
User-Focused UI/UX: Athletes want clear takeaways, not raw data. Clean design and concise insights are critical.
Laser Focus on Core Flows: With limited time and resources, prioritize the features that deliver immediate user value.

Results and Next Steps

SpeedTrackr is now live at www.speedtrackr.com, helping sprinters optimize their form and training. Early feedback is driving rapid improvements—and while traffic and revenue are still ramping up, the platform already proves that solo-built AI sports tech can reach real users.

Next up:

Expand kinogram support to other sports
Improve AI accuracy with more training data
Foster a community for user-generated insights and challenges

Anchor Text Keywords for Backlinks

Below are the anchor texts you can use when linking to SpeedTrackr from other sites:

Branded: SpeedTrackr, SpeedTrackr platform
Partial Match: SpeedTrackr AI tool, AI-powered sprint analysis
Exact-Match Keyword: Sprint performance tracker, Athlete performance optimization
Feature-Focused: Kinogram video analysis, AI Sprint Form Analysis
Naked URL: www.speedtrackr.com
Generic: the platform

Final Thoughts

Building SpeedTrackr in 100 hours taught me that combining domain expertise with AI yields powerful solutions. If you’re exploring AI projects—especially in niche fields—start small, iterate fast, and focus on user impact.

Try SpeedTrackr today: https://www.speedtrackr.com

DEV Community: Dafin Edison J