カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
はじめに 私事で恐縮ですが、先日、コロナ禍で 2 年半ほど延期していた結婚式をしました。そこでのプロフィールムービー制作を Unity でやってみましたので、本記事ではそのお話をしようと思います。 過去に友人の結婚式のムービー制作を任された時は After Effects か Premiere で作っていたのですが、それぞれ本 1 冊読んだ程度なので、自分の能力的にはスライドショー的に画像や文字を配置する程度が限界でした。自分たちのものはスプラトゥーン風のムービーにしたいなぁと思い、もう少し色々やれるかも & 勉強にもなるかもと思って Unity でやってみることにした次第です。プライバシーの関係でムービーの共有はできないのですが...、部分部分を簡単にご紹介したいと思います。 概要 基本方針は次のような感じです。 全体は Timeline を使って作成 出力は Unity Recorde
8月30日の夜から9月1日に掛けて、寝台特急サンライズ出雲で鳥取＆島根に行ってきました。 一番の目的はサンライズ出雲に乗ることですが、せっかく山陰に行くならと島根県の玉造温泉に宿泊して、伯耆大山の登山や2つの連結汽水湖、松江城、出雲大社なども巡って遊んできました。 寝台特急サンライズに乗りたい 近畿日本ツーリストの個人ツアーを利用する 米子下車、現地移動はレンタカー、玉造温泉泊 東京駅で餃子＆ビール、駅弁を買い込んでサンライズ出雲へ サンライズ出雲：B寝台 ソロ サンライズ出雲出発、ラウンジで駅弁を食べ個室で過ごす 目覚めると岡山、山陽から山陰へ サンライズ出雲が米子駅に到着 特急やくも＆新幹線で東京に戻る復路 寝台特急サンライズに乗りたい 新型コロナの感染などもあり以前に増して人混みの苦手意識が高まり、週末やお盆に山に行くのも混雑や渋滞がダルいな…… と何もしないでいるうちに、このまま夏
フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
2021年版、Web標準技術で作るモックアップ | CyberAgent Developers Blog
サイバーエージェントでは今年、CA PoCMOCK CONTEST 2021というコンテストが開催されました。PoCMOCKは造語でそれぞれPoC(検証)・MOCK(モックアップ)を表し、エンジニア・クリエイターのアイディアやスキルを駆使して技術的・品質的・社会的な何かしらの課題を解決したプロダクトの一部を制作し披露する場になりました。 私自身は運営チームとしてコンテストに関わっていたのですが、社員賞を決めるための投票システムを作るためにクリエイター・PMとともに参加することにしました。 投票システムの前提として、2日間の開発期間で作りきること、また作ったプロダクトはその後すぐに社員が利用できる状態であることが求められていました。 本記事ではその制作を通じて発見できたことや工夫したところを紹介します。 NOTE: 本記事の内容はアプリケーション制作時(2021年8月)の情報に基づいています
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
米Twitterのジャック・ドーシーCEOが、長らくユーザーがリクエストしている投稿したツイートを修正する機能を「たぶん、絶対追加しないだろう（we'll probably never do it）」と語った。米Wiredが1月14日に公開したYouTube動画で確認できる。 ドーシー氏はこれまでも投稿後の編集機能について、何度か取り組みについて発言しているが、きっぱり追加しないと語ったのはおそらくこれが初めてだ。 今回ドーシー氏は、TwitterはもともとSMSのようなサービスとして立ち上げ、SMSの、一度送信したら訂正できない感覚を維持したかったこと、Twitterの場合はRT（リツイート）で拡散した後でオリジナルを完全に変更した場合、RTした人の意図とかけ離れた拡散になる可能性もあることなどを説明した。 簡単なタイプミスやリンク切れを修正するために例えば60秒間は修正できるようにする
yagisan-reports開発チームリーダーのterurouです。 デンキヤギでは yagisan-reports という「Webで使うことを前提とした」商用の帳票エンジンを開発しています（厳密にはyagisan-reportsはエンジン単体の製品ではなくクラウドサービスとして開発していますが、この記事では帳票エンジンとして記載しています）。 yagisan-reportsとは 「Webブラウザ単体で動作すること」にこだわっている帳票エンジン です。 2023年11月現在、アーリーアクセス版を提供しています。既に3社5システムで本番稼働しており、一番長いものでは3年ほど本番稼働を続けています。開発中のシステムも含めると、さらに数社あります。 元々はアーリーアクセス版の公開から早めにパブリックベータに移行する計画だったのですが、ありがたいことに早期から大口の導入相談が複数あり、こちらを優
クルーズ船観光が好きな人が多いオーストラリアで、シドニーなどへ戻ってきた１０隻以上の乗客の下船が許されない事態になっている。船内には計数万人がいるとみられる。国内の感染者が３千人を超える状況で感染をさらに広げる心配からだ。豪紙オーストラリアンなどが２７日、伝えた。 【画像】「もう時間ない」イタリア悲鳴 同紙によると、２６日夜の時点でシドニー沖には、地元ニューサウスウェールズ州が入港を認めない１１隻がいる。いずれも乗客２千～３千人規模の大型船だ。州は乗客の下船を認めるのは「入港の新たな方法が決まった後」と説明している。 この措置は、シドニーに１９日、到着したクルーズ船「ルビー・プリンセス号」の失敗例の後に始まった。同号では、到着時にインフルエンザのような症状があった乗客と乗員計１３人が新型ウイルスの検査を受けたが、結果が出る前に州当局がほかの乗客２７００人の下船を許してしまった。翌日に４人の
Go Mistakes Book Details Go言語でありがちな間違い このページは『100 Go Mistakes』の内容をまとめたものです。一方で、コミュニティに開かれたページでもあります。「ありがちな間違い」が新たに追加されるべきだとお考えでしたら community mistake issue を作成してください。 Jobs Is your company hiring? Sponsor the Japanese version of this repository and let a significant audience of Go developers (~1k unique visitors per week) know about your opportunities in this section. 注意 現在、大幅に多くのコンテンツを追加して強化している新しい
My new error...
2023 年度の僕のエラーハンドリング について書きたい。 昨日Safe Data Fetching in Modern JavaScriptを読んでいて、fetch に限った話ではないが一家言ある内容だったので書きたくなった。 おそらくやりすぎだとか非効率と言われる点はあると思うので、みんなの一家言も教えて欲しい。 対象は Typescript での サーバー開発想定だが、TS であればクライアント開発にもほとんどに当てはまる話だと思う。 例外のスローではなく Result 型を使う Result は失敗するかもしれないという文脈を与えてくれる型 エラーハンドリングの戦略として例外を投げるのではなく、Result 型を返すやり方がある。 Result 型というのは export type Result<T, E> = Ok<T> | Err<E>; export interface Ok
はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れるというものがあります。「崩れる」と一言で言っても、わかりずらいと思うので落ち着いて考えをまとめてみました。その結果、下記の2パターンに分かれるという結論に行きつきました。 マージンが不可解な挙動をする コンポーネントとして使い回しずらい この二つの観点から、マ
コンテンツとしては楽しめるけどアプリはオワコンというようなツイートがバズってしまう『ウマ娘プリティダービー』。 リリース当初は他を寄せ付けない覇権スマホゲームのオーラがあったのにどうしてこんなことになってしまったのか。 ウマ娘はオワコンなどというネット記事まで出始めたが、その内容があまりに的外れだと批判されていたので、「はー、クソゲー。」と言いながらもリリース日から未だに毎日プレイし続けるUG（ウマガイジ）の自分がウマ娘のクソだと思うところ述べる。 深刻なコンテンツ不足 チャンミはもはや手荷物検査でしかない チャンミ育成はストレスの塊 クライマックスとかいう欠陥シナリオ 距離適正Sの効果が強すぎる 良いのはストーリーとキャラクターだけ アプデが毎回ユーザーが本当に求めている姿からちょっとズレている そして、改善までに時間がかかる ついでにイベントがどれも微妙 新規参入不可なつくり これから
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
九州支社技術部(九州・中四国事業部)所属。自作パソコン好きで、ハードウェア選定の仕事を与えると喜ぶ。最近は何でもコンテナにしたい教に入信し、コンテナ化の機会を虎視眈々と狙っている。 こんにちは、九州支社技術部(九州・中四国事業部)所属のy-morimotoです。 コンテナ使いたいけど、今までの構築手順がそのまま使えないので、いまいち導入できない。 そんなあなたにお勧めのコンテナ「仮想マシンのように使えるコンテナ」が実はあるんです。 それは「Linux Containers (LXC)」です。 １．LXCとは Docker が アプリケーションコンテナ化 だとしたら、LXC は OSコンテナ化 といったイメージになります。 （Kernelプロセス部分は共用で独立していないので、実際はOS丸ごとでは無いのですが） OS丸ごと風なので、使用感が仮想マシンに近くなるというわけです。 ただ、コンテナ
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
米Twitterが、“会話”（コメントのつながり、スレッド）をRedditのようなネスト化したツリー表示にするテストをしていると、ソーシャルサービスの新機能発見で定評のある個人開発者のジェーン・マンチュン・ウォン氏が11月27日、自身のツイートで紹介した。 リプライがネスト化されるので、各ツイートがどのツイートへのリプライかが分かりやすい。また、ツリー上の個々のツイートをクリックすると、そのツイートの会話が表示される。 米TechCrunchによると、この機能はTwitterの新機能をテストするアプリ「twttr」でテストしているものという。Twitterは同メディアに対し、この機能は2020年に正式にローリングアウトすると語った。 Twitterは2月、会話の表示方法改善のためのパブリックβプログラムを開始し、3月にtwttrを公開した。 11月に正式機能になったリプライ非表示は、このプ
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ
「多様性の統一」が選挙でうまくいかない理由
直近の選挙では、共産党が盛んに「多様性の統一」と言う言葉を用いていた。この言葉はおそらくUnity in diversityの訳語として想定している。Unity in diversityは、政治の文脈では、独立した集団を形成してもおかしくない様々な文化や個性を持った人たちが1つの社会、ないしは政治体制を作る、といった意味合いで用いられている。 共産党が今回この言葉を用いたのは、概ね「野党共闘」に対応して、様々な異論があってもまとまってが1つの政党に投票しましょうと言う呼びかけに近い形であった。 ＡＳＥＡＮ（東南アジア諸国連合）の標語に、「ユニティー・イン・ダイバーシティー」というのがある。多様性の統一ということです。これが一番強いと思う。自公には多様性がない。こっちは多様性で行きましょう。多様性の統一、「ユニティー・イン・ダイバーシティー」で新しい政治をつくろうではありませんか。 多様性の
（6/22 注：書き足りないと思っていた箇所を補って加筆修正しました） エンジニアのbonotakeです。Ideinに入ってかれこれ3年以上経ちますが、Ideinでブログ記事を書くのは初めてです。 今日は、ソフトウェア設計の全く新しい考え方について書かれた "The Essence of Software" という本の紹介をしたいと思います。 この本の著者はMIT教授でソフトウェア工学の世界的な研究者であるDaniel Jacksonです。形式手法Alloyの発明者、と言ったほうが通じる人には通じるかもしれません。形式手法とは、ありていにいえば、数理論理学を駆使してソフトウェアに潜むバグを論理的に駆逐する手法です。 （個人的な宣伝ですが、彼の書いたAlloyの本を以前翻訳して出版しました。） そんな彼が昨年11月に新著を出版したというので、ほぼその日に買いました。……ですが、本を開いてみる
Amazon Web Services ブログ AWSサーバーレスバッチ処理アーキテクチャの構築 この投稿は、AWSソリューションアーキテクトであるReagan RosarioとWWPSソリューションアーキテクトであるMark Curtisによって書かれました。バッチ処理は多くの組織にとって基礎となるもので、大量の情報を効率的に自動化した形で処理することができます。ユースケースとしては、ファイル取り込み処理、キューベースの処理、トランザクションジョブ、さらに重いデータ処理のジョブなど、多岐にわたります。 この記事では、ファイル取り込み処理を実装するためのバッチ処理を、サーバーレスに実現するための方法を説明していきます。今回の例では、オーケストレーションにAWS Step Functions、オンデマンドのコンピューティングにAWS Lambda、データストアにAmazon S3、メールの送
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
Was ist die Muttersprache Jesu? イエスの母語は何か？—紀元1世紀ローマ帝国のポリグロシアについて | 筑波大学エジプト学・コプト学研究室（宮川研究室）
Was ist die Muttersprache Jesu? イエスの母語は何か？—紀元1世紀ローマ帝国のポリグロシアについて 2021.12.24 Was ist die Muttersprache Jesu? イエスの母語は何か？—紀元1世紀ローマ帝国のポリグロシアについて 「言語学な人々」アドベントカレンダー12月25日 本記事は、北星学園大学の松浦年男先生がご企画なされた「言語学な人々」というアドベントカレンダーの企画のために書かれました。本記事はこのアドベントカレンダーの最終日のためのものです。「言語学な人々」のアドベントカレンダーの最終日の執筆を承りまして、言語学と聖書学・初期キリスト教文献学・コプト学・エジプト学 と 人文情報学 を学んできたので、これらの知識から何かできないのか考えました。いろいろ面白いアイデアがたくさん思い浮かんできたのですが、どれにしようか迷って、ツイ
Slackはそのクライアントがそれなりに、かなりよくできていて、これでほとんど困ることはないんだけど、そうは言ってももうちょっとプログラマブルに取り扱いたいこともある。 そういう場合にもよいAPIが用意されていて、Real Time Messaging API ってのがある。こいつはWebSocketでSlackの発言をはじめ、あらゆるイベントのJSONを送りつけてくれるやつ。ひとまずこれを標準出力に流すことができれば、あとは好きに料理できるはずだ。 というわけで作ったのがこちら。書いたことなかったのでRustです。ちょうどいいネタだった。 GitHub - motemen/slack-stream-json slack-stream-json というバイナリが、SLACK_TOKEN 環境変数を設定した上で起動してやると、RTM APIによって得られたイベントのJSONをそのまま標準出力
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
こんにちは、リファクタリング大好きなミノ駆動です。 リファクタリングを主任務とするアプリケーションアーキテクトとして、弊社READYFORのエンジニアリングを推進しています。 ドメイン駆動設計に登場する 腐敗防止層 を用いたリファクタリングで、システムの変更容易性を向上したお話を解説します。 本記事の概要 イビツな構造を隔離する腐敗防止層を用いて技術的負債を解消 ふたつの橋作戦でリファクタリングの安全性を向上 設計技術書 『良いコード/悪いコードで学ぶ設計入門』 出版のお知らせ 背景 弊社READYFORのシステムは、モノリシックなRuby on Railsのサービスとして実装されています。 システムが解決したいドメイン（業務活動）にはさまざまなセグメントがあり、その中に審査オペレーションがあります。 審査オペレーションとは、クラウドファンディング実行者さんが申し込みを提出してからプロジェ
（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
初心者向けしばき隊講座｜田山たかし
夏の米騒動の時から少しづつしばき隊に関するツイートは増えてたのですが、今回のコラボ問題でそれが一気に増加しました。しばき隊に対する注目度が上がるのは大歓迎なのですが、結構間違った情報も流通しています。 そこでしばき隊結成前からしばき隊関係者を観測し続け、途絶えることなく茶々を入れ続け、しばき隊から目の敵にされている私が、しばき隊について分かりやすくまとめましたので参考にしてください。 1.しばき隊とは何か 一言で言うと、「弱者に憑依して反撃できない相手を常に探し続ける好戦的で反社会的な団体」です。 まず「弱者に憑依」ですが、これは自分たちが優位なポジション（＝正義）を取るためです。近年は在日朝鮮人、部落解放同盟、フェミニスト、沖縄反米活動家、同性愛者たちの様々な悪事や不祥事が暴かれてインターネット上に流通しており、彼らに対する反発も相当なものとなり、しばき隊をイラつかせる原因となっています
スマートウォッチやフィットネストラッカー用のリストバンドの95％が、病気の原因となるおそれがある有害な細菌に汚染されていたとの研究結果が発表されました。この研究では、菌が比較的少ないリストバンドの素材や、菌を減らすのに効果的な洗浄方法も解明されています。 Prevalence and Disinfection of Bacteria Associated with Various Types of Wristbands https://scirp.org/journal/paperinformation.aspx?paperid=125218 Smartwatch Bands Are Loaded With Potentially Harmful Bacteria, Study Warns : ScienceAlert https://www.sciencealert.com/smartw
JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。 テストに使ったスクリプト類は https://github.com/minoki/javascript-limits に置いてあります。 文字列の長さ まずは文字列の長さです。 規格には The String type is the set of all ordered sequences of zero or more 16-bit
Python実践入門 ── 言語の力を引き出し、開発効率を高める (WEB+DB PRESS plusシリーズ) 目次 目次 はじめに 通常のclassとdataclassの比較 dataclassの良いところ データを格納する箱であることを明確にできる。 クラス定義を短くかける 型情報を書くことでデータ構造が見やすくなる。 Printしたときに、そのままオブジェクトの中身を表示できる。 asdict関数でdictに変換できる。(Dictから簡単にJSONにも変換できる) Dict(JSON)からdataclassを作ることもできる Frozen引数を使うことで、簡単にイミュータブルにもできる。 データが作られたときに、自動後処理機能を追加することができる。 dataclassの残念なところ コレクションの初期化 参考資料 MyEnigma Supporters はじめに C++ユーザやJ
SmartHRでは開発にRuby on Railsを広く採用しています。 今日は負債解消のために、開発しているサービスでRailsのモデル名をすべて変更した話を紹介します。 既存のモデル構造のつらみ 私達が開発しているサービスでは、モデルの親子構造が分かりやすいということで、モデルをネストした構造にしていました。 例えば、 User に紐づくプロフィール画像 User::ProfileImage は、 app/models/user/profile_image.rb に配置する具合です。 パッと見の構造が分かりやすいのですが、時が経つにつれて次のようなつらさが顕在化してきました。 Railsの規約(推奨ルールのようなもの)に則っていないので、関連定義が冗長になる テーブル名が長くなる。 外部キーや関連名が長くなる。 関連名と外部キー名が一致せず、カラムを呼び出したいときにDB定義を見ないと
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
結婚式のプロフィールムービーを Unity で作ってみた - 凹みTips
寝台特急サンライズ出雲で行く鳥取＆島根、復路は特急やくもと新幹線のぞみ - I AM A DOG
JavaScriptの非同期処理をじっくり理解する (2) Promise
HTML+CSSコーディングの言語化 - Qiita
Next.js って App Router が出てきて平和じゃなくなったよね
TwitterのドーシーCEO、「ツイート編集ボタンはたぶん絶対追加しない」
なんで今さら帳票エンジンを新規開発しているのか
クルーズ船の乗客数万人、下船許されず 豪州沖に１４隻（朝日新聞デジタル） - Yahoo!ニュース
Japanese Version - 100 Go Mistakes and How to Avoid Them
私がマージンをできるだけ使いたくない理由 - Qiita
【ウマ娘】アプリはオワコンと言われてしまう理由 - 水を得たさかな
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
仮想マシンのように使えるコンテナ | IIJ Engineers Blog
Twitter、“会話”のネスト化ツリー表示を来年ローリングアウト
JavaScriptの非同期処理をじっくり理解する (3) async/await
Zennで発生した障害の原因と行なった対策のまとめ
"The Essence of Software"が提唱する全く新しいソフトウェア設計の考え方｜Idein株式会社
AWSサーバーレスバッチ処理アーキテクチャの構築 | Amazon Web Services
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
ターミナルでSlackを読む - 詩と創作・思索のひろば
DDDの腐敗防止層を用いた変更容易性向上 - READYFOR Tech Blog
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
2019年、2020年のJavaScript - 別にしんどくないブログ
スマートウォッチのベルトは「有害な細菌まみれ」との研究結果、病原菌が付きにくいベルトの素材はどれ？
JavaScriptの上限・限界値 - Qiita
Python3.7で導入されたdataclass入門 - MyEnigma
Railsのモデル名をすべて変更した話 - SmartHR Tech Blog
2022年のCSS | gihyo.jp