teleren/devto huggingface dataset:
Don't jus learn Reactjs because of this...
Tags: react, javascript
Published: 2022-11-01 15:08:28

---
title: Don't jus learn Reactjs because of this...
published: true
description: learn react why? Here top reason to learn!
tags: react, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x96u8msk7nnuhrje4vix.jpg
---

Hi everyone! welcome back, I'm Raihan and now you're listening to Codevcast 

Hi everyone 👋, welcome back I'm Raihan, and now you're listening to Codevcast. In this episode, we're having another special guest his name is Slobodan Gajic, previously he works @microsoft as a software engineer but these days now he creating something amazing making an impact for people on his channel youtube.com/c/SlobodanGajic. And today, he wants to share some knowledge and life lessons, let's listen together!

Get in touch with Slobodan Gajic

YouTube: SlobodanGajic LinkedIn: slobodan-gajić Github: bobangajicsm
#2021PodcastersWrapped
#Codevcast #CodeDeveloperCast
#FrontEnd #FrontEndDev #Developers #DeveloperLife
#Podcast2021 #Podcasters #PodcastTech #PodcastTrending

https://www.youtube.com/watch?v=-q_ixW6l0W8&t=55s
Rails - Getting the Current URI
Published: 2022-11-01 18:23:49

As I was attempting to figure out a way to conditionally render a page that required information from the uri, one idea that I had required a way to retrieve the entire url.

After doing some searching, I found the following:

```
current_uri = request.env['PATH_INFO']
```
This acquires the entire current path in the address bar.


While I did not end up using the solution using the path and instead used params, I felt that this might be good information to have should I ever require the full path.
3D Perspective Card using JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-11-01 18:20:15

Hello Guys! Welcome to [Coding Torque](https://codingtorque.com). In this blog, We are going to make a card with a 3D perspective using javascript. We can use this card on the payment page for showcasing the credit/debit card details. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

## **Let's cover HTML Part**
We use HTML to make the skeleton of a website. HTML is a markup language. 

## **Here is the final HTML code**

```html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>3D Perspective using Tilt.js - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div class="card">

        </div>
    </div>
</body>

</html>
```

[continue reading](https://www.codingtorque.com/2022/08/3d-perspective-card-using-javascript.html)
Starting is the hardest part right!
Published: 2022-11-01 18:12:51

Looking to mint a NFT on XRPL for an existing use case in B2B oil/gas/shipping.  Should I mint the token first or do I need to build, then mint.. I don't want to run out of time or the token to expire before the launch. 
Thanks in advance, this is all new to me but longtime Zerper in XRP 6+ yrs!
The 7 Best React Component Libraries to Use in 2022
Tags: javascript, webdev, react, productivity
Published: 2022-11-01 18:10:27

In this article, I will be sharing with you 7 awesome React UI libraries that you should check out.

## 1. [tremor](https://www.tremor.so/)

Tremor is a low-level, opinionated UI component library to build dashboards. It offers components, such as charts, layouts, or input elements, covering the essential parts of a dashboard or analytical interface. Our approach provides great flexibility between beautiful defaults and fast customization. The best way to get started is to check out our templates, called Blocks, for getting a feeling of how components are used and combined.

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

## 2. [planby](https://planby.netlify.app/)

Planby is a component for a quick implementation of EPG, live streaming timelines, schedules, music events, timelines and many more ideas.

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

## 3. [React DnD](https://react-dnd.github.io/react-dnd/about)

React DnD is a library that uses the HTML5 drag and drop API to create complex drag and drop interfaces. It is built on top of the modern API, making it easier to use and more powerful.

![Image description](https://i.stack.imgur.com/gSl5W.gif)

## 4. [Advanced Cropper](https://advanced-cropper.github.io/react-advanced-cropper/)

This react cropper library gives you the possibility to create croppers that exactly suited for your website design. Don’t limit yourself. Rotate, zoom, transitions, autozoom and many other features included.

![Image description](https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/28605/advanced-cropper-3.jpg)

## 5. [React Reflex](https://www.npmjs.com/package/react-resizable)

Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my requirements.

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

## 6. [Tailwind](https://tailwindcss.com/)

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

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


## 7. [React Query](https://github.com/tanstack/query)

Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you 
declarative, always-up-to-date auto-managed queries and mutations

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gx2usjxpd5giijizig2.gif)

----------------

Looking for a great community of people interested in Javascript and Crypto? Join our Discord server! 💙🧪

Discord:
https://discord.gg/P8bjJ7CzBV
Website Developer Needed!!!! 🧬💻
Tags: opensource, bioinformatics, webdev, javascript
Published: 2022-11-01 17:57:11

DNAnalyzer is a highly efficient, powerful, and feature-rich algorithm for analyzing DNA sequences. We are a growing project (we have ~60 stars right now), with more coming every day to support our mission.

Star our repo: https://github.com/Verisimilitude11/DNAnalyzer

Currently, we are in need of a new website using any JS library. If you are interested, please join the DNAnalyzer server to get more info: https://discord.gg/X3YCvGf2Ug
THE START OF PROGRAMMING JOURNEY
Tags: beginners, javascript, programming, python
Published: 2022-11-01 17:54:50

I'M JEEVAN TODAY I'M STARTING MY PROGRAMMING JOURNEY .I HAD SOME BASIC UNDERSTANDING IN THE PAST.NOW I WANT TO START FRESH AND DOCUMENT MY WHOLE JOURNEY AND WANT THAT JOURNEY TO BE AN AWESOME ONE AND GETTING INVOLVED IN DEVELOPER COMMUNITY AND LEARNING A LOT FROM OTHERS AND GET INSPIRED AND SHARE MY EVERYDAY OR WEEKLY PROGRESS.

I HOPE TO LEARN PROGRAMMING AND ENJOY DEVELOPING AND CREATING NEW FRIENDS.

THANKS FOR READING MY ARTICLE ,
JEEVAN.K -
Kısa Notlar 001 - LDIF Dosyaları
Published: 2022-11-01 17:48:53

**LDIF:** LDAP kayıtlarının düz metin biçimde ifade edildiği dosyalardır. LDAP taki bilgilerin tamamını içeribileceği gibi bir kısmını da içerebilir. Yeni kayıt ekleme,çıkarma, değiştirme işlemleri yapılabilir.

**ldapadd -x -W -D "cn=admin,dc=cloudsio,dc=com" -f drivers.ldif**

Yukarıdaki komutla bind dn olarak cn=admin,dc=cloudsio,dc=com kullanılarak driver.ldif dosyasındaki kayıtlar ekleniyor.

Ldif dosyalarını ya da ldap kayıtlarınızı görselleştirmek için [ldif2dot](https://marcin.owsiany.pl/ldif2dot-page) kullanabilirsiniz.

```
# dot , graphviz paketinden geliyor.
sudo apt update && sudo apt install graphviz -y
chmod +x ldif2dot.py
# -b parametresi ile nereden başlayarak arama yapacağımızı belirtiyoruz.
ldapsearch -x -b 'dc=cloudsio,dc=com' | ./ldif2dot.py |       dot -o myDomain.png -Nshape=box -Tpng /dev/stdin
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mmyqoq0h6wzgj59r2ff.png)
30 Days of Developer Advocacy
Tags: beginners, career, motivation
Published: 2022-11-01 17:48:31

For the next 30 days I am going to spend a large portion of my time on developer advocacy. I have minimal experience in this area but it is something that I want to get better at. I am writing this document at the start to commit myself to giving it my all for a month, then figuring out a more sustainable approach afterwards.

My goals for this exercise are to
- Build a developer audience
- Learn new things
- Get out of my comfort zone
- Advocate for enclaves & confidential computing
- Advocate for my company: capeprivacy.com 

I don't know much about community building or this space, so I will be learning as I go. I expect to not be great at it and produce stuff with lots of rough edges.

What I do have going for me is that I am a good software engineer, and I like to learn and try new things.

What I think will work against me is lack of experience putting myself out there and the social anxiety that comes along with doing that.

Since I know nothing about this, my naive initial approach is going to be trying to stick to a content schedule. I will try to make a few different types of content:

- Videos (1 per week)
- Tweets (>= 1 one per day)
- Blogs (2x per week)

Other things I will try to do but not committing to an amount include
- Comments on HN 
- Comments / posting on random subreddits
  - [/r/golang](https://www.reddit.com/r/golang), [/r/kubernetes](https://www.reddit.com/r/kubernetes), etc

I'll change this up as I learn more.

How will I know I was successful? I am not sure. I think there will be a lot to learn just in doing the exercise, even if I gain 0 followers (although I hope I get at least one). I can also look at metrics for social posts (e.g., am I getting more impressions?), follower counts on twitter & linkedIn, etc.

Looking forward to the next 30 days! If you are reading this and have ideas for me or things to try out, or would like to play along, let me know! I would love to learn from anyone that has done this before :).
What was your favorite Hacktoberfest experience?
Tags: discuss, opensource
Published: 2022-11-01 17:47:11

---
title: What was your favorite Hacktoberfest experience?
published: true
description: 
tags: discuss, opensource
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-01 17:43 +0000
---

We've wrapped another Hacktoberfest season, and we want to hear all about your great experiences!
Getting back into coding for the 5th time. Wish me luck
Tags: beginners, career, 100daysofcode, community
Published: 2022-11-01 17:41:16

This will be the 5th time I’m “starting” to code again. 

I’ve wanted to get much better at coding for so many years but life always seemed to get in the way. Or maybe I’ve just been lazy.

So, I’m writing on here to create some accountability for myself. 

A bit of history:

I started when I was about 12. Wrote QBasic building simple games during a summer coding camp. Then didn’t write a single line of code again for 14 years. In that time, I finished high school, completed an undergraduate degree in architecture, got an MBA, started and failed at several businesses … several! Graphic design companies, an e-commerce business, a recycling company and an alcohol delivery startup are just a few of them. I even did a stint in the family business which I still can’t seem to get out of. 

However, it was my most recent business (a health tech startup) that’s drawn me back to coding. I started with a technical cofounder in 2017. We built Electronic Medical Records software for African hospitals and we’ve since had some success - raised VC money, won a few grants and became a household name in the Nigerian health industry. Now we’re on the heels of a fruitful exit. But I never wrote any of our code. The journey was extra frustrating because of this. I’d have to wait ages for devs to push stuff. I’d be unable to give updates to customers and investors because I wasn’t involved in that part of the business. We’d hired several engineers who were just terrible - One even lost us about $5,000 and almost destroyed our company. If I was actively coding through all of this, we’d have been much better off.

The few sprints I spent with my CF and his dev team gave me a taste of what I’d been missing since I was 12 years old. Coding, back then, gave me so much joy. I loved being able to exercise my mind and create things out of nothing. I loved (and still love) computers.

I tried again in 2018 with a bootcamp in Nigeria - didn’t finish it. Tried again in 2019 - dropped it to focus on UI/UX because that’s what my company needed at the time. Joined a free coding course in 2020 but work got so busy at my startup (that’s when we raised VC $$ and got to the final stage of YC interviews) that I couldn’t focus. COVID was also a major distraction for every health tech company at the time. In 2021, planning my wedding took all my time. After that, a family tragedy disrupted everything in my life. 

It’s now 2022 and I’m back again. I’ve put all my past failures behind me and I am going to try coding again.

I hope this community will help to hold me accountable as I restart my journey.

Wish me luck
ternary operator
Published: 2022-11-01 17:30:18

_the suspicious one_

```
<% @users.each do |a_user| %>
  <tr>
    <td><%= a_user.username %></td>
    <td><%= a_user.private ? "Yes" : "No" %></td>
```
a_user.private == true ? "Yes" : "No"
also works, but since private is boolean already, and ternary is testing boolean, can just edit it out

meaning: if a_user's private key is assigned value true, prints out yes. if not, prints out no
Jodit-angular dependency issue while migrating to Angular 9
Tags: angular, jodit, javascript, zonejs
Published: 2022-11-01 17:28:58

Getting the below error while trying to run the command `npm install ` after the angular migration to version 9.

```
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: jodit-angular@1.9.4
npm ERR! Found: zone.js@0.10.3
npm ERR! node_modules/zone.js
npm ERR!   peer zone.js@"~0.10.3" from @angular/core@9.1.13
npm ERR!   node_modules/@angular/core
npm ERR!     @angular/core@"^9.1.13" from the root project
npm ERR!     peer @angular/core@"9.1.13" from @angular/animations@9.1.13 
npm ERR!     node_modules/@angular/animations
npm ERR!       @angular/animations@"^9.1.13" from the root project       
npm ERR!       2 more (@angular/platform-browser, jodit-angular)
npm ERR!     11 more (@angular/cdk, @angular/common, @angular/forms, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer zone.js@"~0.9.1" from jodit-angular@1.9.4
npm ERR! node_modules/jodit-angular
npm ERR!   jodit-angular@"1.9.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: zone.js@0.9.1
npm ERR! node_modules/zone.js
npm ERR!   peer zone.js@"~0.9.1" from jodit-angular@1.9.4
npm ERR!   node_modules/jodit-angular
npm ERR!     jodit-angular@"1.9.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

npm ERR! A complete log of this run can be found in:
```

I have added the `zone.js` deps version in the package.json as an override to the `jodit-angular` as below.

```
"overrides": {
  "angular/core": {
    "zone.js": "$zone.js"
  }
}
```

This just helped me to run the `npm install` successfully but the jodit is `undefined` while trying to run the application.
Console error,
```
Uncaught TypeError: Cannot read properties of undefined (reading 'Jodit')
```

Will it help me if I upgrade the version to `Angular 10`

Any help would be appreciated.
SEO
Published: 2022-11-01 17:24:02

"The blog is all about SEO. That’s like [On-page SEO](https://freelancermillad.com/), Off-Page SEO & Technical SEO, Google AdSense, and Online Income Related.

The Best SEO Blog site for bloggers. We serve On-page SEO, Off-Page SEO & Technical SEO, Google AdSense, Online Income, etc review solution tips as well as we can do. We are working for helping visitors, who face SEO-related problems."
Redux Actions - Without declaring CONSTANTS and action-creator functions for each action
Tags: redux, react, javascript, lib
Published: 2022-11-01 17:15:40


## [Actions Creator](https://actions-creator.js.org/)


You can find the full documentation on the [https://actions-creator.js.org](https://actions-creator.js.org)

### Description

**actions-creator** is an awesome javascript package that allows you to **dynamically** create action objects in Redux **without** having to declare *CONSTANTS* and separate *action-creator* functions for each action.

### Installation

```bash
npm install actions-creator
```

### Usage Example


```javascript
import {actionsCreator} from 'actions-creator'

const action_1 = actionsCreator.MY.FIRST.ACTION('arg1')
//      {
//          type: 'MY/FIRST/ACTION',
//          payload: 'arg1',
//      } 

const action_2 = actionsCreator.This.is.my.second.action(2021)
//      {
//          type: 'This/is/my/second/action',
//          payload: 2021,
//      } 


// To get the type of action
String( actionsCreator.MY.FIRST.ACTION ) // 'MY/FIRST/ACTION'
// or
actionsCreator.MY.FIRST.ACTION().type // 'MY/FIRST/ACTION'

```

### Actions With Callback

Sometimes we need the action to have **callback capability**. It might be necessary in many cases.

**`Actions Creator`** allows us to do this in a beautiful way: 
When we try to generate an action object, we can pass the **callback function** as the last argument. `Actions Creator` will check and if the last argument is a function, it will be considered as a **callback function**.

```javascript
import {actionsCreator} from 'actions-creator'

const callback = () => {
    console.log('Hello, I am callback!!!')
}

const action = actionsCreator.MY.CALLBACKABLE.ACTION(123, callback)
//      {
//          type: 'MY/CALLBACKABLE/ACTION',
//          payload: 123,
//          cb: [Function callback],
//      }

action.cb() // 'Hello, I am callback!!!'
```

### Syntax

#### `actionsCreator.ANY.ACTION(payload, callback?)`

- **payload** `<Any>`  
    Any value as a payload.
- **callback** `<Function>`  
    Any function as a callback.

**Returns** `<Object>` 

- **type** `<String>` Action type as a string.  
    ```js
    actionsCreator.ANY.ACTION().type === 'ANY/ACTION' // true
    ```
- **payload** `<Any>`  
    The value of the payload - given in the first argument.
    ```js
    actionsCreator.ANY.ACTION(123).payload === 123 // true
    ```
- **cb** `<Function>`  
    The function of the callback - given in the last argument.
    ```js
    const callback = () => {};

    actionsCreator.ANY.ACTION(123, callback).cb === callback // true
    ```

## [Documentation](https://actions-creator.js.org)
- [Actions Creator](https://actions-creator.js.org/docs/actions-creator)
- [Customization](https://actions-creator.js.org/docs/customization)

## Links
- [GitHub](https://github.com/Ruben-Arushanyan/actions-creator)
- [NPM](https://www.npmjs.com/package/actions-creator)
- [Twitter](https://twitter.com/RubenArushanyan)
Two Furthest Houses With Different Colors
Tags: javascript, leetcode
Published: 2022-11-01 17:13:31

[Two Furthest Houses With Different Colors](https://leetcode.com/problems/two-furthest-houses-with-different-colors/)

There are n houses evenly lined up on the street, and each house is beautifully painted. You are given a 0-indexed integer array colors of length n, where colors[i] represents the color of the ith house.

Return the maximum distance between two houses with different colors.

The distance between the ith and jth houses is abs(i - j), where abs(x) is the absolute value of x.


Example 1:
Input: colors = [1,1,1,6,1,1,1]
Output: 3
Explanation: In the above image, color 1 is blue, and color 6 is red.
The furthest two houses with different colors are house 0 and house 3.
House 0 has color 1, and house 3 has color 6. The distance between them is abs(0 - 3) = 3.
Note that houses 3 and 6 can also produce the optimal answer.

Example 2:
Input: colors = [1,8,3,8,3]
Output: 4
Explanation: In the above image, color 1 is blue, color 8 is yellow, and color 3 is green.
The furthest two houses with different colors are house 0 and house 4.
House 0 has color 1, and house 4 has color 3. The distance between them is abs(0 - 4) = 4.

Example 3:
Input: colors = [0,1]
Output: 1
Explanation: The furthest two houses with different colors are house 0 and house 1.
House 0 has color 0, and house 1 has color 1. The distance between them is abs(0 - 1) = 1.

```js
/**
 * @param {number[]} colors
 * @return {number}
 */
var maxDistance = function(colors) {
  let start = 0;
  let end = 1;
  let maxFromStart = 0;
  let maxFromEnd = 0;
  while (end < colors.length) {
    if (colors[start] !== colors[end]) {
      let diff = Math.abs(start - end);
      if (maxFromStart < diff) {
        maxFromStart = diff;
      }
    }
    end++;
  }

  end = colors.length - 1;
  while (start <= end) {
    if (colors[start] !== colors[end]) {
      let diff = Math.abs(start - end);
      if (maxFromEnd < diff) {
        maxFromEnd = diff;
      }
    }
    start++;
  }
return Math.max(maxFromEnd, maxFromStart)
};

console.log(maxDistance([4, 4, 4, 11, 4, 4, 11, 4, 4, 4, 4, 4]));

```
Creating a Go SDK for Buildable.dev (Part 1)
Tags: programming, go, opensource
Published: 2022-11-01 17:00:00

## Introduction

Message handling across distributed applications is an often times complex and difficult engineering challenge. The advantage of good messaging is quick integration between lots of disparate services be it for e-commerce, devOps or even for analytics but keeping these different systems in sync is a serious challenge. 

There are **plenty** of options in this game be they built in house on-top of solutions like Kafka, or more generic open and closed source solutions. 

After coming across a new offering in [buildable.dev](https://www.buildable.dev/), and noticing it only supports a [NodeJS SDK](https://github.com/buildable/node-sdk) I decided to try my hand at building another SDK in Go, a favourite language of mine, and an up-and-coming solution for writing micro-services which perfectly fits the use case of a real-time event stream solution like Buildable. 

## Buildable's Events

Buildable provides a simple interface for creating and listening to events, at it's most basic we can:
 - Emit new events
 - Listen for events being emitted (transact)

### Event emissions

In the buildable world, each event has a name and an associated JSON payload, for example:

```json
{ 
  "event": "my-first-event",
  "payload" {
    "hello": "world"
  }
}
```

we can emit a basic event through CURL with the following command:

```bash
curl --request POST \
 --url https://events.buildable.dev/emit \
 --header 'Content-Type: application/json' \
 --header 'X-Buildable-Secret: SECRET' \
 --data '{
  "event": "my-first-event",
   "payload": {
    "salutation": "Hello World!"
  }
}'
```

which will get nicely picked up on your buildable dashboard.

### Transactions

On the other-hand, we can consume these events and action on them. Simply put, we're registering an interest in this event and consuming it's payload in our application in order to react to data changes somewhere else, be it our own microservice or through another connection to an application like stripe. In the Javascript SDK this is done like so:

```javascript
client.on("my-first-event", async ({ payload }) => {}, { 
  platform: "custom", 
  label: "demo",
})
```

Seems simple enough right!

## The meat and potatoes

So, we have the rough idea of how this SDK should work. In essence, we want to be able to create a client that can:
- Emit events based on actions
- Register for events
- Action based on the registered events
- Deregister from events if need be