teleren/devto huggingface dataset:
Gantt Chart Task Manager with React
Tags: gantt, task
Published: 2023-12-06 09:11:12

---
title: Gantt Chart Task Manager with React
published: true
date: 2023-12-04 00:42:00 UTC
tags: Gantt,Task
canonical_url: https://reactjsexample.com/gantt-chart-task-manager-with-react/
---

## Gantt Chart Task Manager
 ![Gantt Chart Task Manager with React](https://reactjsexample.com/content/images/2023/12/Code_2023-12_12-36-53.jpg)

An application used to manage tasks based on its start time, end time, progress along with timeline views (Gantt Chart), built with ej2-react-gantt package. Gantt chart Task Manager is useful for planning and scheduling projects. It helps you assess how long a project should take, determine the resources needed, and plan the order in which you’ll complete tasks.

This project allows monitoring a project’s progress once it’s underway, too. You can immediately see what should have been achieved by a certain date and, whether the project is behind schedule. It is helpful for managing the dependencies between tasks.

## Project ScreenShots

![Gantt Chart Task Manager with React](https://user-images.githubusercontent.com/64726139/114295363-6a23dc00-9ac2-11eb-9390-44f2ede1141a.png) ![Gantt Chart Task Manager with React](https://user-images.githubusercontent.com/64726139/114295252-ac005280-9ac1-11eb-80ef-f4c8356a096c.png) ![Gantt Chart Task Manager with React](https://user-images.githubusercontent.com/64726139/114295410-b96a0c80-9ac2-11eb-8954-3c442f6f1631.png) ![Gantt Chart Task Manager with React](https://user-images.githubusercontent.com/64726139/114295541-7c524a00-9ac3-11eb-83aa-e61979abfc3f.png)

## Installation and Setup Instructions

Clone down this repository. You will need `node` and `npm` installed globally on your machine.

Installation:

`npm install`

To Start Server:

`npm start`

To Visit App:

`http://localhost:3000`

## GitHub

[View Github](https://github.com/mitsukimiyagi39/GanttChart-TaskManager-master?ref=reactjsexample.com)
What's Your "Yes, And?"
Tags: discuss
Published: 2023-12-04 00:00:00

---
published_at : 2023-12-04 00:00 +0000
---
Share your favorite power phrases that have enhanced your communication in work conversations. <br>
Follow the DEVteam for more discussions and online camaraderie! <br>
{% embed https://dev.to/devteam %}
slay the ethics
Tags: gamedev, writing
Published: 2023-12-24 16:21:32

---
title: slay the ethics
published: true
date: 2023-12-04 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20231204-1326-slay-the-ethics/
---

 **Slay the Princess** introduces us to the game in medias res:

> You're on a path in the woods.
> 
> And at the end of that path is a cabin.
> 
> And in the basement of that cabin is a princess.
> 
> You're here to slay her.
> 
> If you don't, it will be the end of the world.

The main conflict of the game is presented in the **first 5 lines of text**.

You have to decide whether to kill the princess or not.

Now, it would seem the game poses a moral dilemma.

Logic would suggest that you **make a decision and execute it**.

You either **save her or kill her**.

But _Slay the Princess_ takes a different path: both the narrator who asks you to execute her and the princess herself are **not trustworthy** , something you quickly discover in the game.

The effect this has on your position is interesting: by making both characters unfriendly, you have **no preference for either**.

By quickly eliminating the moral burden, it also removes expectations.

As players, we don't have much idea about the **consequences of the choices we make**.

That is: we **don't really have agency** , beyond choosing this path or that one.

This means that morality is left behind and one is limited to exploring and **dealing with the consequences of this exploration**.

We are blind.

But it doesn't matter, because **we have no preference** for any path.

As long as what we choose brings us something new narratively, we're interested.

Slay the Princess functions more as a **narrative fog of war** than a moral dilemma, and this makes it very interesting.

This is one possible way of dealing with the player agency issue:

**Remove it with style.**

It left me thinking about what other techniques could be used to generate a similar effect, where the horizon of intent becomes **more exploratory than interventionist**.

Any ideas or references that resonate with this?
When Does Preparation Pay Off?
Tags: discuss, codenewbie, beginner
Published: 2023-12-04 00:00:00

---
published_at : 2023-12-04 00:00 +0000
---
Share a coding interview experience where your preparation paid off. What resources or strategies helped you get ready?
<br>
Follow the CodeNewbie Org and #codenewbie for more discussions and online camaraderie!
{% embed https://dev.to/codenewbieteam %}
Major Update to React Starter Kit: Welcome Joy UI and Jotai!
Tags: webdev, react, javascript, opensource
Published: 2023-12-03 23:48:57

Hello, React developers!

I'm excited to share some big news about the **React Starter Kit**, the go-to template project for many of you in the React.js community. We're rolling out a major update that's set to enhance your development experience significantly.

### What's New?

Switching from Material UI to Joy UI: We've made a strategic decision to replace Material UI with Joy UI. This change brings a fresh and modern UI toolkit that aligns better with the evolving design trends and offers more flexibility and customization options. Joy UI is designed to provide a seamless and enjoyable developer experience, ensuring that your projects look more appealing and user-friendly.

Transitioning from Recoil to Jotai for state management: To streamline state management, we're moving from Recoil to Jotai. Jotai offers a simpler and more intuitive API, with minimalistic and atomic state management. This shift aims to improve performance and make state management in your React applications more straightforward and maintainable.

### Why These Changes?

We believe these updates will make the React Starter Kit more robust, versatile, and future-proof. Joy UI's modern approach to UI components, combined with Jotai's efficient state management, aligns with our mission to provide a high-quality, easy-to-use starter kit for your React projects.

### Getting Started with the New Update

Just clone the repo, install project dependencies and launch:

```
$ git clone --depth=1 https://github.com/kriasoft/react-starter-kit example
$ cd ./example
$ corepack enable
$ yarn install
$ yarn workspace app start
```

### Your Feedback Matters

Your feedback is crucial for the continuous improvement of the React Starter Kit. Please try out the new version and share your thoughts and experiences. If you encounter any issues or have suggestions, feel free to open an issue on GitHub or join our community chat on Discord.

We're excited to see the amazing applications you'll build with these new features!

Happy coding!
https://github.com/kriasoft/react-starter-kit
Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript
Tags: javascript, programming, portugues, dica
Published: 2023-12-03 23:46:02

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

Costumo ver desenvolvedores com experiência em _jQuery_ usarem um equivalente vanilla JS do `jQuery.ready() event` antes de executar seu código.

```javascript
document.addEventListener('DOMContentLoaded', function () {
    // Este código não será executado até que
    // o conteúdo do DOM seja carregado...
    console.log('carregado!');
}, false);
```

Você precisa de algo assim quando seu JavaScript está no `head`, mas faz referência a coisas no body. Se você não esperar até que o conteúdo seja carregado, esses elementos ainda não existirão e seu script lançará um error.

A questão é... se você vai esperar até que o DOM seja carregado antes de executar o script, por que não colocá-lo no `footer`?

```javascript
// Este código será executado imediatamente, mas se estiver
// no footer, o conteúdo do DOM já está carregado
console.log('loaded!');
```

O JavaScript no header também pode causar grandes gargalos e delays na renderização, portanto, mover seu script para o `footer` também é melhor para o desempenho!

## Auxílio do atributo defer

Ao adicionar o atributo `defer` em um script element no head fará a mesma coisa e proporcionará melhores ganhos de desempenho.

```html
<script defer src="caminho/para/meu/script"></script>
```

O attributo `defer` diz ao navegador para esperar até que o conteúdo do DOM seja carregado antes de baixar e analisar um script.

Com `defer`, o navegador pode encontrar o script um pouco mais cedo do que o `preload scanner` (scanner de pré-carregamento) e, então, pode priorizá-lo/baixá-lo em paralelo enquanto o DOM está sendo analisando.

Isso significa que o DOM pode ser completamente analisado e o `domInteractive` é acionado enquanto o JS ainda pode estar sendo baixado, em vez de esperar até que o JS volte e seja analisado e executado.

**Resumindo:** com `defer` em um `script` no `head`, o arquivo JavaScript será baixado em background enquanto o restante do DOM é analisado e renderizado. Quando você chegar ao final da página, o arquivo JS já está baixado e pronto para ser executado.

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)
Filter JSON by date
Tags: swiftui, xcode
Published: 2023-12-03 23:22:44

Hi!
I have a JSON file with these keys:

"id": 1,
"date": "10/12/2023"
"name": "Eduardo"
"local": "Local of the event"
"info": "call number"


After I parse this JSON file in xcode with swiftUI how would I filter the dates like if the day of the event has gone I dont want to show the event anymore.


thank u
I HIGHLY RECOMMEND WIZARD WEB RECOVERY TO YOU/ FOR BTC RECOVERY
Published: 2023-12-03 23:09:58

It is crucial to protect your hard-earned Bitcoin in this day and age of digital technology, where hackers may be found anywhere. Many people now prefer Bitcoin over other currencies, but popularity also carries a significant danger. Maintaining the security of your Bitcoin is essential to shield your investment from dangers. It can be quite unpleasant to lose Bitcoin money. It takes into account not only the actual value of the money but also the time and work you put into getting it. The chances of losing your Bitcoin money are high, whether it's because of a hardware malfunction, a forgotten password, or even a hack. But do not worry; Wizard Web Recovery is available to assist you in getting back up on your feet. I doubted recovery alternatives after a security breach cost me my Bitcoin. But in addition to helping me get my lost money back, Wizard Web Recovery also restored my faith in the Bitcoin community. I felt at ease knowing they were devoted to my pleasure and were professional. It can be dangerous to try and retrieve lost Bitcoins on your own. You risk unintentionally aggravating the problem or losing access to your money permanently if you lack the necessary experience and understanding of the recovery procedure. To increase your chances of a successful recovery, it is strongly advised that you outsource your Bitcoin recovery to a reputable service like Wizard Web Recovery. When it comes to recovering your lost or stolen bitcoins, Wizard Web Recovery is the trusted choice. They have proven themselves as industry leaders with their step-by-step recovery process, personalized consultations, and innovative strategies. Their commitment to security, privacy, and client satisfaction sets them apart. Don't let your bitcoins vanish into thin air - entrust their recovery process to the team at Wizard Web Recovery.



Mail:wizardwebrecovery@programmer.net
Web:https://wizardwebrecovery.net
Sigal:+17015814657
Telegram: wizardwebrecoveryteam
Best way to recover stolen cryptocurrency.
Published: 2023-12-03 22:30:15

My sincere gratitude to Century Hackers  Recovery for his professionalism, truly he is a real deal. I would not waste my time with any other hacker and wished I had known them sooner. I am writing this review to be of help to everyone out there, who in one or two ways has been scammed by online investment platforms. After going through a lot to recover my bitcoin although many people told me it’s impossible. If you’ve lost your bitcoin as a result of investing in binary options, trading platforms, your account was hacked or other bitcoin related scams or lost money to scammers online in whichever ways then You’re not alone. (I lost over $97,950 to skyrockettrade). Being a scam victim myself, I tried several means to recover my funds all to no avail, until one day I came upon an article in the Local News about Century Hackers  Recovery, they literally saved my life, all i lost to these fake investors skyrockettrade was recouped in just a few days (a total of 3.7721 BTC) was recovered, Kindly send a message to the contact below if you’ve been in such situations and you are seeking recovery. contact them via Email Address: century@cyberservices.com    website:   https://centurycyberhacker.pro/
Mathematics is fundamental
Tags: math, computervision, softwareengineering
Published: 2023-12-03 22:29:48


### Background
A ton of aspiring engineers are operating on the idea that math can be brushed aside when considering the art of software engineering. A ton of these ideas come from the "social media professors" who are trying their hardest to gain a following to bring in more income.

### When does reality kick in?
While it is true that you can get away from with basic math if you are tasked with changing background colors and moving basic components around in a codebase, reality tends to kick in when you have to do anything that has ideas deeply rooted in mathematics manually.

I previously worked for a company by the name of Brightidea where me and a few other engineers were tasked with creating a virtual multiplayer whiteboard that could behave similarly to that of other competitors(Miro/Figma etc). Without a deep understanding of linear algebra and computational geometry, I wouldn't have been up to the task of creating key features that directly impacted the companies bottom line.

Another hot area in computer science today is computer vision, and a ton of the work in computer vision is based on gradients, which are changes in intensity from one pixel to another. Gradients go hand and hand with differential calculus by its very definition. You may consume popular libraries like OpenCV to do this work for you, but in order for you to get far(optimize/customize), you will need to understand the process under the hood.
Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript
Tags: javascript, programming, portugues
Published: 2023-12-03 22:29:20

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

Uma `Immediately Invoked Function Expression`, ou **IIFE**, é uma function que se invoca imediata e automaticamente e executa o código dentro dela.

Isso permite manter o código fora do escopo global sem precisar nomear e chamar uma function.

Algo que confunde muitas pessoas é que existem várias maneiras de escrever uma IIFE. Hoje, veremos algumas variações de como ela é escrita.

## "Leading" semicolon

Às vezes você as vê com um ponto e vírgula inicial.

```javascript
;(function () {
    // O código vai aqui...
})();
```

Isso existe para que, se alguém esquecer um ponto e vírgula final após a definição de uma variável, e sua function terminar na mesma linha que ela, seu código não será quebrado.

```javascript
// Isso causaria um error
var greeting = 'Hi there!'(function () {
    // O código vai aqui...
})();

// Isso não causará
var greeting = 'Hi there!';(function () {
    // O código vai aqui...
})();
```

## Localização diferente para os parênteses

Às vezes, você também vê os segundos parênteses dentro dos primeiros, em vez de depois deles. Isso funciona da mesma maneira, e algumas pessoas preferem essa aparência (eu não).

```javascript
(function () {
    // O código vai aqui...
}());
```

## Passando variables para dentro

Você também poderá ver pessoas passando os elementos `document` e `window` como variáveis nomeadas. Isso permite que você use facilmente nomes de variáveis mais curtos para elas em seu código.

Pessoalmente, prefiro ser mais explícito e usar os nomes completos desses elementos, mas essa abordagem também é adequada.

```javascript
(function (doc, win) {
    // O código vai aqui...
}(document, window));
```

Às vezes, você também verá pessoas incluindo `undefined` como um terceiro argument que não é transmitido. Isso evita que as pessoas sobrescrevam `undefined` como um valor fora do seu script.

```javascript
(function (doc, win, undefined) {
    // O código vai aqui...
}(document, window));
```

## Qual você deve usar?

Prefiro estruturar minhas IIFEs o mínimo possível, com parênteses no final e ponto e vírgula de fechamento.

```javascript
(function () {
    // O código vai aqui...
})();
```

Mas todas estas diferentes formas de escrever um IIFE estão corretas. Escolha o que você mais gosta.

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)
Advent of Code #3 (in Crystal)
Tags: crystal, adventofcode
Published: 2023-12-03 22:15:21

The nature of Advent of Code problems coming in two parts means that you kind of have to take a gamble on a good data structure for the first part, and just hope it works out for the second without too much refactoring.

Well, I decided to store the numbers and symbols in two separate hashes with keys of `{x, y}` positions. (For the numbers, this position represented the position of the first digit). For the first part, this allowed a simple hash lookup to figure out if there was an adjacent symbol.

For the second part, it was almost as simple as looking up in the other direction, but since I did not store the position of every digit (just the first digit in the number), there was a bit of extra math to do. I ended up just looking a little further to the left, making sure that the number was actually long enough to be adjacent to the gear.

I solved this one live [here](https://youtu.be/YNE50dCSwgs), but didn't finish part 2 on the stream. Ironically, I ended up finishing it just 5 minutes after the stream ended. By the way, I would love to get to 20 subscribers by the end of the year. Could you help me get there? Thanks!

Here's my code:
```crystal
input = File.read("input").strip

alias Position = Tuple(Int32, Int32)
alias PositionMap = Hash(Position, String)

numbers = input
  .split("\n")
  .map_with_index { |x, i| {x, i} }
  .reduce(PositionMap.new) do |number_map, (line, line_number)|
    line_numbers = line.scan(/\d+/).reduce(PositionMap.new) do |line_number_map, number|
      line_number_map.merge({ {number.begin, line_number} => number[0] })
    end
    number_map.merge(line_numbers)
  end

symbols = input
  .split("\n")
  .map_with_index { |x, i| {x, i} }
  .reduce(PositionMap.new) do |symbol_map, (line, line_number)|
    line_symbols = line.scan(/[^(\d|.)]/).reduce(PositionMap.new) do |line_symbol_map, symbol|
      line_symbol_map.merge({ {symbol.begin, line_number} => symbol[0] })
    end
    symbol_map.merge(line_symbols)
  end

part1 = numbers.select do |(x, y), number|
  adjacent_to_symbol = false
  ((y - 1)..(y + 1)).each do |y|
    ((x - 1)..(x + number.size)).each do |x|
      if symbols.has_key?({x, y})
        adjacent_to_symbol = true
      end
    end
  end
  adjacent_to_symbol
end.values.map(&.to_i).sum

puts part1

part2 = symbols.reduce(0) do |sum, ((x, y), symbol)|
  adjacent_numbers = [] of Int32
  if symbol == "*"
    ((y - 1)..(y + 1)).each do |j|
      ((x - 3)..(x + 1)).each do |i|
        number = numbers[{i, j}]?
        if !number.nil? && number.size + i >= x
          adjacent_numbers.push(number.to_i)
        end
      end
    end
    sum += adjacent_numbers.product if adjacent_numbers.size == 2
  end
  sum
end

puts part2
```
Changing ownership for files using Google Drive v3 API
Tags: herebedragons, api, google, drive
Published: 2023-12-03 22:04:27

This is just a warning fellow developers to waste hours to come to the same conclusion as I did. 

With the v3 version of the Drive Api one [cannot transfer ownership for files and folders using the Api for users using gmail.com](https://issuetracker.google.com/issues/228826345#comment2). 

If it's within a Workspace accounts you might pull it off. However, since approval is needed for transfer these days, you need to modify the permission request

```ts
// 💾 The old way
 const transaction = await drive.permissions.create({
        fileId: fileId, 
        resource: {
          role: "owner", // easy-peasy....
          type: "user",
          emailAddress: newOwnerEmail,
        }
      });
```

```ts
// 🙄 The new way
 const transaction = await drive.permissions.create({
        fileId: fileId, 
        resource: {
          role: "writer", // Share it to the new owner
          type: "user",
          emailAddress: newOwnerEmail,
          domain: 'everything-but-gmail.com',
        },
        transferOwnership: true, // In order to make a request for approval
      });
```

Hope this helps anyone out there!
Changing ownership for files using Google Drive v3 API
Tags: herebedragons, api, google, drive
Published: 2023-12-03 22:04:27

This is just a warning fellow developers to waste hours to come to the same conclusion as I did. 

With the v3 version of the Drive Api one [cannot transfer ownership for files and folders using the Api for users using gmail.com](https://issuetracker.google.com/issues/228826345#comment2). 

If it's within a Workspace accounts you might pull it off. However, since approval is needed for transfer these days, you need to modify the permission request

```ts
// 💾 The old way
 const transaction = await drive.permissions.create({
        fileId: fileId, 
        resource: {
          role: "owner", // easy-peasy....
          type: "user",
          emailAddress: newOwnerEmail,
        }
      });
```

```ts
// 🙄 The new way
 const transaction = await drive.permissions.create({
        fileId: fileId, 
        resource: {
          role: "writer", // Share it to the new owner
          type: "user",
          emailAddress: newOwnerEmail,
          domain: 'everything-but-gmail.com',
        },
        transferOwnership: true, // 
      });
```

Hope this helps anyone out there!