タグ

ブックマーク / kuroeveryday.blogspot.com (5)

  • rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜

    この記事は番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。 はじめまして、ダーシノ(@bc_rikko)です。 突然ですが、懺悔します。 私は転職して10ヶ月で2回も番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。 1回目は2015年11月27日、入社27日目のこと。 gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。 2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。 またしても番環境をぶっ飛ばした。しかも、前回より盛大に……。 タイトルにもあるようにrsyncコマンドが原因だ。 当記事では、この「rsy

    rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜
    odan3240
    odan3240 2019/12/17
  • Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する

    国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。 しかし、ローカリゼーションチーム(非エンジニア)にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。 そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。 また、当

    Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する
    odan3240
    odan3240 2019/04/08
  • 自作フレームワークをつくって学ぶ 仮想DOM実践入門

    昨今の代表的なJavaScriptフレームワーク(ReactVue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する! そして、ReactVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは? D

    自作フレームワークをつくって学ぶ 仮想DOM実践入門
    odan3240
    odan3240 2018/11/19
  • vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた | Black Everyday Company

    2017年10月13日に、ついにvue 2.5(コードネーム: Level E)がリリースされた。 今回のリリースの目玉はなんといってもTypeScript統合の改善! TypeScriptのアップデートにともない、vueの憎きオブジェクトリテラルの中で、なんと「thisが推論される」ようになったのだ! vue 2.4以前は、vue-class-componentのデコレータを使いクラスベースで実装しなければならなかったのが、vue 2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。 vue 2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。 ということで、今回はvue 2.5を使ってTypeScriptで実装する方法をまとめる。 ついでにvue 2.4から2.5へのアップデート方法もまとめる。 実装するにあたりハマった点があ

    vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた | Black Everyday Company
    odan3240
    odan3240 2018/11/10
  • box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

    CSSだけでドット絵(Pixel Art)を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果(影をつける)を与えるのが来の使い方なので、まずは基的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

    box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
    odan3240
    odan3240 2018/10/30
  • 1