読者です 読者をやめる 読者になる 読者になる

頭の中は異空間

生活を日々ハックしてよりよくするブログ

jQuery、JSまわりでよく起こすであろうバグをざっくりと。

バグの温床 data, attr, propでのデータ取得(get)/更新(set) $(this)の中身 id読み込み時の挙動 true/falseの空判定 null.~~ find, closest等による要素取得 自由度が高いからと言って好き放題やらない 他の酷い例 焦ったり急いでコーディングしてると忘れが…

AWSでのサービス制作(申し込みフォーム) - AWS Lambda/API Gateway/S3/DynamoDB/SES/CloudFront/ACM/Route 53

概要 IAM Role準備 ユーザー作成 グループ作成 IAM Roleでログイン 独自ドメイン取得/SSL準備 API形だけ作成 実データ配置(S3) S3へのPOSTアクセス キャッシュコントロール テーブル用意 Lambda関数作成 Configure triggers Configure function Lambda funct…

wordpressでそれっぽい企業用サイトを作るために

初期状態 見た目の修正 コメント欄を消す サイドバーを検索欄以外全て消す タイトルを消す フッターを修正する ナビゲーションバーの配置 お問い合わせフォーム デザインの追加(style.css) 画像フォルダ整理 ちょっとしたレスポンシブデザインに。 設定の修…

CSSデザイン比較その2 - float/position

表示結果 no float code HTML CSS 総括 引き続きCSSの比較。今回はちょっと変わって、要素の左右寄せの話。 有名なサイトでChromeで要素を検証、とかするとよくfloat: leftとかclear: bothとか目にすると思います。 floatは画像の左右にテキスト回り込みをさ…

CSSデザイン比較その1 - box-shadow

これは、デザイン追加時に「あれどうなるんだっけ?」って思う微妙なデザインを分かりやすく、視覚的に比較する(微妙に韻を踏んでる)シリーズです。 いちいち使い方とか結果をググるのも面倒だし、他で使われてるのを見ても効果が分かりづらかったりしますか…

BackboneJS, AngularJS無しで外部HTML読み込みするコード

どうも。 HTMLの一部を動的に書き換える方法としてはappendやbefore, ajaxなどといった手段があります。HTMLを動的に書き換えるのには、BackboneJSとAngularJSを使った書き換え方法もあります。でも新たにライブラリを習得するのも面倒なのでもっと簡単にや…

【CSS, JavaScript】ちょっとしたネタや知ってると便利な知識

どうも。 知っておくことでちょっとした落とし穴を回避出来そうな知識と少しだけ便利なテクニックをば。 divの中身を敷き詰める JSのイベント発火 イベントを登録してそれを発火させるとき、普通はクリックしたら~とかマウスオーバーしたら~という条件で発…

JSっぽい挙動をCSSだけで表現 - チェックボックス、ラジオボタン

HTMLとCSSのみで便利な挙動と見た目を作ってみました。 比較的よく使うフォームの一部をCSSで装飾してやることによって、よりスタイリッシュさを出します。大事なことは、JSを一切利用していないこと。つまり、バグで動作しないリスクがないということです。…

html動的編集後の要素にイベント追加するには

どうも。 JavaScript(以降JS)でappend, prepend, after, before等でhtml要素を動的に追加/削除した場合に、その変更後要素に対してイベントを追加する時に困ることがあると思います。ajaxなんかもそうですね。 コード上はどう考えても動くはずなのに、どうな…

JS, CSSでクリックしてラベル選択を書いてみた

どうも。 UIの一つとして使える、クリックしてラベル付けをする挙動をJS, CSSを用いて実装してみました。jQueryで書いててネイティブに起こすのは大変なのではてぶ上では実装してませんが、codepenとかですぐ試せるはずなのでお試しあれ。 HTML <div class="wrapper"> <div class="contents"> <div class="panel_area" id="panel_upper"><ul class="proposed"></ul></div> <div id="panel_lower"> <ul class="proposed"> <li></li></ul></div></div></div>

クリックすると消えるゴーストボタンの作成

どうも。 ふとしたきっかけでゴーストボタンを作ることになったので、ちょっとチャレンジ。せっかくなので、CSSのみで作るのでなく、クリックすると消えるタイプを作ってみようと思います。ニコ動の再生ボタンと一緒に表示されてるアレみたいなものです。 JS…

HTML上に書いたコードをtermnialの様に色分けするロジックをJSで書いてみた

どうも。 何らかのコードをhtml上に記載する場合、それがメモ帳みたく単なる文字列になってたらなんか残念ですね。 そこで、すぐ思い当たる点として、有名なgoogle code prettifyを使うといいでしょう。 github.com でも、それだと話が終わってしまいます。 …

インラインイメージ生成と画像リアルタイムアップロード

どうも。 画像のアップロード機能って便利ですよね。そして、画像を表示する時のinline imageも合わせて使えると、サイトが大規模化した時に対処しやすい。一度に表示する画像数が増えると、レスポンスひどいですからね。 でも一から作り直そうとするとやっ…