teleren/devto huggingface dataset:
A Guide To Angular Animations and Transition
Tags: angular, javascript, showdev, productivity
Published: 2022-01-23 19:20:35

I had hard times figuring out how angular animation works, so I am making your job easier.

in your component module import BrowserAnimationsModule or any other module that contains BrowserAnimationModule like CommonModule as Follows:

```
imports: [
  BrowserAnimationsModule
]
```

in your component add animations inside your component like following I am triggering fadeIn transition animation:

```
@Component({
  selector: 'app-name',
  templateUrl: './name.component.html',
  styleUrls: ['./name.component.scss'],
  animations: [
    trigger('fadeIn', [
      state('open', style({
        opacity: 1,
        pointerEvents: 'all'
      })),
      state('closed', style({
        opacity: 0,
        pointerEvents: 'none'
      })),
      transition('open => closed', [
        animate('3s')
      ]),
      transition('closed => open', [
        animate('3s')
      ])
    ])
  ]
})
```

Then in your HTML use it as follows, I am triggering fadeIn animation based on showAnimation variable condition you can use your own:

```
<div class="fade" [@fadeIn]="showAnimation ? 'open' : 'closed'">
  This will fade in
</div>
<button (click)="showAnimation = !showAnimation">Toggle fade</button>
```

you have to add transition for your element in css:
```
.fade {
  transition: all .4s ease;
}
```

**Your animation should work now**
you can animate transform and other properties too, I am just using opacity to fade.
My Neovim Config Setup for Linux.
Tags: tutorial, opensource, linux, beginners
Published: 2022-01-23 18:51:31

### _This config is used for mainly web development developed completely in Lua language._

1.Download and Install [Neovim](https://neovim.io/)
2.Clone this repository
```
https://github.com/nishu-murmu/dotfiles.git
```
3.Remove `/nvim` folder from this repository that you cloned and paste in your `/.config` folder if you're in linux/OSX or paste it in your `~/AppData/Local/` folder.
4.Open Neovim and wait for Packer to install all the plugins then type `:checkhealth` command.
![checkhealth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h66mpnyb1k78wvx2d0tj.png)
5.If you face any errors while `:checkhealth`, that is because you haven't installed support for python and Neovim.
You need to install it gloabally so that it is in your path.
![python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x52qb4zz7znhap7uq2gq.png)

For python support
```
pip install pynvim
```
For Neovim support
```
npm install -g neovim
```

P.S. Any suggestions are welcomed. :open_hands:
This week in Flutter #38
Tags: dart, flutter, news
Published: 2022-01-23 18:36:12

This week [Vandad Nahavandipoor](https://twitter.com/vandadnp) **released**
[35 hours of coding videos](https://www.youtube.com/playlist?list=PL6yRaaP0WPkVtoeNIGqILtRAgd3h2CNpT)
on YouTube. If you want to learn some specific topics from creating developer accounts to coding an **entire
Flutter app that connects to Firebase**, to submitting it to the stores, you can jump directly to the
correct video in the playlist and watch it.

It is more a 35 hours long "follow along" coding session, rather than a course, but you can learn so much
from it. Thank you Vandad for sharing it **for free!**

He decided to keep it free because he knows what it means [not to be able to afford](https://twitter.com/vandadnp/status/1478952254820474883)
a course.

Are you going to watch it? Let me know by [leaving a comment](https://ishouldgotosleep.com/news/this-week-in-flutter-38/#comments).

<small>- Michele Volpato</small>

## Development 🧑‍💻

### 🔗 [Cross-Platform file downloads using Flutter](https://itnext.io/cross-platform-file-downloads-using-flutter-6723d40ee730)

Who would have thought that it is **not trivial** to download a file in a cross-platform Flutter app? If your app is both mobile
and web, you might end up in the same situation [Marcos Carlomagno](https://github.com/MCarlomagno) was in. Follow this article
to learn how he solved the problem.

### 🔗 [How to parse fixed-length data and why you should avoid 'String.substring'](https://yapb.dev/tips-and-tricks-how-to-parse-fixed-length-data-and-why-you-should-avoid-string-substring)

**String manipulation** in Dart can get messy, especially if you have emojis in your strings.
[Sander Roest](https://twitter.com/jsroest) shows you how you can avoid String parsing problems
by fixing the length of the data you are going to parse.

### 🔗 [How to use constructor tear-offs in Dart](https://dev.to/juanbelieni/how-to-use-constructor-tear-offs-in-dart-3k9j)

How can you exploit the **constructor tear-offs** introduced in Dart 2.15?
[Juan Belieni](https://github.com/juanbelieni) has a good example where you can improve the readability of your code
by using them in a `switch` statement.

---

[...]

Read the rest on [my website](https://ishouldgotosleep.com/news/this-week-in-flutter-38/).

[Join the Flutter and Dart newsletter](https://ishouldgotosleep.com/subscribe-to-the-newsletter-devto/) and receive it weekly in your inbox.
Too many domains, so little time...
Tags: webdev, domain, startup, web3
Published: 2022-01-23 18:36:04

Would love to hear your thoughts. Open to all possibilities - just advice, collaboration, name sales (for some)! :)

Priority
pte.ltd
w3cal.com
bio.cv
promo.credit
paid.events
bit.mv
pinup.link

Web 3
founderess.com / 👩‍💻.TO
nfts.by
mojium.com
metaadvice.com
gainloot.com
ranked.by
refer.by
tweet.by
webversion3.com

Programming
schema.codes
html6.dev
sso.digital

Finance
aset.vc
finbility.com
equitivo.com
figureoutfinance.com

Design
uilot.com / uxpre.com / uiref.com
artistunit.com
materialeditor.com

App Ideas / Sale
part.app
saver.link
says.so
poll.my
streamed.by / ranked.by / tutorial.by
mezej.com
usezeal.com
usefame.com

Unsorted
hypesome.com
solebasis.com
fulldevelop.com
paidproposal.com
paidbid.com
originalrole.com
likily.com

Idealism
seo.ngo
worldconcerns.com
rtdp.org / righttodataportability.com
coderights.com
equitycoders.com
laptopfund.org
thinksthat.com
givebroadband.com

Domains
startupnic.com
namedear.com
nameclever.com
dnbrief.com
namecontract.cm
siteminted.com
How The Web Works?
Tags: webdev, softwaredevolopment, coding, dns
Published: 2022-01-23 18:35:13

What actually happens between you typing Google.com and the website popping up in your computer if point A is your computer and point A is the web server hosting google.com everything in between is the cloud right actually yes and no 
In between making a browser request and getting a response from the webserver, there are multiple pieces of software that is talking to each other mostly through a protocol known as HTTP( hypertext transfer protocol)
Let's go with the overview of how the web works and then dip type into each step individually
Any website that you visited started from a client making a request on the web at line can be anything a Laptop, Computer, Mobile, And Even An Application Also web browser, mobile apps, IoT devices and much more when a client types URL to the browser's address bar you are sending a request
To a server, the internet is a network of cables connected together using wires, routers, hubs and switches at many points all connecting the servers together coming to service there are multiple types of servers some of them are web servers mail servers and DNS servers the web service serves web sites, DNS service match DNS records and mail service send and receive emails
Sitting on the service are the files folders and media that all make up the webpage and connecting the media with the hardware is the software we refer to the software when we called it the web it is a software that works as a glue and serves as dynamic content slide games applications over the web and simple websites and you can access all of them in web browsers love you can pick from a plethora of web browsers there is Chrome, Firefox, Safari to name a few and also a lot of service's like games, applications, service, and products over the web stitching them all together is HTTP just like in the real world if two people wanted to talk but they have a different language background then they can use a common language like English the think of the HTTP English of the web now all HTTP request usually start with you typing a domain name like google.com
Coming to the server's part they however love to crunch numbers so they only work with IP addresses just like a phone number IP address point to a specific server on the web now the man in the middle who is converting your domain name to the IP address is known as a DNS service when you sent a request it takes the request find the respected IP address and send it a sealed envelope which contains details about the client to send it to send you back the Client who requested it now you got to see the website you wanted now when this is completed you got what you ask for and now the trip is over
Git versiya kontrol
Tags: git, beginners, github, dotnet
Published: 2022-01-23 18:32:58

`git`ni qanchalik bilishimizga da'vo qilmaylik baribir Googleda yoki Youtubeda `git`ga doir savollarni tez-tez so'rab turamiz. 

> Well, not anymore 💪

Git versiya boshqarivuda tajribangiz qanday bo'lishidan qat'iy nazarni, uni keyingi bosqichga olib chiqish vaqti keldi. 

Qisqasi, Learn Git Branching vebsaytida o'yinlar, kichik topshiriqlar va vizualizatsiya orqali `git`ni tez va maroqli o'rganing.

[Learn Git Branching](https://learngitbranching.js.org)
Contributing to Telescope 2.5
Published: 2022-01-23 18:21:42

## Overview
This week, we are planning to release Telescope 2.5, everyone has their own PRs to deal with. My [issue](https://github.com/Seneca-CDOT/telescope/issues/2622) was modifying the build log page in the dashboard to a better UI which is more understandable for users.

## Progress
My first mistake that took me hours to tackle was not rebasing the newest <code>master</code> branch. My old version did not have the header in the build log so I was lost. After talking to the Telescope group in slack, the problem was solved. My professor also gave me the <code>status</code> links to test locally, this made everything way more easier.
In <code>build-log/api.js</code>, I added a new condition to the <code>checkBuildStatus</code>.
```
if (!data.current && data.previous) {
      return {
        building: true,
        previous: true,
        title: data.type,
        githubData: data.previous.githubData,
        startedAt: new Date(data.previous.startedDate),
        stoppedAt: new Date(),
        result: data.code,
      };
    }
```
If the <code>status</code> returns previous data and there is no current data, <code>checkBuildStatus</code> will return the previous data instead of <code>building: false</code>.
I also had to modify <code>views/builds.hbs</code> to create a new title if there is a previous build. This means, in <code>build-log/build-header.js</code>, I had to add on another if condition to create a message for the previous build 
```
if (previous) {
    buildPrevious.innerText = 'Previous Build';
  }
```
After all, my code worked and I submitted the [PR](https://github.com/Seneca-CDOT/telescope/pull/2669). My PR got reviewed by my professor, some other open source students and the Sheriff. Everything was good and I just needed to rebase and merge it to the master branch.

## Discussion
A have small discussion about React Native. The idea was creating the mobile version of Telescope using React Native. I have worked with React Native once and I loved it. If someone is willing to lead the React Native project in Telescope, I will definitely join his/her team. 

## Plan for next week
I have 2 issues for next week:
https://github.com/Seneca-CDOT/telescope/issues/2676
https://github.com/Seneca-CDOT/telescope/issues/2296
They are related to the sign up component that has been turned off. I need to talk to Duke for more details but at the moment, I need to finish my other assignments since they will be due this week so I will take a look at both issues next week.
Dilanda resah sewaktu hendak bertemu kawan
Tags: magangkomatiksrd
Published: 2022-01-23 18:20:06

> "Kita ngerjain tugasnya di kafe yang jarak sama antara rumahmu dan rumahmu saja ga sih?, biar sama jauhnya"
> "Iya, boleh banget tuh, tapi di mana?"
> "Hmmm, di mana ya 🤔"

Di era digitalisasi saat ini, satu dengan orang lainnya semakin mudah dalam berkomunikasi tanpa sekat jarak. Berkomunikasi dengan seseorang atau teman dari luar kota pun bukanlah hal yang menyusahkan. Pasalnya teknologi yang berkembang saat ini mampu menjembatani itu semua melalui aplikasi percakapan ataupun aplikasi _video conference_.

Namun bertemu tatap muka secara langsung terkadang dirasa perlu, sebab berkomunikasi secara langsung mampu akan membuat lebih mudah dan fokus dalam memahami apa yang sedang dibicarakan, sehingga dapat menghindari kesalahpahaman. ataupun membangun _chemistry_ antar kedua pihak.

Nah, ketika kita hendak bertemu tatap muka secara langsung dengan seseorang atau teman, entah itu mengerjakan tugas, diskusi soal bisnis, melepas kerinduan dengan pasangan, atau sekedar nongkrong bersama teman yang berasal luar kota, terkadang kita dipusingkan dalam menentukan lokasi/tempat yang sesuai dan nyaman – misal kafe, yang berada di tengah antara kedua belah pihak. Sehingga tidak memberatkan salah satu pihak.

Lantas apa yang dapat kita lakukan guna menyelesaikan persoalan sepele namun meresahkan ini ?
JavaScript ES6
Tags: javascript, beginners, webdev, productivity
Published: 2022-01-23 18:08:31

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMAScript is the official name of the language.

ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5, and ES6.

Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018).

##Arrow Function 
```javascript
const sum =(a,b)=> a+b
console.log(sum(2,6))
//prints 8
```
##Default parameters
```javascript
function print(a=5){
console.log(a)
}
print();
//prints 5
```
##Let Scope
```javascript
let a=3;
if(true){
let a=5;
console.log(a);//prints 5
}
console.log(a);//prints 3
```
##Const
```javascript
//can be assigned only once
var x = 50;
// Here x is 50
{
  const x = 16;
  console.log(x);// Here x is 16
}
console.log(x); // Here x is 50
```
##Multiline String
```javascript
console.log(`This is a 
multiline string`);
```
##Template string
```javascript
const name ='Chhetri'
const message =`Buddhadeb ${name}`
console.log(message)
//Prints Buddhadeb Chhetri
```
## Exponent Operator
```javascript
const byte =2 ** 8
console.log(byte)
//same as : Math.pow(2,8)
```
##Spread Operator
```javascript
const a=[1,2]
const b=[3,4]
const c=[...a,...b]
console.log(c) 
//[1,2,3,4]
```
##String Includes()
```javascript
console.log('apple'.includes('p'))
//Prints true
console.log('apple'.includes('tt'))
//prints false
```
##String StartsWith()
```javascript
console.log('ab'.repeat(3))
//prints 'ababab'
```
##Destructuring array
```javascript
let [a,b] =[3,7];
console.log(a);//3
console.log(b);//7

```
##Destucturing object
```javascript
let obj ={
a:55,
b:44
};
let{a,b}= obj;
console.log(a);
//55
console.log(b);
//44
```
##Object property assignment 
```javascript
const a=2
const b=5
const obj={a,b}
//before es6:
//obj ={a:a,b:b}
console.log(obj)
//{a:2,b:5}
```
##Object.Assign()
```javascript
const obj1 ={a:1}
const obj2 ={b:2}
const obj3 =Object.assign({},obj1,obj2)
console.log(obj3)
//{a:1 ,b:2}
```
##Promises with finally
```javascript
promise
.then((result) => {...})
.catch((error) => {...})
.finally(() => { 
    //Logic independent of success/error 
})
/* The handeler is called when the promise is fulfilled or rejected.*/
```
Getting error while rendering component
Tags: react, javascript
Published: 2022-01-23 17:35:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xitiz8htlxa60f7ih5kz.png)When I am importing component to render I am getting error 


**react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Page.js:11.
    at Page**
What Is Web 3?
Tags: web3, webdev, programming, javascript
Published: 2022-01-23 17:21:26

## The Evolution of the Web
The web has evolved a lot over the years, and the applications of it today are almost unrecognizable from its most early days. The evolution of the web is often partitioned into three separate stages: Web 1.0, Web 2.0, and Web 3.0.

{%youtube G75pZTJyfsU%}

## What is Web 1.0?
Web 1.0 was the first iteration of the web. Most participants were consumers of content, and the creators were typically developers who build websites that contained information served up mainly in text or image format. Web 1.0 lasted approximately from 1991 to 2004.

Web 1.0 consisted of sites serving static content instead of dynamic HTML. Data and content were served from a static file system rather than a database, and sites didn't have much interactivity at all.

You can think of Web 1.0 as the read-only web.

## What is Web 2.0?
Most of us have primarily experienced the web in its current form, commonly referred to as web2. You can think of web2 as the interactive and social web.

In the web2 world, you don’t have to be a developer to participate in the creation process. Many apps are built in a way that easily allows anyone to be a creator.

If you want to craft a thought and share it with the world, you can. If you want to upload a video and allow millions of people to see it, interact with it, and comment on it, you can do that too.

Web2 is simple, really, and because of its simplicity more and more people around the world are becoming creators.

The web in its current form is really great in many ways, but there are some areas where we can do a lot better.

Web 2.0 Monetization and Security
In the web2 world, many popular apps are following a common pattern in their life cycles. Think of some of the apps that you use on a daily basis, and how the following examples might apply to them.

## Monetization of Apps
Imagine the early days of popular applications like Instagram, Twitter, LinkedIn, or YouTube and how different they are today. The process usually goes something like this:

- Company launches an app
- It onboards as many users as possible
- Then it monetizes its user base

When a developer or company launches a popular app, the user experience is often very slick as the app continues rising in popularity. This is the reason they are able to gain traction quickly in the first place.

At first, many software companies do not worry about monetization. They strictly focus on growth and on locking in new users – but eventually they have to start turning a profit.

This article was inspired by:- https://www.epicprogrammer.com/2022/01/what-is-web-3-why-is-it-called-internet_13.html
Semicolon or No semicolon?
Tags: javascript, webdev
Published: 2022-01-23 17:20:40

I have 10 years of experience being a JavaScript developer and I forget that semicolon is optional. Adding a semicolon in the end is a simple instinct for me.

From my point of view, if you are using the right tools like jshint or jslint to catch the syntax errors before pushing the code to your repository, it doesn't matter if you use a semicolon or not. 

I use semicolons in the end because I am tuned that way while working with professionals or mentors who end the statement with a semicolon. I also advocate using semicolons in the end because of the following reasons.

### Automatic semicolon assertion

I won’t spend too much time explaining about it since it is really well articulated in ecma specs https://tc39.es/ecma262/#sec-automatic-semicolon-insertion.

To put it simply, it is better to handle the semicolon ourselves than relying on a compiler/minifier which has a chance of being unpredictable. Especially, when you are using ‘[‘ or ‘(‘ or binary operator or a regex in the next line without ending the previous statement with a semicolon. Refer https://tc39.es/ecma262/#sec-asi-interesting-cases-in-statement-lists.

I prefer lesser risk on my production code and I believe in the statement that if something can go wrong it will definitely go wrong.

### Consistency

Most developers nowadays are full stack developers who have dabbled in one or more backend languages. And most of the popular backend languages (apart from [python](https://www.python.org) that I know of) have statements ending with semicolon. 

So when a developer tends to switch between other programming languages and JavaScript they don't have to unlearn the idea of not putting the semicolon in the end. Remember it is optional. So no offense if someone puts it or omits it. But the idea is to keep a single standard and consistency so that it doesn't cause any confusion among team members on what to follow. So make sure you choose one or else brace yourself for resolving lots of ideology clashes among the team members like the discussion going on at https://davidwalsh.name/javascript-semicolons.
TIL CSS conic gradient
Tags: todayilearned, css, gradients
Published: 2022-01-23 17:18:25

---
title: TIL CSS conic gradient
published: true
description: learning about css conic gradients
tags: todayilearned, css, gradients
//cover_image: https://direct_url_to_image.jpg
---

I'm currently working my way through a udemy course building out some small projects with CSS and vanilla javascript and I learnt about conic gradients.

CSS gradients despite learning about them a long time ago are something I rarely use and have to look up every time, but I'd never heard of conic gradients until it appeared in this project.

[Info on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient())

Example:

```css
.gradient {
  background: conic-gradient(red, orange, yellow, green, blue);
}
```

They create a cool effect and definitely something I will try and find a use for in future projects. Does anyone have use case for this type of gradient?
Learning AWS and Python..
Tags: aws, python, beginners
Published: 2022-01-23 17:14:15

I really don't have any idea how it works and what to post here. It is my first tech community account. 

Recently I started taking AWS online training course and practicing Python by watching youtube videos. I am really glad that I choose learning this new skills and really hope to make my career in the cloud computing field.

I am beginner in the tech field and confused.. hope I would get some help from this community to build a career in cloud computing .
Logos for Reco Fans! | Reco PC Server
Tags: logo, reco, python
Published: 2022-01-23 17:13:09

### Reco PC Server Logo
<img  width="200" height="375" alt="Reco PC Server Logo" src="https://raw.githubusercontent.com/Arvinth-Krishna/Reco-PC-Server/main/reco_logos/Reco_logo.png">

### Reco PC Server - Mobile Logo
<img  width="200" height="375" alt="Reco PC Server - Mobile Logo" src="https://raw.githubusercontent.com/Arvinth-Krishna/Reco-PC-Server/main/reco_logos/Reco_Mobile_logo.png">

### Reco PC Server - Commander Logo
<img  width="200" height="375" alt="Reco PC Server - Commander Logo" src="https://raw.githubusercontent.com/Arvinth-Krishna/Reco-PC-Server/main/reco_logos/Reco_PC_Server_Desktop_logo.png">

#### What is Reco PC Server?
**Reco PC Server** is a cross platform PC Controller Discord Bot which helps you to control your system easily & it's written in Python discord.py.

Using Reco you can easily control your computer remotely and have it do from simple tasks such as shutdown, sleep, and lock to opening a website or executing powershell commands. Currently Reco has more than 35 commands. [To know more...](https://dev.to/arvinthkrishna/control-your-pc-using-discord-reco-pc-server-3pgd)