gokulkrishh

There are two main types of margin collapse:

• Collapsing margins between adjacent elements
• Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only when Collapsing is between parent and children. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse.

Thus, both overflow: auto and overflow: hidden will have the same effect.

gokulkrishh

Useful javascript util functions

Table of contents

• flatten object

Flatten Object

gokulkrishh

How to debug/develop npm package

Source

npm link

Destination

gokulkrishh

✅ Installed VS Code Extensions: 11

1. https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
2. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
3. https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
4. https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql
5. https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
6. https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
7. https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle
8. https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

gokulkrishh

#!/usr/bin/env node

const { exec } = require('child_process');

exec('code --list-extensions', (err, stdout) => {
  if (err) console.log('Error occurred', err);

  const extensions = stdout.split('\n').filter(extension => extension);

  console.log(`\n✅  Installed VS Code Extensions: ${extensions.length} \n`);

gokulkrishh

NPX (NPM Package Runner) Commands

List of useful npx (NPM Package Runner) commands.

What is NPX?

Using NPX we can execute/run node binaries without the need to install it locally or globally.

Commands

gokulkrishh

// without 2nd argument support
if (typeof Object.create !== 'function') {
  Object.create = function(o, props) {
     function F() {}
     F.prototype = o;
    return new F();
  }
}

gokulkrishh

curl https://git.io/ -i -F "url=<repo-url>" -F "code=<repo-name>"

Above command will give you something like git.io/repo-name

gokulkrishh

OOCSS - Object Oriented CSS

Two Main Principels

• Seperation of structure from skin
• Seperation of container & content

Seperation of structure from skin

Example:

gokulkrishh

/* HTML */

<div class="container">
  <div class="child"></div>
<div>

/* Basic Style  */

.container {
  width: 500px;