Breadcrumbs or a customized back button ? | Web UX & UI
I am wondering, should I create a full breadcrumb like this home > posts > a post title or just a customized back button like this <- see all posts ? Let’s compare! breadcrumbs 🔗 Using breadcrumbs gives the full path with details, but it has high cognitive load especially if the user/visitor is not tech savvy. Breadcrumbs gives a detailed clear location of where you are as a visitor in the website.
You Local Development Environment: Adapt to it or Change it to your liking?
Some programmers tend to stick with a development environment as go with it fully. Either customizing it for their liking or learning and adapting to the environment configuration. But is it better to adapt or customize the environment ? What if you adapt ONLY to your local development environment ? 🔗 If you learn a certain local development environment, adapted yourself with it, stick with it, you’ll get stuck with it.
How to redirect www to non-www in Cloudflare ?
redirect www to non-www in cloudflare 🔗 login to your Cloudflare dashboard, choose your website domain name click om “rules” as you see in the screenshot below. click om “redirect rules” under “single redirects” section, click on “create a rule” on the card named “redirect from www to root”, you’ll see a button with the text “create a rule”, click on that button. and you’re done. video tutorial on redirecting www to non-www in cloudflare 🔗 If you prefer watching a video instead of reading, here you go.
How to optimize images for website performance?
What is image optimization? 🔗 Optimizing images is the process of reducing the size of the images. Optimizing images for getting better loading speed on the website has more steps than just optimizing the size of the image. Why optimizing images? 🔗 People has too short attention span. Statistically, people can’t wait more than 2.5 seconds for the webpage to load. So, if your website is taking more than 2.
How to take screenshot of a specific html element in chrome console?
You can take a screenshot of a specific HTML element using Chrome DevTools. Let’s do it step by step. Take a screenshot of a specific HTML node? 🔗 Steps to capture an HTML node as screenshot: inspect the element you wish to capture right click on the HTML node (or HTML element) and select capture node screenshot. write the name for the image. Note: if you missed up the HTML element, re-select the correct HTML element using the selection tool on the DevTools tile.
Go pprof cheat sheet
As you know, “What is measured, improves”. So, if you can measure the performance of you application, you can improve it accordingly. Go programming language has pprof for measuring performance of your apps written in Go. Enable profiling in Go application 🔗 Default http server 🔗 If you are using the default http server handler, enable profiling like that. import ( _ "net/http/pprof" "net/http" ) //... return http.ListenAndServe(":8081", nil) Non-default server 🔗 If you are using a custom http server handler, enable profiling like that.
Choosing my distro: Ubuntu, NixOS, Elementary OS or Pop!_OS
I used Ubuntu for more than 8 years now. I tried Elementary OS, Pop!_OS, Kali Linux, Parrot OS, Linux Mint, Manjaro, .. and too many other distros. But today, I wanna decide what to use in my journey as a software developer and tech geek. I eliminated all other Linux distributions, and the list of choice is as follows with my reasons. Ubuntu: wholesome. Elementary OS: the great user experience (UX) of Pantheon desktop environment.
[fixed] Gnome Boxes can not install any linux distro with error message "no kvm"
I installed gnome-boxes via APT on my Ubuntu 24.04 LTS. I installed Windows 11 on it easily, but every time I try to install elementary OS or Nix OS or any other Linux distro I face an error message of “No KVM”. I run this command to fix missing dependencies. sudo apt upgrade --fix-missing but still GNOME boxes does not let me create a linux box yet. I run gnome-boxes from the command line and tried to install a Linux distro.
Swapy | A Javascript Lib to Drag to Swap Items In Any Framework
Swapy is a new Javascript library to make drag-and-drop to swap elements on the web page a breeze. It is framework-agnostic, and even works with Vanilla Javascript. Swapy works in React, Vue, Svelte, Solid, Angular, Qwik, and even vanilla JS. To experience the drag-and-drop to swap page items, check the lib website here . Swapy is opensource and its code is on Github. Check it out here . How to use swapy in vanilla javascript ?
[fixed] Top Right Corner is not responding to clicks on Ubuntu Linux
I have an HP laptop with Ubuntu 24.04 LTS installed on it. I use this laptop for software development especially CLI apps and web development. I faced a weird bug. I hesitated too many days before confirming it is a real bug/issue. I googled the problem and found too many people facing the same bug but they word it differently when they ask. Here is some wordings of the problem/bug 🔗 Right corner at Chrome not response to mouse click Top right area is not clickable in Ubuntu 23.