HTML & CSS – Nexyta

12+ Important HTML Tips and Tricks

Sadman Sakib — Tue, 13 Dec 2016 03:04:17 +0000

Professional developer make their website by their own coding way. In this post, i will share some of HTML tips which help new developer for better understand. Also there are some discuss how to write good code.

1. Always Use Close Tags

Some of tags work if you not close them but always try to close the tags. In some of fields it could be make a problem.
Wrong way

Some text here.
Some new text here.
Your idea.

Best way


Some text here.
Some new text here.
Your idea.

2. Declare Correct Doctype

Check your code and use correct doctype at the top of your html.

3. Don’t Use Style Per Line

Don’t use style per line. It can make your code harder. Besides it’s not looking good.
Wrong way

I'm going to make this text red so that it really

It’s better to make a style for your all css code. Like

p {
   color: red;
}

4. Add All CSS Code in Tags

If you want to load your website fast, add your all css code file in tags.


My Favorites Kinds of Corn

5. Add All Javascript code before Tags

It’s a good practise for all developer to add javascript code before tags. It’s also help your website to load fast.

And now you know my favorite kinds of corn.

6. Include All your Javascript Code in One File

Try to make a javascript file and call your javascript code from this file. It will not only make your site loading faster but also save your bandwidth.

7. Validator Your HTML Code

Download html validator plugin like Firebug. It will help you to validate your html file.

8. Always Use Lowercase Tags

Always try to use lowercase tags like div/class/attributes
Wrong way


Here's an interesting fact about corn. =

Correct way


Here's an interesting fact about corn.

9. Use H1-H6 Tags

You can change your

tags to

. By this way, you can get some SEO facility.

This is a really important corn fact!
Small, but still significant corn fact goes here.

10. Download yslow

Download yslow. It’s created by yahoo and it’s help you to make a perfect site.

11. Internet Explorer CSS Code

Create ie.css file which load external css code for ie browser. Some of code not work in ie browser so you need to think about it.

12. Use Good Quality Code Editor

Below are few links:

13. Compress your CSS and Javascript File

Javascript Compression Services

CSS Compression Services

14. Image “ALT” Use

Use alt in all of your image. It’s good for SEO.

Wrong

Right

7 CSS Libraries for Better Image Hover Effects

Sadman Sakib — Sun, 06 Nov 2016 02:57:59 +0000

Letting users easily and clearly know which part of the webpage is clickableis an important part of UX design. The old but gold way of doing it was to change the text color and underline it. Nowadays, with CSS, there are plenty more ways to deliver hover effects, particularly to images.

Developers can now add transition effects or animation when a hover event is triggered. We are looking at directional slides, zooms at different speeds, fade-ins and fade-outs, hinge effects, spotlight reveals, wobbles, bounces and more.

In this compilation, there are many more hover effects to inspire you. You can also pick up the code at the source.

Image Hover Effects (16 effects)

In this page you will find a nice collection of 16 hover images effects with captions. Grab the HTML and CSS code for each effect by hovering over the images, then clicking Show Code.

Image Caption Hover Animation (4 effects)

Here are 4 cool caption animations that run when one hovers over the image. The effects are built with pure CSS3 transitions and transform, and no JavaScript, to increase compability across browser.

iHover (35 effects)

iHover is a collection of hover effects powered by CSS3. There are 20 circle hover effects and 15 square hover effects. To use the effects, you will need to write some HTML markup and include the CSS files.

Image Hover (44 effects)

This library contains 44 effects made with pure CSS. Some of the effects include fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds and shutters, in multiple directions. There is an extended version of 216 effects that can be bought for €14.

Hover Effect Ideas (30 effects)

This image hover demo made by Codrop, gives you inspiration when making smooth transitions between images and its captions. There are total 30 effects on two sets with tutorials and the source code.

Hover CSS (108 effects)

Hover CSS lets you add hover effects to any element, such as a button, link or image. The effects include 2D transitions, background transitions, border, Shadow and Glow transitions, and more. The library is available in CSS, Sass, and LESS.

Caption Hover Effect (7 effects)

There are 7 various effects in this collection. All the transitions look really nice and smooth. Go to the tutorial section to learn how to apply these effects on your project.

7 PostCSS Plugins to Ease You into PostCSS

Sadman Sakib — Fri, 09 Sep 2016 05:19:04 +0000

How Do You Use PostCSS?

PostCSS can be used within standalone JavaScript files, Gulp, Grunt, Broccoli, Brunch and a wide range of task runners I’ve never heard of!

On its own, PostCSS does nothing but parse a CSS file into JavaScript objects and tokens. The real magic happens with plugins which examine, manipulate, add or change properties and values before the final CSS file is written.

To use PostCSS in Gulp, you need to set-up your project then install both modules:

npm init
npm install --save-dev gulp gulp-postcss

You can then add the plugins you require, e.g. autoprefixer and cssnano:

npm install --save-dev autoprefixer cssnano

A gulpfile.js can be created. It defines a task which loads the CSS source and pipes it through PostCSS. Plugins and any required options are passed to PostCSS in an array. Finally, the CSS is output to a destination file:

// Gulp.js configuration
var gulp = require('gulp'),
    postcss = require('gulp-postcss');

// apply PostCSS plugins
gulp.task('css', function() {
  return gulp.src('src/main.css')
    .pipe(postcss([
      require('autoprefixer')({}),
      require('cssnano')
    ]))
    .pipe(gulp.dest('dest/main.css'));
});

The task can be run from the console with:

gulp css

All we need now is a handy list of PostCSS plugins…

1. Autoprefixer

If you use nothing else, install Autoprefixer:

npm install --save-dev autoprefixer

Browser-specific prefixes such as -webkit-,-moz- and -ms- are gradually dying out as standards become better supported and vendors opt for alternatives such as flag-based property enabling. Unfortunately, you cannot avoid vendor prefixes but it’s difficult to know when they’re always required, (e.g. for user-select), sometimes required (e.g. for 3D transformations), or never required (e.g. border-radius).

You need never worry about prefixing again with Autoprefixer. You just need to define non-prefixed CSS, then state which browsers you want to support. Autoprefixer will check caniuse.com before adding the necessary prefixes — the following code specifies the last two versions of any mainstream browser, or any exceeding 2% market share:

.pipe(postcss([
  require('autoprefixer')({
    browsers: ['last 2 versions', '> 2%']
  })
]))

This is a superior option to pre-processor library functions which normally require special coding and apply vendor prefixes regardless. Your prefixed code will be removed in future PostCSS runs as browser standards evolve.

Autoprefixer is so useful and widespread, it is possible you’re already using without realizing it is a PostCSS plugin.

2. PostCSS Assets

PostCSS Assets provides a number of useful image-handling functions:

npm install --save-dev postcss-assets

The options include:

URL resolution: Given a file name, PostCSS Assets replaces resolve(image) with a root path or fully-qualified URL.
Dimension handling: PostCSS Assets replaces references to width(image), height(image) or size(image) with a pixel equivalent.
Image inlining: PostCSS Assets replaces inline(image) with a Base64-encoded string.
Cache-busting: PostCSS Assets can append a random query string to an image reference to ensure the latest file is loaded.

3. cssnext

cssnext allows you to use the latest CSS syntax today.

npm install --save-dev postcss-cssnext

The plugin has a long list of features including support for:

var variables
#rrggbbaa colors
Color functions
Filters
Fallbacks

When it executes, cssnext translates code to a syntax commonly supported in today’s browsers.

4. Rucksack

Rucksack offers a range of functions which, the developer claims, makes CSS development fun again!

npm install --save-dev rucksack-css

Options include:

Responsive typography which adjusts font sizes and line heights with a single font-size: responsive declaration.
Quantity pseudo-selectors such as li:at-least(4) which targets any list with four or more items.
Property aliases such as defining bg as background which can be used throughout your CSS.
A set of pre-defined easing functions.

5. Stylelint

Stylelint reports CSS errors based on 140 rules designed to catch common mistakes, implement style conventions and enforce best practices. There are many options to configure Stylelint to your liking — Pavels Jelisejevs’ article Improving the Quality of Your CSS with PostCSS walks you through the set up process.

6. CSS MQPacker

MQPacker optimizes your media queries into single rules when possible:

npm install --save-dev css-mqpacker

Pre-processors such as Sass make it easy to use media queries within a declaration, e.g.

.widget1 {
  width: 100%;

  @media (min-width: 30em) {
    width: 50%;
  }

  @media (min-width: 60em) {
    width: 25%;
  }
}

.widget2 {
  width: 100px;

  @media (min-width: 30em) {
    width: 200px;
  }
}

This compiles to:

.widget1 { width: 100%; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget2 { width: 200px; }
}

To reduce file sizes and (possibly) improve parsing times, MQPacker packs multiple declarations into one @media rule, i.e.

.widget1 { width: 100%; }
.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
  .widget2 { width: 200px; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

Hot tip: ensure the first media query declaration in your code defines all possible options in the order you want them even if there’s no actual difference. This guarantees MQPacker will define rules in the correct order.

MQPacker also provides options for sorting media queries and outputting source maps.

7. cssnano

cssnano compacts your CSS file to ensure the download is as small as possible in your production environment. Install it via:

npm install --save-dev cssnano

The plugin works by removing comments, whitespace, duplicate rules, outdated vendor prefixes and making other optimizations to typically save at least 50%. There are alternative options but cssnano is one of the best. Use it!

Want More?

A searchable index of PostCSS plugins is available at postcss.parts and the PostCSS usage documentation provides a list of recommended options. You’ll find plugins for almost any CSS task you can imagine although be aware there is some cross-over and duplication — for example, cssnext also includes Autoprefixer.

If that’s not enough, you can develop your own PostCSS plugins in JavaScript. The PostCSS documentation explains how to write a plugin and provides an API reference.

PostCSS makes CSS development easier regardless of whether you use a pre-processor. The CSS development time it saves more than outweighs the initial installation and configuration effort.

5 Ways to Support High-Density Retina Displays

Sadman Sakib — Fri, 09 Sep 2016 04:38:28 +0000

What is Retina?

“Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. The technology is used in recent iPhones, iPads, MacBook Pros and other high-end devices.

For example, the MacBook Pro 15″ has a resolution of 2,880×1,800 or 220 pixels per inch. At this scale, most people are unable to notice individual pixels at typical viewing distances — applications and websites would be too small to use.

Therefore, the device reverts to a standard resolution of 1,440×900 but the additional pixels can be used to make fonts and graphics appear smoother.

What’s the Problem?

Standard-resolution bitmap images can look blocky on a Retina display. A 400 x 300 photograph is scaled to 800 x 600 pixels but there’s no additional detail. This can be noticeable when compared to smooth fonts and other high-resolution images.
Real-World Usage

If you look around the web, you’d be forgiven for thinking everyone has a Retina display. Currently, it’s only available in high-end devices, but these are coveted by developers so it leads to a disproportionate volume of online discussion. In the real world, the percentage of people using similar displays is in low single figures.

Let’s put it into context: if you’re not developing for the 1% of IE6/7 users, you probably shouldn’t be too concerned about people using Rentina — especially since they can still view your website.

That said, Retina-like screens will eventually migrate to all devices. There’s little reason to fret now, but there’s no harm in some forward planning. Let’s look at the options in order of recommendation…

1. Use SVGs and CSS3 Effects

The clue is in the name but Scalable Vector Graphics are … scalable! It doesn’t matter how big an SVG becomes — it will always be smooth because it’s defined using vectors (lines and shapes) rather than individual pixels.

SVG is not practical for photographs but is ideal for logos, diagrams and charts. The primary drawback is a lack of support in IE8 and below but you could always provide a PNG fallback or use a shim such as Raphaël or svgweb. See also: How to Add Scalable Vector Graphics to Your Web Page.

You may also be able to replace some images entirely. For example, titles, gradients, corners or shadows defined as graphics can be reproduced using CSS3 alone. They will render at a better quality, result in fewer HTTP requests and use less bandwidth.

2. Use Webfonts Icons

The more I use webfonts icons, the more I love them. Like SVGs, fonts are vectors so they’re scalable so you can use font sets which contain icons. They’re ideal for small, frequently used shapes such as email envelopes, telephones, widget controls and social media logos. They also work in every browser including IE6+.

There are plenty of commercial and free icon font sets available:

Or you can use a hosted font service such as We Love Icon Fonts.

I recommend creating your own small set of custom icons using online tools such as Fontello or IcoMoon.

3. Use High-Resolution Images When Practical

Retina has four times more pixels than standard screens. If you have a 400 x 300 image (120,000 pixels), you’d need to use an 800 x 600 alternative (480,000 pixels) to render it well on a high-density display.

However, the high-resolution file size may not necessarily be four times larger. Every image is different but if it contains solid blocks of color or details which can be omitted, it may be practical to use a 800 x 600 image and scale it in the browser.

Be pragmatic: if the standard image is 200Kb and the high-resolution version is 250Kb, there is negligible benefit using image replacement techniques. Use the better version throughout.

4. Use CSS Image Replacement

There will be times when high-resolution versions of your image are four times larger — or more. In those circumstances you may want to consider image replacement techniques, i.e. the standard image is replaced by larger alternative on Retina displays. The following media query code could be used:

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

The drawbacks:
# You will need to create and maintain two sets of images.
# Some browsers will download both images.

Remember that many of these users will be using smartphones or tablets on slower mobile networks. Detecting the connection speed would be more beneficial than determining the pixel density.

5. Use JavaScript Image Replacement

Retina display detection can be implemented using the following code:

var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)
);

Once a Retina display is determined, you could:
# Loop through all page images and extract the URL.
# Append ‘@2x’ to the file name and attempt to load the resulting image URL using Ajax.
# If found, replace the current image with the high-resolution alternative.

Fortunately, the hard work’s been done for you at retinajs.com. While it only adds 4Kb weight, high-density display devices will download images twice — although the second time will occur as a background process after the page has loaded.

My advice: be practical and keep it simple. Don’t spend inordinate amounts of time attempting to solve minor rendering problems on devices with proportionally few users. Of course, none of that matters when your boss receives his new iPad and starts to complain about image quality…

Comments on this article are closed. Have a question about retina display? Why not ask it on our forums?