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は、素晴らしいの一言に尽きます。
CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
勉強がてら。「TypeScript使えばいいじゃん」「ES6」とか言わないで。 hogeクラスをつくるとき 1. 一般的なつくりかた // constructor var hoge = function(arg) { this.x = 5; this.y = 10; this.z = arg; }; // メソッド hoge.prototype = { f1: function() { return true; }, f2: function() { return false; } }; var instance = new hoge(1); // hoge {x: 5, y: 10, z: 1, f1: function, f2: function} var hoge = (function() { var FOOFOO = 777; // クラス内定数 // constructor v
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
2009年06月13日22:00 カテゴリLightweight Languages javascript - にはクラスはない かえってわかりにくくなっている感じをかつてさんざん実感したので。 JavaScriptのオブジェクトについて考察してみた - あと味 JavaScriptにおけるほとんど全てのデータはオブジェクトである オブジェクトの定義にもいろいろありますが、ここでは「メソッドを持つ」という狭い意味においても事実だということです。実際に見てみましょう。 p(true.toString()); p("String".toString()); p((1).toString()); p((3.14159265).toString()); p([0,1,2,3].toString()); p({q:"answer to life, the universe, and everythi
※2011.3.30追記 11個目の判断項目を追加しました。 また、「昔はね...」の補足説明を各項目に追加しました。 レガシープログラマ = モダンな言語のおいしい機能をうまく使いこなせていないプログラマ おいらは時々社内システムのコードレビューなんかをやっているのですが、「なんかちょっと前時代的だな〜」とか「ちょっと修正したらC言語でもコンパイルできそうだな〜」って思うことがよくあります。 おいらがレビューする言語は主にC#です。C#やJavaのような比較的モダンな言語のおいしい機能をうまく使いこなせていないプログラマを、ここでは「レガシープログラマ」と呼ぶことにします*1。 そこで、おいらがこれまでに見てきたコードの中から「これはレガシープログラマっぽい」と思った典型的な症例を10個11個挙げてみます。 レガシープログラマの判断項目 使われるローカル変数をすべてメソッドの最初に宣言す
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
以前職業プログラマーなら必ず読むべき「Code Complete」 - $shibayu36->blog;や補足 - 職業プログラマーなら必ず読むべき「Code Complete」 - $shibayu36->blog;で紹介したコードコンプリートを再読した。 Code Complete 第2版 上 完全なプログラミングを目指して 作者:スティーブ マコネル日経BPAmazonCode Complete 第2版 下 完全なプログラミングを目指して 作者:スティーブ マコネル日経BPAmazon 一年前はどちらかというと、コードのスタイルの話とか、条件をどうやって綺麗に書くのかとか、コメントはどう書くのかということを学びたくて読んだけど、今回はクラス設計をどうしていくべきかとか、チームでのエンジニアリングをどうしたら良いかとかを中心に読んでいった。 やっぱり学びたいと思っている内容が違うとそ
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Harry Robertsがブログで、CSSのプロジェクトをうまくスケールさせるためには、詳細度の影響をうまく抑えて、メンテナンス性を高めることがポイントだと解説しています。 どれだけ思慮深くソースの順や継承関係を整理しても、詳細度がトリガーになった上書き起きると、それまでの努力が台無しになる。詳細度のタチが悪いのはオプトアウトできないこと。 であるが、その悪影響をうまくコントロールする策としては、 CSSにおいてセレクタとしてIDは使わないこと。クラスを使うことを上回るメリットはない。そもそも、IDでできることはクラスで
Java8でのラムダの使い方などを説明してきたのですが、構文拡張自体には触れていなかったので、改めてここで簡単に説明しておこうと思います。 まずは、Java8で実際に最もインパクトがある言語拡張、インタフェースのデフォルトメソッドです。 デフォルトメソッドとデフォルト実装 いままでインタフェースには実装をもつことができませんでしたが、Java 8からはインタフェースが実装をもてるようになります。 実装をもつメソッドを定義するときには、キーワードdefaultをメソッドの前につけます。 interface Foo{ void print(String s); default void twice(String s){ print(s); print(s); } } twiceメソッドが実装をもっています。この実装をデフォルト実装といいます。 デフォルトメソッドを実装するクラスで、デフォルトメ
Windows XP(Service Pack 3以降)：32bit版 Windows Vista(Service Pack 2以降)：32bit／64bit版 Windows 7(Service Pack 1以降)：32bit／64bit版 MacOS X：v10.5、v10.6(Intel製CPU版)
作成日：2004.05.18 更新日：2005.06.21 今後、随時書き足して行きます。多分。 はじめに Java は動的にクラスのロードとアンロードが行われる仕組みになっている。 クラスはクラスファイルの形でディスク上やネットワークに配置され、プログラム中でそれらが本当に必要になった段階で JavaVM 上に読み込まれる。 またクラスはその使用が終わった段階でガーベージコレクターによって動的に回収され JavaVM からアンロードされる。 Servlet / J2EE サーバーなどはこの性質を利用して運用中にプログラムの一部を入れ替えるホットスワップ (Hot Swap) を実現している。 だがこの仕組みを実装するには少し工夫がいる。 この文書ではクラスのアンロードを実現するやり方について述べる。 1. クラスのロードとアンロードの基本的な仕組み クラスローダー Java VM がクラ
CSSの:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追加したり変更することなく指定できます。また、コンテンツやフォームなどにも便利な使い方がたくさんあります。 :has(): the family selector by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 先日リリースされたChrome 105, Edge 105で:has()疑似クラスはサポートされ、コンテナクエリ（@containe
テキストの左側と下側だけをボーダーで囲ったデザインの見出しって、いろんなブログで良く見かけますよね。 CSSだけで作る見出しとしてシンプルで使い勝手がいいので僕も多用してます。 「どうやって作ってるんですか？」という質問をいただいたので、CSS初心者向けに見出しのデザインの一例としてご紹介します。
他人から引き継いだプロジェクトの大まかな全体設計を把握したい場合、規模の大きいライブラリの一部だけ取り出して使用したい場合、複雑になってしまったコードをリファクタリングしたい場合等、プロジェクト内のクラスの依存関係が一望できると有益な場面は多いのではないでしょうか。 objc_depというスクリプトを用いると、下記のように、Xcodeプロジェクト内のクラスの依存関係を示す図をコマンド一発で生成することができます。 このスクリプトの使い方、生成される図の見方等を紹介します。 スクリプトの実行方法 次のURLからダウンロードしてきて解凍すると、objc_dep.py というファイルが入っています。 https://github.com/nst/objc_dep そのスクリプトを適当な場所に置き、ターミナルから次のように実行します。 というコマンドになります。 依存関係図を表示 出力される.do
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2018 の投稿記事です。 12月はRubyのリリースが楽しみなk-shogoです。 今までに規模も寿命も様々なRailsアプリケーションの開発に携わってきました。本記事ではそんな自分が「Railsプロジェクトにかかわるならこんな方針を合意できるチームが良いな」と思っていることをまとめます。 どんなことに気をつけているのか Railsでアプリケーションを作成する時、もしscaffoldで事足りるようなものならば取り決めは必要にはなりません。 複雑なアプリケーションだったとしても、一人で開発しコードが全て頭に入っており、今後もずっとメンテナンスできる覚悟があり、過去の自分を常に信頼できるのであればこれもまた方針は不必要です。 コードの規模が大きくなりそう、サービスの寿命が長くなりそう、複数人で開
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2245872982c8e900d7bcc462d8385b1f0845ff9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
この投稿はEdward Z. Yangが2010年に書いた OCaml for Haskellers 、私自身が今年頭に書いた Haskell for OCaml programmers の流れに沿っています。 目次 プロローグ なぜRustを学ぶべきか 直接対応が可能なもの トレイト：Rustの型クラス アドホックなオブジェクトとメソッド 安全な参照 寿命と記憶域、そして管理オブジェクト オブジェクトの共有：RcとArc マクロとメタプログラミング リテラル 謝辞 参照 Copyright and licensing 注 : この記事の最新版は下記サイトで見られます。 http://science.raphael.poss.name/rust-for-functional-programmers.html 他のフォーマット： Source , PDF プロローグ C言語プログラマのための
既に「Google I/O 2012で公開されたJavaScript高速化Tips集 | IDEA*IDEA」や「JavaScriptパフォーマンスを上げるシンプルな13の最適化 | Act as Professional – hiroki.jp by HIROCASTER」で紹介されて話題になっていたJavaScriptの高速化TIPSがhosikitiさんによって和訳されています。 リストでまとめられたリストを日本語で見たいという要望に見事に応えてくれていました！ 1.コンストラクタ関数内ですべてのオブジェクトメンバを初期化する 2.常に同じ順番でオブジェクトメンバを初期化する 3.Numeric型(31bitで表現される符号付き整数)を出来るだけ使う 4.0から始まる連続した値を配列のキーとして使う 5.巨大な配列(64000個以上の要素を持つもの)は予め確保せず、必要になったら随時
[CSS]擬似要素の実用的な使用用途のまとめ
(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使
![[CSS]擬似要素の実用的な使用用途のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a9afecaf0f148dfae555dc1a6b7979e3fdba29c/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-pseudo-elements-01-150x150.png)
http://www.youtube.com/watch?v=OGi8FT2j8hE1 comment | 0 pointsドイツのハンブルグで開催されたDeveloper Conference 2013で、Stack Overflowのアーキテクチャが紹介されてます。 Stack Overflowのネットワークは、110 Q&Aサイト、430万ユーザ、質問760万件、回答1360万件、月間5億6千万ページビュー サーバ25台: ウェブサーバ11台（内9台でほぼトラフィックさばく）、ロードバランサ1台 (+ 予備1台)、DBノード4台、アプリサーバ3台、検索サーバ3台（Elasticsearch）、Redisサーバ２台（キャッシュ、メッセージング） 毎秒質問が投稿されているので、トップページには都度最新の質問を掲載するように更新はできないが、ユーザの回答パターン、質問閲覧パターン、好みのタ
お知らせ 2017/11/26開催の「プログラマのためのUnity勉強会」において、 Unity開発で使える設計の話＋Zenjectの紹介 というタイトルで講演しました。こちらのスライドを先に見てから本記事を参照されることをおすすめします。 はじめに 去年に引き続き、今年もGGJに参加してきました。今回もそのことを書きたいと思います。 今回の内容は以前に投稿したUnity開発で便利だったアセット・サービス紹介 & Unityでのプログラミングテクニックとつながりがあるので、こちらを先に読んでからのほうがわかりやすいかもしれません。 Global Game Jam とは GGJとは全世界同時に行われるゲームジャムのことです。要する、世界規模のゲーム開発ハッカソンです． プログラマ、デザイナ、プランナ、グラフィッカなど様々な役職の人をごちゃまぜに、3～8人程度のチームを組み、48時間でゲームを
Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.
🌱 PlantUML at a Glance 🚀 Getting Started PlantUML is a highly versatile tool that facilitates the rapid and straightforward creation of a wide array of diagrams. Utilizing a simple and intuitive language, users can effortlessly draft various types of diagrams. For a detailed exploration of the language's capabilities and syntax, please refer to the PlantUML Language Reference Guide. If you are n
【PHPで学ぶデザインパターン入門】第1回 Strategyパターン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアの王です。 今回はデザインパターンと、デザインパターンの中の「Strategy」について紹介したいと思います。 デザインパターンとは？ 端的にいうと、「よくある問題へのよくある解決策」です。 ここでは、あくまでもソフトウェア設計の場合に限定しているのですが、さまざまなコンテキストで活かせる概念です。 「今までの経験上、この手の問題なら、この方法（パターン）でやればうまくいくよ！」という経験則は誰にでもあると思います。それがゲームの場合なら「攻略法」、料理の場合なら「レシピ」、語学の場合なら「定型文」だったりします。 ソフトウェア設計の場合、特にオブジェクト指向プログラミングにおいて言うなら、「デザインパターン」とは、過去のソフトウェア設計者が失敗に失敗を重ね、試行錯誤の中から導き出した再利用しやすいノウハウの集大成のようなものです。 そう、要するに、柔軟性、拡張性、再
はじめに プログラマのみなさんはコードを書くときによく英語を使うと思います。 だけど、英語って難しいですよね。 僕自身もそうですが、クラスの名前やメソッドの名前、テーブルのカラムの名前を考えたりするときは「これ、英語でなんて言うんだろう？？」と頭を抱えることが多いはずです。 他にも、トラブルが発生したときにWebサービスのサポートに英語でメールを書いたりする場合もあります。 そんなとき、安易に頼ってしまいがちなのが、オンラインの和英辞典や自動翻訳の類いです。 ですが、和英辞典や自動翻訳だけが適切な英語を探す唯一の方法ではありません。 むしろ、僕に言わせれば和英辞典や自動翻訳は質の悪い英語を作り出してしまう原因になりやすいです。 なので、僕はできるだけ和英辞典や自動翻訳には頼らないようにしています。 でも、こんなふうに言うと「えー、そんな！じゃあ和英辞典や自動翻訳以外にどんな方法があるの！？
Rubyといったオブジェクト指向言語を学ぶと、メソッドの定義方法としてインスタンスメソッドとクラスメソッドという2通りの定義方法があることを学ぶと思います。しかし、言語自体のガイドブックには「定義方法にインスタンスメソッドとクラスメソッドがある」と書いてあるだけで、大抵その使い分けについては書かれていません。 そういう訳で、このエントリではその使い分けについて少し考えてみたいと思います。理論的に厳密な使い分けを目指すというよりは、そもそも使い分けの検討が全くつかない！という方に向けて、その指針の一助となることを目指します。 インスタンスメソッドとクラスメソッドとはそもそものところ、Rubyといった「オブジェクト指向の考え方」を実装した言語の機能です。その機能がなぜあるのか？というそもそものところは、オブジェクト指向の考え方にさかのぼることになります。 そこで、インスタンスメソッドとクラスメ
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
Javaでは、クラス生成やメソッド呼び出しをソース上に直接書いてコンパイル時に決定されるだけでなく、文字列（クラス名）を使ってクラスを生成したり、 メソッド名の文字列を使ってメソッドを呼び出したりすることが出来る。 クラス（インスタンス）生成 [/2015-04-26] Classのメソッド [/2021-03-21] instanceof [2007-02-16] Classからのインスタンス生成（非推奨） [/2018-04-30] インスタンス生成 [/2013-08-06] 総称型による限定 [2007-05-02] 内部クラスのインスタンス生成 [/2008-02-10] メソッド呼び出し staticメソッド実行 [/2017-07-23] メソッド実行（引数なし） [/2017-07-23] メソッド実行（引数あり） [/2017-07-23] 可変引数メソッド [/2015
Java 2 Platform SE 5.0
Java Is the Language of Possibilities Java is powering the innovation behind our digital world. Harness this potential with Java resources for student coders, hobbyists, developers, and IT leaders.
Google Translation PHP wrapper : CodeDiesel Google翻訳をPHPから使って翻訳できるクラスライブラリが公開されています。 Google AJAX Language API を使ったもので、JSONデータを返してくれるAPIを使って簡単に翻訳出来ます。 例えば、実際に翻訳をする場合は次のようにクラスを new して translate メソッドに翻訳したい文書と from, to の言語コードを入れればOK。 <?php require_once('googleTranslate.class.php'); $gt = new GoogleTranslateWrapper(); $test = "Bonjour de cette partie du monde"; echo $gt->translate($test, "en", "fr"); ペ
Java5以降では総称型（generics）がJava言語に導入されています。総称型自体は、最近の静的な型付けのプログラミング言語で珍しいことではなく、現在の最新版では.NETのC#やVisual Basicにも導入されています。一般的には総称型をサポートするクラスライブラリを自分で正しく定義することは非常にスキルがいるが、事前に定義されたクラスを使うだけであれば、それほど難しくないとされています。しかし、Java言語の総称型は本エントリで説明するように特殊なところがあり、単に利用するだけでも他の言語に比べて遥かに難しいところがあるというのも事実です。特に総称型をパラメータ化する際に指定するワイルドカード型（List<? extends Serializable>など)の意味を正しく理解して使いこなすことは簡単なことではありません。その結果、昔のJDK1.4までのように型パラメーターのない
Python実践入門 ── 言語の力を引き出し、開発効率を高める (WEB+DB PRESS plusシリーズ) 目次 目次 はじめに 通常のclassとdataclassの比較 dataclassの良いところ データを格納する箱であることを明確にできる。 クラス定義を短くかける 型情報を書くことでデータ構造が見やすくなる。 Printしたときに、そのままオブジェクトの中身を表示できる。 asdict関数でdictに変換できる。(Dictから簡単にJSONにも変換できる) Dict(JSON)からdataclassを作ることもできる Frozen引数を使うことで、簡単にイミュータブルにもできる。 データが作られたときに、自動後処理機能を追加することができる。 dataclassの残念なところ コレクションの初期化 参考資料 MyEnigma Supporters はじめに C++ユーザやJ
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
The html blog | 10 code snippets for PHP developers I've compiled a small list of some useful code snippets which might help you when writing your PHP scripts PHP開発者が便利に使える１０のスニペット集が紹介されていました。 メールアドレスチェック簡単化 php-email-address-validation クラスを使ったメールアドレスチェック http://code.google.com/p/php-email-address-validation/ include('EmailAddressValidator.php'); $validator = new EmailAddressValidator; if ($valida
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのコーディング設計について考える事 – YATのBLOG
【javascript】やさしいクラスの作り方 - Qiita
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
javascript - にはクラスはない : 404 Blog Not Found
2011-02-18 - ITは芸術だ レガシープログラマかどうかを判断する10項目
CSSの疑似クラス「:focus-within」が素晴らしい理由
コードコンプリートを再読した - $shibayu36->blog;
CSSの詳細度をうまく操る - ワザノバ | wazanova
Java8で最もインパクトのある構文拡張、デフォルトメソッド - きしだのHatena
DTI ハイブリッドモバイルプラン
Java のクラスアンロード (Class Unloading)
【CSS初心者向け】ブログで良く見かけるシンプルな見出しの作り方 - ディレイマニア
Xcodeプロジェクト内のクラスの依存関係を図示する - Qiita
Railsアプリケーションの実装で気をつけている8つのこと – PSYENCE:MEDIA
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
関数型プログラマのためのRust | POSTD
Google I/O 2012発 JavaScript高速化Tips集の日本語訳
Stack Overflowのアーキテクチャ - ワザノバ | wazanova
グローバルゲームジャムでクラス設計をやった話2017 - Qiita
和英辞典・自動翻訳だけじゃダメ！もっといい英語名を見つけるためのTips集 - Qiita
インスタンスメソッドとクラスメソッドはどのようにして使い分けるべきか？（Rubyの場合） | mah365
Xamarin、C#言語によるiOS/Androidアプリ開発を実現する“Xamarin 2.0”を発表
Javaリフレクションメモ(Hishidama's Java Reflection Memo)
Google翻訳をPHPから使って翻訳できるクラスライブラリ:phpspot開発日誌
Java総称型のワイルドカードを上手に使いこなすための勘所 - 達人プログラマーを目指して
Python3.7で導入されたdataclass入門 - MyEnigma
CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
PHP開発者が便利に使える１０のスニペット集:phpspot開発日誌
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス