Parzibyte's blog

Free knowledge blog: linux, programming, open source, databases, android, frameworks, web and computing in general

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

(more…)

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.

(more…)

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.

(more…)

Laravel POS System – Free and open source

Today I am going to show you a software that I just made with Laravel. It is a sales system, point of sale, POS or whatever you call it, which is used to keep track of the products that are sold, the sales, and so on.

It is a totally free and open source system; which means that you can use it at no cost, and modify it to your needs or customize it. Among its features we find:

  1. It Uses Laravel in its latest version (as of this writing)
  2. Bootstrap is used for styles
  3. FontAwesome Icons
  4. Fully responsive system, that is, it works on mobiles, tablets and computers
  5. Inventory control with sale price, purchase price, profit, stock, etc.
  6. Option to make sale, adding products
  7. Checking inventory stock when selling
  8. Subtraction of stock when selling
  9. Printing of sales tickets on thermal printer
  10. Sales report
  11. User login and registration
  12. User management
  13. Customer registration
  14. Ticket that includes the customer’s name

Now let’s see how I have developed it, where you can download it, and so on.

(more…)

Creating an API REST with Python, Flask and SQLite3

In this Python programming tutorial you will learn how to create a REST API using Flask, SQLite 3 (for data), and JSON for data communication.

In the end you will have an API that you can consume from any client that could be an Android application, a browser with JavaScript or even another server language.

I will show you how to create an API that communicates using JSON and saves the data in SQLite 3. The API will be created with Flask, and we will use the Python programming language to handle all the data.

(more…)

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.

(more…)

Enable CORS in Flask app

In this post I will show you how to enable CORS (Cross Origin Resource sharing) so that you can make HTTP requests from a different domain than the one you use for your Flask application written in Python.

We will just add a kind of middleware to modify all the responses and add the headers that allow CORS in Flask.

(more…)

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

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.

(more…)