DEV Community: 2

HTML Tip #01: Avoid Blank Links

Tue, 29 Jul 2025 16:02:53 +0000

Users with sight may see an icon, but users without sight hears the link path and some mumbo-jumbo parameters.

Example from Mazerance

2 solutions: add a visually-hidden text; or use an ARIA label.

Read all tips

The method to my madness

Mon, 05 Jun 2023 14:42:26 +0000

Get out to get them to get in.

I'm building an independent web. Starting with one site, my site. With each site being able to do whatever you can do on third-party sites. I want you to be able to use Twitter from your site, Gmail from your site, Bank or Commerce transactions from your site, and any other thing possible the web can offer.

www.toheeb.com is where that independent web begins. Pending the completion, I'm depending on a lot of services. Including blog.toheeb.com to tell the story. This domain is only a facade of a sub-domain on hashnode.com. These stories are automatically shared to dev.to as drafts and manually shared to Twitter as screenshots. Zohomail powers the email and the list goes on. This is me getting out to get you to get in when it's ready.

My madness is for you and me to own our web respectively. Not them owning us. TO the future of a completely independent web!

I Started a Web OS

Sat, 03 Jun 2023 17:30:36 +0000

In my introductory article titled Hello Web, bla bla bla; I tucked in an external link at the end. In this article, I also tuck in an external link. And in the next article, where I share the method to my madness, I'll also tuck in another external link. One at a time. Well, that's a story for the gods.

So, I published an Operating System (OS), not a Design System. The latter seems constrained to visual design. I wanted something that captures the entire engineering process from Architecture, and Design to Development. Operating System sounds like the perfect term.

Toheeb's Web OS starts with brand elements. These elements are highlighted from the Idea link I tucked in the introductory article.

Hello Web, from Dr Strange Unabomber

Fri, 02 Jun 2023 10:13:59 +0000

The overwhelming state of the web can use the cautious spell of Dr Strange on the crazy idea of Unabomber.

Ted Kaczynski, infamously known as the Unabomber ... argued that modern people are depressed because all the world's hard problems have already been solved. ... So Kaczynski's idea was to destroy existing institutions, get rid of all technology and let people start and work on hard problems anew.

Page 94 and 95 of Zero to One by Peter Thiel with Blake Masters.

In Unabomber's extreme stance are the opportunities starting afresh brings. Which, the web needs to redefine the web experience and erase the web tech debts.

Yet, unsetting web technologies that power millions of businesses worth trillions of dollars is a no-no. But with Dr Strange's mirror dimension, as a safe space to explore that crazy adventure, it's a yes-yes.

Through toheeb.com/en/journey, I'm starting anew to create an independent web.

I is Dr SU.

Demo: px Vs em Vs rem

Tue, 14 Jun 2022 16:49:14 +0000

Do you still wonder when to use px, em, or rem?

You need to understand how they differ by responsiveness and not simplicity.

For that, I made a tool to show you how px, em, and rem relates to its component, document, and the user's preference in the browser settings.

Here's the tool

The tweet below has a video of me using it. (+ why I made it)

// Detect dark theme var iframe = document.getElementById('tweet-1534952628316151808-746'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1534952628316151808&theme=dark" }

If you've got any questions, hit me up in the comments ✌️.

Like it? Please share it!

Introducing ReadUse - A CSS Framework for Readable and Useable Content

Thu, 07 Oct 2021 15:15:50 +0000

Earlier, I shared my plan to design my website in public.

The adventure is to write guides that'll design the website itself, in real time. At the end, I'll have content on web design that uses this very website as a capstone project.

Wouldn't that be fun?

To track how the website's visual will evolve over time, I decided to branch off those styles to a package.

And to make this package useful to anyone, the styles will only be for making contents on a webpage readable and useable. Hence the name: readuse.

Here's how I see websites. They need to be:

readable & useable
creative & unique

ReadUse, a CSS Framework, will take care of the readability and useability part of a website. And let the designer go nuts in making their website unique to their taste. Letting your creativity shine 😂

ReadUse CSS framework will contain two parts:

A drop-in stylesheet that'll will format content to aid User Experience. Using global styles which aren't bad unless misused
A Layout Utility stylesheet that contains common layout components.

All these make up the Functional layer of any website. How website differs is by the decorative layer.

Other CSS Frameworks do both. The result of which makes websites look similar. I want ReadUse to be Creativity-Agnostic. I hope I got that grammar combo right. You get my point anyways 😆

Here's my plan:

💡 I'll be using Github Issues to write and brainstorm on to-dos. A set of them makes a milestone ready for release.

✍️ My site will contain detailed guides of my research on why & how I'm styling it

⚡️ You get to see the result of the framework on this very website as well. Everytime!

Right now, It has crossed its first milestone 🚀

v0.1.0 release is a sanity test that says "hello world" 😂

2nd milestone, v0.2.0 release, will provide well-enough styles to make articles I'll write fairly easy to read.

While future version will provide better UX.

I'm figuring this out on the go! It's my first open source project! And I'm using it to dive deep in CSS. It isn't ready for public use yet.

💡 Ask/Teach me anything, it'll help me learn more

👉 Follow @toheebdotcom for updates.

// Detect dark theme var iframe = document.getElementById('tweet-1445041045146767360-987'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1445041045146767360&theme=dark" }

🗒️ Learn more on Github

Toheeb / readuse

A simple CSS framework for making Functional Designs

ReadUse

🚧 This project is under development. 🚧

Born out of a personal adventure. The progress, and direction of this project will be based on the Guides I write towards the styling needs of my website, where I use it live.

I'm designing this in public. You can follow along on Twitter at @toheebdotcom.

Why ReadUse?

When styling websites, we repeatedly do the following to make content readable and useable.

maintain aesthetics such as the hierarchy of spacing, font sizes, etc.
lay content multidimensionally. From n-column layout to sticky footer components.

I call these Functional Styles. Every website needs them. And ReadUse abstracts these styles so you can focus on making your designs unique, through your awesome creativity!

How ReadUse compares to other CSS Frameworks?

Here's how it compares to Reset stylesheets, Component, Utility or Classless CSS frameworks:

Instead of using reset stylesheets, you can enjoy having aesthetic…

View on GitHub

🌟 Star the repo if you like the adventure ✌️

I went STACKless. Here's what it feels like:

Mon, 27 Sep 2021 17:04:23 +0000

I started an adventure - To design my website through the guides I write.

And if I'm to start from ground zero, I'll have to do without any frameworks or build tools.

Meaning, I'm only left with just HTML files and the assets it need.

Funny enough, the experience is not bad.

Here are the only 2 things I've to deal with:

Folder structure
Folder path

In fact, the second is not a problem as you'll soon find out.

Folder Structure

Getting the homepage to work is as we already do:

Drop an index.html file at the root folder.

Boom! And the homepage will load.

Where the challenge starts from is loading other web pages and assets.

But the ideology is the same.

Say you need about-us page, all you have to do is:

Create a folder titled about-us
Drop an index.html file in it.

That's it! Done!

You'll be able to visit the page at example.com/about-us

And if you need a category on that URL, you'll need to create a folder for each one.

Here's how my folder structure looks to accommodate the above scenario

| toheeb.com/
|-- index.html
|-- plays/
|---- coding-ui-1/
|------ index.html

This creates two webpages:

The homepage - toheeb.com
The article coding-ui-1 in plays category. The resulting URL will be toheeb.com/plays/coding-ui-1

You can create as much pages as you want using this methodology.

The second weird thing is referencing assets files, you'll need a path

Folder Path

~~This is where things can become tricky. You need to consider the location of your file in respect to the location of the asset.~~

It'll be tricky if you decide to use relative paths. Save yourself the stress and reference your assets from your domain name.

(Silly me actually mixed things up. Unnecessary headache. I realised while writing now 😂)

In my case, I have images/ and videos/ on the root folder.

| toheeb.com/
|-- index.html
|-- images/
|-- videos/
|-- plays/
|---- coding-ui-1/
|------ index.html

To reference any asset, all I have to do is use the absolute path.

For example: toheeb.com/images/my-image.jpg

With absolute paths, you won't have to worry calculating if you should use ../, ../../, or ../../../../../../../../. You get the gist😉

With that, you can have your website running fine as expected.

No build time needs to be calculated by providers such as Netlify, or Vercel.

That's how my site is currently running. No problems so far with the two pages I currently have:

The homepage - toheeb.com
And one article I still have hidden in plain site -How to code an accessible website with HTML, CSS - by example

Anyways, have you had any experience with going STACKless?

This seems straightforward for me at the moment. I might even stick to it till I can't cope. Should I?

Anyways, let me know your view.

Unto the next adventure - I'm finding interesting using Github for content planning on my blog. Will share details later.

Follow my journey on Twitter with real time updates: 👇

// Detect dark theme var iframe = document.getElementById('tweet-1442915680639090688-38'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1442915680639090688&theme=dark" }

Designing toheeb.com: Project Scope

Thu, 13 May 2021 20:42:29 +0000

2016, I made my first website. It looked like a house and the roof was responsive. I was happy! I used the sliding door technique along with some math to avoid structure overflow. I became an architect overnight.

Later on, I watched how Adi Purdilla created a WordPress theme from scratch, every step of the way. An experience that improved me a lot. It was amazing having a guide all through the process.

Today, I want to start a series of redesigning my site from a blank canvas. No meta tags, No elements. We will justify everything we use. It should be available to everyone, SEO ready, and look good. Without forgetting Creator's experience.

I will be wearing different hats along the line. Copywriter, Designer ( UI, UX, IxD, Graphic, Frontend), SEO specialist, and more as needed. If deploying a JAMStack is a DevOps' job, add it please.

The Project

I'd like to see this as a Startup website. My focus right now is on Content. Both long- and short-form content.

Later on, I will love to productize my Freelancing Service and end up with a SAAS tool. Rough ideas.

This is more of a live design. Ideas may come up and I'll need to branch out. Irrespective, I'm taking a lean approach.

The deliverables as of now will be the following.

A Landing Page
A blog
A portfolio

Other necessities like the Contact, and About Page will be a section on the Landing Page.

It's good you know I'm a design freak. And, an advocate of inclusive designs. This means I'll be delving into minute details including Typography, Color, Accessibility, etc.

I have my weakness(es). Copywriting is top of the list. But hey, the web is large enough to learn and create amazing stuff!

Timeline

This is a priority for me right now. I'll be spending the next couple of days working on this, and writing about the process every step of the way.

I spent the last few weeks on the landing page's copywriting. It was an interesting process iterating and discarding what I wrote. Now, I have something that clicked with me. I'll be sharing how I wrote that next tomorrow.

I trust you'll learn a thing or two. And hope you'll learn a lot. I look forward to your feedback.

Working canvas: https://www.toheeb.com/

If you'd like to receive updates in your inbox, here's a subscribe link.

3 Categories of NPM Packages

Mon, 24 Feb 2020 13:19:15 +0000

So I typed that in Google and no interesting result. By my experience, I feel I can categorize them into those used via:

CLI,
API,
as a Plugin

CLI

Examples: Del-cli, Postcss-cli, Webpack-cli, and any other npm package you see ending with "-cli" (convention, probably).
They are run via the terminal

> del '*.png' --dry-run

A package can be available as a CLI only tool (del-cli), while some others may be available as an alternative to run the API via CLI (eg Webpack-CLI runs Webpack via CLI).

API

Examples are Webpack, Bootstrap. They are required/imported in a script

// Using webpack via API
const webpack = require('webpack');

webpack(...);

or referenced

<!-- For example, in an html file -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

NB: The above is used to illustrate referencing a file directly from the node_modules. For those using bundlers like webpack, you may simply import bootstrap in a script like this and take advantage of other features of the bundler

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Plugin

By plugin, I mean a package that can be used to make another package compatible in an environment. Example: gulp-postcss makes postcss usable within gulp; css-loader and Mini Css Extract Plugin enable using a stylesheet through a script in webpack (I'm categorizing both webpack loaders and plugins as plugins in a general term). Their usage depends on the environment's condition.

Anything else I missed? Thanks for reading