It's a fun little project and I appreciate the effort you put in, but I found it hard to "consume".
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
I disabled the text animation for now since I can see how it would be frustrating. Maybe later I’ll go back to a line-by-line reveal since I still like the aesthetic!
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.
Fun idea! I'll echo the comments about bringing in the text all at once, or at least line by line. The characters are definitely printing out at your 60 chars/second target; it's just significantly slower than I think a lot of people read.
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.
Thanks for the feedback! I disabled the text animation for the time being.
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.
Front derailleur: On higher-end bicycles, it is becoming a rarity with single narrow-wide tooth front rings. To make up for this loss of gear, rear cassettes have gotten wide and wider reaches (bigger big cogs and smaller small cogs.)
True, though road bikes (even the new 12 speed ones) still use a 2x system on the front. TT/triathlon bikes sometimes use a single chainring as well since they don’t need to climb
For heaven's sake: on wheels, please reference the unambiguous ISO sizes instead of the horror show of trade sizes. A 26" mountain bike wheel and a 26x1 3/8" wheel from an English three speed are two entirely different rim sizes, to name but one example. They are ISO 559 and ISO 590.
Thanks for the feedback! I think the text speed might be an issue with my implementation: it adds a single character on each animation frame with a WPM speed limit, but this would cause problems if a device isn't able to animate very quickly. A better approach would probably be to use the wall clock time to figure out how many characters to add on each animation frame.
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 :) )
Congrats on building and releasing this passion project! I love the hand drawn aesthetic. You had a vision and made something totally unique on your sabbatical. I hope you don't get bogged down in making it more "accurate" and "comprehensive" (unless you really want to!).
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!
Super cool! I'm just starting to get into very basic html/web-dev, so not only were the 'hidden' messages in your html cute to read via inspect element, but seeing that this was all contained in a single javascript file was pretty eye-opening for me! thanks for making it open source, I'll be sure to give it another look once I get to that.
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 rolled my own easing function (taking the square root of the progress, which is a number between 0 and 1) because I was missing the vocabulary to search for a proper one. Thanks for the link!
The hotspots are all wrong for me in Brave. I mouse over the fork and it says frame. I mouse over the handlebars and it says seat. I mouse over the front brake and it says stem. Etc.
I hadn’t considered that! Since I’m using canvas, I’d have to roll my own selection code since what’s displayed is just a bitmap. But I may fall down that rabbit hole someday :)
It's a fun little project and I appreciate the effort you put in, but I found it hard to "consume".
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
I disabled the text animation for now since I can see how it would be frustrating. Maybe later I’ll go back to a line-by-line reveal since I still like the aesthetic!
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.
Agree about the slow text reveal.
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.
Fun idea! I'll echo the comments about bringing in the text all at once, or at least line by line. The characters are definitely printing out at your 60 chars/second target; it's just significantly slower than I think a lot of people read.
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.
Thanks for the feedback! I disabled the text animation for the time being.
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.
Front derailleur: On higher-end bicycles, it is becoming a rarity with single narrow-wide tooth front rings. To make up for this loss of gear, rear cassettes have gotten wide and wider reaches (bigger big cogs and smaller small cogs.)
Most places I've been call the seat a "saddle."
I love the hand drawn style so much, by the way.
True, though road bikes (even the new 12 speed ones) still use a 2x system on the front. TT/triathlon bikes sometimes use a single chainring as well since they don’t need to climb
For heaven's sake: on wheels, please reference the unambiguous ISO sizes instead of the horror show of trade sizes. A 26" mountain bike wheel and a 26x1 3/8" wheel from an English three speed are two entirely different rim sizes, to name but one example. They are ISO 559 and ISO 590.
Cool!
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
Thanks for the feedback! I think the text speed might be an issue with my implementation: it adds a single character on each animation frame with a WPM speed limit, but this would cause problems if a device isn't able to animate very quickly. A better approach would probably be to use the wall clock time to figure out how many characters to add on each animation frame.
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 :) )
You can still embed bitmaps inside SVGs
What's the WPM limit you're using? It seems to be significantly slower than my silent reading speed.
It's set to 3600 characters per minute here, so 60/second: https://github.com/nlemoing/bici/blob/main/bike.ts#L451
Thank you for creating this!
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.
Disabled! Thanks for the feedback.
Congrats on building and releasing this passion project! I love the hand drawn aesthetic. You had a vision and made something totally unique on your sabbatical. I hope you don't get bogged down in making it more "accurate" and "comprehensive" (unless you really want to!).
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!
Super cool! I'm just starting to get into very basic html/web-dev, so not only were the 'hidden' messages in your html cute to read via inspect element, but seeing that this was all contained in a single javascript file was pretty eye-opening for me! thanks for making it open source, I'll be sure to give it another look once I get to that.
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!
Breadcrumbs and hyperlinks are great ideas, thanks!
I’d love to see something similar for film projectors, let me know if you end up building it.
When I first landed on this page I didn't see any call to action so I left. Adding animation or a label to the button might help.
The button was very obviously there to be pressed. Took me like 2 seconds to figure out.
Try speeding up the animations and adding easing to them… https://developer.mozilla.org/en-US/docs/Web/CSS/animation-t...
I rolled my own easing function (taking the square root of the progress, which is a number between 0 and 1) because I was missing the vocabulary to search for a proper one. Thanks for the link!
The hotspots are all wrong for me in Brave. I mouse over the fork and it says frame. I mouse over the handlebars and it says seat. I mouse over the front brake and it says stem. Etc.
Congratulations! As a bike noob, this was very informative.
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 Bicyclopedia seems to think that the frame is the most expensive part of the bicycle.
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.
A non-suspension fork is ok for 95% of people and likely cheaper than a matching frame, less material and a simpler shape.
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…)
A fairly common story for people with a fork that has never had maintenance:
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.
This is nice. I remember as a kid having a "How Stuff Works" (I guess that's the original name, I had it in Spanish) CD-ROM with a similar vibe.
I skimmed the info, but didn't see this project somewhat related to drawing bicycles mentioned
https://www.gianlucagimini.it/portfolio-item/velocipedia/
Text speed is fine in my opinion, but what is most disruptive is that I couldn’t select it.
You put too much effort into the prose to be keeping it caged.
I hadn’t considered that! Since I’m using canvas, I’d have to roll my own selection code since what’s displayed is just a bitmap. But I may fall down that rabbit hole someday :)
The slow text reveal is deeply annoying and spoiled it for me.
Nice project! The name reminded me of another bike-related project that you may find funny (or infuriating) to browse, since it kinda feels like the inverse of yours :p https://www.gianlucagimini.it/portfolio-item/velocipedia/
Fun project! Using the slightly different values of black pixels to map button clicks back onto the right object is a clever hack.
doesn't load in FF for me
Worked fine in FF for me.
Maybe look at plugins / extensions?
Cool!
"I worked in a bike shop for four months in a sales and customer service role, and now I'm Sheldon Brown!"
Hah, I wish!
Exactly who came to mind.