software engineering Archives - SoftUni Global

All The New JavaScript Features Coming Up with ECMAScript 2022

Nikol Ruseva — Thu, 25 Aug 2022 08:48:25 +0000

The thirteenth edition of ECMAScript Language specification was officially approved on June 22, 2022. With its release, new features were added to the JavaScript language:

Method .at();
Object.hasOwn();
RegExp: match indices(‘d’ flag);
Error: .cause;
New members of Classes;
Private Slot Checks;
Top-level Await.

Now let’s find out more about each new feature.

Method .at()

The method .at() is supported by indexable values like Array, String, or TypedArray. It takes a positive or negative integer value and returns the element at the given index.

In this example, there is an array with three elements, which means that its length is 3. The first element is at index 0 and the last is at index array length -1 (in this example at index 2).

To check what the element at a certain index is, use the bracket operator (animals[0]). For indexes out of the range, the program returns “Undefined“.

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals[0]);
console.log(animals[animals.length - 1]) 
console.log(animals[animals.length])

//Cat
//Cow
//undefined

The new feature works exactly like the bracket operator but it allows negative indexing of elements. The last element is accessed easily by replacing animals[animals.length – 1] with animals.at(-1)

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals.at(0));
console.log(animals.at(-1));

//Cat
//Cow

				
					//Example with a String
let string = "Hello, World!";

console.log(string.at(-1));

//!

Object: .hasOwn()

Object.hasOwn() returns true if the specified object has the indicated property as its own property. If the property is inherited or does not exist, the method returns false.

Object.hasOwn() is intended as a replacement of Object.hasOwnProperty()

Before:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(user.hasOwnProperty('role'));
console.log(user.hasOwnProperty('age'));

//true
//false

After:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(Object.hasOwn(user, 'role'));
console.log(Object.hasOwn(user, 'age'));

//true
//false

RegExp: match indices(‘d’ flag)

ECMA Script 2022 introduced a new /d flag for Regular Expressions. It provides some additional information about the start and indices position end of each match in the input string.

Without the new feature the following information has been provided:

				
					let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
console.log(result[0]);
//[ 'hello1', '1', index: 0, input: 'hello1helloAll', groups: undefined ]

let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
let regEx2 = /hello(\w)/dg;
let result2 = [...string.matchAll(regEx2)];
console.log(result2[0]);

With the /d flag there is an array with the indices of the different elements that match the regex:

				
					[
  'hello1',
  '1',
  index: 0,
  input: 'hello1helloAll',
  groups: undefined,
  indices: [ [ 0, 6 ], [ 5, 6 ], groups: undefined ]
]

Error: .cause

With the Error .cause, you can add more essential information to the errors you receive. You should specify the error options as a second parameter, and with the “cause“ key you can pass the error that you want to chain.

Before:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong')
    }
  }
 
try {
    await weatherNow('');           //Empty string
} catch(error) {
    console.log(error);
}

//Error: Something went wrong
    //at weatherNow (<anonymous>:8:7)
    //at async <anonymous>:13:5

After:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong', { cause: error })
    }
  }
 
try {
    await weatherNow('');        //Empty String
} catch(error) {
    console.log(error.cause);
}

//TypeError: Cannot read properties of undefined (reading '0')
    //at weatherNow (<anonymous>:5:39)
    //at async <anonymous>:13:5

New Members of Classes

Static class fields and methods are not used on instances of a class. Instead, they can be called on the class itself and are declared using the static keyword. Static methods are often utility functions and helpers, whereas static properties are useful for caches, fixed-configuration, or any other data we do not need to be replicated across instances.

Before:

				
					class User {
    firstName = 'Jon';
};
  
console.log(User.firstName); 
  
//undefined

After:

				
					class User {
    static firstName = 'Jon';
};

console.log(User.firstName); 
  
//Jon

Private Slot Checks

EcmaScript 2022 added new features such as private instance fields, methods, and accessors. To initialize a private method or a field before you had to add an underscore at the beginning of its name, but this did not guarantee that the method/field will be private. Now, you just need to add a # at the beginning of the method name to have it declared as private.

It looks like this:

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    #role = 'Admin';
}
 
const adminUser = new User();
console.log(adminUser.role); 
  
//undefined

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    role = 'Admin';
    #sayHi() {
        return this.firstName + ' ' + this.lastName + ' with role ' + this.role + ' says Hi!';
    }
}
 
  const adminUser = new User();
  console.log(adminUser.sayHi());      
  
//TypeError: adminUser.sayHi is not a function

Top-level Await

Before ECMAScript 2022 await could only be used in the scope of asynchronous functions. Now the await keyword can be used outside of an async function within a JavaScript module. This means that a module waits for its child modules that use await to execute before it runs itself.

				
					const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=london&appid=67a20d293903cbcf9aab38633b30fbf9`);
const info = await response.json();
const description = info.weather[0].description;
console.log(description);

We will receive an error:

				
					SyntaxError: await is only validin async functions and the top-level bodies of modules

With ECMAScript 2022 it works fine and you will see the following:

				
					//clear sky

Conclusion

Nowadays when technology is rapidly evolving being up to date is an important part of working as a software developer.

The EcmaScript specification for 2022 contains some significant changes that aim to provide convenience and efficiency in programming by allowing you to write more expressive and concise code. After reading this post, you are now familiar with all of the new features and it is up to you to choose which of them to use into your JavaScript programming.

The post All The New JavaScript Features Coming Up with ECMAScript 2022 appeared first on SoftUni Global.

Cybersecurity Expert On Phishing, Cyber Hygiene, And Device Safety [Dev Talks #4]

Nikol Ruseva — Fri, 19 Aug 2022 13:05:33 +0000

Let us introduce you to Lyubomir Tulev. He is a cybercrime expert who has been working internationally for more than 10 years on cybercrime investigations in countries like New Zealand, Russia and many others across Europe. In 2015 he was recognized by the Federal Bureau of Investigation (FBI) as one of the top 10 international cybercrime experts. He is in the private sector now and his work involves penetration testing, social engineering, consultancy and cyber forensics. He is also a trainer for Information Security Management course at SoftUni. Lyubomir shared more about his professional motivation as well as practical tips that will help you protect yourself and your devices from cyber attacks.

Helping And Protecting People Has Always Been His Driving Force

“The fact that I have been involved in the police structure for seven years means that I have been first inspired to help and protect people.”

After 7 years on the force, he decided move to the private sector in search of career growth. The inspiration behind this move was a friend. Lyubomir still helps people but his main focus is on companies in need of strengthening their cyber security.

Basic Measures Against Cyber Attacks

“The Coronavirus pandemic has spread across the globe and the one positive thing about this is the opportunity to rediscover the methods of transformation of our digital lives. On the other side, it possesses many obstacles coming from the hackers.”, says Lyubomir.

He explains that now, when people are spending more time at their homes working remotely, hackers are more likely to attack their devices and business. In order to protect from potential cyber attacks, people have to take basic measures like:

Securing the Wi-Fi connection and monitoring the connected devices;
Using VPN to access business infrastructure;
Securing the endpoint device – laptops, tablets, mobile phones;
Being aware of phishing emails and other possible cyber attacks.

“In cyber security, there is a saying that the employees are actually the weakest possible link in the security chain within an organization. I don’t really think so. My idea is that we have to look at the emloyees as a firewall.”, says Lyubomir

According to him, raising awareness among employees about cyber security is important for business because if they are well educated on the topic, they can become a ‘human firewall‘ that protects the company from within.

How To Recognize A Phishing Email

“Usually, the phishing emails are giving a sense of urgency. This is because hackers do not want you to have enough time to think about it carefully.”

He explains that there are three types of phishing emails depending on their content:

With attachments;
With a phish link;
With a text that requires you to send valuable information.

“Usually, the phishing emails are giving a sense of urgency. This is because hackers do not want you to have enough time to think about it carefully.”

He explains that there are three types of phishing emails depending on their content:

With attachments;
With a phish link;
With a text that requires you to send valuable information.

If you receive an email with an attachment, Tulev advises to download it, check it with some publicly available software for virus scanning, and then finally open it.

If there is a link that you are instructed to follow, do not click on it, instead hover the mouse over it. In the bottom left corner of the browser you will see the address this link will take you, and compare if the destination matches the one stated in the email.

The last possible scenario is receiving a malicious email with just text. In this case, open the email header and check – if you reply, does it go back to the same address it says it came from? If there is a third party listed there, this email is probably phishing.

Common Types Of Cyber Attacks

“If we are talking about businesses, the most common cyber attack is the ransomware. It is vast majority of cases that we are dealing with.”, shares Lyubomir.

The ransomware encrypts all available files on the attacked device. The hacker then wants a certain amount of money to decrypt the files. However, there is no guarantee that they will do it after you pay the ransom. This is why having a backup stored remotely is so important.

He adds that, “Other cyber attacks that happen to businesses and people are usually related to their credentials. Be very careful with your passwords. They are an object of many types of attacks like credential harvesting, password spraying, and brute forcing.

We, as cyber security professionals, always have to think about three elements of the information: confidentiality, integrity, availability.”

Lyubomir further explains what this means:

Confidentiality – to protect the data at any stage, make a remote backup, and set up access control;
Integrity – to not let a hacker modify the information and to protect the backend to avoid SQL injections;
Availability – to make sure the data is available when needed and use cloud storage.

To Be Aware Is To Be Protected

Lyubomir stresses: “Be aware what the attackers may use in order to take advantage of you. Train your people and yourself on what attack vectors are and how to recognize them in order to protect yourselves better.”

He adds that there are more examples of social engineering attack vectors like USB flash drives, smishing (SMS), and vishing (voice-using frauds).

How To Become A Cybersecurity Expert

Lyubomir has some advice for everyone interested in becoming a cybersecurity specialist: “When you put a lot of effort to improve yourself in one specific field of cyber security, you will become an expert only in this field, not in the cyber security generally. If you want to become an expert on cyber security you have to put a lot of effort in different fields like cyber forensics, penetration testing and consultancy.”.

“Businesses are now thinking more and more about digitalizing. This means that they will need the consultancy of cyber security experts. So, yes, I definitely foresee that the demand of cyber securty professionals will grow in the next couple of years.”, says Lyubomir.

The post Cybersecurity Expert On Phishing, Cyber Hygiene, And Device Safety [Dev Talks #4] appeared first on SoftUni Global.

Java or Kotlin – What Is Better for Android Development?

Nikol Ruseva — Fri, 29 Jul 2022 14:24:52 +0000

When it comes to Android development, two of the most popular programming languages are Java and Kotlin. While Kotlin, which was released in 2011, is still being developed, Java has been around since 1995 and is open source, making it one of the most widely used languages. However, Kotlin has been taking off since 2017 when Google included it as an official Android development language along with Java.

If you’re new to Android development, the question of whether to use Kotlin or Java will probably not be on your mind at first. You will most likely opt to use Java until you become more familiar with the platform and decide what language would better suit your needs. But once you start becoming more confident with your Android development skills, choosing between Kotlin and Java will be a bit more difficult as both languages have some advantages and drawbacks, which we will examine in this article.

Java

Java is a versatile and powerful programming language that can be used for a wide range of purposes. It is platform-independent and object-oriented. Platform independency is possible since the language uses byte-code and once compiled, the code can be run on any machine irrespective of its operating system. Also, using the principles of object-oriented programming increases the flexibility and reusability of the code.

Java does not use explicit pointers. This means that developers can not access the memory directly from the code. Also, programs are executed inside the Java Virtual Machine (JVM), providing additional security to the code. If an unauthorized method tries to access a private variable, the program fails to compile and prevents the system from a crash.

Java is widely used and has a large community of developers who are continuously creating new libraries and tools to make development easier. Moreover, Android Studio, the official IDE for Android development, is based on JetBrains’ IntelliJ IDEA, which also supports Java development.

Kotlin

Kotlin is a new language developed by JetBrains. It is a statically typed programming language. Just like Java, it uses byte-code which can be executed on the JVM. It can also be compiled into JavaScript. It has intuitive, easy-to-learn syntax.

Kotlin is compatible with Java and can be used alongside existing Java code. In fact, its purpose is to interoperate with code written in Java and improve it while using Java libraries and frameworks. This leads to reducing the boilerplate code, making it simpler, easier to read and understand, and safer in terms of potential bugs. Moreover, you can write Gradle code in Kotlin, allowing you to build iOS applications.

Kotlin is concise and expressive, meaning that you can write less code to accomplish the same task. This can lead to fewer errors and a faster development process overall. An example of reducing the boilerplate code is using the Data Classes.
You can see a side-by-side comparison of code written in Java and in Kotlin on the graphic below.

Kotlin has null safety built-in, which eliminates the risk of NullPointerException (NPE) errors since it fails to compile whenever an NPE may be thrown. It also supports higher-order functions, lambda expressions, and operator overloading, making the language a combination of functional and procedural programming.

Although it is a new language, it is gaining a lot of popularity in the development community. However, there are still some drawbacks to using Kotlin for Android development. The language is not yet as widely adopted as Java. This means that the learning resources are limited. Also, the community of Kotlin users is smaller so finding help and support, or experienced developers for your business may be more difficult.

Conclusion

Kotlin and Java are both great options for Android development. They each have their own strengths and weaknesses that should be considered. Kotlin is a younger language, but it has many features that make it a great choice for developers. However, the concepts of Android SDK are based on Java so learning the basics might be useful. Moreover, it is still the most popular language for Android development and additional knowledge would definitely will be an advantage to you.

The answer to the question “Java or Kotlin?” depends on your preferences and what you are looking for in a programming language. One thing is certain – learning both will benefit you by expanding your tech stack and improving your coding abilities.

The post Java or Kotlin – What Is Better for Android Development? appeared first on SoftUni Global.

How to Build and Use Problem-solving Skills [Dev Concepts #41]

Nikol Ruseva — Fri, 22 Jul 2022 13:32:30 +0000

To become a skilful developer means not only being familiar with a programming language or software but also having a set of skills that are fundamental to the software development process. These skills can be classified into four groups :

Coding skills;
Algorithmic thinking and problem solving skills;
Fundamental software development concepts;
Programming languages and software technologies.

Technical Skills

The skill of coding is knowledge of the basic concepts of programming. They are universal and once learned, can be applied in many programming languages. The programming language does not matter to the ability to code.

You need to know how to:

Use development environments (the so-called IDEs) and developer tools;
Work with variables and data, calculations, conditional statements, loops and data structures;
Use functions, methods, classes and objects, programming APIs and libraries;
Troubleshoot and debug code.

Now that you are familiar with the foundations of programming, you need to put that knowledge together and plan every step of finding a solution to a problem. This will require your algorithmic thinking and problem-solving skills.

Algorithmic thinking is the ability to break a problem into a logical sequence of steps (called “algorithm”), to find a solution for every step (or break it further into sub-steps) and then assemble these steps into a working solution.

Algorithmic thinking is similar to logical, engineering, mathematical, abstract, and problem solving. All these concepts are related to the ability to solve problems: to think logically, analyse the problems, and find and implement solutions. Problem solving is a more general skill, while algorithmic thinking is a more technical.

The fundamental computer science and software development concepts include many programming paradigms, essential software development knowledge and skills, and software engineering principles and concepts that developers typically acquire as they gain experience over time.

Some of these knowledge areas and concepts are:

Object-oriented programming (OOP);
Functional programming (FP);
Asynchronous programming ;
Relational and non-relational databases;
The concepts behind the Web technologies.

To implement your knowledge you need to be familiar with programming languages, software development technologies, software platforms, software libraries, development frameworks and developer tools.

On the graphic below you can see an example technology stack for a Java developer.

Technologies are ever-changing and evolving, but these four groups of skills described above represent essential and stable knowledge since they will not change significantly over time. In fact, technologies are highly dependent on these skills.

Soft Skills

Soft skills are as important as the ones described above. They include the ability to communicate with people and work in a team which is essential since you as a developer will work on projects with your colleagues. You need to manage your time effectively, to be empathetic, adaptable and creative. Having attention to detail will increase your productivity at work and reduce the chances of error.

Tech Problem Solving

In the IT industry, a tech problem is often an assignment to design and implement a set of functionality which has certain input data and program state and produces output data and program state.

Every tech problem has a goal. In programming, the goals are to design and write a working code, build an app or software system, which corresponds to the assignment and implement its requirements and functionality. Developers may encounter certain technical difficulties or limitations in designing and implementing the required functionality, like lack of resources, experience or knowledge. The process of problem solving includes finding a way to overcome these difficulties. This can be, for example, learning a new programming language, software library or framework.

Stages of Problem Solving

How to approach a tech problem?
You can see in the graphic below seven stages of resolving a problem.

First of all, you need to define the problem. This involves gathering the requirements of the assignment.

After that, you analyse them. Here you should think about constraints, objects, processes and potential obstacles related to the problem. Based on a deeper understanding of the problem, you can extract the important information from the requirements and discard the non-important information, and explore its properties, which will be useful for building a solution.

The next step is to identify several solutions. You try to generate and explore different ideas and technical approaches on how to build a well-working solution. Then you analyse these ideas, their correctness, their strengths and weaknesses, their practical applicability and the costs of their implementation.

After you have gathered some ideas you need to choose one of them. This is a decision-making process and depends mainly on the requirements, your capabilities and available resources.

After that, you need to plan and describe your actions for executing the chosen solution. You plan your algorithm. Technically, this means to write the definition of several functions, methods or classes, which will implement the chosen idea.

Sometimes planning of the algorithm is done together with its implementation, and there is no clear separation between the stages of algorithm design and algorithm implementation.

Once you have a clearly defined algorithm, you implement it. This means writing code to execute the planned steps. In software development, the implementation process includes also testing and debugging.

The last stage of problem solving is to review the results or test the solution with different input data and conditions. For software problems and apps, you need to perform testing of the code, feature by feature: to check for usual and unusual input data and conditions, check for edge cases and special cases.

Tips for Solving Problems

When it comes to solving a tech problem, the first and foremost important thing is understanding it. Take your time to read and analyse it thoroughly. Do not start to code immediately, because if you have not read the problem carefully, there is a chance of making hasty assumptions about the requirements.

Use a sheet of paper or other visualization tools. This will help you sketch your ideas fast and will improve your logical thinking. Squared paper is preferable. It works best for algorithmic problems. It helps build drawings, diagrams, tables and coordinate systems.

Write down the given input and the required output.
For example, if your task is to find all odd numbers of a given array ask yourself some questions:

What do I have? → An array and odd numbers.
What is an array and how does it work? What is an odd number? What data type should I use to store it? → These questions will help you understand the problem.
What is the end goal? → To filter odd numbers in the array and return it.
How can I do it? → You may have multiple answers to this question and they are your potential solutions. Write them down, compare their advantages and disadvantages and then choose one of them.

After you implement the code test and debug it if needed. Make sure that you have covered all cases. Then look back and try to optimize and simplify your code making it easier to understand.

Lesson Topics

In this tutorial, we cover the following topics:

Technical Skills;
Soft Skills;
Definition of a Tech Problem;
Stages of Problem Solving;
Tips for Solving Problems.

Lesson Slides

The post How to Build and Use Problem-solving Skills [Dev Concepts #41] appeared first on SoftUni Global.

What is a Uniform Resource Locator (URL)? [Dev Concepts #40]

Nikol Ruseva — Wed, 13 Jul 2022 14:03:00 +0000

Uniform Resource Locator (URL) identifiers are unique addresses on the Internet. A URL is a specific type of Uniform Resource Identifier (URI). It is used to reference Web pages and identify and transfer documents on the Web by providing an abstract identification of the resource’s location. This is why it is also known as a web address.

Structure of a URL

A URL is what you type in the browser address bar to request a specific resource. You can see the parts it consists of in the graphic below.

The first part of a URL specifies the protocol that the browser must follow to talk to the server. The protocol is used to access remote resources, such as files, documents, and streaming media. It can be http, https, ftp, sftp, or other. Usually, for webpages is used HTTP and HTTPS.

After the protocol is the host. The host is usually a domain name, but an IP address can also be used. It indicates the web server that you request resources from.

The third part of the URL is the port This is an integer in the range of [0…65535] that comes from the underlying TCP protocol, which operates with port numbers. The port is a virtual point through which network communication happens. It can be omitted if the server uses default ports of the HTTP protocol which are 80 for HTTP and 443 for HTTPS.

The host and the port define the endpoint for establishing the connection with the server.

The next part of the URL is the path. It specifies the location of the web page, file, or other resources to which the user wishes to gain access. If you want to request a file from the Web server, this will be the full path to the file, relative to the server root folder.

After the path follows the query string, which is optional. It is separated from the path by a question mark symbol. It holds parameters passed in the URL which are separated from each other by an ampersand symbol.

The fragment is the last optional part of the URL. It follows after the “hash” symbol. For example, the URL can end with “#slides“, which instructs the Web browser to scroll to the section “slides” in the loaded HTML document. The fragment is never sent to the server with the request.

A rarely used URL format can also include authentication data, sent through the “Authorization” HTTP header. For example http://username:password@example.com/

Query String

The query string is an optional part of the URL. It contains data that is not part of the path structure.

For example, let’s look at this URL:

http://example.com/path/to/page?name=tom&color=purple

The query string is ?name=tom&color=purple

The query string is commonly used in searches and dynamic pages. It consists of name=value pairs separated by an ampersand delimiter. Names and values that hold special characters are URL-encoded.

For example https://nakov.com/?s=Svetlin%20Nakov

URL Encoding

Sometimes the query string parameters need to hold special characters like the “=” symbol or the “?” symbol. To maintain this, the query string needs character escaping, which means that some special characters are replaced by sequences of other characters. This is called “URL encoding“. URLs are encoded according to RFC 1738 standard, which describes the URLs). Normal URL characters (such as digits and Latin letters) have no special meaning in the URLs and are not encoded. Reserved URL characters have a special meaning and are encoded in order to be part of the URL without breaking it. This is done with the so-called “percent encoding“, which uses the “%” symbol plus the hex code of the character in its UTF-8 representation. You can see some examples of URL escape codes in the graphic above.

Lesson Topics

In this tutorial, we cover the following topics:

What is URL;
Structure of a URL;
Query Strings;
URL Encoding.

Lesson Slides

The post What is a Uniform Resource Locator (URL)? [Dev Concepts #40] appeared first on SoftUni Global.

Everything You Need To Know About HTTP Protocol [Dev Concepts #39]

Nikol Ruseva — Fri, 08 Jul 2022 10:37:30 +0000

The Hypertext Transfer Protocol (HTTP) is the standard protocol used to transmit data across the web. It is originally created to transfer HTML, CSS, images and other Web resources within the global distributed information system called the “World Wide Web” (or just Web). Later, HTTP is extended to a general-purpose client-server protocol for the Internet and is widely used for transferring almost anything: text, images, documents, audio and video and more.

What is a protocol?

A communication protocol is a set of rules, which define how two or more parties are talking to each other. It is like a common language used for communication between machines.

HTTP is a text-based client-server protocol. Client-server defines the parties communicating with each other: the client – software that reads and visualizes the data from the server, and the server – software that stores the data and provides it upon request in the form of an HTML document.

The HTTP protocol uses the request-response model. It means that a site or a resource will not be open unless the client has asked for it. Therefore, the client has to send a request for a given data and the server will return a response containing the required data.

The HTTP protocol relies on unique resource locators (URLs), like “https, column, slash, slash, softuni dot org”. When a resource is downloaded from the Web server, it comes with metadata (such as content type and encoding), which helps in visualizing the resource correctly.

Moreover, the HTTP protocol is stateless. Each HTTP request is independent from the others. Stateful HTTP conversations can be implemented by extra effort, using cookies, custom header fields, Web storage or other techniques.

HTTP Request Structure

Let’s see the structure of an actual request.

HTTP requests have a line, headers, a new line (CR + LF) after that, and a body at the end.

The HTTP request line is the command you send to the server to indicate what resource you want to get or process. It consists of:

Request method (in our example “GET”);
Request-URL (this is the resource path);
HTTP version string.

Web browsers use URLs, but HTTP uses URIs to address the resources.

URL stands for “uniform resource locator” and it describes a full unique address for a resource on the Internet, which consists of protocol + host + resource path, like in the example above
URI stands for “uniform resource identifier” and it holds a full or relative unique path to a resource, for example “/about“.

When you request a resource over HTTP, you specify the relative URI of the resource in the request line and you specify the host name in the request headers. Both relative URI and host name come from the URL you want to access.

After the request line, the HTTP request headers are given. Headers specify specific parameters about the requested resource:

“Host” is an important header, holding the requested resource. If we have several Web sites on the same Web server (for example softuni.org and learn.softuni.org), this “Host” header will tell the server which website to access.
The other headers specify settings like what kind of content the client can accept and understands (for example only HTML or any content), what is the preferred language the client wants to use, what kind of compression the client understands (for example gzip and deflate), what are the client Web browser’s brand and version (encoded as the so-called “user agent” identifier) and other parameters.
The headers section in the HTTP request ends by an empty line (CR + LF twice).

After the request headers, comes the request body.

It can hold anything, for example, URL-encoded data or JSON objects or binary data.
In the given example the body is empty, which is typical for HTTP GET requests.

HTTP Request Methods

The HTTP request method defines what action will be performed on the identified resource. The most commonly used HTTP methods are GET, POST, PUT, DELETE and PATCH which correspond to read, create, update and delete (or CRUD) operations, respectively.

Idempotency and safety are properties of HTTP methods.

Safe methods can only be used for read-only operations since they do not alter the server state. Using GET or HEAD on a resource URL, for example, should never change the resource. Safe methods are considered GET, HEAD, TRACE and OPTIONS.

Idempotent methods can send multiple identical requests to the server and the outcome will always be the same and it does not matter how many times the requests will be sent. This does not mean, however, that the server has to respond in the same way to each request. For example, if we want to delete a resource we send a DELETE request. The first time the server returns a response that the file has been deleted. If you try to send the same request again the server will respond that the file has already been deleted. Here we have two different responses but the second request did not alter the server state. In this case, the DELETE operation is idempotent.

The following HTTP methods are idempotent: GET, HEAD, OPTIONS, TRACE, PUT and DELETE. All safe HTTP methods are idempotent. PUT and DELETE are idempotent but not safe.

You can see all methods and their function in the graphic below.

The main HTTP methods corresponding to the CRUD operations are POST, GET, PUT/PATCH and DELETE.

The GET method retrieves a specified resource (a list or a single resource). If there are no errors the method returns a representation of the resource in XML or JSON. GET is used to download a Web page, CSS file, script, document or other resources from a Web site. For example, a Web page’s content (fonts, images, etc.) is loaded using HTTP GET requests. This does not modify the state at the server-side, it only ‘reads’ it.
The POST method modifies the state of the server since it creates new resources. For example, when you login into a website, the login sends your credentials to the server using a POST request.
DELETE is used to delete (or remove) an existing resource. An example of an HTTP DELETE request is for deleting an item from the shopping cart in an e-commerce Web application.
The PATCH method updates an existing resource partially. It is used to modify a field of a given object. An example is an HTTP PATCH request for updating the quantity of an order item in the shopping cart in an e-commerce Web application.
The HTTP HEAD method retrieves the resource’s headers, without the resource itself. HEAD is used rarely, for example, to check for modifications on the server-side.

HTTP Response Structure

After receiving and interpreting a request message, the server sends an HTTP response message. You can see an example below.

The response message gives information on whether our request has been successfully executed or has failed. It consists of a status line, response headers and a response body.

The HTTP response status line starts with the protocol version, followed by the response status code, followed by a human-readable text explanation of the status code.

The status code tells the client whether the requested operation was successful or not. It is a three-digit integer whose first digit defines the response class.

Status codes are:

Informational responses (100–199)
Successful responses (200–299)
Redirection messages (300–399)
Client error responses (400–499)
Server error responses (500–599)

You can check the graphic below to see the most common status codes.

After the HTTP status line come the HTTP response headers that provide metadata for the returned resource (or the returned error), such as content-encoding, content size in bytes, content last-modify date and many others.

After the response headers and the empty line separator, the HTTP response body comes. This is the requested resource that can be text, binary data or it can be empty. In the example we used above, the Web server returns a CSS script for styling a navigation bar.

Content-Type and Disposition Headers

HTTP headers play an important role in modern Web development.

The “Content-Type” and the “Content-Disposition” headers specify how to process the data in the HTTP request or in the HTTP response body. These headers can be used both in the HTTP requests and in the HTTP responses.

In the HTTP requests, the “Content-Type” header specifies what kind of data the client sends to the server, for example, a JSON document or URL-encoded form data or a plain-text document or a JPEG image. In the HTTP responses, the “Content-Type” header specifies what kind of data the server returns to the client, for example an HTML document or a JPEG image.

For example, the header “Content-Type: application/json” specifies a JSON-encoded data (a JSON object). By default, the UTF-8 encoding is used.

The “Content-Type: text/html; charset=utf-8” specifies an HTML document with UTF-8 encoding. Note that the encoding (or the charset) specified in the HTTP headers has a higher priority than the encoding specified in the header of the HTML document (using the “meta charset” HTML tag).

HTTP Dev Tools

There are browser built-in tools and client tools that help developers monitor the request-response traffic. An example of a client tool is the Postman HTTP client. Web developers use it for composing and sending HTTP requests and analyzing the HTTP response from the server, testing, debugging server APIs, researching how to use certain service APIs and for resolving technical issues during the software development. If you are interested in other HTTP client tools, you can try out Insomnia Core REST Client and Hoppscotch.

Lesson Topics

In this tutorial, we cover the following topics:

What is the HTTP Protocol
HTTP Request Structure
HTTP Request Methods
HTTP Response Status Codes
Content-Type and Disposition Headers

Lesson Slides

The post Everything You Need To Know About HTTP Protocol [Dev Concepts #39] appeared first on SoftUni Global.

Handling an HTML Form – GET and POST Methods, and Data Encoding [Dev Concepts #38]

Nikol Ruseva — Thu, 30 Jun 2022 06:00:00 +0000

HTML Forms are used to collect input from users and send it to the server for processing.
Examples are registration form that users fill out to sign up on a website and order submission forms on e-commerce sites.

HTML Form Structure

HTML has input elements displayed in different ways such as input field, checkbox (for selecting zero or more of multiple choices), radio buttons (for selecting one of multiple choices), submit button etc. The basic structure of a form consists of input fields and a submit button. The user fills out the input fields with the required information and upon clicking the submit button the data is sent to a form handler. Typically, the form handler is a file on the server with a script for processing input data.

Form Action Attribute

You add an action attribute to the form to define where the submitted data goes. In the example above the submitted information will be handled by the script of the home.html document.

In this case, the URL is called relative. Relative URLs are compared to the current URL that is loaded in the Web browser. We can use slashes and the “double dot” notation to address a different folder or the parent folder of the virtual folder structure on the Web server.

Full URLs are used to submit the form data to completely different Web site. For example, a Web site may embed an HTML form for newsletter subscription which submits its form fields to an external Web site, which provides email newsletter services.

Form Method Attribute

In the following example, we have added an HTTP method attribute to the form. The method can be either GET or POST. Both methods are used to transfer data from client to server.

The GET method transfers data in the URL with a query string. Therefore, the length of the URL is limited. GET is preferable for images, word documents or data that does not require any security.

POST is an HTTP method that encodes form data in a specified format and sends it to the server via the HTTP message body. The World Wide Web frequently uses POST to send user-generated data or an uploaded file to the web server.

In the example above, you can see the standard URL encoding used to encode the HTML form fields and URLs. The URL encoding is a long string of name and value pairs. Each pair is separated from one another by an ampersand (&) sign and each name is separated from the value by an equals (=) sign. For example: key1=value1&key2=value2.

This encoding can be used for text and other data fields, but it does not support file upload fields. We can overcome this limitation by switching to multipart encoding.

Differences Between GET and POST Methods

If you want to send one or two simple variables (for example search parameters) to your server, then you use GET. However, if your form includes passwords, credit card information, or any other data that needs extra protection then POST is a better choice. You can see a side to side comparison between the two methods in the example below.

Lesson Topics

In this tutorial, we cover the following topics:

HTML Form Structure
Form Action Attribute
Form Method Attribute
Differences Between GET and POST Methods

Lesson Slides

The post Handling an HTML Form – GET and POST Methods, and Data Encoding [Dev Concepts #38] appeared first on SoftUni Global.

Understanding HTTP Dev Tools [Dev Concepts #37]

Nikol Ruseva — Fri, 24 Jun 2022 06:00:00 +0000

The HTTP flow of requests and responses can give you useful information about how the web application communicates with the server. It can improve your software development process, and save you time and effort when debugging.

Built-in Browser Tools

Modern Web browsers have a set of built-in tools for monitoring the HTTP traffic. The functionality of these tools includes also inspecting the already rendered HTML elements and debugging right into the browser.

Chrome Developer Tools can be accessed by pressing the [F12] key in Google Chrome. Another way is to right-click anywhere on the Web page and select [Inspect] in the context menu.

This opens a panel with several tabs. The Elements tab shows the HTML used to build the current Web page. It holds information about the UI controls in the Document Object Model (DOM) tree.

The Console tab shows errors and logs for the currently loaded Web Page. The tab is also used for executing JavaScript commands and interacting with the page.

You can set breakpoints and evaluate expressions in JavaScript through the Sources tab. All files that were used to make the website are listed here.

To monitor the data exchanged between the current page and the Web server, we use the Network tab. This tab is commonly used to confirm that resources are downloaded or uploaded correctly.

When you click on a link, the browser sends multiple requests to the server regarding different elements of the page. The HTML required to render the page is sent back in the form of responses from the server. There is information about every response that includes HTTP request URL, the request method, remote server IP address and port, status code and many other technical details.

Client Tools

Another useful tool for developers who need information on HTTP traffic is the Postman HTTP client. This tool is used for composing and sending requests, analyzing HTTP responses from the server for testing, debugging server APIs and for resolving technical issues during the software development process.

With Postman you can create an HTTP request, send it to the Web server, view the HTTP response, and generate a source code to execute the HTTP request in many languages, such as JavaScript, C#, Java, Python, PHP and many others.

Another alternative for an HTTP client tool is the Insomnia Core Rest Client. In case you prefer a Web-based HTTP tool, you can try Hoppscotch.

Lesson Topics

In this tutorial, we cover the following topics:

Network Inspector
Postman Client Tool
Sending and Analyzing HTTP Requests

Lesson Slides

The post Understanding HTTP Dev Tools [Dev Concepts #37] appeared first on SoftUni Global.

How to Become Google Expert Developer? [Dev Talks #3]

Luben Lubenov — Thu, 16 Jun 2022 14:10:31 +0000

Meet Iliya Idakiev. He is a Google Developer Expert (GDE) in Angular and Web Technologies and he has been working with JavaScript for over 7 years. He teaches at Sofia University and has been running his own company (Hillgrand) for almost 5 years where he develops various web applications. He likes to organize and participate in JavaScript events and he and his team have a YouTube channel (commitjs).

Today he is here to answer some questions you probably have about the process of becoming a GDE.

What inspired you to become a developer?

“My experience began at University. My major was Informatics. I was studying C++ and also working with .NET and C#. Then I decided to learn JavaScript. Shortly after that, I started teaching JavaScript and opened my own company.”

How did you become a Google Developer Expert?

“To be a Google Developer Expert means to be recognized by Google for the things that you do for certain technologies. I wanted for a long time to become a Google Angular Expert. I was organizing events and a lot of courses. I started to go to conferences and I met with a lot of people who were already Google Developer Experts. So one day I decided to go on several interviews and everything went pretty smooth.”

What is the process of becoming a Google Developer Expert?

“First, you have to be recommended by another Google Developer Expert and you must send all the background that you have (open-source projects, events, courses, etc.). You need to contribute to the community. The person from Google will check your background and you will have 2 or 3 interviews (personal and technical). Among all the benefits of becoming a Google Developer Expert, the biggest one for me is that you get recognized by Google and people look at you differently.”

What is your experience with contributing to open-source projects?

“When you are working on some application and you are using some modules, at a certain point you will start to discover issues with these modules or new features that can be added. If you have time, you can fix these issues or add new features and make a pull request. This is a way to become a contributor.

Another way is to open-source the useful libraries that you developed in your projects.”

How do you relax?

“I like walking and traveling to peaceful and beautiful places. I was a DJ before and still do it from time to time.”

What are the projects that you are working on?

“I mostly do private JavaScript-related training. I like live coding, which is much more interesting and effective for the students. One of the biggest projects we developed is the Front-End of a customer portal for monitoring and controlling off-grid and hybrid power systems. It was very challenging, and I am proud of this project.”

When do you realize that you are successful?

“This is other people’s decision, not mine. But I can say that I succeed when I accomplish my goals.”

What tips for success would you give?

“I think that everyone should find what he/ she is happy and enthusiastic about and try to become the best in it. Do not focus on the money/ salary, but focus on becoming better in what you do. Dedicate yourself and do not give up. This will make you successful.”

How did you manage to stay motivated?

“Going to meet-ups and knowledge sharing is very good and useful. This will keep you awake and inspired.”

What advice will you give to young people who study at University?

“The University is a place where you can learn something that is going to be like a base for your life ahead. My advice is to start teaching other people as soon as you can because this will make you better in your field. Be a part of the community that is doing what you are doing and try to solve other people’s problems (for example, on Stack Overflow). Sharing knowledge is amazing!”

Do you have a favorite book on programming?

“I would recommend books like “Clean Code”, “Clean Architecture”, and “Enterprise System Architecture”. It is wise to invest time in something useful for your field. Also, GitHub is the best “book” that I would recommend.”

How do you see yourself in 5 years?

“My goals are to develop my company and give my team a better working environment. I see myself still teaching other people and contributing to the community.”

The post How to Become Google Expert Developer? [Dev Talks #3] appeared first on SoftUni Global.

What is a Database System (DBMS)? [Dev Concepts #36]

Aleksandar Peev — Thu, 26 May 2022 06:00:00 +0000

A database is a collection of data that is organized so that it can be easily accessed, managed, and updated.

Usually, you need to store data that will be accessible even after you end the program execution.
One way to do that is by using a text file, but this is not scalable and does not provide any structure.

Databases hold and manage data in the back-end systems. Almost all modern software systems use a database in some form. The data in database systems is organized in tables, collections, key-value pairs or other structures. The software, which manages, retrieves and manipulates data in a database, is called Database Management System(DBMS).

Relational and Non-Relational Model

In this section, we will explain the difference between these two database models:

The relational model is based on tables and relationships.
The non-relational model is based on collections of documents.

The structure of relational databases is strict, while the non-relational is not so strict. SQL databases regulate the input data, what their format is, how different types of data are connected, etc. RDBMS systems manage relational databases and expose a universal interface for developers: the SQL language. Relational databases organize data in tables, which hold data rows, and each row holds columns.

Non-Relational databases have a dynamic schema. A schema is the structure of the database, which describes all its objects (tables, collections, views, and others) and their structures. The data stored in NoSQL databases are not strictly structured. Sometimes these databases are called “schema-free databases“. Properties of an entity (the columns in the SQL database) can be added dynamically. NoSQL databases can be based on several data models (several ways to structure data).

Define, Manipulate, Retrieve and Manage Data with DBMS

Database Management System (DBMS) is a server software, which takes data queries of manipulation commands from the clients, execute the commands in the database, and returns the results to the clients.

While a database could be just a collection of data files, the DBMS is what makes it so powerful with its structure, algorithms, optimizations, and APIs. For comparison, in a text file, you will be able to save whatever information you like, while in a database, managed by a DBMS, you can set rules on the incoming data. DBMS systems implement a programming API or specialized language, such as SQL, to manage data.

To do so, first, we create a query (or command) through the client that is passed to the engine through its API. The engine processes the query and accesses the data files. Then, the database storage returns the desired data from the data files to the engine. Finally, the engine processes the returned data and passes it to the client for visualizing in a human-readable format.

Databases are very powerful in keeping collections of entities. The relational model is based on tables and relationships, and the non-relational model is based on collections of documents. Database systems are an important component of most modern software systems, and therefore software engineers must have at least basic database skills.

Lesson Topics

In this tutorial, we cover the following topics:

Databases Introduction
SQL vs NoSQL Databases
DBMS Systems

Lesson Slides

The post What is a Database System (DBMS)? [Dev Concepts #36] appeared first on SoftUni Global.

Databases, MySQL and MongoDB [Dev Concepts #35]

Aleksandar Peev — Mon, 09 May 2022 06:00:00 +0000

We will start with the concept of data storage, the need of database systems and the difference between relational and non-relational databases. You will become familiar with the concept of Database Management Systems (DBMS), such as MySQL, MongoDB and Redis.

What is more, you will learn about the relational database model, the SQL language and some of its basic commands for data query and manipulation. In the end, we will explain the NoSQL databases (which hold collections of documents) and how to query and manipulate a document-based NoSQL database.

In the end, we will show you a live demo of how to work with MongoDB and Robo 3T. From the demo, you will learn:

how to create a database and a collection of documents
how to insert a document
how to edit, delete and query documents

Databases

A database is a collection of data that is organized so that it can be easily accessed, managed, and updated. Database Management System (DBMS) usually manages a database. DBMS systems are also called “databases servers“, because they manage data and serve developers through an API, using the “client-server” model of communication.

Databases implement the classical CRUD operations. CRUD is an abbreviation with each letter standing for a single operation.

Those are the basic operations you will be performing on a database:

C – Create (or add or insert) new data.
R – Read (or retrieve or query) data.
U – Update existing data.
D – Delete existing data.

Relational and NoSQL Databases

Relational databases organize data in tables and data rows. For example, an e-commerce software could have a table holding the products. Each table row could hold product id, product name, description, supplier, and price. In relational databases, the SQL language is used to query and modify data.

NoSQL databases hold collections of documents or key-value pairs. Document databases (like MongoDB) manage collections of documents (such as products or vendors). These key-value pair structures are also known as “dictionaries“. They support a fast “search by key” operation. Key-value data storage systems are good for organizing simple data.

From Data Storage to Databases

Databases give you the possibility to keep different data about the same thing in columns or properties. Multiple data objects of the same type can be stored in a table or collection. Such data objects are also called “entities“.

In the image above, we have several entities like products, customers, and orders. Each entity would have several data characteristics, which can be stored in data columns or object properties. This way the data has “structure“. It is organized consistently and in a manageable way. Each row holds a single entity (in this example – an order). As you may have guessed, this is much more optimized than keeping physically thousands of receipts (on paper or in text files).

Why Do We Need Databases?

There are far more reasons to use a database rather than physical storage. Data storage is not the primary reason to use a database system.

As we said earlier, imagine having thousands of receipts. It would be quite impractical to search these receipts unless they are carefully structured and ordered. That is easily solved with a database as it is stored on your computer, or even on a cloud service. Database tables and collections can be indexed, and this allows searching millions of documents in milliseconds.

Database systems are an important component of most modern software systems, and therefore software engineers must have at least basic database skills. They are very powerful in keeping collections of entities and implement efficiently the CRUD operations, queries, searching, and many more.

Lesson Topics

In this tutorial, we cover the following topics:

Database Intro
SQL vs NoSQL Databases
DBMS Systems
Relational Databases and SQL
NoSQL and MongoDB

Lesson Slides

The post Databases, MySQL and MongoDB [Dev Concepts #35] appeared first on SoftUni Global.

Bitwise Operations in Programming [Dev Concepts #34]

Aleksandar Peev — Wed, 27 Apr 2022 06:00:00 +0000

In this article, we will also solve several practical problems using bitwise operations:

Get the last bit from an integer
Get the bit at a certain index from an integer
Change the bit at a certain index in an integer
Extract the bit before the last from an integer

If you are not familiar with bits and storing data on the computer you can read our previous articles about them here:

Bitwise Operations

First, let’s start with learning about the bitwise operations in programming. They work with the binary representations of the numbers, applying bit-by-bit calculations. For example, if we have two 8-bit numbers, we can apply a bitwise operation, which takes as input the first 8 bits and the second 8 bits and produces as a result new 8 bits.

A simple bitwise operator over a single argument is the “tilde” operator – the bitwise logical NOT (also called negation). The operator “tilde” turns all zeroes to ones and all ones to zeroes, like the “exclamation mark” operator for the Boolean expressions, but it works bit by bit. For example, if we have the binary number “1 0 0″, its negation “tilde 1 0 0” is “0 1 1“.

The table above illustrates the work of the bitwise OR, AND, and XOR operators.

The bitwise OR operator (denoted by the vertical bar in most programming languages) returns 1, if one of its input bits is 1, otherwise returns 0.
The bitwise AND operator (denoted by the ampersand in most programming languages) returns 1, if both of its input bits are 1, otherwise returns 0.
The bitwise exclusive OR (XOR) operator (denoted by the ampersand in most programming languages) returns 1 if one of its arguments is 1, but not both at the same time, otherwise returns 0.

Bit Shifts

Bit shifts are bitwise operations, where bits inside a number are moved (or shifted) to the left or the right. During the shifting operation, the bits that fall at invalid positions are lost, and the bits which come from missing positions are replaced by 0.

Bit shifting can be applied for 8-bit, 16-bit, 32-bit, and 64-bit numbers, as well as for numbers of other sizes in bits. The bit size of the number being shifted defines the valid bit positions and where the bits get lost. Bits can be shifted by more than 1 position. For example, 5 shifted left twice is 20 and 5 shifted right twice is 1.

Why We Need Bitwise Operations?

Processing bits is important for many fields of computer science, information technologies, and software systems, like networking protocols, data storage, and file systems, binary file formats, memory management, data compression, data encryption, video streaming, Internet of things (IoT) systems, low-level programming, computer graphics, and many others.

Data compression algorithms replace bit or byte sequences with shorter bit sequences. For example, the “DEFLATE” algorithm, used to compress data in the ZIP files, finds the most often sequences and replaces them with shorter sequences, while it preserves a dictionary between the original bit sequences and their shorter compressed form. This is done using heavy bit-level processing with bitwise operations.

Many binary file formats use bits to save space. For example, PNG images (the Portable Network Graphics image format) use 3 bits to specify the color format used (8-bit color, 24-bit color, 32-bit color with transparency). These 3 bits are located at a certain offset in the PNG image header bytes, so reading and writing the value encoded in these 3 bits require bitwise operations.

To sum it up, bitwise operators work with the binary representations of the numbers, applying bit-by-bit calculations. Bit shifts are bitwise operations, where bits inside a number are shifted to the left or the right. These concepts are an important aspect of many fields of computer science.

Lesson Topics

In this tutorial, we cover the following topics:

Bitwise Operations
Bitwise Operators – Examples
Bit Shifts
Bitwise Operations Problems
Why We Need Bitwise Operations?
Bit Before the Last – Problems

Lesson Slides

The post Bitwise Operations in Programming [Dev Concepts #34] appeared first on SoftUni Global.