c'est toujours un hâte de déterminer,
où dois-je aller, où je suis,
où je suis là, en ce moment.
Et donc, avec ce mouvement de l'API,
vous avez implémenté le Nudge.es,
vous pouvez simplement dire,
«mouvez ma main à 100 pixels».
Bonjour, bienvenue à la podcast de DevTools FM.
Je suis Andrew et je suis ma co-host Justin.
Vous pouvez nous dire un peu de ce qui vous inspire à créer Nudge.es ?
Et peut-être que vous voulez donner un meilleur description
que ce que j'ai fait, peut-être que je vais commencer par là aussi.
En général, je suis allé dans le sujet de l'automne desktop
en utilisant JavaScript en juillet 2018.
Et à l'époque, je n'étais pas très heureux avec les résultats que je trouvais,
parce que j'ai voulu avoir quelque chose qui ne me reste pas longtemps,
ou plus longtemps, et surtout dans le système de note, c'est un peu difficile.
Et donc, tout le library que j'ai pris a été indiffémenté,
j'ai eu un fail de l'EI,
ou c'était assez dur.
Et après un moment, j'ai décidé de prendre un point,
j'ai commencé à travailler sur Nudge.
J'ai fait un petit prototype,
et j'ai réalisé que ça pourrait travailler de manière que je veux.
J'ai investi plus de temps dans ça.
Et bien, on est là, plus de 3 ans plus tard, et on va encore.
C'est comme ça qu'on va.
Quand vous avez étudiant la bibliothèque,
était-ce que vous avez un problème ?
Vous avez essayé de le faire ?
Est-ce que c'est quelque chose très spécifique que vous êtes essayant de travailler ?
Donc, basically,
le principal goal que j'ai essayé de faire
était d'utiliser pour l'intégration avec l'automation web.
Donc, basically, le projet d'étude qui a vécu ensemble
était la combination d'automation browser
combinée avec l'automation web.
Et tous les outils que j'ai eu à l'aider
ont également bärté leintérieur de l' destinages
et signalés.

needed for

Social Monet






Jing
Et j'ai décidé de me mettre en place un topic.
Donc, ça veut dire que vous utilisez NutJS pour faire votre automatique?
Vous ne vous en restez pas sur quelque chose de joueur ou quelque chose qui est intégré avec le browser.
Vous avez juste vraiment plus d'automates sur le programme de la computer?
Donc, NutJS en itself est plus targeté que la PC en itself.
Vous pouvez simuler les inputs de la keyboard.
Vous pouvez naviguer vos mâles autour de votre desktop.
Et comme je l'ai dit, c'est possible de vous donner des images de template.
Et puis, vous scanerez votre desktop et vous dites « Ok, je l'ai placé dans cet endroit.
Je vais bouger le mâle à cet endroit. »
Et votre automatique de browser est faite en ce moment avec Selenium.
Et la combination de ces deux outils va généralement se développer dans un framework séparé.
Oui, je l'ai étendu par la fois, pas juste de faire un truc qui est un peu drôle.
Un de mes cousins a passé au cours de l'année 2020.
Il et moi jouions beaucoup en ruinescape quand nous étions plus jeunes.
Donc, je me suis remis à un point pour des propositions de nostalgie.
Je jouais en ruinescape et si quelqu'un a joué ça, c'est un jeu de base browser.
Il y avait une app « Javelet » qui a été créée dans le browser.
C'est un jeu qui est créé pour prendre le temps le plus vite possible.
Il y a juste un ton de temps pour faire quelque chose.
C'est un jeu de point et click.
Et je me suis dit « C'est drôle de bâtir ça.
Je veux faire mon propre bât.
Je dois avoir quelque chose pour contrôler le clé,
quelque chose pour contrôler le mâle,
et je dois avoir quelque chose pour détecter les choses sur la table.
Et je me suis remis à regarder les libraries de node
Je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
au rotating], je voulais regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder les libraries de node
et je me suis remis à regarder ces libraries

et stained d cyclone
et je me suis remis à regarder les libraries of Hä declaring
les LC$
correctement, il y a maintenant à moins cinq personnes qui me demandent si je pouvais les aider,
les acheter dans le bruit. Je ne suis pas sûr que je ne veux pas faire des faux statements,
mais je pense qu'il y a quelqu'un qui fait un profit. Ça peut être, ça peut être. Ça
peut être en termes de service, si vous êtes en train de bâtir, mais c'est aussi un challenge
technique, parce qu'il y a des choses spécifiques que vous devez faire. C'est comme
détecter où vous êtes dans le monde et pouvoir contrôler les ingrédients.
Mais c'était vraiment fun. Je pense que les abstractures que Nut vous donne sont comme
pouvoir vraiment facilement capturer un pièce de la scène et utiliser ça comme, hey, si
ce pièce de la scène existe, vous savez que c'est dans le pays. C'est pour attendre pour ce
pièce de la scène. C'est un problème qui est très simple. Et je pense que ça me
coûte à l'application, vous savez, de un contexte plus grand, comme, spécialement,
des tests automatisés.
C'était aussi l'un des plus grands goals que j'ai essayé d'achever, parce que c'est avec
beaucoup, beaucoup de libraries automatique que vous êtes en train de faire un problème,
que, bien, c'est possible de faire des choses, mais tout le monde va faire ses
propres fonctions de utilité pour faire le API enjoyable.
Et donc, un de mes gros goals était de, ou au moins, essayer de designer un API qui
est, basicement, fun à utiliser et vous en aurez de la grotte dans, comme, un minute ou
d'autre.
Donc, mon goal était, vous regardez un exemple, vous grottez le concept et puis vous êtes
bon à aller.
Donc, j'espère que ça marche.
Oui, c'est comme un exemple de trouver le bon prématif pour faire le programme
facile à utiliser.
Et le bon prématif, en ce cas, il s'agit d'être en regardant la scène et de reconnaître
quelque chose sur la scène.
Donc, c'est assez cool.
Et aussi avec le mouvement, parce que c'est quelque chose que j'ai implementé
seulement après un temps, parce que j'ai remarqué que j'ai voulu une manière
plus facile de naviguer mon scénario.
C'est toujours un hâteau de déterminer, OK, où dois-je aller, où est-ce que je suis
là, à l'heure de l'instant.
Et donc, avec ce mouvement de l'API, vous implementez un JSON, vous pouvez
simplement dire, « Mouvez ma main à la tête » par 100 pixels, pour exemple, ou en combination
avec ce template image matching, c'est possible de dire « Mouvez ma main à la tête
» à la tête du centre de l'image que je vous ai offert.
Et donc, quand la main est placée, elle va changer la main à la tête du centre de
cette image que vous avez offert.
Donc, ça marche par composant plusieurs réelles fonctions simples, qui vous
sont assez fortes et expressifs à l'API.
C'est quelque chose que j'aime vraiment.
Il y a une partie difficile de l'automater des interactions desktop, où le
problème que vous interagissez, c'est que vous voulez cliquer un icon.
Le icon pourrait être transparent, le background peut être différent, donc
ce que vous avez choisi peut être différent de différentes situations.
Donc, ça peut être une chose particulièrement difficile, où un
petit écran ne pourrait pas être suffisant.
Donc, je sais que vous avez intégré l'opinion de la bibliothèque, et que vous
utilisez cela dans la tête, est-ce que c'est toujours comme un petit image
match ou avez-vous plus d'une sorte de pattern robuste que l'API peut
apprécier ?
Donc, à l'époque, c'est un match simple.
Mais peut-être un petit peek, je suis maintenant en train de
travailler sur un nouveau réel de majorité.
Et l'une des topics que j'ai voulu apprécier, c'est de faire
cela plus facile à utiliser sur l'API, en termes de dépendances.
Et l'autre chose, c'est que j'ai voulu l'imprové du park image,
parce que ça a toujours eu les flots.
Donc, comme vous avez dit, pour nous humains, c'est assez facile
de dire, c'est certainement le point que je suis en train de
prouver, mais l'expression en code n'est pas aussi simple.
Et donc, je suis maintenant en train de faire des
manières pour faire l'image match plus reliable, même
avec la scale, peut-être la rotation, les choses comme ça.
Ça ne marche pas dans le CI ?
Hum,
Kind of.
You still have to provide a virtual display, but for example, my integration tests
on GitHub are all running using, for example, a virtual frame buffer on Linux host.
Not.js has a a suit of full into end tests.
And these into end tests are running inside a Docker container, which provides a virtual display.
So it's always booting up the exact same desktop environment.
And then I'm dragging icons around that it just up verifying their location and stuff like that.
But it's doable to run it on CI in the background using, for example, a Docker container.
It's pretty cool.
It'd be a really interesting way to automate like desktop application testing.
It's really interesting.
Is a, for example, I know from some people that they are using a JS to actually do application testing.
But in an environment where they do not have direct access to the system.
So basically they are connected via remote connection.
And they only have the image information.
So they use not JS and use the image matching capabilities to basically verify that the UI, they are currently reworking is like they would expect it.
Oh, that's really interesting.
On the target system.
I want to talk a little bit about the native dependency in that.
So you have this library called LiveNut.
It's written in C, C++.
So it implements a lot of the underlying cross system functionality.
Key press detection, mouse control, screen detection, etc.
Can you talk, can you just talk a little bit about what it was like developing that library?
I mean, I know a lot of people who listen to this probably haven't taken the task of building a native dependency that works with Node.
And I don't think it's always the most straightforward thing to do.
Yes, in general, not JS has actually two native libraries because this whole open CV part is a native node add on as well.
But for the LiveNut part.
So essentially, LiveNut is a fork of robot JS, the Node framework you mentioned earlier.
But unfortunately, this framework is no longer maintained.
So back in the days, I decided to fork it and maintain it myself.
That's how LiveNut actually came into existence.
Over time, I changed quite a lot in the project.
So, yeah, I guess the most prominent difference to usual node development when it comes to native add-ons is
you're dealing with a whole different environment in regards to what kind of build system are you using.
What kind of language are you using?
How do you distribute a native add-on?
Because in the end, a native add-on is a binary.
So you have to build an add-on for macOS, for Linux and for Windows.
So there you have to also think about how do I manage my packages that I can provide
three platforms with as little overhead as possible.
And so the changes I applied were basically all learned the hard way because there are also two different ways to develop native add-ons.
So the initial version, the initial fork of robot JS used a tool called Native Abstractions for Node.
And the problem with these Native Abstractions for Node is that these binaries, which are generated, are also dependent on the Node.js version you are building them for.
Which means on every new major release, you will have to run a new build to provide new bindings.
And the OpenCV add-on I'm using is currently still using this tool.
Because I just haven't had the time to get rid of it because OpenCV for Node.js.
So that's the library which provides these bindings is huge.
On the other hand, it's the most complete OpenCV binding you find for Node.js.
But, well, that's a different story.
With all these problems I was facing, I first of all decided that I would want to use a build system I already knew.
So I ditched Node.Jip and switched over to using CMake.js.
So basically just a JavaScript wrapper around CMake.
And the second major change I applied was that I did no longer use these Native Abstractions for Node.
But with Node 10, they released the so-called Node API.
Which is another way to build Native Node add-ons.
But in contrast to Native Abstractions for Node, you no longer depend on the particular Node version.
So now it's possible to build it for, let's say, Node 12 and you can still use it with Node 16 without having to recompile anything.
So that was a huge win for me.
And also, yeah, lowered the amount of work I had to take care of because, well, I will just build it one time and you can use it with any Node version from 12 upwards you want.
Yeah, that's basically it with these major problems out of the way.
It was easily possible to just continue working on it.
And in terms of distribution, that's also something I solved in a pretty, I would say, lazy man's way.
Because I'm only publishing, so I'm basically just patching the package JSON on my CI job.
The CI job is running on Linux, MacOS and Windows using GitHub Actions.
And these three published packages are then all incorporated in one, I would say, meta package.
So there's a Node package, which is called, for example, libnud win32 for Windows.
And this package is a dependency for the overall libnud.
And depending on which target platform you're installing libnud, it will basically re-export the bindings for the respective target platform.
That's a pretty straightforward way to do it, and it works seamlessly.
Yeah, that's really interesting.
I knew that Yarn, the package manager, had just released a major version where in older versions, they had an issue where if you had a cross-platform dependency like this,
they would download all the binaries for all the platforms, even if you didn't need it.
And I forget exactly why they did that, but there were some complexities and system analysis or something that they had to do.
But they solved that in version 3, so just, I don't know, this just made me think of that.
Yes, for dealing with binary add-ons, there are actually quite a few packages out there.
I guess the most prominent at the moment is called Prebuildify.
And Prebuildify, if I remember correctly, does something like you just mentioned.
So it basically keeps or contains all the binaries for all the platforms.
So that the tool I'm using for the OpenCB bindings is using a bit of a different approach.
So it basically, during CI, it generates native bindings for every platform and every node version I want to use it for, and every electron version.
And once the binary is built, it uploads it to the GitHub release.
So the GitHub release currently has around 30 binaries attached.
And when you install the package, it will check, OK, which target platform am I running on, which node version am I running,
and then grab the respective binary from the GitHub release and unpack it in your Node modules folder.
Yeah, for a long time, I didn't know that node packages could work like that.
I thought everything was just JavaScript.
And I was helping out on a project called Package, PKG,
and they do the same thing where they have this separate project that has GitHub actions that builds their custom version of Node or an add-on for it.
And it's like a blindingly confusing world for me.
I think most people, when they look at Node, wouldn't even realize that you could do stuff like this inside of Node.
Yeah, so most of the time, when talking to people about the stuff I do in my spare time, they're like,
you're crazy, man, why do you do this?
Yeah, subjecting yourself to that pain.
But actually, now it's a pretty straightforward thing to do, because I have all the setup and my development workflow basically consists of, OK, I have finished a new feature, I will just merge the feature branch into develop,
and then from dependency to dependency upwards, it will just trigger a new build, it will, once it's completed, trigger the next dependency which builds and so on and so on.
And in the end, I have a tonne of new snapshot releases on NPM with just a finger snap.
So it definitely pays off to invest in these kinds of things.
Yeah, those type of workflows that GitHub actions has enabled are just awesome.
Like being able to just run on a Windows machine with little to no effort is A+.
Yeah, definitely.
So without GitHub actions, I wouldn't be able to develop Node.js because I'm only running a Mac and it's not feasible to build all the binaries on my machine.
I do wonder about, there are some languages that do a pretty good job of building cross-platform binaries.
So like ZIG and GO, I think, are two in particular that do a decent job of doing cross-platform compilations.
I don't exactly know how that works.
I'm not sure what the exact details are there, but I just saw a tweet today, I think, that was about the CLI framework for Elixir, where they use ZIG under the hood to make it where you can compile across-platform CLI framework in Elixir for just like any system or whatever.
I don't know, just seems like magic to me.
I only read about it, so especially from GO people, who are basically always telling me that, oh, look, I will just change my target architecture and then I run GO.bill and it will just spit out a binary for a different target platform.
But so far, I haven't looked into cross-platform builds.
So it would reduce the amount of CI work I have to do or the amount of work I'm using, but I simply haven't found the time to invest.
It seems like a non-trivial effort.
Most likely.
So we talked a little bit about two examples of things you've seen automated with NutJS, one being your test automation and the other being, apparently RuneScape's very popular.
But what are some other cool examples you've seen out there in the wild and on your Discord of what things people are doing with NutJS?
So I guess one of the things I'm most proud of, not sure whether it's okay that I brag about it in here, but looking at the projects on GitHub, which are using NutJS, one of them is the VS Code extension tester developed by Red Hat.
When I noticed that Red Hat started using my package, it kind of blew my mind because Red Hat was one of the first companies which brought me in touch with open source software using their Linux distribution, now almost 20 years ago.
And that was pretty amazing.
Given the fact that they are developing this VS Code extension tester, which is used in, obviously, pretty much VS Code extensions, now the software I'm building ends up being used in projects developed by companies like Microsoft or Intel or SUSE, which is another Linux distribution.
I used in my really, really early days of Linux, so that's pretty amazing.
And all just developed by one single guy sitting in the middle of nowhere in Southampervaria.
Yeah, it's pretty cool that something you just made in your free time just to scratch and itch is now being used to power probably thousands of projects if it's used in the VS Code extension tester.
Definitely.
Yeah, it's definitely the beauty of open source.
Yeah, I just wanted to say exactly that.
That makes every open source enthusiast's heartbeat.
It can also be pretty stressful.
Now you're depended on by thousands and thousands of people.
You gotta step lightly.
Yeah, it changes a bit.
That's definitely true.
So seeing that there are a lot of people using stuff you're building puts quite a lot of pressure on you, but at the moment it's still bearable.
So I do have to ask, where did the name come from?
What inspired the naming of Nudge AS?
That's a pretty lame story because I started developing Nudge AS with the prototype name of Native UI testing.
Then it evolved into Native UI toolkit and then I looked at it and said the first three letters are basically not okay.
Then one evening I sat down and started drawing this walnut logo on my iPad.
Well, I just went with it.
Nice, nice.
That's awesome that you made the logo too.
We made the logo for our podcast and I'm proud of that.
I even have my own stickers on my phone.
Oh, there you go.
We still have to do swag.
That's the benefit of having your own logo.
You obviously have a passion for automation.
What are other things that have you tried just automating other things in your life?
Do you use automation in other places?
Not in regards to home automation because when it comes to this, I'm relying on
boring old mechanical stuff.
I do not want to wire up my oven to my Wi-Fi because that makes no sense in my opinion.
But with regards to software, I'm trying to automate basically what's possible.
Et pour l'exemple, il y a quelques années, j'ai remarqué que je n'ai pas réveillé mon CV dans un peu de temps.
Et quand j'ai terminé l'université, j'étais dans le processus de envoyer des applications.
Et puis j'ai remarqué que je dois réveiller mon CV et je n'ai pas fait ça dans six ans.
Un ton de choses se sont réveillées entre les deux.
Je dois faire ça sur une base régulière.
Et c'est quand j'ai décidé que la plus facile pour moi de garder le tract de ce que je fais
était de le mettre dans la repositive.
Donc maintenant j'ai mon CV dans un file de la TEC dans la repositive.
Et puis la prochaine chose c'était que je ne veux pas construire le file de PDF chaque fois que je mette des changements.
Donc maintenant j'ai évoqué un travail de construire pour ma repositive,
qui se débrouille la PDF en utilisant la TEC MK.
Et pour faire la toute la histoire,
j'ai décidé que c'était bien de me faire valider que la repositive ne soit pas en train de serrer.
Je pouvais juste le publier.
Et donc maintenant j'ai vérifié en utilisant une image match
que certains des points de la TEC MK dans cette PDF savent que
elles devaient être en la même position sur chaque page,
sinon le layout est serré.
En fait, si ça se passe, je peux juste aller en train de publier mon file de PDF
dans mon service et puis c'est disponible pour le public.
Donc, c'est vraiment la façon dont j'en amusais dans mon espace.
C'est un peu étrange pour les autres personnes, mais c'est...
C'est juste un joyeux.
C'est toujours vraiment fun de trouver un problème que vous pouvez trouver avec la code
que vous ne pourriez pas d'en avoir,
donc en ce cas, c'était de vous donner un rézume.
Mais ma première histoire de partager avec vous de ma première fois est
que j'ai écrit une script pour m'aider à gagner des tickets de Coachella.
Donc, une station de radio local
a fait un campagne où, en matin,
ils annoncent trois artistes que ils allaient jouer,
et puis ils allaient aller aller à Coachella,
et puis vous devez les appeler en 7e couleur,
et puis vous avez deux tickets de Coachella.
Et je me suis dit que ça serait un problème de programmation.
Donc, après le travail, je suis allé à mon computer
et j'ai pu utiliser...
J'ai utilisé Twilio pour envoyer des messages textes à des gens,
et puis j'ai hacké à Shazam
pour lesquels ils ont des notifications sur mon computer.
Et je l'ai écrit sur le database SQLite où c'est tout fermé.
Et je pouvais lire les artistes qui ont été reconnus
par le stream de radio sur mon computer,
et puis ça a été déclenché en texte à moi et à tous mes amis.
Et je pouvais gagner 4 tickets de Coachella.
C'est une histoire que je parle de quand je veux...
Je parle de gens qui sont en train de programmer
et qui sont utiles au sein de les programmes.
Un collègue de m'a fait une question exacte
pour le World Cup de football en 2008.
C'était en Germany, Austria et Switzerland,
si vous le souvenez correctement.
Vous voulez un contest de radio ?
Oui, donc, dans le World Cup,
si je le souviens correctement et je ne suis pas sûr
si c'est bon de le dire,
il a payé son fils pour s'éteindre
quand son ticket a été annoncé.
Et son fils a dû aller au computer
et s'y accueillir.
Et dans le prochain déventi,
il a aussi été automé.
C'est un peu différent de l'automation
de l'utilisation de vos enfants.
En tant que travailleur.
C'est le type d'automation qui vient de l'expérience.
Je sais combien de travail ça fait.
Je vais juste faire un autre tour.
Pour parler de l'automation,
c'est quelque chose que nous avons parlé
de différentes personnes dans le passé.
C'est une question générique,
mais je vous demande,
quel est le futur de l'Ontario ?
Quand vous avez envisagé ça,
quel est le futur de l'Ontario ?
Je dirais que je suis très confiant
sur le futur de l'Ontario,
parce que je vois des choses comme
une photo shop
entrant sur la web,
ou des applications comme Figma.
Figma se trouve dans les bras
que c'est juste comme ça.
Je suis très sûr que
la web va, dans le futur,
s'évoluer dans la plateforme universelle.
Je suis en train de mettre ça.
Peut-être que vous avez besoin
d'un macbook assez expensif
pour juste rouler votre browser,
parce que tout le monde est sur le browser.
Mais les choses que nous sommes capables
de faire dans le browser
sont déjà très impressionnantes,
et je pense que ça va seulement
augmenter dans le futur.
Et, d'une autre partie,
je suis un peu hésité,
parce que
ça poille
à trois grandes entreprises
qui se sont évolués sur la web,
parce qu'il y a seulement Chrome,
Firefox et Safari.
Safari est comme
l'un des autres petits-brothers
qui veut jouer aussi.
Mais, en fait,
Firefox et Chrome
sont en fait
décidés sur la web.
Et c'est peut-être
pas la meilleure chose à faire,
parce que
dans ma opinion,
quelque chose de grand,
comme la web mondiale
doit définir
plus de gens
pour décider sur le futur.
Oui, c'est certain que les leaks
de Google
de l'antitrustice monopoly
sont en train de montrer
que, même si
les gens de la team Chrome
ont expéré
de bonnes intentions
de bonnes willes,
ça ressemble à Dicey.
Google
fait
un sens monétrique
en utilisant Chrome
comme un sort de lever
pour
opérer et donner
plus d'informations,
plus d'analytiques pour ads,
finalement.
Je suis certain
que
je vais avoir plus de compétition
mais, vous savez,
construire un browser est difficile,
donc c'est
un problème.
Je pense que
dans des manières,
nous avons tous bénéficié
de la taille
de Chrome
et
c'est pas la même chose
que la web.
Mais, vous savez,
ce n'est pas à la haute haute.
Je vous ai dit
qu'il y a besoin d'un MacBook.
Il y a des projets
qui sont en train de
se résoudre.
Vous avez entendu de la browser mighty ?
La browser mighty
est vraiment
la browser dans le cloud.
Alors, en fait,
la code sur votre machine
dans votre browser local,
c'est tout à fait un emploi
pour les machines vraiment powerantes
dans le cloud et les updates
sont juste streamés à votre browser.
Vous pouvez donc avoir un netbook
et vous pouvez encore vous faire
faire Figma à 60 frames par seconde.
C'est donc
les services de gamme
de la vidéo et tout.
Mais,
c'est pas le cas.

Ça
fait le sens ?
Pourquoi j'ai pas vu ça ?
Je pense
que je n'ai pas de
de la construction
comme je l'ai fait
d'automatique.
C'est juste
que j'ai pensé
sur ce que nous pouvons
avoir
pour notre wedding.
Et l'un des problèmes central
est toujours que vous devez
avoir de l'information à votre guest.
Donc, j'ai décidé
que le plus
easiest de la façon serait
de juste l'attendre sur un site.
Et puis j'ai commencé à penser
que
si je suis en train de construire un site,
peut-être que je peux le prendre un peu plus tard.
Et l'une des choses
qui m'a vraiment sensibles
est que
quand je viens
de mes weddings,
je suis vraiment
très conservatif
quand il s'agit de la privacy, donc je ne veux pas
que les photos de mes weddings
se fassent par Facebook, par exemple.
Et c'est quand je suis venu
avec cette idée
que l'une des
les plus cooles choses
que vous faites au wedding est que vous exprimez
votre gratitude
vers le...
Je ne sais pas le mot anglais.
Vers le bruit, par exemple.
Mais
vous ne pourriez pas faire ça
nécessairement en public, parce que c'est
aussi quelque chose de très très personnel.
Ou peut-être que vous voulez
partager vos propres photos
de cette particularité
pour donner le bruit
de votre
personnel de vue
sur un très très spéciale jour.
Et donc je suis venu avec cette idée
que je voudrais avoir un web progressive
qui permet à nos guests de faire upload
des messages
ou des photos.
Mais avec cette petite bruit
que tous les guests
ne sont pas contents.
Donc tout le monde
était capable de poster des photos
et ça ne voulait pas
quelle sorte de photos, parce qu'il était le seul
qui verrait ça.
Désidèment de moi et de ma mère, parce que dans notre
stream
toutes les photos et messages
et des messages de tous nos guests
étaient assemblées.
Donc nous étions capable de suivre
cette stream de photos de tous nos amis
et tout le monde était
basically préservé
sa propre privacy.
Et oui, je suis
encore venu pour cette web
tous les fois dans un while, parce que
c'est un souvenir très sourd.
Je vais me faire couper votre app pour mon wedding.
Donc je peux définitivement
vous recommandez parce que c'était
une expérience très belle
parce que vous pouvez vraiment sentir
que les gens ne sont pas concernés
de poster
ce que les autres personnes pensent,
de voir ça, de se faire du mal
c'était juste
comme, vous savez, je suis super heureux
d'être ici et j'adore vous
les gars, j'ai une bonne nuit
et tout comme ça.
C'est
un niveau différent
si vous pouvez, vous pouvez
faire sure que c'est vraiment quelque chose
que vous avez partagé dans la privacy.
Et si on a juste eu un petit QR code
dans ce petit
table
info carte, tout le monde
se scannait avec leurs celles, et en haut ils vont.
C'est cool. Je pense que
avec ça, nous pouvons commencer par les outils de la tool.
Donc
mon premier outil de la week
est
d'une réaction de docs
qui a été élevé
pendant 3 ans
et
c'est assez long
et dans les docs réactions
il y a une page
qui vous dit comment utiliser
les hooks et
les autres docs vous disent
qu'on peut utiliser les components classiques
et qu'on peut utiliser
la réaction de la API.
Donc, dans le cours de l'année
nous avons été

les rapports de l'Opensource
et
des rapports de l'Opensource
qui ont été construits
dans le site de la réaction de docs
qui ressemble à la réaction de bubble
mais il y a aussi un bunch de tutorials
qui sont interactifs et qui vous entrent
par le réaction de la appartement
et tout est en focus des hooks.
Donc c'est
plus facile de rire votre tête
sur ce qui se passe et pour les nouveaux
dans l'écosystème
pour commencer à apprendre.
Donc si vous n'avez pas checké les docs réactions
avant, maintenant c'est le temps.
C'est génial. Et oui, le site est
beta.react.js.org
à la fois.
Il sera dans les notes de la show.
D'accord. Et je ne vous forgets pas
de publier les notes de la show.
On ne peut rien d'en parler.
D'accord.
Donc, mon share
ce week
est ce library called Figma Export
par GitHub user
Marco
Man...Talbino.
On va voir.
C'est un autre chose qui est réinitieux.
On a un set d'icons
et je veux automatiquement
les exporter pour ne pas
faire ça manuellement.
Figma a un API très grand
mais ce n'est pas quelque chose que j'ai envie de fâf.
Donc, ce library Figma Export
vous donne un CLI
et un set de libraries
qui vous exportent
des choses de Figma dans différentes manières.
Vous allez au Figma, vous avez un API
et puis vous vous
vous en mettre dans l'ID filer
qui est une partie de l'URL
et puis vous avez un page
que vous voulez
les icons ou tout ce que vous exportez
pour être exporté.
Vous vous l'enviendrez et vous vous l'enviendrez
et vous allez juste les écrire.
Je vais maintenant travailler
sur un PR pour
avoir tous nos
SVGs exportés
comme un réacte
et ça fonctionne vraiment bien.
C'est super bien.
Il y a aussi
l'obligation
d'exporter styles
comme des variables CSS
donc potentiellement
faire des tokens de design
si vous êtes en train de construire un système de design.
C'est un peu cool.
C'est cool.
Je ne sais pas si ça fait déjà ça mais
si ça fonctionne sur les SVGs
parce que
les icons n'ont pas été optimisés
et c'est toujours bon de les faire
sur les SVGs.
Il y a deux types de plugins pour ça.
Il y a des outplois
qui changent les formats
et des réactes et tout comme ça.
Et des transformers.
C'est un transformer que ils ont maintenant
pour les SVGs.
Vous pouvez le régler.
Deux optimisations de cette façon.
Ça semble comme un moyen non brainer
pour
maintenir vos tokens de design.
Il y a une question intéressante
à la pointe
que vous vous mettez un script comme ça
vous mettez une dépendance implicite
sur les éléments de nombre
des compagnons et des fiches
ou les icons et des fiches
et ce qu'ils représentent
comme code.
Il y a un argument qui est fait
que c'est un couple fragile
parce que c'est difficile de savoir
si vous avez fait des changements de breakings
ou quelque chose.
Il y a aussi quelque chose qui est dit
de la faute de la sink et de
la paix que ça peut être.
Je ne sais pas, je veux penser un peu plus
et faire un processus scalable.
Mais pour maintenant, c'est
plus ou moins mieux que
d'exporter un seul icon
de la sink.
Je ne peux pas vous dire combien de choses.
C'est horrible.
Pour nous faire du travail,
d'optimiser plus tard.
Exactement.
Je suis passé au processus de
apprendre nos designers
à l'intervention de Semver
et à ne pas faire des changements de breakings,
c'est un challenge.
C'est un issue d'éducation.
Oui.
Je pense que c'est une des choses
quand vous développez un système de design
que vous avez besoin d'une compréhension
des choses importantes,
des choses qui sont changables.
C'est partie du travail.
Nous avons le learn audit.
Oui.
C'est mon premier
tourneur que j'ai brûlé aujourd'hui.
Et c'est un petit
peu de helper
l'autonomie de l'autonomie de NPM
qui s'appelle Learner-Audit.
Il est développé par un
un ami de mon ami, Tim,
chute-en-tout,
et il vous aide
quand vous méritez
un appareil de monon
avec le learner.
Si vous voulez
faire un fixe de l'autonomie de NPM
sur ce appareil de monon, vous allez
faire du travail, car le fixe de NPM
va essayer de downloader les
dépendances de l'interpackage
et le learn audit
est un petit
appareil de monon
qui s'occupe
de la compétition de l'autonomie
de l'autonomie.
Vous pouvez donc réussir
à faire le learn audit
sur tous vos sub-pacadèges
et ensuite mettre tout en place.
Ça nous a
sauvé un ton de temps
dans un de nos projets.
C'est vraiment
joli pour vous,
je ne peux pas seulement vous recommencer.
Oui, c'est génial.
D'accord, vous utilisez le yarn
dans les workspaces, car je l'ai entendu
que ce ne devrait pas être
plus de trouble.
Même si le yarn et le NPM
sont en train de remplir les workspaces, je me
trouve encore en train de utiliser le learn
dans les projets de monon.
C'est bon d'avoir des tools comme ça.
Et donc,
depuis que nous avons parlé beaucoup de l'autonomie,
je pensais que je serais
en train de partager la framework d'automation
que j'ai utilisé
pour tester les pages de share
sur Descript.
Et nous avons landé sur Playwright,
car Playwright,
la cool chose pour moi est que
vous pouvez tester
presque aucun target.
Vous pouvez tester
Safari sur Webkit, Firefox,
et Chrome.
Mais vous pouvez aussi tester Electron,
car Descript est une app Electron.
C'est bon d'avoir l'option
de pouvoir utiliser la même framework
pour notre app Electron.
Et puis, la cool chose que j'ai regardé
sur Playwright, qu'ils n'ont pas,
c'est qu'ils ont cette package de test
qui est un test-runner
qui est construit autour de Playwright.
Donc, ça fonctionne vraiment bien.
Ça peut faire des choses en parallèle.
Ça a des tests et des prévues,
comme d'autres frameworks que vous avez
et que j'ai été en train de utiliser.
Les gens peuvent être connus avec Puppeteer.
Puppeteer est l'an-old version de ça.
En fait, un peu de team
qui travaille sur Playwright
a été en train de travailler sur Puppeteer.
Il y avait un genre
d'adresse à ça.
Je ne suis pas sûr de ce qui s'est passé,
mais Puppeteer était, je crois,
un projet de Google,
et un peu de devs qui ont travaillé
sur ce projet, comme l'abandonnement,
et qui ont réparti le team.
Et ils ont utilisé beaucoup de lessons
que ils ont gagnées par Puppeteer
et ont appliqué à Playwright.
C'était très petit à pouvoir
aller.
Dans mon début, je suis allé
juste à Playwright,
et c'était assez difficile
de lutter.
C'était un extra layer d'abstraction
qui a fait les choses plus difficiles
d'understand.
C'est très simple.
Ce n'est pas nécessaire de vous
de mettre des typescript configs
pour le faire.
C'est un truc sur ma liste
pour vérifier.
Je n'ai pas besoin de Cyprus,
mais c'est bien
d'avoir l'expérience
avec Playwright.
Vous n'avez pas le bon UI
avec Cyprus, mais ça marche très bien.
Mon deuxième
tournage de la journée
est un article
et un tournage de Anthony Foo.
Si vous ne vous connaissez pas
de Anthony Foo,
il est un de les développeurs
de Windows CSS,
un telwind-like CSS.
Il a inspiré le mode
de jit en telwind.
Il travaille sur un nouveau projet
de l'unus CSS.
Il a écrit
un article qui est en train
de le faire.
Mais c'est
essentiellement un ingénie
pour un telwind-like
framework
pour le powering
d'automne CSS.
Mais c'est très flexible.
C'est vraiment très facile
de modifier. Il ne s'agit pas
d'une grande partie de
des opinions ou des configurations
de la boxe. Vous pouvez construire
un telwind-like avec ça, mais
ce n'est pas un telwind-like.
Si vous voulez avoir
des margines et des patins, vous pouvez ajouter
une roulée pour faire ça, mais ce n'est pas
un telwind-like.
Mais c'est très flexible, très facile
et une vraiment intéressante abstraction.
Ils
experimentent en utilisant
ceci comme l'ingénie pour
Windows CSS v4.
Si c'est quelque chose qui vous intéresse
en utilisant ce mécanisme
pour faire styling,
vous pouvez le voir. Andrew, si vous vous écris
au bout de ceci, il y a un mécanisme

qui est en Windows CSS
que vous vous ajoutez.
D'accord, vous parlez
d'attributes?
Attributes de beauté?
Oui, d'attributes de beauté.
C'est vraiment intéressant de voir
que vous pouvez,
en fait, faire un bunch de classes,
vous pouvez en fait faire des
attributes en ligne sur l'élément.
Donc, ça ressemble
à un style component, ou style
systèmes, si vous êtes used à style systèmes.
Mais c'est en fait
encore juste base CSS.
Ces attributes sont en fait
sur les éléments en ligne.
Il y a juste un peu d'interessants
de fonctionnalité,
ce framework,
ce sort de tool de CSS
qui s'envient.
Oui, ça ressemble à ce que le mode
de beauté s'attribute, ça t'amène
rapidement
avec ceci, que votre classename
s'est très très long.
Et puis, en en prenant la question
de la question de la question de la
classe, c'est difficile car c'est un
string qui se démarre
à la marque 80
d'un certain nombre.
Ça m'a aidé.
C'est pas shown ici, mais ils
ont ça aussi
où vous pouvez faire des attributes en ligne.
Donc, au lieu de faire un class
de classique, vous pouvez
faire un bouton BG400
comme un attribute bouleau,
et ils peuvent targuer le style
pour ça aussi.
C'est super cool.
Oh,
j'ai imaginé
dans le passé,
qu'il y a un tool qui tente
les attributes et le tourne
les classes.
Mais non, c'est le style qui
tente les attributes.
C'est génial.
C'est tout juste de la
CSS, c'est juste de la
sélection.
Les attributes sont
des choses qui sont
des artes d'art
qui font des choses.
C'est un bon moyen de faire un peu de
limitations en réaction.
Je ne vais pas te faire avec ta
spécificité, et si tu
en fais des types de réaction,
tu dois t'inquiéter
pour faire des props.
C'est tout juste un tout
qui ne démarre pas
la complexité.
Mais ça a été très intéressant.
Des cannaux
différents.
OK.
Le dernier tip de la journée.
C'est quelque chose
que je veux vérifier
dans le futur, qui m'a été
recommandé dans
un canal Twitch.
Je suis venu
à la fin de la
sélection de la course
et j'ai utilisé le JS
par default, parce que je suis
assez utilisé pour ça.
Mais les gens
sur le canal Twitch m'ont recommandé
que je devais prendre un look
sur le site.dev
qui est essentiellement
quelque chose similaire
à la revue JS, mais
c'est construit en vue en VEAT
et aussi dans les CSS.
C'est assez extensible et
permet de faire des features
très bonnes, comme vous pouvez
récolter votre présentation
avec votre
photo et la photo.
C'est vraiment quelque chose
que je veux vérifier dans le futur.
Parce que la revue JS
est bien, mais si il y a quelque chose
d'autre, qui est plus bon,
c'est vraiment un look.
Oui, donc le site.dev
pour ceux qui ne m'ont pas utilisé
la revue JS, le site.dev est un
moyen de mettre
les slides comme un markdown.
Vous avez un document
et ça rend le site
très intéressant.
Il y a aussi
une note d'Anthony Fou,
l'un des personnes qui a fait
le tour de la revue.
C'est un membre
de la communauté.
Je l'ai dit avant, mais on doit lui
lui donner.
Oui, pour sûr.
Anthony, si vous êtes en train
de le voir, nous venons.
Oui.
Oui.
Ok, je pense que ça
râche le temps pour l'épisode de
DevTools FM. Merci pour
votre détail. C'était un chanel
de la automation de toutes les choses.
Encore une fois, merci pour le mien.
Oui, merci Simon.
Fais soin de nous suivre
sur YouTube et à tout le monde
de votre podcast. Merci pour l'entraînement.
...