نوشته های M-ghalevand

hover در CSS

M-ghalevand — Fri, 03 Sep 2021 21:45:08 +0430

آیا تا کنون هنگام بازدید از یک وبسایت، از افکتهای زیبای hover درسایتها حیرت زده شده اید؟ یا انیمیشنهای ظریف رابط کاربری (UI) سایت شما را تحت تاثیر قرار داده است؟ ممکن است این گونه به نظر برسد که افکت زیبای هاور، از جمله جزییات کوچک یک سایت باشد... یا انیمیشنهای ظریف رابط کاربری (UI) سایت شما را تحت تاثیر قرار داده است؟ ممکن است این گونه به نظر برسد که افکت زیبای هاور، از جمله جزییات کوچک یک سایت باشد؛ اما این افکت و انیمیشنهای شناور آن میتوانند تأثیر بیشتری نسبت به آنچه انتظار دارید بر روی مخاطب داشته باشند. به همین دلیل تصمیم گرفتیم در مقالهی آموزش hover در CSS به آموزش ساخت چند افکت هاور زیبا بپردازیم.یکی از ویژگیهای طراحی یک رابط کاربری خوب، روشن و قابل مشاهده بودن عناصر تعاملی است. افکتهای شناور میتوانند به شما کمک کنند تا سایت شما زیباتر به نظر برسد و کاربران به سادگی بتوانند با طرح آن تعامل برقرار کنند. همچنین به یاد داشته باشید هنگامی که کاربران موس خود را بر روی لینکها و دکمههای سایت شما حرکت میدهند، میبایست متوجه تغییراتی شوند که به آنها تفاوت را نشان دهد و شما میتوانید این تغییرات را در قالب افکت هاور به آنها نشان دهید.شما میتوانید با استفاده از CSS و HTML افکتها و انیمیشنهای چشمگیری را ایجاد کنید. اگرچه برای ایجاد انیمیشنهای پیچیده ممکن است به جاوا اسکریپت هم نیاز داشته باشید.در ادامهی مقالهی آموزش hover در CSS ، شما را با انواع مختلف افکتهای زیبای هاور آشنا میکنیم. شما میتوانید از این افکتها در طراحی سایت خود استفاده کنید یا از آنها الهام بگیرید.افکت زیبای هاور انیمیشن دکمههاکد این افکت زیبا و مدرن بسیار تمیز و قابل سفارشیسازی میباشد.کد HTML:

Hover Me

کد CSS:body{ margin:0; padding:0; } .btn{ cursor:pointer; position:relative; padding:10px 20px; background:white; font-size:28px; border-top-right-radius:10px; border-bottom-left-radius:10px; transition:all 1s; &:after,&:before{ content:" " width:10px; height:10px; position:absolute; border :0px solid #fff; transition:all 1s; } &:after{ top:-1px; left:-1px; border-top:5px solid black; border-left:5px solid black; } &:before{ bottom:-1px; right:-1px; border-bottom:5px solid black; border-right:5px solid black; } &:hover{ border-top-right-radius:0px; border-bottom-left-radius:0px; // background:rgba(0,0,0,.5); // color:white; &:before,&:after{ width:100%; height:100%; // border-color:white; } } } .data-container{ background:#ffebee; height:100vh; display:flex; justify-content:center; align-items:center; }افکتهای زیبا برای مجموعهای از دکمههاشما میتوانید بنا بر نیاز و سلیقهی خود از این افکتها در طراحی رابط کاربری سایت به صورت جداگانه یا جمعی استفاده کنید. این افکتها واکنشگرا هستند و در دستگاههای تلفن همراه به خوبی نمایش داده میشوند.کد HTML:

Button Hover Effects

Hover Hover Hover Hover Hover

3 World places to visit this new year

Pyramids

Built during a time when Egypt was one of the richest and most powerful civilizations in the world. Their massive scale reflects the unique role that the pharaoh played in ancient Egyptian society.

Stonehenge

Stonehenge is a prehistoric monument in Wiltshire, England. It was constructed in several stages between 3000 and 1500 B.C., spanninng to the Bronze Age.

Tower of Pisa

The Leaning Tower of Pisa or simply the Tower of Pisa is the campanile, or freestanding bell tower, of the cathedral of the Italian city of Pisa, known worldwide for its unintended tilt

Hover the card

کد CSS:@import url('https://fonts.googleapis.com/css?family=Raleway:200'); body { font-family: 'Raleway', sans-serif; background:#eee; } .wrapper { position: absolute; top: 10%; left: 40%; width: 300px; height: 500px; perspective: 900px; } .container { position: absolute; top: 0%; width: 100%; height: 100%; transition: .5s all ease; transform: rotateX(60deg) scale(0.7); perspective: 900px; box-shadow: 0px 20px 50px #555; animation: entry 1s linear 1; } #c0 { position: absolute; top: 0%; width: 100%; height: 100%; background: linear-gradient(to bottom, #eba65b 30%, #d99267 100%); z-index: 300; box-shadow: 0px 20px 100px #555; } #c1 { background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%); box-shadow: 0px 20px 100px #555; left: 100%; z-index: 0; } #c2 { left: -100%; z-index: 0; background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%); box-shadow: 0px 20px 100px #555; } .container:hover { cursor: pointer; transform: rotate(0deg) scale(1) translateY(10px); transition: .5s all ease; z-index: 400; } .image { position: absolute; top: 0%; left: 0%; width: 100%; height: 45%; background: linear-gradient(to top, #eba65b 30%, #d99267 100%); } #i1 { background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%); } #i2 { background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%); } span { position: absolute; top: 0%; left: 55%; border-radius: 100%; background-color: #fff; z-index: 10; } .sun { position: absolute; top: 50%; height: 50%; left: 0%; width: 100%; } .sun1 { width: 50px; height: 50px; box-shadow: 0px 0px 10px #fff; } .st4 { fill: #f8c56f; opacity: 1; } .st5, .st7 { fill: #fff; } #sh2 { opacity: 0.5; } #sh3 { opacity: 0.3; } .st6 { fill: #59476f; } .st10 { fill: #c5a7e5; stroke: #222; } .st11 { stroke: #212121; opacity: 0.5; } #sh1 { fill: #f8c56f; opacity: 0.4; } .st0 { fill: #a25a62; stroke: none; stroke-miterlimit: 10; } .st1 { fill: none; stroke: #a25a62; stroke-width: 2; stroke-miterlimit: 10; } .st2 { fill: #cd775c; } .st3 { fill: #fff; opacity: 0.3; } .story { position: absolute; top: 45%; left: 0%; height: 55%; width: 100%; background: linear-gradient(to bottom, #eba65b 0%, #d99267 40%); z-index: 30; } #s1 { background: linear-gradient(to top, #5b62a2 0%, #7b88d1 100%); } #s2 { background: linear-gradient(to top, #5b62a2 0%, #7b88d1 120%); } .info { position: absolute; top: 10%; } h3 { text-align: center; text-shadow: 0px 0px 10px #eee; color: #eee; letter-spacing: 2px; } h4 { color: #111; position: absolute; top: 30%; left: 30%; letter-spacing: 2px; } h1 { color: #111; position: fixed; top: 0%; left: 30%; letter-spacing: 2px; } p { font-size: 14px; color: #fff; padding: 0px 20px 20px 20px; line-height: 150%; text-align: center; letter-spacing: 1px; } .page { position: absolute; top: 80%; width: 100%; left: 0%; height: 20%; z-index: 30; } li { position: absolute; top: 50%; list-style: none; color: #111; } li:nth-child(1) { left: 15%; animation: simple1 1s linear infinite; } li:nth-child(2) { right: 15%; animation: simple 1s linear infinite; } @keyframes simple { 50% { transform: translateX(10px); opacity: 0.5; } 100% { transform: translateX(10px); opacity: 0; } } @keyframes simple1 { 50% { transform: translateX(-10px); opacity: 0.5; } 100% { transform: translateX(-10px); opacity: 0; } } @keyframes entry { 0% { top: -20%; opacity: 0.1; } 100% { top: 0%; } }افکت زیبای هاور برای نمایش پس زمینهی پنهانشما میتوانید از این افکت زیبا در طراحی رابط کاربری صفحهی اصلی وبسایت خود استفاده کنید.کد HTML:

Simple magic!

Check out my other pens

کد CSS:@import "compass/css3" @font-face { src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/Anders.ttf'); font-family: test; } *, *:before, *:after { box-sizing: border-box; margin: 0; } html,body { font-size: 62.5%; height: 100%; overflow: hidden; } .scene { position: relative; height: 100%; background: #1d1f20; padding: 20rem; text-align: center; } h1 { position: relative; font-size: 8rem; text-transform: uppercase; font-family: test; color: #fff; z-index: 10; } .magic { z-index: 5; position: absolute; top: calc(50% - 10rem); left: calc(50% - 10rem); width: 20rem; height: 20rem; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg') 50% 50% no-repeat fixed; background-size: cover; border-radius: 50%; } .check-out { z-index: 100; position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: 2rem; color: #fff; font-family: test; a { color: rgba(255,170,170,1); } }کد /p>$(document).ready(function() { var $magic = $(".magic"), magicWHalf = $magic.width() / 2; $("mousemove", function(e) { $magic.css({"left": e.pageX - magicWHalf, "top": e.pageY - magicWHalf}); }); });افکت زیبای هاور انیمیشن - پلههای برجدر طراحی وب مدرن، از جلوههای انیمیشن هوشمندانه استفاده میشود تا تجربهای همه جانبه به کاربران ارائه دهد. گرچه مفهوم اصلی انیمیشن شناور پیچیده به نظر میرسد، اما در این افکت از اسکریپتهای HTML5 و CSS3 به طرز هوشمندانهای استفاده شده است تا یک انیمیشن هاور واکنشگرا و سبک وزن را به شما ارائه دهد. این افکت برای صفحات فرود محصول و وب سایتهای بازی مناسب خواهد بود. از آنجا که این انیمیشن مبتنی بر SVG است، نتیجهی دقیقی خواهید گرفت. با درک این مفهوم به عنوان پایه، میتوانید از SVGهای دیگری در طراحی خود استفاده کنید.برای توسعهی انیمیشنهای پیچیده در وب میتوانید از کتابخانهی three.js استفاده کنید.کد HTML:

HOVER OVER IMAGE

کد CSS:body { background-color: #1e1e1e; } p {font-family: 'Open Sans', sans-serif; color:#aaa;} .center { text-align: center; padding: 60px; } #MonValley #BrightDoor { transition: all 0.3s ease-in-out; opacity:0; } #MonValley:hover #BrightDoor { opacity:1; } #MonValley #Step1 { transition: all .65s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step1 { transform: translate(0px, 0px); } #MonValley #Step2 { transition: all .6s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step2 { transform: translate(0px, 0px); } #MonValley #Step3 { transition: all .55s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step3 { transform: translate(0px, 0px); } #MonValley #Step4 { transition: all .5s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step4 { transform: translate(0px, 0px); } #MonValley #Step5 { transition: all .45s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step5 { transform: translate(0px, 0px); } #MonValley #Step6 { transition: all .4s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step6 { transform: translate(0px, 0px); } #MonValley #Step7 { transition: all .35s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step7 { transform: translate(0px, 0px); } #MonValley #Step8 { transition: all .3s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step8 { transform: translate(0px, 0px); } #MonValley #Step9 { transition: all .25s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step9 { transform: translate(0px, 0px); } #MonValley #Step10 { transition: all .2s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step10 { transform: translate(0px, 0px); } #MonValley #Step11 { transition: all .15s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step11 { transform: translate(0px, 0px); } #MonValley #Step12 { transition: all .1s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step12 { transform: translate(0px, 0px); } #MonValley #Step13 { transition: all .05s ease-in-out; transform: translate(0px, 132px); } #MonValley:hover #Step13 { transform: translate(0px, 0px); }افکت زیبای هاور CSS Highlight برای متون inlineاین افکت زمانی که بر روی المنت مورد نظر هاور میکنید، اجرا خواهد شد. این افکت برای متونی که به صورت inline هستند، قابل استفاده میباشد. هنگام هاورشدن متنی که افکت هاور Highlight بر روی آن اعمال شده است، رنگ پس زمینهی آن متن از ابتدا تا انتها و به صورت انیمیشنی تغییر خواهد کرد.برای این کار یک فایل به نام index.html ایجاد کرده و کدهای زیر را در آن قرار میدهیم: List سپس دو فایل CSS را به صورت بالا به آن لینک میدهیم. فایل اول مربوط به یک فونت از سایت Google font و فایل دوم CSS Reset میباشد که باعث باز نشدن کدهای اولیه و ریست شدن کد استایل میشود. در مرحلهی بعد کدهای HTML زیر را اضافه میکنیم: List

Check out React For Beginners

Are you a Sublime Text Power User?

I love to learn!

I
sure
do
love
Flexbox!

همانطور که مشاهده میکنید، 4 تگ div با کلاس post اضافه شده و درون هر یک از آنها یک لینک با کلاس fun-hover قرار دادهایم. همچنین، درون بعضی از لینکها از تگ br استفاده شده تا متن مربوط شکسته شده و به خط بعد برود. حالا کدهای CSS زیر را به صورت زیر اضافه میکنیم: List

Check out React For Beginners

Are you a Sublime Text Power User?

I love to learn!

I
sure
do
love
Flexbox!

تا اینجا اگر خروجی را در مرورگر مشاهده کنید به صورت زیر خواهد بود:همانطور که گفته شد، تمامی لینکها دارای کلاس fun-hover هستند. برای قرار دادن یک پس زمینه با استفاده از ویژگیهای background-image و linear-gradient به صورت زیر عمل میکنیم:.fun-hover { background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%); background-image: linear-gradient(to right, transparent 50%, #fee603 50%); }بدین ترتیب از 0 تا 50% اول transparent و 50% دوم زرد رنگ خواهد شد:برای اینکه هر رنگ به صورت کامل متن مورد نظر را پوشش دهد، ویژگی background-size: 200% را به صورت زیر اعمال میکنیم:.fun-hover { background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%); background-image: linear-gradient(to right, transparent 50%, #fee603 50%); background-position: 0; background-size: 200%; }با این کار رنگ transparent کل متن را پوشش میدهد. حال، حالت هاور را برای این کلاس تعریف میکنیم:.fun-hover { background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%); background-image: linear-gradient(to right, transparent 50%, #fee603 50%); background-position: 0; background-size: 200%; } .fun-hover:hover { background-position: -100%; }با این کار زمانی که بر روی لینکها هاور میکنیم، پس زمینه به اندازهی 100% جابهجا شده و رنگ آن از transparent به زرد تبدیل میشود. برای اینکه این تغییر به صورت یک انیمیشن اعمال شود، به صورت زیر عمل میکنیم:.fun-hover { background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%); background-image: linear-gradient(to right, transparent 50%, #fee603 50%); background-position: 0; background-size: 200%; -webkit-transition: all 0.4s; transition: all 0.4s; } .fun-hover:hover { background-position: -100%; }مدت این تغییر را برابر با 0.4 ثانیه قرار میدهیم؛ بنابراین تغییر پسزمینه در این زمان اتفاق خواهد افتاد.خروجی به صورت زیر خواهد بود:افکت عکس در htmlبرای استایلدهی به تصاویر خود همیشه لازم نیست که از نرم افزار فتوشاپ استفاده کنید. برخی جلوههای جالب را میتوان با کمک Html، Css و jQuery به دست آورد. در ادامه با نحوهی ایجاد انواع افکت تصاویر در html با ما همراه باشید.نکته: برخی ویژگیهای CSS که در ادامه به شما کمک میکنند تا افکتهایی زیبا ایجاد کنید، عبارتند از:extraImgs: با استفاده از این ویژگی میتوانید تعداد کپیهایی که از تصویر گرفته میشود را تعیین کنید.opacity: شفافیت هر عکس را تعیین میکند.bgfixed: تعیین میکند که آیا تصویر پس زمینه و اصلی ثابت باشد یا متحرک.perspective: با استفاده از این ویژگی میتوانید فاصلهی دید خود را مشخص کنید.translateX: میزان جا به جا شدن در جهت xtranslateY : میزان جا به جاشدن در جهت ytranslateZ : میزان جا به جا شدن در جهت zrotateX : میزان چرخش حول محور xrotateY : میزان چرخش حول محور yrotateZ : میزان چرخش حول محور zظاهر شدن متن بر روی عکس با رفتن موس روی آنکدهای Html و Css:

Fade in Overlay

Hover over the image to see the effect.

Hello World

آموزش ایجاد افکت کم رنگ شدن تصویر با رفتن موس روی آن:کدهای Html و Css:

Opacity with Box

Hover over the image to see the effect.

John Doe

آموزش ایجاد افکت چرخش تصویر هنگام رفتن موس روی آن:کدهای Html و Css:

کد بزرگ شدن عکس با رفتن موس روی آن تا اندازه دلخواه:کدهای Html و Css:

Zoom on Hover

Hover over the div element.

کد ایجاد افکت حرکتی بر روی عکس در html:کدهای Html و Css:

جمع بندی:طراحان وب میتوانند با استفادهی متناسب از افکت هاور به صفحات وب خود، زیبایی چشمنوازی ببخشند. شما میتوانید با بهرهگیری از افکتهای معرفی شده در این مقاله و سفارشیسازی آنها، زیبایی صفحات خود را چند برابر کنید. همچنین میتوانید از افکتهای موجود در سایتهایی مانند codepen استفاده کنید.منبع:آکادمی سون لرن

Svelte چیست

M-ghalevand — Tue, 31 Aug 2021 16:54:47 +0430

Svelte روز به روز برنامه‌های تحت وب بیشتری ساخته می‌شوند و کاربران، این برنامه‌های رو به ‌رشد را به دلیل سادگی، سرعت زیاد و دسترس‌پذیری بالا انتخاب می‌کنند. اپلیکیشن‌های تک صفحه‌ای (SPA) بخش عظیمی از این جریان را به خود اختصاص داده‌اند که معمولا با فریم ورک‌هایی مانند انگولار، Vue.js و React.js ساخته می‌شوند. این فریم ورک‌های محبوب به توسعه دهندگان کمک می‌کنند تا بهترین تجربه‌ی کاربری ممکن را در پلتفرم‌های مختلف و در زمان کوتاهی ارائه دهند. با این حال، توسعه دهندگان علاقه‌مند و پیشرو که این بازار را هدف قرار می‌دهند، می‌توانند با یک فریم ورک جدید و کاربردی وارد عرصه‌ی رقابت شوند.Svelte یک رویکرد جدید برای ایجاد رابط کاربری است. در این مقاله، می‌خواهیم فواید استفاده از این فریم ورک‌ جاوا اسکریپت را بررسی کنیم. شاید تصور کنید که Svelte وقتی هنوز به اندازه‌ی سایر فریم ورک‌ها محبوب نیست، بررسی آن کاری بیهوده باشد. اما باید توجه داشته باشید که سایر فریم ورک‌های محبوب نیز در ابتدا ناشناخته بوده‌اند و به مرور زمان و با بهبود در ساختارشان به این مرحله رسیده‌اند. Svelte هرچند نسبت به سایرین جدید است، اما سرعت رشد آن بسیار بالاست. در ادامه یاد می‌گیرید که Svelte چیست و چه ویژگی‌هایی دارد. با ما همراه باشید.Svelte چیست؟Svelte که برخی به آن Svelte.js نیز می‌گویند، یک فریم ورک جاوا اسکریپت است که از سال 2016 برای استفاده در اختیار توسعه دهندگان وب قرار گرفته است. Svelte همانند انگولار، React.js و Vue.js این امکان را فراهم می‌کند تا یک برنامه نویس به صورت بهینه کدنویسی کند، با دردسر کمتری کد خود را تغییر دهد و با استفاده از یک رابط، آسان‌تر برنامه‌ی خود را توسعه دهد.اما تفاوت اصلی این فریم ورک این است که برخلاف سایرین که بخش زیادی از کار را به مرورگر واگذار می‌کنند، کد نوشته شده در Svelte ابتدا کامپایل می‌شود و سپس به عنوان یک محصول نهایی در مرورگر کاربران اجرا می‌شود. این باعث می‌شود تا برنامه سریع‌تر اجرا شده و تجربه‌ی کاربری بهتری ایجاد شود.Svelte سریع استهمان‌طور که در بخش قبل گفتیم، زمان اجرای برنامه با Svelte سریع است، زیرا این فریم ورک تنها بخش‌هایی از رابط کاربری را بروز می‌کند که تغییر کرده است. همچنین برخلاف Vue.js و دیگر چارچوب‌هایی که از DOM مجازی استفاده می‌کنند، Svelte از یک DOM مجازی استفاده نمی‌کند. اما DOM مجازی چیست؟هنگامی که یک صفحه در مرورگر کاربر ساخته می‌شود، المان‌هایی روی صفحه‌ نمایش داده می‌شود که به آن‌ها UI می‌گویند. این المان‌ها در قالب یک درخت ساخته می‌شوند که همان DOM یا Document Object Model نامیده می‌شود. نمونه‌ای از این درخت را در شکل زیر می‌بینید:Document Object Modeبه دلیل درختی بودن این ساختار نیاز است تا برای شناسایی هر تغییر، درخت از ریشه پیمایش شود تا به گره‌ی مورد نظر برسد و سپس برای اعمال تغییرات دوباره این مسیر باید پیمایش شود. DOM مجازی با هدف بهینه کردن این عملیات به وجود آمد. DOM مجازی یک ارائه‌ی مجازی از این درخت در کدهای جاوا اسکریپت است. عملیات شناسایی گره در این DOM انجام می‌شود و سپس گره و تغییراتی که باید اعمال شوند به DOM اصلی فرستاده می‌شوند.برای مثال React برای کاهش عملیات مرورگر در هنگام استفاده از منابع، از DOM مجازی کمک می‌گیرد. و با استفاده از آن، عملیات شناسایی و اعمال را به صورت یک‌جا در DOM اصلی اعمال می‌کند.اما Svelte همین عملیات را نیز به صورت بهینه‌تر انجام می‌دهد. همانند React، در این‌جا نیز تغییرات با State مدیریت می‌شوند. اما به جای انجام دادن آن در مرورگر، کدهای یک کامپوننت را در زمان Build به vanilla JavaScript کامپایل می‌کند.Svelte کم‌حجم است.حجم یک برنامه‌ی کامپایل شده با Svelte نسبت به سایر فریم ورک‌های جاوا اسکرپت کمتر است. برای مثال، حجم یک برنامه‌ی ساده‌ی hello world ساخته شده حدود 124 کیلوبایت است. این حجم کم برای برنامه‌های تلفن همراه بسیار مناسب است.برنامه‌های Svelte به این دلیل بسیار کم‌حجم هستند که Svelte، علاوه بر یک فریم ورک، یک کامپایلر نیز می‌باشد.برای مقایسه‌ی فرآیند راه‌اندازی، یک پروژه‌ی React را در نظر بگیرید. با دستور yarn build، Webpack + Babel برای ساخت بسته از فایل‌های پروژه فراخوانی می‌شود، آن‌ها را تمیز می‌کند، کتابخانه‌های react-dom و react را به مجموعه اضافه می‌کند، فایل خروجی را بسته‌بندی می‌کند و در نهایت یک فایل خروجی تولید می‌شود.برخلاف این روند، Svelte اجزای موجود در پروژه را کامپایل می‌کند. پس برنامه‌ی به صورت مستقل روی مرورگرهای مختلف اجرا می‌شود. Svelte در درون خود از ساختاری مانند Webpack استفاده می‌کند و تصمیم می‌گیرد که تنها بخش‌هایی از فریم ورک که توسط کد شما استفاده شده را در خروجی بیاورد.البته باید توجه داشت که این برنامه‌ی کامپایل شده هنوز هم تعدادی کد Svelte را در خود دارد و حجم صددرصد بهینه نمی‌شود اما نسبت به روشی که بسیاری از فریم ورک‌های جاوا اسکریپت مانند React و... با آن کار می‌کنند بهینه‌تر است. اغلب این فریم ورک‌ها در زمان اجرای برنامه به طور کامل روی مرورگر کاربران ارائه می‌شوند و پهنای باند را بالا می‌برند.ساختار یک کامپوننت در Svelte چگونه است؟حتما بارها برای شما پیش آمده است که بخواهید از یک ساختار در صفحات مختلف استفاده کنید. همانند سایر فریم ورک‌های جاوا اسکریپت، در Svelte نیز شما می‌توانید این بخش را به عنوان یک کامپوننت استفاده کنید. استفاده از کامپوننت باعث می‌شود تا پروژه‌ی شما ساختاریافته‌تر شود و کدهای تکراری ننویسید. هر کامپوننت Svelte دارای سه بخش اصلی زیر است:بخش با تگ script: تگ اسکریپت، یک بلوک جاوا اسکریپت است که متغیرها، توابع و شرط‌های لازم در آن تعریف می‌شوند.بخش با تگ style: در این تگ، استایل‌ها و ویژگی‌های ظاهری یک کامپوننت و نحوه‌ای که قرار است کاربر آن را ببیند تعریف می‌شود. درست مشابه با فایل‌های CSS.بخش با تگ template: همانند بخش Html عمل می‌کند و مانند رابط، دو بخش قبل را به یکدیگر متصل می‌کند.برای مثال، فرض کنید می‌خواهید نام برنامه بالای تمامی صفحات مشاهده شود. برای این کار کافی است تا کد زیر را بنویسید: script export let name; /script

{name}

Svelte فریم ورکی است که سعی دارد ماژولار بودن (modularity) را وارد بازی کند. این فریم ورک می‌کوشد تا ساختاری مشابه با معماری MVC را ایجاد کند. این معماری نه تنها در جدا کردن اجزای مختلف بلکه در جداسازی منطق، دیدگاه و الگو نیز موفق است. اگر با این معماری آشنا نیستید.مزایای Svelte چیست؟Svelte دارای نقاط قوت زیادی است که باعث شده تا توسعه دهندگان زیادی به آن علاقه‌مند شوند. برخی از این نقاط مثبت عبارتند از:Svelte از SSR یا Server Side Rendering پشتیبانی می‌کند و باعث می‌شود تا اجرای برنامه به سرور منتقل شده و برای نمایش حالت قبلی یک صفحه نیاز به رندر کردن دوباره‌ی آن نباشد! تصویر زیر به شما برای فهم بهتر این سازوکار کمک می‌کند:Server Side Renderingrمعایب Svelte چیست؟هر فریم ورکی در کنار مزایایی که به توسعه دهندگان می‌دهد، از معایبی نیز برخوردار است. برخی از معایب Svelte عبارتند از:هیچ نوع داده‌ای در Svelte تعریف نشده است. این ممکن است برای افرادی که عادت کرده‌اند از تفاوت‌های میان انواع داده مانند رشته‌ها، اعداد و آرایه‌ها در کدنویسی استفاده کنند، دردسرساز باشد. البته کتابخانه‌هایی برای رفع این مشکل نوشته شده است که از آن‌ها می‌توان به svelte-typescript-rollup، svelte-typescript-parcel و svelte-preprocess اشاره کرد.از آنجا که Svelte یک کامپایلر است، اجازه می‌دهد تا پروژه حتی با خطاهای import و export کامپایل شود. در صورتی که سایر فریم ورک‌ها در همان مرحله‌ی کدنویسی شما را باخبر خواهند کرد.برنامه نویس باید با ابزارهایی نظیر Webpack برای کار با وابستگی‌های فایل‌هایی مانند تصاویر، فونت‌ها، استایل‌ها و... به صفحات وب آشنا باشد.جامعه‌ی کوچکی دارد و ممکن است برای برنامه نویسان تازه وارد استرس‌زا باشد.نسبت به سایر فریمورک‌ها، کتابخانه‌های کمتری هنگام کار با Svelte، به صورت مجزا وجود دارد. برای مثال در حال حاضر برای React بسته‌های بیشتری با NPM در دسترس است. اما با انتخاب Svelte مجبور خواهید بود که کتابخانه‌ی مورد نیاز خود را شخصا بنویسید. شکل زیر تعداد کتابخانه‌های موجود برای هر فریم ورک جاوا اسکریپت را نشان می‌دهد:نصب و شروع کار با Svelteبعد از اینکه فهمیدیم Svelte چیست، در این بخش می‌خواهیم Svelte را نصب کرده و یک برنامه‌ی نمونه را اجرا کنیم.گام اول – نصب نود جی اس (Node.js)برای نصب و اجرای افزونه‌های مختلف، نیاز به NPM دارید. Node.js ماژول‌های زیادی (module) را درون خود دارد. زمانی که Node.js را نصب می‌کنید، NPM یا node package manager هم در پس زمینه نصب می‌شود که با استفاده از آن‌ها می‌توانید بسته‌ها و ماژول‌های مربوط به پروژه‌ی خود یا کل سیستم را مدیریت کنید.گام دوم – نصب تمپلیتبرای ساخت و راه‌اندازی پروژه، باید دستور زیر را اجرا کنید:npx degit sveltejs/template my-first-appاین فرمان یک پروژه‌ی Svelte با نام my-first-app را ایجاد می‌کند. شما می‌توانید نام دلخواه خود را به جای این نام انتخاب کنید. پس از تکمیل فرمان بالا یک الگوی پروژه Svelte خواهید داشت که خالی است و بسته‌های NPM مورد نیاز هنوز نصب نشده‌اند.گام سوم – نصب بسته‌هاابتدا با دستور cd به فولدری که پروژه در آن قرار گرفته بروید:cd my-first-appیا می‌توانید در سیستم خود به دایرکتوری آن پوشه رفته و مطابق شکل زیر، پاورشل خود را به عنوان ادمین اجرا کنید:سپس با دستور install تمام کتابخانه‌های موردنیاز را به صورت خودکار نصب کنید:npm installگام چهارم – اجرای پروژهبا دستور زیر پروژه‌ی خود را اجرا کنید:npm run devتوجه داشته باشید که با این دستور، برنامه به صورت خودکار روی لوکال هاست و پورت 5000 آماده‌ی اجراست. برای باز شدن صفحه باید در مرورگر خود، آدرس http://localhost:5000 را وارد کنید. اگر همه چیز بدون خطا باشد، صفحه‌ی زیر برای شما نمایش داده می‌شود:جمع‌بندی:از Svelte می‌توان برای توسعه‌ی یک برنامه به صورت مستقل یا در بخشی از یک برنامه‌ی دیگر، به عنوان یک کتابخانه استفاده کرد. زیرا دارای پیاده‌سازی متفاوتی نیست و از همان روندی استفاده می‌کند که در React ،Vue یا Angular وجود دارد. در این مواقع از Svelte برای توسعه‌ی کامپوننت‌هایی استفاده می‌شود که در هر جایی به کار می‌روند و پیاده‌سازی آن‌ها به هیچ فریمورکی وابسته نیست. در مقاله Svelte.js چیست با Svelte و ویژگی‌های آن آشنا شدیم. درمورد مزایا و معایب آن صحبت کردیم و تلاش کردیم تا Svelte را از جنبه‌های مختلف بررسی کنیم. در پایان هم چگونگی نصب و شروع کار با آن را توضیح دادیم. در ادامه‌ی این روند و برای شروع برنامه نویسی با Svelte، می‌توانید از آموزش‌های تعاملی وب سایت رسمی آن کمک بگیرید.