11 ms·
CSS findings from the Threads app
- sksasi 3y agoIs it still ok to use px unit?
- zamadatix 3y agopx in CSS/web is just shorthand for 1/96th of an inch, regardless how many actual pixels that ends up being. This means it's functionally the same as any other absolute value of measurement on the web, since they are all based in some mapping to physical size as well.
- innocenat 3y agoThat's only true on (most) mobile devices. px is still 1 pixel on Desktop with 100% system UI zoom (e.g. non-hidpi monitors).
- zamadatix 3y agoIt's still 1/96th of an inch in those cases, that's what is meant by "regardless how many actual pixels that ends up being".
- innocenat 3y agoIf you change system UI zoom setting then the 1 pixel size in the browser change with zoom. At 200% web 1px is actual 2px. I am not sure how it could be "1/96th of an inch" when it can change size depend on the system setting.
- zamadatix 3y ago1/96th an inch based on what the browser/system report the pixel density to be. There is no man coming out of your computer with a ruler to verify the reported value, so you're free to use a scaling value that isn't true. Zooming the browser or changing the system scaling will change the reported size of the pixels to the renderer. Don't take my word for it, it's how it's defined in the CSS spec: https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
- innocenat 3y agoI know that is how its defined in the spec. But your original comment imply that it's literally 1/96 of an inch everywhere regardless of the device.
- zamadatix 3y ago¯\_(ツ)_/¯, to the browser - it is. It is a good note to point out the browser may not have an accurate sizing of the display and would produce incorrectly sized outputs in those cases, but it doesn't change how px sizing works.
- shortcake27 3y agoI use relative units (ems/rems) for font sizes and absolute units (px etc) for everything else such as margins/paddings/borders. I also set the html font size to 62.5% which makes the math easy (1rem = 10px). This ensures that if a user adjusts their browsers font size for accessibility purposes or uses dynamic type, only the text will scale. You don’t want margins/paddings to scale with font size (at least not linearly) otherwise the layout gets cramped/unusable very quickly. As others have mentioned CSS pixels have nothing to do with hardware pixels. So there are no issues with the differences in screen densities between devices.
- deleted 3y ago[deleted]
- system2 3y agoI stick to percent personally. Easier to adjust if I am working on someone else's messed up css. rem/em depends on global values but many sites override these with different classes and manually entered pixel values. I find % to be safer than em/rem.
- dbbk 3y agoI still use it, I have yet to find any actual downside to it.
- madeofpalk 3y agoNeat. Barcelona is/was the internal name for Threads.
- blowski 3y agoI heard it was also called “Project 92”, which is also the name of a (ostensibly unrelated) Tesla project.
- 4lejandrito 3y agoThe 92 Olympics were in Barcelona.
- bhouston 3y agoThe webgl effect on the threads website is called BarcelonaGalaxy: https://twitter.com/benhouston3d/status/1676939096122327045?s=20 https://twitter.com/benhouston3d/status/1676939096122327045?...
- yosito 3y agoBarcelona is also the name of the protocol for linking to Threads on iOS. A link to barcelona:// will open in Threads.
- qingcharles 3y agoBarcelona appears to be the internal name of the project prior to release.
- stefanfisk 3y agoThe top padding in the avatar is probably to align it with the cap height of the username.
- mkoubaa 3y agoI've found that with enough effort and time I could eventually learn any programming concept. The only exception I've encountered in my career is CSS. I'm no more effective at it than I was when I first tried using it.
- afavour 3y agoI’ve still not gotten to grips with CSS grid, mostly because flexbox does what I want so I end up falling back on it at the first hurdle. But the rest of it is very clear to me these days.
- FireInsight 3y agoMost, even 2D layouts map easily into nested 1D flexbox in my head. I feel like a single dimensional approach to layouts is way easier to wrap my head around and design with.
- nicoburns 3y agoIMO CSS Grid is actually much simpler and better designed than Flexbox. I’d recommend taking a proper look when you get a chance.
- brigadier132 3y agoThey solve different problems.
- ZanyProgrammer 3y agoThis is the kind of HN comment I come for in these kinds of threads. One person saying one thing (CSS Grid is the one thing keeping me sane!) Another person coming in to say the exact opposite.
- brigadier132 3y agoI'll be a little more helpful since I wrote a one liner without really explaining anything... One explanation people like to give is: CSS Grid is for layouts in 2 dimensions, Flexbox is for layouts along one dimension. Which can be confusing because you absolutely can use Grid for layouts along one dimension too. Here is my stupid sounding rule of thumb that I think is more useful: If you want a grid layout use grid, if you want a flexible layout use flexbox. Grid quite literally splits the area into a grid but what if you want to just say "I want these two elements to be as far apart as possible within the container they are in" (ie a navbar, you want the logo on the left about 20 pixels away from the left of the viewpoert and you want the actual navigation to be on the right with the rightmost element 20px away from the right of the viewport). Flexbox is better for that.
- Zren 3y agoTIL about the dvh units used for the splash. The article even has a video of scrolling down with it. https://ishadeed.com/article/new-viewport-units/ https://ishadeed.com/article/new-viewport-units/ https://caniuse.com/viewport-unit-variants https://caniuse.com/viewport-unit-variants
- zagrebian 3y agoFor position:fixed elements, width:100dvh produces the same result as bottom:0. The dvh unit was not needed for this case.
- wackget 3y agoSplitting mobile viewports into 3 separate properties seems incredibly hacky to me. I really can't believe it's an official CSS spec. IMO the browser makers are at fault for making the viewport be partially obscured under the UI. The viewport should be just that: viewable.
- intrasight 3y agoArticle didn't have a link to the Threads site with this CSS.
- sarasasa28 3y agohttps://www.threads.net/@zuck/post/CuP48CiS5sx https://www.threads.net/@zuck/post/CuP48CiS5sx
- tester756 3y agoCool to see grid example in the article! When I've witnessed Flexbox and Grid (esp. templates) for the first time I liked Grid more, but as I've seen Flexbox more commonly used in the industry grid-template-areas: "avatar header" "avatar body" ". body" ". footer";
- bruce511 3y agoI built a web framework in 2005 based on table layouts. Years later I switched to Flex (when it was available, and when Grid was still poorly supported.) Some years ago I switched to Grid because it was more generally supported. So I expect that what you are mostly seeing is the evolution of CSS, from table to flexbox to grid. Table has no real responsiveness (to screen size), Flex does it _really_ well (especially for cases where the target is both PC and Phone etc.) But it has some limitations (mostly for me around column widths and the concept of "relative" column widths.) Grid is really nice, it's a lot more like tables in concept, but at the same time has responsive abilities. These days I'm grid-first, although there are still a few places (depending on context) where flex is more appropriate. Of course flex is also more "well known" (because it's older.) I feel a lot more comfortable there still, and until we have sub-grids I'm also a fan of using Grid layout for the "outside" and using Flex inside specific cells.
- tough 3y agoThanks I ususally default to Flex because is what I know better, I have to fill the gaps with grid knowledge in there.
- laurels-marts 3y agoMaybe a stupid question but what do you use for the outermost wrapper div that controls the main page layout? Flex or Grid?
- ThatMedicIsASpy 3y agoDepends on the content and amount of content. I would say you can do the same layout with both. The main advantage of grid and named layouts is that you can move them anywhere you want. You are not bound by the order of html elements.
- diamondfist25 3y agoI got asked how to center a div in an interview and got dinged for some class naming issues Tech interview industry really misses the point sometimes
- skrebbel 3y agoI wasn’t there so I can’t judge, but if you got dinged about naming then maybe they interpreted that as you caring about “it works” but not about “team member reading the code understands why it works”. Personally I’d be hard-pressed to move an applicant with a less-than-obsessive attitude to naming forward to the next round.
- lapcat 3y ago> Personally I’d be hard-pressed to move an applicant with a less-than-obsessive attitude to naming forward to the next round. Why would you assume that impromptu interview code would be the same as production code?
- stanleydrew 3y agoIt's of course not the same. But technical interviews aren't always just about "does this solution you wrote actually work." A good interviewer will be paying attention to how you solve the problem and how you communicate the choices you make along the way. Good naming is part of good communication.
- lapcat 3y agoExcept every interviewer has their own idiosyncratic criteria in their own mind, and they rarely practice good communication themselves by telling the job application ahead of time what those idiosyncratic criteria are exactly.
- Kiro 3y agoI would assume it to be much better than production code.
- swader999 3y agoOn the plus side, CSS has fed a lot of children.
- BiteCode_dev 3y agoYou mean a lot of :child()
- Levitz 3y agoTo who?
- dt3ft 3y agoI’d love to be able to hire this guy to help me fine tune the UI of FlingUp :)
- dmix 3y agoThis sort of blog showing dominance of advanced CSS is a really great job-getting tool. He will surely be in demand.
- lapcat 3y ago> This sort of blog showing dominance of advanced CSS is a really great job-getting tool. He will surely be in demand. Hiring managers: "We don't have the time to read the blog posts of job applicants".
- dmix 3y agoGetting HR people to choose developers is a terrible strategy lol We get our programmers involved in that process since they are the only ones capable of knowing. Although we're a small company.
- hobofan 3y agoWell there is a "hire me" button in the header, so it looks like you are in luck!
- buskila 3y agoAre all these things mentioned in the article implemented in native apps or the web version is just nicely embedded in a webview?
- cubefox 3y agoWhy do people find this interesting? It looks like perfectly normal usage of CSS.
- system2 3y ago[flagged]
- programmerbyd7y 3y agoBut did you actually read the blog post about "BS blogs"? Because it's not actually about blogs being BS and how one cares. It's about how you should care about what you are writing and tell everyone else to f-off. > This post likely was written by a newbie who is trying to enter programming world and by writing a blog about CSS paddings thus keeping his ego inflated What a weird statement to make. Like mindboggling weird. There's nothing wrong with newbies documenting things and writing up details on how things work. Because other newbies need it. And besides, haven't we all here figured out by now that the best way to learn something is teach others? I'm seriously at a loss for why you are arrogantly bashing and trying to shame for someone putting effort into understanding more about the world around them and trying to help others at their level understand. Your time is better off spending time understanding that the world doesn't revolve around you.
- hobofan 3y agoWhat an ignorant statement. This blog wasn't written _by_ a newbie, but _for_ newbies, to help them in breaking down a real world example of otherwise abstract CSS features. That blog is as far as I'm concerned the best blog about CSS and its new features that exists today.
- adamleithp 3y agoCSS is a big part of the web and lots of people use it every day. I find this post interesting because it inspects a world-class app used by millions of people, and it showcases some of CSS’s latest capabilities, plus it has nice graphics illustrating the findings!
- mmcnl 3y ago
- ibiza 3y agoI find the bifurcation between HTML elements and CSS statements maddening. Structural things like flexbox and grid would be far clearer as HTML element types.
- manuelmoreale 3y agoCare to share an example of what you mean? Because I don't understand how that would look honestly.
- c-hendricks 3y agoSee any grid component in a library for React for example.
- manuelmoreale 3y agoAh so everything kinda inline? But how do you deal with change of layouts then? Like, sometimes I code sites where the inner structure changes a lot and that's trivial when paired with media queries but it would be a pain to handle if everything is inlined or tied to the markup.
- deleted 3y ago[deleted]
- c-hendricks 3y agothe Grid from Mui / joy UI, for instance, let's you set sizes for different screen witdhs via props: https://mui.com/joy-ui/react-grid/#introduction https://mui.com/joy-ui/react-grid/#introduction Since it's done with JSX/Props, it's API is a 1:1 translation to a new HTML element.
- stefanfisk 3y agoHow would that work when you need to switch stuff like `display` responsively?
- 3y ago
- mgaunard 3y agoLooks like normal CSS to me. Any CSS work eventually devolves to adjusting numbers until everything falls in line, adjusting for the 2 pixels of padding there or the borders of some other thing. Maybe nowadays there is calc where you don't need to do that, but it didn't exist back when I did CSS.
- dawnerd 3y agoYeah this read like it came from someone that hasn’t done any real development based on designs. Not everything is going to be even numbers.