2019年振り返り.mdYou 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
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 HTML5 Conference 2018 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 （権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （
「フロントエンド開発者」の終焉 | POSTD
元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
twitter typeaheadはいろいろ改良されていた - Qiita
Bootstrap内にもauto complete機能としてtypeaheadがあるが、日本語の扱いに難があるみたい。 Bootstrap Typeaheadの日本語入力対応 | PLUS ARKの技術メモ: [Twitter Bootstrap]typeaheadでの日本語入力問題への対策 だが、Bootstrap内とは別にtwitter制作のtypeaheadライブラリがあり、これを使用してみると日本語問題はないっぽい。しかも、機能も強化されている。 twitter/typeahead.js typeahead.js – examples そこで、いくつかサンプルを。 なお、この説明に使用しているtypeahead.jsのバージョンは0.9.3になります。 2014年2月5日現在、バージョンは0.10.0となっており、設定が違っているみたいです（コメントありがとうございました）なので、
明日のためのクライアントサイドMVC
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
Rainbow
Rainbowはコードのシンタックス・ハイライトをやってくれるJavaScriptライブラリ。拡張の仕組みが凄く書きやすそうで良さそう。名前は悪い。しかもリダイレクト先のURLはrainbowsだし……。まぁとにかく乗り換えようかなとちょっと思った理由をちょっと書いておく。「ちょっと」なのでまだあんまり乗り換える気ない。 書きやすいといっても所詮は正規表現なので、定義フォーマットがGoogle Code Prettifyの黒魔術的なアレよりもちょっとシンプルだとかそういう意味にすぎない。なのでこの点だけでは既存の様々なシンタックス・ハイライトしてくれるライブラリから乗り換えるという程のパワーがあるわけではないと思う。他にもpre要素の子ではないそこらのcode要素のハイライトにも対応している所とかすごいと思うんだけど、おまけ機能的な感じでこれも乗り換えの動機にはならなそう。 僕が乗り換えよ
List Colors #3
かなり昔に書いたページ内で使われている色をリストアップするブックマークレットをquerySelectorAll()とgetComputedStyle()を使って書き直しました。Chromeでも動くように適当に手直しして使ってたんですが、hsla?()等に対応したとこなどツギハギだらけで色々アレだったので……。表示の仕方も右肩にちょっと出るとかではなくて、起動したページ全体を差し替えるように変わっています。Google Chrome 15.0.874.102 mではちゃんと動いているようです。 Bookmarklet: List Colors 例えばこのサイトで起動してみると、「わぁ色少ないかと思ったら意外に使って……ない」という普通の結果が表示されます。 Bookmarkletへの変換にはClousure Compiler Toolを使いました。rgba()の時に透けて見える画像はData
mod_gzipでのCSSとJavaScriptファイルの圧縮転送設定
そんなに表示が遅いわけではないですけど、動的生成なので少しでも早くするために重い腰を上げて.htaccessに設定を追加しました。今時mod_gzipを利用している古いサーバーでの話なので、多くの人にはかなりどうでもいい話です。 <IfModule mod_gzip.c> mod_gzip_item_include file "\.css$" mod_gzip_item_include file "\.js$" mod_gzip_item_include mime "^application/" </IfModule> JavaScriptファイルに対して拡張子の指定だけではダメだったのでどう指定すればいいのかちょっと悩みましたが、レスポンスヘッダを見たらContent-type: application/x-javascriptだったので、MIME側の設定も必要だっただけでした。 デフォ
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 :: 5509
CSS Transitions Module Level 3ではCSSプロパティの数値を変化させ、その結果アニメーションなどの効果を表現することができますが、iOSなどの非力なモバイル端末ではどうしてもカクカクしてしまう場合が多いです。 特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。 iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。 基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発
CSSでTableを折れ線グラフに変える - jsdo.it - Share JavaScript, HTML5 and CSS
テーブルで作った表を無理やりグラフ化してみるテスト。 :targetで切り替えるようにした(3/23) 例によってFirefox, Chrome, Safariのみ。 http://ja.wikipedia.org/wiki/%E6%8A%98%E3%82%8C%E7%B7%9A%E3%82%B0%E3%83%A9%E3%83%95 <table class="graph" id="graph"> <caption>データ表</caption> <thead> <tr> <th scope="col" class="gx">経過時間（秒）</th> <th scope="col" class="gy">速度（m/s）</th> </tr> </thead> <tbody> <tr> <th scope="row">0</th> <td>0</td> </tr> <tr> <th scope
NHK 2009都議選 開票速報ページがHTML的にも見た目的にもかなりキレイな件 | aquapple
NHK 2009都議選のサイトが見た目が美しく、操作性も良いのに、Flashを一切使わずJavaScriptで制御されていることがTwitterで話題になっていました。 速報時は自動更新で獲得議席数がリアルタイムに反映されていましたが、現在は速報も終わり開票結果になっています。 動作確認も主要なモダンブラウザ[1]で動作確認が行われています。 ソースは8つのJavaScriptとdivタグに直接スタイルシートが書き込まれているだけで非常にシンプル。75行のHTMLソースの中にFlash要素はゼロとなっています。 各ブロックをクリックすると、フローティングウィンドウが出てきます。これはドラッグしたり、サイト下部に固定表示しておくことが可能となっているほか、ウィンドウの並び替えもタイトルバーをドラッグするだけで行えます。 このページの公開は15日の午後6時までとなっています。無駄に凝っているだ
CSS+JavaScriptで作る簡単なプログレスバーのサンプル - うなの日記
CSS+JavaScriptを使って、簡単なプログレスバーを作ってみました。戦略は以下のとおり。 バーとして使うアニメーションGIFを作成しておく。 サンプルでは→を用意して使いました。 プログレスバーとするdiv要素を用意し、CSSで 背景画像として↑の画像を設定。 背景画像のx座標を調整し、最初は非表示になるようにしておく。 また、widthを固定しておく。 進捗状況が変わった場合、JavaScriptで背景画像のx座標を更新し、バーを表示する。 ↓のサンプルではタイマーで200msごとに進めています。 →サンプルはこちら ソースは次のとおりです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> // メイン
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
TableとCSSいろいろ - DesignWalker
JavaScript無しのドロップダウンメニューを実行する純粋なCSS*ホームページを作る人のネタ帳
