ابزار CSS Animation Generator یه ابزار کاربردی برای توسعه‌دهندگان فرانت‌انده که امکان تولید سریع و دقیق انیمیشن‌های CSS رو بدون کد زدن فراهم می‌کنه.
با این ابزار می‌تونی انیمیشن‌های از پیش تعریف‌شده رو انتخاب کنی یا به‌صورت کامل سفارشی‌سازی انجام بدی.
مثلا تنظیم ویژگی‌هایی مثل:
animation-name
animation-duration
animation-delay
animation-timing-function

این ابزار نه‌تنها فرآیند ساخت انیمیشن رو ساده می‌کنه، بلکه بهت کمک می‌کنه کد های بهینه‌تری تولید کنی و زمان توسعه رو کاهش بدی، بدون اینکه نیاز به نوشتن دستی keyframes یا تست مداوم داشته باشی.

webcode.tools/css-generator/keyframe-animation

#Frontend@AxiomLite

✍ Arsalan

@AxiomLite

روز دانشجو مبارک! 👨‍💻

برنامه نویس ها برای اینکه XSS نخورن می‌آن و CSP هایی تنظیم می‌کنن که از اسکریپت های خارجی جلوگیری کنه ولی با خیال خوش inline-style رو باز می‌زارن و اصلا بهش توجهی نمی‌کنن.
ولی حواستون یاشه توی کد های CSS هم می‌شه کد JS ران کرد.

مثلا:

background-image: url("javascript:alert('XSS')");

#Security@AxiomLite

✍ Arsalan

@AxiomLite

اگه تازه سایت می‌خواین بیارین بالا با این سایت می‌تونین آنالیزش کنید و بهتون می‌گه چیکار کنید که سرعت لودش بره بالا.
این سایت مال شرکت Google هست:

pagespeed.web.dev

#Website@AxiomLite

✍ Arsalan

@AxiomLite

اگه دوست دارین لینوس توروالدز بیاد جز کانتریبیوتر شما بشه کافیه این خط رو به آخر کامیتتون اضافه کنید.

#Fun@AxiomLite

✍ Arsalan

@AxiomLite

مرورگر ها موتور رندر و تفسیر UI متفاوتی دارن و ممکنه یه تغییرات جزئی توی نمایش وبسایت ها داشته باشن.
موقع طراحی وبسایت حتما اونو روی همه مرورگر ها و ورژن های پر استفاده تست کنید.
این وبسایت بهتون ماشین مجازی با همه مرورگر ها و همه ورژن هاش می‌ده و می‌تونید سایتتون رو تست کنید.

browserling.com

#Website@AxiomLite
#Frontend@AxiomLite

✍ Arsalan

@AxiomLite

Uptime Kuma is a great server monitoring tool and lets you to realize immediately when any issues happend by email or telegram.

با ابزار Uptime Kuma می‌تونین به طرز زیبایی سرورتون رو مانیتور کنید و زمانی که مشکلی پیش اومد مثلا از ایمیل یا تلگرام بهتون خبر بده.

github.com/louislam/uptime-kuma

#Website@AxiomLite

✍ Arsalan

@AxiomLite

Any objections, suggestions or anything that you thing that can be helpful for others and it should be shared, please send it to me by channel direct messages or tag @ArsalanJafarnezhad on group.
Or you can come to my private messages.
(Also you can send it on comments of this post)

هر انتقاد یا پیشنهادی داشتید یا هرچی که فکر میکنید میتونه برای دیگران مفید باشه از طریق دایرکت کانال یا تگ کردن
@ArsalanJafarnezhad
تو گپ به من اطلاع بدید.
یا حتی میتونید بیاید پیوی من.
(میتونید زیر کامنتای همین پستم بگید.)

#Owner@AxiomLite

✍ Arsalan

@AxiomLite

18 millions of icons for website design.

18 میلیون آیکون برای کمک به طراحی وبسایت.

www.flaticon.com

#Frontend@AxiomLite

✍ Arsalan

@AxiomLite

Clean code guide for JS.

راهنمایی کد تمیز برای JS.

github.com/ryanmcdermott/clean-code-javascript

#Repository@AxiomLite
#JavaScript@AxiomLite

✍ Arsalan

@AxiomLite

If you want to know more and base rules for other languages, "Refactoring" website is great.

اگر خواستید بیشتر بندونید و راجب قواعد کلی برای زبان های دیگه رو هم بدونید، سایت "Refactoring" عالیه.

refactoring.guru/refactoring

#Website@AxiomLite

✍ Arsalan

@AxiomLite

Here you can find lots of promps for better usage of AI.

اینجا می‌تونین کلی پرامپت برای استفاده بهتر از هوش مصنوعی پیدا کنید:

prompts.chat

#Website@AxiomLite
#AI@AxiomLite

✍ Arsalan

@AxiomLite

We can find animation's name thats in our mind for explaining to the frontend developers.

ما که فرانت زیاد سر در نمی‌آریم برای اینکه انیمیشن خاصی که توی ذهنمون هست رو به فرانت کارا توضیح بدیم می‌آیم اینجا پیداش می‌کنیم و اسمشو در می‌آریم:

animate.style

#Frontend@AxiomLite

✍ Arsalan

@AxiomLite

You can check you website's problems by this checklist (88 items).

گاهی اوقات ممکنه یادتون بره یسری کارا رو تو صفحه وبی که میسازید انجام بدید.
با این سایت چکشون کنید.

frontendchecklist.io

#Website@AxiomLite
#Frontend@AxiomLite

✍ Arsalan

@AxiomLite

With this repository you can learn 33 topics of JS, These are usefull everywhere, specialy in real projects and clean coding.

با این ریپازیتوری 33 تا مفهوم JS رو می‌تونی یاد بگیری، از closure و scope بگیر تا event loop. این چیزها هر جا باشی به کارت میاد، مخصوصاً وقتی پروژه‌های واقعی داری و می‌خوای راحت‌تر دیباگ کنی یا کد تمیز تحویل بدی.
URL:

github.com/leonardomso/33-js-concepts

#Repository@AxiomLite
#JavaScript@AxiomLite

✍ Arsalan

@AxiomLite

To converting AD date to solar date or displaying "5 minutes ago", Moment can handle it in a few lines of code.

برای تبدیل یه تاریخ میلادی به شمسی یا نمایش زمان به‌صورت "5 دقیقه پیش" تو جاوااسکریپت کتابخونه Moment اینو با چند خط کد حل می‌کنه.
URL:

github.com/moment/moment

#Repository@AxiomLite
#JavaScript@AxiomLite
#Frontend@AxiomLite

✍ Arsalan

@AxiomLite