In this post, we’ll take a look at some of the very useful developer tools available in Google Chrome. If you press F12 Chrome Dev Tools will open up. Here you will be able to see the source files of the webpage you are on, the console with erros, warnings and messages, memory usage, networking, …
In this post, we’ll take a look at the Konva.js. Konva is a pretty nice 2D javascript graphics library for the browser. I discovered it when I needed a 2D library for a project at work. It supports both Vue and React frameworks. The reason a library is useful compared to just drawing objects on a canvas is that it provides you with an easy way to draw, style, find, manipulate and attach events to objects.
In this post, we’ll learn how to implement reCAPTCHA on a website. Recaptcha is used to confirm that the user interaction on your site was made by a human and not by some script. For example, if you have a contact form on your website you would want to implement some human verification to prevent getting spammed by bots.
In this code snippet, we’ll learn how to upload files with Javascript. We will use the input HTML element and set its type to “file”. Then javascript can be used to retrieve the selected file from the input element and send it to the backend. You can use whatever you want for your backend: nodejs, PHP, Java or in this case I will use a C# Azure function.
In this code snippet, we’ll learn how to make graphs with Chart.js in Javascript. Chart.js is a very nice javascript library that allows you to visualize data by making different kinds of graphs/charts/plots. We’ll make a simple line graph in this example.
In this code snippet, we’ll learn how to perform downloads with Javascript. File downloads can be programmatically started with javascript by creating a temporary link element that points to your file. Then you add it to the DOM and call its click function to initiate the download. Finally, you can remove the link.
In this code snippet, we’ll look at web workers in Javascript. A web worker is a script that can run in the background separate from the main page javascript. This can be used to prevent blocking code. It could be considered like “multithreading” in javascript … kind of.
In this code snippet, we’ll learn how to make HTTP requests with fetch in Javascript. The first example will demonstrate how to fetch a get request with the minimum amount of code required. In the second one, we’ll make a function that can make any generic HTTP request, can send headers and checks for a seccesfull response before calling the provided calback function.
In this code snippet, we’ll learn how to access the browser local storage with Javascript. If you have the need to store the users data locally on their browser you can utilize session or local storage. Session storage will store data until the window is closed meanwhile local storage will keep the data even after the browser is closed. Other than that they are the same.
In this code snippet, we’ll learn how to add/get cookies with Javascript. Cookies allow a website to store information about a user in the browser. This way if the site refreshes or the user leaves and comes back later the data can be preserved. Cookies also get sent along with requests to the server. A server can give the browser a session cookie after the user logs in. This way every time the user sends something to the server it can just check for a valid session to make sure the user is authorized to perform a certain action.