teleren/devto huggingface dataset:
Add dark mode in react admin panel
Tags: react, darkmode, javascript
Published: 2022-05-17 12:48:29

Hi, i am implementing a bootstrap theme to my react admin panel which is having dark mode. I want to add this into my project with prefers-color-scheme (window.matchMedia) and not by toggling. I have 2 bootstrap css files (theme-light.css and theme-dark.css). 

Can anyone help me or have an example that how can i implement the dark mode inside my react application ? I have googled and found below code, but it is not working as expected.

`const [isDarkMode, setisDarkMode] = useState(false);
 const [isLightMode, setisLightMode] = useState(false);
 const [supportsColorScheme, setSupportsColorScheme] = useState(false);
`
useEffect(() => {
    const supportsColorScheme = window.matchMedia(
      "(prefers-color-scheme)"
    ).matches;

    const isDarkMode = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;

    const isLightMode = window.matchMedia(
      "(prefers-color-scheme: light)"
    ).matches;

    setisDarkMode(isDarkMode);
    setisLightMode(isLightMode);
    setSupportsColorScheme(supportsColorScheme);
  }, []);

`if (supportsColorScheme) {
    if (isDarkMode) {
      require("assets/css/theme-dark.css");
    } else if (isLightMode) {
      require("assets/css/theme-light.css");
    }
  }`
Rebasing in English
Tags: git, beginners
Published: 2022-05-17 12:46:16

---
title: Rebasing in English
published: true
description: the only explanation of rebasing that has made sense to me and will maybe work for you.
tags: git, beginners
//cover_image: https://direct_url_to_image.jpg
---

A coworker recently explained rebasing in a way that made it make sense to me for the first time: it's just pretending you branched off of better code than you actually did.

The usual diagram of rebasing looks something like this: 
![a main branch has a feature branch rebased on it, it essentially looks like a straight line that then zig-zags upward](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zelx6dtur4ur29yo6gr.gif)

This is clear to me when I have two branches--a main/master branch and a second branch with my new feature--but that's rarely how a repo is being used. There's usually multiple feature and bug branches being worked on simultaneously--often by different team members. When I'm asked to rebase due to changes made to main, this diagram makes it look destructive and scary. To be clear, it IS destructive in the sense that it fundamentally changes the history of your branch, but the consequences aren’t necessarily as scary as they appear. 

For me at least, I found it helpful to just ignore the diagram and think of it like this: 

First, I made my feature off of main. Meanwhile, someone else made a significant improvement to main--an important bug fix maybe. I could merge main into my branch and leave a paper trail, but if we're confident in these changes, why not keep my commits clean and pretend like they were always there? Rebasing essentially tells my feature branch, hey, let's just act like I was working off of this new and improved main branch all along.
Entity Framework Core Add if not exist
Tags: netcore, efcore, sql, dotnet
Published: 2022-05-17 12:40:41

Have you tried to check if the entity exists and if not — add it.

you can use this code

```
using Microsoft.EntityFrameworkCore.ChangeTracking;
public static class DbSetExtensions
{
public static EntityEntry<T> AddIfNotExists<T>(this DbSet<T> dbSet, T entity, Expression<Func<T, bool>> predicate = null) where T : class, new()
{
var exists = predicate != null ? dbSet.Any(predicate) : dbSet.Any();
return !exists ? dbSet.Add(entity) : null;
}
}
```

and

```
var purchase = new Models.Purchase();
var trackingnumber= "222";
_context.Purchases.AddIfNotExists(purchase,p=>p.BankTrackingNum== trackingnumber);
await _context.SaveChangesAsync();
```

“Read before write” can violate data integrity without being put inside a transaction control.

In SQL Server, you can use merge statement. However merge statement is not available in EF.

Happy Coding👨‍💻
Idea on refactor GoogleMap component
Tags: react, map, component
Published: 2022-05-17 12:18:38

Code: 

```js
import { useRef, useEffect, useState } from 'react'
import { Wrapper } from '@googlemaps/react-wrapper'

const GoogleMap = ({ center, zoom, libraries = [], onLoad }) => {
  const ref = useRef()
  const [googleMap, setGoogleMap] = useState(null)

  const handleCallback = (status, loader) => {
    loader.load().then((google) => {
      setGoogleMap(google.maps)
    })
  }

  const initMap = () => {
    return new googleMap.Map(ref.current, {
      center,
      zoom,
    })
  }

  useEffect(() => {
    if (googleMap) {
      const map = initMap()

      const services = {}
      libraries.forEach((library) => {
        console.log('looping...')
        services[library] = new googleMap.places.PlacesService(map) // use services mapping, but I'm too lazy to do that right now
      })

      onLoad &&
        onLoad({
          map,
          ...services,
        })
    }
  }, [googleMap])

  return (
    <Wrapper apiKey="" libraries={libraries} callback={handleCallback}>
      <div
        ref={ref}
        style={{ width: '100%', height: '950px', margin: '0 auto' }}
      >
        This is map
      </div>
    </Wrapper>
  )
}

function App() {
  const center = { lat: 34.0430058, lng: -118.2673597 }
  const zoom = 12

  const handleMapLoaded = (services) => {
    services.places.nearbySearch(
      {
        location: center,
        radius: '500',
        type: ['restaurant'],
      },
      (results, status) => {
        console.log('status:', status)
        console.log('results:', results)
      }
    )
  }

  return (
    <div>
      <GoogleMap
        center={center}
        zoom={zoom}
        libraries={['places']}
        onLoad={handleMapLoaded}
      />
    </div>
  )
}

export default App
```

Why?

- I don't want to use global variable like `windows.google`, look lame for me
- It's look plugable, just put library that it support, it will load and return object
- Expose logic of another service, for example nearby places and don't have to put in GoogleMap component anymore

Improvement

- Map marker can render as prop
- More advance component can render as child
Animated Tab Bar
Tags: codepen
Published: 2022-05-17 12:17:56

<p>Designed by:  Mauricio Bucardo</p>

<p>Original image:
<a href="https://dribbble.com/shots/5619509-Animated-Tab-Bar" target="_blank">https://dribbble.com/shots/5619509-Animated-Tab-Bar</a></p>

<p>You can use this menu in your projects.
It also works with 100% width and reacts to changing the size of the window :)</p>

{% codepen https://codepen.io/kibetamos/pen/LYQWEOq %}
SwiftUI — MVVM State management in a simple way
Tags: ios, swift, iosdev, programming
Published: 2022-05-17 12:17:24

**What is SwiftUI?**
SwiftUI is Apple’s new declarative framework for building user interfaces for all Apple devices. This framework can be broken down into two essential components: views and state.

State management is an integral part of SwiftUI development, and there are many different ways of working with the state. In which State represents the data associated with a view.

You will learn how to manage all the states of a screen using only one state variable with very easy steps by following the MVVM software design pattern.

Today we are going to learn about a state holder to separate business logic from UI components. 

ViewModel has a longer lifecycle than the view. so ViewModel can preserve its state across UI changes.

Here, we can extract business logic from views and put it inside ViewModel in a way that is easy to understand and maintainable for future developers.

For detailed implementation, check out [original article](https://blog.canopas.com/swiftui-mvvm-state-management-in-a-simple-way-61efc8929b2f).

The full source code is available on [Github](https://github.com/cp-amisha-i/MVVMStateManagement).
React component that renders a table with pagination. Coding Challenges - your solution(!)
Tags: javascript, page, react, table
Published: 2022-05-17 11:56:34


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

```
import React from 'react';

const USER_URL = 'https://example.com/api/users';

export default function Table() {
return (
  <div>
   <table className='table'>
    <thead>
     <tr>
      <th>ID</th>
      <th>ID</th>
      <th>ID</th>
     </tr>
    </thead>
   <tbody>
  // y
   </tbody>
  </table>
  <section className='pagnation'>
   <button className='first-page-btn'>first</button>
   <button className='previous-page-btn'>first</button>
   <button className='next-page-btn'>first</button>
   <button className='last-page-btn'>first</button>
  </section>
 </div>
 );
};
```
Spacebar Counter
Tags: spacebar, counter, spacebarcounter, spacebarclicker
Published: 2022-05-17 11:53:17

## What is the spacebar counter?

The [spacebar counter](https://spacebarcounter.us) helps you to measure how many times you can hit the space bar button in a given period.
Some video games require using the spacebar for necessary actions, such as shooting or jumping. So, you better get into it fast!
I don't believe I have to specify where the spacebar is on the keyboard (everyone knows that, duh!). So, without further ado, let's see how the Press the Spacebar 100 times in given interval time.

## BENEFITS OF THE SPACE BAR COUNTER

Do you understand the benefits of this helpful spacebar counter?

After the space bar counter tool, you will see a specific score
Exciting rivals with mates
Better performance in online video games
You can share your test results instantly
It's straightforward to play
No registration is required
It works in internet browsers
Completely free, and there are also updates


## How Does Spacebar Counter Work?

Understanding spacebar counters are easy to find in double-quick time. If you get stuck somewhere, just follow the steps below.

•	If you visit our homepage, you take a 5-second area counter test by default.
•	To get started, you need to click on the clicking pad with your computer mouse.
•	Right now! You are ready to accept the spacebar counter obstruction by clicking on your spacebar.
•	As soon as you start clicking, you can check your recurring statistics by looking at the bench on the clicking pad. You can see your clicking timer, clicks per second, and the total variety of clicks.
•	When the timer is complete, a pop-up display shows your score, ranking.


## SPACEBAR CHALLENGE ON TIKTOK

Spacebar exam contests are going viral on TikTok. In addition to measuring gaming speed, you have the opportunity to have a good time in this difficulty. Before participating in the competition, you need to get enough exercise with the spacebar counter. Please share this exciting spacebar click test with your neighbourhood and organize your competition!
Elastic Search Reindexing
Tags: elasticsearch, tutorial, beginners, database
Published: 2022-05-17 11:53:03

##Reindex APIedit

Documents are copied from one location to another.
The document source is extracted from the source index and the documents are indexed in the destination index. You can reindex a selection of the documents or transfer all items to the target index.

> Reindexing requires that _source be enabled for all documents in the source.
Before invoking _reindex, the destination should be specified as desired. The settings from the source or its related template are not copied when you reindex.
Mappings, shard counts, replicas, and other parameters must be set up ahead of time.

## Querry

```
POST _reindex
{
  "source": {
    "index": "my-index-000001"
  },
  "dest": {
    "index": "my-new-index-000001"
  }
}
```
OR

```
curl -X POST "localhost:9200/_reindex?pretty" -H 'Content-Type: application/json' -d'
{
  "source": {
    "index": "my-index-000001"
  },
  "dest": {
    "index": "my-new-index-000001"
  }
}'
```

## _reindex with scripts

We can use Painless scripting to run our querry.


```
POST _reindex
{
  "source": {
    "index": "my-index-000001"
  },
  "dest": {
    "index": "my-new-index-000001"
  },
  "script": {
    "inline": "ctx._source.field = Long.parseLong(ctx._source.field)"
  }
}

```
## Conclusion
> Avoide Reindexing!
If reindexing is absolutely necessary, this Querry can be used.
If we need to convert one data type to another, we may use scripts to our benefit.
If you are familiar with pipelines, we can do much more sophisticated tasks with ease.

## Resources 
[ElasticSearch](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-reindex.html)
GitLive Now Works With Any Git Repository in WebStorm!
Tags: programming, javascript, git, webdev
Published: 2022-05-17 11:52:07

We are happy to announce GitLive now works, out-of-the-box in offline mode, with any Git repository in WebStorm!

Previously we only supported repositories from the big four hosting services (GitHub, GitLab, Bitbucket, Azure DevOps) and required you to authorize access to the service before you could start using GitLive. 

Now when you install GitLive it will start in **offline mode**. The offline mode uses the data from your local Git repository only and nothing is sent outside your network. Your repository should have a remote but it can be hosted anywhere.
 



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

In the GitLive tool window you'll see all the authors of branches currently ahead of your default branch, the last commit to a branch determines who it will appear under. 

Drill down into an individual author’s branches to see the files changed and inspect diffs plus view the associated issue or pull request. 



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

The changes from the branches shown in the GitLive tool window also appear for your current file in the gutter of your editor. The [gutter indicators](https://blog.git.live/gitlive-15.0-offline-merge-conflict-detection-across-all-branches-for-any-git-repository#get-notified-of-merge-conflicts-across-all-branches) show the differences in the file from other branches compared to your local version. It even shows you when the changes conflict with your own - a kind of early warning system for merge conflicts!

Click on the author's avatar to inspect a change and see the diff, what branch they're from and even [cherry-pick](https://blog.git.live/gitlive-8-0-Cherry-picking-your-teammates-changes#cherry-picking) changes straight into your local file.




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

---

And you can still sign in to go **real-time** and see your teammate's [unpushed changes](https://blog.git.live/gitlive-15.0-offline-merge-conflict-detection-across-all-branches-for-any-git-repository#enhanced-team-window-filters) in the team window, get notified in the gutter [the moment you make a conflicting change](https://blog.git.live/gitlive-11.0-Real-time-merge-conflict-detection#gutter-indicators-for-teammates-changes), plus make calls and [codeshare](https://blog.git.live/gitlive-12.0-voice-and-video-calling-with-screen-code-share#codeshare) to edit together simultaneously. 

Signing in still requires a repository from the big four hosting services for now but we'll be adding support for other services, including self-hosted, soon!

---

Don't have the GitLive plugin installed yet? You can find it [here](https://plugins.jetbrains.com/plugin/11955-gitlive), and if want to learn more about the latest release, check out [this blog post](https://blog.git.live/gitlive-15.0-offline-merge-conflict-detection-across-all-branches-for-any-git-repository).
How to respond to recruiters
Tags: original, shorts, dev
Published: 2022-09-02 20:24:31

---
title: How to respond to recruiters
published: true
date: 2022-05-17 11:25:29 UTC
tags: Original,Shorts,dev
canonical_url: https://blog.pitermarx.com/2022/05/how-to-respond-to-recruiters/
---

Hello [name]

Thanks so much for reaching out. I’m always interested in hearing about what new and exciting opportunities are out there.

As a software engineer with over [number] years of experience I’m sure you can imagine that I get a very high volume of recruiters reaching out on LinkedIn. It is a wonderful position of privilege to be in and I’m thankful for it.

It does however mean that I don’t have the time to hop on a call with everyone who reaches out. A lot of the times, incoming messages represent a very poor fit indeed.

I would love to continue the conversation, but before I do, I’d like to level set around the level of seniority that you’re looking for.

Can you send along the company/project name, role description and the total compensation details for the role you’re reaching out in reference to?

I look forward to hearing from you.

Pedro
Data Souce Generator
Published: 2022-05-17 11:21:34

**data-source-generator** é uma ferramenta para geração de fontes de dados, escrita em Python.
Para gerar os dados é necessário o contexto, campos, tipos de dados e número de
registos desejado.

Projetos onde pode ser aplicado:
- Bancos de dados SQL;
- ETL;
- Data Warehouse e Data Marts;
- Mineração de dados.

Podemos criar nossa fonte de dados nos seguintes formatos: SQL, CSV, TXT, JSON e XML.
Esta ferramenta suporta 2 idiomas: Inglês e Português.

Para usar esta ferramenta,  é ncessário baixar o repositório do projecto e digite na linha de comando:
python app.py


Etapas
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5210jx0porx2kh0raza.jpg)

Fluxo de execução
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uki1gj6ldwrqw6u3q7qt.jpg)

Aplicação Português
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxs7tx5en7i22ve2n1kt.jpg)

Aplicação Inglês
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9go1e0p1ttns8jzhabn.jpg)

Fonte SQL
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/635qy7ztvcjxlpc2rsur.jpg)

Fonte CSV
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jaw7ugw8t7hlzzmooiy.jpg)

Fonte JSON
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klq186ptnuxolotlo4pt.jpg)

Fonte TXT
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pitdnvjsxcmf9f4ioo55.jpg)
Modelagem Dimensional
Tags: database, sql, datawarehouse, modeling
Published: 2022-05-17 10:59:21

Modelagem Dimensional ou Multidimensional é uma técnica de elaboração e visualização de um modelo de dados normalmente usada para construção de Data Warehouses. Este modelo, possui um conjunto de medidas que descrevem aspetos comuns de negócios.
Em vários aspetos, a modelagem dimensional (MD) é mais simples, mais expressiva e mais fácil de entender que o modelo relacional (MR).

O modelo dimensional tem vários benefícios, nas quais podemos destacar:
- Faclitar  interação com o utilizador final;
- Melhorar a compreensão dos processos de negócio;
- Aumentar a rapidez nas consultas de dados.

O modelo dimensional é formado por dois tipos de tabela:
- **Tabela Fato**:  representa transações, acontecimentos, ou outras atividades que são utilizadas para medir o funcionamento e os resultados dos processos de negócio;
- **Tabela Dimensão**: Determinam o contexto em que ocorreram os fatos. Normalmente estão presentes em cabeçalhos de linhas no conjunto resposta de consultas realizadas pelos utilizadores.

Existem dois tipos principais de modelos de dados dimensionais:
- **Modelo em Estrel**a: É uma estrutura constituída por uma tabela de fato associada a várias tabelas dimensão;
- **Modelo em Floco de neve**: É uma estrutura constituída por tabela facto e as dimensões podem estar associadas a outras dimenões. Este modelo reproduz o Modelo Relacional no Data Warehouse.

**Sugestão:** Para solucionar melhor o problema, o modelo dimenional deve responder no mínimo as 4 perguntas fundamentais do negócio: Quem, O Quê, Onde e Quando.

**Exemplo:** Criação de um modelo dimensional para Recrutamento. Pretende saber os dados dos candidatos, as candidaturas por filiais, data de candidatura, vaga concorridas e  províncias. Também deseja-se saber o total de candidaturas pendentes, validadas e revogadas.
**Modelo adoptado**: Estrela
**Dimensões**: Candidato, Vaga, Data da Candidatura, Filial e Província.
**Facto**: Candidatura.


Perguntas da modelagem dimensional
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fixxnhbmre11fz5jlyr8.jpg)


Nodelo Conceitual da Base de dados operacional
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inh5g96m28aosc5nxf36.jpg)

Modelo Dimensional do Data warehouse
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a45y5y8uz9dns5uhq5pb.jpg)


Estrutura do Data warehouse
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubwtazqo8gokn97lvbk4.jpg)





**Para mais Artigos**:
https://www.dev.to/ortizdavid
https://www.medium.com/@ortizaad1994
Manual Testing Course in Chennai
Published: 2022-05-17 10:46:15


Job Oriented Best Manual Testing Training in Chennai? – Aimore is the No 1 Best Manual Testing Training Institute in Chennai with Certification and Job Placements in both Manual, automation testing training like Selenium, QTP/UFT, and Performance Testing Training Courses like LoadRunner and JMeter. you can guarantee that your [Manual Testing Course in Chennai](https://www.aimoretechnologies.com/manual-testing-training-in-chennai) investment provides the maximum benefit with Jobs and Certifications. Learn & Expert Software Testing Quickly from the Experienced Professionals – Job Guaranteed!