こんにちは、フロントエンドエンジニアの minamo です。 最近は夏映画の公開ラッシュで週2回映画館に通っています。忙しい！ 3度目のブログは、最近導入してみた Stylelint についてです。 Stylelint を導入するメリット おすすめのプラグイン 導入するとき…

Stylelint を導入したときのあれこれ

こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、アプリを作成する際、最適なUIを選定する4つの指針について書きたいと思います。 UIは、人間の心理や認知に深く関わり、アプリへの信頼性を左右する重大な要素ですが、我々が…

UIを選ぶとき考慮すべき4つのこと

こんにちは、フロントエンドエンジニアの minamo です。 2度目のブログはちょっとした内容ですが、 JavaScript で便利なメソッドがあったのでご紹介したいと思います。 scrollIntoView() メソッド scrollIntoView() とは、対象の要素が ブラウザの表示範囲に…

scrollIntoView が便利だった話

フロントエンドエンジニアをしているkitoです。 今回は、Slackにいると便利なAI社員ことチャットボットについて書きたいと思います。 事の発端は、メルカリさんの「AI社員」が入社！ 翻訳から日々の業務サポートまで大活躍中というブログのエントリーを読ん…

AI社員のつくり方

はじめまして、フロントエンドエンジニアの minamo です。最近「バリアブルフォントがおもしろい！」と思ったので、ご紹介します。

バリアブルフォントで遊ぼう

デザイン部でフロントエンドエンジニアをしているkitoです。React.jsとVue.jsの登場で、JS界隈は一時期の混沌とした時代から落ち着いてきましたが、今や両者それぞれのエコシステムが豊かになるフェーズに移行しています。jQueryがデファクトスタンダードに…

Nuxt.jsのライフサイクル覚書

デザイン部でフロントエンドエンジニアをしているkitoです。 近年のCMS界隈には、いわゆるHeadless化の波がきています。CMSのHeadless化とは、CMS(Content Management System)からクライアントサイドを切り離し、クライアントサイドのフレームワークでUIを構…

strapi+nuxt.jsでHeadless CMSの夜明けを感じる

こんにちわ。 今日は前回の続き（「絶対フォント感」を身につけようとすると新たな扉が開く話 - その1 - http://lab.astamuse.co.jp/entry/2018/06/06/131745）を書こうと思ってたのですが、 アクセス数がかなり少かった（；；）ので一旦お休みしてフロント…

Vue.jsでAccordionを作ってみるく

デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、A/Bテストについて書きたいと思います。 A/Bテストとは、例えば、AパターンとBパターンでそれぞれ色の違うボタンを用意し、どちらか一方のボタンを50%の確率でWebサイトに表示させること…

A/Bテストを繰り返してわかったこと

どうも。フロントエンジニアやっている僕です。 弊社には「書籍購入補助制度」があり、各々がこの制度を利用してスキルアップに勤しむ。 素晴らしい会社だ。 たぶん。 ブログに書くネタにも事欠かない。 この本を見てほしい。 「絶対フォント感」 なんかよく…

「絶対フォント感」を身につけようとすると新たな扉が開く話　- その1 -

デザイン部でフロントエンドエンジニアをしているkitoです。 先日、iOS 11.3のリリースでiPhoneでもPWAの一部の機能が利用できるようになりました。（プッシュ通知等は利用できない）今回は、Web界隈で急速に注目を上げ始めているPWA（Progressive Web Apps…

PWAの将来性についての考察

こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。今回は、Webサイトの高速化を行う際にひとつの基準になりえるPageSpeed Insights について、主にフロントエンドで行える具体的な施策とともにご紹介したいと思います。 PageSpeed Insi…

PageSpeed Insightsのスコアを上げるために具体的にやったこと

先日、弊社採用サイトに本ブログのRSSを表示させる機能を追加したのですが、その実装がとてもお手軽だったので共有します。 YQL API Consoleのざっくりトリセツ 昨年から定番として使われてきたgoogleのAPIが廃止になったので、代替としてYQL APIを使います…

Vue.jsとYQLでお手軽RSSフィード実装

こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、BackstopJSを使ったビジュアルリグレッションテストについて書きたいと思います。 ビジュアルリグレッションテストとは視覚的な回帰テストのことで、具体的にはスクリーンシ…

BackstopJSではじめるビジュアルリグレッションテスト

2017/07/14更新 主に「抽象的な」と言っている箇所の削除・修正を行いました。 前々回くらいに「cssアーキテクチャのtips」とか偉そうなブログ書いた者ですが、 今回自分のcssを崩壊させてしまいました。まったく笑えない、由々しき事態です。 失敗事例をこ…

astamuse.comのcssが崩壊した日(2017/07/14改訂)

ABalytics.js + Google Analyticsを使ったABテスト こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、ABalytics.jsを使ったABテストについて書きたいと思います。 ABテストは、アプリケーションのUIを改善していく手がかりと…

ABalytics.js + Google Analyticsを使ったABテスト

2016/09/30に2.0がリリースされてから、現在2017/03/05まででダウンロード数約3倍の増加をみせるVue.js。 npmtrends（2016/09/25 32,043 → 2017/03/05 109,774） そろそろ無視出来ない勢いなので、とりあえず触ってみることにしました。 ドキュメントもしっ…

BootstrapとVueでタブを作ってみる、の巻

こんにちは。 デザイン部でフロントエンドエンジニアをしているkitoです。 弊社は、転職ナビというドメインの異なるサイトを300サイト以上運営しています。レアケースであるとは思いますが、運営上のノウハウの一部をご紹介したいと思います。 今回はスタイ…

複数サイトを運営する上でのフロントエンドのちょっとしたノウハウ

開発部の劉です。今回は弊社のフロントエンド開発に使われている自社フレームワークAsta4jsを紹介させていただきます。 Asta4jsとは何か？ Asta4jsはどうか？ 分離されたテンプレートとバインディング web component なぜAsta4jsを作るのか 終わりに Asta4js…

生産力を向上する非埋め込み型MVVMフレームワークAsta4jsの紹介

こんにちは。フロントエンドエンジニアのkitoです。 前回、Node.jsで簡単なアプリを作成しました。 今回からExpress.jsに触れていきたいと思います。 簡単なアプリケーションをつくる 任意のディレクトリを作成して下記コマンドを実行してください。 npm ini…

はじめてのExpress.js　〜導入編(2)〜

こんにちは、主にフロントエンド周りを担当させて頂いているSと申します。 いきなりですが「良いcss」とは何でしょうか。 validなcss tableを避けてdivやulで擬似的に表現するcss cssで表現できる事はcssで表現しているcss（svg,data URI,animationの利用） …

理解しやすいcssアーキテクチャにするためのtips

こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回から数回に渡って、Node.jsのWebフレームワークExpress.jsのご紹介をしていきたいと思います。 はじめに 数多く存在するのWebフレームワークのなかから、Node.jsのフレームワーク…

はじめてのExpress.js　〜導入編〜