Xianc78's Personal Website

Making Saner Websites


The modern web sucks. What was once a great tool for sharing hyperlinked documents over the Internet is now a landscape of bloat, surveillance, compatibility issues, and feature-creep. The web is almost unusable for many people unless they install add-ons to block all the unnecessary JavaScript, ads, etc, but even then, some people are left without a choice because the site wouldn't be functional without them. The web was never meant to be used as a platform for running software. It was meant to be merely a document retrieval tool, allowing people to view hypertext documents over the Internet without having to download them to their hard-drive like they would have to do with something like FTP. While other document formats like Microsoft Word documents and PDFs also feature scripting and interaction, they are not nearly as prevalent as the Web and it's JavaScript language.

Modern web developers are simply not taught how to develop websites properly or what the web was really intended for. That's why so many of them resort to using bloated frameworks like React, Angular, Vue, Bootstrap, etc and/or use third-party APIs from Google, Facebook, Microsoft, Cloudflare without realizing the consequences. This leaves sites incompatible with certain browsers whether they are older browsers (even ones from a few years ago), browsers using a different rendering engine, minimalist browsers, or browsers intended for people with disabilities (e.g screen-readers). It also leaves certain sites inaccessible for people who care about privacy as JavaScript can be used to scrape user-data without their consent.

It doesn't have to be this way. We can make saner websites again and allow accessibility with most (if not all) browsers, screen-readers, people with disable JavaScript, and people who use Tor/VPNs.

Simple vs Ugly


When most people think of "simple websites" they tend to think about the awful websites that existed on hosts like Geocities or Angelfire back in the 90s. While it is true that the early web had it's share of problems like flashing backgrounds, frames that made the site impossible to navigate and index properly, annoying animations, etc. There were also sites that didn't conform to these practices. Contrary to popular belief it's possible to make a simple website while still making it presentable. Just take a look at my site as an example. In fact, you are free to use my CSS and this page as a template for any purpose, with or without credit (it's all licensed under the WTFPL). There is only a title, navigation bar, a container for the content, and a footer. The only JavaScript I use is a single script for the navigation bar, but I only do it that way so I can update it without having to edit every page. My site pretty much works in every HTML5 supporting browser, unless JavaScript is disabled. When loaded in NetSurf (a browser running on it's own custom made engine), the only thing that doesn't work is the navigation buttons highlighting when you hover over them.

Common Mistakes of Modern Web Developers


Heavy JavaScript

JavaScript was originally meant to add simple interactivity to web pages. It could be used for simple animation, a drop-down box, validating forms before submitting them, or fetching information from a server without refreshing the page. There are some caveats to it's useage, such as making it harder to render on text-based browsers or screen-readers, making it harder for sites to print, adding security issues, and just making it harder to implement on different browsers because a new language adds more complexity.

Modern websites are heavily dependent on JavaScript and unnecessarily so. Some sites won't even load without JavaScript enabled. People have their reasons to disable JavaScript, whether partially or competely. It can be a major privacy and security issue as it can be used to scrape data from users without their knowledge or consent, create a bunch of pop-up windows, slow down their computer and/or Internet connection, or just make a site harder to read for people with disabilities. I wouldn't say "don't use JavaScript at all". There may be times where using it is absolutely necessary. I'd say that you should see if the feature you want to implement can be used without JavaScript first. If not, then use it. Your site should be mostly functional without JavaScript either way. For example, if your site allows posting content and you decide to use JavaScript to post without refreshing the page, you should still allow people to post with it disabled even if they have to load a new page (just create a separate form in the <noscript> tags). You should also use only raw JavaScript and avoid using web frameworks and third-party APIs, which brings me to my next two points:

Web Frameworks

Today, many people don't write vanilla CSS and JavaScript anymore and instead rely on frameworks such as Bootstrap, W3.css, jQuery, React, Angular, and Vue. These frameworks are said to make it easier for web developers to implement the more complex stuff. For example, jQuery is meant to simplify document manipulation and AJAX requests. However, it only brings in more complexity. For one, these frameworks are often not installed on the same server as the website, so they rely on third-party CDNs like Google just to load these frameworks, giving some users another server that they have to whitelist from their script blockers. They can also break compatibility as some frameworks might use some JavaScript code that isn't available on all browsers and a lot of these frameworks are bloated, making sites harder to load on slower computers. Most importantly they just promote bad practices, allowing web developers to make "pretty" websites without knowing what really is going on or having a full grasp on a language.

Just use raw JavaScript and CSS. Making an AJAX request without jQuery is easy. You don't need fancy animations when loading new content or hiding content. You don't need to open a separate window just show a login form. You can just put the login form on the login page or up on the header of a website. You don't need a fancy UI for a website. Forms and simple JavaScript are all you need. A website should not be a full-blown application running on a web browser.

Third-Party APIs

A lot of websites use third-party JavaScript APIs like Google Analytics, reCaptcha, Disqus comments, various social media APIs, etc. They are all used for various reasons. Google Analytics is supposed to provide real-time statistics on web traffic. Captcha APIs like reCaptcha are used for spam bot protection. Disqus hosts comments on their own server allowing users to save server space. Social media APIs allow users to share pages they find. These all sound good until you realize that they again suffer the same problems with web frameworks: they require users to add more servers to their whitelist, they make unneccessary requests to third-party servers, they promote bad practices, and many of these can be done without them.

For analytics, you probably don't need it. Do you really need to know how many users are from Indonesia? Just implement a simple hit-counter to see how many hits a page has recieved (this can be done with simple server-side scripting). As for spam protection, see if there are any better captchas available. You can also have hidden fields as spambots are usually programmed to fill in all fields in a form, blacklist bad email servers, or just manually approve all user accounts. As for social media, just trust your users being able to copy and paste a URL.

Content Delivery Networks (CDNs)

These services are basically a network of proxy servers allowing content to be served spatially. A lot of these services such as Cloudflare also provide DDoS protection. Honestly, you don't need these if you design your site as simply as possible. You don't need the DDoS protection either. There are local solutions to that such as ModSecurity on Apache servers.

Third-Party Fonts

A lot of CDN services like Google provide fonts other than what the browser provides by default. It may make your site look more unique, but the defaults are all you ever need. Do you really think you need fancy fonts just to advertise you small flower shop? I only ever use Times New Roman or Arial.

Premade HTML Templates

These aren't bad in of in itself, but they may contain third-party APIs, depend on web frameworks, use Google fonts, etc. If you use any of them, be sure to check if they don't have any of these. It may be better to just learn enough HTML and CSS to make a decent looking website without them.

Drag-and-Drop Editors

Yeah, I get it. People tend to run away from anything that doesn't have a GUI, but WYSIWYG editors (or drag-and-drop editors) do have their problems. They can add unnecessary JavaScript code, make the actual HTML hard to read (and therefore render), add third party APIs, etc. This is especially the case with web-hosts that offer these editors like Wix, Weebly, and SquareSpace. They can even include ads where revenue doesn't even go to you or collect data on your visitors. PLEASE I know it's hard but either just bite the bullet and learn web design yourself or hire someone else to do it. Web development is NOTHING like programming, unless you need to do client or server side scripting. If you have ever edited a Wiki article or posted on a forum that supports BBCode or Markdown it's the same principle. You have tags that represent each element of a site. Some tags are used to format text, others are used to add images, etc. It's like editing a word document except you have to manually specify the format without using a toolbar. CSS is just like editing a configuration file or changing the settings of a program manually, without a settings menu. Programming, on the other hand, requires you to think mathematically and logically to solve problems and come up with algorithms. It's a completely different beast. Just trust me on this one.

Foregoing a Website Entirely

Okay, this isn't necessarily a mistake made by web developers in particular, but in the age of social media, it's common for celebrities, businesses, organizations, etc to forego a website entirely and rely solely on social media. First off, not everyone is on social media and a lot of social media sites require you to be logged on in order to even view pages. Social media sites have a lot of privacy issues among other things so people have their reasons not to use them. An actual website allows you to have pages full of information such as history, location, products and services, etc rather than just updates and a bio.

Web hosting is dirt cheap these days, it should not be a huge cut into your profits, neither is hiring a web developer, if you need one.

Summary


The modern web is broken, mostly due to ignorence from modern web developers, but it doesn't have to be this way. In fact, it's just as easy, if not easier to make a saner web again. Sure it requires some of us to learn a few skills, but really what's wrong with that? It's always a good idea to diversify your skills so you can be a more self-reliant person. All of this will pay off as big corporations will have less control of the web, the Google/Mozilla duopoly (really more of a monopoly) on the browser market will end, and people will no longer worry about browser compatibility anymore.

Further Reading

Back to articles