teleren/devto huggingface dataset:
POINTERS IN C
Published: 2021-05-20 10:38:06

• Variables are allocated memory space in main 
memory/primary memory, to store their 
values.
• Main memory is partitioned into cells called 
memory cells/memory word .
• Each memory word is given address which is 
numerical that ranges from 0 , 1, 2 ….• Pointer is a data type
• Value of pointer variable is memory address which is 
numerical value
Declaration
 int *P1;
P1 is a pointer variable pointing to integer
value of P1 is memory address of int variable
• Address operator
int x;
 &x refers to address of x 
Address of x can be assigned to a pointer variable
ex: P1=&x

   #VOID POINTER

void pointer is a special type of pointer. 
Void pointer can point to a variable of any data type, 
 integer , float ,character.
– The type casting or assignment must be used to turn the 
void pointer to a pointer of a concrete data type to which we 
can refer.
– limitation is that the pointed data cannot be referenced directly 
(the asterisk * operator cannot be used on them) since its length is 
always undetermined.

**Example**
#include <stdio.h>
int main()
{
int a=5,
double b=3.1415;
void *vp;
vp=&a;
printf(“\n a= %d”, *((int*)vp)); // type casting to int pointer
vp=&b;
printf(“\n a= %d”, *((double *)vp)); 
// typecasting to double pointer
return 0;
}
OUTPUT:
a= 5
b= 3.141500

One dimensional Arrays & pointers:

• Array name is address of first element. So array name 
is a pointer
• We can access array elements using array name 
without using subscript
Int x[5];
x refers to address of 0th element
x+1 refers to address of 1st
 element
…..
x+n-1 refers to address of (n-1)th or last element

// accessing array elements using array name which is a pointer
#include<stdio.h>
#include<conio.h>
main()
{
int a[5]={10,20,30,40,50};
clrscr();
printf("address of a[0]=%p a[1]=%p a[2]=%p\n",&a[0],&a[1],&a[2]);
printf("address of the first element of array=%p\n",a);
printf("value of first element=%d value =%d\n",a[0],*a);
printf("value of second element=%d value=%d\n",a[1],*(a+1));
printf("value of last element=%d value=%d\n",a[4],*(a+4));
return;
}

Accessing array elements using pointer

#include<stdio.h>
int main()
{
 int i,a[7]={1,2,3,4,5,6,7};
 int *p;
 p=a; // array name is a pointer to the first element
 for(i=0; i<7; i++) 
printf("%d\t",*(p+i)); //adding i value to pointer p
 return(0);
}

Operations on pointer variables:

• Pointer variable can be assigned with NULL 
 ex: int *x=NULL
• Pointer variable can be initialized with another pointer or with address of 
another variable
Ex: 
float x;
float *p1=&x, *p2=p1;
• Integer constant can be added to a pointer. This is useful for accessing 
array elements
Ex:
 int a[5]={1,2,3,4,5}
 int *p1=a;
 p1=p1+2 refer to third element of array
What Is End-to-End Testing (E2E) and What Are the Benefits?
Published: 2021-05-20 10:35:37

What is end-to-end testing? Why to opt for this type of testing and what benefits can it bring? All the details in our crisp new post. https://hiretester.medium.com/what-is-end-to-end-testing-e2e-and-what-are-the-benefits-5c0673e2b992

#E2E #E2Etesting #QA #testing #softwaretesting #HireTester #endtoendtesting
React Modal example
Tags: react, modal, example
Published: 2021-05-20 08:51:32

https://grokonez.com/frontend/react/react-modal-example

React Modal example

In this tutorial, we're gonna add a React Modal to <a href="https://grokonez.com/frontend/how-to-build-and-run-react-application-with-webpack-react-webpack-example">Note Application</a>. It appears every time we click on a Note item.

Related post: <a href="https://grokonez.com/frontend/how-to-build-and-run-react-application-with-webpack-react-webpack-example">Build & run React Application with Webpack – React Webpack example</a>

More practice: <a href="https://grokonez.com/frontend/how-to-add-style-react-application-webpack">Style React Application – apply SCSS/CSS files to React with Webpack</a>

<!--more-->
<h2>Goal</h2>
When clicking on any Note item, a new Box that displays item content is opened. We can close by <strong>OK</strong> button, by clicking on outside area, or by pressing <strong>ESC</strong> key.

<img src="https://grokonez.com/wp-content/uploads/2018/04/react-modal-example.png" alt="react-modal-example" width="440" height="430" class="alignnone size-full wp-image-11579" />
<h2>How to</h2>
<h3>Install React Modal</h3>
We can use <strong>npm</strong> or <strong>yarn</strong>:
<pre><code class="language-javascript">
npm install react-modal
yarn add react-modal
</code></pre>
Or add dependency in <strong>package.json</strong>:
<pre><code class="language-javascript">
{
  "name": "add-modal",
  "version": "1.0.0",
  "main": "index.js",
  "author": "JavaSampleApproach",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
    "react-modal": "3.3.2",
    ...
  }
}</code></pre>
Then run cmd <code>yarn install</code>.
<h3>Create React Modal Component</h3>
<pre><code class="language-javascript">import React from 'react';
import Modal from 'react-modal';

const modalStyles = {
    content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'
    }
};

const NoteModal = (props) =&gt; (
    &lt;Modal
        isOpen={!!props.selectedNote}
        onRequestClose={props.closeNoteModal}
        style={modalStyles}
        contentLabel='Selected Note'
        ariaHideApp={false}
    &gt;
        &lt;h4&gt;Selected Note&lt;/h4&gt;
        &lt;p&gt;{props.selectedNote}&lt;/p&gt;
        &lt;button onClick={props.closeNoteModal}&gt;OK&lt;/button&gt;
    &lt;/Modal&gt;
);

export default NoteModal;</code></pre>
- <code>isOpen</code> indicates that the modal should be shown (<code>true</code>) or not (<code>false</code>).
- <code>onRequestClose</code>: function runs when the modal is requested to be closed (clicking on overlay or pressing ESC).
- <code>style</code>: styles to be used.
- <code>ariaHideApp</code>: describes if the <em>appElement</em> should be hidden (<code>true</code>) or not (<code>false</code>).
<h3>Add React Modal to parent Component</h3>

More at:

https://grokonez.com/frontend/react/react-modal-example

React Modal example
Glassmorphism Side Navigation With HTML & CSS
Tags: html, css, javascript, webdev
Published: 2021-05-20 10:25:13

Today I created a Glassmorphism Side Navigation with HTML,CSS & JS. I use the Glassmorphism effect to create this Side Navigation bar and also I use littlebit js. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/LYWbexW %}
Data Structures and Algorithm
Tags: algorithms, programming
Published: 2021-05-20 10:18:41

Hi guys I need your help with data structures and algorithms.
I am just at medium level in programming. Now I want to improve my data structures and algorithm, but I am not getting any interest in programming as well. I want you guys to help me in this way. If you are doing any project in Java or C++, then you can tell me. If you do have any suggestions to study data structures and algorithms, then please do share them with me in the comments. I need your motivation. If someone wants to study together with data structures and algorithms, then you can talk with me. Thanks
React Best Practices To Follow In 2021

Tags: reactnative, software
Published: 2021-05-20 10:09:09

React is a well known open-source JavaScript library that is used to create unique and innovative applications. It was created by Facebook and allows integration with many exciting components, libraries and frameworks. Also, developers can make their own components. Developing an app with React is not as simple as it looks. Knowing the react best practices will help you to develop an effective app within less time. Still, if you are not aware of the react best practices, then this blog is for you. Let us see the React best practices.

Know the reasons to use React for app development at- Why you should build your app with react native?

#React Best Practices To Follow In 2021-
**1. Project Structure-**
*1.1 Folder layout-*
Architecture mainly focuses on reusable components of react developer architecture so as to share the design pattern among multiple internal projects. So the component-centric file structure should be used that means all the files related to a different component (Javascript, assets, CSS etc.) should be kept under a single folder. 

Components
	|
	--Login
		|
		--tests--
		--Login.test.js
		--Login.jsx
		--Login.scss
		--LoginAPI.js
This one is another approach used in grouping the file types. In this, the same type of files is kept under one folder. Here, same type of files is kept under one folder. For instance,

APIs
  |	
  --LoginAPI
  --ProfileAPI
  --UserAPI

Components
  |	 
  --Login.jsx
  --Login.test.js
  --Profile.jsx
  --Profile.test.js
  --User.jsx
Above structure is the basic example. The folders can be further nested based on requirements.

*1.2 Css in JS-*
In huge projects, theming and styling can be challenging tasks like maintaining nig scss files. Hence, the concept of CSS-in-JS solutions comes into focus. Following libraries are based on it-

EmotionJS
Styled Components
Glamorous
Among those libraries, you can use as per your requirement such as, for complicated themes, you can select styled-components or Glamorous.

**2. Coding Style Best Practices-**
*2.1 Naming Conventions-*
When you work with React, generally you are using JSX(Javascript extensions) files. A component that you create for React should be named in Pascal case, or upper camel case. This translates to names without spaces and capitalizing the first letter of every word. If you have to create a function that submits a form, you should name it SubmitForm in upper camel case, instead of SubmitForm, submit_form. Generally, Upper camel case is called the Pascal case.

For globally used Constant fields in the application, try to use only capital letters. For example, PI = “3.14”;

**2.2 Avoid unnecessary DIV-**
When there is a single component to be returned, no need to use <div>.

Know more at- [https://solaceinfotech.com/blog/react-best-practices-to-follow-in-2021/]
Changing Cursor with CSS for better UX
Tags: css, webdev, beginners, ux
Published: 2021-05-20 10:07:47


<p><span class='first-letter'>T</span>he cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.</p>

There are some cases where the default cursor behaviour from the User Agent Stylesheet doesn’t cut it. In these cases, we ought to change the cursor to something that reflects the expected user interaction on that element.

Checkout all the cursors on <a href="https://codepen.io/suprabhasupi/pen/PopGBRO">codepen</a> 🧡

{% codepen https://codepen.io/suprabhasupi/pen/PopGBRO %}

### Using a Custom Cursor ↓

The cursor property is specified as zero or more `<url>` values, separated by commas. The cursor property does accept SVG files in all its glory but not Gifs.

Yes, you can create your own custom cursor using any images like png, jpg, etc.

```html
<div class="cursors">
  <button class="heart">Heart</button>
  <button class="earth">Earth</button>
  <button class="smile">Smile</button>
</div>
```

```css
.cursors {
  display: flex;
  flex-wrap: wrap;
}
.heart {
  cursor: url("https://i.imgur.com/K10EMnr.png"), auto;
}
.earth {
  cursor: url("https://i.imgur.com/scE50J2.png"), pointer;
}
.smile {
  cursor: url("https://i.imgur.com/aPPijZC.png"), pointer;
}
```

#### Output:

<img src="https://i.imgur.com/asebYTQ.gif" alt="all-cursor" />

📝 <mark>NOTE</mark>: The size of the <b>images should not be greater than 32*32 DIP</b>, else you will get the below warning and your image won't work. 

<img src="https://i.imgur.com/GKqbT5W.png" alt="cursor-warning" />

I have used <a href="https://www.birme.net/?target_width=32&target_height=32">this website</a> for resizing my images.

## Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/API/Console" >MDN Doc Cursor</a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Smartphone, a Spy in your Pocket
Tags: security, privacy
Published: 2021-05-20 08:26:49

You've seen the latest episode of Envoyé Spécial (french TV).
It's kind of scary ...


Especially about one story about our phones and the numerous data shared through them that are sold, shared and used, most often without our consent.

In my last video, I go over all the data that are shared through our phones.

{% youtube hXWLcASYBOQ %}

Understanding the amount of data shared and try to limit it is a good starting point.

But also understanding what data hackers might be trying to get on my phone is important.

And finally, that everyone understands that it is essential to reset your phone when you sell it as a second-hand device. 😉

---

*If you like this content, push the like button, that helps spread the message.* 👍🏼
*If you think it can be useful to anyone in your network, share it.* 📨

---

Video produced by [Wild & Secure](https://wildnsecure.com), your consulting firm to all things security and real estate.
If you want to receive weekly quality content about security, subscribe to our newsletter on our website. [https://wildnsecure.com](wildnsecure.com)
Looking for Reviewers
Tags: typescript, cpp, javascript, java
Published: 2021-05-20 09:32:12

We have published a book 

The TypeScript Workshop
The SQL Workshop
The Go Workshop
The JavaScript Workshop  
C++ Workshop
The TensorFlow Workshop

We are giving a chance to read and review the book. If interested drop me a mail on royluisr@packt.com or send me a request on https://www.linkedin.com/in/royluis-rodrigues-66479123/
How to connect React with Redux – react-redux example
Tags: redux, react
Published: 2021-05-20 09:29:06

https://grokonez.com/frontend/react/how-to-connect-react-with-redux-react-redux-example

How to connect React with Redux – react-redux example


We have created a <a href="https://grokonez.com/frontend/react-router-example-v4">React Application with React Router v4</a>, then we also learned how to use Redux to manage state in <a href="https://grokonez.com/frontend/redux-combinereducers-example">Redux combineReducers example</a> and <a href="https://grokonez.com/frontend/redux-filter-sort-example-redux-reducer-example">Redux Reducer example – filter & sort data</a>. In this tutorial, we're gonna combine all of them by connecting React with Redux using <code>react-redux</code>.

Related Posts:
- <a href="https://grokonez.com/frontend/how-to-filter-list-react-redux-example">How to filter list with input text – react-redux example</a>
- <a href="https://grokonez.com/frontend/how-to-sort-list-react-redux-example">How to sort list – react-redux example</a>
- <a href="https://grokonez.com/frontend/add-item-form-react-redux-example">Add Item Form – react-redux example</a>
- <a href="https://grokonez.com/testing/how-to-test-react-redux-jest-test-tutorial">How to test React Redux application with Jest</a>

More Practice:
- <a href="https://grokonez.com/frontend/react-redux-firebase-crud-operations-example">React Redux – Firebase CRUD Operations example</a>
- <a href="https://grokonez.com/firebase/react-redux-firebase-auth-example-google-account-sign-in-sign-out-example">React Redux Firebase Authentication – Google Account Sign in/Sign out example</a>

<!--more-->
<h2>React Redux</h2>
<h3>connect() function</h3>
<code>react-redux</code> is a Redux binding for React that allows us connect React with Redux in an efficient way.
The most important function is <code>connect()</code> that:
- connects a React Component with a Redux Store.
- returns a new connected Component class without modifying the Component class passed to it.

This is how we use <code>connect()</code> function:
<pre><code class="language-javascript">
...
import { connect } from 'react-redux';

const BookList = (props) =&gt; (
    &lt;div&gt;
        Use {props.books}
    &lt;/div&gt;
);

const mapStateToProps = (state) =&gt; {
    return {
        books: getVisibleBooks(state.books, state.filters)
    };
}

export default connect(mapStateToProps)(BookList);</code></pre>
-> <code>mapStateToProps</code> get <code>books</code> <em>props</em> from <em>state</em>.
-> <code>connect()</code> function get the function as parameter and apply to <code>BookList</code> Component to return a new connected React Component that can work with React <em>state</em>.

We can use <code>connect()</code> with one or more arguments depending on the use case:

More at:

https://grokonez.com/frontend/react/how-to-connect-react-with-redux-react-redux-example

How to connect React with Redux – react-redux example
Introduction to Redux – a simple practical Redux example
Tags: redux, react
Published: 2021-05-20 09:05:42

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example


In this tutorial, we're gonna introduce main concept of Redux: what it is, how to work with Redux Store, Action, Reducers. Then we will practice to understand all of them in a simple practical Redux example.

Related Post: <a href="https://grokonez.com/frontend/how-to-connect-react-with-redux-react-redux-example">How to connect React with Redux – react-redux example</a>

<!--more-->
<h2>Overview</h2>
<h3>Redux</h3>
Redux is a state container that helps JavaScript applications to manage state.
=> Whenever we wanna read the state, look into only one single place - Redux Store.
=> Managing the state could be simplified by dealing with simple objects and pure functions.
<h3>Redux Store</h3>
Store holds the current state so that we can see it as a single source of truth for our data.
With Redux Store, we can:
- access to state via <code>store.getState()</code>
- update state via <code>store.dispatch(action)</code>
- register listeners via <code>store.subscribe(listener)</code>
- unregister listeners via the function returned by <code>store.subscribe(listener)</code>:
<pre><code class="language-javascript">
const unsubscribe = store.subscribe(listener);
unsubscribe();
</code></pre>
<strong>*Note:</strong> We only have a single store in a Redux application.
=> When we wanna split data handling logic, we <a href="https://grokonez.com/frontend/redux-combinereducers-example">combine Reducers</a> instead of using many Stores.
<h3>Redux Reducer</h3>
Reducer is a pure function that generates a new state based on an Action it receives. These Actions only describe what happened, but don't describe how state changes.
<pre><code class="language-javascript">
const countReducer = (state = initialState, action) => {
    // return state;
}
</code></pre>
<strong>*Note:</strong> Reducer must be a pure function:
=> From given arguments, <strong>just calculate</strong> the next state and return it.
=> No side effects. No API or non-pure function calls. No mutations.
<h3>Redux Action</h3>
Action is payload of information that is sent to Store using <code>store.dispatch(action)</code>.
Action must have a <code>type</code> property that should typically be defined as string constants. It indicates the type of action being performed:

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example
Challenge 2 : Crappo Crypto currencies
Tags: webdev, html, saas, parcel
Published: 2021-05-20 08:48:31

Welcome to the `second challenge` 🚀
I will really proud if you enjoy to follow me in this crazy adventure. 
Each challenge will be organize of the same way : description about the project, roadmap to scope the project, deployment and of course clear documentation.

[Github project](https://github.com/Geminii/crappo-crypto)
[Demo](https://crappo-crypto-cnkhm098o-geminii.vercel.app)


## Project overview 📝
The goal of this project is to build a landing page for your crypto currencies. A [demo](https://crappo-crypto-cnkhm098o-geminii.vercel.app/) is available to see the result. 

![Crappo Crypto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8bkl488x3jc1a0fsuev.png)

## What I wanted to do 👷‍♂️
- Templating Html/Css from FigmaCrush template
- Responsive even if no mobile version in the Figma template
- Animate each section of this beautiful landing page

## Technologies used 🛠
For this project, I decided to focus on the use of these technologies : 
- [Html5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
- [Sass](https://sass-lang.com/)
- [Parcel](https://parceljs.org/)


## What I learned 👀
Every project is different and it's always exciting to find out why. 

[Html5] Before to create the style of your design, I recommend you to create the entire of your html and follow a naming convention. In my case, I try to respect [BEM](http://getbem.com/) as best as possible.
![BEM html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exj1qcdpd9bip391tli5.png)

[Sass] Organize a project is really important when you need to paralyze your tasks and more easy for your responsive. 
![Sass organization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fte4j3sy3nk841gr1r1b.png)

[Parcel] I wanted to practice Parcel.js because it's a blazing fast, zero configuration web application bundler. I had heard of it but not had the opportunity to use it. This is now the case :)
![Parcel usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fg2d008twds344kq42l.png)

## Improvements 🛫 
I think it could be nice to improve this project nope ? What do you purpose for this ? I have another ideas, but I'm curious to know yours 😀

Feel free to let me your comments 🙏 ❤


Thanks a lot to join me on this adventure and to follow me. 🤩 Continue to learn and practice by the same way. 🚀
Setup Github Actions Angular project
Tags: github, actions, angular, ci
Published: 2021-05-20 08:44:27

Hi! I discover this great <strong>ci tool</strong> for your <strong>Github</strong> projects, this is easy way to add ci in your projects, and for example validate your pull request before merge.

Here, I am going to put my scripts of my package.json for ci, this is only an example you need to put your own scripts:
```javascript
    "test:ci": "ng test --browsers ChromeHeadless --code-coverage --watch=false",
    "sass-lint": "sass-lint -v -c ./sass-lint.yml",
    "format:fix": "pretty-quick --staged",
    "lint": "eslint \"**/*.{ts,tsx}\" --quiet --fix",
    "all-lints": "npm run format:fix && npm run lint && npm run sass-lint"
```

And now we need to create our "actions" for <strong>Github actions</strong> this example it's for validate our Pull Request:

First, in your root folder, create a new folder with this name:
 - .github

Inside the .github folder create new one with the name:
 - workflows


Finally we create new action-file:
 - This file have to be .yml, in my case the name of the is "pull-request" but you can whatever you want, the result is this:
![folder structure](https://i.imgur.com/LjgCnoY.png)

This is the content of my flow (pull-request.yml):
```javascript
name: Pull Request Validations

on: [push, pull_request]

jobs:  
  test:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v1
    - name: Install node
      uses: actions/setup-node@v1 #this will install Node and npm on Ubuntu
      with:
        node-version: '12.x'
    - name: Install dependencies
      run: npm install
    - name: Install Angular CLI
      run: npm install -g @angular/cli > /dev/null    
    - name: Run linters and prettier fix
      run: npm run all-lints
    - name: Run Test
      run: npm run test:ci  
```

Finally, we push our changes and create a Pull Request to join to our master(or main) branch, and automatically our validations will run if this finish with success you will able to merge, if not you need to review the logs, in this screen:

![Github actions screen](https://i.imgur.com/xx1Ibdo.png)