منذ سنوات مضت "؛ أدوات التطوير والاقتباس؛ يحتوي مجلد الإشارات المرجعية على حوالي عشرين إدخالًا، كل منها موقع ويب مختلف لغرض واحد، ولكل منها تخطيط إعلاني خاص بها، ولافتة ملفات تعريف الارتباط الخاصة به، و- هذا هو الجزء الذي أزعجني أخيرًا - الخادم الخاص به الذي تم تحميل بياناتي إليه بهدوء. لقد قمت بلصق رمز API المرحلي في واحد منهم لفك تشفيره، وفي منتصف الطريق فكرت: ليس لدي أي فكرة عما يفعله هذا الموقع بهذه السلسلة. كان ذلك هو اليوم الذي توقفت فيه عن الثقة في مواقع الأدوات العشوائية وبدأت في البناء تولز.ديف، حيث يتم تشغيل كل أداة في متصفحك ولا يترك أي شيء تقوم بلصقه علامة التبويب.
هذه هي مجموعة الأدوات التي خرجت من ذلك. ليس "؛ أعلى 600 أداة وحصة؛ تحتوي القائمة - Toolz.dev على ما يزيد قليلاً عن خمسين أداة في الوقت الحالي، وأفضل أن أعرض لك الأدوات التي يفتحها مطور الويب العامل كل أسبوع بدلاً من إضافة العدد. يتم تجميعها هنا حسب المهمة التي تقوم بها: تشكيل البيانات، والنص المشاكس، وكتابة CSS، وإعداد الصور، وشحن تحسين محركات البحث، وأعمال الأمان والترميز بينهما. كل شيء مجاني، ولا يحتاج إلى حساب، ويتم معالجته محليًا.
ليرة تركية؛DR: أبقِ مجموعة علامات تبويب متصفح واحدة مفتوحة أثناء البناء. للبيانات: تنسيق JSON، فرق JSON، مدقق يمل، عارض CSV. لتصحيح الرموز المميزة: JWT فك التشفير، محول BASE64، محول الطابع الزمني. بالنسبة للريجكس: اختبار regex. بالنسبة لـ CSS: مولد التدرج، منتقي الألوان، CSS Minifier. للصور: تغيير الحجم، ضغط، محول التنسيق. لتحسين محركات البحث: مولد العلامات، افتح معاينة الرسم البياني. كل جانب العميل، كل ذلك مجاني.
لماذا تهتم بأدوات المتصفح عندما يكون لديك محطة طرفية؟
سؤال عادل - أنا أعيش في محطة أيضًا. الإجابة الصادقة هي أنه بالنسبة للمهام التي يتم النظر إليها لمرة واحدة، فإن الأداة المرئية ذات ردود الفعل الفورية تنبض بتذكر jq تعويذة أو openssl علامة. عندما تعطيني واجهة برمجة التطبيقات نقطة مصغرة في الساعة 2 صباحًا، لا أريد كتابة نص تنسيق؛ أريد لصقه ورؤيته. عندما أحتاج إلى النظر فيما إذا كانت هناك إجابتان لـ JSON تختلفان، فإن الفرق الأحمر/الأخضر يكون أسرع من المرور عبر أي شيء.
لكن العامل الحاسم ليس الراحة، بل هو كذلك أين تذهب البيانات. عدد كبير من "؛ مجاني عبر الإنترنت وحاصل؛ تقوم الأدوات بتحميل كل ما تلصقه إلى الخادم لمعالجته. يعد هذا أمرًا جيدًا بالنسبة لعينة عامة ومشكلة حقيقية لرمز الإنتاج أو سجل العميل أو الأصول التي لم يتم إصدارها. تعمل كل أداة في هذا الدليل بالكامل في متصفحك - تتم المعالجة في JavaScript على جهازك، ولا توجد خطوة تحميل تدعو للقلق. هذا المزيج، المرئي والفوري بالإضافة إلى الخاص افتراضيًا، هو السبب الرئيسي للاحتفاظ بها في مجموعة علامات التبويب بدلاً من تصفيتها.
تشكيل البيانات: JSON، YAML، CSV، XML
هذه هي الفئة التي أستخدمها أكثر من غيرها، لأن معظم تطوير الويب يقوم بنقل البيانات المنظمة بين الأنظمة والتحديق فيها عندما تنكسر.
ال تنسيق JSON هو العمود الفقري - الصق استجابة API مصغرة واحصل على مخرجات مسننة وقابلة للقراءة مع وجود خطأ في بناء الجملة عندما يكون JSON غير صالح. عندما تحتاج إلى معرفة ما تغير بين حمولتين، فرق JSON تتم المقارنة هيكليًا بدلاً من سطر تلو الآخر، لذا فإن المفاتيح المعاد ترتيبها لا تخلق اختلافات وهمية. بالنسبة لجانب التكوين من المهمة، فإن مدقق يمل يلتقط مصائد YAML الهادئة - علامات التبويب في المسافة البادئة، والمفاتيح المكررة، ومفاجآت نوع الإكراه التي تدور version: 1.10 في الرقم 1.1 - قبل أن يقوم ملف Kubernetes أو CI بتفجير عملية النشر.
نادرا ما تبقى البيانات في شكل واحد. ال json إلى CSV و CSV إلى JSON تنتقل المحولات بين مخرجات API وجداول البيانات عارض CSV يعرض ملف CSV الفوضوي كطاولة حقيقية حتى تتمكن من قراءته بالفعل، و XML إلى JSON و JSON إلى YAML تغطي الأدوات قفزات التنسيق التي تضغط عليها باستخدام واجهات برمجة التطبيقات القديمة وملفات التكوين. إذا كنت تريد الإصدار الأعمق من هذه الفئة، فإن دليل كامل لأدوات JSON يمشي عبر سير العمل بأكمله.
تصحيح الرموز والوقت: JWT، Base64، الطوابع الزمنية
المصادقة والوقت هما المكان "؛ يبدو الكود صحيحًا وحاصلًا؛ تأتي الأخطاء للاختباء، ويتم حلها دائمًا تقريبًا النظر في البيانات بدلا من إعادة قراءة المنطق.
ال JWT فك التشفير يقسم الرمز المميز إلى رأس وحمولة وتوقيع ويعرض لك المطالبات - وهذه هي الطريقة التي تكتشف بها ذلك exp لقد أقسمت أنه كان جيدًا في الماضي. يمكنك الوصول إليه بدلاً من وحدة فك التشفير العامة، لأن JWTs تستخدم base64url (RFC 4648 §5)، ليس Base64 القياسي، وسهل محول BASE64 هي الأداة المناسبة لكل شيء آخر - رؤوس المصادقة الأساسية، وعناوين URI للبيانات، والحمولات المشفرة. ال محول الطابع الزمني يحول ثواني وميلي ثانية Unix إلى تواريخ حقيقية (خلط الثواني مقابل المللي ثانية هو خطأ المصادقة الأكثر شيوعًا الذي أراه)، و محول المنطقة الزمنية و فرق التاريخ الأدوات تتعامل مع "؛ ما هو الوقت الذي كان هذا للمستخدم "؛ و "؛ كم من الوقت بين هذين الحدثين والاقتباس؛ أسئلة. لقد كتبت تدفق تصحيح الأخطاء بالكامل في دليل أدوات تصحيح أخطاء API إذا كنت تريد قصص الحرب.
ريجكس بدون التخمين
التعبيرات العادية هي الكتابة مرة واحدة، وتصحيح الأخطاء إلى الأبد. ال اختبار regex يتيح لك إنشاء نمط مقابل نموذج نص مع تمييز المطابقة المباشرة، بحيث ترى ما يتطابق مع اللحظة التي تكتبها فيها بدلاً من نشر أداة التحقق والأمل. إذا كنت تفضل تجميع نمط من وحدات البناء، فإن regex builder يقترب منه من الاتجاه الآخر. وفي كلتا الحالتين، النقطة هي نفسها: اختبر النمط على سلاسل حقيقية قبل أن يحرس النموذج أو يوزع السجل. ال دليل منشئ Regex يغطي الأنماط الشائعة التي تستحق الحفظ.
مشاحنات النص: العد، الغلاف، التمييز، العنصر النائب
تضيف الأعمال الوترية غير الساحرة. ال عداد الكلمات يتحقق من المحتوى مقابل حدود الطول (الأوصاف الوصفية والتغريدات والعناوين). ال محول الحالة يتقلب بين camelCase وsnake_case وkebab-case وPascalCase - وهو أمر لا يقدر بثمن عندما تقوم بنقل أسماء متغيرة عبر قاعدة التعليمات البرمجية. ال فرق النص يقارن كتلتين ويسلط الضوء على كل تغيير، وهو عبارة عن مراجعة التعليمات البرمجية خارج Git وتدقيق التكوين في كتلة واحدة.
للبناء والنماذج الأولية على وجه التحديد: مولد لوريم ايبسوم يملأ النماذج بالحجم الطبيعي باليمين كمية من نص العنصر النائب (يوجد أ الدليل الكامل لتحجيم نص العنصر النائب)، ال مولد البزاق يحول العناوين إلى مسارات URL نظيفة، و عكس السلسلة الأداة تتعامل مع الغريب لمرة واحدة. ال دليل أدوات النص يربط هذه معا.
CSS واللون
يعيش هنا طلاء الواجهة الأمامية. ال مولد التدرج يمنحك محررًا مرئيًا للتدرجات الخطية والشعاعية ويعيد إنتاج CSS - بدون تخمين عند الزوايا والتوقفات ( دليل التدرج يذهب أعمق). ال منتقي الألوان يتحول بين HEX وRGB وHSL وهو المكان الذي أتحقق فيه من التباين قبل أن ينتهي الأمر بفشل اللون في تدقيق إمكانية الوصول؛ ال دليل منتقي الألوان يغطي الرياضيات التباين. عندما يحين وقت الشحن، CSS Minifier و مصغر HTML قم بتجريد المسافات البيضاء والتعليقات لحلق البايتات من السلك.
صور للويب
عادةً ما تكون الصور هي أثقل شيء على الصفحة، لذا فإن هذه الفئة تدفع ثمنها الحيوية الأساسية للويب. ال تغيير حجم الصورة تحدد الأداة أبعادًا دقيقة (وهناك مصيدة شبكية تستحق المعرفة ومغطاة بها مرشد)، ال ضاغط الصور ينكمش حجم الملف مع الحفاظ على الجودة، و محول تنسيق الصورة التنقل بين PNG وJPG وWebP حتى تتمكن من تقديم التنسيق الصحيح للمهمة. ال مزيل الخلفية هو مزيل مفاتيح الألوان - سريع وخاص، رائع على الخلفيات المسطحة، وصادق بشأن حدوده مرشد. ال دليل أدوات الصورة هو العمود لهذه المجموعة.
الشحن: تحسين محركات البحث والمشاركة والأمن
الميل الأخير قبل بدء الصفحة. ال مولد العلامات يبني عنوانك، الوصف، افتح الرسم البيانيوعلامات بطاقة تويتر، و افتح معاينة الرسم البياني يوضح كيف سيبدو الرابط عند مشاركته قبل أن تكتشف الطريقة الصعبة على مواقع التواصل الاجتماعي. ال مولد robots.txt و منشئ UTM التعامل مع قواعد الزحف وتتبع الحملة، و مولد QR إنشاء رمز قابل للمسح الضوئي للطباعة أو الشرائح. على الجانب الأمني والنظافة، مولد كلمة السر و مولد هاش تغطية الأسرار القوية والتحقق من النزاهة، و مولد يوويد يبصق معرفات بيانات الاختبار ومفاتيح قاعدة البيانات.
الأدوات من جانب العميل مقابل الأدوات القائمة على التحميل: المقارنة المهمة
| Toolz.dev (جانب العميل) | نموذجي وحاصل؛ أداة وحاصل مجاني على الإنترنت؛ | |
|---|---|---|
| حيث تحدث المعالجة | في متصفحك | على خادم بعيد |
| بياناتك (الرموز والملفات والتعليمات البرمجية) | لا يترك علامة التبويب أبدًا | تم الرفع إلى طرف ثالث |
| الاشتراك / تسجيل الدخول | لا أحد | غالبا ما تكون مطلوبة للميزات الكاملة |
| حدود الاستخدام | لا شيء على الأدوات | في كثير من الأحيان توج أو نظام حظر الاشتراك غير المدفوع |
| سرعة | فوري، لا توجد رحلة ذهابًا وإيابًا | يعتمد على التحميل + الخادم |
| يعمل مع البيانات الحساسة | نعم، حسب التصميم | محفوف بالمخاطر - أنت تثق في خادمهم |
| عدد الأدوات | ما يزيد قليلا عن خمسين، برعاية | عادة أداة واحدة لكل موقع |
الصف الذي أهتم به أكثر هو الصف الثاني. بالنسبة للعينة العامة، لا يهم مكان حدوث المعالجة؛ بالنسبة لسر الإنتاج، فهذا مهم للغاية. إن بناء مجموعة الأدوات بأكملها من جانب العميل يعني أنني لن أضطر أبدًا إلى السؤال والاقتباس؛ هل هذا هو الموقع الآمن للصق هذا في "؛ - كلهم كذلك.
كيف أستخدم هذا فعليًا: قم بتسلسل الأدوات
معظم المهام الحقيقية عبارة عن مسار صغير، وليس بنقرة واحدة
تصحيح استجابة واجهة برمجة التطبيقات: لصقها في تنسيق JSON، فك تشفير أي رمز مميز باستخدام JWT فك التشفير، اقلب exp المطالبة في موعد مع محول الطابع الزمني، ثم قارن الاستجابة المكسورة مع الاستجابة العاملة مع فرق JSON.
تحضير صورة البطل: مزيل الخلفية إذا كان يحتاج إلى انقطاع، ثم تغيير حجم الصورة للأبعاد الدقيقة، إذن ضاغط الصور للوصول إلى ميزانية وزن الصفحة الخاصة بك، قم بالتحويل إلى WebP باستخدام محول التنسيق في الطريق للخروج.
شحن صفحة جديدة: قم بإنشاء علامات باستخدام مولد العلامات، تحقق من بطاقة المشاركة في افتح معاينة الرسم البيانيوتأكيد أن نسختك تتناسب مع عداد الكلمات.
احتفظ بالخمسة أو الستة التي تلمسها يوميًا في مجموعة علامات تبويب مثبتة. والباقي عبارة عن بحث واحد في لوحة ⌘K عندما تحتاج إليها.
الأسئلة الشائعة
هل أدوات مطور الويب هذه مجانية حقًا؟
نعم. كل أداة على Toolz.dev مجانية الاستخدام بدون طبقة متميزة، ولا بوابة ميزات، ولا حد أقصى للاستخدام على الأدوات نفسها. لا يوجد حساب مطلوب لاستخدامها.
هل يجب علي إنشاء حساب أو تسجيل الدخول؟
لا. افتح أداة واستخدمها على الفور. لا يوجد تسجيل، ولأن الأدوات تعمل في متصفحك، فلا يوجد شيء يمكن مزامنته مع ملف التعريف.
هل من الآمن لصق الرموز المميزة أو المفاتيح أو البيانات الخاصة؟
نعم، وهذا هو قرار التصميم الأساسي. تعالج الأدوات كل شيء من جانب العميل في JavaScript، لذا فإن ما تلصقه - JWT، واستجابة API، وصورة لم يتم إصدارها - يتم التعامل معه على جهازك ولا يتم تحميله على الخادم. هذا هو السبب الرئيسي لاستخدامها على البدائل القائمة على التحميل.
كم عدد الأدوات التي يمتلكها Toolz.dev؟
ما يزيد قليلاً عن خمسين في الوقت الحالي، تشمل فئات البيانات والنصوص والترميز وCSS واللون والصورة وتحسين محركات البحث والأمن والآلة الحاسبة. أفضل تنمية المجموعة عمدًا بدلاً من المطالبة برقم يكون في الغالب حشوًا - كل أداة مدرجة هنا موجودة وتعمل اليوم.
هل تعمل الأدوات على الهاتف المحمول؟
نعم، الواجهات سريعة الاستجابة وتعمل في متصفحات الأجهزة المحمولة. المهام الأثقل - وخاصة معالجة الصور الكبيرة - تكون أسرع وأكثر راحة على سطح المكتب، ولكن الأدوات نفسها تعمل في كلا الاتجاهين.
هل تعمل هذه الأدوات دون اتصال بالإنترنت؟
في الغالب نعم. نظرًا لأن كل أداة تعمل بلغة JavaScript في متصفحك، تستمر الأداة في العمل بدون اتصال بمجرد تحميل صفحتها - وهو أمر مفيد على المستوى أو الشبكة المتقشرة. ما عليك سوى أن تكون متصلاً بالإنترنت لفتح الأداة في المرة الأولى؛ وبعد ذلك لا تحتاج المعالجة نفسها إلى خادم.
ما الفرق بين الأدوات عبر الإنترنت من جانب العميل والخادم؟
تقوم أداة من جانب العميل بعملها في متصفحك، وبالتالي فإن البيانات التي تلصقها لا تترك جهازك أبدًا. تقوم أداة من جانب الخادم بتحميل مدخلاتك إلى جهاز كمبيوتر بعيد لمعالجتها وإرسال النتيجة مرة أخرى. يمكن أن يبدو الإخراج متطابقًا، ولكن الأدوات من جانب العميل فقط هي التي تحتفظ برمز الإنتاج أو الملف الخاص أو سجل العميل من خادم شخص آخر '؛s - ولهذا السبب تم إنشاء كل أداة هنا من جانب العميل.
هل يمكنني استخدام هذه بدلاً من أدوات المحطة الطرفية أو IDE الخاصة بي؟
بالنسبة للمهام المرئية لمرة واحدة - تنسيق النقطة، وفك تشفير الرمز المميز، والنظر إلى الفرق، وبناء التدرج - غالبًا ما تكون أسرع من تذكر ما يعادل سطر الأوامر. بالنسبة للعمل المكتوب والقابل للتكرار، ستظل تريد جهازك الطرفي. من الناحية العملية، يجلسون جنبًا إلى جنب: أطلقوا الطلب على عميلك المعتاد، ثم ألصقوا المخرجات فيه لقراءته.
ما هي الأدوات التي يجب أن أقوم بوضع إشارة مرجعية عليها أولاً؟
ابدأ بالأشياء التي ستلمسها يوميًا: تنسيق JSON، JWT فك التشفير، اختبار regex، محول الطابع الزمني، وأي من أدوات CSS أو أدوات الصور تطابق عملك. أضف الباقي عند الضغط على المهام التي تحتاج إليها.
إلتحاق بالركب
مجموعة أدوات مطور الويب الحديث '؛s ليست تطبيقًا كبيرًا واحدًا - إنها عبارة عن عشرات الأدوات الصغيرة والحادة التي تصل إليها دون تفكير. يقوم المصيدة بتوزيعها عبر عشرات مواقع الويب غير الواضحة التي تقوم بتحميل بياناتك لمعالجتها. الإصلاح هو الاحتفاظ بالأماكن التي تثق بها في مجموعة علامات تبويب واحدة، وكلها تعمل محليًا، وكلها مجانية، وكلها على بعد ضغطة مفتاح واحدة.
هذا ما تولز.ديف هو: ما يزيد قليلاً عن خمسين من هذه الأدوات، تم تصميمها من جانب العميل بحيث تظل الرموز والملفات الخاصة بك ملكك. دبوس تنسيق JSON، ال اختبار regexو ال محول الطابع الزمني اليوم، وأضف الباقي حسب متطلبات العمل. مجاني إلى الأبد، خاص حسب التصميم.
