| // https://codepen.io/cmykw/pen/gemxJm | |
| // layout | |
| <nav/> | |
| // style | |
| <style> | |
| body { min-height: 200vh; } | |
| nav { |
| document.addEventListener("DOMContentLoaded", () => { | |
| fetch("db/jsproject.json") | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| button.addEventListener("click", () => { | |
| const answers = data.answers | |
| const index = answers[~~(Math.random() * answers.length)] | |
| console.log(index) | |
| answer.innerText = index | |
| }) |
Twitter abuses all media file uploads, each type in its own way. If we want to upload a good looking animation loop from some low-color, high-detail generative art, we have to game their system's mechanisms.
don't upload a video file, they will re-encode it into absolute 💩
create a GIF, which they will auto-convert into a video file 😱
The frames of the GIF will be resized to an even-sized width using an extremely naive algorithm. Your GIF should be an even size (1000, 2000,
| /* Modern Font Stacks */ | |
| /* System */ | |
| font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; | |
| /* Times New Roman-based serif */ | |
| font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; | |
| /* A modern Georgia-based serif */ | |
| font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; |
| <template> | |
| <div class="container"> | |
| <h1>Hello</h1> | |
| <input type="text" placeholder="Filter by name or type" v-model="filter" /> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>name</th> | |
| <th>type</th> | |
| </tr> |
| const trigger = document.querySelector('button') | |
| trigger.addEventListener('click', () => { | |
| document.querySelector('h1').classList.add('blue') | |
| }) | |
| trigger.addEventListener('mouseenter', () => { | |
| document.querySelector('h1').classList.add('blue') | |
| }) |
| /* | |
| <ul class="parent"> | |
| <li class="children"></li> | |
| <li class="children"></li> | |
| <li class="children"></li> | |
| </ul> | |
| */ | |
| const parent = document.querySelector('.parent') | |
| const children = document.querySelectorAll('.children') |
| .parent { | |
| display: grid; | |
| place-items: center; | |
| height: 100vh; | |
| } | |
| .child { | |
| width: 50vw; height: 50vh; | |
| background: papayawhip; | |
| } |
| /** @jsx jsx */ | |
| import React, { useState } from 'react' | |
| import { motion } from "framer-motion" | |
| import './HelloWorld.less' | |
| import { css, jsx, ClassNames } from '@emotion/core' | |
| import styled from '@emotion/styled' | |
| const Box = styled(motion.div) ` | |
| border: 4px solid pink; | |
| width: 200px; height: 200px; |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Document</title> | |
| </head> | |
| <body> |
