teleren/devto huggingface dataset:
Best Way to Trigger Child Component Function?
Tags: react, javascript
Published: 2022-02-10 21:11:21

**Parent Component:**
Component for a page which includes a table and some forms, such as creating a new row in the table from a form and deleting a row in the table.

**Table Component:**
I currently have a child component that's a for a table where the params include a function for requesting data. Whenever pagination occurs, we request the next paginated data.

**Actions that Should Request Data:**
- Pagination Changes on Table
- Creating New Row in Table from Form in Parent
- Deleting Row in Table from Parent

**The Issue:**
Since some actions occur in the parent or in other child components of the parent, I am unsure what the best way to call the Table Component's function. Right now I am thinking of just setting a boolean in the Parent Component that gets passed to the Table Component which calls the request data function.
Soap ui alternatives
Tags: soapui, microservices, memory, java
Published: 2022-02-10 21:00:56

Hi all,
Looking for some alternatives to soapui as it keeps crashing. I've tried postman but can't seem to get the mock server working. 

To note I've tried Dsoapui.browser.disabled=true and also  
Xms128m -Xmx2048m with no difference.

It usually happens when I'm running a number of Java microservices locally.


Cheers
Shouldn't recursion be prevented in React component?
Published: 2022-02-10 20:38:25

I had an error recently while working with React/Next.js and styled-components. I was to create a styled component for one of my app's regular components but accidentally gave it the same name.

This lead to an infinite loop in the browser. This is the first time I have experienced such error in React, and my problem was that there was no hint whatsoever as to what is wrong.

ESLint in webstorm wouldn't call it an error, because recursion do exists and it's not an error.

So I was thinking, is there no way React or should I say Next.js could have failed while compiling.

I know recursion can exist and isn't and shouldn't be logged as an error, but then should recursion exist in React?
How does calling a component inside of that component do something useful? I don't know if you guys do anything like that? Please share what you do with it.

My point is, if there is really no point of having a component inside of itself, then why not throw an error if that happens!
Vscode Assistant 0.16 Releases
Tags: vscode, javascript, webdev, beginners
Published: 2022-02-10 20:14:33

Vscode Assistant extension is becoming popular among software developers who excel in productivity.

It is a quite new extension that already is used by over 600 developers who enjoy having dynamic hints showing up right when they need it.

It is extremely easy to use it. Here is an example of a CSS hint about margin parameter order:

{

"regex": "margin: ",

"message": "Order: 1) topandbottom leftandright 2) top rightandleft bottom 3) top right bottom left"

}

And the best part is that you can write your own hints without telling you what you really need!

Today a new version of Assistant extension was released. It is a non breaking release, as usual.

New features:

    you can specify files where hint should show up
    hints have a tooltip indicating their source

[Install Assistant for VSCode](https://marketplace.visualstudio.com/items?itemName=tomasz-smykowski.assistant&ssr=false#overview )

**Disclaimer: This is a pro-bono article. 100% of profits from you reading it goes to dev.to page owners. Article author is not affiliated with and is not compensated for his work. **
WHY YOU SHOULD TEACH WEB DEVELOPEMENT
Tags: javascript, webdev, beginners, react
Published: 2022-02-10 19:39:23

I have 2 newbies I coach for web development and I would recommend it to any professional software developer. Do it, even for free!

If you are as passionate about software development as I am,i know you'd want to grow in this field and that you probably want to be the best developer you can be.

So Here's how Teaching a Newbie Is something you should consider:

1. 

**The satisfaction of contributing to your community**

-You've probably benefited from open source, Youtubers and the internet...this is an opportunity for you to give back, Benefit your community, your country and the world!

2.

**You learn as well, by teaching**

-Explaining and simplifying concepts to newbies helps you re-learn and solidify your knowledge.

 3.
 

**Teaching establishes Credibility**

-Your teaching credential establishes you as someone credible in their field. Let's face it, a youtuber with a lot of free web dev tutorials does look good on a resume!

4.

**An outlet for your creativity**
-The need to engage  students in learning calls upon a teacher to be creative in adapting and developing learning activities, and new technologies allow teachers to bring the world – even the universe – into their environments.
You'd be surprised how creative you can get to help explain complicated concepts!

 

5.

**You will be Making a real difference**
Your students’ success will be what drives you on. Of course, some students will succeed more easily than others but the feeling of accomplishment in seeing your students grow in confidence and ability will make it all worthwhile.

_You could literally be changing someone's life and upgrading their lifestyle!!_




Teaching Software Development has a lot of Job Satisfaction.
One of the reasons I love the Dev Community  is how much that is welcomed. There is a lot of free resources on the internet from amazing teachers and developers who love to share their knowledge!

**_Grab a Newbie and impact someone's life!!_**
Building Website from Scratch - Part 3
Tags: webdev, shriekdj, codewithshriekdj, vscode
Published: 2022-02-10 19:36:23

So Now I Am gonna Try to Change Code With **VS Code** ( Visual Studio Code ) Editor.

The VS Code Have also There own Boilerplate for HTML File Which I Am Gonna Use and It Will Look Like Given Below.
```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello World</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>
```

> Here `<html lang="en">` will inform the Website is in English Language just Like the Language Code for Hindi is hi [Language Code List](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang).

### Some Other Changes
I Also Added the Given Below Code In the File
```html
<div class="wrapper">
	<header class="header">Website Header</header>
	<nav class="nav">
		<a href="#">Home</a><br />
		<a href="#">About</a><br />
		<a href="#">Contact</a><br />
	</nav>
</div>
```

I Made The `<header></header>` and `<nav></nav>` tag separate because i like it that way and added them in wrapper div tag.

> `header` tag can be used for Website Logo as Image Or Name.
>> `nav` tag is for the links within the site

All The Three `<meta>` are something like a additional information for site and Soms Configuration of the Site for all types of screens.

Site Looks like this Image.

![Screenshot of the Simple Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs7vcygbgcmswhwgpb6k.JPG)

## Pull Request
{% github https://github.com/shriekdj/site-from-scratch/pull/4 %}

## GitHub Repo
{% github shriekdj/site-from-scratch %}
Maximum Subarray Sum
Tags: beginners, programming, java, dsa
Published: 2022-02-10 19:33:13

Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.
A subarray is a contiguous part of an array.

<u>Example 1:</u>
Input: nums = [-2,1,-3,4,-1,2,1,-5,4]
Output: 6
Explanation: [4,-1,2,1] has the largest sum = 6.

To solve this question click here:(https://leetcode.com/problems/maximum-subarray/)

Though it is a **EASY LEVEL** question but is really very important.

**Brute force Approach:**
_Time Complexity: O(n^3)_

**C++ CODE:**
```
#include<iostream>
#include<climits>
using namespace std;
int main()
{
    int n;
    cin>>n;
    int arr[n];
    for(int i=0;i<n;i++)
      cin>>arr[i];
    int maxSum=INT_MIN;
    for(int i=0;i<n;i++)
    {
        for(int j=i;j<n;j++)
        {
            int sum=0;
            for(int k=i;k<=j;k++)
                sum+=arr[k];
            maxSum=max(sum,maxSum);
        }
    }
    cout<<maxSum<<endl;
    return 0;
}
```
This question can be solved in an optimized way by using **Kadane Algorithm.**
_The simple idea of Kadane’s algorithm is to look for all positive contiguous segments of the array. And keep track of maximum sum contiguous segment among all positive segments_

**C++ CODE:**
```
#include<iostream>
#include <climits>
using namespace std;
int main()
{
    int n;
    cin>>n;
    int arr[n];
    for(int i=0;i<n;i++)
    cin>>arr[i];

   int currSum=0;
   int maxSum=INT_MIN;
   for(int i=0;i<n;i++)
   {
       currSum+=arr[i];
       if(currSum<0)
           currSum=0;
       maxSum=max(maxSum,currSum);
   }
   cout<<maxSum<<endl;
    return 0;
}
```
Better Shadow Generator for React Native 📱
Tags: reactnative, react, mobile, programming
Published: 2022-02-10 19:28:56

Hi everyone,

I was working on a **React Native** project some time ago and I needed a **box shadow generator** which will give the same result both on iOS and Android for different elevations. There are very few online tools doing this and they do not give similar results on all cases for both platforms.

As a frontend developer who is actively coding an online toolbox ([10015.io](https://10015.io)), this pushed me to  develop a better shadow generator for React Native. 

Here you can see the React Native shadow generator I developed.

👉 [https://10015.io/tools/react-native-shadow-generator](https://10015.io/tools/react-native-shadow-generator)

The main problem on other tools is: in Android, opacity of the box shadow is decreased exponentially when you increase the elevation. All other tools make a lineer interpolation, so when you increase the elevation, box shadow looks darker in iOS with respect to Android. I solved this problem by setting the opacity exponentially, and it gives far more better results on both platforms for both low and high elevations.

Here you can see a sample code for style props generated by the tool.

```
shadowColor: "#000000",
shadowOffset: {
  width: 0,
  height: 3,
},
shadowOpacity:  0.17,
shadowRadius: 3.05,
elevation: 4
```

If you are a React Native developer, I will be grateful if you give me feedback about the results.

👋
Don't backlog your bugs
Tags: agile, productivity, management, leadership
Published: 2022-02-10 19:26:29

It's an unproductive anti-pattern to put bugs into the backlog, where they just grow old and fester. It's really time to stop that.

I say fester, because a backlog of bugs is anti-lean, anti-agile, and a giant waste of resources: It's a waste of time to groom what isn't going to be worked on soon anyway, it's a waste of mindspace to carry them around in someone's head, it's a waste of time to manage which to pull in and which to ignore for another 6 months, they're just a waste of time!

But that's only half the issue: They also represent an immediate and growing risk. If bugs come in and they're just… part of the workflow, then you're ignoring a clear signal that some area urgently needs improvement. There should be angry customers waiting for this bug to be solved, and who's to say what bug or set of bugs will soon conspire to cause a catastrophic outage? The bugs you know about can just be the tip of the iceberg.

To top it off they also ruin predictability because they're unplanned work. So they threaten your plans too. What more reasons are needed to take them seriously?

So how many bugs are acceptable then? None! Zero bugs. Pursue perfection! (incidentally that's the 5th principle of Lean). [Kevin Sookocheff writes about his "Zero Bug Policy"](https://sookocheff.com/post/process/zero-bug-policy/) as a way to drive towards 0 bugs. And when bugs do happen, use them as opportunities to reflect on how we can work smarter to avoid them in future work.

This attitude forces a nuance, because not all defects are automatically high-priority bugs. What we really need to urgently react to are bugs in features developers have context-switched away from. But if you find a defect in a feature that's still in-progress then it's not really a bug in the urgent sense.

So be clear on what is a bug, and both prioritize solving every one of them immediately and identify ways of working that reduces the rate of bugs. And definitely don't backlog them.
Cumulative Sum 
Tags: algorithms, database, cpp
Published: 2022-02-10 19:25:43


in this article, I will talk about Cumulative sum but first, let me talk about one of the most common problem in computer science if we have an array and we wanna calculate the summation 
of a specific range in this array, you will think of nested loops that sound good. 
but this solution is (o(n)^2) can we get a better solution ??
Yes, we can do that by using (cumulative sum). ok, what is that exactly?

The cumulative sum is a technic we use to get the summation of a specific range in an array in(o(1)).
by generating a new array each element in that array contain the summation of elements before that 

element.

## **ok, How we can write this code?**


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


**ZERO BASED**
```
int range(int s,int e,vector<int>&v){
if(s==0)
    return v[e];
    return v[e]-v[s-1];
}
int main()
{

    vector<int>v={1,2,3,4,5,6};
    vector<int>s(v.size(),0);
    for(int i=0;i<v.size();i++){
        s[i]+=(i==0)?v[i]:v[i]+s[i-1];
    }
    cout<<range(2,4,s);
    return 0;
}
```
**ONE BASED**
```
int range(int s,int e,vector<int>&v){
    return v[e]-v[s-1];
}
int main()
{//one based
    vector<int>v={0,1,2,3,4,5,6};
    vector<int>s(v.size(),0);
    for(int i=1;i<v.size();i++){
        s[i]+=v[i]+s[i-1];
    }
    cout<<range(2,4,s);
    return 0;
}
```
"BINARY" in 100 words
Tags: beginners, programming, tutorial, productivity
Published: 2022-02-10 19:18:02

## INTRODUCTION
- Binary is one of the many counting system that are out there.
 It is a number system where all possible values can be 
 represented by **2** symbols.


![BINARY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xw2fincneslibv938rj.gif)

- The most commonly used counting system which is used in day to day life is the decimal system (also known as base 10 positonal),in which every number can be represented by using **10** number making it much more efficient than binary system.But the reason why binaries are used in computer instead of other efficient counting system is because of computers physical limitations.

- Everything that computer does can come down to **micro** **transistor** which works on two energy levels that is binary.

## REPRESENTATION

- A single **BINARY DIGIT** is called a **BIT** and you can not do much with it,so they come in a pakage of 8 called as BYTE that can represent **256** values.

![ONE BYTE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flej3afbmze421ryj72g.png)

## BREIF HISTORY
- In acient times binary were used by many civilisation as there counting system.For example:In egypt it was used in **HORUS EYE's** fraction and similarly in **I CHING** in china.

![HORUS EYE AND ICHING](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/futstaqhhrha3d2lu0l9.jpg)

> _Binary is also the basis of **MORSE CODE** where every letter is represented by 2 different sounds._

> _When first computer(**ENIAC 1945**) arrived they were programed by manual flicking switches which represents binary._

##IMPLEMENTATION

- Todays modern microchips consist of billions of transistors that uses logic gates to execute binary code billions of times per second.

![Apple m1 chips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjd3oyug1fobiqn0m2cg.gif)
- Modern programmers dont write binary directly instead they write code in high level languages like python and C++ which then can be interpreted or compiled into binary format.

![assembler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgzphs7d1ha86wjd8i0a.png)
- In computers these binary are mapped as to something more intresting for human like a letter or a alphabet using ASCII table or the the colour of pixel in an image.


This is all for this blog,thanks for reading:)
suggestions are most welcomed.
HAVE A NICE DAY!
(Btw this is my first BLOG:))
Showing different titles depending if the tab is active or not
Tags: javascript, titles, tricks
Published: 2022-02-10 19:07:55

---
title: Showing different titles depending if the tab is active or not
published: true
description: Using focus and blur event handlers you can show a different title on the tab when it is inactive
tags: javascript, titles, tricks
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://christianheilmann.com/2022/02/10/showing-different-titles-depending-if-the-tab-is-active-or-not/
---

I just encountered a sneaky thing I had not seen, although it probably worked in 1999 already. A web site was showing a different title on the tab, depending on it being active or not. 

![Different titles showing on active and inactive tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2racfkwuvw0s81koyk5f.gif)

The whole trick is to use the blur and focus event handlers on the window to change the title. 

```javascript
window.onblur = function() {
    document.title = 'Please come back!';
}
window.onfocus = function() {
    document.title = 'You have 6 items';
}
```

You could also change the `favicon` that way. Maybe this is a common practice and it feels pretty spammy, but there may be some good use cases for it, too. 

If you don't want to clobber other events, it is better to use `addEventListener`: 

```javascript
let activeTitle = 'You have 6 items';
let inactiveTitle = 'Please come back';
document.title = activeTitle;
window.addEventListener('blur', e => {
    document.title = inactiveTitle;
});
window.addEventListener('focus', e => {
    document.title = activeTitle;
});
```
How do abstract Socket.IO connections in your SPA.
Tags: react, javascript, tutorial
Published: 2022-02-10 18:49:58

When working with socketIO client in your SPA, it may become very hard to manage the socket instance, events emitters, and work with the callbacks in different places of the app. Especially when there are multiple different servers to connect with. What can be done?

## Solution
We can create a closure that takes event callbacks as functions and return event emitters, to abstract socketIO implementation in a single file (let's call it **SocketManager.js**).


### Example
```javascript
import io from "socket.io-client";

const SocketManager = ({
  onCallback = () => {},
}) => {
  const socket = io(/* server url to connect */);

  // Callbacks
  socket.on('callback-event-name', (payload) => {
    onCallback && onCallback(payload);
  });

  // Emitters
  const emitEvent = (eventPayload) => {
    socket.emit('emit-event-name', eventPayload);
  };

  return {
    socket,
    emitEvent
  };
};

export default SocketManager;

```
then we can use this in our React code like this
```javascript
import React from "react";
import SocketManager from "./SocketManager.js";

const SocketConsumer = () => {
  const { emitEvent } = SocketManager({
    onCallback: handleCallback,
  });

  const handleCallback = (payload) => {
    /** Do something with the payload */
  };

  return <button onClick={emitEvent}>Fire Event</button>;
};

export default SocketConsumer;
```

Hope this helps you in your projects. Thanks 🙂
Happy Number
Tags: python, dsa, beginners, tutorial
Published: 2022-02-10 18:48:42

**Problem Statement**

Write an algorithm to determine if a number n is happy.

A happy number is a number defined by the following process:

Starting with any positive integer, replace the number by the sum of the squares of its digits.
Repeat the process until the number equals 1 (where it will stay), or it loops endlessly in a cycle which does not include 1.
Those numbers for which this process ends in 1 are happy.
Return true if n is a happy number, and false if not.

**Approach**

- First of all we need to check if the number is already 1. If it is so, return True.

- Now if it is not so we dedicate a list of numbers to keep the track of the numbers that we already visited. If we visit them again, naturally we are in a loop and we cannot visit 1. Hence return False.

- Else its obvious we will visit 1 and one we hit 1 return True.

**Algorithm**


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


**Code**

```
class Solution:
    def isHappy(self, n: int) -> bool: 
        #Check if the number is already 1 
        if n == 1: return True

        numArray: list[int] = []

        #Now loop through until the number becomes 1 or it is in numArray
        while n not in numArray:
            numArray.append(n)
            tempNum: int = 0

            while n > 0:
                tempNum += ((n%10) * (n%10))
                n //= 10

            if tempNum == 1: return True

            n = tempNum

        #If this statement hits, then it's a false
        return False
```

**Leetcode Result**


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

So that's it... make sure if you liked the post and got to learn something, like the post and follow us. If you want me to improve at some point... leave that in the comment...
New Changes to TexCreate
Tags: rust, tex, mkprojects, texcreate
Published: 2022-02-10 18:41:40

TexCreate has probably been one of my biggest projects because I actually want to keep on improving it. It's the only project I probably use daily, and now it's getting to the point where I'm expanding it so each sort of area in it can be easily altered or optimized. 

How do you say? Well from converting the single package and an awkward library to the side to a whole Cargo workspace. So here are the changes: 

```toml
[workspace]
members = [
    "texcreate",
    "texcreate_web",
    "texcreate_templates",
    "texcreate_config"
]
```
- **texcreate**: The main CLI application 
- **web**: The rocket web server to run TexCreate web locally
- **templates**: Contains everything related to the prebuilt templates
- **config**: Contains everything related to building the project

Another inside the hood thing is making almost everything asynchronous, now why would I want that? Well especially in multi-mode, I don't want it to run synchronously in the case one project messes with the other, and for the case someone tries to build 50 projects or something. 

Now usually it's fast in any case, but going with `async` means I am more fool proof in the extreme cases, and also why not!

Currently it will take a while to migrate these changes to the current build, but I hope that once I do development will be less of a task, or at least a better experience.