aholachek

A Basic Guide to Protecting Yourself On the Web

Step One: Secure your passwords

How

Use a password manager and use different, complex passwords for every site. (The password manager will make it easy to generate and save new, secure passwords.) The one I use is OnePassword (paid plan).

Why

aholachek

##D3 Calendar Day View Layout

This script demonstrates a layout algorithm I developed for a day calendar view. The height and y-axis placement of each calendar item are solely determined by its start and end times, but the width and x-axis placement of each item is dependent on how many other items occur during the same time as it.

You can change the layout by adding items using the form to the left, or clicking on items to remove them.

###There are three main steps for the layout calculation:

aholachek

export type FetchConfig =  RequestInit & {
    postman?: boolean;
    method?: keyof typeof HTTPMethods;
    body?: any;
    root: string;
    path?: string;
    params?: Record<string, any>;
  };

export interface Global {

aholachek

import { useRef } from "react";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isequal";

const useDeepEqualCallback = (callback: any, deps: any[]) => {
  const callbackRef = useRef(callback);
  const cachedDeps = useRef(cloneDeep(deps));
  if (!isEqual(deps, cachedDeps.current)) {
    callbackRef.current = callback;
    cachedDeps.current = cloneDeep(deps);

aholachek

Here's a rough draft proposal for an extension to the animated component that can handle both simple and advanced FLIP use cases.

Example usage

1. Simplest example

Initiate a FLIP animation on a component by updating the flipKey prop.

Demo

Code

aholachek

[
  {
    "url": "https://www.reddit.com/",
    "ranges": [
      { "start": 0, "end": 99 },
      { "start": 447, "end": 629 },
      { "start": 655, "end": 1210 },
      { "start": 1221, "end": 1494 },
      { "start": 1505, "end": 1507 }
    ],

aholachek

1. Download Coverage Report

Create a coverage report to see which code was downloaded, and which code was actually used for a given entry point of your app. Download the report and put it in the top level directory of your project. Make sure it's named coverage.json.

2. Prepare script

Create this file in the top level directory of your project:

build-bundles.js

aholachek

CSS Grid Challenges

Grid playground

Challenge 1

View finished result here / Fork this Codepen to get started

Challenge 2

aholachek

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";

import "./styles.css";

const listData = [0, 1, 2, 3, 4, 5, 6, 7];
const colors = ["#6da5ff", "#7971ea", "#5900d8"];
// we'll iterate over this array to create groups of 3 components
const baseArray = [...Array(3).keys()];

aholachek

export default function addAnimation(animateIn, animateOut) {
  return function wrapComponent(WrappedComponent) {
    return class AnimationHOC extends Component {

      state = { animatingOut: false }

      componentDidMount() {
        if (this.props.isVisible) animateIn(this.child)
      }