teleren/devto huggingface dataset:
Play around with the data of each record in a Python IDE
Tags: python, productivity, opensource, showdev
Published: 2022-06-29 13:09:25

Hey there once again 😊 We would love to address a cool feature today for all the data science enthusiasts who like to experiment and gain insights from their data. In addition to labeling records with kern, you can explore the data of each record in a Python IDE. The record is pre-defined, and comes with spaCy integration making it easy for customization as per the users needs. Our vision at kern is to provide users with an easy interface and interesting features suited for experimental or research work at rapid speeds. This completely changes the nature of the task which will enable our users to build the best labeling functions.

Check out our website for more information 👉🏼https://www.kern.ai/

Subscribe to our newsletter 👉🏼 https://www.kern.ai/pages/open-source and stay up to date with the release so you don’t miss out on the chance to win a GeForce RTX 3090 Ti for our launch 😉
Gotcha: Starting Jobs inside Transaction
Tags: rails, ruby
Published: 2022-06-29 13:01:51

Starting jobs inside an `Active Record Transaction` can result in unexpected outputs. I've seen this happen multiple times in my career.

Consider an example where we update a model and then send a third party API the updated model 

```
ActiveRecord::Base.transaction do
   david.withdrawal(100)
   mary.deposit(100)
   NotifyUser.perform_later david.id # Job to notify User
end
```
Lets assume that `NotifyUser` sends a user their remaining balance in account.

```
class NotifyUser < ApplicationJob
   queue_as :default
   def perform(user_id)
     user = User.find(user_id)
     ThirdPartyNotifier.notify(user)
   end
end
```


So you run this code in your local and it seems to work just fine. Money is withdrawn and the notification sends appropriate balance of the user. But alas, Later you find a bug in production, and weirdly sometimes the notification is correct, sometimes it not. 

The reason? The job sometimes runs before the transaction can even complete. Since we queue the job inside the transaction, there is a chance that the Job gets picked up before changes are committed to the database. The job then has old data. If you want to make sure the job send incorrect data every time in local add a `sleep(10)` after `NotifyUser`. This will ensure that job gets picked up before the transaction completes.

The fix for this case is quite straightforward. Move the job call outside of the transaction
```
ActiveRecord::Base.transaction do
   david.withdrawal(100)
   mary.deposit(100)
end
NotifyUser.perform_later david.id # Job to notify User
```
Visual Studio breakpoint com condições
Tags: breakpoint, debug, visualstudio, csharp
Published: 2022-06-29 13:00:48

:us: [English version](https://dev.to/felipemsfg/visual-studio-breakpoint-with-conditions-4ln9)

Essa é uma dica simple e rápida, talvez você já conheça, mas eu não conhecia, mesmo após 10 anos trabalhando diariamente com o visual studio e o C#.

Se você já teve que debugar um código que é executado várias vezes buscando avaliar o comportamento do seu código em apenas uma determinada condição, você já precisou de algo como um breakpoint com condições. E como o próprio nome diz, é esse recurso que o VS fornece para nós.

Para exemplificar, fiz um código simples que imprime 10 números aleatórios em um console.

```
Console.WriteLine("Begin");
var rnd = new Random();

for (int i = 1; i <= 10; i++)
{
    Console.WriteLine($"{i}: {rnd.Next(10)}");
}

Console.WriteLine("End");
Console.ReadLine();
```

Se você colocar um breakpoint, como na imagem abaixo, o debug vai parar nele em todas as 10 execuções do loop.

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

Entretanto, você pode querer observar apenas o compotamento do loop quando a variável `i==5`, nesse caso, clique com o botão direito em cima do breakpoint e adicione uma condição.

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

As condições são informada como na linguagem e você pode qualquer variável disponível naquele escopo, nesse caso, estou usando a variável `i`.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5schs19jk2mn7gjc6l.png)

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

Aqui tem um vídeo de exemplo do processo todo.

{% embed https://www.loom.com/embed/8a0910dd9ca84d5892e31128d91c4795 %}

Espero que tenha gostado e se você não conhecia esse recurso, comenta aí.
Visual Studio breakpoint with conditions
Tags: visualstudio, debug, breakpoint, csharp
Published: 2022-06-29 12:59:48

:brazil: [Versão em português] (https://dev.to/felipemsfg/visual-studio-breakpoint-com-condicoes-7gg)

This is a simple and quick tip, maybe you already know it, but I don't, even after 10 years working daily with visual studio and C#, so I decided write about it.

If you've ever had to debug code that takes several attempts to evaluate behavior on just a certain condition, you already needed something like a breakpoint with conditions. And as its name says, VS provides this feature for us.

To exemplify, I made a simple code that prints 10 random numbers on a console.

```
Console.WriteLine("Begin");
var rnd = new Random();

for (int i = 1; i <= 10; i++)
{
    Console.WriteLine($"{i}: {rnd.Next(10)}");
}

Console.WriteLine("End");
Console.ReadLine();
```

If you put a breakpoint, as in the image below, the debug will stop at it all 10 executions of the loop.

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

However, you can must observe the loop behavior just when the condition is `i==5`, in this case, right click on the breakpoint and put your condition.

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

The conditions are specified as in the language and you can use any variable available in that scope, in this case I'm using the `i` variable.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5schs19jk2mn7gjc6l.png)

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

Here is a simple example video of the whole process.

{% embed https://www.loom.com/embed/8a0910dd9ca84d5892e31128d91c4795 %}

I hope you like and if you don't know this feature, comment there.
Help me get familiar with Tailwind CSS
Tags: discuss, javascript, tailwindcss, webdev
Published: 2022-06-29 12:11:19

Hello!

Are you an expert on [Tailwind CSS](https://tailwindcss.com/)? a more casual user or beginner? or simply curious about it like me?
In any case, I'd like your help!

I'm working on a huge new version for [Agrippa](https://github.com/NitzanHen/agrippa), which is essentially an open source tool for generating frontend components without the boilerplate (kind of like supercharged snippets, but even greater 🤩). 
Seeing as Tailwind is already used in many teams today and it's only becoming more and more popular, I thought it could be beneficial to many if Agrippa had first-class support for it - and it's a great opportunity to learn more about a trending tool, too 😄

My immediate question is, therefore, more about the *practical patterns* of tailwind than the idea of it, and most particularly - **in a project that uses Tailwind CSS, what does your typical component look like**? what are your "must-haves" for such a component? is there any boilerplate that could be automatically generated for you, saving you time?

Of course, it wouldn't be interesting to limit the discussion just to that, so let's talk about Tailwind in general:
- What sold you on Tailwind? 
- Which of Tailwind's features do you use most and which do you not use?
- Do you have any tips to share about using it?
- Do you struggle with any of its aspects?

Personally, I always thought Tailwind's alternative method to writing CSS is problematic, and would cause problems down the line in terms of clarity, scalability and maintainability. However, seeing enough talented people in large teams praise it convinced me to reconsider!

I'm really hoping to hear everyone's experiences and bits of wisdom about Tailwind!

If you prefer talking on Twitter, let's [discuss it there](https://twitter.com/NitzanHen/status/1542119288118599680?t=M7rPJUcH24GDCrldpbG_wQ&s=19)!
Or, if you'd like to contribute to Agrippa's effort to support Tailwind directly, we'd love to hear your voice on [our GitHub issue](https://github.com/NitzanHen/agrippa/issues/70)!

Thank you and have a great day!
Javascript Map
Tags: javascript, webdev, web3, react
Published: 2022-06-29 12:08:00

**The array.Map() allows you to iterate over array using loop.**

This method allows you to iterate and modify it's elements using a callback function.

The callback function will then be executed on each of array's element.

Let's see with example:

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

Now imagine you have to multiply each element of array by 3.

Generally you use for loop like this:

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

By using map it will look like this:

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

## How to use Map over Arrays of Object

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

You can iterate as follow

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

## The Complete map() method syntax

The syntax of map() as follows
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib10kda966tirb8z7ele.png)

The  function() is called on each array element, and the map() method always passes the current element,the index of current element and whole array object to it.

**The this arguement will be used inside callback function.**
**By default it's value is undefined.**

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

**Here you can see this value is 80 which is default value **

_Thanks for reading,I hope you have learnt something new
Please like share and comment if it's useful for you guys._
Public IP_ Private IP_ Elastic IP in AWS
Tags: aws
Published: 2022-06-29 11:49:34


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

- In this IP, the machine can be **recognized over the internet**
- The IP must be unique IP (no two machines can have the same Public IP).
- It is used to **communicate between the instance and the internet**.
- When we launch an instance it automatically gets assigned with a public IP from the public address pool.

##Private IP

- In this IP, the machine cannot be recognized over the internet, to connect over the internet we need an internet gateway.
- It is used **within the organizations**.
- The IP must be unique across the private network.
- But two different organizations can have the same private IP.
- It is used to **communicate between the instances in the same VPC**.

## Elastic IP

- When we stop an EC2 instance and again start it the public IP gets changed.
- To fix this public IP issue, we use elastic IP.
- Elastic IP keeps an **IP associate permanently** to the instance public IP.
- We can associate only one instance to an elastic IP at a time.
- We can associate and di-associate the elastic IP.
- We can have only **5 Elastic IPs** in an account.

**Note:** we can increase this by asking AWS to increase with a valid reason

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv86yzu25xbvflwxixum.png)
Kareem Negm passed away
Tags: community, aws
Published: 2022-06-29 11:46:09


Last week AWS community builder lost one of the most ambitious fellows.

I don't know Kareem personally but having a fellow community builder pass away it's sad. May God bless his soul.

![Kareem-Negm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fuizob4x8513r3i2ihq.png)


**Kareem's Community Contributions:**
 
[Kareem's Github](https://github.com/Kareem-negm)


[Kareem's Articles](https://dev.to/kareemnegm)



[Kareem's AI/ML Articles](https://www.kaggle.com/kareem3egm)



[Kareem's Article about PCA stands for Principal Component Analysis](https://www.linkedin.com/pulse/pca-stands-principal-component-analysis-kareem-negm/)



[Kareem's Article about How to Read a Paper in Arabic](https://www.linkedin.com/pulse/%D8%AA%D9%84%D8%AE%D9%8A%D8%B5-how-read-paper-%D8%A8%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A-kareem-negm/)
Atom Family in Recoil for Statement Management — Nextjs
Tags: recoil, nextjs, statemangement
Published: 2022-06-29 11:30:23

Welcome friends. This blog post will teach you how to use the recoil atom family to update the specific atom in recoil state management.

If you understand Hindi, 🥳 this is for you 👇
{% embed https://youtu.be/-qnxakn_RqM %}
If you want to know the basics of recoil
[**Recoil State Managment**](https://medium.com/@nextdevelopment1111/list/e857b44ef332)

### 🤔Situation

When to use atom Family in recoil.

Suppose, you got a project for making a todo app. Now, you have to make a website where you can edit each todo and also create a new todo.

Firstly, you created a website that uses atoms for storing all the todos, and then you used a selector family for changing a specific todo.

Sample Source Code — [https://github.com/nextdev1111/atomfamily-tutorial](https://github.com/nextdev1111/atomfamily-tutorial)

Now, you can use this code in your ide.

### 🤕Problem with this code

There’s a major problem with this code. The problem is that if you update a single todo title, then all the components, which use the atoms will rerender.

![](https://cdn-images-1.medium.com/max/3840/1*nQ2BdAmVlRDDmQzpSTOBYg.jpeg)

This is because, when you change one todo, you ultimately change the whole list which forces all the components to re-render and it takes a lot of power which essentially decreases performance.

### 😍In simple words

In simple words, the atoms family takes a param and changes a **specific item **but atoms don’t take a param and change the **whole atom.**

### 🤔Solution

You can use atomFamily which helps you to edit a specific todo. This is very performant in big sites.

How to use it?

Taking this website as an example, you need to follow these steps:

### Step1: Remove Selectors and Add AtomFamily

First, Delete the selector's folder and their imports.

Go to atoms.ts file and change this
{% gist https://gist.github.com/studywithdesign/5ad0fda8d3e6d0bf2d7e5e16474601c2.js %}
### Step2: Change the index file 

Go to index.tsx file.
{% gist https://gist.github.com/studywithdesign/e30e22eab05bda1cdc8bf4fe34fbf5ab.js %}
### Step3: Change the component — ‘Todo’

Go to todo.tsx file in the components folder.
{% gist https://gist.github.com/studywithdesign/598316344e1b42a0783ceb43ce237088.js %}
If you want to understand more, feel free to message me at
[**Join the Next Dev Discord Server!**]
[https://discord.gg/hN4Wc5VR4M](https://discord.gg/hN4Wc5VR4M)
Learn to build a real-world Vue.js app for FREE at Vue.js Forge this July
Tags: javascript, programming, vue
Published: 2022-06-29 11:26:01

Summer is hotting up more than ever this year with the news that Vue School is bringing a unique event to the Vue community! 

Clear out your schedule on the **13th and 14th of July and join the largest hands-on Vue.js event - [Vue.js Forge](https://vuejsforge.com/)!** 🔥
****

**Vue.js Forge is a hackathon-style event** where you’ll get the chance to **team up with thousands of Vue.js developers** from around the world to **build a real-world SaaS project management application in just 2 days!**


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

During the event you’ll get to work with:

✅ **VueUse**, and discover the power of plug-and-play Vue.js Composables for making common browser API’s reactive

✅ **Vue Router**, and learn how to provide snappy client-side navigation

✅ **Pinia**, and learn the best practices for handling global application data in a modern Vue application

✅ **Nuxt.js 3**, and learn how to power an SEO-friendly marketing site with a simplified development experience and more!

Some of the best experts from the community including **Evan You, Anthony Fu, Jessica Sachs, Alex Kyriakids, Daniel Kelly, Natalia Tepluhina, Maya Shavin, Eduardo San Martin Morote,** and others are providing their guidelines and experience to help you build your own SaaS app with ease!
****

What’s more, after the event is over, **you’ll be able to reuse portions of the application for your own projects later on and have a fine addition to your portfolio that will impress everyone!**

Vue School is giving the opportunity to everyone from the community to **sign up for this event FREE of charge** - so hurry up and **[reserve your free ticket](https://vuejsforge.com/)**! 🚀
RTX 30系顯卡 + TF 1.15
Published: 2022-06-29 11:22:23

30系顯卡終於降價了，來回顧一下怎麼在30系甚至未來的40系的顯卡上繼續使用Tensorflow 1

{% embed https://www.youtube.com/watch?v=Z0tlgLubesA %}
AngularFirestore when clause
Tags: angular, angularfirestor, programming
Published: 2022-06-29 11:11:14

I am trying to create an app wide service for access to Firestore and it works very well , I am impressed with AFS as with one simple service I can access all of my data across the app.

My problem is making a when clause for my data searches and trying to use a single variable/array where the clause needs 3 parameters.

this is my code in the service:

`getRows(clientID: string, collID: string, order = 'name', pageStart = '', where = ['id', '>', '']) 
{
  const field: string = where[0];
  const opStr: WhereFilterOp = where[1];
  const value: string = where[2];

  return this.afs.collection<any>(clientID + '/tables/' + collID,
    ref => ref
      .orderBy(order, 'asc')
      .limit(50)
      .startAfter(pageStart)
      .where(field, opStr, value) // TODO fix where clause
    ).valueChanges({ idField: 'id'});
}
`
Here I have opted for separating the array into the three parameters and it works OK but:

My question, is there a way in typescript to use one variable and expand it to give the three parameters needed in the where clause itself?

Mark
What would you want a job board to offer? (technically)
Tags: web3, blockchain, solidity
Published: 2022-06-29 11:09:08

Hey! 

My team and I are currently in the process of having our website re-launched and over-hauled.  I'd love to know what you expect from a job board - I don't mean "salary / proper benefits" etc I mean technically from a job board, apply by linkedin? Choosing your communication method (i.e. message me on telegram instead of email) etc.  

Would you rather it was short and quick, or long and detailed? 

Let me know your thoughts please developers! We exist to serve you so i really want to get this right.  Thanks.
Vite Support for Various Map Library Starters
Tags: amazonlocationservice, maplibre, leaflet, vite
Published: 2022-06-29 11:06:18

![img](https://day-journal.com/memo/images/try-090_02.png)

<br>

### I have adapted various map library starters to Vite. :tada:  

I have changed the starters for the map libraries published with "[webpack](https://webpack.js.org)" to "[Vite](https://vitejs.dev/)." The change to "Vite" has dramatically improved build speed and simplified the configuration files. Also, it supports TypeScript.

Please use it if you want to try out the map library easily！

<br>

### Amazon Location Service & MapLibre GL JS & AWS Amplify

![img](https://day-journal.com/memo/images/try-090_03.png)  

https://github.com/dayjournal/amazon-location-service-starter

<br>

### Turf.js & MapLibre GL JS

![img](https://day-journal.com/memo/images/try-090_04.png)  

https://github.com/dayjournal/turfjs-starter

<br>

### MapLibre GL JS

![img](https://day-journal.com/memo/images/try-090_05.png)  

https://github.com/dayjournal/maplibregljs-starter

<br>

### Leaflet

![img](https://day-journal.com/memo/images/try-090_06.png)  

https://github.com/dayjournal/leaflet-starter

<br>

### OpenLayers

![img](https://day-journal.com/memo/images/try-090_07.png)  

https://github.com/dayjournal/openlayers-starter

<br>

### Cesium

![img](https://day-journal.com/memo/images/try-090_08.png)  

https://github.com/dayjournal/cesium-starter

<br>

### Mapbox GL JS

![img](https://day-journal.com/memo/images/try-090_09.png)  

https://github.com/dayjournal/mapboxgljs-starter

<br>

Related Articles

{% link https://dev.to/aws-builders/simple-view-of-new-map-styles-for-amazon-location-service-68n %}

{% link https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal %}

<br>

References
[Amazon Location Service](https://aws.amazon.com/location/)
[Turf.js](http://turfjs.org/)
[MapLibre GL JS](https://www.maplibre.org)
[Leaflet](https://leafletjs.com/)
[OpenLayers](https://openlayers.org/)
[Cesium](https://cesium.com/)
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/)
Writing a better resume
Tags: writing, resume, job, productivity
Published: 2022-06-29 11:03:15

1. Say no to objectives-
- They aren't really useful, it conveys no information about you!

2. Professional Summary on the top:
- What you are great at and passionate about? Why you are qualified? What type of job are you targeting?
- Sum up what they need to know and give them teasers for the rest of the resume

3. Area of Expertise:
- Key-points and all the buzzwords come here

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcv4xjhvs1hcrodu4u8a.png)
 
4. Professional Experiences:
- Roles and responsibilities in small paragraphs
- Use bullets for key contributions
- Use action verbs for all the bragging points 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh6k6tvz58lqzbq49o1p.png)
 
5. Provide Clear contact information

6. Educational & Technical Proficiencies

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1gusbqz593x59p696ke.png)
 
I am not a resume expert, but I have gone through many & these are the resume's which are the easiest to know, understand and figure out about the candidates..
pop_alert new flutter package
Published: 2022-06-29 10:57:00

pop_alert is an open source flutter package for responsive and animated alert/dialog.
[package link](https://pub.dev/packages/pop_alert)
also please dont forget to like the package.

**Installation**
1. Add the latest version of package to your pubspec.yaml (and runflutter pub get):
```
dependencies:
  pop_alert: ^0.0.30
```
2. Import the package and use it in your Flutter App.

```
import 'package:pop_alert/pop_alert.dart';
```

**Example**
There are a numbers of properties that you can modify:

- icon
- title
- text
- button

Simple alert show a dialog with no animated icon

```
PopAlert.simpleAlert(
    context: context,
    title: 'Hello world!',
    button: 'OK',
)
```

```
PopAlert.simpleAlert(
    context: context,
    title: 'Title goes here!',
    text: '...and text goes here!',
    button: 'OK',
)
```


Icon alert show a dialog with animated icon of four type of alert.
The icon can be of four type **success**, **failed**, **info**, and **warning**.

```
PopAlert.iconAlert(
    context: context,
    icon: PopAlertIcon.success,
    title: 'Good job!',
    button: 'OK',
)
```

```
PopAlert.iconAlert(
    context: context,
    icon: PopAlertIcon.success,
    title: 'Good job!',
    text: 'You clicked the button!',
    button: 'OK',
)
```

Developers are welcome to contribute to make the package more better. [github link](https://github.com/tjava/pop_alert)
also please dont forget to star the repo.