Angular - Display a list of items with ngFor

This is a quick example to show how to display a list of items in Angular with the ngFor directive.

The example simply renders an array of users as rows in a table with <tr *ngFor="let user of users">.

Here it is in action:

Example Angular Template with ngFor Directive

The app component template contains some standard html for a heading and table, and inside the table the tr tag uses the *ngFor Angular directive to loop over the users array and render a table row for each user that includes the user name, email and role.

#angular #ngfor

What is GEEK

Buddha Community

Comparing the best CSS grid generators

Grids, grids, grids. So many things we can do with them. But, so many properties we have to remember. 😅

If you are like me and you always have to resort to Google when using grids, the tricks we’ll cover in this guide will make your life as a developer much easier.

What are CSS grid generators?

A grid generator is a website you can use to generate a grid in a few clicks. But why should you care about them? In my case, I use them quite often when I want to design the layout of my websites or a complex responsive structure inside an interface. Grids are great because they help you achieve a lot with just a few CSS lines, which saves a lot of time.

In this article, we will compare the following CSS grid generators and list their pros and cons so that you can bookmark your favorite one:

• CSS Grid Generator
• CSS Layout Generator
• Grid LayoutIt
• Griddy
• Cssgr.id
• Angry Tools CSS Grid

Also, to save you time, I made a cheat sheet with the essential CSS grid properties you should remember. 🥳 This cheat sheet is available at the bottom of this article.

1. CSS Grid Generator

I put CSS Grid Generator first on my list because I use it the most. It is an open source project designed by Sarah Drasner (the code of the project is available here if you want to contribute).

To give you an example, I recently needed to generate a simple grid with two rows and three columns. I didn’t remember how to set a specific size for the row gap and the column gap. With CSS Grid Generator, I was able to easily create the structure I desired and move on to more complex tasks.

.parent {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: repeat(2, 1fr);  grid-column-gap: 60px;  grid-row-gap: 30px; }

The final grid looked like this:

Pros:

• The interface is user-friendly and the colors are well-chosen, making CSS Grid Generator an excellent tool for beginners who want to become more familiar with CSS grids
• CSS Grid Generator can help you get the result you want for most use cases because you can specify the number of columns, rows, and gaps across your grids
• Just hit one button to preview the code and copy it to your clipboard

Cons:

• There is no template you can choose to save you time
• You will not be able to generate complicated layouts

2. CSS Layout Generator

I could have put CSS Layout Generator first on the list. If you are looking to generate complicated grids all the time, this is probably the one you should bookmark. Developed by Braid Design System, CSS Layout Generator offers a wide range of options that will solve most headaches.

In my daily work, I use CSS Layout Generator templates a lot because they conveniently allow you to choose between a structure with a sidebar/container or a header/main/footer.

<section class="layout">
  <!-- The left sidebar where you can put your navigation items etc. -->
  <div class="sidebar">1</div>

  <!-- The main content of your website -->
  <div class="body">2</div>
</section>

<style>
.layout {
  width: 1366px;
  height: 768px;
  display: grid;
  /* This is the most important part where we define the size of our sidebar and body  */
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar {
  grid-area: sidebar;
}

.body {
  grid-area: body;
}
</style>

The Sidebar option looks like this:

Pros:

• CSS Layout Generator allows you to choose between six standard templates to get started faster
• There are many options to solve nearly all use cases
• You can switch between grids and Flexbox, which is helpful to compare both options
• The interface is excellent and user-friendly

Cons:

• Because it offers so many options, CSS Layout Generator can be confusing for a beginner

3. Grid LayoutIt

Grid LayoutIt was developed by Leniolabs and is another grid generator that comes with many options. The code is available publicly on GitHub if you are interested in contributing.

Last week, a customer asked me to design an interface to display important metrics about his product (somewhat similar to Geckoboard). The layout he wanted was very precise but, thanks to LayoutIt, I generated the code in a few seconds.

<div class="container">
  <div class="metric-1"></div>
  <div class="metric-2"></div>
  <div class="metrics-3"></div>
  <div class="metric-4"></div>
  <div class="metric-5"></div>
  <div class="metric-6"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "metric-1 metric-1 metric-2"
    "metrics-3 metric-4 metric-2"
    "metric-5 metric-5 metric-6";
}
.metric-1 {
  grid-area: metric-1;
}
.metric-2 {
  grid-area: metric-2;
}
.metrics-3 {
  grid-area: metrics-3;
}
.metric-4 {
  grid-area: metric-4;
}
.metric-5 {
  grid-area: metric-5;
}
.metric-6 {
  grid-area: metric-6;
}
</style>

The resulting layout looked like this:

Pros:

• Grid LayoutIt is intuitive to use and it provides many options
• You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
• Your layouts can be exported to CodePen, CodeSandbox, or StackBlitz in one click
• The interface is well-designed, with a proper contrast between the options and the grid preview
• Grid LayoutIt supports grid placement options

Cons:

• This generator does not provide templates to save you time, which is the main reason why I put it third on the list

4. Griddy

In my past experience, I spent a lot of time using Griddy. It is a little less easy to use than the CSS grid made by Sarah Drasner, but it offers more options.

For example, it allows you to easily generate a four column grid with three rows:

.container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr 1fr;
  grid-template-rows: 2fr 100px 1fr;
  grid-column-gap: 10px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}

The resulting layout looks like this:

Pros:

• You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
• The provided options are enough to solve most use cases and test different alignments. In a nutshell, it gets the job done

Cons:

• It may be a question of taste, but the sidebar with the options is not the best interface for me. You have to scroll for a while to get what you are looking for
• There are no templates to choose from
• There is no minmax() function

5. Cssgr.id

Cssgr.id is another great choice if you are looking for a grid generator that does not have too many options but enough to solve most use cases.

I used Cssgr.id last year to create a gallery because I remembered that it had a gallery template. In a few clicks, I was able to get something quite close to what I needed.

<div class="grid">
  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 1</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-3">Item 4</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 5</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 6</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 7</div>

  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 8</div>

  <!-- This item will take 2 columns and 3 rows -->
  <div class="span-col-2 span-row-2">Item 9</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 10</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 11</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 12</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 13</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 14</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

/* Items with this class will take 3 columns */
.span-col-3 {
  grid-column: span 3 / auto;
}

/* Items with this class will take 2 columns */
.span-col-2 {
  grid-column: span 2 / auto;
}

/* Items with this class will take 2 rows */
.span-row-2 {
  grid-row: span 2 / auto;
}

/* Items with this class will take 3 rows */
.span-row-3 {
  grid-row: span 3 / auto;
}
</style>

The gallery looked like this:

Pros:

• Cssgr.id comes with five practical starter layouts to choose from (3×3, football formation, header/footer, gallery, and generic website)
• You can add placeholder text to see how it renders with some written content
• It has a well-designed interface that can be easily configured

Cons:

• It is not the grid generator with the most options

6. Angry Tools CSS Grid

Angry Tools CSS Grid is the last CSS grid generator on our list. It can be handy, though probably less user-friendly than the other tools highlighted in this guide.

Angry Tools CSS Grid is also useful when generating galleries. By clicking on the squares, you can define their sizes and their directions (horizontally or vertically).

<div class="angry-grid">
  <div id="item-0">Item 0</div>
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
  <div id="item-3">Item 3</div>
  <div id="item-4">Item 4</div>
  <div id="item-5">Item 5</div>
  <div id="item-6">Item 6</div>
  <div id="item-7">Item 7</div>
  <div id="item-8">Item 8</div>
  <div id="item-9">Item 9</div>
</div>

<style>
.angry-grid {
  display: grid;
  /* Our grid will be displayed using 3 rows */
  grid-template-rows: 1fr 1fr 1fr;
  /* Our grid will be displayed using 4 columns */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* You can define a gap between your columns and your rows if you need to */
  gap: 0px;
  height: 100%;
}

/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
  background-color: #8bf7ba;
  grid-row-start: 1;
  grid-column-start: 4;
  grid-row-end: 2;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
  background-color: #bf9aa7;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
  background-color: #c7656e;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
  background-color: #b659df;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
  background-color: #be6b5e;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
  background-color: #5bb9d7;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
  background-color: #56adba;
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 3;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
  background-color: #9cab58;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
  background-color: #8558ad;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 4;
}

/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
  background-color: #96b576;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}
</style>

The resulting gallery looks like this:

Pros:

• Angry Tools CSS Grid comes with some templates you can choose from

Cons:

• It does not have the best design overall. To be honest, it is quite ugly and can be hard to use
• I would not recommend this tool for beginners. Advanced developers should also probably choose either CSS Layout Generator or Grid LayoutIt instead
• You have to scroll to get the CSS outputs

BONUS: CSS grid cheat sheet

CSS grid generators are great when you are not familiar with CSS properties. But, as you become a more advanced developer, you may find that a quick cheat sheet is probably handier.

😇 If it can help you, here is the one I have made for myself:

gap	Sets the gap size between the rows and columns. It is a shorthand for the following properties: row-gap and column-gap
row-gap	Specifies the gap between the grid rows
column-gap	Specifies the gap between the columns
grid	A shorthand property for: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-area	Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start, grid-column-start, grid-row-end, grid-column-end
grid-auto-columns	Sets the size for the columns in a grid container
grid-auto-flow	Controls how auto-placed items get inserted in the grid
grid-auto-rows	Sets the size for the rows in a grid container
grid-column	Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-column-start, grid-column-end
grid-column-end	Defines how many columns an item will span or on which column-line the item will end
grid-column-gap	Defines the size of the gap between the columns in a grid layout
grid-column-start	Defines on which column-line the item will start
grid-gap	Defines the size of the gap between the rows and columns in a grid layout and is a shorthand property for the following properties: grid-row-gap, grid-column-gap
grid-row	Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start, grid-row-end
grid-row-end	Defines how many rows an item will span or on which row-line the item will end
grid-row-gap	Defines the size of the gap between the rows in a grid layout
grid-row-start	Defines on which row-line the item will start
grid-template	A shorthand property for the following properties: grid-template-rows, grid-template-columns, grid-template-areas
grid-template-areas	Specifies areas within the grid layout
grid-template-columns	Specifies the number (and the widths) of columns in a grid layout
grid-template-rows	Specifies the number (and the heights) of the rows in a grid layout

I hope this quick comparison of the best CSS grid generators helped you bookmark your favorite one.

Also, if I can give you a critical piece of advice when dealing with CSS grids: take your time. These generators are a great option because they can help you get the layouts you need step by step and avoid relying on a complicated solution.

Thank you for reading!  

Source: https://blog.logrocket.com/comparing-best-css-grid-generators/

#css 

最高のCSSグリッドジェネレーターの比較

グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅

あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。

CSSグリッドジェネレーターとは何ですか？

グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか？私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。

この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。

• CSSグリッドジェネレーター
• CSSレイアウトジェネレーター
• グリッドLayoutIt
• グリディ
• Cssgr.id
• AngryToolsCSSグリッド

また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。

1.CSSグリッドジェネレーター

CSSグリッドジェネレーターを最もよく使用するので、リストの最初に置きます。これはSarahDrasnerによって設計されたオープンソースプロジェクトです（プロジェクトのコードは、貢献したい場合はここから入手できます）。

例を挙げると、最近、2行3列の単純なグリッドを生成する必要がありました。行ギャップと列ギャップに特定のサイズを設定する方法を覚えていませんでした。CSS Grid Generatorを使用すると、必要な構造を簡単に作成して、より複雑なタスクに進むことができました。

.parent {表示：グリッド; grid-template-columns：repeat（3、1fr）; grid-template-rows：repeat（2、1fr）; grid-column-gap：60px; grid-row-gap：30px; }

最終的なグリッドは次のようになりました。

長所：

• インターフェイスはユーザーフレンドリーで、色も適切に選択されているため、CSSグリッドジェネレーターはCSSグリッドに慣れたい初心者にとって優れたツールです。
• CSSグリッドジェネレーターは、グリッド全体の列、行、およびギャップの数を指定できるため、ほとんどのユースケースで必要な結果を得るのに役立ちます。
• ボタンを1つ押すだけで、コードをプレビューしてクリップボードにコピーできます

短所：

• 時間を節約するために選択できるテンプレートはありません
• 複雑なレイアウトを生成することはできません

2.CSSレイアウトジェネレーター

CSSレイアウトジェネレーターをリストの最初に置くこともできます。常に複雑なグリッドを生成する場合は、これをブックマークする必要があります。ブレードデザインシステムによって開発されたCSSレイアウトジェネレーターは、ほとんどの頭痛の種を解決する幅広いオプションを提供します。

私の日常業務では、CSSレイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。

<section class="layout">
  <!-- The left sidebar where you can put your navigation items etc. -->
  <div class="sidebar">1</div>

  <!-- The main content of your website -->
  <div class="body">2</div>
</section>

<style>
.layout {
  width: 1366px;
  height: 768px;
  display: grid;
  /* This is the most important part where we define the size of our sidebar and body  */
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar {
  grid-area: sidebar;
}

.body {
  grid-area: body;
}
</style>

サイドバーオプションは次のようになります。

長所：

• CSS Layout Generatorを使用すると、6つの標準テンプレートから選択してより早く開始できます
• ほぼすべてのユースケースを解決するための多くのオプションがあります
• グリッドとFlexboxを切り替えることができます。これは、両方のオプションを比較するのに役立ちます
• インターフェースは素晴らしく、ユーザーフレンドリーです

短所：

• それは非常に多くのオプションを提供するので、CSSレイアウトジェネレータは初心者にとって混乱する可能性があります

3.グリッドLayoutIt

グリッドレイアウトこれはLeniolabsによって開発されたもので、多くのオプションを備えたもう1つのグリッドジェネレーターです。貢献に興味がある場合は、コードをGitHubで公開しています。

先週、顧客から、製品に関する重要なメトリックを表示するためのインターフェイスを設計するように依頼されました（Geckoboardに多少似ています）。彼が望んでいたレイアウトは非常に正確でしたが、LayoutItのおかげで、数秒でコードを生成できました。

<div class="container">
  <div class="metric-1"></div>
  <div class="metric-2"></div>
  <div class="metrics-3"></div>
  <div class="metric-4"></div>
  <div class="metric-5"></div>
  <div class="metric-6"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "metric-1 metric-1 metric-2"
    "metrics-3 metric-4 metric-2"
    "metric-5 metric-5 metric-6";
}
.metric-1 {
  grid-area: metric-1;
}
.metric-2 {
  grid-area: metric-2;
}
.metrics-3 {
  grid-area: metrics-3;
}
.metric-4 {
  grid-area: metric-4;
}
.metric-5 {
  grid-area: metric-5;
}
.metric-6 {
  grid-area: metric-6;
}
</style>

結果のレイアウトは次のようになります。

長所：

• グリッドレイアウト直感的に使用でき、多くのオプションを提供します
• ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
• レイアウトは、ワンクリックでCodePen、CodeSandbox、またはStackBlitzにエクスポートできます
• インターフェースは適切に設計されており、オプションとグリッドプレビューの間に適切なコントラストがあります。
• グリッドレイアウトグリッド配置オプションをサポート

短所：

• このジェネレーターは、時間を節約するためのテンプレートを提供していません。これが、リストの3番目に配置した主な理由です。

4.グリディ

私の過去の経験では、Griddyを使用して多くの時間を費やしました。Sarah Drasnerによって作成されたCSSグリッドよりも使いやすさは少し劣りますが、より多くのオプションが提供されます。

たとえば、次の3行の4列グリッドを簡単に生成できます。

.container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr 1fr;
  grid-template-rows: 2fr 100px 1fr;
  grid-column-gap: 10px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}

結果のレイアウトは次のようになります。

長所：

• ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
• 提供されているオプションは、ほとんどのユースケースを解決し、さまざまな配置をテストするのに十分です。一言で言えば、それは仕事を成し遂げます

短所：

• 好みの問題かもしれませんが、オプション付きのサイドバーは私にとって最適なインターフェイスではありません。探しているものを取得するには、しばらくスクロールする必要があります
• 選択できるテンプレートはありません
• minmax()機能はありません

5. Cssgr.id

Cssgr.idは、オプションが多すぎないが、ほとんどのユースケースを解決するのに十分なグリッドジェネレーターを探している場合のもう1つの優れた選択肢です。

ギャラリーテンプレートがあることを思い出したので、昨年Cssgr.idを使用してギャラリーを作成しました。数回クリックするだけで、必要なものに非常に近いものを得ることができました。

<div class="grid">
  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 1</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-3">Item 4</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 5</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 6</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 7</div>

  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 8</div>

  <!-- This item will take 2 columns and 3 rows -->
  <div class="span-col-2 span-row-2">Item 9</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 10</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 11</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 12</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 13</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 14</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

/* Items with this class will take 3 columns */
.span-col-3 {
  grid-column: span 3 / auto;
}

/* Items with this class will take 2 columns */
.span-col-2 {
  grid-column: span 2 / auto;
}

/* Items with this class will take 2 rows */
.span-row-2 {
  grid-row: span 2 / auto;
}

/* Items with this class will take 3 rows */
.span-row-3 {
  grid-row: span 3 / auto;
}
</style>

ギャラリーは次のようになりました。

長所：

• Cssgr.idには、5つの実用的なスターターレイアウト（3×3、サッカーフォーメーション、ヘッダー/フッター、ギャラリー、および一般的なWebサイト）から選択できます。
• プレースホルダーテキストを追加して、書かれたコンテンツでどのようにレンダリングされるかを確認できます
• 簡単に設定できる適切に設計されたインターフェイスを備えています

短所：

• ほとんどのオプションを備えたグリッドジェネレータではありません

6. AngryToolsCSSグリッド

Angry Tools CSSグリッドは、リストの最後のCSSグリッドジェネレーターです。このガイドで強調表示されている他のツールよりもユーザーフレンドリーではないかもしれませんが、便利な場合があります。

Angry Tools CSSグリッドは、ギャラリーを生成するときにも役立ちます。正方形をクリックすると、サイズと方向（水平または垂直）を定義できます。

<div class="angry-grid">
  <div id="item-0">Item 0</div>
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
  <div id="item-3">Item 3</div>
  <div id="item-4">Item 4</div>
  <div id="item-5">Item 5</div>
  <div id="item-6">Item 6</div>
  <div id="item-7">Item 7</div>
  <div id="item-8">Item 8</div>
  <div id="item-9">Item 9</div>
</div>

<style>
.angry-grid {
  display: grid;
  /* Our grid will be displayed using 3 rows */
  grid-template-rows: 1fr 1fr 1fr;
  /* Our grid will be displayed using 4 columns */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* You can define a gap between your columns and your rows if you need to */
  gap: 0px;
  height: 100%;
}

/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
  background-color: #8bf7ba;
  grid-row-start: 1;
  grid-column-start: 4;
  grid-row-end: 2;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
  background-color: #bf9aa7;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
  background-color: #c7656e;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
  background-color: #b659df;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
  background-color: #be6b5e;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
  background-color: #5bb9d7;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
  background-color: #56adba;
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 3;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
  background-color: #9cab58;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
  background-color: #8558ad;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 4;
}

/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
  background-color: #96b576;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}
</style>

結果のギャラリーは次のようになります。

長所：

• Angry Tools CSS Gridには、選択可能ないくつかのテンプレートが付属しています

短所：

• 全体的に最高のデザインではありません。正直なところ、それはかなり醜く、使いにくいことがあります
• 初心者にはお勧めしません。上級開発者は、おそらく代わりにCSSLayoutGeneratorまたはGridLayoutItのいずれかを選択する必要があります
• CSS出力を取得するにはスクロールする必要があります

ボーナス：CSSグリッドチートシート

CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。

😇それがあなたを助けることができるなら、これが私が自分のために作ったものです：

gap	行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap。column-gap
row-gap	グリッド行間のギャップを指定します
column-gap	列間のギャップを指定します
grid	grid-template-rowsの省略grid-template-columns形プロパティ：grid-template-areas、、、、、、grid-auto-rowsgrid-auto-columnsgrid-auto-flow
grid-area	グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです：grid-row-start、、、grid-column-startgrid-row-endgrid-column-end
grid-auto-columns	グリッドコンテナの列のサイズを設定します
grid-auto-flow	自動配置されたアイテムをグリッドに挿入する方法を制御します
grid-auto-rows	グリッドコンテナの行のサイズを設定します
grid-column	グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-column-start、grid-column-end
grid-column-end	アイテムがまたがる列の数、またはアイテムが終了する列行を定義します
grid-column-gap	グリッドレイアウトの列間のギャップのサイズを定義します
grid-column-start	アイテムが開始する列行を定義します
grid-gap	グリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gap、grid-column-gap
grid-row	グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-start、grid-row-end
grid-row-end	アイテムがまたがる行数、またはアイテムが終了する行行を定義します
grid-row-gap	グリッドレイアウトの行間のギャップのサイズを定義します
grid-row-start	アイテムが開始する行行を定義します
grid-template	次のプロパティの省略形プロパティ：grid-template-rows、、grid-template-columnsgrid-template-areas
grid-template-areas	グリッドレイアウト内の領域を指定します
grid-template-columns	グリッドレイアウトの列の数（および幅）を指定します
grid-template-rows	グリッドレイアウトの行の数（および高さ）を指定します

最高のCSSグリッドジェネレーターのこの簡単な比較が、お気に入りのジェネレーターをブックマークするのに役立つことを願っています。

また、CSSグリッドを扱うときに重要なアドバイスを提供できる場合は、時間をかけてください。これらのジェネレーターは、必要なレイアウトを段階的に取得し、複雑なソリューションに依存することを回避するのに役立つため、優れたオプションです。

読んでくれてありがとう！  

ソース：https ：//blog.logrocket.com/comparing-best-css-grid-generators/

#css 

Comparando Los Mejores Generadores De Grid CSS

Rejillas, rejillas, rejillas. Tantas cosas que podemos hacer con ellos. Pero, tantas propiedades que tenemos que recordar. 😅

Si eres como yo y siempre tienes que recurrir a Google cuando usas grillas, los trucos que veremos en esta guía te harán la vida mucho más fácil como desarrollador.

¿Qué son los generadores de grid CSS?

Un generador de cuadrículas es un sitio web que puede usar para generar una cuadrícula con unos pocos clics. Pero, ¿por qué deberías preocuparte por ellos? En mi caso, los uso con bastante frecuencia cuando quiero diseñar el diseño de mis sitios web o una estructura receptiva compleja dentro de una interfaz. Las cuadrículas son geniales porque te ayudan a lograr mucho con solo unas pocas líneas CSS, lo que ahorra mucho tiempo.

En este artículo, compararemos los siguientes generadores de grillas CSS y enumeraremos sus ventajas y desventajas para que pueda marcar su favorito:

• Generador de cuadrícula CSS
• Generador de diseño CSS
• Diseño de cuadrícula
• rejilla
• cssgr.id
• Cuadrícula CSS de Angry Tools

Además, para ahorrarle tiempo, hice una hoja de trucos con las propiedades esenciales de la cuadrícula CSS que debe recordar. 🥳 Esta hoja de trucos está disponible al final de este artículo.

1. Generador de cuadrícula CSS

Puse CSS Grid Generator primero en mi lista porque lo uso más. Es un proyecto de código abierto diseñado por Sarah Drasner (el código del proyecto está disponible aquí si quieres contribuir).

Para darte un ejemplo, hace poco necesitaba generar una cuadrícula simple con dos filas y tres columnas. No recordaba cómo establecer un tamaño específico para el espacio entre filas y entre columnas. Con CSS Grid Generator, pude crear fácilmente la estructura que deseaba y pasar a tareas más complejas.

.parent { pantalla: cuadrícula; cuadrícula-plantilla-columnas: repetir (3, 1fr); cuadrícula-plantilla-filas: repetir (2, 1fr); cuadrícula-columna-brecha: 60px; cuadrícula-fila-brecha: 30px; }

La cuadrícula final se veía así:

Ventajas:

• La interfaz es fácil de usar y los colores están bien elegidos, lo que convierte a CSS Grid Generator en una excelente herramienta para los principiantes que desean familiarizarse más con las cuadrículas CSS.
• CSS Grid Generator puede ayudarlo a obtener el resultado que desea para la mayoría de los casos de uso porque puede especificar la cantidad de columnas, filas y espacios en sus cuadrículas
• Simplemente presione un botón para obtener una vista previa del código y copiarlo en su portapapeles

Contras:

• No hay una plantilla que pueda elegir para ahorrarle tiempo
• No podrás generar diseños complicados

2. Generador de diseño CSS

Podría haber puesto el Generador de diseño CSS primero en la lista. Si está buscando generar cuadrículas complicadas todo el tiempo, esta es probablemente la que debería marcar. Desarrollado por Braid Design System , CSS Layout Generator ofrece una amplia gama de opciones que resolverán la mayoría de los dolores de cabeza.

En mi trabajo diario, uso mucho las plantillas CSS Layout Generator porque te permiten elegir convenientemente entre una estructura con una barra lateral/contenedor o un encabezado/principal/pie de página.

<section class="layout">
  <!-- The left sidebar where you can put your navigation items etc. -->
  <div class="sidebar">1</div>

  <!-- The main content of your website -->
  <div class="body">2</div>
</section>

<style>
.layout {
  width: 1366px;
  height: 768px;
  display: grid;
  /* This is the most important part where we define the size of our sidebar and body  */
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar {
  grid-area: sidebar;
}

.body {
  grid-area: body;
}
</style>

La opción de la barra lateral se ve así:

Ventajas:

• CSS Layout Generator le permite elegir entre seis plantillas estándar para comenzar más rápido
• Hay muchas opciones para resolver casi todos los casos de uso
• Puede cambiar entre cuadrículas y Flexbox, lo cual es útil para comparar ambas opciones
• La interfaz es excelente y fácil de usar.

Contras:

• Debido a que ofrece tantas opciones, CSS Layout Generator puede resultar confuso para un principiante.

3. Diseño de cuadrícula

Grid Layout fue desarrollado por Leniolabs y es otro generador de grillas que viene con muchas opciones. El código está disponible públicamente en GitHub si está interesado en contribuir .

La semana pasada, un cliente me pidió que diseñara una interfaz para mostrar métricas importantes sobre su producto (algo similar a Geckoboard ). El diseño que quería era muy preciso pero, gracias a LayoutIt, generé el código en unos segundos.

<div class="container">
  <div class="metric-1"></div>
  <div class="metric-2"></div>
  <div class="metrics-3"></div>
  <div class="metric-4"></div>
  <div class="metric-5"></div>
  <div class="metric-6"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "metric-1 metric-1 metric-2"
    "metrics-3 metric-4 metric-2"
    "metric-5 metric-5 metric-6";
}
.metric-1 {
  grid-area: metric-1;
}
.metric-2 {
  grid-area: metric-2;
}
.metrics-3 {
  grid-area: metrics-3;
}
.metric-4 {
  grid-area: metric-4;
}
.metric-5 {
  grid-area: metric-5;
}
.metric-6 {
  grid-area: metric-6;
}
</style>

El diseño resultante se veía así:

Ventajas:

• Grid Layout Es intuitivo de usar y ofrece muchas opciones
• Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
• Sus diseños se pueden exportar a CodePen, CodeSandbox o StackBlitz con un solo clic
• La interfaz está bien diseñada, con un contraste adecuado entre las opciones y la vista previa de la cuadrícula.
• Diseño de cuadrícula Admite opciones de ubicación de cuadrícula

Contras:

• Este generador no proporciona plantillas para ahorrarle tiempo, que es la razón principal por la que lo puse tercero en la lista.

4. cuadrícula

En mi experiencia pasada, pasé mucho tiempo usando Griddy . Es un poco menos fácil de usar que la cuadrícula CSS creada por Sarah Drasner, pero ofrece más opciones.

Por ejemplo, le permite generar fácilmente una cuadrícula de cuatro columnas con tres filas:

.container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr 1fr;
  grid-template-rows: 2fr 100px 1fr;
  grid-column-gap: 10px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}

El diseño resultante se ve así:

Ventajas:

• Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
• Las opciones proporcionadas son suficientes para resolver la mayoría de los casos de uso y probar diferentes alineaciones. En pocas palabras, hace el trabajo

Contras:

• Puede que sea una cuestión de gustos, pero la barra lateral con las opciones no es la mejor interfaz para mí. Tienes que desplazarte un rato para conseguir lo que buscas
• No hay plantillas para elegir
• no hay minmax()funcion

5. Cssgr.id

Cssgr.id es otra excelente opción si está buscando un generador de cuadrícula que no tenga demasiadas opciones pero sí las suficientes para resolver la mayoría de los casos de uso.

Usé Cssgr.id el año pasado para crear una galería porque recordé que tenía una plantilla de galería. Con unos pocos clics, pude obtener algo bastante parecido a lo que necesitaba.

<div class="grid">
  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 1</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-3">Item 4</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 5</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 6</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 7</div>

  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 8</div>

  <!-- This item will take 2 columns and 3 rows -->
  <div class="span-col-2 span-row-2">Item 9</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 10</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 11</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 12</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 13</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 14</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

/* Items with this class will take 3 columns */
.span-col-3 {
  grid-column: span 3 / auto;
}

/* Items with this class will take 2 columns */
.span-col-2 {
  grid-column: span 2 / auto;
}

/* Items with this class will take 2 rows */
.span-row-2 {
  grid-row: span 2 / auto;
}

/* Items with this class will take 3 rows */
.span-row-3 {
  grid-row: span 3 / auto;
}
</style>

La galería quedó así:

Ventajas:

• Cssgr.id viene con cinco diseños de inicio prácticos para elegir (3 × 3, formación de fútbol, ​​encabezado/pie de página, galería y sitio web genérico)
• Puede agregar texto de marcador de posición para ver cómo se representa con algún contenido escrito
• Tiene una interfaz bien diseñada que se puede configurar fácilmente.

Contras:

• No es el generador de grillas con más opciones

6. Cuadrícula CSS de Angry Tools

Angry Tools CSS Grid es el último generador de cuadrículas CSS de nuestra lista. Puede ser útil, aunque probablemente menos fácil de usar que las otras herramientas destacadas en esta guía.

Angry Tools CSS Grid también es útil para generar galerías. Al hacer clic en los cuadrados, puede definir sus tamaños y sus direcciones (horizontal o verticalmente).

<div class="angry-grid">
  <div id="item-0">Item 0</div>
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
  <div id="item-3">Item 3</div>
  <div id="item-4">Item 4</div>
  <div id="item-5">Item 5</div>
  <div id="item-6">Item 6</div>
  <div id="item-7">Item 7</div>
  <div id="item-8">Item 8</div>
  <div id="item-9">Item 9</div>
</div>

<style>
.angry-grid {
  display: grid;
  /* Our grid will be displayed using 3 rows */
  grid-template-rows: 1fr 1fr 1fr;
  /* Our grid will be displayed using 4 columns */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* You can define a gap between your columns and your rows if you need to */
  gap: 0px;
  height: 100%;
}

/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
  background-color: #8bf7ba;
  grid-row-start: 1;
  grid-column-start: 4;
  grid-row-end: 2;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
  background-color: #bf9aa7;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
  background-color: #c7656e;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
  background-color: #b659df;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
  background-color: #be6b5e;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
  background-color: #5bb9d7;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
  background-color: #56adba;
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 3;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
  background-color: #9cab58;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
  background-color: #8558ad;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 4;
}

/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
  background-color: #96b576;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}
</style>

La galería resultante se ve así:

Ventajas:

• Angry Tools CSS Grid viene con algunas plantillas entre las que puede elegir

Contras:

• No tiene el mejor diseño en general. Para ser honesto, es bastante feo y puede ser difícil de usar.
• No recomendaría esta herramienta para principiantes. Los desarrolladores avanzados probablemente también deberían elegir CSS Layout Generator o Grid LayoutIt en su lugar
• Tienes que desplazarte para obtener los resultados de CSS

BONIFICACIÓN: hoja de trucos de cuadrícula CSS

Los generadores de cuadrículas CSS son excelentes cuando no está familiarizado con las propiedades CSS. Pero, a medida que se convierte en un desarrollador más avanzado, es posible que una hoja de trucos rápidos sea probablemente más útil.

😇 Si te puede ayudar, aquí está el que he hecho para mí:

gap	Establece el tamaño del espacio entre las filas y las columnas. Es una forma abreviada de las siguientes propiedades: row-gapycolumn-gap
row-gap	Especifica el espacio entre las filas de la cuadrícula.
column-gap	Especifica el espacio entre las columnas.
grid	Una propiedad abreviada para: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns,grid-auto-flow
grid-area	Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start, grid-column-start, grid-row-end,grid-column-end
grid-auto-columns	Establece el tamaño de las columnas en un contenedor de cuadrícula.
grid-auto-flow	Controla cómo se insertan en la cuadrícula los elementos colocados automáticamente
grid-auto-rows	Establece el tamaño de las filas en un contenedor de cuadrícula
grid-column	Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-column-start,grid-column-end
grid-column-end	Define cuántas columnas abarcará un elemento o en qué línea de columna terminará el elemento
grid-column-gap	Define el tamaño del espacio entre las columnas en un diseño de cuadrícula
grid-column-start	Define en qué línea de columna comenzará el elemento
grid-gap	Define el tamaño del espacio entre filas y columnas en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-gap,grid-column-gap
grid-row	Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start,grid-row-end
grid-row-end	Define cuántas filas abarcará un elemento o en qué línea de fila terminará el elemento
grid-row-gap	Define el tamaño del espacio entre las filas en un diseño de cuadrícula
grid-row-start	Define en qué línea de fila comenzará el artículo
grid-template	Una propiedad abreviada para las siguientes propiedades: grid-template-rows, grid-template-columns,grid-template-areas
grid-template-areas	Especifica áreas dentro del diseño de cuadrícula.
grid-template-columns	Especifica el número (y el ancho) de las columnas en un diseño de cuadrícula
grid-template-rows	Especifica el número (y las alturas) de las filas en un diseño de cuadrícula

Espero que esta comparación rápida de los mejores generadores de grillas CSS te haya ayudado a marcar tu favorito.

Además, si puedo darte un consejo crítico cuando trabajes con grillas CSS: tómate tu tiempo. Estos generadores son una excelente opción porque pueden ayudarlo a obtener los diseños que necesita paso a paso y evitar depender de una solución complicada.

¡Gracias por leer!  

Fuente: https://blog.logrocket.com/comparing-best-css-grid-generators/

#css 

Face Recognition with OpenCV and Python

Introduction

What is face recognition? Or what is recognition? When you look at an apple fruit, your mind immediately tells you that this is an apple fruit. This process, your mind telling you that this is an apple fruit is recognition in simple words. So what is face recognition then? I am sure you have guessed it right. When you look at your friend walking down the street or a picture of him, you recognize that he is your friend Paulo. Interestingly when you look at your friend or a picture of him you look at his face first before looking at anything else. Ever wondered why you do that? This is so that you can recognize him by looking at his face. Well, this is you doing face recognition.

But the real question is how does face recognition works? It is quite simple and intuitive. Take a real life example, when you meet someone first time in your life you don't recognize him, right? While he talks or shakes hands with you, you look at his face, eyes, nose, mouth, color and overall look. This is your mind learning or training for the face recognition of that person by gathering face data. Then he tells you that his name is Paulo. At this point your mind knows that the face data it just learned belongs to Paulo. Now your mind is trained and ready to do face recognition on Paulo's face. Next time when you will see Paulo or his face in a picture you will immediately recognize him. This is how face recognition work. The more you will meet Paulo, the more data your mind will collect about Paulo and especially his face and the better you will become at recognizing him.

Now the next question is how to code face recognition with OpenCV, after all this is the only reason why you are reading this article, right? OK then. You might say that our mind can do these things easily but to actually code them into a computer is difficult? Don't worry, it is not. Thanks to OpenCV, coding face recognition is as easier as it feels. The coding steps for face recognition are same as we discussed it in real life example above.

• Training Data Gathering: Gather face data (face images in this case) of the persons you want to recognize
• Training of Recognizer: Feed that face data (and respective names of each face) to the face recognizer so that it can learn.
• Recognition: Feed new faces of the persons and see if the face recognizer you just trained recognizes them.

OpenCV comes equipped with built in face recognizer, all you have to do is feed it the face data. It's that simple and this how it will look once we are done coding it.

OpenCV Face Recognizers

OpenCV has three built in face recognizers and thanks to OpenCV's clean coding, you can use any of them by just changing a single line of code. Below are the names of those face recognizers and their OpenCV calls.

1. EigenFaces Face Recognizer Recognizer - cv2.face.createEigenFaceRecognizer()
2. FisherFaces Face Recognizer Recognizer - cv2.face.createFisherFaceRecognizer()
3. Local Binary Patterns Histograms (LBPH) Face Recognizer - cv2.face.createLBPHFaceRecognizer()

We have got three face recognizers but do you know which one to use and when? Or which one is better? I guess not. So why not go through a brief summary of each, what you say? I am assuming you said yes :) So let's dive into the theory of each.

EigenFaces Face Recognizer

This algorithm considers the fact that not all parts of a face are equally important and equally useful. When you look at some one you recognize him/her by his distinct features like eyes, nose, cheeks, forehead and how they vary with respect to each other. So you are actually focusing on the areas of maximum change (mathematically speaking, this change is variance) of the face. For example, from eyes to nose there is a significant change and same is the case from nose to mouth. When you look at multiple faces you compare them by looking at these parts of the faces because these parts are the most useful and important components of a face. Important because they catch the maximum change among faces, change the helps you differentiate one face from the other. This is exactly how EigenFaces face recognizer works.

EigenFaces face recognizer looks at all the training images of all the persons as a whole and try to extract the components which are important and useful (the components that catch the maximum variance/change) and discards the rest of the components. This way it not only extracts the important components from the training data but also saves memory by discarding the less important components. These important components it extracts are called principal components. Below is an image showing the principal components extracted from a list of faces.

Principal Components source

You can see that principal components actually represent faces and these faces are called eigen faces and hence the name of the algorithm.

So this is how EigenFaces face recognizer trains itself (by extracting principal components). Remember, it also keeps a record of which principal component belongs to which person. One thing to note in above image is that Eigenfaces algorithm also considers illumination as an important component.

Later during recognition, when you feed a new image to the algorithm, it repeats the same process on that image as well. It extracts the principal component from that new image and compares that component with the list of components it stored during training and finds the component with the best match and returns the person label associated with that best match component.

Easy peasy, right? Next one is easier than this one.

FisherFaces Face Recognizer

This algorithm is an improved version of EigenFaces face recognizer. Eigenfaces face recognizer looks at all the training faces of all the persons at once and finds principal components from all of them combined. By capturing principal components from all the of them combined you are not focusing on the features that discriminate one person from the other but the features that represent all the persons in the training data as a whole.

This approach has drawbacks, for example, images with sharp changes (like light changes which is not a useful feature at all) may dominate the rest of the images and you may end up with features that are from external source like light and are not useful for discrimination at all. In the end, your principal components will represent light changes and not the actual face features.

Fisherfaces algorithm, instead of extracting useful features that represent all the faces of all the persons, it extracts useful features that discriminate one person from the others. This way features of one person do not dominate over the others and you have the features that discriminate one person from the others.

Below is an image of features extracted using Fisherfaces algorithm.

Fisher Faces source

You can see that features extracted actually represent faces and these faces are called fisher faces and hence the name of the algorithm.

One thing to note here is that even in Fisherfaces algorithm if multiple persons have images with sharp changes due to external sources like light they will dominate over other features and affect recognition accuracy.

Getting bored with this theory? Don't worry, only one face recognizer is left and then we will dive deep into the coding part.

Local Binary Patterns Histograms (LBPH) Face Recognizer

I wrote a detailed explaination on Local Binary Patterns Histograms in my previous article on face detection using local binary patterns histograms. So here I will just give a brief overview of how it works.

We know that Eigenfaces and Fisherfaces are both affected by light and in real life we can't guarantee perfect light conditions. LBPH face recognizer is an improvement to overcome this drawback.

Idea is to not look at the image as a whole instead find the local features of an image. LBPH alogrithm try to find the local structure of an image and it does that by comparing each pixel with its neighboring pixels.

Take a 3x3 window and move it one image, at each move (each local part of an image), compare the pixel at the center with its neighbor pixels. The neighbors with intensity value less than or equal to center pixel are denoted by 1 and others by 0. Then you read these 0/1 values under 3x3 window in a clockwise order and you will have a binary pattern like 11100011 and this pattern is local to some area of the image. You do this on whole image and you will have a list of local binary patterns.

LBP Labeling

Now you get why this algorithm has Local Binary Patterns in its name? Because you get a list of local binary patterns. Now you may be wondering, what about the histogram part of the LBPH? Well after you get a list of local binary patterns, you convert each binary pattern into a decimal number (as shown in above image) and then you make a histogram of all of those values. A sample histogram looks like this.

Sample Histogram

I guess this answers the question about histogram part. So in the end you will have one histogram for each face image in the training data set. That means if there were 100 images in training data set then LBPH will extract 100 histograms after training and store them for later recognition. Remember, algorithm also keeps track of which histogram belongs to which person.

Later during recognition, when you will feed a new image to the recognizer for recognition it will generate a histogram for that new image, compare that histogram with the histograms it already has, find the best match histogram and return the person label associated with that best match histogram. 

Below is a list of faces and their respective local binary patterns images. You can see that the LBP images are not affected by changes in light conditions.

LBP Faces source

The theory part is over and now comes the coding part! Ready to dive into coding? Let's get into it then.

Coding Face Recognition with OpenCV

The Face Recognition process in this tutorial is divided into three steps.

1. Prepare training data: In this step we will read training images for each person/subject along with their labels, detect faces from each image and assign each detected face an integer label of the person it belongs to.
2. Train Face Recognizer: In this step we will train OpenCV's LBPH face recognizer by feeding it the data we prepared in step 1.
3. Testing: In this step we will pass some test images to face recognizer and see if it predicts them correctly.

[There should be a visualization diagram for above steps here]

To detect faces, I will use the code from my previous article on face detection. So if you have not read it, I encourage you to do so to understand how face detection works and its Python coding.

Import Required Modules

Before starting the actual coding we need to import the required modules for coding. So let's import them first.

• cv2: is OpenCV module for Python which we will use for face detection and face recognition.
• os: We will use this Python module to read our training directories and file names.
• numpy: We will use this module to convert Python lists to numpy arrays as OpenCV face recognizers accept numpy arrays.

#import OpenCV module
import cv2
#import os module for reading training data directories and paths
import os
#import numpy to convert python lists to numpy arrays as 
#it is needed by OpenCV face recognizers
import numpy as np

#matplotlib for display our images
import matplotlib.pyplot as plt
%matplotlib inline 

Training Data

The more images used in training the better. Normally a lot of images are used for training a face recognizer so that it can learn different looks of the same person, for example with glasses, without glasses, laughing, sad, happy, crying, with beard, without beard etc. To keep our tutorial simple we are going to use only 12 images for each person.

So our training data consists of total 2 persons with 12 images of each person. All training data is inside training-data folder. training-data folder contains one folder for each person and each folder is named with format sLabel (e.g. s1, s2) where label is actually the integer label assigned to that person. For example folder named s1 means that this folder contains images for person 1. The directory structure tree for training data is as follows:

training-data
|-------------- s1
|               |-- 1.jpg
|               |-- ...
|               |-- 12.jpg
|-------------- s2
|               |-- 1.jpg
|               |-- ...
|               |-- 12.jpg

The test-data folder contains images that we will use to test our face recognizer after it has been successfully trained.

As OpenCV face recognizer accepts labels as integers so we need to define a mapping between integer labels and persons actual names so below I am defining a mapping of persons integer labels and their respective names.

Note: As we have not assigned label 0 to any person so the mapping for label 0 is empty.

#there is no label 0 in our training data so subject name for index/label 0 is empty
subjects = ["", "Tom Cruise", "Shahrukh Khan"]

Prepare training data

You may be wondering why data preparation, right? Well, OpenCV face recognizer accepts data in a specific format. It accepts two vectors, one vector is of faces of all the persons and the second vector is of integer labels for each face so that when processing a face the face recognizer knows which person that particular face belongs too.

For example, if we had 2 persons and 2 images for each person.

PERSON-1    PERSON-2   

img1        img1         
img2        img2

Then the prepare data step will produce following face and label vectors.

FACES                        LABELS

person1_img1_face              1
person1_img2_face              1
person2_img1_face              2
person2_img2_face              2

Preparing data step can be further divided into following sub-steps.

1. Read all the folder names of subjects/persons provided in training data folder. So for example, in this tutorial we have folder names: s1, s2.
2. For each subject, extract label number. Do you remember that our folders have a special naming convention? Folder names follow the format sLabel where Label is an integer representing the label we have assigned to that subject. So for example, folder name s1 means that the subject has label 1, s2 means subject label is 2 and so on. The label extracted in this step is assigned to each face detected in the next step.
3. Read all the images of the subject, detect face from each image.
4. Add each face to faces vector with corresponding subject label (extracted in above step) added to labels vector.

[There should be a visualization for above steps here]

Did you read my last article on face detection? No? Then you better do so right now because to detect faces, I am going to use the code from my previous article on face detection. So if you have not read it, I encourage you to do so to understand how face detection works and its coding. Below is the same code.

#function to detect face using OpenCV
def detect_face(img):
    #convert the test image to gray image as opencv face detector expects gray images
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    
    #load OpenCV face detector, I am using LBP which is fast
    #there is also a more accurate but slow Haar classifier
    face_cascade = cv2.CascadeClassifier('opencv-files/lbpcascade_frontalface.xml')

    #let's detect multiscale (some images may be closer to camera than others) images
    #result is a list of faces
    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.2, minNeighbors=5);
    
    #if no faces are detected then return original img
    if (len(faces) == 0):
        return None, None
    
    #under the assumption that there will be only one face,
    #extract the face area
    (x, y, w, h) = faces[0]
    
    #return only the face part of the image
    return gray[y:y+w, x:x+h], faces[0]

I am using OpenCV's LBP face detector. On line 4, I convert the image to grayscale because most operations in OpenCV are performed in gray scale, then on line 8 I load LBP face detector using cv2.CascadeClassifier class. After that on line 12 I use cv2.CascadeClassifier class' detectMultiScale method to detect all the faces in the image. on line 20, from detected faces I only pick the first face because in one image there will be only one face (under the assumption that there will be only one prominent face). As faces returned by detectMultiScale method are actually rectangles (x, y, width, height) and not actual faces images so we have to extract face image area from the main image. So on line 23 I extract face area from gray image and return both the face image area and face rectangle.

Now you have got a face detector and you know the 4 steps to prepare the data, so are you ready to code the prepare data step? Yes? So let's do it.

#this function will read all persons' training images, detect face from each image
#and will return two lists of exactly same size, one list 
# of faces and another list of labels for each face
def prepare_training_data(data_folder_path):
    
    #------STEP-1--------
    #get the directories (one directory for each subject) in data folder
    dirs = os.listdir(data_folder_path)
    
    #list to hold all subject faces
    faces = []
    #list to hold labels for all subjects
    labels = []
    
    #let's go through each directory and read images within it
    for dir_name in dirs:
        
        #our subject directories start with letter 's' so
        #ignore any non-relevant directories if any
        if not dir_name.startswith("s"):
            continue;
            
        #------STEP-2--------
        #extract label number of subject from dir_name
        #format of dir name = slabel
        #, so removing letter 's' from dir_name will give us label
        label = int(dir_name.replace("s", ""))
        
        #build path of directory containin images for current subject subject
        #sample subject_dir_path = "training-data/s1"
        subject_dir_path = data_folder_path + "/" + dir_name
        
        #get the images names that are inside the given subject directory
        subject_images_names = os.listdir(subject_dir_path)
        
        #------STEP-3--------
        #go through each image name, read image, 
        #detect face and add face to list of faces
        for image_name in subject_images_names:
            
            #ignore system files like .DS_Store
            if image_name.startswith("."):
                continue;
            
            #build image path
            #sample image path = training-data/s1/1.pgm
            image_path = subject_dir_path + "/" + image_name

            #read image
            image = cv2.imread(image_path)
            
            #display an image window to show the image 
            cv2.imshow("Training on image...", image)
            cv2.waitKey(100)
            
            #detect face
            face, rect = detect_face(image)
            
            #------STEP-4--------
            #for the purpose of this tutorial
            #we will ignore faces that are not detected
            if face is not None:
                #add face to list of faces
                faces.append(face)
                #add label for this face
                labels.append(label)
            
    cv2.destroyAllWindows()
    cv2.waitKey(1)
    cv2.destroyAllWindows()
    
    return faces, labels

I have defined a function that takes the path, where training subjects' folders are stored, as parameter. This function follows the same 4 prepare data substeps mentioned above.

(step-1) On line 8 I am using os.listdir method to read names of all folders stored on path passed to function as parameter. On line 10-13 I am defining labels and faces vectors.

(step-2) After that I traverse through all subjects' folder names and from each subject's folder name on line 27 I am extracting the label information. As folder names follow the sLabel naming convention so removing the letter s from folder name will give us the label assigned to that subject.

(step-3) On line 34, I read all the images names of of the current subject being traversed and on line 39-66 I traverse those images one by one. On line 53-54 I am using OpenCV's imshow(window_title, image) along with OpenCV's waitKey(interval) method to display the current image being traveresed. The waitKey(interval) method pauses the code flow for the given interval (milliseconds), I am using it with 100ms interval so that we can view the image window for 100ms. On line 57, I detect face from the current image being traversed.

(step-4) On line 62-66, I add the detected face and label to their respective vectors.

But a function can't do anything unless we call it on some data that it has to prepare, right? Don't worry, I have got data of two beautiful and famous celebrities. I am sure you will recognize them!

Let's call this function on images of these beautiful celebrities to prepare data for training of our Face Recognizer. Below is a simple code to do that.

#let's first prepare our training data
#data will be in two lists of same size
#one list will contain all the faces
#and other list will contain respective labels for each face
print("Preparing data...")
faces, labels = prepare_training_data("training-data")
print("Data prepared")

#print total faces and labels
print("Total faces: ", len(faces))
print("Total labels: ", len(labels))

Preparing data...
Data prepared
Total faces:  23
Total labels:  23

This was probably the boring part, right? Don't worry, the fun stuff is coming up next. It's time to train our own face recognizer so that once trained it can recognize new faces of the persons it was trained on. Read? Ok then let's train our face recognizer.

Train Face Recognizer

As we know, OpenCV comes equipped with three face recognizers.

1. EigenFace Recognizer: This can be created with cv2.face.createEigenFaceRecognizer()
2. FisherFace Recognizer: This can be created with cv2.face.createFisherFaceRecognizer()
3. Local Binary Patterns Histogram (LBPH): This can be created with cv2.face.LBPHFisherFaceRecognizer()

I am going to use LBPH face recognizer but you can use any face recognizer of your choice. No matter which of the OpenCV's face recognizer you use the code will remain the same. You just have to change one line, the face recognizer initialization line given below.

#create our LBPH face recognizer 
face_recognizer = cv2.face.createLBPHFaceRecognizer()

#or use EigenFaceRecognizer by replacing above line with 
#face_recognizer = cv2.face.createEigenFaceRecognizer()

#or use FisherFaceRecognizer by replacing above line with 
#face_recognizer = cv2.face.createFisherFaceRecognizer()

Now that we have initialized our face recognizer and we also have prepared our training data, it's time to train the face recognizer. We will do that by calling the train(faces-vector, labels-vector) method of face recognizer.

#train our face recognizer of our training faces
face_recognizer.train(faces, np.array(labels))

Did you notice that instead of passing labels vector directly to face recognizer I am first converting it to numpy array? This is because OpenCV expects labels vector to be a numpy array.

Still not satisfied? Want to see some action? Next step is the real action, I promise!

Prediction

Now comes my favorite part, the prediction part. This is where we actually get to see if our algorithm is actually recognizing our trained subjects's faces or not. We will take two test images of our celeberities, detect faces from each of them and then pass those faces to our trained face recognizer to see if it recognizes them.

Below are some utility functions that we will use for drawing bounding box (rectangle) around face and putting celeberity name near the face bounding box.

#function to draw rectangle on image 
#according to given (x, y) coordinates and 
#given width and heigh
def draw_rectangle(img, rect):
    (x, y, w, h) = rect
    cv2.rectangle(img, (x, y), (x+w, y+h), (0, 255, 0), 2)
    
#function to draw text on give image starting from
#passed (x, y) coordinates. 
def draw_text(img, text, x, y):
    cv2.putText(img, text, (x, y), cv2.FONT_HERSHEY_PLAIN, 1.5, (0, 255, 0), 2)

First function draw_rectangle draws a rectangle on image based on passed rectangle coordinates. It uses OpenCV's built in function cv2.rectangle(img, topLeftPoint, bottomRightPoint, rgbColor, lineWidth) to draw rectangle. We will use it to draw a rectangle around the face detected in test image.

Second function draw_text uses OpenCV's built in function cv2.putText(img, text, startPoint, font, fontSize, rgbColor, lineWidth) to draw text on image.

Now that we have the drawing functions, we just need to call the face recognizer's predict(face) method to test our face recognizer on test images. Following function does the prediction for us.

#this function recognizes the person in image passed
#and draws a rectangle around detected face with name of the 
#subject
def predict(test_img):
    #make a copy of the image as we don't want to chang original image
    img = test_img.copy()
    #detect face from the image
    face, rect = detect_face(img)

    #predict the image using our face recognizer 
    label= face_recognizer.predict(face)
    #get name of respective label returned by face recognizer
    label_text = subjects[label]
    
    #draw a rectangle around face detected
    draw_rectangle(img, rect)
    #draw name of predicted person
    draw_text(img, label_text, rect[0], rect[1]-5)
    
    return img

• line-6 read the test image
• line-7 detect face from test image
• line-11 recognize the face by calling face recognizer's predict(face) method. This method will return a lable
• line-12 get the name associated with the label
• line-16 draw rectangle around the detected face
• line-18 draw name of predicted subject above face rectangle

Now that we have the prediction function well defined, next step is to actually call this function on our test images and display those test images to see if our face recognizer correctly recognized them. So let's do it. This is what we have been waiting for.

print("Predicting images...")

#load test images
test_img1 = cv2.imread("test-data/test1.jpg")
test_img2 = cv2.imread("test-data/test2.jpg")

#perform a prediction
predicted_img1 = predict(test_img1)
predicted_img2 = predict(test_img2)
print("Prediction complete")

#create a figure of 2 plots (one for each test image)
f, (ax1, ax2) = plt.subplots(1, 2, figsize=(10, 5))

#display test image1 result
ax1.imshow(cv2.cvtColor(predicted_img1, cv2.COLOR_BGR2RGB))

#display test image2 result
ax2.imshow(cv2.cvtColor(predicted_img2, cv2.COLOR_BGR2RGB))

#display both images
cv2.imshow("Tom cruise test", predicted_img1)
cv2.imshow("Shahrukh Khan test", predicted_img2)
cv2.waitKey(0)
cv2.destroyAllWindows()
cv2.waitKey(1)
cv2.destroyAllWindows()

Predicting images...
Prediction complete

wohooo! Is'nt it beautiful? Indeed, it is!

End Notes

Face Recognition is a fascinating idea to work on and OpenCV has made it extremely simple and easy for us to code it. It just takes a few lines of code to have a fully working face recognition application and we can switch between all three face recognizers with a single line of code change. It's that simple.

Although EigenFaces, FisherFaces and LBPH face recognizers are good but there are even better ways to perform face recognition like using Histogram of Oriented Gradients (HOGs) and Neural Networks. So the more advanced face recognition algorithms are now a days implemented using a combination of OpenCV and Machine learning. I have plans to write some articles on those more advanced methods as well, so stay tuned!

Download Details:
Author: informramiz
Source Code: https://github.com/informramiz/opencv-face-recognition-python
License: MIT License

#opencv  #python #facerecognition 

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli