> ⚠️ **নিরাপত্তা বিবেচনা**: প্রোডাকশন অ্যাপ্লিকেশনগুলিতে, LocalStorage-এ API কী সংরক্ষণ করা নিরাপত্তার ঝুঁকি তৈরি করে কারণ জাভাস্ক্রিপ্ট এই ডেটা অ্যাক্সেস করতে পারে। শেখার উদ্দেশ্যে, এই পদ্ধতি ঠিক আছে, তবে প্রকৃত অ্যাপ্লিকেশনগুলিতে সংবেদনশীল ক্রেডেনশিয়ালের জন্য নিরাপদ সার্ভার-সাইড স্টোরেজ ব্যবহার করা উচিত।
চলুন এটি চেষ্টা করি। একটি ওয়েবসাইট খুলুন (Microsoft.com ভালো কাজ করবে) এবং 'রেকর্ড' বোতামটি ক্লিক করুন। এখন পৃষ্ঠাটি রিফ্রেশ করুন এবং প্রোফাইলারটি যা ঘটছে তা ক্যাপচার করতে দিন। যখন আপনি রেকর্ডিং বন্ধ করবেন, তখন আপনি একটি বিস্তারিত বিশ্লেষণ দেখতে পাবেন যে ব্রাউজার কীভাবে সাইটটি 'স্ক্রিপ্ট', 'রেন্ডার' এবং 'পেইন্ট' করে। এটি আমাকে মনে করিয়ে দেয় কীভাবে মিশন কন্ট্রোল একটি রকেট উৎক্ষেপণের সময় প্রতিটি সিস্টেম পর্যবেক্ষণ করে - আপনি ঠিক কী ঘটছে এবং কখন ঘটছে তার রিয়েল-টাইম ডেটা পান।
✅ [Microsoft ডকুমেন্টেশন](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) আরও বিস্তারিত তথ্য প্রদান করে যদি আপনি গভীরভাবে জানতে চান
tmrow-এর CO2 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যাতে আপনার ব্রাউজারে একটি রিমাইন্ডার থাকে যে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের চাপ কেমন। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপের উপর ভিত্তি করে সিদ্ধান্ত নিতে পারবেন।
Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণের 'তিনটি ডট' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Load Unpacked' নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal-এর API-এর জন্য একটি API key ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ইমেইলটি বক্সে প্রবেশ করান) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) যা [Electricity Map](https://www.electricitymap.org/map)-এর সাথে মিলে (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি) লাগবে।
একবার API key এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে ইনপুট দিলে, ব্রাউজার এক্সটেনশন বারে রঙিন ডটটি আপনার অঞ্চলের শক্তি ব্যবহারের অবস্থা প্রতিফলিত করবে এবং আপনাকে নির্দেশনা দেবে কোন শক্তি-নির্ভর কার্যকলাপ আপনার জন্য উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে দেওয়া হয়েছিল, যা ক্যালিফোর্নিয়ার নির্গমন পর্যবেক্ষণ করে।
tmrow-এর C02 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখার জন্য একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যাতে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের তথ্য সরাসরি আপনার ব্রাউজারে একটি স্মারক হিসেবে পাওয়া যায়। এই অ্যাড-হক এক্সটেনশনটি ব্যবহার করলে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ সম্পর্কে সিদ্ধান্ত নিতে পারবেন।
Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণে থাকা 'তিনটি বিন্দু' মেনু ব্যবহার করে Extensiones প্যানেলটি খুঁজুন। সেখান থেকে 'Cargar desempaquetado' নির্বাচন করুন নতুন এক্সটেনশন লোড করার জন্য। যখন ফোল্ডারটি চাওয়া হবে, তখন 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal API-এর জন্য একটি API কী প্রয়োজন হবে ([এখানে ইমেইলের মাধ্যমে পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল লিখুন) এবং [electricity map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত আপনার অঞ্চলের [কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)।
একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করানো হলে, ব্রাউজারের এক্সটেনশন বারে থাকা রঙের বিন্দুটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন দেখাবে এবং আপনাকে উচ্চ শক্তি ব্যবহারের কার্যকলাপ সম্পর্কে নির্দেশনা দেবে যা আপনার জন্য উপযুক্ত হতে পারে। এই "পয়েন্ট" সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে এসেছে, যা ক্যালিফোর্নিয়ার নির্গমন নিয়ে কাজ করে।
tmrow-এর C02 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যাতে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের তথ্য সরাসরি ব্রাউজারে একটি অনুস্মারক হিসেবে পেতে পারেন। এই অ্যাড-হক এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ সম্পর্কে একটি সঠিক সিদ্ধান্ত নিতে পারবেন।
Edge-এ ইনস্টল করার জন্য, ব্রাউজারের উপরের ডান কোণে থাকা 'তিনটি বিন্দু' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Unpacked extension লোড করুন' নির্বাচন করুন এবং একটি নতুন এক্সটেনশন লোড করুন। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal API-এর জন্য একটি API কী ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল প্রবেশ করান) এবং আপনার অঞ্চলের জন্য [কোড](http://api.electricitymap.org/v3/zones) যা [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে মেলে (উদাহরণস্বরূপ, বোস্টনের জন্য আমি 'US-NEISO' ব্যবহার করি)।
একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করালে, ব্রাউজারের এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের প্রতিফলন করবে এবং আপনাকে এমন কার্যকলাপের জন্য একটি নির্দেশনা দেবে যা শক্তি সাশ্রয়ী হতে পারে। এই 'বিন্দু' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে, যা ক্যালিফোর্নিয়ার নির্গমন পর্যবেক্ষণ করে।
বিদ্যুৎ ব্যবহারের উপর নজর রাখার জন্য tmrow-এর C02 সিগন্যাল API ব্যবহার করে একটি ব্রাউজার এক্সটেনশন তৈরি করা হয়েছে, যা আপনার ব্রাউজারে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভারীতা সম্পর্কে আপনাকে মনে করিয়ে দেবে। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ সম্পর্কে সিদ্ধান্ত নিতে পারবেন।
এজ ব্রাউজারে ইনস্টল করার জন্য, ব্রাউজারের উপরের ডান কোণে থাকা 'তিন ডট' মেনু ব্যবহার করে এক্সটেনশন প্যানেল খুঁজুন। সেখান থেকে, একটি নতুন এক্সটেনশন লোড করতে 'লোড আনপ্যাকড' নির্বাচন করুন। প্রম্পটে 'dist' ফোল্ডার খুলুন এবং এক্সটেনশন লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 সিগন্যাল API ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2snal.com/) একটি API কী প্রয়োজন হবে - এই পৃষ্ঠার বক্সে আপনার ইমেইল লিখুন) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map) থেকে (যেমন, বোস্টনে, আমি 'US-NEISO' ব্যবহার করি)।
একবার API কী এবং অঞ্চল এক্সটেনশন ইন্টারফেসে ইনপুট হয়ে গেলে, ব্রাউজার এক্সটেনশন বারে রঙিন ডটটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন হিসেবে পরিবর্তিত হবে এবং আপনাকে একটি নির্দেশক দেবে যে শক্তি-নিবিড় কার্যকলাপ আপনার জন্য কতটা উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে ক্যালিফোর্নিয়ার নির্গমনের জন্য [এনার্জি ললিপপ এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে।
tmrow এর Signal C02 API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখা হবে, যাতে একটি ব্রাউজার এক্সটেনশন তৈরি করা যায়। এই এক্সটেনশনটি আপনার ব্রাউজারে সরাসরি মনে করিয়ে দেবে যে আপনার অঞ্চলে বিদ্যুৎ ব্যবহারের প্রভাব কতটা। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যক্রম মূল্যায়ন করতে পারবেন।
Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণে থাকা "তিনটি বিন্দু" মেনু ব্যবহার করে এক্সটেনশন প্যানেলটি খুঁজুন। যদি এটি সক্রিয় না থাকে, তাহলে ডেভেলপার মোড (নিচের বাম দিকে) সক্রিয় করুন। "Carica decompressa" নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে "dist" ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal API-এর জন্য একটি API কী প্রয়োজন হবে (আপনি এটি [ই-মেইলের মাধ্যমে এখানে পেতে পারেন](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ই-মেইল বক্সে প্রবেশ করুন) এবং [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (যেমন, বোস্টনে "US-NEISO")।
একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করানো হলে, ব্রাউজারের এক্সটেনশন বারে থাকা রঙিন বিন্দুটি আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের প্রতিফলন দেখাবে এবং কোন উচ্চ-শক্তি ব্যবহারকারী কার্যক্রমগুলি সম্পাদন করা উপযুক্ত হবে তার একটি নির্দেশনা দেবে। এই "পয়েন্ট" সিস্টেমের ধারণাটি ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে নেওয়া হয়েছে।
tmrow এর CO2 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহারের পরিমাণ ট্র্যাক করার জন্য একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যা আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের পরিমাণ ব্রাউজারে একটি রিমাইন্ডার হিসেবে দেখাবে। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ নির্ধারণ করতে পারবেন।
Edge-এ ইনস্টল করতে, ব্রাউজারের ডানদিকে উপরের কোণে থাকা "তিনটি ডট" মেনু থেকে "Extensions" প্যানেলটি খুঁজে নিন। সেখান থেকে "Load Unpacked" নির্বাচন করুন এবং নতুন এক্সটেনশনটি লোড করুন। প্রম্পটে "dist" ফোল্ডারটি খুলুন, এবং এক্সটেনশনটি লোড হয়ে যাবে। এটি ব্যবহার করতে, CO2 সিগন্যাল API-এর API কী ([ইমেইলের মাধ্যমে এখানে একটি পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল লিখুন) এবং [Electricity Map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (উদাহরণস্বরূপ, বোস্টনের জন্য 'US-NEISO' ব্যবহার করা হয়)।
API কী এবং অঞ্চলটি এক্সটেনশনের ইন্টারফেসে প্রবেশ করানোর পর, ব্রাউজারের এক্সটেনশন বারে প্রদর্শিত রঙিন ডটটি পরিবর্তিত হবে এবং আপনার অঞ্চলের শক্তি ব্যবহারের পরিমাণ প্রতিফলিত করবে। এটি আপনাকে নির্দেশ করবে কোন ধরনের শক্তি-নির্ভর কার্যকলাপ করা উপযুক্ত। এই "ডট" সিস্টেমের ধারণাটি আমাকে ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop extension](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে।
tmrow এর CO2 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজরদারি করুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন যা আপনাকে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভারীতা সম্পর্কে সতর্ক করবে। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপ সম্পর্কে আরও সচেতন সিদ্ধান্ত নিতে পারবেন।
Edge-এ ইনস্টল করার জন্য, ব্রাউজারের ডানদিকের উপরের কোণে থাকা 'তিনটি ডট' মেনু ব্যবহার করে এক্সটেনশন প্যানেলটি খুঁজুন। সেখান থেকে, 'Load Unpacked' নির্বাচন করুন নতুন এক্সটেনশন লোড করার জন্য। অনুরোধ অনুযায়ী 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করার জন্য, আপনাকে CO2 সিগন্যাল API-এর জন্য একটি API কী ([এখানে ইমেইলের মাধ্যমে একটি পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল দিন) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন, যা [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে মিলে যায় (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)।
API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করানোর পর, ব্রাউজার এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন করবে এবং আপনাকে ভারী কার্যকলাপের জন্য উপযুক্ত নির্দেশনা দেবে। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [এনার্জি ললিপপ ব্রাউজার এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে, যা ক্যালিফোর্নিয়ার নির্গমনের জন্য তৈরি।
tmrow-এর CO2 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যা আপনার ব্রাউজারে একটি অনুস্মারক হিসেবে কাজ করবে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভার কতটা তা জানার জন্য। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপ সম্পর্কে তথ্যের ভিত্তিতে সিদ্ধান্ত নিতে পারবেন।
Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণের 'তিন ডট' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Load Unpacked' নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal-এর API-এর জন্য একটি API কী ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ইমেইলটি বক্সে লিখুন) এবং [Electricity Map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত আপনার অঞ্চলের [কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)।
একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে ইনপুট দিলে, ব্রাউজার এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন দেখাবে এবং আপনাকে নির্দেশনা দেবে কোন শক্তি-নির্ভর কার্যকলাপ আপনার জন্য উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে দেওয়া হয়েছিল, যা ক্যালিফোর্নিয়ার নির্গমনের জন্য তৈরি।
> ছবি [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) থেকে
ক্যানভাস উপাদানে আঁকার জন্য, আপনি একই তিন-ধাপের প্রক্রিয়া অনুসরণ করবেন, যা সমস্ত ক্যানভাস গ্রাফিক্সের ভিত্তি গঠন করে। এটি কয়েকবার করলে, এটি স্বাভাবিক হয়ে যাবে:
- **স্কোরিং সিস্টেম**: প্রতিটি ধ্বংস করা শত্রু জাহাজ ১০০ পয়েন্ট প্রদান করে (গণনা করা সহজ করার জন্য রাউন্ড সংখ্যা ব্যবহার করা হয়)। স্কোরটি নিচের বাম কোণে প্রদর্শিত হবে।
- **জীবন কাউন্টার**: আপনার হিরো তিনটি জীবন দিয়ে শুরু করে - প্রাথমিক আর্কেড গেমগুলির দ্বারা চ্যালেঞ্জ এবং খেলার যোগ্যতার মধ্যে ভারসাম্য বজায় রাখতে এটি একটি মানদণ্ড। শত্রুর সাথে প্রতিটি সংঘর্ষে একটি জীবন হারায়। আমরা বাকি জীবনগুলোকে নিচের ডান কোণে জাহাজের আইকন ব্যবহার করে প্রদর্শন করব ।
- **জীবন কাউন্টার**: আপনার হিরো তিনটি জীবন দিয়ে শুরু করে - প্রাথমিক আর্কেড গেমগুলির দ্বারা চ্যালেঞ্জ এবং খেলার যোগ্যতার মধ্যে ভারসাম্য বজায় রাখতে এটি একটি মানদণ্ড। শত্রুর সাথে প্রতিটি সংঘর্ষে একটি জীবন হারায়। আমরা বাকি জীবনগুলোকে নিচের ডান কোণে জাহাজের আইকন ব্যবহার করে প্রদর্শন করব ।
`history.pushState` ব্যবহার করে ব্রাউজারের নেভিগেশন ইতিহাসে নতুন এন্ট্রি তৈরি করা হয়। আপনি যদি ব্রাউজারের *ব্যাক বাটন* ধরে রাখেন, এটি কিছুটা এরকম দেখাবে:
আপনি যদি কয়েকবার ব্যাক বাটনে ক্লিক করেন, আপনি দেখবেন যে বর্তমান URL পরিবর্তন হচ্ছে এবং ইতিহাস আপডেট হচ্ছে, কিন্তু একই টেমপ্লেট প্রদর্শিত হচ্ছে।
আমরা আমাদের **কেন্দ্রীয় স্টেট ম্যানেজমেন্ট** সিস্টেম তৈরি করতে যাচ্ছি। এটি এমন একজন অত্যন্ত সংগঠিত ব্যক্তির মতো যিনি সমস্ত গুরুত্বপূর্ণ বিষয়ের দায়িত্বে আছেন:
এই অ্যাসাইনমেন্ট সম্পন্ন করার পরে, আপনার ব্যাংকিং অ্যাপে একটি সম্পূর্ণ কার্যকরী "ট্রানজ্যাকশন যোগ করুন" ফিচার থাকবে যা পেশাদারভাবে দেখাবে এবং কাজ করবে:
এই প্রকল্পে, আপনি একটি কাল্পনিক ব্যাংক তৈরি করার পদ্ধতি শিখবেন। এই পাঠগুলোতে একটি ওয়েব অ্যাপের লেআউট এবং রুট তৈরি, ফর্ম তৈরি, স্টেট পরিচালনা এবং API থেকে ব্যাংকের ডেটা সংগ্রহ করার পদ্ধতি শেখানো হয়েছে।
- **Explorer সাইডবার**: **প্রদর্শন করে** আপনার রিপোজিটরি ফাইল এবং ফোল্ডার গঠন
@ -448,7 +448,7 @@ li:before {
**ইনস্টলেশনের পরপরই ফলাফল:**
CodeSwing ইনস্টল করার পরে, আপনি আপনার রিজিউম ওয়েবসাইটের একটি লাইভ প্রিভিউ এডিটরে দেখতে পাবেন। এটি আপনাকে আপনার সাইটটি কেমন দেখাচ্ছে তা পরিবর্তন করার সাথে সাথে দেখতে দেয়।
প্রতিটি পাঠে একটি কাজ, জ্ঞানের পরীক্ষা এবং একটি চ্যালেঞ্জ থাকে, যা আপনাকে নিম্নলিখিত বিষয় শিখতে সাহায্য করবে:
- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং
@ -93,7 +93,7 @@ Azure AI Foundry Discord কমিউনিটিতে যোগ দিন
আপনি যে কপি তৈরি করেছেন সেখানে **Code** বোতামে ক্লিক করে **Open with Codespaces** নির্বাচন করুন। এটি আপনার জন্য একটি নতুন Codespace তৈরি করবে যেখানে আপনি কাজ করবেন।
@ -17,7 +17,7 @@ Olha, eu entendo totalmente se programar parece intimidante agora. Quando comece
Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não apenas possível, mas seriamente viciante. Estou falando dos mesmos editores, navegadores e fluxos de trabalho que os desenvolvedores da Netflix, Spotify e do seu estúdio indie favorito usam todos os dias. E aqui está a parte que vai te fazer dançar de felicidade: a maioria dessas ferramentas profissionais e padrão da indústria são completamente gratuitas!
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
@ -17,7 +17,7 @@ Eu sei que isso pode parecer muito no começo – eu mesmo lembro de olhar para
Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressão – apenas você, eu e algumas ferramentas muito legais que estão prestes a se tornar suas melhores amigas!
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do se
✅ Uma boa maneira de encontrar repositórios 'amigáveis para iniciantes' é [buscar pela tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Existem várias maneiras de copiar código. Uma delas é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou o GitHub CLI (Interface de Linha de Comando).
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.br.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/br/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Imagens decorativas** - puramente visuais, sem valor informativo:
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ou Linguagem de Marcação de Hipertexto, é a base de todos os sites que você já visitou. Pense no HTML como o esqueleto que dá estrutura às páginas da web – ele define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde "vestirá" seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo isso possível.
@ -88,7 +88,7 @@ Você criará uma pasta dedicada para seu projeto de terrário e adicionará seu
4. No painel Explorer, clique no ícone "Novo Arquivo"
5. Nomeie seu arquivo como `index.html`
**Opção 2: Usando Comandos no Terminal**
```bash
@ -239,48 +239,48 @@ Agora adicione as imagens das plantas organizadas em duas colunas entre suas tag
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Lembra como seu terrário em HTML parecia bem básico? Com o CSS, transformamos essa estrutura simples em algo visualmente atraente.
@ -205,7 +205,7 @@ body {
Abra as ferramentas de desenvolvedor do seu navegador (F12), navegue até a aba Elementos e inspecione seu elemento `<h1>`. Você verá que ele herda a família de fontes do body:
✅ **Hora de Experimentar**: Tente definir outras propriedades herdáveis no `<body>` como `color`, `line-height` ou `text-align`. O que acontece com seu título e outros elementos?
@ -335,7 +335,7 @@ No nosso terrário, cada planta precisa de um estilo semelhante, mas também de
**Aqui está a estrutura HTML para cada planta:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.br.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/br/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Pronto para aprimorar seu terrário com reflexos realistas no vidro? Essa técni
Você criará destaques sutis que simulam como a luz reflete nas superfícies de vidro. Essa abordagem é semelhante à usada por pintores renascentistas como Jan van Eyck, que utilizavam luz e reflexos para fazer o vidro pintado parecer tridimensional. Aqui está o que você deve alcançar:
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Bem-vindo a um dos aspectos mais envolventes do desenvolvimento web - tornar as coisas interativas! O Modelo de Objeto de Documento (DOM) é como uma ponte entre seu HTML e JavaScript, e hoje vamos usá-lo para dar vida ao seu terrário. Quando Tim Berners-Lee criou o primeiro navegador web, ele imaginou uma web onde os documentos poderiam ser dinâmicos e interativos - o DOM torna essa visão possível.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Entendendo Closures**: Closures são um tópico significativo em JavaScript, e muitos desenvolvedores os utilizam por anos antes de compreender totalmente todos os aspectos teóricos. Hoje, estamos focando na aplicação prática - você verá closures surgirem naturalmente enquanto construímos nossos recursos interativos. A compreensão se desenvolverá à medida que você perceber como eles resolvem problemas reais.
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Agora teste seu terrário interativo! Abra seu arquivo `index.html` em um navega
- **Suporte entre dispositivos**: Funciona em desktop e dispositivos móveis
- **Consciente do desempenho**: Sem vazamentos de memória ou cálculos redundantes
Uma pequena meditação de código com arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode criar uma interface web, estilizar e adicionar interatividade.
> Alguns navegadores antigos, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Como os Navegadores Processam Conteúdo Web
@ -198,7 +198,7 @@ quadrantChart
Entender o processo de instalação de extensões ajuda você a antecipar a experiência do usuário ao instalar sua extensão. O processo de instalação é padronizado nos navegadores modernos, com pequenas variações no design da interface.
> **Importante**: Certifique-se de ativar o modo desenvolvedor e permitir extensões de outras lojas ao testar suas próprias extensões.
@ -313,10 +313,10 @@ Isso segue o princípio de divulgação progressiva usado no design de interface
### Visão Geral das Telas da Extensão
**Tela de Configuração** - Configuração inicial do usuário:
**Tela de Resultados** - Exibição de dados de pegada de carbono:
> ⚠️ **Consideração de Segurança**: Em aplicativos de produção, armazenar chaves de API no LocalStorage apresenta riscos de segurança, já que o JavaScript pode acessar esses dados. Para fins de aprendizado, essa abordagem funciona bem, mas aplicativos reais devem usar armazenamento seguro no servidor para credenciais sensíveis.
@ -126,7 +126,7 @@ Para abrir as Ferramentas de Desenvolvedor no Edge, clique nos três pontos no c
Vamos experimentar isso. Abra um site (Microsoft.com funciona bem para isso) e clique no botão 'Gravar'. Agora atualize a página e observe o profiler capturar tudo o que acontece. Quando você parar a gravação, verá um detalhamento de como o navegador 'escreve scripts', 'renderiza' e 'pinta' o site. Isso me lembra como o controle da missão monitora cada sistema durante o lançamento de um foguete - você obtém dados em tempo real sobre exatamente o que está acontecendo e quando.
✅ A [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tem muitos mais detalhes se você quiser se aprofundar.
@ -136,11 +136,11 @@ Selecione elementos da linha do tempo do perfil para ampliar os eventos que acon
Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo:
Verifique o painel de Log de Eventos para ver se algum evento levou mais de 15 ms:
✅ Familiarize-se com seu profiler! Abra as ferramentas de desenvolvedor neste site e veja se há algum gargalo. Qual é o ativo que carrega mais lentamente? O mais rápido?
Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Utilizar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API de sinal de CO2 da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para ter um lembrete direto no seu navegador sobre o consumo de eletricidade da sua região. O uso dessa extensão personalizada ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Começando
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Abra a pasta 'dist' quando solicitado, e a extensão será carregada. Para usá-la, você precisará de uma chave de API para a API de CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail no campo desta página) e o [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de Eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o uso de energia da sua região e fornecer um indicador sobre as atividades de alto consumo de energia que seriam adequadas para você. O conceito por trás desse sistema de "pontos" foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador para que você possa receber um lembrete diretamente no navegador sobre o consumo de eletricidade da sua região. O uso dessa extensão personalizada ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar extensão descompactada' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail no campo desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de Eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer um indicador sobre quais atividades de alto consumo energético seriam apropriadas realizar. O conceito por trás desse sistema de 'pontos' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para rastrear o uso de eletricidade, esta extensão de navegador foi criada para lembrar você sobre o impacto do uso de energia na sua região enquanto navega. Utilizar esta extensão pode ajudá-lo a tomar decisões informadas com base nessas informações.
## Começando
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para encontrar o painel de extensões. A partir daí, selecione 'Carregar sem empacotar' para carregar uma nova extensão. No prompt, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API do CO2 Signal ([obtenha por e-mail aqui](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e [o código da sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (por exemplo, em Boston, eu uso 'US-NEISO').
Depois que a chave de API e o código da região forem inseridos na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o uso de energia na sua região e fornecer um indicador sobre quais atividades intensivas em energia são mais adequadas para o momento. O conceito por trás deste sistema de 'ponto' foi inspirado pela extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Será utilizada a API Signal CO2 da tmrow para monitorar o uso de eletricidade e criar uma extensão para o navegador, permitindo que você tenha um lembrete diretamente no navegador sobre o impacto do consumo de eletricidade na sua região. O uso dessa extensão personalizada ajudará a avaliar suas atividades com base nessas informações.
## Para Começar
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, utilize o menu de "três pontos" no canto superior direito do navegador para acessar o painel de Extensões. Se ainda não estiver ativado, habilite o Modo Desenvolvedor (no canto inferior esquerdo). Selecione "Carregar sem compactação" para adicionar uma nova extensão. No prompt, abra a pasta "dist" e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal (você pode [obter uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e o [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [mapa elétrico](https://www.electricitymap.org/map) (em Boston, por exemplo, "US-NEISO").
Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da região e fornecer uma indicação sobre quais atividades de alto consumo energético seriam apropriadas para realizar. O conceito por trás desse sistema de "pontos" foi inspirado na [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Com a API CO2 Signal da tmrow, você pode criar uma extensão de navegador que exibe lembretes sobre o consumo de energia na sua região diretamente no navegador. Essa extensão permite que você acompanhe o uso de energia e tome decisões informadas com base nessas informações.
## Introdução
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, encontre o painel "Extensões" no menu de "três pontos" no canto superior direito do navegador. A partir daí, selecione "Carregar sem compactação" e carregue a nova extensão. Quando solicitado, abra a pasta "dist" para carregar a extensão. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e do [código correspondente à sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, use 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido aparecerá na barra de extensões do navegador. Esse ponto mudará de cor para refletir o consumo de energia na sua região, ajudando você a decidir quais atividades que demandam energia são mais apropriadas naquele momento. O conceito desse sistema de "pontos" foi inspirado na extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador que possa alertá-lo sobre o impacto do consumo de energia na sua região. O uso dessa extensão pode ajudá-lo a tomar decisões mais conscientes sobre suas atividades com base nessas informações.
## Começando
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Abra a pasta 'dist' quando solicitado, e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa na página) e [o código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido na barra da extensão do navegador mudará para refletir o consumo de energia da sua região e fornecerá sugestões sobre quais atividades intensivas são mais adequadas para o momento. O conceito por trás do sistema de 'pontos' foi inspirado pela [extensão de navegador Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Usar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem Empacotamento' para carregar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
> Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Para desenhar no elemento canvas, você seguirá o mesmo processo de três etapas que forma a base de todos os gráficos do canvas. Depois de fazer isso algumas vezes, torna-se algo natural:
@ -329,11 +329,11 @@ Você criará uma página web com um elemento Canvas. Ela deve renderizar uma te
- Nave do herói
- Formação 5×5 de monstros
### Passos Recomendados para Iniciar o Desenvolvimento
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
O resultado final deve ser assim:
- **Sistema de pontuação**: Cada nave inimiga destruída concede 100 pontos (números redondos são mais fáceis para os jogadores calcularem mentalmente). A pontuação será exibida no canto inferior esquerdo.
- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave .
- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave .
Usar o `history.pushState` cria novas entradas no histórico de navegação do navegador. Você pode verificar isso segurando o *botão voltar* do seu navegador, ele deve exibir algo assim:
Se você tentar clicar no botão voltar algumas vezes, verá que a URL atual muda e o histórico é atualizado, mas o mesmo template continua sendo exibido.
@ -295,7 +295,7 @@ Primeiro, vamos observar o que acontece com o envio básico de formulários:
2. Observe as mudanças na barra de endereço do navegador
3. Note como a página recarrega e os dados aparecem na URL
### Comparação de Métodos HTTP
@ -350,7 +350,7 @@ Vamos configurar seu formulário de registro para se comunicar corretamente com
2. **Clique** no botão "Criar Conta"
3. **Observe** a resposta do servidor no seu navegador
**O que você deve ver:**
- **Redirecionamento do navegador** para a URL do endpoint da API
@ -615,7 +615,7 @@ async function register() {
3. **Clique** em "Criar Conta"
4. **Observe** as mensagens do console e o feedback ao usuário
**O que você deve ver:**
- **Estado de carregamento** aparece no botão de envio
@ -790,7 +790,7 @@ Vamos aprimorar seu formulário de registro com validação robusta que oferece
3. **Tente** caracteres especiais no campo de nome de usuário
4. **Insira** um valor de saldo negativo
**O que você observará:**
- **O navegador exibe** mensagens de validação nativas
@ -952,7 +952,7 @@ Mostre uma mensagem de erro no HTML se o usuário já existir.
Aqui está um exemplo de como a página de login final pode ficar após um pouco de estilização:
@ -190,7 +190,7 @@ Como o design compartimentado do Titanic parecia robusto até que múltiplos com
Em vez de ficarmos correndo em círculos, vamos criar um sistema de **gerenciamento de estado centralizado**. Pense nisso como ter uma pessoa realmente organizada responsável por todas as coisas importantes:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Este desafio ajudará você a pensar como um desenvolvedor profissional que cons
Aqui está um exemplo de resultado após completar a tarefa:
@ -112,7 +112,7 @@ Consulte a [documentação da API do servidor](../api/README.md) para:
**Resultado Esperado:**
Após concluir esta tarefa, seu aplicativo bancário deve ter um recurso de "Adicionar Transação" totalmente funcional que pareça e se comporte de forma profissional:
Neste projeto, você aprenderá como construir um banco fictício. Estas lições incluem instruções sobre como estruturar um aplicativo web e fornecer rotas, criar formulários, gerenciar estado e buscar dados de uma API da qual você pode obter as informações do banco.
@ -185,7 +185,7 @@ Assim como o telefone de Alexander Graham Bell conectava locais distantes, vincu
Depois que tudo estiver carregado, você verá um espaço de trabalho limpo e bonito, projetado para mantê-lo focado no que importa – seu código!
**Aqui está um tour pelo ambiente:**
- **Barra de Atividades** (a faixa à esquerda): Sua navegação principal com Explorer 📁, Pesquisa 🔍, Controle de Fonte 🌿, Extensões 🧩 e Configurações ⚙️
@ -233,7 +233,7 @@ Este é perfeito quando você está começando no VSCode.dev e quer abrir um rep
1. Acesse [vscode.dev](https://vscode.dev) se ainda não estiver lá
2. Procure o botão "Open Remote Repository" na tela inicial e clique nele
@ -78,7 +78,7 @@ Como o VSCode.dev exige pelo menos um arquivo para abrir um repositório, criare
4. **Escreva** uma mensagem de commit: "Adicionar estrutura inicial de HTML"
5. **Clique** em "Commit new file" para salvar suas alterações
**O que essa configuração inicial realiza:**
- **Estabelece** uma estrutura de documento HTML5 adequada com elementos semânticos
@ -104,7 +104,7 @@ Agora que a base do seu repositório está estabelecida, vamos migrar para o VSC
✅ **Indicador de sucesso**: Você deve ver os arquivos do seu projeto na barra lateral do Explorer e `index.html` disponível para edição na área principal do editor.
**O que você verá na interface:**
- **Barra lateral do Explorer**: **Exibe** os arquivos e estrutura de pastas do seu repositório
@ -448,7 +448,7 @@ Extensões melhoram sua experiência de desenvolvimento ao fornecer recursos de
**Resultados imediatos após a instalação:**
Assim que o CodeSwing for instalado, você verá uma pré-visualização ao vivo do seu site de currículo aparecer no editor. Isso permite que você veja exatamente como seu site está enquanto faz alterações.
**Entendendo a interface aprimorada:**
- **Visualização dividida**: **Mostra** seu código de um lado e a pré-visualização ao vivo do outro
## 🗺️ Sua Jornada de Aprendizado no Desenvolvimento de Aplicativos com IA
@ -194,7 +194,7 @@ mindmap
**Princípio Central**: O desenvolvimento de aplicativos com IA combina habilidades tradicionais de desenvolvimento web com integração de serviços de IA, criando aplicativos inteligentes que parecem naturais e responsivos para os usuários.
**Aqui está o que torna o playground tão útil:**
- **Experimente** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos gratuitos!)
@ -204,7 +204,7 @@ mindmap
Depois de brincar um pouco, basta clicar na aba "Code" e escolher sua linguagem de programação para obter o código de implementação necessário.
## Configurando a Integração de Backend com Python
@ -2365,14 +2365,14 @@ Quer experimentar este projeto em um ambiente de desenvolvimento na nuvem? O Git
- **Acesse** o [repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Clique** em "Use this template" no canto superior direito (certifique-se de estar logado no GitHub)
**Passo 2: Iniciar Codespaces**
- **Abra** o repositório recém-criado
- **Clique** no botão verde "Code" e selecione "Codespaces"
- **Escolha** "Create codespace on main" para iniciar seu ambiente de desenvolvimento
**Passo 3: Configuração do Ambiente**
Assim que seu Codespace carregar, você terá acesso a:
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo na aprendizagem de tópicos como:
@ -115,7 +115,7 @@ Siga estes passos:
Na sua cópia do repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar.
@ -17,7 +17,7 @@ Podívejte, chápu, že programování může být zatím zastrašující. Když
Dnes si prozkoumáme úžasné nástroje, které činí moderní webový vývoj nejen možným, ale doopravdy návykovým. Mluvím o stejných editorech, prohlížečích a pracovních postupech, které používají vývojáři ve Netflixu, Spotify a ve vašem oblíbeném indie studiu každý den. A tady je část, která vás nadchne: většina těchto profesionálních, průmyslových standardů je úplně zdarma!
@ -17,7 +17,7 @@ Vím, že to může ze začátku působit jako hodně – hele, pamatuju si, jak
Vyrazíme na tuto cestu spolu, krok za krokem. Bez spěchu, bez tlaku – jen ty, já a pár opravdu skvělých nástrojů, které se právě stanou tvými novými nejlepšími přáteli!
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ Nejprve najděte na GitHubu repozitář (nebo **repo**) zajímavý pro vás, do
✅ Dobrý způsob, jak najít repozitáře vhodné pro začátečníky, je [vyhledat podle štítku 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Existuje několik způsobů, jak zkopírovat kód. Jedním z nich je "klonování" obsahu repozitáře přes HTTPS, SSH nebo pomocí GitHub CLI (Command Line Interface).
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, neboli HyperText Markup Language, je základem každé webové stránky, kterou jste kdy navštívili. Představte si HTML jako kostru, která dodává webovým stránkám strukturu – definuje, kam obsah patří, jak je uspořádán a co který prvek představuje. Zatímco CSS později „oblékne“ váš HTML do barev a rozvržení a JavaScript ho oživí interaktivitou, HTML poskytuje základní strukturu, díky níž je vše ostatní možné.
@ -86,7 +86,7 @@ Vytvoříte dedikovanou složku pro váš teráriový projekt a přidáte první
4. V panelu Průzkumník klikněte na ikonu „Nový soubor“
5. Pojmenujte svůj soubor `index.html`
**Možnost 2: Použití příkazového řádku**
```bash
@ -236,48 +236,48 @@ Nyní přidejte obrázky rostlin uspořádané ve dvou sloupcích mezi vaše zna
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
Vzpomínáte si, jak vaše HTML terrárium vypadalo docela základně? CSS je místo, kde přeměníme tu obyčejnou strukturu v něco vizuálně přitažlivého.
@ -202,7 +202,7 @@ body {
Otevřete nástroje pro vývojáře prohlížeče (F12), přejděte na záložku Elements a prohlédněte si váš `<h1>` element. Uvidíte, že dědí font family od těla:
✅ **Zkouška**: Vyzkoušejte nastavit další děditelné vlastnosti na element `<body>`, např. `color`, `line-height` nebo `text-align`. Co se stane s vaším nadpisem a dalšími prvky?
@ -332,7 +332,7 @@ V našem terráriu každá rostlina potřebuje podobné stylování, ale také i
**Toto je HTML struktura každé rostliny:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.cs.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/cs/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato te
Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout:
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
Vítejte u jednoho z nejpoutavějších aspektů vývoje webu – vytváření interaktivity! Document Object Model (DOM) je jako most mezi vaším HTML a JavaScriptem a dnes jej použijeme, aby vaše terrárium ožilo. Když Tim Berners-Lee vytvořil první webový prohlížeč, představoval si web, kde dokumenty mohou být dynamické a interaktivní – DOM toto vize umožňuje.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Reprezentace DOM a HTML značkování, které na něj odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Pochopení closures**: Closures jsou významné téma v JavaScriptu a mnoho vývojářů je používá roky, než úplně pochopí všechny teoretické aspekty. Dnes se zaměříme na praktické použití – closure uvidíte přirozeně vznikat, jak budeme stavět naše interaktivní funkce. Pochopení se vyvine, jakmile uvidíte, jak řeší skutečné problémy.
> Reprezentace DOM a HTML značkování, které na něj odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Nyní otestujte své interaktivní terárium! Otevřete soubor `index.html` v pr
- **Podpora více zařízení**: Funguje na desktopu i mobilech
- **Vědomí výkonu**: Žádné úniky paměti nebo zbytečné výpočty
> Některé rané prohlížeče, podle [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Jak prohlížeče zpracovávají webový obsah
@ -194,7 +194,7 @@ quadrantChart
Porozumění procesu instalace rozšíření vám pomůže předvídat uživatelský zážitek při instalaci vašeho rozšíření. Proces instalace je standardizovaný v moderních prohlížečích s drobnými rozdíly v designu rozhraní.
> **Důležité**: Při testování vlastních rozšíření nezapomeňte zapnout režim vývojáře a povolit rozšíření z jiných obchodů.
@ -308,10 +308,10 @@ Toto následuje princip postupného odhalování v designu rozhraní používan
### Přehled zobrazení rozšíření
**Nastavení** - konfigurace prvního použití:
**Výsledky** - zobrazení dat uhlíkové stopy:
> ⚠️ **Bezpečnostní upozornění**: Ve výrobních aplikacích ukládání API klíčů do LocalStorage představuje bezpečnostní rizika, protože k těmto datům může přistupovat JavaScript. Pro výukové účely tento přístup stačí, ale reálné aplikace by měly používat bezpečné serverové úložiště pro citlivé údaje.
@ -123,7 +123,7 @@ Pro otevření Nástrojů pro vývojáře v Edge klikněte na tři tečky vpravo
Vyzkoušejme to. Otevřete nějakou webovou stránku (Microsoft.com je pro to dobrá) a klikněte na tlačítko 'Nahrávat'. Teď obnovte stránku a sledujte, jak profilovací nástroj zaznamená, co se děje. Když nahrávání zastavíte, uvidíte detailní rozpis, jak prohlížeč 'spouští skripty', 'vykresluje' a 'maluje' stránku. Připomíná mi to, jak řídící středisko sleduje každý systém během startu rakety – máte data v reálném čase o tom, co a kdy se děje.
✅ [Dokumentace Microsoftu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) nabízí spoustu dalších detailů, pokud se chcete hlouběji ponořit
@ -133,11 +133,11 @@ Vyberte části časové osy profilu pro přiblížení událostí, které se ob
Získejte přehled o výkonu vaší stránky výběrem části časové osy profilu a pohledem do přehledového panelu:
✅ Seznamte se se svým profilovým nástrojem! Otevřete vývojářské nástroje na této stránce a zjistěte, zda jsou nějaká „hmatatelná“ místa zpomalení. Který prostředek se nejdéle načítá? A který nejrychleji?
Pomocí API C02 Signal od tmrow sledujte spotřebu elektřiny a vytvořte rozšíření prohlížeče, které vám přímo v prohlížeči připomene, jak náročná je spotřeba elektřiny ve vašem regionu. Používání tohoto rozšíření ad hoc vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. Na výzvu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte ho zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka v liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vašem regionu, a poskytla vám doporučení, jaké energeticky náročné aktivity by pro vás byly vhodné. Koncept tohoto systému „teček“ mi byl inspirován rozšířením [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám umožní mít přímo v prohlížeči připomínku o spotřebě elektřiny ve vašem regionu. Používání tohoto ad hoc rozšíření vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
Pro instalaci v Edge použijte nabídku 'tři tečky' v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte 'Načíst nebalené' pro přidání nového rozšíření. Otevřete složku 'dist', když budete vyzváni, a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro CO2 Signal API ([získejte jej zde e-mailem](https://www.co2signal.com/) - zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones) odpovídající [Mapě elektřiny](https://www.electricitymap.org/map) (například v Bostonu používám 'US-NEISO').
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod na liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vašem regionu, a poskytl vám indikátor o aktivitách s vysokou spotřebou energie, které by pro vás byly vhodné. Koncept tohoto systému "bodů" jsem převzal z [rozšíření Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
Pomocí API C02 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám umožní mít přímo v prohlížeči připomínku o spotřebě elektřiny ve vaší oblasti. Používání tohoto ad hoc rozšíření vám pomůže činit rozhodnutí o vašich aktivitách na základě těchto informací.
Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nekomprimované rozšíření“ pro přidání nového rozšíření. Při výzvě otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Mapě elektřiny](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod v liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vaší oblasti, a poskytl vám indikátor, jaké energeticky náročné aktivity by bylo vhodné provádět. Koncept tohoto systému „bodů“ jsem převzal z [rozšíření Energy Lollipop](https://energylollipop.com/) pro kalifornské emise.
Použití API CO2 Signal od tmrow ke sledování spotřeby elektřiny, vytvoření rozšíření prohlížeče, které vám připomene, jak náročné je využívání elektřiny ve vašem regionu. Používání tohoto rozšíření vám pomůže rozhodovat se o vašich aktivitách na základě těchto informací.
Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče k nalezení panelu rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. V zobrazeném dialogu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč CO2 Signal ([získat e-mailem zde](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód vašeho regionu](http://api.electricitymap.org/v3/zones) z [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám 'US-NEISO').
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka na liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vašem regionu, a poskytla vám indikátor, které energeticky náročné aktivity jsou pro vás vhodné. Koncept této „tečkové“ metody jsem převzal z rozšíření [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
Budeme používat API Signal CO2 od tmrow k monitorování spotřeby elektřiny a vytvoříme rozšíření pro prohlížeč, které vám umožní mít přímo v prohlížeči připomínku o tom, jak náročná je spotřeba elektřiny ve vaší oblasti. Používání tohoto rozšíření vám pomůže lépe hodnotit své aktivity na základě těchto informací.
Pro instalaci na Edge použijte nabídku "tři tečky" v pravém horním rohu prohlížeče a najděte panel Rozšíření. Pokud ještě není aktivní, zapněte režim vývojáře (v levém dolním rohu). Vyberte "Načíst nekomprimované" pro přidání nového rozšíření. Otevřete složku "dist" v zobrazeném dialogu a rozšíření bude načteno. Pro jeho použití budete potřebovat API klíč pro CO2 Signal API (můžete ho [získat zde e-mailem](https://www.co2signal.com/) - zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [elektrické mapě](https://www.electricitymap.org/map) (například v Bostonu "US-NEISO").
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod v liště rozšíření prohlížeče by se měl změnit tak, aby odrážel spotřebu energie ve vaší oblasti. Poskytne vám také návod, které aktivity s vysokou spotřebou energie by bylo vhodné provádět. Koncept tohoto systému "bodů" byl inspirován [rozšířením Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
Vytvořte rozšíření prohlížeče, které pomocí API CO2 Signal od tmrow sleduje spotřebu energie a zobrazuje připomínku o tom, jak vysoká je spotřeba energie ve vaší oblasti. Toto rozšíření můžete používat ad hoc, abyste mohli na základě těchto informací rozhodovat o svých aktivitách.
Pro instalaci do Edge najděte panel „Rozšíření“ v nabídce „tři tečky“ v pravém horním rohu prohlížeče. Odtud vyberte „Načíst nebalené“ a načtěte nové rozšíření. Při výzvě otevřete složku „dist“ a rozšíření se načte. Pro použití budete potřebovat API klíč CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například pro Boston použijte 'US-NEISO').
Po zadání API klíče a oblasti do rozhraní rozšíření se barevná tečka zobrazená na liště rozšíření prohlížeče změní, aby odrážela spotřebu energie ve vaší oblasti. Tím vám naznačí, jaké aktivity vyžadující energii jsou vhodné. Koncept tohoto „tečkového“ systému jsem převzal z [Energy Lollipop extension](https://energylollipop.com/) pro emise v Kalifornii.
Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vás bude upozorňovat na aktuální úroveň spotřeby elektřiny ve vašem regionu. Používání tohoto rozšíření vám pomůže lépe zvažovat své aktivity na základě těchto informací.
## Začínáme
@ -31,7 +31,7 @@ npm run build
Pro instalaci v Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro přidání nového rozšíření. Otevřete složku „dist“ na výzvu a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro CO2 Signal ([získejte jej zde prostřednictvím e-mailu](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro váš region](http://api.electricitymap.org/v3/zones), který odpovídá [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevný bod na liště rozšíření prohlížeče se změní tak, aby odrážel spotřebu energie ve vašem regionu, a poskytne vám doporučení ohledně vhodných aktivit. Koncept systému „barevných bodů“ jsem převzal z [rozšíření prohlížeče Energy Lollipop](https://energylollipop.com/) pro Kalifornii.
Pomocí API CO2 Signal od tmrow pro sledování spotřeby elektřiny vytvořte rozšíření prohlížeče, které vám přímo v prohlížeči připomene, jak náročná je spotřeba elektřiny ve vaší oblasti. Používání tohoto rozšíření vám pomůže lépe se rozhodovat o vašich aktivitách na základě těchto informací.
Pro instalaci na Edge použijte nabídku „tři tečky“ v pravém horním rohu prohlížeče a najděte panel Rozšíření. Odtud vyberte „Načíst nebalené“ pro načtení nového rozšíření. Na výzvu otevřete složku „dist“ a rozšíření se načte. Pro jeho použití budete potřebovat API klíč pro API CO2 Signal ([získejte jej zde e-mailem](https://www.co2signal.com/) – zadejte svůj e-mail do pole na této stránce) a [kód pro vaši oblast](http://api.electricitymap.org/v3/zones) odpovídající [Electricity Map](https://www.electricitymap.org/map) (například v Bostonu používám „US-NEISO“).
Jakmile zadáte API klíč a region do rozhraní rozšíření, barevná tečka na liště rozšíření prohlížeče by se měla změnit tak, aby odrážela spotřebu energie ve vaší oblasti, a poskytne vám doporučení, jaké energeticky náročné aktivity by pro vás byly vhodné. Koncept tohoto systému „teček“ jsem převzal z rozšíření [Energy Lollipop](https://energylollipop.com/) pro emise v Kalifornii.
> Obrázek z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Kreslení na prvek canvas probíhá podle tří kroků, které tvoří základ všech grafických operací. Když si je zopakujete několikrát, stane se to naprosto přirozeným:
@ -323,11 +323,11 @@ Vytvoříte webovou stránku s prvkem Canvas. Měla by vykreslit černou obrazov
- **Skórovací systém**: Každá zničená nepřátelská loď uděluje 100 bodů (kulatá čísla jsou pro hráče mentálně jednodušší na počítání). Skóre se zobrazuje v levém dolním rohu.
- **Počet životů**: Váš hrdina začíná se třemi životy – standardní nastavení z raných arkád, které vyvažuje výzvu s hratelností. Každá kolize s nepřítelem stojí jednoho života. Zbývající životy zobrazíme v pravém dolním rohu pomocí ikon lodí .
- **Počet životů**: Váš hrdina začíná se třemi životy – standardní nastavení z raných arkád, které vyvažuje výzvu s hratelností. Každá kolize s nepřítelem stojí jednoho života. Zbývající životy zobrazíme v pravém dolním rohu pomocí ikon lodí .
Použití `history.pushState` vytváří nové položky v historii prohlížeče. Můžete to zkontrolovat podržením *tlačítka zpět* ve vašem prohlížeči, mělo by se zobrazit něco takového:
Pokud několikrát kliknete na tlačítko zpět, uvidíte, že se aktuální URL změní a historie se aktualizuje, ale stále se zobrazuje stejná šablona.
@ -187,7 +187,7 @@ Stejně jako třída Titanicu s oddíly, jež se zdála robustní, dokud se nena
Místo běhání dokola vytvoříme **centralizovaný systém správy stavu**. Představte si to jako opravdu organizovanou osobu, která má na starosti všechny důležité věci:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Tato výzva vám pomůže myslet jako profesionální vývojář, který zohled
V tomto projektu se naučíte, jak vytvořit fiktivní banku. Tyto lekce obsahují pokyny, jak navrhnout webovou aplikaci, vytvořit trasy, sestavit formuláře, spravovat stav a získávat data z API, ze kterého můžete načítat data banky.
@ -78,7 +78,7 @@ Protože VSCode.dev vyžaduje alespoň jeden soubor pro otevření repozitáře,
4. **Napište** zprávu ke commitu: „Přidání počáteční HTML struktury“
5. **Klikněte** na „Commit new file“ pro uložení změn
**Co tento počáteční setup zajišťuje:**
- **Zavádí** správnou HTML5 strukturu dokumentu se sémantickými prvky
@ -104,7 +104,7 @@ Nyní, když je základ vašeho repozitáře nastaven, přejděme do VSCode.dev
✅ **Indikátor úspěchu**: Měli byste vidět soubory svého projektu v postranním panelu Explorer a `index.html` dostupný pro úpravy v hlavní oblasti editoru.
@ -448,7 +448,7 @@ Rozšíření zlepšují váš vývojový zážitek tím, že poskytují možnos
**Okamžité výsledky po instalaci:**
Jakmile je CodeSwing nainstalován, uvidíte živý náhled své webové stránky životopisu přímo v editoru. To vám umožní přesně vidět, jak vaše stránka vypadá, zatímco provádíte změny.
## 🗺️ Vaše cesta za vývojem AI aplikací
@ -189,7 +189,7 @@ mindmap
```
**Základní princip**: Vývoj AI aplikací kombinuje tradiční webové dovednosti s integrací AI služeb, vytvářející inteligentní aplikace, které působí přirozeně a reagují na uživatele.
**Co dělá playground tak užitečným:**
- **Vyzkoušejte** různé AI modely jako GPT-4o-mini, Claude a další (vše zdarma!)
@ -199,7 +199,7 @@ mindmap
Jakmile si trochu pohrajete, stačí kliknout na záložku "Code" a vybrat programovací jazyk, abyste získali implementační kód, který budete potřebovat.
## Nastavení Python backendové integrace
@ -2351,14 +2351,14 @@ Chcete si tento projekt vyzkoušet v cloudovém vývojovém prostředí? GitHub
- **Přejděte** do [repositáře Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klikněte** na „Use this template“ v pravém horním rohu (ujistěte se, že máte přihlášený účet GitHub)
**Krok 2: Spusťte Codespaces**
- **Otevřete** právě vytvořený repozitář
- **Klikněte** na zelené tlačítko "Code" a vyberte "Codespaces"
- **Zvolte** "Create codespace on main" pro spuštění vašeho vývojového prostředí
@ -17,7 +17,7 @@ Se, jeg forstår fuldt ud, hvis programmering føles skræmmende lige nu. Da jeg
I dag skal vi udforske de utrolige værktøjer, der gør moderne webudvikling ikke bare mulig, men også seriøst vanedannende. Jeg taler om de nøjagtige redaktører, browsere og arbejdsprocesser, som udviklere hos Netflix, Spotify og dit yndlings indie app-studie bruger hver eneste dag. Og her er den del, der vil få dig til at lave en glad dans: de fleste af disse professionelle, branchestandard-værktøjer er helt gratis!
@ -17,7 +17,7 @@ Jeg ved, det måske føles som meget i starten – pokkers, jeg husker at stirre
Vi tager denne rejse sammen, skridt for skridt. Ingen hast, intet pres – bare dig, mig og nogle virkelig fede værktøjer, som snart bliver dine nye bedste venner!
> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ Først, lad os finde et repository (eller **repo**) på GitHub, som interesserer
✅ En god måde at finde 'begynder-venlige' repos er at [søgge efter tagget 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Der er flere måder at kopiere kode på. En måde er at "klone" indholdet af repositoryet, ved brug af HTTPS, SSH, eller GitHub CLI (Command Line Interface).
localizeflow[bot]
1 week ago