Angular最新トピックとテクニックをng-japan代表のlacoさんに聞いてきた！（前編）
Angular最新トピックとテクニックをng-japan代表のlacoさんに聞いてきた！（前編） 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。ぼくは、自社で運営と開発をしているTechFeedというエンジニア向けニュースアプリにAngular（とIonic）を採用していることもあり、Angularの行方には強く関心を抱いています。が、一方で、日々の忙しさにかまけて中々アップデートを追えていなかったりもします。 しかし、先月（2017年3月）にAngular 4.0がリリースされ、ng-conf（アメリカで開催されたAngularのカンファレンス）も終わった今は、Angularの最新情報を得るのに最適な時期！ そこで、ng-japanの代表であり、ng-confにも参加されていたlacoさんに、Angularの最新トピックとテクニックについてお聞きして
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
flexアイテム内のスクロールを有効にする - メモを揉め
やりたいこと display: flex内の各要素（以下flexアイテム）は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示になりません。 各flexアイテムの大きさはいい感じに分配されつつ、コンテンツがはみ出す時はスクロール表示になってほしいわけです。 試した結果これとほぼ同じ方法で出来ました。 memowomome.hatenablog.com やり方 flexアイテム内のコンテンツをラッパーで包みposition: absoluteにする*2。 // Jade .foo .bar .baz .qux ul.wrapper li: i.material-icons looks_one li: i.material-icons looks_two li:
SYNTH KIT｜littleBits
littleBitsとコルグは、ビギナーからエキスパートの方まで、沢山の人が簡単に音楽を作れるよう、伝統的なアナログ・シンセサイザーをとても分かりやすく紐解きました。 ビートルズからビョークまで、伝説のアーティストはみなアナログ・シンセサイザーを使って複雑なサウンドや革新的な音楽を作り出していました。littleBits Synth Kitは史上初めて、電子回路や音楽の知識がなくても、あなただけのサウンド・マシーンを作り出すことができるようになったのです。35ページ超のブックレットが付属し、そこには手順を記したインストラクションや、KeytarやSynth Spin Tableのような大掛かりなプロジェクトを10種類紹介しています。また9V電池とケーブルも付属しているので、箱から出せばすぐにSynth Kitを始められます。 ※対象年齢8歳以上 スピーカーやコンピューター、ヘッドフォ
Magenta
An open source research project exploring the role of machine learning as a tool in the creative process. Magenta Studio has been upgraded to more seamlessly integrate with Ableton Live. It is a collection of music creativity tools built on Magenta’s open source models, using cutting-edge machine learning techniques for music generation. Read the blog post.
Tabindex でフォーカスを制御する | Articles | web.dev
<button> や <input> などの標準的な HTML 要素にはキーボード ユーザー補助機能が組み込まれているため、可能な限り使用する必要があります。ただし、カスタムのインタラクティブ要素を作成する必要がある場合は、tabindex を追加することで、想定されるユーザーの行動を作成できます。 tabindex はインタラクティブなコンテンツにのみ追加します。重要な画像などのコンテンツが重要な場合でも、スクリーン リーダーのユーザーはフォーカスを追加しなくてもそのコンテンツを理解できます。 tabindex とは 組み込み要素によって提供されるデフォルトのタブ順序を変更する必要がある場合は、tabindex HTML 属性を使用して要素のタブ位置を明示的に設定できます。 tabindex はどの要素にも適用できますが、インタラクティブな要素にのみ適用し、整数値の範囲を取ります。tab
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
これは楽しい！本格的なピクセルアートが簡単に描けるPhotoshopの無料ブラシ
ピクセルアートを描く時に使うラインやドットで構成されたさまざまなイラストのパーツ・エレメントが収録されたPhotoshopのブラシ素材を紹介します。 ピクセルアートならではのギザギザの斜めのラインをはじめ、L字、Y字、矩形、円形、四角柱、円柱、三角柱、マス目など、いろいろ揃っています。 NASC Photoshop Pixel Art Brush Set Photoshop Pixel Art Brushの使い方 Photoshop Pixel Art Brushのダウンロード Photoshop Pixel Art Brushの使い方 ブラシセットには、175種類のピクセルアートのパーツ・エレメントが揃っています。 その中の一部をご紹介、他にもさまざまなパーツやアルファベットなども揃っています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
