Merge pull request #204 from phuoc-ng/check-browser-support

Add Check Browsers Support

Author: phuocng

README.md

@@ -64,12 +64,52 @@ Be my friend on
 
 You might be interested in my products:
 
-| Product                                               | Description                                                       |
-|-------------------------------------------------------|-------------------------------------------------------------------|
-| 01. [1 LOC](https://1loc.dev)                         | Favorite JavaScript utilities in single line of code              |
-| 02. [Blur Page](https://blur.page)                    | A browser extension to hide sensitive information on a web page   |
-| 03. [CSS Layout](https://csslayout.io)                | A collection of popular layouts and patterns made with CSS        |
-| 04. [Fake Numbers](https://fakenumbers.io)            | Generate fake and valid numbers                                   |
-| 05. [Form Validation](https://formvalidation.io)      | The best validation library for JavaScript                        |
-| 06. [HTML DOM](https://htmldom.dev)                   | How to manage HTML DOM with vanilla JavaScript                    |
-| 07. [React PDF Viewer](https://react-pdf-viewer.dev)  | A React component to view a PDF document                          |
+<table>
+    <tbody>
+        <tr valign="top">
+            <td width="25%" align="center">
+                <h3>1 LOC (3.3k★)</h3>
+                <a href="https://1loc.dev">Favorite JavaScript utilities in single line of code</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>Blur Page</h3>
+                <a href="https://blur.page">A browser extension to hide sensitive information on a web page</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>Check Browsers Support</h3>
+                <a href="https://checkbrowsers.support">A browser extension to check browser compatibility without leaving your tab</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>CSS Layout (2.7k★)</h3>
+                <a href="https://csslayout.io">A collection of popular layouts and patterns made with CSS</a>
+            </td>
+        </tr>
+        <tr valign="top">
+            <td width="25%" align="center">
+                <h3>Fake Numbers</h3>
+                <a href="https://fakenumbers.io">Generate fake and valid numbers</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>Form Validation</h3>
+                <a href="https://formvalidation.io">The best validation library for JavaScript</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>HTML DOM (3.1k★)</h3>
+                <a href="https://htmldom.dev">How to manage HTML DOM with vanilla JavaScript</a>
+            </td>
+            <td width="25%" align="center">
+                <h3>React PDF Viewer</h3>
+                <a href="https://react-pdf-viewer.dev">A React component to view a PDF document</a>
+            </td>
+        </tr>
+        <tr valign="top">
+            <td width="25%" align="center">
+                <h3>this VS that</h3>
+                <a href="https://thisthat.dev">The differences between ___ and ___ in the front-end development</a>
+            </td>
+            <td width="25%" align="center"></td>
+            <td width="25%" align="center"></td>
+            <td width="25%" align="center"></td>
+        </tr>
+    </tbody>
+</table>

client/pages/Footer.tsx

@@ -35,6 +35,17 @@ const Footer: React.FC<{}> = () => {
                                 <span className='text-gray-600'>a browser extension to hide sensitive element on page</span>
                             </a>
                         </li>
+                        <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
+                            <a
+                                href="https://checkbrowsers.support"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                                title="Check Browsers Support - a browser extension to check browser compatibility without leaving your tab"
+                            >
+                                <div className='font-semibold'>Check Browsers Support</div>
+                                <span className='text-gray-600'>a browser extension to check browser compatibility without leaving your tab</span>
+                            </a>
+                        </li>
                         <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
                             <a
                                 href="https://csslayout.io"
@@ -90,6 +101,17 @@ const Footer: React.FC<{}> = () => {
                                 <span className='text-gray-600'>a PDF viewer made for React</span>
                             </a>
                         </li>
+                        <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
+                            <a
+                                href="https://thisthat.dev"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                                title="this VS that - the differences between ___ and ___ in the front-end development"
+                            >
+                                <div className='font-semibold'>this VS that</div>
+                                <span className='text-gray-600'>the differences between ___ and ___ in the front-end development</span>
+                            </a>
+                        </li>
                     </ul>
                 </div>