DEV Community: Juan Almanza

Your site is probably illegal

Juan Almanza — Sat, 05 Feb 2022 04:59:32 +0000

Privacy on the internet is a serious issue as developers we have the responsibility to respect it, this includes things like using secure communication protocols such as HTTPS as well as how and where you store user information.

But something that many of us don't think about are the analytics, which in some part are sensitive information of our users and around the world there are laws that regulate it, in this article we will talk a little about why analytics can make your site break the law, what alternatives we have, and how we can implement secure analytics on your website.

Why analytics can make your site break the law?

Analytics are a great way to improve your website, by tracking pageviews, unique visitors, and other statistics you can get a better understanding of how your site is being used and make necessary changes.

But while analytics are a great tool, they can also be used to track and spy on users, which can be a privacy concern. This is why many countries have laws regulating the use of analytics, in the European Union the General Data Protection Regulation (GDPR) is a law that regulates the use of analytics and other forms of data collection.

What are the requirements of GDPR?

The GDPR requires that websites get user consent before collecting any data, this includes things like cookies, analytics, and social media buttons. User consent must be explicit, meaning that the user has to actively agree to have their data collected, it cannot be implied or assumed.

Widely used services such as Google Analytics do not comply with these laws so in our sites we must add things like cookies banners and in some countries these services become illegal.

And user data must be protected, it must be stored in a secure manner and be accessible only by authorized personnel. If a website doesn't comply with the GDPR they can be fined up to 4% of their global annual revenue or €20 million (whichever is greater), so it's important to understand and comply with the requirements of the GDPR.

What alternatives do we have?

If you want to collect analytics data but don't want to break the law, there are a few alternatives you can use.

One alternative is to use a third-party analytics provider, these providers are GDPR compliant and will ensure that your data is collected and stored in a secure manner.

Splitbee

Splitbee is my favourite analytics service and the one this site uses, not only is it privacy-friendly and GDPR compliant, it also allows you to create conversion funnels, get real-time analytics, manage events easily, do A/B tests and create automations like sending emails every time an action is executed (which is what I use in my contact form).

Plus it allows you to do all this in it's free layer with 2.500 events which also makes it ideal for blogs and small sites, and if your site moves more traffic you can upgrade to a paid plan that allows you to have much more information about your visitors.

In this blog we will also learn how to integrate it into your Next.js site so you can use it quickly.

You can visit their site here.

Fathom

Fathom does not have a free version, but it is still a very solid option since paying 14 dollars you can register up to 100.000 views. It has a simple interface, but does not include automations, experiments, user profiles and more that Splitbee does, I recommend this service if you want something as simple as possible.

You can try it here with 10 dollars free credit.

Simple Analytics

Simple Analytics is another alternative, this one is a bit more expensive than fathom with a basic plan starting from 19 dollars, but this one allows you to have analytics on as many sites as you want, plus it has some interesting features like knowing from which tweets your visits come from. otherwise it is very similar to Fathom.

You can try it here.

Another alternative is to use a tool with server-side analytics like Netlify Analytics, this tool allows you to collect analytics data without using cookies or other tracking technologies.

And finally, you can also use a tool like Matomo, which is an open source analytics tool that you can host on your own server and configurations.

Implementing Splitbee in a Next.js site

Now let's make a small Splitbee example in Next.js.

Before we start we just need to create an account, you can go directly by clicking here.

When we have registered we must create a new project, just put a name and a url, and we would have everything ready in this part.

Since we have a project let's start with the code.

First we must install the packages we need.

yarn add @splitbee/web

// or

npm install @splitbee/web

Now we will use one of the functions of Next that will allow us to make a kind of proxy by allowing us to make routes in our site that redirect to another part, in this case we will do it to store the script and the endpoint of the API in our own site.

// next.config.js

const rewrites = async () => {
  return [
    {
      source: "/sb.js",
      destination: "https://cdn.splitbee.io/sb.js",
    },
    {
      source: "/_hive/:slug",
      destination: "https://hive.splitbee.io/:slug",
    },
  ];
};

modules.exports = {
  rewrites,
};

Now we will create a special Next file that will allow us to add the Splitbee script to all the pages of our site.

// pages/_app.js

import { useEffect } from "react";
import splitbee from "@splitbee/web";

const App = ({ Component, pageProps }) => {
  useEffect(() => {
    splitbee.init({
      scriptUrl: "/sb.js",
      apiUrl: "/_hive",
    });
  });

  return <Component {...pageProps} />;
};

export default App;

And now we have everything ready, and with this we can have statistics of visitors to our site, including the countries from which they visit us, the number of views, even from what website our users came from.

And if we visit our Splitbee panel we will be able to see something like this.

Other features

Splitbee in addition to all the above mentioned allows us to manage events and store user data, now we will learn how to use them.

First we will make a function that will allow us to handle events, which is nothing more than an indicator that an action was performed, which we can give a name and other additional values.

In the second function we will be able to add parameters to the users, for example in the analytics page we can identify the actions of our users by being able to relate them with their names, as in the example below.

// utils/analytics.js

import splitbee from "@splitbee/web";

// Events
const trackEvent = (event, details) => splitbee.track(event, details);

// Save user data
const setUser = (name, email) =>
  splitbee.user.set({
    name,
    email,
  });

And this can be implemented in different ways, here are some examples:

Record event at button press

import { trackEvent } from "utils/analytics";

const ButtonWithEvent = ({ name, children }) => {
  return (
    <button onClick={(() => trackEvent("Button clicked"), { id: name })}>
      {children}
    </button>
  );
};

Define user when filling out a form

import { setUser } from "utils/analytics";

const SignUpForm = () => {
  return (
    <form onSubmit={() => setUser(name, email)}>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="submit" />
    </form>
  );
};

In the end, by mixing events and setting user data we can have very complete navigation statistics as seen below.

An introduction to Git: My first commit

Juan Almanza — Wed, 09 Jun 2021 20:09:08 +0000

What is Git?

Git is a version control system initially created by Linus Torvalds, the same creator of the Linux kernel. Git was born when the linux kernel used a version control system called BitKeeper, but this was proprietary (or closed source) and when the kernel contributors decided to look at other systems they found that none of the alternatives at the time were sufficient.

Git allows us to manage, distribute and collaborate on our code so that it is organized and there is an efficient workflow when programming with several people, it will also help us to do things like going back to previous versions of our project, or see what the other people who collaborate on our project have programmed.

Installing Git

You can install Git on your computer in several ways, the easiest is if you have a package manager, such as aptitude, brew or chocolatey.
if you have some of these just run this line in your terminal, if you are on linux or MacOS and it does not work correctly you can run it with the sudo instruction at the beginning of the command.

{ apt | brew | choco } install git

if you do not have package managers installed you can see these tutorials to do it in windows:

and also for linux and MacOS:

Let's start with Git

To start let's create a folder, and open that folder in the terminal, then we must initialize our repository, for that we execute the command git init and it should say that the repository has been initialized and now we can start managing versions in our code.
To start executing commands we are going to create a code example, in this case an HTML document where we are going to create a Christmas wishlist.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Wishlist</title>
  </head>
  <body>
    <h1>Wish List for christmas</h1>
    <ul>
      <li>Be a superhero</li>
      <li>Buy a Mansion with my junior salary</li>
      <li>visit the <a href="https://scidroid.me">SciDroid's Web</a></li>
    </ul>
  </body>
</html>

When we save this file we can make a commit, which will allow us to save the changes in this file. let's see the example.
The first thing we will do is to add the file to git, for this we will do the following command git add index.html
This command will make git start checking the changes in our file, and the last step before making our first commits is to execute these commands to identify ourselves.

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Just change the name and email to your name and email address.
Now the last part is to make a commit, just run the following command and change the message to the one you like.

git commit -m "message"

and if everything went well, congratulations you have done your first commit, now keep learning because git is an essential tool in development.
Thanks for reading.

Our computers run on sand, a post about silicon.

Juan Almanza — Tue, 18 May 2021 23:22:20 +0000

Sand?

Yes, although it seems incredible what I am saying our economy works with sand. well, not exactly, it is a component of sand called silicon.

Sand, Photo by Louis

What is Silicon?

Silicon is the most abundant chemical element in the world, this is formed in the megastars when two oxygen atoms are joined and when they explode in a supernova they spread all over the universe, this is the aspect of silicon.

Silicon, Photo by greschoj

Maybe at this moment you are saying "That cannot be the most abundant element in the world, I have never seen that in my life", but it is because it is a block of pure silicon, the most common way to find it is in sand, this because it is a substance that does not corrode easily and with the passage of time most of the components of the sand go away but the silicon remains, well not exactly silicon, what really remains is silicon dioxide which is a mixture between silicon and oxygen, better known as quartz, and this is another very common way to find it, because normally this is found in forests as a kind of white rock that is found between stones or loose as crystals that are geometrically perfect and very transparent. In addition, silicon forms the silicates, some of which are the base of the terrestrial mantle, which makes it the most abundant material on the planet.

Why is it important?

Silicon is important because it is the base of modern computing, which is why the most famous place for technology is called Silicon Valley. Its uses are very varied, have you ever played Minecraft or have you heard that if you melt sand you can make glass, this is because of the silicon dioxide that is in the sand, even make laser beams, or even the silicon that is used in breast augmentation and other procedures, the usefulness of silicon is almost infinite but what we are interested in is its use in technology.

How the silicon is used in tech?

For this we are going to talk a little bit about the history of computing. Before, we had the abacus, which allowed us to do basic operations, but everything developed until we were able to make mechanical computers that allowed automatic operations, until we needed to make really complex calculations and vacuum tube computers were invented.

But they were enormous, so transistor-based computers were created, which is a small electrical circuit with which we can control whether or not electricity passes through, but with the passage of time we needed more and more power, and we discovered that we could take silicon and make millions of microscopic transistors inside and thus microprocessors were born.

MicroChips, Photo by Shelly

How do you transform sand into processors?

The process is very complicated and very delicate to levels that something badly done can damage the chip completely, The first thing is to obtain pure silicon, this is usually done by taking the quartz and separating the silicon from the oxygen, you can use elements such as carbon.

When you have the pure silicon you must crystallize it, and with a very delicate process to cut it, if you cut it badly it is possible that it breaks and it must have a thickness of a few millimeters, when it is ready the most difficult part arrives, a process called photolithography is made where the transistors are printed in the silicon wafer, and you must pass it through complex chemical and physical processes, in a wafer millions of transistors fit and according to the law of Moore every two years the amount of transistors that can fit in a chip doubles.

But, we reach a point where it is increasingly difficult to make them smaller and it is a constant challenge for the creators of microprocessors.

When a wafer is finished it looks like this.

Silicon Wafer, Photo by fabersam

Then it is only cut to make way for microprocessors.

Thanks for reading.

Cover image by Oksana

Learning to code in Python: The Basics

Juan Almanza — Wed, 31 Mar 2021 03:03:37 +0000

About Python

Python is a widely-used, interpreted, object-oriented, and high-level programming language with dynamic semantics, used for general-purpose programming. It was created by Guido van Rossum, and first released on February 20, 1991.

Why Python?

it’s easy to learn – the time needed to learn Python is shorter than for many other languages; this means that it’s possible to start the actual programming faster.
it’s easy to teach – the teaching workload is smaller than that needed by other languages; this means that the teacher can put more emphasis on general (language-independent) programming techniques, not wasting energy on exotic tricks, strange exceptions and incomprehensible rules.
it’s easy to use for writing new software – it’s often possible to write code faster when using Python.
it’s easy to understand – it’s also often easier to understand someone else’s code faster if it is written in Python.
it’s easy to obtain, install and deploy – Python is free, open and multiplatform; not all languages can boast that.

What is Python used for?

Web and Internet development (e.g., Django and Pyramid frameworks, Flask and Bottle micro-frameworks).
Scientific and numeric computing (e.g., SciPy – a collection of packages for the purposes of mathematics, science, and engineering; Ipython – an interactive shell that features editing and recording of work sessions).
Education (it’s a brilliant language for teaching programming!).
Desktop GUIs (e.g., wxWidgets, Kivy, Qt).
Software Development (build control, management, and testing – Scons, Buildbot, Apache Gump, Roundup, Trac)
Business applications (ERP and e-commerce systems – Odoo, Tryton)
Games (e.g., Battlefield series, Sid Meier\’s Civilization IV…)
Websites and services (e.g., Dropbox, UBER, Pinterest, BuzzFeed…)

Text By Python Institute.

The Basics

Before starting it should be clarified that this is a basic tutorial, Python is a very extensive language, for example there are an infinite number of methods in the types of data or an overwhelming amount of things we can do in Object-Oriented Programming but in this tutorial we will not see, but I will bring more tutorials with more complex things.

To start programming we have to start with the basics, we will install Python, a code editor and learn the most basic things of Python.

Installing Python

The first thing we must do is go to the Python website at https://python.org

Click on the download section and download the version compatible with your computer.

Download Section

When you have downloaded it, just execute the file, BEFORE INSTALLING MAKE SURE THAT THE OPTION THAT SAYS ADD TO PATH IS ACTIVATED.

Then just press continue until it is installed.

Installing a code editor

After installing Python search for Sublime Text in Google and select the option to download.

When you are in the download menu you only have to select the option compatible with your operating system, when it has been downloaded you install it.

Sublime's Download Menu

REPL

The REPL is a console interface where you can enter instructions written in Python, In this case I am only going to show you the REPL to begin but we are not going to use it more after this.

The first thing we must do is open our terminal.

In Windows we only have to press Win+R and a pop-up menu will appear, just type cmd and press enter.

To open it in MacOS, you can open the Applications folder, then Utilities and double-click on Terminal.

And in Ubuntu press Alt+F2 and type "gnome-terminal" and then enter.

If your operating system is not here, look on the Internet to find out how to open it.

When you have the terminal open just type python in Windows, OR in MacOS or Linux python3.

If you get an error on MacOS or Linux try just typing python.

If you get an error in any operating system try to reinstall Python.

C:\Users\SciDroid>python
Python 3.9.0 (tags/v3.9.0:9cf6752, Oct  5 2020, 15:34:40) [MSC v.1927 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>

Here you only have to write this and something magical will happen.

print("Hello World")

And if you did it correctly in the terminal you should get the text Hello World.

Congratulations you have already written your first line of code, but this is nothing now let's do the real code.

Creating a Python executable

Before we start we must activate the file name view.

In Windows you must go to the file explorer in the view section and activate the option called File Name Extension.

This is the Spanish menu, just look for the option that says File Name Extensions.

To create our executable we open Sublime Text, press Ctrl+N and then Ctrl+S, here you name the file followed by the extension .py and save the file in a path you remember so you can later enter that path from the terminal.

When you have saved the file, open the terminal and move to the directory with the command cd.

for example if your file is in the directory C:/Users/user/downloads/index.py and taking into account that by default Windows leaves us in the user folder to enter the file folder we should write

cd downloads

Now we write in our code editor the command that we write in the REPL that is

print("Hello World")

We save the changes with Ctrl+S and in our terminal we write python file you must replace the word file by the name of your file and press enter.

And if everything went correctly you should get the text "Hello World" in the terminal.

Comments

In Python a comment is a text that is not executed and is initialized with the # symbol.

This serves us for example to explain what our code does, I'll show you with an example.

# Program that shows the text "Hello World" in the terminal
print("Hello World")

In this case we use the comment to explain the function of a program, but you can write anything inside a comment.

Commenting your code is always a good practice, do it whenever possible, later we will talk about documenting your code.

Variables

A variable is a space in RAM where you can save data for later use.

This allows us to save very important data for the operation of a program, for example, someone's name, how many lives a character has, etc.

To define a variable in Python we have the following syntax.

playerLifes = 5

As we see in this example we put a name to the variable then a sign = and assign a value.

Now the variables have certain rules, one of them is the names, the variables cannot begin by number and cannot be put as name reserved words of the language.

when naming variables it's very good practice to put a self-descriptive name to them, for example if you want to refer to the number of attempts that a person has you can put numberOfAttempts instead of number.

If you are observant you may have noticed that the variable name is written in such a way that the first word is in lower case but the first letter of next the word is in upper case, this is called Camel Case and it is a good practice to use it when you have more than one word as a variable name.

And now you have a superpower you can save values in variables and with the print() function pass it through the screen, let's try.

We are going to define a variable and then print it for this we must use print(variable) changing variable by the name of the variable that we assign, then we are going to write it in code.

name = "Jhon"
print(name)

and if we run it it will result in the following.

Jhon

Request text

Now what if we want to ask the user for data?

In Python there is a function called input() for that.

Let's make an example.

name = input("What is your name?: ")

In this code we are asking the user to write their name, and as we see is a variable to which we say that its value is what the user enters.

Exercise

Ok now we are going to make an exercise to put in practice all that we learned, it is quite simple, what you must do is ask a user his age and then you must pass it through the screen, but the code must have comments that explain what each thing does.

ATTENTION: DO NOT GO TO THE RESULT IF YOU HAVE NOT DONE THE EXERCISE, THE ONLY WAY TO LEARN IS TO PRACTICE.

If you want to see how to solve it go to the final.

Data Types

Now let's talk about the data types in Python, each one has unique properties so let's see all of them.

Strings

Strings are free text variables, in them we can do anything, and we have to be careful with that because it doesn't matter what a number is if it is in a string, it will be treated as if it were text.

string = "This is a string."

All strings are enclosed in quotes, they can be double quotes (") or single quotes (').

In the strings we have a special property, we can create strings that are going to be shown exactly as they are, counting line breaks, this serves us for example to place ASCII art in our scripts, for it we must place 3 double quotes (""") at the beginning and at the end.

We are going to see an example.

katana = """,_._._._._._._._._|__________________________________________________________,
|_|_|_|_|_|_|_|_|_|_________________________________________________________/
                  ! """
print(katana)

if we execute this code this will be the result.

,_._._._._._._._._|__________________________________________________________,
|_|_|_|_|_|_|_|_|_|_________________________________________________________/
                  !

Integers

Integers are numbers that, as their name implies, are integers, that is, they do not have a decimal place. Let's see an example.

integer = 5

Floats

Floats are very similar to integers, the only difference is that they always have a decimal place.

floating = 4.53

It should be noted that both integers and floats accept positive and negative numbers.

Booleans

Booleans are very interesting types of data because there are only 2 'True' and 'False', and as its name says it means true and false, and these are written as they come out here with the first letter in capital letters, this type of data will serve us when we talk about flow control.

Let's see an example in code.

outOfALoop = True

Transforming data types

Now what happens if we have a type of data and we want to transform it into others, for that we have the following functions represented in the tables.

Function	what does
int()	transforms into an integer
float()	transforms into an float
str()	transform into an string

These work exactly the same way when you pass them a variable and transform it into another type of data and this is especially useful when we use things like input(), which you should keep in mind that anything can be transformed into a string, but only numbers within a string can be converted to float or integer.

Let's make an example of how we can use this.

lives = "5"
int(lifes)

In this little script what we do is take the variable called "lifes" which is a number in string form and transform it into an integer type.

Operators

Operators are useful for many things in Python, for example you can use them to compare, do mathematical operations or make relationships, they exist of different types and let's see them.

Assignment operators

operator	use
=	assigns the value to a variable
+=	adds the value to the variable
-=	subtracts the value of the variable
*=	multiplies the value to the variable
/=	divides the value to the variable
**=	calculates the exponent of the value of the variable
//=	calculates the integer division of the value of the variable
%=	returns the rest of the division of the value of the variable

Let's put an example that we want to make a script where you can place a year and your year of birth and you get how old you will be in that year.

# We will ask for the year of birth and the year in which you want to calculate your age.
birth_year = int(input("What year were you born?: "))
year_to_calculated = int(input("In what year do you want to know your age?: "))
# Now we show the result
print(f"in {year_to_calculate} your age will be {year_to_calculate - birth_year}")

Before you worry to see the print(f"{var}") I am going to explain it to you, this is what is called in python a f-print, in this between the keys we can put variables or operations and the result of them will be printed on the screen, this saves us work and complications.

And to finish this first part I challenge you to make a simple script in Python and leave it in the comments, I will be reviewing them.

Answers to the exercises

WARNING: IF YOU HAVEN'T DONE THE EXERCISES GO BACK UPSTAIRS AND DO THEM, IF YOU DON'T DO THEM THIS TUTORIAL WILL BE USELESS.

Exercise One

# this code asks for the user's age and then displays it on the screen.

# We ask for the age and store it in a variable.
age = input("Enter your age: ")
# We pass on the screen the value of the variable age.
print(age)