Colorize or tint an SVG image with CSS

This is a quick example of how you can tint an svg image even if it’s added to the page externally (it’s not an inline svg):

    filter: invert(.5) sepia(1) saturate(10) hue-rotate(150deg);

Play with the hue-rotate value to get your preferred hue!

Increment number when creating multiple html elements using emmet

Sometimes you need to create many elements so that each one of them gets a unique, incrementing number. You probably already know about VS Code’s Emmet capabilities which let you type something like .myClass*5 to automatically create five divs with the class “myClass”. So the output of that would be:

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

If you need a number that is incrementing, you can simply add a $ symbol to the command like this: .myClass$*5

That would result in the following output:

<div class="myClass1"></div>
<div class="myClass2"></div>
<div class="myClass3"></div>
<div class="myClass4"></div>
<div class="myClass5"></div>

If you need to copy and paste long lists of numbers, you can use the multi-cursor editing features of VS Code. If the lines on your clipboard match the number of lines of your multi-cursor selection before pasting, VS Code is smart enough to assume that you want to paste just one number from the clipboard into each line that has a cursor blinking.

Dealing with a multiresolution .mov file

For the first time in my career I encountered a video file that had two different resolutions. The beginning of the video was SD resolution and after 15 frames it jumped to a resolution of 1080p. VLC player was able to correctly switch the resolution during playback and it displayed the two different resolutions also in the codec information window. But Premiere Pro didn’t understand the file properly and never switched to the higher resolution portion of it. That was a problem because I wanted to use the high resolution in my edit.

Continue reading “Dealing with a multiresolution .mov file”

Unable to enter your WordPress password when trying to log-in? Here is an easy solution.

I recently encountered a problem in which it was impossible to login to the WordPress backend/admin area since the password field was not accepting any input. The same problem occurred on all the browsers I tested it in. It seems like an update might have broken something in a theme or a plugin. Finally there was an easy solution to the problem:

Just open the developer tools of your browser, target the password input field and delete the bit where it says “disabled” from the source code (displayed typically on the right side of you browser window in the Developer tools panel). Now the form field takes input again and you are able to login and update your plugins/theme if needed.