teleren/devto huggingface dataset:
Using Bun with React
Tags: bunjs, node, javascript, webdev
Published: 2022-10-05 06:29:39

Now that we have [Bun setup locally](https://daily-dev-tips.com/posts/a-first-look-at-bun/), let's see how it works with React.

The cool part is that we actually get a build out of the box from Bun. So let's use that and have a play with it.

## Using Bun with React

To get started open up your terminal and run the following command.

```bash
bun create react bun-react
```

The `bun-react` part is the folder that will be created with everything inside of it.

It's actually a super fast command to run and you'll have your app in a second or so.

I then went ahead and added a simple counter component called `Counter.jsx`

```js
import { useState } from 'react';

function Counter() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <span>Counter: {counter}</span>
      <button onClick={() => setCounter((count) => count + 1)}>+</button>
    </div>
  );
}

export default Counter;
```

And then imported it in my `App.jsx` file.

```js
import "./App.css";
import Counter from "./Counter";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter />
    </div>
  );
}

export default App;
```

With that in place run your application with the following command.

```bash
bun dev
```

You should now be able to open up your server on `http://localhost:3000/` and see your bun powered React app.

![Bun running React app](https://cdn.hashnode.com/res/hashnode/image/upload/v1664099489522/whdgbTyx5.png)

And that's it a super quick way to run your React apps.

### 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)
Blazor: Main Game Menu with MudBlazor
Tags: blazor, mudblazor, tutorial
Published: 2022-10-05 06:20:18

Here is a little tip for Blazor development using the MudBlazor component library for creating the main game menu for creating new and loading existing games.

This is the screenshot of the UI main menu.

![Screenshot of Main Game Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj4f44q4krk1ma1jajx0.jpg)

And here is the code behind it:

```html
<MudGrid Class="d-flex flex-wrap flex-grow-1 pa-4 gap-4 align-content-start">
    <MudCard Elevation="8" Style="width: 300px">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h6">New Game</MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudPaper Style="height: 100px" Class="d-flex pa-4 justify-center" Elevation="0">
                <MudIcon Icon="@Icons.Filled.Add" Size="Size.Large" ></MudIcon>
            </MudPaper>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="HandleValidSubmit">NEW GAME</MudButton>
        </MudCardActions>
    </MudCard>
    @if (GameService.Games != null)
    {
        @foreach (var game in GameService.Games)
        {
            <MudCard Elevation="8" Style="width: 300px">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6">@game.PlayerName</MudText>
                    </CardHeaderContent>
                    <CardHeaderActions>
                        <MudIconButton 
                            Icon="@Icons.Outlined.DeleteForever" 
                            Style="width: 40px; height: 40px"
                            Color="Color.Default" 
                            OnClick="() => DeleteGameAsync(game)" />
                    </CardHeaderActions>
                </MudCardHeader>
                <MudCardContent>
                    <MudPaper Style="height: 100px;" Class="d-flex align-content-space-between flex-wrap flex-grow-1 justify-end" Elevation="0">
                        <MudText Typo="Typo.body2">Play existing game in the procedurally generated world.</MudText>
                        <MudText Typo="Typo.caption">@game.CreatedAt</MudText>
                    </MudPaper>
                </MudCardContent>
                <MudCardActions>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="() => PlayGame(game)">LOAD GAME</MudButton>
                </MudCardActions>
            </MudCard>
        }
    }
</MudGrid>
```

I hope it helps.
If you want to learn more about Blazor, visit [this page](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor).
If you want to learn more about the MudBlazor component library, visit [this page](https://mudblazor.com/).
It would be fantastic if you wanted to ask something or leave feedback. Write a comment below, and have a nice day.
HTML + CSS project: website slicing
Tags: css, html, webdev
Published: 2022-10-05 06:18:21

Let’s take a break from following courses and doing online exercises: instead, let’s make a project from scratch! When you start learning frontend technologies, HTML becomes clear the fastest, followed by CSS — and JS is a big journey of its own. Here we will leave JS challenges for later, and we will focus on integrating the visual part of the frontend in a simple project.

## Why you should do projects

Working on projects is a great exercise, and it allows you to practice the skills in an environment more similar to real-world work. Projects:
* are focused on results: things that you are expected to deliver;
* use technology as a tool to achieve the goal: this forces you to focus on what matters; and
* are usually much bigger than challanges you find in courses or books.

Projects allow you to apply your skills to create something meaningful. They let you gain confidence in your skills, and they are tangible things that you can show off to let others know what you can do. After getting the basics from courses, projects are a great step toward improving your skills.

## What is slicing?

Slicing is turning a design into a website. You take the output of a graphic designer, most likely in the form of a PSD file or Figma design, and you make an HTML + CSS website with that look. It requires all the skills you’ve been using for tweaking the look of website elements, plus building the main structure of the website—keeping the header, footer and menus in place.

## Template sources

For an exercise project, you don’t need a custom design—you just need some design. Luckily, there are websites where people share free design files you can use for your project: [example 1](https://freebiesbug.com/psd-freebies/website-template/), [example 2](https://www.templatefreebies.com/?s=template).

Make sure to check the license of the files you use. Probably the license will require you to:
* give credit to the author of the design and
* release your work on the same license.

No matter the licenses, you can always play with the design locally, but it is good to make sure you can share your work publicly as well. 

## Git & GitHub

As you work on your project, you can share it on GitHub. It’s a great way of getting some visibility for your effort and getting feedback if you happen to work with a mentor. If you are not yet on GitHub, it makes sense to register there as soon as you start learning to program.

### Describe your project with a README

Another great addition to your project is sharing information about its context. The standard place to do so is a README file, and you can follow [this guide](https://how-to.dev/the-readme-file-how-to-help-others-understand-your-project) to make it stand out.

## Deploy to GitHub pages

With GitHub, you can make your projects easily available for testing with GitHub pages. You can learn more [here](https://pages.github.com/).

## Share your project!

Do you have any HTML + CSS projects? Share in the comments so that I and other readers can take a look at it!
In One Minute : Kafka
Tags: kafka, beginners, programming, oneminute
Published: 2022-10-05 06:13:58

Kafka is a distributed event store and stream-processing platform. It is an open-source system developed by the Apache Software Foundation written in Java and Scala.

{% embed https://youtu.be/fK9Kn1opsXk %}

Kafka was originally developed at LinkedIn, and was subsequently open sourced in early 2011.

Apache Kafka is based on the commit log, and it allows users to subscribe to it and publish data to any number of systems or real-time applications.

Kafka stores key-value messages that come from arbitrarily many processes called producers. The data can be partitioned into different "partitions" within different "topics". Within a partition, messages are strictly ordered by their offsets, and indexed and stored together with a timestamp.

There are five major APIs in Kafka,
Producer,Consumer,Connector,Streams & Admin.

Monitoring E2E performance requires tracking metrics from brokers, consumer, and producers, in addition to monitoring ZooKeeper, which Kafka uses for coordination among consumers

Official Website :- https://kafka.apache.org/
Ohhhhh. It's been a while. Rhum 2.1.0.rc-1 tho. It's Node compatible btw!
Tags: testing, typescript, javascript
Published: 2022-10-05 05:21:55

Back in April we wrote about the Rhum v2 release. Since then, we've been working on some pretty cool updates! One of them being the "Spy" test double. The bigger one being Node compatibility!

Now that Rhum is dependency free, you can use Rhum in Deno, Node, Bun (cause it's a thing now), and (for whatever reason) the browser. As always, we got your back with full documentation (see it at https://drash.land/rhum) -- showing you how to use the test doubles and their definitions. Example code blocks were improved to include Deno, Node - TypeScript (ESM syntax), Node - JavaScript (ESM syntax), and Node - CommonJS.

The Spy/Node stuff is still in release candidate mode. We don't expect to introduce breaking changes, but if any issues surface or any issues are posted on Rhum's repo, then we might have to think things through. Other than that, enjoy the Spy test double and using Rhum in Node :). Here's some convenience commands for you:

```
yarn add --dev @drashland/rhum
```

```
npm install --save-dev @drashland/rhum
```


---

__Links__

[Rhum v2.x Full Documentation](https://drash.land/rhum/v2.x/getting-started/introduction)

[GitHub Release](https://github.com/drashland/rhum/releases/tag/v2.1.0-rc.1)
Hello
Published: 2022-10-05 05:16:59

Hi, I am a new user in the dev community and hope to make frequent posts about what I am doing. I do a lot of programming when I have free time from school and work. My favorite hobby is creating and developing games through the power of code. I also love seeing software and hardware being developed.  I know more of JavaScript, but I am still learning more of it, and have not mastered in the langauge yet. What is it that I can learn more from the community on becoming a better dev? Thanks!
Installing sqoop on Hadoop AWS EC2
Tags: hadoop, sqoop, datalake
Published: 2022-10-05 05:06:24

Pre-requisitive: On how to install hadoop
https://dev.to/zawhtutwin/installing-hadoop-single-node-cluster-in-aws-ec2-o39

We have already installed Hadoop with OpenJDK 1.8 in the previous guide.
JDK 1.8 is required because later version of MySql Servers does not work well with JDK 1.7 MySql connector drivers. Cloudera shipped their docker image with JDK 1.7,so the objective of this manual installation is to allow the sqoop to work with JDK 8 which support wide range of MySql Server version especially on RDS. So we are not using Cloudera docker image, instead we will be installing things manually.


Go to home folder

`cd ~`

Download sqoop from Apache website

`wget sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz `

Extract the file in the home folder

`tar -xvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz `

Create a sqoop directory in /usr/lib

`cd /usr/lib`

`mkdir sqoop`

Move the sqoop-1.4.7.bin__hadoop-2.6.0 folder to /usr/lib folder

`mv ~/sqoop-1.4.7.bin__hadoop-2.6.0 .`

Add $SQOOP_HOME environment variable in ~/.bashrc

`sudo nano ~/.bashrc`

`export SQOOP_HOME=/usr/lib/sqoop/sqoop-1.4.7.bin__hadoop-2.6.0`

Then add to the $PATH variable too

`export PATH=$PATH:$JAVA_HOME/bin:$HADOOP_HOME/bin:$HADOOP_HOME/sbin:$SQOOP_HOME/bin`

Save the .bashrc and source it

`source .bashrc`

Then download the sql-connector-j jar file from Maven

`cd ~`

`wget https://repo1.maven.org/maven2/mysql/mysql-connector-java/8.0.30/mysql-connector-java-8.0.30.jar`

Then copy mysql-connector-java-8.0.30.jar to $SQOOP_HOME/lib folder

`cp mysql-connector-java-8.0.30.jar $SQOOP_HOME/lib`

Go to $SQOOP_HOME/conf folder and rename the sqoop-env-template.sh to sqoop-env.sh

`mv sqoop-env-template.sh sqoop-env.sh`

Then edit the file as following
```sh
export HADOOP_COMMON_HOME=/usr/lib/hadoop/hadoop-2.9.0
export HADOOP_MAPRED_HOME=/usr/lib/hadoop/hadoop-2.9.0
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
```

Then check the sqoop installation version

`sqoop version`

```
22/10/05 04:50:30 INFO sqoop.Sqoop: Running Sqoop version: 1.4.7
Sqoop 1.4.7
git commit id 2328971411f57f0cb683dfb79d19d4d19d185dd8
Compiled by maugli on Thu Dec 21 15:59:58 STD 2017
```

Then you can start import from the RDS or any Mysql remote database as following.

`sqoop import --connect jdbc:mysql://your_rds_dns_address/yourdatabase --table hr_users --username something --password 'something'`

After import the data will be saved as csv part files in hdfs. The location is /user/ubuntu/hr_users. You can verify as following.

`hdfs dfs -ls /user/ububtu/hr_users`

To see the content of the file.
`hdfs dfs -cat /user/ubuntu/hr_users/part-m-00001`

Then you are ready to install Apache Hive
https://dev.to/zawhtutwin/installing-hive-in-aws-ec2-2g35/
Path Sum- Binary Tree
Tags: javascript, leetcode
Published: 2022-10-05 05:03:09

Given the root of a binary tree and an integer targetSum, return true if the tree has a root-to-leaf path such that adding up all the values along the path equals targetSum.

A leaf is a node with no children.

 

Example 1:


Input: root = [5,4,8,11,null,13,4,7,2,null,null,null,1], targetSum = 22
Output: true
Explanation: The root-to-leaf path with the target sum is 22.

```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @param {number} targetSum
 * @return {boolean}
 */
var hasPathSum = function(root, targetSum) {
    if (root === null) {
    return false;
  }
  const currentSum = 0;
  return checkSum(root, targetSum, currentSum);
};

const checkSum = (root, targetSum, currentSum) => {
  if (root === null) {
    return false;
  }
  currentSum = currentSum + root.val;
  if (root.left === null && root.right === null) {
    return currentSum === targetSum;
  }

  if (root.left) {
    let bool = checkSum(root.left, targetSum, currentSum);
    if (bool) {
      return bool;
    }
  }
  if (root.right) {
    let bool = checkSum(root.right, targetSum, currentSum);
    if (bool) {
      return bool;
    }
  }
    return false;
};


```
623. Leetcode solution in Java
Tags: java, chiki1601
Published: 2022-10-05 04:40:26

```java


class Solution {
  public TreeNode addOneRow(TreeNode root, int v, int d) {
    if (d == 1) {
      TreeNode newRoot = new TreeNode(v);
      newRoot.left = root;
      return newRoot;
    }

    int depth = 0;
    Queue<TreeNode> q = new ArrayDeque<>(Arrays.asList(root));

    while (!q.isEmpty()) {
      ++depth;
      for (int sz = q.size(); sz > 0; --sz) {
        TreeNode node = q.poll();
        if (node.left != null)
          q.offer(node.left);
        if (node.right != null)
          q.offer(node.right);
        if (depth == d - 1) {
          TreeNode cachedLeft = node.left;
          TreeNode cachedRight = node.right;
          node.left = new TreeNode(v);
          node.right = new TreeNode(v);
          node.left.left = cachedLeft;
          node.right.right = cachedRight;
        }
      }
      if (depth == d - 1)
        break;
    }

    return root;
  }
}


```
#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/add-one-row-to-tree/
Triplet Sum Close to Target
Tags: javascript, leetcode
Published: 2022-10-05 04:25:05

Given an array of unsorted integers a and a target, find a triplet in the array whose sum is closest to the target value. Return the sum of the triplet.

Example 1:

Input: a[] = [-2, -4, 6, 3, 7], target = 2
Output: 1
Explanation: Triplet with sum closest to target is [-2, -4, 7], sum of the triplets = 1
Example 2:

Input: a[] = [10, 2, 30, 49, 8], target = 50
Output: 48
Explanation: Triplet with sum closest to target is [10, 30, 8], sum of the triplets = 48

```js
const threeSum = (arr, x) => {
  let nums = [...arr].sort();

  let smallestDiff = Number.MAX_VALUE;
  for (let i = 0; i < nums.length - 2; i++) {
    if (i > 0 && nums[i] === nums[i - 1]) {
      continue;
    }

    let j = i + 1;
    let k = nums.length - 1;

    while (k > j) {
      let sum = nums[i] + nums[j] + nums[k];
      let currentDiff = x - sum;

      if (currentDiff == 0) {
        return sum;
      }

      if (Math.abs(currentDiff) < Math.abs(smallestDiff)) {
        smallestDiff = currentDiff;
      }

      if (currentDiff > 0) {
        j++;
      } else {
        k--;
      }
    }
  }
  console.log(x - smallestDiff);
  return x - smallestDiff;
};

threeSum([10, 2, 30, 49, 8], 50);
threeSum([1, 0, 1, 1], 100);

```
Nix Package Manager
Published: 2022-09-03 04:41:49

Nix Package Manager
| Aug 22, 2022| Linux MacOS
This standalone package manager is absolutely stunning and I can’t believe I’m just now discovering it’s true power.


Installation
Source: https://github.com/NixOS/nix

curl -L https://nixos.org/nix/install | sh
Copy
Note: I’d recommend multi-user install if it prompts for it.

Finding Packages
I’d recommend using their website to find packages to install, but make sure to click the “unstable” button has NixOS stable is a Linux Distribution few use.

https://search.nixos.org/packages

Or from terminal you can list all packages with nix-env -qaP then just grep what you are looking for. Example: nix-env -qaP | grep hugo

Usage
Here is the basic usage of nix, most revolve around the nix-env command. These are manually managed and require user intervention

List Installed packages nix-env -q
Install Packages nix-env -iA nixpkgs.packagename
Erase Packages nix-env -e packagename
Update All Packages nix-env -u
Update Specific Packages nix-env -u packagename
Hold Specific Package nix-env --set-flag keep true packagename
List Backups (Generations) nix-env --list-generations
Rollback to Last Backup nix-env --rollback
Rollback to Specific Generation nix-env --switch-generation #
Help and Manual
Official Manual is here. You can also get more details with man nix or man nix-env.

Troubleshooting
Programs not showing up in start menu
NIX stores all the .desktop files for the programs it installs @ /home/$USER/.nix-profile/share/applications/ and a simple symlink will fix them not showing up in your start menu.

ln -s /home/$USER/.nix-profile/share/applications/* /home/$USER/.local/share/applications
CORS and why I don't hate it so much anymore
Published: 2022-10-05 04:04:30

I am sure that every developer has come across at least one annoying CORS error before, and if you are new to coding and haven't experienced it yet, it's coming!

When I think of CORS, I think of that annoying bug that flies around your face when you are trying to get work done on your computer (maybe that's just because that's been my situation for the past twenty minutes 🙄). The point is, it's easy to want to find a quick fix for it on google in order to move on to more exciting things.

Something I have learned in the past few weeks is that having a deeper understanding of _why_ something breaks or isn't going your way is much better than trying to bypass it as quickly as possible, even if the process ends up taking longer. I say this for many reasons. The first reason being that when the same (or similar) problem happens in the future, I will have an indication of where to start solving it - if I don't already know the solution. Another reason is because of the learning process. When I was researching CORS, I was forced to dig deeper into multiple topics that were all connected to CORS in some way, which ultimately helped me understand the bigger picture better. 
 
Now enough about the benefits of the research process and on to what I learned about CORS:

CORS stands for Cross Origin Resource Sharing, and to make the definition as obvious as possible, it is a browser-based mechanism that allows services to share resources across different origins. 

The server is able to specify which services are allowed to access its resources via HTTP headers. For example, a browser will send an HTTP request (with its origin) to a server with request headers and the server will reply with HTTP response headers (letting the client know if that origin is allowed). 

**Examples of CORS response headers:**

- Access-Control-Allow-Origin: Indicate which origins can access its resources (* can be used to allow all)

- Access-Control-Allow-Methods: Specify which methods are allowed to be used (ex. GET, POST, PUT, OPTIONS)

- Access-Control-Allow-Headers: Indicate which headers can be used

If the request headers follow all of the rules of the response headers, then CORS is enabled properly and the resources can be shared across the different domains. If you are getting a CORS error, take a look at the response headers being provided by the server and make sure that you are allowing the client origin. Sounds easy enough! Of course there's more to CORS than I mentioned here, like preflight requests, API gateways, etc, but I am happy that I can now understand why a console yells about CORS.

Ultimately, the reason I don't hate CORS anymore is because I have a better understanding of it now. So I will keep that in mind the next time I encounter a bug (not referring to the one that was flying around my face earlier, that one had to go)!

Resources:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#:~:text=The%20same%2Dorigin%20policy%20is,documents%2C%20reducing%20possible%20attack%20vectors.