teleren/devto huggingface dataset:
An Approach to Web Development
Tags: webdev, codepen, development
Published: 2021-04-13 14:27:12

What is Web Development? 

Web Development grants you to make websites that are worked with through the Intranet or the Internet through web programs. This space fundamentally spins around the course toward building applications and pages that surprising spike sought after for these endeavors. A dash of these applications may depend upon the master whereupon you have created them, while others may simply utilize the specialist in the essential season of their development for the cutoff and recuperation of data. The planned exertion of Web Development solidifies coordinating, content development, and scripting for the web, close by security blueprints. 

In this Web Developer instructional exercise, you will in addition go over the reasons why you need Web Development. 

Need for Web Development 

Web pages cover the distance between people who have the information and people who wish to secure data, allowing one to interface with the world running free. Here a couple of reasons why websites are head: 

•	They grant you to advance different offers given by your association. 

•	You can present your considerations through a website and solicitation the notification of allies from around the world. 

•	You can expand all through the planet for likely customers and customers. 

•	You can start another business with the help of a website. 

Shouldn't something be said about we as of now comprehend who Web Developers are and what these specialists do in this web programming instructional exercise. 

Who are Web Developers? 

Web Developers are specialists who build websites that can be gotten to and used through the World Wide Web (www). They use assembled programming vernaculars, a few shows, to create these websites and unite with likely customers all through the planet. 

These specialists of [Web Development courses](https://intellipaat.com/course-cat/website-development-courses/), accordingly, need express and reasonable capacities to gather websites of unequivocal plans. They are needed to make websites with remarkable UI, which is both functional and characteristic, standing apart enough to be taken note. The websites ought to fulfill the customers' essentials to keep them enchanted and persuade them to go for the things or affiliations offered by these websites. 

To secure the limits essential to change into a Web Developer, you should make a pass at awesome showed up diversely comparable to other Web Developer Courses from Intellipaat. Join today and get a lift in your work! 

You have a crucial perspective on who Web Developers are. After a short time, in this web application development instructional exercise, we ought to research the parts Web Developers use for building a website.
How create a custom Job which execute a script in SFRA 🔨
Published: 2021-04-13 14:21:38

### Intro 💡

Many times you had think how you can automate a script, but you don't know how jobs works in  SFRA or how you can create a custom jobs? Don't worry, first time can be difficult for all. I am here for explain to you whats is a job and how you can customize it and automate routine tasks or long-running processes.

Note: you can create jobs through business manager but I don’t explain how do it in this article.


I know, you can't wait to automate your processes, so what are we waiting for, let's automate!

### Let’s Create File to execute!  🛠️

Go create a js file under the path _your_directory/cartridge/scripts/jobs/**scriptFile.js**_

I created and exported a simple function which log a string, but you can do everything you want. 

Remember to export function you want execute.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ppmj0g4p3uci1l04mn.png)
 

### Let’s Declare Job!  ⚙️

Go create a xml file under the path _your_directory/sites/sites_template/**file_name.xml**_

Here we declare job which execute a script, all jobs are included in tag `<jobs> </jobs>`. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ysmbjsd1sfq3klnvbf.png)

In `<jobs> </jobs>` you can declare all jobs, every job is unique and it is identified by `job-id`. In job you must start a `<flow> </flow>` which include `<step> </step>`. Every step is unique and it is identified by `step-id`. Step include a `<description> </description>` and a `<parameters> </parameters>`. In `<parameters>` you can include how many `<parameter> </parameter>` you want. Every _parameter_ have a name,  In `name=“”` you must specify input Parameters, you can find all input Parameters with description in [official documentation](https://documentation.b2c.commercecloud.salesforce.com/DOC2/index.jsp).

* In name `<parameter name="ExecuteScriptModule.Module">app_project/cartridge/scripts/jobs/scriptFile.js
</parameter>` You have to pass ExecuteScriptModule.Module which accept as input parameters Script File. 

* In `<parameter name="ExecuteScriptModule.FunctionName">execute</parameter>` You have to pass as input parameters function’s name exported in script file.

* In `<parameter name="ExecuteScriptModule.Transactional">false</parameter>` You have to pass  a boolean value, but It must be true if in function you are using class Transaction.

With `<triggers> </triggers>` you can specify when run job.

> Upload and import your job file .xml in Business Manager in Administration -> Operations -> Import & Export.
Now you can import your job immediately or wait the day and the time specified in the xml file.
Online Course Page Conversion Optimization Checklist
Tags: ux, design, webdev
Published: 2021-04-13 14:20:03

If you have an online course about React, Angular, CSS, good ol'plain CSS, whatever. I made a checklist you can use to review your own course sales page

## Be Unique with a Unique Headline
[ ] It's clear. If they read only the headline, they'll understand what's this course about
[ ] There's a differentiation between you and other teachers
## The Teacher Story
[ ] I'm telling users who I am
[ ] I'm telling users why I decided to teach this course
[ ] I mentioned proof of success in my teacher story
## Make them trust you
[ ] Does the fold include social proof (testimonials, companies you worked with, accomplishments)
[ ] Is there a repetition of social proof on the page
[ ] The social proof is relevant to the audience (if it's a freelancer Bootcamp, mention some testimonials from agencies freelancers )
## Calm their anxiety
[ ] I know what makes my users fearful, uncertain, and doubtful of enrolling
[ ] I'm addressing the issues on your sales page
## There's something for you, user!
[ ] I have an incentive (Money-back guarantee, discount, free e-book/manual/T-shirt, etc)
[ ] The incentive is clear in my copy and design
Are you offering value for people who won't buy
[ ] Almost everyone won't buy from the first time, are you giving them something to capture their emails?
## My website looks aesthetically good
[ ] I've shown 20 people my website for only 5 seconds. They had a positive first impression
## My website is easy to use
[ ] The most important things come first in the page
[ ] The most important things are more visible than the other elements (font weight, font size, color, position)
[ ] The contrast between foreground and background is OK
[ ] Consistency
[ ] Same colors
[ ] Same fonts
[ ] Consistent spacing
[ ] The images are relevant to the copy
How to Use a Variable as an Object's Key and Sub key
Tags: mongodb, object, variable, javascript
Published: 2021-04-13 14:06:49

I have a user object that I am updating my mongodb doc with.

The doc exists already, however, at a point of the user journey they would have to submit some details, claim details, which I want to go into just one field - _claims._

That should not be a problem, but say for a particular issue, I want all the claims to be logged under our field _claims_, with usernames ( remember this would be a variable) as keys, like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihtzb1dfe3baziwojema.png)
 
To achieve that, you do not just say:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89g6htk5o1ovqfbl1jd3.png)
 
Mongo won't take that, it is even wrong in normal Javascript.

It should be in [brackets], like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s6xcf5aakvb7hlenpdm.png)

Hmm..... but in the line above, there is a bug.

There will always be just one claim, as current claim will be overwritten.

So instead of having something like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn2bvtj5wyeur85m80xq.png)

You would have this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gd9tnk0rtbn61grngos.png)

To fix this:

We have to get our referencing right.

Our usernames are subkeys in the _claims_ object.

In mongodb we can reference them -subkeys- by saying: *claims.yourUserName*, *claims.myUserName*. But this is not straightforward to update via our code.

There many tweaks that comes to mind readily, but this is the fix I found:

Bring the _claims_ key object and username subkey together: claims|username, so this serves as our main key.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s82eor7bnqm41riqhi3y.png)
 
But what is the right syntax? Dot notation would not work right there. Our brackets would not as well.

You will have to create the key before we enter it into the mongo update code line.
```
	let claimObject = `claims.${userEmail}`;

```
It is `claimObject` we will now use as object key, since for every userName, our claimObject would be:

```
claims.yourUserName
claims.myUserName
claims.herUserName
.
.
.
claims.NthUserName

```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ct2nvmpgmb769la26k.png)


_Na so e go be_
#2 of 100DaysOfCode
Tags: 100daysofcode, react, computerscience, codenewbie
Published: 2021-04-13 14:04:55

Wow, Second Day.
I finally did some programming in React. Came to know furthermore about types of React API calls and different ways in which we can make Elements in React.

Anyway following are my today's learnings.

* Functional Components and reactive updates.
* Virtual DOM and JSX.
* Props and states - i.e. Inputs to a component
  + *props* are immutable. But the whole component can be rendered by different props by the component's parent 
  + *states* are mutable and every time a state of a component changes React re-renders it on the page.
* React.DOM takes two arguments 
  + The *Component*
  + DOM node that will hold the component on the page
* To pass in multiple components we can:  
  + Pass it an array of components
  + Enclose it in
    + A dummy parent element.
    + A *React.Fragment* Element
* onClick event in React

#### And a great example of closure. 😁


```javascript
function Button(props) {
  // Commented out code was the partial application method that I tried using, It's an error, so please Ignore
  // const handleClick = props.onClickFunction.bind({})(props.increment);
  const handleClick = () => props.onClickFunction(props.increment)
  return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	return (
  	<div>{props.message}</div>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = (inc) => setCounter(counter+inc);
	return (
    <div>
      {[1, 5, 10, 100].map((inc)=>{
      return <Button onClickFunction={incrementCounter} increment={inc} />  
      })}
      
      <Display message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById('mountNode'),
);

```
Try it out [HERE](https://jscomplete.com/playground) 

In this example since onClick takes a function as a value, I tried setting the default value using the bind() method, But it never worked and yeah, I forgot about the closures.😕

If anyone wanna check that out please I'd really appreciate that. 


I hope, I might have helped in any way.😄
Thanks for Reading.
Have a Beautiful Day.🌼
4 Non-Popular HTML Tags 💻 
Tags: html, webdev, beginners, css
Published: 2021-04-13 14:03:16

Photo by <a href="https://unsplash.com/@xps?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">XPS</a> on <a href="https://unsplash.com/s/photos/laptop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

HTML is an easy but vital markup language in the world of web development, everybody in the web dev field knows at least the basics of it, if not the whole language. So I'm going to tell you some non-popular tags that you should know about.

So let's get started!!

## 1. The progress Tag
The `<progress>` tag allows you to create progress bars using just HTML.

Check this:
```html
<progress value="70" max="100">70%</progress>
```

You just need to specify `value` and the `max` value which is mostly going to be 100

Result:
{% codepen https://codepen.io/codewithgarvit/pen/xxgYpwM %}

## 2. ins and del Tags
The `<ins>` tag defines a text that has been inserted into a document. It underlined by the browsers automatically.

The `<del>` tag defines a text that has been deleted from a document. Browsers usually strike a line through it.

Check this:
```html
<p>The price of the new shirt is <del>$50</del> <ins>$25</ins>
<p>
```

Result:
{% codepen https://codepen.io/codewithgarvit/pen/rNjJpjq %}

## 3. The details Tag
The `<details>` tag is pretty handy for large documentation, it allows us to view or hide elements after clicking on the `<summary>` element

Check this:
```html
<details>
  <summary>DEV.to</summary>
  <p>DEV.to is a place where coders share, stay up-to-date and grow their careers. Cedits to dev.to for this line</p>
</details>
```

{% codepen https://codepen.io/codewithgarvit/pen/dyNdJZo %}

## 4. The dialog Tag
The `<dialog>` tag defines a dialog box or subwindow. It also makes it easy to create popup dialogs and modals on a web page. You also have to use an attribute called `open` to specify that the dialog element is active and that the user can interact with it.

Check this:
```html
<dialog open>Hola World! Garvit Here</dialog>
```

{% codepen  https://codepen.io/codewithgarvit/pen/PoWQERm %}

## ⚡️ Giveaway ⚡️
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our [Newsletter](https://worldindev.ck.page/) <-- Very important
--> Follow me on [Twitter](https://twitter.com/garvitmotwani) <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

---

Thank you very much for reading this article.

Comment any non-popular tags you know

**PLEASE LIKE, SHARE, AND COMMENT**

Follow me on [Dev](https://dev.to/garvitmotwani) and [Twitter](https://twitter.com/GarvitMotwani)

---

Subscribe to our [newsletter](https://chipper-motivator-3112.ck.page/05710ea3d3) to receive our weekly recap directly on your email!

Join us on [Discord](https://discord.gg/aWS2YKk6) to participate in hackathons with us / participate in our giveaways!

Thank You
Avoid CPAN conflicts in your personal Perl modules
Tags: perl, cpan, darkpan, pause
Published: 2021-04-13 14:17:00

---
title: Avoid CPAN conflicts in your personal Perl modules
published: true
date: 2021-04-13 14:00:00 UTC
tags: Perl,CPAN,DarkPAN,PAUSE
canonical_url: https://phoenixtrap.com/2021/04/13/avoid-cpan-conflicts-in-your-personal-perl-modules/?utm_source=rss&utm_medium=rss&utm_campaign=avoid-cpan-conflicts-in-your-personal-perl-modules
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezzlgli8e3s3y29kyxaj.png
---

If you’re writing Perl that’s **never going to the Comprehensive Perl Archive Network ([CPAN](https://www.cpan.org/))**, [heed this little-known note](https://pause.perl.org/pause/query?ACTION=pause_namingmodules#Local) on the Perl Authors Upload Server ([PAUSE](https://pause.perl.org/)):

> By convention, the top-level `Local` namespace should never conflict with anything on CPAN. This allows you to be confident that the name you choose under `Local` isn’t going to conflict with anything from the outside world.
> 
> <cite><a href="https://pause.perl.org/pause/query?ACTION=pause_namingmodules">PAUSE: On The Naming of Modules</a></cite>

So, `Local::MyModule`, `Local::App::MyApp`, whatever. This is also **good advice for bespoke applications and libraries** (the so-called [DarkPAN](http://www.modernperlbooks.com/mt/2009/02/the-darkpan-dependency-management-and-support-problem.html)) you’re developing in-house. The last thing you need is to accidentally bring in (perhaps via dependencies) a module that gets loaded instead of yours.
Vue.js assignments
Tags: vue, javascript, scss, axios
Published: 2021-04-13 13:55:19

# Assignment Details

Build a single page app that displays the profile of 10 users (the data is obtained from an API endpoint)

The idea of both the assignments is to build a single page that displays the profile of 10 users (the data is obtained from an API endpoint). Each user's profile contains a avatar picture, name, email, phone, address, website and company name.

## API endpoint for users data

The schema of the data received in the response is:
```
Method: GET
URL: https://jsonplaceholder.typicode.com/users
```
The schema of the data received in the response is:
```json
// Array of 10 users
[
  {
    id,	// The user's id
    username,
    name,
    email,
    phone,
    website,
    address: {
	  street, // Address line 1
	  suite, // Address line 2
	  city,
	  zipcode
    },
    company: {
	  name, // The name of company where the user works
    }
  }
]
```
## API endpoint for users' avatar pictures
You will be using Avatars by DiceBear. They provide a free HTTP API to create unique avatar images based on any string we send as a query parameters. Each string generates a unique image. You will use the username to generate a unique avatar for each user.

The URL for the GET endpoint is:
```
https://avatars.dicebear.com/v2/avataaars/{{username}}.svg?options[mood][]=happy
```

The {username} in the URL is the placeholder for the user's username. It should be dynamically replaced by the username received from the user's API endpoint. For example, if the username for one of the users is psamd then the URL for the avatar for this user will be: 
```
https://avatars.dicebear.com/v2/avataaars/psamd.svg?options[mood][]=happy
```
## Loading Indicator

Upon opening the app a loading indicator is displayed until the data is fetched from the API and is ready to be displayed. The source code for the loading indicator can be obtained from http://tobiasahlin.com/spinkit/.

1. Ability to create new react projects using Create React App
2. Understanding of JSX
3. Passing props to components
4. Understanding of stateful and stateless Components
5. Basic understanding of state management and component lifecycle 6. methods
7. Fetching data from an API endpoint
8. Conditional rendering
9. Working with lists



Demo: https://cihat.github.io/saypr-assignment/
Source Code: https://cihat.github.io/saypr-assignment/
How to make a Cookie Policy Banner without any npm package
Tags: typescript, webdev, nextjs, beginners
Published: 2021-04-13 13:52:52

### Ingredients:

- TypeScript
- localStorage
- Theme-UI
- Hooks (useEffect, useState)


### Cooking Process:

Let’s make a functional component and also let’s create our useState as a boolean since we want the cookie banner to appear or disappear based on clicking the button. 

We are going to use localstorage as well for these purposes.

Now when using localstorage the ``setItem()`` method is where you store your items.

On the function ``handleAcceptance`` we store on localstorage the cookie banner ``‘cookie-banner’``, also the second variable could not be avoided because it takes two arguments — so the variable ``‘visible’`` is added but will be used on that case.

When we use the useEffect hook basically we always want to render the banner once the component is rendered but only the first time we visit the page, so that’s why we don’t add a variable inside the []. When the UseEffect Hook is rendered with the ``getItem()`` method we check on the storage if that ``‘cookie-banner’`` variable exists.

If it does as is on our if statement then make it visible for our first rendering, so we set it to true, since our initial state is false.

Our ``handleAcceptance`` function will be passed down on our onClick event and will be triggered once we click the button.

Now the important point is that React can also return null, so what we actually do on our last if statement is that if the cookie is visible then return null so when we had already seen it once it will not keep appearing for every rendering.

### Presentation:

```js
export const Cookie = (): JSX.Element | null => { 
const [visible, setVisible] = useState<boolean>(false) 
const handleAcceptance = () => { 
  localStorage.setItem(‘cookie-banner’, ‘visible’)
  setVisible(false)
} 
useEffect(() => { 
  const hasSeenCookie = localStorage.getItem(‘cookie-banner’) 
  if (!hasSeenCookie) { 
    setVisible(true) 
 } 
}, []) 
if (!visible) { 
  return null 
} 
return ( 
<Flex 
   sx={{ position: ‘fixed’, 
   bottom: 0, 
   left: 0, 
   right: 0, 
   px: 4, 
   py: 4, 
   bg: ‘secondary’,     
   textAlign: ‘center’, 
   justifyContent: ‘center’, 
   alignItems: ‘center’, 
}}> 
<Text 
  as=”div” 
  sx={{ alignSelf: ‘center’, 
  fontSize: 5, 
  color:‘white’, 
  mr: 4 }}
 > 
 This website uses cookies to enhance the user experience 
</Text> 
<Button type=”button” onClick={handleAcceptance}> 
  I understand 
</Button> 
</Flex> 
)}
```

Happy Cooking
Simple Copy Coupon Using CSS & JS
Tags: html, css, webdev, javascript
Published: 2021-04-13 13:45:23

Hello, today I created a simple Copy Coupon Using HTML CSS & JS. Not great work but 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/).

If you want to more support me then buy me a [coffee]("https://www.buymeacoffee.com/nikhilbobade27").

Thank you!
{% codepen https://codepen.io/NikhilBobade/pen/yLgKKGg %}
A toy shell to play with go
Tags: showdev, go
Published: 2021-04-13 13:33:17

Hi it's Mirko here.

My learning about go continues.

I have created another learning project to play with the language syntax.
[Gosh](https://github.com/mirkoperillo/gosh) is a simple toy shell.


## Features

* Builtin functions: ciao, bye
* Suggestion of command options
* Possibility to extend suggestions to other commands
 
The project is available on Github and it is released under Common Creative Zero lincense

Any feedback about the code or the features is welcome!! 🙏🏻