teleren/devto huggingface dataset:
Describe CSS Background Properties
Tags: css, codenewbie, beginners, webdev
Published: 2022-04-23 10:18:33

## CSS Background Properties

We regularly see that the back of a website is the different color. Some websites also have images on the back. Somewhere again there is more than one image. Some of these are set with CSS Background Properties. CSS Background is used to set a color or an image behind an entire web page or a specific HTML element or a small part of an element. We can use the following style rules to give CSS Background Properties which are mostly used.

-     background-color: Used to give a specific color.

-     background-image: Used to give one or more images.

-     background-repeat: The rule is written whether to repeat the image file or not.

-     background-attachment: The rule is written whether the image used in the background will scroll or stay in a certain place.

-     background-position: The rule is where the position of the image will be written.

I will try to give examples of all these on one page. Let’s start with background-color. background-color is the color of the back of an element. And it is written like this:

### background-color:


```
h1{
background-color:red;
}
``` 

Color code can also be used instead of color name. If you go here, [you will find the names and codes of HTML color.](https://www.w3schools.com/html/html_colors.asp)


```
h1{
background-color:#808080;
}
``` 

### background-image:

background-image: background-image Sets an image behind the HTML element. Here we will set an image in the background of our entire site with background-image. For that we will write:


```
body {
background-image: url(background.png);
}
``` 

You have to set where the image is in brackets with url. So we did above. If the image and the html file are in the same folder, then just enter the name of the image. E.g. background-image: url (highway.jpg);

### Now let’s come to background-repeat:

If our image is much smaller than our web page, then it can be seen that the image is shown again and again. We can turn it off if we want.


```
body {
background-image: url(background.png);
background-repeat:no-repeat;
}
``` 

★ No-repeat will show the image only once.

We can repeat a direction such as x axis or y axis if we want. For example background-repeat: repeat-x will repeat the x axis. background-repeat: If you repeat-y, the y axis will repeat.

For more about CSS Background properties [continue reading...](https://mrezaulkarim.com/learn-about-css-background-properties/)

### Recommended:

- 
[Learn About CSS Background Properties](https://mrezaulkarim.com/learn-about-css-background-properties/)

- 
[Learn about Text Styling in CSS](https://mrezaulkarim.com/text-styling-in-css/)

- 
[CSS Shorthand Properties- Useful CSS Shorthand](https://mrezaulkarim.com/css-shorthand-useful-css-shorthand-properties/)


For more exciting tips and tricks about programming and coding please read our [others articles](https://mrezaulkarim.com/blog/)

Find My page on Instagram:  [@stack.content](https://instagram.com/stack.content)

Find Me on Twitter:   [@mrezaulkarim_](https://twitter.com/mrezaulkarim_)
I build my own browser
Tags: webvium, programming, browser, productivity
Published: 2022-04-23 10:17:56

# Let me introduce Webvium
A ultra lighweight 500KB and privacy friendly android web browser. It's build from the scratch without any 3rd party libraries in aims to provide a lightweight download size, faster, efficient, and privacy friendly without invading user privacy and filling up user devices storage.

![The Project Webvium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8wiabgiqtkg3dc3y4ya.png)

I maintained this project and constantly updating for new enchantments, features and compatibility.

Download it now on: https://webvium.github.io

The Dev release happened daily and can be download here: https://webvium.github.io/dev
Creamos un SaaS (1): Comenzamos...
Tags: saas, ddd, solid
Published: 2022-04-23 09:43:49

Bienvenido. Bienvenida. La idea de este proyecto no es más que recopilar lo aprendido en diversos proyectos, organizar mis ideas y ya de paso, compartirlas por si pueden ser útiles a otras personas. No es objetivo aquí sentar cátedra o convencer a nadie. Solo documentaré como suelo hacer las cosas para que conforme avance, sea yo mismo el que mayormente aprenda.

Hay muchas formas de aprender, pero tengo la teoría (creo, muy extendida) de que el mejor modo de aprender es practicando. Trabajamos en un sector en el que por suerte muchos jóvenes quieren iniciarse. Mi consejo para ellos siempre es el mismo. “Búscate alguna pequeña empresa local que tenga alguna pequeña necesidad y resuélvela usando código”. Los principios **SOLID**, **DDD**, ... vendrán después. Es tremendamente difícil, al menos para mi lo fue así, entender bien estos conceptos sin no haber experimentado los inconvenientes de no haberlos puesto en práctica.

Una vez que hayas resuelto un problema, itera y mejora tu solución. Pero siempre con un “**problem-solver mindset**”. No siempre se resuelven las cosas (al menos, de un modo eficiente) aplicando ingeniería. Conocer bien el problema que quieres subsanar (lo que venimos a llamar, lógica de negocio) puede hacer que puedas cambiar el enfoque de tu solución. Porque todo esto del desarrollo de software (al menos en las empresas) se trata de resolver problemas, no de crear soluciones “chulas”.

Por todo lo que he comentado anteriormente, el enfoque de este proyecto será el de resolver un problema e ir analizando como rodeamos dicho problema para iterar distintas soluciones. Pero... qué problema queremos resolver? En fin, ya sabemos todos que los desarrolladores somos fanáticos de hacer dos cosas: programas de tareas y CRMs. Para aprender es algo perfectamente lícito, pero en mi caso quería resolver un problema que me afectase directamente: vamos a crear una plataforma en la que albergar este mismo proyecto, un LMS (Learning Management System) a medida.

Comenzamos!
Traffic Light Simulator - Arduino
Tags: arduino, womenintech, geospatial, beginners
Published: 2022-04-23 08:57:09

#####  Simulating a traffic light using LEDs and Arduino, I did the project with my 8-year-old son! He found it so cool.

### COMPONENTS

- Arduino UNO
- Breadboard (Generic)
- Jumper Wires (Generic)
- LED (Red, Green, Yellow)
- Arduino USB 2.0 Data Cable 
- Resistor 100 ohm

COMPONETS SETUP
![Image set-up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ramw71zdcvoy33y07y5n.png)

**IDE used: Arduino IDE**

This simple "for beginners " uses an Arduino and LEDs to simulate a traffic light.

Define variables, use lights by colour name:
```C++
// variables
int red = 10;
int yellow = 9;
int green = 8;
```
Create a function to configure the output colours of the LEDs (Red, Yellow, Green):
```C++
void setup(){
    pinMode(red, OUTPUT);
    pinMode(yellow, OUTPUT);
    pinMode(green, OUTPUT);
}
```
This **pinMODE** function, configures the Arduino to use a defined pin as an output.

Write the code for the actual logic behind the traffic light simulation. The given values are in milliseconds 
```C++
void loop(){
    changeLights();
    delay(15000);
}
void changeLights(){
    // green off, yellow on for 3 seconds
    digitalWrite(green, LOW);
    digitalWrite(yellow, HIGH);
    delay(3000);

    // turn off yellow, then turn red on for 5 seconds
    digitalWrite(yellow, LOW);
    digitalWrite(red, HIGH);
    delay(5000);

    // red and yellow on for 2 seconds (red is already on though)
    digitalWrite(yellow, HIGH);
    delay(2000);

    // turn off red and yellow, then turn on green
    digitalWrite(yellow, LOW);
    digitalWrite(red, LOW);
    digitalWrite(green, HIGH);
    delay(3000);
}
```
Upload the above code to your Arduino and run (make sure the right board and port are selected from **Tools** menu)
Data Types in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-04-23 08:49:22

## What is a Data Type

In computer science and computer programming, a data type or simply type is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data. Most programming languages support basic data types of integer numbers, floating-point numbers, characters and Booleans.

🌟In simple terms data type clearly means what type of data it is. A number, A character, A String etc

**🌟There are 7 primitive data types in JavaScript**

1️⃣ Number
2️⃣ String
3️⃣ Boolean
4️⃣ undefined 
5️⃣ null
6️⃣ symbol
7️⃣ big int

**🌟Number Data Type**

🟡 Number's are always so-called floating point number which means that they always have decimals. Even if we don't see them or don't define them. 

🟡Example the value 23 is same as 23.0. But they are both simply the number data type.


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

**🌟String Data Type**

🟡String data type are simply a sequence of character and so they're just used for text and always put in quotes (no mater if double or single.)


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

**🌟Boolean Data Type**

🟡The Boolean data type is essentially a logical type that can only take one of the logical value true or false. We use bool value to take decisions.


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


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

**🌟Undefined Data Type**

🟡 So first undefined is the value taken by a variable that is not yet defined. And the variable that not yet defined is simply just a variable that we declare but without assigning a value. Undefined is basically an empty value


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

**🌟Null Data Type**

🟡Null is pretty similar because it also means empty value. We will discuss more about this in future.

**🌟Symbol Data Type**

🟡 Symbol data type was introduced in ES 2015. This data type is not very useful for us. It's simply defines a value that is unique and cannot be changed

**🌟Big int**

🟡Starting in ES 2020 there is also Big Int. Which is for integers that are too large to be represented by the number type. It's another type for numbers.
How close should a PM be to the development process?
Tags: product
Published: 2022-04-23 08:45:24

Long, long ago there were times when product managers were only thinking about ‘what’ and left the ‘how’ to project managers and tech leads. Well, in some companies a separate role of project manager still exists, but it won’t be too wrong to assume that project management and some part of technical management merged with product management.

What I mean here by ‘project management’ is mostly the responsibility of controlling milestones and deadlines. Ther are other tasks within this role, but now I won’t talk about them.
Old-fashioned product managers introduced a new product idea along with design to the development team and retreated to think about some more new ideas, while the team was struggling to deliver in time. The responsibility of controlling the milestones belonged to the project manager, or sometimes engineering manager, or sometimes technical team lead. But can all these people say that what’s been done by the deadline is exactly what needed to be done? I’d say not, as their main goal is to implement the specs, and they have no previous context, history of research, knowledge of the idea’s evolution.

So, a modern-day PM — are they allowed to shun from close-to-the-ground processes and artifacts in order to stay good PM?
Let’s look at it from this point of view: let’s say the team is coming close to the launch deadline, their product is ready as close to the specs as was possible, but it turns out exactly NOT the product intended from the very beginning. Whose fault is it?
PM’s, of course. Our job is not just to present the idea and leave all the rest to engineers. Part of our job is to keep close to the team and look at every smallest deliverable, be it somewhere at the developer’s stand or testing environment. Part of our job is to validate the result — at the earliest possible moment, and make sure the material result (app, web site, whatever) really is what we want to have.

As I put it: if I wasn’t understood right (by my own opinion), it’s my fault, not the fault of those who tried to decipher what I was trying to tell them. It is my responsibility to control every step — not to demand how the steps are to be made, but to make sure we’re moving in the right direction.

So yes. I say the PM has to be as close to the development process as possible in the environment. Not to sit on top of the engineers’ heads but to help, correct and elaborate what hasn’t been expressed right previously.

Oh, and yes, some product details have to changed right in the process of development, don’t they? Because of the framework limitations, newly discovered discrepancies in the design etc. So stay close. I do.
kamandalar in replit
Published: 2022-04-23 08:45:07

## 'pwd'
- joriy papka manzilini chop etadi

sh
pwd

## 'clear'
- terminaldagi hamma tekstni tozalab yuboradi

sh
clear

## ls
- shu papka ichidagi hamma narsani listga chiqarib beradi

## ls -a
- yashirin fayllarni ham chopetadi 
sh
ls -a

## mkdir
sh
make directory

- berilgan nomda papka yaratadi

## cd (current directory)
- istalgan papkaga o'tadi

## cat
- berilgan tekst fayl ichidagi kontentni terminalga chop etadi

## cd ~ tilda
 -homega qaytish uchun

## open .
 -shu papkani ochib beradi

## rmfaylni nomi
 -faylni o`chiradi

## rm -r
 -papkalani o`chiradi

##echo 12345>> temp/son.text
 -papkani ichida fayl  yaratish
Understanding Dart Null-Safety — Dart Programming — Part 7
Tags: flutter, dart, mobile, beginners
Published: 2022-04-23 08:38:04

Hello guys. From now on i'll move into Medium to write blog but still want to share for another channel. So i'll up-to-date my blog in here. You guys can check my lastest about [Null-Safety on Dart](https://hoangnguyen0403.medium.com/understanding-dart-null-safety-dart-programming-part-7-53695d82cc05) in Medium.
My first steps into coding ...
Tags: programming, beginners, python, codenewbie
Published: 2022-04-23 08:19:38

Hi there !

This is my first "real" program. 
I know it's not much but I'm proud of it haha. 

I know I have a long way to go, but that's just practice ;) 

Github-link: [link](https://github.com/Qultio/Python_Terminal_Game)
Terminal komandalar | Part 2
Tags: beginners, wecoded, firstyearincode
Published: 2022-04-23 06:52:29

## `cd ~` 
- `home` papkaga qaytadi 

`cd ~/papka nomi`
- har qanday papkadan shu papkaga o'tadi

`open .` yoki `start .`
- file explorerda shu papkani ochadi

## `mkdir`

`mkdir papka-nomi` yoki `mkdir 'papka-nomi'`
- yangi papka ochadi
- agar papka nomi probel bilan yozilsa alohida-alohida papka ochadi

## `echo salom >> salom.txt`
- joriy papkada text fayl ochadi

 `echo "bugun havo yaxshi" >> salom.txt`
- tekstga yangi so'z/gap qo'shiladi

## `rm` (remove)

`rm salom.txt`
- har qanday *faylni* o'chiradi (papkani emas)

`rm -r` (recursion)
- har qanday papka va uning ichidagi barcha narsani o'chiradi

`rm -rf` (force)
- o'chmayotgan faylni yoki pakani majburlab o'chirib yuborsa bo'ladi
! Bu komanda orqali o'chirilgan fayl va papkalar korzinkaga tushmaydi!

## `date`
- bu komanda hozirgi vaqtni chop etish uchun ishlatiladi

`date` 
- *Sat Apr 24 10:11:25 + 04 2022* ko'rinishida sanani chop etadi

`date '+%d-%m-%Y'`
- sanani **dd-mm-yyyy** formatda chop etadi *24-0
4-2022*

`date '+%d/%m/%Y'`
- *24/04/2022* ni chop etadi

`mkdir $(date)`
- bugungi sana bilan papka ochadi (faqat sana,oy,yil,... alohida alohida papka bo'lib ochiladi)

`mkdir $(date '+%d/%m/%Y')`
- bugungi sana bilan paka yaratadi *24/04/2022* ko'rinishida
Create a Github Action to run Solana Anchor tests
Tags: solana, anchor, github, rust
Published: 2022-04-23 08:19:05

Hey there!

In this article, we'll cover how to create a GitHub Action which will run our Anchor program tests!

### Anchor Github Action

First create a `action.yml` file in your project root `.github/workflows/action.yml` which contains the following:

```yml
name: Solana Action name
on:
  push:
    branches: [main]

env:
  SOLANA_VERSION: v1.9.9
  ANCHOR_VERSION: 0.24.2

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
      - uses: actions/setup-node@v3
        with:
          node-version: 16.14.2
          cache: "npm"
      - run: npm install
      - run: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
        shell: bash
      - run: echo "/home/runner/.cargo/bin" >> $GITHUB_PATH
        shell: bash
      - run: curl -sSfL https://release.solana.com/$SOLANA_VERSION/install | sh
        shell: bash
      - run: echo "/home/runner/.local/share/solana/install/active_release/bin" >> $GITHUB_PATH
        shell: bash
      - run: npm i -g @project-serum/anchor-cli@$ANCHOR_VERSION ts-mocha typescript
      - run: anchor test

```

First we use `actions/setup-node@v3` for a Node.JS environment considering we will be running out tests with mocha.

After that we install Rust by running `curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y`.

Next the Solana CLI with `curl -sSfL https://release.solana.com/$SOLANA_VERSION/install | sh`.

And final dependency is Anchor CLI and ts-mocha.

To run the tests, we execute the `anchor test`.

### Anchor.toml

It's important that we properly setup our Anchor.toml file to spawn a local Solana validator that will run tests. Let's take a look at a sample Anchor.toml file. Make sure that the address in your `declare_id!` macro and in Anchor.toml match.

```toml
[programs.localnet]
sample_program = "3ZALfG4NyQgxy2SWjSiQoUyBPEvXT2xo7rKc5hPYYJ7z"

[registry]
url = "https://anchor.projectserum.com"

[provider]
cluster = "localnet"
wallet = "/home/solana/my_wallet.json"

[scripts]
test = "npx run ts-mocha -p ./tsconfig.json -t 1000000 tests/**/*.ts"

```

### Conclusion
In this article we've seen how to write a Github Action, that will run our Anchor test against a local/test Solana validator, as well as how the Anchor.toml file should be.


That's it! Hope you enjoyed it, happy coding!
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-04-23 08:00:22

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d7cf335.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
I went to a street where the houses were numbered 8k, 16k, 32k, 64k, 128k, 256k and 512k.

It was a trip down Memory Lane.
 -->
Terminal komandalar part-2
Published: 2022-04-23 07:45:23

#cd~
- homega qaytadi

#cd~/cpp
- homeni ichidagi cpp papkaga 1 da o'tish uchun

#rm
- faylni o'chiradi hatto korzinkada ham qolmaydi

#rm -r ladies
- ich ichi bilan o'chiradi

#date
- sanani ko'rsatadi

#mkdir $(date)
- sana yaratish

#data +`%d-%m-%y`
##date month year

code .
##shu papkani butunligicha code degan dastur ichida ochib beradi
Timeout and memory in lambda function
Published: 2022-04-23 07:36:50

In [this](https://dev.to/amitiwary999/how-to-handle-duplicate-lambda-function-invocations-728) blog post I added how we can handle the duplicate invocation in lambda. I use nodejs to write lambda handle function and upload the zip file to AWS lambda. AWS Lambda require some trigger to run the code. You can use cloud watch events as trigger, Amazon SQS queue or API gateway. After trigger, lambda function starts runing the code and execute it. Sometimes it happen that execution of lambda function stop, even if there is no error. It happen when the assigned memory or timeout is not enough to execute the lambda function completly. For example, in lambda function you added code to fetch some data and then do some operation on it. When data fetch completed, data remains in mempry so that we can do operation on it. If the the assigned memory is not enough, lambda function will stop. Similialry executing the code takes time and if timeout is very low then it might possible that lambda function stop after timeout wothout executing the full code. To solve this problem, you can increase the timeout or memory from the general configuration. There is option to test the lambda function. So from test tab, you can click on test button to check if the function has any issue or not. You can use the same to check if the assigned memory and timeout is good enough to execute the code completely. You charged based on amount of time lambda function takes to execute code and memory. So make sure you are not over assigned or under assigned the memory.
A Short Introduction to Display: Contents
Tags: css, html
Published: 2022-04-23 07:36:10


Sometimes, we need an element to be in our HTML for semantic reasons, but our life would be *much easier* if it just wasn’t there.

In some cases, we do not even have control over the HTML.

*That is when display: contents come to the rescue.*

In this short post, we’ll examine how this property behave and what are its limitations.

An “Undesired” HTML element can be tricky to work with when using `flex` or `grid` items.

Using `display: contents` on an element will make the container disappear, and its children will act as the children of the element’s parent. 

Let’s take a timeline view displaying each year using `display: flex`, if we need to highlight the years after 2000, we might want to group them into a `div` with a class, but that container would break the flex! 

We can use `display: contents` on this element to avoid that side effect:

``` html
<div class="years">
	<div class="year">1996</div>
	<div class="year">1997</div>
	<div class="year">1998</div>
	<div class="year">1999</div>
	<div class="recent">
		<div class="year">2000</div>
		<div class="year">2001</div>
		<div class="year">2002</div>
		<div class="year">2003</div>
	</div>
</div>
<style>
.years{
	display: flex;
}
.recent{
	display: contents;
	font-weight: bold;
}
</style>
```

{% codepen https://codepen.io/tomquinonero/pen/RwxYzrq %}

Having the `.recent` container set to `display: contents` will essentially make all `.year` behave like children of `.years`.

With `display: contents` the box disappear, so *you cannot stylize it*, meaning no background, padding. You can however use color, font size and all the inline style properties. 

Also, [modern browsers supports it](https://caniuse.com/css-display-contents)!

***I'm Tom Quinonero, I write about design systems and CSS, [Follow me on twitter](https://twitter.com/tomquinonero) for more tips and resources 🤙***
Create your own VPC and launch a sample website.
Tags: aws, beginners, webdev, tutorial
Published: 2022-04-23 07:34:47

Uploaded new article on AWS:

[Create your own VPC and launch a sample website.](https://aravindkumarvemula.medium.com/create-your-own-vpc-and-launch-a-sample-website-c7d6c0d265bc)

If there is any mistake in my article pls.. comment down. So, that i can improve myself.