teleren/devto huggingface dataset:
Créer un asset ou smart asset sur la Blockchain Waves avec NodeJs
Published: 2020-01-11 11:38:02

Bonjour à tous, 

Voici le lien de la vidéo de cette semaine sur la création d'asset et asset scripté en attendant le webinar du 25 janvier :

https://www.youtube.com/watch?v=zq_zahsSTdk

N'hésitez pas à vous abonner à la chaine et partager.

A bientôt et bonne année

N'hésitez pas à nous suivre sur les réseaux sociaux en attendant :

Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Youtube : https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A
JS syntax wars - the fall and rise of the semicolon
Tags: glitch, javascript, prettier
Published: 2020-01-11 10:27:08

I hadnt realised there was so much discussion going on about JS and ;'s 

https://standardjs.com/rules.html#semicolons
https://prettier.io/docs/en/rationale.html#semicolons
https://prettier.io/docs/en/configuration.html

see also
https://eslint.org/docs/user-guide/configuring#extending-configuration-files

and
https://dev.to/aumayeung/handy-tools-for-writing-javascript-apps-you-may-have-missed-4n2f

and
{% glitch osde8info-opensky file=prettier.config.json %}
Full height sections perfectly centered with flex
Tags: css, design, html, tutorial
Published: 2020-01-11 10:13:01

Hello Dev community! This is my first post here and as this place is a great source of inspiration for me I wanted to take part of it. Let's go!

## Introduction ##

Have you ever needed to display perfectly centered (vertically and horizontally) content on your sections whatever the content height is? There are multiple options to achieve this but my favorite one is to use **flexbox**.

*A long time ago I would have done display table-cell and vertical-align middle, but come on... Web evolves (and so do I)!*

## Flex ##

Display flex provides you easy ways to center the content both horizontally and vertically of an HTML element:

*align-items: center; // for vertical alignment
justify-content: center; // for horizontal alignment*

To go deeper into flexbox go to https://www.w3schools.com/css/css3_flexbox.asp

## Flex direction ##

By default, the flex-direction of an element is set to **row** which means its direct children will act as columns in a row displayed horizontally. You can decide to do the opposite by setting flex-direction to **column** so its direct children will be displayed as the content of a column: one above the other.

*Note that using flex-direction column align-items and justify-content will be inverted.*

## Full height sections##

To have full height sections I simply used height to **100vh**. It means that the section will take 100% of the Viewport Height whatever the size of the screen is.

## 🔥 Bonus ##

To give a better user experience when navigating to your full height sections website you can add this snapping scroll effect on the container of the sections:

*scroll-snap-type: y mandatory;*

And add this property to tell your section to snap to the scroll of its container:

*scroll-snap-align: start;*

Everything you need to know about scroll-snap https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

## ✨Final result ##

Adding a nice font and some color adjustments and we're ready to go!

{% codepen https://codepen.io/wass08/pen/qBEYqOE %}

Wish you liked it! Don't hesitate if you have any questions. Do you have any suggestions about a topic you would like me to cover, it would be a pleasure!
✒️ Some 🔥 tips on using the JS console (console.log & console.table)
Tags: javascript, beginners, webdev
Published: 2020-01-11 09:53:31

You've probably all seen the "Don't console.log, use the debugger!" posts. There is truth in them of course, but in reality, console.log is super useful and a quick and simple debug method. So let's learn some helpful, useful and maybe even unexpected use cases of the *console*.

Using console.log to print values on the console is pretty clear. Let's for example print the current date:

```js
const now = new Date()
console.log(now)
```

If you do this with multiple different values, it can become confusing pretty quickly. To keep things tidy, we can also pass multiple arguments. This makes it possible to tag outputs:

```js
const now = new Date()
const tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1)

console.log("now", now)
console.log("tomorrow", tomorrow)
```

We could of course also log both values with just one console.log call:

```js
console.log(now, tomorrow)
```

Or we could make use of the *object property value shorthand* and the way console.log handles objects. So instead of just logging our variable, we'll log an object, that we create on the fly:

```js
console.log({ now })
console.log({ tomorrow })
```

This logs something like

```
{now: Sat Jan 11 2020 10:11:29 GMT+0100}
{tomorrow: Sun Jan 12 2020 10:11:29 GMT+0100}
```

Cool! So our variables are automatically tagged this way!

As we're speaking about logging objects - there's another great way to log these using `console.table`.

```js
const luke = {
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male"
}

console.table(luke);
```

This will log a neat table view of the object. 

![console.table for an object](https://thepracticaldev.s3.amazonaws.com/i/oikf2q5x790ys4sgpw9z.png)

The same also works perfectly well for arrays and arrays of objects:

```js
// let's have some objects (from the swapi.co)
const falcon = {
  "name": "Millennium Falcon",
  "model": "YT-1300 light freighter"
}

const starDestroyer = {
  "name": "Star Destroyer",
  "model": "Imperial I-class Star Destroyer"
}
  
const deathStar = {
  "name": "Death Star",
  "model": "DS-1 Orbital Battle Station"
}

// create an array of our objects
const starships = [falcon, starDestroyer, deathStar]

// and log them on the console in a neat table
console.table(starships)
```

The output will look something like this:

![console.table for arrays](https://thepracticaldev.s3.amazonaws.com/i/p5iy1bmrfttmibldzo0x.png)

---

Want to get better at Web Development?
[🚀🚀🚀subscribe to my weekly ✉️newsletter](https://codesnacks.net/subscribe/)
It’s 2020 — Create Faster Web Apps UI
Tags: showdev, css, html, javascript
Published: 2020-01-11 09:46:53


Developers are hyper-productive people. They are constantly upgrading their tools to improve their productivity for producing faster & better results.

I have been into full-stack web development for almost a decade. One of the critical challenges I am facing right now is that I need to focus on a variety of things from Designing UI to Deploying Web Application in a very limited amount of time.

I am using a variety of tools and frameworks to speed up my production. Among them for UI — I am mostly using Bootstrap 4 and Bulma for most of my projects for creating responsive web app projects.
As I am repeatedly focusing on the building variety of Web Applications I found that there are some common patterns while building them:

####For eg:
1) Login/Signup/Forget Password UI
2) Dashboard kind of layouts
3) User Profile Layouts
4) Settings Form
5) and the list goes on and on.

I feel that most of the full-stack developers out there might have noticed the same UI pattern while building their Web Apps UI.
So, We’ve decided to speed up the above process by building a simple tool using which you can drag and drop — pre-built Bootstrap 4 components like Signup Form with Cover Image, Login Form, Dashboard Layout, etc…
But wait- there are a lot of similar Bootstrap builders out there why I need to build another Bootstrap builder

##Introducing Gridbox 8


YouTube: {% youtube _2oqWpp9UOk %}


Most Bootstrap Builders focus on generating Websites but we’ve decided to build this especially for Creating Faster Web Apps UI.

We’ve also considered other factors

Sometimes, Drag and drop is a very limited option for developers to refine the layout, that’s why we built in-built full packed Code Editor using which you can create multiple HTML, CSS & JS files to extend your Web Apps UI.

In Summary — You can enjoy the following features

1. Drag & Drop — Pre-Made Bootstrap Blocks — Like Dashboard Layouts, Signup Forms, *Login Forms, E-Commerce Order Layout
2. Drag & Drop — Default Bootstrap Components to improve the layout further like Buttons, Cards, etc…
3. Create/Edit — HTML, CSS & JS — for further UI improvements.
4. Download the Entire Project & use it for production or further development
5. Deploy to Netlify — to showcase your project to your clients.

I hope, you enjoy using this tool for creating responsive Web Apps UI faster.



[Give it a shot!](https://www.gridbox.io)
Morris  Pre-order Tree Traversal 
Tags: python, leetcode, algorithms, beginners
Published: 2020-01-11 09:18:45

This is part of my series where I memo learning from Leetcode. If you have better solutions or ideas, please leave a comment!


## The pattern of Tree Traversal

Here are three patterns for Tree Traversal.  
Each patten has only one order.

- Pre-order Traversal
    - root -> left -> right
- In-order Traversal
    - left -> root -> right
- Post-order Traversal
    - right -> left -> root

## Problem

Today's problem is about Pre-order Traversal.
   
[Binary Tree Preorder Traversal
](https://leetcode.com/explore/learn/card/data-structure-tree/134/traverse-a-tree/928/)

>Given a binary tree, return the preorder traversal of its nodes' values.  
>Example:   
>Input: [1,null,2,3]  
>Output: [1,2,3]
  
We have to put the values of Input in Pre-order, which is `root -> left -> right`.  
  

## Approach

To solve the problem with Morris Traversal, we have to follow the four steps below.

1. go one step left if possible and then go right till the end.
2. add Node to output and establish the link `predecessor.right = node`.
3. When we visit the same predecessor the second time, it already points to the current node, thus we remove the link created at step2 and move to right node with `node = node.right`.
4. return step1  

- note: If the step1 is impossible, add node to output and move right to next node.
  
Here are the points you should remember.  
- Add output when node has no left node or predecessors.right is null.
- when predecessor has no right node, make the link from predecessor to node.
- after making the link from predecessor to node, move the node to left.
- after delete the link from predecessor to node, move the node to right.
  
Here is the example of the traversal.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8o5ypxuc1sgcpf1e7tzs.jpg)


## Solution:  Morris Pre-order Tree Traversal 
```python
class Solution:
    def preorderTraversal(self, root):
        """
        :type root: TreeNode
        :type: List[int]
        """
        node = root
        output = []
        while node:
            if node.left is None:
                output.append(node.val)
                node = node.right
            else:                
                predecessor = node.left
                while predecessor.right and predecessor.right is not node:
                    predecessor = predecessor.right
                if predecessor.right is None:
                    output.append(node.val)
                    predecessor.right = node
                    node = node.left
                else:
                    predecessor.right = None
                    node = node.right
        return output
```

# 



Thank you for reading this article!
I always welcome your feedback, question, and idea.
Write a program to perform the operation on linkedlist[AllOperation]
Tags: replit, java
Published: 2020-01-11 08:53:57

In this program all general operation perform on  linkedlist as 
insert the element[AllWays]
delete the element[AllWays]
Traversing the linkedlist[Also Reverse traversing .
ete.

{% replit @VikasTomar/WAP-to-perform-the-operation-on-linkedlistAllOperation %}?signin=true
Collab Lab Week 4 - Thursday & Friday
Tags: collablab
Published: 2020-01-11 08:47:35

I had a good streak going, but in all the excitement of my pair programming screen, I completely forgot to write on Thursday.

It's been about two days off of The Collab Lab too. I'm working on getting the [PopSchools](https://popschools.com) website ready to open doors for members. I haven't really looked at or thought about the project code since the pairing session with Mike on Wednesday.

Do you wanna hear about my pair programming screen? It was pretty good. It took me awhile and some hints to start getting oriented to the code and making progress on fixing the bug and adding features. 

My number one takeaway was that this is something I can practice. I can start looking at other people's code more. That's actually another benefit I can get out of The Collab Lab. Every week each pair takes a user story. I could pay closer attention to the work I didn't contribute code to.

In other news, I've been physically miserable for the past several days. My skin is itchy and inflamed all over my body. It hurts. Being in nearly constant pain and discomfort is tiring. I could have easily slept through these past few days if I didn't have other responsibilities. 

I'm pushing through. I should probably see a doctor. It's times like these I wish I could borrow some executive functioning and decent health insurance.
Check Palindrome in Python Program Easy Way
Tags: python, palindrome, coding
Published: 2020-01-11 08:41:58



Python is one of the easiest languages which gained a lot of popularity. The main reason why it is preferred is its simplicity and tons of library. Writing programs in other programs to do certain things is lengthy but in python, its a matter of few lines of code (maybe one line in many cases). To check palindrome in python there is just one line of logic here.

    a = input()
    print("It is palindrome" if a==a[::-1] else "It is NOT Palindrome")

See, one line of input and one line of logical output. It is also called the pythonic way of writing code.
To make it simple, I will break it down in parts. The above code was a compressed form of if-else block in python combined with print.
It may also be written as:

    a = input()
    if(a==a[::-1]):
	    print("It is palindrome.")
	else:
		print("It is not palindrome")
In this code the line `a==a[::-1]`checks if the the string is equal to its reverse string (a[::-1] reverse the string).
A simple code in a simple way.
Python has many internal libraries that make the problem solving very easy like you can [find the square root of any number with python in multiple ways](https://holycoders.com/find-square-root-of-number-python/) without any issues.
If you are started in programming then here is [roadmap to learn programming online for free](https://holycoders.com/how-to-learn-coding-online/).
Why did I add a Terminal on my website (and how you can do it too)?
Tags: react, terminal, frontend, beginners
Published: 2020-01-11 07:56:20

---
title: Why did I add a Terminal on my website (and how you can do it too)?
published: true
description: Adding a static Terminal in your React App.
tags: react,terminal,frontend,beginners
cover_image: https://react-terminal.sirv.com/static/rt-cover.png
---


Being a Software Engineer, I always had this idea to have some kind of element on my [personal website](https://bonyroopchandani.com/) which not only showcases my skills but also gives it a bit of "*nerd*" touch. So, I went ahead and built a static Terminal having custom commands.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pn1qm4il0mwpabt06gf2.png)

This React component is also published as an NPM [package](https://www.npmjs.com/package/react-terminal) for anyone who wants to add it to their app.

## Show me the details

### Installing

Install it using NPM `npm install react-terminal` or YARN `yarn add react-terminal`.

### Usage

Just declare the `commands` object (key-value pair where value can be either a string or callback) and pass it as props to the component:

```
import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  // Define commands here
  const commands = {
    whoami: "jackharper",
    cd: (directory) => `changed path to ${directory}`
  };

  return (
    <ReactTerminal
      commands={commands}
    />
  );
}
```

Also, make sure to wrap the application mount point around `TerminalContextProvider`. This retains the state even when the component is unmounted and then mounted back:

```
import { TerminalContextProvider } from "react-terminal";

ReactDOM.render(
  <TerminalContextProvider>
    <App/>
  </TerminalContextProvider>,
  rootElement
);
```

For a full list of props, please check the [readme](https://github.com/bony2023/react-terminal#readme).

## Demo:

[Link to Demo](https://l9fvi.csb.app/)
[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-terminal-example-l9fvi?fontsize=14&hidenavigation=1&theme=dark)

If you found a bug in this library, please file a GitHub issue [here](https://github.com/bony2023/react-terminal/issues).
How I Split Work: In the beginning
Tags: agile, workflow, productivity, beginners
Published: 2020-01-11 06:40:11

---
title: How I Split Work: In the beginning
published: true
description: Step by step process on how I go about splitting work
tags: agile, workflow, productivity, beginners
series: How I Split Work
---

Welcome back, today will be a short post since it doesn't need as much of an introduction. Last time was all about how we envision the end results of our system. This time is all about the beginning.

## Match Game
The goal of this step is to match any of our end results with what we think we will need in order to actually achieve them. This part can be tough at times but like last time, if you really have no idea what you need in the beginning you can just guess.

No really, instead of spending an hour or two recking your brain just guess. You can continue onto the next steps which will pin down if you got it right or not. Or as least in the ideal situation, sometimes it takes longer.

So without any more explanation, let's get to it. I will be taking each requirement from the last post and coming up with a best-case on what we need.

> I should receive one ticket for each person

Usually, when I go to the movies I ask for tickets based on how many people I am paying for, so let's go with "Recieve a request of tickets". At this stage, we do not need to go into any more details.

> My ticket should ...

We know our tickets will need a lot of data when we nail down more of what that is, we will need to either ask for it or have it be given some other way. But we can save this for later.

Note that I did not go into any details here, this might seem like I am being lazy or I am not good at planning but I prefer to call it "deferred thinking". Without going into too much detail as it will be brought up again later, what exactly is on our tickets is not required for our first pass and we can add to this as an additional pass without affecting anything else. So, instead of worrying about every detail I just skip it. Because even if I spend hours on hours thinking of this, I will most likely never get the full list ( well, in this case, I probably could but in a real problem it is much harder ). Therefore, I don't even try, I can just do it as I go later.

> I should be given a printed receipt of the transaction

Not much we need to be given to print a receipt since its just a byproduct of the actual transaction with the tickets.

> I should get the change back with my ticket

In order to get the change we need to be given cash, then subtract that from our cost to get the remainder. Calculating the cost of tickets is done above with our order. So we need to be given the amount of cash the customer is paying with.

## Formatted List
Just to make it easier to look at, and cause ordered lists are great to reference later, our final list of required inputs is:

1. Requested tickets for the customer
1. Amount of cash they are paying with

Thank you for reading.
Stripe Country Comparison (Spreadsheet)
Published: 2020-01-11 06:54:26

[Stripe](https://stripe.com/) is currently available in [33 countries](https://stripe.com/global). The charges vary country by country. As a thumb rule, Stripe charges are ~ 6%.

This [**Google Sheet**](https://docs.google.com/spreadsheets/d/1wqs3LHNPZsKymxszsmSaUaiCXgPc-VjIVCvYAdj00xI/edit?usp=sharing) compares all 33 Stripe countries. Make a copy if you wish to edit it.

Stripe charges depend on four main factors.

1.  **Business Location:** The country where your company (and bank account) is registered.
2.  **Customer Card Type:** Local cards are charged less while international cards are charged about 1.5% more.
3.  **Presentment Currency:** The currency in which you bill your customers.
4.  **Payout Currency:** Your local currency. Stripe usually pays you only in your local currency. Stripe charges a 2% currency conversion fee if your Payout Currency is different from your Presentment Currency. :(

Assuming your presentment and payout currencies are the same, top-3 countries with highest Stripe charges are ... 
1. Mexico (7.10%) 
2. Hong Kong (6.25%)
3. Malaysia (5.90%) 

Again, assuming your presentment and payout currencies are the same, European countries have the lowest Stripe charges (2.15% and 3.65% for local and international cards respectively).

Within EU, Norway has the highest Stripe charges (4.90% and 5.40% for local and international cards respectively).
- - - - - - - -
**Original Source**: https://docs.sendwithses.com/random-stuff/stripe-country-comparison
Animated particle constellations
Tags: javascript, coding, programming, tutorial
Published: 2020-01-11 05:18:56

---
title: Animated particle constellations
published: true
description: HTML5 & Canvas coding tutorial
tags: JavaScript, coding, programming, tutorial
---
![preview](https://i.imgur.com/QSDyLCm.gif)

only take 42 lines of pure JavaScript - easy tutorial:

https://slicker.me/javascript/particles.htm
TypeScript 3.8 Beta is public!
Tags: typescript, javascript
Published: 2020-01-11 04:52:32

TypeScript 3.8 Beta came to public this Jan 10th 2020 adding some awesome features like:

- Top-level Await
- Type-Only Imports and exports
- ECMAScript Private fields
- and many more ...

Check this blogpost from Microsoft team to learn more:
https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/
Angular 8 Install Material Design
Published: 2020-01-11 11:25:53

---
title: Angular 8 Install Material Design
published: true
date: 2020-01-11 04:24:58 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/how-to-install-material-design-in-angular-8example.html
---

In this tutorial we will learn angular 8 install material design step by step we can use material theme design in angular 8 application using ng add angularmaterial command we can easily install material design in angular 8 applicationwe will create new angular 8 project using ng new command