Pre-requisites

This article assumes that the reader is familiar with 3D computer graphics concepts and techniques, such as shadows, shaders, noise, frame blending.

Exposure

3D shadows implementation, as smooth and casual as it looks in any of your video games, has been a source of controversy, pain, and confusion for all 3D programmers for generations. Countless proposals have been made, building on top of each other, and all have one point in common - make the next shadow implementation a little less ugly and buggy than the current one.

For sheer fun, how many Shadow Mapping algorithms can you remember off the top of your head? SSM, PCF, PCSS, CSM, VSM, …? They all have cool names and look great on their original PDF proposal screenshots, but somehow after a little time  another, even more advanced algo comes up - rinse and repeat. Not mentioning the shadow volumes, having enjoyed their moment of fame in 2004 before departing into oblivion.

At some point you get to the question: are shadows inherently impossible to get right? How hard is it to test if a point in space receives light or is occluded? Let’s find out.

Idea

A simple and reliable algorithm only takes a few hours of web search to develop, assuming you have a little previous experience with OpenGL. All we need is

• The light source position in 3D space
• A list of occluders, as an array of triangles
• The point position to test whether it’s occluded or lit
• A routine to test if the ray from light to point intersects any of the occluders

Obviously this needs to happen on the per-pixel basis, so the code goes into the fragment shader. The test function is easy to find on the web:

float rayTriangleIntersect(
	vec3 orig, vec3 dir,
	vec3 v0, vec3 v1, vec3 v2)
{
...
}

I’m omitting the function body code here as it may hurt your eyes if your linear algebra skill is not advanced enough. Anyway, it’s the foundation the rest of the experiment is built upon. All we need to know for now is whether the given triangle casts a shadow on the current fragment.

We can now call this function for every occluder triangle in the list and we have a mathematically precise answer for the problem. 

It works

With a little trial and error the simple shadow test does not take long to complete:

So all good then? Expectedly, no. This approach can’t handle more than a handful of occluder triangles in real time. The benchmarked low-power Radeon 550 (64-bit) can barely do a hundred triangles at 60FPS. Surely, a high-end GPU can do much more than this, and you can optimize the calculation and get another 2x-3x boost, but that goes out of scope of this experiment.

Hardship

What’s more important at this stage, the rendering result is not any better than e.g. shadow volumes. For reference, the latter are also pixel-perfect, but they suffer from the fact that their native output is strictly hard shadows with no half-tones. Screen space approximation filters exist, but they tend to give unrealistic, sometimes plain wrong results.

Still shadow volumes are a great deal faster than what we came up with so far. Maybe we can get soft shadows to compensate for that? 

Well, the common approach for soft shadows would be to average multiple samples, but that’s based on the fact that a single shadow test, as ugly and buggy it has been, is quite fast and you can fit multiples of them in your render cost budget.

Single analytical shadow test is very expensive, so averaging multiples of these is already a bad idea.

Still, we do have a couple of tricks up our sleeve here.

Noise

To soften the shadow edges we will use a noise function. For each fragment on the screen we will take a random point on the light source surface and use it instead of the single light source position above. The noise function is different for every frame so the pixels on the screen flicker with time.

To workaround the pixel flickering we will now apply frame blending.

At this point we finally have accurate soft shadows. The only visible downside is when the light is moving the shadows become hard until the movement stops but for moving lights it’s not critical.

Conclusion

While analytical shadows are obviously slow (while accurate), it’s interesting to test how they fare on current graphics hardware. At the same time in a short list of situations, when occluders are actually low-poly shapes (e.g. room walls), they can be even used directly with little or no modification. Curiously, it also supports partially-translucent occluder materials, unlike shadow maps or shadow volumes.

Source code available here.

The post Analytical Shadows: Still Too Early? appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

This image contains around 50 screenshots from random articles and courses, where the authors state that tags in HTML are divided into two types - block and inline.

This is wrong.

HTML tags are divided into 7 types. In this article we will learn about them and how to use them correctly.

The Problem

Let’s imagine that we have a task where we need to make a markup of a form. Something like this:

// src/components/sign-up/components/register-form/register-form.jsx
 
<form className="register-form">
 <p className="register-form__control-wrapper">
   <CustomSelect label="Type:" options={[]} />
 </p>
</form>

// src/components/common/custom-select/custom-select.jsx

const CustomSelect = ({ label, options }) => (
  <div classname="custom-select">
    <label classname="custom-select__label">
      {label}
      <select classname="custom-select__control">
        {options.map((it) =&gt; (
          <option value="{it.value}">{it.label}</option>
        ))}
      </select>
    </label>
  </div>
);

But when we open the browser we see this:

Hmm, the custom select component outside of the p element? An extra p appeared?

One more example:

// src/components/sign-up/components/users/users.jsx
 
<div className="table-wrapper">
 <CustomTable>
   {users.map((user) => (
     <tr>
       <td>{user.name}</td>
       <td>{user.role}</td>
     </tr>
   ))}
 </CustomTable>
</div>

// src/components/common/custom-table/custom-table.jsx

const CustomTable = ({ children }) => (
  <table className="custom-table">
    {children}
  </table>
);

Let’s open a browser:

What is going on…

This is how the browser behaves when we try to nest one element incorrectly within another.

7 types of HTML Element

Each element in HTML falls into zero or more categories that group elements with similar characteristics together and has its own content model and other nuances and features. For example, the p element:

HTML Element content types:

• Metadata content — information for browsers, search engines and etc. (everything in the <head>);
• Flow content — content (everything in the <body>);
• Phrasing content — document text and small text elements in paragraphs;
• Sectioning content — semantic sections of the document;
• Heading content — headlines;
• Embedded content — images, video, audio and etc;
• Interactive content — what the user is interacting with.

HTML Element content types

When you try to nest one tag in another incorrectly, browser starts fixing errors at its discretion without asking.

Let’s play. Can <x> be nested in <y>?

Open the documentation and try to find the answer yourself ?

<li>
 <p>?</p>
</li>

Yes, you can!
The li element content model — flow content.
The p element categories — flow content, palpable content.

<header>
 <section>?</section>
</header>

Yes, you can!
The header element content model — flow content, but with no header or footer element descendants.
The section element categories — flow content, sectioning content, palpable content.

<p>
 <div>?</div>
</p>

No, you can’t!
The p element content model — phrasing content.
The div element categories — flow content, palpable content.

How can we test ourselves and our application? One of the tools is the official W3C validator.

You can upload the file, paste the code or use the link to your application.

Let’s try using one of our examples at the beginning of the article:

The result:

The validator and the browser did not know what we meant when we nested the <tr> element inside the <div> element. The browser tried to fix the errors itself (because of this, we got the wrong markup) and the validator talks about the stray start <tr> tag in the markup. Which is not strange since according to the documentation, the <tr> element can only be used inside the table tags (<thead>, <tbody>, <tfoot>, <table>).

Can I Include

Of course you don’t have to memorize all types of content but sometimes you should look there when you are not sure whether something is broken.

By analogy with Can I Use, the Can Include tool has been developed that can help us with this.

With this tool, we can check if we can nest one element into another.

We can check this in the official documentation but with CanInclude we can do it faster since its interface is simpler for this than the documentation.

Conclusions

HTML may break or may not look as expected and that is okay. It is not bad HTML, it just has its own rules. You just need to understand that something could break just because of incorrect nesting and know where it can be quickly checked.

Each HTML element has its own category and its own type of content that it can have. In general, there are 7 types of content that expect a certain nesting into each other.

You don’t have to memorize them all but sometimes when you have doubts or something is broken you can look at the documentation, check your code in the HTML validator or use the CanInclude tool to check yourself.

The post Block or inl<i>ne? appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

The mission of Binary Studio Academy is to transform talented and motivated students into qualified engineers capable of building world-class software. We help novice developers deepen and sharpen their existing programming knowledge, driving breakthroughs in their understanding of development theory while guiding them to mastery of modern frameworks and technologies.

An extremely competitive acceptance rate (0.5%) enables us to find exceptional talents. Participants are chosen based on their tech and soft skills as well as their performance during the selection rounds, including an entrance exam, three homework assignments, English test and a Zoom interview with representatives of our Academy program. Almost 80% of our company are graduates of the Academy, and all of our senior engineers went through the Binary Studio Academy program. These same engineers are now the ones who write the curriculum and ultimately choose who graduates the course, as well as who is offered a job at Binary.

Binary Studio is an early innovator in online education. Back in 2015, we launched our internal learning management system specific to the needs of our students. Our Academy LMS platform is an educational project designed for interaction between students, coaches and educational managers. It allows users to create, handle and assign home tasks and tests to be completed by students, rate students’ homework, monitor their progress as well as create and manage groups of students. Our coaches provide all lectures and assignments on this platform which makes the education process far easier and more efficient.

Building MVP projects from scratch

Over the course of seven weeks, students work in teams to produce MVP-level web and mobile applications. Currently, there are six main technological tracks at Binary Studio Academy - JS, .NET, Java, PHP, Mobile, and QA. Academists develop state-of-the-art web platforms with a complex front-end, structured back-end, and the use of several cloud services. Although the projects are not sold to clients, the development conditions are as close to the real deal as possible. Each project’s team consists of developers and QA engineers who conduct online daily standup meetings. In addition to this, each project has a Product Owner, who participates in meetings from time to time, proposes new requirements, and offers feedback on the platform’s development.

What value does the Academy bring to our customers?

We don’t simply hire engineers, we acquire and nurture talents - this philosophy differs Binary Studio’s position on the market. Among the core values our approach brings to the customers:

• Binary Studio concentrates exclusively on the best specialists, whose skills are ideally suited to solving the specific issues of the platform that our clients need. We tailor our Academy training specifically around the projects and technologies our clients are working with.
• We mainly work with small, medium-sized businesses and start-ups. In this industry, the cost of a mistake is too high. That is why we exclusively select those people who have a high universality of skills and abilities. The result is a group of versatile and skilled developers who can switch from front-end to back-end, web and mobile, and are ready to do so on the fly when needed.
• Binary Studio keeps technical professionals engaged. Motivation and permanent growth are the essential requirements of modern, top-notch engineers - we know this through over a decade’s worth of experience on the market. Therefore, we provide opportunities to continuously develop, learn and create dream side projects for our engineers using the latest technologies and resources. This allows us to maintain an ideal microclimate in the team, encouraging deep involvement and sky-high motivation.
• We attract and train the best minds. Binary Studio Academy is a totally free hands-on program that supports, educates, and scales unique talents. At the core of our program, students create an MVP-level platform within just a couple of months. 

Below are some fantastic projects built from scratch which our students worked on during Binary Studio Academy 2021.

Perflow - music service

A solution inspired by Spotify, where users can create their own playlists and listen to themed selections. The web-application allows users to listen to music in different quality albums, create different playlists, create a library of liked content, share music with friends, and play a collaborative playlist together. There is also a mobile application with data synchronization. 

Technology stack: .NET 5, Entity Framework Core 5.0, MSSQL, Azure Blob Storage, Firebase, Dapper, MediatR Ocelot API Gateway, SignalR, RabbitMQ, ffmpeg,  Angular, Semantic UI, SASS.

CodeTrainer - development skills trainer

CodeTrainer is an online educational platform for software developers where users can exchange their knowledge by solving programming puzzles. Users can add their own challenges and create collections by adding different challenges. The solution also includes such features like feedback gathering, clan creation, fighting for honorable places in the community, etc.

Technology stack: TypeScript, NodeJS, Express.js, PostgreSQL, TypeORM, RabbitMQ, Firebase, Socket.io, JWT,  AWS S3, React, Redux/Saga, SCSS, Docker.

Scout - smart HR-platform

A web application for speeding up hiring, automation of personnel management processes, centralization of all information about employees, automation of the recruitment process of the best candidates, management of employee time offs, tracking employee involvement, performance evaluation, and several other features. The application utilizes machine learning and CV parsing.

Technology stack: ASP.NET Core, Entity Framework Core, MSSQL, Elasticsearch, Dapper, SQL, MongoDB, CQRS, Docker, AWS, Amazon S3, Amazon Comprehend, Amazon Textract, JWT, SMTP, Vault by Hashicorp, TS, Angular, Angular Material, SСSS, MediatR, GitHub Actions.

Infostack - corporate knowledge organizer

A web-based application designed to store and organize the information that is a result of team collaborations. It allows company teams to keep detailed records like project timelines and plans, specifications and requirements, meeting summaries, step-by-step processes, etc. Within the app, users can create workspaces, add collaborators, manage user profiles, pages, permissions, etc. The solution also includes such features like notifications, following pages, live page editing, integration with GitHub repositories, and several other features.

Technology stack: HTML, SCSS, TypeScript, Bootstrap, React, Redux, Node.js, Express.js, TypeORM, PostgreSQL, WebSockets, Elasticsearch, AWS S3.

Slidez - interactive presentations application

A service for interactive presentations that allows speakers to share access and grant viewing rights to others. This solution allows users real-time communication with your audience, by providing an editor plugin for Google Slides, so users can integrate interactions into existing presentations. Users will have to install Google App Script addon and Google Chrome extension to access full functionality. After adding interactive elements, users can enter presentation mode and present as usual. This Google Chrome Extension will detect interactive slides and replace them with real-time updating elements, such as Q&A screens and polls. Participant's don't have to install any additional software - they can use any browser they like, scan QR code and access live event interactions.

Technology stack: Java 11, Spring, Hibernate, WebSockets(Spring), PostgreSQL, React, Redux Toolkit, WebSockets (SockJS + STOMP), Material UI, TypeScript, Google App Script, Chrome Extension API, AWS services (S3, Route53, CloudFront, Elastic Beanstalk, RDS, ACM, CloudWatch), GithubActions, Sentry.

Jabber - podcast platform

A platform for recording, storing, and supporting podcasts. The solution allows you to record a podcast in real time (people can go in and comment on the podcast while recording). Users can create favorite podcast lists, leave comments and “likes.” A private podcast option is also available.

Technology stack: TS, React, Redux, SASS, React Native, NodeJS, Express, Knex, Objection, JWT, PostgreSQL, Sockets, WebRTC.

MindBridge - electronic publishing platform

A new generation of content creation tools inspired by Medium and Github. It is a platform where readers find articles on interesting articles, and where participants can share their writing on any topic. Users can create their own personal page, publish posts, leave comments, follow and unfollow other users, change profile information, save quotes from article text and create drafts of their posts. The service allows you to share your Medium-style stories and collaborate with other authors using a community-based approach similar to Github.

Technology stack: Java 11, Spring, Lombok, Mapstruct, Hibernate, Flyweight, Elasticsearch, JUnit, Websockets, OAuth2 social auth, Postgresql, TypeScript, React, Redux, Redux-toolkit, Sagas, Websockets.

Watchdog - project quality analysis platform

The platform is similar to Sentry, Raygun, and Loader.io and allows you to analyze the quality of projects, track errors and perform stress testing. The main goal of the project is to monitor project issues affecting end users in real time. The platform provides issue details including stack trace, breadcrumbs, method/class name, OS, device, browser, location, host, and more. It can be used for both kinds of projects, for servers and client-oriented projects. Users can identify problems more quickly, enjoying visual timeline views, charts, tables and receive email reports if a new issue occurred. Also, clients can perform load testing without typing code to verify how their servers will respond to high load. They can flexibly set up tests in the portal and run them as many times as they need to.

Technology stack: .NET 5, REST, SignalR, RabbitMQ, MS SQL Server, Entity Framework Core,  Azure, JWT, Firebase, Elasticsearch, Kibana, Docker, SendGrid, StackOverflow API, Angular, Prime NG, HTML5/CSS3/SASS.

HypeCrafter - fundraising platform

This platform helps people create their own fundraising projects and attract sponsors. The user can support somebody’s idea and donate towards its realization. There are several features such as recommendations for project authors and investors, statistics on top themes, diagrams of hype dynamic on certain themes, information about related projects and their current state, and many more.

Technology stack: Node.JS, Typescript, PostgreSQL, MongoDB, ElasticSearch, RabbitMQ, Bootstrap, React, Redux, Redux-saga, Stripe, Express, Passport.JS, ChartJS, JWT, i18n, SASS, Socket.io, Docker, Sentry.io, Cron, React Native.

The post How we attract and train the best minds appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

Why do we need a special tool?

To explain how this idea came to my mind, I should briefly describe to you the project that I was working on for the last year. It is a cross-platform desktop data modeling application that uses React.js and Electron under the hood. For the purpose of handling data from many DB types, clouds, and schema registries, we deliver application plugins for each supported vendor. In our case, each plugin is a directory with configs and js files that are stored on the GitHub repository. To install a plugin means to clone or to download the directory from the app repo and put it into the plugin's home folder. It has over 30 plugins for now and this number is growing. Unlike users, we always need all plugins to be installed for development purposes. This makes a kind of a mess.

When you try to open a certain plugin development folder through the VS Code “open recent…” it’s common that you don’t have one that you are searching for there. And then you surf the folder where all plugins are located trying to find the one you need. Needless to say, it's a painful job.

Another case is updating plugins. It’s uncommon for users to have installed many plugins, which is why we don’t have a button like “update all” and have just “update” for each plugin, but it usually gets annoying to us to update 5 plugins one by one after a release wave.

The last inconvenient thing that I noticed after a couple of months on the project is plugins testing. It’s a usual case when we need a certain version of a plugin to reproduce a bug or one from a teammate fork and so on and so forth. This requires you to go to your browser, find the plugin repository, clone or just download its files and then place them into the correct directory. In other words, there was no way to obtain the required version of the code in a smooth way.

These three points pushed me to start developing my pet project which is now converted into a tool that is used by my teammates.

Why VS Code extension?

I started by choosing the technologies for the tool. The first thing I thought about was some kind of desktop app. However, one of the most valuable points for me was that it should be so handy that you could access the tool with a click and it must be one that doesn't interrupt your development process. Unfortunately, an app in a separate window couldn’t satisfy this purpose. The second point was cross-platform accessibility. Most of our team code using Ubuntu machines, but some of us use macOS and Windows. At the same time, all of us use VS Code as the main IDE. That was the point when VS Code extension popped into my head. It seemed to me so integrated into the coding process and so powerful that I decided to use it for an MVP.

MVP

Unfortunately, I didn't find any good external tutorial on how to start developing my own extension, so I started from the guide on the VS code website. There is an extension guides section that has a bunch of usage examples of different extension APIs. The section contains enough information to start and get acquainted with extension anatomy. I browsed different APIs and found a TreeView API which became the core thing that allowed me to list all plugins and action buttons.

To become acquainted with the TreeView API, let's build a sample extension that will use a tree view to display a simple JSON structure. By the way, it is a simplified version of the documentation browser in our team's extension. You can find the complete source code of this sample extension on my GitHub.

Here is a documentation config.

{
    "root": [
        {
            "title": "App configuration chapter",
            "link": "https://www.google.com.ua/",
            "links": [
                {
                    "title": "First link",
                    "link": "https://www.google.com.ua/"
                },
                {
                    "title": "Second link",
                    "link": "https://www.google.com.ua/"
                }
            ]
        },
        {
            "title": "App development chapter",
            "link": "https://www.google.com.ua/",
            "links": [
                {
                    "title": "Third link",
                    "link": "https://www.google.com.ua/"
                }
            ]
        }
    ]
}

It contains chapters in the root array. And links related to each chapter.

The steps for adding a tree view are to contribute the view in your package.json, create a TreeDataProvider, and register the TreeDataProvider

First, you have to let VS Code know that you are contributing a View Container using the contributes.viewsContainers Contribution Point in package.json.

"viewsContainers": {
	"activitybar": [
		{
			"id": "simple-tree-view",
			"title": "Simple tree view",
			"icon": "resources/logo.svg"
		}
	]
}

Also, you have to contribute a view using the contributes.viewsContainers Contribution Point in package.json.

"views": {
	"simple-tree-view": [ //viewsContainer views belog to
		{
			"id": "documentation-browser", 
			"name": "documentation browser ?",
			"when": "config.SimpleTreeView.showDocumentationBrowser"
		}
	]
}

The second step is to provide data to the view you registered so that VS Code can display the data in the view. To do so, you should first implement the TreeDataProvider. Our TreeDataProvider will provide documentation config data. There are two necessary methods in this API that you need to implement:

• getChildren(element?: T): ProviderResult<T[]> - Implement this to return the children for the given element or root (if no element is passed). When the user opens the Tree View, the getChildren method will be called without an element and if they expand the Tree View item the getChildren method will be called with this item as an element.
• getTreeItem(element: T): TreeItem | Thenable<TreeItem> - Implement this to return the UI representation (TreeItem) of the element that gets displayed in the view.

export class DocumentationProvider implements TreeDataProvider<BasicTreeItem> {
		getTreeItem(element: Chapter): TreeItem {
        return element;
    }

    getChildren(element?: BasicTreeItem): Thenable<BasicTreeItem[]> {
        if (element instanceof Chapter) {
            return getChapterLinksItems(element.nestedLinks); //root element child (link)
        }
        return getChaptersItems(); //root element (chapter)
    }
}

Also, we need a treeItemService that will fetch data from the config hosted on GitHub Pages and convert it into TreeItems.

export const getChapterLinksItems = async (nestedLinks: LinkNode[]): Promise<TreeItem[]> => {
	const links: Link[] = convertLinksItems(nestedLinks);
	return Promise.resolve(links);
};

export const getChaptersItems = async (): Promise<Chapter[]> => {
	try {
		const config = await getDocumentationConfig(); //fetching documentation config
		return Promise.resolve(convertChaptersItems(config.root));
	} catch (e) {
		window.showErrorMessage("Error occurred while fetching documentation config ?");
		return Promise.resolve([]);
	}
};

const convertChaptersItems = (chapters: ChapterNode[]): Chapter[] =>
	chapters.map(
		(chapter) =>
			new Chapter( //extends TreeItem
				chapter.title,
				chapter.link,
				chapter.links,
				TreeItemCollapsibleState.Collapsed //means that this tree item can have children
			)
	);

const convertLinksItems = (links: LinkNode[]): Link[] =>
	links.map((link) => 
		new Link( //extends TreeItem
			link.title, 
			link.link, 
			TreeItemCollapsibleState.None //means that this tree item can't have children
		)
	);

The third step is to register the above data provider to your view in the extension.ts. This can be done in the following way:

export async function activate(context: ExtensionContext) {
	const documentationProvider = new DocumentationProvider();
	window.registerTreeDataProvider('documentation-browser', documentationProvider); //bind documentation-browser to documentationProvider
}

extension.ts is the main file of the extension. It contains a view to provider bindings and commands registrations .

Here is the result? :

Finally, let's add controls to be able to open listed links in the browser.

To implement this, you should follow three steps: contribute the command in your package.json , implement business logic in the DocumentationProvider , and bind the handler with the command in the extension.ts.

First, you have to contribute a command and set its place using the contributes.commands and contributes.menus Contribution Points in package.json.

"commands": [ // creating command
	{ 
		"command": "documentation-browser.openLink", //command name
		"title": "Go to documentation",
		"icon": {
			"light": "resources/light/goByLink.svg", //icon for the control (light theame)
			"dark": "resources/dark/goByLink.svg" //icon for the control (dark theame)
		}
	}
],
"menus": { // setting a place for created command
	"view/item/context": [
		{
			"command": "documentation-browser.openLink", //related command name
			"when": "view == documentation-browser", //will be visible only on documentation-browser view
			"group": "inline"
		}
	]
}

Next, let's create a method to handle this command in DocumentationProvider :

openExternalURI(link: string) {
      env.openExternal(Uri.parse(link)); // opens link in your browser
}

Finally, you have to bind your command and a handler in extension.ts.

export async function activate(context: ExtensionContext) {
	...
	registerCommands(documentationProvider);
}

const registerCommands = (documentationProvider: DocumentationProvider) => {
	commands.registerCommand('documentation-browser.openLink', node =>
		documentationProvider.openExternalURI(node.link)
	)
}

As result, we are able to open every item link by clicking the control on the item.

Now that you have a basic idea of how an extension works under the hood, let me show you how 0.1.0 (the MVP) looked like.

I implemented six main features:

• Listing of installed plugins and their current versions;
• Ability to open the certain plugin in a new VS Code or Sublime window;
• Ability to open a folder that contains all plugins in a new VS Code or Sublime window;
• Ability to update all outdated plugins by a single button;
• Highlighting outdated plugins.

As you might have guessed, plugins were listed in the Tree view. I added a vendor logo as a tree item icon to simplify the visual search of the needed plugin. Also, VS Code provides a built-in highlighting and filtering of items that have entered symbols in their title.

Controls that are related to a single plugin were placed on each plugin item and ones related to all plugins were placed on the top of the plugin's browser view. Also, I added a bunch of settings that allows each developer to leave only controls that they really needed. As you can see, Sublime related buttons are hidden on the description map illustration.

The prototype allowed me to check whether it is convenient to use these controls placed in such a way or not.

How does it look like now?

MVP solved many pains and proved that it's pretty convenient to manage plugins in a tree view, but we still had some pains to solve, so I continued releasing new versions. Now, 5 months after the MVP, the extension evolved to version 0.4.1. Many significant features have been released and some colleagues have joined the development.

Unfortunately, VS code documentation is not really filled with examples of complex features and VS code API capabilities, so the next step that helped me a lot in my development journey was examining the code base of other extensions to find out how they implemented any of their features. Lots of pretty popular extensions keep repositories public, like GitLens. There are also two important documentation chapters: VS Code API reference - you can always refer to it in case you need to find a way how to interact with IDE or OS features from your extension. Contribution points reference - it contains documentation on how to set up extension appearance, key bindings, controls, configs, etc.

By this time, we’ve added more functionality to plugins items, so you have the possibility to view all forks, branches of forks, opened pull requests, branches, and tags of each plugin repo. Moreover, you can install plugins from any of these sources. Also, using an OctoCat button on a fork item you can do a git clone of the forked repo. In other words, just fork a repo on the GitHub site then switch to VS Code, and with a single click replace the installed plugin with the ready for development cloned one.

After solving the known pains of the team I thought about what else could be integrated into the extension. Recently, we started the development of in-project documentation and I decided to add it as a documentation browser. It’s a convenient way to collect and group important project documentation links. You can easily add new chapters and links or edit existing ones just by modifying the JSON config which is hosted with GitHub pages. Your changes will be instantly visible for every extension user.

Here is how documentation browser looks like:

We used many VS Code API features to cover over needs, but the most common thing the user faces are notifications. We use them to notify developers about, errors, task progress, and to ask some actions which could be required during plugins update or clone processes.

Is it worth it?

Absolutely, yes! Using the extension, we improved our plugins management and development experience quite a bit. Moreover, we are on the way to converting the plugins management extension to an entire project hub that will contain all the information and tools required for development. By the way, the documentation browser is the first milestone of this trip.

It seems to me that if you develop a long-term support product with some project-specific frequent actions that could be automatized, VS Code extension may be a good way to implement this. Also, as in our team's case, an extension development initiative can spread over the team and result in a team PET project.

I hope this blog post provides you with some ideas on how such an extension could improve your work experience. Just keep in mind that VS Code extension is an extremely powerful tool, which is mostly just limited by your needs and imagination!

The post Developing VS Code extension to resolve your dev team pains appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

Let's set up a simple project to see how it works!

npm init -y

Install ESLint. ESLint is a tool for identifying and reporting on patterns found in JavaScript code.

npm install eslint -DE

ESLint configuration file example:

# .eslintrc.yml
 
env:
es2021: true
browser: true
 
extends:
  - eslint:recommended
 
parserOptions:
ecmaVersion: 2021
sourceType: module

Also, do not forget to update the scripts section in the package.json.

// scripts in package.json

{
 "scripts": {
 "lint:js": "eslint src/**/*.js",
 "lint": "npm run lint:js"
 }
}

Github Actions in general

Github Actions are commands for github to run some code every time an event occurs (Push, Merge, PR and etc.). The code runs on github virtual machines.

What does this code do? Anything. It allows you to automate things necessary for your development process: run tests/lints, deployment, and notify people.

Github Actions give a nice and free CI/CD and also allow you to create a flexible and easily configurable system for development.

Let's look at a simple example — for each push to one of the environment branches (development, staging, production) we will run linting (example will use JavaScript).

Action Example:

# .github/workflows/lint.yml

name: Lint # name of the action (displayed in the github interface)

on: # event list
pull_request: # on a pull request to each of these branches
branches:
  - development
  - staging
  - production

env: # environment variables (available in any part of the action)
  NODE_VERSION: 16

jobs: # list of things to do
  linting:
    name: Linting # job name (unique id)
    runs-on: ubuntu-latest # on which machine to run
    steps: # list of steps
      - name: Install NodeJS
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Code Checkout
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: npm ci

      - name: Code Linting
        run: npm run lint

Steps syntax

• name — needed to be displayed in the github interface;
• uses — specify the name of custom actions if we want to use it. You can find many ready-made actions in the marketplace;
• with — parameters for custom actions;
• run — runs commands in the shell. It is forbidden to use a shell commands with custom actions.

That's it, we took apart a small but useful example of the github action!

In the github interface, the runs will look like this:

Run History

Inside Each Run

Branch protection

To prohibit merging a pull request when linting fails, go to the repository settings and set the merge rules for the branch you want. To do this we need to check the Require status checks to pass before merging checkbox and select the checks we need. In our case, this is Linting (the name is taken from the action config).

Now in each pull request to the branch we need we will see the result of the action. If all is well, the action will be passed:

But if we broke something the action will fail:

Inside each action we can find out what exactly went wrong. For example, here the action tells us that there are unused variables in the code:

Linting other files

For now, we only check the format of the js files. It is not very good. Attention should be paid not only to js files, as there are usually other file formats that developers pay less attention to. Let's fix this and add additional linters to protect our code.

Style Lint

Stylelint is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

I use a simple example in which I just extend the config from the recommended. But even with this couple of lines we will protect our styles.

Stylelint supports a huge number of configuration options. Be sure to check the documentation to find the rules that fit your project.

npm install stylelint stylelint-config-standard -DE

Stylelint configuration file example:

# .stylelintrc.yml
 
extends:
  - stylelint-config-standard

Updated package.json:

// scripts in package.json

{
 "scripts": {
 "lint:css": "stylelint src/**/*.css",
 "lint:js": "eslint src/**/*.js",
 "lint": "npm run lint:css && npm run lint:js"
 }
}

EditorConfig Lint

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

npm install editorconfig-checker -DE

EditorConfig configuration file example:

# .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
charset = utf-8

Updated package.json:

// scripts in package.json

{
 "scripts": {
 "lint:editorconfig": "editorconfig-checker",
 "lint:css": "stylelint src/**/*.css",
 "lint:js": "eslint src/**/*.js",
 "lint": "npm run lint:editorconfig && npm run lint:css && npm run  lint:js"
 }
}

Ls Lint

Ls-lint — file and directory name linter. Bring some structure to your project directories.

npm install @ls-lint/ls-lint -DE

Ls Lint configuration file example:

# .ls-lint.yml
 
ls:
  .dir: kebab-case
  .js: kebab-case
  .css: regex:([.a-z]*)([-.][a-z]+)*
 
ignore:
  - node_modules
  - .git

Updated package.json:

// scripts in package.json

{
 "scripts": {
 "lint:ls": "ls-lint",
 "lint:editorconfig": "editorconfig-checker",
 "lint:css": "stylelint src/**/*.css",
 "lint:js": "eslint src/**/*.js",
 "lint": "npm run lint:ls && npm run lint:editorconfig && npm run  lint:css && npm run lint:js"
 }
}

Now 4 linters will run for each pull request. I hope you and your team will follow and improve the linters configs. And you will always see the linter result without errors:

Pricing

Github actions are not free. Now the free plan gives ~2000 minutes. Usually this is enough for small and medium projects.

You can always find up-to-date information on the use-plan here.

Conclusions

You know the basics of Github Actions now, and I hope this article clarifies all of the basic principles.

This example does not cover all the opportunities. Github has a wonderful documentation, which describes many interesting things!

Linting code is just an example. Everything can be automated.

Some examples:

• Running tests on each pull request;
• Deploying on push to production branch;
• Prettify your code before merging;
• Publishing packages;
• Sending notifications on each pull request/issue, etc.

The post Lint your project with Github Actions appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

Clutch is a B2B review and rating platform that conducts extensive research on companies and ranks them based on quality services, customer feedback, ratings and reviews, project engagement methodologies, the scope of the clients served, their market presence, and brand reputation. Every year, the site holds an awards cycle to celebrate and highlight the highest-performing companies from different industries and locations worldwide.

At Binary Studio, client satisfaction is our priority. We work hard to fulfill our clients' needs and build high-quality solutions that exceed their expectations. 

We would like to thank our esteemed clients for helping us achieve our goals and getting us this prestigious award! We couldn't have gotten this far without their trust and support. Their excellent reviews also continue to ignite our passion for our work. Their genuine appreciation of our efforts touches us, and we want to assure everyone that we will keep doing our best. Here's one of the latest perfect scores a client gave us:

Visit our Clutch page to learn more about what our clients are saying about us.

Looking for a team that can elevate your business? Take the first step forward and talk to our experts! Thanks to our rigorous Academy at Binary Studio, we recruit the top 0.5% of software specialists in Ukraine and other CEE countries. Want to know more? Drop us a line, and let's talk about how we can help your business transform.

The post Binary Studio Recognised as Top 1000 Service Providers in 2021 appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

You close the campaign, making angry not-so-fast but still loyal users, and start looking for a source of the issue. It turns out that the problem was with the promo codes.

Every user receives a link that looks something like this: “https://service.com/promo?code=2”. Smart (but still loyal) users try their luck with code #3, then #4, and at some time they get to their lucky number with a lot of subsequent ones. Pretty obvious, but still a problem.

Or it may be another issue with users getting access to resources they are not supposed to reach. For example, the photo of your favorite puppy can be found by this link “https://photos.com/1001”. But you can’t deny that it’s so tempting to try what is in “https://photos.com/1002” and so on. 

There are a couple of ways to deal with this issue:

• Basic authorization with access control policies, defining what resource each user can get (the best solution for the second scenario with retrieving other users’ photos)
• Input validation (checking what exactly the user wants to get)

Of course, all these scenarios may sound trivial. But websites nowadays still suffer from different vulnerabilities, and there is one more solution to deal with them - insecure direct object reference prevention.

The main idea is not to expose the identifiers of the resources for the end-user. There will be “incomprehensible garbage” that only your backend can deal with, getting it from requests, routes, or query parameters. For example, “https://photos.com/gfdkj4t34-g0gd _V” instead of “https://photos.com/1001”. We’ll implement this in a basic .NET Web API application that will be able to encrypt all outcoming IDs and decrypt incoming ones.

One class to rule them all

First, we need one class that will represent this encrypted value. 

It’s important since we don’t want to do encryption manually every time. We could also make middleware that would encrypt all values of some specific type, but that is a very inflexible solution. For example, if IDs in your system are integers, there is no way for returning all of them as encrypted.

Probably, it’ll be easier to represent IDs as Guid (UUID) values, but imagine that at some point, you’d need to return some decrypted value. It creates difficulties.

Instead of adding a separate class, it’s also possible to make an attribute, but that’s not convenient. So we’ll go with a separate class.

Thinking ahead, we can make this class generic to encrypt data of any type: from string and integers to Guids. But if you’re 100% sure that it’ll be used just for your IDs, then make it strongly-typed.

This class won’t store any complex logic. We need it only for storing data about the identifier. It’s going to have one property with the id itself that we can access directly and a constructor for creating new instances.

public class Id<T>
{
    public T Value { get; }

    public Id(T value)
    {
        Value = value;
    }
}

From now on we can use this type for our identifiers. For example,

public class Entity
{
    public Id<Guid> Id { get; set; }
    public string name { get; set; }
}

If you do decide to make this class strongly-typed and use it only for the IDs (that are of Guid type), then it will be like this:

public class Id
{
    public Guid Value { get; }

    public Id(Guid value)
    {
        Value = value;
    }
}

Encryptor

As for the encryption, we can implement it ourselves or use existing libraries. Since the main idea behind this material is to show a practical implementation of indirect object reference prevention, there is no sense in reinventing the wheel. I’m using NETCore.Encrypt (https://www.nuget.org/packages/NETCore.Encrypt).

Though there may be situations when you can consider creating your solution. For example, if you go with Guids, you can significantly reduce the length of your final value. Since AES encryption works with blocks of 128 bits and one Guid is exactly 128 bits, you can get rid of paddings, which would result in a much shorter encrypted value (though no padding may reduce security also). But it’s just a point for consideration.

So, our encryption class can be as simple as this:

public interface IEncryptor
{
    public string Encrypt(object o);
    public string Decrypt(string o);
}

public class Encryptor : IEncryptor
{
    private readonly string _key;
    private readonly string _iv;

    public Encryption(IConfiguration configuration)
    {
        var section = configuration.GetSection("Encryption");
        _key = section.GetValue<string>("Key");
        _iv = section.GetValue<string>("IV");
    }
    public string Encrypt(object data)
    {
        return EncryptProvider.AESEncrypt(data.ToString(), _key, _iv);
    }

    public string Decrypt(string data)
    {
        return EncryptProvider.AESDecrypt(data, _key, _iv);
    }
}

I skip different checks for the sake of brevity and leave only the essential stuff, but it’s important to foresee different scenarios.

We’ll store the key and the initialization vector needed for AES encryption to work in the appsettings.json file, but they can reside anywhere else.

{
  "Encryption": {
    "Key": "U7KzmRT1Y69VkbqK7zLf7m64aPaXiS9m",
    "IV": "2P2AEIuWfStFT7Yy"
  }
}

The only thing left is to register this service as a singleton and we can use its interface to encrypt and decrypt data.

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<IEncryptor, Encryptor>();
}

In this case, we will be able to use this service anywhere but still have to call it manually. There is yet an opportunity to automate conversion, for which we need to use JSON converters.

JSON converter

In ASP.NET Core we can create custom JSON converters with defined logic for reading and writing values in a specific format.

• We want our Id<Guid> be converted into an encrypted string while serializing.
• And we need to deserialize an encrypted string, decrypt it and save the value in Id<Guid> object.

public class GuidConverter : JsonConverter<Id<Guid>>
{
    private readonly IEncryptor _encryptor;

    public Converter(IEncryptor encryptor)
    {
        _encryptor = encryptor;
    }

    public override Id<Guid> Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        object decryptedGuid = _encryptor.Decrypt(reader.GetString());
        Guid.TryParse(decryptedGuid.ToString(), out Guid value);
        return new Id<Guid>(value);
    }

    public override void Write(Utf8JsonWriter writer, Id<Guid> value, JsonSerializerOptions options)
    {
        writer.WriteStringValue(_encryptor.Encrypt(value.Value));
    }
}

Microsoft suggests using factories to extend JSON converters but for simplicity let's use a converter directly.

In a Read method, we get a string value from the reader, decrypt it, convert it to Guid and return it in the form of an Id<Guid> object. You can imagine how many issues can happen in this step. So it makes sense to make this method generic and add different checks.

It’s even simpler inside a Write method: encrypt a value and write it into a string. And that’s it.

Next step, we need to register that converter:

public void ConfigureServices(IServiceCollection services)
{
    var encryptor = new Encryptor(Configuration);
    services.AddControllers().AddJsonOptions(x => 
        x.JsonSerializerOptions.Converters.Add(new Converter(encryptor)));
}

And now it’ll automatically handle serializing an Id<Guid> object into an encrypted string and create an Id<Guid> object from an encrypted string.

Note:

There is one more point for creating your implementation of encryption, since, for example, the chosen library generates a string in base64 format, which includes symbols like “\” and “+”. It means that after encryption, you also need to encode the output. It will make it usable not only in the body of the response but also as a part of the route or a query parameter.

And if you make encryption yourself, it’s quite easy to convert encrypted bytes into the url-safe format of base64, where “/” and “+” are substituted by “-” and “_”.

IDOR prevention in action

The last step is to see how it all works in practice. For example, we have this basic controller.

[Route("api/[controller]")]
[ApiController]
public class EntitiesController : ControllerBase
{
    private readonly Entity _entity = new(new Id<Guid>(Guid.NewGuid()), "Entity");

    [HttpGet]
    public Entity Get() => _entity;

    [HttpPost]
    public Guid Post([FromBody] CreateEntity request) => request.Id.Value;
}

public class CreateEntity
{
    public Id<Guid> Id { get; set; }
    public string Name { get; set; }
}

Let’s make a request GET /api/entities. It should return an instance of an Entity class that is part of the controller. We generate an id automatically in the application, but in a response, it should be encrypted. And here’s the response:

{
  "id": "vqvKf2FDGuZ/X7YfQd5zb2oqY6TeKggN9kGNUh2/x38mHqRSl5str25XKGX9qfTl",
  "name": "Entity"
}

As you see, it’s impossible even to predict what real value is hidden beneath the cipher so we can sleep well.

Finally, let’s make a request POST /api/entities that should return an encrypted Guid value. We’ll use the response from the previous request as a body. The response of the POST endpoint:

"ca51d067-11e2-4ccc-a0d0-7ac190b994c9"

Conclusion

Although this implementation of indirect object reference prevention implies some far-reaching features of the application, such as an obligation to use some specific class for identifiers, it still leaves a lot of stuff under the hood, so we shouldn’t deal with encryption or decryption manually.

You can extend and improve this example in multiple ways:

• Store an encrypted version of the id inside Id<T> class to always know in what form it’ll be returned to the client
• Implement your encryptor to change the size of the encrypted value or the padding mode (ISO10126, for example, will generate a unique ending each time on encryption)
• Create JSON converter factory sticking to best practices suggested by Microsoft
• Or maybe something else

This foundation was meant to keep simple, but it serves one purpose: to show how to implement IDOR prevention in ASP.NET Core application.

Source code: https://github.com/Jyuart/IDORP

The post IDOR prevention in ASP.NET Core appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

Most likely, you have worked with his product. 

Answer

Ryan Dahl is a software engineer and the original developer of the Node.js (~2009 year). In January 2012, Dahl announced that he turned over the reins to NPM creator.

In 2018 he made a presentation 10 things I regret about Node.js at the JSConf conference. Also, at this presentation, he announced Deno — a secure runtime for JavaScript and TypeScript.

In this article, we will take a look at Deno and how it compares to Node.js to help understand what they have in common, how they differ and is it real that Deno will kill Node.js?

Project

Let's imagine a situation: A product owner comes to us and tells us to rewrite the project from Node to Deno.

But why? Who knows, it’s just an example. 

For now, let's imagine that there is no other way around this decision and we need to do it. But then what? Do we really need to rewrite most of the code in the project?

Let's check this with an example of a small project.

├── node_modules
├── public
├── src/
│   ├── api/
│   │   ├── /* apis */
│   │   └── api.ts
│   ├── common/
│   │   ├── enums/
│   │   │   ├── /* enums */
│   │   │   └── index.ts
│   │   ├── interfaces/
│   │   │   ├── /* interfaces */
│   │   │   └── index.ts
│   │   └── types/
│   │       ├── /* types */
│   │       └── index.ts
│   ├── helpers/
│   │   ├── /* helpers */
│   │   └── index.ts
│   ├── repositories/
│   │   ├── /* repositories */
│   │   └── repositories.ts
│   ├── services/
│   │   ├── /* services */
│   │   └── services.ts
│   └── server.ts
├── .env
├── .eslintrc.yml
├── package-lock.json
├── package-lock.json
└── tsconfig.json

Project structure

// package.json
 
{
 "private": true,
 "scripts": {
   "lint:js": "eslint --ext .js,.ts src",
   "lint": "npm run lint:js",
   "start": "nodemon --exec ts-node --files -r dotenv/config ./src/server.ts"
 },
 "dependencies": {
   "axios": "0.21.1",
   "dotenv": "8.2.0",
   "koa": "2.13.1",
   "koa-bodyparser": "4.3.0",
   "koa-router": "10.0.0",
   "koa-static": "5.0.0"
 },
 "devDependencies": {
   "@types/jest": "26.0.22",
   "@types/koa": "2.13.1",
   "@types/koa-bodyparser": "4.3.0",
   "@types/koa-router": "7.4.2",
   "@types/koa-static": "4.0.1",
   "@types/node": "14.14.41",
   "@typescript-eslint/eslint-plugin": "4.22.0",
   "@typescript-eslint/parser": "4.22.0",
   "eslint": "7.24.0",
   "jest": "26.6.3",
   "nodemon": "2.0.7",
   "prettier": "2.2.1",
   "ts-jest": "26.5.5",
   "ts-node": "9.1.1",
   "typescript": "4.2.4"
 }
}

Dependencies

// src/server.ts
 
import { resolve } from 'path';
import Koa from 'koa';
import serve from 'koa-static';
import Router from 'koa-router';
import bodyParser from 'koa-bodyparser';
import { ENV } from './common/enums';
import { initRepositories } from './repositories/repositories';
import { initServices } from './services/services';
import { initApis } from './api/api';
 
const app = new Koa();
 
app.use(bodyParser());
 
const repositories = initRepositories();
 
const services = initServices({
 repositories,
});
 
const apiRouter = initApis({
 Router,
 services,
});
 
app.use(apiRouter.routes());
 
app.use(serve(resolve(__dirname, '../public')));
 
app.listen(ENV.APP.SERVER_PORT);
 
console.log(`Listening to connections on port — ${ENV.APP.SERVER_PORT}`);

Root file

Nothing special. The project is written using a node-framework - Koa (next generation of the Express node-framework).

What it can do:

• Serve static content

> curl "http://localhost:3000"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello world ?</h1>
  </body>
</html>

• Has a posts api (wrapper for the jsonplaceholder service).

> curl "http://localhost:3000/api/v1/posts/1"

{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"}

• Has a books CRUD api (all data is stored in the json format).

> curl "http://localhost:3000/api/v1/books/1"

{"id":"1","name":"DDD"}

That's all. Perfect!

Let's move on to the most interesting part.

From Node to Deno

Before we start, let's take a look at the definition of these two technologies that we can find on the technology homepage.

Node — is a JavaScript runtime.

Deno — is a secure runtime for JavaScript and TypeScript.

Both definitions contain runtime and JavaScript. Does it mean that we can run the same code on both platforms? Not at all.

Let's try to run the code that we wrote on NodeJS base using Deno (if you don't have Deno installed yet, you can find how to do it here):

> deno run src/server.ts

Aaaand we get an error:

error: Cannot resolve module "file:///src/services/services" from "file:///src/server.ts".
 at file:///src/server.ts:8:0

But interestingly, we did not receive an error saying that we use TypeScript code. This is because Deno supports TypeScript out of the box!

If we tried to run code written with TypeScript in NodeJS without using ts-node (or any other additional package), we would immediately get errors about the unknown syntax.

Okay, let's try to fix the differences between Node and Deno.

First of all, let's install an official extension to help us develop on Deno and add this to the editor settings:

// .vscode/settings.json
 
{
 "deno.enable": true,
 "deno.lint": true,
 "deno.unstable": true
}

Then, let's remove the things that are completely useless for Deno that are in NodeJS.

> rm -rf node_modules package-lock.json package.json

Stop what? Where do we store our packages now?

Do not worry, we will store the dependencies we need here:

// src/dependencies.ts
 
import 'https://deno.land/x/dotenv/load.ts';
import * as Oak from 'https://deno.land/x/oak/mod.ts';
 
export { Oak };

Two questions immediately arise: what is dependencies.ts and why do we use a link to import packages?

Let's start from the end. Two reasons that Ryan talked about in his presentation and that he tried to fix this in Deno are node_modules and package.json.

Why:

package.json:

• Allow Node's require() to inspect package.json files for "main";
• Included NPM in the Node distribution, which much made it the defacto standard;
• It's unfortunate that there is centralized (privately controlled even) repository for modules;
• Allowing package.json gave rise to the concept of a "module" as a directory of files;
• This is no a strictly necessary abstraction - and one that doesn't exist on the web;
• package.json now includes all sorts of unnecessary information. License? Repository? Description? It's boilerplate noise;
• If only relative files and URLs were used when importing, the path defines the version. There is no need to list dependencies.

node_modules:

• It massively complicates the module resolution algorithm;
• vendored-by-default has good intentions, but in practice just using $NODE_PATH wouldn't have precluded that;
• Deviates greatly from browser semantics;
• It's my fault and I'm very sorry;
• Unfortunately it's impossible to undo now.

(The reasons are taken from Dahl's presentation). When the program is launched for the first time, modules are downloaded and cached in the system. And when reused, they will be taken from there. While reusing modules, they will be taken from the cache.

Now about dependencies.ts. It's just a file that I created to store all third-party project's dependencies (the name can be whatever). Third-party modules can be included in any part of the program but this is not a good practice. It is better to keep all the modules in one place.

Let's try to run the code again. We get the following error:

error: Is a directory (os error 21)
 at file:///src/server.ts:6:0

On the sixth line we have this:

// src/server.ts
 
import { ENV } from './common/enums';
 
// src/common/enums/index.ts
 
export * from './api';
export * from './app';
export * from './file';
export * from './http';

Everything looks fine. What is the problem?

It would seem that we can miss the file name if the file is called index.

This is possible but only in NodeJS. In Deno we must always explicitly specify the file with its extension.

These are two more things Dahl regrets about Node:

index.js:

• I thought it was cute because there was index.html;
• It needlessly complicated the module loading system;
• It became especially unnecessary after require supported package.json.

modules without the extension:

• Needlessly less explicit;
• Not how browser JavaScript works. You cannot omit the .js in a script tag src attribute;
• The module loader has to query the file system at multiple locations trying to guess what the user intended.

Let's fix this and a few other errors that we will run into.

1. Resole magic names

// src/common/enums/index.ts

export * from './api/index.ts';
export * from './app/index.ts';
export * from './file/index.js';
export * from './http/index.ts';

2. Resolve magic variables/functions/modules that are only available in Node

error: Uncaught ReferenceError: __dirname is not defined

- app.use(serve(resolve(__dirname, '../public')));
+ await Oak.send(ctx, ctx.request.url.pathname, {
+   root: 'public',
+   index: 'index.html',
+ });

error: Uncaught ReferenceError: require is not defined

- const contentType = require('./content-type.enum');
+ import contentType from './content-type.enum.ts';

error: Uncaught ReferenceError: module is not defined

- module.exports = {
+ export {

3. Resolve take variables from env

// src/common/enums/app/env.enum.ts

- const { PORT, PLACEHOLDER_API_URL } = process.env;

const ENV = {
  APP: {
-    SERVER_PORT: <string>PORT,
+    SERVER_PORT: Number(Deno.env.get('PORT')),
  },
  API: {
    V1_PATH: '/api/v1',
  },
  API_URL: {
-    PLACEHOLDER_API: <string>PLACEHOLDER_API_URL,
+    PLACEHOLDER_API: <string>Deno.env.get('PLACEHOLDER_API_URL'),
  },
} as const;

4. Resolve writeFile/readFile helpers

// src/helpers/fs/read-file/read-file.helper.helper.ts

- import fs from 'fs/promises';

- const readFile = (path: string): Promise<Buffer> => {
-   return fs.readFile(path);
+ const readFile = (path: string): Promise<string> => {
+   return Deno.readTextFile(path);
};

export { readFile };

// src/helpers/fs/write-file/write-file.helper.helper.ts
- import fs from 'fs/promises';

- const writeFile = (path: string, data: string | Uint8Array): Promise<void> => {
-   return fs.writeFile(path, data);
+ const writeFile = (path: string, data: Uint8Array): Promise<void> => {
+   return Deno.writeFile(path, data);
};

export { writeFile };

5. Resolve Paths

src/repositories/book/books.repository.ts

...

- const booksDataPath = path.resolve(__dirname, './books.json');
+ const booksDataPath = new URL('./books.json', import.meta.url).pathname;

class Books implements IRepository<Book> {

  ...

  private _saveBooks(books: Book[]): Promise<void> {
-    return writeFile(booksDataPath, JSON.stringify(books));
+    return writeFile(
+      booksDataPath,
+      new TextEncoder().encode(JSON.stringify(books)),
+    );
  }
}

6. Fetch out of the box

// src/services/http/http.service.ts

class Http {
-  #http: AxiosInstance;
-
-  constructor() {
-    this.#http = axios.create({});
-  }

  public load<T = unknown>(
    url: string,
-    options: AxiosRequestConfig = {
+    options: RequestInit = {
      method: HttpMethod.GET,
    },
  ): Promise<T> {
-    return this.#http
-      .request<T>({ url, ...options })
-      .then(Http.getData)
-      .catch(Http.catchError);
+    return fetch(url, options)
+      .then(this._checkStatus)
+      .then((res) => this._parseJSON<T>(res))
+      .catch(this._throwError);
  }

-  static getData<T>(response: AxiosResponse<T>): T {
-    return response.data;
+  private _checkStatus(response: Response): Response | never {
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    return response;
  }

-  static catchError(err: AxiosError<unknown>): never {
-    const { response } = err;
+  private _parseJSON<T>(response: Response): Promise<T> {
+    return response.json();
  }

-    throw new Error(response?.statusText);
+  private _throwError(err: Error): never {
+    throw err;
  }
}

Of course there were more changes, but these are the most interesting things that deserve attention.

// src/server.ts
 
import { Oak } from './dependencies.ts';
import { ENV } from './common/enums/index.ts';
import { initRepositories } from './repositories/repositories.ts';
import { initServices } from './services/services.ts';
import { initApis } from './api/api.ts';
 
const app = new Oak.Application();
 
const repositories = initRepositories();
 
const services = initServices({
 repositories,
});
 
initApis({
 Router: Oak.Router,
 services,
 app,
});
 
app.use(async (ctx) => {
 await Oak.send(ctx, ctx.request.url.pathname, {
   root: 'public',
   index: 'index.html',
 });
});
 
app.listen({
 port: ENV.APP.SERVER_PORT,
});
 
console.log(`Listening to connections on port — ${ENV.APP.SERVER_PORT}`);

Root file using Deno

Almost the same, isn't it? 

Permissions

Finally, let's run our refactored app!

We are still getting the error:

error: Uncaught PermissionDenied: Requires env access to "PORT", run again with the --allow-env flag
   SERVER_PORT: Deno.env.get('PORT'),

But this time it is an error that was not received before.

Another issue which Ryan regrets is security in NodeJS:

• V8 by itself is a very good security sandbox;
• Had I put more thought into how that could be maintained for certain applications, Node could have had some nice security guarantees not available in any other language;
• Example: Your linter shouldn't get complete access to your computer and network.

Every time we run a program on Deno, we need to specify the appropriate permissions that it will possess.

To run our app we need to use these permissions:

> deno run --allow-env --allow-read --allow-write --allow-net src/server.ts

By this link you can find a list of all permissions.

Let's try to run it again:

> deno run --allow-env --allow-read --allow-write --allow-net src/server.ts
 
Listening to connections on port — 3000

Let's try to call the APIs:

> curl "http://localhost:3000/api/v1/posts/1"
 
{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"}

> curl "http://localhost:3000/api/v1/books/1"
 
{"id":"1","name":"DDD"}

Everything works! 

But look at the code differences:

Amazing, isn't it?

Okay-okay, most of the changes (almost all) are due to dependencies, since now we only have 2 dependencies.

Easter eggs

Do you like easter eggs? Hope so ?

Let's see something:

const checkIsSameStr = (stringA: string, stringB: string): boolean => {
 return Array.from(stringA.toLowerCase()).every((it) => {
   return stringB.toLowerCase().includes(it)
 })
}
 
const isEasterEgg = checkIsSameStr('Node', 'Deno'); // true
 
// Koa - the middleware framework for Node
// Oak - the middleware framework for Deno
const isEasterEgg = checkIsSameStr('Koa', 'Oak'); // true

Not sure if this was done on purpose (I hope so), but there is something similar here, isn't there? 

(There are a number of other packages that are named similarly.)

Conclusions

Until recently Node had almost no competitors (io.js ?) and was almost the only platform where we could run JavaScript on the server.

But now, Node has a worthy competitor, Deno — a secure runtime for JavaScript and TypeScript, who will step on its heels every day.

Competition is usually always good!

This article does not cover all topics such as code linting, code formatting, code testing, etc. By the way, most of these things Deno has out of the box ?

There is no need to run and rewrite everything but at least everyone should take a look and try Deno. People who have already worked with Node shouldn't take a lot of effort to make friends with this beautiful technology.

The post The product owner comes and says: We need to rewrite everything from Node to Deno… appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

As you can imagine, the IT industry is at the forefront of this activity. It is this industry that not only processes all quintillion of data. Systematization, analytics, and, of course, generation. These are the tasks that modern companies perform. The results of their activities, at the same time, make our life richer and better, opening up new, unimaginable horizons of modern technologies and the future, descended from the screens of fantastic films and the pages of novels. This work is more like art and, with its creativity, forms an absolutely new reality. And without a doubt, this is a resource-intensive and difficult job. It is vital to avoid burnout and not turn your favorite activity into an excruciating routine, where the result changes over time.

This is why thousands of programs and strategies are developed that minimize costs and optimize resources. The correct and balanced use of such tools will allow not only to diversify efforts, costs, and human potential. But it will also save time for the production of additional projects and the implementation of new ideas and dreams.

A project delivery model - is one of the cornerstones of the modern developing IT industry. It is unlikely that you have not heard about it, and if you have not, you have to get acquainted with this concept. This term is being used more and more in the industry. And its relevance is becoming more evident. Especially in the context of the Covid-19 pandemic, which completely changed the rules of the game. Especially when it comes to workforce management, consolidation, and segregation of intellectual assets for optimal results in software development.

What is an onsite model?

Onsite or the so-called onshore delivery model is a prevalent concept today, a topic of discussion and controversy regarding its application. As you study this model, don't be fooled, because the onsite and onshore term is used in many areas of software development. Moreover, these concepts have their own meanings in other areas of our life: geography and economics. But, in the context in which we discuss this concept today, onsite means a method of software development and delivery in which qualified developer specialists carry out activities at the client's site.

The result of this symbiosis is the collaboration of the contractor's specialists and the customer's employees. Accumulation of information, development, project support, and implementation of best practices - all these tasks must be solved by a temporary team staffed by the customer and the contractor.

This model has obvious advantages, but at the same time, a sufficient number of negative aspects. The lack of clear management vertical because the tasks are set by the customer, implemented by the performer, and performed by joint efforts, can create chaos. Ah, chaos is not the best ally when trying to create something new and innovative.

The key benefits of the onsite model.

But, on the other hand, if you are creating a reengineering project or another project based on a repetitive cycle of tasks, this approach to development can work and be much more effective. The same statement is true if, at the initial stage, the customer does not have a clear understanding of the project and the requirements for it.

The constant interaction of the customer's specialists and the development team, with the right planning and understanding of the risks, can bring amazing results with less effort.

The onshore model is usually ideal when the end-user needs a quick and high-quality improvement to existing systems. Or when you need an organic and rapid introduction of new technologies. In such cases, the advantage of this algorithm will be your trump card.

A simple and fast exchange of information is almost the main factor that the onshore type will offer. Starting with global information clusters, which will form the basis of the product, and ending with small messages on current affairs. Information flows move faster, making it possible to operate on up-to-date data. All parties involved in the process have the opportunity to keep their finger on the pulse of the project.

In addition, face-to-face communication, which has been greatly underestimated lately, can be just that boost, which will make the difference. Indeed, sometimes a short personal conversation helps to avoid any future problems.

Last-day crunch will not be your issue either. Indeed, the very plot of this type of work leaves no chances to miss something important in the development process.

What is the offshore model?

The offshore model is a true child of our time. Our today's technologies have not only opened up new prospects for information processing and the creation of unique products. As it turned out, they became salvation in the face of the alarming threat of the COVID-19 pandemic. Remote work managed to keep us on the edge of the abyss until scientists invented a vaccine.

The off-shore algorithm is all about it. Outsourcing has a single point of concentration. Usually, this point is the developer's site. The best part of this system is the lack of reference to the customer, executor, employees, and other persons involved in the development. Today, products are made by people who may never see each other.

Of course, permanent communication between all team members goes through instant messengers, video calls and conferences, and other communication programs. This approach will definitely work for you. Especially if the initial data for the project have clear data and structure, and you have a plan or better - clear SRS documentation.

The key benefits of outsourcing.

The benefits of outsourcing may only be unknown to you if you haven't followed the news for the past ten years. This type of work organization has erased the boundaries in the world. And, the best area of ​​application of this approach is long-term, large projects.

If you follow this path, you will receive an unlimited choice of specialists. You will be able to hire people based on your priorities. Either hire the best and most expensive specialists from all over the world or hire literate people from countries with low costs for the sake of the economy. The pandemic has shown that the result does not depend on where the specialist works, and he does it in the office or at home.

Predictable and understandable prices and guarantees of partner companies and exchanges make this model efficient, financially secure, and controllable. The offshore model requires specific skills in control and organization of the workflow, but it can bring excellent results.

What is the difference between onsite and offshore?

The difference between onsite and offshore is obvious if you carefully read the previous sections of our article. You have two equivalent tools for building a productive and high-quality vertical of the work process in your hands.

Relatively speaking, the difference lies in the density of the working atmosphere and the length of communication steps. By scaling the step plan and algorithms and taking into account the final task, you can choose the type of model optimal for your project.

In a simplified version, everything can be explained. With an onshore model, you have a simple view of yourself and the client. There is a mixed team of employees from both sides between you. This creates a very dense and cozy atmosphere that has a high response rate.

The offshore model consists of two managers - your project manager and the client`s manager. These employees provide interaction between your disparate remote team and the customer's team, which implements your best practices.

What is the onsite and offshore model? Hybrid model.

As you can imagine, no one has the right to limit your choice. Moreover, the cornerstone of the IT industry is wide diversity and unknown paths. Having new ideas - do not hesitate to implement them because they can lead to unexpected success and amazing results. This is how the hybrid model appeared.

Already from the name, it becomes clear that its essence lies in crossing all the best aspects from both models. The mixing of working algorithms makes it possible to pose the most complex problems with variable variants of achievement. A localized team and outsourced specialists combined in the right proportion are the ultimate solutions for your project.

This model often employs 30 percent of the local staff and 70 percent of the hired people in the remote mode of operation. People in a stationary team are often engaged in the accumulation of primary information and requests, planning, and building communication with the client. At the same time, the offshore team is engaged in monitoring and step-by-step analysis of the product, its support, and solving local problems according to requirements.

But, do not forget that the given structure is just an example. And, if you wish, you can calculate your own version for successful work or use one of the many patterns.

The key benefits of hybrid model teams.

It is quite logical that the benefits of the hybrid model combine all the benefits of the two primary models. What does it mean? Even more possibilities of soft regulation and mechanisms of control and management of processes. And, of course, opportunities to diversify cash costs and quickly regulate cash flows, quickly and painlessly redirecting funding in the right directions. You can reduce the cost of infrastructure and local team maintenance costs by hiring telecommuters. Or, if necessary, it will be quickly rebuilt for the development of infrastructure. Variety and flexibility will be your main weapons when using hybrid model teams.

How to communicate with offshore teams.

Communication is your key to being productive. Therefore, it will be useful to develop a strategy or entrust this step to specialists. From how the project coordinator will hear and how correctly the priorities and motion vectors will be determined. Moreover, according to the opinions of researchers, the lack of communication leads to a decrease in the exchange of information. And, reduced communication leads to a lower likelihood of success. And, at the same time, a reduced sense of success negatively affects the atmosphere in the team.

Therefore, remember that thoughtful communication will help reduce the distance between employees in different parts of the world and between management and the client.

The key to this is coordination, without which project management cannot adapt to such a work model. To do this, management must control everything: structure, infrastructure, risk management, conflict management, the team, and its organization.

How to get maximum productivity from the offshore team.

Today's reality is that sooner or later, you will have to turn to an offshore team model. How deeply this model is integrated into the structure of your company is an open question and depends only on you and your needs. This is the objective reality of the modern world. Moreover, the pandemic has shown that to achieve good results and create truly innovative projects. It is unnecessary to follow the classic paradigms and create a huge office with a schedule and many administrators.

The offshore team and its implementation will definitely become a new horizon for your aspirations. But, let's be honest, the threshold for entering the integration of new solutions is very high. And, you will probably need specialists who can ensure a quick restructuring of the business and introduce a different approach to work.

In this article, we have touched on only the most obvious offshore team model functioning issues. But, there are a great many vital little things that can ruin your life. Differences in time zones, cultural differences, even different understandings of terms - all this must be taken into account when starting a new project. And for these purposes, at least at the initial stage, it is better to attract professionals. This way, you can get the most out of your offshore team.

Modern market and information technology opportunities provide us with incredible opportunities. Our goal is simple - to be flexible and open to new ideas. Indeed, the absence of limits in our management toolkit levels out all the limits in achieving success.

The post What is an onsite and offshore model? appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.

HTTPS

HTTP is an awesome application layer protocol, but it is not secure for login data or credit card information because it doesn’t have encryption. Cybercriminals can intercept requests with users’ sensitive data by breaking into the Wi-Fi connection or the internet provider’s network. This type of attack is called Man-in-the-middle(MitM) attack and it cannot be carried out if the site uses HTTPS.

The main idea behind HTTPS is the generation of a short-term key for a single session and verifying it with a long-term client-side public key and server-side private key. A session key is generated by the owner of the public key and is encrypted by it. This encrypted key is sent to the server and only the server can decrypt it. Now only the client and server know the session key with which all requests and responses are encrypted. Such type of encryption is called Hybrid cryptosystem and SSL/TLS are good examples of such layers.

WebSockets can also work over SSL/TLS encryption which also perfectly protects against the MitM attack.

To implement an encryption layer over your HTTP you need to gain an SSL certificate from a certificate authority. You can get it even for free with services like Let’s Encrypt. Let’s add an SSL certificate to a sample page running in Nginx.

As you can see Google Chrome shows that my site is not secure. To add an SSL certificate you need to enter your system info on the Certbot website.

And it redirects to the page with instructions. You need to follow it and just enter your domain.

Now let’s check our web-site

It is secure ?

Now, even when cybercriminals intercept your request, it will be impossible for them to retrieve any information. It is the first and the easiest step in the way of creating a secure API.

But it also has a few disadvantages. Encrypted connection involves more computations to encrypt and decrypt data. As a result, it affects the performance of both the server and the client and introduces larger latencies. Another issue that can force you to not implement SSL/TLS encryption is the impossibility to use caching in proxy server between server and client.

CORS

Cross-origin resource sharing is a browser mechanism that controls access to resources. This extends the Same-origin policy which restricts scripts on one origin from accessing the data in another and is used by default in all browsers. This prevents requests from third-party sites to your server.

On the server side, you can restrict domains of sites that are allowed to send requests. Browsers will block requests from other domains. Also, it is possible to restrict the methods and headers of specific requests. For example, if I want to accept only GET requests from https://foo.bar I can add such headers to the response

      Access-Control-Allow-Origin: https://foo.example

      Access-Control-Allow-Methods: GET

You can also specify the list of headers that can be transmitted with the request 

      Access-Control-Allow-Headers: Content-Type, Authorization

There are a few more headers that you can find here.

For applications that don't use cross-domain requests, CORS should be disabled so the browser will restrict any requests. But if we are setting these headers in the response, how does the browser know about them before sending a request? It sends an extra handshake using the HTTP OPTIONS method to determine if the actual request is cross-origin compatible.

See more on MDN

But you don’t need to do it manually, nowadays, all frameworks have built-in systems to implement CORS.

Object Level Authorization

This is the mechanism that checks if a user is allowed to do any manipulations against the data(create/read/update/delete). According to OWASP, it is the most common pitfall of modern APIs.

Here is an example of the problem:

We have authentication and it feels secure. For updating some product information manager uses such a request.

      PUT /product/1

The customer registered on the website somehow found this request and tried it to make a joke (or not). He has just authenticated and sent the same request. The product was updated. He tried other ids 2,3,4 etc. and the request worked as well. He updated the product, moreover, he can update any product. But he is not the manager and not allowed to do it

Of course, you don't want to allow someone to be able to change some data. For this purpose, you need to implement access control security. For example Role-Based Access Control. It allows restricting control based on user roles and privileges.

In our server-side application we can define two roles: manager and customer with permission to read for both, and to update/add/delete only for a manager. We can assign these roles to users and save them in a database with user information and insert them in the JWT token. During the authorization process, we determine the user's role and allows to make changes in the product only if the user has permission to do it.

Also, it is possible to build a hierarchy with roles, so users with higher-level roles have all permissions of their sub-roles. This makes the process of maintenance user permissions easier. There are more other access mechanisms here 

Data filtration

The issue with excessive data exposure is very common. Some developers rely on the front-end part to show not full data, and they throw all info from the database in response. It is the wrong approach. In the database, much private information can be saved like address, credit card numbers, etc. The backend part of the application should not rely on the front-end, it should work independently and return only that information that the user needs. 

Let's imagine some social network, with a search system of users where they can find each other by name. The record with such structure is saved in the database:

{
  “name”: “Matt Tress”,
  “phone”: “229-563-0840”, 
  “email”: “matt.tress@test.com”,
  “address”: “Random street, 24”
}

The search system returns the list of users, and only the name is shown for the end-user. But here is the problem, even in dev-tools in browser users can see the FULL response with phone number and email.

Such problems even have big companies with a lot of resources, like Google. In 2018 Google got into a scandal with a data breach. After software update Google+ API. Large number of apps that used it got access to data that users marked as private. User data from over 52 million users were exposed.

Also, it is not only a security problem, when you transmit full data, it is always bigger than the user really needs so it causes additional network load.

The other great solution to fix this problem is to use GraphQL. It is a query language for your API that provides the possibility for a client to ask only for data that is needed. But don’t forget to check user permissions in your resolvers or middleware to block access to not allowed data.

Web Application Firewall

Web application firewall(WAF) is a network security system for applications that use HTTP/HTTPS protocols that filter and block network traffic based on some security rules. This system helps prevent large amounts of attacks like DOS/DDOS, SQL injections, Cross-site request forgery, etc. Also, it provides functionality for blocking and tracking IP addresses, adding HTTP security headers, and others depending on specific realization. This tool also can analyze normal user behavior, which helps to detect attacks using automation tools like brute force and DDOS. There are a lot of free and paid systems on the market.

Here is how the Azure WAF is working. After creating you can attach it to the Application Gateway and it will restrict all attacks that it knows. Azure WAF has a lot of predefined rules to secure you from the most popular attacks. 

To show the work of WAF I’ve created a Virtual machine with the sample apache default page and Application Gateway for it.

A simple XSS attack through the public IP of a VM is successfully (for the attacker) executed.

But the same attack through our Application Gateway with WAF is blocked with status 403.

It blocks in the same way a lot of others, more destructible attacks. It is also possible to define your own rules to restrict attacks you are experiencing with your application.

DOS and DDOS protection

Denial of service attack called up to overload the system making a bunch of slow requests, so the general user is unable to access the system because it is working at its limits. The standard way to prevent it is the implementation of lockout (prevents making a certain number of requests from a single IP) or progressive delay (adds delay longer than previous after each bad request). The good practice is to set a max timeout per each request so it. There are a lot of libraries for all popular frameworks. Or the better solution is to run load-balancer like Nginx to Nginx advices

Distributed denial of service attack is one that is hard to overcome without side-party solutions. The traffic comes from a bunch of sources that makes it impossible to stop it by simply blocking sources. 

• A good idea to partly prevent it is to use a content delivery network, where servers are located in different places and combined in a single network. So the user will access the nearest server. 
• Another simple idea is to provide a captcha for anonymous requests.
• You can use services like Cloudflare or Incapsula that are good-protected from it.
• Use Azure/AWS gateways or virtual networks with built-in DDOS protection

Tests

It is awesome to implement all these recommendations in your project. But during the development process, many things can be changed, after fixing issues, already working logic may break. So it is very important to have security tests. You should create integration tests that should cover not only positive cases but also check if users don’t have permission to do some data manipulations. Very important to cover all requests.

Also, there are more technologies to help find security pitfalls, the two most popular are SAST and DAST.

Static Application Security Testing (SAST): the main idea is to check source code and find security vulnerabilities. Tools that use this technique find the patterns or rules in source code that can lead to flaws. This approach can be used in any stage of the development process; some tools analyze code even in IDE.

Dynamic application security testing (DAST): here we know nothing about source code, we just try to execute attacks and check what is going wrong. DAST tools allow detecting vulnerabilities with minimal user interactions to detect a lot of runtime and configuration security vulnerabilities.

Don’t forget about stress-tests attacks. There are a bunch of open-source tools to check the performance of your application and how many users it can process. One of such tools is JMeter. It has a simple GUI where you can configure multiple scenarios for different routes from multiple threads. 

It shows all responses during the test that will be useful for debugging. Also, it is possible to generate a report with statistics etc.

Conclusion

Your API service is the communication center in your application. It should be like a castle on a hill inaccessible on all sides. Of course, implementation of new features is very important but losing the private data of your users or any sensitive info of the company is the last thing you want to deal with. So it is important to allocate time for writing integration tests and configuring SAST and DAST tools. 

The post How to secure your REST API service? appeared first on Offshore Custom Software Development Company | Binary Studio, Ukraine.