DEV Community: Cynthia HENAFF

Get started with Raspberry Pi and start hacking

Cynthia HENAFF — Fri, 10 Feb 2023 11:28:27 +0000

Since 2022 I have been lucky enough to have a garden and I love to watch the plants and shrubs grow and the birds fly by. Spending my time looking out of the office window inspired me to come up with a project idea: a time-lapse camera. Usually, I would have gone with an Arduino or an ESP with a camera module. However, this time, I wanted to test and train myself with the Raspberry Pi. So, I'm taking this opportunity to share with you the basics and the new knowledge I acquired during this time.

What is Raspberry Pi?

The Raspberry Pi is a series of credit-card sized mini-computers (except for a few models I'll talk about below), designed in the UK in 2012 by the Raspberry Pi Foundation. The purpose of this computer was originally to promote computer science education in schools by providing a cheap and easy-to-use computer. Since its creation, it has become a worldwide success with developers, tinkerers and technology enthusiasts in general.

Indeed, the Raspberry Pi has everything to please:

small size
attractive price
low-power consumption
many electronic inputs/outputs
Wi-Fi, Bluetooth
HDMI, USB
...

It is used in many projects, from a computer for yourself or a child, to a home file server, a NAS, a home automation control device, or even a media player on the TV and a retro gaming console.

Different models of Raspberry Pi

There are currently several Raspberry Pi models on the market, each with different features and uses. Here is a non-exhaustive list of the most popular models.

Raspberry Pi 4

The latest model. It is the most powerful model in the range and is recommended for performance-intensive applications such as development or streaming gaming.

Raspberry Pi 400

This new Raspberry is a computer built right into the keyboard!

Raspberry Pi 3

A slightly less powerful model than the Raspberry Pi 4, but still very powerful. It is recommended for applications requiring fewer resources, such as web development or home automation.

Raspberry Pi Zero

The smallest and cheapest model in the range, equipped with Wi-Fi and Bluetooth.

It is recommended for DIY projects and applications that do not require high performance.

Raspberry Pi Zero 2 W

The latest model, identical to the Raspberry Pi Zero but five times faster.

It is important to choose the most suitable Raspberry Pi model for your needs based on performance and functionality.

Why are Raspberry Pi prices so high at the moment?

The price of the different models of Raspberry Pi is normally between 10 and 40€, however at the moment stock-outs are more and more observed and the prices are almost twice as high, but why?

This is mainly due to a shortage of semiconductors, i.e. the electronic chips that make up our computers (transistors, processors, RAM, graphics units, etc.). This shortage is due to the high demand for laptops, tablets and other electronic devices, which has increased sharply with the advent of remote working and lock-ups. The Raspberry Pi, which is a cheap microcomputer, is particularly affected by this shortage, as it has a low profit margin and uses partly older, and therefore cheaper, technology. As a result, the foundation that produces the Raspberry Pi is struggling to find chips at affordable prices or in sufficient quantity.

Setting up your Raspberry Pi

The Raspberry Pi documentation is known to be very comprehensive, accessible and regularly updated. It is available online at the official Raspberry Pi website and covers a wide range of topics, from installing the OS to using different devices and accessories.

The documentation is well-structured and easy to navigate, making learning about the Raspberry Pi affordable for everyone, whether you are a beginner or an experienced user.

In addition, there is an active community of Raspberry Pi developers and users who share their knowledge and experience on the internet, which can be an excellent source of further assistance.

Getting started

A minimum of hardware is required to get started with the installation of your Raspberry Pi. You will need :

A Raspberry Pi
A sufficiently powerful power supply for the Raspberry Pi
A microSD card
A USB SD card reader

Configuring the Raspberry Pi with Raspberry Pi Imager

To install our Raspberry Pi, we will use the Raspberry Pi Imager software which you can now download and install.

https://www.raspberrypi.com/software/

Once you have completed this first step, connect your microSD to your computer and launch Raspberry Pi Imager.

Operating System

First of all, you will have to choose the OS that will be installed on your microSD. Several Operating Systems (OS) will be proposed to you, which we can divide into two categories:

The type of OS

Lite: this is an OS with a headless environment, i.e. no desktop environment. When you boot your Raspberry, you will only have access to a terminal. This very light OS version is recommended for all server applications. In other words, if you don't plan to plug a keyboard/mouse and monitor into your Raspberry, this is the distribution you need.
Full: This is a desktop distribution with some “recommended” applications already installed. It is ideal if you want to use your Raspberry as a work computer, browse the internet…
If nothing is specified, it is a desktop OS.

OS in 32-bit or 64-bit versions. Overall, the 64-bit versions will be more powerful. All Raspberry computers support 32-bit OS. However, only the Raspberry Pi 3B, 3B+, 3A+, 4, 400 and Zero 2 W support 64-bit OS.

For my project, I chose to use the 64-bit Raspberry Pi OS Lite version.

Storage

For Storage, you simply need to select the microSD you have connected to your computer.

Advanced options

Many options are available in the advanced settings:

Hostname
This is the name of your Raspberry Pi. I advise you to leave the default value, which is raspberrypi.local.
SSH
This option allows you to connect to your Raspberry Pi remotely via SSH. I recommend that you enable SSH. If you know what an SSH key is, put in your own. If you don't know what it means, put a password. WARNING : with the LITE version, you must activate SSH; otherwise, you will need a screen and a keyboard connected to your Raspberry!
User
If, like me, you use a Lite OS, it is essential to create a user on your Raspberry. You need to enable this option by adding a username and password. If you are using a desktop distribution, you will be able to create your user when you first boot your Raspberry.
Wi-Fi
This option allows you to connect your Raspberry directly to your Wi-Fi by filling in the SSID and password of your Wi-Fi. It is also possible to connect your Raspberry to the Internet via an Ethernet cable if you would rather not use Wi-Fi. You can also set the Wireless LAN country if it does not match yours. However, I strongly advise you to set it via the selector and not to write it directly in the input. I have lost a few hours of my time with a Raspberry that did not connect to Wi-Fi, because spaces had been inserted behind my country code.
Finally, you can set the timezone of your Raspberry and the keyboard layout if you want to use a keyboard connected directly to your Raspberry.

As an example, here is my configuration for my project.

Now that your configuration is done, you can press the Write button, which will launch the installation of your OS on your microSD. This may take a while depending on the type of OS you choose.

Once finished, you can insert your microSD into your Raspberry Pi and plug in the power supply. You will need to wait a few minutes for your Raspberry Pi to boot up, and it will be accessible either by connecting a monitor and keyboard to it, or by SSH if you have opted for this solution.

Connecting to your Raspberry Pi via SSH

If you have set up your Raspberry Pi correctly by setting up SSH and a User in Raspberry Pi Imager, here are the steps to follow.

To begin, in your terminal, try pinging your Raspberry Pi with the following command:

ping raspberrypi.local

If you changed the hostname during configuration on Raspberry Pi Imager, you need to replace raspberry.local with your-hostname.local.

For example, in my case, it will be monsieurrizpi.local (see config above).

The ping command should return something like this:

PING raspberrypi.local (192.168.1.131) : 56 data bytes
64 bytes from 192.168.1.131: icmp_seq=0 ttl=255 time=2.618 ms

If it does not ping, wait a few more minutes. It may not have finished booting.

Once it pings you can connect to it via SSH with the following command:

ssh pi@raspberrypi.local

You must replace pi by the username defined during the configuration on Raspberry Pi Imager and raspberrypi.local by the hostname of your Raspberry if you had modified it.

By default, the user defined is pi

For example, in my case, I use the following command:

ssh cynthia@monsieurrizpi.local

Depending on the authentication mode chosen during configuration, you will be asked for your password or passphrase.

Starting your project

Your Raspberry Pi is now installed and ready to use. It's time to get started on your project or just use it as a computer.

I'll be back soon with a new article about the development of my time-lapse camera project.

If you are looking for an idea or a project, I recommend some websites with tutorials and interesting projects.

Create your eCommerce website with Gatsby

Cynthia HENAFF — Tue, 24 Jan 2023 18:11:58 +0000

Setting up an e-commerce site is often seen as laborious, but with the Jamstack ecosystem, we can create an e-commerce site very easily. This is what I'm going to demonstrate here by creating a fictitious e-commerce site that will offer graphic novels inspired by the world of music, called PaperJam. My GitHub directory is available here https://github.com/cynthiahenaff/paperjam and the demo site is available at this address https://paperjam.henaff.io.

I chose to use the following technical stack:

Gatsby as a static site generator
DatoCMS for the content
Snipcart for the e-commerce part
Vercel for CDN hosting

To get off to a good start, we will create an account on each SaaS that we will use: DatoCMS, Snipcart and Vercel.

Initiating the project with Gatsby

Gatsby is a static site generator based on React and GraphQL. The initialization of a project with Gatsby is quite simple and accessible to all, it is enough to type the following command in our terminal:

npm init gatsby

We can be guided through the CLI steps to the next question: Will you be using a CMS? We then select the answer DatoCMS.

To the question Would you like to install a styling system? , let's answer no, and concentrate on the other aspects of the design.

Continuing with the question Would you like to install additional features with other plugins?, select the options below:

◉ Add responsive images
◉ Add page meta tags with React Helmet
◉ Add an automatic sitemap
◉ Generate a manifest file

Finally, let's enter our API key for DatoCMS in response to the question Configure the DatoCMS plugin.
This key can be found under the name Read-only API token in the Settings/API tokens section of our project, on the DatoCMS website. It is write-protected and read-only for the data.

To start the project server, just use the following command at its root.

npm start

Now that our server is up and running, the home page of our web application is accessible at http://localhost:8000. The code for this page can be found in the JavaScript file src/pages/index.js. Within the pages folder, the different pages of our web application are determined.

For example, it is common on an e-commerce site to have an « About » page that talks either about our company or our product in detail. So we will create this page on our application. As we want to create the /about route, we will create an about.js file in the pages folder, as below:

|– src
    |– pages
        |— index.js
        |— about.js

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>My « About » page</h1>
    </div>
  );
};

export default AboutPage;

The route http://localhost:8000/about is then automatically created.

For an e-commerce site, beyond the performance of the site, it is essential for a good referencing to add the metadata tags in the HTML files.
To add these elements in the head tag of our pages, the simplest method is to use the Helmet library.

We will create a Layout component in our components folder which we will call on our various pages. This component will also allow us to use the same layout throughout our site. We will include the header and footer of our project in this component.

import React from 'react';
import { Helmet } from 'react-helmet';

const Layout = ({ children, title, description, image }) => {
  return (
    <div>
      <Helmet 
    defaultTitle="PaperJam" 
    defer={false} 
    htmlAttributes={{
          lang: 'en',
        }}
       >
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={image} />
        <meta property="og:type" content="website" />
        <meta property="og:locale" content="en_GB" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:creator" content="@monsieur_riz" />
      </Helmet>

      <div class="content">
        <header />
        <main>{children}</main>
        <footer />
      </div>
    </div>
  );
};

export default Layout;

This is what our pages/about.js file looks like after adding our Layout component.

import React from 'react';
import Layout from '../components/Layout';

const AboutPage = () => {
  return (
    <Layout 
    title="My About page" 
    description="Discover why I decided to create this ecommerce website"
     >
      <div>
        <h1>My "About" page</h1>
      </div>
    </Layout>
  );
};

export default AboutPage;

Content creation with DatoCMS

Now that our project is ready, we will move on to creating a product data model with DatoCMS.

DatoCMS has the advantage of being easy to use and ergonomic. It allows you to easily make mandatory elements such as product names or alternative texts on images. A gallery is available, which allows to store images, but also to edit them directly. It is also possible to manage the translation of our site into up to 5 different languages.

To do this, let's go to the Settings/Models section of the project in DatoCMS.

We will name our first data model Product; it will contain the following elements:

Name - Text — Single-line string

We will make this element mandatory as it is essential for the correct display of a product

Slug - type SEO — Slug

The slug is a part of the address that will allow us to uniquely identify a page. It must be in a format that is easily readable by users and search engines for UX and SEO purposes.
DatoCMS allows us to use a reference value such as the name of our product to generate it automatically.
It will have the following validations:

Thumbnail - type Media — Single asset

In terms of validation, we will make alternative text mandatory with the Require alt and/or title option as this is essential for accessibility and SEO.

Price - type Number – Floating-point number

This will also be mandatory.

During development, after a modification of a data model, it is necessary to shut down the server and type the following command in the terminal before restarting it.

npm clean

This will clear our site's cache and search for it on DatoCMS.

Now that our template is created, we can go back to the Content section and create our first product.

Creating the homepage

We will now display our products on the home page. To do this, we'll get the products registered in DatoCMS in the index.js file

The first thing to do is to import graphql from Gatsby by adding this line to the top of the JavaScript file.

 import { graphql } from 'gatsby';

Under the HomePage component declaration, let's export a new constant called query. The name of the constant is not important, as Gatsby looks for a GraphQL string exported from the file rather than a specific variable. It is important to remember that we can only have one GraphQL query per file.

The first part of writing a GraphQL query is to define the type of operation (in this case query) and a name.

Gatsby integrates the GraphiQL tool, which is a development environment available at http://localhost:8000/__graphql

It allows us to build GraphQL queries and copy/paste them directly into our code.

Now that the request is ready, we can directly retrieve the data object from the component props as below.

import React from 'react';
import { graphql } from 'gatsby';

const IndexPage = ({ data }) => {
  const products = data?.allDatoCmsProduct?.edges ?? [];

  return (
    <div>
      <h2>Last product</h2>
      <div>
        {products.map(({ node }) => (
          <div key={node?.id}>
        <figure>
          <img src={node?.thumbnail?.url} alt={node?.thumbnail?.alt} />
        </figure>
        <div>
          <h3>{node?.name}</h3>
        </div>
      </div>
    ))}
      </div>
    </div>
  );
};

export const query = graphql`
  query getProducts {
    allDatoCmsProduct {
      edges {
        node {
          id
          slug
          name
          price
          thumbnail {
        url
        alt
          }
        }
      }
    }
  }
`;

export default IndexPage;

Snipcart integration

Our home page now contains a list of items, so we can now look at integrating Snipcart for the e-commerce part.

Snipcart is a shopping cart manager that is very easy to integrate into a web application. A simple addition of a piece of JavaScript code allows you to integrate the resources, JavaScript and CSS files into the source code. This is similar to adding a third party script like Google Analytics. As Gatsby has a very large community, there is already a plugin that will allow us to add the necessary scripts to Snipcart. We will install the gatsby-plugin-snipcart-advanced library.

npm install gatsby-plugin-snipcart-advanced

Once the installation is complete, we will add the necessary configuration to the gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-snipcart-advanced`,
      options: {
        publicApiKey: "YOUR_SNIPCART_APIKEY",
        currency: 'eur',
        openCartOnAdd: true,
        useSideCart: true,
        // be careful with this mode cart. The cart in this mode has a bug of scroll in firefox
      },
    },
  ],
};

The API key needed to run Snipcart is available in the configuration area of our dashboard. Once logged in, this area can be accessed by clicking on the user icon in the upper right corner of the screen. It allows you to configure all administrative settings such as payment gateways, delivery, etc.

The API key is accessible in the API KEYS area under the name "public test API key".

It is also necessary to customise our regional settings (located in the Regional Settings tab) to configure the currency supported, the time zone and the countries in which it will be possible to place orders.

Snipcart offers many features that can be configured in this area, such as inventory management, delivery, automatic email layout and payment gateway.

Snipcart supports many payment gateways such as Stripe, Paypal or Square. For this guide, we will not configure the payment gateway and will remain in the "test" mode of Snipcart.

Adding an item to the basket

In order for Snipcart to react to add-to-cart events, we need to add the class snipcart-add-item to the add-to-cart buttons for each product, along with the following attributes:

data-item-id: Unique identifier for our product
data-item-price : Price of the product
data-item-image : URL of the product image
data-item-name : Name of the product

import React from 'react';
import { graphql } from 'gatsby';

const IndexPage = ({ data }) => {
  const products = data?.allDatoCmsProduct?.edges ?? [];

  return (
    <div>
      <h2>Last product</h2>
      <div>
        {products.map(({ node }) => (
      <div key={node?.id}>
        <figure>
          <img src={node?.thumbnail?.url} alt={node?.thumbnail?.alt} />
        </figure>
        <div>
          <h3>{node?.name}</h3>
          <button 
        class="snipcart-add-item"
        data-item-id={node?.slug}
        data-item-price={node?.price}
        data-item-image={node?.thumbnail?.url}
        data-item-name={node?.name}
          >
        Add to basket
          </button>
        </div>
      </div>
    ))}
      </div>
    </div>
  );
};

export const query = graphql`
  query getProducts {
    allDatoCmsProduct {
      edges {
        node {
          id
          slug
          name
          price
          thumbnail {
        url
        alt
          }
        }
      }
    }
  }
`;

export default IndexPage;

Viewing the cart

A summary of the basket allows customers to access it quickly and reminds them of its contents.

We have the ability to add elements with specific CSS classes to our web application that allow interaction with Snipcart directly.

To add a button that opens the shopping cart, we need to add the class snipcart-checkout . It is also possible to display the number of items in the basket or the total price by adding the snipcart-items-count or snipcart-total-price class to a JSX element.

We'll add this button inside our header element in our layout component to display this information and give our user the option to go and view their basket in detail.

... 
<header>
  <button class="snipcart-checkout">
    Basket
    <span class="snipcart-total-price"></span>
    (<span class="snipcart-items-count"></span>)
  </button>
</header>

Our shopping tunnel is now ready to be tested on the server.

Putting your website online with Vercel

We are going to use Vercel which is one of the big players in automated front-end deployment.

Vercel allows us, in addition to simplifying the deployment, to deploy our site on servers in the four corners of the world. This is what we call a CDN (Content Delivery Network). In addition to the unbeatable price and the certainty that the site will withstand any load, it allows the content of the web page to be loaded from the server closest to the user and therefore reduces the loading time.

It is essential to use Vercel, or any other CDN, to host your code on a Git platform such as GitHub or GitLab.

Vercel allows you to easily import a Git directory once authenticated with the chosen Git platform.

When importing our project, Vercel detects which library it uses and pre-fills the necessary configuration. A good practice in terms of security is to add our environment variables on Vercel and not to expose them on your Github.

Now it's time to deploy our site. Vercel will automatically assign it a URL.

Now that our e-commerce site is available online, we still have a few steps to go before we have a working site.

Let's start with the configuration on the Snipcart dashboard.

In the Domains & URLS section, we will add the domain we just created with Vercel. This will determine the domains and sub-domains that our Snipcart shop can run on.

Finally, we will import all the products available on our site into Snipcart.
To do this, in the Products / Fetch section, simply enter the address of the page in our web application where our list of products is located; this is the home page.

Snipcart will automatically fetch our page to retrieve the items that carry the classes we added earlier.

We can now go to the end of our purchase tunnel and validate our very first order. Snipcart automatically manages the sending of the summary email to the customer.

Finally, as our site is pre-built on our server, we need a site update function to take into account the updated data on DatoCMS.
To do this, it is necessary to add a build trigger in the DatoCMS project parameters. This is directly connected to Vercel and configured as below.

The "build method" automatically adds the DatoCMS integration to Vercel, which adds a site redeployment button to all DatoCMS pages.

Our e-commerce site is now online, quickly accessible from anywhere in the world and ready to receive our first visitors!

SEO = Performance, but not only

Thanks to Gatsby, our e-commerce site is fast and efficient. But if speed is essential for referencing, it is not everything. Indeed, one should not put aside the basics of SEO which are among others :

A good structure of the pages by using the appropriate tags (h1, h2,...)
A unique and quality content
Optimised images to reduce their loading time
Alternative text on all images that require it
Good internal linking (links from one page to another)
A large number of inbound links to the site

You now have all the cards in hand to launch and optimise your e-commerce site, but don't forget your target: you must always be a user of your own product in order to understand your customers and satisfy them as much as possible.

Revolutionizing Natural Language Processing with ChatGPT-3

Cynthia HENAFF — Sat, 03 Dec 2022 16:36:44 +0000

OpenAI is a research institute focused on developing artificial intelligence in a safe and beneficial way. Founded in 2015, the institute has made significant contributions to the field of AI, including the development of language models such as ChatGPT.

ChatGPT is a large language model trained by OpenAI that can generate human-like text responses based on a given input. The model has undergone several iterations, with the latest version being ChatGPT-3.

In this article, we will discuss the history and achievements of OpenAI, the development of ChatGPT and its previous versions, and the new features of ChatGPT-3.

OpenAI and its History

OpenAI was founded in 2015 by Elon Musk, Sam Altman, Greg Brockman, and others with the goal of advancing the field of artificial intelligence in a safe and beneficial way. The institute has since become a leader in the development of AI technologies, with a focus on advancing the capabilities of language models.

Some of OpenAI's major achievements include the development of GPT-2, a language model that can generate human-like text responses based on a given input. GPT-2 was a major advancement in the field of natural language processing, and paved the way for the development of ChatGPT.

ChatGPT and its Development

ChatGPT is a large language model trained by OpenAI that can generate human-like text responses based on a given input. The model uses a combination of natural language processing techniques and machine learning algorithms to generate responses that are similar to those of a human.

Previous versions of ChatGPT included ChatGPT-2, which was released in 2019 and had a significantly larger training dataset than its predecessor. ChatGPT-2 also introduced the ability to generate responses in multiple languages, making it a more versatile language model.

ChatGPT-3 and its New Features

The latest version of ChatGPT, ChatGPT-3, was released in 2022 and introduced several new features and capabilities. Some of the notable new features of ChatGPT-3 include:

Improved language generation capabilities, allowing the model to generate more human-like responses
The ability to generate responses in over 100 languages, making it even more versatile than previous versions
Improved memory capabilities, allowing the model to retain information from previous interactions and use it to generate more relevant responses

In comparison to previous versions of ChatGPT, ChatGPT-3 has significantly improved capabilities and is a major advancement in the field of natural language processing.

In conclusion, OpenAI has played a significant role in the development of artificial intelligence, with a focus on advancing the capabilities of language models. ChatGPT and its previous versions have been major milestones in the field, and the latest version, ChatGPT-3, introduces several new features and capabilities. The potential impact of ChatGPT-3 and future developments in AI are exciting to consider.

Didn't you notice anything?

This article is a perfect example of ChatGPT-3's capability as it is generated by ChatGPT-3 itself as shown in the following screenshot.

Even the title of the article was generated by ChatGPT.

Since a few days, you must have seen a lot of publication on Twitter and others social networks about ChatGPT-3.

// Detect dark theme var iframe = document.getElementById('tweet-1598269692082151424-524'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1598269692082151424&theme=dark" }

ChatGPT is very impressive because it is able to generate meaningful and relevant content in many different areas. Whether it's a recipe, a mathematical problem, popular science or a development question, it will give you a pretty good answer in either English or French.

The best way to understand the immensity of the thing is to go and test it and ask it some very specific questions. So, go to chat.openai.com to create your account and try to ask it anything you can think of.

Jamstack, the rescuer of small businesses

Cynthia HENAFF — Tue, 02 Aug 2022 09:48:35 +0000

Since the outbreak of COVID-19 and the measures that were taken to mitigate the pandemic, e-commerce has boomed and allowed merchants to bounce back and keep their businesses afloat. However, when everyone is getting into e-commerce, it is important to differentiate yourself from the competition. This is where Jamstack plays a role and can become the saviour of these businesses.

The Jamstack

Jamstack is an abbreviation coined by Mathias Biilmann, CEO of Netlify, which stands for “JavaScript, API and Markup”.

Jamstack refers to a web development architecture that allows developers to leverage the benefits of a static website while retaining the dynamic attributes of a database-driven CMS, without the database.

It can be used for many purposes: showcase websites (for lawyers, restaurants, …), personal websites (blog, portfolio, …), e-commerce websites.

A Jamstack site is made up of different elements, which are :

A static site generator (SSG)
A static site generator is a tool that builds static HTML pages. Using content from a CMS or other system, the SSG applies a template of your choice and generates a structure of purely static HTML files, resulting in web-ready pages. Among the best known are Gatsby, Next.js, and Eleventy.
A headless CMS
A CMS (Content Management System) is a type of web application that manages the content of a website. If it is “headless”, then it exposes the data in the form of an API only and is totally decoupled from the front-end.
Continuous integration and deployment (CI/CD) pipelines
Each content modification, on the CMS or on the source code, is notified to a continuous integration server that will rebuild the site.
CDN hosting
A CDN (Content Delivery Network) is a means of hosting from several servers located in different geographical areas. It allows the content of the web page to be loaded from the server closest to the user and therefore reduces the loading time. The main ones are Netlify and Vercel.
One or more third-party services
The thriving API ecosystem provides a solution for just about any need, from payment and form data management to user authentication, real-time data storage and retrieval, and e-commerce task management.

In a classical architecture, pages are computed on the fly: each request is received by the server, which generates the view and sends it back to the user, whereas in a Jamstack architecture, pages are pre-generated: when the server receives the order, it builds the view of each page of the site, and the whole site is served from a CDN.

Why the Jamstack?

There are many advantages to developing an e-commerce site with the Jamstack, but the most obvious one is the considerable performance improvement.

For a start, every time a content change is applied in the CMS, the site is completely rebuilt on the server side. As a result, when users visit the site, neither the APIs nor the databases are called. If we add to this the fact that all the pages generated are ready to be consumed on CDN servers geographically close to the user, wherever they are in the world, then we obtain a significant increase in performance compared to a traditional architecture.

Using a CDN also makes it possible to transparently compensate for any sudden spikes in traffic. It puts an end to problems related to server capacity or an interruption in the connection to the database. In addition, these pre-rendered static web pages are always indexed without problems by Google's robots.

Finally, being able to rely on a multitude of third-party services and focus exclusively on the front-end makes the development experience much better. Indeed, all these services are developed by entire teams dedicated to a single need, a single problem. This saves a lot of time in terms of development and experience as these solutions are already optimised, perfected and secured.

Once in production, no maintenance is required on a Jamstack website. With the headless CMS, the client has control over all content and becomes autonomous if they need to make changes. These CMS have the advantage of being simple and intuitive to use for the client. This also makes them an ideal choice for agencies and freelance developers to provide turnkey sites to their clients by making them autonomous.

Thanks to the CMS and the use of third-party services, the development cost is reduced compared to a traditional architecture. And some CMS such as Contentful or DatoCMS and some hosting services such as Netlify or Vercel offer free plans, which can bring the actual hosting costs down to almost zero.

At present, there are two major limitations to the Jamstack e-commerce solution. The first is when you have a very large product catalogue. By nature with Jamstack, when a small change is made to a single page, all the pages of the site are rebuilt. If the site contains thousands of pages, this can take several minutes.

However, solutions already exist. Gatsby and NextJS have already released an incremental build option. Incremental builds allow you to rebuild only the relevant pages, i.e. the ones that are actually modified. This now makes it possible to have e-commerce sites with very large product catalogues in Jamstack.

The second limitation is the lack of customisation of the website for each user. Indeed, as the site is generated upstream, all users have the same version. In the age of ultra-customisation, this can become a real problem for some. However, the e-commerce site Everlane has implemented a very effective solution to overcome this problem. They add dynamic bricks to the static version of the site in order to personalise the site to the profile of the logged-in user. If the user has already ordered women products, they will see the women items highlighted. In order to avoid the white page during the loading time of these dynamic bricks, they use the “Skeleton Screen”. This technique put forward by Luke Wroblewski in 2013 starts from the observation that the usual loading pages draw the attention of users to the fact that they are waiting. The Skeleton Screen consists of displaying what the page should look like, but with placeholders instead of data. In this way, it allows the user to wait while giving the impression that the site is loaded. This trick is already used by most of the Internet giants such as Slack, Netflix, or Twitter to name a few.

The COVID crisis and the advent of the Jamstack

In March 2020, the first containment due to COVID-19, which was initially planned to last 2 weeks, was put in place. Unfortunately, as the health crisis was difficult to manage, we had to carry out a series of confinements. The economic victims of these repeated confinements were the small shops which, not being “essential” shops, had to close their doors. Despite their well-stocked inventory, they were unable to sell and thus to maintain their turnover. It was time for these shops to adapt! This is where solutions such as click&collect or e-commerce solutions became vital and started to boom.

What does this have to do with the Jamstack?

Beyond the elaboration of the marketing strategy, the choice of products and the design, it is essential when designing an e-commerce site to carefully choose the technology that will be used to develop it. Moreover, nowadays, 53% of web consumption is done via mobile, so it is obvious that the site must be designed in “mobile first”.

For an e-commerce site, it is essential to have a high-performance and secure website. We have already seen that Jamstack is secure, reliable, flexible and above all fast. But why is this so important?

The Google/Deloitte “Milliseconds Make Millions” report, which analysed the correlation between conversion rates and website speed, shows that the two are linked: the higher the performance, the higher the conversion rate. Speed plays a key role in the success of any digital initiative, especially for e-commerce sites. Indeed, it has been shown that improving loading time by 0.1 seconds improves conversion rates by 8%.

The loading time also has a direct influence on the retention rate. Who has never suffered from a web page that is too long?

According to the study, 56% of people say they will abandon a website if it takes more than 3 seconds to load and 1 in 5 users will never return to the site. To put it more simply, half of all customers leave a site before they have even visited it. In addition to losing a potential buyer, you lose a customer who will never return.

When site speed improves by 0.1 seconds, the data shows a positive correlation with consumers viewing more pages per session. More page views per session also means more transactions and more spending. Indeed, on average, users spent 9.2% more.

Another important criterion to consider when developing an e-commerce site is natural referencing. Search Engine Optimization (SEO) encompasses all the methods and techniques that aim to position a website in the top results of search engines.

Jamstack offers all the qualities of SEO. Faster loading time means better SEO, as search engines will always favour a lighter, faster site when indexing a site. It is obvious that the higher a website is in the search engine results, the more visible and visited it will be.

Contrary to solutions such as Magento and Shopify which allow you to easily create product catalogues, a Jamstack gives you the possibility to create editorial content which is also very beneficial for natural referencing. Indeed, the Core Update from Google in December 2020 now gives pride of place to websites with more editorial content.

The many advantages seen above are contributing to the rise in popularity of Jamstack development and e-commerce sites. This has a direct impact on the ecosystem, which regularly sees the birth of new tools: for each need, a service. The abundance of tools and resources available contributes to pushing the limits of what is possible with a static website.

It is difficult to keep up with the development of the ecosystem as it is so fast at the moment. However, here is a small, non-exhaustive list of the main third-party services in terms of e-commerce sites.

The adoption of Jamstack

According to 2020 figures, the number of Jamstack websites has increased by 85% compared to 2019 for desktop websites and by 147% for mobile sites. There are almost twice as many Jamstacks as in 2019. This shows a real sign of the community's attraction to this solution.

According to Forbes, COVID accelerated the development of e-commerce by 4 to 6 years. As a result of the pandemic, all physical sellers are launching their own e-commerce sites. It is therefore vital to stand out from the crowd in order to optimise your revenues. Jamstack can make this difference, it allows you to be at the top of the search results pages which brings better traffic, and it guarantees better performance, which influences the user experience and therefore the association with the brand.

Furthermore, opting for the Jamstack brings a real saving in development time thanks to the use of third-party services, but also a reduction in costs due to its efficiency and the low maintenance required post development.

The buzz around Jamstack and e-commerce is so intense that Shopify has just decided to remove its commissions for the first million dollars of annual revenue. This gives many merchants the opportunity to get into e-commerce: this may be the perfect opportunity to get started 🚀

Raising a testing trophy

Cynthia HENAFF — Fri, 24 Jul 2020 13:56:14 +0000

Originally published at henaff.io

I'm a front-end developer and I work in a web agency. I love this job because I have the opportunity to develop many projects from scratch and therefore continuously learn new development concepts.

But I'm often working on 3 or 4 projects at the same time, so it's hard to keep up with each one of them.

Moreover, I lose a lot of time processing feedbacks made either by my product owner or customers. This could be avoided by making testing an essential part of the development cycle. It would allow us to avoid some tiny bugs which cost time to the developer, product owner and client. At the same time, it would help us detect side effects in our codebase caused by the development of new features. Ultimately, we want to avoid clients seeing regressions in the application at all cost!

Simply put, what are our problems:

Bugs are evil
Clients don't like bugs
Our reputation is at stake
Regressions are hard to detect
Lot of review and bug reports to handle
Time is lost

Clients without a technical background often don’t get the importance of automated tests. They are keener to pay for features that have a visual impact. I understand this point of view, but I think testing our web and mobile applications is crucial because it's a small investment compared to the future earnings. The final user shouldn't undergo bugs and we shall guarantee the best experience possible.

So, I decided to give you a brief introduction of React application testing.

Types of tests

Static Test

Static tests are performed without executing the code but just by reading it. This includes typing your code with TypeScript or Flow and linters like ESLint or other similar tools.

These helpers are easy and fast to set-up and allow you to catch typos and type errors continuously while developing the application.

Unit test

According to Wikipedia, a unit test is

a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use.

Not clear, right?

To simplify, we are testing one function in isolation from the rest of the code. Doing so, if you have a function that is supposed to convert a timestamp into a duration, your test checks that you always receive a correct output when calling it. For this kind of test, the most commonly used library is Jest.

This sort of test is rather quick and suitable for testing functions but not an application as a whole.

Integration test

Integration tests happen at a higher level, the idea behind this test is to render one or several components and to simulate requests API (mocking) and check that components are working well together. These are the main tests for an application because it insures the global behaviour as well as the synergy between components. I think that these are harder to apprehend than unit test because it's very hard to determine what we should be testing. They are also time-consuming and rather hard to set up. To write integration test the most commonly used combination of libraries is Jest and React Testing Library.

End to End test

End-to-end testing simulates the behaviour of a real user browsing through your app. It emulates clicks in order to test some flows (like login), which can be critical and generate some bugs. For a web agency like us, this sort of test speeds up the sprint review by product owner and clients, allows us to test feature like password reset and some flows developed during the first sprint and never tested ever since. Thus, it is very good for detecting regressions. E2E test is easy to set up but tedious to write and maintain. However, Cypress makes this process a lot more enjoyable.

Towards the trophy

The three most common forms of testing when it comes to automated testing are Unit, Integration and End-to-End.

Above is a combination of Martin Fowler testing pyramid and Google’s testing pyramid, put together by Kent C. Dodds. This pyramid shows these 3 common forms of testing with 2 metrics: the time to set-up and the cost (in terms of time and resources). At the top, the test (here end-to-end) is very slow and costs a lot to set up. And at the bottom, the test is faster to set up and costs fewer resources. So if we follow this method, mainly it is necessary to do unit testing and a few other tests.

But tools have changed beyond the assumption in Martin's original Testing Pyramid concept. Static test is very quick to set up and unit test should be used parsimoniously whereas Integration test is the main subject of testing react applications. Therefore, Integration tests should have a bigger spot in the diagram than Static and Unit Tests. Finally, E2E test is sparely used and reserved for specifics workflows. This is why Kent C. Dodds introduced the testing trophy.

// Detect dark theme var iframe = document.getElementById('tweet-960723172591992832-673'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=960723172591992832&theme=dark" }

In this trophy we have a scale of cost, time and complexity. Here again, the more you climb up the trophy, the costlier and slower the tests are to write and maintain. Tests placed atop the trophy are more tedious to write but bring more confidence that everything works as expected.

This slide from the Testing React and Web Applications workshop by Kent C. Dodds recaps this idea.

Everything can be summed up by a simple tweet by Guillermo Rauch, Vercel CEO 👇

// Detect dark theme var iframe = document.getElementById('tweet-807626710350839808-862'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=807626710350839808&theme=dark" }

At Tymate, our back-end developers have been accustomed to integrating unit and integration testing into their development process for some time. But in the front-end, we had different issues to address. Unlike the APIs that can be tested endpoint by endpoint, the functionality of our applications often involves multiple interlocking logics, which are often themselves API-dependent.
The Testing Trophy helped us a lot building our front-end testing policy without losing more time than necessary.

Have you also had to set up tests in your company from scratch? Do you have any tips to share?

tl;dr: Efficiency of each type of test

Easily build a connected temperature and humidity sensor

Cynthia HENAFF — Mon, 02 Mar 2020 15:31:14 +0000

To monitor the temperature of the main room or the baby bedroom, you can create and develop your own connected temperature sensor easily.

We will create a connected temperature sensor by following these steps. To achieve this, we will use an esp8266 and 2 shields.
The ESP8266 is a microcontroller like an Arduino but with an integrated Wi-Fi module.

A shield is a board that can be added to the main board to expand its features. The shields have the advantage of being extremely easy to set up and use.
For now, 20 shields are available for the esp8266 D1 Mini.
So we can create many IoT projects easily by clipping the shields on top of each other and with little code to write.

Things used in this project

An ESP8266 Wemos D1 mini. It's the main mini Wi-Fi board.
A SHT30 Shield. It's the temperature and humidity sensor module. I advise you to take the V2 because it is much more precise and is not impacted by the heat from the ESP8266. For this article, I will use the V1 of the module.
An OLED display Shield. It's a screen that will allow us to display the temperature

Requirements

The latest version of the Arduino IDE
Add the ESP8266 board : Add this url https://arduino.esp8266.com/stable/package_esp8266com_index.json on Arduino/Preferences/Additional Boards Manager URLs Install the ESP8266 on board manager Tools/Board/Board Manager
Add this libraries with Tools/Manage Libraries: Adafruit_SHT31 Adafruit_SSD1306 BlynkSimpleEsp8266

Change the configuration on Tools:

Board : LOLIN(WEMOS) D1 mini lite
Port: /dev/cu.wchusbserial… for Mac
Upload Speed: 921600
Click on Serial Monitor

Step 1 - Read the temperature value

For the time being, we're going to connect the SHT30 shield on top of the ESP8266. With the following code, we're going to get the room temperature and humidity back into the console every four seconds.

#include "Adafruit_SHT31.h"

Adafruit_SHT31 sht30 = Adafruit_SHT31();

void setup() {
  Serial.begin(9600);

  while (!Serial)
    delay(10);
  // will pause until serial console opens

  Serial.println("SHT30 test");
  if (! sht30.begin(0x45)) {
    Serial.println("Couldn't find SHT30");
    while (1) delay(1);
  }
}


void loop() {
  float t = sht30.readTemperature();
  float h = sht30.readHumidity();

  if (! isnan(t)) {  // check if 'is not a number'
    Serial.print("Temp *C = "); Serial.println(t);
  } else { 
    Serial.println("Failed to read temperature");
  }

  if (! isnan(h)) {  // check if 'is not a number'
    Serial.print("Hum. % = "); Serial.println(h);
  } else { 
    Serial.println("Failed to read humidity");
  }
  Serial.println();
  delay(4000); 
  // wait 4 seconds before coming back into the loop
}

With the following code, we're going to get the room temperature and humidity back into the console every four seconds.

Step 2 - Show a message on the screen

Let's connect the OLED display shield on top of the ESP8266 and post a simple message.

#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(-1);

void setup() {
  Serial.begin(9600);

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  
  // initialize with the I2C addr 0x3C (for the 64x48)

  // set the text size and color
  display.setTextSize(2);
  display.setTextColor(WHITE);
}

void loop() {
   display.setCursor(0,0);
   display.println("Hello");
   display.display();
   delay(1000);

   display.clearDisplay();

   display.setCursor(0,24);
   display.println("World");
   display.display();
   delay(1000);

   display.clearDisplay();
}

We now know how to display a text and how to clear the screen.

Step 3 - Show the temperature on the screen

Now that the temperature value can be read and a text displayed on the screen, for the next step, we will display the temperature and humidity values.

#include "Adafruit_SHT31.h"
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(-1);

Adafruit_SHT31 sht30 = Adafruit_SHT31();

void setup() {
  Serial.begin(9600);

  if (! sht30.begin(0x45)) {
    Serial.println("Couldn't find SHT30");
    while (1) delay(1);
  }

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  
  // initialize with the I2C addr 0x3C (for the 64x48)

  // set the text size and color
  display.setTextSize(2);
  display.setTextColor(WHITE);
  display.clearDisplay();
}

void loop() {
   float t = sht30.readTemperature();
   float h = sht30.readHumidity();

   display.setCursor(0,0);
   display.sprintf("%.1fC", t);

   display.setCursor(0,25);
   display.printf("%.0f%%\n", h);

   display.display();
   delay(5000);

   display.clearDisplay();
}

Step 4 - Connect to Blynk app

Having the temperature and humidity value is good but it is not very practical to consult them. So we will connect our temperature sensor to the Internet in order to post data on the cloud and get it back on an application we will build with Blynk.

Blynk is an application free for small applications such as ours. It's the most popular IoT platform to connect your devices to the cloud and to design our application easily.

You can follow this link for detailed explanations on how to create a new project in the application.

➡️ http://docs.blynk.cc/#getting-started-getting-started-with-the-blynk-app

#define BLYNK_PRINT Serial

#include "Adafruit_SHT31.h"
#include <Adafruit_SSD1306.h>
#include <BlynkSimpleEsp8266.h>

Adafruit_SSD1306 display(-1);

Adafruit_SHT31 sht30 = Adafruit_SHT31();

char auth[] = "BLYNK_API_KEY";
char ssid[] = "WIFI_NAME";
char pass[] = "WIFI_PASSWORD";

void setup() {
  Serial.begin(9600);
  Serial.println("Starting");

  // connect to the WiFi
  Blynk.begin(auth, ssid, pass);

  if (! sht30.begin(0x45)) {
    Serial.println("Couldn't find SHT30");
    while (1) delay(1);
  }

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

  display.setTextSize(2);
  display.setTextColor(WHITE);
  display.clearDisplay();
}

void loop() {
   // start blynk
   Blynk.run();
   float t = sht30.readTemperature();
   float h = sht30.readHumidity();

   display.setCursor(0,0);
   display.printf("%.1fC", t);

   // send the temp value on the virtual pin 1 (V1)
   Blynk.virtualWrite(1, t);

   display.setCursor(0,25);
   display.printf("%.0f%%\n", h);

   // send the humidity value on the virtual pin 2 (V2)
   Blynk.virtualWrite(2, h);

   display.display();
   delay(5000);

   display.clearDisplay();
}

Now you can configure your application on Blynk by setting 2 labeled value as on the following pictures.

You can have a little fun with the modules offered in the application. On mine I made a graph that represents the values of temperature and humidity.

Congratulations, you have made your connected temperature sensor. 👏

Originally published at https://henaff.io.

How to install Matomo on Ubuntu 18.04

Cynthia HENAFF — Wed, 26 Feb 2020 12:48:11 +0000

Matomo is an open-source web analytics platform. It is a great alternative to Google Analytics. This platform offers you 100% control of yours and your users’ data.

You don’t need to install Matomo to see what it can do for you. Let’s take a quick tour around the demo site at demo.matomo.org

The open-source self-hosted Matomo can show the following reports:

Top keywords and search engines, referrals, social media.
Top pages URLs, page titles, user countries, providers, operating systems, browsers shares, screens resolutions, desktop vs. mobile.
Engagement (time on site, pages per visit, repeated visits).
Top campaigns, custom variables, top entry/exit pages, downloaded files, and many more.
Classified into four main analytics report categories – Visitors, Actions, Referrers, Goals/Ecommerce (30+ reports).
Statistics email reports.
Web server analytics logs.
Tools to comply with GDPR (such as cookie consent)
Install free or premium plugins to extend and expand the functionality of Matomo.
And more features.

You can check the Matomo features page, for the full list of features.

I’ve chosen to self-host my own Matomo for these benefits:

Full control of data. Data is only stored on your server, and you can choose which country the server is located in.
No data limits. You can hold as much data as your server can fit.
Fully customisable and extensible.
Firefox started blocking cross-site tracking cookies, including Google analytics. By hosting the analytics software under your own domain name, you tracking cookies won’t be blocked.

Required services

The latest PHP 7.x release
MySQL 5.7+ for your database
Nginx Webserver

Create MySQL database

Install PHP and MySQL.

sudo apt-get update 

sudo apt-get install --no-install-recommends php php-fpm php-curl php-gd php-cli php-mysql mysql-server php-xml php-mbstring

Connect to your MySQL database.

mysql

Create a database for Matomo. Replace matomo_db_name with your database name.

mysql> CREATE DATABASE matomo_db_name;

Create a user called matomo. Replace strong-password with your strong secured password.

mysql> CREATE USER 'matomo'@'localhost' IDENTIFIED BY 'strong-password';

Grant this user matomo the permission to access your matomo_db_name database.

mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, INDEX, DROP, ALTER, CREATE TEMPORARY TABLES, LOCK TABLES ON matomo_db_name.* TO 'matomo'@'localhost';

Grant this user matomo the FILE global privilege.

mysql> GRANT FILE ON *.* TO 'matomo'@'localhost';

Exit MySQL.

exit

Install Matomo

Install unzip.

sudo apt-get install unzip

Get the latest version of Matomo and unzip it.

sudo wget https://builds.matomo.org/matomo.zip && unzip matomo.zip

Move matomo directory to /srv/.

sudo mv matomo /srv/matomo/

Change the ownership of Matomo directory.

sudo chown -R www-data:www-data /srv/matomo/

NGINX

Get NGINX.

sudo apt-get install nginx

Create NGINX configuration file.

sudo nano /etc/nginx/conf.d/matomo.conf

Insert the following lines in the configuration file. Replace analytics.example.com with the domain you would like to use to access your Matomo installation.

server {
  server_name analytics.example.com;
  root /srv/matomo;
  index index.php index.html;
  access_log /var/log/nginx/matomo_access.log;
  error_log /var/log/nginx/matomo_error.log;

  client_max_body_size 100M;

  location ~ ^/(index|matomo|piwik|js/index|plugins/HeatmapSessionRecording/configs)\.php {
    include /etc/nginx/fastcgi_params;
    fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }

  location ~* ^.+\.php$ {
    deny all;
    return 403;
  }

  location / {
    try_files $uri $uri/ =404;
  }

  location ~ /(config|tmp|core|lang) {
    deny all;
    return 403;
  }

  location ~ /\.ht {
    deny all;
    return 403;
  }

  location ~ js/container_.*_preview\.js$ {
    expires off;
    add_header Cache-Control 'private, no-cache, no-store';
  }

  location ~ \.(gif|ico|jpg|png|svg|js|css|htm|html|mp3|mp4|wav|ogg|avi|ttf|eot|woff|woff2|json)$ {
    allow all;
    expires 1h;
    add_header Pragma public;
    add_header Cache-Control "public";
  }

  location ~ /(libs|vendor|plugins|misc/user) {
    deny all;
    return 403;
  }

  location ~/(.*\.md|LEGALNOTICE|LICENSE) {
    default_type text/plain;
  }
}

Test your NGINX configuration, restart it and add it to boot services.

sudo nginx -t
sudo systemctl restart nginx
sudo systemctl enable nginx

SSL certificate

Install Certbot.

sudo apt-get install certbot python-certbot-nginx

With Certbot, you can generate a SSL certificate (thanks to LetsEncrypt) by running this command:

certbot --nginx -d analytics.example.com

Configure Matomo

Go to your domain, here analytics.example.com. If everything is installed correctly, you should see the Matomo Installation Welcome Screen. Follow the steps.

System Check

Matomo will check your installation to make sure that your server meets the Matomo requirements. If everything is okay, you’ll see a long list like this:

If there is a problem, Matomo will identify it and tell you how to solve it, as in this example:

MySQL Database Setup

For the database setup, use the following credentials:

Database Server : 127.0.0.1
Login: matomo
Password: <YourStrongPassword>
Database Name: matomo
Adapter: PDO/MYSQL

Super User

Now you should create your super user. This user has the highest permissions. Insert your username, password and email. Do not lose those; it is the only way for you to log in to Matomo for the first time

Setup Your First Website

Enter the name and URL of the first website you want to track. You can add more websites once the installation is complete.

Install the JavaScript Tracking Tag

Matomo will generate a JavaScript tag for you. This code must appear on every page that you want Matomo to analyze. It's recommended that you paste this code immediately before your closing tag.

For Gatsby sites, you could use the gatsby-plugin-matomo

Add this line to your gatsby.config file.

plugins: [
 {
   resolve: 'gatsby-plugin-matomo',
   options: {
     siteId: 'YOUR_SITE_ID',
     matomoUrl: 'https://analytics.example.com',
     siteUrl: 'https://YOUR_LIVE_SITE_URL.COM'
   }
 }
]

Congratulations

You have installed your self hosted Matomo Web Analytics. Now you can perform a wide range of functions, including tracking goals and placing orders online.

Originally published at https://henaff.io.

How being a crypto-currencies addict led me to develop my own bot

Cynthia HENAFF — Fri, 14 Feb 2020 10:58:12 +0000

The world of crypto-currencies is a world that moves very fast and very impressively. So I create a bot who allows to get the values of any currencies in real time.

I got interested in crypto-currencies in 2018 and bought Ethereum and Ripple to get started.
The world of crypto-currencies is a world that moves very fast and very impressively. Sometimes within an hour the exchange rate of a currency can be completely reversed.

From my first investment, I became obsessed with this one. I wanted to see if I was earning or losing money and especially I wanted to see which currencies were going up. I needed a platform that would gather information and values of the currencies, and that would keep me informed every hour of the important variations of the currencies.

So I had fun creating CryptoShark and creating a channel where it publishes the course of crypto-currencies hourly.

CryptoShark is a bot available on Telegram.
It allows you to get the values of any crypto-currency in real-time in US dollar and Euro. All the data is fetched on Coin Market Cap, the world's most trusted source for crypto market.

You can ask the bot for any currency by sending a command (starting by /) with the name (or symbol) of the cryptocurrency you are interested in.
For example, for the Bitcoin you can send /BTC or /bitcoin, for the Cardano /ADA or /cardano.

Here are the other commands available:

/top10 - Query the market for the top 10 crypto-currencies by market capitalization

/best1h – Top 5 performing currencies in the last hour

/best24h – Top 5 performing currencies in the last 24h

/best7d – Top 5 performing currencies in the last week

/worst1h – Least 5 performing currencies in the last hour

/worst24h – Least 5 performing currencies in the last 24h

/worst7d – Least 5 performing currencies in the last week

For the crypto-currencies addicts, CryptoShark publishes every hour on a channel the values of the top 5 crypto-currencies and the 5 best performing currencies on the last hour.

Curious? To try it, it's this way ➡️ t.me/cryptoshark_channel

CryptoShark is now available on Product Hunt, if you wish to support and encourage me in new projects you can upvote for it here https://www.producthunt.com/posts/cryptoshark

Originally published at https://henaff.io

How I hacked my cats with an Arduino

Cynthia HENAFF — Wed, 05 Feb 2020 19:19:16 +0000

Build an automatic laser pointer for cat for 5€

I have three cats and I love them… and they love chasing the uncatchable dot of a laser pointer. Playing with my three cats takes a lot of time and sometimes I don’t have much time for them 😿
I asked myself, why couldn’t my cats play with their favorite game on their own? Because it requires a human presence. So I decided to give them this opportunity and automated this process.

I built a laser turret for my cats, programmed to move randomly and connected with Wi-Fi.

I decided to use an esp8266 D1 mini because I think it’s awesome! It’s like an Arduino but it has a Wi-Fi module which allows to connect all your projects to the Internet. It’s small, cheap (2€) and compatible with the Arduino IDE.

It allowed me to connect to Blynk. Now I can launch it remotely and program it with desired time and duration.
Blynk is a free Platform with iOS and Android apps to control boards such as the Esp8266, Arduino, Raspberry Pi over the Internet. It’s really simple to set up and have a working app in less than 5 minutes.

My Blynk app

To build your awesome Laser Cat, you need:
To build your awesome Laser Cat, you need:

A cat
A turret
2 Servo motors SG90. One for each axis ( X and Y).
A laser module
An Esp8266 D1 mini

Here is my electronic diagram.

The “X” servo is attached to pin D5 and the “Y” servo to pin D6 and powered in 5V.
The laser module is attached to pin D7 which allows to power it in 3.3V.
⚠️ Powering the laser module in 5V could hurt cat eyes.

The code is open source and available on GitHub (don’t forget to add a ⭐️).
https://github.com/cynthiahenaff/catLaser

Enjoy your cat.