
A Short Guide to Minimal Web Development (2018) - uberswe
https://meiert.com/en/blog/minimal-web-development/
======
superfamicom
I would recommend linters (ESLint) to beginners as I use it as a long time
not-beginner to point out silly mistakes, which can be the hardest and most
frustrating to spot.

> [T]hey’re as useful to learn coding as it is to use ready-to-heat-up dough
> and buns to become a baker.

I would imagine getting a familiarity with a new oven would be a good use for
a new baker experimenting with ready to bake items.

I get the feeling the author is into a very brutal style of learning that
might resonate with some, but probably not most with their steps.

This is from 2018 and updated last in 2019, but the title didn't show that.

~~~
xmprt
I remember adding a linter to a relatively large project that I was working on
after a few months and then realizing how many errors there were that I was
surprised the project even worked in some cases (it probably didn't but I
never bothered testing those edge cases).

~~~
jrumbut
Plenty of projects that are actually fine blow up linters.

If you to want to add a linter you can either add one rule at a time or make
it part of your process that the number of warnings goes down with every
merge.

~~~
xmprt
In that project it was about 100 or so errors that were all really easy to fix
(no major refactoring required) so I just sat down and went through the list
one by one until I had 0 errors, 0 warnings. A lot of the errors were just
styling. Some were errors where the value could have been null/forgot a try-
catch block (although almost never was in practice unless I changed some code
elsewhere accidentally), and a few were so major that one of the features that
I implemented wasn't working at all but I never realized (mostly because I was
one of the few people using the app and never really tested the feature).

------
OutsmartDan
I would argue that reset style sheets or normalizers should be part of your
"minimal web dev" process, even if you roll your own version. There are so
many browser nuances that these things fix so that you don't have to hack it
later down the line.

~~~
replies-to-fool
I think the idea is for you to build your own reset as the need for each
individual feature comes up, instead of just throwing in a style sheet and not
bothering to understand it.

For example, setting the box sizing properly in order to ensure consistent
widths regardless of borders or padding.

------
umvi
I recently started a new project using only pixi + vanilla js. No frameworks.
No npm. Just pixi.min.js + vanilla js included into an html file. It's super
refreshing - the js files are tiny, the load times are _insane_ (instant),
other people can read my code without having to learn a new framework.

I am thinking about using npm to get access to linting, uglify, etc. but that
would be strictly for distribution, not development.

~~~
kaycebasques
Never heard of Pixi. What are you using it for?

[https://www.pixijs.com/](https://www.pixijs.com/)

~~~
umvi
A video game. A week ago there was a HN post on ct.js[0], and that's when I
discovered pixi.js. I suppose I could have also used phaser.js, but pixi is
more minimal and I liked the idea of developing a custom engine for my game
idea (apart from the rendering bits).

[0]
[https://news.ycombinator.com/item?id=24176655](https://news.ycombinator.com/item?id=24176655)

~~~
khalilravanna
I worked on a game for a couple of years and did the same thing. Phaser was
too clunky for my purposes and didn't seem to scale for the size of game I was
working on. I learned a ton by having to write a ton of the rendering/camera
logic that Phaser gives you for free. Highly recommend it for learning
purposes alone!

------
x87678r
As an experienced back end developer that has done a bit of ASP/JSP/PHP in the
past but really tried to avoid JS. What is the best place to start now? I
figure react is #1 but vue looks simpler. Any moocs or books worth reading
first? Or dive in and build something?

~~~
vorpalhex
Skip the frameworks, start with modern ES5/ES6, don't use babel/ts/etc
initially.

Modern JS is pretty clean and the native DOM methods are actually very
pleasant generally. You can get really far without even needing a package
manager, but eventually something like npm becomes useful if bulky.

~~~
hfourm
Further, you will then understand why you need a framework like React should
your project become complicated enough on the frontend.

~~~
bob1029
There's nothing stopping you from tracking client state in a a simple
window.state object. This object can be of arbitrary composition, so I see no
reason you cannot manage even the most complex UI state in this manner.

For me, minimal web development means doing as much as I can at the server.
This includes tracking client UI state if feasible. The more stuff you have in
1 domain like that the easier it becomes to control complexity.

When your state machine is split between 2 realms is when you get into traps
that things like React were created to resolve.

~~~
twicetwice
I agree that if you have state in two places you're doing it wrong. That's why
I keep all my state _client_ -side (the only thing in session storage is your
user ID if logged in). My server is basically just a thin wrapper around my
database, providing an API for my client to call.

------
untog
I'm sorry, but any guide that suggests you start by reading the entire specs
for HTML, CSS and JS is just not realistic.

The guide gets it right in the "practise" part, though: the beauty of the web
is that you can write an HTML file and immediately see what you created in the
browser. You don't need to read the HTML spec's instructions on Microdata
before you do that.

~~~
jrochkind1
Few people have probably read those specs cover-to-cover with full attention.

But never opening them is a mistake. The value of taking a look, skimming
around, reading a few parts that seem interesting to you, is HUGE compared to
never even having looked in there. And then continuing to do so when a
curiosity arises.

------
blaufast
This article is pure poison. Ideological purity is a problem in every facet of
human life, and engineering doesn’t have to be so painful. The computer should
work for the human.

~~~
gcpwnd
Just two more generations and writing vanilla js/css is an elitist skill for
ancient blue whales.

------
ellinoora
I think this is a great counter-argument to the current state of the frontend
development ecosystem, which is far from minimal. The article might be too
extreme, but I would love to see more minimalism on the general approach to
things.

------
type0
Strange no one has yet mentioned Resilient Web Design Book
[https://resilientwebdesign.com/](https://resilientwebdesign.com/)

Besides those principles I find Pug to be indispensable for writing "pythonic"
style HTML [https://pugjs.org](https://pugjs.org)

You can rearrange the structure easily by "moving" lines of code up or down in
your editor, you can set it to auto-compile on saving, just awesome.

------
bitxbit
As someone who developed web applications appx 20 years ago and back doing it
for a few personal projects in the past couple of years, I am a bit
disappointed in the progress that’s been made in the web development space.

Edit: specifically front end.

~~~
rimliu
As someone who did the same for the same amount of time: it could not be
farther from true.

------
z3t4
Static site generators are great if you do plain/vanilla static HTML sites.
Server-side-include only gets you so far, a static site generator give you
much more freedom and it can do _a lot_ more work for you.

------
ponderingfish
What is someone is trying to build a blog? I think the most minimal web
development for building a blog comes from Static Site Generators that the
author is suggesting to avoid.

You can't get more minimal than Hugo, Jekyll when trying to build a blog. My
blog is fully functional and apart from Google Analytics, it doesn't use any
JS at all.

~~~
cxr
> You can't get more minimal than Hugo, Jekyll when trying to build a blog.

Untrue.

> My blog [...] doesn't use any JS at all.

Now suppose there were JS used on some page(s), and that _is_ the static site
generator...

------
petecorreia
This isn't minimal, it's primitive. Knowing the difference is key.

------
rK5Q58
Stopped reading at "Did you know? Not blocking ads helps content
creators[...]" How are you gonna advocate for a minimal web when you're so
oblivious to adtech current year?

------
redmagic
This webpage which is a guide to hand coding things appears to not have a
closing </head>, </body>, or </html> tag.

~~~
detaro
That is completely valid HTML5.

[https://html5.validator.nu/?doc=https%3A%2F%2Fmeiert.com%2Fe...](https://html5.validator.nu/?doc=https%3A%2F%2Fmeiert.com%2Fen%2Fblog%2Fminimal-
web-development%2F)

~~~
cringepirate
That maybe but it differs from what is shown in the inspector (which shows the
<head> and <body> tags). This could be confusing as the source html doesn't
match how the browser interprets it.

~~~
giantrobot
Web inspectors are showing a representation of the DOM, they are not showing
the raw source. Netscape and IE used to have "Show Source" functions that
literally showed just the page source.

Inspectors will do things like display colors as their RGB triples i.e. rgb(x,
y, z) in computed styles when a color has been defined in the HTML like in a
body tag or table cell's bgcolor attribute.

~~~
recursive
All browsers still have show source. It's just not usually that useful
anymore.

------
PretzelFisch
small gripe, vanilla is a flavor. Please use plain javascript.

------
_def
A terminal client is recommended... Yeah let me just pitch that to my client--
nope, that gig is gone now.

------
fcatus
Should be: "A short Guide to Hippie Web Development"

------
bob29
"Minimal Web development" now theres an oxymoron, "Efficient Waste of TIme.
Look into Gemini its much better.

