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.

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);

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 });

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 ...

mmazzarolo

// 1. Define a state variable for showing/hiding the action-button 
state = {
  isActionButtonVisible: true
}

// 2. Define a variable that will keep track of the current scroll position
_listViewOffset = 0

// 3. Add an onScroll listener to your listview/scrollview
<ListView

monicao

React Component Lifecycle

• getInitialState
• getDefaultProps
• componentWillMount
• componentDidMount
• shouldComponentUpdate (Update only)
• componentWillUpdate (Update only)
• componentWillReceiveProps (Update only)
• render

RayPS

spiner = new Layer
	borderRadius: "50%"
	backgroundColor: false

spiner.style["border"] = "5px solid"
spiner.style["border-color"] = "white white transparent transparent"

spiner.center()

spiner.animate

inversion

{
    "Bakerloo": "#B36305",
    "Central": "#E32017",
    "Circle": "#FFD300",
    "District": "#00782A",
    "DLR": "#00A4A7",
    "Hammersmith and City": "#F3A9BB",
    "Jubilee": "#A0A5A9",
    "Metropolitan": "#9B0056",
    "Northern": "#000000",

woeldiche

# Import layers
Imports = Framer.Importer.load "imported/Nordea Markets Master"

# Import settings and model
config = require("nmSettings").config;
model = require("nmModel").model;
# Import page changing behavior
slideIn = require("nmSlidein");
# Import instances of pages
TradeInstance = require("nmTrade");

stakes

# Add the following line to your project in Framer Studio. 
# `frameless = require "frameless"`

frameless = {}

# Directly opens the prototype in Frameless
frameless.open = ->
	intent = "frameless://"
	url = intent + window.location.host + window.location.pathname + "/"
	window.location.replace url