charts-cover

books-cover-photo

Unspash Plugin for Figma

Content creation

Dilyan Georgiev

knowledge-cover photo

QA-cover photo

Radoslav

postman-cover photo

podcast-еurope

Emil Kirilov

Mira

HTTP

Radoslav Kosev

QA Engineer

Web Developer

Mira Ereeva

Growth Manager

 C# .Net Developer, Knowledge Management PHD

## Introduction 

Hello guys! Welcome to the "[In the shoes of a QA](https://www.lexis.solutions/blog/into-the-shoes-of-a-QA-the-FAQ)" series for my second article! Last time we discussed the primary difficulties that a QA faces once they enter the IT field, we mentioned some methods and tips on tackling them effectively. 

This time we will discuss our work from a practical point of view. The task ahead of us today will be to test a REST-ful API via Postman. So before we begin with the request walkthrough itself, let's first clarify several things that will ease the process of understanding:

- What is an API
- What is a REST API
- What is Postman

## Let's start!

## Covering some basics

### What is an API?

"API" stands for Application Program Interface and is a paradigm that defines a way of communication between independent systems. An API gives two programs or apps the necessary tools to connect.
A software system can utilize an API by sending a request and receiving a [response](https://www.lexis.solutions/blog/beginner-frienly-http-requests). 

### What is a REST API?

REST stands for Representational State Transfer, and it precisely sends a representation of the state with each request or response. When we want to get data from a REST API, the form is sent back to us within the answer, and when we want to create or change data - we send the desired state in the request. 

REST leverages a variety of HTTP methods that we can employ through the CRUD - create, read, update, and delete operations that RESTful APIs provide. The GET method reads data from the API, POST makes it in the first place, and PATCH updates and DELETE deletes.

The HTTP method names have already been discussed in a previous article. ([https://www.lexis.solutions/blog/beginner-frienly-http-requests](https://www.lexis.solutions/blog/beginner-frienly-http-requests)) 

### What is Postman?

Postman is a tool used to test, create and share APIs. It's widely used by teams and individuals, greatly simplifying working with an API. Through Postman, you can build and submit API queries, fetch or alter data on a web server, try the operations of an API, or send a request to a specific endpoint.

### Trying it first hand

We will follow through with a simple POST request using the TMDB platform to see how exactly a REST API works with Postman. Mainly, we will use Postman's help to add the movie "Inception" to our Watchlist.

### The first step - Getting acquainted with the docs

Where do we find the elements necessary to build our request in Postman? The answer is fundamentally always the same – documentation, in our case - the documentation in TMDB. We have to visit [https://developers.themoviedb.org/3/getting-started/introduction](https://developers.themoviedb.org/3/getting-started/introduction) for starters because this is the page from where we will generate our API key, which is needed all the time and is a crucial part of the tests.

![introduction](//images.ctfassets.net/5gydaotbo8jm/7w9nAWDmv3iGq6O6pj8vm1/cb33cd47215d58d99022b7776950bc03/Screenshot_2022-12-16_at_13.58.13.png)

### The second step - Generating API Key

The API key is generated from the account settings page. This is how you do it in a couple of steps:
- From the account settings page, you click on your avatar
- From the menu that will appear - click on API
- Click on "Create"

The API Key should look something like this: 6b9b694299a12306eaeb1a8c5a2d7866

It'll be generated instantly, after which you must authenticate it. The point of the API Key authentication is to validate ourselves as legit users of the system. The validation itself we do from this endpoint: https://api.themoviedb.org/3/movie/76341?api_key=<<api_key>>

### The third step - Checking the requirements for our request

Once we generate the API key and complete its authentication after that, our next step is to check the docs and find out how to add a movie to our Watchlist:

[https://developers.themoviedb.org/3/account/add-to-watchlist](https://developers.themoviedb.org/3/account/add-to-watchlist)

![aut](//images.ctfassets.net/5gydaotbo8jm/4GZkVyHu0hZaBmMUw9i3vX/7dd1a0d5cb92ac60f4e61ea04bddf8e9/Screenshot_2022-12-16_at_14.02.35.png)

As we can see – the required attributes that we have to fulfill are the Content-Type within Headers, api_key & session_id within Query Strings, and media_type, media_id, and Watchlist within the Request body.

- *The query strings are optional parameters at the URL's end. They have various use cases; in this example, they are used for authentication.* 
- *The request body is optional and the preferred place to put a more significant amount of data. It is also hidden from the generic users in contrast to the query params that everybody has seen trailing in the URL. To keep the Params section neat, we add query parameters into the request body, making the URL manageable.*

Also, let us mention that the media_id changes with every movie. For example, 27205 is the ID for the film "Inception." This means that when we want to access the movie "Inception" - 27205 will be our value in our URL. If we want to access "Fight Club" then we need "Fight Club"  's ID of 550. 

### The fourth step - Creating a collection in Postman

Our next task is to open Postman and create a new collection called "TMDB API Testing."

![ТМBD](//images.ctfassets.net/5gydaotbo8jm/4BT3pW4xCrvzJdQ8LC6r31/cc32233628978b8f7cfb92e9474fe9b4/unnamed__3_.png)

The collection we created will contain three requests: one GET and two POST requests. 

- The GET request will fetch us a request token. This token is a temporary passport allowing us to communicate with the TMDB API freely.
- The Create Session POST request translates to the login functionality of the average user flow. The session_id we get out of it is yet another passport that authenticates us as a specific user. This user has a watchlist that we ultimately want to update.
- Add Movie to My Watchlist POST request adds the desired movie to a user's Watchlist. To do that via the API, we need both the token (which allows us to use the API) and the session_id (lets the server know which user we are) that we got beforehand.

Let's review more about how the documentation translates into Postman and how we can use it effectively.

### Fifth step - Tips for orientation in the docs and Postman

We already generated an API key, and according to TMDB's platform - the media type for "Inception" is "movie," and the media_id is 27205. In contrast, the watchlist field is a boolean, so logically, it'll be "true" because we want to add our movie. What's left is the session_id, and we already know how to get it too.

![the movie](//images.ctfassets.net/5gydaotbo8jm/7tTZaWP3nJea9uVqmPtZ46/0522cd6657a38916692c975c32b02e11/unnamed__4_.png)

However, we have a primary URL that doesn't change 
([https://api.themoviedb.org/3](https://api.themoviedb.org/3)) and an API key that does not change. So the params that do not change are constants. We can have Postman remember them for us by double-clicking on them, choosing Set as variable➜Set as a new variable➜Type name, Choosing the current collection, and saving, after which when we build requests in this collection in the future - they can be generated automatically by typing "{{"(shown below).

![media type](//images.ctfassets.net/5gydaotbo8jm/CXAnJl7goBp6FjIa90sGN/d157aaa3bb37b6350419e6e4eee8a743/unnamed__5_.png)

![media id](//images.ctfassets.net/5gydaotbo8jm/dYsnpob871p0gAqQJxJBp/52cca3365e2c5bc162fbb89499c1e0d3/unnamed__6_.png)

We'll begin by creating a new GET request which will generate a token, and after that, we will use the token to make our session. That session will contain the session_id required for our Add to Watchlist POST request, as we mentioned before.

Now what's left is to go through all three thoroughly and explain them in the process.

### The sixth step - Let the execution begin with a token!

1) First comes generating our token. 

([https://developers.themoviedb.org/3/authentication/create-request-token](https://developers.themoviedb.org/3/authentication/create-request-token))

Checking the required query params for it shows that we only need our API 
key ↓

![GET](//images.ctfassets.net/5gydaotbo8jm/xJzmgcwUdXAOEFfHVstfj/60c1e6c1683f1bcc474b30b99e965029/unnamed__9_.png)

After which we execute the GET request ↓

![GET 2](//images.ctfassets.net/5gydaotbo8jm/23EGikEPfMbdKn2hnLizCr/b757a32c6593128e51685d20dc3a5824/unnamed__7_.png)

- *You noticed how my API Key was already added as a constant, and I inserted it directly from the collection.*

The request token will be generated in the response body, and we can directly copy it from there.

### The seventh step - Creating a session

2)  Now that we have a token, we use it to create our session that will contain our session_id. 
[https://developers.themoviedb.org/3/authentication/create-session](https://developers.themoviedb.org/3/authentication/create-session)

Checking again the needed params shows that we require an API key and 
request token.

![POST](//images.ctfassets.net/5gydaotbo8jm/iyRR0kCpAJ8FhEyNurMRG/06a76523b990a9109e8876a63ba6700c/unnamed__8_.png)

After which we execute our POST request ↓

![post7](//images.ctfassets.net/5gydaotbo8jm/bRTEKgw86pY4faWkQDSQm/4f8b993c4a2cbeaeb29dd35602fbdca9/Screenshot_2022-12-16_at_14.31.37.png)

The session_id will be generated in the response body again, from where we can copy it.

Our session is created, and we finally have our `session_id`. Having obtained all the params needed for our `Add to Watchlist` POST request, we go back to the central part of our task.

### Final step - Adding the movie to our Watchlist

Having obtained the needed params for the request, what's left is to add Content-Type in the Headers with the value "application/json" as per the required documentation.

[https://developers.themoviedb.org/3/account/add-to-watchlist](https://developers.themoviedb.org/3/account/add-to-watchlist)

![POST 3](//images.ctfassets.net/5gydaotbo8jm/4IPXMYvafy5yJfunu80fK5/48a90fd4b473dec2a9fe545f42ee2b35/Screenshot_2022-12-16_at_14.17.37.png)

We have filled every required field necessary to add the movie "Inception" to our Watchlist, and our last and significant request is ready to be executed:

![POST 4](//images.ctfassets.net/5gydaotbo8jm/6E24l2FPIXvB2OxqKt0JxG/46501182e92b2c356c39e791064a39f3/Screenshot_2022-12-16_at_14.18.26.png)

A quick look at the response reveals that the request was executed successfully, and "Inception" goes directly into our Watchlist as the last movie added to the collection. We can either open our collection on the site before we add the movie, execute all the steps and refresh the page on the site, or execute the actions and then visit the page. Either way, we were able to complete our assignment, and we can check that from here:

![THE MOVIE 2](//images.ctfassets.net/5gydaotbo8jm/6z18zaESiJEhlQ3fcHwMmI/2aae358986a7f9d322421eac262e2641/unnamed__15_.png)

Replace the crossed field with your Account name, and once you open it, you'll see the last added movie to the Watchlist, Inception. ↓

![inception](//images.ctfassets.net/5gydaotbo8jm/4u4Lyvnh9o4mJ6XIB36Y6Z/a20b70c3031c8b444ba584c5a350f453/Screenshot_2022-12-16_at_14.21.20.png)

We have found our way around the TMDB documentation and successfully executed the queries necessary to add a movie to our Watchlist. This process happens behind the scenes when you manually click the "Add to watchlist" button in the user interface. The UI is limited to what the API beneath is capable of. That's why it is essential to understand how APIs work and how to utilize them. I hope this tutorial achieved just that.

## See you next time when we will continue with GraphQL API testing!

A straightforward, from A to Z tutorial for you to follow and carry out a successful POST request using Postman.

How To Test REST-ful APIs With Postman

We can all agree that one of the most challenging questions is, "What is your favorite book?". There are just so many, aren't they? Today we will not focus on whether the following books are our favorite but rather valuable to read when working in software development.  

There are seven colours of the rainbow, seven days a week, and seven books you must not miss; so, here is what you should add to your [Goodreads](https://www.goodreads.com/) challenge for 2023:

## Clean Code: A Handbook of Agile Software Craftsmanship (Robert C. Martin)

The book's author Robert C. Martin critically views established programming paradigms and best practices. Some of his conclusions seem radical to inexperienced programmers. But, if you take on board what Martin describes as his lessons learned, you can improve your code quality significantly. The biggest strength of this book is his recommendations on creating better structured and readable code.

## The Pragmatic Programmer (A. Hunt & D. Thomas)

Тhis book is a classic in the genre and is often used as a textbook in university courses; The Pragmatic Programmer by Andy Hunt and David Thomas offers practical and sound programming advice you can use on any development project.

If you're new to programming, this book will help ensure you're on the right track from the start of a project. It's a series of articles containing a best practice, often explained with a metaphor. The creative use of classic and modern anecdotes, fascinating analogies, and thought-provoking examples makes learning each section exciting and fun.

## Cracking the Coding Interview (Gayle Laakmann McDowell)

"Cracking the Code Interview: 189 Programming Questions & Solutions" is all for those who want or need to take coding interviews. It helps you look for hidden details in questions, break problems into small chunks, and get better at learning concepts. Author Gayle Laakmann McDowell, an experienced software engineer, was both an interviewer and a candidate.

Furthermore, Gayle provides 189 real interview questions and solutions so you can prepare well for your following coding interview!

## Soft Skills: The Software Developer's Life Manual (John Z. Sonmez)

Soft Skills: The Software Developer's Life Manual focuses on crucial elements of every developer's life to better prepare them for a successful future. John Sonmez has prepared a stellar career guide for anyone who wants to maximize their growth potential. 

From landing the job and climbing the corporate ladder to lifestyle improvements alongside building your brand, this piece of literature equips you with the ‌resources to excel at each of these essential aspects of life. It emphasizes getting the dream job and being the best suited for 

## Introduction to Algorithms (Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, Clifford Stein)

"Introduction to Algorithms" by the authors Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein is an essential guide to algorithms of all kinds. The book is comprehensive and accessible to all readers, beginners, and professionals alike. It is worded and covers a lot of subject matter, but it also is complex and challenging to follow.

"Introduction to Algorithms" also covers data structures, fast algorithms, polynomial-time algorithms for seemingly intractable problems, graph theory, computational geometry, and much more. While it contains some pseudo-code examples, it is still a very theoretical book.

## Mythical Man-Month: Essays on Software Engineering (Frederick P. Brooks Jr.)

This book is a timeless classic on the software development management process. It is a must-read for programmers and everyone in this industry, including clients. "Mythical Man-Month" shatters the myth that putting more people on a project will be finished more quickly. It is false; you can't complete a task more quickly by using more developers; the opposite will be confirmed.

## Peopleware: Productive Projects and Teams (T. DeMarco & T. Lister)

"Peopleware: Productive Projects and Teams" by Tom DeMarco and Timothy Lister is the classic golden book that can be considered mandatory reading for software project managers, team leads, higher-level management, and board members of software companies. Suppose you are already excelling at managing developers. In that case, this book can make you even better – it will surely give you crucial [knowledge](https://www.lexis.solutions/blog/why-does-knowledge-matter) on how to run successful development teams.

*P.S. After you are done with all the reading, remember to check out the best [15 tech movies to watch](https://www.lexis.solutions/blog/what-the-hack-15-must-watch-tech-movies). *


There are seven colours of the rainbow, seven days a week, and seven books you must not miss!

Working in Software Development: 7 Books to Colour your Success

Over the past 15 years, the Software industry has been through various changes, which positions technological progress under the influence of paradigms regarding software process, product, and resources used during its implementation. However, when comparing [the development](https://www.lexis.solutions/services/node-js-development) itself to the organizational structure, we could elaborate even more on how knowledge becomes a critical asset that a given company values and highly considers when making decisions.

## So why does knowledge matter? 

And more importantly – how does it affect the overall performance on different levels of management? We could see the results of applying knowledge in the first place. For that reason, we could define three types of relationships within a given project: between the process and the product, between the process and the team, and between the product and the team.

In terms of the process-product relationship, when we apply our knowledge, we get client ideas implemented and normed as a ready-to-use product, contributing to the company's connection with the stakeholders involved. This we can call progress since we develop new functionalities via our way of working, and it directly influences the company's performance. Progress can be measured and reported by different metrics, such as the number of successful projects, the number of employees with more than three years of experience in the company, and the reputation on the public market. 

When we talk about the process-team relationship, the result of knowledge application is the organizational culture – from the working environment, through internal bonding experiences and traditions, to knowledge-sharing initiatives and care. Companies with well-established policies and corporate culture tend to be more recognizable among the community and have a better knowledge-sharing process among the employees.

Lastly, we have the team-product relationship, where the focus stays on the applied solution and decisions made regarding functionalities and software architecture. This is critical for the results and makes teams more connected and motivated to bring the project to its successful end. After all, the product you are developing represents the intellectual capital you are working with, not only in terms of technologies but in style, approaches, and ways of managing the upcoming changes.  

![knowledge](//images.ctfassets.net/5gydaotbo8jm/IbmK8iJW1Qo3A1wdbZMuM/f38c57005e8004a4c30c70c3fb1380a0/Knowledge_Influence.drawio.png)

From a management perspective, several critical risks could cause a delay in the software process and potential knowledge loss. What are the chances of not knowing all of this mentioned above? Let's take a look at some of the most common risks managers face during the development processes:

## Personal shortfalls and knowledge loss

From a project management point of view, it is essential to define the technological profile we would be working with during the development phase to cut off any obstacles regarding the implementation itself. However, the technological profile needs to be more noticed or vaguely described. In that case, there is a risk of needing more expertise to tackle the problems we want to solve, which could lead to overall delay, especially in case of dependencies through the software structure and frustration in the team because of low performance. To avoid this kind of risk, we need knowledge not only about the project's domain but also about the company's assets and the expertise it needs, which is essential for morale-building within the team. Having this innovative way of thinking clarified and spread among the employees builds a stable atmosphere where people work with the sense that their contribution is valued. 

## Developing the wrong functionalities

If we talk about business analysis, we should highlight that many projects fail because of bad requirements management – this means miscommunication between the product owners and their stakeholders, which results in knowledge gaps. Developers try to fill these knowledge gaps by applying methods based on their previous experience. However, if those methods are not coordinated with the client, the development process may end up with software users would not use. If your company is product-based, this increases the potential end-users churn. 

If your company is client-based, this harms your reputation and could cost you connections to other possible clients. The solution would be to establish a new communication plan that relies on feedback and introduces shorter sprints for delivery and prototyping in case of developing new UI components.

## Shortfalls in maintenance

Software products with enormous scope need supporting processes that could identify bugs, define possible missed or not implemented functionalities, suggest possible solutions, and pick up the best one based on some predefined criteria. These processes often need to be defined or documented, which could cause bad performance, especially when hiring new employees with less expertise. Another problem is the need for a knowledge-sharing process which is critical when someone with great experience leaves the company. In these cases, a good approach would be establishing an onboarding and knowledge transfer practice. Thus, we can mitigate the potential loss and integrate new employees more quicker.

## Conclusion

Whatever you plan for your projects, you should dedicate some time to identifying what kind of knowledge you would need to fulfill the plan. This may require you to reach out for other people's opinions, but at the end, you will be more aware of possible outcomes when executing the project and take actions beforehand to mitigate risks. Such a way of thinking guarantees a stable environment where you and your colleagues would like to work.

What is the knowledge structure most companies are working with, and why underestimating it could cost you a project's success?

Why does Knowledge matter?

From the newest startup news in Europe to how technology is affected by politics, Lexis Solutions recommends the seven best podcasts to listen to if you are interested in what's happening in the European tech world. 

## 1. The Tech Brief by Euractiv

[The Tech Brief](https://podcasts.apple.com/be/podcast/the-tech-brief/id1505998625) gives you an insight into all digital things in the EU; it is a weekly update of the biggest European tech news in the world of politics and policy. EURACTIV Digital & Media Editor [Luca Bertuzzi](https://twitter.com/BertuzLuca) runs it. 

![Tech-Brief](//images.ctfassets.net/5gydaotbo8jm/34Io78SHBFqB3xAUB2aSkT/58048689bad6a4b7bac69f8193d71b3c/Tech-Brief.png)

## 2. Innovators Can Laugh by Eric Melchor

[Innovators Can Laugh](https://www.innovatorscanlaugh.com/) is for those interested in Startups from the European Tech Scene. The podcast consists of fun and casual interview-style discussions with visionary leaders and founders from Europe. Unlike ordinary entrepreneurial-related podcasts, Eric Melchor is the only American host interviewing fresh faces of European entrepreneurship and innovation. You can listen to new episodes every Thursday.

![innovators can laugh](//images.ctfassets.net/5gydaotbo8jm/3tHZ778nit5BIA4yBb5KMl/fa9c4bccd7da291c94fd0993f68f5dc6/innovators_can_laugh.jpeg)

*P.S. His very last interview is with a Bulgarian startup founder! Remember to check it!*

## 3. Startup Europe — The Sifted Podcast

[Every week](https://podcast.sifted.eu/), Amy Lewin and Eleanor Warnock will dive into the latest news of Europe's tech and startup sector. From cutting-edge technology to massive funding rounds and the newest company scandals. The two editors also bring the big names and rising stars of Europe's tech sector to their audience.

![startup europe](//images.ctfassets.net/5gydaotbo8jm/7g1jjx9qiahPT749EK07GL/3803306a29d25e4b93c964dd0f7bf85b/startup_europe.jpeg)

## 4. Life on Mars

[Life on Mars](https://podcast.marsbased.com/) is a podcast by the Spanish MarsBased. Every two weeks, they launch a new episode - you can listen to great stories from founders, investors, experts, and celebrities around the galaxy. 

![life on mars](//images.ctfassets.net/5gydaotbo8jm/12m5yo3qxkfMtCXVhBFcz0/b5ee96e2cb6444104621c59854ab2feb/life_on_mars.jpeg)

## 5. Tech.eu

[Tech.eu](https://tech.eu/tag/podcast/) is dedicated to the growing European technology ecosystem(s). You can listen to educational interviews with movers and shakers from Europe.

![tech eu](//images.ctfassets.net/5gydaotbo8jm/6f1jFLQVLWIJkiGCXPkUvm/d32cf9468e91ff450934f9a26833117b/1200x600wp.png)

## 6. Baltic Startup Mafia 

[Baltic Startup Mafia](https://anchor.fm/baltic-startup-mafia/) is a podcast where anyone can get quick and easy access to startup news from three countries in the Baltic region: Latvia, Lithuania, and Estonia.

![baltic startup mafia](//images.ctfassets.net/5gydaotbo8jm/1CoOdtK57rVB6xfswvrS0W/2c4b71ef2fe41aec57083fcf2ce9bc68/baltic_startup_mafia.jpeg)

## 7. The European Startup Show

The purpose of [The European Startup Show](https://www.europeanstartupshow.com/) is to inspire technology entrepreneurs in Europe with stories and practical strategies from other successful entrepreneurs.

![the european startup show](//images.ctfassets.net/5gydaotbo8jm/1md7aoxgTa0vSepNx5iwsQ/331ec403abf5608901f361da4660fd63/the_european_startup_show.jpeg)

## And here are the best tech Bulgarian podcasts (at least in our opinion): 

### DEVCAST

[DEVCAST ](https://devcast.bg/)is a community-driven podcast of Bulgaria's largest online dev community - DevBG. Developers make it for developers. Or rather, a podcast by entrepreneurs for entrepreneurs. 

### HackCast

[HackCast](https://www.hackcast.fm/) is the official podcast created by the HackSoft team. The idea of the podcast is to share exciting content about programming, soft skills, and everything happening in the company & that might be interesting to them or the listeners.

### Job Board Talks by DEV.BG

[The DEV. BG podcast](https://dev.bg/digest/dev-bg-job-board-talks-episode1/) Job Board Talks is their newest project by which they want to support the career development of the professionals in the I.T. industry. DEV. BG talks openly about looking for and finding work in the I.T. sector, upgrading technical and other valuable skills, and sharing observations and data from their Job Board with you.

*Read next: '[Working in Software Development: 7 Books to Colour your Success](https://www.lexis.solutions/blog/working-in-software-development-7-%20books-to-colour-your-success)'* 


Lexis Solutions' favorite podcasts about the European tech world. 

All about The European Tech: 7 Podcasts We Listen to

## What is HTTP?

HTTP is the protocol for text communication that rules the web. It being a protocol means there are strict rules on how it is used and what it can do.

## What is it used for?

HTTP is used for transferring textual information between browsers and servers. This information is needed to load your favorite site, for example. And yes, for every page load the browser initiates an HTTP request and then waits for a response from the server. You rarely notice this non-stop ping-pong communication because the Internet is fast.

##  What is a server?

The server is where the code of the software product you are using lives. It's a computer on steroids that never sleeps and instead waits for requests that it can answer. Legends say that old IT wizards feed it coffee beans so your websites do not crash.

## Are all HTTP requests the same?

No, they are not. In fact, there is an infinite amount of HTTP requests you can make but they do come in just a few breeds. The usual request is a GET request, meaning it only wants to read data from the server. There are also POST, PUT/PATCH, and DELETE requests which can respectively create, update or delete data from the server. By now you noticed that the difference lies in the verb we are using. In the IT world, we call this verb the HTTP request method.

## How do HTTP requests differ?

The most obvious difference would be the URL. Let's take Wikipedia for example. It's homepage is `wikipedia.org` while the wiki page for Mount Everest is `wikipedia.org/wiki/Mount_Everest`. And you guessed it - changing Mount_Everest to Matterhorn gives us the URL for the Toblerone Mountain. The full URL is `wikipedia.org/wiki/Matterhorn`.

![Toblerone Logo](//images.ctfassets.net/5gydaotbo8jm/2kJrgcmgmwxHnivjnrGs7j/8b17712dba1b0325eb42b25c479dbb30/image__1_.png)

We proved that the URL is important but is that all? What else is there that matters? Well, not much that you can see in plain sight, so let's delve one level deeper.

## In-depth URL recap

### HTTP vs HTTPS

URLs actually start with the protocol and for most URLs that's either `http://` or `https://`. The difference lies in the `s` that stands for secure. And this `s` is impactful.

HTTP communication is simply text being transferred over the Internet. If you have access to the internet cable that carries it you could see the text - including your username, password, and payment card information. Sucks, right? The IT wizards thought so too and came up with HTTPS. It's the same old HTTP, however, it travels through the Internet encrypted. This encryption guarantees, through mathematical formulas, that no one but the server can decrypt the text... or at least within the next hundred years or so. I call this safe enough...

### Domain name

After the protocol comes the domain name. In our case that would be `wikipedia.org`.
The domain name is fixed for every site and is unique. There is no other `wikipedia.org` and all the content inside Wikipedia can be found under the `wikipedia.org` domain.

**Disclaimer**

There are things called subdomains and seeing them for the first time may be overwhelming. That's why I wanted to introduce both in advance.
An example of a subdomain is `en.wikipedia.org` and, I am sure, you already figured out that `en.` indicates the English version of Wikipedia. There is also `es.wikipedia.org` for Spanish, `de.wikipedia.org` for German, and so on.

Subdomains are an advanced topic and internationalization is just one of the possible applications. Stay tuned for the advanced article to learn more.

### Path params

Let's review the 'Everest vs Matterhorn' example yet again.
`wikipedia.org/wiki/Mount_Everest`
`wikipedia.org/wiki/Matterhorn`

Can you see the pattern? It's `wikipedia.org/wiki/{some-mountain}`. Arguably, if you replace `{some-mountain}` with the name of a mountain it should work. Let's try with K2 - the second-highest mountain... and indeed `https://en.wikipedia.org/wiki/K2` works!

![K2](//images.ctfassets.net/5gydaotbo8jm/iUL65WJjFlV4duBTknhMs/80d16b56d78c657da58bef9d5c12b667/k2.png)

`{some-mountain}` is in fact a placeholder for the thing you want to view at Wikipedia. And it's not only mountains - it could be everything, like people and planets:
`https://en.wikipedia.org/wiki/Albert_Einstein`
`https://en.wikipedia.org/wiki/Earth`

The proper IT name for this placeholder is a path param. URLs are not limited to having only one, however, things get confusing with multiple and we will leave that out of this article.

### Query params

Query params are not required but are extremely useful and easy to wrap your head around. They always start with `?` and come in pairs separated by `=`. Let's not get too technical and continue with an example of a tire shop website.

The thought experiment begins with the domain `best-tires.com` and the query params `?season=winter`. This gives us a complete URL of `best-tires.com?season=winter`. What will the server do?

The server parses the path param pair `season=winter` as `season` - the path param name and `winter` - the path param value. We have probably guessed the URL for viewing the shop's winter collection. Let's switch to the summer on and select tires that cost less than 200 but more than 200.
The URL this time is as follows: `best-tires.com?season=summer&currency=USD&min_price=150&max_price=200`

We obviously sent multiple query params, one for each of our filters, and separated them by the rules - with an `&`.
The server parsed the following tire requirements:
- *season* is *summer*
- *currency* is *USD*
- *minimum price* is *150*
- *maximum price* is *200*

Our dream server may handle more query params than we can handle so let’s put a stop here.  What's important is to remember that query params are extremely useful for filtering and always stay at the end of the URL.

### Non-URL customization

There are two hidden ways for modifying the HTTP requests that I want to show you. One is via headers and the other is through the body. I won't go into much detail here so bear with me.

### Headers

Request headers are hidden for a purpose as they mainly provide the server with context. For example - the browser and OS you are using or the cookie that proves you successfully logged in 5 minutes ago.

Server responses have headers too and some are incredibly handy. The one that comes to mind is responsible for automatically setting the cookie for you. Just imagine having to pass a secret code every time you want to view a new webpage...

There are also headers that increase the site's security or others that let your browser perform faster through caching. All in all, headers are extremely underrated because they operate under the hood and without causing issues.

### Body

The request body is the place to put user input into. Its size limit is huge (in comparison to the query params) and is also hidden for the normal user. It's perfect for sending your huge comment, or this article, over the Internet. However, the body is a special place that requests of the GET method name cannot access. They must rather use query params for user-provided data.

## Conclusion

HTTP rules the web and now you understand the king a little bit better. We are cooking up an article for those of you that want to experiment with HTTP so stay tuned for more. And until then have patience while surfing the Internet. Requesting and responding may sometimes take time.


HTTP is one of the most impactful technologies that work flawlessly and is surprisingly easy to understand. You don't believe me? Give it a shot!

Beginner-friendly HTTP Requests

Some time ago, Lexis Solutions presented you [with a list of free resources for all UI designers](https://www.lexis.solutions/blog/free-resources-for-resourceful-UI-designers). Now, our company has prepared one of the best free tools for content creators - some we use ourselves every time for our blog articles and highly recommend. 

## Good grammar is sexy

Always put editing and proofreading first! If the grammar in your copy is terrible - all the effort you might have put into research, visuals, etc., will become meaningless. So make sure there are no spelling mistakes, repeated words, or missing commas!

- [Grammarly](https://app.grammarly.com/) is a cloud-based typing assistant that reviews spelling, grammar, punctuation, clarity, engagement, and delivery mistakes in English texts. The platform also detects plagiarism. 
- [The Hemingway App](https://hemingwayapp.com/) is an editor that highlights and corrects grammar, fluency, and sentence structure to help your writing read and look better. It's a self-editing tool that allows you to write more concisely.

## What is going on in the world right now?

Trends come and go - but it is better to notice them on time. Here are some websites where you could easily, and most importantly for free, see what the world is trending around. 

- [Google Trends](https://trends.google.com/trends/?geo=BG) analyzes the popularity of top search queries in Google Search across various regions and languages. The website uses graphs to compare the search volume of different questions over time.
- [AlsoAsked.com](https://alsoasked.com/) organizes and displays "People Also Ask" data in Google search results. You can interact with this data on the site to explore it and export it to image graphs for quick presentation to clients or into CSV format to process it with other tools, saving a tremendous amount of time.
- [Answer The Public](https://answerthepublic.com/) is a keyword tool that visualizes search questions and suggests autocomplete searches in an image called a search cloud. Categories consist of the 5 Ws, plus 'how,' 'can,' 'are,' 'which,' and 'will.'

## Do looks matter?

The eternal question - do looks matter? Regarding good content - yes, our brains process visual content more easily and 60,000 times faster than text... 

- [Canva ](https://www.canva.com/)is a graphic design platform to create social media graphics, presentations, posters, documents, and other visual content.
- [Remove.bg ](https://www.remove.bg/)allows you to easily erase backgrounds 100% automatically in 5 seconds with only one click.
- With [Piktochart](https://piktochart.com/), you can create professional-looking infographics, flyers, posters, charts, videos, and more.
- The content on [GIPHY](https://giphy.com/)'s website, app, and API is all of the best and most popular GIFs on the web, along with content created by talented GIF artists and world-class brands. 

## Is the podcast the new radio?

Nowadays, we live in a boom for podcasts. Here are some tools you can use to start your podcast career!

- [Audacity](https://www.audacityteam.org/) is an audio recording and editing software application that is open source so that anyone can download it for free with no restrictions of use. This software can: record live audio, cut, copy, splice, or mix sounds, and edit audio files (Ogg Vorbis, MP3, WAV, or AIFF, to name a few).
- They say [Buzzsprout](https://www.buzzsprout.com/?gclid=Cj0KCQiA37KbBhDgARIsAIzce16OdSKxxiJPXHuksJhd9JFzeHGsk7zhIdx4mGyyI4aMhTDeZDomt6saAnc3EALw_wcB) is the easiest way to start a podcast. Its simple-to-use product provides a podcasting platform, promotion tools, and stats to track your podcast. Buzzsprout has tools like a free podcast website for beginners, custom embedded players, and unique social media players for more experienced podcasters.
- [Ardour](http://ardour.org/) is a free, fully-featured digital audio workstation, similar to other software like ProTools, Nuendo, Sonar, and Logic, and capable of replacing analog or digital tape systems. Available for Mac OS X and Linux.

## To cut a long story short… I became a film editor!

- [Lightworks](https://lwks.com/) is a nonlinear editing system for editing and mastering digital video. It was an early developer of computer-based nonlinear editing systems and has been in development since 1989. 
- [iMovie ](https://www.apple.com/imovie/)is a video editing software application developed by Apple. Features include options to modify and enhance video color settings, crop and rotate video clips, stabilize shaky videos, add video transitions, and change the speed of clips.

## Bonus tools:

- [Bitly](https://bitly.com/) is a URL-shortening service and a link management platform. 
- [Buffer](http://buffer.com/) is the perfect tool for scheduling posts - easy to use, and its free plan lets you connect your social media accounts to schedule up to 10 posts per account at a time. 
- [Word Hippo ](https://www.wordhippo.com/what-is/another-word-for/about.html)is a website with helpful vocabulary resources. The resource list includes synonyms, antonyms, word meanings (with example sentences), pronunciation, and rhyming words. Just type in a comment in the top search bar of the website and select which help you want to use.
- [Hashtagify.me](https://hashtagify.me/hashtag/peace) lets you enter a search term and see the trending hashtags on Twitter and Instagram. The platform shows you which high-profile users drive the traffic so you can engage authentically.
- With [Google Analytics](http://www.google.com/analytics/), you can check your website traffic, measure social media efforts, create customized reports, and much more.

**For the best free websites for high-quality pictures, check our article "[Free Resources For Resourceful Web Designers](https://www.lexis.solutions/blog/free-resources-for-resourceful-UI-designers)".*

Lexis Solutions' recommendation for the best free tools for content creators. 

Powerful and Free Tools for Content Creation

## My FAQ story 

After going through the rockiest parts of the QA path, I am competent enough to give you some insight into the questions that naturally come up in the training process.

## Reality check

Like many juniors in the Quality Assurance field, I quickly realized that offline and online courses fall short of preparing you for the real world. Plenty of questions that appear trivial at first glance are complex once you scratch beneath the surface. Let’s unpack them one by one.

## Who is the QA? 

QA as a person, is responsible for making sure that all parts of the software work intact both together and separately. QA as a process is the systematic and comprehensive procedures defined and followed by QA specialists. 

![QA-mistakes](//images.ctfassets.net/5gydaotbo8jm/5vzBacw8fWNfS8JDHFW1R1/c4d496245e48c6d4db33d853889604fe/QA-mistakes.jpg)

## What does a QA do?

In an IT company, a QA would be concerned with tracking the progression and [development process](https://www.lexis.solutions/services/node-js-development) of what is being worked on. He points out what is a good idea and what is not and keeps track of the requirements and tests according to them.

Textbooks say that "QAs ensure that the products customers receive consistently meet or exceed expectations." or perhaps "QAs follow a process that reduces the costs for the stakeholder by ensuring that bugs and inconsistencies are rare and sometimes avoided.". That said, I much prefer bullet points that better depict the actual work being done:

- QAs assist the process in which the "inquiries" transform into a well-structured documentation
- QAs are proactive and responsible for minor changes that play in the big picture that help the project save time and money
- QAs explore the products being tested for a better understanding of the product's business objectives
- QAs identify potential weaknesses at every stage, starting from the planning phase
- QAs measure the user-friendliness of the product (through surveying end users and getting their feedback, for example)
- QAs maintain customer trust through communication with the clients.

## Why are QAs necessary?

As QAs, we possess broader product knowledge and understanding of how to use the system in the way a real user would. We are also accustomed to catching edge-case bugs and have observed first-hand the peculiar ways some individuals use software solutions. Through our skills and experience, we ensure that the product meets the client's requirements and that we have shipped exemplary software. 

![QA-Tester-meme-02](//images.ctfassets.net/5gydaotbo8jm/70Nyyn6jBp85tz45Fn8oPY/9ed34fb1fa4941b332a02870f9a95564/QA-Tester-meme-02.jpg)

## What is the proper mindset for a QA?

A QA is supposed to be critical to a top point, starting from the planning phase. QAs should also emphasize requirement consistency and speculation of possible problems that might occur before the actual work of the product has begun. During the development phase, a QA is supposed to do mindful testing, mimicking the user behavior while also exploring edge cases. This process is documented, and the main usage scenarios become user stories and flows that need to be tested regularly.

![testing meme12](//images.ctfassets.net/5gydaotbo8jm/3fx8LYsvqB80Gesetb4vO4/1117042af2e6b42267c755410e88363d/testing_meme12.jpg)

##  Are we so OP to spot all those evil bugs?

No, and that's fine! We are considered an effective QA not by the quantity of discovered bugs but by their severity. So, what we can do to be the best version of ourselves as QA is to be consistent in our working and learning process. 

This means that we sometimes catch all the bugs. But our persistence pays well in the end:
- We become efficient.
- New ideas appear with new projects.
- We get to be more reliable for our colleagues

![there-is-always-one-more-bug-qa-engineer-test-noirty-designs](//images.ctfassets.net/5gydaotbo8jm/63wOlsXMkkmkW7xVjZjqyP/98a8ec520e1530b7002b6525a0ea9534/IMG_20221101_140527.jpg)

## Bonus: Quick-growth hacks

It is essential to have a sense of continuous and gradual improvement because you risk losing motivation, becoming frustrated, and even giving up without it. Let me share some tips for maintaining a positive attitude and taking control of the training process:

- Mentally prepare for a lot of new information. A LOT. QAs speak their language, and learning it will take time, patience, and consistency.
- Communicate with your seniors constantly. Search for tips and inquire about the correct terms, as there are plenty of them to memorize. You never know what gem might come up in a regular conversation.
- Attempt daily meetings with anybody more experienced than you and chat about the IT world. The common knowledge adds up, and you even make some new friends.
- Spend time on your reading, researching, and googling the topics you’re working on or are about to work on. The most effective learning method is studying something you are interested in. Find where your passion is at the moment and follow it. The QA world is vast, and you will always be able to find a curious topic to delve deeper into.
- Ask questions. Ask your seemingly foolish questions too. And if you heard the phrase “there’s no such thing as a “stupid question,” only an unasked one“? Oh, there are. Plenty. Still - ask bravely. 
- Take hints from past projects. Discuss with your seniors how previous systems were designed and where the problems lay. That includes what bugs appeared during their development, what was important, what wasn’t, and what the priorities were. Absorbing the condensed experience of your peers will make you ingenious in the new projects you take on. Learning from others is a life skill that is undoubtedly beyond precious for upcoming QAs.
- Take advice from seniors, observe their working methodology, how much time they spend on their work, and how they tackle their problems. You might receive advice that they applied and it didn’t work for them, but it works for you. 
- Remember to laugh during the process. You cannot be serious all the time. Mistakes occur while writing the documentation while testing, and communicating. Accept them as part of the learning process, and may laughter be the spoon of sugar that you need during learning.

## Conclusion

You have officially stepped into the shoes of the QA and know the answers to the frequently asked questions. Keep in mind - the series “In the shoes of a QA” is just beginning and will continue with the hottest topics like: 

- REST API
- GraphQL API
- Manual Testing
- Writing Test Scenarios
- Automation
- Useful tools

## [See you next time](https://www.lexis.solutions/blog/how-to-test-REST-ful-APIs-with-postman) and until then, remember to

![3376755](//images.ctfassets.net/5gydaotbo8jm/5lYbHBRabhP5alBTojO4C0/ce7de2dd6dba9621ea7a0ba46b70d6c8/Screenshot_2022-11-01_at_14.04.27.png)


Answering the same questions I had in your place and providing some valuable tips on beginning the QA journey. 

Into the shoes of a QA: The FAQ

From fonts to access to stunning images & royalty-free stock, Lexis Solutions has prepared a list of free resources for all UI designers. 

## PHOTOS

### [Pexels](https://www.pexels.com/)

![Pexels](//images.ctfassets.net/5gydaotbo8jm/6M6l42lfE20dYPrr3Alsyq/e29bab3ddf21aea90f244391e946c5e0/Pexels.png)

Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures.

*Alternatives:*

- [Pixabay](https://pixabay.com/) is a vibrant community of creatives, sharing copyright free images, videos and music.
- [Unsplash](https://unsplash.com/); Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
- [Burst ](https://burst.shopify.com/)is a free stock photo platform. The image library includes thousands of high-resolution, royalty-free images that their global community of photographers shot.

## VIDEO
### [Coverr](https://coverr.co/)

![Coverr](//images.ctfassets.net/5gydaotbo8jm/D12IIyCieJYPyldOeHtfW/7fd183fb3ce009e7c3b461d8007ad841/Coverr.png)

Coverr is a resource for beautiful, free, and exclusive stock videos for commercial and non-commercial use, requiring no attribution. Coverr should be your go-to destination when searching for a video for your next project.

*Alternatives:*

- [Videvo](https://www.videvo.net/); 500,000+ stock footage clips, motion graphics, Premiere Pro templates, After Effects templates, royalty-free music, and sound effects, all at your fingertips.
- [Videezy](https://www.videezy.com/) is the place to share your Free HD Stock Videos, b-roll, backgrounds, and other fantastic free video footage. Here you can explore and discuss the footage of other videographers worldwide or find that perfect little cutaway for your next big project.
- [Life of Vids](https://www.lifeofvids.com/) is a platform offers free videos for personal & commercial uses; new videos are added weekly! 

## Fonts
### [1001freefonts](https://www.1001freefonts.com/)

![1001 free fonts](//images.ctfassets.net/5gydaotbo8jm/1kFfTGrplkeVLfv15FFiVZ/7e5d8a521cc41e4b43231f4f4c8f5ad2/101freefonts.png)

Download free fonts for Windows and Mac. Browse categories such as calligraphy, handwriting, script, serif, and more. New fonts are added daily.

*Alternatives:*

- [Google Fonts](https://fonts.google.com/) is a library of 1455 open-source font families and APIs for convenient use via CSS and Android. The library also has delightful and beautifully crafted icons for everyday actions and items. Download them for your digital products for Android, iOS, and the web.
- [Dafont](https://www.dafont.com/); Archive of freely downloadable fonts. Browse by alphabetical listing, style, author, or by popularity.
- [Front Space](https://www.fontspace.com/popular/fonts); Free downloads of legally licensed fonts that are perfect for your design projects. The best place in the universe to search for unique fonts.

## Icons
### [Fontawesome](https://fontawesome.com/)

![Fontawesome](//images.ctfassets.net/5gydaotbo8jm/AQvjvPP56vG0F6ijD4weK/d9c8be25f042c1a7a290d6c82dcc9674/fontawesome.png)

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

*Alternatives:*

- [Iconfinder](https://www.iconfinder.com/) is the world's largest marketplace for icons, illustrations, and 3D illustrations in SVG, AI, and PNG formats. It has more than 239649 free vector icons.
- [Noun Project](https://thenounproject.com/) features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 5 million art-quality icons and photos.
- [Flaticon ](https://www.flaticon.com/)is a database of free vector icons. A tool that converts icons into web fonts. Access 8.3M+ vector icons and stickers. Resources made by and for designers. PNG, SVG, EPS, PSD, and CSS

## Mockup generator
### [Visme](https://www.visme.co/mockup-generator/)

![Visme](//images.ctfassets.net/5gydaotbo8jm/48ZyGWtYDmacFLlOTVmTME/1eb4099e9c1403798637c1453c5ce4c8/Screenshot_2022-10-27_at_14.42.23.png)

Visme is an online tool for creating, editing, sharing, and storing visual materials. You can use it as a presentation app to make slide decks, but you can also create templates for infographics, charts, logos, storyboards, graphics for social media posts and the web, letterheads, and other items. 

*Alternatives:*

- [MockupBro](https://mockupbro.com/); You can create product mockups with MockupBro! Just choose a mockup, upload your design and download your image without a watermark!
- [PixieLied](https://pixelied.com/mockups) is an easy-to-use design solution that allows users to create stunning ready-made designs from 25+ formats and access millions of stock photos, icons, and illustrations.

## Design inspiration 
### [UI Design Daily](https://www.uidesigndaily.com/)

![UI design daily](//images.ctfassets.net/5gydaotbo8jm/6f0CIvfaUTPubhDlt9Xyff/b0cbcdaf48282f5f10341380f90d9799/Screenshot_2022-10-27_at_14.43.22.png)

- [Dribbble](https://dribbble.com/tags/free_design_system) is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs, and recruiting site and is one of the largest platforms for designers to share their work online. 
- [Voog Design System ](https://voog.design/)has everything from multiple examples of the style, colors, typography, layout, and grid. Also, there are many examples of components like forms, buttons, tables, modals, popovers, editors, placeholders, navigation, eCommerce, dashboard, and container.

*Read next: '[Powerful and Free Tools for Content Creation](https://www.lexis.solutions/blog/powerful-and-free-tools-for-content-creation)'*

A list of free resources for all UI designers.

Free Resources For Resourceful UI Designers

## Introduction

We all realize the importance of creating the minimal bundle size possible and performing numerous optimizations to mitigate the effects of the dependency mesh. I believe we can tackle the issue effectively by choosing the right libraries, and I would argue that Chartist is one of the best choices for charts.

## Bundle size

Why is bundle size important? The quick answer is speed and load time. More libraries mean more code, more code is more MBs, and more MBs mean a longer download and code-processing time. That said, pick the correct libraries, reduce the bundle size and make your user happy!

## Considerations when picking a library

The libraries you pick should be widely used, frequently updated, and documented. It is always reassuring to see a few dozen contributors mentioned and if the library has a dedicated website, it is solid. Do not forget to check the number of dependencies, as this is an easy way to bloat the bundle size and people often overlook it. Attempt to pick libraries with the fewest dependencies possible. For example, Chartist has no dependencies!

## Why Chartist

Chartist covers the basics, is customizable, and has the FAQs already answered by the community. It is also ~10kB when minified and zipped and has 0 dependencies.

I like it because it is easy to use and has responsiveness options. Take a look at a few examples:

- [Responsive bar](https://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/extreme-responsive?file=/index.ts:359-372)
- [Horizontal bar](https://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/horizontal)
- [Line chart with 3 lines](https://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/simple?file=/index.ts:0-34)
- [Line chart with area](https://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/area?file=/index.ts:0-34)
- [Bi-polar area line chart](https://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/line/bipolar-area?file=/index.ts:0-72)

## My experience
### Discovering Chartist

The project I currently work on is SEO focused. We have emphasized speed and HTML semantics to reach the top of Google search results. I couldn’t afford to pick any charting library as most are needlessly bloated and could prove detrimental to our SEO score. Proper research was due... 

Google and Stack Overflow are my go-to sources of information. I reviewed the top results, rephrased my search term several times, and eventually landed on the Chartist website. The statement “ONLY 10KB (GZIP) WITH NO DEPENDENCIES!” hooked me. As I read further into the documentation, the library seemed to fit my needs perfectly.

![Chartist Hero](//images.ctfassets.net/5gydaotbo8jm/4nxktIApE6x6jM8AzGNry3/8e7fdb4e147372dbf2d94b4f63e517f5/chartist-hero.png)

### My task

My job was to create a dynamic line chart representing trends over the last 5 years. The first chart is the goal and the second chart is the result I got using Chartist.

![Chart Goal](//images.ctfassets.net/5gydaotbo8jm/1mXCL7MoB1JmYbfLPrVrHZ/a6cb6b3255107a6061992bc92321e732/chart-goal.png)
![Chart Result](//images.ctfassets.net/5gydaotbo8jm/75HegIRYYFCTkGZNSsLPuq/ea21c1e0c3b22c3195348b19f1844e02/chart-result.png)

Research, implementation, and troubleshooting all took me around 3 hours - much less than what I expected given the performance restrictions put on the application. 

## Customization

### Options

This is the code I started with

![code1](//images.ctfassets.net/5gydaotbo8jm/7MMgV6jn2anonhAI8kbaTQ/a8dd5339a9154d0f9a10345d63779a01/Screenshot_2022-10-21_at_15.17.02.png)

*And this is what it got me*
![chart3](//images.ctfassets.net/5gydaotbo8jm/26s4z1xycoJhSkQXEewUU2/ce9632a8495358c2ed5bb1c338312aa6/image__2_.png)

The elephant in the room was the coloring. Everything else was tolerable the way it came. It turned out, however, that I fixed several visuals just because it was easy to do so. 

Let us start by eliminating the elements we don’t need - the points and all but the zero grid line. Extend the options like this

![code2](//images.ctfassets.net/5gydaotbo8jm/5rT6rIrdJPHmCVaZMj05SQ/ba45d3a1fd9447712d2a1fcb5bb3be89/Screenshot_2022-10-21_at_15.19.24.png)

`showPoint: false` will hide the points
`axisX: { showGrid: false }` hides the vertical grid

Inside of `axisY`
`referenceValue: 0` will guarantee we have the 0 horizontal grid line and 
`labelInterpolationFnc: value => value === 0 ? value : null }` will hide all horizontal grids of values different than 0

*The result we got is this*

![chart4](//images.ctfassets.net/5gydaotbo8jm/01en7B55DmYH3Fe6c5IbvQ/ec95cbf4b77ac35b42ed1b77f984a8d5/image__3_.png)

### CSS

Chartist comes with default colors for the lines and the area beneath them. The easiest way to change them is done via plain old CSS.

Each of the data series (lines) receives a class name in the format of `ct-series-{letter}` where letter is a,b,c…

![code](//images.ctfassets.net/5gydaotbo8jm/1LjnHOz51UNjvItw7LLVzg/1f5bb896e87536957e74ff870d00cbac/Screenshot_2022-10-21_at_16.41.40.png)

As you can see the chart is in fact an SVG so the color manipulations happen via the stroke and fill properties.

![code3](//images.ctfassets.net/5gydaotbo8jm/7qdXyCRZDhdMOeTgz7kaBF/cb6586036dc1a942d8fbd6a790ab0f62/Screenshot_2022-10-21_at_15.21.33.png)

`#red-gradient` and `#green-gradient` represent the custom gradients I needed for the area beneath the red and green lines. You must define them as follows somewhere in the HTML.

![code4](//images.ctfassets.net/5gydaotbo8jm/PzTdNnXF4jbYCu0PgZfLT/1bc0d6a7a12f4d3b6f7c607fee0ab90d/Screenshot_2022-10-21_at_15.22.45.png)

The last changes produce this and it’s almost pixel-perfect!

![Chart Intermediate](//images.ctfassets.net/5gydaotbo8jm/6fi5eoINFsLKwyfHIGjC6N/bc7fbcfef72a1366596ba5676375ef69/chart-intermediate.png)

### Conclusion

By now, we have nearly nailed the design. You can reach the result with further customization, but that’s not the point. What is important is that you got the basics of a library that does a splendid job and is 10+ times lighter than what you’d expect. Just imagine the impact a proper selection of libraries can have on your next project’s bundle size…


What to look for and consider when searching for a chart library.

From the front lines