How does Attribute Selector work in CSS?

We can set style using attribute or its value.

Set Style using attribute : –

Syntax: –

Selector [attribute] { CSS ;}

Ex: –

div [id] { color: red; }

Set style using attribute and its value: –

Syntax: –

Selector [attribute = “value”] {  CSS  }

Ex: –

div[id=“data”] { color: red; }

Set Style using an attribute value containing a specified word.

Syntax: –

[attribute ~= “value”] { CSS }

Ex:-

[class ~= “game”] { color: red; }

game
supergame
game-super
gamesuper
super-game
game super
super game

Set Style using with the specified attribute starting with the specified value.

Syntax: –

[attribute |= “value”] { CSS }

Ex:-

[class |= “game”] {color: red;}

The value must be a whole word.

Ex: –

“game” or “game-super”

game
supergame
game-super
gamesuper
super-game
game super
super game

Set Style whose attribute value begins with a specified value.

Syntax: –

[attribute ^= “value”] { CSS }

Ex:-

[class ^= “game”] {color: red;}

game
supergame
game-super
gamesuper
super-game
game super
super game

It is not necessary that the value should be a whole word.

Set Style whose attribute value ends with a specified value.

Syntax: –

[attribute $= “value”] { CSS }

Ex:-

[class $= “game”] {color: red;}

game
supergame
game-super
gamesuper
super-game
game super
super game

It is not necessary that the value should be a whole word.

Tagged : / / / / /

Difference Between column-gap, column-span & column-fill in CSS

column-gap

This property is used to specify the gap between the columns. We can set this property to normal (default) and length.

Ex: –

div { column-gap: 30px;}

column-span

This property is used to specify how many columns an element should span across. We can set this property to none (default) and all.

Ex: –

div { column-span: all;}

column-fill

This property is used to specify how to fill columns, balanced or not. We can set this property to balance (default) and auto.

Ex: –

div { column-fill: auto;}

Tagged : / / /

How do I manipulate using DOM Table in JavaScript?

HTMLTableElement

HTMLTableElement interface provides special properties and for manipulating the layout and presentation of tables in an HTML document.

Properties
caption
tHead
tFoot
rows
tBodies

Methods
createCaption()
deleteCaption()
createTHead()
deleteTHead()
createTFoot()
deleteTFoot()
insertRow()
deleteRow()

Properties

  • caption – This property represents the table caption. If no caption element is associated with the table, it can be null.
  • tHead – This property represents  the table’s <thead> element. Its value can be null if there is no such element.
  • tFoot – This property represents the table’s <tfoot> element. Its value can be null if there is no such element.
  • rows – This property rows returns a live HTMLCollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. Although the property itself is read-only, the returned object is live and allows the modification of its content.
  • tBodies – This read-only property returns a live HTMLCollection of the table bodies. Although the property is read-only, the returned object is live and allows the modification of its content.

Methods

  • createCaption() – This method returns the caption for the table. If no caption element exists on the table, this method creates it, then returns it.
  • deleteCaption() – This method removes the caption from the table. If there is no caption associated with the table, this method does nothing.
  • createTHead( ) – This method returns the <thead> element association with the table, of type HTMLTableSectionElement. If there is no such element associated to the table, this method creates it, then returns it.
  • deleteTHead() – This removes a <thead> element from the table.
  • createTFoot() – This method returns the <tfoot> element associated with the table, of type HTMLTableSectionElement. If there is no footer for this table, this methods creates it, then returns it.
  • deleteTFoot() – This method removes a <tfoot> element from the table.
  • insertRow() method inserts a new row in the table and returns a reference to the new row.

Syntax: – var row = HTMLTableElement.insertRow(index = -1);

index is the row index of the new row.
row is assigned a reference to the new row. A reference to HTMLTableRowElement.
If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.
If a table has multiple tbody elements, by default, the new row is inserted into the last tbody.

  • deleteRow() method removes a row from the table. If the number of rows to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the table, the exception INDEX_SIZE_ERR is thrown.

Syntax: – HTMLTableElement.deleteRow(index)

an index is an integer representing the row that should be deleted.
However, the special index -1 can be used to remove the very last row of a table.

HTMLTableSectionElement

The HTMLTableSectionElement interface provides special properties and methods for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an HTML table.

Properties
rows

Methods
insertRow()
deleteRow()

  • Rows – This returns a live HTMLCollection containing the rows in the section. The HTMLCollection is live and is automatically updated when rows are added or removed.
  • insertRow() – It inserts a new row just before the given position in the section. If the given position is not given or is -1, it appends the row to the end of section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than -1, it raises a DOMException with the IndexSizeError value.
  • deleteRow() – It removes the cell at the given position in the section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than 0, it raises a DOMException with the IndexSizeError value.

HTMLTableRowElement

The HTMLTableRowElement interface provides special properties and methods for manipulating the layout and presentation of rows in an HTML table.

Properties
cells
rowIndex
sectionRowIndex

Methods
insertCell()
deleteCell()

Properties

  • cells – It returns a live HTMLCollection containing the cells in the row. The HTMLCollection is live and is automatically updated when cells are added or removed.
  • rowIndex – It returns a long value which gives the logical position of the row within the entire table. If the row is not part of a table, returns -1.
  • sectionRowIndex – It returns a long value which gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns -1.

Methods

  • insertCell() – This method inserts a new cell into a table row and returns a reference to the cell.

Syntax: – var cell = HTMLTableRowElement.insertCell(index = -1);

HTMLTableRowElement is a reference to an HTML table row element.
index is the cell index of the new cell.
cell, is assigned a reference to the new cell.
If index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. If index is greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Methods

  • deleteCell() – It removes the cell at the given position in the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than 0, it raises a DOMException with the IndexSizeError value.
Tagged : / / /

CSS manipulation in JavaScript

CSSStyleDeclaration Object

The CSSStyleDeclaration object represents a collection of CSS property-value pairs.

It is used in API :

HTMLElement.style
window.getComputedStyle( )

Properties

  • cssText
  • length
  • parentRule

Methods

getPropertyValue(property)
getPropertyPriority(property)
removeProperty(property)
setProperty(property, value, priority)
item(index)

Style Property

The style property is used to get or set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element’s inline style attribute.

Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets or browser default.

Syntax:-

Return
element.style.property

Set
element.style.property = “value”

A style declaration is reset by setting it to null or an empty string, e.g. element.style.property = null

Inline Style Manipulation

The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element. To perform a manipulation of the CSS with a JavaScript DOM interface, you would access the style object of the element.

Style Property

Example: –

Dynamic Style Manipulation

As we know The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element, This has performance considerations since you need to change a single property at a time. We might manipulate style rules using CSS class Selector. The element’s class attribute is represented as className property in DOM.

DOMTokenList

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor.  etc. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties
length
value

Methods
item()
add()
remove()
replace()
contains()
toggle()
value()

classList Property

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.

Syntax: –

var elementClasses = elementNodeReference.classList;

Computed Style

The computed style is the style actually used in displaying the element, after “stylings” from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles, and browser default styles.
Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets or browser default. To get the values of all CSS properties for an element you should use window.getComputedStyle( ) instead.
The returned style is a live CSSStyleDeclaration object ( The CSSStyleDeclaration object represents a collection of CSS property-value pairs.), which updates itself automatically when the element’s style is changed.

Syntax:-
window.getComputedStyle(element, pseudoElement)
Element – Element for which to get the computed style.
pseudoElement – A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.

Ex: –
var elm = document.getElementById(“myid”);
var allCSSProp = window.getComputedStyle(elm)

Tagged : / / / / /

HTML-DOM and CSS-DOM Mapping in JavaScript

HTML-DOM Mapping

Many object properties are simply direct mapping to the attributes of the HTML element. In other words, there is a mapping directly between HTML Syntax and the DOM.

Ex:-

Above title can be accessed in DOM by
document.getElementById(“myid”).title

P tag’s title attribute is mapped to DOM property title in the above example that is the reason we can access title in DOM that way.

HTML-DOM Mapping

The mapping is direct between HTML attributes and the DOM properties with the following considerations:-

  • The mapping is direct if the attribute is a single non-reserved word, so an element’s title attribute is accessed via the corresponding DOM object’s title property.
  • The mapping will change case as camelCase if the attribute has two word. Ex:- tabindex attribute will be represented tabIndex in the DOM.
  • If the HTML attribute name is reserved under JavaScript, the value will be modified to work. Ex:- class attribute will be represented className in DOM for attribute will be represented htmlFor in DOM
  • There are also some exception. Ex: – char attribute will be represented ch in DOM
  • For others and custom attributes, we have to use getAttribute() and setAttribute( ) Methods because they may not have direct mapping.

CSS-DOM Mapping

We can modify the CSS Properties by applying a mapping between the CSS property and the DOM object. The mapping is direct between CSS properties and the DOM properties with the following considerations:-

  • CSS properties have a single word, so their mapping is direct.            Ex:- color in CSS will be represented as color in DOM too.
  • Hyphenated CSS properties are repsrented as a single word with camelCase in the DOM.         Ex:- background-color in CSS will be represented as backgroundColor in DOM
  • CSS properties value with vendor prefixs.  Ex:- -webkit-box-shadow in CSS will be represented as webkitBoxShadow in DOM.
  • There are some reserved words which can be exception in the above cases.    Ex – float in CSS will be represented as cssFloat in DOM

Tagged : / / / /

Manipulation Attributes in JavaScript

Attributes

The attributes property returns a live collection of all attribute nodes registered to the specified node. It is a read-only property.

Syntax:-
Element.attributes[index/key]

Attr Object

Properties

  • name (do not use nodeName)
  • value (do not use nodeValue or textContent or appendChild() or insertBefore( ) or removeChild( ) or replaceChild( ) these all are deprecated for attr object)

Methods

  • setAttribute( )
  • getAttribute( )
  • removeAttribute( )

setAttribute( )

This method is used to set the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value. We should not use this method to set inline style as it will overwrite other CSS properties.

Syntax:-
Element.setAttribute(name, value);
Element.setAttribute(“style”, “css properties: value”);

Ex: –
p.setAttribute(“id”, “mydiv”);
p.setAttribute(“style”, “font-size: 80px”);

getAttribute( )

The getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “ ”.

Syntax: –
var attribute = element.getAttribute(attributeName);

removeAttribute( )

This method is used to remove an attribute from the specified element.

Syntax: –
element.removeAttribute(attrName);

hasAttribute( )

The hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not.

Syntax:-
var result = element.hasAttribute(attr_name);

Tagged : / / / /

How to setup AWS Command line to Sync S3 Bucket in Windows?

Step 1 – Install AWS Command line

Download this file – https://awscli.amazonaws.com/AWSCLIV2.msi

Step 2 – Run following command

$ aws configure
AWS Access Key ID: <ENTER AWS ACCESS ID>
AWS Secret Access Key: <ENTER AWS ACCESS Key>
Default region name: ap-south-1
Default output format: 

Step 3 – Verify AWS configure and access

$ aws s3 ls

Step 4 – Create a empty directory where you want to sync S3 Bucket usign cmd.

$ cd d:/
$ mkdir aws-s3
$ cd aws-s3
$ start .

Step 5 – Create a 2 Bat file.

#pull.bat content
----------
aws s3 sync s3://<NameOfBucket> .

#push.bat content
----------
aws s3 sync . s3://<NameOfBucket>

Step 6 – Open cmd line and run pull.bat for pull the content

Step 7 – Open cmd line and run push.bat for push the content

JAVA Error: Source option 5 is no longer supported. Use 6 or later

Error:

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project chat: Compilation failure: Compilation failure:
[ERROR] Source option 5 is no longer supported. Use 6 or later.
[ERROR] Target option 1.5 is no longer supported. Use 1.6 or later.
[ERROR] -> [Help 1]
[ERROR]

Solution

<properties>
     <maven.compiler.source>1.8</maven.compiler.source>
     <maven.compiler.target>1.8</maven.compiler.target>
</properties>

Top 21 Chrome Extension every software engineer must know

1. Speedtest by Ookla:

Take a Speedtest directly from your toolbar to quickly test your internet performance without interruption.

2. Save to Google Drive:

This extension allows you to save web content directly to Google Drive through a browser action or context menu. You can save documents, images, and HTML5 audio and video all by right-clicking and selecting ‘Save to Google Drive’. You can save the currently viewed page using the ‘Save to Google Drive’ browser action. You can automatically convert Microsoft Office files or comma-separated files to Google Docs format.

3. Keeper® Password Manager & Digital Vault:

Protect and autofill passwords with the world’s most trusted and #1 downloaded secure password manager and digital vault.
Stay protected with the world’s most trusted and #1 downloaded password keeper and digital vault. Keeper’s password manager generates, stores, and auto-fills strong passwords on all of your devices while also securely storing and protecting your private documents. Don’t get hacked. Get Keeper.

4. Vimeo Record – Screen & Webcam Recorder :


Screen recording is often the easiest way to demonstrate something — a design, a functionality, or a new tool — and now, Vimeo makes it straightforward. You can use the Vimeo Record tool to easily record your screen and share that recording with others.

5. Scrn.li – Screenshot Tool and Editor:

The app to make a full webpage screenshot or just any part of it with an opportunity to edit, save and download screen capture to your PC. The app is launched from a browser that totally saves your time. Simply click the extension icon to choose from options whole page screenshot or a selected part. Lots of features at your disposal allow you to – edit and reset changes;………….

6. Full Screen:

This is just a full-screen button added to the toolbar. It does exactly the same as the keyboard shortcuts (F11 on Windows or Cmd+Shift+F on Mac). You can change the icon and add/remove the full-screen function to the context menu.

7. Site Palette – Palette Generator Extension:

This Chrome browser extension generates comprehensive palettes. Site Palette is one of the must-have Chrome extensions for developers (frontend) as well as expert designers. This plugin can aid you in rapidly extracting and creating color pallets. As a developer, you can easily download preview PDFs, palette images and create shareable links. It is armed with flawless integration with Google Art Palette and coolers. co. Site Palette has been considered as one of the essential Chrome browser extensions for designers and developers across the globe.

8. Font Face Ninja – Font Identifier Extension:

FontFace Ninja is one of the best Chrome extensions for developers that help you identify the fonts you see online. This fantastic browser extension allows you to hover over the text on the screen to instantaneously assist you in spotting a font, letter-spacing, line spacing, size, and even the color hex code. Besides, the Chrome browser extension also lets you test the font out yourself with whatever text by writing anything out in the extension’s drop-down window.

9. React – Developer Tools Extension:

React is a Chrome DevTools chrome extension or chrome plugin that provides the open-source React JavaScript library for a website or web page. Among the list of chrome browser extensions, this extension allows you to check a React tree, comprising the component hierarchy, state, props, etc.

10. ColorZilla – Color Picker Extension:

ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color-related tasks – both basic and advanced.

11. Page Ruler – Size Checker Extension:

Unlike other available tools in the market, it has a lot of unique features which ensure highly accurate measurement of elements. This makes it a must-have tool for developers and designers.

12. Emoji Keyboard by JoyPixels®

The world’s leading emoji keyboard for Chrome. Now Unicode 13 compatible.

13. Enhanced GitHub

Display repo size, size of each file, download link, and option to copy file contents. Extension that provides useful features on top of GitHub Website.

14. AdGuard AdBlocker

Unmatched AdBlock extension against advertising and pop-ups. Blocks ads on Facebook, YouTube, and all other websites. AdGuard ad blocker effectively blocks all types of ads on all web pages, even on Facebook, YouTube and others.

15. Octotree – GitHub code tree

Browser extension that enhances GitHub code review and exploration.
Features – IDE-like code tree, Folder, and file search, Support private repositories, Repo/file/issue/pull request bookmarking, High performance, working with repositories of any size

16. Light House:

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

17. Wappalyzer:

Wappalyzer is a technology profiler that shows you what websites are built with. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.

18. Momentum:

Replace the new tab page with a personal dashboard featuring to-do, weather, and inspiration. New Tab page that gives you a moment of calm and inspires you to be more productive. Get inspired with a daily photo and quote, set a daily focus, and track your to-dos. Eliminate distractions and beat procrastination with a reminder of your focus for the day on every new tab. Join over 3 million users and get inspired to create the life you want to live.

19. CSSViewer:

CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on (2006-2008).

20. Grammarly for Chrome:

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.

21. Code Cola – Source Code Viewer Extension:

From a developer’s perspective, Code Cola is one of the best chrome extensions for developers. You can use it to see the source code of the project you are working on. Simultaneously, this smart chrome browser extension or tool functions as a CSS editor so that you can effortlessly edit and share CSS properties. It helps interactive designers, website operators, visual designers, and other users alter the online pages very smoothly and rapidly.

Tagged : / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

HTML: Select Tag

The <select>….</select> tag creates a drop-down list to accept user input from a list of items.

AttributeValueDescription
autofocusautofocusSpecifies that the drop-down list should automatically get focus when the page loads
disableddisabledSpecifies that a drop-down list should be disabled
formform_idDefines one or more forms the select field belongs to
multiplemultipleSpecifies that multiple options can be selected at once
namenameDefines a name for the drop-down list
requiredrequiredSpecifies that the user is required to select a value before submitting the form
sizenumberDefines the number of visible options in a drop-down list
Tagged : / / / / /