মরিয়ম সুজান ডেনভার, কলোরাডোতে একজন লেখক, শিল্পী এবং ওয়েব ডেভেলপার এবং বর্তমানে কন্টেইনার কোয়েরি এবং ক্যাসকেড লেয়ারের মতো উত্তেজনাপূর্ণ CSS স্পেক্সে কাজ করছেন।
এই পোস্টটি Designcember এর অংশ। ওয়েব ডিজাইনের একটি উদযাপন, web.dev আপনার জন্য নিয়ে এসেছে।
মরিয়ম সুজান ডেনভার, কলোরাডোতে একজন লেখক, শিল্পী এবং ওয়েব ডেভেলপার। তিনি OddBird (একটি ওয়েব এজেন্সি) এর একজন সহ-প্রতিষ্ঠাতা, CSS Tricks-এর কর্মী লেখক, Sass কোর টিমের সদস্য এবং CSS ওয়ার্কিং গ্রুপের W3C আমন্ত্রিত বিশেষজ্ঞ। ইদানীং তিনি ক্যাসকেড লেয়ার, কন্টেইনার কোয়েরি এবং স্কোপের মতো নতুন CSS বৈশিষ্ট্যগুলি বিকাশের দিকে মনোনিবেশ করেছেন। অফলাইনে, মরিয়ম একজন প্রকাশিত ঔপন্যাসিক, নাট্যকার এবং সঙ্গীতজ্ঞ। আমরা Sass এবং CSS এর সাথে তার কাজ সম্পর্কে কথা বলেছি।
র্যাচেল: আপনার গ্রিড ফ্রেমওয়ার্ক সুসি এর কারণে আমি প্রথম আপনার কাজ সম্পর্কে জানতে পেরেছি, কী কারণে আপনি এটি তৈরি করেছেন?
মিরিয়াম: 2008 সালে, ওয়েবে লেআউট একটি খুব ভিন্ন অভিজ্ঞতা ছিল। ডেভেলপাররা টেবিল লেআউট থেকে আরও শব্দার্থিক (কিন্তু এখনও হ্যাকি) ভাসমান গ্রিডে চলে গেছে। এক-আকার-ফিট-সমস্ত 12-কলামের "গ্রিড ফ্রেমওয়ার্ক"-এ একটি বুম ছিল—প্রি-সংজ্ঞায়িত CSS ক্লাসের একটি সেট সহ একটি পূর্ব-সংজ্ঞায়িত (সাধারণত স্থির) গ্রিড সরবরাহ করে। আপনার যদি আরও কাস্টমাইজযোগ্য কিছুর প্রয়োজন হয় তবে আপনি নিজেই ছিলেন। এটা স্পষ্ট যে ওয়েবসাইটগুলিকে আরও প্রতিক্রিয়াশীল হতে হবে, কিন্তু মিডিয়া-কোয়েরিগুলি এখনও উপলব্ধ ছিল না, এবং ফ্লুইড ফ্লোটগুলির চারপাশে ব্রাউজার সামঞ্জস্যপূর্ণ সমস্যাগুলির একটি লোড ছিল৷
আমি নাটালি ডাউনের সিএসএস সিস্টেম পদ্ধতি ব্যবহার করছিলাম, যা ফন্ট এবং ভিউপোর্ট আকার উভয়েরই প্রতিক্রিয়া জানাতে চতুর ছিল, কিন্তু আমি সমস্ত পুনরাবৃত্তিমূলক গণিত এবং ব্রাউজার হ্যাকগুলির জন্য হতাশ হয়ে পড়েছিলাম। একই সময়ে, সাস কিছুটা মনোযোগ পেতে শুরু করেছিল এবং আমার যা প্রয়োজন তার জন্য এটি পুরোপুরি ফিট। সুসির প্রথম খসড়াটি খুব সহজ ছিল: গণিত করতে এবং আমার প্রয়োজনীয় হ্যাকগুলি যোগ করার জন্য মাত্র কয়েকটি মিশ্রিত করুন। লক্ষ্য ছিল ন্যূনতম, এবং শুধুমাত্র অপরিহার্য কোড আউটপুট. সম্পূর্ণরূপে কাস্টমাইজযোগ্য গ্রিড, কোনো পূর্বনির্ধারিত ক্লাস ছাড়াই।
র্যাচেল: আপনি কীভাবে একটি সিএসএস প্রিপ্রসেসরে কাজ করা থেকে সিএসএস স্পেসিফিকেশনে কাজ করার জন্য পরিবর্তন করেছেন? আপনি কি মনে করেন প্রিপ্রসেসরে কাজ করা স্পেসিফিকেশন লেখার জন্য একটি ভাল পটভূমি ছিল?
মরিয়ম: আমার অভিজ্ঞতায় অনেক ওভারল্যাপ আছে, এবং আমি এখনও সেই বিভাজনের উভয় দিকেই খুব সক্রিয়। কিন্তু আমি মনে করি এটি মূলত Sass টিমকে ধন্যবাদ, বিশেষ করে Natalie Weizenbaum-এর নেতৃত্বে, যেটি একটি দীর্ঘমেয়াদী দৃষ্টিভঙ্গি নেয়- এমন টুলস ডেভেলপ করার চেষ্টা করে যা ওয়েব স্ট্যান্ডার্ডের বিকাশের সাথে মসৃণভাবে একীভূত হয়। আপনি যখন মূল ওয়েব স্ট্যান্ডার্ডের ভবিষ্যত সম্পর্কে চিন্তা করছেন তখন এক-আকার-ফিট-সমস্ত "মতামতযুক্ত" সমাধানের বাইরে ঠেলে দেওয়া এবং দীর্ঘমেয়াদী নমনীয়তার জন্য তৈরি করা অপরিহার্য।
কীভাবে আমরা এমন সরঞ্জামগুলি তৈরি করতে পারি যা বিকাশকারীর চাহিদা এবং পদ্ধতির বৈচিত্র্যকে সম্মান করে, যদিও এখনও অ্যাক্সেসযোগ্যতা এবং অন্যান্য গুরুত্বপূর্ণ বিবেচনাগুলিকে উত্সাহিত এবং সহজতর করে?
র্যাচেল: আমরা সিএসএস-এ একগুচ্ছ জিনিস পেয়েছি যা মূলত কার্যকারিতা প্রতিস্থাপন করে যা ঐতিহ্যগতভাবে সাসের অংশ ছিল। এখনও Sass মত কিছু ব্যবহার করার জন্য শক্তিশালী কারণ আছে?
মরিয়ম: হ্যাঁ, কিছু লোকের জন্য - কিন্তু এখানে কোন সার্বজনীন উত্তর নেই। উদাহরণ স্বরূপ ভেরিয়েবল নিন। Sass ভেরিয়েবলগুলি আভিধানিকভাবে স্কোপ করা হয়, এবং সার্ভারে সংগঠিত ডেটা স্ট্রাকচার যেমন তালিকা এবং অবজেক্ট, কালার ম্যানিপুলেশন ইত্যাদির সাথে সংকলিত হয়৷ এটি ডিজাইন সিস্টেম লজিকের জন্য দুর্দান্ত যা ব্রাউজারে চালানোর প্রয়োজন নেই৷
CSS ভেরিয়েবলের কিছু ওভারল্যাপ আছে, তারা মানও সঞ্চয় করতে পারে, কিন্তু তারা ক্যাসকেড-ভিত্তিক শক্তি এবং দুর্বলতার সম্পূর্ণ ভিন্ন সেট প্রদান করে। Sass কাস্টম বৈশিষ্ট্যগুলি পরিচালনা করতে পারে না এবং CSS সত্যিই কাঠামোগত ডেটা পরিচালনা করতে পারে না। উভয়ই দরকারী, এবং উভয়ই শক্তিশালী—কিন্তু আপনার নির্দিষ্ট চাহিদা পরিবর্তিত হতে পারে।
আমি মনে করি এটি দুর্দান্ত যখন লোকেরা এমন সরঞ্জামগুলি সরিয়ে ফেলতে পারে যা তাদের আর প্রয়োজন নেই এবং কিছু প্রকল্পের জন্য সার্ভার- এবং ক্লায়েন্ট-সাইড ভেরিয়েবল উভয়ের প্রয়োজন নাও হতে পারে। বিস্ময়কর! তবে এটি অনুমান করা খুব সহজ যে এর অর্থ তারা অভিন্ন, এবং একটি কেবল অন্যটিকে প্রতিস্থাপন করে। কিছু ডিজাইন লজিক সার্ভার-সাইডে ঘটতে এবং কিছু ঘটতে ক্লায়েন্ট-সাইডের জন্য সর্বদা ব্যবহার-কেস থাকবে—এমনকি যদি আমরা এমন জায়গায় পৌঁছে যাই যেখানে ভাষাগুলি মূলত একই বৈশিষ্ট্যগুলি সরবরাহ করে। প্রি-প্রসেসর দীর্ঘ মেয়াদে আমাদের সাথে আছে।
র্যাচেল: এমন কিছু আছে যা আপনাকে অবাক করেছে কারণ আপনি মান তৈরির কাজে আরও জড়িত হয়েছেন, বা এমন কিছু যা আপনি মনে করেন যে লোকেরা সাধারণত এই প্রক্রিয়া সম্পর্কে সচেতন নাও হতে পারে?
মরিয়ম: জড়িত হওয়ার আগে, স্ট্যান্ডার্ড প্রক্রিয়াটি একটি রহস্যময় এবং যাদুকর ব্ল্যাক বক্সের মতো অনুভূত হয়েছিল এবং আমি কী আশা করব তা নিশ্চিত ছিলাম না। আমি ভীত ছিলাম যে অবদান রাখার জন্য ব্রাউজার-অভ্যন্তরীণ বিষয়ে আমার যথেষ্ট জ্ঞান নাও থাকতে পারে, কিন্তু বাস্তবতা হল তাদের আরও ব্রাউজার ইঞ্জিনিয়ারের প্রয়োজন নেই। তাদের আরও বিকাশকারী এবং ডিজাইনার প্রয়োজন যারা বন্য অঞ্চলে ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করছে।
আমি অবাক হয়েছিলাম যে জড়িতদের মধ্যে খুব কম লোকই প্রাথমিকভাবে মানগুলির উপর দৃষ্টি নিবদ্ধ করে, কিন্তু তাদের মধ্যে খুব কমই প্রাথমিকভাবে ওয়েবসাইটগুলি তৈরি বা ডিজাইন করছে৷ W3C সদস্য সংস্থাগুলির 'স্বেচ্ছাসেবক' দ্বারা গঠিত (প্রায়শই সেই সংস্থাগুলি দ্বারা অর্থ প্রদান করা হয়, তবে তাদের প্রাথমিক কাজ হিসাবে নয়) এবং সদস্যতা সস্তা নয়। এটি অংশগ্রহণকারীদের প্রতিদিনের ডিজাইনার এবং ডেভেলপারদের থেকে দূরে সরিয়ে দেয়, বিশেষ করে আমরা যারা ছোট এজেন্সি বা ফ্রিল্যান্সে ক্লায়েন্টের কাজ করি। একজন আমন্ত্রিত বিশেষজ্ঞ হিসাবে আমার ভূমিকা সম্পূর্ণরূপে স্বেচ্ছাসেবক হবে, একটি ব্যয়বহুল শখ, যদি আমি সেই কাজের জন্য বাইরের তহবিল না পেতাম।
বাস্তবে, প্রক্রিয়াটি বেশ উন্মুক্ত এবং সর্বজনীন এবং এতে বিকাশকারীর সম্পৃক্ততা প্রয়োজন-কিন্তু একসাথে অনেক কথোপকথন ঘটছে, আপনার স্থান খুঁজে পাওয়া কঠিন হতে পারে। বিশেষ করে যদি এটি আপনার দিনের কাজ না হয়।
র্যাচেল: কন্টেইনার কোয়েরি অনেক বছর ধরে অনেক ওয়েব ডেভেলপারদের জন্য পবিত্র গ্রেইল হয়েছে। আমরা তাদের পাচ্ছি এই বিষয়ে আমি খুবই উত্তেজিত। আমার মনে হয় যেন অনেক লোক কন্টেইনার কোয়েরির উপযোগিতা নিয়ে ভাবছে—আপনি কি মনে করেন যে তাদের আরও সৃজনশীলতা আনলক করার সম্ভাবনা আছে?
মরিয়ম: অবশ্যই, যদিও আমি সেগুলিকে সম্পূর্ণ আলাদা হিসাবে দেখি না। আমাদের সবার কাছে সীমিত সময় আছে, এবং আমরা রক্ষণাবেক্ষণযোগ্য এবং কার্যকরী কোড লেখার চেষ্টা করছি। যখন বাস্তবিকভাবে কিছু করা কঠিন হয়, তখন যা সম্ভব তা নিয়ে আমাদের সৃজনশীল হওয়ার সম্ভাবনা কম।
এখনও, ওয়েব শিল্প এখন বড় কর্পোরেট স্বার্থ দ্বারা আধিপত্য, এবং তাই এই ব্যবসা উদ্বেগ সবসময় ওয়েব শিল্পীদের তুলনায় বেশি এয়ারটাইম পায়। এবং আমি মনে করি আমরা যদি ওয়েব সৃজনশীলতাকে বৈশিষ্ট্যগুলির জন্য প্রাথমিক ব্যবহারের ক্ষেত্রে উপেক্ষা করি তবে আমরা অনেক কিছু হারাবো। আমি কন্টেইনার ক্যোয়ারী প্রোটোটাইপের সাথে কিছু সিএসএস আর্ট লোক খেলতে দেখে খুব উত্তেজিত হয়েছি। Jhey Tompkins পুরানো CSS-বিরোধী মেমের ভাষ্য হিসাবে CSS ভিনিসিয়ান ব্লাইন্ডের একটি বিশেষ চতুর এবং ইন্টারেক্টিভ ডেমো তৈরি করেছে। আমি মনে করি সেই স্থানটিতে অন্বেষণ করার জন্য আরও অনেক কিছু আছে, এবং লোকেরা আর কী নিয়ে আসে তা দেখার জন্য আমি অপেক্ষা করতে পারি না।
কথোপকথনটি আকার-ভিত্তিক প্রশ্নগুলির উপরও ফোকাস করেছে, মূল ব্যবহারের ক্ষেত্রে, কিন্তু আমি স্টাইল প্রশ্নগুলির সাথে লোকেরা কী করে তা দেখে আমি উত্তেজিত - একটি CSS সম্পত্তি বা পরিবর্তনশীলের মানের উপর ভিত্তি করে শর্তাধীন শৈলী লেখার ক্ষমতা৷ এটি একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য, এবং এখনও পর্যন্ত বেশিরভাগই অনাবিষ্কৃত। আমি মনে করি এটি আরও সৃজনশীল সুযোগ খোলে!
র্যাচেল: সিএসএস-এ এমন কিছু কি আছে যা আমরা করতে পারি না (অথবা করার জন্য একটি আসন্ন উপায় আছে) যা আপনার মনে হয় কাজে লাগবে?
মরিয়ম: আমি কাজ করছি এমন কিছু অন্যান্য স্পেস সম্পর্কে আমি খুব উত্তেজিত। ক্যাসকেড স্তরগুলি লেখকদের নির্দিষ্টতার সমস্যাগুলির উপর আরও নিয়ন্ত্রণ দেবে এবং স্কোপকে আরও সুনির্দিষ্ট নির্বাচক লক্ষ্যে সহায়তা করা উচিত। তবে এ দুটিই উচ্চ-স্তরের স্থাপত্য উদ্বেগ। আমার মধ্যে শিল্পী সিএসএস টগল, ইন্টারেক্টিভ শৈলী তৈরির একটি ঘোষণামূলক উপায়, বা কন্টেইনার 'টাইমলাইন' এর মতো জিনিসগুলির জন্য আরও উত্তেজিত, যা আমাদের মিডিয়া বা কন্টেইনার ব্রেকপয়েন্টগুলির মধ্যে মানগুলিকে মসৃণভাবে রূপান্তর করতে দেয়৷ প্রতিক্রিয়াশীল টাইপোগ্রাফির জন্য এটির খুব ব্যবহারিক প্রভাব রয়েছে, তবে প্রতিক্রিয়াশীল শিল্প এবং অ্যানিমেশনের জন্য প্রচুর সৃজনশীল সুযোগও খুলে দেবে।
রাচেল: এই মুহূর্তে ওয়েবে আর কে সত্যিই আকর্ষণীয়, মজাদার বা সৃজনশীল কাজ করছে?
মরিয়ম: ওহ, আমি এটির উত্তর কীভাবে দেব তাও আমি নিশ্চিত নই, এমন বিভিন্ন ক্ষেত্রে অনেক লোক সৃজনশীল কাজ করছে। CSSWG এবং Open-UI উভয় থেকে অনেক উত্তেজনাপূর্ণ স্ট্যান্ডার্ডের কাজ চলছে, যার মধ্যে আপনার ফ্র্যাগমেন্টেশনের কিছু কাজ রয়েছে। কিন্তু আমি প্রায়শই ওয়েব শিল্পীদের কাছ থেকে সবচেয়ে বেশি অনুপ্রেরণা পাই এবং কীভাবে লোকেরা এই সরঞ্জামগুলিকে উৎপাদনে রাখছে, এমন উপায়ে যা সরাসরি বাণিজ্যের সাথে সংযুক্ত নয়। Jhey , বা Lynn Fisher , বা Yuan Chuan , বা আরও অনেকের মতো মানুষ যারা ওয়েব প্রযুক্তিগুলি দৃশ্যত এবং ইন্টারেক্টিভভাবে কী করতে পারে তার সীমানা ঠেলে দিচ্ছে৷ এমনকি আরও ব্যবসা-চালিত কাজ করা লোকেরা তাদের শৈল্পিক কৌশল থেকে অনেক কিছু শিখতে পারে।
আমি বেন গ্রোসারের মতো লোকেদের আরও ধারণাগত ওয়েব আর্টকেও প্রশংসা করি, যারা ওয়েব থেকে এবং বিশেষ করে সোশ্যাল মিডিয়া থেকে আমরা কী চাই তা পুনর্বিবেচনা করার জন্য আমাদের চাপ দেয়৷ উদাহরণস্বরূপ, তার নতুন minus.social দেখুন।
র্যাচেল: css.oddbird.net- এ CSS-এ মরিয়মের কাজ চালিয়ে যান এবং miriam.codes এবং Twitter @TerribleMia- এ তার ওয়েবসাইটের মাধ্যমে তিনি আরও কী করতে চান তা খুঁজে বের করুন।