teleren/devto huggingface dataset:
Business Development Executives
Tags: hiring, career, bde
Published: 2022-08-19 08:00:36

Please apply on our website https://prefr.co/team/hiring/

Seeking an experienced field BDE to attract new clients, win new accounts, and maximize profitability within his or her sales territory. Candidates will work prospects through the entire sales cycle, including developing new leads, educating prospects, and turning interested shoppers into long-term customers.


**Responsibilities:**

- Use of various sales methods (door-to-door, cold calling, presentations etc.)
- Qualifying prospects & Pipeline management
- Generating revenue and acquiring customers
- Customer evaluation and procurement
- Account management & Sales process management
- ROI analysis on why to buy and why to buy now & Accurate forecasting
- Development of best practices for leading successful sales campaigns
- Develop a repeatable sales model that ensures consistent success and revenue growth
- Devise creative, “out-of-the-box” ideas and implement them
- Build long lasting client relationships
- Giving feedback to management

**Skills Necessary:**

- Should be competitive and confident.
- Should be focused on delivering the best for their respective companies.
- Should be able to take initiatives and work on their own to achieve targets.
- Be a good team player.
- He/She should be excellent with verbal communication.
- Should have good knowledge of the industry and should be good with numbers to be able to work on financial reports.

**Perks and benefit:**
Only local field works and WFH no office work

**Educational Qualifications:**
There are no restrictions with the requirement for a field sales representative as the right set of attitude is the most important thing you will need to do this job. However, candidates holding a degree in relevant streams like media, sales, business, and management will most likely get the job in this field.

**Basic Daily Tasks**

- Making Cold Calls , Emails & Chats to new prospective clients from the database.
- Explain products & services, make sales
- Manage data in CRM
- Managing incoming calls and customer service inquiries.
- Keep records of all interaction in CRM
- Follow up with leads by making calls, sending emails, messages through
- WhatsApp is mandatory.
- Must have the experience of minimum 3 years.
- Prospecting and closing sales
- Creating and defining a sales strategy, process and tactics
- Recruiting, training and managing sales reps
- Advising sales reps on their current deals and helping them problem solve
- Get new leads & Prospect hunting
- CRM management
- Sales calls / system setup
- Test product/service performance in the open market
- Create & Refine sales pitches
- Get new clients & Closing deals
Ng-News: Episode 22/34
Tags: angular, javascript, webdev, programming
Published: 2022-08-29 10:09:06

{% embed https://youtu.be/ICAqbJDfrLU %}

## Angular 14.2

We have a new minor release for Angular with version 14.2. Minor means no breaking changes but new features. With NgOptimizedImage, we get a new directive, that applies best practices to the loading process of images.

To enable it, replace the src attribute with rawSrc. By default, all images are now lazy-loaded. So you have to make sure to put the priority attribute on those visible within the viewport. If you miss one, no problem, the new directive will tell you that via a warning message.

NgOptimizedImage also ensures that all necessary image attributes are set, it provides support for loading them via a CDN, and we can look forward to further useful functions in the future.

Next to that, Angular continues to extend the "standaloneability" of its API. This time it is the Router and Angular Elements. The provideRouter function is the standalone version of the RouterModule. And Router-specific directives, like routerLink are now also standalone.

{% embed https://twitter.com/angular/status/1562938202482102273 %}

Further reading:
- Cédric Exbrayat: [What's new in Angular 14.2](https://blog.ninja-squad.com/2022/08/26/what-is-new-angular-14.2/)
- Kara Erickson & Leena Sohoni: [Optimizing Image with the Angular Image Directive ](https://developer.chrome.com/blog/angular-image-directive/)
- Netanel Basal: [Using Angular NgOptimizedImage to Implement Image Loading Best Practices](https://netbasal.com/using-angular-ngoptimizedimage-to-implement-image-loading-best-practices-e20a69d71ea3)

## NgRx 14.3

We've also seen a minor release of NgRx, a state management library, to 14.3. It is also about providing standalone functions for all its features where we had to use an NgModule in the past.

{% embed https://twitter.com/releasebutler/status/1562862422968320000 %}

## TypeScript 4.8

The latest version of TypeScript comes with improvements in the area of type narrowing  and union types.

{% embed https://twitter.com/typescript/status/1562945385899130880 %}

## Jest 29

The new major of Jest comes with breaking changes but according to its authors, the migration ought to be very smooth.

{% embed https://jestjs.io/blog/2022/08/25/jest-29 %}
Css Selectors for Input Ranges
Tags: css, ux, webdev, productivity
Published: 2022-08-29 10:09:00

In this post we are going to check Css Selectors for input ranges. This selectors would not be known by many of us.

We all use input elements in our projects and must be aware of input type="number" this defines a field for entering number.

This allows in restricting user to enter any other character other than numbers. When we use the tag input and give its type attribute value of "number" as below

```<input type="number">```
This gives us below output

![Input Range Selectors Css Stacksjar.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9di8eci4n74p10r4etaj.jpg)

This input box comes with the 2 buttons on the right side which we can use to increase or decrease the number entered in the input.

We can set the min and max values for the number to be entered in the input as below

```<input type="number" min="2" max="5">```

This will restrict the user to enter only numbers that are between 2 and 5 as we have specified in the min and max attributes of the input.

Now we can use the CSS Selector to detect if the user has not entered between the specified min and max values and apply css for the same.

**html**

```<input type="number" min="2" max="5">```

**css**
```
input:in-range {
  border: 1px solid green;
}

input:out-of-range {
border: 1px solid red;
}﻿
```


The above css code will check all the values entered in the Input Box, If the number entered in the input box is not between the range specified by min and max values it changes the color of input box to red as below

![Input Range Selectors Css Stacksjar.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9br3gh4nwtehdk5f273k.jpg)
 

If the number entered is between the min and max values it will change the input box's color to green as below

![Input Range Selectors Css Stacksjar.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgudzz8swc2icukvb8eq.jpg) 

This was the usage of in-range and out-of-range css selectors, hope you find this usefull.


Happy Coding!

Checkout Complete Article Here: [Psuedo Selectors for Inputs in Css](https://stacksjar.com/post/css-selectors-for-input-ranges)
Matlab, Mathematics and Drawing
Tags: matlab, drawing, simulation, programming
Published: 2022-08-29 10:02:00

Matlab like every other programming language is a medium via which we pass instructions to the computer to get things done. At the heart of its activity is computation. But programming languages do more than just run calculations. You can send an email with matlab, you can play music, write video, analyze data and predict the future.

Mathematics can be a boring subject when we spend most of our time doing the calculations or derivation and less time on analysis of what we are actually doing. Deriving physical intuitions from what we computed can make the the whole exercise more fun. It fun to solve wave equation and actually see the wave. If you solve a simple pendulum problem and you can not visualize the pendulum in motion, the motivation for such to study the pendulum, might not receive the required spark.

The hype around visualization is mostly about plotting data, like the velocity and acceleration of the pendulum over time. What if you can actually see the pendulum accelerating? It turns out the same tools we use to just plot the velocity can be used to make a digital copy of the object and give it that velocity and acceleration so we can see it move {% embed https://www.youtube.com/watch?v=OJcaSQh_Pys %}.

That [umbrella](https://github.com/talk2laton/Umbrella) in the picture above is a complete mathematical object, every line and surface is from a mathematical expression. Would it not be cool if you can do that? Well, here is a [video of it being done](https://www.youtube.com/watch?v=woj4nq006Zc). Mathematics is the tool that enables science. And Matlab enables math.
4 steps to add cool sliders to your website
Tags: programming, webdev, tutorial, react
Published: 2022-08-29 09:56:33

Let’s start without wasting much time, 4 steps to add a slider as shown in the image to your react project. I will be using the [react-awesome-slider](https://www.npmjs.com/package/react-awesome-slider) package.

## 01
Install the package
I am using the nextjs repository, which you can download from here. Install the package using yarn or npm.

```

yarn add react-awesome-slider
```

## 02
Import the AnimationSlider component from the package

Simple as explained, import the component that will have slide functionality. This component is called AwesomeSlider.

```
import AwesomeSlider from "react-awesome-slider";
```

## 03
Import the type of CSS animation we want to use in root and pass it to the AnimationSlider component.

I am using nextjs, so I will add the CSS animation in globally i.e. in the _app.js file

```

import "react-awesome-slider/dist/styles.css";
import "react-awesome-slider/dist/custom-animations/fall-animation.css";

```

## 04
Add the slider children either images or text

You can use text or images as the slider children. Also, pass the animation you want to use, I want to see cubeAnimation so I have passed that as the animation prop.

```
import React from "react";
import AwesomeSlider from "react-awesome-slider";
const HomePage = () => {
 return (
  <AwesomeSlider animation="fallAnimation">
   <div data-src="/nextlogo.png" />
   <div data-src="/twitter-green.png" />
   <div data-src="/unsplash.png" />
  </AwesomeSlider>
 )
};
export default HomePage;
```

**Conclusion**
Lastly, react-awesome-slider provides 5 types of animations such as cube, fall, fold-out, open and scale animation. That’s it for today, until next time, have a good day.

[Code repository](https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/React-Awesome-Slider-Example)

Keep developing
Shrey
[iHateReading](www.ihatereading.in)
Working Model for the establishment of Solar Panels rooftop of gasoline to provide fuel for electric cars.
Tags: electriccars, ev, electricvehicles, solarpanel
Published: 2022-08-29 09:45:00

The idea of solar power panel seeds up from the need to have electric-fuel stations for electronic cars. But Making up separate stations for electronic vehicles would not only take extra land space but also an extra amount of infrastructure establishment and labor to establish.

We could upgrade conventional gasoline stations to modern solar power panel stations by adding minor adjustments to them with the help of this working model.

The working model for the installation of solar panels on the rooftop of gasoline stations to extract clean solar energy and convert it into electric energy with the help of an inverter. The inverter sends down the electrical energy to the charging station.

**I. IDENTIFY, RESEARCH, AND COLLECT IDEA**

In recent trends, electric cars\transports are viewed as an alternative to oil-petroleum-based transportation. But one of the main barriers to buying cars is the lack of charging power stations that work as fuel for these cars. Thus, consumers are less interested in buying them.

Many people came up with an idea that an electric power station needs to be established for these cars. Solar energy harnesses the electricity in most gasoline. We could use the same energy for the power charging station.

But, setting up a separate electric charging station as fuel for these cars is time-consuming and it will provide fewer options for these cars to fill up.

**II. STUDIES AND FINDINGS**

With little modification to petrol-CNG pump could serve as a station for electric cars:
**A. Solution**

    Setting up solar panels on the rooftop of the station/petrol pump to generate electricity.
    The solar cells will generate power, which will store in the batteries. These batteries will transfer energy to inverters.
    The inverters will send the electrical energy to the charging station through wires. The charging station will have arrangements of apparatus to charge the vehicle.

**B. Units**

· The setup will have a charger like EV-T2G3C-1AC32A-5.0M6.0ESBK01 with a maximum capacity of Maximum Voltage Rating (VAC) 250VAC/30VAC.

· The station will use a 65KW Superfast charging model that could charge up to 80% in half an hour.

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

**Fig. of the working model**

The working model is the solution that could encourage people to shift from petrol/diesel transport to electric transport. The ease of availability of electric stations on the same gasoline site will also save land for other purposes.
Complete Free React JS Tutorials From Beginner to Advanced
Tags: react, javascript, webdev, tutorial
Published: 2022-08-29 09:38:19

Complete ReactJS Tutorials: https://www.youtube.com/watch?v=f8pdqALP4Ys&list=PLbXAYqhxhzxxU5uKeQLEkshs-_QzA8y-q

Don't forget to subscribe.

Our next tutorial on complete React along with Redux will be releasing shortly.

Regards,
Ministry of JavaScript
The NGROK tunnel could not be started
Tags: javascript, node, programming, shopify
Published: 2022-08-29 09:31:12

**I have creating the Shopify application from learning this website https://shopify.dev/apps/getting-started/create#step-1-create-a-new-app while I have following the steps and I have completed Step 1: Create a new app. Unfortunately, I have been stucked in Step 2: Start a local development server owing to I am coding in the node js even I am getting The Ngrok tunnel could not be started error. So kindly solve the issue.

 

Thank you**
What is good DX for you?
Tags: watercooler, discuss, devrel, webdev
Published: 2022-08-29 09:21:15

I've been thinking a lot about good developer experience lately and I've been wondering **what's the most important for you when it comes to DX?**

Are there tools that stand out to you because of great DX? 
**What do you do to improve DX** for the tools / services / projects you are working? 

Many talks & articles mention for example things like: 
- Ease of Use
- Consistency in the processes 
- Clarity / Transparency
- (Experienced &) accessible community

All of which makes sense, but is also a bit abstract (what makes tools easy to use, right?). 

Personally, I also find clear documentation super important to provide an easy way to approach new tools with little or no experience and lower the threshold. 

**Super curious about your thoughts** ✨
𝟰 𝗺𝗮𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗺𝗲𝘁𝗵𝗼𝗱𝘀 𝘁𝗼 𝗿𝗲𝗺𝗼𝘃𝗲 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗶𝗻 𝘁𝗵𝗲 𝗮𝗿𝗿𝗮𝘆,🚀
Tags: javascript, programming, webdev, beginners
Published: 2022-08-29 09:20:53

## 🚀 𝟰 𝗺𝗮𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗺𝗲𝘁𝗵𝗼𝗱𝘀 𝘁𝗼 𝗿𝗲𝗺𝗼𝘃𝗲 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗶𝗻 𝘁𝗵𝗲 𝗮𝗿𝗿𝗮𝘆:


1. 𝗽𝗼𝗽 -Removes from the end of an Array.

2. 𝘀𝗵𝗶𝗳𝘁 - Removes from the beginning of Array.

3. 𝘀𝗽𝗹𝗶𝗰𝗲 -removes from a specific array Index.

4. 𝗳𝗶𝗹𝘁𝗲𝗿 -allows you to programmatically remove elements from array.

______________________________

**but here I'm going to look at two most used methods
splice and filter.**

**- Splice():**

when you use a splice, you need to find the index to the array element you want to remove using indexOf() and then remove that index with splice.

The splice () method changes the contents of an array by removing the existing element

`array.splice((array).index0f(element_To_be _removed),1)
`

______________________________


**- filter ():**

here is the code for the filter

`myArray.filter(obj => obj !== myobject)
`

anyone who wants to explain more how filters work, you can share in the comment section
The Best Way to Load External JavaScript Files Into Your HTML File ✅
Tags: javascript, webdev, beginners
Published: 2022-08-29 09:20:39

If you've been coding in JavaScript for long enough, you'll know there are various ways to include a script into your HTML document.

**Unfortunately, due to the age of JavaScript, there are many techniques to include external files on the web - many of which are outdated.**

So, what's the preferred way to do this?

## The Defer Attribute 💪

Let me introduce you to the `defer` attribute. This is valid on the HTML `<script>` tag, and is a **perfect** solution for most scenarios.

When a `<script>` tag is placed in the `<head>` and has the `defer` attribute, the external script will be loaded **asynchronously** with the rest of the page and will **only** execute after the document has been parsed.

There are 3 primary benefits of this:
- page loads quicker ⚡
- better semantics compared to putting a `<script>` at the end of `<body>`
- most importantly, **preventing errors** ❗

### Which errors am I talking about?

The ones where elements cannot be found (or are `null`).

We've all done it before - tried to select an HTML element before the document has been parsed, resulting in error messages along the lines of "cannot access X of `null`".

Solutions for this in the past involved using the `onload` event or even better, the `DOMContentLoaded` event. Now, we have the `defer` attribute.

Here's an example of it's usage:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Website Title</title>
        <script src="js/main.js" defer></script>
    </head>
</html>
```

```js
// src/main.js

// Only executes once the DOM has been parsed - no errors! 😏
const myInput = document.getElementById("myInput");
```

I hope the `defer` attribute serves you well 💪

## [Enrol Now 👉 JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇
[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da9y7ozwgzltmpdb5qw7.jpg)

Enjoy!
Evony Developer: David Guo's detailed intro
Tags: gamedev, news
Published: 2022-08-29 09:19:15

When it comes to the hit game Evony, the development team behind the game——Top Games Inc. has recently been awarded a new title "**_ranks as the #9 overall grossing RPG company in the United States_**,according to tracking records from data.ai" and has nominated Austrian-Japanese star Reina Triendl as the spokesperson.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq976t1pys1r28nry5ag.jpg)
Today, let's take a look at the features of the team behind this hit game and how the CEO led this team to successfully break through the fierce competition in the game industry.

### David Guo's mission-drivin: user-oriented
CEO David Guo leads a professional game development team that is user-oriented and driven to improve the player experience. Evony has got a great success and has been honored with several good rankings not only in the app market but also in many industry awards.

### David Guo intro

David Guo is a game player himself. In 2009, David Guo found that many game companies don’t care about user experience and customer satisfaction. That’s the reason he joined Top Games Inc.After David Guo graduated as a Physics major, he devoted his energy to the gaming industry.
David Guo is basically in charge of all essential Top Games departments. He believes every TGI employee should testify quickly and implement even faster. this is why the team test products or services over and over again to implement the best option and to scale up as quickly as possible. 

### In future
Top Games Inc and its CEO David Guo will not stop their steps on exploration, they will continue developing games that users like through the team’s development of professionalism and user interests, and constantly updates game functions to improve the game experience.
User Notification Service
Tags: redishackathon
Published: 2022-08-29 09:13:00

### Overview of My Submission
User notification service which allows user to perform different activities on User details and get notified once the activities are successfully stored / updated in Redis Database. 



### Submission Category: 
Microservice Mavens

###Explainer video for the User Notification Service
[Link](https://youtu.be/Ay_AUDV2r68)

### Language Used
Java/Spring


### Link to Code
`{% embed https://github.com/Rman92/redisusernotifyservice.git %}`.

### Additional Resources / Info
Heroku - App deployed here: https://spring-redis-user-notify-serv.herokuapp.com
https://github.com/Rman92/redis-usernotifyservice/blob/main/screenshots/Screenshot%202022-08-22%20at%202.22.08%20PM.png
https://github.com/Rman92/redis-usernotifyservice/blob/main/screenshots/Screenshot%202022-08-22%20at%202.21.35%20PM.png

### Collaborators
Rman92


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Awesome Design Resources
Tags: resources, design, tools, webdev
Published: 2022-08-29 09:12:48




![checklist.design/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5c0ofnjb690bcbr95xp.png)  link : http://checklist.design/


![principles.design/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn1ey3pk0zwwk9l8eei6.png)2.http://principles.design/

![fontjoy.com/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xk402uo1qpuvfxbd9o1.png)Link : http://fontjoy.com/


![ toools.design/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb1hnjmf0nk3kmdwbu20.png)Link: http://toools.design/


![designfromanywhere.web.app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mop9r9vorzv53cj19uds.png)Link: http://designfromanywhere.web.app/


![watermarkremover.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipfh9fk68s35csogb8z7.png)Link: http://watermarkremover.io/


![mobbin.design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx7gvw9t8oif00fhvy9t.png)Link: http://mobbin.design/

![befront.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6wxfp7c43dhdjoqp6fy.png)Link: http://befront.io/

Hope you got something new today :)
Moreover you can follow on [instagram](instagram.com/developedbyjk) for such resources
How can get route name of a double nested screen in React Native
Published: 2022-08-29 09:10:00

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

In StackScreen**Α** if get route name I will take StackScreenΒ1 or StackScreen**Β2** depending on which page I'm on.

The same in StackScreenB1 if get route name I will take Screen**C1** or Screen**C2** or Screen**C3** depending on which page I'm on.

Is there any way when I am on StackScreen**Α** to get route name on Nested Screens of StackScreen**B1**.

Explain. I am on stage **A** and I want to get the route name of stage **C** and **not B**.

*For get route name of B when I am on A , alert(route.name)

 [Open in StackOverflow](https://stackoverflow.com/q/73512131/18126365)