6 ms·

Show HN: Laptop.css

92 points by jjkaufman 7y ago

thismyrealone 7y ago
I love it. Not sure if I'd ever have a reason to use it...but I love it!
albydarned 7y ago
Possibly the best *.github.io page i've ever seen. Great work!
btown 7y ago
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.
- samfrost 7y ago
  https://www.facebook.design/devices https://www.facebook.design/devices
- AlphaWeaver 7y ago
  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...
- IMAYousaf 7y ago
  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/ https://www.screely.com/
  - anamexis 7y ago
    Slightly embarrassing that they don't have screenshots on their site.
    - topoftheforts 7y ago
      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/ https://voyager.devdojo.com/
soperj 7y ago
Bill Gates dancing... oh man.
jolmg 7y ago
:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.
- nicoburns 7y ago
  Sadly not portable enough if you need to support IE. Give it a few more years though.
  - eitland 7y ago
    Does frontend developers care? It seems to me a lot of frontend developers has a hard time wrapping their head around the fact that there exist millions of users who prefer other browsers than Chrome :-/ Full disclosure: I sometimes work on frontend myself, I have talked to such developers.
    - jolmg 7y ago
      On average? No. It's easier for developers to target only one platform and switching browsers is easy enough for the average user that developers don't see much problem in putting the blame on the browser. Chrome also has greater marketing power backing it than other browsers, so it's the easy choice. That's what happens. Should you care? I think yes. I don't want the internet to be at the whims of a single entity. It's like authoritarianism vs democracy or having a monopolistic market vs a competitive one. What's best for the tech ecosystem isn't something the average developer thinks or cares about, though. When I show my co-workers how our front-end breaks when using Firefox, they often mistake my concern of portability to be favoritism towards Firefox. I'd use other browsers, but it would just make it harder to convince them to take the bugs seriously.
      - eitland 7y ago
        Sad thing is we fought so hard back in 2006-2009 to get to get past bosses and clients who wanted us to just make it work in IE, and here we are a decade later and those who should be building on our work are tearing it apart by carelessness. Edit: if any frontend/web developers today reads this, please do use Firefox for development. I'll tell you why: I can only remember a single time that I wrote something in Firefox that didn't also work in the latest IE, Chrome and Edge. Web developers I work with who use Chrome however seems to constantly have to go back and fix stuff that doesn't work anywhere but Chrome, exactly like web developers who developed in Frontpage and IE had to. If you don't want to spend time with regressions from QA and you don't want to look unprofessional, develop on Firefox. The happy feeling you get from doing something good for the web is a bonus.
j79 7y ago
Wow, the simplicity of this is blowing my mind. I don't think I have ever even considered using `white-space: pre` with generated content. Really fun, really cool!
xrd 7y ago
Adding an animated image of Steve Balmer and Bill Gates dancing at the Windows 95 launch is guaranteed to get an extra 10 points on Hacker News. It's just science.
- ghostbrainalpha 7y ago
  Your science. My religion.
philipkiely 7y ago
This is great! If you're looking for some more realistic looking (and resizable) phone or laptop devices, check out https://github.com/philipkiely/devices.css https://github.com/philipkiely/devices.css
Tagbert 7y ago
What is the purpose of this?
rubenhak 7y ago
This is quite useful, but frankly I doubt many would be willing to put the ASCII style laptop on their web site. Literally a week ago we had to design a bootstrap carousel inside macbook pro laptop here: https://berlioz.cloud https://berlioz.cloud If you could add more style options of devices like macbook, imac, few PCs, tables and mobiles it would be so great!
- rubenhak 7y ago
  and most important, don't forget the iWatch 5 :)

Show HN: Laptop.css

92 points by jjkaufman 7y ago

thismyrealone 7y ago

I love it. Not sure if I'd ever have a reason to use it...but I love it!

albydarned 7y ago

Possibly the best *.github.io page i've ever seen. Great work!

btown 7y ago

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.

samfrost 7y ago
https://www.facebook.design/devices https://www.facebook.design/devices
AlphaWeaver 7y ago
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...
IMAYousaf 7y ago
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/ https://www.screely.com/
- anamexis 7y ago
  Slightly embarrassing that they don't have screenshots on their site.
  - topoftheforts 7y ago
    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/ https://voyager.devdojo.com/

soperj 7y ago

Bill Gates dancing... oh man.

jolmg 7y ago

:root { --laptop-content: ... Huh. Interesting that I never noticed that CSS supported variables like this. I haven't worked on a Web front-end for some time, but I see that this has been pretty portable since late 2017. I remember that one of the big points of using CSS preprocessors like Sass was being able to use variables. Now, it seems they're a little less useful.

nicoburns 7y ago
Sadly not portable enough if you need to support IE. Give it a few more years though.
- eitland 7y ago
  Does frontend developers care? It seems to me a lot of frontend developers has a hard time wrapping their head around the fact that there exist millions of users who prefer other browsers than Chrome :-/ Full disclosure: I sometimes work on frontend myself, I have talked to such developers.
  - jolmg 7y ago
    On average? No. It's easier for developers to target only one platform and switching browsers is easy enough for the average user that developers don't see much problem in putting the blame on the browser. Chrome also has greater marketing power backing it than other browsers, so it's the easy choice. That's what happens. Should you care? I think yes. I don't want the internet to be at the whims of a single entity. It's like authoritarianism vs democracy or having a monopolistic market vs a competitive one. What's best for the tech ecosystem isn't something the average developer thinks or cares about, though. When I show my co-workers how our front-end breaks when using Firefox, they often mistake my concern of portability to be favoritism towards Firefox. I'd use other browsers, but it would just make it harder to convince them to take the bugs seriously.
    - eitland 7y ago
      Sad thing is we fought so hard back in 2006-2009 to get to get past bosses and clients who wanted us to just make it work in IE, and here we are a decade later and those who should be building on our work are tearing it apart by carelessness. Edit: if any frontend/web developers today reads this, please do use Firefox for development. I'll tell you why: I can only remember a single time that I wrote something in Firefox that didn't also work in the latest IE, Chrome and Edge. Web developers I work with who use Chrome however seems to constantly have to go back and fix stuff that doesn't work anywhere but Chrome, exactly like web developers who developed in Frontpage and IE had to. If you don't want to spend time with regressions from QA and you don't want to look unprofessional, develop on Firefox. The happy feeling you get from doing something good for the web is a bonus.

j79 7y ago

Wow, the simplicity of this is blowing my mind. I don't think I have ever even considered using `white-space: pre` with generated content. Really fun, really cool!

xrd 7y ago

Adding an animated image of Steve Balmer and Bill Gates dancing at the Windows 95 launch is guaranteed to get an extra 10 points on Hacker News. It's just science.

ghostbrainalpha 7y ago
Your science. My religion.

philipkiely 7y ago

This is great! If you're looking for some more realistic looking (and resizable) phone or laptop devices, check out https://github.com/philipkiely/devices.css https://github.com/philipkiely/devices.css

Tagbert 7y ago

What is the purpose of this?

rubenhak 7y ago

This is quite useful, but frankly I doubt many would be willing to put the ASCII style laptop on their web site. Literally a week ago we had to design a bootstrap carousel inside macbook pro laptop here: https://berlioz.cloud https://berlioz.cloud If you could add more style options of devices like macbook, imac, few PCs, tables and mobiles it would be so great!

rubenhak 7y ago
and most important, don't forget the iWatch 5 :)