6 ms·

I have seen a lot of front-end developers who have no clue about the technical aspects of their work. They just use multi-megapixel images because 'they will lo

by thdrdt 6y ago

I have seen a lot of front-end developers who have no clue about the technical aspects of their work. They just use multi-megapixel images because 'they will look sharper'. When they need an icon from Font Awesome they just include the whole library. And because Bootstrap told them to do so, they nest as much DOM as possible. I have seen websites where the homepage's HTML alone was over 1MB! in size. The only thing that got exited was my CPU. Let me tell you: if you want a header with a background image where the text is aligned at the bottom you can just write: <h1>My header</h1> There is no need to write it as: <div id="mainHeader"><div class="align-text-bottom"><h1>My header</h1></div></div> And if you want to stick the header to the top you can use `position: sticky` in CSS instead of including a huge Javascript file that can do all kinds of fancy stuff you don't need. But I am not sure I can blame those front-end developers. Deadlines are tight and it takes effort to learn about the technical aspects of front-end development. My personal standard is that a page should be ready in 1 second. For huge sites 3 seconds max. I've been creating small and huge websites for over 20 years now and never had a problem with these goals. This includes webapps built with Javascript.

laurentb 6y ago
I'm no expert, but I hope someone at quora has some sort of light-bulb moment reading this.... Looked at the source for one answer because of their login wall and couldn't be bothered to re-create my account and to get to the actual answer is about 30!! nested divs and then each line of text (provided you've returned to the next line in the visual text editor to write your answer)is in its own <p> which is fine on its own, but each <p> is styled with a boatload of classes for no apparent reason.... I'm fully with you as far as loading times, but even a simple wordpress install these days add incredible useless stuff that makes it non trivial for the average blogger to simplify...
dewey 6y ago
> But I am not sure I can blame those front-end developers. Also in a lot of cases you can build the fastest website with minimal markup and only the necessary CSS/JS libraries for the base functionality but if then for "business reasons" you need ad networks, google tag manager, analytics scripts, third party support popups there's only so much you can do as a front end developer to keep the site fast.
blauditore 6y ago
I think there are a couple of reasons to this: 1. Lack of expertise/interest, as you say. One root cause here is that there are many devs in web development who are self-taught, with no CS background. 2. Time pressure and contractual agreements: Things need to be finish ASAP to reduce cost, and implementation contracts usually state features and looks, but not performance or maintainability. 3. Many effects, such as sticky elements, couldn't be done in CSS just a few years ago, so devs got used to include libraries for these things. In fact, I think many modern CSS features got introduce because they were widely used, but with JS implementations.
- DarkWiiPlayer 6y ago
  > there are many devs in web development who are self-taught, with no CS background. That's an excuse when you're just getting started, but after 3 or 4 years everyone has had time to figure these things out. There's papers, blog posts, youtube videos... even wikipedia can help in understanding performance on the web. If you've been doing web for 5 years and still don't know these things, it's not because you're self-taught; it's because you're lazy and/or being overworked with not enough room for learning.
parenthesis 6y ago
It sounds like what is needed is an `optimising compiler' for the entire front end that would spot patterns like those you mention and rewrite them into something better, and that would tree-shake out unused stuff. Does anything like that exist?
- read_if_gay_ 6y ago
  That seems like it's going to work in very specific situations only and/or be extremely hard to implement.
- tjpnz 6y ago
  That strikes me as a heavy handed option given the prevalence of linters and performance tools which can already detect some of these issues.
- joquarky 6y ago
  I'm curious if Svelte is headed in this direction.
j-krieger 6y ago
The Thing is that most people here belittle Web Developers but they do not have a clue what we do. At all. In your pretty short answer you’ve already caught mistake. Let‘s see: > And if you want to stick the header to the top you can use `position: sticky` in CSS instead of including a huge Javascript file that can do all kinds of fancy stuff you don't need. Your „simple trick“ to avoid „including a huge javascript file“ doesn‘t work in: Opera, Chrome for Android, IE and a couple more[1]. It does work in Safari, but not as you would expect. Also, position:sticky is still a Working Draft. It is suspect to be changed at all times. Want the same functionality across all Browsers? Better use Js. Another thing is that most people here think „huge JS bundles“ are what make websites work. These are to be used for webapps though. If you want anything more than a static site, you‘ll need JavaScript. No way around it. [1]: https://caniuse.com/?search=Sticky https://caniuse.com/?search=Sticky
- dahfizz 6y ago
  > If you want anything more than a static site, you‘ll need JavaScript. Who doesn't want static sites? I certainly do. They're faster and easier to use. I've never heard a user say "I wish my back button didn't work and the page rendered wonky so that buttons move as I try to click them". It's web developers that push to turn simple HTML documents into "applications".
  - 082349872349872 6y ago
    Every now and then I wish browser writers would compare timestamps between the link click and the last relayout, and throw away stale clicks instead of navigating to who knows where.
- achairapart 6y ago
  Come on, even the caniuse page you linked says `position:sticky` is supported by 94.33% of browser. For that ~5% left (very old browser versions or specific cases like Opera Mini, most likely even less real cases due to bot noise in statistics) there is a thing called "Graceful Degradation". If you do things right your page won't break at all if that CSS property is not supported. Your header will just be positioned fixed or even static. So, really, no huge (or small) JavaScript file needed at all in this case. Like most other bloat in web dev, that's just laziness that accumulates.
wruza 6y ago
This all sounds true, but it breaks down about the fact that bare html and css are too low-level and quirk-rich for a high-level programming under reasonable budgets. Also, not programmers are guilty of such bloat, but the tools that they use, html css included. There is no compiler that takes an idea / a representation of it and turns into highly compressed, DCE'd, -O3 LTO'ed bundle. There is some progress in this direction, but it is not that great and requires an effort to use. because Bootstrap told them to do so, they nest as much DOM as possible Bootstrap also does that for reasons. For reasons that are unclear to bootstrap itself, because these all lie in the inconsistencies, legacy-ness and incompatibilities of the allegedly most compatible platform ever. And when we try to discuss how to extend it (not even replace!), someone brings idealistic arguments about how it should stay as is, because otherwise (again allegedly) they couldn't print a webapp or screenread an html5 platformer game.
- afiori 6y ago
  HTML needs an <include> tag to import HTML files (not full documents in general, just to reuse common pieces)
  - Kihashi 6y ago
    Isn't that roughly what server side includes are? https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes
    - afiori 6y ago
      To me not really, we do not use server side includes for JS or CSS, there are use cases where HTML would also profit from client-side imports
amrx431 6y ago
I work for a company dominated by non CS . They brought in contractor since the contractor's CEO is a good talk. This contractor is full of full-stack JS devs. Now we have their ideas implemented on edge devices. Noice.
- cutemonster 6y ago
  > ideas implemented on edge devices. Noice. What does that mean? Edge devices here means the most modern browsers? And noice means unnecessary?
  - c22 6y ago
    Edge devices are usually those operating on the edge of your network, topologically speaking (e.g. end-user devices which only have one connection to the network). Noice is just an awkwardly phoneticized spelling of the word nice intended to convey a sarcastic tone.

by thdrdt 6y ago

laurentb 6y ago

I'm no expert, but I hope someone at quora has some sort of light-bulb moment reading this.... Looked at the source for one answer because of their login wall and couldn't be bothered to re-create my account and to get to the actual answer is about 30!! nested divs and then each line of text (provided you've returned to the next line in the visual text editor to write your answer)is in its own <p> which is fine on its own, but each <p> is styled with a boatload of classes for no apparent reason.... I'm fully with you as far as loading times, but even a simple wordpress install these days add incredible useless stuff that makes it non trivial for the average blogger to simplify...

dewey 6y ago

> But I am not sure I can blame those front-end developers. Also in a lot of cases you can build the fastest website with minimal markup and only the necessary CSS/JS libraries for the base functionality but if then for "business reasons" you need ad networks, google tag manager, analytics scripts, third party support popups there's only so much you can do as a front end developer to keep the site fast.

blauditore 6y ago

I think there are a couple of reasons to this: 1. Lack of expertise/interest, as you say. One root cause here is that there are many devs in web development who are self-taught, with no CS background. 2. Time pressure and contractual agreements: Things need to be finish ASAP to reduce cost, and implementation contracts usually state features and looks, but not performance or maintainability. 3. Many effects, such as sticky elements, couldn't be done in CSS just a few years ago, so devs got used to include libraries for these things. In fact, I think many modern CSS features got introduce because they were widely used, but with JS implementations.

DarkWiiPlayer 6y ago
> there are many devs in web development who are self-taught, with no CS background. That's an excuse when you're just getting started, but after 3 or 4 years everyone has had time to figure these things out. There's papers, blog posts, youtube videos... even wikipedia can help in understanding performance on the web. If you've been doing web for 5 years and still don't know these things, it's not because you're self-taught; it's because you're lazy and/or being overworked with not enough room for learning.

parenthesis 6y ago

It sounds like what is needed is an `optimising compiler' for the entire front end that would spot patterns like those you mention and rewrite them into something better, and that would tree-shake out unused stuff. Does anything like that exist?

read_if_gay_ 6y ago
That seems like it's going to work in very specific situations only and/or be extremely hard to implement.
tjpnz 6y ago
That strikes me as a heavy handed option given the prevalence of linters and performance tools which can already detect some of these issues.
joquarky 6y ago
I'm curious if Svelte is headed in this direction.

j-krieger 6y ago

The Thing is that most people here belittle Web Developers but they do not have a clue what we do. At all. In your pretty short answer you’ve already caught mistake. Let‘s see: > And if you want to stick the header to the top you can use `position: sticky` in CSS instead of including a huge Javascript file that can do all kinds of fancy stuff you don't need. Your „simple trick“ to avoid „including a huge javascript file“ doesn‘t work in: Opera, Chrome for Android, IE and a couple more[1]. It does work in Safari, but not as you would expect. Also, position:sticky is still a Working Draft. It is suspect to be changed at all times. Want the same functionality across all Browsers? Better use Js. Another thing is that most people here think „huge JS bundles“ are what make websites work. These are to be used for webapps though. If you want anything more than a static site, you‘ll need JavaScript. No way around it. [1]: https://caniuse.com/?search=Sticky https://caniuse.com/?search=Sticky

dahfizz 6y ago
> If you want anything more than a static site, you‘ll need JavaScript. Who doesn't want static sites? I certainly do. They're faster and easier to use. I've never heard a user say "I wish my back button didn't work and the page rendered wonky so that buttons move as I try to click them". It's web developers that push to turn simple HTML documents into "applications".
- 082349872349872 6y ago
  Every now and then I wish browser writers would compare timestamps between the link click and the last relayout, and throw away stale clicks instead of navigating to who knows where.
achairapart 6y ago
Come on, even the caniuse page you linked says `position:sticky` is supported by 94.33% of browser. For that ~5% left (very old browser versions or specific cases like Opera Mini, most likely even less real cases due to bot noise in statistics) there is a thing called "Graceful Degradation". If you do things right your page won't break at all if that CSS property is not supported. Your header will just be positioned fixed or even static. So, really, no huge (or small) JavaScript file needed at all in this case. Like most other bloat in web dev, that's just laziness that accumulates.

wruza 6y ago

This all sounds true, but it breaks down about the fact that bare html and css are too low-level and quirk-rich for a high-level programming under reasonable budgets. Also, not programmers are guilty of such bloat, but the tools that they use, html css included. There is no compiler that takes an idea / a representation of it and turns into highly compressed, DCE'd, -O3 LTO'ed bundle. There is some progress in this direction, but it is not that great and requires an effort to use. because Bootstrap told them to do so, they nest as much DOM as possible Bootstrap also does that for reasons. For reasons that are unclear to bootstrap itself, because these all lie in the inconsistencies, legacy-ness and incompatibilities of the allegedly most compatible platform ever. And when we try to discuss how to extend it (not even replace!), someone brings idealistic arguments about how it should stay as is, because otherwise (again allegedly) they couldn't print a webapp or screenread an html5 platformer game.

afiori 6y ago
HTML needs an <include> tag to import HTML files (not full documents in general, just to reuse common pieces)
- Kihashi 6y ago
  Isn't that roughly what server side includes are? https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes
  - afiori 6y ago
    To me not really, we do not use server side includes for JS or CSS, there are use cases where HTML would also profit from client-side imports

amrx431 6y ago

I work for a company dominated by non CS . They brought in contractor since the contractor's CEO is a good talk. This contractor is full of full-stack JS devs. Now we have their ideas implemented on edge devices. Noice.

cutemonster 6y ago
> ideas implemented on edge devices. Noice. What does that mean? Edge devices here means the most modern browsers? And noice means unnecessary?
- c22 6y ago
  Edge devices are usually those operating on the edge of your network, topologically speaking (e.g. end-user devices which only have one connection to the network). Noice is just an awkwardly phoneticized spelling of the word nice intended to convey a sarcastic tone.