andrit

.chart {
  background: #b0e0f8;
  margin: 5px;
}

.chart rect {
  stroke: white;
  fill: steelblue;
}

andrit

C++ Notes

CyrilStachniss-Youtube CPP-01

link

Declaring Variables

Variable Declaration always follows the pattern of: [ = ];

• Every Variable has a type

andrit

box-sizing for reliable sizing of divs

You can use : box-sizing: border-box so that width takes border-width into calculations.

No repaint Border Add on Hover

Use box shadow and set either border or box-shadow to transparent and then color in on hover

.div {
  box-shadow: inset 0px 0px 0px 4px transparent;
}
.div:hover {

andrit

//animate DOM elemnst using js //setInterval //setInterval function calls a callback function every n milliseconds and we have to pass that n milliseconds as second argument after callback function.

//If you need to achieve 60 FPS, that means you need to move an element 60 times in a second. //That means, element has to move in roughly about (1000 ms /60 frames) = 16.7 ms

//script

var element = document.getElementById('box');

andrit

function* repeatedArray(arr) {
  let index = 0;
  while (true) {
    yield arr[index++ % arr.length];
  }
}

const lifts = ['squat', 'bench', 'deadlift', 'press'];
const nextLiftGenerator = repeatedArray(lifts);

andrit

# A naive recursive solution
def fib(n):
    if n == 1 or n == 2:
        result = 1
    else:
        result = fib(n-1) + fib(n-2)
    return result

andrit

import axios from 'axios';

export const loadJsonHttp = (url, resObj) => {
    return fetch(url, resObj)
        .then(response => {
            if (response.status >= 200 && response.status < 300) {
            return Promise.resolve(response)
            } else {
 return Promise.reject(new Error(response.statusText))

andrit

Snippet checking if Element is visible in viewport

Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specify true to determine if it is partially visible.

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
 : top &gt;= 0 &amp;&amp; left &gt;= 0 &amp;&amp; bottom &lt;= innerHeight &amp;&amp; right &lt;= innerWidth;

andrit

targeting an element on the page, pull all the values

for example, getting all the links on apage

var selector = ".field-search-result-title a";
var list = Array.prototype.slice.call(document.querySelectorAll(selector));

var process = function(){
	var nameList = [];
	list.forEach(function(elem){

andrit

Get scroll position

Use pageXOffset and pageYOffset if they are defined, otherwise scrollLeft and scrollTop. You can omit el to use a default value of window.

const getScrollPos = (el = window) =>
  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPos() -> {x: 0, y: 200}