After a few months of work, I just launched NFT Map Quest: Rare maps of your favourite places!

In Map Quest, you can navigate a map of the world, zooming in and out as you like until you find the place you want to crystallise into a token. Press mint, and that’s it. You own the place now.

It’s deployed on Optimism L2, so transactions are less than $2 and mint is only 0.01 ETH. I hope, this way, to promote adoption of L2s so we can start to onboard more and more people to web3.

You can play with it here https://nft-map-quest.vercel.app

I hope you like the idea and if you have any feedback, please reach out!

2019 and 2020 have been years of personal transformation. I focused on anything but tech. It was not exciting for me anymore. But in the last few months, I was able to get out of my comfort zone, ask for help to great friends and invest time and effort in building.

Now, I am finally ready to share my latest creation: Mastering the iOS Interview. It’s a video course to learn how to master your next iOS job interview and get that dream job you’re after.

Mastering the iOS Interview

I hope this is the beginning of a series of video courses to help other software engineers get the jobs they like.

Let keep 🤞.

PS: feedback is alway welcome!

Mastering the iOS Interview was originally published in A Swift misadventure on Medium, where people are continuing the conversation by highlighting and responding to this story.

It becomes essential then to install multiple versions of Xcode on the same machine. Here it’s how to do it.

Latest Xcode version

The latest version of Xcode should generally be installed from the AppStore, since Apple does not provide a downloadable version. It will get updated by the AppStore when a new stable version comes out (automatically or manually depending on your AppStore settings).

This Xcode version will just be named Xcode in your Applications folder.

Older Xcode versions

You can download old versions of Xcode and install them on the side of the latest one. So you can just choose which version you want to launch depending on your situation.

Open https://developer.apple.com/download/more/ and login with your developer account. Then write Xcode in the left column’s search bar. You will now be able to dowload older and newer versions Xcode, including betas and RCs.

After downloading the archive, unpack it. Rename the extracted Xcode app something like Xcode_11.7. Then, move it into the Applications folder.

You are done. Good development!

How to Install Multiple Versions of Xcode on the Same macOS Machine was originally published in A Swift misadventure on Medium, where people are continuing the conversation by highlighting and responding to this story.

A group of brave souls behind SwiftWasm are working on adding WebAssembly as a compilation target for the Swift programming language. It’s a work in progress, so it’s not fully ready yet. But we are already able to get Swift code executed in a Wasm runtime (e.g. the browser)!

Let’s set up SwiftWasm on the latest macOS. Then let’s attempt to create our first Swift-based app!

Install Swift Language With Wasm Support

The Wasm support is not yet in the official Swift repository. Therefore, we have to install a snapshot of the language with experimental support.

Download and install the lastest macOS version of SwiftWasm (5.3 at time of writing) for macOS from the project GitHub.

To be able to use the SwiftWasm toolchain from the command line:

export PATH=/Library/Developer/Toolchains/swift-latest.xctoolchain/usr/bin:"${PATH}"

And to test it has been properly setup:

swift --version

Test SwiftWasm

Create a HelloWorld Swift file:

echo 'print("Hello, world!")' > hello.swift

Compile the Swift source code to Wasm bytecode:

swiftc -target wasm32-unknown-wasi hello.swift -o hello.wasm

Run the Output

To run the code from the command line, you can use wasmer (a Wasm runtime).

Install it:

curl https://get.wasmer.io -sSfL | sh

Execute your Wasm code:

wasmer hello.wasm

Make a Swift Package With SwiftPM

We can leverage SwiftPM to create a package that will then be compiled to Wasm.

It’s simple. Let’s create a package named testpack and then just compile and execute it:

mkdir testpack && cd testpack
swift package init --type executable

Let’s build it:

swift build --triple wasm32-unknown-wasi

Execute it:

wasmer .build/debug/testpack

Next Up, Create a Web App With SwiftWasm

We just barely set up the entire thing and executed a mere Hello World. Now let’s make our first ReactJS- and SwiftUI-inspired web app with Swift!

Get Started With Swift for WebAssembly on macOS With SwiftWasm was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

SwiftWasm is experimental but that doesn’t mean we can’t have some fun!

The first step is to set up your macOS machine to use the experimental SwiftWasm (WebAssembly compilation target). Here is a guide on how to do it.

Install the Development Tools

We are going to use Tokamak to create a web UI using the SwiftUI-inspired syntax. The long-term goal is to create web UIs just like we do for the Apple ecosystem.

But first, let’s install some development tools to simplify the process:

brew install swiftwasm/tap/carton

Create a Tokamak-Based Project

mkdir TokamakApp && cd TokamakApp
carton init --template tokamak

Now let’s start the development server with live reloading:

carton dev

Open in your favourite browser http://127.0.0.1:8080. Now every time you edit the code in the project, carton will reload the browser tab. Very JS-development style. Convenient.

Reality Check

Now the theory goes that we can write the app UI with Tokamak as if it was SwiftUI code. The reality is that Tokamak is far from finished, so not all SwiftUI entities are fully implemented yet.

Using a JavaScript Wrapper to Create Your Website

What we can do is go down one level and create DOM elements with the support of JavaScript. We can use DOMKit. It is a medium-level Swift wrapper around the browser’s DOM.

Or we can go down two levels, using JavaScriptKit. It is a low-level Swift wrapper around the JavaScript API that we use to interface with the DOM directly.

You can find more examples here.

Importing and Exporting Functions

Until the Swift web tooling is really solid and features are complete, we will probably still have to develop some part of a web app with JS-based frameworks. Therefore, the need arises to import some JS functions into our Swift app. But probably it will be more useful to export some Swift functions to the JS app, like exporting a really performing and computing intense Swift function for image manipulation for the JS interface.

Conclusion

Swift for WebAssembly and for the web in general is clearly immature and incomplete, but it’s a very encouraging start. I really hope that it becomes a real option for full-stack Swift web developers in the not-too-distant future.

Create a React and SwiftUI-Inspired Web App With Swift for WebAssembly on MacOS With SwiftWasm was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

After a quick research I have found a good solution. It is a two part tutorial:

1. Remap the current ⌘Q for Safari to ⌥⌘Q, so you will not trigger the Quit unintentionally
2. Create a script to show a Quit confirmation alert when ⌘Q is pressed

Note: the second step is optional.

Remap ⌘Q in Safari

Currently Safari has ⌘Q as the Quit shortcut.

Open Preferences > Keyboard > Shortcuts. Select App Shortcuts, then tap the + button.

Fill the prompt as follows:

• Select Safari for Application
• Type Quit Safari in Menu Title (the title should be this exact one)
• Press ⌥⌘Q on your keyboard after tapping in the Keyboard Shortcut field

Tap Add button when you’re done.

Now Safari has ⌥⌘Q as the Quit shortcut.

Add a confirmation alert for Quit Safari

Open the Script Editor app. Copy and paste the following code:

tell application "Safari"
    set _window_count to count windows
    set _tab_count to 0
    
    repeat with _w in every window
        set _tab_count to _tab_count + (count tabs of _w)
    end repeat
    
    -- Make a string like "1 window containing 3 tabs."
    if _window_count is 1 then
        set _msg to _window_count & " window containing " as string
    else
        set _msg to _window_count & " windows containing " as string
    end if
    if _tab_count is 1 then
        set _msg to _msg & _tab_count & " tab." as string
    else
        set _msg to _msg & _tab_count & " tabs." as string
    end if
    
    display alert ¬
        "Are you sure you want to quit Safari?" message _msg ¬
        buttons {"Quit", "Cancel"} ¬
        giving up after 60
    if button returned of result is "Quit" then quit
end tell

Save the script as SafeQuitSafari in some temporary location.

Download and install the free scripts management app FastScripts. Open it.

Make sure you have a Safari window open and in focus (important). Then tap on the FastScript top menu bar icon and select the Open Safari Scripts Folder from the FastScripts submenu.

Move SafeQuitSafari script inside the opened folder.

By clicking on the FastScripts icon in the top menu bar, you will see the new script listed (if Safari window is in focus).

Test it

Open Safari again and tap ⌘Q. You will now get the confirmation alert. Cheers 🍻

How to Get Confirmation Alert Before Quitting Safari on macOS was originally published in Mac O’Clock on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s good etiquette because it gives transparency. It’s good practice because it makes the component you created more scalable. It makes sense because it makes code easier to test.

When creating your future entity store the init parameter as a property with the same access control level of the entity itself. If your entity is public make it public. If internal keep it internal.

One last thing. Please be consistent in the codebase. Don’t go for one logic in one place and a different one in another. Consistency makes understanding your codebase much easier. Especially when there are many team members.

Expose Init Parameters and Dependencies in Swift and iOS Please was originally published in A Swift misadventure on Medium, where people are continuing the conversation by highlighting and responding to this story.

Moving from Intel to Apple’s custom made ARM processor is not just about control, quality and performance. It will also transform Mac customers’ upgrade cycles, making them similar to the smartphones’ ones. For a number of reasons.

Yearly releases

I think Apple will release new Macs every year. Like it’s happening right now for iPhones. Every year there will be a new A-something processor which will debut on iPhone. Then on the new iPads and Macs.

This is a big deal since…

Substantial improvements of performances

Every year the new iPhone processors improve of 30–50% on performances. Single task, multi task and graphics. And graphics performance improves at even a higher rate.

Every year or two, potentially, you will have a real reason to upgrade. Tp software developers, 3D artists, video makers, musicians or photographers that is really appealing.

SoC

Apple is not calling this ARM processor. They are calling it Apple Silicon for a reason. In a traditional PC you have a CPU, a GPU and then other chips for specific tasks. Generally, they are all communicating through the motherboard. Apple Silicon, instead, will integrate CPU, GPU and a lot of other chips (proximity, security, machine learning, etc) into the same silicon chip.

All these different units (previously chips) are talking to each other without the bottleneck of the motherboard. So, again, better performances.

With the new Silicon chip that Apple will release yearly, there will be new set of computations that will become more performant. Take for example Machine Learning. New iPhones are monster at this thanks to the dedicated unit. It allows new use cases like live translation between 12 different languages on device (no internet).

Gamers

Gamers will love that sweet sweet yearly bump in graphics performances. Especially since game producers will start to seriously target Mac for serious gaming. They will be able to access iPhones, iPad and Mac with one engineering effort. They already have access to a lot of iOS customers. Now they will also have access pro gamers without much more engineering time.

Conclusion

This is the first time I am excited about a new Mac. I have a late 2013 MacBook pro which works great. Except when I do a Skype call or I try to use Jira…

But this Xmas I am pretty sure I will upgrade.

Strategic benefits of the new Apple Silicon processor for Mac was originally published in Mac O’Clock on Medium, where people are continuing the conversation by highlighting and responding to this story.

Learn how to load the Stripe Checkout webpage for your product or subscription inside your React Native Expo app without ejecting and be SCA conformant from September 2019.

Before September 2019 there was a simple way to integrate Stripe in your React Native Expo app without ejecting. But now, due to the SCA (Strong Customer Authentication) regulation, that solution is not valid anymore.

You either have to integrate the official React Native Stripe Javascript SDK which requires ejecting from Expo (not fun). Or you can host and then open a webpage with a “Checkout with Stripe” button which will redirect to a purchase page hosted by Stripe.

In this article, I will explain the latter with an improvement. You will be able to immediately load the Stripe Checkout page for your product from your app without ejecting from Expo and without having to host a webpage on your server.

The user journey and data flow

This is what will happen:

• your user taps on the “Buy now” button inside your React Native Expo app
• you are going to navigate to a PurchaseProduct screen
• PurchaseProduct screen will automatically load a full-screen webview with some HTML
• the HTML code loaded contains the Stripe Checkout loading function that is automatically called
• the webview will be redirected to the Stripe Checkout page for your product
• your user will complete the purchase
• the webview will be redirected to a success or cancelled page URL
• the PurchaseProduct screen will be monitoring the webview current URL to determine the purchase status
• your success or cancelled callbacks will be called
• Stripe will send an event to your backend webhook if setup
• you will (ideally) double-check and confirm with your backend if the purchase has actually been successful or not
• you go on with your life

Stripe settings

First, you have to go to the Stripe Dashboard and create a product or subscription that you want to sell (in test mode to start).

Once you have that data you will be able to create a stripeSettings.js file with these settings.

The Stripe Checkout HTML

As previously said we are going to load a webpage with the HTML/JS code to automatically load your product’s Stripe Checkout page.

Download or create a file named stripeCheckout.js with the following code.

The function is based on the code to create a Subscription Checkout button described here. If you want to create a page for a one-time payment (like buying a product) update the code settings with the info here.

Note: In the original HTML code, a “Checkout with Stripe” button is showed. The user has to tap it to actually be redirected to the checkout form. This edited version of the code automatically redirects the user to the checkout form when the page is loaded.

PurchaseProduct Screen

Now let’s create a purchase screen component which contains the webview.

First, let’s install the webview component:

npm install --save react-native-webview
or
yarn add react-native-webview

Then create the component file with the following code.

In this code, we are creating a component which renders a webview with the generated HTML. So we do not have to host the HTML somewhere on a server.

Your backend should be registered for Stripe webhook events to be sure the payment has gone through and everything is successful. So, we are passing the user id in the HTML, because it will be passed as a parameter to the webhook callback. This way the callback event handler on your backend knows who’s the event refers to.

Glue it all together

You are set. Now if you have customised the Stripe setting object and you navigate to the PurchaseProduct screen, you will be able to see it autoload the Checkout page for your product. Fill the form with mock data and a test credit card and you will see that your success handler is called.

This should be enough to get going.

Thanks to Mattia for all the help with React and for his countless advices.

How to use Stripe Checkout Javascript SDK in React Native Expo app without ejecting — 2020 SCA was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

It was the beginning of the year. Early in 2019. I had finally found a satisfying side project to work on: a spreadsheet in which you could write javascript code. You would be able to make programs out of a spreadsheet.
Without asking myself too many questions, I just started to work on it for the pure joy of it.

Then it came the point in which I started to dream about people using it to build cool stuff. More and more I thought about it, more it seemed feasible. So, I decided. I resigned from my job and I started to work on it full-time. And the first thing I had to do was to talk to potential users.

“This is so much talking…”. I spent two weeks talking with every person using a spreadsheet to understand what for. I spent time talking with people in the no-code movement. I also spent time with web hacky engineers who made a lot of quick things.

I quickly realised that my JS-powered-spreadsheet was a bit too technical for the no-code folks, but not flexible enough for hacky engineers. With spreadsheet users, things were a bit less black and white. They used to do a lot of different things. Some used spreadsheets for accounting, others to visually organise information, others to create complex analysis and everything in the between. Not good. I had to dig deeper in some of those verticals.

After hours and hours spent on the phone with spreadsheet users, I narrowed it down to people working with data. Data analysts, business analysts and data scientists. These people receive data from a colleague, inside a report or as a database dump. Then, they have to analyse it, make some discoveries and create a report of some kind.

Talking with them some more, I understood that a big part of the data jobs is preparing the data to be analysed. The datasets they receive are sometimes copy-pasted from some other report. Sometimes data is hand filled. So the data is not necessarily consistent.
Let’s say in a dataset column there are stock prices. They expect to always find a valid USD price. But sometimes it is a negative number, sometimes it is a “Null” text, sometimes it is missing. They have to decide what to do in these cases, manage the problem and create a new error-free dataset. For example, they could decide that all negative and string entries in this column are invalid and they need to be replaced with zero. Or maybe they decide to remove the entire row.

All these actions, right now, are performed by hand with search-and-replace inside Excel. Or writing Python scripts with extensive copy-and-paste from the internet.

“This is my opportunity!”. I can make this process easier, more productive and generally better. I’ve found it, I thought.

So, by now I probably already spent 25 hours on the phone talking with a lot of people and I feel I have a pretty clear idea of what I have to do. I started sketching the user journey to import and export a dataset; user journey to visually apply “Cleaning rules” to clean and fix the values inside a dataset and preview the changes.

Then wireframing all the different screens and their states. Then I improvised myself a visual designer and with Sketch, I applied what I learned throughout the years. Quite a good result, I thought.
Finally, I spent a good deal of time writing code to make all these sketches into a working product. I have been ruthless in trying to cut everything that I thought was not essential to test the core value I wanted to deliver to these data analysts. A month goes by and I am ready to launch and test.

“It is April and the weather starts to be good.”. I am ready. I silently launch. It is exciting for me, irrelevant to everyone else. Then back on the phone. I do some user testing session with people I previously spoke and with some new. In a week I understand that there are pretty big usability issues. Ok, I implement a better user journey for the “Apply a Cleaning Rule and preview the result”. The next calls were still quite negative about it. So, I simplify. I focus on the main use case.

“Cool now in the interview they understand how to use the product.”. The feedback is starting to get positive. But this cleaning rule is missing. And also that one. Ok, I add this and that. Now my users can switch from their not so great solution to my awesome one. Build, ship and interview again. Feedback gets better, but the metrics say still a pretty clear and grim story. Zero usage…

Ok, let’s look for bottlenecks. Here and there. Although, it seems that people are giving it a pretty good try. But they never come back. Ok, maybe they’ve not understood how powerful this thing is. So, let’s work some more on the documentation, real-life examples and onboarding features. Sketch, code, ship. Still nothing…

“Talk with some more user.”. Make some more user testing sessions. The feedback is good. This solution is better from the status quo. But it’s not 10 times better. I don’t have a silver bullet. I need it to make them switch from their current solution.

“Oh, yeah! Automation!”. Instead of asking them to do 10 steps to clean a particular data column, I achieve the same result with 3 steps. I can automate a few things. I try to validate this assumption in the next calls. It seems a promising path.

“Ok, this is the time”. I invest 2–3 weeks in sketching, coding and shipping… I am tired by now. But I am finally here. The automation works well. The user experience of the product is really good. The communication is clear. I am even quite proud of the visual design I made. They are a good result for a developer. But the thing I am most proud of is that I’ve been able to build and test so many things in so little time.

“Now, it’s the time of the truth…”. I pick up the phone again. And make some more user testing sessions. I do probably other 7 calls. There is no need of talking with more users. The response is quite clear. It did not move the needle. Not a bit…

“I am tired, I just want to go to sleep”. Over the next few weeks, I have tried some spinoff of the technology to apply to a single problem, like Sentiment Analysis. But needless to say that it did not work too.

It’s now the end of the summer. I’ve invested a lot of months, a lot of savings and missed income. But that does not matter. What matter to me right now is that I still have not been able to make a sustainable business. Not even a really small one. And I have no more ideas or energy.

This is how I failed in creating Fluidtable.

And I am not going to draw conclusions and tell you what I learned. I find it quite useless. I will tell you what are the implications for my morale though. It is bad. It cripples your confidence in your abilities. It smashes the ambition. It makes me wary of telling again about my visions, ideas and projects to my family and friends. I feel like I’ve let them down.

This is not my first product or startup. It is ten years that I have been trying to create a successful business. And this is just how I failed the last one. What scares me is that with every new failure, I feel I am less and less likely to create something successful. I am losing ambition, confidence and to blindly believe in a powerful vision. Which is exactly what you need to be a leader and a founder.

Something good will come out of this, but for now, I have to deal with yet another failure.

A big thanks to Simone and Mattia for all the help during this year. You are good friends.