 Okay, so hello, my name is Pedro, I'm a lead designer at Colabora. You can also get ahold of me on Twitter, there is my handler. So let's start it. As the topic of my talk says here I'm going to talk about consistency, visual and how code and design interface and the structure actually live together and they are kind of cyclic in this in our workflow to improve Colabora. If like today is the last day, so probably you know what is Colabora online, but if you have any other question how to get the code, how to contribute, how to or where are these things or how to even build Colabora online for your particular distro, you can go ahead over colaboraonline.github.io and you will see some nice posts there, of course you can visit FAQ, but also really cool is our build, how to build Colabora online post where I recently updated and also Mohammed Karah also helped here with the instructions from other distros so if you want to add additional instructions there or if you see any problem feel free to report and we will you know make it easier and easier to get and even overall more friendly right, so we care about easy to use not only in the software itself but even the whole workflow in and out. So visual consistency normally we might think about consistency being just visual, but I will try to jump between code interface interface and code and also mention that actually this division can be quite blurry and that's okay and you can even benefit from that. So on one side we might have some code structure or some changes in the code and on the other side we have interface decisions, design decisions that we need to take and more often than not when we need or we want to work in a specific component, for example, I wanted to make sure that some specific components in our toolbar but also across other sections were more consistent between each other and these actually generated quite nice discussion and let me kind of motivate a clear CSS and so we start this whole process of cleaning this up making this visual consistency not only in the end result but even within the software itself right, so we try to split in many different files, these files then become easier to hack, easier to style because they start to correspond to the components itself themselves not only in a logical way but even in the visual manner. We try to reduce any resident rules across all files and I also started to feel the need and my anxiety started to be through the roof because I really wanted to enforce some consistency and consistency in terms of the formatting itself but also the rules we should follow in terms of linked so we also and a little bit more on this later, we also try to avoid guessing or at least trust 100% in CSS media queries because we encounter many problems right, we start to see many phablets with very diverse resolutions but also many tablets with weird not only even weirder form factors from different you know different manufacturers and on top of that we had these two little guys fighting each other yeah sometimes CSS would say one thing sometimes JavaScript say one thing and we really made effort to soften all these corners and rely mainly in the JavaScript size and this proven to be a win situation in many cases not only for mobile but also for tablets. Then I basically tried to have it in an automatic way so using style linked which there is many other ways to help in linking your code but style linked is one and I try to have it automatically checking online at each make run so not only I went manually to each file we have checking all the rules but also it was important to exclude third party files first we have some not that many but we have like one two libraries that they have their own CSS files and it was important to exclude them because in the future if we want to keep it light and flexible the update of those files we don't need to worry so much about their formatting we can just update them and take the upstream formatting that they use yeah big thanks of course for Henry that kind of helped me out in this final process of including the make run and for instance this one example now not only the JavaScript is checked but also the CSS side is checked and in here we see that we have a duplicated selector that we probably forgot about maybe we declared in at the beginning of the file and then we declared again at the end and we forgot so it's this really helpful to keep the things tidy and even easier to bug fix and overall to improve the the visual and the whole interface so by making it this side of the question crystal clear it then looked back and benefit back the the interface because suddenly things were easier easier to work and with that next step was being sure that maybe a couple of things on the JavaScript side was also were also clean and so for instance and we tried to decrease the redundancy especially in the dialogue side so for instance we have here our insert comment that uses vex and also here on mobile also uses the vex library so it's not something that remarkable but it has really a remarkable impact then in maintenance and even in the individual side of the question so big thanks for Pranam that really hunt these beats down and made sure that everything was consistent so now we can just deal with these things in one place instead of multiple places and again it looked back to the interface that this allowed me and motivated me to even go further and really check every single state of our component be sure that all states are accounted for and here you see that not only we are using for instance comments and notations and of course the tracking changes components they are also notations but they come from tracking changes and thus they do look different they do have slightly different components on them even though you can even comment in in in these tracking changes you'd in a LibreOffice on your desktop but it was important to make this this clear you know when when are you typing when are you not typing when you are viewing what's the difference between these hierarchies and these so we are just going to talk about really I really like this this this positive kind of coincidence a little bit a bunch of coincidences but really positive because you see since we work so much in in this collaborative way Pranam starts to work on one side I go I I started to work on on the other side and I listen to someone yeah I'm hearing yeah thanks and then there was this opportunity to bring more features to mobile so for instance we have here how we were displaying comments on mobile and it was quite tedious because you need a special on a phone you need to use you need to drag and pan to see your comments and now there is this possibility now we are using the same vex library now we are using the same code we can share not only the code but also the aesthetics of it and the same rules and of course this is a work in progress many things are still they still need to be improved but it's awesome effort initiated from pranam and now we get benefits not only in the code itself and for instance there were there will be many easy hacks and other things that you can help with so a very really easy hack and it's quite a good first issue to get your feet wet is simply to you know replace our trigger that was that were that were signifying insert comment to something that doesn't have the plus that simply signifies that you are going to trigger the comment section the comment panel um a lot a lot of great work from shimon on on this front on the javascript front and if you see other talks you already saw and and and listen to him going through all the technical bits but the cool thing is that this lat this all all the things you see here that was cyclical improvement right so even though it was something came from javascript and all it was something actually that then encompassed css design and it was something that started from a necessity or a motivation far from the design realm but then it benefit uh that design uh side um and of course fixing and unifying uh units used uh in input fields spinners all these controls uh were also quite uh these this there was an opportunity that was enabled uh by all this uh effort um so then we try to make sure that the user knows which units is working on which type of components is working on even without reading so because they don't read they really just scan it um and even feedback from users who users and customers were uh taking to account so for instance even though we uh cyclical will we frequently save the document um and we used to have a back uh chevron a back arrow to to leave the app people were quite afraid to press that icon um and so uh because they didn't know they wanted to be sure it was saved even though it even if it was already saved so they were always going to unbarger menu be sure that it was saved and and then press the arrow uh icon uh so we just replace that with the check mark and we even uh in we even in fact decide we even increase uh its importance uh by means of you and colors so they can be quite uh comfortable that this is not a destructive uh action and it's quite a positive action it will just save the document and leave the app um now and there is many things I I want to talk here but maybe I will go fast because I really have many slides so but for instance inactive states was also a big a big section um not only not only in the visual side but also in the code side so for instance I I noticed that these these uh states were not being communicated that well so I wanted to improve that and then I found out that actually the javas there were many javascript javascript pieces uh that were still uh listening and active so then it forced me to fix those parts and then go back to design and then finally have the states I wanted uh you know so every so then every side benefited even though in this case it was a motivation came from uh design so it's really interesting and at least for me it's it's quite curious to see these two sides uh they are actually not two sides they are or at least they are two sides of the same coin um now opening pdf it's an amazing effort uh especially from quickie um and he already presented the technical bits of this but it I wanted to take a moment and let's sink in the the challenges and the awesome results we got from this um so it was important to provide a clear um interface um to view a pdf with collaborate online and there is many ways to do it depending on your uh storage service um but in here we are not editing anymore we are not modifying per se the document structure we are here mainly to view a document so we really clean everything that was useless in this case and we let up we we let up front actions like search rename the document or and of course uh navigating through uh either existing uh markers existing annotations or uh newly created annotations so for this in here and of course they are still a long way to to make this even better and I have uh at least my mental roadmap things to make it much better but um it was nice that I can I could be uh watching or listening a car representing taking my notes um or it doesn't it doesn't need to be even like in that form factor if you have uh a for it lost all work um and you can then just let these these main action uh up front uh which is viewing uh and taking notes now the workflow doesn't start or end uh within uh collaborate online it was quite important to know what happens after or before the pdf um gets to collaborate online so there was a lot of of testing um to to be sure that okay these annotations are uh properly uh possible to view uh in different uh pdf viewers as a matter if you are um on windows linux they should be be able to to to view them and navigate and of course import them so again it was really interesting uh demo uh shown by quickie uh I think yesterday um and it again there is room for a user experience in improvement here right uh maybe a way to uh to to show the user which pieces uh are actually pdf incorporated in your odp um and there is a lot of ideas going on so I just I'm quite motivated to to to just have time to you know to improve it even uh further now um something I also focus quite a lot is this action reaction um pair so what is the trigger and what's the result does the result um is somehow uh connected or gives you any idea of what it was the trigger and vice versa so initially uh we have some troubles uh with uh with the cloning uh for instance styles and we really wanted to to to use the respective cursor for this um um uh before uh we were using some kind of legacy uh icon the problem is that this icon uh was uh resulting in many reports some some reports not many because many when we compared to other reports we received but some reports um that people were getting confused wait but am I going to like change the feel of my cell or what is going on here I didn't press this um even though it was like functional functional wise it was actually working uh quite well it was just something about the disconnection between the trigger and the result and so a very easy uh solution just swapping the the icon um again uh result in a remarkable positive uh feedback from these initial negative reports now there were many features enabling viewing and editing documents online be that on iOS or Android but without this enabling there were many challenges that were needed to be uh solved so for instance in in here we see uh ODT um and we started to receive some requests and some worried requests about the missing word count uh feature uh and initially we thought it could be simply inside of the view sub panel but we start to notice that uh many people uh using mobile and not only uh of course not only uh phone but also tablet uh we're trying to find some kind of a easy shortcut for this word count uh not only for the selected text but the whole text and they wanted to to see these with the less uh with the with a little effort possible so in here we kind of enhanced that position that plays to a more upper level position in the hamburger and this is a small change that actually uh result in in happy users and and again it was these little reports these little comments that uh previously uh Candy was talking about that we we are receiving a lot of comments for instance in the in the play store but even in the emails and you know we try to answer all of them we even try to not only read but really think and try to get together how many people are are saying the same thing um you know because at the end it's for them that we are uh doing these they are they need to be able to use it in the the easiest possible way um another big challenge was for instance in calc people do not or at least the people that do use the the app on mobile do not remember specific or might not remember specific the function that they want and they really wanted a way uh not only to insert a function but a more exploratory way to learn about the the the function and it's it was not uh a plus b report that we received this but it were many reports of people that were inserting the the function that wrongly that it was not that function they wanted so they always need to go back and insert multiple times so in here um still in one handed uh interface we we managed to have there some little helper that they can always press that uh that icon and they get to know more about the the function uh and these and there is a lot of room so even if the function has uh not only a text but if we managed to even bring not only text but even other things that are already available be that images or even examples suddenly these these little section can be quite educative of course it's always a balance between how much you can show until it's too much so it's it's important but we we notice that more people start to appear uh i'm not sure if it was because uh it you know it was the leap year but it they were quite happy with this uh nice little uh change um and it's always uh you know it's it's always really nice to hear uh nice you know positive words uh from from the users from the final users uh then i also made tried to make a a couple of uh videos that do show the average uh joe that that uses for instance google docs that many times they are um they are complaints or they are requests are uh without uh reasoning yeah or maybe they didn't really look that further so we have for instance here three examples the copy pasting scaling images or even apply master slides and idario try to apply master slides on for instance uh google docs or try to scale images on the go what i mean on the go i don't mean tablet i mean really a phone try it or even copy pasting it's it's it's it was just very very funny even to go through this process and and both and we are here talking both on android and even on ios and on ios the the some of the scaling uh just scaling an element was really really i don't know you just need to watch it or even try it maybe try it will be even funnier um but of course uh so we are always here at least i'm here mentioning multiple times consistency yes consistency is is is the key yes consistency is is what we are aiming for but at the same time we really do not want to lose our flexibility and with this we also we are we also uh keep an open ear for for all the requests or even suggestions so notebook bar was quite a high as a request we were receiving um and yes it's now shining in all its glory and there is many little pieces that needed to be solved specifically for online not only because online has specific limitations but also has specific context um and there are things that are they have still and thanks god they have still um quite a room to for improvement and that and that's nice because it keeps us you know in our toes and we want to do it uh keep it doing it better but i call your attention for again the amount of functionality that we were able to bring uh upfront and many of these things were also um coming from uh the the feedback we we keep receiving also from the customers and from all the users that they do have uh and maybe they are the necessity of those users sometimes they are different from the necessities of the same users when they are using a desktop app and not on a browser or on the go or on a tablet etc but of course all many of these things still need to be accessible even if they were not the main goal of those users at least not their main necessity so for all these they are still able to reach be that via a second layer or a left click but they are still there so we want to have it flexible but without leaving any power in the table in the calc side um it was quite uh it's it was quite a challenge to know uh which which of those things were uh were important in this case and of course uh we need to be very thankful for haiko and all the the the good discussion that is generated not only now but even along all these years because there's many things that were already uh be concerned already uh thought out very well uh on on the desktop and of course we are not blind blind to this um but i also call your attention for the status bar the status bar um we started to see uh people that were complaining about something that actually that actually it exists exactly like this even in other office suites which was when nothing is selected there was nothing was saying that nothing was selected simply in the status bar was empty um and online and online and because people sometimes use different um you know uh interfaces i mean physical interfaces sometimes they use a mouse sometimes they use a finger and they were really wanted to have a good feedback if anything is selected or if something else is hidden but it's selective and even about insert mode uh so it was also a good little touch that we did there now of course this takes some room for small factor um screens and of course we had this uh in mind and from these you can very easily uh just tab just press click your tab uh hide your sidebar and you can see now your whole big slide even in a small screen um when i mean flexible i also uh do not want to forget the the friendliness the friendliness um so many people still prefer classic and the classic store toolbar is still there and it's still rocking with all this functionality the the ruler got also revamped in a different size we also work closely with for instance next cloud on cloud to to make sure that everything is nice and tidy in their own um you know a solution because again we need to account for the workflow in and outside of uh Collabra online and of course make it yours so i did uh talk uh well it seems that it was last year and i guess many things happen uh this year so last year uh how you can uh customize uh your uh Collabra online you know even if you don't want to contribute uh which of course i advise against and but you know if you if you have your own uh your own family you just want to do some funny thing or maybe you want to do uh you want to customize icons or something for your kid or something like this you can do it and in this talk i try to guide you uh through that so so i advise you to to watch this uh but i want to spend too much time talking about this right now but what you can do is take along and help and we do need help uh but we have been receiving some really uh positive feedback and i will go there in a moment but for instance uh styling um um there were many things that were fixed uh i uh introduced uh css vars finally on um and you can see it upstream and of course there's still room and we use it already in many places uh you know so it's very easy now to use the official uh library office uh color branding um and it's it's it's nice it's tidier and it avoids it avoids uh for instance problems that can come from newcomers that want to contribute and that that's nice um and of course it improves overall consistency not only in the colors but also fonts etc and even easier to to to hunt where where it's where it's the bug or what where is the the place that needs fixing um but this is only getting better um and i'm uh really happy um to say that we have we have been receiving uh really nice feedback regarding this this this page i try to make it uh as easier uh to find uh information i could uh so we have up front to build collaborate online but you also have built for android you have the easy hacks if you enter the easy acts you will also see consistently showing up the last three easy hacks and you can go to github then um but also how to report bugs what about translators uh you know how to to to do these things for with web late etc and of course all the channels for communication but of course if you have any feedback even in this uh in this side of the the things like the the website i'm really here uh to hear um and and it's really amazing uh to see all the new contributors uh that we have and i say new i should probably say new old contributors right but they are new in a sense that in this collaborative online uh and i really wanted to save a couple of minutes uh to really express my gratitude i try to do i at least i try and i try to do my best uh trying to guide or trying to to either review uh but i you know i have only uh two hands and not that much time to all these things but it's really nice to see all the cool things that were already merged so uh special thanks to uh we sell for the syncing the colibre icon set uh of course big thanks to al and corleone uh batuhan i hope i'm not butchering all these names uh mukahit uh and also huge thanks to andria skeins and we are working now in really cool thing uh that you can even see there the link uh that hopefully in a not so distant future we can have again some some nice presentation unveiling some more cool stuff some more cool theming uh and even dynamic theming so yeah it's exciting times uh and i hope um i hope everyone uh is safe out there uh and uh thanks for uh listening i hope i didn't want to fast i hope i didn't want to slow um then again thanks no one else ask maybe a question to you that is not so easy to answer sorry for that i missed it before this uh shaman's talk about the sidebar pointers you pointed to the fact that you have the ability to to um change the aspect ratio and i wonder if it makes sense to place a sidebar that is on the button of the phone it's a um it's a vertical edge like a normal sidebar what do you think better yeah i think i'm just can you please repeat again i am not sure if i could hear i had some yeah sorry um the uh i checked the parallel a little bit of the app and it is amazing what happened there and pointers the sidebar is placed at the bottom of the application and you can make it larger or shorter and uh in your talk you uh you pointed out that the aspect ratio if it's a portrait or a landscape how you place your mobile um device makes matters for for these applications and now my question is what to do with this sidebar that is on the button of the screen it makes sense in in case of upside down and in case of a portrait mode but if you turn your phone uh being like a tablet in a tablet mode like in landscape yeah landscape okay i believe it is it has a different name whatever um but um make does it make sense to have a different appearance with the sidebar in that case and now i understand yeah thanks so um yeah that's yeah that's a really important question and we have been uh dealing with this uh you know with this challenge because it's it's it really is a challenge and it it becomes more of a challenge uh when you when you when you kind of forget the android and you start to look at other uh for instance ios devices some others devices that they have quite slim uh with right so so turning the phone it be that challenge just gets increased so it's quite uh quite a challenge like right now uh our goal is and because we are far from perfect uh we want to again be sure we are consistent in every single possible way and the idea is uh when we reach us when we reach a point where all these uh very high priority things regarding sidebars like for instance you listen to i think you listen to shimon talk but i also i think there was another talk yesterday about this there are a couple of things not only on mobile because on mobile as its own challenges but also on desktop and when all these things are solved then i think it's time we can start to think if it's if it makes sense to kind of um have a new component yet again a new component on mobile uh what do i see in the in the landscape of other uh productivity suite apps on on mobile is that they do they it doesn't matter which component they choose but they do not have different component depending on the orientation what they do they have slightly different configuration of that component per se depending on the orientation and i think that's i think that could be key uh not only because it would be easier to do some nice stuff at the end like some nice result uh but i think it would also encompass it will compass more uh more use cases plus and sorry if i'm too long uh because the problem is that i didn't i didn't take coffee so i'm quite much slower than normally i am with a lot with many coffees so i just want to say that we have also other features and other little uh things uh coming up for instance on android and uh and possible also on us but for specifically on on android where we also we are even going to use the the app sidebar on the on the shell so for instance when you are on android before you enter a document before you read the document you have this uh first interface and there is other things that will be able to to be there at at a glance like for instance switching to a dark mode you know so there is a lot of exciting things uh so then i'm so i'm i'm very careful uh in introducing uh new components to solve things that you know maybe it can be solved in a other way uh and you know and still be friendly to the people that already know the app i don't know if i answered the question maybe i run built a lot sorry you made me looking forward to your next year's presentation when you show it the result oh that and hopefully it will be physically and hopefully we can drink a beer yeah because uh yeah this online uh you know it's not that it's not as good but you know hey at least i didn't have uh hip hop videos at the end so i'm a little bit sad okay a fun question for the for as my last one why not use a floppy as icon for safe on android uh no it's basically again it goes back to the to the to that slide i was talking uh when i mentioned that it depends on context and it depends on which in which part of the flow we are we are actually using uh we are keeping using the the floppy disk as you know uh both both on desktop um collaborate on desktop but also as well on uh even on a hamburger you know so so your question actually no we actually are using uh but the the checkmark it has a slightly different meaning especially on android because with the google's revamped uh with the google's latest revamped of many of their apps they started to have all these inconsistencies with the uh back chevron uh even closed they even use close sometimes and they were supposed to have some nice rules for that but they actually even don't follow their own guidelines so then it becomes awkward not only for the users but for someone that wants to develop for android and on top of that the checkmark and the checkmark was it became to be quite widely used in these when we are talking about like documents you know not only like rich documents but any type of thing that you are editing uh you know be that typing or adding things uh so we we found that that was the best yeah so like so now if you ask me peter is that is that your ideal was that that your ideal plan no but actually found out that for the users and for the usability of people that are already used to android and all this ecosystem it was what it worked the best you know so sure and you want to support the younger generation yes yes sure i have a question every year there's the liberal office conference and all the collaborator guys shows us what beautiful things they did in the in the last year uh is there somewhere and and can ban or something like that to know before you show the results under on the conference or is it something like the conference presence and we didn't get some information before or can help there somewhere whatever sorry i i started to speak about because i'm very excited uh basically i wanted to share this that as you see we started to move uh not as with the speed that we wanted but we are trying our best to make uh to try to destroy every single sorry i'm just checking my time because i have the spanish uh talk so i'm just saying that um and i still need to walk my walk but basically i just want to say that um sorry i am lost uh wait a minute uh oh yeah so basically uh we have our own um internal uh for instance a fabricator and uh that is we are starting as you notice even on github we really don't want to give more and more things or more and more end points for possible contributors to try to keep tabs on so our goal is as much as we can to be as as as transparent as we can even in terms of speed yeah because there's so many things is we we can only do as much with the time that we have in our hands so but as you see there is many not only uh discussions going on on github but even uh true bug reports for instance even yesterday or before yesterday i just moved a quite important uh bug report that we need to work on on the pdf site and there is there is many other things so the goal here is that either the github or the community or both uh platforms will have all these things so for instance if you follow us there you actually will know all these things before or you or even if you just be in the in our telegram channel or irc you even don't need to follow the calls because you will start to see the the merging requests there so you you will get to know this and i that's why i'm quite excited because what did happen it's a nicely old story um so um before the the notebook bar or online was actually done and we we just started to work on that uh they were actually the the the check community uh was uh quite eager and really following our code and because we are always working on master yeah like even in the master is really development branch we really don't have nothing else a lot so uh basically they knew that before anyone announced so they they started already to talk about it you know so there is this funny uh funny situations uh even without all these github without all these platforms that we do have now so i think hopefully it will be just easier um yeah oh no i start to see many fellow jizziers so i think french hip hop is coming but i don't know if i answer your question i think we will see in the future if the question will be answered oh no man we are already seeing it it's we are already seeing in the present but i like but anyhow i like the touch it was very contractual touch in that in that sentence i should just simply didn't talk and just let the silent thinking okay thanks thanks so my friends uh was awesome uh i i was able to see a couple of your talks also uh some open to the talks so it was cool i also i i was quite intrigued by that talk from the italian group from that were basically they created these these repositories for people interested in sound and professional musicians so a lot of cool stuff uh it's just said that is online but hopefully uh next time it will be different okay so thanks and bye bye