A bit of background: I'm a software engineer by trade, but I'm currently on sabbatical doing a year-long working holiday in Australia. I love riding bikes but only had the most beginner-level knowledge of them before I found a job at a bike shop. This was a fun personal project to try to capture some of what I've learned so far, targeted at fellow beginners. It's going to be incomplete/lacking if you already have some bike knowledge, but I hope you all enjoyed it all the same.
Please keep the feedback coming; it's late in Australia, but I want to make sure the bike info is at least accurate, if not comprehensive!
As already written, the text takes too long to show up. Why not have a mouse-over and show a full block of text?
I think it would have been great, if the effort went into something more "useful", like improving/cleaning up something like Sheldon Brown's collection, which is already great.
Furthermore, so many things are missing and unclear
- you seem to show only a ahead stem. I'm missing the spacers.
- you're missing the Dunlop valve and the new Schwalbe Click Valve
- your selection/explanation of wheel sizes also leaves much to be desired. Having someone finally explain the ETRTO sizings to me ( and that both 28" and 29" wheels use 622mm rims ) was eye-opening
I know that it's hard to draw the line somewhere and that this should be a site for beginners. but still
Content-wise, some of this stuff I’m still learning about and hope to fix/correct, and some of it just won’t fit into a page, nor do I really want to force too much content into it and risk it not being accessible to noobs like me. Like you said, you have to draw the line somewhere and there was always something more I could have added.
Having a mode to automatically, instantly, "just show me already" would be good.
If you want it to look fancy maybe have all the text fade-in over the course of the animation? Once the parts are all in place you'd then see all the text.
Some additional common parts you might consider adding:
- Rear wheel hub (cassette compatibility) and front wheel hub
- Bottom bracket (crankset compatibility)
- Axles (quick release and threaded)
- Star nut (what the top cap is generally bolted to)
And some minutia you may want to add:
- Many rear derailleurs nowadays come with a simple on/off clutch that adds extra rotational resistance to the cage arm. That helps keep it from pivoting during rougher riding and in turn helps limit "chain slap" against the frame.
- The handlebar stem is one of the most, if not the most, critical components on a bike in terms of safety. You tighten the top cap just enough to pull all of the headset components flush against each other, but the stem bolts are what actually lock the handlebars to the fork. Just something I always emphasize because I've seen too many people try to wrench the top bolt within an inch of its life, barely tighten the stem bolts, and then almost hurt themselves when their bars rotate and/or twist while riding.
There is a note about the star nut if you click on the headset top cap and then explode the headset, and I also mentioned QR vs thru axle briefly when talking about the fork. BB is definitely missing and I should add it. I was also thinking it would be fun to make the wheel explodable too, which would give me a place to talk more about hubs, spokes, rim standards, etc.
My only suggestion, alongside everyone else's agreement that text should be faster/selectable: how about trees, so that you can keep track of all the nested parts? for example, when I select any of the parts of the drivetrain, perhaps a tree/breadcrumb element would say bike/drivetrain/chainring. Similarly, maybe any other parts that get mentioned in descriptions could be hyperlinks, which can take you instantly to the relevant part.
Super cool and fun presentation! I've had thoughts about doing something similar but for old film projectors. I'll let you know if that ever ends up happening, maybe I could give you a shoutout!
I’d love to see something similar for film projectors, let me know if you end up building it.
Similar to you, I worked in bike shops for years before getting into web development, so naturally some of my first toy-projects were an attempt to combine what I was learning with what I knew about bikes -- for example, a diagnostic tool based on the sound your bike is making (http://nathan.codes/showcase/#bikegnosis). It will be imperfect, just like your bike, but it will be totally your own!
Most places I've been call the seat a "saddle."
I love the hand drawn style so much, by the way.
The text printing time felt pretty long to wait for the whole paragraph.
Also another simpler approach might be to use SVG animations like this: https://codepen.io/mikemjharris/post/svg-toggling
As for SVG, I've used that in other projects but since I was working with pixelated drawings instead of vectors, I chose canvas instead. The downside is having to do a lot more of the work on animations yourself (but this ended up being an upside for me since it was a lot of fun :) )
Please consider removing the animation effect from the text. If it’s very important to you, maybe use a fade-in for the full paragraph?
While cute, the effects force the viewer to wait which is not a pleasant experience.
PS: I see a bunch of feedback along the lines of,”Why did you build this?” Please ignore. It's a passion project. Do whatever gives you energy.
The infernal suspension forks on 3 out of 4 of the bikes in my garage would beg to differ, both in upfront cost and ongoing maintenance.
Also - my suspension fork is 20 years old, has never had maintenance and is working fine. What do you do to yours? :)
(Or maybe my fork is NOT fine and I just don’t know it…)
1. "It works fine" 2. Get a shop to rebuild it for a surprisingly low fee 3. "Holy smokes, I had no idea my fork could be this good!"
Basically, a quick rebuild (yourself or a shop) is definitely worth it.
You put too much effort into the prose to be keeping it caged.
Maybe look at plugins / extensions?
