Just out of curiosity, even though I'm not standing in front of the mic. Can you all hear me? Can you hear him? Say something something We're just gonna give a get started in one minute. Yes, sir. Yes Yes, I can So he was an operas when I was was am a opera singer, so he should be able to project I Was a DJ at one time so I should be able to project really well as well But he is right. We should speak into that. Yeah, great Can you hear us now? So is it time? It is time. So we're gonna go ahead and get started Welcome to the big easy streamlined front-end development with pattern lab and twig There's a bitly link to the slides. It'll be all in the last slide as well So not to worry So here we go So Who dat what they do? It's New Orleans speak So First we'll do some basic introductions My name is Adam. Drann. It's my Twitter handle Adam. Drann tenor I'm a senior front-ended developer at forum one and in addition to doing that. I sing opera and apparently jazz this morning and I also miss student of kung-fu and this is Chas Chumlee. I'm a technical architect at forum one. I am also a Drupal evangelist and in the meantime I like heckling Morton As well as being a disc jockey Actually a really well-known disc jockey, but only in my basement So we are both we both work for forum one form one is a full-service digital agency that crafts Solutions for the world's most influential organizations such as a Long laundry list of great clients one of those being global innovation exchange I'll be doing a business talk tomorrow on global innovation exchange It will not be about how great we are or all the great stuff we do But it actually will be about how great a client they are so make sure you come check that out so pattern lab and twig right as As the late great Victor Hugo said nothing is stronger than an idea whose time has come So we're gonna give here's the basic agenda and We'll just take you through Where how where we are now with or where you may have come from with pattern lab and twig and Drupal How you may have worked up until now what we call the big easy what we see as a huge step forward in Combining those elements. We have a great demo for you dish to proof of concept Then lots of time for questions because you I'm assuming hoping you have a bunch So the story so far we have pattern that how many people here have worked with pattern lab before All right pattern lab with mustache or pattern lab with twig Mustache mustache twig All right, a few people. All right, so I think it's most of you who have not worked with pattern lab so we are gonna have to show them pattern lab pattern lab is a Custom site custom static site generator that constructs. I cannot read today an interface by stitching atoms molecules and organisms together to form templates and pages its philosophy philosophy Parallels several core tenants of OOP with such as DRY don't repeat yourself and KISS keep it simple stupid Tell us about twig. I should actually have more and come up and tell us about a twig But what he would say is twig fucking rocks Thank you to it twig You can read the slide for yourself, but the thing about twig is it makes Drupal 8 30% more awesome and as I'm sure you all know by now Drupal 8 adopted twig as its templating engine And it allows us to more clearly separate the presentation and content layers So what does that mean? What how does this all work together? Well, we're about to find out so I Am actually just gonna read this the original version of pattern lab uses mustache templates and there's been a twig version for about a year and What's now possible is that you can have a twig a pattern lab starter kit with twig templates that mirrors Drupal's twig templates and Put that it let that sink in for a second. You can have the same templates So you could maybe make the change in one and have it already be changed in the other Yeah And so as you can imagine and this is what gets me so excited is the ramifications of this are Gynormous we can not only can we take full control of the markup, but we don't have to negotiate with developers You don't have to ask your developers. Oh, I need this class in this place or and then they do that and it's in the wrong place and It's a nightmare. I get so frustrated. How many how many back-end developers are in the room? Sorry, you need to find a new job The front-end developer The front-end developers the paradigm shift is about to take place what's already starting to take place The front-end developers actually have a lot more control Well, you know, I take that back you can still do site building So the hard way this is where I pattern lab lives Next to Drupal they Kind of interact like siblings. Yeah, like in the back seat of your car. Don't touch me. This is my side This is my side Like that.  Sorry guys We do love you About how the markup is wrong Because here's the markup I wanted I made it in pattern lab first and Then it ends up in three different places and flexbox blows up and I have a nice Picasso Page has this ever happened to anyone here besides me Yeah, it's a little frustrating. I mean we have to work together, but it's frustrating. I get frustrated And so when you need to bang your head, there you go So but as it is said everything is hard before it is easy so this is the big easy the shared twig templates between pattern lab and Drupal and This is this is it can all work Simply It's not that you don't ever have to talk to developers again There are things to work out machine names class names But all that back-and-forth negotiating markup never has to happen again So let's talk about those easy ingredients are first of all We got a pattern lab integrated Drupal a theme and I want to give mad props to a lexie pebbles pebbles pebbles pebbles Weevils wobbles and they don't fall down If you take a look at his github repo It was a great starting point for us to look at and we had some talks earlier among some of our speakers and So We're actually starting to solidify that we're not being crazy going off on this big easy tangent Actually, there's a couple of other shops that are starting to realize this as well And one of those is how many people are here with the familiar with the gesso theme that we had for Drupal 7 Couple so we're hardly hardly working hardly hardly working hardly hardly working We're working on it for Drupal 8 The other thing to take about isn't with these easy ingredients is packaged dependency managers NPM power. Oh, and this one that we really need to get used to using composer. Why is that? It's the whole thing called Drupal. Oh, yeah How many people here use gulp? How many people here's grunt? Okay, you guys can fight outside of it So they're both task builders okay for running the development builds Generating pattern lab compiling sass Rebuilding the Drupal cache among other things So as Chaz just said we're building on Alexi people's work and You should definitely check out his blog his website. There's a blog And we'll have links to his github You can see all the work. He's done and there's we're gonna cover Various aspects of it a little more as we go on so Tell us about the architecture as well. Sure so Being a tech arc slash front-end Manager slash Drupal evangelist all these things kind of run around your head when he started taking a look at Drupal 8 while back And two things are really stuck out first all was How the front-end development team was utilizing pattern lab to be able to actually go off and Generate take the designs and generate all the markup all the CSS all the interactivity before we even had to worry about Doing any type of site building a light bulb and up. Wow. We get a big jump start on this Then came along the ability to actually take pattern lab put it in the theme as well So now you actually are mirroring these two things so that you had pattern lab Which was using mustache at the time along with Drupal 8 and twig and until along came pattern lab with twig And now we have a perfect marriage between these two The next thing was a starter kit that Alexi actually generated was diverging kind of from What we actually realized we were supposed to use because we have our pattern lab actually inside our theme and we Use the source directory which we'll see her in a little bit. So we started diverging from his model which actually had Because a starter key you can drop into anything you want You don't have to worry about the other structure there with it But with the challenge with that with a starter kit was it wasn't really kind of normalized from my mindset We wanted source to be inside the pattern lab source. We didn't want it to be outside We didn't want to have to generate some additional things nothing wrong with that method by the way But we actually normalized this a bit to bring the directory structure back into pattern lab where we were used to working with it So as you can see from this diagram on the left You have a directory structure for the Lexi's Shiloh theme on the right our big easy theme and the biggest difference is that he has a Starter kit which is parallel a sibling to pattern lab and inside There's a dist folder and dist is basically the pattern lab source folder And because we use gesso as our main theme at forum one And we use it as a base theme We just saw this as just an extra layer of Complexity so we moved that we got rid of the dist we moved it back as source into The main pattern lab folder as you can see on the right side So that voodoo they do so well There's actually two really cool key components this I'm gonna kind of flip around flip isn't actually in order of the slides here but first is a few patches actually the pattern lab and the pattern lab twig version that actually helped Kind of bring these two more in line by utilizing something that's called a data transform plug-in So and how many people have been doing any type of theming in Drupal 8 so far Okay, so so you're used to using attributes right attributes dot add class That's we start at attribute and so those are generated You know in Drupal as well as you can add to it as well But what if you could turn around inside of twig and Actually utilize those same attributes twig inside of pattern lab so what if you could Use the in the JSON files for any given twig template and have your attributes and Inside of that and then get have those pass have the JS JSON excuse me pass those attributes into the twig template on the pattern lab side be the exact same structure as what PHP is passing from Drupal into the twig templates on the Drupal side If they mirror each other The syntax can be identical with the data getting passed in as it is identical the template can be the same Mine blown so Better than Tabasco Maybe I love Tabasco, but it's actually the secret sauce the data transfer plug it so now We're going to have a demonstration and show you how this all works Any terminal window users? good You're like what the heck is it? So a couple different different things real quick so Imagine Pattern lab the way that you would actually generate okay I'm just gonna run through a couple different things here Those things are going to be actually going into the pattern lab folder itself running composer install And we're in this case since I already have installed composer update make sure there's any dependencies that need to be pulled down Then jump up a level run npm install and bower install as I'm running these I'm gonna go ahead and talk about a couple other things So let's take a look real quick where we're at Let's actually go into pattern lab. I sure can Is that good? Can y'all read that? All right, so composer. Hopefully you're already utilizing composer. I'm finding people who use drush Okay, so obviously you had to install composer at some point It's actually be able to get drush working with your Drupal 8 instances. So Composer is just a dependency manager. It's actually going and updating some dependencies right now for me Or it's actually going and taking out look out in the internet interweb so to speak and hopefully the conference Wi-Fi will Play nicely This is more Morton said you should have recorded it. I know all your tricks by now So now I'm gonna jump up a level okay, and I'm actually going to run npm install mouse cursor is All right, so npm install is going and grabbing any the thing that I have specified in the package that json file Yep, why that's running real quick for those that maybe have not seen pattern lab before So I'll let you go and talk about that. So we recently relaunched the forum one website in Drupal 8 and this is the pattern lab for it and pattern lab In a nutshell allows you to More than just style guide it allows you to create I'm just gonna scroll here you can set all your basic colors fonts all your Block quote everything is already so anytime someone uses a block quote. This is how it's gonna come out anytime All your basic, you know lists But it gets way more complicated. So you have a numbered list you have filters Tables you can have a pattern for anything that you want. We have a version of pattern lab for gesso that covers all of the basics and then we add Images image styles that we're gonna create image styles for in Drupal So that we can see how they're gonna look and then we can bind them as we go down with here What is this is the whoops article byline with an image and The person's name and their title and you can see that we went from individual items like a color or a font or A list and now they're starting to come together in various combinations as molecules and organisms this is exactly what Dries was talking about this morning in the Dries note and Everything gets built out here and another way to view it is up here we have you can look at the dates and There's actually a way the color coding there's red and there's yellow and there's green and you can actually use it for either internal or external approval so that as Things get approved you change the part of the file name so it gets to say whether it's In progress in review or completed and so that it will change from red to yellow to green So just by looking at it. You can say oh, yeah the short date. That's not done yet But form items, I mean this was done internally so there wasn't that process, but it is possible Layouts so you can look at this place we layouts for Just so that's a pure layout so there's nothing really in there, but that's more interesting stuff You can see that the home page. This is made up of different atoms and molecules and organisms that are earlier This is pure just an HTML generated Mockup really and it can be used For client approval they can see exactly how it's going to work one of the other my absolutely favorite thing is you can test responsiveness so beautifully you can see there's slide it this way you can see that things work at any given width or You can just click.  I can put in 999 Just like that that's pattern a lot of it is an awesome tool and you can see why we like it so much I'm gonna flip back over terminal. All right. MPM is done. Let's run event run power install So bar install is actually just gonna run and pollinate any dependencies For anything that I'm using for theming purposes For this for example just grabbing bourbon need most cases, you know again not dictating how you guys work You would use whatever you're comfortable with okay, but it's a way It's a package manager as well to be able to pull in those particular components Once I actually have that done I can go ahead and run gulp Gulp is actually looking for sass changes. It's looking for it's generating the pattern lab itself And as that is sitting there listening for different events. Let me actually show you what that gulp file looks like We've actually modeled us originally off of Alexi's gulp file, but I've actually cleaned it up quite a bit And if you're not familiar with grunts or gulp, just think Everybody see that good better It's just a way for you to be able to have Processes running in the background that are listening for different things and doing specific actions based off it So in for instance here patterns change. I'm listening to see if I've changed a pattern Adam molecule organism inside of pattern lab and as so it'll actually go ahead and copy those patterns as well as run some a couple of other things to Generate the CSS from the sass as well as also go out and clear the Drupal cache for me If there's a template change that needs to take place This is a great way to kind of automate the friend in ops for you All right, so now that that's running. Let's go ahead and jump over to Drupal quick so in Pattern lab itself for this we have a particular layout Okay, they're really basic simple header. You got a menu item. We have a fork home layout here of speakers So what happens? It's actually not for columns. It's flexbox. I got your flexbox So this is what it looks like inside of Pattern lab or no, I'm sorry inside of Drupal when you have actually enabled the theme so Let me back up real quick Under appearance if we actually go to enable Bartek this is Demo gods bit me right now. This is actually what it was what it would look like without You know it's not using the lovely everybody like Bartek theme, right? What you should like is the fact that it uses classy Does everybody know what classy is everybody know who built classy? If you like it more and if you hate it he said John So basic Bartek theme out of the box. Okay, but when I actually go ahead and turn on The big easy theme and set this as the default And go back to the site It's picking up exactly what was in pattern lab over in Drupal and by the way It did this without me actually touching a twig template in Drupal So what would happen if we went into pattern lab and changed? I think this is an h3 or changes to an h4 for the the titles the the names what it would happen if we did that No, no, you want me to do that? Yeah, okay? All right, so let's actually go and jump into pattern lab. So pattern lab source. Okay patterns This is where the actual patterns are taken care of okay atoms molecules organisms templates and The Drupal templates itself are sitting down here under templates layout and patterns Okay, so if I actually want to make a change to this All I need to know is actually where to go So under meta I actually have no speaker teaser Okay, again, this is not in Drupal. This is actually over in pattern lab We'll see what happens here when I make this change. So right now it's an h3 change that to an h4 I'm gonna hit save. Let me flip back over to go up so you can see what's going on. So it's detected the change and There we go It is generated pattern lab and it's actually gone in clear to cash So if I go back into pattern lab first and refresh Hmm, this one change Well, it's definitely an h3 now. It's an h4 now the h4. No, all right. Yes, and Drum roll it. What is it now? What is it now? It's still in each? Is it in h3? It looks big enough to be an h3 Hmm H3 I haven't refreshed page. All right, and now it's an h4 made one change in pattern lab The process is in gulp made sure that that same change happened in Drupal and so you can extrapolate that I mean, that's a simple change h4 to h3 But any change like that is possible adding a class adding a div adding any kind of HTML structure whatsoever It can be done themed in pattern lab And those same changes in the structure will get over into your Drupal templates so I was expecting a whole more life. Did you all follow that? Yeah So are you as excited about that as I am? All right, cool. The theme once Yeah, so We're gonna make a couple small other points and then we're gonna open up for questions because I hope you have some questions So first of all forum one We are looking for front-end and back-end developers junior and senior level. We have a great team Yeah, they actually let us play it's fun So please come talk to us afterwards or we're downstairs in booth 406 Also here does what these will be in the slides There's some some important links to Alexi's work to first of all to the standard pattern lab I think there was some updates to the second one the Drupal lab there on github by phase 2 Alexi's work on the Shaila theme There is a pattern lab chat room on Gitter It's up there and then some links for Gesso We're gonna be doing the Drupal 8 work and Gesso is coming out as soon as possible We're as you can see we're at work on it and we're gonna have What you saw tonight this afternoon? Hopefully available for open-source sharing and all that jazz within a month or so So questions and we can go back and demo lots of different things. Yes, sir come to the microphone, please And anyone else who has a question if you would happily line up at the microphone hey my name is Derek and Just wanted to say thanks. This is like really really freaking exciting We've just kind of been like a brainchild brainstorm We've been thinking about and looking at for a while not with pattern lab but Reusing the templates between the prototype and the style guy and actually in Drupal. So awesome. Thank you the question that I have is Where are you declaring in Drupal 8 we've been looking at doing this in Drupal 7 a little bit in Drupal 8 Where are you declaring those templates that live inside of the pattern lab directory? Where are you declaring that they exist? So that's a great question. So if we actually go under and look under organisms There it depends on what you're actually building. So in this case falling based off of Alexi We're gonna be doing a lot of rearranging on this But you can see under organisms. There's this metafolder and inside here Anything that it sees and pat that It's seat note of notes. This is in pattern lab that has dotation on that twig when gulp runs If it sees a change to that it will notify Drupal and actually pull those over into the templates folder on Drupal side for us So we no longer have to like copying them. It's it's it's doing a copying But it's no longer am I having to actually go look the pattern. Yeah Copy the code out of there go in the Drupal make the template Hiling it and say right I can go straight over into pattern lab in this case for speaker using a teaser display mode You have to have a little bit of knowledge obviously Of what twig might call that template and you turn on twig debugging You know and and get a better insight into that But if you you know if you can take the speed it up even more buttons But if you know in this case, I just created no dash dash speaker dash teaser, but that's not really the magic I mean we can undo copy and paste right well You just have it like and look directly in that directory for for the templates rather than having to copy it So if you look actually so if you actually look here I have node speaker teaser, which is actually extending such using twig extend to actually extend that But I can also use the data transformation plugin to actually pop in additional References in this case the atoms speak to speaker image into the field speaker image field So it knows exactly what display in Drupal or in this case field company for the company name I can pass the classes using attributes for the class in this case node no dash our speaker and control it all in pattern lab So as the front end developers, especially if they know how to do any type of site building and all they're already gonna have These correlations running in their head. You're like, I don't even worry about over here I'm gonna do it over here And there's a build document for the site builder the developer to just go build out the content type when the content It's diamond and the theme is on it's already done over in pattern lab And it's already gotten pulled pulled over automatically into Drupal. That's brilliant. Thank you so much. Thank you Uh Sometimes your pattern lab patterns might need to have translations or links in them How are you handling the basically the the trans function and the L or the link function in the pattern lab patterns? Yeah, that is a awesome question and something that we haven't even considered yet Like we said, this is an early infancy of this concept But it's definitely something we're gonna need to take a look at because we partner with like lingo tech to do Translation on stuff all the time. So it's definitely a concern It's a it's in the Drupal lab repo. They had posted at the end there. We just got it in yesterday. So Did you hear that? Translation is now in there so we can actually pull this in. So all right. No, thank you. Thank you for bringing that up Hello. Hi John So with So Drupal 7 is was basically impossible to reuse templates because we had tpl.php Sort of you just couldn't use them. They were awful templates With twig we have a System that is did not come from Drupal so it's this this problem of how do you use the same template in your style guide and Inside your application, which is Drupal in this case is one that's solvable by just using twig and So there are two ways to solve this problem using twig and one is that you you use the exact same file And it's read by your style guide generator and it's also read by Drupal right and what that means is that you have to pull all the Drupal bits out of your Components and just have pure twig That's the route that I've chosen to go because it's really simple and you've decided to go with Doing this data transformation and compiling it's way harder and I'm wondering why you decided to do that It's more more complicated convoluted and Would require me to like have to write PHP if I want to if I have any problems with the way it works I don't know that you have to write any PHP. It is more complicated I mean we talked a little in the hallway and you said use what KSS note for yeah Which which I've not tried yet, but I'm actually now very curious We've been using a pattern lab in Drupal 7 with Drupal 7 for a while for For exactly what we showed what I showed you earlier with the forum one site I've been doing that for over a year now with with a The pattern lab version for Gesso in Drupal 7 and it allows me to Outside of twig Because we're using the mustache version to completely componentized The entire website and how I think and so for us it was just a now that there's pattern lab for twig Drupal 8 and twig It was just a natural next step if there were Other avenues we haven't explored them yet. Did you have something? I think no no I really feel like you could I really feel like you could simplify your your pat like continue use pattern lab Yep, but simply by the way that your workflow actually is by And this is like super new idea that I just started doing three weeks ago Yeah I'm gonna have a couple different buffs about that this week, but Well, we'll be there because yeah, yeah, yeah, yeah, so twig is super powerful and I think that you can simplify your process just by yanking out the Drupal bits and Then leaving them in the HTML dot twig file and then creating just pure components using vanilla twig And then you just route the Drupal variables then Into your components rather than trying to do these data trace formations. We have to write php to do that No, okay, you just write twig right it's vanilla twig. We will be at your boss and we can No, it's but thank you. It's great great points We're actually doing something super similar as well Phase two and red hat. Yeah, we're doing it in D7 though So it's really cool to see the implementation in D8 I was curious how you go about and stanchiating the fields in Drupal does your Json actually define the fields and do they Show up in Drupal, but there's the field right there So do you have to do anything else to get it to exist in the database? No, I just got a print out content and the content attribute here Actually, we'll bring this actually into the twig template. Do you mean on the Drupal side or on the pattern lab side? Oh, yeah, I mean you're still doing your developers still doing site building So they're telling you hey or in this case, we have a lot of front developers that we're like Why do I need a developer to work on that because I know how to do create a content type and Especially a Drupal a everything's fillable. So it makes them much easier where it's a content type Well, it's a paragraph bundle whether it's a block Well, we're actually so we're using the paragraphs module We wrote something called pattern builder importer that watches the Json Files and imports and creates those database fields and Drupal And make sure that they reuses them properly if it already exists But we can define all the same like components and reuse them in patterns and combine them in different ways So yeah, right So form 1.com which we released in Drupal 8 anybody want to guess how that was built That's a giant node with paragraph bundles. So everything's componentized Yeah, every and every page on the site is like that and and and yeah, I mean there's a I'm sure there's two schools of that some people hate paragraphs some people love paragraphs But it paragraph bundles if you haven't worked with it Really kind of works hand-in-hand with pattern lab as far as how you would might to componentize things and I don't know about you But like I hate field collections All that other stuff Questions, but I wondered if you could show the admin side of it to like if you're editing The admin side of like with your actually content editor and you're managing a piece of content. Oh Just Just looks like you would any other content type. So there's the speaker content type There's field company field speaker image So as long as the front end developer is this is the only place where they actually have to communicate with you back End developers still It's kidding As long as I know what the field names are in this case. We have node speaker No speaker teaser twig that is say that three times fast That's extending the hional twig template, but we also have a JSON file So as long as we are utilizing JSON and passing the content with those field names We can put text values in there. We can reference other Patterns inside a pattern lab itself in this case an image So that it then pulls through and then those actually are just getting written You know back back into here as well. So Yes, yeah into the bike, please What was that one more time so is the work being duplicated so when the when the contents being entered into the admin area It's not dynamically creating variables or anything in that JSON. So no, that's not manually right now. It's manually Yeah, okay, so here's the thing. Let's let's take pattern lab out of the whole equation If I want to create if I want to create a twig template for a specific page I number one have to know what Drupal is using to display that content If I want to override core not had core override core Then I need to make a copy of that into my theme make sure I use one of the file name suggestions So that process you have to do already. So what we said was Well, why do that process why are the front end developers do something similar especially if it wouldn't originally was a mustache Have them do it in twig. Oh, how can we marry the two together and have it so that once I once once that Template exists already in pattern lab just cup and in fact I'm having some brain thoughts about based on what John I talked about We probably don't even need to do that part because Drupal doesn't care where the twig template is as long as it finds inside your theme So I think I might just eliminate a step. Thank you John So as you're limiting that that step yes, you may have to do it first in pattern lab That's copying over now. I'm just if I want to add a change of heading like you saw We'll add a class following an additional markup I'm doing it over in pattern lab with a front-end developer has full control over it and the clients generally seeing that before they even see What's happening in Drupal? Gulp runs now. It's over in Drupal. Don't worry about it. Thank you All right, please sorry I got my speaking time. No, so I'm looking at it and I owe that looks all good But so one of the things I've been experimenting with the last couple of months actually ever since we reorganized All the file structures in for classy and all that core was and I see this file structure is very Specific is there any way of mapping yourself out of it? So let's say I come in with a theme that is that map Doppler complete other way. Is there any way of like saying hey My where do I my file slip? Do they have always to live in this file structure? Can I break that completely and move stuff around as I want to? So talking about the file structure for pattern lab or for the theme or for all of it But it's like do we end up having like two different ways of thinking? Yeah, if I begin to reorganize my stuff Do I end up getting caught up in this is pattern lab structure fair enough? That's if we know that the rules that's what we tell people One second there is a config YAML So this is the for pattern lab the config.yaml which is showing for example the public directory the source directory Whether you're using twig auto escape to a debug and Style um, no, where's other things? Oh, yeah, you can twig debug inside a panel if you really want to But it but the actual structure what you're asking. No, it doesn't matter at all I just drop in however my theme is yeah, and then we just roll with it Then it that's the power of the starter kits is that you take your theme However, it is and you drop in your starter kit and you need patterns which are going to mimic what you think Drupal is gonna Be giving you so we're not gonna have issues with people coming in saying hey I built my stuff this way and all my files are living over here and my image files It's living in the same folders and I do in these things and those things and I can like pretty easily import that that Structure that structure should stay intact You put you bring in pattern lab inside your theme root doc root if you don't want it in your repo Get ignore fine same thing if you're gonna use a starter kit to to have this all work together So yeah, it doesn't care it doesn't care how your theme is built So we can actually end up opting out of patent. I'd be like no I want to use a paddle up to because battle up to is way more epic or somebody else pull something completely new So you don't end up getting caught up in the system. They're independent pieces. We Hey, I'm really excited about this concept I'm looking forward to implementing it where I work and I just had a couple questions about the compiler that you're using from pattern labs dot IO it suggests using compass and I see you're using gulp and I just wondered if there were any drawbacks So we we're Either quickly Moving away from compass Just because of Ruby dependencies on compiling so we use lip sass so As far as gulp versus grunt It's apples and oranges. In fact in production. We use grunts JavaScript task builder Just because we have some a lot of other things with our vagrant instance on our virtual machine and doing things like actually installing those dependencies and building them more magic I Did that on purpose That too In the life short answer. It's dead. Any other questions. Yeah, okay before We go Gotta think of some good questions. So I I just released a triple eight deeming with twig look That's available. I actually have one two three. I have six digital copies here. I Mean I could just head up to the front and you guys can open up your computers and just pass it all the way back to you but Obviously not in it for the money. I'm going to get back to the community. So Help me think of some questions here What is more Who said that yes Very specific answer. Yes Come get the digital copy BAD a 55 in case and no one heard that Last call for questions, are there any more questions in the yes, sir come on to the mic Yeah to the mic, please My question is basically just in pattern lab in general as using it as a Kind of a mock-up tool to show a client Do you ever use it and like fully style it? Using the CSS that instead of just showing it as a black and white kind of wireframe Do you ever go all out with full style and then like host it somewhere so they can take a look at it? Yes Yeah, that's it. That is how we use it. It's a it's you all components fully themed out Components brought together from molecules organisms to templates to pages and what gets reviewed by the client I mean it the the components I review with the designer and the UX person So like components you can go access our pattern lab for form one right now just by going to themes just a pattern lab Every single component that needed to be there. This is the power of a pattern lab is I don't need to create it PSD photoshop Sketch whatever you're using pages for every single thing because if you really take a look and break down a site It's reusing Yeah, the button. I mean, this is a special button probably because of the icon Button button register, but all the button styles are gonna be the same everywhere But what we show the client though, of course is gonna be The D the individual pages they're not gonna Often they're not gonna make as much sense of the actual components the components are more for internal review Because once I as a front-end developer get my designer to sign off on a component when she comes back When if she wants off on one comp, this is 10 pixels that way or 10 pixels that way I make the executive decision and it's like she's already signed off on it. We don't have to waste time It's not a pixel perfect anymore because more general rules I was I will frequently go to my designers and say let's pick a generic margin So like so in the right column, what's the distance between pains? Is it 20 pixels or 40 pixels of the 4m's? I don't care But that's gonna be standardized and I don't care what's in the comp if she has three different items in the right sidebar That's the gutter between them right right. It's general as much generic rules That's what patent lab really helps to enforce and it helps the designers understand They see it and they go. Oh, this is someone you know because they're just dumping stuff sometimes in the PSD files Yeah, and but it's it's if you're a completely Pedantic like I am when it comes to front-end development I want as few rules as possible I'm going for the fewest lines of code the fewest mark the smallest markup and the easily Most easily maintainable least breakable by the client I mean all of these things go into how I envision and pattern lab allows me to execute that and test it and then it's done almost never Is something that I build in pattern lab a month later further in development break Because you've thought about it in individual pieces so you can go from having kind of a black-and-white thing This is what we're generally thinking then actually show them full design and then when you're ready to actually put it Into Drupal just kind of use that same CSS that you were already using and just kind of dump it in yeah And it same selectors well exactly who's using the same CSS that pattern lamb is because it's inside our theme pool Oh, so you just told it to look in that CSS as well. Well, it's the same. It's the same CS and Drupal 8 That's what we're showing is it's so much simpler Drupal 7 I have to use you know display suite and Panels clean markup and all of these other tools to really you know Massage the markup to get as close as possible to what I did in pattern lab and sometimes it's not possible But in Drupal 8, I mean that's that's the magic here is that it's the same right? Yeah, thanks. Thank you. Hey great question. Here you go Next question hey, my name is Rob I the oh Hey, thank you. Thank you. So so pattern lab. It was originally written in PHP. Yeah, someone ported it to node.js So are you using the PHP version here pattern lab or the node version? Is that we're using the PHP or the note at the node.js version? I'm pretty sure it's the node.js version Yeah, yeah, yeah NPM install and all that right right. So people have done some work to port twig over to Node as well. So what kind of parody is there? Is there any way that we could use? The node version alongside the pH. Is that just kind of crazy? Am I going into? Alien territory here. Yeah Totally worth discussing and we hadn't thought that far. Yeah. Yeah I don't I personally So it's the PHP version that you are installing into the team here and then no, this is no JS. Okay. Yeah. All right Yeah, all right interesting because you were running installing what we're installing with composer at that point then So when you first install pattern lab when you when you actually go to the get re-pumple pattern lab down You would run composer install So I should go and grab all the dependencies that pattern lab needs and then pattern Actually has a generator inside it. So it's behind the scenes is actually doing PHP core See, I see. All right. Thanks. Yeah, you're welcome So you mentioned the one of the benefits of this is being able to get to the The front-end portion of this earlier without having a site building portion is there and you mentioned clearly talking with the developer to Talk to see field names, etc to make this easily poured over How do you handle that from a front-end perspective if I'm given a project and I know nothing about it Do you spec out those field names ahead of time and then give that to the front-end developer or yeah So so as a tech I'll put my tech arc out on real quick So as a technical architect, I would meet with a client We'd have a kickoff meeting through that duration process whether it's content strategy whether it's UX we start to form a picture of Identifying what content types what fields should be with those content types and then I would actually generate or another tech arc Would actually generate a build document that is simply really just an Excel spreadsheet Or a Google doc and whatever you want to where we want to use that has the content type It has the field listings in there the other things as a tech arc would be our responsibility to make sure we look at see Drupal 7 we're more field independent meaning we really be specific with our fields The way with configuration management actually works in Drupal 8 now We actually really try to reuse our fields because I don't want to have a hundred field twig templates I'm sure Morton can can can agree with that one So we'll reuse those fields across but those will all be identified heads So we'll know hey for instance for the speaker speaker has a name a bio an image the company Oh, and by the way that bought that image. I have a fall for the content types gonna use an image field They're all gonna look the same meaning that it's a file a file upload for an image And I can create whatever display modes I need for that to have them be different sizes Use breakpoint whatever for responsive points to make sure your different image styles load So I'm gonna reuse that same field image across those five content types as well So hopefully I don't yeah So that basically means that you're dictating what the components are before it hits the front end No, the client's dictating what the what should be there through the through discussion with them of what's what that Content looks like in a wireframe more likely and what fields that the content strategist has identified from there Yeah, the machine names for the fields. Yeah But I mean, what are you gonna call field image besides film image, right? Okay, cool But the front-end developer can go ahead and build some of those out ahead of time If you have to change it in the twig template to change from field image to field featured image I mean just because that's what the dev named it. That's not that big of a deal You've already themed it. You already know what it's gonna look like. You're just changing a class name. It's not maybe the file name It's not that complicated Yeah That's right there you go sir General question about pattern lab. So when you're building these out for the client or for yourselves the components The atoms the molecules and the organisms You know, are you building them page first and then kind of dividing it out back backwards or Myself. No, I actually Prefer to work with the designer. I get basically a style guide and I theme that out like Like this all I start I literally start here with the colors and then the fonts and then I work my way Because once I get my way down all of these basic things there's form elements in here and That begins to and where the form elements do you go through the form elements? Because the components inherit from the atoms form the lay out there we go molecules inherit from the components and That's you know, so Generally try to start as small as possible because you're building on top of that because you're just not just like going shopping Okay, I already know already know my apple my orange and I look like I'm gonna make a fruit salad I'm just gonna grab the apple already had in the orange already had and there I got this search bar It's probably a little high because there's probably a container around it that it's expecting. That's not there but You can see that so all of this stuff the pagination It's all can be themed before you even look at any Drupal install, right? You still and then then I usually go from there to the header and the footer Make sure they're responsive using all of the great tools here In in pattern lab so that all the response so that I do the mobile menu I do all of that stuff and then you start off with a couple your teasers that are gonna show up in view modes your basic then your your node your detail pages and Then landing pages home pages come last You know and then usually there are repeated blocks or panes in the right column I'll do those as individual things as they come up in the pages But I but when I get to the pages I already have the look and feel the site Permigating and it's already in Drupal too, you know because it's that's even in the Drupal 7 stuff before We forget we really need to make a point this please hear the slides again and Please please please you can either find our session on the Drupal con site or go to this bitly link Decon dash big easy dash eval, please Please evaluate us Hopefully you liked us we had if you like to evaluate us if you don't like us. My name is Martin. This is John all But thank you We had so much fun. Thank you for coming and if you have any other questions just come on up Thank you. I have two more whoever wants to copy my book.  Sorry. She wants one


Hello, my name is Robin Wilson and I am the Learning and Development Manager here at Research Square and I'm part of the Human Resources team. So just a little overview of what I do, I manage all of our learning and development divisions. So not only do I do needs assessments to see what training programs that we need, I work in collaboration with our senior leadership team to really analyze what our needs are here at the company, but I also work with outside vendors to really look into what learning needs are available for our company. But I work with our internal stakeholders as well to really see what we need for our division. Then I work to create those resources, so I create the classes after I find out what we need. I create all of the classes for the company and then I facilitate them. So I'm like one stop shop for learning and development really. I create a design and then I implement. Also manage all the logistics for learning and development. So I manage the calendar, the scheduling, the sign up sheets, all of the evaluations and the follow up. So what does a day in the life of my job look like? Well, I spend a lot of time doing the logistics and scheduling like I just mentioned, but I also like to work with people. So I spend time meeting with managers, meeting with team members, meeting with my team, but then I spend time facilitating the classes, which is really what I love the most about my job is working with the team members. I spend a lot of time working with managers and helping them build their leadership skills as well. So I just really love working with people and helping people grow and develop and I'm very passionate about my job. I actually love my job. Anyone who works with me will hear me say that every day because my job gives me the ability to be creative and grow myself while I'm helping others grow and develop as well. Challenges in my role, I think I'm always having to look for new and creative ways to engage people. Sometimes that can be difficult. Other challenges are that probably there's not enough hours in the day to do all that I want to do. So I find myself being very limited in time. So I'm having to really manage my schedule accordingly. If I were to give anyone advice looking for a job here at Research Square in my role, I would say you have to be very organized to have my role and you have to be very empathetic and a people person. You have to be a good listener and you have to relate well to others. You also have to be a strategic thinker because you always have to be thinking outside the box and looking for new ways to meet the needs of the people that you're working with. And you always have to have a sense of humor at all times because things will not always go as planned. You have to have fun in your role too. I do enjoy my role. I love what I do, as I said before, and that's what work is all about. So I'm involved in many, many elements of Research Square. I work with many teams and as I said, I just love what I do here. So my best advice to you is love what you do and go in with a positive attitude and it will all be great.


What's going on everyone Sam here with late in sports cards We are ripping one box of 2022 tops museum collection for Nicholas s. It's a good luck here Nicholas Can you pull something nice out of here for you? All right, we've got Justin Verlander Cal Ripken that is Tatis on the canvas collection. We've got a will Myers that is 90 out of 99 on the jersey card got some of the Padres camo patches in there, which is pretty cool nice hit and Mr. Padre Tony Gwynn Oh, I agree Neek's been great playoff so far. I love playoff baseball Bryson stop match up man. We got your don Alvarez That is 35 out of 75 for the Astros nice jersey there as well blue Hank Aaron 128 out of 150 and Peter Lanza Ricky Henderson Derek Jeter Lou Gehrig. We've got Patrick wisdom for the Cubs 57 out of 399 on the bat jersey bet And we've got nice a copper Spencer Torkelson Going to the Tigers. Yeah, that's true. That's true It is sad to see him go out that way Roger Clemens Aaron judge We've got jersey is 2 out of 10. That is Austin Riley Nice one there and purple Ichiro 40 out of 99 That'll do it for your break there Nick list congrats on the hits We'll get him right out to your buddy


AI and Big Data partner for ScreenAge MoMAgic Technology for the launch of its AI-enabled DMP platform True Insight and SSP and DSP platform True Reach. Now to get insight into it and to understand more of it, firstly, let's take a look at the AV on the screen. MoMAgic Technologies founded in 2011 is an innovative and data-driven tech organization with dominance in South Asia, headquartered in New Delhi, India with strategic investments from two technological giants, MediaTek and Foxconn. MoMAgic currently employs 400 employees, including 70-plus data intelligence, AI, and marketing experts in Asia. We are helping our business partners acquire quality users and drive effective revenue growth. We have good partnerships with top handset makers in India. Also, we've served many prestigious advertiser brands, analyzing the daily smartphone usage patterns of users including app categories present, behavioral data, trigger time, geo data, device model, etc. We are able to create custom segmentation for each user, integrated with multiple party data, creating a better real-time data model, helping the advertiser reach out to the exact matches for business and ensuring better growth. The world of digital advertising is always full of surprises and innovation, that's the key to sustenance. Let's evaluate the current ecosystem reach the audiences digitally. Brands and marketers are still struggling to reduce the overlaps and attain the best ROI's. The core problem of the current effective targeting for advertisers and efficient traffic monetization for publishers remain largely unanswered. By reusing the right analogy and insight to reach our target audience, it's a big no. Time for deep insight-based targeting to get better optimized reach and value. MoMAgic, big data and AI-based technology company offering customized mobile marketing solutions as its DMP platform. True insight and SSP and DSP platform, to reach, address the current mobile and digital marketing gaps by integrating all the three data management platform, as one seamless AI and big data-driven marketing solution in the market. MoMAgic's DMP platform True Insight provides the in-depth view of geo-analytics and offline data, drawing more comprehensive users' lifestyle-based insight. MoMAgic's programmatic solution to reach SSP and DSP platforms helps leading brands reach their target audience with the vast pool of data that allows to identify the right audience for specific brands with specific needs. MoMAgic has been consistently giving high-quality branding reach, installs, registrations, engagements and high conversion rates. MoMAgic's True Insight and True Reach platform promises all these. With 126 plus million unique users reaching every third mobile user, MoMAgic offers comprehensive user acquisition channels. With MoMAgic, unlock the user insights. Let me start with the little problem statements because there are a lot of DSP and SSP platforms in the advertisement space. So I'll start with what is the core issue there in the existing solution. So most of the DSP and SSP solutions in the ad-tech space, so they're not able to fully solve the problems that are faced by advertisers in terms of getting more ROI, saving money and for publishers to get optimal use of their traffic. So you can see that the DSPs, for example, they're used by advertisers. So there are some targeting options available. So advertisers go and set up the campaign in terms of budgets and all. But in terms of data insights, there is not so much value in most of the current available platforms. And if you talk about the publishers, so especially in India, you will find that there is a lot of oversupply of traffic in India. So that indicates that the utilization of traffic is not optimal. So today we are launching our DMP platform that is true inside. So that is going to give a deep user insight. So we can help the advertisers and the publishers both in solving this problem. So what we believe is that if we are able to give a proper insight of the user, so the advertiser can reach to the end user in a more targeted way. That is point one. Second, the publisher, they also don't need to keep on juggling different mediation platforms so they can get the best revenue for their users. So this is how the true insight is going to help. So along with true insight, our programmatic platform that is the true reach, it is going to help the advertiser in reaching out to their target audience. And for the publisher, it is going to help in getting the best revenue, reaching out to the best revenue sources for them. Now what is fundamentally different between our platform and the other existing platforms is that we have a very, very unique data source that is available with us. So it is not only restricted to online. It includes access to the offline user as well. So we are combining the online and offline user and converting it to into a useful information. So that can be utilized in a seamless way, that is one. Second, MoMagic as a company has been connected with the mobile handset players since last seven years. So we get a perspective for understanding the user from a mobile handset way and not restricted to any app. So that also gives us a unique edge. So for our clients, existing clients and our future clients, whether it is advertisers or publishers or media agencies. So these platforms we believe are going to help all of them in solving the current problems that they are currently facing in the existing ecosystem. So that's it from my side. So if you have any question about these, you can ask it. All right, so I'm going to be requesting Mr. Manish also to please remain on the stage. And on that note, I'd also like to invite MoMagic CEO and founder, Mr. Arun Gupta and Mr. Kunal Deer, co-founder MoMagic. Along with Mr. Nava Lahooja, the director and co-founder Exchange for Media and Dr. Narag Bhattra, Chairman and Editor-in-Chief, BW Business World and Exchange for Media. So please come on the stage. Well, this is to unveil the MoMagic report on the lifestyle and sight of app users in India. This is in fact drawn upon MoMagic's DMP platform True Insight. So let's have the reports on the stage, please. And let's have all our dignitaries on the stage to unveil this report on lifestyle and sight of app users in India. In fact, this report is first of its kinds on lifestyle and sight of the app users in India that highlights on the three fast emerging app categories with regard to India. And the report also gives insights and statistics on the specific categories and user behavioral patterns as well. So let's have you all come together for a group photograph and let's have a round of cheer, ladies and gentlemen, as we unveil this first of its kind report on the lifestyle and sight of app users in India. Now the findings of this report will in fact be useful for application developers, agencies, advertisers and marketing professionals as it helps in understanding of the users and the lifestyle patterns as well.


Jason Voorhees, the iconic slasher from the silver screen, makes an appearance in Mortal Kombat X. His three variations cater to players who love decimating their opponents with command grabs and terrifying specials. The slasher variation equips Jason with his infamous machete, extending the range of his normal attacks. Machete launch, back-X-Y-Y, is an advancing normal that launches his victim. Brooding, forward-BY, is a low overhead combo starter that can be chained together to take his opponent to the corner. In the unstoppable variation, Jason gains the special move Rise, down-down-B, granting him temporary healing over time. Another special move, Punishment, down-down-A, increases his damage for a short duration. Jason will resurrect once every round, consuming his meter to regain health. The relentless variation gives Jason a set of special moves to trap and stalk his next victim. Pursuit, down-down-A, temporarily prevents the opponent from dashing, running, and reverses their controls. Lake Mist, down-back-Y, teleports Jason behind his unsuspecting foe. Because this variation is focused on close-range command grabs, it's best to activate Pursuit and Killing Machine after you've knocked your opponent to the ground. Killing Machine is available in the slasher and relentless variations. At the cost of being briefly incapacitated, this special move gives Jason unflinching armor for a short time. The goal of Killing Machine is to end the combo in a hard knockdown. When the buff runs out, Jason will be vulnerable for a couple seconds, but time it right to avoid being punished. Jason imparts the true meaning of horror with his x-ray finishing. And Jason makes his mother proud with his cinematic fatality. Enjoy the horrifying Killing Machine, Jason Voorhees. And tune in to the ESL Mortal Kombat X Pro League presented by Xbox.


Hi, everybody. Jeff Hemmelt from sfmsports.net and SUTV after the Stephenson women's soccer team fall. One nothing to nationally ranked Mizraha Cordia here at Mustang Stadium here with Coach Grant Miller and Jordan Pareto. And Jordan, another tough loss for your team, third consecutive defeat, I should say. Another one nothing loss. And another early goal just kind of hurt there in that first half. Yeah, I know we're really disappointed in ourselves. We know we can need to hold ourselves more accountable into a higher standard. We can definitely play better than that. But we definitely picked it up in the second half. I think it worked, but that fall for the couple of minutes, just that's how we lost. Yeah, I was going to say, you picked up the pace a little bit in that second half, had a couple of opportunities in that final third, and it just seemed like maybe the conditions had something to play with it. I don't know if you guys noticed anything about the rain that we had earlier. I mean, that might have helped with some of those loose balls, but you attacked in that second half, and nearly got an equalizer a couple of times in that second half. Yeah, I mean, we both had to play in the rain. It was fair playing field for that. None of us had an advantage. But again, it's just a disappointment to lose at home, especially. And there are good consecutive loss. We just have to get it together a little bit. So you're coming back on the road for the next couple games. What's the key for you guys to get back here to 500 and above? We have great team chemistry. I'm not worried about that. I think we all work hard and play for each other. I think just focus is the main thing, this coming week in practice. We got to stay focused and play hard for each other. All right, well, Jordan, appreciate the time. Commiserations on the loss, but good luck the next time out. Thank you. And now, turning to Coach Gramer and Graham, another tough loss, another one nothing to feed. Not a familiar position for you guys to be in with three consecutive losses. So how do you pick the girls back up after this one? Well, the biggest thing was that we were looking for reaction from our performance on Wednesday. It was a poor performance against Gettysburg, another one goal loss. And we got it for 80 minutes today. So for 80 minutes, the girls really worked their tails off and really fought a team that's nationally ranked. But for 10 minutes, we let down. And the first 10 minutes of the game, we were all over the place. And when you do that against a really good team, they're going to take advantage. And that's something we'll do when we're on our game for 90 minutes. So the team, I don't think, needs picked up. We just had a great talk at the end of the game. And the girls, the captains, we've got great leadership. And they said exactly what needs to be said. So people are frustrated, dissatisfied. But we've got good team chemistry. We're going to go into the next game. You mentioned your veteran leadership. I know we didn't have a bunch of time to talk preseason. But your squad's pretty much stable. You have a couple of freshmen coming in. But the majority of your squad's pretty stable with folks like Jordan and the rest of your captains and your seniors. Does that help in terms of focusing the squad for the next game with your veteran presence trying to help the underclassmen out there in future games? Yeah, we're all on the same page. And it's because we have such a great returning group. 24 players coming back, small freshman class. These girls really know what's going on. And we've not been outcoached by any team tactically. We've been right there. The girls have listened to the scouts on the other opponents. And Washington and Lee, Gettysburg, and even today, we handled the best that they could give us. And we just got to clean up some of that technical stuff. So the returners know what they're doing. The returners are going to keep this ship sailing along. And we're going to win the next two games this week. All right, positive thoughts, as always, from you, coach. I appreciate the time and good luck on the road trip coming up. Thank you. We'll look forward to talking to you next time when we win both. All right, sounds good. Jeff Helm on the long side, Jordan Peretto and Coach Gramo are after the one-nothing defeat to Ms. Ricordia here at Mustang Stadium.


Welcome! We're going to teach you everything you need to know about how to vote in Vermont elections. In order to vote in Vermont, you need to be registered to vote. Registering to vote is very simple. There are many ways to register to vote. You can register to vote ahead of time at the clerk's office of the town that you live in. You can register by filling out a form and bringing it to your town clerk's office. You can register by mail. If you register by mail and it is your first time registering to vote in Vermont, you must mail in a copy of one of the following forms of identification. This can be a valid photo ID, like a driver's license or passport. It can be a current utility bill, a current bank statement, or a government document. It needs to have the address where you live now. You can register online. Or on Election Day, you can register to vote at your polling place. You will need to go to a different table and it can take a little extra time. If you move to a new town, you need to register to vote in that new town. If you move within your town, you should update your voter record with the clerk. It's important to know that only citizens can vote. If you are not a U.S. citizen and you vote in a federal election, it can be a deportable offense. When you register to vote for the first time, you will be asked to take an oath. The oath is a promise that you will only vote for what you believe in.  You must vote your conscience. When can you vote? You can vote on Election Day. You can also vote early at the clerk's office, up to 46 days or six weeks before Election Day. Or you can request that a ballot be mailed to you at your home. You need to make sure the ballot is received at the city clerk's office by Election Day, so plan ahead. Make sure you know where your polling place is. You can ask at your city clerk's office. When you arrive, get in line for your district. Most of the time, the lines are short. But sometimes, like for a presidential election, the lines can be long. When you get to the table, say your name clearly. Tell the staff your last name, or family name, first. The election staff will make sure your name is on the list of registered voters. They will give you a paper ballot. Bring the paper ballot to one of the privacy booths. There will be a pen in the booth for you to mark your ballot with. Fill in the circle by the name that you want to vote for. Most of the time, you will only be able to vote for one person. But for some elections, like the Vermont Senate, you will be able to vote for more than one. The ballot will tell you. If you do not want to vote for one of the listed candidates, there's a space for you to write in any name you choose. But you aren't required to write in any names. Sometimes in local elections, there are also questions to vote for, like whether or not to raise taxes for schools. These questions will also be on the ballot, sometimes on the backside or on a separate piece of paper. Once you have completed voting the ballot, you will take your ballot and feed it into the vote tabulator machine. A poll worker will assist you if needed. No one will know how you voted. It is private. When is election day in Vermont? Local elections for mayor, school board and city councillors or local select board happen on the first Tuesday in March. Every four years, this same day is also the presidential primary. The presidential primary determines which candidates will be running for president of the United States in the general election. When you are requesting an early absentee ballot, or if you vote on election day, you will be asked which ballot you want to vote, Democratic or Republican. There will often be numerous candidates for various offices. You won't just be voting for president. The state primary election is on the second Tuesday in August. In this election, you will be given all major party ballots, Democratic, Progressive and Republican, to take into the voting booth. You then get to decide which party ballot you would like to vote. You can only vote one party ballot. Federal and state elections happen in Vermont on the first Tuesday in November. These elections happen every other year. In the state election, you will be able to vote for Governor, Lieutenant Governor, Secretary of State, Auditor, Treasurer and Attorney General. You will also be able to vote for the local representative to the Vermont legislature and for the senators in your county. In the federal election, you will be able to vote for the federal representative to Congress, your U.S. Senator and, every four years, for the President of the United States. Hi, I'm Vermont Secretary of State Jim Kondos, Vermont's Chief Elections Officer. The right of every U.S. citizen to vote is a sacred right enshrined in our Constitution. By voting, you help choose who represents you in your local state and federal government, and you help make important decisions in your community. Every time you use your precious right to vote, our democracy grows stronger. As a proud second-generation American whose grandparents came through Ellis Island, it is a great honor for me to welcome all new citizens into the voting process. Please register to vote and then cast your ballot on or before Election Day. Remember, your vote is your voice. For more information, please go to the Vermont Secretary of State's website. Thank you.


So welcome. It's my first time like presenting on a user group because they keep on telling me not to sell anything. So today we're not selling anything. We're just going to be talking about the cool technology. And I was very passionate. I was very passionate about it because once I once we once we discover and once I played around with it, it actually made me feel good about being a techie again. As you know, I haven't been doing any development work for around seven, eight years. But after seeing this, it's actually very exciting. With me, here's Matias. He's our intern. It's his last weekend trend micro. Oops, no mess. It's his last weekend trend micro. So he's going to NS after this. So if you need a very good developer, this guy is available in two years. Right. Yeah. Cool. All right. Let's get started. All right. Can we get a show of hands? Who writes code here? Who's a developer, writes cloud formation, anything? All right. We're not going to give, by the way, we have, we have like wireless chargers with us. If you answer the right question, but not for this one. I think we don't have that much wireless chargers. So, okay, this one, next question for you guys, right? How do you figure out what to write? So, for example, you have a, you have a, you're building an application and you need to know, you need to know, I need to, I need to do a regex function. How do you actually research on how, or how do you build that function? Where do you get your ideas? Google. Google. What? What? GitHub search? What else? Oh, that's my favorite, Stack Overflow. Right. I mean, how many times have we like, when we have a problem, right? And you go to Stack Overflow and then you copy and paste something there and then when it breaks, you don't know how to fix, right? So, this typically, you know, our lives, right? Next thing is, and there's a next version on this, right? So, somebody said Google, somebody did, somebody's searching GitHub and somebody's doing Stack Overflow. What's next? Have you heard, guys? Have you heard about coding companions? Right? Anyone knows coding companions? Have you heard of it? Right? It's not like, it's not like your friend who sits beside you, right? But there's this knowledge called coding companions. So, there are two coding companions that is very popular right now. First one is Amazon Code Whisper. We're supposed to preview today, but they didn't give me access in time. So, we're going to be talking about the alternative, which is called the GitHub Co-Pilot, right? But just to give you some background, right? Co-Pilot is running under technology called GPT-3. And what does GPT-3 mean? What is GPT-3, Matias? It's basically a natural language processor. Right? So, what else GPT-3 is being used on? So, if you look at Instagram, there's a lot of, there's a lot of apps in Instagram saying, I'm going to write copy for you. So, that's one of the use case, right? And next one is Designer. So, you know, you want to design, I saw this in a YouTube video where they just type in, I want you to copy, I want you to copy stripe.com. And it will design a UI using Figma, right? And will give you a mock-up of a copy of stripe.com. And for most of us here, right? Next one. For most of us here, here, we kind of need this. Resume creator, right? So, if you want to find a job, you can actually use this to write your own resume. It's very cool. There's some questions about folks, right? What are the differences between Co-Pilot and Co-Visper? So, in some, there's a medium blog post that talks about the differences between two of them. So, there's this function that they created, like get price of Bitcoin, right? So, the first one on top is written by Co-Pilot. The one at the bottom is written by Co-Visper, right? So, pretty cool. It's pretty much the same, but they have their own way of writing things. And I reckon that they're doing this because they're different because they're getting data from two different sources. Obviously, GitHub has more, you know, it's more stuff because everybody's posting stuff in GitHub. Whether as for Co-Visper, I'm not sure where they're getting their machine learning data from. Do you know, Kai? Okay, I don't know. All right. So, what does, what does, what does Co-assistant does or Co-Pilot does, right? What does it do? It helps you write helper functions.  And you're going to go to stock overflow. What is the function in Python to convert x to y? So, that's a very good use case for this, right? It reduce writing repetitive tasks, right? So, for example, I was playing around, create a login class. Boom, it will create a login class for you. It helps you learn new stuff, right? I don't know how to do this now. I know how to do this just by asking the Co-Pilot. Figuring out complex calculation, right? Like, write regex. Very, very easy. Like, for example, how do I know if a color, okay, there's even a YouTube video I watch, right? How do I know if a color is bright or dark? So, when you're doing a UI theme, right, based on the color, it will tell you if it's dark or light. It's just very impressive. But, okay, what it does not do, right? System design. So, you know, for example, how you structure your code, how you structure functions, how you structure classes, what are the directory structure, how many files do, where do I put the folders in? It still does not do that, does not do yet software design, data flow. And the last part is it does not guarantee code security because it's just like, I don't know if it's like Stack Overflow, but it reads stuff from GitHub, right? Or it reads stuff from a repository. It's only as good as the models or the data that it creates, right? And something that is very explosive, right? If you go to Stack Overflow and ask how Co-Pilot works, I think that's a big issue, right? Meaning, you're asking one guy to ask how to use the helper how to use, right? Yeah, I would just ask one or another. Now, there's a controversy. There's a lot of controversy around this because some of the developers who submit GPL code in GitHub, they're not being attributed by the code that was used. Imagine, right? I asked Co-Pilot to create a function for me. That function was patterned after a function that you guys created and you put in GitHub. You won't be attributed to it. So that is something that you have to be concerned about, right? And then in YouTube, right, you can always see, and where do you see it, right? In YouTube, you see a lot of these people making a website in eight minutes. Actually, why don't we do it now? Like Matthias is here. He's going to show you how to build a website in eight minutes. So I'm going to pass the engineers to the edge. All right, cool. I think the reason why people don't like it is because GPL code is supposed to be remain open source. Yeah, correct. So people are using open source code and making a website. Correct. It's not what Scott asked me. All right. So hi, guys. I'm Matthias. So I won't be making things, you know, 100% from scratch, but I'm just going to show you how, you know, co-pilot can help you, you know, write some of the boring stuff so that you don't need to regurgitate it or try to find our stack overflow if you forget. So I have this really simple express server set up. So did it? Oh, sorry. Let me just duplicate the screen. All right, we good now. Do you guys see it? All right, cool. Yeah, so I have this pretty basic express server and I'll be showing you how, you know, this can help write APIs on the express server as well as a very basic front end on React. So as you can see here, we already have, you know, a very simple express server set up with a connection to MongoDB. And now I kind of want to create, you know, the Mongoose model because I'm going to be making a to-do list, right? A to-do list or a task list. And I want to create the model to store the task and I wanted to have a field that has a text. So it's the task that you're submitting and a checkbox that says whether it's completed or not. So with GitHub co-pilot, you can just write a comment, right?  And if I keep pressing enter and tab, you can see it just automatically comes out with a code for you. So this is pretty, pretty, pretty cool because you don't need to spend all that time writing. And yeah, as you can see, all I did was press enter and tab and, you know, we created a Mongoose model. So we already have that and now we kind of need an endpoint to send all our data to, right? So let's create an endpoint that creates a task in this database. All right. So this is going to be a post endpoint. So as you can see, it comes out with that. And if we keep going enter and tab, it says it's going to create a new task. All right. And that is basically the function. So you just kind of want to keep pressing enter and tab to see if it ends. And sometimes these code companions have a slight issue where, you know, it doesn't finish off with a semicolon or it doesn't finish off with your brackets. And sometimes it just puts some gibberish or it puts in, you know, like variables that don't really exist or variables that you don't declare. So, you know, it's always important that, you know, even though it auto-generates the code for you, it will be, you know, still like watching out and still reading through the code. So it's not something that can completely replace a developer. It's not something that can substitute for, you know, you not knowing how to code. It just kind of helps you a little bit. So, yeah. So you can see how easy it is to just make the post endpoint. So let's do two more. All right. So I'm going to make one more endpoint that retrieves all tasks. So that will be a get request. So, yeah, it will just retrieve all the tasks. All right. And then it will send that. Yeah. So we have that endpoint now. All right. And now we'll create the final endpoint that allows us to update the tasks. So this will update the task whenever we, you know, click the little box that says this task is done later when we make our front end. All right. Sorry. Not like that really matters, I think. But, yeah. And, yeah. Yeah. So as you can see, Co-pilot just helped us create, you know, a model in MongoDB. So using Mongoose. And it also helped us create our endpoints that, you know, our front end is going to call, right, for this API. So we can go ahead and save that. Okay. And now what we are going to do is we are going to take a look at our front end, which we'll be running on React. All right. So first of all, there's like literally nothing here. So everything that I'm going to write right now is going to be auto-generated by Co-pilot. So, of course, there's still all of the comments that I left there. So that's kind of like the structure that I'm going to have for this, the kind of flow chart that I thought about when looking at how I wanted to, you know, create this front end over here. So first, right, we want to make a function that sends a post request to the tasks endpoint with data from, you know, the form over here. So let's create that right now. So it creates a function called handleSubmit. All right. Cool. So that, so PreventDefault just prevents the page from refreshing on submission. And we can change that if we want to. All right. So I also imported X here. So what it's going to attempt to do now is there's some code that will send the post data through Xios to the API URL over here, which I set to, you know, my local host. So if I keep going, we have just made the function that will submit all the tasks to the endpoint. All right. So now that we've done that, we can, you know, start, you know, creating our front end, right? So now we kind of want to create a form that takes in a task and then submits it to the server using that function. So I made a comment there and I can just go here and it will start generating this form for me in JSX. So as you can see, it creates the header. It even creates the form. So as you can see, it even, you know, links the form to the handle submit function that I created or actually GitHub co-pilot created earlier. So if we keep going, all right. All right. So that should be our form. So that's our form, right? So on a very basic level, what we have now is we have a function that sends a post request to the tasks endpoint with data from the form. And yeah, we have a form that submits it to the function. So what we can do now is hopefully this works. All right. I saw I tested this, guys. So we can launch both the, there's a missing bracket at line 97 on the server. So another problem that these coding companions have is that sometimes they don't fill in the brackets and the semicolons for you. So give me a second while I try to catch this one. Okay. Below. Is it here? Oh, yep. My bad. All right. All right. So now we can try to launch the server again. All right. So the front end is running. All right. The front end is running and we see we are connected to the database. So let's try this out. If we refresh. Uh-oh. Okay. So we failed to compile. Let's check out our logs here. Line 72. So here is another error. So yeah, we need to be pretty careful about these things. And let's try that yet again. All right. So hopefully it compiles properly this time. So after this, just to prevent any of the errors, I'll go into the project that I already pre-compiled. But it's pretty much the same steps that I used. So let's give you a second to load here. We know it might not work. So we have a cooking show app just in case. If the food is rotten, we just got to take one out from the oven. So something is messing up here. So don't worry. I already have a running one from GitHub Copilot already. So trust me on this. I wrote none of the code. I'm just letting GitHub Copilot kind of take the wheel. But I think definitely this is a pretty good example of how GitHub Copilot or just coding companions in general can't really take over a developer's job. Because things like this can still happen. So it's really more of something that can help you write and understand functions a bit better, especially when you can't visualize or you can't with something off the top of your head. It definitely helps. You can't with a code snippet. But definitely not like a full project. And I think if I stayed here to talk to you about the full project, going through it will take a bit more time. It makes a good developer great, but it doesn't make a not-so-good developer good. That's the only thing I can say. So actually I can shift over to the set of... What? Okay. So are you doing the other stuff? No, I'll just show the stuff like the... You can make a regex function to validate text. So actually this to-do list, right? You can say I want to get the groceries. So I'll submit it and that sends it to the database. And it can even generate the list. So if I hit the checkbox and I refresh, it does update the database as well. So it's a really, really powerful tool. I really wish the code on the fly did work, but I don't know if you're running out of time. What's also really cool is that... We mentioned earlier how when the auto-generate code is not always safe, and I have this pretty cool extension here from Trend Micro Open Source Security. That basically just shows you... Here I have un-sanitized HTTP input, and what's pretty cool is that it just pulls up the exact line that was generated by GitHub co-pilot or the coding companion. So here I asked to create an endpoint that updates the completed status of a task by its ID. And when you auto-complete this, you aren't going to be looking through every single line of code and you aren't going to be rigorously testing it. So what this kind of does is that it goes in and it points directly at the line of code that has a problem. And it will tell you that maybe you might want to consider sanitizing this line of code to prevent any injections or cross-site scripting. So that's kind of it on our developer side. Since we're in the AWS event, and then Kai was talking to me about this a while ago, how does it help write infrastructure? Matias just showed you that it can help you do some code stuff, but there's these two things that I really super excited about. So CloudFormation templates. So you can actually use this as well to write CloudFormation templates. Easy AWS, boom. Then it will automatically properties. There you go. So yep, you can even help you write CloudFormation. I like, what about S3? I want to create, what about CLI? Bash. Let's close this. What about Bash? I want to do AWS. Oh, okay, there you go. There you go. I just typed AWS. I can create shell scripts. And for the people who use Kubernetes here, actually I can just type, as long as I put API version v1, it will say create pod with engine x. And there you go. There you go. Yeah. So it's thinking now what kind of spec it will use, but there you go. So basically we traversed five languages, or four languages with this tool. But I think for the spec it didn't think too much. But yeah, it can do a lot of stuff for you. So yeah, that's it for us. Thank you for having us here. See you at the drinks later.


So this is looking very cool, really like you're the way you curl the paws is the feeling of the steps and everything it's cool. I think the overall impression that I had was we make this just ever so slightly faster than that. What is this? It's about 10% faster and 15%. I think the only thing I would slow down with that is right there, that last step. So it's going to be complicated basically. 10 to 15% faster on everything. That step though, that move, you keep the way you have it and then again 10%. So that gives you just the right weight, just right now it feels ever so slightly slow except that step. So from here to here, leave that timing. Then so you're having questions, because the rest looks really good and your questions are spot-on. So the back legs on the turn, what's weird about those is that step there, it's a tricky thing. Visually you're moving this, this guy, hold on, these two are turning in Y at the same time, pretty much visually at least. So I know the back leg, it's left leg, paw goes first, but you see right here, this feels like they're just kind of sliding and that foot comes to a stop a bit too quickly and by that foot I mean the screen right one. So what I would do is you do all this, it's all correct. Then on that step try to make that step this way lead more, delay the hips which will help you delay the turn on the other leg because as you go forward see you got hips moving and you got the visuals of these guys moving to the right as well, everything's moving kind of together versus that leg here goes first, there's a little bit of up and a little bit of rotation this way of the hips you know so you can feel the mechanics of okay they're raising hips raise a bit and go a bit this way because of the weight shift and this leg is doing most of it and the moment it's kind of setting it's from part of the paw on it you can start moving the hips and then because of that then you can start moving the back leg that's kind of to me the biggest thing it's just the movement in units and even stuff like this feels a bit weird where that part when you rotate in Y because the thing is you also rotate you know when you've got where I can't draw it's going to be probably massively uh unhelpful it's actually this one so your pivot point on that turn feels like it's here and you do your rotation in Y whereas I put it here front loaded it's like imagine you know when people throw the cigarettes on the floor and they do kind of the toe you know they put the foot on the cigarette to kind of you know press it out kind of extinguish whatever you want to call this and it's you're doing a toe rotation and right now this feels like a weird independent rotation on the leg see this like everything is kind of rotating from the from the heel and I would just probably start it a bit sooner because right now what's happening is that your knee really points this way and this really points this way it gives this cowboy look so you can start earlier so this is already more flat towards us and goes more back out this way earlier and then just for complexity you can make that turn while you know leave the toes on the floor but then basically you lift up the heel a bit more if that makes sense right so this will be on the floor but you raise you raise this I don't know if it makes any sense here you should know the technical terms there you go if you watch this all right this is what you have and then you're turning and you're pivoting off of here pivot off of here pressure on the toes and then as it turns be in this pose so it's a bit lifted it's still pressured on the toes the tips but the back side goes up a bit in the air so it's not just a flat turn that's just the rotation wide it feels too computer-y and I'm talking during this screen right foot on this turn it's a bit more complex that's cool right this is awesome not sure if that is too much it feels too much but then again this could also be in a reference and you can have a little sand puff or something as this the toes and everything the paw curls back maybe that's too much but you know just watching this or right now feel like it could be too much but maybe it's in the reference it just feels it feels animated it feels like an extra rotation that's too exaggerated I would personally tone this down 50% even if that's in the reference and then you're not convinced about the head try to lead more with it that's fine but then when it walks and stops I'm not sure I'm doing the right thing so I like what you're doing with the head my only concern is the zombie look of it and then there's an impact weight that's missing so what I mean by this is this turn it's just overall slow right so if you go again 10% it's going to help that's already helping right doing it a bit faster so what's weird here is that your rotations in y they go like that's how they feel they don't feel like he's doing a turn looks a bit turn some more looks a bit looks looks you know there's needs a bit more variety and complexity to make this more photoreal so this turn is a bit even and it also feels very much in y don't forget to also have a bit of the rotation if needed even like a little dip so a bit of x it's a bit more complex in your rotations this is the tricky thing now you know you don't see pupils but even with darts and things and you know ear flutters it just this feels very very slow and mechanical so this will be one of those where it kind of looks in a cookie on it looks wait a bit look a bit more wait a bit and then on the turn like this to not make this feel so detached I get I get your feeling of detaching and feeling too detached what's going to help is rotating the head to eye line goes into this just move it over kind of clockwise like that so it's not just in y like to me it feels like the the the angle those eyes right they're always like that see it's always horizontal and that makes it very too clean to computery and too detached while there's awesome stuff going in the chest and everything else the head stays put so even on something like this when you have big steps and its capillars move up and down I'm looking at the nose if I distract the nose it feels so straight on I see a little bit dip here but imagine doing a step like that you have a slight dip in x down with a little bit of rotation in z just something more complex so the irregularities and the rotations through here is going to help that turn and that's cool even here when you go here to that it feels your downward rotation feels also very even you can have I can ever just like dip like this this could be your curve or just a little bit suddenly it dips down a bit faster or rotates down faster right through this section especially through here this feels like it's an I can't hit going down so you need a bit more rotations and more NZ and a bit of downwards and then the other thing is boom on this I know they're very graceful and very subtle cats if they want to they can but just to pump it up a bit on that impact here right through there you want a bit of a sharper down in x so that the nose would be here and maybe again a little bit of a side maybe even in y a bit like it'll just complexities of in all three axes on that impact so it feels a bit more right now this feels soft taking out the weights you know just on impact here you can have a bit of a almost two frame like a three frame sharp dip like imagine the rotation down like you're rotating down and over three frames right just go much faster and then you continue this right so you will feel that little impact through here because it suddenly accelerates but you wouldn't actually that's not true you wouldn't stop here you would go more like that it's a sudden drop but then the recovery is slow which gives the what you have here this majestic feel and this nice control look of that right also what's going to help you a bit selling the impact this is going to be later on like as you go like this close the mouth 50 percent more boom and on that impact open that mouth same thing here with two or three frames open so it's basically your jaw rotation goes boom and then recover like that right but you want a sudden dip and the thing is what's going to help sell realism in this is you know like if it's people usually do big if it's big it has to move slower yes and no big pieces chest and hips and to a certain degree the head the more mass the slower the recovery right if you go somewhere it's going to take much longer to change direction that's going to show you weight if you have big mass that suddenly stops and changes direction quickly that's not a good idea to portray weight but small things like ears and jaws they will impact quickly and that will give you the the photorealism of of smaller things reacting and moving quickly it's like if you have animation then you put clausim on there and if someone you know makes quick moves or direction changes or hair or whatever you get that the difference between slow moving parts and fast moving parts but so everything is not slow but then you get that weird swimmy slow feel boom so on that on that impact you would have a little bit in the jaw and a little bit in what's the word ears all right that's it that's it for me great job though it's a great update the update uh i haven't seen this for a while so um i'm just calling this an update looks great all right thank you all right there's an email you can sign up you can start whenever you want you can submit whatever you want you get 16 submissions either way a like and subscribe would be awesome all right thank you