Antonio Fullone Blog RSS Feed

The pillars of a painkiller AI app

Thu, 30 Apr 2026 00:00:00 GMT

Everyone is building apps today. It has never been so easy. Just learn some prompting and that's it, right? Sure — until your (most likely wrapper) AI app becomes a feature inside one of the giants. It has happened. It will keep happening.

There's a name for this: getting Sherlocked.

Your AI app needs to be a painkiller, not a vitamin. Nice-to-haves get Sherlocked. Need-to-haves get paid.

But how do you build a painkiller? I've been building for a while now, and here is what I've learned that separates the apps clients can't live without from the ones they forget by Friday.

Fix the friction nobody defends

The instinct is to automate the impressive work. The real opportunity is to automate the work nobody is proud of doing.

Imagine a young intern starts at a law firm. They're smart, they use AI, and they build a workflow that reads incoming client emails, analyzes the request, and prepares a brief for the lawyer. It looks great on paper. It saves hours.

Then they show it to the lawyer.

First problem: privacy. A law firm cannot let client data flow through a third-party model. Second problem: what happens when the AI hallucinates? Isn't it safer to let the senior secretary, who has been doing this for fifteen years, handle it? Third problem, the one nobody says out loud: the lawyer bills by the hour. Saving them time on the work they bill for is saving them revenue.

The intern goes back to their desk. They watch their colleagues work. They notice everyone wastes ten minutes a day searching for documents because the shared drive is chaos. Files named final_v2_REAL_final.docx, folders nobody owns, no tagging system. People complain about it constantly. Nobody fixes it because nobody is paid to fix it.

The intern builds an automation that organizes files by tags, names, and dates. Now we're talking. No client data leaves the building. No expert is being replaced. No billable hour is being eliminated. Just a frustration everybody had and nobody wanted to own.

That's the shape of a painkiller. Not the workflow people are proud of, but the friction nobody defends.

Context is not what you think

You think context means feeding more data to the AI, right? Dump the document in, get a smart answer out. That's not how it works.

We all know AI can hallucinate. But that's not the real problem. The real problem is more interesting.

You get your blood test back from the clinic. You upload the PDF to ChatGPT or Claude. The model has real data — actual numbers, not abstract symptoms. It gives you a confident answer. Maybe asks a clarifying question or two.

But the AI doesn't know if you smoke. If you drink. If your father had a heart attack at 50. If you've been on a cutting diet for three months or eating takeout for ten years. If you go to the gym or sit on the couch watching Netflix. The data on the page is real, but its meaning depends entirely on who you are. Same numbers, two different people, two different diagnoses.

This is why the doctor you've been seeing for twenty years can tell something's off just by looking at you. They have data the chart doesn't.

Your app needs the same thing. Not your context but your user's context. The history, the preferences, the constraints, the patterns. The boring details that change everything.

There are tools for this: RAG, memory layers, wikis, glossaries. Markdown and vector databases are your friends. But the tools are the easy part. The hard part is deciding what's worth remembering, and asking for it without making your user feel interrogated.

A painkiller app builds a relationship. A vitamin app runs a query.

Sell to businesses, not consumers

This one is harder to swallow, but it's the truth.

Unless you're a former senior LLM engineer at Google who also spent three years at Palantir teaching neural networks to sound human, nobody is going to care about your consumer AI app. Here's why.

Consumers are drowning. They already have N8n, Lovable, Gemini, Claude, ChatGPT, every Lovable clone, and twelve other free tools they signed up for last month and forgot about. Their phone is a graveyard of apps they don't remember installing. Yours will join the pile by Friday.

Now add the supply side. Meta, Microsoft, Amazon, Cloudflare, Google, Oracle — all of them are laying off. If you think you're smart, imagine what a senior engineer with ten years at Meta and a layoff package can build. And can you walk into an investor meeting and pitch your idea? Because plenty of those people can, and many already have. You're not competing for users. You're competing against hundreds of Lamine Yamals for a place on the squad.

Businesses are different. They're not chasing the latest model release. They're stuck on running old software full of their entire history, weighed down by bureaucracy nobody has the appetite to rewrite.

The company that makes toilet paper? That's your ideal customer.

I live in Andalusia. Andalusians don't like apps. They like WhatsApp. Send ten emails to ten businesses and wait a day for an answer. Send a WhatsApp message and you'll have a reply in an hour. That's the gap. That's where the work is.

The law firm from Pillar 1 won't switch off the giant legacy system that owns their entire workflow. But the lawyer will happily pay a monthly fee for something that organizes their files and saves them four hours a week. The small business in Marbella will not learn a new app to automate their customer support, but they would absolutely pay for something that replies on WhatsApp to their multilingual customers without them lifting a finger.

Consumers want the coolest thing. Businesses want the boring problem solved.

Signals, not analytics

Stop staring at your dashboard. Bounce rate, exit pages, keyword breakdowns. That's the autopsy. You want the heartbeat.

Look at how your users actually use the app. What frustrates you in the apps you use every day? I was talking to a friend who runs engineering at a big company, and I asked him what bothered him about an internal tool. His answer wasn't "the model is wrong" or "it's slow." He said he felt overwhelmed by the UI. Sometimes he just wanted to find a button.

This guy ships software for a living. If he's lost in your UI, your average user gave up three screens ago.

If you can talk to your users, talk to them. If you can't, or if like me you'd rather build than schmooze, there are tools for it. Microsoft Clarity. PostHog. They show you where users stop, where they click, where the mouse hovers, where they rage-quit. That's gold. Your bounce rate isn't a number to optimize. It's a symptom of something you haven't looked at yet.

This post is based on my experience building products — one I sold, though it didn't make me rich — and a lot of time observing and talking to small businesses. It's incredible what you can learn from a business owner just by asking "Hey, how was your last week?" and shutting up long enough to listen.

Now go build that lawyer automation tool that's going to make you rich. 😉

The Framing Effect & The Halo Effect: How Marbella Wins the Tourist Race in Andalucía

Sat, 21 Mar 2026 00:00:00 GMT

Today I learned about two interesting psychology concepts: the framing effect and the halo effect. I know I should stop reading non fiction books, but I can't get myself away from it.

The framing effect is a cognitive bias where people make decisions based on how options are presented with positive or negative connotations, rather than on the facts themselves.

The halo effect is a cognitive bias where one positive trait of a person or product leads observers to assume that other positive, unrelated traits also exist.

So how do these two relate to Marbella? Because Marbella has a very interesting story.

In the early 1950s, Marbella was just a small fishing village. Nothing else. Until one person bought the Marbella Club Hotel in 1954, aiming to create a private retreat for European nobility, celebrities, and high society. They saw the opportunity and framed the entire town around it. That single decision shaped everything that followed.

Now look at today's Marbella: compared with Dubai or other luxury destinations, famous people constantly visiting. We get the luxury part. But how did it reach the point of becoming such a popular place?

One name above all: Prince Alfonso von Hohenlohe. He's the one who bought the Marbella Club Hotel, invited his aristocratic friends, hosted a wedding that the European elite attended, and created an experience worth talking about.

Now fast forward to today and look at what happens.

The Framing Effect

A tourist in a cold country sees advertising and videos of Marbella online. The town is marketed as beautiful, 300 days of sun (probably more than that, honestly). They see palm trees, gorgeous beaches, those nice chiringuitos on the sand, and they start imagining themselves there.

So for once, the tourist decides to skip their classic holidays in the south of their own country and flies to Málaga — because they want to visit Marbella.

The framing effect kicks in the moment they land. The sun hits their brain, serotonin gets released, and suddenly they're happy. They pick up the cheap rental car they booked online and drive to Marbella.

They don't need to see the town. They don't need to focus on the beauty. Marbella is already beautiful to them, and because of that, they fall in love before they've really looked. They go to Puerto Banús, see the yachts, the famous faces, the Dolce & Gabbana café, and then they make those viral videos showing the marina (it's very small and it's always the same street if you look closely) saying "should I live here?"

This is the framing effect. And now I see how Apple uses the same trick every time they present a new iPhone that is basically the same as the last one. Just another one.

This is also very similar to something I've personally experienced as someone who moved from one country to another. It's called the honeymoon phase, where everything in the new country feels beautiful and better compared to what you left behind.

The Halo Effect

Now that the tourist is head over heels, they walk into a bar and order a coffee for €5. They think it's nice. It's not. Do the sugar test and see for yourself.

Or they have a cappuccino for €8. Okay, the cappuccino is fine, I can confirm that. But for the love of God, in Calabria you get a whole pizza for that.

Then they have Carbonara for €40, or some nice sushi for €80–90. For my Roman friends, yes they make Carbonara with guanciale and no cream.

They love everything. They go on Google Maps and rate it all 5 stars.

But here's the psychological trick: it doesn't matter whether the food is actually good or not. The halo effect means they love the food regardless — because they already love the place.

The Result

These two effects combined made Marbella what it is today — a luxury destination that competes with Dubai, Miami, and the rest.

But if you expand the view a little and travel around Andalucía, you discover that yes, Marbella is beautiful and it truly lives up to expectations. Seriously, come visit, you won't be disappointed. But in Andalucía, Marbella is just "one of the many." Granada, Sevilla, Ronda, Nerja, Cádiz. White villages. Stunning nature.

Marbella is just one of them. Because Andalucía is incredibly beautiful and full of towns and villages that rival Marbella. But Marbella found the right positioning, and used these two psychological effects, whether they knew it or not.

Ask any Andalusian who doesn't live in Marbella and they'll tell you: it's just a town.

So in the end, Marbella can be compared to Sofía Vergara. Beautiful, elegant, impossible to ignore.

But put Sofía in Colombia, and she becomes just "one of the many."

How you present yourself makes the difference. Marbella rose from one single event and two psychological effects.

Does it make sense to discuss about coding anymore?

Sun, 15 Mar 2026 00:00:00 GMT

The answer, in my humble opinion, is no. Human coding is dead, and so are Stack Overflow, CSS tricks, inverted binary trees, LeetCode and whiteboard interviews. IDEs are going to be dead soon. Markdown is the new HTML.

AI has changed the landscape in a way nobody imagined. This is the Industrial Revolution of software. A master weaver in 1780 could produce cloth no machine could match. Intricate, precise, beautiful. By 1820, a child operating a power loom could outproduce him fifty to one. The weaver's skill didn't become worthless because it got worse. It became worthless because it stopped being rare. That's exactly where we are.

And this is why frontend engineering, as we know it, is dead. It was a nice run, we all had fun. We got free lunches, ping pong tables, PlayStation, conference tickets and great salaries. It was fun while it lasted. We are the new weavers.

How do we survive this wave?

Shift your perspective: you're not the football player anymore, you're the head coach. Agents, skills, and LLMs are your players. Your job is to make them play well together.

The future is product engineering. Owning the whole process, not just the codebase. Understanding backend, frontend, product, design. Talking to customers. Building reliable systems. Companies will need thinkers, not ticket solvers.

Process is the real skill.

I built 10 apps in recent months. My main focus has never been the code, it's been refining a winning process. Orchestrate, organize, refine, review, QA, refine again. Take notes of what breaks, repeat until it's solid. I do more QA than code review. I research. I study how users behave. I have a framework that spins up a full app (Next.js, Supabase, Google Auth, Stripe) in one command. Login, pricing, database, all ready. My worry is how to get the user to pay, not how to name a variable. This is already happening at work too: most of my time goes into reviewing and instructing, not writing code.

Your portfolio lives in your building process now, not on GitHub. Replace those green contribution squares with slides that show your thinking, your decisions, your system. That's what matters.

One thing I've learned using AI both at work and in personal projects: always play the Italian style. The infamous catenaccio. Stay on the defensive, never trust it blindly.

UX matters more than ever.

In a world of shadcn/ui Tailwind wrappers, your UX expertise is what makes the difference. Users are overwhelmed with AI tools today. Most of them fail, hallucinate, have no idea who their ideal user is. Real UX thinking is the purple cow.

Human connection still wins.

For years we focused on our shiny tickets, pull requests, code reviews. Now if you want to survive, you have to understand your users. Talk to them. AI can't catch that frustrated sigh, that confused pause, that "ah-ha" moment on someone's face. In a web built by agents but still used by humans, you're the one who bridges the gap.

Remember JavaScript fatigue? That was nothing. The pace now is relentless. Be ready to keep up, or get comfortable being left behind.

How I built MagistrOS the intelligent teacher assistant for classroom

Sun, 08 Mar 2026 00:00:00 GMT

MagistrOS, MagistrOS app, is my most ambitious project so far. It helps teachers spot early warning signs in their classrooms, like students slipping behind. It connects to Google Classroom to import data, and it is fully GDPR-compliant: data stays in the EU, and student data is never exposed.

It can create lessons and assignments from URLs, PDFs, or plain text, while keeping student data inside the classroom context.

At the core of MagistrOS is Magi, a smart chatbot that can answer questions about classroom data, draft parent reports based on grounded real data, and even add behavioral logs for students.

I built MagistrOS because I wanted to learn what RAG really is and how it works behind the scenes. Wrappers hallucinate, and when it comes to sensitive K-12 data, doing things properly is critical. I also run QuizGeniusAI, which has grown organically to 650 users (many of them teachers), so I wanted to extend that concept beyond simple quizzes.

I used two main skills for this project, rag-engineer and rag-implementation. I wanted to compare how they performed during planning vs. execution, and also see whether Codex or Claude Code handled RAG better.

I started planning with Gemini. I ran research on Google Classroom: weaknesses, teacher complaints, countries with highest usage (USA, UK, Sweden, Indonesia), platform evolution, and competitor strategy. After that, I ran my own “complaint crawler,” an app I built to search the web and Reddit for complaints and discussions on specific topics.

Once I had the initial concept and the main three features, I moved to Codex in plan mode. I pasted the full Gemini conversation and asked Codex to challenge it with fresh research. Codex performed very well in research and produced a complete plan, including the RAG system. Then, in a separate chat, I used the rag-implementation skill to review that plan, especially the RAG section. I finally pasted the plan in to Claude Code for the last iterations and implementation.

Codex handled most of the UI work. The frontend-design skill was strong, and I explicitly asked not to use shadcn. The layout turned out well. Claude Code handled the initial RAG implementation, including a mock seeding system so I could always test with data.

Main RAG Issues I Had to Fix

Wrong voice for the real user
Early outputs sounded like tooling docs for engineers, not guidance for teachers. I had to rewrite prompts and clean up i18n strings so responses were plain, practical, and classroom-friendly.
Low-evidence behavior was unstable
When retrieval confidence dropped, answers were either generic or too weak to be useful. This was the hardest part. I moved high-stakes flows to strict grounding, so the assistant now says what is missing instead of guessing.
Retrieval quality needed heavy tuning
Dense search alone missed obvious context. Lower thresholds improved recall but also introduced noisy matches. I had to tune thresholds, add hybrid retrieval (semantic + lexical), and reranking before results became consistent.
Debugging was blind at first
Without clear retrieval diagnostics, every bad answer looked the same. Adding retrieval-quality logs and claim/retrieval audits made it possible to separate data gaps from prompt issues and fix the right layer.

What looked like “just tuning RAG” became a full trust pipeline: voice, retrieval, evidence validation, and safe fallback behavior all had to work together.

The Bigger Problem: Trust

The main issue in this app is the same issue I had in previous apps: trust. Teachers rarely trust an app they do not know, especially when it asks to import classroom data. Google is already under scrutiny for student login and data concerns, so the bar is high.

I ran a full review with Perplexity on the landing page and the core concept. After several iterations, I implemented these changes:

I built a mock-data demo so teachers can see how the app works before connecting anything.
I ask for minimal permissions at login, then request broader permissions only when the teacher decides to connect.
I built an IT page showing exactly what data is used and how it is handled.

According to my own brain intelligence (no AI needed), apps like this can be killed by Google with one small move. So I planned MagistrOS not to depend entirely on Classroom. For example, assignments can be created and shared in Classroom, but also outside of it.

One strong product idea came from Claude (app, not code): teachers can generate server-side PIN codes that map to students names (also verified server side, never exposed), so students do not need to log in or expose personal data. The PIN codes use fun, child-friendly names, which turned out to be a smart UX choice.

I think MagistrOS has real potential, but like with most of my apps, I still struggle with promotion. No social media and no marketing expertise are my biggest limits.

Anyway, this was a very fun project. I learned a lot, not just about RAG, but also about privacy, handling sensitive data, and difficult marketing.

Even more fun: writing this while seeing Kimi and Charles both on the podium. That early wake-up was worth it.

Un pesce fuor d'acqua

Sun, 01 Mar 2026 00:00:00 GMT

Since computers and internet existed, every engineer had a side project that they were working on. Today with the rise of AI everyone is building, and they are all hoping to become the next billion dollars unicorn.

I am building too, honestly I would be just happy to build something that pays me off my mortgage.

The moment is absolute peak, but this is not easy for me. I quit social media about 7-8 years ago but I had already stopped using them for some years. And I don't know how to promote my apps or get users feedbacks.

I thought it could be a good idea to "come back" online, so that I can somehow promote my projects. I tried a few social network and well, it didn't go as planned. I felt completely out of touch with basically everything I have seen today, like a fish out of water, un pesce fuor d'acqua as we say in Italian, which sounds more romantic.

Here is a quick recap of my experience:

Facebook

I lasted one week, most of it spent trying to fix the privacy settings while also trying to setup a meta business account for ads and promote 2 pages. Meanwhile Facebook thinks it's ok to show me promoted pages about fascism, hate and controversial posts that I could not give a damn.

Instagram

I lasted 2 weeks more or less. This is just an OnlyFans funnel, nothing else. I don't know if the models are AI or real, but the amount of women willing to show their body to thousands of perverts (I read the comments) for some likes is astonishing. I am pretty sure they make money out of it. There are nice real videos, but turns out most of them are from TikTok.

Cringe is the right word for LinkedIn. I never deleted my account, I simply switched my location to Papua New Guinea to skip spam. But this app is cringe, like everyone has some employees who are either too old, too good, too fired, whatever. Then there is someone who writes a post clearly written by AI on how they cracked the code to use Claude Code and make trillions and the only thing you have to do is to comment "Claude" on their post. I am still wrapping my mind around this, I just don't get it. I also deleted a few posts that I wrote to promote the apps, they felt cringe too.

TikTok

People that don't know how to dance, are dancing in front of a phone, no reason given, they call their followers "fans". A bit of the Instagram vibe here too, just that ... the age ... is lower ... and is kinda creepy. I am now terrified of eating alone in a restaurant, someone might make a black and white of me and post it there.

With TikTok it's pretty easy to trick the algorithm so I kept the app because now I can re-watch all South Park, Family Guy and Tom and Jerry sketches, which I love.

All of the above, plus a bit of trumpy touch. Everyone shouts and demeans others, everyone is building AI wrappers, everyone is spamming their new app (some built some incredibly good bots for it). I asked in an official GitHub forum if I could get some feedback, without posting a link of the app, and got banned.

Back to my cave

It's basically impossible for me to use again social media, be active on it, and not to feel weird. So I decided to go back to my cave. I started blogging again because why not, I am already an old fashioned engineer who wears a coppola, drives an old 1971 Vespa Special R. and watches Sergio Leone's movies. Blogging fits right in.

Learning to swim

Fri, 24 Sep 2021 00:00:00 GMT

Summer in my hometown is long and nice. When I was a kid we used to go to spend all day at the beach. My favorite moment was when my dad would come after work, I can still picture in my mind every frame of that moment, his blue shirt opened up a bit to show part of the chest, the short sleeve raised above the arm, the pants similar to those used in tennis with colored pockets, and Ray-Ban sunglasses, of course.

I would look at him in awe, then wait the moment he will join us in the water. We used to go far away, me following him with a large donut-shaped lifebuoy. One day, when I was 7 or 8 yo, he asked me if I wanted to learn to swim. I remember we were so far that I could barely see my mother standing and waving hands to us, probably screaming at my father why he took me so far. I did not even think a second and said yes, so he started explaining to me how to do it and moved a bit far from me, right after he had pinched a hole in my donut, I realized that the donut was deflating. The first seconds I panicked and started looking around very scared, trying to find his face. I saw him few meters away from me, laughing. I started moving and reached him, and he was like "you see, you did it!". I swam!

He told me lay on his back and grab him, and so I did. We reached the land and boy, that trip was one of the most beautiful moments of my life. I never felt so safe, so strong.

When my father passed away, I was devastated. I felt like the first moments when my "donut" started deflating, but the difference is that he would not be there, no matter where I looked. I spent a lot of time denying his death to myself, I even refused for years to go to visit his grave.

That feeling of being lost at sea has followed me for many years and made me make many mistakes, but the biggest mistake I did was trying to be "like him". It took me way too many years to understand that this cannot be possible.

Talking to a dear friend recently I got this very simple answer:

You cannot be like him because we are all different, you cannot be someone else you got to be yourself.

It's true, but what I also realized only recently is that well, I am not him but I am the person that he always wanted me to be. and that makes me incredibly proud.

A quote from my favorite books says

Every man is worth just as much as the things he busies himself with.

I have been busy in the last years building a better self, and what helped me in that was to embrace my father's principles, first of all, the love for the family. And I am quite proud of the results I got.

My dad passed away on the same day as my birthday, the 24th of September. I have never celebrated my birthday since then, I hate this day, I hate the whole month of September.

I have just one big dream in my life and make this dream come true is the best way to keep my father's legacy alive, and honor him.

Today I won't celebrate, but I look forward to the day that I make this dream come true and when that day comes, I want to sit at the head of the table put my favorite coppola on, grab a glass of wine and say

Happy birthday to me

Create a GraphQl app with PostgreSQL, Hasura, React and Apollo client.

Sun, 26 Apr 2020 00:00:00 GMT

I am having quite a lot of fun recently working with GraphQl in some personal projects. I am understanding the real advantages of using it and, more important, the fact that finally I can focus 100% on the Front End without caring too much about the backend part (yep, I am not a fullstack guy).

So let's see how we can build a simple GraphQl server with Hasura and PostgreSQL and then connect to it from the front end using React and Apollo.

Let's start creating our app, let's make it simple and use create-react-app for that

npx create-react-app graphqlapp && cd graphqlapp

We install the dependencies we need for it

yarn add apollo-boost @apollo/react-hooks graphql

And then we can start our app

yarn start

Now it's time to set up our GraphQl server, nothing could be more easier with Hasura and Heroku. You can check their starting page or if you prefer just click on this link and wait for your heroku app to be created.

Next click on view app and you should have your PostgreSQL server running, with GraphQl and also GraphiQL, which is basically a UI for your GraphQL server. I also installed the Apollo devtools for chrome.

So let's leave our app for a second and let's go to the database. Click on data in to the top level menu and and then click on add table in the left side navigation.

In this example we will create a simple app for searching our books so let's add the table books and then we add some fields: id: integer auto-increment - this is our unique key title: Character varying description: Text (we add a brief description of the book) author: Character varying added: timestamp (choose now() as default value)

Keep in mind that I am not an expert on PostgreSQL, and these fields are created based on a quick read of their tutorials. But this is the nice part of GraphQL right? No backend, no need to learn more stuff, we can focus 100% on our front end!

Let's add some data to it, I will add 2 of my favorite books: Meditations by Marcus Aurelius Atomic habits by James clear

You can add the books you want and then we have the first 2 items in our database. Let's go to the GraphiQL UI and let's try a simple grapqhl query:

query books {
  books {
    id
    title
    author
  }
}

Here we are getting our books, but - and this is the nicest part of GraphQL - we are only requesting the id, title and author, we don't want to have the description in our case. Hit the "play button" next to GraphQL and in the right column you should see the results, an object like this:

{
  "data": {
    "books": [
      {
        "id": 1,
        "title": "Meditations",
        "author": "Marcus Aurelius"
      },
      {
        "id": 2,
        "title": "Atomic habits",
        "author": "James Clear"
      }
    ]
  }
}

Done! One thing to keep in mind, Grahql always returns 200 no matter what is the results. If you are used to rest API, you have now a different way of managing errors. GraphQL will always return an object and this object contains 3 main values: data - the results of the query errors - if there is any error (this is how you should manage errors in GraphQL apps) metadata - extra data (we won't talk about this for now)

Now we have our backend setup, let's move on to the front end.

If you installed all correctly now it's time to connect our app to our Graphql server via Apollo client.

You still need one thing from the server, the GraphQL endpoint. This is visible in GraphiQL. Copy that url and let's move on with Apollo.

Open the index.js file in your app and import the Apollo Client:

import ApolloClient from 'apollo-boost';

Let's create our client:

const client = new ApolloClient({
  uri: 'https://${YOUR_APP_NAME}.herokuapp.com/v1/graphql'
});

We are now ready to fetch our data. Let's import Apollo Provider. Apollo Provider works like Contect.Provider or styled-components provider, making our client endpoint accessible to all the app.

import { ApolloProvider } from '@apollo/react-hooks';

Let's add it to our APP:

  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,

Let's create our first query now. We move in to App.js and there we need to import a hook that we will use for querying our database, together with the graphql tag for writing the query:

import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

Let's write our first query, we can copy the one we used initially in the GraphiQL UI:

const BOOKS_QUERY = gql`
  {
    books {
      id
      title
      author
    }
  }
`;

Now let's create a simple component that executes the query and renders these results:

const BooksList = () => {
  const { loading, error, data } = useQuery(BOOKS_QUERY);
  if (loading) {
    return <p>Loading results ... </p>;
  }
  if (error) {
    return <p> Ops .. something went wrong</p>;
  }
  return data.books.map(book => (
    <div key={book.id}>
      <p>title: {book.title}</p>
      <p>Author: {book.author}</p>
    </div>
  ));
};

What we do here is pretty simple: First we get the data with useQuery as I said before Graphql always returns 200 as response, but Apollo does the good job of handling the error for us, same for the loading state.

Let's change our App.js to use the component:

<div className="App">
  <header className="App-header">
    <BooksList />
  </header>
</div>

If everything went fine you should see the list in your App!

That's it! It was more easy than it looked. Have fun with GraphQL!

How to publish your first NPM Package

Sun, 19 Apr 2020 00:00:00 GMT

Some time ago I created my first npm package. I am not really an open source person since I never had much time to get involved, but once I built this small component for my website I decided to publish it, and in the process I learned a bit about building and publishing a package to NPM.

In this post I will focus on React. We will build a React component with a basic template and we will publish it to NPM. The source code is available on Github and in the NPM registry

Let's not waste any more time and let's get started with coding.

We start creating the folder

mkdir npm-react-template-package
cd npm-react-template-package
git init
yarn init -y

These steps should be familiar to all, we just create the folder and we initialize Git and Yarn so now our folder contains the package.json file. Change the main: index.js to lib/index.js so we have a little bit more of order in Let's add the licence and keywords too.

"keywords": [
    "reactjs, template"
  ],
  "license": "MIT",

You can modify your package.json file with your data. Next let's add the .gitignore file, we can use the one from Github. Create your .gitignore file in the root folder and copy and paste the raw code.

Now it's time to add some dependencies

yarn add @babel/core @babel/preset-env @babel/preset-react babel-cli babel-loader webpack webpack-cli react react-dom prop-types -D

We will use webpack and babel to transpile the code. For babel to work we need to create a file called .babelrc so let's create it and add

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

```NODE
I guess this doesn't need any extra explanation. Now right before the devDependencies we add the peerDependencies.

```NODE
"peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.10.1",
    "react-dom": "^16.10.1"
 }

PeerDependencies are dependencies that are not installed automatically when running npm install, but are required by the code that will use the package. Flavio does a great job ( as usual, you should follow him) explaining what peerDependencies are. So if you are curious go and check it out.

Before starting to create our component we need the last thing, we need the script in package.json to build the code. Before the peerDependencies let's add our build script.

 "scripts": {
    "build": "rm -rf lib && webpack"
 }

Let's now add our first file. We need a classic webpack.config.js file so let's create one and let's add the code.

var path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve('lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  externals: {
    react: 'react',
    'react-dom': 'reactDOM',
    'prop-types': 'prop-types'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        resolve: {
          extensions: ['.js', '.jsx']
        },
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

If you work with React you have probably also worked with webpack so not much new, the only confusing part might be the externals. Externals are used in webpack when we want to exclude those files from the build. Since we do not want to ship our package with React and prop-types we tell webpack to exclude it. The rest is pretty simple and basic webpack configuration.

Time to create and publish our first NPM component!

So we are ready to go and now we can create our custom component. Let's add a src folder and inside we create a file called index.js.

Our component will be very simple, just a classic Hello World! so let's add it

import React from 'react'

export default () => <h1>Hello World!</h1>

Let's now run the build command: yarn build if everything worked fine, now we have our component ready to be used inside the lib.

Before testing it our component works, let's add a quick test. I won't go much in details, maybe another time, I will be using testing library for React and Jest so let's add them

yarn add @testing-library/react jest  -D

Now we create a folder called __tests__ and we add our MyComponent.test.js. Open the newly created file and let's add a simple test

import React from 'react'
import { render, cleanup } from '@testing-library/react'
import MyComponent from '../src'

afterEach(cleanup)

describe('<MyComponent>', () => {
  it('matches snapshot', () => {
    const { asFragment } = render(<MyComponent />)
    expect(asFragment()).toMatchSnapshot()
  })
})

Run yarn jest and check that everything is fine and the test passes, writing the snapshot inside its own folder. We then add the test command to package.json

 "test": "yarn jest"

We are good to go. Now for testing the component we could use npm link but for make things easier I will just import the component from the lib folder, this is because we will ad an example folder direcly in our repo.

Let's create a folder called example and let's follow these steps

yarn init -y
yarn add react react-dom
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server -D

Let's add the scripts to the package.json

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

Then the webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        resolve: {
          extensions: ['.js', '.jsx'],
        },
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
        loader: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
}

Now we add the index.html file used by webpack to start the server and the basic App.jsx

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React Template NPM Component</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

App.jsx

import React from 'react'
import MyNPMComponent from '../../lib'

const App = () => {
  return <MyNPMComponent />
}
export default App

We import the component direcly from the lib folder, but as I said you could also use npm link anyway now if you run yarn start and we open our browser to localhost:8080 we should see our component loaded and the Hello World! text shown.

Publish the component to npm

In order to publish the component we need to have an account to the NPM website, if you don't have one just go and create it.

Then run npm login in your terminal, so you can login. Once loggedin you should see something like this

Logged in as antoniofull on https://registry.npmjs.org/.

Next step is to choose a name for our package, I'll call it npm-package-react-template and, the most important part, we need to add the version. We can also add a short description and the README file.

Here is my final package.json and the README

Before hitting the publish button we need a last thing: we want to ignore some files from NPM so we need to add an .npmignore file, here is:

.babelrc
webpack.config.js
yarn.lock
.DS_Store
src/.DS_Store
example/node_modules

Once done we can finally publish it with npm publish. If everything worked correctly you should see in the terminal the succesfully response and, usually, you should receive an email from NPM. If not, check the error, the most common error are:

Some typos in your package.json o
No version
Name of the package already taken.

Fix the errors and then hit the button again, you should be ready to go. Here is my final result

The simple things

Sat, 21 Mar 2020 00:00:00 GMT

As the rest of the World, I am stuck at home in a sort of self-quarantine. I am in Barcelona, where I came for work, and I am unable to go back to my home town, where my family lives.

I took this time alone to reflect on several things and I really want, once this chaos is over, enjoy that little simple daily life actions that, in a normal situation, I would not even notice.

Family

I am terrified for what is happening in Italy, I have my family there and I cannot go back to stay close to them. My mother is one of the subject at high risk since she has diabetes and heart problems, my brother in law had a liver transplant and his son, my Godson, had meningitis plus he suffer from a mild form of psoriasis. I have trouble sleeping at night and I keep having nightmares. I know I am not the only one in this situation, but I realise how much I love my family and how, sometimes, I have been selfish thinking about myself. Like making a plane ticket the day before and go travel somewhere around the world, while maybe my family needed me there. I know this sounds like a real Italian thing but yes, I do love my family more than anything else in this world. I can’t wait to be there and stay with them.

Walking

I like walking, I have this app that tracks my steps and I usually take my 10.000 steps a day. When I use to do my walk, I never noticed the environment around me, trees, lakes etc. Next walk I want to really take the time to look around and enjoy the beauty of our mother nature.

Pizza

I want to go to te restaurant and have a pizza, like a big one and I want it super spicy. I want to have a pizza with my family and another with my colleagues. Yes I want a huge spciy pizza, the one that you can find only down in the south of Italy.

Friends

I am in constant touch with Bram and Dan, two friends I met in Barcelona in 2009 and since then we have been always in touch through whatsapp. I realise how important is to have friends you can talk to during moment like this. And yes I miss them, and can’t wait to organise a new reunion somewhere in Europe. I also call everyday with Filippo, my best friend, he is in Switzerland and we keep supporting each other, since we have both families down there, in the so-called red zone.

Community

During the years, my country and my region have lost that sense of community that was characteristic here in the south. During these days, we are understanding how important is to help each other, we are recovering that sense of community that was lost, mostly due to politics manipulation that is better not to talk about. I really hope people will understand how meaningless and useless is to judge someone for where they come from, how they dress or their skin color.

Solidarity

My home town is a red zone, the problem is that our hospital, and the ones near by, don’t have the capacity and equipment to deal with a situation like this. Lombardy, the richest region in Italy and the one with the best health system has collapsed, imagine what would happen if Calabria is hit so hard. Yes it is terrifying. In just few days the entire community made a fundraiser and we raised enough money to buy 4 ventilators to help those who will need them. I think this is the most awesome thing happened since the corona virus breach.

I am lucky

I have been working remotely for over 3 years, I am not new to it. I work in IT, that means also that I can work from anywhere I want,. Probably I won’t lose my job and I have a salary that gives me the opportunity to help my family in this moment of needs.

I am lucky, damn it if I am. Many times I thought how much I fought to get to this point, countless hours on google learning about programming, I always thought I deserved my “fortune”, but now, looking at how many of my friends (and family) are going to lose their job, I can just say that I am extremely lucky. Sure I deserved it, but so many people in this world could not even afford a computer or an internet connection. I have now full awareness of how lucky I am.

So yes, as soon as this shitty situation is over, I will go back to my home town and have a huge party with my family, then I will call Bram and Dan to organise our reunion, and finally will go to meet Filippo and have some fun with my best friend.

These are hard moments I know, we are all scared by what is happening, but we are all together in this, and this is the moment to reflect and to understand that we have only one life, we have only one earth and the World is one. We are all together in this, and I hope we will be again all together also when we will be back to enjoy our good moments.

My father was an inspiring man, he was (and still is) my greatest inspiration. He lived a simple life and he dedicated his (very short) life to the family and the community. I am lucky to have had him as a father, and I am sure that I will be back, one day, to enjoy the little simple things in life, like he did and taught me.

Stay safe, stay home, stay healthy.

The Resilient Mindset

Sat, 07 Dec 2019 00:00:00 GMT

If you have read Carol Dweck's book, you know how the author explain the 2 different mindsets, fixed and growth. While the book is really enjoyable and well written, I feel is missing an important part.

Most of the example are assuming that there is a kid who grow up in a "normal" family, went to school, played in the school football team, and has a "normal life". The thing is that is not always the same, and I can speak a little bit from experience.

When you include in the equation also people who had less opportunity, I came to the conclusion that there is a third type of mindset, one that I call the Resilient mindset. This is a mindset that is built while facing daily challenges that are not common to many of Us. The biggest one is just being accepted for who you are or where you come from. For example, those we call (naively) minorities, non binary people, or simply women in tech.

I personally struggled to be accepted since I was in school because of where I come from, but I am still quite lucky because of my skin color and the fact that my country is located in the west side of the World. So I can only try to imagine what really feels like.

IT is (in many people's mind, more than you think) a white male world. And like in the real world, we need to look at the real tangible results of years of this type of leadership. And I'll be direct: We Fucked Up. Really bad..

From fake news, to rise of extremist to racism and supporting organizations who put children in cages, we have really really fucked up. We need a change, we need different people to take lead.

White straight men like me (I will just refer to them as men for simplicity) have failed and, despite all the "N habits of successfull people" and their "morning routines". The failure is so visible that even the other ones who fucked up greatly, the men in politics, are fed up with Us. We need people with the Resilient mindset to take charge and lead.

They Have Skills that we don't have

Let's take women in tech for example. A woman who has reached a certain position and reputation is very (very very) likely to have had some situations in which she was less valuated, no matter what.

The problem of a woman in tech is a problem that should have never existed in the first place, being accepted for who you are. But it exists and it still shocks me to hear men talking about "code has no gender or race" when well ... you just need to look around you, the people you work with, to understand that there is, in fact, a problem.

I am not a feminist and I am far from any extreme mentality or idealism, but this is a fact. ,Coming out as gay takes courage, being accepted as woman in tech takes courage, going on stage and talking in front of hundreds of people, hoping that you will judged for your talk and skills and not because of your dress, that also takes courage.

And with courage on facing those life challenges, you then build another skill, Empathy. Those 2 skills alone are enough to make someone 10X smarter than many of those smart IT men that are clearly with a fixed mindset.

We fucked up, why not let them lead

I am working on a project with 2 women, I know that at least one of them had a lot of struggles to get accepted at work. Even though she is amazing in managing people, she could not get the chance she deserved.

Some time ago, I asked her to take the lead as editor-in-chief of the project. Since then I have been staying behind the scene all this time. After an humble start, today we are having problem in managing all the emails of people who want to write for our magazine, the project is growing so much that we are literally building a community around it.

I did not give the lead to her because "she is a woman", I did it because I knew she just needed an opportunity. I know how good that person is at managing, and as a matter of fact, I was right.

I simply made the math and realised that this person was the right one, and because of her struggle, I knew she had build enough resilience and empathy to make the project take the right direction.

As humans our main instinct is still the same it was thousand of years ago, surving.

Tech is an easy world ... for men. This is why is failing. We are not used to fight for surviving, no one will ask me, at a conference, if I work in HR or I am an office manager. Getting your startup funded is not easy, but still how many startups and big companies are run by women?

In an environment where you don't need to fight for surving is hard to develop and improve your life skills, is just a fact.

This is why so many become scared when a new change to the environment happens, because they know they don't have the skills to adapt (and compete) with these changes. Unlike those who, instead, have learned those survival skills. The denial of climate change is a clear example of this, the "code has no gender" is another.

We need balance

When you look at any philosophy or religion, you will see that there is always a 2 side that balance each others, that's how the world works. Yin and Yang, good and evil, it does not matter. We need both for a balance. Even when we kill each other ... like in the wars ... Imagine for a moment if only one country had nuclear bombs during the cold-war ... Even in cases like this we need balance.

In IT there is no balance. Elon, Mark, Jack, Jeff, Steve, you name it. We have men who are being accused of sexual harrasment, or letting thousand of employees without a job. These people are "forced" to leave their companies ... with million of dollars in their accounts. This is not fair.

The latest Nobel prize? Yeah ... ".. And his wife" ... The woman who took a photo of a black hole? Ohh ... c'mon it was a team work! I'd skip the politic part but look at all those blonde guys around.

We fucked up so bad that really there are people who believe climate change is a hoax, and vaccines kill children, it's 2020 Jeez... We are going to spend billions to send people to Mars because we call it "Evolution of men", while we keep immigrant in cages here on earth and people believe it's right.

I hope things will change, I hope someone smart, who has skills, can take lead. I hope more men will vote for women in politics, more gay people can have the freedom to live their lives,

I hope one day this guy can go to his father and tell him that he is gay. I hope my friend can become the manager that she deserves.

We cannot solve the problems with the same people that created them.

That is the main problem.

Horizontal Smooth Scrolling With CSS

Thu, 31 Oct 2019 00:00:00 GMT

While working on the redesign for this expats blog, I had to create a simple instagram carousel, the one that is in the footer. It turns out that is very simple to do it with some basic CSS.

Here is the basic HTML:

<div class="carousel">
  <div>
    <img
      src="https://www.thexpatmagazine.com/static/da337e52c5c4fda4a74746c4dd0a583a/c47ac/73407466_813608455724510_1199731244955230163_n.jpg"
      alt="The Expat Magazine in Instagram"
    />
  </div>
  <div>
    <img
      src="https://www.thexpatmagazine.com/static/c6dc076adea0a7330c996f0d014f8b15/c4d4c/75341471_400626140890704_8449279261212390382_n.jpg"
    />
  </div>
  <div>
    <img
      src="https://www.thexpatmagazine.com/static/bb15373ec0f09200ac64a39bf9813c47/7ed2b/69258652_194314211570668_674865124513666831_n.jpg"
      alt="The Expat Magazine in Instagram"
    />
  </div>
  <div>
    <img
      src="https://www.thexpatmagazine.com/static/c20643536ef277a98ad3c52e7550ec49/7ed2b/69251740_149692732903083_5144742672846823710_n.jpg"
    />
  </div>
  <div>
    <img
      src="https://www.thexpatmagazine.com/static/c6dc076adea0a7330c996f0d014f8b15/c4d4c/75341471_400626140890704_8449279261212390382_n.jpg"
    />
  </div>
  <div></div>
</div>

Set the container to display: flex;, nowrap and with overflow: scroll so that now we can scroll horizontally.

/* The container */

.carousel {
  display: flex;
  flex-wrap: nowrap;

  width: 100%;
  max-width: 320px;
  height: 200px;
  overflow: scroll;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

We improve the scrolling with scroll-behavior: smooth and then we set the scroll-snap on the X axis. As for the MDN website

The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.

Basically we just snap the element to their container (try scrolling and see how it snaps to the left side of the carousel). Then in the child element:

.carousel > div {
    flex: 0 0 auto;
    max-width: 320px;height: 100%;
    scroll-snap-align: start;
}

flex: 0 0 auto; sizes the element based on its width/height, or the width and height of their container. This is why I am setting the max-width to 320px (just to set a minimum value).

Finally we simply make the image a bit better responsive (In the blog I am using Gatsby Image for rendering a responsive image).

.carousel img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Since we have set a fixed height for the carousel and that the image container has a height of 100%(height in percentage of an element works on if their parent has a defined height) we can use object-fit to make the image fit the container width without looking stretched. Finally since we set the object-fit property, then we need to set the height to be 100%.

Now we have a very simple, practical and quick Horizontal scrolling carousel.

Here is the codepen.

ReactJs State and UI components

Wed, 30 Oct 2019 00:00:00 GMT

ReactJs (or React for brevity) is the most popular JavaScript UI Library out there. One of the feature that made React so popular and pushed for his adoption is the so-called Virtual DOM. A virtual DOM is a tree that represent the actual elements in the DOM, each element in this tree is a React Component which might or might not contain data. ReactJs knows which element had changed its data and renders in to the DOM only those elements.

Understanding how this data can be manipulated in React is important as each re-render (and so the perfomance) are connected to it.

React Components and Data

In ReactJs we have 2 different types of data

Props. Data passed from some other component. This data is immutable, we cannot mutate props.
State. Internal data manipulated by the component.

Props are just read only values that are passed to the component. We can only read them. So I will focus on React state for this article.

Different Types of State in React

When working with UI components and React we can have 2 type of state:

Local State. Data manipulated directly by the component
Global State. Data shared by several components. E.G: MobX/Redux or the Context API.

React gives us a method called setState for manipulate data inside the components, we also have hooks but we will look at this later. State is also immutable, it means that each time we call setState we should return a new object:


this.setState({
  // Creates a new object merging old state and new values
  ...this.state,
  stateProp: newValue
});

Local State

Local state is data manipulated directly by the Component. A component that does not uses state is called (guess what?) stateless component :) When working with classes our state is managed inside the class with this.state:

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSearchVisible: false,
        };

        this.toggleSearch = this.toggleSearch.bind(this);
    }

    toggleSearch(e) {
        e.preventDefault();
        this.setState({
            ...this.state,
            isSearchVisible: !this.state.isSearchVisible
        })
    }


    render() {
        const { isSearchVisible } = this.state;

        return (
            <Search>
                <SearchButton onClick={this.toggleSearch} >
                <SearchInput visible={isSearchVisible}>
            </Search>
        )
    }
}

This state is local to the search component, but this is also a lot of boilerplate for simply clicking a button and I am not a big fan of classes. We can simplify this code using function components and hooks:

function Search() {
    const [isSearchVisible, toggleSearch] = useState(false);

    const toggleSearch = e => {
        e.preventDefault();
        toggleSearch(!isSearchVisible);
    }

    return (
        <Search>
            <SearchButton onClick={this.toggleSearch} >
            <SearchInput visible={isSearchVisible}>
        </Search>
    )
}

In the previous example I used for the local state, the SearchInput is depending on the Search component to be visible. We could abstract the logic in a hook to reduce even more the code.


function useVisibilityToggle(isVisible = false) {
    const [visible, toggle] = useState(isVisible);
    const onToggle = () => {
        toggle(!visible)
    };

    return [visible, toggle];

}

// Use the new Hook

function NewComp() {
    const [visible, onToggle] = useVisibilityToggle(false);

    return (
        <NewContainer>
            <Button onClick={onToggle} >
            <SearchInput visible={visible}>
        </NewContainer>
    )
}

Now we can reuse it at least more easily among our components, making it a bit easier to use it with few extra lines.

Global State

Global state is state that is shared among different components (not necessarily in the same hierarchy or nested). There are several libraries like Redux or MobX for global state management but React has also its own API, the Context API. Libraries add obviously a lot of boilerplate code and are useful for managing large objcts (state is always a single object) while the Context API are good enough for handling simple primitive values, like for example a dark theme or the language.

I won't go in details with the libraries, as there are tons of tutorials for learning how to use them, but let's look at how we can handle global state with the React API.

Context API


const ThemeContext= React.createContext('dark');

// Set a display name property for our context
// So we can debug it in dev tools

ThemeContext.displayName = 'Theme';

function Component({children}) {
    return (
        <ThemeContext.Provider value="dark">
            {children}
        </ThemeContext.Provider>
    );
}

function SubComponent() {
    return (
        <ThemeContext.Consumer value="dark">
            {
                value => (
                    <Modal style={value} />
                )
            }
        </ThemeContext.Consumer>
    );
}

The Modal component will render the dark or light style, depending on what is passed. We can update this value:


function SubComponent() {
    const [isDarkTheme, setTheme] = useState(false);

    const toggleDarkTheme = () => {
        setTheme(!isDarkTheme);
    }
    const theme = isDarkTheme ? 'dark' : 'light';
    return (
        <>
        <Button onClick={toggleDarkTheme}>
        <ThemeContext.Consumer value={theme}>
            {
                value => (
                    <Modal style={value} />
                )
            }
        </ThemeContext.Consumer>
    );
}

When To Use Global State

Generally speaking, in JavaScript everything that is global is considered bad as it carries always side-effects. React is based on the concept of splitting our UI in components and making those components rely on global state might not be the best solution. Obviously there are exceptions, a state for a user if is loggedin or a language variable, or the theme example I used above. Those are all cases when we can use global state.

But as a general rule, especially with new additions like hooks I think there are less and less case for using global state. A design system and its component should not depend on external state, unless is really inevitable.

Reference and Reading List:

Is always sunny in Calabria

Sat, 14 Sep 2019 00:00:00 GMT

When I went to Cuba, my first impact with the city, Havana, was shocking. It is incredible how these people live in poverty and, at the same, they still enjoy life.

"We have food for today, my children are healthy and I have a roof under my head, that's all I need for me and my family."

This was the answer from a woman I was talking to. After the talk, she took an old radio, like the ones we used in the '90s and put some salsa music.

After a few minutes, everyone around came and joined us dancing in the street (well I wasn't really dancing but .. I was there). Cuban people are happy despite all their problems.

I grew up in Calabria, one of the poorest regions in the so-called developed world. I am lucky enough to have a job, and I have a salary that is much higher than the average salary in Calabria.

Yet here people are happy too. Of course, we complain about the government and the politicians, but people can still enjoy life. Calabria is a beautiful but we are famous only for our 'ndrangheta, or if sounds more familiar, mafia.

Cuban and Calabrian have one thing in common, we are both used to be forgotten by the rest of the world. We are used to living like this. We are used to be the last.

Many of my friends would not be able to live in a place like Milan or London, they would end up depressed in less than a year. I could not stand anymore living in the Netherlands after 4 years. I missed the sun, the beaches, and the people smiling.

Before leaving I had a job offer from a company who was just acquired by eBay. I rejected it, and instead, I accepted a job in Gibraltar, so that I could live in Andalusia, which is very similar to my region.

I thought a lot about this episode. Many people told me that I was crazy to reject it, that Amsterdam was the best place in Europe for working in IT (it's true, it is) and that I screwed my career because of that.

I still think about it from time to time but I have no regrets. Some people spend their lives working hard to get their promotion, save money for retirement and get burnout after 5 years. Because this is what they are taught.

I knew since I was a kid that I would not have the same opportunity as anyone else, I knew that if I wanted to have something in my life, I had to work harder than anyone.

I did, and despite everything, I checked many of my "life to-do list" items. But I also let go some of them, when I realized that they would not make me happy.

Because I was born in Calabria, and here we see happiness differently. We keep smiling and helping each other no matter what. This is the beauty of my region, and this is why I am proud to say I was born there.

My coding and travel setup

Thu, 23 May 2019 00:00:00 GMT

Today I am going to share the tools I use for work and for my (movable) studio. I have been working remotely since 3 years, and mostly living in Airbnb and friends/family's couches, so my setup might be quite different than many others. There are some referral links to this article, so be aware of that.

Hardware

I bought my first MacBook in 2005 and since then I always used only Mac. Last year I bought a MacBook pro 15'' with touch bar and, let me say it loudly, it is the worst laptop I ever had.

The touch bar is completely useless and also it annoys me a lot. Especially when I hit the delete key and I also touch the bar which will turn off the sounds ... But this is not the real problem, as it is very well known, the keyboard is incredibly bad ... I have lost the "e", "command", "r", "d" and many others. They are still on the keyboard but it is a real pain typing it, since they fall apart easily, and since where I am living now there are no apple stores ... it is even worse.

Let's skip the battery, which since I bought lasts more or less 1 hour if I am not running any nodejs or Xcode process. I am planning to buy a new laptop, but without touch bar and, probably also smaller.

I also have an iPhone 7, iPhone 5, IWatch 2 and an Ipad mini.

While I still love apple, the security, the User Experience, and the design in general, I cannot understand what is wrong with their engineer. It seems that they are not able to release a single device that can have decent battery life. That means I also have 2 portable USB chargers always with me.

I don't have a second screen but I do have a USB-C HDMI adapter and I usually connect to either a tv or screen if necessary.

At home I keep the old MacBook 2006 that I bought (Still working as long as is connected to the charger), a second screen, a laser printer (connected to the cloud too) and a very simple desk.

When I traveled to Canada I bought also the Bose headphones quite comfort 15, they are not wireless but I also bought a Bluetooth adapter so I can use it without wires. I have the original iPhone's headphones.

I have a 2 Terabyte external hard disk and some USB sticks, just for an emergency but I do not put work or important data on these physical devices. I have a Dropbox account with about 10GB and paid ICloud subscription for saving all my photos and files, safely. Since I do not use social networks, Icloud is where I store basically all my life events, photos, and travels.

Coding

I use Visual Studio Code with a few extensions, mostly code highlighting for Javascript, React and GraphQL, plus Emmet. Eslint and some nice React/React Native snippets.

I have installed also the browser preview extension, but to be honest I mostly use the browser.I use the dark+ theme and vs-seti for the icons. The font is Inconsolata set to 16px.

I use Vim, mostly in the terminal, but I also use Mac Vim, which is very handy. In order to use Vim properly, because of the touch bar, I mapped the Caps Lock button to Esc, so now every time I have to WRITE IN CAPS, I must hold the shift button. If you use Vim you know how important is the Esc Key ...

I switched recently to Hyper for the terminal, I used Iterm for several years, but I decided to change.

For Git I recently switch between using the terminal and the github desktop app. But at work, we actually do not use (just) github, so I still use the terminal for most of the repo's work. And I like it. I do have few git aliases setup too.

While I use Safari for personal browsing, I use Chrome and Firefox for work. Chrome we know is great (although it eats so much ram ... ) but Firefox has become (again) incredibly good and fast, and boy ... the CSS grid in the inspector panel is much better than chrome. I would say also for CSS in general.

I use MacDown for writing posts and for markdown in general, is a very easy app with preview and it gets the job done.

Not related to coding, but I also use Clean My Mac, which is great especially for deleting the many cache files that mac creates. It saves me every time also from restarting the laptop.

An interesting app that I discovered recently is Koa11y which is basically like Google lighthouse but for accessibility.

Finally, I use Transmit for ftp related stuff.

Design

I use to have a Photoshop license but I let it expire this year. I use Sketch App for designing UI and for Mockups, while at work we use Figma, which is pretty great. I still have to learn a lot about it, mostly because for prototyping I always used ADOBE XD or Sketch. So I have to get used to Figma soon.

I used a lot Illustrator, mostly for designing Icons or just some art, and I will probably re-buy it again, as I don't see Sketch better than Illustrator for design. Sketch is mostly UI oriented but Illustrator is another thing when it comes to just design.

I design my own invoices, nothing fancy but I don't use any software and I have a Sketch template that I fill every time I have to make an invoice and then export it as PDF. As for the photos I keep everything on Icloud and, some parts, also in Dropbox.

I use Mindnode for basic mind mapping for designs, ideas, apps, websites.

I use ImageOptim and JPEG mini for optimizing images, whenever I need it. I use some online services for SVG's cleaning.

I have always with me my Moleskine, where I take notes or sketch some ideas. I really like creating my to-do lists on post-it. The idea behind is that having small post-it it makes the list short and it feels quite rewarding when I simply close all the task on one post it and then I trash the paper away.

I use also Todoist and Focus for managing my time and tasks (beside Jira and the normal bugs traker) while for a personal project with a small team we use Trello.

Travel

This isn't really a setup but as a remote worker and avid traveler I really need to also have my own setup here. In the last 3 years, I travelled with a small trolley and a big Carpisa luggage. Yes, my entire life fits in 2 luggage, not kidding. I have my backpack bought on Amazon for 29 Euros, with USB connector for recharging the phones and anti-thief protection. Oh ... it has also a nice cover for when it is raining.

As a backup for internet, I use Skyroam (ref link), but thanks to the European Union law on roaming I can also use one of my phones, although not ideal it works in emergency cases. Most of my work involves coding and pushing to repo's so few gigabytes are enough. Skyroam is great but it costs really a lot of money, 8 dollars a day, and you only get up to (I think) 500 MB. So not that much.

I have a Revolut card (ref link) connected to my main credit card and bank account. I can recharge it on the fly and it comes with few nice advantages. I can withdraw for free in any ATM worldwide up to a certain amount(Italian and Spanish banks always charge some fees), but more important I can exchange currencies in real time and, almost, at the real exchange rate. This makes me save quite a lot while traveling, as I did when I was in North America last year. Another great feature of Revolut is that I can create virtual cards that I can use online and then delete it, avoiding some extra risks online.

I use also Transferwise (Ref link) as it is very handy for transferring money in different currencies.

I have a KLM, Iberia and Alitalia miles card. You don't get many miles while traveling in Europe but, in the last 6 years, I got 3 free flights thanks to miles. (I flew in North and South America too).

I use Uber, MyTaxi and Google Maps for transportation.

Whenever I choose a place to travel, the first things I check is a co-working place. Is a good place to meet new people, but also very useful for fast internet, printing and meetings.

I usually book either with Airbnb (ref link) or Booking.com and obviously, I always check for the wifi first.

Airbnb can be tricky as many pieces of informations about the place are shared only after booking, and sometimes the hosts have limited wifi or a single wifi connection working for several apartments. Be aware that this is a pretty common tactic in several places in Europe.

I have a Kindle and I switch, for reading, between the Kindle and the Kindle app on my Ipad mini, but I prefer Kindle mostly because is the original Kindle, so no extra software or distracting tools.

I also have always with me my favorite book, a real physical book. For me is just more than a book, is like a bible and every page or line in that book is an inspiration. I am talking about Meditations by Marcus Aurelius.

Singly Linked List with Javascript

Tue, 23 Apr 2019 00:00:00 GMT

When working with data in Javascript we usually rely on arrays and objects as primary way to store data. There are in fact a lot of different way to structure our data and each one of them has some pros and cons and a practical usage. Linked List are a type of data structure that isn't talked too much and, especially when it comes to interview, seems to be a topic quite scaring.

I am not entering into the discussion of the algorithm/data structure interview for a FrontEnd (there is enough fire out there about it), but Linked List can be pretty useful compared to array, and they have a lot of advantages.

All the code is available on github.

What are linked list?

Linked list is a very simple type of data structure where each Node has a pointer to the next node.

A linked list is formed by 4 elements:

Nodes, an object that contains the value and the pointer to the next element.
Head The first Node of the list
Tail, The last Node of the list. This object as a property next that is set to null
Length (or Size) the lenght of the list.

How Linked List differ from Array

Linked List have no indexes. You cannot do MyLinkedList[1] to get your item (we will implement our own method for it), but this is a good think because it makes insertion and deletion very fast compared with Array, this is because we don't need to re-index the list.

Array are of a fixed size while Linked List are dynamic in size. If this is not clear look at this image.

The orange slots are the one occupied by the array. Once we declare our array const arr = [1,2,3,4,5] a slot of memory is assigned to this data. You can see that the slots occupied by the array are contiguous. If you look at the blue one, taken by the linked list, we can see instead that is dynamic, because each node is going to take his own space, and we jut have pointers.

The red slots indicateds a slot that is already occupied, at this point if we add a new item to the array the entire array will have to be relocated in memory, while with a Linked List the next added node it will just take the next available slot.

It might seems confusing but in fact you don't need to know all this memory stuff, it's just good to know what is the main difference with Arrays. So to recap:

Linked List are better for quick insertion and deletion. If you have to do this often, a linked list is much efficient than an array.
Linked List are dynamic in size, array are fixed. This does not mean it is always an advantage because it also means that it is using more memory (is a little trade off, like with recursions).
Arrays are better at random access

So when to use a Linked List?

If you do very often insertion and deletion of element, then go for a Linked List. If you need often random access go for an array If you need to traverse the data often, then again array is a better solution.

Practical Use for Linked List

If you think about it, a Linked List is basically a Node that points to another node (the next) but cannot go back (there are Doubly Linked List for this), it can grow dynamically and it has a start and a end (head and tail). This makes it perfect for example for a Learning Path or a Lesson Plan. Once you attended lecture one, then the next step might only lecture two, and so on.

Also, level of videogames can be seen as Linked List, you play on the first level once you finish that level you can only go to the next one.

These are some of the example that just came in my mind right now, I am sure that there are a lot more.

Let's build our own linked list

So I think it's about time to start coding something and build our own Linked List. Here some notes to consider:

Naming: Linked List, unlike arrays have no built-in methods, that means we have to build our own. For simplicity I will try to use the same naming as array. but this is not a rule. For example I like to call the method to remove the Tail (last element of the list) pop, like array. But you could call it removeTail. I prefer pop because in fact we do not remote the tail, the previous Node will be our new tail.

Coding Style: I am using ES6 classes, just to make the readability a bit easier. You can use function if you want, in the end this is what a ES6 class is so feel free to use whatever you want.

Comments: While learning these data structures commenting my code very often helped me to better remember what I did when I came back to it after some months :D Anyway, I am just warning you that I will add a lot of comment, hoping this will help to better understand what is going on.

First we build our Node and then our SinglyLinkedList Class:

/** Class representing a Node */

// We create the Node

class Node {
  constructor(val) {
    // Initialize the node with the val passed
    // And set the next pointer to null
    this.val = val;
    this.next = null;
  }
}

/* Singly List Class */

class SinglyLinkedList {
  constructor() {
    // Initialize with the basic 3 elements of the list
    // Head, Tail, Length.

    this.head = null;
    this.tail = null;
    this.length = 0;
  }
}

// Initialize List

const List = new SinglyLinkedList();

Is Empty Method

We will often need to check if our linked list is empty. We can use one of the 3 main elements of the list to verify if empty and return either true or false. Let's add this little helper then

	/**
   * Check if the list is empty
   * @return {Boolean}
   */

	isEmpty() {
	// If no head or length is 0
	// return null/false
    return !this.head || this.length === 0;
  }

Now we have a Node class and out SinglyLinkedList class, we can now add our first 2 methods. We can start with removing the head and the tail. For this we need 2 methods:

Shift - Removes the first element, the head
Pop - removes the element at the end of the list, the tail

Shift Method

Let's look first at the logic for removing the head. First we look at the edge cases:

Is the list empty?
Is the Head also the only node in the list? (if so it means is also the tail)

After considering these 2 cases we know now that the head exists and it has a next Node, which is going to be our new Head. So it's just a matter of setting head.next to be the new head.

  /**
   * Removes head and set next Node to be the new head
   * @return {Node} the removed Node
   */
  shift() {
    // Edge case 1: List is empty
    if(this.isEmpty()) return null;
    // Store a reference to the removed node
    const removedHead = this.head;
    // Set next to be the new head
    this.head = this.head.next;
    // decrease length
    this.length--;
    // Edge case 2: Head was the only node
    if(this.length === 0) {
      this.tail = null;
    }
    // Return the removed Head
    return removedHead;

  }
}

I hope the comments are clear. This is pretty easy, we just have to be careful with the edge cases.

Pop Method

Popping a node from the list, in this case the tail, is a little bit different than removing the head. In this case we need to traverse the list until we reach the end, the tail, we need a reference to the previous node wich will be our new tail. Always remember the edge cases. The steps are:

Verify if list is empty
If list has only one node, then tail and head are the same, we set them to null and we return the removed node
If none of the above we loop through the list using a reference to the next pointer.
If node.next is null we reached the end
Now we have a reference to the node previous to the tail, we set the tail to be this node.
Set tail.next to be null
Decrease Length
Return removed tail

// Check if list is empty
if (this.isEmpty()) return undefined;

// If there is only one Node
// Then we can just set head and tail to null
// And return the tail
if (this.length === 1) {
  const tail = this.tail;
  this.head = this.tail = null;
  this.length--;
  return tail;
}

// We must traverse the list
// Starting from the head
// So we get a reference to the list
let current = this.head;
// Because Singly Linked List cannot go backward
// We need a reference for what it will ne the new tail, the last node in our loop
let newTail = current;
// The tail has next null
// So the loop stops when we reach the tail
while (current.next) {
  // the newTail keeps following the current node in the loop
  newTail = current;
  // We move on to the next pointer
  current = current.next;
}

// We reached the end of the list
// newTail is now the last item
// So the tail
this.tail = newTail;
// Cut out the next Node
// So tail.next = null
this.tail.next = null;
// Decrease the length
this.length--;

// Return the node we just removed
return current;

Unshift Method

Now we want to add a new Node that will be the new head, so like in array we want to have a unshift method that adds his node to the beginning of the list. Here is where Linked List really shine and win easily. What we have to do is just to set the new node to be the head and the head to be the next of this node. Steps:

Create a new node from the value passed
Check if list is empty. If so, then head and tail are the new node
If not empty set new node.next to the the head
Set node to be the new head
Increased Length
Return the new list

Remember that all this methods works in place, we are mutating the list in place.


	/**
	 * Adds a new Node at the beginning of the list
	 * The new node is now the head
	 * @param val - the Node value
	 * @return {SinglyeLinkedList}
	 */

	unshift(val) {
		// create the node
		const node = new Node(val);
		// if list is empty set head and tail to be the new node
		if(this.isEmpty()) {
			this.head = this.tail = node;
		} else {
			// 3. Set node.next to be the head
			node.next = this.head;
			// 4. Set new head
			this.head = node;
		}

		// Increment the length
	    this.length++;
	    // Return the List
	    return this;
	}

Push Method

Now we want to add a new item to the end, the tail. This is also very easy and fast. Here the steps:

Create a new Node
Check if list is empty, set head and tail to be the same
set actual tail.next to be the new node
set the tail to be the new node
increase length
return list


	  /**
	   * Adds a new Node at the end of the list
	   * The new node is now the tail
	   * @param val - the Node value
	   * @return {SinglyLinkedList}
	   */

	   push(val) {
	   	// 1. Create a new node
	   	 const node = new Node(val);

	   	// 2. If the list is empty then
       // then the new node is both the head and the tail
    if (this.isEmpty()) {
      // set both head and tail to be the node
      this.head = this.tail = node;
    }
	   } else {
	   	// 3. Set the next pointer of the actual tail to be the new node
      this.tail.next = node;
      // 4. Then set the new Node to be the tail
      this.tail = node;
	   }

	   // 5. Increase length
	   this.length++;

	   // 6. Return List
	   return this;
	}

Ok, so now we have our basic methods. We now want to implement some helpful methods:

A Method to empty the list
Traverse the list
Search for an element in the list based on its index or value
Update a node
Insert new nodes at a certain index
Reverse the list

Empty the List

Let's start with the simple one. Empty the list


	/**
   	* Empties the list
   	* @retun {SinglyLinkedList}
  	*/

	  emptyList() {
	    this.head = this.tail = null;
	    this.length = 0;
	  }

Self explanatory I would say.

Traverse the List

Traversing the list is easy, we just go to the next node 'till we hit null. This method might come handy for some next other methods. We can add a callback to the method, so that we can then reuse the value or node to do something. I'll call this method run, I just like it more than traverse.


	 /**
   * Traverse the entire Linked List
   * @callback cb - do something with the list
   * @Example
      function log(node) {
        if(node) {
          console.log('The value is: ', node.val);
          if(!node.next) {
            console.log('we reached the end, ', node.val)
          }
        }
      }
   *
   * */
  run(cb) {
    // Reference to the head
    let current = this.head;

    // Loop until we reach the end
    while (current) {
      // Do something with the value
      cb(current);

      // move on
      current = current.next;
    }
  }

We can search in a Linked List either based on the index or the value. For the value is pretty easy to do. Just loop through all the list until you find the value you are looking for.

   /**
   * Find a Node in the list based on a value
   * @param val - the value to search in the list
   * @return the Node if found or false
   */
  find(val) {
    let current = this.head;
    // traverse the entire list
    // We could use also the run method and pass the
    // callback to it
    // But let's do it normally
    while (current) {
      if (current.val === val) {
        // we found the node
        return current;
      }
      current = current.next;
    }
    return false;
  }

Now it's time to add a search method for the list. I am saying here search, but probably findAt is a better name for the method. We pass the index and we return the node that we have found. As I explained before, we must loop through the list in order to find our node.


	/*
	* Search for a node in the list
	* @param {Number} index - the index of the node
	* @returns {Node} the node
	*/

	findAt(index) {
		// First we must be sure that the index is present in our list
		// We know that it cannot be negative and cannot be greater than the length of the list
		if(index < 0 || index > this.length) {
			return null;
		}
		// let's create a variable to keep the count in the loop
		let count = 0;
		// We keep a reference to for looping starting from the head
		// Until we find our node
		let currentNode = this.head;
		// Loop until count is equal to index
		while(count !== index) {
			currentNode = currentNode.next;
			count++;
		}

		// We found our node and we return it
		return currentNode;
	}

It's time now to update a value. This is now really easy, we just created a fintAt method that we can reuse here to get the element, using the index, and then we just need to update the value val. The only check we have to do is to see if he value exists or not:


	/*
	* Update a node in the list
	* @param val - the new value for the node
	* @param {Number} index - the index of the node
	* @returns {Node} the node
	*/

	// Set the value on a certain index
	// I use set as name rather than update
      update(index, val) {
      // we take advantage of our findAt method
      let node = this.findAt(index);
      // If node is found
      if (node) {
        node.val = val;
        return node;
      }
      // Node not found
      return false;
    }

Allright! So we get nodes, we update them we remove and add new nodes but only at the beginning and at the end, we want also to add an element at a certain index or remove it. So let's start with our insert method


/*
* Insert a new node in to the list
* @param {Number} index - the index for the node
* @param val - the node's value
* @returns {Node} the newly added node
*/

insert(index, val) {
  // We first test if the index is valid in the list
  if (index > this.length || index < 0) return false;
  // If the index is 0 then we are adding a new head
  // We can use the previous method unshift to do this
  if (index === 0) {
    return this.unshift(val);
  }
  // The index might also be the last item
  // Hence the tail. Again we can use one of the previous method
  // This time push as we add the node at the end of the array
  if (index === this.length) {
    this.push(val);
    return true;
  }
  // Create a new Node
  const node = new Node(val);


  // We find the node that precedes our new node
  let prev = this.get(index - 1);

  // We need to swap the values with our new node
  // let's use a tmp variable for it
  let tmp = prev.next;

  // Set next to be the new Node
  // Because index - 1 so we have to
  // add the node to the next
  prev.next = newNode;

  // set next from new inserted val
  // to be the temp we stored before
  newNode.next = temp;

  // We must increase the length
  this.length++;
  // Return true
  return true;
}

This also should not really be hard to undertand. Basically what we do is that we add the new node at the index and we move the value that was at that index after.

And now we can remove the node, this time we only need the index.

/*
* Removes a node from the list
* @param {Number} index - the index for the node
* @returns {Node} the node that was removed
*/

remove(index) {

  // Again let's check if the index is valid
  if (index < 0 || index > this.length) return false;

  // Or if index is the head or the tail
  if (index === 0) return this.shift();
  if (index === this.length - 1) {
    this.pop();
    return true;
  }

  // get the previous node
  let previousNode = this.get(index - 1);

  // The node after previousNode is our node
  // to be removed
  let removed = previousNode.next;

  // we set the previous node to be the next
  previousNode.next = removed.next;

  // decrease length
  this.length--;

  // return element
  return removed;
}

OK, so what is left now is to reverse the linked list. Reversing a linked list with Javascript seems also to be one of those hard interview questions. And, imo, the trickest part is just to understand what reversing a linked list really means.

The first time I approached it, without looking at any tutorial, I made the mistake of thinking to it as an array. For example in an array you have this:

[1,2,3,4,5]

And reversing it means to return this:

[5,4,3,2,1]

With linked list is different. To better understand what it means, let's look at it visually: You start with this:

1->2->3->4->5->null

And you have to return this:

null<-1<-2<-3<-4<-5

So basically that means:

First we must swap head and tail, so our new head will be 5 and our tail will be 1
Then we have to change the pointer, node.next, to be the previous one. you just need to point to next link,

There are 2 ways to reverse a Linked List. We can do it using a loop, a for loop or while lopp, or we can do it with recursion.

Recursion is more elegant as solution, but it uses more memory because each time the function calls itself and it creates a new context.

I also, honestly, get easily confused with recursions. I will do with both, first using a loop then using recursion.

So the logic behind is:

Swap head and tail
Keep track of next node
Keep track of previous node
Set a node reference to the head
Traverse the list using the node ref
Set next to be node.next
Set node.next to be the previous
Set previous to be the actual node
Move on the loop


/*
* Reverse the List
* @return {SinglyLinkedList} list
*/

reverse() {

	 /**
   	 * Reverse the Linked List
    * @return {SinglyLinkedList} - The reversed list
    * @Example
    Original List: 1 -> 2 -> 3 -> 4 -> 5
    Reversed List: 1 <- 2 <- 3 <- 4 <- 5
    */

	 // If List is empty return the List
    if (this.isEmpty()) return this;

    // swap head and tail
    // And keep a reference
    // For the tail because it will be our
    // New head
    let node = this.head;
    this.tail = node;
    // We need to variable to
    // keep reference to previous and next Node
    let prev, next;

    // Loop through the list
    // We could also use the run method
    while (node) {
      // we save the next value @example 2
      next = node.next;

      // set the next node the be the previous
      // @example 2 will be the previous of 1
      node.next = prev;

      // Set previous to be the actual Node
      // @example 1
      // @example Now 2 as 1 as next 1 <- 2
      prev = node;

      // Move on to the loop
      node = next;
    }
    // When the loop is finished
    // Our prev is our reversed list
    // So we just set it to be the head
    // @example (tail)1 <- 2 <- 3 <- 4 <- 5(head)
    this.head = prev;
    return this;
  }

One thing that I must specify here, we are reversing the Linked List in place, we are not returning a new list, it would be too easy. :D

Ok, so now it's time for recursion. The concept is always the same, but first we reverse the list using a recursive function, then finally we swap head and tail.


	reverseWithRecursion() {
    /**
     *
     * @param {Node} head
     * @return {Node} The reversed head of he list
     */

    function reverse(head) {
      if (!head || !head.next) {
        return head;
      }

      let tmp = reverse(head.next);
      head.next.next = head;
      head.next = null;
      return tmp;
    }
    reverse(this.head);

    // Swap head and tail
    let node = this.tail;
    this.tail = this.head;
    this.head = node;
    // Return list
    return this;
  }

This can be a little confusing, but the idea is basically the same, looping trough the list and swap the pointer next to point to the previous.

Recursion can be confusing, and to be honest I think, at least in this case, makes the code less readable compare with the classic while loop.

All the code for this tutorial can be found on github.

Javascript is weird: Dynamic typing and coercion

Tue, 02 Apr 2019 00:00:00 GMT

When I moved the the Netherlands, in my first job I worked for a company where I was the only Front End guy in a group of Java developers. React wasn't in the market yet and the term SPA was mostly referring to a relaxing place to go. jQuery was still the king of the Javascript Frameworks.

During our lunch discussions I was trying to make Javascript look like a cool language, until one day our lead dev told me "Just get over it, Javascript is weird!". He is a very nice guy and now works as principal developer for one of the biggest company here in Europe. More important, he was right, Javascript can be weird if you don't understand some of its core principles.

Some days ago, while organizing my office, I found a moleskine I had during that period where I added a lot of notes on my learning about javascript. It reminded me of this episode and I decided to convert these notes it in a series of posts using my former colleague definition: Javascript is weird.

Dynamic typing and coercion

Javascript is a dynamically-typed language. This means that the JS engine will convert any variable to the proper type based on the value. If you declare

let ticketId = '1234';
typeof ticketID; // "String"

and then later on you do

ticketId = 5678;
typeof ticketID; // "Number"

If you try to do this with Python or any other statically-typed language you will get an error, but the JS engine will not. It will simply do the conversion when the code is running.

Now we know that the type of ticketID is a number correct? But if we do now something like this:

ticketID += '10';
typeof ticketId; // "String" -> WTF?

Yep, now our ticket is again a String. I suggest to bookmark this page and keep it as reference to understand all the WTF going on with JS and types.

What is happening here is called coercion and it refers to this conversion, done at run time, by the javascript engine. Coercion can cause a lot of unexpected bugs and it's not just about converting numbers to string. Let's look at this very simple example

'use strict';
a = 20;
// Uncaught ReferenceError: a is not defined

// without "use strict"
a = 20; // 20
console.log(this.a); // 20

The variable a, without "use strict" belongs to the global object, window. This is also one of the reason why "use strict" is used.

Same problems can arise when we compare them. I think we all know this and why it is happening:

let numberId = 20;
let stringID = '20';

console.log(numberId == stringID); // true no type compared
console.log(numberId === stringID); // false type compared

But let's look at this one, can you guess if it's true or false?

console.log(1 < 2 < 3);

Of course it returns true! What about this?

console.log(3 < 2 < 1); // true WTF?

So what is happening here? It is obvious that 3 is greater than 2 and that 2 is greater than 1, so why it is returning true? Let's look at it step by step

3 < 2 < 1;
// 3 < 2 returns a Boolean
// So the next expression is comparing the result of 3 < 2
// which is false, so is
false < 1;
// but false is not a number
// so the JS engine will convert it to a Number in order to compare it
Number(false) < 1;
// converting false to a number returns 0
// thus 0 is less than 1 and so ... true
0 < 1; // true

The same was for the previous expression, 1 is less than 2 so now we compare true to 3 and Number(true) returns 1 so 1 is less than 3, the expression returns true. Number(false) will return 0, so that means that if we do something like :

ticketID = 0;
// our variable ticketID is equal to 0 and so is false
if (ticketID) {
  // NOthing happens, ticketID is false
  // The if statement converts ticketID to boolean
  // Boolean(0) -> false
}

In javascript, 0 is coerced to false when converted to a Boolean, same goes for an empty string or undefined or null

let num = 0;
let str = '';
let a;
// These are all false

Also NaN returns false. NaN stands for "Not A Number" but its type is number, confusing uh?

typeof NaN; // Number!!

When you do typeof null or typeof [] it will return object.

Explicit Vs Implicit Coercion

Coercion can be explicit or implicit. It is explicit when we are defining it's type, like Number('20') and it is implicit when we let the JS engine do the conversion like let counter = 20.

Finally the last "WTF" :)

let myVar;
Number(myVar); // NaN

let myNewVar = null; // never do that
Number(myNewVar); // 0

So yes, some parts of javascript are weird, others are good. I will try to write other posts taken from these notes, so hopefully with this post I can also announce that I am back to blogging.

Final note: Typescript and Flow are the 2 most well known solutions for using static types in JS, Typescript is a superset of javascript(Js with super powers), flow is a static checker.

Image credits: Programming Humor

Kitesurfing Lessons

Sun, 18 Feb 2018 00:00:00 GMT

Last week I started my kitesurf lessons here in Canary Islands. I have a very funny and nice instructor. He is Austrian and soo german in his teaching. Anyway it is very fun, for now I had few lessons and always on the land, learning how to control the kite and how to standup and sit down with it. I am feeling very excited about starting this new sport.

I was struggling on which type of water sport I could do. I would have loved to do diving, but unfortunately because of my ear problems is something that it can be very risky for my health. Diving has always been my dream so when I found out that I could not do it, honestly it broke my heart.

Surf is another option I evaluated here in Lanzarote, unfortunately the best place to do surf is a little bit far away from where I live and since I don't have a car yet, it is a problem.

So I ended up with kitesurfing. The school is very close to my house and the sport is still fun and nice. I can ride on the ocean and I look forward to the moment I can finally enter the water and do my first long ride :smile:

Sort an array of objects by date using moment

Sun, 07 Jan 2018 00:00:00 GMT

Sorting and ordering an array is quite easy, just use array.sort and pass the function which will sort it. Something like this:

const arr = [0, 10, 2, 3];
const newarr = arr.sort((a, b) => {
  return a - b;
});

Last week I needed to order an array of objects by their date. The array uses momentjs to render the dates. Looking at the moment documentation, very well written, I found easily the solution:

const arr = [
  { _id: 1, createdAt: moment('Sat Jan 07 2018 11:50:21 GMT+0000 (WET)') },
  { d_id: 2, createdAt: moment('Sat Jan 06 2018 11:50:21 GMT+0000 (WET)') }
];

const newarr = arr.sort((a, b) => {
  return moment(a.createdAt).diff(b.createdAt);
});

This will sort the array by date with moment.

22 Years

Thu, 24 Sep 2015 00:00:00 GMT

Today it’s my birthday. 22 Years ago on this day I turned 16th. 22 Years ago on this day my father died. Every year on this day I wake up living the same scene, I see my mum crying, my sisters in shock, my little sister taken away by my aunt.It could have happened a day later or before, but no, it happened just on my birthday.

A lot of people told me that was a “sign of the destiny” but I don’t believe in that, I don’t believe in those religious things, I just know that he’s gone, just on the most important day of my life.

He was for me like a hero, my inspiration on doing everything. The day before he promised me to let me take the driver license for the motorbike, I was dreaming to get one. He knew he was dying but he smiled at me and said yes, because he would never disappoint his family. He taught me how important is to love your family.

He looked always serious from outside but was a funny man in private, with his sons. He was strong, very respected among all our relatives and friends, everyone who had a problem or just need advices would look for him, he had always the right answer and suggestion for everyone.

I am not like him, but I wish I was. I don’t even look like my age, when people ask me how old I am they look at me surprised "Really?" ... I don’t even get close to be like him. The day after his death I promised myself I would do everything to make him proud of me.

I never celebrated my birthday again, Jesus, how can I? For years I wondered what can I do to survive this day, then year by year I slowly started to realise: I cannot change what happened, I have all the rights to do not celebrate my birthday but I cannot hide myself behind tears or rage, the only thing I can do is to do my best to keep my promise, make him proud of his son.

I listen to the same song all the day, and then the day ends, I go to sleep and another year is gone.

It's been 22 years, but I still miss You.

Off Canvas with only Css

Fri, 03 Apr 2015 00:00:00 GMT

Yesterday evening I was bored at home (as usual) and the weather was cold (as usual) so I decided to spend some time fixing some bug on this site.

I linked the "contact" link in the navigation to the contact section in the footer. My friend Marco suggested me that this way was not clear on how to find to contact so I looked for a solution, which I founded in the :target pseudo selector.

How :target work is pretty simple, it just matches the selector id with the hash in the url. So if you have a url like this mysite.com/#contact you can style your element with #contact:target. And so I did for the email link in the footer and highlight the email link in bold-red when matching the target.

After that I started to experiment a little bit with this selector, and i came up with this (kinda of silly) off canvas. Basically with no javascript and no checkbox hack it is possible to create a complete menu. Another trick I used is on the close button, where I just change the #hash and so removing the style to the sidebar. You can check the example here and on codepen, and the code here.

Of course keep in mind that is something that would never end up in production but it was fun to play with it. Highliting the section I think is ok to use it, as it is just an enhancement. :D

Go to example : Off Canvas with only Css using the :target pseudo selector

Bye Bye Wordpress, welcome Jekyll!

Mon, 27 Oct 2014 00:00:00 GMT

I use to blog a couples of times for year, maybe three. Wordpress is really too much for me, I am tired of dealing with updates, database, plugins, spam. I did a first small move the last time that I redesigned my blog, making the about and home page static, and moving only to (real) blog part to Wordpress, but it turnout that was even more hard to maintain.

Also the template system in Wordpress is complex while I, as you can see, I like to keep this site much simple as possible.

The answer to all my questions is Jekyll. I was intrigued to use it, but a little bit “scared”, I found out instead that is really easy to set up and use. I installed the Mac version, opened my Textmate and started moving the code from Wordpress to static pages in less than a weekend.

Jekyll has his own template system, and once you do the build, the only thing is to use the same name pattern for the posts.

Another reason why I moved to Jekyll is the fact that I love writing with IAWriter, which has a very good support for Markdown, and Jekyll uses Markdown for its posts, so it’s a perfect combination.

The last thing to do was to find a good way to avoid to deploy manually every time, so I found Glynn which does the job for you, deploying also on the FTP.

Next step is to move also my italian blog (which basically will just be a copy of this one, but probably different contents) where I use to blog more often, like 6/7 times a year.

I am very happy now with the results, here some simple advantages I found on Jekyll:

Template : as I said above, easy, simple faster.
Static pages mean also speed, the page now load much faster.
Easy writing with Markdown.
Ridiculously easy to update and maintain. You just need a grunt file.
More freedom on styling and editing the posts, I can get rid of the rigid template system and build custom post each time I want.
Easy to update. It’s just html right? :D