• 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.

Category: Bugs and Issues

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.

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.

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 🙂

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 🙂

500 Server error when uploading a PDF file in WordPress

Just had to deal with an obscure issue, that I believe is more common to happen on a shared hosting. So uploading a PDF file in WordPress, would fail to a 500 server error page. Server logs show nothing, just some information about some ‘Ghostscript GPL’ and some ‘broken headers’. So I had to debug the application the usual way and found it was failing in /wp-includes/media.php on line 2909:

$implementation = _wp_image_editor_choose( $args );

if ( $implementation ) {
    $editor = new $implementation( $path );
    $loaded = $editor->load(); //this line

    if ( is_wp_error( $loaded ) )
      return $loaded;

return $editor;
}

Dumping the $implementation variable, I found it was the name of an image processing library wrapper WP_Image_Editor_Imagick . Image processing libraries can be extremely memory demanding, especially when they have to deal with a PDF file. Why WordPress needs to process a PDF file with Imagick, I don’t know. But I got to solve this server error by increasing the PHP max memory directive. There’s not specific value that will work in your case, just test in increments of 32Mb blocks and be generous if your server allows.

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

SVG animation with stroke-dashoffset happening backwards on Safari

If you’re running into this issue, I’ll save you some time: Safari does not support negative values for stroke-dashoffset . Rewriting the values into positive ones will solve the issue.

If this still doesn’t solve the issue for you, make sure you don’t have the  animation-direction: reverse set on your animation.

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