DEV Community: Horacio Herrera

¿Cómo consigo llamar la atención de mis clientes web?

Horacio Herrera — Tue, 28 Sep 2021 22:14:03 +0000

(Imagen principal por Samson via Unsplash)

Tanto si lo que quieres es preparar una propuesta para un cliente actual, como para llamar la atención de posibles futuros clientes, estos pequeños pasos te pueden ayudar a consolidar y darle el mayor beneficio a tus clientes:

Busca que tipo de clientes te interesa tener

En esta fase de búsqueda de clientes, tienes el privilegio de poder escoger que tipo de empresa o clientes quieres mostrar en tu portfolio. La manera en la que busco estos potenciales clientes es:

Productos o servicios que uso actualmente
Empresas amigas o medianas
Marcas reconocidas en mi ciudad.

Te recomiendo que la empresa sea suficientemente grande para asumir un proyecto web nuevo pero lo suficientemente pequeña como para aceptar una propuesta tuya o de una empresa pequeña. Algo que te puede dar pistas es buscando los tipo d e proveedores que tienen actualmente, tanto a nivel tecnológico como en cualquier otro sector.

Análisis tecnológico de su web actual

Aquí es donde viene la parte “divertida”. La suerte que tenemos es la variedad de herramientas que tenemos disponibles para hacer un análisis lo bastante convincente como para tener una idea clara de la experiencia de lo que los clientes de tu futuro cliente. Las herramientas que te recomiendo son:

Lighthouse
Speedcurve
WPO Stats

Una diferencia entre ambas, es que Lighthouse se va a ejecutar localmente, en cambio Speedcurve puedes no solamente cambiar el país o region en la que se va a ejecutar el test, sino que puedes programar la ejecución periódicamente. Así puedes sacar una media de todos los resultados y obtener información más fiable.

Búsqueda de problemas

Las razones principales por las que nos tomamos el tiempo de rellenar una reseña sobre un producto o servicio regularmente son por experiencias en los extremos, o muy buenas o muy malas. Tu objetivo es encontrar las muy malas que estén relacionadas con la web de tu posible cliente. Te pueden dar pistas de qué cosas deben mejorar para que sus clientes estén más felices!

Comparación con otro (o otros) competidores

Seguramente tengas buenos datos sobre el análisis técnico, pero seguro pueden tener mucho más impacto si los comparas con alguno de sus competidores. Quizás lo mejor seria compararlos con algún competidor o empresa del sector que sea de talla mundial, para que la comparación no sea tan violenta :)  Otra ventaja de que la comparación sea con algún competidor grande, es que ellos seguramente estén usando alguna de estas tecnologías y puedan ver el resultado de su uso. Aquí es donde WPOStats es útil!

Análisis de producto (opcional)

No estaría de mas hacer un poquito mas de búsqueda y entender bien como la web puede ayudarles a hacer felices a sus clientes y conseguir más.   Generalmente una página web debe responder claramente a estas tres preguntas:

¿Quiénes son?
¿Qué hacen?
¿Cómo los puedo contactar?

Si la respuesta a estas preguntas no es clara y directa, quizás estén perdiendo clientes por el camino.

Primer email de contacto

Una vez tengas toda esta información, estas listo para buscar como contactar a la persona adecuando dentro de la empresa e informarle. Este es tu primer contacto con ellos, así que no puede ser tan hostil como mandarle todo tu análisis en PDF adjunto con todas las recomendaciones!, tenemos que hacerlo por partes.

Te recomiendo que de todos los puntos de mejora que hayas encontrado, encuentres el que requiera en menor esfuerzo de parte de ellos, pero que tenga el mayor beneficio o retorno de inversión. Llamémosle “Quick Win”. Algunos ejemplos:

Optimizar el tamaño de las imágenes que usan en la web
Forzar HTTPS en la navegación de su web
Resaltar el “call to action” principal

en cuanto a la redacción del email, puedes seguir esta guía:

Tu presentación: muy corta
Algo que te gusta de la empresa (es fácil encontrarlo si es un producto o servicio que usas)
Comentas el análisis: Mencionas que has hecho un análisis de su presencia online y que has encontrado unos puntos de mejora clave para que sus clientes tengan una mejor experiencia (el enfoque desde el punto de vista de SUS CLIENTES es importante)
Presentas el “Quick Win”
Despedida: “Espero que esto les sea de gran ayuda y si necesitan alguna ayuda mas, no duden en contactarme”.

Ya está 🎉. No tiene que ser demasiado largo, Es importante respetar el tiempo de los demás también. Recuerda redactar el email de la manera mas positiva posible, y no recalcando las cosas “que están haciendo mal”. Una forma que uso para plantear algo malo de manera positiva es reformularlo en pregunta.

Yo ya no me dedico a freelance, por eso me pareció interesante compartir mi estrategia cuando buscaba clientes web! :)  Si tienes alguna pregunta o algo no quedó muy claro, no dudes en contactarme por DMs o email!

P.D.: Si entiendes inglés, aquí tienes una charla que hice hace unos años para Gatsby Days donde comentó un poco más en detalle estas técnicas!

Want to learn Web Design?

Horacio Herrera — Fri, 20 Aug 2021 22:42:23 +0000

List of courses to get started with Web Design from Scratch. And some advices too!

Recently my sister-in-law asked me for resources to learn web design. She has no coding or design background, so here is a list I found that could help anyone to start getting their feet wet on the topic.

Like I said to her, beware! you are entering an industry that is in constant change, evolution and quite fast!. make sure you don't get overwhelmed with the amount of things to learn and to do. It's better to find a learning path and pace that works for your needs and life constraints.

Before the list of resources, I want to give oyu some advice about how to get started more effectively in web design (and in anything really). This Two things helped me a lot when I want to learn something new and make sure I stay up to date with the newest trends on the topic:

Take notes while you are learning: maybe you thing you are not a notes person, but trust me, you will regret not taking notes while learning anything. If you need advice on how to take notes, please send me a DM on twitter!.

// Detect dark theme var iframe = document.getElementById('tweet-1429026563622846466-843'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429026563622846466&theme=dark" }

Get involved in the web communities: Your learning path will be much easier if you find communities with people that are also learning and also experts that can help you with some guidance and doubts. You can find a lot of them depending on the language.

// Detect dark theme var iframe = document.getElementById('tweet-1429026564931530752-333'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429026564931530752&theme=dark" }

Learn in Public (BONUS): Sharing all you are learning not only will help you solidify your knowledge, but also start creating a reputation in your new journey. The best one I know doing this is Shawn Wang (@swyx). He shares mostly tech related content, but his process is applicable to any other field.

// Detect dark theme var iframe = document.getElementById('tweet-1429026566248484867-930'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429026566248484867&theme=dark" }

This list of links are not sorted in a particular order, so feel free to skip some if you see like:

Hack Design

I remember checking this one when they started. it was via emails, but now it seems that all the lessons are available in the website. They also have other lessons so feel free to check tehm out too. website.

Ultimate web design course by Webflow

this one seems to be very complete. I'm afraid is very focused on their tool but judging by other content I've seen from them seems legit. They also have other lessons so feel free to check tehm out too. website.

Web design in 4 minutes by Jeremy Thomas

This one is quite short and I love that is very visual and to the point!. Not that interactive, but I found it really cool to learn by watching the result. website.

Free Online Course "Introduction to Web Accessibility"

Accessibility is a topic that is considered an after-thought and it should not be that way. Great designs are not only visually appealing, but also functional and inclusive. and Accessibility is not only about making the web easy to use for blind people. website.

Designing for Web Accessibility

This one seems related to the previous one. worth checking it out. website.

Learn Design by Figma

I love that tools like Webflow and Figma create content that helps people learn about the greater topic on what their tool is all about. Figma is the tool I generally use now to create designs, and this seems to be a great resourse to get started with design. website.

Wrap up

I know there are a bunch more resources to get started, but this are the ones I found more interesting and from some of the sources I think are important to follow. If you took one of these courses please let me know your thoughts on it!

Do you know other courses/resources worth mentioning here?

Please send them to me so I can add them to this post!

Why I should care about Mutation Testing?

Horacio Herrera — Wed, 16 Jun 2021 21:37:37 +0000

TLDR: checkout this video made by Thomas Chaplin with a great introduction too! (Spanish video coming soon!)

Having as much confidence as possible in the code we ship to production is crucial to make sure our customers and users are happy and we can sleep well at nights.

One way we gain confidence is by testing our code. The reality is that testing is hard, and sometimes we are not sure if our tests are well written. What if I told you that you can avoid this by testing your tests? 😱🤯.
Here comes Mutation Testing 👹

Mutation testing is a technique that helps you test for multiple outcomes of your code. It analyses the code and make "changes" (mutates/creates a copy of your source code) to see if your tests catch all the mutations added.

It uses the "mutant" analogy. The idea is to kill all the mutants to make sure your tests are covering all (well, almost all) the possible edge cases and avoid pushing bugs to production. Let's see it with an example:

An Example

Let me explain it with the example from the stryker mutator framework (we'll talk about that later).

Imagine you are building a casino app, and you rely on the above function to not sell anything to minors:

function isUserOldEnough(user) {
  return user.age >= 18;
}

the mutation testing tool will find the return statement and decided to "change it" in several ways:

/* 1 */ return user.age > 18;
/* 2 */ return user.age < 18;
/* 3 */ return false;
/* 4 */ return true;

// ☝️ this are mutants!! ☝️

after hte mutants are created, your tests will be executed one by one againts all your mutants. If the test at least fails once, we say the mutant is killed. and that's good!

If after running our tests the mutant is still alive, then that's an indication that we are not covering some cases that might endup being bugs in production. The better your tests, the fewer mutants alive.

isn't it cool?

Why Mutation Testing and not Test coverage?

The difference between test coverage and mutation testing is that test coverage checks How much code was executed while Mutation testing check How you Interact with it.

How Can you start using Mutation Testing?

there are a couple of tools you can use depending on your codebase language. the ne I'm using and learning from is Stryker mutator which is good for JavaScript, Typescript, Scala and C#. You can go and checkout the Getting Started with StrykerJS and give it a try!

I also have some notes about my learning process here where I have a list of resources and videos about it along with all my cool findings!

I'm working on a couple of examples and videos about it so make sure you follow me on twitter for more updates!

Gimme some feedback!!

Did you like Mutation testing? are you willing to implement it in your codebase? are there any doubts I can help you solve? Please Add some comments! 👇🏼