teleren/devto huggingface dataset:
Amazing Card Fill Hover Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-06-18 06:34:15

Hello Guys,

Today I created a Amazing Card Fill Hover Using HTML & CSS. In this card I am using only HTML and CSS for hover animation.

#####Checkout recent post :
{% post https://dev.to/nikhil27b/amazing-button-animation-using-html-js-2ga1 %}

```html
 <div class="row">
        <div class="card">
            <h4>What is a Frontend Develoment?</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam porro similique aliquid debitis ipsam soluta dolorum ipsa! Voluptate, suscipit iure.</p>
        </div>
    </div>
```
This is a simple html I am using for card. For hover effect I am using `card::before` tag for position and after hover I only scale the `.card:hover::before` property.

```css
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #343a40;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  user-select: none;
}

.card {
  border-radius: 10px;
  filter: drop-shadow(0 5px 10px 0 #ffffff);
  width: 400px;
  height: 180px;
  background-color: #ffffff;
  padding: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: 0.6s ease-in;
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  right: -15px;
  background: #7952b3;
  height:220px;
  width: 25px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card:hover::before{
    transition-delay:0.2s ;

  transform: scale(40);
}

.card:hover{
    color: #ffffff;

}

.card p{
    padding: 10px 0;
}
```

If you find this useful in a post like and save this post also comments about your thoughts and new ideas for post.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!


{% codepen https://codepen.io/NikhilBobade/pen/oNZmRpa %}
Maximize performance of api
Tags: api
Published: 2021-06-18 06:33:22

i have to implement a api in net core that accept items (with 5 simple fields), check if they exists on a SQL server database and insert/update them. Every user will call this api 2-3 times a day and needs to pass about 500 items.

What is best approch in terms of performance (ti not overload my system): A) Accept a compressed JSON, make 500 read and write sequentually and return status B) Accept a single item and tell the user to call it for each item (so about 500 x 3 times a day) C) Accept a compressed JSON, return an operation id, do operations in an asyncronous task and return result in a different api through the operation id.

Thanks
Laravel 8 CRUD with Image Upload Tutorial
Tags: laravel
Published: 2021-06-18 06:29:33

I am going to explain you example of laravel crud with image upload. This article will give you simple example of crud with image upload in laravel. it's simple example of laravel image upload crud. you can see laravel image upload with crud. you will do the following things for laravel crud example with image upload .

You just need to follow few step and you will get basic crud with image upload stuff using controller, model, route, bootstrap 4 and blade. you can easily create crud app with image upload in laravel 6, laravel 7 and laravel 8 version app.

In this tutorial, you will learn very basic crud with image upload operation with laravel new version 8. I am going to show you step by step from scratch so, i will better to understand if you are new in laravel.
[Laravel 8 CRUD with Image Upload Tutorial](https://www.codecheef.org/article/laravel-8-crud-with-image-upload-tutorial)
DynamoDB Streams
Tags: aws, dynamodb, node, beginners
Published: 2021-06-18 06:28:28

While working on a backend service, I came across this problem where I had to retrieve a set of data of a specific type, but that type wasn’t having any index and the data was also updating frequently.

Since the data was constantly changing, the first thing that came to mind was to attach a trigger. However, when looking at the documentation on how to add triggers to DynamoDB in AWS, I opted to go with another approach :p

By the time I had time to consider, there were three viable options that were obvious without lengthy consideration

→  **Complete scan of the table and filter the results**
 From the very first moment it entered my head, I knew this is a very inefficient solution

→ **Add an Index for that type**

There were a couple of reasons I didn’t go along with this idea

- That wasn't a very frequently queried data
- Already had so many indexes so didn't want to add one more just yet before trying other solutions

→  **Run a cron-job** 
A cron-job that will perform a table scan, store the result in a cache, or store it in another table.

> A Great man once said, If you can't think of anything else, run a cron-job.

_____
Back in my mind, I wasn’t quite convinced with any of the above solutions and so I gave Dynamo db triggers try. I was aware of Dynamo db streams but never tried them.

DynamoDB Streams are basically triggers like that we have in Relational DBs but the only difference is that it generates a stream of events when there is a data change and you can easily pipe that stream into Kinesis or a Lambda (In my case it was lambda).

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

AWS made the things look difficult but the process was not complex at all. 

All I had to do was the following -

- Setup a stream on the dynamodb table which was just a one click action.
- Create a new lambda function and attach it to the dynamodb stream which was also fairly easy
- Rest was basic stuff of listening the data then processing it and finally saving it to the new table

DynamoDB streams are much more than what I have covered in my use case. You can read more about it here : -[https://aws.amazon.com/blogs/database/dynamodb-streams-use-cases-and-design-patterns/](https://aws.amazon.com/blogs/database/dynamodb-streams-use-cases-and-design-patterns/)
Different Types of String Distances
Tags: algorithms, dev
Published: 2021-06-18 06:22:19

String distance means how similar/dissimilar two strings are. String distance has very widely practical usage and it is also a very important topic for placement interviews. String distances are used in [natural language processing](https://en.wikipedia.org/wiki/Natural_language_processing), it has application in spell correction, in checking plagiarism. It also has it's usage in bioinformatics, where string distance is used to find the similarity of DNA sequences, which can be viewed as strings of the letters A(adenine), C(cytosine), G(guanine) and T(thymine).

There are different kind of string distances, here in this article we will see the most important ones, which are important for placement interview and also mostly used in applications of string distances(I have given link in the end of article for people who are interested in to know other string distances as well). Below are the important string distances:
1. **Levenshtein distance** - It allows *deletion, insertion and substitution*.
2. **Longest Common Subsequence (LCS) distance** - It allows only *insertion and deletion*, not substitution.
3. **Hamming distance** -  allows only *substitution* (hence, it only applies to strings of the same length).
4. **Damerau–Levenshtein distance** - allows *insertion, deletion, substitution, and the [transposition](https://en.wikipedia.org/wiki/Cyclic_permutation#Transpositions) of two adjacent characters*.
5. **Jaro distance** - allows only *transposition*.



For more interested geeks, here are questions Based on mentioned string distances with links are given below:
1. [Levenshtein Distance](https://practice.geeksforgeeks.org/problems/edit-distance3702/1)
2. [Longest Common Subsequence](https://leetcode.com/problems/longest-common-subsequence/)
3. [Hamming Distance](https://leetcode.com/problems/hamming-distance/)
4. [Damerau–Levenshtein Distance](https://www.mathworks.com/matlabcentral/cody/problems/2309-calculate-the-damerau-levenshtein-distance-between-two-strings)
5. [Jaro Distance](https://www.geeksforgeeks.org/jaro-and-jaro-winkler-similarity/)

Click [here](https://en.wikipedia.org/wiki/String_metric) to know about other string distances.

Thans for your read, hope this article helped you to gain some knowledge.
Best of luck for future :)
How to clear cache in SpringBoot java??
Tags: java, codereview, codenewbie
Published: 2021-06-18 06:10:07

how do clear all the internal stored cache?😞😞😞
Java does not have any direct method which can clear all the internally stored cache.
We have a solution which we can use to achieve this,😀😄✌👌

CacheManager class has a method name getCacheNames() returns the name of the cache, and after that we use clear() to clear that cache.

we use this method to achieve our goal to clear all the cache.

CacheManager.getCacheNames().

CacheManager.getCache(cacheName).clear

https://www.javaoneworld.com/2021/06/how-to-clear-cache-in-springboot-java.html

#java
#SpringBoot
#Code
#clearcache
HTML target=_blank vs target=blank
Tags: html, webdev
Published: 2021-06-18 06:08:08

Earlier I thought they both perform the same actions like opening a link to a new tab (or window ) in the browser. But, just removing the underscore can make an important difference.

The target attribute specifies where to open the linked document.

###Example

```html
<a href="https://www.google.com" target="_blank">Visit google Site</a>
```

###With target=_blank,

Whenever we click the link, it will open in a new tab. So, let's say if we click more links then, every time a new browser tab will open which can create multiple tabs, and maybe it can frustrate the user and its experience.

![target _blank example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7e9lqt20hsga1yb99vq.gif)

---

###Alternate solutions we can use target=blank,

Now, let's remove the underscore, then the browser will open the link in a tab called 'blank' instead of opening a new one. With this, if the user will click multiple links then the links will open in a single tab.

Example

```html
<a href="https://www.google.com" target="blank">Visit google Site</a>
```

![target blank example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyhswue3i6jarwg19yus.gif)

###Demo

{% codepen https://codepen.io/nirazanbasnet/pen/wvJOgvW %}

---

Conclusion
👏👏 By coming this far I hope you can implement this awesome target attribute trick on your project. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers
Eleventy JSON endpoint with posts
Tags: webdev, javascript, api
Published: 2021-06-18 05:53:36

I'll let you in on a little secret while writing this article; I'm also working on this site and finding a neat, low JS alternative to a search function.

Don't get me wrong, Lunr and Algolia are great options, but I would like to keep my website as low impact as possible.

So starting to think about some solutions I remembered a while ago, I made a [static JSON search for a website](https://daily-dev-tips.com/posts/vanilla-javascript-live-search/).

This is a great alternative, surely it won't have a fuzzy search or extensive power, but it will be better than having no search.

In today's article, I'll focus on making an endpoint, a JSON file collecting all of my post's titles and URLs.

The whole process will be similar to how I created a [XML sitemap for this website](https://daily-dev-tips.com/posts/adding-a-sitemap-in-eleventy/).

## Adding a JSON endpoint to an Eleventy website

Let's start by making a new file in the `src` directory. I'm calling this file `static_search.njk`.

```html
---
permalink: '/search.json'
---
[
  {% for post in collections.posts %} 
  { 
    "title":"{{ post.data.title }}",
    "url":"{{ post.url | url }}" 
  }
  {% if loop.last == false %},{% endif %} {% endfor %} {%
]
```

With this, we tell Eleventy to output this file as `search.json`, forcing the JSON extension.

Inside we loop over our `post` collection and create a JSON structure with the title and URL of the post.

Last we check once we hit the last loop that we don't add a `,` since it would be invalid JSON.

Now when we build our website, we get the following result.

```json
[
  {
    "title": "Linux adding a timestamp to the bash history",
    "url": "/posts/linux-adding-a-timestamp-to-the-bash-history/"
  },
  {
    "title": "JavaScript insert newly created element after another element",
    "url": "/posts/javascript-insert-newly-created-element-after-another-element/"
  },
  {
    "title": "JavaScript insert newly created element before another element",
    "url": "/posts/javascript-insert-newly-created-element-before-another-element/"
  }
]
```

Pretty solid, right!

In another article, I'll be guiding you through using this data for a search function.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Does Java provide something which can clear all the cache at once?👆👆👆👆
Tags: java, codenewbie, tutorial
Published: 2021-06-18 05:46:00

Does Java provide something which can clear all the cache at once?👆👆👆👆❓❓❓

The answer is NO 👎👎👎😕😕😕.

Java does not provide any such feature which can clear all the cache at once.👍👍👍👍

So how do clear all the cache?😞😞😞
Found the Complete post below👇👇👇👌

https://www.javaoneworld.com/2021/06/how-to-clear-cache-in-springboot-java.html?m=1

#happycoding
#staysafe
#stayCode
Review of your Twitter developer account application
Tags: twitter
Published: 2021-06-18 05:39:34

As of July 2018, you must now apply for a Twitter developer account and be approved before you can create any new apps. All new developers must apply for a developer account to access Twitter APIs. Once approved, you can begin to use Twitters standard APIs and new premium APIs.

For this article(which I found from various resources), am going to assume you have a great idea for Twitter automation and are just looking for a little bit of help with your proposal. Then we’re going to show you how we applied, and eventually became approved.

**Steps to process the Twitter developer account**

- Go to  [developer.twitter.com](https://developer.twitter.com/) 
- Click on **Apply** in the navbar section
- Just fill in the details and submit (a very simple process)
- Once the application submitted you need to confirm the email to kickstart the process

**Now you just need to wait for the replay from Twitter **

I received a replay from Twitter within 1hr

![Screenshot 2021-06-18 at 10.48.08 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyhv6rawi8i8o8xd6un9.png) 

I have no idea what to give replay since I applied without any plan, then I have just given replay like

![Screenshot 2021-06-18 at 10.49.28 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvokyvay2u9tgflf247z.png) 

After 1hr again I got a replay from Twitter saying

![Screenshot 2021-06-18 at 10.50.50 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqtv8dnk4nhgv2whclbq.png) 

Googled and I found some useful info, Just written blindly (of course with some thoughts)

![Screenshot 2021-06-18 at 10.52.03 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpq8sfxqnv5rrx7b6f7x.png) 

Now I just waited for what is going to happen, post 2hrs I received a email saying 

![Screenshot 2021-06-18 at 10.53.00 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnieqvj5a5xxfzcy86nk.png)
 
***Yes your reading correct, Application approved. As simple as it is. ***

The approval took a day, which is too good considering Twitter’s moderation program is young and the spammers and social engineers are still out there in full testing this new gated system.

Hope this info helped those who stuck with mail processing with Twitter.

Have a nice day!
Go Programming - Hexagonal Architecture EP.2 (log, error)
Published: 2021-06-18 05:16:09

###Agenda
* log
* error

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)
EthersJS - Signing EIP712 Typed Structs
Tags: ethers, eip712, signature, ethereum
Published: 2021-06-18 05:13:23

Heya! In this post we're going to go a quick look into using EthersJS API for the [EIP712 standard](https://eips.ethereum.org/EIPS/eip-712).

Also, before we dive in, I would like to point out that if your use case is simple as a single message, you likely do not need to complicate it with EIP712. You can simply use `signer.signMessage("hello")` API (EIP191). While if you have multiple values (like complex structs) to sign, then EIP712 can be useful.

## Setting up signer

Consider a use case where a user want to sign a complex struct. They also need to include a signature to prove that they own the private keys of an account containing some funds.

You can use Metamask. But if you're just trying for demo, you can just generate a random wallet.

```js
const metamaskProvider = new ethers.providers.Web3Provider(window.ethereum);
const signer = metamaskProvider.getSigner();

// or

const signer = ethers.Wallet.createRandom()
```

## Defining Domain Separator

Now we define our domain separator. This is useful for the case when there is a fork/clone of your app on your chain or even a different one, and some user using both the apps. The domain separator ensures different signatures for same messages by same user.

```js
const domain = {
  name: 'My App',
  version: '1',
  chainId: 1,
  verifyingContract: '0x1111111111111111111111111111111111111111'
};
```

## Defining Struct Types

```js
const types = {
  Mail: [
    { name: 'from', type: 'Person' },
    { name: 'to', type: 'Person' },
    { name: 'content', type: 'string' }
  ],
  Person: [
    { name: 'name', type: 'string' },
    { name: 'wallet', type: 'address' }
  ]
};
```

## Signing struct objects

```js
const mail = {
  from: {
     name: 'Alice',
     wallet: '0x2111111111111111111111111111111111111111'
  },
  to: {
     name: 'Bob',
     wallet: '0x3111111111111111111111111111111111111111'
  },
  content: 'Hello!'
};
```

To sign the above struct, we use `_signTypedData` method on the signer.

```js
const signature = await signer._signTypedData(domain, types, mail);
// 0x74ff2b1850dfa49f825a29760cf7f8194465190481afb49dd81f0ef7783d7b9638180110bdbf5d85ab8d9f39d2d4f4bc63f017c5b53e90bf915cf22c2b7125901b
```

This contains an underscore prepend because of the fact that it's recently introduced and is is in public beta. Once enough confidence in it, it will be moved out of beta by renaming to `signTypedData` (don't worry the underscore alias will also exist for backwards compatibility).

## Verifying signatures

You can use the `verifyTypedData` util to verify if a given signature is valid.

```js
const expectedSignerAddress = signer.address;
const recoveredAddress = ethers.utils.verifyTypedData(domain, types, mail, signature);
console.log(recoveredAddress === expectedSignerAddress);
// true
```

## Summary

That's pretty much it for this post. To summarise, we saw 
- how to define a domain separator
- struct types
- signing our struct object
- verifying a given signature
NoSQL　Date Structure
Published: 2021-06-18 05:05:06

■Our Situation
We are developing a video distribution service in the sports domain & lifeStyle. This time, I', going to migrate from AWS EC2 to firebase CloudStore.

■Process
1 テストプロジェクトで一通りの機能を試す
Try out a set of functions in a test project.

2 まず既存DBを接続していない状態でもエラーが出ない状態にリファクタ
First, refactor the existing DB to a state where no errors occur even when it is not connected.

3 既存のDB構造をもとに一旦NoSQLでのDB構造を立てる
Create a NoSQL DB structure based on the existing DB structure.

4 一つずつfetchしている関数をfirebaseに置き換える
Replace the functions that are fetching one by one with firebase.

5 問題を都度修正
Fix problems on a case-by-case basis

▼firebase 公式You Tubeチャンネルから抜粋
・firestoreについて（this is best movie）
https://youtu.be/v_hR4K4auoQ

・SQL 構造を　Firebase 構造に変換するには
https://youtu.be/ran_Ylug7AE
　
・一般的な SQL のクエリを Firebase データベース用に変換
https://youtu.be/sKFLI5FOOHs

・結合について　
https://youtu.be/Idu9EJPSxiY

・非正規化
https://youtu.be/vKqXSZLLnHA

・このQiitaの記事も参考になりそう。
https://qiita.com/1amageek/items/d606dcee9fbcf21eeec6
Affordable Seedbox And Premium apps hosting that just works
Tags: security
Published: 2021-06-18 04:59:19

Iseedfast provides you the best seedboxes at the cheapest cost. It provides you with major features that any other seedbox provides such as privacy and protection, high speed, and 24/7 support.

Moreover, the people using it gave us a positive response using this seedbox. Iseedfast provides the best services in its class with high-grade servers – so that you can get max. processing speed, unlimited active torrents, all advanced apps like Plex, Google Drive, Sonarr, etc., and the 7-day money-back guarantee NO-QUESTIONS-ASKED.

Get a seedbox starting at $3/month. Visit Us at https://iseedfast.com
Z3 Constraint solving
Published: 2023-01-05 22:49:10

---
title: Z3 Constraint solving
published: true
date: 2021-06-18 04:53:20 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/z3constraintsolving/
---

I’ve been looking for an easy to use constraint solver for a while and recently I’ve landed on using the python bindings for the SMT solver Z3.

To install:

```
pip install z3-solver

```

Let’s say you want to find non-negative solutions for the following Diophantine equation: $$ 9x - 100y = 1 $$ To do that, we import Z3, declare our integer variables, and pass it into a solve function:

```
from z3 import *
x, y = Ints("x y")
solve(9 * x - 100 * y == 1, x >= 0, y >= 0)

```

This will print out: `[y = 8, x = 89]`

If you want to use these values for later computations, you’ll have to setup a Z3 model:

```
from z3 import *
x, y = Ints("x y")
s = Solver
s.add(9 * x - 100 * y == 1)
s.add(x >= 0)
s.add(y >= 0)

s.check()
m = s.model()
x_val = m.eval(x)
y_val = m.eval(y)

```
Career Shift
Tags: learning, building, career, productivity
Published: 2021-06-18 04:28:20

###It's Summer. 
####I'm **anxious** to be building my career as a software developer because it will shift away from my current work as a computer science instructor at a high school. 
##Teaching is one thing and at times I love it, but I want to build apps. 
####I've been fascinated with computers for ever since I was a pre-teen. I don't see myself teaching for the rest of my life, but I do see myself more in software. 

####I am challenged with getting my name *out there*. Also, I am struggling with knowing exactly what tech or skills I should be acquiring to work in this rapidly evolving industry. 


###Widgets Project Idea
####I am currently beginning the planning of a web application that will serve a single-page of useful widgets. These will be draggable, uniquely designed, and able to be customized by the user to suit their needs. This web app can be accessed from any platform and will contain widgets like weather, notes, calculator, to-do list, news, etc. The app will require a login.
Beginner's Guide to Google AdWords for eCommerce Marketing
Published: 2021-06-18 04:25:20

In order to become a successful top online seller, you must attract some of the customers to your store. But in this competitive e-commerce market, how will you be able to do that? Today, a variety of paid and organic marketing strategies can help you improve online visibility and increase conversions. Google Adwords is one of them. With this article, let us see what is Google AdWords and how you can use it for your business goals.

Read More: https://www.outreachway.com/how-much-does-google-ads-cost/