Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DONE]: Translate JavaScript in JSX with Curly Braces #498

Merged
merged 13 commits into from
Jun 21, 2023
Merged

[DONE]: Translate JavaScript in JSX with Curly Braces #498

merged 13 commits into from
Jun 21, 2023

Conversation

eihabkhan
Copy link
Contributor

@eihabkhan eihabkhan commented Jun 20, 2023 •
edited
Loading

  • Translate the "Overview"
  • Translate the "Passing strings with quotes" section
  • Translate the "Using curly braces: A window into the JavaScript world" section
  • Translate the "Where to use curly braces" section
  • Translate the 'Using “double curlies”: CSS and other objects in JSX' section
  • Translate the "More fun with JavaScript objects and curly braces" section
  • Translate the "Recap" section
  • Translate the "Challenges" section

@github-actions
Copy link

github-actions bot commented Jun 20, 2023 •
edited
Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/404 75.6 KB (🟡 +21 B) 178.75 KB
/500 75.59 KB (🟡 +21 B) 178.75 KB
/[[...markdownPath]] 77.01 KB (🟡 +21 B) 180.17 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

@AhmedBaset AhmedBaset self-assigned this Jun 21, 2023
AhmedBaset
AhmedBaset approved these changes Jun 21, 2023
View reviewed changes
Copy link
Collaborator

@AhmedBaset AhmedBaset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ترجمة ممتازة
تركت لك بعض التعليقات
وعدلت تعديلات في commits راجعها من فضلك

أمر أخير هناك بعض المحتوى وسط الكود مثل المحتوى الخاص بGregorio Y. Zara سيكون جيدًا لو ترجمته إلى اللغة العربية
لكن الأفضل على الإطلاق لو غيرت المحتوى تماما بمحتوى مألوف للمستخدمين العرب
مثلا بدلا من قائمة مهام لجورجيو يمكنك عمل قائمة مهام لأحمد زويل أو نجيب محفوظ أو طه حسين
إن أردت تعديل هذا يمكنك فتح طلب سحب Pull Request جديد وتعديل ما تريد

شكرا لك

src/content/learn/javascript-in-jsx-with-curly-braces.md Outdated
@@ -1,25 +1,25 @@
---
title: JavaScript in JSX with Curly Braces
title: JavaScript في JSX باستخدام الأقواس المعقوفة
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

الأقواس المنحنية ✅

src/content/learn/javascript-in-jsx-with-curly-braces.md

</Intro>

<YouWillLearn>

* How to pass strings with quotes
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ترجم strings إلى النصوص

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

سأقوم بترجمتهم المرة القادمة. السبب في أني لم أترجمهم هو لأني ظننت أنه ليس من المفترض ترجمة string تبعا لقائمة المصطلحات

src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -133,9 +132,9 @@ export default function TodoList() {
backgroundColor: 'black',
color: 'pink'
}}>
<li>Improve the videophone</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

سيكون الأمر أفضل لو ترجمت المحتوى بين الكود

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

صحيح، سأتأكد من أن أترجم محتوى الكود في المرة القادمة.

@AhmedBaset AhmedBaset merged commit 036f616 into reactjs:main Jun 21, 2023
eihabkhan
eihabkhan commented Jun 21, 2023
View reviewed changes
src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -103,25 +103,25 @@ function formatDate(date) {

export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
<h1>قائمة مهام لـ {formatDate(today)}</h1>
Copy link
Contributor Author

@eihabkhan eihabkhan Jun 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

هل مسموح لنا بتعديل هذا الكود بحيث يتم تغيير DateTimeFormat من en-us إلى مثلا ar-eg؟

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'ar-eg',
    { weekday: 'long' }
  ).format(date);
}

هذا سيحسن من شكل النص المصيّر, بحيث يكون الناتج:
قائمة مهام لـ الأربعاء
بدلا من
قائمة مهام لـ Wednesday

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

بالطبع يمكنك طالما لا تؤثر على فكرة الكود

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

حسنا سأقوم بإنشاء طلب سحب جديد يحتوي على هذا التغيير

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

إذن عدل المعلومات عن شخص معروف مثلا هذه معلومات بديلة عن أحمد زويل باستخدام chatGPT

const person = {
  name: 'أحمد زويل',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>مهام {person.name}</h1>
      <img
        className="avatar"
        src="https://i.ibb.co/KDFmRmy/5.jpg"
        alt="أحمد زويل"
      />
      <ul>
        <li>العمل على تطوير العلوم والأبحاث في مصر</li>
        <li>تعزيز التعليم العلمي وتشجيع الشباب على الاهتمام بالعلوم</li>
        <li>تطوير تكنولوجيا المعلومات والاتصالات</li>
        <li>دعم الابتكار والاختراع في مجالات متعددة</li>
      </ul>
    </div>
  );
}

غير ما يلزم من الكود
يمكنك تعديا البيانات أو تغيير الشخص كما تحب

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

نعم سأستبدل محتوى الأمثلة كما اقترحت بأمثلة مألوفة للمستخدمين العرب.

@eihabkhan
Copy link
Contributor Author

eihabkhan commented Jul 16, 2023 •
edited
Loading

@A7med3bdulBaset this is done is this merged yet? It's still marked as unchecked

@AhmedBaset AhmedBaset mentioned this pull request Jul 16, 2023
Open
@AhmedBaset
Copy link
Collaborator

Apologize for the confusion
It's checked now

@eihabkhan
Copy link
Contributor Author

Apologize for the confusion It's checked now

No problem! Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AhmedBaset AhmedBaset AhmedBaset approved these changes

Assignees

@AhmedBaset AhmedBaset

Labels
approved
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@eihabkhan @AhmedBaset