Bueno, voy a hablar de la Frontend Checklist, como usted puede saber.
No, la Frontend Checklist, tal vez presentaré a mí un poco más.
Como dije antes, soy solo la Frontend Developer.
Mi nombre es Kood. He trabajado en empresas internacionales y algunos proyectos que puedo compartir con usted después, si quieres.
Me encanta la gente, he manejado varios equipos y amigos en Mauritius.
Y me gusta construir cool stuff.
Así que, sí, he trabajado en grandes plataformas. ¿Sabes de Pampers?
Pampers, sí, sé, eso suena extraño, pero sí, es un gran cláforo de Procter eGumball.
Pampers es el número 1 brand de Procter eGumball en el mundo. Es muy grande.
He trabajado en uno de sus proyectos, y algunas aplicaciones, y un proyecto de Open Source que estaré con usted después.
Así que, sí, he estado en Brasil hace unos años.
Soy de amigos, pero mis amigos son de Portugal, y es aquí.
Sí, se ha perdido en todo el océano.
Sí, es más que nada. Me pido un cuadro, porque es muy pequeño.
Y, probablemente, estaré moviendo a Canadá.
Así que, diré tu situación probable, pero lo veré, según lo que estás haciendo en general.
Pero los desarrolladores de la frontera son muchas veces construyendo websites como eso.
Porque, a veces, si trabajas por clientes,
a veces los tiempos son cortos, hay que estar muy rápido en lo que estás haciendo.
A veces, tienes un futuro que te envíe a los clientes.
En el medio del proyecto, te olvidas el dato de la desgracia,
es la última temporada de Game of Thrones,
o un nuevo entrenamiento que deberías manejar que suceda muchas veces.
Y, sí, he escuchado esa excusa mucho tiempo.
Entonces, cuando estamos trabajando muy rápido,
a más de la hora, nos encontramos antes o después de producir algunas botas
o una pieza de codas que están...
...de las imágenes, este tipo de cosas.
Un montón de cosas pueden estar perdidas en general
cuando estás trabajando el proyecto, después del proyecto, después del proyecto.
Entonces, puedes imaginar lo que voy a decir,
pero debe existir otra manera de vivir como desarrollador de la frontera
y es usando un checklist.
Sí, es chico.
Entonces, tal vez has escuchado sobre ese libro,
The Checklist Manifesto by Atul Kawande.
Entonces, el libro fue sobre...
Ah, perdón.
Surrogens, que después de usar un checklist,
se fue capaz de decir un montón de más vidas
que antes de usar un checklist.
Entonces, esa es la referencia sobre checklist en general.
No específicamente.
Entonces, por qué deberías usar algún tipo de checklist
en tu teléfono del día?
Hay algunos ejemplos que puedes encontrar mucho más.
Entonces, puedes usar un checklist para evitar
repeticiones o misiones en tu código
para asegurar la calidad de tus teléfono del día.
Sabe tu tiempo para ir a los teléfonos.
Por ejemplo, un documento que puedes compartir con miembros,
colegas, o algunas personas.
Y esto tendrá que ver con tus colegas
si estás trabajando en una empresa o una agencia.
Entonces, ¿qué piensas?
¿Eso hace sentido para ti?
Vámonos.
Entonces, ¿qué piensas de la optimización de la imagen?
No sé, hay un checklist que tiene metatags,
que es lo que a veces no hay gente.
Exacto.
No sé, ¿qué piensas de la optimización de la imagen?
Entonces, ¿qué ha cambiado en las últimas décadas
en relación con los dispositivos
que utilizamos para conectar a internet?
Entonces, hoy utilizas teléfonos móviles, tablets,
este tipo de cosas.
Y eso ha cambiado un montón de cosas.
Porque antes fuimos desarrollando websites
para las personas que estén en su desco,
en su desco.
Entonces, la conexión fue buena,
no necesitabas...
La conexión fue la misma
durante todo el tiempo que estás en internet.
Pero por ejemplo, hoy estás en tu teléfono móvil,
en la calle, a veces tienes buenas conexiones,
a veces no.
Entonces, el comportamiento es algo
enorme y realmente importante
hoy cuando desarrollas un website.
En general, puedo enseñar a ti
sobre...
Oh, global.
Global Internet.
Entonces, hoy...
No, esa...
Esta.
Entonces, hoy alrededor de 65%
de los websites en general,
personas que están conectando
a un website,
vienen de teléfonos móviles.
Hoy tienes mucho más personas
que vienen de teléfonos móviles.
El dispositivo...
No, teléfonos móviles.
No, teléfonos móviles,
teléfonos móviles.
Sí, eso es lo que creo.
Espérate.
El verde.
Sí, el teléfonos móviles
están en el verde, el verde,
y el teléfonos móviles aquí.
Entonces, tienes mucho más personas
que vienen de teléfonos móviles.
Entonces, si desarrollas un website hoy,
se concentrará primero en el móvil
y después en el teléfonos móviles.
Pero dos años atrás,
era teléfonos móviles.
Entonces, por ejemplo,
tienes una conexión pura en el móvil.
Si tienes una gran imagen,
la persona no podrá download
toda la imagen y ver tu contenido.
Entonces, la optimización de la imagen
es algo que se presenta hoy
si estás desarrollando un website.
Una otra cosa.
No solo una,
vemos más,
pero eso es una cosa
que es realmente importante.
Dependiendo de la conexión.
Dependiendo de la conexión.
Sí.
La conexión
puede ser con un API,
pero no es apoyo a todos los browsers.
Pero en el screen,
tienes la imagen, el sourcete.
Puedes proporcionar diferentes imágenes
basadas en la resolución real del dispositivo.
Es algo interesante.
Tienes algunos ejámenes aquí.
Y todos los artículos.
Así que,
si te rechazas y te proporcionas
diferentes imágenes,
eso es un ejemplo.
Dependiendo de tu dispositivo,
puedes proporcionar diferentes imágenes.
Es otro modo de hacer eso.
Entonces,
esa es la situación que la mayoría de las personas
pueden tener hoy.
Entonces, el listo de front-end.
Yo definí el listo de front-end
como una lista exhaustiva
de todos los ejámenes que necesitas
antes de lanzar un sitio
o una producción de la página HTML2.
Entonces,
este proyecto,
empecé a trabajar en el listo de front-end
tres años atrás,
pero nunca encontré tiempo
para hacer ese proyecto.
Y antes de que
me guste
a Open研uch,
intenté terminar el checklist
y ofrecer un asunto
para mi equipo.
Entonces,
construí ese checklist
根á la teoría repetitiva
que encontré
en mi equipo
y intenté
colocar todo en uno documento.
Entonces,
intenté encontrar
todo ese checklist antes,
pero nunca encontré algo
y con todo lo que es necesario.
Así que,
eso es...
Sí, eso es la tabla de todas las secciones que tengo en la checklist de la frontera,
el Head, HTML, Wi-Fi, CSS, Images, Javascript, Performance, Accessibility, y SEO.
Así que, puedes pensar que, por ejemplo, SEO, o Performance, no son sujetos de frontera,
pero son...
Incluso, en general, puedes tener un SEO, un SEO responsable por el SEO.
Es muy importante que un desarrollador de frontera comprende algunos puntos importantes sobre el SEO,
porque SEO es el relato al código.
So...
SEO SEO.
Sorry?
What is it?
Search and drawing optimization.
Oh, okay.
It's like the meta tags.
But not only.
Okay.
So, the headings, a lot of things...
I will go through that after.
A lot of things are important on the front-end side.
Do you have anything you don't understand for some weapons, accessibility, or...
What performance are you on the front-end?
Yeah.
So, yeah.
In general, people think that performance is only a back-end thing, but you have a lot of things
that can or need to be handled in the front-end side, too.
For example, we were talking about image optimization.
You can handle that in the back-end side, but you can handle that on the front-end side, too.
In general, content, for example, images into articles, for example, can be handled in the back-end.
But images you want to use in the layout, in the design, may be optimized by the front-end team,
not the back-end.
But we will see some examples, maybe, to help you to understand.
And accessibility.
Accessibility.
So, when we develop a website, you may think about your...
So, people that can access your website to a mobile phone or a desktop and have all the
capability to connect to your website.
You have some people that don't see the colors like you and me, that use a browser with voice.
For example, they speak and they can navigate on a website, this kind of stuff.
So, not everyone has all the capability or abilities to navigate on a website like you
and me with a mouse, with a keyboard, this kind of stuff.
You need to follow some essential rules to be able to have your website accessible by everyone.
Is that a group?
Language is depending on...
No, no, it's more how you are going to organize your code and all the information you will
provide to be able to be read by voice browsers, for example.
You know the alternative text we put on an image.
So, a lot of people, a lot of websites, for example, they take the title of an article
and they put that article on the alternative text.
But it's really wrong.
The alternative text is something that needs to describe the image in case you don't see that image.
Not only in the case the image is not found.
Because someone that can't see will hear from the voice browser the description of the image
and will understand or will visualize what the image is about.
So, this kind of stuff.
So, yeah, let me show you.
So, first...
So, first, I build a project on GitHub, on a readme file.
Do you both have a GitHub account?
Yes, okay.
So, you know about Markdown.
What is Markdown?
Not sure.
So, Markdown is a simple language.
No sé si podemos decir lenguaje.
Pero eso...
Me permite que...
Déjame mostrarlo.
Así que eso es Markdown.
Así que es un texto sin algún discurso, particular.
Es muy útil para escribir todo el documento
y puedes personalizar, generar CSS y tener algo organizado.
So, in general, if you...
You worked with Git, both?
Okay.
So, Markdown, all the Git repository on the cloud, on GitHub, on Bitbuckets.
The readme.md is the first file that is read by the repository.
So, I wrote that file.
And that's something I say in an article I wrote.
The first day I put that on GitHub, I received more than 700 people.
The first day I didn't...
I was at home and I published that readme file in the morning.
I asked my colleagues to put a star.
I was happy with 10 or 12 stars, I don't remember how much.
But at the end of the day, when I went to the GitHub account
and I saw 700 people, I didn't know what happened during the day
and why so many people were coming on the repository.
So, one of the reasons is based on the readme publication.
I was not aware about that.
And a lot of people came from Reddit.
Yeah, incredible.
So, yeah.
And after some time, I worked on maybe something you already saw.
The application, even it's not really an application,
but I used everything that is on the readme file and I built that tool.
People asked me to build that kind of thing.
So, I will show you how it's working and how you can use it.
But it's the same thing, but more dynamic.
So, that is some technologies I used for the application.
Stand up.
You have the Margon, I use Ulysse on Mac.
It's a nice application to work on Margon files.
Do you know what it is?
Sorry?
Exactly.
It's a templating engine for HTML.
It's really really powerful.
Very interesting.
We haven't used it, but I really like it.
It's a task manager.
So, a girl can help you to automate a lot of tasks.
So, for example, image optimizations,
minification of files, this kind of stuff.
So, you can use girl.
ES6, so JavaScript.
SAS, SAS 2.
So, it's not big technologies, but enough to build what you use so.
And I use these tools, too.
Do you know what they are?
So, I'm not going to spend a lot of time on that,
but just to give you an example.
So, Travis CI, CI is for continuous integration.
So, what is happening when I'm working on the front-end chicken
and some modification.
So, I work on my repository.
I commit and I push my code.
And Travis is going to launch, for example,
the girl builds that I already defined before.
The girl builds is some task that will test my code
and see if it's missing something
or something is wrong in my code.
So, he automatically watch my repository,
launch the girl builds,
and if the girl builds is without any error,
netify, no, sorry.
If I don't have any error,
he publish the result of the girl builds
into another branch.
So, I'm working on a master branch,
I don't have any error,
the disk folder is going to be on the GHPages branch.
And that branch is used by Netlify
to have my HTTPS and everything.
Let me show you, maybe an example.
So, it's some sort of example
that you can use easily.
So, Netlify is completely free.
es free to, if you use for open source project and yeah, that's it, write frontend code, push
it, we and all the rest. So, to show you how it's working for the frontend checklist, I
linked so my Github repository or my branches to netlify and every time I have a new update
automatically domain site settings, I think. So, yeah, you have the repositories, name, build
and deploy, I think, yeah, prediction branch, etc., etc., etc., etc. I have defined, I don't
remember exactly where, I have defined my domain name and this kind of stuff. So, I can have
HTTPS and all the things and all my code is hosted on Github.
You can put your domain name, frontend checklist.io and it's like a serverless application. So, you put your code link to your domain name for free, does that, but yeah,
let me show you maybe, deploy. Here, for example, that's the subname that Netlify can give me for free and I put my primary domain
and that primary domain is using what's on that. And what's on that, it's what's on my GH pages that we show you.
So, I have the master, I have that branch and on that branch, I have an index.html. Netlify helped me to have my domain name, frontendchecklist.io, that will point to that file.
So, what you see on frontendchecklist.io, it's that branch.
Okay. And CodeClimat and CodeClimat, I will talk maybe after about that, but there are some tools that can analyze your code and say if you have some errors in your code. So, for example, on, yeah, there are both, they are doing the same.
I'm using CodeClimat, but I will probably use code I see in a few weeks, but they use the same, they analyze your code and say if something is wrong, how you can correct, what you need to correct.
Let me give you just an example, oh, sorry, you took the photo? Oh, sorry. And so, CodeClimat. These kind of tools are really helpful today when you want to produce a website.
So, they are free, all these tools are free if you have an open source project. If it's a private project, you need to pay.
So, what? Okay. Oh, no, that's not the one. Open source, sorry.
So, for example, based on something I will show you after, you found me 61 issues.
They are not really issues, but based on the best practice, for example, here, the rule that is on CodeClimat is you can't have functions that exceeds 25 lines.
So, it's saying me, okay, you need to reduce and try to have less lines.
And in that case, I can click here and create automatically a ticket on GitHub.
So, if I work with a few people, I can create a ticket and someone else can correct me.
I have an indication about how much time I need to fix that issue, probably, and where I can found that issue.
Normally, I don't have any critical issues, but there are some issues I need to correct.
Here, it's interesting. So, similar block of code found in two locations, consider refactoring.
So, these tools can work with JavaScript, can work with CSS, and a lot of other languages, too.
But there are tools that are used in general by companies to really have less errors and have a better code in general.
So, that's nice to know.
If you want to know more about that, I recommend you to go to GitHub Marketplace, and you will find all the tools.
That's not all, but most of the tools you can use today to code quality, code review, continuous integration, this kind of stuff.
So, you have code as you hear. All these tools are doing more or less the same.
You see here PHP, Python.
So, there are tools. Today, you can't live without these tools if you want to improve your code and what you are producing.
So, everything that is around continuous integration is really, really important, because you don't want to test everything
when you are creating a new feature, you don't want to test everything to ensure that you don't have an issue.
So, these kind of tools can handle a lot of tests, and if they found some errors, they are not going to deploy your code in production.
So, there are like firewalls of some safe word for your application or your website.
And if you have more questions about that after, no problem to discuss about.
So, how you can use the front-end checklists.
So, first you need to decide which rules your project and your team need to follow.
So, as you can see here, you may find they have a lot of rules.
So, every rules are required. Some can be, even I don't recommend, can be not followed.
Sorry, my English sometimes.
So, first you need to decide which rules are crucial and essential for your team and your project,
and decide which one you really need to follow in all cases.
Define the rules to check at the beginning, during and at the end of the project.
So, that's something that is missing today, but I will put these things later on the project,
because some rules you can test these rules and decide about these rules at the beginning of the project,
and you will not need to test it again after.
So, define the rules you need to check at the beginning of the project, during and after.
It can be interesting to learn a little more about each rule.
So, it's something that I will add soon, but for example, understand why this rule is important is really essential.
So, on most of the rules you have some links to articles or documentation to help you to understand,
but as soon as I will add a new description, a why on all rules to explain why, why that rule is important,
and why you need to follow that rule.
Start to check.
So, as you can see on the, if you have any questions, or something is not clear, don't hesitate to tell me.
As you can see on that tool, you can start to check what is done, what is already good in your project,
and if you reload the page, you will not lose everything.
So, it's saved on local storage.
So, do you know what is local storage?
So, it's saved on local storage, so don't worry if you, or if you leave that page and you go after some days.
And the goal is for you to define a project, index.h, so there's Jamal, David,
and the same if I reload, it's saved.
And after you checked most of the rules, you can generate a report.
And send to your client, use the QA team, or this kind of stuff.
So, that is exactly the same, but with CSS print.
But if you want less, you can reduce every section.
So, for example, if I want to send only a recap, I can close everything.
And when I click on generate report, I have the percentage of the rules that are checked.
In one page, if I close this one, it's going to be in one page only.
So, here there are some anchors, and here it's a filtering tag system.
When I click on one of these names, it's going to show me which one has this tag.
Do the...
What's the name of the word?
These colors.
Do you have the name of the top?
No, no, the green.
Do you have the name of the top?
Yeah, it's some priority.
It comes built or you set it?
No, I set it.
That depends on the project.
So, even all these rules are required in general, you know, you need to...
In case you don't have all the time and you want to focus on the one, it's the most important, so that's why I try.
Even some people can agree with that, maybe, but it's a good start, I think.
Integrate automated testing in your workflow.
So, today it's required.
You can't build anything without a task manager or a build system or something that will help you to automate a lot of tasks.
So, Grants, the old one, Gulp, it's more used today than Grants.
It was one of the first. Webpack is different than Gulp and Grants, but all these tools are here to help you to automate.
Not these two ones, but it's...
Do you know where they are?
So, it helps you to concatenate your JavaScript...
...to be used in the client site.
So, but today we are using Webpack than Browserify.
For this kind of test, you are talking about, is this a Mocha test?
No, Mocha is for JavaScript test frame, but you can use Gulp to launch automatically Mocha if you do some modification in your code.
Mocha is completely different than that, but Mocha is really to write tests and see if your functions or your methods are working well.
So, what if these two are different?
So, maybe these two are test corners.
Let me show you some examples.
If I take the front-end checklist.
So, I use Gulp on the front-end checklist.
So, here you have the Gulp file.
So, don't worry to understand everything, not the goal, but just to give you maybe a small little example that you can easily understand.
An easy one.
Ok, this one.
So, that is a task that I called compress images.
So, what is doing?
Here I have the Gulp source.
So, all the files with JPEG, PMG, SVG extensions.
Ok.
So, I want to cite all these files.
And on all these files, I want to apply ImageMe.
ImageMe, it's a NPM module that is going to optimize the JPEG and the PMG files.
Don't worry to understand why or how it's working, but just to understand what it's doing.
And after you optimize all these images, it's going to put all the optimized images on that destination repository.
That's it.
So, you have a folder with all the different image options.
So, you see here it's a variable, so it's your SRC on the top, and here it's your destination.
So, it's not the same folder.
That's the source folder, that's the destination folder.
So, I applied these optimizations on these files, and all these files, after they have been optimized, they are going to be created on that folder.
And so, you want to test in terms of Gulp, and it runs all these tests.
So, I can launch that task manually, I can say Gulp compress images, but it's not the best option.
What I can do, it's... Moka is here. I can say, okay, Gulp, please, I want you to watch all these repositories, and one of them is the images.
And in case you see any modification, anything, I want you to launch that task.
So, I run Gulp, and when Gulp is running, it's going to watch all these folders and do something, some action, some running some task, if something happens.
So, for example, in the case of SCSS.
So, if something changed, that is for subfolder, and that is for any file.
So, any file that can be in a subfolder, with the SCSS extension, I want you to run linked, CSS, and compile...
Is those stars on the double one and the single one?
It's for anything.
That's for everything, that's not just Gulp, like Gulp, no.
Now, in general, that's every one-star to grab import all files from a folder.
In general, that is used a lot, that symbol, it's wrong for everything, and the double one...
For example, if I put, I don't know, dash, test, you will take all the files without any test, and whatever at the beginning of the file.
So, that is an essential part for a Gulp file, watch thing, and to give you an example for compile, you will understand.
Gulp, Gulp, Gulp, Gulp, Gulp, Gulp.
Any questions?
I have a question, I think I have a confused language.
Gulp is for automatic, tasks?
Okay, so, like, I heard tests, I do not think...
Ah, sorry.
I am so confused.
Sorry, sorry.
No no, sorry.
Tasks.
I love tests.
Oh, okay, okay, okay.
I am sorry.
So, do you use this instead of one pad?
Sí, pero puedes hacer más o menos lo mismo con un webpack,
pero es un poco más complejo.
Y no va a terminar todo en el mismo modo.
He encontrado una manera más fácil de entender a primera vez,
y tal vez con el tiempo puedes usar...
En ese caso, en ese caso, utilizo un webpack,
pero es una forma de usarlo,
pero utilizo un webpack aquí.
No me gusta, no me gusta, aquí.
En general, por qué me gusta es ver...
Ok, en algún proyecto, puedo usar solo un webpack,
y puede usar más de todo,
pero si quiero tener alguna cosa específica,
puedo usar más, pero es una manera interesante del mundo.
Pero, solo para darles otro ejemplo,
si no es el propósito de hoy,
compártelo en paredes,
aquí es un variable,
a ese punto, los paredes de CSS,
el más importante es que evitemos el gelt
para que se empieze,
y aquí tengo...
Pero gelt, si... ¿Sabes qué es un source map?
Ok, entonces, cuando sas, por ejemplo,
en roll sas, hay varios files,
donde puedes usar CSS,
y en el final, todo es compadido,
y solo tienes 1 file, ok?
No es fácil saber cuando tienes,
solo para el variable main.css,
quieres cambiar...
Déjame probar...
Por ejemplo, aquí tengo main.css,
pero me gustaría saber,
o me gustaría saber si existe una manera
de saber dónde es el cuerpo,
en el que el file de CSS es el cuerpo.
Porque en el que el file de CSS es el cuerpo.
Sí, quizás hay otro file que se llama,
no sé, base.css,
entonces, el source map es un file que se genera,
y te da el nombre de la origenía de esa adecuación de CSS.
Así que es como...
Si puedo mostrar...
Aquí...
Aquí...
main.main.css.map,
eso es un file de source map.
Resistirá todos los files,
y puede darles específicamente
dónde esa adecuación de CSS
está pasando.
Bueno...
Entonces, ¿qué es ese source map en el file de CSS?
Es generado por el file de CSS.
Eso es lo que hace esa adecuación.
Exactamente.
Así es.
Y si te opens...
¡Oops!
O sea, es algo que en DevTools
te ayuda a ver...
Déjame mostrar.
Entonces, estoy en Dev Mode,
y si intento ver nada aquí...
¡No!
Aquí...
puedes ver...
la adecuación de CSS en line 32.
Así que eso es posible,
porque he generado un file de source map.
Eso puede ser...
¿Cómo lo hace?
No, no necesitas hacer nada.
Solo necesitas generar automáticamente
un file de source map.
¿Un file de source map?
Sí.
¿Un file de source map?
¿Un file de React?
Eso funciona...
para CSS y JavaScript.
¿Puedes hacer eso en una página también?
Sí.
Déjame mostrar.
Por qué puedes decir...
no sé exactamente cuál...
pero puedes decir...
source map.
Y necesitas generar un source map
para tu JavaScript.
Entonces, no sabrás exactamente...
nada en ese caso,
pero sabrás exactamente
cómo el file final es creado.
Sí.
Es muy importante.
Sí.
Es muy importante.
Sí.
Así que si necesitas generar esto...
en los settings...
En el file final...
generar un source map...
y aquí...
generar un JavaScript.
¿Puedes hacer algo?
Para eso...
en caso de...
sí.
En caso de que tengas algo...
que es unified...
¡Oh, Dios!
¡No!
¿Dónde es?
Ok.
¿Estás orgulloso de eso?
Es muy diferente.
En caso de que tengas un file de JavaScript
o un file de CSS
que es un minifile...
si clickas en...
muy diferente...
va a...
poner...
Sí.
Es interesante...
saberlo.
Así que, sí,
source map.
En ese caso...
donde estoy...
en el mode de desarrollo...
genero un source map.
Aquí...
¿Puedes hacer algo?
Ok.
Es decir,
convertir todos los files de CSS
en CSS.
¿Sabes de los autofixeros?
Entonces...
¿Sabes de qué?
Cuando necesitas poner webkits...
y MIS...
y todo eso...
y MIS...
y todo eso.
Vendor prefix.
Eso es el nombre en inglés.
Entonces...
esto...
En CSS...
depende...
de cuáles veces...
necesitas poner webkits o MIS...
o este tipo de cosas...
para que estén...
en el browser.
Entonces,
no necesitas hacer eso más...
si usas autofixeros.
Porque...
autofixeros...
pararemos los CSS...
y añadiremos los prefixes...
basados en los browsers...
que necesitas apoyar.
Entonces,
necesitas decir que necesitas apoyar...
por ejemplo...
es el último dos...
modernos browser...
y automáticamente...
por ejemplo...
automáticamente tendrás...
los prefixes...
si necesitas...
ellos.
¿Puedes también...
darles...
una forma de apoyar...
en el browser?
No.
Eso es...
más...
modernizar.
¿Sabes lo que es?
Entonces...
no estoy hablando de los prefixes...
pero más de hacer un curso...
sobre los prefixes.
Entonces...
eso es todo.
Entonces, modernizar...
¿Puedes encontrarlo?
Si puedes...
necesitas apoyar...
en la cabeza...
de tu página...
y...
añadirá...
algunas clases.
Voy a mostrarles el ejemplo...
en ese caso.
Entonces, aquí...
ves algunas clases.
Historia...
JS...
teléfonos...
no sé lo que es...
pero...
estos son añadidos...
por modernizar.
Entonces...
en caso...
Flagsbox no está apoyado...
en el browser...
no será Flagsbox...
pero no Flagsbox.
Flagsbox.
Y en ese caso...
puedo...
tragar...
esa clases...
y...
hacer un vídeo...
o algo así.
Entonces...
algo que explico...
sobre el file modernizado.
Algunas personas...
comienzan...
el file modernizado...
y hay muchas clases...
que están aquí.
Me recomiendo...
encender tu...
file.
Entonces, en esa página...
puedes decir...
yo quiero...
esto...
esto...
perdón.
Quiero tener la detección...
de este tipo de cosas...
y genero...
porque...
algunas personas...
no saben...
directamente...
todo el file...
pero no es necesario.
Bien...
no es demasiado.
Si voy...
demasiado rápido...
donde estaba.
Entonces, para terminar...
eso...
Entonces, Autoprofixer...
es...
una página...
una página web...
y todo el Vendor Profixes.
Eso...
no lo verás mucho.
Cuando escribes...
SAS...
puedes...
en un Vendor, usas un Midsync...
para la diseño de la responsabilidad.
Por ejemplo, si dices...
ok, el cabello...
Midsync...
por ejemplo, en el responsable...
y en el tablet...
voy a hacer eso.
De default,
será para el móvil...
y aquí será para el desktop o tablet.
Y...
si veas...
en la SAS generada...
verás...
muchas redes en tu file.
Esa...
tasca...
que es...
NPA Modul...
unirá...
todas las redes sociales...
y usaremos tu file...
porque...
se moverá mucho en redes sociales...
y unirá todo en solo uno.
Entonces...
esa...
cosa...
puede...
salvar...
no lo sé...
20% del peso de tu file...
o de CSS.
CSS Nano...
para...
minificar la...
CSS file...
esta...
necesito testar más...
pero...
lo que...
está haciendo...
es retirar...
la...
declaración...
que no es usada en tu file.
Entonces...
no sé...
si no pido algo...
se va a retirar automáticamente.
Porque...
en el momento...
usaremos unos frameworks...
CSS Bootstrap...
y tenemos mucha declaración...
que no usamos.
Entonces...
eso automáticamente retirará...
lo que no es usado en redes sociales.
Rename...
porque es un file minificado...
así que...
quiero que haga eso automáticamente.
Si...
si lo pido...
escribirá este source...
en ese momento...
y pido...
un file de CSS...
en ese file.
Y eso...
es automáticamente reloadar...
el browser.
Por favor...
nunca...
nunca funcionar...
sin reloading...
o reloading automáticamente...
porque...
eso es algo que usé...
7 años...
y yo no puedo ver...
a mí mismo...
relojando sin...
porque...
verás mucho tiempo...
a 5, 5, 5, 5...
no usaré eso en el mundo.
Y eso es lo que usamos...
para reloadar el browser...
por favor.
Entonces...
cuando todo está terminado...
entonces...
en ese caso...
no se reloadará...
totalmente en la página...
para CSS...
se reloadará...
entonces...
tu página...
no se reloadará...
el CSS...
se relojará.
Sí, pero ¿no es automáticamente relojado...
para CSS?
No...
se relojará...
un nuevo file de CSS...
en el top de...
los precios.
No se lo reloja...
solo se ve aquí...
muy rápido.
Webpack...
es lo mismo...
para JavaScript...
en CSS.
No se lo reloja...
pero...
si usas...
todo...
el module hot...
se reloja...
en Webpack...
se reloja el mismo...
JavaScript.
Entonces...
no necesitas relojar todo...
en la página.
Sí...
eso es muy interesante.
Pero...
estas cosas...
si...
existen...
usando eso...
en el mundo...
se reloja...
tu tiempo.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
No puedes relojar tu tiempo.
Es somewhere.
Yo me voy a ir debajo de eso.
Sí.
Bueno...
pero puedes ver que es muy uncles...
pero tienes queร
Unahando el mejorещo...
para usarlo...
en qué orden...
¿no?
En el máximo...
運xi...
lo que significa....
dxk muy electronics...
No, no puedes ponerlo antes, ¿sí?
Pero, por ejemplo,
si el logico es convertir en CSS,
Autocorfex,
puedes invertir,
no es un problema,
unificación,
es un orden logístico
que es algo que es...
un obligación.
Entonces,
creo que, sí,
tengo que ir más rápido.
Así que, ya lo he mostrado,
y en tu trabajo sobre...
Sí, es un cheque, es un taller,
pero, si...
Si te cienes un taller, pero sin disfrutar de tu trabajo,
no veo el progreso.
Entonces, el futuro de los cheques de la frontera,
tienes que saber algunas cosas que hay que ver con la gente.
No.
Tengo que trabajar en la versión 2,
ya.
Así que,
probablemente, en el mes,
si no es antes.
Así que, como dije,
voy a poner más links
y explicaciones de cada punto,
el por qué,
para entender por qué necesito aplicar esa frontera.
Es todo por los cuatro equipos.
Tengo algunas personas que me preguntan
si puedo compartir con alguien más
en el equipo y trabajar
en el mismo cheque.
Así que, necesito ver cómo puedo hacer eso.
Eso es un sueño de muchas personas,
un module de NPM
que va a testar automáticamente cada juego.
No tengo ninguna...
una línea de tiempo para eso,
pero espero que
se sienta pronto,
porque recibo muchas demandas sobre eso.
Para ahora, va a ser manual.
Así que,
los cheques de la frontera,
el siguiente cheque
probablemente será este,
el cheque creativo de Frontend Developers.
Así que,
si estás trabajando como Frontend Developers,
verás los diseños web
y, en general,
necesitas ver un montón de cosas
antes de comenzar a encargar.
Si el diseño web
te proporciona las fronteras,
como el peso de la PSD
o el file sketch es bueno,
el gris está utilizado,
etcétera, etcétera, etcétera.
Así que, los cheques estarán así.
No existen any checklists
con todos los diseños que necesitan ser chequitos.
Así que, espero que, en un mes,
se expulsara ese nuevo proyecto.
Ya tengo el Frontend Stash
que está trabajando en WordPress,
pero quiero que trabajemos
y usemos React para eso.
Así que, ese es el website
donde puedes encontrar
muchos lindos usados
para los tools de Frontend Developers.
Pero tengo muchos drafts publicados
en ese website.
Y otro que podría ser interesante para vosotros
es el Frontend Path
que me requiere mucho más trabajo.
Ese proyecto
será
no un cheque,
sino una lista de
todas las cosas
que los Frontend Developers necesitan.
Pero quiero empezar de
nada.
Si eres un beginner totalmente,
¿dónde necesitas empezar?
¿Qué necesitas entender?
Por ejemplo, no sé,
pero
¿cuál es el trabajo?
¿Qué es un server?
¿Qué es un IP Address?
Todas estas pequeñas cosas,
así que...
Exactamente.
Entonces, el propósito de ese proyecto
es para los beginners totalmente,
para saber exactamente,
va a ser una cosa muy pequeña,
por ejemplo,
necesitas entender cómo funciona
tu código editor.
Más de la vez...
Perdón.
Más de la vez,
las personas se instalan en su computador,
pero no entienden cómo funciona,
todas las posibilidades,
las cosas importantes,
así que,
será enorme,
y será para los manageres
para poder
investigar sus equipos
y los Developers.
Pero es que necesitas entender esto,
pero es que necesitas la explicación.
Perdón.
Como dices,
necesitas entender
cuál es el IP Address,
pero si es que necesitas la explicación.
Sí, porque todo es already on the internet.
No produciré nada,
produciré un listo,
y todos los links
para vídeos
y archivos que ya saben
dónde están,
pero creo que...
Sí, el objetivo es...
Si tienes alguien que quiere empezar,
tienes todo lo que necesitas.
Y...
Sí, pero es...
Un trabajo enorme, así que todavía en el progreso.
Entonces,
sobre el proyecto de OPP.
¿Cómo construir un proyecto de OPP?
¿Puedo?
Sí, es bueno.
¿Puedes continuar?
¿Estás bien?
Sí.
Entonces, todo empieza con una idea,
y el camino para el mundo.
Eso parece fácil entender,
pero...
Más de la hora...
Sí, más de la hora,
la gente espera que tenga una idea mejor,
algo perfecto...
Sí, solo lo hago.
Perdón.
Perdón por el trabajo.
Tiene un proyecto de OPP
y se publica en GitHub
o otro website.
No necesitas esperar
para tener la idea perfecta
o para tener todo
para publicar lo que quieras.
He encontrado mucha gente
que está buscando ideas,
están esperando,
están esperando,
el tiempo está expendiendo
y no publican nada,
no compartan con la comunidad.
No esperaba
tener un impacto
con el proyecto de OPP.
En el primero,
fue un proyecto de OPP,
un proyecto de OPP.
Pero en el final, estaba muy sorprendido
para encontrar que ayudó a mucha gente
en el mundo.
Y nunca pensé en eso
antes de publicar el proyecto.
Entonces,
una de las noticias
que le doy es que
si tienes alguna idea,
no hesitate,
hazlo,
publica,
comparta con tus amigos
y tus colegas,
tal vez antes,
pero después,
hazlo y hazlo.
Hace mucho y hazlo
y escribete sobre eso.
Así que,
he expiado mucho tiempo
en Twitter, Facebook
y muchas redes sociales
para hablar de eso.
Eso fue mi primera tuit,
lo recibí también.
Sí, es,
tal vez,
hay unos artículos que publicaron en internet.
No, no, no lo he visto antes.
Yo solo llegué a Protonita,
pero he visto eso también.
Y el mismo día,
fue el segundo día,
publicé el proyecto en el 18,
y el día después,
publicé el Twitter
y por lo que recibió esto,
y no sabía qué sea loss
en Twitter.
ten used hands.
nice no
no se sabe
en esaip.
halibut
un
Es como eso, así que cada día, todas las nuevas aplicaciones, nuevos proyectos,
se publican cada día en ese sitio web, en ese sitio web, necesitas seguir y si quieres
encontrar algún tipo de herramienta para tu trabajo, puedes encontrarlo fácilmente en ese sitio web.
Es un sitio de gran conocimiento.
¿Qué encuentras ahí?
¿Qué quieres?
Una parte de la partida, una parte de la partida, ¿cuál es la partida?
Sí, creo que es.
Una parte de la partida es algo que es muy importante para un proyecto,
para encontrar un proyecto y para encontrar un proyecto.
¿Tienes que encontrar aquí?
Sí, muchas, muchas.
Me presenté mañana.
Me presenté mañana.
Pero encontrarás todas las cosas.
Podrías encontrar games, books, software, web apps, tools de desarrollamiento, tools de diseño de diseño,
todo, no sé, ¿cómo ser más proyectos?
¿Cual es tu proyecto?
No todo, pero encontrarás un proyecto de operación y un proyecto de pago.
Pero encontrarás muchas cosas.
Cada día, publicarás todas estas herramientas.
Así que no es siempre funcionar.
Puedes encontrar un proyecto de pago aquí
y puedes proporcionar un proyecto.
Puedes añadir ese nuevo proyecto aquí.
Puedes ser otro proyecto.
Así que, en mi caso,
mi perfil,
mi pago,
y la lista de fronteras.
Entonces, un tipo llamado...
No, no, no.
Entonces, este tipo, no sé cómo,
añadiré un proyecto en 20 veces.
Y después de eso, no sé cómo,
pero recibí el tweet diciendo, ok,
alguien añadirá tu proyecto en un proyecto de pago.
Necesité...
para crear estas cosas rápido,
porque no existía un logo,
una imagen,
un tipo de software.
Necesité un poco de horas
producir un logo
con esta gráfica
para tener algo en cuenta.
Puedes votar a tu proyecto
y el proyecto con más votos
durante el día que recibe,
como...
como...
Sí, este tipo de cosas.
Y puedes ver que en los medios,
el proyecto con más votos
durante el día,
hay que ser preparados
para hacer cosas
para tener más visibilidad.
Entonces, si tienes cualquier proyecto,
cualquier proyecto,
cualquier proyecto propósito,
para poner en cuenta,
y eso puede ayudar
a que tengas más visibilidad.
Bueno...
¿Sabes Medium.com?
Por favor.
Sí.
Sí.
Medium.com.
Tienes que tener un account
en ese sitio.
Es una obligación.
¿Tienes un artículo en Medium?
Sí, un poco.
Gracias.
So, Medium.com.
So, Medium.com,
es la más grande plataforma
para publicar artículos.
Entonces, si no tienes ningún account,
necesitas crear uno.
¿Puedes ver el volumen?
They changed recently.
It's a...
They changed
before it was like two...
Yeah.
Different.
It was like a...
a white and a black.
Exacto.
Ok.
Ok.
I suggest you to have an account
because with an account you can...
Yeah, you can star some
some articles,
say some articles.
And on Medium,
you have a few different
people or companies
that they can have their own channel.
They pay 80 dollars
and they can have their own channel.
And Freakot Camp
has his own channel.
And they help me to publish
an article on Freakot Camp.
Freakot Camp is
400,000 members.
So, it's a lot of people.
Y...
¿Puedes ver el website?
Sí.
So, Chris Coyer,
que creó
Copen2
proposa que me escribí
un article en Cece Street.
Sí.
Era como Christmas.
Sí, era como Christmas.
Pero...
No.
No es posible.
Pero sí,
yo sé un poco de Chris
desde el año pasado
porque tenía algunos eventos
en Marteos.
Y le dieron
unos acuantes fríos
en Copen
por un año
que nos dieron
o atendido.
Entonces, sí,
cambiamos el email
y le dieron
algo sobre eso.
Ok.
Y hay
algunos.
Entonces, todo esto
es para darle una idea
si mañana tienes
algún proyecto en tu mente,
todas las cosas que necesitas
cuidar.
Entonces,
eso es cuando
se publican
los tricks en Cece Street.
No puedo ver
cuántos likes,
pero es 300 likes.
Eso es para
noviembre.
Así que
recibí
los más
staros en noviembre
en Vietnam
para los trickles fríos.
No.
Sí.
Puedes ver el entrenamiento
este mes.
Entonces,
eso fue el post
y en el noviembre
mi caso,
mis acuerdos.
En el noviembre
en un sitio
sitepoint.com
puedes encontrar historias,
archivos,
intereses,
y tienes
Adam
que publica
todos
los tricks
o cada semana.
Newsletter
y
no pudo creer que
es increíble.
Entonces,
publica dos veces.
Entonces,
en el anterior
Newsletter
ya ha hablado
sobre los trickles fríos
y en ese punto
dice eso,
no sé por qué,
pero
eso es
desde
otro
Newsletter
y eso es
desde
SASS.
Entonces,
todo fue completamente
inesperado.
Y,
sí,
aún no lo creo,
pero
y eso es
SIDEBAR.
SIDEBAR
se publica
por
un tipo francés
que está viviendo en Japón
sobre el nombre
de su nombre,
pero
es un noviembre
daily.
Entonces,
SIDEBAR
SIDEBAR
SIDEBAR
SIDEBAR
SIDEBAR
Y en el final
puedes
encontrar
todo
alrededor de web diseño,
producto,
digital,
web diseño,
este tipo de cosas.
Es todo el día.
Y
sí.
Entonces,
algunos consejos
sobre lo que dije.
¿Puedes ser
muy inactivo?
Sí,
Twitter, Twitter, Twitter.
No.
No tienes un email
en todo el día.
No.
Y lo que quiero decir,
primero,
para mí,
yo y Twitter
fueron obligados,
pero con el tiempo,
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
tú
Tú
tú
no validar algunos requisitos y todo eso.
Creo que es una responsabilidad.
Cuando tienes gente que te da una visibilidad
y un proyecto de estudio,
es un cambio.
Tienes que dar tu tiempo a ellos
si no estás bien,
estoy haciendo un proyecto de procesos
y no me toco más en eso.
Y en caso de que no tengas más tiempo,
puedes colaborar con otras personas
para poder colaborar con otras personas.
Puedes recordar todo el website
y luego hacer tu tuit
sobre los proyectos.
Voy a la página de Facebook
de nuestros fans.
Pero es solo usar esto
para decir que gracias
para algunos web sites.
Por ejemplo,
es un website ruso
que
me dio
en un día,
creo,
700 visitantes.
Y la gente que me dio
fue el que me dio
en los que me dio
en el que me dio
en los que me dio
en los que me dio
en los que me dio
en los que me dio
en los que me dio
700 visitantes.
Porque, como puedes ver,
en términos de usos,
es mucho.
Y lo publicé
hace unos días.
Sí,
quieres saber
qué transito en inglés,
porque no sé ruso.
Pero, sí,
he creado esa página de fans
para,
y me ayudó
a mantener la línea de tiempo
y
un magasín en
Doctor Web
en
Germán.
Y eso.
Sí,
estoy listo para mantener
nuevas versiones también.
Así que, es un ejemplo
de
los clientes.
Entonces,
en el 4 de diciembre
el máximo que tenía
fue 5.000
en un día
o
posible.
Fue porque de algunos
de los blogs que me dio
un link
a la página.
No sé si fue un sitio o un río,
un layer diferente.
Es menos,
pero, sí,
es tan activo.
Pero, sí,
podría ser
más cuando voy a lanzar
una nueva versión.
Y aquí están
los 5 países.
Estuve muy sorprendido
por la rechazada.
Tienen
un montón de versos, es increíble.
Yo
fui a
la versión social media.
Sí,
creí un account
ahí.
Y yo escuché
algunos comentarios.
Ah, están aquí.
En algún post,
puse sobre los contactos,
pero me sorprendía porque
muchos de los versos
están en la versión social.
Entonces,
sí,
es más o menos
lo que
sí.
Quiero compartir con
usted sobre esto.
¿Quién es la pregunta
antes de que
veas algunos ejemplos?
No.
Muy bien.
Pero,
me sorprendía,
me sorprendía.
Yo vi un contacto
y me pregunté
si tenía un audio
o si tenía un audio.
Es muy bueno.
Pero,
es algo
que todo el mundo puede hacer.
No es
un proyecto
que se aporta
para todos.
Y, por cierto,
cada idea puede ser
una buena idea.
Pero,
por ejemplo,
el
cheque creativo
nunca es algo.
He estado diciendo
a mis diferentes equipos
durante años
y,
pero nunca he encontrado a alguien
un cheque creativo
así como eso.
Supongo que el cheque
tendrá mucha gente también.
Y ese es el objetivo.
Si publicas un proyecto
generalmente
para ayudar a
personas
a tener problemas
o un problema,
todos estos métodos
que escucharán,
que actúan,
una manera de hacer cosas
rápido
y con
algo fácil.
Así que,
todo puede ser
un proyecto principal
y puede ayudar a mucha gente.
Y
hay mucha gente
que te gusta
en la frontera,
que no sabe dónde comenzar
o qué hacer.
Y,
perdón.
Pero,
eso es...
Me sorprende, porque,
porque estoy trabajando con Frontend,
me sorprende,
muchas personas en el mundo
están en el mismo
estado
y están buscando información.
Mucha gente.
Y más y más personas
están buscando.
Por ejemplo,
en un ingeniero,
hay un gran gato.
Y
en el mundo hay mucha gente que tiene.
Y,
y,
muchas de los buenos desarrolladores
no
vienen de universidades
o escuelas.
Pero,
lo que me gusta,
es que, si has desarrollado algo,
no te vas a aprender,
no te vas a dejar de aprender cosas nuevas.
Y,
si la comunidad es enorme,
te aprenderás siempre algo nuevo,
de otras personas.
Incluso,
tienen menos experiencia
que tú, o más experiencia.
Eso podría ser interesante
para vosotros,
recursos para Frontend
los primeros.
Así que,
para tener una pequeña lista,
no es
lo que pienso, pero
decidí no poner todo lo que es online,
es lo más importante.
Entonces, hay links
con algunos emoticons,
sobre
cursos y tutoriales,
y juegos,
y guidelines.
Y creo que puede ser interesante
para
CSS,
Documentation,
Alliance,
Squish Challenges,
Articles en French 2.
Eso podría ser muy interesante.
Así que,
es esencial
contenido que puedes encontrar
en internet sobre
Frontend,
y otros.
Probablemente publicaré
una lista más adelante,
pero por ahora
voy a dejarlo.
Es un thought.
¿Puedes llamar Comet?
¿Puedes llamar Comet?
¿Puedes llamar Comet?
No estoy seguro de que lo voy a poner.
Sí, Comet, Comet.
No, porque creo que quería
ponerlo en la segunda lista.
No he puesto todo,
no he puesto todo,
sé que en el website,
por ejemplo,
la gente me dijo
por qué no pudo
poner
algunas cosas, pero
pensé que
podría ser usado
por muy grandes personas.
No quiero poner
muchas cosas,
por eso es
muy pequeño.
Este website
es esencial, si no sabes
cuáles son sus web
y algunas de las noticias.
¿Sabes que imagen
de dónde viene?
El mapa de los desarrolladores
fue creado
dos años atrás, creo.
Pero cada año
ha cambiado el año.
Así que eso podría ser
muy interesante.
Es un mapa de los desarrolladores
para
lo que necesitas
saber.
Eso es para la frontera.
El nombre es WebDeveloperWorldMap
2018.
Sí, si quieres
saber.
Y tienes
para backend, también.
Eso es para la frontera
y eso es para backend.
Y tienes
WebDeveloperWorldMap 2.
Así que eso es muy interesante.
Es
que fue creado dos años atrás, pero es
muy relevante.
Así que
primero tienes que entender
las bases.
Eso es muy importante.
Es
un JavaScript
que es un JavaScript.
Después de eso, tienes
webdesign,
CSS.
Aquí hay algunos ejámenes
de CSS.
Así que tienes un Trap,
pero tienes estos dos.
Y tienes mucho más.
Así que Sass less
timeless
post-CSS.
Sass, ¿qué sabes sobre eso?
Post-CSS.
Así que
eso es un preprocesor
que es un preprocesor
que es un preprocesor.
Así que
la diferencia es
que escribes
un file
post-CSS
convertir
un file de JavaScript
aplicar
algunos plugins
y en el final
tienes un file de CSS.
Por ejemplo, auto-prefixer.
Post-CSS
file
y puedes aplicar
muchas otras cosas. Por ejemplo
post-CSS
y
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.