DEV Community: Yann Bertrand

ctrl + tab everywhere

Yann Bertrand — Mon, 21 Mar 2022 15:56:22 +0000

When using the ctrl + tab shortcut, the default browser setting is to switch tab to the next one in order.

I like it a lot but it's not default in other tools I use a lot as a developer.

Using `ctrl` + `tab` in Visual Studio Code

In VSCode we'll have to tweak the keyboard shortcuts preferences. I prefer to edit them in JSON by typing ⌘ cmd + ⇧ shift + p, Preferences: Open Keyboard Shortcuts (JSON) and then adding:

    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditorInGroup"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditorInGroup"
    }

This will allow us to navigate through grouped tabs with our browser shortcuts.

Using `ctrl` + `tab` in iTerm2

(First never forget to use the Natural Text Editing key mapping preset. I don't understand why it's not default)

To handle ctrl + tab correctly, you'll have to tweak the "Keys" tab and replace the key bindings we're looking for to switch to Previous Tab/Next Tab.

Tada we're done with it! 🎉

Public APIs situation

Yann Bertrand — Thu, 17 Mar 2022 06:52:05 +0000

Public APIs is an Open Source list of free and publicly available APIs with more than 1,400 entries from the personal side project to FAANG companies.

Created in 2015 by Todd Motto, the project quickly grew up as a reference for developers. In 2016 Todd asked the community if some people were interested in maintaining the repository. I was one of the few lucky people who joined the project. Todd migrated the project to a new organization and let us do our maintainer job.

Public APIs is now one of the most starred project on GitHub beside the React and Vue frameworks.

One issue we've been having with the project is that we maintainers don't have access to the settings. That means we can't add maintainers, update the description or labels. We don't have access to the GitHub Organization at all.

I personally learnt Todd was not the owner anymore in 2020 as I was struggling with the Hacktoberfest flow of incoming PRs. After finding a way to contact the owners they finally added some more motivated maintainers during March 2021 (that have been doing a great job since then - thanks a lot guys). They also upgraded our rights but none of us are still able to add maintainers.

Turned out the owners built a company about APIs, it's called APILayer.

In May 2021, they replaced the GitHub description of the project to add links to their company. A few times they tried to push their own commercial APIs to the top of the list, breaking the build (as we require alphabetically ordered links) and the guidelines as the point of the project is to list free APIs.

I reverted their changes and contacted them to explain the issue. I didn't have any answer from APILayer since then.

This Friday March 11th 2022 they once again broke the rules, by removing a sponsor from the project and add their own logo plus link to their company. I reverted it.

On Saturday March 12th 2022 they crossed the line by downgrading our maintainers rights without notice.

On Wednesday March 16th they removed the maintainers list from the readme and added one of their business API again.

It's now clear APILayer don't care about the project nor Open Source, their only goal is to take advantage of the large number of pageviews the project gets to redirect to their own company.

The team is still discussing what we should do to keep the project going. Please be careful with the project content now because we cannot ensure it's safe.

Other references :

Matheus wrote about the situation in the repo issues

🖥️🎥 Automated screen recording with JavaScript

Yann Bertrand — Wed, 07 Oct 2020 18:29:19 +0000

When I built the macOS defaults recording feature, I wanted to automate the maintainer work as much as possible, meaning that I want to script the screenshots and recordings, and rerun them when a new macOS version comes out. I found two packages that helped me a lot:

Record the entire Mac screen using aperture-node
robot.js to move the mouse and use the keyboard programmatically (should work on any OS)

Here is how I used them:

const aperture = require('aperture')()
const robot = require('robotjs')
const delay = require('delay')
const { compressVideo } = require('../../utils')

async function record() {
  // ...

  robot.moveMouse(pos1.x, pos1.y)

  // Action!
  await aperture.startRecording({ highlightClicks: true, cropArea })

  robot.moveMouseSmooth(pos2.x, pos2.y, 2)
  await delay(1000)
  robot.moveMouseSmooth(pos3.x, pos3.y, 5)
  await delay(100)
  robot.moveMouseSmooth(pos1.x, pos1.y, 10)
  await delay(500)

  const tmpRecordingPath = await aperture.stopRecording()
  // End recording

  try {
    await compressVideo(tmpRecordingPath, outputPath)
  } catch (compressVideoError) {
    throw new Error(compressVideoError)
  }
}

Let's explain what happens here.

robot.moveMouse(pos1.x, pos1.y)

The robot.js moveMouse method... move the mouse. It does it directly with no delay.

The x value is set from the left border of the screen. The y value is from the top border.

robot.moveMouseSmooth(pos2.x, pos2.y, 2)

The moveMouseSmooth do it "human-like". It's not perfect but it's good enough. The 3rd parameter adjusts the speed of the mouse movement.

To make sure last action is ended before doing another one, I add some delay between actions using delay.

Other robot.js methods I've been using:

const { width, height } = robot.getScreenSize()

robot.keyTap('g', ['command', 'shift'])

const pic = robot.screen.capture(x, y, width, height)

Simple as that!

Let's move forward to Aperture.

Aperture is a low level Swift script that uses the AVFoundation framework with great performances. It was built to fulfil an Open Source screen recorder needs called Kap.

The Node API is pretty straightforward:

const options = {
  cropArea: {
    x: pos2.x - recordWidth / 2, y: 0,
    width: recordWidth, height: recordHeight
  },
  highlightClicks: true
}

await aperture.startRecording(options)

The cropArea x value is set from the left border of the screen. The y value from the bottom border. I had to be careful about that, as it's not the same referential as robot.js!

const tmpRecordingPath = await aperture.stopRecording()
//=> '/private/var/folders/3x/jf5977fn79jbglr7rk0tq4d00000gn/T/cdf4f7df426c97880f8c10a1600879f7.mp4'

The stopRecording method gives us a path where the video is saved.

Then we can post process our screen recording. In my case, I built a method to resize, compress and move it to another folder.

Unfortunately, I didn't find a robust solution for resolution enforcement. So I can't guarantee the results are 100% the same on different setups.

That's it! Isn't it simple? Let me know what you think in the comment section 🙂

If you wanna go deeper in automated screen recording, take a look at macOS defaults recorder!

Visualize your 2019 physical activity in a Grafana dashboard

Yann Bertrand — Tue, 31 Dec 2019 14:52:38 +0000

I've been owning an Apple Watch for more than a year now. It's a really impressive device, I've found myself recording all the Workouts I did pretty naturally.

Unfortunately, Apple's Activity app is far from ideal when you want to play with your data and display custom charts.

So I decided to try to improve that by downloading my data and put it in a dedicated product for data visualization.

Talking about it with my colleagues, they showed me Grafana and InfluxDB.

As I'm working daily with JavaScript and I wanted to build something quick, I went with Node.js to parse the raw data from my Apple Watch and insert it inside the InfluxDB database which is directly read by Grafana.

It was the first time I had to work with Node streams since the file to parse is huge. It was quite a challenge but exciting as well!

I had a lot of fun building it and it feels good to do something I find useful 😁

Hopefully, you'll like it to.

Please create your own dashboard and show it to me!

yannbertrand / apple-watch-workouts-year-review

Visualize your 2019 activity in a Grafana dashboard

Welcome to Apple Watch Workouts year review 👋

Stability: 1 - Experimental

Visualize your Apple Watch workouts of the year in a Grafana dashboard

✨ Demo

🏗 Install

Clone the repo using Git. You'll need Docker, Node.js (tested with v12) and Yarn (tested with v1.21.1).

yarn install

🚀 Usage

The project runs an InfluxDB database and a Grafana instance, launch them with docker-compose:

docker-compose up -d

In the meantime, export your Apple Watch data from your iPhone. In the Health App:

Send the zip file to your computer.

Then run:

yarn start <path_to_export.zip>

Grab a coffee while your data is read and inserted in InfluxDB (my data takes more than a minute to be loaded)!

📈 Once the script ends, your Grafana dashboard should be available at http://localhost:3000/d/apple-watch-workouts/year-dashboard?orgId=1.

This dashboard is just a proof of concept, take full advantage of Grafana, try to edit the panels…

View on GitHub