Wikipedia Templates, using React and TypeScript

I’ve been testing out React recently with great joy. The ability to grow a web application with components is really good, so much I was able to refactor an old application, a Wikipedia template generator, making it easier to mantain while increasing its complexity, becoming multi-language.

First I started writing ES6 JavaScript, but soon TypeScript caught my eye. My previous experience with TypeScript was a bit traumatic, since it involved the awful Angular 2, but after an initial struggling to make everything work, I can say that I can’t imagine a large scale project written without the aid of TypeScript.

I struggled with some things like HTML5 routing, which seems to be a pain to deploy, so I just used HashRouter. Also, the deployment to gh-pages branch is neatly made with gh-pages utility. Also, I used Redux in a very simple way; I’ve seen overengineered examples that put me off at first, but Redux itself is very simple, and I ended up choosing it instead of MobX. I used hooks from the upcoming React 16.7, and I believe it will completely change the way React components are written, it’s really different.

The Wikipedia Templates project is open source and it’s hosted on GitHub. The project isn’t ready yet, but the basics are done, and I plan to grow it as I have time.

SRTEd 1.3.1, minor release

This week I released a new SRTEd version 1.3.1, with has minor, but many usability improvements. Also, it’s built with latest version of WinLamb, my very own personal raw Win32 library, which I use for everything.

I was planning a bigger release for SRTEd, with more advanced features, but since my time is pretty short these days, I just released a version where it is now, with the UI improvements. It’s already more than a year since the last version, time flies. One notable difference is the absence of a 32-bit executable, which was not included because it was firing false positives for malware, something completely absurd. To avoid the hassle, I opted to keep only the 64-bit version.

SRTEd can be downloaded from CNET.

Vue.js builds for non-root web directories

The React’s lack of scoped CSS annoyance made me want to try Vue.js, which solves this problem right out of the box. And so far, I’m liking this framework quite a lot, I must admit. The idea of single file components pleases me greatly.

This morning I stomped over a problem: I was generating a build release to run under a non-root directory in my web server, and the application was getting lost by searching the files at the server root.

Fortunately I’m using vue-cli v3, actually 3.0.0-rc.3, which has quick solution, as I found here.

Capitalization Rules for Song Titles

I found this guide back in 2007, provided by Standard MIDI Files on the Net, how defunct. I kept it on a TXT file on my hard disk for 11 years, and I rediscovered it today. And it’s still great, so I’m publishing the original here.

1. The first and last words are always capitalized, and all except the words listed below are capitalized.
2. These are lower-case, unless they are the first word or last word.
   • articles: a, an, the
   • conjunctions: and, but, or, nor
   • prepositions that are less than five letters long: at, by for, from, in, into, of, off, on, onto, out, over, to, up, with
   • as (only if it is followed by a noun)
3. Prepositions are sometimes capitalized.
   • Prepositions are capitalized when they are the first or last word.
   • Prepositions that are part of two-word “phrasal verbs” (Come On, Hold On, etc.) are capitalized.
   • Prepositions that are over four letters long. (across, after, among, beyond, etc.).
4. These short words are capitalized. Some people occasionally forget to capitalize these.
   • also, be, if, than, that, thus, when
   • as (if it is followed by a verb)

A List of Some “Phrasal Verbs”

These are some phrases in which the preposition needs to be capitalized.

Beat Up        Do Over         Go Over       Make Up       Take After
Blow Out       Fill In         Hand In       Pack Up       Take Back
Break Down     Fill Out        Hand Up       Pass Out      Take Off
Break Into     Get Along       Hold On       Pick Out      Take On
Break Up       Get Around      Keep On       Pick Up       Take Up
Bring Up       Get By          Keep Up       Put Away      Talk Back
Call Off       Get Over        Leave Out     Put Off       Talk Over
Call On        Get Through     Let Down      Put On        Throw Away
Call Up        Get Up          Look For      Put Out       Try On
Carry On       Give Back       Look Into     Put Up        Turn Down
Come Back      Give Up         Look Like     Roll Over     Turn In
Come Down      Go Along        Look Out      Run Into      Turn Off
Come On        Go Away         Look Over     Run Out       Turn On
Come Out       Go Away         Look Up       Run Over      Use Up
Come Over      Go On           Make Out      Show Up       Wait On

Alternative approach to bitflags in C++

Just wondering about a short, expressive and alternative way to implement bitflags in C++11.

Right now I don’t plan to adopt this idiom, but it doesn’t look so bad.

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:

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.

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.

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>

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.

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.

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.