teleren/devto huggingface dataset:
HttpUtility encode vs WebUtility encode
Tags: csharp, asp, aspnet, webapi
Published: 2021-06-14 11:23:48

Hello guys, Today I have learned a difference between HttpUtility.HtmlEncode and WebUtility.HtmlEncode. If you use dot net version less than 4.7 then HttpUtility.HtmlEncode encodes the regional languages. If you want to only html tags need to encode then use WebUtility.HtmlEncode.

    var regionalText = "தமிழ்";
            var htmlText = "<script>alert('OK')";
    
            var httpUtilityRegionalText = HttpUtility.HtmlEncode(regionalText); //&#2980;&#2990;&#3007;&#2996;&#3021;
            var httpUtilityHtmlText = HttpUtility.HtmlEncode(htmlText); //&lt;script&gt;alert(&#39;OK&#39;)
    
            regionalText = "தமிழ்";
            htmlText = "<script>alert('OK')";
    
            var webUtilityRegionalText = WebUtility.HtmlEncode(regionalText); //தமிழ்
            var webUtilityHtmlText = WebUtility.HtmlEncode(htmlText); //&lt;script&gt;alert(&#39;OK&#39;)
🔴 TechTalk - How to become a Secure Developer in 2021 with Liran Tal
Tags: security, webdev, javascript, node
Published: 2021-06-14 11:20:03

Hi everyone! 👋

I have started a LIVE TechTalk show on my channel.

And on the episode, Liran Tal joined as a Guest.

Liran is working as a Director of Developer Advocacy at Snyk and is a member of Node.js Foundation Security Working Group.

He shared some of the tips developers can use to make more secure software.

<h3><u>Topic: How to become a Secure Developer in 2021.</u></h3>

You can Watch on YouTube https://www.youtube.com/watch?v=1hczYOdrA_o

{% youtube 1hczYOdrA_o %}

Enjoy 🌸

Also SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1

LIKE FB Page - https://www.facebook.com/the.destro.dev.show/

Follow on Twitter - https://twitter.com/destro_mas

Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋

<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
what I find super in sass
Tags: css, sass, html, javascript
Published: 2021-06-14 10:46:13

Sass stands for Syntactically Awesome Stylesheet. Sass is an extension to CSS. 
it is a CSS pre-processor. Sass is completely compatible with all versions of CSS. 

Sass reduces repetition of CSS and therefore saves time


so today i am going to highlight two main features i consider as super in sass

the first goes to mixins

sass provides us with a mixin which is kinda like a regular javascript function

it helps reduce code redundancy

for example

.container{
   display:flex;
   justify-content:center;
   align-items:center;
   flex-basis:100%
}

.container2{
   display:flex;
   justify-content:center;
   align-items:flex-start;
   flex-basis:100%
}


both container and container2 share similar properties,with the power of sass we could easily create a function(mixin) to handle such repetitions.....

it goes like this

@mixin mymixin{
   display:flex;
   justify-content:center;
   align-items:flex-start;
   flex-basis:100%
}

and we can simply call this in our class by including @include mymixin()

as easy as that your code is available throughout your styling.....
you could also add parameters as i would call it to your mixins

e.g
@mixin mymixin($horizontal,$vertical){
   display:flex;
   justify-content:$horizontal;
   align-items:$vertical;
   flex-basis:100%
}


and when calling such mixin you simply provide two arguments for horizontal and vertical...flexible huh


The second super power i appreciate is the ability to import styles...

sass uses @imort to import scss files

_header.sccs('_' a convention for additional sass files)

and can be import as @import "./_header"
no need to append .scss as sass already knows its a sass file


those are the two i find really super in sass...

leave your thoughts on those you consider super
Mathe-Lernplattform
Tags: lms
Published: 2021-06-14 11:19:42

Die Mathe-Lernplattform www.mathe-realschule.de ist gezielt auf den aktuellen Lehrplan für die bayerischen Realschulen ausgerichtet. Mithilfe von Lernvideos und jeweils passenden Übungsaufgaben und Lösungen kannst du so dein Kind bestmöglich begleiten und weißt genau wo dein Kind gerade steht. Die Betreiberin der Lernplattform heißt Michaela Kugler und ist Lehrerin an einer [Realschule in Bayern für Mathematik](https://kursprofi.com/mathe-lernplattform-bayern/) und Wirtschaftswissenschaften.

Die Schüler*innen haben hier die Möglichkeit, im eigenen Lerntempo anhand von Videos den aktuellen Stoff zu lernen und zu vertiefen oder auch ganz gezielt das nötige Vorwissen aufzufrischen.
How to check multiple checkboxes at once with Cypress
Tags: cypress, testing, checkboxes, webtesting
Published: 2021-06-14 10:58:32

## Learn how to remove code duplication from your Cypress tests by calling the `.check()` command only once when you want to check all the checkboxes in a section of the application ☑️

I don't know about you, but I don't really like code duplication. So today, I'm going to show you a technique to eliminate some duplication when dealing with checkboxes using the [**Cypress**](https://cypress.io) test automation framework.

To exemplify, I will use a [sample application](https://form-devs.s3.eu-central-1.amazonaws.com/formulario.html) created using only static files (HTML, CSS, and a background image).

> **Note:** the app text is in Portuguese

In this application, as shown below, there is a section with the label **Select the technologies you use:**

![checkboxes-screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx7nfch8yjqs445n8gym.png)

Since all checkboxes are contained in a `div` with `id` `check`, I can check them all with a single command like this:

```js
// cypress/integration/checkboxes.spec.js

describe('Checkboxes', () => {
  beforeEach(() => {
    cy.visit('https://bit.ly/3vswFBe')
  })

  it('checks all checkboxes with one command', () => {
    cy.get('#check input[type="checkbox"]')
      .as('checkboxes')
      .check()

    cy.get('@checkboxes')
      .each(checkbox => {
        expect(checkbox[0].checked).to.equal(true)
      })
  })
})
```

And since the `.check()` command chained to `cy.get()` checks more than one checkbox, all checkboxes are checked if the used selector is not specific to a single element, which is the case.

With that, I can have a new `cy.get()`, this time passing as argument the alias created earlier (`'@checkboxes'`), to check that they are all really checked.

Easy ha?

For more details on the `.check()` functionality, I recommend reading the [**Cypress official docs**](https://docs.cypress.io/api/commands/check).

___

Did you like this **“Pinch of Cypress”**?

Leave a comment.

___

Are you curious and want to learn more about **testing automation with Cypress**? I was hoping you could get to know [**my Cypress courses on Udemy**](https://www.udemy.com/user/walmyr/).

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/06/14/como-marcar-varios-checkboxes-de-uma-so-vez-com-cypress/) blog.

___

👋 Until next time and happy testing!
Java Developer Resume
Tags: java, javadeveloper, resume
Published: 2021-06-14 10:49:57

A Java developer is a specialist programmer who uses their knowledge to test and develop software using the Java programming language. Java developers use their knowledge to create, adapt, monitor and repair software across a variety of platforms, and Java developers often work closely with web developers and designers and software engineers to create fully integrated programs and applications for their clients.

You’re a [Java developer](https://www.interviewbit.com/blog/java-developer/). You’re smart. You develop complexities. But when it comes to writing a resume that shows off your talents, you’re lost.

Creating a resume isn’t the easiest of tasks, especially for a job as specific as Java developer.

Resume basically outlines your skills and training, work experiences, and educational background, and, most importantly, the accomplishments you have made with past employers. It also informs the hiring committee of your career objective and communicates concisely the benefits you will bring to the job if hired.

Some common resume ethic one should maintain is as follows:

* Margins – One-inch margins on all sides
* Font – Pick a professional font that stands out.
* Font Size – Use a font size of 11-12pt for normal text and 14-16pt for headers
* Line Spacing – Use 1.0 or 1.15 line spacing
* Resume Length – Don’t go over the 1-page limit.

### What Not To Do In Your Resume

On the contrary, one must keep in mind of what NOT to do in your resume, which follows:

* Too much information
* Spelling mistakes and grammatical errors
* Inaccuracies about your qualifications or experience
* Unnecessary personal information
* Your age
* Negative comments about a former employer
* Details about your hobbies and interests
* Passive language
* Tiny text
* Miscellaneous extra content
Elm at Treefin
Tags: elm, javascript, webdev
Published: 2021-06-14 10:33:27

Hello lovely **Elm-Community**! We at treefin (Munich, Germany) love Elm and want to share our story along with some exciting news with you!

As a short intro: Treefin is a digital assistant for all of your financial matters. It allows you to keep  your bank accounts, insurances and investments in one place, providing you with helpful insights and a 360° overview of your spendings.

A few years back we have made the decision to **rewrite our codebase**. With treefin being a finance app, our users’ trust has always been our primary concern. Stability and a high standard of quality were therefore of great importance when it came to choosing the frontend tools. TL;DR: **We chose Elm!**

Our approach is to gradually migrate chunks of our old **AngularJS**-frontend to a new codebase using Elm. We keep those two codebases strictly separated. To enforce this (also on CSS level) the new app is integrated into the old one using an iFrame, with the option of making it a custom element with shadow DOM in the future. The two components are packaged using Webpack. The app is finally shipped as **Cordova** Hybrid app which helps us to easily target web browsers as well as Google and Apple Phones.

While implementing the new app, we adhered to community standards for writing **SPAs in Elm**: We keep a Main.elm as a central unit, managing state, rendering all views and handling commands and subscriptions.

Our **Elm caching layer** is a robust and scalable solution for complex single page applications. With a Cache.elm we keep all communication to the outer world and our application’s global state in one place. Any data required by a Page is expressed as a Need, which abstracts requests to cache (read more).

With a new app comes a fresh UI design, too! We follow the **Material Design guidelines** and use Material Components from the [aforemny/material-components-web-elm](https://package.elm-lang.org/packages/aforemny/material-components-web-elm/) package as much as possible. Additionally, all of our CSS is following the **BEM** methodology. To enforce this, we have implemented helper functions in a Utils.Bem module and use those for displaying any part of the UI. To make the navigation between the old and new areas of the app as seamless as possible, huge efforts were put into styling on both sides of the code.

If you would like to test out the treefin app, you can use one of our **demo bank accounts**! You can find the [web app here](https://app.treefin.com) or download the mobile version both from Play Store and App Store. After registration, you can add a dummy bank connection through searching for “Demo Provider” in the list of bank providers. The demo account names and credentials are displayed on screen, however, demo2/demo has to most data in it, so we would advise you to go for this one!

That's all folks.
How Gatsby works
Tags: javascript, react, gatsby, beginners
Published: 2021-06-14 10:30:30

---
title: How Gatsby works
tags: javascript, reactjs, gatsby, beginners
series: [Gatsby]
---

![https://cdn-media-1.freecodecamp.org/images/1*8JLlG_T6onoeW2mVjVT_Gw.png](https://cdn-media-1.freecodecamp.org/images/1*8JLlG_T6onoeW2mVjVT_Gw.png)

Gatsby is static site generator. it has three phases

1. Collecting data sources
2. Building
3. Deploying

### Collection step

In this step it will collect the data from sources here the sources are `Databases` or `XML files` or `CSV` or `Text files` or `JSON` or `Wordpress` or anything.

### Building step

Once data is collected then we can access it from source code with the help of graphql. Here we cannot mutate the existing data

### Deploying

Once we are done with development we can build the app and we can host that build files in any static web host sites like Amazon S3, Netlify, Github pages, [now.sh](http://now.sh/) and many more...
About Gatsby
Tags: javascript, react, gatsby, beginners
Published: 2021-06-14 10:27:39

---
title: About Gatsby 
tags: javascript, reactjs, gatsby, beginners
series: [Gatsby]
---

Gatsby is react based **open source**  framework to create static websites and static web-apps. It is suitable if we are building portfolio sites or blogs or company home pages.

### Why Gatsby ?

1. It will build static sites that are **P**rogressive **W**eb **A**pps .
2. It will follow the latest **Web standards.**
3. Eco system.
4. Gatsby sites are optimised and highly performant.
5. It will allow us to work with ReactJs, Webpack, GraphQL, ES6+, Js, Css and CSS-in-JS.

I would like to add one more point i.e Building static sites with `react` is not easy. Because if we take `create-react-app` as an example it will focus more on **S**ingle **P**age **A**pps but for Routing, Seo, Performance and Optimisation we need to do lot of configuration which gatsby provide as default in starter's.

### Gatsby features

1. **Supports Reactjs** 

    which will help us to build reusable components and make things easier to maintain.

2. **Webpack** 

    which will help to create minified and optimised bundles.

3. **SCSS and CSS-in-JS**

    It has support for SCSS, CSS-in-JavaScript libraries, allow us to manage styles better.

4. **Responsive images**

    Resizing images based on devices.

5. **600+ Gatsby plugins**

    There are lot of gatsby plugins available for `responsive-images`, `data sources`, `offline support`, `Mdx` and `analytics` etc...

6. **Supports react and npm packages**

    We can install any `npm` package and can use it in the app.

7. **GraphQL**

    Gatsby collects data from data sources and make it available via GraphQL. The data sources could be any thing `databases` or ` json` or `XML` or `wordpress` or `text files` etc..

8. **Gives Smoother experience to user**

    Gatsby will add smoothness to the app with its features and aims at full app like experience borrowing from PWA.
What actually motivates you to code?
Tags: css, javascript, python, react
Published: 2021-06-14 10:15:51

to be frank with you guys i have two reasons

the first one being a solid reason and the second one being a less solid reason......

> first because of the cool pay and the fact that i can work from home which is absolutely what i love as an introvert

> second which is more or less my favorite ,because i could do cool stuffs with code


leave comments on what motivates you to code and why you love coding.....
3 ways to send emails with only few lines of code and Gmail - Javascript - Part 1
Tags: javascript, smtp, email, nodemailer
Published: 2021-06-14 10:05:45

*We will see how to send a simple email with the help of three different programming languages: Javascript, Ruby and Python
Before you start you need to create a Gmail account.
Do not forget to accept and allow the "Less secure apps" access in order use your scripts with your Gmail smtp connection.
I'll let you do this on your own, you don't need a tutorial for this* 😜

## Javascript 🚀

- For the first script, we are going to use the [Nodemailer](https://nodemailer.com/about/) module:
```
yarn add nodemailer
```

- Require or import the module into your `index.js`:
```js
const nodemailer = require('nodemailer')
```

- Initialize the mailer with our Gmail account info:
```js
// Gmail account info
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});
```
- Create your email:
```js
// Email info
const mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yopmail.com',
  subject: 'Sending email using Node.js',
  text: 'Easy peasy lemon squeezy'
};
```
- Sending your email:
```js
// Send email and retrieve server response
transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});
```

Here the final code:
```js
const nodemailer = require('nodemailer')

// Gmail account info
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

// Email info
const mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yopmail.com',
  subject: 'Sending email using Node.js',
  text: 'Easy peasy lemon squeezy'
};

// Send email 📧  and retrieve server response
transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});
```

## Javascript buddy 🤝
![Javascript buddy](https://media.giphy.com/media/xUOxeZy7TXZYptBMSA/giphy.gif)  


Table of contents
-

- Javascript 🚀 - Part 1
- [Ruby 💎 - Part 2](https://dev.to/fralps/3-ways-to-send-emails-with-only-few-lines-of-code-and-gmail-ruby-part-2-23nc)
- [Python 🐍 - Part 3](https://dev.to/fralps/3-ways-to-send-emails-with-only-few-lines-of-code-and-gmail-python-part-3-13e0)
Easy Accessible Click Handlers
Tags: react, jsx, javascript, a11y
Published: 2021-06-14 10:01:29

---
title: Easy Accessible Click Handlers
published: true
description: A simple helper function for accessible click handlers in React Jsx
tags: react, jsx, javascript, accessibility
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i0lp1wu03s6p4ftjkpa.png
---
If you add a click event to a non-interactive html element such as a `div` you should also add keyboard support. For interactive elements like a `button` this is already taken care of by the browser.

If you use `eslint-plugin-jsx-a11y` you will see this warning when you add an `onClick` event:
```
71:13  warning  Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
```
To get rid of this warning, my default approach is to add an additional handler for `onKeyDown`, filter for the enter key and trigger the same event as I have for `onClick`.

Additionally I add the `role` and `tabIndex` attributes as recommended.
```jsx
function handleClick() { setWhatever(true) }

function handleKeyDown(e) {
  if (e.keyCode === 13) {
    handleClick();
  }
}

return <div
  role={'button'}
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={handleKeyDown}
>Click me!</div>
```
In comparison to a button this adds quite a lot of code and makes simple components appear more complex than they really are:
```jsx
function handleClick() { setWhatever(true) }

return <button onClick={handleClick}>Click me!</button>
```
To avoid this, you can add a simple helper function that returns all required attributes, I called mine `accessibleOnClick`:
```javascript
export function filterKeyEnter(handler) {
  return e => {
    if (e.keyCode === 13) {
      handler(e);
    }
  }
}

export function accessibleOnClick(handler) {
  return {
    role: 'button',
    tabIndex: tabIndex || 0,
    onKeyDown: filterKeyEnter(handler),
    onClick: handler
  }
}
```
In your JSX you can now use the spread opperator to add all attributes returned by `accessibleOnClick`.
```jsx
function handleClick() { setWhatever(true) }

return <div
{...accessibleOnClick(handleClick)}
>Click me!</div>
```
This is one of my favorite helper functions and I use it on a regular basis.

Do you have a similar/different approach for this type of click handlers? Let me know!
How to print tables in python ?
Published: 2021-06-14 09:57:37

👨‍💻 Guys new vidoe uploaded go and watch my video full.
-
YouTube video link - https://youtu.be/b8whUY9EaMk
-
👨‍💻 Join us for python programming series 
-
❤️Subscribe our channel 
👍Like our video if helpful
😍Share this video more
Built Air Quality Monitoring App using React
Tags: reactnative, android, ios, mobile
Published: 2021-06-14 09:56:02

We have built [air quality monitoring app using React Native] (https://www.softwebsolutions.com/air-quality-monitoring-app-using-react.html) to shrink air pollution levels for our client

Poor air quality is a global health problem. The prime contributors of air pollution are climate-polluting emissions from vehicles, household fuels, commercial sources, smoke and others. Their smart band helped the user to monitor air quality parameters in real-time with the embedded sensors and Bluetooth Low Energy (BLE) connectivity integrated into a mobile app. However, the data processing performance of the smart band was inadequate.

Softweb Solutions provided a cohesive solution by understanding the client’s requirements in depth. Our [react native developers] (https://www.softwebsolutions.com/react-native-app-development-services.html) deployed a customized mobile solution for them on the IoTConnect™ cloud. The mobile application now gets the real-time data from the smart band and the users can check the air quality index (AQI-generated) insights based on collected data.

**Key aspects of mobile-based air pollution monitoring app**

* Supports in identifying highly-polluted areas and level of pollution
* Facilitates in assessing impacts caused by poor air quality on public health
* Generates real-time alerts when the pollution level exceeds a predefined threshold value
* Helps to determine if a particular area is meeting the air quality standards
COVID-19 react js & redux-saga
Tags: javascript, redux, react, reduxsaga
Published: 2021-06-14 09:54:24

Redux Saga is a redux middleware that allows you to manage your side effects (for eg. reaching out to the network) just like Redux Thunk.
Redux Saga offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.

GitHub Link:https://github.com/MehrdadArman/covid19-redux-saga
Kendraio FundOSS  
Tags: kendraio, funding, opensource, nonprofit
Published: 2021-06-14 09:53:12

Throw between two and five dollars to Kendraio today and we'll end up receiving up to an extra $20 in matched funding! FundOSS is a  new system for fundraising open source software that rewards projects based on the size of their community rather than the amounts they raise. 

So the multiples on the matched funding are bigger for the smaller the amount donated. Hence $2 gives the greatest multiplier! You need to have a GitHub account to donate. But that's easy to get. 

Head to https://fundoss.org/collective/kendraio and donate a few dollars! And then tell your friends, family, and loved ones!
Site Reliability Engineer
Tags: sre, devops, career, hiring
Published: 2021-06-14 09:20:27

If you're an SRE expert and you can successfully do this fun SRE exercise on GitHub, then our principal engineer would love to interview you!  http://ow.ly/FxQS50F9xat

We're a fun, dynamic team of developers working with high profile public and private sector clients. We've chucked out the traditional hiring route of cv writing and laborious interviews with HR, in favour of an exercise which will help you decide if you like the way we work and vice versa! 

Remember to leave your full name and contact details. We're excited to see what you all come up with. 

Laura Hillman, Catapult CX  - any questions email laura.hillman@catapult.cx