News for hackers. Stuff that matters.
Re:Show HN: Laptop.css by btown on Thursday September 12, 2019 @12:07PM (#20953108)
Jokes aside - and I absolutely love this - is there actually a good (S)CSS library, with freely-licensed configurable template imagery, that lets you say "I want this image to be displayed as the screen of an high-resolution photograph of a MacBook/iPad/whatever, sized so that the photograph of the device itself itself fills its container?" It's surprisingly hard to find, and I recently had to roll my own, transparency mask and all.
Re:Show HN: Laptop.css by samfrost on Thursday September 12, 2019 @12:17PM (#20953244)
Re:Show HN: Laptop.css by IMAYousaf on Thursday September 12, 2019 @01:01PM (#20953775)
This doesn't answer your question with regards to devices, but for screenshots involving browsers, I believe that Screely is the best/fastest/easiest thing out there to use.

https://www.screely.com/

Re:Show HN: Laptop.css by anamexis on Thursday September 12, 2019 @01:21PM (#20953965)
Slightly embarrassing that they don't have screenshots on their site.
Re:Show HN: Laptop.css by topoftheforts on Thursday September 12, 2019 @01:40PM (#20954171)
I always find this very frustrating, how hard can it be to put a demo (or even just a screenshot) of your product? Did they not think someone visiting their site would want it?

On this note, the worst offender in my opinion is Voyager for Laravel [1], where the "play" button has been put over a screenshot of the product, but when you click on it there's a 90 second video of a guy talking about the product. So. frustrating.

[1] https://voyager.devdojo.com/

Re:Show HN: Laptop.css by AlphaWeaver on Thursday September 12, 2019 @12:53PM (#20953661)
I also recently built something in this vein... It's a library that will automatically screenshot a page and put it in one of those device frames...

The idea is you can use it as part of your test / build process to generate deterministic(ish) image assets...