markdown guide

The way I think about the difference in web development today is there has been a sharp split in how web technologies are used:

  1. Web Pages
  2. Web Applications

A web page should be focusing on using semantic markup that is easily machine-readable for use cases such as SEO, caching, and accessibility. A web application should have all the characteristics of any application, which includes being built from highly-cohesive components/classes/functions/etc, that tightly encapsulate some sub-set of application functionality.

The way I look at it, I don't care if JSX or any XML-based UI abstraction outputs non-sematic tags - unless I need semantic tags. For example, if I'm building a game, I don't care if my sprites are divs, spans, or any other tag - all that matters is there a DOM element that can be programmatically manipulated. If I'm building a SPA with ADA requirements, however, that's an entirely different situation.

Where this get's a bit complicated is when you have a blended application with the concerns of both a web page and a web application. So far, and I haven't seen a good generalized way to tackle this, and the furthest the conversation has gotten is server-side rendering for SPA initial loading. We'll need to see how this plays out over the next few years, but eventually, I'm sure we'll settle on a general set of best-practices.


In case we're talking about JSX

For me it's absolutely fascinating how things evolve. What you wrote about is an example of how something animate arises from inanimate things. Earlier, some "dead" elements such as the aforementioned div were available to developers. These days the community has decided that we use reactive components to build the application.

Just in case someone has a boring Monday πŸ˜…

// πŸ˜‰ Place me different places in your app and I promise to work
// ❀ I'm fascinating inside
// πŸ”¨It's super easy to move me around your application structure
// ...

// πŸ‘‹ Click one of the buttons that I `render()` to make me fly away from you

// There are different species of course 😊
// πŸ”₯ My buttons are red

// πŸ’ͺ Every my button is disabled by default and you cannot change it...

// πŸ€— You can put elements in me and I will make them more wonderful
// πŸ’Ύ I save myself (my state) in `localStorage` and in the clouds (aws) when you accidentally close the application
    <h1>My awesome adventure</h1>
    <div>Lorem ipsum</div>
    <textarea>Lorem ipsum</textarea>
    <p>Note created {timestamp} in {location}</p>

<MagicPanel rules={[dragonsAllowed: false]}>
    {/* Ooppsss... πŸ˜‚ */}

I know it is a bit abstract answer but it was supposed to be 😸.


Yes, we are talking about JSX :)

Do note that div is just an example element, the title is an abstract assumption that we no longer write normal good old HTML.

I mean, since React team introduced the JSX (as far as I know), our components do contain the word div but contextually it is not. It gets compiled to JavaScript that creates the div. So basically we have an extra step comparing to the old ways of doing things. I cannot decide whether this (everything is JavaScript) is good or bad, considering that it's really powerful and useful for templating.


We should use semantic HTML over div like Article, Nav, Header, Section and many more. Its super hard to debug JSX when everything is just a div.


I don't understand the question. Some context?


The context would be JSX, and it's popularity. Developers write something that looks like HTML, but it's not HTML.


Div is still div :P
If you misuse div then you are not doing your work properly.


I agree. I have not done much with react, so can't way in there, but custom elements have been around for a while. As long as we as designers and devs still build contextual and well crafted code all should be fine. :)

Classic DEV Post from May 10

If you could change one thing about learning to code, what would it be?

If you could wave a magic wand and make your biggest challenge when you were lear...

Milos Protic profile image
I'm a passionate tech guy

Sore eyes? now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️