teleren/devto huggingface dataset:
Update data from IndexedDB
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 18:11:51

To update an existing data in the database, the `put(item, key)` method is used. However, if the requested data doesn't exist, this method creates it and inserts it in the _Object Store_. This method returns the `key` of the stored object as a result.

The method used has two parameters, the first is the object to update or insert, and the second parameter is optional and refers to the `key` of the object, this last parameter is only necessary when an autoincrement value is used as the key of the stored objects, since if it is not specified a new object will be created with an automatically generated key.

To update, usually the `get(key)` method is first used to get the stored object, then the necessary properties are updated, and finally the `put(obj)` method is used with the new object.

```jsx
function updateStudent(key){
    const objectStore = db.transaction('students')
                          .objectStore('students');

    const request = objectStore.get(key);

    request.onsuccess = ()=> {

        const student = request.result;

        // Change the name property
        student.name = 'Fulanito';

        // Create a request to update
        const updateRequest = objectStore.update(student);

        updateRequest.onsuccess = () => {

            console.log(`Estudent updated, email: ${updateRequest.result}`)

        }
    }
}

updateStudent('andres@andres.com');
```
PardusMuzik
Tags: nrkdrk, java, pardus, turkishos
Published: 2022-01-04 18:49:53

Pardus Müzik Uygulaması Milli işletim sistemimiz olan Pardus için geliştirilmeye başlanmış açık kaynak kodlu bir projedir.


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

Github [Adres](https://github.com/nrkdrk/PardusMuzik)
Android-Horizontal-Picker-Lib
Tags: nrkdrk, android, java
Published: 2022-01-04 18:46:37

Android-Horizontal-Picker-Lib Github


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

Github [Address](https://github.com/nrkdrk/Android-Horizontal-Picker-Lib)
Kotlin – Android’in Yeni Resmi Programlama Dili

Tags: nrkdrk, android, kotlin, programming
Published: 2022-01-04 18:43:28

Google her yıl düzenlediği I/O etkinliğinde bu sene biz Android geliştiricilerine bir süpriz yaptı. 17-19 Mayıs tarihleri arasında düzenlenen I/O 2017 etkinliğinde Android için yeni bir programlama dilini tanıttı. Bu dil JetBrains firmasının geliştirmiş olduğu Kotlin Programlama dili.Bu dil aynı java gibi JVM (Java Virtual Machine) üzerinde çalışabilen bir dildir. Yani bir defa yaz her platformda çalıştır mantığıyla çalışmaktadır.

[Adres](http://nrkdrk.blogspot.com/2017/07/kotlin-androidin-yeni-resmi-programlama.html)
Statik ve Dinamik Programlama Dillerinin Farkları

Tags: nrkdrk, programming, algorithms
Published: 2022-01-04 18:42:52

Statik Programlama Dilleri
Statik programlama dili nedir onu açıklayarak başlayalım. Statik programlama dili, her değişken tipinin önceden belirtiliyor olmasıdır. Yani string bir değer tanımlıyorken başına string, sayi tanımlıyorken int, double, float gibi tipleri yazıyoruz. Bu nedenle değişken tipleri program henüz çalışmıyorken bile bu tiplerin neler olduğunu biliyor. Bu da program henüz çalışmıyorken bile bir hata yapmışsanız sizi uyarır ve hatayı düzeltmenizi bekler.Ya da daha etkili öneriler sunabilir IDE'ye bağlı olarak.

[Adres](http://nrkdrk.blogspot.com/2017/07/statik-ve-dinamik-programlama.html)
Docker. Communication between Laravel containers
Tags: nrkdrk, laravel, docker
Published: 2022-01-04 18:40:44

I have a project that I am trying to develop with a microservices approach. I prepared the APIs on two separate microservices and completed their tests. When I send a request from container A to container B, I get the error cURL error 7: Could not connect to localhost port 8100: Connection refused. After my research, I couldn't find a solution.

[Address](https://stackoverflow.com/questions/69954303/docker-communication-between-laravel-containers)
MERN developers to create a random project for the portfolio.
Tags: javascript, node, react, mongodb
Published: 2022-01-04 18:34:52

Hi, my name is Rodrigo. I would like to create a project in collaboration. The project itself could be anything (e-commerce,booking system, etc). The idea is to get together share ideas/connect and at the end if we are lucky we'll have a shiny project to display in our portfolio. 
You can find my portfolio here: http://rodrigohernanlopez.com.ar/
Cheers
First Glance: Lottie Animations
Published: 2022-01-04 18:26:58

The first time I heard lottie animations, I googled it and landed lottiefiles.com. It was unfortunate to land lottiefiles.com, because I missed understanding the whole concept of lottie animations. I thought lottie animations bound to lottiefiles.com but in reality, it was not. Lottiefiles.com is only a showroom, library, and gathering point for designers and developers. The main lottie animations is lottie by airbnb. https://airbnb.design/lottie/

Lottie has basicly two step. Firstly it enables you to convert after effect animations to json with custom after effects plugin(bodymovin). Secondly you can render that json file on web with importing lottie.js. I guess it is better to stick with svg and key frame animations to have best outcome and file size.

Use recent versions of Adobe AfterEffects because running plugins in older versions causes problems like blank window. Also, while learning you might want to look into other people's projects, maybe by downloading AE project files from lottiefiles.com. But older versions of After Effects do not open projects files of newer versions. And there is no other way around it.
Shout out to next-auth
Tags: javascript, webdev, nextjs, oauth
Published: 2022-01-04 18:26:34

For my new project [Tuxedo Mask, hide your E-Mail Address](https://www.tuxm.xyz) I switched to next-auth. And what should I say? That's a library, I realy like. You can clearly say, they had the developer in mind. What did I say? developer? Even my unborn child can configure it. 


**Here an example:**

In this little "game" https://looty.vercel.app, looty the lootbox.

I have this code in the api/auth/[nextauth].js (which is the entrypoint for next-auth):

```js
import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';
import DiscordProvider from 'next-auth/providers/discord';

export default NextAuth({
    providers: [
  
        GithubProvider({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET,
            // https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps
            scope: 'read:user',
        }),
        DiscordProvider({
            clientId: process.env.DISCORD_APP_ID,
            clientSecret: process.env.DISCORD_APP_SECRET,
        }),
    ],
    secret: process.env.SECRET,

    session: {
        strategy: 'jwt'
    },
    callbacks: {
        async signIn({user, account, profile, email, credentials}) {
            return true;
        },
        // async redirect({ url, baseUrl }) { return baseUrl },
        // async session({ session, token, user }) { return session },
        // async jwt({ token, user, account, profile, isNewUser }) { return token }
    },

    theme: {
        colorScheme: 'light',
    },

    debug: false,
});

```

And finally in the _app.js

```js
import {SessionProvider} from 'next-auth/react';
import '../styles/globals.css';

function MyApp({Component, pageProps}) {
    return (
        <SessionProvider>
            <Component {...pageProps} />
        </SessionProvider>
    );
}

export default MyApp;
```

then you can work with useSession for example
```js
import {useSession} from 'next-auth/react'
const {data: session, status} = useSession();
```

And thats mostly it. For this little guy it worked perfectly. `next-auth` has tons of configurations and you can even add your own authentication layer. 

When working with authentication for nextjs please consider to use next-auth and support this project.

They have a lot of providers and you can use your own Database too.

https://github.com/nextauthjs/next-auth
https://www.npmjs.com/package/next-auth

Thanks.
Callback Function
Tags: javascript, programming
Published: 2022-01-04 18:26:21

Call back function is very important for us. Because we are need to use this function regularly.
The defination is callback function - 
When we are passed a function as a argument in another function. When need to call this function , we can just call this argument , and if it is run correctly as a function that is called callback function.
```javascript
const getVar = () => {
   setTimeout(function() {
      console.log('A Function that takes some time');
   }, 3000)
}

const printSomething = () => {
   console.log('Another Function');
}

getVar();
printSomething();
```
ALT 5 Sigma y BankLine anuncian una asociación para llevar la plataforma de activos digitales a los cajeros de Bitcoin

Published: 2022-01-04 17:54:16

ALT 5 Sigma Inc, una fintech global que proporciona tecnologías de próxima generación impulsadas por blockchain para el comercio, la compensación, la liquidación, el pago y la custodia asegurada de instrumentos digitales, anunció hoy que ha formado una asociación exclusiva con BankLine, la única solución bancaria amigable con las criptomonedas que ofrece una cartera de instituciones depositarias redundantes dispuestas a servir a las variadas necesidades de la industria de las criptomonedas.

A través de la asociación, ALT 5 Sigma proporcionará sus productos estrella, ALT 5 Prime Enterprise, ALT 5 Liquidity y ALT 5 Pay. ALT 5 Prime Enterprise es una completa “bolsa de criptomonedas de marca blanca” con la mejor ejecución de precios y una tarjeta Visa/Mastercard de marca diseñada para mejorar la experiencia del usuario y aumentar la retención de clientes. ALT 5 Liquidity ofrece a la industria de los cajeros automáticos de Bitcoin la posibilidad de recibir la mejor ejecución de precios a través de una mesa de operaciones y o a través de una integración completa a través de APIs FIX, mientras que el servicio ALT 5 Pay permite la integración del cripto pago y los tres servicios están disponibles en un despliegue de “marca blanca”.
[leer mas](https://bogotaindependiente.com/)
riesgo e incertidumbres que afectan 
Tags: nextjs
Published: 2022-01-04 17:53:27

Para una descripción más detallada de los factores de riesgo e incertidumbres que afectan a Elektros Inc., consulte los archivos de la Comisión de Valores y Bolsa de la empresa, que están disponibles en www.sec.gov. Elektros, Inc. no asume ninguna obligación de actualizar o revisar públicamente ninguna de las declaraciones prospectivas, ya sea como resultado de nueva información, de acontecimientos futuros o de otro tipo.
[leer mas](https://bogotaindependiente.com/)
El cambio se produce, es una constante de la creación
Published: 2022-01-04 17:44:07

Con una sociedad de ritmo rápido que se complica cada día más. Si esto no forma parte de tu modelo de negocio, ya estás atrasado”, dice Shlomo Bleier, director general de Elektros. “Carpe Diem es nuestro tema. El cambio de paradigma en la sociedad actual se debe a la mentalidad de usarlo, pero no poseerlo. Lo que vemos como una oportunidad. El mercado de los vehículos eléctricos es nuestro objetivo. Elegimos nuestro tema centrado en una Tierra más verde para entrar en este mercado y utilizar nuestro núcleo con los vehículos eléctricos. Estableceremos la curva, seremos pioneros para que otros nos sigan. Elektros Rentals será el primero en alquilar únicamente vehículos eléctricos”.

transformadora. Elektros se propone presentar a los consumidores una experiencia de vehículo eléctrico convincente y completamente nueva a partir de 2023. La empresa tiene previsto presentar su producto a principios de 2022.

Advertencia sobre las declaraciones prospectivas
Este comunicado contiene “declaraciones prospectivas” que incluyen información relativa a acontecimientos futuros y a resultados financieros y operativos futuros. Las palabras “puede”, “podría”, “será”, “espera”, “estima”, “puede”, “cree”, “potencial” y expresiones similares y sus variaciones tienen por objeto identificar las declaraciones prospectivas. Las declaraciones prospectivas no deben interpretarse como una garantía de rendimiento o resultados futuros, y no serán necesariamente indicaciones precisas del momento en que se logrará ese rendimiento o esos resultados. Las declaraciones prospectivas se basan en la información disponible en el momento en que se realizan y/o en la creencia de buena fe de la dirección en ese momento con respecto a acontecimientos futuros, y están sujetas a riesgos e incertidumbres que podrían hacer que el rendimiento o los resultados reales difieran materialmente de los expresados o sugeridos en las declaraciones prospectivas.

Los factores importantes que podrían causar estas diferencias incluyen, pero no se limitan a: las fluctuaciones en la demanda de los productos de Elektros, Inc., la introducción de nuevos productos, la capacidad de la empresa para mantener las relaciones comerciales estratégicas y con los clientes, el impacto de los productos y los precios de la competencia, el crecimiento en los mercados objetivo, la adecuación de la liquidez y la solidez financiera de la empresa para apoyar su crecimiento, y otra información que puede ser detallada de vez en cuando en los archivos de Elektros Inc. con la Comisión de Bolsa y Valores de Estados Unidos. Entre los ejemplos de tales declaraciones prospectivas en este comunicado se incluyen las declaraciones relativas a las ventas futuras, los costes y la aceptación de los productos en el mercado, así como las acciones reguladoras a nivel estatal o federal. ´
[leer mas](https://bogotaindependiente.com/)
Render a pdf in react app
Tags: javascript, react, webdev, tutorial
Published: 2022-01-04 17:43:13

If you want to render a pdf file in a react app, there are different options out there. The one that I recently used and would recommend for beginners is **react-pdf**.

`npm install react-pdf`

For activating links:
`import 'react-pdf/dist/esm/Page/AnnotationLayer.css';`

Check out the script example here:
[https://github.com/Aishanipach/React-pdf-devto](https://github.com/Aishanipach/React-pdf-devto)
Elektros ve la sinergia y el potencial de su entrada en el negocio del alquiler de coches

Published: 2022-01-04 17:43:05

Cada vez hay más gente que opta por no comprar vehículos. Elektros entrará en el negocio del alquiler de coches eléctricos. Con su primer punto de venta en Sunny Isles FL. Elektros marcará la tendencia como la primera flota de coches totalmente eléctricos. Las perspectivas en este campo son enormes. El alquiler de vehículos eléctricos acelerará el ritmo de la familia de líneas de vehículos eléctricos de Elektros. Con la combinación de la construcción, y ahora el alquiler de EVs

Elektros Inc. revela que no sólo diseña, sino que ahora alquila vehículos eléctricos. Junto con la adaptación de su sistema de montaje de carga múltiple pendiente de patente. Elektros está preparada para asumir una mayor responsabilidad social con la llegada del alquiler de vehículos eléctricos. La iniciativa de la energía verde ha provocado un movimiento en todo el mundo. La gente busca ahora alquilar o suscribir coches, en lugar de tenerlos en propiedad.
[leer mas](https://bogotaindependiente.com/)
Kustomer react-native library
Tags: opensource, reactnative, ios, android
Published: 2022-01-04 17:42:15

Our goal at Knock is to make agents the superheroes to their clients and to do all we can to support them along the way. In early 2021 we struck out to simplify communications between Knockstars and agents by meeting the agents where they’re at. We wanted to provide agents real-time contact with Knockstars as well as access to our knowledge base.

With this in mind, Knock opted to integrate with [Kustomer](https://www.kustomer.com/product/) and implement their live chat feature into our web and mobile applications. Kustomer provides native [web](https://developer.kustomer.com/chat-sdk/v2.0-Web/) and mobile SDKs ([iOS](https://developer.kustomer.com/chat-sdk/v2-iOS/)/[Android](https://developer.kustomer.com/chat-sdk/v2-Android/)) out of the box. Our mobile app is built with react-native so it wasn’t easy to consume their mobile SDKs.

_Kustomer integrated under our Support section_ 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e70dc8jbwatwontrrqxf.png)
 
<br>
_Easy access to our FAQ (Knowledge base)_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fv3u8jlto836l7pzvu5.png)
 
For react-native apps to consume native code (Objective-C/Swift, Java/Kotlin) we would have to bridge the native code into Javascript with the help of [NativeModules](https://reactnative.dev/docs/native-modules-intro). To that end, we created [kustomer-react-native](https://github.com/knockaway/kustomer-react-native).

One of the new features in KustomerV2 we were interested in is their support for push notifications. This would allow agents or their customers to start a live chat with Knockstars from our mobile app and stay up to date with new messages without having to keep the app open all the time.

{% youtube yEyZWst-1zI %}

The initial release of this library covers the methods we need for the features described above. As we expand our usage of Kustomer, we expect to expand the coverage of this library.

Help us improve this library by submitting pull requests on the [GitHub](https://github.com/knockaway/kustomer-react-native) repository.
Delete data from IndexedDB
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 17:38:47

The steps to remove objects from an _Object Store_ are similar to when they are [added](https://dev.to/pandresdev/add-data-to-indexeddb-4e6o). First, a _request_ to delete an object is created using the `delete(key)` method, and finally the events are handled as required.


```jsx
function removeStudent(key){
    const request = db.transaction('students', 'readwrite')
                      .objectStore('students');
                      .delete(key);

    request.onsuccess = ()=> {
        console.log(`Student deleted, email: ${request.result}`);
    }

    request.onerror = (err)=> {
        console.error(`Error to delete student: ${err}`)
    }
}

removeStudent('andres@andres.com');
```
## Clear
You can also remove all data stored in an _Object Store_ with the `clear()` method.

```jsx
function emptyStore(storeName){
    const request = db.transaction(storeName, 'readwrite')
                      .objectStore(storeName);
                      .clear();

    request.onsuccess = ()=> {
        console.log(`Object Store "${storeName}" emptied`);
    }

    request.onerror = (err)=> {
        console.error(`Error to empty Object Store: ${storeName}`)
    }
}

emptyStore('students');

```
Keyfessor
Tags: atlashackathon, mongodb
Published: 2022-01-04 17:13:01

### [Link to demo](https://morning-brushlands-04377.herokuapp.com/)

---

### What is this?

Keyfessor is a great app to enhance your typing skills. It is made of 10 texts chosen randomly (a few of them coming from React Docs (turns out they are very typeable :D) in English language.)

You will have the opportunity to test yourself and find out how fast and how accurate you can type. The app includes inmediate feedback with a digital keyboard and sound cues that will let you know if you pressed the right key.

Once you have completed all 10 texts (it should take you around 10 mins) Keyfessor will let you know what's your title. "Keyboard God", "Drunk and Reckless", "Johnny Two Fingers" or "Journalist" are just a few of the possible titles that you could get. There are many more :D.

Last but not least, you will be able to see leaderboard with scores submitted by other typers and of course to submit your score and show off your typing skills.

### Features:

- Speed tracking
- Dark mode enabler
- Accuracy tracker
- Timed laps
- Endgame scoreboard
- Leaderboard
- Endgame title

### Requirements:

- QWERTY keyboard
- Minimum screen width: 800px
- Minimum screen height: 510px

---

![Keyfessor title: Speedy Gonzalez!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eie1rau6ppj9r9xvb8ej.png)
![Endgame stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/towokf44abbfhrqbhtn7.png)
![Keyfessor title: "OMG"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcxtymhmi7vq9gsd4dbv.png)
![Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfdxvjt39u5h9w0kb48d.png)
![Game main screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncum0p59m1fz8t5oyf36.png)

{% vimeo 661973512 %}

---

## Overview of My Submission


### Submission Category: 
Choose Your Own Adventure

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code
{% github https://github.com/mfimia/keyfessor %}

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

### Technologies used:

This is a full-stack MERN application:

The frontend has been built with ReactJS and using components from MUI library.
The backend has been built with NodeJS.
The app connects to MongoDB Atlas database using express and it has been deployed in Heroku

---

### [Link to demo](https://morning-brushlands-04377.herokuapp.com/)

![Type!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3nd213tyze3o5rpijgi.gif)
Grid Area
Published: 2022-01-04 16:59:57

```css
    grid-area: 1/1 / 1/3; 
    /* start->row1 column1 */
    /* end->row1 column3 */
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bsaqa853dl2lwynnig.png)
Variáveis - Ruby
Tags: braziliandevs, ruby, rails
Published: 2022-01-04 16:55:14

## **Variáveis Locais**

As variáveis locais são as mais comuns quando estamos utilizando o Ruby. Para usá-la basta que seja atribuído um valor à variável desejada. Vejam os exemplos:

```ruby
x = 10
=> 10
```

```ruby
name = 'Diego Novais'
=> "Diego Novais"
```

as variáveis possuem seu escopo, por ex. uma variável local exercerá seu papel apenas “no local” onde foi definida.

```ruby
def my_name_is
  first_name = 'Diego'
  last_name = 'Novais'
end
=> :my_name_is
```

Se tentarmos imprimir uma das variáveis fora do escopo do método `my_name_is` teremos um erro:

```ruby
irb(main):010:0> first_name
...
1: from (irb):10
NameError (undefined local variable or method `first_name' for main:Object)
```

## **Variáveis Globais $**

O conceito de variável global é, basicamente, uma referência acessível em qualquer parte da aplicação. Existe uma convenção de nomes onde diz que estas variáveis devem ser iniciadas com $ (cifrão).

```ruby
$version = "1.2.3"
=> "1.2.3"
```

```ruby
defined? $version
=> "global-variable"
```

## **Variáveis de Instância @**

As variáveis de instância são aquelas que **ficam disponíveis para cada uma das instâncias de uma classe**, ou seja, isoladamente em cada objeto. Ou seja, variáveis de instância implementam os atributos de uma classe, ou suas variáveis membro, e, coletivamente, representam o estado de um objeto. São definidas na classe de forma independente dos outros objetos da mesma classe.

Veja o exemplo:

```ruby
class Person
  def initialize
    @name = "teste"
  end

  def speak
    "I'm speaking with you! #{@name}"
  end
end
=> :speak
```

```ruby
person = Person.new
person.instance_variables
=> [:@name]
```

## **Variáveis de Classe @@**

Variáveis de classe são responsáveis por guardar informações em um classe. Armazenam seu próprio estado e são compartilhadas entre todos os objetos e **“atravessam” as heranças entre classes**. Variáveis de classe devem ser iniciadas com @@ (2 arrobas).

Veja o exemplo:

```ruby
class Animal
  @@kind = 'flying'

  def self.kind
    @@kind
  end
end

Animal.kind
=> "flying"

class Duck < Animal
  @@kind = 'walk'
end

Duck.kind
=> "walk"

Animal.class_variables
=> [:@@kind]
```

**Contato:**
Email: contato@diegonovais.com.br
LinkedIn: https://www.linkedin.com/in/diegonovais/
Github: https://github.com/dnovais