文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita
本日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSはCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速
SPAと覚悟
Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/
[iOS8]クレジットカード読み取りに対応したフォームの作り方 - Qiita
はじめに クレジットカードのスキャン機能が超便利！ iOS 8ではSafariの機能が改善され、クレジットカードをカメラでスキャンするだけで、カード情報が自動で入力されるようになりました。面倒な数字の羅列の入力も、カメラをかざすだけで完了です。 実装したいけど情報が少ない・・・ この新機能に対応した入力フォームを作ろうと思ったのですが、ググってみると意外と情報が少なかったのでまとめてみました。 スキャンで自動入力可能な情報 カード番号（14〜20桁の数字） 有効期限（月/年） カードの種類（VISA、JCBなど） 名義人氏名は自動入力できないようです。スキャン時には文字が認識されているようなのですが。 (やり方をご存知の方がいらっしゃいましたらぜひ教えてください！) フォームの書き方 試行錯誤の末にようやくルールみたいなものが見えたのでまとめました。 下記、それぞれの入力フォームの記述例で
![[iOS8]クレジットカード読み取りに対応したフォームの作り方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e40ed11c79cae6b36b0b474dcb2aef6776ef48a0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCaU9TOCU1RCVFMyU4MiVBRiVFMyU4MyVBQyVFMyU4MiVCOCVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBQiVFMyU4MyVCQyVFMyU4MyU4OSVFOCVBQSVBRCVFMyU4MSVCRiVFNSU4RiU5NiVFMyU4MiU4QSVFMyU4MSVBQiVFNSVBRiVCRSVFNSVCRiU5QyVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MSVBRSVFNCVCRCU5QyVFMyU4MiU4QSVFNiU5NiVCOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGQ0NGQyZmVlZGQ3OWJkNmNiNDg1OThiMWU4ODVkYzc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2t1bXVyYV9kYWlraSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjAzYmIxYTllMWZkYzQzMjVlNTlmZGM3YjMzM2RlMGM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D4e6ae45ca52d18e187f0f1ad20576f1d)
HTMLってどうなの? JSそれぞれの立場 - Qiita
最近のJavaScript業界で「HTMLへの思い」を聞いてみました。 Angular先生 HTMLはもっと出来る子さ。もっと進化できるはず、もっと頑張れよ! React先輩 もうHTMLに期待するのは飽き飽きしたよ。すべてはJavaScriptでいいんだ、クールだろ? Polymer君 HTMLは進化して帰ってきたよ! エッ、Safariッテナンデスカ? このあたり、モダンブラウザ・ネイティブ世代のライブラリたちとの温度差があるようですね。少し、意見を聞いてみましょう。 Riot君 先生、僕たちゆとり世代なんで頑張りたくないです。というかHTMLは十分高機能だし。先輩には悪いけど、ビューはHTMLで書くのが自然ですね。(というか、先輩たちのHTMLアレルギーがナゾ) vue.jsさん 私はわたしですから。あんまりいろいろやりすぎるのはクールじゃないし。HTMLはHTML、JavaScri
URLスキームからのスマフォアプリ起動のフォールバック
前段 ブログリハビリ..._:(´ཀ`」 ∠): URLスキームで任意のアプリ（今回はLINE）を起動したい フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい Android Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。 var iframe = document.createElement('iframe'); iframe.className = 'is-hidden'; iframe.onload= function() { alert('LINEアプリ、インストールしてなくない？'); iframe.parentNode.removeChild(iframe); }; iframe.src = 'line://msg/text/loremipsum...
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Referrer を制御する - Qiita
Web ブラウザーは通常 HTTP 要求の Referer: ヘッダーに参照元ページの URL を入れますが (あるいは document.referrer で参照元ページの URL を取得できますが)、 Web サイト側でこれを制御したいことがあります。 例えば、次のような場面が想定されます。 URL にユーザー名や秘密の ID などを含めざるを得ない時は、プライバシーやセキュリティーの観点から、この URL を外部に漏らしたくありません。 社内システムに URL を貼りたいことがありますが、社内システムの URL を外部に漏らしたくありません。 Web アプリケーションの開発用サーバーは、その所在を外部に漏らしたくありません。 投稿者と友達のみに公開される SNS の投稿にリンクが含まれる時、その個別 URL を漏らしたくありません。 (SNS 全体の URL が漏れることは問題ありま
GoogleのHTTPS版でRefererがoriginだけになりそう (meta referrer="origin") - fragmentary
Google検索のHTTPS版で、4月から検索結果から飛んだ時に送信されるRefererが変わることがあるらしい。 Upcoming changes in Google’s HTTP Referrer どうなるかというと、ChromeなんかではSSLなページに飛んだ時にoriginのみが送られて、クエリとかを含まなくなる。 Starting in April, for browsers with the appropriate support, we will be using the "referrer" meta tag to automatically simplify the referring URL that is sent by the browser when visiting a page linked from an organic search result. Thi
Sitespec - r7kamura blog
[Sitespec](https://github.com/r7kamura/sitespec)という静的サイト生成ツールを作り、このブログを移行した。 ## Sitespec Sitespecは、Webアプリとテストから静的サイトを生成するためのツール。 WebアプリにはRackを、テストにはRSpecを使う。 Rackを使った適当なWebアプリを用意し、 RSpecでHTTPリクエストを発行するように記述したテストを実行すると、 レスポンスの内容から静的ファイルが生成されるという仕組みになっている。 参考までに紹介しておくと、静的サイト生成ツールには他に [Middleman](http://middlemanapp.com/)や[Octopress](http://octopress.org/)、[Movable Type](http://www.movabletype.jp/) な
Meta referrer - WHATWG Wiki
A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam. To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members). Overview This document describes a proposal the "referrer" metadata name. Using the referrer metadata attribute, a document can control the behavior if the Referer HTTP
vimでhtmlをスラスラ書くためのレシピ - Qiita
ただの、自己満足乱れ書き ふむ、下々の文章でも見てやるかって人だけ見てくれればおｋ 対象はvimはじめたいという人から中級者ぐらい vimでhtmlファイルを編集するときに知ってると気持ち良くなれるコマンド というか最低限覚えておかないと、コーディング時間が3倍以上になる系のコマンド。 アクション範囲ターゲットの3つの組み合わせコマンド 例)citとタイプ citのcはアクション。cの場合は削除して挿入モードに変更。他のアクションに置き換える事も可。d(削除)v(選択)など。 citのiは範囲。iはタグの中身が範囲でaに置き換えるとタグ全体が範囲になる。上記の場合でaにすると<div></div>ごと消えて挿入モードになる。 citのtはターゲット。tの場合はタグに対して行う。他にも'や"、<>、{}、()と言ったような何かで挟むものに使える。<>のような左右で違う記号はどちらか一方で良い
素のPHPまたはCakePHPの テンプレートのHTML部分を圧縮(minify) して通信量を削減により、高速化を図る - zz log
概要 PHPのViewテンプレートをtoken_get_all(指定したソースを PHP トークンに分割する)と自前のhtml-minifier により、事前にHTML圧縮を行い、その結果をキャッシュすることで、5～10%程度のHTML容量の削減を行うことができました。 詳細 ※CakePHP の View テンプレートは、テンプレートエンジンを使用せず、素のPHPを使用します。 IDE等の支援を受けながら、View テンプレートを作成しますが、人間向けに可読性を持たせようとすると、ブロック要素毎にインデントを行いながら作成することになります。インデントに使用される(半角空白やタブ)は人間の可読性のためだけにあり、デメリットとして通信量の増大(ブラウザのHTMLパースは体感できない程高速に行われる)やサーバー側のキャッシュの非効率化などがあります。 PHPのテンプレートによるレンダリング後
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LDRS — UI Ball
イマドキのコーダー環境構築2016
mala on Twitter: "最近のブラウザのinput type=password autocomplete=off は完全に無視されるわけではなく、ブラウザによってはオートフィルインの挙動が変わる http://t.co/6QuydcidSN"
モバイルアプリのUIを処理系統でまとめた『UX Archive』 | 100SHIKI
