• Please complete the contact form below with details about your inquiry and I'll get back to you as soon as possible.

  • This field is for validation purposes and should be left unchanged.

Archives

Fix: VSCode + ElixirLS Intellisense for code imported with `use`

I am using VSCode with the ElixirLS extension for Elixir development. My operating system is Ubuntu, but I think this guide should work for other systems if you know where to find your VSCode extensions folder.

The problem: IntelliSense, aka ElixirSense, and jump to definition, would not work for functions and macros imported with `use`. For example, while working on a Phoenix project, I would not get any code completion or useful suggestions inside a Schema module for macros such as field, embedded_schema, etc. IntelliSense would work for other code explicitly imported in the same module, or for functions referenced by their full name, ie Kernel.update_in/3. So for a long time, I thought this was the correct way that ElixirLS was working, and that I couldn’t get IntelliSense for code imported via  `use`.

The troubleshooting: After a little bit of research, I found out that ElixirLS should actually provide IntelliSense for code imported with `use` (source). I also found out that the ElixirLS (the language server) that came with the ElixirLS extension I installed from the marketplace, was actually compiled with an older version of Elixir: v1.8 vs my current v1.11.2. Due to this version difference, IntelliSense would not work properly in some circumstances. If you want to find out these versions, you can see this information in the ‘Output’ tab, for the ‘ElixirLS’ extension as seen below:

I took this screenshot after I had updated the ElixirLS language server in my extension, but previously it was showing “ElixirLS compiled with Elixir 1.8 and erlang 21”.

The fix: In order to fix this, I found the following instructions helpful. This is what I did:

  • Find my ElixirLS extension’s folder. One way to do it, is from the ‘Output’ tab again. See this screenshot. In my case, the folder would be at ~/.vscode/extensions/jakebecker.elixir-ls-0.6.2/
  • Somewhere, clone the ElixirLS repository: git clone --depth 1 https://github.com/elixir-lsp/elixir-ls
  • Now cd elixir-ls and run mix deps.get to get the dependencies
  • Now in this next step, we will need to use the ElixirLS extension folder path we found in step 1, and build the path to the inner ‘elixir-ls-release’ folder, so the full path we’re interested in should be something like ~/.vscode/extensions/jakebecker.elixir-ls-0.6.2/elixir-ls-release/
  • Close your VSCode application if running
  • We are now going to build the ElixirLS (the language server) using our system’s Elixir & Erlang versions. Run mix elixir_ls.release -o ~/.vscode/extensions/jakebecker.elixir-ls-0.6.2/elixir-ls-release/
  • Next, I am not sure if this is really needed, but I removed the .elixir_ls folder in my project to let the extension rebuild it.
  • Launch VSCode and check if IntelliSense is working properly (hopefully it does)

Here’s the entire list of commands I ran:

cd ~
git clone --depth 1 https://github.com/elixir-lsp/elixir-ls
cd elixir-ls
mix deps.get
mix elixir_ls.release -o ~/.vscode/extensions/jakebecker.elixir-ls-0.6.2/elixir-ls-release/

Please note, as one ElixirLS team member mentioned here , if you build the language server with an Elixir version newer than what your project can work with, the universe might implode, so keep that in mind.

Fillichor: the smell of fall

It’s fall season – my favorite time of the year! And with that, comes something that most associate with this season: the smell of leaves. So I was thinking one day, there is a word to describe the smell of rain after a hot dry summer day – petrichor. There must be a word to describe the smell of leaves that is specific to the fall season, but I couldn’t find any. So, with a little bit of spare time, and a little bit of word engineering, I came up with:

fillichor (noun): the musky-sweet smell of decaying leaves in the fall.

I took my inspiration from the word petrichor, that is formed by two words: petri (Greek for rock) + ichor. So fillichor came to be in the same way: fillo (Greek for leaf) + ichor.

Happy fall season, and enjoy the fillichor if you’re out and surrounded by deciduous trees!

Prevent CSS Transform From Making Element Blurry

Here’s the issue I was facing: I was trying to position a sticky header based on the Window scrollY value divided by 2, using the transform: translateY(value)CSS property. As a result, the element would sometimes become blurry. I remembered some workarounds for this by applying the translateZ(0)property, or the backface-visibility: hiddenprop. But my element would still become blurry at times. Then it hit me, that this is caused because sometimes the value is fractional (an odd scrollY value divided by 2), so the browser doesn’t know how to render a fractional position, so it needs to perform anti-aliasing for those cases.

By ensuring that the transform always uses integer values (Math.floor() or Math.ceil()), solved the issue for me.

My Favorite Tools & Resources for Day to Day Software Development

I bet we all have a bunch of tools we use to make our lives easier, and resources we use regularly to stay up to date with the world. I figured, I could share mine so that others could go through the list and maybe pick something up for themselves too. I would also love to learn what you use, so please feel free to share in the commentary section below.

Operating System: Ubuntu 20.04. I’ve been using Ubuntu since version 8.04 Hardy Heron, and couldn’t be happier. In the beginning, coming from Windows XP, I was missing some things, but that was mainly due to not knowing the alternatives on Ubuntu. Now, sometimes I feel the opposite when I have to deal with Windows.

Web Browser: Chrome. I hate being tracked and giving my info to Google, but for web development the developers tools in Chrome are closest to my heart. I try to tame those heretic tracking requests with uBlock Origin on desktop, and Blokada on my Android phone.

IDE 1: For PHP development, I use PHPStorm. It’s by far the best IDE for PHP development out there. I really like the integrated Git management tools.

IDE 2: For Javascript / Svelte, Elixir, I use VSCode with the right extensions. I like how fast this one is, compared to PHPStorm.

Code fonts: I use Fira Code with font ligatures enabled. This font is simply gorgeous, and a pleasure to work with. I highly encourage you to give it a try.

Image editor: Gimp. Gimp has a evolved a lot over the years, and although it might be inferior to Adobe’s Photoshop, for my needs of cropping, resizing, and color adjustment – it’s just perfect.

Color picker: Gpick. I love colors. Sometimes I’d see a color on a site, or in an app and I want to save it. Gpick can pick a color from anywhere!

Cloud storage: Dropbox. I like that it has apps available for all my devices, which means I can access my files from anywhere. For this convenience, I am willing to pay the yearly premium.

Communication: Slack / Email / Github Issues / Google Meet. I use Slack because some of my clients use it, but I am not a big fan of it. I use email because I like the feeling of writing (digital) letters, because I enjoy formality, and because it is easy to search. I love using Github Issues for project specific communication, and it’s my number one pick. I like Github Issues so much, because I value written documentation. Discussing something over video Slack or Google Meet, might feel like you can cover more, easier and faster, but written information is golden – you can always return to it, it doesn’t become vague, and anyone can read it even after you’re no longer around (and we as developers should care about providing legacy documentation to future maintainers).

Bookmarking and Content Sharing: Telegram. This chat application is so smooth and aesthetically pleasing, that I figured a way to keep it on my devices, despite the fact that I have virtually no interaction with people through this app. But one thing that I like, is saving pages, images, or transferring links and content among my phone and computer, by simply using the “Saved Messages” feature (which is essentially a chat with yourself).

API Development: Insomnia. I love that it has everything I want, and nothing more. The design is pleasing, and it is very smooth and launches fast.

FTP Application: FileZilla. I still use FileZilla to deploy small sites, don’t judge 🙂

Eye protection: Redshift. Rarely when Redshift crashes at night and the monitor suddenly turns blue, I feel like my eyes are burning and I’m entering a space jump lol. Just do your eyes a favor and use any of the night color tools that works on your devices, phones included.

Tunneling: ngrok. How do I quickly make a website or API I developed locally, available externally as a demo to a client or colleague? That’s right, ngrok is the answer!

Diffing: Beyond Compare. I use this tool quite often to look for changes in files, in functions, in directory structure, and so on. It helps a lot especially when dealing with 3rd party plugins and themes (I’m referring to WordPress here) updates, and you want to see what changed to ensure that nothing breaks when you hit the update button.

Screenshots & Annotations: As a standalone application, I use Flameshot to take screenshots anywhere. If I need to take a screenshot of a website inside Chrome, I use the  convenient Nimbus extension.

Web page monitor: Distill Web Monitor. This amazing Chrome extension lets you create monitors to watch for changes on web pages, and alerts you when something’s changed. It even keeps a history of changes. I use it to monitor legislation changes, software updates, price changes, you name it!

Resources: Hacker News  and Habr for IT related news. Reddit for news, and Coub.com for entertainment.

I really hope that you found at least one thing from this list that you want to try out (let me know which one, I’m curious). I’ll try to keep this list up to date with what I discover and what I recall using, but I welcome you to share your toolstack and resources in the commentary section down below.

Fix: Mouse pointer shakes while mouse standing still in Ubuntu 20.04

Here’s a peculiar issues I’ve encountered the second time this week. Out of the blue, the mouse pointer will start shaking/wiggling/moving up and down heretically, while the mouse itself is standing still. Turning the mouse off, disconnecting the receiver dongle will do nothing. The previous time I fixed it with a reboot, but this time I didn’t want to resort to the same “fix” because I have a lot of windows open, and I want to keep the state of my running apps and services.

Fortunately, I found a better way to fix this issue, although it’s not a permanent fix. What I did was to switch to a different GUI, then go back to my original one. So first, CTRL+ALT+F1 to go to the other GUI, then CTRL+ALT+F2 to go back to the original one (which kept the state intact, less the shaking pointer thanks god). Your current GUI might not necessarily be at F2 as in my case, just try all F1-F12 combinations until you find it.

If you found this helpful, let me know in the commentary section below 🙂

Fix: Ubuntu 20.04 stuttering animations & video

Ok, this was driving me nuts, but I’m glad I finally figured it out thanks to this.

So the issue was: every 500ms or so, any  graphic output would briefly freeze, be it a video playing, a page scrolling, or moving a window around. This issue was persistent right after I upgraded from Ubuntu 19.10 to Ubuntu 20.04.

The troublemaker: the issue was caused by the “System Monitor” extension. The extension was running in my app indicators toolbar, since I like seeing small bits of stats about CPU load, network usage, etc. Unfortunately, it seems that there is an issue with this extension on the newest version of Ubuntu.

Unsuccessful attempts: I tried reinstalling the Nvidia driver (390.132), tried to install the driver manually instead of using the Ubuntu Drivers tool. Switching to the Nouveau driver had no effect. Choosing a different session from the log in screen (Default Gnome) had no effect either, since my Gnome extensions were running there too for some reasons.

The solution: Disabling the “System Monitor” extension, instantly fixed the issue. If you have the extension running in the app indicators area, simply clicking on it, and choosing “Quit” will do the trick.

Update (June 10th, 2020): My suggestion above is to close the “System Monitor”, also known as the “Indicator Multiload” Gnome extension. If you don’t want to have to deal with closing the app on every system reboot, you can either choose to:

  • Disable the extension by unchecking the “System Load Indicator” entry in “Startup Applications”. Hopefully the extension is fixed in the future, so you can re-enable this easily when that happens.
  • If you want to completely remove the extension: sudo apt-get purge --auto-remove indicator-multiload which will remove the extension, its dependencies and the config data.

If you found this helpful, or have a suggestion for this article – let me know in the commentary section below 🙂

Dockerized pgAdmin 4 & local Postgres server on Ubuntu 20.04

At this time of writing, pgAdmin4 is not available for installation on Ubuntu 20.04, due to an unresolved Python dependency. Until this is solved, or in case you want to run pgAdmin from a Docker container, here’s what worked for me. This assumes you already have Docker installed in your Ubuntu.

First, docker pull dpage/pgadmin4 to pull the image on your computer.

Next, I added the following command to my ~/.bash_aliases so I can quickly run the container:

alias pgadmin-boot='docker run --add-host=database:YOUR_LOCAL_IPV4_ADDRESS -p 5050:80 -e "PGADMIN_DEFAULT_EMAIL=YOUR_PGADMIN_LOGIN_EMAIL" -e "PGADMIN_DEFAULT_PASSWORD=YOUR_PGADMIN_LOGIN_PASS" -d dpage/pgadmin4'

The YOUR_LOCAL_IPV4_ADDRESS is the IP address of your computer on the local area network, assuming Postgres is running from your local machine.

Next, start pgAdmin by running pgadmin-boot or the command above. You may need to restart your terminal so that the alias is loaded.

If everything went well until this point, you should be able to access pgAdmin4 at http://localhost:5050/browser/ and log in with the email and password you specified in the command above.

Next, from the ‘Quick Links’ section on the pgAdmin dashboard, you can add a new server. For the hostname use database since we defined that earlier in the command above. The port is most likely 5432. The username is most likely postgres. The password is something you should know, otherwise see this comment on StackOverflow how to reset your postgres password. If you try to add the new server, you will most likely get an error notice about Postgres complaining about an IP not having access. That is the IP of your running pgAdmin docker container. Copy that IP, in my case it was 172.17.0.2. Next, find your pg_hba.conf file. To do that, you can run the following commands:

dragos@dragos-pc:~$ sudo -u postgres psql
[sudo] password for dragos: 
psql (12.2 (Ubuntu 12.2-4))
Type "help" for help.

postgres=# SHOW hba_file;
              hba_file               
-------------------------------------
 /etc/postgresql/12/main/pg_hba.conf
(1 row)

postgres=# quit

You will need to edit the configuration file to add the docker IP address as trusted: sudo nano /etc/postgresql/12/main/pg_hba.conf and add this line host all all 172.17.0.2/24 trust to the ‘# IPv4 local connections:’ block. Restart postgres sudo service postgres restart.

Now if you try to add the server in pgAdmin, it should succeed.

If you still can’t connect to the Postgres server, you may need to let Postgres know that it can accept connections from address other than ‘localhost’. To do that, sudo nano /etc/postgresql/12/main/postgresql.conf and then find and uncomment the config for listen_addresses amd add your YOUR_LOCAL_IPV4_ADDRESS from earlier. It should look like this: listen_addresses = 'localhost,192.168.0.11'.

If you found this helpful, let me know in the commentary section below 🙂

Changing the Internet Provider, from Bell to Fizz

So, yesterday I got my bill for March from Bell, and I noticed that the amount is higher by $5 than the previous months. It’s only been a couple months since I signed up, and there’s already a price increase. Huh?? So, apparently this has been happening to other people before (see here, here, and here). Almost $90/month ($100 with taxes) for Internet, that’s too much.. Well, time to move on I guess..

Good thing is, I’ve been keeping an eye on Fizz’s Internet for a while. I’ve been a customer of their mobile service for almost half a year now, and besides the occasional hiccups, the service is really good. As of late, I’ve never experienced any issues with connectivity. I’m also getting LTE speeds Canada wide, which compared to other services of this type (Public Mobile, Koodo, Freedom Mobile, etc) that only offer 3G speeds, is a real delight and makes me feel like I really live in the new century.

Just a quick note about Fizz, this is a company owned by the bigger Videotron/Quebecor giant. The service is attractively cheaper than other alternatives, but there’s a catch.. You don’t have a phone number to call in case you need support. There is a forum that encourages the community to help each other (through incentives, such as points that can be later redeemed for extra perks), but you won’t have the same level of support that you would get if you were to call your bank, as an example. If you are tech savvy like I am, you’ll find that their website actually has everything you need to manage your account. And if something doesn’t work, just open the console and look for errors, maybe you need to clear a cookie or two 🙂 If you’re ready to pay less for more, feel free to join using my referral and we’ll both get a nice credit bonus https://fizz.ca/?ref=53I4V (as of November 27 2020, it’s $50 each, whoaaa!). Oh, by more I mean getting 4Gb/month for $32, with unused data rolling over for next 2 months (I’m now having 11.4Gb of data, noice!!), and the usual unlimited calling and messaging.

Back to the Internet, I’ve scheduled an appointment for later this week to get my modem and installation. I’ll post my notes here about the process, and about the overall experience with Fizz Internet speed/latency.

By the way, I live in Montreal. Fizz is (unfortunately) only available in Quebec and Ottawa.

Update 1: Just finished setting up my Fizz modem. It’s a tower modem that connects to the Internet thru a coaxial cable. The whole process since the technician came to when I did my first speed test, took around 1 hour.

Google speed test: 66.1Mbps down / 11.1Mbps up / 9ms latency / Montreal, Canada

Fast.com speed test: 68 Mbps down / 11Mbps up / 8ms latency / Montreal, Canada

Ookla speed test: 66.9Mbps down / 10.37Mbps up / 98ms latency / Dusseldorf, Germany

So overall, I am very pleased with the results. The connection is very stable (download/upload), and I definitely feel that pages load faster, as in connection time (TTFB). The modem also came with an Ethernet cable that I will happily use with my System76 Gazp6 (2011 edition) laptop. So that’s all for now, but I’ll keep updating this post if anything else needs to be told. Otherwise, if you don’t hear anything from me, it means everything is fine haha

Update 2:

Fizz service has been great so far. It’s consistent and reliable.

Meanwhile, got my final bill from Bell. I was disappointed to find that the prorated amount I had to pay (cancelling in the middle of the month) was based on the full amount and did not contain the discount credits. Glad I’m done with it though..

Update 3:

I’ve ended my Fizz Internet at the end of July because I moved out of Quebec (to Alberta), so I couldn’t transfer my account over to my new location. However, for the entire duration that I used Fizz I was extremely satisfied with the service (and the price), so if you live in Quebec, you should definitely consider them.

 

Fixing: “ESLint: Expected indentation of 2 spaces but found 6. (indent)” in PhpStorm

I recently bootstrapped a new Vue.js application from the Vue-CLI, and I chose to lint my code. Now when I write code, I tend to auto-format my code all the time. The thing is by default, ESLint will warn you if your javascript code is indented inside a script tag (for single-file components). Now I use PhpStorm, but I think the same should apply to WebStorm.

To fix the issue, go to File > Settings > Editor > Code Style > HTML > Other , and for “Do not indent children of” add the “script” tag to the list. That’s it! You can try re-formatting  your code now, and the code indentation in the script tag should be gone now, as well as the ESLint warning. Happy coding!

If you found this helpful, let me know in the commentary section below 🙂

Solution: kernlab class probability calculations failed; returning NAs

Howdy! I’m putting this down here for my future reference, as well as for anyone who has spent the couple hours looking for a solution:

kernlab class probability calculations failed; returning NAs

You get this error because you need to use a formula to define your model. For example:

fit.svm.radial <- train(data.train[,!(names(data.train) %in% c('value_change'))], data.train$value_change, 
                method='svmRadial', 
                trControl=objControl,  
                metric = "ROC",
                tunegrid=tunegrid,
                preProcess = NULL
                )

needs to be changed to:

fit.svm.radial <- train(value_change~., data=data.train, 
                method='svmRadial', 
                trControl=objControl,  
                metric = "ROC",
                tunegrid=tunegrid,
                preProcess = NULL
                )

If you found this helpful, let me know in the commentary section below 🙂