Wednesday, December 13, 2017

A div with a post-it 3D look

This just caught my eye while reading this thing. At first I searched for the image, but to my surprise it was all about CSS sorcery:

<html>
  <head>
    <style>
      .postit {
        position: relative;
        display: inline-block;
        width: 250px;
        border-bottom-right-radius: 36px 12px;
        padding: 15px 15px 10px 10px;
        border: 1px solid #e0dcbf;
        background-color: #fff8dc;
        margin-bottom: 12px;
      }
      .postit::after {
        content: "";
        display: block;
        position: absolute;
        width: 80%;
        height: 30px;
        bottom: 18px;
        right: 18px;
        z-index: -1;
        transform: rotate(3deg) skew(8deg);
        box-shadow: 13px 18px 6px rgba(0,0,0,0.3);
      }
    </style>
  </head>
  <body>
    <div class="postit">text</div>
  </body>
</html>

Saturday, December 9, 2017

A C++ container which keeps insertion order

C++ is a poorly designed programming language, and I live a love-hate relatioship with it.

On my vacation days, when working on WinLamb for the next version of SRTEd, I needed a container to keep track of the order the elements were inserted. Among the many useless obscure things that C++ has, it doesn’t have such a container. So I had to write one, which after much struggle I named it the held_map.

Usage example, including iterator support for C++11 range-based for loop:

held_map<wstring, wstring> all = {
  { L"initial", L"blab" },
  { L"initial2", L"bleb" }
};

all[L"first"] = L"abcdef";
all[L"second"] = L"123456";

for (held_map<wstring, wstring>::entry& e : all) {
  wstring key = e.key;
  wstring val = e.value;
}

At first I wondered about using a sentinel linear search, line the one used within store. But then I realized that 99% of the time I’ll be using a string as the key with few elements inserted, thus the initial copy of the string at each search would take away the performance gains of the sentinel algorithm. So I decided to stuck with an ordinary linear search.

Friday, December 8, 2017

Avast antivirus sucks

Last month, after having had enough of Avira antivirus intrusive ads popping on my screen all day, I removed it and installed Avast. Then I started seeing my whole trusty Windows 7 x64 going slow, mainly when switching between processes, but until then I blamed the almost 8 years old computer.

That was until yesterday, while debugging C++ in Visual Studio, when I noticed an Avast DLL being loaded in the console. What the hell? It seems that Avast was somewhat injecting its DLL everywhere, making everything go slow. I immediately uninstalled Avast, and instantly my computer became fast as before.

So far I’m running no antivirus program, and I’m in doubt if I really need one. It feels a bit insecure, but at the same time so... fresh.

Friday, November 17, 2017

GitHub markdown style on Visual Studio Code

These days I found out the very useful feature on Visual Studio Code for markdown editing, which renders the MD file on VSCode itself, opening a new tab at right.

However, the rendered markdown styles matches VSCode itself. Since I mainly use markdown on GitHub, I’d like to preview the markdown using GitHub style. So I inspected GitHub and made a quick CSS file to VSCode:

Save the file and add this entry to VSCode user settings, which on Linux looks like this:

"markdown.styles": ["/home/your_name/.config/Code/User/eu-markdown.css"]

The markdown preview should be pretty close to GitHub styling now.

Wednesday, October 18, 2017

React Material-UI: a FAB with an optional tooltip

I’m using Material UI library to have Material Design components on a rather complex React project. Despite being good, this library unfortunately doesn’t provide a tooltip option to the Float Action Button, something I need at the moment.

I found some useful information on this project issue, and after digging into the code of IconButton – which has a tooltip option – and Tooltip itself, I wrote a component that provides a Float Action Button with an optional tooltip:

The icon is ready to be used with Font Awesome project, which is what I’m using. Other minor adjustments I made, like font size, can just be removed too. And my project requirements are web only, so that’s all I tested.

Wednesday, October 11, 2017

Extending native objects in create-react-app

Despite being considered a bad practice by some, I like to extend native objects to add some syntatic sugar. However, when working in a React project with create-react-app, I receive the following ESLint error:

Array prototype is read only, properties should not be added  no-extend-native

Fortunately this warning can be disabled by adding a comment in the file where you extend the native object. Putting it all together, this is what I’ve got:

/*eslint no-extend-native: ["error", { "exceptions": ["Array"] }]*/
Object.defineProperty(Array.prototype, 'last', {
  get: function() {
    return this[this.length - 1];
  }
});
Object.defineProperty(Array.prototype, 'empty', {
  get: function() {
    return this.length === 0;
  }
});

Syntatic sugar added, clear console.

Monday, October 9, 2017

Absolute imports with create-react-app

When developing React using create-react-app with custom-react-scripts, I wanted to use absolute paths for import, and I found this: just adding NODE_PATH=src/ to “.env” file. It worked on Windows, but not on Linux.

After a while, I sorted it out: echo $NODE_PATH told me that my Linux had NODE_PATH being set somewhere. Then, being conservative, I just added unset NODE_PATH to “~/.bashrc” file, and it finally worked.

JavaScript development is a nightmare these days.

Sunday, October 8, 2017

Google Chrome 61 slow, how to fix

After updating to Chrome 61, I instantly noticed that YouTube became slow, and Google Maps – particularly Street View – became so slow it’s unusable. I went back to Firefox Developer 57, but then I missed Chrome’s search capabilities.

I found out that the problem is the HTML5 canvas, and the fix is rather easy: just disable this flag in Chrome flag page:

chrome://flags/#enable-color-correct-rendering

Instantly all the sites became responsive again.

Thursday, September 28, 2017

React App State: React without Redux

Coming from Angular 2, I’m delighted with React simplicity. In large projects, having a global state management seems to be a very good thing – lift the state through the roof! –, so I started to search for libraries to do this.

After trying hard to use and like Redux, the most famous one, I became very frustated on how unnecessarily complicated it is, probably because it started as a framework-agnostic solution that was then ported to React. It’s the complete opposite of React’s simplicity. I also tried MobX, and I also disliked it. But I was convinced that the basic idea was good.

So I ended up writing my own implementation of a Redux alternative: what I would like to have as a state manager for React, the result is React App State.

The idea is to have an AppState instance that receives a set call, analog to setState, and then all components that have subscribed to this instance will receive the updates via props. Even better, my implementation doesn’t resort to context as crutches. Multiple AppState instances can be used in an app, and a component can subscribe to any number of instances.

Wrap the set calls in controller classes, like shown in the example, and you have a scalable solution.

I only found two pitfalls:

  1. If a component subscribes to an instance which has a variable named foo, and the parent of this component tries to pass the same prop as foo="bar", there will be a name collision – what is obvious;
  2. If two AppState instances have a variable foo, and a component subscribes to both instances, there will be a name collision as well.

I think these pitfalls are very manageable, and I can live with them. After all, name collisions also exist in Redux.

React App State is the first package I publish on NPM.

Wednesday, September 13, 2017

Grep and find aliases

Two quick bash functions to speed up name and content search on files. These are to be appended at ~/.bashrc file:
function gr { clear ; grep -rn $1 . ; }
function ff { clear ; find . -name "$1" ; }

Sunday, September 10, 2017

Holy Grail CSS layout with overflow

This morning – yep, a Sunday morning – I needed to implement an HTML page with the Holy Grail layout. A quick search gave me dozens of implementations, but all of them broke apart when you trew a lot of content into the sections. Being fond of the Flexbox model, I quickly came with an implementation that had all the needed overflow control:

This implementation is also modular: if you don’t need any of the panels, just remove them – the layout will stay working. Also, the satellite panels can have fixed dimensions, see the commented values for width and height.

The funny part is that min-height: 0. It’s there for Firefox; without it, the overflow goes wild. Other interesting thing is the absence of the height: 100% to html and body elements, it’s not needed.

Friday, September 8, 2017

Disabling the useless npm package-lock.json

Recently I’ve updated npm to version 5 while working in one of my projects. Much to my dismay, a “package-lock.json” file started to appear, and I finally understood why I’ve seen this file commited in some projects lately.

But since this feature is basically a horrible idea, I started searching a way to permanently disable it. It looks like I’m not the only one who dislikes this, because I found this excellent post, which points to the solution:

npm set package-lock false

And any more “package-lock.json” files that appear in front of me will be summarily deleted.

Thursday, September 7, 2017

Visual Studio Code settings

This morning I was setting up Visual Studio Code at a Lubuntu virtual machine, and after saving the keyboard shortcuts, I opened my current editor to get the settings. Since some of them I consider essential, I decided to publish them here, for further reference.

Tuesday, August 22, 2017

Simple minimalist JavaScript metronome

These days, when practicing guitar, I needed a metronome. Whey you type “metronome” on Google Search, it actually brings out a functional metronome – however it has no keyboard shortcut keys. So I decided to write a simple metronome, with keyboard keys, from scratch, to suit my needs.

Knowing the imprecision of JavaScript’s setTimeout function, I implemented a timer that adjusts itself each call, thus having a fairly reliable precision.

The code is so simple I decided not to create a GitHub repository, so I’m just sharing the whole source code here:

Friday, July 7, 2017

Git amend updating date and time

When commiting code on Git, very often I realize I forgot some little detail right after I end the commit operation. This is very annoying. Fortunately, we have the amend command. Recently I found a very cool trick to use with amend command: updating the date and time of the commit together with amend.

So, with those in hand, I’m now using a nice alias on my ~/.bashrc file:

alias gitamend='git commit --amend --date="$(date -R)"'

And my own memory faults are now easily addressed.

Friday, June 23, 2017

Trying out Git Subtree

Currently I have 5 projects on my computer which use WinLamb library. So far I’ve been keeping copies of the library directory on each project; these directories are kept in sync with FreeFileSync Portable. Although this approach works, it’s very cumbersome.

Since each project is versioned as a Git repository, and WinLamb itself is a Git repository on GitHub, I started searching for an alternative, and I choose Subtree over Submodule. Following is a summary of the commands I needed to do on my Windows 7 x64, using Git portable v2.13.1:

1. Remote

Add a remote with the path to the repository of the shared project:

git remote add otherproj --no-tags git@github.com:username/otherproj.git

Or if a local project:

git remote add otherproj --no-tags d:/stuff/otherproj

You can view the remotes with:

git remote -v

2. Subtree

Run the Subtree command:

git subtree add --prefix otherproj otherproj master --squash

This will copy the library into the subdirectory and create a commit, with the hash in the message. It’s unnecessary, but you can provide a custom message for the subtree commit:

git subtree add --prefix otherproj otherproj master --squash -m "Subtreeing otherproj."

3. Updating

To update your project with new library code:

git subtree pull --prefix otherproj otherproj master --squash

This leads us to a nice bash function to our ~/.bashrc file:

function gitsubtreepull { git subtree pull --prefix $1 $1 master --squash; }

Which eases our life when updating our Subtree library:

gitsubtreepull otherproj

So far this approach seems to the better than the old-fashioned directory sync, although it still feels a bit “loose”. I’m still avoiding pushing code from the local repository to the shared library; if I change something, I just copy the code to there, then I update the library repository itself.

Note: beware amending a commit on the remote library. The next time you try to update the dependency, it’s likely to get lost, and you’ll have to remove the subtree and add it again.

Tuesday, April 4, 2017

After 4 years, SRTEd 1.3.0

So finally I released a new version of SRTEd, my own subtitles editor. Honestly, in these four years I didn’t see a better subtitle editor, I still think it’s the most user-friendly editor out there.

The interface didn’t improve much, but there are many bugfixes and minor UI adjusts. It took so long because I entirely rewrote it using my new Win32 library, which I expect to release as open source soon, together with an article explaining what it is and how to take the best out of it.

It can be downloaded from CNET or Softpedia.

Sunday, March 19, 2017

Remembering Randy Rhoads

Randy Rhoads last day was March 19, 1982, 35 years ago today. After influencing so many guitarists, I just want to leave this humble tribute here. I’ve played “Crazy Train” in bands in the past, and it was always a lot of fun.



After publishing the video, I realized the guitar track was a bit too loud in the mix. Well, too late, but not too bad.

I used my Suhr Modern Satin, with Suhr SSV/SSH+ (neck/bridge) pickups, and the POD HD500X connected via USB. After using Billy Gibbons’ .007 signature gauge set exclusively for about one year and a half, I tried the D’Addario EXL130 set again, however with a .012 for the G, as I found on my graphic string tension calculator. It feels very balanced now. I don’t know if I’ll use this custom .008 set on all guitars, but I’m keeping it on the Suhr, at least.

Tuesday, February 28, 2017

A graphic string tension calculator for guitar

I was assembling a custom string set for my guitar, and for that I needed to calculate the tensions of the string gauges, according to the scale length. Although I found a couple string tension calculators online, pretty much all of them had terrible usability. So I decided to write my own string tension calculator, with the best usability I could think of as an user.

It’s hosted on GitHub Pages: https://rodrigocfd.github.io/string-tension-calc/

I also made it open source on my GitHub account, and I hope to make further improvements.