JavaScript: store and read files with the Origin Private File System
In this post you will learn how to use the Origin Private File System with JavaScript to store, read and remove any file on the web browser.
File System in the web browser with JavaScript and OPFS
You may try the demo here: https://stackblitz.com/edit/vitejs-vite-hl34zf?file=index.html
As I said before, the Origin Private File System has arrived to revolutionize things with JavaScript. Thanks to OPFS we can have a complete file system with JavaScript directly in the web browser.
With this new technology, we can write any type of file in the web browser, as well as download it later. All of this without depending on localStorage or similar things; It is a different technology.
Text documents, images, videos and even databases can be saved, and there is no need to ask the user for permission or confirmation, everything is transparent.
JavaScript: download file with fetch
In this post you will learn how to download a file in the background using client-side JavaScript and the fetch function to make HTTP requests.
We will see how to download a file as a blob using AJAX and then ask the user where to save it, suggesting a name.
The good thing about this is that we can send parameters to request the download of the file (for example, we can send a password over a POST request if the server requires it).
SQLite3 with vanilla JavaScript and OPFS – Hello world
In this post I will show you how to use SQLite3 directly in the web browser using the original C library through WebAssembly and OPFS to store the database. In this way we will have original SQLite3 on the web to work in the browser with JS on the client side.
We can do this with pure JavaScript or with any framework; but I will show you a basic and well explained example of SQLite3 with vanilla JavaScript. Then I’ll show you an example with Tailwind, Svelte and Progressive Web apps.
Passing parameters to Svelte function
In Svelte we can define functions that are going to be called when an event is triggered. For example, to call holaMundo on the click of an element we can indicate it as on:click={holaMundo}
Sometimes it is necessary to pass parameters to that function inside a Svelte component, but we cannot indicate it like this:
on:click={holaMundo(parameter)}
Since that will execute the function as soon as the component is loaded, and won’t wait for the click.
In this post I will show you how to pass arguments to functions in Svelte without calling them automatically.
Silent PDF Print with JavaScript and plugin
Today I am going to present you a plugin that I have just created. It is a plugin to print a PDF file silently, that is, without asking the user for confirmation.
This plugin exposes a REST API so that a PDF can be printed without confirmation using JavaScript. Just make an HTTP GET request to the plugin path sending the name of the PDF and the name of the printer.
The best thing about this is that you can use the virtual printers that Windows offers, in this way you can do your tests in an ecological way.
Throughout this post I will show you the documentation of the plugin and all the details of it, including how you can get it.
Tetris game in JavaScript – Open source
In this post I will show you the Tetris game programmed in pure JavaScript, totally free and open source.
This block game is programmed with JavaScript and uses canvas to paint the game. I also use Bootstrap for the layout of the buttons and the page in general, with a bit of SweetAlert for the alerts.
Although it seems simple to do, it is one of the jobs that has cost me the most and of which I am most proud. It was complex (for me) to understand all the logic for collisions, rotations, row deletion, part movement, limits, etc.
Among the features of the game we find:
- Sounds: background music, sound when the piece cannot be rotated, when a complete row is made and when the tetromino touches the ground
- Colors: each piece has a random color chosen at runtime
- Rotations: pieces can be rotated to accommodate them and accumulate points
- Mobile compatible: because it is web, I have added some buttons to be able to play it on mobile phones and tablets, but it can also be played with the keyboard
- Open source: you can modify the game, the board, the length, speed, pieces, rotations, etc.
- Tetris port: behaves like any normal tetris game
- Game pause: the game can be paused or resumed at any time
Let’s see then the details of this game programmed in JS. Throughout the post I will show you how this game is programmed, I will also leave you a demo and the complete code which is FOSS.
Note: figure, piece and tetromino will be used synonymously in this post.
Connect 4 in JavaScript and HTML
In this post I will show you how to program the Connect 4 game by using JavaScript with HTML and Vue, with Bootstrap styles.
Connect 4 in JavaScript, HTML – Web version
It is the Connect 4 game but web version with a player versus player option, as well as player versus CPU that uses a small artificial intelligence.
Throughout the post I will show you how the game works, what technologies I have used, styles, etc. I will also show you how to download the source code, as the game is totally free and open source. Finally I will leave you a demo to play connect 4 online.
A plugin for printing in thermal printers directly from browser
In this post I will introduce to you a plugin for printing tickets, receipts or invoices on a thermal printer using client-side JavaScript even if your web page or application is on a cloud server.
This plugin allows you to print directly from browsers, without dialogs and without browsers compatibility issues because you only have to send a HTTP request to print silently and in the background.