俺的フロントエンド開発
7. CSSプリプロセッサ • SASS • インデントベース • 記法が厳格 • {};が不要 • SCSS • インデント無視 • CSSを入れ子と変数に対応させ た感じ • CSSをそのままSCSSプリプロ セッサに わせてもエラーでな い • LESS • SCSSの記法違い、みたいな 感じ • 使ったこと無いので分から ない • Stylus • なんかもう自由にかけるや つっぽい • 使ったこと無いので分から ない 8. SASS @import “compass” body margin: 0 padding: 0 #main border: 1px solid #000 +border-radius( 4px ) ul &.list li display: inline-block body{ margin: 0px; padding: 0px; } #main{ bord
フルスクリーンでオーバーレイの検索ボックス
増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検索ボックスが表示され、検索ボックスの左上にある✖をクリックすると閉じることができる。実際のウェブサイトではリンクの代わりに虫眼鏡のアイコンでも使ってやれば良いだろう。 マークアップ <aside id="search" class="searchbox"> <h1>Search this site</h1> <form> <input class="query" placeholder="Enter sea
Perl Hackers Hub：第5回 Xslate 次世代テンプレートエンジン（1）｜gihyo.jp … 技術評論社
本連載では第一線のPerlハッカーが回替わりで執筆していきます。今回は藤吾郎さんで、テーマはXslateです。 はじめに PerlとWebアプリケーションとの相性の良さは周知のとおりです。そして、Web開発にはテンプレートエンジンが欠かせません。テンプレートエンジンは、プレゼンテーションとロジックを分離し、デザイナとプログラマの分業を可能にし、MVC（Model-View-Controller）のV（View）を担う重要な要素です。 今回は、そんなテンプレートエンジンンの一つであり、筆者が開発しているXslateを紹介します。Xslateは2010年4月に開発を始めた新しいモジュールですが、速度・安定性・機能ともに高い水準になってきました。また、牧大輔氏や松野徳大氏をはじめとしたShibuya.pmの面々に多くのアドバイスをいただき、既存のテンプレートエンジンを置き換えられるくらい実用的に
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの？
27. CSSの中身を覗いてみる .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
Railsの逆を行く、デザイナと開発者が協力するためのScala Liftフレームワーク - Qiita
最近のフレームワーク、っていうとどれもRailsと似たような感じで実装言語が違うだけでしょ？という感じですが、Liftはそんな中完全に逆を行ってます。 その思想は他の言語でも通用するはずなので、ぜひScalaなんぞ知らんという方も読んでいただければと思います。 Liftの特徴 公式な特徴はホームページに記載されていますが、個人的にプッシュしたいのは以下点です。これらは、Templatingに詳しく書かれています(日本語訳)。 1 デザイナフレンドリー 2 コントローラーがない 3 速い デザイナフレンドリー 自分の手元にあるerbやらjspやらasp(chtml/vbhtml)やらのファイルを見て、これをサーバーサイド側の言語を知らない人間に手渡せるか？と考えたときYesと言える人はどれくらいいるでしょうか。 それらのファイルにはそこそこコードが入り組んでいて、特にRailsの場合顕著です
AngularJS コードの構造化 | DevelopersIO
複数人で AngularJS を利用した Web アプリケーションを構築するときに必要なルールをまとめてみました。 ( あくまで策定中のルールであり、今後も改変する可能性があります。また、ベストプラクティスを謳うものではありません ) 使用 AngularJS のバージョン angular.js 1.2.5 angular-route.js 1.2.5 参考サイト Dan Wahlin's Blog | Structuring AngularJS Code http://weblogs.asp.net/dwahlin/archive/2013/12/01/structuring-angularjs-code.aspx GitHub | mgechev / angularjs-style-guide / README-ja-jp.md https://github.com/mgechev/a
Webアプリケーション向けのセキュリティスキャナ「skipfish」を使う | OSDN Magazine
近年では多くの分野でWebアプリケーションが使われるようになり、大量の個人情報や重要な秘密情報を扱うようなアプリケーションも少なくない。そのため、Webアプリケーションも攻撃対象として狙われやすくなっている。今回はWebアプリケーションのセキュリティ対策として、Googleが公開しているセキュリティ調査ツール「skipfish」を使ったセキュリティスキャンを紹介する。 Webアプリケーションに特化したセキュリティ調査ツール「skipfish」 今日では、Webブラウザ経由でさまざまな操作を行えるWebアプリケーションが広く浸透している。Webブラウザは最近のほぼすべてのPCにインストールされており、専用のクライアントを用意せずにアプリケーションを操作できるというのがその浸透の理由の1つだ。しかし、Webアプリケーションでは簡単にその一部（HTMLやJavaScript）のソースコードを閲覧
iOSプログラマへ。HTML5 Canvasがおもしろい！ | DOTAPON Blog
…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ！面白いものつくろうぜ！ ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方もそうでない方も、ぜひ触ってみてください。 iOSプログラマへ。HTML5 Canvasがおもしろい！ from cocopon 練習用の「HTML5 Canvas スターターキット」はこちらから。 マウス・タッチイベント両対応のInputManagerが付属していますので、ぜひご活用ください :) CanvasStarterKit_100.zip
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロント作業の効率化
Create a new fiddle - JSFiddle