CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
React TypeScript Playground | 便利ツール集 by mosya
React TypeScript Playground | 便利ツール集 by mosya
WordPressのアクションフックの実行履歴を確認する - Qiita
function do_action($tag, $arg = '') { var_dump($tag); global $wp_filter, $wp_actions, $wp_current_filter; ... 見やすさを考えればファイル出力とかのほうがいいかも。 これで任意のページを表示すればアクション実行毎に画面出力されて動作が確認できます。 出力結果 画面ロード前 プラグインを色々いれているのでそのアクションフックも確認できます。 post_typeは1種類しか追加していないのに何回も呼ばれている不思議。 string(16) "muplugins_loaded" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(1
正規表現が嫌いな人のための正規表現チートシート・「I Hate Regex」
I Hate Regexは正規表現が嫌いな人の為に作られた正規表現チートシートです 任意のキーワードで目的を探す事ができて、目的の項目を選ぶと図式で解説しつつコードや実装例も出してくれます 更に使われた式の使用例も書かれているので調べつつ学べるようになっています 例えば電話番号をマッチさせたい場合は上記のページで学べる、といった感じです 目的で探せて、調べると同時に学んだり理解できるようになっている、まさに嫌いな人の為のチートシートですね 本アプリはソースコードも公開されていますので特に学びやすいかなぁと思います。ライセンス明記は無いみたいなので商用利用する際は開発者に問い合わせください I Hate Regex
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。 そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上でビジュアル的にCSSグリッドの設計ができます。 CSS Grid Generatorの使い方 メイン画面です。 マウスでドラッグしてグリッドを設計します。 そしてCSSの設定をダウンロードします。 生成されるテンプレートを見れば、その内容は分かると思います。しかし、これを頭で計算して記述するのは面倒です。複雑なグリッドになれば尚更でしょう。CSS Grid Generatorを使うことで素早く設計を行い、そのコードがゲットできるでしょう。 CSS Grid Generato
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.every編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。環境の影響を受けやすい、根っからのミーハーなフロントエンドエンジニア・ザワです。「ミーハー」という言葉は死語なのでしょうか。 さて、今回のArrayシリーズは、そんなミーハーな私にはたまらないメソッドであるArray.prototype.everyをご紹介しましょう。 「every」と聞くと某ニュース番組を連想してしまいがちですが、「すべての」という意味ですよね。どういうメソッドなのか、この時点ですでに想像に容易いのではないでしょうか。 それではさっそく進めていきたいと思います。 ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ Array.prototype.every()メソッドとは 配列の各要素に対してテストを行い、すべて通った場合にtrueを返します。 テストが失敗した時点でfalseを返して、以降の要素に対してのテ
無料＆登録不要で正規表現を図示してくれる「Regexper」を使ってみた
アプリ開発の場面では、入力されたテキスト内に誕生日などの特定パターンの文字列が含まれているかを確認したり、別の文字列に置き換えたりするときに、正規表現は必須です。しかし、正規表現を誤ってしまうと、アプリケーションによっては、データを破壊してしまったり、誤作動を起こすリスクがあるのも事実。このため正規表現を変更する場合、事前に試験用の環境で試すのが普通ですが、開発現場によっては、試験用の環境であっても簡単に適用できない場合や、本番用の環境しかないなど、試す場面が限られることが考えられます。このとき、机上での検証を行いますが、人の手による検証は、どれだけ実力のある人がチェックしても誤るリスクがあり、不安を拭うことはできません。「Regexper」を使えば、入力した正規表現を無料で、機械的に図示して、読みやすくしてくれるとのこと。複雑な正規表現を入力しても読みやすくなるのか、実際に使ってみました
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
McAnswers
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS