DEV Community: Donni

Mac setup for web & mobile development in 2022

Donni — Fri, 16 Sep 2022 15:26:43 +0000

I make a big switch from my beloved iMac (Retina 5K, 27'', Late 2015) to the latest MacBook Pro (14'', 2021) with M1 Max chip. Not only because the iMac was getting old and fragile, I want to be more flexibel in my remote work. The iMac still runs a macOS Mojave (10.14.6) due to the fear to updating it because of all the small things that could possibly go wrong. Everything is precisely aligned, works fine and I don't wanted to spend hours or days with fixing stuff in a tons of projects that maybe fail afterwards. For private use I own a Lenovo ThinkPad X1 Extreme (15'', 3. Gen) with Windows 10, which I have used from time to time to make remote work, but always with limitations. The Windows Subsystem or Linux (WSL) is great and one can do nearly everything, but the biggest limitation for me as a mobile developer has always been the impossibility for Apple stuff.

My last setup was nearly 100% covered by Thoughtbot's laptop script: https://github.com/thoughtbot/laptop. Now I am highly inspired by @rwieruch and his personal setup documented in a post from February: https://www.robinwieruch.de/mac-setup-web-development. I will combine "copying" system preferences from my iMac, updating my old script based on Thoughtbot's and picking additional highlights from Robin.

The following part is not fully finished and will grow by time...

Adopt and adjust system preferences

Dock
Menu bar
turn off siri, notifications, ...
setup calendar
setup mail
- merge mail rules per SyncedRules.plist
disable most in spotlight
finder with additional commands
auto hide dock and decrease delay
- defaults write com.apple.dock autohide-delay -float 0.03; killall Dock
install xcode
- start xcode
- agree license
- setup command line tools in preferences > locations
install transporter
remove garageband
create Development folder in ~
rosetta 2
ssh key (manual copy of .ssh/config and .ssh/keys)

Homebrew

install in terminal
used for everything else upcoming
install iterm2
install vscode
update macbook script
- asdf instead of nvm yvm rbenv
git config

...

iterm2

ohmyzsh
no plugins
settings
- dim inactive panes and background windows
- working directory -> reuse previous for new tabs and panes
- cursor -> vertical
- scrollback lines 1.000 -> 100.000
- focus follows mouse
- railscasts color scheme
- key bindings for jumping across words

...

VSCode

extensions
- less then before, maybe adding them later if needed
settings
- railscasts color scheme https://dev.to/donni106/railscasts-color-scheme-for-vscode-integrated-terminal-1nhm
- secret gist (show example screenshot or maybe settings paste)
- sublime keybindings
- and also shift+cmd+d for "Duplicate Selection", instead of "View: Show Run and Debug"

...

other applications
- photoscape
- bear
- choosy
- fork
- fork cli
- shottr
- maccy
- cron
auto start applications
sync browser bookmarks

To be continued...

Railscasts color scheme for VSCode integrated terminal

Donni — Fri, 01 Jul 2022 13:32:20 +0000

Anyone still using the Railscasts color scheme for development like me? I like the smooth earthy colors besides the fact that I have been used to it for more than 10 years. It all started in Sublime Text and I have adopted it for iTerm2 for consistency. When switching over from Sublime Text 2 to VSCode I was happy to found the color scheme present as well. Since then I was unhappy with the default color scheme of the integrated terminal, although I use it very rarely.

Today I have created a color customization for the integrated terminal of VSCode which you can find as a gist here: https://gist.github.com/donni106/04a9a3cff5f41c45db52785425732482

I found a nice script that was simple to use here: https://gist.github.com/2xAA/bd01638dc9ca46c590fda06c4ef0cc5a

const col = [] // run your .itermcolors file through a parser to get json and replace the array with the output

function componentToHex(c) {
  const hex = c.toString(16)
  return hex.length === 1 ? `0${hex}` : hex
}

const mapping = {
  'terminal.background':'Background Color',
  'terminal.foreground':'Foreground Color',
  'terminalCursor.background':'Cursor Text Color',
  'terminalCursor.foreground':'Cursor Color',
  'terminal.ansiBlack':'Ansi 0 Color',
  'terminal.ansiBlue':'Ansi 4 Color',
  'terminal.ansiBrightBlack':'Ansi 8 Color',
  'terminal.ansiBrightBlue':'Ansi 12 Color',
  'terminal.ansiBrightCyan':'Ansi 14 Color',
  'terminal.ansiBrightGreen':'Ansi 10 Color',
  'terminal.ansiBrightMagenta':'Ansi 13 Color',
  'terminal.ansiBrightRed':'Ansi 9 Color',
  'terminal.ansiBrightWhite':'Ansi 15 Color',
  'terminal.ansiBrightYellow':'Ansi 11 Color',
  'terminal.ansiCyan':'Ansi 6 Color',
  'terminal.ansiGreen':'Ansi 2 Color',
  'terminal.ansiMagenta':'Ansi 5 Color',
  'terminal.ansiRed':'Ansi 1 Color',
  'terminal.ansiWhite':'Ansi 7 Color',
  'terminal.ansiYellow':'Ansi 3 Color'
}

console.log(JSON.stringify(Object.keys(mapping).reduce((obj, vsCodeKey) => {
  const itermKey = mapping[vsCodeKey]
  const red = componentToHex(Math.round(col[0][itermKey]['Red Component'] * 255))
  const green = componentToHex(Math.round(col[0][itermKey]['Green Component'] * 255))
  const blue = componentToHex(Math.round(col[0][itermKey]['Blue Component'] * 255))

  obj[vsCodeKey] = `#${red}${green}${blue}`
  return obj
}, {}), null, 2))

Before running the script I had to convert the itermcolors file to a JSON, which was able with a tool at: https://json2plist.sinaapp.com (Plist -> JSON).

The outcome needs to be copied in the VSCode settings under the workbench.colorCustomizations key.

Now it shines in the same glow ⭐

Custom icon labels in Google Charts Pie Chart

Donni — Sat, 21 Mar 2020 17:22:00 +0000

In january this year a colleague and me worked on visualizing data with Google Charts for a customer. There was this one request concerning special icons inside of the charts. My first reaction was: "This should not be possible using one of these chart frameworks". Why? Because customizing frameworks is always hard, and the request was very special. It was not about changing colors or adding white space. The wish was to change the default behaviour of a presentation inside a chart.
So in our case we had a pie chart with some slices, that should have icon labels. Normally Google Charts presents a text label or value. So, is it possible to change this with reasonable efforts? Yes it is!

TL;DR

Create and import an icon font to use it in the Pie Chart options at pieSliceTextStyle.

The solution

When we thought about what is showing in the chart, we came to the result: text. A basic pie slice has a color and a text label or value. With checking the Pie Chart options we found out, that you can choose between 'label' or 'value' instead of the default 'percentage' for pieSliceText.
When thinking about showing an icon we needed to think about the context. An icon should represent something outstanding and unique. In the chart we had data, that contained various numbers for different objects.

❕ For this article I simplify things with speaking about healthy fruits to show in the chart. So we can imagine different types of fruits, each with a random value, e.g. the amount of vitamine c.

Back in january we created a chart with text labels first, which we could show to the customer. The bad thing about using text labels was the length of the texts. Too long labels were automatically hidden by Google Charts, which resulted in a colorful tasty pie with missing labels.
After we searched the web as usual for solutions but this time without success, we have consulted again.
So we have fruits and numbers. What are we showing in the chart? Text labels for each fruit. What can we display per icon? Fruits, because each of them is unique and recognizeable.

The main question now was: How can we change the text label into an icon?

Checking the docs again, we found the option pieSliceTextStyle, which allows changing the font per fontName. This was the needed trigger for the magic idea to use an icon font!
With using an icon font we do not change any functionality of the framework. The label still remains text, but with a special font it shows what we want, instead of basic characters. 💥

Create a custom icon font

IcoMoon is an awesome tool for generating custom icon fonts. You can upload svg files and IcoMoon App will convert it and build an icon font for you for free! Thanks guys ✋

You need to add named ligatures (fi) to the icons. This makes it possible to reference and use an icon by a real name.

We have no opportunity to set custom names in the Google Charts data, so the icons must represent the labels by having the exactly same name. If we want to show a plum, we need an icon called Plum. If we want an apple, we need Apple.

Final comparison between default text labels and custom icon labels

I found nothing about that possibility on the web before, so I wanted to share our journey in this short article. It is my first ever written article. I'm open for advices. If you already read about similar approches, please share them with me.

In the end, using icons can have benefits but can also bring problems. You have to decide for each unique situation, if this is something for you.

❕ The numbers and percentages in the following image are randomly chosen. These are no true data!

You can find the code on my CodePen: https://codepen.io/donni106/pen/Exjexow
❕ Do not wonder about missing icons. The icon font was created per IcoMoon free plan, which means "These links expire in 24 hours. To get permanent unchanging links, Go Premium.", sorry!