aholachek

CSS Grid Challenges

Grid playground

Challenge 1

View finished result here / Fork this Codepen to get started

Challenge 2

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

[
  {
    "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

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

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

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

export interface Global {

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: