کداکسپلور | CodeExplore
7.93K subscribers
1.93K photos
302 videos
103 files
1.69K links
با کد اکسپلور یاد بگیر، لذت ببر و بروز باش ⚡️😉

سایت کد‌اکسپلور:
CodeExplore.ir
👨🏻‍💻 ارتباط با ما :
@CodeExploreSup
گروه :
@CodeExplore_Gap
تبلیغات در کد اکسپلور :
@CodeExploreAds
Download Telegram
☕️ افزونه‌های کاربردی کروم، برای توسعه‌دهندگان👨‍💻

👉 Wappalyzer
🔖 افزونه کاربردی، برای اینکه بفهمین صفحات وب رو با چه تکنولوژی‌هایی طراحی کردن...

👉 Clear Cache
🔖 تا حالا شده توی کد یه تغییری بدین و توی خروجی وب تغییری نبینید؟! اینجور وقتا باید حافظه کش رو خالی کنید که با این افزونه میتونید اتوماتیک این کار رو انجام بدین.

👉 WhatFont
🔖 وبسایت‌ها چه فونتی استفاده میکنن؟! با این افزونه به این موضوع پی ببرین!

👉 ColorPick Eyedropper
🔖 با این افزونه میتونید رنگ‌های عناصر مختلف رو توی صفحات وب بردارین...

👉 CSS Viewer
🔖 با این افزونه میتونید سی‌اس‌اس عناصر مختلف رو ببینید...

#web #developer #chrome
☕️ @CodeExplore
20
سه تا از بهترین ابزار های ایده یابی طراحی سایت 🔥

با این سه تا سایت میتونید ایده های خفن طراحی سایت و برنامه نویسی پیدا کنید 😎

🔹pagecollective.com
🔹dribbble.com
🔹awwwards.com

#ideas #web #development
☕️ @CodeExplore
🔥13❤‍🔥63
ساختار صفحه HTML از سه بخش اصلی تشکیل شده که براتون پایین توضیحات هر کدومشون رو قرار میدم :

قسمت سر (head):

این بخش حاوی اطلاعات کلی در مورد صفحه است، مانند عنوان صفحه، توضیحات صفحه، و همچنین متا تگ‌هایی که می‌توانند برای موتورهای جستجو مفید باشند.

قسمت بدنه (body)

: این بخش حاوی محتوای اصلی صفحه است، مانند متن، تصاویر، ویدیوها، و سایر عناصر HTML.

قسمت پایانی (footer):

این بخش حاوی اطلاعاتی مثل حق کپی رایت، اطلاعات تماس، لینک مقالات و لینک شبکه‌های اجتماعی است و از اهمیت بسیار ویژه‌ای برخوردار است.

ساختار کلی یک صفحه HTML به شکل زیر هست
:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>عنوان صفحه</title>
  <meta name="description" content="توضیحات صفحه">
</head>
<body>
  محتوای اصلی صفحه
</body>
<footer>
محتواهای دیگر
</footer>
</html>


#structure #web #پست_پیشنهادی
☕️ @CodeExplore
18❤‍🔥3🔥3
تم های رایگان و متنوع بوت استرپ برای برنامه نویسان فرانت اند 🔝

این طرح ها آپدیت میشن و میتونید از این طرح ها توی طراحی ها استفاده کنید طرح ها همراه با کد هاشون قرار داده شدن⚡️

👉 https://bootswatch.com

#bootstrap #frontend #web
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
8🔥2❤‍🔥1
ریپازیتوری از برنامه های کاربردی وب آسیب پذیر 💯

یک فهرست جامع نگهداری شده از تمام برنامه های کاربردی وب آسیب پذیر برای یادگیری امنیت وب ☄️

🌪 github.com/OWASP/OWASP-VWAD

#security #owasp #web
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥3🔥3
آیکن های آماده در فرمت های مختلف برای استفاده در طراحی های وب و موبایل 🔥

👉 pixelbuddha.net/freebie/web-and-mobile-icons-bundle

#icon #web #app
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥7🔥42
💻 یک فول استک دولوپر به چه چیز هایی باید تسلط داشته باشه؟

⭐️ البته توجه داشته باشید که تسلط به همه اینها ضروری نیست،مثلا اگر پایتون و جنگو بلد باشید لازم نیست node js بلد باشید!

#web #fullstack
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥176❤‍🔥4
دوتا منبع کاربردی و مفید برای یادگیری برنامه نویسی وب و اندروید همراه با مدرک معتبر که میتونید ازشون برای یادگیری برنامه نویسی استفاده کنید.

🔗https://web.dev/learn

🔗https://developer.android.com/courses

#web #android
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
8❤‍🔥3🔥1
⚪️سایت Omatsuri یک جعبه ابزار برای web developer هاست که شامل ابزارهای مختلفی مثل Page dividers ،SVG compressor، Gradient generator و بسیاری از ابزار های دیگه هست و میتونه توی فرایند توسعه وب به شما کمک کنه. Omatsuri به صورت اوپن سورس ارائه شده و تمام ابزارهای اون به صورت رایگان قابل استفاده هستن.

🔗 https://omatsuri.app

#web #developer #tools
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥2🔥1
✌️ 4 کتابخونه معروف جاوااسکریپت که برای بازی سازی تحت وب می تونین استفاده کنید:

1️⃣Three.js

2️⃣PhaserJs

3️⃣Babylon.js

4️⃣CreateJs

#javascript #game_development #web
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥9🔥42
🔥میخایم باهم بررسی کنیم که مرورگر ها چه کارایی انجام میدن تا وب سایت ها داخلشون اجرا بشه

1️⃣ درخواست و پاسخ HTTP:
- وقتی شما یک آدرس وب (URL) وارد می‌کنید، مرورگر یک درخواست به سرور ارسال می‌کند.
- سرور جواب را به مرورگر برمی‌گرداند که شامل محتوای صفحه (مثل HTML، CSS، جاوااسکریپت، و تصاویر) است.

2️⃣ تجزیه و تحلیل محتوا:
- مرورگر HTML را تحلیل کرده و یک مدل درختی به نام DOM می‌سازد.
- CSS را هم تحلیل کرده و به DOM اضافه می‌کند تا مدل CSSOM ساخته شود.
- جاوااسکریپت هم اجرا می‌شود و ممکن است تغییراتی در DOM بدهد.

3️⃣ نمایش صفحه:
- مرورگر مدل‌های DOM و CSSOM را به یک درخت رندرینگ تبدیل می‌کند.
- مکان و اندازه هر عنصر مشخص می‌شود و سپس عناصر به نمایش در می‌آیند.

4️⃣ تعاملات کاربر:
- مرورگر به کلیک‌ها، تایپ‌ها و اسکرول‌ها پاسخ می‌دهد.
- این تعاملات ممکن است باعث درخواست‌های جدید HTTP یا تغییرات در صفحه شوند.

5️⃣ بهینه‌سازی و کشینگ:
- مرورگر از کش برای کاهش زمان بارگذاری صفحات استفاده می‌کند.
- کش مرورگر می‌تواند شامل فایل‌های HTML، CSS، جاوااسکریپت، و تصاویر باشد.

مرورگرهای محبوب و موتورهای رندرینگشون:
- گوگل کروم: موتور Blink
- فایرفاکس: موتور Gecko
- سافاری: موتور WebKit
- مایکروسافت اج: موتور Blink

این فرآیندها به سرعت انجام میشن تا کاربر سریع تر وبسایت رو ببینه

#browser #web
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
18🔥5❤‍🔥4
👾هوش مصنوعی Uizard به برنامه نویسا و طراحان این امکان رو میده به‌ سرعت رابط‌های کاربری (UI) و نمونه‌های اولیه (prototype) برای پروژه سایت یا اپ های خودشون بوجود بیارن. این ابزار قابلیت تبدیل طرح های ساده به کد و یا طرح داره و به برنامه نویسا کمک میکنه تا فرایند طراحی رو سریعتر انجام بدن.

🔗https://uizard.io/

#ui #app #web #programming
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥75❤‍🔥1
🔥یه سایت خفن آوردم که اگه بک اند کار هستین خیلی به کارتون میاد، با استفاده از سایت زیر میتونین تمرین وب اسکرپینگ انجام بدین و مهارتتون رو افزایش بدین، لذتشو ببرین

🌐 scrapethissite.com

#site #web_scraping
☕️ @CodeExplore </DENVER>
Please open Telegram to view this post
VIEW IN TELEGRAM
13❤‍🔥3🔥2
3 ابزار کاربردی برای طراحان سایت 🔥

1⃣ سایت Uicolors.app
با استفاده از این سایت میتونید کلی پالت رنگی زیبا و جذاب با دسترسی به کد رنگ هاش داشته باشید.

2⃣ اکستنشن CSS Viewer
با این اکستنشن میتونید کد های CSS صفحه یا المان های مختلف صفحه رو ببینید.

3⃣ سایت Cssgradient.io
یکی از مواردی که توی جذابیت طراحی بهتون کمک میکنه استفاده از گرادینت های جذاب و کاربرپسند هستش که توی این سایت میتونید کلی گرادینت جذاب رو یکجا داشته باشید.

#web #developer #tools
☕️ Telegram | Website | Discord
❤‍🔥10😍2🔥1
سه تا ابزار محبوب که کار طراحای سایت رو راحتر میکنن💯

1- برای بهینه تر کردن فایل های CSS پروژه میتونی ازش استفاده کنی. فایلاتو آپلود میکنی و جاهایی کدهات که میتونه بهینه تر باشه رو بهت میگه.

🔗 https://projectwallace.com

2- دریافت دکمه های انیمیشن دار ، برای دارک مود سایت
🔗 https://toggles.dev

3- برای ساخت bento grid میتونی از سایت های پایین استفاده کنی که یکی برای CSS و یکی برای Tailwind هست

🔗 https://tailwindgen.com
🔗 https://cssgridgenerator.io

اگر دوست داری برای زمینه های دیگه هم ازین ابزارای محبوب بزاریم، ری اکشن بزن و برای دوستات هم بفرست🧡🔥

#web #design #tools
☕️ Telegram | Website | Discord
🔥82❤‍🔥1
🌀 ریپوی Jetzig یه فریم‌ورک تحت وب مدرن و مینیماله که با زبان Zig نوشته شده. باهاش می‌تونی اپلیکیشن‌های وب سریع و سبک بسازی بدون نیاز به زبان‌ Python یا Node.

GitHub: https://github.com/jetzig-framework/jetzig

#zig #web #web_application #github #repo
☕️Telegram | Website | Discord
6❤‍🔥2
زبان و فریمورک های رایج مورد استفاده توی هر کدوم چیه؟🧐

#languages #web #software #machine_learning
☕️Telegram | Website | Discord
🔥13❤‍🔥21
🚀 اگه دنبال طرح و ایده برای نمونه کار برنامه نویسی وب میگردید سایت Portfolio Ideas مجموعه ای از نمونه های سایت های Portfolio رو که بیش از 130 طرح با استفاده از زبان ها و فریم ورک های مختلف فرانت اند و بک اند مثل React, TypeScript, Nextjs, Nodejs و... پیاده سازی شدن رو با لایسنس MIT قرار داده که خیلی راحت میتونید ازشون ایده بگیرید یا با داشتن ایده برای توسعه این نمونه کار ها مشارکت کنید.

🔗https://portfolio-ideas.vercel.app/

#portfolio #web
☕️Telegram | Website | Discord
🔥82❤‍🔥1😍1