teleren/devto huggingface dataset:
Working with Arrays in React (updating)
Tags: react, javascript, array
Published: 2022-09-21 09:30:55

## Mapping to a list of components
Say we got an array of fruits, and we'd like to render each as a fruit card in the page, then we can use `.map` as below:

```
let fruits = ["apple", "banana", "peach"]
return (
  { fruits.map(x => <FruitCard name={x}>) }
)
```
But React may warn you that "**Each child in a list should have a unique "key" prop**". And the reason is as follow:

Say we initially had a list of fruits as ["apple", "banana"], and we mapped and rendered them as 2 individual `<FruitCard>` components in the page. 

Later on, when we need to add one more fruit "peach" and update the page to display this third `<FruitCard>`, without the "key" prop, React actually has no idea about which fruits are newly added/deleted or which have stayed unchanged, hence it has no choice but to remove the previous 2 <FruitCard> elements from the DOM tree and create a new element for each child of the updated list and add them to the DOM tree all over again.

To avoid this inefficient DOM update, React requires us to give each child a unique ID, then later when the list is updated, React only updates the ones that are changed according to their ID. In the example above, we could do something like: (assuming each fruit has its unique name)

```
return (
  { fruits.map(x => <FruitCard name={x} key={x}>) }
)
```
In this way, when "peach" is added, React knows that "apple" and "banana" were the old elements that are untouched, hence it only adds a new element for "peach" into the DOM tree, saving the work to remove and re-add the other 2 old elements.

In short, **the "key" prop is to allow React to keep track of the list elements, therefore improving the performance on re-rendering**.
How Do I Code 8 Hours A Day In 2 Simple Steps
Tags: programming, coding, beginners, software
Published: 2022-09-21 09:43:37

In this article I will tell you how I manage to code 8 hours a day non-stop in two simple steps.

1. I don’t.

2. The work of a Software Engineer is not only coding 8 hours straight away. Your brain needs to rest as well. Quality > Quantity.

Thanks for reading.

## About me

You can find me on my social media as @mateoguzmana
Meet the new release of ODBC Driver for BigCommerce with macOS and Linux Support
Tags: odbc
Published: 2022-09-21 09:43:07

---
title: Meet the new release of ODBC Driver for BigCommerce with macOS and Linux Support
published: true
description: Devart rolled out an updated ODBC Driver for BigCommerce with macOS and Linux support.
tags: odbc
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, a recognized vendor of world-class data connectivity solutions for various technologies and frameworks, announces the new version of [ODBC Driver for BigCmmerce 2.0](https://www.devart.com/odbc/bigcommerce/?utm_source=devto&utm_medium=referral&utm_campaign=pr_odbc_21.09.2022) with **macOS and Linux support**. 

Now there is no need to create custom solutions for each third-party instance - everything works out of the box. Therefore it takes less effort to properly integrate users’ favorite tools into the workflow.

**The major updates of this release are:**
- Support for macOS in ODBC Driver for BigCmmerce.
- Support for Linux in the new driver version 2.0.

To learn more about the recent release, visit: 
https://blog.devart.com/release-of-macos-and-linux-bigcommerce-odbc-driver-support.html

**Devart ODBC Driver for BigCommerce** is a high-performance connectivity solution with enterprise-level features designed for accessing BigCommerce from ODBC-compliant reporting, analytics, BI, and ETL tools for Windows, macOS, and Linux. 

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
Wednesday Links - Edition 2022-09-21
Tags: java, jvm, gradle, gc
Published: 2022-09-21 09:39:13

JUnit 5.9.1 is released! (30 sec)🎉
https://twitter.com/junitteam/status/1572311462650970113

Java 19 is released! (30 sec)🎉
https://twitter.com/java/status/1572243891562381313

JDK 19 G1/Parallel/Serial GC changes (4 min)🚮
https://tschatzl.github.io/2022/09/16/jdk19-g1-parallel-gc-changes.html

The Story of a Java 17 Native Memory Leak (7 min)💦
https://foojay.io/today/the-story-of-a-java-17-native-memory-leak/

A Better Way to Use Gradle With Github Actions (4 min)🐘
https://blog.gradle.org/gh-actions

Helidon Níma — Helidon on Virtual Threads (6 min)🐦
https://medium.com/helidon/helidon-n%C3%ADma-helidon-on-virtual-threads-130bb2ea2088

Building pathological input for Java HashMaps - hash collisions generator (7 min)💥
https://www.andreinc.net/2022/09/01/patological-input-for-the-java-hash-tables

Type modelling in Kotlin (10 min)🛹
https://kt.academy/article/type-modelling-kotlin

Heroku is dead: Let’s deploy Spring Boot containers on fly.io! (16 min)🪰
https://blog.codecentric.de/en/2022/09/spring-boot-flyio/
Integrate @specialdoom/proi-ui in your svelte project
Tags: svelte, vite, javascript, uilibrary
Published: 2022-09-21 09:19:58

![@specialdoom/proi-ui thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqrw7zs40infs8up0xvs.jpg)
## Intro

This article provides some tech details for integrating [@specialdoom/proi-ui](https://github.com/specialdoom/proi-ui) in your new or existing svelte project.

## Agenda

1. Introduction
2. Creating a svelte project. Integration of [@specialdoom/proi-ui](https://github.com/specialdoom/proi-ui)
3. Demo

## Introduction
I am aware of the multiple UI components libraries provided by the open source community. I mean look at this following [@MadeWithSvelte](https://madewithsvelte.com/ui-library) category, it has 2 pages 😲.  So, we can admit that the frontend community is trying to consider[ @svelte](https://svelte.dev/) as part of their tech stack by improving and updating the svelte resources, not only the UI ones.

Here I am, part of the community, presenting the UI lib I have developed during the past years and it's integration. Starting with a very simple and naive library to a third version including a redesigned process using Figma and it's components approach.

## Prerequisites
- JavaScript, HTML, CSS
- Svelte
- Visual Studio Code

## Code
Let's create a new svelte project by running the following command provided by svelte [docs](https://svelte.dev/).

```console
npm create vite@latest appname -- --template svelte
cd appname
npm install
```
Now we should have a simple svelte app and we are ready to develop some amazing features for it. To integrate [@specialdoom/proi-ui](https://github.com/specialdoom/proi-ui), first, we need to install it in our project by running the npm install command
```console
npm i @specialdoom/proi-ui
```
Second step of the integration is to import `css` variables in our main app file
```javascript
// App.js
import App from './App.svelte'
import './global.css';
import '@specialdoom/proi-ui/variables.css';

const app = new App({
  target: document.getElementById('app')
})

export default app;
```
or in our global `css` file.
```css
/* global.css */
@import "@specialdoom/proi-ui/variables.css";
```

Right now everything is up and ready and we can use the provided components like
```html
// App.svelte
<script>
  import { Button } from '@specialdoom/proi-ui';

  function handleClick() {
    console.log('[Button] click...');
  }
</script>

<Button variant="primary" on:click={handleClick}>
  Click here
</Button>
```

## Demo
{% embed https://stackblitz.com/edit/vitejs-vite-qtw37m?file=src%2FApp.svelte %}
5 Ways You Can Easily Adjust To Your New Work Place
Published: 2022-09-21 09:16:45

Many career oriented introverted people find hard to adjust to new work environment. They would rather be stuck at their old work place than to go to a completely new place with new people. 
It takes a lot of courage for them to step out of their comfort zone. So if you're one of those people who have taken a step towards your growth and switched to a new work place, here's how you can adapt to it,

1. Don't be Buried in your work all the time, you'll get yourself exhausted.

2. Go for small talk or a chit chat with the employees to know them better. Join them in outings.

3. Take breaks amidst work. If your workplace has an entertainment room, spend your time there.

4. Greet everyone and pay them respect, it keeps away the negativity.

5. Start your work with a positive mindset, don't forget to have your breakfast. You need all the energy for the day.

As a [Dissertation Writer Online](https://dissertationwriteronline.co.uk/), I followed these at my workplace and I have started loving my job.
Translate with alias
Tags: bash, tips, translate, raycast
Published: 2022-09-21 09:02:48

Hello!

For those of us who do not know English and throw a lot of Google Translate...

- Install translate-shell

`brew install translate-shell`

- Add alias in .bash_profile or .zshrc

**Note**: The parameter: is the language, try to put different and obtain more results (example :en)

`alias trad="trans :es "$(pbpaste)" -b | pbcopy"`


Now when we want to translate what we have on the clipboard, we simply put trad in the terminal and we will have it copied

Update: I leave the file for Raycast, in case you want to use it with a combination of keys. I have based on this script ([link](https://github.com/raycast/script-commands/blob/master/commands/apps/translate-shell/translate-to-en.sh))

```

#!/bin/bash

# Dependency: requires translate-shell
# Install with Homebrew: `brew install translate-shell`

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Traducir
# @raycast.mode silent
# @raycast.packageName Translate clipboard

# Documentation:
# @raycast.author josexs
# @raycast.authorURL https://github.com/josexs
# @raycast.description Translate to ES and copy text of clipboard.

if ! command -v trans &> /dev/null; then
	echo "trans command is required (https://github.com/soimort/translate-shell).";
	exit 1;
fi

trans :es "$(pbpaste)" -b | pbcopy

```




See you with more tips!
Use variables from the Go standard library with Usestdlibvars open-source
Tags: opensource, go, webdev, programming
Published: 2022-09-21 08:54:58

In Go development, developers often write their own variables or constants and then reuse them in code that accesses the standard library. That’s why our Go developer, Sasha Melentyev, created the usestdlibvars linter — which determines the ability to reuse variables or constants from the standard library. So instead of writing your own constants, you can reuse those constants that are already in the standard library.

[How to install usestdlibvars? Read here.](https://evrone.com/usestdlibvars)
Where do you get NEAR Protocol Testnet tokens
Published: 2022-09-21 08:33:44

While NEAR Testnet gives you 200 tokens when you open a new developer account, these soon run out when you’re signing a tonne of test transactions (getting things wrong and tweaking).

There are a few ways to get more tokens but here’s my lazy way.

### New Dev Account -> Delete Account

I wanted to keep my original Testnet account open because I had a bunch of test NFTs hanging around, so in the end I created a new Dev Account (using the NEAR CLI) which is pre-funded with 200 NEAR, then deleted that new account and sent the funds to my main account.

This is by far the fastest way to fund an account.

```
near dev-deploy
<newDevAccount> created ...
near delete <newDevAccount> <YourMainTestnetAccount>
```

### NEAR Faucets
Although I haven’t used Faucets there are two that I’ve seen recommended.

- https://near-faucet.io/
- https://near-examples.github.io/token-printer/

There are limits to the amount of tokens you can get and how fast they are delivered which is why I don’t bother.
Go Series: The Way to Go
Tags: go, beginners
Published: 2022-09-21 08:33:35

In this series, I'll start exploring Go language that I found useful and interesting in developing programs using Go. 

{% replit @achristoph/HelloWorldWithGo  %}

Let's start with a Hello World program. 
Any go program requires a package declaration. The package named main is special as it indicates that it is executable. 
The main program in go can be named anything and usually called main.go.

```
package main

import (
	"fmt"
)

func main() {
  fmt.Println("Hello, World!")
}

```

Beyond a simple program, we would need to include more packages. In the simple example above, we imported fmt package that is included in Go's standard library

To organize our code better, we can define a package  in the folder structure of our app.

The steps are:

1. Add go.mod file [](https://replit.com/@achristoph/HelloWorldWithGo#go.mod) - this will turn our root folder into the root of the module. A module in go represents a collection of packages
2. Inside the [go.mod](https://replit.com/@achristoph/HelloWorldWithGo#go.mod), add the module name, this name will be used when we import our package:
`module myapp`
3. Create a new folder where the new package will be defined, any file defined in this folder needs to be in the same package, otherwise go will complain. Let's  call this package **greeting**. Note that the package name can be different than the folder name. To emphasize this, the package folder name is **g**
4. Create a file [hello.go](https://replit.com/@achristoph/HelloWorldWithGo#g/hello.go) as the first file that contains code for our greeting package
5. Define functions that will be used in the main package, function **Hi** and **Say** are defined here, note that uppercase make these functions publicly accessible which is what we want
6. Go back to main.go, then import the package, to do this, we need to specify the complete path which is: module name followed by the path to the package, so in our example the package is myapp and the package folder name is g. The best practice is to name it exactly as the package name which is greeting, but I want to show that when you import , the path is not the package name but the folder name of the package 
```
import (
	"fmt"
	"myapp/g"
)
```
I can use the package method by specifying the package name first followed by the function to invoke, this shows why the best practice is to name the folder the same as the package name - we have no idea what package name is unless we open the file first
```
fmt.Println(greeting.Hi())
```
However, we can actually define an alias like:
```
import (
	x "myapp/g"
)
```
Then I can call it:
```
fmt.Println(x.Hi())
```

But the best practice is to make the package name equal to the folder, the **g** folder should be called **greeting** folder instead

7. Run the program by running: `go run .` or `go run main.go`

This concludes the getting started with go. We'll explore more in the next post of this series
What to write first? Front then back end or vice versa..?
Tags: codenewbie, discuss, beginners
Published: 2022-09-21 08:13:35

First of I am a codenewbie so this article is my little experience with the topic and any advice and comments are highly appreciated! 

_I want to talk about how I feel to write a full stack project with some missing part._

**Case nr.1 - Writing full stack project with limited back end knowledge**
Yes, you read it right. I started a full stack project idea a few months ago without actually knowing back end. So obviously I started to build a front end part up. Here I dont mean just the design and interactivity but also sending http request to the back end (without actually having any). As the project went forward and I learnt more and more about NodeJs back end, I started to build the back end side with receiving and sending data. 

**Case nr.2 - Writing full stack project with limited front end knowledge**
That might sound weird, as I just stated above I know front end. This is an ongoing project where I want to build an full stack application with React front end and NodeJS back end. Now here comes the tricky part as I dont know much (yet) about React. So I started to build the back end part of the project. 

**What is the main difference?**
It felt more natural to write front end first, because this way I always knew exactly what data is going to be sent to the back end. 
Writing back end first, I need to make notes what data and data structure I expect later from the front end. And that is okay but I am little skeptic that I can really send these data later. The reason for this is probably just because my React knowledge is so small right now that I do not see how all things going to get together alter. 


All in all writing back end first felt little weird, but still manageable. 

So all the experienced (back end) developer out there, please tell me how I should imagine writing just back end in real life? What information you get before starting a project?
100 Days of DSA
Published: 2022-09-21 08:00:39

Starting off my journey of mastering **data-structures** & **algorithms**  with this _**#100Daysofdsa**_ which would help me remain consistent in my journey and also would be sharing small snippets or blogs from it to help me revise the topics and also get clarity.

**Target for this month:**

- Stacks
- Queues
- LinkedLists
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-09-21 08:00:23

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
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/5e12593f93b65.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:___ I love you and I only love you. Does that turn you on?

___AND GATE:___ No.
 -->
How to Create an Email Link in HTML
Tags: html, webdev, codenewbie
Published: 2022-09-21 07:54:19

Hey everyone! In this article you'll learn how to create an email link. 

Before we get into creating an email link, we'll look at `<a>` Tag and its `attribute`.

Let's dive into this article 😃

## `<a>` Tag
The `<a>` tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the `<a>`element is the href attribute, which indicates the link's destination.

##  `<a>` Attributes

<ol>
<li>`download`</li>
The target get downloaded when a user clicks on it.
![download example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4ak27qm8l3x623xgg8k.png)

<li>`hreflang`</li>
Specifies the language of the linked document.

![hreflang example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ywlrjkx7hz0z07jxh13.png)

<li>`rel`</li>
Specifies the relationship between the current document and the linked document.

<li>`type`</li>
It specifies the Internet media type (formerly known as MIME type) of the linked document. Look at [IANA Media Types ](https://www.iana.org/assignments/media-types/media-types.xhtml)for a complete list of standard media types.

<li>`target`</li>
Specifies the media type of the linked document.

<br>


### To create an email link, you need to use the `<a>` tag with its href attribute, and insert a "mailto:" parameter after it.

![mailto example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4x2zoru6px5ef0a28co.png)

The following fields can be filledout beforehand
<ol>
<li>**subject**</li>

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0hdy4tl1yo14kx7fh3y.png)
<li>**cc**</li>

![cc code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2bxuumlyg0g0l7p183j.png)
<li>**bcc**</li>

![bcc code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i89hj441arvm2xki78a4.png)
<li>**body**</li>

![body text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h48foi1a10w14dl7ptj8.png)
<br>

**Note**: you can add multiple values to CC and BCC by comma separating them.

## 🚀 Conclusion

Thanks for reading this out. Please feel free to leave your comments and follow for more interesting and educative posts.

Happy coding!
Tools I Can't Live Without( As A Developer)
Tags: webdev, computerscience
Published: 2022-09-21 07:54:18

### Code Editor

![Code Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9m9103ucun1b3ah5v2z.png)

**VS Code** - My Favorite Code Editor. Love the extensions, love Emmet, love the fact that I can open a folder from the `cmd` with `code .`

**Kite** - AI Autocompletion. Helps speed up the process.

---

### Productivity

![Productivity Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqddyy8zqv3y6smih041.png)

[Pomofocus.io](https://pomofocus.io/) - It's a website that allows you to use the Pomodoro technique. Which, for you that don't know about it, is a productivity hack where you work for X amount of time( usually 25, 50, or 55 minutes) and then take a break for Y amount of time( usually 5, 10 minutes).

What makes Pomofocus.io even better is that you can customize your Pomodoro. You can change the amount of time you want to work and the amount of time you want to take a break for. You can change after how many work sessions you'll have a long break, and what alarm to tell you when to start/stop working.

On its own, the Pomodoro technique makes you a lot more productive. But this website makes it even better.

**LoFi** - It's what I listen to while working. I find other music too distracting, or they just don't get you in a zone.
With the productivity system I have now, I use Pomofocus.io and LoFi at the same time to make the most out of the time I'm working.
Here are some of the tracks I like the most:
* https://www.youtube.com/watch?v=W6YI3ZFOL0A
* https://www.youtube.com/watch?v=cbuZfY2S2UQ

---


### Get Answers

![Get Answers Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnrm1a6g1y36lunms2ni.png)

**Google** - Do I even need to say anything here?
**StackOverflow** - Ask questions. Get answers. Give answers.
**GitHub** -  Save my projects. Look at other projects.

---

### Connect With People

![Connect With People Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft88m10f0be231flmnvo.png)

**Discord** - I use Discord, only for educational purposes. I'm part of a ton of developer communities. You can connect with different people, and even build projects with them.

**DEV** -  A community of devs. I like this, because you can read almost every topic there. From how their( peoples) careers went, to what is my favorite OS, you have everything in dev.to. And what's even better are the discussions there.

---

### Create Designs

![Create Designs Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg8paijm0qrust740ntv.png)

**Lunacy** - Sometimes you just want to implement something that's unique. To create unique buttons/text/headers I use Lunacy. Then I bring everything over to my project as a `.png`.