CSS findings from the Threads app

https://ishadeed.com/article/threads-app-css/

by davidbarker • 3 years ago

215 153 3 years ago

ishadeed.com

madeofpalk3• 3 years ago

Neat.

Barcelona is/was the internal name for Threads.

blowski• 3 years ago

I heard it was also called “Project 92”, which is also the name of a (ostensibly unrelated) Tesla project.

4lejandrito• 3 years ago

The 92 Olympics were in Barcelona.

bhouston• 3 years ago

The webgl effect on the threads website is called BarcelonaGalaxy: https://twitter.com/benhouston3d/status/1676939096122327045?...

yosito• 3 years ago

Barcelona is also the name of the protocol for linking to Threads on iOS. A link to barcelona:// will open in Threads.

qingcharles• 3 years ago

Barcelona appears to be the internal name of the project prior to release.

stefanfisk2• 3 years ago

The top padding in the avatar is probably to align it with the cap height of the username.

mkoubaa7• 3 years ago

I'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• 3 years ago

I’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.

nicoburns3• 3 years ago

IMO CSS Grid is actually much simpler and better designed than Flexbox. I’d recommend taking a proper look when you get a chance.

hoosieree3• 3 years ago

CSS grid feel like someone asked TikTok to design a rectangle and said yes to every suggestion.

renegade-otter2• 3 years ago

Rachel Andrew has a very good 3-part tutorial that helped me actually understand what I am doing: https://www.smashingmagazine.com/2020/01/understanding-css-g...

It will take you from a n00b to a Grid pro in no time.

quietbrain2• 3 years ago

This is a really surprising take for me, grid is by far the most sane of the layout models in my experience.

FireInsight2• 3 years ago

Most, 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.

pavlov• 3 years ago

I feel the same way, and I first wrote CSS in 1998 when it was so new that Netscape misinterpreted even the font size property.

There are now thousands of properties and their values, and browser engines have gone to heroic lengths to produce mostly consistent results from these often conflicting directives. But I still keep looking up basic things because the API is simultaneously sprawling and inexpressive and context-sensitive.

IMO, the core sin of CSS is mixing up three separate concerns: element styling, layout, and compositing. It’s mostly ok for the first. It’s insanely confusing for the second. And it mostly tries to pretend it’s not about the third at all, which leads to weird situations around implicit compositing groups.

We ended up here because CSS started as basically a copy of a handful of Microsoft Word dialog boxes (hence “float” etc.) And as soon as we had got the word processing use case barely working, everybody decided they wanted to build dynamic applications with this same engine instead.

tannhaeuser• 3 years ago

The core sin 0 of CSS is introducing another item-value syntax to the stack when there are regular markup attributes for that exact purpose already. Then it gets worse by taking this simplistic syntactic device ad absurdum, only to then finally also start introducing expressions (calc(), custom properties, media queries). Really, CSS should've been sealed a long time ago, with a low-level API a la Houdini available for programmatic layout from JS rather than bloating the language to become accidental Turing, when these highly dynamic styling features are useful for JS apps anyway. Anyway, considering its complete lack of mental discipline and basic CompSci, the CSS WG at W3C has no business designing languages IMNSHO.

mkoubaa7• 3 years ago

What do you think can be done about this, at the browser, tooling, or library level?

_a_a_a_2• 3 years ago

Try XSLT. The only programming language that ever defeated me and I've used quite a few including Haskell.

gmac• 3 years ago

I found XSLT kind of mind-bending, but also extremely satisfying and quite productive. Like SQL, it’s declarative, so you have to get into the mindset of telling the computer what you want, not what to do.

throw_m239339• 3 years ago

XSLT is a functional language. I say writing DTD and stuff like that is harder than XSLT. XSLT is actually pretty fun to write.

mkoubaa7• 3 years ago

If I have a reason to I will. Im generally not motivated to learn things to pad my ego, I need a more tangible reason.

MildRant• 3 years ago

CSS is a lot like Regex to me. I learn enough to do what I need to do then immediately forget everything.

eutropia• 3 years ago

if css made as much sense as regex I might actually enjoy front end work - there’s no underlying mathematical theory that explains css

millerm• 3 years ago

CSS seems like it was “designed” by several teams in an “agile” environment with no plan and simply didn’t consult the people that would actually be using it.

moltar• 3 years ago

It’s because CSS is a constantly moving target of massive conceptual differences from the last one. Plus all the tooling changes frequently as well.

gardenhedge• 3 years ago

I'm the same. I just use ChatGPT to fix my layouts now.

mkoubaa7• 3 years ago

Colleagues have suggested the same. My strategy has been to try to avoid frontend and when I must do it I make sure everyone involved understands my limitations.

fendy30022• 3 years ago

Because most css without context are useless. A div with width 100% may not stretch depending on it's content and parent css. It's even worse on positioning, margin and responsiveness.

Which is why if you don't interact with it day to day basis, you'll need some trial and error, as well as references and examples.

Opposite to backend or usual programming where `foo = foo + 1` is most of the time do an increment by one (exception apply)

dmix4• 3 years ago

There's a lot of unpredictable stuff too. I was trying to change the border color of a checkbox to match a framework being used elsewhere and for the life of me couldn't figure out why neither setting outline or border changed it. But on the framework's website demo it was doing it just fine.

Combing through the CSS and the computed styles panel in dev tools gave me nothing.

It turned out there is an option to disable the standard OS form theming which isn't communicated at all in dev tools for that element (and I hadn't seen --webkit-apperance used before as the guide says you really shouldn't mess with it): https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

aidos7• 3 years ago

Weeeeeeeell a div is 100% width by default. It will always fill the width of the parent container unless you explicitly change the width.

gochi3• 3 years ago

Backend or usual programming without context is also useless. Is foo even mutable? Is it the same type? How does type conversion work here?

CSS and usual programming are identical. If you don't give yourself the time to learn the fundamentals, you'll always run into tedious problems.

renegade-otter2• 3 years ago

I only do UI for business-facing apps and my own projects. CSS Grid massively improved my frustration with CSS. It makes it much easier to reason about how your page layout works.

I will never ever do another layout without it, stuck together by glue, snot, and magical trial-and-error.

mundiff• 3 years ago

It's one of those things that frameworks had been doing since (before?) 960gs. A Grid really needed to be incorporated into CSS and I'm happy to use it or flexbox for layout purposes depending on my use case.

dmix4• 3 years ago

The "fun" part of being a frontend dev who naturally gets pushed into fullstack as part of the realities of the job is I have to keep on top of developments in CSS, UI frameworks, Typescript, Vue, testing frameworks, Ruby, Rails, etc. Not to mention the build tooling (Vite/webpack) and deployment / operating system stuff. Fortunately the database stuff rarely changes with Postgres.

I wish I could specialize on any one of these sometimes...but such is life at a startup. It's more interesting being able to do them all anyway and be able to build entire apps yourself. Just occasionally frustrating.

madeofpalk3• 3 years ago

Is there another layout language/engine that you've found more intuitive and flexible?

mkoubaa7• 3 years ago

After a couple hours of using xaml I felt like I learned something. But I didn't spend more time on it.

DHPersonal• 3 years ago

I really benefit from reading comments like this, so I appreciate your honesty. I didn't start learning JavaScript until very recently, even though I was making my own personal websites back when Angelfire, Geocities, and Tripod were still a thing. Instead, I focused on the frontend HTML/CSS combo, constantly learning and implementing new CSS technologies whenever I had an excuse to try them out. Because of that specialization, CSS feels understandable to me. My insecurities about my own abilities often present themselves as a belief that investing time in CSS was the growth of a cheap and relatively useless skill for a web development team. Whenever I see that someone who likely knows incredibly more about JavaScript and other programming languages — things that I feel are far harder to understand than CSS — share about how either HTML or CSS is difficult to use, I feel a little more confident that I do bring some value to the team with whom I work at the office.

gravitronic• 3 years ago

I was like you until about a year or two ago, and then set out to learn it enough to implement a site layout without having to resort to copy and pasting things I don't understand.

It wasn't that hard, once you accept that it'll require it's own study and practice. I put in maybe 20 hours dedicated study and got a lot better out of it.

I did a few video courses on LinkedIn Learning (formerly Lynda.com) through my public library. I did a general CSS course and a flexbox CSS course. Then I set out to design pages I needed without pulling some random blog theme and calling it a day.

I've gotten a bit better at design as well, although it is a much intrinsic field than CSS and requires a lot more study. The biggest difference was once I treated the design stage with respect as its own discipline and started designing in a design tool (figma) instead of "doing it live" by trying to tweak the design in code as I went. It made me 100% focused in that stage at the design problems and the feedback loop got a lot tighter compared to editing and running code to see how it looked.

mkoubaa7• 3 years ago

I admire your dedication. In my case I saw no improvement when I tried to learn it

zagrebian2• 3 years ago

How often do you read the CSS specs?

mkoubaa7• 3 years ago

From start to finish, never. When I had a problem I googled what to do and read the specs of the suggestions that I saw to try to make sense of them. Usually they were not helpful.

crosen99• 3 years ago

Same here. I think it's because you typically conquer a language by developing a fairly complete mental model of that language's behavior, but with CSS there are just too many nooks and crannies to get your had around. While it's uncomfortable for me, I find that I do best with CSS when I take a more practical approach and just try to use best practices to accomplish what I want without having the deep understanding that I crave.

I've found that Kevin Powell [1] is a great resource for this approach, and he also helps with the model model aspect as a bonus.

[1] https://www.kevinpowell.co/

ripley12• 3 years ago

I found that Tailwind helped me get more comfortable with CSS. If you put the mechanics of using classes aside, it’s essentially just a well-curated subset of CSS with great documentation. Way more approachable than the sprawl of CSS itself.

programmerbyd7y• 3 years ago

What options exist today for making CSS easier? (It's been a long time since I've done front-end work)

Seems like there would be some sort of layer on top of it that someone built that makes things more consistent and then will compile down to the inconsistencies and odd behaviours for how CSS is supposed to be implemented.

FireInsight2• 3 years ago

There's supersets and siblings like scss, sass, less, there's different modes entirely like utility classes (Tailwind) and css-in-js.

I don't think any of those make CSS much easier, though. Quicker to use, easier to write certain things, sure. But you still need to know your way around CSS atleast somewhat before you jump in to some augmentation or replacement.

code_runner• 3 years ago

The secret for me was working with something like tailwind etc and in a componentized framework.

the framework part isn’t mandatory, but I suppose very small tweaks with something like tailwind do the trick for me.

I can’t work with css if there are massive classes and nested stuff etc. I guess composition over inheritance

manojlds• 3 years ago

Try tailwind. It can help you get better at CSS itself.

Zren• 3 years ago

TIL 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://caniuse.com/viewport-unit-variants

zagrebian2• 3 years ago

For position:fixed elements, width:100dvh produces the same result as bottom:0. The dvh unit was not needed for this case.

wackget• 3 years ago

Splitting 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• 3 years ago

Article didn't have a link to the Threads site with this CSS.

sarasasa282• 3 years ago

https://www.threads.net/@zuck/post/CuP48CiS5sx

tester756• 3 years ago

Cool 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";

bruce5112• 3 years ago

I 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• 3 years ago

Thanks I ususally default to Flex because is what I know better, I have to fill the gaps with grid knowledge in there.

laurels-marts• 3 years ago

Maybe a stupid question but what do you use for the outermost wrapper div that controls the main page layout? Flex or Grid?

innocenat4• 3 years ago

I love grid because it allow me to position elements anywhere in the grid without needing wrapper elements like with flex/float. That allow nearly full freedom in layouting the same HTML for different complex layouts targeting different screen width.

Though while grid borrowed a lot of ideas from flex, the creative usage of the grid template is so vast that you probably need to also learn by examples.

sarasasa282• 3 years ago

When I learnt css for the first time, floats was the standard

10 years later, kind of, I got back into web dev and css and learnt about flexbox, what an incredible difference. I was so thankful I wouldn't have to deal with floats ever again

jamesfinlayson• 3 years ago

I remember my first web dev job was right before flexbox usable in all major browsers - I can't remember which one was last but the day that it was released was glorious because it meant no more float based layouts at that job.

diamondfist25• 3 years ago

I 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

skrebbel3• 3 years ago

I 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.

lapcat5• 3 years 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?

gl-prod• 3 years ago

I mean if there is no format to follow I should use my own. Once inside the company I would follow their format or whatever.

ZanyProgrammer2• 3 years ago

Nice, another comment showing the utter obnoxiousness of programming interviews.

Theodores• 3 years ago

I would have failed too, however, the reason would be because of my insistence that there is always a better element to use. It even says so in the specification.

With CSS grid you don't need div elements, ever.

swader999• 3 years ago

On the plus side, CSS has fed a lot of children.

BiteCode_dev• 3 years ago

You mean a lot of :child()

Levitz• 3 years ago

To who?

dt3ft• 3 years ago

I’d love to be able to hire this guy to help me fine tune the UI of FlingUp :)

dmix4• 3 years ago

This sort of blog showing dominance of advanced CSS is a really great job-getting tool. He will surely be in demand.

lapcat5• 3 years 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".

hobofan• 3 years ago

Well there is a "hire me" button in the header, so it looks like you are in luck!

sksasi• 3 years ago

Is it still ok to use px unit?

zamadatix4• 3 years ago

px 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.

innocenat4• 3 years ago

That's only true on (most) mobile devices. px is still 1 pixel on Desktop with 100% system UI zoom (e.g. non-hidpi monitors).

shortcake272• 3 years ago

I 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.

system2• 3 years ago

I 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• 3 years ago

I still use it, I have yet to find any actual downside to it.

buskila• 3 years ago

Are all these things mentioned in the article implemented in native apps or the web version is just nicely embedded in a webview?

cubefox• 3 years ago

Why do people find this interesting? It looks like perfectly normal usage of CSS.

adamleithp• 3 years ago

CSS 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• 3 years ago

It's interesting to see how a big company with a lot of talented engineers would build a brand-new web app, since there's so many ways to achieve similar results.

ymolodtsov• 3 years ago

It's very good educational content for people who don't really know all the intricacies of modern CSS (e.g. myself).

Copying something Meta did and playing with it just feels more interesting than an abstract example out of thin air.

ibiza• 3 years ago

I find the bifurcation between HTML elements and CSS statements maddening. Structural things like flexbox and grid would be far clearer as HTML element types.

manuelmoreale2• 3 years ago

Care to share an example of what you mean? Because I don't understand how that would look honestly.

c-hendricks2• 3 years ago

See any grid component in a library for React for example.

stefanfisk2• 3 years ago

How would that work when you need to switch stuff like `display` responsively?

dflock• 3 years ago

HTML is for marking up the semantics of content - lists, headings, emphasis, etc… CSS is for presentation - how is appears in the target medium. The layout is 100% visual presentation and 100% belongs where it is, in CSS.

Dealing with multiple screen/windows/paper sizes, as well as dynamic resizing & scaling is incredibly hard or impossible when you've baked a fixed idea of presentation into your content, see: Latex, PDFs & old school HTML with complex tables for layout, for examples.

mgaunard• 3 years ago

Looks 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• 3 years ago

Yeah 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.

CSS findings from the Threads app

Related Stories