The Manifest Hails Qarbon IT as one of the Most Reviewed Web Developers in Krakow

Having a website is a must in today’s digital age! There are a lot of businesses and companies that are looking to utilize the growing number of people online. Thankfully, companies like Qarbon IT are here to help get you started on your website development journey. Our team boasts 11 years of experience in the market and we are confident that we can help you with your project. On that note, we are excited to announce one of our latest accomplishments!

The Qarbon IT team is proud to announce that we are among the most reviewed web development companies in Krakow according to The Manifest. We are favored and honored to be featured as one of the best developers locally. This award means a lot to us and is surely one of the highlights of 2022.

On that note, for those of you who aren’t familiar with The Manifest, they are a business blog websites that aims to gather and verify the hard data, expert insights, and actionable advice that you need to build your brand and grow your business – to provide the practical business wisdom that manifests in your success.

Their platform features industry leaders such as ourselves! Today, they unveiled their most reviewed B2B service providers and we are truly grateful to be part of this list. Of course, this wouldn’t have been possible without the help of our amazing and wonderful clients! Thank you so much for reviewing us on The Manifest and sharing your experiences while working with us.

Are you interested in working with us? Contact us today. We are looking forward to creating amazing projects with you.

Figma vs. Developers

UX/UI Designers design, and developers programs, based on the design. And although the graphic part is on the side of designers, the programmer, willy-nilly, should also have basic knowledge of how to use graphic programs, so that cooperation on the project goes smoothly, without unnecessary questions and complications. The range of programs is large, but today we will look at one of the more popular tools these days, which is Figma.

What is Figma? - The introduction

Figma is a tool quickly conquering the giants in the field of graphic editors and it’s becoming more and more common. Unlike Adobe XD or Sketch, Figma is available in a browser-based version, so developers don't have to worry about installing the program. They also have free viewing from any device. The program resources needed for a developer to work freely do not require the purchase of a license. If you are a programmer, this article is for you! It will help you get the basic knowledge (enough) to work with Figma.

Ctrl + C isn't everything - A brief note on shortcuts

Figma on the subject of keyboard shortcuts is relatively trivial. It borrows many solutions known from other programs, such as Adobe. Most shortcuts are written for both Windows and Mac, where [Ctrl] on Windows corresponds to [Cmd] on Mac. For example, Zoom In and Zoom Out will have the shortcut Ctrl/Cmd + Scroll and copied Ctrl/Cmd + C. If you don't know a shortcut, just click on the Figma logo -> Help and account -> Keyboard shortcuts and you get a full list.

Dark theme - the only right choice

Don't like to tire your eyes? Don't want your matrix to burn out too quickly? Nothing simpler - change the theme of Figma (and all other programs) to Dark Theme! And jokes aside, if you prefer a dark layout mode just click on Figma's logo -> Preferences->Theme->Dark and you're ready to enjoy an eye-pleasing dark layout!

First steps - the basics in Figma

Once you are added as a collaborator or "viewer" of a project in Figma, you can open it in a browser or download the applications to your computer. Don't let the desktop version fool you - it's not native! Both versions work and look almost identical. The only thing that makes them different is the browser interface aspect of the web version. If you do not display fonts in your project, and you have them installed then download the desktop version, the web version does not support system fonts.

Figma's interface is divided into 3 main groups. The top bar contains the cursor, comments, and handle(for moving around the canvas). In the panel on the left, you will find pages and layers. Each separate page is a new canvas with different file elements. The panel on the right is a collection of tools containing all the information we need in the file.

Project Styles

The styles in the right bar will be displayed when there is no selected element - if you don't see them, just click on the empty canvas. You can use this information to check the fonts, colors, shadows, etc. in the CSS. Just click on the settings icon next to the style to see all the information.

Information about the elements

As you dig deeper into your project, there will surely come a time when you need to check the dimensions or styles of, for example, a Button or FlexBoxie (AutoLayout in Figma). Choosing the right layer in a well-ordered project is sometimes not easy, not to mention in projects where there is "disorder". The Select Layer [PPM] or layers function in the menu on the right helps in tracking down the item of interest. There is also an option to break through to a specific element by 2-clicking LPM on a layer.

When we manage to reach the item we are interested in, we can "take out" information about it in the menu on the right.

It should also be added that CSS is automatically generated and often has its shortcomings. I would recommend treating it as a cool form of hinting and not ready-made code to copy.

Where did I hide that measuring line? - Dimensions and measurements in Figma

You don't have to play with rectangle measurements and get angry with your designer "Because pixels are not equal" anymore. Figma leads us (designers) by the hand and hardly allows us to create distances or components that have something after the decimal point (e.g. 34.,76px).

When you want to measure the spacing between elements, just select the element to which you want to measure the distance, then hover the cursor over the other element with [ALT]/[Cmd] pressed. A common problem is with vector elements or groups - then the problem of inconsistent distances arises. If Figma doesn't let you click, for example, an entire icon, just click the element with [Alt] or [Cmd].

Export, export, export!

You will probably need to export resources from Figma more than once during product development. Most often we export icons, any images, or illustrations. Before explaining "how to do it" it is worth mentioning the formats. In the case of icons or illustrations which are vector graphics(created on curves), the best choice will be SVG format. For photos, the choice will be JPG or PNG(for graphics without backgrounds).

To export an individual element or group of elements, we must first select them. Just click the element or group you are interested in and go to the export tab in the right-hand bar. For more elements, just select them with [Shift] pressed.

Communication is key - about comments in Figma

The days of taking dozens of screenshots and sending them to chat with a designer are gone. The times of pretending you didn't see the message too! Comments in Figma is a revolutionary product feedback system. Comments can be added anywhere on the design. Icona in the wrong place? - comment.

How about missing one screen? - comment. Your designer as well as the whole team will get a notification, and the comment will be visible in your Figma file. You can also tag the person to whom you are addressing your appeal, just use "@".

But how to add this comment? Just select the chat balloon icon from the top bar or press [C] and click on the appropriate place in the canvass - nothing difficult! In the sidebar, you can see a list of comments. If the task has been completed you can delete the comment or deselect it(if it has been completed).

I want to remind you that every comment is visible to those who have access to the file, so don't write silly things because the customer will see them too!

Figma is not so black as it is painted!

From now on you should be able to export items, add comments, and navigate the Figma interface seamlessly. If you need to learn more about the tool go to Figma Documentation/Figma Community or search for any content on YouTube. Also, check out our recent article UX Design - a guide for programmers.

Good luck!

Why should developers care about web security?

Due To COVID-19 Pandemic Cybercrime Rise Up 600%. Between 2020 and 2021 number of malicious web applications grew to 88%. Broken access control and injection attacks represented more than 75% of web application attacks. As it has been pointed out writing secure applications is becoming more and more important, in this article, I will explore the most common attacks and how to prevent them.

Common web app security vulnerabilities

- Cross site scripting (XSS)

- SQL injection (SQi)

- Memory leak

- Cross-site request forgery (CSRF)

- Broken Authentication

- Sensitive Data Exposure

Cross site scripting (XSS)

XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. Attackers may use a cross-site scripting vulnerability to bypass access controls such as the same-origin policy.

What is the impact:

- Account compromise

- Page content replacement

- Inject keylogger into browser

How to prevent:

- Filter input on arrival: Filter user input as strictly as possible based on what is expected or valid input.

- Encode data on output: Filter output by changing the crucial HTML opening and closing tags form example: < --> < > --> > " --> " ' --> '

- Use appropriate response headers: Use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend.

SQL injection (SQi)

SQi is a web security vulnerability that allows attackers to insert malicious SQL statements into an insecure entry field for execution.

What is the impact:

- Identity spoof

- Data tampering

- Hijack administrator privileges

- Database breach

How to prevent:

- Use input validation

- Parameterize queries including prepared statements

Memory leak

A memory leak occurs when a location in memory is unintentionally modified or a variable is accidentally created in the wrong scope resulting in the potential for unexpected behavior in the software.

What is the impact:

- The attacker might be able to launch a denial of service attack

How to prevent:

- Precise timers and event handlers

- Reduce use of global variables: Global variables are never disposed of by the garbage collector

- Avoid creating multiple references to the same object and object mutation. Make a copy of the object instead

Cross-site request forgery (CSRF)

Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. With a bit of help from social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing.

What is the impact:

- The attacker may be able to change the email address on the victim's account, change the victim's password, or make a funds transfer

How to prevent:

- For stateful software use the synchronizer token pattern

- For stateless software use double submit cookies

- Use the SameSite Flag in Cookies

Broken Authentication

Broken authentication lets someone log in to an account they’re not supposed to have access to, in general, refers to weaknesses in two areas: session management and credential management. In both cases, an attacker can use hijacked session IDs or stolen login credentials.

What is the impact:

- Session hijacking: The attacker may take over one or more accounts giving the attacker the same privileges as the attacked user

How to prevent:

- Implement multi-factor authentication (MFA)

- Use weak-password checks by forcing users to create strong passwords

- Place a limit on failed login attempts

Sensitive Data Exposure

Sensitive Data Exposure occurs when an individual or organization unintentionally reveals personal data such as user account/passwords, banking information, health information, personal information, etc.

What is the impact:

- Financial loss

- Identity hijacking

- Decreased brand trust

How to prevent:

- Encrypt data during transport

- Use encryption algorithms

- Use HTTPS protocol

- Disable data caching that may store sensitive information

So why web security is important?

Web security is important regardless of project size, every developer should be aware of the tools that can help make applications be safe.

> An ounce of prevention is worth a pound of cure.

– Benjamin Franklin.

sources: https://www.radware.com/2021-2022-global-threat-analysis-report/ https://owasp.org/

‍

Is MobX a good alternative to Redux?

More and more often, in new projects, MobX appears in place of the king of state management, which is undoubtedly Redux. According to many, it offers a clearer and more efficient way to manage the application state.

What is Redux?

Redux is a library for managing the application state. It is an implementation of Flux architecture created by Meta (former Facebook). The main idea is to create "Single Source Of Truth" as a single store. The store is built from a reducer, which is a function that returns a changed state under the influence of dispatcher actions.

‍

Reducer should meet the assumptions of "pure function", which means that for a given input state, we always get the same result on the output. The previously mentioned actions are usually objects containing information needed to cause a specific change. Dispatcher is a function that passes the action to a reducer.

‍

If we want to use store in React application, we need an additional react-redux library as a connector that allows us to communicate with Redux. Usually, we wrap the application with a provider to which the store is passed, and components communicate via hooks like useSelector and useDispatch, or HOC (higher-order component) connect.

What is MobX?

MobX is a library for managing an application’s state. It is based on decorators that add additional functionality to objects by transforming them into observable state. The construction of the store is not overly complicated. It consists of a JS class (but not necessarily) in which we define the fields and methods that we decorate in the constructor with makeObservable or makeAutoObservable.

‍

Common decorators include observable, computed, and action. Observable transforms an object field into a value that allows the library to report changes in state. Computed, as opposed to observable, is used for values that are calculated from the current state. Action is a decorator that informs the library that a particular method is used to change the state. Communication in React applications is done by calling methods and accessing fields. Store is passed to components through context.

‍

In order for components to detect state changes, they need to be wrapped with an observer function from the additional library mobx-react-lite.

Readability

Because of its more complicated structure, Redux can be difficult to figure out what's actually going on in the code - especially for first-time users. Setting up Redux where we have a single store also makes it difficult when we want to clearly separate its various parts into domains. MobX allows you to create multiple instances which do not necessarily have to wrap the entire application. Communication and store structure is based on mechanisms that seem natural to people familiar with JavaScript. The situation looks even better when using TypeScript because a lot of code can be simplified into decorators from TS syntax.

Performance

According to a benchmark that was posted on Twitter in most cases MobX is able to boast better results than Redux. Check here

What does Redux have in its defense?

The great thing about Redux in this comparision is that it is still a much more popular solution, and with that comes community support. It is also a battle-tested solution and is developed by top developers backed by one of the tech giants that is Meta.

Is MobX a good alternative then?

Is it worth betting on MobX, then? It depends, of course. The decision should always be based on the needs of the project and the team that implements it. Choosing a less popular library always carries a higher risk of encountering problems that no one has yet solved. On the other hand, lower complexity allows you to avoid most problems. It is definitely more difficult to incorrectly design a store based on MobX than it is with Redux.

Qarbon IT Is Recognized as One of the Most Reviewed Team Augmentation Companies in New York City

At Qarbon IT, we prioritize providing satisfaction to our customers. We do so by focusing on results and how we can effectively help our partners adapt to the evolving IT landscape. Today, we’re happy to report that we’ve been named as a leading service provider in 2022!

The Manifest is a company listing platform that features top firms. We’re honored to have been named by them as one of the most reviewed staff augmentation companies in New York City!

To celebrate this milestone, let’s take a moment to revisit how we first began:

In 2019

Jakub Jodlowski spearheads the operations at our company as the CEO. His core philosophy is to become a partner that businesses of all sizes can trust as they encounter escalating challenges in their businesses. Since 2019, we’ve been supporting organizations in their efforts to adapt to the demands of the modern business landscape.

In 2020

Interactive AV-IT is a managed services provider that delivers custom AV solutions. They partnered with us to build a custom application for a public kiosk that would list and display ex-military veterans on the wall of a high school. We handled everything from the input to the execution, and we successfully delivered the finished product.

> Their creativity was impressive. If we had a problem, they already had a solution. The speed of their execution and their attention to detail was also impressive.

— Mariusz Szatanga, Owner, Interactive AV-IT

In 2022

The Manifest names the leading service providers in New York, and we feel honored to be recognized as one of the most reviewed staff augmentation companies this year! We owe it to our partners for their endless support in our solutions!

If you’re interested in working with us, please get in touch with us today!

‍

UX Design - What is it?

User Experience Design is designing user experiences, i.e. ensuring that the interaction with the product provides users with a positive experience. This term was first used by Don Norman, who while working at Apple Computers, gave himself the title of "User Experience Architect". Using an application or website should be enjoyable and satisfying enough to make the user want to use our product again and recommend it to others.

UX Design - as the name suggests, focuses on the user, because it is he who determines the success of our project. Today, users have high demands for digital products. If they encounter difficulties while using our product, there is a high probability that the average user will turn it off and never come back. That is why it is so important to include UX Design elements in the design process - minimizing the risk that the user will not find himself in our application and will go to the competition.

You will say - okay, but what do I have to do with this as a software developer? How can I use UX Design in my daily work?

Each of us has to deal with UX Design every day, but we don't know about it. This is best illustrated by an example: moving the kettle closer to the tea cabinet to make the preparation of the drink easier and faster. This is UX - adapting the "product" to the needs of the users who are ourselves.

UX Design - a guide for programmers

When working on a digital product, we should think about the people who will use the designed solution. It is not easy because when creating a new product, we can only guess who it will be and what their expectations are for what we create. However, there are a few points that we can pay attention to improve the UX of our product and learn good practices in the user experience design process.

1. Avoid incomprehensible messages

The user must feel confident when using our product. That is why it is important to design the texts in such a way that there is no doubt about how to use a given functionality. With each intricate message or unfortunate question, the user wastes time figuring out what to do. Besides, it also loses confidence in the app.

On the left, is an example of a bad message - the user may accidentally unsubscribe, thinking that Cancel will close the modal and not remove the subscription. On the right, revised version - now there is no doubt what each button is responsible for.

When dealing with the product we create, it is very easy to forget that the person using our product may not understand the displayed message. If the user does not know how to correct a mistake in the form or why he did not log in, there is a good chance that he will not want to use our application again.

The user does not understand the Specified date is incorrect especially since the date format appears to be correct. There is no information on what the error is. Changing the text to Date occurs in the past makes the user immediately know what to improve.

2. Intuitive buttons

Each button in the application should be designed in such a way that it is immediately obvious whether it can be clicked or not. While it is possible to change the cursor to the pointer on the desktop, it is not possible in mobile applications.

On the left design, the user may not be sure if Add to cart is clickable and may try to find another way to add a product to the cart. By changing the style of the button, there shouldn't be any doubts anymore.

The "back" button on the left design gives the impression of being turned off, impossible to click - gray is associated with disabled-buttons. A slight change of style and the design becomes easier to read immediately.

3. Simplify the design.

Design to make the application as easy as possible for the user to use. Remember that you are not designing for yourself, but for the user who will have contact with your product for the first time (and hopefully not the last time).

Replace select with radio buttons when there are few options to choose from (2-4) - because it is more convenient for the user. Besides, it allows you to make a decision faster when you know immediately what you have to choose.

Give up placeholders, because they are no longer useful when the user starts to write. Instead, add the information displayed under the input, which is available to the user all the time.

Unclear messages, poorly designed buttons, and complicated layouts are a great recipe for a product that no one will want to use. People are laughing at Web 1.0 sites because UX just doesn't exist there. It started to appear in Web 2.0 and is now becoming a standard in projects. Developers who omit UX in their projects will simply be left behind.

‍