Vue.js Tokyo v-meetup=“#2" 2016/10/28 http://vuejs-meetup.connpass.com/event/41955/
CSS Loader Simple loaders for your web applications using only one div and pure CSS ♥. Why? Usually it's common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). Gif images were great but using CSS we can avoid the image request, also it's easier for customize/ maintain and it's more cool. Check it out on GitHub.
One of my pet peeves in web design is how tables are often not optimized for non-desktop experiences. Let’s say I’m viewing Wikipedia on my iPhone, I’m looking through the episode list for Star Trek: The Next Generation (I grew up in the 90’s — deal), and the table has a lot of columns and data. There ends up being a lot of back-and-forth side swiping, device flipping, and general annoyance as I m
Over the last few years, lots of changes have happened to CSS that lets you do some pretty cool things, but not all browsers support all the new, fancy properties that are available. There are some ways around this and some browsers use a different notation for their version of it. Luckily, CSS won’t break a site if something isn’t supported - it just won’t do whatever that line of CSS is. Unfortu
投稿開発部の外村(@hokaccha)です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション(以下SPA)についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
One direction Shadow | jsdoit box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまうことになる。 .box-shadow { box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); } 左右の影を消すために、4番目の指定(広がり値)をぼかしの値と同じだけ負の値で指定(縮小)してあげると消える。 この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはならないっぽい。 .box-under-shadow { box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6)
JavaScript不要、HTML/CSSコピペで実現するスタイル10個まとめ YOU MIGHT NOT NEED JAVASCRIPT JavaScriptはとても便利で、Webページを構成する機能的なUIコンポーネントを自由に作成できます。ほんの数行のコードを加えることで、ブラウザにさまざまな機能を追加できます。 今回は、JavaScript を使わずにHTMLとCSSのみで実現できる、ウェブサイトでもよく利用するコンポーネントを10個まとめてご紹介します。 参照元@ : YOU MIGHT NOT NEED JAVASCRIPT - youmightnotneedjs.com
return false;はa要素にclickイベントを設定する際に必要な記述で、 return false;がないとclickイベントを実行した後にリンク先に移動してしまう それを防ぐ為の記述らしい return false;をclickイベントの最後に記述すれば、イベントハンドラ自体がfalseを返すことで、 本来イベントが行う処理をキャンセルすることができる 例えば $(functin(){ $("a").click(function(){ $("img").attr("src","cat.jpg").attr("alt","にゃー"); return false; )} )} <a href="cat.jpg">画像を変更</a> <p><img src="dog.jpg" alt="わん"></p> この場合、a要素がクリックされた際にはjQueryの命令だけが実行され、href
XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を(ある期間はW3Cと共同で、ある時期からはW3Cとは別に)し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク(W3C HTMLのこと)は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM
I had a great conversation with an interviewee a few weeks ago about how one should go about choosing a JavaScript framework. He pointed out that when a major software company releases their secret sauce, there is going to be hype. Devs think to themselves, "That company writes JS differently than me, and they are prominent and successful. Is their way of writing JS better than mine? And therefore
One of the great things about SVG is you can use media queries to add responsiveness to images: <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: green; } @media (min-width: 100px) { circle { fill: blue; } } </style> <circle cx="50" cy="50" r="50"/> </svg> <img src="circle.svg" width="50" height="50" /> <img src="circle.svg" width="100" height="100" /> <ifram
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
現在、主要なブラウザのほとんどでは、表示しているページの正規化されたオリジンをJavaScript上から取得するためのoriginプロパティがlocationオブジェクトに実装されています。 IE10以下などではlocation.originは実装されていないので、location.originプロパティを参照したい場合には、以下のようなコードを入れておくといいでしょう。 if( location.origin === undefined ){ location.origin = location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : ""); } console.log( location.origin ); // 現在のオリジンを表示 たとえば、現在のドキュメントがhtt
予備知識 JavaScriptとは。 基本的にはブラウザ上の処理 Webアプリケーションにはほぼ必須 はてなのエンジニアは皆ある程度書ける 最近では色んな所で使われている サーバーサイド (Node.js) npm, gulpなどの開発ツール (Node.js) デスクトップアプリ (Electron) スマホアプリ (Windows Phone, React Native, Titanium等) 今回は基本的にブラウザ上で動作するJSを対象にします。 JS、HTML、CSSについて調べるときに困ること ブラウザ、処理系によって違う部分が多い 変化が激しい 一年前の情報がアテにならないことも 誤った情報や、参考にすべきでない情報もある そのため、読者諸君は。 基礎的な知識を身につける 信頼できる情報を探せるようになる 信頼できるサイトを見つけておく ことを心がけよう。 クロスブラウザについ
Vue.jsとは Vue.js(ビュージェイエス)は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー(view)層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日(日本時間)に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
CSS Flexboxで何ができるのか、どういうことができるのか、基礎知識をはじめ、グリッドやレイアウトに使える実装コードやコンポーネントの実装コードなど、Flexboxの実装に役立つコンテンツをまとめて紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く