teleren/devto huggingface dataset:
How to Protect Yourself Against Phishing Pages ?
Tags: cybersecurity, phishing, programming, webdev
Published: 2021-08-22 02:58:47

phishing is an equal opportunity threat, capable of showing up on desktops, laptops, tablets, and smartphones. Most Internet browsers have ways to check if a link is safe, but the first line of defence against phishing is your judgement. 

Train yourself to recognize the signs of phishing and try to practice safe computing whenever you check your email, read Facebook posts, or play your favourite online game.

Once again, here are a few of the most important practices to keep you safe:

• Don't open e-mails from senders you are not familiar with.

• Don't ever click on a link inside of an e-mail unless you know exactly where it is going.

• To layer that protection, if you get an e-mail from a source you are unsure of, navigate to the provided link manually by entering the legitimate website address into your browser.

• Lookout for the digital certificate of a website.

• If you are asked to provide sensitive information, check that the URL of the page starts with “HTTPS” instead of just “HTTP.” The “S” stands for “secure.”It's not a guarantee that a site is legitimate, but most legitimate sites use HTTPS because it's more secure. HTTP sites, even legitimate ones, are vulnerable to hackers.

• If you suspect an e-mail isn't legitimate, take a name or some text from the message and put it into a search engine to see if any known phishing attacks exist using the same methods.

• Mouse over the link to see if it's a legitimate link.

As always, we recommend using some sort of anti-malware security software. Most cybersecurity tools can detect when a link or an attachment isn't what it seems, so even if you fall for a clever phishing attempt, you won't end up sharing your info with the wrong people.

All Malwarebytes premium security products provide robust protection against phishing. They can detect fraudulent sites and stop you from opening them, even if you're convinced they're legitimate. You can even try Malwarebytes free before you buy. 

So stay vigilant, take precautions, and look out for anything phishy.

Ask Cyber Security related question on
https://discourse.heeraj.com/

Join my telegram Group to know about latest Ethical hacking news and tools more than 300 members I have big plans for you .....
Join Now
https://t.me/infosecbugbounty
Create dynamic and content rich presentations in Jupyter
Tags: jupyter, python, productivity, showdev
Published: 2021-08-22 01:36:12


Jupyter is an effective tool for data analysis whether it is classic notebook, lab, or notebooks in popular text editors like VS code. You do analysis but when it comes to presenting your results, most of the time you need to move out of the ecosystem.  Currently there are many tools to present your analysis to non-technical people without showing code cells including voila, reveal slides etc. These tools present either static html or slides of plain cell outputs, so you do not have a fine grain control over content. Facing all such difficulties, I decided to leverage the IPython's rich content capabilities for creating presentation without leaving notebook. The resultant package [ipyslides](https://github.com/massgh/ipyslides) is in active development and can use every kind of content from widgets, audio, video, HTML etc. Without more intro, let's dig into code a little bit. 
## Install
The most preferred environment is jupyterlab, so after having that installed, you can do
```python
pip install ipyslides
```
## Usage
You can start creating presentation like this:
```python
import ipyslides as isd 
slides = isd.Slides()
```
```python
%%slide 0 -m
# Title Markdown
```
```python
%%slide 1 # Can also use with slides.build(1):or build(-1) syntax
slides.write('# Slide Title')
slides.write('## Column 1',"## Column 2")
```
Below slide will give same result as above:
```python
%%slide 1 -m
# Slide Title
||## Column 1 || ## Column 2 ||
```
Both `%%slide` and `with Slides.build` save results to IPython's capture mechanism. There is another way where you can add slide frames:
```python
%%slide -1
for obj in Slides.fsep.loop([1,2,3]): 
    slides.write(f'## Dynamic Slide ${obj}^2 = {obj**2}$'))
```
This will create three frames. 
Now let's create multiple slides from single cell using context manager:
```python
import matplotlib.pyplot as plt, numpy as np
for i in range(5):
    with slides.build(i+5) as s:
        x = np.linspace(0,i+1,50+10*i)
        _ = plt.plot(x,np.sin(x))
        slides.write(slides.plt2html(),f'#### Slide {i+5} but I am {i+1} of 5 other slides created from single cell\n{s.get_source()}')
```

## Show Slides
`slides` object at end of cell automatically displays itself, you can also do this explicitly:
```python
slides.show()
``` 

![Slides](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29bmx6x4qssqjia62veq.png)

You have `write` command to write Markdown, HTML and plots after using `plt2html` and `plotly2html`. You can extend to other plotting libraries, or you can simply use native commands like `plt.show`, `fig.show` etc. 

You can see comprehensive demo at [Binder](https://mybinder.org/v2/gh/massgh/ipyslides/HEAD?labpath=demo.ipynb) where rich content like YouTube video, tables, graphs, widgets are embedded.
How to create a reassignable variable in JavaScript?
Tags: javascript
Published: 2021-08-22 00:00:00

---
  title: How to create a reassignable variable in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Aug 22 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-reassignable-variable-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-900a7728dad5b48bb497d6142380d27f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-reassignable-variable-javascript)
  
To create a reassignable variable, we can use the `let` keyword followed by the name we need to call the variable in JavaScript.

### TL;DR

```js
// Create a reassignable variable
let name = "John Doe";

console.log("Here the value is: ", name); // Here the value is: John Doe

// change the value of the variable name
// again to the value of `Lily Roy`
name = "Lily Roy";

console.log("Here the value is: ", name); // Here the value is: Lily Roy
```

For example, let's say we have a value called `John Doe` and we want to create a variable called `name` to store this.

To do that we can use the `let` keyword followed by the name we need to call the variable, then the `assignment operator` (or equal sign) and finally the value to be assigned to that variable in our case it is `John Doe`.

It can be done like this,

```js
// Create a reassignable variable
let name = "John Doe";
```

By reassignable, we mean that the value of `John Doe` can be changed to anything other value during the runtime of the program.

For example, Later if we want to change the name to `Lily Roy` all we have to do is use the variable name then use the `assignment` operator followed by the new value. It can be done like this,

```js
// Create a reassignable variable
let name = "John Doe";

// change the value of the variable name
// to the value of `Lily Roy`
name = "Lily Roy";
```

To understand the process let's log the variable value after each assignment using the `console.log()` method like this,

```js
// Create a reassignable variable
let name = "John Doe";

console.log("Here the value is: ", name); // Here the value is: John Doe

// change the value of the variable name
// again to the value of `Lily Roy`
name = "Lily Roy";

console.log("Here the value is: ", name); // Here the value is: Lily Roy
```

See the above code live in [JSBin](https://jsbin.com/guxonizube/2/edit?js,console).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
New Videos Covering Vue 3.2
Published: 2021-09-19 20:03:01

---
title: New Videos Covering Vue 3.2
published: true
date: 2021-08-22 00:00:00 UTC
tags: 
canonical_url: https://wildermuth.com/2021/08/22/New-Videos-Covering-Vue-3-2/
---

I’m finally finishing up my studio/office in the house. With that, I’m getting back to making my “Coding Shorts” videos. If you’re enjoying them, please let me know.

Up next for the series, I’ve recently released a couple of shorts on features in the new Vue 3.2 release. These include:

### Vue 3.2 Features: Setup Script (including experimental $ref support)

<iframe src="https://www.youtube.com/embed/NZ08Epp4vD4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

### Vue 3.2 Features: Style Binding

<iframe src="https://www.youtube.com/embed/cAPkTM4sJzE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

I hope you enjoy these videos. If you like them, don’t forget to subscribe to be notified of new videos!

[Subscribe to my YouTube Channel](https://www.youtube.com/c/swildermuth)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/shawnwildermuth/~4/MTACdGW_A3Y)
Windows Terminal Preview Context Menu
Tags: wsl, contextmenu, windows, terminal
Published: 2021-08-21 23:11:02

If you use multiple Linux WSL, you can enhance your productivity with this tool.

### Install

1. Clone this repo
   `git clone https://github.com/rescenic/wt.context.menu`
2. Configure your settings.json in Windows Terminal Preview folder & config.json
   `C:\Users\%USERNAME%\AppData\Local\Packages\Microsoft.WindowsTerminalPreview_8wekyb3d8bbwe\LocalState\settings.json`
   ![wt.2](https://raw.githubusercontent.com/rescenic/wt.context.menu/master/1-configure.png)
3. Copy folder `icons` to `C:\Users\%USERNAME%\AppData\Local\Packages\Microsoft.WindowsTerminalPreview_8wekyb3d8bbwe\LocalState\icons\`
4. Run powershell (no need to get admin access right)
5. Change the execution policy `Set-ExecutionPolicy Unrestricted -scope CurrentUser`
6. Run `SetupContextMenu.ps1` script
   ![wt.3](https://raw.githubusercontent.com/rescenic/wt.context.menu/master/2-install.png)
   ![wt.4](https://raw.githubusercontent.com/rescenic/wt.context.menu/master/4-compare.png)
   ![wt.5](https://raw.githubusercontent.com/rescenic/wt.context.menu/master/5-wtpreview.png)

### Uninstall

Run `SetupContextMenu.ps1 -uninstall:$true`

### Config

This script will parse the `settings.json` file to generate menu items. However you can customize it.  
Put any icon file into `icon` folder and modify the `config.json` like the following.

```json
{
    "global": {
        "extended": false
    },
    "profiles": {
        "{a5a97cb8-8961-5535-816d-772efe0c6a3f}": {
            "icon": "arch.ico",
            "label": "Arch Linux"
        },
        "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}": {
            "showRunAs": true
        },
        "{b453ae62-4e3d-5e58-b989-0a998ec441b8}": {
            "hidden": true
        }
    }
}
```

**Config reference**

-   global
    -   extended[bool]: if set this to true, context menu will only show up when right click with `shift`
-   profiles
    -   guid[string]: this GUID of your profile defined in `settings.json`
        -   hidden[bool]: overwrites the visibility of the profile, if defined
        -   icon[string]: filename of your ico file, **you must put this file in icon folder**
        -   label[string]: context menu label
        -   showRunAs[bool]: add `run as administrator` item for this profile
Property Testing
Tags: javascript, testing
Published: 2021-08-21 23:08:43

---
title: Property Testing
published: true
description: Overview of what it is, what it's used for, and how you do do it. 
tags: javascript,testing
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxfzb379xmqqnly1oxx3.jpg
---

{% youtube 8Hzfngj6trQ %}
What is static and non-static in OOP?
Tags: oop, java, static, nonstatic
Published: 2021-08-21 22:34:51

Object Oriented Programming is all about classes and objects. We first create a class in which we specify two things:

 1. data (variables). We use it for storing data
 2. behaviors (functions). We use it for manipulating/retrieving the variables.

We then create object of a class by using the `new` keyword. 

The variables or behaviors can either be accessed at __*class level*__ or __*object level*__. 
The class level access means that we can directly access them using the class name. For example:
```java

 int maxRoomInHouse = House.MAX_ROOMS;

```
The object level means that we can only access them using the object of the class. The object level access is the default access of variables or functions unless we specify `static`.


```java

House myHouse = new House();
int floors = myHouse.getNumberOfFloors();

```

We can make a function or variable to be accessed at class level by specifying `static`. We don't need to create an object to access static variables or functions. 

### When to use static and non-static?

We should use `static` variables or functions wherever we need global common variable or behavior across all the objects of the class. For example, in our house example, the `House.MAX_FLOORS` is the common field that we will be same for all objects of the House class, and same goes for `House.getMaxFloors()` function.

We should not specify variable or function static whenever the function or variables belongs to each individual object. For example, in `myHouse.getNumberOfFloors()` is basically specifying how many floors does `myHouse` object has?
4 useful react npm packages for beginners
Tags: react, webdev, beginners
Published: 2021-08-21 21:22:30

Hey guys so this is gonna be a brief one where we'll talk about npm packages that I found very useful  while learning react. Here they are 🔽🔽🔽.

## TLDR 😉

- [AOS](https://michalsnik.github.io/aos/)  for animations

- [SVG-loaders-react](https://www.npmjs.com/package/svg-loaders-react?activeTab=readme) for loading overlays

- [Material-ui/core](https://material-ui.com/) for styling

- [Material-ui/icons](https://material-ui.com/components/material-icons/) for icons


## Reasons to use 📝


### AOS 

Finding out about the Animate On Scroll library was something I was really grateful for, I had previously used  libraries that required forward ref and some ground work to get them working but with this, it was quite simple: 

- npm install the package:
  ```
  npm install aos --save
  ``` 
- Initialise in the app.js: 
  ```
  AOS.init();
  ``` 
- That's it, you can add any  of the popular animations they support:
  ```
  <div data-aos="fade-left">
  // content you want to fade from the left
  </div
  ``` 

### SVG-loaders-react

Add a loader when a process is being carried out in your app is something small but adds a ton to your overall  your experience. This library provides easy and intuitive svg loaders  for your React app:

- npm install the package :
```
npm i svg-loaders-react
``` 
- Import and use any of the number of loaders they provide:
  ```
    import { Bars } from 'svg-loaders-react'

    //used like this 
    <Bars/>

    //more components can be found on the npm site
  ``` 

###  Material-UI  Core & Icons

Now I know most of us have heard and even used this but I wanna bring it up again because of how useful and easy to use I find it.

The functionalities they provide are very intuitive, responsive and quick to pick up. The documentation is also very wonderful and easy to follow.

For installation and use click the flag [⛳](https://material-ui.com/)


## Conclusion
So those are some nice packages I use very frequently that make things a bit easier during development. Anyway, have a great one 👋


![end giph](https://media.giphy.com/media/YybKRCSHL1OBW/giphy.gif?cid=ecf05e4740hfcvtqhnewl301o1hfip4rjr9ym6yydwd5u77n&rid=giphy.gif&ct=g)
What is a system bug?
Tags: agile, projectmanagement, featuregaporbug
Published: 2021-08-21 20:35:41


###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

You should stop putting all the not perfect behaviour of your system in the bug basket.

Is essential to understand that not every defect in the system should be classified as a bug; it could be called a feature gap, edge case issue or inconsistency.

Imagine that all buttons submit in an e-commerce are blue, would you call a yellow submit button as a bug?

What is a bug then?
Some people would say that bug is anything that threatens the quality.

When I am managing software projects, I prefer to define bug as the failures or crashes of the user-facing system.

Better defect labelling will help the team prioritise what makes the most impact on the business.
How to document software
Tags: agile, documentation, projectmanagement
Published: 2021-08-21 20:32:05

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

Why do people mistakenly think that documentation is a critical success factor in software development?

Documentation should be concise: overviews/roadmaps/high-level diagram/guidelines are generally preferred over detailed documentation.

Never forget that developers rarely trust documentation, particularly detailed documentation because it's usually out of sync with the code.

You should understand the total cost of ownership for a document, and someone must explicitly choose to make that investment.

Ask whether you NEED the documentation, not whether you want it there as a security blanket

We certainly don’t need "just in case" documentation. We need just enough documentation to make sure the team is successful.

Your team's primary goal is to develop software; its secondary goal is to enable your next effort.

Documentation is a necessary evil; the project cannot survive without it. For this reason, we need to find ways to do just enough documentation — no more, no less.

Your team should classify the code as a major, if not the primary documentation of the software.

The rationale for the code being the primary source of documentation is that it is the only one that is sufficiently detailed and precise to act in that role.

## Collaborative documentation
Collaborative documentation breaks away from the static nature of traditional docs. It's user-friendly, and, most importantly, interactive. 

When a user encounters an issue or finds something lacking in the documentation, they don't have to wait for an official update. Instead, they can immediately add comments, suggest edits, or even directly modify the content. This not only ensures that the documentation is more accurate but also enriches it with diverse perspectives and real-world usage scenarios.

Confluence can be a great tool for collaborative documentation.
Training a simple Neural Network in a Spreadsheet
Tags: machinelearning, beginners, neuralnetworks, tutorial
Published: 2021-08-21 20:20:59

---
title: Training a simple Neural Network in a Spreadsheet
published: true
description: A post about a recently made video in which viewers learn how to make and train a neural network in a spreadsheet

tags: machinelearning, beginners, neuralnetworks, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiumge7e5qy1pgagtnhw.png
---

For [SOME1](https://www.3blue1brown.com/blog/some1), I made [a video series](https://www.youtube.com/watch?v=fjfZZ6S1ad4) that walks the viewer through making a few different neural networks in a spreadsheet.

Why a spreadsheet? I find it easier to reason about how all the steps and equations fit together when you can see them all at once and a spreadsheet is a good mechanism for that.

![A picture of a filled out spreadsheet neural network. The AND function is in the process of being trained to a single layer neural network.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16ezdncyxtqddwxueou2.png)

The functions learned aren't particularly complex: the series covers the AND function, the XOR function, and then a 1 bit half-adder. However, these functions are easy to visualize in 3D (and Bubble charts) and can help explain why hidden layers are necessary.

[Part 1](https://www.youtube.com/watch?v=fjfZZ6S1ad4) is available now. Part 2, which covers deep neural networks, should be out soon.
How to draw architecture diagrams? | tools and standards for architecture diagrams?
Tags: architecture
Published: 2021-08-21 20:10:22

When we look at various architecture diagrams we understand it's not random. There are few basic building blocks and notations. Here we will see what technical ways and standards are there to draw architecture diagrams. What tools are available to draw those diagrams. First we will understand what are the language or standards architects use. They are UML, BPMN, EPC etc.

#### UML
The Unified Modelling Language is a graphical language for visualization, construction and documentation of the artifacts of software systems. UML has emerged as the software industry's dominant modelling language. What is an artifact? An artifact could be anything depending on the scenario and level of abstraction and communication partners and what you want to convey. For example, it could be a high level component or block diagram that describes what are the main components involved or it could be a sequence diagram that describes to the developers how request response works among different internal and external services of the software system.

#### BPMN
Business Process Model and Notation (BPMN) is a graphical representation to specify business processes in a business process model. Business Process Management Initiative (BPMI) developed BPMN, and currently maintained by the Object Management Group since the two organizations merged in 2005.

#### Event-Process-Chains (EPC)
Event Process Chains are charters to draw the flows of business processes. We can draw various complex workflows of an enterprise and automate them. The flows are event driven. Many companies use EPC to model and optimize their business processes. For example employee payroll management, employee leave request management, material procurement process just to name a few.

UML is used to do architecture modelling for software products and systems. UML diagrams can be divided into a few diagram types.


### UML Diagram Types
Block Diagram
Component Diagram
Class Diagram
Package Diagram
Activity Diagram
Sequence Diagram
State Diagram
Use Case Diagram

Read more [here](https://www.cloudnativemaster.com/post/how-to-draw-architecture-diagrams-what-tools-and-standards-are-used-to-draw-architecture-diagrams)