Swipeable Cards: Live Code Session - Supercharged Google Chrome Developers Arabic English (auto-generated)

Swipeable Cards: Live Code Session - SuperchargedYouTube↗ IA↗(long shot)
Science & Technology 233.9K views 532 likes 8 dislikes 14 Apr 2016

Chrome for Developers 814K subscribers N/A YouTube↗

Click to Play Video

أهلًا ومرحبًا بكم في Supercharged

hello and welcome to supercharged I

أظن أنها النشرة المباشرة.

guess it's the live edition I don't even

لا أدري ما الذي يعنيه ذلك،

know what that means but we're stood

بالرغم من ذلك ها نحن في موقع تصوير Supercharged.

here nonetheless on the set of

أنا "بول".

supercharged I'm Paul and what we're

حسنًا، في المرة الأخيرة التى قمت فيها ببث مباشر،

gonna do is well like last time I did a

تحدثت عن عنصر zoomer الخاص بالصور،

live stream I did an image Zoomer

وسألت في نهاية الحلقة، ما الذي تريدوا أن أتحدث عنه في الحلقة القادمة؟

element and I said at the end of that what you want me to do next and you all

واتفقتم جميعًا على البطاقات القابلة للنقل.

went swipeable cards I actually put up a

لقد وضعت بالفعل استبيان صغير،

little poll and you voted for swipeable

وصوتم على البطاقات القابلة للنقل، ذلك رائع.

cards so that's awesome so that's what

إذًا هذا ما سأقدمه في تلك الحلقة،

I'm gonna do in this one or at least

أو على الأقل ما انتوي فعله.

attempt to do and I have a little bit of

وبمساعدة بسيطة في هيئة "سورما".

help in the form of Surma the form of

في هيئة "سورما"، إنه أنا.

Surma that is me I'm here basically to

أنا هنا بالأساس لأراقب مجموعات الدردشة التي لدينا.

monitor the chats that we have we're

سنجري دردشة في البث المباشر على YouTube،

gonna have a chat on the live stream on

لكن في الغالب أود أن أطلب منكم أن تنتقلوا

YouTube but mostly I would like to ask

إلى قناة Slack والتي أنشأتها على Chromium Dev

you to move over to the slack channel that I created on the chromium death

slack it's like each other is more

يعتبر Slack مريح أكثر،

comfortable and we have action archived

ولدينا بالفعل نسخة محفوظة بالأرشيف للدردشة فيما بعد.

version of the chat afterwards so if you

لذا إذا كنت تريد أن تقوم بالدردشة معنا،

want to chat with us and actually

وتتأثر بالفعل بما نقدمه، انضم إلينا وتحدث معنا.

influence the way that we do this join

أحدث تأثيرًا. تلك كانت فكرة جيدة.

us and talk to us right swipeable cards

البطاقات القابلة للنقل، إذًا

oh yeah before we started I wanted to

نعم، قبل أن نبدأ، أريد أن أسألك،

ask you what even is exactly swiping the

ما الذي يعنيه بالتحديد مصطلح البطاقات القابلة للنقل؟

card because the term itself is not

لأن المصطلح في حد ذاته غير واضح المعنى. لا، لا.

really self-explanatory no actually when

في الواقع، عندما جمعت عناصرالاستبيان،

I put the pole together I was like I'm

بدوت غير متأكدًا تمامًا مما أسأل عنه هنا

not sure what I'm actually asking here

لكني فكرت البطاقات القابلة للنقل، تبدو كموضوع لائق.

but I thought some people can't seems

تبين بعدئذ أن البوليمر-مركب كيمائي-

like something decent then it turns out

يحتوي على عنصر البطاقات القابلة للنقل

that polymer actually has a swipeable card

أوه!، ذلك الشيء.

oh that one so it's like it's like

إذًا فالأمر يشبه البطاقات القابلة للنقل، أعتقد أن هذه هي الطريقة--

dismissible cards I think is the way

إنها الشيء الذي لدينا الآن في Google،مثلًا؟

alright that's why I'm gonna go for

نعم، ذلك ما نبحث عنه. لِيَكُنْ، ذلك ما أنا بصدد فعله.

right um well you know if chatter what's

تمامًا. حسنًا، يكفي ثرثرة، دعونا نواصل العمل على بعض الأكواد،

going on with some code because that's

فنحن هنا بسبب ذلك.

why we're all here so what I'm gonna do I dive straight in

لذا سأدخل في الموضوع مباشرة.

I've got my editor open and it's all

لدي هنا المحرر مفتوح، ولأكون صادقًا،

I've done so far is just fire a little

كل ما فعلته حتى الآن أنى أطلقت خادم صغير.

server and they said a little sermon a

أطلقت العنان لخادم صغير هناك خادم صغير. قمت بذلك بشكل صحيح.

little server get that right um all

حسنًا دعونا ننشأ فهرس HTML إذًا doot

right let's make a index each - no mmm

ها نحن ذا. بطاقات قابلة للنقل لما لا؟

there we go wipe swipe a ball oh let's

لننشأ بعض HTML لكي نبدأ بها، لما لا؟

just do some HTML to begin with why not

فئة Div تساوي بطاقة.

div equals card I'm gonna put them in a

سأضعهم في حافظة، اعتقد.

container I think yeah that means I can

نعم. ذلك يعني أن بإمكاني الحصول على أداء سريع الإستجابة بشكل ما،

have something that's a bit more

responsive I think let's do that div

لنفعل ذلك. فئة Div تساوي بطاقة.

class equals card

ها نحن ذا، واحد، اثنان، ثلاثة.

No there we go one two three right let's

حسنًا، لندخل فجأة-- لن نحتاج القائمة،

pop in we don't need the manifests I'm

لأنني لن استخدمها اليوم. لذا رابط rel="stylesheet." href="cards." سيؤدي الغرض.

not using that today so link rel equals style sheet H ref equals cards yeah yes

لذا أقصد، أنه مع الهدف الذي يجول في خاطرك،

with a goal that you have in mind

قد تكون فكرتي الحالية أنه يجب الاستماع لـTouchevents

my immediate idea would be to have like listen to touch events use transforms

استخدام التحولات، ثم تحريك الرسوم

and then animations to do the

للقيام بهذا الشيء القابل للنقل. هل هذا ما تنتوي فعله.

dismissible thing yeah yeah all right

نعم، تمامًا.

totally totally gonna go for that

حسنًا. سأفعل ذلك تمامًا. دعونا نرى ما سيحدث.

let's see what happens you never know

لن تعرف أبدًا.

هيكل HTML دعونا نرى. هامش، صفر. مَلْء-Padding، صفر.

let's see margin:0 background one of

خلفية، نحتاج لواحدة من هذه. لننشأ بطاقة-- قف!، من أين جاء ذلك؟ حافظة بطاقة. بنسبة عرض 100%

those do a card container o width 100%

لنرى أقصى عرض 450 بكسل سنحتاج لبعض الملء على الجانبين.

let's see max width 450 pixels want some

ولقد حصلت على حد bos، لذا سيكون ذلك جيدًا.

padding on the sides and I've got border box that'll be okay

ملء 16 بكسل.

piling up 16 pixels yeah then in the

لذا سيكون ذلك-- بعدئذ في البطاقة. لنختار خلفية بيضاء.

card say background white and the border

وننشأ حد نصف قطره ثلاثة بكسل،

radius 3 pixels Chris what's that like

لأن كيف يبدو ذلك؟ صندوق إغلاق، ذلك ما أريد. أريد صندوق إغلاق، لأني أريد

yeah box shadow that's what I want I

أن تبدو تلك البطاقات وكأنها بقيت خارج الصفحة قليلًا

want a box shadow cuz I want these cards to feel like they sit off the page a

لذا ستكون 0 في x

little bit so we'll do 0 and X I will do

سأجعلها 3 بكسل وستكون غائمة عند 4 بكسل

3 pixels in Y will blur it by 4 pixels

وسنقوم بـRGB of 0.0.0.0.3 ولنضع هامش بقدر 20 بكسل، ثم لا شيء عند الجانب.

and we'll do an algae behave not not not not point 3 and let's put a margin of 20 pixels and then nothing to the side it's

هل سينجح ذلك في العمل؟

ألقِ نظرة.

take a look No oh I didn't put a height

on it there you go

أوه!، لم أحدد ارتفاع لها. ها نحن ذا. ارتفاع، 200 أو 300؟ 200

hi 200 200 220 pixels yeah we have cards

200 بكسل. مرحى!

حصلنا على بطاقات. لدينا بطاقات.

جيد، حسنًا. سنضع هامشًا لخط الوسط في الوقت الحالي.

we'll put a margin on the centerline for

هامش صفر أوتوماتيكيًا

now margin:0 auto cool we have cards

رائع. لدينا بطاقات. لنعَلّمهم

let's let's label them really memorize

لقد حفظت material styles بالفعل،

the material styles didn't you well you

أليس كذلك؟ حسنًا، انت تعلم. البطاقة الأولى انتظر، يمكن أن نضع بعض الأسماء اللطيفة.

know card one hang on we can some friendly names

أوه!، لنجعلها "داس سورما".

I'll let's just do that's thermo Aero

Areotwist من سيحصل على البطاقة الأخيرة، إذًا؟

twist look at the last card in the

أتريد أن تأخذ "كينلان" أو"بوند"؟

Kinlan yeah bond I'm gonna go with the

سآخذ "كينلان". Kinlanimus Maximus.

kindling yeah can la animus Maximus yeah

لنقم بعرض flex، align-item center Justify-content, space around

let's do display flex a line-item Center justify contents base around that should

ذلك سيجعل النص في المنتصف تمامًا.

put the text right in the middle nice

لطيف. و-- أريد اختيار خط.

and I want to fund I saw the way I look

وأنا أيضًا، لقد ألقيت نظرة على ذلك، وشعرت أنه، أوه!. Ariel حجم الخط 30 بكسل؟

to that not like Arial font size say

اللون-- يجب أن نختار لونًا كذلك. نعم.

pixels color look you should have a color on there as well

مرحبًا حسنًا حصلنا على بطاقات.

Hey look that codes will halfway there

لقد قطعنا نصف الطريق.

yeah cuz that's gonna be that's the hard

نعم، لأن ذلك هو الجزء الصعب إلى حد ما.

bit yeah nice try so nice right well

محاولة جيدة محاولة جيدة أحسنت!

done right new file

لنكتب ملف جديد لنصنع بطاقات .js

let's do cards Jas

الآن، سأحتاج لأن أضع ذلك هنا.

now I will need to pop that in here

مصدر النص equals cards.js.

script source equals card stop Jess this

وهنا يأتي وقت الجزء المهم.

is where the juicy bits come yes the

هذه هي JavaScript

Java stress is the bit where I probably

نعم، هنا الجزء الذي قد أقوم فيه بخطوة خاطئة.

get it really wrong so let's say use

لنستخدم strict. سأقوم بتصنيف البطاقات، لأني أحب ذلك

strict and I'm gonna do class cards because I like that and I'm gonna do

وسأذهب إلى نافذة .addEventListener

window.addeventlistener I'm just gonna

سأفعل ذلك بالطريقة البطيئة في الوقت الحالي

do this the lazy way from then our new

بطاقات جديدة حسنًا، سأصنع مُنشيء

cards right I will do a constructor that

يقول console.log

says console that log hello world hello

"أهلًا بالعالم" "أهلًا بالعالم" "أهلًا بالعالم" ها نحن ذا.

world hello world now you know tada

and the nice thing is we don't even need

والشيء اللطيف أن الأمر لا يحتاج لجلبة أو أي شيء لأن Chrome لديه دعم

Babel or anything because Chrome has

لتلك[غير مسموع] في هذه اللحظة.

support for a melon that's so convenient

ذلك أمر مريح جدًا.

ها نحن ذا، حسنًا.

okay I knew I should have done at the

أتعلم، ما الذي كان يجب على فعله من البداية

start of a general if I've been really

أتعلم، كنت أفكر بالفعل

thinking I could have done like Jason

أنه كان يجب أن أقوم بـjs وأضغط علامة تبويب

and hit tub you see I've already done

أترى، لقد قمت بالفعل بكل ذلك من قبل.

all that before ah

أوه!، أحيانًا أكون بليد جدًا ها نحن

so dim sometimes there we are no okay

ها نحن ذا حسنًا، صحيح.

well good right so let's think about

لنفكر في ذلك. هذه البطاقات.

this this dot cards why I want to pick

أريد أن اختار مرجع لكل البطاقات

up a reference to all the cards cuz I'm

لأني متأكد أني سأحتاجهم فيما بعد.

guaranteed I'm gonna want them later on

لذا document.querySelector().

so document query selector all anybody

ألم يسأل أحد أي سؤال مشوق؟

asking any interesting questions over on

حتى الآن، لم نحصل على شيء.

this so far we got nothing we got quiet

الهدوء فقط.

piece and people are watching though

لكن الناس يتابعون بالرغم من ذلك

مرحبًا بالجميع، أهلًا

hello everybody hi thanks for joining us

شكرًا لانضمامكم لنا.

if you're just tuning in because you

إذا كنتم انضممت لنا للتو،

might have been a few minutes behind

ربما قد فاتتكم بعض الدقائق، إننا نتحدث عن البطاقات القابلة للنقل.

we're doing swipeable cards I'm doing

أقوم بكتابة التعليمات البرمجية بينما يدير هو جزء الدردشة

the coding he's doing the chat stuff for

ويحرص على أن تتم مقاطعتي كل حين والآخر

making sure that I get interrupted every so often so I lose my train of thought

حتى أفقد تسلسل أفكارى. تلك هي هديته لي ولكم.

that's his gift to me to you just in

لقد جئتم في الوقت المناسب حيث الجزء الممتع بحق

time for the actual interesting yeah

نعم، لأني قد قمت بالقليل من التصميم.

because I've done a bit of styling you

ترون هنا، تلك هي الكيفية التي يبدو عليها

see over here this is what it looks like

بعض البطاقات يا له من أمر مثير، بعض البطاقات

some cards how exciting some cards but

لكن ما نحتاج فعله كما هو واضح

what we need to do is obviously make

أن نجعل أدائهم كما ينبغي، وكما يقول سورما

them behave properly which is as Surma

إنها الأجزاء الممتعة والمسلية.

says the fun and interesting bits I'm

سأتجه إلى وضع الجهاز المحاكي

actually going to go into the device mode emulator here in dev

هنا في أدوات المطورين، لأن ما أريد فعله

tools because what I want to do is I

أن اشغل-- في الواقع، هل لدينا touch؟

want to switch on actually do we have

نعم لدينا، في الأسفل هنا، أعتقد أن بإمكانك القيام. أم أنها ليست موجودة هناك؟

touch we do under here I think you can do do or is it not in there they move it

لقد نقلوها، لا أعلم إلى أين.

and I don't know where you don't know

لا تعلم إلى أين؟

where okay I'll tell you what I'm gonna

سأخبرك بما سأفعل.

do just ok I could just go for a phone

فقط اذهب إلى هاتف، سيفعلها تلقائيًا.

it will automatically enable it

حسنًا، سأقوم بـ 6p

ok 6p let's do the 6p now at least got

الآن حصل الجميع علىtouch هنا، وهو شيء رائع.

touch yeah right which is cool so that's

good because that's what I wanted so

لأن هذا ما أردته.

normally what I do when I you have been

لذا عادة ما أفعله عندما -- لقد تمت مراجعتك، لأنك تريد querySelectorAll

corrected you want query selector all oh

أوه!، نعم. لقد عثر الجمهور على خطأ.

yeah back god by the audience yeah

نعم، شكرًا يا شباب.

لقد وفر ذلك على الكثير من المتاعب لاحقًا.

that saves me a lot of heartache later on right so I'm gonna do on start

لذا سأقوم بـ onStart لأني فيما بعد سأحتاج إعادة استخدام هؤلاء للـtouch والماوس،

because later on I'm gonna want these to be reused for both touch and mouse I

لذا أريد أن تكون مثل onTouchStart

don't wanna be like on touch start on

onMove، لأني سأكون على onMouse كذلك و onEnd.

move because I'll be on mouse move as well and on end and I know what I'm like

ولأنني أعرف ما أريد

I'm gonna want to defer these with a

سأقوم بتأجيل ذلك مع طلب

requestanimationframe so I'm just gonna

تحريك لهم، سأقوم بتحديث

have an update function here oh why

وظيفة هنا. لماذا لا أستطيع الكتابة اليوم، سورما؟

can't I take today server update I say

أقول أنني اليوم.

today I'm often I just like typos with

في غالب الأحيان، أكون مثل خطأ مطبعي، ملك الأخطاء المطبعية.

king of typos if such a roll existed I

إذا كانت هذه القاعدة موجودة، سأقيم بها.

would inhabit it on start I do this

onStart. أفعل ذلك كثيرًا

quite a lot I rebind these because only

لقد قمت بإعادة ربط هؤلاء، لأن فقط بداخل نظام رد النداءات

inside of their call backs this would

قد يشير ذلك إلى العنصر، الـtarget

refer to the element the target and I

ولا أريد ذلك في الغالب.

don't want that often I want to kind of

أريد نوعًا ما أن ابدأ العمل على الوظيفة،

operate on the function or in this case

أو في هذه الحاله، القئة

the class so I tend to rebind them so

لذا أنتوي أن أقوم بإعادة ربطهم. لذا سأقول this.onStart.

I'll say this dot on start take it from

استمد ذلك من النموذج البدئي، الذي

the prototype which is where this

يكون حيث قد يوجد ذلك، واربطه بالنموذج الحقيقي.

wouldn't exist and bind it to the actual

إنها مجرد تقطة ضعف في الكيفية التي أقوم فيها بكتابة التعليمات البرمجية.

instance it's just the foible of how I do wanna code advanced j/s trickery and

حيلة متقدمة من الـ js ليس كذلك بالضبط.

it's not really it's just how we roll

الأمر يتعلق فقط بكيفية قيامنا بذلك. حسنًا، لقد حصلنا على ذلك.

alright so we got that update as well

أريد أن أقوم بالتحديث كذلك، this.update=this

this the updates equals this stuff

.update.bind(this).

update stop bind this there we are

ها نحن رائع. لذا سيتم تقييد كل ذلك بالنموذج الحقيقي،

awesome so these are all be bound to an

وأنا متأكد أني سأريد فعل ذلك

instance and I guaranteed I'm gonna want

و addEventListeners

to do that and add event listeners I

أميل إلى القيام بذلك النمط كذلك، حيث يكون لزامًا علىّ

tend to do this pattern as well where I basically normally have a remove event

عادةً أن أمسح eventListeners

list is an add event listeners as well

وأضيف eventListeners كذلك، وحتى أستطيع

so that I can just do that all in one

القيام بذلك في مكان واحد. لذا سأكتب document

place so I'll say document ID also when

عندما أقوم بأشياء مثل هذه،

I'm doing stuff like this

دائمًا ألمس الـdocument أكثر من الشيء

I always attach the document rather than

الذي أحركه، لأني غالبًا سأريد إلى القيام بنوع من الانتداب

the thing that I'm moving because often I want to kind of delegate it and have

ولدي مستمع واحد لدرجة أني قد أقوم بخروج مبكر منه.

just one listen to that I do an early exit from

إذا لم يكن الفعل الصائب.

if it wasn't the right thing but

لكن كل شخص مختلف عن الآخر قليلًا

everyone is like this everyone's a bit

كل شخص مختلف عن الآخر قليلًا

different and document.addeventlistener

و،document.addEventListener ('touchstart'). this.onStart. Document.addEven tListener('touchmove').

to start this the on start document move

أقصد، تلك هي الفكرة.

amia that's the point usually you don't

في العادة أنت لا تستمع إلى فاعلية واحدة،

listen to one event you have like a

بل يكون لديك مجموعة كاملة تحتاج إلى ربطها.

whole collection of things you need to

ذلك نوعًا ما لطيف أن تكون لديك وظيفة تحتوي

banker that's kind of nice to have a function that contains all the binding

على كل إجراءات الربط تلك.

actions yes exactly I like how you're

نعم، بالظبط. يعجبني كيف أنك صوت العقل وسط هذا.

the voice of reason in a monster because

لأني أحاول التحدث وصياغة الرموز والتفكير،

I'm trying to talk and code and think

ويمكنني القيام شيء واحد فقط منهم.

I'm I can only at least do one of them

وعادة ولا واحدة منهم.

and normally none of them so so that's

لذا ذلك جيد، لنرى.

fine so let's see no it's a touch move

الآن، إنها touchmove بالتالي touchstart،

so it touch starts we're gonna have to

سيكون علينا القيام بـ event.preventDefault here.

do event up prevent default here because

وإلا سيحدث تخفيض في السرعة.

otherwise we get throttled back and

وسنحتاج الحصول عليهم جميعًا. أوه!، نعم، حسنًا لذا، إذا event.target.-- سيكون هذا مخرجي الأولي.

we're going to want to get all of those oh yeah okay so if event dot target dot

classList.contains('card').

this will be my early exit class list that contains card yeah so if it doesn't

نعم، إذا لم يحدث، عد أدراجك. لذا نحن فقط-- Console، لنتحقق من كيفية سير العمل

return so we only then console let's

just check that works card so mmm-hmm

لم يفلح ذلك.

that didn't work why do they not work

لماذا لم يفلح ذلك؟ حسنًا. لنقم بـ console.log.

mmm okay let's do console dot log

ها نحن ذا

there we go that didn't work

لم يفلح ذلك. حسنًا، أوه!، لأني لم استدعي addEventListeners

all right because I didn't call

ذلك ما كنت على وشك قوله.

adamantly there you go Oh also we just

أيضًا، علينا أن نسأل لماذا querySelector وليس

got to ask why query selector and not

getElementsByClassName

get elements by class name and I think

وأعتقد أن ذلك مسألة رأي

that's really more a question of taste

أكثر من أي شيء آخر.

than anything else yeah it might be a

قد تكون أكثر كفاءة في العمل كبرمجية

little bit more performant to use get

getElementsByClassName, لأنك لا تحتاج

elements by classmen because you don't

لتحليل الـCSS المحدد.

need to parse the CSS selector at a park

لكن بعيدًا عن ذلك--

violin I wouldn't bet against any of the

لن أراهن ضد البائعين،

vendors any of the browsers at this

و أي من المتصفحات في هذه المرحلة

point on that topic you know that is a

على ذلك الموضوع ذلك قرار جيد.

good call because you could probably

لأن هناك احتمال أن تواجه حالة

find one situation where one's faster

تجد فيها أحدهم أسرع من الأخر.

than the other I think oh yeah I'd say

أعتقد أني قد أقول أن هذا مجرد شيء مناسب.

this is just a convenience thing and I

اتفق معك.

agree if you did anything else you'd be

إذا قمت بأي تصرف آخر، سيكون مثل أن تحصل على قياس أداء صغير

like you just got possibly a micro

في المقدمة.

benchmarking head

بالنسبة لي فإني أفضل، فقط أفضل،

personally I prefer just preferred the

الصياغة الموجزة جدًا لمحددات CSS

very terse syntax of CSS selectors we

حيثما تكون علامة # هي بطاقة الهوية والنقطة هي الفئة

know a hash tag is an ID yeah got period

إنها تناسبني نوعًا ما.

is a class I kind of wish me but this

هذا قد يتناسب مع الحالة أيضًا

would work in the situation as well so

إنك على حق، حصلنا على بطاقة.

right we've got a card if I tap outside

إذا نقرت بعيدًا عنها، هل سنجح ذلك في العمل هنا؟

it is that gonna work down here yes sir

touch event is there but only that one

الفاعلية هناك، لكن هناك واحدة فقط تسجل البطاقة.

registers the card you should zoom in on

ينبغي أن تقوم بتقريب الصورة على أدوات المطور

the dev tools I'm gonna zoom in on the

سأقوم بذلك. إنها لا تسمح لي-- ها نحن ذا

dev tools it doesn't want me there we go so let's do that again

إذًا لنفعل ذلك مجددًا. لنحصل على بطاقة

that's got a card down there not a card

في الأسفل هناك-- لا توجد بطاقة. بطاقة، لا بطاقة.

God not card God not card we know we've

بطاقة، لا بطاقة. نعلم أننا قد حصلنا على بطاقة.

got a car that's golden Paul thank you

أحسنت، بول

all done thank you

شكرًا لك. أحسنت شكرًا لك.

right so we know we got that so what

حسنًا إذا نعلم أننا حصلنا على ذلك.

I'll do is I want to keep a reference to

لذا ما سأفعله أني أريد الحفاظ

whichever card we've got so I'll call

على مرجع لأي بطاقة حصلنا عليها.

that target I'll initialize that to null

لذا سأسمي ذلك target. سأستهل ذلك بـnull وسأكتب ذلك onStart

and I'm gonna say on start so if we've

حتى لو تمكنا من تجاوز ذلك، نستطيع

got past this we can say that we know

أن نقول أننا نعرف ذلك إنه event.target

that it's event target and that's good

وذلك أمر جيد.

and I think what we can do is we can

وأعتقد أن ما نستطيع القيام به أن نتتبع أيضًا الـ--

also track the we want to track the

لأننا نريد تتبع الموقع x لنكتب هذا .startX=0

exposition so let's say this dot starts x equals zero

وسنقوم بالـ x الحالي كذلك،

and we'll do the current X as well which

وهو ما سنجعله محدثًا دائمًا.

will be what we keep up-to-date

سأوضح ما أقول في الحال.

I'll explain myself in a moment my

أفكاري تسبق شرحي.

thoughts are ahead of my explanation

right what we want to do is we want to

ما تريد فعله أنك تريد أن تكتب evt.pageX، و evt.touches zero.pageX

say EVT dot page X or EBT duck touches 0 dot page X so we know where we've

حتى نعلم أين بدأت، لأن ما نريد القيام به

started because what we want to do is

هو تحريك البطاقة بقدر محدد كل مرة،

we'll want to move the card and I'm absolutely mount each time

من مكان نقطة البداية المحدد.

from the market starting position so we

يمكننا أن نبدأ بكتابة الـcurrentX هو بلا شك

can start by saying well the current X

is definitely the start X because we

لأننا في البداية؟

haven't on start yeah it's good stuff

نعم لأننا سنذهب إلى onStart لكن، خلال ذلك، onMove، لكن سنكتب أن الـcurrentX هوذلك.

but during this on move we can say the current X is now that and all we want to

ونريد أن نكتب، إذا لم نحصل على target, نعود. وفي onEnd إذا لم نحصل على target،

say if we've not got a target return return and on end if we're not going to

سنريد أن نعود إلى هناك أيضًا. حتى لا يزعجنا أي شيء.

target we want to return there too so that we don't bother with anything so

لنرى هذا.

let's say you so we've got start X got a

لدينا startX و currentX.

current X and T what we'll do is we'll

وسأخبركم بما سنفعله، سنستدعي-- لا،

just call and are we don't to call to

لا نحتاج لذلك. سأخبركم بما سنفعله، ما سأفعله.

all them I'm going to do I'm gonna do go

سأدخل في حلقة دائمة.

into a permanent loop so once they

لذا، لا أريد أن اكتب حلقة دائمة.

permanent loop I mean normally and I

أقصد في العادة، وربما يكون لدي وقت للقيام بذلك،

might get time to do this depending on

يعتمد ذلك على كيف ستسير الأمور.

how the everything goes normally I

عادة، لم أكن لأدخل شيء مثل هذا

wouldn't just go into like this kind of

النوع من permanent request animation frameloop

permanent requestanimationframe loop for

something like this I'd do it for as

قد أقوم بذلك من أجل، بمجرد ان تبدأ الوخز

soon as you start touching that start

وتبدأ في إطار حلقة تحريك الرسوم

the animation frame looping and then

وبعدها عندما تنتهي من تحريك رسومها،

when it finishes its animation either

إما أن ترفض، أو يعاد التعيين إلى المنتصف.

dismisses or resets back to the middle I

قد أقتل إطار تحريك الرسوم فيما بعد.

would then kill the animation frame but

لكن في هذه الحالة لتكون أكثر ملائمة،

in this case just for convenience I'm

سأستمر فقط في فعل ذلك.

just going to keep going and do this

هذا يعني سنكون دائمًا

means that we will always be in sync

في تزامن مع الإطارات، دون أن ننسى إعادة الوضع؟

with the frames and not miss repositioning yes that's the one right

نعم ذلك ما نبحث عنه.

so in here what I'm gonna do is I'm

حسنًا، لذا هنا، ما سأفعله سأقول--

gonna say shouldn't you'll be saying if

ألا يفترض أن تقول، إذا لم يكن هذاtarget؟ نعم

not this target hmm yeah yeah was that

ماذا-- هل كان ذلك أنت؟

from the was that used it was me but

إنه انا، لكن أحدهم قال ذلك في الدردشة

it's someone just said in the chat as

well so you can claim it though because

إذًا يمكن أن تنسبها لنفسك رغم ذلك، لأنهم لا يستطيعوا أن يروا.

they can't see so you can claim that and

إذًا يمكن أن تنسبها لنفسك. ويمكنك أن تكون مثل، أوه!--

you know and ah sorry I'm a source mod I

إنني ذكي جدًا. لقد رأيتها لاحقًا const

saw it after Const let's see like screen

لنرى، مثل screenX سنطلق عليها ذلك الـ currentX، ناقص الـstartX،

X call it that is their current X minus the start X and then we can say this dot

وبعدئذ نستطيع أن نقول this.target--

target in fact we will want to do if

في الحقيقة، ما نريد فعله.

this is going to run from the start let

إذا كان ذلك سيعمل من البداية، سنحتاج أن نقول إذا لم يكن هنا target، return

me say if there's no target return all

بإمكاننا فعل style.transform equals، ثم سأقوم

so we can do is style Duck transform equals and then I'm going to do

بـtranslate x، ثم stream x إلى px, bop.

translate X and then do stream X px but

أترى ماذا حدث.

see what happens

لا شيء لماذا لم يفعل شيء؟

nothing I do nothing it's doing nothing

إنه لا يفعل شيء، ذلك سيء.

that's not good all right let's find out

حسنًا، لنكتشف لماذا. حسنًا ذلك سينطلق هناك

why well that's kind of fun what every

كل إطار ذلك هو السبب، لأننا نطلقه وستخرج مبكرًا،

frame that's why because we fire it and

لكنها لا تطلب الإطار القادم مرحبًا، ها نحن ذا.

it early exits but it doesn't request the next frame there we go so we've got

إذًا حصلنا على شيء متحرك بالفعل،

something actually animates which is

وهو أمر عظيم لنلقى نظرة

brilliant let's have a look what I want

ما أريد فعله هو فحص الـpainting

to do is I want to check the painting so

لذا إنه، نعم، هذا ما اعتقدت أنه سيحدث

it's yeah this is why I thought was going to happen right every time we move

في كل مرة نتحرك، فإننا نحدث التحول

we just update the transform and that

وذلك يعني أن هذا في حد ذاته

means that we this by itself doesn't

غير مؤهل لحياته الخاصة.

qualify for its own way if we show layer

تبين لنا من أوامر المختبر.

borders there's no orange box around

أنه لا يوجد صندوق برتقالي حول هذا، أليس كذلك؟

this right and we love our orange boxes

ونحن نحب صناديقنا البرتقالية

lavera especially if it's on those got a

خاصة من أجل شيء

transform we won that to have its own

سيتحول، نريد أن يحصل على صندوقه البرتقالي الخاص

Orange Box so here's what we'll do is on

إذا هذا ما سنقوم به، onStart،

star if we've got ourselves a target we

إذا كنا قد حصلنا لأنفسنا على target،سنقول، this.target.style.willChange =transform

will say this dot target dot style that will change equals transform and that

وذلك سيمنحها طبقتها الخاصة.

will give it its own layer and we could

ويمكننا فعل ذلك مع كل واحدة--

do it for every single way just do it in

لماذا لا تقوم بذلك مع الأساليب، مع ذلك؟

this style today right because if I have

حسنًا، لأنه إذا كان لدي ألف بطاقة، عندها

a thousand cards then I'm going to

سيكون على أن أصنع ألف طبقة.

create a thousand layers good point so

ملاحظة جيدة. إذا بإمكانك بالتأكيد وضع هذا في الـCSS،

you could definitely put this in the CSS

لكني قد أقول--

but I would say so you're just promoting

إنك تقوم بترقيتها مرة واحدة فيtouch event

it at the touch even once there yeah

ثم بينما الـtouch يعمل،

touch is going on your Kita's only on

تبقيها في طبقتها الخاصة بعد ذلك

afterwards yeah and this would be

نعم، وذلك سيكون شيئًا

something I'd keep an eye on if I felt

قد أبقيه تحت الملاحظة. إذا شعرت أن هذا قد يصبح مشكلة

like this was becoming an issue when you

عندما تنقر عل الهاتف النقال، خاصة، إذا استغرق الأمر فترة

tap on mobile particularly if it took a

قبل أن تحصل على الطبقة الجديدة،

while before you got that new layer then

عندها قد أفكر فيما قبل الترقية

I would consider pre promoting the ones

للأشياء التي على الشاشة.

that are on screen kind of make sense

ذلك منطقي. لكن في هذه المرحلة هذا سيكون--

but at this point this will be it was

ذلك يكون، مثل، النسخة الثانية من ميزة.

like a version to kind of feature right

so now all being well you can see it's

لذا الآن، كل شيء يعمل جيدًا، يمكنك أن ترى

got its own layer there because we soon

أنه حصل على طبقته هناك

as I tap on it it gets its own layer and

لأن بمجرد أن أضغط عليه، يحصل على طبقته الخاصة.

you can see now we're not painting at

ويمكنك رؤية بعضهم الآن، إننا لا painting على الإطلاق.

all all right and that is important

وذلك مهم، بسبب الأداء.

because performance yeah it is called

إنه يدعى Supercharged، إذًا الفكرة في

supercharged Sarlacc losing

الاسم، يا صديقي.

yeah so we'll move that there we go

نعم، سنحرك ذلك، وها نحن ذا.

الآن، إذا، لنرى. On end، أوه!، ما الذي تريد فعله؟

if let's see on end Oh what do we want to do what do we want to see I think you

اعتقد أنك تريد إعادة وضع target

want to unset target no i don't i

لا، لا أريد، بالفعل لا أريد لأن هذا التحديث يتطلب أن يتواجد الـtarget أليس كذلك؟

actually don't because this this update requires that the target exists right if

إذا لم تحصل على target سيكون ذلك خروجًا مبكرًا.

it's got no target this will early exit

لكن عندما نتركه يذهب، ربما نحتاج

but when we let go we might want to

أن تنزلق للمنتصف

slide out in the middle so i'm gonna

نعم، حسنًا

break okay what i'm gonna do is i'm

حسنًا، ما أريد فعله سأقول، سأشغل هذا،

going to say i'm going to turn turn this

لأني أعلم أين سيذهب ذلك

gonna know where this is gonna go this

سيذهب هذا إلى السهل، أسهل نسخة في العالم.

is going to go to the ez easing version

ها نحن ذا. صحيح

of the world here we go right if this

If this.draggingCard-- نعم، حسنًا، لنكتبها كذلك.

dot dragging card yeah okay let's call

نعم، جيد.

it that yeah fine I know right

أعلم، أليس صحيح؟

let's see so at this point we're gonna

لنرى، لذا في هذه المرحلة سنقول أنك لن تسحب البطاقة

say you're not dragging the card but on

لكن في البداية، سنقول أنك تسحب البطاقة

start we will say that you are dragging the card and we know definitely that we

ونعلم بالقطع النهاية هنا،

at the end here you're not dragging the

أنك لن تسحب البطاقة مرة أخرى.

card anymore so that's okay that's all

لذا هذا جيد، ذلك هو كل العمل

working what WIA working as intended

WIA العمل كما هو منشود حسنًا، إذا كنت تسحب هذا

right if you're dragging this this will

سيحتاج ذلك لأن يصبح this.screenX.

need to become they start screen X so

سنقوم بـ this.screenX equals zero

we'll do this that screen x equals zero

هذا جيد. لذا ما نريد القيام به هو، لذا هذا يفترض أنه لا يزال يعمل

this is fine so what we want to do is so

يبدو كل شيء على ما يرام،

this should still work all being well

نعم، إنه كذلك

they should still work yeah it does when

عندما نتركه، نريد أن نقول this.screenX plus equals--

we let go we want to say this dot screen X plus equals so this is the you've come

لذا هذا هو، لقد صادفت هذا الموسم

across this season before this is where

من قبل، هذا حيث تريد أن تكون بالسالب

you want to be - where you are all over

حين تتجاوز بعض القيم

some value and it basically eases slows

وإنها ببساطة تسهل وتبطأ طول الوقت

down over time so that's cool

لذا ذلك شيء رائع لذا سأكتب zero لأن ذلك هو المكان

so we'll do 0 because we that's what we

الذي نريد أن نكون فيه، minus this، لكل العشرة

want to be - this all over 10 and I'll

وسأضع ذلك في--

put that in parenthesis porins

بين قوسين أقواس تقويم، هكذا أسميهم.

brackets and I call them and sorry

لذا بدأتها to zero هل بدأتها to zero؟

initialized it to 0 - lies it to 0 I did

لقد فعلت لقد سؤلنا إذا ما كان عليك إعادة تعيين

we have been asked if you should reset a

كل التغيير عندما ننتهي.

will change when we're done yes

نعم، نعم.

yeah so the moment everything see

لذا في الوقت الحالي، نرى كل شيء في الوقت الراهن

actually at the moment that everything

يحدث. يتم ترقية البطاقة، وما أفعله هو

gets promoted or get the card gets

أن أنتظر حتى تنتهي تلك الحركة

promoted and what I'd do is I'd wait until this animation finished like that

مثل تلك الشريحة في النهاية. سأتخلص من ذلك. حسنًا

slide in at the end I'd get rid of that mm-hmm okay but for

لكن في الوقت الحالي، لأن في الأساس،

now because basically I need to detect

أحتاج أن أكتشف متى سينتهي ذلك،

when that's finished and then I'll get

ثم أتخلص منه هناك

rid of it there that makes sense

يبدو ذلك معقولًا.

but little but that's me adding the

ذلك الصغير

sound effect it doesn't actually do that

هذا أنا أضيف مؤثر صوتي إنه فعليًا لا يفعل ذلك إنها ميزة قادمة

it's an upcoming feature then yeah it's

نعم، إنها ميزة قادمة

an upcoming feature um okay so the

حسنًا، ستحرك screenX نفسها باتجاه الوسط.

screen X is going to move itself back to

مع ذلك، هل هناك شيء أخر تود فعله؟

the middle however what else do you want

أعتقد أنه ينبغي عليك من أجل التنفيذ،

to do well I think you need to implement

أن تتخطى مرحلة تحريك البطاقة الصعبة.

like the hump that you have to move the card over so it continues going out and

حتى يظل متوقف ويتم إزالته بعد ذلك، أليس كذلك؟

it's being removed afterward okay all

صحيح، إذا في تلك حالة،

right all right all right so in which

قد أقوم بذلك تجاه هذا.

case the way I would do that is this

سنحتاج أن نعرف this.targetBCR،

right we're going to need to know this dot target BC bonding client rec I'm

bounding client rect.

going to take take some measurements of

سآخذ بعض مقاسات الـtarget عندما

the target when we first pick it up so

نلتقطه أولًا. إذا في البداية، هذا الهدف هو أن،

on start this target that is this dot

و this.target.getB oundingClientRect().

target don't get bounding client and in

وفي حالة إذا كان هناك من لا يعرف،

case someone doesn't know target get

يحصل target على bounding client rect والذي يعد

bounding client rect is a particularly

عملية مكلفة على وجه التحديد.

expensive operation so it's good to do

لذا من الجيد أن تقوم بها مرة واحدة، وليس مع كل إطار أو غيره.

it once but not every framers and that's

ذلك هو السبب وراء قيامنا بذلك في البداية وليس مع عمل التحديث.

why we do it on start and not in that date function yeah what I do every time

نعم، لا نريد أن نقوم بذلك كل مرة.

but though you it basically uses that

لكنها بشكل أساسي تستخدم معلومات النسق

layout information that the browser's

الموجودة في المتصفح بالفعل.

already has so you can call it the start

إذا يمكنك استدعائها في بداية الإطار،

of a frame and it would be cheaper there

وستكون أرخص هناك، لكنك محق.

but you're right

ليس لدينا سبب يجعلنا نقوم بذلك

and there's no reason for us to do this

لا تغير البطاقة أبعادها.

doesn't change its then know exactly it

لا، بالظبط، إنها لا تغير أبعادها.

doesn't change dimensions that's all we

هذا كل ما نحتاجه منها.

actually wonderful you could use offset

بإمكانك استخدام عرض وطول معادلين،

width and offset height I just prefer

أفضل هذا فقط لأني أسترد شيء معهم كلهم

this because I get an object back with them all in rather than like a separate

بدلاً من أشياء منفصلة.

thing but you could be like you know

لكن يمكنك أن تكون مثل، أنت تعلم، offsetWidth وتضع ذلك كأنه جديدي. لكني لن أفعل ذلك.

offset but I'm not going to do that so

لذا ما نريد القيام به، لنرى.

what we need to do is let's see so be on

لنكن في النهاية، أعتقد.

نعم، حسنًا

mmm yep okay so that we're assuming that

لذا سنفترض أنك تريد الرجوع إلى الصفر هنا،

you want to go back to the zero here but

لكن ربما لا تريد أن تعود إلى الصفر،

you might want to go back to zero you

ربما تريد أن تذهب إلى مكان أخر

might want to go to somewhere else and

وسنقرر ذلك في مرحلة on-end

we're going to decide that in the on end

سنقوم بذلك هنا إذا الـ-- صحيح

we'll do that here if right target VCR

targetBCR.width.

width so we need to know how far you've

إذا نريد أن نعلم إلى أي مدى ابتعدت

moved so let's say we're going to repeat

إذا لنقل أننا سنكرر أنفسنا قليلًا.

ourselves a little bit so all though is

إذا ما سنقوم به عندما تطلق سراح، سنقول الـ-- أوه!،

when you release we'll say the all

ممتع علينا أن نسحب ذلك

interesting we need to grab this so

إذا سنسحب ذلك مرة اخرى، سنقوم بتحديث ذلك،

we'll grab this again so we'll update this and we'll say

وسنقول، بلا بلا بلا

problem R and if the math that abs

وإذا الـ Math.abs of screenX.

screen X so if you're negative or

لذا إذا كنت سلبي أو إيجابي

positive we just want to know how far so

نريد أن نعرف إلى أي مدى.

we just want the kind of absolute value

إذًا نريد فقط نوعًا ما القيمة المطلقة.

some people like to do screen X they do

بعض الأشخاص يفضلون القيام بـscreenX إنه يفضلون بالتأكيد، مقياس ثنائي أو مع 0،

like modulo now a binary or with zero

وذلك على ما يبدو المعادل لـ--

that's equivalent parameter ah the the

أوه!، مستوى اختراق bit لـ--

bit level hackery - yeah I just use math

نعم، استخدم فقط Math.abs لأني استطيع فيما بعد--

uh because then I can I prefer the more

أفضل النسخة الأكثر تعبيرًا أيضًا

expressed as a present version because

لأني سأقرأها في خلال ستة أشهر،

if I read in six months I'd be like Paul

سأكون مثل، بول، ماذا تفعل؟

what you do you don't make any more

إنك لم تعد تبدو منطقيًا. مثل، by 0.4

sense like by not point four so if

لذا إذا ذهبت لأبعد من 4/10 من العرض، 2/5 من عرض،

you've got more than four tenths of the width two fifths of the width then we'll

سنأخذ ذلك في الاعتبار

consider that one that's completely at

ذلك عشوائيًا تمامًا.

random I haven't I'm just guessing

إنني فقط أخمن.

so that's a constant you could move it

لذا إذا كان ثابتًا،

to the top of the class and something

بإمكانك نقله إلى مكان أعلى في الفئة ونحو ذلك. لكن في الوقت الحالي--

middle and for now for now no we don't

في الوقت الحالي، لا. لن نقوم بذلك.

know no why would I do that

لا، لا. لماذا قد أفعل ذلك؟

so what we need to do is we need to do

لذا ما نحتاج لفعله هو this.targetX،

this dot target X which is gonna be

والذي سيكون حيث سنود بالفعل.

where we're gonna actually aim to send

لإرسال البطاقة. وسنقول أننا نفترض أنك

the card and we will say that we assume

تريد أن تعود للمنتصف.

that you want to go back to the middle

لذا، في الواقع، ينبغي لذلك أن يظل يعمل

so in fact this should still work if I

إذا احتجت إلى تهيئة الأمر هنا، أليس كذلك؟

need to initialize it up here don't I

yeah so this should work still and

لذا ينبغي أن يظل هذا صالحًا. لا pageX عير محددة

doesn't page X of undefined okay oh yes

حسنًا، أوه! نعم. لأنه من المضحك أنك عندما تكون on end في الفاعلية،

because that's fully enough when you on end in the event there's the there is a

لا يكون هناك touches بل شيء أخر

not a touches there's something else is

هناك-- دعوني اكتشف ما هو

let me find out what it is

لكنه لا يشبه الأخرين.

but it's not the same as the others

وهذا عندما يأتي قانون وحدة

something I know that's when the good

التحكم المفيد للمساعدة--

old console.log comes in to help with it

أعلم، بعض الأشخاص يفضلون المصحح

you know some people like debugger and

وأشياء مثل ذلك--

stuff uh now we don't really good

لا، لا نفضل ذلك.

touches yeah so that's the thing there

نعم، إذا هذا ما أقصده. هناك أشياء تضعها في محل تساؤل لتكتشف ما الذي تغير،

is something that you come query to find out what changed if that makes sense

إذا كان يبدو منطقيًا.

don't I'm gonna assume that the last

سأفترض أن أخر قيمة معلومة من

known value from the on move is good

الـon move جيدة بما يكفى في تلك المرحلة

enough at this point never be fine yeah

ذلك سيكون جيدًا.

you should be fine

نعم، أعتقد أنه سيؤدي الغرض

and even if it's not it'll be fun so

وحتى لو لم يفعل، لن تكون مشكلة.

that goes back to the middle so now

إذا سيرجع ذلك إلى المنتصف.

we're just deciding to actually send it

إذًا فقد قررنا للتو أن نرسله إلى

off to the left or to the right so we

اليسار أو اليمين. لذا يمكننا الاكتفاء بذلك، إذا تخطيت ذلك،

can do that with if you're over that

سنحدد الـtarget ليكون screenX أقل من 0

we're going to set the target to be mmm green X is less than zero so Ananse deal

أو لا، إنه لا يزال هناك.

over there if you're over zero we want

إذا تخطيت 0، سنريد أن نرسلك--

to send you and I know what I'm gonna do

وسأعرف ما أريد عمله في خلال دقيقة

in a minute I think I'm gonna make it

سأجعلها تتلاشى. يبدو ذلك معقولًا. نعم، لنفعل ذلك.

fade out that seemed sensible yeah so so

لذا إذا تجاوزت هناك، boop، نعم يمكنك الذهاب في ذلك الطريق بعدئذ.

let's do that so if you go past there OOP yeah I think you know a little but

أوه!، حسنًا إنه أمر ممتع.

okay that's interesting

إنه بعيد إلى حد ما، أليس كذلك؟

it's quite far isn't it she does that

يبدو أني سأحتاج أن ابتعد أكثر،

you have to go here are so I'm

سأجعل ذلك يصل إلى، 0.25 مثلًا.

going to make that down to like not point two five yeah it seems good I'm

نعم، يبدو ذلك جيدًا

gonna switch off this cuz this I don't

سأغلق هذا، لأني لم أعد احتاجه.

need this anymore yeah that feels and

نعم، ذلك يبدو-- وبعدئذ إذا لم تذهب بعيدًا بما يكفي.

then if you don't go far enough mmm don't like it gonna say about three

لم تعجبني. سأجعلها أقل بما يعادل 0.35. عد المحاولات، ها نحن ذا.

five number fishing there we go that

يبدو ذلك أفضل.

القيم الفريدة التي لا تخطأ هي أفضل الأرقام.

yeah if you do if I had you Clippers our

best numbers yeah I know right

أعلم، صحيح؟ إذًا كيف-- أوه!، سأخبرك ما نستطيع فعله.

so how oh I tell you what we can do we

نستطيع، لأننا حصلنا على العرض هنا من target BCR.

can because we've got the width up here and we from the target BC art so we can

لذا يمكننا في الأساس أن نقول this.screenX على طول العرض،

basically say this dots green X mm over that over the width and that would

وذلك قد يجعل الأمر طبيعيًا الآن. لذا نستطيع بعدها أن نقول-- أن، في الحقيقة، يمكن أن تكون const،

normalize us now so we can then say if I

أيمكن ذلك؟ Opacity equals سالب واحد، ثم، كالـ screenX

could be a constant opacity equals one minus and then as you sow the screen X

تبلغ العرض، ينبغي أن تكون واحد.

hits the width that should be easy it should be one so this would be so that's

لذا ذلك قد يكون-- يخبرنا الكسر أي كسر من البطاقة

what fraction off the card is still

لا يزال ظاهر على الشاشة.

visible on screen kind of is how much

نوعًا ما. إنها ما المقدار، نعم.

how much yeah yeah yeah and we turned

أو ما المقدار، نعم. ونحول ذلك إلى كثافة، لذا عندما

that into opacity you know when it

تصل إلى نقطة نهاية، ستكون

reaches at the end point it's going to

شفافة تمامًا، شبه شفاف.

be completely transparent translucent

أيًا كانت الكلمة المناسبة.

what's the one whatever the word is

ذلك كل شيء بالنسبة لذلك.

that's all of that opacity right style

الكثافة، صحيح. النمط الذي يحدد الكثافة هو الكثافة، إذا ذلك لم ينجح

target opacity is the past thing so that

ذلك محبط.

didn't work that's depressing

there it is okay so you can see how it

حسنًا، إذا يمكنك أن ترى كيف أصبحت شفافة، تعود للداخل.

goes transparent comes back in oh yeah I

أوه!، نعم.

think it'll tear absolute oh yeah it's

أعتقد أنك بالتأكيد- أوه!، نعم. إنها ليست-- Math.abs مرة أخرى.

that master abs again so what I'm gonna

أتعلم سأفعل كذلك في خلال لحظات؟

do as well in a moment you see how it's

أترى كيف أصبحت تبدو خطية إلى حد ما، أليس كذلك؟

got quite a linear feel right yeah yeah

نعم. نعم، حسنًا--

well you might want to curve it a little

ربما تحتاج أن تجعلها كالمنحنى قليلًا.

bit yeah so what I'm gonna do is I'm

نعم. إذا ما سأقوم به هو أني

gonna do I'm gonna call that Const

سأسمي ذلك const تسوية.

normalized how's everybody doing on the

كيف حال جميع من في الدردشة؟ إنهم بخير.

chat they're fine no good right now they

هل هم بخير؟ لا يبدو أن لديهم أسئلة في الوقت الحالي.

don't seem to have any questions but if

لكن إذا كان لديكم أي-- يمكنكم أن تسألوا

you have any you can ask as I say that

وبينما أقول ذلك، هل سننشر الـcode بعد ذلك؟

will we publish the code afterwards yes

نعم، سنفعل. نعم.

this yes we will yes of the last code

أخر بث مباشر،تم رفع الـcode على GitHub.

the last code the last live stream the code went up onto github on his github

وهو github.com/googlechrome،

comm slash Google Chrome and I get you

ربما يمكنك الحصول عليه وتضعه في--

maybe get you to find this and shove it

نعم، سأضعه في الدردشة.

in yes I'll put it in the chat yeah

سنفعل أيضًا--

sorry sorry Dave

لكنه git-- أسف، يا رجل.

yeah hope calm such Google Chrome slash

github.com/googl echrome/uielementsamples,

UI element samples I think that's - its

أعتقد أن هذا يوصّل.

نعم، هذا صحيح.

you're right so that is kind of good the

إذا لقد حصل ذلك على عنصر الـ zoomer الخاص بالصور هناك.

image Zoomer in there which incidentally

الذي، بالصدفة، استخدمه Adios Mana في تطبيق صوره

addy Osmani used in his smaller pictures

الصغيرة.

up so if you actually want to see in a

لذا إذا كنت تريد رؤيته بالفعل من خلال مضمون إنتاجي أكثر، بإمكانك رؤيته.

in a sort of a more production context you can actually see he you know sort of

أنا وهو بصورة ما أوردناه في ذلك التطبيق

threw it into that after the last

بعد البث المباشر الأخير.

livestream so what we'll do with the

لا أعلم ماذا سنفعل مع البطاقات اليوم، لكن علي كل حال.

cards today but anyway so no statistic

سورما قام بنشرها، إذًا ذلك جيد.

you say was posted it so that's good

لكن على كل حال، نعود للنقطة التي كنا عندها

right anyway back to where we were so

إذا لقد بتسوية مسافة السحب

I've got normalized drug distance so

لذا ما أريد أن أفعله بدلًا من واحد سالب واحد، ما سأفعله

what I'm gonna do is instead of one minus one what I'll do is if I do math

إذا قمت Math.pow، ولنقل إذا قمت بتربيعها.

dot pow-pow and let's say if I squared

بعدئذ إذا كانت عند 0.5، ستصبح في الحقيقة 0.25

it then if it was at naught point five you'll be actually you become not point

وبالتالي ستأخذ واحد سالب 0.25، إذًا

two five so take one - not point two

ستمنحها نوعًا ما منحنى مثل ذلك.

five so you're gonna give it this kind of curve like the parabola curve the

منحنى القطع المتكافئة.

probability exactly and the stronger the

منحنى القطع المتكافئة، بالظبط.

power the more it's kind of going to go

وكلما كانت الطاقة قوية كلما ستصبح تختفي فجأة مثل ذلك، والذي قد يكون جيدًا.

from that which would be nice in fact

في الواقع، لنقم بها كرباعية؟ لا، اجعلها مكعبة.

let's do it like two quad no Q and and

وعندئذ بإمكانك رؤيتها تستمر، وتستمر،

then you see it hold it hold and it

وتستمر، حتى تصل إلى النهاية هناك، أترى؟

holds and it goes just at the end AC so

لذا إنها الآن تستمر وتستمر وتستمر،

now it holds and hold and hold and it

أستطيع القول إنها تبدو أفضل قليلًا، حسنًا، إذا بالفعل الآن، لدينا شيئًا-- نعم.

just looks a little bit nicer I'd say right so we have so actually now we have something that yeah the only thing I

الشيء الوحيد الذي لايعجبني هو أن،

don't like is that that's not going fast

أن الأمر لا يحدث بسرعة كافية.

enough so I divide by four it should be

إذًا إذا قسمتهم على أربعة، يفترض أن تكون أسرع قليلًا. ها نحن ذا.

a little bit faster there you go yep

there are all right how are we doing one

ما هو وضعنا؟

else do we need - oh yeah when you get

ماذا نحتاج أيضًا-- أوه! نعم. عندما تتخلص من واحدة، نحتاج لأن نحول المجموعة الباقية، أليس كذلك؟

rid of one we need the rest of shunt up

ونبعدها عن الطريق. في الواقع، أتعلم شيئًا؟

don't weigh in and get it out of the way oh actually you know what I want to say

أريد أن أقول-- إذا حصلنا على target،

because we if we've got a target right

عندها لن نريد بطاقة أخرى أن تعمل بعد.

then we don't want another card kicking in yet we kind of want to deal with one

نحن نوعًا نريد أن نتعامل مع كل واحدة على حدة.

before the next one kicks in that makes

يبدو ذلك معقولًا.

sense because what we're going to do is

لأن ما سنفعله أننا عندما نحركهم إلى الأعلى، فنحن نوعًا ما نريد

when we move the mob we kind of won that

لتلك الحركة أن تكتمل قبل أن نسمح بتفاعلات

animation to have completed before we

مرة أخرى.

allow interactions again so this now

لذا هذا الآن يصبح مهم بالنسبة لي

becomes important for me to figure out

لاكتشف كيف يمكنني إطلاق الـtarget

how to actually release the target back

okay let me see so well I tell you what

دعنى ارى. حسنًا، سأخبرك بما يمكننا فعله، إذا كنا لن نقوم بالسحب بعد الآن،

we can do is if not dragging anymore so

إذا كنا لن نقوم بسحب البطاقة، تلك بداية جيدة

if they're not dragging the card that's

وكثافة الـconst تقريبًا غير مرئية.

a good start and opacity hang on hang on Const is nearly invisible I'll pass the

كل شيء على ما يرام. الكثافة أقل من ذلك.

relays I know there's like less than that okay so if they're not dragging the

حسنًا، إذا كانوا لن يسحبوا البطاقة.

card right if this is nearly invisible

إذا كان هذا تقريبًا غير مرئي، نعم.

yeah then we could say this duck target

عندئذ يمكننا أن نقول this.target equals null، أليس كذلك؟

equals null right and we could say this

ويمكننا أن نقول this dot-- أوه!، قبل أن نقوم بذلك،

before we do that I'd say what let's

سأخبرك شيئًا، لنجرب ذلك أولًا.

just try this first they start target

this.target.parent ta--

dot parent are taunted taught it know

Tartet؟. Tartet. وبعدئذ لدينا Target.parentNod

target that parent node dots remove child they start target one T but

مع one t، بول، one t.

wanting so so this is probably gonna

أيضًا، لقد طلب منا أن نُفعل مقياس الـFPC حتى يستطيع الناس

jump look but it's a good step also

إذًا هذا في الغالب سينتقل بسرعة، لكنها خطوة جيدة.

we've been asked to enable the FPS meter

رؤية إنها بالفعل 60 FPS، والذي أعتقد أنه قرار صائب.

so people can do it's actually 60 FPS which i think is a good call it's not

إنه غير مرئي، على الرغم من ذلك.

miserable though it's not visible why is

إنه غير مرئي.

لماذا ذلك؟ لا أعرف. هل لدي Canary هنا؟

I don't know canary on here the

Google Chrome Canary. هل يمكن أن يكون السبب في الوضع المستجيب

responsive mode that hides it for some

الذي يخبأها لسببٍ ما؟

local host 933 Oh wasn't it

Localhost 9.3.3.0 أليس كذلك؟

أعتقد ذلك. لنرى.

let's see and see what we're gonna do we

سأخبرك بما سنفعله. حصلنا على المستجيب.

got a responsive mmm I was hoping that

كنت آمل أن نحصل بالفعل على-- أوه!، علينا أن نحصل على touch إذَا؟

we'd actually get how we do we get touch then you have to go and phone Nord again

عليك أن تذهب إلى وضع التليفون مرة أخرى، أعتقد.

I think no no I didn't I didn't want to

لا، لا أريد أن أفعل ذلك.

do that I'm gonna do that I wanted to I

أردت أن-- أين نوع الجهاز؟

wanted to wanted to want it to where is the device type show device type mobile

هاتف نقال. الآن حصلت عليه، أليس كذلك؟

now I've got it right yeah that is very

نعم، ذلك مؤثر جدًا.

touch okay that's know that seems gone

حسنًا يبدو أن ذلك انتهى. ماذا كنا نقول.

are you saying FPS meter and zoom in on

مقياس FPS، ونقوم بالتقريب على أدوات المطورين.

the dev tools okay provide it we can

شريطة أن نستطيع بالفعل رؤية مقياس الـFPS نعم

actually see the FPS meter yeah okay

يبدو ذلك جيدًا.

that seems okay right let's see if this

لنرى إذا كان سيعمل. بعيد جدًا. أين-- ها نحن ذا.

works look too far do far where oh yeah

مقياس FPS لا يظهر.

FPS meter doesn't show ah it is

إنه وضع المستجيب

responsive not interesting

هذا مثير للاهتمام.

alright say what we'll do then let's add

حسنًا، سأخبرك بما سنفعل عندئذ. لنضيف في mouse events. إذا الماس لأسفل، تحريك الماس، الماوس لأعلى.

in Mouse events then so mouse down mm mm

نعم أعتقد أن ذلك سيؤدي الغرض

mm so yeah I think that should work well

بالنسبة للأشخاص الذين انضموا إلينا للتو

the people who have just joined us or

أو ربما أتيتم متأخر قليلًا، ما نفعله

maybe came a little late what we're

إننا ننفذ بطاقات قابلة للنقل

doing is we're implementing swipeable

في الأساس، أردنا استخدام بعض الـJavaScript

cards basically we want to use some

وبعض vanilla CSS-- بالعكس.

JavaScript and some vanilla CSS the

بعض vanilla JS وبعض CSS لننفذ بطاقات قابلة للنقل

other way around some vanilla G is j/s and some CSS to implement dismissible

على شبكة الإنترنت في performant ونوعًا بطريقة جميلة.

cards on the web in a performant and kind of pretty way and that's what you

وذلك ما يمكنكم مشاهدته على الشاشة.

can see on screen and what we are

وما نقوم بتطويره في الوقت الراهن.

developing right now

إذا نوعًا ما حصلنا الـ 60 إطار

so we're kinda you know we get the 60

الثانية تقريبًا

frames a second um pretty much

إذًا ها نحن ذا.

so there you go see what we could do it

سأخبركم بما يمكننا فعله وقد يكون أسهل قليلًا

might be slightly easier to see if we

لنرى إذا كنا سنأخذ تسجيل للإطار الزمني

take a timeline recording of a bit of a

القليل من تحريك الرسوم. ها نحن ذا، توقف.

bit of an animation there we go stop so

إذَا هذه القطع هنا حيثما حصلنا على dip ستكون على الأرجح، نعم.

these bits here where we get a dip will be probably yeah

أترى، إننا نرى بالفعل خمسة إطارات متحركة.

see we're actually seeing animation

أعتقد أن تلك مشكلة مع Canary

frame fire so I think there's a an issue with canary not picking up the frames

لا يلتقط الإطارات كل ثانية هنا.

per second here because you can see

لأننا نستطيع رؤية أن هناك علامة منتظمة هنا من إطارات تحريك الرسوم فصل إطار تحريك الرسوم

there's a regular tick here of animation frames animation frame fired animation

فصل إطار تحريك الرسوم

frame fired animation frame fired so I

فصل إطار تحريك الرسوم لذا أعتقد أني أميل لأن أقول--

think I'm I'm more inclined to say the

ربما تكون الإطارات هناك بالفعل، فقط

frames might actually be there just

أدوات المطورين غافلة عنهم

devtool to may be missing them yeah I

نعم، اعتقد-- هذا Canary، إذًا قد يكون ذلك

think this is canary so there could very

غريب بشكل كبير--

well be a very easy but you can see this

حسنًا، يمكنك أن تري أنه

it is you know doing the right thing

يقوم بالشيء الصحيح. على كل حال، حسنًا. إذا نعم.

anyway right so I yeah so we need to

إذًا نحتاج لأن نعيد إطلاقه-- إنني في الواقع سأقوم بالتبديل إلى ثابت، لأنني أفضله.

release back do you what I'm actually gonna switch back to stable because I'd

لأنه كان يعمل جيدًا معنا.

rather because I was working just fine

الأمر أن، عندما تعود تلك البطاقة، لن أطلق الـ--

for us the thing is um when this card comes back I'm not releasing the right

حسنًا، لن نطلق الـtarget.

we are not releasing the target so we

إذا ليس بإمكاننا تحريك أي شيء اخر. إذا كانت تقريبًا غير مرئية، صحيح. إذًا نعم، أنا أعرف ماذا سأفعل

can't move anything else so so it was if it's nearly invisible bright so mhm yeah yeah I know what I'm gonna do

Const في البداية تقريبًا يساوي--

Const is nearly at start equals I know

أعلم أن ذلك أقل من--

that is let's take notes people I know

سجلوا تلك الملاحظات، أيها الناس.. أعرف إنه تقريبًا عند البداية.

it's nearly at the start and if it's

وإذا كانت تقريبًا البداية، بعدئذ

nearly at the start then we can say this

يمكننا أن نقول his.target equals null.

dot target equals no I'm not gonna have

سأفكر إذا كان هناك طريقة أفضل

to think if there's a better way to do

للقيام بذلك.. كلا

حسنًا إذًا ذلك يعمل. أعجبني.

alright so that's working like it yeah

هل تعلم ماذا سأفعل؟

general I'm gonna do when you get rid of

عندما تتخلص من واحدة من تلك البطاقات هكذا،

one of these cards like that I feel like

أشعر كأن تلك البطاقات الأخرى ستنزلق لأعلى في مكانها الصحيح.

the other card should slide up into place definitely can go now with feeling

قطعًا، سيكون ذلك رائعًا.

وبالمثل، أوه!، هل تعرف ما الشيء الذي لم أفعله؟

and similarly oh did I generally didn't

منذ أن أطلقنا الـtarget في هذه الحالة، بالمناسبة،

do since we've released the target for this case by the way we should be saying

ينبغي علينا أن نقول this.target.style.willChange

this no target dot style dot will change

equals initial.

equals initial they have to be motion

إنهم يمثلون تخفيض الدرجة الذي كنا ننتظره.

we've been waiting for

نعم. target.style.transform equals null كذلك.

yeah target the target dot style dot transform equals non as well so we will

إذًا سنعيد ذلك.

put that back so that's first thing we

إذًا أول شيء يمكننا فحصه، ما نستطيع أن

can check what we can do is in here we

نفعله هنا، أننا سنذهب إلى بطاقتك.

will go to your card and you can see

ويمكنك أن ترى ذلك، نعم، إننا على المسار الصحيح.

that you know we're doing fine I'm pop

وادفع نموذج انتقال الكثافة،

at the end transform norm opacity one

يمكن التخلص من تلك الكثافة أيضًا، إذا أردت.

could get rid of that capacity as well if we wanted layer borders you've been

حدود الطبقات، لقد تم تخفيض درجتك. ادفع. جيد

demoted but nice okay so that's good so

حسنًا، إذًا ذلك جيد.

the is what we'll do is we'll switch off

ها هو ما سنقوم به، سنغلق هؤلاء في الوقت الحالى.

those for now and so if you're not

وإذا كنت لن تسحب البطاقة-- في الواقع،

dragging the card actually know if we

لا، إذا تخلصنا من بطاقتك، ما نريد فعله

did get rid of your card what we want to

أن نقول this.cards بطاقات لكل منهم.

do is we want to say this cards for each

وانت تعلم أنها ستحتاج للبطاقات.

and you're going to need the cards card

بطاقة وما أريد فعله أنني أريد أن أقول اترك هذا بعد current target equals false.

and what I want to do is I want to say let is after current target equals false

وما سأفعله أني سأقول،

and what I'm going to do is I'm going to

إذا كانت البطاقة تساوي هذا، the target، بعدئذ

say if card equals this the target then

سأقول أن ذلك صحيح، سأعود. وبعدئذ إذا لم تكن بعد الـ current target،

I'm going to say that's true I'm going to return and then if it's not after the current target done a single

قمت بخطوة مثل عد إلى أي مكان آخر، لماذا ليس هنا؟ حسنًا

one returns everywhere else why not yeah all right and so now we know for any

إذًا الآن نعلم أي بطاقة، عندما نصل إلى تلك النقطة،

card where we get to this point we know

نعلم أننا نسعى باتجاه الـcurrent target.

where after that the current target so

إذَا يمكننا أن نقول card.style.transform

we can say card dot style dot transform

تساوي this.targetBCR.height، نعم.

equals this dot target bc r dot height

Transform equals translateY وذلك من دون.

yeah transform equals translate ech translate y and it with that so we're

لذا سنقوم بترجمته-- ها نحن.

going to translate it to there we are

ترجمه هناك.

translate it down

هل يعمل؟

not working no there's errors Paris it

لا، هناك أخطاء. لا يعجبه.

doesn't like it what's the error this

ما هو الخطأ؟

cards for each is not a function because

هذه البطاقات لكل واحدة لا تعمل لأنها ليست مصفوفة.

it's a not an array mmm okay I read a

حسنًا Array.transform إنها صديقك.

transfer miss a friend ever got from

Array.from إنها صديقك.

different oh do I have to yes you have

هل على أن أقوم بذلك؟ نعم، عليك أن تفعل ذلك. Array.from بدأ البطاقات.

made up from stock cards I think in

أعتقد أن Canary، يمكنك الآن في الواقع

canario can now actually call for each

دعوة كل من هو على قائمة الاختيار.

on the selector all results see so it's

إنه يدفع كل تلك البطاقات لأقل بحوالي 200 بكسل،

pushing all these cards down by 200

وهو أمر صحيح، فيما عدا الخاص بالهامش.

pixels which is correct except for the margin because after and they're the

تنهار الهوامش بسبب شبكة الإنترنت.

margins are collapsing because web yes

نعم إذَا نريد أن نضيف الهامش الذي أضفته

so we need to add in the margin I added

والذي قد يصل إلى 20 بكسل

which would be 20 pixels and I'll hard

وسأجبره على برمجتها. لكني أعتقد أني سأقوم

code it but I guess you would do

بشيء أكثر أناقة هنا.

something a little bit fancier here so now there you go so now all our cards

ها نحن ذا. إذًا الآن كل بطاقتنا و-- أوه!، ذلك كان ممتعًا.

and that was interesting yeah I think I

نعم، أعتقد أني أعلم ما الذي يجري هنا.

know what's going on here where he's

أوه!، إنك تقوم بإستعادة وضع الـtransform.

heading the transform and I'm also I'm

وأقوم أيضًا بإصدار هذا

releasing this and I don't want to

ولا أريد أن أقوم بإصدار هذا بعد، لأن--

release this yet because we haven't any

عليك أن تقوم بتحريك هذا فيما بعد.

meet that see we have to animate on the

علينا أن نقوم بتحريكهم.

end of that animation will release the

في نهاية هذا التحريك، سنقوم بإصدار الـtarget. حسنًا. إذًا ard.style.transition equals transform-- في الواقع،

target okay so card dot style dot transition transition equals transform not point I'm gonna do actually I'm

سأتمهل في القيام بذلك.

gonna do it slow

ثلاثون ثانية.

three seconds keep it busy a 1-up cubic

مكعب بيزيه، لما لا؟

busy not know what not point three one

one that'll be a decent curve and then

ذلك سيكون منحني لائق.

you just pulled that right like asleep

لقد قمت بذلك على نحو جيد. أليس كذلك؟

didn't you how did really card dot

بالفعل. card.addEventListener في نهاية الانتقال،

eventlistener transition and on transition and and I

لأني أريد حلها بعد ذلك

am because I want to unhook it afterwards so I have to make your name

لذا على أن أجعلها وظيفة مسماة. لذا سأقول،const on transition وتساوي.

function so I will say contest were on transition and equals

لقد سُئلت حالًا، بينما تكتب كلمة const،

you were just asked as you're typing the

هل تقترح استخدام const كلما سنحت الفرصة،

word Const would you suggest using Const whenever possible and led only when the

وليس فقط عندما تتبدل بالفعل المتغيرات مع الوقت؟

variable actually changes over time yes

so I've gone I've gone full circle

لقد عدت إلى الموضع الأصلي مؤخرًا-- ليس بالظبط،

recently - not full circle but I've sort

لكني نوعًا ما كررت ذلك في عقلي.

of iterated on my kind of my thinking I

لا أعرف ما الذي تشعر به تجاه ذلك، لكن بشكل أساسي، نعم.

thought how you feel about it but basically yes Const I kind of go well if

Const، إنه نوعًا ما يسير بشكل جيد.

I didn't intend for this to change and I

إذا لم أنتوى لذلك أن يتغير،

know when I'm declaring it actually I

وأعرف متى سأصرح بذلك،

think this thing should for the life of

في الواقع، أعتقد أن هذا الشيء ينبغي،

this function or whatever it should be

من أجل استمرار هذه الوظيفة، أو أيًا كان،

remain the same value so if so yeah

ينبغي أن تحتفظ بنفس القيمة. إذًا لو كانت تلك هي الحالة، نعم، ثابت.

Const and I made a mistake because I

وقد قمت بخطأ في البداية، لأني

used to think that if you had like Const

اعتدت أن اعتقد أنه إذا كان لديك، مثل،const x

x equals some objects then you couldn't

يساوي بعض الأشياء، فبإمكانك حينها تغيير

mutate a property on that object but

خاصية هذا الشيء.

that's not true it's just the reference

لكن ذلك ليس صحيحًا، إنه مجرد مرجع لهذا الشيء.

to that object and then so yes and a

وبعدها إذا، نعم، وسأتراجع لأتيح لك

fallback to let if their values going to

المجال لتعرف إذا كانت ستتغير القيمة،

change and then fall back to VAR i

وبعدئذ تراجع إلى va لم استخدم va من وقت طويل جدًا.

haven't used VAR in a good long term so

ولا أنا أيضًا. إذًا لقد وجدت const

I found that constant let gets me all

ويسمح لي بالوصول لكل الأشياء

the way for the stuff I am writing at

التي اكتبها في الوقت الحالي.

the moment in case people don't know let

في حالة إن كنتم لا تعرفون من أجل أن نصرح بمتغير في نطاق الكتلة

declares a variable in the block scope

ذلك يعني أنه يعد صالحًا فقط بين اثنين من

it means it's only valid between the surrounding two curly braces yeah var

الأقواس المعقوصة المحيطة.

however is function scope and will be

Var، ومع ذلك، تكون في نطاق الوظيفة

valid throughout the entire function

وستظل صالحة خلال الوظيفة بأكملها،

even if it crosses curly braces

حتى لو كانت تتخطى حدود الأقواس المعقوصة. نعم، صحيح.

boundaries yes right so so basically

لذا، بشكل رئيسي سنقول-- لأن كل هذا

we're gonna say cuz these are all gonna

تقريبًا سيحدث--لا نريد أن نقوم بذلك، صحيح؟

happen pretty much don't do that do it

نريد أن نتخلص من ذلك على الفور.

you want to get rid of that straight away so we get rid of the that we're only we're just gonna so these will all

إذًا ستحصل كل تلك البطاقات على نفس التحول،

all these cards will get the same

وأعتقد أن بإمكانك أن تفعل ذلك لواحدة منهم، ربما.

transition and I guess you could if you're you know you could basically do it to one of them maybe I'm going to do

أريد ان أقوم بذلك بالنسبة لهم جميعًا.

it for all of them yeah it's okay that's

نعم، أعتقد ذلك، أيضًا. كل شيء على ما يرام، إنه حقًا كذلك.

it's really fine I mean it's just gonna

أقصد، إنه سيعيد كتابة null عدة مرات،

overwrite null a few times but chances

لكن هناك فرصة جيدة لحدوث ذلك لأن كل البطاقات

are it's gonna be fine because all the

ستتحرك ككتلة.

cards are gonna move in a block so all

إذًا يبدو كل شيء على ما يرام، سنراهم-- أوه!،

being well we'll see them ooh what's

ماذا يحدث هنا؟

going on there okay yes oh I know what

حسنًا، نعم، أوه!، أعلم ماذا يكون.

it is we set them there and then we tell

لقد وضعناهم هناك، وبعدئذ طلبنا منهم الانتقال،

them to transition but we don't want to

لكننا لا نريد القيام بذلك.

do that what we want to do is we

ما نريد القيام به هو تحويلهم إلى الأسفل

transform them down we want to request

نريد طلب إطار تحريك، حتى يمكن لهذا الأسلوب،

that animation frame so that style that

الذي يتحول أن يستمر.

transform takes hold okay and then we're

ثم بعدئذ سنشغل الانتقال،

going to switch on transition

ثم بعدئذ سنضع .style.transform equals none، هكذا.

and then we're going to set style transform equals non like that so we we

وبالتلي لقد تم تخصيص 220 بكسل لهم، في هذه الحالة، أسفل.

just assign them the 220 pixels in this case down and then we wait a frame so

ثم ننتظر إطار يمكن أن يستمر

that takes hold switch on transitions

ويشغل الانتقالات، ويحولهم إلى أعلى.

and transform them up so we wait for the

إذًا ننتظر أن يدرك

browser to realize that they're actually

المتصفح أن هناك بالفعل

now is you know it trends from being

تحول يتم تطبيقه الآن.

uptight remove childhood know so it

احذف child of null. إنه لا يفضل حذف child of null، وهو أمر مثير للاهتمام. لا أعرف السبب.

doesn't like remove child of null which is interesting mmm-hmm I wouldn't know I doesn't like

لم يعجبه. لم يعجبه.

it does not like I know well it's it's

حسنًا، إنه قريب إلى هناك.

closely it's close to there so it's

إنه يفعل ذلك في كل--

doing it on every single can week

[غير مسموع] خاصية.

property so that means that parent

ذلك يعني أن الـparent node غير محدد

notice Nadi find mm-hmm I have no idea

ليس لدي فكرة لماذا. إذًا انتظر.

why so hang on if you're not dragging

إذا كنت لن تسحب البطاقة،

the card that's not any visible cards

فليس هناك أي سبب واضح لكل بطاقة يبدو هذا جيدًا.

for each card this seems okay well

بسبب ذلك، صحيح؟

because of this right cuz this is the

لأنه المكان الوحيد حيث يمكننا التوجه له-- يجب أن يكون.

only place what we call it has to be hmm

أتساءل إذا كان هذا؟

I wonder if it's this nice let's just

لنقم فقط بإزالة التعليق، ونرى ماذا سيحدث. لا، ليس ذلك.

comment that out so it opens no not just

لنتحقق فقط إذا كان هذا، بعدئذ.

check us this then it's definitely that

إنه حتمًا ذلك. ممتع. حسنًا.

interesting okay it's there because once

لانه بمجرد أن يتم فصلها،

it's been detached why would that run

لماذا قد يعمل ذلك أكثر من مرة واحدة؟

more than once it's nearly invisible oh

إنه تقريبًا غير مرئي. أوه!، لأنه لا يزال-- حسنًا.

because it's still at it's still okay

سيعمل هذا مرات متعددة.

this is gonna run multiple times so

لذا ثمة مغزى لما نقول، حسنًا إنك تقريبًا غير مرئي.

there's a point where we say right you're nearly invisible okay but we

لكن لا يزال لدينا هدف.

still have a target okay and so it gets that listen it says

ولذلك أعتقد، بعدئذ، إنه هذا الـparent node.

parent node well after it's been removed

بعد أن تم حذفه مرة، لن يوجد parent node بعد الآن

once it's there's nothing there's no

parent node anymore that's not your

وبالتالي لا يمكنك أن تكون child of null

child or not so we need to say if it's

لذا سأقول إذا حصلت على parent node هكذا، يمكنك

got a parent node like so you can now

الآن أن تخبرها أن تحذف الـchild

tell it to remove child and maybe little

وربما سيكون ذلك المستوي متوتر للغاية بشأن ذلك.

just be super uptight about it there you

ها نحن ذا.

go

ليس بإمكاننا القيام بأي شيء حتى ينتهى ذلك

now we can't do anything here until

وبعدها، أوه!، هل يمكننا؟

that's finished and then oh can we yeah

نعم، بعدها يمكننا سحب ذلك.

then we can grab that and those are

هذه بطيئة بالفعل الآن.

really slow now okay so that means that

حسنًا، ذلك يعني أنه هنا، عندما ينتهي هذا،

on here when this is finished we need to

نحتاج أن نقول card.style.transition is none، كل شيء على ما يرام.

say card dot style dot transition if not

إذًا كل شيء على ما يرام، ذلك ينطبق، لا أستطيع فعل شيء.

so I'll be mall that goes can't do anything and now that one goes right

والآن ذلك ينطبق على تلك، صحيح جيد. اجعلها أسرع 0.15.

let's speed it up not 0.15 yep yep yep

لم يعد لدينا بطاقات بعد الآن.

we hope no cards anymore we have

لدينا بطاقات قابلة للنقل, سيدي

dismissible cards so look at that

انظر لذلك. أوه!، لقد كان الإرسال غير مستقر عندئذ.

oh that was a jitter then there do you

هناك، هل رأيته؟ نعم، لقد رأيته. ماذا حدث هناك؟

see yeah I did that one too but did

واحد، اثنان. هل ذلك بسبب البطاقة الثالثة؟

because of the third card let's find out

لنكتشف ذلك. اجعلها بطيئة. اجعلها بطيئة. إذًا هذا ينطبق.

slow it down slow it down so that goes

هناك واحدة انظر، ذلك غريب.

see that that's weird why is that doing

لماذا يفعل ذلك؟

that the transition is still set it

الانتقال لا يزال محدد. لا يجب أن يكون.

shouldn't be it isn't it's because of

إنه ليس كذلك. ذلك لأنه -- ليس كتلة الفحص، أليس كذلك؟

the Lala it's the blocks it's not the blocks coping is it mmm what's the I'm

هل تعلم ما سأفعله؟

you know what I'm gonna do I'm actually

سأقوم ب ( for let i equals 0

gonna do for let's Michael's not eyes

i is less than this.cards.length, i plus plus

less than they stuck cards dot length I was bluffing good old for loop I know

مفيد بالنسبة للحلقة. أعلم، أليس كذلك؟ ثم سأقوم بـconst card equals this.cards.

right and I'm gonna do black card in fact we did Khan specially constellations

والآن السبب الذي يجعل ذلك يعمل

all right now the reason this isn't not

هو أن العائق في نطاق هذا التكرار خاصة

this is gonna work is because the let is scoped to this particular iteration of

من الحلقة for، حيث أن الـvar ذا الطريقة القديمة قد يقوم بتحديث

the for loop which old-school var would

الـvar إلى أقرب وظيفة ممكنة.

actually update the var to the nearest

وبالتالي عندما ينطلق نظام رد النداءات،

function so this would when the

هذا قد يشير إلى بطاقة مختلفة أو أي شيء على أي حال.

callbacks fired this would refer to a different card or something anyway very

تفصيل معقد للغاية من ES 6 let وحلقات for

intricate detail es6 let and for loops

أوه!، غير متوقع. ماذا فعلت؟

no unexpected what did I do forty it's

40 إنها، نعم، ها نحن ذا. حسنًا

yeah there we go okay mad is not broken

إنها الآن مكسورة، إنها بالفعل كذلك مرة أخرى. أتساءل لماذا

it's really broken again and wonder why

مثير للاهتمام إنها تعتقد إنها-- لا، حسنًا.

interesting thanks it's okay

لنلقى نظرة.

let's have a look how's everybody doing

كيف حال جميع من في الدردشة؟

on the chat everybody okay yes everybody

أأنتم بخير؟ نعم. هل أنتم سعداء؟

happy people are learning about es6 and

أصبح الناس يدرسون ES 6 و CSS وكل شيء.

CSS and everything oh cool

أوهً!، رائع، جيد.

good all right if people have been

يسأل الناس عن إذا كان هناك

asking if there's similar sessions for

محاضرات مشابهة لأندرويد،

Android which I think we should forward

والتى أعتقد أنا يجب أن نرسلها إلى زملائنا في فريق أندرويد.

to our colleagues yeah Android team well

أتعلموا شيئًا، إذا كنتم مستمتعين بذلك.

you know what if you enjoyed that you

أتعلموا، لما لا؟

know why not let them know let them know

أخبرهم بذلك. أخبرهم بذلك.

that's a and we can do that I mean

يمكننا أن نفعل ذلك أقصد، إنهم فقط هناك.

they're just out there so we can do that

وبالتالي يمكننا أن نقوم بذلك، أليس كذلك؟

can't we I heard you were saying we can

أعتقد أنك كنت تقول أن بإمكاننا القيام بمحاضرات الأندرويد.

do the Android session I certainly don't

من المؤكد أني لم أقل ذلك--

know no it's been a while since I wrote

لا، لقد مر وقت طويل منذ أن كتبت Java إذًا ها نحن ذا.

Java um so there we go right so where

صحيح، إذًا أين توقفنا؟ كنا نقول،إذا كان هذا-- لقد فقدت تسلسل أفكارى.

were we we were saying if this is I've lost my train of thought hmm you had an

لقد كان لديك خطأ تريد فحصه.

arrow that you wanted a fiesta gate yeah

البطاقات لم تعد تنزلق للأعلى بعد الآن، أليس كذلك؟

that the cards didn't split up anymore

نعم، صحيح.

right yeah right so we know that it

وبالتالي نحن نعرف أنها يجب أن تكون غير مرئية في هذه المرحلة، أم أنها كذلك؟ دعنا نتحقق.

should nearly be invisible at this point or is it so let's have a check cause

لأن هذا لا يمكن أن يكون فقط، أوه!، إنه نتيجة الرجوع.

this card just oh it's because the returned continue I should we continue

تستمر. يجب أن تستمر، لا أن ترجع

not return that is one of the dangers of

ذلك واحد من مخاطر إستعادة التصنيع-- نعم [غير مسموع]

refactoring yeah are anything suddenly

لقد أصبح كل شيء فجأة يبدو منطقيًا مرة أخرى.

it all makes sense again it goes no

ها نحن نبدأ. لقد استقرالإرسال.

jitter no jutsu this time look at that

الإرسال مستقر هذه المرة. انظر لذلك.

yeah I think it was just doping thing

نعم، لقد كانت المشكلة في موضوع الفحص كان الأخير غريب، رغم ذلك.

that last one was strange though let's

لنجعلها أسرع قليلًا،

make it a little bit faster cuz that's

لأن ذلك مجرد-- إنه مؤلم.

just pretty pretty painful

حسنًا، يبدو جيدًا.

all right looks good no that's not good

انظر، الآن ذلك ليس جيدًا.

the transform is still sad about ya

المحولات لا تزال مظبوطة، على ما يبدو. نعم. ذلك الانتقال، أقصد.

transition I mean yep so let's think

نعم. إذًا لنفكر لماذا هذا؟

about why this is we need to it's it's to do with I think it's to do with the

أعتقد أنه يتعلق بالبطاقة، أعتقد

card I think see well yeah the card

حسنًا، نعم، تغيرالبطاقة

variables buy into a cons that changes

مرتبط بـconst والذي يختلف مع كل حلقة for أليس كذلك؟

on every for loop right so you only

وبالتالي تحذف فقط الانتقال من--

remove the transition on I should be

لكن يجب أن يفى ذلك بالغرض لكل واحدة من هؤلاء

doing it for every single every single

لكن هذه هي النهاية التي تربط هذا،

one of the but this is a closure that only binds this it doesn't bind card

إنها لا تربط البطاقة، أليس كذلك؟

right so they God should be fine this

ينبغي أن تكون البطاقة في وضع جيد، ينبغي أن يجدى ذلك نفعًا.

should work well but it should work but

حسنًا، ينبغي أن يجدى نفعًا لكن ذلك لم يحدث

it doesn't work well since it doesn't

وبالتالي بما أنها لا تعمل، لنلقي نظرة على

work let's let's have a look at what

console.log(). ينبغي أن نرى بطاقتين على الأقل. ثم بطاقة واحدة إذًا ماذا لدينا؟

console we should see at least two cards and then one card so what do we go a lot

ذلك عدد كبير من البطاقات.

of cards it's a lot of cards it should

ذلك عدد كبير من البطاقات. ينبغي على الأرجح أن نضيف فئة

maybe add a class so we can distinguish

حتى نستطيع تمييزهم عن كل واحدة من هؤلاء.

them from one of the state you can see

بإمكانك رؤية النص إنه كل الـ Kinlan

the text it's all the Kinlan no hmm it's

إنها البطاقة الأخيرة فقط نعم، حسنًا

all the last card yeah okay we need to

نريد أن نصل إلى السبب الحقيقي وراء ذلك

get to the bottom of why this is why

لماذا، لماذا، لماذا؟ حسنًا، نظريتي كانت

well my theory was that you're looping

أنك تصنع حلقات حول كل بطاقاتك

over all your cards you'll buy rubber

أنت بطتي المطاطية

duck I am your oh but you're my Robo dog

أنا بطتك المطاطية لكنك بطتي المطاطية التي بإمكانها الرد

that talks back okay if you never come

إذا كنتم لم تسمعوا عن فكرة البطة المطاطية

across the idea of the rubber duck this

فإنها كانت منشور في مدونة، أليس كذلك؟

was a blog post wasn't it a few years

منذ عدة سنوات.

ago I think so yeah yeah somebody was

أعتقد ذلك، نعم.

like that I keep a rubber duck on my

أحدهم كان مثل،

desk and the reason I keep a rubber duck

كنت أترك بطة مطاطية على المكتب وكان سبب ذلك

on my desk is because when I get stuck I

أنه عندما كانت تواجهني مشكلة كنت أتحدث إلى البطة المطاطية

just talked to the rubber duck and

وكان الحديث إلى البطة المطاطية يساعدني في حل مشكلاتي

talking to the rubric helps me solve my problems and I guess he's my rubber duck

وأعتقد أنه بالنسبة لي هو البطة المطاطية.

hello and really you have to introduce

في العادة عليك أن تقدم نفسك بطريقة مهذبة

yourself politely to the rubber duck

إلى البطة المطاطية أولًا

first I think he does not quack when you

إنه لا يصدر صوت البطة عندما أضغط عليه

squeeze him what a disappointing duck

يا له من بطة محبطة.

yeah I'll buy the upgrade for the next

في المرة القادمة سأشتري النسخة المطورة يقلد صوت البطة

time alright just than that was it so

ألا تستطيع أن تفعل ذلك. يقلد صوت البطة هل هذا صعبًا؟ غير معقول

hard unbelievable right I'm sorry okay

حسنًا، نريد أن نتوصل لحل لتلك المسألة

we need to figure out this one all right

what is the cause why are we seeing so

ما هو السبب؟ لماذا نري العديد من البطاقات؟

many cards okay let's let's oh hang on

حسنًا، دعنا-- أوه!، انتظر، انتظر

hang on hang on hang on hang on hang on hang on right this should be declared

حسنًا، ينبغي أن يتم إعلان ذلك خارج الحلقة for

outside the for loop we don't need to

لا نحتاج كل تلك البطاقات

have it so many of them

هذه واحدة، أليس كذلك؟

that's one thing right

البطاقة غير معرفة، بالتأكيد ليست كذلك.

how does not define of course it isn't

كيف يمكن ذلك عندما يكون كل ذلك خارج الحلقة for؟

could it be it's all inside the for-loop

yeah yeah yeah yeah

يمكننا أن نقوم بوظيفة evt، ونقول evt.target.

however we can say we can do function EVT and we can say this dot bug - TV T target

أين البطاقة؟ أوه!، بحقك، بول. حسنًا.

where's the card oh come on Paul okay

لدينا الآن المشكلة الأخرى،

now the problem which is that this no

وهي أن هذا لم يعد يشار إليه

longer refers to okay so we're just

لذا سنقوم بهذا، بعد ذلك.

going to do this then that is usually

ذلك عادة جمال وظائف السهم المختلفة،

the beauty of the error function to find

أن تربط ذلك بك تلقائيًا

this for you automatically

حسنًا، إنهم لم يرتبطوا.

well they don't bind it they just it

لقد أخفق-- على أية حال.

falls through the anyway yeah I'm gonna

نعم، سأكون متحذلقًا. أنا، متحذلق؟

be pedantic me pedantic strange still

غريب لا يزال خاطيء، أليس كذلك؟

not right is it why is that not right

لماذا هذا غير صحيح؟

see at this point we shouldn't have a

أترى في تلك المرحلة، لا ينبغي أن يكون لدينا انتقال في هذا، أليس كذلك؟

transition on this right because we've

لأننا وضعنا انتقال evt.target.style.transition.

set transition event target dot style dot transition that should have been

كان ينبغي لذلك أن يحل المسألة كليةً.

totally totally resolved add

Card.addEventListener، ولقد قمت بتهجئة ذلك بشكل صحيح.

eventlistener Tran and I spot that

correctly transition and you know he

أتعلم، إنها تنطلق. لقد كان مسمى، أليس كذلك، نعم؟

just caught right yeah so so okay sees we're gonna do is we're gonna

حسنًا، هذا ما سنفعله card.innerText-- هذا بالضبط ما أفعله للتصحيح،

say card don't you know this is exactly how I debug by the way in case anybody's

في حالة إن كان هناك أحدًا يتساءل

wondering with a lot of this is how how

مع الكثير من-- تلك هي الطريقة التى تعمل بها وكذلك أنا.

you and also I actually work in no it

إنها ليست براقة جدًا.

wasn't very glamorous no it's really not

لا، إنها ليست كذلك بالفعل، لكننا سنصل إلى ذلك في النهاية.

but we got there in the end there coda

أوه!، يا إلهي، card.innerText, adding event listening.

inner text adding event listener and

وبعدها سأقوم فقط.

then I'm just gonna just go

انطلق. أوه!، لم يكن ذلك جيدًا.

fired no I was not good right this is

صحيح، هذه هي المشكلة. هذه هي المشكلة هنا.

the problem this is the problem here why

لماذا تتكرر هذه المشكلة؟

are we getting so many of these so oh it

إذًا أوه!، إنها، نعم، أها. إنها نفس المشكلة التي حدثت من قبل.

yes ah it's exactly the same problem as before

نحتاج أن نقول- حول هذا الموضوع

so we need to say around this every time

كل مرة تصل فيها إلى أن تكون تقريبًا غير مرئية

it comes into this nearly invisible it's

إنها تقوم بإعدام هذه الكتلة.

executing this block which means we're

والذي يعني أننا نحصل على العديد والعديد

getting lots and lots and lots of event

والعديد من event listeners--

listeners oh yeah of course and only the

أوه!، نعم، بالطبع.

first one is being removed yeah I know

ويتم فقط حذف أول واحدة. نعم، أعلم، صحيح؟

right now it makes sense right

يبدو ذلك منطقيًا الآن.

so what we need to do is we need to say

صحيح. وبالتالي ما نريد فعله هو أننا نحتاج لأن نقول، إذا كان هذا مثل هذا.

if this is like this so if you're you

وبالتالي إذا انتهيت من السحب، حسنًا.

finished dragging okay users finished

لقد انتهى المستخدم من السحب، ها نحن ذا.

dragging there we go

أعتقد أننا توصلنا إلى فهم دقيق لتلك المشكلة، يا رجل. إذا كانت البطاقة تقريبًا غير مرئية، وتقريبًا اختفى--

then we've got it to the bottom of this one day if the card is nearly invisible nearly gone if Paul starts commenting

إذا بدأ بول في التعليق على الكود الخاص به،

his own code Hey no he's being serious

الآن نرى أنه أصبح جادًا.

in six months I'm gonna look back at

في خلال ستة أشهر، سأعود

this code now I'm gonna be like what was

لألقي نظرة على هذا الكود، وسيكون رد فعلي، ما الذي كنت أفكر فيه؟

I thinking and this is exactly I don't I

لا أؤمن بالتوثيق الذاتي لعملية البرمجة.

don't believe in self-documenting code cuz it doesn't know my code anyway maybe

ليس الكود الخاص بي، على أي حال.

yours doesn't of you you're smarter than

ربما يستحق الكود الخاص بكم التوثيق، ربما تكونوا جميعكم أذكي مني.

me I think nobody should believe in that

لا أظن ان أحدًا يجب أن يعتقد ذلك

yeah yeah very I've seen very few

لقد رأيت نماذج قليلة جدًا جيدة بالفعل من حيث

examples that actually are so good in

أنها لا تحتاج إلى توثيق بعد فترة. إذا كان لا يزال هناك target، ولا يزال موصول بالـDOM، أوه!، ذلك يعد قريبًا.

terms that you don't need documentation after well so yeah if there's still a target a target and the target is still attached

to the Dom oh that's close I'm gonna

سأقوم بـ، boop، ها نحن ذا.

إذا كان لا يزال موصول بالـDOM، سنقوم بإعدام هذا الكود. أوه!، بول، هل نجح ذلك؟

if it's still attached to the Dom we execute this code Oh Paul no we didn't

لا، لم ينجح. ها نحن ذا. حسنًا.

they right tell you what we're going to

سأخبرك بما سنفعله. هذا مجرد كود رديء.

do that's just bad code so we're gonna

إذًا ماذا سنفعل-- نعم، أعرف ما سنفعل. سأعود، صحيح؟

do now I'm going to return okay so if

وبالتالي إذا كنا نريد target،

there's if we got a target and the

وكان له parent من قد يعود ---

target is a paranoid return and what

وما سنقوم بفعله هو أننا-- في الواقع،

we're going to do is we are going to

سأقوم بإعادة ذلك. إذا لم يكن هناك target-- أوه!، بإمكانك أن تعكسه بهذه الطريقة.

actually undo that move that back in if right if there's if there's no target oh you can do it you can invert it that way

أيمكننا ذلك؟

you can you know just do it

سأقوم بذلك بالطريقة البديهية.

I'll do the obvious way to do more again

أنذهب إلى "دي مورجان"، أم ماذا؟

or what there's there's a there's a knot

ليس وهو نفسه مثل أو إذا حصلت على عدة--

and is the same as all if you've got

نعم، قانون "دي مورجان".

multiple yeah DeMorgan loss okay there

حسنًا، ها نحن ذا.

you go and I know of it or in order to

وأعرف كيف استخدمه، أعتقد.

use it I think can be very helpful with

يمكنها أن تكون مفيدة للغاية مع تعبيرات if الطويلة. نعم

along if expressions yep right so if

حسنًا، إذا كانت تقريبًا غير مرئية،

it's nearly invisible if we haven't got

إذا لم نحصل على target ولا target parent node،

a target or we I'm going to target

عندئذ وبشكل أساسي ما سنقوم

parent node then basically what we're

به هو أننا سنقوم بمراجعة دقيقة

gonna do is we're going to say I'm gonna

لكل ذلك الإجراء المعقد هنا، وربما يكون ذلك كافيًا.

go through this whole rigmarole here and that may be enough so we only had it to

وبالتالي لقد أضفنا اثنين فقط من event listeners

event listeners card is not defined

البطاقة غير مُعرفة.

where's the card

أين البطاقة؟ أوه!، إنها في نهاية الانتقال. ها نحن ذا.

oh it's on the transition end there we go I think I think I've got it

أعتقد أننا حصلنا عليها.

we might have have it we might have it I

ربما نكون حصلنا عليها.

think we might have it

ربما نكون حصلنا عليها. أعتقد ربما نكون حصلنا عليها. رائع، يا له من تنقيح.

wow what a debo likes speed up the

دعنا نسرع الإنتقال

transition and see if it feels right

ونرى إذا كان سينجح الأمر. قد نضيف بعض البطاقات، أيضًا.

maybe had some more cards as well yes to

عليك أن تجعل ذلك من التأثيرات الصوتية. لقد نجح الأمر!

me the Sun affects yes nicely done

أحسنت صنعًا. آسف.

sorry mm it's very exciting right let's

إنه أمر مثير جدًا. لقد كتبنا كود يعمل بالفعل.

we have written code that works I know

أعرف. مذكراتي العزيزة، كتبت كود، ونجح الأمر.

dear diary wrote code it worked

دعنا نضيف بعضًا منهم هنا.

let those add some more let's just add

لنضيف فقط-- لنضيف زملائنا من--

let's add our colleagues from what was

لقد كانت فكرة سيئة. ماذا أفعل؟

about idea what we're doing right go on

صحيح، استمر.

my colleague no no they didn't come into

إضافة زميل-- لا.

the room here with me

إنهم لم يكونوا معي هنا في الغرفة.

that's true no I mean like totally

ذلك صحيح. لا، أقصد مثل رجال التصنيع تمامًا. أوه!. "آديووووو"، "جانتي ماكجانتي جانت"

tooling Oh Rd REO and gone team ik go aunty technically correct yeah and it's

هذه صحيحة فنيًا.

نعم. هذه هي أسمائهم القانونية.

their legal names some there's some guy

هناك شخص عملت معه، "جاك ارشبينجل".

I work with Jack Archie bungle think he

أعتقد أن كان يعمل في شيء يخص streams.

does something to do with anything I've

لا أعتقد أنني سمعت عنه من قبل. لا؟ "سام Dutton - The Dutts"، ها نحن. صحيح، لدينا المزيد، وبإمكانكم أن تروا أنه يعمل.

ever heard of them no some the dots dozen there we are right we have more and now you can see that this is working this is working this is what can we can

يمكننا حتى الانتقال للأسفل، تخلص من "آدي"،

even scroll down Garret Oh buddy and you

وبعدئذ يمكنك أن ترى الصفحة تنهار.

can see the page is actually collapsing

وهو نوعًا ما في المتناول، ونريده بقدر ما.

wheelers which is really kind of Handy it's kind of what we want like hey we

يعجبني كيف قلنا تخلص من "آدي"

said get rid of Eddie all right I didn't

أوه، لم أقصد ذلك-- أقصد فقط هنا على الصفحة

mean you know I mean I only on the page

أقصد، إنني لست-- على أي حال، جيد جدًا.

I mean I'm not just anyway so good I'm

إنني سعيد أننا أجرينا هذه الدردشة.

glad we had this chat right so there you

صحيح، إذًا ها نحن ذا.

go

ما سنقوم بفعله، اسمح لي بالسؤال،

what we're gonna do is let me ask are

هل هناك أي أسئلة أخيرة من الدردشة؟

there any final questions from the chat

هل هناك شيء تريدون معرفته؟

anything anybody wants to know no we had

لا، لقد كان لدينا مساعدين متطوعيين أجابوا عن

a few volunteer help that answered a lot

الكثير من الأسئلة بالفعل.

of the questions already

حسنًا، في هذه الحالة، دعني

um well in which case let me say thank

أوجه الشكر للجميع

you to those people we really appreciate

إننا نقدر بالفعل مشاركتكم في

you chiming in and being part of this

النقاش وأنكم كنتم جزء من هذا الإعداد الصغير الذي أجريناه اليوم.

little so that we've had today okay

حسنًا، هذا ما سيحدث في وقت لاحق،

here's what's gonna happen next then

سنقوم برفع هذا الكود على GitHub repo.

we're gonna push this code up on to the github repo we are going to

ماذا سنفعل بعد ذلك؟

what are we gonna do after that well

حسنًا، على الأرجح سنجري استبيان لنرى

we'll probably run a poll to see which

أي موضوع تفضلون للحلقة القادمة.

ones you want next because there's gonna

لأننا سنقدم المزيد من الحلقات

be happening again at some point yeah

في مرحلة ما. أتعلم-- لم تصدر صوت البطة بعد.

you know doesn't still doesn't quack I

لا يزال عليك أن تشتري الترقية الجديدة أولًا

don't I still have to pay the upgrade first Oh next time it's gonna work I

ستعمل المرة القادمة، أعدك بذلك.

fine okay well in which case I guess all

حسنًا، في تلك الحالة، أعتقد أنه

is left to say is thank you very much

لم يتبقي سوى أن أشكركم شكرًا جزيلًا على انضمامكم لنا،

for tuning in and I've been poor Lois

كنتم معكم "بول لويس"

I'm dust Surma yeah he really is he

وأنا "دو سورما" نعم، إنه كذلك بالفعل.

finds on Twitter a taro twist at dust

يمكنكم أن تجدونا على Twitter @aerotwist, @dasurma.

لا تنسوا أن تشتركوا على قناة الـYouTube.

don't forget to subscribe to the youtube

وهي youtube.com/chromedevelopers,

channel at youtube.com slash chrome Developers and I guess we'll see you on

وسنراكم على الجانب الأخر.

the flip side - hello thank you for

إلى اللقاء. أشكرك على وجودك معنا.

Similar videos:

Swipeable Cards: TL;DW - Supercharged
Chrome for Developers
74.5K views 329 likes 3 dislikes 26 Apr 201664% match

[ SUB INDO ] BTS LIVE on VLIVE - BE.T.S 💜 19.02.2021 || bts live 🔴

2.7K views 195 likes 2 dislikes 19 Feb 202132% match

0 views 0 likes -1 dislikes 07 Jun 202632% match

[PT-BR SUB] [ENG SUB] [HD] LIVE BTS ALBUM BE DELUXE BE.T.S 💜 [19 FEB 2021] [INDO/THAI SUB]
Van Bangtan
4.5K views 316 likes 2 dislikes 19 Feb 202132% match

0 views 0 likes 0 dislikes 07 Jun 202632% match

[ENG/INDO/JPN/ESP SUB] BTS VLIVE 19022021 BETS💜
ram
7.8K views 261 likes 4 dislikes 19 Feb 202132% match

BTS ~ HOME PARTY ( FULL ) { Sub Indo }
Diyah Aini
22K views 995 likes 4 dislikes 23 Apr 202032% match

0 views 0 likes -1 dislikes 07 Jun 202631% match

271.5K views 0 likes 0 dislikes 07 Jun 202631% match

0 views 0 likes 0 dislikes 07 Jun 202631% match

NCT Dream & Kun Vlive [Eng/Indo Sub]
Sijeuni
114.4K views 4.3K likes 12 dislikes 01 Dec 202031% match

[ENG/INDO SUB] NCT SIMON SAYS VLIVE | NCT VLIVE 181123

21.1K views 1.6K likes 1 dislikes 21 Feb 202131% match

[ENG SUB] BTS LIVE VLIVE FULL 2021 03 13 JIN, RM, JIMIN VLIVE 2021
btsminrafa
4.3K views 167 likes 0 dislikes 13 Mar 202131% match

ENG ATEEZ - ANNIVERSARY ATINYDAY 2020 (atiny day) vlive (ENG/ESP/INDO/JAP/COR/POR)
Chas Channel
31.3K views 1.2K likes 4 dislikes 17 Nov 202031% match

0 views 0 likes 0 dislikes 07 Jun 202631% match

0 views 0 likes 0 dislikes 07 Jun 202631% match

0 views 0 likes 0 dislikes 07 Jun 202631% match

Kumo no Mukou "Yakusoku no Basho" BD sub indo

68.2K views 700 likes 28 dislikes 18 Aug 201730% match

MONSTA X - 릴레이 LIVE : 켠셰프의 쿸쿸 with 민셰프 #6 VLIVE
Chas Channel
1.2K views 59 likes 0 dislikes 28 Dec 202030% match

BTS Jimin (ft Jin, RM) Vlive [ENG SUB/INDO]
BANGTANie TV
6.8K views 166 likes 1 dislikes 16 Jan 202130% match

Film Horor Terbaru "The Covenant"2017
Xvx lee
4.6K views 10 likes 6 dislikes 03 Apr 201730% match

[ENG SUB]LOONA이달의 소녀 X LieV (Full Episode)
LUMIÈRE PH
177.5K views 7.2K likes 30 dislikes 29 Oct 202030% match

[Sehun Cut] Every episode of BUSTED! Season 2 but it’s only Sehun [ENG SUB]
Netflix K-Content
804.9K views 29.3K likes -1 dislikes 14 Nov 201930% match

[ENG/INDO SUB] ENHYPEN VLIVE 012221- SUNGJOON,NIKI, JAY AND LEADER JUNGWON
EnhypenLive
6.2K views 187 likes 0 dislikes 22 Jan 202130% match

0 views 0 likes 0 dislikes 07 Jun 202629% match

0 views 0 likes 0 dislikes 07 Jun 202629% match

0 views 0 likes 0 dislikes 07 Jun 202629% match

BTS VLIVE BE.T.S (ENG SUB)
Mochii 95
9.4K views 130 likes 3 dislikes 19 Feb 202129% match

PHP Syntax
CS50
15.3K views 82 likes 6 dislikes 03 Nov 201529% match

BTS Sub Indo Vlive : BE.TS 2021/2/19

1.8K views 187 likes 1 dislikes 19 Feb 202129% match

Settings Privacy About Contact Donate