Learning to Just Fucking Ship 🚀
It's been a long few months.
My dream has always been to start my own software company.
I failed to comprehend how much difficulty that entails.
I knew it would be hard, but I didn't actually understand that viscerally.
I have a TON to learn. I am my biggest obstacle.
I go
Trending on Indie Hackers
After 19,314 lines of code, i'm shutting down my project
Need feedback for my product.
40 open-source gems to replace your SaaS subscriptions 🔥 🚀
We are live on Product Hunt
Don't be a Jerk. Use this Tip Calculator.
Have you considered an option that will listen for changes at a site and email you a screenshot when changes appear? I know people in competitive research that use scraping tools for this, might be another market for you!
Yes, actually! I've been thinking of something very much like that as the next step in this product's evolution.
Are there any existing tools they're using you could point me to for research purposes? Or anyone you know that I could chat with?
I work on a tool that will do this kind of things (for over a year now, having in mind small kid and a full-time job - so completely get your topic title :D ). Happy to share my idea and progress so far, so let me know if you want to chat.
Yeah, I'd love to hear where you're at and where you're headed!
I expect to post about my journey here in the upcoming days - but it would be great to send me an email and we can talk - happy to share my insights :)
Looking forward to hearing about your journey! :)
I'm pretty sure I found your email, sent you a note. Let me know if you didn't get it.
It went to Spam :) it's good now.
Our company uses crayon
Okay, cool, thank you!
I'd check out import.io, they are the scraping site that I've seen mentioned before.
Will do! Thank you!
I congratulate you on shipping a product! Not sure if there is any market for that, because there are Linux tools that let you do the same things effortlessly ( from command line ). But of course I might be wrong and I wish you that :)
Haha, thank you! :)
There's other similar paid tools that exist out there already so I think I have a chance!
At the very least I have use for it myself :)
I like this.
An idea I've got looking through though:
Instead of having duplicate information on your pricing boxes, why not just say the fee per x units? And give them a slider from 0-n images with a price quote next to it. That way they can also choose how many credits they want to purchase.
Glad to hear you like it! :D If you've got anything you'd like to use it for, I'd love to hear about it.
Thank you for the suggestion as well. I've been considering an approach like that, and I might move that direction eventually.
It's a trade-off between different kinds of simplicity. On one hand, I can definitely see that somebody might want 5,000 images (or something) rather than one of the packs I have defined.
On the other hand, there's a certain mental burden in being forced to estimate exactly how many credits you want, and weighing how the price responds ($/image gets cheaper the higher you go). When somebody hasn't even tried it yet, that's not a burden I want to put on them.
We'll see how this next week goes and then I might try out a slider :)
Worst case, I can create custom packs for people really easily, so we'll see if I get any support inquiries about it.
I've actually already got a service which does this for some private projects ;)
Some questions:
BTW, I think to refine my point above, the main issue was there was a lot of information overload of duplicate data which kinda threw me off a bit.
Well done on getting something out there though :)
Re: information overload, I've reduced the info cards to buttons! I'd love to hear what you think :)
I think it's a much better implementation! Fits in well and adds colour at the same time.
Sweet! Thanks for checking it out :)
Ah, gotcha! :) Mind sharing which service you're using?
You're exactly correct. I've got some worker machines that fire up Puppeteer to generate the screenshots.
Not quite sure I follow what you're asking here. It screenshots websites as they are, so whether the website uses server-side rendering or uses client-side JS to render, it'll show up in the screenshot. Currently I don't have a way for you to send us a custom blob of HTML or something, if that's what you mean. Or do you mean something else entirely?
By default the images are cached for 5 minutes, and there's no charge for requesting cached images. It's on my TODO list to surface the caching controls in the API soon, as that 5 minutes is arbitrary and could be anything somebody wants.
I've been waiting to see if JPG and PNG weren't enough for anybody :) I don't support it currently, but I could add support for WebP very quickly.
Ah, the information overload is a very good point, maybe I'll move to smaller cards.
Thanks again! :)
Re 2: Some of the older screenshot services didn't/couldn't execute JavaScript, so it broke client-side rendering. But you answered my question with point 1 :P
Ah, makes sense! :)
Congrats on shipping! Seems like a straightforward tool and easy to use.
Tiny feedback: When I loaded your website, for a split second, I thought the example image on the top was an advertisement (probably because of the 'sitetoimage.com' watermark that looks like a google ads watermark). Maybe just me. Suggestion: Maybe shift the text box up and the example image below it?
I ended up doing exactly as you suggested and put the text box on top - Does it look better to you?
Looks good to me, Tyler! :)
Sweet! Thank you :)
Thanks for for the feedback, I really appreciate it! :)
You're not the only person to mention that they thought it was an ad, I added the blue bar that says "Screenshot taken just now by Site to Image:" to hopefully help clarify, but it's interesting to hear that still wasn't enough. I like your idea of switching the order, I think I'll give that a shot.
Congrats on shipping!
Some ideas... Maybe add an option for a delay before taking the screenshot?
If a site has a loading animation (fading in, or pre-loader), sitetoimage captures an image that is halfway in-between the fading in.
Also, maybe a setting on what screen resolution to capture the screen shot... i.e. mobile site 320px, 1200px, 1600px or whatever.
The delay is now implemented as an API option! Thanks again for checking it out and for the suggestion :)
Thanks for checking out Site to Image, I really appreciate it! :)
Yeah the delay (or some other better loading detection) is high on my list.
The resolution is already an option! I just didn't want to overwhelm people with all the existing options on their first interaction. You're not the first to mention this however, so I'm thinking I'll add some way to indicate that it's possible so people aren't confused.
At first I wasn't sure of a use case but I could see this being used for an automation tool I built for our customer support team. If we ever revisit that tool I'll definitely give this a go. Going to forward to a PM who has been looking for this too.
Awesome tool!
Any response from the PM about this? I'd be curious to hear what their thoughts were.
He found it interesting. Doesn't have any projects in the pipeline currently for a use case but I'll be sure to mention it if any projects look like it might be a good use case.
My team in particular might have a good use case for this in the future.
Okay, thanks for the info and for passing it along! :)
Do you mind sharing what use case you have in mind?
Yeah. I'm on the automation team, which means we are working to automate mundane manual processes and become more self service. At a super high level, our product is a combination of squarespace websites, appointment reminders, feedback requests, online appt booking, and EHR/PM medical integrations. The big task is to take an existing medical practice's website and create/convert it to our platform. Which is where we would potentially screen cap their existing website to show during the onboarding form to validate the existing domain they give us.
That one above is a bit of a stretch but there are other potential uses cases like automated performance reviews.
For my personal project gmb.guru which does automation of google business listings and google posts I could potentially use it to grab their current business listing and make a sales pitch from it using their active listing.
Very nice! Thanks for the info :)
You guys must have one heck of a sales process for that squarespace-like product. Doing anything in the medical field is quite the undertaking.
And I love the integration idea you have with gmb.guru :) If there's anything I can do for you to help make that happen, let me know, I'm more than willing.
Yeah, definitely this is meant for automation of all kinds!
Thanks so much for giving it a look and for passing it along to that PM, you're awesome! :)
Preach!!! The key is to just SHIP!!!
Definitely, man! Shipping has been a great learning experience for me.
Checked out your profile and it looks like you're crushing it out there. Keep up the awesome work! :D
If you've got any advice for a newbie indie hacker I'd love to hear it.
Not so much a critique as a thought: My first reaction to the demo screenshot itself is: That looks kind of clunky! When I tried to analyze why, I think it's two things: 1. The particular font used on the news.ycombinator.com example. It's just a lot wider than I'm used to. And: 2. The lack of sub-pixel rendering. Now, I realize you probably can't do sub-pixel rendering in a general-purpose screenshot, but it does make the words stand out as slightly blurry among the rest of your nicely rendered page.
Not sure if that's really actionable feedback. Maybe a different example demo screenshot would look better, even without any other changes under the hood?
Anyway, awesome work!
Thanks for checking out Site to Image, you're awesome :)
You make a good point, and I'll do some thinking this evening to figure out how to spruce it up a bit.
Honestly, a lot could be fixed if I rendered the demo image in PNG instead of JPG :P
Here's a PNG, does this feel any better to you?: https://sitetoimage.com/api/screenshot?token=token-e72584563c819c172511e3a21a8e8408d862e711f615f922e830fa24bcf593c4&width=400&height=300&fileType=png&url=https://news.ycombinator.com
It's maybe a little crisper, yeah. But it still stands out from the rest of the text on your site, in that it doesn't have that sweet, sweet sub-pixel rendering. Maybe I just need a higher-res display, and then I wouldn't notice the difference. :)
Haha, okay! Thanks for taking a look :)
Nice work! Can I ask what stack you used to build this? The more detail the better! Thanks so much!
Certainly! I actually made a Reddit post with decent detail over here: https://www.reddit.com/r/webdev/comments/cqsnh2/my_experience_shipping_my_first_app/
The short version is: TypeScript, Node.js, MongoDB, React, Zeit, Paddle, AWS, Docker, and Puppeteer.
Ahh perfect!! I'm kinda getting started in full-stack dev so this is so useful, thank you!
Awesome! Glad I could help, and best of luck to you!
If I may offer unsolicited advice, find some small set of tools that really work well for you and then run as far with them as you can. Full stack work has so much going on all the time that it's easy to get lost in it think you need to learn the new hotness all the time. Find what works for you, and then make great stuff with it.
If you have any questions about full stack dev feel free to shoot me a message any time. I've been doing this kind of stuff since 2013, and I've got lots of sympathy for those coming to the field with fresh eyes :)
Thanks! I'm definitely feeling that overwhelm of frameworks.. its hard to know which are essential and which are new/non-essential/optimization type tools (as a front-end beginner). I'm basically only familiar with HTML/CSS/Typescript and (kinda) React.. any advice on what else I need do build a front end with the basics like user login/auth, some way to call my backend, and whatever I need to host/deploy it? The backend stuff I think im good with. Cheers!
(Feel free to reach me by email if that's easier)
It actually sounds like you've got all the pieces you need to build out a full frontend, especially if you've already got the backend stuff handled!
Since you mentioned users/logins, please be sure to keep an eye on security when you implement stuff like that. The OWASP Top 10 is a great resource on common security flaws people implement. It's not specific to any language or framework, so it should be broadly helpful: https://www.owasp.org/images/7/72/OWASP_Top_10-2017_(en).pdf.pdf
Great work, @tylerchurch! I really like how fast the screenshot is generated. It's almost instant for me. One thing that I missed was the ability to increase the height of the screenshot (like having the ability to take a screenshot of the entire page). Other than that, it's like someone else said: just keep building!
Thanks for the feedback, Gabe! :)
Yeah that's a feature that is available, but I wanted to keep the home page/landing page simple and only give the option of picking the site, rather than overwhelm people with all the options.
Any thoughts on striking that balance?
One thought is to include that information in the "Built for Developers" feature list section of the page, but without cluttering up the demo with it. Or put it in the FAQ. That way, you close that gap for anyone wondering if you have the feature.
Thanks again for the idea! I implemented it exactly as you suggested :)
Makes sense. I'll work on presenting that info in a nice way. Thanks for the ideas :)
Good work Tyler, keep building. Add this to the portfolio and build the next thing and try to RE USE as MUCH as possible from the previous tools/products you've built. Trust me!
Thanks for the kind words and the advice, I really appreciate it :)
I applaud you in getting something shipped, because you're exactly right in saying that it's a muscle, and you'll continue learning about the process where it'll get that much easier as you move forward.
Product-wise, did you vet this need? I potentially see that value behind only needing to supply a URL to get a screenshot, but there are also so many chrome plugins to use when you're on that website, and getting a full or partial screenshot. Maybe using this would save me time? But how often do I need to take screenshots? I guess I'm just curious if you talked to people, or maybe you personally faced this issue, and more or less built it to solve it for yourself. In any case, nice job getting something out there!
I appreciate you reading my post and checking it out, Ben! :)
This is scratching an itch I myself have. I did do some vetting, but it was pretty limited. I found online a number of people mentioning having to build something like this for themselves, and there are some existing services or tools with varying levels of quality.
Definitely for one-off screenshots, many desktop tools or browser extensions can do the job. But if you ever have to do A LOT of them or embed a dynamic one in a webpage or if you need to take a screenshot of the whole page (including what's below the fold), many common tools won't help you there. Those are some of the use cases this is aimed at.
I hope to build other products on top of this one, regardless of whether or not it takes off, so I'll be dogfooding it no matter what. My favorite idea at the moment is a tool that will monitor my websites for visual changes. Too often I've seen developers (myself included) push out CSS or other changes to improve one page, only to break others in the process. So I'd like to build a safety net for that, and this is the first step in that process.
Love it — great job so far, and for sure take on that second idea. I'd love to have a tool like that. There's so many great ways you could provide a visual to devs showing them where changes are affecting
Thanks! I'm stoked to hear that you'd be interested in something like that! :D Is it okay if I reach out to you when I get something going in that direction to get your feedback?
Please do!
Awesome! Thanks :)