teleren/devto huggingface dataset:
Playing card design in css
Published: 2021-02-06 08:11:07

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

### Font Family
<pre>
https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet" 
</pre>

### CSS

<pre>
 *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
        background-color:#36ba59;
        font-family: 'Poppins', sans-serif;
    }
    .card{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:relative; 
        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);

    }
    .card span{
        font-size:30px;
        font-weight:bold;
        color:#ff3019;
        position:absolute;
    }
   
    .card span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }
   
    svg{
        fill:#ff3019;
         
    }
    .heart1{
        position:absolute;
        top:70px;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .heart2{
        position:absolute;
        bottom:10px;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }
</pre>
### Html
<code>

    <div class="card">
        <span class="number1">2</span>

        <span class="number4">2</span>
        <div class="heart1">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
        </div>
        <div class="heart2">
            <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
        </div>
    </div>

</code>
Loop an array using closures in JavaScript
Tags: javascript, functional, programming
Published: 2021-02-06 08:10:07

What if someone asks you to visit each element in an array without using any looping mechanism in JavaScript, what would you do?
.
.
.
.
.
.
Here comes closure to the rescue. While reading about this concept, I came across this problem and found it interesting.

Solution:
```
function getArrayItems(array){
 let i = 0;
 return function(){
   return array[i++];
 }
}


//print an array using concept of closure
const next = getArrayItems([1,2,3,4,5,6,7]);

function loop (cb) {
  const value = cb();
   if (value === undefined) {
     return;
   } 
   console.log(value);
   return loop(cb);
}

loop(next);
```

Run code here : https://repl.it/@jatin33/ClosureExample#index.js
Please comment what are some other applications you guys can think of.
Weekly Challenge 098
Tags: perl, perlweeklychallenge
Published: 2021-02-06 08:07:07


# Weekly Challenge 098

[Tasks](https://perlweeklychallenge.org/blog/perl-weekly-challenge-098/)

# TASK #1 › Read N-characters

## Task

You are given file `$FILE`.

Create subroutine `readN($FILE, $number)` returns the first n-characters and moves the pointer to the `(n+1)th` character

## Solution

I have to say I'm surprised that this is the first task given it is more complex (IMO) than the second task. Perl - like most modern languages - is UTF-8 aware. This makes it easier to read characters rather than bytes. But then maybe I'm over thinking this task and it is expected that only English is used.

This task is also complicated as the `readN` function takes a file name, and not a file handle. To get around this, I use the [state](https://perldoc.perl.org/functions/state) function to contain a mapping of file names to file handles, and open a new file handle if it doesn't already exist.

For the reading of the characters, the [read](https://perldoc.perl.org/functions/read) function allows us to read the next `$n` characters (not bytes) into a scalar, which I then print.

## Example

For these examples, input.txt contains `1324567890`, and hello.txt contains `tēnā koe i tēnei ata`.

```
» ./ch-1.pl input.txt 4 4 4
1234
5678
90

» ./ch-1.pl hello.txt 5 5 5
tēnā 
koe i
 tēne
```

# TASK #2 › Search Insert Position

## Task

You are given a sorted array of distinct integers `@N` and a target `$N`.

Write a script to return the index of the given target if found otherwise place the target in the sorted array and return the index.

## My solution

If this was something I was going to use at work, I'd use [firstidx](https://metacpan.org/pod/List::MoreUtils#firstidx-BLOCK-LIST) from the List::MoreUtils module. However, I have a policy of not using non-core modules when it comes to Team PWC challenges.

For this task I loop over the array in while / [each](https://perldoc.perl.org/functions/each) loop. This gives me both of `$index` and `$value` while iterating over an array, and saves me having to manually doing this. Using each on arrays was introduced in Perl 5.12.

If a value is greater or equal to the target, I print the index of that value. If no value is found (i.e. the target is greater than the last value), I print the number of input values. This would be the index position of the next value.

## Examples

```
» ./ch-2.pl "(1, 2, 3, 4)" 3
2

» ./ch-2.pl "(1, 3, 5, 7)" 6
3

» ./ch-2.pl "(12, 14, 16, 18)" 10
0

» ./ch-2.pl "(11, 13, 15, 17)" 19
4
```
How can I get a job in Facebook or Google as a Data Scientist?
Published: 2021-02-06 08:03:57

It's implied that you should be great at what you do. Aside from that, work on your abilities and adjust yourself to the work prerequisites of these two giants. The following is what a Data Scientist opening resembles for Google. This will give you a thought of what's in store.

Minimum qualifications: 

Graduate degree in Computer Science, Statistics, Mathematics, Electrical Engineering, Computational Biology, Operations Research, Economics, Bioinformatics, Physics, or Industrial Engineering or identical viable experience 

2 years of work insight in data analysis related field 

Ready to work with factual programming (Python, R, MATLAB, Pandas) and data set dialects like SQL

Responsibilities 

Work with immense and complex data collections. 

Settle troublesome and non-routine examination issues through cutting edge insightful strategies as required. 

Create models for examination pipelines iteratively for bits of knowledge at scale. 

Work top to bottom information on Google information constructions and measurements 

Supporter changes for item advancement as required 

Investigation through information get-together and prerequisites detail, examination, preparing, introductions, and progressing expectations 

Advancement strategies, investigate and create examination, and estimating for development of nature of Google's client confronting items 

Connect cross-practically and making business suggestions like guaging, money saving advantage, test examination through successful introductions and visual showcases of quantitative data of your discoveries at different degrees of partners

On the off chance that you gain from the best, you shouldn't need to stress over not landing the fantasy position. Intellipaat is there to assist you with doing that and open up more vocation openings with their <a href="https://intellipaat.com/data-scientist-course-training-hyderabad/">Data Science Training in Hyderabad</a>.Make a point to commit your hours to rehearse in different activities and gain involved insight.
Learning Rust : Match Statements
Tags: rust, programming, systems, tutorial
Published: 2021-02-06 07:37:23

Rust has an extremely powerful control flow operator called match that allows you to compare a value against a series of patterns and then execute code based on which pattern matches. Patterns can be made up of literal values, variable names, wildcards, and many other things; ([source](https://doc.rust-lang.org/book/ch06-02-match.html))

Match statement are kind of similar to switch statements; below is an example of how to use a match statements in rust

```rust
    let country_code = 234;
    let country = match country_code{
        44 => "United Kingdom",
        234 => "Nigeria",
        7 => "Russia",
        1 => "USA",
        _ => "Unknown"
    };
    println!("the country with code {} is {}", country_code, country)
```
```terminal
OUTPUT: "the country with code 234 is Nigeria"
```

The Breakdown;
- 1) The match control flow operation begins with the [match](https://doc.rust-lang.org/std/keyword.match.html) keyword followed by the value or variable used for comparison.
- 2) After the keyword and variable is the expression. the match expressions are encapsulated within curly brackets.
- 3) In the expression, the left hand side is the pattern and the right hand side is the code executed when the pattern matches, here we are returning a string value. 

- Notice the `_` pattern at the bottom?. The _ pattern is a special pattern that will match any value. By putting it after our other arms, the _ will match all the possible cases that aren’t specified before it.
JS Test #6: Variable number of arguments
Tags: beginners, codenewbie, javascript, webdev
Published: 2021-02-06 07:18:34

![code-snippet](https://learn.coderslang.com/js-test-6.png)
`true` or `false`? That is the question... 	

<!--more-->

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In JS, all functions have access to the internal `arguments` array that holds all arguments that were passed into the function.

We can access the elements of this array by index, thus expecting that both `regularFunction` and `arrowFunction` will return true.

The only issue is that arrow functions don’t have access to the `arguments` array.

There might be two separate outcomes in line 8. Most likely you’ll see the message `ReferenceError: arguments is not defined`. However, there also might be a different scenario. For example, if you run this code in Node.js, `arguments[2]` is likely to be evaluated to something like

```javascript
Module {
  id: '.',
  path: '/workdir_path',
  exports: {},
  parent: null,
  filename: '/workdir_path/scriptName.js',
  loaded: false,
  children: [],
  paths: [
    '/node_modules'
  ]
}
```

In which case, we’ll see `false` logged to the screen as `3` is not equal to the object described above.

---

**ANSWER**: `false` or `ReferenceError` will appear in the console depending on the execution environment
Real-World Transitions Challenge 🥋
Tags: css, todayilearned, tutorial, codenewbie
Published: 2021-02-06 07:13:56

Hey folks 👋🏻, hope you are doing well at your journey.

In this post, I have made a real-world website structure with transition effects and actually, it is a challenge.

> Transitions Challenge

The goal of this challenge is to add two transitions to the website; one to the title to change its colour to *#1f93ff* on hover, and another to the menu items to make them grow to 2.5em *and* change colour to *#1f93ff* on hover. Transitions will be added from the ground up, including pseudoselectors and the transitions themselves. All transitions need to have a duration of 1 second and use the ease-out timing function. Good luck!

See what I have made 🧻

{% codepen https://codepen.io/atulcodex/pen/MWbKwLj %}
Dogma
Published: 2021-02-06 07:08:04

Dogma is the enemy of progress.

When someone says "we've always done it like this" you know there's a problem.

When someone says "it ain't broke, so don't fix it", it works for a while, but eventually someone else breaks into the market. Just look at ICE (internal combustion engine) cars and the way the IT companies (Tesla and Apple and others) are taking over the vehicle manufacturing and support markets.

Just look at the Fossilised Fuel companies still investing in out of date tech. Instead of in newer and cheaper methods of making electricity.

Remember to always ask questions, but also to do your research. One of the things I recommend people to do is to research their industry.

A few years ago, a friend said that her daughter had just done an airline course. I asked the daughter some questions. How many people did the course? Hundreds! How many seats on an A320? She didn't know what an A320 was! When did the first 747 fly? How long to fly from Cape Town to London? All the usual questions. She couldn't answer any of my questions. I said to her that she was unlikely to get a job in her chosen career. She thought I was mad! I said "look, you have hundreds of competitors. How are the interviewers going to choose? Not simply on your looks!"

So if you are developing in Javascript, learn everything you can about the history of Javascript, Ecmascript.

If you're developing in Delphi, learn about the origins of Pascal.

If you're developing in Oracle or SQL Server or mySQL, learn about Third Normal Form and about standard and other forms of SQL.

Be a knowledge expert in your field, not just up to date, which is difficult enough. Stand out because of your knowledge. Contribute to debate. Seek solutions. And don't be scared to give your opinion. This is singularly the biggest problem I have in my business and programming career. When I am asked my opinion, I give it and I back it up with facts. Often my clients are upset with my opinions and suggestions, but they keep me because I rock the boat, positively so that it doesn't let in water.

So be careful of dogma. Be careful of established beliefs. Be careful of places which say "we've always done it like this."

And have fun. Remember Torvill and Dean? I sometimes point out to people that what Torvill and Dean did on ice, programmers do inside computers. https://youtu.be/19CYCcmA2Y0
How to get rid of switch statements
Tags: javascript, solid, polymorphism, beginners
Published: 2021-02-06 07:06:36

Photo by Tim Mossholder from Pexels

## Why get rid of switch statements, to begin with?
The answer is simple. Having switch statements is fine, but it could be better. 
In the world of code, you will find something called the **SOLID** principles, which help you in writing clearer, cleaner, better code.

## The switch statment
Imagine having to handle a "keydown" event. You want to handle each valid keycode accordingly. This is what you'd find most often.

![image](https://dev-to-uploads.s3.amazonaws.com/i/swicmzigckbqtkxu99ym.png)

## Refactoring
How about this, let's create a class for the key press.
We need the keycode, we need the action it's supposed to take and an added bonus of possibly extra validation.
![image](https://dev-to-uploads.s3.amazonaws.com/i/l9aaxflh1dhn0pp9m8er.png)

### Now what?
Now we instantiate a new Object from our KeyPress class for each keycode you'd need.

![image](https://dev-to-uploads.s3.amazonaws.com/i/vrwyaitlvglnjel829az.png)

## And now the fun part!
We still need something to manage when and how each different keypress object is being called. This is where the handler comes into play. It'll need a bind method to add new KeysPress objects and a handle method, which is self-explanatory.

![image](https://dev-to-uploads.s3.amazonaws.com/i/6w81q244nyniq7cklden.png)

## The moment you have all been waiting for!
That same function with the previous switch statement.
It's tiny. If you don't need any prior validation, it's basically a one-liner.

![image](https://dev-to-uploads.s3.amazonaws.com/i/10niht4b7r5rdwov0610.png)
 
## A few last words
Now why would you want to do this? For the sake of maintainability, decreased complexity.
You have essentially **closed** the handleKeyDown function for modificaiton. But it's still **open** for extension.

You can simply add new KeyPress Objects, add them to the list in the keyhandler and voila. 
Your function still stays the same! That's crazy.

Next time you implement a switch statement like this, simply think of this:

> Why not try something new this time?
Menu doesn't collapse (iOS)
Tags: meta
Published: 2021-02-06 06:49:39

Hi folks.
In the dev.to iOS app, when I click on my profile picture, the menu showing my name, Dashboard, Write a Post etc. unfolds.

However, when I click on Dashboard then, the menu stays on the screen and doesn't collapse. The dashboard is shown below the menu. Is this intentional? Thanks for your work on dev.to!
My Ideal Routine
Published: 2021-02-06 06:37:24

I have been reading a book on Deep Work and would like to share how could we create work that makes us feel great about ourselves. Tangibility is more important than theory let me tell you abour the routine I believe is ideal.
Wake up at 4:00
Drink 2 glass water and get 1800ml hot water ready to drink for the day 
15 Surya Namaskar 
Plan my day usually 15-20 min
Code till 11 o clock 
Wholesome food rich in vegetables
4 rounds in my nearby park 
code till 2:00 clock 
Wholesome food rich in vegetables
30 minute audio book/reading
Code till arount 5:00
Wrap up see what has been done what I will need to be do Roughly plan tommorow's day At end say SHUTDOWN COMPLETE and get done with today's work (20m usually)
Go to friend's home enjoy wit family. (If I don't go and continue to work you know what will happen I will become unhappy of work)
Write my diary 
Sleep at 7:00 clock Saying System Hibernate 

Although I believe it is a really bold routine and I am not able to follow it to very end mainly because I start playing game on phone, binge on food or just get lost in thoughts but I believe if I Child falls while learning to walk does not means he will learn to walk 
Thanks :)
Quick learning reference cards: Java streams
Tags: beginners, showdev, java, programming
Published: 2021-02-06 06:30:10

Casual learning is a method of learning the topics that are split into simple self-contained content ( preferably within 500 characters ). Programming is a wonderful area for casual learning as you can understand the concepts as simple explanations. It's a simple approach for beginners to get started as well as experienced programmers to refer to as reference cards. 

Please find the content for the java streams explained as ideations. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dmtdh5banyk4aidu1jnq.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xjdzjtmafoft72g41mg4.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgrzx95t96zliepk56iv.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1i61z8dgwfv041uo2i8e.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9urwnvjj17oyri2q3pn.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yodhzhg5yz04uyoklvkt.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6rll9f5kk94hkd3p5njx.jpg)

For this and more content on java and other programming languages, you can download and use the microideation app for free ( no mandatory registration). You have the ability view related ideations or to freeze an interesting topic/subject and follow. 

https://play.google.com/store/apps/details?id=com.microideation.app

More details
https://www.microideation.com
5 Handy Strategies to Set Team Goals in 2021
Tags: productivity
Published: 2021-02-06 06:29:44

<b>“</b>The way a team plays as a whole determines its success. You may have the greatest bunch of individual stars in the world, but if they don’t play together, the club won’t be worth a dime.<b>” – Babe Ruth</b>

The quote is sufficient to indicate the importance of teamwork. Teamwork plays a vital role in promoting the organization’s reputation. As an entrepreneur, C-suite executive, or project manager you know very well that teamwork holds a key to success through boosting productivity and strengthening your company’s position.

Though we have come across many examples of achieving business objectives through teamwork and considered it as a tool to ensure growth, there is much more to do for setting team goals. In this blog, we are going to discuss five effective strategies to set up your team goals in a better way! Let’s start with the most obvious strategy- the SMART strategy.

<h4>Attainable</h4>
It is necessary to keep in mind while setting team goals that these goals remain achievable. If they are not attainable, it will lead your team goal setup to failure. It could further demoralize your teammates or employees as they cannot get the benefits of goal accomplishments. A robust task management tool can help you segregate and measure tasks so that you can easily convert challenging tasks into small, attainable tasks.

<h4>Relevant</h4>
You can identify or create relevant goals by keeping the vision and mission of your organization into focus. All the relevant goals contribute to your organization’s growth over the period.

<b>Originally Published on <a href="https://www.taskopad.com/blog/top-strategies-for-setting-team-goals/"> Task Management Tool </a> </b>
Building my first react project
Tags: react, javascript, css, webdev
Published: 2021-02-06 05:20:14

This guide is designed to help you build a hot coin detector, using which one can get ten best cryptocurrencies of the day based on the percentage change in price in last 24 hours.

### Setup for react app

Initialise react app in command propmt using the command given below
![2021-02-05](https://dev-to-uploads.s3.amazonaws.com/i/b41v2iaxep5uydjiol43.png)

### Designing logo

Design logo for the app on canva and remove its background on remove.bg

### Getting started with react

Render App component in index.js file.
In App.js file, declare an async function called fetchCoins which will have two parts:
1) try
2) catch

Fisrt part of async function (try) will return a promise. Here async/await is used alongwith fetch command for fetching api from CoinGecko. Await makes the code wait until the promise is settled and its result is returned. It suspends the function execution until promise settles and resumes after getting result.
![Capture1](https://dev-to-uploads.s3.amazonaws.com/i/df14pkgns6q0ka5qtqu5.PNG) 

Using map, extract necessary information from the result and store it in an array. Sort this array using sort method in decreasing order on the basis of price change and slice it to get top 10 coins.
Declare state with properties:
1) to store list of coins
2) status of webpage
Initially, there will be an empty array and status will be loading. Upon slicing, update the state with the new array of ten coins and status as 'success'.
![Capture2](https://dev-to-uploads.s3.amazonaws.com/i/cl0ytwnu0es16ev00t0l.PNG)
 
Second part of async funtion (catch) is used to catch any error thrown while fetching api. it then updates the status as 'failed'.

Then componentDidMount is used, inside which the fetchCoins function is called. It invokes immediately after the App component is mounted. So, setTimeout is used to provide a delay of few seconds in fetching api. This helps in showing the loading status of webpage for first few seconds.
![Capture3](https://dev-to-uploads.s3.amazonaws.com/i/msug8wq1rez73ry1dpj1.PNG)

For rendering, ternary operator is used which checks the status of webpage, and then rendering is divided in three parts. First for the loading of page, second for the time any error occurs and third when the coins are fetched successfully. Two buttons are provided for buying these coins from Binance and CoinDCX.

Here's a glimpse of the app.
![gif](https://dev-to-uploads.s3.amazonaws.com/i/zem4vnhrayrrqxq786ys.gif)