ayush

{
  "Handwriting": [
    "Calligraffitti",
    "Coming Soon",
    "Crafty Girls",
    "Homemade Apple",
    "Just Another Hand",
    "Montez",
    "Permanent Marker",
    "Rancho",

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

davidgilbertson

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {

dabit3

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true}
    },
    {
      path: '/notes',

loilo

Vue Responsive Container

A container component reacting to breakpoints on its own width or height, powered by ResizeObserver and scoped slots.

It is similar to things like vue-resize in that you can use it to observe a component's size. However the ResponsiveContainer will not emit any events, its whole point is to work as declaratively as possible, taking a predefined set of breakpoints you can access in your component.

Try the demo on CodeSandbox.

Basic Usage

tappleby

import { createRequestHandler } from "./streaming-lambda.ts";
import * as build from "@remix-run/dev/server-build";

export const handler = awslambda.streamifyResponse(
  createRequestHandler({
    build,
    mode: process.env.NODE_ENV,
  })
);