teleren/devto huggingface dataset:
Render props in React
Tags: react
Published: 2021-09-25 21:52:46

In the previous articles, we discussed what is stateful logic sharing, why do we need it and one of the popular solution for that, HOCs.

In this articles let's take a look at another popular solution for the stateful logic sharing.

For the explanation I will use the same example that I have used in the previous articles.

In that examples we had three separate components before applying HOCs, with some duplicated stateful logic inside them. I will mention them here as well for the ease of reference.

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=ButtonCounter.js %}

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=HoverCounter.js %}

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=InputCounter.js %}

If we take a closer look at these components, we can see that the only thing that are different from each other is the render method (And the name of the component obviously 😅).

So what if we just created a single component and pass what to render to that component as a prop? 

That's exactly what we are going to do.

We can create a component called `Counter` and put the sharable stateful logic inside of it. And instead of rendering specific content we are going to render the content dynamically. 

For that, we can use the render prop.

The render prop is, is an ordinary prop like any other whose value is a function. This function is responsible of rendering the dynamic content. And we can pass whatever information we need to share to that function as arguments.

Let's see that in code.

In below Counter component you can see that we just execute the render prop inside the render method. Also, we are passing the count and the increment handler as arguments to the `this.props.render()` function.

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=Counter.js %}

Then we can create a Button counter using the Counter component as below

```js
const newButtonCounter = <Counter render={(count, increment) => <ButtonCounter count={count} increment={increment} />} />;
```

If we extract out the function inside the render prop...

```js
(count, increment) => <ButtonCounter count={count} increment={increment} />
```

Here you can see that the argument which were passed to the function inside the render prop, are passed again to the `ButtonCounter` as props. Then we can use them inside the ButtonCounter as below.

```js
import React, { Component } from "react";

export class ButtonCounter extends Component {
  render() {
    const { count, increment } = this.props;
    return <button onClick={increment}>Clicked {count} times!</button>;
  }
}

export default ButtonCounter;

```

In this way we don't have to write the stateful logic inside the ButtonCounter. 

Likewise, we can create InputCounter and HoverCounter or any other component we want by this technique and not duplicate the stateful logic.
How to make your to-do list editable with basic JavaScript 
Tags: javascript, html, css, beginners
Published: 2021-09-25 21:44:37

A to-do list is one of the first projects many developers create. The basic components are a way to add items and a way to delete them. This article is for those who have already implemented these basics and want to add the extra feature of being able to edit items once they are added.

Experiment with my to-do list [here](https://gabriellend.github.io/shopping-list/) and if you'd like to inspect the code, you can find it on GitHub [here](https://github.com/gabriellend/shopping-list.git). Note: it is only optimized for laptops at this time.

## How to edit items
I wanted to be able to double click an item on the list in order to change it. Maybe I misspelled it or something. In my HTML, I used list elements for items. The high level idea was to temporarily replace the list element with an input element, type in something new, then change it back to a list element. To achieve this, **I first added an event listener to each item when it was created**:
![Code to add an event listener to each item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7etazdwzgecu514of388.png)
**Next, I created the `editItem` function**. The list item you want to change is replaced by an input element with the same value. Then you are able to edit that value. These are the inner workings:
![Steps for the 'editItem' function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xn86uuwr8lz57j1fo1c.png)
**The final step was to create the `saveItem` function** in order to make my changes permanent. This basically reverses the steps above, replacing the input element and its new value with a new list element, though this time permanently (until you double click again, that is). Here's what it looks like:
![Steps for the 'saveItem' function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms5c7ahmos6mljitgrqm.png)
 That's it! If you happen to inspect it on GitHub, you may notice some slight variations in the code but none are relevant to making items editable. I hope this helps you make all your editable-to-do-list-dreams come true!
How to capture iPhone audio on a Mac
Tags: hardware, videos, iphone, mac
Published: 2021-10-05 08:55:14

---
title: How to capture iPhone audio on a Mac
published: true
date: 2021-09-25 21:22:06 UTC
tags: hardware, videos, iphone, mac
canonical_url: https://peterwitham.com/hardware/how-to-capture-iphone-audio-on-a-mac/
---

{% youtube BOTMVWOjfH0 %}

When we lost the audio jack connector on iPhones it made things a lot more annoying to capture audio from the device. However, it is still possible.

In this video, I’ll show you how to connect your iPhone to your Mac and set it up to capture any audio from the device.

All you need is an iPhone cable and built-in tools in your mac.
About me
Published: 2021-09-25 21:11:12

My name is Dominik Hertzog, and I'd like to introduce myself. I enjoy writing reviews for movies and television shows. I have a long list of reviews on imdb.com and medium.com, and I am open to all genres from around the world. I've watched a diverse range of Netflix shows from various countries, as well as Amazon Prime, by using <a href="https://www.keepsolid.com/smartdns">DNS bypass</a>. On request, I also write reviews for amateur films or YouTube series. I also enjoy discovering new shows that have a unique concept that hasn't been tried before, so if anyone has such content, please send me a message and I will write a free review if the quality of the content is good enough.
Convert React Class to Function Component 😢😢😢
Published: 2021-09-25 20:28:17

Thanks in Advance. I Recently Started Learning React and Started off with Function Components and Am Unable to Convert This Code to Functional Component.

On the Very top Level of the File Structure there is a File particle.js

The Very First Class Component named Particles()

which is a Class Component and I am Not Able to Convert it.

Anyones Help with React and GSAP Expertise is Appreciated.

I Really Need it in Functional Component Only.

Thank You

Link to CodeSandBox https://codesandbox.io/s/aerosols-ir8lf
Why I like Software Engineering 🧡
Tags: webdev, programming, career, books
Published: 2021-09-25 19:33:58

_This article was originally published on [my newsletter](https://tuomokankaanpaa.com/newsletter) last week. I publish previous week's newsletter here on the blog. If you want to read these as soon as they are published, [sign up](https://tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

I have been working as a software engineer over eight years now. This week I stopped to think about all the good things and benefits there is in being a software engineer.

Few of the best things in my opinion are the flexibility and creativity of the work as well as job security. I made a video explaining my thoughts on these in more detail, so if you want to hear more you can find the video on my [Youtube channel](https://youtube.com/tuomokankaanpaa).

I read a bunch of blog posts this week. Here is couple of them that I found interesting and useful:

[JavaScript vs JavaScript. Fight! (part 1)](https://dev.to/this-is-learning/javascript-vs-javascript-fight-53fa)

[JavaScript vs JavaScript. Fight! (part 2)](https://dev.to/this-is-learning/javascript-vs-javascript-round-2-fight-2m44)

[The Complete JavaScript Promise Guide](https://blog.webdevsimplified.com/2021-09/javascript-promises/)

[Top 10 Future Technologies You’ve Definitely Never Heard Of](https://cult.honeypot.io/reads/10-future-technologies-you-dont-know/)

Last week I told you I was thinking of getting a Kindle. Well this week I finally decided to get it and so far I have really loved it.

I actually read one book in the first day of getting the Kindle. Ok to be honest the book was only 100 pages but still, that is 99 pages more that I read in the past month!

I'm interested to see if I can build up and keep my reading habit more easily by using Kindle.

That's it for this week!

Cheers,
Tuomo
File sharing API Using Node js & Express js
Tags: node, javascript, express, mongodb
Published: 2021-09-25 19:23:03

# FileSharing

File sharing API Using Node js & Express js

## Features:

- File sharing

## Technology Stack:

- Node js
- Express Js
- MongoDB

## Default urls:

- Upload File : <br/>
  localhost:5000/api/upload
- Get All Files : <br/>
  localhost:5000/api/files
- Download File : <br/>
  localhost:5000/api/download/:fileId

## Install Dependencies

```
npm install
```

## Run App

```
# Run in dev mode
npm run server

```

Github : https://github.com/saidMounaim/FileSharing
Mobile test on iPhone 13 Mini, iPhone 13, iPhone 13 Pro, iPhone 13 Pro Max
Tags: css, mobile, testing, test
Published: 2021-09-25 19:12:49

## Mobile test on iPhone 13
iPhone 13 Mini, iPhone 13, iPhone 13 Pro, iPhone 13 Pro Max are now ready to use in Blisk application (https://blisk.io/blog/16-1-94-111). What you can do with these devices in Blisk:
* Run a responsive test on iPhone 13.
* Run a mobile test and multi-device test.
* Run a test for touch events on iPhone 13.
* Run a test in landscape orientation on iPhone 13.
* Use Developer tools on iPhone 13.
* Run a test for webpage errors on iPhone 13.
* Test webpage speed and performance on iPhone 13.
* Test the dark mode and simulate slow connection on iPhone 13.

## iPhone 13 viewports and resolution
Viewports, screen sizes, resolution and other specification for the latest flagships from Apple are also available:
* [iPhone 13 Mini viewport and resolution](https://blisk.io/devices/details/iphone-13-mini);
* [iPhone 13 viewport and resolution](https://blisk.io/devices/details/iphone-13);
* [iPhone 13 Pro viewport and resolution](https://blisk.io/devices/details/iphone-13-pro);
* [iPhone 13 Pro Max viewport and resolution](https://blisk.io/devices/details/iphone-13-pro-max).

## iPhone 13-series screenshots:
Iphone 13: responsive test
![iPhone 13 responsive test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu5371f79esf71dnkowl.png)

iPhone 13: landscape orientation test in real size
![iPhone 13 landscape orientation test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r10tmt2u2qq1zrbkki9v.png)

iPhone 13: share device set
![iPhone 13 share device set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks4bb6vn63qfubkf0p0o.png)

iPhone 13: simulate slow connection
![iPhone 13 simulate slow connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg4k8drhicvfw1vjqaav.png)

iPhone 13: test for webpage errors
![iPhone 13 test for webpage errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnvreegui82uxmgt5lze.png)

--
Need to use the latest iPhone 13-series in your next web project? Get Blisk application at https://blisk.io with free trial.
Are you growing your business organically?

Tags: instagram, instagramgrow
Published: 2021-09-25 18:54:26

<a href="https://instagrowplan.com/">Organic growth</a>
 is the achievement of increased engagement, following, sales and traffic simply through the actions you put forth in your business and output you create for it rather than paying for it!

How to grow organically:

♡ Make sure your profile is thorough and understandable while also attention grabbing and meaningful!

♡ Engage with your followers/customers everyday and answer their questions and comments!

♡ Show your followers/customers what you are doing everyday, new things you are offering and behind the scenes of your work on your story, reels and feed posts! They want to see YOU and fall in love with what YOU bring to the business

Use hashtags, location tags, alt text, and relevant keywords to reach the most beneficial and effective people in your niche!

https://instagrowplan.com/
How To Get Job Referrals From Other Engineers  [6 Ways That Work]
Tags: codenewbie, career, linkedin, watercooler
Published: 2021-09-25 18:38:50


There is usually not much of a shortcut with referrals because it takes time, determination, and hard work to build a great network. 

But, once you have that network it really does start to feel like you're getting the VIP treatment - while everyone else needs to grind apply for 100s of jobs. 

### How do you find software engineers to ask for referrals?

1. Join open source project and help with tech debt or bugs, like this one: https://github.com/MunGell/awesome-for-beginners

2. Join a local meetup in your area that gives back to the community. 

3. Join a data structures & algorithms study group, like [Jonathan Watson's](https://www.linkedin.com/in/jonathanjwatson/).

4. Join an alumni group from your bootcamp or university.

5. Find a mentor who will help you on your job hunt and advocate for you, like, [Jayme Edwards](https://www.linkedin.com/in/jaymeedwards/) or [me :wave:](https://www.linkedin.com/in/meet-jason-humphrey/) 

6. Identify other devs on LinkedIn and send them emails to connect (Check out the [Austin Belcak](https://www.linkedin.com/in/abelcak/) method to see how it's done)


Even if you're not in the market for a job right now, I recommend you get started. Trying any of the 6 ideas above will only make it that much easier for you to get referrals when you need them. 

And most seasoned devs will tell you as their careers advance, most opportunities tend to come to them from _their network_. 

These ideas were some of the most valuable given to me when I was starting out, so please comment down below with any other actionable ideas for finding referrals take that I didn't cover here.
How to Add and Customize Ant Design UI Library in a Next.js App.
Tags: nextjs, antd, react, javascript
Published: 2021-09-25 18:37:03

---
title: How to Add and Customize Ant Design UI Library in a Next.js App.
published: true
description: Having difficulty getting Ant Design to work in your Next.js App? This tutorials will help!
tags: nextjs, antd, react, javascript
cover_image: https://images.unsplash.com/photo-1602576666092-bf6447a729fc
---

Setting up Ant Design in a Next.js App, can be a little difficult. That is why I wrote these two guides that can help you setup and also completely customize Ant Design correctly in your Next.js app.

[How to Add Ant Design to a Next.js App](https://www.elvisduru.com/blog/how-to-add-ant-design-to-next-js)

[How to Customize The Default Ant Design Theme in a Next.js App](https://www.elvisduru.com/blog/how-to-customize-ant-design-theme-in-nextjs)
Foobar: Bomb, Baby!
Published: 2021-09-25 18:30:19

You're so close to destroying the LAMBCHOP doomsday device you can taste it! But in order to do so, you need to deploy special self-replicating bombs designed for you by the brightest scientists on Bunny Planet. There are two types: Mach bombs (M) and Facula bombs (F). The bombs, once released into the LAMBCHOP's inner workings, will automatically deploy to all the strategic points you've identified and destroy them at the same time. 

But there's a few catches. First, the bombs self-replicate via one of two distinct processes: 
Every Mach bomb retrieves a sync unit from a Facula bomb; for every Mach bomb, a Facula bomb is created;
Every Facula bomb spontaneously creates a Mach bomb.

For example, if you had 3 Mach bombs and 2 Facula bombs, they could either produce 3 Mach bombs and 5 Facula bombs, or 5 Mach bombs and 2 Facula bombs. The replication process can be changed each cycle. 

Second, you need to ensure that you have exactly the right number of Mach and Facula bombs to destroy the LAMBCHOP device. Too few, and the device might survive. Too many, and you might overload the mass capacitors and create a singularity at the heart of the space station - not good! 

And finally, you were only able to smuggle one of each type of bomb - one Mach, one Facula - aboard the ship when you arrived, so that's all you have to start with. (Thus it may be impossible to deploy the bombs to destroy the LAMBCHOP, but that's not going to stop you from trying!) 

You need to know how many replication cycles (generations) it will take to generate the correct amount of bombs to destroy the LAMBCHOP. Write a function solution(M, F) where M and F are the number of Mach and Facula bombs needed. Return the fewest number of generations (as a string) that need to pass before you'll have the exact number of bombs necessary to destroy the LAMBCHOP, or the string "impossible" if this can't be done! M and F will be string representations of positive integers no larger than 10^50. For example, if M = "2" and F = "1", one generation would need to pass, so the solution would be "1". However, if M = "2" and F = "4", it would not be possible.

Languages
=========

To provide a Java solution, edit Solution.java
To provide a Python solution, edit solution.py

Test cases
==========
Your code should pass the following test cases.
Note that it may also be run against hidden test cases not shown here.

-- Python cases --
Input:
solution.solution('4', '7')
Output:
    4

Input:
solution.solution('2', '1')
Output:
    1


```python
def solution(x, y):
    M, F = max(int(x), int(y)), min(int(x), int(y))
    res = 0
    while F > 0:
        res += M // F
        M, F = F, M % F
    if M != 1:
        return "impossible"
    return str(res - 1)
```
🚛🇬🇧 Solving the UK Driver Shortage with tech
Tags: discuss
Published: 2021-09-25 18:04:25

Firstly sucks to be us. Brexit x COVID = footgun

If I had more money, I would like to create some prototypes for self driving trucks to cross into Europe and get supplies.. oh but we cant because everyone is panic buying fuel! So I guess they need to be a fleet of solar / electric robots.

But when they arrive who is going to load and unload? We need more robots.

Can tech solve crysis like panic buying and shortages? Could this be the perfect gap in the market to solve the problem of people?

Sounds at least like a fun simulation to program
Artificial Intelligence (AI) and Machine Learning
Tags: ai, computerscience, technology, business
Published: 2021-09-25 17:12:35

Artificial intelligence, or ai, has already obtained a number of buzz in the beyond decade. Nonetheless, it continues to be one of the new technology tendencies due to the fact its super outcomes on how we stay, paintings, and play are best in the early stages. Ai is already regarded for its superiority in image and speech reputation, navigation apps, smartphone non-public assistants, ride-sharing apps, and a lot more. 

Apart from that, who will use ai similarly to research interactions to decide underlying connections and insights, to assist expect call for for offerings like hospitals enabling authorities to make better decisions approximately useful resource usage, and to detect the changing styles of client behavior through analyzing statistics in close to actual-time, driving revenues and enhancing customized studies. The ai market will grow to a $a hundred ninety billion enterprise by 2025, with international spending on cognitive and ai systems attaining over $fifty seven billion in 2021. 

With ai spreading its wings throughout sectors, so as to create new jobs in improvement, programming, checking out, aid, and protection, to name some. Alternatively, ai additionally gives a number of the very best salaries today, ranging from over $1,25,000 according to yr (gadget learning engineer) to $145,000 consistent with year (ai architect) – making it the pinnacle new generation fashion you should watch out for! Machine learning, the subset of ai, is likewise being deployed in industries, creating a massive call for for skilled professionals. 

Forrester predicts that ai, system getting to know, and automation will create nine percent of latest u. S. Jobs by means of 2025, such as robotic tracking experts, facts scientists, automation experts, and content curators, making it any other new era trend you must keep in mind. Too! Gaining knowledge of ai and device gaining knowledge of will help you comfy jobs like:

ai research scientist
ai engineer
gadget learning engineer
ai architect

for business information
https://www.businesign.com/
for tech information
https://customcareer.miami.edu/blog/2021/06/30/top-9-new-technology-trends-for-2021/
Best UI LIbrary for your next React Native App
Tags: reactnative, beginners, packages
Published: 2021-09-25 17:04:40

I had built multiple apps in React Native for my personal as well as Freelancing projects. I had also tried many UI libraries for React native, to get started fast and for consistent UI. 

I had checked UI Kitten after some time but after I had used 
UI kitten, I became a fan of this library. It has most of the components you will need, for example, Input, Card, Button, etc. It also supports the Light and Dark theme. It is the library that has its Icon Module and all the Icons are awesome. The app looks good in both the light theme and dark theme.

To create a new React Native app using Kitten UI, you just need to run the below command, it will create a new React Native app with the UI kitten as the template

```
npx react-native init MyApp --template @ui-kitten/template-js
```

In the next post, I will try to explain, how to add UI-kitten to an already created project.

[UI kitten offical page](https://akveo.github.io/react-native-ui-kitten/)

__To learn the Basic of UI kitten library refer to this blog, you will enjoy this__

{% link https://dev.to/ashadnasim52/react-native-ui-kitten-library-basics-55lp %}
How to Post Long Video on WhatsApp Status | [WhatsApp Trick]
Published: 2021-09-25 16:37:07

If you prefer the video, then you can watch this video

<a href="youtu.be/IvzVAdIimCE">youtu.be/IvzVAdIimCE </a>

Most of the time we want to share the videos in WhatsApp status, but what happens is the WhatsApp limit the length of the video to be shared on WhatsApp Status to only 30 seconds. So we cannot share videos that are more than 30 seconds, but today I am going to share one trick, which will allow us to share the videos of any length to the Whatsapp Status.


For this we will need an App by name Video Splitter:- SPLIT and Share Directly You can download this app by visiting this link. It is also free

After downloading, you just need to select the video from the app and press next, that it will split that video into 30 seconds long and after that, you can share that video directly from the app.

https://play.google.com/store/apps/details?id=videosplitter.app.status.socialmedia.sharing