Month: October 2022

Bootstrap 5.0 Buttons with Icon and Text

In this post, we discuss how to use Bootstrap 5.0 icon CSS with Bootstrap CSS to create buttons with icon and text, and buttons with icon and no text.

Bootstrap provides free, high quality, open source icon library with over 1,600 icons. Please see https://icons.getbootstrap.com/, this page lists available icons and their names. We’ll use these icon names to display the actual icons.

Toward the bottom of the page, under the Install section, we’ll find the download button and CDN link to bootstrap-icons.css.

To create a button with icon using Bootstrap 5.0: 

<button type="button" class="btn btn-primary btn-sm"><span class="bi-ICON-NAME"></span>&nbsp;BUTTON-TEXT</button>

Replace ICON-NAME with a name listed in the page mentioned above, and of course BUTTON-TEXT with an appropriate label. For example: 

<button type="button" class="btn btn-secondary"><span class="bi-search"></span>&nbsp;Search</button>

Please note, in the above example, I don’t use Bootstrap CSS btn-sm.

To create a button with only an icon and no text, simply remove the label: 

<button type="button" class="btn btn-secondary"><span class="bi-search"></span></button>

I’ve created a simple HTML page which shows a few buttons which I’m using in my project: 

<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="canonical" href="https://icons.getbootstrap.com/">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

	<!-- Bootstrap Icons CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet">
	<title>Bootstrap Icons</title>
</head>

<body>
    <button type="button" class="btn btn-primary btn-sm"><span class="bi-plus-square-fill"></span>&nbsp;Add</button>
    <button type="button" class="btn btn-secondary"><span class="bi-search"></span>&nbsp;Search</button>
    <button type="button" class="btn btn-danger"><span class="bi-trash"></span>&nbsp;Delete</button>
    <br/><br/>
	
    <button type="button" class="btn btn-primary"><span class="bi-plus-square-fill"></span></button>
    <button type="button" class="btn btn-secondary btn-sm"><span class="bi-search"></span></button>
    <button type="button" class="btn btn-danger"><span class="bi-trash"></span></button>
</body>
</html>

The live URL of the example page: https://behai-nguyen.github.io/demo/042/bootstrap-5-button-icon.html

bootstrap-icons.css uses two font files: 

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf") format("woff2"),
url("./fonts/bootstrap-icons.woff?8d200481aa7f02a2d63a331fc782cfaf") format("woff");
}

These two font files are part of the download. I believe we can include them in our own applications — but please do your own investigations before you redistribute them.

I did enjoy looking at how to do this… these two Bootstrap CSS libraries work together seamlessly. Thank you for reading, and I hope you find this post useful. Stay safe as always.

Docker on Windows 10: mysql:8.0.30-debian log files

Running the Docker Official Image mysql:8.0.30-debian on my Windows 10 Pro host machine, I want to log all queries, slow queries and errors to files on the host machine. In this article, we’re discussing how to go about achieving this.

We’ve previously discussed how to implement a custom config file for MySQL Docker Official Image in Docker on Windows 10: running mysql:8.0.30-debian with a custom config file. This post assumes that we are using this custom config file.

What I would like to do is to log all queries, slow queries and errors to files on the host machine. The official references to each of the log types:

Accordingly, the custom config file E:\mysql-config\mysql-docker.cnf gets updated as: 

[mysqld]
default_authentication_plugin=mysql_native_password
log_bin_trust_function_creators=1

# Below contents are updated contents.

# General and slow logging.
log_output=FILE

general_log=1
general_log_file="/var/lib/mysql/general_log.log"

slow_query_log=1
slow_query_log_file="/var/lib/mysql/slow_query.log"
long_query_time=10
log_queries_not_using_indexes=1

# Error Logging.
log_error="/var/lib/mysql/error.err"

I updated it directly on Windows, its permissions get changed, and as discussed in Docker on Windows 10: running mysql:8.0.30-debian with a custom config file, we need to change its permissions to the correct ones.

While mysql-docker mysql:8.0.30-debian container is running, start the interactive mode with the Bash process to change config file permissions: 

E:\>docker exec -it mysql-docker bash


root@8e6656b15d9a:/# cd /etc/mysql/conf.d/
root@8e6656b15d9a:/# chmod u+rw-x mysql-docker.cnf
root@8e6656b15d9a:/# chmod g+r-wx mysql-docker.cnf
root@8e6656b15d9a:/# chmod o+r-wx mysql-docker.cnf

Permissions should now be correct. To verify: 

root@8e6656b15d9a:/# ls -l


total 4
-rw-r--r-- 1 root root 380 Oct 20 11:40 mysql-docker.cnf

Restart mysql-docker container for the new settings to take effect: 

E:\>docker stop mysql-docker
E:\>docker start mysql-docker

Please note, for the above two ( 2 ) commands to work, mysql-docker must be started without the –rm flag, that is: 

docker run -d -it --name mysql-docker -p 3306:3306 -e MYSQL_ROOT_PASSWORD=pcb.2176310315865259 --mount type=bind,source=//e/mysql-config,target=/etc/mysql/conf.d --mount source=mysqlvol,target=/var/lib/mysql mysql:8.0.30-debian

Please also notice the following option in the above docker run command: –mount source=mysqlvol,target=/var/lib/mysql. We shall come back to this option later on.

Using a client tool such as MySQL Workbench to verify that the new settings are effective: 

show variables like 'general_log';
show variables like 'slow_query_log';
show variables like 'log_queries_not_using_indexes';

The above commands should each return ON. Similarly, the below should each return the corresponding values we set in the config file: 

show variables like 'general_log_file';
show variables like 'slow_query_log_file';
show variables like 'log_error';

➡️ But where /var/lib/mysql/general_log.log, /var/lib/mysql/slow_query.log and /var/lib/mysql/error.err are?

In Python: Docker volumes — where is my SQLite database file?, I’ve discussed where Docker volumes or data files are on Windows 10 Pro host machine: essentially, due to the installation of my Docker Desktop uses Windows Subsystem for Linux ( WSL 2 ) based engine, I can copy and paste this directory: 

\\wsl$\docker-desktop-data\version-pack-data\community\docker

to Windows File Explorer, and it should go to the top level Docker desktop data directory; mysql-docker‘s files are in: 

\\wsl$\docker-desktop-data\version-pack-data\community\docker\volumes\mysqlvol\_data

We should find our log files:

Why \\wsl$\docker-desktop-data\version-pack-data\community\docker\volumes\mysqlvol?

Recall the docker run option previously mentioned –mount source=mysqlvol,target=/var/lib/mysql? source=mysqlvol is the host machine volume or where the container’s data files live.

Logging all queries can slow down the server, and the log file can get very big, it should only be used during development, certainly not in production. Also, these options can be set and reset on the flight without needing to use the config file or server restart. For example, via MySQL Workbench: 

SET GLOBAL general_log = 'OFF';
SET GLOBAL general_log = 'ON';

I’ve tried, and it works: I can turn off general_log, then delete the log file, turn on general_log again, and a new log file is created.

I do hope you find this helpful and useful. Thank you for reading and stay safe as always.

2000s flashback: a web API service…

The years were 2001-2002 and we were returning HTTP requests’ data using “our own text format” 😂 😂

Going through my old files, I happened to find this diagram on a larger project which I was employed as a developer back in late 2001 early 2002:

The diagram was by my project manager. Other team members and I were assigned to the blue box:

  • For web clients, we returned complete HTML pages.
  • For Windows executable clients, we returned only data. So the web server application was also kind of providing Web API service.

Back then, XML was only a few years old… The project manager decided not to use it: too heavy with all the tags, bandwidth and speed were factors in this decision. JSON has just come out, and we were not yet aware of it… I don’t recall it was ever mentioned in any of the project meetings.

The project manager decided to go with “our own text format”: we packaged data up on the server-side using this format, returned it via HTTPS, and at the client-side, the data was parsed into the Borland VCL client dataset ready for further manipulation.

It was fun, but time-consuming, column values boundaries did pose some difficulties especially with blob values. 2022 — we just use JSON 😝

I have forgotten about this project… finding this diagram brings back some memories, I felt the urge to write this post.

Back then, online gaming was still a new industry, there were new legislations just put in place, we were not required to go through any security check, but we were issued with a special employee licence, there were certain gambling activities that we were not allowed to participate while working in the industry:

Over the years… my hair decided to go… Painful, but what can I do 😾. Thank you for reading. And stay safe.

Design a site like this with WordPress.com
Get started