Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
display=swapとはなにか - MOL
Shipped! @GoogleFonts now let's you control web font loading using font-display. Say hello to the display parameter 🎉 What's font-display? https://t.co/Q7RDeESwkm pic.twitter.com/sn27ySza1B — Addy Osmani (@addyosmani) May 15, 2019 Google I/0 2019に参加してきたのだが、Google Fontsがfont-display: swap;に対応するとかで盛り上がってるのを横目で見てた（5/15の時点で対応済とのこと）。 最近はCSSもなにもコードを書いていないので、世間に疎くて困るのでリハビリする。 The font display timeline 図
CSSセレクタのパフォーマンスへの影響 - MOL
ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Sites :: Performance Impact of CSS Selectors Steve S
Kaizen Platform, Inc.に入社しました! - MOL
フィリピン・マニラ、カナダ・バンクーバーと1年続いた海外ニート生活に終止符を打つべく、表題の会社にフロントエンドエンジニアとして入社しました！ 幸いなことに、日本帰ってからの就活は書類で落とされることもなく、みなさんとてもウェルカムな雰囲気で迎え入れてくれたこと、本当に感謝します。その中でも特にKaizenさんは一番最初にオファーを出していただき、ローリングストーンのように転げ落ちていた私を拾ってくださったこと、本当に本当に感謝のしようがありません。 プロフェッショナルな大人が集まるこの会社で、自分も恥じないように一員として頑張っていく所存。今後はこの会社と一緒に世界に向けて挑戦したい！！ 新しい働き方に挑戦してみませんか? - Kaizen Platform, Inc. グロースハッカーとは - Kaizen Platform, Inc. あと、会社が新宿なので新宿な人たちは遊んでくださ
Webエンジニアからみたカナダワーキング・ホリデー - MOL
実際のところ、ワーキングホリデー期間はまだ8ヶ月間残ってるのだが、今年5月に歯が欠けて直すのに2、3千ドルかかるっぽいことを歯医者に言われて、就活もうまくいってなかったところ、心が折れてバンクーバーから日本におめおめ帰国したのだ。 歯は欠けたのはイレギュラーなこととはいえ、目標であった海外就職も叶えることができず、不甲斐なさで一杯だが、就活になぜ失敗したのか自分なりに省みることにする。 ビザ ※ 2014年度のカナダ・ワーキングホリデーについて述べています。異なる年度、異なる国では制度が異なる可能性があります。 ワーホリは30歳までと言われているが、正確には31歳の誕生日を迎えるまでにWebからの申請が受理されればいい（入国してなくてもいい）。申請が受理されてから1年以内に入国しないといけない。僕の場合、2014年6月に31歳になったので、その前の2014年3月に受理してもらって、それから
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
【翻訳】ビジュアルデザインはつまらなくなってしまったのか？ - MOL
Original：HAS VISUAL DESIGN FALLEN FLAT? （2015-01-20）by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン（未完成であるけれど便利な表現）はスキューモーフィズム（同前）を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来
JS Girlsのステッカー発注仕様 - MOL
たまに聞かれるので、シェアしとく。 これから作りたい方必見！nanapiステッカーで使った印刷会社や見積りを公開します | nanapi TechBlog Crowyシールを作ったので、どこでどんな風に頼んでいくらだったかを公開します - Startup Reality ステッカー印刷するにあたっていろいろググってみると、IT系会社御用達っぽいデジタさんにキメた。 シール印刷｜印刷通販【デジタ】 無料サンプルを頼めるので、発注する前に仕様を確認しとこう。 JS Girlsのステッカーに関しては妥協したくなかったので、良いオプションを選択した結果、ちょっと割高になったけど、単純な四角形にするとか非耐水にするとかにすればもうちょっと単価抑えられると思うよ。 ====================================================== 《ご注文の印刷物》 ====
”今の”フロントエンド開発を知るためのメルマガ：Frontend Weekly - MOL
斉藤 祐也という男がいる。彼を最初に認識したのは、彼の記事であるウェブデザイナのためのRubyを読んだ時だ。当時の僕はHTML/CSSだけでなく、なにかプログラミング言語を学びたくてRubyについて調べていた。そんな時にたまたま検索に引っかかったのである（ちなみに4年経った今でもRubyは書けるようになってない）。 記事を読むと、なかなかいいことを書いてある。その他の記事もいいことを書いてある。プロフィールを確認してみると『2〜3年は遅れているという日本のウェブをアップデートしたい』と書いていた。なかなか大したことゆう奴だと思った。 それよりもハンドルネームが@cssradarで、CSSほげほげなんて名前のアカウント使ってるのは@cssniteか@csswizardryくらいしか知らない。この男に興味が湧いてきた。 それから月日が経ち、日々の忙しさに追われていた僕は@cssradarという
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL
Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
Webエンジニアからみたフィリピン語学留学 - MOL
こんちわ、無職の@t32k だよ。6月初めから10月末まで、まるまる5ヶ月間(22週間)フィリピンに語学留学してきたので、今回は思いの丈を綴ってみるよ。 書いてみて思ったけど、特にエンジニア関係なかったわー。 ※ 2014年6月から2014年10月までのマニラでの出来事である。1ペソ＝2.4円で計算してある。 ぼくがなぜフィリピンに行ったのかは、こちらの記事を参照してね。簡単に言えば、エンジニアとして英語にちゃんと向きあおうって思ったんだ。 なんでフィリピンなのかとか 大学を卒業してWebデザイナーになって以来、より多くの情報を早く得るには、Webフロントエンド技術に関して非常に多くの技術情報を日々捌いているLayzieさんも曰く、英語が不可欠だと感じていた。ただ普通にアメリカに語学留学したら学費だけで200万くらい飛びそうな感じだったので、ワーキングプアだった僕にとっては取れない選択肢だ
部屋とYシャツと私 - MOL
部屋とYシャツと私、AutoprefixerとSpritesmithとLibsassの話。 愛しのMapleは、フレームワークというかGrunt詰め合わせセットなのですが、Grunt自体はNode.js依存で、使っているCSSプリプロセッサはSassでRuby依存なので、なんだかキメラみたいで気持ち悪い。いっそのこと、プリプロセッサはStylusにしてNode.jsで統一しようか、むしろMiddlemanみたいにRubyで統一するか、考えものだ。とりあえずはCompassを辞めてみようという結論に至ったので代替案を探る。 MapleでCompassを使っている理由は2つ。 ベンダープレフィックスを付ける手間をなくしたい CSSスプライトを自動化したい これらをGruntプラグインでなんとか置き換えれないものか。 grunt-autoprefixer nDmitry/grunt-autopr
Sketch3ハジメマシタ - MOL
こんちわ、無職のt32kさんだよ。今日は職を失ってお金もないのでAdobe Creative Suiteに代わるソフトを探そうって話だ。そうゆうことで、いま世間を騒がしているSketch.appを触ってみたよ。 Sketchってどんなソフトかはこもりさんの紹介動画を見てみるとよい。ついでに、こもりさんが書いている『Sketch 3 Book for Beginner』電子書籍も買っておくとスタートダッシュが決めれると思う。 Sketch 3 Book for Beginner w/ Video 電子書籍ならではというか、Sketch.app自体の更新も速いので、電子書籍も随時アップデートされているし、説明動画もついているので分かりやすい。 そうゆうわけで、5/13にこけむさズで行われたSketch3勉強会にも行ってきた。勉強会は最初こもりさんからSketch.appの概要を説明してもらって
バッジ駆動開発（2014:Node.js） - MOL
こんちわ！@t32kだよ。みんなバッジ好き？( ﾟ∀ﾟ)o彡ﾟバッジ！バッジ！バッジ！ 小学生の頃、自由勉強ノートってのがあって、勉強したページ分、先生からシールをもらってはそのノートに貼り付けていたのは良い思い出です。あのノスタルジーを再び！ ということで、大人の自由勉強ノートといえばGitHubレポジトリじゃないですか。OSSがんばります！私、気になります！そしたらシール欲しいじゃないですか？ あるよ、シールあるよ、シールってかバッジだけど。 上記は最近作ってるStyleStatsのReadmeだけど、なんか緑のバッジいっぱいですよね。それを説明していく！ Travis-CI Status Images Travis CI: Status Images まずは、この中のバッジの中では一番メジャーじゃないだろうか、Travisの Status Images。昔、@kyo_agoさんが『テ
Sass/Compass徹底入門を監修しました - MOL
2014年3月18日に発売される、Sass and Compass in Actionの邦訳版である『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために』を監修した。 Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, 石本 光司 (株式会社サイバーエージェント) 翔泳社 2014-03-18 Amazonで詳しく見る by G-Tools 監修の依頼を受けて音速でハイと答えたのだけど、監修って何するんだろうねって感じだった。いや、原書の『Sass and Compass in Action』は以前から購入していて、Sass/Compassの開発者であるNathan Weizenbaumや
サイトの速度 - MOL
Stopwatch | By wwarby Flickr! こんにちわ、あなたの@t32k、ごきげんいかがでしょう。みなさんはスマホWebアプリ作っていて、自分の作ったものは速いのか遅いのか気になりませんかね？僕は木に泣くりまくりすてぃです。 そうゆうわけなもんで、表示速度とか計測してみようって話になるじゃないですかー、まさかストップウォッチで計測しないとは思うんですけどー、一応どのようにスピードを計測、そのアプリの性能を評価すればよいのか一緒に考えてみましょう。 僕が昔、ゴメス・コンサルティング（現：コンピュウェア モーニングスター） のセミナーに行ってきた時の話ですが、ここの会社はサイトパフォーマンスの計測サービスを提供していて、計測で重要なのは『定期的かつ継続的かつ同手法にてパフォーマンス測定』と言っておられました。 サービスリリース時はスモールスタートなのでアプリもコンパクトですか
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
CSScomb - MOL
うららかに晴れた秋の日、みなさんいかがお過ごしか？こんちわ@t32kだ。 今日はCSScombってツールの紹介だよ。タネマキであったこもりさんのSublime Text2勉強会のときに知ったんだけど、 まぁCSSプロパティを綺麗にソートしてくれるって代物だ。大まかな機能はこんな感じ。 CSSプロパティのソート ソート順は設定可能 style要素、style属性もパース スタイルシートのフォーマットは変更しない CSS2,3,4も完全にサポート オンラインからでも使えるし、Sublime Textだけじゃなくてメジャーなテキストエディタだったら、たいていのプラグインは用意されているんだ。 便利なものがあるなーと思ったけども、Sassファイルでこのツールを実行すると、その時はバグっていて、単純にプロパティ順を綺麗にさせるためだけなのに、そんな致命的なバグの危険性（CSSが壊れる）とかマジ勘弁！
【翻訳】ソーシャルボタンはお友達さ！ - MOL
ども、実兄からFacebook友達申請きて承認を見送るt32kです。そんなソーシャル時代ですけどみなさんいかがお過ごしか？みなさんはこうは思わないだろうか？いいね！ボタンなどのソーシャルボタンはいっぱいあるけど、どうゆうふうに実装すればいいのよ！スニペット、コピペでいいの？ってね。そんなこと考えていたら、いい記事があったので翻訳してみたよの巻。 Original：Social button BFFs（2011-09-27）by Stoyan Stefanov TL;DR:JavaScriptの非同期読み込みはWebアプリのパフォーマンスにおいて重要な問題だ。以降に書かれている内容は一般的なソーシャルボタンに共通する取り扱い方についての記事であり、ソーシャルボタンに残りのコンテンツ読み込みをブロックさせないことを学べるだろう。結局のところ、ユーザーはあなたの コンテンツを最初 に見たいのであ
パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL
2回も続いてないのにまさかの番外編！ここぞ変化球！キエル消える魔球！！ ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。 /* CSS */ .gradient { background: -moz-linear-gradient(top, #000 0%, #595959 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959)); background
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
