Phrogz

phrogz.net · Personal blog · on HN since 2009

Phrogz is the site of a developer who writes web development tutorials on CSS and JavaScript, plus tools like a screen density calculator.

What HN saysHN links its screen density calculator in threads on 4K displays, DPI scaling and pixels per degree, where commenters work through the numbers.
26HN people shared it
18linked it in comments
8stories submitted
15story points
12 months agolast shared
2009people per year2026

Most-shared posts

  1. 1
  2. 2
    ScreenDensityCalculator
    4 people · first shared 2019
  3. 3
    Learning Lua from Javascript
    3 people · 4 points · first shared 2012 · discussion on HN
  4. 4
    OOP in JS - A quick Tutorial
    2 people · 1 points · first shared 2012 · discussion on HN
  5. 5
    ScreenDens2In
    2 people · first shared 2017
  6. 6
    WhyTablesAreBadForLayout
    2 people · first shared 2013
  7. 7
  8. 8
    Extending JavaScript Objects and Classes
    1 people · 1 points · first shared 2009 · discussion on HN
  9. 9
    Object Oriented Programming in JavaScript (2003)
    1 people · 1 points · first shared 2015 · discussion on HN
  10. 10
    Javascript Inheritance
    1 people · 1 points · first shared 2013 · discussion on HN
  11. 11
    WhyTablesAreBadForLayout
    1 people · first shared 2010
  12. 12
    Programmingruby
    1 people · first shared 2010
  13. 13
    Canvas image zoom
    1 people · first shared 2021
  14. 14
    Taint
    1 people · first shared 2015
  15. 15
    Distinct colors
    1 people · first shared 2015

What HN people wrote when they linked it

lhl · 2020-06-26
Doing a search by laptop spec [1], there is exactly one laptop model, the Lenovo Legion Y740S-15IMH [2] that has an i7-10875H CPU, a 4K display, and no dGPU. Sadly, it seems to have pretty limited region availability so far (see the PSREF listing to check). If you're willing to forgo the 4K display (a 15.6" 1080P screen at 24" is >60ppd, so it should be close to a "retina" display [3]) then you might have another option (the one I've been looking at). The latest AMD 4800H processors perform neck and neck with the i7-10875H (with much better power/perf) [4] and there's one ODM, Tongfang, that has a Renoir refresh (model PF5NU1G) that looks like it might be the best option available this generation (I'm looking for much the same thing as you - the highest CPU power possible, no dGPU for better battery life and less Linux hassle). It's using the same (1.5kg 15") chassis as their older Picasso model (see the Schenker VIA 15 NBC review for a good overview [5]) but with some notable improvements: * Improved dual fan, dual heat pipe cooling means it can boost to 65W and sustain 54W CPU performance * Dual channel, dual DDR4-3200 SODIMM slots (but the tradeoff is now only 1 M.2 slot) * slight display upgrade from N156HCE-EN1 [6] to a NV156FHM-N67 [7] - matte, 300nit, 100% sRGB, dE<2, 1000:1 contrast ratio FHD screen w/ DC (not PWM) dimming * USB-C PD (Power Delivery) support added, but no DP (DisplayPort alt mode); but has HDMI 2.0 support for a single 4K@60 external…
deno · 2018-04-03
> A 28" 4K UHD has 157 dpi, so I wouldn't want to try it at 100% scaling - ouch. It ought to be running in the 150-175% scaling range. That’s not how it works. Lower dpi does not somehow give you more real estate! You should still be running with ~200% scaling because you are viewing it at a greater distance. Optimal viewing distance, assuming 16:9 ratio, is 120 cm vs 140 cm for 24" vs 28", respectively[1]. Accounting for the difference gets you ~155 ppd with both monitors[2][3], maintaining 25.0° horizontal viewing angle. The closer your viewing distance the more ppi you need for the same density. That 28" is not inferior to the 24", when you account for distance, despite the lower ppi, because the greater viewing distance makes the pixels look smaller, thus creating more dense image. [1] https://en.wikipedia.org/wiki/Display_size [2] http://phrogz.net/tmp/ScreenDens2In.html#find:density,pxW:3840,pxH:216… [3] http://phrogz.net/tmp/ScreenDens2In.html#find:density,pxW:3840,pxH:216…
blauwbilgorgel · 2011-02-28
I love CSS2 just the way it is. Developers seem to have a knack of forcing object-oriented thinking on CSS. They want to dictate what CSS should do different, when browser vendors still have trouble deciding what specification-valid CSS should do. Dynamic CSS to me is an abomination. CSS is not a programming language and I doubt treating it like one will enhance portability and suddenly inspire the OP to invent the "holy grail" of CSS layouts: A simple variable height multi-column design with a header and a footer. Come on, give the web and the front-end community a little respect. Don't use javascript for essential design/layout work, you don't need it, never needed it for years. You don't need hacks or CSS3 to build a fantastic website. You can float and use absolute positioning to your hearts content. You can keep your stylesheet organized and even support mobile and print media with it. @cletus Vertical-align:middle does work differently on block-display elements. Use it in conjunction with display: table-cell or look at http://phrogz.net/css/vertical-align/index.html I consider the OP post a little flame-batish and uninformed. I could say this about Lisp in an exaggerated manner: I hate it, because it does support labda, though it has its drawbacks and all those brackets look silly and confusing. I haven't really studied Lisp, but it could benefit from listening to my problems (which are real).
giobox · 2025-11-12
Even the vision pro at 35ppd simply isn't close to the PPD you can get from a good desktop monitor (we can calculate PPD for desktop monitors too, using size and viewing distance). Apple's "retina" HiDPI monitors typically have PPD well beyond 35 at ordinary viewing distances, even a 1080p 24 inch monitor on your desk can exceed this. For me personally, 35ppd feels about the minimum I would accept for emulating a monitor for text work in a VR headset, but it's still not good enough for me to even begin thinking about using it to replace any of my monitors. > https://phrogz.net/tmp/ScreenDensityCalculator.html
rtkwe · 2025-11-12
I did the math on this site and I'd have to hunch less than a foot from the screen to hit 35 PPD on my work provided Thinkpad X1 Carbon with a 14" 1920x1200 screen. My usual distance is nearly double that so my ppd normally is more like 70 ppd, roughly. https://phrogz.net/tmp/ScreenDensityCalculator.html#find:distance,pxW:…
vanderZwan · 2021-06-24
Well, I enjoyed (skimming through) it :) The part where the two of you discuss how Firefox and Chrome now load progressive JPGs with blur instead of keeping it pixelated made me wonder: what happens if I set the CSS of an image to upscale it with pixelation? Does it also force progressive JPGs to stay pixelated while loading? [0] http://phrogz.net/tmp/canvas_image_zoom.html
VRay · 2019-02-25
Handy calculator: http://phrogz.net/tmp/ScreenDensityCalculator.html#find:distance,pxW:2… Looks like it's probably similar to using a 27" monitor on your desk, depending on the resolution/size of the display
derimagia · 2017-03-26
Vertical align needs to be in a table cell. Although most of the article is satire, vertical align has a lot to do with tables. Centering only works in table-cell elements. Take a look at the code http://howtocenterincss.com/#contentType=text&horizontal=center&am… Or, one of the references mozilla links to there is: http://phrogz.net/css/vertical-align/index.html
LewisJEllis · 2015-12-23
For a couple of quick intros, try Learn Lua in 15 Minutes[1] and Learning Lua from JS[2]. For a bit more depth, try the Lua-users Tutorial Directory[3]. For serious depth, the two recommended by Gracana, PIL[4] and the reference manual[5], are fantastic. For an overview of the ecosystem, including some useful gamedev libraries and LÖVE-specific resources, take a look at awesome-lua[6] (my own, shameless plug). http://tylerneylon.com/a/learn-lua/ http://phrogz.net/lua/LearningLua_FromJS.html http://lua-users.org/wiki/TutorialDirectory http://www.lua.org/pil/ http://www.lua.org/manual/5.1/ https://github.com/LewisJEllis/awesome-lua
flgr · 2015-07-03
> but ruby doesn't track external strings as dirty like that. It does: irb(main):001:0> gets.tainted? foo => true You can even set $SAFE to 1 or higher to disallow the use of tainted strings in potentially dangerous commands: freya:~ flgr$ ruby -e '$SAFE = 1; system "tar bla bla #{gets}"' foo -e:1:in `system': Insecure operation: -r (SecurityError) from -e:1:in `<main>' See http://phrogz.net/programmingruby/taint.html for more information.
hrrld · 2015-03-16
I like it. You might enjoy this: http://phrogz.net/css/distinct-colors.html
simple10 · 2015-01-25
For reference, here's why JavaScript to Lua converters are really hard to make feature complete. http://phrogz.net/lua/LearningLua_FromJS.html http://stackoverflow.com/questions/1022560/subtle-differences-between-…
nikz · 2010-08-28
The API documentation is probably not where you want to look in this instance. It's more intended for looking up the behaviour or options for a specific method call. http://guides.rubyonrails.org is the equivalent of the Python documentation you point to for Rails. If you want Ruby-specific documentation, there are versions of the Pickaxe book online (http://phrogz.net/programmingruby/). Admittedly old versions, but well organised by-topic nonetheless.
mojomark · 2017-03-10
In case anyone is interested - NVIDIA on PPD: http://phrogz.net/tmp/ScreenDens2In.html#find:density,pxW:1920,pxH:720… They claify that while acuity limits for a person with 20/20 vision is 60PPD, the average acuity is more like 20/15, equating to 80PPD. It looks like NVIDIA put the PPD benchmark for an ideal display at ~92PPD, which would push the acuity limits for just about every human user. That seems reasonable to me. As a point of reference, accounting for binocular overlap values (which I had to hunt for), I calculated PPD's for two of the highest pixel-count HMD's out there: StarVR: 18.6 PPD Sensics dSight: 20.2 PPD I don't have the details needed to calculate Avagent or Hololens PPD's, but I'd venture to say their at this point or lower. So, as you can see, we still have a long way to go. One more note - Displays don't need a constant PPD accros the entire rendered image, thanks to steep visual acuity drop-off relative to FOV angle (1). So, to the OP's credit, perhaps there is still some work that is needed on the PPD metric to account for HMD's that use foveated imaging (2), such that all displays (foveated & non-foveated) can still be compared side-by-side. 1. https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/AcuityHumanE… 2. https://en.wikipedia.org/wiki/Foveated_imaging
shakna · 2016-11-25
caniuse [0] has some stats. Flexbox is supported in: * Internet Explorer 11, but only partially * Edge 14+ * Firefox 52+ (Everything but buttons in Firefox 50) * Chrome 51+ (50 had it, but had a bug that still plagues Safari) * Safari 9.1 (but Safari has a couple huge bugs [1][2]) * Opera 41+ * Safari iOS 9.3+ (but see [1] & [2]) * Every version of Opera mini * Android Browser 4.4+ * Android Chrome 53+ A great bullet-point list of why not to use tables for layout can be found here [3]. Flexbox is designed to enhance and make easier some of the CSS that we already use today, so they go hand in hand. As to Bootstrap, as of v4, it will include Flexbox as an opt-in option (in case you support old browsers where it wouldn't work). [4] [0] http://caniuse.com/#search=flexbox [1] https://bugs.webkit.org/show_bug.cgi?id=136041 [2] https://bugs.webkit.org/show_bug.cgi?id=137730 [3] http://phrogz.net/css/WhyTablesAreBadForLayout.html [4] http://v4-alpha.getbootstrap.com/getting-started/flexbox/
ggchappell · 2010-11-15
This site sums it up pretty concisely: http://phrogz.net/CSS/WhyTablesAreBadForLayout.html Not that I agree with him entirely. In particular: > 6. Once you know CSS, table-based layouts usually take more time to implement. For a sizable site with layouts reused over multiple pages, yes. For a single page, or a site with differing layouts for each page, in my experience, no. Actually, I'd extend that first sentence of mine into a new reason: with CSS you can specify your layout once, and not have to redo it for every page. Doesn't work with tables. > 7. Tables are semantically incorrect markup for layout. My response: So what? (Yes, I know about the problems with screen readers, but that's a different reason, one I happen to agree with.) And then, on the other hand, there are the things no one wants to say: the advantages tables have over CSS. In particular, it's obvious to me that CSS was not designed with modern layouts in mind. The fact that it works at all is really just an accident: it turned out that you can make columns using floats (how 'bout that?). Yes, using tables for layout is a kind of jury-rig, but to be honest, so is using CSS. And at least tables have a mechanism for producing columns, that was designed with columns in mind. And then there are the browser rendering inconsistencies. With modern browsers, these problems are fading, but for older ones, the inconsistencies with CSS seem to be much more troublesome than those with tables.
rhnvrm · 2015-09-26
I wrote a small script to solve the easy ones in the browser: https://github.com/rhnvrm/30s_challenge Here is the script for solver: https://github.com/rhnvrm/30s_challenge/blob/master/solver.js and here is the cheat: https://github.com/rhnvrm/30s_challenge/blob/master/cheat.js Also, I found that since the methods of the game and challenge class are public, you can actually just call it's functions. I also found a useful resource for learning OOPs in js http://phrogz.net/js/classes/OOPinJS.html and how to make methods private. There is another cool article here on how to make members private and protected here http://philipwalton.com/articles/implementing-private-and-protected-me…

Keyboard shortcuts

/Search
j kNext / previous blog
EnterOpen selected blog
vVisit the blog site
fFollow / unfollow
lSwitch grid / list view
dSwitch dark mode
g hHome
g pTop posts
g tTopics
g fFollowing
g lLiked
g yHistory
g qFAQ
EscBack / close