teleren/devto huggingface dataset:
What is JSX in React
Tags: react
Published: 2023-06-02 08:16:56

JSX stands for JavaScript XML and is a syntax extension used in React to describe the structure and appearance of user interfaces. It allows you to write HTML-like code within JavaScript, making it easier to define the components and their rendering logic.
To gain in-depth knowledge of React and JSX, you can enroll in a [React certification](https://www.edureka.co/reactjs-redux-certification-training). These courses provide comprehensive instruction, hands-on exercises, and real-world projects to help you master React development and become a certified React developer.

**In JSX, you can write HTML-like tags and elements directly in your JavaScript code. Here's a brief overview of JSX:**

**1. Syntax:** JSX syntax resembles HTML, but it is embedded within JavaScript. You can use angle brackets (<>) to define elements, apply attributes, and nest child elements. **For example:**

   ```jsx
   const element = <h1 className="title">Hello, JSX!</h1>;
   ```

**2. Expressiveness: **JSX allows you to use JavaScript expressions within curly braces ({}) to dynamically generate content or apply logic. This includes variables, functions, and conditional statements. For example:

   ```jsx
   const name = "John Doe";
   const element = <h1>Hello, {name}!</h1>;
   ```

**3. Component Composition:** JSX enables the creation and composition of React components. You can define custom components as functions or classes and use them just like HTML tags. For example:

   ```jsx
   function Greeting(props) {
     return <h1>Hello, {props.name}!</h1>;
   }

   const element = <Greeting name="John Doe" />;
   ```

**4. HTML Attributes:** JSX supports standard HTML attributes, such as `class` (renamed to `className` in JSX) and `style`, as well as custom attributes. These attributes can be assigned static or dynamic values using JavaScript expressions.

Using JSX in React simplifies the process of defining and rendering UI components. It combines the power and flexibility of JavaScript with a familiar HTML-like syntax, making it more intuitive and efficient for building complex user interfaces.

To validate your knowledge and skills in React, including the use of JSX, you can consider obtaining a React certification. React certifications cover various aspects of React development, including JSX syntax, component-based architecture, state management, and best practices. By earning a React certification, you demonstrate your proficiency in React and enhance your career prospects as a React developer.
Remote jobs for developers
Tags: remote, remotework, remotejobs, pracazdalna
Published: 2023-06-02 08:13:48

What you think about staying at home, doing your job and earning money? It sound great, isn't it? It's remote work life style - best solution for tech industry (but not only! :)

I have been working as a Ruby on Rails Developer for several years and when I'm looking for a job, I'm always looking for **[remote jobs](https://remojobs.com)** offers.

It was also an impulse to create a job board with remote job advertisements for programmers and other specialists in the technology industry.

This is how www.Remojobs.com was created in 2019, initially as a project where I learned to program in Ruby on Rails, and then as a serious project that is constantly evolving.

I care about transparency, which is why **all offers have salary ranges**.

If you are looking for **remote work** as a programmer, I encourage you to visit my website - maybe you have any suggestions regarding new functionalities? I'll gladly implement them, although I still have a lot of them on my to-do list.

Do you know other interesting sites like **Remojobs**? Share with us :)
Social Engineering: What if the user opens backdoors to strangers?
Tags: security
Published: 2023-06-02 07:51:41

Another great session at this weeks German OWASP Day was the closing keynote by [Christina Lekati](https://www.linkedin.com/in/christina-lekati-social-engineering/) with the title "Social Engineering: What if the user opens backdoors to strangers".

As a Psychologist, Social Engineering Specialist, and OSINT Practicioner, Christina presented some impressive (and quite scary) real-world examples of elaborate social engineering attacks that go far beyond simple hit-and-run type phishing attempts. 

She dove deep into the motivation and techniques of weaponized psychology before showing how you can establish means and mechanisms that help protect yourself and your organization.

If you weren't able to attend, here's a recording of a similar talk she presented at InsomniHack: Targeted Social Engineering Attacks: Weaponizing Psychology

{% embed https://www.youtube.com/watch?v=SfBj0xnd_XI %}

I must say, this talk was a perfect closing, providing the icing on the cake of an otherwise very technical conference with lots of demos, deep-dives, and hands-on examples.

Thanks to [Dan Gora](https://www.linkedin.com/in/dansecops/ "Dan Gora"), [Jonas Becker](https://www.linkedin.com/in/beckerjonas/ "Jonas Becker"), [Dirk Wetter](https://www.linkedin.com/in/drdirkwetter/ "Dirk Wetter"), and the entire organizing team for setting up this amazing community event with fun, informative, and educational sessions on all things security! I'll definitely be there again next year 😀
Xamarin.iOS : Image resizes/Scales to blank
Published: 2023-06-02 07:16:21

**When we click image from camera to upload we scale down the image to 800*600 size but after uploading to server image is showing gray/currpeted**


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

We are using below code in Xamarin.iOS to Scale the image but after uploading image to server its showing gray/blank image
 `var sourceSize = sourceImage.Size;
        var maxResizeFactor = Math.Min(newSize.Width / sourceSize.Width, newSize.Height / sourceSize.Height);
        
        if (maxResizeFactor > 1) return sourceImage;
        var width = maxResizeFactor * sourceSize.Width;
        var height = maxResizeFactor * sourceSize.Height;
        UIGraphics.BeginImageContext(new CGSize(width, height));
        sourceImage.Draw(new CGRect(0, 0, width, height));
        var resultImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return resultImage;`

**Please help us to resolve this issue**
Nếu anh em
Published: 2023-06-02 07:09:32

Nếu anh em đang hứng thú với cách chơi chẵn lẻ Momo thì đừng bỏ qua bài viết dưới đây. Chúng tôi sẽ giúp bạn tìm hiểu từ A đến Z cách chơi sao cho hiệu quả.
Tất tần tật cách chơi chẵn lẻ Momo các newbie cần biết
Chẵn lẻ Momo là một thể loại mini game được rất nhiều người yêu thích. Về cơ bản, khi thực hiện chuyển khoản qua Momo, anh em sẽ nhận được một mã giao dịch. Mã này là duy nhất và không thể trùng lặp với các giao dịch khác. Chính vì vậy chẵn lẻ Momo sử dụng mã này để tạo thành mini game. Mục đích nhằm đáp ứng nhu cầu giải trí cho nhiều người chơi hiện nay.
Những điểm ưu việt của game chẵn lẻ Momo
Những điểm ưu việt của game chẵn lẻ Momo
Không phải ngẫu nhiên mà chẵn lẻ Momo lại được yêu thích đến vậy. Điều này một phần là do Momo là phương thức giao dịch trực tuyến quá phổ biến tại các nhà cái. Ngoài ra trò chơi này còn có một số điểm nổi bật như sau:
Dễ chơi và có số lượng người chơi đông
Luật chơi chẵn lẻ khá dễ hiểu và đơn giản. Người mới bắt đầu chưa biết gì cũng có thể nắm ngay trong vài phút là có thể bắt đầu tham gia. Đây chính là ưu điểm lớn nhất mà trò chơi này mang đến. Ngay cả các học sinh, người lớn đang đi làm cũng có thể tham gia chơi và nhận tiền thưởng dễ dàng.
Tiết kiệm thời gian
Một ưu điểm nữa là nhanh chóng và tiết kiệm thời gian. Mỗi vòng của [chẵn lẻ Momo](http://clmm.global/) chỉ mất khoảng 2 phút kể từ khi anh em bắt đầu dự đoán cho đến khi đặt cược. Cũng nhờ vậy mà người chơi có nhiều cơ hội kiếm thêm tiền.
Số lần chơi lên đến 150 giao dịch
Nếu xổ số, lô đề hay vietlot chỉ diễn ra định kỳ mỗi ngày một lần, thậm chí đôi khi là cả tháng 1 lần. Tại chẵn lẻ Momo, anh em có thể chơi tới 150 lần một ngày với các lượng sự kiện giao dịch tương ứng.
Điều này thật hấp dẫn quá phải không? Chính vì vậy nếu anh em thua một hoặc hai lần thì vẫn có cơ hội lấy lại vốn nhanh chóng.
Cách chơi chẵn lẻ Momo hữu hiệu anh em cần biết

Cách chơi chẵn lẻ Momo hữu hiệu anh em cần biết
Để có thể chơi game chẵn lẻ Momo dễ dàng, anh em hãy thực hiện theo các bước dưới đây:
Bước 1: Đầu tiên anh em tìm kiếm và chọn ra một nhà cái uy tín. Nhiều người chơi thường chọn truy cập vào clmm.global để chơi game.
Bước 2: Anh em nên đọc kỹ nội quy và hướng dẫn của game chẵn lẻ Momo để nắm được các thông tin dự đoán tỷ lệ cược và cách tính điểm.
Bước 3: Sau khi đọc xong, hãy tiến hành gửi số tiền đặt cược theo hạn mức mong muốn và ưu đãi của nhà cái. Anh em đừng quên dựa theo các dự đoán trên mô hình có sẵn để đặt cược.
Bước 4: Người chơi kiểm tra số điện thoại, mức cược và cú pháp dự đoán trước khi tiến hành đặt cược. 
Bước 5: Cuối cùng hệ thống nhà cái sẽ xác nhận giao dịch của anh em. Nếu thành công hệ thống sẽ gửi lại mã code và thông báo kết quả lần chơi.
Với 5 bước cơ bản trên là anh em đã tham gia một phiên giao dịch chẵn lẻ Momo thành công. Nếu không trúng thì anh em hãy gỡ lại ở lần chơi kế tiếp. Đừng quên game này cung cấp đến 150 giao dịch trong một ngày đấy nhé!
Kết luận
Trên đây là toàn bộ thông tin về game chẵn lẻ Momo và cách chơi để các anh em nắm rõ. Hy vọng rằng các game thủ có thể may mắn hơn sau khi tham khảo bài viết này.
Troubleshooting Component Import Error during Angular 16 Upgrade
Tags: angular
Published: 2023-06-02 07:04:13

Hello everyone, 

I recently upgraded Angular from version 15 to 16 and encountered a challenging bug. Could you please help me take a look at it? The error message I'm getting is: ✘ [ERROR] TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler].


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


I examined the source code and indeed did not find the `@NgModule` annotation because it was declared in the `d.ts` file for the `SortablejsModule`. Now I would like to know how to fix this issue. I would be extremely grateful if you could provide any valuable suggestions.

Thank you very much!
Being a Developer Advocate: Week 36
Tags: devrel, learninpublic
Published: 2023-06-02 07:00:32

Heyho there 👋🏼 Short week in Germany with only four workdays 🥳

Nevertheless there was some work to do:

* We held another monthly workshop which was a little bit short as we demoed a feature which is still in beta and funnily enough it will change in the near future 😋
* Also I got some writing in as I released [the first part of my DevRel-Metrics blog post series](https://fiveandahalfstars.ninja/blog/2023/2023-06-01-a-comprehensive-devrel-metrics-guide-part1.html), where I try to get DevRel-Metrics sorted out for myself.
* Straightened out our askui-example repository. The API has changed a bit and a few pieces of code where outdated.
* And I managed to write another guide for our docs, which always feels nice

Shameless plug here for the podcast a colleague and me released. We are talking about AI and and computer vision in particular. We also leave out all the hype, which is extremely annoying at the moment.

So you might enjoy it: [Profile page of Podcast](https://podcasters.spotify.com/pod/show/jandjtalkai )
When Sci-fi Gets Real: Which Story Hits Too Close to Home?
Tags: discuss, watercooler
Published: 2023-06-02 07:00:00

> 
"Science fiction is the most important literature in the history of the world because it's the history of ideas, the history of our civilization birthing itself." -Ray Bradbury

Hey, sci-fi fans! Let's talk about sci-fi novels that hit a little too close to reality. You know, the ones that made you go, "Wait a minute..." or "Uh oh." Share the book that left you shook, where the futuristic world felt just a step away from our own. From dystopias to mind-bending technologies, let's discuss how these stories resonate with our ever-evolving world. 

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
APIs Unveiled: Interview Edition! How Have You Worked Your Developer Magic?
Tags: discuss, beginners, codenewbie, career
Published: 2023-06-02 07:00:00

Let's unravel the mysteries of APIs! This topic often makes an appearance in technical interviews. Can you break down the concept of Application Programming Interfaces (APIs) in simple terms? And, more importantly, share a cool project where you've flexed your coding skills by integrating an API? 

Newbies and experiences DEVs alike, please weigh in so we can compare notes! How would you answer - or how have you answered - this question during an interview?

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* [https://dev.to/codenewbieteam](https://dev.to/codenewbieteam) *%}*
Let's Chat With ChatGPT: A Beginner's Guide To AI Coding
Tags: beginners, programming, tutorial, ai
Published: 2023-06-02 06:28:27

Pull up a chair, tech enthusiasts! Imagine if we could ditch the sterile world of coding and step into a lively, engaging chat with our programs instead. Impossible? Nah. Science fiction? Close, but no cigar. Welcome to the world of ChatGPT! This AI language model is a chatterbox who can help us turn programming into an interactive, informal conversation. So let's roll up our sleeves and dive right in!

## The ChatGPT Chronicles
Before we get our hands dirty with code, let's get to know our talkative buddy better. ChatGPT, developed by OpenAI, is an AI language model that's quite the linguist. This smarty-pants is designed to complete prompts and generate text that's impressively human-like. In fact, it's so good that according to a 2020 OpenAI study, around 30% of users reported they sometimes forgot they were chatting with an AI! Talk about a smooth talker.

## The Key to the AI Kingdom
The first step to getting chatty with ChatGPT is grabbing your API key from the OpenAI website. Think of it as your personal password to the AI kingdom, allowing you to call upon your loyal AI servant anytime you want.

Now, to get the Python OpenAI library (think of it as your magic carpet to the AI kingdom), simply run:

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

## A Python Chat with ChatGPT
Now comes the fun part! Let's see ChatGPT in action. We're going to whip up a Python program that lets us converse with ChatGPT. Replace 'your-very-own-api-key' with your actual API key.

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

This script initiates an endless conversation with ChatGPT. Type in anything and the AI will return a response! To wrap up the conversation, simply type 'quit'.

## A Friendly Face for Your Chat Interface
Alright, time to add a dash of charm to our program! Let's give our program a nice, clean interface using the Python tkinter library. It's a bit like dressing up your AI chatbot in a snazzy suit.

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

Replace the chat_with_gpt3() function with the one you created earlier. And there you have it, a nice chat interface for interacting with your AI buddy!

## A Step Further
So, there you have it, folks! An interactive chat with a witty, intelligent AI model that's quite the conversationalist. And you've been at the helm, coding your way through, like the tech wizard you are! But why stop here?

If you're curious and ready for more fun with ChatGPT, feel free to check out the [ChatGPT Coding Course](https://icons8.com/l/chatgpt-coding-course/). Remember, the world of AI is vast and exciting, and you're just getting started. So here's to many more coding adventures!
What is this in Javascript
Tags: javascript
Published: 2023-06-02 06:02:44

## This is confusing
`this` in Javascript is quirky, unlike in other programming languages where `this` is usually quite straightforward as it is a reference to the object where the property or method is invoked, in Javascript `this`'s value is varied by its usages. Let's take a look.

&nbsp;
### This in a regular function
`this` in regular function refers to the execution context of the codes in the example shown below `this` value is the Node.js's global object if the function is run in the browser then the value is the browser's window object.

{% replit https://replit.com/@rngranggapr/this-in-regular-function %}

&nbsp;
### This in strict mode
One thing to keep in mind while working with `this` is whether you are using the strict mode or not, introduced in ES5, strict mode is a restricted version of JavaScript, it's supposed to help you write secure codes. In strict mode the global execution context is undefined.

{% replit https://replit.com/@rngranggapr/this-in-strict-mode %}

&nbsp;
### This in an event handler
`this` when evaluated inside the callback of an event listener refers to the element where the event is triggered.

{% replit https://replit.com/@rngranggapr/this-in-event-listener %}

&nbsp;
### This in an object
In object, `this` refers to the object which calls the function. In the example below `introduce` is a method of `person` object.

{% replit https://replit.com/@rngranggapr/this-in-object %}

&nbsp;
### This in an arrow function
`this` inside an arrow function is where it gets confusing. unlike regular function, where `this` is bound to the object that calls the function, the arrow function uses something called lexical scoping which basically looks for `this` value in their enclosing parent and inherits it. In the example below, `this` inside the `introduce` method inherits its value from the `person` object which has `this` value of the window object, while `this` inside the `doIntroduction` inherit its value from `casualIntroduce` method since it's a regular function its bind `this` value to `person` object.

{% replit https://replit.com/@rngranggapr/this-in-arrow-func %}

&nbsp;
### This in a constructor function
If you use `this` in a constructor function and invoke it with the `new` keyword it will create a new object from `this` defined inside the function and `this` will refer to the said object.

{% replit https://replit.com/@rngranggapr/this-in-constructor-func %}

&nbsp;
### This can be whatever you want
But if all of the usages mentioned above are confusing to you and you have had enough of it and don't want to guess what value of `this` in your codes, you can explicitly set the value yourself using `bind`, `call` or `apply` method. In the examples below you can use `bind` to create a new function which has `this` value of the object that you passed as the first argument if you don't want to create a new function you can use `call` or `apply`, the difference between the two is that with `apply` you pass the function's second arguments as an array.

{% replit https://replit.com/@rngranggapr/set-this-explicit %}
Why Is Japan The Most Technologically Advanced Nation?
Published: 2023-06-02 05:54:17

1. High significance placed on education: The Japanese educational system is renowned for being demanding and placing a strong emphasis on STEM subjects. Science and math are heavily emphasized in Japanese schools, and many pupils participate in after-school tutoring programmes to raise their academic standing. Japan is also home to some of the best scientific institutions in the world, and its universities are well-regarded.

[https://www.knowledgedetective.com/](https://www.knowledgedetective.com/
)
Creating a Chatbot using the data stored in my huge database
Tags: discuss, api, database, ai
Published: 2023-06-02 05:46:01

Hello Everyone,

I want to build a custom chat bot which can answer questions based on the data in my databse
Below are my tries and the problems I am facing
I am open for all suggestions, so please do help me

Tried without using langchain

The code establishes a connection to a PostgreSQL database and prompts the user for information they want to obtain.
It then generates an SQL query based on the (user input + the table names of the db) using the OpenAI GPT-3.5 language model.
The code extracts table names from the generated query and fetches column information from the connected database. It generates a prompt that includes the table names and column details, and uses the GPT-3.5 model to generate a final SQL query based on this prompt.
The final SQL query is executed on the database, and the results are printed. (currently )
Overall, the code utilizes natural language processing and database interactions to generate and execute SQL queries based on user input.

Tried using Langchain
import os
from langchain import OpenAI, SQLDatabase
from langchain.chains import SQLDatabaseSequentialChain

os.environ['OPENAI_API_KEY'] = "****"

dburi = 'postgresql://postgres:****@****:****/****'
db = SQLDatabase.from_uri(dburi)

# llm = OpenAI(temperature=0, model='text-curie-001')
llm = OpenAI(temperature=0)
db_chain = SQLDatabaseSequentialChain(llm=llm, database=db, verbose=True)

resp = db_chain.run('what is my last po value for testaccount')
print(resp)
 

the problem I have Faced is that the prompt size is getting to 1,29,300+ Tokens some how
I am unable to figure it out why it is happening
I tried custom prompt templates also but that did not decrease the prompt size
What I felt is that they just add my custom prompt data to their prompt and send to the open ai api instead of just sending my custom prompt

So if any one can help me in any way around, pls do

Other than these two methods I have seen that there is something known as fine tuning and embeddings
I know how fine tuning is done using the Open AI but I don’t have much Idea of Embeddings
I want to know which one is better to use
As far as what I have re searched I came to know that in both cases we have to give all the database information to them
which is not secure I think for my organization as my user privacy will be at risk

So finally what could be a better way to build a bot that can answer my questions based on the information in my db
MOT Features and Benefits
Tags: opengauss
Published: 2023-04-17 10:14:45

MOT provide users with significant benefits in performance (query and transaction latency), scalability (throughput and concurrency) and in some cases cost (high resource utilization) –

**·** **Low Latency –** Provides fast query and transaction response time
**·** **High Throughput –** Supports spikes and constantly high user concurrency
**·** **High Resource Utilization –** Utilizes hardware to its full extent
Using MOT, applications are able to achieve more 2.5 to 4 times (2.5x – 4x) higher throughput. For example, in our TPC-C benchmarks (interactive transactions and synchronous logging) performed both on Huawei Taishan Kunpeng-based (ARM) servers and on Dell x86 Intel Xeon-based servers, MOT provides throughput gains that vary from 2.5x on a 2-socket server to 3.7x on a 4-socket server, reaching 4.8M (million) tpmC on an ARM 4-socket 256-cores server.

The lower latency provided by MOT reduces transaction speed by 3x to 5.5x, as observed in TPC-C benchmarks.

Additionally, MOT enables extremely high utilization of server resources when running under high load and contention, which is a well-known problem for all leading industry databases. Using MOT, utilization reaches 99% on 4-socket server, compared with much lower utilization observed when testing other industry leading databases.

This abilities are especially evident and important on modern many-core servers.