pug-lint でテンプレートの書式をチェックする | スマホ神 – JavaScript 受託開発 –
jade あらため pug に公式の lint があるみたいだったので試して見ました。 インストール $ npm install -g pug-lint チェックしてみる 明らかにおかしい pug をチェックさせてみます。 // a.pug div div a div b div c インデントがおかしくなっています。これを pug-lint コマンドでチェックできます。 $ pug-lint a.pug a.pug:6:1 4| div a 5| div b > 6| div c -------^ 7| Inconsistent indentation. Expecting either 0 or 4 spaces/tabs. 問題の行を指摘してくれました。 設定ファイルを作る 設定は .pug-lint.json に書くと読み込んでくれるみたいです。 { "validateIndent
Microsoft Edge の開発者向け設定 (Windows 10 / 10 Mobile Anniversary Update) - Browser
ほぼ確定だと思われるので記事を書きました。 以前、デフォルトでオンになっていた設定の機能が標準機能となっている模様です。 開発者向けの設定を見る Microsoft Edge のアドレスバーに about:flags を入力すると、 開発者向けの設定項目が表示されます。 Googole Chrome でいう chrome://flags/ と同じようなものです。 設定を適用する場合 ブラウザのウインドウをすべて閉じるか、 タブすべてとじたのち、 再び Microsoft Edge を起動してください。 内容 Windows 10 Windows 10 Mobile 開発者向け設定 コンテキスト メニューに "ソースの表示" と "要素の検査" を表示する デフォルトではコンテキストメニューにこの2つが表示されなくなりました。 有効にして各項目をクリックするとF12開発者ツールが開きます。
Railsでデバイスの判定をするのに便利なgemを作った - k0kubun's blog
rack-user_agent を作った rack-user_agentという、User-Agentに応じていろいろな判定ができるメソッドを生やすRack::Request拡張を作った。 tagomorisさんのWootheeを使ってRack middlewareでUser-Agentをパースしておいて、 その結果に応じてrequestから簡単にいろいろな情報を得られるようにしてある。 たとえばRailsだとGemfileにgem "rack-user_agent"と書くだけで以下のように使うことができる。 class ApplicationController < ActionController::Base before_action :set_request_variant def index # example request.user_agent #=> "Mozilla/5.0
SQLとの付き合い方 - クラウドワークス エンジニアブログ
こんにちは、HuluよりNetflix派の田中です（ロゴがお洒落）。 みなさん、SQL書いてますか？ 私自身は未だに使う機会が多いことからもなかなか枯れない技術の1つだなと感じながら、日々愛着を持って書かせてもらってます。 ただ、触り始めた頃はわかってないことが多く、プログラミング言語とは勝手が大きく違うことからも、ある程度書けるようになるまでは時間を要した記憶があります。 正直それまでは、あまり好きにもなれませんでした。 今回はそんな経験から、今では好きと言えるレベルになっている「SQLとの付き合い方」をまとめてみました。 クラウドワークス開発におけるSQLとの関わり方 始めに、普段の開発でのSQLとの関わり方を簡単に紹介しておきます。 クラウドワークスの開発ではO/Rマッパー（Ruby on RailsのActiveRecord）に任せることが多く、素のSQLはさほど出てきません。 た
TypeScript の開発環境構築と周辺ツールの紹介
前回はなぜTypeScriptか？という話を書きました。今回はTypeScriptを使うとして、どういう環境を作れば気持ちよく開発できるかについて解説します。 本稿に出てくるサンプルをまとめたリポジトリを随時メンテしております。時期によっては、本記事の内容に沿わない（より磨かれた）状態になっているかもしれません。 TypeScriptの開発環境が指すものは2つあります。IDEやエディタといった、本当に開発を行うための環境と、初期設定を行ったりリリースビルドを作ったりするためのタスクランナーの二種類です。 本記事ではお勧めの構成として、Visual Studio Code+grunt+dtsmを用いていきます。別構成として、Atomとgulp、tsdについても言及します。いずれの構成でも、Mac OS X、Windows、Linuxといった主要なプラットフォームで同じように動かすことができま
TypeScriptでのフロントエンド開発環境作成総まとめ - $shibayu36->blog;
これまで自分のブログで、TypeScriptを使ったフロントエンド開発環境についてブログをいくつか書いてきた。ひとまずこの辺りで、TypeScriptでフロントエンドを開発するための最低限の環境を構築できるようになったので、総まとめとしてブログエントリを書いておく。 今回のサンプルコードは https://github.com/shibayu36/typescript-project-sample/tree/4653cd002eef3ee1946a2ca1da344e0076b2844f に置いたので参考に。 これまでの記事 EmacsでTypeScript環境を整える - $shibayu36->blog; JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog; gulp + browserify + tsifyを利用してTypeSc
Angular CLI を試してみる | CYOKODOG
コンポーネントを作ってみる ng g component hoge-component こんなふうに生成される。 installing component create src/app/hoge-component/hoge-component.component.css create src/app/hoge-component/hoge-component.component.html create src/app/hoge-component/hoge-component.component.spec.ts create src/app/hoge-component/hoge-component.component.ts create src/app/hoge-component/index.ts 中身はこんな感じ。 index.ts export * from './hoge-co
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者むけhttpoxyとか脆弱性とかの話 at #PHPBLT 5
https://qiita.com/kent_ocean/items/f1a1d21fd9997cc5d6f8