teleren/devto huggingface dataset:
The Guide to Building the Sprite Animation🐕‍🦺
Tags: css, animation, webdev
Published: 2020-04-13 20:18:29

I was free today on the weekend, so I thought of trying Something new In the CSS. I got the idea from looking at the sprite of the pokemon, and it could be fun to put them in the motion using CSS. Here is how I did it.

Sprite Animation idea is to putting many images together in a single image and applying the CSS. To make it possible and combining all the images into the single frame, I used the photoshop to put up on the stack and combined it into a single image.

## Here is how it looks

![Combined Sprite](https://dev-to-uploads.s3.amazonaws.com/i/i4zv4a0k1rko8rihmt79.jpg)

I wrote the basic HTML as short as possible my content which I was going to uses as a background animation 
```html
<div class="sprite"></div>
```


To Animate Using CSS, I used keyframes to define the animation for the user and give the primary position to see the animation. I used the background properties to insert my image in HTML. I fixed the position of the image at   `0 0` and used the keyframe, which adjusts my position of the background when it goes from  `0% to 100%`.

Since the height of the image was `481px`, and there are 8 images combined in the single image, which sums up to `3848px`. Then I applied that animation in my `.sprite` class and using the `animation-timing-function`. The function allowed me to fix my step to switch the animation since, In my case, there were 8 images, Keep in mind that the no of images you increase in the single image the size increase as well. I wanted to run my animation in the loop So, I used the `animation-iteration-count` and set it to `infinity` and ran it for 2s which can be chosen as per the needs. Below is the code for the CSS that I used

```css
.sprite {
	width:547px;
	height:481px;
	display:block;	
    background:white url(run.png) 0 0 no-repeat;
    margin:3rem auto;
    animation: run 2s steps(8) infinite;
    }
@keyframes run{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position: 0 -3848px;
    }
}
```
As a result you will get a nice sprite animation which in my case was dog

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9v0xaafrcrf8ioifoqzs.gif)



Isn't that awesome way to play with CSS animation 😎😎

---

## THANK YOU
235 ideas of what to do while you are on quarantine
Tags: javascript, webdev, react, productivity
Published: 2020-04-13 20:02:20

So far, like everyone else sitting in quarantine, I’ve been thinking about doing something useful (like everyone is doing 😄) at home.

I started googling and found a lot of ideas to do something with your loved one or alone while you’re at home.

So I decided to create a ["random generator"](https://yaninatrekhleb.github.io/quarantine-what-to-do/) of activities which you can do during the quarantine and [I've open-sourced it on GitHub](https://github.com/YaninaTrekhleb/quarantine-what-to-do).
![](https://miro.medium.com/max/600/1*SQVgGUkpcV3MVkX51w31PQ.gif)

You will get ideas from such categories as: movies, creativity, personal development, cooking, cleaning, and much more.

Meet dawn, clean up the pantry, spend five minutes in silence and more.
What will you get from this list?

Do some little challenge.Choose 3–5 consecutive actions and do their next days.Or choose 3 actions for 1 day. The choice is big.

[👉🏻Try it here👈🏻]
(https://yaninatrekhleb.github.io/quarantine-what-to-do/)
Floating Label over input
Tags: html, css, webdev, tutorial
Published: 2020-04-13 19:54:37

---
title: Floating Label over input
published: true
description: Using CSS only
tags: html,css,webdev,tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3qfjw9bqgvny1iiwu0tt.gif
---

Thanks to the material guidelines, we all want a floating label on top of our `<input>`.
A solution is to use, next to the input, a text element that will be the pulled-up label.

```html
<label>
  <input>
  <span>Label</span>
</label>
```

This `<span>` shall be raised when the `<input>` is `:focus` or when it *holds a value*, sadly there is no pseudo-class for that.
Possible hacks involves :

- adding a `[required]` so the input is `:invalid` state when empty => **bad** : it prevent any form submit
- adding a `[placeholder]` so the input has a `:placeholder-shown` state => require an empty placeholder

> the default state must be usable.

In case of bad CSS support, we don't want our input to be covered by the span, so we revert the logic in order to pull-down the span in the following case :

> The span shall cover the input if the input has an blank placeholder and is neither focus nor filled.

Which give us the following rules:

```css
label>input[placeholder=" "]:not(:focus):placeholder-shown + span {
  transform: translateY(1em) scale(1.25);
}
```

You will now have a working state (label already pushed up) if :

- the `:placeholder-shown` is unsupported.
- the placeholder is not a space
- the value is already set by attribute

{% codepen https://codepen.io/yne/pen/wvKaLOm default-tab=html,result %}
Agnita: Authentication for Create React App using AWS Cognito
Tags: aws, javascript, react
Published: 2020-11-15 07:31:59

---
title: Agnita: Authentication for Create React App using AWS Cognito
published: true
date: 2020-04-13 19:37:40 UTC
tags: aws,javascript,react
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1024/0*Y8Ixajo0m8Z4Ynfd.png)](https://medium.com/@bartwijnants/agnita-authentication-for-create-react-app-using-aws-cognito-80cde1fb781b?source=rss-3dd8c36bc285------2)

The Agnita project is a proof of concept implementation using Amazon Cognito and create-react-app.

[Continue reading on Medium »](https://medium.com/@bartwijnants/agnita-authentication-for-create-react-app-using-aws-cognito-80cde1fb781b?source=rss-3dd8c36bc285------2)
hey, I made a type safe library to sort any kind of array
Tags: javascript, typescript, library, array
Published: 2020-04-13 19:28:20

hi, working for years with arrays in js and ts, I noticed that there has never been a simple and elegant way (IMHO) to order an array of elements and have a reusable and configurable structure, so I made a small library 
https://sort-es.netlify.com/ which does exactly and only this, I would like to know what you think, the advice is welcome as well as the constructive reviews :D
JavaScript Developer Losing Track of ... !
Tags: developer, frontend, discuss, javascript
Published: 2020-04-13 19:17:51

I am a Frontend developer and I recently quit my job (End of January) as I was worried where my career was going.I had been working there for the past 3 years but every day at my office felt monotonous and nothing used to excite me and hence the decision. 

Its been 2.5 months since the last working day, I had started learning React, Created 3 Projects using Vanilla JS ,Started working on my portfolio website, Some freelancing on Upwork and applying to companies (to which there seems to be no response may be due to COVID-19).

But after each passing day I think i'm loosing my interest in frontend development or coding/software development itself ,There was a time I liked it but now the daily tasks/development that I plan for any day seems to be going of the track each and every time. For example I try going through an online course on React but I lose my interest within 15-20 minutes and wander off to Youtube or twitter and so on.

It's not that I'm not able to focus on my work or anything . I have ample amount of time in my hand , I know i need to improve my skill. I constantly try to learn new skills (coming back to my workstation and forcing myself to sit there until and unless its done). But everything seems to be a burden in this respect.

So every day feels like loss to me, Having no job also is a burden.
I don't know what to do or what to expect or anything.

Just wanted to vent it all out. I don't know.
What’s your opinion on the Ruby programming language?
Tags: discuss, ruby
Published: 2020-04-13 19:13:04

---
title: What’s your opinion on the Ruby programming language? 
published: true
description: 
tags: discuss, ruby
---

DEV is in the process of launching a podcast and we'd love for you to be involved! We're recording the episodes in advance, and this week we'd like to know:

What’s your opinion on the Ruby programming language? 

If you'd like to participate, please:

- Call our Google Voice at at +1 (929)500-1513 and leave a message 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

![ruby-crystal-animation](https://media.giphy.com/media/l41lQQJpTzvbQkYr6/giphy.gif)

Thank you!
What is Anemic Domain Model and why it can be harmful?
Tags: ddd, architecture, entityframework, domainmodel
Published: 2020-04-13 18:18:09

Anemic Domain Model is a common approach in software development that many folks don’t even know they are using it including myself. If you are using Entity Framework, there is a chance you know this approach. But do you?

For more be polite and follow the link to origin article. https://link.medium.com/yuHaI3mLE5
It is because of statistics. Thank you.
What is the easiest way to deploy Docker Compose and update it with no downtime?
Tags: devops, help, docker
Published: 2020-04-13 17:35:01

I usually work on the frontend, but I had to learn Docker and Nginx last week in order to set up my app's backend. So I am a bit confused about how to deploy it now.

I read about AWS ECS, however, it seems that I cannot "just deploy" to it using my `docker-compose.yml` file. Deploying directly to EC2 can be problematic when I want to update my backend without any downtime.

I also do not want to introduce any other complicated tool to this setup, because I feel like I need to "digest" what I've learned so far.

PS. ECS CLI supports deploying using a Docker Compose file, but it's missing some Docker Compose features that I'm currently using.
How do you work with kids at home?
Tags: watercooler, healthydiscussion
Published: 2020-04-13 16:59:30

---
title: How do you work with kids at home?
published: true
description: How do you handle working from home with kids?
tags: watercooler,healthydiscussion
---

Hello, my name is Alvaro, and I am part of a little family with two parents (one of them myself) and two little kids.

Like many other people, we have been at home as our offices and schools closed due to coronavirus... but with both parents working, the situation got a bit complicated: when only one of us has a meeting, the other one can look after the kids; but when we both have meetings at the same time, things get difficult.

<figure>
![Animated gif of a pig with many piglets running around it](https://dev-to-uploads.s3.amazonaws.com/i/th1f1eqy8m37gzpbmwie.gif)
<figcaption>Working from home while schools are closed</figcaption>
</figure>

So far, we handled it as we could, but as the WFH continues, we are getting more and more meetings, which overlap between both parents, and the time to take care of the kids has been considerably reduced.

We don't want to have the kids watching TV/Netflix all that time, drawing/painting/playing keep them entertained for a little while, and activities like ABC Mouse/PBS Kids apps sound cool but also include screen use (which doesn't seem ideal and brings a guiltiness feeling). 

Plus we don't want to have them unattended because they are kids old enough to do a lot of things, but not old enough to know better... which is driving us a bit nuts sometimes.

How do other parents in a similar situation handle it? Do you have any suggestions or tips?
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-13 16:56:57

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

Today implements some provider, constructor, send data to other screen, and wraping up about course,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Learn Machine Learning through blog course 
Tags: machinelearning, python, datascience, blog
Published: 2020-04-13 16:49:17

As a person, I prefer blogs over videos every time and I feel there might be many people like me. I am currently learning Machine Learning from various online sources and paid courses, I feel like sharing everything I learn through blogs.

I am starting a Machine Learning course through blogs. It's free of cost. Now comes what I had done in ML, I myself am learning ML right now(you cant completely learn anything in technology or a language), I was among top ten finalists in techgig's ML hackathon(was unable to participate in finals due main semester exams). Now, why should you choose my blogs over any other learning website?
1. It's free of cost.
2. I am trying to cover a vast syllabus. (a little bit of data analytics too)
3. You will get everything in one place i.e maths part of ML, Python prerequisites for ML, and of course ML.
4. I will be writing blogs for making projects too step by step.

The overview of the curriculum for maths and python (Would update with detailed one soon)

1. Python - keywords, variables, data types, operators, loops, data structures(list, tuple, set, dictionary, strings), functions, modules, packages, file handling, exception handling, Numpy, matplotlib

2. Maths - 3d plot, binary search, histogram, distribution, mean, median, vectors, dot product, projection, basic figures, probability, statistics, binomial distribution, variance, creation, K-S test, MNIST data set, PCA. 

I will be posting blogs on dev and my site both. (will put the topic number in every blog to arrange the content). 

My website
https://www.harshitaramchandani.tech/

To get subscribed to notifications of posts send "I want to subscribe" in contact box of the website or comment your email id below.
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-04-13 16:32:58

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. To hCaptcha or to reCAPTHCA?

Thinking of following in Cloudfare's footsteps and switching to hCaptcha? This post focuses on why one might want to move away from Google's reCAPTCHA, and how to implement the change.

{% link https://dev.to/stanbright/cloudflare-replaced-recaptcha-with-hcaptcha-i-followed-their-example-it-took-me-18-min-1ipn %}

#2. How To Help

Ask and you shall receive - Carolyn summarizes twelve tips from Twitter on how to onboard junior developers. Honestly, these are good onboarding tips for developers at any level!

{% link https://dev.to/carolstran/onboarding-a-junior-developer-to-your-team-here-s-12-tips-4g3a %}

#3. Pattern Matching

Zeeshan guides us through all the syntax behind regex - from basic matchers to lookarounds to flags. 

{% link https://dev.to/ziishaned/learn-regex-the-easy-way-c4g %}

#4. Authenticate & Authorize

If implemented incorrectly, storing JWT tokens can cause your web application to be vulnerable to attacks. George teaches us how to secure JWT Tokens the right way.

{% link https://dev.to/gkoniaris/how-to-securely-store-jwt-tokens-51cf %}

#5. Skeleton > Spinner

Turns out, seeing a spinner screen for two seconds is perceived to feel longer than seeing a skeleton page for two seconds. In this post, we learn how to implement a skeleton loading page.

{% link https://dev.to/sanderdebr/speed-up-your-ux-with-skeleton-loading-18ja %}

#6. Know The Basics

Spyros explains the importance for developers to, at least, understand some of the basics of web application security. In this post, they share four resources for learning. 

{% link https://dev.to/sargalias/how-to-learn-web-application-security-2ji1 %}

#7. Unbreakable

Jesco stresses the importance of a declarative mindset when looking to build unbreakable components. This post is all about mindset switching.

{% link https://dev.to/jsco/how-to-build-bulletproof-react-components-mo7 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
I've open-sourced a simple terminal based COVID-19 Tracker
Tags: javascript, node, covid19, sideprojects
Published: 2020-04-13 16:17:06

Hi everyone!. Healthy days to everyone!

I've made a simple terminal-based COVID-19 tracker using NodeJS.

You can get it here: [https://github.com/aligoren/cli-covid19](https://github.com/aligoren/cli-covid19)

# Contributions

This project took 10 minutes. So codes may not easily understandable. You might want to refactor them. Pull requests are welcome.

# Usage

These are the commands you can use;

**General Help**

```help
cli-covid19 will get global stats by default

Commands:
  index.js        cli-covid19 will get global stats by default         [default]
  index.js codes  Show all country codes
  index.js list   List all countries or by country code

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

```

**List Help**

```help
List all countries or by country code

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
  --all      list all countries                                         [string]
  -c         get country stats
  -t         get country timeline

```

**Codes Help**

```help
Show all country codes

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

```

# Example Usage

## List Global Stats

```bash
node index.js
```

![Global Stats](https://dev-to-uploads.s3.amazonaws.com/i/s3f5fcf0lcwp788hyr8i.png)

## List All Countries

```bash
node index.js list --all
```

![List All Countries](https://dev-to-uploads.s3.amazonaws.com/i/7035bj2ltwgif623bhq4.png)


## Get Country Stats

```bash
node index.js list -c us
```

![Country Stats](https://dev-to-uploads.s3.amazonaws.com/i/tdwaefe7ug4178p2zrqg.png)

## Get Country Timeline

```bash
node index.js list -t us
```

![Country Timeline](https://dev-to-uploads.s3.amazonaws.com/i/e3xhssu6783uqjihpos4.png)
GraphQL & Hasura events happening in April
Tags: graphql, javascript, react
Published: 2020-04-13 16:47:52

---
title: GraphQL & Hasura events happening in April
published: true
date: 2020-04-13 16:15:42 UTC
tags: #GraphQL #Javascript #ReactJS 
canonical_url: https://hasura.io/blog/graphql-hasura-events-april/
---

Over the next few weeks, we have over 15 online events where we will be talking about all things GraphQL & Hasura. Whether you’re new to GraphQL, looking to add GraphQL to a legacy stack or just want to know all the new features coming soon to Hasura there’s an event for you.

![](https://hasura.io/blog/content/images/2020/04/possibilities.gif)

Here’s a short guide to help you choose an event that’s right for you!

### Hasura users

- [The Hasura Community call](https://zoom.us/meeting/register/vJMpde-rqzwtnLTqR9eRj39prUTBmfyv6w) (29th April)

### Developers using GraphQL in large orgs/ Enterprise

- [Hasura demos to help you migrate from legacy stacks to GraphQL using Hasura](https://zoom.us/webinar/register/WN_bew7MXU_RiSyvT3DifiL1A) (14th & 16th April)
- [GraphQL Fireside Chats: Platform and data centric use cases with GraphQL with special guests, Sasha Solomon, Eve Porcello, and Alex Banks](https://www.graphql-meetup.com/#/2020-04-14T12:00-04:00) (14th April)
- [GraphQL Fireside Chats:  Performance and monitoring tips/tricks/caveats with GraphQL with special guests, Mark Stuart and Jon Wong](https://www.graphql-meetup.com/#/2020-04-21T12:00-04:00) (21st April)
- [GraphQL Fireside Chats: Authorization and security patterns for GraphQL with special guests, German Frigerio and Sean Grove](https://www.graphql-meetup.com/#/2020-04-28T12:00-04:00) (28th April)
- [GraphQL Fireside Chats: Event driven applications with GraphQL & serverless with special guests, Simona Cotin and Christian Nwamba](https://www.graphql-meetup.com/#/2020-05-12T12:00-04:00) (12th May)

### Developers who are new to GraphQL

- [Realtime GraphQL and serverless made easy for React with Hasura](https://www.meetup.com/budapest-js/events/266462479/)  (BudapestJS on 16th April)
- [Zero to Production with Fullstack GraphQL and React](https://remote.reactsummit.com/#schedule) (React Summit Remote Edition Workshop on 17th April)

**GraphQL devs looking to up their game**

- [How I Went from Being Skeptical about Relay to Falling in Love with it](https://remote.reactsummit.com/#talk-how-i-went-from-being-skeptical-about-relay-to-falling-in-love-with-it) (React Summit Remote Edition 17th April)
- [Building an offline-first React app with RxDB & Hasura](https://www.meetup.com/ReactJS-Bangalore/events/269501354/) (ReactJS Bangalore 18th April)
- [Integrate business logic into your GraphQL API with Hasura Actions](https://www.meetup.com/GraphQL-Wroclaw/events/268773799/) (GraphQL Wroclaw 28th April)

We are organizing more events as you read this. Keep an eye on [Twitter] (https://twitter.com/hasurahq) for announcements.

Looking forward to seeing you there!

Enjoyed this article? Join us on [Discord](discord.gg/hasura) for more discussions on Hasura & GraphQL! 

Sign up for our [newsletter](http://eepurl.com/dBUfJ5) to know when we publish new articles.
Stripe Sources integration (Python)
Tags: stripe, python, javascript
Published: 2020-04-13 16:07:19

If you've ever wanted to integrate a Stripe Sources-based payment gateway, you can refer to a Medium article I've written recently. Chao!

https://medium.com/@saicharan.reddy1/integration-of-alipay-payment-gateway-using-stripe-sources-ember-js-flask-3e6d6a50aa4f