Change Google Chrome Address-bar color

It’s a quick little solution to customise the browser’s Address-bar colour as per your website’s theme colour.

By-default the address appears with default colour theme depending upon whether you enabled Dark-mode or not. As it has white colour as default for Google Chrome.

If you have noticed websites like Facebook and more, you can see their Address bar and header looks seamless have same colour shown below.

So, how to achieve this for your website ? Add this one line of code to every page of your website, or if you have a single header file inside any CMS, move towards the file containing all the <head> tag related code and insert the below code snippet there.

<meta name="theme-color" content="#c21f3e">
check line no. 8.
Adding the theme-color meta changes as per given value.

Show YouTube subscriber count on your website

If you run a YouTube channel and want to display it’s subscriber count on your personal blog or a website, there is a very simple way of doing it. All you need is to paste a 2 line code inside your display wrapper. This might be the quickest way to display Subscriber count on any website and plus you do not need to register any API key for this.

Follow mentioned steps:

  1. Open your YouTube channel and get it’s Channel ID (visible on URL bar)
  2. For ex: https://www.youtube.com/channel/UCg09tk_YFpK-vzQicr3nN5Q (it could be like Techplayce or in my case: “UCg09tk_YFpK-vzQicr3nN5Q”
  3. Now go to this website: https://developers.google.com/youtube/youtube_subscribe_button
  4. Add your channel ID as shown in below image
  5. Choose your configurations from the next line options.
  6. Once done, you would see the embed code for displaying YouTube Subscriber count on your website.
<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCg09tk_YFpK-vzQicr3nN5Q" data-layout="full" data-count="default"></div>

Install Homebrew on Mac

Homebrew is a package manager for Mac systems. The biggest advantage of installing Homebrew is that it makes your developer life somewhat comfortable and quick. Installing huge applications like Node, NPM becomes just 3 words matter. Learn more about it on it’s official website – http://brew.sh/. Best part: It comes free.

Installing Homebrew is a single command effort, all you need to do is open your MacBook terminal and enter this single line command as it is: 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
install homebrew

The moment you hit enter after this command, Homebrew installation starts and guides itself in. Listen to the prompts on the terminal to finish your installation. 

If you wish to read more about “Why Homebrew?” This question get’s answered itself on the Homebrew’s official website Homepage. I’m listing below some of the points from there: 

  • Good for newbies, easy to understand and manage packages.
  • Homebrew installs the stuff you need that Apple (or your Linux system) didn’t.
  • Homebrew won’t install files outside its prefix and you can place a Homebrew installation wherever you like.
  • Homebrew installs packages to their own directory and then symlinks their files into /usr/local.

Wanna know more, I find this article very easy to understand and helpful https://blog.teamtreehouse.com/install-node-js-npm-mac

List of resources for ARIA Development

Introduction to Web Accessibility

What is concept of Accessibility into Web. In simple words, we are allowing the web to be accessible by all, then may be it a person with a difficulty in reading or seeing. We used the modern browsers to read the content or speak-out actions of the page to the user. You can read more about it in detail here:

Tools for focusing on W3C ARIA Accessibility:

Contrast Ratio

Calculate the contrast ratio for color of text and background color used on your website. For a optimum contrast ratio value, your styling should score atleast 3:1. You can read more about Contrast Ratio here (https://www.w3.org/TR/WCAG/#contrast-minimum)

What-Input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).

Training and Certification

Web Accessibility Checklist

Using ALT text on images properly

Color Blind Web Page Filter

Color Blind Simulator for Mac