Archives

Front-end, Front-end Develop

New Features of HTML 5.1

April 5, 2018

In November 2015, W3C began working on a draft of HTML5.1 aimed at fixing some of the issues of HTML5. After several releases, it reached the “Candidate Recommendation” status in June 2016, “Proposed Recommendation” in September 2016 and finally “W3C Recommendation” in November 2016. Those who watch this development may find this a bumpy ride. Many of the original features of HTML5.1 have been removed due to poorly designed or lack of support from web browser developers.

  1. Context menu use menu and menuitems element

    The HTML5.1 draft utilizes two different kinds of menu elements, context and toolbar. The menu context menu is normally displayed by right-clicking on the page. During the time spent advancement, toolbar was dropped, however the context menu still remains.

    Every menu item can have:

    checkbox allows you to choose or deselect a choice.

    command allows you perform the onclick action.

    Radio allows you to choose a choice from a gathering.

    Here is an essential case of working with FireFox 49 however does not appear to help Chrome 54

  2. Detail and Summary element

    detail and summary elements use to show and hide infomation by clicking on an element. You don’t need JS. Clicking on the summary toggles show/hide content from the detail element.

  3. More input type – month, week, datetime-local

    week and month allows you to choose a week or a month. With Chrome, both of theme are displayed as a calendar that allows you to select a specific month of the  year or week.

    datetime-local always selects the time in the user’s time zone.

CSS, Front-end, Front-end Develop

Bad code in CSS

March 22, 2018

1. Style undo

Any CSS that unsets styles should begin ringing alerts promptly. The very nature of CSS (Cascading Style Sheet) is that things cascade and inherit from those defined previous. Rulesets should just acquire and add to the past ones, never fix.

The illustration gives us all h3 our usual font-size and margin for dividing, yet additionally a bit of padding and border-bottom in order to visually separate it from the following component. There is nothing “ethically wrong”, it is only that you may have most likely connected them too soon and quickly. Imagine a scenario in which there is a condition that we require the h3 but without that border-bottom and padding-bottom.

Bit of cake, we can accomplish such thing by the take after way:

NO. That has completely turned out badly. What did we truly accomplish at last? A modified version of h3 with no border and padding? More like 10 lines of CSS and one super revolting class name.

What may have been exceptional is the version below:

Eight lines. Not radically shorter but rather containing no style undo and a sensible class name.

As you go down a stylesheet you should just ever be including styles, not taking away. In the event that you discover that the more you go down your document, the more recurrence you need to fix styles, well, the odds are you bounced the weapon and began including excessively too early. Envision CSS like this more than a huge number of lines… that is a great deal of superfluous fix.  Try not to begin excessively unpredictable and chance having, making it impossible to fix your work later on; you’ll end up writing more CSS to accomplish less styling.

 

2. Qualified selectors

Typically when you attempt to qualify something, it is frequently for good reason. In any case, once in a while, you activity may cause calamitous results. Like these:

Fundamentally, selectors which are unnecessarily prepended by a component. These are likewise terrible news since they:

  • Absolutely repress reusability on another component
  • Increment specificity
  • Increment browser workload, clearly diminishing execution.

Why influence a program to search for a class .button on an a when you could simply approach it to search for .button and be finished? By qualifying selectors you are expanding a browser’s workload. By not doing as such, you can:

  • Save actual amounts of code
  • Increment execution
  • Allow greater portability
  • Decrease specificity

Therefore, these bad traits should be corrected like below:

Presently .nav can likewise be connected to an ol, .button can be connected to an input.

Front-end

differences between var, let and const in ES6

October 31, 2017

Before ES6, there was only one way of declaring variables in JavaScript – var . But now, there are a couple of new ways to declare variables in ES6 – let, const.

Let’s do a quick review so you know the differences between var, let, and const.

1. var – function scope

Variable being declared using var will be function scoped, meaning it will exist inside the function it’s declared.

function  test () {

var age = 19;

console.log(age);      //19

}

test();

console.log(age);            // age is not defined

As you can see, age is not reachable from outside the function.

Other types of blocks — like if-statements, loops etc — will not be considered as a scope.

if (true) {

var age = 19;

}

console.log(age)  //19

age is reachable from outside the if-statement.

2. let and const – block scope

const is a signal that the identifier won’t be reassigned.

const age = 19;

age = 20;                            // Assignment to constant variable.

You can not change object or array, but you can change attribute of its.

const adam = {age: 19};

adam = {age: 20};             // Assignment to constant variable.

const adam = {age: 19};

adam.age = 20

console.log(adam)              // {age: 20}

let is a signal that the variable may be reassigned.

In ES6, let and const were introduced as another way to declare variables. Any block will be a scope.

Function still is a scope:

function  test () {

let age = 19;

console.log(age);      //19

}

test();

console.log(age);            // age is not defined

But in this case also other type of blocks qualifies as a scope, like if-statements.

if (true) {

let age = 19;

}

console.log(age)  // age is not defined

3. let in loops

for (var i = 0; i < 5; i++) {

setTimeout(function(){

console.log(i);

}, 1000);

}

Output:

5

5

5

5

5

Because a loop is not a scope when using var.

If you want output is 0 1 2 3 4, you can use let. Because let is block scope:

for (let i = 0; i < 5; i++) {

setTimeout(function(){

console.log(i);

}, 1000);

}

Output:

0

1

2

3

4

About CactusThemes

About CactusThemes

We are Power Elite Author on Envato. We specialized in WordPress Themes and Plugins development. Our products focus on User Experience and Business Solution, in many categories such as Video, Sport, Magazine, University, Blog...

Find us on Facebook