Steve Ruiz - tldraw

Durée: 79m29s

Date de sortie: 04/02/2022

This episode we're joined by Steve Ruiz, creator of tldraw.

Steve is known for his facinating threads on Twitter about his work making open source canvas graphics libaries.

In this episode we talk about tldraw, a drawing app with a open source re-usable UI.

https://www.tldraw.com

Tooltips

Andrew

Justin

Steve

Je les ai mis sur le montant. Je voulais être en Bali.
Quand il s'agit de contenus pour les développeurs,
je pense que les 3 jours de la vie sur le problème de la perte de rotateur,
ou les petits choses qui auraient été en bas, c'est le yoga sur le montant, mec.
Bonjour, bienvenue à la podcast de DevTools FM.
C'est un podcast sur les tools de développeurs et les gens qui les font.
Je suis Andrew et je suis mon co-host Justin.
Je suis un peu élevé de vous suivre sur Twitter et je suis content de vous développer cette période.
Merci.
Vous avez envie de parler de notre audience ou quelque chose d'autre ?
Oui, mon nom est Steve. Je suis basé en London, mais j'ai été en Chicago,
et j'ai été dans l'UK depuis quelques années.
Je pense que mon background est prior à l'attaque.
C'est en art fin et en art contemporain, mais dans l'attaque,
la plupart de ma vie a été dans l'organisation de design.
Je n'ai jamais eu un enjeuner, développeur, ou un taux de travail.
Mais mon travail en design a toujours été technique et un type de prototype.
C'est très bien le design de 2017 qui s'est fait en code, quand c'était très populaire.
Et oui, maintenant je travaille encore plus sur les tools créatives et les tools
pour aider les autres gens à faire des tools créatives.
C'est là où mon focus a été.
Super intéressant.
Donc, vous avez commencé en art fin, donc quel type de degree avez-vous ?
Je suis en 2 degrés.
Je suis en 1 degrés en art fin et ensuite j'ai un autre degrés en art fin.
Je suis en maître de ma mfa en art individual de l'Université de Chicago en 2013.
Et si vous avez vu SteveRouiseArt.com, vous trouverez mes paintings,
qui ont des backgrounds de novos graphiques.
Je vous encourage à trouver des parallèles entre les paintings et le travail que je fais maintenant.
Oui, je les ai checkés. Ils se sentent vraiment bien.
Je suis un grand comic-book nerd.
La chose avec les arbres et les backgrounds de la pensée, j'aime vraiment ça.
Merci.
C'est le radiot de la vidéo.
Oui, ce style est génial.
Mais ensuite j'ai fait 30.
Et je me suis décidé de faire du ménage.
Je me suis fait faire du ménage.
J'ai toujours fait de nombreux artistes.
Je faisais un travail en Chicago.
J'ai travaillé pour des lois.
J'ai fait de la recherche pour des lois.
Mais c'était un travail de pensée analytique.
Et c'était aussi un travail de bien paye.
Je pouvais être dans mon studio pour deux ou trois jours de week.
Et c'est ça qui me fait de la manière.
Vous trouvez beaucoup avec des artistes.
Vous avez cette profession analytique, comme profession de côté.
Et puis les choses créatives,
une partie différente du cerveau, une partie différente du groupe d'interesse.
Et après quelques années dans l'Université du Canada,
j'ai décidé de serrer le studio et de trouver quelque chose
qui pourrait porter ces deux choses ensemble.
Et ça a terminé en étant un design d'expérience technique
avec beaucoup de care pour les petits détails
qui vont dans les produits interactifs.
Je voudrais savoir un peu plus sur ce que votre path était.
Parce que vous ne faites pas juste des petits prototypes simples.
Vous faisiez des côté-desplotes très détails, très trabajés.
Mais
ce sont des produits qui sont pratiques.
Ce genre de產 chalk пCloud nie va être plus motivé pour tout si on najoute des products qui ne sont pas touringés.
April 6 Buffaloonsiderement C'était un joystick commanders,
ou uneorns Green Basket.
Et ça me fait bien.
Ils ne devraient pas en faire le sous,



de programmation, tu es comme, qu'est-ce que tu fais ?
Oui, donc je l'ai eu un petit peu de skill technique comme beaucoup d'autres artistes.
J'ai eu un site de portfolio et je l'ai fait, mais ce skill technique était essentiellement les apps Wordpress
et les plugins de cobble-t-en pour les apps Wordpress.
Je savais un petit peu de la base, mais par exemple, je n'ai pas vu un JavaScript comme en 2016.
Tout est assez rapide en termes de ça.
Quand je suis allé dans le design, je suis allé dans le design de publishing,
parce que c'était des companies de publishing dans la ville où je vivais, en Cambridge, en Angleterre,
et puis de publishing de design dans les interactions interactives,
des features de la software de publishing, en design.
Et puis, dans les autres tools de design interactifs,
j'ai trouvé un software de software qui s'appelle Framer,
qui serait maintenant classique.
Et ça a changé mon vie.
C'est un peu rapide, mais ça a changé ma vie.
Mais ça a changé ma vie professionnelle, pour sûr.
C'est la première fois que j'ai eu un loop de feedback
entre le code sur la gauche et le design ou le résultat sur la droite,
ce qui n'était pas la première chose à faire,
mais c'était la première chose que j'avais trouvé, c'était juste instant.
Je pouvais dire que je changeais le nom de « green to blue »
et que la chose a changé de « green to blue ».
J'ai commencé à faire des designs de cette manière,
des designs interactifs de cette manière.
C'était le début de 2017, le fin de 2016.
Il y avait un groupe de meet-up dans London,
et j'ai commencé à faire des connections de cette manière.
J'étais bien, j'ai décidé que je voulais être meilleur.
C'était aussi un moment où des teams de design
étaient excitées à la meeting des codes et des designs,
et j'étais très excitées à la mette,
notamment après Uber qui m'a promouit
comme quelque chose qu'ils étaient utilisant.
Mais personne ne savait comment utiliser ça.
On allait aller à ces meet-ups et je voulais avoir des conseils.
On ne pouvait pas juste partager nos prototypes awfules,
ce qui était magnifique.
Mais c'était aussi une grande opportunité pour moi
d'être dans ce pays pour dire que je vais m'en spécialiser
et voir où ça va.
Ça a vraiment été très bien.
J'ai eu un travail productif
avec un groupe de « clear score » dans London
en 2017 et j'ai fait des contractes en meantime.
Et puis j'ai went to an agency in 2018,
un groupe qui s'appelle « Invika »
qui était vraiment une façon de rapidement apprendre les skills productifs.
J'ai recommandé les agencies à tous,
mais peut-être pas pour tout le temps,
parce que c'était très intense.
Et puis en 2018, j'ai fait d'accord avec le « join framer »
et j'ai donc went to framer,
à l'Empstradale, je l'ai fait remotely de London,
mais j'ai fait leur contenu éducatif pour un an.
Et donc j'ai dû acheter ce microphone.
J'ai dû...
En fait, pas ce microphone, mais j'ai bien aimé.
Et apprendre comment faire des tutoriels de vidéo.
Et donc il y avait ce whole weird twist
dans la création de contenu, je suppose,
qui était vraiment difficile.
Et par là, j'ai bien sûr appris à apprendre le programme
et à apprendre à utiliser le code,
à réacter le JavaScript bien.
Mais je n'ai jamais vraiment parlé de ça à la fin.
Et ils disent que le tutoriel est un bon moyen
d'accelerer votre apprendre.
Pour moi, c'était le cas.
Et je l'ai probablement plus élevé que ceux qui l'ont.
Mais après un an, c'était temps de me laisser.
Donc par là, j'étais le design des prototypes.
Et les tools de design sont en train de se faire
un framework à un company appel Play,
basé dans New York,
qui fait un très grand design pour votre téléphone mobile.
Ce qui ne s'est pas bien, mais ça fait du tout.
Et ça a été réévoitant un peu les patterns de design.
Un peu de patterns de software et des patterns d'interactive
pour le mobile.
Et ça a été un peu de plus en plus,
dans des patterns.
Ce que vous devez faire si vous réimpliez
quelque chose comme une liste de laitiers,
qui n'a pas changé depuis tout le monde illustrator.
Et puis j'ai commencé à faire les choses
qui m'ont probablement apporté à votre attention,
et je pouvais parler de ça aussi.
Oui, absolument.
Donc, en-delà, c'est où la histoire.
Quand je disais la histoire de ce que je travaille sur,
c'est où ça commence.
J'étais en-delà du framework
et de l'aventure, ce qui serait Play.
Et je travaillais sur les projets.
C'est indépendant. C'était aussi quand la COVID-19 a commencé.
Donc, je pense que c'était au mois de l'april 2019.
Au lieu de mon enfant, des clés de nourriture,
tout ça.
J'ai fait un beau beau summer bizarrement
dans l'Ontario, mais dans le milieu de ce terrible événement.
Et en temps que j'ai commencé à construire
un outil de design pour les cartes de state,
qui sont des machines de state.
On dit, on ou off.
Si je suis on, je peux aussi être en mode de silence
ou de la mode de la salle.
Mais je ne peux jamais être en mode de salle
ou de la salle en même temps.
C'est comme un graph.
Les cartes de state de la salle
sont visibles et vous pouvez les faire en charte.
Vous pouvez prendre votre code et l'outil.
Un graphiste visuel de la salle existant,
et les salles sont actives et non actives.
Et, importantement, ici, pour cette histoire,
comment vous allez de l'un de l'autre state?
Si je suis en mode de silence,
et peut-être qu'il y a un bouton
d'incrédite le volume,
ça va me prendre,
conceptuellement,
ça va faire
la mode de silence
inactive et la mode de salle actives,
ou la mode de salle actives.
Mais conceptuellement, c'est comme si vous étiez
en jeu de la salle et vous étiez en mode de salle
de l'autre.
Et donc, vous voulez probablement
faire une éros en UI pour vous montrer
ceci.
C'est à ce que vous devez
voir le site statedesigner.com, si vous êtes inquiets.
Il y a un library de JavaScript et il y a
le site app.statedesigner.com.
C'est là, c'est gratuit, vous pouvez utiliser ça, tout ça.
Donc, j'ai eu ce problème, qui est, comment je vais
montrer l'éros?
Parce que je ne vais pas être en train de
faire cette éros, je veux que ça soit
généré automatiquement. Je veux dire,
ici il y a un rectangle, et ici un autre rectangle,
qui est une partie différente de la scène.
Vous pouvez trouver un rectangle, et vous
vous trouverez un éros qui connecte
l'un à l'autre.
Et ça a été fait,
j'ai beaucoup de confiance en open source
pour que quelqu'un de salle
d'autre problème, mais je
dois le trouver. Et je ne pouvais pas
trouver une réponse pour ça.
Et c'est possible qu'il y ait un message
pour, vous savez,
l'unité de l'autre que j'ai mis,
et ça peut être qu'il y a été là-bas, mais
ce n'est pas pour moi.
Parce que l'éros sont très
difficiles, et les éros sont
très bons, donc
j'ai vraiment commencé
à poser ce problème
que j'ai eu sur Twitter,
pour voir si quelqu'un d'autre
a eu une réponse ou un algorithme
existant pour ça.
Et puis, d'accord, parce que
les attentes étaient
comme mes attentes à construire un éros
qui serait correct,
en ce moment où je suis en train de
faire des textes qui se sont
en train de se tourner
ou de se dérouter, toutes ces situations
de la nuit.
Oui, mes attentes
étaient
visuelles,
les débuggations étaient très visuelles,
les construirent des étranges
de la skeleton, des éros,
des armes qui se sont allées
dans toutes les directions et les flexiles.
Ils étaient vraiment cool, et donc j'ai commencé
à prendre des gifs à eux, et à mettre
des discussions sur les éros,
des choses comme ça.
Et ça a été un endroit
merveilleux,
je n'avais pas un background
dans la matière math
ou la géométrie,
ou la technologie de jeu de vidéo,
tout ce type de développement
qui m'a voulu, ce que je sais
maintenant est la matière math, la ligne,
l'algebra, tout ça. Je l'ai juste appris
comme je l'ai fait.
Donc c'était bon de parler avec les gens
que je faisais,
ou les problèmes que j'ai
essayé de se résoudre.
Et j'ai vécu
avec un algorithme d'éros
qui est maintenant disponible
sur NPM comme des éros parfaits.
Et oui, sure enough,
si tu as deux gifes et tu as besoin
d'un éros qui les connecte,
si tu fais ça,
utilisez des éros parfaits, c'est génial.
Tu as des éros très bons pour te freiner.
Et ce n'est pas concernant
avec les rendements, donc tu peux te faire
en train de les mettre en place, en utilisant le SVG
ou le Canvas ou tout ça.
Et le algorithme est assez court,
donc tu peux le faire dans une autre langue
si tu veux. Mais c'était comme mon premier
source d'éros,
je vais arriver
avec ce problème en public.
Je vais essayer de le résoudre en public.
Et puis, si je le résoudre,
je vais résoudre.
Et c'est le genre de chose qui a commencé
ce whole cascade de projets.
Oui, je pense que
les tweets qui ont fait
les gifs sont exactement
ce que j'ai trouvé.
Vous pouvez regarder ces
très intéressants dégâts
des interactions
qui disent que c'est possible
de se faire en même temps.
Si nous avons juste prévu les éros
infiniment, et que c'est
les points d'intersection, et tout ça.
C'est un problème d'art.
J'ai été intéressé
dans le programme visual
depuis longtemps. Et en fin de
vie priori, j'ai essayé de
construire un éditor de note.
Une des choses que tu fais avec
l'éditor de note, c'est de
connecter deux lines entre deux points.
Je l'ai
expérimente. C'est
incroyablement difficile.
C'est vraiment impressionnant.
Pas juste de voir une solution
très bonne à ce problème, mais aussi
de la dégâter
et de la façon dont c'est
très
expressive de la complexité
sous la tête. C'est
vraiment incroyable.
Merci.
Je pense que c'est
peut-être mon expérience avec Framer.
Et...
Après
de créer un bon
vidéo d'écouture, qui
fait des heures
et est trop long, et je
devais avoir acheté un éditor de note
sur le jour 1.
Je voulais encore créer un contenu, mais
j'ai besoin d'une façon
d'en faire des choses intéressantes
plus facile à faire.
Et donc, en faisant ces...
Plus facile à faire pour moi, mais aussi
plus facile. J'ai
beaucoup de pensées
sur
ce qu'est le contenu pour
les programmers et les gens dans le space de développement
sur Twitter. Je n'ai pas
parfaité la pipeline de contenu
sur Twitter, mais je peux vous dire
que 8 secondes de gifs
à 125%
de vitesse, pour
montrer comment ça fonctionne,
c'est juste...
C'est génial. J'aime ça. J'aime consommer, j'aime
faire ça. Et, en particulier, si ce que vous êtes
en train de travailler, peut être
expliqué visuellement,
et peut être...
ou avec des commentaires à l'arrivée,
comme...
Oh, man, postez ça sur Twitter. Je vais
retweeter. Je vais l'aimer.
C'est génial.
Un bon tip pour
le length et le pâsing. C'est
une chose importante. Parce que si c'est trop long,
il perd l'intérêt de les gens. Si c'est pas
la bonne vitesse, il perd l'intérêt
des gens, donc c'est comme...
Il faut balancer ça.
Et si vous pouvez le faire,
je
spending trop de temps, en essayant de
faire mon curseur à la place où il
était, c'est bien.
Oui, depuis que tout le monde me demande, je dois
juste dire, je vais... Oh, peut-être que je vais
faire ça pour la section des outils de la

Hold on, je vais parler de...
juste un petit chisor. Je vais parler de
ce que j'ai utilisé pour le record et les
décisions que j'ai utilisées pour le record.
Donc, on se passe.
Je dis à beaucoup de nouveaux développeurs
que Twitter est un tool super valable.
Pour les années, je n'étais pas sur Twitter,
et quand j'ai été sur Twitter, je me suis
dit, wow, la main s'expand.
Je n'aurais jamais été introduit pour
quelque chose comme ta travail si je n'avais pas été
dans Twitter. Tu penses que Twitter a
aidé à changer le cours de
ta career ? Tu penses que tu serais
en train de travailler maintenant avec ça sans ?
Oui, bonne question. Je pense que
plus tard, non. Je n'étais pas très
active sur Twitter, jusqu'à ce que je
travaillais dans le rôle de Framer. Je
suis complètement certain que tu as
dit que ça a été instrumentaire et
introduit pour... Comment dire ça ?
Je me suis dit que je serais
dans mon compte LinkedIn, qui probablement
va avoir à refaire, mais je me sentais
pas très hésité
sur LinkedIn, mais mon expérience
était, même si un petit
peu de... ou quoi que ce soit.
Mon expérience de LinkedIn était
que
la présence social, la présence social, c'est
professionnel, mais ça ne me représente
pas de la manière dont je veux être
représenté professionnellement, comme
mon intérêt, ou autre chose. Je me sens
comme ça se crée en quelque chose que
j'ai hésité à faire.
Donc, Twitter est une représentation
de choses que je suis hésité à faire.
Et...
Ouais, si...
Si tu veux m'employer
ou quelque chose comme ça, je voudrais
plutôt que tu sois hésité à faire les mêmes choses
plutôt que juste avoir un développeur
dans London. Mais ouais, surtout quand
je travaillais sur choses que je n'ai pas
vraiment compris, qui est presque toujours,
avoir d'autres gens qui me sont
trompés dans mes DMs et être comme
« Dude, tu fais un... parimétrique...
»
Et je me suis dit « Tu sais, c'est un tool, et je
n'ai jamais entendu de ça, mais
fais-moi voir ça ».
Ouais, ça a été
très clair pour moi et m'a aidé
à me mettre en place.
C'est cool comment tu as
étendu les mots en bas dans tout ce
super complexe math.
Je pense que c'est le meilleur moyen de
apprendre des choses, c'est que je veux
construire quelque chose, donc je dois apprendre
un peu de merde. Et la math que vous avez
appris est assez impressionnante, donc
je vais vous donner des hautes à vous, pour sûr.
Merci.
C'est un tout fil de
mathématiques
qui ne t'intéressent pas
beaucoup dans
le développement de la web, normalement,
mais c'est
un secteur math
qui a le droit
de les choses, et qui
a le droit de bouger dans certaines
directions et tout ça.
Et c'est
basically, c'est le place
en
Valveくん Design ou 2D G Yuk melts
Britains,
du temps d' korkissage, sainte financialoughing
Katowski level, et tout ça.
Mais ne salue si insistant
pas des divises, les
dans le toulon visual et le toulon créatif.
Et la façon dont Sketch or Figma fonctionne
est très similaire à la façon dont un jeu fonctionne, un jeu 2D.
Donc plus je l'ai entouré, plus je l'ai entouré plus près de ce que j'ai
dans les outils de design, ce qui m'a sorti déjà dans...
Donc oui, ça a sorti de ma place naturelle.
Je dois dire, je suis allé dans des outils de design,
pas parce que je suis intéressé dans les types de
patterns ou des types de patterns utilisés dans le design de la vidéo.
Je me suis trouvé, je me suis retrouvé, et je suis déjà dans l'industrie,
et le morceau de l'industrie, où ils ont été les plus matérables.
Donc c'était un accident très heureux pour moi, et ça me fait...
Ouais, mon travail.
Ça m'a fait mieux à mon travail.
Ouais, vas apprendre vector math.
Fais-le en avance.
Ouais, pour sûr.
Je ne pense pas que ça va être un projet comme ça.
C'est vraiment de la route de quelque chose qui a l'air très complexe.
Mais finalement,
l'intro de l'algebra en faisant des vecteurs basés ne faut pas
toujours être un task super difficile.
Si tu tries to conceptualize the entire field,
and you get into the details,
it can be really complexe.
If you're trying to approach it from a purely mathematical
theoretical standpoint.
But a lot of times, if you're just trying to understand an algorithm,
how do I translate this thing?
What does that look like?
Those things can often be more approachable than you might expect.
I think this is actually one of the problems with how most educational facilities go about teaching mathematics generally.
It's because it's so hard to see the implied result of these things that you're doing that you have to sort of
not only pattern match against this problem and its solution,
but also in your head,
and visualize whatever you're trying to do.
But if you reverse it, you're like,
I have a specific problem and I need to know how to solve it.
I feel like it makes it a little bit more.
Absolutely.
Yeah, somewhere in the future,
I'll probably be teaching a, you know,
geometry through game design class at a kid's high school or something like that.
Once you have a pretty good idea of what you're trying to do,
and you have ways of visualizing it in between,
like you can go really far with those two things,
especially in this type of thing.
When I hit a thorny algorithm problem that does not allow me to sort of visualize it,
that's when I start losing days.
Because it's very hard to iterate and dial in and do all the things that I've learned to do through design
with something that I can't put on the screen,
or record a nine second gif of an Ask Twitter,
like why is this line going in this direction?
I'm sure another important part of this is like learning approximation.
Surely, there's a correct algorithm for all the things out there in some theoretical world,
but sometimes you can just fake it.
Sometimes you don't have to do exactly the correct thing.
Well, one of the things that I liked,
and maybe I can talk about Perfect Freehand probably,
is the next project,
but one of the reasons I liked Arrows was that
drawing a straight line between two points
is a yes or no problem, basically.
Drawing a curved line is incredibly subjective
as to what curves look good and what curves look right.
There's no real heuristic about when is this true
or when is this a correct algorithm versus when is it not.
I mean, you can't have something.
Is it still pointing at the thing?
Yes or no, maybe.
But mostly, it's just like, does that look?
I mean, my research for Perfect Freehand
devolved into just me drawing pages full of boxes
and just connecting them with lines
and then staring at it and saying,
well, what's the pattern?
Because I was dialing it, not like the only terms of success
were would I actually have drawn that line
or would I actually have chosen that line or that arrow?
And that was really fun because there wasn't,
and even the name Perfect Arrows is sort of a riff on that,
is that there's no actual answer for this type of thing.
There's few things that actually have answers,
but there's even fewer for Arrows just because it's like,
yeah, it's just what looks good or what's not.
So in the same vein, Perfect Freehand, right?
So the story there started, I was also making videos
and I wanted to draw on top of my screen
while I was streaming.
And I knew how to do that in post.
I could do that while editing the video afterwards,
but I wanted to be able to stream.
I wanted to say, if I had the...
Still when I was working at play,
there would be a mobile phone on the screen.
The problem with a stream of a mobile device,
unlike a desktop device,
is that I can't just wave the cursor
at one part of the screen.
I might do if I was streaming about how to use
something on the desktop.
I couldn't just tap or wipe my finger
around that area because that would be interpreted
as an actual input.
So I needed some weight of indicating parts of the screen
on the mobile phone that was on the screen
without actually interacting with the device.
So I was like, okay, like an American football game.
I'll just draw a circle on the screen
and maybe draw an arrow to it.
And I'd already made a minimal drawing app
for the state chart designer,
like as an example.
So I was like, okay, I'm just going to grab that.
Whip up a Electron app.
It's going to sit on top of my screen.
It's going to be transparent.
And that'll just let me draw on the screen
while I'm streaming.
And that worked. It was great.
And I had my stylus on my lap
and I would just be drawing.
And then I was like, you know,
I'm using the stylus.
The stylus can do pressure.
I want this line to be
you know, pressure sensitive as well.
And so I, you know, did a quick Google
like pressure sensitive
or variable width line SVG.
No hits, you know,
I find a spec that hasn't changed
in four years and never got implemented.
And I'm like, all right, well, whatever, like,
how do I turn a line
with some pressure information
into a polygon, you know,
and then I'll just render the polygon.
And again, like,
8 year old discussion
that's still going for like inkscape,
you know, like, well, how do we actually do this?
And it just didn't end.
It was like, wow, there's no, like, this,
you know, the free store,
the open source infinite bucket
that I just have to look,
look harder to find what I need.
This is just not a solved problem.
Like, there's nothing.
I shouldn't say there's nothing.
There was a,
the way that they would do it,
the way that you might have seen it done
is not in SVG, but in canvas
what you can do is kind of
take the user's input points,
turn them into a spline
and then draw lines
between each point on that spline
and the width of the line
is based on the, kind of, the pressure
or whatever. So more pressure is a thicker line,
less pressure is a thinner line
and with respect to the
the folks who came up with that
because it's a very smart solution to that,
it just does not look good.
And I was like, I was like, I can't do that.
You see it sometimes in, like, signature apps
or something like that, like signature.js
uses the same strategy.
I think something in Android uses it as well.
But no, I wanted to, like, make a polygon.
Like, input points are a line,
give me back a line, like,
something that has an envelope
around that line and have that envelope
be thicker or thinner.
And so I started working on it.
I had, like, watched a video tutorial
about, like, recreationally
about how to create, like, splines
for a racing game
where you might have, like, a racetrack
and you want, you know, the racetrack
to follow the line or whatever.
I was like, okay, cool, you have the input lines
and then they, kind of, stick their arms out
to either side and then now you have
a row of left points and right points
and you can, kind of, just go around,
you know, down the left side and then back
the right side and now you have that envelope.
And I'm like, well, okay, perfect
and then I'll just use the pressure.
So that envelope, those arms
will be longer if it's a lot of pressure
and shorter if it's not a lot of pressure
and that should give me the envelope,
like, the pressure sensitive envelope
around the line. And it turned out
to be a little bit trickier.
Like, I lost, like,
but I didn't lose, but I spent, like, the next six months,
if not longer, working on
this variable width
line that was
fast enough
that I could use it while drawing
and that it could, kind of, recompute the line
as needed, like, while drawing
and stable enough so that the line didn't
change behind, like, your cursor.
So, like, as you were drawing the end of the line
that the beginning of the line wasn't changing
that could handle sharp corners
eventually that could handle
tapering at the start
or at the end and different, like, line caps
and all this stuff.
And it, again, like, I was,
you know, doing the
Twitter threads about, you know,
it's like, ten times a day
just, you know, after work, being like, all right.
Perfect, or, like,
variable width line or freehand line time,
like, just beat
my head against this thing, trying to make it work
and eventually
that did lead to the library
that I released as perfect freehand,
which, again, is, like, a very, like
some perfect arrows, it's a very small
minimal library. You give it the information
that you have, which, in this case, is
just that collection of input points,
like, here's what I recorded from the mouse
and maybe those input points
have actual pressure with them, as well.
And then I'll use that actual pressure.
Otherwise, it'll simulate the pressure
based on, you can tell it to simulate
the pressure based on the distance between those points.
So, slow
is more pressure and fast
is less.
Although you can invert that
or dial that in, there's a whole suite
of, you know, options and settings
and stuff for how it interprets that data.
And so, perfect freehand
has now become its own, you know,
I don't know, it's, like, used in
a bunch of whiteboarding tools.
I think, like, Next.js Live
is using it, like,
it's everywhere, because, like,
you know, why not?
Like, if you're going to have, like, a pen tool
or a pencil tool, like,
why not make it a good-looking variable width line?
It seems like you'd have to come up with a good reason
d'enquête.
Si tu fais un tool
qui envoie un pencil
ou un pen ou quelque chose,
tu dois définitivement utiliser
la preuve de la freehand.
Juste, en mettant ça en place.
Oui, je l'ai complètement appris.
Un autre chose que j'apprécie beaucoup
c'est, vous savez,
à l'aise, les signatures de la same
sont, comme, si tu vas au repos,
c'est une visualization très belle.
C'est comme, OK, c'est ce qui se passe
derrière les scènes,
pour faire, vous savez,
pour faire ce polygon, essentiellement.
Et c'est juste ces points de touch
qui font ce que c'est
vraiment
une interaction complexe
avec un outil vraiment amusant
et qui sort de, comme,
révèle la magie un peu.
Je pense que c'est assez cool.
Merci.
Oui, de, vous savez,
les skills et talents,
je pense que l'une des choses qui
fait que tout le travail que tu fais
est la capacité de te présenter
dans un moyen qui est
facilement grocable, juste par quelqu'un
qui est comme, oh, wow, je ne
n'ai jamais pensé à comment ça pourrait être fait.
Maintenant je peux visualiser
en 8 secondes.
Je pense que c'est, oui,
je pense qu'il y a
une partie
de la partie de la partie de tous les développeurs
qui veut juste voir
l'explainement
un petit gif
qui montre comment ça fonctionne.
Et je n'aime pas plus
que d'aller dans ça. Donc, merci, j'apprécie.
Oui, donc,
tu as déjà dit ça, mais
Perfect Freehand est utilisé tout au lieu.
Je me souviens quand j'ai été integré
dans l'Intox Calidraw, et je me suis dit, ok,
c'est vraiment cool, c'est vraiment intéressant.
Donc, quel point,
après Perfect Freehand,
tu commences à travailler
sur
ce que c'est de T.O.Draw ?
Oui, donc, probablement après
...
j'ai spent une semaine,
cette integration dans l'Intox Calidraw,
j'ai fait ça, ils ont utilisé
des murs de l'opin collectif
pour me payer pour faire cette integration.
J'ai fait un petit peu de travail
avec ce repos avant,
j'ai fait les aéros
dans l'Intox Calidraw,
c'est ce que je dis à la partie.
Oui, donc je suis familier avec le repos,
l'Intox Calidraw est un projet
d'aménagement, le fait que ça a été
créé en source,
encore, dans les médias sociaux,
c'est juste une grande histoire,
j'ai été très heureux de l'avoir été partit.
Mais ça m'a fait penser
à comment ces sortes de tools
travaillent,
à l'end,
dans un moment intense,
avec Perfect Freehand,
il y avait une autre app
pour iOS,
ou iOS, iPadOS,
de GoodNotes.
Et GoodNotes,
c'est une grande app note-taking,
et elle a un bon digital ink,
vraiment, vraiment bon.
Et je serais en train de utiliser
cette app et je serais en train de dire
comment ils en faisaient ça,
parce que chaque fois que je pensais que je
ai fait ça, je serais en train de le faire,
et ça me travaille différemment.
J'ai rencontré le founder
de cette app,
et je me suis dit,
comment fais-tu vos lines ?
Dis-moi, comment
fais-tu ça ?
Et il me disait
qu'il utilise des cercles,
il me disait, oui, on utilise des cercles,
et je ne me suis pas pressé
trop hard pour plus d'informations,
mais je me suis dit,
cercles, hein ?
Et j'ai fait des sketches,
et j'ai pris du temps dans le notebook,
et j'ai pensé,
comment fais-tu un variable
avec des lines,
avec des cercles,
sans faire ça comme le photoshop
de
interpréter et de cloner
la même circule dans le canvas ?
Comment fais-tu ça en utilisant des vêtements ?
Et dans cette discussion,
un autre personne m'a été involved
et m'a aidé,
a suggéré un article,
un homme appelé Andrew Glassner,
qui a été involved
dans les graphiques depuis longtemps,
et il a mis un article
sur ce truc appelé Glob,
et Glob est
difficile de décrire au bout de l'air,
mais vous pouvez regarder
Glob à globs.design,
ou, par rapport à Andrew Glassner et Globs,
j'ai été super à Globs,
et
j'ai eu de la chamefouille
avec Globs pendant 2 mois.
C'est ce primatif de 2 cercles
qui sont connectées par 2 cercles.
Et ces 2 cercles
sont dégagés
à leur tangence.
Il me semble que la circule
se tourne en bas
du cercle.
Donc, la circule entre les cercles
est doucement entre
les cercles
sur l'eile.
Vous pouvez utiliser ça,
faire un cercle plus petit
et le plus grand.
Et maintenant, on a la forme de tier
de drogue. Vous pouvez bouger les globs.
Vous avez des handels pour
déterminer les points de contrôle
de chaque curve.
C'est très difficile de décrire ça
sans le montrer.
Comme le tourneau de l'audio,
comme je vais essayer de décrire
ceci sans le montrer,
Globs.design est la app
que j'ai construite pour m'aider
à comprendre Globs.
Comme j'ai construit pour la fréquence,
c'est un autre app
de canvas.
Je l'ai construit pour les features
plus fin.
Ce qui était intéressant
de voir avec Globs,
c'est que
si vous utilisez des tools
d'esprit, des graffits,
des squares,
des cercles, des lignes
et des vétères de pen
où vous pouvez définir
les curves de cette façon.
Ce sont tous différents prématifs.
Le mot que l'on utilise
est prématif.
Le pêne-tool est prématif.
Le curve est prématif
et le pêne-tool est utilisé
pour créer la curve.
Le pêne-tool est utilisé
pour créer la nette de la vector.
Le Globs est un autre prématif.
Et je suis très très familier
avec tous les moyens que les tools
de design
ont été managés.
Les prématifs que je savais
n'ont pas l'idée
de comment un pêne-tool m'a managé.
Ils sont différents.
Ils ont besoin de différentes choses.
Les choses sont adaptées à différents points.
Ils se sont alignées dans différentes manières.
Il y a des choses que vous faites avec un Glob
comme, vous savez,
que si je veux faire des cercles
de la même manière,
je sais pas, c'est tout ce que je voulais.
Je n'avais pas besoin, mais j'étais totalement obssés
à la figure de tous les UX
autour de cette shape Globs.
Et along the way,
je l'ai appris beaucoup de la façon
de créer des tools de design
et de créer un canvas
sur le browser.
Quels sont les hacks et les trucs
pour faire ça vite et performant ?
Comment fais-je snapping ?
Tout ce genre de choses.
Et donc, après,
je n'ai jamais voulu
faire la recette de la recette
en pleine de la même manière
que la question de Globs.
Cette réponse est toujours là-bas.
Et ça me tient.
Mais j'ai appris beaucoup de choses.
Et j'ai pensé, ok, je m'avais fait
ce type de UI
pour la preuve de la preuve.
J'ai fait ça pour Globs.
Je doute que je vais pas être intéressé
en faisant des questions
pour explorer ces questions.
Je doute que je vais pas faire
des contenus autour de ça.
Je devrais probablement
faire des pièces de softwares
que je peux utiliser
pour
expérimenter avec des algorithmes visuels
ou
expérimenter avec des primitifs différents.
J'ai fait ce genre de skeleton
de... J'ai fait ce que j'avais fait avec Globs
et j'ai commencé à faire
une nouvelle app
qui n'a pas de la preuve
ou pas de la recette
ou pas de la primitif.
Les primitifs étaient quelque chose que vous avez appris.
Vous pouvez donc
mettre en place une ligne
ou un globe, ou tout ce que vous voulez.
Et
ça m'a fait
me faire plus de questions
en général.
Les questions que vous avez à travailler avec
étaient avec Globs.
Il y avait beaucoup d'inquiétudes,
un nombre de surprises,
entre ce que vous pourriez faire
dans une app comme Figma.
Mais ça n'a pas de tout.
Et ça a été une opportunité
de regarder tout le monde
et de regarder
les ordres Z,
les infos de quoi,
les clonés,
les options,
les interactions standardes
ou les interactions de table stakes
et les features que vous espérez
d'un tour de design.
Et
je l'ai posé sur Twitter
en disant que
si je rotate quelque chose
et que je veux
sélectionner quelque chose d'autre,
maintenant je veux sélectionner la box
qui contient les choses.
Qu'est-ce que la chose qui est rotating ?
Est-ce que le skew est plus grand ?
Mais il y a un rectangle ?
Et les appels différents
sont aussi très divertis
pour trouver des ordres de design
qui sont obscur et comparés
avec ce que le sketch
ou Figma,
ou Famer,
et je pense que
j'ai été en train de chasser les likes
et que c'est très populaire
sur Twitter.
Les gens aiment ce genre de choses
parce que si vous êtes un développeur,
il y a deux choses.
Si vous êtes un designer,
et que vous êtes des designers
ou des designers,
vous avez travaillé avec ces ordres
tous les jours,
c'est cool de apprendre
et voir comment ils travaillent.
C'est aussi cool de voir
comment ils sont différents dans les appels différents.
Oui,
la sélection de la lips rotation
est très différente
et la sélection de la lips rotation
n'a pas vraiment honte
mais c'est juste de bon contenu
et c'est intéressant de travailler.
Et en même temps, j'ai commencé
à réaliser que
ces types de casques
et ces petits features, etc.
Surtout où ils ont différé entre les appels différents
ou où il a semblé qu'une app
a été correcte.
Un autre n'a pas été correcte.
Oh, est-ce que le cursor rotera
si je suis en train de resserrer
l'épée de la rectangle et que je le roterais?
Figma fait ça?
C'est ce que le sketch fait?
Le framework sort de ça?
Mais pas de la même manière.
Ce sont tous les places où
je pense que
les gens ont toujours des temps

il y a des petits détails
dans l'app
où je suis comme, oh, man,
je voudrais arrêter ce que je fais
et prendre 3 jours
à se faire découvrir ce petit détail.
Je sais que ça ne m'a pas fait pas de problème,
ce n'est pas de nouvelles, mais
c'est fascinant et je vais devoir le faire.
Et si tu construis un software,
tu déterras un trail
d'une question ennueuse
ou d'une question ennueuse,
que tu souhaites que tu pourras aller en retour
et que tu ne le ferais pas.
C'est juste une partie du travail.
Mais, je pense que
la métaphore que j'utilise
est de voir un autre
faire de la yoga,
ou de
voir quelqu'un jouer un jeu de vidéo
sur Twitter.
Je ne veux pas
que ça se remette.
Je veux que ça soit un peu de fantasy.
Je ne veux pas que ça soit
une yoga
sur les portes latins de London
ou quelque chose comme ça.
Je veux que ça soit sur un montan.
Je veux que ça soit en Bali.
Je veux que ça soit...
Quand il s'agit de
des contenus pour les développeurs,
je pense que
en 3 jours,
sur le problème de la rotation de la curse
ou ces petites choses qui auraient été ennues,
c'est le yoga sur le montan.
C'est le contenu
qui profite de la fantasy
de, je veux que j'aille faire ça.
Donc, en temps de temps sur ces choses,
surtout depuis que je n'étais pas vraiment
construitre quelque chose, je me suis dit
que je voulais ça, mais c'était
pas critique, je n'avais pas un runway
ou quelque chose comme ça.
C'était juste intéressant.
Comment vous faites
avec une rectangle de rotation
quand vous récisez la sélection qui inclure.
Je me suis dit que je l'ai spenté un week sur ça.
Et je suis venu avec des bonnes réponses.
Et elles n'étaient pas réponsées
que
elles étaient nécessaires
de la façon dont vous pouvez le traiter.
Bon, tout le monde
a maintenant des aspects ratio
qui sont en train de se faire.
Mais c'est un bon答et.
C'est une bonne réponse
de comment vous vous dealz avec un aspect ratio
dans un groupe
qui n'est pas aspect ratio.
Je ne vais pas dire que les gens ont commencé à perdre leurs minds
mais la réponse
était vraiment bonne.
J'ai gardé le jeu.
Et ce projet a été un Tiel Draw.
Et le Tiel Draw
a été
une équivalente de Xcaladraw.
Je set le set de feature de Xcaladraw
pour un bon minimum pour ce que je voulais
construire. Un
tool d'agriculture
qui était vector base,
eventually SVG et CSS base
et
a fait super bien
parce que de la grande
détail.
En juillet, j'ai décidé
que je voulais travailler sur ce temps
et j'ai cancelé mon contract
avec Play et j'ai commencé
à travailler sur Tiel Draw.
Je vais prendre le reste de l'année
et je vais construire ce truc.
Et je vais voir où ça va.
Et par là, j'ai décidé
de le plier
et de le mettre
dans le Tiel Draw,
et puis le Tiel Draw,
comme le code cor, que tout le monde
pourrait utiliser pour construire
quelque chose comme ça.
Parce que,
d'ailleurs, après construire
3 ou 4 des types de UI,
j'ai l'impression qu'il y a un ton
de réusabilité. Je vais
réutiliser ça.
En fait, j'ai un couple de fois.
Donc, les autres peuvent aussi.
Et
je pense que cette idée
de avoir un
genre de
poursuit ou abstracté
pour construire ces sortes de
UI, comme un style de canvas,
des UI, c'est
très influencé
dans le sens où j'ai pris le projet
depuis. Ça a definitivement commencé
comme un
personnel,
un peu de contexte
pour faire
un petit tour. Je vais
faire 10K Twitter pour les
fans, et puis
Tiel Draw.com
qui a été créé
en novembre, c'est
assez cool. Ça marche vraiment bien.
Il y a des éros
sur le sujet. Je peux parler
plus de l'éros, parce qu'ils sont différents.
C'est cool.
C'est comme le top de la news de hacker.
C'était
le premier repos

de GitHub pour quelques jours
dans le rôle. C'est à
presque 5K stars sur GitHub,
qui sont
toutes les
des messages hackers,
des messages de good signal.
Tout le monde a des
tools de diagramming,
surtout les des que vous pouvez utiliser
dans le code VS et les integrations
cool. Mais oui, je pense que c'est
aussi tout ces petits détails
que je vais ajouter à un
bon expérience de drawing
ou de diagramming.
C'est Tiel Draw,
l'app.
Cette idée que j'avais de la
faire avec les autres gens,
sur le top de un genre
générique,
ou un toolkit
pour ces apps,
ça a été bien.
Il y a beaucoup de gens qui ont des idées
pour des apps qui sont à l'intérieur de cette Ui.
Et,
pendant que je vais me faire
4 jours sur les cursures

pendant que je vais me faire
de la ratio de aspect,
des problèmes de la box,
des gens veulent juste construire leur app
et sont plus que heureux
d'avoir un travail pour
faire ça plus vite.
Donc, Tiel Draw est maintenant
en train de me faire
un peu plus...
Je ne pourrais pas construire un app
?
Je vais utiliser un app
de la box.
Ces choses sont trop
importantes pour vous.
Je peux dire
avec une certaine certainité
que construire le sort d'engin
pour une Ui Canvas,
que chaque team
de Figma pour X
doit faire pour
faire Figma pour X,
que
la part de Figma
de cette équation
est vraiment difficile de faire.
Donc, c'est
le service
ou la compagnie que je travaille
et puis il y a
le app, qui est maintenant
une petite app pour dessiner
et que ça peut devenir le product de la
production de la box pour cette compagnie.
Mais c'est
un...
Je vais vous dire ça.
Je ne sais pas.
C'est la histoire de Tiel Draw.
C'est incroyable.
C'est comme si vous voulez
un Tiel Draw pour devenir
le monaco de les editors de la base canvas
où le monaco est
un editor texte
pour la pétition. Vous voulez un
Tiel Draw pour ça.
Je ne pense pas que tout le monde
doit être un service
ou qu'il faut être réservé
par quelqu'un d'autre.
Mais
quelque chose
peut faire
et je ne pourrais pas
dire que cette équation de la UI
pourrait être partie de ça.
De l'édit texte, de la map
ou d'autres expériences de check-out
où je suis
content de ne pas être responsable
pour cela. Mais je pense que ça peut faire.
Je pense que si les équipes pouvaient
détenir la canvas de Figma, elles pourraient.
Mais
c'est le produit.
Et je pense que
Tiel Draw est une position intéressante
comme un projet d'open source
et comme quelque chose qui est
assez nimble, je suppose.
Je peux
prendre en décembre
et en janvier, réévaluer
pour
les équipes de première,
ou les plug-ins de première.
Ce qui est vraiment important pour les équipes
de première, c'est de
pouvoir dire, ok cool, je peux utiliser ça
pour mon projet.
Pas que elles ne sont pas déjà en train de faire ça,
mais comment je fais ça plus facile?
C'est la question
plus grande.
Je pense que tu as un point
de grande importance.
Il y a beaucoup de producteurs qui
ont été en train de faire un petit peu de complexité
par exemple, quand ils tentent de construire
ce produit, c'est leur vision.
Et tu as parlé de tous ces détails
qui sont délicieux pour toi
et tu veux prendre le temps
et que les programmers ne peuvent pas.
Parce que généralement,
le problème qu'ils ont en train de faire
c'est de tenter de shiper le Figma for X.
Ils veulent faire tout ça,
mais ils n'ont pas le temps de faire ça super bien.
Ils doivent faire le MVP, ils doivent faire le travail.
En
episode 17, on a parlé
de Pedro, des modules
sur Radix, UI.
Ils ont aussi travaillé,
mais ils en ont aussi parlé
peut-être même à un petit niveau, en pensant
d'un box de sélection.
Ils veulent une bonne sélection de la
input custom, de l'input de l'UI.
Tu vas prendre des semaines pour ça
et tu vas faire le mauvais.
C'est
vraiment très difficile de faire bien.
Les gens ne vont pas essayer de faire ça bien.
Ils vont juste savoir ce qui fonctionne.
Pour la version minimale
de ce qu'ils testent et les acheter à la porte.
Et
je pense qu'il y a vraiment
quelque chose à être dit
pour la culmination
de tous ces shortcuts que les gens
font en ne pas
faire un produit
pas comme un joyeux.
Avec Tiel Draw,
je peux le remplir quand je le fais.
Je peux remplir la crainte
dans chaque interaction.
C'est juste un joyeux de l'utiliser.
C'est pas
vraiment réaliste
que nous prenons
tous les produits que nous faisons
et qu'on fasse le petit aspect
et que tout le petit
chose soit joué parce que tu n'en as jamais pu.
C'est important de
choisir et de choisir.
C'est pourquoi je suis vraiment excité
d'être en train de faire cette domaine.
Et surtout de la manière dont tu apportes
ces choses.
C'est bien pour cette expérience.
Parce que
je préfère utiliser cette phrase,
mais une taille de risques
élevé, ou des éleveurs,
c'est comme ce que tu fais
par faire cette plateforme
que tu fais tous les produits
qui utilisent cette plateforme
juste pour te remplir
et te servir.
Je l'espère.
Je pense
que maintenant que c'est
en train de faire un
« oh, ça peut être
une équipe,
ou un équipe,
ou quelque chose comme ça,
j'espère que le futur
est que les gens sont en train de faire un « teal draw »
Mais en termes de défense,
la deuxième chose que j'espère
c'est que un projet comme
cette « A »
qui sort de la barre,
c'est comme ça que ça devrait se sentir.
Et si tu es en train de faire
ta propre,
utilise-la comme un exemple.
Comment faire ce « teal draw » ?
Et
car c'est un « open source »
et un « open core »
qui offre un moyen
d'y aller.
Par exemple, si tu as un « rectangle »
et tu as un « stroke »
autour de cette « rectangle »
et ce « stroke » a un « dash »
donc comme un « dash line »
autour de cette « rectangle »
tu veux probablement
les « corners » de cette « rectangle »
pour avoir un « dash » à elles
tu sais ce que je veux dire ?
Tu ne veux pas que la « corner »
de la « dash » soit en train de faire
les « boxes » qui sont déçues.
C'est un problème que j'avais à résoudre
pour « teal draw »
et il y a un code
dans le « teal draw repo »
« get perfect dash props »
et je parlais de plein de gens
qui me disent que j'aime
ces « dashes »
ou des « equivalent »
et je suis comme, oui, ici est un « link »
ici est le « gist »
ou ici est le « shortcut »
à la ligne
utilisez-le, allez-vous
et j'espère vraiment
que les « availability »
de « teal draw » en service
ou juste l'availability
d'un exemple de comment tu résoudres
ces types de problèmes
qui sont un part de chaque app
qui contribue à
peut-être que il y a plus de choses
qui doivent être en train de se faire
et que les implementations sont juste
plus meilleures. Mon hope est que
comme nous avons les prochaines
1000 apps qui veulent être Figma for X
pas que il y ait quelque chose d'inconstitut
je veux plus de Figma for X
apps dans le monde, j'aime
utiliser ce type de pattern
et j'ai clairement de la croissance
que ça a plus de utilisation
juste au niveau des tools
mais j'espère que ces apps
vont se faire mieux
j'espère que ça va être très bon
et oui
j'utilise Radix UI
primitives
tout sur « teal draw »
je pense que le codebase
est 30% de Radix
quand je bundle
parce que ce n'est pas le problème
que je suis intéressé
en avoir un bon contexte
je ne suis pas intéressé en faire un bon contexte
ce n'est pas ce qui me motive
et sans un bon source de la source
pour ça, ou un bon
disponible
pour moi-même
je devrais le construire
et ce n'est pas très bon parce que je veux
aller au type canvas
ou je veux aller au type multiplayer
un source de la source pour la front-end
est beaucoup mieux
juste dans les derniers deux ans
je ne sais pas, peut-être que plus de gens
le sont en train de le prendre
peut-être que plus de gens sont consolidés
par certains libraries
comme React
où vous pouvez faire quelque chose
et avoir
des millions de downloads
sur un NPM
et utiliser ça pour promouvoir un autre producte
ou quelque chose
mais non, c'est été wonderful
et je l'ai certainement bénéficié
de ce type de choses que j'espère
que d'autres gens bénéficient de
aussi
en parlant beaucoup de la source de la source
je l'ai sorti avec toutes les choses que vous avez dis
mais il y a un autre
autre côté de ce coin
si c'était
la fondation d'un source de la source
c'est toujours des choses contente
c'est toujours très difficile de naviguer
donc vous avez été
bien en train de faire le bon
avec des sponsors
et beaucoup plus
qu'est-ce que vous pensez
sur la fondation et la fondation
et en particulier, je suis vraiment intéressé
en pensant sur ce
qu'il y a un producte d'open source
mais en fait, construire une compagnie
qui va devoir s'assurer
d'un sort de producte que les gens payent
c'est comme, comment
pensez-vous sur la monétisation
et comment ça change
et comment vous approchez de ça ?
j'ai pensé beaucoup sur l'open source
j'aime l'open source
j'aime ça pour
comme un consommateur
j'aime ça pour une organisation alternative
de laboratoire
avec le capitalisme
et c'est le stage de la currentité
parce que vous pouvez extraire
beaucoup de valeur
d'un projet d'open source
sans avoir à le retourner
ou payer
et on a des gens qui travaillent
sur des choses qui sont
dans leur temps libre, comme les volontaires
pour l'amour
et il y a
des bénéfices pour être
un développeur d'open source
pour votre carrière
ou pour
des expertises pour construire
des choses que vous voulez être un expert
mais peut-être que vous ne pouvez pas devenir un expert
dans votre travail. Donc l'open source a beaucoup d'adresse
pour l'autor
même, vous ne vous inquiétez pas
sur le côté de la monnaie
mais c'est juste
le côté de la monnaie
n'a pas besoin de ça
il y a seulement beaucoup de projets passionnels
qui peuvent exister dans le monde et être ouvert
et si vous aimez l'open source et vous voulez plus d'open source
il y a
un whole
field de projets
qu'on doit faire, comment nous avons
ces types de projets
pour être ouvert
et je pense que
les sponsors GitHub, pour exemple,
je fais de l'argent de 2000$
par mois et les sponsors GitHub, c'est incroyable
et merci à tous les gens qui ont fait ça
ça signifie beaucoup
ce n'est pas un grand temps
Twitch streamer
money, ou quoi que
mais je pense que c'est parce que
les types de relationships
et les choses qui font
quelqu'un pour peut-être sponsoriser quelqu'un
sur GitHub
sont très similaires à ce moment
à quelque chose comme Twitch
c'est que vous devez être connecté à la personne
vous devez être
bien, c'est
comme, vous aimez le contenu qu'ils créent
autour de la chose
et donc, le modèle de
sponsor GitHub est incroyable, c'est que
il y a plus de gens comme moi
que d'autres types de projets
et c'est bon pour moi, peut-être
mais
pas tous
doivent
remplir leur hard drive avec 8 secondes
pour faire fondre leur projet open source
tout ce qui est toujours bon
tout le monde a une bonne histoire
et
je pense que les autres gens sont probablement
plus écoises que les autres

faire plus de gens
qui sont plus écoises que les autres
pour donner
un pool de
sponsorship pour Google
et avoir des ingénieurs
qui disent que vous avez 200$
pour ce mois
pour payer sur les sponsors
c'est pour vous que vous voulez payer
ou que votre équipe a ceci
c'est juste un pool, vous pouvez l'utiliser
et je pense que c'est une bonne solution
pour les sponsors
mais ça va aussi falloir
plus sur les choses plus populaires
que c'est... je ne sais pas
on verra comment ça s'éteint
si GitHub voulait
utiliser le modèle de current
mais le faire vraiment efficace
il aurait dû être plus facile
d'utiliser GitHub comme une plateforme de contenu
donc
je ne sais pas, vous pouvez aller à
une autre plateforme de contenu
qui tient des donations individuelles
comme Twitch
ou Steam
je ne sais pas
si c'était pour soutenir l'open source
par le modèle d'une donation individuelle
je vais
à github.com
et je vois que le viewguys
vous savez, que ce team
en livestream
comme en faire la prochaine version
et en prendre des questions
et en avoir un petit boux
merci pour les 5 bits
View user
245
si
il allait aller dans cette direction
ou si il voulait rester dans la direction
que ça se trouve en itself
il aurait dû être mieux
pour faire ça, parce que c'est ce qui
tient des donations en ce moment
la plupart de mes donations sont pour les gens qui m'ont vécu
via Twitter et qui m'ont aimé mes threads
j'ai eu Thiel Draw
comme sponsor seulement
pour le 1er
en novembre
et il y avait
un cycle
d'avoir posté quelque chose
cool sur Twitter
des éros
qui se sont pointés
et qui se sont pointés
et les gens m'ont dit
je dois essayer
je dois...
5 bucks pour un mois, viens
et je devrais avoir les bouts de subscribers
ça n'était pas des gens
qui n'aimaient pas de l'utilisation
pas des gens qui ne m'ont pas
des gens qui m'ont pas
je devrais avoir des contents
ou des subscriptions
pour les contents que j'ai créé
si GitHub voulait faire
des sponsors individuels
je pense qu'il aurait dû
être mieux pour
une plateforme de contenu
qui m'a rendu
d'intéressant pour les développeurs
et ça encourage les gens à écrire
leur intérêt par donations
je ne suis pas sûr que c'est vraiment ce que
GitHub veut être mais c'est
mon take sur ça
les sponsors aussi ont un rôle intéressant
j'ai appris à jouer
dans le stage plus tard
de ce qu'il y aura
par exemple
je n'ai pas été organisé
ou je veux dire, TealDraw n'est pas bien organisé
bien enough pour
prendre des clients
ou des clients
c'est comme
comme un shop un homme
qui est dans le processus de
faire un tour
de la construction
pour TealDraw
j'ai mon contracteur
je n'ai pas un team pour support
je n'ai pas d'ingénieurs
pour tout le monde
je ne peux pas prendre des clients
mais je ne peux pas prendre des sponsors
les teams qui ont été travaillés
avec TealDraw
des de très petits
des de très large
ont été utilisés pour les sponsors
c'est un moyen
d'encourager
l'effet
vous ne voulez pas que le projet se fasse
vous ne voulez pas que je fasse un travail
vous voulez que je reste employé
c'est un moyen de
de garder ça en train de faire la confiance
et la confiance
pour qu'ils puissent construire
les sponsors
ont une opportunité
d'avoir
la
support non transactionale
non transactionale
d'avoir
normalement un client
et
pour quelqu'un de construire
quelque chose à ce stage
ça a été très utile
surtout comme un signal
on veut payer pour ça
on veut payer pour ça
on va te mettre les choses ensemble
on va être normales customers
mais en même temps on peut être sponsors
c'est très utile
c'est vraiment bien pour le projet
vous avez mentionné beaucoup de projets
qui sont construits sur le top de TealDraw
dans le système de l'éco
avez-vous des exemples de ce que les gens sont construits ?
l'un que j'ai vu dans un de vos tweets
c'était
ce Dungeons & Dragons World Builder
qui
a été
un geeky furie
pour me commencer mon campagne
mais vous avez vu d'autres cool choses comme ça ?
oui
je n'ai pas utilisé le système

mais j'aime
je suis toujours en train de
faire un nouveau nom pour ces projets
ou le projet de plateforme
j'ai registré
Trouble.dev, TRBL
mais on va voir où ça va
le projet que vous parlez de
qui a été construit sur TealDraw
à un moment est le legend-keeper
et
c'est un produit
pour
le building world
donc si
normalement ça serait pour
un Dungeon Master
quelqu'un qui va être le pour le jeu
pour organiser
tous les personnages et les NPCs et les places
et les lourdes
et le tenir en train de
faire les choses pour que vous puissiez
dire que vous avez été ici avant
et que vous avez
tué le dragon et quitté
votre coin ici
je n'ai pas joué du Dungeons & Dragons
et ils
ont une idée
on veut avoir un
un oublie pour
avoir tout ce data dans le système
pour arranger ça
pour que vous puissiez
faire un pegboard et dire
que c'est la fête de famille
ou que c'est la relation entre les deux choses
mais le moyen que ils ont décrit
c'est que
c'était essentiellement bloqué
c'est une petite équipe, c'est une idée cool
mais si vous avez un
un tour comme ça, vous devez
construire le UI
qui est vraiment difficile
et c'est un projet de sa propre
et donc quand ils ont
trouvé TealDraw
c'était comme
on peut faire ça
comme ça
on ne commence pas
en plus de 1 000
et c'est ce qu'ils ont fait
et c'est génial
j'aime les channels discord
les bords que les gens ont
et ils sont incroyables
j'ai l'occasion de vous trouver
je vais retweeter des des
parfois des accounts TealDraw
c'est génial
c'est comme
j'ai l'air de voir
ce type de tech que j'ai construit
pour une
une autre type de créativité
c'est génial
les autres teams qui ont été construits
il y avait une grande compagnie
qui a une solution de la portée
qui était de la législation
et qui a besoin de venir à la web
et donc ils se sont dit
oh, chute
c'est un code de plus en plus
il y a quelques années
ce n'est pas quelque chose qu'on peut faire
et puis aussi
depuis les années
les préoccupations de la portée
miro et nowfigjam
ils disent
tu veux des choses interactives
des choses complexes
selon ta implementation
ça serait très difficile
ça serait très facile
de faire en HTML et CSS
ça serait très facile de créer
un timer
en utilisant un component de raf
ou en utilisant un component de raf
ça serait très difficile
si tu as choisi un ranger de web complexe
ou quelque chose comme ça
donc une autre raison
pourquoi tu peux regarder le draw
et puis
il y a des teams qui ont
des idées de greenfield
on est construit
quelque chose
pour les architectures
et nous voulons
avoir
une technologie pour ça
et donc considérer le draw
comme un autre sort de
un moteur pour ça
pas que il y a beaucoup d'autres
mais c'est quelque chose qui peut
faire le point où ils peuvent travailler
sur leur domaine plutôt que
prendre le temps
de construire le canvass UI
ou le spatial UI
ce sont les patterns que je vois
pour qu'ils puissent
remplir quelque chose de la législation
pour qu'ils puissent mettre des constraints
en faisant quelque chose de complètement
envers le domaine
donc le poursible légendaire
ou quelque chose de nouveau
qui est
on va être Figma pour X
et maintenant on va trouver
les figmes
et ce sont les teams
bien
avec ça on va
commencer par les thèmes
mon premier thème de la semaine
en ligne avec ce que nous avons parlé de
les petits détails, un nouveau library de Popper
d'une des autorités de PopperJS
ceci est appelé floating UI
et ce qui a vraiment pris mon avis
c'est qu'ils veulent être
comme petits comme possible
donc je pense que ici ils disent
oui, le core library est seulement 600 bytes
et c'est
comme
vous n'avez pas besoin de tes thèmes pour
faire un peu de pages
et de changer pour quelque chose comme ça
ça peut vraiment aider avec ça
et ça ressemble à
les fonctionnalités de PopperJS
donc ça pourrait être
une réplacement Popper
et c'est aussi pas de réaction
pour que vous puissiez utiliser
avec tout ce que vous voulez
ça ressemble bien
j'ai pas utilisé ça
et ils ont un petit petit icon
un petit garçon
c'est quoi ça?
floating UI
cool
il y a quelque chose à dire
pour imprimer la fonctionnalité
et donner des appels très bons
pour ça
PopperJS est un autre place
où c'est simple, je vais juste construire
oh, CSS peut faire ça
et c'est comme non, l'éducation est galore
donc c'est cool de avoir libraries comme ça
oui
donc mon premier tooltip
c'est quelque chose que j'ai fait pendant un moment
et j'ai vraiment hâte de le trouver
vous pouvez le trouver à CodeHike.org
c'est appelé CodeHike
c'est par Rodrigo Pombo
Rodrigo Pombo
si vous avez
écrit code et marqué
comme un exemple code
vous avez les codes de la fin
les 3 backticks et vous pouvez
décrire le
langage que vous utilisez
et c'est tout en général
et vous vous pastez votre code
parfois vous voulez des choses
qui sont highlightées et les détails
sont importants et tout est important
et il y a des codes qui sont highlightés
qui vont faire ça pour vous
mais il n'y a pas beaucoup de bons les
ça fait ça et plus
c'est comme, vous voulez des animations
pour aller
d'une file de code à d'autres?
ça fait tout ça
tous les scénarios
de vous montrer un exemple code
mais c'est vraiment riche
et ça ne se concentre pas exactement
ce que vous voulez voir
c'est un autre piece de
vraiment phénomène
où je pense que vous
et que Tildra et les graphiques
je pense aussi
que Rodrigo et sa travail
en documentation
pour CodeHike
c'est vraiment bien fait
et c'est un excellent ressource
c'est aussi quelqu'un qui fait grand
un grand ressource d'open source
que vous pouvez sponsorir
c'est la chose que vous avez besoin
vous avez besoin de bonne documentation
s'il vous plaît, check it out
c'est un bon site d'acid
en parlant de
les semaines de losing
quelque chose qui a été incidental
pour l'actualité que vous êtes en train
c'est beau
je pense qu'il a été en train de travailler
pour beaucoup de temps à ce point
bon travail
bon
donc le premier
je pense que j'ai deux
le premier est un projet que j'ai mentionné
en l'alimentation
c'est un projet de télestrateur
c'est T-E-L-E-S-T-R-A-T-O-R
je n'ai pas eu ce nom
c'est comme le nom pour ce type de
chose qui vous permet de vous faire
sur votre écran
quand vous êtes en train de regarder le football américain
et ils font cette ligne de l'oeil
ils utilisent un télestrateur
inventé par les 60s
en tout cas, ça fonctionne vraiment bien
si vous faites des sortes de live
des screenshots ou des demos
c'est comme
un télestrateur qui vous permet
de vous présenter
de votre écran
vous faites vos marques, ils vont se faire
après quelques secondes et puis si vous avez besoin
de reposer
et de vous donner le contrôle
pour la chaîne ou l'app
que vous utilisez, vous vous pressez l'escape
donc, si vous faites
des streamings ou des demos
ou des screenshots, c'est un bon moyen
vous pouvez aller très vite
en annotant ce que vous avez sur la scène
c'est un télestrateur, c'est gratuit
c'est un GitHub, il a un petit app
pour Mac, il a probablement besoin de la page de landing
mais c'est une source d'open
si vous voulez me faire partie, let me savoir
la deuxième, je m'ai mentionné que je vais dire
comment je fais mes screenshots
ou faire mes gifs
et je utilise une app called
cap, c'est beaucoup plus facile
c'est juste K-A-P
et c'est ce que j'ai fait
gitcap.co
et c'est
comme une app
de recrutement
et c'est fait
je ne suis pas sûr si c'est une agence
ou pas, c'est un team de
volcano, mais avec un W
je suis pas sûr
c'est un couple de gens
mais c'est Christopher Skillcorn
qui travaille sur ça
et c'est d'abord, c'est open source
il a un really good UI
et un très bon system de plug-in
aussi
vous pouvez juste choisir la partie de votre screen
que vous voulez recruter et recruter
et choisir comment vous voulez exporter
ce qui je pense que
le contrôle que vous avez au niveau de comment vous exporter
c'est vraiment ce qui fait que ça s'éteint
d'un point de vue de la clean shot
qui est très bien, mais c'est un peu limité
le moyen que j'utilise
je
recrute
à un 16x9
dimension
si vous pouvez
sélectionner les dimensions que vous voulez
choisir sur votre screen
je recrute
et je recrute
à 60fps
mais pour les gifs, vous voulez
exporter à 50fps
ce qui est le maximum que les gifs permettent
de vous exporter
je n'ai pas pu le savoir
j'ai dû le apprendre ici
je exporte à 720px404
je pense que c'est le
le nombre de la taille, mais 720px
et puis je normalement
les déchire la vitesse
en moins que je fais quelque chose de performance
qui est où la vitesse est vraiment
la plus élevé
je mets la vitesse
à 125%
et
la lait de 8 à 10 secondes
moins que 8
plus que 8
mais je pense qu'ils ont fait des études
que les gens vont se déterrir
juste pour que ce soit en train de bouger
pour 8 secondes
avant de décider qu'ils ne sont pas
intéressés
si votre content est
il faut que vous promettez
que c'est le cas
8 secondes c'est un bon target
et
à 125% de la vitesse
c'est en fait 12 secondes
de contenu
donc vous pouvez en avoir un extra 4
c'est ce que je fais pour mes gifs
c'est aussi la option de compresser
les gifs avec un algorithm de compression
de la faute
et ça marche bien
et Twitter va les prendre
et les tourner à la vidéo
donc vous n'avez pas de problème de la taille
mais c'est pourquoi vous faites un bon gif
avec Cap.
c'est un pro
tout le monde


mon dernier tout le monde
est un
library de la maquere de code sandbox
sain pack
sain pack
je ne sais pas comment le dire
mais c'est un bundler dans le browser
où vous pouvez avoir
cet environnement de code live
sans
presque aucun setup
je pense que c'est un peu cool
comme ça
c'est un peu de l'empire
sur le browser, le module hot
c'est un des blocs

que vous pouvez utiliser
pour faire votre site et vos exemples
et vos démons beaucoup mieux
donc certains des exemples qu'ils vous donnent
sont les docs de réact
les docs de hookspace
tous les tutoriels interactifs
dans ces docs sont faits avec sain pack
c'est super cool
et je pense que
le code hike, le tooltip de Justin
de cet épisode est aussi construit
avec sain pack pour ces démons
et ils utilisent juste le part d'éditer
dans les démons mais c'est là aussi
donc cool cross pollination
cette semaine sur nos tutoriels
c'est assez cool
peut-être que je vais rentrer
mon dernier tooltip
pour la semaine est ce visual
programmé
par Samuel Timbo
c'est appelé IOU
le site est
IOUN.IT
c'est juste un
intéressant exploration
c'est très sci-fi
il y a un petit peu
de construire des intuitions
pour vraiment figure
et naviguer mais il y a un petit panel
où vous pouvez ajouter des nouvelles primitive
et vous pouvez en général
construire un
vraiment visuel
qui est un flow
qui est vraiment super
j'adore tout ce que c'est
et c'est un bon exploration
dans le space
avec tous les tools
visual programmés
généralement ils ne sont pas
super intuitifs
quand vous vous le mettez
mais c'est intéressant
si c'est votre truc
et vous aimez jouer avec
les circonstances futures
vous allez vous couper
parce que, en particulier quand vous vous build un truc
ça vous ressemble
j'ai un appel avec cet homme demain
j'ai l'impression de
j'adore comment
cryptique le UI est
c'est...
non clou, comment utiliser ça
intentionnellement cryptique
il me semble alchemy
c'est partie de la fun
l'expérience en cours est wonderful
vous ne savez pas ce que vous êtes regardant
l'expérience en cours est...
c'est un jeu ?
c'est... j'ai l'impression
mais quand vous build
c'est... c'est...
c'est comme un alchemy
c'est comme un flowturt
je sais, c'est assez intéressant
j'ai déjà fait ma 2
mais si vous voulez faire un design
j'ai essayé
de construire ça
pour quelque chose de plus grand
je vais vous dire
ce ne serait pas le futur
de design mais
c'est quelque part
le futur de design
il y a un endroit pour des globes dans ce monde
avez-vous entendu des nerfs ?
oui
un certain genre de l'algorithme
oui, ce qui me rappelle
c'est que...
un espace 3D
parce que c'est...
c'est différent
mais...
avec deux espaces de nerfs
quand vous les affichez
ils peuvent les connecter
c'est très...
c'est cool
je ne sais pas comment je vais changer
j'ai vu quand vous l'avez originalement
j'ai dit que ça a été cool
et j'ai essayé de faire quelque chose
je suis pas un designer
c'est vraiment populaire
il y avait des gens qui travaillent
sur...
des langues scriptées
comme les français et japonaises
et...
on a fait des trucs vraiment amusant
même 3D, basé sur ce...
c'est cool
c'est des globes
c'est cool
ça nous rapporte pour notre segment de tooltips
merci pour votre attention
c'était une conversation super intéressante
sur les topics que je n'ai jamais pensé
donc...
merci pour votre attention
merci
c'est beaucoup de storytelling
mais c'est une histoire très intéressante
oui, bien...
l'écouter de votre histoire était absolument
c'est super
et ça t'a fait tout le monde
parce que tu as déjà parlé de cette histoire
sur Twitter, donc c'est...
de tout ça et maintenant de tout les détails
c'est vraiment cool
à tout moment
c'est tout pour cette épisode de DevTools FM
n'oublie pas de nous suivre sur YouTube
et à tout moment de consommer votre podcast
merci pour l'écouter

Les infos glanées

Je suis une fonctionnalité encore en dévelopement

Signaler une erreur

devtools.fm:DeveloperTools,OpenSource,SoftwareDevelopment

A podcast about developer tools and the people who make them. Join us as we embark on a journey to explore modern developer tooling and interview the people who make it possible. We love talking to the creators front-end frameworks (React, Solid, Svelte, Vue, Angular, etc), JavaScript and TypeScript runtimes (Node, Deno, Bun), Languages (Unison, Elixor, Rust, Zig), web tech (WASM, Web Containers, WebGPU, WebGL), database providers (Turso, Planetscale, Supabase, EdgeDB), and platforms (SST, AWS, Vercel, Netlify, Fly.io).
Tags
Card title

Lien du podcast

[{'term': 'Technology', 'label': None, 'scheme': 'http://www.itunes.com/'}]

Go somewhere