DEV Community: Patrick

What is an open graph? You must know this feature in web development.

Patrick — Mon, 23 Oct 2023 18:12:05 +0000

Open Graph is an Internet protocol created by Facebook to standardize the display of metadata on social networks.

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.

What is Web OTP, and which benefits do it provide to users?

Patrick — Sun, 01 Oct 2023 17:03:40 +0000

More and more online services are introducing new ways to confirm login to their services. Logging in with an OTP confirmation token is becoming a very common practice. But such authorization methods have their disadvantages such as bad UX and what if the user does not have a phone with him, what is the other authentication confirmation method?

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

@www.example.com #123456

The most common mistakes in OTP messages:

Incorrect message format	Error description
Your PIN: #123456	The code must be on its line with the specified domain.
Your registration code: @www.example.com #123456	Domain and OTP must be on their line.
@https://example.com #123456	The URL scheme must not be included.
@example.com/otp.html #123456	The URL must not include a path
@example.com #123456 Your code for login: 123456.	The domain and OTP must be the last line of the message.
Your login code is 123456. @www.example.com#123456	There must be one space between the domain and the OTP.
Hi, I'll be home by lunch today 😊	Missing @ and #.
Your login code is 123456. www.example.com #123456	@ is missing before the domain.

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:

Open-source software: what makes it so attractive?

Patrick — Thu, 27 Apr 2023 11:04:29 +0000

You may already be familiar with the term "open source" 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.

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

How I set up my home server

Patrick — Fri, 02 Dec 2022 18:04:37 +0000

You may wonder why you want to set up your server at home. In today's world, this has many advantages.

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 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 and 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 easy 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 useful 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 👋.

How to make a website compliant with Europe law?

Patrick — Fri, 07 Oct 2022 18:39:26 +0000

Europe is a country that puts citizens and their privacy first.

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 the use and collection, transmission and use of personal data.

The GDPR requires every developer of web applications/sites to draw up a privacy policy in which data 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 does not only apply 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:

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.

Web Storage API - Explain Like I'm Five

Patrick — Mon, 13 Jun 2022 19:26:52 +0000

Web browsers today have a huge range of features, and more and more will get them.

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

SQL vs. NoSQL

Patrick — Fri, 13 May 2022 10:12:48 +0000

In my previous article about what CRUD is, I also discussed that a part of any application is a database.

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:

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:

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_).

Why is an SSL certificate important?🔐

Patrick — Tue, 05 Apr 2022 09:27:59 +0000

A few days ago, I got a question from a colleague about why we need to have an SSL certified website nowadays.

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, you can also install it on 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.

What is CRUD?

Patrick — Fri, 25 Mar 2022 12:25:20 +0000

We interact with the CRUD application daily as part of our work. Maybe you record a task in your phone's calendar or take notes.

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.

CREATE	INSERT
READ	SELECT
UPDATE	UPDATE
DELETE	DELETE

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:

CREATE	POST
READ	GET
UPDATE	PUT
DELETE	DELETE

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.

Is a progressive web application the future?

Patrick — Mon, 21 Feb 2022 20:06:17 +0000

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

	Progressive Web Application	Native application
Programming languages	Used HTML, JavaScript, CSS	Objective-C, Swift for iOS and Java, Kotlin for Android
Cost of development	Low (need only a web developer, updates reach users faster)	High (different programming languages require different developers)
Distribution	Via the website (user only needs URL and browser)	Various app stores (App Store, Huawei App Gallery, Google Play)
Discoverability	SEO (application can be found by searching in a search engine - the application is indexed)	ASO (application can only be detected within the application market)
Security	Uses HTTPS	It has more security options than PWA.
Performance	The progressive application depends on the browser	Native applications are faster than web applications
Functions	The progressive application cannot use all the features of the phone	Native app has access to all phone features and deeper access.

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.

How to bypass CAPTCHA?

Patrick — Mon, 07 Feb 2022 12:01:17 +0000

Nowadays, almost every time we send a form, we are forced to solve a minor challenge. For many, this is a very annoying task. Well, here is the solution for those of us who hate saving CAPTCHA.

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

Find A reason why to write a blog📚

Patrick — Fri, 21 Jan 2022 18:37:34 +0000

Many people have asked me why I started writing a blog when I first began doing so. For me, the motivation was that I enjoy sharing my knowledge with people and want to demonstrate what I know and can accomplish in some way.

Why?

If you want to change the world, pick up your pen and write. - Martin Luther

Many computer science students struggle to explain themselves, and by that, I don't mean in a professional manner, but rather in a way that the general reader can understand what they're trying to say.

I'm aware that this is a challenging assignment. However, we can enhance this by writing articles.

Blogging has the added benefit of allowing us to learn a language by writing in it. It increases our visibility in the computer world (many people say that when he started writing a blog, he got more job offers than before writing).

It enables us to track our progress. In a sense, we're demonstrating what we know and can do, since if we want to write a good post, we need to know what we're talking about.

How?

You just take a pen and paper (or a computer and Word; I prefer Notion) and begin writing (typing) about the subject we wish to share.

Well, sessions aren't so simple because you're instantly troubled by ideas of what others will think about it, and this article, in my opinion, isn't worth addressing...

The first lesson I learned about writing is that we should write for ourselves, not for others. There would be fewer overall bloggers than there are today if everyone dealt with these difficulties.

Where?

When it comes to launching a blog, you have two options: utilize a specialized writing platform or get your own domain and web hosting and start from scratch.

Both solutions have advantages and disadvantages.

Using a platform

We are familiar with a number of platforms on which we can publish our blog posts. Medium, DevTo, and Hashnode are a few of them...

All of these platforms allow other people who are interested in the topic to see our articles.

Because all platforms are quite popular, your posts have a good chance of being discovered by a large number of people.

Most platforms are SEO-friendly, helping search engines such as Google and Bing to rank that content higher. However, the platform's most important features are generally free of charge.

I would recommend Hashnode as a fantastic platform for creating articles because it is quite adaptable. It's definitely worth a look. We can use our own domain with a free SSL certificate provided by this platform, and we can basically set up a totally personal blog.

Setup own blog

However, if we choose the first choice, we will have a lot more work to do. We must first purchase a domain (Hashnode and Medium provide a free subdomain), and then we must pay for site hosting. After we've completed this, we'll need to pick which CMS we'll utilize (WordPress, Jommla ...) or create our own platform for writing.

Now that we've got a basic blog up and running, it's time to start attracting readers. In my experience, it gets stuck here since fresh blogs are hard to come by.

The benefit of creating our own blog from the scratch is that we are not limited by settings and also can customize it to our taste.

Advantages of blog writing

Many people have negative attitudes toward writing and reading. Each day, though, we write and read. Do you ever write down a task on a piece of paper? Do you create your shopping list by hand? However, we read at every turn. As a result, I don't see why you shouldn't start a blog.

We could not only help people by writing a blog, but we can also demonstrate our skills to potential employers.

Since starting the blog, I've received several invitations to participate and contribute to various platforms.

Since starting my blog, I've begun utilizing a lot more social media platforms. At the same time, I recognized that, if we knew how to utilize social media correctly, we can harness immense potential.

Individuals who have read my writings continue to inspire me to write all of their postings.

Several companies nowadays value good product documentation. With a blog, we may demonstrate that we can write on a specific topic.

At the same time, writing a blog can make money in a very simple way. Some additional ideas in the article How to make money as a blogger the easy way.

Conclusion

All it takes is the desire to create a blog for every one of us. This may most likely appear to be a pointless task at first, but with time and dedication, it will become simpler and, most likely, profitable.

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

DEV Community: Patrick

What is an open graph? You must know this feature in web development.

What advantages does it bring?

Basics of Open Graph?

How to add an Open Graph to a website?

Conclusion

What is Web OTP, and which benefits do it provide to users?

How WebOTP works

SMS message format

User-Side Code Example (JavaScript)

Browser support

Advantages of using WebOTP

Open-source software: what makes it so attractive?

Introduction

Better security

Freedom

Community support

Transparency

A free alternative

How I set up my home server

Nextcloud

How do I set up my server?

Cloudflare Tunnels

How to make a website compliant with Europe law?

Protection of personal data

Cookies

Google Analytics yes, or no?

Web Storage API - Explain Like I'm Five

What is the Web Storage API?

Difference between localStorage and sessionStorage

LocalStorage

Disadvantages of localStorage

SQL vs. NoSQL

Relational Databases (SQL)

Non-relational databases (NoSQL)

Conclusion

Why is an SSL certificate important?🔐

What types of SSL do we know?

Domain Certificate

Business certificate

Extended SSL Certificates (EV SSL)

Wildcard SSL Certificates

Multi-domain SSL certificates

Single domain SSL certificates

Benefits of SSL Certificates

Data encryption

Confirm identity

Increases SEO of the site

Speed up our website

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

Conclusion

What is CRUD?

CRUD operations

Is a progressive web application the future?

Benefits of a mobile application for business

Progressive web application

Differences between a progressive web application and a native application

Conclusion

How to bypass CAPTCHA?

What is CAPTCHA, and how does it work?

2Captcha

2Captcha Advantages

How to use JavaScript to solve the CAPTCHA test?

Bonus 🤑

Final Thoughts

Find A reason why to write a blog📚

Why?

How?

Where?

Advantages of blog writing

Conclusion

Difference between `localStorage` and `sessionStorage`

`LocalStorage`

Disadvantages of `localStorage`