প্রকাশিত: অক্টোবর 21, 2024
গত সপ্তাহে আমরা DevTools-এ একটি সম্পূর্ণ নতুন প্যানেল প্রবর্তন করেছি: AI সহায়তা আপনাকে DevTools-এ সরাসরি Gemini-এর সাথে স্টাইলিং সমস্যাগুলি ডিবাগ করতে সাহায্য করতে পারে।
এটা কি করতে পারে দেখতে আগ্রহী? এই নতুন বৈশিষ্ট্যটি আপনার পৃষ্ঠার স্টাইলিংকে আরও সহজ করে তুলতে পারে এমন এই 5টি দুর্দান্ত উপায় দেখুন - লেআউটগুলি বোঝা থেকে শুরু করে বিমান ঠিক করা পর্যন্ত৷
1. লেআউট বুঝুন
ওয়েবসাইট তৈরি করার সময় আপনি সর্বদা স্ক্র্যাচ থেকে শুরু করেন না। প্রায়শই আপনাকে বিদ্যমান কোডের উপরে তৈরি করতে হবে যার সম্পর্কে আপনার কোন পূর্ব জ্ঞান নেই - এবং সবচেয়ে খারাপ ক্ষেত্রে আপনার আশেপাশের কারও কাছেও নেই।
এআই-কে একটি উপাদানের বিন্যাস সম্পর্কে জিজ্ঞাসা করুন এবং বুঝুন কেন এটি শেষ নোডে প্রদর্শিত হয় - এবং কেন এই overflow: hidden; একটি উপাদান আসলে একটি কারণ জন্য আছে. 👀
চেষ্টা করার জন্য অনুরোধ করুন
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. পেয়ার-প্রোগ্রামিং
CSS এখন সত্যিই শক্তিশালী হয়ে উঠেছে। অনেক সম্ভাবনার সাথে মাঝে মাঝে বিভ্রান্ত হওয়া ঠিক আছে: এটা কি align-items আমার প্রয়োজন? বা justify-items ? অথবা বরং justify-self বা align-content ?
কখনও কখনও আপনি সত্যিই জানেন যে আপনি কি করতে চান কিন্তু সিএসএস বৈশিষ্ট্যের সঠিক সেট পেতে পারেন না। পরের বার যখন আপনি এই পরিস্থিতিতে নিজেকে খুঁজে পান, তখন আপনার সমস্যা AI কে ব্যাখ্যা করুন এবং এটি আপনার জন্য জিনিসগুলি বের করতে দিন।
AI সহায়তা আপনার বিদ্যমান কোডটি তদন্ত করবে এবং আপনি যা অর্জন করার চেষ্টা করছেন তার সাথে এটির তুলনা করবে, আপনার কোডবেসে পর্যালোচনা, প্রয়োগ এবং অনুলিপি করার জন্য প্রয়োজনীয় সংশোধনের পরামর্শ দেবে।
3. অ্যাক্সেসিবিলিটি উপদেষ্টা
সহায়ক প্রযুক্তির সাহায্যে আপনার ওয়েবসাইট অ্যাক্সেসযোগ্য এবং সহজে ব্যবহার করা গুরুত্বপূর্ণ। বিকাশের শুরু থেকে অ্যাক্সেসযোগ্যতা বিবেচনা করুন, চিন্তাভাবনা না করে এবং আপনার বিকাশ প্রক্রিয়া জুড়ে ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি নির্দেশিকা (WCAG) অনুসরণ করার লক্ষ্য রাখুন।
যেখানে একটি <div> একটি আরও শব্দার্থিক HTML উপাদান দিয়ে প্রতিস্থাপন করা যেতে পারে, কীভাবে একটি অতিরিক্ত aria-* বৈশিষ্ট্য সহায়ক হতে পারে, বা রঙের বৈসাদৃশ্য কীভাবে উন্নত করা যেতে পারে সে সম্পর্কে টিপস পেতে AI সহায়তা ব্যবহার করুন৷
চেষ্টা করার জন্য অনুরোধ করুন
What about color contrast in this element?
4. এটা আপনার করুন
প্রবণতা আসে এবং যায়: গ্রেডিয়েন্ট, ছায়া এবং কঠোর সীমানা ছিল, তারপরে ফ্ল্যাট ডিজাইন, অন্ধকার পটভূমিতে উজ্জ্বল নিয়ন রঙের সাথে আজকের ডিজাইনের যুগে চলে গেছে।
কিন্তু এটা কি কখনও কখনও ক্লান্তিকর নয় যে ওয়েবে ইউনিফর্ম জিনিসগুলি দেখতে পারে? যদি এটি আপনার জন্য সেই দিনগুলির মধ্যে একটি হয়, তবে জিনিসগুলি পরিবর্তন করতে এবং ওয়েবটিকে আবার একটু মজাদার করতে AI সহায়তা চাইতে পারেন - যেমন একটি থিম পার্ক রাইড!
চেষ্টা করার জন্য অনুরোধ করুন
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. একজন বিমান মেকানিক হন
স্টাইলিং সমস্যাগুলি ব্যাখ্যা করা, সেগুলি ঠিক করতে সাহায্য করা, অ্যাক্সেসযোগ্যতার বিষয়ে পরামর্শ দেওয়া এবং বিদ্যমান শৈলীগুলি পরিবর্তন করা - ইতিমধ্যেই এমন একটি গুচ্ছ রয়েছে যা AI সহায়তা আপনাকে সহায়তা করতে পারে - এবং আরও অনেক কিছু রয়েছে! আপনি কি বিশ্বাস করতে পারেন যে এআই সহায়তা আপনাকে বিমান ঠিক করতে সাহায্য করে? কোনো পূর্ব অভিজ্ঞতার প্রয়োজন নেই, আপনার সামগ্রিক ব্যবহার করুন এবং Chrome DevTools হ্যাঙ্গারে আপনার হাত নোংরা করুন !
এবং আমাদের পাবলিক ইস্যু ট্র্যাকারে আপনার নিজের অভিজ্ঞতা সম্পর্কে আমাদের জানাতে ভুলবেন না!