The New Rules of Form Design | UX Booth
Every day, we use forms for essential online activity. We fill them out to complete purchases; to sign up for email lists, social networks, and more; to participate in discussions; and to describe that oh-so-delicious looking photo of our lunch. It’s hardly hyperbole to say they’re the lifeblood of digital information sharing. For many years, however, with few improvements to be found, forms have
New community features for Google Chat and an update on Currents
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です - Qiita
はじめに JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作ってGitHub Pagesを作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。 FirefoxのBugzillaを見ていたら、984796 – SVG path getTotalLength returns large incorrect numberでたまたま見つけた bl.ocks.org - aboutが便利だったので紹介します。 使い方 index.html というファイル名でGistを作成します。 あとは、GistのURLの https://gist.github.com を http://bl.ocks.org に置き換えてアクセスすれば表示されます。 bl.ocks.org - aboutに上げられている https://gist.github.co
[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox
demo: video YouTubeの動画もさまざまなアニメーションで表示できます。 Stackboxの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjqury.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../build/css/stackbox-docs.min.css"> </head> <body> ... <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../build/js/stackbox-docs.min.js"></script> </body> Step 2: HTML まずは、モーダ
Google HTML/CSS Style Guide まとめ - Qiita
Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ
コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タブとコンテンツは1セットでリスト要素で実装します。 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">タブ 1</label> <div id="tab-content1" class="tab-content"> <p>コンテンツ 1</p> </div> <
HTML5 ドラッグ&ドロップでファイルをアップロード
--- プログラム修正しました (2014/03/30) ご報告ありがとうございました --- HTML5 のドラッグ＆ドロップ API と jQuery.ajax() を使って、 ブラウザ上にドラッグ＆ドロップしたファイルをサーバへアップロードする方法です。 ソースは GitHub へ上げました。 https://github.com/yokano/dnd_file_upload 以下の流れで実現出来ます。 dropzone にファイルがドロップされる drop イベントが発生する イベントオブジェクトの dataTransfer からファイルを取得する FormData を作成してファイルを追加する Ajax でファイルを送信する <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ドラッグ＆ドロップでファイルアップ
ページ移動せずに内容を変更するタブを作る - [ホームページ作成] All About
タブ機能の作り方！ページ移動せずに内容を切り替えるタブ機能の作り方を解説。ページを移動することなくボックス内の表示内容を切り替える方法です。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。 タブを押すと一瞬で表示内容が切り替わる機能の作り方 ウェブページを移動することなく指定範囲の表示内容を切り替えられるタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。ジャンル別に記事を掲載するニュースサイトや、地域別にお知らせを掲載する情報サイトなど、多数のウェブページで見かけます。 このようなタブ機能は、ほんの少しのHTML＋CSS＋JavaScriptソースを記述するだけで簡単に作れます。そこで今回は、ウェブページ上にタブ機能を作る方
![ページ移動せずに内容を変更するタブを作る - [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/4c621a8552ae299b9a45d8ca562dbec825a4cb9a/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F6%2F9%2F201710111504%2Ftopimg_original.png)
テストを書かないテスティングツール「Porky」をリリースしました - Qiita
コンセプト テストを書かずにテストの自動化を実現する 主な用途 リグレッションテスト 一部を修正したときに他に影響がないかを確認するときに効果的です テストの登録 下記の関数をテストケースに登録する場合を考えます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg
テンプレートエンジンの話 #jjug
re-dzine.net situs togel online toto 2023 -