Posts

Showing posts from December, 2024

HTML Email in Gmail

Image
Writing HTML Email in Gmail is easy but tricky. There are also browser extensions providing that functionality. For Example, HTMail: Insert HTML into Gmail, Outlook and Yahoo Mail extensions for chrome browser.   HTML Email in Gmail However, the simplest and cleanest way is inserting HTML manually. It is easy and tricky. This howto is only for Gmail. Follow below steps: Press Compose for new Email Type snippet of text to be replaced following by pressing Enter for new line. Note: pressing Enter for newline is very important so browser's HTML Editor in Developer Tools would create separate div tag otherwise pressing Send in Gmail will wipe out all content and reset to the snippet of text that inserted previously. In the browser's Developer Tools, Right Click on the highlighted code block and select Edit As HTML . Then insert your HTML div block only. Your HTML Email will now appear in Gmial's new email compose box. Send it. ...

My Neovim Setup

Neovim is a fork of Vim aiming to improve the codebase, allowing for easier implementation of APIs, improved user experience and plugin implementation. Setting Up Neovim This is my neovim setup of personal preference. The setup or configuration is all included in ~/.config/nvim/init.lua file. Except native user settings, the following plugins are installed: savq/paq-nvim plugin manager written in Lua. hrsh7th/nvim-cmp auto-completion. neovim/nvim-lspconfig language server protocol (LSP). L3MON4D3/LuaSnip snippet engine. rafamadriz/friendly-snippets snippets. nvim-treesitter/nvim-treesitter treesitter for better syntax highlighting colors. marko-cerovac/material.nvim material colorscheme. nvim-telescope/telescope.nvim telescope search tool. nvim-tree/nvim-tree.lua side bar file explorer. nvimdev/indentmini.nvim indent line. windwp/nvim-ts-autotag autoclose and autorename html tag. The above plugins ar...

General Notes of CSS

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This is general notes of CSS. Body Width that Expands or Shrinks on Zoom In or Out of Browser Setting width of body or div of HTML document is using width and height , and the values can be px , % , vw , vh , and em . But setting width will not respect zooming in and out of browser when you hit Ctrl + - , Ctrl + = and Ctrl + 0 . Meaning the width of body will not expands or shrinks on zooming in and out the browser. To make the width of body or div so, setting max-width to px value is the trick. See: body { margin: auto; max-width: 1000px; padding-left: 9px; padding-right: 9px; } @media only screen and (max-width: 700px) { body { width: 100%; padding-left: 9px; padding-right: 12px; } }   Positioning Text Over Iamge See: Positioning Text Over a Image

Waybar Height Expands to Non-English Fonts Height in Window Title and Custom Menu CSS

Waybar is highly customizable bar for Sway and Wlroots based compositors. It is available in all major distributions. Waybar's configuration is reading ~/.config/waybar/config.jsonc for module settings and ~/.config/waybar/style.css for appearance.   Non-English Font in Window Title Expand the Bar's Height Non-English fonts in the window title of window title module expand the bar height. It is annoying. To prevent it, setting maring-top and margin-bottom to minus value like margin-top: -30; and margin-bottom: -30; is the trick. See: #custom-actwt { margin-top: -30px; margin-bottom: -30px; margin-left: 6px; margin-right: 6px; }   Waybar Menu CSS Waybar has custom menu module. See: waybar-menu (5) , by $ man 5 waybar-menu in terminal. The useful CSS properties and their values are: /* msh added - tooltip css */ tooltip { background: #111111; border: 2px solid #ff00ff; border-radius: 9px; } tooltip label { color:...