teleren/devto huggingface dataset:
How to set up free web analytics with Umami
Tags: webdev, beginners, tutorial, opensource
Published: 2021-11-18 16:51:50

If you want to stay clear of Google but don't want to break the bank, [Umami](https://umami.is) makes web analytics simple and free. It is a self-hosted web analytics solution that you can deploy to Heroku.

Umami is privacy-focused and only collects the metrics you care about. You can view the [live demo](https://app.umami.is/share/ISgW2qz8/flightphp.com) to see it in action.

To get started, set up a free account with [Heroku](https://www.heroku.com/home).

Umami provides great [documentation](https://umami.is/docs/running-on-heroku) on how to complete the manual installation. But there is also a Heroku Button that we can use that requires zero effort.

Go ahead and click the "Button" below, give your app a name and click **Deploy app**. Heroku will take care of the rest of the set up.

[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Better-CF/umami)

*(Although Umami has their own Button in the documentation, at the time of writing, it is not usable for me. I went for the alternative made by Better-CF above.)*

Once the build succeeds, click **Open app** in your Heroku dashboard to get to your Umami instance.

A default administrator account is already set up as **admin** with the password **umami**.

![login page](https://umami.is/login.png)

After you log in and change your password, go to **Settings**, **Websites** and click on the **Add website** button.

![add website page](https://umami.is/add-website.png)

Once you fill out the form and click **Save**, click on the **Get tracking code** button on the **Websites** page.

![get tracking code button](https://umami.is/get-tracking-code.png)

Copy the code and insert it into the `head` section of your website. It looks like the one below:

```html
<script async defer data-website-id="d8402665-41eb-4cda-b520-09dcc62972ce" src="https://your-umami-app.herokuapp.com/umami.js"></script>
```

Go ahead and give your website a visit to see the data immediately appear in your Umami dashboard.

Congratulations! Your website now uses free and open source web analytics.

*(You should note that the Postgres database that stores your data has a limit of 10000 rows for the free tier. Depending on your site traffic, you may need to consider upgrading to a paid tier on Heroku.)*
Flattening a multidimensional array using Javascript
Published: 2021-11-18 16:33:37

So as the title implies let’s see how to flatten an multidimensional array, As we know a multidimensional array looks something like this [[1,2],[3,4],[5,[6,7]]] and we would want to flatten this to something like this [1,2,3,4,5,6,7] since we know the expected output let’s get started.      

  First, we define a function called arrFlatten and declare a variable called flattendArray to store the flattened array. We will be using recursion since it’s an efficient solution for problems like these, inside the arrFlatten. 

We define another function called recurseFlatten , which will loop over every item inside the array and identify if the array item is not an object, This check is added to ensure that we only add a number or string to the flattendArray. If the check returns false we push the array item into the flattendArray and finally return the flattendArray.

Here it the complete code for flattening an multidimensional array
```
const arrFlatten = (arr) => {
        let flattendArray = [];
        const recurseFlatten = (arr) => {
          for (let i = 0; i < arr.length; i++) {
            if (typeof arr[i] === "object") {
              recurseFlatten(arr[i]);
            } else {
              flattendArray.push(arr[i]);
            }
          }
        };
        recurseFlatten(arr);
        return flattendArray;
      };

let multiDimesionArray = [0, [1, 2], [3, 4], [5, 6, [7, 8]]];
 console.log(arrFlatten(multiDimesionArray));
```
¿Es mejor una junta de vecinos online o presencial?, por Communitas

Published: 2021-11-18 16:27:08

Recomendaciones para realizar la junta de vecinos online
Fran Gafforio, CEO y fundador de Communitas, recomienda a las comunidades de vecinos seguir los reglamentos de distanciamiento social dictados por el gobierno nacional y, para que las reuniones virtuales sean legales, sugiere tomar en cuenta algunas consideraciones.

En primer lugar, se debe seleccionar una plataforma de videoconferencia para efectuar la reunión, que puede ser Zoom, Google Meet, Webex. etc.

También deben incorporarse apps como Adminet24h, las cuales permitirán a los vecinos confirmar su asistencia (delegando su voto al Administrador o Presidente, que son los únicos que acuden presencialmente a la reunión) y votar de manera virtual. Luego, hay que convocar a los asistentes con los puntos del orden del día, el objeto de votación y la información relevante para poder votar cada punto.

Durante la junta, los propietarios deberán confirmar su asistencia y, una vez discutidos los puntos esenciales, los participantes podrán votar telemáticamente, expresando así su opinión. Al finalizar la reunión, se realizará un acta con el nombre de los asistentes y un resumen de los puntos discutidos.

Para que las juntas vecinales se desarrollen legalmente, es fundamental realizar los pasos antes mencionados y utilizar un software de gestión como el que ofrece Communitas, que asegure un correcto desempeño de los asuntos generales que se presentan en las comunidades.

Digitalización 3.0 de las comunidades de vecinos con Communitas
Communitas tiene como objetivo simplificar la vida de los propietarios que se enfrentan a entornos cada vez más complejos en sus comunidades. La compañía ofrece un espacio digital 3.0 en el cual podrán gestionar y almacenar, en un mismo lugar, los asuntos administrativos y legales de la comunidad.

En la aplicación de Communitas, se pueden registrar los gastos de la administración y estatutos, organizar de forma más eficiente todos los documentos y llevar un control real del presupuesto y de las actas. Todas estas funciones se pueden realizar desde cualquier lugar, descargando la app online.

Communitas opera presencialmente en Madrid y Almería, pero ofrece un servicio con cobertura nacional a través de sus plataformas digitales. Así es como se convierte en una solución para los propietarios de cualquier parte de España que buscan mejorar las tareas económicas, financieras y fiscales de sus comunidades.

https://despertarandino.com/
HTML <dialog>
Tags: javascript, html, tutorial
Published: 2021-11-18 16:19:12

HTML's `<dialog>` element is a built-in tag to represent a dialog box or modal. It's not just a newer semantic element, it also includes an API and its own special CSS.

### Here's a video using `<dialog>` in action:
<a href="https://www.youtube.com/watch?v=7SQgGxLr5z0" target="_blank">
  <img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1637190457/Msc/html-dialog-cover_1_v0owrg.jpg" />
</a>
### How to use it

To start, we add our `<dialog>` HTML:
```html
<dialog>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
</dialog>
```
This won't yet display any visible content, until we call the dialog's `.showModal()` method:

```js
const dialog = document.querySelector('dialog');

// When we want to open...
dialog.showModal();
```

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1637171628/JS%20Bits/modal-dev-to_mertzi.png"/>

Calling this method will programmatically add the `open` attribute to the element, indicating its state and visibility:
```html
<dialog open>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
</dialog>
```
It will also add a `::backdrop` pseudo-element element with these default styles to dim the content behind the dialog:

```css
dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}
```
If we add a close button, we can hook up an event handler to call the built-in `.close()` method to un-show the dialog and remove the backdrop:

```html
<dialog open>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
  <button id="close">Close</button>
</dialog>

```

```js
const dialog = document.querySelector('dialog');
const btn = document.querySelector('#close');

btn.addEventListener('click', () => {
  dialog.close();
});

dialog.addEventListener('close', () => {
  // Runs after dialog is closed
  console.log('The modal was closed!');
});
```

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1637171969/JS%20Bits/browser_empty_ockj2t.png" />

The document also includes the `close` event which can be leverage to run a custom callback once `.close()` is called.

As of 11/21, support is available mainly for Edge, Chrome, and Safari Technology Preview with greater support emerging soon! 🙂

----------
<b>Yo!</b> I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on [Twitter](https://twitter.com/JS_Bits_Bill), [TikTok](https://www.tiktok.com/@js_bits) and I have a new [debugging course](https://jsbits-yo.com/bug-bash/) dropping soon!
Dunder Data Pandas Challenge Solutions 1–5
Tags: pandas, python, jupyternotebook, datascience
Published: 2021-11-26 17:17:58

---
title: Dunder Data Pandas Challenge Solutions 1–5
published: true
date: 2021-11-18 16:12:27 UTC
tags: pandas,python,jupyternotebook,datascience
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/600/1*l__tgPVJ3sWgwRHLVODmmw.png)](https://medium.com/dunder-data/dunder-data-pandas-challenge-solutions-1-5-9dbf1f736c79?source=rss----c2aa71d9ec41---4)

[Continue reading on Dunder Data »](https://medium.com/dunder-data/dunder-data-pandas-challenge-solutions-1-5-9dbf1f736c79?source=rss----c2aa71d9ec41---4)
Quickly read file or any url in Scala/Java
Tags: scala, java
Published: 2021-11-18 16:07:10

One thing that is missing in Scala/Java standard library is a simple function loading a text file and returning it as a String. Of course this is not a way to deal with big files, but when you just need to load small and simple config file it would be useful.

Luckily, Apache commons provides such a function:

```Scala
import org.apache.commons.io.IOUtils
import java.net.URL

def loadFromUrl(urlString: String): String = {
  IOUtils.toString(new URL(urlString))
}
```
And as a bonus, you can use it for both local files and resources on the web as well.

```Scala
loadFromUrl("file:///Users/foo/conf.json")
loadFromUrl("http://example.com/")
```

If you inspect the code of `IOUtils` you will find that there is proper error handling, that means resources are closed in case of an exception. That part is usually missing in similar quick and simple solutions.

To use this, you need to add the following dependency:
```
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>
```
CodeCom 2021: A Creative Coding Competition
Tags: programming, contest, creativity, fun
Published: 2021-11-18 16:01:00

# 🎉  CodeCom 2021  🖥️
# ━━━━━━━━━━━━━━━━
Join us for our 2nd annual CodeCom, December 1st – 14th. 
You can submit on our Discord Server or on Repl.it using **# codecom**

**1st Place: $20 + choice of Discord Nitro OR Replit Hacker Plan + More**


🥏    **CodeCom**    ⌚️
**━━━━━━━━━━━━━━━━**
Every year we host a large coding competition. Each year the theme is different, but the magic stays the same. The competition is very open-ended, so creativity is front and center. We try to make it accessible to all yet fun for even the most advanced. We try to make things, that most people would never think about making.     🍃      The prizes are great too, a gift card of your choice, for 1st, 2nd, and 3rd places. And it is free to enter!

**We hope to see you soon!**
https://eps.hg0428.repl.co/CodeCom
https://discord.gg/KqhqnHrrZJ
Prisma Data Platform's PlanetScale Integration 
Tags: serverless, programming, devops, webdev
Published: 2021-11-18 15:30:09

As developers, we often want to build faster, but that comes with tradeoffs that we have to deal with in the long run. At PlanetScale, we want to empower developers to be able to build without having to worry about issues of database scalability as their application grows. Similarly, Prisma wants to empower developers to efficiently work with data while making fewer errors. 

PlanetScale and Prisma have partnered up to allow developers to create PlanetScale databases in the new [Prisma Data Platform](https://www.prisma.io/dataplatform). You can have a starter database schema and a live PlanetScale database ready to accept thousands of new database connections with a few clicks.

The [Prisma Data Platform](https://www.prisma.io/dataplatform) provides you with application templates with Prisma data schemas, so you don't even have to think about a data model to get started. Once set up, you can deploy to Vercel immediately or use the Prisma Data Explorer and Query Builder to explore your PlanetScale database.

Try out creating your first [PlanetScale](https://auth.planetscale.com/sign-up) database with one of the application templates and experience the power of [Prisma](https://www.prisma.io/dataplatform) with PlanetScale for yourself.
Install PHP on Mac
Tags: tutorial, mac, php, install
Published: 2021-11-18 15:28:35

Using a Mac for the first time, I faced a problem installing PHP. I would install it over and over, and every time the terminal would tell me that I don’t have PHP on my laptop. Here are the steps I had to follow to be able to install multiple versions of PHP.

## Uninstall PHP

The first step is to update brew before using it to install PHP
```
brew update
brew upgrade
brew cleanup
```
Then you need to check the current PHP installed
```
brew list | grep php
```
Then uninstall all the PHP that the grep return, here is an example :
```
brew uninstall --force php71 php71-apcu php71-opcache php71-xdebug php71-yaml
brew uninstall --force php72 php72-apcu php72-opcache php72-xdebug php72-yaml
brew cleanup
```
Check again with a grep if you have anything related to PHP left :
```
brew list | grep php
```
If it returns nothing, then you are all good. Otherwise, try to uninstall what is left.

Then we want to remove the old PHP configuration :
```
rm -Rf /usr/local/etc/php/*
```
Once everything is clean, you can jump into the PHP installation.

## Install PHP

We start by installing the tap that will
```
brew tap shivammathur/php
```
Then you can install the different versions of PHP you want. I need versions 7.1, 7.2 and 7.3:
```
brew install shivammathur/php/php@7.1
brew install shivammathur/php/php@7.2
brew install shivammathur/php/php@7.3
```
Now you can go in the php.ini of every version and change the options you need like the memory settings, the date.timezone etc… You can find the files of each version here:
```
/usr/local/etc/php/7.1/php.ini
/usr/local/etc/php/7.2/php.ini
/usr/local/etc/php/7.3/php.ini
```
We have installed but not linked these PHP versions. To switch to PHP 5.6 for example, we can type:
```
brew unlink php && brew link --overwrite --force php@7.3
```
Now you can test if you are in the correct version using :
```
php -v
```
If you want to switch versions, use this command :
```
brew unlink php && brew link --overwrite --force php@7.2
```
Don’t forget to check if the version correctly changed:
```
php -v
```

### Sources :
- [uninstall PHP](https://getgrav.org/blog/macos-monterey-apache-upgrade-homebrew)
- [install PHP](https://getgrav.org/blog/macos-monterey-apache-multiple-php-versions)
Managing datasets and models in your Hugging Face organization
Tags: machinelearning, nlp, transformers, mlops
Published: 2021-12-03 08:11:07

---
title: Managing datasets and models in your Hugging Face organization
published: true
date: 2021-11-18 15:27:36 UTC
tags: machinelearning,nlp,transformers,mlops
canonical_url: https://julsimon.medium.com/managing-datasets-and-models-in-your-hugging-face-organization-a663d37ddf01
---

In this video, I show you how to manage models and datasets in your own Hugging Face organization:

- Creating your organization,
- Creating private repositories with the Hugging Face CLI,
- Importing models and datasets with git,
- Editing dataset and model cards,
- Setting permissions for organization members

⭐️⭐️⭐️ Don’t forget to subscribe to be notified of future videos ⭐️⭐️⭐️

{% youtube Bkl7OJYWCBc %}

Dataset: [https://huggingface.co/datasets/reuters21578](https://huggingface.co/datasets/reuters21578)

Model: [https://huggingface.co/juliensimon/autonlp-reuters-summarization-31447312](https://huggingface.co/juliensimon/autonlp-reuters-summarization-31447312)

New to Transformers? Check out the Hugging Face course at [https://huggingface.co/course](https://huggingface.co/course)
Making Functional Google Search Page Clone in HTML and CSS
Tags: html, css, webdev, beginners
Published: 2021-11-18 15:26:57

Hello 👋, I am here again with a new amazing article on the **Making of Google Search Page Clone**

![Clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5y12i573r0ns324cun3.png)
Can you guess, is this Real or Clone page? (Comment down🙂)

So, let's gets started 🥳

- In **index.html**
```html
<div class="container">
        <center>
            <div class="content">
                <img src="assets/logo.png" alt="Google Logo" class="img-fluid google-logo">
                <div class="search-bar shadow-sm mt-4">
                    <i class="fas fa-search icon"></i>
                    <input class="input" type="text"></div>
                </div>
                <div class="buttons"><br>
                    <button class="gBtn">Google Search</button>
                    <button class="gBtn">I'm Feeling Luck</button>
                </div>
                <div class="languages mt-4">
                    <span class="langText">Google offered in: </span>
                    <ul>
                        <li class="languagesInList"><a href="/">English</a></li>
                        <li class="languagesInList"><a href="/">Spanish</a></li>
                        <li class="languagesInList"><a href="/">French</a></li>
                        <li class="languagesInList"><a href="/">عربي</a></li>

                    </ul>
                </div>
            </div>
        </center>
    </div>
```

This was the skeleton structure of the page; It's time to style it 🏳️‍🌈

- In **style.css**
```css
body{
    font-family: arial,sans-serif;
}
.content{
    margin-top: 150px;
}

[contenteditable] {
    outline: 0px solid transparent;
}
.google-logo{
    width: 270px;
}
.search-bar{
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 900px;
}
.icon{
    position: relative;
    left: 15px;
    top: 15px;
    color: #9aa0a6;
    font-weight: 100;
    font-size: 20px;
}
.input{
    background-color: transparent;
    border: none;
    margin-top: 8px;
    margin-left: 25px;
    padding: 0;
    color: rgba(0,0,0,.87);
    word-wrap: break-word;
    outline: none;
    display: flex;
    flex: 100%;
    height: 34px;
    font-size: 16px;
    width: 80%;
}
/* .... */
/* Whole code at https://github.com/snowbit-coderboi/Google-Search-Page-Clone */
```

- For JavaScript code - [Visit the GitHub Repository](https://github.com/snowbit-coderboi/Google-Search-Page-Clone) 

And this is it; You have just made clone of **Google Search Page** 🎉


Check out demo: https://snowbit-coderboi.github.io/Google-Search-Page-Clone

*This page might get updated when you visit the project, so make sure to check out GitHub Repository and star it to save*

GitHub Repository: [snowbit-coderboi/Google-Search-Page-Clone](https://github.com/snowbit-coderboi/Google-Search-Page-Clone)

This was it; Once again congrats for making Google Search Page Clone
Some tips for your first WebComponent
Tags: webcomponents, ts, template, lit
Published: 2021-11-18 15:26:02

---
title: Some tips for your first WebComponent
published: true
description: Over the past few months I have been trying to understand how WebComponents works, its strengths and weaknesses. Here are some tips to keep in mind.
tags: webcomponents, ts, template, lit
//cover_image: https://direct_url_to_image.jpg
---

Over the last year I have been investigating various ways of making WebComponents. In this article I summarise what I have learnt in this process

## 1. Attributes with basic types

A prop is an input that can be added to WebComponents. Whenever possible, I recommend using a basic type: `number`, `bool`, `string` or `number` and avoiding `Array` and `JSON` types, although I understand that this may not be possible at times.

The problem with using an `Array` or `JSON` is that native HTML elements only allow basic attributes and there is no possible way to put an `Array` or `JSON` into an HTML template. Therefore, the only way (that I have found) is to instantiate the WC in the HTML and then reference that element in JS and add the `Array` or `JSON` attribute:

```html
<!-- This won't work -->
<my-element my-prop-array="[1,2,3]"></my-element>
<my-element my-prop-json="{user: 'max'}"></my-element>

<!-- This will work -->
<my-element></my-element>
<script>
	document.querySelector("my-element").myPropArray = [1, 2, 3]
	document.querySelector("my-element").myPropJson = { user: "max" }
</script>
```

Also, it should be noted that I have found that with certain frameworks such as Angular, it is necessary to do a `JSON.stringify(myPropJson)` and in the WC do a `JSON.parse(myPropJson)`, which is not the best process in my opinion.

## 2. Reactive vs static

You have to know the difference between a reactive and a static WC prop:

- Reactive: The value of the variable that is passed to the component and the value of the prop is always the same.
- Static: A copy of the value of the variable passed to the component is created in the prop.

Depending on the framework you want to use, you must indicate what you want.

## 3. Output with events

The way to pass data from a WebComponent to the host is mainly through events. Note that these events may be encapsulated in a `CustomEvent`, where the `detail` attribute will have the value that has been emitted.

## 4. Working with styles

One of the positive aspects that WebComponents bring is the use of the Shadow DOM. This is a big plus point, but on the other hand, being something relatively new, CSS development should be at its most basic. If you try to do something more complex, for example with PostCSS, you might not work or you might have a lot of difficulties.

## 5. Use a template

It is better if you use a template when you start the development of a WebComponent, as these templates are usually configured to do the build as well. I have developed two templates with lit and vite:

- [Github User WC](https://github.com/onmax/github-user-wc)
- [Twind in Lit](https://github.com/onmax/lit-ts-vite-tailwindcss-template)
Summarizing financial news with Hugging Face AutoNLP
Tags: transformers, machinelearning, mlops, nlp
Published: 2021-12-03 08:09:47

---
title: Summarizing financial news with Hugging Face AutoNLP
published: true
date: 2021-11-18 15:25:28 UTC
tags: transformers,machinelearning,mlops,nlp
canonical_url: https://julsimon.medium.com/summarizing-financial-news-with-hugging-face-autonlp-ae3d4454252d
---

In this video, I use [AutoNLP](https://huggingface.co/autonlp), an AutoML product designed by Hugging Face, to fine-tune a model on the Reuters news dataset in order to summarize financial articles.

⭐️⭐️⭐️ Don’t forget to subscribe to be notified of future videos ⭐️⭐️⭐️

{% youtube tBCEhNAjuag %}

Dataset: [https://huggingface.co/datasets/reuters21578](https://huggingface.co/datasets/reuters21578)

Preprocessing notebook and model: [https://huggingface.co/juliensimon/autonlp-reuters-summarization-31447312](https://huggingface.co/juliensimon/autonlp-reuters-summarization-31447312)

New to Transformers? Check out the Hugging Face course at [https://huggingface.co/course](https://huggingface.co/course)