https://virgool.io/magic-box/feed مطالب این انتشارات پیرامون جادوی نهفته درون جعبه کامپیوتر است. مطالبی از جنس مهندسی و پژوهش در حیطه خلق جادویی جدید. fa 2026-06-16 11:06:25 https://files.virgool.io/upload/publication/obzg1geahybc/o4jehh.png https://virgool.io/magic-box https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D8%AF%D9%86%D8%A8%D8%A7%D9%84-%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86-a0xjfmbnvbec سلام به دوستان و همراهان عزیزمثل روال سابق اومدم که یه پروژه کاربردی دیگه رو با هم انجام بدیم.این شمارنده ما مثل شمارنده هایی که توی سایت های مختلف دیدین قراره عمل کنه و تعداد افرادی رو که در شبکه های اجتماعی مختلف شما رو دنبال می کنند رو نشون بده. https://aparat.com/v/PCKj3 بریم ببینیم چی قراره بنویسیم.مثل همیشه اول با فایل html کارو شروع می کنیم.همینجور که میبینید ما CDN مربوط به fontawesome رو اضافه کردیم.داخل تگی که کلاس counter رو داره یه attribute اضافه کردیم که می تونه هر چیزی باشه که ما اسمشو گذاشتیم data-target تا تعداد دنبال کنندگان هر شبکه اجتماعی رو بهش بدیم و توی اسکریپتمون ازش استفاده کنیم.بعد این میریم یه کوچولو فایل css رو تغییر بدیم.توی این قسمت هم CDN مربوط به فونت وزیر اضافه شده به همراه یه سری استایل کلی برای صفحمون.اینجا هم کار خاص انجام ندادیم یه سری تراز بندیا رو انجام دادیم.توی این پروژه استایل خیلی برامون مهم نیست و تمرکز اصلی بیشتر روی اسکریپته.پس بریم سر اصل مطلب:اینجا باید همه المنت هایی که تگ counter دارن رو بگیریم. بعدش از یه forEach استفاده کنیم تا بتونیم همشونو پیمایش کنیم:بعد این همه کدامون قراره توی این حلقه نوشته شه.متن تگ مورد نظرمونو برابر صفر قرار میدیم تا از صفر شروع بشه و یه فانکشن می نویسیم تا بتونیم چندین بار اجراش کنیم و بعد از تعریفش اونو اجرا می کنیم.داخل فانکشنی که تعریف کردیم باید اون Attribute رو که تعریف کردیم رو مقدارش رو بگیریم و اونو به عدد تبدیل کنیم.نکته: توی جاوا اسکریپت با قرار دادن + قبل مقدار می تونیم اونو به عدد تبدیلش کنیم.و مقدار گرفته شده رو تقسیم بر 100 کنیم.(عدد و عوض کنید ببینید چه اتفاقی میفته مثلا 100000) حالا برای نمایش اعداد باید یه شرط بذاریم:نکته: Math.ceil برای گرد کردن اعداد اعشاری به سمت بالا به کار می رود.این پروژه رو حتما یه بار خودتون انجام بدین تا کامل در جریان عملکردش قرار بگیرید.حتما حتما تمرین کنید. با نگا کردن چیز خاصی یاد نمی گیرید.اگه فایل پروژه رو خواستین به گیت هاب من مراجعه کنید.تا پروژه بعد بدرود. جعبه جادویی پوریا فغفوری Fri, 26 Mar 2021 07:40:15 +0430 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-button-ripple-effect-g3nna94qpxpb سلام دوستان امروز با یه پروژه باحال اومدم پیشتون. https://aparat.com/v/qsNAy پروژه امروز خیلی پر کاربرده. یه دکمه که وقتی روش کلیک می کنیم یه موجی روش ایجاد میشه خیلی روی UI تاثیر داره.خوب مثل همیشه اول از همه میریم سراغ html :خوب بعد از این میریم سر وقت استایل دادن به دکمه.اول یه استایل کلی میدیم به صفحمون:حالا دکمه رو استایل می دیم بهش:بعد این می ریم که افکت موج رو ایجاد کنیم که بعدا این کلاسو می خوایم بدیم به یه تگ Span که داخل دکمه می خوایم تعریف کنیم:برای انیمیشن ساخته شده از کد زیر استفاده می کنیم که وقتی المانمون ایجاد میشه این انیمیشن اجرا بشه:ایجا کارمون تموم شد حالا شروع می کنیم به کد زدن با جاوااسکریپت.اینجا همه دکمه ها رو که کلاس ripple دارن رو انتخاب می کنیم و یه رویداد واسه همشون تعریف می کنیم:از این به بعد هر چی که تعریف می کنیم همه داخل رویدادمون قراره تعریف بشن.از رویداد استفاده میکنیم تا مکان کلیک شدن رو به دست بیاریم:بعدش مکان دکمه روی صفحه رو دوباره با استفاده از رویدادمون بدست میاریم:حالا وقتی این دوتا مقدار به دست اومده رو از هم کم کنیم موقعیت کلیک داخل المان دکمه رو بدست میاریم.یادتون نره همه این متغیرارو لاگ بگیرین تا ببینین چه اتفاقی داره میفته.حالا باید جایی که کلیک شده رو بگیریم و دقیقا توی اون نقطه یه دایره ایجاد کنیم.مشکلی که اینجا داریم اینه که بعد از هر کلیک المان circle ایجاد میشه و از بین نمیره پس کاری ه ما باید بکنیم اینه که بعد نیم ثانیه اونو از بین ببریم. پس از کد زیر استفاده می کنیم.همینطور که دیدین خیلی راحت تونستیم یه دکمه خیلی جذاب واسه سایتمون طراحی کنیم.این پروژه رو میتونید از گیت هاب من دانلود کنید.تا پروژه بعد بدرووود. جعبه جادویی پوریا فغفوری Tue, 23 Mar 2021 00:27:25 +0430 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-hover-board-jnwbx5idyyla سلام رفقا امروز یه پروژه باحال و می خوایم با هم انجام بدیم.پروژه امروز یه صفحه که قرار وقتی موس hover میکنیم روش یه سری رنگا به ما نشون بده و بعد از چند ثانیه از بین بره. https://aparat.com/v/yrdI8 خوب خیلی سریع بریم سراغ فایل Html :بعدش میریم سر وقت css مثل همیشه تنظیمات اولیه رو انجام میدیم:بعد فایل container رو یه سرو سامون میدیم. حداکثر عرضمونو 400 پیکسل می گیریم تا بیشتر از اون فضا رو نگیره و اجازه می دیم که بتونه به خط جدید بره :حالا می تونیم اون مربع کوچیکامونو خوشگل تر کنیم:خوب کارمون اینجا تموم شد بهتره بریم سراغ کد زدن توی جاوا اسکریپتاینجا سه تا متغیر تعریف میکنیم:حالا باید به تعدادی که توی squareCount ریختیم مربع بسازیم و کلاس square رو بهش بدیم و واسه اینکه موس روش بره و خارج شه ویداد تعریف کنیم و اونو بریزیم داخل المان container. اوه چقد کار!!!ما نیاز داریم یه متد داشته باشیم که رنگامونو به صورت تصادفی به ما برگردونه. پس فانکشن یرو براش می نویسیم:بعد میریم سراغ رویداد هایی که اسم ازشون بردیم ولی هنوز تعریفشون نکردیم.اول این رویدادرو تعریف می کنیم که موس بره روی المان:حالا باید بگیم که وقتی موس روی المان نبود چه اتفاقی بیفته:اینم از این پروژه جذاب. حتما سعی کنید خودتون یه بار بنویسیدش و تمرین کنید.پروژه رو می تونید از روی گیت هاب من وردارین و استفاده کنید.تا پروژه بعدی که من بیام خوب تمرین کنید. جعبه جادویی پوریا فغفوری Fri, 19 Mar 2021 10:09:57 +0330 https://virgool.io/magic-box/%D9%85%DB%8C%D9%86%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-progress-steps-yhzjgcba2cav سلام سلام سلامتوی این مقاله قراره یه پروژه کوچیک ولی باحال و با هم کار کنیم.یه مدت خودم دنبال اینجور چیزی بودم ولی پیداش نکردم واسه همین تصمیم گرفتم خودم بنویسمش.حرف دیگه بسه بریم سراغ کدمون. https://aparat.com/v/eQS0b خیلی سریع می ریم سراغ فایل Html :<html lang=&quoten&quot> <head> <meta charset=&quotUTF-8&quot> <meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> <link rel=&quotstylesheet&quot href=&quotstyle.css&quot> <title>progress steps</title> </head> <body> <div class=&quotcontainer&quot> <div class=&quotprogress-container&quot> <div class=&quotprogress&quot id=&quotprogress&quot></div> <div class=&quotcircle active&quot>1</div> <div class=&quotcircle&quot>2</div> <div class=&quotcircle&quot>3</div> <div class=&quotcircle&quot>4</div> </div> <button class=&quotbtn&quot id=&quotprev&quot disabled>قبلی</button> <button class=&quotbtn&quot id=&quotnext&quot>بعدی</button> </div> <script src=&quotscript.js&quot> </body> </html>خوب همونجور که دیدین چیز سختی نداشت تا اینجاحالا بریم سراغ فایل css تا یه خورده خوشگل تر کنیم کارمونو:اول سه سری استایل اولیه میدیم به کارمون در ضمن ما به یه سری رنگ نیاز داریم که اونارم توی root تعریف می کنیم چون که زیاد باهاشون کار داریم::root { --line-border-fill: #3498db; --line-border-empty: #e0e0e0; } * { box-sizing: border-box; font-family: 'Vazir', sans-serif; margin: 0; padding: 0; } body { background-color: #f6f7fb; display: flex; justify-content: center; align-items: center; height: 100vh; }حالا بریم container هامونو مشخص کنیم:.container { text-align: center; } .progress-container { position: relative; display: flex; justify-content: space-between; max-width: 100%; width: 350px; margin: 30px; }واسه این که ازالمنت اضافه استفاده نکنیم میایم و از sudo element کمک میگیریم:.progress-container::before { content: ''; background-color: var(--line-border-empty); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 3px; width: 100%; z-index: -1; }می ریم سراغ خطی که قراره پر بشه و میزان پیشرفت و به ما نشون بده :.progress { background-color: var(--line-border-fill); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 3px; width: 0%; z-index: -1; transition: .4s ease; }حالا دایره هایی رو درست می کنیم که قراره نشون بدن که ما الان کدوم مرحله ایم:.circle { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; border: 3px solid var(--line-border-empty); display: flex; justify-content: center; color: #999; align-items: center; } .circle.active { border-color: var(--line-border-fill); }حالا اون دکمه های قبلی و بعدی رو قشنگ ترشون می کنیم:.btn { padding: 8px 30px; background-color: var(--line-border-fill); color: #fff; transition: .4s ease; border-radius: 4px; } .btn:active { transform: scale(.98); } .btn:disabled { background-color: var(--line-border-empty); cursor: not-allowed; color: #000; }تا اینجا خیلی خوب پیش اومدیم حالا بریم سر وقت جاوا اسکریپت:اول نیاز داریم 5 تا متغیر تعریف کنیم:const progress = document.getElementById(&quotprogress&quot); const next = document.getElementById(&quotnext&quot); const prev = document.getElementById(&quotprev&quot); const circles = document.querySelectorAll(&quot.circle&quot); let currentActive = 1;حالا توی دکمه ها event کلیک تعریف می کنیم:next.addEventListener(&quotclick&quot, () => { currentActive++; if (currentActive > circles.length) { currentActive = circles.length; } update(); }); prev.addEventListener(&quotclick&quot, () => { currentActive--; if (currentActive < 1) { currentActive = 1; } update(); });حالا اون متد update رو تعریف می کنیم:function update() { circles.forEach((circle, index) => { if (index < currentActive) { circle.classList.add(&quotactive&quot); } else { circle.classList.remove(&quotactive&quot); } }); const actives = document.querySelectorAll(&quot.active&quot); progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + &quot%&quot if (currentActive === 1) { prev.disabled = true; } else if (currentActive === circles.length) { next.disabled = true; } else { prev.disabled = false; next.disabled = false; } }اینم از این پروژه باحالحتما سعی کنید خودتون کدشو بزنید تا یاد بگیرید.اگه فایل پروژه رو میخواید می تونید به گیت هاب من بیاید.تا پروژه بدی بدروود. جعبه جادویی پوریا فغفوری Mon, 15 Mar 2021 22:41:18 +0330 https://virgool.io/magic-box/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%AF%DB%8C%D8%B1%D8%A7%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-mmwatch-legtgkvmnlh1 در سال ۲۰۱۷ در بلاگ cloudflare پستی با نام Three Little Tools: mmsum, mmwatch, mmhistogram منتشر شد. در این پست به سه ابزار ساده اشاره شده است که در کارهای اجرایی تیم مقابله با DDoS این شرکت استفاده می‌شود. در این پست به بررسی پیاده سازی mmwatch پرداخته می‌شود.شاید بهترین راه برای معرفی این ابزار از طریق نمایش عملکرد آن باشد.استفاده از mmwatch برای بدست آوردن نرخ تغییرات حجم فایلهمانطور که در تصویر دیده می‌شود، این ابزار دستور ls -lh را هر دو ثانیه یک بار اجرا می‌کند و در صورت تغییر در متغییرهای عددی، نرخ تغییرات را گزارش می‌کند. در این تصویر از آنجا که یک فایل در حال دانلود است حجم فایل تغییر می‌کند و نرخ تغییرات حجم به صورت highlight شده نشان داده می‌شود. mmwatch امکان بدست آوردن نرخ یک پارامتر را از روی بررسی تفاوت خروجی یک دستور فراهم می‌کند.برای استفاده از این ابزار می‌توانید کد آن را در این آدرس مشاهده کنید. برای راحتی کار می‌توانید مراحل زیر را دنبال کنید.cd /usr/bin sudo wget https://raw.githubusercontent.com/cloudflare/cloudflare-blog/master/2017-06-29-ssdp/mmwatch sudo chmod a+x mmwatchاین مراحل فایل mmwatch را از آدرس گفته شده دانلود می‌کند و در دایرکتوری /usr/bin قرار می‌دهد. سپس به آن دسترسی اجرایی اضاف می‌کند. با طی کردن این مراحل می‌توانید از دستور mmwatch استفاده کنید.برای تست کردن می‌توانید مانند تصویر بالا عمل کنید.کد این برنامه با زبان پایتون نوشته شده است. اگر برایتان سوال شده که این ابزار چطور پیاده شده است پیشنهاد می‌کنم که این بلاگ پست را مطالعه کنید. https://blog.fyro.ir/2021/03/14/mmwatch/ جعبه جادویی Farbod Shahinfar Sun, 14 Mar 2021 17:52:02 +0330 https://virgool.io/magic-box/%D9%86%D8%B5%D8%A8-cuda-nvidia-%D8%A8%D8%B1%D8%B1%D9%88%DB%8C-ubuntu-2004-l5pxlujwq6fh سلام به خوانندگان محترم این اولین نوشته من در ویرگول هست و امیدوارم کم‌وکاستی‌های کمی داشته باشد و من را به این خاطر ببخشید.چون برای نصب کودا روی لینوکس خیلی به زحمت افتادم گفتم حاصل تجربه‌ام را اینجا بنویسم که شاید باعث صرفه‌جویی در وقت دیگران شود.اول از همه به این نکته توجه کنید، مراحلی را که می‌گم از ابتدای نصب ابونتو هست چون خودم از روش‌های زیادی رفتم و هربار به شکست خوردم و حتی چندین‌بار مجبور به نصب مجدد سیستم عامل شدم لذا از آغاز نصب سیستم عامل مراحل را طی کنید البته اگر در آغاز کار نیستید فقط به این نکته توجه کنید که هیچ کدام از پکیج‌های Nvidia نباید نصب شده باشد(البته این تجربه من هست). خب بریم سراغ نحوه انجام کار...نکته مهم: این روش درایور انویدیا را هم نصب می‌کند و نیاز به هیچ کار پیشنیازی ندارد.ابتدا یکسری پکیج پیش نیاز باید نصب کنید برای این‌کار در ترمینال دستورات زیر را وارد نمایید( تعدادی از این پیشنیازها را از سایت deeplearning.ir برداشتم).sudo apt install make sudo apt install gcc sudi apt-get install linux-headers-$(uname -r) sudo apt-get install g++ freeglut3-dev build-essential libx11-dev libxmu-dev libxi-dev libglu1-mesa libglu1-mesa-devحتما دستورات بالا را تایپ کنید که در طول نصب با خطایی مواجه نشوید. حالا از سایت اصلی فایل کودا با پسوند run. را دانلود کنید. گزینه‌های سبز پررنگ را انتخاب کنیدبعد از انتخاب گزینه‌های گفته شده در پایین صفحه یک دستور wget هست که بعد از کلمه wget ادرس فایل قرار دارد و می توانید ان را کپی کنید. توصیه من این هست که از یک فایل منیجر برای دانلود فایل استفاده کنید(حدودا ۳ گیگ می‌باشد).بعد از دانلود در محلی که فایل قرار دارد راست کلیک کنید و open terminal را بزنید حالا دستور زیر را وارد کنید که فایل اجرا شودsudo sh cuda.runتوجه کنید که باید به‌جای cuda نام فایل دانلود شده را قرار دهید.حالا مراحل نصب را که فکر می‌کنم ابتدای کار یک قبول کردن قوانین و شرایط هست و مرحله بعد نصب تمامی پکیج‌ها از جمله درایور Nvidia هست طی کنید البته توجه کنید که در هر مرحله هیچ گزینه‌ای را تغییر ندهید و به صورت پیش فرض مرحله ها را طی کنید. اگر پیشنیاز‌های گفته شده را نصب کرده باشید به راحتی کودا خودش علاوه بر پکیج خودش، درایور انویدیا و مثلاهای کودا را نیز نصب می‌کند. در پایان به شما یک خلاصه وضعیت می دهد. اگر مراحل را درست رفته باشد و مشکلی رخ نداده باشد با زدن دستور nvidia-smi خروجی مانند تصویر زیر دریافت می‌کنیدخروجی دستور nvidia-smiخب حالا باید کودا را در bashrc. قرار دهیم، دستور زیر را در ترمینال وارد کنید.export LD_LIBRARY_PATH=/usr/local/cuda-11.2/lib64\${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}توجه کنید که این دستور در یک خط تایپ میشود (برای ورژن ۳۲ بیتی و اگر در وارد کردن دستور مشکل دارید می توانید به مستندات Nvidia سر بزنید).حال برای اینکه مطمین شوید همه چی بدرستی کار می‌کند دستور زیر را در ترمینال تایپ کنید nvcc --versionو خروجی زیر که ورژن‌ کودا نمایش می‌دهید باید به شما نمایش دهدخروجی دستور nvcc --versionتبریک می‌گم شما موفق به نصب کودا بر روی سیستم خود شدید.امیدوارم این آموزش براتون مفید باشد. جعبه جادویی AmKm Sun, 14 Mar 2021 00:17:51 +0330 https://virgool.io/magic-box/%D9%BE%D8%B1%D9%88%DA%98%D9%87-css-%D8%AC%D8%B9%D8%A8%D9%87-%D8%AC%D8%B3%D8%AA-%D9%88-%D8%AC%D9%88-hmjf8ntnamfc سلام رفقا امروز می خوام آموزش یه سرچ باکس رو براتون بذارم که مطمئنم خیلی جاها میتونید ازش استفاده کنید. https://aparat.com/v/TCRVh خوب خیلی سریع بریم سراغ کارمونو وقت هدر ندیم.اول از همه یه فایل Html میسازیم و کدای زیر و توش مینویسیم.<!DOCTYPE html> <html lang=&quoten&quot> <head> <meta charset=&quotUTF-8&quot> <meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> <link rel=&quotstylesheet&quot href=&quotstyle.css&quot> <link rel=&quotstylesheet&quot href=&quothttps://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot integrity=&quotsha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot crossorigin=&quotanonymous&quot /> <title>Document</title> </head> <body> <div class=&quotsearch-box&quot> <input type=&quottext&quot class=&quotsearch-text&quot placeholder=&quotجست و جو&quot> <a class=&quotsearch-btn&quot> <i class=&quotfa fa-search&quot></i> </a> </div> </body> </html>خوب تا اینجا خوب بود کارمون.حالا باید بریم سراغ اضافه کرد فایل Css تا ظاهر کارمونو درست کنیم.اول از همه مییریم سراغ بدنه. که اگه دوست داشتین می تونید تغییرش بدین خیلی هم نیست این قسمت: body { padding: 0; margin: 0; background: #3fd2e6; }خوب حالا می ریم سراغ این که جعبه Search box مونو درست کنیم..search-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 40px; border-radius: 40px; padding: 10px; background: #2f3640; }بریم سراغ اینکه دکمه رو عوض کنیم.search-btn { color: #3fd2e6; float: left; background: #2f3640; text-decoration: none; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; }بعدشم یه استایل کوچیک به Input میدیم:.search-text { border: 0; background: none; outline: none; text-align: right; line-height: 30px; color: #fff; padding: 0; width: 0; transition: all .5s; }حالا بریم سراغ اصل مطلب اینجا واسه باز و بسته شدن باکسمون یه تیکه کد بنوسیم که مثل جاوا اسکریپت بتونه ز بسته شدنش جلوگیری کنه:.search-box:hover>.search-text, .search-text:focus, .search-text:not(:placeholder-shown) { width: 250px; padding: 0 10px; }خوب خیلی راحت تونستیم یه فرم باحال برای سرچ توی سایتمون بنویسیم.اگه کد این پروژه و پروژه های بیشتری رو میخواید می تونید به گیت هاب من بیاید.منتظر پروژه های بیشتر باشید. جعبه جادویی پوریا فغفوری Sat, 13 Mar 2021 20:26:32 +0330 https://virgool.io/magic-box/%D9%85%D9%82%D8%AF%D9%85%D9%87-%D8%A7%DB%8C-%D8%A8%D8%B1-iptables-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7%D8%A7%D8%AA-%D9%88%D8%B1%D9%88%D8%AF%DB%8C-%D9%88-%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-%D8%AF%D8%B1-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D9%87%D8%A7%DB%8C-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3%DB%8C-m6pw4esrawa8 زنجیرها و جداول iptables به همراه روند اجرا(منبع عکس)در سیستم عامل لینوکس این امکان وجود دارد که پکت‌های (بسته‌های پیام که در شبکه منتقل می‌شوند) ورودی و خروجی را بر اساس برخی از ویژگی‌هایش بررسی کنید و عملیات متفاوتی را روی آن‌ها انجام دهید. این قابلیت مثل یک فایروال در درون هسته لینوکس می‌ماند. در این راستا شما می‌توانید با تعیین قواعدی خاص، بر روی هر بسته‌ای که شرایط مندرج را دارد عمل خاصی را اجرا کنید. قواعد مشخص شده در تعدادی جدول ذخیره می‌شود و این جداول در هنگام دریافت پکت جدید بررسی می‌شوند تا قواعد‌ای که مربوط به آن است یافت شود. در این پست به بررسی مفاهیم اولیه ابزار iptables، امکانات و قابلیت‌های آن پرداخته می‌شود.مفاهیمی که برای کار با iptables باید با آن آشنایی داشته باشید عبارتند از جدول یا Tableزنجیر یا Chainقاعده یا Ruleجداول یا Tablesابتدا به آشنایی با جداول موجود می‌پردازیم. این ابزار از ۵ جدول ساخته شده است که سه مورد آن از جمله جداول اصلی انگاشته می‌شوند. اولین آن‌ها جدول Filter است. قواعد این جدول بررسی می‌کند که آیا پکت دریافتی باید به مقصد مورد نظر برسد یا اینکه از ادامه آن جلوگیری شود.جدول بعدی مربوط به NAT است. اگر با پروتکل NAT آشنایی داشته باشید، می‌دانید که این امکان را فراهم می‌کند تا چند دستگاه که IP قابل دسترس ندارند (به اصطلاح آدرس از بازه محلی دارند) از طریق یک درگاه که آن متصل به شبکه اینترنت است و IP قابل مسیریابی را در اختیار دارد با شبکه در ارتباط باشند. بیان کامل پروتکل NAT از حوصل این پست خارج است. این جدول برای انجام ترجمه و نگاشت لازم آدرس‌ها توسط پروتکل NAT استفاده می‌شود.جدول بعدی Mangle نام دارد. این جدول قواعدی برای تغییر اطلاعات بخش هدر (header) مربوط به پروتکل IP را در خود جای می‌دهد. (منبع عکس ویکی‌پدیا)دو جدول بعدی Raw و Security نام دارند. این دو از جدوال اصلی نیستند و در این پست به جزئیات آن‌ها پرداخته نمی‌شود.زنجیر‌ها یا Chainsدر iptables شما امکان این را دارید که در ۵ مرحله مختلف به اعمال قواعد بپردازید. این مراحل عبارتند از قبل از مسیریابی / Pre Routingورودی / Inputارسال / Forwardخروجی / Outputبعد از مسیریابی / Pos Routingتمام این زنجیر‌ها در دسترس تمام جدوال نیستند. عکسی که در ابتدای پست قرار دارد برای فهم مطالب کمک می‌کند.زنجیر Pre Routing: بر روی تمام پکت‌های ورودی اعمال می‌شود. و این اتفاق قبل از اینکه تصمیمات مسیریابی صورت بگیرد اجرا می‌شود.زنجیر Input: بعد از ورود پکت به سیستم این زنجیر اجرا می‌شود. این زنجیر بعد از Pre Routing است.زنجیر Forward: برای پکت‌هایی که به سیستم ما آمده‌اند و ما می‌خواهیم آن را به آدرس ماشین دیگری ارسال کنیم (Foward کنیم).زنجیر Output: برای پکت‌هایی که توسط ماشین شما ایجاد شده است و ارسال می‌شوند اجرا می‌شود.زنجیر Post Routing: برای پکت‌هایی که قرار است بر روی درگاه خروج قرار بگیرند اجرا می‌شود. هم Output و هم Forward را در بر می‌گیرد و بعد از این دو زنجیر قرار دارد.قواعدقواعد دستورات شما است. این دستورات بیان می‌کند در هنگامی که پکت‌ای با مشخص ذکر شده دریافت شد اتفاق خاصی برایش بیافتد. ویژگی‌هایی که می‌توانید برا اساس آن قواعد خود را بیان کنید مواردی مانند پروتکل پکت دریافتی، آدرس‌ IP و یا پورت مقصد بسته، درگاه که پکت از آن وارد سیستم شده است و یا اطلاعات موجود در header می‌تواند باشد. اعمالی که می‌توانید انتخاب کنید عبارتند ازپذیرش / Accept: پکت را به سیستم راه می‌دهد. لغو / Drop: از ادامه پردازش پکت سر باز می‌زند و پکت حذف می‌شود.بازگشت / Return: ادامه فعالیت در این زنجیر متوقف می‌شود و قواعد دیگر برای این پکت بررسی می‌شوند این پست قسمت از اول از یک مجموعه دو قسمتی است. در بخش بعدی به استفاده عملی از iptables پرداخته می‌شود. لطفا نظرات خود را در باره مطاب، نحوه نگراش و جزئیات و کلیات بیان مطلب به اشتراک بگذارید. اگر این پست به شما در کارتان کمک کرده است باعث خوشحالی است که جزئیات آن را در حد امکان با ما به اشتراک بگذارید.با تشکر از وقتی که صرف کردید.جعبه جادوییپی‌نوشتبرای اطلاعات بیشتر می‌توانید به این مرجع نگاه کیند. جعبه جادویی جادوگر سطح یک Sun, 28 Feb 2021 10:47:49 +0330 https://virgool.io/magic-box/%DA%86%D8%B7%D9%88%D8%B1-%D8%AF%D9%88-%D8%AA%D8%A7-%D9%85%D8%A7%D8%B4%DB%8C%D9%86-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3%DB%8C-%D8%B1%D8%A7-%D8%A8%D8%A7-%DA%A9%D8%A7%D8%A8%D9%84-lan-%D9%85%D8%B3%D8%AA%D9%82%DB%8C%D9%85-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%AF%DB%8C%DA%AF%D8%B1-%D9%88%D8%B5%D9%84-%DA%A9%D9%86%DB%8C%D9%85-k6aprhu1tqym احتمالا تا الان به دفعات پیش آمده است که با استفاده از مدم خانگی و یا یک سویچ چندین کامپیوتر را به یک دیگر وصل کرده باشید. در این شرایط معمولا ماشین‌ها خودشان شبکه را شناسایی می‌کنند و به راحتی می‌توانید با دستور ping از اتصال میان آن‌ها اطمینان حاصل کنید. ولی اگر دو تا ماشین را مستقیم با کابل LAN به هم وصل کنید به احتمال زیاد متوجه می‌شوید که ماشین‌ها دارای آدرس IP مشخص نیستند و همچنین امکان Ping کردن ندارید. در این پست کوتاه، دستورات لینوکسی برای تنظیم دستی آدرس IP بر روی کارت‌های شبکه گفته می‌شود. برای اجرای این دستورات از بسته iproute2 که در اکثر سیستم‌های لینوکسی امروز موجود است استفاده می‌شود.در ابتدا لیست واسط‌های ارتباطی با شبکه را بدست می‌آوریم برای این منظور دستور زیر را اجرا می‌کنیم.ip addr showخروجی به شکل زیر خواهد بود.1: lo: ... 2: enp3s0: ... 3: wlp2s0: ...لینک‌هایی که با enp یا eth شروع می‌شوند مربوط به شبکه ethernet هستند که ما با کابل LAN می‌خواهیم آن‌ها را به یک دیگر وصل کنیم. لینک‌هایی که با wlp شروع می‌شوند ارتباط wireless هستند. حال برای اینکه دو دستگاه بتوانند با یک دیگر صحبت کنند کافی است که دو ماشین را با کابل LAN به یک دیگر متصل کنیم و به هر کدام یک آدرس IP بدهیم. برای تعیین آدرس IP بر روی یک درگاه از دستور زیر می‌توانید استفاده کنید.sudo ip addr add 10.0.0.10/24 dev enp3s0توجه کنید که enp3s0 اسم درگاه است که از مرحله قبل بدست آمد. آدرس IP انتخاب شده برای این درگاه به صورت 10.0.0.10/24 انتخاب شده است. برای اینکه ماشین دوم بتواند این آدرس را پیدا کند توجه کنید برای درگاه ماشین دوم، آدرسی در محدود مرتبط با ماشین اول انتخاب کنید. مثلا اگر آدرس ماشین اول را به صورت گفته شده تعیین کرده‌اید می توانید از آدرس 10.0.0.20/24 برای ماشین دوم استفاده کنید.پس از پایان این مراحل از هر کدام از ماشین‌ها می‌توانید ماشین دیگر را ping کنید.لینک مرجعمنبع عکس جعبه جادویی Farbod Shahinfar Fri, 26 Feb 2021 23:01:54 +0330 https://virgool.io/magic-box/%D8%AF%D8%B1-%DA%A9%D8%B1%D9%86%D9%84-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3-linkedlist-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B4%D8%AF%D9%87-%D8%A7%D8%B3%D8%AA-azswsxguyd3n عکس از لینکمقدمهدر این نوشته به چگونگی پیاده سازی یک داده ساختار معروف به نام LinkedList در کرنل لینکوس (Linux) می‌پردازیم. مخاطبان احتمالی این مطلب کسانی هستند که به برنامه نویسی و (چگونگی) توسعه کرنل لینکوس علاقه دارند. (جستوجو کنید kernel hacker)در ابتدای این مطلب به معرفی داده‌ساختار (Data Structure) LinkedList پرداخته می‌شود. سپس در ادامه پیاده سازی آن در کرنل لینوکس بررسی می‌گردد. (در فارسی LinkedList را لیست‌پیوندی ترجمه کرده‌اند.)+ نسخه کرنل استفاده شده 5.2 می‌باشد. (می‌توانید نسخه‌های متفاوت را از لینک دریافت کنید.)معرفی LinkedListیکی از داده‌ساختارهای ابتدایی که هر برنامه نویسی باید با آن آشنا باشد، LinkedList است. LinkedList برای ذخیره مجموعه‌ای از اطلاعات به صورت مرتب و با ترتیب خطی استفاده می‌شود و از این جهت به آرایه‌ها شبیه است. از طرفی، برخلاف آرایه، اندازه (تعداد عناصر) LinkedList می‌تواند در زمان اجرا تغییر کند و نیازی نیست که در هنگام استفاده از همان ابتدا یک بخش ثابت از حافظه را به این داده‌ساختار اختصاص داد.ساختار LinkedList به صورت زنجیره‌ای از عناصر است که هر عنصر آدرس عنصر بعدی خود را می‌داند. به این صورت می‌توان از هر عنصر آدرس خانه بعدی که اطلاعات مورد نظر ما در آن قرار دارد را پرسید و از یک عنصر به عنصر بعدی رسید (مانند شکل زیر). از آنجا که هر عنصر آدرس عنصر بعدی در حافظه را می‌داند، برخلاف آرایه‌ها، دیگر نیازی نیست تا آدرس حافظه اطلاعات ذخیره شده به صورت پیوسته و به دنبال هم باشد. (به عبارت دیگر عناصر موجود در یک LinkedList لزوما در خانه‌های مجاوری از حافظه قرار نمی‌گیرند.)این امکان که بتوان داده‌ها را در مکان‌ها متفاوتی از حافظه قرار داد و آن‌ها را به یک دیگر مرتبط ساخت باعث می‌شود بتوان فرآیند افزودن و حذف کردن اطلاعات از یک لیست را تسریع کرد. چرا که در آرایه ها برای اضافه کردن یک عنصر در میانه لیست نیاز است تمام عناصر بعدی یک خانه به جلو انتفال یابند و در هنگام حذف کردن تمام عناصر قبلی باید یک خانه به عقب انتقال یابند تا فضای خالی پرشود.شمایی از ساختار LinkList (از سایت ویکیپیدیا)به دلیل ساختار LinkedList و پیوسته نبودن آدرس عناصر آن در حافظه، برخلاف آرایه، امکان Random Access به عناصر وجود ندارد.اگر هر عنصر LinkedList علاوه بر عنصر بعدی، آدرس عنصر قبلی خود را هم بشناسد به آن Doubly LinkedList می‌گویند.پیاده سازی Doubly LinkedList در کرنل لینوکسساختار (struct) list_head نشان دهنده یک عضو در زنجیره داده‌ساختار Doubly LinkedList تعریف شده در کرنل لینوکس است. تعریف list_head در فایل (include/linux/types.h) types.h به صورت زیر پیدا می‌شود.struct list_head { struct list_head *next, *prev; };در این ساختار مشاهده می‌شود که دو اشاره‌گر وجود دارد که یکی به عنصر بعدی و دیگری به عنصر قبلی اشاره می‌کند.هر عضو از نوع list_head می‌تواند به عنوان شروع یک لیست تفسیر شود. پس اشاره‌گر به ابتدای لیست با اشاره‌گر به اعضای درون لیست تفاوتی ندارد.نکته قابل توجه در مورد این نحوه تعریف Doubly LinkedList آن است که هیچ حافظه‌ای برای داده‌ای که قرار است نگهداری شود در نظر گرفته نشده است. و در نگاه اول اینگونه تعریف داده‌ساختار بدون کاربرد بنظر می‌رسد.در واقع توسعه دهندگان کرنل با زیرکی خاصی این داده‌ساختار را بگونه‌ای طراحی کرده‌اند که بتوان برای تعریف لیستی از انواع مختلف داده استفاده کرد.به عنوان مثالی از استفاده از list_head لیست formats را بررسی می‌کنیم. در این مثال هدف ما تمرکز بر ایجاد لیستی از انواع داده دلخواه است. جدا از چرایی وجود لیست formats و نقشی که در کرنل بازی می‌کند، در این لیست مجموعه‌ای از ساختار linux_binfmt نگهداری می‌شود. پیاده سازی این ساختار را در ادامه مشاهده می‌کنید./* * This structure defines the functions that are used to load the binary formats that * linux accepts. */ struct linux_binfmt { struct list_head lh; struct module *module; int (*load_binary)(struct linux_binprm *); int (*load_shlib)(struct file *); int (*core_dump)(struct coredump_params *cprm); unsigned long min_coredump; /* minimal dump size */ } __randomize_layout;اولین مشخصه این ساختار، فیلد lh، از نوع list_head است و طبق تعریفی که در بالا آورده شده است؛ فیلد lh دارای اشاره‌گر به عنصر بعدی و قبلی است. همان طور که می‌دانید نوع عنصری که lh به آن اشاره می‌کند از نوع list_head هست و نه از نوع linux_binfmt. سوال مهم این است که با این شرایط چطور می‌توان به عنصر بعدی linux_binfmt دسترسی داشت؟ شکل زیر به طور نمادین نحوه قرار گیری linux_binfmt در حافظه را نمایش می‌دهد. همان طور که می‌بینید در هر عنصر از ساختار linux_binfmt فیلد lh مکان قرار گیری lh عنصر بعدی را در حافظه می‌شناسد (خطوط قرمز). حال اگر بدانیم فیلد lh چند واحد از شروع عنصر در حافظه فاصله دارد (offset)، می‌توانیم آدرس lh عنصر بعدی را منهای offset کنیم تا ابتدای ساختار linux_binfmt را بدست آوریم.پس به طور خلاصه با دنبال کردن list_head آدرس یک فیلد از ساختاری که اطلاعات مورد نظر را دارد را پیدا می‌شود و سپس با دانستن offset آن فیلد به ابتدای ساختار دسترسی خواهیم داشت.قرار گیری ساختار linux_binfmt در حافظهپیاده سازی این فرآیند در کرنل توسط یک macro به نام list_entry صورت می‌گیرد. در ادامه پیاده سازی این macro بررسی می‌شود./** * list_entry - get the struct for this entry * @ptr: the &struct list_head pointer. * @type: the type of the struct this is embedded in. * @member: the name of the list_head within the struct. */ #define list_entry(ptr, type, member) \ container_of(ptr, type, member)توضیح پارامتر‌هایی که به list_entry (و سپس به container_of) داده می‌شود به این صورت است. ptr اشاره‌گر به یک عنصر list_head است (در این مثال عنصر بعدی که lh به آن اشاره می‌کند). type نوع ساختاری که باید دریافت شود را مشخص می‌کند (در این مثال struct linux_binfmt). و member نام فیلدی درون ساختار گفته شده است که لیست مورد نظر ما را تشکیل می‌دهد (در این مثال lh).همان طور که مشاهده می‌شود list_entry به صورت مستقیم container_of را فراخوانی ‌میکند. پیاده سازی container_of به صورت زیر است. (این پیاده سازی در فایل include/linux/kernel.h قرار دارد.)/** * container_of - cast a member of a structure out to the containing structure * @ptr: the pointer to the member. * @type: the type of the container struct this is embedded in. * @member: the name of the member within the struct. * */ #define container_of(ptr, type, member) ({ \ void *__mptr = (void *)(ptr); \ BUILD_BUG_ON_MSG(!__same_type(*(ptr), ((type *)0)->member) && \ !__same_type(*(ptr), void), \ &quotpointer type mismatch in container_of()&quot); \ ((type *)(__mptr - offsetof(type, member))); })این macro عجیب دقیقا همان کاری را می‌کند که دربالا گفته شد. یک اشاره‌گر را به عنوان ورودی ‌می‌گیرد (همان آدرس lh عنصر بعدی). بعد در خط آخر یک اشاره‌گر از نوع معین شده (type) بازگشت داده می‌شود که آدرس آن از تفریق آدرس گفته شده (ptr) و offset عضو داده شده (member) بدست می‌آید.فاصله فیلد از ابتدای ساختار تعریف شده توسط offsetof محاسبه می‌شود که کد آن در ادامه آمده است.#define offsetof(TYPE, MEMBER) ((size_t)&((TYPE *)0)->MEMBER)این macro بیان می‌کند که اگر ساختار در خانه صفر حافظه باشد آنگاه عضو گفته شده چه آدرسی خواهد داشت. این همان offset است که با تفریق از آدرس اشاره‌گر ما را به ابتدای ساختار می‌رساند.کد زیر یک مثال از استفاده از list_entry است. (کد زیر از کرنل لینوکس نیست.)... struct linux_binfmt next_element = list_entry(features.lh.next, struct linux_binfmt, lh); ...در ادامه دیگر توابع و macro های پیاده سازی شده برای list_head به طور خلاصه معرفی می‌شود.در کرنل تعدادی macro برای کار با  list_head وجود دارد. برای تعریف یک لیست از LIST_HEAD استفاده می‌شود که به صورت زیر تعریف شده است.#define LIST_HEAD_INIT(name) { &(name), &(name) } #define LIST_HEAD(name) \ struct list_head name = LIST_HEAD_INIT(name)این macro یک اسم می‌گیرد و یک لیست با نام گفته شده تشکیل می‌دهد. در تعریف LIST_HEAD از یک macro دیگر با نام LIST_HEAD_INIT استفاده شده است که مقدار اولیه اشاره‌گر‌ بعدی و قبلی را برابر عنصر جدید ایجاد شده قرار می‌دهد. (انتها یک لیست وقتی است که عنصر بعدی همان عنصر ابتدایی است.)برای ایجاد تغییر در لیست مجموعه‌ای از توابع مانند list_add، list_del، list_add_tail و ... موجود است. این توابع در فایل list.h (include/linux/list.h) تعریف گشته‌اند و نام آن‌ها به وضوح کاری را که انجام می‌دهند را مشخص می‌کند.جمع بندیدر این نوشته به طور مختصر داده‌ساختار LinkedList معرفی شد و در ادامه بخش‌هایی از پیاده سازی کرنل لینوکس که مربوط به این داده‌ساختار بود بررسی گشت. (همچنین آدرس پیاده سازی آن‌ها در این نوشته موجود است. برای کسانی که علاقه به مطالعه بیشتر و دنبال کردن آن دارند).امیدوارم این نوشته به بخشی از سوالات شما درباره چگونگی کارکرد کرنل لینوکس پاسخ داده باشد. جعبه جادویی Farbod Shahinfar Tue, 20 Aug 2019 11:48:12 +0430