2021年1月11日のブックマーク (7件)

  • サクッと始めるウェブデザイン【Figma】

    このでは、ウェブデザイン初心者・入門者の方に向けて、Figmaというデザインツール(教材の範囲内での利用料は無料)を用いて、サクッとウェブサイトをデザインするための方法をまとめました。 【概要】 ・内容:Figma入門、日語化の方法、ペーパープロトタイプ、フレーム(キャンバス)の作成、ボタンの作成、ページ遷移、ローカルスタイルの作成、コンポーネント化、スクロール、画像のマスク化、デザインのシェア、プラグインの導入方法 ・所要時間:約1時間 ・必須条件:パソコン操作、メールアドレスもしくはGoogleのアカウント ・推奨OS:macOS / windows ・レベル:★☆☆☆☆

    サクッと始めるウェブデザイン【Figma】
    kkeisuke
    kkeisuke 2021/01/11
  • GitHub - phodal/clean-frontend: Clean Frontend Architecture:整洁前端架构

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - phodal/clean-frontend: Clean Frontend Architecture:整洁前端架构
    kkeisuke
    kkeisuke 2021/01/11
  • 月 5.5ドルで使える Vultr で nginx-proxy を構築して frourio を Docker で動かす!

    はじめに この記事は、いままで Docker を開発環境としてお気持ちで使っていた初心者が書いています。 玄人の方々におかれましては、暖かい目で見守って頂けますと幸いです。 (誤っている情報などありましたらディスカッションにてお願いします…!) 最初は下の記事で紹介されている Vercel + Heroku での運用を考えていたのですが、Free Dyno があまりよくなかったので(スリープしたり、時間枠の概念だったり)悩んでいました。 👇 Vercel + Heroku 構成の紹介 そこで知人が Docker ベースでの VPS 運用を勧めてくれて、その知人の手厚いサポートの末になんとか構築できました。当にありがとうございます! (単純比較できるものではないですが、Heroku Hobby は $7/月、Vultr は $5.5/月 なので自分で運用したほうが安い!) 完成図 Git

    月 5.5ドルで使える Vultr で nginx-proxy を構築して frourio を Docker で動かす!
    kkeisuke
    kkeisuke 2021/01/11
  • Atomic Design はなぜ難しいか?どうやって難しさを解消するか

    Atomic Design は難しい Webフロントエンド開発をしている人で Atomic Design を用いた経験がある方に会った時は、必ず 『Atomic Designどうですか?』と聞くようにしています。 大体の方はちょっと苦笑いをしながら『やっぱり難しいですねぇ』とか『試行錯誤しながらで...』みたいなことを教えてくれます。 私もメインの開発をする際に Atomic Design という枠組みを用いています。そして、同様に色々と悩んだのですが、このあたりについて納得がいく解釈ができたと思っています。 そこで、私の思う Atomic Design の難しさや、そう思う原因、どうやってそれを解消するかという点について、https://atomicdesign.bradfrost.com/ を適宜参照しながら共有したいなと思います。 そもそも Atomic Design 何やねん。な方

    Atomic Design はなぜ難しいか?どうやって難しさを解消するか
    kkeisuke
    kkeisuke 2021/01/11
  • Array.prototype[@@iterator] ←この @@ って何?

    MDNにはたまにアットマークを2つ並べた @@ という記法が登場します。 Array.prototype[@@iterator]() The @@iterator method is part of The iterable protocol, that defines how to synchronously iterate over a sequence of values. しかし、この記法をそのままJavaScriptTypeScriptの処理系に入力しても構文エラーになります。 console.log(Array.prototype[@@iterator]()); // => Uncaught SyntaxError: Invalid or unexpected token ではこの @@ はどこから来て、何を意味する記法なのでしょうか。 結論 これはドキュメント用のwell-

    Array.prototype[@@iterator] ←この @@ って何?
    kkeisuke
    kkeisuke 2021/01/11
  • TypeScript 4.1で密かに追加されたintrinsicキーワードとstring mapped types

    TypeScript 4.1では、Mapped typesにおけるkey remappingやtemplate literal typesに付随する新機能として、標準ライブラリにUppercaseなどの型が追加されました。 上の例から分かるように、Uppercase型は一つの文字列を受け取る型関数で、文字列のリテラル型を渡すとその文字列中の小文字を全て大文字にした文字列のリテラル型が返ります。他にも、Lowercase、Capitalize, Uncapitalizeがあります。 これらの型は標準ライブラリ(lib/es5.d.ts)にその定義があります。そこで使われているのがintrinsicキーワードなのです。以下はTypeScript 4.1時点の標準ライブラリからの引用です。 /** * Convert string literal type to uppercase */ typ

    TypeScript 4.1で密かに追加されたintrinsicキーワードとstring mapped types
    kkeisuke
    kkeisuke 2021/01/11
  • Gitを領収書の管理で使いたいので税務署に電話してみた - くうと徒然なるままに

    Git で 領収書を管理したいので法律の観点から大丈夫なのか税務署に電話で聞いてみました。 コンテキスト Amazon や Alibaba などの EC サイトで日々の買い物をしてる 領収書を紙で保管するのは面倒 概要 Git で領収書の訂正削除を管理で大丈夫そう 税務署に電話で相談できる、納税者の権利として活用するとよさそう。 税務署の回答は公開されてる情報を参照するだけなので判断はしてくれない 単語解説 電子帳簿保存法 ペーパーレス推進を目的として諸々の記録を電子データで保存できるようにするための法律 制度創設等の背景|国税庁 電子データとして領収書を保存するときにデータの訂正削除を行ったときに記録が残るシステムを利用するのが必要 電子データとして Amazon 等から受け取り保存するときに必要になる要件は以下の4つです。 タイムスタンプが押された状態でデータを受け取る 受け取った後に

    Gitを領収書の管理で使いたいので税務署に電話してみた - くうと徒然なるままに
    kkeisuke
    kkeisuke 2021/01/11