teleren/devto huggingface dataset:
🔥Build a Stunning Portfolio website with React JS
Published: 2022-03-04 13:39:19

<!-- wp:paragraph -->
<p>Hi there👋,</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I wanted to build a portfolio which is different and unique with design and little bit animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For this project I have used these libraries,<br>▶️ React JS<br>▶️ Framer-motion for Cool transitions and animations<br>▶️ Styled-Components<br>▶️ Particle JS<br>▶️ React Router</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the tutorial how I have created this website! </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong> Read Complete Tutorials : <a href="https://www.codelivly.com/react-portfolio-website-tutorial-from-scratch-build-deploy-react-js-portfolio-website/">React Portfolio Website Tutorial From Scratch – Build &amp; Deploy React JS Portfolio Website</a></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Things that I have learned building this project,<br>▶️ Complex Styling with Styled-components<br>▶️ How to create Page Transition effects using Framer-motion<br>▶️ How we can leverage advantages of component structure<br>▶️ How to use ParticleJS in React JS for awesome background effects<br>▶️ Uses of Lazy and suspence in reactJS to make components load faster<br>▶️ Many awesome pure CSS animations.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>You can use this portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>I will try to improve it's speed and performance.<br>Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Any suggestions are welcomed!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><a href="https://dev.to/codebucks/build-a-stunning-portfolio-with-react-js-p1#share-your-portfolio-in-the-comments-so-that-all-the-other-peoplebeginners-can-get-the-different-ideas-as-well-as-inspiration"></a>Share your portfolio in the comments, So that all the other people/beginners can get the different ideas as well as inspiration.</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://dev.to/codebucks/build-a-stunning-portfolio-with-react-js-p1#thanks-for-reading"></a>Thanks For Reading😄</h3>
<!-- /wp:heading -->
TypeScirpt
Published: 2022-03-04 13:26:20

Typescript:

Typescript: Microsoft created and maintains TypeScript, an open-source programming language. It is a strict syntactical superset of JavaScript that extends the language with optional static typing. TypeScript is intended for large-scale application development and trans compiles to JavaScript.

Why is Typescript called the SuperSet of Javascript? 

A superset is a set that contains one more set. Since JavaScript is a progressively composed language, there are no information types, and that implies no arrange time blunders. We generally get mistakes in JavaScript that say, "Can't peruse property x of unclear." This is an issue that Typescript settles. It adds type-checking to your JavaScript code. Typescript is a superset as in you can compose real JavaScript without utilizing any of the additional elements Typescript gives. The primary motivation behind Typescript is to give static sort checking to your JavaScript code and to give additional usefulness that the current JavaScript standard doesn't give.

TypeScript vs. JavaScript What Is the Difference Between JavaScript and TypeScript?

On the off chance that you've at any point dealt with a web advancement project, you've likely run over JavaScript. For some, electronic tasks, JavaScript is as of now the most famous programming language.

TypeScript is an open-source programming language that is appropriate for enormous scope applications. Microsoft made TypeScript in 2012 in light of the fact that the code of JavaScript was turning out to be more modern when it came to enormous scope web applications.

Thus, changing the JavaScript (.js) augmentation to TypeScript (.ts) will have a similar impact. Notwithstanding, this doesn't infer that JavaScript and TypeScript are tradable.

TypeScript has the following features:

To make TypeScript code intelligible by programs, it is meant JavaScript: Because programs can't comprehend a solitary line of TypeScript code, the composed code is assembled and afterward changed to JavaScript code, which programs can comprehend and utilize. This is alluded to as trans-heaped.
How to convert audio.mp3 to audio.flac?
Tags: angular, cloudapi
Published: 2022-03-04 13:21:17

Google cloud speech to text only accepts flac or raw formatted audio files. I want to convert an audio.mp3/wav file to audio.flac but the converter functions I am using is not working properly. Can anyone suggest me a better way to convert audio.mp3/wav file to audio.flac.


```
export const SpeechToText = function (audioFileData, contentType) {
  try {
    let reader = new FileReader();
    contentType = contentType.toLowerCase();
    return new Promise((resolve) => {
      reader.onload = function (event: any) {
        let data = event.target.result.split(",");
        let b64Data = data[1];
        let blob = getBlobFromBase64Data(b64Data, contentType);
        let blobUrl = URL.createObjectURL(blob);
        let fileName = audioFileData.name.substring(
          0,
          audioFileData.name.lastIndexOf(".")
        );

        let convertedAudio = {
          path: blobUrl,
          type: contentType,
          name: `${fileName}.flac`,
        };

        resolve(convertedAudio);
      };
      reader.readAsDataURL(audioFileData);
    });
  } catch (e) {
    console.log("Error occurred while converting : ", e);
  }
};

function getBlobFromBase64Data(b64Data, contentType, sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
}
```
Day 39/100
Tags: 100daysofcode
Published: 2022-03-04 13:20:02

Day 39/100

**Language:**
JAVA

**Time Period Spent:**
1 hrs

**Today's Learning:**
- JavaFX
- JFrame
- JPannel

**Additional Notes:**
Today I took the plunge to get into UI rendering. I learned a lot on this, it has made me very excited to learn. I rendered some squares onto the screen and set them to set random colours. This allowed me to look into getting out some code produced by me and not following tutorials. I lets me test what I have learned so far and reflect on stuff that needs working on.
Redux Tool-Kit
Tags: redux
Published: 2022-03-04 13:13:47

## Redux Toolkit

Redux Toolkit exports several individual functions that you can use in your application, and adds dependencies on some other packages that are commonly used with Redux (like Reselect and Redux-Thunk). This lets you decide how to use these in your own application, whether it be a brand new project or updating a large existing app.

## Store Setup

Every Redux app needs to configure and create a Redux store. This usually involves several steps:

•	

- Importing or creating the root reducer function
-Setting up middleware, likely including at least one middleware to handle asynchronous logic
- Configuring the redux dev Extension. 
- Possibly altering some of the logic based on whether the application is being built for development or production

## Store Setup With ConfigureStore

	

- Having an options object with "named" parameters, which can be easier to read
- Enabling the  Redux  DevTools  Extension automatically
In addition configureStore  adds some middleware by default, each with a specific goal:

- Redux Thunk is the most commonly used middleware for working with both synchronous and async logic outside of components	

- In development, middleware that check for common mistakes like mutating the state or using non-serializable values.

## Creating Slice of state

Redux state is typically organized into "slices", defined by the reducers that are passed to combineReducer:

`Import {combine}
import { combineReducers } from 'redux'
import usersReducer from '
import postsReducer from '

const rootReducer = combineReducers({
  users: usersReducer,
  posts: postsReducer,
})`
Primitive data types in Javascript
Published: 2022-03-04 13:12:00


**There are five types of primitive data types.**
1. String
2. Number
3. Boolean
4. Undefined
5. Null

## String
The string data type in JavaScript can be any group of characters enclosed by a single or double-quotes or by backticks.
`let name = "Awais Butt";   // Using double quotes
let info = 'data';   // Using single quotes`

## Numbers

JavaScript has only one type of numbers. Numbers can be written with, or without decimals.
`let number = 250;  // integer value`

## Boolean

The boolean data type has only two values, true and false. It is mostly used to check a logical condition. Thus Booleans are logical data types which can be used for comparison of two variables or to check a condition. 
`let num1 = 5;
let num2 = 5;
(num1 == num2)       // Returns true`

## Undefined

In JavaScript, a variable without a value, has the value undefined. The type is also undefined.

`let name;  //name is undefined and its type also undefined`

## Null

The null in JavaScript is a data type that is represented by only one value, the ‘null’ itself. A null value means no value.

`let n = null;
console.log(n);   // This returns null
If we check the data type of a using the typeof operator, we get:
typeof(n);         // This returns object`
This means the type of a null value is an object, not null.
Intro showcase view using Jetpack Compose
Tags: android, jetpackcompose, kotlin
Published: 2022-03-04 12:57:18

Want to make it easy for your new users to understand all the features of your app?

Here's how you can do it using Jetpack Compose in Android.

This is an implementation of an intro showcase to highlights different features of the app using Jetpack Compose. 

The implementation is inspired by the [TapTargetView](https://github.com/KeepSafe/TapTargetView) which is useful for legacy views.

The implementation is also available as a standalone library [Intro-showcase-view](https://github.com/canopas/Intro-showcase-view) on github which you can directly add as a gradle dependency in your project.


Here's an article with step by step guide to implement it by yourself.

https://blog.canopas.com/intro-showcase-view-in-jetpack-compose-ac044cd3bf28
REDUX
Published: 2022-03-04 12:52:09


Redux is used for managing and centralizing the application state. It is a JavaScript library that is open-source. It is mainly used for user interfaces with react or angular libraries.
Redux can help app management in a single place and the changes in your app are more predictable and traceable with redux. The work of redux is not that complicated. First of all, the entire state of the application is held by the central store. Without sending down the props from one component to another, one component can access the stored state. The actions, store, and reducers are three building parts. A middleware library is redux-saga which allows the store of redux to interact with resources outside of it asynchronously. This includes executing I/O operations, managing HTTP requests to external services, accessing browser store services. These types of operations are known as side effects. It uses slicer, reducers and actions to work on
 Updated components are re-rendered by redux. On the other hand, Context API does both which are, promoting re-render on each update of the state and regardless re-render all components.
Redux can be used for client-side store management so that data can be stored client-side rather than fetching from APIs. As a result, it makes the website faster for the users and makes the website user-friendly. Developers use the Redux dev tool so that they can easily manage and debug redux on the website. Nowadays, Redux has become very popular for its convenience both for developers and users.
CSS Emmets: A guide for everyone
Tags: css, webdev, tutorial, beginners
Published: 2022-03-04 12:45:50

Emmet is known to be the most loved and indispensable feature of vscode, Today you'll know how you can use it to speed up your css workflow. 

**Let's get started**

### Unit Values 
You can specify values for every property that has a unit, For:
`100` --> `100px`
`100p` --> `100%`
`100r` --> `100rem`
`100e` --> `100em`

Example: 
`m100` --> `margin: 100px`
`m100p` --> `margin: 100%`
`m100r` --> `margin: 100rem`
`m100e` --> `margin: 100em`

### Margin and Padding

`m` --> `margin: ;`
`mt` --> `margin-top: ;`
`mb` --> `margin-bottom: ;`

Same way applies to padding
`pr` --> `padding-right: ;`
`pl` --> `padding-left: ;`

### Width and Height

`w` --> `width: ;`
`maw` --> `max-width: ;`
`miw` --> `min-width: ;`

`h` --> `height: ;`
`mah` —> `max-height: ;`
`mih` --> `min-height: ;`

### Color
type `c#` followed by the color value, You can write one, two, three or six characters as color value:

`c#1 --> color: #111111`
`c#e0 --> color: #e0e0e0`
`c#fc0 --> color: #ffcc00`

### Font

`fz` --> `font-size: ;`
`fw` --> `font-weight: ;`
`ff` --> `font-family: ;`
`fs` --> `font-style: ;`

### Position 

type `pos:` followed by the first letter of the position's values

`pos:r` --> `position: relative`
`pos:a` --> `position: absolute`
`pos:f` --> `position: fixed`
`pos:s` --> `position: static`

`t10` --> `top: 10px`
`b10p` --> `bottom: 10%`
`r` --> `right: ;`
`l` --> `left: ;`

### Display

type `d:` followed by the first letter of the display's values

`d:b` --> `display: block`
`d:i` --> `display: inline`
`d:ib` --> `display: inline-block`
`d:f` --> `display: flex`
`d:if` --> `display: inline-flex`
`d:g` --> `display: grid`
`d:ig` --> `display: inline-grid`
`d:n` --> `display: none`

### Border

`bd` --> `border: ;`
`bd:n` --> `border:none;`
`bd+` --> `border:1px solid #000;`

### the `!important` modifier
just add `!` after the property's first letter
`p!` --> `padding: !important;`

## Grouping properties
You can write multiple properties in one line by using the plus `+` sign

For example:  `m10+p20r+bd++c#1` will produce:

```css
	/* m10 */
  margin: 10px;
	/* p20r */
  padding: 20rem;
	/* bd+ */
  border: 1px solid #000;
	/* c#1	 */
  color: #111;
```


## Conclusion 

See how Emmet is a powerful tool! Don't forget to leave a :heart: if this post was helpful to you!

**Happy Emmeting!**
How the cd command works in Linux
Tags: linux, webdev, tutorial, beginners
Published: 2022-03-04 12:40:57

The cd command in linux stands for change directory, and is used to change directory when you have a terminal window open. It's used frequently, so it is useful to know.

The syntax for the cd command looks like this:

```
cd [OPTIONS] directory
```

## How the cd command works
At its most basic, when we open a new terminal window, we can use cd to navigate between directories. Suppose we are in Documents, and there is a subfolder called Project. If we want to move into the Project folder, we would type the following:

```
cd Project
```

And if we want to move back up to documents, we can use `../` - so assuming we are in now in Project, the following command will bring us back to the Documents directory:

```
cd ../
```

## Using Relative Path Names with cd in Linux
While `../` refers to the directory one level above, `./` refers to the current directory. As such, if we are in Documents and want to move to Project again, the following command will also work:

```
cd ./Project
```

We can also string `../` together - so the following will move two directories up:

```
cd ../../
```

## How to navigate to the home directory in Linux
If you want to navigate to the home directory in linux, we have to use the cd command along with a tilde, or `~`.

As such, the following command will navigate us to the home directory:

```
cd ~
```
We can also navigate to directories within the home directory by following it with a slash, so the following will move us into a folder called Project within our home directory:

```
cd ~/Project
```

## Options for the cd command in Linux
There are two options available to the cd command which we can mention straight after we type cd. These are:

- `-L` - which is by default enabled, and ensures recognition of symlinks within linux.
- `-P` - which does the opposite of -L and ignores symlinks.

### What are symlinks?
Symlinks or symbolic links are virtual folders. They link to other folders in other directories. If we use -P with cd, then symlinks are ignored.

An example of a cd command with symlinks disabled looks like this:

```
cd -P ~/Project
```
First-Class Function in Python
Tags: programming, python, codenewbie, beginners
Published: 2022-03-04 12:31:17

Everything in Python is an Object (You heard it here first). Just kidding! Of course, at it's core everything in Python is an object.

Not all languages have this feature, but Python is one of them, together with JavaScript, Ruby etc.
This means, string, int, float, datatypes such as dictionary, list, tuple etc. are all objects.

Object is an entity with attributes and behavior. So, function in Python is treated as object. That's why you can call them as First-class function.

**First-Class Function** means that functions are treated as values -  that you can assign a function into a variable, pass it around etc. 

#### Properties of First-Class Function
* you can assign them as variable.
* you can pass them to other functions as arguments. 
* you can return them from other functions as values.
* you can store them in data structures.

Lets dive into code examples for each property

1.Assigning function as variable.

```
def square(num):
    return num*num

# store the function in a variable
result = square
print(result2(3))
```

2.Pass the function as a parameter to another function.

```
def morning():
    return "good morning"

def noon():
    return "good afternoon"

def greetings(function):
    greet = function()
    print(greet)

greetings(morning)
greetings(noon)
```

3.Return function from other functions as values.

```
def outer_power(num1):
    def inner_power(num2):
        return num1 ** num2
    return inner_power

power = outer_power(4)
print(power(3))

```
4.Store function in data structures

```
def plusOne(num):
    return num + 1

def plusTwo(num):
    return num + 2

def plusThree(num):
    return num + 3

list_function = [plusOne,plusTwo,plusThree]

for i in list_function:
    print(i)

print(plusOne)
print(plusTwo)
print(plusThree)
```
Find all files containing a string on Linux/Mac
Published: 2022-03-04 12:14:27

Sometimes on linux/unix computers, you will want to do a search for any files containing a particular string within it. This can be particularly useful when searching for specific things for a CI/CD pipeline.

On linux or mac, if we want to search a set of files for a specific string in a terminal, we use the **grep**.

## Find all files which contain a particular string on Linux or Mac
### Return the filename only
The below will find any file that contains the term 'html' in the '/views' directory. It will return only the file names.

```
grep -rl ./views -e 'html' 
```

### Return the text itself
Again, this will find any file containing the string 'html' in the '/views' directory. It will return the line which has that text in it.

```
grep -r ./views -e 'html' 
```

## How to use grep on Linux/Mac

You can string other options together, to get different results. When we say `-r`, for example, we mean 'recursive' - i.e. it will search through every folder. When we write `-rl`, this means essentially `-r -l`, which means search recursively, and return only the file name.

Below is a list of all grep options or switches, which you can add to your query to get the results you need:

1. **-r** - search recursively.
2. **-l** - return only the file name.
3. **-i** - ignore the case.
4. **-w** - search only for words, i.e. not text within words. For example, if we search for 'html', then somehtmltext would not match.
5. **-n** - returns the line number, but doesn't work with -l.
6. **-s** - suppress any error messages.
7. **-h** - output the line itself, without the line number or file.
8. **-v** - invert the search, i.e. searching for html with -v will return everything without html.
9. **-f** - used to indicate a file you want to use which contains a regular expression.
10. **-x** - match only if the whole lines only. This will only return for a search of html if that exists on its own line separately.
REDUX TOOLKIT FUNDAMENTAL
Tags: javascript, redux, react
Published: 2022-03-04 12:08:55

**Why Redux Toolkit?**
We know that Redux was a popular option for state management. It makes states predictable. Reducers are pure functions that means the same state and actions are passed will always result in the same output.
Redux also easily maintainable, scalable, efficient testing, easy debugging and better performance that Redux brings to build applications.

However, this flexible and high-level state management library comes with a few challenges:

1. Too much code to configure store.
2. Too much boilerplate code.
3. Too many packages needed to install to build scalable apps.
4. Writing actions and reducers becomes more complex on large applications.

To overcome these challenges, The Redux team came up with Redux Toolkit. It's main purpose is to speed up Redux development by including Redux Core with the packages that they think are essential to build a Redux app. It also makes our code and folder structure more understandable and organized.

**How We Started With Redux Toolkit?**

**Step 1: Packages Install**

```
npm install @reduxjs/toolkit react-redux
```
or,

```
npx create-react-app my-app --template redux
```
**Step 2: Initialize & Create Store**
We can create store.js file
```
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {} //add reducers here
})
```
**Step 3: Provide Store in React app**
In our index.js file

```
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
```
**Step 4: Reducers and Actions**

```
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increase: state => {
      state.value += 1
    },
    decrease: state => {
      state.value -= 1
    }
  }
})

// each case under reducers becomes an action
export const { increase, decrease } = counterSlice.actions

export default counterSlice.reducer
```
**Step 5: Import Reducer to Store**

```
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '.counterSlice' //import our reducer from step 4

export default configureStore({
  reducer: {
    counter: counterReducer //add our reducer from step 4
  }
})
```
**Step 6: Dispatch Actions from UI**

```
import { useSelector, useDispatch } from 'react-redux'
import { decrease, increase } from './counterSlice'
```