نوشته های علی صمدیان

ساخت یک درام پد (Drum Pad) ساده با html و css و js

علی صمدیان — Thu, 02 Dec 2021 23:40:51 +0330

ما قصد داریم در این مطلب یک درام پد ساده مثل عکس بالا رو با html و css و vanilla js بسازیم. یه قابلیتی که این درام پد داره اینکه می تونیم از دکمه های کیبورد هم استفاده کنیم. تو این درام پد از یه گوگل فونت استفاده کردیم و چیدمان صفحه هم با flexbox انجام دادیم. در کل سعی کردم خیلی ساده باشه و چیز خاصی نداشته باشه. در ضمن کل فایل های اصلی با فایل های صوتی درام کیت رو تو این لینک تو گیت هاب گذاشتم.خوب اول از همه تو پوشه پروژمون یه پوشه به اسم sounds ساختیم و فایلای صوتی درام کیتمون رو داخل اون ریختیم. حالا بریم سراغ فایل html همونطور که تو عکس زیر می بینیم از بالا به ترتیب یه تگ p بالا داریم و دو تا div با کلاس های first-row و second-row داریم تو هرکدوم اونا هم شش تا div دیگه هست که همون دکمه درام پدمون هستن و تو هرکدوم از این div ها یه حرف انگلیسی با یه تگ audio هستش که سورس این audio ها به فایل های صوتی درام کیتمون تو پوشه sounds هستش. آخر سر هم دوباره یه تگ p دیگه داریم.فایل css هم خیلی سادست و توضیح نمی دمش. برای فایل js هم کدشو در زیر آوردیم. ابتدا دو تا متغیر ساختیم که اولیش همه دوازده تا div با کلاس div-drum رو بهمون بر میگردونه و دومیش هم دوازده تا تگ audio رو بهمون برمیگردونه. بعدش دوتا لوپ for داریم که تو هر کدومشون یه EventListener گذاشتیم. EventListener لوپ اول برای کلیک موس هستش و EventListener لوپ دوم برای کلید های مشخص شده کیبورد هستش که برای لوپ دوم همونطور که می بینید همه کلید هایی که میخایم استفاده کنیم رو داخل یه آرایه ریختیم با یه if چک میکنیم که اگه کلید فشار داده شده یکی از کلید مشخص شده تو آرایه ما باشه تگ audio پلی بشه.const divDrum = document.getElementsByClassName("div-drum");const audioDrum = document.getElementsByClassName("audio-drum");for (let i = 0; i < divDrum.length; i++) { divDrum[i].addEventListener("click",(playDrumMouse = () => { audioDrum[i].play(); audioDrum[i].currentTime = 0; divDrum[i].style.background = "#ffd700" setTimeout(function () { divDrum[i].style.background = "black" }, 100); }));}buttonArray = ["t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h"];for (let i = 0; i < buttonArray.length; i++) { const element = buttonArray[i]; document.addEventListener("keydown",(playDrumKeyboard = (event) => { if (event.key == element) { audioDrum[i].play(); audioDrum[i].currentTime = 0; divDrum[i].style.background = "#ffd700" setTimeout(function () { divDrum[i].style.background = "black" }, 100); } }));}نکته آخر، دستور زیر کاربردش اینکه وقتی این دستور نباشه برای هر بار پلی شدن یه تگ audio باید وایسیم تا آخر پلی شه بعد دوباره پلیش کنیم ولی با این دستور می تونیم قبل تموم شدنش دوباره تگ audio رو پلی کنیم. می تونید پاکش کنید و امتحان کنید. ممنون از توجهتون.audioDrum[i].currentTime = 0;

ساخت یک اکانت اینستاگرام با کتابخانه selenium و سایت emaildrop

علی صمدیان — Tue, 30 Nov 2021 08:13:36 +0330

ما قصد داریم یه اکانت اینستا با استفاده از کتابخانه سلنیوم، سیستم ایمیل موقت emaildrop، زبان پایتتون و کمی جاوا اسکریپ بسازیم هدف از این پست آشنایی با کتابخانه selenium و بعضی از دستوراتش هست.ابتدا با دستور زیر کتابخانه سلنیوم رو نصب می کنیم:pip install seleniumقبل از شروع باید وب درایور متناسب با مرورگرمون (کروم یا موزیلا) رو دانلود کنیم و اون رو داخل پوشه ای که فایل پایتون قرار داره قرار بدیم، اینجا از مرورگر کروم استفاده می کنیم و از این لینک می تونید مناسب با نسخه کرومتون وب درایور رو دانلود کنید. ضمنا می تونید فایل وب درایور رو پیش فایل پایتون قرار ندید و بهش ادرس دهی کنید که می تونید سرچ کنید راجبش.حالا یک فایل پایتون می سازیم و با ایمپورت کردن شروع می کنیم. خط اول برای ایمپورت وب درایور از سلنیوم هست و بعدش sleep رو از ماژول time ایمپورت می کنیم و در خط سوم صفحه کیبورد را از سلنیوم ایمپورت می کنیم، چون در ادامه در یک مرحله از کلید اینتر یا همون Return استفاده می کنیم:from selenium import webdriverfrom time import sleepfrom selenium.webdriver.common.keys import Keysحالا با دستور زیر یه نسخه وب درایو می سازیم و اسمش رو driver میزاریم:driver = webdriver.Chrome()با دستور زیر (get) می تونیم وارد آدرس دلخواهمون بشیم که ما می خوایم وارد آدرس سایت ایمیل دراپ بشیم و در خط دوم از دستور sleep استفاده می کنیم تا 4 ثانیه مهلت بدیم صفحه لود بشه از اینجا به بعد به دستور sleep اشاره نمی کنم و تا آخر برای مهلت دادن ازش استفاده می کنم :driver.get("https://www.emaildrop.io/") sleep(4)سایت ایمیل دراپ لود میشه همونطور که تو عکس می بینید سایت خودش یه ادرس ایمیل رندوم داده ولی اگه ما از این ایمیل استفاده کنیم چون آدرس عجیب و غریبیه اینستاگرام میفهمه ایمل فیکه و ایمیل وریفای کردن اینستاگرام بهمون نمیرسه و ما می خوایم روی دکمه CUSTOM کلیک کنیم تا یدونه سفارشی برای خودمون بسازیم:برای کلیک کردن روی CUSTOM باید مسیر full Xpath اون رو کپی کنیم برای این کار ابتدا روی کلید F12 کلیک می کنیم و با موس روی قسمت شماره یک عکس که برای اینسپکت کردن یک المان خاص در صفحه است کلیک میکنیم و سپس با موس روی CUSTOM (شماره 2 در عکس) کلیک می کنیم که با این کار در قسمت سمت راست صفحه المان مورد نظر آبی رنگ میشه سپس روی المان آبی شده با موس راست کلیک میکنیم وارد تب Copy شده و روی Copy full Xpath (شماره 3 عکس) کلیک می کنیم.حالا باید آدرس کپی شده را داخل پرانتز دستور ("")driver.find_element_by_xpath وارد کنیم. با این دستور می توان المان را بر اساس Xpath پیدا کرد و سپس با ()click روی آن کلیک کرد. بعد از Paste کردن این آدرس به صورت زیر می شود:driver.find_element_by_xpath("/html/body/div/div/main/div/div[1]/div/div/div[2]/button[3]").click()sleep(3)مطابق عکس زیر حالا یک قسمت input برای ما باز شده است.مثل بالا باید full Xpath آن input را کپی کنیم و در یک داخل پرانتز دستور driver.find_element_by_xpath قرار دهیم. یک متغیر به نام myname می سازیم و یک اسم دلخواه ساده مثل پدرام را برای آن در نظر می گیریم و در ادامه از دستور ()send_keys. برای پر کردن input استفاده می کنیم که داخلش myname را قرار می دهیم:myname = "pedraam" driver.find_element_by_xpath("/html/body/div/div/main/div/div[1]/div/div/div[1]/div/code/input").send_keys(myname) sleep(2)حالا باید روی دکمه اینتر کلیک کنیم تا ایمیل ساخته بشه در دستور زیر از همون full Xpath برای input استفاده می کنیم و در قسمت send_keys برای دکمه اینتر دستور keys.RETURN را وارد می کنیم که به صورت زیر می شود:driver.find_element_by_xpath("/html/body/div/div/main/div/div[1]/div/div/div[1]/div/code/input").send_keys(Keys.RETURN)sleep(3)با دستور ()driver.execute_script می توان از زبان جاوا اسکریپت استفاده کرد دستور زیر را داخل پرانتز این دستور قرار می دهیم تا در یک تب جدید صفحه sign up اینستاگرام را برای ما باز کند. سپس در خط بعد از درایور می خواهیم که به تب دوم برود و ادامه دستورات را در آنجا ادامه دهد دقت کنید که driver.wondow_handle[0] یعنی تب اول و driver.wondow_handle[1] یعنی تب دوم: driver.execute_script("window.open('https://www.instagram.com/accounts/emailsignup/','_blank');")sleep(1)driver.switch_to.window(driver.window_handles[1])sleep(8)اکنون وارد صفحه sign up اینستاگرام شده ایم:در این قسمت احتیاج به ایمیل، نام، یوزرنیم و پسورد داریم. متغیرهای زیر را برای آنها می سازیم، برای emailaddress از متغیر myname که پیشتر ساخته بودیم استفاده کردیم و سپس متغیرها را در فیلدهای مرتبط وارد می کنیم:emailaddress = myname + "@emaildrop.io"username = "pedraamhasani_2876"fname = "pedraam hasani"passw = "Pedraam2876"driver.find_element_by_name("emailOrPhone").send_keys(emailaddress)sleep(1)driver.find_element_by_name("fullName").send_keys(fname)sleep(1)driver.find_element_by_name("username").send_keys(username)sleep(1)driver.find_element_by_name("password").send_keys(passw)sleep(2)سپس با دستور جاوا اسکریپت زیر روی دکمه ساین آپ کلیک می کنیم. اینطور که من خوندم دلیل اینکه از fullXpath در سایت اینستاگرام استفاده نمی کنیم اینه که اینستاگرام چند وقت یبار fullXpath هارو تغییر میده ولی اینطوری بدون مشکل میتونیم استفاده کنیم:driver.execute_script("""var submitbutton = document.getElementsByTagName("button");for (i = 0; i < submitbutton.length; i++) {if (submitbutton[i].textContent == "Sign up") {submitbutton[i].click();break;}}""")sleep(4)صفحه بعد مشخصات تولد هستش که از سه تا فیلدی که باید پر کنیم دو تاش را کاری نداریم و فقط باید سال تولد رو تغییر بدیم:در خط اول سال تولد رو تغییر دادیم و بعدش با کد جاوا اسکریپت زیر رو دکمه next کلیک می کنیم و بعدش وارد صفحه وریفای کردن میشه و کد وریفای رو بهمون ایمیل کرده:driver.find_elements_by_tag_name("select")[2].send_keys("1982")sleep(2)driver.execute_script("""var nextbutton = document.getElementsByTagName("button");for (i = 0; i < nextbutton.length; i++) {if (nextbutton[i].textContent == "Next") {nextbutton[i].click();break;}}""")sleep(6)حالا با دستور زیر برمیگردیم همون تب اول یا همون emaildrop و مدتی (30 ثانیه) رو منتظر می مونیم تا ایمیل وریفای کردن بیاد بعدش با دستور driver.refresh صفحه رو رفرش می کنیم:driver.switch_to.window(driver.window_handles[0])sleep(30)driver.refresh()sleep(10) حالا ایمیل اومده و ما می خوایم اون عدد شیش رقمی رو داخل یه متغییر بریزیم و بریم به تب اینستاگرام و اونجا واردش کنیم:یه متغیر به اسم emailcode می سازیم و متن قسمت مشخص شده در شکل بالا از روی fullXpath رو مطابق کد زیر داخلش می ریزیم و با یک لوپ شش کارکتر اول اون متن که همون شش رقم کد ما هستش رو داخل متغیر mycode می ریزیم:emailcode=driver.find_element_by_xpath("/html/body/div/div/main/div/div[2]/div/span/div/div/a/div[2]").textsleep(2)mycode = ""for i in range(6): mycode += emailcode[i]sleep(1)حالا بر میگردیم به تب دوم (اینستاگرام)، متغیر mycode رو در input وارد می کنیم و با کد جاوا اسکریپت رو دکمه next کلیک می کنیم:driver.switch_to.window(driver.window_handles[1])sleep(2)driver.find_elements_by_tag_name("input")[0].send_keys(mycode)sleep(2)driver.execute_script("""var nextbutton = document.getElementsByTagName("button");for (i = 0; i < nextbutton.length; i++) {if (nextbutton[i].textContent == "Next") {nextbutton[i].click();break;}}""") sleep(8)و تمام وارد صفحه اول اینستاگرام می شویم در انتها می توانید با دوبار استفاده از دستور driver.close تب ها را ببندید:driver.close()sleep(1)driver.close()فقط این کار رو با هر آی پی حدودا چهار بار می تونید انجام بدید بعدش اینستاگرام مشکوک میشه و برای یه مدتی آی پی شما رو بلاک میکنه و از صفحه sign up جلوتر نمی تونید برید.

آموزش روش استفاده از زبان فارسی در نرم افزار فیگما - Figma

علی صمدیان — Fri, 11 Jun 2021 14:56:26 +0430

سلامبرای استفاده از زبان فارسی در figma احتیاج به نصب یکی از پلاگین های مربوط به زبان های راست به چپ در فیگما است. برای شروع در نرم افزار فیگما نوار منو را باز کرده و روی گزینه plugins رفته و در نوار باز شده روی گزینه Browse plugins in Community کلیک کنید.در پنجره باز شده روی قسمت Search Community کلیک کرده و عبارت rtl را جستجو کنید. مجموعه ای از پلاگین ها که مربوط به زبان های راست به چپ می باشد را به عنوان نتیجه جستجو مشاهده می کنید. برای نمونه یکی از محبوب ترین پلاگین را که به اسم Arabic & RTL Support می باشد را انتخاب کرده و روی گزینه Install کلیک کنید.حالا مطابق عکس زیر روی متن خود راست کلیک کرده و در نوار Plugins روی Arabic & RTL Support که پیش تر نصب کردید کلیک کنید.پس از کلیک پنجره زیر باز می شود که به راحتی می توانید متن خود را در آن وارد کنید که به صورت خودکار در تکست باکس اصلی شما هم وارد می شود. فقط توجه داشته باشید که فونت مورد استفاده شما زبان فارسی را پشتیبانی کند در غیر اینصورت متن مورد نظر در تکست باکس اصلی شما نمایش داده نمی شود.