1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
クラウドを支えるこれからの暗号技術
『クラウドを支えるこれからの暗号技術』 本書は公開鍵暗号に続く、新しい暗号技術を紹介します。 対象読者 『暗号技術入門』（結城浩）を読んで最先端暗号理論はどうなってるのだろうと興味を持った方 「入門書に載っているRSA暗号は安全ではないので使ってはいけない」ということを知らない方 Hash(secret key||message)で認証してはいけない理由（SHA-2とSHA-3の違い）を知りたい方 楕円曲線暗号の楕円曲線を直感的に把握したい方 最近ちょいちょい聞く「準同型暗号」って何だろうと思っている方 楕円曲線といえばy2 = x3 + ax + bという式が唐突に出てくるけど何故なのと疑問に思った方 EdDSAって何? ECDSAの書き間違い?と思ったらEdwards曲線が出てきて、それ何だろうと思った方 暗号で使われる数学の話をきちんと理解したい方 などなど。 購入 秀和システム 正
ベイズ統計 - HELLO CYBERNETICS
はじめに データとモデル 確率モデル 確率モデルを作る 複雑なモデルを使うことが最善手であるか モデルの具体的な作り方 モデルの仮定 アンサンブルモデル 点推定モデル 最尤推定 制約付き最尤推定※ （最大事後確率推定） ベイズ予測分布と点推定 ベイズ統計学 ベイズ予測分布を得ることの意義 ベイズ統計学の主題 特異モデルと正則モデル ベイズ統計学のまとめ はじめに ベイズだの頻度論だので盛り上がっているので、ぶん殴られる覚悟で書いてみます。 データとモデル 観測値がランダムに見える場合、それを確率変数 $X$ として扱います。 さて、今、$X$ には我々が知ることのできない真の分布 $q(X)$ があるとしましょう。もしも、$X$ を無限回観測し満遍なくデータを集められるとすれば、$q(X)$ の形状を把握することができるかもしれません。 ところが、そんなのは幻想であって実際に無限回の観測を
HTML+CSSコーディングの言語化 - Qiita
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
Flutter所感 - タオルケット体操
諸事情によりしばらくFlutterでアプリ作って感じたことをいくつか。 良いところ 1. ちゃんと動く みなさんも今までに出ては消えていくiOS, Android両方で動くアプリ作れるよ系ソリューションで色々なお気持ちを発生させてきたかとおもいますが、Flutterの出来の良さはピカイチ感があります。Flutter Engineすごーい！ 大抵のアプリが必要とするような機能（当然全てではない。例えばパスワード管理との連携とかは存在しない）であれば、各プラットフォームネイティブに手を入れることなくちゃんと動く。自前レンダリングと聞いて心配していたパフォーマンスも普通に悪くない。なんて素晴らしいんでしょう。 Flutterの良さはそこに尽きるとおもいます。 2. すぐ動く いろいろな意味で。 まずコンパイルがそこそこ早いです。 そしてSDKが用意していくれているWidgetの種類がかなり豊富で
デザインシステムを作る前にデザインのシステムを理解しよう
デザインシステムという名の成果物が抱える問題 デザインツール上で UI コンポーネントを並べただけでも『デザインシステム』と呼ぶくらい言葉が広まった今日。2017年に記事にした頃と比べると随分変わったという印象があるものの、デザインシステムと成果物が密接になり過ぎていると感じることがあります。 デザイン組織の成熟度に合わせて施策を変えるべきだと思いますが、事例を検索をしたり書籍を読むと、Lightning Design System や Carbon Design System のような完成されたものが出てきてしまいます。こうした状況だと「デザインシステムを作る」目的が上記のようなサイトを作ることになってしまう場合あります。つまり、デザインシステムとは完成された何かを作り上げることが目的になっているわけです。 足元を見ないで理想を作り上げようとしていないか 事例で見かけるようなデザインシス
25年前の未来の言語の話 - Qiita
私ごとですが、12月の9日に50歳になりました。そこでというわけでもないのですが、25年くらい前のプログラミング言語の技術について書きたいと思います。お話は大学院で学んだ動的型付けの並列オブジェクト指向の実装に偏っています。 背景 時は1990年代前半、今と同じようにCPUの性能は頭打ちになり解決策は並列化しかないということで盛んに並列処理の研究がされていました。もっとも、その後CPUは1000倍以上速くなっているのですが。 1981年にBYTE誌でSmalltalk-80を衝撃的に紹介されたのをきっかけにオブジェクト指向が注目されC++によって実用レベルで使われだしてきました。それとは別にSmalltalkのごく初期の実装（-72）にインスパイアされた、オブジェクト指向によく似た並列な計算モデルとしてアクターモデルというものが1973年に提唱されていてアクターモデルを応用した並列処理言語
保育園にChaos Engineeringを提案した話 - Qiita
この記事は NTTコミュニケーションズ Advent Calendar 2019の14日目の記事です。 昨日は @yuki_uchida さん の記事、BERTを理解しながら自分のツイートを可視化してみるハンズオン でした。 はじめに 当初は Kubeinvaders の解説記事を書こうかなと思っていたのですが、先日うちの子供が通う保育園から、うちの子供に対するインシデントの報告を受け、今後の対策として保育園にChaos Engineeringを提案するという我ながら変なことをしてきたのでそのことを書きます。（※完全に会社に関係のない私事です） 保育園からインシデントレポートを受けたので、今後の対策案としてChaos Engineeringを提案してきた — まひと / Mahito (@Mahito) November 29, 2019 保育園で起きたインシデントについて 妻からの電話
z-index との安全な付き合い方 | Basicinc Enjoy Hacking!
z-index と聞いてヴェェー！！って思うみなさん、こんにちは。 ベーシック アドベントカレンダー 9日目（大遅刻）です。 今回は z-index と安全に付き合うおはなしをします。 z-index: 9999; というラノベ主人公みたいな値があまりよくないと感じつつも、予期せぬ要素同士で起こる z-index バトルをどう回避すればいいのか、もにょもにょしますよね これを解決していきます。 私の脳内で運用しているだけなので、提案として「ふーん」程度に受け止めていただければと思います。 結論は『 z-index を設定した親要素（近い先祖要素）に isolation: isolate; をする』です。 z-index の苦しみ 『この要素を前面に出したい』 .tuyoi { z-index: 1; } 『この要素を必ず最前面に出したい！』 .motto-tuyoi { z-index:
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
Cross-Site Scripting (XSS) Cheat Sheet - 2024 Edition | Web Security Academy
Cross-site scripting (XSS) cheat sheet This cross-site scripting (XSS) cheat sheet contains many vectors that can help you bypass WAFs and filters. You can select vectors by the event, tag or browser and a proof of concept is included for every vector. You can download a PDF version of the XSS cheat sheet. This is a PortSwigger Research project. Follow us on Twitter to receive updates. Downloaded
SMSで送信元を偽装したメッセージを送る
送信元表記が送信者IDのケース SMSのメッセージを受信した際に表示される送信元には、電話番号の代わりに任意の英数字も表記できる。この英数字の送信元表記を「送信者ID（Sender ID）」という。JC3の図では 通信事業者Ａ が送信者IDに当たる。 なお送信者IDの利用可否は受信側の通信事業者の対応状況によって異なる。Twilioの販売パートナーであるKWCの説明によると、日本国内ではNTT DOCOMOとSoftBankが送信者IDに対応し、KDDIは対応していないとのこと²。私はKDDIの回線を所有していないため、受信側がKDDIの電話番号を使用している場合の挙動は検証できていない。 まずはiOSの公式メッセージアプリに届いていたAmazonからのメッセージのスレッドで偽装を試みる。送信者IDは Amazon となっているため、TwilioでSMSを送信する際のFromの値に Ama
就職差別につながるおそれのある不適切な質問の例
面接者の中には、面接という雰囲気からくる緊張を少しでも和らげたいということから、次に示すような質問をする場合があります。 しかし、受験者としては、下記の「なぜこのような質問はいけないのか」に示すように、ひとつの質問からかえって緊張したり、気持ちが沈んだりして、それが態度や返答に出てしまいます。ひいては、そのことが採否の判断基準に大きな影響を与えてしまうことにもつながります。 また、企業の方からは質問しないのに、他の質問に関連して、受験生の方から「家族の職業」「親の勤務先」などについて話し出すケースがあります。このようなときは、趣旨を応募者に説明し、これらのことについて話す必要はないことを一言伝えてください。 具体的な質問例を挙げて、説明します。 1. 本籍に関する質問 ● あなたの本籍地はどこですか。 ● あなたのお父さんやお母さんの出身地はどこですか。 ● 生まれてから、ずっと現住所に住
エンジニア・コミュニティにはオープンであってほしい - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
エンジニアの集まるカンファレンス（参加者の多くはソフトウェア・エンジニアだが、ものづくりするひとすべてを対象としたカンファレンスなので、暫定的に「エンジニア」という括りで話します）において、マッチングアプリ上で女性の外見を判別して自動でいいねを押すという発表がなされている現場に居合わせた。このエントリの目的は特定の発表自体の是非を判断することではないので、リンクしない。「リンクしなければそもそもその発表の是非の判断ができないじゃないか」という向きもあると思うけれど、少し調べればわかることだし、その発表自体の是非を議論したいなら、調べるくらいのコストをかけて別のところでやってくれたら嬉しいと思っている。 さて。少なくとも今回参加しているカンファレンスのジェンダーバランスは、めちゃめちゃ偏っている。おそらく、多くの技術系のカンファレンスにおいても、そうなのではないかと思う。これ自体がいびつであ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540
ネットワーク構成図を考える: NW図の基本とモデル指向NW図のススメ / OSC_2020_Tokyo_Spring
オブジェクト指向のその前に-凝集度と結合度/Coheision-Coupling
https://developers.google.com/web/tools/setup/workspace/setup-devtools
https://csslayout.io/
CSS設計全盛期に学ぶフロントエンド設計
