社内で新しいドメインを設立するにあたり、CSS Modules, PostCSS, cssnextを試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コンポーネント時代のスタイリング 2. グローバルCSS、BEM、そしてローカルCSS 3. CSS Modules、そしてJSXへの割り振り 4. cssnextと、その書き方 5. 我々のPostCSSスタンダード 新ドメインの CSS環境（案） CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジ

概要 こちらの記事の続きです。 SPAの静的ファイルのデプロイの仕方 SPAでも、大体のアプリはユーザー登録やログイン機能があると思います。 その際に、SPAでどうやってログイン済みか否かを判別するか、その際のルーティングをどうするかについて正解がないように思うので、自分なりのやり方を共有します。 環境 NodeJS 5.X~ React 15.1 TypeScript 1.8 全体の構成はこちらをご覧ください。 https://github.com/uryyyyyyy/react-redux-sample/tree/spa-auth ゴール ログイン済みであれば、ログイン画面にアクセスしてもホーム画面にリダイレクトされる ログイン済みでなければ、どのページにアクセスしてもログイン画面にリダイレクトされる ログイン済みでない場合、アクセスしたページがレンダリングされる前にリダイレクトされる

2016/08/17 (更新日: 2016/08/18) 【PHP PhantomJS】特定URLのスクリーンキャプチャを生成する方法 PHP PROGRAMMING PHPとPhantomJSを使って、特定URLのスクリーンキャプチャを生成する方法です。例えば、ユーザーがフォームにURLを入力すると、自動的にURL先のスクリーンショットが保存でます。最近こういった感じのサービスが増えてる気がしたので、やりかたをまとめます。といっても、めっちゃ簡単です。 » ドキュメント composerでPHP PhantomJSをインストール PHP PhantomJSというライブラリを使います。１番定番のライブラリです。composer.jsonを作成して、下記のとおりに記載します。 { "scripts": { "post-install-cmd": [ "PhantomInstaller\\In

Flexboxのjustify-contentで最後の行を左寄せにする方法 Flexboxのjustify-contentではflexアイテムの配置方法が指定できます。 justify-contentに「center」と指定すればflexアイテムを中央寄せに、「space-between」と指定すれば両サイドを端に配置し中のflexアイテムを均等に、「space-around」と指定すればすべてのflexアイテムを均等に配置します。 以下は、justify-contentにspace-betweenを指定したサンプルです。flex-wrapにはwrapを指定してflexコンテナより溢れたflexアイテムは改行されるようにしています。 See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen. 一見、

filterとmix−blend−mode instagram風の画像編集ができる、CSSgramというcssフレームワークが話題になっています。 css3のfilterとmix-blend-modeというプロパティを使うとCSSのみで画像を編集することができ、雰囲気や仕上がりをガラリと変えることができます。 結構細かい機能が実装されていて、簡単な加工のみならphotoshopなど使わずに簡単に出来てしまいます。 自分の勉強も兼ねて画像ジェネレーターサイトを作成しました。 CSS filter and mix-blend-mode Generator コード(github) こんな加工がCSSのみで出来てしまいます。 元画像 加工1 #image_after { filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110

Nodeプロジェクトのpackage.jsonには、browserというフィールドを設定することができます。 browserフィールドは、そのプロジェクトをブラウザ等のJSで使ってもらうための仕組みです。 この仕様は、browser field specに定義されています。 入門編では、この役割と基本的な機能について紹介します。 実践編では、 bundlerごとの解釈の違いと、それを回避する方法を説明します。 bundler とは このbrowser fieldを理解するには、まずbundlerについて理解する必要があります。 browser field specにはbundlerという用語が定義されていて、そこには A tool which takes a plain javascript package and creates client usable files. It may i

Web Worker API Web Workerを用いて作成したサンプル Web Worker APIの基本 定義 JavaScriptで処理をユーザーインターフェース(jQueryでDOMを扱ったりレンダリングしたりする UIスレッド)とは独立したバックグラウンドのスレッドで実行するためのAPI 今まで 通信では「非同期」という意味ではAjaxが活躍してきた setTimeoutなども「非同期」処理を一見実現しているように見えるが、単純に時間差をつけてプロセスを 実行するqueに入れているだけ Ajaxと何が違うのか Ajaxはネットワークにおける非同期通信を実現するための処理。サーバとのやりとり。 Web Worker APIはHTML5で定義されているプロトコル。どんな処理でもマルチスレッド化。 「できること」や「処理をずらす」という意味で見たら似ているかもしれないが 技術の発展し

We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201

CSSアニメーションは直感的じゃないから作りづらい CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。 @keyframes scale-anime { 0% { transform: scale(1); } 33% { transform: scale(2); } 66% { transform: scale(0.75); } 100% { transform: scale(1); } } .el { animation: scale-anime 1s linear; } Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。 まずは、作成したアニメーションをChromeで表示

JavaScriptのエラー処理、ちゃんと書いていますか？ エラーを無視せず、どこに問題があるのか、きちんと確認できるコードの書き方をデモで紹介。 この記事はTim SeverienとMoritz Krögerが査読を担当しています。最良の記事を提供することができ、SitePointの査読担当者の皆さんに感謝します。 JavaScriptのエラー処理には危険が潜んでことを知っていますか？　もしマーフィーの法則を信頼しているとしたら、不具合が生じる可能性が本当に高いです！　この記事では、JavaScriptのエラー処理について考え、その落とし穴から便利な実践例までを説明します。さらに最後には、非同期コードとAjaxにも触れます。 JavaScriptはイベント駆動型プログラムで、プログラミングをより豊かなものにしてくれます。ブラウザーをイベント駆動型プログラムと考えると、発生するエラーは同一

今回のソリューション：【Sentry/セントリー】 〜エラー検知ツール「Sentry」を導入し、把握するのが難しいフロントエンドの不具合対応を高速化した事例〜 結婚式場のクチコミサイト「ウエディングパーク」を運営する、株式会社ウエディングパーク。同社は、Webサイトの表示崩れや、ちょっとした動作のバグに、気が付くのが遅れてしまうという問題を抱えていた。 Webサイトが巨大になるにつれて、ページ数が増え、テストが漏れる箇所が出てきてしまうことも多い。同じような悩みを抱えている企業も、少なくないだろう。 同社ではその問題に対して、フロントエンドのエラーを検知できるツール「Sentry（セントリー）」を導入した。JavaScriptのエラー情報だけでなく、OSやブラウザの情報も合わせることで、デバイス固有のエラーの発見も容易になったという。 Sentryにはチケット管理ツールのような一面もあり、

console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

この記事は下記のURLにあるコミックマーケット90で頒布した同人誌と自分が管理するブログの記事を微修正し、転載したものです。 南関東開発機構 : 同人誌「日本の行政機関が公開中のAPIについて調べてみた本」を公開しました http://blog.livedoor.jp/south_kanto_dm/archives/52143201.html 南関東開発機構 : 日本の行政機関が公開中のAPIについてのまとめ（2016年8月17日暫定版） http://blog.livedoor.jp/south_kanto_dm/archives/52143463.html 前書き この記事の目的は、日本の行政機関等が公開しているAPIを紹介する事です。 日本の情報技術は他国と比較して、立ち遅れている部分があり、これを立て直すのが喫緊の課題であると言えます。 日本政府もこの問題に危機意識を持ち、先日、経