This past week, I’ve been diving deep into integrating push notifications into a mobile app. If you've ever wondered how they work and why they’re so effective, this post is for you!

What Are Push Notifications?

Push notifications are short, clickable messages that appear on a user’s device—whether it’s a smartphone, tablet, or desktop. They can be triggered by various events, such as app updates, reminders, personalized offers, or breaking news.

Unlike emails or SMS, push notifications don’t require users to open an app or website to receive updates, making them a powerful tool for real-time engagement.

How Do Push Notifications Work?

Push notifications rely on both client-side and server-side technologies. Here’s a quick breakdown of the process:

1. User Subscription – When a user installs an app or visits a website, they are prompted to allow push notifications. Their consent is required to receive notifications.

2. Push Service Registration – Once the user opts in, the app or website registers the device with a push notification service, such as:

   • Firebase Cloud Messaging (FCM) for Android

   • Apple Push Notification Service (APNs) for iOS

   • Web Push Protocol for web browsers

The service then returns a unique device token, which acts as an identifier for sending notifications.

3. Sending Notifications – When the backend system wants to send a notification, it makes a request to the push notification service, including the device token, message content, and optional metadata (such as priority or expiration time).

   Here’s an example of sending a push notification via Firebase Cloud Messaging (FCM):

POST  https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send
Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA

{
   "message":{
      "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
      "notification":{
         "body":"This is an FCM notification message!",
         "title":"FCM Message"
      },
      "android":{
         "notification":{
            "icon":"stock_ticker_update",
            "color":"#7e55c3"
         }
      }
   }
}

4. Delivery & Display – The push notification service delivers the message to the user’s device. The client-side app or browser processes the message and displays it in the notification center.

5. User Interaction & Analytics – When a user interacts with a notification, apps can track engagement metrics such as click-through rates, conversion rates, and user behavior.

Popular Use Cases for Push Notifications

Push notifications are versatile and can be used in various industries, including:

• E-Commerce: Alert users about sales, discounts, or abandoned cart reminders.

• News & Media: Deliver breaking news updates or trending articles.

• Healthcare & Fitness: Send reminders for medication, workout schedules, or health tips.

• Finance & Banking: Notify users of account updates, transactions, or fraud alerts.

• Social Media: Inform users about messages, mentions, or friend requests.

Push notifications, when used strategically, can enhance user engagement, boost retention, and drive conversions.

Have you implemented push notifications in your app? What challenges did you face? Let’s discuss this in the comments!

As a solution to this issue, quite a few options were available. About each option, I will present what disadvantages it brings and what advantages it brings.

Cookies

Cookies are a straightforward and common option for detecting whether a specific user has already logged in to a specific browser on a specific device.

However, cookies expire or are deleted by the user, based on which we cannot know without a doubt whether the user's identification information is still valid. In addition, cookies may also be subject to attacks such as identity theft or cookie spoofing.

IP addresses

Another way to detect devices is through IP addresses. Each device has its unique IP address that can be used for identification, but this only applies to private IP addresses.

However, the use of IP addresses may be restricted due to the use of VPN servers or proxy servers, which may hide the user's real IP address. In addition, multiple users can access the Internet through the same IP address, which can cause identity confusion.

Use of browser fingerprints

Browser fingerprints are based on collecting information about browser configuration and user behaviour, such as browser versions, operating systems, installed plugins, etc.

This method can be very accurate in identifying a device, but users may be aware of their fingerprints and consciously alter or hide them, reducing the effectiveness of this method. However, in my opinion, one of the better ways of detection.

Two-step or multistep authentication

Two-step or multistep authentication (2FA or MFA) is a process that requires the user to provide an additional form of verification in addition to the normal password, for example via an SMS message, an authentication application or a physical security key.

This method provides an additional layer of security. It can prevent unauthorized access to the account but can also cause a bit more complexity for users and hinder them from accessing the application quickly.

Conclusion

Which method is most appropriate depends on the specific needs and requirements of the application and the compromise between security and user experience. It is also important to take into account any legal requirements or regulations that determine methods of protecting user data.

One of the built-in modules in Node.js is the file system module.

This module provides us with all CRUD functions (Create, Read, Update, and Delete):

• Creating files

• Reading files

• Renaming files

• Updating files

• Deleting files

File management like this is useful when we want to write something to a file, such as logging. Additionally, we'll likely use this module when our application users are changing their profile pictures.

This module allows us to manage files both asynchronously and synchronously.

File System Module

Before using the library, we need to import it, just like importing any other libraries in JavaScript. Importing is done using the require function.

let fileSystem = require('fs');

Deleting Files

To delete files, we use the unlink or unlinkSync function.

unlink

unlink is used for asynchronous file deletion, allowing us to use callbacks, which unlinkSync does not.

const fs = require('fs');

fs.unlink('./fileForDelete.txt', (error) => {
     if (error) throw error;
     console.log('Successfully deleted the file.');
});

The function takes the path to the file to be deleted as the first parameter and a function as the second parameter, which notifies of any errors or provides a success message.

Creating Files

For creating files, we use the writeFile or writeFileSync function.

writeFile

The writeFile function allows asynchronous file creation.

const fs = require('fs');

const content = 'Content of the file to be created.';

fs.writeFile('./newFile.txt', content, (error) => {
     if (error) throw error;
     console.log('File successfully created.');
});

The writeFile function takes the path to the file (first parameter), the content of the file (second parameter), and a function that handles any errors or reports success (third parameter).

writeFileSync

The writeFileSync function allows synchronous file creation.

const fs = require('fs');

const content = 'Content of synchronously created file.';

fs.writeFileSync('./newSyncFile.txt', content);

console.log('Synchronous file successfully created.');

The writeFileSync function takes the path to the file (first parameter) and the file's content (second parameter).

Reading Files

For reading files, we use the readFile or readFileSync function.

readFile

The readFile function allows asynchronous file reading.

const fs = require('fs');

fs.readFile('./existingFile.txt', 'utf8', (error, data) => {
     if (error) throw error;
     console.log('File content:', data);
});

The readFile the function takes the path to the file (first parameter), an option for decoding the file content (in this case, 'utf8'), and a function that handles any errors or returns the read content (third parameter).

readFileSync

The readFileSync function allows synchronous file reading.

const fs = require('fs');

const data = fs.readFileSync('./existingSyncFile.txt', 'utf8');
console.log('Synchronous file content:', data);

The readFileSync function takes the path to the file (first parameter) and an option for decoding the file content (in this case, 'utf8').

Renaming Files

For renaming files, we use the rename or renameSync function.

rename

The rename function allows asynchronous file renaming.

const fs = require('fs');

fs.rename('./oldName.txt', './newName.txt', (error) => {
     if (error) throw error;
     console.log('File successfully renamed.');
});

The rename function takes the current name of the file (first parameter), the new name of the file (second parameter), and a function that handles any errors or reports success (third parameter).

renameSync

The renameSync function allows synchronous file renaming.

const fs = require('fs');

fs.renameSync('./oldSyncName.txt', './newSyncName.txt');

console.log('Synchronous file successfully renamed.');

The renameSync function takes the current name of the file (first parameter) and the file's new name (second parameter).

Updating Files

For updating files, we can use the appendFile or appendFileSync function.

appendFile

The appendFile function allows asynchronous appending to an existing file.

const fs = require('fs');

const additionalContent = '\\nAdditional content for updating the file.';

fs.appendFile('./existingFile.txt', additionalContent, (error) => {
     if (error) throw error;
     console.log('File successfully updated.');
});

The appendFile function takes the path to the file (first parameter), additional content (second parameter), and a function that handles any errors or reports success (third parameter).

appendFileSync

The appendFileSync function allows synchronous appending to an existing file.

const fs = require('fs');

const additionalSyncContent = '\\nSynchronous additional content for updating the file.';

fs.appendFileSync('./existingSyncFile.txt', additionalSyncContent);

console.log('Synchronous file successfully updated.');

The appendFileSync function takes the path to the file (first parameter) and additional content (second parameter).

These are the basic operations provided by the file system module in Node.js, and they are crucial for managing files using JavaScript. With these functions, we can efficiently create, read, update, and delete files on our computer.

Conclusion

In summary, Node.js's file system module empowers developers to efficiently manage files using JavaScript. The module offers CRUD functions, allowing for flexible file operations in both asynchronous and synchronous modes.

Whether handling logs, user-uploaded files, or routine file management, Node.js provides a robust solution. Key functions like writeFile, readFile, rename, unlink, and appendFile, along with their synchronous counterparts, enable developers to tailor file operations to their application's requirements.

The GitHub Student Developer Pack gives students access to the tools companies use in their development. GitHub and its partners are aware of this and make it possible for students to get these tools.

How do I get access to the GitHub Student Developer Pack?

If you don't have a GitHub profile yet, just create one on the GitHub website. I recommend that you create a GitHub account with your personal email address and add your school email address to the account.

If you have a GitHub user account, visit the GitHub Education website and click the "Sign up for Student Developer Pack" button

In the next step, a new page will open, on which you can click "Get student benefits".

A form with three questions will open. In the first question, you select the appropriate school email address. The next question can be filled in automatically, or you will need to enter the school's name manually. The last question is what is your purpose for using GitHub?

GitHub can now ask you to upload a certificate or proof that you are indeed a student.

Your request will be processed within one week. As soon as your application is approved, you will be able to start using GitHub for students benefits.

What benefits does the package bring me?

The package brings a lot of benefits that can make it easier to enter the world of computing. Some of them are:

• Subscription to GitHub Pro for the duration of the course

• JetBrains IDE subscription

• Subscription to Azure for Students with annual credit of 100 EUR and some license programs.

• Free .me domain for a year

• 6-month subscription to the Educative portal

You can view all benefits on the GitHub Education website

Conclusion

I hope this post has convinced you to try out tools from GitHub and partners. Just bravely try the benefits of the package.

What advantages does it bring?

Open Graph brings advantages when displaying a website on social networks. Open Graph makes our posts more visible on social networks and shows them better in searches.

Above we can see a website without Open Graph tags and how the link will be displayed on the Facebook social network.

Now I will show how my blog post would look if I share or post a link on Facebook or another social network using the Open Graph protocol.

Even if you don't have any Open Graph tags on your page, nothing serious will happen, but they improve your presentation on social networks.

Basics of Open Graph?

We know the four basic tags used in the Open Graph protocol, which are considered mandatory. These tags are og:title, og:type, og:image, and og:url.

What represents which element is shown in the image below?

Purpose of individual labels:

• og:image - displays an image (contains the URL to the image)

• og:title - usually the same as in <title> and displays the page title

• og:description - used to describe the page

• og:url -represents the URL of the page

• og:locale - intended to indicate the language of the publication

There are officially 17 different tags that you can use on your website. You can read more about the possible tags in the official documentation.

How to add an Open Graph to a website?

Adding Open Graph tags is easy. We add them to the header in the meta tag with the desired content. Below is a simple Open Graph example for the above example post at the following link.

<meta property="og:title" content="Open-source software: what makes it so attractive?">
<meta property="og:description" content="You may already be familiar with the term &quot;open source&quot; if you have been involved in programming for some time. Open-source software has gained popularity for many reasons, some of which I will attempt to explain below.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.thepatik.com/open-source-software-what-makes-it-so-attractive">
<meta name="image" property="og:image" content="https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1682593145782%2F3f7705ec-2679-4c1c-a52d-b8d3fdeaa78d.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng">

Conclusion

As we have seen, the Open Graph protocol is a simple addition to websites that improve presentation on social networks.

WebOTP is a Web API browser function integrated into Chrome, Samsung Internet and Opera Mobile (Apple devices have their version), browsers on mobile devices, intended for obtaining an OTP (One-Time-Password) in the process of two-factor or multi-factor with the help of an SMS message.

How WebOTP works

An example of using WebOTP in practice.

The user logs in to the website with his user data (email and password), and then the server sends him an SMS message in the prescribed format and an OTP token.

If the browser detects the message, it prompts the user to allow access to read the SMS message.

If the user gives permission, the OTP is automatically entered in the OTP input field and the form is sent to the server, which confirms the validity of the entered OTP token.

If the OTP token is valid, the user is logged in, it is not.

A page must use the WebOTP API to have a valid SSL certificate and a secure HTTPS connection established, otherwise, this WebAPI will not work.

SMS message format

A standardized message format is provided for using the WebOTP API so that the browser can successfully read the data from the message.

Message content:

• Message to the user (optional) -> message to the user;

• Website domain (mandatory) -> must be written in its line and start with @ and continue with the domain name without path and protocol;

• OTP (mandatory) -> written in the same line as the domain, the OTP value can be from four to six digits. The OTP must start in the message with #.

Example of SMS with OTP

The most common mistakes in OTP messages:

User-Side Code Example (JavaScript)

<!DOCTYPE html>
<html>
   <head>
      <title>Test WebOTP API</title>
   </head>
   <body>
      <form>
         <!-- Form is a GET method to see the sent request -->
         <label for="otp_input">OTP</label>
         <input autocomplete="one-time-code" name="otp_input" id="otp_input" required/>
         <input type="submit">
      </form>
   </body>
   <script>
      if ('OTPCredential' in window) { // Checking if OTP is even available in the browser
      console.log(true)
      window.addEventListener('DOMContentLoaded', e => {
      const input = document.querySelector('input[autocomplete="one-time-code"]');
      if (!input) return;
          const ac = new AbortController();
          const form = input.closest('form');
      if (form) {
          form.addEventListener('submit', e => {
              ac.abort();
          });
      }
      navigator.credentials.get({
          otp: { transport:['sms'] },
          signal: ac.signal
      }).then(otp => { // In case of successful reading of the message, sending the OTP message
          input.value = otp.code; // Enter the OTP value
          console.log(otp)
          if (form) form.submit(); // Form submission
          }).catch(err => {
              console.error(err); // Log an error in case of error
          });
          });
      }
   </script>
</html>

There is a Web component for integration into websites. The web component is written in the JavaScript programming language and can be installed using the NPM tool.

This library is available on GitHub and it is licensed under the MIT license.

Browser support

The most commonly used browsers on Android phones are supported. Apple devices are not supported but use their own Apple AutoFill.

Chrome, Edge and Opera desktop browsers are also supported, as sending is possible OTP from the phone to the computer if the conditions for this are met (https://developer.chrome.com/blog/cross-device-webotp).

Advantages of using WebOTP

The main advantage of using the WebOTP functions is a better user experience of entering OTPs, as there is no need to open the SMS message and copy it only to the application itself.

I would suggest adding to the login flow the possibility of a different login method in case the user does not have his phone with him to read and enter the OTP.

Taken from:

• https://developer.chrome.com/articles/web-otp/

• https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API

• https://developer.chrome.com/blog/cross-device-webotp/

• https://philna.sh/blog/2022/12/07/better-two-factor-authentication-experiences-with-web-otp

• https://developer.apple.com/news/?id=z0i801mg

This time I present the advantages and disadvantages of automatic testing and when it pays to introduce automatic testing in the development itself, and what we need to pay attention to when introducing automatic testing.

Testing

If you are a developer, then you have already heard that it is necessary to test the application several times before it goes into production. The application can be tested in two different ways, most often it is done manually, but there is also the option of automatic testing (yes, the computer itself can check that everything is working as expected).

Manual testing is the execution of functional tests by “hands”, when we click on the application ourselves, and in this way, we find errors and bugs. Application testing is not only functional testing, if all functions work correctly, but application testing also includes a huge number of other types of testing.

Other types of tests:

• Cross-browser Testing – testing the application if it is working in different browsers

• Load and stress testing – testing the website's behavior in the event of an increased number of requests or users

• UI testing (GUI Testing) – testing the user experience and appearance of the application/website under various conditions

• A/B Testing – testing different versions of the application, which works better for the user

• Compatibility Testing – compatibility testing with different device configurations or servers

• Security Testing – testing the security of the application for any security vulnerabilities

• Smoke Testing – testing of the operation of the main functions in accordance with expectations

• Acceptance and Compliance Testing – testing if the application complies with the requirements and expectations of the project

As we can see, we can find that testing does not only include testing if all functions work correctly but also a lot of other types of tests.

Manual testing can be very, very time-consuming if we have a complex application with a lot of features. This is why automated testing exists.

Automatic testing

Automated testing is testing that takes place without the intervention of a tester. It allows us to run application tests automatically.

Automated testing is most often used in E2E (end-to-end) tests. These are tests that illustrate user behavior in the real world. There are also Unit tests, which are used to test individual functions of the application.

Automated testing usually works together with integration in CI/CD (Continuous Integration/Continuous Delivery).

The power of automated testing is most apparent in larger applications/projects. For this reason, I do not recommend initiating automated testing in smaller projects. In smaller projects, you prefer to use manual testing.

Advantages of automated testing

Automated testing brings enormous advantages over manual testing.

• Speed – Automated testing is faster than manual testing

• More frequent testing – automated tests can be run more frequently than manual tests (for example, after each push to Git).

• Higher product quality – frequent testing reduces the chances of errors and bugs in the project and quick detection of these

• Reuse of scripts – all automated test code can be used in multiple places

Disadvantages of automated testing

Although automated testing has many advantages over manual software testing, it also has its disadvantages.

• UI testing – automated testing is not suitable for UI testing

• High initial costs – the initial costs of investing in automated testing can be very high (you need to buy software licenses, find someone who knows how to write tests…)

• Constant correction – automatic tests need to be changed every time the program structure changes

• Generates false positives and false negatives – many times a test can fail and generate a false result

Factors for deciding on the start of automated testing

Automated testing has its pros and cons, it's just a matter of when to decide to initiate automated tests into our development cycle.

The biggest factor in integrating automated tests is the size of the application/project. If we have a smaller project with few functions, manual testing is still the most useful, but if we have several applications or one larger application with many functions, it would be wise to start thinking about automatic testing. Automated testing is easiest to implement on new projects when all members of the development team write tests for features as they are developed.

The next question is how much money we are willing to invest in automated testing. There is no right answer here because we need to know what we want to test and in what way. There are free (open source) and paid solutions. It is also necessary to consider the costs of maintaining the tests when the product will change.

The number of people in the team is also important, a larger team may decide that someone should be responsible for writing tests and the rest should focus on product development.

Planning automated tests

If we have determined that it would be worthwhile for us to start integrating automated tests, we must start with good planning, because only with a good plan will we achieve higher product quality.

• Deciding what we want to test – in the first step, we ask ourselves what we want to test, whether these are the main critical functions or something else

• Choosing the appropriate tool for testing – in the next step, we ask ourselves which tool would be the most optimal and best for us, here we also determine the work methodologies

• Planning the infrastructure – in the third step, we plan what kind of infrastructure we want to run the tests on, this includes planning the integration in CI/CD and the use of automation tools.

• Planning and writing tests – in the fourth step, we start planning the writing of tests for our project. It is essential to test the written tests several times if they work correctly in different situations.

• Analysis – in the last fifth step, we must analyze the results of automatic tests and decide about the next steps (update some test scripts or write new tests)

If we follow all these steps and everything else mentioned in the previous paragraphs, we can greatly increase the quality of the product/application.

In a future article, however, I will try to present some frameworks for automated application testing.

Conclusion

As we saw in the course of the article, testing automation can achieve higher product quality and free the tester to focus on other tests. Integrating automated testing requires a lot of planning to make the integration as successful as possible, but it pays off in the long run.

I hope the post helped you, I will be happy about any comments and also likes. See you soon.

Introduction

To start with, let's define what open-source software is. Put simply, it refers to programs whose source code is publicly available. This code can typically be accessed through online Git repositories, with GitHub being one of the largest collections of open-source software available.

You're likely already familiar with some examples of open-source software, such as MySQL, Visual Studio Code, Apache HTTP server, Mozilla Firefox Browser, VLC media player, and Linux OS. These programs and operating systems have all been developed using open-source methodologies.

The benefits of open-source software are numerous and extend to developers and businesses.

Better security

One common misconception about open-source software is that it is inherently less secure than closed-source software, as the code is publicly accessible and could be vulnerable to analysis by malicious actors. However, the reality is quite the opposite - open-source software is widely considered to be more secure than its closed-source counterparts.

A prime example of this is the comparison between Windows and Linux operating systems. Windows has been plagued by numerous security vulnerabilities over the years, whereas Linux has a reputation for being more secure.

This can largely be attributed to the "many eyes" phenomenon, in which a greater number of people can analyze the code and identify bugs and security flaws more quickly.

Freedom

Another major advantage of open-source software is the freedom it provides. With open-source software, individuals and businesses can easily adapt the software to meet their specific needs. This level of customization is not possible with closed-source software, which is often restricted by licensing agreements and proprietary code.

In practice, open-source software enables greater flexibility and control over the software, allowing for a more tailored user experience. This level of freedom is particularly important for businesses, as it enables them to adapt the software to meet their specific needs and gain a competitive advantage in their industry.

Community support

One of the key strengths of open-source software is the strong sense of community that surrounds it. Open-source projects are often supported by large and passionate communities of developers and users, who are dedicated to improving the software and helping others to use it effectively.

This community support can take many forms, including online forums, user groups, and developer communities. These resources provide a wealth of knowledge and expertise that can be invaluable when encountering issues with open-source software. The strength of the community also ensures that open-source software is constantly evolving and improving, as developers collaborate and share ideas to enhance the software's functionality and performance.

For users and businesses, the community support provided by open-source software can be a major advantage, as it ensures that help is readily available when needed and that the software remains up-to-date and relevant.

Transparency

Another important benefit of open-source software is the transparency it provides. Open-source software is developed in an open and collaborative environment, allowing anyone to view, edit, and review the source code.

This level of transparency ensures that the software is free from hidden features or malicious code, increasing user confidence in the software's integrity. In contrast, closed-source software can sometimes hide unexpected or unwanted features, such as data collection, which can erode user trust and lead to privacy concerns.

By providing full visibility into the code, open-source software enables users and businesses to fully understand how the software works and make informed decisions about its use. This transparency is particularly important in industries such as healthcare and finance, where trust and accountability are critical.

A free alternative

Open-source applications are often created to create an alternative to paid applications. It can also happen that the alternative to commercial applications is even better than the commercial application itself.

These are just a few reasons why open source is so attractive, if you have any other ideas of your own why open source is so attractive, add it in the comments.

If you like the content I create, connect with me at:

🔷Mastodon

🔷LinkedIn

Social networks can be a handy thing if we use them in an appropriate way and with good intentions. Increasingly, however, social networks are being used to harass and damage an individual's reputation, which has many consequences for both the victim and the perpetrator.

During the epidemic, the amount of online violence increased very much, as children and adolescents spent more and more time on social networks.

What types of online violence do we know?

The most common forms of online violence are:

• Offensive messages and comments - constantly write offensive comments against the individual and state untruths about the person

• Exclusion from groups - the person is removed from chat rooms and social media groups in which the victim is discussed and is aware of it.

• Fake profiles - creating fake profiles on social networks and pretending to be the victim

• Editing photos offensively - this is about editing photos that would offend an individual

• Defamation - spreading false rumours about someone

• Threats - sending/posting threats to individuals or groups

• Blackmail - sending requests to the victim

Not all forms of cyberbullying are listed here, as there are many other forms.

What are the consequences for the victim?

The violence of any kind has consequences for the victim. Physical violence typically results in physical injuries, while psychological violence can lead to psychological issues.

Even seemingly harmless violence has consequences for the victim(s). However, if online aggression persists and intensifies, it can lead to further repercussions. In the worst-case scenario, which is unfortunately quite common, the victim may suffer from depression and suicidal tendencies and even take their own life.

What can the victim do?

As a victim of cyberbullying, it's important to speak up. Reach out to a trusted adult, such as a teacher, school counsellor, or parent, and work together to find a solution. Additionally, you can contact countries' institutions and projects that focus on raising awareness about safe Internet use.

It is essential to prevent online violence. Victims must not remain silent; most children and adolescents do not even discuss being bullied, threatened, or extorted online. Talking about it is key.

What are the repercussions for someone who commits violence?

Many people mistakenly believe that if they are sending threatening messages from their home phones and computers, they cannot be tracked. However, this is not true; all online activity can be traced back to its source.

Cyberbullies can hide behind a mask of anonymity online and do not need direct physical access to their victims to do unimaginable harm. – Anna Maria Chavez

The consequences of violence can be severe. Depending on the severity of the act, the perpetrator may face criminal charges, fines, jail time, and other penalties. In addition, they may suffer social, emotional, and psychological repercussions, such as public humiliation, loss of relationships, and difficulty finding employment.

It is important to remember that the person sending the messages is also legally responsible for their actions and could face imprisonment.

I will end this post with this quote

Every call, email and text is a chance for you to send more love into the world. Stop cyberbullying.

Like my content. You can find me on:

🔹Mastodon

🔹LinkedIn

🔹Instagram

🔹GitHub

This year has been a journey of discoveries and revelations as we navigated the ever-evolving computing world.

Today is particularly momentous and significant, as it is my 19th birthday🎉.

Before I take a look back over the year, allow me to introduce myself.

My name is Patrick and I come from Slovenia, a beautiful country. I am currently ending my learnings in computer science at Celje and, in my free time, I give a lot of effort to improving my web development skills. I have been actively creating web solutions for three years now.

Blogging✒

Over the year, I wrote 11 articles on my technical blog, which focused primarily on web development, computer science, and my personal experiences with these topics.

Writing has become a passion of mine, as I thoroughly enjoy being able to share my knowledge with the world.

I strongly believe that knowledge is the only way to progress, and no matter where or when we learn, the value of writing an article to document what we've learned is priceless.

Writing about what we know helps us not only expand our understanding but also gives others the chance to learn more about what we have discovered. It also allows us to connect with others who have similar interests, and to help one another grow in our shared understanding.

The most-read articles in 2022:

• Find A reason why to write a blog📚

• How to bypass CAPTCHA?

• What is CRUD?

Research paper📚

At my high school, we create a good deal of research projects each year. This year, I made one too: a mobile application for my school centre, the largest in Slovenia—School Center Celje. I'm very proud of it.

The ŠCC Mobile app was popular among all students. It simplified a lot of information from various sources. Unfortunately, I had to shut it down due to the School Center's requirements.

I faced many challenges with the research project. The most important lesson I learned is to never give up, even in the face of failure.

The research project was also presented at the national competition of young researchers in Murska Sobota.

Presentation of my school🏛

In March, I had the opportunity to present my school, the Secondary School for Chemistry, Electrical Engineering, and Computer Science, on a day of open doors.

I was excited to have the chance to explain why our school in Celje is an excellent choice for those looking for an education in the sciences.

I was able to take advantage of this opportunity to practice my public speaking skills in front of a large audience. During the presentation, I was able to highlight the numerous advantages of our school.

I was also able to showcase my research paper ŠCC Mobile.

In the end, I'm proud to say that I was able to present my school in the best possible light, and I was thrilled to have had the chance to do so.

What matters most to me is the experience of public speaking, in front of a big audience.

Internship at HRC👨‍💻

In June, I completed a mandatory internship at the local company HRC. They produce software for Slovenian and Croatian banks, called Hibis.

During my daily tasks, I learned a lot of new things. My main task was to perform manual and automated testing of the online bank.

Working collaboratively with others can lead to faster, more efficient problem-solving.

This experience made me realize that testing is an important part of development, which is often overlooked and not given enough attention. Testing helps to ensure that the product is of the highest quality before it is released to the public.

I believe that schools should teach something about this topic. The most important lesson I learned from this experience was that if you have a development problem, you have a team of experts to help you solve it. Working collaboratively with others can lead to faster, more efficient problem-solving.

SloveniaSkills 2022 competition🏆

In September, my classmate Tilen Goršek and I represented the School Center of Celje in the SloveniaSkills competition in computer science and informatics.

The competition gave us real experience in setting up a network in a company, as well as how to secure the entire system. We learned about the advantages of using name servers and managing user authorizations.

Though we weren't the most successful, my classmates and I gained valuable knowledge.

Throughout the year, I encountered many people. I acquired a great deal of knowledge. What I appreciate the most is that there are countless opportunities to acquire new information at every turn; you just have to be proactive in finding them.

What's coming? 🚀

Perfect question… For now, I know I will write a new research paper and create a new product, BiznisBox. What's more, we'll see what the year brings. Before that, I'll finish high school and enrol in the university.

I've wanted to set up my server for my needs for a while now but never found the time or how to. Well, last week I finally made it happen, and currently, it's working for me (the server, make no mistake).

First, the advantages of having your server:

• The data is only yours, everything you have stored on your computer you know until you access it.

• You can configure it as you wish, you are not tied to a service provider

• It is cheap to set up and maintain

But what can be the disadvantages of one's own server

• Security, You have to deal with who accesses your server and how you have it configured

• Extra electricity costs

Nextcloud

Before presenting how my server works, I will present what Nextcloud is. Nextcloud is open-source software that allows us to build our digital cloud.

Nextcloud is an excellent alternative to big fishes like Dropbox, Office 365 and Google Drive, as it allows for a massive amount of expansion and many extra functions that are unavailable in any of the commercial programs listed above.

The software also has the option of installing a tool for group file editing and an online editor of documents, layouts, and tables like that of Microsoft Office. Nextcloud also allows you to make video calls and send direct messages.

By adding plugins, Nextcloud can become the ultimate productivity tool.

Nextcloud is also used in companies and also in the German government and schools.

How do I set up my server?

I've taken tons of photos in my life, and last year Google Photos introduced a photo upload limit. So, some time ago, I ran out of space in the Google Photo service. So, I had one computer at home, which I did not use in principle, and I installed the Ubuntu operating system.

I chose the Ubuntu operating system because it is used and because it has a nice graphical interface (if I ever decide to take my computer with me).

First, it was necessary to update all packages to the latest version.

How I went about installing Nextcloud on Ubuntu.

There is already a package for easy installation of Nextcloud in the Snap online market and it contains everything we need (installation package link).

All we have to do is install this package. The easiest way to do this is with a simple command.

sudo snap install nextcloud

Then, inside my home local network, I entered the IP address of my computer in the web browser installed Nextcloud to the end and created a user account to access the installation.

Such an installation is only available within a local network? But what if I want to access my “cloud” also from some other network?

There are many solutions for this as well, from redirecting your router to a suitable computer, setting up a VPN server at home or tunnelling. Tuning turned out to be the most optimal and cheapest solution for me.

I always host my domains with Cloudflare because it gives me many free features. Some free services are CDN with unlimited bandwidth, static website hosting, DNS domain hosting with unlimited DNS records, Cloudflare Tunnels, DDoS website protection…

Cloudflare Tunnels

Usually, to access your server at home in a private network, you need a static IP and port forwarding on the router.

But there are tunnels in the networking. Like in the real world, tunnels are designed to overcome obstacles. In our case, the obstacle is our local network. Network tunnels allow us to create secure connections to our application on the server, something like a VPN.

In case we already have our domain on Cloudflare DNS, then creating tunnels is accessible like a cake. We only need to install the Cloudflare application on the device (only one command on Linux) and then we can set up the applications hosted on the device in the Cloudflare GUI.

The first step of installing Cloudflare Tunnels. We must install this little package into our system.

And then set our public hostnames. What is simple, is just enter the subdomain of the domain which we like and then set the hostname on the device URL.

We can use Cloudflare Tunnels for SSH or RDP access to our machine.

The function is also proper when we want to show a prototype of our product.

I hope this article helped you to discover how easy it is to set up your own media server.

Till next time 👋.

Large corporations collect data about their users daily, without their knowledge. Because of these examples, there is quite a lot of European legislation that we must follow when creating websites and applications.

Privacy is dead, and social media holds the smoking gun.

Protection of personal data

One of the most high-profile requirements was the GDPR (General Data Protection Regulation) adopted in 2016, which changed a lot of things in the field of personal data collection and processing. The order increased the transparency of personal data's use and collection, transmission and use.

The GDPR requires every developer of web applications/sites to draw up a privacy policy in which data is collected about who collects personal data (it can be a natural or legal person), what data is collected and how it is obtained. It is necessary to be aware that the amount of collected personal data must be limited to a minimum, which means that we must not collect more data “in case we need it sometime in the future”. It is also necessary to provide a contact whom the visitor/user can contact in case he wants to exercise his rights under the GDPR. At the same time, it is necessary to specify the user's rights.

The document in which we describe this is called the privacy policy.

Cookies

Cookies are very popular for storing data in user sessions, and services for website visit analytics are very popular on websites.

The European directive on electronic privacy (ePrivacy) requires the companies to offer the user, in the case of using cookies for analytics, and marketing, the option of choosing if they agree to the use of services.

In practice, this usually means. When visitors visit the page, the website must display a banner about the use of cookies and options to agree or not.

If the visitor/user refuses to use cookies, it is necessary to ensure that the cookies aren't installed.

This rule does not apply to functional cookies (e.g., cookies that store login information)

But this directive applies not only to cookies but to all technologies that enable storage on the computer and re-recognition of users, including possible storage in the browser's local storage (LocalStorage, SessionStorage).

Because of this European law, every website must have a document called a cookie policy, which must contain what a cookie is, why it is used and the categorization of each cookie on the website. What this means, is that it is necessary to list all the cookies that are on the website and describe why they are used and how long they are kept.

Privacy is not something that I'm entitled to, it's an absolute prerequisite.

Google Analytics yes, or no?

Many companies/organizations use Google Analytics to track user behaviour (me included).

But, can I even use it? The answer is not clear.

The European countries of Austria, France, and Italy have already banned the use of Google Analytics on websites, as Google collects a huge amount of data on user behaviour with Google Analytics and uses it for its own needs - targeted advertising.

However, there are quite a few alternatives with which we can collect analytical data about visits to our websites.

Some of them are:

• Matomo Analytics

• Plausible Analytics

• Piwik Analytics Suite

• umami

All these alternatives try to be and collect as little data about visitors as possible, but still, try to get enough data for analysis.

If you ever check a website, you will find that many websites do not follow European directives.

I hope I have shown you how much is required for a website to follow European legislation.

All these rules apply in the European Union and to companies outside the European Union if they collect data about EU citizens.

The article is informative, I am not a lawyer. Consult a lawyer/lawyer for exact determinations.

It was a fantastic experience because I gained experience I would never have in school.

In June, I did a four-week mandatory internship at the local company HRC in Žalec, Slovenia. I did my internship with my classmate Tilen Goršek.

HRC is a company that produces software for most Slovenian and a few Croatian banks and savings banks. The company produces practically everything that a bank needs for its operation, from a mobile app to an app for work at the front office of the bank. The product they make is called Hibis.

The biggest lesson I learned is that there are never any stupid questions, you will always get an answer to a question, you just have to ask if something is not clear to you.

Before starting work in the assigned position, I had to sign a non-disclosure agreement, which prevents the disclosure of customer and company data. I was introduced to the rules of work in the company and also how to act by the ISO 27001 standard (standard for information security).

As an intern, I was assigned to the Digital Channels department, more precisely in the department where they create an electronic bank. My task was to find mistakes that programmers make when creating an application. In the beginning, I looked for bugs and errors manually, but in the second week, automated testing with the Ranorex Studio software came into play. A lot of test cases are already written, but I also wrote one according to a pre-written specification.

I got an insight into how software development is done in a team and what DevOps looks like on a real project.

During my four weeks at HRC, I learned a lot about how banking systems work, which I didn't know much about before, and the importance of testing software before sending it to production. I also learned a lot about working in a company and information security. It was a fantastic experience because I gained experience I would never have in school.

The biggest lesson I learned is that there are never any stupid questions, you will always get an answer to a question, you just have to ask if something is not clear to you.

I will most likely return to HRC, as I see many opportunities for personal advancement in the company.

Until next time 👋.

We all know about cookies in our browsers, but browsers today have a special feature called the Web Storage API that allows us to temporarily or permanently store values.

What is the Web Storage API?

The Web Storage API is a browser functionality that can store data in key-value format. The purpose of this browser API is to make the site more intuitive than cookies.

A big advantage of the Web Storage API is that values are stored even if the user closes the browser.

But where is the data stored? Data stored using the Web Storage API is stored in an SQLite file in the user's local folder.

The data stored in localStorage and sessionStorage can be accessed anywhere in the application with the JavaScript code.

Difference between localStorage and sessionStorage

The Web Storage API has two data storage functions, localStorage and sessionStorage, the main difference between the two being that localStorage remains stored in the browser until it is deleted (it can also be permanent). However, SessionStorage is only stored until the user closes the browser. SessionStorage is a useful thing if you want to save some value in a browser instead of a cookie.

In this article, I will focus on localStorage, but almost all functions and features are the same as sessionStorage.

LocalStorage

LocalStorage, as I mentioned earlier, stores data in key-value format.

localStorage knows five main functions that can be used anywhere within the application.

These features are:

• setItem(), the function allows us to store values in localStorage,
• getItem(), allows us to retrieve a specific value from localStorage,
• removeItem(), the function allows us to remove key with value from localStroage,
• clear(), the function clears all localStorage,
• key().

setItem()

With this feature, we can store the value in our localStorage.

Using the feature is very simple. The function accepts two parameters, the first is the key and the second is the value of this key.

window.localStorage ("key", "value");

In localStorage we can store different data types such as string, int, bool, object…

The JSON.stringify function allows us to save a JSON object to localStorage.

const user = {
    id: 12345,
    name: "John Doe",
    email: "john.doe@example.com",
}

window.localStorage.setItem('user', JSON.stringify(user));

getItem()

With this function, we can get the value stored in localStorage. The function accepts one parameter, which is the value we want to get from memory.

window.localStorage.getItem ('user');

The function will return a string with the value:

"{" id ": 12345," name ":" John Doe "," email ":" john.doe@example.com "} '

Since such a string cannot be used in our application, it must be returned to the JSON object. This is done with the JSON.parse() function

JSON.parse(window.localStorage.getItem('user'));

removeItem()

The removeItem() function is used to remove only one element from localStorage.

The function accepts only one parameter and that is the name of the key we want to remove from localStorage. Removes the item if the key exists.

window.localStorage.removeItem ('user');

clear()

With the clear() function, we remove all elements in localStorage.

The function does not accept any parameters.

window.localStorage.clear();

Disadvantages of localStorage

Everything has its drawbacks and so does localStorage, one of the biggest is limiting the amount of data we can store to 5 MB.

Another drawback is that localStorage is synchronous, which means that items can be accessed gradually.

I hope I have introduced you to how we can store data in a browser in a different way.

Let's connect:

🔹Twitter

🔹Instagram

🔹GitHub

🔹PolyWork

Today, a database is almost necessary for every application, because it allows us to store different data.

Databases can be relational or non-relational, they can be accessed via the Internet and the Internet, or they can be local on a local device.

Today, I will walk between relational and non-relational databases.

Relational Databases (SQL)

Relational databases are the most used databases. Data in these databases are stored in tables and rows.

The relational database is like Excel worksheets.

Relational databases have better readable data than non-relational databases because they have very structured data.

For creating queries in those databases is used an existing language called SQL is.

Advantages of relational database:

• Great choice for structured data
• Great choice for demanding queries

The biggest drawback of a non-relational database is the inability to dynamically change the schema. After all, if we want to add a new attribute to a relational database, this will affect the entire database.

At the same time, compared to non-relational databases, they need more time to execute and search for data.

Some relational databases:

• MySQL,
• MariaDB,
• PostgreSQL
• Microsoft SQL-Server
• SQLite

Non-relational databases (NoSQL)

Non-relational databases contain unstructured, structured or structured data, usually in a key-value pair.

The big advantage of those databases is the option of being very flexible. This allows you to quickly add new attributes which do not impact the full database.

The advantage of such a database is that we can store a lot of data in one table.

The non-relational database is faster than the relational sub-database.

The disadvantage of such a database is that each has its own method of making queries for managing data in the database.

Some non-relational databases:

• MongoDB
• Redis
• Couchbase

Conclusion

I can figure out that relational databases are the best option in an application that had structured data and we want to have them portable and an option for use in different infrastructures. But, a lot of companies still use relational databases.

But non-relational databases get the most out when we start creating a project and want to have a lot of flexibility. Also, the non-relation database is great if we store a huge amount of data.

If you like reading what I write, you can donate me a cup of coffee or start following me on Twitter(@Patik123_).

I answered, “It's because you see the green lock in your browser,” off the top of my head. However, because I am the type of person who isn't pleased with such a response, I began my research. This is how the idea for this article came.

The SSL certificate allows us to have an encrypted connection on the HTTP protocol used to transfer the server's web pages to the browser.

With an SSL certificate, we prevent anyone from intercepting or accessing confidential data on the network as such (bank card numbers or passwords from web applications).

Because Google decided in 2018 to penalize all sites without an SSL certificate, indicating that the site is not secure is a must-have today.

What types of SSL do we know?

We know three types of certificates, but they have different levels of authentication.

Domain Certificate

The domain certificate is one of the most common certificates in the world. It is also the cheapest, you can also get it for free.

When issuing a certificate, only domain ownership is verified. The disadvantage of these certificates is that they do not protect subdomains, but only domains.

Business certificate

The business certificate has a medium level of trust, as it verifies domain ownership and the company that owns the domain when issuing the certificate. Business certificates are used by companies, non-profit organizations and governments, as they want to show that they are on the correct site of the company.

Extended SSL Certificates (EV SSL)

Extended SSL certificates offer the highest level of trust. The issuing process also to verification, domain and company, ensuring that the connection between the server and the browser is encrypted.

In the address bar, it shows the company name in addition to the lock and HTTPS tag.

We also know three types of certificates, which differ in how many domains we can use.

Wildcard SSL Certificates

Wildcard certificates are alternate certificates and are issued to only one domain and allow installation on different subdomains. For example, if a certificate is issued for [example.com] (http://example.com), you can also install it on [blog.example.com] (http://blog.example.com) and mail.example.com.

The advantage is that we can protect multiple subdomains with one certificate instead of buying each subdomain.

Multi-domain SSL certificates

Multi-domain certificates allow you to connect multiple domains under one SSL certificate. It is used when a company has several domains and wants to protect several domains with one certificate. Up to 100 domains can be protected by one SSL certificate.

Single domain SSL certificates

Single-domain certificates are intended and issued for only one domain. This means that they cannot be used for subdomains such as blog.example.com and mail.example.com if is a certificate issued for example.com.

Benefits of SSL Certificates

Data encryption

In the first place, the SSL certificate encrypts the connection between the user and the server, thus preventing any data from being read during the transfer.

If you have an online store, and you are transferring personal data, the security of your visitors must be paramount, so you must install the certificate.

This also gains the additional trust of your visitors.

Confirm identity

With an SSL certificate, you not only protect visitors but also prove that you own the site. This gains the trust of visitors.

Increases SEO of the site

It has been proven that using SSL certification increases the SEO of your website. With an SSL certificate, your site will be ranked higher among the hits in the browser.

Speed up our website

The SSL certificate allows the use of the HTTP/2 protocol, which reduces and speeds up our site as the protocol compresses the request heads.

What is the difference between a free and paid SSL certificate?

Some providers such as Let’s Encrypt offer free domain certificates. Why do half the other providers offer paid certificates if I can get a certificate for free?

The difference is that both certificates provide data encryption but, the difference is in the extra trust of the users.

If you have one blog in WordPress or another CMS then free SSL is enough, but if you accept payments or run an online store then it is wise to buy an SSL certificate.

Conclusion

I hope I have introduced you to what SSL certificates exist and how they help today.

Let's connect

🔹Twitter

🔹Instagram

🔹GitHub

🔹PolyWork

By the way, I love coffee.

CRUD is the acronym for Create, Read, Update, and Delete. Any program's basic operations are known as CRUD.

The CRUD application consists of three key components:

• Database
• User interface
• API or back-end system

The database is used to store data. A relational (SQL) or non-relational (NoSQL) database can be used. In most CRUD applications, relational databases are used. MySQL, MariaDB, PostgreSQL, and MS SQL are some of the most popular relational databases.

User Interface (UI) display data in a user-friendly format. With the user interface, the user makes API calls.

The API or back-end system communicates between the database and the user interface. It contains functions for performing CRUD operations.

CRUD operations

We know four different CRUD operations: create, read, update and delete. Each of these operations has its function in the SQL programming language.

API requests can use different HTTP methods.

We know different HTTP methods such as POST, GET, PETCH, PUT, DELETE. Each letter of the CRUD can be associated with a specific HTTP method.

These are usually:

The create operation allows us to create new rows in the database.

The read operation retrieves data from the database. It can return different data to us, depending on the filters created.

The update operation updates the existing data in the table. We can update only one line in or even more lines at a time.

The delete operation allows us to delete a row in the database.

Some CRUD application ideas

• To-Do list
• library system,
• account management system
• notebook
• contact manager

I hope you have got an idea of what CRUD is and how we use it daily.

You can start following me on Twitter, or you can buy me a cup of coffee☕ if you enjoy it.

In school, we have more than over 3,000 students who must keep track of a lot of apps every day. This can be really time-consuming and sometimes stressful because you can forget to check one site and you aren't updated with the latest school events.

This is the reason why I decided to help my schoolmates and other students at my school.

And they have come idea about ŠCC Mobile.

Students can find a lot of functions in the app but its key features are the user's timetable, a review of school notifications, a menu, the option to check grades, absences, written examination dates, and teacher's contact information. The app also includes useful tools such as a calendar and tasks to help in the organizing of school duties.

How is the application built?

I decided to create a progressive web application (PWA) because I wanted to cover as many devices as possible with the same codebase and remove the need for separate codebases for each platform.

So, I utilized the NuxtJS framework, which had a lot of excellent modules that have helped me and had to save me a lot of time.

I had to develop a back-end system that receives data from many sources since I required server processing for specific application tasks.

The PHP framework called Laravel is used to create the back-end system because it had a lot of functions that I need for my app.

Because I wanted to make the app available for all students at the school, I had to set up my server hosting both works. So, I set up my own VPS server with CentOS 7 operating system and CentOS Web Panel control panel, which saved me a lot of administrative work.

When creating the app, I had to write my API to process and process data from the school system.

Tech stack

To create the entire application, I used:

• Laravel,
• NuxtJS,
• Vuetify.

I use NuxtJS modules (Auth, Matomo, PWA, Moment)

I use various APIs and web scraping to get all the data:

• Untis,
• Microsoft Graph API,
• Web scarping school websites,
• Web scarping pages with menus.

Some screenshots of the application

First page

Timetable

Tasks

What did I learn?

Making this application taught me a lot about the VueJS framework and expanded my knowledge about the Laravel framework. At the same time, I was learning about server infrastructure setup and maintenance for the first time.

I also produced user instructions during the application's development, which considerably helped users in using the app.

For the first time, I was experimenting with the Microsoft Graph API, and I quickly understood how much it can do in Office 365.

Conclusion

I’m very proud of myself since I first made an app that benefits people. I have gained a lot of new experiences and I am looking forward to the next challenges that will come.

I am also proud of the fact that the app can be used by 3,000 students and I have made their organisation easier.

I will continue to maintain the application and add new features.

Unfortunately, you cannot test or use the app, because it is intended only for students and teachers of the Celje School Center.

You can start following me on Twitter, or you can buy me a cup of coffee☕ if you enjoy it.

Time is money.

Today, we want to make as much software as possible with the least amount of effort. Large online stores are developing their own smartphone applications.

But what are the advantages of a progressive app for a business?

Benefits of a mobile application for business

The great majority of us have a mobile device that we carry with us at all times. We check our e-mails, read the news, and shop online.

Many larger businesses have developed their own mobile app. Why?

Because the mobile application, among other things, gives consumers more options. It provides us with more opportunities to interact with potential consumers. It provides us with total creative control over our programs.

Above all, it provides us with unique chances to interact with our consumers.

A mobile application, on the other hand, is a significant investment for a company. Yes, this is correct, as an application must be developed for at least two separate platforms (Android and iOS).

This is where a progressive web application may help since it can drastically lower the cost of development.

Progressive web application

A progressive web application (PWA) is a hybrid of a web app and a native app.

A progressive application is made up of a variety of technologies, browser APIs, and multiple processes rather than just one.

Access to user filesystem, user locations, push notifications, and WebRTC are some of the elements that may be employed in a progressive application.

Differences between a progressive web application and a native application

Conclusion

When we have a small budget to work with and we don't have any demanding components in the program, a progressive application pays off to create.

However, we start constructing a native application when we require more sophisticated features with access to the user's device's native capabilities, and we need more complicated user apps if we want to have more security functions or start producing games.

Progressive apps, in my view, will become more common in the near future since they minimize the cost of developing a mobile app for a firm and because each browser adds new capabilities every day.

Let's connect

🔹Twitter

🔹Instagram

🔹GitHub

By the way, I love coffee.

What is CAPTCHA, and how does it work?

CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) is a challenge that prevents computers from submitting forms that are not planned for them.

CAPTCHA tests can only be solved by humans, in theory. CAPTCHAs are becoming more and more complex as computers become more powerful and capable of recognizing characters (unfortunately).

What are CAPTCHA's weaknesses?

• It's often impossible to figure out what's on the Captcha test
• Some CAPTCHAs aren't compatible with all browsers
• Tests make website visitors feel uncomfortable

2Captcha

2Captcha is an image and CAPTCHA recognition service. 2Captcha's main purpose is for workers to solve CAPTCHA fast and correctly. 2Captcha allows you to solve almost all CAPTCHAs currently in use.

2Captcha Advantages

• High level of accuracy
• CAPTCHA resolution speed—around 12 seconds
• Numerous APIs and SDKs for practically all programming languages
• Nearly 100% rescue assurance

How to use JavaScript to solve the CAPTCHA test?

Before we begin, we must first obtain the API key. It's available through the 2Captcha control panel. We create a user account if we haven't already done so before receiving the API key.

Now we'll make a basic communication form. The user must complete the CAPTCHA test generated by the backend before submitting the message.

This link will take you to the complete source code.

How our site works

We make a request to 2Captcha to save CAPTCHA built with our backend when we push the solution button.

We won't be using the CAPTCHA auto-solve button in real life, of course. The goal of this example is to demonstrate how 2Captcha solves CAPTCHA.

Our JavaScript code

import Captcha from '<https://cdn.skypack.dev/2captcha>';
const solver = new Captcha.Solver("<YOUR API KEY>");

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\\/(png|jpg);base64,/, "");
}

var refreshButton = document.getElementById("refresh-captcha");
var captchaImage = document.getElementById("image-captcha");
var solveButton = document.getElementById("solve");
var token = document.getElementById("token");

refreshButton.onclick = function(event) {
    event.preventDefault();
    captchaImage.src = 'captcha/image.php?' + Date.now();
}

solveButton.onclick = function(event) {
    event.preventDefault();
    solver.imageCaptcha(getBase64Image(captchaImage), "base64").then((res) => {
        console.log(res);
        token.value = res['data'];
    });
}

The code makes use of the JavaScript package 2Captcha, which handles all aspects of sending and receiving the 2Captcha API answers. The library's documentation may be found here.

CAPTCHA solving demonstration

Bonus 🤑

In one of my previous posts, I looked at easy ways for us to make money. We may now add another choice. This one is accomplished by saving CAPTCHA. Starting at $0.50 per hour, you can make (maybe more). Before you begin solving CAPTCHAs, you must first complete a 10-minute training session about how to solve a CAPTCHA. This is to avoid numerous CAPTCHA being lost.

Final Thoughts

2Captcha helps us to solve CAPTCHA for us automatically. If we don't want to mess around with the API, there is a free Chrome plug-in that will solve all CAPTCHA checks for us without any further setups. You can download the plug-in at the following link: 2Captcha Solver

Let’s connect

• Twitter
• GitHub
• PolyWork