自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して
HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色
スプラトゥーン3の通信に欠かせない、UDPとNAT越えを理解しよう
2022年9月9日、「スプラトゥーン3」が発売されました。とても楽しみにしていたのですぐに買いました。発売から１月半ほどたってこの文章を書いていますが、いろいろなステージで様々なブキを使ってインクを塗り合い楽しくプレーしています。ちなみに今のウデマエはS＋30になったところです。 この特集は、人気のスプラトゥーン3を通して、最新の通信技術の基本を学んでしまおうというものです。前半の今回はスプラトゥーン3を含むオンラインゲームの通信技術を解説します。後半となる次回は、実際にスプラトゥーン3のパケットをキャプチャーして、それらの通信技術が実際にどのように使われるのかを見ていきます。 なお記載内容については、筆者や編集部独自の考察や推測によるものであり、任天堂の公式見解ではないことを明記しておきます。 オンラインゲームを実現する通信技術、UDPとは 一般的なコンピューターが通信を行う主な方法にT
GraphQL実践ノウハウ/graphql-knowhow
GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql
フルスタックエンジニアから「フルサイクルエンジニア」へ。和田卓人氏による「組織に自動テストを根付かせる戦略」（その3）。ソフトウェア品質シンポジウム2022
フルスタックエンジニアから「フルサイクルエンジニア」へ。和田卓人氏による「組織に自動テストを根付かせる戦略」（その3）。ソフトウェア品質シンポジウム2022 9月22日と23日の2日間、一般財団法人日本科学技術連盟主催のイベント「ソフトウェア品質シンポジウム2022」がオンラインで開催され、その企画セッションとして行われた和田卓人氏による講演「組織に自動テストを書く文化を根付かせる戦略（2022秋版）が行われました。 講演で、企業の業績はソフトウェアの開発能力に左右されるようになってきていること、その開発能力を高める上で重要なのがコードの「テスト容易性」や「デプロイ独立性」であると和田氏は指摘。その上で、それを実現させるような「自動テストを書く文化」をどうすれば組織に根付かせることができるのか、講演の後半ではこの本質的な議論へと踏み込みます。 本記事は、2時間におよぶこの講演をダイジェスト
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
Neovimを一瞬でVSCode並みに便利にする - k0kubun's blog
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
DDDにおける値オブジェクトの位置付け(モデルとコード事例あり)[ドメイン駆動設計] - little hands' lab
株式会社ログラスの松岡(@little_hand_s)です。 最近、値オブジェクトに関して書かれているブログ記事を見ますが、 SNSなどにおいてDDDにおける値オブジェクトについて誤解されているような反応が見受けられました。 そこで、この記事では「DDDにおける値オブジェクトの位置付け」について解説し、具体的なモデル・コードを用いながら誤解を解いていきたいと思います。 なお、値オブジェクトに関する詳細な説明はここでは行いませんのでご了承下さい。 DDDの目的 まず最初に、DDDの目的について確認します。 DDDの目的は、モデリングを通じてソフトウェアの価値を大きくすることです。 これに関しては、こちらの記事で詳細に解説しているのでこちらをご覧ください。 ドメイン駆動設計は何を解決しようとしているのか - little hands' lab ここで大切なのは、モデルは一回のモデリングで完成形
![DDDにおける値オブジェクトの位置付け(モデルとコード事例あり)[ドメイン駆動設計] - little hands' lab](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6ececc2d05edbf2c4b45bcb603bdecda34fde46/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fl%2Flittle_hands%2F20220815%2F20220815005816.png)
リーダブルテストコード / #vstat
「リーダブルなテストコードについて考えよう ～VeriServe Test Automation Talk No.3～」で使用したスライドです。 https://veriserve-event.connpass.com/event/243280/ 登壇動画はこちらで公開されています。 https://vimeo.com/742517199/e001ac43ac ＜参考リンク＞ Twitter https://twitter.com/jnchito Blog https://blog.jnito.com/ Qiita https://qiita.com/jnchito プロを目指す人のためのRuby入門［改訂2版］ https://gihyo.jp/book/2021/978-4-297-12437-3 Everyday Rails - RSpecによるRailsテスト入門 https://
開発組織のマネジメント
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
アサインは突然に -チームリーダーになって気づいたこと- - MonotaRO Tech Blog
はじめに こんにちは。モノタロウで開発を担当している渡邉です。半年前に初めて開発チームのチームリーダーになり、スクラムを使った開発を行ってきました。今回はこれらの取り組みを振り返ってみようとおもいます。 はじめてのリーダー業って不安ですよね。どう行動すればよいのか、何を変えるべきなのか、うまくチームの目標を達成できるかなどなど・・・。私自身、そのような不安をかかえてチームリーダーになりました。 しかし、開発プロセスとしてスクラムを取り入れたことにより、想像していたよりスムーズにチーム運営を進めることができました。これから初めてリーダー職につく方や、スクラムをこれから取り入れてみようかなと思っている方の参考になれば嬉しいです。 アサインは突然に・・・ ある日のグループ連絡会で、当時のリーダーから突然の連絡がありました。 これまでのリーダーは経験豊富で、技術面でも行動面でもチームを率先してまと
Value Objectについて整理しよう - Software Transactional Memo
Value Objectとは何であるか? マーチン・ファウラーのPatterns of Enterprise Application Architecture(PofEAA)やエヴァンス・エリックのDomain Driven Design: Tackling Complexity in the Heart of Software(DDD)が原典であるが、PofEAAではこう切り出している。 When programming, I often find it's useful to represent things as a compound. プログラミング時は物をcompound(合成物)として表現すると便利なことがしばしばある。 例えば2次元空間上での座標のように複数のメンバ(属性)を持つ物は便利である、と。しかしそれらを比較する方法は一意ではない、そこで Objects that a
コミットメッセージ規約
conventional-commits.md Conventional Commits コミットメッセージのバリデーションには commitlint ( https://github.com/conventional-changelog/commitlint ) を使用します。 またコミットメッセージは次の規約に準拠します。 https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional Format コミットメッセージのフォーマットは次の通りです。 <type>[optional scope]: <subject> [optional body] [optional footer(s)] type, subject は必須です。body, footer を入
Gitのおすすめエイリアス5選 - 詩と創作・思索のひろば
緊急新人エンジニア応援企画！ ということで自分が Git のエイリアスとして設定している便利コマンドを紹介していく。 直前のコミットに追いコミットする (git fixit) git commit --amend --no-edit もろもろ整えて git push しよう、とすると「あっちょっと修正したい」となるのはよくあること。その際いちいちコミットメッセージを書いて rebase するかというとそんな面倒はとりたくなく、一撃で終わらせたい。--no-edit でコミットメッセージを編集せずに --amend できる。 git fixit に設定している。git commit の引数をそのまま受け付けるので、git fixit -a や git fixit <file> のように使える。 メインブランチに戻る (git com) f() { remote_head=$(git symb
コードレビューで嫌われる人の特徴7選 - Qiita
「コードレビュー・・・うっ頭が」となっているそこのアナタへ。 先週弊社キカガクで人生初の実務コードレビュー体験をしました。 控えめに言って最高すぎました。 お互いが「気持ちよく・効率的に」学びを深められるように組まれた一級品のレビュー構成。 細部に渡る心遣いとテクニックの為せる技だと思いました。 そこで私は考えた ー。 真逆のことをしたらどうなるんだろう？ 想像してみたらなかなかブラックな開発環境が脳内で出来上がりました （大学時代のコードレビュー現場そっくりだなと思ったのは内緒）。 自分がコードレビューに参加する時こうはなるまいぞいう戒めを込めて紹介していこうと思います。 具体的な改善案も5選紹介しています。 共に愛され系コードレビュアー ＆ レビューイを目指しましょう！ 想定している対象読者 「もうすぐ初めてコードレビューを受ける予定で不安・・・」 「コードレビューを行うことになったけ
インテルとARMのCPUに脆弱性「Spectre-v2」の悪夢再び、新たな攻撃手法
2017年、インテルやARMのCPUに情報窃取の脆弱性が存在することが明らかになった。通常、CPUのプロセスはほかのプロセスの処理しているデータを読み取ることはできない仕組みになっているが、ある機能を悪用することで実行中のプロセスから本来は入手できてはいけないデータを窃取できることが明らかになった。この仕組みを悪用して複数の攻撃手法が開発されたが、「Spectre-v2 (またはBTI: Branch Target Injectio)」と呼ばれる手法が最も危険な攻撃方法と認識されている。 これら脆弱性に対して、オペレーティングシステム側が対策を導入したほか、CPUメーカーがハードウェア緩和策（eIBRSやCSV2など）を導入した。この緩和策は意図した通りに機能するが、どうやら研究者はこの攻撃手法を復活させることに成功したようだ。 研究者らは「Branch History Injection
RESTful API との比較で GraphQL API を作ることの難しさ｜qsona
上の資料でも書いてるんですが、要点を言うと以下のようなことを主張している。 API の設計手法として、以下の2つのパターンが考えられる ・Resource-based API ・Usecase-based API Usecase-based というのは要はクライアントの要求にそのまま沿った形で API を作るということだ。しかし、UI やその他クライアントの要求というのは変わりやすいものなので、そのたびにいちいち API を変更しないといけないとか、API に一貫性がなくて使いにくいとか、1つの endpoint で多数の要求に対処する "神API" が作られてパフォーマンスが悪化する、というような問題が起こる。 したがって、注意深く RESTful API を設計すると Resource-based になる。ここで言っている Resource というのはテーブル設計にやや近いが、そのまま
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNode.jsを用いることで、HTML/CSS/JavaScriptのWebテクノロジーによってデスクトップアプリケーションを開発できるのが最大の特徴です。 いまやElectronは、Visual Studio CodeやMicrosoft Teams、Slack、GitHub Desktop、そして最近話題のNotionなど、さまざまなアプリケーションに採用されています。 このElectronの優れた特徴を備えつつ、よりメモリ消費量が小さくファイルサイズもコンパクトで、高いセキュリティを備え、柔軟なライセンスを実現しようと開発されたのが「Tauri」です。 Tauriは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.mhlw.go.jp/content/000941671.pdf
「界隈がざわつくほど超進化したPMBOK第7版」に私たちはどう取り組むか
