teleren/devto huggingface dataset:
React acting unpredictably
Tags: react
Published: 2021-03-05 19:31:02

### update: one bug down. i had two identical key props on menu items! those were the ones where react didn't completely re-render...

I joined this community because the frustration level with React has reached the ceiling.

The website I'm working on is a small artist page. 

Sorry, I can't make a minimum reproducible version of the bug. The whole project is here on GH (feel free to grab my physics HTML implementation [warning: matter's Runner doesn't yet shut down upon re-mount, so things fall faster on each menu load])

https://github.com/NeilSentence/galerie-sens

The menu has a bunch of colorful falling blocks in the form of HTML elements that receive their positional data from matter.js.

This menu can be opened by clicking on "menu", or by pressing the Escape key, implemented in a custom hook from src/components/utils/esckey.js.

The latter comes with a crazy bug:

1.1. When you use the EscKey function to open the menu, this only works from the home path (/) and the ones without images. But not from the gallery paths!
1.2. Although each of the paths includes the menu,
1.3. and the mouse click on menu also works (!)

The next issue that I think is really strange is 

2.1 If I open any gallery section except "upcycling" & "oel & sand", and click on a painting (zoomed in view),
2.1.1 and I menu nav to another section, it starts in zoomed out view (correctly)
2.1.2 but if I switch between the abovementioned two, the zoomed in view remains open, only the content is replaced.
2.2.3 Before, it even had an extra messed up zoom factor, but that was fixed by adding numbered "key"-attributes.

3.1 If I navigate to another section, react remembers the previously loaded artwork info object's number, and upon nav, the new gallery section opens at the same image number, not with the first painting

3.2 causing an error when the first gallery section has more images than the next,
3.2.1 and you nav from a higher image obj number than the next has in total (undefined...).

The zoomed in view (einzelbild.js) is a nested component inside bilderwand.js.

I understand that React somehow decides when to re-render a component and when not, but I'm not sure, when and how.

It's cool when things fail and always fail, but this is random.

I've been trying to force re-render and I tried different ways of using state, to no avail.

These bugs almost turn me off from React!

Nothing is predictable or seemingly logically related... :/

Do I need to study how React is built in order to use it?
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-03-05 21:23:35

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Trying out a new cooking recipe ... or whatever else might spark joy ❤️ 

---

Happy Friday!

![Oh yeah!](https://media.giphy.com/media/HBblEmWutaXQY/giphy.gif)
Problems with google analytics
Tags: google, analytics
Published: 2021-03-05 21:15:49

---
title: Problems with google analytics
published: true
description: Google analytics is a great free behavioural analysis tool that is perfectly suited to the needs of small and medium sized businesses, and is even used by some unicorn level companies
tags: google,analytics
cover_image: https://contents.newspicks.com/images/news/4012924?updatedAt=20190630001143
---

Google analytics is a great free behavioural analysis tool that is perfectly suited to the needs of small and medium sized businesses, and is even used by some unicorn level companies.

However, Google analytics is not perfect and when you want to use GA data in depth, you will find many limitations.

* GA's API does not provide raw data at event level or hit level, only aggregated data; this can be solved by purchasing GA360 and bigquery solutions, but it costs at least $15w per year
* GA data has retention and sampling limits, as per rules: https://support.google.com/analytics/answer/7667196?hl=zh-Hans
* Free means your data is used to train Google's ad serving
* dimension and metrics limits, probably API limits of 7 dimensions and 10 metrics

Overall, it means that you don't own the data collected by GA, you can only consume the reports. Sometimes we need to use behavioural data in depth, for example in scenarios such as the following.

* Customised reporting logic
* Integration with existing data platforms, such as taking behavioural data and using it for recommendation systems and search systems
* Developing a CRM system based on behavioural data, such as sending SMS messages to users who have clicked on a product.

I have recently been planning to develop an alternative to Google Analytics to try and solve the problems mentioned above.

The shape of the product is basically established, directly using the GA4 sdk and then configuring the transport_url to achieve the replacement, providing a simple visualisation + custom queries, or docking metabase yourself.

Open source and SaaS versions are available.

Compared to the advantages of local deployment, data is permanently stored in their own servers, do not need to be subject to the GA retention time and sampling rules, and provides the original data, GA, if you get the original data you need to use a paid service, GA360 such, $150k per year, and export to bigquery is also a paid service.

Advantages over other open source Google Analytics alternatives.

Research the existing open source products, such as plausible and umani, are more than 5k star open source projects; are only to provide the basic model of the function, these and GA than still very much worse; such as e-commerce analysis, custom events, multiple subsites, custom dimensions and metrics and other features are not provided.
Mastering the :nth-child CSS
Tags: css, showdev, webdev, styles
Published: 2021-03-05 21:15:03

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

Hello, today I share with you a super web page of documentation on how to use more advanced selectors such as the "nth-child" pseudo-selector:

[Link](http://nthmaster.com/)

The page is very clear and are very good examples to understand and know how to use the css pseudo selectors, because sometimes it is required to give a very peculiar style and not as uniform as usual.

The post is short but it is really useful, I highly recommend it, I used it for one or another project.

Greetings.

<center>
If you liked the content you can support me in:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Want to earn free Bitcoins and Dogecoins? Click on the banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)
Maestro del :nth-child CSS
Tags: css, showdev, webdev, styles
Published: 2021-03-05 21:14:31

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

Hola, hoy les comparto una super pagina web de documentación sobre como utilizar selectores mas avanzados como los es es el pseudoselector "nth-child":

[Link](http://nthmaster.com/)

La pagina es muy clara y son muy buenos ejemplos para poder entender y saber utilizar los pseudoselectores de css, ya que en ocaciones se require que se dé un estilo muy peculiar y no tan uniforme como siempre.

Es breve el post pero es realmente util, lo recomiendo bastante, a mí me servido para uno que otro proyecto.

Saludos.


<center>
If you liked the content you can support me in:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Want to earn free Bitcoins and Dogecoins? Click on the banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)
I wrote an open source alternative to google analytics using timescaledb and rails and opentresty
Tags: timescaledb, redis, postgres, rails
Published: 2021-03-05 21:13:01

---
title: I wrote an open source alternative to google analytics using timescaledb and rails and opentresty
published: true
description: 
tags: timescaledb,redis,postgresql,rails
//cover_image: https://direct_url_to_image.jpg
---

Last time I shared some [thoughts on Google Analytics](https://dev.to/hooopo/problems-with-google-analytics-39l5), I planned to implement a Google Analytics that can be deployed privately, and after months of trying, I finally finished writing the prototype. It's only the simplest of features at the moment, with some killer features to be added later...

Hypercable Analytics is a fully featured high performance scalable, open source, standalone deployable alternative to Google Analytics, build with timescaledb openresty redis and rails.

## screenshot

screenshot ![](https://l.ruby-china.com/photo/hooopo/4da95824-f7d6-4a30-a91b-aa1db73186e3.png!large)

## demo site

* https://learnsql.io (Note: demo project, data will be cleared later, email: hoooopo@gmail.com password: 111111) 
* https://hackershare.dev (site with hypercable analytics tracker installed)
* https://github.com/HyperCable/hypercable


## benchmark

Tested with a 6C cloud server, can handle about 15k rps, can do some more optimizations and compare with open source competitor.

## Some roadmap

* More built-in visual reports
* Built-in metabase-like interface and SQL custom exploration
* UI for e-commerce module (data structures are currently supported)
off the rails!
Tags: beginners
Published: 2021-03-05 20:49:05

Unlike programming, there are no absolute paths in real day to day life. When I finally took my future seriously, I didn't know where to begin or even what I wanted. I couldn't see myself in a 4 year college nor could I see myself doing service jobs for the rest of my life. The one thing I did know is that I love technology and even more so, loved the framework that created it. 
As we age, we usually move on from our "why?" phase, but not in my case. I question everything, needing to know all the little details as to why something works. As it sometimes is a curse, it's most definitely a blessing when learning and writing code. 
As I embark on this journey, I glance at my sticky note attached to my monitor that says "Rylie, future Software Engineer," knowing that one day I could be programming my favorite video game or a program that could change lives.
Learning from Shoveling the Yard
Published: 2021-03-05 20:09:37

# Shoveling Sucks

Living in the northeast shoveling driveways is a known pain. This year I got a small electric snowblower which helped a bit but it's always been a chore. My back aches after, it's cold and wet and often early in the morning so we can get the car out for the day.

## I need a sledding hill!

This year due to travel restrictions it didn't make much sense to take our usual winter vacation out of state. I have a 1yo boy and I wanted to introduce him to sledding. Local tubing places have height restrictions he does not meet. 

After much research I looked out the window and realized I have a pretty good slope in my yard. Just need to pile up some snow. So I took an afternoon and built a curving path with walls so you don't fly out and a big wall at the end to catch you. It was awesome. The baby giggled the whole way down. We spent the next two weeks tubing every day!

## Wait, shoveling is awesome?

Only in later reflection did it hit me: the activity of shoveling in the yard was physically the same as shoveling the driveway, but my mental state was profoundly different. I actually enjoyed it. How could this be? And, if I can deconstruct this phenomenon, could I enjoy shoveling the yard just as much? Or even expand this to apply to other chores I dislike?

## Key differences

**Driveway**
* Needs to be done (no autonomy)
* Known solution (no creativity)
* Same every year (no variety)
* Result is restored ability to drive the car

**Yard**
* I had the idea
* I decided _how_ to form the hill
* I did the work on my time
* I planned out each phase, got creative with the process
* Result is something both I and others enjoy

## Shifting State of Mind

If something is boring, turn it into a game. Maybe next time I'll try to get all the snow in one area and build an igloo.

When my wife pesters me to go shovel I shouldn't take this as a burden, but as a sign of how grateful she is that I'm around to take care of these sorts of tasks. I'm much happier when I'm doing something that I know others will enjoy.
Vue animation state with GSAP
Published: 2021-03-05 20:05:05

Little of theory:
We need to understand first “tweening” and why we use state based animation.

**Tween** (which is something that it use GSAP behind the scene in it's version 3 ) is short for **between**, so if we want to transition smoothly from 1 to 10, we’ll need to consider all the values between them along with all of their decimals. 

By using Gsap we can have this happen automatically.
So we’ll use this concepts to create a state based animation.

This examples comes directly from Vue-mastery, so i don't own anything and this is just for educational purposes.

```ts
<template>
  <div>
    <div :style="{ width: tweenedNumber.toFixed(0) + 'px' }" class="bar">
      <span>{{ tweenedNumber.toFixed(0) }}</span>
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweenedNumber: 0
    }
  },
  watch: {
    number(newValue) {
      gsap.to(this.$data, { 
          duration: 1, 
      ease: 'circ.out',
          tweenedNumber: newValue 
      })
    }
  },
  methods: {
    randomNumber() {
      this.number = Math.random() * (800 - 0)
    }
  },
  created() {
    setInterval(this.randomNumber, 1500)
  }
}
</script>

<style scoped>
.bar {
  padding: 5px;
  background-color: #2c3e50;
  border: 1px #16c0b0 solid;
  min-width: 20px;
}
.bar span {
  color: white;
}
</style>
```

You can look at the example here:
https://repl.it/@eulier1/Gsap

Key features:
 - Watcher, it allows us to watch a reactive value and do things when that value changes.


 - Gsap, on the first parameter we’re passing the data’s option object, to give access to our data and on the second parameter we’re indicating how to animate it.


 - Tween a short for between and allow us to smoothly transition from 1 to 10 along with all their decimals.
Horizontal List with CSS
Tags: codepen, beginners, webdev, 100daysofcode
Published: 2021-03-05 20:00:22

<p>HTML lists can be designed in many different ways using CSS.
Here is the one way to design the list horizontally, to create a navigation menu .
Here we have used the CSS property <strong>float:left </strong>to display a list horizontally and the CSS list-style-type property i.e. <strong> list-style-type: none</strong> by using this property we are simply unmarked the list item.
</p>

{% codepen https://codepen.io/jyotikm1801/pen/YzpOzdz %}
Event loop y call stack
Tags: javascript, spanish, callstack, eventloop
Published: 2021-03-05 19:50:19

# Event loop

El bucle de eventos o event loop es un bucle(?) que verifica continuamente la pila de llamadas o Call Stack para ver si hay alguna función o tarea que deba ejecutarse.

# Call Stack

Call Stack o Pila de llamadas en Javascript es una estructura de datos que registra en qué parte de ejecución del programa nos encontramos.

# LAVEMOS LOS PLATOS SUCIOS

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rbnhy9emqkoqfen9siw.png)

podemos ejemplificar la pila o call stack como una pila de platos sucios, suponemos que tenemos 4 platos sucios, entonces decidimos crear una función por cada plato para que los lave y después los acomode en la alacena:

```javascript
lavarPlato1()
lavarPlato2()
lavarPlato3()
lavarPlato4()

PILA — — — — — — — — — — — — — — — — — — — — — — — — — — — 
LAVANDO Y ACOMODANDO PLATO 4
LAVANDO Y ACOMODANDO PLATO 3
LAVANDO Y ACOMODANDO PLATO 2
LAVANDO Y ACOMODANDO PLATO 1

SACANDO PLATOS PARA COMER:
SACANDO PLATO 4
SACANDO PLATO 3
SACANDO PLATO 2
SACANDO PLATO 1
```

¿Pero… que es lo que acaba de pasar?, lo que acaba de pasar es que ese bucle es como una persona disciplinada que siempre esta haciendo cosas productivas, en este caso se dio cuenta de que tiene 4 tareas para ejecutar en la pila, lo que la llevó a ejecutar la tarea que encontró primero, que fue lavarPlato1(), entones vio que abajo tenía mas platos y siguió ejecutando la tarea que tenia asignada para cada plato hasta que ya no había platos en la pila, o ya no había pila(?).

Pero más tarde tuvo que sacar los platos para servir la cena, y primero sacó el plato 4, luego el 3… hasta llegar al último plato que es el 4.

¿Medio banal el ejemplo, no? Pero si lo pensamos como una pila de platos podemos deducir varias cosas, el event loop es un bucle que verifica el call stack o pila de llamadas de ejecución, y si encuentra una tarea para ejecutar la ejecuta, luego puede encontrar varias más adentro de esa pila por lo procede a ejecutar las demás, una vez que termina empieza a eliminarlas de la pila, empezando por el último que llego. Este es la famosa frase“El último en llegar es el primero en salir”, hasta que la pila queda vacía, al igual que la alacena cuando sacamos todos los platos :)

Así de simple lo entendí, y todo esto gracias a grandes personas que tomaron su conocimiento y su tiempo para que yo lo pueda entender, así que abajo voy a dejar la “Bibliografía” o referencias para que ante cualquier duda puedan consultarlo por ustedes mismos.

[¿Qué diablos es el bucle de eventos? — Phillip Roberts](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

[La pila de ejecución(Call Stack) de Javascript — La Cocina del Código](https://www.youtube.com/watch?v=ygA5U7Wgsg8)
Remove AzureRm before installing Az module
Tags: azure, azurerm, powershell
Published: 2021-03-05 20:23:01

---
title: Remove AzureRm before installing Az module
published: true
date: 2021-03-05 19:50:00 UTC
tags: azure,azurerm,powershell
canonical_url: https://basvo.github.io/azure/azurerm/powershell/2021/03/05/remove-azurerm-before-installing-az-module.html
---

Installing the `Az` module on a machine that already contains `AzureRm` is not supported.

![image-20210305203623990](https://basvo.github.io/assets/image-20210305203623990.png)

There are a couple of steps needed to remove `AzureRm`. I will describe them below. We should first execute the following commands:

```powershell
uninstall-module Azure
uninstall-module AzureRM

```

Then we should check if any modules remain by using the following command:

```powershell
Get-Module -ListAvailable | Where {$_.Name -like 'AzureRM.*'}

```

This will probably give a result like this:

![image-20210305203939231](https://basvo.github.io/assets/image-20210305203939231.png)

Remove all the remaining modules for `AzureRM` by using the following command:

```powershell
$Modules = Get-Module -ListAvailable | Where {$_.Name -like 'AzureRM.*'}
Foreach ($Module in $Modules) {Uninstall-Module $Module}

```

Now we can try installing the `Az` module again:

```powershell
if ($PSVersionTable.PSEdition -eq 'Desktop' -and (Get-Module -Name AzureRM -ListAvailable)) {
    Write-Warning -Message ('Az module not installed. Having both the AzureRM and ' +
      'Az modules installed at the same time is not supported.')
} else {
    Install-Module -Name Az -AllowClobber -Scope CurrentUser
}

```
Why is Python so popular despite being so slow?
Published: 2021-03-05 19:45:15

Why is Python so popular despite being so slow?
Speed is only important when you’re writing something that’s very computation-intensive or will be run many many times. For one-off jobs, or other jobs where speed of execution isn’t really important, speed of development becomes much more important.

Why is python so popular despite being so slow
Python is a more semantically powerful, high-level language than faster languages, which makes it much quicker and less painful to develop in. It’s for the same reasons that it’s so semantically powerful that it’s so slow: it must be interpreted because the language is too dynamic to be statically compiled. There is a trade-off among programming languages between speed of execution and convenience of development, and for many projects the former is more important while for many the latter is more important. Python probably won out over the other high-level/scripting languages because it also happens to be a very elegant.

Also, Python has many many libraries available for it, many of which are written in C, which means you can do many things that are very CPU-intensive using Python at the helm. (Of course, the extensive base of libraries available is another reason why Python is such a useful language to code in, but the fact that Python is an elegant language probably explains why it gained the momentum that results in so many libraries being written for it in the first place.)
There is also PyPy, which speeds up Python execution by several hundred percent by just-in-time compiling it.
I guess it’s just cheaper to throw more servers at it than it is to code in and maintain, say, C or C++. Or maybe it’s that at typical server speeds internet bandwidth, hard drive access, etc. becomes a bottleneck before actual code execution does. Just speculation, though, I don’t know much about it.

Being fast really matters. As somebody said in her talk, "Users really respond to speed."

A major problem for the future is datasets keep getting bigger and at a rate much faster than memory bandwidth and latency improves. I was speaking to a hedge fund tech guy at the D language meetup last night about this. His datasets are maybe 10x bigger than 10 years ago, and memory is maybe only 2x as fast. These relative trends show no sign of slowing - so Moore's Law isn't going to bail you out here.. He found that at data sizes for logs of 30 gig Python chokes. He also said that you can prise numpy from his cold dead hands as its very useful for quick prototyping. But, contra Guido, no Python isn't fast enough for many serious people, and this problem will only get worse. It has horrible cache locality, and when the CPU has to wait for memory access due to the data not being in the cache you may have to wait 500 cycles

Original: <a href="https://exceed-team.com/tech/why-is-python-so-popular-despite-being-so-slow">Why is Python so popular despite being so slow?</a>
My Gatsby portfolio
Tags: gatsby, tailwindcss, netlify, portfolio
Published: 2021-03-05 19:37:48

Just finished my web portfolio, used this as an opportunity to explore new technologies like Gatsby, Sanity.io, TailwindCss and Netlify.

All those technologies are awesome and fun to work with, I'm really happy that decided to go this route 😃

Check it out and let me know what you think 😄

https://rijad.dev