teleren/devto huggingface dataset:
Tech Notes
Tags: appwritehack, javascript, webdev
Published: 2022-05-11 18:16:10

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
user can save their temporary notes in this application 


### Submission Category: 
Wacky Wildcards


### Link to Code

[`{% https://github.com/harshit-paneri/Notes-Web %}` 
](https://github.com/harshit-paneri/Notes-Web)

### Live application 

[`{% https://harshit-paneri.github.io/Notes-Web/ %}` 
](https://harshit-paneri.github.io/Notes-Web/)

### ScreenShot of Application

## New Notes
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/new.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">

## Add Note
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/add1.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">

## View Note
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/view1.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">


## Add Note 2
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/add2.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">

## Search Note 
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/search.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">

## Delete Note 
<img src="https://github.com/harshit-paneri/Notes-Web/blob/main/ImagesOfApplication/delete.png?raw=true" alt="Image description" loading="lazy" width="880" height="449">








[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

## Future Plans
To make it saved for every user personally so that they will always able to access it from every where
Nullish coalescing operator (??) & Optional chaining operator (?.)
Tags: javascript, webdev, beginners, programming
Published: 2022-05-11 18:14:11

As a beginner when writing your JS code you may thought about how to handle null or undefined values especially if it is in a condition. Here Nullish coalescing comes into play.


![Didn't understand anything?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu3y2hdo7qxs5cq4sw5l.gif)

**<u>Nullish coalescing operator (??)</u>**

Nullish coalescing operator (??) is a logical operator just like the OR(||) operator. If operation on left hand side returns null or undefined then right hand side operation is executed. If left hand side operation is not null or undefined then only left hand side operation is performed.

Code example:
example 1:

`const testVariable= null ?? 'default string';
console.log(testVariable);
// output: "default string"`

example 2:
`const testVariable2= 0 ?? 42;
console.log(testVariable2);
// output: 0`


This operator cannot be used with OR or AND operator, if you use it then you will get a syntax error.

If you still want to use OR and AND operator with nullish coalescing operator then use parentheses around OR or AND operator 

example:
(null || undefined) ?? "hello world!";


**<u>Optional chaining operator(?.)</u>**


When there are chances that the value of an object can be `null` or `undefined` then this operator is used.

code example:

`let obj = { prop: "hi" };
console.log(obj.prop?.toUpperCase());`
NiceMan
Tags: help
Published: 2022-05-11 18:14:11

{Use the questions/pointers below to guide your post — don't forget to delete the placeholder text!}

What is your question/issue (provide as much detail as possible)?

What technologies are you using?

What were you expecting to happen?

What is actually happening?

What have you already tried/thought about?

What errors are you getting?

Please try to avoid very broad "How do I make x" questions, unless you have used Google and there are no tutorials on the subject.
Web3 learning platforms - Earn While You Learn
Tags: web3, webdev, beginners
Published: 2022-05-11 18:13:46

One of the more intriguing aspects of the web3 world is getting paid to learn web3 technologies - how cool is that? So, if you're seeking information on how to get started with Web3, you've come to the correct spot. In this article, I will share my bookmarks and the research I did to find quality web3 learning resources.

## Let's get started

## What is "Earn While You Learn"?
All of the platforms listed below offer incentives for completing courses, quizzes, and challenges. Tokens and NFTs are the most common rewards.

## The Platforms

_Note: Order is random._

### 1. CoinMarketCap [#](https://coinmarketcap.com/earn/)
![coinmarketcap](https://i.imgur.com/G3j4K9T.png)

Watch videos -> Complete quizzes -> Earn crypto.

These are the cryptoassests you can earn: $BNB, $SXP, $ROSE, $NEAR, $LIKE, $PERP, $XMS, $URUS, $NFTB, $SAND, $CRU, $CYBER, $FOL, $TKO, $IOTX, $SUSHI, $POLS, $FOC, $MBOX, $REVV, $PPAY, $FIO, $CKB, $1INCH, $GRT, $OXT, $HNT, $LUNA, $KAVA, $BAND

### 2. Pointer [#](https://www.pointer.gg/)
![pointer](https://i.imgur.com/7pge2gH.png)

Get equipped with web3 skills and win cool NFTs or $MATIC.

### 3. StackUp [#](https://earn.stackup.dev/)
![stackup](https://i.imgur.com/r7FeZXq.png)

Learn various crypto technologies with quests, and challenges and get rewarded for it. Learn from developers and level up yourself as a developer with StackUp's live streams.

### 4. Layer3 [#](https://beta.layer3.xyz/)
![layer3](https://i.imgur.com/sZBsQZO.png)

Grow your web3 skills with bounties, contests, and projects and earn rewards.

### 5. Superteam [#](https://www.startonsolana.com/)
![superteam](https://i.imgur.com/y2h1mhI.png)

Earn NFTs by completing quests, getting funds for your projects, and participating in bounties.

### 6. Binance [#](https://academy.binance.com/en/learn-and-earn)
![binance](https://i.imgur.com/TZf9zCR.png)

Complete courses and earn crypto tokens: $BUSD, $SHIB, $XTZ, $IMX, $MULTI, $ALPINE, $WOO, $ONE, $LUNA, $POLS, $QTUM, $ANKR, $COTI

### 7. Cake Defi [#](https://app.cakedefi.com/learn)
![cakedefi](https://i.imgur.com/hWLwaQk.png)

Complete lessons and earn $BTC, $DFI, $ETH tokens.

### 8. Questbook [#](https://openquest.xyz/)
![questbook](https://i.imgur.com/wtpSTsh.png)

Complete different tracks and earn course completion NFT.

### 9. Kucoin [#](https://www.kucoin.com/land/task-center)
![kucoin](https://i.imgur.com/NLfZXeO.png)

Complete tasks and earn $USDT

### 10. Phemex [#](https://phemex.com/learn-crypto)
![phemex](https://i.imgur.com/brPvE72.png)

Earn crypto by watching videos and completing quizzes.

---

What other platforms do you know and what's your favourite platform to learn web3? Share in the comments.

---

I write every week. Follow for more 📖.
My Computer Emits how much CO2?
Tags: lifestyle, todayilearned
Published: 2022-05-11 17:50:33

I have a habit of leaving the computer running even if I'm stepping away from my work station for more than thirty minutes. I forget that computers and the Internet is no exception to reality and so requires energy to do its magic too.  

Out of curiosity, I [googled](https://www.energuide.be/en/questions-answers/how-much-power-does-a-computer-use-and-how-much-co2-does-that-represent/54/#:~:text=The%20power%20consumption%20of%20a,of%20CO2%20per%20year.) how much energy my computer consumes. Apparently, a busy desktop running 8-hour days requires 200 Wh (Watts per hour) and totals to about 600 kWh or 175kg of C02 emissions per year. That's a lot! a laptop takes about a third of the energy of a desktop. In case the whole watt jargon alludes you like it does to me, this [link](https://electricityplans.com/kwh-kilowatt-hour-can-power/) puts the unit into perspective.

The millions of us who rely on our tech tools can really add up. Stand by mode, I'm your friend now. 

How do you reduce waste energy? Please share I'd like to learn!


![A moustache man standing in his tool room, staring at the open door where bright golden light blends onto his face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulmsvfxpxnd1kc2ws6x7.png)
Handling conflicts in a software engineering team
Tags: softwareteam, techteam, conflictresolution
Published: 2022-05-11 18:11:40

---
title: Handling conflicts in a software engineering team
published: true
description: A description of the post
tags: softwareteam, techteam, conflictresolution
---
Handling conflicts in a software engineering team

As software developers, we sometimes find ourselves having to deal with conflicts within the team. It may be caused by a difficult member of the team or even you😁

![Handling conflicts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1k9kxvxzzapw0o6i2l4k.jpg)

I share in the second part of this *3-part series* some ways to handle conflicts within your team
{% embed https://www.rewirewithsusan.com/1161119/10590584-handling-conflicts-in-a-software-engineering-team-part-2 %}

I also recommend listening to the first part here
{% embed https://www.rewirewithsusan.com/1161119/10547454-handling-conflicts-in-a-software-engineering-team %}
Appwrite Hackathon MyApp-22'
Tags: appwritehack
Published: 2022-05-11 18:04:38

### Overview of My Submission

Appwrite is an opensource backend that can use as web and mobile backend since it's already packed with developer must-use features e.g. account, database, object store which enough to develop an application for these days.

The first step installs the Appwrite backend ...

```
docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/install/appwrite:rw \
    -e version=0.6.1 \
    appwrite/install 
```

My application have 5 functions

1. Login
2. List note
3. Create note
4. Edit note
5. Delete note


### Submission Category: 

Wacky Wildcards


### Link to Code

{% embed https://github.com/umacat94/DevHackathon-Appwrite %}


### Additional Resources / Info


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cbviu1wk5e452hzio3m.PNG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1prpcb4zpav6x9xe27x4.PNG)


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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbk2ic9818k3vq8xjrqq.png)
Neutron Service in OpenStack
Tags: cloud, openstack, devops, opensource
Published: 2022-05-11 17:40:25

Last Article we talked about storage in cloud and the difference between block, object and file storage. We will talk about network service in openstack that called Neutron.

1-	What’s Neutron?

-	Like openstack  said , Neutron allows you to create and attach interface devices managed by other OpenStack services to networks.
Plug-ins can be implemented to accommodate different networking equipment and software, providing flexibility to OpenStack architecture and deployment.


2-	Neutron Components : 

-	There are 3 main components in Neutron Service 

A-	Neutron-Server : Routes API requests to the appropriate OpenStack Networking plug-in
B-	OpenStack Networking plug-ins and agents: Plug and unplug ports, create networks or subnets, and provide IP addressing. The common agents are L3 (layer 3).
C-	Messaging queue: Used by most OpenStack Networking installations to route information between the neutron-server and various agents. Also acts as a database to store networking state for particular plug-ins.



3-	Difference between L2 Agent and L3 Agent :


A-	L2 Agent : The L2 agent runs on the hypervisor (compute nodes),and its function is simply to wire new devices, which means it provides connections to new servers in appropriate network segments and also provides notifications when a device is attached or removed. In our install, we will use the OVS agent.

B-	L3 Agent : The L3 agents run on the network node and are responsible for static routing,
IP forwarding, and other L3 features, such as DHCP.





4-	Basic Neutron process : When a new Vm try to booted with neutron , that’s what happen in the back ground 
A-	Boot VM start.
B-	Create a port and notify the DHCP of the new port.
C-	Create a new device (virtualization library – libvirt).
D-	Wire port (connect the VM to the new port).
E-	Complete boot.
Introducing Thunder ⚡
Tags: appwritehack
Published: 2022-05-11 17:40:00

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
Thunder is a fully secure real-time chat application built using Appwrite. Try out Thunder ⚡

I built this with
- HTML
- CSS
- JavaScript
- React
- Appwrite
- react-router-dom
- react-toastify

I had used Firebase before but Appwrite was new and it was amazing. Eight of my friends migrated to Appwrite and he motivated me to give it a try. When I tried Appwrite, my mind was blown 🤯...

You can create an account with only a single line of code, you can create real-time experiences by simply writing a few lines. My experience was amazing! And I was really excited for this hackathon. Though, I started it late due to end sem exams but still I enjoyed the journey and learnt a lot of things. It seems like I am gonna use Appwrite for my further projects.

I've used most of the features that Appwrite offers in this application such as Account, Users, Database, Storage, Realtime etc.

### Database
My database contains two collections and one storage bucket.

**Collections**

- Users

This collection contains the following attributes:

1. Username
2. Email
3. ProfilePicID

- Chat

This collection contains the following attributes:

1. Message
2. From
3. To
4. Time

### Features

- 100% secure registration and login
- Send message to any user in real-time
- Update your profile (including profile picture)
- Delete the messages you don't want
- Search the user which you want to chat to

### Submission Category: 
Web2 Wizards


### Link to Code
{% embed https://github.com/mehtaaajay/thunder %}


### Additional Resources / Info (Screenshots)

![Change Password Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqybdc6d796vckpzdg9c.png)

![Registration Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6q9wltz1of1jbi8zcly.png)

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax2ndkzuaenl3qb2qktm.png)

![Chats Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m5bzv652lcab2l4h6i3.png)

![Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp0dy8457pwmna4cdkld.png)

Finally, love you ♥ Appwrite and Dev. This hackathon was amazing!
Creating a Discord bot with discord.js, Typescript and Heroku
Tags: typescript, heroku
Published: 2022-05-11 17:21:23

Hi! So, some months ago, I was interested in creating a bot for Discord. I searched for tutorials and they were not too good. Worst of all, they taught you how to deploy it to Repl.it. As a senior software dev, I was like: what? Repl.it is the last thing I would think about to deploy anything.

I started coding the bot and the documentation again was not good. They even have wrong information on their docs so I had to ask people on the official discord.js server to clear some doubts. Sometimes people are nice, sometimes they aren't. They have concepts like cached guilds and uncached guilds that took me some time to grasp because they do weird things in Typescript.

Anyway... I gathered all of that knowledge and decided to make a course in Udemy and Skillshare. Here you will learn a lot of things:

- Typescript
- Reply to messages
- Create slash commands
- Create buttons and links
- Create message collectors
- Create embeds
- Create reactions collectors
- Create sub commands
- Get information about a user and its roles
- Add options to commands
- Add simple tests
- Deploy to Heroku and connect it to GitHub for CD
- Permissions
- Best practices

Among other things...

This is the link with the coupon code: https://www.udemy.com/course/building-a-discord-bot-w-discordjs-typescript-and-heroku/learn/lecture/31964864?couponCode=DISCORDBOT#overview
We created easy-to-setup open-source host monitor: Be notified about low Disk/RAM by Slack/Email/Telegram
Tags: monitoring, webdev, opensource, operations
Published: 2022-05-11 17:09:29

[🔗 How to setup on EC2+Cloudflare](https://devforth.io/blog/critical-server-alerts-with-hothost-open-source-quick-to-setup-disk-ram-notifier/)

[🔗 HotHost on GitHub](https://github.com/devforth/hothost)

Previews:

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb58e2v5m006mrpm5fq9.png)
Day-85 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-11 17:03:19

- Date:11/05/2022
- Day:Wednesday

Today, I started at about 10:30 am as I was in progress to complete the java script course so, today I started with the left over task so, firstly I started with 
testing the project that it worked in all aspects so, it worked in all aspects and after this I started with the java script course and firstly the instructor started with configuring babel and poly filling In front-end development, Babel and polyfill have become indispensable. However, some people argue they’re symbolic of black boxification, and it’s hard to know how they’re working in the build process and the differences between them. after this Istarted with modern java script techniques As a beautifully complex and adaptive language, JavaScript has many advantages that only continue to grow every year. It is no wonder that the language and community are so popular given that it had a large hand in bringing user-interface interactivity and responsive web design to the internet. While sometimes complicated, the language proves to be easy to pick up and allows for faster user experiences by being executed client-side.so, this way my day ended up and I get to learn many new things.
Exploit Airtable inside your React app
Tags: react, npm, database, webdev
Published: 2022-05-11 16:57:09

Cover photo by [Jan Antonin Kolar](https://unsplash.com/@jankolar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unsplash

## Intro
At [Karbon 🌱](https://www.karbon.earth/), we iterate fast and we are always looking for ways to improve our products and services. 

We had the idea of building an idea box, allowing users to create, share and vote for ideas of new features.

This is the typical project where we have to store unsensitive data entered by users. However we wanted to avoid impacting the rest of our application (e.g we don't want to change our database schema).

[Airtable](https://airtable.com/) is a great tool for this kind of usecase.

## Let's build this idea box ! 🗳️
Airtable provides an [npm package](https://www.npmjs.com/package/airtable) to interact with their API.
However, since I was working with multiple tables (one for votes, another one for ideas), I found myself repeating a lot of boilerplate code.
I landed on a [hook](https://www.npmjs.com/package/use-airtable) that seemed to provide a nice abstraction to interact with Airtable, but it had some bugs and the author didn't seem to willing to spend time on it. So I decided to write my own hook.

On top of fixing a few issues, I worked on the following points : 
- provide an option to handle errors when fetching, updating or deleting data
- provide an option to filter records using Airtable's `QueryParams`

## Usage 👩‍💻👨‍💻

Install the hook and Airtable's package with your favorite package manager, for example npm :
```bash
npm install --save airtable use-airtable-crud
```

```typescript
const { records, createRecord, updateRecord, deleteRecord, getRecords, loading } = useAirtable(
    'TABLE_NAME',
    AIRTABLE_API_KEY,
    'TABLE_BASE_ID',
    {
      filterByFormula: '{myField} = TRUE()',
    },
  );
```

You can find the source code of the hook [here](https://github.com/NansD/use-airtable-crud).

## Outro
I hope this hook can be useful for you too! Prototyping and iterating is a great way to learn new things.
Hatching JavaScript
Tags: javascript, webdev, beginners, intro
Published: 2022-05-11 16:44:06

## Intro
Hello! Welcome to the first post in a series all about JavaScript. While trying to come up with subjects to talk about my first thought was PHP as its the language that makes up most of my work week. However I decided that I should work on something that would help both myself and the audience learn something.

## Why JavaScript? 
JavaScript is something I have always wanted to become more knowledgeable about, I am not a beginner at writing the language but I feel like I am a beginner at understanding it. There is a big difference. So this will give both myself and the audience an opportunity to learn a little bit, even if the you are an advanced JavaScript user, maybe you can a learn a neat little fact. 

## What to expect from this series? 
The goal is to start at square one, learning about the history of JavaScript and what its used for. Then move into basic JavaScript and coding concepts to more advanced code with libraries and frameworks using node. 

There seems to be endless possibilities of using JavaScript at the moment, from building native applications to rending 3D worlds and games. Once we brush up on the basics and get going with some fun mini projects we will make it to the more complex uses and some bigger projects. 

## Outro
Thanks for reading, 
Feel free to leave suggestions or critiques in the comments. 

Rob Hatcher, 
Hatching Code
WP Tavern #26 – Courtney Robertson on How the Learn Project Is Educating People About WordPress
Tags: wordpress
Published: 2022-12-01 19:03:53

---
title: WP Tavern #26 – Courtney Robertson on How the Learn Project Is Educating People About WordPress
published: true
date: 2022-05-11 16:37:36 UTC
tags: WordPress
canonical_url: https://courtneyr.dev/2022/05/11/wp-tavern-26-courtney-robertson-on-how-the-learn-project-is-educating-people-about-wordpress/
---

![wptavern jpeg](https://courtneyr.dev/wp-content/uploads/2022/10/wptavern-jpeg.webp "WP Tavern #26 – Courtney Robertson on How the Learn Project Is Educating People About WordPress 62")

![wptavern jpeg](https://courtneyr.dev/wp-content/uploads/2022/10/wptavern-jpeg.webp "WP Tavern #26 – Courtney Robertson on How the Learn Project Is Educating People About WordPress 61")

<!-- wp:embed {"url":"https://wptavern.com/podcast/26-courtney-robertson-on-how-the-learn-project-is-educating-people-about-wordpress","type":"wp-embed","providerNameSlug":"wp-tavern"} -->

https://wptavern.com/podcast/26-courtney-robertson-on-how-the-learn-project-is-educating-people-about-wordpress

<!-- /wp:embed -->

This article first appeared on:  
 ![](https://courtneyr.dev/wp-content/uploads/2022/10/wptavern.jpeg)  
[Courtney Robertson -](https://courtneyr.dev)  
by [<span class='p-author h-card'>Courtney Robertson</span>](https://courtneyr.dev/author/courane01/)
Best & trendiest Free Chakra UI Components! [React.js] ⚡
Tags: react, webdev, opensource, showdev
Published: 2022-05-11 16:21:52

Horizon UI - Chakra UI Components. Horizon UI Components comes with dark/light frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. ⚡️

Best & trendiest Free Chakra UI Components!

[See all components here!](https://horizon-ui.com/components/#/)