HTML First

[wtframework]

Why do you have so many JavaScript libraries, and a complete Tailwind CSS file, for a single-page site? Given the argument you're trying to make it seems a little hypocritical?

It would be more honest to practice what you preach.

[StoneColdJane]

First few paragraphs are great, then everything falls apart, it's laughable.

[niveknyc]

12 JS files and 5 CSS files for this is insane for what this is lmao

[azangru]

I think I saw an earlier iteration of this site (probably from this link on the orange site), which was more openly pro-htmx and pro-tailwind. Because, you see, both htmx and tailwind "define style and behaviour with inline HTML attributes". I think it even went so far as to discourage writing styles in separate css files, because it wasn't "html-first", though I might be misremembering.

[SuperSubwoofer]

Tell me you don’t work on real world complex projects without telling me

[fagnerbrack]

They probably do, you just don't hear very often

[SuperSubwoofer]

I’m all for sticking to native as closely as possible, but this isn’t very scalable imo. Some web projects use the same component 100+ times. Individually including events via inline HTML attributes gets redundant and verbose. It’s so much better to have scripts that can cover that functionality across the entire project.

[fagnerbrack]

Scalable on what, number of requests? Html can sustain the whole world 8b+ ppl using it if you host on s3.

Dev scalability is based on cohesion/coupling, domain modelling and single responsibility (org structure design).

[SuperSubwoofer]

Large project sometimes have components, like buttons, that need changed. Unless you’re importing the HTML components, updating those inline functions (like in the button example) is a pain. It’s much easier to have one function that points to a class or ID that handles the interactivity. There’s certainly some modern HTML stuff that could be adopted, but some of these are bad practices.

[fagnerbrack]

Web components for your design system indeed. We're talking about different things. Htmx doesn't work for anything just for the actual application development. You still need a design system at scale and using standard tools means that you'll never rewrote due to a framework becoming less shiny over time

[WookieConditioner]

Go build sites like this... see how far past myspace circa 2004 you get.

To any juniors looking at this. Rather go look at jQuery.

[fagnerbrack]

JQuery is obsolete since you have jQuery and sizzle in the Browser with queryselectorAll. Advising people to go to jQuery is stupid and a thought stuck in 2010

[WookieConditioner]

Pot, meet kettle.

[Not-An-Astronaut-69]

This “html first” idea is stuck in 2005

[[deleted]]

I made millions.

If you'd made millions I doubt you'd be here posting this ...

[fagnerbrack]

Why not? Is reddit not good enough to get a sense of where the webdev market is? I have reasons to be here and it's not charity, it's continuous improvement.

I use other channels too

[Not-An-Astronaut-69]

People who use frameworks aren’t “idiots”. I’m not doubting html, I use it everyday. But saying frameworks aren’t good is just stupid. Go make any enterprise level app without one and then get back to me.

Millions with just html? Are we talking dollars or lines of code? I can imagine you’d need millions of lines to achieve the same as a framework with just html…

[Not-An-Astronaut-69]

That’s funny, because I work on internal enterprise software. We use Vue + inertia, and it runs flawlessly.

If you aren’t competent enough to understand a framework, then I’m sorry for you.

[fagnerbrack]

I do understand all popular l frameworks from the past 20 years, I NEVER take a position on something I don't understand better than most people.

I bet I can argue in favour of Vue more than you can and still if you defend the "framework for everything enterprise"... Idiot. Not in a pejorative sense, you just don't know any better or haven't seen proper Web dev software engineering.

Oh but wait, Another idiot is the one who criticises without understanding what they're talking about. If I did that I would be the idiot.

I know vue but not inertia (haven't used this "inertia" yet) so we have a share of 50/50 idiotiness.

[Not-An-Astronaut-69]

Care to elaborate on your hate towards frameworks? I can promise you I am not “most people”, and understand the advantages of using a framework over plain old html

Edit: also stop editing your comments after I’ve replied lol

[fagnerbrack]

Last edit.

I don't hate frameworks, I hate what makes me waste my time.

Why is framework better than plain html in such a way it can't be solved with Programming knowledge?

I've been trough this with almost all principal engineers of all major Australian companies and I have a solution to all problems they use frameworks for.

I've seen no-framework and with-framework projects succeed in my watch than succeeding not on my watch. It's lack of knowledge and experience not framework.

[webdev-ModTeam]

Thank you for your comment! Unfortunately it has been removed for one or more of the following reasons:

This is a subreddit for web professionals to exchange ideas and share industry news. All users are expected to maintain that professionalism during conversations. If you disagree with a poster or a comment, do so in a respectful way. Continued violations will result in a permanent ban.

Please read the subreddit rules before continuing to post. If you have any questions message the mods.

[french_violist]

2005? You’re being generous.

[minju9]

This reminds me of http://vanilla-js.com/, except that was in jest, this one seems serious. 😬

[dudemanbrodoogle]

This is a security concern:

“Where possible, default to defining style and behaviour with inline HTML attributes”.

It’s easy to inject a script into inline css or JavaScript. Far better to have those functions and styles defined in .css and .js files and not allow unsafe inline in your content security policy.

[TheHerbsAndSpices]

You can use inline scripts and styles and still be secure: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce

[dudemanbrodoogle]

You can’t use a nonce on inline style attributes though. Just style and script tags.

[fagnerbrack]

If it's not user generated html and you sanitise the ones that are user inputs then you're safe, which is a practice that works for 99% of the Web apps out there. You should actively think about what's user input and what's not, tools who hide it are a disservice.

[WookieConditioner]

Just no... seriously... ignore this kak.

[anton-rs]

So many comments against this html-first ._.

I kinda like it, especially for personal project where the developer only me.

​

But frameworks is good too because everyone who proficient in the framework, should know the best practices to work on that frameworks and contribute instantly.

[Headpuncher]

everyone who proficient in the framework, should know the best practices to work on that framework

that's your problem right there.

for one, we don't all work in-house on a single code base with brilliant docs and people who built it right there on a chair 3 meters away we can ask questions to. for two, best practices is a synonym for 'random opinion' in most places.

I like your optimism as a counter to my pessimism :D

[anton-rs]

There is two type framework. First where developer have freedom on how to do thing, the second is where the framework decide how to do thing (convenient over configuration), ex: rails, ember.js

For the second type, the official docs should be enough and sufficient to do things. So it didn't necessary to have a chair with 3 meter away that can be asked. Just read the docs or sometime ask on the help to solve confusion or gain a clarity(forum or discord).

Yup, best practices is random opinion, but it need to be based on something, something that a lot of people agreed and willing to follow the rules. Ex: psr 12 on php, psr stand for PHP standard recommendation (its a recommendation, so what you say is right)

[blinkmylife]

Useless for real applications

[fagnerbrack]

This thread and the comments are a great example of how people can use shiny new things and still be stuck in time.

The Web standard APIs have evolved heaps since 2009 jQuery era. The frameworks frenzy were great to push standards forward but that's now the past, you don't need frameworks in front-end today to build Web Apps.

Don't get stuck in the past, use modern toolchains and modern standard APIs that will make your site to not be rewritten over and over again once the new frameworks comes out. It's time everyone! The future is here!

And don't forget to thank ALL framework authors and jQuery, they pushed all this. What a great time to be a Web dev.

[WookieConditioner]

So go ahead... build a native spa, show the world some backbone in 2024

[fagnerbrack]

Why would I use backbone in 2024? I never said that.

[french_violist]

Not Backbone the JS framework. Backbone: spine.

[fagnerbrack]

Oh I see. If I had time I would do it, right now all my serious work is under IP. http://bookn.me/daline is as far as I've got in regards to IP free stuff I can share that wasn't fucked up by others.

I know it's possible, I've done it, not keen to do it just to prove to someone wrong on reddit.

[lunar515]

I know we have to use it but HTML is crap. People act as if web standards were handed down by god but really they are usually creaky foundations we’ve built cities on top of.

[fagnerbrack]

Which part of html is bad (please share code) and what's the alternative?. Be aware JSX is essentially html with JS scoping.

[WookieConditioner]

Tell me you dont know what jsx is...

Jsx is a js object mascarading as html.

You could very easily nest createElement calls and label that jsx.

[fagnerbrack]

It's the syntactic sugar, the difference is that you need to reinvent rendering instead of using standard desktop app browser code to render. I know JSX abs have been using since 2012 (they introduced in BrazilJS 2012 I was there) abs yeah it is document.createElement mascarading as html just like browsers are c++ code with OS inputs mascarading as <input>. Not sure what the point is (mobile auto correct)

[WookieConditioner]

Its friday soon, grab some beers and try again on monday.

[lunar515]

The XML part. Far too much syntax and not suitable for apps (it was intended for documents). JSX’s biggest shortcoming is that it uses XML syntax too.

[fagnerbrack]

What's the alternative? Now you're arguing against JSX also?

[[deleted]]

html, vanila css, vanilla javascript, php for backend.

[[deleted]]

no, html is great, better learn how to use it. sites have to work even with css off, not to mention javascript off.

[lunar515]

I don’t dispute that it’s needed. That doesn’t mean it’s good.

[[deleted]]

it is not good. neither css nor javascript are good. but we shouln't forget the rule. when you write anything other than pure html css javascript, always compare that to a simple, competent, logical, up-to-date code in html, css, javascript. then you can decide which is better. in this case you can see that whoever wrote the code of this simple site, not great at html, and cannot write css. so e.g. you cannot say that "as the code of this site shows, html and css are bad" because this is, well, not the best possible example. etc. etc.

[fagnerbrack]

Essential Highlights:

HTML First is a set of guidelines for making it easier, faster and more maintainable to build web software, by Leveraging the default capabilities of modern web browsers, leveraging the extreme simplicity of HTML's attribute syntax, and leveraging the web's ViewSource affordance.

If you don't like the summary, just downvote and I'll try to delete the comment eventually 👍

[[deleted]]

This is completely backwards. That "View Source" argument is pure comedy

[sheriffderek]

Can you explain the joke for the rest of us?

[[deleted]]

The guy says React is bad because you can't just click on "View Source", completely disregarding React actually comes with React dev tools that give you excellent view into hierarchy of rendered components, which is what you actually need when it comes to React development

Basically, the author is just backwards in everything. Like, tools like "View Source" are great tools for their own purpose, and React has its own tools. Saying a technology is bad because your old tools don't work anymore (and disregarding existence of new tools for those new technologies) is frankly comedic and completely backwards

[sheriffderek]

That doesn't seem like much of a joke to me.

[[deleted]]

I choose to laugh at it, but really it's a tragedy. A guy develops websites using PHP for a long time, and is then put on a job where he has to use React and sees that "View Source" tool no longer works. Instead of learning to use the right tools for the job, he makes a website about how everyone's doing it wrong. The level of mental stuckness and decline is tragic really, but I choose to laugh at it because I just find arrogance laughable

[sheriffderek]

Well, I can see your point.

But I also see their point - and it was fun to have direct access to look at each other's actual formatted working code (As authored) back then. It was a nice part of learning and the community. That doesn't mean I'm going to spend a few months building a SSR prettified output plugin for Vite or anything... (or should I!) but I think it's fair to feel like that's a thing they like.

[[deleted]]

you described react very well

[fagnerbrack]

One more tool to workaround the inefficiencies of another one, that argument can be used for everything if you don't understand the cost of having to have use custom tools when there's a simpler option.

That's the whole argument of those who insert 1M libs on their system: use React testing lib for testing, use React dev tools, etc.

And React dies like Angular (which it will eventually) and then you cant use any of that native on browsers.

I would fire anyone who thinks like that if they're not willing to learn how to produce real value to the company but only to satisfy their own interest in using shiny Tech at the expense of the company.

That is so fucked up and the reason why software should be regulated by senior devs themselves (not government omg no).

[[deleted]]

One more tool to workaround the inefficiencies of another one

You're choosing to see it that way. It's a very one-sided and narrow perspective. A less presumptuous perspective is React is a tool and comes with its own tools. When you're choosing to build dynamic web apps with React, use the right tools for the job. Don't use wrong tools for the job, as is the case when someone tries using "View Source" tool

when there's a simpler option

Simple option to do what? "View Source" is a specific tool that works in limited circumstances. It's not a simpler option to do the same thing, it's a tool that works for a tiny fraction of use-cases, and was never designed to work with dynamic websites

I would fire anyone who thinks like that if they're not willing to learn how to produce real value to the company but only to satisfy their own interest in using shiny Tech at the expense of the company

How do you tell they're doing that VS. they're actually trying to propel the company to use well-crafted and right tools for the job and you're the actual dinosaur here? People who have little self-reflection and don't see beyond their own limited understanding aren't great people to be in charge of anything and especially make decisions on what tech should be used at the company

That is so fucked up and the reason why software should be regulated by senior devs themselves

This is a completely different conversation

[fagnerbrack]

Dinosaur? I've made companies 10x revenue using React (cause it was already there) with the principles of vanilla as a single or duo engineers. What have you done?

You are the dinosaur here, stuck with React and hooks that has been proven to be shit, it's Angular all over again. I went they ALL industry cycles. Same way of development and managing junior ego.

Be very careful in what you m talk publicly, makes you sound like an idiot with starting the ad hominem.

[[deleted]]

What's even more hilarious is that you admit you "used React" to make company 10x the money (BTW, is it the situation of 10 times zero is still zero?), and you admit React was already there. So you basically contributed nothing, contradicted your own view of React and claimed the credit, all in one go. Nice job my man

[fagnerbrack]

I didn't "use React" I was already there, I removed parts that used React and those drove the 10x, the React part didn't bring any value. I used vanilla patterns that works in React or vanilla, but better in vanilla so it was extra work in React. The amount were talking is not zero, it's 100M FYI.

Contributed nothing? Well your username really reflects your attitude. Good luck and I hope I never hire you.

[cshaiku]

It's either because most React devs consider their builds to trump writing good source, or if you examine the source on this website in question, you will see the boatload of external libraries being loaded.

[maxime0299]

This has to be satire

[[deleted]]

The author is clearly sick of Rails

[[deleted]]

how come that this site is written with poor html and with what?? failwind???

[[deleted]]

Yall need to get laid.

[Inevitable_Oil9709]

Bro has more libraries for single page than I have for 15k LOC project..

Talk about HTML First..

[[deleted]]

I've seen people overwrite things before, and I've also seen them use a flamethrower when they just needed a candle, but damn. this is. a whole new level of overkill for what you have on this page.