teleren/devto huggingface dataset:
Another 100 underline/overlay animations | The extended CSS collection 🥇🥈
Tags: css, beginners, webdev, codepen
Published: 2021-03-30 10:39:17

You all liked my previous [collection of 100 animations](https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40) so here I am with another collection. Now you have more than 200 different animations!

Like the previous one, you will find No SVG, No JS, No extra tag, No pseudo element, No keyframes. Only one element and transitions.

Enjoy 👍

---

## Table of content

* [The Shape](#the-shape)
* [The Double II](#the-double-ii)
* [The Unexpected II](#the-unexpected-ii)
* [The Wavy](#the-wavy)
* [The Shining](#the-shining)
* [The Shadowed](#the-shadowed)
* [The Transformed ](#the-transformed )
* [The Infinite II](#the-infinite-ii)
* [The Multicolor](#the-multicolor)
* [The Sliding II](#the-sliding-ii)
* [The Fancy II](#the-fancy-ii)
* [The Inverted II](#the-inverted-ii)
* [The 3D II](#the-3d-ii)
* [The Morphing](#the-morphing)

---

### The Shape

{% codepen https://codepen.io/t_afif/pen/NWdRZQj %}

### The Double II

{% codepen https://codepen.io/t_afif/pen/wvgzVaJ %}

### The Unexpected II

{% codepen https://codepen.io/t_afif/pen/eYgdqZL %}

### The Wavy

{% codepen https://codepen.io/t_afif/pen/YzNGmpy %}

### The Shining

{% codepen https://codepen.io/t_afif/pen/vYgXomG %}

### The Shadowed

{% codepen https://codepen.io/t_afif/pen/wvgzVrr %}
<sup>I am using a monospoce font for (6) because it's more convenient to have all the character at the same width</sup>

### The Transformed

{% codepen https://codepen.io/t_afif/pen/wvgzVmP %}
<sup>For (3),(4),(6) and (7) the value used inside the `clip-path` (`21.5px` and `-38.43px`) is around `tan(angle)xWidth of the element` . For the (5), it's a trial & error value</sup>

### The Infinite II

Keep the hover a long time

{% codepen https://codepen.io/t_afif/pen/MWJbgYM %}

### The Multicolor

The below is suitable for monospace fonts where we can use the `ch` unit and all the character have the same width

{% codepen https://codepen.io/t_afif/pen/BapQBKP %}

### The Sliding II

The below requires us to know the width of the element so it's also suitable for monospace fonts.

{% codepen https://codepen.io/t_afif/pen/qBRqWRR %}

### The Fancy II

{% codepen https://codepen.io/t_afif/pen/mdRObmx %}

### The Inverted II

The below doesn't work on Firefox due to a [known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1571244)

{% codepen https://codepen.io/t_afif/pen/eYgBOGp %}

### The 3D II

I am using the variable `--d` to easily control the 3D depth without changing the whole code

{% codepen https://codepen.io/t_afif/pen/zYNoOPB %}

### The Morphing

{% codepen https://codepen.io/t_afif/pen/qBRqWxj %}

----

### That's it

As usual, pick your favorite and see you next collection!

Don't forget to take a look at my CSS loaders collection:

{% post https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l %}
🤖Building a Telegram bot with Apache Kafka, Go, and ksqlDB
Tags: techtalks, apachekafka, go, ksqldb
Published: 2021-03-30 10:37:33

{% youtube 45geuWUJEQg %}

📔 [Slides](https://talks.rmoff.net/hFhvES)
👾 [Code](https://github.com/confluentinc/demo-scene/tree/master/telegram-bot-carparks)

> Imagine you’ve got a stream of data; it’s not “big data,” but it’s certainly a lot. Within the data, you’ve got some bits you’re interested in, and of those bits, you’d like to be able to query information about them at any point. Sounds fun, right? Since I mentioned “querying,” I’d hazard a guess that you’ve got in mind an additional datastore of some sort, whether relational or NoSQL. But what if I told you...that you didn’t need any datastore other than Kafka itself? What if you could ingest, filter, enrich, aggregate, and query data with just Kafka? With ksqlDB we can do just this, and I want to show you exactly how. In this hands-on talk we'll walk through an example of building a Telegram bot in which ksqlDB provides the key/value lookups driven by a materialised view on the stream of events in Kafka. We'll take a look at what ksqlDB is and its capabilities for processing data and driving applications, as well as integrating with other systems.
Advanced SQL - PostgreSQL
Tags: sql, database
Published: 2021-03-30 10:35:08

#Functions and Operators:

**Operators:** Logical, Comparison, String, Date Time
**Functions:** Mathematical, String, Date Time

Logical Operators: **AND OR NOT**

a|b|a AND b|a OR b
-|:---:|:---:|:---
TRUE|TRUE|TRUE|TRUE
TRUE|FALSE|FALSE|TRUE
TRUE|NULL|NULL|TRUE
FALSE|FALSE|FALSE|FALSE
FALSE|NULL|FALSE|NULL
NULL|NULL|NULL|NULL

a|NOT a 
--------|:-----
TRUE|FALSE
FALSE|TRUE
NULL|NULL

```
SELECT * from film
WHERE release_year = 2006
AND NOT rental_duration = 6;

SELECT * from film
WHERE release_year in (2006, 2007)
AND NOT in rental_duration (6,5);
```
**Comparison Operators**

Operator|Description
--------|:-----
<|less than
>|greater than
<=|less than or equal to
>=|greater than or equal to
=|equal 
<>|not equal

```
SELECT * from film
WHERE release_year `BETWEEN` 2002 and 2006;

SELECT * from film
WHERE length = 160
OR release_year `BETWEEN` 2002 and 2006;
```

**Mathematical Operators**
```
SELECT tile, length, round((length/60),2) length_in_hour_round
FROM film;

SELECT title, rental_rate, 
ceiling`(rental_rate) rental_rate_new
FROM film;
```

*`ceiling` is used to convert decimal numbers to nearest higher integer.*

**Formulas and Functions**
*Area of a circle: PI * (radius)^2*

```SELECT PI() * (500)^2 `AS AreaOfCircle;```

*TO combine data from two column into a single column:*
```
SELECT firstName, lastName,
firstName || ' ' || lastName
FROM Actor;

SELECT firstName, lastName,
CONCAT(firstName, ' ', lastName) AS Full_name
FROM Actor;
```

*TO get initials of the actor:*
```
SELECT firstName, lastName,
LEFT(firstName, 1) || LEFT(lastName, 1) AS Initials
FROM Actor;
```

**Other function:** 
`LENGTH` - Length of a string
`UPPER` - Uppercase
`REPLACE` - 3 parameter (firstName, 'a', '@')

**Date Time Operators**
`now()`
`current_date`

**Aggregate Functions**
`count() min() max() sum()`


**TYPE CONVERSION**
When a data stored in one datatype is converted to another datatype, it is known as Type Conversion. There are 2 types: Explicit and Implicit

Implicit Conversion: When a data stored in one datatype is converted to another datatype automatically, it is known as Implicit Conversion

Explicit Conversion: When a data stored in one datatype is converted to another datatype using conversion functions, it is known as Implicit Conversion

 |Explicit|Implicit
-|:---:|:---
Readability |Clear and Easy|Ambiguous
Performance |Better|Negative Impact
Portability |High|Low

*Explicit conversion is preferred over Implicit*

**TRANSACTION**
Transaction bundles multiple steps into a single, all-or-nothing operation.
Significance of Transaction
- Atomic - all or nothing
- Guarantee of record
- Visibility of updates

`BEGIN;`
Update Valid_statement;
`SAVEPOINT` first_savepoint;
Update error_statement;
`ROLLBACK` TO first_savepont;
Update correct_statement;
`COMMIT;`
Underrated Articles on Dev.to from Last Week
Tags: top7, webdev, bestofdev, meta
Published: 2021-03-30 10:30:37

Hello! I'm back with another installment of underrated articles from last week!

Let's check them out 🔥 -

## 1. Overview of Functional Programming
Functional programming is a programming paradigm, a way of thinking, that consists of building software by composing functions. Carlos explains the basics of functional programming in a simple way. 
{% link https://dev.to/carloscuesta/functional-programming-in-javascript-fga %}

## 2. CSS Resources
Lanre shared the curated list of amazing CSS resources.
{% link https://dev.to/lanrewaju/css-resources-19ib %}

## 3. SEO for Developers
Search engine optimization (SEO) is the process of improving site content to rank higher in search results. Stephanie writes about efficient methods in her detailed article on SEO.
{% link https://dev.to/radiomorillo/introduction-to-seo-for-developers-5gof %}

## 4. Advice for Beginners
Fahad writes his observations in this blog post which is to help others who are new to programming.
{% link https://dev.to/fahadimran/my-advice-to-new-programmers-as-a-software-engineering-student-1bkn %}

## 5. Better Understanding of Tree Data Structure
A tree data structure is a structure where each node is connected to a previous or parent node in a hierarchical order. In this blog by Anjan, you will learn about the tree data structure. 
{% link https://dev.to/thatanjan/everything-you-need-to-know-about-tree-data-structure-2c02 %}

*That's all for this week! These were our personal favorite underrated posts from last week, and we hope you liked them. Tell us about your favorite posts that went underrated in the comments below!* ❤️
Vdev - A portfolio and resume generator
Tags: resume, portfolio, react
Published: 2021-03-30 10:06:38

Hello 👋

I am happy to announce my latest project Vdev (A portfolio and resume generator)

# [vdev.in](https://vdev.in)

Vdev generate Your portfolio based on info you filled in form and Show your info in a nice-way

Here is demo of generated Portfolio
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54vyx8c0z8hrrh6389vb.png)


Here is demo of resume Portfolio
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkvr36rtkoyq1mikyvkq.png)



Please Take a try and leave your suggestions/thoughts/opinions in the comments section.
How do you make a website look good?
Tags: design, webdev, tutorial, beginners
Published: 2021-03-30 09:58:23

How do you make a website look good?

It's a good question with many answers. 

My recommendation is to take 5-10 mins to really look and consider the UI and UX of a page and improve it by at least 1%. 

Keep doing this, and you get something great!

{% youtube kwoidjhKjs0 %}

## Recommendations
* Consider Information Hierarchy
* Keep Content Consistent
* Provide visually enjoyable content
* Use great colors
* Always spend some time to continually improve the design

We often create a page, like a portfolio, and then forget about it. A much better approach is to gradually work on it bit by bit until you create something amazing, and even then, continue to spend time to improve it's UI and UX.

You will learn more about web design in the process of doing it, rather than trying to complete it in a single go, with the possible result not being exactly the way you imagined!

If you want to learn more about web design, I'm trying to put more videos together through my Enhance UI series, if you want me to review your own design, check out the link below:

[📘 Enhance UI](https://www.enhanceui.com)

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [VS Code in Virtual Reality](https://dev.to/adriantwarog/vs-code-in-virtual-reality-4ja2)
* [VS Code on my Phone](https://dev.to/adriantwarog/vs-code-on-my-phone-how-i-did-it-1fme)
* [40 Amazing Developers You Should Follow On Youtube](https://dev.to/adriantwarog/40-amazing-developers-you-should-follow-on-youtube-5bhh)
* [Enhance UI - Design for Developers](https://dev.to/adriantwarog/enhancing-ui-design-for-developers-3peg)
let's start git from basics 
Tags: github, git
Published: 2021-03-30 09:45:57

What is git?

Well according to Wikipedia, git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems),

Enough theory, let's start doing some practical stuff, 

Step 01:- Visit https://github.com/login to log in or create a new account,

Step 02:- https://github.com/new to create a new repository, I have created one as todolist (if you already have created one, feel free to skip this step)

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

Note:- You can either make the repository publically accessible or keep it private, 

Hit the create repository button, and you are all set...

Congratulations you have created a new repository on GitHub,

Step 03:- Time to commit your local changes (from your local machine to GitHub)

From your local machine open your favourite terminal, I am using windows I have PowerShell opened, 

Navigate your repository,

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uln2gty9lvygo0odiho.png)

git init (Initialized empty Git repository in your working directory)

git remote add origin(add new remote in my case it is, https://github.com/ishfaqmaknoo/todolist )

git status (displays the state of the working directory)

So far so good, now let's add few more commands to push our code from local to staging to the remote repository

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zuukqtyv1pvrvwq4yoj.png)

git add . (adds all the files to staging area)

we can also add each file manually by doing 
(git add main.js ) this will add only the main.js file to the staging area,

let's finally push our local changes to the remote repository

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ghrcsvf8aqnsmb0t60p.png)

git commit -m (Takes the staged snapshot and commits it to the project history. Combined with git add, this defines the basic workflow for all Git users.)

git push origin master (You are ready to push your first commit to the remote repository. ) 

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

Congrats, we are done with the big picture...


Commands:- Get used to these basic commands,

git init
git status
git add . 
git commit -m "commit message"
git push origin master
Difference between JSX and HTML
Tags: codenewbie, webdev, react
Published: 2021-03-30 09:37:41

One of the requirements when you start to learn React is learning JSX. So what is JSX? This is a JavaScript syntax extension. When you are new to it and have a glance at the syntax for the first time, it looks like a mixture of both JavaScript and HTML. Here is an example;
```javascript
const heading = <h1>Hello world</h1>;
```
JSX is popularly used in React and in this post, I will be highlighting the key differences between JSX and HTML syntax. 

#### Use of className instead of class attribute
In JSX we use className attribute whereas in HTML we use the class attribute. This is because JSX is transpiled into JavaScript and class is a reserved word in JavaScript.
JSX
`<div className = "container"></div>`
HTML
`<div class = "container"></div>`

#### Self closing tags
Self-closing tags in JSX must have the forward slash whereas the forward slash is optional in the HTML self-closing tags.
JSX
`<img src="#" />
<br/>
`
HTML
`<img src="#" >
<br>`

#### Event listeners
Event listeners in JSX are written in camelCase, for instance, `onClick` whereas in HTML, they are written in lowercase for instance, `onclick`

These are some of the key differences. You can have a look at the React documentation if you would like to learn more about JSX.
Happy coding!
WhatsApp clone using Flutter, NodeJS and SocketIo
Tags: flutter, node, javascript, socketio
Published: 2021-03-30 09:33:06

Hey All,
I am working on the chat app development playlist using #flutter #nodejs and #socketio. Till now I have completed the one to one chat functionality and it is working fine (Please have a look at the images😄😄)

The topics I am covering:
📌📌 Whatsapp Layout Design using flutter
📌📌 Chat Server Development using NodejS and SocketIO
📌📌 Connect Flutter to Socket Server

You will get the to know about in Flutter side:
📌 Camera Plugin
📌 SocketIo Client Plugin
📌 Dynamic Widget Rendering and many more .......

Have look at the first comment for Playlist and Github repo links.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz5ewzydy9e35faow0hs.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma90626snbvgw9ebo9dw.jpg)
#flutte #flutterdev #socketio #nodejs #whatsappclone #devstack #flutterappdev #flutterapp #socketserevr #appdevelopment #fullstack #fullstackappdevelopment #javascript #github #appdev #developer #flutter #android #development #video
Automatic class creation for unmarshalling JSON
Tags: json, visualstudio
Published: 2021-03-30 09:25:34

---
title: "Automatic class creation for unmarshalling JSON"
published: true
description: If you're working with JSON, say for REST web services, and you don't have the class to unmarshall the response, Visual Studio can automatically generate the class for you.
tags: 
- JSON
- VisualStudio
//cover_image: https://direct_url_to_image.jpg
---
If you're working with JSON, say for REST web services, and you don't have the class to unmarshal the response, [Visual Studio](https://visualstudio.microsoft.com/) can automatically generate the class for you:
1. Open your Visual Studio Project and create a class file. Delete the contents:
![Class creation](https://www.ozzie.eu/post/json-automatic-class-unmarshall/classfile.gif)
2. Copy the JSON text string you will need to unmarshal onto the clipboard. Take this example from the [JSON Placeholder mock API](http://jsonplaceholder.typicode.com/):
```
{
	"userId": 1,
	"id": 1,
	"title": "delectus aut autem",
	"completed": false
}
```
3. Go to Edit > Paste Special > Paste JSON as Classes:
![Paste Special](https://www.ozzie.eu/post/json-automatic-class-unmarshall/pastespecial.gif)
The result is a class named "Rootobject" that you can use to unmarshal the information on your code.

Original post is [here](https://www.ozzie.eu/post/json-automatic-class-unmarshall/).
Did I upgrade WordPress to PHP 8 too early?
Tags: todayilearned, wordpress, php
Published: 2021-03-30 09:20:32

This week, a WordPress instance started to show a strange bevahior. After upgrading the Polylang plugin failed, everything else still seemed to work fine, but still no chance to upgrade Polylang, but I did not take the time to check the error logs (hidden somewhere on the shared host).

Another upgrade failure (`500 internal server error`), when Google Site Kit had an update available.

## No Plugin Updates, No Image Uploads

Then we tried to upload a new image to a post, which constantly failed with the message `"Post-processing of the image failed. If this is a photo or a large image, please scale it down to 2500 pixels and upload it again", you should watch the video carefully."`

The generic error message was not helpful, but rather misleading. Uploading a smaller image did not help.

I check the update page, WordPress was up to date, version 5.7 already installed without issues when it was released. Two plugins outdated, both still failing when trying to update.

## PHP 8

Finally I logged into the hosting provider's server settings to find out that it was another update that might have come in too early: PHP 8!

While WordPress core seems to work fine with PHP 8, at least the basic functionality, but after I went back onto safe ground and selected "**PHP 7.4 (recommended)**" for all domains serving WordPress, everything is now working as it should.

## mea culpa

To be fair, it was my fault. Some time ago, I had to make sure there are no more outdated PHP versions in use. Instead of switching to the recommended 7.4, I went for 8 without doing proper research.

But others did: Yoast published a [WordPress and PHP 8 Compatibility report in 2020](https://developer.yoast.com/blog/the-2020-wordpress-and-php-8-compatibility-report/) which dives deep into all of the details.

## Conclusion

Did I upgrade WordPress to PHP 8 too early? Probably so, but no damage done, as it was just a [personal blog](https://www.open-mind-culture.org) mainly used to try out WordPress features. So I tried, and I found out, and I will be sure to run any proper production system for my customers with the latest stable version of PHP 7.

What is your experience? Did you upgrade to PHP 8? How did you benefit? Is your site faster? What did you have to fix to make it work?
2021-03-29 | My shortlist and riding my bike
Tags: learninpublic, beginners, webdev, career
Published: 2021-03-30 09:17:21

---
title: "2021-03-29 | My shortlist and riding my bike"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/2021-03-29"
---

I have a list with short tasks I want to work / research on. From time to time I give myself some hours to do this stuff.

It's mostly simple stuff like "Have a look at website X" or "Do laundry".

So why do I have a list for this stuff? I mean most people probably don't have a list to remember doing laundry, but they do it anyway.

**I do this to keep up my focus.**

Sure, I would do it at some point, e.g. when I would _feel_ like doing it. But this is also how [binge-watching](https://en.wikipedia.org/wiki/Binge_watching) and social media madness creeps into life, "I currently feel like I should spend 4 hours on reddit to watch some funny memes.".

So I plan this shortlist stuff, I give it a dedicated place in my calendar.

I also do this with exercising. I have an appointment with myself each day at 3PM to ride my bike. Yes, sometimes I can't make it at 3 or I simply "forget" it, because I don't look into my calendar. But these days are rare. It's not about perfection, **it's about the trend & creating a habit.**
Best way to turn spare laptop to server? (And turn on 24/7)
Tags: webdev, devops, help
Published: 2021-03-30 09:11:38

I also already have a domain name.

I can also choose to run on DigitalOcean, but 5 USD Droplet sucks. (Perhaps unless I build Docker first on my laptop.)

Can I just get a static IP address, then attach A name to domain server? Or, is localhost tunneling a bad option? (I find https://localhost.run slow to load, but it does work.)

{% post https://dev.to/dotnetcrunchh/how-to-access-localhost-from-the-internet-2ddb %}

My server is not just static files, but full stack, BTW.

Lastly, how I do ensure laptop (Xubuntu, BTW), is always awake?
React JS Case Study Festival
Tags: react
Published: 2021-03-30 09:05:03

We would love to invite you to our upcoming React JS Case Study Festival by Geekle, which is gonna be on April 27-28, 2021.

This is going to be an incredible event with:
50+ speakers,
10,000 attendees, and
44 hours of unique content!

At this event you will have the opportunity to:
* learn battle-proven React JS case studies of TOP companies as AWS, Facebook, Codeacademy, Product Hunt and others;
* learn how to make your front end accessible to everyone;
* know more about Hooks and best testing practices;
* and much more. 

Don’t miss out on the opportunity of joining this event on April 27-28, 2021!
For more information and tickets, find us here:
https://react.geekle.us/