teleren/devto huggingface dataset:
Number in Typescript - simple explanation with examples
Tags: typescript, javascript, tutorial, beginners
Published: 2020-05-13 16:26:08

Specifying types is always a good idea since the value of a variable can change (intentionally or not) and sometimes it changes to something completely different and the code breaks. We can start with a variable called `let year = 1997` and 50 lines of code later we mistakenly assign a Coco Jambo lyric to it and our variable will look like `let year = "Ayyayaya coco jambo ayyayai"`. This could be funny or tragic, depending on where in our software this happens. Javascript can't help us avoid this kind of errors (since technically nothing wrong happens) but Typescript, with its beautiful types (some of them simple, some more complicated) can. So let's dive into types and start with `number`.

**Number**
Is one of the basic types. Just like in JS, in TS all numbers are floating point values. Syntactically, the way we specify types is by placing a colon after the name of the variable (or after the things we want to define types for), just before the equal sign, and write the data type we want that variable to hold. Like so:

```javascript
let age: number = 35;
let salary: number = 2300;
```

We just told Typescript that we want two variables, one called `age` and the other `salary` to store two numbers. So what, you could ask? How does that help us? I'm using the TS playground to show you what will happen if I'm trying to pass a string to the salary variable, which should only store numbers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zogo806ry0v7fulnkkhv.PNG)

We get an error, underlined in red. Pretty neat, right? The editor complains and we can spot the mistake and correct it without needing to run the code.

One simple example where this is useful is inside a function that takes numbers as inputs but somehow we feed it strings by mistake:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/143q79cghsdxorhnysju.PNG)

Try to find out your profit using numbers, and you get a nice a final amount; try to extract a peanut and you get an error (plus a possible allergy).

Stay tuned for the next article in which I'll discuss the `string` type.

**Image source: Annie Spratt/ @anniespratt on Unsplash **
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-05-13 16:01:57

day 65/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today implement firebasse folder,rules,implements consumer, orderBy on flutter, make function logout ,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
How I connected Google Client Python API to Google Cloud Virtual Machine.
Published: 2020-05-13 16:01:09

It took me around half an hour to figure it out the way to install deno in my linux machine(debian)

and run just "deno"

The installation process is quite easy but newbie like me always gets confused. This is for those like who were not able to find the right way to install it and open the deno with single command deno.

My steps and procedure may be wrong or bad practice but this way I solved it

First step was to install the deno using 
    
     curl -fsSL https://deno.land/x/install/install.sh | sh

Just type it on the shell and it will download the bin file(executable file) file 

After this It will prompt to add the two file in .profile or .bashrc I followed the process was able to run the deno but  I was not able to use the shortcut "deno" what I did was  

     export PATH=~/.deno/bin/deno:$PATH
in our .bashrc file which is found in our ~(home directory of user). just type 


and type the command



 source .bashrc
and by typing the deno it worked!!!

If  it still doesn't work for you exit and terminal and try it again.

Regarding zsh if the deno is not working we have to put the export command before zsh mentioned in .bashrc
13: Maggie Appleton on Embodiment Through Metaphors
Published: 2020-05-29 17:43:26

---
title: 13: Maggie Appleton on Embodiment Through Metaphors
published: true
date: 2020-05-13 16:00:00 UTC
tags: 
canonical_url: https://share.transistor.fm/s/33bb512b
---

Posting the episodes from the Maintainers Anonymous podcast!

{% spotify spotify:episode:3BZxvlFx3jmkCUt4So0oDX %}

Is programming all digital/cerebral or do we still have embodied roots? How does this affect how we write, teach, and learn code? Maggie Appleton joins Henry to discuss everything metaphors (basically everything). We chat about mental models and abstraction, Polanyi, Cartesian dualism, auto ethnography, knowledge, cats!

Transcript at: https://maintainersanonymous.com/metaphor
Maggie: https://twitter.com/Mappletons
Henry: https://twitter.com/left\_pad
Welcome Thread - v73
Tags: welcome
Published: 2020-05-13 15:57:27

---
title: Welcome Thread - v73
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![meerkat says hello](https://media.giphy.com/media/6pUBXVTai18Iw/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Designing a customisable translation app
Tags: python, translations, community
Published: 2020-05-13 15:54:38

There already are so many translation apps out there; why another one?

Well, because the Oxford Dictionaries API is there :woman_shrugging:

And, therefore, Mercury was born, targetted towards English-language learners. Mercury translates words to English, shows example usage, and includes a click-to-play pronunciation file.

<hr/>

- [Design considerations](#design-considerations)
- [Coding](#coding)
- [Call for action](#call-for-action)

<hr/>

## Design considerations

-  Do not overwhelm a language learner with info. Include barest minimum info, and give links for more (target audience: those who've just begun to learn English).
-  Make a customisable app, so people can specify which language they want and what text they see on the UI (target audience: people for whom the English language is very very foreign and who, therefore, are more comfortable with a UI in their own language).
-  Make the customisation so easy that people who don't know how to code can also download and run the app (target audience: schools and institutes that do not have coders on their rolls but are teaching English as a foreign language).
-  Make the app code lightweight (reason: internet connectivity is poor in too many places in the world).

## Coding

In Python :slightly_smiling_face: because that's the only language I know.

{% github AninditaBasu/mercury %}

## Call for action

Please help me make this app better? Your feedback, suggestions, and comments are most welcome, as are PRs. Let's together :rainbow: bridge languages.
Python Infinite Scrolling problem.
Tags: python
Published: 2020-05-13 15:46:18

I do web scraping on my daily basis. I was looking for the way to deal with the infinite scrolling using Selenium Python. One of  the method I used  while dealing with infinite scrolling  data from chrome web store was to loop around the screen size.
         
            number = 0
           number2 = 2500
        for i in range(105):
            script_scroll = "window.scrollTo("+str(number)+","+str(number2)+")"
            print(script_scroll)
            contents = browser.find_elements_by_xpath("//div[@role='row']")
            urls_list = ['urls']
            
            for content in contents:
                link = content.find_element_by_xpath(".//a")
                link_url = link.get_attribute('href')
                urls_list.append(link_url)
            time.sleep(4)
            browser.execute_script(script_scroll)
            number = number2
            number2 = number2 + number2
Arrow➡️ functions in php
Tags: php
Published: 2020-05-13 15:42:05

There is a new feature in php 7.4 added called short closures or arrow functions. Below is an example of array_map() with closure and new syntax. It is much neater related to using closure when passing to functions like array_map and array_filter.


```php
$ids = array_map(function ($post) {
    return $post->id;
}, $posts);

// A collection of Post objects
$posts = [/* … */];

$ids = array_map(fn($post) => $post->id, $posts);

// with type hinting
$ids = array_map(fn(Post $post): int => $post->id, $posts);

// to return a value by reference,
fn&($x) => $x


```
They only allow one expression; that one expression can be spread over multiple lines for formatting.

##

Another significant difference between short and normal closures is that the short ones don't require the use keyword to be able to access data from the outer scope.

```php
$modifier = 5;

array_map(fn($x) => $x * $modifier, $numbers);

// OR

$x = 1;
$fn = fn() => $x++; // Has no effect
$fn();
var_export($x);  // Outputs 1

```

variables from the outer scope. Values are bound by value and not by reference.
Terminal style with Python
Tags: python
Published: 2020-05-13 15:38:56

style is a simple terminal string styling package for <a href="https://python.org">Python</a>. Its API is a port of the popular chalk package for javascript.

Install the module `style` with <a href="https://pythonbasics.org/how-to-use-pip-and-pypi/">pip</a>:

```
$ pip install style
```

Usage is like this:

```
import style
print(style.red('Hello', style.bold('world') + '!'))
```

Some messing around with the Python <a href="https://pythonprogramminglanguage.com/repl/">shell</a>:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ponbe5rlmz1yrez0k737.png" alt="text color python">

Styles available:

* bold
* dim
* italic
* underline
* inverse
* hidden
* strikethrough

Colors available:

* black
* red
* green
* yellow
* blue
* magenta
* cyan
* white

* light_black
* light_red
* light_green
* light_yellow
* light_blue
* light_magenta
* light_cyan
* light_white

* on_black
* on_red
* on_green
* on_yellow
* on_blue
* on_magenta
* on_cyan
* on_white

* on_light_black
* on_light_red
* on_light_green
* on_light_yellow
* on_light_blue
* on_light_magenta
* on_light_cyan
* on_light_white
Push First Project to Github (First use of Git Bash)
Tags: git, github, firsttime, gitbash
Published: 2020-05-13 15:38:53

Today I will guide you to push your own local files to your GitHub as Repository so here simple steps:

1- First of all, you have to create a GitHub account if you don't have one, then log in, after that you have to create your new repository.

2- Give a Name to your repository (don't check: Initialize this repository with README.md if you want to add your own README) and click Create Repository.

3- Download and install Git Bash and during installation, you can choose options that you prefer.

4- Launch Git Bash Command Line and change the current directory to the location of your project files using this command: "cd" 
Example: <i>cd /Desktop/Projects/ProjectToPushToGithub</i>

5- Type this command "<i>git init</i>" (without double quotes) and hit enter and you will get a new folder named ".git".

6- Run this command: <i>git remote add origin UrlOfYourRepository</i>
Example: <i> git remote add origin https://github.com/mustaphadabella/BookPage.git</i>

7- Run This Command: <i>git push -u origin master</i>
If you get an error like this:
<i>error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/mustaphadabella/BookPage.git'</i>
<h5>Solution of the error:</h5>
Run this command:  <i>git add -A</i>

8- Run This Command to commit: <i>git commit -m 'initial commit'</i>

9- Next Run This Command: <i>git push -u origin master</i> 
note: if it's your first time a popup will display to login to your Github Account so you enter your email and password to log in to your account.

10- Finally, Check your GitHub account you will find all your project files in your Repository. 
I hope this article was useful for you and HAPPY CODING!
How to Build a Simple Stacked Bar Chart with HTML & CSS in React
Tags: datavis, css, react, beginners
Published: 2020-05-13 15:37:20

## How to build a Simple Stacked Bar Chart React Component from HTML and CSS!?!

In this post, we will build a stacked bar chart component in React while only using HTML `<div>` tags and CSS. This should be a fun little intro to data vis and the way we'll do this is by feeding data into our Bar Chart component and mapping through that data to create our chart. In the end, we'll have a chart like the one below.  

![Bar chart from HTML and CSS](https://dev-to-uploads.s3.amazonaws.com/i/92gz682mxmcsv29w4hm9.png)


The code below sets up our Bar Chart component as a functional component, deconstructing our props so we have easy access to our data.  Our data is comprised of an array of objects, giving a percentage and a color.  We will map through this data to create the different stacks of the bar chart.

__Bar Chart Component:__
``` JavaScript

const Bar = ({ data }) => {
    return (
        <div className="BarChart">
            // This is where we map through our data to create 
            // the different stacks of the bar chart, 
            // injecting the height and color via inline styling
            {data &&
                data.map((d) => {
                    return (
                        <div className="BarData" style={{ background: `${d.color}`, height: `${d.percent}%` }}>
                            <p className="PercentText">{d.percent + '%'}</p>
                        </div>
                    );
                })}
        </div>
    );
};

```

The rest is settled in the CSS. The container `.BarChart` accepts the height of its parent so that it will fill that constraint and has a width set so we can see the component.


``` CSS
:root {
	--color-primary: #2bc4bd;
	--color-primary-offWhite: #ebeded;
}


.BarChart {
	background-color: var(--color-primary);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	height: inherit;
        // inherit will take in the height of its parent, you could also 
        // use 100% if the parent's height is set.
	width: 4em;
	overflow:hidden;
}

.BarData {
	display: flex;
	align-items: center;
	justify-content: center;
}

.PercentText {
	color: var(--color-primary-offWhite);
	font:700 1.25rem sans-serif;
	text-align: center;	
}

```

The most important of the CSS above is setting the Height and Width of the `.BarChart`.  To help in the learning process, you can find the Pen below so you can play around with the code.

{% codepen https://codepen.io/ren_estep/pen/oNjqqGW %}

I hope this was a fun and helpful introduction to Data Vis.  Thank you for taking the time to read even while so short! Please be on the lookout for more!

![Thanks](https://media.giphy.com/media/u0bQN6bxXweHe/giphy.gif)
Detect any color with Python
Tags: python
Published: 2020-05-13 15:30:40

You can detect any color with <a href="https://python.org">Python</a>. That can be a color of any object defined as string, like:

```python
fish = WhatColorIsX.new('fish')
```

What it's doing behind the scenes is use Google Image API.


### Installation

You can install the module `WhatColorIsX` with <a href="https://pythonbasics.org/how-to-use-pip-and-pypi/">pip</a>.

```
$ pip install WhatColorIsX
```

You may find you need to pip install Pillow as a dependency first, although it will be attempted automatically.

## Import to your project

For almost all cases, call the new() factory function, then get the colour value from the color() method:

```python
import WhatColorIsX

brick = WhatColorIsX.new('brick')
brick_color = brick.color()
fish = WhatColorIsX.new('fish')
fish_color_bright = fish.color(bright_hue=True)
```

If you already have PIL images that you want to process, you can use the same syntax:

```python
from WhatColorIsX import whatcoloris_image
from PIL import Image

img = Image.open('images/cat.jpg')
cat = WhatColorIsX.new(img)
cat_color = cat.color()
```
Terminal image with Python
Tags: python
Published: 2020-05-13 15:26:35


You can display an image in terminal. Using <a href="https://python.org">Python</a> you can use the module `timg`.

## Setup

timg is available as a package on PyPI. You can install it with <a href="https://pythonbasics.org/how-to-use-pip-and-pypi/">pip</a>:
```
$ pip install timg
```
Now you can use the timg command in your terminal.

## usage

To display an image from code:

```python
import timg

obj = timg.Renderer()                                                                                               
obj.load_image_from_file("test.png")                                                                                
obj.resize(100,40)
obj.render(timg.ASCIIMethod)
```

That turns the image into ascii art.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/3hd9joel1q6ljza7nfqn.png">

To run it as command line program:

```
    usage: timg [-h] [-V] [-i] [-m METHOD] [-r N] [-s W] [filename]

    print an image in terminal


    positional arguments:
      filename              filename of an image

    optional arguments:
      -h, --help            show this help message and exit
      -V, --version         print version and exit
      -i, --invert-background
                            invert grayscale in ASCII mode
      -m METHOD, --method METHOD
                            name of a rendering method (use `-m list` to list
                            available methods, the default is a24h)
      -r N, --reduce-colors N

                            reduce color palette of an input image (1-256)
      -s W, --size W        width of an image
```
Implementing animations with react-spring
Tags: react, ui
Published: 2020-05-13 15:24:26

---
title: Implementing animations with react-spring
published: true
description: 
tags: react,ui
---

In this video, we will use useSpring and useTransition to transform static UIs into animated UIs. 

React Spring is a spring-physics based animation library that powers most UI related animation in React. It is a bridge on the two existing React animation libraries; React Motion and Animated. We'll take a look into how we can use it to build seamless animations in React applications. 

The main advantage of React Spring over other animation libraries is its ability to apply animations without relying on React to render updates frame by frame. This advantage is usually noticed when dealing with nested routes or charts. For more information on the implementation of specific performance boosts, [check out the official documentation.](https://www.react-spring.io/docs/props/performance)

Codesandbox links: 

- [useSpring](https://codesandbox.io/s/react-spring-usespring-hook-twh2k)
- [useTransition](https://codesandbox.io/s/react-spring-usetransition-slider-ugsqn)

[Click here](https://dev.to/bnevilleoneill/implementing-animations-in-react-with-react-spring-110k) for the related blog post on implementing animations in React with react-spring. 

* * *
### LogRocket on [YouTube](https://www.youtube.com/logrocket) 🎬
 
![](https://dev-to-uploads.s3.amazonaws.com/i/2eacqscox237qibs7cho.jpg)

If you enjoy in-depth video tutorials on frontend topics, [check out LogRocket's YouTube channel](https://www.youtube.com/logrocket). Make sure to give us a like if you find the video helpful and subscribe to stay updated on when we post new videos. 
* * *
Turn photos into pixel art with Python
Tags: python
Published: 2020-05-13 15:21:14

Make your photos looks like pixel art using <a href="https://python.org">Python</a>. This works with Python >= 2.6, Python >= 3.2.

You can use the module pixelate to do that.

Installation can be done with <a href="https://pythonbasics.org/how-to-use-pip-and-pypi/">pip</a>:

```
pip install pixelate
```

Example with command line

```
pixelate --input=img/bps.jpg --output=img/bps.png --pixel-size=10
```

The module has one method pixelate, so if you import it you can call the method `pixelate(input_file_path, output_file_path, pixel_size)`.

The code of this method is:

```python
from PIL import Image

def pixelate(input_file_path, output_file_path, pixel_size):
    image = Image.open(input_file_path)
    image = image.resize(
        (image.size[0] // pixel_size, image.size[1] // pixel_size),
        Image.NEAREST
    )
    image = image.resize(
        (image.size[0] * pixel_size, image.size[1] * pixel_size),
        Image.NEAREST
    )

    image.save(output_file_path)
```

Now it wouldn't let me call the method from the module, so instead I copied the function and changed it a bit:

```python
from PIL import Image

def pixelate(input_file_path, pixel_size):
    image = Image.open(input_file_path)
    image = image.resize(
        (image.size[0] // pixel_size, image.size[1] // pixel_size),
        Image.NEAREST
    )
    image = image.resize(
        (image.size[0] * pixel_size, image.size[1] * pixel_size),
        Image.NEAREST
    )

    image.show()

pixelate("fedora.jpg",16)
```
![pixel art](https://dev-to-uploads.s3.amazonaws.com/i/nz0ooj7eyg7vn4c5d5nf.png)
Image reflection with CSS(3) 🤘
Tags: css, image, design, website
Published: 2020-05-13 15:21:05

Hi 👋,



Some time ago I came across a really cool feature from CSS3 that (to be honest) is not too much useful but still very handy if you're pursuing a special "look" to an image gallery on your website.

The image reflection! 👀

I was used to seeing people creating such effects with photo editors, applying the reflection to the image, and using that image on the website. But, this CSS3 feature brings us to the next level.

It creates an opportunity for your (website) users to quickly upload images thru your CMS and get those images automatically set with a (super cool) reflection effect!

But, don't get too excited with that and use with caution, after all, this feature is (yet) not standard and not supported by some browsers!

You can check the support [HERE](https://caniuse.com/#search=box-reflect).

Right! Then, let's see the code:

```css
img {
   -webkit-box-reflect: below;
}
``` 

This creates the `basic` reflection below your image. Pretty simple, isn't it? 

Now, let's be honest! A reflection without a (little) gap and a gradient mask won't feel a real reflection, isn't it?

Then, check the next code:

```css
img {
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
```

This code will create a gradient-masked reflection below your image with a 10px gap with about 30% of the image visible in the reflection. 

To adjust the length of your reflection, you need to use the `color-stop` to control the transition.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2p89h3m5toy7row1uc1y.png)
Essential Software for Working From Home
Tags: workingfromhome, communication, collaboration
Published: 2020-05-13 15:19:49

Working from home is the new necessity, maybe even the future of many jobs. The University of Chicago recently published a paper on how many jobs can be done at home. Based on the study in the United States, they concluded that 34 percent of the jobs could be done at home, and those jobs account for 44 percent of all wages. That is a pretty significant percentage. Given the circumstances, there must be a lot of people scrambling to get their working-from-home setup going.

Today I am going to give you the essential list of software for working from home. Below is the software that I will review in this article. They are ordered based on my quality assessment, which you will see in the article/video:

* Video: https://www.youtube.com/watch?v=-gL_FHJX3mY
* Article: https://quanticdev.com/articles/essential-software-for-working-from-home

Team Chat
  Slack
  Google Hangouts
  Microsoft Teams
  Mattermost
Video Conferencing
  Zoom
  Discord
  join.me
  Jitsi
  Blue Jeans
Online Office Suite: Mail, Calendar, and File Sharing
  Microsoft Office 365
  Google Suite
Project Management
  Trello
  AirTable
  Asana
  Pivotal Tracker
  Wrike
  Jira (!)
All-in-One
  GitHub