teleren/devto huggingface dataset:
Make your life easier with React Query DevTools
Tags: react, beginners
Published: 2022-02-06 08:32:15

When it comes to using _React Query_ and especially the more advanced topics, it can be pretty hard to debug what's going on.

Or sometimes, you just want to invalidate a query to see if everything works fine quickly.

That's exactly where **React Query DevTools** come in handy 🥳.

This is what it looks like when enabled:

![Make your life easier with React Query DevTools](https://cdn.hashnode.com/res/hashnode/image/upload/v1643349189447/XLfQFf761.png)

## Enabling React Query DevTools

If you want to use the DevTools, installing them in your main app wrapper is recommended. This way, they will be visible everywhere.

And don't worry, by default, they will only show up when your env is in `development` mode.

Open up your `App.js` file and import the DevTools.

```js
import {ReactQueryDevtools} from 'react-query/devtools';
```

To import it, we should place it inside the `QueryClientProvider` block like so:

```js
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      # Your app components
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}
```

For this mode, we can pass the following optional properties.

- `initialIsOpen`: You can set this to `true` if you want it to default show as open
- `position`: Can be one of the following: `top-left`, `top-right`, `bottom-left`, `bottom-right`, and it determines the position of the React Query logo.

Then we get some options that can be used to extend default styles or click handlers.
All of these can be used to override defaults like: `className`, `style` and `onClick` where applicable:

- `panelProps`
- `closeButtonProps`
- `toggleButtonProps`

Alternatively you can render it as a plain component when used in embedded mode:

```js
import {ReactQueryDevtoolsPanel} from 'react-query/devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtoolsPanel />
    </QueryClientProvider>
  );
}
```

## Using the React Query DevTools

Once you spool up your application with the DevTools setup, you can quickly keep track of all the fired queries.

By clicking on one of them, you get to see a lot of information for this query.

- Query key
- Current status
- Last updated
- Data inside the cache

And you can quickly choose any of the following actions:

- Refetch
- Invalidate
- Reset
- Remove

![React Query options](https://cdn.hashnode.com/res/hashnode/image/upload/v1643349036317/56lOABelz.png)

Trust me. React Query DevTools can make your life a lot easier.
Knowing when a query is refetched, what data it has, or how many times it retried fetching it is such a win.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Github contribution workflow
Published: 2022-02-06 08:01:08


1.Fork the repository

2.Clone the forked repository & Configure upstream
```
git clone FORKED-REPO
cd FORKED-REPO
git remote add upstream ORIGINAL-REPO
git remote -v
```

3.Configure `environment` for the project and install dependencies
Depending on the project, change `sample.env` to `.env`
If Node.js project, install packages by running `npm install` or `yarn`

4.Make a git branch & Make commits
```
git checkout -b BRANCH-NAME
git commit -m "KEYWORD #ISSUE-NUMBER - commit message"
```

5.Sync the repository & Push
```
git fetch upstream
git checkout master
git merge upstream/master
git checkout BRANCH-NAME
git rebase -i master
git push origin master
git push --set-upstream origin BRANCH-NAME
```

6.Make Pull Request
from BRANCH-NAME -> Original Repo's master

7.Remove the branch
```
git branch -d BRANCH-NAME
git push origin --delete BRANCH-NAME
```
Software Testing Weekly - a great resource about testing
Published: 2022-02-06 18:47:06

---
title: Software Testing Weekly - a great resource about testing
published: true
date: 2022-02-06 08:00:35 UTC
tags: 
canonical_url: https://mszeles.com/software-testing-weekly-a-great-resource-about-testing
---

Yesterday, I accidentally stumbled upon **Software Testing Weekly**. I was looking at my google analytics results, and I saw some of my readers are coming via a referral [softwaretestingweekly.com](https://softwaretestingweekly.com/).

I got curious immediately, so I opened the page. As the name of the website suggests, it is a **weekly digest of testing articles** found interesting by [Dawid Dylowicz](linkedin.com/in/dawid-dylowicz) the author of the newsletter.

Reading the newsletter **I already found 4-5 articles interesting to me**. And this is just Software Testing Weekly issue 109, which means **I still have 108 newsletters to read to find awesome content about testing.**

**Give it a try!** I am pretty sure you will find it valuable.

**Do you have any favourite resources about testing? Please share it in the comment section.**

📚**Join the Selenide community** on [LinkedIn](https://www.linkedin.com/groups/9154550/)! ✌

[Buy me a coffee!](https://buymeacoffee.com/mikiszeles) ❤
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-02-06 08:00:10

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598ab1885.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ How do you stop a web developer stealing your stuff?

___A:___ Write 403 on it.
 -->
Sulitnya Mengenalkan Teknologi Baru kepada Programmer Senior
Tags: programming, indonesia, teknologi
Published: 2022-02-06 07:37:14


## Pendahuluan
Dalam dunia teknologi yang terus berkembang, pengenalan teknologi baru menjadi kunci untuk tetap relevan dan kompetitif. Namun, mengenalkan teknologi baru kepada programmer senior, yang sering disebut sebagai "oldies programmer" atau "programmer senior", bisa menjadi tantangan yang kompleks. Artikel ini akan menjelaskan mengapa mengenalkan teknologi baru kepada programmer senior sulit dan memberikan beberapa strategi yang dapat membantu mengatasi tantangan ini.

## Perbedaan Pendekatan dan Mindset
 Programmer senior umumnya memiliki pengalaman yang luas dan mungkin sudah menguasai teknologi tertentu dengan baik. Mengubah pendekatan mereka dalam menghadapi teknologi baru dapat menjadi sulit karena mereka mungkin telah terbiasa dengan cara kerja lama dan merasa nyaman dengan itu. Artikel ini akan menggali perbedaan pendekatan dan mindset antara programmer senior dan teknologi baru yang


## Komunikasi yang Efektif
Komunikasi yang efektif menjadi kunci dalam mengenalkan teknologi baru kepada programmer senior. Artikel ini akan membahas beberapa strategi komunikasi yang dapat membantu membangun kepercayaan, memotivasi mereka, dan menjelaskan manfaat dari teknologi baru tersebut. Hal ini mencakup menghindari jargon teknis yang rumit, memberikan contoh nyata implementasi teknologi baru, dan menggali kebutuhan dan kekhawatiran programmer senior.

## Pelatihan dan Pendampingan
Mengenalkan teknologi baru kepada programmer senior mungkin memerlukan pelatihan tambahan dan pendampingan yang lebih intensif. Artikel ini akan membahas pentingnya menyediakan sumber daya pelatihan yang memadai dan mengembangkan program pendampingan yang mendukung mereka dalam menguasai teknologi baru. Ini bisa berupa pelatihan langsung, tutorial online, grup diskusi, atau bahkan mentorship antar programmer.

## Membangun Kasus Penggunaan
Programmer senior mungkin perlu melihat manfaat langsung dari teknologi baru sebelum mereka terlibat sepenuhnya. Artikel ini akan mengajukan konsep membangun kasus penggunaan (use case) yang relevan dan jelas untuk menggambarkan bagaimana teknologi baru dapat meningkatkan efisiensi, produktivitas, atau keunggulan kompetitif. Dengan melihat hasil nyata, programmer senior mungkin lebih termotivasi untuk mengadopsi teknologi baru tersebut.
    
## Kesabaran dan Empati
Mengenalkan teknologi baru kepada programmer senior membutuhkan kesabaran dan empati. Artikel ini akan menyoroti pentingnya memberikan waktu yang cukup bagi programmer senior untuk beradaptasi dengan perubahan dan memberikan dukungan saat mereka menghadapi tantangan. Terkadang, programmer senior mungkin juga perlu melalui tahap rasa tidak nyaman sebelum merasa nyaman dengan teknologi baru tersebut.
How to Insert Thousands of Rows from an Excel / CSV File into a database with a single database call
Tags: sql, database, json, storedprocedure
Published: 2022-02-06 07:29:22



Most of the procedures I see programmers do when uploading data from a excel or csv file is 
1. Loop through the file per row
2. Submit the row to the database.

This method does not only takes so many hours to finish but also takes a lot of resources from the server. So these tasks are usually done during off-peak hours.

But there is a way to do this without taking so much time and resources. You can actually insert tens of thousands of records from a file in a single database call for your application.

This is done by using the ff procedures.
From the app:
1. Read the excel / csv file as a DataTable
2. Serialize the DataTable to JSON string
3. Submit the JSON String as parameter (JSON / NVARCHAR datatype) to a stored procedure

In the MySQL / SQL Server / PostgreSQL stored procedure
4. Read the JSON string as a table using JSON_TABLE (MySQL) OPEN_JSON (SQL Server) or JSON_EACH(PostgreSQL) table function
5. Insert the converted JSON table to a table in the database.

Depending on the data transformations you will do prior to actually inserting the data, the total operation can take as little as 1 second to insert 10,000 rows or more. I regularly insert / update 50,000 rows from an Excel file to an SQL Server database in RDS and I am able to do so in 1-2 seconds, network latency including. Most I did is 200,000 rows without any problem during peak hours and the users didn't even notice it.

Sample Code
https://github.com/darwinpasco25/JsonFileUploadApp

Sample Excel file with 10,000 rows of records
https://github.com/darwinpasco25/JsonFileUploadApp/blob/main/JsonFileUploadApp/JsonFileUploadApp/sales.xlsx

Sample MySQL database
https://github.com/darwinpasco25/JsonFileUploadDB
js❤️ - Cierre
Tags: javascript, react, es6, spanish
Published: 2022-02-06 07:26:28

Esta serie de artículos no representa todo lo que puede hacer JavaScript, nos hemos dejado fuera conceptos muy interesantes como _async await_, _closures_, parámetros por defecto, _promises_, _template literals_, módulos, clases, _generators_ y un largo etcétera.

Espero que te sirva como referencia para entender los conceptos que sí hemos visto: _spread operator_, _destructuring_, funciones y los métodos para procesar _arrays_. Y cómo se pueden utilizar para conseguir inmutabilidad y a la vez escribir un código más conciso y expresivo.

Muchas gracias por llegar hasta aquí. Si quieres ponerte en contacto conmigo, soy [jacarma en twitter](https://twitter.com/jacarma)
Vumin - Free Vue.js, Tailwind CSS Admin Template
Tags: vue, tailwindcss, template, free
Published: 2022-02-06 07:13:54

### Vumin is a Free Admin Template built with Vue.js & Tailwind CSS.


#### Highlights
- SPA (Single Page Application)
- Reusable Components
- Vue Router & VueX Support
- Compsition API
- Script Setup Syntax
- Super Fast Vite.js builds within 10 seconds
- Production CSS < 20 kb, JS < 200 kb

Live Demo: https://vumin.scriptmint.com

GitHub Repository: https://github.com/scriptmint-solution/vumin-lite

> Advance and Full Featured Admin Panel built with Laravel, Vue.js & Tailwind CSS is available.
> Live Demo of Advance Version: https://ui.scriptmint.com

#### Features Available
- Mobile Responsive
- Dark & Light Mode
- Profile Dropdown
- Sidebar Navigation
- Login Page
- Register Page
- Password Page
- Dashboard with Chart & Stats
- Sample Table
- Sample Form
- Sample Cards
- 404 Error

![light-dark-mode-min.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644129450770/bJhmku7PI.png)


![mobile-layout-min.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644129459013/VxzkpjIEH.png)

![other-pages-min.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644129464520/e84RggkEY.png)

#### Installation

```
git clone git@github.com:scriptmint-solution/vumin-lite.git vumin
cd vumin
npm install
npm run dev
```

#### NPM packages used:
- Font Awesome
- HeadlessUI
- Chart.js
- Vue
- Vue Router
- VueX
- TailwindCSS
- TailwindCSS Form
- Vite.js
- Vite.js Compression Plugin
- PostCSS

#### Browser Support
Modern Browser Only

#### Issue Reporting
If you face any issue, please raise issue at https://github.com/scriptmint-solution/vumin-lite/issues

#### License
MIT License 
Copyright (c) 2022 scriptmint.com (https://scriptmint.com)
¿Cómo aumentar la productividad?
Published: 2022-02-06 07:03:54

El confort del trabajo a distancia, donde el empleado sabe que puede organizar su tiempo y atender cualquier posible imprevisto (una gestión urgente, un hijo que se ha puesto malo…) sin que le suponga un grave problema, hace que el trabajador aprecie más las ventajas de su situación laboral.

De esta forma, su motivación y compromiso se ve aumentado para cumplir con las expectativas, lograr los objetivos e implicarse en la buena marcha de la empresa que le facilita esta flexibilidad en las condiciones de trabajo.

Para maximizar los beneficios trabajando desde la distancia, hay que seguir una serie de consejos:

- Crear un espacio de trabajo acogedor.
- Arreglarse como si se saliera a la oficina. Está permitido ponerse cómodo, pero no trabajar en pijama. La mente inconsciente recibe “imputs” de lo exterior, así si la vestimenta es igual o parecida a la que se utiliza generalmente en el [trabajo](https://informeanualrsf.es/) se está mandando el mensaje de “estoy trabajando”.
- Evitar distracciones. Por ejemplo, el primer paso sería desactivar las notificaciones del teléfono, tales como Facebook, Instagram y Snapchat, que muy probablemente no se necesitarán mientras se trabaja. Esto ayudará a mantener la concentración. Hay varios estudios que demuestran que la multitarea tiene un efecto negativo en la productividad.
El dolor crónico de espalda afecta al sistema inmunológico
Published: 2022-02-06 07:03:10

Según, las opiniones de los especialistas, el dolor crónico, ya sea de cabeza, espalda, etc., tiene consecuencias negativas en el sistema inmunológico. La principal función del sistema inmune consiste en proteger al cuerpo de manera eficaz contra los microorganismos a los el cuerpo está expuesto día a día como virus, bacterias, hongos, etc.

De acuerdo con un estudio realizado por la [McGill University](https://informeanualrsf.es/) de Montreal, el dolor crónico podría causar cambios en el sistema inmune. Los investigadores observaron que este tipo de dolor modifica el funcionamiento de este sistema. "Hemos visto que no solo afecta al cerebro sino también a un tipo de glóbulos blancos de la sangre esenciales para la inmunología", comenta Moshe Szyf, autor del estudio, que además deja claro "el impacto que tiene el dolor crónico en otras partes importantes del cuerpo".

Una de las consecuencias del dolor crónico es la baja en las defensas debido al estrés que el dolor ocasiona en el organismo. Para evitar que las defensas bajen, se recomienda el incremento del consumo de vitaminas y antioxidantes; evitar el consumo de tabaco y alcohol; beber 2 litros de agua al día y; darle un buen cuidado a la espalda.

La actividad física ayuda a mejorar la condición de la espalda y el sistema inmunológico, ya que reduce el estrés y regula la actividad metabólica. Las actividades más recomendables son el Yoga y Pilates. Se recomienda el uso de tapetes de acupresión y de productos especializados en descontracturacion tipo Cordus, para relajar los músculos y eliminar molestias que disminuyen el rendimiento del sistema inmune.
Deportes con bajo impacto son ideales para quienes hace tiempo no hacen deporte
Published: 2022-02-06 06:46:33

La columna vertebral es el eje principal de toda el sistema esquelético del cuerpo por lo que tener algún problema que le afecte puede comprometer la calidad de vida. El dolor de espalda es uno de los padecimientos más comunes de la sociedad, caracterizado sobre todo por las malas posturas mantenidas durante todo el día. Pasar demasiado tiempo sentados y la poca actividad física pueden ser algunos de los causantes de este dolor que muchas veces suele tener una causa multifactorial.

En los últimos meses la rutina de todo el mundo se modificó, volviendo a personas sedentarias aún más inactivas. Para evitar o prevenir los dolores de espalda es fundamental realizar actividad física y evitar el sedentarismo, con el fin de mantener una buena condición física. El sedentarismo provoca consecuencias negativas en la salud de la columna.

Según la opinión del quiropráctico [Marcelo Barroso Griffiths](https://informeanualrsf.es/), los deportes de bajo impacto, son los que mejor funcionan para comenzar a reactivar el cuerpo después de la contingencia, ya que los objetivos a alcanzar son: el fortalecimiento de las articulaciones, tonificar el cuerpo y restablecer la masa muscular. "Los deportes con bajo impacto son ideales para los que sufren dolores en las articulaciones, si se está recuperando de alguna lesión o si hace tiempo que no hace ningún deporte", comentó Griffiths.

Algunos deportes que se pueden practicar al finalizar la contingencia por COVID-19:

- Caminar. Caminar sigue siendo una actividad efectiva y con muchos beneficios, eso sí, siempre tener el cuenta el calzado utilizado. Hacerlo durante media hora al día es un excelente remedio contra el sedentarismo, pero además mejora el sistema cardiovascular, fortalece el corazón y los pulmones.

- Correr. Es un deporte saludable, pero, según Griffiths, el impacto puede afectar las articulaciones, es por ello que caminar mejora el flujo de circulación sanguínea y la condición física en general, además de prevenir dolor de espalda.

- Bicicleta fija. Según el especialista, la bicicleta fija es ideal para trabajar la musculatura de las extremidades inferiores y mantener una buena forma física sin tener un impacto negativo en la espalda. Para esto es fundamental mantener una buena posición mientras se pedalea, teniendo en cuenta ajustar las distintas partes de la bicicleta de acuerdo a las necesidades de cada persona.

-Yoga, Pilates, Natacion. son otras opciones bastantes favorables.
Sedentarismo y trabajo en casa afectaron el estado físico
Published: 2022-02-06 06:43:50

Felipe Gómez García, Ortopedista y Traumatólogo, dijo que desde el inicio de la pandemia aumentaron los casos de lumbalgia. Muchas personas no contaban con un lugar óptimo para trabajar e improvisaron áreas de trabajo sin mobiliario ergonómico para que llevaran su jornada laboral sin dolor.

Para la mayoría de los trabajadores, las consecuencias por pasar varias horas frente a las computadoras son problemas en la espalda y cuello. Según la opinión de [Gómez García](https://informeanualrsf.es/) el sedentarismo y el trabajo en casa afectaron el estado físico de las personas.

Para evitar que la vida sedentaria continúe afectando la condición de la columna, varios fisioterapeutas y especialistas de la columna vertebral recomiendan relajarse con actividades físicas como el yoga o la realización de estiramientos simples. Otras recomendaciones para complementar estas actividades son el uso de herramientas ortopédicas sencillas como pelotas o rollos, o algunas herramientas más profesionales tipo Cordus o Sacrus, así como la aplicación de automasajes para ayudar a relajar los músculos al final de la jornada de trabajo.
Local storage parse/set utility function
Tags: javascript, webdev
Published: 2022-02-06 06:17:06

## Overview

Let me share utility functions to parse data from local storage and set data to local storage.

Any advices to improve the functions, much appreciated 🙏


## Parse local storage data
```javascript
/*
 * To get the value from local storage that matches the given key
 * @param {string} key
 * @returns The value of the key argument
 */
const parseLocalStorageJSON = (key) => {
  if (!key || typeof key !== "string") {
    throw new Error("Invalid key");
  }

  /**
   * Handle non-string value with JSON.parse.
   * Catch string value and return it
   */
  try {
    return JSON.parse(localStorage.getItem(key));
  } catch {
    return localStorage.getItem(key);
  }
};
```

## Set data to local storage

```javascript
/**
 * To set the key-value pair to local storage
 * @param {string} key
 * @param {any} value
 * @returns N/A
 */
const setToLocalStorage = (key, value) => {
  if (!key || typeof key !== "string") {
    throw new Error("Invalid key");
  }

  if (typeof value === "object") {
    localStorage.setItem(key, JSON.stringify(value));
  } else {
    localStorage.setItem(key, value);
  }
};
```

## Demo

On click of "Set&Parse" button, the above two functions are called.
The result can been seen,
- Set => in the devtool, local storage
- Parse => in the console

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv2ccqvvyovmav5jng98.gif)
 
{% codesandbox 1mvx7 %}

## References

- [JSON.parse() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
- [Window.localStorage - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
Design Patterns for Resilient Serving - Batch Serving
Tags: datascience, machinelearning
Published: 2022-02-06 05:03:01

**Batch serving** is useful when we need to carry out predictions asynchronously unlike **stateless serving function** where we can process one instance or at most a few 1000 instances embedded in a single request.

Examples include:

1. Determine whether to reorder a stock-keeping unit - needs to be carried out on an hourly basis
2. Creating personalized songs playlist
3. Recommendation engines with periodic refresh rates - say, the periodic refresh rate is per hour, then, we carry out inferences for only those users who visited the website in last on hour

To achieve asynchronous predictions, batch serving makes use of distributed data processing infrastructures such as BigQuery, Apache Beam, etc.

Consider this example below, where we run inference on approx. 1.5 million rows of data using BigQuery:

```bash
WITH all_complaints AS (
SELECT * FROM ML.PREDICT(MODEL external_model,
  (SELECT consumer_complaint_narrative AS reviews
   FROM `bigquery-public-data`.cfpb_complaints.complaint_database
   WHERE consumer_complaint_narrative IS NOT NULL
  )
))
SELECT * FROM all_complaints
ORDER BY positive_review_probability DESC LIMIT 5
```

Here, the following operations take place in order:

1. Read `consumer_complaint_narrative ` column from dataset where `consumer_complaint_narrative ` is not `NULL`. Let's assume this is a total of **X** values. These are then distributed across **N** shards.
2. **N** workers process each of **N** shards to read the data and do the inference using the model files.
3. Each of the **N** workers find the 5 most positive complaints from the shard they processed.
4. Take the **(5 * N)** complaints, sort them and then select 5 from the actual result.