DEV Community: Vishnu Baliga

3 Insanely Simple Steps To DIY Tooltips

Vishnu Baliga — Wed, 10 Jun 2020 10:03:21 +0000

GUIs have made monumental leaps since the inception of the humble Sketchpad. However, it’s the simplest tools that often spruce up your website from mediocrity to excellence. One such GUI element that holds this distinction is the humble tooltip. For the uninitiated, the tooltip is the little hovering box that pops up when you float your cursor over an item without clicking on it. A tooltip is typically used to provide information on an item or instructions to its purpose.

At first glance, tooltip might seem like an inelegant entity not worth investing time in when creating your website. On the contrary, it is like the last Lego block needed to complete your model set: a small piece without which the whole model falters. Tooltip allows visitors of your website to stay on the same page when browsing thus effectively eliminating the need for a ‘Help’ section. This enhances user experience and ensures that the point you are communicating through your website is delivered seamlessly without any needless interruptions. Moreover, they are a fine addition as it does not crowd out the content you are presenting whilst giving the viewer the choice to make use of the tooltip. These minute improvements in user experience could lead to a positive cumulative effect at the end of the day. I have outlined the methods to build your own CSS only tooltip below. I have chosen to demonstrate using CSS over JS to reduce the unwanted JavaScript overhead.

How to Build a DIY CSS tooltip?

You don’t have to rummage through StackExchange to come across a decent free tooltip.

What if I say you can make one yourself?

Here’s a DIY CSS tooltip that you can use. Alternatively, you can use SASS or Less, as per your preference.

1. Define HTML elements with tooltip related attributes

You can define any HTML elements such as button, anchor, span, and then add the attribute to enable a tooltip on them. In the following example, I’ve added tooltip-title attribute to the elements.

2. Add styling to your tooltip.

We are styling the tooltip in the :after pseudo-element of the selected element using CSS.

3. Advanced tooltip features (optional).

3.1 Position your tooltips

In addition to its looks, you can define the position of the tooltip as well. For instance, top, bottom, left, right, top-right, top-left, bottom-right, bottom-left, etc.

Shown below is an example of making a tooltip display according to the position mentioned in the tooltip-position attribute. ( tooltip-position='bottom' is shown as the example, you can do it similarly with other possible positions.)

3.2 Colour your tooltips

You can define a color to your tooltip depending on the message you are displaying (example: success/green, warning/yellow, error/red, etc.)

In the example below, I’m adding tooltip-color attribute to the element to define the required color. ( tooltip-color='warning' is shown as the example, you can do it similarly with other possible colors.)

3.3 Size your tooltips

You can define size to your tooltip depending on the length of the message you are displaying (example: small, medium, large, extra-large, auto-width, etc.)

In the below example I’m adding the tooltip-length attribute to the element to define the width of the tooltip. ( tooltip-length='lg' is shown as the example, you can do it similarly with other possible lengths.)

You can have a look at the working demo of the above example here: Tooltip Preview

Also, I’ve created an open-source tooltip library called SpikeTip, which you can use in your website/ fork/ and then modify it the way you want.

For those of you who want to directly incorporate the tooltip into your projects, I have created an NPM package and you’ll find the installation guide here: SpikeTip — NPM Package.

Tooltips would definitely be a pertinent addition to your website and I hope the DIY mini-tutorial above helped you to create stylized tooltips of your choice.

Originally published at https://vishnubaliga.com.

3 Insanely Simple Ways to Switch Your Website To Dark Mode

Vishnu Baliga — Wed, 29 Apr 2020 12:37:28 +0000

As the infamous Darth Vader once said, “You don’t know the power of the dark side.” 2019 brought justice to Vader when dark mode took over our apps and the craze is yet to plateau. From Instagram to Youtube, our beloved apps have jumped on the bandwagon and it won’t be long before the Sith triumphs.

What is Dark Mode?

For those fond of technical jargon, Wikipedia defines dark mode as the “color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background.”

Simply put, dark mode is just as the name suggests: a darker thematic interface for your apps. However, there’s more to it than a gothic premise.

Why is Dark Mode all the rage?

Who doesn’t like a tall, ‘Dark’ Stranger. The dark mode has a certain sense of aesthetic appeal that's charismatic to all; a congruence that's hardly kaleidoscopic.
For a generation that spends more time in front of screens than people, dark mode takes a minimal toll on your eyes. God bless thy eyes!
It helps maintain the circadian rhythm of users.
Finally, it drains less of your battery. Now, that’s a deal-sealer, ain’t it!

What are the ways to switch your website to Dark Mode?

‘Ready, you are’, so let’s take a look at three easy ways to implement dark mode for websites.

1. Check for OS-level preferences

Before getting into the nitty-gritty of the affair, it is vital to check the parameters for the operating system. For instance, Whatsapp in certain android versions gave the users the option to switch to night mode whereas iOS dark mode was set as default on its devices for the app. This should be taken into account before adding the codes for the same. The code to implement the dark theme is shown below in both CSS and Js.

Using CSS

Code if Js detection is needed

2. Choose a theme based on the time of day

In the age of convenience, a full-time dark mode may not be a viable option for users of your website. Your website’s flair would be spruced up immensely by using a theme that mirrors the time of day. In this manner, the early birds are taken care of and so are the night owls! It’s only sensible to maintain this natural equilibrium.

The following code is a good place to start.

3. Let visitors manually choose a theme

As the old adage goes ‘Beauty is in the eye of the beholder.’ Not everyone will be comfortable with a dark theme and it would help your cause if you enable the option to toggle between the two. Imagine the plight of a hypermetropic uncle browsing through your website that’s in night mode.

The following widget is a working example

Browser Support

We have all faced it.

The distressing compatibility issues that pop up while opening attachments that were created & modified in archaic versions. The same applies to the codes above as it might not run in certain versions or different browsers. To help you out, the following chart provides an outline in this regard.

Dark mode is here to stay, well, at least until a Jedi rises with a new format.

The three methods mentioned above can definitely boost the appeal of your site. And, to know more about Night mode and the related topics, here are some links for you!.

Until then, may the force be with you! 🖖

Originally published at https://vishnubaliga.com

Top 10 Web Design and Development Blogs to Follow in 2020

Vishnu Baliga — Sun, 26 Apr 2020 15:10:22 +0000

From college students looking to make some extra cash to professionals
moonlighting or working full time, web design and development is a niche that has been thrust into the limelight of late. It takes skills and creativity to be a web designer or developer and new strategies are popping up at a rate faster than Dwayne ‘The Rock’ Johnson movies. It is, therefore, a herculean task for folks to stay on top of all the info. As Steve Jobs rightly said, “There’s always ‘one more thing’ to learn”. It is vital for both fledgling and veteran developers & designers to keep up with the latest trends in order to stay in touch with techniques that’ll allow the creative juices to flow.

Best Places to Learn

There is an overwhelming amount of information pertaining to this area making it difficult to pinpoint the ones ideally suited for the needs of developers and designers. A good place to start would be to browse through blogs that are able to guide one through the process and that is updated regularly with new and exciting tricks of the trade. We have compiled a list of the top 10 web design and development blogs to follow. So, what are you waiting for? Let’s learn something new, today!!

1. CSS-Tricks

CSS-Tricks has been going strong for over a decade and has a plethora of articles providing insights, tutorials, and updates pertaining to web design and development. It is built and run by website Guru Chris Coyier and features articles from numerous guest writers across all spectra of website building.

2. Codrops

Blog posts on Codrops feature articles on the latest web trends and novel techniques for its implementation. It also has a playground that contains the latest experiments and plug-ins relating to web design and development.

3. Smashing Magazine

Since its inception in 2006, Smashing Magazine has gone onto host conferences and workshops in addition to publishing articles on anything and everything related to design and development. They also possess a library of over 60 ebooks for users to peruse. Be sure to check this one out!

4. GitHub Blog

GitHub Blog is owned by Github inc, a subsidiary of Microsoft. It provides a comprehensive array of articles on tips and tricks to help you navigate through the intricacies of web design and development.

5. UXPin

UXPin is primarily a product design platform and its blogs revolve around topics that are often overshadowed or forgotten. Going through their blogs would be a clean way to polish your web designing and development skills. The articles here will provide instructions on techniques that will allow you to have greater control of your website and encourage a higher level of customization.

6. Scotch.io

Scotch.io has courses and tutorials aimed at enhancing the ability of web developers and designers. Moreover, it is run by a vibrant community of coders and provides a platform to discuss the hurdles faced during implementation. Be sure to pay a visit to their community to have fun while learning.

7. CodePen Blog

One of the founders of CodePen is the same gentleman who created the first entry in our list and he intended this to be a playground to test the latest techniques in web design and development. CodePen blog is the perfect place to start for those who want to hone their skills in a realtime environment.

8. Web Design Weekly

Web Design Weekly as the name suggests, it is a weekly web design newsletter. It is an ideal platform for web developers and designers to stay updated and its content would resonate particularly well, for it’s written by experienced web designers.

9. Sitepoint Blog

Sitepoint publishes innovative articles on web design and development on a daily basis. They also have a monthly newsletter that you can subscribe to which provides a round-up on all the ‘happening’ things in web design and development. Talk about consistency!

10. Tutorialzine

Tutorialzine publishes interesting articles to improve the skills of web designers and developers in addition to having an extensive collection of libraries and web experiments.

The 10 blogs listed above is a holistic pool of information for web design and development. There are more out there, however, the 10 I’ve handpicked here are relevant to the needs of the market and reflect the tremors in the world of web design and development. Moreover, these blogs have received glowing testimonials from those involved in the same field and the considerable traffic to these sites is further testament to their appeal. A few hours on these blogs could very well result in your skills growing tenfold whilst providing the opportunity to interact with a community of like-minded individuals.

Originally published at https://vishnubaliga.com