MikroTik Lab Configuration on VMware Workstation | Windows 10 | Zonat Solutions

<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="362" src="https://www.youtube.com/embed/asJI4b74q5w" width="483" youtube-src-id="asJI4b74q5w"></iframe></div><br />

MikroTik Lab Configuration on VMware Workstation | Windows 10 | Zonat Solutions

View Complete »

Mikrotik Key Features : PPPoE, IP Addressing, DNS, DHCP, Firewall and More | Zonat Solutions

<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="359" src="https://www.youtube.com/embed/Xnz-ChMGa9I" width="480" youtube-src-id="Xnz-ChMGa9I"></iframe></div><br /><div><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><br /></p></div>

Mikrotik Key Features : PPPoE, IP Addressing, DNS, DHCP, Firewall and More | Zonat Solutions

View Complete »

MikroTik Basic configuration step by step | Zonat Solutions

<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="365" src="https://www.youtube.com/embed/ZdG0Kv0Tyrk" width="481" youtube-src-id="ZdG0Kv0Tyrk"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 0px 0px 1.25em; white-space-collapse: preserve;"><br /></p>

MikroTik Basic configuration step by step | Zonat Solutions

View Complete »

How to Install Mikrotik on PC x86 / Server or VM | MikroTik Series | Zonat Solutions

<div><br /></div><div><br /></div><div><br /></div><div><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="364" src="https://www.youtube.com/embed/_X-ggkr_RMQ" width="480" youtube-src-id="_X-ggkr_RMQ"></iframe></div><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(227, 227, 227); box-sizing: border-box; color: #0d0d0d; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px; white-space-collapse: preserve;"><br /></p>

How to Install Mikrotik on PC x86 / Server or VM | MikroTik Series | Zonat Solutions

View Complete »

How to structure the Back-end Node JS Application

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhwvv9ZLaria7OSAQ8Zz-2YxKXJzWTxz4VFYOzPNJg6-HFguYQEI9XZKKV-tiDab4zWBFPRkgDrmc6Bmjg28VTETTA6KjPvfcvFHZEc4et5FsSfFlDBwF314uirqvEcwHYe2-712kbmMIT4novDijuYRoEm7JUzNqsLx-Xqy6IwtpwCH92YzFFEUQSVRw=s600" style="display: block; margin-left: auto; margin-right: auto; padding: 1em 0px; text-align: center;"><img alt="Organise NodeJs Application" border="0" data-original-height="400" data-original-width="600" height="267" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEhwvv9ZLaria7OSAQ8Zz-2YxKXJzWTxz4VFYOzPNJg6-HFguYQEI9XZKKV-tiDab4zWBFPRkgDrmc6Bmjg28VTETTA6KjPvfcvFHZEc4et5FsSfFlDBwF314uirqvEcwHYe2-712kbmMIT4novDijuYRoEm7JUzNqsLx-Xqy6IwtpwCH92YzFFEUQSVRw=w400-h267-rw" title="How to organise and structure the backend application" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><br /><div>Organizing the file structure of the application is one of the major tasks in development. If the application is well structured, it is easy to read and maintain. let's explore the folder structure and the files of the folder contained within them<div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEibFcZYCHX-mnVARhiL-hGnb2adMY_UBOSzBtJmW7IpjxVI80XkMfLCTHtL1gv16p4Rz5Nr9rPeHfjluDoWsFCTZx1PzlhLuLJl3_9Y0G_lzzqfKuI4bz0Mqd5anWdEMoc36t9YcDH1BGdLoDjRHVEp2DfW-9AiD7aClkX8AqGzlMuQVFu1kqAJTU_bCQ=s559" style="margin-left: 1em; margin-right: 1em;"><img alt="Folder structure" border="0" data-original-height="559" data-original-width="551" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEibFcZYCHX-mnVARhiL-hGnb2adMY_UBOSzBtJmW7IpjxVI80XkMfLCTHtL1gv16p4Rz5Nr9rPeHfjluDoWsFCTZx1PzlhLuLJl3_9Y0G_lzzqfKuI4bz0Mqd5anWdEMoc36t9YcDH1BGdLoDjRHVEp2DfW-9AiD7aClkX8AqGzlMuQVFu1kqAJTU_bCQ=w315-h320-rw" title="Folder structure in Node.Js Application" width="315" /></a></div><br /><div><br /></div><h2 style="text-align: left;">Config</h2></div><div>Config folder contains the configuration of your server and the database connections. It contains methods to connect with the DB and set up the database. e.g. </div><div><br /></div><div><span>    </span><br /></div><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8" style="background-color: #0d1117; border-collapse: collapse; border-spacing: 0px; color: #c9d1d9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; tab-size: 8;"><tbody style="box-sizing: border-box;"><tr style="background-color: transparent; box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="LC4" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"><span class="pl-k" color="var(--color-prettylights-syntax-keyword)" style="box-sizing: border-box;">try</span><span class="pl-kos" style="box-sizing: border-box;">{</span></td></tr><tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="5" id="L5" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC5" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-k" color="var(--color-prettylights-syntax-keyword)" style="box-sizing: border-box;">const</span> <span class="pl-s1" style="box-sizing: border-box;">conn</span> <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">=</span> <span class="pl-k" color="var(--color-prettylights-syntax-keyword)" style="box-sizing: border-box;">await</span> <span class="pl-s1" style="box-sizing: border-box;">mongoose</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-en" color="var(--color-prettylights-syntax-entity)" style="box-sizing: border-box;">connect</span><span class="pl-kos" style="box-sizing: border-box;">(</span><span class="pl-s1" style="box-sizing: border-box;">mongoDb</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">Database</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">host</span><span class="pl-kos" style="box-sizing: border-box;">,</span><span class="pl-kos" style="box-sizing: border-box;">{</span></td></tr><tr style="background-color: transparent; box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="6" id="L6" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC6" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">useNewUrlParsers</span>: <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">true</span><span class="pl-kos" style="box-sizing: border-box;">,</span></td></tr><tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="7" id="L7" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC7" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">useCreateIndex</span>: <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">true</span><span class="pl-kos" style="box-sizing: border-box;">,</span></td></tr><tr style="background-color: transparent; box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="8" id="L8" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC8" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">useFindAndModify</span>: <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">false</span><span class="pl-kos" style="box-sizing: border-box;">,</span></td></tr><tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="9" id="L9" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC9" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">useUnifiedTopology</span>: <span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">true</span><span class="pl-kos" style="box-sizing: border-box;">,</span></td></tr><tr style="background-color: transparent; box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="10" id="L10" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC10" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-kos" style="box-sizing: border-box;">}</span><span class="pl-kos" style="box-sizing: border-box;">)</span><span class="pl-kos" style="box-sizing: border-box;">;</span></td></tr><tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="11" id="L11" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC11" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"> <span class="pl-smi" color="var(--color-prettylights-syntax-storage-modifier-import)" style="box-sizing: border-box;">console</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-en" color="var(--color-prettylights-syntax-entity)" style="box-sizing: border-box;">log</span><span class="pl-kos" style="box-sizing: border-box;">(</span><span class="pl-s" color="var(--color-prettylights-syntax-string)" style="box-sizing: border-box;">"connection to db established"</span><span class="pl-kos" style="box-sizing: border-box;">,</span><span class="pl-s1" style="box-sizing: border-box;">conn</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">connection</span><span class="pl-kos" style="box-sizing: border-box;">.</span><span class="pl-c1" color="var(--color-prettylights-syntax-constant)" style="box-sizing: border-box;">host</span><span class="pl-kos" style="box-sizing: border-box;">)</span><span class="pl-kos" style="box-sizing: border-box;">;</span></td></tr><tr style="background-color: transparent; box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="12" id="L12" style="box-sizing: border-box; color: var(--color-fg-subtle); cursor: pointer; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC12" style="box-sizing: border-box; color: var(--color-fg-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 20px; overflow-wrap: normal; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre;"><span class="pl-kos" style="box-sizing: border-box;">}</span></td></tr></tbody></table><br /><div>This try method will try to connect to a MongoDB instance along with the defined parameters.</div><div><br /></div><h2 style="text-align: left;">Constants</h2><div>As the name suggests, this folder contains all the constants of the node application, e.g. Database name, hosting address, and other global consts.</div><div><br /></div><h2 style="text-align: left;">Controllers</h2><div><span>    </span><br /></div><div>The controller contains all the controller files of the project. It contains the functions which will perform all the CRUD (Create, Read, Update, Delete) operations for the API. This file also contains authentication controllers which will perform the sign-up and sign-in functionalities.</div><div><br /></div><h2 style="text-align: left;">Model</h2><div>The model contains all the models for the database. It contains the schema for the database.</div><div><br /></div><h2 style="text-align: left;">Utils</h2><div><br /></div><div>This folder contains extra services and utility classes for the APi.for example this file could contain an Error.js file which will perform the functionality of the specific error based on the type of error.</div><div><br /></div><h2 style="text-align: left;">Routes</h2><div>This folder will contain all the routes of the application which will be accessed in the API. e.g. it could contain an authentication router that will call the authentication controller whenever the authentication router is accessed.</div><div><br /></div><h2 style="text-align: left;">Conclusion</h2><div>This is the basic structure that a node application needs to have in it. The application structure allows the management of the code easily when the app starts to scale. so arranging the node app according to folder structure must be a practice that every developer needs to follow</div><div><br /></div><div><br /></div>

How to structure the Back-end Node JS Application

Organizing the file structure of the application is one of the major tasks in development. If the application is well structured, it is easy...

View Complete »

how to use sprite image in your code

<p></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjtcnG7yYjr__mfgp-7zPjhDHBFJ1duG8NvxIFWT8YZ4sNOYMW0Y2mqg86cCqDVagwHYBWt19bJ7sZ79GKOqmk6xicJpN3LmbH__0PBVtofswfT5NE7BECMtJ_FSV4QSgMqKMvDgfppe9Df0UbCRep77YemgJPmj8nzFN8pnFJXZMfQR-1fvtGnY36S4A=s600" style="margin-left: auto; margin-right: auto;"><img alt="using sprite image in website" border="0" data-original-height="400" data-original-width="600" height="266" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEjtcnG7yYjr__mfgp-7zPjhDHBFJ1duG8NvxIFWT8YZ4sNOYMW0Y2mqg86cCqDVagwHYBWt19bJ7sZ79GKOqmk6xicJpN3LmbH__0PBVtofswfT5NE7BECMtJ_FSV4QSgMqKMvDgfppe9Df0UbCRep77YemgJPmj8nzFN8pnFJXZMfQR-1fvtGnY36S4A=w400-h266-rw" title="how to use sprite image in website" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><p></p><h1 style="text-align: left;">Sprite image</h1><div><span>    </span></div><div><span><span>    </span><span>    </span>Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because the website won't need to request each icon as it can load the image with a single request.</span><br /></div><div><span><br /></span></div><h2 style="text-align: left;"><span>How to use sprite images:</span></h2><div><span><span>    </span></span></div><div><span><span><span>    </span><span>    </span>The basic idea behind the sprite usage is to load the image using CSS and set the position of the image relative to the icon's position. e.g. if an image is 200 * 800 size with each icon being 200* 200 in size. Then the image would have 4 icons. we can use the first icon by using the span icon's background property and setting the background position to 0 0 coordinates along with its width and height to be 200 * 200.</span><br /></span></div><h4 style="text-align: center;"><span><span><u>Example</u>  </span></span></h4><div><span><span><b>HTML</b></span></span></div><div><span><span><b><br /></b></span></span></div><div><span><span><span><span>    <span class="twitter-icon" ></span></span>    </span><br /></span></span></div><div><span><span><span><br /></span></span></span></div><div><span><b>CSS</b></span></div><div><span><b><br /></b></span></div><div><span>.twitter-icon : {</span></div><div><span>background-image: url(" path of image");</span></div><div>width:200px;</div><div>height:200px;</div><div>background-position: 0px 0xp;</div><div><span>}</span></div><div><span>    <br /></span></div>We can then load the next icon by setting the background position: 0 200px which will show the next icon. <p></p><p>P.S. The best way to set icons properly is using DOM CSS and manipulating them according to your requirements and then setting those values as actual values. </p>

how to use sprite image in your code

Sprite image                Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because...

View Complete »

how to create Sprite image online

<p style="text-align: left;"> </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhqkZMIWkmXj2LFjzlHuytkyGQdgdNKiEo7_sVw2pibH287WWVmTmjhFA2G8MhXbh93Gl-5HSfpPkY4xB9_smbDje_CXRneDxC3pzCyq3ax79zuzpcFj4XgwBKXB5GXnWcpfJctHtQL1ogftpv_TPCfS3hVWIMB7x0ZrFhkViA-YF6LGctM1_I9PKx4bw=s600" style="margin-left: auto; margin-right: auto;"><img alt="How to create sprite image with SVG Icons" border="0" data-original-height="400" data-original-width="600" height="213" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEhqkZMIWkmXj2LFjzlHuytkyGQdgdNKiEo7_sVw2pibH287WWVmTmjhFA2G8MhXbh93Gl-5HSfpPkY4xB9_smbDje_CXRneDxC3pzCyq3ax79zuzpcFj4XgwBKXB5GXnWcpfJctHtQL1ogftpv_TPCfS3hVWIMB7x0ZrFhkViA-YF6LGctM1_I9PKx4bw=w320-h213-rw" title="Sprite image" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Creating A sprite image online</td></tr></tbody></table><p></p><h2 style="text-align: center;">How to create a sprite image</h2><h3 style="text-align: left;">what is a Sprite image:</h3><div><span>    <span>    </span></span></div><div><span><span>    </span><span>    </span><span>    </span>Sprite images are two-dimensional or one-dimensional multiple images combined together to form a single image. These are created by combining a number of small images together to form a big image. Sprite images can be created in one dimension(vertical or horizontal) or two-dimension depending on the number of images.</span><br /></div><div><span><br /></span></div><div class="separator" style="clear: both; text-align: center;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgcb-pUsiXNbwDbMRNDawk1hjZQSoergMMEzaOj8yAoEXQ_73LMialikaz1uyVy4mmINALV7A2Rgiq29lla3SY3RWREXU06BxAAOGbFobo7FaooiSmZ06JSECBcMMG5hJ2BAzBWB31ZM-m8K6i0TB7UXrymVtIleARCTHlFi9J5E6TBMhX43IRs3rNOXQ=s400" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="100" data-original-width="400" height="80" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEgcb-pUsiXNbwDbMRNDawk1hjZQSoergMMEzaOj8yAoEXQ_73LMialikaz1uyVy4mmINALV7A2Rgiq29lla3SY3RWREXU06BxAAOGbFobo7FaooiSmZ06JSECBcMMG5hJ2BAzBWB31ZM-m8K6i0TB7UXrymVtIleARCTHlFi9J5E6TBMhX43IRs3rNOXQ=w320-h80-rw" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Horizontal Sprite Image</td></tr></tbody></table><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEggJ2-xsosKVl6yymxGnIF2bhdkvQQNK7tTJNlTG1EX3CXUYUbvalKfA_H9Lh_695VWTzs4EvGnfxfF9SLSt6QfYPquUBaLctO3V79wEVXMxBJ-2rHV975RqfEn4WudZ6Z3rEFrPhkYcOLWj7_YAWD0IUatPb8AbllEHkUvs5EPzEOSvnfWe7ROiC8Yow=s800" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="800" data-original-width="200" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEggJ2-xsosKVl6yymxGnIF2bhdkvQQNK7tTJNlTG1EX3CXUYUbvalKfA_H9Lh_695VWTzs4EvGnfxfF9SLSt6QfYPquUBaLctO3V79wEVXMxBJ-2rHV975RqfEn4WudZ6Z3rEFrPhkYcOLWj7_YAWD0IUatPb8AbllEHkUvs5EPzEOSvnfWe7ROiC8Yow=w80-h320-rw" width="80" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Vertical Sprite Image</td></tr></tbody></table><br /><br /><br /><br /><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjNQ-fc5Kf9Fn1MVcFSS1mqBB1RmDOK_d9KzYHjN2b2kE6KeTDtDFG92feZ-dWkATCoEZddJemyoQFqCGmUp8Hy4bDx0YlkoLm2t8HWCCxKBdsJp3bPD7c-HOsqCgiVR8dcesSuyCiRJvtjuSQiJoAX-gSjiN0Be5GzNzOn1nynNm3gzbSOiMOb3IztKw=s200" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="200" data-original-width="200" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEjNQ-fc5Kf9Fn1MVcFSS1mqBB1RmDOK_d9KzYHjN2b2kE6KeTDtDFG92feZ-dWkATCoEZddJemyoQFqCGmUp8Hy4bDx0YlkoLm2t8HWCCxKBdsJp3bPD7c-HOsqCgiVR8dcesSuyCiRJvtjuSQiJoAX-gSjiN0Be5GzNzOn1nynNm3gzbSOiMOb3IztKw=w200-h200-rw" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Two dimensional sprite image</td></tr></tbody></table><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><h3 style="text-align: left;">WHY Sprite image :</h3><div><span>    </span><span>    </span></div><div><span><span>    </span><span>    </span>Now a days, Almost all the websites includes icons and images. These images are loaded by making HTTP request to the server. If a website contains many different images and icons, it will cause to many http request which is not good for website. Creating a sprite image solves the problem as it is a single image consisiting of all the images.</span><br /></div><div><br /></div><div>Websites like Blogger, in the content writing section, we hhave a handfull of tools loike bolding the texting, making it italic, adding images to the blog etc. These all icons can be used in a single image for Optimization of website. </div><div> include an example like blogger or StackOverflow icon bar can be made using sprite image</div><h3 style="text-align: center;"><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></h3><h3 style="text-align: center;">Usefull Links</h3><div><br /></div><h4 style="text-align: left;">Icons :</h4><div><span><br /></span></div><div><span>    You can get any kind of icons and images from the given link and create your own sprite image</span></div><div><span><br /></span></div><div style="text-align: center;"><span><i>                   <u><a href="https://github.com/bradtraversy/design-resources-for-developers#icon-fonts">https://github.com/bradtraversy/design-resources-for-developers#icon-fonts</a></u></i></span></div><h4 style="text-align: left;">Online tool</h4><div><span>    This tool can be used to avoid any installations for using the editing tool.</span><br /></div><h4 style="text-align: left;"><i style="text-align: center;"><u><br /></u></i></h4><div style="text-align: left;"><i style="text-align: center;"><span style="font-weight: normal;">                                                <span>    </span><u><a href=" https://www.photopea.com/" target="_blank">https://www.photopea.com/</a></u></span></i></div><div><br /></div><h3 style="text-align: left;">Create a sprite image</h3><div><span>    </span><span>    </span></div><div><span>    </span><span>    </span>Open the online tool and In the top navigation menu, go to File > New and set the dimensions for the sprite image.  e.g. if we wanted to create a vertical,we would set the width to 100px and height to 400px.</div><div><br /></div><div>Now import the images by going to file and importing the images. Scale each image to 100px width and 100px height. which makes 4 images in this sprite images. Arrange the images and saved the image so it can be used within the website. </div><div><br /></div><div><b><br /></b></div><div><b>NOTE : Use svg small images for using the sprite image which can be scaled up or down according to requirements.</b></div><div><b><br /></b></div><div><br /></div><div>Now you can use this image inside your website. </div><div><br /></div><div>Happy coding :) </div><div><br /></div><h2 style="text-align: left;"><br /></h2><p></p>

how to create Sprite image online

  Creating A sprite image online How to create a sprite image what is a Sprite image:                         Sprite images are two-dimensio...

View Complete »

How to install Jss in vue3

<p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_n1ZMsAPrNT7WPHqOXMW6etQbI72IYjUoinAjV4ZgJianPe0kkSljMfVg_xu1E3L3fXs-tcItJpe9goj31c4vj3dH227Q7rMRfEADjM_bAP5l9AuwrguL-Ysl0M1sQs1WbMYfRPCGvfCt/s600/JSS+in+VueJS.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="how to style vue components with jss" border="0" data-original-height="400" data-original-width="600" height="266" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_n1ZMsAPrNT7WPHqOXMW6etQbI72IYjUoinAjV4ZgJianPe0kkSljMfVg_xu1E3L3fXs-tcItJpe9goj31c4vj3dH227Q7rMRfEADjM_bAP5l9AuwrguL-Ysl0M1sQs1WbMYfRPCGvfCt/w400-h266-rw/JSS+in+VueJS.png" title="JSS in VueJS" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Style your vue.JS components with jSS ( a modern styling toolkit)</td></tr></tbody></table></p><h1 style="text-align: left;">Styling in Vue</h1><div><span>    Vue can be styled with simple CSS, sass, less, and even jss. In order to use jss in vue. you need to add the following dependencies to your project.</span><br /></div><div><span><br /></span></div><div><span>NOTE: This tutorial assumes you have a basic knowledge of vue and how to style vue components using different styling techniques</span></div><div><br /></div><ul style="text-align: left;"><li>npm install vue-jss</li><li>npm install jss</li><li>npm install jss-preset-default</li></ul><div>After installing the dependencies. you should be able to use jss in your Vue applications.</div><div><br /></div><div>let's see the working example and how to use jss. we will be using typescript extension for files but it can also be used with javascript files.</div><p></p><p></p><h2 style="text-align: left;"><span style="font-family: arial;">Example</span></h2>let's change the hello world components which come with the default Vue application using CLI . <p></p><p>I will change <b>helloworld.vue</b> file into :</p><p></p><ol style="text-align: left;"><li>helloworld.vue ( template)</li><li>helloworld.style.ts ( style)</li><li> helloworld.ts ( functionality)</li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_mK-HnK0w93hu1Bpo3Eu4jl4O8Tim_6925lAdDGNxVrJaziQx2cUCGEHg71ZKkFKYOJaODjWmpg7CfwJp3ecQW06xPBoTCc4EPXNCWFpJTP4F65Aa8A0Eac6m51rVWHUaF055hbdS0MU/s1158/Screenshot+from+2021-09-25+18-17-00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="802" data-original-width="1158" height="278" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_mK-HnK0w93hu1Bpo3Eu4jl4O8Tim_6925lAdDGNxVrJaziQx2cUCGEHg71ZKkFKYOJaODjWmpg7CfwJp3ecQW06xPBoTCc4EPXNCWFpJTP4F65Aa8A0Eac6m51rVWHUaF055hbdS0MU/w400-h278-rw/Screenshot+from+2021-09-25+18-17-00.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div>I am showing the pictures so you get the basic idea of how to use jss in vue<p></p><p><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0rBUsB3FJv-uEs5h00TV__VqH3x3IXIEvHkwst7O2_tcPNR7lUGkTnlSWtmij9fLbd13Ak4IeSTXSAippraBOscQzKktOKTPOdfa9wxxIOzQSzu2EqcxdmHn6UPf4zk_7Yur5l7xhvZ8/s838/Screenshot+from+2021-09-25+18-33-16.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="351" data-original-width="838" height="134" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0rBUsB3FJv-uEs5h00TV__VqH3x3IXIEvHkwst7O2_tcPNR7lUGkTnlSWtmij9fLbd13Ak4IeSTXSAippraBOscQzKktOKTPOdfa9wxxIOzQSzu2EqcxdmHn6UPf4zk_7Yur5l7xhvZ8/s320-rw/Screenshot+from+2021-09-25+18-33-16.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">helloworld.style.ts</td></tr></tbody></table><br /></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsT295FNqfKcVcyGHOUCw9UMrlcwI4lMww3SHWDRqTl2Yz8bWVbXHQjPWL1_yT1H-le8vfctphyphenhyphenf2Yx-lot11X02k-w09IqITpNx7VmzdM9dQcmczMMWPK-2qvZuBdzlceTMA0zIGvDik/s823/Screenshot+from+2021-09-25+18-34-13.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="476" data-original-width="823" height="185" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsT295FNqfKcVcyGHOUCw9UMrlcwI4lMww3SHWDRqTl2Yz8bWVbXHQjPWL1_yT1H-le8vfctphyphenhyphenf2Yx-lot11X02k-w09IqITpNx7VmzdM9dQcmczMMWPK-2qvZuBdzlceTMA0zIGvDik/s320-rw/Screenshot+from+2021-09-25+18-34-13.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">helloworld.ts</td></tr></tbody></table><span>    </span><span>    </span><div><p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9oxDl9eTvQ5IKYeJQ-DHEVecw1lVOQ1z-i34O-cLlhODd-0tyMINMGaTE6BWTwSTy2dth-lIFFIETP-Hyo3xwKtzM_fBjakrktcFQ_FaTtSdsdPnRUi3QcsBD58Bn3r5_7qKbKfobKjc/s982/Screenshot+from+2021-09-25+18-34-58.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="243" data-original-width="982" height="79" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9oxDl9eTvQ5IKYeJQ-DHEVecw1lVOQ1z-i34O-cLlhODd-0tyMINMGaTE6BWTwSTy2dth-lIFFIETP-Hyo3xwKtzM_fBjakrktcFQ_FaTtSdsdPnRUi3QcsBD58Bn3r5_7qKbKfobKjc/s320-rw/Screenshot+from+2021-09-25+18-34-58.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">helloworld.vue</td></tr></tbody></table><span>    </span><span>    </span><span>    </span><br /></p><div><br /></div><p></p>thanks for reading :)</div>

How to install Jss in vue3

Style your vue.JS components with jSS ( a modern styling toolkit) Styling in Vue     Vue can be styled with simple CSS, sass, less, and even...

View Complete »

How to Install Visual Studio Code in your PC

<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuA5YfE0BjdNxwxGPBn36r-PtB_6foQJbeIEHlmzjs5SaxE4xcKsSjQ0dGkfWLGGhXxm0UOnDWdnkJ9SaLhAjq2Rn7eQd2U7yDjgnZbN6DWJ014bpNC7lLcmknlZSkdu6cZlB6g1_ce6i/s600/yo.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Visual Studio Code installation guide" border="0" data-original-height="400" data-original-width="600" height="426" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuA5YfE0BjdNxwxGPBn36r-PtB_6foQJbeIEHlmzjs5SaxE4xcKsSjQ0dGkfWLGGhXxm0UOnDWdnkJ9SaLhAjq2Rn7eQd2U7yDjgnZbN6DWJ014bpNC7lLcmknlZSkdu6cZlB6g1_ce6i/w640-h426-rw/yo.png" title="Visual Studio Code installation guide" width="640" /></a></div><br /><p></p><p><br /></p><h1 style="text-align: left;">Why vs code?</h1><div><span>    Vs code has so many downloads because of its popularity in the dev community. Vs code has many extensions for beginners to generate boilerplate code for their choice of language. It can also be integrated with GitHub in order to commit the code and generate PRs(Pull & Push Request ) for the code. Docker containers can also be integrated inside them. It also has its own helping tools and features.</span><br /></div><div><span><br /></span></div><h1 style="text-align: left;"><span>Installation :</span></h1><div><span><span>    for Windows, Linux as well as mac users. the download link is given below. just download the software and follow along to get going,</span><br /></span></div><div><span><span><br /></span></span></div><div style="text-align: center;"><span><span><a href="https://code.visualstudio.com/" target="_blank">VS CODE</a></span></span></div><div style="text-align: left;"><span><br /></span></div><h3 style="text-align: left;">For Windows users :</h3><div style="text-align: left;">for windows users, the installation step includes just downloading the software and double-clicking it to install the software.The installation process can be completed by simply hitting next & next and it will install VS Code in your windows mahine.</div><h3 style="text-align: left;">For Linux users :</h3><div style="text-align: left;">for Linux users. download the software from the link given above go to your downloaded directory where vs code has been downloaded. open the terminal in the folder by right-clicking on the screen and clicking open with the <br />terminal just like shown below</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzW1gZUE2Tee_TduuBoqjScK86X3Z7MNucpLGChlBuI8Wg8r1luJh9SMoK1Hl9C1ARaaKB_qOcK0e8ZiE0gB1IEQwwwjFXca4P9UAYUwRrTjYiJ4fiENvY39dj6XJPqRHWCM8CKCP4pQN/s1920/Screenshot+from+2021-08-02+10-41-09.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzW1gZUE2Tee_TduuBoqjScK86X3Z7MNucpLGChlBuI8Wg8r1luJh9SMoK1Hl9C1ARaaKB_qOcK0e8ZiE0gB1IEQwwwjFXca4P9UAYUwRrTjYiJ4fiENvY39dj6XJPqRHWCM8CKCP4pQN/w640-h360-rw/Screenshot+from+2021-08-02+10-41-09.png" width="640" /></a></div></div><div><span><br /></span></div><div style="text-align: left;">Type the below command and hit enter. The terminal will start installing the VS Code in your Linux OS.</div><h4 style="text-align: left;"><span>command : Sudo apt install ./</span>code_1.58.2-1626302803_amd64.deb</h4><h3 style="text-align: left;">For Mac users : </h3><div><span><span>    download the mac zip file of vs code from the above-given link. when the file is completely downloaded, double click on the file to unzip it. it will extract all the files. Click on the vs code application file to start installing the vs code.</span> </span></div><div><span><br /></span></div><div><span><br /></span></div><div><span> </span><br /></div>

How to Install Visual Studio Code in your PC

  Why vs code?     Vs code has so many downloads because of its popularity in the dev community. Vs code has many extensions for beginners t...

View Complete »

How to setup babel module resolver in React with typescript ( Working Example )

<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLuTVL3wfI343MeUM1cL21Ouynqj8Z12Bz9niJPv74DqYRMPYiAwKHkPyHq31gD68W77FqN7Ih54oInwNpHYeW_BR1bCSgq3BMSHyEcd8m7WIPZJO2fQKbHYmkb8PndvNSO00GWbFbox9/s600/Craco+Configuration.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img alt="React Craco configuration" border="0" data-original-height="400" data-original-width="600" height="426" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLuTVL3wfI343MeUM1cL21Ouynqj8Z12Bz9niJPv74DqYRMPYiAwKHkPyHq31gD68W77FqN7Ih54oInwNpHYeW_BR1bCSgq3BMSHyEcd8m7WIPZJO2fQKbHYmkb8PndvNSO00GWbFbox9/w640-h426-rw/Craco+Configuration.png" title="Craco Configuration in React" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><h1 style="text-align: center;"><span style="font-size: x-small;"><span> </span>Craco Configuration</span></h1><h2 style="text-align: left;"><span style="font-size: x-small;">Craco :</span></h2><p style="text-align: left;"><span style="font-size: x-small;">    Craco stands for creating react app configuration override. It's a tool for configuring the create react app tool and overriding the default configuration. it can be used to configure eslint as well as babel. we will be using it for configuration to avoid messy imports e.ge.</span></p><p style="text-align: left;"><span style="font-size: x-small;"><span>    </span><span>    </span><span>    </span><span>    </span><span>    <b>import {anycomponent} from '../../../components/anycomponent/anycomponent.js"</b></span><br /></span></p><p style="text-align: left;"><span><span style="font-size: x-small;">we will be converting this import into something like : </span></span></p><p style="text-align: left;"><span style="font-size: x-small;"><span><span><span>    </span><span>    </span><span>    </span><span>    </span></span></span><b>import {anycomponent} from '@components/anycomponent".</b></span></p><p style="text-align: left;"><span style="font-size: x-small;">so lets get started.</span></p><h2 style="text-align: left;"><span style="font-size: x-small;">Configuration :</span></h2><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;">    we will be creating a new react app with a typescript template for this purpose in order to end up with a complete and running code. you will also find the link to the Github repo at the end of this tutorial.</span></div><div><span style="font-size: x-small;"><br /></span></div><h2 style="text-align: left;"><span style="font-size: large;">Step 1: </span></h2><div><span style="font-size: x-small;">    </span></div><div><span style="font-size: x-small;"><span>    Create a simple react app by using npx or yarn. I will be using yarn for this purpose. The command for creating a new project using yarn is :</span><br /></span></div><div><span style="font-size: x-small;"><span>    </span><br /></span></div><div><span style="font-size: x-small;"><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></span></span><b>yarn create react-app craco-configuration --template typescript</b></span></div><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;"><b>NOTE: </b>you should have already installed<b> yarn </b>in order to run this command.</span></div><div><span style="font-size: x-small;"><span>    </span><br /></span></div><h2 style="text-align: left;"><span><span style="font-size: large;">Step 2: </span></span></h2><div><span style="font-size: x-small;">    </span></div><div><span style="font-size: x-small;"><span>    Now you would have a complete project up and running with a basic configuration of typescript.</span><br /></span></div><div><span style="font-size: x-small;">The project will look something like this</span></div><div><span style="font-size: x-small;"><br /><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkASXKPrYA3vp90Ote6tde6U32om6uHhjpOBDhWNlVHqVjKncs5QiywAxvSDaPlD6l3wYoXmgBvMl9cM5uMCBS69w8f_J7PdagbZiUulCC-wz8_q1A-uiCPLrIgwASkJGo8IWS7ay5gil2/s1920/Screenshot+from+2021-07-29+14-22-59.png" style="margin-left: 1em; margin-right: 1em;"><img alt="VS-Code for craco configuration" border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkASXKPrYA3vp90Ote6tde6U32om6uHhjpOBDhWNlVHqVjKncs5QiywAxvSDaPlD6l3wYoXmgBvMl9cM5uMCBS69w8f_J7PdagbZiUulCC-wz8_q1A-uiCPLrIgwASkJGo8IWS7ay5gil2/w640-h360-rw/Screenshot+from+2021-07-29+14-22-59.png" title="VS-Code with Typescript React project" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>open the src folder and create a new folder called <i style="font-weight: bold;">components </i>and create two new folders inside <b>components</b> called <b>ComponentA</b> and <b>ComponentB</b>. Inside <b>componentB </b>create a new folder called <b>SubComponentB</b>.create the necessary boilerplate react code for <b>ComponentA</b> and <b>ComponentB </b>as well as for <b>SubComponentB</b>.  the files will look something like this.</span></span></div><div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglotI4wXoBQgnsJnFy5EChKowOW5XCzZi2qWyPpeRVxS8OImKz5ea7F2o5Dt6dWONAyLW5wXwfVx61vKrKNerf52Ob-67O6Mi7YuX4yXZoqEiuMDywtUI8-VRmA7ROM3FmrISIhlCMuFJw/s1920/Screenshot+from+2021-07-30+14-56-02.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglotI4wXoBQgnsJnFy5EChKowOW5XCzZi2qWyPpeRVxS8OImKz5ea7F2o5Dt6dWONAyLW5wXwfVx61vKrKNerf52Ob-67O6Mi7YuX4yXZoqEiuMDywtUI8-VRmA7ROM3FmrISIhlCMuFJw/w640-h360-rw/Screenshot+from+2021-07-30+14-56-02.png" width="640" /></span></a></div><div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZuN2Gy1bbMcEdgLWbD8yqT5TrZ4R_vnoHos2KBLmMDm2v_VZbwLq-HkEM6m3rP84TK5S9JxhP-0mKB4-l8fVr9mwpXEWEeGUKkrPEMut9zcpc3ipNJYj1exoOYL97XmOheKKfiYCHcByW/s1920/Screenshot+from+2021-07-30+14-56-04.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZuN2Gy1bbMcEdgLWbD8yqT5TrZ4R_vnoHos2KBLmMDm2v_VZbwLq-HkEM6m3rP84TK5S9JxhP-0mKB4-l8fVr9mwpXEWEeGUKkrPEMut9zcpc3ipNJYj1exoOYL97XmOheKKfiYCHcByW/w640-h360-rw/Screenshot+from+2021-07-30+14-56-04.png" width="640" /></span></a></div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yZHqOS1Y4CKIENu50iVLXtKevYIqTdVI4YdZDzIssy_8bpsh-lKt5VSMyDXEuc9h7aW6e7Ef-esXotsfHwUzcayTfKrnlx1wlo7TBsc0KiSW4y4ZC0NOw3BmgCxCeun3q7xXaUrLs69s/s1920/Screenshot+from+2021-07-30+14-56-06.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yZHqOS1Y4CKIENu50iVLXtKevYIqTdVI4YdZDzIssy_8bpsh-lKt5VSMyDXEuc9h7aW6e7Ef-esXotsfHwUzcayTfKrnlx1wlo7TBsc0KiSW4y4ZC0NOw3BmgCxCeun3q7xXaUrLs69s/w640-h360-rw/Screenshot+from+2021-07-30+14-56-06.png" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><p></p><div><span style="font-size: x-small;">now if we want to import <b>ComponetA</b> inside <b>SubComponentB</b>,<b> </b>the import will look something like this.</span></div><div><span style="font-size: x-small;"><br /></span></div><div style="text-align: center;"><span><span style="font-size: x-small;">   import {componentA} from '../../componentA/componentA';</span></span></div><div style="text-align: center;"><span><span style="font-size: x-small;"><br /></span></span></div><div style="text-align: left;"><span style="font-size: x-small;">now we move on to the next step of adding babel module resolver in order to get rid of this.</span></div><div style="text-align: left;"><span style="font-size: x-small;"><br /></span></div><h2 style="text-align: left;"><b><span style="font-size: large;">Step 3 : </span></b></h2><div><span style="font-size: x-small;"><span style="font-weight: bold;">    </span><b>    </b>create a folder in the root folder of a project called config and create a file called craco.config.js inside the config folder and add the following configuration file.<br /></span></div><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;"><br /></span></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Courier New", "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; line-height: 27px; white-space: pre;"><div><span style="font-size: x-small;"><span style="color: #66d9ef; font-style: italic;">module</span>.<span style="color: #66d9ef; font-style: italic;">exports</span> <span style="color: #f92672;">=</span> {</span></div><div><span style="font-size: x-small;"> babel: {</span></div><div><span style="font-size: x-small;"> presets: [<span style="color: #e6db74;">"@babel/preset-react"</span>, <span style="color: #e6db74;">"@babel/preset-typescript"</span>],</span></div><div><span style="font-size: x-small;"> plugins: [</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-object-rest-spread"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-transform-spread"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-export-default-from"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-decorators"</span>, { legacy: <span style="color: #ae81ff;">true</span> }],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-class-properties"</span>, { loose: <span style="color: #ae81ff;">true</span> }],</span></div><div><span style="font-size: x-small;"> [</span></div><div><span style="font-size: x-small;"> <span style="color: #e6db74;">"module-resolver"</span>,</span></div><div><span style="font-size: x-small;"> {</span></div><div><span style="font-size: x-small;"> alias: {</span></div><div><span style="font-size: x-small;"> <span style="color: #e6db74;">"~"</span>: <span style="color: #e6db74;">"./src"</span>,</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> ],</span></div><div><span style="font-size: x-small;"> ],</span></div><div><span style="font-size: x-small;"> <span style="color: #a6e22e;">loaderOptions</span>: (<span style="color: #fd971f; font-style: italic;">babelLoaderOptions</span>) <span style="color: #66d9ef; font-style: italic;">=></span> <span style="color: #fd971f; font-style: italic;">babelLoaderOptions</span>,</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> jest: {</span></div><div><span style="font-size: x-small;"> configure: { coverageProvider: <span style="color: #e6db74;">"v8"</span> },</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> webpack: {</span></div><div><span style="font-size: x-small;"> loaders: [{ test:<span style="color: #e6db74;"> /</span><span style="color: #ae81ff;">\.</span><span style="color: #e6db74;">tsx</span><span style="color: #f92672;">?$</span><span style="color: #e6db74;">/</span>, loader: <span style="color: #e6db74;">"ts-loader"</span> }],</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;">};</span></div></div></div><div><span style="font-size: x-small;"><br /></span></div><span style="font-size: x-small;"><br /></span><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MeVObcCzr8UhZLR7bKr5GjBBljuaYdbzV9tCn5gbWjjOWMtX1vR4hur2GLX5lUmiJgwRMGVLWY7rct69IhBs6e1MPTGAILU3rm-_ScW5EgotdZaov-t_s2kjEJHTmT3HUkOjzk4sscXm/s1920/Screenshot+from+2021-07-30+15-10-42.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MeVObcCzr8UhZLR7bKr5GjBBljuaYdbzV9tCn5gbWjjOWMtX1vR4hur2GLX5lUmiJgwRMGVLWY7rct69IhBs6e1MPTGAILU3rm-_ScW5EgotdZaov-t_s2kjEJHTmT3HUkOjzk4sscXm/w640-h360-rw/Screenshot+from+2021-07-30+15-10-42.png" width="640" /></span></a></div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;">create a file called <b>tsconfig_extends.json</b> in root direcotry of project with the following configuration.</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Courier New", "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; line-height: 27px; white-space: pre;"><div><span style="font-size: x-small;">{</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"compilerOptions"</span>: {</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"target"</span>: <span style="color: #cfcfc2;">"es5"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"lib"</span>: [<span style="color: #cfcfc2;">"dom"</span>, <span style="color: #cfcfc2;">"dom.iterable"</span>, <span style="color: #cfcfc2;">"esnext"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"allowJs"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"paths"</span>: {</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"skipLibCheck"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"esModuleInterop"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"allowSyntheticDefaultImports"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"strict"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"forceConsistentCasingInFileNames"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"noFallthroughCasesInSwitch"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"module"</span>: <span style="color: #cfcfc2;">"esnext"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"moduleResolution"</span>: <span style="color: #cfcfc2;">"node"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"resolveJsonModule"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"isolatedModules"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"noEmit"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"baseUrl"</span>: <span style="color: #cfcfc2;">"."</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"jsx"</span>: <span style="color: #cfcfc2;">"react-jsx"</span></span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"exclude"</span>: [<span style="color: #cfcfc2;">"build"</span>, <span style="color: #cfcfc2;">"scripts"</span>, <span style="color: #cfcfc2;">"acceptance-tests"</span>, <span style="color: #cfcfc2;">"webpack"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"include"</span>: [<span style="color: #cfcfc2;">"src"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"ts-node"</span>: {</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"pretty"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"transpileOnly"</span>: <span style="color: #ae81ff;">true</span></span></div><div><span style="font-size: x-small;"> }</span></div><div><span style="font-size: x-small;">}</span></div></div></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyFXSKxcIZaCZfcepoXLR9fI07fkeEI0FycZePTFIsh5sIO7EZffv3QOZ-Yh9FlvgjLUQcOETncmQ2_3Q7DlkXnwTurcsl2MpPU-EXuLZJEGh_aHXDr0XvSqg4iHW7Zi7TyNFK8dEuI2D/s1920/Screenshot+from+2021-07-30+15-17-07.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyFXSKxcIZaCZfcepoXLR9fI07fkeEI0FycZePTFIsh5sIO7EZffv3QOZ-Yh9FlvgjLUQcOETncmQ2_3Q7DlkXnwTurcsl2MpPU-EXuLZJEGh_aHXDr0XvSqg4iHW7Zi7TyNFK8dEuI2D/w640-h360-rw/Screenshot+from+2021-07-30+15-17-07.png" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><div class="separator" style="clear: both; text-align: left;">add the tsconfig_extends path to the tsconfig file as follows.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71n3OKzWP3c2o4I9i3PAxsEwPrZU_MEhcypy9PuB8f8z-zclHB5JKWlp5kEtsJ2IFBJVfwONktHxxeEtoPATfPZ2PdrXdhCcMN8ZbPOasO7ILbjhGBlzxFEt2N4UtiRa8Of8UoF14G2W4/s1920/Screenshot+from+2021-07-30+15-18-33.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71n3OKzWP3c2o4I9i3PAxsEwPrZU_MEhcypy9PuB8f8z-zclHB5JKWlp5kEtsJ2IFBJVfwONktHxxeEtoPATfPZ2PdrXdhCcMN8ZbPOasO7ILbjhGBlzxFEt2N4UtiRa8Of8UoF14G2W4/w640-h360-rw/Screenshot+from+2021-07-30+15-18-33.png" width="640" /></a></div><br /><h2 style="clear: both; text-align: left;">Step 4 : </h2><div>    add the craco configuration file path to react strating script inside package.json </div><div><br /></div><div style="text-align: center;"><span>    </span><span>    <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></span><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;">craco start --config config/craco.config.js</span></div><div style="text-align: center;"><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;"><br /></span></div><div style="text-align: center;"><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;"><br /></span></div><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vBz2M1_Lrc5W5YShliRim_RyirKtFytngefAbLwVlSkbjQ6HrtbsFcG6qDpa8RL6yLzAD4KbD0GsXQh0dDnG-Li8ZvtR9YlsCy9pFWV6dsP2m3ksdrr_TA7Xti-BmlTpnh8bPv5_-k_W/s1920/Screenshot+from+2021-07-30+15-22-12.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vBz2M1_Lrc5W5YShliRim_RyirKtFytngefAbLwVlSkbjQ6HrtbsFcG6qDpa8RL6yLzAD4KbD0GsXQh0dDnG-Li8ZvtR9YlsCy9pFWV6dsP2m3ksdrr_TA7Xti-BmlTpnh8bPv5_-k_W/w640-h360-rw/Screenshot+from+2021-07-30+15-22-12.png" width="640" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: left;">now exerything is setup all the remaining part is adding installing dependencies and start working with the paths.</div><h2 style="text-align: left;"><b>Step 5 : </b></h2><div style="text-align: left;">    install the following dependencies with one command using yarn add a <b>dependency</b>.</div><div style="text-align: left;"><span><br /></span></div><div style="text-align: left;"><span>    -</span>@babel/preset-typescript</div><div style="text-align: left;"> <span>   </span>- @babel/plugin-proposal-object-rest-spread</div><div style="text-align: left;">    - @babel/plugin-transform-spread </div><div style="text-align: left;">     - @babel/plugin-proposal-export-default-from </div><div style="text-align: left;">     - @babel/plugin-proposal-decorators </div><div style="text-align: left;">    - @babel/plugin-proposal-class-properties </div><div style="text-align: left;">    - module-resolver </div><div style="text-align: left;">     -  babel-module-resolver  </div><div style="text-align: left;">     - craco</div><div style="text-align: left;">after installing all the dependencies now. we can add paths to the craco config file and tsconfig_extend file to make the imports cleaner.</div><h3 style="text-align: center;">tsconfig_extend file</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh472rUPkndaxE1Fzfwn-xu_JzjY6fovhrRcgEY2mr9ZuOXsS8VbMbW9dso4QqnNVl-UAm6mua-EM7FG6mFHoTED7ahtaKZRcGNcfKp2VAv06ymNK7YlgefihyphenhyphenLmZHdTxuvtRadsvIorLKa/s1920/Screenshot+from+2021-07-30+15-39-45.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh472rUPkndaxE1Fzfwn-xu_JzjY6fovhrRcgEY2mr9ZuOXsS8VbMbW9dso4QqnNVl-UAm6mua-EM7FG6mFHoTED7ahtaKZRcGNcfKp2VAv06ymNK7YlgefihyphenhyphenLmZHdTxuvtRadsvIorLKa/w640-h360-rw/Screenshot+from+2021-07-30+15-39-45.png" width="640" /></a></div><div style="text-align: left;"><h3 style="text-align: center;">craco file</h3><h3 style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPHlc0m73HSYXm0lzTZnEMm1SU0HTST8rnrx43R5QdafZFAaE8DHtnRd6iRU1QSQROjnOy09TNz_BhguE5sm-VjoAbpK5d-bySqSRXieq0Jarx7e7vzD4JCyUa4HoDA_B-Da3MV9V1h5U3/s1920/Screenshot+from+2021-07-30+15-41-00.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPHlc0m73HSYXm0lzTZnEMm1SU0HTST8rnrx43R5QdafZFAaE8DHtnRd6iRU1QSQROjnOy09TNz_BhguE5sm-VjoAbpK5d-bySqSRXieq0Jarx7e7vzD4JCyUa4HoDA_B-Da3MV9V1h5U3/w640-h360-rw/Screenshot+from+2021-07-30+15-41-00.png" width="640" /></a></div></h3><h3 style="text-align: center;"><br /></h3>index.ts file<div>add an index.ts file inside components and export all components using the following code.</div><h3 style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJs5NJwACQkceeLBd53IVBE7aFajuOypxf_tkDnMQpEZNcXhahUdkXrA6MLgIpE7tAwD8uBjm-o-WJjq5kUIDKItImP9Oy-ANTyN9WLy4ZtNesNHyxZacpReIxpT4dwxyEOyre4C2n7OVR/s1920/Screenshot+from+2021-07-30+15-43-07.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJs5NJwACQkceeLBd53IVBE7aFajuOypxf_tkDnMQpEZNcXhahUdkXrA6MLgIpE7tAwD8uBjm-o-WJjq5kUIDKItImP9Oy-ANTyN9WLy4ZtNesNHyxZacpReIxpT4dwxyEOyre4C2n7OVR/w640-h360-rw/Screenshot+from+2021-07-30+15-43-07.png" width="640" /></a></div></h3><div>now we can import componentA using the following command.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8v6nAO1SDIWPt4Zi1SDE7ahYAZlfwBRx7tVwQDFJm2fXbzYdOMjY7w8mdjC6IGXYJt0Qxe-m_DiQ3gtWy3NTuozSmShmleYGZsUPLzvsV8EZ67wQB1oi7bNr3Cg-zVPZYzcO05SQNVYnW/s1920/Screenshot+from+2021-07-30+15-44-36.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8v6nAO1SDIWPt4Zi1SDE7ahYAZlfwBRx7tVwQDFJm2fXbzYdOMjY7w8mdjC6IGXYJt0Qxe-m_DiQ3gtWy3NTuozSmShmleYGZsUPLzvsV8EZ67wQB1oi7bNr3Cg-zVPZYzcO05SQNVYnW/w640-h360-rw/Screenshot+from+2021-07-30+15-44-36.png" width="640" /></a></div><br /><div><br /></div><div>Thank you for reading out. Do share it with fellow developers.</div></div>

How to setup babel module resolver in React with typescript ( Working Example )

  Craco Configuration Craco :     Craco stands for creating react app configuration override. It's a tool for configuring the create rea...

View Complete »

HTML Basics

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-mQ52oT9Z1Hm003W34I88fcnIBtkvvjIcomkfK1Pm9RHZuoW1AQQEuUwXASDL5tjxZEt_B5vuhi7WdfMh6h1Y-mIb3yl3PQ-w8woeWrq_VmDecht_LhQ3Hr5k5XdM889UFfvGC_sRk6P/s600/HTML+BASICS.png" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Basics" border="0" data-original-height="400" data-original-width="600" height="426" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-mQ52oT9Z1Hm003W34I88fcnIBtkvvjIcomkfK1Pm9RHZuoW1AQQEuUwXASDL5tjxZEt_B5vuhi7WdfMh6h1Y-mIb3yl3PQ-w8woeWrq_VmDecht_LhQ3Hr5k5XdM889UFfvGC_sRk6P/w640-h426-rw/HTML+BASICS.png" title="HTML" width="640" /></a></div><div><br /></div><div><br /></div><div><br /></div><h2 style="text-align: left;"><span style="font-weight: normal;"><u>HTML</u> :</span></h2><div><span style="font-weight: normal;"><span> HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using HTML. Then content can be structured using different kinds of elements in the websites. The elements can be wrapped inside and nested to make a perfect structure for the content of the website. The simple structure of the website looks like this :</span><br /></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><br /></div><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>>  </div><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div><div><br /></div></div></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span>Don't overwhelm yourself. you will understand it as you go. most of the developers don't understand the basic structure as it is created by most extensions with a single character like emmet "!". By writing a single exclamation mark in VSCode and pressing enter. you will get this boilerplate code ready for you.</span></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span>The important tags here are :</span></span></div><div><ul style="text-align: left;"><li><span style="font-weight: normal;"><span>head</span></span></li><li><span style="font-weight: normal;"><span>title</span></span></li><li><span style="font-weight: normal;"><span>body</span></span></li></ul>head tag contains a title tag that displays the title of the website in the web browser tab just like this :</div><div><div class="separator" style="clear: both; text-align: center;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXA6_ZKY-EI_o3jcRx1B8-XlMr-BjSPE7HMHvDQYmcLbBxOy-jZe3O-8yNT3nvz_rf6hIu_Z2IcEnw6WtTKzOsEceGRWDAhkgT4AVBNR-dgXBSHVoEZy5ZVSZMUOEbjMiS3FWHF-aJ0PH/s574/Capture.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="html title tag" border="0" data-original-height="54" data-original-width="574" height="30" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXA6_ZKY-EI_o3jcRx1B8-XlMr-BjSPE7HMHvDQYmcLbBxOy-jZe3O-8yNT3nvz_rf6hIu_Z2IcEnw6WtTKzOsEceGRWDAhkgT4AVBNR-dgXBSHVoEZy5ZVSZMUOEbjMiS3FWHF-aJ0PH/w320-h30-rw/Capture.PNG" title="title" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div>head also contains links and other third-party APIs which we will explain in a later article.</div><div><br /></div><div>The body contains all the markup and content for the website. It is the most important tag in HTML as it represents all the structured content inside a website <br /><br /></div><h2 style="text-align: left;">HTML Elements :</h2><div> <span>    HTML elements are the building block of any website. These elements serve as a basic foundational structure for any website. HTML elements are of two types (i) self-closing tags (ii) normal tags.</span></div><div>self-closing tags do not require an ending tag e.g. <input type="text " >, <img  src="image URL" > and many other tags. while the normal tags have an ending tag along with the content inside the tags.</div><div><br /></div><h3 style="text-align: left;">Nesting HTML Elements :</h3><div><span>    HTML elements are nested inside in order to create the structure of the website. e.g. the head title and the body tags are nested inside the HTML tag. </span></div><div><span><br /></span></div><div><b><span style="color: red;">NOTE</span>: Never forget </b>to<b> </b>close<b> </b>the tag with its ending tags as HTML is a markup language, it won't generate any errors rather it would <b>disturb the structure of your website.</b></div><div><span><b><br /></b></span></div><h3 style="text-align: left;"><span><b><u>Types of HTML Elements</u></b></span></h3><div><b><u><br /></u></b></div><div><b><span style="color: #999999;"><u>P tag</u></span> :  </b>p tag also known as paragraph tag is used to create paragraphs inside the website. It is a block-level element which means that it occupies the whole available width of the web page. </div><div><span>  </span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span style="color: #2b00fe;">  <p> this is a paragraph </p></span></span></div><div><span><span style="color: #2b00fe;"><br /></span></span></div><div><div><b><span style="color: #999999;"><u>a tag</u></span>:  </b>a tag also known as an anchor tag is used to create links inside the website. It is an inline-level element which means that it occupies the only available width occupied by the text inside the tag. This tag an attribute of href which points to the link on the text. </div><div>  </div><div>                      <span style="color: #2b00fe;"><a href="https://www.zonatsolutions.com/</span><span style="color: #2b00fe;">"> Zonat Solutions</a></span></div></div><div><span style="color: #2b00fe;"><br /></span></div><div>By clicking on the Zonat Solutions link. Users would be taken to this link <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>"https://www.zonatsolutions.com".  </div><div><u><b><span style="background-color: white;"><span style="color: #999999;"><br /></span></span></b></u></div><div><u><b><span style="background-color: white;"><span style="color: #999999;">h tag</span></span></b></u>:</div><div><span>    h tag also known as heading tag is used to create headings for the website. it has six different tags from h1 to h6. Where h1 is the most bolder and bigger in font and h6 is the least in size.</span><br /></div><div><span> </span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <h1> this is a heading </h1></span><br /></span></div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>   </span><h2> this is a heading </h2></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span></span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span></span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span>    </span><span>    </span><span>    </span><span>    </span><span>   </span></div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><h6> this is a heading </h6></div><div><u><b><span style="color: #999999;"><br /></span></b></u></div><div><u><b><span style="color: #999999;">br tag</span></b></u> : </div><div><span>    br tag also known as break-line tag is used to add a line break for proper formatting of the content. it is a self-closing tag.</span><br /></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><br /></span></div><div><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <p> Website <br > Zonat Solutions </p></span><br /></span></span></div><div><span><span><span>It will result in :</span></span></span></div><div><span><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>   <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span> Website</span><br /></span></span></span></div><div><span><span><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>Zonat Solutions.</span></span></span></span></span></div><div><span><span><span><span><b><u><span style="color: #999999;"><br /></span></u></b></span></span></span></span></div><div><span><span><span><span><b><u><span style="color: #999999;">hr tag</span></u></b> : </span></span></span></span></div><div><span><span><span><span><span>    </span>hr tag also known as horizontal-line tag is used to create a horizontal line for separating a section from other sections. it is a self-closing tag.</span></span></span></span></div><div><span><span><span><span><br /></span></span></span></span></div><div><span><span><span><u><b><span style="color: #999999;">img tag</span></b></u> :</span></span></span></div><div><span><span><span><span>    IMG tag is a self-explanatory tag that is used for images in HTML. It has an src attribute that requires the path of the image.</span></span></span></span></div>

HTML Basics

HTML :  HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using H...

View Complete »

How to check whether an HTML element is inline or block level element

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0BqIRvI6BUbCaEJku-UjkJQoDMq_9CKJUvYYT1Lz7sdv2E9FPiJuuJtxbqkRQAXCnNc-oLFUEncLaCsW7GNY3o4mL2O1EtMb8nSlquNtGsFNj29z2TJ_Qa8ZGl7VRpljw5hFxg1xTAR3/s600/Add+a+heading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Inline or block level element" border="0" data-original-height="400" data-original-width="600" height="266" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0BqIRvI6BUbCaEJku-UjkJQoDMq_9CKJUvYYT1Lz7sdv2E9FPiJuuJtxbqkRQAXCnNc-oLFUEncLaCsW7GNY3o4mL2O1EtMb8nSlquNtGsFNj29z2TJ_Qa8ZGl7VRpljw5hFxg1xTAR3/w400-h266-rw/Add+a+heading.png" title="HTML inline or block-level element" width="400" /></a></div><h2 style="text-align: left;"><br /></h2><h2 style="text-align: left;">How to Check the element type </h2><p>you can check the element type by applying the border using CSS. if the border appears on the whole page. The element will be a block-level element and if the border wraps around the content of the element only. then the element will be an inline-level element</p><h3 style="text-align: left;"><u>example</u></h3><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div>  <<span style="color: #f92672;">style</span>></div><div>  <span style="color: #f92672;">p</span>{</div><div>    <span style="color: #66d9ef; font-style: italic;">border</span>: <span style="color: #ae81ff;">1</span><span style="color: #f92672;">px</span> <span style="color: #66d9ef;">solid</span> <span style="color: #66d9ef;">black</span>;</div><div>  }</div><div>  </<span style="color: #f92672;">style</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>></div><div>  <<span style="color: #f92672;">p</span>></div><div>  This is a paragraph</div><div>  </<span style="color: #f92672;">p</span>></div><br /><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div></div></div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh13kKCpYtymyfw1lDMW7qq6yb6v6udv7ZHKofmNttAjp_qVDnLv762qryVOc0p3kM02JRdHvH0ylkXViMmgU9dwRsHjVTCBwvsGgFoyKjOXMz0lmZKInTZGBM09fL9H6KxQnQVuosB0Rh/s520/block.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="57" data-original-width="520" height="70" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh13kKCpYtymyfw1lDMW7qq6yb6v6udv7ZHKofmNttAjp_qVDnLv762qryVOc0p3kM02JRdHvH0ylkXViMmgU9dwRsHjVTCBwvsGgFoyKjOXMz0lmZKInTZGBM09fL9H6KxQnQVuosB0Rh/w640-h70-rw/block.PNG" width="640" /></a></div><br /></div><div>In the above example, we have used a p tag. when we applied border on the p tag. the border covered all the page. so which shows that it is a block-level element.</div><h3 style="text-align: left;"><br /></h3><h3 style="text-align: left;"><u>example</u> </h3><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div>  <<span style="color: #f92672;">style</span>></div><div>  <span style="color: #f92672;">span</span>{</div><div>    <span style="color: #66d9ef; font-style: italic;">border</span>: <span style="color: #ae81ff;">1</span><span style="color: #f92672;">px</span> <span style="color: #66d9ef;">solid</span> <span style="color: #66d9ef;">black</span>;</div><div>  }</div><div>  </<span style="color: #f92672;">style</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>></div><div>  <<span style="color: #f92672;">span</span>></div><div>  This is a span</div><div>  </<span style="color: #f92672;">span</span>></div><br /><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div></div></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFqcm2-CXCdhXKkE9sSiSUnefRK6csfN-C4L_edTro9eWuE-wZi6E5zPvNi8o8jBrUDT-bopVZL5OoGjyG5eJuIbxVWoISMnCi4jjD_BaceM92YLE3IcXWPTzroujs3_Q9bunhsHSonGy/s182/inline.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="53" data-original-width="182" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFqcm2-CXCdhXKkE9sSiSUnefRK6csfN-C4L_edTro9eWuE-wZi6E5zPvNi8o8jBrUDT-bopVZL5OoGjyG5eJuIbxVWoISMnCi4jjD_BaceM92YLE3IcXWPTzroujs3_Q9bunhsHSonGy/s0-rw/inline.PNG" /></a></div><br /><div><br /></div><div>In the above example. we have used a span element and applied a border on it. The border covered the content part of the element which shoes that is an inline-level element</div><div><br /></div><div><br /></div><div><br /></div><br />

How to check whether an HTML element is inline or block level element

How to Check the element type  you can check the element type by applying the border using CSS. if the border appears on the whole page. The...

View Complete »