teleren/devto huggingface dataset:
TypeError: event.target is undefined whith Turnstone
Published: 2023-02-13 21:06:39

Hello everyboby i use this input whith Turnstone for de fonction autocomplete. But i this error: TypeError: event.target is undefined. But i am not whith input react. This is a like for Turnstone. 
https://turnstone.tomsouthall.com/

This is my component 

`import { useId } from "react";
import React from 'react'
import Turnstone from 'turnstone'

const styles = {
	input: 'w-full h-12 border border-oldsilver-200 pl-10 pr-7 text-xl outline-none rounded',
	query: 'text-oldsilver-800 placeholder-oldsilver-400',
	typeahead: 'text-crystal-500 border-white',
	cancelButton: `absolute w-10 h-12 inset-y-0 left-0 items-center justify-center z-10 text-crystal-600 inline-flex sm:hidden`,
	clearButton: 'absolute inset-y-0 right-0 w-8 inline-flex items-center justify-center text-crystal-500 hover:text-hotpink-300',
	listbox: 'w-full bg-white sm:border sm:border-crystal-500 sm:rounded text-left sm:mt-2 p-2 sm:drop-shadow-xl',
	groupHeading: 'cursor-default mt-2 mb-0.5 px-1.5 uppercase text-sm text-hotpink-300',
	item: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700',
	highlightedItem: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700 rounded bg-crystal-100',
	match: 'font-semibold',
	noItems: 'cursor-default text-center my-20'
  }


// Set up listbox contents.
const listbox = {
	displayField: 'name',
	data: (query) =>
	  fetch(`https://localhost:8000/livesearch?query=${encodeURIComponent(query)}&limit=10`)
		.then(res => res.json())
  }
  

function TextField({ placeholder, labelTitle, value, onChange, error, name }) {

	const id = useId();

	const handleChange = (event) => {
		onChange(event.target.value);
	}

	return (
	
			<Turnstone id="autocomplete" listbox={listbox} styles={styles} typeahead={false} value={ value } name='ville'  onChange={ handleChange } placeholder="Enter a city or airport"/>

	);
}

export default TextField;`

Thanks for your reponses!
ContentHugging vs. ContentCompressionResistance in UIStackView
Tags: swift, ios, programming
Published: 2023-02-13 20:56:54

In Swift, it is quite common to see ContentHugging and ContentCompressionResistance either when we are using the storyboard or code to render the user interfaces in UIStackView. Those 2 properties determine how a view can automatically adjust its size with the content give, such as dynamic & long text, images and so on.

## 👉 ContentHugging

ContentHugging determines how strongly a view resists increasing its size to fit its content. Which is often used to prevent a view from becoming too large for its content. Let's have a look an example of view within UIStackView:

```swift
// don't let label text field stretch at all
label.setContentHuggingPriority(.required, for: .horizontal)

// let label text field stretch if needed
label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
```

Here, label is an instance of UILable which sits inside a UIStackView.



## 👉 ContentCompressionResistance

ContentCompressionResistance determines how strongly a view resists decreasing its size when there is not enough space for it in the user interface. Similarly as above, this property is often used to prevent a view from becoming too small for its content, example:

```swift
let myView = UIView()
myView.setContentCompressionResistancePriority(.required, for: .vertical)
```

In this example, we are creating a new view (inside a UIStackView) and let its ContentCompressionResistance priority for the vertical axis to .required, meaning the myView will resist shrinking along the vertical axis as much as possible, and it will only shrink if there is not enough space in the user interface for it to maintain its original size.

Notice that: Sometimes we need both properties ContentHugging and ContentCompressionResistance in order to render our views properly depends on the situtation.

## Summary
The general practise rule is that:

* Views that contain text or other important content should have high values for both content hugging and content compression resistance

* Views that are less important or that can be resized without affecting the readability of the content can have lower values.


Ref: https://needone.app/contenthugging-and-contentcompressionresistance/
What is cookies? What is cache?
Published: 2023-02-13 21:05:42

Cookies are small text files that website stores in your browser which contain information pertaining to that website. Each time you return to that website, the data or cookie is sent back to the site.

Cookies may contain:

1. Usernames and passwords
2. Links that you've clicked on
3. Your cart information for buying online
4. Visitor tracking information
5. Your computer's general location in the world
6. Video's you've watched.

Cache
``
The cache is a portion of hard disk space where your web browser stores copies of internet files for re-use.
1. Your computer saves files from sites that you visit online.
2. When you have a cached copy of a website, it will load faster.
Resolvendo problemas no HackerRank: Analisando as notas!
Tags: javascript, beginners
Published: 2023-02-13 21:03:56

Olá, seja bem vindo a mais uma etapa do Resolvendo problemas no Hacker-Rank,nessa sessão iremos resolver a nota de alguns alunos. Veremos agora!

**Grading Students -**

Neste desafio, um professor chamado Sam, gosta de arredondar notas, mas apenas nas seguintes situações:

- A diferença entre a nota e o multiplo de 5 mais próximo, for menor do que 3, arredondar a nota para o multiplo de 5.

- Se o valor da nota for menor ou igual a 38, não arredondar, pois mesmo assim o aluno reprovará.

Vamos ver alguns exemplos práticos passados, tanto para entender o problema, como para efetuar o código posterior.

Exemplo: 

1. Nota = 84.(Arredondar para 85, pois 85-84 é menor que 3)
2. Nota = 29. (Não arredonda, nota menor que 40)
3. Nota = 57. (Não arredonda,(60 - 57 é 3 ou superior)

Então, vejamos a resolução:

```
function gradingStudents(grades) {
    // Write your code here
return grades.map(newGrade => { let rounded = Math.ceil(newGrade/5) * 5;     
  
return newGrade >= 38 && rounded - newGrade < 3? rounded: newGrade; })
}

```

O código acima é uma função que calcula as notas das turmas de estudantes de Sam. A função é chamada `gradingStudents` e recebe como entrada um array de notas, representado por `grades`.

A função utiliza o método `map` para iterar sobre cada elemento do array de notas, calculando uma nova nota para cada estudante. A nova nota é obtida baseada nas leis ditas no início do artigo:

Ele calcula a nota arredondada para cima para o próximo múltiplo de 5, utilizando a função `Math.ceil` e a divisão por 5. E se a diferença entre a nota original e a nota arredondada for menor que 3 e a nota original for maior ou igual a 38, então a nota arredondada é retornada. Caso contrário, a nota original é retornada. Depois a função retorna o map com todas as notas novas alteradas.

O resultado é:

```
75//passou
67//passou
40//passou
33//não passou
```



Com isso,finalizamos mais uma edição. Até a próxima
Adapter Pattern: Adapting Data from the Outside World
Tags: programming
Published: 2023-02-13 20:53:29

Often while building applications we consume data from outside services, and even save parts of it on our end. A very common mistake is adapting your architecture for these services, what you should do instead is **adapt their data**.

On Woovi our application communicates with various different applications from the outside world, also known as 3rd party apps. These applications have their own data modeling and doesn't always fit ours, so we must **adapt their data** to fit **ours**.

This approach have some benefits, such as decoupling. For example if we consume a email provider and then decide to change to another one in the future, rather than restructuring our architecture to fit the new provider, all we would need to do is create a new adapter and everything should stay working.

Another benefit is that it lets us not only learn from others modeling, we can try to evolve them to what we believe is the correct approach.

## The Adapter Pattern​

When consuming data from third party, before saving it to our database, we always run it through an adapter function. This function job is to accept a payload and return a payload for our structure, to avoid losing data, you can choose to save the original payload on a metadata field or something similar.

## Creating an Adapter Function

Creating an Adapter Function is pretty simple, using a very contrived example, let's say we want consume a API for geo location, and save the latitude and longitude that it returns in our database.

In our data, we decided that both the latitude and longitude will be different fields, but when calling this api, it returns both values inside an array instead:

```
latLong: [40.689247, -74.044502]
```

Rather than altering our modeling to also accept an array, all we need to do is adapt this field to ours:

```
const latLongApiToLocation = (payload) => ({
  latitude: payload.latLong[0],
  longitude: payload.latLong[1],
});
```

While this is extremely simple, it makes the data **ours** and we're not dependent of this API, all we would need to do to replace it is create another of these functions, while maintaining the data in the structure we believe in.

---
If you want to work in a startup in its early stages, This  is your chance. [Apply today!](https://woovi.com/jobs/)

---

[Woovi](https://woovi.com/) is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---

Photo by <a href="https://unsplash.com/@alexkixa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alexandre Debiève</a> on <a href="https://unsplash.com/photos/gZdFwcCbXf4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Páginas para Desarrollador 🧑🏻‍💻
Tags: html, css, javascript
Published: 2023-02-13 20:52:45

## HTML:
- https://getlorem.com/es
- https://markup.roppychop.com/
- https://www.toptal.com/developers/htmlshell

## CSS:
- https://animista.net/
- https://animate.style/
- https://mycolor.space/
- https://cssbattle.dev/
- https://cssgradient.io/
- https://encycolorpedia.es/
- https://css3generator.com/
- https://flukeout.github.io/
- https://flexboxfroggy.com/#es
- https://cssgridgarden.com/#es
- https://colorsupplyyy.com/app
- https://rupl.github.io/unfold/
- https://1linelayouts.glitch.me/
- https://www.toptal.com/designers/colourcode
- https://www.toptal.com/developers/css3maker
- https://color.adobe.com/es/create/color-wheel
- https://coolors.co/ddfcad-c8e087-95a472-82846d-646165
- https://www.toptal.com/designers/colourcode/freebuild-color-builder

## JavaScript:
- https://jsoncrack.com/
- https://lenguajejs.com/
- https://javascript.info/
- https://codecombat.com/play

# Icons:
- https://iconos8.es/
- https://ikonate.com/
- https://boxicons.com/
- https://iconmonstr.com/
- https://fontawesome.com/
- https://www.flaticon.com/
- https://ionic.io/ionicons/
- https://fonts.google.com/icons
- https://icons.getbootstrap.com/
- https://es.piliapp.com/facebook-symbols/

# Images:
- https://getwaves.io/
- https://slidesgo.com/
- https://www.canva.com/
- https://app.haikei.app/
- https://unsplash.com/es
- https://www.freepik.com/
- https://freedesignfile.com/
- https://www.pexels.com/es-es/
- https://www.designspiration.com/
- https://pixabay.com/illustrations/
- https://www.toptal.com/designers/subtlepatterns/

# Typography:
- https://www.myfonts.com/
- https://www.fontpair.co/
- https://fonts.google.com/
- https://lingojam.com/CoolTextFonts
- https://www.designermill.com/category/free-fonts/

# Compressor:
- https://tinypng.com/
- https://compressor.io/
- https://www.iloveimg.com/es
- https://www.img2go.com/compress-image

# Documentations:
- https://roadmap.sh/
- https://overapi.com/
- https://www.w3schools.com/
- https://www.toools.design/
- https://es.javascript.info/
- https://books.goalkicker.com/
- https://developer.mozilla.org/es/

# Accesibility & SEO:
- https://caniuse.com/
- https://validator.w3.org/
- https://pagespeed.web.dev/?hl=es
- https://m2.material.io/resources/color/
Páginas útiles de Eventos, Challenges y Ejercicios de Programación 🥷🏻
Tags: challenges, exercises, events
Published: 2023-02-13 20:43:02

## Eventos:
- https://geekle.us/
- https://nerdear.la/es

## Challenges:
- https://www.codementor.io/
- https://codepen.io/alanmartinc
- https://www.frontendmentor.io/
- https://www.freecodecamp.org/

## Ejercicios:
- https://adventjs.dev/es
- https://www.codewars.com/
- https://projecteuler.net/archives
- https://www.w3schools.com/exercises/index.php
Episode 23/06: Q&A with the Angular Team
Tags: angular, webdev, javascript, programming
Published: 2023-02-13 20:41:54

Jeremy Elbourn and Mark Thompson from the Angular team had their monthly Q&A live stream. While implementing chess in Angular, they discussed topics like Angular Material, learning Angular, standalone components, and a hint about something exciting coming up this week.

{% embed https://youtu.be/xIeRDdMumhA %}

In this article, I'd like to present the main takeaways.

{% embed https://www.youtube.com/watch?v=k12AfVnhVc8 %}

## Angular Material & Standalone Components

Angular Material still uses NgModules. There is a challenge in how to deal with multiple imports. For example, in order to use a MatTab, we would have to import multiple standalone elements at once. The Angular team is currently searching for ways on how to improve that.

[Direct Link](https://www.youtube.com/watch?v=k12AfVnhVc8&t=520s)

## Angular Article on Micro Frontends and Module Federation

More than a year ago, there was an announcement about an official Angular article on the usage of Micro-Frontends / Module Federation. Mark was a little bit surprised because he thought that article was already available. But he promised to do a follow-up. So we can hope to get it soon.

[Direct Link](https://www.youtube.com/live/k12AfVnhVc8?t=2089)

## Angular Material Components

Back to Angular Material. Compared with other UI libraries, the amount of components is not overwhelming. Unfortunately, the Angular team is already at its limit when it comes to maintaining the existing ones. So we will not get more components, but the ones we have will keep their high quality.

[Direct Link](https://www.youtube.com/watch?v=k12AfVnhVc8&t=2661s)

## Learning Angular Course

An official video course for learning Angular is in its finishing phase. According to Marc, the recording is done and in post-production. That video course will be a great companion to the existing Tour of Heroes tutorial.

[Direct Link](https://www.youtube.com/watch?v=k12AfVnhVc8&t=3067s)

## New RFC to be published

There was an interesting note from Jeremy. Answering a participant's question about the Input decorator, he said that he didn't want to pre-announce anything, but we should stay tuned to the GitHub repo this week.

Chances are high that we will get some details for the upcoming reactivity improvements in the form of an RFC.

[Direct Link](https://www.youtube.com/live/k12AfVnhVc8?feature=share&t=3151)
SSH - An article by ChatGPT
Published: 2023-02-13 20:29:29

Secure Shell (SSH) is a network protocol used for secure data communication, remote command-line login, remote command execution, and other secure network services between two networked computers. SSH provides a secure and encrypted connection between two systems, which is essential for protecting sensitive data from being intercepted by third parties.

SSH was originally developed as a replacement for Telnet and other insecure remote shell protocols. Telnet sends data in clear text, which means that if someone were to intercept the data being sent, they would be able to read it without any difficulty. SSH, on the other hand, encrypts the data being sent, making it much more secure.

The encryption used in SSH is based on public-key cryptography. The two systems that are communicating with each other each have a public and a private key. The public key is used to encrypt the data being sent, while the private key is used to decrypt it. This means that even if someone were to intercept the data being sent, they would not be able to read it without the private key.

One of the key features of SSH is its ability to authenticate the two systems that are communicating with each other. This is done through the use of a password or a digital certificate. The digital certificate contains a public key and is issued by a trusted certificate authority. This provides an extra layer of security, as it ensures that the systems are communicating with each other and not with a third party.

In addition to its security features, SSH also provides several other benefits. One of these benefits is the ability to remotely execute commands on a remote system. This can be useful for administering a server or performing other tasks on a remote system. Another benefit is the ability to forward network connections. This means that you can use SSH to securely connect to another system and then use that connection to access other systems on the network.

To use SSH, you need to have an SSH client installed on your system. There are many different SSH clients available, including PuTTY for Windows and OpenSSH for Linux and macOS. Once you have an SSH client installed, you can connect to a remote system using its hostname or IP address. You will also need to provide your username and password (or your digital certificate) to authenticate yourself to the remote system.

In conclusion, SSH is an essential tool for secure communication between two systems. It provides a secure and encrypted connection, as well as the ability to authenticate the systems that are communicating with each other. Whether you're administering a server or just need to securely access another system, SSH is a must-have tool for any network administrator.
What means true positives?
Tags: machinelearning, programming, beginners, ai
Published: 2023-02-13 20:28:23

Hello! This is my first post ever and I am not an English speaker so I apologize in advance for any mistakes.

Let me start from a little introduce of myself. I’m Junior Frontend Developer at startup. In my spare time, I read about machine learning/data science and this is the topic of this post.

I was looking for answer to what are true positives, true negatives, false positives and false negatives. I found something with a little help of Google and chatGPT. I decided to write about it because I can better understand it and help you at the same time.

So I found that:
**True positive** - this means that the model has classified a given unit as positive and indeed it is positive
**True negative** - this means that the model has classified a given unit as negative, and indeed it is negative.
**False positive** - this means that the model has classified a given unit as positive, and indeed it is negative.
**False negative** - this means that the model has classified a given unit as negative, and indeed it is positive.

These concepts are used to evaluate the effectiveness of classification models and are important when interpreting the results. Many measures of model quality, such as accuracy, sensitivity and specificity, are based on these concepts.

But now you can ask: **What does it mean that a given unit is positive or negative?**

_An entity can be described as negative or positive depending on whether it meets a given criterion_


Good example is a model that classifies emails as spam or non-spam.
In this case, the unit (email) can be marked as positive if it is spam, or negative if it is not spam.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyfnp30ahq9ql0ql0q94.jpeg)


And this is it! I hope I helped you understand it better.
I would appreciate any feedback 🥳
Companion Object in Kotlin
Tags: kotlin, android, programming
Published: 2023-02-13 20:24:48

Kotlin provides a brand new keyword **companion** which not exists in other programming languages. But don't be panic, it is not something new when you have one step closer. A companion object is considered as a very **special** object that is associated with a class, which many of us will think it is quite similar to a static object in other programming languages.

## Definition of Companion Object
A companion object is defined within a Kotlin class with the companion keyword. Let's take a look at one example to get some impression first.

```kotlin
class CompanionClass {
  companion object CompanionObject {
    val num = 10
    fun getText() = "some text"
  }
}

println(CompanionClass.CompanionObject.num)         // 10
println(CompanionClass.CompanionObject.getText())   // some text
```

In the above example, We can access the property num and method getText() directly via class name without recreating an new instance of the class. Also companion object CompanionObject has the exact same visibility as its outer class, in other words it can be accessed from other places within the same package as the class,
Companion Object in Kotlin
Tags: kotlin, android, programming
Published: 2023-02-13 20:21:55

Kotlin provides a brand new keyword **companion** which not exists in other programming languages. But don't be panic, it is not something new when you have one step closer. A companion object is considered as a very **special** object that is associated with a class, which many of us will think it is quite similar to a static object in other programming languages.

## Definition of Companion Object
A companion object is defined within a Kotlin class with the companion keyword. Let's take a look at one example to get some impression first.

```kotlin
class CompanionClass {
  companion object CompanionObject {
    val num = 10
    fun getText() = "some text"
  }
}

println(CompanionClass.CompanionObject.num)         // 10
println(CompanionClass.CompanionObject.getText())   // some text
```

In the above example, We can access the property num and method getText() directly via class name without recreating an new instance of the class. Also companion object CompanionObject has the exact same visibility as its outer class, in other words it can be accessed from other places within the same package as the class.

A companion object can therefore contain both properties and methods. Just like a standard object, it can be used to store shared data or implement utility functions that can be accessed by all instances of the other classes. e.g. A typical use is to create singletons.

As we all know, there is no static keyword in kotlin. So the other common use case is that companion object is used to created static variable or method.  

More conveniently, we can even ignore the companion object name like this:

```kotlin
class CompanionClass {

    companion object {
        val num = 10
        fun getText() = "some text"
    }
}

println(CompanionClass.num)                         // 10
println(CompanionClass.getText())                   // some text
```

## Summary

Overall, companion objects in Kotlin provide a convenient way to define and access shared data and utility functions related with a class which is similar to the static property and methods in other programming languages.

Ref: https://needone.app/companion-object-in-kotlin/