 Jadi, kami ada beberapa media sosial. Bukan sosial, tapi beberapa sosial. Kami telah mempunyai CSS di Twitter Singapura. Jadi, jika anda melakukan tukar, anda boleh tukar hashtag TalkCSS. Dan ya, kami segera, tidak mempunyai perusahaan kami, mempunyai 300 followers yang sangat menarik. Sangat berjalan-jalan. Kenapa? Apa pun, ya. Okey, jadi... Kalaupun ada lebih banyak followers CSS Singapura yang saya mempunyai... Apa pun. Jadi, jika anda berjalan-jalan dengan kami untuk pertama kali, kami telah mempunyai gitar, yang adalah online 24-7, kerana banyak kami tidak suka melakukan kerja hari kami. Kami lebih suka membantu anda melakukan masalah CSS. Jadi, jika anda melakukan masalah CSS di tengah hari, seseorang akan menyebabkan anda. Kerana seperti yang saya katakan, kami tidak suka melakukan kerja hari kami. Kami mempunyai bulan $0. Jadi, kami telah mempunyai di GitHub.io. Terima kasih, GitHub. Tapi kami mempunyai... sedikit desain website. Jadi, jika anda berminat, dan website hanya menyebabkan seperti semua seseorang yang berjalan-jalan berjalan-jalan, yang kami telah mempunyai selama tahun. Okey, kami berjalan-jalan. Jadi, biasanya ada tiga logo. Pada bulan ini, hanya ada dua dan setengah. Kerana kami membangun .sg, yang sepatutnya adalah sebuah lokasi apabila orang berjalan-jalan untuk mencari tempat-tempat di Singapura, dan yang telah berjalan-jalan... ...berjalan-jalan. Berjalan-jalan? Tidak, mereka sekarang di bawah www.engineers.sg dan www.engineers.sg yang diperkenalkan oleh orang yang cantik di belakang yang mencari tempat-tempat yang sangat berjalan-jalan di belakang. www.engineers.sg membantu mengenai sepanjang setiap tempat-tempat di Singapura, seperti yang terbaik mereka dapat. Ia adalah percumaan sepanjang sebuah tempat yang berjalan-jalan. Dan mereka juga mengenai kita hari ini. Jadi, kami mahu berterima kasih. www.engineers.sg Kami juga mahu berterima kasih kepada Jion. Dia biasanya datang kadang-kadang dia tidak datang, tetapi dia seperti... ...dia adalah... ...dia adalah kakak yang berjalan-jalan dari Singapura. Jadi, dia mempunyai t-shirt, mempunyai t-shirt, mempunyai... ...mempunyai apa-apa yang boleh diperkenalkan. Saya rasa dia mempunyai soks secara recent untuk BHP.com. Jadi, kami mahu selalu berterima kasih kepada Jion kerana... ...pada keadaan pertama ini, Singapura CSS t-shirt yang diperkenalkan oleh Jion. Jadi, kami selalu berterima kasih kepada dia walaupun dia tidak di sini. Um... Bergerak. Hocker Laman adalah Hacker Space. Jadi, kami mahu berterima kasih kepada Hacker Space dan Lutor, yang telah menghubungi kami pagi ini. Untuk hukuman yang cantik, projekter yang baik, internet yang baik dan kencang. Terima kasih, Hacker Space. Dan kami mempunyai perkara CSS untuk Hocker Laman. Jika anda berada di sini sebelum ini, saya akan menghubungi saya lagi untuk masa 20-an. Ada 148 perkara CSS yang dibunyai. Jadi, itu cukup untuk 12 tahun yang terbaik untuk berhubungi CSS yang kita tidak fikir untuk 12 tahun yang terakhir. Ya, kerana kita mungkin tidak akan berakhir 12 tahun yang terakhir. Jadi, perkara ini adalah Peru. Apa yang bermakna adalah anda dapat menggunakan perkara Peru dalam CSS-an. Dan perkara ini akan menjual. Anda tidak perlu melakukan kode haks, tetapi jika anda mahu menggunakan kode haks, CD853F atau RGBA. Tetapi Peru bekerja baik-baik saja. Anda dapat menggunakan perkara CSS untuk Laman. Perang-perang. Mereka tidak ada 3 perkara. Perang akan lebih tinggi. Anda akan pergi ke rumah sedikit dengan lebih banyak energi. Ya, dan... Peru adalah Peru. Peru adalah warna coklat. Jadi, jika anda merasakan perkara Peru, Peru akan bergerak. Okey, jika sesiapa-siapa ada perjalanan, kita akan pergi ke akhirnya. Ini adalah sebuah segmen yang semua orang yang berhubungi akan berjalan-jalan. Ia disebabkan CD853F dan CSS berhubungi untuk sebulan. Jika saya tidak di sini, ia tidak berlaku. Tetapi kerana saya di sini, kemungkinan ia akan berlaku. Jadi, perkara berhubungi untuk August adalah bahawa 542 stabila dikeluar. Dan dalam ini, ada beberapa update kepada Deftools. FireFox Deftools, saya rasa terutamanya semua orang menggunakan FireFox atau terutamanya orang yang menggunakan Chrome? Chrome? Saya dah nampak sesuatu. Semua anda hanya berharap anda tidak menggunakan Deftools. Baiklah. Tetapi, jika anda tidak berhubungi FireFox Deftools, ia sebenarnya lebih berubah dari hanya sejauh lalu. Jadi, mereka ada perkara yang terbaik CSS Grid Inspector 2. Jadi, jika anda membuat layanan CSS dan anda ingin menggunakan Grid, anda berharap untuk menggunakan FireFox Inspector. Tetapi, bahawa jawa-jawa keadaan Deftools telah menjadi lebih baik. Seperti kemudian update yang mereka menghubungi untuk 63 adalah bahawa ada simtax yang berhubungi di konsol dan sebagainya. Jadi, ia sangat keren. Meskipun orang menggunakan Deftools Chrome, saya rasa harus beri FireFox sebuah peluang. Editor yang menggunakan Path adalah menggabungi oleh Deftools. Kerana ada ini, CSS Property disebabkan CSS yang menggabungi tekanan untuk mengulangkan keadaan Deftools. Satu-satunya, saya akan bercakap tentangnya lagi. Tetapi, ia sekarang menggabungi oleh default dalam versi stabil FireFox yang bagus. Grid Inspector adalah penggabungi update seperti yang saya beritahu. Jadi, jika anda ingin menggunakan Grid, jika anda sudah menggunakan Grid, atau anda ingin menggunakan Grid, betul-betul menggunakan FireFox Deftools. Banyak update css spesifikasi. Jadi, sebahagian ini sebuah update sebuah saya akan bercakap tentang css spesifikasi yang dapat update. Saya tidak akan bercakap dengan dalam detik tentang mereka, hanya untuk beritahu anda bahawa css spesifikasi ini ada. Jadi, anda sudah mendengar sebelumnya. Jadi, apabila masa datang, anda perlu menggunakan sesuatu yang penting, anda seperti, saya rasa saya mendengar perempuan-perempuan dalam tanda-tanda bercakap tentang anda sebelumnya. Kemudian, mungkin anda akan menggabungi dan menggunakan FireFox. Tetapi, anda tahu, jadi sekarang semua css telah digabungi menjadi jual-jual. Dan mereka mendengar um... dalam css2, ia seperti satu jual-jual jual-jual dokumen, dan ia sebenarnya cukup teruk untuk update, untuk menjelaskan dan sebagainya. Jadi sekarang mereka telah menjelaskan, ia membuatnya lebih mudah untuk menjelaskan dan menjelaskan juga. Jadi, um... ada sebenarnya seluruh spesifikasi untuk overflow, yang adalah ia menjelaskan display bergantung amat konten dalam jual-jual. Jadi, apa yang berlaku apabila kontainan anda terlalu kecil untuk kontainan anda menjelaskan jadi bergantung tidak perlu menjelaskan situasi anda. Jadi, semua... semua negara-negara dibuat dalam jual-jual ini kerja baru-kerja baru-kerja dalam jual-jual bergantung jadi apa yang berlaku adalah bahawa dalam css2 betul yang... sebuah chapter 9 atau css2 telah dibuat untuk menjelaskan. ia adalah sebuah jual-jual. Tetapi, pada masa apabila css2 datang mereka hanya 2 jual-jual jual-jual ia seperti jual-jual dan dalam jual. Tetapi, um... seperti sekarang kita ada jual-jual yang lain kita ada flex dan grid dan mungkin kita mungkin atau mungkin tidak ada lebih banyak juga. Jadi, mereka memutuskan untuk membalikkan setiap jual-jual ke dalam jual-jual mereka sendiri. Jadi, jual-jual dalam jual sekarang ada jual-jual sendiri um... adalah bergantung dalam jual-jual. Jadi, ia untuk... ia menutupkan semua jual-jual yang diberlaku dalam jual-jual jual-jual jadi perkara seperti jual-jual jadi saya tidak fikir banyak orang sebenarnya menggunakan jual-jual. Biasanya, anda dapat menggunakan teks seperti jika anda mempunyai jika anda menulis sedikit jual-jual anda dapat membuat yang pertama seperti kedua-duanya seperti jual-jual yang dimulai anda boleh melakukan itu seperti dengan sebuah element sejual yang diperkenalkan dalam jual-jual. Jadi, semua ini diberlaku dalam jual-jual dalam jual-jual. Jual-jual jual yang terbaik telah diberlaku jadi jual-jual yang terbaik diperkenalkan dan ada sebuah seksual yang diperkenalkan kerana mereka tidak dapat membesar dengan segala-galanya bagaimana brosel harus mengandalkan sebuah seksual. Biasanya jika anda boleh mempunyai hubungan antara anak seksual seksual. Jadi, saya rasa ada banyak kontensi tentang bagaimana saya akan mempunyai. Jadi, mereka hanya memutuskan sebuah seksual memlepaskan sebuah seksual dan kemudian cuba memperkenalkan ini sekali lagi. Jadi, saya rasa ini memperkenalkan mungkin atau mungkin tidak mungkin atau mungkin tidak keluar seperti akhir tahun ini. Jadi, jika sub-grid mempunyai beberapa kecuali. Kita mungkin akan mendapat seseorang untuk bercakap tentang kecuali sub-grid kecuali lebih banyak seperti semuanya sebelum akhir tahun ini. Jadi, tetap berhati-hati. Boks model lagi saya beritahu betul. CSS 2 Chapter 9 adalah seperti segala-galanya jadi mereka sekarang kita juga mempunyai boks model seksual dan memulainya dalam sebuah seksual. Jadi, sebenarnya menjadi sangat mudah. Jadi, mereka hanya memutuskan seksual dan melepaskan kerana beberapa orang telah bergerak ke model CSS display. Model display sangat lama dan bergantung. Sebenarnya, ia menyebabkan segala-galanya. Bila anda katakan selektor anda adalah display x. Jadi, semua kecuali yang berbeza anda berbunuh, anda membunuh, anda mempunyai, anda berbunuh, anda berbunuh, anda berbunuh. Semua akan masuk ke model display. Jadi, model itu sebenarnya sepatutnya besar. Tetapi boks model model telah dibuat. Jadi, sebagainya sebuah chapter atau CSS2 split into three parts which is box model display model and and a few of the layout modules. Scroll snapping is a thing. If Thomas Thomas Gorison was here he will have opinions on this. But basically, you can do scroll jacking natively with CSS instead of jahat script. It's still being worked up but actually there are use cases for this especially on touch screen. So, if you are like you sort of do a maybe slide show then you halfway if you do a halfway it will not stop halfway it will snap either to the front or to the back. You can do that with CSS using this this. It's not a candidate recommendation so might be coming up quite soon. Values and units very important we use a lot of CSS units most of us only use pixels, m's and maybe percentage sometimes but there are a lot of other units that you can use until got level 4. So, there's like VI, VB, IC, CAP, LH R, LH I don't even know what those are but those are new. So, if you're interested you can go and find a bit more. I think there's some articles on this level 4 units already and a few of mathematical functions actually min and max are pretty good because what they allows us to do is they allows us to do more flexible things like we can define dangers and things and they have updated CAP to be more versatile than it was before so that's great. Last one is logical properties and values so this is more relevant if you do if you are other than the default horizontal left to right because on like most if you read English all the text flows like left to right top to bottom but if you switch your vertex your writing mode to say Arabic is right to left or traditional Japanese then is vertical the physical directions get a bit confusing when you're doing styling so they introduce these logical properties so instead of physical values of top bottom left right it goes like block start or in line start that kind of thing so it's like cultural agnostic directions okay we are done you are sick of me now so we shall now introduce our officials because they are called the liners because it's Chris Chris' wife Sarah and Chris' son Elijah so known as the liners going to be talking about a very interesting topic so i will let Chris introduce his family moving on hopefully interesting topic at least you need the whole thing uh yeah okay ah Sarah looks being good at mic yeah you can get the microphone oh running mode uh it gets recorded oh okay no worries because i'm Sarah look how much code do you write none i looked at that and went can we have a round of draws for the liners to build Elijah knows how to write the script so he's following in multiple status so he's the one reading at the back he's so good Sarah is a primary school teacher and you might be wondering why a primary school teacher is going to talk to you about anything that's got to do with CSS or Frontend Dev and the reason Sarah is here tonight is because she recently studied huh she studied Kirby um she studied uh as a teacher you need to learn about learning difficulties in students so you can address them and hopefully correct them as they go um and while Sarah was studying into the details of dyslexia um she started telling me stuff that was really interesting and i thought like this is really relevant to what i do we should do something and talk CSS about that so several months later here we are um you happy with the light staring at it yeah as you prefer to be over here um okay that's fine yeah thanks that'll make me make it a bit easier if you're a regular talk CSS attendee and you've heard anything that's been baked this is why hope you enjoy it so we've brought the baker along i don't just bake i am a full-time teacher mostly bakes thank you um shall we talk about language or shall we go straight into or let's have a look at dyslexia and how it might affect what you're doing more than anything else dyslexia in the English language is one in 10 it's quite common and it's across a broad range of a spectrum basically so these people will not only have difficulty reading what you put on your web page they'll have difficulty understanding and it will take them time so lots and lots of text can be very very overwhelming and very difficult for them one of the key things that Sarah learnt about dyslexia is it varies from one language to another what is dyslexia exactly well it's a neurological disorder that we that they think is genetic mostly and it affects the pathways in which we think so the processing of words the processing of information it's also affecting your organisational skills as well so it's quite a lot of things to cover makes it very difficult to read makes it very difficult to comprehend and if it's not addressed early it can be really detrimental for your later life especially with comprehension and reading so how do you see dyslexia in a student or in a person and how is it obvious like when you see someone what are you looking for to diagnose we look very young so Elijah's age is a good age he's 7 here so you can have a look around the ages of 6 and they know earlier now that they can look at brain imaging and they can see when they ask some questions to how to read or how to say something they can see the pathways aren't quite correct so we can now diagnose it really early which is really really wonderful but we might look for difficulty reading words when they start to read it can take a long time and I'll do something with you in a moment to get you to get an idea of how it might take somebody a long time to read with their writing they might start reversing letters they might miss letters that are quite obvious especially in English English is a really hard language to be able to read to be able to write to be able to spell makes it very difficult so especially in the English language the reversals of letters which order they go in we also look at their organisational skills can this child turn up to school on time can this child go to the next class on time so at a very young age we can look at those things what is it about English that makes it so difficult English is not a very transparent language you think about the way that you spell a word in the word 2 T-O-O T-W-O-T-O pronounced exactly the same way three different ways of spelling three different meanings altogether it makes it really hard in that it's not what we call a transparent language where if you think about Malay I don't know how many of you have a bit of it we should do when we catch the MRT we see all the language we can pretty much look at the letters and go oh it says this and we can say it whereas the English language it could mean something or it could sound completely different to the way it's written is it the word fish you can spell P-H-O oh this is an old this is an old phonographic yeah you can explain this and when was that during the 80s or 90s no we're going a long way back they got influenced by the French they got influenced with Latin and they brought all different languages in so it's just a big mish-mash the English language and we all know that it's a hard language to learn which one what's that brandesbus but there was a movement at one point to encourage kids to spell however they feel like because expressing themselves is more important than actually getting the spelling right was the theory and the example was given for the word fish you could spell it P-H-O-T-I because you have P-H sound you have O from women and Ti like function like that's a sure sound so isn't that how you spell fish and not really so it didn't really carry on very well but that's the difficulty of the English language it's not easy to learn it out of curiosity who is not a native English speaker here what was the first language you learnt as not English and hearing in your house your mother tongue language yep not English lots of you how did you find learning the English language brandesbus you got an over that especially when it came to coming into school and writing it how did you find that anyone ridiculous yes it is i can't spell anything i can say in the words but i can't spell them my mum is an Italian and she learnt English as her second language in her 20s and when she used to write shopping lists the spelling was just we used to look at it what do you mean what do you mean was is and she reads widely but she has difficulty still spelling those words out and it is hard the English language is incredibly difficult and full of ridiculous rules makes it even harder to teach when we talk about dyslexia you said one in 10 display signs of dyslexia yes is that the same in other languages like in Mandarin nope no uh the English language in particular other language is not so much it depends on the transparency of your language i was listening to when we got together with this particular course we did a lady whose mum was Italian and she'd never heard of dyslexia in her 40 years of teaching so it depends very much so on the language if you're finding English harder then you thought it should be this is why really sometimes partly why it might it might not be but the English language is hard in general anyway so it's rated as a difficult language very it's it's opaque yes okay um you mentioned before with your mum that she can speak really well but when it comes to written language she has difficulty is there something in dyslexia that what's that got to do with anything why is it so difficult to write and to read compared to speaking when people with dyslexia what we do is we take all the tiny bits of the English language apart and then we make a word most of us can just go straight away that's the word that we can read they have to what we call decode basically every single graphing the single letter put it together try and make sense of what that word is we have direct access paths once we've read a word a few times we understand immediately that's what the word is and we have that direct access to that word it takes a lot longer to process those words when you have dyslexia the pathways a lot longer it's just a lot harder in general can I you have your exercise okay can you please pair up with somebody and you need i know it looks a bit frightening can you please pair up with someone someone who's got a timer like basically on your on your watch or on your phone yes can you grab a partner for me i'm sorry i'm very interactive i'm a teacher have you got your exercise or you need to actually no i've got it show it when we're paired up who's not in a pair you're not in a pair we'll pair up okay so can you nominate someone in your pair to be a timer and somebody who's going to read some words for you it's not hard it really isn't don't don't stress it's it's i do i do this with six year olds so it's quite all right and then i'll explain yeah don't worry it's okay so what i'm going to do is i'm going to put a list of what we call irregular words words that we can't spell by looking at them very quickly or um yeah words that don't sound the way that they are written it will be okay um and i want you to time how long it takes to read through that list so read them out loud to your partner and we'll have a look and see how long it actually takes you ready it's not all right okay it's shush it's not okay is it coming up oh it's not on which other screen you've got two screens oh i'm not good at these things we can just mirror that's why yep this this is not my made one contribution i can use apple tv in my classroom that's about it ah good okay here are your words they shouldn't be a little bit smaller than that it's okay are you ready can you time set go yeah okay do we have some times i heard a few times as we were going around what did you what did you get 23 seconds 14 yep that's what i would expect 17 good 10 whoa fast fast decoder fast decoding that's fast decoding skills that's that's what we want really we want to be able to have that quick access anyway so um Elijah was i had two students who i did testing on Elijah is six he's just turned seven and he read it in 30 seconds he's a very strong reader so i would expect you guys to read it about 20 30 seconds which is good another student i had who had great difficulty reading same age took four and a half minutes so she would get to a word like shu and she would go oh i and she would go through each individual letter that she went through and it took her a long time four and a half minutes to do this entire list yes she's a beginning learner yes she's a beginning reader but these words aren't they're not the same that we don't pronounce them the way we read them word because you could pronounce it several ways it gets harder and harder with things like height h e i g h t my goodness that's not the way we would expect to pronounce that so people with dyslexia or even reading difficulties have a great hard time sitting there and reading every individual word and then they have to try and make sense of what they're reading so you can imagine taking every single word and trying to put it together and comprehending what you're reading when you're doing your your coding and when you're putting things on your web pages you need to be aware that there are people who have reading difficulties so lots and lots of content can be hard we do have ways around that which is really really wonderful and we'll get into a demo over that soon you said that you try to diagnose this in young kids when they basically when they start reading around six years of age if you never get diagnosed if you don't have a teacher who even recognizes it what happens it gets so you grow out of it no or what happens no it just it gets harder it gets really hard you can imagine your everyday life things that you have to read and how long they would take it's exhausting as well mentally it's exhausting so you are tired you don't want to read and that's what we'll get a lot of problems later on with our kids especially in like the oldies so how how do these people do in school then not very well a lot drop out and that's that's a reality for us we have that reality i hate to say this but is it because they're stupid no people with dyslex you're actually quite intelligent they've found usually they're average or above average in other areas so they are very intelligent people it's not it's the way their brain works but we can do a lot with it these days and there are lots of different techniques that um different dyslexics we'll use not one thing works for everyone some things work for some people and it's a matter of finding with each individual what it is that works for them can i demonstrate the thing okay okay so google are fantastic in what they've created they've got this wonderful thing up here it's up there yeah it is read and write for google chrome which is wonderful we think of text readers out there as something for people who are are blind and they can't they can't see what they're doing this is also for dyslexics to be able to to read what they've got in front of them so this is a channel news asia thing i i like reading my news and it will this is got sound nope but it will it will read it for you it will highlight it Singapore oh we do have sound shh guns by the bay set to light up the skies as it celebrates the midwodom festival for two weeks from the 6th of september to the 24th of september so it reads it to you we talk about that that's that's great for people who are blind but yes and it take did you notice it took things like set and it read it as september which is really really helpful another thing that they found can really work for dyslexics is taking and so something i do in my classroom is taking the content and making it so it's a nice just a small chunk so they can understand so they have a screen mask so you can highlight sections just that bit to understand just that bit to get through and then you can move on to the next bit what is it about this that helps it breaks it down into something that's a lot easier to be able to to read and to comprehend because you've got to understand what you're reading as well so i guess it's easier to focus on that particular chunk of text and you won't be distracted by everything else that's there yep that um this helps for particular certain people i know it's helpful one student i've had it didn't help for another so it depends on the person really the other things that it does let's go and get out of here the other things as it does as it gives you a dictionary if i look up the word autumn see if it'll do it for me it'll give me autumn which is the lovely one to be able to read but more words than anything else it will also give you a picture dictionary is it going to give me one for autumn yep so it gives me your head's annoying it gives you a nice picture of autumn which is great for young children as well but it also makes a little bit easier for them to be able to understand what the word autumn means one more thing that it does where is the simplify i'm still learning to use this one myself where's my simplify gone ah simplify page you talk about this more than i do because i didn't quite understand when you were talking about the things that aren't quite done properly the characters aren't quite done can you spot the subtle difference between what we had there before the whole point of simplify is it's similar to read a mode in browsers like safari it takes away as many complications as possible and as Sarah is showing you can actually reduce the amount of content on the screen at any given time it's also is it a sans serif font this is probably less obvious if anyone was paying attention they do flip the font as well apparently more common sans serif font are preferable for people who are dyslexics so if you have a site with lots of crazy fonts it's just really difficult to try to interpret not everyone has this so especially when you've got body text you need to think really carefully about what you're doing and Sarah of course that she studied recommended 14-point aerial obviously there are more fonts than that and there are better ones than aerial but the text size is important as well we talk about this in practice of good design generally that you don't want your text to be too small dyslexia is a very good reason why you don't want that the other thing is contrast contrast is one of those other things that helps some people find easier to read the white on black they have other contrast i find this quite garish but it works quite well for some dyslexics for different colors so in the classroom for us we might print on a different color paper depending on the student and probably if you've heard beforehand they used some used to wear glasses color glasses and that used to help some people beforehand but it depends on the individual yeah one thing that's not working ideally here i wonder what impact that has typically when we design text we try not to go beyond waging is 80 to 120 characters or something okay in terms of width because it's harder to comprehend if you start reading here and you get to the end coming all the way back is difficult i imagine that would impact on dyslexics as well some once again some who is it better this way some okay some work better on a small screen some work something doesn't affect it all it's just the length yep so much yep that's what's about comprehension again keeping it yeah keeping it small those is perhaps that there are some characters that have not been entered correctly special characters that haven't been handled so whoever's working at Channel News Asia if you know someone working on their team please encourage them to fix their their characters we use this or if we're trying to get this used in our school because we found it really helpful for those students who do have those learning difficulties yeah we have gone through type contrast now animations is something that we see on websites how do they impact on people or dyslexic or have leading difficulties or it's a distraction because we know that people who are dyslexic have difficulty with organisational skills it's another distraction i don't know about you i can't stand 50 zillion animations on a page can be sensory overload for some people as well what's the sensory overload i mean what's that too many flashing lights it can affect the way that you think can shut some people down so they'll basically not even function yep can get to that not as much for dyslexics unless you're careful about them which is what we we talk about as could practice anyway but the next time that someone's pushing for autoplay video this is why you can actually stop someone from functioning and put them into a ball in the corner because your autoplay video thanks generally not with dyslexics so that's looking into more things that yeah yeah you talked about simplify simplify simplifies the i'm saying simplify a lot the display yes something else that affects dyslexia is we saw the word list that we had before they were the complex words yes so how can you improve your copy to help i don't know about that so much we have lots of words in the english language maybe not too much well something i've seen before i think zeal who's a almost like our third member of talk css published something recently about simplicity of language trying to avoid complex phrases and can we find anything in here that looks complex it should be written well since it's written by a journalist it's okay but you yeah even just being careful about your phrases something i've seen before is avoiding abbreviations abbreviations so if you've got it's or there's or something like that as in there is spell it out and it's a lot easier to comprehend because you don't have to think about whatever else is going on this helps your readability of your content for people who have english as a second language it helps people who are dyslexic as well and given you know if you're actually delivering content in english it's all the more important that you focus on that um when we were talking about this we talked about forms filling out forms which everyone loves right these forms are so cool i've seen so many from chris it's quite funny um does dyslexia have any impact on that yeah this is back to organisational and comprehension keep it simple really keep it simple as my u5 teacher had the kiss method keep it simple stupid keep it really basic as much as you can people don't want to be trawling through all of your information so in effect it's basically everything that makes us not like it but magnified is that a reasonable way yeah that's a good way you just imagine being so you know at the end of the day we are tired we are all tired you imagine that after reading for five minutes it's quite exhausting awesome do we have any questions it's okay is this an extension or is it it's a crime extension yeah it's paid as well we've it's a 30 day demo which you've got but it's a paid thing might yeah our school's getting it we're investing in it because we found it's so helpful for our kids with reading difficulties but it's a if you do have reading difficulties it's a wonderful addition to google makes things a lot easier yeah it's one of the difficulties of a lot of accessibility tools that they cost money because they cost money to develop and for a long time things like screen readers like you had to buy a screen reader now there are things like the voiceover in safari that are built into the browser so it's not so difficult especially as a developer like do you want to justify spending a subscription on this to your boss so you can test this out good luck anyone else that's great i think most of what is done by the extension could be done as part of the website most of it yeah you could offer high contrast modes as you see on some sites that would be very helpful yeah that would be really helpful this is the thing i found curious about this topic is um as someone who is quite passionate about accessibility generally we think about people who have difficulty reading either because they're blind or um like their eyes are fading so many of the things that we apply for that work for people who have difficulty reading because their brain is wired differently and this is just not something that we usually talk about very often it's just something to think about yeah okay thank you very much Sarah thank you for your first and probably only ever talks his let's talk i talk to kids i'm not very good with adults none of our first for the leanuts thank you for the live and for reading it back hi and our our next week go is william william has spoken ad-top css before so he's like go member is this your third time yeah yes you're all myself go member so anyway william recently publish and i did kind of smashing magazine so he's like famous now so we want him to remember us when like he makes his millions but basically when you'll get a website and then you'll scroll very enthusiastically on your phone so then he hits the bottom on your phone there's this u-dating boing at the bottom so basically he went through a whole lot of research to how to or how to take care of this over scroll bouncing effect yes also read his article smashing magazine support support locker guys rock applause please thank you it's going to be hard so let's let's start just a quick update i'm currently working on a casual and educational game called larry night and there's a website for it so what is scroll bouncing i'll i'll show you a demo of what it is so this is how this is how you'd expect this is how i expected my app to scroll like up and down and you reach the bottom but a few months ago i and this this will happen a lot in a lot of websites i think a few months ago i saw my app do this when it hits the top it bounces back but the biggest problem is that there's this white space at the bottom when you scroll down and this is not what i this is not good for my users i thought at that time so i spent a lot of time trying to get get this white thing out when you just get this stop to stop this bouncing and go to the next slide and so scroll bouncing is undesirable if you don't want you to see fixed elements on a page move so in my example in the example i gave i didn't want my footer to move up and down and show you that white space at the bottom and i just want to be fixed at the bottom and for it to stay there so i'll like show you again but i just wanted this this blue this blue footer to stay where it is not not like not like up there but like down there are a lot of things you can try i i spent quite a lot of time on this i'll just leave it i'll just leave it like and basically what i what i ended up with is these two lines over scroll behavior none and the footer i left as position fixed like if if there's any if you if anyone here can come up with something better i'd i'd be very very interested to to to know that but after all i did i i ended up with those two lines there were if you if you read my article there are a lot of things i did and that and even the things inside the article like that wasn't even that's not even like i think i i i just basically did a lot more than than what i showed in the article so so that's basically it the browser compatibility for major browsers is like chrome is supported firefox is supported opera supported edge is coming soon safari no support safari please and one last thing i want to say is don't be afraid to start coding so my color website it's quite bad like in my opinion but i built it a long time ago just for practice just to convert colors and to remember colors to use for terminal for terminals but it was more useful for something i didn't expect it to be used for and that's that's it that's it but this is so it's really you shouldn't you probably shouldn't go through those examples that's that's the issue but i mean i i wouldn't mind but it's like the thing yeah safari safari acts differently from firefox chrome and edge i think and it it keeps i'll show you what it does on safari like please browsers safari please so what it does is it still bounces which is which is not what happens in the other browser like which this this is not what happens to chrome chrome it just you know you scroll up and down it stays stays put safari this is what it does it's it's still no matter what like no matter what i try it still acts a bit differently i can't i can't fix i can't fix this one is it a browser but or it's it's supposed to write it yeah it's a it's a it's it's browser at this point i think it's browser like it's there's nothing i there's nothing i could do this is this is why i am open to like like i'm happy to to know about how i don't i just don't think like safari is just doing things differently and for this particular case safari is just acting differently on ios also so this is what a webview does in are the macOS or ios that you get that bounces part of the view so it's not even something that the browser like your CSS can't even interrogate that because it exists yeah yeah yeah it doesn't affect yeah you can't change that using CS yeah i correct yeah you're correct yeah i think safari first wants to do it properly with the ios i think they introduced this is what i they i think they introduced the bouncing so so apple introduced this bouncing behavior but right now they seem to be the ones that are a bit lacking behind i think they use the support disabling the bounce pre ios 10 after ios 10 they remove that function from safari so the apple is you enjoy bouncing oh i see no but but you you might like like pull to refresh and things like that so that's why you might want it but in my case like like people want it probably use the bottom thing if they ever use my app or any other like app you might come up with they might want to use the bottom part and not have it you know like white space at the bottom i think should i show the should i show the article article article i i don't what's the internet what's the O X T A 1 L 50UP zero X T A 1 L 50UP 50UP okay oh okay i'm scared this song is oh gosh don't i'm sorry about this the animations on this like chris was talking about the animations earlier like but i have to i think i feel like that i have to show that there's even worse like there's some even worse i have to just take them out because there's one flickering effect you don't want to get to that stage just use you know those two lines i i just show you just now just use those two lines these are okay apparently yeah do something dyslexia the chances are you will not be a programmer just learning more than one language programming language is a language so learning more than one is something dyslexia really struggles to yeah like like like some people i had a feeling that some people would look at this article and then just to see the animations and then like just close just close my article it seems we are talking about excessive animation ah since you're already here right okay more specifications for everybody so there is surprise and this is actually introduced this actually came out from webkit team so there is so like there are a lot of levels for CSS specifications so media query has gone up to level 5 so level 5 so most of us use media query very boring we will say or media query weak but actually there are like i think 18 different ah what we call like properties you can put in as the as the query so like color orientation height and one of this is like reduced motion so this was pioneered out of webkit apple's team so they talk about vestibular disorders so it's like if some people when they see too much animation then they'll just heat in man like they'll just like close your website because heat so like don't do that um so everyone we are all just temporarily able yeah maybe you'll develop a few more or i love this article already or maybe you'll just get older so so so yeah it's something to keep in mind if you are especially if you work in agency i used to work in agency right then like the designers very honam about like fancy animation so 10.1 introduce this it's media query level 5 so down down motion is wonderful until it's not blah blah where's the actual code my god oh okay okay pre first reduce motion that's the that's the query uh yeah so is this the okay that's myself maybe they realize that their own advertisement name bahi then they have to introduce a media oh wow so Apple such an Apple way to do it okay so this is the original apparently and this is okay so they just no animation like no none of those funny zooming things and what's this okay this this this zooming thing is apparently not good so oh apparently they also are made like it's like they must have gotten copies so anyway this is the this is a new media query that you could potentially use uh media queries they are find quite interesting kerana lain yang kita gunakan media query itu juga seperti sesuatu yang berlainan untuk layak atau seperti bagaimana kita boleh gunakan masin Windows ada seperti ini kontras yang tinggi tunggu biar saya lihat media query level 5 kontras iya saya rasa ah layak level iya ini benar-benar seperti fresh and new ia datang ia seperti meh so tidak semuanya tidak semuanya seperti baru jadi ia berbincang tetapi apa yang anda mempunyai seperti normal dim dan wash jadi apa yang dia katakan setiap setiap level sesuatu yang saya kata ini kepada saya tapi saya tidak boleh ingat jadi baik level tidak tidak seperti ini dash oh sebabnya ini level 5 oh okey tetapi ambil level oh jadi apabila device anda mempunyai anda boleh anda boleh mempunyai ia untuk menjadi lebih baik jadi ia seperti yang baik ia seperti kemudian app anda boleh sudah menjadi seperti responsif tidak hanya responsif kepada screen tetapi responsif kepada environment jadi saya rasa ia cukup menarik kerana ia di bawah kecuali kecuali environment media gambar saya tidak tahu apa yang environment brand nama tetapi ia sangat baru dan ini sudah berbeza jadi ia akan menjadi sempurna tetapi iya web ia cepat apabila um saya boleh beritahu anda atau anda mempunyai? anda mempunyai lagi untuk beritahu? um saya rasa anda boleh melihat website dengan diri website? saya akan pergi saya akan pergi saya akan bergerak saya akan bergerak tunggu saya akan bergerak apa yang anda boleh bergerak sesuatu yang menarik mungkin kode seperti sudah seperti seperti ini saya mencuba banyak saya rasa itu bukan banyak ia adalah lebih beberapa kode lebih sesuatu yang benar berlaku dan lebih banyak saya rasa saya rasa saya rasa saya rasa saya rasa saya rasa mungkin sebenarnya jika mereka sebenarnya saya tidak saya tidak merasak er semua ia menghubungkan skrule momentum kek saya perlu mengatakan skrule momentum kek skrule momentum adalah seperti saya akan menunjukkan skrule momentum jika anda tidak menggunakan juga seperti anda mencuba dan ia akan terus skrule iya Tidak, ini cukup. Separi ini. Saya tak tahu jika Android melakukannya. Jika kalian mempunyai ios, ini mempunyai momentum. Jadi anda melakukannya. Jika anda tidak mempunyai momentum, ini adalah apa yang akan berlaku. Ini biasanya apa yang berlaku. Mereka melakukannya dengan lebih rendah tanpa momentum. Jadi momentum mempunyai momentum berlaku. Jadi momentum mempunyai... Mereka mempunyai... Mereka mempunyai accelerasi dan desalasi. Mereka mempunyai flik. Mereka mempunyai flik dan ke bawah. Mereka mempunyai momentum berlaku. Jadi saya fikir jika mereka mempunyai... jika mereka mempunyai... ini dan membuat sebuah feature yang tidak dilakukannya, saya rasa saya akan tetap okey dengannya. Saya rasa ia mungkin sebuah feature yang baik untuk dilakukannya. Tetapi saya tidak... Apabila saya menulis ini, ia hanya untuk menyelamatkan masa pembangunan. Jadi mereka tidak perlu menghidupkan apa yang saya lalui. Ia adalah banyak hari. Terima kasih kerana mengenai ini. Saya rasa ia akan hidup di sana. Bagaimana sebuah safari? Bagaimana ia akan hidup di sana? Bagaimana ia akan hidup di sana? Saya rasa bahawa sebuah safari tidak juga mendukung. Saya tidak akan terkejut bahawa sebuah safari tidak juga mendukung. Saya mungkin telah menulis sesuatu tentangnya. Bagaimana ia tidak muncul sebagai sebuah sebuah sebuah... Ya, ia tidak... Firefox dan Chrome memperkenalkannya. Tetapi safari... tidak juga... tidak juga mempunyai... mempunyai sebuah sebuah inspektor. Bagaimana ini? Tetapi saya berfikir... dengan keadaan ini, saya berfikir ia akan menjadi baik. Bagaimana ini membuatkan... Saya telah mencari untuk berdua. Dan juga Android juga. Bagaimana dengan MDN dan Spiro? MDN mengatakan bahawa safari... Ya, ia mungkin. Tetapi itu tidak. Saya telah mencari... saya telah mencari untuk berdua. Jadi... Sama saja, percaya saya... saya hanya... hanya menjelaskan keadaan keadaan... dan mempunyai keadaan. Bagaimana anda membuat keadaan dan keadaan? Dan itu akan... jika anda mahu keadaan dan keadaan, hanya menggunakan... dua kata-kata. Ada lain cara... yang saya pernah lakukan sebelum ini. Saya menggunakan bootstrap... keadaan. Itu sebenarnya bagus. Ia membuat keadaan yang lain tidak dapat. Tetapi... setelah saya melihat... ini... ini bagaimana saya akan... membuat keadaan dan bootstrap saya sekarang. Jadi... itu sebabnya saya juga menikmati... jika ada sesiapa yang dapat mencari sesuatu yang lebih baik. Tetapi satu perkara yang menarik... adalah bahawa... keadaan CSS ini... hanya memperkenalkan... pada Desember... 2017 di Chrome. Dan tahun ini... ini bulan tahun ini di Firefox. Jadi itu sangat baru. Jadi itu perkara yang menarik... tetapi keadaan-keadaan ini... selalu berbeza. Saya dengar beberapa perkara yang menarik... tentang keadaan-keadaan tapi... saya menggunakan sekarang... ia menurut saya... menggunakan perniagaan manusia saya. Sebenarnya saya tidak... Sebenarnya saya tidak... tidak mencari artikel ini. Jangan mencari artikel ini. Jangan mencari perniagaan ini. Jangan mencari perniagaan ini. Untuk membuat perniagaan... jika anda semua sangat berminat... nampak apa yang lain orang... telah melakukan. Semua perkara ini... yang lain orang telah melakukan... atau menggantikan masa untuk melakukan. Terdapat banyak perkara lain. Dan saya telah... memerlukan kerja mereka. Dan ada satu orang yang membuat... sebuah kisah... kontributasi untuk itu. Yang... yang hebat... yang mungkin hebat pada masa... apabila... keadaan-keadaan CSS ini tidak... Jadi... ada 9 kontributasi... 5 komitmen. Dan... tanpa dua... tanpa dua kota CSS... ada... 130... ini bukan perkara yang saya... ini bukan perkara yang saya telah melihat... 137 komitmen daripada dua... ia seperti... saya menyebabkan... jika anda melakukan pembangunan web... yang ini akan membantu anda... yang... ini membantu dan... saya rasa... Sebuah kisah javascript yang berhasil untuk... mobil safari? Saya rasa... ia... dari pengalaman saya, saya rasa... ia... okey. Bagus. Sangat bagus. Terutamanya apabila... keadaan-keadaan saya tidak berada di atas, saya rasa ia mungkin... adalah solusi yang baik. Saya tidak yakin mengenai perkara ini, tapi... sekarang saya hanya akan... mengubah semua ini, kan? Dan hanya... anda tahu... hanya pergi... keadaan-keadaan saya... menyebabkan... keadaan-keadaan saya. Tetapi... saya rasa saya melakukan perjumpaan... antara ini... penerbangan dan... solusi saya... itu... tidak ada perbezaan... daripada penerbangan manusia. Saya tidak tahu jika anda menetapkan... mungkin beberapa random... beberapa penerbangan... telefon, browser... yang... hanya beberapa orang menggunakan... saya tidak tahu di mana. Saya tidak akan terkejut jika itu berlaku. Ada sesuatu yang berlaku, tapi... ia... ia... adalah perkara yang... apa... yang... perkara yang saya tunjukkan anda juga. Jadi, saya rasa... saya rasa... kita sepatutnya berakhir. Okey. Terima kasih. Okey. Satu-satunya perjumpaan untuk Melia. Kita membuat masa yang baik untuk semua orang. Jadi... Okey. Ada sesiapa-siapa ada penerbangan? sesiapa-siapa mencari kerja? sesiapa-siapa mencari... mencari orang yang mencari kerja? Terima kasih. Selalu ada penerbangan. Adakah anda mempunyai penerbangan? Adakah anda mempunyai penerbangan? Ya, tolonglah.