Monday, 11 May 2020

Print Templated String in Python

Python 3.6+ has the new 'f' string prefix to use in place of the .format function for string, it is neat and useful.

Prior to Python 3.6:

Foo = "bar";
print("Foo value is {}".format(Foo));

Python 3.6+:

Foo = "bar";
print(f"Foo value is {Foo}");

Try it on:
https://repl.it/languages/python3

How to Do Coding on Android

Some may say coding on Android is nonsense, but it's wrong. Coding on Android can be done as usual, but not the tiny display on mobile device; install BlueStacks and one of these code editors:

Friday, 8 May 2020

Quick Setup for CentOS and Ubuntu Servers

The website toolset.sh provides quick setup scripts for CentOS and Ubuntu with essential software installation. It is useful when in need of setting up multiple servers with the same basic packages.

Install generic tools:
curl toolset.sh | bash

Install classic tools:
curl toolset.sh/classic | bash

Thursday, 7 May 2020

JavaScript and How It Is Not Much Related to Java

JavaScript was created in 1995 at the beginning of Internet era. It is called JavaScript because it was first created using all Java keywords, but the 2 languages are totally different, one is threaded, one is event-based.

JavaScript has evolved much, and with ES6 (ECMAScript6), JavaScript comes with threading, and classes too.

Example class in ES6 (the file name must be .mjs):
class some_class {
  Some_Property = null;
  
  some_function(Some_Param){
  }

  static some_static_function(Some_Param){
  }

  async some_function2(Some_Param){
  }

  static async some_static_function2(Some_Param){
  }
}

//Static block for static properties
{
  some_class.Some_Static_Prop = null;
}

//ES6 export
export default some_class;
//EOF

Import class to use:
//Static import
import some_class from "./some_class.mjs";

//Dynamic import
(async function(){
  var some_class = await import("./some_class.mjs").default;
})();

Run Node.js with ES6 and multi-threading:
node --experimental-modules --experimental-worker \
app.js

Add the 'require' function to ES6:
npm install mjs-require --save
node --experimental-modules --experimental-worker -r mjs-require \
app.js

Run Node.js ES6 with heredoc in Bash:
node --experimental-modules --experimental-worker \
--input-type module <<'HEREDOC'
  console.log(Date.now());
HEREDOC

Wednesday, 6 May 2020

Get the Selector for Using with Stylish Extension (userstyles.org) to Customise Websites

Many websites may not look suitable with personal style, the Chrome extension called Stylish can help browser users customise any CSS.

Get the CSS selector directly for an HTML element:
1) Right-click on the UI element on web page, choose 'Inspect'
2) DevTools panel is opened, right-click on highlighted tag, choose 'Copy > Copy selector' 
3) Create or edit a Stylish style
4) Paste the selector and enter CSS properties

However, many websites/webapps use generated element ids and class names, the CSS selector above won't work when these websites are built (daily for example) and deployed. Use the XPath solution below.

Get the CSS selector by converting XPath to CSS selector:
1) Right-click on the UI element on web page, choose 'Inspect'
2a) DevTools panel is opened, right-click on highlighted tag, choose 'Copy > Copy full XPath
2b) Open website toolset.sh, there's a tool there to convert XPath to CSS selector
3) Create or edit a Stylish style
4) Paste the selector and enter CSS properties

How to Enable 'Administrator' Account on Windows 10 or Set Its Password

The 'Administrator' account is not enabled by default on Windows 10 but it is necessary sometimes. Use the following steps to enable 'Administrator' account and set a password for it.

1) List out Windows accounts
Right-click on 'cmd', choose 'More' >> 'Run as administrator'

Type this command to see available users:
net user

2) Enable 'Administrator' account on log-on screen
Type this command in cmd:
net user administrator /active:yes

3) See updated info the the user 'Administrator'
Type this command:
net user administrator

4) Set password for 'Administrator' account:
Type this command:
net user administrator *

Note:
Change the 'yes' to 'no' in step 2 to disable 'Administrator' account.

Reference:

How to Disable Windows UAC (User Account Control) Using Registry (Regedit)

The new update from Windows 10 is rather annoying, it enables UAC password prompt every time, eg. when using 'Run as administrator' on right-click on some app, specially Steam Big Picture that needs to be 'administrator' to send keys and mouse signals to games.

Disable UAC using regedit:
1) Win+R
2) Type 'regedit', press Enter
3) Go to: HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows > CurrentVersion > Policies > System
4) Right-click 'EnableLUA', click 'Modify'
5) Set the value to 0 (zero) instead of 1
6) Windows will prompt to restart to disable UAC
7) Click the notification to restart and enjoy!

Reference (Go to 'Way 2: Disable User Account Control on Windows 10 by Registry Editor', it's the only working one):

Tuesday, 5 May 2020

Web Trick: CSS Relative Positioning inside Absolute Positioning


CSS:
*     { box-sizing:border-box; }
table { border-collapse:collapse; }

td { 
  margin:0; padding:0; width:100px; height:100px; text-align:left;
  vertical-align:top;
}

HTML:
<table>
  <tr>
    <td style="background:red;">1</td>
    <td style="background:green;">2</td>
    <td style="background:blue;">3</td>
  </tr>
  <tr>
    <td style="background:yellow;">4</td>
    <td style="background:cyan;">
      <span id="Parent" style="position:absolute; display:inline-block; 
      width:0; height:0;">
        <span id="Child" style="position:relative; left:50px; top:50px;
        display:inline-block; width:50px; height:50px; background:white;">5</span>
      </span>
    </td>
    <td style="background:purple;">6</td>
  </tr>
  <tr>
    <td style="background:pink;">7</td>
    <td style="background:olive;">8</td>
    <td style="background:lightblue;">9</td>
  </tr>
</table>

Monday, 4 May 2020

CSS nth-child versus nth-of-type

Consider this HTML structure:
<body>
  <div>foobar</div>
  <span>foo</span>
  <span>bar</span>
</body>

To select the last (the second) span using nth-child:
document.querySelector("body >span:nth-child(3)");

To select the last (the second) span using nth-of-type:
document.querySelector("body >span:nth-of-type(2)");

How to Reorder Elements in HTML Using CSS Only

CSS is not only for styling with colours, etc, CSS can change the order of elements in HTML. The basic idea is to use 'flex' in CSS:
  • Set parent CSS
    • display:flex;
    • flex-direction:column;
  • Set child 1 CSS (order from 1)
    • order:1;
  • Set child 2 CSS
    • order:2;
  • Set child N CSS:
    • order:...

How to Add Custom CSS and JS Code to Any Website

Customise CSS in any website with Stylish

Create custom CSS for website:
1) Click Stylish extension icon on address bar
2) Click the triple-dot button on top-right corner
3) Click 'Create New Style'
4) Type CSS code in the main code box
5) Click 'Specify' button below, choose 'URLs on the domain', enter the website domain
6) On top-left corner, enter style name
7) Click 'Save' button
8) Open the website to see it customised.

Append additional JS to any website with Tampermonkey

Create additional JS for website:
1) Click Tampermonkey extension icon on address bar
2) Click 'Create a new script...'
3) Modify @name to any name
4) Modify @match URL to @include http://domain.name/*
5) Add @license MIT to top
6) Add new JS code into the self-exec function
7) Click Menu >> File >> Save
8) Open the website to see it with additional JS.

Online storage for Stylish:

Online storage for Tampermonkey: