teleren/devto huggingface dataset:
What is JSX?
Tags: javascript, react, jsx, namastereact
Published: 2023-01-02 14:49:40

JSX looks similar to HTML, but it is not HTML. It is a syntax extension for JavaScript, which means it gets compiled into regular JavaScript code by a transpiler([Babel](https://babeljs.io/)) before executing it in the browser.

It was developed by Facebook as a way to make it easier for developers to build user interfaces (UI) using React, a JavaScript library for building user interfaces.

```
const element = (
  <h1 className='greeting'>
   Hello JSX
  </h1>
)
```
The above JSX is equivalent to the following JavaScript code,

```
const element = React.createElement(
 'h1',
 { className: 'greeting' },
 'Hello JSX'}
)
```
[Babel](https://babeljs.io/) which converts our JSX to React.createElement()


![Babel transpiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9s1658gc6qeacgmvzjl.png)

As you can see above image shows how JSX get converted into React.createElement(). You can learn more about [babel](urhttps://babeljs.io/l) on their official documentation.

## Embedding JavaScript Expression in JSX

JSX allows you to use JavaScript expression. you can use curly braces to include JavaScript expressions in your JSX code.

```
const name = 'Saqib';
const element = <h1>Hello, {name}</h1>;
```
You can use any valid JavaScript expressions inside the curly braces in your JSX code. For example, `1 + 3`, `user.firstName` all are valid javascript expressions.

```
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Mohammad',
  lastName: 'Saqib'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
```

## That's it

Thank you for reading this article. Hope you like it. You can connect with me on [Twitter](https://twitter.com/iamsaqib24)
Video: Accelerate PyTorch Transformers with Intel Sapphire Rapids, part 1
Tags: intel, deeplearning, aws, nlp
Published: 2023-02-23 16:42:59

---
title: Video: Accelerate PyTorch Transformers with Intel Sapphire Rapids, part 1
published: true
date: 2023-01-02 14:43:54 UTC
tags: intel,deeplearning,aws,nlp
canonical_url: https://julsimon.medium.com/video-accelerate-pytorch-transformers-with-intel-sapphire-rapids-part-1-d79595d02aa
---

In this video, you will learn how to accelerate a PyTorch training job with a cluster of Intel Sapphire Rapids servers running on AWS. We will use the Intel oneAPI Collective Communications Library (CCL) to distribute the job, and the Intel Extension for PyTorch (IPEX) library to automatically put the new CPU instructions to work. As both libraries are already integrated with the Hugging Face transformers library, we will be able to run our sample scripts out of the box without changing a line of code.

{% youtube Cb-lutbSvVQ %}
Quels sont vos objectifs pour 2023?
Tags: discuss, french
Published: 2023-01-02 14:42:00

Bonne année 2023! 🎉🎉

Je vous souhaite de vivre une belle année, d'être en santé et tout simplement d'être heureux avec votre famille et vos amis.

---

Comme tous les ans, on commence l'année avec des résolutions et tout un tas d'objectifs pour l'année. *(Qu'ils soient personnels ou professionnels)*

De mon côté, j'ai quelques objectifs :
- Continuer d'en apprendre sur Go et des technologies qui tournent autour
- D'aller plus loin dans mon apprentissage sur Kubernetes
- D'améliorer mes connaissances sur les outils d'observabilité *(OpenTelemetry, la suite d'outils de Grafana...)*
- Et participer plus dans des projets open source

---

Et vous, quels sont objectives "tech" pour cette année?
Supercharge your Cypress E2E tests using Vite
Tags: cypres, testing, opensource, javascript
Published: 2023-01-02 14:38:38

If you’ve been a front-end developer for a while now, you’ve probably used [cypress](https://www.cypress.io/) and [Vite](https://vitejs.dev/), or at least heard about them (if you haven’t, you need to check them out). Using these together makes developing and testing web applications a breeze. But still, there is something missing: Cypress doesn’t use Vite for running end-to-end tests.

Cypress 10 introduced Vite integration, but only for component testing. To run end-to-end tests, however, you still need Webpack, and it’s a hell of a nightmare. You need to configure everything twice: once in Vite and once in Webpack. For example, imagine that you are using typescript with path aliases in your project. You need to configure aliases for typescript and Vite (luckily, you can use a Vite plugin instead of doing manual configuration), and now your tests stop working. You should either not use aliases in your tests or do the same configurations for Webpack separately. And by the way, you need to configure Webpack to load typescript as well.

It’s not finished yet. Every time you change a configuration in your development environment that affects your tests, you need to do the same thing to update the Webpack configurations. You may also use some tools or plugins in your dev environment that are incompatible with Webpack, or vice versa.

Besides the development experience, the gap between development and testing environments can lead to unexpected bugs and make the tests unreliable.

Besides the fact that Vite is faster than Webpack, using Vite for end-to-end testing can eliminate the gap between these two environments and make it much easier to change the project structure and configurations. You can also use Vite-specific features like `import.meta` and Vite or Rollup plugins to empower your testing workflow. Accessing environment variables or application-specific configurations in tests is possible too.

But how can we use Vite for running end-to-end tests? To do so, we need a [Cypress preprocessor](https://docs.cypress.io/api/plugins/preprocessors-api). But don’t worry, I’m not going to walk you through the preprocessor API and how to write one; cause that’s already done, and [cypress-vite](https://www.npmjs.com/package/cypress-vite) does the job for you.

First, you need to install `cypress-vite` in your project:

```bash
npm install --save-dev cypress-vite

yarn add --dev cypress-vite

pnpm add --save-dev cypress-vite
```

Then update your cypress configuration file:

```typescript
import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor())
    },
  },
})
```

That’s it. Now cypress uses Vite for running your end-to-end tests. It will automatically resolve your Vite configuration or you can pass in the path to your configuration file. You can check its [repository](https://github.com/mammadataei/cypress-vite) for more examples and documentation.
Como criar um perfil de Aplicação
Tags: veracode, tutorial, beginners, security
Published: 2023-01-02 14:24:01

Dentro da plataforma da Veracode os projetos são organizados em perfis de Aplicação. 

Para criar um perfil, clicamos em "**My Portfolio**", depois no botão "**Add New Aplication**" no canto superior direito. 
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq000dj7gfrg5bjs1002.png)

Adicionamos um nome ao projeto, como "**Teste-App-Node**".
Caso considere necessário, é possível adicionar uma descrição e tags para melhor controle.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k700cg7gl0396l0tuyau.png)

Na seção de "**Policy Control**", podemos selecionar qual a criticidade e qual política vamos aplicar, por padrão já existe uma política relacionada ao nível de criticidade, mas é possível personalizar.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2q9qod87m2njamesymh.png)

Por fim temos a seção "**Organizational Information**", onde podemos colocar informações sobre a gestão desse projeto e quais times podem ter acesso a ele. 
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddayxfvqxjrh3r910lob.png)

Depois de clicar em "**Save and Continue**", temos acesso a uma tela onde podemos utilizar campos extras para personalizações.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pruky9hnevt5sghnmoku.png)

Para concluir, clicamos em "**Save**"
C#: What is Boxing?
Tags: csharp, performance
Published: 2023-01-02 14:23:05

My friend asked me about C# boxing at the end of last year, and I promised to explain in a blog article this year. So, this is the article for him.

## Value Type and Reference Type

Before I explain the C# boxing, I need to explain that C# has two categories of types.

* Value Types
* Reference Types

### Value Types

[Value Types](https://learn.microsoft.com/dotnet/csharp/language-reference/builtin-types/value-types) is a type that an instance of the type contains the value. If I pass the value as a method argument or assign it to a new variable, the copy of the instance is created.

Following code demonstrates that the x and y values are independent objects, because the instance of x is copied to the y value as the new instance. 

```csharp
int x = 1;
int y = x;
y += 1;
Console.WriteLine($"x: {x}");
Console.WriteLine($"y: {y}");
```
```shell
x: 1
y: 2
```

The instances of Value types are stored in the stack area.

## Reference Types

[Reference Types](https://learn.microsoft.com/dotnet/csharp/language-reference/keywords/reference-types) is a type that an instance of the type contains the refence to the object. If I pass the value as a method argument or assign it to a new variable, both variable points to the same object.

Following code demonstrates that the x and y variables are pointing to the same object in memory after assigning it.

```csharp
char[] x = { 't', 'e', 's', 't' };
Console.WriteLine($"x: {new string(x)}");
char[] y = x;
y[0] = 'n';
Console.WriteLine($"x: {new string(x)}");
Console.WriteLine($"y: {new string(y)}");
```
```shell
x: test
x: nest
y: nest
```

The instances of Reference types are stored in managed heap area. 

## Boxing and Unboxing

Boxing is a process to move the value type instance from the stack to the managed heap by converting it to an object type.

Unboxing is a process to extract the value type instance from the managed heap to the stack.

### How it happens

Boxing happens when we assign a value type instance to System.Object. Unboxing happens when we convert a reference type instance to a value type.

```csharp
int x = 1; // boxing 
object xobj = x;
int y = (int)xobj; // unboxing
```

Open the compiled dll from ILDASM tool, then we can clearly see it.

![ILDASM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r58h7iyxdjphlbrmz1t.png)

## What's the issue?

According to Microsoft official documentation, it has a performance penalty: [Performance: Boxing and Unboxing](https://learn.microsoft.com/en-us/dotnet/framework/performance/performance-tips#boxing-and-unboxing)

[The ArrayList document](https://learn.microsoft.com/en-us/dotnet/api/system.collections.arraylist?view=net-7.0) also explains about it.

## Summary

It may be important to know how C# works under the hood, but there is not much we can do. We simply need to aware of this behavior and follow the best practice to code. I hope this article helps my colleague.
Single Action Controller - Pros and Cons for REST APIs
Tags: laravel, php, architecture, rest
Published: 2023-01-02 14:19:53

## What is a Single Action Controller?
It is a Controller dedicated to a single action. 

For example: 
Instead of creating a single `UserController` for all CRUD actions as methods and some additional, like filters and showing, you are creating a Controller for each action, which becomes `CreateUserController`, `GetUserController`, `FilterUserController` and so on.

Source: [Single Action Controller in Laravel](https://neutrondev.com/single-action-controller-in-laravel/)

## Pros
✅ has one job only
✅ has a descriptive name, and it’s easy to understand what it does
✅ is easy to change

## What are the cons for Single Action Controllers? 
I've read some articles and the only cons I've found is that you'll end up with “tons of controllers over time”. The author says that it's not a good idea if you’re aiming for scalability in terms of development. 

## Cons solution
In fact, you can wrap controllers in folders by modules. By putting all user controllers under `User` folder, you end up having a clean hierarchy of controllers sorted by modules and a bunch of Pros in addition that are making the architecture easy to maintain.

What do you think about it?
New year plans to become a JavaScript Developer - 2023
Tags: webdev, javascript, beginners, programming
Published: 2023-01-02 14:12:38

There are many things that a `JavaScript` developer could do to improve their skills and stay up-to-date in the field. Here are a few ideas for New Year's resolutions:

_Improve your understanding of the JavaScript language:_ There is always more to learn about any programming language, and JavaScript is no exception. Consider taking an `online course` or working through a book to deepen your understanding of the language.

_Learn a new JavaScript framework:_ There are many popular JavaScript `frameworks` to choose from, such as `React`, `Angular`, and `Vue.js`. Pick one that interests you and spend some time learning how to use it.

_Build something:_ The best way to learn is by doing. Consider building a small project or adding features to an existing project to practice your skills and learn new techniques.

_Contribute to an open source project:_ Open source projects are a great way to learn and make a difference. Look for a project that interests you and see if you can `contribute`.

_Attend a conference or meetup:_ `Conferences` and meetups are a great way to learn about new developments in the field and meet other developers. Consider attending one or more events in the coming year.


Feel free to add more things :)
vue3 click event interferes with bootstrap js processing of dropdown
Tags: vue, bootstrap, help
Published: 2023-01-02 13:45:08

Hello Community! This is my first question asked here, so please be forgiving.

I'm using _vue3_, _vite_, _bootstrap_.

I'm working on a small app. One page loads some data from my server and passes it to a component to render a **dropdown**. If the user selects an item from dropdown, the **button type/color** should change.
The **first time** I open the dropdown and select something, the color changes but the dropdown does not close. If I click the main dropdown button again, it closes, after that the dropdown works as intended.

I nailed down the problem to line 20 in the child component,
`    selectOption(optionId, event) {
      this.bSelectedOption = true;
`
where vue listens on click and sets a boolean value to true, which changes classes in the template (line 29)
`<button
        :class="bSelectedOption ? 'btn-success' : 'btn-danger'"
        class="btn dropdown-toggle"
`

Commenting out line 20 makes bootstrap dropdown work as intended, except obviously changing of the color.

https://codesandbox.io/s/magical-leavitt-isk66v?file=/src/components/DropdownList.vue

I guess the first time around something happens in the event chain of click, maybe bootstrap get's some unfinished data while vue is working on the classes? But why opening the dropdown a second and nth time works flawlessly?

I hope to have positive feedback to this!
Link is updating address on click but not rendering page content unless reloading full page.
Tags: react, help
Published: 2023-01-02 13:35:10

< Link to=" / post" > Post < / Link > in nav.js is updating address on click but not rendering page content unless reloading full page. I've tried like this: 
< a onClick={() = > {window.location.href="/post"}} >Post< /a >
But now page content is rendering but every time on click whole page is reloading, which is not good i suppose. I've found my self using v6:react-router-dom so I dropped down to v5. It helped me unstack one problem using Switch but in case of Link I'm stuck again. Can not move on. Any help? Git Link: 
https://github.com/arefin-aareef/blogApp
My Experience Using Reactjs
Tags: javascript, beginners, react, career
Published: 2023-01-02 13:32:43

Over the past five years, I have had the opportunity to use **ReactJS** for frontend development on a number of projects. In my experience, React has proven to be a powerful and flexible tool for building user interfaces.

One of the things I appreciate most about React is its emphasis on modularity and reusable components. With React, I can break down my UI into smaller, self-contained pieces that are easy to understand and maintain. This makes it much easier to build and iterate on large, complex applications.

Another advantage of React is its virtual DOM (Document Object Model). The virtual DOM allows React to efficiently update the real DOM by only re-rendering the components that have actually changed. This can greatly improve the performance of an application, especially when dealing with large amounts of data or frequent updates.

In addition to its core features, React also has a strong ecosystem of third-party libraries and tools. For example, I have often used the React Router library to handle routing in my projects, and the Redux library for managing application state.

Overall, my experience using React for frontend development has been very positive. It has allowed me to build high-quality user interfaces quickly and efficiently, and has played a key role in the success of many of the projects I have worked on. I look forward to continuing to use React in the future.
Characterize Your Project!
Tags: opensource, contributorswanted, react
Published: 2023-01-02 13:15:04

**History, Story, Movie Lovers wanted!**

Do you want to give your project a cool name? A name with symbolic and profound meaning? 

Say goodbye to random project name generators, and their terrible names (Mighty Husky, Warm Cup and etc)

Meet [Characterize](https://stanley0010.github.io/Characterize/)! 

[Github repo](https://github.com/stanley0010/Characterize)

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

## Motivation

As a developer, I have a lot side project ideas. And I always want cool names for them that mean something (not "Bronze Husky" from random project name generator). But something like Oracle(Matrix), a symbol of wisdom, and Gandalf(LOTR), the symbol of goodness.

## Make it great together

I am no expert in history and neither do I know a lot of characters in movies and stories. But I believe many of you reading this are:) Now, the database need a lot more records. So I am inviting everyone to add characters you love to the database!

### Contribute to the Database

Add characters that have a symbolic meaning or represents certain values. For example, good, evil, wisdom, ignorance, love and hatred.

### Contribute to the code and docs

This is my first time starting an open source project so feel free to make it more open source friendly in case I miss anything! 


I believe in the power of open-source. Spread the word!
Introducing PaLM + RLHF: The Open Source Alternative to OpenAI's ChatGPT
Tags: chatgpt, ai, webdev, programming
Published: 2023-01-02 13:14:15

> Original blog post (better UI): [Introducing PaLM + RLHF: The Open Source Alternative to OpenAI's ChatGPT](https://aykadev.vercel.app/post/introducing-palm-rlhf-open-source-alternative-openais-chatgpt)

OpenAI's [ChatGPT](https://techcrunch.com/tag/chatgpt/), a powerful language model that can assist with tasks such as drafting emails and suggesting computer code, has been widely used by businesses and individuals alike. However, ChatGPT is not open source, which has limited its accessibility to some users. But now, a new open source alternative has arrived in the form of PaLM + RLHF.


## What is PaLM + RLHF and How Does it Work?

PaLM + RLHF, developed by Philip Wang, is a text-generating model that combines [PaLM](https://ai.googleblog.com/2022/04/pathways-language-model-palm-scaling-to.html), a large language model from Google, with Reinforcement Learning with Human Feedback (RLHF). RLHF is a technique that aims to better align language models with what users wish them to accomplish. It involves training a language model and fine-tuning it on a dataset that includes prompts (e.g., "Explain machine learning to a six-year-old") paired with what human volunteers expect the model to say (e.g., "Machine learning is a form of AI..."). The volunteers then rank the responses from best to worst, and the rankings are used to train a "reward model" that filters for the top answers to a given prompt.


While PaLM + RLHF can accomplish many of the same tasks as ChatGPT, it is not pre-trained and therefore requires significant resources to be trained and run. This includes compiling gigabytes of text for the model to learn from and finding powerful enough hardware to handle the training workload. In fact, PaLM + RLHF is so large (540 billion parameters) that it requires a dedicated PC with around eight Nvidia A100 GPUs to run. Cloud alternatives are also pricey, with the cost of running OpenAI's text-generating GPT-3 (which has around 175 billion parameters) on a single Amazon Web Services instance estimated at around $87,000 per year.


##Conclusion:

While PaLM + RLHF may not be a replacement for ChatGPT at this time, it is an important development for those who are interested in using open source alternatives. Additionally, other efforts to replicate ChatGPT, such as the one led by CarperAI in partnership with EleutherAI, Scale AI, and Hugging Face, are making progress and may offer more readily available options in the future.