teleren/devto huggingface dataset:
What is JSX? How does it work?
Tags: javascript, react, programming
Published: 2021-12-23 01:45:58

## `JSX stands for JavaScript XML.`

- JSX is syntax extension to JavaScript.
- It allows us to write HTML in React and place them in the DOM without any createElement() or appendChild() methods.
- JSX converts the HTML tags in React elements.


Real word project done🌟 
sharcode calculators: https://sharcode.com/calculators/
WHAT THE REDUX
Published: 2021-12-23 01:42:12

[](url)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vyho8ikcgl3ofuh1719.jpeg)

## What Is Redux? 
Redux is a JavaScript library for maintaining and centralizing state. 

## What is State? 
To keep it simple State is data that we store and update.

##Redux Flow 

*One of the first this to keep in mind is that our store, reducers and actions are all function that connect and help us control our data flow in Redux.*

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

## Store 

1. Our store takes in a reducer.
2. We use the Redux devtools to be able to view the state of our store and each action that is dispatched. 
*Make sure to download the redux devtools extension for your browser in order to check on the status your state*
3. As alternative to redux devtools extension in our store. I posted a link to ComposewithDevTools. Which can be use in place of the redux devtools line in our store. Check section 1.3 for more details. 
[ComposeWithDevTools](https://github.com/zalmoxisus/redux-devtools-extension)

```
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import Reducer from "./reducers/Reducer";
import App from "./App";

const store = createStore(
  postsReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <App store={store} />,
  document.getElementById("root")
);
```

#Reducers

1. Our reducers takes in a initial state set to an empty array, and a action. 
2. We have a switch/case statement *Which is like an if, else statement*. Our state will update
based on this condition we set in our switch/case statement.
3. We then return the updated state. *We never mutate the original state. We only update the state in our reducer* 
4. We always set a default return state.
```
export const postsReducer = (state = [], action) => {
    switch(action.type){
        case 'FETCH_POSTS':
            return [...state, action.payload]
            default:
                return state 
    }
}
```

#Actions 

1. Our action is where we make our async calls.
2. They take in a dispatch as an argument. 
3. Our fetch will retrieve our information from an endpoint and return a promise.  
4. We then take the response and turn it into json(JavaScript Object Notation). 
5. we take that and dispatch it to type and return the payload. 
_If you take a look at our dispatch type of **FETCH_POSTS** you will see it matches our case in our switch/case statement in our reducers_
```
export const fetchPosts = () => {
    return (dispatch) => {
        fetch('endpoint')
        .then(resp => resp.json())
        .then(posts => dispatch({ type: 'FETCH_POSTS', payload: posts}))
    }
}
```
This is just a simple example of the Redux flow. I hope this give you a good starting point into the world of Redux. 

Happy Coding 🧑🏾‍💻👩🏾‍💻👨🏻‍💻👩‍💻
100 dias de codigo: 50, la mitad del reto completado y opiniones al respecto
Tags: spanish, 100daysofcode, webdev
Published: 2021-12-23 00:48:30

Foto de [Sincerely Media](https://unsplash.com/@sincerelymedia?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/chrismas?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
  

¡Hey hey hey!

Que bueno verle por aquí querido amigo desarrollador. Hoy he completado la mitad de este reto en el cual sin duda ha habido momentos de tristeza y alegría y es que realmente la vida de los seres humanos no es que sea feliz o triste si no que esta llena de subidas y bajadas emocionales asi como problemas tanto propios como del exterior.

Con lo anterior quiero llevarte al pensamiento de que realmente no importa si en el reto llevas un mal día o uno mejor, intenta sonreír y agradecerte por lo poco o mucho que has hecho sin importar lo que es.

Realmente siento que hacer el reto marca un camino en el que, en cualquier momento, puedes dar la vuelta y verificar como fue tu crecimiento, si tienes dudas sobre tus habilidades como el síndrome del impostor o te gustaría ver como creces día a día sin duda es un reto para ti.

Te permitirá obtener información a grandes rasgos sobre como son en mayoría tus días y asi actuar en consecuencia. 

En ello también quiero remarcar que como yo, no siempre tendrás tiempo todos los días pero intentarlo ya te hace crecer cada día.

Puedes con todas tus metas, toma el camino que deseas y crece con el.

Espero que tengas mucho éxito en tu nuevo año y animo con todos esos proyectos que tienes en mente.

Ahora sigamos con la sección principal:

### Ayer:
- Complete el capitulo 5 de la universidad de MongoDB.
- Practique 30 min de Touch Typing.
- Avance con el diseño de mi pagina.
- Planifique la semana.

### Hoy:
- Complete toda la universidad de mongoDB.
- Comencé la sección de express en The Odin Project.
- Practique 30 min de Touch Typing.

Aunque no lo explique mucho realmente he avanzado muchísimo en The Odin Project.

Espero que les vaya super bien.

¡Adiós mundo!
My Just Created My BEST Dev Portfolio.
Tags: javascript, programming, portfolio, css
Published: 2021-12-23 00:26:30

# All About Ishaan
Live Website: https://allaboutishaan.com 🚀

GitHub: https://github.com/allaboutishaan/allaboutishaan.com ⚙️

This website is a powerful, yet minimalist portfolio for designers and developers. It is very clean, and has everything that you could want in a portfolio.

Made by [Ishaan Garg](https://twitter.com/allaboutishaan)

## Features
📛 Displays your name, social media accounts, and your profile picture at the starting.<br>
🔥 Includes a section that talks more about you.<br>
✏️ Has a percentage bar showing the skills that you know.<br>
📪 Contains a working contact form and footer.<br>
⚙️ Everything is 100% customizable.<br>
💎 Built with many different frameworks and resources.<br>
...and much more!<br>

## Libraries used

- [SCSS](https://sass-lang.com/) -  to make the website cleaner and prettier
- [Scroll Reveal](https://scrollrevealjs.org/) - to easily animate elements
- [Box Icons](https://boxicons.com/) - for better, more stylish icons

#
 Feel free to reach out to me through email at ishaan@allaboutishaan.com or [on Twitter](https://twitter.com/allaboutishaan) if you have any questions or feedback! Hope you find this useful 💙
Combining Machine Learning and Human Intelligence at Unbabel
Tags: machinelearning, techtalks, podcast, ai
Published: 2021-12-22 23:36:09

Companies that do business in the native language of their customer build better customer relationships. Although this may seem fairly obvious, it's easier said than done.

After all, when your customer base is spread around the world, how do you scale your customer service?

[Unbabel](https://unbabel.com/) has built their business around the idea that customer service can be delivered in any language quickly and efficiently with the right blend of AI and human intelligence, creating a platform they call "Language Operations" or [LangOps](https://unbabel.com/language-operations/).

Jonathan Sowler, VP of Engineering at Unbabel, joins Dev Interrupted to talk about machine learning, what it takes to build a product that seamlessly integrates AI and human-powered translations, and why the future of language involves emojis.

Dan and Jonathan also rundown [LinearB](https://linearb.io/) metrics and why Jonathan believes implementing LinearB has improved the health of Unbabel's engineering team.

{% spotify spotify:episode:4A3V8yolvRCV44XDTNiy0y %}

## Episode Highlights Include:
* What is LangOps?
* How ML can be applied to different brands
* Unbabel's use of [WorkerB](https://linearb.io/blog/workerb-developer-automation/)
* Why Unbabel chose to implement [LinearB metrics](https://linearb.io/dev-team-metrics/)
* Building a platform that integrates AI & human intelligence

## Join the Dev Interrupted Community
With over 2000 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)

![https://discord.com/invite/devinterrupted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy4korckp9bfh5dknmf3.png)
Deploying Google Cloud Platform Credentials to Koyeb
Tags: koyeb, googlecloudstorage, credentials
Published: 2021-12-22 23:33:07

---
title: Deploying Google Cloud Platform Credentials to Koyeb
published: true
description: 
tags:
  - koyeb
  - googlecloudstorage
  - credentials 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjegc5q7fcsjb87oaafp.jpg
---

Let's say you have an administration application you're deploying to Koyeb and you store assets on Google Cloud Storage. 
You're going to need to get `GOOGLE_APPLICATION_CREDENTIALS` to your deployment somehow while keeping your credentials, secret.

Here is a quick guide to that I hope helps you get your awesome application interfacing with Google Cloud Platform in no time. 

Assuming you've already gotten a JSON file containing your credentials the following steps make use of Base64 encoding and decoding to store and transfer the contents of the credentials.


### 1. Encode your key to Base64
```
base64 --input gcloud-key.json
```

You'll have the contents of the file encoded as a Base64 string. You can now add this to your Koyeb environment variables as a secret value. 


![Koyeb Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gfiddb13ngh92zniwcl.png)

### 2. Add the encoded Base64 as a secret variable

```
GCP_SA_KEY="aGkga295ZWI="
```

We're saving it as this variable for later use. 

### 4. Add plain text env variable

```
GOOGLE_APPLICATION_CREDENTIALS="./gcloud-key.json"
```

While we're in the the environment variable settings, we'll need to add a plain text variable to tell our application what file to look for that contains the Google Application Credentials. 

### 3. Update your build command

```
echo -n $GCP_SA_KEY | base64 --decode > gcloud-key.json | yarn build
```

We'll update the build command to `echo` the base64 string and pipe the string to the `base64` command to be decoded and written to the file `gcloud-key.json`. 

Then we'll run our normal build command `yarn build`.

Thats it, the next time your application builds the Google Application Credentials will be available to your application and you can happily interface with your Google Cloud Platform account. 

Hope this helped,  happy hacking.
Aspirations for 2022
Tags: elixir
Published: 2021-12-22 23:20:57

Merry Christmas and a happy new year!

1. Make a Pelemay Backend, which applies the Pelemay technology to Nx https://github.com/elixir-nx/nx .
1. Apply the Pelemay technology to evision https://github.com/cocoa-xu/evision .
1. Implement a satellite image processing system with Elixir.
1. Create Astesting https://github.com/zeam-vm/astesting , which automates testing in multiple environments.
1. Pursue performance per power consumption using ARM and RISC-V.
1. Accumulate English technical information at https://dev.to/zacky1972 .

I will find the time and write each plan of the above in detail. To be continued...
The newest features of React Router 6
Tags: react
Published: 2021-12-22 16:48:20

In this article, the topic will be discussed about the new cool features of react router 6.

React router is a very popular library in reactjs. We use this library in our daily web projects. As before, the react router 5 was used in web development, which was nice. But we, the developers, always try to find something new. So the community helps us to give comfort and ease.

**Routes**
In react router 5, Switch was used to navigate one link to another. But in version 6, it introduces Routes. I like the way routes behave. 
In switch, we used to write our components in a tag and also have a problem of nesting those components. But routes came to solve this. There is no harassment of nesting tags and routing. Also we don’t need to use exact for not found pages.

```
<BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="customers/*" element={<Customers />} />
    </Routes>
</BrowserRouter>
```

**useRouter**
A route can be built with JavaScript objects using this. 

**useNavigate**
It is a coolest feature in react router 6. previously , we used _usehistory_ to navigate but now _useNavigate_ give us an extra flavor of navigating. Also, we can use _Navigate_ that redirect the user. 

```
function Redirect() {
  return <Navigate to="/home" replace />;
}

function HomeButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>Go to home page</button>
    </div>
  );
}
```
IntelliJ Hacks: Copy paste history and plain text paste
Tags: java, programming, beginners
Published: 2021-12-22 22:25:43

---
title: IntelliJ Hacks: Copy paste history and plain text paste
published: true
description: IntelliJ can be insanely useful sometimes... 
series: IntelliJ Life Hacks
tags: java,programming,beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onwfyw57970drsygytnv.jpg
---

In our previous articles, we covered various IntelliJ features that you may not know about the first year that you use IntelliJ.

Today's hack is one that I definitely wasn't aware of for quite some time after starting to regularly use IntelliJ, and that's the copy/paste history and plain-text paste option. IntelliJ calls this feature _Choose content to paste_.

## The Hack

To access this feature, simply hold Shift while you press either Ctrl + V (Linux and Windows) or Cmd + V (Mac). This will display a dialog that allows you to choose any prior copied text to paste. It also gives you the option to paste as plain text!

![IntelliJ IDEA Choose Content to Paste](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rte85yh8fl21eciutmno.png)

## Final tip

Don't forget that you will find many gems like this in IntelliJ IDEA by going to the help menu and selecting "Keyboard Shortcuts PDF" which gives you a nice cheat sheet of IntelliJ keyboard shortcuts! 

Awesome!
[PWA] Useful website
Tags: pwa
Published: 2021-12-22 21:48:40

The step...
1. Host my application using github or ngrok
https://ngrok.com/
(for running the exe file, i used powershell)
2. Go to this website: https://www.pwabuilder.com/
it will check my application is enough for PWA
3. It will show my application is not enough
   3-1. Create manifest.json and service worker using that website
   3-2. Also recommend this: https://manifest-gen.netlify.app/
   3-3. The netlify is better when creating manifest.json file. 
4. Downloading a new package from https://www.pwabuilder.com/ after being done of creating needed files and move to my application folder.
5. Following this step: https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md
6. and test it again and it will show my application is enough for PWA
Remove or Update order notes in WooCommerce checkout page
Tags: wordpress, programming, opensource
Published: 2021-12-22 21:12:47

By using following hooks, we can remove or update order's notes in woocommerce checkout page.

```php

// removes Order Notes Title - Additional Information
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );

// remove Order Notes Field
add_filter( 'woocommerce_checkout_fields' , 'raza_remove_order_notes' );
function raza_remove_order_notes( $fields ) {
    
    unset($fields['order']['order_comments']); // for removing
    $fields['order']['order_comments']['label'] = 'Hotel Information'; // change label
    $fields['order']['order_comments']['placeholder'] = 'Hotel Information'; // change placeholder
    $fields['order']['order_comments']['required'] = true; // make it required
    
    return $fields;
    
}

```
Update price HTML in WooCommerce single product
Tags: wordpress, woocommerce, programming
Published: 2021-12-22 21:09:08

Add following code in `functions.php`

```php
add_filter('woocommerce_get_price_html', 'raza_update_woocommerce_price_html', 100, 2);

function raza_update_woocommerce_price_html($price, $product)
{
    if( is_single() ){
        
        $price = str_replace( '<del>', ' <span class="price-was"><strong>Was:</strong><br><del>', $price );
        $price = str_replace( '</del>', ' </span></del>', $price );
    
        $price = str_replace( '<ins>', ' <span class="price-now"><strong>Now:</strong><br><ins>', $price );
        $price = str_replace( '</ins>', ' </span></ins>', $price );
        $price = force_balance_tags( $price );
    }
    
    return force_balance_tags( $price );
}

```
Update add-to-cart button text in WooCommerce
Tags: wordpress, woocommerce, programming, php
Published: 2021-12-22 21:04:02

Add this code in functions.php

```php
add_filter( 'woocommerce_product_single_add_to_cart_text', 'raza_woo_custom_cart_button_text' );  
add_filter( 'woocommerce_product_add_to_cart_text', 'raza_woo_custom_cart_button_text' );  

function raza_woo_custom_cart_button_text() {
    
    return __( 'Buy Now', 'woocommerce' );
    
}
```

Replace "Buy Now" text with your required text.
Update PHP configs
Tags: php, development, devops
Published: 2021-12-22 20:58:24

Open `php.ini` in any text editor

Find and update following values one by one:

```
post_max_size       = 8M
upload_max_filesize = 2M
max_execution_time  = 30
max_input_time      = 60
memory_limit        = 8M

```
Updated values: 

```
post_max_size       = 750M
upload_max_filesize = 750M
max_execution_time  = 5000
max_input_time      = 5000
memory_limit        = 1000M
```
Thrive Apprentice 4.0: Was kann das neue Plugin von Thrive Themes?
Tags: wordpress, kurs, thrivethemes
Published: 2021-12-23 16:02:04

---
title: Thrive Apprentice 4.0: Was kann das neue Plugin von Thrive Themes?
published: true
date: 2021-12-22 20:55:06 UTC
tags: WordPress,kurs,ThriveThemes
canonical_url: https://bloggerpilot.com/thrive-apprentice/
---

![Thrive Apprentice - WordPress LMS und Membership Plugin](https://bloggerpilot.com/wp-content/uploads/2021/12/thrive-apprentice.png)

Online-Kurse sind in aller Munde und überall im World Wide...

Der Original-Artikel erschien auf [Thrive Apprentice 4.0: Was kann das neue Plugin von Thrive Themes?](https://bloggerpilot.com/thrive-apprentice/).
What Coding Looks Like – Frontend Programming Magic 8 Ball Part 1
Tags: frontend, webdev, html, css
Published: 2021-12-22 20:50:22


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o42uqrzbk6puekls8aiw.jpg)](https://esteecodes.com/what-coding-looks-like-frontend-programming-magic-8-ball-part-1/)
MYSQL import export using cli
Tags: mysql, database, programming, bash
Published: 2021-12-22 20:46:21

## Export Import All Databases

**Export:**
`mysqldump -u USERNAME -p -v --all-databases > alldb.sql`

**Import:**
`mysql -u USERNAME -p -v < alldb.sql`


## Export Import One Database

**Export:**
`mysqldump -u USERNAME -p -v DBNAME> ExportSqlFile.sql`

**Import:**
`mysql -u USERNAME -p -v NEWDBNAME < ExportedSqlFile.sql`

_Note: Add --verbose or -v options to see how the dump is progressing._
React Concept
Published: 2021-12-22 17:53:14

Today we are going to talk about some interesting react concepts that will help you to understand react more efficiently. Concepts that we are going to cover in this blog: JSX and the hooks component.

## JSX
JSX stands for JavaScript XML⇒( Extensible Markup Language ). It is a syntax extension of javascript that helps us to write HTML codes within JavaScript. There are many good sides of jsx some of these are jsx lets us write any javascript expression within { curly braces }. It is a lot easy to implement better than the other stuff. And one more thing is that jsx is used in camel-cased characters.
An example of jsx: const jsx = <p>this is a paragraph tag in jsx</p>

## Hooks
React hooks are newly introduced in react version 16.8.0. It is an additional feature of react.js. Hooks are used in functional components and let you have state and other react features in the functional components. By using hooks in the functional components we can have an organized codebase and performance webpage. There are many hooks in react they are useState, useEffect, useContext, useRef, useReducer, and so on. Now the useState hook lets you have states in a functional component which we didn’t have in an older version of react. The useEffect hook lets you have any kind of side effect in your component such as HTTP requests and so on. The useContext hook is used to get any kind of data from anywhere on the react website.
Now there are some rules about react hooks:
Hooks can only be used in react functional components.
They only can be called at the top level of components.
And they can’t be conditional like any other component or element in react functional component.
Restringir o bloquear elementos en django, hacer que se logueen para mostrarlo.
Tags: django, python, login, boquear
Published: 2021-12-22 20:33:03

Hola, ¿cómo están?, en esta ocasión les estaré mostrado como restringir o bloquear elementos en django, solo los usuarios que iniciaron sesión podrán ver los elementos bloqueados.

Si deseamos exigir que el usuario este iniciado sesión para mostrar una acción o funcionalidad debemos realizar los siguientes pasos:
1. En **views.py** importamos una librería 
`from django.contrib.auth.decorators import login_required`

2. y insertamos el siguiente código encima o al inicio de la función que se requiera exigir inicio de sesión _@login_required(login_url='Direcion ala cual queremos direccionar')_

**Ejemplo: **

```
from django.contrib.auth.decorators import login_required

@login_required(login_url='insertUrl')
def editPost(request, pk):
    post =  Post.objects.get(id=pk)
    form = PostForm(instance=post)
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES, instance=post)
        if form.is_valid():
            form.save()
        return redirect ('/')    
    context = {'form':form}
    return render (request, 'index.html',context)
```
y de esa manera es como bloquemos o restringimos el acceso a cualquier usuario que no este logeado...

Ahora bien si deseamos no mostrar algún elemento en concreto como un botón, imagen o cualquier otro elemento en un documento _.html_ se puede realizar utilizando el siguiente código:
`{% if request.user.is_authenticated %}
{% endif %} `

**Ejemplo:**

```
{% if request.user.is_authenticated %}
<a class="btn btn-sm btn-primary" href="{% url 'editUrl' post.id %}">Edit</a>
{% endif %}
```

**Demostración:**

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

En esta imagen no se muestra el botón Edit.

Pero si no registramos nos mostraba esa opción
Acceder a http://localhost:8000/admin para iniciar sesion
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swefb9j5ufv33kyt3eug.png)

Regresamos ala página y nos mostrará la opción

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