10 Tools to Try With Your Next Web Project
নিম্নোক্ত কিছু সরঞ্জামগুলির একটি গোষ্ঠীগুলি যে আপনি, একটি বিকাশকারী বা ডিজাইনার হিসাবে, আপনার পরবর্তী প্রজেক্টের চেষ্টা করতে পারেন। এই তালিকা কোন উপায়ে সামগ্রিক, বা একটি "শীর্ষ দশ" হয়, কিন্তু নতুন কিছু খুঁজছেন যারা শুধু পরামর্শ আছে। আমি আপনাকে উল্লিখিত সরঞ্জাম ভোগ আশা করি। চল শুরু করি!
1. পরিদর্শন করুন
পরিদর্শন একটি অ্যাপ্লিকেশন যা আপনার নকশা ফাইল এবং টুলিং মধ্যে পুরোপুরি syncs। এটি আপনাকে সহজে স্কেচ, নিরীক্ষণ এবং ইনভিশনের মধ্যে ডিজাইন ফাইলগুলি বজায় রাখতে সহায়তা করে এবং একক ক্লিকের মাধ্যমে সবগুলি সিঙ্ক করে রাখে।
নকশা এবং বিকাশকারী মধ্যে ফাঁক সেতু পরিদর্শন। আপনি নকশা হিসাবে কাজ কোড জেনারেট করুন, আপ টু ডেট প্রকল্প তথ্য এবং নোট বজায় রাখার সময় জেনুইন স্বচ্ছন্দে সঙ্গে পরিমাপ, রং, এবং নকশা সম্পদ প্রদান এবং একটি বার্তা ব্যবস্থা সঙ্গে সহযোগীতা।
শুরু করতে আপনার প্রয়োজন হবে স্কেচ । আপনি স্কেচ ইনস্টল করার পরে আপনিও ক্র্যাফট প্রয়োজন হবে । ক্র্যাফ্টটি প্লাগইনগুলির একটি স্যুট যা আপনাকে মনে করে প্রকৃত তথ্য দিয়ে ডিজাইন করে এবং ইনভেসন এবং স্কেচ এর মধ্যে সমন্বয় করার জন্য অনুমতি দেয়। InVision থেকে একটি নতুন প্রকল্প তৈরি করুন এবং তারপর স্কেচ এ ফিরে যান । আমি ইনভেসন স্টুডিওতে নজর দেবার পরামর্শ চাই ।
2. আর্কাইটিপ
Archetype হল ডিজিটাল টাইপোগ্রাফি নকশা তৈরি করা সহজ। এটি Google ফন্টগুলি ব্রাউজারে সর্বোত্তম অনুশীলন ব্যবহার করে যেমন একটি মডুলার স্কেল তৈরি এবং বেসলাইন গ্রিডগুলি যা সুসংগত এবং পুনর্ব্যবহারযোগ্য সেগুলির সাথে কাজ করে।
সহজেই হ্যান্ডওফের জন্য বিকাশকারী-বন্ধুত্বপূর্ণ কোড তৈরি করে আর্কাইপটি দিয়ে সেট করা সমস্ত স্টাইলিং
পরিবর্তন এবং আপডেটগুলি ব্যবহারকারীদের CSS বা Sketch এ রপ্তানি করার অনুমতি দিয়ে তাত্ক্ষণিক এবং সহজেই ভাগযোগ্য। আপনার নকশা জন্য ব্যবহৃত আপনার নির্বাচিত ফন্ট সেট ডাউনলোড করার ক্ষমতা আছে। আপনার Google অ্যাকাউন্ট ব্যবহার করে প্রকল্পগুলি সংরক্ষণ করুন এবং যেকোনো সময় আপনার কাজে ফিরে আসুন।
3. প্রবট
যদি আপনি সংস্করণ নিয়ন্ত্রণ ব্যবহার করেন, খোলা উৎস প্রকল্পের কাজ করেন, অথবা দলের সদস্যদের মধ্যে কোড পর্যালোচনা পরিচালনা করেন, Probot ছদ্মবেশে আপনার দেবদূত হতে পারে। GobThub- এর সাথে আপনার কার্যপ্রবাহটি স্বয়ংক্রিয় এবং উন্নত করার জন্য প্রবোটটি একটি সম্প্রদায়-চালিত সেট।
আপনি সমস্ত ওপেন সোর্স অ্যাপ্লিকেশন অন্বেষণ করতে পারেন বা নিজের তৈরি করতে পারেন । বর্তমানে উপলব্ধ কিছু অ্যাপ্লিকেশান হয় অ-সতেজ স্বয়ংক্রিয়ভাবে মামুলি বিষয় বন্ধ করুন এবং অনুরোধ একটি প্রকল্প সময় জমা, বা টান, অনুস্মারক আপনার প্রকল্পের বিষয় ও দলের সদস্যদের জন্য অনুস্মারক বিজ্ঞপ্তিগুলি তৈরি করুন।
আপনি কি নির্মাণ করতে চান উপর ফোকাস। একটি সহজবোধ্য API (সর্বশেষ ES6 জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলিতে নির্মিত) আপনি যে GitHub এবং Node.js ব্যবহার করেন না তার বিস্তারিত বিবরণ লুকায় ।
4. স্কেচ থেকে PSD
আপনি কি কখনও একটি PSD পেয়েছি এবং আপনি একটি স্কেচ ফাইল রূপান্তর করতে পারে কামনা? ভাল আপনি ভাগ্য হয় Avocode ( পাশাপাশি চেষ্টা করার জন্য আরেকটি অন্তর্বর্তী টুল ) সম্প্রদায়কে এই ধরনের কাজ করার জন্য একটি বিনামূল্যের সরঞ্জাম দেওয়ার জন্য যথেষ্ট পরিমাণে। URL টি ব্রাউজ করুন এবং আপনার PSD আপলোড করুন এখানে একটি রোডম্যাপ এবং বৈশিষ্ট্য তালিকা রূপান্তর প্রক্রিয়া সমর্থন করে।
এছাড়াও মনে রাখবেন যে ফটোশপ এবং স্কেচ উল্লেখযোগ্যভাবে বিভিন্ন সরঞ্জাম। এটি শুধুমাত্র নকশা উপাদানগুলি রূপান্তরিত করতে পারে যা এই ডিজাইনের অ্যাপ্লিকেশনগুলির মধ্যে তৈরি করা যেতে পারে; স্কেচ এবং ফটোশপ এটি স্কেচ এপিতে অন্তর্ভুক্ত না হওয়া ফটোশপ বৈশিষ্ট্যগুলির রূপান্তর বা অনুকরণ করতে পারে না ।
5. ক্লাসিক্যাল ওয়েবসাইট স্পিড টেস্ট
ইমেজগুলি অপটিমাইজ করা ওয়েব পৃষ্ঠার লোডের সময় উল্লেখযোগ্যভাবে উন্নতি করতে পারে, যার ফলে উন্নত ব্যবহারকারীর ধারণ এবং সন্তুষ্টি রয়েছে। ওয়েবসাইট স্পিড টেস্ট একটি চিত্র বিশ্লেষণ সরঞ্জাম যা একটি লাইভ URL দিয়ে কোন সাইট স্ক্যান করতে পারে। চিত্র আকার, বিন্যাস, গুণমান এবং এনকোডিং প্যারামিটারগুলির পরিবর্তনগুলি কীভাবে পৃষ্ঠা লোড গতি উন্নত করতে পারে তা বিস্তারিত স্বচ্ছতার অন্তর্দৃষ্টি প্রদান করে।
ফলাফলগুলি ভাগ করা যায় এবং একবার বিশ্লেষণটি সম্পূর্ণ হয়ে গেলে, আপনার ফলাফলগুলিতে উল্লিখিত প্রতিটি চিত্রটি অপ্টিমাইজড ফরম্যাটে বা ওয়েবপিতে বা jpeg-xr- এর মতো অন্যান্য বিন্যাস বিকল্পগুলিতে ডাউনলোড করা যাবে।
এই পৃষ্ঠার উপর তাদের এই পরিষেবাটি হেড সম্পর্কে আরো জানতে । রয়েছে Cloudinary যা CDN সেবা আপনি পাশাপাশি চেক আউট করতে চান হতে পারে।
6. animiste
অ্যানিমিয়া একটি জায়গা যেখানে আপনি প্রাক তৈরি সিএসএস অ্যানিমেশন সংগ্রহ করতে পারেন, তাদের টিপুনএবং কেবলমাত্র আপনি যেগুলি আসলেই ব্যবহার করবেন তা পাবেন। উত্পন্ন কোড অনুলিপি করুন বা ব্যবহার করতে একটি সিএসএস ফাইল ডাউনলোড।
আপনার কাজের সময় আপনি যদি কিছু দেখতে পান তাহলে, হৃদয় আইকনে ক্লিক করুন, অথবা ফ্যানেল আইকনে ক্লিক করে যেকোনো সময় আপনার অন্যান্য পছন্দগুলি ব্রাউজ করুন। আপনার সাধারণ 2D রূপান্তর সহ 3D বিকল্প সহ আপনার গতির অনুক্রমটি সুরক্ষিত করার জন্য অ্যানিমিয়া আপনাকে সমস্ত ধরণের পূর্বনির্ধারিত এবং কাস্টম বিকল্পগুলি প্রদান করে। ব্রাউজার সমর্থন জন্য আপনি সবচেয়ে ব্যবহারযোগ্য কোড সম্ভব নিশ্চিত করার জন্য কোড autoprefixer মাধ্যমে minified এবং পাইপ করা যাবে।
7. হিরো প্যাটার্নস
হিরো প্যাটার্নসটি আপনার ওয়েব প্রকল্পগুলিতে ব্যবহার করার জন্য পুনরাবৃত্তিযোগ্য SVG পটভূমির নিদর্শনগুলির একটি সংগ্রহ। আপনি নির্বাচন করুন প্রতিটি ব্যাকগ্রাউন্ড প্যাটার্ন একটি পুনরাবৃত্তিমূলক পটভূমি মধ্যে রূপান্তরিত হয় এবং পছন্দসই আপনার CSS ফাইলে ব্যবহার base64 এ এনকোডেড। আপনি যখন আপনার নকশা সিদ্ধান্তগুলি তৈরি করেন তখন পৃথক বৈশিষ্ট্যগুলি যেমন অগ্রভাগের রঙ, পটভূমির রঙ এবং অগ্রভাগ অস্বচ্ছতা ঠিক করুন।
বর্তমানে অ্যাপ্লিকেশন আপনাকে 87 বিভিন্ন নিদর্শন মধ্যে চয়ন করতে পারবেন এবং বিভিন্ন প্রদত্ত নিদর্শন ছোট পরিমাণে বিবেচনা বেশ বিভিন্ন।
1
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg> |
আপনি উপরের কোড স্নিপেট থেকে দেখতে পারেন যেমনটি অসম্পূর্ণ SVG ডাউনলোড করতে পারেন। এই বেস64 বিকল্প ব্যবহার করতে চান না বা প্যাটার্ন আরো কাস্টমাইজ করতে চান তাদের জন্য নিখুঁত।
8. কুশন
স্ব-নিয়োগকারী ব্যক্তিরা তাদের নিজস্ব ব্যবসা চালানোর জন্য কুশন মনকে শান্তি দেয়। এটি আরও ভাল অন্তর্দৃষ্টি এবং "ফ্রিল্যান্সিং যে দৈনন্দিন rollercoaster যাত্রায় একটি শান্ত আনা" সাহায্য করতে সাহায্য করে।
এটি একটি 14 দিনের ট্রায়াল (কোনও ক্রেডিট কার্ডের প্রয়োজন নেই) অফার করে, এবং যদি আপনি আপনার ট্রায়ালের সময় গুটিয়ে থাকেন, তাহলে প্রতি মাসে $ 5 এর পরিকল্পনা শুরু হয়; এছাড়াও "moonlighter" পরিকল্পনা হিসাবে পরিচিত। এই অ্যাপ্লিকেশনটি যখন আপনার প্রয়োজনে আপনার ঘাঁটিগুলি আবরণ করতে সহায়তা করে:
- প্রকল্প সময়সূচী
- খরচ ট্র্যাকিং
- স্প্রেডশীট এক্সপোর্ট
- চালান
- ইনভয়েস ট্র্যাকিং
- মাসিক আয় দেখুন
- এবং আরও ...
কুশন ভবিষ্যতের জন্য একটি মোবাইল অ্যাপ্লিকেশন বিবেচনা করছে, তবে এই মুহূর্তে একটি প্রস্তাব দিচ্ছে না যেহেতু ফোকাসটি সম্পূর্ণরূপে বৈশিষ্ট্যযুক্ত ওয়েব অ্যাপ তৈরির কাজ। আপনি যদি বিশেষভাবে ব্যাঙ্ক একাউন্ট ইন্টিগ্রেশন খুঁজছেন (এবং এটি আপনার জন্য একটি চুক্তি বিরতি) দুর্ভাগ্যজনক খবর যে অ্যাপ্লিকেশন একটি ব্যাংক ফিড আছে না, কিন্তু আপনি একটি
.csvফাইল হিসাবে আপনার ব্যাংক বিবৃতি আমদানি করতে পারেন এটা নিজের জন্য রান দাও, আপনার কাছে হারানোর কিছুই নেই9. লাঞ্চি
এই টুল সম্পর্কে উল্লেখযোগ্য বৈশিষ্ট্যগুলির কয়েকটি হল:
- লঞ্চে, কীবোর্ড ফোকাস মোডাল উইন্ডো কন্টেইনারে চলে যায়
- মোডাল উইন্ডো ঐচ্ছিক মডাল শিরোনাম মাধ্যমে বর্ণনা করা হয়
- সক্রিয় / দৃশ্যমান যখন modal মধ্যে কীবোর্ড ফোকাস ফাটল
escকী প্রেস উপর উইন্ডো বন্ধ- ওভারলে মাউসের উপর উইন্ডো বন্ধ করুন
click - উইন্ডো বন্ধের লঞ্চার উপাদানটিতে কীবোর্ড ফোকাস পুনরায় সেট করুন
- আপনার নিজস্ব কাস্টম বন্ধ নিয়ন্ত্রণ যোগ করুন!
- আপনার নিজস্ব কাস্টম নিয়ন্ত্রণ জুড়ুন যা পৃষ্ঠায় কোথাও ফোকাস প্রেরণ!
- উইন্ডোজ হাই কনট্রাস্ট থিমগুলির জন্য স্বচ্ছ সীমানা
Launchy কাস্টম স্টাইলিং এর জন্য তার তৈরি উপাদানের উপর অনেক সিএসএস ক্লাস রয়েছে। ক্লাস নাম্বারের জন্য style.scss ফাইলটি পরীক্ষা করুন এবং একটি উদাহরণ দিন যে আপনি আপনার মোডাল উইন্ডোগুলি স্টাইল করতে চান। প্রকল্পের একটি npm প্যাকেজ হিসাবে পাওয়া যায়:
npm i launchy-modal-window। সত্যিই একটি প্রবেশযোগ্য মোডাল উইন্ডো ডান কাজ10. Formcore
Formcore একটি মুক্ত উত্স প্রকল্প (বর্ণনা করা হয় "হালকা ওজন এবং যাচাইকৃত ফর্ম" হিসাবে বর্ণনা করা হয়) ফিলামেন্ট গ্রুপ দ্বারা এবং একটি ফর্ম নিদর্শন যেমন সেট প্রদর্শন / লুকান পাসওয়ার্ড, অক্ষর পাল্টা, ক্রেডিট কার্ড ইনপুট এবং বৈধতা, মাল্টি লাইন টেক্সট ব্যবহারকারীর প্রকার হিসাবে প্রসারিত যে উপকরণ, প্লাস অনেক বেশি
<input type="number"> ফর্ম ক্ষেত্রের আচরণ স্বাভাবিক করার মত বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করা হয়, maxlength বৈশিষ্ট্যটি প্রয়োগ করার জন্য কাজ করে <input type="number"> এবং Safari 6 এবং ফায়ারফক্স ডেস্কটপে কয়েকটি উল্লেখ করার জন্য প্রায় সব কাজ করে ।
যদি আপনি ওয়েব উপর ফর্মগুলি তৈরি করছেন (এবং আমি আপনাকে দাপটে দিব) তাহলে এটি আপনার পরবর্তী প্রজেক্টের সাথে ফর্ম ইনপুটগুলির সাথে চেষ্টা করার জন্য ভাল হতে পারে।
উপসংহার
এখন যে আমরা আমাদের তালিকার শেষে পৌঁছেছি আপনার চিন্তা কি? কেউ কি আপনার মনোযোগকে আপনার ইচ্ছার বিরুদ্ধে প্ররোচিত করার চেষ্টা করেছে? আপনি unimpressed ছিল এবং সুপারিশ অন্যদের আছে? নীচের মতামত আমাদের জানতে দিন। শুভ ওয়েব বিল্ডিং সবাই!
Comments
Post a Comment