teleren/devto huggingface dataset:
How to Create a Marquee in HTML/CSS!
Tags: html, css, tutorial
Published: 2021-12-19 08:51:03

Hey **fellow creators**

Learn how to create a *marquee in HTML/CSS* only in less than a minute!
 
If you prefer to watch the video **version**, it's right here :

{%youtube TEUPVZVX4Mg%}


##1. The HTML structure.

Create a basic HTML structure with a container and then a "p" with some text inside:

```html
<div class="marquee-container">
	<p class="marquee">
		LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
	</p>
</div>
```

##2. Style the page.

Start by styling the container by making sure its overflow is hidden:

```css
.marquee-container{
	display: flex;
	align-items: center;
	background: #25284c;
	overflow: hidden;
}
```


Then style the text however you want, but most importantly create an animation:

```css
.marquee{
	font-size: 100px;
	line-height: 1.3;
	font-family: sans-serif;
	padding: 24px 0;
	color: #fff;
	white-space: nowrap;
	animation: marquee 3.5s infinite linear; /* notice the infinite */
}
```

Add a pseudo element ::after with the exact same text as the one in the "p" :

```css
.marquee:after{
	content: "LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME";
}
```

##3. Create the animation.
Now create the animation itself:

```css
@keyframes marquee{
	0% {
		transform: translateX(0)
	}
	100% {
		transform: translateX(-50%)
	}
}
```

It will make the div containing the text go to the left, you can put 50% if you want to animate it to the right.

After 50% of the width it will reset to the beginning of the animation without a flinch, thus starting the animation again and again.

This, indeed, can only work if we are using the same text in the p tag and the after.

There you go, you've now created a nice smooth marquee!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
About CSS Position Property & Media Query
Published: 2021-12-19 08:36:49

About CSS Position Property

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

About Media query,
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example:
If the browser window is 600px or smaller, the background color will be light blue:
 
 
@media only screen and (max-width: 600px) {
  body {
	background-color: lightblue;
  }
}
Add a Breakpoint
Earlier we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
Use a media query to add a breakpoint at 768px:
When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
 
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
	width: 100%;
  }
}
Always Design for Mobile First
Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
This means that we must make some changes in our CSS.
Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px.
Linux - Find in Multiple Folders and Delete Files Within
Tags: linux, bash, worknote
Published: 2021-12-19 08:05:07

This is a worknote.

## Scenario ##

In a Javascript monorepo, there was a need to:
* delete all dist folders files, not the folders themselfs
* but without touching the .gitignore in the folders

## TLDR ##

```bash
dir=$(find ./packages -name "dist" -type d);
```

```bash
for i in $dir; do find $i -type f \( -iname "*" ! -iname ".gitignore" \) -exec rm {} +; done
```

## Solution ##

1. Find all `dist` folders in the monorepo
2. Iterate over the folders set and collect all files within them, excluding .gitignore
3. Delete all sets of found files.

## Solution Walkthrough ##

### Find all folders with specific name

```bash
find ./packages -name "dist" -type d
```

`find` - [find](https://man7.org/linux/man-pages/man1/find.1.html) - find files. Allow filtering.

`./packages` - target root folder to start the search from.

`-name "dist"` - filter only object with the name "dist".

`-type d` - filter only object with type of directory.

### Execute Bash Expression

[Exectute](https://tldp.org/LDP/abs/html/commandsub.html) an expression in bash and put the results in a local variable.

```bash
dir=$()
```

### Find all relevant files in a folder

```bash
find $i -type f \( -iname "*" ! -iname ".gitignore" \)
```

`$i` - Variabe containing the folder name from the `for` iteration.

`-type f` - filter object only of type of `file`.

`-iname` - From the docs: Like `-name`, but the match is case insensitive.

`!` - From the docs: `!` expr True if expr is false.  This character will also usually need protection from interpretation by the shell.

`\(` - From the docs: ( expr ) Force precedence.  Since parentheses are special to the shell, you will normally need to quote them.  Many of the examples in this manual page use backslashes for this purpose: `\(...\)` instead of `(...)`

```bash
for i in $dir; do find $i -type f \( -iname "*" ! -iname ".gitignore" \); done
```

### Run through folders set and execute find on them

```bash
for i in $dir; do find $i; done
```

`for` - [for loop](https://www.gnu.org/software/bash/manual/html_node/Looping-Constructs.html)

`$i` - iteration variable

### Execute delete on found set

```
find $i -exec rm {} +
```

`-exec command {} +` - From the docs: his variant of the -exec action runs the specified command on the selected files, but the command line is built by appending each selected file name at the end.

The string `{}` is replaced by the current file name being processed everywhere it occurs in the arguments to the command, not just in arguments where it is alone, as in some versions of find.
Move first index value to the last index while maintaining original order on an array.
Tags: javascript, algorithms, tutorial
Published: 2021-12-19 06:23:09

Assume we have an array `[5, 3, 7, 8]` such that the first index value is moved to the back while preserving the original order resulting in `[3, 7, 8, 5]`

Let's consider what we need to accomplish this. First, an array: `let values = [5, 3, 7, 8];` we will be announcing `values` as `list` because `list` is the named parameter for the function further along. 


With a for loop we will be traversing over an array to perform changes. 

A for loop can be broken into three parts. 

```
for (initialization; test; update) {
      statements....
}
``` 
However, let's dissect our for loop. For our `initialization` let's start at zero since arrays start with an index at zero. `let i = 0;` 
```
 0  1  2  3
[5, 3, 7, 8] // length is 4
```
Our `test` will evaluate when `i` is less than the list’s length minus one. That is because our array `[5, 3, 7, 8]` has a length of four, yet we only want to shift three values, but not including the number five. Yielding in `i < list.length - 1;` and `update` is represented by `i++`

```
for (let i = 0; i < list.length - 1; i++) {

}
```
Now let's think about our three values that are going to get shifted. 
```
 0  1  2  3
[5, 3, 7, 8] // Original Array; Length 4
 
 0  1  2  3
[3, 7, 8, 5] // Shifted Array; Length 4

```
`Shift   =  Original`
`list[0] = list[1];`
`list[1] = list[2];`
`list[3] = list[4];`

Generally described as:
`list[i] = list[i + 1];` 

The `list` first index value will be placed in a variable `let idx = list[0];` So `idx` will be declared before the for loop since we are only shifting the remaining three values. 

After the for loop is done iterating we will type `list[list.length - 1] = idx;` to store `idx` into `list’s` last index. After, we can wrap all the code in a function called `shiftLeft` which will take an array as a parameter. 

Our final code is: 
```
"use strict";

let values = [5, 3, 7, 8];
console.log(values) // [5, 3, 7, 8];

function shiftLeft(list) {
    let idx = list[0];
    for (let i = 0; i < list.length - 1; i++) {
        list[i] = list[i + 1]
    }
    list[list.length - 1] = idx;
    console.log(list) 
}

shiftLeft(values); // [3, 7, 8, 5];
```
React Admin Dashboard with Recharts
Tags: html, css, javascript, react
Published: 2021-12-19 07:10:36

## You can get the template from the link proivided in the description of the video.

### Technologies Used :-
+ REACT
+ SASS
+ Styled Components

### Libraries and Assets Used :- 
+ Styled Components
+ React Icons
+ Recharts
+ Google Fonts
+ ScrollReveal

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube NnyoDmvvGwI %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.
Python vs GO
Published: 2021-12-19 06:33:36

[Go cheatsheet- https://devhints.io/go](_url_)
1.
**For loop in Go**

```
package main
import "fmt"
func main() {
   even_numbers := []int{}
   for i := 1; i <= 10; i++ {
      if i%2 == 0 {
         even_numbers = append(even_numbers, i)
      }
    }
   fmt.Println(even_numbers)
}
```


**For loop in Python**

```
even_numbers = []
for number in range(10):
   if number % 2 == 0:
      even_numbers.append(number)
print(even_numbers)
```

---
Datatype Conversion in Js!!!
Tags: javascript, webdev, programming, beginners
Published: 2021-12-19 05:35:02

Hi folks, Today we gonna talk about datatype conversion.
Datatype conversion is basically converting one datatype in another. For example: String -> number or vice-versa.

```
//type conversion and coercion

let myVar = 34;
console.log(myVar, (typeof myVar));
myVar = String(34); //datatype conversion
console.log(myVar, (typeof myVar));

let booleanVar = true;
console.log(booleanVar, (typeof booleanVar));
booleanVar = Number(true); //this will give 1 as return value because true = 1, false = 0 by default
console.log(booleanVar, (typeof booleanVar));

let arr = [1,2,3,4,5];
console.log(arr, arr.length, (typeof arr) );
arr = String([1,2,3,4,5]);
console.log(arr, arr.length, (typeof arr));


//also can use toString() funtion to convert any datatype to string
let i = 20;
console.log(i, (typeof i));
console.log(i.toString(), (typeof i));//idk why in console it still giving datatype number
//But as you can see in console line 22 already converted to string
//Note* purple color in console shows number value while white color is for string

//Converting to number
let str = "3454";
console.log(str, (typeof str));
str = Number(str);//also pass the variable instade of value
console.log(str, (typeof str));

let str1 = "3456f"
console.log(str1, (typeof str1));
str1 = Number(str1);
console.log(str1, (typeof str1));//This line will give "NaN" as aoutput means not a number


//parseInt
let number = 34.141;
console.log(number, (typeof number));
number = parseInt(number); //parsing number in integer
console.log(number, (typeof number));



//parseFloat
let number1 = 34.434;
console.log(number1, (typeof number1));
number = parseFloat(number1); //parsing number in float
console.log(number1, (typeof number1));

//toFixed function

let numberVar = 30.087;
console.log(numberVar.toFixed(), (typeof numberVar));//by default 0 decimal number will show
console.log(numberVar.toFixed(6), (typeof numberVar)); //six decimal number will show


//Coercion

let mystr = "3454";
let mynum = 45;

console.log(mystr + mynum);

```
Type conversion is very important part of programming that every  developer should know about this. 

For example you created a form which is accepting only integer values from frontend but you want everything in string from backend. In such scenarios type conversion would be very useful.
Please Report unappropriate Posts!!!!
Published: 2021-12-19 05:28:14

Hi folks, recently I've seen lots of unappropriate post on Dev. Mostly related to personal business advertisements and services which are non-tech. For example cleaning services, real state buying and selling and what not. These kind of post polluting this platform and we should highly discourage these type of post.Not only these type of posts highly unacceptable but also these are infiltrating the code of conduct of this platform.I plead to all of you to report these kind of post as much as possible.
Connect Server with Express Engine- EJS Work as a Frontend
Tags: node, express, ejs, javascript
Published: 2021-12-19 05:05:01

many of user does not understand how we create our data to frontend in react so this article help for you.

> first we install

> npm install ejs

then set some cofigurations in your project

- first make folder views
 `app.set('view engine','ejs');`

## index.ejs

```

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Express Engine</title>
</head>
<body>
    <%= heading  %> 
</body>
</html>`
```
in our index.js we simple render the page index.ejs

```
`app.get('/',(req,res)=>{

   res.render('index.ejs',{heading:"first Page"});
})`
```

EJS work as a component based like in react 

simply use include file

`include('header.ejs')`

some developers are think ejs is tough for us but don`t worry about this is a simple like you work on html but some operation map array of content then use it like you use php as server .
`<% array.forEach(item=>{}) %>`

we can do everything using ejs.
Day 32 of #100daysofcode: Structure and Flask
Tags: 100daysofcode, react, python, beginners
Published: 2021-12-19 04:59:22

Hey again everybody!

## Yesterday
* Some random LeetCode Mediums
* Advent Code Days 7+8
* Reviewed tools which I am going to start off using
  * React + Redux, Flask, going to try and use Material UI fundamentals when designing the front-end

## Today
* LeetCode LeetCode LeetCode
* Advent Code Day 9
* Reviewed the past couple projects which I used React+Flask
  * I want to avoid repeating past mistakes; considering how to fix issues which I ran into. I need to treat Flask MORE like an API. I had a weird thing going on in a previous project where some endpoints were via Flask and some were via React routing. It wasn't the greatest.

## Upcoming
* Continued Leetcode practice, FreeCodeCamp progress and Advent of Code
* Begin the Study Aid app!
* Might return to a little Functional Programming discussion
* Later in the challenge: **Possible Android app version of Study Aid app**, AWS Deployment, AWS Certification, and Using Docker!?

### Resources
[JS Course - FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
[Redux Essentials](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
[Redux Fundamentals](https://redux.js.org/tutorials/fundamentals/part-1-overview)
[Redux FAQ](https://redux.js.org/faq)
[Advent of Code](https://adventofcode.com/)
GitHub: Adding Link to Repository homepage
Tags: git, productivity, github, beginbers
Published: 2021-12-19 04:56:24

I've seen a number of projects on GitHub, having the name, project description and link to documentation to complement the beauty of the project... and For sometime, I've wondered how developers tweak the project repository to look like this ![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meem7twtqxmckz9myd01.png).

The good news is... I found it. It really isn't hard as it seem. So, shall we get to it.

_The following procedure assume you have at least a few weeks of experience with git and GitHub, if not consider reading through a [series](https://dev.to/opeolluwa/beginning-git-and-github-4nln) I'm putting together. (Hopefully, I'll be done with it when you see this 😌)._

## To the real deal. 
1. Navigate to your project directory on GitHub. Typically it looks like [https://github.com/your_username/project_name](https://github.com/<your_username>/<project_name>) In my case [https://github.com/opeolluwa/restify](https://github.com/opeolluwa/restify).

2. Click on the **cog** (settings icon) to the right of **About** ![step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efe88qzw9d5almcc0zfo.png)

3. This will give pop up the modal ![step3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ampsg2vb8swui5oxr234.png)

4. This gives a chance to edit your project description. 😉 But we want to fix the link right ❔. So go ahead, add link to your project documentation website in the input feed marked **website** 
![adding link to GitHub step4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i90w25ibu8pe456o6vsl.png)

5. Click on save changes. And there you go💪. It's just as easy as that. 
![step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sb0fnsgv3ynlvw62n7k.png)
Guess Number Game with Android
Tags: android, java, beginners
Published: 2021-12-19 03:51:05

In this post I show you a simple game for practicing android development. It uses **MVP** design pattern. 
**You can find the code of this app** [here](https://github.com/R0land013/guess-number-android-app).


The game is called 'Guess Number'. The target is to guess a number between 1 and 100, using 10 intents or less.

![Main view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2grt4x7z3hhi808k6yh.jpg)

This is a simple challenge for android beginners. It uses some basic components of android apps, as **Activities**, **Intents** and **Fragments**. Also the app uses some simple styles and other sources.


![Result view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy2anoluq5g5xfj1ttxh.jpg)


![About view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y5coyh9x9cps7a9224f.jpg)
Easy to use software Documentation Builder
Tags: dev
Published: 2021-12-19 03:19:34

I`ve created this product because I always struggle with generating documentation in HTML or Word format.
It is just a bit boring to make a menu and all the connected sections. Also, there are always so many revisions you end with 10 different files.

So I create an online tool to build the navigation and storing the text after I quickly add my
navigation and text I can share the URL to the product or export it to PDF.

Also, I can manage all the revisions in one place

It just saves time and boring stuff to do every time you lunch a new product.

Check it out: https://create-documentation-online.com/
Current PC setup
Published: 2021-12-19 03:06:12

Here's my current PC setup! Behind the TV next to the window I have the recording area setup. Special thanks to my older bro for lending his fill lights!

Needed the fill lights, cause the Logitech C922x was having very poor image quality in low light. Looks better now that it has sufficient lighting.

![PC setup with 65 inch TV at the foot of a king size bed with adjustable frame.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eevhziq05qmmtuu6n1ij.jpg)


![PC setup with 65 inch TV at the foot of a king size bed with adjustable frame. Backside in the recording area.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5q8v6u65bogryt07e9v.jpg)
Some Aphoristic Laws
Tags: data, laws, aphorisms
Published: 2021-12-19 02:20:54

---
title: Some Aphoristic Laws
published: true
description: some observations that for fun I have dressed up as "laws"
tags: #data #laws #aphorisms
//cover_image: https://direct_url_to_image.jpg
---

These are some observations that for fun I have dressed up as "laws". They are a set of aphorisms that I have made up during my years of coding and data work. 

- _I vouch that the text herein was written by me and not consciously derived from any other sources. I declare them as © 2021 and licensed under a [CC0 license](https://creativecommons.org/publicdomain/zero/1.0/) (which means I'm happy for them to be re-used without attribution)._

## The Law of Data

In data, everything happens.

_When receiving data from sources outside your control, everything that is possible to occur in the data will probably occur at some time. As the amount of data received increases, the likelihood of any given strange thing showing up will tend towards certainty._

_The point of this law is to remind those implementing systems and/or analyses of the data that it is important to prepare methods for handling such things, or at the least, implement some detection for when they do occur._

## The Pattern Law

If you stare at random data for long enough, you will see patterns.

## The Should Law

Using the word "should" in making an argument or observation is only an expression of hope and not something that actually supports a position.

## The Diligence Law 

Any system that relies on human diligence to remain functional will inevitably fail.

## The Law of Inverse Appreciation

A solution into which you put a great deal of effort, skill and experience will receive only minor thanks; but a simple tip that you provide which solves a major headache for someone will garner impassioned gratitude and be praised as incredible work.

## The Walnut Law

When all you have to eat is a walnut and all you have to open it is a sledgehammer, then you use a sledgehammer to crack a walnut.

## The Grammar Law

If phrasing is unambiguous then it is good enough to use.

## The Law of Life

Every minute spent thinking about money is a minute not lived.

## Three Laws of Information Technology Management

- Competent IT Management is invisible;
- Often, IT Management decisions are indistinguishable from random decisions;
- Inept IT management is indistinguishable from sabotage.

_The background formulation for this law is the following thought experiment. Consider contriving all IT management decisions into binary choices. These might be to do A versus B; they might be to do C or not to do C. Then try to work out how things would have turned out if all those decisions had been settled by the toss of a coin. I would rank "good" IT management to be those that have had outcomes clearly better than would have come from random decisions. So this "Law" is the answer to the question of how to describe IT management where the outcomes seem to be worse than would have come from random choices._