teleren/devto huggingface dataset:
Snake border animation CSS
Tags: html, css, javascript, beginners
Published: 2021-01-21 03:38:52

**Hello, guys in this tutorial we will create an animated snake border using HTML & CSS**.

First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Snake border animation Step:1###
**Add below code inside index.html**

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Rotating Border Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="anim-border">
      <img src="rahul.jpg">
    </div>
  </body>
</html>
```

###Snake border animation Step:2###
Then we need to add code for **style.css** which code i provide in below screen.
```css
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
@-webkit-keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.anim-border {
    position: relative;
    z-index: 0;
    width: 300px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
}
.anim-border::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #b7a7ff;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#2e00ff, #917af9);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}
.anim-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: white;
  border-radius: 5px;
} 
.anim-border img {
    width: 100%;
}
.container {
    max-width: 1060px;
    margin: auto;
}
```
###Snake border animation video Output:###
{% youtube x0ujorFhvmA %}

###Snake border animation codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/OJWdWpL %}



> <a href="https://blog.stackfindover.com/trending-responsive-menu-2020/" rel="dofollow">Trending Responsive Menu</a>
> <a href="https://blog.stackfindover.com/advance-hover-animation-javascript/" rel="dofollow">Advance Hover Animation</a>
jQuery and Javascript - Business and User Interface Logic Terminology
Tags: codenewbie, javascript, html, webdev
Published: 2021-01-21 03:29:10

# Business and User Interface Logic

# **Terminology**

---

- **Business logic**: The code responsible for handling the evaluation and manipulation of data; does not require any user interface.
- **User interface logic**: The code responsible for the interaction between the user and the application; handles tasks such as event listening, user input forms, DOM manipulation, display and styling. We have not covered how to write the actual code for this yet; don't worry!

# **Summary**

---

Because they are responsible for entirely separate things, code for business logic and user interface logic should always be separated. We have not *yet* written any applications that use both; but as we explore jQuery in the upcoming lessons, always keep this rule in mind.

# **Example**

---

The following code prompts the user for two numbers, uses the included `add()` function to add these two numbers together, and provides the sum to the user in an alert box:

```javascript
function add(number1, number2) {
  return number1 + number2;
}

const number1 = parseInt(prompt("Enter a number:"));
const number2 = parseInt(prompt("Enter another number:"));

alert(add(number1, number2));
```

# **Terminology**

---

- **Event handler:** an event handler "listens" to the element(s) to which it's attached and responds when a certain event is triggered. `.click()` is a click listener, which is a type of event handler that responds when an element to which it's attached is clicked.
- **Callback:** a function passed as an argument to another function. A callback function is *not* executed immediately; One use of callback functions is that they are passed into event handlers to be executed at a future time.

# **Resources**

---

- [Download jQuery here.](https://jquery.com/download/) - Make sure to get the most recent uncompressed development version.

# **Examples**

---

Link jQuery before your scripts that use it:

```javascript
<head>
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/scripts.js"></script>
</head>
```

Select a tag and bind an event handler to it:

```javascript
$("h1").click(function() {
  alert("This is a header.");
});
```

The part `function() { alert("This is a header."); }` is considered the callback because it is being passed as an argument into the method `.click()`.

Wrap all your jQuery code in callback passed to `$(document).ready()` so that it is run after the page loads:

```javascript
$(document).ready(function() {
  $("h1").click(function() {
    alert("This is a header.");
  });
});
```

To check if an event handler is attached properly, right-click the element you want to check, *Inspect*, and click *Event Listeners*.
Day18:100DaysOfCode
Tags: 100daysofcode, programming
Published: 2021-01-21 03:21:47

Continued with learning trees...

few leetcode sums , studied about maven in spring 

completed assginments :(
thats all.
nthing more today

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Clone app: Ecco come fare con Android
Published: 2021-01-21 03:14:20

Avete bisogno di due account WhatsApp su uno smartphone? Nessun problema! Con la funzione "<a href="https://androideverde.it/cosa-sono-le-doppie-app-e-come-crearle/
">Doppie App</a>" è possibile creare versioni gemelle delle singole app sulla maggior parte dei dispositivi Android. Noi vi diciamo come fare.
Perché si dovrebbe clonare un'applicazione?
Molte applicazioni come Facebook, WhatsApp o Twitter sono collegate esattamente a un unico account utente fisso. Tuttavia, se si dispone di due o più account, spesso non si può semplicemente passare da un account all'altro all'interno della rispettiva app, ma occorre prima effettuare il logout con un account ed effettuare il login con l'altro. Questo è spesso poco pratico per l'uso quotidiano.

Clonando un'applicazione come Facebook o Twitter, è possibile utilizzarla con due diversi account. La funzione ha anche dei vantaggi se si utilizzano due schede SIM nello smartphone. Perché con la funzione di clonazione, è possibile impostare e utilizzare un account WhatsApp separato per entrambi.

Samsung: Clona l'applicazione con Dual Messenger
Il produttore Samsung porta nel suo software per dispositivi una funzione per clonare le applicazioni Messenger. Questo si trova nelle versioni software più recenti di One UI sotto "Impostazioni > Funzioni avanzate > Dual Messenger".

Il menu mostra tutte le app installate sullo smartphone che possono essere clonate. Si tratta principalmente di applicazioni messenger come WhatsApp, Facebook, Facebook Messenger o Snapchat. È possibile creare una versione clonata tramite un cursore dietro la rispettiva app. Android vi chiederà quindi se volete installare una seconda versione dell'applicazione.
Huawei: Clonazione di App con App Twin
Huawei offre questa funzione anche sui suoi smartphone. Lì si chiama "App Twin" e crea virtualmente un gemello di un'app installata. La funzione si trova sotto "Impostazioni > Apps > App Twin". Proprio come Samsung, la funzione è limitata ai messenger e alle applicazioni per i social media. L'App Twin può essere attivata per Facebook, WhatsApp e simili tramite un cursore.
TIL Play Mode Clipboard
Tags: todayilearned, gamedev, unity3d
Published: 2021-01-21 03:05:23

2021-01-20

So I accidentally discovered that you can assemble prefabs in Unity's Play Mode and *copy* them from the scene and then *paste* them back in when you return to Edit Mode. 

Previously, I've done Copy Component to preserve information that was tweaked in Play Mode.
![Sub-menu for copying and pasting components](https://dev-to-uploads.s3.amazonaws.com/i/dbdtvilm3r9bh4pd2vvt.png)
But copying a whole Game Object (or Objects) seems to be simpler, faster and yields similar results.

Working this way has definitely sped up my ability to construct levels. Any limitations are bound to be discovered!
Creating a database from scratch with Node.js - Day 17
Tags: database, node, javascript, learning
Published: 2021-01-21 02:55:06

Hello folks!

Quick update on the database project:

I have refactored every single one of my statement functions.

I am reading the book "clean code" right now and I am really liking the ideas there, so I have spent some hours today just refactoring my functions.

I am now checking for errors using try catches and throwing exceptions instead of returning errors, the code is indeed a lot cleaner.

I am also trying to respect the "each function should do one thing" principle, so I am breaking down some giant functions into many little functions and trying to keep each function dealing with one abstraction level.

So yeah, I do not have anything flashy to show off today, just did some good old refactoring

Thank you for reading 

If anyone wants to read the code or play around with the project, this is the repository for the database > 

{% github ciochetta/learndb no-readme %}

and for the parser > 

{% github ciochetta/lql-parser no-readme %}
Zagadki logiczne
Published: 2021-01-21 02:34:09

Według jego badań stres był wynikiem lub reakcją organizmów i „stresorów” na znane im zagrożenia. Stwierdził, że stres można pozytywnie zaadaptować, zwłaszcza gdy jest zaangażowany w walkę o osiągnięcie określonych celów życiowych, ale z drugiej strony może być bardzo szkodliwy dla ludzi, jeśli jest źle zarządzany (Mason JW., 1975, s.9).

Potem termin ten był stale używany przez laików w metaforyczny sposób, w przeciwieństwie do biologicznego znaczenia, w odniesieniu do trudności napotykanych w naszych codziennych czynnościach. Stało się to również eufemizmem odwoływania się do naszych problemów, kiedy nie chcemy, aby były one jednoznaczne. Pierwsze badania Hansa przeprowadzono na szczurach, które wystawił na działanie szkodliwych bodźców i odkrył, że wszystkie zwierzęta wywołują podobne reakcje na takie bodźce. W roku 1936 opisał tę uniwersalną reakcję jako „ogólną adaptację do zespołu lub GAS”. według tych oryginalnych badań jest to proces zapoczątkowany alarmem wykrywającym stresor, następnie drugim procesem jest opór, w wyniku którego inicjowany jest tryb radzenia sobie z problemem. Trzeci etap to etap wyczerpania, który można znaleźć w modelu GAS. Według Hansa na tym etapie wszystkie dostępne zasoby są całkowicie wyczerpane, a organizm nie jest w stanie poradzić sobie z sytuacją, która następnie prowadzi do tego, co ludzie nazywają stresem. Badacze następnie odkryli, że kiedy taki stan występuje u osobnika, mogą mieć wrzody, trawienie
Web Components Intro 🎧
Tags: webdev, react, webcomponents, podcast
Published: 2021-01-21 01:57:44

I missed office geek-outs on random topics with friends. So I decided to try and record a podcast episode. It's a pilot - be nice :)

https://open.spotify.com/episode/1OPYl60kxQnEQg0Gm376Jh?si=a0YLbwAhQsOILxRDkTMOTQ
VUE003 Vue Lifecycle & Hooks
Tags: vue
Published: 2021-01-21 01:51:11

# Vue的生命周期

Vue实例从创建和销毁的过程就是它的生命周期。

这一过程中会有一些**关键时刻**。比如渲染完成、初始化完成和被销毁。

# Vue的生命周期钩子

对于生命周期中的关键时刻，我们可以以**回调方法**的方式进行回调，这就是**生命周期钩子**，被回调的方法叫做**生命周期钩子函数**。

# Vue生命周期图示

参考官网 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

图中总共显示了8个红色的方框，包含看代表了8个生命周期钩子：

- beforeCreate
- created
- beforeMount  数据被载入前
- mounted  数据被载入后
- beforeUpdate
- updated
- beforeDestroy
- destroyed

# 生命周期钩子的用法

为了使用这些钩子，我们只需要在初始化Vue对象的时候重写这些方法即可：

```javascript
var app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: "Hello, Vue World!"
    }
  },
  beforeCreate: function () {
    console.log("a message in beforeCreate  " + this.message)
  },
  created: function() {
    console.log("a message in created  " + this.message)
  },
  beforeMount: function() {
    console.log("a message in beforeMount  " + this.message)
  },
  mounted: function() {
    console.log("a message in mounted  " + this.message)
  }
})
```

对于上述代码，`beforeCreate`中因为`message`还没有被创建出来，所以会输出`undefined`，其他三个都会输出`data`里面的`Hello, Vue World!`。

这些钩子都是通过`this`指针来访问Vue对象里面的数据，所以，我们**不能使用箭头函数**来重写钩子，因为箭头函数并不能用`this`访问我们的Vue对象。
CLI for Finding Anime By Image
Tags: go
Published: 2021-01-20 19:44:40

There is a web service called https://trace.moe which allows you to search for the anime scene through image. Also this service has an API which i successfully used to create the CLI using [cobra](https://github.com/spf13/cobra) framework
And this is what i've done:
https://github.com/irevenko/what-anime-cli
<img src="https://github.com/irevenko/what-anime-cli/raw/main/anime_images/record/demo.gif">

# Usage 🖥
### Get Anime By Image File 🗃
```what-anime file anime.jpg```

### Get Anime By Image Link 🔗
```what-anime link https://anime.com/image.png``` <br>
### powershell trouble
<em>NOTE</em>: MAKE SURE THAT YOUR LINKS <b>ENDS WITH .IMAGE_FORMAT</b> AND DOESN'T HAVE ANY <b>&</b> CHARS AFTER BECAUSE THIS SYMBOL IS RESERVED BY GOLANG 

### Supported image extensions 🖼
I've tested these:
- jpg
- png
- jfif

If you have found other's working formats please create an issue

# Installation 🔨
Build from source or go to <a href="https://github.com/irevenko/what-anime-cli/tree/main/bin">bin</a> folder and pick your executable file

# Contributing 🤝
Contributions, issues and feature requests are welcome! 👍 <br>
Feel free to check [open issues](https://github.com/irevenko/what-anime-cli/issues).

GitHub: https://github.com/irevenko/what-anime-cli/
How to Customize Ant.design UI Library Variables.
Tags: react, javascript, babel, antdesign
Published: 2021-01-21 00:29:50

This post seeks to give the reader a straightforward fix to customizing the ant.design UI library for react, style variables.

I will like to be as brief as possible, so I will assume you have basic programming knowledge, Webpack, babel, Command line terminal, npm, HTML, CSS, Less and Javascript knowledge, ES6 syntax, React and are familiar with object oriented programming.

[Ant Design](https://ant.design/) is a UI library for react developed by Alibaba. It’s really nice and useful in making your react project solid and saves us time. To configure [Ant Design](https://ant.design/), you need to know that the library makes use of less, and therefore, overrides will be done using a less file.

No need to journey far and change your css style sheets from `.css` to `.less`, then the `lessc` command and all that lengthy work which if not careful, can break something and create extra work.

To get started, create a `.less` file in the root directory of your project, call it say `theme.less` (for this demonstration), write the variable you wish to override in the `theme.less` file.

A full list of Ant.design variables can be found [here](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less). Careful now, ant design variables are inter-dependent, so changing one variable’s value can alter the presentation of other components.

A good example is, if you alter the font-size base, to say 3vh, your fonts will look bigger and better, but your search box will get messed up quick.
So for simplicity and to make sure this works, simply just write a new primary color in the `theme.less` file, use say `#ff66cc` to make things obvious.

Then go to your `cmd`, `cd to your project’s directory`, `install babel-import-plugin`
```
npm install — save-dev babel-import-plugin
```

then go to your `.babelrc` file to add the plugin.
```
“plugins”: [[“import”, {“libraryName”: “antd”, “libraryDirectory”: “es”, “style”: true}]]
```

This plugin aids override the defaults.

After those steps, go to your common config file and tell webpack how to handle less files and specify a hack for it.
Make sure you have `less` and `less loader` already installed. Now in your common config, specify how webpack should less file.
(see the  image below)

![in common config file](https://dev-to-uploads.s3.amazonaws.com/i/pe3zle3gmv4c60hcxs1a.png)

Save and move on.

Here on,
any ant.design component you import into your project will now display the new #ff66cc primary color.

I hope this was helpful.

Kindly follow me on twitter.
Video: How to deploy Blazor WebAssembly to Firebase Hosting
Tags: dotnet, aspnet, blazor
Published: 2021-01-21 21:20:49

---
title: Video: How to deploy Blazor WebAssembly to Firebase Hosting
published: true
date: 2021-01-21 00:00:00 UTC
tags: dotnet, aspnet, blazor
canonical_url: https://swimburger.net/blog/dotnet/video-how-to-deploy-blazor-webassembly-to-firebase-hosting
cover_image: https://swimburger.net/media/yzuhgyvq/blazor-github-firebase-social.png?anchor=center&mode=crop&width=1000&height=420
---

With ASP.NET Blazor WebAssembly (WASM) you can create .NET web applications that run completely inside of the browser sandbox. The publish output of a Blazor WASM project are  **all static files**. Now that you can run .NET web applications without server side code, you can deploy these application to various  **static site hosts, such as Google's Firebase Hosting**.

In this video you learn how to deploy Blazor WASM to Firebase Hosting, manually and automatically with GitHub Actions:

{% youtube 8a5Pz3oZzNY %}

If you prefer written content, check out my blog post: [How to deploy Blazor WebAssembly to Firebase Hosting](https://swimburger.net/blog/dotnet/how-to-deploy-blazor-webassembly-to-firebase-hosting "How to deploy Blazor WebAssembly to Firebase Hosting").
Rails without tha added sugar
Tags: rails, ruby
Published: 2021-02-01 10:09:41

---
title: Rails without tha added sugar
published: true
date: 2021-01-21 00:00:00 UTC
tags: rails, ruby
canonical_url: https://www.kabisa.nl/tech/rails-without-tha-added-sugar
---

A modern web application has many moving parts, Ruby on Rails is no exception. With a new Ruby on Rails 6.1 application there's a lot you get for free.

## What you get for free:

 * Outgoing email handling (`action_mailer`)
 * Incoming email handling (`action_mailbox`)
 * Text markup / editing in the browser that works (`action_text`)
 * Compiling and bundling static assets like CSS, JavaScript, fonts and images (`sprockets`)
 * Making use of the whole NPM ecosystem for front-end technology (`webpacker`)
 * Background workers (`active_job`)
 * Websockets with fallback (`action_cable`)
 * An awesome DSL to generate JSON (`jbuilder`)
 * Make your application load faster in the browser (`turbolinks`)
 * Increase performance by caching expensive computations (`bootsnap`)
 * Application pre-loader (`spring`)
 * Store files locally or in the cloud (`active_storage`)

However, there are times you want to start with something simpler, without
the burden of all these extras. 

## A minimal approach

You _could_ use all the `--skip-*` options to disable each of these, but
Rails 6.1. packs the `--minimal` option instead:

```
rails new my_app --minimal
```

It should be noted that this does not imply a _classic_ Rails app, as 
[DHH eloquently put it](https://github.com/rails/rails/pull/39282#issuecomment-629503802):

> Classic gives it an air of cool that I'm not interested in. It's not about reminiscing of some glorious past. It's just "I want the bare minimum"

That bare minimum is a great starting point if you're not yet ready for all the goodies and
maybe uncertain whether you're going to need them at all. Adding the ones you need later it
just like adding any other gem to your Rails project.

I'm a big proponent of this approach, as less dependencies (you don't use) means your codebase
will be easier to maintain and upgrade in the future. 

## More points with combos!

If you're really into front-end and would like to use webpacker with a minimal Rails app,
that's possible too. Selecting a specific database adapter is also still possible.

```
rails new cool_app --minimal --database postgresql webpack=react
```
Template Literal Types in TypeScript 4.1
Tags: typescript, beginners, webdev
Published: 2021-01-20 23:59:23

A new feature in TypeScript 4.1 is the ability to create **Template Literal Types**. This feature allows you to use string interpolation to create types:

```typescript
type World = "world";

type HelloWorld = `Hello ${World}`;

// type HelloWorld = "Hello world"
```

Looks interesting, right? This feature gets even more powerful when you combine it with union string literals:

```typescript
type Vertical = "top" | "middle" | "bottom";
type Horizontal = "left" | "center" | "right";

type Position = `${Vertical}-${Horizontal}`;

declare function setPosition(pos: Position): void;

setPosition("top-right");
setPosition("bottom-left");
```

The union types are expanded to include every possible permutation! So we get access to `top-center`, `bottom-right`, `top-left`, and so on, and all the type safety that this brings. Hopefully you can see the potential here. For example, we can easily expand on this to add more options—I'm English, so we could add "centre" to the `Horizontal` type to enable a bit of localisation.

This example was lifted straight from the TypeScript release notes for Version 4.1, but I wanted to see what else I could come up with. Below is an example of using template literal types to create hex pairs, which we can then use in a makeColor function:

```typescript
type HexNum = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type HexLet = "a" | "b" | "c" | "d" | "e" | "f";
type HexChar = HexNum | HexLet;

type HexPair = `${HexChar}${HexChar}`

// Stub
type Color = {};

declare function makeColor(r: HexPair, g: HexPair, b: HexPair, a?: HexPair): Color;

makeColor("aa", "1a", "ff");
makeColor("ba", "da", "55", "e5");
makeColor("zz", "vv", "1j"); // error!
```

Here, we define all the possible hex characters, and then define a `HexPair` by using template literal types to join two `HexChar`s together. We then use this type for each argument to the makeColor function, to enable type safety when passing in a hex pair.

Pretty neat!

_**Note**: There's an upper limit on the size of a union type generated this way. For example, I tried joining my `HexPair` type three times to create a `RGBColor` type, but got a `Expression produces a union type that is too complex to represent.` error._

The code in this post is available in [this TypeScript Playground].

[this TypeScript Playground]: https://www.typescriptlang.org/play?#code/C4TwDgpgBAahBOwCWBjAhgGygXigImAHsw8oAffAWyQBMaMJSK8AjQ4IyvAbgChRIUABKF4SAF6EAdsEw58DAGbAm+FBBkJVeMQHMAFir79w0AAqEAzkmTT5AAwAkAbziJUmAL4BaFyLGSMl72xjQQKBho8NCKAK5SKLZSUJYQwBbWSQAUYFYAXFAZNkjSAJQFAG6EtMap6VbF0lkExN56hnilfHVF2azsnN5KKl28JoJCEAAeAHKxlPIADORQAIwrAEwrAMwrACwrAKwrAGwrAOwrABwrAJx8AtCTUwAyafJ4aNos2ijaNNpGCs8IoeOMntMAML6KLyZ5zBYUZ5vYDGR7CaZmNBIeAOPxQmHwTz4qbQqKeexjAD0VKgAGVgLEWOCoJDCBhRPJnJ5QuFItEoHEEkkoJQ0ABrCBsjnwLLwArPLE4gA0UF0Csx2PgqpYGqmSu1UDQAH49Qbyqz2aJjGLJdLRM00F9VXhVs78IpQaNbVKrbLWO68DRA4dDngXRAw96Jb6Zc1xOJw-gKhUk66AFadbhQGlQBDwUQAQiAA