Pure html+css webdev

A thread for nerding out about how html+css is good enough and anything else goes into dangerous bloat territory. Because >noscript users >people with old computers or phones >folks with slow internet connections >bros with too many tabs open We can be nice to them and not have them load a site full of scripts and animations and 3rd party resources and soykaf. Do you know any websites coded like that? Do you do jscript-free webdev? Any resources you could share? I'm trying to find an html template for making a blog but all I can find is fancy soykaf that loads googleapis and breaks under noscript. They don't even work on elinks, FFS.

>>22416 What's the problem with having some backend code? It doesn't affect anything you mentioned.

>>22416 >anything else goes into dangerous bloat territory. That's a very black-and-white way of looking at it. Javascript gets abused a lot, but that doesn't mean it's inherently bad. If you use it in moderation and make sure it's not required for the page to be operational, you can greatly enhance what is otherwise a static webpage. >Any resources you could share? I'm trying to find an html template for making a blog but all I can find is fancy soykaf that loads googleapis and breaks under noscript. They don't even work on elinks, FFS. Just write HTML and update it manually. It's not that hard.

i'm trying to get into html and css. i want to try making a little weird webpage for fun. i found the odin project as it recommended a lot on the internet. teaches html/css, javascript etc.

>>22421 >i found the odin project as it recommended a lot on the internet. teaches html/css, javascript etc. Is it good? I want to learn html+css, but don't want to read a book for that, there are going to have way too many useless thing on the book.

>>22432 I just started out, so I can't really judge. But I've read a lot of people praising it. It gives you projects to work on that build on top of eachother and tries to help build your problem solving skills etc. Instead of a linear hand-holding tutorial like codeacademy where you type everything in the browser, it seems to be a more true to life approach and makes you set up your own dev environment.

>>22416 >Any resources you could share? I'm trying to find an html template for making a blog but all I can find is fancy soykaf that loads googleapis and breaks under noscript. They don't even work on elinks, FFS. not html itself, but hugo is a static site generator from markdown and there are plenty of js-free themes for blogging for it. imo when it comes to blog posts it's easier to just maintain a directory of markdown scripts than it is to bother copypasting html templates for each new post. For anyone starting out, which seems to be a portion of this thread already, highly recommend using https://validator.w3.org/ frequently to make sure you're writing valid html, not just html that your browser can interpret.

>>22432 Check out "The 2020 Complete Web Development Bootcamp", it's from Udemy but you can find it in piratebay if you prefer. I'm not a proper webdev, but it seems to me that it's mostly about knowing the basics and just looking stuff up from that point forward, much more so than in other languages anyway. You won't be thinking in terms of data structures, for example, except if you're using JS to build something more complex than a regular website.

Tom Scott just released a good video. Slightly unrelated (it's more about cookies than JavaScript), but I think it's still on-topic, since it deals with the whole topic of "what Web was originally supposed to be, but it isn't anymore". https: // youtu.be/OFRjZtYs3wY (link made unclickable for anti-referer autists)

>>22466 the best video that covers this "what web was and isnt anymore" is the infamous website obesity crisis video. https://www.youtube.com/watch?v=iYpl0QVCr6U the presenter is funny too

>>22466 >(link made unclickable for anti-referer autists) Off topic, but can someone give me the anti-referer autist pitch? What's wrong with clickable yt links?

>>22494 I assume it gives yt data about where their links are being clicked from.

>>22496 If by "it" you mean "your browser" than yes. When you click a link the default behavior is to send the source of the link in the referrer header when you load the site it links to, which tells that site (in this case, youtube) where you're coming from. Copy-pasting the link to your URL bar avoids this, as does modifying your browser to prevent this behavior, so making the link unclickable doesn't help anyone who knows enough to take these precautions (since it is just as easy, easier in fact, to take them with an active hyperlink). The point is presumably to prevent anyone (i.e. people who don't know or don't care about the referrer header) from revealing the link's existence to it's target. As an aside, this is also the point of so-called link anonymization services. Basically, you set up your server to mangle all links so that they are proxied through a third party. The browser will interpret that third party as the referrer and so the actual target will see their hostname instead of the actual source.

>>22467 Nice, thanks! That's an awesome presentation. This guy is a top-notch presenter. And I absolutely cracked up at his choice of icon for representing Google.

I'm browsing with Dillo for the first time in ages, and I'm surprised how fast it is compared to other browsers. Pages on Lainchan load almost instantly. It'd be nice if it was capable of general use.

>>22514 I've used Dillo for a bit and it really is impressive. Pages come up instantly. Dillo doesn't have any JS and HTTPS needs some plugin.

>>22432 If you're into all fluff cut out of learning it here's a site I use for reference. https://learnxinyminutes.com/ Also I haven't seen http://motherfuckingwebsite.com/ or http://bettermotherfuckingwebsite.com/ posted yet.

I am doing lot of JSF these days, and even though framework is pure hell of development and I hate how difficult it is to do anything in it, I like how responsible it is on old machines https://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml I browse it on nokia Lumia right now. Consider i can't browse 4chan on it for example, button dont work, i dont see any replies under the posts etc. Many other imageboards render like soykaf on this phone. I suppose 90% of modern does not work on Lumia, probably because of some soykafty bloated JavaScript. But look at this primefaces website. Its basically jsf interpreter with lots of complex examples, components chaging dynamically with Ajax with no full rerender, all of it work on Lumia. My school website is made in jsf, much older version tho. Its clunky as fuarrrk, but guess what, all functionalities work on soykafty phone, no need to use "mobile app", just any dumb phone with interntexplorer suffice. So if you are interested in making functional no bloated webapps that actually do something, i can recommend learning jsf, good luck with that though

I just dont like js that much. I get it that it helps with functionality etc. But I just prefer to use raw html or even scss to do what I want. But then again, I just dont like js. Making my site the way I want it to be.

>>22596 One would think that all the soykaf they introduced with html5 would have made js unnecessary for most purposes

>>22416 I didn't build it, but there's squirrel mail, that's a php webmail with a javascript free frontend, http://squirrelmail.org/about/ I have built a chat room before using zero js. It was done using frames and meta refresh. I've built a calendar picker using no js as well. It allowed multiple selections on days. Each day a label tag tied to a hidden checkbox. Since there's no JS involved, I would generate two years worth of days in checkboxes. It could be navigated entirely with keyboard too. The most disappointing no-js thing I did was tabbed layout using href #name to modify the tab state. That ends up screwing up the back button history. I should probably go back and try again with radio buttons.

>>22432 Usually it's very hard to learn from books due to the massive and detailed content that they have, if you try to even first read it all and then work or to work along it will be a failure if want to actually learning something the best way to learn a topic is to understand the basics and its potentialities for then making a little project that you KNOW can do. The rest will be useful just as reference because will be rarely actually needed. It's basically the pareto principle: learn first the things that are used the most and get make your way learning everything else you need

>>22529 >Also I haven't seen http://motherfuckingwebsite.com/ or http://bettermotherfuckingwebsite.com/ posted yet. If you open both of those for a second you'll see that they run google analytics javascript. Which is arguably the worst type of javascript.

Can someone please share a good resource for making a box-based layout? What I am speaking of is grouping the content into small boxes and making these boxes look good. For starters I would like to know how to make the legend of a fieldset right on the border of the fieldset, I think this makes it look more modern than the standard layout.

Wtf about people searching for layouts, just make your own. CSS is super easy for the basic stuff, which is what OP wants. You can learn in an hour.

>>24129 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

http://nojs.club/ A webring where all links have no JS. You can also easily make static sites without JS using JAMstack.

>>22416 Don't forget Gopher! >resources Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Learn https://developer.mozilla.org/en-US/docs/Web W3Fools: https://www.w3schools.com Use https://makefrontendshitagain.party for inspiration! and: >>22529 > http://motherfuckingwebsite.com/ or http://bettermotherfuckingwebsite.com/

Instead of saying 'noscript users' as a condition, it may be worth emphasizing it's often due to serious security issues with running unaudited (and sometimes even obfuscated) client-side code. >Do you know any websites coded like that? Lots in the lain webring. I see it for personal or single-purpose sites a lot. Are there any larger (like commercial or community) websites you know like this? I know a few JS optional but not no-JS.

https://jgthms.com/web-design-in-4-minutes/

>>22416 >html+css You think non bloated websites I think a challange

What about a portfolio with js? I was thinking it would be A-OK since most people except for employers don't give half a soykaf about them

>>24416 This no-js stance is for purists and minimalists. If you're looking for employment, you should have JS in your portfolio.

https://www.internetingishard.com/ This looks pretty good. It says it only does HTML + CSS. It'd be much better if the site didn't have JS and then didn't pull in google analytics. But at least the site is completely functional without JS.

>>22416 >I'm trying to find an html template for making a blog You can make your own template and then a shell script that use pandoc to convert markdown post into html within the template. https://news.ycombinator.com/item?id=17855225 >Do you do jscript-free webdev? I don't use javascript when is not needed.

I wonder if one day companies with bloated sites will embrace jsf designs.

What do you think of nginx server side insertions? Are they more secure than javascript?

>>25692 Sorry, not insertions, includes.

>>24476 not the guy you responded but i also been writing a portfolio, of photos and else in my case. I already knew how to write html since i was a teen, i have always just made html-css pages, but now i introduced some vanilla javascript. Truth is i dont really like js, but i needed 2 or 3 things getting done. I was planning to move to webpy but i don't really know if it deserves the effort

Any tips on syntax highlighting without javascript?

>>25699 I don't know how they do it but watch here maybe you can find something https://guix.gnu.org/manual/en/guix.html#System-Configuration

>>25737 I guess they use this or something similar: https://dthompson.us/projects/guile-syntax-highlight.html Basically, >>25699 you need something that generates highlighted static html from your code.

https://htmx.org/ For people who are tired of js but still would like some user interaction.

For anybody using separate references/bibliography and would like proper numbering as in (some) scientific article rather than something like [AutherYear] that one can facilitate with hxcite from html-xml-utils, I made a zsh script, uses some perl and pcre2grep, doing with zsh only, but I'm lazy, and it's probably inefficient. Results are pic-rel. #!/bin/zsh # substitutes strings formatted as the regex'\[\[(\w+)\]\]' with "<a href='#\1>(\d+)</a>'", where the number is that of the ordered references # uniquely sorts by occurance all in text found such labels and adds them with sufficient indentation on the line number where a li tag with a 'cite' class and an id is first found (all of which are deleted, so it needn't be contiguous) # appends all non-used references with a rule as delimiter; typeset q w e r; typeset -A ref; typeset -a label z; typeset -i adr t; err() { printf '%s:\t%s\n' ${q} ${1} } if [[ ${#} -gt 0 ]] { for q ( ${@} ) { [[ -r ${q} && -s ${q} ]] || { err 'No read permission or empty file.'; continue }; cp ${q} ${q}.bak; label=(${$(pcre2grep -o1 '\[\[(\w+)\]\]' ${q})}); ((${#label} > 0)) || { err 'No citations found.'; continue }; label=(${(u)label}); ref=(${(f)"$(pcre2grep -O '$1$n$2' "<li class='cite'\s+id='(\w+)'\s*>(.+?)</li>" ${q})"}); ((${#ref} > 0)) || { err 'No references found.'; continue }; z=(${(f)"$(print -C 2 ${label} {1..${#label}})"}); adr=$(perl -ne "/<li class='cite'\s+id='\w+/ && "'print "$.\n"' ${q} | head -n 1); # FIXME exit on first match r=$(for w ( {1..$((${#${"$(head -n $((adr - 1)) ${q} | tail -n 1)"//[^$'\t']/}} + 1))} ) { printf '\t' }); e=$(for w ( ${(u)label} ) { printf "%s<li class='cite' id='%s'>%s</li>\n" ${r} ${w} ${ref[${w}]}; }); for w ( ${label} ) { t=${${(M)z:#${w} *}##* }; sed -i "s/\[\[${w}\]\]/<a href='#${w}'>${t}<\/a>/g" ${q}; unset "ref[${w}]" }; ((${#ref} == 0)) || e+=$(printf '\n%s<hr>\n' ${r}; for w ( ${(k)ref} ) { printf "%s<li class='cite' id='%s'>%s</li>\n" ${r} ${w} ${ref[${w}]} } ); sed -i "/<li class='cite'/d" ${q}; # fuarrrking hell, sed can't fuarrrking do this line without a a fuarrrking / as a delim. fuarrrk me. <<(head -n $((adr - 1)) ${q}) <<<${e} <<(tail -n +${adr} ${q}) > ${q}.; mv ${q}. ${q}; }; } else { q=$(mktemp); quit() { rm -f ${q}; exit ${1:-0} }; while { read -e -t 1 -r } { } > ${q}; [[ -s ${q} ]] || { err 'No read permission or empty file.'; quit }; label=(${$(pcre2grep -o1 '\[\[(\w+)\]\]' ${q})}); ((${#label} > 0)) || { err 'No citations found.'; quit }; label=(${(u)label}); ref=(${(f)"$(pcre2grep -O '$1$n$2' "<li class='cite'\s+id='(\w+)'\s*>(.+?)</li>" ${q})"}); ((${#ref} > 0)) || { err 'No references found.'; quit }; z=(${(f)"$(print -C 2 ${label} {1..${#label}})"}); adr=$(perl -ne "/<li class='cite'\s+id='\w+/ && "'print "$.\n"' ${q} | head -n 1); # FIXME exit on first match r=$(for w ( {1..$((${#${"$(head -n $((adr - 1)) ${q} | tail -n 1)"//[^$'\t']/}} + 1))} ) { printf '\t' }); e=$(for w ( ${(u)label} ) { printf "%s<li class='cite' id='%s'>%s</li>\n" ${r} ${w} ${ref[${w}]}; }); for w ( ${label} ) { t=${${(M)z:#${w} *}##* }; sed -i "s/\[\[${w}\]\]/<a href='#${w}'>${t}<\/a>/g" ${q}; unset "ref[${w}]" }; ((${#ref} == 0)) || e+=$(printf '\n%s<hr>\n' ${r}; for w ( ${(k)ref} ) { printf "%s<li class='cite' id='%s'>%s</li>\n" ${r} ${w} ${ref[${w}]} } ); sed -i "/<li class='cite'/d" ${q}; <<(head -n $((adr - 1)) ${q}) <<<${e} <<(tail -n +${adr} ${q}); quit; };

>>25699 Personally I use hmltlize from within emacs. The html exports are good enough on the grounds of syntax highlighting.

>>26120 Lol what. None of that crap works on browser without JS.

>>26131 To be fair to the htmx devs, they don't claim that. It's just the 5-second-attention-span reading-comprehension-deficient people like >>26120 who do.

>>24185 This is a terrible guide: it requires ECMAscript just to view, treats contrast as a purely aesthetic thing (I could hardly read some text towards the end when colored text was added), and supports using third party fonts which the user will have to download.

I HATE timing multiple pure css animations. This soykaf must be what hell is like: an infinitely increasing amount of animations that must all be timed to work with each other. fuarrrk.

It's the year of Our Lord in Heavens 2021, and webshit browsers still can't into gifrelated.

This thread shouldn't die yet. >>22416 >Do you know any websites coded like that? http://verisimilitudes.net I hate the WWW so much that it's also a Gopher hole. >Any resources you could share? Just look at the basic HTML tags and use them. Look again when in need for something that HTML certainly has. Mozilla is like kicking dead whales down the beach, but this is a decent resource: https://developer.mozilla.org/en-US/docs/Web/HTML I suppose I could use some advice on configuring CGI with Apache2, although I'll also riffle through the documentation again soon. It would be nice to have a very bare program that needn't parse or send headers.

>>29198 regarding tags others may disagree, but the best tags are the tags you make up. <list> <bookmarks> <favorite> <game> <signature> etc these aren't in the spec, but you can do ( spec recommended using hyphens or something for backwards and forwards compatibility) I do this and it's better this way

>>29216 I most commonly use the <p> tag. Don't custom tags require JavaScript to do anything useful, or could CSS also make them behave uniquely? To further my point that the WWW is irredeemably awful, look at this page, which has no JavaScript: http://n-gate.com/about/

>>29218 CSS can style custom tags anyway you want, you can register custom tags with JavaScript, and make them do custom things and whatever, but it's complicated, and pretty sure they call them web components. But styling requires nothing. but the point of custom tags is readability. they are not standard so I don't know about accessibility, but it's semantic, and it certainly is easier to write if you don't have a bunch of divs with a class called chapter, why not just make a tag called chapter.

Since no JS probably means doing everything in the back end, which languages and frameworks do you think provide good enough performance while also not compromising on security? Are there any common or popular ones that should be avoided? I've heard PHP is not very good from a security perspective, for instance.

If you want a simple framework for making pure HTML & CSS blogs, I made one which uses markdown with embedded lua. If you know HTML, CSS and Lua reasonably well, I think it's a nice minimal option. Find it at https://code.solarchan.club/simplesites I just wrote a chan that doesn't use any JS, it's pure HTML & CSS with Lapis as the backend framework. It's at https://solarchan.club , any feedback welcome.

>>30300 If you're using Python, Django is alright but kinda heavy, it includes loads of features you might never use. Flask is much simpler, but you might want features it doesn't include. If you're using Lua or MoonScript, Lapis is a nice framework. I haven't tried Fullmoon, but it looks quite nice. It's a Lapis-inspired framework for the Redbean αcτµαlly pδrταblε εxεcµταblε server.

nobody aside from LARPers make js-free sites, because, as you mentioned, they still have CSS = buffer overflow bugs in the browser implementation as well as the same slowness as JS. so any security or performance argument goes out the window. the web is a dead end for anything serious.

>bro a corpo uses this bro every single meme lib and language is used by the top corpos in one of their hundreds of codebases

>>30331 I agree. This is why I have a Gopher hole which can be used in place of my website.

>>30331 >>30690 God, I hate this larping. If you want to just have documents in your browser all you need to do is disable javascript. You literally get exactly the same experience as you do with these alternate protocols which essentially are toys. I really wish I could understand you, but if you want to turn http to gopher in everything besides name you can just install few addons for your browsers and that's pretty much it. I would agree that there's lot of unecessary javascript. If all your page does is show text and images, there should be no javascript on it. Or even if it has just few forms that you can fill. But there's a valid reason to have web apps like google maps, spotify or even a console in the browser to access some vps. Those things can't be done with just html. There's the issue of tracking too, but the thing is to really change that you need to change the monetary structure of the web. Currently the web pays for itself by tracking, and if we used an other protocol, it simply would get tracking in some new version, or be abandoned. There is just nothing there to support these things financially.

>>30701 >God, I hate this larping. I'm not playing pretend. I even wrote the Gopher server I use. >You literally get exactly the same experience as you do with these alternate protocols which essentially are toys. It's easier to browse Gopher in Emacs than the WWW. There are plenty of differences. It even helped my domain get attention, from other Gopher enthusiasts. >But there's a valid reason to have web apps like google maps, spotify or even a console in the browser to access some vps. No there aren't. Those should be real programs, not bloated garbage written in a terrible language designed in a week. The only reason Google supports it is to foster its business. >There is just nothing there to support these things financially. Xanadu predicted and solved these issues, but instead we got the UNIX of hypertext, the WWW.

var debotnetifyLink=link=>/&url=/m.test(link)?decodeURIComponent(link.match(/^.+&url=([^&]+)/)[1]):link; Is this how you'd remove the Google analytic redirect part from links for search results? (I know that you have to replace each link element with document.querySelectorAll applying with this function, but I wonder if I wrote it as concisely as possible.)

>>31217 Here's how I would do it. var debotnetifyLink=link=>(x=new URLSearchParams(link)).has('url')?x.get('url'):link URLSearchParams is a JS built-in for URL parsing, so you're much less likely to stumble over parsing issues.

>>31224 var debotnetifyLink=link=>new URLSearchParams(link).get('url')??link; works better.

>>31281 Here's how'd you use it (on Google Images): [...document.querySelectorAll('a[jsaction] span[aria-label]')].forEach(e=>{e=e.parentElement;e.removeAttribute("jsaction");e.href=debotnetifyLink(e.href);}); Every time you click on an image, Google replaces the link with its own redirect with analytical parameters.

>>31217 >>31282 Interestingly there's already a bookmarklet for this: https://www.squarefree.com/bookmarklets/zap.html#remove_redirects

html+css is optimal for most commercial websites, but I do like the potential you get with javascript for personal websites. I have done quite a few static pages, but now I want to experiment with javascript not to place ads or work with google but because I want to make a 3d scene in blender and place it into a site for fun. That's what js should be used for: weird and experimental websites.

I have a question, forewarning I am still in the beginner learning phase for web dev so I am a little starry-eyed. Is there any consensus (or thought even) to have file sharing between clients, to offload requests from web servers? Not to allow for larger site design, but to allow smaller sites to operate at scale and cost. Essentially you could offload all data transfer (the site code, any cached data, etc) between all clients + the web server. This would unload a lot from the web server. Now if it was so that the site itself was just a file being shared, this would be implemented using IPFS or through some other file sharing protocol. However, it would make more sense to have the site controlled by the developer. Because we are sharing a website which might update, or have some part controlled by the dev they don't want public, it is not a static file. So maybe the site is contained in the web server (like normal site design), but only parts of the site are 'shared' using IPFS (or whatever method) as regulated by the server. Like common, non-user specific data. In any case, the cite can always 'function' as long as the server is running, but maybe as other users are involved and they have a connection to the server, data requests could be communicated and completed between clients concurrently connected to the web server. The more I think about this the more antithetical it seems for what I understand is elegant website design, would be an overimplentation for a one-time use case (but maybe could be standardized and scaled?), and is NOT what I want or need right now. But it sounds nice. Does this exist somewhere in any form right now? Do you guys have any other thoughts or pointers on file sharing today inside websites?