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 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.

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.

Media query max-width and min-width

I wanted to write a quick blog post explaining in plain English what max-width and min-width mean when setting up media queries in your CSS, so here we go first with an example of media query code in your CSS.

Code examples of min-width and max-width

<style>
@media (min-width: 480px) { /*add your css in here*/ }

@media (max-width: 1280px) { /*add your css in here*/ }
</style>

Using the code example above, “min-width: 480px”, means that when your web browser’s viewport width is equal to or more than 480px, then the web browser will apply the CSS in the brackets that follow.

Again, using the code example above, “max-width: 1280px”, means that when your web browser’s viewport width is equal to or lesser than 1280px, then the web browser will apply the CSS in the brackets that follow.

Parallax scrolling effect, the new web thing to do on your site

As the web changes, new designs and effects become popular and you see them across many sites. One new effect I’ve been seeing more and more is the “parallax scrolling effect” where you have backgrounds stay in place as the user scrolls down the page.

If you somehow haven’t seen this cool effect yet, check out the w3schools.com links below to see the effect and also the code to do this yourself.

WordPress plugins you should use for your WordPress site

Wordpress logoThis blog post was going to be a post specifically for my wife with suggestions on what WordPress plugins to use for her sites, but the more I thought about it, these plugins should be used on most/if not all WordPress sites (or similar plugins that provide the same features).

Below is a list of suggested WordPress plugins that you should use for your web site (for a small-to-medium sized standard WordPress blog, not including a forum or store). Reminder that this is just my opinion and if you prefer different plugins feel free to leave a comment telling us which ones and why.
Continue reading WordPress plugins you should use for your WordPress site

Cool HTML5 tips for form inputs

I wanted to share these cool quick tips that HTML5 provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5.

Placeholder attribute
You can now easily have “placeholder” text display inside a text field, whereas before you had to use Javascript to add text inside a text field before the user enters their own text.

Code

Input Type: Date
You can have a date field where users can select a date from a visual calendar that appears and you don’t have to code the calendar.

Code

Input Type: Time
You can have a time field where users can select a time.

Code

To see more HTML input types that are supported with web browsers that support HTML5, check out w3schools.com.

No more CSS conditional comments for IE10+

I was working on an older site this past week and an issue came up where the IE10 web browser was showing different spacing compared to the Google Chrome web browser. My initial thoughts were to use CSS conditional comments to make a specific class have different padding for IE web browsers.

Well I didn’t know that Microsoft deprecated conditional comments for IE10 and above, so I did some searching online and found a blog post, “Targeting IE10 & IE11 Browsers with CSS” on paper-leaf.com, that gave me the solution I needed.

So if you use the below code inside a “style” tag and add your CSS specifically for IE10+ in there, it will solve this problem I ran into.

Testing your web site in different web browsers and mobile devices

When building your web site, at some point you should test how your site looks in different web browsers and mobile devices. To do this all you need is the Google Chrome web browser. Follow the steps below to test your site. The below steps were written while using Chrome version 33.0.1750.154. Future updates of Chrome may have the icons or tabs in different places.

  1. In Chrome, open the “Developer tools” via the button with the horizontal lines in the top right corner of the Google Chrome web browser
  2. Now with “Developer tools” open, in the bottom right corner click the round gears icon (the word “Settings” appears when you mouseover it)
  3. In the “General” tab, check the “Show ‘Emulation’ view in console drawer” checkbox and close that overlay
  4. With the “Developer tools” still open, in the bottom right corner click the icon with a greater than symbol and three lines (the words “Show drawer” appear when you mouseover it) and a new tab appears below the “Developer tools”
  5. Click the “Emulation” tab and now you can see how your web site looks in different mobile devices (in the “Device” tab), different screen sizes (in the “Screen” tab), and different user agents/web browsers (in the “User Agent” tab)