The site is generated using 11ty from a couple of JSON files containing the book data, which I collected with the help of a few Python scripts. I used lozad.js and Isotope for lazy loading and filtering respectively.
I'm not a dev, so please forgive the cludgy code! This is not a product or service of any kind, but simply a hobby project I made in my free time this week. I'd appreciate any feedback you can offer :)
Some things I learned:
- I should try using LESS and SASS as my css file is a bit of a mess.
- 11ty deserves all the hype it gets in the SSG scene. The docs are a bit sparse for a novice like me, but I found a few fantastic third-party tutorials that I didn't know about when I first mucked about with 11ty.
- Install node and npm via nvm if on Linux to avoid permission errors
- Web dev is hard
Some issues I'm aware of:
- Background scrolls when moving the modal (can't figure this out).
- Some tags are misspelled and should be grouped further.
- The book covers are pretty awful quality.
- The site is quite large (~4 MB); I need to learn to integrate minification into the build process.
Edit: List formatting
1. 'Double click to close' is very non-standard web UX, I'd recommend not trying to innovate on UX and simply supporting the back button as sites always have. Double click also breaks text highlighting. It's really only worth breaking the rules once you've mastered them AND have a use case where breaking it opens up a new opportunity.
2. Right now when you press back when looking at a book, you return to the home page rather than the page you were just on (subject area, e.g. Sci Tech), which is also unexpected.
3. If your book info overviews are super short, you may want to consider opening them accordion-style within the subject view, so you can continue to browse/scroll without further navigation.
4. You may want to consider using a standard CSS framework like Bootstrap or Tailwind until you're more comfortable with frontend design. There's an order of magnitude more complexity and nuance to frontend design/dev than engineers typically are aware of and these frameworks get you far, fast.
Good point about CSS frameworks - when I started making this site I underestimated the amount of design-related decisions involved. Getting the data was surprisingly the easiest bit.
I encourage you to continue this as it's always best to have a project be the motivator to get deeper into it!
Great site, very simple and useful!
The reason I ask is HN is a great community that may provide valid advice as towards the direction you would like to pursue in dev ( if you so desire ).
I found a book that I've added to my list, so thanks again.
My chosen career is further away from tech than I'd like - I'm in my final year of medical school. I love tinkering with computers for fun.
Ideally, I'd like to be able to include programming alongside clinical practice in some way. I've picked up some very basic Python by making hobby projects over the last few years, and my current aims are to improve those Python skills and brush up on statistics in order to learn, er, statistical learning for research. I'm slowly making my way through MIT's 6.0001 and OpenIntro statistics.
I really hadn't expected this project to receive this many responses! My impression of HN has been that it's full of highly skilled, super talented devs and I was a bit intimidated by the idea of posting about my own clunky project. But thankfully HN is a lot more welcoming to beginners than I'd thought :)
Python can serve so many automation scenarios for you that I really could not recommend any better language for general purposes, great choice!
As far as sharing, welcome to software! Unlike medicine, we have the luxury, some even think obligation, of releasing early, learning from our mistakes and the market and re-iterating. Those that share the fundamental cultural values of openness, experimentation, and helpful feedback in software are, luckily, widely present here.
"If You're Not Embarrassed By The First Version Of Your Product, You’ve Launched Too Late" Reid Hoffman (founder of LinkedIn, for which he should forever be ashamed for, but he did release on time).
I would suggest, now may be the time for you to reach out to devs and request personal mentorship in Python, explaining your high load with medicine and motivation for Python. Getting personal feedback and guidance will speed up things by a lot! (Unfortunately, I'm not a Python expert, can't help there ).
Best of luck with your future projects, you're very much on the right track!
One complaint I have is the low-res cover images. I'm on a 4K screen and the cover images look really blurry. I can't make out the subtitles of books.
Also, the double-click to close is a unintuitive. I'd much prefer to use the back button
Someone else also commented about using the back button over double clicking. I'll work on that next :)
So this comes at a perfect time for me. Thank you for sharing. I will certainly be going through your stem list.
FYI, you have mixed content; the images from Google Books are coming in over HTTP, not HTTPS. I had to allow it before I could see the images.
I started with those two sites, then found the LSE one and reviews.ac.uk (a history book review site which I have yet to include). IEEE spectrum also has a book review section but it's very sparse, so I didn't bother.
I have been collecting learning resources and their reviews by experts at https://learnawesome.org/ (open-source, built with Ruby on Rails and TailwindCSS). Would you be kind enough to share the raw JSON files for their books?
LearnAwesome has its own topic taxonomy so it will still require tagging topics manually, but it can save me some effort on scraping/parsing LSE/Nature sites.
Here you go! Only the titles and review URLs were taken from the original sites. The rest are from Google Books.
Science and Nature: https://gist.github.com/PizzaMyHeart/fd264434b2b92ba6dac0871...
The book tags were taken from the source HTML and seem to have been done very sloppily, especially the Nature ones, so you'd want to create your own tags anyway.