teleren/devto huggingface dataset:
Introduction to CSS(Cascading Style Sheets) Understanding How CSS works with Your HTML
Published: 2022-02-03 15:54:24

We have to Discuss the CSS and the fundamentals of Cascading Style Sheets, As a junior web designer or web developer. you need to understand the styling of a web page or website.

Now, let's ask about the meaning of CSS?? CSS stands for Cascading Style Sheets CSS is the language we use to style a Web page. CSS describes how HTML elements are to be displayed on the screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once

Why do we use CSS CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

Understanding How Html works with CSS Having discussed the code of Html there are ways for you to link your Html and CSS together that will show the styling of your codes

Inline CSS *Internal CSS
External CSS
*Inline CSS:- The Inline CSS Is used within the Html code, An example will be written below

```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
```

Internal CSS:- Internal CSS may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section. let's write some code and see but before that let us see 

```
<!DOCTYPE html>
<html>
<body>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
< /style>
< /body>
< /html>

```

External CSS:- THe External CSS is with the <link> element inside the <head> section of the Html

```
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

```
 
Then, the CSS will be in the next file that is been open in your IDE i.e VS code (Visual Studio Code)
 body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Thanks for reading and I will love you to share with friends and developers that need help with this!!!
How to generate 3d facial animation from text using ML?
Tags: machinelearning, programming
Published: 2022-02-03 15:51:36

Hello, Everybody! I am new to machine learning and have the task to generate vertices for 3d facial animation of the "talking head" from text. 3d animation are created from sequence of OBJ meshes with 20 fps frequency.

Now we have dataset (10,000+ rows) containing text and 3d coordinates of vertices for facial animation. Which model of AI is most suitable for such task? Does anybody knows existing model solving similar tasks?
The Anatomy of HTML(Hypertext Markup Language) The fundamentals of web development
Tags: webdeve, html, frontend, programming
Published: 2022-02-03 15:41:48

Hello programmer and coder out there!!

This is the second article in our series on the absolute fundamentals of knowing HTML. Our first article explained in detail what HTML Element is on a conceptual level. We looked at what a markup language is, what tags are and element can be make use of.

the newbie in tech and coming in to start with web development or too be a Frontend developer, there is always a need to start with the basics of programming that is base on Html..... and today we are going to be talking about the Anatomy of HTML... knowing the element(which we discuss with in the last article)

Anatomy is the identification and description of the structures of the elements, tags and other sources in Hyper text markup language. which deals with the skeleton of the website or web page, it will determine the web structure in terms of text,

which consist of the :- Html </> Head Body H1

Paragraph
Br
for example, let us create our first web page with Hello World!!

```
<!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>Web Page/title>
</head>

<body>
<h1>Hello World!!</h1>
</body>
</html>

The Anatomy of Hypertext Markup Language

And that just the basics you need to know for the skeleton and foundation in dealing with HTML, but if there are others you can element that can be added it can be in the written in the comment below...
Fitness website with HTML CSS
Tags: todayilearned, html, beginners, tutorial
Published: 2022-02-03 15:34:52

This is my 3rd website of the "10 responsive websites with HTML CSS" challenge. This challenge is inspired by the [florin pops](https://www.florin-pop.com/) ["10 websites with HTML CSS"](https://www.youtube.com/watch?v=Rz-rey4Q1bw&t=207s) challenge which is currently published on YouTube.

{% youtube 1cm_FlIOLyI %}

Fitness – is an html template for gym, fitness or health club. It is cross browser compatible, uses free fonts so your website typography will look exactly as you intend it.

{% link https://dev.to/atulcodex/furniture-store-responsive-landing-page-with-html-css-2glb %}

#### Features
- HTML5 & CSS3
- No framework
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Boxed or Wide layout
- SEO friendly
- Super fast loading speed


{% github https://github.com/atulcodex/fitness %}


[![Headphone - Responsive landing page](https://i.ibb.co/vwN8cgW/live-demo.png)](https://atulcodex-fitness.netlify.app/)

.
.
.
##### Support me and my work to see more such projects
[![Atul - Buy Me A Coffee](https://i.ibb.co/7rR9S4L/buy-me-a-coffee.png)](https://www.buymeacoffee.com/atulcodex)
4 HTML & CSS projects for beginners
Tags: html, codenewbie, css, webdev
Published: 2022-02-03 15:33:24

It’s time to get serious about improving your web development skills. Let’s do it!

That’s an easy career improvement goal to give oneself, but “become a kick-ass programmer” is not a simple goal. For one thing, saying, “I want to get better” assumes that you recognize what “better” looks like. Plus, too many people aim for improvement without any sense of how to get there.

The only way to improve your skills as a web developer is to practice, practice and practice.

GETTING STARTED WITH 4 PROJECTS FOR BEGINNERS USING HTML & CSS

1. Build an Instagram Clone using HTML AND CSS 
{% youtube YezbW1KNFFw %}

2. Create Facebook Sign Up | Login
{% youtube LPHobzrF8xw %}

3. Recreating Facebook Homepage
{% youtube fWwk-K6X_aQ %}

4. Build Gmail Clone using HTML AND CSS 
{% youtube ve9I2tcl_d0 %}
I have mede a tool easily convert your SVG file deal with dark mode.
Tags: javascript, svg, favicon, webdev
Published: 2022-02-03 15:23:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01o5nbfsoc0thbrik57f.gif)
Hi guys,

Today I would like to introduce a super cool tool for Web Designer and Webfront Engineer. In 2022, Internet Explorer will finally become unusable. This is A SUPER HAPPY NEWS for all web-front engineers, but I think it also signals the beginning of the next battle for designers and engineers. One of those battles is DARK MODE SUPPORT.  

## What’s Hybrid SVG?

SVG files can support both light mode and dark mode by inserting the following CSS this(Click [Here](https://codyhouse.co/nuggets/svg-favicon-dark-mode) For More Info!).

```
@media (prefs-color-scheme: dark)
```


Check out the Favicon on [this page](https://pexr.net/fonts/maker.html?font=KHONGO&text=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BC) for an example and try changing Dark mode or Light mode(Sorry this page is only japanese).
That's very cool!!!!

So, I call SVG files that can support multiple modes “**Hybrid SVG**”.  


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

## Headache problem
The ability to do this transformation in Drawtools (e.g. Illustrator) is not provided (at least from what I can tell).  
So, who will be responsible for these tasks? Front-end engineers? Designers?  


If it’s just one or two colors, a designer might be able to open a text editor and handle it...  
However, What if the file can not be edited by other designer? What if the designers don’t have the skills, experience, or time to change a lot of colors accurately? What if the designer says “Hey, I’m not a programmer!“?  
Also, it's strange for an engineer to use the "sed command" for a designer's little curiosity.  

## Let's resolve

There’s no use complaining about it.  
My motto are "Better than nothing" and "Do it myself rather than say complain."

OK, Just did that!

I made [Hybrid SVG Maker](https://pexr.net/hsm/).

That is where the “Hybrid SVG Maker” comes in handy.  
You don't want to upload a design that's not out in the world yet to another server right?　That site makes it easy to create SVG files that support color substitution and dark mode without having to upload the SVG to a server.  

## Sum up
It is still in beta, but please try it out.
Rainplayer - Custom HTML5 Video Player with Title by SopPlayer ▶️
Tags: javascript, sopplayer, sopproducts, html
Published: 2022-02-03 15:19:28

## Rainplayer - Custom HTML5 Video Player with Title by SopPlayer ▶️

---


### Rainplayer Integration


{% youtube nmpFl2RSR0I %}

---


- Rainplayer  :- https://sh20raj.github.io/Sopplayer/rainplayer/

- SopPlayer :- https://sh20raj.github.io/Sopplayer/rainplayer/

- SopProducts :- https://sh20raj.github.io/SopProducts/

- SopPlayer GitHub :- https://github.com/SH20RAJ/Sopplayer/

- Demo :- https://sh20raj.github.io/Sopplayer/rainplayer/?play=eyJ2aWR1cmwiOiJodHRwczovL3NoMjByYWouZ2l0aHViLmlvL1NvcHBsYXllci9zYW1wbGUubXA0IiwidmlkdGl0bGUiOiJSYWluUGxheWVyIiwidmlkZGVzYyI6IkN1c3RvbSBWaWRlbyBQbGF5ZXIgLSBTb3BQbGF5ZXIiLCJ2aWRwb3N0ZXIiOiJodHRwczovL3BlYWNoLmJsZW5kZXIub3JnL3dwLWNvbnRlbnQvdXBsb2Fkcy9pdHMtYS10cmFwLnBuZyJ9


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edczhu1984s7364zorfg.PNG)
Paracetamol.js💊| #42: Explica este código JavaScript
Tags: javascript, beginners, webdev, spanish
Published: 2022-02-03 14:53:45

## **Explica este código JavaScript**

```js
const list = [1 + 2, 1 * 2, 1 / 2]
console.log(list)
```


-     A: `["1 + 2", "1 * 2", "1 / 2"]`
-     B: `["12", 2, 0.5]`
-     C: `[3, 2, 0.5]`
-     D: `[1, 1, 1]`

Respuesta en el primer comentario.

---
Create Kubernetes Setup on Ubuntu 20.04.3 VMs
Published: 2022-02-03 14:38:32

* Make sure you have enough resources in your local laptop/desktop to deploy VMs.
   One VM requires at least 2 GB RAM, 2 vCPU, 50 GB HDD 
* Create 2 VMs and install Ubuntu 20.04.3 on it.
    Note: Don't create swap partition during installation. 
* Make sure the VMs are having internet access by using NAT network adapter. NAT will share host's IP address. 
* Login as root

```
sudo su -
```
* Assign static IP to both Primary and Secondary nodes. (Master = Primary and Worker = Secondary)
```
cat /etc/netplan/01-network-manager-all.yaml

# Let NetworkManager manage all devices on this system
network:
  version: 2
  renderer: networkd
  ethernets:
    eth0:
      dhcp4: no
      addresses:
       - 172.23.32.10/20 # IP address which you want to assign
      gateway4: 172.23.32.1
      nameservers:
        addresses: [127.0.0.53,8.8.8.8]
```

* Apply the above configuration 

```
netplan apply

```

* Update packages 

```
apt-get update && sudo apt-get upgrade -y
```


* Install Curl and apt-transport-https packages

```
apt-get update && sudo apt-get install -y curl apt-transport-https 

```

* Add key to verify release

```
curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -

```

* Add Kubernetes repository  

```
cat <<EOF | sudo tee /etc/apt/sources.list.d/kubernetes.list
deb https://apt.kubernetes.io/ kubernetes-xenial main
EOF
```

* Update packages for Kubernetes repository 

```
apt-get update
```

* Install kubelet, kubeadm and kubectl as per your required version

```
apt-get install -y kubelet=1.xx.y-00 kubeadm=1.xx.y-00 kubectl=1.xx.y-00

```

* Install Docker

```
apt-get install docker.io
```

* apt-mark hold will will not update or remove below packages

```
apt-mark hold kubelet kubeadm kubectl
```

* Note down the VM Primary address. (Below command is only for Primary node) 

```
export PRIMARY_IP=<VM management IP address> 
kubeadm init --apiserver-advertise-address=${PRIMARY_IP} --pod-network-cidr=10.100.0.0/16
```

* Create bootstrap token on the Primary server. This command is use to join seconadary node to Primary node in a cluster. (Below command is only for Secondary nodes)
  

```
kubeadm token create --print-join-command

Example: kubeadm join <Primary management IP>:6443 --token dad5o8.w3rj4bvgvdq6c7xh \
        --discovery-token-ca-cert-hash sha256:63945cc1edb6d637b536a7acb74b0b8185f587cfe16d41a36edae8fe29b2453e
```

* Install CNI

```
kubectl apply -f https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.yml

```

* Remove tent from Primary node to deploy pods

```
kubectl taint nodes <primary node hostname> node-role.kubernetes.io/master- 
```
Bit Counting Codewars
Tags: java, beginners, codewars, programming
Published: 2022-02-03 14:29:56


 

Write a function that takes an integer as input, and returns the number of bits that are equal to one in the binary representation of that number. You can guarantee that input is non-negative.

Example: The binary representation of 1234 is 10011010010, so the function should return 5 in this case

 

Code(Java)
 

```
public static int countBits(int n)

     {

         int count=0;

         String BinaryValues=Integer.toBinaryString(n);

         //System.out.println(BinaryValues);

         for(int i=0;i<BinaryValues.length();i++)

         {

              if(BinaryValues.charAt(i)=='1')

              {

                  count++;

              }

         }

         return count;

     }

```
 

 

Solution 2:

 

```
public static int countBits(int n){

   

    return Integer.bitCount(n);

  }
```

More at : https://onlylang.blogspot.com/
Nossa Stack
Tags: rails, ruby, aws, postgres
Published: 2022-02-03 14:28:06

Aqui na V360 gostamos de deixar nossa stack de tecnologia o mais simples possível.

Quanto menos nos preocuparmos com ela, mais tempo teremos para pensar nos nossos clientes.

Gostamos de brincar que qualquer remoção está pré-aprovada. Já para adicionar complexidade, tem que ter uma boa justificativa.

**Cloud**
Atualmente utilizamos a AWS para todos os serviços de infraestrutura.

Usar a AWS nos ajudou tanto em escala quanto em segurança. Saber que estamos em uma nuvem, com os certificados de segurança em dia, traz tranquilidade para nós e confiança para nossos clientes.

**Banco de Dados Relacional**
Usamos o Postgres como banco de dados relacional, através do serviço de RDS da AWS.

Esse sistema se mostrou estável, confiável e performático para nossa aplicação.

O que nos fez escolhê-lo, ao invés do MySQL, foi a qualidade das transações de esquema, além de algumas funcionalidades, como colunas de jsonb.

**Banco de Dados Textual**
Como trabalhamos com muito dado em formato de texto, adotamos uma prática de indexar os dados no ElasticSearch (também através de serviço da AWS).

Do ElasticSearch, saem hoje nossos principais relatórios e dashboards, tirando uma boa carga do Postgres.

**Banco de Dados de Chave-Valor**
Usamos atualmente o Redis, tanto para gerenciar jobs assíncronos (com a gema Sidekiq) quanto para o cache da aplicação.

Deixamos também a AWS gerenciar o Redis através do ElasticCache.

**Framework**
O framework que utilizamos para desenvolvimento da nossa aplicação web é o Ruby on Rails.

Os principais motivos dessa escolha estão descritos no post [“Por que Rails?”](https://dev.to/v360/porque-rails-2cap).

De bônus, usamos o Rails Engines para separar nossas aplicações em módulos, tendo um monolito modular.

**Frontend**
Nosso frontend é todo construído com JavaScript vanilla.

Acreditamos que um frontend simples para o usuário não necessita de ferramentas complexas.

——

Com essa stack simples, conseguimos entregar um software de qualidade e escalável, focando no que realmente importa: o cliente final.
Automatically generate componentized modules
Published: 2022-02-03 14:27:55

# PT

<font color=red>**👌. Automatically generate componentized modules**</font>

- 自动生成组件化模块

```
Pod lib create Demo swift --template-url='git@github.com:yangKJ/PT'
```

-----

### Swift
- cd 任意目录文件
- 自动快捷创建Swift组件模块，终端执行如下命令

#### pod lib create Demo swift --template-url="https://github.com/yangKJ/PT"
- 将上述**`Demo`**换成对应工程名即可 ⚠️

> 亦或者执行此命令也可 👒👒
> 
> pod lib create Demo swift --template-url='git@github.com:yangKJ/PT'

----

- <font color=red>**Tip: 该模块会引入默认MVVM + RxSwift响应式架构模块**</font>

> 关于该模块架构更多信息，请查看文档.🎷
> 
> [WhaleFullDemo](https://github.com/yangKJ/WhaleFull)
> 
> If you find it helpful, please help me with a star. If you have any questions or needs, you can also issue.
>
> Thanks.🎇

### Contents
- 自动生成组件化模块目录结构如下，该区域删除或者增加模块

<img src="screenshots/template.png" width="800" align="center" />

### About the author
- 🎷 **E-mail address: [yangkj310@gmail.com](yangkj310@gmail.com) 🎷**
- 🎸 **GitHub address: [yangKJ](https://github.com/yangKJ) 🎸**

-----

### LICENSE

LICENSE is available under the [MIT](LICENSE) license. See the [LICENSE](LICENSE) file for more info.
Paul's Software Developer Digest - Black Pioneers in Computer Science.
Published: 2022-02-03 14:19:54

Let continue to celebrate Black History Month with a look at "7 Black Pioneers in Computer Science"

Here is an excerpt from [Tracy William's page](https://newrelic.com/blog/nerd-life/black-history-month-computer-science-infographic):

"Among these names you might find familiar ones such as NASA physicist Katherine Johnson, whose life story is the basis of the critically acclaimed film Hidden Figures. But you’ll also find a behind-the-scenes “godfather” of Silicon Valley, key players in many computer hardware and software breakthroughs, and the founder of Black Girls Code, all contributors to the tradition of Black excellence in computer science. We hope our brief highlights of each person inspires you to learn more about them and how their work changed the world."

Click the image to learn more about each pioneer:

![Black History Month Computer Science Pioneer Infographic](https://newrelic.com/sites/default/files/2021-08/black-pioneers-in-computer-science.jpg)
Windows 11 – Microsoft Power Toys, 🖱️ Mouse Utilities rocks 🤘🤘🤘
Tags: englishpost, microsoftpowertoys, mouse
Published: 2022-02-03 16:28:45

---
title: Windows 11 – Microsoft Power Toys, 🖱️ Mouse Utilities rocks 🤘🤘🤘
published: true
date: 2022-02-03 14:18:32 UTC
tags: EnglishPost,EnglishPost,MicrosoftPowerToys,Mouse
canonical_url: 
---

Hi !

If you are working with Windows, the Microsoft Power Toys are kind of a #MustHave. And, the set of new mouse features, in the latest release improves a lot the experience while doing presentations, sharing screen, and more.

We already know the press CTRL twice to locate your mouse, which is super useful when you have several monitors (my take on [TikTok here](https://www.tiktok.com/@elbrunomsft/video/7060460258233240837?is_copy_url=1&is_from_webapp=v1)).

Now we also have 2 new features:

- Mouse Highligther, Windows + Shift + H
- Mouse Pointer Crosshairs, Ctrl + Alt + P

As usual, a 10 seconds video is the best way to show this !

![Demo of Microsoft Power Toys including mouse utilities](https://brunocapuano.files.wordpress.com/2022/02/2022-02-03-powertoys-mouse-utilities.gif?w=650)

You can download the Power Toys from [here](https://github.com/microsoft/PowerToys), and enable / disable these features in this section.

![microsoft powertoys mouse utilities](https://brunocapuano.files.wordpress.com/2022/02/microsoft-powertoys-mouse-utilities.jpg?w=1024)

Happy coding!

Greetings

El Bruno

* * *
The Art Of Asking Good Questions
Tags: beginners, programming
Published: 2022-02-03 14:17:50


As developers, the more code we write the more bugs we have to tackle sometimes we may have just missed a simple semicolon(;) or maybe a typo.

Most of the times someone already has encountered that problem, and asked on stack overflow so we continue the tradition and copy and paste the first code snippet we see on that stack overflow question into our code.

But there are sometimes where we encounter truly unique problems / weird errors where no stack overflow answer or google can help us.

So to solve this problem we ask other developers on public forums, mail groups, discord servers etc...

To make sure you get help quickly you should know how to ask a great question!

But before asking make sure that you have properly debugged the code, referred to other Similar stack overflow questions and have researched enough on the topic/problem that you have.

Here are DOs and DONTs of asking question:

DOs:
- Have a good title that summarises the problem.
- Keep the content short.
- Create a live online environment on REPLIT or other similar online platforms.
- Provide operating system, framework/language version and relevant code.
- Copy and paste only the error value not the whole file system traceback.

DONTs:
- Don't ask to ask just ask! Visit: https://dontasktoask.com
- Don't provide the whole code, only the relevant parts

Here is a sample question that uses the above principles.

## Sample Question

**Title**: Why does 1 + 1 = 11 in python?
**Tags**: #python
**Error**: When I add 1 and 1 in this program it prints 11 rather than the expected result of 2.
Code:
```py
num_1 = input("Enter number: ")
num_2 = input("Enter number: ")
print(num_1 + num_2)
```
OS: Mac OS (M1 Chip)
Python version: 3.9.4
Live Environment To Run The Code:
https://replit.com/@vaarunSinha/Asking-Questions-Example#main.py

Thank You For taking time to read this question. Please help me out.

## Conclusion
The above question is really good, but here's the one and only problem with this question, that if I had researched enough I would have got the answer that actually I was adding strings.

I could not find a better example that's why 😅

I hope from now you will ask great questions as a developer!

_**Happy Debugging**_
Creating Jenkins Job For Maven Project | Jenkins Tutorial | Part V

Tags: javascript, beginners, tutorial, jenkins
Published: 2022-02-03 14:09:20

{% youtube jGBvcQHcIpk %}

This video is a part of our Jenkins Tutorial series. In this video Moss(@Tech and Beyond with Moss), explains how you can create a Jenkins job for a Maven project, through Jenkins and Maven integration. The video also walks through the steps to do so, Jenkins build triggers, Jenkins test reports, and other details in the process.

By the end of this video, you will learn  -: 
🔸 How to create a local Maven project in Jenkins?
🔸 How do I set test results in Jenkins?
🔸 How do I run a Jenkins performance test?
🔸 How do I integrate Jenkins webhook with Github?