エンジニアに読んで欲しい技術書90選 - Qiita
はじめに タイトル通り、読んで欲しい（圧）技術書をたくさん集めてみました。自身の担当から外れる領域に関しては、会社の人に協力を仰ぎ、編集しました。「何を読めばいいかわからない」、「次の読む本を探したい」などのように考えている方の参考になればと思います。 また、大きく、 ・新米エンジニア ・脱新米エンジニア と分けてまとめたので、参考にしてみてください。 技術書のススメ 技術書の紹介の前に、技術書で得られるものについて説明したいと思います。全然読み飛ばしてもらって大丈夫です。この章から本の紹介を行なっていきます。 技術書は体系的な構成となっているため、技術書を読むことで、 ・論理的な思考力が身に付く ・技術の歴史・背景を知れる ・技術の知識、手法を学べる これらを学ぶことができます。論理的な思考力、知識はわかるけど、技術の歴史・背景を知ってどうするんだと思う方もいるかもしれません。しかし、歴
はじめに この度、転職とスキル向上を目的に個人サービス(Football League)をリリースしました。 ITに関する学習は約1年ほど、その内の半年でサービスの開発をしました！ まだまだ修正箇所はあるものの、ひとまず形にはなったのでサービスの使用技術や開発過程を共有したいと思います。 私自身、独学で学習してきたのでそういった方々にとって少しでも参考になれば幸いです。 ご報告 現在権利関係について、本サイトで利用している外部APIの提供者様にお問い合わせしているため、メンテナンス状態とさせて頂いております。 ・メンテナンス時間 2024/01/18 15:45〜未定 自己紹介 商業高校卒(サッカー部⚽️) 25歳 青森住み🍏 職業はトマト農家です🍅 どのようなサービスか 本サービスは、欧州5大リーグのサッカーの試合結果やチーム情報などを閲覧することができるWebサイトです。 ただ情報
HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
HTTP/3｜Webエンジニアが知るべき新常識 ─ QUICやコネクションマイグレーションなどを学ぶ 新しい通信プロトコルとして普及が進んでいるHTTP/3については、エンジニアHubでも過去に概論的な記事を掲載しています。今回はアプリケーション開発者が自社サービスでHTTP/3を採用することを想定して、仕様上の留意点や、どのように使い始めるか、そしてサイトを制作する際に注意しておきたいポイントまでを藤吾郎（gfx）さんに解説していただきました。 本記事ではHTTP/3およびその通信プロトコルであるQUICを、アプリケーション開発者として活用する立場で入門します。HTTP/3は、HTTP/1.1とHTTP/2に続く新しいメジャーバージョンのHTTPプロトコルです。HTTP/3はHTTP/1.1およびHTTP/2を置き換えるポテンシャルを持っています。将来的にほとんどのインターネットトラフィ
はじめに サービス URL GitHub リポジトリ 対象読者 自己紹介 アウトドア般若心経とは ポケモンGO の般若心経バージョン サービス開発のきっかけ サービスの概要 使い方 1. Google アカウントでログイン 2. 般若心経の全文を一覧で管理 3. 写経した写真を取り込む 4. 取り込んだ写真をトリミング 5. 写真の登録 6. 保存した内容の確認 7. メモの登録 8. 全体地図の確認 9. マイページ 技術スタック 技術選定の理由 アーキテクチャ ディレクトリ構成 開発方針とこだわり Getting Real UI / UX レスポンシブデザイン パフォーマンス ロゴ 機能面 コスト面 プロモーション オリジナルグッズ製作 アカウントを開設 ドッグフーディング 旅ログ 開発中に苦労したこと Google ログイン認証 外部ストレージサービスの設定 E2E テスト E2E
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
はじめに 今回はエンジニア向けのチートシートをまとめていきます。 チートシートを利用することで、 作業効率が上がる 大枠を掴める 学習になる といった恩恵が得られます。 ただし、毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく、「チートシートを使う中で徐々に体で覚えていく」ことが重要です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者 作業効率を上げたい人 コードを書くテクニックを知り合い人 VsCodeチートシート ChatGPTに関するチートシート プロンプト集がまとめられています。 Markdown記法 チートシート Markdownもエンジニアは必ず使うといっても過言ではないものなので、早めに習得することをおすすめします。 Qiita公式が出しているというこ
Q by LivesenseをWordPress on EC2からHugo on Cloudflare Pagesに移行しました - LIVESENSE ENGINEER BLOG
はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by Livesense）を、Hugo on Clouflare Pagesに移行しました。 q.livesense.co.jp 弊社のWordPress運用はやや特殊で、エンジニアがサーバーにSSHして
細かすぎ…？FigmaやWebで文字の表示位置がズレる問題を知っておこう - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の
みんな独立したプロパティ使ってる。使ってないのお前だけ。transformは与えられた要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです。 transform: translate(-50%, -50%);で中央寄せ(現在ではあまり使用されないレガシーな手法です)といった静的な配置に用いることもありますが、主にCSSアニメーションを実装する際に使われることが多いです。 そのtransformプロパティの値のうち傾斜(skew)以外は現在では独立したプロパティで指定することができます。 /* 従来の書き方 */ .sample { transform: translateY(12px) rotate(90deg) scale(1.1); } /* 独立した書き方 */ .sample
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
次のような方にオススメ！ ブログの更新しないのかな？ 何かあったのかな？ ブログ、止めちゃうのかな？ ご利用者の方へ 本ブログの更新再開のお知らせ 2022年3月31日より更新していませんでした、本ブログ『ぴっぴのはてなブログでアフィリエイト』は2023年8月4日より更新を再開することにしました。 本ブログをご利用されている方には、大変ご不便をおかけいたしましたことを、お詫び申し上げます。 ぴっぴは新たな気持ちでブログの更新に取り組んでまいりますので、これまで同様のご愛顧を賜りますようお願い申し上げます。 ぴっぴのはてなブログでアフィリエイト 運営者 ぴっぴ 記事を書いた人 ひよこブロガー ・ブログ開始69日で合計1万PV ・ブログ開始75日で収益獲得 ・アクセスの約90％が検索流入 応援していただけるとスゴク嬉しいです！ 読者になる 詳しく見る ( ﾟдﾟ)ﾊｯ! 自己紹介させてください
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
【概要】 こんにちは〜 現在、プログラミングスクールRUNTEQで未経験からWebエンジニア転職を目指して学習中のなおやです。 今回は、GitHubのプロフィール欄を充実させて、自分の実力をつよつよに見えるようにしていきましょう〜！ ※今回はつよつよに見えるプロフィールを作ることが目的です。 (実際の実力を担保するものではないのであしからず。。。。。) 【対象者】 ・GitのCloneや基本的操作などが行える状態の人 ・就活で見せるようにGitHub欄をつよつよにしたい方 ・GitHubをつよつよに見せて、「なんかできそう！」と思われたい方 【趣旨】 自身のGitHubのプロフィールを作成することで、 完成イメージは下記です。 【実装方法】 実装方針としては、とてもシンプルです。 ①.ReadMeを作成する。 ②.ReadMeの作成を行い、反映されているか確認する。 以上、2点を行うことで
Tailwind CSS 3.4では、動的ビューポート単位のサポートが追加されたほか、親要素だけでなく子要素に基づいてスタイル設定を可能にする:has()疑似クラスのサポート、親から子のスタイルを設定する*バリアントの追加が行われている。 さらに、幅と高さを同時に設定するユーティリティsize-*、小さなセクションにおいてバランスの取れた見出しを実現するtext-wrap: balance、サブグリッドのサポート、min-width、max-width、min-heightスケールの拡張、不透明度スケールの拡張、grid-rows-*スケールの拡張、強制カラーモードのスタイルを調整するバリアントforced-colors、強制カラーモードのデザインへの影響を制御するユーティリティforced-color-adjust-autoおよびforces-color-adjust-noneが新たに加
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
Who doesn’t love a good front-end tool? In this roundup, you’ll find useful front-end tools that were popular last year and will help you speed up your development workflow. Let’s dive in! Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These t
Me, at CSS Day 2022, talking about Specificity (and the Cascade) Whenever a post about Specificity in CSS – and by extension the Cascade itself – gets published I get very excited as it’s a core concept of the language that everyone should know. The more articles on this, the better! However, I also sometimes raise one of my eyebrows as sometimes I, unfortunately, encounter something that’s just o
読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察 ｜https://wp.yat-net.com/name
2023年 08月 11日 読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察 カテゴリ： CSS3 HTML タグ：ルビ 日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。 例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… 「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
フルスタックエンジニアについて - nunulkのプログラミング徒然日記
はじめに この記事について 前回書いた記事に何気なく以下のように書いたんですが、読み返したところ自分の中で十分に言語化できてなかったなと感じたので、前回の補遺的な位置づけで、「フルスタックエンジニア」とはなにか、自称することへの忌避感はどこから来ているのか、について考えてみます。 自分としてはあまりフルスタックと名乗りたくない、という気持ちはありまして、 nunulk-blog-to-kill-time.hatenablog.com フルスタックエンジニアとは 前回の記事にも自分で定義を書きましたが、我流でない解釈も載せておくほうがいいと思ったので、Wikipedia にある定義を載せておきます。 A full-stack developer is expected to be able to work in all the layers of the application (front
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
トップページ - hatebcustom
Welcome To My Blog A Theme For Latest Posts Click on the image 21.11.2023. はてなブログ: コードブロックに行番号を振る簡単な方法(jQuery) 本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連番を付ける簡単な方法を紹介します。 jQueryライブラリとCSSスタイリングの組み合わせで、読みやすく整形されたコード表示が可能となります。 READ MORE 20.11.2023. はてなブログ: タイトルに背景画像を付けるテクニック(CSS3) この記事では、はてなブログの記事タイトルにCSS3を使用して背景画像を追加するテクニックを紹介します。角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。 READ MORE 16.11.2023. アクセシビリ
“どこかで見た広告”風数式パズルゲーム『Formula Warriors』ブラウザ向けに無料公開。二択の数式を選び取り、正しいルートを突き進む - AUTOMATON
Game5は1月3日、『Formula Warriors』をブラウザ向けにリリースした。PCおよびスマートフォンより無料プレイ可能だ。 『Formula Warriors』は、広告で見かけるゲームをテーマとした数式パズルゲームだ。プレイヤーは左右に表示される二つの数式から一つを選び、ゲーム画面手前の青い数字（自軍の仲間）を増やしていくことを目指す。数式の「x」は現在の自軍の数を示しており、選んだ数式に従ってプレイヤーの数字が増減していく。最終的には、ゴールにいる敵よりも多くの仲間を集めることでステージクリアとなる。 また本作には「Beginner」から「Insane」まで五つの難易度が存在。それぞれの難易度に応じて、異なった数式がステージに現れる仕組みとなっている。三つ目の難易度「Advanced」からは急激に難しくなり、短い時間で複雑な数式を見極める必要がある。特に最難関の「Insane
達人出版会
［令和6年度］基本情報技術者 超効率の教科書＋よく出る問題集 五十嵐 順子 徹底攻略 データベーススペシャリスト教科書 令和6年度 株式会社わくわくスタディワールド 瀬戸美月 著 徹底攻略AWS認定SysOpsアドミニストレーター - アソシエイト教科書＆問題集［SOA-C02］対応 鮒田 文平, 長澤 美波, 日暮 拓也, 奥井 務, 渡辺 樹, 山下 千紗, 伊藤 翼 世界標準MIT教科書 アルゴリズムイントロダクション 第4版 第2巻 高度な設計と解析の手法・高度なデータ構造・グラフアルゴリズム Thomas H. Cormen, Charles E. Leiserson, Ronald L. … 問題解決の教科書 CITA式問題解決ワークブック 市岡 和之 はじめてのType-C電子工作 じがへるつ スッキリわかるJava入門 実践編 第4版 中山 清喬(著), 株式会社フレアリ
おはようございます！ 昨日からはJavaScriptをもっと知りたいというテーマで、現代の開発環境に至るまでの歴史を調べてみるという記事を書いています！ 歴史的な背景を知ることで、JavaScriptの理解を深めて開発に活かしたいというのが目的で、その中でも「モジュール」「パッケージ管理」「ビルド」という概念がよく分かることを目指しています。 元ネタはこの動画です！非常にわかりやすくて面白いのでぜひ見てください！ この記事は、この動画の内容を自分なりに解釈して分からないところを調べながら書いています。 それでは本題に進みましょう！ 前回のおさらいとJavaScriptの課題の背景 前回は、JavaScriptの誕生と初期の課題についての記事でした。 ざっとおさらいしていきましょう。 1995年に登場したJavaScriptは、Webページを動的にする画期的な技術でした。しかし、その初期には
結論から伝えますと、現在の画像フォーマットの指定は主にAVIFでフォールバックにビルド元のJPEGかPNGで問題ないと思います。（ただし後述する懸念点あり） Astroを利用している方ならPictureコンポーネントを次のような指定にするといいでしょう。この指定の場合はAVIFのみ生成されて、フォールバックに圧縮されたJPEGかPNGが指定されます。 <Picture formats={['avif']} src={src} alt={alt} widths={widths} sizes={sizes} loading={loading} fetchpriority={loading === 'eager' ? 'high' : null} decoding="async" />AVIFは2024年現在すべてのモダンブラウザでサポート済みAVIFはAV1ビデオ圧縮標準を基に開発された次世代
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
完全未経験が半年で個人サービスをリリースした話 - Qiita
アウトドア般若心経が楽しめるWebアプリをリリースしました - Roll With IT
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
【エンジニア向け】生産性を上げるチートシートまとめ - Qiita
えっ！？まだtransformプロパティを使ってるの！？ ｜ TAKLOG
A Blog Post With Every HTML Element
ブログの更新再開のお知らせ｜お元気ですか？ - ぴっぴのはてなブログでアフィリエイト
GitHubのプロフをつよつよにみせる - Qiita
オープンソースのCSSフレームワーク「Tailwind CSS 3.4」がリリース
Top Front-End Tools Of 2023 — Smashing Magazine
Misconceptions about CSS Specificity
Old Dogs, new CSS Tricks
JavaScriptとブラウザ戦争の関係を知りたい - Qiita
AVIFの普及でWebPはもういらないかもしれない ｜ TAKLOG