• It’s 2019 and I Still Make Websites with my Bare Hands
  • By Matt Holt
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: EmilyQiRabbit
  • Proofread by Fengziyin1234, TUARAN

I have no idea how to make a website like the cool kids these days.

All I know is that our front-end team spent a day building the infrastructure for the new site, and then, the next day, I ran Git pull and downloaded these things (after merging hooks) :

(I had to kill the process that calculated the file size because it was taking up too much CPU.)

It shows Hello World, but they tell me it’s capable of doing more! I think they’re saying it could even allow me to toast toasts.

I think if there’s one thing (a technology) that most web developers, even people who aren’t computer science people, can say at least a little bit about when they’re talking about their site, Then the thing must be Frameworks or Hosted Services (because I don’t know what those words are, but they’re not in my CS class either), and to be honest, they all sound pretty magical. I compared what they were describing to what I was doing, and I felt my own knowledge was really lacking. And they learn about the hottest technologies at code schools like DevMountain, or at the latest online courses.

Anyway, it looks like I’m old school, even though I’ve only been doing web development for about 10 years.

I just built the code with my own hands

19 years. Just as the tag was the correct way. (I… Link to the funny book that taught me HTML when I was 11)

And then what happened was, because they knew I had years of web development experience, people came to me and asked for my help. So I googled React two-way data binding and DYNAMIC variables for SCSS and all the other stuff I didn’t know, but they didn’t get the same understanding as I did, because they knew exactly when they were supposed to see the answer, But I was supposed to know nothing and just ask, “How about this?” But they couldn’t find the answer I gave them.

Because I would feel powerless with these frameworks, sooner or later I would have to start asking them, “Ah, please wait, what does this do?” Pointing to what I thought was a function call… Well, no, it’s a type definition, that’s awkward! Their answers were usually very unsatisfying (they were shallow), so I worked even harder to learn more and help them debug the app:

“But how does this part work? For example, what is it actually doing?” I asked

What I usually get is a silent stare. Almost none of them knew.

So HERE I am, it’s 2019, I’ve been writing code for nearly 20 years, and I’m surrounded by people who make 2-10 times my salary (but I’m still a student) and don’t know how to explain how their own code works. So I don’t think they actually wrote the code themselves. I don’t know how my car works, but I can still drive it every day.

But how do you build an application when you don’t know how it works?

Why would a web application that needs to display a few lists and send a few AJAX requests need a file larger than 500 MB? (Yes, I still call them that. I also call them XHR, even though XML is pretty outdated.)

Why do so many sites break my back button or scrollbar? It’s like, you have to work to make them happen.

Why does packaging a five-route web application take ten times as long as my 25,000-line Go cross-compile?

How is Papa Parse getting heavier

In 2013, I wrote a CSV parser on a flight to Disney. My browser needed a fast and accurate CSV parser, but none of the existing ones met my requirements. So I wrote one myself, and it’s Called Papa Parse, and it’s now being used by many well-known users — from the United Nations to companies and organizations everywhere, even Wikipedia — and I’m very proud of it (immodestly, Arguably the best CSV parser for JavaScript). It was a very simple library to start with, and it worked very well.

Then there was a need for it to be compatible with older browsers, so I added shims and, well, that’s fine.

Then there’s the need to use it on Node.

Next, not only the requirements, but also the feedback — it doesn’t work when

. This is a bit maddening: add support for one framework or toolchain and the rest will fail. Papa Parse went from a few hundred lines of code to thousands. That’s already a different order of magnitude. It went from one file to about a dozen. From no build to about 3 or 4 system builds and distributed packaging.

All for the rich functionality of Papa. Parse (” CSV,file”) in the browser.

I eventually gave up its maintenance and handed it over to others in the community. They did the maintenance job very well. It does far more than I can support. Before that, I was in my own little world, making very lightweight libraries of its own shape and having fun. But now, while Papa Parse is still a great library, I don’t really know what it does anymore.

(By the way, I still love Papa Parse and recommend it in case you happen to need a JavaScript CSV parser.)

How do I make my website as usual

I don’t consider myself a web designer, or even a web developer, but I do make websites when I need to (and I do it a lot – so much so that I’ve written an entire web service, Caddy, to make the process faster).

I’m not kidding, I still make websites like this:

Open up an editor and write this (handwritten, it only takes about 30 seconds — for the sake of authenticity of this article, I actually wrote it once — unless annoying tags don’t work here) :

<! DOCTYPE html> <html> <head> <title>I code stuff with my bare hands</title> <meta charset="utf-8">
  </head>
  <body>
     Hi there
  </body>
</html>
Copy the code

Then I opened a new TAB and wrote the CSS file; Code that looks like this:

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-size: 18px;
  color: # 333;} p {word-break: break-all; }Copy the code

What about JavaScript? Of course I did. However, I only used the part I understood. I have a lot to learn, especially with ES6 and a lot of new apis like FETCH, but I still use jQuery in some scenarios (emphasis on some) — it does specific tasks, like being able to manipulate multiple DOM elements very easily and directly, and it’s almost template code, I can accumulate and copy and paste from one project to another. There is no dependency hell.

Anyway, I’ve only added the JS code I need here. I occasionally add libraries based solely on native JS, such as Papa Parse for advanced, high-performance CSV parsing. (Link to the UtahJS video where I explain amazing ways to push browser performance to its limits.)

Most of the time, there are no drawbacks to traditional form requests or page navigation. I did often change form requests to AJAX requests, but nothing (none of them) required URL changes.

Then I start saving the file, run caddy in our project folder, and open the browser. I need to refresh the page every time I make a change. More than a decade later, I finally got a second screen installed, so I didn’t need to switch desktops.

JavaScript isn’t the only technology I skimp on: CSS, SVG, Markdown, and static site generators are the same. I almost never use CSS libraries. I just stick with a few hacks when CSS 3 and new features like Flexbox and Grid are not supported. But that’s all I’m saying right now. SVG is still a work in progress in terms of browser support, and Markdown… B: well… I’d rather write HTML/CSS in most cases, because at least it looks the same across all browsers.

I like the idea of static site generators, but they are often too complex. Most of the time, all I need is a piece of code embedded in my HTML file, which Caddy does with a few simple template operations: {{.Include “/includes/header. HTML “}}. (I can even deploy caddy-using sites using Git push, without the need for static site generators! Although it also supports these features)

advantage

Without fancy, general-purpose, or over-featured libraries, frameworks, and tools:

  • Site code is small
  • Easier to manage test environments
  • The debugging speed is fast, and the method to solve the problem is more universal
  • Easier service configuration (I know this, trust me)
  • Faster site loading

It also saves you several gigabytes of hard drive space!

The price

Since I don’t know React Angular Polymer Vue Ember Meteor Electron Bootstrap Docker Kubernetes Node Redux Babel Bower Bower Firebase, Laravel, Grunt, etc., I wouldn’t be able to really help my friends, or wow them with my answers, or meet the requirements of many web development jobs today.

Technically, though, I can’t do much — that’s the point! I only introduce tools when I really need them, otherwise I write my own code or copy and paste small features from Stack Overflow (I’m being honest). (Hint: Unlike YouTube or HN, read the comments on Stack Overflow.) (Know exactly what code you’re borrowing!)

Am I being less productive?

Maybe. But I don’t think so.

The results of

Here are a few sites that I built with my bare hands — trust me, if I had the resources to hire professional front-end developers, I’d hire them — but none of them have any framework, no unnecessary, cumbersome libraries of dependencies.

I didn’t even minimize page resources (other than image compression, just drag to Tinypng.com), basically because I was lazy. But you know what? Page load times are still very short.

But in my opinion, their code is most relevant to the “web application”, which is just some rough jQuery. (Rough, just because I’m busy).

Website links:

  • caddyserver.com
  • goconvey.co/
  • www.papaparse.com
  • relicabackup.com (Shame: 50% off right now!)

Each site can take me anywhere from a day to a week to complete (depending on how many pages there are and how much revenue there is). The substance will certainly take longer, but that’s all given.

Here are some of the feedback I received as a result of my “classic” route:

  • I really like the simplicity of your website design. Did you write it yourself, or did you use a template/theme?
  • Your website is an excellent example of what good website design should be. It’s fast, clean, doesn’t load a lot of junk, and almost everything works without JavaScript.
  • I wonder what framework or tools you use to build your documentation site! It’s really great, it’s really lightweight.

I’m not saying my sites are perfect — they’re far from perfect, I’m just careful to use them as case studies — but they work anyway.

A little bonus: Here’s an interesting example OF an API I made a few years ago using Vanilla HTML, CSS, and JS for my work at the time.

  • Youtube Video link

I know what each line of code means, and, including minimal jQuery (uncompressed), it all adds up to about 50KB. Obviously, another dependency (Leaflet) is used to display map blocks, but this makes sense because they are required functionality. For example, if you’re doing complex time-dependent calculations and time-rendering, there’s nothing wrong with using moment.js. I just want to avoid generic frameworks, libraries, and tools unless I really need them or understand what they do.

The development process

I got a few requests, so I wrote down the process of building the site, and this article was as good as I could think of. Maybe this article is vulgar, but my development process is really simple and hard to explain because… There’s really no process.

Beyond the bare minimum (a text editor and a local web service), my “development process” requires no special tools: no signification, no installation, and no package management. It’s just me, my text editor, my web service, and understanding the basics of how websites work.

The main points of

I’m not an expert. Web development takes years of practice to gain insight, even without fancy tools.

I believe that over time, one person will be able to acquire all the skills and knowledge needed to do the same things that cool kids do today at the same speed, but with the following advantages:

  • Greatly reduce the amount of code
  • Fewer breakdowns
  • More intuitive
  • Shorter, more efficient debug sessions
  • Higher knowledge transfer
  • More flexible, future-oriented software architecture

All this is done by consuming only what you need.

This is the cure for technical debt.

(Well, this might be more of a flu shot.)

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.