DEV Community: Roberto Hernandez

What Will Shape the Next Wave of Frontend Development in 2026 (Backed by Experts + Data)

Roberto Hernandez — Tue, 14 Oct 2025 21:36:02 +0000

Includes resources to get started or master them

Originally published on Medium.com

Table of Content

Introduction
A quick overview of the frontend landscape
Where do these predictions and trends come from?
Where frontend is headed in 2026 and beyond.
1. AI-first development environments
2. React, Next.js, and the new Meta-framework era
3. TypeScript, tRPC, and the backendless revolution
4. State management & data layer 2.0
5. The new frontline: AI, WebAssembly, and edge
6. The edge & WebAssembly revolution
7. Utility meets design systems
8. Micro-frontends & module federation - maturing architecture
Final Thoughts

Introduction

Ten years ago, frontend engineering was simple. You picked React or Angular, wrote a few CSS modules, and called it a day.

Fast-forward to 2026, and the landscape has become unrecognizable.

Frameworks are running on the edge, AI tools are not only generating entire components but full-stack apps, and the line between frontend and backend is disappearing.

The Stack Overflow Developer Survey 2025, State of JS/CSS 2025, and GitHub Octoverse 2024 reveal a fascinating truth: frontend is no longer just about rendering UIs — it's about orchestrating intelligence, performance, and experience.

This post breaks down the key shifts shaping frontend development in 2026 — with insights, examples, and resources to help you actually learn what's next.

A quick overview of the frontend landscape

If you are a busy person and want to go straight to the key points, the following front-end landscape is for you.

AI went from a shiny toy to a tool you can't ignore anymore. I ignored it, unfortunately.
JavaScript is still the world's most used programming language (12 years in a row, according to Stack Overflow 2025).
TypeScript is now almost the "default mode" for serious frontend work.
Hybrid frameworks (Next.js, Remix, SvelteKit, Astro) are standard. CSR-only is rare.
WebAssembly has broken out of niche use-cases.
Micro-frontends continue to power large orgs.
Accessibility, performance, and motion-based design are becoming product differentiators, not afterthoughts.

Where do these predictions and trends come from?

Stack Overflow Developer Survey 2025 — latest insights on language/framework popularity, AI usage & trust gap. https://insights.stackoverflow.com/survey/2025
State of JS & State of CSS (2023–2025) — community adoption reports. https://stateofjs.com / https://stateofcss.com
GitHub Octoverse 2024 — open-source usage patterns. https://octoverse.github.com
My 10+ years as a frontend engineer, building products across web and mobile.

Where frontend is headed in 2026 and beyond

1. AI-first development environments

We are moving from autocomplete to AI-powered IDEs. Tools like GitHub Copilot, Cursor, and Replit AI are no longer novelties.

Now in 2025, they're shaping how juniors learn, how seniors review, and how teams ship faster.

Resources to explore:

GitHub Copilot — https://github.com/features/copilot
Cursor — https://cursor.com
Replit AI — https://replit.com

Even with these AI-first development environments, there are a few facts about AI usage you should keep in mind:

According to the 2025 Stack Overflow Survey, 84% of developers say they use or plan to use AI tools in their development process, up from 76% in 2024. But the trust is not proportionally rising: 46% of devs in 2025 don't trust the accuracy of AI tool output. Developers are also asking: are these tools assistants or collaborators? Do they help or create fragility (bugs, unexplained behavior, security risk, dev-dependency)?

2. React, Next.js, and the new Meta-framework era

If 2025 is about stability, 2026 is about specialization. React remains dominant, but it's the meta-frameworks around it that are rewriting the rules.

React — https://reactjs.org
Next.js — https://nextjs.org (Next.js Learn: https://nextjs.org/learn)
Astro — https://astro.build
Remix — https://remix.run
Qwik — https://qwik.builder.io
SolidStart — https://solidstart.com (Solid: https://www.solidjs.com)

These frameworks share a goal: deliver speed, simplicity, and smarter data flow — something traditional SPAs struggle to achieve.

Real-world shift: Companies migrating from Create React App to Next.js or Astro report up to 40% faster load times and lower infra costs (see State of JS / migration case studies).

3. TypeScript, tRPC, and the backendless revolution

Frontend engineers are now building full-stack systems — without ever writing traditional REST APIs.

tRPC — https://trpc.io
Zod — https://zod.dev
Drizzle ORM — https://drizzle.team (Drizzle ORM docs)
Bun — https://bun.sh
Deno — https://deno.com

tRPC lets you define backend procedures and instantly call them from your frontend with full type safety. Zod validates everything at runtime, and Drizzle ORM makes type-safe SQL feel like art.

The takeaway: Learn to think full-stack through TypeScript, not in layers.

4. State management & data layer 2.0

If you still reach for Redux first, you're probably maintaining legacy code.

Modern apps handle data through smarter caching and signals-based reactivity. Key libraries and patterns:

TanStack Query — https://tanstack.com/query/latest
Jotai — https://jotai.org
Recoil — https://recoiljs.org
Apollo GraphQL — https://www.apollographql.com

At the same time, frameworks like Solid and new React signal experiments are redefining reactivity itself — no more rerenders for everything.

5. The new frontline: AI, WebAssembly, and edge

The GitHub Octoverse 2024 report showed a huge surge in AI SDK usage. AI is not coming—it's here.

Frontend developers are now integrating AI copilots, LLM prompts, and real-time assistants directly into UI logic.

Vercel AI SDK — https://vercel.com/docs/ai
LangChain.js — https://js.langchain.com
Cloudflare Workers — https://developers.cloudflare.com/workers
Rust + WASM — https://rustwasm.github.io/docs

AI literacy — prompt design, response handling, and model orchestration — is quickly becoming the next must-have skill.

6. The edge & WebAssembly revolution

The frontend is going serverless and edge-first.

User experience depends on milliseconds saved and distance reduced. Frameworks now deploy server components on the edge (Vercel, Cloudflare, Netlify), executing logic close to the user.

web.dev Performance — https://web.dev/performance/
Cloudflare Workers — https://developers.cloudflare.com/workers
Vercel Edge Functions — https://vercel.com/docs/concepts/functions/edge-functions
Rust + WASM guide — https://rustwasm.github.io

WASM is breaking JavaScript's limits. Developers use Rust, Go, or Zig to handle compute-heavy tasks inside browsers.

7. Utility meets design systems

If you stopped learning CSS after Flexbox, 2026 will surprise you.

State of CSS 2025 — https://stateofcss.com
Tailwind CSS — https://tailwindcss.com
Vanilla Extract — https://vanilla-extract.style
Radix UI — https://www.radix-ui.com
shadcn/ui — https://ui.shadcn.com

Container Queries, CSS Layers, and new color APIs are making CSS once again a language for serious engineering. Tailwind CSS 4 and variable-based utilities bridge tokens and scaling design systems.

8. Micro-frontends & module federation — maturing architecture

Definition: an architectural style where independently deliverable frontend applications are composed into a greater whole.

Martin Fowler on Micro-Frontends — https://martinfowler.com/articles/micro-frontends.html
Building Micro-Frontends (book) — Luca Mezzalira
Single-SPA — https://single-spa.js.org
Module Federation examples (Webpack) — https://webpack.js.org/concepts/module-federation/

Companies like Netflix, PayPal, IKEA, Spotify, American Express, and Starbucks have implemented micro-frontends. The approach is maturing, and adoption is increasing in large orgs.

Final Thoughts

Frontend in 2026 isn't just about frameworks. It's about adapting faster than the ecosystem changes.

The developers who thrive now:

Automate repetitive UI patterns using AI.
Optimize performance at the edge.
Treat design systems as living architecture.
Embrace type safety, signals, and declarative data.

After 10+ years building across web and mobile, I've realized something simple:

Every trend you ignore today becomes your technical debt tomorrow.

But the opposite is true, too — every new skill you pick up early becomes your advantage when everyone else catches up.

Jump to MullinStack now — build the future, not just read about it:

https://mullinstack.com

I Wasn't Born a Developer — I Became One the Hard Way

Roberto Hernandez — Sun, 05 Oct 2025 22:06:38 +0000

And if you're still waiting for "motivation," you're already losing time
Originally published on Medium.com

Let me get this straight from the beginning.

You don't need another inspirational quote.

You don't need another perfect roadmap.

And you sure as hell don't need another YouTube guru telling you how "easy" it is to become a software engineer in 6 months.

If that were true, you wouldn't be reading this. You'd already be writing clean code, deploying apps, solving real problems, and getting paid for it.

So let's stop lying to ourselves.

This whole "become a developer fast" trend is killing more dreams than it builds.

It screwed me up big time.

I spent years frustrated, hopping from tutorial to tutorial, watching others "make it" while I still felt like an impostor with 38+ open tabs and zero clarity.

But I didn't quit.

And that's the only reason I'm still here — still coding, still fighting, still building.

So I'm writing this to you, who's probably stuck somewhere between wanting it and actually doing it. Or doing it but still feeling stuck.

This is how I survived that phase without giving up — and how you can too.

Step 1: Admit how you got here

Everyone loves to flex their "origin story."

Not me. Mine is as raw as it gets.

I didn't discover Computer Science because I was some genius building robots at age 12.

I didn't grow up with fast Wi-Fi, a MacBook Pro, and parents who bought me a Raspberry Pi to "explore my passion."

I grew up in a poor neighborhood where even finding a computer was a miracle. Half of my learning happened without the internet.

Half of my motivation came from pure tenacity.

Maybe your story is different. Maybe you came here because:

You saw a "$100k salary in 9 months" ad.
A friend told you to switch careers.
You're just sick of your current life and want something better.

Whatever your reason — own it.

Because where you come from explains where you are, but it doesn't decide where you'll go.

Step 2: Stop learning to code. Start deciding who the hell you want to be.

Let me drop something brutally honest:

"I want to learn to code" is NOT a goal.

That's like saying you want to get fit without knowing whether you want to lift weights, run marathons, or simply fit into your jeans again.

So let me ask you straight:

Do you want to become a Frontend Engineer?
Or a Backend Developer?
Or Fullstack?
Or build indie SaaS for fun?
Or maybe just make enough to work from home?

Whatever it is — pick a damn lane.

Write it down.

Commit to it.

And stop flirting with everything you see on social media.

If you scroll through dev Twitter, LinkedIn, Facebook, and switch your stack every week, congratulations — the algorithm owns your future.

Step 3: Stick to your path like your life depends on it (because it does)

Choosing a path is easy.

Staying on it is where 99% of people lose.

Consistency beats intelligence. Every. Single. Time.

Not because consistent people don't get tired.

But because consistent people don't negotiate with themselves.

They don't say:

"I'll code only when I feel motivated."

They say:

"I'll code whether I feel like shit or feel like a god."

So let me give you the only discipline rule that changed my life:

Never go two days without touching code.

Not an entire bootcamp. Not 5 hours of grinding. Just touch code.

Read the docs.
Solve one bug.
Write 10 lines.
Improve one function.

Momentum is a weapon. Either you use it, or it kills you slowly while you scroll.

Don't go fast — go consistent and honest

I'll make you a bet:

You've probably said this before:

"I'm going to learn React… no wait, maybe Angular… no, I should probably master JavaScript first… or maybe I should learn backend basics too…"

Stop.

Stop sprinting like a headless chicken.

You don't need speed. You need depth.

Foundations are not "boring." They are your secret weapon.

If you know real JavaScript, you'll learn React faster.
If you understand HTTP and JSON, APIs won't scare you.
If you know loops, conditions, and functions, you'll write cleaner logic everywhere.

Speed burns you out.

Consistency creates mastery.

Step 5: Resilience > Talent

There were nights when I questioned everything.

I wrote code with all my energy. I studied until my brain melted.

And still — no job, no recognition, no big win.

I thought:

"Maybe I'm not smart enough."

Wrong.

The truth?

You don't fail because you're not smart. You fail because you expect results too early.

Do not judge your future based on your current output.

Real developers are not the ones who "never fail."

They are the ones who fail slower, recover faster, and show up again.

If you're feeling stuck — good.

That means you're actually building the muscle that matters most: Resilience.

Step 6: Track your growth (so your brain stops lying to you)

Your brain is your biggest enemy.

It loves to whisper:

"You haven't improved."
"You're still a beginner."
"Everyone else is ahead of you."

So here's how you slap your brain back:

Start a Progress Log.
Write one sentence per day: "Today I learned…"
Screenshot a solved bug.
Push one tiny repo to GitHub.
Compare your old code every month.

When you see how far you've come, quitting becomes impossible.

Step 7: Read. Code. Write. Share. Repeat.

This is the ultimate cycle that built me:

Read, but only about your chosen path.
Code, even when it's ugly. Especially when it's ugly.
Write, even if nobody reads it. Your brain remembers what your hands type.
Share, not for likes — but for help, feedback, and accountability.
Repeat, even when nobody claps.

Success isn't glamorous.

It's boring repetition done by stubborn dreamers.

Final Words (read this twice)

I'm not writing this because I'm "better" than you.

I'm writing it because I am you.

I still doubt myself. I still break things. I still feel behind sometimes.

But here's what keeps me alive in this journey:

In the race between consistency and talent — consistency wins. Every damn time.

Now stop reading. Start moving.

If you're serious about this life — not just thinking about it — here's your first real move:

Stop scrolling "motivational posts" right now.

Open www.mullinstack.com

Pick one article.

Execute something from it TODAY.

No excuses. No "I'll do it later." No more waiting for the perfect moment.

Because let me be real with you:

Your future self will SLAP you if you don't.

See you inside.

👉 www.mullinstack.com — Where dreamers stop dreaming and start building.

Between Coding And Changing Diapers 24 Hours Are Not Enough

Roberto Hernandez — Fri, 03 Jan 2025 07:05:37 +0000

Originally published on my blog mullinstack.com

You, your future self, your kids and their future-self will gain priceless life gifts

I was deeply focused on building a new app feature. It was a feature with a complex business logic.

Suddenly I heard a little cry.

I slowly started to listen it way closer and higher.

Guess what was happening?

Yes, you're right.

A little and sweet girl was crying.

I stood up from my chair and walked off from my office room to see what's going on.

There's she was. A sweet girl shedding tears and raising her hands so I can pick her up.

Her weeping, seemed to be related that she did not feel comfortable.
How did I know it?

Simply. I deeply know her since the first day she was born.

You might think this was the first time she was crying and interrupting me. No. You are not right.

This was the third time during the day.

So I was quite exhausted combining my full-time job and my full time as a stay-home dad.

I knew what to do, though.

Juggling coding and changing diapers

Coding and changing diapers are two chores I have never thought I would do it together.

At a glance, it seems quite simple, trivial and feasible. Isn't it?
Yet, it is not.

Why?

Let's categorize a task by its complexity for a better understanding. There are simple, medium and complex tasks, correct?

So the simple chore of changing diapers is easy but with a high cost because of the distraction.

Fact: It takes about 23 minutes and 15 seconds to fully regain focus after a distraction, according to a study by Gloria Mark, a researcher on workplace behavior.

Of course there are a few factors we need to consider like task complexity, type of distraction and the person itself but a thumb of rule this is time needed to come back to the task you were working on.

So, as I said at the beginning, I was on building a complex business logic feature that demanded a high level of focus.

This type of work is the art of joining and moving puzzles, so you need deep work.

Yet, being interrupted several times during the day was hard to get things done.

I did not know how hard this would be.

Yet, I had to do it.

I now understand you all stay-home moms and dads that work from home and hold on your back kids and house chores.

This is so damn fuck**** hard.

Working from home and transparency

Back then, I was a parent of two kids, 6 years old son and a little daughter of 6 months old. Still today.

My wife worked on a government institution, so she needed to commute and go to the office.

Me on the opposite worked from home since after COVID-19 succumb the world.

We moved out to the capital when our firs kid was 4 years old.

When our daughter born, we had no relatives or loved ones or trusted friends who take care of kids even partially.

It was so damn hard to find support.

So I was transparent about my personal situation with my boss. Fortunately, he understood, and I got all the support and encouragement to keep going.

Even though I almost succumbed to this time, I tried to focus on the good things or benefits I could get from this situation.

Benefits for dads and kids by changing diapers

As Epictetus said

It is not what happens to you, but how you react to it that matters

Changing diapers bring some benefits for both parents and kids.

Changing diapers provides an opportunity for close interaction, helping parents and kids bond through touch, eye contact, and playful communication.

During this period of life, babies' brains grow more rapidly which they need their diapers changed than will ever be the case again.

According to a research, approximately 1000 synaptic connections are formed every second during this period.

And it is the emotional experiences that babies have over and over again that build the most robust neural pathways.

Nappy changing isn't quite as trivial as we might at first have thought.

It has an impact on babies' brain development.
Apart from that, as a full-time worker, being more productive was something I took advantage of this situation.

Being more productive even under the daunting days

Really, Bob?. Please guide me how.

Yes sure here a proof of a week when I went so damn productive.

This is a Slack message I shared at my work the end of the week.

So proud of myself of accomplished this.

Provided by author - Slack message sharing my most productive week

I was 2x more productive at work, even when taking care of my little daughter during the day.
I played soccer as Messi on a tournament. If you believe it, it is TRUE.
I took cared of my little 6-month-old daughter. I played with her. I fed her.
I retook Undebtme project after a month of rethinking and fighting with infra stuff.
I stopped being hard with myself on things I can't control.
I did more workouts than the previous 3 weeks or so.

Final Thoughts

Parenthood, especially when paired with a full-time job that demands focus and deep work, is an unparalleled test of patience, resilience, and adaptability.

My journey of juggling coding and childcare has been filled with challenges, but it's also been deeply rewarding.

Through the tears, distractions, and moments of exhaustion, I've come to the realization: the chaos of balancing work and family life isn't a hindrance - it's a privilege.

The quiet moments of changing diapers, the heartfelt cries for comfort, and the interruptions that remind me of what truly matters - my kids.

For all the stay-home-parents out there walking this delicate line, remember this: you're doing something extraordinary.

Every day you show up, for both your work and your family, is a triumph. Congrats! You all are extraordinary.

It would be great to have your experience on this. Drop them in the comment section.

Thanks for reading!

Top 7 Frontend Trends 📈 and Predictions For 2024 You Should Watch Out (According to Experts)💎

Roberto Hernandez — Fri, 08 Dec 2023 19:43:22 +0000

Originally published on Medium.com

Includes resources to get started 🚀

Table of Content

Introduction
A quick overview of the frontend landscape
Where Do These Predictions and Trends Come From? Predictions and Trends
The rise and ever-evolving Chatbots and AI
JavaScript continues unstoppable. Long live the king!
TypeScript rises in popularity and usage
React.js - The most commonly used and popular web library
Progressive Web Apps (PWAs) are now a Standard
JAMSTACK is not the future. It is now a standard.
Micro frontends have moved forward and gained more maturity
Conclusion

Introduction

Dear frontend dev, 2024 is just around the corner.

Now, it's the perfect time to bring to the table the 7 front-end trends and predictions for 2024 you should keep an eye on.

On the frontend tech race, you might have been witness how a few ones keep fighting on the road to be alive.

A few of them have lost developers' interest, so they are now the "walking techs dead" - Literally.

Others have become stronger and the market leading, instead.
This race has brought both innovations and overwhelming in the front-end sand.

Why?

Innovations that go from more and better app performance, ease of use, greater developers experience, code quality to faster app's developments.

On the other hand, tiredness and overwhelming due to the fast way of how new frontend techs appear. They come up in a blink of an eye.

Yet, those are the two big reasons why front-end development is really so powerful.

Now, let's explore what are these trends and predictions for 2024.

A quick overview of the frontend landscape.

There are substantial differences between the trendy frontend technologies I highlighted and predicted in the past in regard to 2024 and beyond.

There are new, trendy and mind-blowing frontend kids and a few more that have gained maturity and stability.

Chatbots and AI has become now the game-changer player on the frontend land. They are now the hottest topic, and they will remain as is for so long.
The old, well-known kid - JavaScript, continues unstoppable - long life to the reign!.
Single Page Application (SPA), Server Side Rendering (SSR), and Static Site Generators (SSGs) are technologies that have gained a tremendous growth in both usage and popularity. We can call them a standard now.
TypeScript came to stay and makes web development less frustrating. It seems to be more and more adopted and loved by the community.
React.js, continues its reign, it is the most commonly used and popular web library.
Micro-frontends are on their way to stability and maturity.

Frontend trends give you an idea of where things are going, so you can take action and decide the direction you want to follow for the products you are building.

How accurate and reliable is all this? Let's talk about in the next section.

Where do these predictions and trends come from?

All data shared over this post come from different reliable and up-to-date resources, experts' opinions, and my ten years as a front-end engineer.

If you want to go deeper, you can take a look at the 2023 Stack Overflow Developer Survey, the State of Frontend, and the State of JS which are part of the references used here.

Predictions and Trends

Let's jump onto the the 7 frontend trends and predictions for 2024 you should watch out.

1. The rise and ever-evolving Chatbots and AI

Chatbots and AI has transformed the way we do things.
The frontend land is not the exception.

We can now be leveraging AI algorithms to create more suitable user experiences and more personalized and accessible UI with a tremendous time less than the way we did it before.

One of the biggest advantage of AI on the frontend is the ability to serve a high level of app's personalization.

This means learning from user behavior to tailor content.

This is so good for end users.

To accomplish that, there are a few interesting AI tool you should play around as a frontend engineer in 2024.

TensorFlow

TensorFlow.js is a JavaScript library for training and deploying machine learning models in the web browser and in Node.js.

Dialogflow

It is a comprehensive platform for developing chatbots, voice bots, and virtual agents using natural language understanding and Google AI.
Put it into practice with this tutorial.

Algorithmia

Combines the best AI, MLOps, and DevOps practices, establishing machine learning workflows and processes for IT, data scientists, and other teams that orchestrate machine learning models in production.

2. JavaScript continues unstoppable. Long live the king!

credit: Stack Overflow Developer Survey 2023

No doubt, JavaScript becomes stronger each year.

According to the Stack Overflow Developer Survey 2023, JavaScript continued its streak as its eleventh year in a row as the most commonly-used programming language.

So it is obvious to think that it will remain at its peak and beyond in 2024, its reign will continue for more years.

This is perfect for everyone.

Why?

Because every single day, there are more and more development services that require JavaScript skills.

That avalanche of need of services is bringing more and more job opportunities, which is just awesome for me and for you. It isn’t?

How to learn it the right way

Here is a list of up-to-date and valuables resources to learn it.

Even though most of them are for those who are just starting out, it can’t hurt if more seasoned developers take a look at them 😎

Books and GitHub repositories

Free JavaScript courses

Learn Javascript — Codecademy
JavaScript Essentials — Udemy

3. TypeScript rises in popularity and usage

The State of Octoverse 2023

This year (2023), TypeScript overtook Java for the first time as the third most popular language across OSS projects on GitHub with 37% growth of its user base according to The State of Octoverse 2023.

This trend is also backed by the Stack Overflow Developer Survey 2023.

Stack Overflow Developer Survey 2023

You might wonder why TypeScript has gained too much popularity.

Simply because it is a strongly typed language, object-oriented, type checker, compiler, and language service all in one.

If you want to write more readable, cleaner, and maintainable code, you definitely will have to use TypeScript.

How to learn it the right way

The following are a few free and paid resources to get started or dive into it.

4. React.js — The most commonly used and popular web library

Stack Overflow Developer Survey 2023

The picture is clear.

React will continue its dominance among JavaScript frameworks and libraries in 2024.

That hegemony will continue despite the fast growth and popularity of the next-generation reactive frameworks like Vue.js and Svelte.

For sure, there is a significant rise in the usage of those reactive frameworks as well.

But if we rely on the data, the latest data above indicates that React was the most loved web framework, with 42.65% of respondents using it or having an interest in using it in the near future.

A new kid in the first places

It is surprising, but it is real.

Next.js moved from 11th place in 2022 to 6th this year (2023), likely driven by its popularity with those learning to code.

Now let’s take a look at the downloads of the NPM packages of these technologies.

5. Progressive Web Apps (PWAs) are now a standard

Progressive Web Apps (PWAs) have officially ascended to the status of a standard, marking a pivotal moment in the evolution of web applications.

Let’s see the key features that make PWAs so powerful.

Responsive design

PWAs adapt to various screen sizes and orientations, providing a consistent and optimal user experience across devices.

Offline functionality

One of the standout features of PWAs is their ability to work offline. By leveraging service workers, PWAs can cache essential resources.

App-like interactions

PWAs offer a native app-like experience with smooth transitions, gestures, and responsive animations, creating a more engaging and immersive user experience.

Push Notifications

Users can receive push notifications, even when the PWA is not actively open, enhancing user engagement and keeping them informed about updates or relevant content.

Secure connection (HTTPS)

PWAs mandate a secure connection, ensuring the safety and privacy of user data.

So it is clear that businesses and developers can leverage this technology to create more robust, responsive, and user-friendly applications.

How to get started

Learn Progressive Web Apps! — Web Dev
Progressive Web Apps (PWA) — The Complete Guide — Udemy
Progressive Web App Fundamentals — PluralSight

6. JAMSTACK is not the future. It is now a standard

The Jamstack has transformed our approach to web development, offering a more straightforward developer experience, enhanced performance, reduced expenses, and increased scalability.

But what is actually JAMSTACK?

JAMSTACK stands for Javascript, APIs, and Markup.

It is a software architecture that leverages the above elements to build secure, scalable, cheaper, and performant websites and apps.

This year (2023), Static Site Generators (SSGs) have gained tremendous popularity.

Using frameworks and techologies like Gatsby, Next.js, Nuxt, and Hugo, developers can leverage the power of pre-rendering to deliver highly performant and SEO-friendly websites.

On top of that, we have witnessed the emerged of new kids like Remix, SvelteKit, and Astro, who want to grab their piece of the market cake.

All these techs adoptions makes the JAMSTACK no a cutting-edge technology but a standard from 2023 and beyond.

How to get started

7. Micro frontends have moved forward and gained more maturity

The State Of Frontend

For those who dont know this concept let’s define it first.

Martin Fowler it defines as an architectural style where independently deliverable frontend applications are composed into a greater whole.

Think about a website or web app as a combination of features that are owned by independent teams so they can work isolated from each other.

According to The State of Frontend 2022 , Micro Frontends are embraced by a variety of companies nowadays.

Among others, Netflix, PayPal, American Express, IKEA, Spotify, and Starbucks, have implemented this architecture approach in some of their systems.

Definitely, micro-frontends have moved forward in comparison to two years ago and will see how more and more company adopt it.

Resources

Martin Fowler — The evangelist of this architecture

Ending Thoughts

Frontend land is really powerful and also surprising.

Why?

Because more and more libraries and frameworks are coming up in the blink of an eye.

Should this overwhelm us?

Not really. We should embrace and study them and prepare ourselves as best as we can.

If you followed the reading till now, we learned about the 7 frontend trends 📈 and predictions for 2024.

To sumarize it

Chatbots and AI has become now the game-changer player in the frontend land.
The old, well-known kid — JavaScript, continues unstoppable.
Single Page Application (SPA), Server Side Rendering (SSR), and Static Site Generators (SSGs) and JAMSTACK are technologies that have gained a tremendous growth in both usage and popularity.
TypeScript came to stay and makes web development less frustrating.
React.js, continues its reign.
Micro-frontends are on their way to stability and maturity.

For sure there are other technologies like Web3, WebAssembly and Web Componentes amonght others I haven't covered here.

I promise you I will in a future post. Thanks for reading.

I hope this article turned to be out helpful. See you in the next reading. Happy Coding!

From Being A Little Farmer Kid to Being a Software Engineer

Roberto Hernandez — Thu, 22 Jun 2023 17:57:00 +0000

Originally published on my blog

36 Years Discovering Myself Counted In 3 Minutes

It is not about how many years we have gone through, but how many meaningful things we have added to those years that really count.

The more things you experience, the more input you have in the decision-making process. Most importantly, more wise decisions.

Let’s jump into the purpose of this piece. The next are crucial things that happened in my life. But the most important part is the factor that plays goals and the self-discovery process.

1996 Just a farmer kid

Zero Goals.

1999 A young guy with dreams to be a soccer player

Zero real goals.

2003 A baker

Zero Goals, just surviving and bringing a few pennies to my family’s table

2006 A college student

Goal: Finish university, then find an 8–5 job and get paid, so I can put food on my family’s table.

2011 A naive freelancer and entrepreneur

Goal: Get a few more pennies. A tiny income stream to survive and learn over the process to gain experience. Work for free.

2012 A newbie entrepreneur again

Goal: Get income to survive.

Outcome: Debts

2013 Get hired as a “webmaster”

Goal: Get money to buy a car, pay the bills, support my family, and nothing else.

Outcome: more debts.

2014 A better developer

Goal: Get money to buy another car, pay the bills, have fun, and support my family.

Outcome: I ended up sinking into debt.

2018 Become a Software Developer

Goal: Understand the root of computer science, get more income, buy a house, and get out of debt.

2019–2021 A Front-end Engineer and a Technical Writer

Goals:

Specialize on the frontend side, especially with everything around JavaScript, React and React Native.
The Top Offensive: Get out of debt and reach a better financial state
Help and advise others to achieve more, earn more, and live a better and more meaningful life.

2023–Beyond. An author, a real software engineer, a motivational speaker, and an entrepreneur

Goals: I want to become an author, a real software engineer, a motivational speaker, and a tech entrepreneur.

Final Thoughts

It’s never late to start and rediscovery who you really are. Start today if you haven’t done it yet.

Don’t just count your years, make your years count - George Meredith

I have transitioned from being a little farmer kid to being a baker, webmaster, and software developer.

I am so grateful for the kind of life I am building. But I am aware that I am still learning and discovering myself. We are just humans in constant evolution.

Finally, I would like to share the things today that I enjoy the most that add meaning to my life.

Spend quality time with my family as much as I can.
Enjoy and lose myself in writing. I want to be a voice in the silence and spread it to the last corner of the world. I want to express myself and my thoughts.
Spark and spread my voice and story to somewhat inspire others.

Encourage people, that everybody has an undiscovered potential
Solve people’s problems to make a happier and more meaningful life.

Thanks for reading. I hope this turned out to be helpful for you. If you liked it, share it to reach a wider audience.

I Wan To Buy a Coffee Machine. Do you have one ? Which do you recommend me?

Roberto Hernandez — Wed, 07 Jul 2021 13:13:49 +0000

Thanks folks. Really appreciate it

🔥 A Few Gotchas To Consider When Working With Firestore’s Offline Mode and React Native 🪤

Roberto Hernandez — Sat, 12 Jun 2021 17:28:43 +0000

Originally published on my blog MullinStack

How does Firestore’s offline persistence work? 🔥

One of the recent React Native projects I worked on uses the power of Cloud Firestore. The core idea of the app is to allow the user to perform online and offline tasks and to have a transparent sync process for the user.

That is the exact power that Cloud Firestore provides, yet there are a few gotchas and findings I would like to mention about working with the offline mode. They might save you time and headaches.

Let’s suppose that Blarz (the user) is using MyFavouritesOfflineApp, which handles his favorite movies and books. So we have two main Firebase/Firestore collections: books and movies.

Blarz logs in, and once he is on the home page, the app will start fetching all his favorite books and movies.

Reading actions

Basically, Blarz is downloading all sorts of documents while he is interacting with the app.

The download of those documents occurs either through queries or individual document fetches. Once this happens, all those documents stay cached on Blarz’s phone.

Note: Bear in mind that if you haven’t programmatically set to retrieve those collections or if the user has not interacted with any query or document, the data won’t still be available in offline mode either.

Writing actions

Let’s continue with the prior scenario to have a better understanding.

Suppose that Blarz wants to update one of his favorite movies. This is a request to make a change to the movie collection and the document associated with the movie that Blarz wants to update.

Remember that the data stays on the cache, so you will see the change immediately even when the data hasn’t gone to the server.

Gotchas When Working in Offline Mode

I have to admit it: I only discovered these gotchas after debugging for a while after starting to work on a reported bug on Jira. Certainly, there wasn’t enough offline testing, so I didn’t realize all of that.

While using Firestore’s offline mode, we need to avoid the usage of await on certain things such as creating or updating things on the Firebase.

The promise generated by the await expression will not be complete until the document write has been successful on the server. This will block your UI even when the changes are made in the cache.

There are two ways to handle this.

Avoid await and use callbacks or promises instead (recommended)

If you want to make sure that a writing server has happened, it is fine to use either callbacks or promises. But you don’t need to block the thread by using the await expression.

So instead of this:

const user = {
  id:1,
  name:blarz
};
const userResponse = await FirebaseService.Collection.User().add(user);

Change it for the usage of promises. Something like the following:

const user = {
  id:1,
  name:blarz
};
const userRef = FirebaseService.Collection.User().add(user)
.then(docRef => {
  console.log(`The user with id ${docRef.id} was added succcesfully`);
}).catch(error=>console.log('There was an error adding a user', error))

By doing that, you will unlock your UI and the app will work just fine in offline mode.

Check connection status

This might not be a fancy solution, but if you still want to have the sugar syntax of the await expression, you can just check the connection status and depend on it to decide what to do.

Get IDs Before They Were Added

This was another battle. I needed to return the user document.

Due to the issue with the await expression, I needed to find a way to return a document with its ID before it was added.

I had something like this:

async addUser(user: User):Promise<User> {
const { id, ...data } = user;
const result = await FirebaseService.Collection.User().add(data);
user.id = result.id;
return user;
}

After I removed the await expression, the code looks like the following:

async addUser(user: User):Promise<User> {
const { id, ...data } = user;
const userRef = FirebaseService.Collection.User().doc();
user.id = userRef.id;
userRef
.set(data)
.then(() => console.log(`The user was created successfully`))
.catch((error) =>
console.log('There was an error adding the user', error)
);
return user;
}

This code snippet is basically creating a user reference — a document reference. Then you can get the user’s ID without even creating it on Cloud Firestore. Remember that we are still working in offline mode.

The last code lines add the user using a promise. We are not waiting for the server’s response, so we return the new user we have just created.

That’s all.

Final Thoughts

Cloud Firestore provides us with the power of working both online and offline in a fancy way. We don’t need to worry about anything when it comes to working in offline mode because for iOS and Android, offline persistence is enabled by default.

With that said, there a few gotchas you need to keep in mind while working offline. One of the most important is avoiding the use of await expressions.

This is important because if you don’t, the UI will be locked since you will be awaiting the response even when those changes are done and on the cache already.

The solution for that is to use callbacks or promises. 🔥

If this post turned out helpful share it to reach more devs. Also feel free to reach me on my blog and Medium

An Effective Strategy To Learn Vue.js In Less Than Seven Days

Roberto Hernandez — Tue, 18 May 2021 18:21:25 +0000

No BS. Here the action plan and strategy I followed to achieve it

Learning Vue.js in less than seven days was one of my recent challenges. At first, I was skeptical about if I was going to able to achieve it.
Before following the next pragmatic methodology to learn Vue.js that we are going to reveal throughout this post I have I wrong believe.

I thought that those who are knowledgeable in different areas were born with a special power. I was completely wrong.

As someone said:

"Everything is difficult until you know how to do it."

After I finished university and obtained a master's degree in Computer Science, I dug into the self-taught journey.

Over this journey, I realized that the difference between super learners and others is basically the way both learn.

I knew nothing about building a learning map based on your personal needs and even less about how to identify what drives me (if it is an internal or external force).

As cliche as it sounds, setting the right mindset plays a big role in achieving your goal in less time and effort.
If we are now jumping on the technical and explicit things related to Vue.js, there will be a few crucial things to consider.

Choosing the official documentation and a video course format will save you a lot of time, so you can get familiar with the main concepts faster.
Anyway, let's jump to the exact action plan I followed to learn Vue.js in less than seven days.

Disclaimer:

This is just a guide to give you a list of key factors to succeed while learning Vue.js.

The outcome might vary depending on different factors like your level of experience (in this case, mainly with JavaScript, HTML, and CSS). In my case, I learned the Vue.js fundamentals and got a decent code velocity, but more complex concepts were digested as long I continued developing Vue.js projects.

There two crucial stages you need to focus on if you want to learn anything faster.

Planning and Strategy Stage

The plan and the strategy you're going to stick to will play a big role in how fast you can grasp all Vue.js-related concepts and elements.

Build a learning map

Picking a course and going straight into it is one of the common mistakes we make when learning something new.

Do you want to fix that? So then start by building a learning map. It will help you to get an understanding of all the things you are trying to learn.

Simply put, it is a personalized guide based on your own needs.

OK, all of this sounds good, but how do I really build a learning map? No worries, let's jump to it right now.

To build a learning map to learn Vue.js, there are three main things you have to consider so you can boost your learning speed.

1. What drives you to learn?

The first thing to do to build a learning map is to be completely honest about what drives you to learn. Is this an internal or external force?

If this is an internal force, that means you have a genuine passion for the frontend and you are probably fully focused on mastering every detail of the Vue.js framework.

An external motivation means you are learning it because the company needs you to learn it for an incoming project or because it is a trending and on-demand framework and you want to get on that train.

Yet you are not interested enough in learning it.

Why is it so crucial to know the type of motivation?
That's simple. Because there might be a few sections or things that are irrelevant for the type of motivation, so you can skip them for later.

With a clear idea of what drives you to learn, you can now devote your time and energy to it.

2. Build a learning structure

The idea behind building a learning structure is to find the fastest route to grasp a topic. By doing this, you will speed up your understanding of how Vue.js works and all concepts involved in it.

There are two things you need to consider when building a learning structure: concepts and facts.

Concepts are all the fundamentals and principles about Vue.js you need to understand, whereas a fact is all the truthful things you must remember about it.

Concepts and facts to learn about Vue.js

What is the right version to learn (as of this writing)? Vue 2 or 3?

What is a common/popular tech stack of an app based on Vue.js?
Get familiar with the most common and used Vue.js concepts.

Facts and dilemmas

Let's start out by talking about a few things you will probably stumble upon just after you start learning the Vue.js ecosystem.

What is the right Vue version to learn?

When I was starting out learning Vue.js, this was a question that quickly came ups so you might have the same dilemma too.

Research and dive into it a little bit without worrying too much. The idea is to be clear why you're choosing either version 2 or 3.

I suggest you just make a comparison at a high level. For instance, the following Reddit threads will give you insight into the difference between both versions:

Learn Vue 2 or 3?
Should I learn Vue 2 or 3

What is a common/popular tech stack of an app based on Vue.js?

Knowing what to learn is crucial to boost your learning speed.
You need to have an idea of what is a common tech stack when building Vue.js apps so you can devote time and energy to those specific elements.

Here is a common Vue.js stack:

Framework: Vue 2/3
Routing: vue-router
Bundler: WebPack
UI kit/framework: Element UI, Vuetify.
State management: VueX

Common concepts

Now that you have a better understanding of the right Vue.js version and the stack you want to focus on, it is time to jump to the fundamentals, concepts, and unique things that belong to Vue.js.

The Vue instance: Every Vue.js app starts by creating a new Vue instance.
Data and methods: When a Vue instance is created, it adds all properties found in its data object toVue's reactivity` system.
Instance Lifecycle Hooks (different than lifecycle Hooks): This is a series of steps that run whenever the Vue instance is created ( init, beforeCreate, created, etc.).
Lifecycle hooks: Functions that give users the ability to add their own code at a specific stage ( mounted, updated, destroyed, etc. ).
Template syntax: Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. The template syntax includes interpolations, directives, and shorthand (e.g. v-bind, v-on).
Computed properties: Allow you to handle complex logic and operations. They are calculations that will be cached based on their dependencies.
Watchers: Allow you to perform asynchronous or expensive operations in response to changing data. They allow you to track any property and react to any change on it.
Class and style binding: Allow you to manipulate classes and inline style. You can pass data to apply specific classes or styles.
Conditional rendering: Vue.js allows you to condition whether or not to show a block, component, or element using different directives such as v-if, v-else, v-show, and v-for.
Event handling: Listening to events from the DOM, event handlers, inline handlers, event modifiers.
Form input binding: Use the v-model directive to create two-way data binding on form input.
Components Basics: Components are reusable Vue instances with a name like <button-counter>.
Passing data to child components with props: Props are custom attributes you can register on a component. Props passed down to a child component become properties on that child component.

These concepts are the most common or useful when starting with Vue.js.

3. Choose the right resources

By building a learning structure, you figured out the fastest route to learn Vue.js. Now it is time to research the right resources and methods other effective learners are using. As Scott Young, the author of the Ultralearning book, says:

"Spending one or two hours figuring out the right resources and 'how do people get good at this,' is a very useful investment."

Vue.js official guide (~3–6 hours)

I suggest you start off by reading the Vue.js official documentation. Since it is your first time with Vue.js, you probably will not be able to grasp and digest all the information. No worries. That's fine.

Choose a highly rated video course (~10–15 hours)

Again, at this point in your learning journey, you shouldn't worry about all the items in the course.

A video course will help you to speed the learning process up. It will help you to bridge the understanding gap you had after you read the Vue.js official guide.

The goal of the course is to understand the Vue.js fundamentals. It should take roughly 10–15 effective hours. While doing this, try to use the Pomodoro technique in order to avoid burnout.

I suggest taking the following Vue.js courses. A few of them are free and others are quite cheap, so there are no excuses.

Courses:

Execution Stage

At this point, you have the right mindset, a learning map, and the right resources to crush the Vue.js roadmap.

In order to grasp as much of Vue's world as possible, you need to follow a series of steps. The time to execute the plan has arrived.

Note: Keep in mind that all the following steps are required from day 0 to day 7.

Teach it to yourself or to a child (part of the Feynman technique)

If you can explain what you have learned in plain English, there is no doubt you have achieved two things:

You are clear about the topic and its elements. You can't explain what you don't understand.
You stored that knowledge in your long-term memory rather than in your working memory.

For any confusing or unclear concepts, try to explain them to yourself or to a child without using jargon or dense vocabulary. I usually practice this with my four-year-old son. It is not easy at all. But when he is able to get an idea of what I am talking about, I understand that I grasped it too.

Go live on YouTube

Really? No worries. You don't need to expose yourself - at least for now.

Again, this is a matter of measuring how much you understand the topic you are learning. You don't need to go live on YouTube but live on private mode.

Confused? Let me explain.

Whenever I am learning something new, one effective thing I do is to record myself. I try to explain a confusing or complex topic and then see how well I did.

I use YouTube for simplicity and quick access, but you can record yourself using your laptop's tools if you want or use whatever method you feel comfortable with. Check the screenshot below. I was recording how to know when to use a computed property and a watcher.

I went live on YouTube but using private visibility. If you consider your explanation good enough, you can even publish it or just have it there for future access.

Write down what you have learned

You might not be a writer, but that doesn't mean you can't put your learning process on record and most importantly create the neural connections in your brain to store that knowledge in your long-term memory.

Indeed, this article was the result of learning Vue.js. I documented the most important lessons, concepts, and elements of the process.

That helped me to remember things easily.
Blogging what you are learning will help in different areas, and it might end up becoming something meaningful to you at some point. That's what I went through - I am now a writer.

Practice, practice, practice

This is so obvious. Once you have a better understanding of Vue's ecosystem, you should implement a project. I recommend starting from a basic one to a mid-level project.

There's no silver bullet. You will need to practice over and over. That is part of our dev journey. We will never be prepared enough. We will need to re-learn and come back several times.

Closing Thoughts

Learning Vue.js in less than seven days was an amazing experience. As I outlined throughout this article, that doesn't mean I am the boss of Vue.js now.

It means I grasped the relevant concepts and elements because I built a learning map that sped up my learning process.

Determining if your motivation to learn is internal or external is a key factor to decide what resources to include and what you have to leave out.

All the prior points are about the plan and strategy to follow. They will boost your learning process with Vue.js or any JS framework or topic you are learning.

Yet the execution stage is what will help you to crush your learning process.

When learning Vue.js, try to explain to yourself or to a child confusing or complex concepts without using dense vocabulary or jargon.

Also, try to record yourself or write down what you have learned in plain English. When you force your brain to explain a concept in your own words, you create neural connections that help you to store it in your long-term memory.

** Happy coding! **

If this post turned out helpful share it to reach more devs. Also feel free to reach me on my blog and Medium

The Top 6 Frontend Trends and Predictions for 2021 and Resources to Master Them

Roberto Hernandez — Fri, 15 Jan 2021 00:22:02 +0000

Originally published on my frontend blog MullinStack

Happy New Year, dear reader! I love frontend tech. So at the end or the beginning of every single year, it has become a tradition to bring up the top frontend trends and predictions for the incoming year.

2021’s turn has come!

The real intention of this is to make you aware of trends and help you understand how they will play in the frontend landscape as well as the impact they will have on your development journey and career.
Without further ado, let's dive in!

Where Do These Predictions and Trends Come From?

I am not a wizard, my friend. All the trends and predictions that we are going to talk about and highlight here come from reliable sources such as the Stack Overflow Survey, State of JS, State of Frontend, my own experience, and frontend experts’ opinions.

1. JavaScript Will Continue Its Reign

Every single year, JavaScript becomes stronger. According to the 2020 Stack Overflow Developer Survey, JavaScript has been the most known and studied programming language in the world for eight consecutive years.

Based on that, I think JavaScript will remain at its peak in 2021 and continue its reign for many more years.

That is really good because every single day, there are more and more development services that require JavaScript skills. This means more and more job opportunities.

As a result, it has increased its usage, so more and more people are either just starting out with it or going deeper into it.

How to learn it the right way

Here is a list of valuable resources to learn it. Even though most of them are for those who are just starting out, it can’t hurt for more seasoned developers to take a look at them too.

Books and GitHub repositories

Free JavaScript courses

2. Server-Side Rendering (SSR) and Static Site Generators (SSG)

Web development changed forever with the emergence of Single Page Applications (SPAs). We have been witness to how they made the web more dynamic and powerful.

However, SPAs have one big limitation. They are not friends with Search Engine Optimization (SEO). They weren't thought to work well with search engines.

That is a killer — especially when it comes down to SEO. This really matters if you want to have a strong online presence nowadays.

SEO is crucial for all online businesses. In recent years, we have noticed how important it is for bloggers, writers, content creators, etc. They are hungry to leverage SEO.

The creators of solutions like Next.js and Gatsby saw this problem and took steps to solve it. Here is where the server-side rendering (Next.js) and static site rendering (Gatsby) came up.

In 2021, both Gatsby and Next.js will continue growing in both usage and popularity.

Having said that, I bet that Gatsby will continue its domination in the static site rendering space.

This is mainly because it offers a great developer experience. According to the W3 Techs Technology Market Report (May 2020), Gatsby is the single fastest-growing framework.

How to learn GatsbyJS

GatsbyJS official documentation — Tutorials
Gatsby Tutorial and Projects Course
[Gatsby JS & Shopify: Gatsby e-commerce sites 2020

How to learn Next.js

Official Documentation -Complete Next.js with React & Node — Beautiful Portfolio App

3. TypeScript Will Be Adopted More and More

Credit: GitHub 2020 State of the Octoverse report

If you want to write more readable, cleaner, and maintainable code, you definitely will have to use TypeScript.

TypeScript brings all power of the object-oriented paradigm: interfaces, classes, enums, and generics as well as support for static typing and modules.

Those have been the main reasons people have found TypeScript so powerful in recent years. As a result, it brought a huge growth in popularity and usage.

According to the latest Stack Overflow survey, 61.7% of respondents named TypeScript the most loved programming language. In fact, it is in second place on the list.

That means that those people are strongly interested in continuing to use it.

In addition, in GitHub’s 2020 State of the Octoverse report, you can clearly see the exponential growth of TypeScript over the last four years.

With Microsoft being the boss behind TypeScript, we can expect that it will continue enhancing all its capabilities in 2021.

How to learn it the right way

4. React Will Continue Its Hegemony

Credit: Stack Overflow survey

There’s no doubt that React will continue its dominance among JavaScript frameworks and libraries in 2021.

That hegemony will continue despite the fast growth and popularity of the next-generation reactive frameworks like Vue.js, Svelte, and Stencil.

For sure, there is a significant rise in the usage of those reactive frameworks. But if we rely on the data, the latest Stack Overflow survey indicates that React was the most loved web framework, with 68.9% of respondents using it or having an interest in using it in the near future.

NPM frontend framework trends

Credit: NPM trends

As you can see in this NPM graph, React has grown over the rest of the frameworks in a considerable way. The data is basically the number of downloads of each framework over the last five years.

The growth of Vue.JS is overwhelming too

Credit: NPM trends

Despite the fact that the number of Vue.js downloads is lower than that of React, one thing we must not overlook is the number of GitHub stars that Vue owned at the time of writing. So keep an eye on it too.

5. Jamstack

“Build websites and apps that deliver better performance.” — Jamstack

Jamstack stands for Javascript, APIs, and Markup.

It is a software architecture that leverages the previous elements to build secure, scalable, cheaper, and performant websites and apps.

It is the new kid in the web development field. Every day, more and more devs and companies are using this modern and efficient approach to build their websites and apps.

According to the State of Frontend 2020, almost one-third of the respondents have built a Jamstack website or app lately.

Based on that, I am sure of the imminent huge adoption of the Jamstack architecture in the coming months.

In addition, the graph below displays the trends regarding static site generator usage:

Credit: State of Frontend

How to learn it the right way

6. Micro Frontends

What the hell is a micro frontend?

“An architectural style where independently deliverable frontend applications are composed into a greater whole.” — Martin Fowler

In other words, think about a website or web app as a combination of features that are owned by independent teams so they can work isolated from each other.

It’s incredible how more and more organizations have been using this architectural style in recent years.

That is the case with American Express, IKEA, Spotify, and Starbucks, just to name a few.

A few benefits of micro frontends

Smaller, more cohesive, and maintainable code bases.
More scalable organizations with decoupled, autonomous teams.
Resilient site. Your feature should be useful even if JavaScript fails or hasn't executed yet.

In 2021, its usage and adoption will surely explode in more organizations.

How to learn it the right way

Micro Frontends Architecture: Introduction, Design, Techniques & Technology Martin Fowler — The evangelist of this architecture

Final Thoughts

I really love front-end things even though I know they’re constantly changing. More and more libraries and frameworks are coming up in the blink of an eye.

However, we shouldn't be overwhelmed by those changes. We should embrace and study them and prepare ourselves as best we can.

We don’t need to digest all of them either. It is a matter of reading and practicing what matters the most to us.

If this post turned out helpful share it to reach more devs. Also feel free to reach me on my blog and Medium

One of the Most Common Web Accessibility Mistakes

Roberto Hernandez — Sun, 16 Aug 2020 21:38:36 +0000

Web accessibility really matters not only because you are going to drive more traffic to your web or for the moral dilemma but also because according to this recent research which has revealed that “two-thirds of the Internet transactions initiated by people with vision impairments end in abandonment because the websites they visit aren’t accessible enough.”

Having said that, I have to be honest: Over my seven years working in web development I did not care enough about web accessibility. I was coding without accessibility in mind until one day working on a project a Jira ticket knocked on my door.

That project was based on the Magento core but it also had huge custom features — modules, plugins, and a custom UI. Due to that, or because we were in a rush, we forgot to add basic web accessibility standards to the components we created. We left out the alternative text (ALT) property to the IMG tags, form labels, page title, aria-label, or other web accessibility standards.

To fix that, the requirement was to add ALT attributes to all IMG tags, aria-label, title, and role property among the all of the store's e-commerce platform elements that needed them. I knew a little about web accessibility standards so I started to fix that first.

Add Alternative Text (ALT) to all IMG tags.

Except where otherwise specified, the alt attribute must be specified and its value must not be empty.
This was pretty easy. I just needed to find all occurrences of the IMG tags and then set the alternative text given by the client accordingly. That’s it!
However, the client then asked “What about the icons? Should we set an ALT text for them too?” I have to confess I was hit by this particular scenario. The next question came into my head:

Should I Add ALT or Title Attributes to the Tag?

The snippet of code I was trying to modify didn't have any IMG tag anywhere, but a SPAN tag as a wrapper and inside of it a tag set as a font-awesome icon. As you might know, that’s the way to do it according to the official FontAwesome documentation — as known and used by millions of websites.

Code Before fixing

<span class="pro-install-box">
    <div class="tooltip-container">
      <div class="tooltip-container__text">Requires Professional          Installation</div>
     <div class="tooltip-container__arrow"></div>
   </div>
   <i class="fas fa-user"></i>
</span>

The red arrow is pointing to the icon that we need to describe:

At the time, I didn't know exactly if a <i> tag supported the ALT attribute or whether to set to it was a good practice. What if I knew is that a <i> tag is for making text up? Common sense told me it wasn't a good idea to set an ALT attribute to it.

Undoubtedly I needed to lean on my closest friend, Google. After spending a few time doing research, this is what I found out.

What Does the Web Accessibility Initiative Recommend about ALT?

Based on the Web Accessibility Initiative (WAI) we should add ALT text to non-content such as short equivalents for images, including icons, buttons, and graphics, descriptions of data represented on charts, diagrams, and illustrations.

The ALT attribute’s value should never contain text that could be considered the image’s caption, title, or legend. It’s supposed to contain replacement text that could be used by users instead of the image.

— HTML 4.01 Spec, 13.2

Appropriate `ALT` Attributes Based on the Purpose of the Images.

In order to complete our understanding of this, let's discuss how to provide appropriate ALT attributes based on the purpose of the images.

Informative images

Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.

Decorative images

Provide a null text alternative (alt=” ”) when the only purpose of an image is to add visual decoration to the page, rather than convey information that’s important to understand the page.

Functional images

The text alternative of an image used as a link or as a button should describe the functionality of the link or button, rather than the visual image. For example, the close button which has a closed icon to represent the sign-out action.

Images of text

Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as the image.

Complex images

Such as graphs and diagrams. To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative. Read more about this here.

If you’re interested to learn more about the ALT attribute and the situations you should use it in, this is an ALT decision tree tutorial is a good benchmark.

Now we know more about ALT and image concepts we are ready to implement our solution.

Accessible Rich Internet Applications (ARIA)

Approach 1

Let’s take advantage of the new WAI-ARIA specs, especially when we’re using Font Awesome icons. So let’s improve accessibility by leaning on the role, aria-label and aria-hidden attributes.

<span class="pro-install-box">    
    <div class="tooltip-container">
      <div class="pro-tooltip-text">Requires Professional            Installation</div>
     <div class="product-tooltip-arrow"></div>
   </div>
   <i aria-label="Requires Professional Installation" role="presentation" class="fas fa-user"></i>
</span>

We use the role="presentation" to remove implicit native role semantics of the element. In this case, we’re removing the native semantic role to use icons while using the <i> element.

The aria-label provides a string value that labels the element. By doing this we provide the user of assistive technology, like a screenreader, with a recognizable name of the object they are mousing over.

In other words, the aria-label attribute defines an invisible label where a visible label cannot be used. Use it in cases where the text label is not visible on the screen.

Approach 2

Making our icons act as an image by using the role="img" is the second solution:

<span class="pro-install-box">    
    <div class="tooltip-container">
      <div class="pro-tooltip-text">Requires Professional            Installation</div>
     <div class="product-tooltip-arrow"></div>
   </div>
   <i aria-label="Requires Professional Installation" role="img" class="fas fa-user"></i>
</span>

Closing Thoughts

Web accessibility matters. Our mission is to give every single user, regardless of circumstances, the same user experience.

Not providing text alternatives (ALT) based on the image purpose and for non-content is one of the most most common Web Accessibility mistakes. Therefore, we need to stick to the standards and make sure our web app is accessible enough.

Furthermore, using the aria- attribute we’re improving and describing our content much more effectively when the user is using assistive technology.

Thanks for reading!

If this post turned to be out helpful, share it with your friends.

Feel free to reach me on my blog and Medium

A Complete Guide to the Composition Process of a React Native App

Roberto Hernandez — Fri, 10 Jul 2020 15:37:09 +0000

Originally published on Medium

There are plenty of tutorials on the internet advising you to spend enough time on the analysis and design stages. The React development process it is not the exception. Part of the analysis and design cycle includes the thought process of building your apps through a composition process.

But despite that, sometimes we still continue spending less time on this thought process and going in a rush to start to code. We can do it, but I bet that later you will realize that you are spending more time than you thought and probably also building apps with poor architecture design, so they may be not scalable enough.

We believe that process isn't necessary or because our app is simple. However, what I've realized is the fact of the huge amount of time I've wasted while I am coding because I didn't spend enough time on it.

Without further ado, let's jump to this thought process we should follow every single time we start to develop our React Apps.

NOTE: For the sake of the learning process, let's break the composition process only for the Global screen. The same process should be done for each module, screen, or view of your React apps.

1. Mocking up your component

No matter if the project is small or large, easy, or complex. Before anything else and before starting to code the first thing you have to do is mock up how your RN should look like. However, if you work with a designer, he is going to provide you the Figma URL, the Adobe Photoshop files, images, or whichever be is the way to share the mockups.

We are going to dive into the composition process to build something that looks like this.

2. Breaking up your UI into small chunks using the Single Responsibility Principle

Stick to rule that a component should ideally only do one only - one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

Don't worry! Just right now let's break down into reusable and one-concern components, that's the reason for the React existence.

Shared Components

This the list of the common components. Basically, they are reusable components among the different modules and app's screens.

VerticalLine: The idea of this component is to render a vertical line between two Views.
Divider: A separator between two components
PieChartComponent: Render a pie chart either global or specific data.
SectionContainer: It's just a box to organize our content. It will be used across our app.
SwitchSelector: A component to render Global or your country data.

Worldwide Screen

Let's list down components on the Global(Worldwide) screen.

Global (index.js): It's our parent. It contains all the elements on the Global Screen.
SectionContainer: It's just a box to organize our content. It will be used across our app.
LastUpdate: An styled component to render the headline and the span in a time-ago format.
PieChartComponent: Render a pie chart for global data or by country.
VerticalLine: Display a vertical line between two views/divs
CovidNumberCasesBox: Displays the number of cases for Recovered, Confirmed, or Deaths.
SwitchSelector: a switch selector, a filter to render global or country data

Arranging components into a hierarchy

Once we have broken down our UI into components, it's time to arrange them into a hierarchy based on the mockup.

This hierarchy will help us to identify the common owner component or higher which should own the state.

-Global (parent)
---|LastUpdate
---|SwitchSelector
---|PieChartComponent
---|SectionContainer
-----|CovidNumberCasesBox

3. Use the DRY principle to define your UI state.

The DRY principle stands for don't repeat yourself. In the React world, its mission is to avoid redundancy of state at all costs.

Let's go to use it thinking of all of the pieces of data we have on every component in the list components we identified above.

3.1 Rules to take into account for an efficient state management.

Use the Single Responsibility Principle (SRP) - Make a state variable responsible for one concern.

If you know that a state variable is violating the Single Responsibility Principle so then you should extract that complex state logic somewhere. Let's say a custom Hook, for instance.

Having into account the rules of the React state, on the Global Screen we have the next data:

The value of switch selector (filter)
The DateTime of the last update of data
The global data of COVID number cases.

Ok, we already now know all data to use on the Global screen let's go through each one and figure out which of them is STATE and doesn't.

According to theReact Documentation, it is a good practice is we ask these next questions about each piece of data to figure out if it is or not State.

Is it passed in from a parent via props? If so, it probably isn't stated.
Does it remain unchanged over time? If so, it probably isn't state.
Can you compute it based on any other state or props in your component? If so, it isn't state.

3.2 Figuring out the state

It's time to figure out the minimal set of mutable state our component needs our the entire app.

The value of the switch selector (SwitchSelector) changes over time and cant' be computed from anything. This state will help to not make a new request network while you are clicking the same SwitchSelector item. We got State.
The DateTime of the last update of data will change when the user clicks on the refresh button (This is a future feature). So this is State.
The COVID number cases object will be passed as a prop on the component hierarchy, so in that case, it is not State. However, on Global Screen (index.js) we set that data as State and it's going to change based on the state (SwitchSelector).

If you have followed me until here, we have identified the minimal set of app state. The next step is to identify which component mutate or should own, this state.

4. Figuring out the best place where State should live in

This might be a little tricky. However, to achieve easier, let's go dive into a few key points that will help us with that struggle.

4.1 Identify every component that renders something based on that state

On the Global screen, we have these next components.

The LastUpdate, PieChartComponent, CovidNumberCaseBox need to render data based on State. For instance, LastUpdate will render the last update of data and the PieChart component based on the filter value, and also the CovidNumberCasebox component.

4.2 Find a common owner component.

This aims to figure out the single component above all components that need the state in the hierarchy.

If you scroll up to just to the section we created the components hierarchy you'll realize that the single-component above all the previous components is the Global (index.js) therefore the state should live in.

Final thoughts

The thought process of building a React app should be something similar we walked through this tutorial.

My advice is before jumping into code, you should spend enough time doing this process. It looks long and overwhelming, however, in the end, when you have doubts, this will help you clarify those out.

In addition, this will allow you to build more scalable and efficient web apps as well as cross-platform apps with the power of React.

Thanks for reading! I hope this post turned out helpful and interesting. See you in the next reading.

Feel free to reach me on my blog and Medium

How many dads here? How do you find time to work on your side projects?

Roberto Hernandez — Wed, 01 Jul 2020 22:18:42 +0000

Sometimes it's hard for me to find enough time and make notable progress.