mornir

Flexbox

justify-content = main axis

align-items = cross axis

align-content = cross axis with wrap; to be used when weird gap appear between rows/columns

Grid

photo gallery: grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));

mornir

object-fit: cover (for img)
backgroud-size: cover (for url(''))

mornir

const obj = {video: {name: 'cat', duration:30}}

obj.map({video} => video.cat, video.duration)

const data = {
key: 314343214,
data: {
name: 'hello',
duration: 44
}

mornir

const str = "I can speak {日本語,にほんご} read {漢字,かんじ}"

const regex = /{(\S+?),(\S+?)}/g

const newStr = str.replace(regex, `
<ruby>
  $1 <rp>(</rp><rt>$2</rt><rp>)</rp>
</ruby>`)

mornir

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

mornir

function alphabetPosition(text) {

  const arrayOfLetters = text.toLowerCase().split('')
  
  return arrayOfLetters.map(letter => {
    const code = letter.charCodeAt()
    if(code < 97 || code > 122) return null
    
    return code - 96
    

mornir

import Vue from 'vue'
import imageUrlBuilder from '@sanity/image-url'

import sanityClient from '@sanity/client'

function setUpSanity(isDraft = false) {
  return sanityClient({
    // Find your project ID and dataset in `sanity.json` in your studio project
    projectId: process.env.SANITY_PROJECT_ID,
    dataset: 'production',

mornir

const sanity = require('@sanity/client')
const fs = require('fs')
const EOL = require('os').EOL
const flatMap = require('lodash.flatmap')
const { subDays, isBefore } = require('date-fns')
const sanityExport = require('@sanity/export')

/**
* @param context {WebtaskContext}
*/

mornir

const {google} = require('googleapis');
const path = require('path');
const fs = require('fs');

function getCredentials() {
  const filePath = path.join(__dirname, 'keys.json');
  if (fs.existsSync(filePath)) {
    return require(filePath);
  }
  if (process.env.CREDENTIALS) {

mornir

<template>
  <figure>
    <v-lazy-image :src="img"
                  :src-placeholder="lqip"
                  class="w-full object-cover"
                  :alt="alt" />
    <figcaption class="mt-3 max-w-sm">
      <span class="block font-bold text-2xl leading-tight">{{ title }}</span>
      <span class="block text-base tracking-wide">{{ subtitle }}</span>
    </figcaption>