タグ

DEAD_MANのブックマーク (1,368)

  • 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)

    2. プロフィール • 竹内 真 / TAKEUCHI SHIN #singtacks – 創業企業&所属 • 株式会社レイハウオリ 代表取締役社長(W3Cメンバー) • 株式会社ビズリーチ 取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by

    現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
  • 【AWS】VPC環境の作成ノウハウをまとめた社内向け資料を公開してみる | DevelopersIO

    よく訓練されたアップル信者、都元です。今回のお題は久しぶりにVPCです。 この記事は、アップデート版が存在します。最新情報は【AWSVPC環境構築ノウハウ社内資料 2014年4月版を参照してください。 VPCを利用する理由 弊社で構築するAWSのサーバ環境は、一部の例外を除いて全てVPCを利用しています。 突然ですが、筆者はあまり大規模なシステムに携わった経験がありません。大規模なプロジェクトだと「数百数千台のサーバがラッキングされ、それが論理的なネットワークで区切られていて」「複数のデータセンターが冗長化された専用線で結ばれて」等、正直ちょっと想像つかない世界があるんだと思います。よくわかんないですが。 (c)John McStravick. (CC BY 2.0 Licensed) 逆に、小さなシステムであれば、月々数万円でレンタルサーバを借りて「1台のマシンの中にWebサーバとDB

    【AWS】VPC環境の作成ノウハウをまとめた社内向け資料を公開してみる | DevelopersIO
  • さよなら手作業・人海戦術! HTML5時代のツール「Selenium2」でWebシステムのテストを自動化

    シリーズは、WebブラウザをUIとして利用した業務システムやアプリケーション(以下、Webシステム、Webアプリケーション)のテストをテーマとして、Webブラウザを使ったテストを自動化するOSSのツール「Selenium2」を紹介します。業務システム開発の現場で適用してきたノウハウを元に、これまでSelenium2について知らなかった人から以前使った経験がある人まで、より実践的な「使える」内容を盛り込んでいきたいと思います。 シリーズのスコープと対象読者 シリーズはWebシステム・Webアプリケーションのテストの中でも「Webブラウザを操作して実施するテスト」をスコープにしています。開発工程としては、1モジュールとして単体テストに位置付けられる場合もあれば、複数のモジュールやシステムと連携して結合テストや総合テストに位置付けられる場合もあるでしょう。これらのテストのことを、シリーズ

  • PDOでサクサクDB開発

    はじめに PHP界隈では現在、PHP 4からPHP 5への移行が進んできており、ここ最近ではPHP 5の機能を活用したフレームワークも多く出てくるようになりました。 PHP 5は、PHP 4に比べオブジェクト指向のサポートや速度面での向上などが取り上げられる中、最も注目すべき点であるデータベースへのアクセスを抽象化したレイヤーとしてPDOが登場しました。 今回はそのPDOに注目し、サンプルを交えてPDOの使い方を紹介します。 対象読者 PHP 5を使ったことがある方 以前PEAR::DBなどを用いてデータベースを使ったアプリケーションを作成したことのある方 必要な環境 PDOはPHP 5.1から標準で導入されるようになりました。Windows/UNIXを問わず利用することができます。よってPHP 5.1の環境と、PDOの動作に必要なデータベースの構築を行ってください。 PDOとは PDO(

    PDOでサクサクDB開発
    DEAD_MAN
    DEAD_MAN 2013/10/25
  • PDOの真の力を開放する - PHPでデータベースを扱う(3)

    ちょっと遅れましたが、シリーズの第3回です。前回までに論じた内容をふまえて、簡単な実装を示します。↓前回までの内容はこちら。 DAOの悪夢 - PHPでデータベースを扱う(1) - 泥のように ドメイン駆動設計という救世主 - PHPでデータベースを扱う(2) - 泥のように 題材 「記事にタグを設定できるブログ」みたいなシステムを考えてみます。ブログ記事を示すEntryテーブル、タグを表すTagテーブルの二つを用意しました。MySQL WorkbenchによるER図(鳥足記法)は以下になります。 1つのEntryに対して複数のTagがある、1対多の関係です。同じTagが複数のEntryに関連するため、多対多の関係と見なすこともできそうですが、タグ程度だとあまり意味がないので、これ以上のテーブル分割はやめておきます。 Entryテーブルの主キーがentryIdと冗長な名前をしているのは、自

    PDOの真の力を開放する - PHPでデータベースを扱う(3)
  • DevOpsなんてくそくらえ - razokulover publog

    先日こんなことを言われた。 「テストを書いた成果を見せよ」 と。 ショッキングだった。 経緯 わたしはいまレガシーなコードに囲まれている。 もちろんテストもほとんどないピカピカのレガシーちゃんである。 レガシーちゃんは「Ctrl+F5 & tail -f 駆動開発」により開発が進められており、日々進化している。 このまま進化をつづけるといつかモンスターになり(もう軽く怪獣っぽいが)、開発スピードがどんどん遅くなり、メンテナンスやバグつぶしでエンハンスとなるような開発ができなくなる。このままじゃマズい...。 こういった事態を一新すべく、手探りながら私含め数人の先輩たちで「DevOps」に取りかかることになった。 バズワードにもなっているが「DevOps」とは、 従来型のシステム管理や調達(ITILを含む)といった、保守的でプロセスを中心に据えた運用からよ>り戦略的でアジャイルな、そして自動

    DevOpsなんてくそくらえ - razokulover publog
  • ・重曹うがいの効果凄すぎワロッタwwwwwwwwwww : VIPワイドガイド

    虫歯予防 歯周病予防 歯肉炎改善 歯槽膿漏改善 口内炎完治 舌苔除去 口臭予防 しかも初期の虫歯なら完治させてしまうwww 凄すぎwww

    ・重曹うがいの効果凄すぎワロッタwwwwwwwwwww : VIPワイドガイド
  • Snap.svg - The JavaScript SVG library for the modern web.

    Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking

  • D3.js の Data-Driven な DOM 操作がおもしろい

    D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG

    D3.js の Data-Driven な DOM 操作がおもしろい
  • JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる!

    WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。

    JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる!
  • JavaScript Garden

    JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献

  • http://enja.studiomohawk.com/2013/07/06/css-architecture/

    DEAD_MAN
    DEAD_MAN 2013/10/23
  • HTTPリクエスト数削減テクニック1: インラインイメージ編

    はじめに こんにちは、クラスメソッド株式会社の野中です。 前回の『Webサイト高速化に必要な画像形式の基礎知識』では、基的な画像の書き出し方法について紹介しました。 この回からは数回に分けて、HTTPリクエストの削減テクニックについて触れていきます。 インラインイメージ CSS Spriteとイメージマップ SVGとWebフォントアイコン 画像からCSS3 記事では「インラインイメージ」の基的な知識と使い方、使いどころについて解説します。 対象者 今回の対象者は主にコーダー、フロントエンドエンジニアです。デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 インラインイメージとは インラインイメージとは.gifや.pngなどをHTMLからリンクして読み込むのではなく、画像を文字列に

  • レスポンシブWebデザインでテーブルを使う時の小技

    tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

    レスポンシブWebデザインでテーブルを使う時の小技
  • Ruby Hacking Guide を Kindle で読めるようにする - Stats of the Rivers

    Rubyソースコード完全解説 というがあります。 その名の通り Ruby 処理系のソースコードについて解説もので、 Ruby Hacking Guide (略して RHG) という名称でも知られています。 他に類を見ない日語で書かれた言語処理系ソースコード解説ということで非常に貴重なです。 さて、このは2002年に出版され、残念ながらすでに絶版となっているこのですが、ありがたいことに2004年に著者の青木峰郎さんが HTML 形式で文を公開*1されていて、今でも全文を読むことができます。 でもやっぱり Kindle で読みたいので Kindle 用の .mobi ファイルをつくることにしました。 基的には、以下の流れで .mobi ファイルを生成します。 RHG の HTML 版のアーカイブをサポートページからダウンロードする .mobi ファイル生成のためのコマンドラインツ

    Ruby Hacking Guide を Kindle で読めるようにする - Stats of the Rivers
  • ユーザがそれを選ぶ理由

    この前たまたま夜中にプログラミングに疲れ果てて死にそうだったんですよ。そして、ちょっと気晴らしでもするかと思ってネットを徘徊していたところ、ちきりんさんがはてなのオフィスを訪れたという話を読んだ。 はてな訪問 – ちきりんの日記 これがサービス提供者とユーザ視点という観点でみると非常に面白いなあと思いまして、いつものごとくサービス開発にどう生かせばいいかとうんうん考えた事を書いてみたい。 この記事のなにが興味深かったかを説明すると、ちきりんさんがはてなダイアリーを使い続けている最も重要な理由が、”日付が分りやすい”という理由らしい。 これには「そんなことが理由なんですか?」みたいな顔をされましたが、私に言わせると、「それ以外にはてなでブログを書く理由って何があるんですか?」って感じです。 もちろんはてなダイアリーはブログとして最低限の水準をクリアしてたんだろうけど、ちきりんさんにとっては”

    ユーザがそれを選ぶ理由
  • じょうずなワニのつかまえ方 | 文字の手帖

    1986年『じょうずなワニのつかまえ方』(ダイヤグラムグループ著、バベル・インターナショナル訳) 初版が、株式会社主婦の友社から出版されました。 「いまは無用の知識でもいつか必ず役に立つ!」という内容で、モリサワをはじめとする国内の主要な フォントベンダーのいろいろな書体を駆使し、項目ごとに書体・級数を変えて組んだ、 文字の見帳としての機能もありました。 現在、再編集され扶桑社文庫より文庫が刊行されています。 無人島でのひまつぶしに、都会生活でのサバイバルに、そのためのアドバイスと未知の情報をあなたに。 会話を続かせるのが苦手なあなたに、子供に自慢したいお父さんに、デザインのアイディアソースに… 話題づくりのネタとして、是非ご一読ください。 表題の「ワニをつかまえるための方法」から 「レオナルド・ダ・ビンチの秘密を読みとる方法」「花の色を変えるには」 「クマにダンスを教えるには」「ロウ

    じょうずなワニのつかまえ方 | 文字の手帖
  • 電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング~口コミで評判の当たる電話占いサイト紹介~

    小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。

    電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング~口コミで評判の当たる電話占いサイト紹介~
  • 15 Useful Code Snippets for Smartphone Website

    2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ

    15 Useful Code Snippets for Smartphone Website
  • 外部CSSを1枚追加して、ブログをスマホ最適化する5つのフロー | Mnemoniqs Web Designer Blog : Web Design and Web Development

    レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化するまでの流れを書いておきます。スマホ用のCSSをスマホにだけ読み込ませて、全体のCSSを上書きするだけなので、ブログのデザインによっては結構手軽に出来ます。 はじめにスマホ最適化後の要素配置を考える <head>にviewport設定とスマホ用CSSの記述を書く 固定幅をリキッドデザインで組みなおす フォントのサイズ、マージン、中央・水平揃えを調整 画像を2倍のサイズで用意する はじめにスマホ最適化後の要素配置を考える スマホは画面も小さいし、容量が重いとそれだけページの表示速度も落ちます。 ロゴ・メニュー・記事など最低限の要素だけ残し、あとはdisplay:none;で消してしまいましょう。 このブログのトップだと、オレンジで囲んだのがスマホで表示させない部分です。 残った要素を、最