teleren/devto huggingface dataset:
Top 3 CSS effects for beginners
Published: 2021-03-17 08:46:51

All the credit goes to <a href="https://codewithbishal.com" rel="noopener noreferrer">Code With Bishal</a>
Hey Guys, Welcome to my new post in Dev to, in this post I will show you how you can create great CSS animations that you can put on your website or in your portfolio. These are the top 3 CSS effects/animation of February 2021 which a beginner can make.
Why you should read this Blog?
i. You should read this blog because you will find the top 3 CSS effects which you must use in a website or keep in your portfolio in February 2021.
ii. You can download the codes (for free) by visiting the particular post.
iii. There are images with every post to give you an idea of how it looks.
iv. Registering to the site will be appreciated
#1) Responsive login form
![Responsive login form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cokk2lht498lbstn871v.jpg)
Preview: <a href="https://codewithbishal.com/example/css-login-form" rel="noopener noreferrer">https://codewithbishal.com/example/css-login-form</a> or click <a href="https://codewithbishal.com/example/css-login-form" rel="noopener noreferrer">here</a>

#2) Responsive Movie Ticket using CSS
![Responsive Movie Ticket using CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82mra091vfpf77cb6skv.jpg)
Preview: <a href="https://codewithbishal.com/example/css-movie-cards" rel="noopener noreferrer">https://codewithbishal.com/example/css-movie-cards</a> or click <a href="https://codewithbishal.com/example/css-movie-cards" rel="noopener noreferrer">here</a>

#3) Responsive Contact US Form
![Responsive Contact US Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4u2wev2mbp7ime01epp.jpg)
Preview: <a href="https://codewithbishal.com/example/contact-us-form-using-html" rel="noopener noreferrer">https://codewithbishal.com/example/contact-us-form-using-html</a> or click <a href="https://codewithbishal.com/example/contact-us-form-using-html" rel="noopener noreferrer">here</a>
Custom PTZ for AI ML Sky Hub Tracker
Published: 2021-03-17 08:06:31

17/03/21 The images below are preview of the custom motorized pan/tilt head that will be added to the Sky Hub enclosure. Fittings are finished with mechanics in development - designed by Richard G. Hopf #development #design #opensource #citizenscience #observationalscience #uapreseach #machinelearning #artificialintelligence #dataanalysis #nvidia
Building a PlotLy $GME Chart in Python
Tags: python, datascience, plotly, tutorial
Published: 2021-03-17 07:59:07

{% youtube 1ZcXmjZtJJ8 %}

A code-along video covering the coding process from imagination to Python.

Something a little different, I'm not overly keen on this format - it's pretty long - but I've recorded it and I think maybe this can be useful for a few of you.

I haven't prepared anything beforehand, this is just going into the coding process with a rough outline of wanting to build a stock chart for GME (GameStop) and adding a few technical indicators - to get more familiar with PlotLy and the AlphaVantage API.

So, it's a weird one, but I hope a few of you enjoy it - thanks :)
Pokemon API using ReactJs
Tags: react, javascript, html, css
Published: 2021-03-17 07:51:28

Tried to create a little fun project using reactjs.pokeapi is used to fetch data. Multiple components used to trigger the state. Try it- https://bit.ly/3tsW78L. #API used from http://pokeapi.co.
Code given bellow:-
App.js
```
import React, {Component} from 'react';
import { CardList } from './components/card-list/card-list.component';
import { SearchBox } from './components/search-box/search-box.component';
import { NavigationBtn } from './components/page-navigation/back-to-top';
import './App.css';

class App extends Component{
  constructor(){
    super();

    this.state = {
      pokemons: [],
      search:''
    };
  }

  componentDidMount(){
    fetch('https://pokeapi.co/api/v2/pokemon?limit=500')
    .then(response => response.json())
    .then(name => this.setState({pokemons:name.results}));
  }

  handleChange=(e) => {
    this.setState({search: e.target.value});
  };

  render(){

    const {pokemons, search } = this.state;
    const fileteredPokemons = pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(search.toLowerCase()));

    return(
      <div className="App">
        <h4><a href="https://www.linkedin.com/in/surojit-manna" target="_blank" noreferrer>Author</a></h4>
        <h1>Pokemon Database</h1>
        <SearchBox
          placeholder='Search Pokemon' 
          handleChange= {this.handleChange}
        />
        <NavigationBtn/>
        <CardList pokemons={fileteredPokemons}></CardList>
        
      </div>
    );
  }
}

export default App;
```
CardList component

```
import React from 'react';

import { Card } from '../card/card.component';

import './card-list.style.css';


export const CardList = props => (
    <div className='card-list'>
        {props.pokemons.map(pokemon =>(
        <Card key={pokemon.name} pokemon={pokemon}></Card>
        ))}
    </div>
);
```
SearchBox component

```
import React from 'react';
import './search-box.styles.css';

export const SearchBox = ({placeholder, handleChange}) =>(
    <input 
        className='search'
        type='search' 
        placeholder={placeholder} 
        onChange={handleChange}
    />
);
```
Card component

```
import React from 'react';

import './card.styles.css';

export const Card = props =>(
    <div className="card-continer">
        <a href={`https://www.pokemon.com/us/pokedex/${props.pokemon.name}`} target="_blank" rel="noreferrer">
            <img alt="pokemon" src={`https://img.pokemondb.net/artwork/large/${props.pokemon.name}.jpg`}/>
            <h2>{props.pokemon.name[0].toUpperCase()+props.pokemon.name.slice(1)}</h2>
        </a>
    </div>
);

```

Use your own style using the class names on components. Any suggestion on improving this little project will be appreciated. 
Ping for full code.
OpenCage API integration with AWS Cloud
Tags: aws, geocoder, javascript
Published: 2021-03-17 07:42:04

A few years ago, I started to enjoy serverless, or what we can more precisely call Function As A Service ([FAAS](https://en.wikipedia.org/wiki/Function_as_a_service)). I created a [tutorial](https://github.com/tsamaya/aws-lambda-opencage-geocoder) "How to simply wrap the OpenCage Geocoding API into an AWS Lambda function". 

[NodeJS](https://nodejs.org/) and [AWS lambda](https://docs.aws.amazon.com/lambda/index.html) have evolved, the tutorial is still valid to learn how to use the [serverless framework](https://www.serverless.com/open-source/) with AWS Lambda functions; today this post is more about quicky deploy an [OpenCage Geocoding API](https://opencagedata.com/) proxy in your own AWS infrastructure. 

Let's get started with the usual prerequisites:
- An [AWS account](https://console.aws.amazon.com/) to run a [lambda function](https://aws.amazon.com/lambda/)
- An OpenCage [API Key]()
- [NodeJS](https://nodejs.org/)

The three steps will take less than 5 minutes to complete
1-Clone
2-Setup
3-Deploy

1- Clone this [repository](https://github.com/tsamaya/opencage-lambda-proxy)

```bash
git clone https://github.com/tsamaya/opencage-lambda-proxy.git
# or use the ssh version
git clone git@github.com:tsamaya/opencage-lambda-proxy.git
```

2- Setup
```bash
cd /path/to/repository

npm install # or yarn install
```

Create an environment file containing the API Key (YOUR-API-KEY):
```bash
echo "OPENCAGE_API_KEY=YOUR-API-KEY" >> .env
```

3- Deploy
And now, deploy the proxy with
```bash
npx serverless deploy
```

it will output
```
Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
........
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service opencage-lambda-proxy.zip file to S3 (1.54 MB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..............................
Serverless: Stack update finished...
Service Information
service: opencage-lambda-proxy
stage: dev
region: eu-west-1
stack: opencage-lambda-proxy-dev
resources: 11
api keys:
  None
endpoints:
  GET - https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/geocode
functions:
  geocode: opencage-lambda-proxy-dev-geocode
layers:
  None
```

The proxy is ready to use within your applications.

You can test this curl command (updating the `xxxxxxxxxx` with the values seen in the deploy command)
```bash
curl 'https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/geocode?q=lyon'
```

That is it, please enjoy it and let me know if you have any questions.

### Resources
cover image: Photo by [Lucas George Wendt](https://unsplash.com/@lucasgwendt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/maps?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Typescript - Tips & Tricks - Never type
Tags: typescript, webdev
Published: 2021-03-17 07:07:35

Today I want to talk about the [never type](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-never-type).
As you can understand, this type identifies a piece of code that will never be executed or represents a state that shouldn’t exist.
Here an example
```ts
const throwException: () => never = () => {
    throw new Error();
};
throwException()
console.log('never called');
```
In this simple example, you can see how the "throwException" method never permits the code execution of the console.log. In this case, the "throwException" method returns the _never_ type because the method doesn't return any value but throws an error.
To better understand the never type I show you another simple example
```ts
type Square = {
    kind: "square";
    size: number;
};

type Rectangle = {
    kind: "rectangle";
    with: number;
    height: number;
};

type Circle = {
    kind: "circle";
    radius: number;
};

type Shape = Square | Rectangle | Circle;

const area = (shape: Shape): number => {
    if (shape.kind === "square") return shape.size * shape.size;
    if (shape.kind === "rectangle") return shape.with * shape.height;
    // if (shape.kind === "circle") return shape.radius * 2 * Math.PI;

    const _exhaustiveCheck: never = shape; // Type 'Circle' is not assignable to type 'never'.
    return _exhaustiveCheck;
};
```
In this example, you can see how the "area" method detects the kind of the shape and it calculates the relative area.
I leave the circle type comment voluntarily, so I can show you the power of the never type.
At the end of the area method, you can see how the code assigns the shape to the field "_exhaustiveCheck" of type _never_. In this case, the typescript language detects that if you pass a circle shape at the area method, the line "const _exhaustiveCheck: never = shape;" will be executed, so it notifies you raising an error. The typescript language detects that the never type could be executed at runtime so it tries to prevent this problem.
To fix this problem the previous method can be reviewed in this way
```ts
type Square = {
    kind: "square";
    size: number;
};

type Rectangle = {
    kind: "rectangle";
    with: number;
    height: number;
};

type Circle = {
    kind: "circle";
    radius: number;
};

type Shape = Square | Rectangle | Circle;

const area = (shape: Shape): number => {
    if (shape.kind === "square") return shape.size * shape.size;
    if (shape.kind === "rectangle") return shape.with * shape.height;
    if (shape.kind === "circle") return shape.radius * 2 * Math.PI;

    const _exhaustiveCheck: never = shape;
    return _exhaustiveCheck;
};
```
Now the code is compiled successfully and the never type is assigned correctly.

From the never type it's all.
See you soon guys
Locally Ignoring Git Files
Tags: git, beginners
Published: 2021-03-17 06:47:10

> Have you ever wanted to maintain some local files in your git repository? Have you had to try juggling not staging those files so as not to effect the project configuration settings? What if you could add those files, have them ignored, but not touch your `.gitignore` file? Let's take a quick dive into how (and why) we might do that!

## Why Exclude Local Files
Let's start with the why? There are a number of reasons you might want to investigate ignoring local files in your repository that are specific to you but not the project as a whole.

My use case is using containers to run my development environments. They simplify dependency management, are easy to setup and even easier to completely remove _(completely)_ and let me take advantage of a Linux based environment on my Windows PC.

The easiest way to do this in VS Code is to add a `.devcontainer` folder in the project root. You can find the documentation about development containers in the [VS Code Documentation](https://code.visualstudio.com/docs/remote/containers) if this is something you might be interested in.

Our project however might not be set up for development containerization (for any number of reasons) and we certainly don't need to throw that requirement to the rest of the team if this workflow is something unique to me.

So now I have a `.devcontainer` folder (and its associated files) in VS Code but don't want to accidentally commit it, now what?

## Git Handles Local Ignores
There is already a solution to handle this very problem in git which we can read more about in the [Git Documentation](https://git-scm.com/docs/gitignore).

All you need to do is open `/path/to/project/.git/info/exclude`. The file will already be there and follows the same syntax as the standard `.gitignore`, so editing it is a breeze.

_Note: Windows users may need to show hidden files and folders if editing this via the Explorer._

This file exists for:

**Patterns which are specific to a particular repository but which do not need to be shared with other related repositories (e.g., auxiliary files that live inside the repository but are specific to one user’s workflow)**

For my use-case I have added `.devcontainer` to this file and now don't worry about having to check this one into the shared team repository. Nice!
Ali Sami Farooq : Principles for mobile app development in UK
Tags: alisamifarooq
Published: 2021-03-17 06:34:29

From large industries to small businesses to new start-ups, everyone has joined the hasty escape to embark on their presence in the minds of long-term users.Here Ali Sami Farooq listed the best design principles for developing mobile apps in UK

Keep your UI simple

Gone are the days when sparkling and flashy backgrounds were used. Today, mobile app users prefer a simple UI design through which they can perform their task easily and in fewer steps.
The simple design helps you clearly convey your messages to your customers.

Limited main actions on a single page

Users prefer the app where you don't need to think twice to take any action. Therefore, a designer doesn't have to complicate the app page by filling in several actions on a single screen.
An app with simple features that will likely stay in mobile users for a longer time.

Easy navigation

Whether it's a single platform application or a cross-platform mobile app, an easy-to-navigate mobile app is a must for everyone. Try to develop such a mobile application where users barely have to think about moving through your mobile app.

Here's how you can make browsing your app:

Add different types of essential menus to the screen.
Avoid using too much scrolling, vertically or horizontally.
Also, a mobile user doesn't have to zoom in too much.

Make the best choice for colors

A mobile application perfectly blended with colors, not only fascinates users but also leads to a higher conversion rate.

~ Ali Sami Farooq
Why and How to Use a Proxy
Published: 2021-03-17 06:14:28

Web is on the list of main requirements of this stylish world. Nearly every effort could be done on the web and it's chosen by individuals since it's time and cost effective. It's among probably the greatest blessings of technology.

Nevertheless, there are plenty of internet sites, that are not safe, and the private info of yours might be hijacked through them. Consequently, to be able to save your private information you are able to use proxy <a href ="https://en.wikipedia.org/wiki/Server">server</a>. And so do you've the proper knowledge of how you can utilize a proxy server?

Making use of a proxy server to browse online easily is quite simple and one can avail the advantages of its in a handy way. For a beginner user it's a lot easier to understand the way to utilize a proxy. Proxies are extremely essential as they assist in searching the online websites safely. One can easily defend the private info by implementing a proxy. Proxies are utilized to conceal the IP address of yours, operating system, private info etc. When you check out some of the internet websites, it's observed that all of the visitors is surfacing from the proxy server along with your computer's identity and location stays hidden. Thus, before visiting the internet places it's crucial you know the way to utilize a proxy.

The process of utilizing a proxy is convenient and easy. Neither you've to install any software program nor have you to obtain anything. Make some configurations to the browser of yours and you all ready to make use of the proxy configured. Then, just about all you've to accomplish is kind the URL addresses of any net proxy website in the internet browser of yours. After you typed the address, the contacts is redirected via the proxy therefore revealing that all of the transfer is originating from the proxy server as air filtering firewall traces just the proxy server. You are able to quickly download some music, or maybe you are able to play games or perhaps download them, you are able to do chatting, share video clips and more as you recognize the way to utilize a proxy.

Consequently, in case you would like to avail various facilities of online safely, you've to do is learning how you can utilize a proxy. It's crucial because it will help in hiding the personal information of yours and also stays away from private info in getting in to the wrong hands.

<b>Find More Information</b>: <a href ="https://www.proxies.com/ipv6">see here</a>
Assignment Help Online | Online Assignment Writing Service
Published: 2021-03-17 06:01:17

Get the best assignment help online from professional writers. We are offering assignments for over a decade and we have thousands of satisfied customers

[statistics assignment help] (https://www.calltutors.com/Articles/Statistics-Assignment-Help)
[python assignment help] (https://www.calltutors.com/Articles/python-assignment-help)
[Economics Homework Help](https://www.calltutors.com/Articles/Economics-Homework-Help)
[Digital Marketing Assignment Help](https://www.calltutors.com/Articles/Digital-marketing-assignment-help)
[Rstudio Assignment Help](https://www.calltutors.com/Articles/Rstudio-Assignment-Help)
Installing NGINX on MAC
Tags: nginx, macos, homebrew, webserver
Published: 2021-03-17 05:56:00

Nginx is one of the most widely used web servers in the world. In addition to being a web server it has also become very popular for reverse proxy, HTTP Caching & Load Balancing. 

This is a multipart part series where we will be installing, configuring and deploying Nginx on a local machine with Mac OS installed as it were a production machine. 

Let's start with Part 1: Installing Nginx. 


### Installing Homebrew

We will be using Homebrew to install Nginx. To install Homebrew open your terminal and fire the below command:


```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
``` 

You can visit https://brew.sh/ for more details

If Homebrew is already installed you can use the below command to update the repository index


```
brew update
``` 



### Installing Nginx

Once Homebrew is installed, installing Nginx is as easy as 


```
brew install nginx
``` 

Once installed you can see the version of the Nginx that is installed in the Summary.



### Starting and Stopping Nginx

To start the Nginx server fire the below command. 

```
nginx
```

It will start the web server. You can then visit [http://127.0.0.1:8080](http://127.0.0.1:8080) in your browser to see a welcome message by Nginx.

To stop the Nginx server add the stop signal as below.

```
nginx -s stop
``` 


Next ->  [Part 2: Simple Configuration Nginx on Mac](https://www.daveops.co.in/post/simple-configuration-of-nginx-on-mac-part-2)
The two general patterns of useEffect() in React Hooks
Tags: react, webdev, tutorial
Published: 2021-03-17 04:29:51

When we use `useEffect()`, there are two common patterns.  Let's start with the easier one:

```js
useEffect(() => {
  // do the set up

  return () => { 
    // do the take down
  };
}, []);
```

Here, we are providing an empty dependency array at the end, so the provided function will only execute once.  It is for "set up" and "take down".  

Where it says `// do the set up`, it is to do the set up, such as fetching data, or getting some data from `localStorage`, or set up any `setInterval()` or `setTimeout()`.  This is similar to `componentDidMount` back in the days of class components.

Then that function *returns* another function, and this function is to "take down" or "clean up".  It is where `// do the take down` is up above. This is similar to `componentWillUnmount` in the class components.

So it is quite clear: one set up, one clean up.

The pattern above is to run once. The other pattern is to "run often".

It can be

```js
useEffect(() => {
  // do the set up

  return () => { 
    // do the take down
  };
});
```
or
```js
useEffect(() => {
  // do the set up

  return () => { 
    // do the take down
  };
}, [friendID]);
```

Note that the first form does not have the dependency array at all.  This way, it is to run every time. Typically, it is to "take down" once, and to "set up" once, having a "small loop" between our grand "set up" and "take down".  It is similar to what we do for `componentDidUpdate`.

The code below that is to run every time when `friendID` changes, and it is for example, to "take down" the subscription of whether the friend is online or not, and then subscribe to another friend's online status to see whether the friend is online or not. So we can view it as a tiny take down, and a tiny set up.

So that's basically it, two actions for `componentDidMount` and `componentWillUnmount`, and then the "tiny actions" or a tiny loop, each time for a `componentDidUpdate`.

And if we have to do something for the "grand" set up and take down, and then a "tiny loop", and the actions are quite different for them, then we can use two `useEffect()`:

```js
useEffect(() => {
  // do the set up

  return () => { 
    // do the take down
  };
}, []);

useEffect(() => {
  // do the set up

  return () => { 
    // do the take down
  };
}, [friendID]);
```
so the first `useEffect()` is to run once, for the grand set up and take down, and the second one is for the "tiny loop". 

Reference: 
1. https://reactjs.org/docs/hooks-effect.html (Official docs)
2. https://reactjs.org/docs/hooks-overview.html
3. https://wattenberger.com/blog/react-hooks by Amelia Wattenberger
4. https://overreacted.io/a-complete-guide-to-useeffect/ by Dan Abramov