ESLintのルールから考えるJavaScriptのundefined判定 - Qiita
JavaScriptのundefined判定にはいくつか記載方法がありますが、言語仕様を理解しないまま記述すると、ブラウザや開発環境によっては思わぬバグを生み出すことがあります。 この記事では、JavaScriptにおけるundefinedの判定方法を複数紹介し、ESLintのルールから適切な判定について検討してみようと思います。 ESLintとは ESLintは、JavaScriptやTypeScriptの静的コード解析ツールでです。 単純な構文エラーの検出やルールを設定することで一貫性のあるコーディングスタイルを維持しやすくなります。 JavaScriptにおけるundefinedの判定パターン JavaScriptでundefined判定をしたいとき、いくつかの書き方が考えられます。 パターンとしてはざっとこんなものでしょうか。 厳密等価演算子（===）を使用する
スラッシュの有無だけでセキュリティにとんでもない大穴が空いてしまうNginxのありがちな設定ミスについて実例を踏まえて専門家が解説
多機能なウェブサーバーとして2004年に登場したNginxは、2023年6月時点では業界トップシェアとなるほど人気を集めるサーバーです。そんなNginxの設定において、スラッシュを一つ付けるか付けないかの差で大きなセキュリティホールができてしまう問題について、大手パスワードマネージャーやGoogle製のツールの例をとりあげてセキュリティアナリストのダニエル・マツモトさんがブログで解説しています。 Hunting for Nginx Alias Traversals in the wild https://labs.hakaioffsec.com/nginx-alias-traversal/ Nginxの設定には、特定のURLへのアクセスをどう処理するべきかを記述できる「location」というディレクティブが存在しており、URLをサーバー内のファイルに対応させるのによく利用されています。例
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
カスタマーサポートだけど、開発チームに敬意が持てない
うちの会社のシステム、ほぼ毎日いろんなバグが見つかってお客さんからクレームがきてる。 バグが直った時に、slack上では開発チームに「修正ありがとうございます」って送ってるけど、なんで自分たちが「ありがとうございます」と言っているのかよくわからない。 開発チームが品質の悪いシステムをつくって、 お客さんがバグを見つけて怒って、 カスタマーサポートがお客さんのサンドバッグになって、 開発チームがバグを直して、 カスタマーサポートが開発チームにお礼を言う。 なにかがおかしい。なんだこれ。 自分で引き起こした問題を自分で解消してなぜ感謝される構図になっているんだろうか。ただのマッチポンプじゃないか。 カスタマーサポートはお客さんをサポートするための仕事なんだよ。 不出来な開発チームのための緩衝材じゃないんだよ。 本当はサポートだけじゃなく、サクセスみたいなことも色々やっていきたいと思ってるよ。
【TypeScript】超実践的テクニック集【Reactなし】 - Qiita
はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript（Reactなし）のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック（tipsレベルですが）をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
高単価のフリーランス案件で仕事するときに意識していたこと｜Katsuma Narisawa
フリーランスのWebエンジニアとして仕事をする上で、いつも気をつけていたことをつらつらと書いてみます。 フリーランスやっている人、興味ある人の参考になれば。 ※情報商材みたいなタイトルになったけど中身は真面目（多分） ※（一行だけ宣伝）今はSALESCOREでCTOやってます！積極採用中です！自分に興味もっていただけた方、お気軽にご連絡ください！ 自分についての情報フリーランスのWebエンジニアを2年半 当時はRails, Vue.js, Reactがメイン(2018-2020) 情報系の大学院 → メガベンチャー2年 → スタートアップ2年からの独立 今はSALESCOREのCTO 単価は相場の最高額くらい お金の話あんまりしたくないが、みんな興味あると思うので一応 一度お世話になったFindy Freelanceさんの募集を数年ウォッチして、自分がFindyさんで受けた案件が頭を抜けて
Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 - ICS MEDIA
ブラウザ上で共同編集ができるデザインツールのFigma。今回は、Figmaのワークスペース（チーム、プロジェクト、ファイル、ページ等）の関係性を説明します。 Figmaのワークスペースは、課金の仕組みにも大きく関わっているため、しっかりと理解しておきましょう。デザイナーだけでなく、マネージャーなど決裁権を持つような役職の方にとっても役に立つ内容です。 全体のワークスペースイメージ Figmaのワークスペースは、チーム（Team）を中心に構成されています。チームは、複数のプロジェクト（Project）を持ち、プロジェクトは複数のファイル（File）を持ちます。さらに、ファイルの中には複数のページ（Page）を持ちます。 無料のスタータープランを利用している場合、プロジェクトは1つしか作れず、ファイルやページは3つまでしか作れません。 有料のプロフェッショナルプランを利用している場合、このよう
エンジニアが選ぶ「開発者体験が良い」イメージのある企業「Developer eXperience AWARD 2023」ランキング上位30を発表
エンジニアが選ぶ「開発者体験が良い」イメージのある企業「Developer eXperience AWARD 2023」ランキング上位30を発表 一般社団法人 日本CTO協会(本社：東京都渋谷区／代表理事：松岡剛志、以下：日本CTO協会)は、ソフトウェアエンジニアをはじめとする技術者にとって各社が"開発者体験※1"に関して、どれくらい魅力的な発信をしているか「開発者体験ブランド力」を調査するためのアンケートを実施し、上位30社のランキングを2022年より発表しています。 本活動は、各社のエンジニア採用力強化の指針となるだけでなく、開発者体験の向上と透明性/オープンネスなどの企業文化の重要性が広く認知されることを目的とするものです。 2023年は技術者合計615名を対象に、「開発者体験ブランド力」調査・集計を実施し、上位30企業を選出いたしました。その上位各社を『Developer eXpe
尾身茂氏「コロナ第9波の入り口では」…5類移行1か月で感染2.5倍 : 読売新聞
【読売新聞】 政府の新型コロナウイルス感染症対策分科会長を務めた尾身茂氏は１４日、東京都内で開かれた病院団体の会合で、「（流行の）第９波の入り口に入ったのではないか」と語った。新型コロナの感染症法上の分類が５類に移行して１か月間で、
次世代の画像ファイル形式「JPEG XL」はAVIF形式よりもファイルサイズが11％小さく画質は13％高いことが報告される
「JPEG XL(JXL)」は、独自の圧縮アルゴリズムを使用して、画像やイラスト、スクリーンショットを圧縮することができる次世代のJPEG形式です。そんなJPEG XLは従来の圧縮率が高い画像ファイルフォーマットである「AV1 Image File Format(AVIF)」よりもファイルのサイズが約11％削減されるだけでなく、画質の面でも約13％AVIFよりも優れていることが報告されています。 Jon Arne S.: "So Safari will support jxl 🥳 .…" - Mastodon https://mastodon.online/@jonarnes/110514451857948151 2021年10月に規格化されたJPEG XLは、GoogleのPIKやCloudinaryのFUIFを基に開発されました。JPEG XL形式は、オリジナルデータに戻せる可逆圧縮
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
M2 Ultraのベンチマークがすごいらしい
狙っている方の背中を押せる数字かと。 先日のWWDC 2023で発表された、Mac ProとMac Studioに搭載されるM2 Ultraチップ。Appleのふんわりとした説明じゃなくて、数値だ数値！ ってなっていると思います。 はい、皆さん待ち続けていたであろう、M2 UltraチップのGeekbench 6のベンチマークスコアが登場しました。 Image: Appleシステム名はMac 14,14。スコアは結構ばらつきがありますが、最大値付近だとシングルコアが2800、マルチコア21,700付近という感じ。 さて、このスコアがどんなものかというと、MacRumorsによれば、2019年に発売された最速のIntel版MacPro（Xeon W-3275M）よりも2倍高速。M2 UltraのMac Proの価格が6,999ドルから（日本では104万8800円から）なのに対して、28コアの
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
｢クックパッド｣は何故こんなにも凋落したのか
コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕
Adobeが画像生成AI「Firefly エンタープライズ版」で作った画像で訴訟された場合は全額補償すると発表、自社AIは権利侵害していないという自信の表れ
Adobeが2023年6月8日に、独自のジェネレーティブAIを企業など法人向けに提供する「Adobe Firefly エンタープライズ版」を発表しました。Fireflyは、Adobeが権利を保有する画像やパブリックドメインの画像など著作権的にクリアな画像のみでトレーニングされており、Adobeは「Fireflyで画像を作った企業が権利侵害で訴訟を起こされた場合には法的に補償する」としています。 アドビ、「Adobe Firefly エンタープライズ版」を発表 https://www.adobe.com/jp/news-room/news/202306/20230608_firely-and-express-to-enterprises.html Adobe will cover any legal bills around generative AI copyright issues ht
Vue3の衰退を招いたのは<script setup>とCompositionAPIかもしれない という考察 - Qiita
[6/8 12時頃追記] Vueは死んでないし殺すつもりもないし私はVueが大好きだ、誤解しないでほしい Vue3でOptions APIは消えてないし今後消えていく方向のAPIでもないし挫折した人もこっちつかって再挑戦してほしい [6/8 11時頃追記] 「俺はComposition API使えてるぞ！」「便利じゃん！何をいってるんだこいつは！」 あなたはすごい、でもVueを挫折した人の話を聞くに、Composition APIが「アタリマエでしょ？」の雰囲気の前にうまく馴染めず散っていったという話で、Composition API自体は好きです Vue3の衰退を招いたのは<script setup>かもしれないCompositionAPIという考察 ほとんど肌感であり、根拠のない妄言だと思ってもらって構わないのだが、Vue3のリリース以降Vueが流行から離れつつあり、その原因は<scr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁が公開している『ウェブアクセシビリティ導入ガイドブック』がお勧めらしい／「電車内で動画を見たいのにイヤホンを忘れた」ときにも役立つみんなのためのデザイン
フロントエンドリアーキテクトの話
手を動かして始めるアクセシビリティ改善
