Hacks

Website design hacks and tricks from this video by Sajid. Part of the series Sajid’s Web Wisdom

Color

• Use HSLColor function over Hex and RGB values, allows us to manipulate the colors and get as many shades as we want
• For hover effects, simply increase the button element’s color lightness.

Palette

Create your primary and secondary color by manipulating the lightness, for example 90% and 10% respectively. Then to get your tertiary and accent colors, move 60 degrees left and right, respectively, of the primary color. Refer to https://www.iamsajid.com/colors/ For more read Choosing UI Colors

Images

Convert them to WEBP format for same quality but have the size. Check Tech Resources for websites that do this.

Icons

Use SVGs, they’re dynamically sized and lightweight. Can do all sorts of stuff to them, and respond to dark mode.

Cheap and Easy Dark mode

To adapt system to the user’s preferred mode.

@media (prefers-color-scheme: dark)
{
/* Dark mode styles here*/
}

Favicon

Add your favicon via a .ico file, it’s auto requested by browsers, so convert and place it in root or public directory. Favicon.io is a good source to convert. Tech Resources

HTML

These are goood HTML tips

User Interaction

• Can make any HTML element editable, by specifying the contentEditable=true attribute.
• The inert attribute will make any HTML element visible but non-functional.

Easy pop up

Write everything, then wrap in a <dialogue id="popup"> tag which will make it invisible, then using its ID, use the built-in showModal() function to display it. E.g. <button> onClick="popup.showModal()">click</button> This can be closed either by esc or .closeModal() function.

Input mode

Specifies the input mode for an <input> element, such as email and numeric. This is great for MobileFriendly design.

Native Collapsible element

1. Wrap the hidden content in a <summary> tag.
2. Then place that into a <details> element.
3. Done.

Easy info on hover

Use the <abbr> element.

Easy input autocomplete and options

<input list=list/>
<datalist id="list">
	<option value="bob"></option>
</datalist>

Easy progress bar

Just use the native progress tag, set the value and max attributes, give it an ID to update with JS.

CSS

• aspect-ratio: 3/4 is an example of how to make an element maintain a ratio regardless of viewport, great for Thumbnails.
• Readable underlined text via text-underline-offset: 2px;

List styling

Creative list markers that DO NOT need pseudo-selectors NOR align the text with the marker.

li{
	list-style: "🔥";
}
li:nth-child(2){
	list-style: "🥥";
}
 

Dynamic Heading sizes

--h1: bold max(36px, 4vw) / max (48px, 5vw) var(--ff);

Snap scrolling

Two lines is all it takes, but remember that some users don’t like this…

html{
	scroll-snap-type: y mandatory; /*axis and type*/
}
 
/*styles here...*/
.section{
	/*styles here...*/
	scroll-snap-align: start;
}

Gradient on button hover

button:hover {
  background: linear-gradient(180deg, var(--color100), var(--color90));
  transition: 0.3s ease-in-out;
}

Smooth Scale-Up on Hover

Here’s a neat little CSS trick I use to make elements feel interactive and polished:

.click-hover:hover {
	cursor: pointer;
	transform: scale(1.0625);
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform; }

Breakdown

• The element scales up by about 6.25%, neat subtle zoom effect.
• The transition makes that scaling smooth over 0.15 seconds, using a cubic-bezier curve (0.4, 0, 0.2, 1) for a natural ease-in-out feel.
• will-change: transform is a heads-up to the browser to optimize for this animation, so it runs smoothly without lag. I use this for cards and divs (even buttons sometimes) where I want users to get that it’s interactive.