نوشته های Davood Habbabi

بررسی event propagation در جاوااسکریپت

Davood Habbabi — Wed, 16 Mar 2022 17:11:54 +0330

مفهوم event propagation خیلی ساده و در عین حال کاربردیه و اگر ازش مطلع نباشیم واقعا ازار دهنده خواهد بود اگر بخوایم به زبان ساده این مفهوم رو توضیح بدیم در واقع وقتی یک ایونتی روی یک المت اتفاق می افته فقط روی همون یه دونه المنت اتفاق نمی افته بلکه توی المنت های والدش هم اتفاق می افته به عنوان مثال به کد زیر دقت کنید.

This is P element This is span element

با توجه به کد بالا اگر فانکش log رو به صورت زیر در نظر بگیریم function(text){ console.log(text) }وقتی روی نوشته This is P element کلیک کنیم توقع داریم توی کنسول مقدار "p" رو ببینیم ولی اینطور نیست و ما به ترتیب دو مقدار p و div رو خواهیم دید دلیلش پدیده ای هست که بهش می گیم event bubbling تعریف event bubblingدر واقع وقتی یه ایونتی توی صفحه اتفاق می افته (مثلا کلیک) اون ایونت از المنت target (المنتی که ایونت از اون شروع شده) به سمت والد خودش حرکت می کنه تا به document و window برسه و اگر ما برای والد های المنت target ایونت تعریف کرده باشیم همه اون ها اجرا خواهند شد تعریف event capturingبه برعکس همین پدیده می گن event capturing در واقع مسیر حرکت ایونت ها برعکسه یعنی ایونت از window شروع می شه و به المنت target می رسه یعنی توی مثال بالا اگر event capturing اتفاق بیفته ما به ترتیب دو مقدار div و p رو خواهیم داشت (ترتیب مهمه)توی مرورگر ها به صورت پیشفرض event bubbling اتفاق می افته و برای این که بتونیم event capturing داشته باشیم باید ارگومان سوم تابع addeventlistener رو true کنیم به مثال دقت کنید element.addEventListener("click", log, true);و اگر بخوایم کلا event propagation اتفاق نیفته و جلوگیری بشه ازش باید از کد event.stopPropagation();استفاده کنیمامیدوارم مفید باشه :)آقا داود

بررسی الگوریتم مرتب سازی Selection Sort

Davood Habbabi — Sat, 24 Jul 2021 12:54:27 +0430

این نوع الگوریتم هم خیلی سادس و فهمیدنش اصلا کار سختی نیست به تصویر بالا دقت کنیدطبق این الگوریتم توی قدم اول میاد و اولین ایندکس از ارایه رو در نظر می گیره و توی بقیه ارایه می گرده دنبال کوچک ترین عدد که کوچک تر از ایندکس اول باشه رو پیدا می کنه وقتی که عددی پیدا کرد که کوچیک تر باشه میاد جای ایندکس اول و عدد کوچک تر رو عوض می کنه توی پالس بعدی ایندکس دوم رو در نظر می گیره و باز بررسی می کنه کوچک ترین عدد که کوچک تر از ایندکس دوم باشه رو پیدا می کنه و جاشونو عوض می کنه این روند به تعداد مقادیر موجود در ارایه ( arr.length) تکرار می شه تا ارایه مرتب بشهاگر دقت کنید خود به خود ارایه ما تبدیل به دو بخش مرتب شده و مرتب نشده از ایندکس صفر تا ایندکس اخر تقسیم می شه این الگوریتم الگوریتم مرتب سازی درجا هستش و نیازی به اشغال حافظه بیشتر رو نداره و در همون ارایه مرتب سازی انجام می شه ولی پرفورمنس خوبی نداره و پیچیدگی زمانی این الگوریتم برابر با O(n^2) است.بریم کدش رو بررسی کنیم function selectionSort(arr) { for (let i = 0; i < arr.length; i++) { let minIndex = i; //(1) for (let j = i + 1; j < arr.length; j++) { if (arr[j] < arr[minIndex]) { minIndex = j; } } if (i !== minIndex) { //(2) const lesser = arr[minIndex]; arr[minIndex] = arr[i]; arr[i] = lesser; } } return arr; }خب خود کد تقریبا همه چیز رو گفته و زیاد به توضیح نداره (1) در این بخش از طریق یه حلقه و یک متغییر کوچک ترین ایندکس بعد از ایندکس n رو پیدا می کنیم(2)در این بخش هم با استفاده از یک متغییر کمکی جای کوچکترین عدد رو با ایندکس فعلی عوض می کنیمامیدوارم مفید باشه :)آقا داود

الگوریتم Bubble Sort یا همون مرتب سازی حبابی

Davood Habbabi — Tue, 20 Jul 2021 18:10:47 +0430

این الگوریتم تقریبا ساده ترین راه برای مرتب سازی یک ارایه از اعداد یا رشته ها هستش نحوه کار کرد این الگوریتم به این نحوه که میاد ایندکس اول رو با ایندکس دوم مقایسه می کنه اگر عدد اول بزرگ تر بود جاشو با عدد دوم عوض می کنه اگر نه دست بهش نمی زنه و به همین نحو تا ایدکس اخر می ره یعنی چی ؟ به عکس پایین نگاه کنید ما اینجا یک ارایه از اعداد مثل ارایه پایین داریمlet array = [ 5 , 1 , 4 , 2 , 8 ]خب عکسو ببینید توی پالس اول 5 بزرگ تر از 1 هستش پس جاشو عوض می کنه خط بعدی باز 5 از 4 بزرگ تره جاشونو عوض می کنه خط سوم 5 از 2 بزرگ تره باز هم جا به جایی صورت می گیره حظ چهارم 5 از 8 کوچیک تره جا به جایی صورت نمی گیره و می ره برای پالس بعدی توی پالس بعدی هم همون مقایسه ها از اول تکرار می شه و این چرخه انقدر ادامه پیدا می کنه تا هیچ جا به جایی صورت نگیره خب به صورت تئوری فهمیدیم این الگوریتم به چه شکله حالا بیاید کد جاوااسکریپتیش رو بنویسیمfunction bubbleSort(array) { let swapped = true; //(1) do { swapped = false; for (let j = 0; j < array.length; j++) { if (array[j] > array[j + 1]) { //(2) let temp = array[j]; //(3) array[j] = array[j + 1]; array[j + 1] = temp; swapped = true; //(4) } } } while (swapped); return array; }کد بالا رو ببینید(1) اول اومدیم یه متغییر تعریف کردیم تا بتونیم تشخیص بدیم که ایا توی هر پالس جا به جایی صورت می گیره یا نه (2) شرط گذاشتیم که ایندکسمون با ایندکس بعدیش بزرگ تره یا نه و اگر بزرگ تر باشه جا به جایی انجام می شه در غیر این صورت هیچ اتفاقی نمی افته (3) حین جا به جایی ایندکس فعلی رو می ریزیم توی یک متغییر به اسم temp تا داشته باشیم و خط بعدش میایم ایندکس فعلی رو با اندکس بعدیش جا به جا می کنیم و مقدار temp رو می ریزیم تو ایندکس بعدی (4) وقتی شرط اجرا می شه در واقع یعنی یک جا به جایی صورت گرفته و بالاتر توضیح دادم که وقتی جا به جایی داشته باشیم به این معنی که پالس بعدی هم داریم و باید انقدر پالس ها رو اجرا کنیم تا هیچ جا به جایی اتفاق نیفته پس مقدار رو true می کنیم تا do while یک بار دیگه اجرا بشه پیچیدگی زمانی این الگوریتم توی بهترین حالت برابر (n)O هستش و در حالت متوسط و بد (n * n)O هستش و بهترین حالت وقتیه که ارایه از قبل مرتب شده باشه و بدترین حالت وقتیه که ارایه برعکس مرتب شده باشه که ذاتا پرفرمنس خوبی نداره و الگوریتم های بهتری (از نظر زمان) برای مرتب سازی وجود داره که توی پست های بعدی معرفی خواهم کرد این الگوریتم یک روش مرتب سازی درجا هستش یعنی برای مرتب سازی از فضای جانبی کمک نمی گیره و با جا به جا کردن ایندکس های خود ارایه اون ها رو مرتب می کنه امیدوارم مفید باشه :)آقا داود

شبه المنت ها و شبه کلاس ها در css

Davood Habbabi — Wed, 05 May 2021 17:09:38 +0430

رفقا سلام امروز در خدمتتون هستم با معرفی نیم المنت ها و نیم کلاس های css امیدوارم به دردتون بخوره 1 . شبه المنت یا نیم المنت (pseudo elements)یه مفهومی توی css وجود داره به اسم شبه المنت یا نیم المنت به این صورت که یه سری المنت ها به صورت خارجی وجود ندارن ولی می شه بهشون با css استایل داد و یا اصلا به صورت المنت باهاشون رفتار کرد یا اصلا ایجادشون کرد مثلا :نیم المنت after :در واقع این بزرگوار میاد قبل از شروع المنت اصلی یه نیم المنت ایجاد می کنه می شه در حد تکست و فونت ایکون بهش محتوا داد و استایل های مختلف بهش داد نیم المنت before :این هم مثل after عمل می کنه با این تفاوت که بعد از المنت اصلی ایجاد می شه نیم المنت first-letter :همون طور که از اسمش پیداس میاد حرف اول المنت اصلی رو می گیره و شما می تونید مثل بقیه المنت ها بهش استایل بدیدنیم المنت first-line :ایشون هم خط اول رو هدف قرار می ده و می تونید خط اول المنت اصلی رو هر استایلی که بخواید بدید نیم المنت marker :در تگ های ol و ul وقتی که لیست ایجاد می کنید در کنار لیست ایتم ها یک علامت به صورت عددی یا ایکونی وجود داره با استفاده از نیم المنت marker می تونید به اون بخش استایل بدید نیم المنت selection :توی صفحات وب شما می تونید بخشی از متن رو سلکت کنید و روی اون بخش عملیات مختلف انجام بدید مثل کپی و پیست و هر عملیات دیگه ای با استفاده از این نیم المنت می تونید به بخش های سلکت شده توسط موس استایل های متفاوت بدید 2 . شبه کلاس یا نیم کلاس (pseudo classes)با استفاده از این شبه کلاس ها شما می تونید به حالت های خاصی از المنت اصلی استایل های مختلفی بدید به عنوان مثال وقتی که روی یک لینک کلیک کنید و نگهدارید (نیم کلاس active)یا وقتی که کرسر موس رو داخل یک تکست باکس قرار بدید (نیم کلاس focus )*** نکته : تعداد نیم کلاس ها خیلی زیاده من تو این مقاله چند تاییش رو اسم می برم و شما رو میسپارم به دست دوست خوبم w3schools ***نیم کلاس first-child :همون طور که از اسمش پیداست اولین فرزند المنت اصلی رو هدف قرار می ده نیم کلاس hover :این نیم کلاس حالتی رو هدف قرار می ده که نشانگر موس در لحظه روی المنت قرار گرفته باشه نیم کلاس root : مستقیما دایکیومنت اصلی رو هدف قرار می ده(اغلب متغیر های css هم توی همین تعریف می شه )نیم کلاس disabled :حالت غیر فعال المنت رو هدف قرار می ده (یعنی وقتی که اتربیوت disabled داخل المنت فعال باشه) نیم کلاس last-child :همون طور که از اسمش پیداست اخرین فرزند المنت اصلی رو هدف قرار می دهخلاصه شناختن این نیم کلاس ها و نیم المنت های خیلی مهم هستن و شما با دذونستن اینها می تونید بخش خیلی زیادی کد هاتون رو بهینه کنید لینک کامل نیم کلاس ها و نیم المنت ها اینجا هست می تونید خودتون بخونیدش : نیم المنت ها و نیم کلاس ها امیدوارم مفید باشه :)

روتینگ فارسی برای next js

Davood Habbabi — Sun, 21 Feb 2021 14:57:32 +0330

اون دسته از عزیزانی که با next js کار کردن می دونن که روتینگ فارسی نداشت و کلی داستان داریم براش تا بتونیم روت های استاتیک و یا داینامیکی بسازیم یعنی اگر بخوایم داشته باشیم http://localhost:3000/سلامباید توی فایل هامون یه سلام.jsایجاد کنیم و داخلش کدمون رو بنویسیم ولی خب به دلیل این که UTF-8 در فایل سیستم متفاوته با UTF-8 در url همچنان صفحه 404 خواهیم داشت یعنی چی ؟بذارید یه مثال بزنم کلمه "سلام" رو در زبان فارسی در نظر بگیرید این در محیط دسکتاپ برابر است با : \xd8\xb3\xd9\x84\xd8\xa7\xd9\x85ولی در url برابر است با :%D8%B3%D9%84%D8%A7%D9%85خب واضحه که این دو تا رشته با هم برابر نیستن پس وقتی ما در محیط دسکتاپ یه فایل ایجاد می کنیم next سعی می کنه http://localhost:3000/%D8%B3%D9%84%D8%A7%D9%85رو باز کنه در فایل سیستم دنبالش می گرده ولی پیدا نمی کنه چون در فایل سیستم چنین چیزی ذخیره شده http://localhost:3000/\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85خب حالا فهمیدیم مشگل کجاس چطوری حلش کنیم ؟جناب next یه کانفیگی داره به اسم Rewrites که با استفاده از اون می تونیم بگیم از روی فایل سیستم تشخیص نده و فایل ها رو از اونجایی که ما می گیم بخونه در واقع روال قبلی next رو داره دور می زنه و این امکان رو به ما می ده تا بگیم تو کدوم روت چه فایلی رو بخونه بذارید با مثال بریم جلو :فرض کنید محتویات فایل next.config.js یه پروژه ای به این صورته :module.exports = { async rewrites() { return [ { source: '/about', destination: '/', }, ] }, }این یعنی محتویات صفحه http://localhost:3000/aboutداره از فایل index.js پروژه خونده می شه خب این دقیقا چیزیه که ما لازم داریم با یکم تغییرات بیاید برای http://localhost:3000/سلامامتحان کنیم یعنی :module.exports = { async rewrites() { return [ { source:`/${encodeURI("سلام")}`, destination: '/hello', }, ] }, }اون /hello که می بینید در واقع یک فایل hello.js توی پوشه pages ساختیم و اون مقدار ${encodeURI("سلام")} دقیقا انکد شده "سلام" هستش این طوری پیج های غیر داینامیکی رو می تونیم به فارسی روت کنیم حالا بازم اگر لازم باشه همچین روتی داشته باشیم http://localhost:3000/سلام/hiباید داخل فایل next.config.js براش کانفیگ کنیم تا بشناسه یعنی module.exports = { async rewrites() { return [ { source:`/${encodeURI("سلام")}`, destination: '/hello', }, { source: '/${encodeURI("سلام")}/hi', destination: '/hello/hi', }, ] }, }برای پیج های داینامیکی بعد از روت فارسی هم می تونیم اینطوری کانفیگ بنویسیم module.exports = { async rewrites() { return [ { source: '/${encodeURI("سلام")}', destination: '/hello', }, { source: '/${encodeURI("سلام")}/:id', destination: '/hello/:id', }, ] }, }توجه کنید برای این که id رو بگیرید باید توی فولدر pages/hello یک فایل به اسم id].js] بسازیدامیدوارم مفید باشه :)

تفاوت بین var , let و const

Davood Habbabi — Tue, 26 Jan 2021 12:10:15 +0330

با اومدن es6 تعریف متغیر در جاوا اسکریپت تغییر کرد و یه کلید واژه به اسم let وارد جاوا اسکریپت شد فرق const با اون دو تای دیگه که مشخصه const همون طور که از اسمش پیداست یک مقدار ثابت هستش و طی برنامه نمی شه مقدارش رو تغییر داد ولی فرق های let و var :برای فهمیدن تفاوت های let و var باید یکم بیشتر راجع به scope ها بدونید در زمان های دور (es5) دو نوع scope داشتیم یا Global Scope بود یا Function Scope از اسمشونم معلومه چیه دیگه یا مقادیر داخل function ها تعریف می شدن یا به صورت عمومی (که تعریف همچین متغییر هایی به دلیل پرفرمنس جیز بود و نباید انجامش می دادیم )وقتی که es6 اومد یه Scope جدید با خودش آورد به اسم Block Scope حالا بریم ببینیم فرقشون چیهنکته : در جاوااسکریپت هر {} یک بلوک محسوب می شود پس هر کدی که داخل {} قرار بگیرد داخل یک بلوک کد است لازم به ذکر است که Function Scope یک حالت خاص از Block Scope می باشد در واقع function Scope همان Block Scope است که به صورت function تعریف شده باشد نکته 2 : هر function Scope قطعا یک Block Scope است ولی لزوما همه Block Scope ها Function Scope نیستند تیکه کد پایین رو در نظر بگیرید var a = 40 if(a > 10){ var a = 42; } console.log(a); //output : 42به این می گن Global Scope یعنی به صورت عمومی در دسترس هستش که خب استفاده کردن ازش همچنان جیزه :)حالا اینو ببینید let a = 40; if(a > 10){ let a = 42; } console.log(a); //output : 40بیاین یه مثال ملموس تر بزنیم که هم Function Scope استفاده کرده باشیم هم block Scopeکد پایین رو ببینید function (){ let a = 11; var b = 12 if(a > 10 ){ let a = 9; var b = 15; console.log("first log a " , a); console.log("first log b" , b); } console.log("second log a" , a); console.log("second log b" ,b); //output :first log a 9 //output :first log b 15 //output :second log a 11 //output :second log b 15 } چی شد ؟اساسی ترین فرق let و var همین هستش که let حوزش Block Scope هستش و var حوزش Function Scopeیعنی شما اگر مقداری که با let تعریف کردین داخل یه بلوک دیگه (مثل if , else , loop و ...) مجدد با همون نام تعریفش کنید و مقدار بهش بدین بیرون بلوک انگاری که هیچ کاری نکردین و تاثیری روی مقدار بیرون بلوک نخواهد داشت یه تفاوت دیگه هم let و var دارندشما می تونی داخل حوزه var مجدد با همون نام مقدار تعریف کنی ولی با let نمی تونی یعنی چی ؟ کد پایین رو ببین :function (){ var a = 10; var a = "Hello World !" console.log(a); //output : Hello World ! }ولی :function (){ let a = 10; let a = "Hello World !" console.log(a); //output : SyntaxError: Identifier 'a' has already been declared }لازم به ذکره تمامی رفتار های const کاملا مشابه let هستش با این تفاوت که let طی برنامه می تونه مقدار دیگه ای براش جایگذین بشه ولی مقدار const قابل تغییر نیست یعنی :function (){ const a = 10 ; a = "Hello World !" //output : TypeError: Assignment to constant variable. }ولی :function (){ let a = 10 ; a = "Hello World !" console.log(a) //output : Hello World ! }آقا داودامیدوارم مفید باشه :)

مفهوم Hoisting در جاوا اسکریپت

Davood Habbabi — Sun, 24 Jan 2021 16:39:01 +0330

دوستان سلاماین Hoisting قصه ما خیلی اسمش بزرگه ولی خودش هیچی نیست بریم ببینیم چی هس اصلا این کد ها رو در نظر بگیرید console.log(a); // output : ReferenceError : a is not definedو این قطعه کد رو :var a; console.log(a); //output : undefinedفرق این ارور ها چیه ؟اولیش a کلا وجود نداره و کلا ReferenceError می ده و توضیح می ده که متغیر یا ثابتی به اسم a وجود نداره ولی توی مورد دوم a وجود داره ولی مقدارش undefined یعنی مقدار دهی نشده برنامه ارور نمی ده و توی کنسول مقدار undefined چاپ می شه خب حالا Hoisting چیه ؟باز می خوام مثال بزنم این تیکه کد رو در نظر بگیرید :console.log(a); var a = 40; // output : undefined اگر کد های جاوا اسکریپت دقیقا خط به خط کامپایل و اجرا بشن توقع داریم مثل مورد اول با ReferenceError مواجه بشیم و کد اجرا نشه و به ارور بخوره ولی نمی خوره :) و مقدار برابر با undefined می شه چرا ؟می دونیم که کد های جاوا اسکریپت یک بار کامپایل و سپس اجرا می شن تعریف متغییر ها حین کامپایل اتفاق می افته و مقدار دهی به متغییر ها حین اجرا یعنی چی ؟یعنی کامپیوتر کد های بالا رو به این صورت می بینیه var a; console.log(a); a = 40;بخاطر همینه که ارور نمی ده و مقدار undefined می شه معنی Hoisting یعنی بالا کشیدن اگر دقت کنید تعریف متغییر ها به بالای برنامه کشیده شد آقا داود امیدوارم مفید باشه :)

ویژگی onError در تگ img

Davood Habbabi — Sat, 23 Jan 2021 12:57:27 +0330

لود نشدن عکس ها جز فجایعی هستش که توی سایت ها باهاش به رو به رو می شیم اگر هندلش نکنیم وبسایتمون رو از ریخت می اندازهولی خب همچین بی راه حل نیست و می شه این مشکل رو به نوعی کنترل کرد قطعا همچین تصویری رو توی همه سایت ها دیدین به این تصاویر می گن placeholder در واقع این نوع تصاویر جای خالی تصویر اصلی رو پر کرده (ممکنه تصویر لود نشده باشه یا توی لود به ارور خورده باشه)یه ویژگی عکس ها دارن به اسم این ویژگی کمک می کنه تا ما بفهمیم لود شدن عکس به هر دلیلی ارور خورده و می تونیم از نمایش تصویر شکسته در سایت جلوگیری کنیم این تیکه کد ساده رو ببینید function myFunction() { alert('The image could not be loaded.'); } نتیجه این تیکه کد :هر وقت لود عکس به ارور بخوره یه آلرت با متن "The image could not be loaded" به کاربر نمایش داده می شه با همین منطق می تونیم src رو عوض کنیم یا عکس رو حذف کنیم یا هر بلایی سر صفحه بیاریم :)اینم لینک رفرنسMDNw3schoolsامیدوارم مفید باشه

بهترین منبع یادگیری جاوااسکریپت

Davood Habbabi — Sat, 26 Dec 2020 12:42:16 +0330

یه سوالی که اغلب پرسیده می شه و کسی که یکم تو جاوا اسکریپت مهارت داشته باشه در واقع هیچ جوابی براش نداره می پرسی چرا ؟ می گم براتبرای هیچ زبانی اغلبا منبع محکمی نیست بخوای بخونی و دیگه توش قوی باشی چون زبان ها در حال آپدیت هستند و شما باید از هر منبعی برای بروز موندن اطلاعاتت استفاده کنیفقط 30 درصد از برنامه نویسی تئوری هستش و بقیش رو تجربه و سرچ خوب می سازه خیلی از موارد تئوری انقدر عمیقه که اغلبا توی کتاب های جامع بهش نمی رسید پس چی کار باید کرد ؟چطوری باید به سطح مطلوب رسید راهکار من به شما اینه که اصلا مهم نیست با چه منبعی پیش می ری (کامل یا ناقص)مهم اینه که شروع کنی و پیش بری اغلبا مطالعه کردن توی هر زمینه ای کنجکاوی هایی رو پیش میاره این کنجکاوی ها رو باید یادداشت کنید در این صورت دو تا حالت وجود داره یا همون منبعی که می خونید جواب شما رو 4 قدم جلوتر می ده یا این که از قلم انداخته و شما باید جای دیگه دنبالش بگردین دیده شده این نوع سوال ها باعث شده فردی ماه ها درگیر منبع خوب برای مطالعه هستش یا رفرنس خاصی می خواد برای یادگیری در آخر منابعی که می تونید باهاش جاوااسکریپت رو مطالعه کنید w3schools.com (website)javascript.info (website)eloquentjavascript.net (website and book)developer.mozilla.org (website)you don't know js (book series)امیدوارم مفید باشه

مشکل نصب eslint

Davood Habbabi — Sat, 21 Nov 2020 14:08:39 +0330

خب ظاهر این ارور این شکلیه در واقع داره توضیح می ده که به صورت دستی eslint رو تغییر ندید و node modules رو پاک کنید و روندی که هیچ کمکی به حل مشکل نمی کنه و در واقع این یه پیشنهاد عمومی برای رفع مشکلاته کلی گشتم یه جوابی پیدا کردم که نمی دونم چه تاثیراتی روی پروژه می ذاره ولی کار کردروند اینه توی پروژه فایل env. رو پیدا کنید و اگر نیست ایجاد کنید این خط رو بهش اضافه کنید SKIP_PREFLIGHT_CHECK=trueسیو کنید npm start رو متوقف و از نو npm start بزنید :)لطفا اگر کسی اطلاع داره این چه تاثیری روی پروژه می ذاره بهم توی کامنت ها بگید

ساختن بردر خاص با Css

Davood Habbabi — Wed, 15 Apr 2020 17:55:45 +0430

دوستان دیشب توی یک گروه تلگرامی داشتم مشکلات دیگران رو می خوندم تا رسیدم به یک سوال باحال سوال این بود : چطور می شه این بردر رو با Css ایجاد کرد ؟سوالش برام جذاب بود پس سعی کردم این باکس خوشگل رو بسازمخب باید بگم که خود Css کد خاصی نداره که بتونه همچین بردری ایجاد کنه و ما در واقع با ترکیب اشکال ساده تر (مثل دایره ، مربع ، مستطیل ) می تونیم این باکس ها رو ایجاد کنیم خب برای شروع کد HTML زیر رو به عنوان مثال در نظر بگیرید

خب برای شروع باکس demo رو یه ابعاد خیالی بهش می دیم مثلا 400 در 300 پیکسل و بعد بهش یک بردر با ضخامت 5 پیکسل و استایل های دیگه که در نهایت به شکل زیر درمیاد#demo { width: 400px; height: 300px; border: 5px solid #b32fd4; box-sizing: border-box; position: relative; }خب باکسمون به این شکل درمیاد خب حالا باید به این باکس دو تا یک چهارم دایره به دو تا گوشه بالایی باکس اضافه کنیممی دونیم که توی Css دو نیم المنت after و before وجود دارن از این دو تا بزرگوار کمک می گیریم برای ساختن دو تا یک چهارم دایره ولی چطوری ؟کاری نداره کافیه یک باکس با طول و عرض یکسان (مثلا 100 × 100 ) بسازیم و border-radus با همون مقدار (100 پیکسل ) بهش بدیم اینجوری دایره ساخته می شه حالا از 4 طرف بهش بردر می دیم و یک طرف رو برای بردر رنگ مشخص و 3 طرف دیگه رو مقدار رنگ بردر رو transparent می دیم یعنی اینجوری content: "" display: block; width: 100px; height: 100px; border-left: 5px solid #b32fd4; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 100px;خب الان فقط کافیه سمتی که می خوایم بچرخونیمش و جایی که دوست داریم تنظیمش کنیم یعنی اینجوری#demo:after{ content: "" display: block; width: 100px; height: 100px; border-radius: 100px; background: white; box-sizing: border-box; border-right: 5px solid #b32fd4; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: rotate(45deg); position: absolute; top: -55px; left: -55px; }#demo:before{ content: "" display: block; width: 100px; height: 100px; border-left: 5px solid #b32fd4; border-top: 5px solid #b32fd400; border-bottom: 5px solid #b32fd400; border-radius: 100px; background: white; box-sizing: border-box; transform: rotate(-45deg); position: absolute; top: -55px; right: -55px; }نتیجه نهایی این کد ها می شه این تصویربدون درد و خون ریزی تونستیم از این باکس خوشگلا درست کنیم :)

رفع مشکل صفحه سیاه در vsCode

Davood Habbabi — Tue, 14 Apr 2020 15:39:52 +0430

سلام دوستان امروز به یه مشکلی خورم که بعد یکم سرچ و اینا به جوابش رسیدم مشکل آنچنان حاد و خطرناکی نیست ولی خب وقتمو گرفت تا حل بشه بعد از نصب vsCode صفحه کاملا مشکی شد و هر کاری کردم درست نشد (برای مهندس کامپیوتر عموما هر کاری کردم یعنی کامپیوتر رو ریستارت کردم )در واقع چیزی که می دیدم این بودیکم که سرچ زدم این لینکو پیدا کردم :https://github.com/Microsoft/vscode/issues/51701توش نوشته بود برای باز کردنش از این کامند توی ترمینال یا cmd استفاده کنید code --disable-gpuنوشته های دیگر من : رفع ارور esLint , بهترین منبع یادگیری جاوااسکریپت , ویژگی در imgخب این به درد من نمی خورد چون با هر بار برای بازکردن vscode باید از cmd شروع می کردم (دوس دارم با کلیک باز شه ) تازه وقتی با این روش بازش می کردم دیگه ترمینال خود vscode کار نمی کرد بازم سرچ زدم و رسیدم به این لینکhttps://stackoverflow.com/questions/29966747/how-can-i-disable-gpu-rendering-in-visual-studio-codeکه خب مشکلم رو حل کرد جالبه بدونید اون جوابی مشکلمو حل کرد که تیک نخورده بود (پس تو استک اورفلو جواب هایی که تیک نخورده رو هم نگاه بندازید حتما) راه حلی که ارائه شده بود این بود و خب مشکلم رو حل کرد :با روش بالا vsCode رو باز کنید کلید های Ctrl + Shift + P رو بفشاریداون بالا تایپ کنید Preferences: Configure Runtime Arguments (پس از انتخاب یک فایل براتون باز می شه)بعد از باز شدن فایل دستور "disable-hardware-acceleration": true رو به انتهای فایل اضافه کنید خب vscode رو ببندید و دوباره باز کنید :)

چطوری در صفحه HTML یه مثلث بسازیم ؟

Davood Habbabi — Wed, 08 Apr 2020 23:54:59 +0430

سلام همیشه مشکل ساخت مثلث رو در Html داشتیم و چون تگ خاصی در html یا پراپرتی واضحی برای ساخت مثلث ها نبوده گیج می شدیم!خب اینجا میخوام ساخت مثلث بدون درد و خونریزی رو به شما یاد بدم ( وای چقدر بانمکم من ) راه اول (تگ img)استفاده از ایکون های موجود و آپلود کردن کردن اون ها و استفاده شون داخل تگ img هستشاین روش مزیتش سادگی اون در استفاده هستش و برای کسایی که دانش کافی ندارن بهترین روشهولی خب از معایبش می شه به غیر قابل ادیت بودن با کد اشاره کرد یعنی اگر شما نیاز داشته باشی مثلث با hover شدن رنگش تغییر کنه دردسر های زیادی رو باید تحمل کنی راه دوم (استفاده از svg )خب می شه گفت svg اصلا مشکلات تگ img رو نداره یعنی یه تعدادی از خواص این تگ مثل رنگ قابل ادیته ولی اگر لازم باشه بجای مثلث متساوی الضلاع یه مثلث متساوی الساقین داشته باشیم چی ؟باید بگم استفاده و کار آمدی زیادی داره ولی یکی از معایبش اینه که اگر قرار باشه نسبت اضلاع رو تغییر بدیم نیاز داریم با ادیتور های عکس مثل photoshop عکس رو تغییر بدیم و تغییر کد های svg واقعا کار سختیه راه سوم ( استفاده از فونت ایکون ها مثل font awesome )خب این روش هم همچنان مثل svg هستش با این تفاوت که از قبل طراحی شدن و شما فقط باید نصبش کنید و به پروژه اضافشون کنید ولی یه مثلث ساده نباید این همه دردسرتون بده مگه نه ؟راه چهارم ( Css Border )خب خب این راه یه جورایی جز فنون آخر استاد در css حساب می شه و از یه باگ یه قابلیت در آوردنه یعنی چی ؟ببینید فرض کنید یه باکسی داریم با مشخصات زیر :به عنوان نتیجه خواهی داشت (بردر ها رو با رنگ های متفاوت انتخاب کردم تا از طریق رنگ بردر های بالا و چپ و راست و پایین به راحتی مشخص باشه و قابل تفکیک ) :حالا می خوام طول و عرض (width & height) باکس رو برابر صفر قرار بدم به عنوان نتیجه خواهیم داشت :حالا کافیه از 3 جهت دلخواه رنگ border و background-color رو برابر transparent قرار بدید مثلا :به عنوان نتیجه خواهیم داشت :روش خوشمزه ای برای ساختن مثلثه مخصوصا واسه اونایی که مثل من سرشون درد می کنه از روش های غیر متعارف به هدفشون برسن :)))خب حالا فرض کنید بخوام یه دکمه داخل این مثلث هایی که با 4 روش بالا ساختیم بذاریم (یکی نیست بهم بگه چی از جون این مثلث بدبخت می خوای ) خب عملا با 4 روش بالا غیر ممکنه که داخلشون المنت دیگه ای گنجوند ولی یه راه پنجمی هم هست :))))راه پنجم (Css Clip Path)از طریق این قابلیت باحال Css می شه اشکال خیلی زیادی رو ساخت و من قصد ندارم دقیقا منطق کارش رو به شما توضیح بدم (برید مطالعه کنید خب به من چه ) فقط قصد دارم بهتون بگم که از طریق این قابلیت می شه یه div ساده رو تبدیل به مثلثی کرد که می شه توش هر المنت HTML دیگه ای تعریف کردبرای ساختن اشکال مختلف از طریق Clip Path یه سایتی هست که خیلی راحت می تونید باهاش هرچی می خواید بسازید و اصلا نخونید چطوری کار می کنه (مدیونید اگر فکر کنید خودم ازش استفاده می کنم ) ادرس سایت هم اینه : https://bennettfeely.com/clippy/الان که من دارم این مطلب رو می نویسم باید از خاک‌برسر شکن استفاده کنید تا باز بشه نمی دونم از طرف ما یا اونا بستس ولی می دونم که بستساز معایب این روش ساختن اشکال اینه که به صورت دیفالت خاصیت overflow برابر با مقدارhidden هستش یعنی اگر شما المنتی دارید که به هر دلیلی بخشیش یا کلش بیرون شکلتون باشه نمایش داده نخواهد شد (حتی شما دوست عزیز ) راه حلی هم نداره مگر با روش های غیر متعارف دیگه شکلتون رو بسازید