GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)

マイクロチームでの高速な新規開発を支える開発・分析基盤 by @__timakin__ Builderscon2017でのプレゼン内容です。

2017年2月12日 WEBサイトを作成する際、Vimeo動画やYouTube動画を背景いっぱいに表示したくなる事があると思います。そんな時にプラグインに頼らずに設定したいですよね。今回はシンプルなコードで、Vimeo動画やYouTube動画をアスペクト比を保ちながら全画面背景に設定する方法を解説したいと思います。 VimeoやYouTubeの動画コードを貼り付ける まずは任意のVimeo動画やYouTube動画のiframe形式のコードを取得してhtmlに貼り付けます。サンプルはyoutubeですがVimeoも同様にiframe形式でコードを取得する事ができます。 <div id="video"> <iframe src="https://www.youtube.com/embed/testtest?playlist=testtest&autoplay=1&loop=1" framebo

@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた はじめに こんにちは、すわ＠秋葉原オフィスです。先日 Naoki YAMADA (@wakamsha) さんがSpeakerdeckで公開したAltJS/AltCSSに関するスライドを大変興味深く読ませてもらいました。 このスライドは社内の新卒社員向け研修の内容とのことで、最後に「課題」があったため、今回私なりに回答してみました。 …といったような、植木が執筆したブログに触発され、私が最近業務で使っている技術を織り交ぜた別解を作ってみました。 お題 JavaScript, CSS いずれも何かしらのプリプロセッサを使用すること（※HTMLは任意） ローカルサーバーの起動 ファイルを変更したら自動的にビルド処理が実行 コンテンツは「Hello, wor

先日CircleCI 2.0のopen betaが出ましたね CircleCIはDockerネイティブサポートになったりDocker 1.10.0に縛られなくなりました ただ1.0に存在していたSSHデバッグ機能は使えなくなりました しかし恐れることありませんCircleCI 2.0はローカル環境で実行できるのです 記事執筆時はSSHが使えませんでしたが、2018年8月の時点では2.0でもSSHがサポートされました。 CircleCIをローカル環境にインストールする 以下のようにインストールします

こんにちは、せーのです。 今日はサラッとした話題なのですが、地味に生産性が上がって嬉しいのでやったことない方はやってみるといいかと思います。 Atomは素晴らしい 最近このdevelopers.ioのブログがMarkdown対応になり、HTMLタグを書かなくても良くなったので早速ガンガン使っているわけですが、そうなるとオフラインでブログを書きためる際にいい感じのMarkdown対応のエディタが必要になります。 私はsublime textに恋をしてきたので、sublimeにプラグインを入れてやってみようかな、とも思ったのですが、ここで心機一転、最近はやりのAtomというGithubが作ったChromiumベースのエディタを使ってみることにしまして、これがまたよく出来たエディタで（しかも無料で）、UI、サクサク度、プラグインの豊富さ、アイコンのかわいさ、補完の素晴らしさ等今のところ文句なしの

let type = navigator.connection.effectiveType; function updateConnectionStatus() { console.log( `接続の種類が ${type} から ${navigator.connection.effectiveType} に変化`, ); type = navigator.connection.effectiveType; } navigator.connection.addEventListener("change", updateConnectionStatus); 接続オブジェクトは、大きな帯域幅やメモリが使われるリソースを事前読み込みするかどうか決める場合に便利です。以下の例は、ページの読み込み直後に呼び出され、動画の事前読み込みが望ましくない場合の接続の種類を確かめます。携帯電話回線接続が見つかる

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

さっきAutoprefixerの設定でいろいろ阿呆なことをして、まあそれは解決して、ついでにリリースノートを見ていたら6.6.0でこんな機能が入っていたのを知る。 With Autoprefixer 6.6 you can specify browsers in package.json to reduce config files: { "private": true, "devDependencies": { "autoprefixer": "^6.6.0", "postcss": "^5.2.6" }, "browserslist": [ "last 2 versions", "ie 9" ] } Note that we highly recommend specifying browsers in browserslist config or in package.json in

この記事は、Tech KAYAC Advent Calendar 2016 の22日目の記事です。 こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアの@takumifukasawa です。 昨年のアドベントカレンダーではWebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番という記事を書かせていただきました。 もくじ はじめに 手順 npm scriptsとは gulpと比較したメリット・デメリット サンプルの開発環境 明日は はじめに 今年の夏頃、いつも通りgulpを使っていた僕は、ある日gulpのバージョンアップか何かをしたら自作のgulp開発環境が上手く使えなくなって、すごくハマりました。それはそれは深刻な事態に…。 その時にふと、「あれ、なんでgulp使ってるんだっけ…」と立ち返り、gulpをなくしてみたらどうなるんだろうとあれこれ手を動か

「Webパフォーマンス」特集です！Webパフォーマンスにおけるサマリーや関連仕様、最新のテクニックなどを幅広く紹介します！https://html5j.connpass.com/event/50524/

終了 2017/02/25（土） 12:00〜 Inside Frontend #1 Web フロントエンドの現場とこれからを繋ぐカンファレンス あほむ 他 東京都千代田区紀尾井町1-2 東京ガーデンテラス紀尾井町 (紀尾井タワー)

Webページの古さの視覚化 Webで面白い情報を見つけたとき、よく見たらとても古いページだということに気づいてがっかりすることがあります。がっかりするだけだとまだ良いのですが、SNSなどで紹介したあとで古さを指摘されたりすると恥ずかしいものです。 世の中のたいていのものは古くなるとゴミが溜まったり変色したりするものなので、古さになんとなく気づくのが普通ですが（写真1⁠）⁠、ファイルやWebページのようなデジタル情報は古くなっても見栄えが変わらないため、こういう失敗をしやすいと言えるでしょう。 写真1　明らかに古い壁 情報が劣化しないことは、デジタルデータの大きな特長なのですが、古さが直感的にわかったほうが都合が良い場合もあります。古くても価値が変わらない情報なら気にする必要はないのですが、ニュースや技術情報のように新しさが重要な場合、間違って古い情報を参照しないように気を付けなければなりま

iOSでの:hover問題 iOSデバイス（iPhone / iPad）ではCSSの:hoverがうまく働かず、ダブルタップしないとリンクが飛ばないことがあります。 結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari iOS 8.4.1の:hover問題 上記の情報によるとiOS 8.4.1で発見され、9.0以上では解決しているとのことですが、私は2016年11月現在の最新10.1.1の環境でこの不具合が出ました…（辛）不具合っていうか謎仕様…でもまあ不具合と言って差し支えないですよね…。 iOSでHoverが効かない問題でも9系でのバグ報告があるように、hoverで画像切り替えのような凝った実装をするとまだこの不具合が出ることがあるようですね。厄介です。 ちなみに私にこの不具合が出た時の実装はこう。 <div id="link">

How to add non-Gmail address to Gmail with Gmail's SMTP server B! 142 0 4 0 最近は全てのメールをGmailで管理するようにしています。 全てのメールというのはGmailアドレス以外のメールもGmailに転送して、 Gmailから送信する、と言う状態。 前まではGmailに全部依存するなんて。。。とか、 Webメールなんて使いづらい(メールソフトで扱うなら一旦Gmailを経由する必要なんて無い)。。。 とか思ってました。 が、Webインターフェースも大分使いやすくなったし、それ以上に スマホとか色々な物でメールのやり取りをするし、端末も以前にも増して 新しいものをどんどん使う様になったので ブラウザでログインさえすれば使えるGmail便利、と。 で、ちょっと最近新しくアドレスを追加しようとしたらSMTP関連でちょっと

技術推進室の浅井です。 技術的負い目とは、世に言う技術的負債のことです。 社内で技術的負債の定義、ことばの表現を考える中で、「『負債』は優れた比喩表現であるものの、第三者への返済義務がない点で会計上の負債とは異なり、言葉としての問題も多く、不必要な議論を生み出しやすい」などの指摘があり、代わりの表現として社内の一部で使われている言い回しです。 最近社内のたいへん古いシステム（16年の歴史があります）の技術推進を行う機会があり、たくさんの技術的負い目と向き合いました。 そのような古いシステムの技術的負い目と向き合ったとき、エンジニアはストレスを感じ、ネガティブな感情を抱いてしまいがちです。負い目に苦しめられることで過去のコードや技術的判断に対して不満を言いたくなる気持ちはとてもよくわかりますし、実際に私もたくさん苦しんでたくさん不満を言いました。 ですが技術的負債の文脈でよく言われるとおり、

作成：2016/03/14 更新：2016/06/29 Webサービス > 世界的に有名なダミーテキストといえばlorem ipsum（ロレム イプサム）ですが、その他、サイト制作に使えるテストデータやファイル系のダミー系ツールなどをご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 WordPressテーマユニットテストデータ WordPress開発を行うときや公開前など、記事に流せるダミーデータが欲しい。そんなときはWPユニットテストデータ。長めのタイトル・マークアップ（見出し・引用・テーブル）タグ、画像の配置サイズのテストなど、レイアウトや機能に悪影響が出ないようにするために役に立つデータです。 GitHub - jawordpressorg/theme-test-data-ja: Japanese test data for WordPress 適

Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo