Wednesday, February 14, 2018

One grid to rule them all

I’ve just learned CSS Grid. It feels like an improvement over Flexbox, and although it’s more powerful, it’s actually a little simpler to wrap your head around. I liked Flexbox a lot, and I did many great things with it. I’m hoping to make even more stuff with Grid now. Newer browsers have been supporting it since last year, so if older browser compatibility is not an issue, it’s good to go.

I learned Grid in a couple minutes by watching this video, which is pretty good in teaching the concepts:

Friday, February 9, 2018

I hate the invasive Dropbox client

Very hard to completely disable the Dropbox client, which sneaks its updater into every corner of my new Windows 10 system. Here’s what I had to do to finally get rid of it:

  • On Dropbox client, Settings, uncheck start automatically;
  • Disable “DbxSvc” and two “Dropbox Update Service” in services.msc;
  • Disable startups at Task Manager > Startup tab;
  • Disable services in Control Panel > Task Scheduler > Task Scheduler Library.

I want Dropbox client to update only when I run Dropbox. This invasive behavior is completely unnecessary.

Sunday, January 7, 2018

Ibanez JPM weight

I’ve been searching around the weight of an Ibanez JPM, just like the P2 I own, which I have no means to weight right now. I found 4 guitars on Reverb.com, with similar measures:

  • 2000 P2, 7 lbs 5 oz, 7.31 lbs, 3.32 kg
    • nut profile, .740", 18.8 mm
    • 12th profile, .820", 20.8 mm
  • 1998 P4, 7 lbs 6 oz, 7.38 lbs, 3.35 kg
  • 1998 P4, 7 lbs 6 oz, 7.38 lbs, 3.35 kg
  • 1995 P2, 7 lbs 6 oz, 7.38 lbs, 3.35 kg

The JPM seems to be a very consistent guitar, even in the weight.

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

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

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

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

for (insert_order_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 stick to 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.

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" ; }