teleren/devto huggingface dataset:
How to Add Commento (or other Comments) to Gatsby
Tags: webdev, gatsby, comments, javascript
Published: 2021-04-29 17:13:01

---
title: How to Add Commento (or other Comments) to Gatsby
published: true
description: Learn how to add commento or comments to your Gatsby blog.
tags: ['webdev', 'gatsby', 'comments', 'javascript']
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jyoqkgrx4cxrgobfo3v.png
---


Recently, I wanted to add comments to by Gatsby site. I found this open source sysetem (Commento), although I did sign up for the paid version to support open source :D.

Original post here: https://koalatea.io/gatsby-add-comments/

Anyway, I wanted to add this to my site. After signing up, I was given the follow code snippet.
```html
<script defer src="https://cdn.commento.io/js/commento.js"></script>
<div id="commento"></div>
```

The system is supposed to automatically recognize the page and only pull comments for that. So, I just needed to add this to a page and it should work, however, that did not work for me. 

This could be because of the caching I used on Gatsby, but I believe this is because of how React Handles it. To solve this, I created a Comment Component to manually inject the script.

```js
import React, { useEffect } from 'react';

const Comments = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://cdn.commento.io/js/commento.js';
        script.async = true;

        const comments = document.getElementById('comments-container');
        if (comments) comments.appendChild(script);
    }, []);

    return (
        <>
            <div id="comments-container"></div>
            <div id="commento"></div>
        </>
    );
};

export default Comments;
```

I have a file called `post.jsx` which is used as a template to render post. In that file I add the following, and comments are added to each page.

```
<Comments />
```
I made a tool to automatically remove old versions in App Engine 🧹
Tags: googlecloud, appengine, cloudrun, showdev
Published: 2021-04-29 17:05:36

If you use App Engine to deploy your applications, you know that you can only deploy 200 versions and then you must remove a few before you can deploy again.

A few weekends ago thanks to the brand new [Google Cloud Event trigger for Cloud Run](https://cloud.google.com/eventarc) I develop a simple app to remove old versions every time a new deployment is completed.

In the repository, you can find all the necessary steps to get it up and running so you can forget about removing old versions of App Engine 🎉.

Any issue or pull request with improvements is welcomed!

{% github SantiMA10/app-engine-version-cleaner %}

Cover photo by <a href="https://unsplash.com/@inkyhills?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Callum Hill</a> on <a href="https://unsplash.com/s/photos/cleaning?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
PHP 8.1 On New Heights With Amazing New Additions 🎉
Tags: php, news
Published: 2021-04-29 17:04:37

## PHP Improvements

PHP is on a roll lately and spoiling us with some amazing additions. On PHP 8.0 there were additions like Union Types which helped us set more complex static types, JIT with big performance improvements, named arguments and these are just a few.

Now PHP is adding Enums, Array unpacking with string keys, and Fibers driving the language to new heights.

## What are those enums and why should i care?

To those who aren't aware enums (enumerations) are used when a variable is supposed to take a specific range of values. Until now if you wanted to create an enum-like type in PHP you would have to directly use static variables or associative arrays like below:

```php
class Car
{
    static $carState = [
        "RUNNING" => "RUNNING",
        "STOPPED" => "STOPPED"
    ];

    private float $_speed = 0;
    private string $_name;
    private string $_state;

    public function __construct(float $speed, string $name, string $carState)
    {
        $this->_name = $name;
        $this->_speed = $speed;
        $this->_state = $carState;
    }
}
```

Here we could use the state to determine which types of cars states we have. Most code editors would type-hint the types when we pressed Car::$carState. 

Do you see the issue with that? The class has no idea if you actually used the types that we have selected! A solution to this would be to simply manually check in the constructors or in setters if the variable that is passed has the appropriate values. But you probably agree that this sucks, and can lead to more bugs than we should have to handle.

Enums are here to solve this issue.

```php
<?php

enum CarTypes {
    case running;
    case stopped;
}

class Car
{
    static $carState = [
        "RUNNING" => "RUNNING",
        "STOPPED" => "STOPPED"
    ];

    private float $_speed = 0;
    private string $_name;
    private CarTypes $_state;

    public function __construct(float $speed, string $name, CarTypes $carState)
    {
        $this->_name = $name;
        $this->_speed = $speed;
        $this->_state = $carState;
    }
}
```
by using this new built-in data type we can automatically skip all the checks and let enum do it for us. Neat!

## What about fibers?

Fibers are utilizing 'green threads' to create virtual parallelism. While the computer is busy doing work in controllers or fetching data from database fibers helps regulate the traffic between those actions. 

According to the RFC:
>The Fiber API is not expected to be used directly in >application-level code. Fibers provide a basic, low-level >flow-control API to create higher-level abstractions that >are then used in application code"

This means that you will probably not use Fibers in your production code but will rather use them with the help of frameworks that utilize them like ReactPHP. 

to see all changes of PHP 8.1 visit the following website
[https://stitcher.io/blog/new-in-php-81](stitcher.io)
CSS tiene planes para ti - Polaroid funcional con CSS y JavaScript
Tags: css, polaroid, codenewbie, spanish
Published: 2021-04-29 16:37:05

Cuando acabé el bootcamp tenía ganas de hacer cosas, no sabía qué cosas, pero cosas. Me pasé varias semanas enganchadísima a Hackerrank y sus retos de código: los primeros días es un tormento (al menos para mí lo fue), pero poco a poco vas cogiéndole el punto, vas ganando medallitas, te sueltan confetti para celebrar tus avances y es un mundo de fantasía del que no quieres salir.

Pero un día por algún motivo entré en Codepen, descubrí la pestaña de "trending" (esa pestaña para mí ahora mismo es un pozo donde tiro horas del día al nivel "lupa de Instagram"), y vi la primera Polaroid hecha en CSS. Aluciné. Y después de alucinar me apunté lo de la polaroid para que no se me olvidara hacerla algún día con tanto alucine.

Total, que esta semana me encontré un pen de hace meses con una prueba rápida de cómo abrir la cámara y sacar fotos utilizando HTML y JavaScript y, aun siendo millennial y junior y todo, me di cuenta de que era el momento perfecto para intentar LA POLAROID (siento el grito, de alguna forma tenía que enfatizarlo después de la chapa introductoria).

![CSS Polaroid screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi18kydeuj2m1mjwcqwg.png)

A parte de estar tremendamente emocionada con esta creación por el resultado final en relación a mis expectativas, tengo que decir que ha sido uno de los proyectos CSS más agradecidos que he hecho hasta el momento. Obviamente me ha llevado su buen tiempito (demasiados detalles en la foto para tan poca experiencia en CSS), pero para nada ha sido la tortura que me había imaginado.

Tanto es así que me he permitido el lujo de volver a hacer una cheat sheet con las partes que me resultan más complicadas o "difíciles de simplificar":


![CSS Polaroid cheat Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik161u7123xluiqn93oe.jpg)


Dejo por aquí el link a Codepen donde está todo el código que he usado para hacerla: https://codepen.io/martreyz/pen/ExNvbGd

Cualquier feedback (si es con amor o gatos) es bien recibido! :)
How to move a file or folder to trash in Java?
Tags: java
Published: 2021-04-29 17:01:57

You can move a file or a folder to trash/ recycle bin in java using the below code:

`Desktop.getDesktop().moveToTrash()'

Here is a demo:

https://fullstackdeveloper.guru/2021/04/29/how-to-move-a-file-folder-to-trash-recyclebin-in-java/
How to integrate SpringBoot with Bootstrap and JQuery
Tags: springboot, jquery, bootstrap
Published: 2021-04-29 16:28:08

https://grokonez.com/java-integration/integrate-springboot-bootstrap-jquery

How to integrate SpringBoot with Bootstrap and JQuery

<strong>Bootstrap</strong> is the most popular front-end framework, includes: HTML, CSS, and JavaScript. So the the tutorial, <strong>JavaSampleApproach</strong> will guide you through the steps of integrating <strong>SpringBoot</strong> and <strong>Bootstrap</strong> + <strong>JQuery</strong> with 3 approaches:

– Manually download Bootstrap
– Include Bootstrap from a CDN
– Use WebJars

Related articles:
- <a href="https://grokonez.com/spring-framework/spring-boot/integrate-jquery-ajax-post-get-spring-boot-web-service">How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/http-angularjs-spring-boot">How to integrate Http Angularjs with Spring MVC | Spring Boot</a>

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: 1.5.1.RELEASE
- Bootstrap framework
- JQuery
<h2>II. Practice - SpringBoot with Bootstrap and JQuery</h2>
<em>Create a simple <strong>SpringBoot</strong> project, using <strong>Ajax JQuery</strong> to get messages from server, then shows it on <strong>Bootstrap Modal</strong> view.</em>

<strong>Step to do</strong>
- Create SpringBoot project & install Bootstrap
- Create a Thymeleaf Html page
- Create a simple RestController
- Create a simple Ajax GET 
- Run & Check results
<h3>1. Create SpringBoot project & install Bootstrap</h3>
Open <strong>Spring Tool Suite</strong>, on main menu, choose <strong>File->New->Spring Starter Project</strong>, add project info, then press <strong>Next</strong> for needed dependencies:
- For <strong>Template Engines</strong>, choose <strong>Thymeleaf</strong>
- For <strong>Web MVC</strong>, choose <strong>Web->Web</strong>

<img src="https://grokonez.com/wp-content/uploads/2017/05/Spring-Boot-Twitter-Bootstrap.png" alt="Spring Boot Bootstrap - dependencies" width="675" height="186" class="alignnone size-full wp-image-5042" />

Open <strong>pom.xml</strong> file to check dependencies:

https://grokonez.com/java-integration/integrate-springboot-bootstrap-jquery

How to integrate SpringBoot with Bootstrap and JQuery
Spinning donut
Tags: donut, spin, code, c
Published: 2021-04-29 16:24:07

This is a spinning donut, you do not use javascript or python for it like other YouTubers tell you to, you use the coding language c

the code is :
k;double sin()
  
       ,cos();main(){float A=
       0,B=0,i,j,z[1760];char b[
     1760];printf("\x1b[2J");for(;;
  ){memset(b,32,1760);memset(z,0,7040)
  ;for(j=0;6.28>j;j+=0.07)for(i=0;6.28
 >i;i+=0.02){float c=sin(i),d=cos(j),e=
 sin(A),f=sin(j),g=cos(A),h=d+2,D=1/(c*
 h*e+f*g+5),l=cos      (i),m=cos(B),n=s\
in(B),t=c*h*g-f*        e;int x=40+30*D*
(l*h*m-t*n),y=            12+15*D*(l*h*n
+t*m),o=x+80*y,          N=8*((f*e-c*d*g
 )*m-c*d*e-f*g-l        *d*n);if(22>y&&
 y>0&&x>0&&80>x&&D>z[o]){z[o]=D;;;b[o]=
 ".,-~:;=!*#$@"[N>0?N:0];}}/*#****!!-*/
  printf("\x1b[H");for(k=0;1761>k;k++)
   putchar(k%80?b[k]:10);A+=0.04;B+=
     0.02;}}/*****####*******!!=;:~
       ~::==!!!**********!!!==::-
         .,~~;;;========;;;:~-.
             ..,--------,*/

###I do not take credit for any of this. The guide is here https://www.a1k0n.net/2011/07/20/donut-math.html this may not work due to dev.to's markdowns
CGN3 - Cloud Gaming Notes Episode 3 - Inventory and Economy
Tags: architecture, gaming, gamedev, azure
Published: 2021-04-29 16:20:30

![Cloud Gaming Notes — Inventory and Economy (With screenshot from Sea of Thieves)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyd5udg5b6f9tt2dl27e.jpg)

**This post was originally published on Wed, Apr 7, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/inventory-and-economy/).**

Ever thought about what it takes to host a game in the Cloud? Well, this is the series for you! On the first Wednesday of every month, we explore Cloud Concepts that impact your journey to a connected multiplayer gaming experience! In this second session, we’ll play Sea of Thieves and talk about building an inventory system and economy that powers certain games like MMORPGs or open world games like Sea of Thieves.

{% youtube iAvvrTDPUeQ%}
27 - The Compute Resource Consolidation Pattern (Optimise for Cost!)
Tags: architecture, cost, microservices, azure
Published: 2021-04-29 15:56:52

![27 — Compute Resource Consolidation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue77jbndyopd0h07rbns.jpg)

**This post was originally published on Fri, Feb 19, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/compute-resource-consolidation/).**

Have you deployed your application in a way that it needs compute dedicated for each instance? Perhaps you have an app which could be deployed as a Software as a Service/multi-tenanted app, but still have a deployment per tenant? Well, find out how the Compute Resource Consolidation Pattern could be saving you cost in this episode of Cloud With Chris. This is another episode in the series of Architecting for the Cloud, one pattern at a time.

{% youtube XzBmJvu6gpQ%}
Dead simple State Management with Stoxy
Tags: react, javascript, typescript, webdev
Published: 2021-04-29 16:18:55

## What

Stoxy is a new, modern, reactive state management system for web applications.

It's a small, dependencyless, extensible set of functions to create stateful features for you web app, and even persist them through sessions.

## How

Stoxy requires no setup. After the install with 

```bash
npm install @stoxy/core
```

You don't need to hassle with reducers, nor any initial state objects, you can immediately start writing stateful applications.

```javascript
import { write } from '@stoxy/core';

const userData = {
    userName: "Stoxy",
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

write("userData", userData);
```

Persisting objects through sessions can be done on a per-key basis with a single command

```javascript
import { persistKey } from '@stoxy/core';

persistKey('userData');
```

Reading data through the promise based API is made simple too:

```javascript
read('shoppingcart').then(shoppingCartItems => {
    shoppingCartItems.map(item => console.log(item));
});
```

There are multiple user-tailored functions at your disposal for more specific actions too. Read more about them [at the docs.](https://stoxy.dev/docs/)

## Where

Stoxy can be run anywhere, with any framework. Even with no framework at all.

Currently Stoxy ships with element mixins for Web Components and hooks for React/Preact.


**Read more about Stoxy at the site: [Stoxy.dev](https://stoxy.dev/)**

Stoxy just reached 50 stars in Github. [Join the stargazers at GitHub!](https://github.com/stoxy-js/stoxy/stargazers)
CGN2 - Cloud Gaming Notes Episode 2 - Matchmaking Services
Tags: architecture, gaming, gamedev, azure
Published: 2021-04-29 16:18:12

![Cloud Gaming Notes — Matchmaking Services (With screenshot from Halo 5)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xf0o56cqw5plfpxjbhk.jpg)

**This post was originally published on Wed, Mar 3, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/matchmaking-services/).**

Ever thought about what it takes to host a game in the Cloud? Well, this is the series for you! On the first Wednesday of every month, we explore Cloud Concepts that impact your journey to a connected multiplayer gaming experience! In this second session, we'll play some Halo and talk about matchmaking services and how ensuring a resilient service is crucial to an end gamer's experience.

{% youtube A2DEBT8HL6k %}
26 - The Pub Sub, Priority Queue and Pipes and Filter Patterns
Tags: architecture, azure, messaging, integration
Published: 2021-04-29 15:55:36

![26 — The Pub Sub, Priority Queue and Pipes and Filter Patterns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoojbdx7vl5dg37ozqyf.jpg)

**This post was originally published on Fri, Feb 12, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/priority-queues-pipes-filters/).**

Ever wondered how complex integration systems / enterprise messaging works? Curious about whether there’s a way to bypass and prioritise certain messages? Then join this episode as Chris Reddington and Will Eastbury explore the Priority Queue and Pipes and Filter patterns. Spoiler — These aren’t new cloud design patterns, and are well known patterns in the messaging world!

{% youtube bDIob2h1F9U%}
Extractive Q&A With Haystack and FastAPI in Python
Tags: python, deeplearning, machinelearning, datascience
Published: 2021-04-29 16:04:56

{% youtube 2tdLYIKPafc %}

In this video we work through building an extractive Q&A stack using Haystack, and embedding it within a FastAPI instance in Python.

We use the BERT transformer for our reader model, alongside Elasticsearch and the BM25 retriever algorithm.
Welcome into the world of my brain blog!
Published: 2021-04-29 16:01:29

I’m not really sure how I start this first blog, or the given title for my first blog into the technical world - I didn’t want this to be called ‘my first blog’ but here we are...

## How I started my technology journey
This is a strange one, I started my technical journey back in 2008 when I left high school, I have to admit, I didn’t perform the best, but my story gets better! I decided to start my career with an apprenticeship in IT, the fact of I didn’t want to be stuck in a classroom for the next couple of years of my life didn’t appeal to me; I took this opportunity at a local secondary school where I learned the basics of client needs and business goals.

Skip forward 10 years and I’m now working as a Senior DevOps Engineer at Flutter Entertainment (originally Pokerstars, but now within the International Sports Division) where I’m placed within a software team on a greenfield project, I started with a Platform Team but soon exhausted my boundaries with that team.  I cannot believe how fast I have matured, learned, failed, and matured over the past years to get into this position - I finally feel like it’s my time to share my stories, struggles, hints and tips, guides, Dev & Ops challenges along with other tech related things.  I’m hoping I can share real-world examples to technology rather than those ‘here is a basic setup + example config’ guides you see scattered around the web - Still, watch this space!
29 - The Sidecar and Ambassador Patterns
Tags: architecture, api, azure, security
Published: 2021-04-29 15:59:52


![29 — The Sidecar and Ambassador Patterns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdbupsskrmdxh4y3qtfi.jpg)

**This post was originally published on Fri, Mar 12, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/sidecar-and-ambassador/).**

Have a need to update a legacy application to use cloud concepts such as retry, circuit breaker or other features? Then the ambassador or sidecar patterns may be for you! Join Peter and Chris as they continue their journey exploring Cloud Design Patterns. In this session, they discuss the Sidecar and Ambassador Patterns.

{% youtube 6-pQKhIYbEU %}
28 - Intro to Landing Zones
Tags: architecture, azure, governance, networking
Published: 2021-04-29 15:58:15

![28 — Intro to Landing Zonez](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uii82jv612twbx8s89fk.jpg)

**This post was originally published on Fri, Feb 26, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/intro-to-landing-zones/).**

Heard about something called a Landing Zone, and think you need a helicopter ready to use it? Not quite! In this session, Chris is joined by Karim Fahmy as they discuss an introduction to Azure Landing Zones and how they underpin some of the core cloud foundations (e.g. governance, networking, core infrastructure and more) to enable a successful cloud deployment.

{% youtube HLgljLsK79E%}
Railway FBP v1.0.3 is released  🎉
Published: 2021-04-29 15:54:35

Railway FBP v1.0.3 is now released and introduce Ip Strategy that allow sequencing the order of processing Ip.
This is useful to get a granular control of your asynchronous Job. You can then decide to prioritize witch Ip should be processed by define a strategy.

[https://github.com/darkwood-fr/railway-fbp/releases/tag/v1.0.3](https://github.com/darkwood-fr/railway-fbp/releases/tag/v1.0.3)
25 - A conversation on Mental Health
Tags: mentalhealth, health, people, wellbeing
Published: 2021-04-29 15:53:52

![Cloud with Chris Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xea3wl8co4ylrpcvmuuh.png)

**This post was originally published on Tue, Feb 9, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/a-conversation-on-mental-health/).**

Mental Health — A concept that often has stigma surrounding it, or a concept that is misunderstood. In this episode, Chris Reddington is joined by Andrew Nathan as they both talk through their own experiences of Mental Health, the importance of looking after your mental health, and being okay with not being okay.

{% youtube he2x6QgbVSk%}
24 - Health Endpoint Monitoring Pattern (Monitor your service and its dependencies!)
Tags: architecture, monitoring, azure, microservices
Published: 2021-04-29 15:52:50

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk0ptekvb7j66tib4iys.jpg)

**This post was originally published on Fri, Jan 29, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/health-endpoint-monitoring-pattern/).**

Have you ever seen one of those status pages that returns healthy when all is good, but unhealthy when there is a problem with even one dependent service? Probably on a cloud service health dashboard? Well tune in to this episode as we talk about the Health Endpoint Monitoring Pattern and how you can design a health check to achieve the same for your own cloud deployment!

{% youtube 8aY1ZvZproY%}
23 - Gatekeeper and Valet Key Patterns - Secure your APIs and Resources
Tags: architecture, api, azure, security
Published: 2021-04-29 15:51:34

![23 — Gatekeeper and Valet Key Patterns — Secure your APIs and Resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00zrz5i6qzjq52x0b908.jpg)

**This post was originally published on Fri, Jan 22, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/gatekeeper-and-valet-key/).**

You may have joined Peter and Chris in some of their previous episodes such as the API Economy, The Backends for Frontends & Strangler Pattern, or The Anti-Corruption Layer, Gateway Aggregation and Gateway Routing patterns. They’ll will be continuing our journey talking about API Cloud Design Patterns, as they talk about the Gatekeeper and Valet Key Patterns in this episode of Cloud with Chris. This is another episode in the series of Architecting for the Cloud, one pattern at a time.

{% youtube zM3hJBZu2vA%}