WebDev alati

Hybrid mobile applications

by

What are hybrid mobile apps? Mobile applications are more than ordinary web applications, because unlike browsers, mobile devices have sensors and specific functionalities (camera, gyroscope, vibration, etc.). It is the ability to access these functionalities that separates mobile applications from an ordinary responsive website. Emergence of hybrid mobile applications To develop “native mobile apps” on … Read more

Chrome DevTools

by

Introduction

chrome devtools

This article provides an overview of specialized tools within the “Chrome” browser, called “DevTools”. Chrome DevTools are an irreplaceable set of tools intended for web developers to help them in their daily work. Through DevTools it is possible to view the HTML page and work with DOM elements, as well as access to all CSS properties of the elements.
In this toolkit, attention has been paid to the debugging part of JavaScript code. Using this tool, it is possible to define various ways of interrupting the execution of program code (the so-called breakpoint), which greatly facilitates the work of web developers when removing bugs on websites. At each interruption, an insight into the value of the variable as well as its areas of definition is enabled.
In addition to this, there are sections related to monitoring the performance of the web application, as well as an overview of the data exchange between the client and the server.

Read more

webpack (basics)

by

Introduction Advantages and disadvantages of modular programming Organizing the code in only one file makes programming very complicated. For this reason, in JavaScript, as in many other programming languages, the program code is divided into smaller units, the so-called. modules. The division is made according to a certain scheme, which enables good organization and facilitates … Read more

npm & yarn basics

by

Introduction

npm vs yarn

Package manager is a tool responsible for automating processes related to working with packages. Software packages are located in archive files, and each package contains meta-data that describes the given software (such as the software name, version, and list of all dependencies).
The most common application of package manager is when installing packages and their dependencies. Package manager eliminates the need to manually install software. In addition, package manager can handle updating, configuring and finally removing all those components.

The biggest package manager is npm, which is primarily made for the node.js (server) environment, so in order for it to work in a browser, it is necessary to use module bundler (browserify or webpack). Yarn package manager is the “new kid in town”, Facebook’s baby, it can use all npm packages and has a very similar syntax but it is considered to execute commands faster than npm.

Read more

Front-End Tools (Overview)

by

Package manager

Introduction

frontend

Today’s web development is based on a set of different technologies that are used simultaneously on one project, such as: Typescript (language), Sass (CSS extension), JSCS (code style linter and formater), JSHint or TSLint (a tool for detecting errors and potential problems), BrowserSync (a tool for synchronizing changes in the code and in the browser – Live reload)… One project requires the installation of each of the mentioned programs but also of all programs (dependencies) on which they depend and which precede their installation.
Package manager eliminates the need to manually install software with all necessary supporting software (dependencies) and to update all those components. Package manager is a set of tools responsible for automating the process of installing, configuring and removing programs. Package managers work with packages ie. with software or data contained in archive files. Packages contain meta-data that describe the given software such as the name of the software, the version and a list of all dependencies (other software necessary for the given software to work). The most famous package managers are:

  • npm
  • bower
  • JSPM (JavaScript Package Manager)
  • Yarn

Read more

Git commands

by

.gitignore

Before activating Git, it is necessary to prevent the saving and tracking of changes of unnecessary files. Most often, these are files used by the editor or files created by compiling, etc. We define files or entire directories that we don’t want to track in .gitignore. The .gitignore file is placed within the project folder.
This file is filled with the appropriate commands with the help of which Git knows which files it should not follow. The principle of marking files and folders that we don’t want to track in .gitignore is as follows:

  • Enter the file extensions with a space that we do not want to follow, such as

    .swo .swp

  • Enter the folders we don’t want to track:

    folder_name

    In case there is a file inside the folder that still needs to be tracked, write:

    !someFile.txt

  • Enter the folder and its subfolders that we do not want to track:

    folder_name/subfolder_name

    View branches

  • Let’s enter the folder and all its subfolders that we don’t want to track:

    folder_name/*

  • Let’s write all objects and archives that we want to ignore:

    *.[oa]

There are a large number of .gitignore examples on the Internet, depending on the project in question (WordPress, Android…), and you can find an excellent site for finding an adequate one at the following link: toptal/.gitignore.

Unfollow

It is very important to create a .gitignore file before initiating Git, because if Git has already started monitoring a certain file, it will not stop monitoring it even if we later insert that unwanted file into .gitignore. Below are described the necessary actions to stop uploading a file.

a) Termination of tracking without physical deletion

If some non-essential files for the project have been committed by mistake, the changes of which we do not want to save, but we also do not want to physically delete them from the working directory, we need to order git to stop tracking them (i.e. to remove them from the repository) with the command:

The command to stop tracking a directory is:

where -r tells Git to stop tracking all subdirectories and files within it.

After the command to stop tracking, the file is in the preparation space (index). In order to prevent the files on the next commit from entering the repository again, it is necessary to insert those files into the .gitignore file before the commit-ovj.

NOTE:
Please note that if the file name contains a space between words, it is necessary to put it in quotation marks, as in the following example:
git rm "neki naziv fajla sa razmacima.ekstenzija"

b) Termination of monitoring with physicalby deleting

If there is a need to remove the file from the repository and delete it from the working directory, use the command:

If it is a directory, we use the command:

where -r tells Git to stop tracking all subdirectories and files within it. After the command to delete files, it is also necessary to commit (without first sending to the index).

See more about this command on the official page

Local repository

When we want to activate Git ie. to start tracking changes in the project, we need to initiate the creation of a “working git repository” within the project folder, which is done as follows:

This command creates a new folder .git (so-called “repository”) within our project and it will contain the entire database of our project. From that moment Git monitors the project and takes snapshots of the state when we commit. If we want Git to no longer monitor our project, it is enough to delete this folder.

view branches after cloning

The local repository is in a specific relationship with the remote one because it is “aware” of the existence of the remote repository. Within the local repository there are always at least two branches (see picture):

  1. A branch named “origin/master” which is a local version (copy) of the remote repository. Our changes cannot be sent to this branch, but it serves to take changes (merges) from it, because it is practically an intermediary, i.e. an intermediate step for getting changes from a remote repository.
  2. The branch named “master” is our local branch directly linked for the project (where we make commits).

Read more

Domain and hosting

by

Domain lease Renting a domain is one of the first steps necessary for web presentation. Purchases are made through authorized sellers (registries). Domain registrars are companies that sell domains. They must have a certificate approved by ICANN, the Internet Corporation for Assigned Names and Numbers. List of authorized registries in Serbia can be viewed here, … Read more

Grunt

by

Introduction Grunt is a tool written in Node.js, therefore before installing Grunt it is necessary to install Node.js and its package manager npm. If they are already installed, it is necessary to check whether they are up-to-date versions and, if necessary, do their update. Since one of Grunt’s frequent tasks is to compile SASS to … Read more

JSON (Data Interchange Format)

by

JSON general

JSON (JavaScript Object Notation) is one of the lighter text-based open standards designed for readable data exchange. The data file extension in JSON format is .json, while the meta tag (MIME format) is application/json.

JSON is a format that is slowly replacing XML because it has several advantages over XML. JSON does not use tags and therefore has shorter code that is easier to write and more understandable to read. Although the most important advantage of JSON over XML is that JSON is parsed through a standard JavaScript function while XML is parsed through an XML parser.

Read more

Web Services (Basics)

by

What are web services?

Web service is an application located on a server, which, in addition to its basic purpose, is designed to support interaction between two machines over the network and enable the exchange of information between them. Any service is considered to be a web service if:

  • Available via the Internet or (internal network)
  • Uses a standardized message system
  • It is recognized by the search engine
  • It is not tied to an operating system or programming language
Web service search

Web Services are published in a unique location where they are offered as services. UDDI (Universal Description, Discovery and Integration) is a centralized location that provides a mechanism for registering and finding Web services. UDDI uses SOAP for communication and allows clients to find a service as well as a server to publish it.

Services can be closed (private) but also publicly available. You can view the list of publicly available services on several websites:

Web service description

Web services have the ability to describe themselves, and WSDL (Web Service Description Language) is used to describe the service. WSDL is written in XML and contains information about where the web service is located and what communication protocol it uses.

Cooperation with GUI application

Web services in cooperation with a GUI application are something between a web and a desktop application. The web service on the server provides functionality and data, while the desktop application only provides a customizable graphical interface that it fills with the data received from the service. A web service in cooperation with a GUI application is more flexible than a web application because the user can adjust the appearance of the application on the client, while the user of the web application must use a web browser and has no influence on how the application will look on the screen.

Advantages compared to the web application:
  • They are more economical in terms of network and server resource load because during communication they only send a response, while web applications send HTML with a form and a description of how the comment should be displayed in addition to the response. Web services are ideal for “small” devices that are not PCs, ie. mobile Pocet PC… because only the front-end application is installed on such a device, and the hard part is done on the server.
  • They are easier to develop, test and maintain. With a web application, in addition to the necessary functionality, it is also necessary to test the design on all browsers and platforms, while with a web service, the author only cares about the function, while the client application cares about the display.

client server

At the service, communication takes placebetween the client and the server by the client sending a request to the server which then the server receives the request and processes it, then forms a response based on it and then sends it back to the client. The client-server architecture style separates the problems of the two sides of the communication channel, which means that the client side is not at all interested in the way information is stored on the server because there is always a uniform way of accessing those resources. On the other hand, the server is independent of the client and doesn’t care how the user interface is implemented or what state a particular client is in, which greatly simplifies the server side. With this, their independence was achieved and the development of both sides was more easily separated, i.e. it is possible, for example, improve the server side or completely change its logic without the client noticing at all as long as the way of accessing the resources is the same.

What is an API?

In order to achieve communication between two systems, they need to have a “point” of contact, the so-called. interface. An interface is an intermediary (connection) in communication between two separate systems that work together and can be:

  • Hardware interface (e.g. the steering wheel, throttle and gearbox are “vehicle access points” and represent an intermediary between the car and the person driving it)
  • Program interface so called. “API” which represents “access points” for communication between two programs

Working with services implies that resources are accessed on a remote server (access is through the Internet), this kind of network communication brings with it the problem of accessing and transferring complex data structures as well as the organization of resources on the server itself. Over time, programmers have created communication between the two programs in various ways, ie. made different types of APIs, but at one point they standardized the way of communication, i.e. they created a set of rules that network applications should follow when communicating with each other (eg one such standardized api is “REST API”).
What we must pay attention to is that once the API is defined and put into “traffic”, in case changes need to be made after some time, it is not wise to change the “end points” that have been set so far, because it would be at least rude to force API consumers to change already created programs in order to adapt to the change. When a change is made, you should always strive to continue support for existing properties (end points), and for changes, add new properties instead of changing existing ones.

Read more