New CSS to style underlines

Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well.

I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.

Video: New CSS for Styling Underlines on the Web

Continue reading New CSS to style underlines

How to stop showing box that appears when mousing over Chrome tabs

A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below.

Screenshot of Tab Hover Cards in Chrome
Screenshot of Tab Hover Cards in Chrome

For me, these tab hover cards started to annoy me, as they block part of the address bar, so I disabled them. See down below for steps on how to disable tab hover cards.

Steps to turn off tab hover cards in Chrome

  1. In the address bar, type in: chrome://flags/
  2. Do a CTRL + F to bring up the “Find” search box and type in: Tab Hover Cards
  3. When you find “Tab Hover Cards”, on the right there is a drop-down, change it from “Default” or “Enabled” to “Disabled”, and you are done

Sharing resources and articles – September 2019

Here’s a quick sharing resources post with a few links to websites and articles I found interesting.

How to add a circle border around a Font Awesome icon

I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.

I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.

HTML Code

<div class="icon-flex">
  <div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>

CSS Code

.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid blue;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}
.icon-wrapper i {
    color: blue;
}

Few notes about my CSS code

  • If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
  • If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.

Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.

Sharing resources and articles with you: UX, favicon, bad habits and more

I came across a few good articles, blog posts and tools that I wanted to share with you, from UX to avoiding bad habits and unprofessional vocabulary and more.


WordpressPromotion: Get 20% off with coupon code DISCOUNT20 – Coupon expires August 31st. Create your website today!


If you have any reactions or thoughts about these articles or tools listed, please let me know by leaving a comment.

Sharing resources with you: LinkedIn profile and job searching tips, and optimizing Google fonts

I came across a few good resources I wanted to share with everyone, ranging from LinkedIn profile tips to job interview tips to optimizing Google fonts performance.

  • LinkedIn profile tips – Blog post from dev.to, you may not agree with every tip that is listed but they’re something to look at and consider
  • Things to not say in a job interview – Blog post from roberthalf.com, with tips on things to not say during an interview, most are obvious
  • 12 best job search websites – Blog post from roberthalf.com, with a list of job searching websites (a little arrogant of themselves to list their website as #1)
  • Optimizing Google Fonts Performance – Blog post from SmashingMagazine.com, where they give great tips on how to optimize load times for Google Fonts on your website

Using “srcset” for your images and more image delivery techniques

After watching a recent video posted by Google Chrome Developers on YouTube, I wanted to blog about using the “srcset” attribute in the “img” tag in your HTML code to make more web developers aware of this easy-to-use/add code that will help your website. Definitely make sure to watch the video and check out the example HTML code using “srcset” in an “img” tag all down below.

Reduce image size: use srcset to automatically choose the right image (from Google Chrome Developers YouTube channel)

So to implement the “srcset” attribute into your “img” tag all you need to do is use the HTML as in the below example.

<img src="images/default.jpg" srcset="images/default-200.jpg 200w, images/default-400.jpg 400w, images/default-600.jpg 600w">

As stated in the above video, the web browser will do all of the hard work as it will decide what image best fits on the website and if the web browser doesn’t support “srcset” then it will default to the image in the “src” attribute. Need more information about “srcset”? Then check out MDN’s documentation on responsive images.

After watching the above video, I came across another recent YouTube video that had a conference talk focused on modern image delivery techniques and what can be done to images to speed to up websites. I thought the presenter had some good informative points that all web developers should know about.

Fast and Beautiful Modern Image Delivery Techniques (from Coding Tech YouTube channel)

Free online courses and learning sites

There are a lot of free online resources, including tutorials and courses. I put together a list of websites that offer free online courses that I wanted to share with others, hoping to help others. If you know of other websites that offer free online courses, please leave a comment. These websites are geared more toward courses on technical topics and coding/programming.

Take a full page screenshot in Chrome

Here’s a quick tip that I thought would be helpful for others (and myself in case I forget in the future). I needed to take a screenshot of a website in the Chrome web browser and I remembered there was an option in the Dev Tools to do this but I couldn’t find it.

So I searched around online and found an answer, which is pretty simple and quick without having to install any extensions. Here’s what to do:

  1. Open the Dev Tools (hitting the F12 key)
  2. Press the “Ctrl”, “Shift” and “P” keys at the same time
  3. Scroll down the list and find the light purple “Screenshot” rectangles and click the one with “Capture full size screenshot”
  4. A prompt will come up asking you where to save the screenshot and you are done

My thanks go to hackernoon.com for the answer to my problem.

Where does “localStorage” save data?

I have been taking a Javascript online course and we have been using “localStorage” to create a task list app. So I was wondering where does this actual data get stored because the data can be retrieved, edited and deleted so it must get saved somewhere. Since cookies aren’t being used I assumed the data was being saved in some text file somewhere locally on my computer. I did some searching online and found the answer to my question, which I thought I should share on the blog in case it can help someone else out there.

So first, there are two types of web storage, where data is stored locally in a user’s web browser. First, local storage, where the data stored has no expiration date and will persist after the web browser is closed. Second, session storage, where the data stored gets cleared after the web browser is closed.

So the data saved using web storage is stored locally on your computer. Each web browser has their own location to store this data. Looking at Wikipedia’s web storage page, it links to a few pages on StackOverflow (here and here) where others have listed the location of the saved data.

I also wanted to link out to the w3schools.com’s page on localStorage which has a quick simple example in Javascript showing how to set and retrieve data using localStorage.