teleren/devto huggingface dataset:
Salesforce 
Tags: technology, salesforce
Published: 2021-04-21 14:13:05

Salesforce is one of the fastest-growing technologies and has great technological relevance. This is one of the software that is going to boom in the coming years. Learning Salesforce will develop and validate your salesforce skills and prepares you for the role of a Certified SalesforceDeveloper. It provides customer relationship management service and also provides a complementary suite of enterprise applications focused on customer service, marketing automation, analytics, and application development. Now let's dig deeper into [What is Salesforce](https://intellipaat.com/salesforce-training/)?



Salesforce's primary administrations are devices for case, assignment, and issue the executives. It additionally gives clients following capacities for their raised cases and discussion highlights for informal communication Web locales gives insightful apparatuses and different administrations including email alert, Google search, and admittance to clients' qualification and contracts. They likewise cooperate with organizations like IBM, Accenture, and Saggezza to help coordinate Salesforce's cloud-based administrations into their organizations. It provides customer relationship management service and also provides a complementary suite of enterprise applications focused on customer service, marketing automation, analytics, and application development.



So this is definitely worth a shot to experiment in the huge Salesforce Arena. In case of more informative news, ping me up.
How to share your dev box with others in 5 minutes - Caddy edition
Tags: tutorial
Published: 2021-04-21 14:08:23

Sometimes you want to share what you are working on right now with your coworkers without either calling them over or pushing and waiting until it is deployed on the staging server. Then you take a look and find a bunch of complicated tools, proprietary helpers like ngrok, and a whole lot of similar stuff.

Yet all you need is a reverse proxy and SSH. And here's how it's done, by example of Caddy.

## Main Server Configuration
Add something like that to your Caddy file:

```
mymachine.dev.example.com {
  reverse_proxy https://localhost:11010 {
    transport http {
      tls_insecure_skip_verify
    }
  }
}
```

## Dev Box Configuration
On the dev box, make sure the webserver either reacts to the domain set up on the main server, or to every request in general. Since this is Caddy, I had to also disable the automatic certificate generation - I generate self-signed certs -, and the HTTPS redirect.

```
{
  auto_https off
}
localhost, devbox.local, mymachine.dev.example.com {
  tls /etc/ssl/localcerts/bundle.crt /etc/ssl/localcerts/server.key
  # Rest of your config
}
```

And finally, as the last step, open up the SSH tunnel and reverse-forward the port:

```
/usr/bin/ssh -N -T -R 11010:localhost:443 user@example.com
```

`N` means "don't execute a remote command", `T` means "don't allocate a terminal", and `R` means to forward the port in reverse - from the target to the local machine.

**That is all!**

## RC Service File

We're using FreeBSD machines set up using Bastille at work, so I created a simple RC file so the forwarding is done automatically at every devbox start:

```bash
#!/bin/sh

# PROVIDE: sompani_tunnel
# REQUIRE: LOGIN DAEMON NETWORKING
# KEYWORD: shutdown

. /etc/rc.subr

name=sompani_tunnel
rcvar=${name}_enable
pidfile="/var/run/${name}.pid"
pidfile_child="/var/run/${name}_jvm.pid"
logfile="/var/log/${name}.log"
sompani_tunnel_chdir="/usr/local/share/location-service"

command="/usr/sbin/daemon"
start_cmd="sompani_tunnel_start"
procname="daemon"

load_rc_config ${name}
: ${sompani_tunnel_enable:=no}

sompani_tunnel_start() {
    /usr/sbin/daemon -r -f -P ${pidfile} -p ${pidfile_child} -t ${name} -o ${logfile} /usr/bin/ssh -N -T -R 11005:localhost:443 sompani-live
}

run_rc_command "$1"
```
freeCodeCamp js solved questions
Tags: beginners, javascript, programming, learning
Published: 2021-04-21 14:02:22

Hello, my name is Miheer Tamkhane, beginner in javascript and learning 
freeCodeCamp javascript & I completed fcc given exercises and thought I've to share with you all.

###Q-1.Convert the switch statement into an object called lookup. Use it to look up val and assign the associated string to the result variable.
###Ans.
```
function phoneticLookup(val) {
  var result = "";
  var lookup = {
    alpha: "Adams",
    bravo: "Boston",
    charlie: "Chicago",
    delta: "Denver",
    echo: "Easy",
    foxtrot: "Frank",
  };
  result = lookup[val];
  return result;
}
phoneticLookup("charlie");
```
##Thank you, Hope it will help you.
live_render from phoenix controller
Tags: elixir, phoenix
Published: 2021-04-21 13:54:44

Recently, I rendered a liveview from one of my controller and I had to pass some params to that liveview. You can pass the params if you put it in the `session` option but that didnt felt right to me.

So, I figured I ask the community and I got to know when not to use `live_render` in the controller instead and got a reply from the creator himself.

> when you have an existing controller and dead views already in place and you want to add in a bit of live stuff
How do DevOps play an essential role in the Deployment Process?
Tags: devops, security, cloud, testing
Published: 2021-04-21 13:51:54

Common DevOps Engineer Roles and Responsibilities

After mentioning the benefits provided by DevOps, we will begin to see the common roles and responsibilities of DevOps out there. Let us break down how IT and engineering teams are benefited from these processes.

 
1. Planning, testing, and development of application and infrastructure

It is a fact that the entire DevOps team happens to be responsible for planning, testing, and the development of infrastructure and applications. You are sharing the accountability for the development as well as release pipeline results in more dependable services. Being an integral part of a DevOps team does not imply that you have a whole team comprising DevOps Engineers; however, a DevOps-oriented company will be spreading the responsibility for application and infrastructure planning testing, plus release across the whole IT and engineering organization.

 
2. Maintaining CI/CD pipelines

Being a DevOps team member implies that you are accountable for creating a CI/CD pipeline and optimizing individuals, tooling, and processes. Engineers who happen to be DevOps-minded will look for ways in which they will be able to improve the pipeline continuously. The team will shift QA and testing further left into the cycle for development, enabling the team to test continuously without limiting speed.

 
Must Read: Android CI / CD with GitLab

 
3. Automation implementation

As mentioned earlier, automation can be considered to be an essential principle of DevOps. Consequently, the DevOps teams are accountable for the implementation of this automation. Every individual from the front-end team to the data team is accountable for automating tasks and enhancing IT and engineering efficiency. It will be possible for you to emphasize more strategic advancement by automating mundane chores constantly.

 
4. On-call, incident management, and incident response

With code ownership and shared responsibility, DevOps teams need to take incident management work and on-call responsibilities. However, it will be possible for the DevOps team to learn more regarding their systems by responding to production incidents. Consequently, DevOps for developers start writing code over time that fits into their infrastructure and application much better, resulting in fewer incidents.

 
5. Monitoring

Lastly, we like to mention that DevOps teams are accountable for implementing actionable monitoring solutions. The organization needs to accumulate data and understand how to take action with it. The DevOps team is accountable for revealing blind spots in their infrastructure and applications and then comprehending how they can monitor those services. Monitoring happens to be one small step for creating highly observable systems; however, it is important to create reliable systems.

 Learn more:https://www.rlogical.com/blog/how-do-devops-play-an-essential-role-in-the-deployment-process/
JWT-authentication
Tags: node, jwt, express, restapi
Published: 2021-04-21 13:36:51



 This project describes the steps involed in a authentication process between client & server using JWT tokens.
Find it on my Github repo : 
<a href="https://github.com/satish-rajnale/JwtwebToken">Satish-Rajnale</a>

### First you need to generate some tokens 
 1. It's very easy just enter **node** and then the code in below image.
![generateTokens](https://user-images.githubusercontent.com/76589507/113830479-4865e480-97a4-11eb-8c28-64451f35146e.PNG)

 2. Then add these tokens in your .env file as ACCESS_TOKEN_PATH & REFRESH_TOKEN_PATH.
 ![dotenv](https://user-images.githubusercontent.com/76589507/113831448-40f30b00-97a5-11eb-800a-45dc8f1aa073.PNG)

 - ### Now Create the authUser.js file as shown below.
![AuthUserjs](https://user-images.githubusercontent.com/76589507/113831623-70a21300-97a5-11eb-80e5-cd50fbd93f68.PNG)

 - ### Now Create the inedx.js file as shown below.
  ![Indexjs](https://user-images.githubusercontent.com/76589507/113831847-ab0bb000-97a5-11eb-9f75-113b9504c43d.PNG)

### Onto the Requests part create a Requests.rest file as shown below.
You can use the extension `Rest Client` in VsCode or you can also use `Postman`, both are great but in this project I am using the entension.

![RequsetsRest](https://user-images.githubusercontent.com/76589507/113832525-5288e280-97a6-11eb-9109-14458854f6db.PNG)

 1. First make a request of `POST` for login on port:4000
 2. On successfully making the request you will get the following response with tokens.
 ![logintoken](https://user-images.githubusercontent.com/76589507/113832996-c75c1c80-97a6-11eb-907b-6ab3b290bb5f.PNG)


 3. Copy the accessToken and paste it in your `GET` request's Auhtorization value. PORT:8080
 
 ![getUser](https://user-images.githubusercontent.com/76589507/113833458-4f422680-97a7-11eb-98f0-7d8d9a6e4137.PNG)
 
 4. Copy the refreshToken and paste it in your `Post` request for token.PORT:4000

 ![PostRefresh](https://user-images.githubusercontent.com/76589507/113833515-65e87d80-97a7-11eb-8e76-ad3bb49915de.PNG)

 5. When sent a request from `GET` method you will get the following response.
 ###NOTE:
 There is a TimeLimit added and within that time limit you have to make the get request.
 For your convenience you can extend the time limit through your authuser.js code.
 
  ![Response](https://user-images.githubusercontent.com/76589507/113834011-f1620e80-97a7-11eb-82d2-bd4783220aaa.PNG)

 6. When you send the `POST` request for token it generates the following access token which you can copy and paste in the `GET` request. This will extend the user access/auth time. Basically you get access again.

  ![PostRefreshToken](https://user-images.githubusercontent.com/76589507/113834313-51f14b80-97a8-11eb-89bc-12372ae35445.PNG)

 7. Now to delete the generated JWT token and logout the user use the `DELETE` request.
![Delete](https://user-images.githubusercontent.com/76589507/113834785-d9d75580-97a8-11eb-9db2-1c54abd8d7e5.PNG)
![TokenDeleted](https://user-images.githubusercontent.com/76589507/113834891-f5426080-97a8-11eb-8650-b600bfaf8bba.PNG)
Make your npm package work on both Node.js and browser
Tags: npm, node, tutorial, javascript
Published: 2021-04-21 13:34:44

I recently worked on an npm package that is supposed to be consumed on both Node.js environment and the browser (using React/Angular/etc..).

Things started getting complicated when the node branch of the code needed to require native Node.js packages — like `fs`.

Consider the following (simplified) code:
```
// node-handler.js
const fs = require('fs');

export const handle = () => { 
  fs.readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;
```
When testing the module on my React + Webpack app, the app crashed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq7fou7mjg5rbejt1sqm.png)

This happened even though the `node-handler` file wasn’t executed, this is due to Webpack nature of creating a bundle containing all the code.

##Step 1: Postpone your requires##
Instead of requiring `fs` in the global scope, we can require it only where we actually need it, that way we don’t require it when running in the browser:
```
// node-handler.js
export const handle = () => { 
  require('fs').readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;
```
Cool! Our React app is not crashing anymore! But we do get an annoying compilation warning right now:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ptgfju0o8i9ut8o8dhp.png)

While we can live with a warning ⚠️ , our end-users will probably not like this too much and will end up not installing our package.

##Step 2: eval your require##
This is not the most elegant solution (to say the least..), but it’s keeping Webpack quiet and your end-users happy. Instead of using `require('fs')`, we’re gonna use [eval](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)`('require')('fs')`:

```
// node-handler.js
export const handle = () => { 
  eval('require')('fs').readFileSync(…);
  …
};

// browser-handler.js
export const handle = () => { … };

// index.js
const nodeHandler = require('./node-handler').handle;
const browserHandle = require('./browser-handler').handle;
const isNode = require('./config').isNode;

const handle = isNode ? nodeHandler : browserHandle;
```

And that’s it! Just two simple steps to make your npm package work on both Node.js and browser.

Good luck and may you be blessed with tons of stars 🌟
How to create a sticky footer
Tags: stickyfooter, css, html, csstricks
Published: 2021-04-21 13:34:10

Sometimes you don't have enough content in the main section of the project and the footer comes up and you want to have it as a sticky footer on the bottom of the page even when the content is less. In this article, I gonna show you how you can fix this issue.

Assuming this structure:

```HTML
<body>
    <header><!-- ... --></header>
    <main>
    <!--
        Your content
    -->
    </main>
    <footer><!-- ... --></footer>
</body>

```
Add these codes for the CSS:
```CSS
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}
```

I hope it would be helpful for you
Help Setting Up VSCode Formatting
Tags: help, vscode, vue
Published: 2021-04-20 16:09:22

So I feel like I should not be having to ask for help on this, but I feel like I have grown very annoyed with formatters fighting over each other that it has actually gotten old to write TypeScript/JavaScript code in VSCode with Vue (or really any other frontend framework).

## Issue
So here is my issue: Currently I have my `.vue` files formatting correctly and it is giving me good `eslint` warnings and errors. Though now the issue is in my `.ts` or `.js` files. These files never want to format properly now and I can't get it to format on save. Then if I do end up getting it to format on save, it seems it will fight against the `.vue` files.

Example: Currently my `.vue` files format properly and use my preferred 2 spaces for tabbing. While my `.ts` or `.js` files will just go straight to using the 4 spaces for tabs, and won't even correct itself no matter what I do. 

### What I'm looking for
What I'm looking for a great environment and project setup that will do the following:

* Listen to the projects eslint settings
* Listen to the projects prettier settings for formatting
* Be able to auto format on save all my files and not have them conflict with each other
* Best way to update and modify settings

### Current Environment/Project Setup
Currently the environment/project setup is the following:
* VSCode
* Vetur Extension
* ESLint Extension
* VueJS
* eslint and prettier on project

For Vetur I have all my formatters turned on. I also have the format on save turned on. For the Vue project I am using the following packages/rules for eslint

```
extends: ["prettier", "prettier/standard", "plugin:@typescript-eslint/recommended", "plugin:vue/recommended"],
  plugins: ["vue", "prettier"],
  parser: "vue-eslint-parser",
```

And for prettier, I have the following setup:
```json
{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "ignore",
  "tabWidth": 2
}
```
I will take any suggestions on best practices to take. I understand a lot of this will be opinionated as everyone has different takes on how formatting should be done, but I am looking for the best practices to make sure your environment and project is setup properly so you are not fighting these issues for every new project that you start or work with, with other people.

Any help/suggestions is greatly appreciated. Thanks!
7 extensions of Visual Studio that you will love
Tags: vscode, webdev, codequality
Published: 2021-04-21 13:27:00

I have been using this extensions for my work and found it really helpful so I felt that it would be good to share.

1. [Change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
Quickly changes the case of the current selection or current word.

2. [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
Love that one! Highlights web colours in your editor

3. [Eslint](https://marketplace.visualstudio.com/items?itemName=manuth.eslint-language-service)

4. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

5. [generact](https://marketplace.visualstudio.com/items?itemName=Dennitz.vscode-generact)
Generates React components by replicating your own!

6. [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
Is the perfect tool for live pair-programming

7. [ECMAScript Quotes Transformer](https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes)
A simple quotes helper for JavaScript and TypeScript.
Web Developers, do you recommend building your own portfolio, or paying for an existing service?
Tags: webdev, healthydebate
Published: 2021-04-21 13:23:20

I know that building your own custom-coded website is a great opportunity to showcase your skills, but it's also something you need to maintain moving forward. Is it worth the hassle of maintaining a custom-coded website as opposed to going with a 3rd party provider (such as SquareSpace or Wordpress)?

I'm considering moving to a 3rd party provider as I find maintaining my own website to be more of a distraction from other, more important, work. Before I make the switch I thought I'd see what you wise folks had to say. Thanks!
CSS class to add margin for all child elements
Tags: css, webdev, codenewbie, codepen
Published: 2021-04-21 13:21:15

```html
<div class="container space-kids">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
```

```css
.container {
  border: 2px solid white;
  padding: 12px;
  display: flex;
  width: 400px;
  .box {
    height: 50px;
    width: 50px;
  }
}

.space-kids {
  & > * {
    margin-right: 12px;
    &:last-child {
      margin-right: 0px;
    }
  }
}
```
[Codepen](https://codepen.io/318097/pen/rNjrXYj)


Update: css property `gap` works too. Thanks @afif for pointing it out. But other styles would work with `universal` selector


---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**

---

**Projects**
[Note Box](https://chrome.google.com/webstore/detail/note-box/mbbajjgefpenmkkhcnmmnoodlbcbfnmp) - A chrome extension to add notes/todos based on URL  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
Why Selenium is popular?
Published: 2021-04-21 13:14:20

All things considered, Selenium has an early mover advantage in the computerized testing services domain. It is not difficult to utilize an open-source framework for automation, which isn't the situation with its rivals and has solid local area support for its clients. There are huge loads of Selenium Tutorials accessible on the web, that can be utilized to <a href="https://intellipaat.com/blog/tutorial/selenium-tutorial/">learn Selenium </a>. 

Selenium is extraordinary from other automation tools as it gives a large group of advantages when contrasted with different tools present in the business. A portion of the highlights featured are: 

Selenium is open-source and free programming and along these lines has solid local area support. 

You need not be a specialist in different programming languages to computerize the testing, similarly, as with Selenium, it upholds numerous languages like Python, Java, Ruby, PHP, and so forth 

It's viable with each OS. 

Among every one of the tools it packs, it has Selenium-Grid which works with appropriated test execution which along these lines saves time to finish a test pass. 

It additionally has reconciliation for open-source frameworks like TestNG, JUnit, and so forth 

Furthermore, there are a lot more highlights that make this robotized web applications testing framework predominant and one of a kind among the wide range of various frameworks. 

<h3>What is the Selenium device in automation testing? </h3>

Selenium is a framework that contains numerous tools that take into account the various necessities of the association for testing and they are: 

Selenium IDE (Integrated Development Environment) 

Selenium RC (Remote Control) 

Selenium WebDriver 

Selenium Grid 

<h3>What sort of Testing is Selenium utilized for? </h3>

Selenium is a mechanized testing apparatus for web applications. There are a few kinds of Testing that Selenium supports and they are: 

Acknowledgment Testing 

Useful Testing 

Execution Testing 

Relapse Testing 

TDD (Test Driven Development) and BDD (Behavior Driven Development). 

<h3>What is the fate of Selenium Automation testing? </h3>

The fate of Selenium Automation testing looks encouraging contrasted with other testing tools since an ever-increasing number of organizations are utilizing web applications. 

Selenium is the most generally utilized automation device since it is an open-source device that upholds all internet browsers like Mozilla, Firefox, Chrome, and so forth 

The open positions are bounty immense and it's just expanding for selenium experts. The normal compensation for a selenium testing proficient is additionally generally excellent at $45,993 and $74,935 in the United States.