আপনি কি কখনও এমন একটি ওয়েব অ্যাপ বা এক্সটেনশন চান যা আপনাকে ফ্লাইতে UI প্রোটোটাইপ তৈরি এবং ভাগ করতে দেয়?
আমরা সবাই করি! আমাদের সকলেরই ধারণা আছে যে আমরা কীভাবে আমাদের সাইট বা অ্যাপগুলি দেখতে এবং অনুভব করতে চাই৷
সুতরাং, আপনি সত্যিই একটি দুর্দান্ত নকশা নিয়ে এসেছেন এবং আপনি এটি কীভাবে করেছিলেন তা ঠিক মনে করতে পারছেন না?
এখন আপনাকে এটি ভাগ করার একটি উপায় খুঁজে বের করতে হবে। আপনি যদি একটি সুন্দর জটিল ডিজাইন শেয়ার করার চেষ্টা করেন তবে এটি কয়েক দিন এমনকি সপ্তাহও নিতে পারে।
আপনার ওয়েব অ্যাপ প্রোটোটাইপ তৈরি করার জন্য অপেক্ষা করার কোন কারণ নেই। এখনই ডাবলেট দিয়ে সেগুলি তৈরি করুন।
টেনে আনুন এবং ড্রপ উপাদান, শৈলী, এবং এটি সংরক্ষণ করুন. পর্যালোচনার জন্য এটি একটি ডিজাইনারের কাছে পাঠান বা এটি একটি উপস্থাপনায় অনুলিপি করুন৷ সম্ভাবনা সীমাহীন.
ডাবলেট কি?
ব্যবহার ড্যাবলেট, আপনি রিয়েল-টাইমে CSS এবং HTML কোডের সামান্য স্নিপেট নিয়ে পরীক্ষা করতে পারেন।
এটি ব্যবহার করার সময় আপনার CSS কোডে কোনো উপসর্গের প্রয়োজন হবে না। GitHub সারাংশ আপনাকে আপনার বিষয়বস্তু সঞ্চয় করতে, অন্যান্য সাইটে পোস্ট করতে এবং অন্যদের সাথে শেয়ার করার অনুমতি দেয়।
এটি অন্যান্য বিকাশকারীদের সাথে কোড স্নিপেট শেয়ার করার এবং প্রতিক্রিয়া পাওয়ার একটি দুর্দান্ত উপায়৷
এটা কিভাবে কাজ করে?
কোডটি টাইপ করার সাথে সাথেই এর উপরে ভিজ্যুয়াল আউটপুট তাৎক্ষণিকভাবে দৃশ্যমান হয়। জাভাস্ক্রিপ্ট এটি একাকী ছাড়, বিবেচনা করে প্রতিটি কীস্ট্রোকে এটি চালানো বিরক্তিকর হবে এবং এমনকি কিছু পরিস্থিতিতে ব্রাউজারটিকে অব্যবহারযোগ্য হতে পারে।
JavaScript ট্যাবে "Run JS" অপশন বা কীবোর্ড শর্টকাট (Ctrl + Enter বা Cmd + Enter) ব্যবহার করলে জাভাস্ক্রিপ্ট চালানো হবে যখন একটি Dabblet চলে। বিকল্প মেনু আপনাকে এই শৈলী পরিবর্তন করতে দেয়।
একজন বিকাশকারী হিসাবে, আপনি একই সাথে এই তিনটি ভাষাতে কোডিং বা সমাপ্ত পণ্য দেখার মধ্যে স্যুইচ করতে পারেন।
বৈশিষ্ট্য
নিচে ড্যাবলেটের বৈশিষ্ট্যগুলি রয়েছে যা আপনার জানা উচিত:
দ্রুত CSS সম্পাদনা: আপনি দ্রুত CSS বৈশিষ্ট্য যোগ, সম্পাদনা এবং অপসারণ করতে পারেন। পরিবর্তনগুলি রিয়েল-টাইমে পৃষ্ঠায় প্রতিফলিত হবে।
সিনট্যাক্স হাইলাইটিং: সিএসএস এবং এইচটিএমএল কোড সিনট্যাক্স হাইলাইট করা হয়, এটি পড়া এবং বোঝা সহজ করে তোলে। আপনি টাইপ করার সাথে সাথে কোডটিও যাচাই করা হবে। আপনি চাইলে কোড বক্সটি লুকাতেও বেছে নিতে পারেন।
স্বয়ংসম্পূর্ণ: Dabblet CSS বৈশিষ্ট্য এবং মানগুলির জন্য স্বয়ংক্রিয়ভাবে সম্পূর্ণ অফার করে। আপনি যখন স্টাইলশীট তৈরি বা সম্পাদনা করছেন তখন এটি খুব সহায়ক হতে পারে।
পূর্ব-নির্মিত CSS স্টাইলশীট: আপনি জনপ্রিয় ওয়েবসাইট থেকে পূর্ব-নির্মিত CSS স্টাইলশীট অ্যাক্সেস করতে পারেন। এগুলি আপনার নিজের ওয়েবসাইটে দ্রুত এবং সহজে শৈলী যোগ করতে ব্যবহার করা যেতে পারে।
সংক্ষিপ্ত সমর্থন: Dabblet GitHub Gists সমর্থন করে, আপনাকে আপনার কোড স্নিপেটগুলিকে সহজেই অন্যদের সাথে সঞ্চয় করতে এবং শেয়ার করতে দেয়।
সরাসরি সম্প্রচার: আপনি পৃষ্ঠাটি পুনরায় লোড না করেই রিয়েল-টাইমে আপনার কোড পরিবর্তনের ফলাফল দেখতে পারেন। উদাহরণস্বরূপ, আপনি যদি একটি পাঠ্যের রঙ পরিবর্তন করেন, আপনি টাইপ করার সাথে সাথে পাঠ্যটিতে প্রতিফলিত পরিবর্তন দেখতে পাবেন।
কীবোর্ড শর্টকাটগুলি: ড্যাবলেটে সাধারণ কাজের জন্য কীবোর্ড শর্টকাট রয়েছে, যেমন একটি নতুন শৈলীর নিয়ম যোগ করা বা মন্তব্য করা।
একাধিক ভিউ মোড: Dabblet একাধিক ভিউ মোড অফার করে, যা আপনাকে কোড এবং ফলাফল পাশাপাশি বা একে অপরের উপরে এবং নীচে দেখতে দেয়।
ভালো দিক
- দ্রুত CSS
- আপনি সাইন ইন করলেও, আপনি এখনও ছদ্মবেশী সংরক্ষণ করতে পারেন।
- বিভিন্ন পরামিতির জন্য ইনলাইন CSS মান প্রিভিউয়ার যেমন কোণ, রং, সময়কাল ইত্যাদি।
- সবকিছুই XHR-ed, তাই পৃষ্ঠাটি কখনই রিফ্রেশ হয় না, এমনকি আপনি সংরক্ষণ করলেও নয়।
- কীবোর্ড শর্টকাট প্রচুর।
- সমস্ত কোড স্বয়ংক্রিয় ফর্ম্যাট (মার্কডাউন বাদে)।
- পেতে-গো থেকে কঠিন ডকুমেন্টেশন.
মন্দ দিক
- ইন্টারফেসটি প্রথমে কিছুটা অপ্রতিরোধ্য, তবে আপনি এটিতে অভ্যস্ত হয়ে যান।
- কোনো প্রকল্প-স্তরের ব্যবস্থাপনা বৈশিষ্ট্য (এখনও)।
ডাবলেট ইন্টিগ্রেশন
যেকোনো প্ল্যাটফর্মকে অন্যান্য পরিষেবার সাথে একীভূত করতে হবে এবং Dabblet এর ব্যতিক্রম নয়। ডাবলেট অফার করে এমন কিছু ইন্টিগ্রেশন নিচে দেওয়া হল:
Google Analytics
আপনি সহজেই আপনার Google Analytics ট্র্যাকিং কোড Dabblet পৃষ্ঠাগুলিতে যোগ করতে পারেন। এটি আপনাকে আপনার Dabblet-এর জন্য পৃষ্ঠা দর্শন এবং অন্যান্য পরিসংখ্যান ট্র্যাক করার অনুমতি দেবে।
উবুন্টু
উবুন্টু থিম তৈরি করতে ডাবলেট ব্যবহার করা যেতে পারে। আপনি একটি নতুন Dabblet তৈরি করতে পারেন, CSS এবং HTML কোড যোগ করতে পারেন এবং একটি ওয়েব ব্রাউজারে থিমের পূর্বরূপ দেখতে পারেন।
DigitalOcean
একটি একজাতীয় ক্লাউড হোস্টিং কোম্পানি ব্যবসায়িকদের ক্লাউড কম্পিউটিং পরিষেবা প্রদান করে, যাতে তারা তাদের ক্রিয়াকলাপ আরও দক্ষতার সাথে বৃদ্ধি করতে পারে।
Dabblet এটা দিয়ে কি করে?
আপনি এখন আপনার Dabblets তৈরি করতে, পরিচালনা করতে এবং স্থাপন করতে পারেন৷ DigitalOcean Spaces.
এটি আপনাকে আপনার সমস্ত কোড স্নিপেটগুলিকে এক জায়গায় রাখতে দেয় এবং সেগুলিকে অন্যদের সাথে ভাগ করা সহজ করে তোলে৷
Dabblets জন্য বিকল্প
বিকল্পগুলি সর্বদা উপস্থিত থাকে এবং একই শিরায়, ড্যাবলেটের ক্ষেত্রে চিন্তা করার জন্য এখানে কয়েকটি রয়েছে:
pastebin.com
প্রোগ্রামাররা সাধারণত সোর্স কোড বা কনফিগারেশন ডেটা টুকরা সংরক্ষণ করতে ওয়েবসাইট ব্যবহার করে। যাইহোক, যে কেউ প্রদত্ত স্পেসে যেকোনো টেক্সট রাখতে পারে।
জেএস বিন
JS Bin জাভাস্ক্রিপ্টের জন্য একটি বিনামূল্যের পরীক্ষার টুল। একবার জাভাস্ক্রিপ্ট এক প্যানে এবং অন্যটিতে HTML প্রবেশ করানো হলে ফলাফলটি একটি ছোট URL এর মাধ্যমে ভাগ করা যেতে পারে। একটি মেনু ব্যবহার করুন যা আপনাকে সর্বাধিক ব্যবহৃত কিছু JS লাইব্রেরি থেকে নির্বাচন করতে দেয়।
CssDeck
এই টুলটি আপনার কোডিং প্রচেষ্টায় আপনাকে সাহায্য করতে পারে এমন অন্যদের সাথে টেস্ট কেস তৈরি এবং বিনিময় করার জন্য দুর্দান্ত। বিভিন্ন বিকল্পের সাথে, আপনি এমনকি অন্যান্য প্রোগ্রামারদের সাথে তাত্ক্ষণিকভাবে প্রকল্পগুলিতে সহযোগিতা করতে পারেন।
প্লঙ্কার
প্লাঙ্কার হল একটি ডিজিটাল প্ল্যাটফর্ম যেখানে ওয়েব ডেভেলপাররা তাদের চিন্তাভাবনা করতে, সহযোগিতা করতে এবং শেয়ার করতে পারে।
উদাহরণস্বরূপ, আপনি একটি "হ্যালো, বিশ্ব!" দিয়ে শুরু করতে পারেন। যেকোনো ভাষায় প্রোগ্রাম করুন এবং একটি সমৃদ্ধ শেখার অভিজ্ঞতা তৈরি করতে কোড স্নিপেট, মার্কডাউন এবং স্ক্রিনশট যোগ করুন।
ফাইনাল শব্দ
উপসংহারে, ড্যাবলেট ওয়েব ডেভেলপারদের জন্য একটি দরকারী টুল, বিশেষ করে যারা দ্রুত এবং সহজে উপায় খুঁজছেন তাদের কোড পরীক্ষা করুন।
এর বিভিন্ন বৈশিষ্ট্য এবং একীকরণের সাথে, এই প্ল্যাটফর্মের জন্য একটি ব্যবহার খুঁজে পাওয়া কঠিন।
আজই একবার চেষ্টা করে দেখ!
নির্দেশিকা সমন্ধে মতামত দিন