نوشته های سمیرا آرام

برنامه نویسان خودتون رو نشون بدین :)

سمیرا آرام — Wed, 27 Oct 2021 16:54:12 +0330

سلام بعد ی مدت خیلی طولانی برگشتم نمی دونم از کجا شروع کنم ی مسئله ای ذهنم رو حسابی مشغول کرده مسیرم رو تو برنامه نویسی گم کردم، سردرگم شدم، دلم می خواد ی منتور داشته باشم، دلم می خواد با برنامه نویس های بیشتری حرف بزنم نیاز دارم نجات پیدا کنماگه برنامه نویس هستی زیر این نوشته بنویس +اگه برنامه نویسی هستی که میتونی به بقیه درمورد برنامه نویسی و مسیرهای برنامه نویسی کمک کنی بنویس++اگه هم شبکه‌های اجتماعی واسه تبادل اطلاعات برای برنامه نویسان میشناسین لطفا زیر این نوشته معرفی کنین........................................................................................................................................ی سوال دیگه هم داشتم دختران برنامه نویس شماها کجا هستین دقیقا کجا هستین؟؟تو گروه های برنامه نویسی تلگرامی یا تو شبکه های اجتماعی دیگه یا تو شرکت ها همیشه دنبال دختران برنامه نویس بودم من خودم برای خوندن این رشته خیلی جنگیدم و تلاش کردم ولی انگاری هرجا که میرم به غیر از خودم دختر برنامه نویس دیگه ای رو نمیبینم سال 1995 میلادی 37% جامعه برنامه نویسان دختر بود الان تو 2021 شدیم 22% !! دختران برنامه نویس خودتون رو نشون بدین تلاش کنین و بیایین باهم معاشرت کنیم شاید تونستیم بهم کمک کنیم و موجب پیشرفت همدیگه بشیم# ی_برنامه_نویس_سردرگم

2. Question and Answers about login page with React JS

سمیرا آرام — Sat, 10 Jul 2021 12:12:09 +0430

تو این پست می‌خواهیم صفحه سوالات متداول لاگین رو با ری‌اکت بنویسیم.صفحه سوالات متدوال یا همون Question and Answers صفحه‌ای که به سوالاتی که احتمالا یک کاربر حین کار با سایت برمیخوره رو جواب داده؛ سوالاتی مثل رمز عبورم رو فراموش کردم یا نمی دونم نام کاربریم چی هست و ... .خب این پست هم چهار مرحله داره که به ترتیب زیر هستش :ساخت دیتا (data.js)ساخت صفحه سوال و جواب (Question.js)ساخت صفحه اصلی (App.js) استایل دهی به صفحات (index.css)قبل از اینکه نحوه‌ی ساخت این چهار مرحله رو بگم باید یه برنامه ری‌اکتی بسازیم به این ترتیب که تو ترمینال در آدرس موردنظر بنویسیم:npm create-react-app app-name و یا میتونی از این استفاده کنی npx create-react-app app-name مسیردهی کامل پروژه1. ساخت data.jsتو قسمت src برنامه فایل data.js رو میسازیم و توش دیتاهای برنامه رو مینویسیم.دیتای برنامه به‌صورت آرایه‌ای از آبجکت‌‌ها تعریف میشه به اینصورتکه هر آبجکت ویژگی‌هایی چون id, title, info داره.data.jsconst questions = [ { id: 1, title: 'Is my account set up yet?', info: 'To verify if your user account is set-up, you may try to logon using the username and password provided to you via email from Checkpoint Systems. This username and password is provided upon approval. If you did not receive an email with a username and password then your account may not be setup.', }, { id: 2, title: 'What should I do if I forget my password?', info: 'Enter your username in the Username entry box provided on the login screen. Select the Forgot your password? link. A dialog box will be displayed asking if you “Are sure you would like to reset your password”. Select yes, your password will be emailed to you at the email naddress you provided when you were setup as a user.', }, { id: 3, title: 'What should I do if I forget my Username?', info: 'Please send an email or phone your Checkpoint Customer Service Representative and state that you have lost or forgotten your username and password. Your password will be reset and you will receive an email with your username and password at the email address you provided to Checkpoint when you were setup as a user. Please provide your name, organization, phone number and role when corresponding to Customer Support.', }, { id: 4, title: ' How do I know the site has a secure connection?', info: 'CheckNet is a VeriSign secure site. To verify CheckNet is the site you intended to access in a secure fashion prior to sending any secure information select the VeriSign Logo. You will be taken to a VeriSign server that will verify the security and authenticity of checknet.checkpt.com. Ensure the Name, Server ID and Status information are correct and owned by Checkpoint Systems, Inc.', }, export default questions2. ساخت صفحه سوال و جواب (Question.js)تو قسمت src برنامه فایل Question.js رو میسازیم و react-icons رو از طریق ترمینال در مسیر src برنامه با دستور زیر نصب می‌کنیم:npm install react-iconsو بعد پکیج‌های زیر رو به برنامه import میکنیم:import React, { useState } from 'react'; import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';یک arrow function با دو proprty (ویژگی) title , info داخل متغیر Question تعریف میکنیم و این متغیر رو اکسپورت میکنیم:const Question = ({title , info}) => { } export default Question;هر کدی که از این به بعد نوشته میشه داخل همین متغیر Question تعریف میکنیم.وقتی که روی دکمه‌ی منفی یا کوچک کننده کلیک میکنی جواب‌ها (پاراگراف p) رو ناپدید میکنه و وقتی روی دکمه + کلیک میکنی جواب‌هارو (پاراگراف یا p) نشون میده. بنابراین یه هوک usestate بانام showinfo مینویسیم که مقدار اولیه‌اش false هست و وقتی false یعنی باید دکمه + رو نشون بده و وقتی true هست باید دکمه‌ی - رو نشون بده.const [showInfo , setShowInfo] = useState(false) return

{title}

{ showInfo &&

{info}

}

3. ساخت صفحه اصلی (App.js) دیتا که شامل سوالات و جواب ها هستند رو از طریق هوک usestate تو متغیر questions میریزیم و بعد این دیتا که الان questions هستش رو map میکنیم و اطلاعات questions رو به صفحه Question.js ، (SingleQuestion) از طریقی proprtyها برمیگردونیم.import React, { useState } from 'react'; import data from './datas'; import SingleQuestion from './Question'; function App() { const [qustions , setQuestions] = useState(data); return

question and answers about login
{ qustions.map((qustions) => { return }) }

} export default App;4. استایل دهی به صفحات (index.css)و در آخر فایل index.css رو ساخته و صفحه رو استایل دهی میکنیم::root { --clr-grey-1: hsl(209, 61%, 16%); --clr-grey-3: hsl(209, 34%, 30%); --clr-grey-5: hsl(210, 22%, 49%); --clr-yasi: #b798b9; --clr-tosi-roshan1: #f5f5f5; --clr-red-special: #b4345c; --clr-grey-special: #eae6eb; --clr-red-dark: hsl(360, 67%, 44%); --spacing: 0.1rem; --radius: 0.25rem; --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); --max-width: 1170px; --fixed-width: 920px; } *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: var(--clr-yasi); color: var(--clr-grey-1); line-height: 1.5; font-size: 0.875rem; } ul { list-style-type: none; } a { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: var(--spacing); text-transform: capitalize; line-height: 1.25; margin-bottom: 0.75rem; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } h4 { font-size: 0.875rem; } p { margin-bottom: 1.25rem; color: var(--clr-grey-5); } @media screen and (min-width: 800px) { h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1rem; } body { font-size: 1rem; } h1, h2, h3, h4 { line-height: 1; } } h2.Question-Answer { color:#0d2a86; font-family:cursive; font-size: 40px; text-align: center; } /* global classes */ /* section */ .section { width: 90vw; margin: 0 auto; max-width: var(--max-width); } @media screen and (min-width: 992px) { .section { width: 95vw; } } main { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container { width: 90vw; margin: 5rem auto; background: var(--clr-tosi-roshan1); border-radius: var(--radius); padding: 2.5rem 2rem; max-width: var(--fixed-width); display: grid; gap: 1rem 2rem; } .container h3 { line-height: 1.2; font-weight: 500; } @media screen and (min-width: 992px) { .container { display: grid; grid-template-columns: 250px 1fr; } } .question { padding: 1rem 1.5rem; border: 2px solid var(--clr-grey-special); margin-bottom: 1rem; border-radius: var(--radius); box-shadow: var(--light-shadow); } .question h4 { text-transform: none; line-height: 1.5; } .question p { color: var(--clr-grey-3); margin-bottom: 0; margin-top: 0.5rem; } .question header { display: flex; justify-content: space-between; align-items: center; } .question header h4 { margin-bottom: 0; } .btn { background: transparent; border-color: transparent; width: 2rem; height: 2rem; background: var(--clr-grey-special); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--clr-red-special); cursor: pointer; margin-left: 1rem; align-self: center; min-width: 2rem; }و تامام حالا کافیه تو ترمینال تو مسیر src پروژه بنویسین npm stratBe happy and enjoy the Life 8)

1. Review page with React JS

سمیرا آرام — Wed, 07 Jul 2021 00:27:02 +0430

Powerpuff Girls Review Page With React Jsسلام دوستان تو این پست می خوایم یادبگیریم چطوری با ری‌اکت یک صفحه Review بسازیم.یک صفحه Review صفحه‌ای که در اون درمورد افراد، مشاغل،محصولات و یا مکان های توریستی یک سری اطلاعات میده؛ مثلا یک شخصی رو با اسم، سن،شغل و یک متن کوتاه درمورد اون شخص یا درمورد کارش معرفی میکنه. ماهم در اینجا می خوایم یک Personal Review Page رو با ری‌اکت پیاده‌سازی کنیم.توجه: خب موضوعی که من برای این صفحه انتخاب کردم Personal Review Page هستش؛ یعنی دیتاها و داده‌ها، باید درمورد اشخاص باشن؛ اگه بخواهیم درمورد یک محصول یا یک مکان Review page بسازیم، باید نوع داده‌ها رو عوض کنیم نه کل برنامه نویسی صفحه رو !!برای ساخت این صفحه Review چهار مرحله داریم:ساخت دیتا (data.js)ساخت صفحه مرور (Review.js)ساخت صفحه اصلی (App.js)استایل دهی به صفحات (index.js)در ادامه به ترتیب با نحوه ساخت این صفحات و کدنویسیشون آشنا میشیم.اول از همه باید یه برنامه react رو بسازیم به اینصورت که تو آدرس مورد‌نظر در ترمینال مینویسیم:npm create-react-app appname و یا میتونی از این استفاده کنی npx create-react-app appname مسیردهی کامل پروژه ساخت دیتا (data.js) خب دیتای صفحه Review رو به‌صورت آرایه‌ای از آبجکت‌ها تعریف میکنیم؛ به اینصورت که هر عضو آرایه یک آبجکت هست و هر آبجکت ویژگی هایی چون name, age, job, power, image, birthday و متنی (text) در‌مورد اون آبجکت به ما میده.دیتای من درمورد سه شخصیت اصلی کارتون PowerPuffGirls هستش که به صورت زیر آوردم:data.js const reviews = [{ id:1, name: 'Blossom' ,birthday:'2002/07/03', job: 'tactician and self proclaimed leader of the Powerpuff Girls', power: 'Freezing objects with her breath', image:"./assets/Blossom1.jpg",text: 'Her personality ingredient is "everything nice", her signature color is bright pink, and she has long red-orange waist length hair with bangs in a triangular part with a red bow and a pink hair clip with a red heart. She was named for having spoken freely and honestly to the Professor shortly after her creation as shown in The Powerpuff Girls Movie. She is often seen as the most level headed, intelligent, and composed member of the group and also strong and determined. She is also a master strategist and apt planner.' },{ id:2, name: 'Bubles' ,birthday:'2002/07/03', job: 'Member of PowerPuffGirls', power: 'Projecting powerful sonic screams, and creating a shockwave of thunder with a single clap from her hands', image:"./assets/Bubbles1.jpg", text: 'Her signature color is blue, her personality ingredient is "sugar", and she has blonde hair in pigtails. Bubbles is seen as kind and very sweet but she is also capable of extreme rage and can fight monsters just as well as her sisters can. Her best friend is a stuffed octopus doll she calls "Octi", and she also loves animals. She exhibits the ability to both understand multiple languages and communicate with various animals.',},{id:3, name: 'Buttercup' ,birthday:'2002/07/03',job: 'Member of PowerPuffGirls', power:'Url her tongue, and creating fireballs by rubbing her hands together untill smoke comes out which forms a flaming ball that she throws at an opponent', image:"./assets/Buttercup1.jpg", text: 'Her personality ingredient is "spice", her signature color is green, and she has short black hair in a flip. She loves to get dirty, fights hard and plays rough; she does not plan and is all action. Her unique powers are to curl her tongue, and creating fireballs by rubbing her hands together untill smoke comes out which forms a flaming ball that she throws at an opponent. McCracken originally wanted to name the character "Bud" until a friend suggested the name Buttercup. According to The Powerpuff Girls Movie, Buttercup really dislikes the name she was given.', },];export default reviews;آدرس عکس ها رو در فولدری بنام public که در خارج از src برنامه هست، و در فولدری بنام assets ذخیره کردم. در پایین عکس‌هایی که استفاده کردم رو آوردم؛ شما خودتون میتونیدهرچقدر که خواستین دیتا و اطلاعات به data.js اضافه کنین../assets/Blossom1.jpg./assets/Buble1.jpg./assets/Buttercup1.jpg2. ساخت صفحه مرور (َReview.js)خب از این قسمت وارد برنامه نویسی خود صفحه میشیم. قبل اینکه برنامه نویسی رو شروع کنیم، باید react-icons رو از طریق ترمینال نصب کنیم که برای نصب کافیه که در مسیر src پروژه در ترمینال بنویسیم:npm install react-icons حال فایل‌های زیر رو به قسمت اول برنامه اضافه میکنیم:import React , {useState} from "react" import data from './data'; import { FaChevronLeft , FaChevronRight , FaQuoteLeft, FaQuoteRight} from 'react-icons/fa';یک arrow function داخل متغیر Review تعریف میکنیم و این متغیر رو اکسپورت میکنیم:const Review = () => { } export default Review;ادامه کدها رو داخل این متغیر مینویسیم. چون data.js یک آرایه هست پس برای جستجو در آرایه باید از اندیس صفر آرایه شروع کرده و تا اندازه طول آرایه جستجو را ادامه دهد. برای همین با استفاده از هوک useState یک index تعریف می کنیم و مقدار اولیه صفر را به آن می دهیم ( یادتون باشه useState رو import کنین "import React , {useState} from "react) :const [index , setIndex] = useState(0);حال اطلاعات موجود در data[index] رو در متغیرهای زیر ذخیره میکنیم:const {name, image, job, power, text} = data[index]در برنامه Review سه کلید <> و surprise me تعریف شده که وظایف زیر رو دارن:با کلیک روی کلید < ایندکس دیتا یدونه به جلو میره data(index+1) و با کلیک روی کلید > ایندکس دیتا یدونه به عقب data(index-1) بر میگرده و با کلیک روی کلید surprise me به صورت رندوم یکی از افراد data.js رو نشون میده data(random). البته index+1 تا وقتیکه دیتا هست جلو میره و وقتی به انتهای آرایه ی دیتا میرسه باید دوباره به اول آرایه برگرده یعنی بشه index=0 ؛ همچنین وقتی index-1 میشه تا اندیس 0 باید کاهش پیدا کنه و بعد اندیس صفر باید بشه index=data.length-1 . بنابراین باید یه تابع برای کنترل index افزایشی یا کاهشی بنام checkNumber بنویسیم. توابع زیر رو برای 4 حالت مذکور پیاده سازی میکنیم:تابع checkNumber const checkNumber = (number) => { if(number < 0){ return data.length -1; } if(number > data.length-1){ return 0; } return number; }تابع prevData : کلید >const prevData = () => { setIndex((index) => { let newIndex = index -1; return checkNumber(newIndex); }) }تابع nextData : کلید { setIndex((index) => { let newIndex = index+1; return checkNumber(newIndex); }) } تابع randomData: کلید surprise meconst randomData = () => { let randomNumber = Math.floor(Math.random() * 10) if (randomNumber === index ) { randomNumber = index + 1 }خب حالا رسیدیم به قسمت return تابع اصلی (Review) و برگردوندن صفحه‌ی اون؛ فقط کافیه تو ادامه کدهای بالا این کدها رو بهش اضافه کنیم:return

Name: {name}

Job: {job}

Power: {power}

{text}

قسمت Review.js تموم شد.3. ساخت صفحه اصلی (App.js)تو App.js فقط کافیه صفحه Review.js که در مرحله 2 ساختیم رو با استفاده از تابع App برگردونیم:import React from "react" import Review from './Review'; function App() { return (

Power Puff Girls Review _

); } export default App;4. استایل دهی به صفحات (index.css)تو این قسمت استایل های صفحه رو مینویسیم::root { --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --clr-primary-5: hsl(205, 78%, 60%); /* lighter shades of primary color */ --clr-primary-6: hsl(205, 89%, 70%); --clr-primary-7: hsl(205, 90%, 76%); --clr-primary-8: hsl(205, 86%, 81%); --clr-primary-9: hsl(205, 90%, 88%); --clr-primary-10: hsl(205, 100%, 96%); /* darkest grey - used for headings */ --clr-grey-1: hsl(209, 61%, 16%); --clr-grey-2: hsl(211, 39%, 23%); --clr-grey-3: hsl(209, 34%, 30%); --clr-grey-4: hsl(209, 28%, 39%); /* grey used for paragraphs */ --clr-grey-5: hsl(210, 22%, 49%); --clr-grey-6: hsl(209, 23%, 60%); --clr-grey-7: hsl(211, 27%, 70%); --clr-grey-8: hsl(210, 31%, 80%); --clr-grey-9: hsl(212, 33%, 89%); --clr-grey-10: hsl(210, 36%, 96%); --clr-white: #fff; --clr-red-dark: hsl(360, 67%, 44%); --clr-red-light: hsl(360, 71%, 66%); --clr-green-dark: hsl(125, 67%, 44%); --clr-green-light: hsl(125, 71%, 66%); --clr-black: #222; --transition: all 0.3s linear; --spacing: 0.1rem; --radius: 0.25rem; --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); --max-width: 1170px; --fixed-width: 620px; }, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: var(--clr-grey-10); color: var(--clr-grey-1); line-height: 1.5; font-size: 0.875rem; } ul { list-style-type: none; } a { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: var(--spacing); text-transform: capitalize; line-height: 1.25; margin-bottom: 0.75rem; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } h4 { font-size: 0.875rem; } p { margin-bottom: 1.25rem; color: var(--clr-grey-5); } @media screen and (min-width: 800px) { h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1rem; } body { font-size: 1rem; } h1, h2, h3, h4 { line-height: 1; } } .section { width: 90vw; margin: 0 auto; max-width: var(--max-width); } @media screen and (min-width: 992px) { .section { width: 95vw; } } main { min-height: 100vh; display: grid; place-items: center; } .title { text-align: center; margin-bottom: 4rem; } .underline { height: 0.25rem; width: 5rem; background: var(--clr-primary-5); margin-left: auto; margin-right: auto; } .container { width: 80vw; max-width: var(--fixed-width); } .review { background: var(--clr-white); padding: 1.5rem 2rem; border-radius: var(--radius); box-shadow: var(--light-shadow); transition: var(--transition); text-align: center; } .review:hover { box-shadow: var(--dark-shadow); } .img-container { position:relative; width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; margin-bottom: 1.5rem; } .person-img { width: 100%; display:block; height: 100%; object-fit:cover; border-radius: 50%; position: relative; } .quote-icon { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; transform: translateY(25%); background: var(--clr-primary-5); color: var(--clr-white); } .img-container::before { content: ''; width: 100%; height: 100%; background: var(--clr-primary-5); position: absolute; top: -0.25rem; right: -0.5rem; border-radius: 50%; } .author { margin-bottom: 0.25rem; } .job { margin-bottom: 0.5rem; text-transform: uppercase; color: var(--clr-primary-5); font-size: 0.85rem; } .info { margin-bottom: 0.75rem; } .prev-btn, .next-btn { color: var(--clr-primary-7); font-size: 1.25rem; background: transparent; border-color: transparent; margin: 0 0.5rem; transition: var(--transition); cursor: pointer; } .prev-btn:hover, .next-btn:hover { color: var(--clr-primary-5); } .random-btn { margin-top: 0.5rem; background: var(--clr-primary-10); color: var(--clr-primary-5); padding: 0.25rem 0.5rem; text-transform: capitalize; border-radius: var(--radius); transition: var(--transition); border-color: transparent; cursor: pointer; } .random-btn:hover { background: var(--clr-primary-5); color: var(--clr-primary-1); }حالا کافیه تو ترمینال در مسیر src برنامه بنویسیم npm start و تامام 8)Be happy and enjoy the Life 8)

پروژه های ساده با ری‌اکت (React JS)

سمیرا آرام — Wed, 07 Jul 2021 00:22:57 +0430

سلام دوستان امیدوارم حالتون خوب باشهمیخوام تو چند تا پست آینده پروژه‌های ساده‌ای که به یادگیری سریعتر و بهتر ری‌اکت‌جی‌اس (React JS) کمک میکنه رو یاد بدم.البته موضوع پروژه هایی که بررسی میشه رو میتونید تو هر زبان دیگه ای هم تمرین کنید.اینجا لینک‌های مربوط به این پروژه‌ها رو میذارم.امیدوارم این پستا به دردتون بخوره *-*قسمت اول: ساخت Review Page with React Jsقسمت دوم: ساخت صفحه سوالات متداول لاگین (Question and Answer about login page with React JS)

من یک برنامه‌نویس رویا‌پردازم_

سمیرا آرام — Tue, 15 Jun 2021 21:39:16 +0430

امروز یه متنی رو از یک برنامه‌نویس خوندم که باعث شد کل خاطرات دوران کودکیم زنده شه. تمام لحظاتی که باعث شدن من به سمت برنامه‌نویس شدن بیام.پدرم برنامه نویس بود و کل دوران کودکیم و نوجوانیم با کلمات عجیب گاها رنگی که رو مانیتور ظاهر میشد و در نهایت منجر به برنامه ای جذاب میشد، گذشت. همون اوایل بود که فهمیدم برنامه نویس یه نوع خالق، خالق دنیایی با افکار و خیالات خودش. پدرم وقت چندانی نداشت که با من حرف بزنه و تفریح کنه واسه همین کنجکاو شدم که این مانیتور چه چیزی داره که باعث میشه ساعت ها به اون خیره بشه و به دختر بچه ای که کنارش نشسته و داره یکریز حرف میزنه، بدون اینکه سرش رو از مانیتور برداره و نگاهش کنه، فقط بگه آهان،آره،عع پس خوشگذشت. فیلم سه گانه‌ی ماتریکس و مرد آهنی، علاقه‌ام برای خالق شدن و برنامه‌نویسی رو دوچندان کرد؛ این بود که تصمیم گرفتم برنامه نویس شم؛ ولی همین که من تو این رشته شروع به تحصیل کردم پدرم برنامه‌نویسی رو کنار گذاشت و دیگه برنامه‌نویسی راه ارتباطی منو پدرم نبود؛ برنامه‌نویسی چیزی بود که باعث میشد من با خودم حرف بزنم و به درون عمیق ترین نقاط ذهنم برم.اوایلش خیلی شور و شوق داشتم ولی با گذشت زمان و بزرگ شدن برنامه‌ها و چند تا شکست کوچیک باعث شد اعتماد بنفسم از بین بره و دیگه نتونم خودمو پیدا کنم؛ چیزی که عاشقش بودم داشت خودمو نابود میکرد.این بود که فکر کردم شاید من برای اینکار ساخته نشدم، شاید بهتر بود یه رشته‌ی دیگه رو بخونم رشته ای مثل هنر. میان هنر و برنامه‌نویسی موندم؛ میان ادامه دادن و پاپس کشیدن موندم. موندم که چرا اگه برنامه نویس نشم، هنر میخونم.این بود که به خیالات و آرزوهام فکر کردم؛ به رویاهای باور نکردنی که تو این راه داشتم. همه‌ی افکارام و دیدگاهام فقط به یک جمله ختم میشدند، «من عاشق رویا‌پردازی و خیال‌پردازیم!» من عاشق برنامه نویسی و هنرم من عاشق تک تک لحظاتیم که تو خودم فرو رفتم و دارم برنامه می‌نویسیم یا دارم یه اثر هنری رو میکشم؛ هنر و برنامه نویسی منو به قعر دنیای خیالات میبره؛ این وجود منه که عاشق خیال پردازی های عمیقه. خیلی طول کشید تا به این نتیجه برسم برنامه نویسی یه نوع هنر؛ هنری که اول از همه نیاز به خیالپردازی داره نیاز به رویا نیاز به انگیزه، بعد به تجربه و یادگیری. برنامه‌نویسی زیباترین هنری که تا حالا شناختم ، حالا چه من هنر بخونم چه برنامه نویسی میدونم با خیال پردازی‌هامه که میتونم ادامه بدم: چون من عاشق خیال پردازیم، این بخشی از وجود منه =)من یک برنامه‌نویس رویا‌پردازم! *_*