teleren/devto huggingface dataset:
Flowgraphic: Get Notified in Slack When a User Is Suspended
Tags: nocode
Published: 2021-10-20 04:43:50

---
title: Flowgraphic: Get Notified in Slack When a User Is Suspended
published: true
date: 2021-10-17 21:58:23 UTC
tags: NoCode
canonical_url: https://maxkatz.org/2021/10/17/flowgraphic-get-notified-in-slack-when-a-user-is-suspended/
---

This automation flow sends a message to a Slack channel when a user get suspended in your Okta organization.

[![Get notified in Slack when a user is suspended in an organization](https://katzmax.files.wordpress.com/2021/10/flowgraphic_suspend_slack.png?w=1024)](https://katzmax.files.wordpress.com/2021/10/flowgraphic_suspend_slack.png)<figcaption>Get notified in Slack when a user is suspended in an organization</figcaption>

The automation consists of the following cards (steps):

1. The flow is triggered when a user is suspended in Okta ( **User Suspended** card).
2. **Compose** card creates a text message using data mapped from **User Suspended** card.
3. Message is passed to **Send Message to Channel** card which sends the message to a Slack channel.

[![User suspended message in Slack](https://katzmax.files.wordpress.com/2021/10/flowgraphic_suspend_slack_msg.png?w=1024)](https://katzmax.files.wordpress.com/2021/10/flowgraphic_suspend_slack_msg.png)<figcaption>User suspended message in Slack</figcaption>

To learn more about Workflows, [try these tutorials](https://help.okta.com/wf/en-us/Content/Topics/Workflows/Tutorials/tutorials-workflows-learn.htm).
Py3 101: Getting started with python3.
Tags: python, beginners, devops, programming
Published: 2021-10-17 21:55:37

##Python.
Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its use of significant indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.

## Why python.
* It is very simple to use and implement. 
* It is open source and has a very big community of developers.
* Object-oriented and functional programming. 
* A lot of applications.

## Installing python. 
The installation procedure involves downloading the official Python .exe installer and running it on your system.
The version you need depends on what you want to do in Python.
Open your web browser and navigate to the Downloads for Windows section of the official [Python website](https://www.python.org/).
Search for your desired version of Python. At the time of publishing this article, the latest Python 3 release is version 3.10.0, while the latest Python 2 release is version 2.7.16.
Select a link to download either the Windows x86-64 executable installer or Windows x86 executable installer.
![Python downloading](https://www.ics.uci.edu/~pattis/common/handouts/pythoneclipsejava/images/python/pythondownloadpage.jpg).

Run the Python Installer once downloaded. 
Make sure you select the Install launcher for all users and Add Python 3.7 to PATH checkboxes. The latter places the interpreter in the execution path. .
Select Install Now – the recommended installation options.
![Python installing](https://www.ics.uci.edu/~pattis/common/handouts/pythoneclipsejava/images/python/pythonsetup.jpg).

For all recent versions of Python, the recommended installation options include Pip and IDLE. Older versions might not include such additional features.
The next dialog will prompt you to select whether to Disable path length limit. Choosing this option will allow Python to bypass the 260-character MAX_PATH limit. Effectively, it will enable Python to use long path names.

####Checking if python and pip was installed.
Pip is a powerful package management system for Python software packages. Thus, make sure that you have it installed.

To verify whether Pip was installed:

Open the Start menu and type "cmd."
Select the Command Prompt application.
Enter pip -V in the console. If Pip was installed successfully, you should see the following output:
```cmd
pip -v
```
![pip -v](https://www.shaileshjha.com/wp-content/uploads/2019/08/pip_version_check.jpg).
Array.prototype.pop(), push(), shift(), and unshift()
Tags: javascript, tutorial, beginners, programming
Published: 2021-10-17 21:26:55

## Introduction

These javascript methods are used to re-arrange an existing array or object in various ways and return a new value. Let's take a look at how each one functions.

### Array.prototype.unshift()

This method adds values that have been input to the *beginning* of an array. It then returns the new array's length. Calling the array afterwords will have the new values shown in the array.

![Example 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffsq2l2texc3vaclu4fo.png)

**unshift()** outputs:
```
5

[ 'flour', 'chocolate', 'eggs', 'butter', 'milk' ]
```

### Array.prototype.shift()

This method takes the first value, also known as the value in the 0th index, and removes it from the array. The other values move down in order to make up for the lost space, and the removed value is then returned to an assigned variable.

![Example 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxiphmw3vksgu2b71d1.png)
 
Note, this method will only work for arrays and objects with two or more values or it will return undefined.

**shift()** outputs
```
[ 'butter', 'milk' ]
eggs
```

### Array.prototype.push()

This method works the exact same way as Array.prototype.unshift() but rather than adding values to the front of the array, it will be added to the end.

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

**push()** outputs
```
5
[ 'eggs', 'butter', 'milk', 'flour', 'chocolate' ]
```

### Array.prototype.pop()

This method also works nearly the exact same as Array.prototype.shift(), but removes and returns the last value instead of the first one.

![Example 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmz36epbkl15z316lcvn.png)

**pop()** outputs
```
[ 'eggs', 'butter' ]
milk
```
Fibonacci Number Using Recursion
Tags: cpp, java, algorithms, recursion
Published: 2021-10-17 21:22:59

> 
In Below code we have used recursion to return Fibonacci number and Fibonacci series.
To run the code [click here.](https://gouravmk.hashnode.dev/fibonacci-number-using-recursion)
 
**Example 1:**<br>
Input :-
```
10
```
Output :-
```
55
``` 
## Code in C++ :-
```
#include <iostream>

using namespace std;
int f(int n){
if(n ==0) return 0;
else if(n ==1 || n == 2) return 1;
else return f(n-2)+ f(n-1);
}
int main() {
  int n;
  cin>>n;
  cout<<n<<"th fibonacci number is "<<f(n)<<"\n";
  /*cout<<"Fibonacci Series till " << n <<"\n";
  for(int i =0 ; i < n ; i++){
      cout<<" "<<f(i);
  }*/
}
```

## Code in Java :-
```
import java.util.*;
public class MyClass {
    public static int f(int n) {
	 if(n == 0) return 0;
	 else if(n == 1 || n ==2) return 1;
	 else return f(n-2) + f(n-1); 	
    }

    public static void main(String[] args)
    {
    	Scanner sc = new Scanner(System.in);
		int n = sc.nextInt();
		System.out.println(n+"th Febonacci number is :- " + f(n));
	/*	for(int i=0; i< n ; i++){    //uncomment to print series
		    System.out.println(" "+f(i));
		} */
		System.out.println("\n Time complexity O(2^n)");
		sc.close();
    }
}
```
**Example 2:**<br>

Input :-
```
15
```
Output :-
```
610
```
Wiggly Lines Canvas
Tags: javascript, canvas, webdev, codepen
Published: 2021-10-17 21:07:39

{% codepen https://codepen.io/ZevanRosser/pen/yLoOeYb default-tab=js,result %}

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

Here is another slightly different version:

{% codepen https://codepen.io/ZevanRosser/pen/xxLVZZJ default-tab=js,result %}



_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Execute quickly with Laravel Tinker
Published: 2021-11-20 11:14:08

---
title: Execute quickly with Laravel Tinker
published: true
date: 2021-10-17 20:56:13 UTC
tags: 
canonical_url: https://adithya.dev/execute-quickly-with-laravel-tinker/
---

Came across this on Twitter today on how to execute quickly with [Laravel Tinker](https://laravel.com/docs/8.x/artisan#tinker). Seemed like a handy script!

> Laravel productivity tip! Add this little function to your bash profile to quickly execute anything with the Tinker command and get the results instantly. [pic.twitter.com/qIB9pQCTWt](https://t.co/qIB9pQCTWt)
> 
> — Philo Hermans (@Philo01) [October 16, 2021](https://twitter.com/Philo01/status/1449386062959284224?ref_src=twsrc%5Etfw)

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Here's the gist of it that you should add to your bash profile

```
function tinker()
{
    if [-z "$1"]
        then
            php artisan tinker
        else
            php artisan tinker --execute="dd($1);"
    fi
}
```

Then on your terminal, you can execute it with the shortcut, instead of `php artisan tinker` and directly as `tinker 'User::first()'`

The author of the tweet also provided this as an explanation:

> When you enter “tinker” it will execute the bash function. If no arguments are given, it will simply run “php artisan tinker”. If you provide any argument, this argument is forwarded as the “execute” parameter for the tinker command. The “dd” fn will prettify the output.
Adding CSS to HTML Lists
Tags: html, css, webdev, beginners
Published: 2021-10-17 20:37:52

CSS properties can control the appearance of HTML elements. Such properties can add backgrounds to parts or to all of your webpage. The CSS properties can put borders around some of your content, or change the style of bullet points. 

If you have a HTML list you want to style with CSS, you can do something like the following:

(HTML code)
`<h1>`Favorite Music Groups`</h1>`
`<ol>`
`<li>`Rascal Flatts`</li>`
`<li>`Little Big Town`</li>`
`li>`Restless Heart`</li>`
`<li>`Little Feat`</li>`
`<li>`The Beatles`</li>`
`<li>`Lady A`</li>`
`</ol>`

It would look like this:

<h1>Favorite Music Groups</h1>
<ol>
<li>Rascal Flatts</li>
<li>Little Big Town</li>
<li>Restless Heart</li>
<li>Little Feat</li>
<li>The Beatles</li>
<li>Lady A</li>
</ol>

Now add CSS.

ol `{
list-style-type: lower-roman;}`

It would look like this:

<h1>Favorite Music Groups</h1>
i. Rascal Flatts
ii. Little Big Town 
iii. Restless Heart
iv. Little Feat
v. The Beatles
vi. Lady A

There are a lot of CSS properties to choose from to change the style of your HTML elements! 

Happy Coding!
Write less, test faster with jest-test-gen
Tags: showdev, javascript, testing, jest
Published: 2021-10-17 19:50:57

Hello everyone 👋

First time posting here in the dev.to community!

# What is jest-test-gen

I wanted to introduce a small cli utility [jest-test-gen](https://www.npmjs.com/package/jest-test-gen) that I wrote to speed up writing Jest unit tests.

Every time I start writing a new test file for my code some initial boilerplate is always required:

* import all the exports from the source file to be tested
* import the external dependencies used in my source file
* setup jest mocks for the dependencies used in the source code
* create tests blocks for every exported function / class method in my source file.

I wanted to automate part of this process by parsing the source file and generating an initial test file containing the initial scaffolding, this way I can quickly start writing the actual logic for my tests.

# How to use it

To generate a test file just install the tool

`npm i -g jest-test-gen`

and invoke it passing the path to your source file as the first argument:

`jest-test-gen ~/demoproject/src/services/myServiceClass.js`

The tool will generate a file named `myServiceClass.generated.test.js` in the same folder.

Try it out and give it a like here or ⭐️ the repo if you find it useful.

You can find the repo here: [jest-test-gen on Github](https://github.com/egm0121/jest-test-gen)
Please, could you review first my first hacktoberfest contribution?
Tags: hacktoberfest
Published: 2021-10-17 19:37:53

Hi,

Here is my first hacktoberfest contribution, https://github.com/TheAlgorithms/Python/pull/5156

It is an algorithm to covert from bin to hex, could you please review it to merge?

Thanks

Cheers,
Francisco Perez
Integrating with Spring Boot
Published: 2021-10-17 19:29:47


Hi, I'm an experienced Java developer, but new to React (and Javascript frameworks in general).  

What is the best way to integrate React and Spring Boot but still make development possible? I'm following a procedure outlined here https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa which essentially copies the contents of the React build directory to the target directory, so that Spring can serve the files at runtime. The React build process combines all of the React js files into several compressed js files. The problem with that is then I see requests such as this: GET /static/js/2.09068613.chunk.js, which makes it difficult to know what's going on.

I can't run the Spring server and react server separately, because I'm using Spring Security, which requires that the user is routed through it.  So localhost:8080, and not localhost:3000

What's the best way to approach this?
Getting started with p5
Tags: javascript, p5, generativeart
Published: 2021-10-17 18:44:39

I used to (and soon will again!) stream music and visuals on Twitch for a program my friend and I hosted called Eastern Bloc Party. We used programs to generate visual effects, and now that I've completed my Flatiron course, I wanted to learn how to use code to generate art. 

There are many resources online decided to generative art. Right now, I am playing a lot with p5. P5 is a JavaScript library for creative coding. 

This is the site: 
https://p5js.org/


How to get started with P5... 

**Step 1. Make an HTML file and link p5, and your own JavaScript file.**
Your HTML file should look something like this: 
```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5</title>
<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
    <script src="src/sinwave2.js"></script>
</body>
</html>
```

**Step 2. Make a canvas in your JS file**
I prefer to use the entire window as my canvas, so I use this, but windowWidth and windowHeight can each be replaced with the number of pixels that you want your canvas size to be: 

```
function setup() {
    createCanvas(windowWidth, windowHeight)
}
```

**Step 3. Start drawing!** 

You would use the draw function for this. 
Some of the fundamental things you would want to play with are strokes and colors for things like background. For example: 

```
function draw() {
  background('darkblue');
  noStroke();
  ellipse(50,50,80,80);
}
```

This will give you a circle. From there, you could change the fill, the size, or make it move!
Just popped in to let you know
Tags: csharp, dotnet, console
Published: 2021-10-17 18:35:41

Hi, 
It's been quite a while since my last post here (and in [my own blog](https://zoharpeled.wordpress.com/), but that's besides the point).

I just popped in to let you know that if you're writing console apps in dot net, you might want to check out my nuget packege [ExtendedConsoe](https://www.nuget.org/packages/ExtendedConsole).
It has a new version (2.0.0) that helps you write things like menus (single or multiple select), use colors, and read user inputs.

Cheers.
Animated Navigation
Tags: beginners, animation, programming, javascript
Published: 2021-10-17 17:57:08

## HTML and Javascript
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Navigation</title>
  </head>
  <body>
    <nav id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
    <script>
        const toggle = document.getElementById('toggle')
        const nav = document.getElementById('nav')

        toggle.addEventListener('click', () => nav.classList.toggle('active'))
    </script>

    <!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui -->
  </body>
</html>
```
## CSS
```css
body {
    background: #9796f0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #fbc7d4, #9796f0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #fbc7d4, #9796f0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100vh;
    float: right;
    font-family: system-ui;
  }
  
  nav {
    background-color: #fff;
    padding: 10px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
    overflow-x: hidden;
  }
  
  nav.active {
    width: 350px;
    padding: 20px
  }
  
  nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
  }
  
  nav.active ul {
    width: 100%;
  }
  
  nav ul li {
    transform: rotateY(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
  }
  
  nav.active ul li {
    opacity: 1;
    transform: rotateY(360deg);
  }
  
  nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
  }
  
  .icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    position: relative;
  }
  
  .icon:focus {
    outline: 0;
  }
  
  .icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 30px;
    transition: transform 0.6s linear;
  }
  
  .icon .line2 {
    margin-top: 10px;
  }
  
  nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
  }
  
  nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
    margin-top: 5px;
  }
```
## Output
![Animated Navigation.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qdpdagq3dawtk4z88j9.gif)

My Blog:- [Beginner Developer Blog](https://beginners-developer.blogspot.com)
Website:- https://ejaazrkhan.github.io/portfolio
Hello Hacktoberfest! :hacktoberfest:
Tags: programming
Published: 2021-10-17 17:56:50

A Beginner Friendly Project in Python!

I'm inviting you all to contribute to Mod-x, which is allowing data scientists to develop and deploy Machine Learning models into production in no time. Issues are open and are also tagged for first commits.

Contributions and Github stars are welcome 
We can have a really quick assign and approval cycle for meaningful contributions (a day max).

-- Mod-x Git (https://github.com/neshadsfz/Modx-)

Most of the issues have a Hacktoberfest ready tags and we're open to any sort of PRs. Inviting you all to help making modx- better! We also got a few new stars so keep being awesome!
We can have a really quick assign and approval cycle for meaningful contributions (12Hour max).
Published: 2021-10-17 17:54:25

 Mod-x Git (https://github.com/neshadsfz/Modx-)
Most of the issues have a Hacktoberfest ready tags and we're open to any sort of PRs. Inviting you all to help making Modx-better! We also got a few new stars so keep being awesome!
DOM (Document object model)
Tags: javascript, dom, html, websites
Published: 2021-10-17 17:28:38

Hello 🙋‍♂️,in this article we will talk about **DOM** in less than 500 words

DOM(Document Object Model) is a software interface for HTML, XML and SVG documents. It provides a structured view of the document(tree) as a group of nodes and objects that have properties and methods, and defines the way in which the structure can be accessed by the program.
DOM binds web pages to scripts or programming languages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewcikyduk50wdyxbshp4.gif)

The basis of an HTML document is tags.
According to the DOM, an HTML tag is an object and nested tags are its "children".
All objects are available with JavaScript, we can use them to modify the page.
For example, `document.body` is an object for the `<body>` tag.

#### DOM EXAMPLE
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shktjienlnm7su9vu13t.png)

And this is a view of an HTML document as a tag tree:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuv28ony3gmw33th8s3t.png)

Tags are node elements(elements). They form the structure of the tree: `<html>` is the root node, `<head>` and `<body>` its child nodes, etc. 

**Text** inside the elements forms **text nodes** named #text. The text node contains only a string of text. It cannot have descendants (it is always at the lowest level).
Spaces and line breaks are also symbols. Like letters and numbers, they form text nodes and become part of the DOM tree.

Here you can see [Dom in real time](http://software.hixie.ch/utilities/js/live-dom-viewer/#)
Herramienta para auditar CSS
Tags: webperf, tool, cssaudit, spanish
Published: 2021-10-17 17:03:17

[Yellow Lab](https://yellowlab.tools)

Herramienta gratuita para que podáis auditar la performance de cualquier web.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lauj4ogmtoz0my547i11.jpeg)

También podréis medir la complejidad del CSS, con info práctica sobre cómo resolver cualquier problema.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzl8fyp9qp27roesbhsq.jpeg)
14th weekly post, constant assertions and signatures. Also, storytelling in design.
Tags: typescript, jwt, design
Published: 2021-10-17 16:57:52

## Items of the week

1. **TypeScript** - const assertion can prevent literal types from being treated as more general types, e.g. `const config = {light: "ON"} as const;` will have `light` as the literal type `"ON"` instead of `string`, making it compatible with type `{light: "ON" | "OFF"}`. It'll also make `light` readonly. More explanation can be found on the [official documentation page](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions). 

2. **JWT** - it can be signed asymmetrically with a key pair or symmetrically with a shared secret. The latter means all parties involved use one secret for both signing and signature verification, which means any party with the shared secret could have signed the JWS - something to be taken into consideration during implementation.

3. **Design & storytelling** - good stories are engaging and help build empathy, adapting them to your audience and backing up the points with data could be helpful in getting buy-in during a design process. [NN/g has an article on 6  rules for persuasive storytelling](https://www.nngroup.com/articles/persuasive-storytelling/).

## Note of the week

On the week 41 of 2021, I found out about a portable game console powered by a microcontroller - [PicoSystem](https://shop.pimoroni.com/products/picosystem), an interesting product considering it is sporting the RP2040 just like a Raspberry Pi Pico. That's all for this week's post, thank you for reading and if you have got any feedback, do let me know by leaving a comment. Have a nice day!