teleren/devto huggingface dataset:
CSS Animations
Tags: css
Published: 2021-12-19 16:05:16


What are CSS animations?

CSS animation is an important role for styles. Basically, animation lets an element gradually change from one style to another style. We can change many CSS properties if we want. 
CSS animation gives the fancy style for a document or element. We have to use keyframes to use CSS animations.

By using CSS animations:

CSS animation is easy to use for simple animations, without using JavaScript.
CSS animation runs very well, even under moderate system load. Simple animation can perform poorly in JavaScript.
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
Some CSS animation properties is give below:
@keyframes
animation
animation-iteration-count
animation-name
animation-delay
animation-play-state
animation-timing-function
animation-direction
animation-duration
animation-iteration-count: 
We can use animation-iteration-count property to specify the number of times an animation should run. For example-
div {
  background-color: green;
  animation-iteration-count: 5;
}
This animation should run 5 times, because we give the animation-iteration-count value is 5.
animation-delay: 
We can use the animation-delay property to specify the delay for the start of an animation. For example-
div {
  background-color: green;
  animation-delay: 5s;
}
This animation should start after 5 seconds delay, because we give the animation-delay value is 5s.
animation-direction:
We can use the animation-direction property to specify the animation should move forward, backward or move in a cycle. For example-
div {
  background-color: red;
  animation-direction: reverse;
}
This animation should move backward, because we give animation-direction value is reverse.
CSS Box Model
Tags: beginners, css, programming, webdev
Published: 2021-12-19 15:49:24

## What is CSS Box Model?

Don't panic. We can consider all HTML elements as boxes. Why do we need to know the term "Box Model"? Ok, keep patient.
When we focus design and layout of a web page, the term "Box Model"  includes in our thinking. Isn't it?
The CSS box model is a box that covers around every HTML element. It consists of margins, borders, padding, and the actual content. That's it!🎯
[MongoDB Submission Post Placeholder Title]
Tags: atlashackathon
Published: 2021-12-19 15:35:17

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
It is a community app that uses MongoDB Atlas database for control huge amount of data!


### Submission Category: 

Community Creation


### Link to Code 
https://github.com/tuncayofficial/chitly 


### Additional Resources / Info

Coded with ReactJS, and NodeJS!
CSS Media Query
Tags: css, javascript, react, html
Published: 2021-12-19 15:11:45

Usually we do not browse a website through a specific device, when we use the device we have. There are many people who do not have a laptop / computer / tablet, who use a mobile phone, so work or time purpose everyone uses the device is different.So a website 'designer or developer' has to create a website with all types of users in mind. Usually when we design a website, the design is for computers or laptops by default, for which we have to react differently considering other users.And CSS media query is used to make this responsive.

I have given a lot of introductions so far, now let's come to the real thing, I have already said that the design of the website depends on the device, so let's talk a little bit about the device or its measurements, usually 3 types of devices:
1. Larger devices( desktop, laptop, supercomputer etc).
2. Medium device(Tablet, iPads etc).
3. Small device.(Smartphone or any other Mobile Phone etc)

In short, the way I remember the size of these 3 devices is:
1. Larger devices( minimum width : 1024 px).
2. Medium devices (minimum width: 768 px and  maximum width: 1023 px).
3. Small devices:(maximum width : 768 px).

Now let me tell you how to make a website responsive for different devices, in this case you can use Vanilla CSS and again you can use their class or component even if you use CSS framework. Today I will try to explain briefly with some examples:

**- Vanilla CSS**
Only for Small device( Resolutions 768px And Above)
@media only screen (min-width : 768px ){
    //code segment
}
Someone time we can use 680 px instance of 768 px
@media only screen (min-width : 680px ){
    //code segment
}
Medium device(Resolutions Between 768px And 960px)
@media only screen and (min-width : 768px ) and (max-width: 960px){
    //code segment 
 } 

**- CSS Framework**
Bootstrap, tailwind, material ui are the most familiar of css frameworks.

**- Bootstrap:**
 Here we can make a website responsive using className.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwzlutqtm2sldl1k5lhq.PNG)
Here sm, md, lg className use to make a site responsive. Sm means small device, md means medium device, lg means large device.

**- Tailwind:**
 sm (resolutions 640px) ,md( resolutions 768px),
lg (resolutions 1024px),xl (resolutions 1280px), 2xl (resolutions 1536px). The tailwind is used as a class like bootstrap.

**- Material ui :**
 UI using Breakpoints layout to make a site responsive.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h58fh4valszn7b6wz4i.PNG)
Here,xs(extra-small: 0px), sm(small: 600px), md(medium: 900px), lg(large: 1200px), xl(extra-large: 1536px).
2 Essential CSS Properties
Tags: css, webdev, beginners, html
Published: 2021-12-19 15:10:48

**1.Grid**
![CSS Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvde62rtbyr7f2rpmq0e.jpg)

CSS Grid Layout is used to divide a page into major parts.

Like tables, grid layout make an author to align elements into columns and rows. However, by the use of CSS grid we can easily make attractive looked webpages. By using it we can easily make responsive website with pixcl perfection.



Example:

**HTML:**

![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ar2xbirdebsrqlbwif5.png)
**CSS:**

![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7vzr2q2g0l7deg94l9y.png)
**Output:**

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


**2.Flex**
![CSS Flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ibczjl3n09g6bxabsmb.jpg)

The flex CSS shorthand property is the combination of flex-grow, flex-shrink, and flex-basis property. It is used to set the length of flexible items. The flex property is much responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

**Syntax:**

![CSS Flex Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ut86cdfol91g84olesu.png)
Build a simple API with Golang echo framework
Tags: go, beginners, tutorial, programming
Published: 2021-12-19 15:06:59

Hi everyone, in this article i'm going to show tutorial on how to create simple API with Echo Golang framework

First thing that we need to do is to create project in golang by running this command

```
go mod init {your-package name}
```

example

```
go mod init github.com/yanoandri/simple-golang-echo
```

your package name could be anything, but for this tutorial i'm using the url of my github repos for later

after running the command, there will be a file call `go.mod` and this time we will run this command to get echo dependencies

```
go get github.com/labstack/echo/v4
```

and copy the downloaded dependencies to our project's folder that we are going to call `vendor` with command

```
go mod vendor
```

after the dependency is downloaded, let's start to create a file call `server.go`

```
package main

import (
	"net/http"

	"github.com/labstack/echo"
)

type HelloWorld struct {
	Message string `json:"message"`
}

func main() {
	e := echo.New()
	e.GET("/hello", Greetings)
	e.Logger.Fatal(e.Start(":3000"))
}

func Greetings(c echo.Context) error {
	return c.JSON(http.StatusOK, HelloWorld{
		Message: "Hello World",
	})
}
```

let's run the API that we just created, by command

```
go run server.go
```
![Successfully run echo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwjn62onrsos9xbdvfuv.png)
  

Then we will test the API by request to `http://localhost:3000/hello` the response will be

```
{"message":"Hello World"}
```

Now, let's head back and handle any parameters or query inside the url, by modifying some of the line in the main function. let's add the function to handle query and parameters

```
func GreetingsWithParams(c echo.Context) error {
	params := c.Param("name")
	return c.JSON(http.StatusOK, HelloWorld{
		Message: "Hello World, my name is " + params,
	})
}

func GreetingsWithQuery(c echo.Context) error {
	query := c.QueryParam("name")
	return c.JSON(http.StatusOK, HelloWorld{
		Message: "Hello World i'm using queries and my name is " + query,
	})
}
```

Then in the `main` function, add this two line

```
e.GET("/hello/:name", GreetingsWithParams)
e.GET("/hello-queries", GreetingsWithQuery)
```

let's test it again by requesting the url with parameters
`localhost:3000/hello/yano`

```
{"message":"Hello World, my name is yano"}
```

and the second request using query with `http://localhost:3000/hello-queries?name=yano`

```
{"message":"Hello World i'm using queries and my name is yano"}
```

That's it for this tutorial, thank you for reading and happy coding :)

Source:
* [Echo](https://echo.labstack.com/guide/)
* [Repo](https://github.com/yanoandri/simple-golang-echo)
Free Fire JavaScript Concepts
Tags: beginners, javascript, tutorial
Published: 2021-12-19 14:59:58

Hello _Everyone_, Today We Will Discuss About SOME JS Concepts. We Have a Perfect Name For This BLOG, Which is called, **_Free Fire JS Concepts_**. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. **Let's Start,**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azxgwtndstetbiimhqd7.jpg)

---

### How JavaScript Work
JavaScript is A client side Programming Language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm. JavaScript is single-threaded. Because while running code on a single thread, it can be really easy to implement as we don't have to deal with the complicated code scenario. JavaScript is always synchronous. 

```
consol.log("I Love JavaScript")
```
When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it. Chrome Has Chrome V8 For Running JavaScript in Chrome Browser. And FireFox Has SpiderMonkey.

---

### JavaScript String
String is a primitive data type in JavaScript. The JavaScript string is an object that represents a sequence of characters. 
We can define string like this: 

```
let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
```

**There are 3 methods for extracting a part of a string:**

slice(start, end)

```
let str = "Apple, Banana, Kiwi"; 
let part = str.slice(7, 13);
```
substring(start, end)

```
let str = "Apple, Banana, Kiwi"; 
let part = str.substring(7, 13);
```
substr(start, length)

```
let str = "Apple, Banana, Kiwi"; 
let part = str.substr(7);
```

---

### Event bubbling in JavaScript 
Event bubbling is a method of event propagation in the HTML DOM API.  When an event is in an element inside another element, and both elements have registered a handle to that event. The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp6zriiu4jeh50849c90.png)
 

---

### Handle Exceptions - Try-Catch
We use Try-Catch-Finally For Handle Exceptions. Our Main Code in Try, And If We Face Any Error Then Catch Will Work, If We Set Any Error Message, That will be in Catch Area, And If We want TO Run Any CODE Without Any Try Catch, We Will Use Finally Method. 

```
try {
  // Try to run this code 
}
catch(err) {
  // if any error, Code throws the error
}
finally {
  // Always run this code regardless of error or not
  //this block is optional
}
```

---

### Closure in JavaScript
Closure Function is a function which has access to the variable from another function's scope. Whenever a function is declared in JavaScript closure is created. Returning a function from inside another function is the classic example of closure.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4a8534qtfymig85dl9o.png)
Tumx for Termux
Published: 2021-12-19 14:58:41

Have you ever wonder how to open multiple sessions in a singel screen in [termux]().

Here is a solution, an open source terminal multiplexer for Linux or Unix operating systems.

>I often used this alot while writing program. 

It was developed by [Nicholas Marriott](https://github.com/nicm) and contribute by [Thomas Adam](https://github.com/ThomasAdam) , [Ben Boeckel](https://github.com/mathstuf) and many more you can check it in the [GitHub Contribution page](https://github.com/tmux/tmux/graphs/contributors).

Tmux is written in C Language and it's open sourced at GitHub. If you think that you can improve the program than you can contribute at [Tumx](https://github.com/tmux/tmux).

> You can visit my GitHub account [jyotirmoydotdev](https://github.com/jyotirmoydotdev) and follow me i contribute c++ programmes which will help you to learn c++ .

Now let me tell you who to use it and gain all the full potential of this program.

---
## Installation 🔧
---
To install tumx in your termux you will first need to update the packages by typing...

    pkg update && pkg upgrade

After that you need to type a command which will basically install the tumx

    pkg install tmux

## Basic command

After you successfully install tmux. You will see message like this 

    Unpacking tmux (3.2) ...
    Setting up tmux (3.2) ...
    Processing triggers for man (1.14.5-2) ...

Now move on the basic commands.

To start the program, first simply type :

    tmux

Remember if you want to use this command than first you need to type <br>` CTRL + b ` after than the command.

> <b>Eg</b> : To split a screen in vertical orientation your need to first type ` CTRL + b ` after than " % " percentage symbol.

| Command | Description |
| - | - |
| % | Vertical Split      |
| " | Horizontal split |
| z | Full screen mode for current pane |
| o | Go to next pane |
| x | Kill pane |

This are the command commonly use there are more advance thing which i will covering in the part 2.

Here are some of the extra command which will be useful

<b>Note </b>:  For this command you don't need to type `CTRL + b ` .

| Command | Description |
| - | - |
| tmux | Start tmux |
| tmux new -s "name" | Start tmux with "name" |
| tmux ls | Show the list of session |
| tmux kill-session -t "name" | Kill the session "name" |
| tmux kill-server | Stop the program |

To get all the command list type ` CTRL + b ` and then "?" question mark.

Thank you for reading this far. If there is any mistake than a humble sorry 🙇 and leave a comment.

Do follow me on Twitter to get the latest update.
<a href="https://twitter.com/jyotirmoydotdev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false"><img src="https://img.shields.io/badge/-_@jyotirmoydotdev_-blue?style=flat&logo=twitter&logoColor=white">
</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Experimenting with Three.js: Devlog #1
Published: 2021-12-19 14:34:07

## Before you read it

This is not a tutorial and I am not a Three.js expert. I am going to document my learning journey and share it with you. If you find it useful then I would appreciate you leaving a comment or liking this post. Thanks and let's get started 😎

-------

## Intro

My jaw dropped when I saw for the first time things done in [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). It started a revolution in the web world. However, it was super difficult to do anything in it, because it was too low-level (and I didn't have so much experience in programming 😅).

![WebGL example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v6ha8tgvt9w8krdxckt.gif) 

Demo: http://madebyevan.com/webgl-water/

Then Three.js enters the scene. Doing WebGL magic becomes easier and more cool applications appear online. 
![Bruno Simon Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yaujrlm3p8wh80stugq1.gif)

Website: https://bruno-simon.com/

But still, it was not super easy to get something done in Three.js. Yes, it has great documentation and many examples, but in my opinion, for the average programmer, it was still difficult.

## Let's check it again

It is 2021. Many things have changed. More cool applications created, more examples, better docs 💪

React is the number one js library. We have [react-three-fiber](https://github.com/pmndrs/react-three-fiber) which allows us to use Three.js in React way (components, hooks, etc.). 

Awesome, now there is no need to write a lot of boilerplate low code to set the scene and have box rotating in it. 

## Learning sources

Of course, I would recommend digging into Three.js, react-three-fiber documentation. 

If you need some more help with it then I would suggest you check:
- [Learn Three.js using React: Build a 3D Tesla Workshop 2021](https://www.udemy.com/course/threejs-using-react/)

It shows the basics of Three.js and how it can be integrated with React-based web applications. 

- [Three.js Journey](https://threejs-journey.com/)

I don't think that it needs any explanation. Bruno Simon created lots of art pieces with WebGL and can share his knowledge with you.

## Let's play with it

After finishing [Learn Three.js using React: Build a 3D Tesla Workshop 2021](https://www.udemy.com/course/threejs-using-react/), I got fundamentals that would allow me to move on. Also, I learned how to use Three.js as a handbook and find everything I need.

Soon I was able to create my first scene:
{% twitter 1466117820526305283 %}

Here are used [PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls), but I do not handle wall collisions which mean that the camera can pass throw walls and objects 🤦‍♂️
As well it is not real room texture but 6 walls that use box geometry 😄 

But I am happy with what I have and it was easy to set it up 🙂

---- 

In the next post, I will go more deeply into Three.js stuff and show you how I handled walls collision using a few tricks ✨

Thanks for reading! 🙌
Error I had after updating MacOS to Monterey from Big Sur
Tags: monterey, macos, errors
Published: 2021-12-19 14:02:37

I had an error when I updated to Big Sur as well. Because my bash didn't work and had to use zsh.
This time my git command didn't work.
```
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```
This was what I saw from my terminal.
Link that solved my problem: https://stackoverflow.com/questions/52522565/git-is-not-working-after-macos-update-xcrun-error-invalid-active-developer-pa 

I had to use these commands
```
sudo xcode-select --reset
xcode-select --install
```
Then then error message's gone. However when I tried to git clone something.. I got another message saying this...

![error-monterey1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x47wodiof191e5z2qazb.png)
So, I pressed enter(return key).
Then you will see long agreement doc.
![error-monterey2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycvpvzapj4qzkhi00m2m.png)
 
Just keep pressing space until you see this
![error-monterey3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj4ai5rhv4x7g9t3oala.png)
Okay... so I typed the command
```
sudo xcodebuild -license
```
then type your password. Then you will see another long agreement doc
![error-monterey4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlazmesl3otcou00z6lc.png)
 
and at the end you will see things like above.
Type anything but cancel.
Then it's done.
If there's someone updated from Big Sur to Monterey and had the same issue, I hope this is helpful!
To find company admin panels
Tags: cybersecurity, security, webdev, tutorial
Published: 2021-12-19 12:57:02

⚙️Some ways to find company admin panels 💻

 1. Using Google Dorks:

 site: target.com inurl: admin |  administrator |  adm |  login |  l0gin |  wp-login

 intitle: "login" "admin" site: target.com

 intitle: "index of / admin" site: target.com

 inurl: admin intitle: admin intext: admin

 2. Using httpx and a wordlist:

 httpx -l hosts.txt -paths /root/admin-login.txt -threads 100 -random-agent -x GET, POST -tech-detect -status-code -follow-redirects -title -content-length

 httpx -l hosts.txt-ports 80,443,8009,8080,8081,8090,8180,8443 -paths /root/admin-login.txt -threads 100 -random-agent -x GET, POST -tech-detect -status-  code -follow-redirects -title -content-length

 3. Using utilities:

 https://github dot com/the-c0d3r/admin-finder
 https://github dot com/RedVirus0/Admin-Finder
 https://github dot com/mIcHyAmRaNe/okadminfinder3
 https://github dot com/penucuriCode/findlogin
 https://github dot com/fnk0c/cangibrina

 4. Using search engines:

 Sh0dan:

 ssl.cert.subject.cn:"company.com "http.title:" admin "

 ssl: "company.com" http.title: "admin"

 ssl.cert.subject.cn:"company.com "admin

 ssl: "company.com" admin

 Fofa:

 cert = "company.com" && title = "admin"

 cert.subject = "company" && title = "admin"

 cert = "company.com" && body = "admin"

 cert.subject = "company" && body = "admin"

 ZoomEye:

 ssl: company.com + title: "admin"

 ssl: company.com + admin

 Censys (IPv4):

 (services.tls.certificates.leaf_data.issuer.common_name: company.com) AND services.http.response.html_title: admin

 (services.tls.certificates.leaf_data.issuer.common_name: company.com) AND services.http.response.body: admin


www.github.com/attaullahshafiq10