I wonder, how the engineers in facebook, Google write code?, for instance, CSS. Below, is the screenshot of Facebook events page inspection. As, you can see the class names, id names for linking CSS styles are not much familiar, isn’t it non-reliable, I mean how the developers actually remember all those style idenitifiers? Or, are they generated dynamically?
I would assume that they have some sort of cheat sheet. Especially because in normal programming companies, when you are put on a project, it must be approved by someone before it gets released. So I assume whom ever finalizes the release, would normally know what class and id they are using.
That’s just my assumption.
They’ll definitely be dynamically generated. If you were maintaining those by hand I can’t see any good reason for making them so obscure - you’d just be making more work for yourself.
It’s almost certain that the page is rendered with React (as FB developed it primarily for their own use), and there are several approaches to modular CSS that involve auto-generated class names like that. It allows you to keep the styles and the code for a component together, and keep the styles scoped to that component so they don’t affect other parts of the page.
4 Likes
@fretburner’s is right. But I typed this out before I took the time to read his reply, it basically says the same thing:
A common React pattern is to have localized stylesheets to individual components. The class names do not matter, because they are not maintained directly in a global stylesheet. We do something very similar where I work. Our class names in their class file have readable names, but they when they are spit out they have very unique names generated by the bundler.
I would assume this is what FB does in some form, though I’m not sure exactly what method they use.
2 Likes
Many years ago people used computers to write stuff and they had to remember the codes for various things, such as paragraphs and bold fonts. Then computers advanced and we had something called “What You See Is What You Get” (WYSIWYG). WYSIWYG was big buzz-word back then. People think that CSS is such an advance forward but it seems a few steps backward to me.
I assume that Facebook has some type of WYSIWYG editor that they use and they don’t need to remember all those codes. Remembering codes seems antiquated to me. Immensely incomprehensible codes are an indication of something generated by software.
@SamuelCalifornia Almost no professional shops use WYSIWYG editors. I can assure you, Facebook does not use WYSIWYG.
3 Likes
I found this link, hope all fellow members would understand, actually how it works!
2 Likes
This is what we use on our project. I’m sure there is a lot I don’t know about it, but it looks like FB uses something else, but similar. The output just doesn’t look there same. Since they created React, it’s probable they use an in-house solution.
The term WYSIWYG is old so anyone that has begun website development relatively soon is likely unfamiliar with the term.
Dreamweaver is WYSIWYG. CMSs like WordPress are WYSIWYG editors. Also, most ASP.NET websites are developed using Visual Studio and it provides a WYSIWYG editor for ASPX and HTML files.
Facebook has a large variety of software for development. I searched and found fb-flo “that lets you modify running apps without reloading”. In other words, it allows Facebook developers to see the software as it is running and modify it as conveniently as possible. I don’t know what Pages are but Pages Developer Tools allows “developers to build new experiences right on a Page”. That sounds WYSIWYG. Also Origami Studio — Design Prototyping sounds WYSIWYG and I found it in a list of tools Facebook uses.
I think professional developers in large organizations would laugh and leave at the suggestion that they can’t use WYSIWYG editors.
I don’t think anybody suggested developers can’t use WYSIWYG systems. I think the point is that in general, they don’t.
3 Likes
The term WYSIWYG is old so anyone that has begun website development relatively soon is likely unfamiliar with the term.
I am familiar with the term. I’ve written them myself more than once.
I stand by my last post.
I think professional developers in large organizations would laugh and leave at the suggestion that they can’t use WYSIWYG editors.
It’s actually the exact opposite.
4 Likes
Would Markdown be a WYSIWYG?
Would Markdown be a WYSIWYG?
No it’s not. It’s a Markup language.
2 Likes
Well, there are Javascript WYSIWYG that inputs Markdown into a text area so I am not entirely sure if it’s a full WYSIWYG or just have the capability of one.
Well a WYSIWYG for text would be more like Word where when you bold something it actually bolds while you’re typing instead of **bold**. The buttons are just shortcuts.
1 Like
As @mawburn stated, Markdown itself is not WYSIWYG. There are tools that provide that for Markdown, but Markdown itself is not. It would be like saying HTML is WYSIWYG because there are tools that give you that ability. The tool does not make the markup WYSIWYG, the tool is the WYSIWYG provider for a given markup language.
7 Likes
My links were not to pages expressing an opinion, the links I provided are for pages describing tools that are being used, whether they should be or not.
As cpradio said, WYSIWYG means that, while editing something, we can see what something will look like when it is viewed by the user/reader. So right now, as I type my reply, there is a WYSIWYG box to the right of this box that I am typing into. The box I am typing into shows markup and allows me to add and edit markup and the box on the right shows me what the result of the markup is. So you might say that the users of these forums use a WYSIWYG editor but usually there is just one box. Typically HTML editors have a “design” box with an option for using a separate box showing the HTML code.
These terms are getting convoluted.
WYSIWYG is just a term that means (I see the end result as I work, the underlying code/markup is kept hidden).
A wysiwyg editor has to export the actual code in order to be used somewhere.
A primary downside to using one of these editors is that they notoriously output bloated code that we have little control over while inside the editor interface.
Wysiwyg is commonly used only for textual content and outputs basic HTML. Editors that are built as design tools which do everything, the layouts, the structures, all of it, these tools can get bloaty, especially in the old days. Newer tools I’ve seen try extremely hard to output unopinionated simple code that follows standards and best practices.
They are typically used just for generating mockups though.
As others have mentioned, the professional wants much more control over every inch of the output, and won’t depend on their final output coming from a wysiwyg generator. At least not without a full review and refactoring of that output for the final product. But if you have to refactor all the wysiwyg output every time it saves, why bother? Like I said, most useful for mockups and such, not so much for larger designs that have to integrate into a framework or CMS.
I don’t think it’s all gloom tho, I actually have high hopes for future wysiwyg designers, because it’s much easier these days to follow best practices for code, and put the code through common syntax checkers and so forth. I believe there will be a breakthrough with this kind of “live” editing where you have full access to underlying code, but get to work on that code while seeing the end result visually, all in one tool. There are such tools now. I have a couple on my list of things to try.
In web design, such a tool has to take in to account not just the HTML and CSS, but where all the Javascript fits in, and/or PHP, reactive elements, ajax, animations, transitions. It has to work with graphics, embeds, SVG, whatever. Very hard for one design tool to manage all of it.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.