10 Web Development Fundamentals you should know

New web developers often try to learn everything at once without mastering any one skill. But before you learn the latest JavaScript framework, make sure you know the fundamentals of HTML, CSS and every little thing first to last.

1. JavaScript Data Types

Programming languages all have built-in data types and data structures, but these often differ from one language to another. When you are learning JavaScript you must have the idea about these things. They are :

a. Dynamic typing

JavaScript is a loosely typed and dynamic language.

b. Data and Structure types

The latest ECMAScript standard defines nine types.

c. Primitive Values

All types except objects define immutable values (that is, values which can’t be changed). For example : Boolean type, null type, undefined type, number type, BigInt type, string type, symbol type.

d. Objects

An object is a value in memory which is possibly referenced by an

e. Properties

Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values.

2. Event Loop in JavaScript

The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading.

The event loop works by making a request to some internal or external “event provider” (that generally blocks the request until an event has arrived), then calls the relevant event handler (“dispatches the event”).

3. Error handling — try catch

No matter how great we are at programming, sometimes our scripts have errors. They may occur because of our mistakes, an unexpected user input, an erroneous server response, and for a thousand other reasons. It works like this :

4. Coding style

Coding style is important. Specially when it comes to things like indenting and whitespace. Code should be easily readable by a person, since it is a person that has to maintain that code later. Things you should know to understand the code better are : Curly braces, line length, indents, semicolon, nesting levels, function placement, automated linters.

5. Code Quality and comments

When you try to understand the code good comments are very important. As we know from the chapter code structure, comments can be single-line: starting with //and multiline: /* … */. We normally use them to describe how and why the code works. At first sight, commenting might be obvious, but novices in programming often use them wrongly.

6. Balancing Client And Server Caching in Web Application Development

To understand the web application development better, balancing the client and server caching are most important.

a. Caching

In the most simple terms, caching is a general computer concept that provides efficiency through data availability. The mechanism by which this is accomplished is through the storage of commonly accessed data in several places, and then serving that data to requesters from the common data store. This is opposed to generating new content each time it is requested.

b. Data Cost

Data cost is simply the idea that every operation, every function, every aspect of what we do with an API results in some sort of cost. This cost can arise from a variety of factors and systems, both originating from the server and the client, but ultimately, every data bit has a cost associated with its generation, transfer, and storage.

c. Client Caching

Client caches help limit the data cost incurred by the user by keeping commonly referenced data locally. The client often requests data that may not be large but is indeed continuously needed.

d. Server Caching

Server caching helps limit the cost incurred by the server and its underlying systems. Many requests made by clients can either be responded to using the same data, or responded to using parts of the same requests made by others.

e. Hybrid Caching

Hybrid cache architecture replacing SRAM cache with future memory technology. As heterogeneous memory dies are stacked, it improves the performance of microprocessor enhanced in terms of power consumption and processing speed.

f. Local Caching

Since the application has a process that allows users to change and manage their local contact database, a locally cached version of the contact database is kept. This allows for changes to be reverted, and enables restoration of the local copy to previous versions.

g. Server Caching

Synchronizing its current database with a local cache, the data source can ensure the ability to revise while also feeding new data seamlessly to applications as they request it without pinging the main server.

7. Cross browser testing

Cross browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers. As a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using.

Workflows for cross browser testing are:

a. Initial planning

You might be building an e-commerce site that serves customers in England. The site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.

b. Development

You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.

c. Testing/Discovery

  1. Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.
  2. Do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
  3. Test on a mobile platform, such as Android or iOS.

d. Fixes/iteration

The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists. Then report the bugs.

8. ES6 — A must thing to learn

In JavaScript, variable declare is an important factor. In variable declaration, it depends on which methods you will declare variable and where it will be. ES6 provides a new way to declare, so that you can more easily control the scope of variables. They are :

a. Var Declarations and Hoisting

Example :

b. Block level declaration with let and const

c. Block bindings in loop

d. Block level functions and parameter

9. Functions with Default Parameter Values

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

10. The Spread Operator

Spread syntax (…) allows an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

The Conclusion

So, these are deep fundamentals when you are in the journey to learn the web development. Hope you liked it.

Thanks for reading!

References :

  1. https://developer.mozilla.org/
  2. https://javascript.info/
  3. https://nordicapis.com/

Information Science Major • Focusing on my interests • Project : Quarantine coding • INTP-T