One of my favorite ways to document projects is by adding screenshots of how it looks, to provide a quick overview of what it does and looks like. Sadly these images are quite easy to get out-dated, and I was being forced to manually update them … In this post, how I automatize this task by using Cypress and GitHub Actions.
My own Experience
I am the owner and maintainer of the Gatsby Starter Mate, which allows developers or tech writers to bootstrap their portfolio and manage its content with a CMS.
Although one can always open the Demo website and navigate through…
Article originally published on the LogRocket Blog.
End-to-end testing is a technique that is widely performed in the web ecosystem with frameworks like Cypress, Puppeteer, or maybe with your own custom implementation.
But when it comes to the mobile world, this practice is not that common, and there are several existing solutions to address. I have a theory that most mobile developers think testing mobile applications is hard and requires a lot of setup and configuration, and therefore they just skip it.
The goal of this article is to explain how to implement the end-to-end testing framework Detox in a…
Article originally published on the LogRocket blog.
Since Dockers’s release in 2013, the use of containers has been on the rise, and it’s now become a part of the stack in most tech companies out there. Sadly, when it comes to front-end development, this concept is rarely touched.
Therefore, when front-end developers have to interact with containerization, they often struggle a lot. That is exactly what happened to me a few weeks ago when I had to interact with some services in my company that I normally don’t deal with.
The task itself was quite easy, but due to a…
Implementing a maintainable icon system for a React and React Native project can be a hard task, especially when it comes to achieving the same workflow to add/remove/use an icon in all the platform (Web, Android, and iOS). In this post, I will share how we implemented a consistent icon system inside our component library at Omio.
The problem 😞
If you come from a web background, it’s well known that you can use the <svg> tag to directly render an SVG image into the DOM. This is perfect because browsers are prepared for that.
Dealing with icons in React Native can be a problematic task, especially if you want to use your own icons. In this post, I’m going to share my experience and learnings when I had to implement an icon system to React Native.
The problematic 😞
If you come from a web background, you may have your icons as svg files and render them directly into the DOM. This is perfect because browsers are prepared for that.
Sadly, this is not the same for React Native. First of all, you can’t render an SVG directly as a component, you need to use a library…
My experience with Visual Testing and how you can implement it in your projects
I’ve always had visual testing on my to do list, until a few weeks ago when I finally decided to mark it as done.
In this article, I’m going to share my experience working with this strategy of testing (which does not replace the others), and the integration with my current development tool: Storybook.
In case you don’t know what Storybook is, this is the definition they provide on the official website:
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Without any doubt, there has been a huge adoption for Static Site Generators in these past 2 years, and one of the main reasons was the huge growth of Gatsby and its community.
In my case, Gatsby was my first experience using an SSG (Static Site Generator) and I can confirm that the development experience is wonderful and I will continue using it for future projects!
But there is something … 🤔
If they are super fast and easy to build with all the frameworks out there that can help you, then why is not everybody switching to them?
Because sometimes the term Static can be…
About one week ago a friend of mine came to me for help, he wanted to create an online calendar for cultural events around the city. The idea was to create an application with a calendar showing all the upcoming events with the possibility that any person can add or edit new events.
So in summary, the application needs to have the following features:
- Display a calendar with events and information about them.
- Read the events from somewhere.
- Provide a way to add new events.
Breaking down the Challenge 👷♂️
If we translate these requirements to technical points, I listed the following requirements:
- Storage: Have…
A few weeks ago I published my first starter for Gatsby and I want to share some tips I learn along with the whole experience.
As many starters in Gatsby, it began as a Personal portfolio. After I published it and share it on Twitter, people asked me if it was Open Source or published somewhere. My reaction at the beginning was saying “No”, but after more inquires came I changed my answer to a “Maybe it will!”.
Technically the project was “Open-source” because it was hosted in Github, but it was not configurable at all. …
Nowadays every application is connected to a server. That server could be sending the data using different protocols (HTTP, FTP, HTTPS) and designs (SOAP, REST, something similar to REST), and our application has to deal with that so for that reason we would always like to have a service layer inside our architecture.
Let’s see a common implementation of a service layer:
const myService = await params => {
const requestParams = adaptParamsForRequest(params);
const response = fetch(MY_SERVICE_URL, {
headers: SERVICE_HEADERS,
method: SERVICE_METHOD,
body: requestParams,
...more
});return parseResponse(response);
This kind of service layer has some disadvantages:
- Performance issues because of…
Ema Suriano
Software Engineer during the day, cook at night 👨🍳 Traveller and Foodie 🧳 Whenever I can I like to write and speak 🤓 Berlin 📍
