kenmori

TypeScript 練習問題集(Practice TypeScript and Playground) latest update(2020/9/21)

• author
• 【TypeScript】仕事で使える!TypeSript中級者になる為に知っておくと良い108個のこと

TypeScript and Playground練習問題集更新情報

WIP

daviddarnes

<h1>API post list</h1>
<ul>
  {% for post in posts %}
    <li>
       <a href="/posts/{{ post.id }}/">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

tsmd

function isPinchZooming () {
  const clientWidth = document.documentElement.clientWidth
  const viewportWidth = window.visualViewport ? window.visualViewport.width : window.innerWidth
  return clientWidth > viewportWidth
}

dmail

/*
                                                           href
                   ┌────────────────────────────────────────┴──────────────────────────────────────────────┐
                origin                                                                                     │
      ┌────────────┴──────────────┐                                                                        │
      │                       authority                                                                    │
      │           ┌───────────────┴───────────────────────────┐                                            │
      │           │                                         host                                       resource
      │           │                                ┌──────────┴─────────────────┐             ┌────────────┴───────────┬───────┐
      │           │                             hostname                        │          pathname                    │       │

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

matori

function noScrollFocus(element) {
  const x = window.scrollX || window.pageXOffset;
  const y = window.scrollY || window.pageYOffset;
  element.focus();
  window.scrollTo(x, y);
}

mizchi

/* @flow */
import Observable from 'zen-observable'
import firebase from 'firebase'
import { firebaseConfig } from '../../config'

firebase.initializeApp(firebaseConfig)

type User = {}

let _currentUser

manabuyasuda

エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。

デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。

このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。

基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。

ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。

全体編

ryanflorence

import React, { PropTypes, Component } from 'react'
import { getRef, listToArray } from '../utils/firebase'
import { ErrorMessage, Loading } from '../Theme'

/*

```js
<Ref path="/somewhere">
  {({ error, loaded, value }) => (
    // `value` is an object w/ keys