teleren/devto huggingface dataset:
3 New JavaScript Features in ES2020 That You Should Know
Tags: javascript, webdev, vue
Published: 2021-04-07 13:31:10

So here are some cool features to try out!
It would be really helpful if you like, share and comment.

**1. BigInt**
BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have a much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is [pow(2, 53) - 1]. But BigInt actually allows you to go even beyond that.

![BigInt](https://res.cloudinary.com/practicaldev/image/fetch/s--gE7kQ_DX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/588khrk3rpei76gho4e9.png)

However, you need to have an [n] appended at the very end of the number, as you can see above. This [n] denotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine).

This improvement is not backward compatible because the traditional number system is IEEE754 (which cannot support numbers of this size).


**2. Dynamic import**
Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like. The good thing is that you actually import a module, and so it never pollutes the global namespace.

![Dynamic import](https://res.cloudinary.com/practicaldev/image/fetch/s--0SMs7mC9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utai4m6xcc1nk3aooqxf.png)

**3. Optional Chaining**
Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, [undefined] will be returned. This works on object properties but also on function calls and arrays. Super convenient! Like this example:
![Optional Chaining](https://res.cloudinary.com/practicaldev/image/fetch/s--DtuS8h-f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4w5zkv64r0cs46xpjie.png)

Thank you very much for reading this article.

Comment any features that you like of javascript and a feature that you think should be improved in the next ES
Voices from Women in the digital industry Pt. 3
Tags: career, interview, motivation, womenintech
Published: 2021-04-07 13:24:43

*Illustration by [Gloria Shugleva](https://dribbble.com/shots/12233236-Writing-an-article-for-your-blog)*

*As part of International Women's Day, we at SinnerSchrader created an internal website that was filled with content from our employees. Among other things, we asked various women in leadership positions the same three questions. The answers were so inspiring that we didn't want to withhold them from the rest of the world. This time we have Kristina Schmidt's (Head of Talent Management) answers.*

## What does female leadership mean to you?

For me, female leadership is a chance to create more diversity and perspectives. 

At the same time, it is also an opportunity to break down old leadership patterns and create new development opportunities, both for individuals and for us as an organization.

## Would you say that being a woman has influenced your way of leading and/or did you have to acquire (or drop) certain qualities to be successful?

It is not just being a woman, but my life experience, my history, my friends and family that have shaped and influenced my resilience and me significantly.

It is also my boundaries that have made me learn by overstepping, that have made me have experiences and that have made me learn again and again.

## What would you like to tell young women who aim to take a leadership role in the future?

Take chances and be sure: every fall is an opportunity to learn, use your strengths, be brave and trust yourself! Find someone who supports you and your goals.
Detect Responder (LLMNR, NBT-NS, MDNS poisoner) with osquery
Tags: responder, osquery, python, security
Published: 2021-04-07 13:10:01

This repo contains a python-based extension for osquery to detect active instances of Responder or any NBT-NS and LLMNR spoofers/poisoners on the network.

This extension was developed using osquery’s Python bindings from https://github.com/osquery/osquery-python/

This extension was written with native Python modules to reduce the need for installing third-party Python libraries on hosts. Although it would have been cleaner and easier to use a library like Scapy, it would require installing it on every host where the extension was used.

[Detect Responder](https://kali-linuxtr.net/detect-responder-llmnr-nbt-ns-mdns-poisoner-with-osquery)
SWSystems UK 
Tags: epos, epossystem
Published: 2021-04-07 13:08:36

SWSystems UK is an industry-leading provider of traditional till style hardware and <a href="https://www.southwestsystemsuk.com/">EPOS software</a>. The company specializes in point of sale solutions for the retail and hospitality sectors and offers powerful software with industry-specific features. A one-stop shop for all things EPOS, SWSystems UK can provide everything you need to get started — cash drawers, receipt printers, touchscreens, scanners, they do the lot. That's why we think theirs is the best EPOS system UK businesses can buy.


Pros:

- The UK’s largest EPOS supplier
- 5-star customer rating
- Transparent pricing
- Integrated with Order & Pay partner

Cons:

- Nothing
How to pass data from child to parent in vue js
Tags: vue, javascript, html
Published: 2021-04-07 13:05:44



In this article I will show you how to pass data from child to parent in vue.
We know that if we want to send data from parent to child we can use props but for the reverse case we have to use a different approach to achieve this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcq39r6izt0z4brrhb7s.png)
  

 **App.vue**
```js
<template>

  <h1>{{ title }}</h1>

  <Child @changeTitle="ChangeT($event)" />
  
</template>
<script>
import Child from "./components/Child"
export default{
name:'App',
components: {
    Child,
},
data()
{
   return{
     title:'Rick Grimes'
         }
},
methods:{
    ChangeT(title)
    {
      this.title=title;
    },
}
</script>
<style></style>
```

**Child.vue**
```js
<template lang="html">
  <button type="button" @click='passEvent'> Update me</button>
</template>

<script>
export default {
  name:'Child',
  methods:{
    passEvent()
    {
      this.$emit('changeTitle','Awesome ')
    }
  }
}
</script>

<style lang="css" scoped>
</style>
```
In child.vue we are using a method named **$emit** this method takes 2 arguments first the custom event and the second is the data we are passing


1. `changeTitle` is the custom event
2. `'Awesome'` is the data we are passing to parent

in **App.vue** we are calling a method named `'ChangeT($event)'` on the event `'changeTitle'` (it is custom event you can name as your preferences)

when the `ChangeT` function called it takes the parameter which we are passing from child in this case `$event='Awesome'`

then we are simply changes the data value with this `$event` value 

Now we have successfully passed data from child to parent in vue
Dev-to-Dev Conversation
Tags: ai, react, programming, machinelearning
Published: 2021-04-07 13:03:31

We’ve met @Prathkum for a dev-to-dev conversation with Yotam Shinan, and learned some new #reactjs tricks. Join them in this session, and then post your own React App in the comments!
{% youtube Ml0ezY2uBIs %}
Persistence Part 2: ORM
Published: 2021-04-07 13:01:11

## 1. Setting Up Hibernate ORM

{% youtube WcIye84WvTE %}

#### Snippets and Commands
`build.gradle`
```groovy
plugins {
    id 'org.springframework.boot' version '2.4.4'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    runtimeOnly 'org.postgresql:postgresql'
}
```

`src/main/resources/application.properties`
```properties
# Which type of database
spring.jpa.database=POSTGRESQL

# The database url containing the domain it is hosted on, port number, and database name
spring.datasource.url=jdbc:postgresql://localhost:5431/demo

spring.datasource.username=demo_user
spring.datasource.password=demo_pass

# Show executed sql code in the logs
spring.jpa.show-sql=true

# Generate database schema automatically on start
spring.jpa.generate-ddl=true

# Will drop any current schema and create a new one
spring.jpa.hibernate.ddl-auto=create
```

[Github Repo Tag](https://github.com/softwaredevacademy/spring-web-app-demo/releases/tag/jpa-database)

## 2. Mapping Class to Database with Hibernate ORM

{% youtube Z0Riq5gxbQ4 %}

[GitHub Repo Tag](https://github.com/softwaredevacademy/spring-web-app-demo/releases/tag/intro-to-orm)

<hr>
<p style="align: center;"> <span> <a href="https://dev.to/softwaredevacademy/persistence-database-29gg">Previous article</a> | </span>
<span> <a href="https://dev.to/softwaredevacademy/request-response-part-2-http-the-crud-controller-213d"> Next article </a> </span>
IR35 The Death Of Contracting???
Tags: webdev, 100daysofcode, beginners, career
Published: 2021-04-07 12:55:15

IR35 is a word used to describe tax legislation designed to combat tax avoidance.

If you are a contractor or someone looking to get into contracting you might be wondering, is contracting dead??? should everyone be looking be become employed instead?

In this video, I am going to talk about IR35 and how it affects programmers especially contractors such as myself.

{% youtube n9JWPkkBcIg %}

Please subscribe on YouTube if you like this sort of content:
[IR35 The Death Of Contracting???](https://youtu.be/n9JWPkkBcIg?sub_confirmation=1)
The glyph sign |
Published: 2021-04-07 12:49:15

The glyph sign | is so popular on the web. Previously web designers, developers, writers, etc. liked to use - or –. Everyone uses | now. This looks a little primitive, and also smart. It quickly divides one subject of another and keeps subjects connected. Any thought on why it's so popular on the web? [Read on my blog](https://ieffe.art.blog/2020/10/29/glyph/)
Tools to ensure code quality
Tags: javascript, node, react
Published: 2021-04-07 12:47:58

If you are concerned about the quality of your codebase and you are not using automated tools to validate, format and test your code this post is for you.

## Prettier

https://github.com/prettier/prettier

Prettier is a code formatter that will keep the code updated and ensuring a consistent style. Very useful in collaborative projects. Just `npm install -D prettier` and add a file `.prettierrc` to configure it. For example:

```json
{
  "trailingComma": "none",
  "semi": true,
  "singleQuote": true,
  "printWidth": 120
}
```

## ESLint

https://github.com/eslint/eslint

Using ESLint in a javascript project is a *MUST*. Just `npm install -D eslint` and add a file `.eslintrc` to configure it. For example, for a Typescript project:

```json
{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "no-console": "error",
    "prefer-object-spread": 0,
    "class-methods-use-this": 0,
    "max-len": ["warn", { "code": 120, "ignoreComments": true }]},
  "ignorePatterns": ["coverage", "dist"],
  "extends": [
    "eslint:recommended",
    "prettier"
  ]
}
```

Prettier can format multiple file types as JSON or Markdown (specially useful for tables) 

## Lint Staged

https://github.com/okonet/lint-staged

Lint Staged allows you to run commands only on git staged files, speeding up the validation/formatting processes. Just `npm install -D lint-staged` and add a `.lintstagedrc` file to configure it. For example, for a Typescript project:

```json
{
  "*.ts": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{md, json}": [
    "prettier --write"
  ],
}
```

## The orchestrator

https://github.com/typicode/husky

Husky is a tool to manage git hooks. It abstracts their complexity and make them really easy to use.


The installation process is very easy and explained in the README.md of the project.

Just add the name of the hooks (https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) as a script and put the commands you want to run before the git command completes. For example, for a `pre-commit` hook, create a `pre-commit` file inside the `.husky` directory:

```shell
#!/bin/sh
. "$(dirname $0)/_/husky.sh"

npx tsc --noemit && npx eslint --ext .ts .
npx lint-staged
npm run test
# Whatever command you want to run
```

## Conclusion

All this tools working together ensure that you don't commit mistakes and that the style is consistent among all developers.

## Bonus track

https://github.com/brightcove/kacl

Keep A Change Log is a tool for keeping your changelog up to date with your `package.json` version using semantic versioning. It updated and lints the `CHANGELOG.md` file.
Cypress Installation & Setup
Tags: testing, javascript, webdev, tutorial
Published: 2021-04-07 12:37:55

In this Cypress testing tutorial, we will be doing the setup and installation on our local machine to get Cypress up and running. 
One of the great things about Cypress is that using just one command you can get all the necessary packages installed to start writing your first test using Cypress. Let’s take a look at that –

### Installation
To install Cypress locally, you need to run through the following steps –

- **Create a new npm project:**
`mkdir your_project_name && cd your_project_name`
`npm init -y to initialize your project`

- **Install Cypress:**
`npm install cypress --save-dev`

This will download and unzip the Cypress desktop client and install all the necessary packages for you.

![Opening Cypress Desktop App](https://automationbro.com/wp-content/uploads/2021/04/Screen-Shot-2021-04-05-at-4.11.27-AM.png)

Once Cypress is installed, you can open the Cypress desktop app by running the following command –

`npx cypress open`

This will open up the Cypress app for you and list all the initial pre-built tests –

---

### Run tests in Cypress Test Runner

Click on any of the pre-built example tests and it will launch up the Cypress Test Runner and start running all the tests –

![Cypress Test Runner](https://automationbro.com/wp-content/uploads/2021/04/cypress_runner.gif)

---

### Cypress Folder Structure
When you install Cypress, it will setup the folder structure for you automatically –

- **Fixtures**: used to store all the external static data for your tests i.e. JSON data files, images, etc…
- **Integration**: this is where all your test files are stored
- **Plugins**: You can extend Cypress functionalities by taking advantage of Cypress built as well as community-built plugins
- **Support**: In the support folder, you can store custom commands which can be utilized by your tests
- **Cypress.json**: this is the default configuration file where you can store information such as baseUrl, env, port, etc…

![Folder Structure](https://automationbro.com/wp-content/uploads/2021/04/Screen-Shot-2021-04-05-at-4.20.38-AM.png)

---

#### Check out the video below to see how to Setup & Install Cypress in your local machine –

{% youtube YZTrD9CSuuc %}

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 

👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Daily UI :: 001 - Sign Up Page
Tags: ux, ui, design, webdev
Published: 2021-04-07 12:34:48

I completed the first of Daily UI's 100 day design challenge. Here's what I did, how I did it, my thoughts from the first day, and I already strongly recommend doing it!

# The challenge:
Design A Sign Up Page.

I began by doing a little research on the internet to gain inspiration. After a few minutes of doing so, I had a couple ideas. For this first day I decided to do two different 'takes' on a sign up page. The first being a modern, minimalistic sign up page for a mobile app. The second also being a modern and minimalistic sign up form but for a website. 

## Take 1:
![Daily UI :: 001 Take 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn9o4thp8uiydds1c37b.png)[Daily UI ::001 - Sign Up Page; Take 1 - Bēhance](https://www.behance.net/gallery/116951867/Daily-UI-001-Sign-Up-Page-Take-1)
[Daily UI ::001 - Sign Up Page; Take 1 - Dribble](https://dribbble.com/shots/15431498-Daily-UI-001-Sign-Up-Page-Take-1)

For this first take I wanted to give designing a sign up form for a mobile app a shot. I'm pretty satisfied with it currently, though there is room for improvement so I'll definitely return to this first take and update it a bit later on. 

The first of the two pages, the "Intro Screen" is the welcome/introduction to the app. The page is very basic in the sense that besides the welcome text, it only features a "Create Account" button. 

Moving to the "Sign Up Form" page, the page viewed after pushing the Create Account button, it features the actual form where users can choose to create an account with the app, or create one using their Apple or Google account. Once they've filled out their information using any of the sign up options, pushing the sign up button will transport the user straight into the app.


## Take 2:
![Daily UI :: 001 Take 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc79ztap1cfsucbrrp4m.png)[Daily UI ::001 - Sign Up Page; Take 1 - Bēhance](https://www.behance.net/gallery/116957689/Daily-UI-001-Sign-Up-Page-Take-2)
[Daily UI ::001 - Sign Up Page; Take 1 - Dribble](https://dribbble.com/shots/15431516-Daily-UI-001-Sign-Up-Page-Take-2)

For the second take I decided to go with a sign up page for a desktop website. I began with a simple split screen design I've seen countless times on various, popular websites. This sign up form doesn't feature a sign up with apple or google button because I thought it would be more fitting just to have the user create an account directly. It's followed by two check boxes for auto sign up to newsletter, and a select box for accepting terms and conditions. 

As for the color and concept of developers who love salads, it's very random and wasn't my original intention but I thought why not add a bit of humor to liven up the project!

As always, thanks for reading, and consider following me on Dribbble and or Bēhance to stay up to date on each project I complete!

## The Next Project: Credit Card Checkout Page.
2021 Best GW16 Heart Rate Monitor Blood Pressure Smart Watch in Pakistan - Sadabahaar
Tags: smartwatches
Published: 2021-04-07 12:31:33

GW16 Smartwatch Heart Rate Monitor Blood Pressure Sleep Monitoring Incoming Call Weather Display Android IOS

Description:
GW16 Smartwatch Heart Rate Monitor Blood Pressure Sleep Monitoring Incoming Call Weather Display Android IOS –

Detail:

 Specification
· Waterproof IP68
· Thermometer Support
· Heart Rate Monitor Support
· Blood Pressure Monitor Support
· Blood Oxygen Monitor Support
· Step Count Support
· Multi-Sport Modes Support
· Pedometer Support
· Call Or Message Reminder Support
· Reject Call /
· Call ID Display
· Screen Size: 1.28inch
· Type: IPS
· Resolution: 240*240pixels
· Battery Battery Capacity: 220mAh
· Standby Time: About 10 Days
· Using Time: About 5 Days
· Charging Time: About 2 Hours

Package Includes
1*GW16 Smart Watch
1*Charging Cable
1*User Manual
Weight: 0.50 KGs

Phone: +92 334 9471888
971-999-9293
Sadabahaar.pk@gmail.com

https://sadabahaar.pk/shop/smart-watch/smart-watches-smart-watch/gw16-smartwatch-heart-rate-monitor-blood-pressure/

https://sadabahaarsmartwatches.blogspot.com/2021/04/sadabahaar.html
How to set up Tailwindcss (jit) with the new Svelte kit
Tags: svelte, tailwindcss
Published: 2021-04-07 12:18:15

Svelte kit and the new Tailwindcss just-in-time compiler just got released. Here's a super quick rundown on how to set them up (updated for tailwind 2.1 on the 8/4/2021):

> Remember: Svelte config files need to use the `cjs` extension instead of `js`

### Step 1: Set up the project

```bash
mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer
```

### Step 2: postcss

Create a `postcss.config.cjs` file. Svelte 3 is bundled by Vite which comes with postcss support out of the box.

```js
module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}
```

### Step 3: tailwind config

Create a `tailwind.config.cjs` file to enable the just-in-time compiler and add the correct paths to be purged. You can also run `npx tailwind init`

```js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.svelte'],
}
```

### Step 4: create and import the css file

Add these taggs somewhere in your css so that postcss knows where to insert the tailwind styles. A good place to import these is the `$layout.svelte` file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

And there you go. If you have any issues you can [check out the finished example on github](https://github.com/jescowuester/svelte-kit-with-tailwind-jit-example) or shoot me a dm on twitter.
Presenting our EuroPython 2021 logo
Tags: europython, logo
Published: 2021-04-07 12:01:06

###### (Original post: https://blog.europython.eu/presenting-our-europython-2020-logo)

Over the last couple of weeks, we have worked with our designer [Jessica Peña](http://simetriko.com/) to come up with a logo which reflects both our desire to come together online during the pandemic and shows how well our community is interconnected around the world.

Here's our brand new logo for [EuroPython 2021 Online](https://ep2021.europython.eu/):

![ep2021-logo-1024px](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e2nxfiv1xpfstdg9o7s.png)
 
Hope you like it 😃

We will soon make EuroPython 2021 merchandise available with the new logo in [our EuroPython merch shop](https://shop.spreadshirt.ie/europython/), so you can order t-shirts, sweatshirts, caps and mugs to show your support and love for the conference.

Enjoy,
EuroPython 2021 Team
EuroPython Society
https://www.europython-society.org/
Daily Developer Jokes - Wednesday, Apr 7, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-07 12:00:15

---
title: "Daily Developer Jokes - Wednesday, Apr 7, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Apr%207%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258c00f974.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What does a baby computer call his father?

___A:___ Data!
 -->