How to get started with Web Development

I am very happy with the result of the new web page. This website was made with TailwindCSS and Next.js (a framework for React). Tailwind offers a great variety of pre-made components and templates. Have a look on tailwindui.com and tailwindcss.com.

I usually use Vue3 for my projects, but Tailwind offered this great template based on Next.js, so, I gave it a try - and this is the result.

My tip for anyone who wants to start web development: if you learn one framework, you basically know them all. The basic concepts are easily transferable. I started with Vue3 and then had a project in Angular. I was able to pick up work really quickly. Obviously, you'll have to read up on the documentation for most of the function names, but there is always a router, a store, a component system, computed properties, templates, etc. There is also a huge demand for people who develop x86-Assembly, C++, C#, Kotlin, Haskell and even COBOL (published in 1959). Most approaches somehow integrate web technologies, e.g. JetBrains IDEs have a NodeJS server running.

A huge trend is to use web technologies for desktop applications, called Progressive Web Apps (PWA). For example, Discord is such a PWA. The advantages are very clear: development only takes place once, you pack it as a Windows, Mac or Linux app (of course there is a bit more to it, but you get the idea) or serve it via a web server. Imagine if you had to develop a native Windows, Mac and Linux app... It would take a lot more time. ELECTRON is a great framework to let your web app run across platforms.

Another tip: there is not only front end, but also back end. There is great demand for web apps at the moment. Still, every front end needs a back end, which implements the whole business logic. The back end need not be written in JavaScript. Scala is a promising language and even used by Twitter! It is important to build parallelisable applications, because CPU clock speeds are not increasing exponentially anymore. Therefore, you need to scale to more cores. Scala supports parallelisation well. Admittedly, NodeJS does that too - still, one may have reservations regarding this, but that's an article for the future.

But what about efficiency? From my experience, it is not a big issue in most constellations. You'll have to guess which users will use your application and optimise for them. In a commercial environment you'll have a pretty good idea of your target group. However, imagine a broke college student trying to run 4 different Chromium based PWAs on his 2015 MacBook Air. They'll need a fire extinguisher.

You get the idea. Some even argue that JavaScript should not have been invented. Brendan Eich, the creator of JavaScript, even tweeted this statement himself. I think it is a bit exaggerated, but I do agree that JavaScript is not the best language for everything. I honestly could not imagine a modern web app without dynamic content. Google's V8 engine even enabled server side development with JavaScript and Microsoft introduced TypeScript which gets compiled to plain JavaScript (ECMAScript 3 or 5).

You can still do some funny things with JavaScript. What do you think this might produce?

console.log(('b' + 'a' + + 'a' + 'a').toLowerCase())

If you guessed "banana", you are correct. But why?

+'12'
// 12

+'f'
// NaN

Usually, a + either concatenates two strings or adds two number. In this case it tries to coerce a string to a number and fails as 'f' may not be converted to a number (at least JavaScript will not do so). So, we could even change the third 'a' to an arbitrary character. The result is a NaN, which is not a string, but a special kind of number. JavaScript implements the behaviour specified in IEEE 754 (floating point numbers).

This will therefore also produce the same output, "banana".

('b' + 'a' + + 'f' + 'a').toLowerCase()

When you then concatenate a string with a NaN, JavaScript will convert the number NaN to it's string representation "NaN". The other +-operators are all string concatenations. Lastly, we convert the whole string 'to lower case', so all capitals are converted to lower case.

Now, if you are convinced that JavaScript is a bad language, stop right there. The huge platform compatibility alone is a key argument in favour of JavaScript. Every mobile phone, computer, tablet on earth has a browser and can therefore run your app (only if you use a compiler that enables support for the platforms you need, e.g. babel). It's almost like Java, only that it's much easier to distribute to many devices, as the programs must not be installed.

Lastly, try to use frameworks that take work off your shoulders. At first, it might seem like it's a lot more work to code within the requirements of a framework, but you'll get over that impression quickly. Vue3 and TailwindCSS are great examples. You get stunning results with minimal effort. Also, have a look at MongoDB and other NoSQL databases. Given the right stack (e.g. NodeJS and MongoDB in the Backend and JavaScript in the frontend) you get many advantages. MongoDB allows you to store documents, which you can think of as JSON objects. Those can be directly passed on to the client. So, you don't have to switch between different representations of the same data.

Further resources (which I learnt by / use myself):