HTML <table> With CSS flexbox

Why use flexbox to simulate a table?

It can reverse the <table> without JavaScript. This is quite usable under some particular scenarios.

Alternative method

Another method to reverse table rows doesn’t need flexbox — rotate <tbody> and <tr> 180 degree:

1
2
3
4
5
table.reverse {
tbody, tbody > tr {
transform: rotate(180deg);
}
}

This works under latest Chrome/Firefox for macOS/Linux pretty well. However, this will rediculously corrupt the rendering of Electron. (tested under Electron v1.7.8 for Windows). I don’t know why.

I use the terms of HTML’s native table, so it’s more comprehensible for experienced HTML developer.

Read More

[Linux] Set monospace fonts for terminal

I don’t know why, openSUSE and Chakra, the two KDE distro seems reluctant to setup the fonts and make their Konsole available out-of-box….

If your konsole (or any other terminal emulator) cannot display text in bold, or characters cannot align correctly, you can:

  1. Set the font of konsole to monospace.
  2. If not solved, do following:

Create a file /etc/fonts/local.conf:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<alias binding="strong">
<family>monospace</family>
<prefer>
<family>DejaVu Sans Mono</family>
<family>Ubuntu Mono</family>
<family>Droid Sans Mono</family>
<family>Noto Mono</family>
<family>Roboto Mono</family>
</prefer>
</alias>
</fontconfig>
  • binding="strong" to forcely set.
  • You can re-order the <family>‘s in <prefer>...</prefer> by your personal preference. I like DejaVu Sans Mono.

Save, then run as root:

1
fc-cache -v -f

Restart your konsole, wow.

You also can use fc-match -s monospace | less to see if it took effect.

Macros to Simplify Redundant Q_PROPERTY() Hell

When you need to expose C++ object for accessing in QML, you may have to write a lot of annoying and trivial Q_PROPERTY()s, getters, setter slots, signals, and private member variables. They will makes your class a mess (any mostly are duplicated). For example, a QString myFoo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyObjectExposedToQml : public QObject
{
Q_OBJECT
Q_PROPERTY(QString myFoo READ myFoo WRITE setMyFoo NOTIFY myFooChanged)
public:
QString myFoo() const { return m_myFoo ; }
public slots:
void setMyFoo(QString myFoo) {
if (m_myFoo == myFoo) { return; }
m_myFoo = myFoo;
emit myFooChanged(myFoo);
}
signals:
void myFooChanged(QString myFoo);
private:
QString m_myFoo;
}

Though only one property here but has been nearly create a getter/setter/signal/variable hell. So make some macros to get rid of these shit:

Read More