Introducing TACE
Modern web development has become selfish. We moved from an explosive period of growth where the focus was making websites and all of their technologies as open and accessible as possible to a new era where the focus is on developer satisfaction and productivity at the expense of end users.
- Background
- History
- Complications
- Current State
- TACE
- Final Thoughts
- Addendum: Learning TACE
- Addendum: Framework Compatibility
Background
It has become standard these days to assume front end web developers are using a framework. The original way to build a website using vanilla HTML, CSS, and JS are nowhere to be found. Framework surveys don't even acknowlege this method of development:
If you develop using vanilla HTML, CSS, and JS it is hard to even answer "What is your front end stack?" type questions because even saying you use vanilla JS could mean anything (you could have built a completely custom JS library that generates all the HTML and CSS using no other code libraries and written it by hand in JS). When you answer "vanilla JS" that usually invites other questions like "How?" or "What do you mean?"
History
As a result of the framework emphasis, traditional forms of website development are ignored and many of the principles that formed those foundations are now missing in development conversations. Companies that have a vested interest in creating walled gardens and vendor lock-in are now driving many of the modern JavaScript and design libraries.
The principles that powered a really explosive era of growth in the internet (principles like "separation of concern", the "semantic web", "end user satisfaction", and "open standards") have been replaced with principles like "developer satisfaction", "streamlining collaboration", "managing intellectual capital", and "developer productivity" which have all the hallmarks of development being driven by large technology firms whose main goal is to drive down developer costs and increase output.
As a sidenote, I don't necessarily have a positive or negative issue with those goals, but I do not think they are the proper goals for a healthy, successful, collaborative web community that was being built in the 2000-2010 decade.
Complications
The focus has shifted from the open web and making everything accessible and customizable for the end user to focusing on the developers and making sure the developers can quickly output projects at the expense of the end users.
It has created longer load times due to bloated code, difficult to access interfaces (most of the content isn't loaded until after the JavaScript is loaded which means to parse the contents you can no longer use a simple command line download program, you now must use a browser or simulate a browser with JavaScript functionality), less customizability from the end user, and from my experience, higher chances of a browser crashing or slowing down.
A good example is to compare Twitter (a site developed with modern front end techniques) with Nitter (a site developed with traditional front end techniques) (Nitter is an open source alternative interface for Twitter - it is free and open source and may be down from time-to-time due to Twitter API restrictions or simply server overload on a free service). Try opening these two links using incognito browser windows on your phone (incognito so that you are not logged in):
When this free service is stable, Nitter loads much faster for me (if that Nitter link is not loading properly, you can use this alternative link: https://nitter.it/indiehackers). Now try scrolling as far back as you can on the Twitter link - eventually my browser slows down and/or crashes (note at the time of publishing, it looks like Twitter now puts up a banner to sign up if you scroll too far). If you do the same on Nitter, you can navigate from page to page until there are no longer any posts.
Another test you can run is to use your browser's View Page Source option when you right click and compare the easy to read Nitter output versus Twitter's output. The output of Twitter is a modern mess of complicated scripts while the Nitter output is clean, easy to understand HTML.
I'm not picking on Twitter, they are just one example where it is easy to compare with the alternative. If you want another example, try Reddit and compare it with the free alternative Teddit:
Why are all these popular websites having alternative interfaces created for them? When these sites first came out, alternative interfaces were being created off the free and open API interfaces which offered unique takes on interacting with the sites. These days, companies no longer value the open web or their end users and alternative interfaces are now created to try to escape the increased control of these platforms.
Current State
If you look at the reasons why most companies switch to a modern web stack, it is because their developers wanted to try out the latest technology, or because they wanted to be able to onboard developers as quickly as possible, not because the latest technology actually helps their end users.
Web developers used to be proud of how neat and clean their HTML was displayed when a user viewed the source. Some companies would advertise job openings where only people who viewed their source code would see the job opening. Easy to access source code made it easy for people to learn new techniques and to just learn web development in general. Now when users view the source, they see a link to a JavaScript file that will later load the HTML.
Despite this "developer focus", many developers are frustrated with the constant churn of modern JavaScript front end libraries - most of the reasons for the churn are due to trying to solve problems created by these very same frameworks. Concepts like SSR (server side rendering), HMR (Hot Module Replacement - needed because reloading a web page takes a long time with modern frameworks), Tree Shaking (getting rid of all the bloated code that is not needed), and Lazy Loading (only loading code as needed because it takes too long to load all the code at once). Most of these solutions are really ingenious but they wouldn't be needed if traditional web development was used.
To sum it up, modern web development has become selfish. The only way to resolve this issue is to change the focus from "developer productivity" back to "end user satisfaction."
TACE
If you don't have a name for something, it doesn't exist.
With that in mind, I would like to introduce you to the TACE Front End Framework (rhymes with "ace", pronounced /tās/). The word "tace" is an obscure alternative word for "tasset" which is a type of armor. When you use the TACE framework, you are building sites that are protected from obsoletion (when built properly, they are easily maintainable and updateable in the future) and you are also protected from the constant churn in the industry.
The TACE Framework has four basic principles:
- Triad - Front end web development should consist of three separate parts, also known as "Separation of Concerns." Any website that adheres to TACE will separate the HTML, CSS, and JS into separate files with minimal exceptions and the following standards will apply: The JS will not generate the CSS and HTML. The HTML will not contain CSS or JS. The CSS will be maintained separately from the HTML and JS.
- Accessible - The HTML content should be easily accessible by both humans using the browser "View Source" functionality and machines parsing the page should be able to load the URL with basic tools like wget and curl. The content should be "Semantically Structured" for easy parsing.
- Client - The end user and device that is accessing the site should be prioritized over developer productivity - this includes loading time and browser memory usage. When TACE is used, the site is being developed with the client in mind.
- Expose - Combining the three principles above, clients should be able to easily access the HTML, CSS, and JS of the site in a non-minified, easy to read format. All of the code should be exposed and easy to view by the end user which encourages learning and sharing.
If you follow the above principles, then you are using the TACE framework. Now when asked what framework do you use, instead of saying "I use vanilla JS", you can just say "TACE" to answer the question.
Final Thoughts
There appears to be a shift currently happening again in web development. Statically generated websites are becoming much more popular (it is almost like a violent reaction in the opposite direction of bloated single page apps). Most of these statically generated sites are still using a lot of the modern build tools that I believe cause a lot of developer frustrations (especially for people who are new to web development and trying to figure things out). I would like to see more people move to hand written HTML, CSS, and JS but I think statically generated websites (even if they are built using complicated tooling) is a good direction for the web development community.
For anyone looking to get into web development, I would highly recommend taking a look at writing your HTML, CSS, and JS by hand. It may initially sound awful, but if you are using a solid text/code editor, it will become very enjoyable and give you confidence that you have complete control of your site (you won't have to spend time figuring out why your build tool is throwing an error). Following the TACE Front End Framework principles will help you understand the basics of what is happening when the browser loads your code.
If you have no idea where to start. Start with HTML. Write HTML to match your content and only your content. Once you are happy with your HTML, then write CSS to add styling to your content. Every now and then you may need to make a minor adjustment to your HTML (add a class or move some tags around) but overall you should be able to fully style the page without having to adjust the HTML. Lastly, if you want to add interactivity to the page, then add JavaScript. All the hooks you need should already be there based off of the CSS you've written.
In my opinion, it is much easier to move up a level to modern frameworks when you understand the basics of HTML, CSS, and JS rather than starting with a modern framework and then trying to move down to lower levels of code. What I have found over the years of development is that you learn a lot more and your confidence grows when you understand lower level functionality. But be careful, once you understand the lower level workings, you may not want to move up to higher level frameworks.
So next time you are asked, "What front end framework are you using?" be sure to answer "I'm using TACE."
Addendum: Learning TACE
So if you are just starting out, how do you learn TACE? First, don't get too caught up on trying to learn techniques. Figure out what you want to accomplish, then learn the techniques needed to accomplish what you want.
If you are completely brand new, generally there are at least three file types used, each with a specific purpose. The only one you have to have is HTML:
- HTML - Your site's content displayed in a structured manner.
- CSS - This adds styling (like color, text formatting, layout, and anything else that controls the "look" of the site)
- JS - This adds the interactivity (meaning if you click on a button, it shows a popup).
I recommend visiting sites that breakdown the basics of HTML, CSS, and JS. Here are a few sites I recommend:
General
-
Mozilla Web Docs
- Mozilla is the creator of the open source Firefox browser and provides great documentation on web technologies.
-
Savvas Stephanides - Dev, Explained
- Some really simple break downs of web development technology. You'll probably want to start towards the bottom of the page.
HTML
-
Khan Academy - Intro to HTML/CSS
- I have not watched the full series but what I sampled looked great.
-
HTML.com
- Provides a really great introduction to writing HTML.
-
Simplilearn HTML Introduction
- A great, quick overview of HTML and how it works.
CSS
-
CSS-TRICKS
- The main site keeps you updated on the latest CSS techniques but there are breakdowns of just about every CSS option you can think of. They are my go-to resource when I need a refresher on something:
- If you don't know/understand these terms, don't feel overwhelmed. Only learn them, when you need them.
-
Defensive CSS
- This is a website that provides examples on how to accomplish specific techniques using CSS.
- CSS Games:
-
CSS Diner
- This helps you learn how to use CSS Selectors (the very basic building blocks of CSS).
- The text on the right side of the screen and the "Help, I'm stuck!" popups are both helpful to read.
- The first answer (at the time of writing) is "plate" then press <ENTER>.
-
Flexbox Froggy
- This game helps you learn flexbox which is used for spacing items in CSS.
- I think it does a great job explaining what it is trying to teach you.
- The first answer (at the time of writing) is "justify-content: flex-end;" then press "Next."
-
Flexbox Defense
- This game helps you learn flexbox which is used for spacing items in CSS. If you don't understand what flexbox is, make sure you understand the basics at the CSS-TRICKS link above.
- The text on the game can be a bit overwhelming but the animations are a lot of fun! The drop downs with the right arrows in the intro text provide details on how to use a property.
- The first answer (at the time of writing) is "justify-content: center;" then press "Start Wave."
-
Grid Garden
- This game helps you learn CSS grids. Grids are a fairly new technique but very powerful way to layout a website page.
- Like Flexbox Froggy, the text does a great job explaining what you are learning.
- The first answer (at the time of writing) is "grid-column-start: 3;" then press "Next."
-
CSS Diner
JavaScript (also abbreviated as JS)
JavaScript is an actual programming language used for many purposes outside of web development so the learning can be a bit more complicated and confusing. The good news is that you can build some great websites using just HTML and CSS and then you can sprinkle in Javscript when you need it.
Another thing that makes JavaScript difficult to learn is that is has evolved over the years. The old style code still works, but there are now new ways to write code that works in modern browsers. If you come across JavaScript code that has "var" in it, then it is probably classical style JavaScript and if the code has "let" or "const" in it, then it is more modern style JavaScript. Either style works (I personally prefer writing in classical style JavaScript, but if you are learning, you should probably learn modern style JavaScript since that is what everybody is using these days - also, no one refers to them as "classical style" and "modern style" - those are just my own terms).
-
JS Games:
- JavaScript games are a bit more complicated than the CSS games.
-
JSRobot
- It looks like a great way to learn the basics of JavaScript.
-
Elevator Saga
- An interesting little game. Not sure how well it actually teaches JavaScript.
- The first answer (at the time of writing) is to add "elevator.goToFloor(2);" to the code and then press "Apply"
- You can speed up the time at the top right where it says "2x" - just increase that.
-
CrunchZilla
- It looks like it teachs working with JS to output graphics. Depending what type of site you are building, you may not use this type of JavaScript much.
-
Untrusted
- It gets really complicated really quick and the style of JavaScript is a little different than what you would be doing in normal web development.
Miscellaneous
- Various other helpful links.
-
CanIUse
- Browsers are always adding new features. If you need to see what browsers support a feature you want to use, this is a great place to check. Here is their CSS Grid page:
-
CanIUse CSS Grid
- I would focus on using features that are supported in the latest versions of Chrome, Firefox, Safari, and Edge if you are just starting out.
-
CanIUse CSS Grid
- Browsers are always adding new features. If you need to see what browsers support a feature you want to use, this is a great place to check. Here is their CSS Grid page:
-
Hex Invaders
- Colors in CSS are usually in a color code format called "Hexadecimal Colors" - this game helps you get used to how the color codes match up to actual colors.
-
Pixact.ly
- Items are often sized and positioned in pixels. If you are not used to them, this game can give you an idea of their size when positioning elements.
- I would note that I'm terrible at this game and have been working with pixels for over 20 years.
-
Simplilearn HTML Game Structure
- It may overpromise a bit - you don't end up with an actual game at the end but I really like how they explain everything and lay everything out.
- The nice thing is that it uses TACE.
- View the source of this blog. The code is not formatted nice and neat but you can see how a really simple website is structured.
- If you are not sure how to view the source code, try right-clicking in a blank area of this page and see if there is a "View page source" option or something like that.
- When you view the source, you will see links to the CSS files at the top and links to the JS files at the bottom. If you click those while viewing the source, you will then be able to view the CSS or JS files.
- You can also view the source by opening your browser developer tools.
- Balsamiq has a great tutorial on how to open developer tools: Finding Your Browser's Developer Console
- Note that the Firefox example shows how to open the console - you want to open the "Web Developer Tools."
- The "Elements" tab will show the HTML and associated CSS nicely structured (and you can even edit and change it to see what happens).
- Balsamiq has a great tutorial on how to open developer tools: Finding Your Browser's Developer Console
-
CanIUse
- Miscellaneous Games
Addendum: Framework Compatibility
I would encourage you to write your HTML, CSS, and JS directly as much as possible and keep things as simple as possible. That being said, there are frameworks that can help.
Each of my projects for the 12 Startups in 12 Months (Open Source Edition) challenge will be using TACE.
That being said, below is a categorization of various libraries and frameworks. If you know of a modern framework that you believe is TACE compatible, please let me know so I can add it to the list. Also note, that I may have miscategorized projects below. Some of them I know better than others, but I may not be familiar with the latest version as things are constantly changing.
Note, just because a framework listed below is not TACE does not mean I don't think you should use it or that I think it is a bad project. I'm simply trying to define what falls within the TACE framework and what does not.
So what are some practical examples of this.
TACE Compatible
- HTMX would be a modern example of a library that adheres to TACE. The HTML has some hooks added to it but that does not affect any of the four principles.
- Alpine.js has similarities to HTMX. Due to the limited properties that can be invoked, I would consider Alpine.js to be within TACE framework principles.
- Hibiki HTML has a unique system for front end development. It uses custom HTML elements but the output meets the four principles of TACE.
- Knockout integrates well with traditional styles of development and matches the four principles to be TACE compatible.
-
jQuery - yes it is old, laughed at, and despised, but it falls within TACE. Don't be embarrassed or ashamed to use jQuery.
I see new, very talented developers feel shame for using jQuery when they are turning out projects that other, more experienced developers only dream of creating using modern frameworks (just to be clear, there are new, very talented developers who are turning out projects others only dream of in modern frameworks too, I just want those using jQuery to not be ashamed of their work when asked "What's your tech stack?").
Mike Munroe from OBLSK mentioned on Twitter that jQuery has some security issues. It is a good point that I should emphasize. Here is a good, although a bit technical (if you are new to JS), overview of the issues that you can run into with jQuery: PSA: jQuery is bad for the security of your project.
Make sure you are using secure practices when sending/loading AJAX calls, working with third parties, and outputting/generating HTML. Note that these concerns also exist when using vanilla JS. -
Bootstrap - yes, it is TACE compatible. I have mixed feelings overall about Bootstrap. I think it spurred on a major open source design movement, but it is also one of the major culprits of how we ended up where we are today in modern front end development.
Bootstrap taught a generation of developers that to write HTML you need to think about CSS (which I'm guessing has led to lots of developers hating to write HTML based on comments I've seen). When writing HTML, my recommendation is to focus on writing HTML that matches the content. If you only think about what tag matches which content, it becomes a very enjoyable experience. If you are having to match your HTML to a CSS framework's requirements, it is going to be a very frustrating experience.
Borderline TACE Compatible
- Vue.js can be used in a TACE compatible way, but it can also be used in an incompatible way. To my knowledge, the JavaScript is generating the HTML in some circumstances which would break the Triad principle so I consider Vue.js to be borderline depending how it is used.
- Hyperscript is the companion to HTMX. Due to it using an interactive scripting language directly in the HTML, it does not fit in well with TACE. Because it is an open ended language, it is borderline out in regards to TACE compatibility since it does not maintain a separation of concerns.
- Tailwind - It separates the CSS out to a separate file but then it has the developer write all the CSS as classes in the HTML. Classes should be used as hooks in the TACE system - with minimal exceptions, classes should not be the styling themselves.
Not TACE Compatible (most of these do not fulfill the Triad principle due to the JS generating HTML)
TACE Compatible Backend Frameworks (these play well with TACE and would be considered compatible or borderline compatible with TACE):
My recommendation is to always write by hand if you can because you have much more direct control of the end result, but if you feel you need to use a framework, hopefully the above list will clarify where the frameworks stand in regards to TACE compatibility.