gomar

Setting up a Keynote document for grid layout design

I like (love ?) Keynote because it

• is a simple to use presentation software,
• is vector based (when zooming it just looks gorgeous)
• exports to powerpoint

If I could remove that last argument, I would, but the fact is that, as a consultant, the final document is almost always expected to be a powerpoint document. Don't ask me why, it is just so. I am fighting against it but I did not win the battle so far ...

whoisryosuke

Hook

import { useState, useEffect } from "react";

const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState({ x: null, y: null });

  const updateMousePosition = ev => {
 setMousePosition({ x: ev.clientX, y: ev.clientY });

stakes

import { Data, animate, Override, Animatable } from "framer";

const data = Data({ scaleValues: [] });

export const Scale: Override = props => {
  data.scaleValues.push({ id: props.id, scaleValue: Animatable(1) });
  return {
    scale: getValueForId(props.id),
    onTap() {
      let valueToScale = getValueForId(props.id);

cvan

    // References used:
    // - https://yesviz.com/devices.php
    // - https://ricostacruz.com/til/css-media-query-breakpoints
    // - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
    screens: {
      '2xs': { min: '300px' },
      xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
      sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
      md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
      lg: { min: '1200px' }, // Desktop smallest.