Forem: Clément Gaudinière

JS Copy text to the user's clipboard

Clément Gaudinière — Wed, 13 Apr 2022 18:36:56 +0000

When programming a website, it often happens that you have to copy text in the user's clipboard. Whether it is to copy a piece of code, a token (like on GitHub), a URL, or simply a message. That's why in this article we will see how to copy a text in the user's clipboard, without any libraries, in vanilla javascript.

What method should I use ?

To do this, we can use the javascript function: execCommand(). But according to MDN web docs, this function will soon become obsolete and be removed from the web standards. That's why in this tutorial we will use another method: Clipboard.writeText().

The syntax of this function is quite simple:


 js
let variable = navigator.clipboard.writeText(‘your text’);

First, we will see how to copy the content of an input to the user's clipboard. Then we will see a more complicated example in which we will have several pieces of code that the user can copy.

A simple example

In this example, the user will be able to enter the text he wants in an input and copy the text it contains by clicking on a button provided for this purpose. The first step, as in any web project, is to set up our HTML. In our case, it is very simple: an input and a "copy" button.


 html
<input type="text" id="textInput" placeholder="Your text">
<button id="copy" content=""  onclick="copyText(event)" ></button>

Anticipating our future JavaScript, we call the copyText() function when the user clicks on the "copy" button.

Then, we just have to add our javascript, using the function mentioned before:


 js
// We select our input 
let input = document.getElementById("textInput");

// Copy the text of the input 
copyText = (e) => {
  // We check that the input is not empty 
  if (input.value.length) {
    // We copy the text it contains into the clipboard 
    navigator.clipboard.writeText(input.value).then(() => {
      // We confirm the action in the console 
      console.log("Text Copied !");
    })
  } else {
    console.log("The input is empty ");
  }
}

Adding a little CSS to make it look a little prettier, we get this:

(On some browsers the "copy" function can be deactivated in the codepen preview. To test the program you may have to open the program, by clicking on "Edit on CodePen")

An example a little more complicated

In this second, slightly more complicated example, we detect the user's click on the "copy" button and then we retrieve the id of the button (by removing the characters before the button number). Then we get the text of the corresponding code block. Then as in the following example we put the content of our variable text in the user's clipboard.

Going a little further

But that's not all, we can go a bit further because there are other methods for clipboard:

For example we can retrieve the content of the user's clipboard (with their permission), even if it's not text with the read() method
If we just want to retrieve the text, we use the readText() method.
In the same way we can copy an image with the write() method
Finally, the method we used in this tutorial: writeText()

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

You want to support me ?

Create a parallax effect when the mouse moves

Clément Gaudinière — Sat, 19 Feb 2022 10:35:13 +0000

Animated and interactive pages attract more and more attention from users. For this, we can use complex animations, or others simpler as parallaxes. There are two types of parallaxes: those that are activated when the page is scrolled, and others that are animated when the mouse is moved. Today we will see how to create a parallax effect when moving the mouse in javascript vanilla.

Setting up in HTML

The HTML structure will be relatively simple. We will use a main div, containing several spans, corresponding to animated balls when moving the mouse around a main title. Here is the HTML:



 html

<div class="parallax-wrap">

  <span value="-15"></span>

  <span value="5"></span>

  <span value="30"></span>

  <span value="-5"></span>

  <span value="15"></span>

  <h2>Parallax effect</h2>

</div>

Setting up the CSS

Concerning the CSS, nothing new, we will use only basic features of the language.
It is important to set overflow to hidden in the body, otherwise the animated balls will create a scroll of the page.
The span must be in position: absolute;, and have a border-radius of 100%, in order to create circular blocks.
Then we set each span one by one, by defining a color, a z-index, and its position. Here is the CSS (you can see the SCSS code in the codepen at the end) :



body {
  margin: 0;
  height: 100vh;
  background-color: #bd1060;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.parallax-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parallax-wrap h2 {
  position: relative;
  font-size: 100px;
  color: white;
  z-index: 2;
  text-align: center;
}
.parallax-wrap span {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 100%;
}
.parallax-wrap span:nth-child(1) {
  top: 70%;
  left: 70%;
  background: blue;
  z-index: 3;
}
.parallax-wrap span:nth-child(2) {
  top: 60%;
  left: 80%;
  background: yellow;
  z-index: 3;
}
.parallax-wrap span:nth-child(3) {
  top: 40%;
  left: 60%;
  background: green;
  z-index: 3;
}
.parallax-wrap span:nth-child(4) {
  top: 70%;
  left: 40%;
  background: red;
  z-index: 3;
}
.parallax-wrap span:nth-child(5) {
  top: 40%;
  left: 30%;
  background: purple;
  z-index: 3;
}

Setting up the JS

First of all we have to detect when the user moves his mouse, with line 1. Then we trigger a parallax function, which selects all the spans contained in our main container. Then we animate them as it should be. The Javascript code:



document.addEventListener("mousemove", parallax);
function parallax(event) {
  this.querySelectorAll(".parallax-wrap span").forEach((shift) => {
    const position = shift.getAttribute("value");
    const x = (window.innerWidth - event.pageX * position) / 90;
    const y = (window.innerHeight - event.pageY * position) / 90;

    shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
}

Final result

Here is the final result. You can of course modify the elements, to replace them, for example, by images. You can also modify the value in the HTML span, so that the parallax effect is amplified.

I hope you learned something about parallaxes, feel free to ask me any questions you may have. 👍

You want to support me ?

Quiz : What do these acronyms mean ? (HTML, PHP, SQL...)

Clément Gaudinière — Tue, 28 Dec 2021 13:36:29 +0000

Hello, today I propose you a quiz to test your knowledge on the acronyms of the web languages, some will seem easier than others of course, but do you really know all the acronyms of the web languages ?

For all questions, a list of answers is proposed, only one answer is correct. For each question, feel free to note your answer on a piece of paper in order to count your final score after the correction. You are ready, so let's go.

I - API means :

Abbreviation Program Internet
Application Programming Interface
Accessible Page Internet

II - HTML means :

HyperTheme Markup Language
HyperText Markup Language
HyperTheme Model Language

III - CSS means :

Cascading Style Software
Cascading Style Sheets
Cascading Structured Style

IV - DOM means :

Document Object Model
Document Object Markup
Document Optimization Markup

V - IDE means :

Integrated Development Experience
Integrated Document Explorer
Integrated Development Environment

VI - HTTP means :

HyperText Transfer Page
HyperText Transfer Protocol
HyperText Technology Power

VII - ARIA means :

Accessible Rich Internet Applications
Asynchronous Rich Internet Applications
Array Rich Internet Applications

VIII - AJAX means :

Asynchronous JavaScript And XML
Application JavaScript Asynchronous XML
Asynchronous JavaScript Application XML

IX - JS means :

Justify String
Java Sring
JavaScript

X - JSON means :

JavaScript Object Navigator
JavaScript Object Notation
JavaScript Object Network

XI - AMP means :

Applications Markup Pages
Attribute Markup Pages
Accelerated Mobile Pages

XII - REGEX means :

Regular Expression
Regrown Experience
Regenerative Expression

XIII - SQL means :

Switch Query Language
Simple Query Language
Structured Query Language

XIV - CDN means :

Classical Document Number
Classical Delivery Network
Content Delivery Network

XV - SEO means :

String Expression Object
Search Engine Optimization
Suffix Expression Object

XVI - PHP means :

Hypertext Page Preparator
Hypertext Preprocessor
Page Hypertext Preparator

XVII - UX means :

User Experience
Universal Explications
Universal Experience
User Explications

Correction

I hope you have written down your answers as it is time for the correction.

I -
API means Application Programming Interface (2). It allows applications to communicate with each other and exchange services or data.

II -
HTML means HyperText Markup Language (2). It is the code used to structure a web page and its content.

III -
CSS means Cascading Style Sheets (2). It is the language we use to style an HTML document.

IV -
DOM means Document Object Model (1). It is a programming interface standardized by the W3C, which allows scripts to examine and modify the content of the web browser.

V -
IDE means Integrated Development Environment (3). It is a software application that provides comprehensive facilities to computer programmers for software development.

VI -
HTTP means HyperText Transfer Protocol (2). It is a client-server communication protocol developed for the World Wide Web.

VII -
ARIA means Accessible Rich Internet Applications (1). ARIA complements HTML so that interactive elements and widgets can be used by assistive tools when standard functionality does not allow it.

VIII -
AJAX means Asynchronous JavaScript And XML (1). It is a method using different technologies added to web browsers between 1995 and 2005, and whose particularity is to allow to make requests to the web server and, consequently, to partially modify the web page displayed on the client computer without having to display a new complete page.

IX -
JS means JavaScript (3).It is a scripting language mainly used in interactive web pages and as such is an essential part of web applications.

X -
JSON means JavaScript Object Notation (2). It is a standard format used to represent structured data in a way similar to Javascript objects.

XI -
AMP means Accelerated Mobile Pages (3).It is an open source technology developed by the AMP Open Source Project and supported by Google. It allows as its name suggests to load mobile pages faster.

XII -
REGEX means Regular Expression (1). It is a character string, which describes, according to a precise syntax, a set of possible character strings. Regular expressions are also called regex (a word-value formed from the English regular expression).

XIII -
SQL means Structured Query Language (3). It is a standardized programming language used to operate relational databases.

XIV -
CDN means Content Delivery Network (3). It is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to end users.

XV -
SEO means Search Engine Optimization (2). It is the set of techniques that aim to improve the positioning of a page, a site or a web application in the results page of a search engine.

XVI -
PHP means Hypertext Preprocessor (2). It is a recursive acronyms. Php is a free programming language, mainly used to produce dynamic web pages via an HTTP server, but can also work as any locally interpreted language. PHP is an object-oriented imperative language.

XVII -
UX means User Experience (1). This refers to the quality of the user's experience in any interaction situation.

Source :

Feel free to share your score in the comments or suggest other web acronyms you think we should know. 👍

Understanding Web Cookies

Clément Gaudinière — Sun, 19 Dec 2021 12:30:42 +0000

Web cookies often have a negative connotation. In reality, they are indispensable tools for websites and sometimes save you time. In this article, we will look at how cookies work, the different types of cookies, what benefits they can bring to your website or the regulations concerning them... In a next article we will see how to implement them in our web page code.

Received ideas

Since the creation of cookies, many rumors have developed:

Cookies are like viruses, they infect users' hard drives.
Cookies are used to send spam.
Cookies are used only for advertising.

We will see in this article that all these rumors are false.

How it works ?

A web cookie is defined by the HTTP communication protocol as a small text sent by an HTTP server to an HTTP client, which the latter will send back the next time it connects to servers sharing the same domain name. It consists of a text containing an arbitrary sequence of key-value pairs. It is stored on the client's computer for a specific period of time.

For example, if you log in to a website and don't want to log in the next time, sometimes you can check the box "keep my session active" or "remember me". In this case, one or more cookies are created and stored on your computer to automatically log you in the next time you access that website. The cookies can be the following:

nickname : mypseudo
password : azerty

(In reality the password cookies are often encrypted, for security)

A bit of history

Now we can ask ourselves how long have cookies been around ?

The term cookie is a derivation of magic cookie. In programming, a magic cookie is a packet of data that a program receives and sends back unchanged. In 1994, Lou Montulli, an American computer scientist, had the idea of using cookies for client-server exchanges on the Web. At the time, he was an employee of Netscape Communications, a company developing Web browsers.

The first use of cookies was to determine whether visitors to the Netscape website had visited the site before.

After being implemented in the Netscape 0.9 beta Web browser in 1994, cookies were integrated into Internet Explorer 2, released in October 1995.

Cookies were accepted by default in browser settings, and users were not informed of their presence. The general public only learned of their existence after the Financial Times published an article on February 12, 1996. That same year, cookies received a lot of media attention because of possible privacy intrusions.

From the end of 2014, we see a banner about cookies on many sites. Depending on the country and continent, the regulations are not the same.

Why they have a bad reputation ?

So why do they have such a bad reputation ?

On the one hand, cookies are stored on the customer's computer and therefore take up storage space. Even if it is often tiny, the accumulation of cookies can end up weighing a real weight in the storage of the device.

On the other hand, as we have seen before, they can be an intrusion of privacy. Indeed, other types of cookies, called third-party cookies, can track users through the different sites they visit. For example, some advertising companies can track users across all pages where they have placed advertising images or a spy pixel. The knowledge of the pages visited by the user allows the advertising companies to target the user's advertising preferences.

The ability to build a user profile is considered by some to be an invasion of privacy, especially when tracking is done through different domains using third-party cookies. For this reason, some countries have cookie legislation.

To be in order

To be sure to comply with regulations, it is best to set up a cookie banner warning users. Ideally, the user can either accept all cookies or manage their preferences.

To save time when developing websites, many developers use cookie consent libraries. This way, their site follows the legislation, without requiring a large development effort.

For my part, I use this library, developed by myself 😆. It is very easy to use, and offers a clean and customizable banner for your website. To understand how it works, just read the github documentation. I will make an article detailing it later.

clement-gaudiniere / librairie-cookie-consent

This easy-to-use library allows you to ask your users for feedback on various parameters that can be set directly in the code. For more information, see the README file.

librairie-cookie-consent

Because the users' agreement counts.

This easy-to-use library allows you to ask your users for feedback on various parameters that can be set directly in the code. For more information, see the README documentation. IMPORTANT NOTE: for use with jQuery.

Demo

Exemple

If you want to see the result directly, download the latest release, and go to the Example folder. Then run the index.html file. You can see below the popup of the library, below, of course, the style is fully configurable in the CSS document

How to install it ?

You can download the entire library in three different ways:

via the library-cookie-consent release page.
via NPM : npm install librairie-cookie-consent
via Bower : Not yet available

How to use it ?

Before starting any manipulation with the library, the CSS file popupConsent.css, the file popupConsent.js or popupConsent.min.js, and the jQuery framework must be…

View on GitHub

I hope you learned something about cookies, feel free to ask me any questions you may have. 👍

You want to support me ?

Move from one page to another without loading

Clément Gaudinière — Wed, 27 Oct 2021 11:20:42 +0000

Hello everyone, today we meet in a new tutorial. We are going to see how to go from one page to another without loading the page. You have probably noticed it if you are attentive, on some websites, when you go from one page to another there is no loading. There are different techniques more or less heavy to do this, we can for example use the PHP Symfony framework but you have to organize your files in a precise architecture, it is therefore more complicated to implement when the website already exists. That's why today we use AJAX, and to make it faster, jQuery.
Important note : all files will be in PHP, make sure you can run them.

The basics

To begin with, I propose the following architecture for our files :

You don't have to follow it, but you will have to be careful and rigorous about the location of the files.
Our site will be called www.site.com in this example, you will have to replace this name with your domain name, the IP of your site or the location of your PHP file on your computer if you use a local web server. The index.php file will contain our home page, while the login.php page will contain a connection form. The src folder contains several other folders, the one we are interested in here is php, which contains the start and end of each web page. You will understand later why it is important to create these two files.

→ `index.php`

Our index page is quite simple, it contains a php title variable, the file early.php if we want it to be whole and not just ask for the content. The content of the index page is : a title and a paragraph. Finally, it contains the end file end.php if we want it to be whole and we don't just ask for the content. Otherwise we change the name of the page with a script. So our index page looks like this :

<?php
  $title = "Index page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>I'm the title</h1>

<p>Morbi tincidunt congue diam, at vestibulum elit tempor a. 
Donec id mi malesuada, auctor ligula in, aliquam metus. 
Vestibulum in faucibus massa. Nullam luctus et diam et posuere. 
Nulla massa metus, mattis et efficitur eu, vehicula in lectus. 
Sed a sapien quis tellus rhoncus efficitur. 
Integer sed ultrices nisl, vitae aliquam tellus.</p>


<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>

→ `login.php`

The login.php page, contains basically the same thing except that the title is not the same and the content is different :

<?php
  $title = "Login page title";
  if(!isset($_GET['section'])){
    include 'src/php/early.php';
  }
 ?>

<h1>Login</h1>

<form action="" method="post">
  <!-- Form to be completed later (optional) -->
</form>

<?php
  if(!isset($_GET['section'])){
    include 'src/php/end.php';
  } else {
    ?>
    <script type="text/javascript">
      document.title = "<?= $title ?>";
    </script>
    <?php
  }
?>

→ `early.php`

As you may have realised before, the early.php page is the start of our other two pages: index.php and login.php. This file should be started as a well presented HTML document. We need to include jQuery, you can include it via a CDN or directly host it on your server or computer. Finally, you can add a header. The file ends with the beginning of the div with the id main-content which will contain the content of our pages afterwards :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- A style file that can be created after  -->
    <link rel="stylesheet" href="src/style/css/style.css" />

    <!-- We include jQuery with the Google CDN  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
    <title><?= $title ?></title>
  </head>
  <body>
    <header>
      <div>
        <a href="index.php" class="crayons-btn crayons-btn-main">index</a>
        <a href="login.php" class="crayons-btn crayons-btn-scd">Login</a>
      </div>
    </header>
    <div id="main-content">

→ `end.php`

This file will contain the end of our pages, so it will be necessary to close some tags like the main div, or the body or the html tags. We will include the AJAX part :

    </div>
  </body>
  <script type="text/javascript">
  $("a").click(function(e){
    e.preventDefault();
    $.ajax({
       url : $(this).attr('href')+"?section=true",
       type : 'GET',
       dataType : 'html',
       success : function(code_html, statut){
          $('#main-content').html(code_html);
       }
    });
    window.history.pushState("","", $(this).attr('href'));
  });
  </script>
</html>

Let's unpack this AJAX code which can be complex if you don't know how AJAX requests work. First of all the first line of the script detects the event: "When someone clicks on a link". If this is the case, it launches the function. The second line tells the browser not to load the link if it is compatible with AJAX requests. Then we make our AJAX request by specifying the url and passing as a parameter section=true, so the page will not load completely. We then specify the type of request here GET. If successful, we update the content of the "main-content" div with the new content. Finally, we modify the url of the page.

Add some style

You can then create a file to add some style. This will be placed in the src then style then css file, and will be called style.css. For my part, my file looks like this :

#main-content{
    width: 1000px;
    max-width: 95%;
    display: block;
    margin: auto;
    font-family: cursive;
}

#main-content h1{
    text-align: center;
}

body{
    margin: 80px 0 0 0;
}

header{
    background: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
header div{
    width: 1000px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    margin: 13px auto;
}
.crayons-btn{
    margin: 0 5px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    outline: none;
    user-select: none;
    font-family: inherit;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
    border: 0px solid;
    overflow-wrap: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.crayons-btn-main{
    background-color: blue;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #f9fafa;
}
.crayons-btn-main:hover{
    background-color: #6b6bf1;
}
.crayons-btn-scd{
    background-color: #f1f1f1;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #363d44;
}
.crayons-btn-scd:hover{
    background-color: #dddddd;
}

The result

Below you can see the final result, when you click on one of the two buttons: index or login, the page only loads the main-content part, the rest does not move.

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

Why the 404 error ?

Clément Gaudinière — Wed, 20 Oct 2021 15:56:39 +0000

Hello everyone, today we're going to look at HTTP errors, you know like when you get a page not found with the 404 error. In reality there are almost a hundred different error codes. Don't worry, it's difficult to know them all by heart, but there are techniques to find out roughly where the error comes from. You are ready, so let's go !

Why did you invent these numbers ?

But then why did we invent these error numbers? The answer is actually quite simple, when a user requests a web page through his browser, the browser will send a request to the server under the world famous HTTP protocol. The server will also respond in HTTP format, and if all goes well will send the requested resource (in our case the web page). But everything gets complicated when there is an error. Knowing that there is an error is good, but knowing where is even better. This is why error numbers were quickly assigned to each different type of error. This is much more practical and saves time for many developers. For example, errors starting with 5 are problems at the server level.

The five categories of error

To simplify the whole thing, and to put some order in all these errors, categories have been created. There are three different categories:
1 - Informations
2 - Success
3 - Redirects
4 - Web client errors
5 - Server errors

So if an error number starts with 4, we know directly that the problem comes from the web client.

Why 404 error ?

But why 404 errors? If you have been following this, you will notice that the first number is a 4 and that the error comes directly from the web client and not from the server. Indeed, the 404 error means that the resource is not found, the server has searched for it on its side but has not found it, so the error comes from the web client which has not provided the right url.

Going further with error 418

The HTTP error 418 has nothing to do with the other errors. Indeed its meaning is "I'm a teapot". It is actually a joke since it first appeared in the famous RFC 2324 on April 1, 1998. The explanations given by the developers are: " There is coffee all over the world. Increasingly, in a world in which computing is ubiquitous, the computists want to make coffee. Coffee brewing is an art, but the distributed intelligence of the web- connected world transcends art. Thus, there is a strong, dark, rich requirement for a protocol designed expressly for the brewing of coffee. Coffee is brewed using coffee pots. Networked coffee pots require a control protocol if they are to be controlled".
In other words, the famous Hyper Text Coffee Pot Control Protocol, or HTCPCP, is intended to send an error back to all those who would like to control a coffee pot remotely, telling them that they have mistakenly addressed themselves to ... a teapot 😂.
This April 1st "joke" had its heyday at the time and is still featured on a number of official links in which its error code has been preserved.
There are still people asking questions about this 418 error, even today!

Specific errors

For those who wish to find a specific error, you can refer to these different tables classified by categories.
Some codes are not yet in use, but are intended for future use. Other codes do not result in any specific display to the user, but are implied (e.g. codes 200 or 304, which are never seen by the client as they concern the majority of successful requests).

All major HTTP errors are represented in these different tables, of the different error types:

Codes beginning with 1 (Informations):

Code	Message	Meaning
100	Continue	Waiting for the application to be processed.
101	Switching Protocols	Acceptance of the change of protocol.
102	Processing	Processing in progress (prevents the customer from exceeding the waiting time limit).
103	Early Hints	While waiting for the final response, the server returns links that the client can start downloading.

Codes beginning with 2 (Success):

Code	Message	Meaning
200	OK	Request successfully processed. The response will depend on the query method used.
201	Created	Request successfully processed and document created.
202	Accepted	Request processed, but no guarantee of result.
203	Non-Authoritative Information	Information returned, but generated by an uncertified source.
204	No Content	Request successfully processed but no information to return.
205	Reset Content	Request successfully processed, current page can be deleted.
206	Partial Content	Only part of the resource has been transmitted.
207	Multi-Status	Multiple answers.(WebDav)
208	Already Reported	The document was previously sent in this collection.(WebDav)
210	Content Different	The copy of the resource on the client side differs from that on the server (content or properties).(WebDav)
226	IM Used	The server has completed the request for the resource, and the response is a representation of the result of one or more instance manipulations applied to the current instance.

Codes beginning with 3 (Redirects):

Code	Message	Meaning
300	Multiple Choices	The requested URI refers to several resources.
301	Moved Permanently	Permanently moved document.
302	Found	Document moved temporarily.
303	See Other	The answer to this request lies elsewhere.
304	Not Modified	Document not modified since the last request.
305	Use Proxy (since HTTP/1.1)	The request must be re-addressed to the proxy.
306	Switch Proxy	Code used by an older version of RFC 26167, now reserved. It meant "The following requests must use the specified proxy ".
307	Temporary Redirect	The request must be temporarily redirected to the specified URI.
308	Permanent Redirect	The request must be permanently redirected to the specified URI.
310	Too many Redirects	The request has to be redirected too many times, or falls victim to a redirection loop.

Codes beginning with 4 (Web client errors):

Code	Message	Meaning
400	Bad Request	The syntax of the query is wrong.
401	Unauthorized	Authentication is required to access the resource.
402	Payment Required	Payment required to access the resource.
403	Forbidden	The server has understood the request, but refuses to execute it. Unlike the 401 error, authenticating will not make any difference. On servers where authentication is required, this usually means that authentication has been accepted but the access rights do not allow the client to access the resource.
404	Not Found	Resource not found.
405	Method Not Allowed	Unauthorised query method.
406	Not Acceptable	The requested resource is not available in a format that would respect the "Accept" headers of the request.
407	Proxy Authentication Required	Access to the resource allowed by identification with the proxy.
408	Request Time-out	The amount of time a request from the client has been waiting on the server side. According to the HTTP specification: "The client did not produce a request within the time the server was willing to wait. The client MAY repeat the request without modification at any later time ".
409	Conflict	The request cannot be processed at this time.
410	Gone	The resource is no longer available and no redirection address is known.
411	Length Required	The length of the request was not specified.
412	Precondition Failed	Preconditions sent by the request not checked.
413	Request Entity Too Large	Treatment abandoned due to too high a demand.
414	Request-URI Too Long	URI too long.
415	Unsupported Media Type	Unsupported query format for a given method and resource.
416	Requested range unsatisfiable	Incorrect "range" query header fields.
417	Expectation failed	Expected and defined behaviour in the header of the unsatisfactory request.
418	I’m a teapot	"I am a teapot": This code is defined in RFC 232410 dated 1 April 1998, Hyper Text Coffee Pot Control Protocol. It is a webmaster's joke, intended to send an error back to anyone who wants to remotely control a coffee pot, telling them that they have mistakenly addressed a teapot :)
421	Bad mapping / Misdirected Request	The request has been sent to a server that is not capable of producing a response (for example, because a connection has been reused).
422	Unprocessable entity	The entity provided with the request is incomprehensible or incomplete.(WebDAV)
423	Locked	The operation cannot take place because the resource is locked.(WebDAV)
424	Method failure	A method in the transaction has failed.(WebDAV)
425	Too Early	The server cannot process the request as it may be replayed.
426	Upgrade Required	The client should change the protocol, for example to TLS/1.0.
428	Precondition Required	The request must be conditional.
429	Too Many Requests	The customer has made too many requests within a given time frame.
431	Request Header Fields Too Large	The HTTP headers sent exceed the maximum size allowed by the server.
449	Retry With	Code defined by Microsoft. The request should be returned after performing an action.
450	Blocked by Windows Parental Controls	Code set by Microsoft. This error occurs when Windows Parental Controls are enabled and block access to the page.
451	Unavailable For Legal Reasons	This error code indicates that the requested resource is inaccessible for legal reasons.
456	Unrecoverable Error	Unrecoverable error.(WebDAV)

Codes beginning with 5 (Server errors):

Code	Message	Meaning
500	Internal Server Error	Internal server error.
501	Not Implemented	Claimed functionality not supported by the server.
502	Bad Gateway ou Proxy Error	By acting as a proxy or gateway server, the server received an invalid response from the remote server.
503	Service Unavailable	Service temporarily unavailable or under maintenance.
504	Gateway Time-out	Time taken to wait for a response from a server to an intermediate server.
505	HTTP Version not supported	HTTP version not supported by the server.
506	Variant Also Negotiates	Negotiation error.
507	Insufficient storage	Insufficient space to edit properties or build the collection.(WebDAV)
508	Loop detected	Loop in a resource linkage.(WebDAV)
509	Bandwidth Limit Exceeded	Used by many servers to indicate a quota overrun.
510	Not extended	The request does not respect the extended HTTP resource access policy.
511	Network authentication required	The client must authenticate to access the network. Used by captive portals to redirect clients to the authentication page.

I hope you have enjoyed this article. If you have any questions, feel free to ask me in the comments. 👍

Have fun with Windows message boxes

Clément Gaudinière — Sat, 02 Oct 2021 16:40:17 +0000

Hello everyone, today we are going to focus on our computers and more particularly on those under Windows. We will generate a Windows message box using the following programming language: Visual Basic. Don't worry, no prerequisites are necessary to follow this tutorial and all the steps will be explained. Through this article we will also see how to enrich and improve our message box, so that, for example, it can no longer be closed, that it remains in the foreground, etc. This way you can joke with your friends in a friendly manner, as there are several solutions to remove a dialogue box that cannot be closed. This type of dialog box can also be called fake virus, since it can worry the person at first, even if it does not affect the user's computer in any way. You can already see what the dialog box will look like at the end:

The basics

To begin with, you will need your computer running the Windows operating system. Once turned on, we will use the basic notepad software installed on almost all computers in the operating system. If you do not have a notepad, you can also use a code editor.

Once open we will write our first line of code :



msgbox "Your text here"

Once written, click on "File", then on "Save as", now give your file a name in the following form: name.vbs. Then click on "Save". It is important to specify the extension of the .vbs file, otherwise the file will be executed as a text file and no action will be performed. VBS means Visual Basic Script. Once saved, the file icon will normally look like this:

If you double click on this file you will see a windows dialogue box open, which you can close by clicking on "Ok" or on the cross.

A non-closable message box

Now we are going to add a few lines of code so that our box can no longer be closed simply with the cross, nor with "Ok". To do this, we will use the Visual Basic Do...Loop statement. The previously written code will be wrapped up in the do and loop instructions :



do
msgbox "Your text here"
loop

We re-save the file as a .vbs file, and when we execute the file, we will not be able to close it simply with the cross or with the "Ok" button, since the loop instruction allows to create an infinite loop.

You can also put several messages in your code :



do
msgbox "Your text here"
msgbox "Your other text here"
loop

So once both messages have been read, the code will go back to the beginning and read the first and second messages over and over again. To permanently close a message box, go to the Windows Task Manager. For example, you can right-click in the navigation bar and then click on Task Manager. Once this is done, click on "Microsoft Windows Based Script Host" and then on "End Task". If you can't find it, here's an overview of what to find :

You can also turn off your computer, and all messages will be gone the next time you turn it on.

Customise the message box

Before you become a Windows message box pro, you need to know the different ways to customise it. Indeed you can for example give a title to your message box, add a critical error icon, a questioning warning... We will also see how to make sure that our dialog box is always in the foreground. In the following non-functional piece of code, the variables x, y, z can have several values :



' Non-functional code
do
msgbox "Your text here",x+y+z,"Title"
loop

We will detail these values later, but first let's break down the msgbox. The first string in quotes represents the text inside the dialog box, the x allows you to define the buttons of the dialog box, the y enables you to put an icon, and the z permits you to make the message box always in the foreground. Finally, the last string represents the title of the popup.

Let's first look at the x, this is a number which can have different values and which allows the buttons to be defined. All the values of x and their effects are here, in the table below :

x	Effect
0	OK button
1	OK and Cancel buttons
2	Abort, Restart and Ignore buttons
3	Yes, No and Cancel buttons
4	Yes and No buttons
5	Restart and Cancel buttons

Then the values of y can be as follows :

y	Effect
16	Critical error icon
32	Interrogative warning icon
48	Simple warning icon
64	Message icon

Finally, the z values can be :

z	Effect
0	Normal dialogue box
4096	Dialog box always in the foreground

Let's put into practice what we have just learned, if we want to create a message box that is always in the foreground, with the title "Virus", the content "Trojan Horse", with the Ok and Cancel buttons and with a critical error icon, our code will look like this :



do

msgbox "Trojan Horse",1+16+4096,"Virus"

loop

To go further

To go further and make a joke to your friends, we will see how to customize the appearance of our vbs file, so that it looks like a web browser. For example the following icon refers to a vbs file which opens an infinite message box :

To do this, you need to save your vbs file anywhere unobtrusively. Then right click and click on "copy". Then go to the place where you want to create your shortcut and right click and "paste shortcut". Then right click on the item you have just created and click on "Properties" and then "Change Icon" in the "Shortcut" tab. Choose the icon you prefer then click on "Ok" then on "Apply". All that's left to do is rename it and you're done!

I hope you enjoyed this tutorial, if you liked the concept, I might do another article on fake viruses. If you have any questions, feel free to ask me in the comments. 👍

Create a QR code generator

Clément Gaudinière — Sun, 19 Sep 2021 16:43:34 +0000

Hello everyone, today we will see how to create a qr code generator with the open source library qrious.js. This library generates a qr code using different algorithms based on the principles discussed in the last article (module, alignment marker, timing patern, etc.), which I strongly invite you to read to better understand how qr codes work :

How does a QR code work ?

Clément Gaudinière ・ Aug 3 '21

#qrcodes #flashcodes #tech #programming

Let's go

The first thing to do is to get hold of the librairie. You can for example use a CDN (Content Delivery Network), or download it directly to your computer/server.

For those wishing to use a CDN, I recommend this link to include in your document :

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

For those who want to download the library, you can download it via NPM: $ npm install --save qrious or Bower: $ bower install --save qrious or via the latest releases page.

Once included in your document, we will create the HTML structure :

<div>
  <h1>Are you ready to create your own Qr code?</h1>
  <div class="container-divided">
    <textarea placeholder="Type something" id="qrCodeTextArea"></textarea>
    <canvas id="qr"></canvas>
  </div>
</div>

The qrious.js library generates qr codes via the html elements, without them you will not be able to generate your qr code. You can however give the id of your choice to the <canvas> element.

Adding style

Now I'm going to add some styling to my various elements, you can of course, if you wish, customise the CSS.

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@media (min-width: 545px) {
  html, body {
    height: 100%;
  }
}
body {
  background: url("https://i.ibb.co/f0sL4rx/t-l-chargement.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  margin: 0;
  position: relative;
  z-index: 1;
}
body h1 {
  color: white;
  font-family: "Lato", sans-serif;
  margin: 10px 25px;
  text-align: center;
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: space-around;
  justify-content: center;
}
div .container-divided {
  flex-direction: row;
  flex-wrap: wrap;
  width: 900px;
  max-width: 95%;
  height: fit-content;
  justify-content: space-around;
  margin: 50px 0;
}
div .container-divided textarea {
  margin: 0 0 50px 0;
  background: #eaeaea;
  color: black;
  display: block;
  padding: 14px 10px;
  outline: none;
  border-radius: 4px;
  width: 300px;
  max-width: 95%;
  height: 250px;
  text-align: left;
  resize: vertical;
  text-indent: 10px;
  border: none;
  font-size: 15px;
}
div .container-divided textarea::-moz-selection {
  color: inherit;
  background-color: rgba(118, 199, 239, 0.54);
}
div .container-divided textarea::selection {
  color: inherit;
  background-color: rgba(118, 199, 239, 0.54);
}

input {
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-bottom: 4rem;
  border: none;
  border-bottom: 2px solid #fff;
  padding: 0.5rem;
  background-color: transparent;
  color: #fff;
  outline: none;
}
input::placeholder {
  color: #fff;
}
input::-moz-placeholder {
  color: #fff;
}
input:-ms-input-placeholder {
  color: #fff;
}

canvas {
  width: 200px;
  height: 200px;
}

Setting up the librarie

To set up this library, you can use the documentation located on github, or use this table which allows you to understand the different parameters that can be set within this library.

The resulting JS code looks like this :

// Our textarea
const input = document.querySelector("#qrCodeTextArea");
// Our canvas element with 'qr' id
const canvas = document.getElementById("qr");

// The various parameters
const createQR = v => {
  return new QRious({
    element: canvas,
    value: v,
    level: "L",
    size: 400,
    backgroundAlpha: 0,
    foreground: "white" });

};

// We create the qr code
const qr = createQR(input.value);

// If the text box changes, update the qr code.
input.addEventListener("input", () => {
  const qr = createQR(input.value);
});

After a few minutes of code, you can see the result below :

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

Create a skeleton loading

Clément Gaudinière — Sat, 04 Sep 2021 16:31:22 +0000

Hello everyone, today we are going to take a look at a rather special method of loading content, in fact we are going to talk about skeleton loading, a method of loading pages that is quite widespread and quite original to make users wait while your page is loading. You are ready, so let's go !

What is it ?

But what does a page using skeleton loading look like? In fact, you see them on every platform: Twitter, YouTube, Netflix... Below you can see glimpses of skeleton loading on various websites mentioned above.

As you can see, skeleton loading is used by high profile sites for a reason: it allows the user to directly understand where and how the information will be organised after loading.

Let's code

Now we're going to start making a page that uses skeleton loading to present videos. Please note that if you want to use skeletons loading on your website, you will need to use an AJAX add-on to fully load the videos. In our case, we will implement the skeleton loading system, without loading real videos.

First we will write our HTML structure :



<!-- This div is used as a container -->
<div class="wrapper shine">
  <!-- Title -->
  <h2>Coming soon</h2>
  <!-- Container of card (videos that load) -->
  <div class="container">  
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <h2>Best sellers</h2>
  <div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <h2>Recommended</h2>
  <div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Then we add some style :



/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

/* Style */
body {
  background: #dedede;
}

.wrapper {
  width: 900px;
  max-width: 95%;
  margin: 55px auto;
}
.wrapper h2 {
  color: white;
  letter-spacing: 1px;
  margin: 10px 0 5px 10px;
  font-family: "Roboto", sans-serif;
}
.wrapper .container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.wrapper .container .card {
  margin: 10px;
  width: 160px;
  height: 90px;
  border-radius: 3px;
  background-image: linear-gradient(90deg, #e2e2e2 0px, #efefef 30px, #e2e2e2 60px);
  background-size: calc(160px + 160px);
  animation: refresh 1.2s infinite ease-out;
}

/* Animation */
@keyframes refresh {
  0% {
    background-position: calc(-160px);
  }
  60%, 100% {
    background-position: 160px;
  }
}

You can see the final result below :

If you want to load the video thumbnails, you will have to use AJAX. To do this, it is highly recommended to use jQuery which simplifies the requests and makes them more reliable. An example code in AJAX :


 html
<script>
  $(document).ready(function() { 
   $(".card").load("https://www.site.com/videoCharging.php");
  });
</script>

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

How does a QR code work ?

Clément Gaudinière — Tue, 03 Aug 2021 15:45:11 +0000

Hello everyone, as you have seen in the title, today we are going to go back to the origins of the QR code. Nowadays, QR codes are used all the time, they allow you to link something physical to something digital. For example, you can simply scan a QR code to access a link, rather than copying the whole link.
That's why it's important to understand how they work, and why not in a future article how to create one !

How long has it been around ?

Firstly, since when have qr codes existed ? They have been around longer than you might think, in fact they were invented in 1994 by the company Denso-Wave. They were used to track the transport of spare parts in Toyota factories. Denso Wave made the qr code free in 1999, but it was not really used until the rise of smartphones, about ten years later.

Principle

Now we will discuss the principle of qr code. To do this, we will use this qr code, which refers to the dev.to link :

To begin with, a qr code is made up of large white and black squares in three of its corners. These squares are called modules. Some of these modules must not be covered or modified, otherwise the code cannot be scanned. These are the position markers. They tell the scanner where the edges of the QR Code are. The modules are shown here with a red overlay :

Now we're going to take a slightly longer link and generate a qr code, so I've chosen to generate the qr code from youtube.com :

One can notice inside this new qr code an alignment marker, in red in the image below :

It acts as a reference point for the scanner, ensuring that everything lines up correctly. On larger codes there are several reference points.

In this qr code, from the systemid.com website :

Red stripes can be observed which are called timing patterns. They define the positioning of the rows and columns. In addition, the green sections indicate to the reader the format of the QR Code, whether it is a website, a text or other. Finally, the blue modules represent the version number, i.e. the more modules there are, the higher the version.Until v40 which represents 177 * 177 modules. Once all these modules are deconstructed we are left with the grey part :

The remaining modules are grouped in 8 groups, thus forming a byte. (A byte was composed of 8 bits).

Error correction

QR codes are practical, they are so fast that it sometimes takes less than a second to flash one, their secret ? They don't need to be scanned in full to be read. So if part of the code is damaged it doesn't matter, and the QR code can be read. But how does it do that ? The qr code has a self-correcting error system based on the Reed-Solomon code which is a so-called perfect code invented by mathematicians Irving S. Reed and Gustave Solomon. The fact that part of the code can be covered without preventing its correct reading allows us to make the Qr code more attractive by integrating graphic elements :

If you want to create your own qr code, I recommend the Unitag.io website, which allows you to manage many customization effects.

In a next tutorial, we will see how to create a QR code generator in javascript. I hope this tutorial has helped you understand the different processes behind QR codes, if you have any questions, feel free to ask me in the comments. 👍

Custom cursor on a webpage in pure CSS

Clément Gaudinière — Thu, 29 Jul 2021 07:38:58 +0000

Hello everyone, today we are going to look at the cursor property available in CSS. And why not use a custom cursor ?

Pre-integrated cursors

The CSS allows us to choose a cursor from over thirty pre-built cursors. Some browsers automatically switch to certain cursors, for example when the cursor passes over a link, the browser instinctively understands that it is a clickable element and switches the mouse cursor to the cursor: pointer; property.

To summarise, here is a table of almost all the sliders currently available in CSS :

CSS value	Description
auto	The UA will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
default	The platform-dependent default cursor. Typically an arrow.
none	No cursor is rendered.
context-menu	A context menu is available.
pointer	Help information is available.
none	The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
progress	The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`).
cell	The table cell or set of cells can be selected.
crosshair	Cross cursor, often used to indicate selection in a bitmap.
text	The text can be selected. Typically the shape of an I-beam.
vertical-text	The vertical text can be selected. Typically the shape of a sideways I-beam.
alias	An alias or shortcut is to be created.
copy	Something is to be copied.
move	Something is to be moved.
no-drop	An item may not be dropped at the current location. On Windows and Mac OS X, no-drop is the same as not-allowed.
not-allowed	The requested action will not be carried out.
grab	Something can be grabbed (dragged to be moved).
grabbing	Something is being grabbed (dragged to be moved).
all-scroll	Something can be scrolled in any direction (panned). On Windows, all-scroll is the same as move.
col-resize	The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resize	The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
zoom-in	Something can be zoomed (magnified) in.
zoom-out	Something can be zoomed (magnified) out.

For more information, you can also consult the documentation on the CSS cursor property on the MDN Web Docs site.

You can see a demo of some of the cursors below :

Custom cursor

Fortunately we are not limited to pre-built cursors, we can use custom cursors in pure CSS.
To add a custom cursor, it's quite simple, we use url: cursor: url(one.svg);. But we are not limited to urls, we can also put an svg as in the code below, where we ask the browser to replace our mouse cursor with the svg :

html{
  cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 512 512' style='enable-background:new 0 0 512.011 512.011;' xml:space='preserve'%3E %3Cpath fill='DeepSkyBlue' d='M434.215,344.467L92.881,3.134c-4.16-4.171-10.914-4.179-15.085-0.019  c-2.011,2.006-3.139,4.731-3.134,7.571v490.667c0.003,4.382,2.685,8.316,6.763,9.92c4.081,1.603,8.727,0.545,11.712-2.667  l135.509-145.92h198.016c5.891,0.011,10.675-4.757,10.686-10.648C437.353,349.198,436.226,346.473,434.215,344.467z'/%3E %3C/svg%3E"), pointer;
}

You can see the result of our code below :

I hope this tutorial has allowed you to add your own custom sliders to your website, or at least to have discovered how to use them, if you have any questions, feel free to ask me in the comments. 👍

Add shiels on github

Clément Gaudinière — Thu, 01 Jul 2021 08:53:50 +0000

Hello everyone, today we are going to discuss another way to customize your README.md file from a github repository. Indeed, we will see how to add shields. Shields are SVG badges that automatically update themselves according to the interactions related to your repository. For example, if a new release appears, the "release" badge will automatically update to show the latest release.
So I propose to discover together how to handle shields, and why not use them later for your next projects.

Let's start

To begin, go to your GitHub repository, if you have not already created a README.md file you will have to create it since it is on this file that we will work.

Then go to the editing area of your README file, to start, we will create a centered paragraph, with some links and some images that will be our badges later on :

<p align="center">
  <a href=""><img alt="" src="" /></a>
  <a href=""><img alt="" src="" /></a>
  <a href=""><img alt="" src="" /></a>
</p>

We want to add a badge that will display the latest version of our release, so our first <a> tag will look like this in our README file (of course replacing the text in square brackets with your username and repository) :

<p align="center">
  <a href="https://github.com/[user]/[repository]/releases/"><img alt="" src="" /></a>
  <a href=""><img alt="" src="" /></a>
  <a href=""><img alt="" src="" /></a>
</p>

Now it's time to get serious: we're finally going to add our badge !
Go to Shields.io, and click on : "GitHub release (latest by date)" as shown in the following illustration:

You now arrive at this window, where you fill in various information such as your username, and the name of your repository. For the style, I advise you to use the for-the-badge, even if it is quite subjective. In the input "override label" you can specify the label of the badge, whereas in the "override color" you can specify a colour.

If you want to add a logo, it is quite possible and this is what we will see now. Open a new tab and go to Simple Icons.org to search for a logo you like. In my case, I will choose the DocuSign logo :

Go back to the shields.io tab, and the previously opened window. In the input named logo, enter the name of your logo, in my case : DocuSign.
You can also give your logo a colour in the input named "override logo color" :

Once this is done, you can click on : "Copy badge url", which will generate a url with the different parameters you have just entered.

Now let's go back to our README.md file, and the code we wrote earlier. In the first link of our paragraph, which is the release page, we will change the source of the image within it. As you may have guessed, we will paste the url previously copied thanks to the "Copy badge url" button.

<p align="center">
  <a href="https://github.com/[user]/[repository]/releases/">
    <img alt="Releases" src="https://img.shields.io/github/v/release/[user]/[repository]?label=release&logo=DocuSign&logoColor=%23fff&style=for-the-badge" />
  </a>
  <a href=""><img alt="" src="" /></a>
  <a href=""><img alt="" src="" /></a>
</p>

Save your README.md file and you will see the release badge appear. If you create a new release, the badge will automatically update. You can also try with other badges such as the number of "forks", "stars", "watchers"...

For my part, my badge looks like this :

I hope this tutorial has allowed you to add your own shields on GitHub, or at least to have discovered how to use them, if you have any questions, don't hesitate to ask me in the comments, or even to share a repository in which you have added badges. 👍

Forem: Clément Gaudinière

JS Copy text to the user's clipboard

What method should I use ?

A simple example

An example a little more complicated

Going a little further

Create a parallax effect when the mouse moves

Setting up in HTML

Setting up the CSS

Setting up the JS

Final result

Quiz : What do these acronyms mean ? (HTML, PHP, SQL...)

Correction

Understanding Web Cookies

Received ideas

How it works ?

A bit of history

Why they have a bad reputation ?

To be in order

clement-gaudiniere / librairie-cookie-consent

This easy-to-use library allows you to ask your users for feedback on various parameters that can be set directly in the code. For more information, see the README file.

librairie-cookie-consent

How to install it ?

How to use it ?

Move from one page to another without loading

The basics

→ index.php

→ login.php

→ early.php

→ end.php

Add some style

The result

Why the 404 error ?

Why did you invent these numbers ?

The five categories of error

Why 404 error ?

Going further with error 418

Specific errors

Have fun with Windows message boxes

The basics

A non-closable message box

Customise the message box

To go further

Create a QR code generator

How does a QR code work ?

Clément Gaudinière ・ Aug 3 '21

Let's go

Adding style

Setting up the librarie

Create a skeleton loading

What is it ?

Let's code

How does a QR code work ?

How long has it been around ?

Principle

Error correction

Custom cursor on a webpage in pure CSS

Pre-integrated cursors

Custom cursor

Add shiels on github

Let's start

→ `index.php`

→ `login.php`

→ `early.php`

→ `end.php`