build shit is important, but document your process of building is the next level… and here’s my take on that.

As I explain in my last post, I have anything publish that can validate all the things I can do or know, and these leads to making really hard to convince someone to pay you money and trust their projects on you. So, this is my plan: I’m going to start a couple of projects where I will be documenting and sharing all my findings.

Why you are doing this Horacio?

Well, that’s a good question. Why in this particular moment, where I have just one client and I know I will struggle to pay my bills that I commit to more work, that it’s not going to be paid?

The answer is simple: Why not now?

I’m 100% sure that, if I do this couple of projects (apart that are family projects and I will help the family business) I will learn a lot on the way and eventually, will attract more clients. Because people are really curious not only about what you do, but also on HOW you do things.

The How is so important, because it gives you a clear idea how someone solves problems, how is their thought process, what he/she does first and how it evolves until the problem is solved.

The other reason I’m doing this is because I’ve failed in the past trying to do this, so making this public will force me to make it better i guess? 🤷‍♂️

What are you planning to learn?

There are a couple of technologies I want to master in the next couple of months, this technologies are the pieces I need (I guess) to build the projects I’m planning to learn so here they are:

• Gatsby
• AWS Amplify
• React Native (& expo)

Another reason I chose these technologies, is because they are amazing, the support is incredible and the documentation is pretty good. I will use gatsby to build the websites/apps, AWS Amplify to build GraphQL APIs, Lamba functions, hosting, React Native to build apps… and a bunch of crazy things I can do with them 🤟. and of course testing!!

I’m still trying to choose a Headless CMS, so if you know one that goes nicely with these three, please let me know!

I will also do things that are not so technical, like UX, design, marketing, business.. I will try to cover all the spectrum of a product End to End.

I know this is pretty ambitious, and of course I will not be able to complete everything, but at least I will share those things too, even I did not do it directly.

If you follow me on twitter and github, you will see I’ve being working on stuff already, soon I will start posting not only blogposts but also videos! (I need to setup things at home first).

I will publish (almost) everything I will do within this apps, as I learn I want to show everything, this is the ultimate way of learning not only for me but for everyone else.

I’m REALLY EXCITED ABOUT THIS!!, hope this is something that can also help the community and others in the same situation as myself. remember, the most important things is to keep doing things. don’t stop. and eventually you will succeed…. at least this is what I’ve being told!

• Follow me on Twitter
• Follow me on Github

Here I leave you with some wisdom from Swyx about Learning in Public:

shawn swyx wang 🌟 on Twitter

Learn In Public.

See you on the next one!

P.S.: My plan was to start posting from my own website, but things didn’t went the way I wanted :( hopefully for the next one this will be fixed…but hey, this is part of the process, that issue did not stop me from sharing with you this week right?

Lately, I’ve being struggling with bad things happening to me: All the CFPs (Call For Papers) I submitted where rejected, I have lost one of my biggest clients, that leads to a not so great financial situation, I got my first bad OSS experience, I stopped doing some good habits, to mentions some of them… It sucks.

But you know what, it’s OK.

Everyone have some really hard and bad moments in their life, That’s a fact. The important thing is HOW you receive those bad moments and react to them. How quickly you shift your mindset from a negative one to a more proactive and start moving forward again. This is the key.

Maybe you think you lost something important, and you feel really bad about it, but also think about how much things you have that others don’t, what makes you feel grateful. For me it’s my family, and all the opportunities I have available to explore. I’m so lucky to have a family that love me the way my wife and daughter love me, I love my job and what I do, I’m also the freedom to work whenever I want, wherever I want. (My intent is not to brag about myself, please don’t take it like that)

Another thing that helps me shift my mindset, is to listen to people that I admire and motivates me. people like Jocko Willink, CT Fletcher, Tony Robbins, Eric Thomas, Inky Johnson, Gary Vee and a couple more. These people helped me to stop complaining about whatever is happening to me and take action. I think it’s pretty important you find something that help you keep the motivation high, because this is what drives you and keep you focus.

So, What’s next?

One of the reasons I got rejected from all my CFPs, I guess is because I don’t have anything out there that can validate my knowledge on certain topics.

This is why I’m going to start some Family projects, that will help me Document my journey on building and learning new things. I’m going to: Build an Application for my dad’s company and build two ecommerce: one for me and one for my father in-law. Learning by doing is one of the best ways to learn, it force you to take risks and figure out complex problems in the least time. Also with this, I’m following the I’m really excited about it! :)

Basically, I decided to STOP complaining about what’s happening to me and START taking (different) action to get a different result.

My goal is to do a weekly post about something interesting I did for any of the three projects, from UX, design and design systems to Backends, APIs, data-structures, testing and much more. Maybe I will post more than once a week, but I want to keep it approachable and keep consistent. down the line I can do some more crazy stuff. I’m keeping it simple from the beginning this time.

Hope this is interesting for someone, specially for those who where rejected or who is having a hard time now. this is my way of encourage you to get up and keep moving forward. Thanks for reading and see you on the next one!

Let’s set the tone with a video from Jocko…GOOD day!!

Finger-based biometric platform FingoPay approached us to help them with their high-tech biometric payment system earlier in 2018 and, needless to say, we’ve had a blast helping them creating a proof-of-concept digital product that tapped directly into their finger-scanning technology using React and React Native.

Fingopay has developed a sophisticated Vein Recognition scanner (patented) used as a gateway for a payment system they wanted to implement in Pubs and bars around London. You can find out more about their technology here ⬇️:

The project goal was to improve & simplify the onboarding process, so we did a 1-day hackathon to build a functional prototype for the client.

Since we only had 1 day and the client only had a web plugin to connect to the finger scanner, we built the prototype using React web. We showed our fast-build working web prototype to the client and they LOVED IT!. This is how we started our two 1-week sprints in the pursuit of building an effective onboarding process.

We approach projects in a very “Lean” way (dah!!, it’s in our name XD), this means our process consists of quick test-build-learn cycles. The cycle always starts and ends with the User, and thankfully we have one of the best UXers in the business working with us! If you want to know more about Paul’s part on the project you can find it here

Let’s talk about the technical challenges

Since we are working with hardware, we started by looking for the best approach to create a maintainable and secure way to connect with the finger scanner, and here’s where React Native comes into play.

React Native provided the smooth UI the client required and enabled us to connect to the Android tablet that hosted the C++ biometric scanner plugin.

The Android plugin worked in the following way. It turned the scanner on, scanned the finger veins of the user, and produced an encrypted code that contained the information of the finger veins pattern in question. Then the encrypted code was sent to an API where a matching algorithm resolved the finger to a registered user.

When building products in the digital identity space there are very important features you need to support, such as facial-recognition, scanning documents like IDs or passports, credit cards, etc. React Native was the best solution for the job since all the features we needed to build were accessible via native modules. And since we are React lovers, it was a win-win situation ;)

Native Modules: talking to the finger scanner

The way React Native lets you communicate with native modules and APIs is via a Bridge. Imagine this as a gateway between the JS thread (your React Native app) and the UI Thread (platform native thread). All the React Native APIs use it in order to send instructions to the native part, and create your UI, for example (using the Yoga Layout engine).

Since there’s no Native module for Fingopay’s finger scanner. We built one and enabled a React Native app to connect with the biometric scanner, which was super cool! If you are curious about how we did it, we simply followed the amazing documentation instructions in the React Native docs.

The most important part of the Native module integration is this part:

This piece of code is the way you “expose” this method to be called from the React Native side (JS Thread).

Here’s our Native module working:

Now with the Native module ready, we were able to start a scan, read data, get the result and stop scanning from our React Native app 🎉🎉

The Credit Card Recognition

With the first (and most important) feature built, we needed a way to easily and safely scan the user’s credit card to associate his/her payment information to its newly created unique-finger hash. We tested some Services and we ended up using card.io for credit card recognition owing to its support for React Native.

The hardest part was to set up the camera in a way that was able to scan the credit card with low light since the space where the tablet’s going to be is in a Pub, but nothing complex if you are familiar with Linking Libraries into your app. Usually, the Library you are linking includes specific instructions on how to do it (well, most of them 😉)

ID Recognition & Face Detection

Because we are dealing with Payments and Alcohol, legal issues needed to be taken care of right from the outset, and one important challenge that automatic payment systems have is certifying that the person “doing” the onboarding process, is the “actual” person from the ID & credit card provided.

To enable this we implemented one more step in the process that takes a selfie of the person doing the onboarding and matches it with the picture in the ID provided. Initially, this process was done manually, but everything was prepared (all the automatic services were contacted and tested) for when the product went live.

Result and Next Steps

The whole process of building and iterating took us around 1 week total dev time, spread across the two 1-week sprints. We did multiple testing sessions and a lot of trial and error until we had a perfect MVP for the client to sell the solution to their partners. Total win for us and our client ❤️

Here’s the final prototype (screens) we built:

If you have any technical questions about the stack mentioned please send me a message, leave a comment here, or reach out to us via social media!

Thanks for reading 🙏 🙏 🙏 🎉 🎉 🎉

Looking forward to hearing your thoughts and insights!!

I love pair programming. This is what of the practices we encourage to do in our trainings in ReactJS Academy, and also at LeanJS we do it regularly.

Couple of weeks ago we where planning to rebuidl our websites using gatsby, and then I saw this:

Jason Lengstorf on Twitter

This was a ton of fun! Anyone else want to pair up? @kylemathews, @kurtiskemple, @mdashallanson, @mipiechowiak, and I are all opening up a few one-hour slots for screen sharing/pair programming on your @gatsbyjs projects - DM to grab your slot! 💪💜 https://t.co/O3lKUQ79c4

I didn’t have to think about that twice — I booked it! It was funny because the week before this tweet I was talking to Alex Lobera and Richard Moss about a similar idea I had with ReactJS Academy. We want to do something similar to pair programming with developers who want to learn React (if you are interested please send me a DM!)

My experience with Gatsby prior to this pair programming session was low, and my concern as a designer was how to create animations and page transitions with it. I thought maybe it was different from what I did in the past, and that’s why I wanted to ask. It turns out that after we talked a little bit about it, and Jason not only answered my questions, but also helped me make my first contribution to Gatsby! 🎉

Here are my thoughts and experience with this. I hope this help you to do it and start contributing to projects as amazing as this one!

How did you feel before, during, and after pair programming?

Before I was a little worried to be honest :). Now I feel more confident contributing to the project. Actually, I just made my second contribution to it today!

Also, usually when I’ve done pair programming, one person “drives” (types and programs) and the other one helps and makes sure there’s no typos of errors. In this pair programming, we both drove during the whole session and we were both really involved in it. I enjoyed this and enjoyed how we improvised throughout the process.

What was the most surprising thing about pair programming?

The most surprising thing to me was the willingness of Jason to spend time with a complete stranger to help me with my questions. I’m grateful that he spent this time with me. Thanks man!!!

Jason was really patient to explain the parts I did not understand about Gatsby and also he walk me through the project perfectly.

On a scale of 1–10, how likely are you to recommend it to a friend? (1–10 scale)

10. No doubt. And higher than 10 if you have never done pair programming. Just take a simple task and go! It’s not about the code you will write, but the experience of developing with an expert. It’s just amazing :)

Again, thanks Jason Lengstorf for the time! and thanks Gatsby for this amazing project!! 🎉

again, thanks Jason Lengstorf for the time! and thanks Gatsby for this amazing project!! 🎉

After react-europe, I’ve become obessedly in love with React Native and how it helps to make the shift about treating the web as another platform, and not the primary one for React. Also I’ve been really interested into design systems and how not only to design one but how to implement it with React.

The problem I have with current UI Libraries

I like UI Libraries, it helps to Build stuff fast and forget about aesthetics when creating your projects. But almost all of them, forced you to structure UI and elements their way, and every time I wanted to do something slightly different from one of the components it was a pain in the *ss. Maybe I’m not that smart to customize a UI library but this happens to me all the time.

I want the ability to use a UI Library, but don’t want it to force me to use its semantics or its styles, I want that freedom sometimes…

So!, that being said, I create a codesandbox with a proposal for a UI Library of Universal Components that have a base structure and styles, but also give you freedom to change not only the styles but the semantics (HTML). The way I give that freedom is with the render prop pattern. below its the demo:

Of course this is a PRETTY BASIC EXAMPLE, but hopefully this helps to explain my idea.

some cool things about this:

• universal components, same components, multiple platforms
• base design system customizable
• FREEDOM to change semantics on components
• styles composable

some things I may implement:

• Theme Provider with a specific Shape to follow a design system
• styled-components 💅
• expose base UI animations
• develop it with a type system like TypeScript or ReasonML
• of course, storybook!

and that’s it! I shared a twitter thread couple of days ago about this:

Horacio 🇪🇸🇵🇦 on Twitter

Does this sounds interesting to your use case?" I'm working on some apps that I know this will help a lot, but maybe this is just me and this is completely nonsense... (5/5) here's a basic example ➡️ https://t.co/ECOOCLCt9t I would love your Feedback! 😬

If you want to know more about universal Components, I recomment you check this talk about it, and ask kurtiskemple and Samantha Bretous (thanks guys!)

What are your thoughts? do you think this is useful? what can be exposed apart from the styles and the theme?

thanks for your time!!

you can check out one example project here: https://snack.expo.io/@horacio/my-project-setup

In the next posts I will try to explain a little more about this file structure and also how I will try to reuse components as much as possible between platforms (Android, iOS, web…)

thanks for your time & hit me with any questions if you have any!

Nota: Si quieres leer la version en castellano la tienes aquí: https://medium.com/@hhg2288/design-sprint-2-0-lecciones-aprendidas-7201fcb31ef6

Last week I had the pleasure of running a design sprint as a facilitator for the company Brunel.

I’ve listen about this methodology in the past but was not that familiar to me. Also I was part of one design sprint long time ago, enough for me to forget almost everything!. To be honest, I was not confortable doing it since I was an outsider, I thought that was a big responsability for me, but they convinced me to re-read the book & re-study the whole thing & helped them to do it.

I think it was an amazing and useful experience, so this post is to tell you my experience, what I learned & a couple of reasons why you need to try running one Design Sprint in your company/business/startup.

Why Design Sprint?

Create a product is hard. Spent months developing something that you are not sure if someone will find it useful is expensive. Design Sprint helps you to test your Hypothesis & assumptions in less than 5 days. I think its a good idea for every business financially 💸💸

You can test (almost) everything!

Yes but my idea its impossible to build in less than a week Horacio, simply its impossible…

Remember that you are testing an hypothesis, not creating your whole idea.

It’s not necessary that you have to build your whole app so you can test it, with one part is enough. Believe me, even Robots where tested in a week! (that’s a book reference)

Day 0: Set the Stage

Before we start, I want to clarify some things:

In the book, it explains a 5-day Sprint. Because some time issues, we needed to finish the design Sprint on Thursday, so we needed to shrink a 5-day process into 4 days.

Luckily for us I found a new version of the sprint: Design Sprint 2.0 🎉

The previous video explains how you can obtain the same results from a design sprint with new techniques & maximizing time as much as possible.

As a facilitator, you are responsable that the team accomplish their objectives in the scheduled time, you are like the moderator of the whole session. When I started learning about it the most important for me was not what we need to do, but why we need to do it, the main objective of each activity; This helped me to feel confortable explaining the team about it.

Luckily for you!, if you want to learn the same as I did, the awesome guys from AJ&Smart created a Youtube channel with everything you need to know about Design Sprint 2.0 :). Below the link. Also I recommend you to read the book.

AJ&Smart

Some important things to keep in mind when starting a design sprint is the team selection, all the materials needed & most importantly: get a clock to keep time!. You can find more things needed in the book or in their youtube channel.

In the next posts I will explain in more detail every day so you have a better idea of them and all the steps!

Do I recommend doing a Design Sprint?

Absolutely. The whole process works not only to validate hypothesis, but you can use all this tools and exercises for every decision in your company or team.

Even if you are starting a new project, in the middle of one or you are ready for production, doing a design sprint will help you not only to understand your users better, also to get a better knowledge of the whole process from a business point of view.

If you are interested in more or have any questions, please ask me anything at me@hherreag.com or leave a comment bellow!, will answer them as soon as I can.

until the next post! :)

Do you want to run a Design sprint in your company/product? I can help you with that!, please contact me at me@hherrerag.com and let’s talk!

Note: if you want to read the english version, you can go here: https://medium.com/@hhg2288/design-sprint-2-0-lessons-learned-9d8656e41a53

La semana pasada tuve el placer de formar parte de un design sprint como facilitador para la empresa Brunel.

Yo había escuchado hablar de esta metodología pero no estaba muy familiarizado con ella. Participé en un design sprint en el pasado, suficiente tiempo para no acordarme de mucho!. Sinceramente no me sentía cómodo, pero a pesar de esto, me convencieron para que volviera a refrescar la memoria y ayudarles a ejecutarlo.

Creo que ha sido una experiencia BRUTAL y útil, y en este post quiero contarte mi experiencia, lo que he aprendido y algunas razones para que intentes hacer un Design Sprint en tu empresa/negocio/startup.

Por qué Design Sprint?

Crear un producto es difícil. Pasarte meses desarrollando algo que luego no estarás seguro si alguien lo encuentre util o lo use es muy costoso. Design Sprint te ayuda a probar estas hipótesis en menos de 1 semana. Creo que es una buena idea para cualquier empresa y mas económica! 💸💸

Todo (casi todo) se puede probar!

Claro pero mi idea es un producto que seria imposible probar en menos de 1 semana Horacio, simplemente no se puede…

Se trata de probar una hipótesis, no de crear tu idea completa.

No necesariamente tienes que crear todo el producto para probarlo, con una parte es suficiente. Créeme, hasta Robots se pueden probar en una semana! :) (Referencia del libro)

Día 0: Set the Stage

Antes de todo, quiero aclarar algunas cosas:

En el libro, se habla de 5 días de Sprint. por temas de tiempo en el equipo no podíamos hacer el sprint de 5 días porque una parte del equipo venía de Londres, teníamos que hacer todo el proceso en 4 días.

Por suerte encontramos esta nueva version del Sprint: Design Sprint 2.0 🎉

en el video explica como podemos conseguir los mismos resultados que en la version original usando nuevas técnicas y maximizando el tiempo.

Como facilitador eres encargado que se cumpla todos los objetivos en el tiempo marcado, eres mas que nada el moderador de toda la sesion. Cuando empeze a prepararme una de las cosas mas importantes para mi no era entender todo lo que habia que hacer, sino por qué habia que hacerlas y cual es el objetivo de cada actividad; esto lo necesitaba para poder sentirme comodo y explicar bien cada una de las actividades.

Por suerte para ti, si quieres entender todo esto, los chicos de AJ&Smart tienen un channel de youtube que es crema para aprender todo sobre Design Sprints :) abajo el link. Aparte de volver a leerme el libro, esta fue una de las fuentes principales de informacion que use para prepararme. Lo recomiendo 100%!

AJ&Smart

Cosas muy importantes a tomar en cuenta son la selección del equipo, del espacio, tener todos los materiales necesarios y sobretodo y muy importante: Tener un reloj para llevar el tiempo. Éstas y otras cosas las puedes encontrar en detalle en el libro o en los videos.

En los próximos posts comentaré con mejor detalle cada día así tienes una idea mas clara de todos los pasos!

Recomiendas hacer un Design Sprint?

Absolutamente.Todo el proceso funciona no solo para validar una hipótesis, sino que puedes utilizar todas estas herramientas y ejercicios para cualquier decisión o trabajo en equipo. Vale la pena 100%.

Ya sea que estás empezando un proyecto, vas a medio desarrollo o ya estás en producción, hacer un design sprint te ayudara no solo a entender mejor a tus usuarios, sino a conocer mas en detalle todo el negocio desde el punto de vista de la empresa.

Cualquier pregunta o duda que tengan no duden en contactarme a me@hherrerag.com o deja tu comentario abajo y lo responderé en la medida de lo posible!

hasta el siguiente post! :)

Te interesaría hacer un design Sprint para tu proyecto o empresa? Cuéntame que tienes en mente para poder ayudarte a me@hherrerag.com

Henry Zhu on Twitter

I've left my job to work on open source full time! I just launched a Patreon at https://t.co/cYPsEme8iE so if you want to support my future work please check it out! And here's a post to explain in more detail: https://t.co/yBNo8Hf5Zr

so I was starting a new project with React Native and I needed to create a custom native module, so I went to the official documentation & started reading…

What I found was for me, a web developer with design background was hard to understand some of the steps on the tutorial. I lost around 45mins figuring out where I needed to add the code the tutorial was telling to add. I don;t know about you but for me 45mins it’s a lot of time!

At this point I could do two things: complain on twitter about it to the maintainers, or help improve the documentation so someone else can get a better experience following the tutorial.

It took me 20mins to update the documentation & create a pull request, I did not needed to clone the repo, I did it in github itself.

What matters here is that, even when you do a little contribution as i did, the feeling of helping something bigger than yourself, something that can impact more people, is what drives you to be a better developer & help others in the way. for me, helping others is an indirect way to improve & get better at things.

Horacio Herrera on Twitter

Just follow the docs about Android Native Modules & think I can add some improvements. for people that are not experienced with Android dev maybe its a little confusing some parts.. should I just submit a PR for docs? cc @grabbou

Mike Grabowski on Twitter

@hhg2288 That would be awesome! Please do it! 😍

Hope this little story can inspire you to start thinking about contributing to OSS, even with documentation (that is actually a lot to do in that area!)

cheers!

The weekend of 14th October I attended the last day of the 4-Weeks Complete React Developer Course by LeanJS. In case you don’t know LeanJS, is a Boutique of excellence that are focused on Javascript, Lean, UX & people. You can see a little more about them in the video below.

In this post I will try to explain a little bit about my experience in this course, and why is a good option for you or your company to speed up your front-end productivity. I only attended the last in-person day of the course which lasts 4 weeks (4 days in-person and the rest via Github/Slack), but I also attend to few other workshops that LeanJS made in the past so I can give you an honest review about them & how they teach.

The Course

The Course consist of 4 full-day intense hands-on training focused on building up your knowledge about React & GraphQL. Don’t worry, you don’t need to have previous knowledge about these technologies, LeanJS organizes all the information so you will get a solid foundation where you can do almost every type of application. Few things to point out about the course that might be of your interest:

• The group was only 8 people, so you can have one-to-one interactions with the instructor quite often. this is something personally I look for in courses.
• The challenges & the lectures are divided by small chunks, this is handy when dealing with advanced topics, it will help you digest all the content easier.
• The Instructor have the ability to explain the same topic in many ways, so it doesn’t matter if you get lost somewhere, he’s willing to go back & find a different way to explain it. It proves that the instructor knows very well what he’s talking about, this gives you confidence. kudos Alex!
• The examples you will work with are mostly real examples to real problems in software design. You will see how to solve this problem & the most important, a process you can replicate to solve future problems you’ll encounter.
• You’ll love the LeanJS Headquarters, just perfect for the occasion :)

My Experience

I’m a self-taught frontend developer, I’ve taken a lot of courses, online & in-person, & something that I notice about instructors in particular is that there’s good developers & there’s good teachers, but it’s hard to find good developers that are good teachers. This is the key feature I think this training separates from other world-class training.

One thing I think is important for a teacher to have is the ability to empathize with the students, & the ability to balance the difference between students because we all have different backgrounds. This will help all as a group to fulfill the expectations & finish the course satisfied & ready to rock with React & GraphQL.

Conclusion

What I’m trying to say is that this course is a good solution & will definitely help you & your company to master cutting-edge JavaScript in a few days and speed up your front-end productivity. You don’t have to pay more to get a “popular developer” in front of you. You will get the same or even better results with LeanJS.

You can check more about their courses here.