teleren/devto huggingface dataset:
Create Animated India flag in HTML and CSS
Tags: html, css, javascript, webdev
Published: 2022-09-11 16:17:21


![Animated India Flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y478wpetqrsox51pzmsw.png)
Design a beautiful animated India Flag in HTML and CSS.

index.html

```html
<!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>India Flag</title>
    <link rel="stylesheet" href="style.css" >
</head>
<body>
    <div class="main-content">
        <div class="flag-stand"></div>
        <ul>
            <li class="orange"></li>
            <li class="white">
                <div class="ashoka-chakra-div">
                    <img src="ashoka-chakra.svg" alt="ashoka-chakra" class="ashoka-chakra">
                </div>
            </li>
            <li class="green"></li>
        </ul>
    </div>
</body>
</html>
```

style.css
```css
body{
    background-image: url(https://images.wallpaperscraft.com/image/single/bench_sky_clouds_113412_1280x720.jpg);
    background-size: cover;
}
.main-content{
    position: absolute;
    bottom: 9.2%;
    left: 45%;
}
.flag-stand{
    width: 10px;
    height: 350px;
    background: #587a0a;
    float: left;
}
ul{
    list-style: none;
    margin: 0;
    float: left;
    padding: 0;
}
li{
    width: 180px;
    height: 35px;
    animation-name: stretch;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes stretch {
    0% {
      transition: all 0.75s ease-in-out;
      width: 185px;
    }
    50% {
      transition: all 0.75s ease-in-out;
      width: 195px;
    }
  
    100% {
      transition: all 0.75s ease-in-out;
      width: 205px;
    }
  }
.orange{
    background: #f96232;
}
.white{
    background: #fff;
}
.green{
    background: #006000;
}
.ashoka-chakra-div{
    width: 35px;
    height: 35px;
    margin: 0 auto;
    animation: rotate 2s linear infinite;
}
.ashoka-chakra{
    height: 100%;
    animation-delay: 9s;
}
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
```
Blog:- [Beginner Developer](https://beginners-developer.blogspot.com)
kafka文件存储
Published: 2022-09-11 15:11:38

## 一、kafka架构

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

1. 
producer：生产者。producer产生的数据追加到partition的log文件中，每条数据有自己的offset

1. 
consumer：消费者

1. 
consumer group：消费者组；对应一个partition，一个消费组中只能有一个consumer来消费

1. 
broker：一个kafka服务就是一个broker

1. 
topic：逻辑概念；代表一类消息

1. 
partition：分区。partition是物理上的概念，每个partition对应一个log文件。
一个topic可以分到多个partition上，每个partition是有序的队列，但不能保证topic全局有序

1. 
replica：副本。一个topic在一个partition有一个leader replica和多个follower replica


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

## 二、工作流

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

## 
三、文件存储

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

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


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

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



- 
log文件已1G为临界点，超过1G就会创建新文件

- 
一个segement包含一个log文件、一个index文件；文件结尾是文件中第一条消息的offset-1

- 
根据offset (1560140921)定位数据：

1. 
定位到00000000001560140916.log、00000000001560140916.index文件

1. 
1560140921 - 1560140916 + 1 = 5

1. 
根据上一步的5找到index文件中序号为5对应的地址456

1. 
根据456找到log文件中对应的消息







参考：
https://blog.csdn.net/godlovedaniel/article/details/120113667
https://blog.csdn.net/cao1315020626/article/details/112590786
zookeeper安装
Published: 2022-09-11 14:40:45

## 
一、安装
```
# tar -zxvf zookeeper-3.*.*.tar.gz
# cd zookeeper-3.*.*
# cd conf
# cp zoo_sample.cfg zoo.cfg
```
二、修改配置: zoo.cfg
```
tickTime=2000
initLimit=10
syncLimit=5
# 数据保存地址
dataDir=/Users/ted/software/apache-zookeeper-3.7.1-bin/data
# 端口
clientPort=2181
```
三、启动
```
# cd zookeeper-3.*.*
# cd bin
# 启动zookeeper
# sh zkServer.sh start
# 启动zookeeper client
# sh zkCli.sh
[zk: localhost:2181(CONNECTED) 10]ls /
```
If you have these three things, you can be a programmer too. (v2!)
Tags: beginners, motivation, career, programming
Published: 2022-09-11 14:36:40

2022-09-13 is Programmers’ Day. Congratulations!

Last year I did my [first post](https://dev.to/noriller/if-you-have-this-three-things-you-can-be-a-programmer-too-28b8), about this same day.

While I still believe in those three things, today I’ll bring three more!

---

## 1. Problem-solving skills

Most people think of code problems and solutions, but that is not what a programmer is.

In fact, I would say that code is just a detail!

More than the code problems we have to face, it’s all about the actual problems we solve through code.

I say this because we are eager to think on the stack to use, algorithms, and design patterns to solve the code problems instead of actually checking if this will solve the user’s problems!

## 2. Distrust

Our code will never be perfect, the users aren’t perfect. There are people counting on that and people counting that stuff won’t simply break.

You should always look both ways before crossing a one-way street!

Apply that to code and everything else.

## 3. Drive

Programming isn’t easy, but I’m not talking about code.

Languages change, frameworks are ephemeral, companies want to hire only “seniors”, and it’s up to you to juggle a lot of expectations the better you can.

Because of that, you have to have something that motivates you.

Maybe you like to keep learning, or maybe you like creating stuff, maybe it’s helping others… 

---

Programming is life-changing in many aspects, as Uncle Bob [said](https://blog.cleancoder.com/uncle-bob/2014/11/15/WeRuleTheWorld.html):

> We rule the world.
> 
> 
> We programmers. We rule the world. We write the rules that make our society work.
> 

More and more we see examples of the world changing because of the code we, programmers, write. 

For good or for ill, we are responsible and have the power.

---

Cover Photo by [Cookie the Pom](https://unsplash.com/@cookiethepom?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/computer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
我如何使用Obsidian做為開發筆記
Tags: career, tutorial, writing, obsidain
Published: 2022-09-11 14:33:34

#### 在開始之前, 我想簡單回顧我之前使用過的筆記方式.
順序沒有優劣之分, 純粹是我第一次用這些筆記工具的時間順序:

**手寫筆記**
手寫一直有著難以取代的優點, 像是筆寫在紙上的手感, 能觸摸實體的紙手稿. 但缺點也是顯而易見, 難以修改以及攜帶不易. 

**Evernote**
做為我第一款使用的筆記軟體, 也是我開始尋找好用筆記軟體的起點. 第一次用tag這個工具開始管理筆記就是在Evernote上, 但因為不想付年費而轉找其他替代工具.

**Jopline**
號稱免費開源版Evernote, 在求學生涯有三年都使用這個軟體. 使用Markdown, 且能在多平台同步, 甚至提供terminal版本. 一開始是用dropbox作為雲端同步, 但dropbox政策改變後我也順勢將筆記牽到其他平台.

**OneNote**
出社會後有段時間配合公司使用OneNote, 能自由拖曳表格和區塊這點是蠻方便的, 但離開公司後就沒有繼續使用.

**Notion**
Notion在我出社會後一直是我的主力, 其優點包含高度連結筆記, 能插入多種其他好用的網頁(設計圖, 流程圖). 雖然有學習門檻, 但功能及優點很多且美觀. 我本打算將Notion作為我主力筆記軟體, 直到有天他提醒我空間不足...

**Apple備忘錄**
搭配Apple pencil, 他算是我的手寫替代方案, 在歸納腦中一些比較抽象圖像或者計算數學的時候依然會使用到.

**HackMD**
現階段工作會使用的筆記軟體, 基本的連結和tag功能都有, 也能同步到Github上, 編輯的時候還能同時看到同事正在修改甚麼部分.

---
回到正題, Obsidian吸引我最開始也是因為graph view的連線圖, 但實際使用上可能local graph view會偶爾起到輔助功能, 最讓我滿意的大概是我可以把md檔筆記上傳到Github上了. 雖然目前Obsidian在行動裝置上同步還沒有做到很方便, 但其他功能(md編輯, 巢狀tag, 筆記連結, 自定義快捷)都有齊全, 外觀設置也可以下載或自己用CSS調整, 讓我有種用vscode寫筆記的感覺.

#### 介紹完Obsidian的優點, 我還想談一下我寫筆記遇到的問題以及我如何記錄筆記:

**筆記不該只是流水帳:**
筆記是知識的總結, 不該只是資訊的整理. 所以單純紀錄但不去思考, 那筆記容易形成流水帳. 好比說你把某個程式語言的語法全部抄下來, 但某天需要用到時, 你是否有設好關鍵字, 讓你快速找到這篇筆記並得到你想要的內容? 更慘的是, 你可能甚至忘了做過這篇筆記, 那記筆記的意義也蕩然無存.

**筆記不需要事先分類**
假設今天要學英文, 你可能在目錄建一個"語言"資料夾, 然後"英文", 英文下面又建很多資料夾像是"單字", "文法", "閱讀", "聽力"等等, 當然這裡只是舉例. 假設有一天看了一個英文電影做筆記, 你可能會思考該把它放到哪個資料夾比較好, 如果放到"聽力"好了, 下次你可能又要重新思考該放到哪裡, 同樣的素材你可能會歸類到不同地方, 難道是因為事前規劃不夠詳細嗎? 我認為一開始就不該用文件夾分類.

---
#### 所以我如何記錄筆記的?
收到卡片盒筆記法(zettelkasten)的啟發, 我認為筆記應該是紀錄**思考的過程**.

**我如何使用tag: 在開始筆記前就先想好未來的使用場景**
我的tag是長這樣子: #Tool教學/vscode/.. #範例/C++/.., 裡面的斜線是巢狀tag, 如果你的筆記不支援巢狀tag也可以使用多個tag. 我在寫筆記的開頭, 就**預想未來會怎麼使用這篇筆記**, 如果是寫code範例, 那就加個tag #範例, 如果是安裝教學就加個#install, 如果是環境設置就加個#env等等. 預先想好筆記的用法可以免於打流水帳的問題.

**使用文件夾來記錄脈絡**
為甚麼要記錄脈絡, 與其要你紀錄某個東西的用法, 你如果把使用場景一起記下來你會回憶的更清楚. 好比說我的文件夾第一欄可能是"某某專案" -> "工作日誌" -> 紀錄遇到的某個難題 -> 紀錄解決問題的過程, 並用tag打上#範例/Go語言/... 這樣用tag找到的時候, 也會想起當時在甚麼背景下紀錄這篇筆記.

補充一點, 這也有個好處, 我在記筆記前也會稍微思考, 是**為了甚麼**紀錄, 理清一下自己的脈絡, 希望能幫助到寫筆記的人.

Wayne
Headless CMS collection for Developers
Tags: programming, opensource, github, webdev
Published: 2022-09-11 14:20:39

Hello friends.
This is my first post here, although I am visiting dev.to regularly for quite some time :grinning:

Today I want to show you a github repository I created, which collects headless CMS for developers.

[:link: Github Repository Link](https://github.com/timsntech/headless-cms-for-developers)

### Why?
Over the years I worked with couple of different headless CMS, and I know there are websites out there that list and compare different CMS systems, but today I just thought why not just create a repository that other developers can :star: to have a great pre-selection of headless CMS, that are either open source to use or at least provide a free account.

As some of the headless CMS out there are highly priced (in my option, yes I know they are mainly for enterprise use, but nevertheless), I wanted to create my own list with headless CMS that are either free and open source to host them yourself on your own servers (I personally prefer that over cloud CMS), or as I said, give you the option of a free account in their cloud version.

### Headless CMS list
currently listed in the Github repository (might change in the future, better check out on Github if you are interested):

- Directus
- Keystone
- Payload
- Statamic
- Webiny
- TinaCMS
- Ghost
- Cockpit
- Contember
- CraftCMS
- Strapi
- ApostropheCMS
- Flextype
- Publii
- Pimcore
- Gentics
- Superdesk
- dotCMS
- Squidex
- NetlifyCMS
- Daptin
- Flotiq
- Gridly
- DatoCMS
- Sanity
- Cosmic
- TakeShape
- Prepr
- Prismic
- Contentful
- Hygraph (GraphCMS)
- Storyblok
- ButterCMS
- Zesty
- Dialoguewise
- Kontent

### Whats next
Maybe I will include the technology stack the CMSs are build with in the future, add addtional information about their APIs, whatsoever. For now, I am quite happy with the list :wink: It does the job for me.
In case this is helpful to you feel free to leave a :star:, but please note this is just a personal collection, so in case some information is not listed correctly, feel free to create an issue or contribute if your favorite CMS is missing.

Best regards and have a nice day developers,
Cheers! :punch: :boom:
Blade Component and Directive for Demo App - 2 (Pull like package using Git and GitHub)
Published: 2022-09-11 14:19:09

In the [last blog](https://dev.to/saaberdev/blade-component-and-directive-for-demo-app-4649) I have explained how you can create a quick login blade component for your demo app. Also said that I will share a trick so you don't have to copy paste all codes in your every project. So let's take a look how we can achieve this.

### Before push prepare structure

```
.
├── app
│   ├── Http
│   │   └── Controllers
│   │       └── Auth
│   │           └── LoginAsDemoLayout.php
│   └── View
│       └── Components
│           └── Demo
│               └── LoginAsController.php
└── resources
    └── views
        └── components
            └── demo
                ├── buttons
                │   └── login-as.blade.php
                └── login-as-demo-layout.blade.php
```

Why structuring files is important ? Basically when we pull we actually want those specific files to add in our project, which means if your file name matches with existing project files it will not pull instead it will create git conflict. Well this blog is not in-depth about git so I am not going to discuss all. To know more about git you need to do a bit of self study.

### Push code to GitHub

- First create a repo in GitHub

![repo-name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikzg9t7hnpcgqu7h3xte.png)

- Initialize git, add and commit your files

```
git init

git add .

git commit -m 'your message'
```

- connect your git repo

```
git remote add origin "your git url"
```

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

- push your code

```
git push -u origin main
```

### Pull from GitHub

Now you can pull these files from your any application by simply adding the upstream and pull.

- add upstream

```
git remote add demo-comp https://github.com/SaaberDev/demo-app-component.git
```

You might have noticed I added the upstream but instead origin I named it as "demo-comp", why ? Because, we already have an upstream named origin where we are pulling.

- After adding upstream simply use this command to pull.

```
git pull demo-comp main
```

**Sometimes you may face issue like "refusing to merge unrelated histories"** to solve this add `--allow-unrelated-histories`

```
git pull demo-comp main --allow-unrelated-histories
```

I hope this blog will help you to save your time. From now on you can reuse your code by simply creating a reusable repo and pulling it. This is a simple example but you can use your own technique.
DATA MIGRATION FROM LOCAL TO AZURE
Published: 2022-09-11 14:19:08

**Azure SQL Database** is a recommended target option for SQL Server workloads that require a fully managed platform as a service (**PaaS**). SQL Database handles most database management functions. It also has built-in high availability, intelligent query processing, scalability, and performance capabilities to suit many application types.

SQL Database provides flexibility with multiple deployment models and service tiers that cater to different types of applications or workloads.

Let's setup the connection between the **Local SQL** to the **AZURE SQL** :

Block Diagram of the connectivity we will be making shown below.

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

- We need to have **SUBSCRIPTION** in my case I'm using **STUDENT SUBSCRIPTION**.

- Creating a **Resource Group**.

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

- : Now Go to **AZURE SQL** and **create** the database.

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

- While creating the database, create a server and provide Username and password in it.

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

-  Find the **IP address** of the system from where we will migrate the data .

-  Now we'll create a **firewall** and **add rule** and **IP address** to it and save it.

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

- After the rule is added then copy the **server name**.

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

- Now open **Microsoft SQL Server Management Studio** and click on connect.
 Then paste the **server name** and add **username and password** to it and click on **connect**.

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

- Then we will able to see this in the left bottom .

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

- Now select the **Database** we need to copy to **Azure Database**, and **export** the data.

- Now do as per the instructions in the dialog box and click on **Next** button.

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

- Now the local database is copied to **AZURE Database**.

By doing this we successfully migrated the local SQL Database to AZURE SQL Database.

Stay tuned for my upcoming blogs.

Thank You !
Java: The benefits and limitations
Tags: java, programming, beginners
Published: 2022-09-11 13:58:15

## Introduction to the Java programming language

Java is also another popular programming language. It was initially developed in 1995 by James Gosling. Like Python, it can be used for a lot of different tasks. It is especially popular for building web applications that are on an enterprise scale, and in android app development.

---
So, what are the benefits and limitations of the Java programming language?

.
.
.

---
**Benefits:**

- Has support for multi-threading

- There are a lot of open-source libraries that are available

- It is a highly secure programming language, due to its use of a security manager that defines class access

- It has automatic memory allocation

- It is a distributed programming language

---

**Limitations:**

- Much slower, than in comparison to C++ and C

- The memory management can be expensive to manage

- Its syntax is very complex and verbose (many words and sentences are complex in its syntax)

- No templates available, which prohibit it from developing data structures that are of high quality

- Requires a lot of memory space
Using GraphQL with DynamoDB is Cool
Published: 2022-09-11 13:44:33

---
title: Using GraphQL with DynamoDB is Cool
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Biggest misconception of [GraphQL's](https://graphql.org/) resolvers is that you _have_ to put them on fields. You don't.

Put 1 on a query/mutation. This matters because people think
> "oh, [DynamoDB](https://aws.amazon.com/dynamodb/) is [single table design](https://www.alexdebrie.com/posts/dynamodb-single-table/), GraphQL needs individual fields".

No. Your query can just do a DynamoDB query.

The worry with individual GraphQL field resolvers is you get into the waterfall pattern, making a bunch of I/O calls in sequence, and either slow things down, or worse, have to utilize multiple DynamoDB tables making it more relational, and thus not using single table design.

If you're building an [AppSync](https://aws.amazon.com/appsync/)/GraphQL API for that, yeah, that's a problem, better to use relational like [Postegres](https://www.postgresql.org/).

If you want single table design for Dynamo AND want to use GraphQL, it's a match made in heaven if you just add a second step to your modelling.

Step 1 is the whole "flatten your joins into a single row". That's the normal DynamoDB pattern of optimizing your data to be obtained in a single query.

Step 2 is "just make a GraphQL query for that dynamodb query". That's it.

Example, GraphQL Query:

```graphql
getStuff(id:ID!):Stuff!
```

The Lambda in turn calls Dynamo:

```javascript
dynamodbDoc.query({ 'id=getStuffID' })
```

I am NOT trivializing the data access patterns in Step 1. That is super hard. This is also why it's sometimes easier to use relational or NoSQL for flexibility "because Product Owners/Users" change crap all the time and you're not punished when updating queries.

While I enjoy writing ETL pipelines, business/product shouldn't be punished for changing their mind.

Anyway, the tl;dr; ensuring a UI can pass [1, 2, 3] safely to the back-end is easier in GraphQL than REST. Building BFF's for a UI, I know the access patterns. GraphQL + DynamoDB is awesome.
From Junior to Senior. Who is a Senior Elixir Dev?
Tags: elixir, beginners, career
Published: 2022-09-11 13:42:31

"I am the classic example - my background is mainly Ruby" - he said. Why Michał changed his programming road? 

Meet Michał Buszkiewicz - a Senior Elixir Dev himself!  He'll give us his insights on what it means to be a SENIOR Elixir programmer, share some of their favourite features, and talk through how he developed over time (and how you can develop yourself!)

[From junior to senior. How to become senior elixir developer? - Interview with Michał, CTO at Curiosum](https://curiosum.com/blog/junior-to-senior-who-is-senior-elixir-dev-interview-michal-buszkiewicz)

Elixir is a hot topic in programming right now. I could tell you about its benefits, but why don’t we just go ahead and ask this guy who knows everything there's to know?

Learn more from the interview!

And... How was your programming road?
7 Best Anti-Spam WordPress Plugins
Tags: webdev, beginners, tutorial, productivity
Published: 2022-09-11 13:11:54


![7 Best Anti-Spam WordPress Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41wn68o3ue8pltotezem.jpg)
7 Best Anti-Spam WordPress Plugins. If you are running a website or a blog on WordPress or any content management system, then you’ve likely had some understanding of spam. Spam can impact different areas and features of your website, including your forms, comments, orders, email lists, surveys, trackbacks, etc.

In spare to destroying your time and server resources, spambots can provide you a false appearance of your WordPress traffic, email list size, and other performance metrics. Spam, particularly spam trackbacks, and comments, can also make your site peek less professional and reliable to your users.


Fortunately, you can bring steps to control spambots from flooding your WordPress website. One of the most comfortable and sufficient solutions is downloading a WordPress plugin that will check, filter out, stop, or remove spam from your website.

Given below we’ll go over some of the best anti-spam plugins, which can support securing your website.

## 7 Best Anti-Spam WordPress Plugins | Securing Your Site

1. Akismet Spam Protection
2. Spam Protection, AntiSpam, FireWall by CleanTalk
3. Titan Anti-Spam & Security
4. WP Cerber Security, Anti-Spam & Malware Scan
5. Antispam Bee
6. WP Armour
7. Hide My WP

## Akismet Spam Protection

Akismet checks your contact form and comments submissions against a global database of spam to control your website from publishing malicious content. With over five million+ downloads, Akismet is the most famous plugin for guarding WordPress websites from spam. Akismet inspections comments and contact form submissions against its global database of spam and filters out any that appear like spam.

You can review the comment spam in your dashboard, and retrieve any that you think aren’t spam.
Please note that this plugin does require an API key to activate it.
To get API you need to signup on Akismet. Depends on you you can get their free plan.

Read More: [7 Best Anti-Spam WordPress Plugins](https://softcodeon.com/wordpress/7-best-anti-spam-wordpress-plugins.htm)
4# CSS Interview Topics
Published: 2022-09-11 12:51:25

* [CSS Preprocessor](#css-preprocessor)
* [CSS Sprites](#css-sprites) 

#CSS Preprocessor
CSS Preprocessors are tools that extend the functionality of vanilla CSS by adding a wide variety of logical syntax such as you might see in a normal programming language. A browser can only understand CSS, which at times may not be enough to write clean and reusable rules. 

A few of most popular CSS preprocessors:
- Sass
- LESS
- Stylus
- PostCSS 

```css
.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}
.avatar {
  @extend .circle;
}
```

```css
.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}
 
.avatar:extend(.circle) {}
```


#CSS Sprites 

CSS Sprites are a means of combining multiple images into a single image file for use on a website. Using the image sprites instead of separate images will significantly reduce the number of HTTP requests a browser makes to the server, which can be very effective for improving the loading time of web pages and overall site performance.

Resource:. [Svg sprit](https://svgsprit.es/)