Post Your Self

Hello Dearest readers

Its your chance to get your news, articles, reviews on board, just use the link: PYS

Thanks and Regards

Thursday, March 5, 2020

Top 3 for the day

Top 3 for the day

Introduction to Utility-first CSS for Web Developer

Posted: 04 Mar 2020 07:32 AM PST

CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it’s not that simple. For large scale websites and applications, CSS becomes really hard to write in.

CSS specificity is crippling up, and so, using !important is often inevitable and eventually adds up to the CSS file size.

Well, the good news is that web developers have come up with several methodologies to help write and organize CSS better, such as BEM, OOCSS, SMACSS, and ITCSS. We’ve covered some of these methodologies in our previous posts, Understanding CSS Writing Methodologies and Intro to ITCSS for Web Developers.

In this post, we are going to look at another methodology called Utility-first CSS, which, at the moment of this writing, is rapidly gaining traction from the web developer community.

Let’s see how it works.

Utility-first CSS: How it works

Traditionally, we will write a CSS class which may contain the styles for the colors, size, borders, margins, and shadows like below:

  .foo {      margin: 0 auto;      padding: 10px;      border-radius: 4px;      box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);      background-color: blue;  }  

With Utility-first CSS, each class is a low-level CSS composition. Instead of creating a class that applies a bunch of different CSS rules, it will only contain very specific rules. If I’d like to add a rounded corner, let’s call it .rounded-sm:

  .bg-white {      background-color: white;  }  .rounded-sm {      border-radius: 4px;  }  .shadow-md {      box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);  }  

If you’d like to apply a background color of white, a small border radius, and a shadow, you will need to add these three classes.

  <div class="bg-white round-sm shadown-md"></div>  

At first, this may look like a mess. As you need to add more styles, you will need to add more classes to the div element. But once you’ve built something this way, you’ll notice some of the benefits as it allows you:

  • To create a custom style without actually writing a custom CSS as well as without having to create custom class names. As naming a class is hard, especially on a large scale website or application and we often end up giving our classes ambiguous names like .box, .card, .container, etc.
  • To make a change without worrying about breaking something of the other pages or components, which makes website CSS more maintainable.

Utility-first CSS is not an entirely new paradigm. It has another name called Atomic CSS. However, the web community did not quite buy the idea, so it did not get enough traction to make it a popular paradigm to write CSS.

A new framework called Tailwind CSS emerged that brought this idea of Utility-first CSS, and it does suddenly make sense. So what makes Tailwind CSS different?

Tailwind CSS

Tailwind CSS is created by Adam Wathan. It’s shipped as an NPM module. We can easily install it by typing this command below:

  npm install tailwindcss  

On top of the Utility classes, Tailwind comes with handy features such as its directive @tailwind and @apply.

The following codes will import the Tailwind built-in styles – the base styles which address browser default style consistency similar to Normalize.css, the components, and the utilities.

  @tailwind base;  @tailwind components;  @tailwind utilities;  

The @apply directive allows you to compose different styles. This directive will be useful when you have components with repeating utility classes.

A common example of this is for a button. It’s practically more convenient to add a class .btn like below rather than adding a bunch of different classes.

<button class="btn">Button</button>

In this case, the @apply comes in handy to put together these styles on a single .btn class.

  .btn {      @apply bg-blue-400 text-white font-bold py-2 px-4 rounded;  }  

Optimising File size

Another good thing about TailwindCSS is that it works very well with PurgeCSS to remove unused styles on your website. And since you’ll rarely create your custom CSS and classes, the result of your stylesheet can be significantly small.

Firefox Send is able to ship their stylesheet at just 4.7kb (gzipped)!.

Code editor integration

If you’re using Visual Studio Code, you can boost productivity further with the extension: TailwindCSS Intellisense. This extension enables autocompletion for TailwindCSS classes as you type.

It supports various file types, including HTML, Vue, and PHP.

List of class name suggestion in Visual Studio Code

So these are some of the key advantages of using TailwindCSS compared to other CSS frameworks. Rather than loading a bunch of stylesheets, Tailwind CSS comes as an NPM module.

It provides configurations that’ll allow us to produce CSS that meets our needs and could result in a smaller stylesheet.

Wrapping Up

Changing the way we write CSS is not always easy. It means that we have to unlearn what we are already used to. At first, Utility-first CSS might look weird to you, but as mentioned, once you’re used to this way when writing CSS, you will find your productivity to be increased manifolds.

Have you tried using Utility-first CSS on your project? Do let us know about your experience in the comments section below.

The post Introduction to Utility-first CSS for Web Developer appeared first on Hongkiat.

Specifying Document Base URL With HTML <base> Element

Posted: 04 Mar 2020 05:15 AM PST

Websites are built with a series of links, pointing to pages and sources like images and stylesheets. There are two ways to specify the URL that links to these sources: either use an absolute path or relative path.

The absolute path refers to specific destination, typically it’s started with the domain name (along with HTTP) like The relative path is the opposite: the link destination depends on the root location or in most cases the domain name of your website.

A typical relative path would look like this below:

  <img src="/assets/img/image.png" alt="">  

If your website domain is, for example, the image path would resolve to You should understand this if you have been developing website for a while.

But most of you probably have not heard about the <base> element. This HTML tag has been around since HTML4, yet very little is seen of its implementation in the wild. W3C describes this element as:

“The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks.”

This <base> element basically decides the base URL for relative path in web pages. Instead of depending on the root location or the domain of your website, you can point it out to somewhere else, perhaps like the URL where your resources reside in CDN (Content Delivery Network). Let’s see how that actually works.

Using the Base Element

The <base> is defined along side the <meta> and <link> tags within the <head>. Given the following example, we set the base URL to Google.

  <base href="">  

This specification will affect all the paths within the document, including one that is specified within the href attribute and the src of the images. So, assuming we have a stylesheet, images, and links in the document set with a relative path like this, for example:

  <link rel="stylesheet" href="path/main.css">  <a href="path/page/sub-page/">Anchor Link</a>  <img src="path/image.jpg">  

Even though our web page is under the relative path will refer to, following the base path specified in the <base> tag. Try hovering over the link, and the browser will show you where the path is exactly heading to.

url path

All the relative paths will eventually be:

  <link rel="stylesheet" href="">  <a href="">Anchor Link</a>  <img src="">  

Setting the Default Link target

Aside from defining the base URL, the <base> tag can also set the default link target through the target attribute. Say you want all the link in the document to open in the browser new tab, set the target with _blank, like so.

  <base href="" target="_blank">  

The <base> tag, however, holds a couple of caveats in some circumstances:

First, the <base> browser support is great; it works in IE6. But, IE6 thinks that it requires a closing tag </base>. This could cause a hierarchy issue in the document, if the closing tag is left unspecified. A simple quick way to address this issue is by adding </base> closing within a comment, <!--[if lte IE 6]></base><![endif]-->.

If you are using # in conjunction with the <base> to link to sections within the document, you may potentially encounter an issue in Internet Explorer 9. Instead of jumping to the referred section, Internet Explorer 9 will reload the page.

Furthermore, a blank href will result in the base URL instead of linking to the current directory where the page resides (this is default browser behavior), which could cause unexpected referencing issues.

Wrap Up

The <base> is a handy HTML feature that may simplify link referencing in a web document. Use the tag considerately to minimize the pitfalls. Follow these reference below for more on the <base> tag:

The post Specifying Document Base URL With HTML <base> Element appeared first on Hongkiat.

Create an Auto-Hiding Sticky Header with Headroom.js

Posted: 04 Mar 2020 02:33 AM PST

Auto-hiding headers have been steadily popular in web design for quite a while. Many blogs and online magazines use the sticky header to keep users engaged and give them direct access to the navigation.

Medium has redefined this feature with a basic concept that hides the navigation while scrolling down but shows it while scrolling up. This concept has become a wildly popular trend and now you can easily replicate it using Headroom.js.

15 jQuery Plugins To Make Smart Sticky Elements

15 jQuery Plugins To Make Smart Sticky Elements

It is now common to see certain elements in a site fixed to a position when you scroll... Read more

Headroom.js is a free vanilla JavaScript library with no dependencies or excessive API features. You just add it to your HTML, target the page header, and let it run.

headroom js plugin

Headroom simply adds and removes certain CSS classes that animate in order to show/hide the header using JavaScript to detect the motion.

You could make this functionality yourself but why bother? Headroom is tested and supports all major browsers. It even plays nice with jQuery or Zepto if you already have a JS library installed on your site.

You’ll find plenty of code samples in the GitHub repo but here’s a simple example that targets the #header element:

  var myElement = document.querySelector("#header");    // create a Headroom object passing in the #header element  var headroom  = new Headroom(myElement);    // initialize the library  headroom.init();  

The init() function has plenty of options to customize. You can customize the different element classes, along with different event trigger callbacks where you can embed your own functions. For instance, if you want the element to fade after it’s unpinned you would use the onUnpin callback.

These options are all listed on the main plugin page, so check it out and see what you think. If you want to see Headroom in action have a look at the pen below that contains a full clone of the main demo page.

How to Create CSS-only Sticky Footer

How to Create CSS-only Sticky Footer

Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages. The script... Read more

The post Create an Auto-Hiding Sticky Header with Headroom.js appeared first on Hongkiat.

Gameforumer QR Scan

Gameforumer QR Scan
Gameforumer QR Scan