この記事で伝えたいこと（忙しい人向け） 新人ほど「保守していく」ことの感覚が腹落ちしにくいのではないか説 我々は保守しやすいコードを書くべきであり、保守しやすいコードを達成するための手段として原理原則やデザインパターンが存在している 保守ってなんで必要なんだっけ？という体系的な理解を持ったうえで、具体的なテクニックを学んでいくことが大事 // 追記（2023/12/9） なんとミノ駆動 さんにコメントいただけました。 もちろん良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方は読んで影響を受けてます。 とってもうれしい。 想定読者 新卒 ~ ２年目くらいまでのプログラミング初心者 Webアプリの保守開発をしているエンジニア 3ヶ月前くらいの自分（未経験からエンジニアになって１年くらい） こんなことないでしょうか 先輩などから原理原則の観点を共有してもらったり、
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
ルールは現場で死にました - The Rules of Programming の読書感想文 - じゃあ、おうちで学べる
本日は人生の数ある選択肢のなかから、こちらのブログを読むという行動を選んでくださいまして、まことにありがとうございます。 はじめに プログラミングの世界には多くの指針や原則が存在します。Chris Zimmerman氏の「The Rules of Programming」（邦題：ルールズ・オブ・プログラミング ―より良いコードを書くための21のルール）は、不変の知恵を凝縮した一冊です。これらの原則は、多くの開発現場で活用できる有益な内容となっていると思いました。 The Rules of Programming: How to Write Better Code (English Edition) 作者:Zimmerman, ChrisO'Reilly MediaAmazon 本書は、大ヒットゲーム『Ghost of Tsushima』などで知られるゲーム制作スタジオ、Sucker Pun
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
先達エンジニアに学ぶ 思考の現在地 Online Conference の発表資料です https://findy-code.io/events/v7KebEabaBDzh?fr=event_20240416
1行で発狂するコード - Qiita
人は1行の記述で死ぬこともある 公開からコンスタントに閲覧をいただいている以下の記事。需要がありそうなので、もう1つ記事を書いてみようと思う。 題材は前回同様のJavaScriptのクソコードではあるが、前回は冗長を極めたクソコードであるのに対し、今回はたった1行である。 1行なのに、なんと示唆深いに富む(決してほめていない)コードだろうか。 不可思議なコード では、実際に見てみよう。 return a = a >= 10 ? 10 : a >= 5 ? 5 : a >= 3 ? 3 : a >= 2 ? 2 : 1, z * a; これを見て、何が return で返されるかわかります？ 代入演算子 最初見たとき、代入文 a = ××× の評価値って何になるのかな？ a が return されるのかなと思いました。 割り当て操作は、割り当てられた値として評価されます。 JavaScrip
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
こんにちは。GitHub Copilotを先日初めて触って、感銘を受けたMNTSQ代表の板谷です。MNTSQの代表をしておりますが、現役の弁護士でもあります。 なぜ私が、GitHub Copilotに感銘を受けたかというと、「プログラミングの LLM による進化」は、契約という言語をコーディングするためにもドンピシャで使えそうだと感じたからです。 例えば、GitHub Copilot では、自分の過去のコードを参照して、最適なコードをサジェストしてくれます。 これは、契約に関わるすべてのビジネスパーソンが求めていたものです！契約の 99.9%が過去のコードの使い回しであるにもかかわらず、毎回ゼロからコーディングするのが本当に苦痛だからです。ちなみに、前回契約と理由なく diff があると取引先に怒られます。笑 しかし、GitHub Copilot 的なものがプログラミング言語だけでなく契約
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
自分も含めて社内に詳しい人がいない領域のコードをいじることってあるよね。特に歴史の長いサービスだと当時触っていた人が誰もいないとか。仮にいたとしても1年くらい触ってないとほとんど忘れてしまって知らないのと同じような状態になっていたりする。 自分もそういうことが何度もあって、雑にスタンスややってることをまとめておこうと思う。 前提のスタンス 「これを倒したら俺がこの領域で一番詳しい最強になるんや」という気持ちを持ってる 詳しい人がいない状態で属人化とか気にしても仕方ない。まずは自分が詳しくなってから考えるでよい 自分用メモを作る キャッチアップしたことを書き残していく。ドキュメントじゃなくてSlackに垂れ流すでもいい 過去のドキュメント・やりとりを探す 全体像を把握できるドキュメントがないかを探すのを最初にやってる ここは近道はない。とにかく全部集めて全部読む気持ちで臨む Google D
思った以上に反響をいただき嬉しく思っています。SNSやコメントで言及していただいている構造化プログラミングとの比較や現代的なOOP開発への適応記事を執筆予定です。記事が完成しましたら自分のSNSで共有いたしますので、もし良ければフォローしてお待ちいただけますと幸いです。（記事を書くのは思考が整理されて良いものですね。） TL;DR データ指向プログラミング(DOP) とは、データとコードを分割してアプリケーションを設計・実装するプログラミングパラダイムのこと。 DOPの実装は、以下の原則に従う。 コードとデータを分離する 汎用的なデータ構造でデータを表現する データをイミュータブルなものとして扱う データスキーマとデータ表現を分離する 個人的にDOPは、バックエンドを宣言的プログラミングっぽく書くための現実的な解だと捉えています。実装の詳細は翔泳社より出版されている「データ指向プログラミン
Chrome の JavaScript はとても高速なことでも有名ですが、その実行エンジンは V8 と呼ばれます。V8 自体は独立したモジュールであり、Node.js 等にも使われております。 V8 が JavaScript を高速に実行する技術の一つが JIT (Just In Time) コンパイルです（一般的に JIT と呼ばれます）。これは、そのまま実行すると遅い JavaScript を実行中にリアルタイムに直接マシンコードに変換し（これが Just In Time と呼ばれる所以です）、途中からそのコードに入れ替えて実行することで高速化を達成しています。特に何度も実行される関数で効力を発揮します。 JIT という名前は聞いたことがあろうとも、実際に JIT がどのようなコードを実行しているのかを確認する機会は滅多にないでしょう。この記事では、実際に V8 の JIT の出力を確
お疲れ様です。 今日からは「Python だけで作る Web アプリケーション(フロントエンド編)」について部分いたします。 はじめに 設計方針 共通部分の作成 ログインページ 商品一覧ページ 商品詳細ページ カートページ 注文一覧ページ 注文詳細ページ まとめ 今回は10の記事に分けて投稿するようにします。 今日は「はじめに」について部分いたします。 なぜ本書を書いたのか 本書は主に以下のような方を対象にしています。 Web アプリケーションの構築経験がない新米エンジニア Python はかけるが、HTML/JS/CSS が苦手な Pythonista 細かい UI の設定はせず、検証・デモ用の Web アプリを短期間で作りたい開発チーム どうやって作ったか 対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。 Web アプリケーションの基礎知識 参考にしてもらえる品質
大吉祥寺.pm https://kichijojipm.connpass.com/event/314917/ https://blog.utgw.net/entry/2024/07/15/135648
こんにちは。わいけいです。 今回の記事では、生成AI界隈ではかなり浸透している RAG について改めて解説していきます。 「低予算で言語モデルを使ったアプリを開発したい」というときに真っ先に選択肢に上がるRAGですが、私自身もRAGを使ったアプリケーションの実装を業務の中で何度も行ってきました。 今回はその知見をシェア出来れば幸いです。 RAG（Retrieval-Augmented Generation)とは まず、 そもそもRAGとは何ぞや？ というところから見ていきましょう。 RAG（Retrieval-Augmented Generation) は自然言語処理（NLP）と特に言語モデルの開発において使用される技術です。 この技術は、大規模な言語モデルが生成するテキストの品質と関連性を向上させるために、外部の情報源からの情報を取得（retrieval）して利用します。 要は、Chat
はじめに 株式会社ファースト・オートメーションCTOの田中(しろくま)です！ 先日、 OpenAIからGPT-4oがリリース されました。 いろいろGPT-4oに関して調べていると、スピードが速くなっていたり、音声も直接扱えてマルチモーダル化が進んでいたりするようなのですが、画像に関して GPT-4-turboに比べ、認識やOCRの精度が向上している ようです。 製造業という観点からすると、これは 設計図面などに活かせるようになるのでは？ と思いました。 機械部品などの設計図面は以下のように、特定の方向から部品を2次元上に落とし込んだ形で書かれるのですが、部品本体を描いている図以外に、寸法や名称といった文字も含まれた画像になっています。 このような 図と文字の複合データにおいて、GPT-4oの進化は有効なのではないか と考えました。 ※画像元URL: http://cad.wp.xdoma
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
［速報］GitHub、組織のコードやドキュメントを学習しカスタマイズやファインチューニングが可能な「Copilot Enterprise」発表。GitHub Universe 2023
［速報］GitHub、組織のコードやドキュメントを学習しカスタマイズやファインチューニングが可能な「Copilot Enterprise」発表。GitHub Universe 2023 GitHubの年次イベント「GitHub Universe 2023」が米サンフランシスコで開幕しました。 1日目の基調講演で、Copilotが組織のコードやドキュメントを学習することで、カスタマイズやファインチューニングが可能になる「GitHub Enterprise」が発表されました。 Copilot Enterpriseは、外部に公開されていない組織内のコードやドキュメント、プルリクエストなどを追加でCopilotに学習させることで、組織内のコードベースに基づいたCopilotによるコードの生成や、Copilot Chatでの質問に対する回答が可能になるというものです。 さらに言語モデルそのものを組織
1. Intro 1.1 タイトルの答え それは，最初から"How"(どうやってこの問題を解決すべきか)だけを考えているからです． 最初に問うべきなのは"Why"(なぜこの問題が起きたか)です． このタイトルの問いも，なぜ？から始まっています．「どうやって自分でエラーを解決するか」だけを考えていると，問題の根本的な原因が分からないため，ずっと自分でエラーを解決することはできません． 1.2 Keyword 最初に自分に問いかけるべき言葉 〇 Why(なぜ？): なぜこの問題が起きたか ✕ How(どうやって？): どうやってこの問題を解決すべきか 1.3 背景 研究室では毎年，いつまでたっても自分でソースコードのエラーや出力の問題を解決できず，進捗が遅かったり開発をあきらめてしまったりする人が発生する．本記事では，なぜ自分でエラー・問題を解決できないのか？を明確にする． <注意書き> この
![[研究室向け]なぜ君はソースコードのエラーを自分で解決できないのか？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc9ae9dc576dac7161be1e28e1f8b0fb3d5bbc8b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU3JUEwJTk0JUU3JUE5JUI2JUU1JUFFJUE0JUU1JTkwJTkxJUUzJTgxJTkxJTVEJUUzJTgxJUFBJUUzJTgxJTlDJUU1JTkwJTlCJUUzJTgxJUFGJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgyJUI5JUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgyJTkyJUU4JTg3JUFBJUU1JTg4JTg2JUUzJTgxJUE3JUU4JUE3JUEzJUU2JUIxJUJBJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgxJUFFJUUzJTgxJThCJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05MjkxODQ4MWM1Y2M2ZWE1M2M3NTE4YTcwZTg2N2NmMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa29raTIwMjImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFjMGY0Mjc5NDg4YTRjNjE3YmJkN2UwMDM1YmIzYWNl%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D449e447b533b76e2a2cfa6d32f1a6826)
【魚拓】【番外編】Excelの知識しかない人をRDBの担当者にする：SQLの知識がなくてもJetBrains AIを利用してRDBをノーコード生成！｜kintoneにお...
取得日時: 2024年4月26日 11:31 取得元URL: https://note.com:443/vips_kintone/n/n0e17a70a4ee7 ビュー数: 37659 魚拓のみの表示 SHA-256 ❓ : 1a2aede20684cf873186d17706b4188c6107915b90b77677614c9045d5248f52
yamlでテストシナリオを書いてそのまま実行までできるAPIテストツールの新星 “runn” を試してみた | DevelopersIO
yamlでテストシナリオを書いたらそのまま実行できる……そんな夢のようなシナリオテストツール"runn"の紹介とやってみた記録です これまでのシナリオテストツールに対する課題感 シナリオテストツールといえば、 Cucumber や Gauge といったツールが有名です。 ですが、これらのツールは「シナリオファイル」とは別に、シナリオを実行するためのコードも書かないといけません。しかも、そのコードではAPIを呼び出す処理を特定のプログラミング言語を使って書かなければなりません。その中には、HTTP Clientを実際に操作するような処理も含まれます。 私は「シナリオテストがしたい」のであって、「シナリオに沿ってAPI呼び出しを行う処理を書きたい」のではありません。こういった課題感を、ここ数年ずっと抱えてきました。 そんなとき、ついに見つけたツールが "runn" でした。 APIのシナリオテ
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
こんにちは。ソーシャル経済メディア「NewsPicks」NewsPicks Stage.事業のエンジニアをしています、林です。 業務では Next.js / Rust / Go などを用いて、経済・ビジネス情報に特化した動画配信サービスであるNewsPicks Stage.の開発・運用を行っています。 はじめに 突然ですが、皆さんは自身のソフトウェアのライブラリアップデートは行えていますか？ 皆さんはどのようにライブラリアップデートを行なっていますか？ 新機能を試したくて？ npm iで失敗してから頑張る？ Renovate / dependabot が自動Mergeされる環境？ もしくは対応担当が特定の日にまとめてMergeする運用？ しかし多くの開発者は、アップデートに対して「うまくいっている」と言えないのではないでしょうか？自身も様々なプロダクトを開発してきた経験上、日々の中ではどう
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「
AWSの構成図をChatGPT(GPT-4V)に読み込ませてIaCコードを生成してみた | DevelopersIO
こんにちは、つくぼし(tsukuboshi0755)です！ 最近ChatGPTがGPT-4Vを発表し、AI業界がさらに盛り上がりを見せてますね。 GPT-4Vを用いる事で、ChatGPTがユーザ側から入力された画像を読み取った上で、応答を返してくれるようになります。 GPT-4V(ision) system card この機能追加により、なんと以下のようにAWSの構成図を読み取って、IaCコードを生成できる事が話題になっていました。 本日をもって引退します pic.twitter.com/fygAQDQ5kj — 電気ひつじ(onoteru) (@teru0x1) October 13, 2023 これを見て私もGPT-4Vを試してみたくなったので、今回はChatGPTを使って、様々なAWSの構成図を入力し、どこまで正確にIaCコードを生成できるか確認してみます！ GPT-4Vを利用する際
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
【海外で話題】GitHub Copilotは不要だ、自分で作ればいい — オープンソースのAIコードアシスタント「Continue」がすごい
8月19日、海外の技術情報メディアTheRegisterが「自分で作ればGitHub Copilotは不要」と題した記事を公開した。この記事では、オープンソースのAIコードアシスタント「Continue」を中心に、どのようにしてLLM（大規模言語モデル）をローカル環境で実行し、IDEに統合するかについて解説している。 Continueをインストールする前提条件 Continueをインストールし、動作させるには、以下の前提条件を満たす必要がある。 マシン要件: 動作に必要なマシン: 近年のプロセッサを搭載したシステムであれば動作するが、最適なパフォーマンスを得るためにはNvidia、AMD、またはIntelのGPU（6GB以上のvRAMを推奨）が望ましい。Apple Silicon搭載のMacでも動作するが、16GB以上のメモリを推奨する。 Ollamaモデルランナー: Ollamaモデルラ
「AWS CDKに興味を持ったけれど、なかなかコードを書き始められない」と悩んでいませんか？CDKは簡単に始めることができますが、メンテナンスしやすく、壊れにくいコードを書くためには覚えておきたいプラクティスがあります。しかし、すべてのエンジニアがインフラ構築やプログラミングに精通しているわけではなく、…
良いコメントが良い設計を導く
要旨 コメントを適切に記述することは、特にインターフェイス（クラスやメソッド）において重要です。これにより、直感性が高まり、抽象化が十分に行われているかを確認する手助けになります。そのため、コメントはソフトウェア設計プロセスの重要な一部と位置づけられます。 2種類のコメントタイプ まず、コメントを2種類に分類します。 1️⃣ コードをより詳細化するコメント(lower-level comment) 2️⃣ コードをより抽象化するコメント(higher-level comment) どちらも必要なコメントとしつつ、本書では後者のコメントをより重視しています。 1️⃣ コードを詳細化するコメント(lower-level comment) 変数名などに残すタイプのコメントで、宣言した対象の単位や境界値、null許容などの詳細を明示することで、コードの正確性を高めます。こちらのタイプのコメントも必
AIのみで『アングリーバード』を“コピー”したユーザーあらわる。コードは1行も書かず、実際にプレイ可能な『Angry Pumpkins』 - AUTOMATON
AI活用を模索するとあるユーザーが10月31日、『Angry Birds（アングリーバード）』に酷似したゲーム『Angry Pumpkins』を制作したと報告。同作はグラフィックもゲームコードもすべてAIで構築したとして、大きな反響を呼んでいる。 『アングリーバード』は、Rovio Entertainmentが手がけるパズルゲームシリーズだ。同作はAndroid/iOS向けゲームとして大人気に。続編『Angry Birds 2』やPC向け展開もされた。ゲームプレイとしては、スリングショット（パチンコ）で鳥を発射。物理演算や障害物との衝突も計算に入れつつ、フィールド上の敵を倒していくのが目的となる。シンプルなルールで多くのユーザーに親しまれる作品だ。 同作に類似したゲームを「AIのみで構築した」と報告する者があらわれた。AIの活用法を模索するユーザーのJavi López氏だ。同氏は、ルーム
こんにちは！ファインディでFindy Team+開発チームのEMをしている浜田です。 昨今、開発生産性を高めるための取り組みを行っている組織が増えてきていると感じています。 開発生産性を向上させるためには、まずは定量的に可視化することが重要です。 可視化することで現状を把握して、開発組織の伸びしろを発見したり、課題を明らかにし、改善活動に取り組みやすくなります。 一方、定量的な指標に焦点を当てすぎてしまい本質的ではない対応をしてしまい、指標は向上したものの実際の生産性は向上していなかったり、むしろ悪化してしまうこともあります。 この記事では、開発生産性指標を向上させるためにやってはいけないアンチパターンについて紹介します。 デプロイ頻度を向上させるために、デプロイプロセスは変更せずに実施回数を増やした デプロイ頻度はDORAが提唱するDevOpsの4つの指標(Four Keys)の1つであ
技術的負債という言葉がある。もともとは、「楽するために導入したが、メンテにコストがかかるようになってしまった技術や構成」くらいの意味合いで使われているように思う。しかし、そもそも全部が負債ではないか、というのがこのメモの趣旨である。 負債 同僚とSlackで会話していると、「けっきょくどの言語を利用しても負債になるときはなるし、大抵負債になる」といった話になった。言われてみればそうで、基本的にコードというものは書いたそばから負債になっていく。去年書いたコードのことも思い出せない。 そんな中で思ったのだが、そもそも、負債になるコードと負債にならないコードとがあったり、技術が「負債化する」のではなく、コードや技術そのものが負債なのではないか。そして、どの言語で書こうが負債からは逃れることができない。負債にならないコードは存在しない。ゆえに、コードや技術は無ければ無いほど良い、ということになる。
結合テストを書くときはコードベースを分離している
新規開発の設計支援や古いコードベースを甦らせて欲しいという相談をもらったときに、最初にちょろっとコードだけお手本的なコードを書いてから引き渡しているのだが、そのときに必ず結合テストを書くようにしている。 3, 4年前から僕と付き合いがある人からすると、 「「「あの sadnessOjisan がテストを書くだと！！！」」」 という感じだと思うのだが、最近はテストに思うところもあってちゃんと書いている。 そしてそのテストコードだが、基本的にはアプリケーションから分離して書いている。その話をしたい。 OGP OGP は野方ホープで海苔が分離されて出てきた時の画像だ。 アプリケーションから分離したテストとはどういうことか 最終的にはテスト対象のサーバーを Docker コンテナで固めて、そのコンテナに対して HTTP リクエストを投げてその結果や DB の中身を検証するコンテナを docker
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新人プログラマ アンチパターン：原理原則多すぎて脳みそOOMエラー - Qiita
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
今からでも遅くないconsoleを使いこなそう - Qiita
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
もし「GitHub Copilot」を現役弁護士が使ったら？ - MNTSQ Techブログ
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
社内に詳しい人がいない領域のコードを触る時 - Konifar's ZATSU
オブジェクト指向の複雑性を軽減する、データ指向プログラミング入門
JavaScript 実行エンジン V8 の JIT 出力コードを読んでみよう
Python だけで作る Webアプリケーション(フロントエンド編)ーはじめに - Qiita
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
GPT連携アプリ開発時の必須知識、RAGをゼロから解説する。概要＆Pythonコード例
GPT-4oを使って2Dの図面から3DのCADモデルを作る
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
[研究室向け]なぜ君はソースコードのエラーを自分で解決できないのか？ - Qiita
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
ソフトウェアエンジニアのライブラリアップデートの向き合い方 - Uzabase for Engineers
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
開発生産性指標を向上させるためにやってはいけないアンチパターン - Findy Tech Blog
すべてのコードやライブラリ自体が技術的負債である / 高利率な技術と低利率な技術 - Lambdaカクテル