jQueryは終わったのか論争を、終わらせにきました。
jQueryがオワコンかどうかと擦られ続けてきた話題をまた持ち出すのか…というコーダーやエンジニアのため息がビシビシ聞こえております。 「終わらせにきた」なんて偉そうなことを言っておきながら結論はハッキリしないんだろう…というエンジニアのため息もビシビシ聞こえております。 はい。またjQueryの話題です。おっしゃる通り結論はハッキリしません。結論を先に言っちゃいますと「築きたいキャリアによって答えは変わる」です。 やっぱりか…と離脱するのはあと少しだけ待ってください。お願いします。 ライブラリやツールを取り巻く状況ってちょこちょこ変わるじゃないですか。jQueryもそうです。なので今回は本日2023年9月14日の最新情報に私自身の見解を交えてjQueryの行方を書いていきます。 これからjQueryを勉強しようか迷っているプログラミング初学者の方々には特に参考になるかと思います。すでにj
SVG フィルタで縁取り文字を実装する方法 | grip on minds
CSS で縁取り文字を表現するのに、まず考えられるのは -webkit-text-stroke を使用する方法で、以下のようなコードになります。 .text { -webkit-text-stroke: 1px #000; } ここで、color: transparent を指定すると塗り色が透明になり、縁取りの罫線のみでテキストを表示することができます。 .text { color: transparent; -webkit-text-stroke: 1px #000; } 以下は、フォントファミリーに「Verdana」を指定した例です。 -webkit-text-stroke で縁取り文字を実現できる この -webkit-text-stroke ですが、さきほどの塗りを透明にした状態（color: transparent）でバリアブルフォント（Variable Fonts）を指定する
Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
✅ Dev Mode利用可 ❎ Dev Mode利用不可 2. Figma Variables Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。 Variablesを取り込みたい理由 今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data The trojanized jQuery attack has been spread on npm, GitHub and elsewhere since May. A trojanized version of jQuery has been spreading on the npm JavaScript package manager, GitHub and elsewhere, for use in a jQuery attack, security researchers have discovered. Phylum researchers said they have been monitoring the “persistent supply chai
WordPressのテーマを作る羽目になったWebエンジニアへ
はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界
GitHub - e18e/e18e
The e18e (Ecosystem Performance) project is an initiative to bring together the groups and individuals who are passionate about improving performance of the JavaScript ecosystem. Many ongoing efforts are already happening in this space, from dependency tree cleanups to performance optimizations, and much more. Our aim is to provide a space for contributions, ideas and knowledge sharing around the
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
アコーディオンのスライドアニメーションはCSS2行で実装できる – TAKLOG
jQueryのslideToggle()のような要素をスライドしながら表示非表示切り替えるアニメーション。かつてはJSで要素の高さを取得する必要があったりCSSだけで行うとアニメーションにムラがあったり…とjQueryを使わないと何かと面倒な実装が必要でしたが、現在ではCSS2行を用意して、そのうちの1行を切り替えるだけで実装が可能です（transitionプロパティは除く）。しかも全モダンブラウザ対応済みです。 結論実装方法は至極簡単で、開閉されるパネル要素にdisplay:gridを指定し、grid-template-rowsプロパティの値を0fr↔1frに切り替えるだけです。 ※overflow:hiddenを指定した子要素1つが必要です。
令和5年に知っているべきTypeScriptのnamespaceの知識
TypeScriptにはnamespaceという構文が存在します。この構文はTypeScript初期からある独自構文の一つですが、現在では特殊な用途以外では使う理由が無いため、よく知らないという方も多いでしょう。 実際、一部のレアケースを除いてnamespaceを使う必要はありませんが、それでも知識としてあったほうが良いことが多少あります。この記事ではこの部分を解説します。 型に.でアクセスできるやつ TypeScriptを使っていると.を使って型にアクセスする機会があるでしょう。例えばReact.FCなどです。 実は、親.型名のように.を使って型にアクセスできるのは、namespaceの機能です。上のコードでのReactは単なる型や単なる変数ではなくnamespaceなのです。 試しに、Foo.BarがstringとなるようにFooを定義してみてください。これができる方法は2つしかありま
Gutenberg使わないブロックを非表示にする方法３選
ブロックを非表示にする方法を調べていた時に感じたことのメモです この記事ではコードを少し書いてブロックを隠す方法を書いていきますがノーコードでやりたい人は以下の記事を参考にどうぞ。 ブロックマネージャーで設定 一番簡単でコアの人も非表示にしたいならこれを推奨していると思う デメリット ウィジェット サイトエディター などではカスタム出来ない 多分これはいづれ直る(コアが直している) 多分関連↓ ユーザーごとに変更したり権限を設定することは出来ない option値のように初期値を変えたりは出来ない(たぶん) ブロックマネージャーソースコード該当箇所 inserterをfalseにする コアの非推奨ブロックもこの方法を使っている デメリット コピペや複製などすれば今後も使える PHPで非表示にする add_filter( 'allowed_block_types_all', function
アクセシビリティに対応したSlickの紹介 | 電脳情報局
オススメ！PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装：CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery：アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ（操作/設定）2020年10月29日 JavaScript はじめに アクセシビリティに対応したSlickを見つけたのでメモ書き・・ Slick Slider (1.8.1) のバージョンをベースに、 WCAG 2.0 / 2.1準拠にしてあるそうです。 accessible-slick 下記から
ACFのWYSIWYGメニュー(Full/Basic)をカスタマイズする方法について | ahalog – Web Blog
この記事ではACF(Advanced Custom Fileds)のWYSIWYGメニューを調整する方法をご紹介します。 個人的にツールバーの定義名称が不明で、調べるのに少し時間を費やしたので取りまとめてみました。 ACFのWYSIWYGにはFullとBasicがある WordPressの従来の標準WYSIWYGでは一つしかメニューバーがありませんが、ACFではフィールドタイプからWYSIWYGを選択すると、ツールバーが表示されFullとBasicを選択することができます。 標準のFullでは以下のメニュー構成となります。 Basicでは以下の構成となります。 このままでも便利ですが、それぞれ過不足が出てきて調整したくなることも多いと思います。そこでこの記事ではカスタマイズする方法を2種類ご紹介します。 ツールバーをカスタマイズ (プラグイン利用) 手軽に行うにはTinyMCE Advan
リッチ スニペットと構造化データについて - ウェブマスター ツール ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google は、Google 検索がページのコンテンツを正確に理解するよう努めています。構造化データを使用してページの意図を伝えると、Google はそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を様々なサイトで活用できるように標準化したデータ形式で、例えばレシピページでは材料、加熱時間と加熱温度などを詳細に提供できます。 構造化データをページに追加する理由 構造化データを追加することで、よりユーザーの興味をひく検索結果を表示できるようになり、ウェブサイトの利用も増えることが期待されます。これはリッチリザルトと呼ばれます。サイトに構造化データを実装しているウェブサイトの実例をいくつかご紹介します。 Rotten Tomatoes では、構造化デー
json-ldの仕組みとは？SEO効果と構造化マークアップの方法を解説 | WEB集客ラボ byGMO（GMO TECH）
Webサイトを上位表示させるためには、検索エンジンに評価してもらう必要があります。 SEO対策には構造化データというものがよく使われますが、その構造化データのフォーマットとして「json-ld」があります。 一見難しそうに感じる言葉かもしれませんが、仕組み自体はあまり難解なものではありません。 今回は構造化データを用いる際に必要な知識「json-ld」がどんなものなのか、どのように使っていくのかをご紹介します。 json-ldとは？ json-ldとは、簡単に言うと「構造化データを記述する際のフォーマット（仕様）」のことです。 構造化データのフォーマットはいくつか種類がありますが、json-ldはその中でもGoogleが推奨しているので、現在最も一般的に使われているフォーマットと言えます。 そもそも「構造化データ」とは？ json-ldを知るには、そもそも構造化データとは何かを把握したほう
【WordPress独自関数】「JSON-LD」形式の構造化データ「Article」を実装する関数 - Qiita
SEO対策にもなる「JSON-LD」形式の構造化データ「Article」をWordPressに実装する方法を紹介します。 プラグインを使用すればインストールして管理画面から設定するだけで設置することも出来ますが、今回はプラグインを使わない方法を紹介したいと思います。 「JSON-LD」形式の構造化データ「Article」の記述方法 今回は「JSON-LD」形式の構造化データ「Article」の作成方法を紹介します。 <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://google.com/article" }, "headline": "
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adding rel attribute to ACF fields which contains links
ravixUI
Topic: Giving access to Search Regex plugin | User Role Editor
iPhone用のWebインスペクタを使おうとすると「調査可能なアプリケーションがありません」といわれる - Qiita
Rich Results Test - Google Search Console