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.
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.
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.
As stated in the 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)
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.
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.
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.
Input Type: Time
You can have a time field where users can select a time.
To see more HTML input types that are supported with web browsers that support HTML5, check out w3schools.com.
Remember that the checkbox’s “class” have to all be the same for those checkboxes that you want to check with the function. In this example the class is “checkboxClass”.