Home-theater-designers
জাভাস্ক্রিপ্ট ওয়েব ডেভেলপমেন্ট দিয়ে শুরু করা একটি হতাশাজনক প্রক্রিয়া হতে পারে, কিন্তু সেখানে এমন সরঞ্জাম রয়েছে যা এটিকে সহজ করে তোলে।
CodePen.io একটি ইন-ব্রাউজার কোডিং পরিবেশ যা কোড শেখা এবং ন্যূনতম ঝামেলা সহ আইডিয়াগুলিকে দ্রুত প্রোটোটাইপ করার জন্য ডিজাইন করা হয়েছে।
এই নিবন্ধে, আমরা সাইটের কিছু বৈশিষ্ট্য এবং সেগুলি কীভাবে আপনাকে আরও ভাল প্রোগ্রামার হতে সাহায্য করতে পারে তা দেখে নিই।
কোডপেন কি?
CodePen a নামে কিছু প্রদান করে কলম , যা এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের জন্য তিনটি ভিন্ন উইন্ডো, প্লাস একটি প্রিভিউ ফলক যা আপনি টাইপ করার সাথে সাথে রিয়েল-টাইমে আপডেট হয়।
যদিও এটি প্রায়ই ওয়েব ডেভেলপারদের ওয়েবসাইটের জন্য ধারনা প্রদর্শনের জন্য ব্যবহৃত হয়, এটি ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্টের মূল বিষয়গুলি শেখার জন্য একটি দুর্দান্ত জায়গা। কোডপেন ব্যবহার করার সময় আপনাকে সবচেয়ে উল্লেখযোগ্য বৈশিষ্ট্যগুলি জানতে হবে।
1. প্রি -প্রসেসর
প্রি -প্রসেসরগুলি কোডিংকে সহজ করার জন্য ডিজাইন করা ভাষা বা সংকলিত ভাষা। তারা সুবিধার জন্য একটি ভাষায় বৈশিষ্ট্য যোগ করতে পারে, এবং কোড পড়া সহজ করে তোলে। ওয়েব ডেভেলপমেন্টে, এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের জন্য প্রিপ্রোসেসরের সংমিশ্রণ দ্রুত পরিষ্কার কোড তৈরি করতে ব্যবহৃত হয়।
আপনি যদি ওয়েব ডেভেলপমেন্ট শিখছেন এবং বিভিন্ন প্রি -প্রসেসর ব্যবহার করতে চান, কোডপেন আপনাকে ফ্লাইতে প্রিপ্রোসেসর স্যুইচ করার অনুমতি দেয় এবং কোডটি রিয়েল টাইমে কম্পাইল করে দেখুন। কোডপেন অ্যাপের তিনটি প্যানের প্রত্যেকটির উপরের ডানদিকে একটি ড্রপডাউন মেনু রয়েছে। নির্বাচন করুন সংকলিত HTML/CSS/JS দেখুন কোডটি কীভাবে ব্যাখ্যা করা হবে তা দেখতে।
এই কলমে, আমরা একটি সাধারণ সাইট ব্যবহার করে তৈরি করেছি হামল এবং সাস কিছু হেডার টেক্সট স্টাইল করতে। নির্বাচন সংকলিত দেখুন স্ট্যান্ডার্ড HTML এবং CSS দেখায়। এই উদাহরণে পার্থক্য ন্যূনতম। একটি নতুন ভাষা শেখার সময়, তবে, প্রিপ্রোসেসড কোডটি একবার কম্পাইল করার সময় এটি দেখতে দরকারী হতে পারে।
2. বাহ্যিক সম্পদ
প্রিপ্রোসেসরগুলির জন্য স্থানীয় সহায়তার পাশাপাশি, কোডপেন বাহ্যিক স্ক্রিপ্টগুলিকে সমর্থন করে। এটি আপনার ব্যক্তিগত প্রকল্পের জন্য লাইব্রেরিগুলির সাথে অভিজ্ঞতা অর্জনের জন্য, অথবা প্রতিক্রিয়া মত জনপ্রিয় ওয়েব অ্যাপ লাইব্রেরিগুলিতে ব্রাশ করার জন্য এটি নিখুঁত জায়গা করে তোলে।
একটি বাহ্যিক লাইব্রেরি যোগ করতে, খুলুন সেটিংস আপনার কলমে প্যান, এবং জাভাস্ক্রিপ্ট ট্যাবে যান। সম্পদ যুক্ত করার দুটি উপায় আছে, হয় রিসোর্স ইউআরএল ম্যানুয়ালি যোগ করে, অথবা অনুসন্ধান করে।
আমরা আমাদের প্রচ্ছদে এই বৈশিষ্ট্যটি ব্যবহার করেছি mo.js সহ ওয়েব অ্যানিমেশন , বাবেল প্রিপ্রোসেসিং সহ।
কলম দেখুন Mojs MUO উদাহরণ ইয়ান দ্বারা ( - বারডক্টোরাস ) কোডপেনে।
হ্যাঁ, কোডপেন কলম এম্বেড করা যাবে! এগিয়ে যান এবং Mo.js টিউটোরিয়ালের ফলাফল দেখতে উপরের প্রিভিউ প্যানে ক্লিক করুন!
অন্যান্য কলম বহিরাগত লাইব্রেরির মত আমদানি করা যায়। এর মানে হল আপনি আপনার নতুন কলমে মডিউলের মত ব্যবহার করার জন্য পূর্বে লিখিত কলম থেকে উপাদান নিতে পারেন। কোডপেন ব্যবহারকারী অ্যাডামস সহজ পোল কলম এর একটি ভাল উদাহরণ।
3. টেমপ্লেট
যখন আপনি নতুন ধারণা শিখছেন বা নতুন আইডিয়া পরীক্ষা করছেন, আপনি প্রায়ই একই ধরনের উপাদান ব্যবহার করেন এবং একই ধাপগুলি আবার শুরু করেন। কোডপেন টেমপ্লেট কলম তৈরির অনুমতি দেয় যা পুনরাবৃত্তি হ্রাস করতে পারে এবং আপনাকে সরাসরি পয়েন্টে নিয়ে যেতে দেয়।
একটি টেমপ্লেট তৈরি করতে, একটি নতুন কলম খুলুন, আপনার পরিবর্তন করুন এবং নির্বাচন করুন টেমপ্লেট সেটিংস মেনুতে স্লাইডার।
https://vimeo.com/221428690
সম্প্রতি অবধি, বিনামূল্যে ব্যবহারকারীরা কেবল তিনটি টেমপ্লেট তৈরি করতে পারত, কিন্তু এখন সমস্ত ব্যবহারকারীরা তাদের অ্যাকাউন্টে যত টেমপ্লেট চান তা রাখতে পারে। ন্যূনতম বিলম্বের সাথে একটি নতুন ধারণা শুরু করার জন্য নিখুঁত!
4. ফ্যাশন সহযোগিতা
কোডপেনের সাথে সহযোগিতা এবং শেখানোর ক্ষমতা তার সবচেয়ে বড় সম্পদ হতে পারে। প্রোগ্রামারদের জন্য ইতিমধ্যে প্রচুর সহযোগিতার সরঞ্জাম রয়েছে, তবে কোডপেনের পদ্ধতিটি সহজ এবং স্বজ্ঞাত।
কোডপেনের প্রো ব্যবহারকারীরা একটি নতুন কলম তৈরি করতে পারেন এবং এটিকে সহযোগিতার জন্য খুলতে পারেন পরিবর্তন দেখুন তালিকা. এটি আপনার কোডপেন প্রো প্ল্যানের উপর নির্ভর করে একটি স্কেলিং সংখ্যক মানুষের জন্য একটি ভাগযোগ্য আমন্ত্রণে কলমের লিঙ্কটি পরিবর্তন করে।
টাস্কবার ফুলস্ক্রিন উইন্ডোজ 10 এ দেখাচ্ছে
এই উদাহরণে, আমি এইচটিএমএল লিখেছিলাম যখন একজন বন্ধু রিয়েল-টাইমে সিএসএস আপডেট করেছিল, যেখানে একটি লেবেলযুক্ত কার্সার চিহ্নিত করা হয়েছিল যেখানে তারা কাজ করছিল।
লিঙ্ক সহ যে কেউ ইন-ব্রাউজার চ্যাট ফাংশনে যোগ দিতে এবং ব্যবহার করতে পারে, তারা একজন প্রো ব্যবহারকারী কিনা বা কোডপেন অ্যাকাউন্ট আছে কিনা তা বিবেচনা না করেই। যদি অটো -সেভ বন্ধ থাকে তবে শুধুমাত্র কলমের মালিক যেকোনো পরিবর্তন সংরক্ষণ করতে পারে, এটি অন্যদের কাছে আপনার কোডটি ঝুঁকি ছাড়াই খোলার একটি নিরাপদ উপায়।
এই মোডের উন্মুক্ত প্রকৃতি নতুনদের জন্য উপকারী কারণ আপনি একটি কঠিন ধারণার মাধ্যমে আপনাকে গাইড করার জন্য আপনার কলমে প্রায় কাউকে আমন্ত্রণ জানাতে পারেন। সম্ভাব্য কর্মচারীদের সাক্ষাৎকার নেওয়ার জন্য এটি নিখুঁত হওয়ায় আপনার চারপাশের পথ জানার জন্য এটি একটি সুবিধাজনক মোড, এবং ইতিমধ্যে হয়ে গেছে এইভাবে পেশাগতভাবে ব্যবহার করা হয়েছে !
5. অধ্যাপক মোড
প্রফেসর মোড একজন প্রো ব্যবহারকারীকে একটি রুম হোস্ট করার অনুমতি দেয় যেখানে কেবল তারা কোড সম্পাদনা করতে পারে। 10-100 এর মধ্যে ব্যবহারকারীরা হোস্টের প্রো প্ল্যানের উপর নির্ভর করে দেখতে এবং চ্যাট করতে পারেন।
অধ্যাপক মোড ক্লাসরুম শেখার এবং দূরশিক্ষার মধ্যে নমনীয়তা, অথবা দুটির সমন্বয়ের অনুমতি দেয়। প্রফেসর মোড ব্যবহার করলে ক্লাসের পিছনের লোকেরা সামনের দিকে একই অভিজ্ঞতা পাবে এবং শিক্ষকের জন্য বাগ -ফিক্স দেখাবে যা রিয়েল টাইমে আপডেট হবে।
6. উপস্থাপনা মোড
উপস্থাপনা মোড ডিজাইন করা হয়েছে, আশ্চর্যজনকভাবে, উপস্থাপনা কোড মাথায় রেখে। অ্যাপটি একটি সরলীকৃত ভিউতে প্রদর্শিত হয়, যা ওভারহেড প্রজেক্টরের সাথে কাজ করার জন্য ডিজাইন করা হয়েছে। কোডপেন নিম্নগতির ইন্টারনেট সংযোগ এবং দুর্বল হার্ডওয়্যারে ব্যবহারের জন্য উপস্থাপনা মোডটি অপ্টিমাইজ করেছে।
চতুর পাঠকরা ইতিমধ্যেই বুঝতে পেরেছেন যে কোডপেনের বিনামূল্যে সংস্করণটি ঠিক এই ফাংশনটি প্রদান করবে, যদিও প্রো মোডে কয়েকটি দরকারী বৈশিষ্ট্য রয়েছে। লেআউট, ফন্ট সাইজ এবং থিমগুলি প্রায় যেকোনো সেটিং অনুসারে ফ্লাইতে দ্রুত পরিবর্তন করা যেতে পারে, এবং কলমের লিঙ্ক দেখানো একটি জাম্বো আকারের সংক্ষিপ্ত ইউআরএল এনে প্রকল্পটিকে ভাগ করা সহজ করে তোলে।
এই ছোট পরিবর্তনগুলি, প্রিভিউ উইন্ডোকে স্কেল করতে সক্ষম হওয়ার সাথে সাথে আপনি যা দেখিয়েছেন তা মানানসই, উপস্থাপনা মোড উভয় শিক্ষক এবং ডেভেলপারদের সহকর্মীদের কাছে ধারণা উপস্থাপনের জন্য নিখুঁত করুন। প্রেজেন্টেশন মোডটিও একটি পরিষ্কার চেহারা, এবং কোড উপস্থাপন করার সহজ উপায় যদি আপনি নিজেকে একটি প্রোগ্রামিং পজিশনের জন্য ইন্টারভিউ দিচ্ছেন।
7. প্যাটার্নস
কোডপেনের সংগ্রহের মাধ্যমে অনুপ্রেরণার সন্ধান করা অনেক সহজ নকশা নিদর্শন ।
প্রতিটি বিভাগ নির্দিষ্ট কাজের জন্য কোডপেন ব্যবহারকারীদের দ্বারা প্রদত্ত উদাহরণ কোডের একটি সংগ্রহ। আপনি কি আপনার সাইটের জন্য ডায়নামিক বোতাম তৈরির উপায় খুঁজছেন? একরোডিং মেনু? প্রায় যেকোনো উদাহরণের সাথে মানানসই ক্যাটাগরির সম্পদ রয়েছে।
এই নিদর্শনগুলি ইন্টারেক্টিভ বোতামগুলি কীভাবে কাজ করে এবং গতিশীল ব্যবহারকারী ইন্টারফেসগুলি কীভাবে কাজ করতে পারে তা শেখার একটি দুর্দান্ত উপায়।
8. এমমেট
এমমেট , যা আগে জেন কোডিং নামে পরিচিত ছিল, ব্যাপকভাবে এইচটিএমএল এবং সিএসএস ডেভেলপমেন্টের জন্য সবচেয়ে বড় সময় সাশ্রয়কারী হিসেবে বিবেচিত। প্লাগইনটি এমন কিছু কোড নেয় যা আপনি নিজেকে অনেক লিখছেন এবং সেগুলিকে সহজ শর্টকাটে রূপান্তরিত করেন।
এটিকে কাজে লাগানো ব্যাখ্যা করার চেয়ে ভাল, তাই একটি HTML ডকুমেন্টের জন্য স্বাভাবিক সেটআপ নিন:
প্রতিটি এইচটিএমএল ডকুমেন্টে এটি যোগ করা দুটি ক্রিয়ায় কমিয়ে আনা হয়েছে। Emmet ব্যবহার করে, টাইপ করুন ! এবং আঘাত ট্যাব চাবি. ম্যাজিক!
এমমেট কোডপেন -এ স্ট্যান্ডার্ড হিসাবে সক্রিয় এবং বিশেষ করে দরকারী যদি আপনি জাভাস্ক্রিপ্টে একটি নতুন ধারণা শেখার চেষ্টা করেন এবং দ্রুত সমর্থনকারী এইচটিএমএল এবং সিএসএস তৈরি করতে চান।
উন্নত অভিজ্ঞতার জন্য কোডপেনের সাথে বিকাশ করুন
কোডপেন ওয়েব ডেভেলপারদের জন্য একটি চমৎকার হাতিয়ার, এবং ক্ষেত্রটি ক্রমাগত বৃদ্ধি পাচ্ছে। ওয়েব ডেভেলপমেন্টে ভবিষ্যতের জন্য জাভাস্ক্রিপ্ট একটি দুর্দান্ত ভাষা।
সিম কার্ডের ব্যবস্থা নেই মিমি#2
জাভাস্ক্রিপ্ট দিয়ে শুরু করতে ইচ্ছুকদের জন্য কিছু দুর্দান্ত টিউটোরিয়াল এবং কোর্স পাওয়া যায়, এবং কোডপেন আপনার নতুন দক্ষতা পরীক্ষা করার জন্য একটি দুর্দান্ত পরিবেশ।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল 8 টি সেরা ওয়েবসাইট বিনামূল্যে অডিওবুক ডাউনলোড করার জন্যঅডিওবুক বিনোদনের একটি বড় উৎস, এবং হজম করা অনেক সহজ। এখানে আটটি সেরা ওয়েবসাইট রয়েছে যেখানে আপনি সেগুলি বিনামূল্যে ডাউনলোড করতে পারেন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডেভেলপমেন্ট
- জাভাস্ক্রিপ্ট
- সিএসএস
ইয়ান বাকলি জার্মানির বার্লিনে বসবাসরত একজন ফ্রিল্যান্স সাংবাদিক, সঙ্গীতশিল্পী, অভিনয়শিল্পী এবং ভিডিও প্রযোজক। যখন তিনি লিখছেন না বা মঞ্চে আসছেন না, তখন তিনি পাগল বিজ্ঞানী হওয়ার আশায় DIY ইলেকট্রনিক্স বা কোড নিয়ে ছটফট করছেন।
ইয়ান বাকলি থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন