teleren/devto huggingface dataset:
Pausing CSS Animations on Hover
Tags: css, ux, ui, animation
Published: 2020-04-03 04:43:48

---
title: Pausing CSS Animations on Hover
published: true
date: 2020-03-28 00:00:00 UTC
tags: CSS, UX, UI, Animation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y94msmxrp54d42fl0tl5.jpg
canonical_url: https://jackharner.com/blog/pausing-css-animations-on-hover/
---

CSS Animations are an easy, lightweight way to add a little motion and excitement to a page. You definitely don't want to overdo it, though. One of the most frustrating things as a user is when you go to click on something, it moves, and you miss. Today I'm going to show you how to pause your CSS animations when someone goes to click on them.

## The Animation

We'll start with one of my favorite simple animations, the Pulse:

```
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
```

I've used that animation many times to emphasize a discount, bring focus to the best deal on a Pricing page, or even just to make a beating heart.

## Treat Your Users Like Stormtroopers - Avoid Moving Targets

![](https://thumbs.gfycat.com/ClearDistortedFlies.webp)

If there are clickable things inside the thing you're animating, you don't want your users to have to click on moving targets. It's so frustrating to click and miss, let alone click, miss, and click on something else. Luckily, there's a really simple way to pause CSS Animations in CSS without JavaScript. The key to it all is the `animation-play-state` property. Let's see it in (SCSS) action:

```
.box {
  animation: pulse 3s infinite;

  &:hover {
    animation-play-state: paused;
  }
}
```

As you can see ([Click Here for a Live Demo](https://jackharner.com/blog/pausing-css-animations-on-hover/)), it starts and stops the animation when you hover your mouse in and out of it.

By setting the `animation-play-state` to `paused` on hover, the animation will pause, your click targets will stop moving, and your users will be happy. I had experimented with basically removing the animation on hover but that caused lots of jumps and skips. `animation-play-state` literally just pauses the animation and un-pauses when you stop hovering.

Super simple way to have more user-friendly animations on your site.
React: Subscribe to events and debounce with RxJS
Tags: react, webdev, javascript, rxjs
Published: 2020-03-27 23:12:21

---
title: React: Subscribe to events and debounce with RxJS
published: true
description: Use React Hooks and RxJS to subscribe to a window event and debounce it
tags: react, webdev, javascript, rxjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1brjrnxfsjsjrmnbvkvw.jpg
canonical_url: https://fodor.org/blog/js-react-event-rxjs-debounce/
---

Today I would like to show you an easy way to subscribe to a window event in React and how you can debounce it, so that your callback is not called too often.

One scenario when this could prove useful, is if you want to make some kind of update on your page whenever the size of the window has changed.

So how do we know when the window has been resized? We can use the browser built-in method `addEventListener`, like so:

```js
window.addEventListener('resize', handleResize);
```

And we unsubscribe with:

```js
window.removeEventListener('resize', handleResize);
```

Only we are not going to do any of that. Instead we'll be using RxJS and its `fromEvent` method:

```js
const listener = fromEvent(window, 'resize');

const subscription = listener.subscribe(handleResize);

// and unsubscribing with
subscription.unsubscribe();
```

Now let's add this to our React component function and use the `useEffect` hook to make a custom hook that is going to handle the subscription and unsubscription. We'll call this custom hook `useWindowResize`.

```js
import { fromEvent, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';

function useWindowResize(people) {
  useEffect(() => {
    const handleResize = () => {
      // Do stuff
    }

    const event = fromEvent(window, 'resize').pipe(debounce(() => timer(1000)));

    const subscription = event.subscribe(handleResize);

    return () => subscription.unsubscribe();
  })
}
```

Now every time the window is being resizes, we are going to be calling the `handleResize` method. But, it will never be called more often than once per second (1000ms).

Have a nice day!
Make your own Dev.to CMS livestream - Part 1
Tags: livecoding
Published: 2020-03-27 22:41:36

---
title: Make your own Dev.to CMS livestream - Part 1
published: true
description: Livecoding my own Dev.to CMS with Next.js + Preact + TypeScript + Tailwind UI
tags: Livecoding
slug: dev-to-cms-stream-1
displayed_publish_date: "2020-03-28"
canonical_url: https://www.swyx.io/writing/dev-to-cms-stream-1
---

As someone who uses [Dev.to as a headless CMS](https://www.swyx.io/writing/devto-cms/), I feel a lot of personal pain points with the very simple default editor we get in Dev.to. I figured I would try a personal project with all new tech that I know some things about but haven't built anything serious with:

- Preact
- Next.js
- TailwindCSS

And done in TypeScript because that's how I roll.

Source: https://github.com/sw-yx/dev-to-cms
Demo: https://dev-to-cms.now.sh

[Here is my first livestream of that!](https://www.youtube.com/watch?v=dR2xZbViyks&feature=youtu.be) Had a slow start but got a lot done in 90 minutes.

Dev.To embed:

{% youtube dR2xZbViyks %}


## Catch up on the Dev.to CMS LiveStream!

- [Day 1 - Setup Next.js and Tailwind UI, list posts through API routes](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-1-2ad1) - 90 mins
- [Day 2 - setting up a Markdown Editor with Next.js, Tailwind UI, Highlight.js, React Hook Form, and React Query](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-2-6mf) - 3 hours
- Quick Fix - [How To Add Monaco Editor to a Next.js app](https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3) - 18 mins
- [Day 3 - Refactoring to Edit Existing Posts](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-3-c65) - 3 hours
- [Day 4 - Polish Day! Implementing Notifications, Markdown preview, and programmatic Redirects, and Using Web Components in Next.js](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-4-6em) - 3 hours
- [Instant GraphQL with OneGraph - Screenshares in Public with Sean Grove](https://dev.to/swyx/instant-graphql-with-onegraph-4hi8) - refactoring handrolled Dev.to API access with OneGraph and GraphQL
- [How and Why to Un-Reset Tailwind's CSS Reset](https://dev.to/swyx/how-and-why-to-un-reset-tailwind-s-css-reset-46c5)
Day 104 : Test Drive
Tags: hiphop, code, coding, lifelongdev
Published: 2020-03-27 22:41:02

_liner notes_:
- Professional : Got the tutorial rewritten and successfully deployed to the test server and got some folks on the team to check it out and give feedback. Just a couple of things and got them done. Hoping to get some more internal testing from members outside the team to give it a test drive. So far, I'm told it's a lot easier and faster to complete. Also had some meetings. Pretty good day.

- Personal : Last night, I went through a bunch of tracks for this week's radio show. Did a quick layout of how I want the admin section of a project to look.

![View of a forest in front of mountains in Gold Creek Pond in Washington State](https://dev-to-uploads.s3.amazonaws.com/i/nywb5nvoh2c0ilygd04i.png)

Going to go though some more tracks and maybe start working on the admin section. Going to keep it as simple as possible so I can start to get submissions hopefully next week.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube oGSRg5MrjU0 %}
Video Call Bingo
Tags: javascript, webdev
Published: 2020-03-27 22:03:57

This is a Bingo game that you can play with fellow colleagues/friends during video calls. Click on the squares to mark them as they occur during your video call. First player to mark 5 squares in a row (horizontally, vertically or diagonally) wins.

It's just something quick I made now that I'm doing a lot more video calls while working from home.

https://bingo.seymour.co.za/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3et97ljettdgqxje4s89.png)
Help, Please.
Published: 2020-03-27 21:58:47

Hello DEV community!
I'm 23 years-old. I graduated with a degree in Business Administration (General) and was pursuing a career in Finance. I've recently grown an interest in programming and I've decided to switch my career. One problem is that I can't stop thinking I'm TOO OLD or that I won't be able to comprehend the knowledge a CS graduate has or someone who started coding when they were like 17 or something. 
I'm a perfectionist and being just good at what I do won't be enough for me. I need to be excellent. Is it possible? Any help? 
#starter #learner #coding #programming #help #please
Quick guide to sorting algorithms + fastest comparison sort!
Tags: python, database, datascience, tutorial
Published: 2020-03-27 21:58:07

We made a video breaking down comparison sorts into three levels: N^2, N log N, & hybrid algorithms + a fun animation comparing the algorithms to see which one is the fastest! 

After watching, you should have a better understanding of the different types of sorting algorithms as well as the benefits and drawbacks of each and when to use them. Enjoy! https://www.youtube.com/watch?v=qk7b4-iyCJ4  

While you're add it, brush up on your interview skills with our top tips for technical interviews in Python: https://www.youtube.com/watch?v=Zee665ssm8Y&t=13s
How long until bit.ly runs out of unique numbers?
Tags: discuss
Published: 2020-03-27 21:57:14

This is an exercise for code newbies. It actually doesn't require any programming, just a little bit of calculation:

1. Consider a service such as bit.ly that generate short Urls

2. Assume that the generated key is always 7 alphanumeric characters long (using both upper case and lower case letters)

3. Suppose people around the world are generating short Urls at a rate of 1000 short Urls every second.

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

Question: How long takes until bit.ly runs out of unique sequences for the short Urls?
EF (code first) Migration and Update to database
Tags: entityframework, migration
Published: 2020-03-27 21:49:29

  
 **EF Code First in Visual Studio**

If you are using EF Code first, you already know about DBSETs and Entity Models.  Adding or removing fields, changing namespaces, and altering property types in *any* Entity Model is common during the development cycle.

But how do you get these changes out to the database with a clean set of data?

Get a clean build first and then...


**Add a Migration for the New Schema**

```sql
Add-Migration XYZMigrationName 
  -Project XYZProjectName.Data
  -StartupProject XYZProjectName.Web.Api 
  -Context DBStore
```

**Drop the Existing Database in SSMS**

```sql
USE [master]
GO
alter database [DBName] set single_user with rollback immediate
DROP DATABASE [DBName]
GO
```
**Udpate the Database**

```sql
Update-Database 
  -Project XYZProjectNsme.Data 
  -StartupProject XYZProjectName.Web.Api 
  -Context DBStore
```

The database should be completely new with proper changes and data (if you use seed data)...

Note that the Add-Migration and Update-DataBase commands can be run from PackageManager Console window within Visual Studio. Or Powershell, or Visual Studio code Termial Window...

JWP2020
Learning basic HTTP with netcat
Tags: netcat, arch, linux
Published: 2020-03-27 21:47:28

---
title: Learning basic HTTP with netcat
published: true
description: Just having some fun
tags: #netcat #arch #linux
---

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

This past week I’ve been using SSH to connect to an old computer that was given to me. I installed a copy of Arch Linux just because I thought it would be “fun”.  I’m learning new things that are keeping me curious about Linux, networking, and programming. Starting out with a basic install had me learning about the boot process, systemd, and configuration. I’ve spent most of my free time learning to use the command line more effectively. I remain in awe of all the tools that are available to allow me the opportunity to have a deeper understanding of my machines. Sometimes I try to envision the minds of the people who have created this electronic revolution. 

Thank you to everyone that supports open-source. Hopefully I can return the favor someday.
What’s your alternative solution? Challenge #2
Tags: challenges, discuss, javascript, codenewbie
Published: 2020-03-27 21:20:04

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Print all odd numbers less than 100.

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge02

for(var i = 1; i <= 100; i += 2)
{
    println(i);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Release of rudiments v0.4.0
Tags: showdev, python, pypi
Published: 2020-03-27 20:59:04

---
title: Release of rudiments v0.4.0
published: true
description: Fundamental elements for any Python project, like configuration handling.
tags: showdev, python, pypi
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3vjtb52nxzadjx7cj2bz.png
---
> *New release of my Python package with fundamental elements for any Python project, like configuration handling.*

[rudiments](https://github.com/jhermann/rudiments#readme) is a Python package that collects ‘miscellaneous’ functionality that is unspecific in nature and shared among many projects. The package provides runtime support for my [Springerle](https://github.com/Springerle) cookiecutters, which enable you to quickly create new Python projects that work out of the box.

The new [release 0.4.0](https://github.com/jhermann/rudiments/releases/tag/v0.4.0) fixes some minor problems regarding newer `Click` versions, and path handling under Windows. It also drops Python 2.7 support, so Python 3.5 or higher is required now.

See the [rudiments documentation](https://rudiments.readthedocs.io/en/latest/usage.html) for details on using the contained features.

> *Image credits:* [annola on Flickr](https://www.flickr.com/photos/annola/)
Edpresso creator spotlight: Cynthia Peters
Tags: webdev, wecoded
Published: 2020-03-27 20:41:19

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

**Cynthia Peters** is an information technology intern at Relevant Systems who has been in the tech field for six years. Peters initially began coding in 2013 out of boredom and because she needed to pass her first-year exams. Although Peters never really liked computers in high school, she grew fond of them through her classes. At the time, she was only working with Q-basic, but the feeling of being able to create something blew her mind. Ever since then, Peters and her computer have been inseparable. 

Peters is currently exploring different career paths in tech. She says, "I've dabbled in random career paths in tech, from social media manager to digital marketer, to blogger, to web development, and now to mobile app development. I just enjoy the tech space, there's a lot to explore."  

When asked why she enjoys being active in the online dev community, Peters said, "I love that I can write and people to get read and understand or learn from my experiences. It's so heartwarming to get reviews. The​ online dev community is so beautiful, it makes me cry!"

Check out Cynthia's shots on [Edpresso](https://www.educative.io/edpresso) ([1](https://www.educative.io/edpresso/how-to-get-started-with-flutter),[2](https://www.educative.io/edpresso/understanding-and-using-flutter-packages),[3](https://www.educative.io/edpresso/understanding-flutter-hot-reload-and-hot-restart-the-simplest-way),[4](https://www.educative.io/edpresso/understanding-widgets-in-flutter-burger-analogy)) or find her on [Twitter](https://twitter.com/iamCynthiaPeter) or [LinkedIn](https://www.linkedin.com/in/cynthiapeter/).
Samuel L. Clippath
Tags: codepen
Published: 2020-03-27 20:40:53

---
title: Samuel L. Clippath
published: true
tags: codepen
---

<p>I was inspired by another pen using clip-path with a polygon, and this idea sprang into my head: animate a clip-path using css properties (css variables) using plain "native web technologies" - vanila here there and everywhere :-)</p>

<p>As I like Samuel L. Jackson his word were chosen. Be inspired, share the creativity, not the virus </p>

{% codepen https://codepen.io/netsi1964/pen/JjdwWVZ %}
This binding in JavaScript – 4. New binding
Tags: javascript, webdev, tutorial, learning
Published: 2020-03-27 20:21:14

This post ([This binding in JavaScript – 4. New binding](https://www.sargalias.com/blog/this-binding-in-javascript-new-binding/)) was originally published on [Sargalias](https://www.sargalias.com).

In this series we talk about `this` binding in JavaScript.

This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.

Basically in JavaScript there are 4 modes for `this` binding. Make that 5 if we include arrow functions.

In order of lowest priority to highest priority, here they are:

1. Default binding
2. Implicit binding
3. Explicit binding
4. New binding
5. Arrow functions
6. Gotchas and final notes

In this post we'll talk about new binding.

---

## How new binding works

`new` is a special keyword in JavaScript.

It does a lot of things, but we'll only talk in detail about how it relates to binding.

To start off, note that `new` has even higher precedence than even hard binding. Another way of thinking about it is that it ignores the normal binding rules and does its own thing.

You can use `new` when calling functions like so: `new foo()`.

`new` does 4 things:

1. It creates a new empty object.
2. It makes `this` be the new object.
3. It makes `foo.prototype` be the prototype of the object.
4. It implicitly returns `this` if nothing else is returned from the function.

For now ignore points 3 and 4 until a different blog post. Let's focus on points 1 and 2, the binding.

To recap, when you call a function with `new` before it, you create a brand new empty object which is assigned to `this` inside the function.

For example:

```js
function foo() {
  console.log(this);
}

new foo(); // outputs an empty object
```

As mentioned, `new` has higher precedence than even hard binding.

```js
const objForBind = { name: 'objForBind' };

function foo() {
  console.log(this);
}

const boundFoo = foo.bind(objForBind); // hard bind foo to objForBind

new boundFoo(); // logs a new empty object to the console, not objForBind
```

Explanation:
`new` has higher precedence than explicit and implicit binding. It ignores them, creates a new object, and binds it to `this`.
14 Days - 14 Articles: Corona Lockdown Binge Learning
Tags: codenewbie, tutorial, 100daysofcode
Published: 2020-03-27 20:19:39


### 1. [JavaScript closures made super easy](http://ngninja.com/posts/javascript-closures-made-super-easy)
---
### 2. [5 Very powerful Lodash functions you should know](http://ngninja.com/posts/powerful-lodash-functions-javascript)
---
### 3. [What happens when you enter URL and hit enter in browser?](http://ngninja.com/posts/steps-after-you-type-url-in-browser)
---
### 4. [Prototypal inheritance in JavaScript super simplified!](http://ngninja.com/posts/prototypal-inheritance-in-javascript)
---
### 5. [5 Common mistakes JavaScript developers make](http://ngninja.com/posts/mistakes-by-javascript-developers)
---
### 6. [OOP - Abstraction explained with a Chinese restaurant analogy](http://ngninja.com/posts/what-is-abstraction)
---
### 7. [JavaScript Quiz: How well do you know JavaScript?](http://ngninja.com/posts/javascript-quiz)
---
### 8. [How SSL certificate works? In plain english.](http://ngninja.com/posts/how-secure-socket-layer-works)
---
### 9. [How To Build Wealth Even If Your Pockets Are Empty?](http://ngninja.com/posts/build-wealth-with-no-money)
---
### 10. [How to make passive income? More importantly - WHY?](http://ngninja.com/posts/how-to-make-passive-income)
---
### 11. [How much I spend per month as a Tech Entrepreneur.](http://ngninja.com/posts/how-much-i-spend-per-month)
---
### 12. [React Crash Course - Learn React JS in 5 Minutes](http://ngninja.com/posts/react-crash-course)
---
### 13. [Most Frequently Asked JavaScript Interview Questions](http://ngninja.com/posts/frequently-asked-javascript-interview-questions)
---
### 14. [Must Have Best VSCode Extensions To Increase Your Productivity](http://ngninja.com/posts/vscode-must-have-extensions)
---

## I hope you enjoy them!


*Disclaimer: All these articles are from my blog [NgNinja Academy](http://ngninja.com/)*