VSCode commands

Cmd + ctrl + shift + right arrow – select code up and up
cmd+ctrl+shift+ left arrow – select code down and down

Alt +up/down arrow – move current line up/down
shift+alt+up/down – duplicate current line

Cmd + D – select all occurrences of word in current file

alt+cmd+shift+ down arrow – select the occurrences manually from the starting cursor point

alt+cmd+ [ – close related content block
alt+cmd+] – open related content block

cmd+k followed by cmd+0 – close the main content block
cmd+k followed by cmd+j – opens the main content block

cmd+ arrow right – jump to right
Cmd + left arrow – jump to left

Advertisements

Protected: World of JavaScript

This content is password protected. To view it please enter your password below:

CSS Basics

CSS CheatSheet http://overapi.com/css

CSS Specificity –

Specificity ranking from lowest to highest..

Type Selector(h1) – lowest

Class selectors(.example)

ID selectors(#example) – highest

CSS Specifity Calculator – play around to understand

https://specificity.keegan.st/

Typography:

Typeface: a set of fonts, designed with common characteristics and composed of glyphs

Font: Individual files that are part of typeface

Free fonts from https://fonts.google.com/

CSS Units:

 

In simple words, You’re looking at a monitor which is comprised of lots of tiny dots that are used to make up an image. These are pixels. you do need to understand that pixels are an absolute unit of measurement. Absolute means that they are the same size regardless of the size of anything else.16px on your laptop monitor is not the same as 16px on your iPad. Pixels are absolute but not consistent.Pixels are defined as a single point in a graphic image, and are often tied to viewport resolution. If a viewport is 1600×900, that typically means that there are 1600px pixel columns & 900 pixel rows, with a pixel in each cell.

Box Model:

* offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar.

* clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

* scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element’s padding, but not its border, margin or horizontal scrollbar.

How to use Combinator Selectors to apply CSS properties..

Sibling Selector

Psuedo-class selectors

Eg for :first-of-type and :last-of-type

Box Model:

How paddings,borders increase the height and width of an element using border-box: content-box. Below is the example..

Box-Sizing : Border-box

Using box-sizing: border-box you can keep the height and width of an element same but content shrinks inside element with margins, padding and border. Pls see the below screenshot.

remove default margins in between inline blocks using font-size: 0 for the parent and font-size: px to child. Please find the below screenshots.

Remove space around elements

Before:

After:

here is the fiddle https://jsfiddle.net/sathyavakacharla/oucnx19z/8/

Position:

In below screenshot, we haven’t specified position relative to parent, hence offsets(bottom and left) considers from page flow.

New position value ‘sticky’ added recently by w3c but not supported by IE browsers..

https://www.w3schools.com/howto/howto_css_sticky_element.asp

Z-Index:

position is mandatory to apply z-index property on any element.

Background Images and its properties…






When it reaches to offset(top:10px), sticky gets activated like shown below..

display: grid

Best tutorial to learn CSS grid is from https://learncssgrid.com/

Video tutorial to learn CSS grid is from https://scrimba.com/g/gR8PTE

Flex Box:

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Best tutorials to learn flex box is:

https://cssreference.io/flexbox/

https://tympanus.net/codrops/css_reference/flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Video tutorials

https://scrimba.com/playlist/pVaDAv

Images


SVG



Transitions and Keyframes






BEM(Block Element Modifier):

It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code. Sadly, most CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term.

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

clearly explained here..http://getbem.com/naming/

Quick glance from getbem.com

https://css-tricks.com/bem-101/

Anchor tag new attributes noopener noreferrer

<a href=”https://www.google.com&#8221; target=”_blank” rel=”noopener noreferrer”>Google</a>

This new feature is to avoid a potentially serious vulnerability on these kind of links.

The vulnerability explained

You have a link on “Page A” to “Page B”. Let’s say that link has a  target=”_blank” tag, which means that “Page B” will open in a new tab or a new window of your browser. Now, here comes the issue.

For some reason, when the above scenario happens, “Page B” can for a moment control “Page A” with a simple Javascript code. An attacker could use this to download something to your device, intercept private data being sent, change cookies that are dropped, or take your reader to any page they wanted. So, it’s serious.

Beating the vulnerability

To avoid this behavior you can use the following attribute:

noopener

“Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).”

However, not all browsers support the previous tag, so to be sure you’ve closed the vulnerability you also need to use the following attribute on your links:

noreferrer

“Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header.”