teleren/devto huggingface dataset:
Where mit Dart benutzen
Tags: dart, german
Published: 2021-05-16 08:32:59

Eine interessante Möglichkeit von Dart ist, es einen [Prozess](https://api.dart.dev/stable/2.13.0/dart-io/Process-class.html) zu starten. In diesem Post betrachten wir den **Where** Befehl von Windows 10. In der Regel wird er in der PowerShell von Windows genutzt und lässt Sie eine Datei auf Ihrer lokalen Maschine suchen. 

**Where** retourniert dabei im Erfolgsfall den **absoluten** Pfad der Datei. Hier ein Beispiel:
```dart
import 'dart:io';

void main(List<String> arguments) async {
  var executable = 'ls';
  if (Platform.isWindows) {
    executable = 'where';
  }

  final arguments = <String>['/r', 'c:\\', 'dart4.dart'];

  print('============');
  final cmd = await Process.start(executable, arguments, runInShell: true);
  await stdout.addStream(cmd.stdout);
  await stderr.addStream(cmd.stderr);
  final fehlerCode = await cmd.exitCode;
  print('============');
  print('Exit code: $fehlerCode');
}
```
Der Code im Detail:

**executable:** Da der Code einen Prozess startet, muss bekannt sein, welchen Sie starten. Diese Information wird in dieser Variable gespeichert.

**arguments:** Dem **Where** Befehl selbst können verschiedene [Parameter](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/where) übergeben werden. Diese Parameter werden in der Listen Variable **arguments** gespeichert. Mit **r** veranlassen Sie, das die Suche rekursiv erfolgt, mit **c:** wird die Ebene benannt, wo die Suche startet.

**Process.start:** Das eigentliche Herzstück des Codes. Der Funktion werden die Variablen **executable** und **arguments** übergeben. Mit **runInShell:true** veranlassen Sie das der Process in der **cmd** Umgebung gestartet wird.

**stdout / stderr:** Sie können nun den Ausgabe-und Fehlerstream des Prozesses benutzen. Mit **.addStream** werden sie an die entsprechenden Kanäle unseres Dart Codes gekoppelt. Im Erfolgsfall bekommen sie den absoluten Pfad der gesuchten Datei in das Terminal gedruckt.
Learn Heaps via Visualizations
Tags: datastructures, computerscience, interview
Published: 2021-05-16 08:31:46

---
title: Learn Heaps via Visualizations
published: true
description: About heaps, their properties and applications
tags: datastructures, computerscience, interview
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vyvkph7fzld6mw2xoc4.jpeg
---

Heaps (or priority queues) are tree-based data structure that makes it fast to track order of retrieving priority items 🛠

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

I have reviewed how heaps work in depth in the following blog post ⬇️

https://www.romaglushko.com/blog/heapify/

The article contains a lot of visualizations and could be a good way to understand how heaps work, especially for beginners. Also, heap is a popular topic on coding interviews.

Hope it'll be helpful 🙌
그누보드에 Disgus 댓글 API 달기
Tags: disgus, gnuboard, youngcart
Published: 2021-05-16 08:10:42

그누보드는 자체 댓글 기능이 있어서 딱히 별도의 댓글 프로그램이 필요하지 않다.
다만, Disqus API를 이용하면 그 나름의 효용과 편리함이 있기 때문에 소개한다.

적용방법은 정말 쉽고 간단하다.

1. [DISQUS](https://disqus.com/) 에 가입한다.

![가입화면](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i0q5vxugdelkp794ylm.png)

2. 회원가입을 하면 나오는 다음 화면에서 아래 **I want to install Disqus on my site**를 선택한다.

![서비스선택](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae3ii00ee49vpyzkpfmp.png)

3. 다음 나오는 아래 화면에서 **Website Name**에 식별이 가능한 고유한 이름을 적어주고 **Category**에도 선택을 한다. **Language**도 선택을 하는데 아쉽게도 많은 언어를 지원함에도 한글은 아직 지원하지 않는다. 'English'를 선택하면 될 것 같다.

4. 다음 화면은 요금선택 화면이다. 무료를 선택해도 많은 것을 이용할 수 있기 때문에 하단의 **Basic**을 선택한다. 사용하다가 필요할 경우, 위 서비스 내용 중 원하는 요금제를 선택하면 된다.

![요금제 선택](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znl7cx57l3cy25j10j0i.png)

5. 다음 화면에서 하단의 **I dont see my platform listed, install manually with Universal Code**를 선택한다.

![플랫폼 선택](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mw3a6j5ty40buux88w5.png)

6. 다음 화면은 운영 중인 사이트에서 댓글을 삽입하기 원하는 위치에 넣을 코드와 댓글의 갯수를 얻는 소스를 제공한다. 또한, 동영상으로 자세한 방법을 소개하고 있다.

소스를 복사하여 그누보드 설치한 url에서 원하는 곳에 붙여넣기 하면 된다.
참고로, https://skin.fiance.co.kr/ 첫화면 하단에 반영해 봤다.
편집기를 이용하여 /theme/basic/index.php 파일을 열고 
```
<?php
include_once(G5_THEME_PATH.'/tail.php');
```
위에 붙여넣기 하면 된다.

여기까지 하면 사이트에 댓글 반영은 99% 완료했다.

그 외에 로그인 후 왼쪽 메뉴에 보면,
'Configure Disqus', 'Setup Moderation'를 이용하여 세밀하게 설정을 추가할 수 있다. 설정은 언제든지 변경할 수 있다.

![세부 설정](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1azx4yhd4ilaa0cntc9p.png)
StyleGAN Explained in Less Than Five Minutes
Tags: datascience, machinelearning, discuss
Published: 2021-05-16 08:04:51

##The StyleGAN is an extension of the progressive, growing GAN approach for training generator models to synthesise huge high-quality images.

##StyleGAN is a novel generative adversarial network (GAN) introduced by Nvidia researchers in December 2018 and made source available in February 2019.

###You can learn about StyleGAN in lesser than 5minutes with the help of the article I wrote recently on Analytics Vidhya Platform, participating in the novel Blogathon 8.

#Go ahead, read the article and do share it with your peeps.

#[StyleGAN Explained in Less Than Five Minutes](https://www.analyticsvidhya.com/blog/2021/05/stylegan-explained-in-less-than-five-minutes/#:~:text=The%20StyleGAN%20generator%20no%20longer,mapping%20channels%20and%20noise%20layers.&text=The%20advantage%20of%20this%20style,characteristic%20of%20the%20generated%20image.)
Vue-fs: A home file server solution
Tags: vue, showdev, javascript, node
Published: 2021-05-16 07:35:21

The greatest use case I could hope for with this project is that someone uses it to turn their old laptop they were gonna throw away into a file server. 

Vue-fs is meant to be just that. A simple home server app for anyone that wants to NAS the old hardware they have lying around. I'm also planning on adding more features in the future like User/API Auth, File Sharing and Public/Private folders.

:rocket: [Demo](https://FlynnDerek.github.io) &nbsp; &nbsp; :cd: [Source Repo](https://github.com/FlynnDerek/vue-fs)

### Features
:heavy_check_mark: Upload (multiple files)
:heavy_check_mark: Download (multiple files/directories)
:heavy_check_mark: Move (multiple files/directories)
:heavy_check_mark: Delete (multiple files/directories)
:heavy_check_mark: Subfolders 
:heavy_check_mark: Extracting
:heavy_check_mark: Create new diretories
:heavy_check_mark: Filtering
:heavy_check_mark: File viewer   *if compatible with the browser
:heavy_multiplication_x: Rename files/directories
:heavy_multiplication_x: User/API auth
:heavy_multiplication_x: HTTPS
:heavy_multiplication_x: File Sharing

### Final Notes
I ran compatibility tests on the project's node backend with a Raspberry Pi, an old netbook running Ubuntu, and a Windows 10 machine. All features worked on all three of these test machines (thanks POSIX!). 

I'm always open to collaboration, and would welcome pull requests. I hope someone out there finds this useful, and hopefully this will enrich the FOSS community in some small way. Thanks for checking it out guys!

{% github FlynnDerek/vue-fs %}
Vscode file multi-file content synchronization plugin
Published: 2021-05-16 07:25:10

What is File Teleport using for?

File Teleport is a vscode plug-in that improves work efficiency, dedicates to the synchronization of multiple file information, and solves tedious operations. The original intention of the design is to solve the problem of synchronization of international file, and it is also suitable for other scenarios that require file contents transfer. At the moment, vscode plug-in provides functions like insert, replace and update, the function update will perform file diff matching. Let's explain its usage in combination with the international demo.

How to use the three functions (the leftmost is the source file, the rest are the target files)

1. Update operation: No need to know the changes made in the selected area, such as add, delete, remain unchanged, and modify. The plug-in will perform diff comparison, find out the difference between the target file and the source file, and update it.<br/>
![update-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzkegam764pv4t7qf55y.gif)

2. Insert operation: Insert the text in the selected area into any line of the target file.
![insert-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fja259q4z6abet416i1m.gif)

3.Replace operation: Replace the text in the target area with the text in the selected area of the source file.
![replace-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y74y2tunmst98bfik04e.gif)

----

Multi-file path configuration.

Sometimes you don't want to open the target file every time. At this time, the multi-file path configuration will help you solve this problem. This function is triggered when your vscode has only one visible editor window, and the path is based on the root directory.
![multiple-file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg6rm5a9jz7vv6z2wxh5.png)

![multiple-file-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvxcp4kfeer58mczm0in.gif)

---

Keyboard shortcuts configuration.

Default button configuration (window & mac)
1. Insert operation `alt+r`
2. Update operation `alt+t`
3. Replacement operation `alt+y`

You can also make customize settings in the shortcut key setting interface.

PS: If you think this plug-in is helpful to you, [don't be stingy with the'⭐' in your hand to start the project](https://github.com/AKclown/file-teleport), your encouragement is biggest support to the author. If you finds bugs or interactive improvements,you can go to the project to [raise issue](https://github.com/AKclown/file-teleport/issues).
Styled Components and ReactJS
Published: 2021-05-16 02:54:22

I went to school for graphic design, and while I excelled at rendering and photo manipulation, web design was always a pain-point for me. A lot of CSS, or "cascading style sheets" deal with determining the elements on your page that you would like to organize or style using class and id tags. When you know what combinations you want to group and apply styles to, the file they come from is off in another directory like "assets" or "styles" and this all follows a protocol that is somewhat standardized and accepted as best practices. However, React offers the ability to style components in line, meaning you can differentiate some components based on their change in state, their importance, or even just to shake things up for the user for a little fun.
The question is, how do we maintain a readable and understandable code base in terms of our styles. If you've got inline styles and styles from a stylesheet conflicting, it can be a pain to debug the look of your application. Styled Components makes use of tagged template literals which is a recent addition to JavaScript. Essentially scoping CSS is the name of the game with Styled Components, giving us the ability to package the many styles we want for our React Components in in components dedicated to styles alone, and using them as a "wrapper." The wrapped component will have access to styles in the wrapper and those styles can wrap ANY component we choose. The really wild thing about styled components is the syntax. Tagged template literals use the back ticks we might use to interpolate. You can then define a const variable (whatever you want to name the style-component you're making) and set it equal to "styled", like so:
```
const CartItemStyles = styled.li`
  padding: 1rem 0;
  border-bottom: solid var(--lightGrey);
  display: grid;
  grid-template-columns: auto 1fr auto;
  img {
    margin-right: 1rem;
  }
  h3, p {
    margin-right: 0;
  }
`;
```
The li tag will define the elements to be styled with this style-component, but whatever we wrap in <CartStyles> will adhere to these CSS rules and it can be used all over our application. React is already making my development work alot more streamlined, but finally making all that code look good is even more convenient thanks to Styled Components.
How To Create Admin Dashboard in HTML and CSS | Free Code
Tags: dashboardtemplate, dashboardpanel, admindashboard, freesourcecode
Published: 2021-05-16 06:11:58

**Q: How do I create a dashboard in HTML and CSS?**
A: After reading watching the following article and video tutorial you will definitely able to create a responsive admin dashboard panel in HTML and CSS with and a little touch of JavaScript. 

Hello readers, today will learn to build an admin dashboard panel design by using HTML and CSS.
Earlier I have created a Complete Portfolio Website using HTML CSS and JavaScript with Free Source Code. Now it is time to create a dashboard template panel.

**What is Admin Dashboard?**
Admin Dashboard is a header section of the website where the admin can see the overall performance of his/her website. Admin dashboard panel helps to make quick decisions for admin to make decisions of what should they improve in his website or business.

**What should an admin dashboard have?**
Some Major thing that Admin Dashboard Pane Have Are:
Overall details of the website
Quick Navigation Links
Search box
Responsive Feature
Login and Logout Feature
Fully Controllable

As you can see on the given image of the admin dashboard panel on the webpage. I have added side navigation and a horizontal navbar. There are some boxes which are showing the overall performance of the business and some other major details.

##Create Admin Dashboard in HTML and CSS | Free Code##
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/05/admin-dashboard-in-html-css.html">Click Here To Download All Source Code</a>
Send Slack Notification via InvokeRESTAPI@1 - Azure DevOps Tricks #2
Tags: devops, azure, slack
Published: 2021-05-16 06:08:00

Need to send a slack notification from an Azure DevOps pipeline? The InvokeRESTAPI@1 task is one of the most versatile and useful in Azure DevOps. It handles sending messages to Slack in a couple of lines of YAML.

<figure>
<code>
    - task: InvokeRESTAPI@1
      displayName: Slack
      inputs:
        connectionType: 'connectedServiceName'
        serviceConnection: 'Slack'
        method: 'POST'
        body: $body
        urlSuffix: $urlSuffix
        waitForCompletion: 'false'
</code>
<figcaption> The finshed YAML Task</figcaption>
</figure>

---
## The Service Connection

*Project Settings > Pipelines > Service connections*

The service connection is where we define the URL we are going to post to. For this we will use the <a href="https://docs.microsoft.com/en-us/azure/devops/pipelines/library/service-endpoints?view=azure-devops&tabs=yaml#sep-generic" target="_blank">Generic Service Connection</a>. You navigate to *Project Settings > Pipelines > Service connections* or append this string after your project name in the URL `_settings/adminservices`

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5vdgnspxfq061d4ekwt.png">
<figcaption> Create a Generic Service Connection</figcaption>
</figure>

---

### The fields we need to fill:


Server URL: https://hooks.slack.com/services/
Service Connection Name: Slack
Description: A Generic Slack Service connection.

---

### The other Variables in the task


**$body:** You can either generate this variable or Input the body inline. Here is an example body:

<figure>
<code>
{
   "attachments":[
      {
         "mrkdwn_in":[
            "text"
         ],
         "color":"#36a64f",
         "pretext":"New Deployment",
         "title":"$(Pipeline.WebSiteName) deployed",
         "title_link":"$(Pipeline.WebSiteName)",
         "fields":[
            {
               "title":"Version",
               "value":"$(CurrentRelease)",
               "short":true
            },
            {
               "title":"Release Notes",
               "value":"<$(Pipeline.WebSiteAddress)/ReleaseNotes/$(PullId)>",
               "short":true
            },
            {
               "title":"Trigger",
               "value":"Pull Request",
               "short":true
            }
         ]
      }
   ]
}
</code>
<figcaption> Example Slack Body</figcaption>
</figure>
 
So here you can see we are passing variables like the **PullId** and using them in the Slack Message. The ability to use any of the variables in the pipeline allows for detailed Slack Messages.

**$urlSuffix**: `T778W530Z/B021W918BNH/HQIPtyCfACfs5WVXg1w7b4Xk`

This is the magic bit for Slack, I would recommend storing this value as **secret** or getting it from your Azure Key Vault.

Simple Quick and Easy.
Notion API SDK Client in various languages
Tags: notion, notionapi, client
Published: 2021-05-16 05:55:25

The following is an introduction to the official API Client released this time, excluding the API Client that was originally reverse engineered.
Also, as of now (2020/05/16), the README must be reasonably well-developed.

# Official API Approach

## JavaScript

The only SDK that is officially provided by Notion.

https://github.com/makenotion/notion-sdk-js


## Go

https://github.com/dstotijn/go-notion
https://github.com/ketion-so/go-notion
https://github.com/sorcererxw/go-notion
https://github.com/mkfsn/notion-go

## Python

https://github.com/ramnes/notion-sdk-py

## PHP

https://github.com/5am-code/laravel-notion-api
https://github.com/64robots/php-notion

## Ruby

https://github.com/mgmarlow/notion-sdk-ruby

# Reverse Engineering Approach

Python and Go are the two most famous API clients that use reverse engineering techniques. Both of them have more than 1,000 stars, and I think many users are using them.

https://github.com/jamalex/notion-py
https://github.com/kjk/notionapi

It is still unclear if this one will support the official API.
I'm not sure if this one will support the official API or not, but it will have to be a major change from the current implementation, and there are many operations that are not supported by the official API, so I don't think it's realistic to follow suit.
Free Online units Converters Tool & calculator
Tags: converters, tooling, calculators
Published: 2021-05-16 05:48:36

The free-online-converters.com is a Unit Converter of Light Seconds, Light Years, Steps, Terameters, areas, currency, density, energy, force, length, mass, power, pressure, speed, temperature, volume, and bytes. ours provide purpose only to provide free information. Is it an informative online Tool enough? In this tool, you can check the equal value of both things like how many inches in one centimeter, or other value-able units, etc. Ours tries to provide you to some units conversions like Cable Lengths (International), Cable Lengths (U.S.), length units Angstroms, Cable Lengths (Imperial), Centimeters, Chains, Cubits,Decameters,Decimeters,Ells, Fathoms, Feet, Feet (French measure), Feet (U.S. Survey), Fingers, Fingers (cloth), French, Furlongs,Gigameters,Hands,Inches,Kilofeet,Kilometers, Leagues, Leagues (land), Light Days, Light Hours, Light Minutes, Line, Marathons, Megameters, Meters, Metric Feet, Metric Inches, Metric Miles, Mickeys, Microinches, Micrometers, Microns, Mil, Miles, Millimeters, Myriameters, Nails (cloth), Nanometers, Nautical Leagues, Nautical Miles (International), Paces, Palms, Parsecs, Picas, Picometers, Points (PostScript),Quarters, Rods, Ropes, shaku, smoots, spans ,Twips And Yards.
https://www.free-online-converters.com
https://lash-care.dk
https://free-online-converters.blogspot.com
Project 73 of 100 - Simple Counter Application using React Redux Hooks
Tags: react, redux, javascript, 100daysofcode
Published: 2021-05-16 05:10:31

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-73-redux-hooks-counter.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-73-redux-hooks-counter)

This is my last project following Bob Ziroll's Scrimba React Bootcamp course, and it's my last project highlighting Redux, so it's going to be an easy, short one.

Counter apps are probably the most boring, easy thing to build but they do a great job highlighting a specific technology.

A pure Redux with `react-redux` file with reducers and store might look something like this for a counter app (if you're lost I highly recommend you go back and check out any of my last 5 projects to get more background on Redux).

```JS
import redux, {createStore} from 'redux'

export function increment() {
  return {
    type: "INCREMENT"
  }
}

export function decrement() {
  return {
    type: "DECREMENT"
  }
}

function reducer(count = 0, action) {
  switch(action.type) {
    case "INCREMENT":
      return count + 1
    case "DECREMENT":
      return count - 1
    default:
      return count
  }
}

const store = createStore(reducer)
store.subscribe(() => console.log(store))
export default store
```

Now in the App component, we use JSX to create a simple counter UI. Rather than passing the reducers down via HOC to the App component through props we can now simply use the `useSelector` hook to return the store

```JS
function App(props) {
  const count = useSelector(state => state)
  ...
}
```

and instead of writing separate functions to subscribe to store changes, we can simply use the `useDispatch()` hook. This auto-magically connects with our exported functions and store from the Redux file. Now we can remove any use of props from our component, and can go back to exporting App.

```JS
import React from "react"
import {useSelector,useDispatch} from "react-redux"
import {increment, decrement} from "./redux"

function App(props) {
  const count = useSelector(state => state)
  const dispatch = useDispatch()
  return (
    <div>
      <header>
        <h1>Counter using React Redux Hooks</h1>
        <p>by{' '}
          <a href='https://twitter.com/jwhubert91'>@jwhubert91</a>
        </p>
      </header>
      <h2>{count}</h2>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default App
```

This greatly simplifies the look of our code in the App component and we don't have to mess around with HOCs any more, which is a blessing.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
Best Tools to Debug Your HTML Code
Tags: html, beginners, webdev
Published: 2021-05-16 04:19:08

As a website developer, our aim should be to make our content accessible to a maximum number of people and for that, our code should be bug-free and syntactically and semantically correct. Here are some of the best tools I've come across:

1. A Validator
The [W3C validator](https://validator.w3.org/) is great. You can validate your code either by directly uploading the file or the URL(Uniform Resource Locator) or by direct input. Always use a validator after finishing writing the code as this will help you to write efficient and error-free code. 

2. WAVE Web Accessibility Evaluation Tool
[Wave](http://wave.webaim.org/) is an amazing tool as it helps you make your website accessible to a maximum number of people. It also helps you find errors that might normally stay hidden.

3. Funkify 
[Funkify](https://www.funkify.org/) is an extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities. Add this extension to your chrome and write better accessible code.

If you have other suggestions, kindly put them in the comments.

Keep Learning!
Keep Coding!
How to write print statement syntax in Java same as C language?
Published: 2021-05-16 04:12:47

There are basically 4 print statements in java,since the most used ones are 
System.out.println();
System.out.print();

but there are 2 more statements, those are
System.out.printf();
System.out.format();

by using these 2 you will be able to write print statement with syntax same as C language.