teleren/devto huggingface dataset:
Getting familiar with gsap.to and gsap.fromTo functions
Tags: 10daysofanimation, gsap, javascript
Published: 2020-07-05 13:10:40

---

GSAP library comes up with awesome features to create animations with fewer lines of code and great flexibility. Let's cut the crap and start learning with me using simple examples.

## gsap.to() function
If you are familiar with `CSS Keyframes` then it will be a piece of cake for you. It is used to animate the element from current state(in DOM) to the final state(100% keyframe).
 
gsap.to() function takes two arguments.
```js 
gsap.to(targetElement, { changes to be made })
```

Let's say I have a ball element with `id="ball"` and I want to bounce this ball. So the code goes like this
```js
gsap.to('#ball', {
   y: 200,  // to drop the ball i.e transform: translateY(200px)
   duration: 1.5, // duration of the animation
   repeat: -1, // to repeat infinite times
   ease: "bounce.out" // to give the bounce effect,
});
```
I know you are thinking what the heck `ease: bounce.out` is that. Don't panic, it's just an ease function that **gsap** provides to give bouncing effect. Check out other ease visualizers [here](https://greensock.com/ease-visualizer/).

`NOTE` Properties to change things in gsap differs from CSS properties. I recommend you to bookmark gsap-cheatsheat for future purpose.

Let's see the result.
{% codepen https://codepen.io/rahuldkjain/pen/OJMQxVB default-tab=result %}


## gsap.fromTo() function
As the name suggests, this function is used to animate the element from `initial state` to `final state`.

gsap.fromTo() takes three arguments.
```js
gsap.fromTo(targetElement, { initialState }, { finalState })
```

Let's say I want to draw user's attention to a specific button using `box-shadow` property like this

{% codepen https://codepen.io/rahuldkjain/pen/KKVZZyE default-tab=result %}

In pure CSS, for button with `class="css-button"` I'll do something like this
```css
.css-button {
  animation: inout 1s ease infinite;
}

@keyframes inout {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    -moz-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    -moz-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}
```

But in gsap, it hardly takes 4-5 lines to do the magic. For a button with `class="gsap-button"` I'll do something like this.
```js
gsap.fromTo(".gsap-button", {
  boxShadow: "0 0 0 0px rgba(130, 195, 3, 0.4)"
}, {
  boxShadow: "0 0 0 20px rgba(130, 195, 3, 0)",
  repeat: -1,
  duration: 1
});
```

That's it! `gsap.to()` and `gsap.fromTo()` lays the foundation to learn the gsap library.

Happy Animating!
Building Roasted.email - Temporary emails and phone numbers
Tags: rails, ruby, sms, twilio
Published: 2020-07-05 13:51:49

---
title: Building Roasted.email - Temporary emails and phone numbers
published: true
description: My journey building roasted.email
tags: rails, ruby, sms, twilio
cover_image: https://i.imgur.com/JtN2CTI.png
---

See it live @ https://roasted.email

Well, temporary emails are not by any chance a new idea. There are a bunch of free services that generate an email for you and let you use the inbox to receive emails for websites you don't want to give your personal one.

So I wanted to build my own essentially to find out how mail servers work, such as postfix or exim. Long story short, the service is live and I still don't know much about postix :( I struggled a bit configuring email forwarding coming from multiple domains. Now the service is live maybe I can have more time to actually find how it works and also use Rails Action Mailbox. [This guide](https://dev.to/truemark/setup-action-mailbox-with-postfix-part-2-300b) seems to be good.

By not using my own mail server, I'm using Sendgrid's Parse API. It's very easy to setup, you just need to add Sendgrid's DNS entries to your domains and set the endpoint URL where Sendgrid POSTs the email and voila! One interesting thing is that Sendgrid doesn't talk in their docs it's requests validation (from what I could find). So one way I added a bit of security to the webhook endpoint is to validate if the IP belongs to Sendgrid. You can find Sendgrid's IP ranges [here](https://bgp.he.net/AS11377#_prefixes).

When it comes to the Rails app, it's pretty simple. There's just a handful of models and controllers. I also wanted to use pure Rails without any frontend framework (such as React) and for that [UJS](https://guides.rubyonrails.org/working_with_javascript_in_rails.html) was handy.

I also wanted to make it super simple for the user, with just one click he can generate an inbox and it's ready to use.

One suggestion I got from a few friends was to also provide temporary phone numbers. That was an interesting addition to the project and I've described the approach [on my blog](https://andrepcg.top/temporary-phone-numbers-roasted-email/). Essentially, it's easy to achieve that using Twilio but for Portuguese phone numbers it's too expensive ($15/month to keep a number) and I opted for a custom solution using pre-paid SIM cards. Regarding Twilio, it works very similarly to Sendgrid. When an SMS is received by Twilio, they POST to a Webhook and Rails parses the request.

For now it has been an interesting project. It's not by any chance a complex topic but cool non the least.

Btw, it's open source: https://github.com/andrepcg/roasted-mail
Tokenncoin transformed to new look
Tags: cryptocurrency, livecryptoprices, bitcoinprice, eth
Published: 2020-07-05 13:38:46

six months before I checked the cryptocurrency Marketwatch platform tokenncoin. It was so buggy and the website is so slow. Recently I saw the same website. It is totally transformed to the new version and good looking UI. It is showing accurate <a href="https://tokenncoin.com">live crypto prices</a> and much more cryptocurrency-related data. You also check the website and give your feedback as well.
How I fixed FileStream error on Microsoft.AspNetCore.Server.IIS.Core.IISHttpServer
Tags: aspnetcore, iis, productivity
Published: 2020-07-05 13:25:21


Hi everyone! It feels surreal that I am writing my first post on **dev.to**. I am really excited and looking forward to sharing my experiences as I journey through software engineering and development.
Today, I would be writing about the issues I encountered while deploying an Asp.net Core microservice on IIS and how it was solved.

The microservice in question is meant to create images from a byte array and write these images to a folder. 
**Note**: This application was performing this function perfectly on my development machine. I am sure we can all relate to this...LOL!

However upon deployment, API calls to this service just returned 500 error code, no meaningful message as to the cause of the error, you can imagine how vague this is. All I could see on the log file was **"|ERROR|Microsoft.AspNetCore.Server.IIS.Core.IISHttpServer|Connection ID "17437937763084142462", Request ID "8000077f-0001-f200-b63f-84710c7967bb": An unhandled exception was thrown by the application.
|INFO|Microsoft.AspNetCore.Hosting.Diagnostics|Request finished in 2980.7792ms 500 
|INFO|Microsoft.Hosting.Lifetime|Application is shutting down..."**.

After several hours of googling, I was able to solve this error by granting **IISUsers read and write access to the microservice folder referenced in IIS**. Previously, IISUsers had only read access. 
**Boom!** API calls to the service were successful.
I also gave IISUsers read and write access on "C:\inetpub\wwwroot" folder to forestall this occurrence on any other application hosted on IIS. This created another issue as the Angular web application for the service refused to load and threw this error.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3fx711bpm5dndrzyc38d.png)
Oops!!! Another bottleneck. 
To solve this, I followed the steps below;
- I opened IIS File Manager
- Navigated to "Sites"
- Selected and double-clicked the folder of the Angular web application.
- Then I selected Authentication, double-clicked to select "Anonymous authentication" 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bx39i02l5ovflbe8vk5w.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/flsxs2dz6n1w5q1g0ugz.png)
- After double-clicking on Anonymous authentication, I clicked on "Edit" under actions and set **Anonymous User Identity** to Application Pool Identity.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1exo218akbnyu5k1ohnw.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g2elh6x4a5qplxfnm0dr.png)
- Then restarted IISServer.

Voila! This solved the issue with the web application.
Most times during deployment our applications can have issues because of inadequate permission settings, unfortunately, most times IIS does not explicitly tell you the error as in my case.

So basically while deploying, make sure to give your application appropriate read and write access to avoid bugs like this.

Happy Coding guys!!!
Angular Routing Removing hash (#) on URL
Tags: angular
Published: 2020-07-05 13:17:13

In Angular 9 hide hash (`#`) from URL is an easy task.

In previous versions sometimes confusing/find difficulties in removing the hash (#) from the URL.

Steps below for a quicker solution.

1. Remove `useHash: true` from router modules, By default it's false. 
2. Add (`/`)slash to base href in the index page

```RoutingModule
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
``` 
```html
<base href="/">
```

Fix for restriction of redirection to siblings and children paths in the router. 

Now its works fine in the dev environment.

For prod, we need to add rules in (`.htaccess`) file.
Below htaccess issue fix arises in prod, not in dev.

```htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L]
</IfModule>
```

```
http://localhost:3000/#/login
```
After the above steps implemented, now a hash sign removed from URL.
```
http://localhost:3000/login
```
Basic Git Commands
Tags: git
Published: 2020-07-05 13:14:26

## Step By Step Guide to make your first Repository:
 
##Step 1:
### Make a Folder:
     \Desktop> mkdir First-repo
     \Desktop> cd First-repo

##Step 2:
### Initialize The Repository:
     \Desktop\First-repo> git init
      Initialized empty Git repository in 
      C:/Users/LALITHA/Desktop/First-repo/.git/

##Step 3:
#### Create New File index.html inside First-repo folder.

##Step 4:
### Check Status :
      \Desktop\First-repo> git status
       On branch master

       No commits yet

       Untracked files:
       (use "git add <file>..." to include in what will be 
        committed)
        index.html

       nothing added to commit but untracked files present (use 
       "git add" to track)

##Step 5:
### Add Your Changes:
      \Desktop\First-repo> git add .

##Step 6:
### Commit Your Changes:
     \Desktop\First-repo> git commit -m"Message"
     [master (root-commit) 0b98ccc] Message
     1 file changed, 0 insertions(+), 0 deletions(-)
     create mode 100644 index.html

##Step 7:
### Push Your Changes:
     \Desktop\gitexample\First-repo> git remote add origin 
      https://github.com/Manoj-M-S/First-repo.git
     \Desktop\gitexample\First-repo> git push -u origin master

Thank you for reading!
Social Authentication or Not?
Tags: discuss, webdev, security
Published: 2020-07-05 13:03:13

Good day devs.

I have been thinking about this, and I want to know what you think, or your experience with it.

I basically want to create a user authentication system, do you think social Authentication is okay or should I do a basic registration->login flow. I am mindful of issues that may arise in the future.

Thanks, I would really love to hear from anyone.
Is using Linux really productive?
Tags: discuss, linux, productivity
Published: 2020-07-05 12:55:30

I am now using Ubuntu for around 9 months, before that I was a windows user.

There are certainly many things in Ubuntu I love like custom themes, terminal, native docker support, and search bar without irritating web results (referring to the Windows search bar, getting web results when you just need to open a local app).

But the time I have to invest sometimes to get simple things working is just crazy. My Bluetooth doesn't work from time to time. Sometimes even audio doesn't work, keys like play/pause never work with Rhythmbox and suspend was working in ubuntu 19.10 version but it is again behaving weirdly in 20.04 (and never worked for me on 18.04). Many more similar problems.

Now the above problems are pretty common and after spending some hours(sometimes many hrs) things start to work. So why I am writing this post, because from last week Intellij Idea is freezing again and again because of some bug and I can't live without Intellij Idea.

Even though I can't think about moving away from ubuntu. I would like to hear your thoughts on this topic, dev community?
Minimal Navigation Menu Bar using HTML CSS & JavaScript
Tags: navbar, menu, html, css
Published: 2020-07-05 12:55:03

A navigation menu or nav link is a list of links pointing to important areas of the website. They are usually presented as a horizontal bar of links at the top of every page on the website. Navigation menus give your site structure and help visitors find your content what they're looking for.

At first, on the webpage, there is only a 3 lines-bar Menu Button, and when clicked on that menu button then these list items smoothly sliding down and appear. I also add the hover effect on Menu item lists. When you hover on the specific item, there is a cool inset box-shadow shown as you can see in the image. 

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/05/minimal-navigation-menu-bar.html">Click here to download source code files.</a>
Animated Gradient Shiny Loader with HTML CSS & JavaScript
Tags: loader, loading, html, css
Published: 2020-07-05 12:53:23

Preloaders are what you inspect on the screen while the rest of the page’s content is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

At first, this loader is in the initial stage, where there is a loader and 0% text or number at the center on the webpage. But when you click on that center text or number, the loader will be activated and it starts to rotates as well as the center percentage also starts to increase from 0% to 100%. When it completed 100%, the loader stops to rotating.

You can also download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/05/animated-gradient-shiny-loader-with.html">Click here to download source code files.</a>
Minimal Drop-down Menu Bar with Submenu using HTML & CSS
Tags: navbar, css, dropdown, menu
Published: 2020-07-05 12:52:27

A drop-down menu (sometimes called pull-down menu or list) is a graphical control element designed to help visitors find specific pages, contents, or features on your website. Clicking or hovering on a top-level menu heading indicates a list of options to the dropdown menu.

At first, on the webpage, there is only a small menu bar or navbar, but when you clicked on that menu bar then the menu list is sliding down and visible. Those submenus or drop menus are hidden at first and when you clicked on their parent menu item then the drop list is shown. I've also added a simple hover color on the list as you can see in the image.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/05/minimal-drop-down-menu-bar-with-submenu.html">Click here to download source code files.</a>
Automatic Image Slideshow Effect in HTML CSS & JavaScript
Tags: javascript, imageslider, imageslideshow, slideshow
Published: 2020-07-05 12:50:43

I'm sure that you have seen the Image Slideshow Effect on many websites. A slide show is a presentation of a series of still images on a projection screen or electronic display device, typically in a prearranged sequence. The changes of the images may be automatic and at regular intervals or they may be manually controlled by a presenter or the viewer.

Today in this blog I'll share the image slideshow effect using javascript. In this program, there are five images, and these images automatically change after a certain period. I used JavaScript to change the image after a certain time interval.

You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes because you won't get images if you copy the codes. <a href="https://www.codingnepalweb.com/2020/05/automatic-image-slideshow-effect-in-javascript.html">Click here to download code files.</a>

####You might like this:
<a href="https://www.codingnepalweb.com/2020/05/image-slider-toggle-button-with-javascript.html" target="_blank">Image Slider with Controls</a>
<a href="https://www.codingnepalweb.com/2020/07/animated-slider-blog-card-using-html-css.html" target="_blank">Animated Slider Blog UI Card</a>
<a href="https://www.codingnepalweb.com/2020/08/responsive-owl-carousel-slider-using-jquery.html" target="_blank">Responsive Owl-carousel Slider</a>
<a href="https://www.codingnepalweb.com/2020/10/image-clip-animation-with-sliders.html" target="_blank">Image Clip Animation with Sliders</a>

######HTML CODE:
```
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Slideshow Animation | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="content">
      <div class="images">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
      </div>
</div>
<script>
      var indexValue = 0;
      function slideShow(){
        setTimeout(slideShow, 2500);
        var x;
        const img = document.querySelectorAll("img");
        for(x = 0; x < img.length; x++){
          img[x].style.display = "none";
        }
        indexValue++;
        if(indexValue > img.length){indexValue = 1}
        img[indexValue -1].style.display = "block";
      }
      slideShow();
    </script>

  </body>
</html>
```

######CSS CODE:
```
body{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.content{
  height: 400px;
  width: 750px;
  overflow: hidden;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.4);
}
.content .images{
  height: 100%;
  width: 100%;
}
.images img{
  height: 100%;
  width: 100%;
}
```

Don't forget to visit our Website for more related blogs/tutorials - https://www.codingnepalweb.com/
CSS3 Neomorphic Social Media Buttons
Tags: html, css, neumorphism, neomorphic
Published: 2020-07-05 12:48:48

The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. 

Today in this blog, I'll share with you a Neomorphic Social Media Buttons. These Social Media Buttons are created only for design purposes. There is no action and it won't redirect you to any other sites when you triggered on those buttons.

You can download the source code files through the given link. <a href="https://www.codingnepalweb.com/2020/05/css3-neumorphic-social-media-buttons.html">Click here to download source code files.</a>
How to Fix useEffect Hook executing in an endless loop?
Tags: react
Published: 2020-07-05 12:40:33

##First of all let us see what useEffect Hook does?
Using useEffect Hook, tells React that your component needs to do something after render. React will remember the function you passed and call it later after performing the DOM updates.

##Does useEffect run after every render?
Yes! By default, it runs both after the first render and after every update. Unlike componentDidMount, useEffect is not executed when the component finished mounting, but each time the component is rendered.
That means if you modify the components state inside useEffect, it will cause a re-render of the component, which again causes the execution of useEffect.

    useEffect(() => {
    //This is executed each time the component is rendered.
    });

That’s why useEffect takes an array of dependencies as a second argument. If we don’t pass an array of dependencies, the Hook will be executed in a loop.

You can tell React to skip applying an effect if certain values haven’t changed between re-renders, By passing an array as an optional second argument to useEffect each time one of those objects change, React will execute this Hook. You could pass in any number of values into the array and useEffect will only run when any one of the values change.

    useEffect(() => {
    Document.title = `You clicked ${count} times`;
    },[count]); // Only re-run the effect if count changes

But what if we only want the hook to execute when the component is mounted and rendered the first time?
We already know, if we don’t pass an array of dependencies, the Hook will be executed in a loop. But what if our hook does not depend on any other object?

###So we pass an empty array.
By passing in an empty array, we're telling React not to track any changes, only run once, effectively simulating componentDidMount.

That’s it:

    useEffect(() => {
      // this is only executed once
    }, [])

If we pass an empty array to useEffect, it’s only executed after the first render.

This is even mentioned in [the official React Hooks API documentation](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects):

> If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty >array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from >props or state, so it never needs to re-run. This isn’t handled as a special case — it follows >directly from how the dependencies array always works.